/* Typo globale */
#header, #primary-menu, #primary-menu .menu-link, .mega-menu-content {
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}

/* Item "PRODUCTS" avec méga­menu */
#primary-menu .menu-container > li.mega-menu {
  position: static; /* permet au panneau d'occuper toute la largeur */
}

/* Panneau */
#primary-menu .mega-menu-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 9999;
  display: none;
  background: #fff;
  border-top: 2px solid #1d5ea8;      /* liseré bleu fin */
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  padding: 28px 0 36px;
}

/* Affichage au survol / focus */
#primary-menu .menu-container > li.mega-menu:hover > .mega-menu-content,
#primary-menu .menu-container > li.mega-menu:focus-within > .mega-menu-content {
  display: block;
}

/* Contenu interne */
#primary-menu .mega-menu-content .container {
  max-width: 1200px;  /* même largeur que le site */
  margin: 0 auto;
  padding: 0 24px;
}

/* Ligne & colonnes */
#primary-menu .mega-menu-content .row {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 colonnes */
  gap: 28px;
}

/* Colonne */
.mega-menu-column.ogura-col-5th {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Titre de colonne */
.mega-menu-column .og-col-title .menu-link > div,
.mega-menu-column .og-col-title span.menu-link > div {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  color: #5b6b83;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Image bloc (background) */
.mega-menu-column .og-col-image {
  width: 100%;
  height: 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* fidèle à la maquette */
  background-color: #f3f6fb; /* léger fond gris bleuté */
  border-radius: 10px;
  margin-bottom: 12px;
}

/* Liens */
.mega-menu-column a.menu-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  text-decoration: none;
  transition: color .2s ease;
}

.mega-menu-column a.menu-link:hover {
  color: #1d5ea8;
}

/* Petits items de démo "test" */
.mega-menu-column .menu-item { margin: 0 0 4px; }
.mega-menu-column .menu-item:last-child { margin-bottom: 0; }

/* Barre du menu principal (liseré bleu fin en haut) */
#header .full-header, #header, #header-wrap {
  border-bottom: none;
}
#primary-menu.with-arrows > ul > li > a.menu-link > div {
  font-weight: 700;
}

/* Ajuste le dropdown classique pour matcher Raleway */
#primary-menu .sub-menu-container {
  font-family: "Raleway", sans-serif;
}

/* Responsive */
@media (max-width: 1024px) {
  #primary-menu .mega-menu-content .row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 640px) {
  #primary-menu .mega-menu-content .row {
    grid-template-columns: 1fr;
  }
}

/* --- Hotfix méga-menu TwentySeventeen --- */

/* 1) Le panneau doit pouvoir dépasser du header */
#header, #header-wrap, #primary-menu { overflow: visible !important; }
#primary-menu { position: relative; z-index: 1002; }

/* 2) L'item mega-menu ne doit PAS enfermer le panneau */
#primary-menu .menu-container > li.mega-menu { position: static !important; }

/* 3) Le panneau pleine largeur, caché par défaut */
#primary-menu .menu-container > li.mega-menu > .mega-menu-content {
  position: absolute !important;
  left: 0; right: 0; top: 100%;
  display: none; /* affiché au survol ci-dessous */
  border-top: 2px solid #1d5ea8;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

/* 4) Affichage au survol / focus clavier (desktop) + classe .is-open (mobile) */
#primary-menu .menu-container > li.mega-menu:hover > .mega-menu-content,
#primary-menu .menu-container > li.mega-menu:focus-within > .mega-menu-content,
#primary-menu .menu-container > li.mega-menu.is-open > .mega-menu-content {
  display: block !important;
}

/* 5) Très important : NE PAS cacher les UL internes du méga-menu
      (le thème parent masque .sub-menu-container par défaut) */
.mega-menu-content .sub-menu-container {
  display: block !important;
  position: static !important;
  left: auto !important; top: auto !important;
  opacity: 1 !important; visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
}

/* 6) Grille 5 colonnes, comme la maquette */
#primary-menu .mega-menu-content .container { max-width: 1200px; margin:0 auto; padding: 0 24px; }
#primary-menu .mega-menu-content .row { display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }

