/*--------------------------------------------------------------
	Méga-menu (olystarter/megamenu)
--------------------------------------------------------------*/

.olystarter-megamenu {
  position: relative;
}

/* Bouton burger : le texte « Menu » reste pour les lecteurs d'écran, les barres sont dessinées en CSS */
.olystarter-megamenu__toggle {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--olystarter-burger-color, #111);
  font-size: 0;
  cursor: pointer;
}

.olystarter-megamenu__toggle::before,
.olystarter-megamenu__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.olystarter-megamenu__toggle::before {
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

/* Ouvert : les trois barres deviennent une croix */
.olystarter-megamenu.is-open .olystarter-megamenu__toggle::before {
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(45deg);
}

.olystarter-megamenu.is-open .olystarter-megamenu__toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.olystarter-megamenu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le panneau est positionné par rapport au bloc entier : il prend toute la largeur */
.olystarter-megamenu__item {
  position: static;
  padding: var(--olystarter-item-padding, 0);
  border-radius: var(--olystarter-item-radius, 0);
}

.olystarter-megamenu__link {
  color: inherit;
  text-decoration: none;
}

/*
 * Pleine largeur : le panneau couvre toute la largeur de la fenêtre, juste sous le header.
 * Sa position verticale (--olystarter-full-top) est calculée par view.js.
 */
.olystarter-megamenu--full-panel {
  position: static;
}

.olystarter-megamenu--full-panel .olystarter-megamenu__panel {
  position: fixed;
  top: var(--olystarter-full-top, 0px);
  left: 0;
  right: 0;
  max-width: 100vw;
}

/* Le padding reste dans la largeur du panneau, sinon il déborde de l'écran */
.olystarter-megamenu__panel {
  box-sizing: border-box;
}

/* Contenu du panneau : rien ne dépasse de la largeur disponible */
.olystarter-megamenu__panel img,
.olystarter-megamenu__panel video {
  max-width: 100%;
  height: auto;
}

.olystarter-megamenu__panel .wp-block-columns {
  flex-wrap: wrap;
}

.olystarter-megamenu__panel .wp-block-column {
  min-width: 0;
}

/* Rubrique sans panneau : simple lien, sans zone déroulante */
.olystarter-megamenu__item--no-panel > .olystarter-megamenu__panel {
  display: none;
}

/* Liste déroulante : petit panneau sous la rubrique, aligné à gauche */
.olystarter-megamenu__item--dropdown {
  position: relative;
}

.olystarter-megamenu__item--dropdown > .olystarter-megamenu__panel {
  top: 100%;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 220px;
  max-width: 320px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* En pleine largeur, la liste reste sous sa rubrique et ne prend pas toute la largeur */
.olystarter-megamenu--full-panel .olystarter-megamenu__item--dropdown > .olystarter-megamenu__panel {
  position: absolute;
  top: 100%;
  width: max-content;
}

/* Couleur de survol : réglée dans la barre latérale du bloc */
.olystarter-megamenu__item:hover > .olystarter-megamenu__link,
.olystarter-megamenu__link:focus-visible {
  color: var(--olystarter-hover-color, currentColor);
}

.olystarter-megamenu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--olystarter-panel-padding, 2rem);
  border-radius: var(--olystarter-panel-radius, 0);
  background: var(--olystarter-panel-bg, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.olystarter-megamenu__item:hover > .olystarter-megamenu__panel,
.olystarter-megamenu__item:focus-within > .olystarter-megamenu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Mobile : burger, puis panneau plein écran avec les rubriques et leurs contenus */
@media (max-width: 781px) {
  .olystarter-megamenu__toggle {
    display: block;
  }

  .olystarter-megamenu__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .olystarter-megamenu.is-open .olystarter-megamenu__list {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 5rem 1.5rem 2rem;
    box-sizing: border-box;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .olystarter-megamenu.is-open .olystarter-megamenu__item {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Le bouton reste visible au-dessus du panneau pour le refermer */
  .olystarter-megamenu.is-open .olystarter-megamenu__toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10001;
  }

  .olystarter-megamenu__item {
    border-bottom: 1px solid #eee;
  }

  .olystarter-megamenu__link {
    display: block;
    padding: 1rem 0;
    font-size: 1.25rem;
  }

  .olystarter-megamenu--full-panel .olystarter-megamenu__panel,
  /* Mobile : la liste déroulante s'affiche sous sa rubrique, comme le panneau */
  .olystarter-megamenu__item--dropdown > .olystarter-megamenu__panel,
  .olystarter-megamenu--full-panel .olystarter-megamenu__item--dropdown > .olystarter-megamenu__panel {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 1rem 1rem;
  }

  .olystarter-megamenu__panel {
    position: static;
    max-width: none;
    padding: 0 0 1rem 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Barre d'administration WordPress visible : le bouton fermé descend sous elle */
@media (max-width: 782px) {
  .admin-bar .olystarter-megamenu.is-open .olystarter-megamenu__toggle {
    top: 3.5rem;
  }
}