/* 7) Style colonnes, titres, images */
.mega-menu-column.ogura-col-5th { list-style:none; margin:0; padding:0; }
.mega-menu-column .og-col-title .menu-link > div,
.mega-menu-column .og-col-title span.menu-link > div {
  font-family:"Raleway", sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:#5b6b83; margin-bottom:12px;
}
.mega-menu-column .og-col-image {
  width:100%; height:110px; background-position:center; background-repeat:no-repeat;
  background-size:contain; background-color:#f3f6fb; border-radius:10px; margin-bottom:12px;
}
.mega-menu-column a.menu-link { font-family:"Raleway", sans-serif; font-size:14px; font-weight:600; color:#2c3e50; text-decoration:none; }
.mega-menu-column a.menu-link:hover { color:#1d5ea8; }

/* 8) Raleway forcé sur le header/menu */
#header, #primary-menu, #primary-menu .menu-link, .mega-menu-content {
  font-family:"Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Responsive */
@media (max-width:1024px){ #primary-menu .mega-menu-content .row{grid-template-columns:repeat(2,1fr);gap:20px;} }
@media (max-width:640px){  #primary-menu .mega-menu-content .row{grid-template-columns:1fr;} }

/***** O G U R A  —  méga-menu : correctifs finaux *****/

/* Assure que le panneau peut dépasser */
#header, #header-wrap, nav#primary-menu { overflow: visible !important; }

/* L’item qui porte le méga-menu ne doit pas “clipper” le panneau */
nav#primary-menu > .menu-container > li.mega-menu { position: static !important; }

/* Panneau : alignement pleine largeur sans double centrage */
nav#primary-menu > .menu-container > li.mega-menu > .mega-menu-content{
  position: absolute !important;
  top: 100%;
  left: 0; right: 0;
  width: auto !important;                 /* ⟵ supprime le 100vw */
  transform: none !important;             /* ⟵ supprime translateX(-50%) */
  margin-left: 0 !important;              /* ⟵ supprime le calc() négatif */
  display: none;                          /* visible au hover ci-dessous */
  background: #fff;
  border-top: 2px solid #0a59a0;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 24px 0;
  z-index: 1100;
  font-family:"Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Affichage (desktop + clavier) */
nav#primary-menu > .menu-container > li.mega-menu:hover > .mega-menu-content,
nav#primary-menu > .menu-container > li.mega-menu:focus-within > .mega-menu-content{
  display:block !important;
}

/* Très spécifique : NE PAS masquer les UL internes dans le panneau */
nav#primary-menu .mega-menu-content .sub-menu,
nav#primary-menu .mega-menu-content .sub-menu-container{
  display:block !important;
  position:static !important;
  left:auto !important; top:auto !important;
  opacity:1 !important; visibility:visible !important;
  transform:none !important;
  min-width:0 !important; box-shadow:none !important; background:transparent !important;
  list-style:none; margin:0; padding:0;
}

/* Grille 5 colonnes (flex) */
nav#primary-menu .mega-menu-content .container{max-width:1200px;margin:0 auto;padding:0 24px;}
nav#primary-menu .mega-menu-content .row{display:flex;flex-wrap:wrap;gap:28px;}
nav#primary-menu .mega-menu-content .row > .sub-menu-container{flex:0 1 calc(20% - 28px);} /* 5x */

/* Styles titres/typo identiques au site d’origine */
nav#primary-menu .mega-menu-content .og-col-title .menu-link > div,
nav#primary-menu .mega-menu-content .og-col-title span.menu-link > div{
  font-family:"Raleway", sans-serif; font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; color:#5b6b83; margin-bottom:12px;
}
nav#primary-menu .mega-menu-content a.menu-link{
  font-family:"Raleway", sans-serif; font-size:14px; font-weight:600; color:#2c3e50; text-decoration:none;
}
nav#primary-menu .mega-menu-content a.menu-link:hover{ color:#0a59a0; }
nav#primary-menu .mega-menu-content .og-col-image{
  width:100%; height:110px; background:#f3f6fb center/contain no-repeat; border-radius:10px; margin-bottom:12px;
}

/* Responsive */
@media (max-width:1024px){
  nav#primary-menu .mega-menu-content .row{gap:20px;}
  nav#primary-menu .mega-menu-content .row > .sub-menu-container{flex:0 1 calc(50% - 20px);}
}
@media (max-width:640px){
  nav#primary-menu .mega-menu-content .row{gap:16px;}
  nav#primary-menu .mega-menu-content .row > .sub-menu-container{flex:1 1 100%;}
}

/* === Menu niveau 1 : typo Raleway === */
#header-wrap nav#primary-menu > .menu-container > li > a.menu-link > div,
#header-wrap nav#primary-menu > .menu-container > li > span.menu-link > div,
#header-wrap nav#primary-menu > .menu-container > li > a.menu-link,
#header-wrap nav#primary-menu > .menu-container > li > span.menu-link {
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700;              /* adapte si tu veux 600/800 */
  font-size: 14px;               /* adapte si besoin */
  letter-spacing: .02em;
  text-transform: uppercase;     /* enlève si tu n’en veux pas */
}

/* === Plus de flèches ▼ dans le menu === */
nav#primary-menu.with-arrows .menu-item-has-children > a.menu-link:after,
nav#primary-menu .menu-item-has-children > a.menu-link:after {
  content: none !important;
}

nav#primary-menu .menu-item-has-children > a .icon-angle-down,
nav#primary-menu .menu-item-has-children > a svg.icon-angle-down,
nav#primary-menu .menu-item-has-children > a .svg-fallback.icon-angle-down {
  display: none !important;
}

/* Au cas où le parent pose un background-image comme caret */
nav#primary-menu .menu-item-has-children > a.menu-link {
  background-image: none !important;
}

/* === Police & styles identiques N1/N2/N3 (comme l'original) === */
#header-wrap nav#primary-menu a.menu-link,
#header-wrap nav#primary-menu .menu-link > div,
#header-wrap .mega-menu-content a.menu-link,
#header-wrap .sub-menu-container a.menu-link {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #666666 !important;
  text-decoration: none !important;
}

/* hover/active (couleur du site d’origine) */
#header-wrap nav#primary-menu a.menu-link:hover,
#header-wrap .sub-menu-container a.menu-link:hover,
#header-wrap .mega-menu-content a.menu-link:hover,
#header-wrap nav#primary-menu .current-menu-item > a.menu-link {
  color: #0a5399 !important;
}

/* Nettoyage des héritages du parent */
#header-wrap nav#primary-menu,
#header-wrap nav#primary-menu .menu-container,
#header-wrap nav#primary-menu li,
#header-wrap .sub-menu-container {
  font-family: "Raleway", sans-serif !important;
}

/* === Suppression totale des flèches / carets / icônes ▼ === */
nav#primary-menu.with-arrows .menu-item-has-children > a.menu-link:after,
nav#primary-menu .menu-item-has-children > a.menu-link:after,
nav#primary-menu .menu-item-has-children > a.menu-link > div:after,
nav#primary-menu .menu-item-has-children > a.menu-link svg,
nav#primary-menu .menu-item-has-children > a.menu-link .icon-angle-down,
nav#primary-menu .menu-item-has-children > a .svg-fallback.icon-angle-down,
nav#primary-menu .menu-item-has-children > a.menu-link use[href*="icon-angle-down"],
nav#primary-menu .menu-item-has-children > .dropdown-toggle {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Si un caret est dessiné via border/background côté parent */
nav#primary-menu .menu-item-has-children > a.menu-link {
  background: none !important;
}

/* Harmoniser le padding cliquable (optionnel, ajuste si besoin) */
#header-wrap nav#primary-menu > .menu-container > li > a.menu-link {
  padding: 14px 16px !important;
}
#header-wrap .sub-menu-container a.menu-link {
  padding: 8px 12px !important;
  display: block;
}

/* Titre de colonne (N2) non-cliquable + noir */
.mega-menu .og-col-title .menu-link,
.mega-menu .mega-title .menu-link,
.og-mega-title {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #000 !important;
  cursor: default !important;
  pointer-events: none !important; /* empêche tout clic */
}

/* Image sous le titre (depuis la description) */
.og-col-image {
  width: 100%;
  height: 120px;              /* ajuste à la maquette (140/160 si besoin) */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;   /* ou 'cover' selon le rendu d’origine */
  margin: 10px 0 12px;
}

/* Style identique Raleway pour tous les liens N2/N3 */
.mega-menu .sub-menu-container a.menu-link,
.mega-menu .mega-menu-content a.menu-link {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #666 !important;
  text-decoration: none !important;
}

.mega-menu .sub-menu-container a.menu-link:hover,
.mega-menu .mega-menu-content a.menu-link:hover {
  color: #0a5399 !important;
}

/* Layout 5 colonnes égalisées (comme ton HTML .ogura-col-5th) */
.mega-menu .mega-menu-column.ogura-col-5th {
  flex: 1 1 20%;
  max-width: 20%;
  padding: 0 12px;
  box-sizing: border-box;
}
.mega-menu .row {
  display: flex;
  flex-wrap: nowrap;
}

/* Sécurité: supprime toute icône/chevron résiduel */
#primary-menu .menu-item-has-children > a.menu-link:after,
#primary-menu .menu-item-has-children > a.menu-link svg,
#primary-menu .menu-item-has-children > a.menu-link .icon-angle-down,
#primary-menu .menu-item-has-children > a.menu-link use[href*="icon-angle-down"] {
  display: none !important;
  content: none !important;
}

/* TITRE N2 : noir, uppercase, Raleway, non cliquable */
.mega-menu-content.og-legacy .og-col-title > .menu-link,
.mega-menu-content.og-legacy .mega-title > .menu-link,
.mega-menu-content.og-legacy .og-mega-title {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #000 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Image sous le titre (issue de la Description) */
.mega-menu-content.og-legacy .og-col-image {
  width: 100%;
  height: 120px;              /* ajuste si besoin : 140/160 pour coller à la maquette */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;   /* ou 'cover' selon l’original */
  margin: 10px 0 12px;
}

/* Liens N2/N3 : même style que l’original */
.mega-menu-content.og-legacy .sub-menu-container a.menu-link,
.mega-menu-content.og-legacy a.menu-link {
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: #666 !important;
  text-decoration: none !important;
}
.mega-menu-content.og-legacy .sub-menu-container a.menu-link:hover,
.mega-menu-content.og-legacy a.menu-link:hover {
  color: #0a5399 !important;
}

/* 5 colonnes égales */
.mega-menu-content.og-legacy .mega-menu-column.ogura-col-5th {
  flex: 1 1 20%;
  max-width: 20%;
  padding: 0 12px;
  box-sizing: border-box;
}
.mega-menu-content.og-legacy .row {
  display: flex;
  flex-wrap: nowrap;
}

/* Supprimer tout chevron/flèche résiduel */
#primary-menu .menu-item-has-children > a.menu-link:after,
#primary-menu .menu-item-has-children > a.menu-link svg,
#primary-menu .menu-item-has-children > a.menu-link .icon-angle-down,
#primary-menu .menu-item-has-children > a.menu-link use[href*="angle-down"] {
  display: none !important;
  content: none !important;
}

/* Titre de colonne non cliquable et noir (identique au site d'origine) */
nav#primary-menu .mega-menu-content .og-col-title .menu-link,
nav#primary-menu .mega-menu-content .og-col-title .menu-link div {
  color: #000 !important;
  text-transform: uppercase;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  pointer-events: none;   /* pas cliquable */
  cursor: default;
  text-decoration: none;
}

/* Bloc image sous le titre (depuis la Description) */
nav#primary-menu .mega-menu-content .og-col-image {
  width: 100%;
  height: 124px;                 /* ajuste si besoin pour coller au modèle */
  background-size: cover;
  background-position: center;
  border-radius: 4px;            /* si le modèle en a */
  margin: 8px 0 12px;
  display: block;
}

/* Optionnel : si tu avais déjà un <li> séparé pour l'image, garde ce style identique */
nav#primary-menu .mega-menu-column .og-col-image { display:block; }

/* TITRE DE COLONNE — non cliquable + noir + Raleway exact */
#site-navigation nav#primary-menu .mega-menu-content .menu-item.og-col-title > .menu-link,
#site-navigation nav#primary-menu .mega-menu-content .menu-item.og-col-title > .menu-link div {
  color: #000 !important;
  text-transform: uppercase;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
  pointer-events: none;
  cursor: default;
  text-decoration: none !important;
}

/* IMAGE DE COLONNE (depuis Description) */
#site-navigation nav#primary-menu .mega-menu-content .og-col-image {
  width: 100%;
  height: 124px;           /* ajuste cette hauteur pour coller au site d’origine */
  background-size: cover;
  background-position: center;
  margin: 8px 0 12px;
  display: block;
  border-radius: 0;        /* mets 4px si le site d’origine a un léger radius */
}

/* ---- PATCH MEGA MENU ---- */

/* Police Raleway partout dans le header + menus */
.header-wrap,
.header-wrap *:where(:not(i)):not(.dashicons) {
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Titre de colonne : noir, uppercase, bold, non cliquable s'il est rendu en <a> */
.mega-menu-content .og-col-title .menu-link div,
.mega-menu-content .og-col-title > a .menu-link div,
.mega-menu-content .og-col-title > a,
.mega-menu-content .og-col-title > span {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  pointer-events: none; /* si jamais le titre est un <a> */
}

/* Image injectée depuis la Description */
.mega-menu-content .og-col-image {
  margin-top: 12px;
}
.mega-menu-content .og-col-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Supprimer tous les chevrons/triangles potentiels */
.menu-item-has-children > a::after,
.menu-item-has-children > span::after,
.dropdown-toggle::after {
  content: none !important;
}

/* Harmoniser la typo des niveaux 1/2/3 avec le site d’origine */
#primary-menu a.menu-link div,
#primary-menu .menu-link div,
#primary-menu a,
#primary-menu .sub-menu a {
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #666666;
}

/* Titre de colonne = noir, uppercase, bold, non-cliquable */
.mega-menu-content .og-col-title > .menu-link div,
.mega-menu-content .og-col-title > a .menu-link div,
.mega-menu-content .og-col-title > a,
.mega-menu-content .og-col-title > span {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  pointer-events: none;
}

/* Image sous le titre (issue de la Description) */
.mega-menu-content .og-col-image {
  margin-top: 12px;
}
.mega-menu-content .og-col-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Titre colonne = noir, uppercase, bold, et non cliquable (si span) */
.mega-menu-content .og-col-title > .menu-link div,
.mega-menu-content .og-col-title > a .menu-link div,
.mega-menu-content .og-col-title > a,
.mega-menu-content .og-col-title > span {
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  pointer-events: none;
}

/* Image sous le titre */
.mega-menu-content .og-col-image { margin-top: 12px; }
.mega-menu-content .og-col-image img { display: block; max-width: 100%; height: auto; }


/* === merged: ogura-mega-fix.css === */
/* === Ogura mega menu desktop recovery (columns) === */
/* Only apply at desktop to avoid mobile conflicts */
@media (min-width: 1025px){
  /* Root li with mega-menu */
  #primary-menu .menu-item.mega-menu { position: static; }
  #primary-menu .menu-item.mega-menu > .mega-menu-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: 100vw;
    background: #fff;
    border-top: 1px solid #eaeef3;
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
    display: none;
    padding: 18px 0;
  }
  #primary-menu .menu-item.mega-menu:hover > .mega-menu-content { display: block; }

  /* Columns */
  #primary-menu .mega-menu-content .row { display: flex; flex-wrap: wrap; gap: 18px; width: 100%; max-width: 1200px; margin: 0 auto; }
  #primary-menu .mega-menu-column.sub-menu-container {
    list-style: none;
    margin: 0;
    padding: 0 12px;
    flex: 1 1 20%; /* 5 columns */
    min-width: 180px;
  }
  #primary-menu .mega-menu-column .ogura-mega-heading { margin-bottom: 6px; }
  #primary-menu .mega-menu-column .ogura-mega-heading > .menu-link {
    display: block; padding: 8px 6px; font-weight: 700; text-transform: uppercase; color:#111;
  }
  #primary-menu .mega-menu-column .sub-menu-container .menu-item > .menu-link {
    display: block; padding: 8px 6px; color:#222; text-decoration: none;
  }
  #primary-menu .mega-menu-column .sub-menu-container .menu-item > .menu-link:hover { color:#0a6cc4; background:#f7f9fc; }

}

/* === OGURA MEGA — OVERRIDE FINAL: 100% container + colonnes égales === */

/* Le nav sert de référence pour le positionnement */
nav#primary-menu { position: relative !important; overflow: visible !important; }

/* Le <li> mega ne clippe pas le panneau */
nav#primary-menu > .menu-container > li.mega-menu { position: static !important; }

/* Panneau aligné sur le container (pas sur le viewport) */
nav#primary-menu > .menu-container > li.mega-menu > .mega-menu-content {
  position: absolute !important;
  top: 100%;
  left: 0; right: 0;           /* s’étire sur la largeur du nav */
  width: auto !important;      /* override des 100vw précédents */
  transform: none !important;  /* supprime translateX(-50%) */
  margin-left: 0 !important;
  display: none;
  background: #fff;
  border-top: 2px solid #0a59a0;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 24px 0;
  z-index: 1100;
}

/* Affichage (hover + focus clavier + classe mobile éventuelle) */
nav#primary-menu > .menu-container > li.mega-menu:hover > .mega-menu-content,
nav#primary-menu > .menu-container > li.mega-menu:focus-within > .mega-menu-content,
nav#primary-menu > .menu-container > li.mega-menu.is-open > .mega-menu-content {
  display: block !important;
}

/* Le contenu interne suit la largeur du container du site */
nav#primary-menu .mega-menu-content .container {
  max-width: 1200px;     /* adapte à ton container */
  margin: 0 auto;
  padding: 0 24px;
}

/* 5 colonnes parfaitement égales dans 100% du container */
nav#primary-menu .mega-menu-content .row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

/* Colonnes uniformes, sans largeur fixe héritée du flex */
nav#primary-menu .mega-menu-content .row > .sub-menu-container,
nav#primary-menu .mega-menu-content .mega-menu-column,
nav#primary-menu .mega-menu-content .ogura-col-5th {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;          /* évite les débordements */
  max-width: none !important;
  flex: 0 0 auto !important;   /* neutralise d’anciens flex */
}

/* Titre / liens (inchangé, mais tu peux garder ton style existant) */
nav#primary-menu .mega-menu-content .og-col-title .menu-link > div {
  font-weight: 800; font-size: 13px; text-transform: uppercase; color: #5b6b83; margin-bottom: 12px;
}
nav#primary-menu .mega-menu-content a.menu-link {
  font-size: 14px; font-weight: 600; color: #2c3e50; text-decoration: none;
}
nav#primary-menu .mega-menu-content a.menu-link:hover { color: #0a59a0; }

/* Bloc image sous le titre */
nav#primary-menu .mega-menu-content .og-col-image {
  width: 100%; height: 110px;
  background: #f3f6fb center/contain no-repeat;
  border-radius: 10px; margin: 12px 0;
}

/* Responsive: 2 colonnes puis 1 */
@media (max-width: 1024px){
  nav#primary-menu .mega-menu-content .row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px; }
}
@media (max-width: 640px){
  nav#primary-menu .mega-menu-content .row { grid-template-columns: 1fr !important; gap: 16px; }
}

/* Le container du header sert de référentiel */
#header-wrap > .container { position: relative !important; }

/* Le <li> mega ne clippe pas le panneau */
#primary-menu > .menu-container > li.mega-menu { position: static !important; }

/* Panneau méga aligné sur 100% du container du header */
#primary-menu > .menu-container > li.mega-menu > .mega-menu-content {
  position: absolute !important;
  top: 100%;
  left: var(--mm-left, 0);      /* défini par JS pour compenser l’offset du nav */
  width: var(--mm-width, 100%); /* 100% du container du header */
  right: auto !important;

  display: none;
  background: #fff;
  border-top: 2px solid #0a59a0;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 24px 0;
  z-index: 1100;

  /* neutralise d’anciens réglages plein viewport */
  transform: none !important;
  margin-left: 0 !important;
  max-width: none !important;
}

/* Affichage */
#primary-menu > .menu-container > li.mega-menu:hover > .mega-menu-content,
#primary-menu > .menu-container > li.mega-menu:focus-within > .mega-menu-content,
#primary-menu > .menu-container > li.mega-menu.is-open > .mega-menu-content {
  display: block !important;
}

/* Le contenu interne suit la largeur du container (tu peux garder ton .container interne) */
#primary-menu .mega-menu-content .container {
  max-width: 1200px; /* ajuste à ta grille globale */
  margin: 0 auto;
  padding: 0 24px;
}

/* 5 colonnes égales */
#primary-menu .mega-menu-content .row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

#primary-menu .mega-menu-content .row > .sub-menu-container,
#primary-menu .mega-menu-content .mega-menu-column,
#primary-menu .mega-menu-content .ogura-col-5th {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: none !important;
  flex: 0 0 auto !important; /* neutralise un éventuel flex hérité */
}

/* Responsive */
@media (max-width: 1024px){
  #primary-menu .mega-menu-content .row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px; }
}
@media (max-width: 640px){
  #primary-menu .mega-menu-content .row { grid-template-columns: 1fr !important; gap: 16px; }
}

/* 1) On force le référentiel: le container du header */
#header-wrap > .container { position: relative !important; }

/* 2) On neutralise TOUT ancêtre positionné entre le container et le panneau */
#primary-menu,
#primary-menu > .menu-container,
#primary-menu > .menu-container > li.mega-menu {
  position: static !important;
}

/* 3) Le panneau est ABSOLU par rapport au container du header */
#primary-menu > .menu-container > li.mega-menu > .mega-menu-content {
  position: absolute !important;
  top: 100%;
  left: var(--mm-left, 0);      /* injecté par JS */
  width: var(--mm-width, 100%); /* injecté par JS */
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  max-width: none !important;
  display: none;
  background: #fff;
  border-top: 2px solid #0a59a0;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 24px 0;
  z-index: 1100;
}

/* Affichage */
#primary-menu > .menu-container > li.mega-menu:hover > .mega-menu-content,
#primary-menu > .menu-container > li.mega-menu:focus-within > .mega-menu-content,
#primary-menu > .menu-container > li.mega-menu.is-open > .mega-menu-content {
  display: block !important;
}

/* 4) On veut 100% de la largeur du container du header, donc PAS de max-width interne */
#primary-menu .mega-menu-content > .container {
  max-width: 100% !important;   /* au lieu de 1200px */
  width: 100% !important;
  margin: 0 auto;
  padding: 0 24px;              /* aligne avec le header; ajuste si besoin */
}

/* 5) Vraie grille 5 colonnes égales */
#primary-menu .mega-menu-content .row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

/* 6) On neutralise les styles hérités (floats, widths) sur les colonnes */
#primary-menu .mega-menu-content .row > ul,
#primary-menu .mega-menu-content .mega-menu-column,
#primary-menu .mega-menu-content .ogura-col-5th,
#primary-menu .mega-menu-content .sub-menu-container {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Responsive */
@media (max-width: 1024px){
  #primary-menu .mega-menu-content .row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px; }
}
@media (max-width: 640px){
  #primary-menu .mega-menu-content .row { grid-template-columns: 1fr !important; gap: 16px; }
}


/* --- OGURA MegaMenu → forcer l’ancrage sur le container du header --- */
#header-wrap > .container { position: relative; } /* garde un contexte propre */
#primary-menu { position: static !important; }   /* évite que le nav capte l'absolu */
#primary-menu li.mega-menu { position: static !important; } /* idem */

#primary-menu li.mega-menu > .mega-menu-content {
  left: var(--mm-left) !important;   /* ex: -290px, calculé par ton JS */
  width: var(--mm-width) !important; /* ex: 1200px, largeur du .container */
  right: auto !important;
  max-width: none !important;        /* annule les caps du thème */
  margin-left: 0 !important;
}

/* Grille 5 colonnes pleine largeur du container */
#primary-menu li.mega-menu > .mega-menu-content > .row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: var(--mm-width) !important;
  margin: 0 auto !important;
}

/* Nettoyage des colonnes héritées (pas de float/width/flex imposés) */
#primary-menu li.mega-menu > .mega-menu-content .mega-menu-column,
#primary-menu li.mega-menu > .mega-menu-content ul.mega-menu-column,
#primary-menu li.mega-menu > .mega-menu-content ul.ogura-col-5th {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  position: static !important;
}

/* Force la largeur du panneau = largeur du container du header */
#header-wrap > .container #primary-menu li.mega-menu > .mega-menu-content {
  width: var(--mm-width) !important;  /* ← c’est cette ligne qui manque chez toi */
  left: var(--mm-left) !important;
  right: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  position: absolute !important;
}
/* FIX: autorise le clic uniquement sur les liens N3 (pas sur les titres de colonnes) */
#primary-menu .mega-menu-content li.og-col-title > ul.sub-menu-container a.menu-link,
#og-mobile-panel .mega-menu-content li.og-col-title > ul.sub-menu-container a.menu-link {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ============================
   Mega-menu (desktop only)
   Ordre : image → titre → liste
   Dé-centrage + densité
   ============================ */
@media (min-width: 1024px) {

  /* Le bloc titre+liste devient une petite colonne flex */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;                 /* réduit l’espace vertical */
    text-align: left !important;
    margin: 0;                /* pas de marge parasite */
    padding: 0;
  }

  /* 1) IMAGE tout en haut */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > .og-col-image{
    order: 1;
    margin: 0;                /* supprime le trou au-dessus */
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > .og-col-image img{
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    background: transparent !important; /* pas de fond coloré */
    box-shadow: none;
    border: 0;
  }

  /* 2) TITRE (le lien de la famille) juste sous l'image */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a{
    order: 2;
    padding: 0;               /* on garde la densité */
    margin: 0;
    line-height: 1.2;
    text-align: left !important;
    color: #111 !important;   /* noir demandé */
    font-weight: 700;
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a > div{
    color: inherit !important; /* évite un re-grisage */
  }

  /* 3) LISTE des pages */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul{
    order: 3;
    margin: 0;
    padding: 0;
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li{
    margin: 0;
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a{
    height: auto !important;     /* AUCUNE hauteur imposée */
    min-height: 0 !important;
    padding: 6px 0;              /* densité raisonnable */
    line-height: 1.35;
    color: #2b2b2b;
    text-align: left;
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a > div{
    color: inherit;
  }

  /* Si ton thème centre par défaut toute la colonne, on force le gauche */
  #primary-menu .mega-menu-content .mega-menu-column{
    text-align: left;
  }
}

/* ===== MEGA MENU — Desktop only ===== */
@media (min-width: 1025px) {

  /* Chaque colonne : ne force pas de position/hauteur exotique */
  .mega-menu-content .mega-menu-column {
    position: static;
  }

  /* Le bloc "famille" (li.mega-menu-title) devient une pile verticale :
     on remet l'image AVANT le lien, sans changer le HTML. */
  .mega-menu-content li.mega-menu-title {
    display: flex;
    flex-direction: column;      /* pile verticale */
    align-items: flex-start;     /* aligné à gauche */
    gap: 0;                      /* pas d’espace artificiel entre éléments */
  }

  /* Image de famille (injectée en .og-col-image) : 200x200, sans fond */
  .mega-menu-content li.mega-menu-title > .og-col-image {
    order: -1;                   /* passe avant le titre */
    width: 200px;
    height: 200px;
    margin: 8px 0 10px 0;        /* petit espace, compact */
    padding: 0;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    float: none;
    position: static;
  }
  .mega-menu-content li.mega-menu-title > .og-col-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;         /* pas de crop */
    background: transparent !important;
  }

  /* Titre (l’item "menu link" de la famille) : noir, à gauche, compact */
  .mega-menu-content li.mega-menu-title > a {
    color: #111 !important;
    text-align: left;
    font-weight: 700;
    padding: 0;                  /* on enlève le padding vertical hérité */
    margin: 0 0 6px 0;           /* léger espace au-dessus de la liste */
    line-height: 1.2;            /* pas de "hauteur imposée" */
    min-height: 0;
    background: transparent !important;
  }

  /* Liste des pages : on neutralise les hauteurs héritées (34px + 8px/8px) */
  .mega-menu-content li.mega-menu-title > ul {
    margin: 0;
    padding: 0;
    position: static;            /* évite les superpositions */
  }
  .mega-menu-content li.mega-menu-title > ul > li {
    margin: 0;
    padding: 0;
    height: auto;                /* aucune hauteur imposée */
    line-height: 1.35;
  }
  .mega-menu-content li.mega-menu-title > ul > li > a {
    display: block;
    padding: 4px 0;              /* item plus serré */
    height: auto !important;
    line-height: 1.35 !important;
    background: transparent !important;
  }

  /* On supprime toute « teinte » de fond qui viendrait d’une règle globale */
  .mega-menu-content .og-col-image,
  .mega-menu-content .og-col-image * {
    box-shadow: none !important;
  }
}
/* Desktop : on empêche le background injecté par le JS */
@media (min-width:1025px){
  nav#primary-menu .mega-menu-content .mega-menu-column.has-bg{
    background-image: none !important;
  }
}

@media (min-width:1024px){
  /* Titre de famille : noir, aligné à gauche */
  .mega-menu .mega-menu-column .og-col-title > a{
    display:block;
    color:#111;
    font-weight:700;
    text-align:left;
    padding:0;
    line-height:1.25;
    background:none;
  }

  /* Image 200x200 rendue AU-DESSUS via ::before, sans fond */
  .mega-menu .mega-menu-column .og-col-title > a::before{
    content:"";
    display:block;
    width:200px;
    height:200px;
    margin:8px 0;
    background: center / contain no-repeat var(--og-col-img);
    background-color:transparent;
  }

  /* Liste: pas de hauteur imposée, rythme serré */
  .mega-menu .mega-menu-column .og-col-title > ul{ margin:8px 0 0; padding:0; }
  .mega-menu .mega-menu-column .og-col-title > ul > li > a{
    height:auto;
    padding:6px 0;
    line-height:1.3;
    white-space:normal;
  }

  /* Sécurité: si d'anciens blocs image existent encore */
  .mega-menu .mega-menu-column .og-col-image{ display:none !important; }
}

/* ===== OGURA — Mega Desktop overrides compacts & ordre image→titre→liste === */
@media (min-width:1025px){

  /* 0) Nettoyage des héritages qui ajoutent hauteurs/paddings */
  #primary-menu .mega-menu-content .sub-menu-container a.menu-link {
    height: auto !important;
    line-height: 1.35 !important;
    padding: 6px 0 !important;
    background: transparent !important;
  }
  #primary-menu .mega-menu-content .sub-menu-container .menu-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 1) Titre "famille" en NOIR, aligné à gauche, sans padding superflu */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a,
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span {
    display: block;
    color: #111 !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
    background: transparent !important;
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a > div,
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span > div {
    color: inherit !important;
  }

  /* 2) Image 200x200 AVANT le titre (utilise --og-col-img poussée par le JS) */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a::before,
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span::before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
    margin: 8px 0 10px 0;
    background: center / contain no-repeat var(--og-col-img);
    background-color: transparent !important; /* pas de fond coloré */
  }

  /* 3) Liste des pages — compacte, sans hauteur imposée */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important; /* évite tout chevauchement */
  }
  #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a {
    height: auto !important;
    line-height: 1.35 !important;
    padding: 6px 0 !important;
    white-space: normal !important;
    text-align: left !important;
    color: #2b2b2b !important;
    background: transparent !important;
  }

  /* 4) Si un ancien bloc .og-col-image existe encore, on le cache pour éviter doublon */
  #primary-menu .mega-menu-content .mega-menu-column .og-col-image {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 5) Pas de centrage global dans la colonne */
  #primary-menu .mega-menu-content .mega-menu-column { text-align: left !important; }

  /* 6) Neutralise tout background injecté côté JS hérité */
  #primary-menu .mega-menu-content .mega-menu-column.has-bg {
    background-image: none !important;
  }
}

/* ===== Fix couleurs & densité méga-menu (desktop only) ===================== */
@media (min-width:1025px){

  /* 1) Titre "famille" (l'item .og-col-title) — FORCER le noir et l'alignement */
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a.menu-link,
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span.menu-link,
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a.menu-link > div,
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span.menu-link > div{
    color:#111 !important;
    text-align:left !important;
    opacity:1 !important;
    padding:0 !important;
    height:auto !important;
    line-height:1.2 !important;
    background:transparent !important;
  }

  /* 2) Liste des pages — compacte (zéro marge/hauteur), pas de fond ni bordure */
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul{
    margin:0 !important;
    padding:0 !important;
    position:static !important; /* évite chevauchement sous l'image */
    background:transparent !important;
    border:0 !important;
  }
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link,
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link > div{
    height:auto !important;
    line-height:1.35 !important;
    padding:6px 0 !important;    /* densité propre */
    margin:0 !important;
    white-space:normal !important;
    background:transparent !important;
    color:#2b2b2b !important;    /* lisible, moins fort que le titre */
    text-align:left !important;
  }

  /* 3) Image 200x200 : garder le flux vertical image → titre → liste, sans fond */
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > a.menu-link::before,
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-title > span.menu-link::before{
    content:"";
    display:block;
    width:200px; height:200px;
    margin:8px 0 10px 0;         /* espace raisonnable, pas de "trou" */
    background:center/contain no-repeat var(--og-col-img);
    background-color:transparent !important; /* au cas où un thème mettrait un fond */
  }

  /* 4) Sécurité : neutraliser d’anciens blocs image HTML pour éviter les doublons */
  header #primary-menu .mega-menu-content .mega-menu-column .og-col-image{
    display:none !important;
  }
}

/* === MEGA MENU: fixes desktop ciblés === */
@media (min-width: 1025px) {

  /* 1) Titre famille en vrai noir : viser le DIV interne pour battre la règle globale à #666 */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link > div {
    color: #111 !important;
  }
  /* Sécurité : le conteneur titre n'est pas “coincé” à 252px */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link {
    height: auto !important;
  }

  /* 2) Nettoyage des espacements verticaux entre blocs de la colonne */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image {
    margin: 0 0 12px 0;
    padding: 0;
    background: none !important; /* pas de fond sous l’image */
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title {
    margin: 0 0 8px 0;
  }

  /* 3) Liste des pages : zéro “gap” et padding resserré, aucune hauteur imposée */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul {
    display: block;           /* pas de grid/flex ici */
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
    row-gap: 0;
    column-gap: 0;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li {
    margin: 0;                /* pas d’espacement additionnel par <li> */
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link {
    padding: 4px 0 !important;  /* au lieu de 6–8px */
    line-height: 1.35;
    height: auto !important;     /* jamais de hauteur fixe */
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link > div {
    margin: 0; /* s'assurer qu'aucun margin ne gonfle la hauteur */
  }

  /* 4) Image de famille 200x200 sans fond ni débord */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    background: transparent !important;
  }
}

/* === MEGA MENU – Corrections Desktop ciblées === */
@media (min-width: 1025px) {

  /* 0) La colonne ne “stretch” plus ses enfants */
  nav#primary-menu .mega-menu-content .mega-menu-column {
    align-items: start !important;   /* fonctionne pour flex ET grid */
  }

  /* 1) Titre famille : ne pas s'étirer et afficher en vrai noir */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title {
    align-self: start !important;    /* ne remplit plus 252px */
    margin: 0 0 8px 0;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link {
    display: inline-block;           /* hauteur = contenu */
    height: auto !important;
    padding: 0 !important;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link > div {
    color: #111 !important;          /* écrase la règle globale #666 sur .menu-link div */
    line-height: 1.2;
    margin: 0;
  }

  /* 2) Image famille : 200x200, aucun fond */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image {
    margin: 0 0 12px 0;
    padding: 0;
    background: none !important;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    display: block;
    background: transparent !important;
  }

  /* 3) Liste : pas de gap supplémentaire, padding resserré, aucune hauteur imposée */
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul {
    display: block;     /* pas de grid/flex = pas de row-gap implicite */
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
    row-gap: 0;
    column-gap: 0;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li { margin: 0; }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link {
    padding: 4px 0 !important;
    height: auto !important;
    line-height: 1.35;
  }
  nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > ul > li > a.menu-link > div {
    margin: 0;
  }
}

/* === MEGA MENU – Overrides Desktop stricts === */
@media (min-width: 1025px) {

  /* Colonne: pas de stretch et pas de row-gap implicite */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column {
    align-items: start !important;
    row-gap: 0 !important;
  }

  /* Titre de famille: ne pas s'étirer, hauteur auto, vrai noir */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title {
    align-self: start !important;        /* grid/flex: se cale en haut */
    margin: 0 0 8px 0 !important;
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link {
    display: inline-block !important;    /* hauteur = contenu */
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start !important;        /* si le menu-link est grid/flex item */
    place-self: start !important;        /* fallback grid */
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title > .menu-link > div {
    color: #111 !important;              /* écrase le #666 global */
    text-align: left !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  /* Image de famille: 200x200, aucun fond */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    background: none !important;
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-image img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
  }

  /* Liste des pages: aucune hauteur imposée, pas de gaps */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title .sub-menu-container {
    display: block !important;           /* évite les row-gap de grid */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title .sub-menu-container > li {
    margin: 0 !important;
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title .sub-menu-container > li > a.menu-link {
    padding: 2px 0 !important;
    height: auto !important;
    line-height: 1.35 !important;
  }
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column .og-col-title .sub-menu-container > li > a.menu-link > div {
    margin: 0 !important;
  }
}

/* === Mega: indentation + hover (desktop only) — hard override === */
@media (min-width: 1025px) {
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column
  .og-col-title > ul > li > a.menu-link {
    display: block;
    padding: 6px 10px 6px 12px !important; /* léger retrait à gauche */
    margin: 0 !important;                 /* enlève tout espace résiduel */
    border-radius: 6px;
    transition: background-color .15s ease-in-out;
  }

  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column
  .og-col-title > ul > li > a.menu-link:hover,
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column
  .og-col-title > ul > li > a.menu-link:focus {
    background-color: rgb(247, 249, 252) !important; /* #F7F9FC */
  }
}

/* === Mega: indentation du texte dans les items (desktop) === */
@media (min-width: 1025px) {
  /* on garde le hover sur <a>, mais on INDENTE le <div> interne */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column
  .og-col-title > ul > li > a.menu-link > div {
    padding-left: 12px !important;   /* retrait à gauche */
    margin: 0 !important;
  }

  /* ceinture et bretelles : on écrase tout margin résiduel des <li> */
  #header-wrap nav#primary-menu .mega-menu-content .mega-menu-column
  .og-col-title > ul > li {
    margin: 0 !important;
  }
}