/*
 * Méga menu principal, inspiré du modèle d'interaction NSW Design System.
 * Cette feuille ne contient que le menu afin de faciliter sa maintenance.
 */

.mto-mega-barre {
  /* Couleurs des onglets : modifier uniquement ces quatre valeurs. */
  --mto-menu-couleur-accueil: var(--mto-color-principal);
  --mto-menu-couleur-actualites: var(--mto-color-agenda);
  --mto-menu-couleur-vie-pratique: var(--mto-color-service);
  --mto-menu-couleur-infos-utiles: var(--mto-color-faq);
  --mto-menu-texte-onglet: #fff;
  position: relative;
  /* Doit rester au-dessus des barres d'outils collantes des éditeurs (Quill : 1000). */
  z-index: 2000;
  width: 100%;
  background: rgb(var(--mto-color-principal-base)) !important;
  background-image: none !important;
  box-shadow: 0 0.15rem 0.45rem rgb(0 0 0 / 14%);
}

.mto-mega-lien-direct--accueil {
  --mto-menu-couleur-onglet: var(--mto-menu-couleur-accueil);
}

.mto-mega-item--actualites {
  --mto-menu-couleur-onglet: var(--mto-menu-couleur-actualites);
  --mto-menu-texte-onglet: #172a35;
}

.mto-mega-item--vie-pratique {
  --mto-menu-couleur-onglet: var(--mto-menu-couleur-vie-pratique);
  --mto-menu-texte-onglet: #172a35;
}

.mto-mega-item--infos-utiles {
  --mto-menu-couleur-onglet: var(--mto-menu-couleur-infos-utiles);
}

#menu-principal.mto-mega-navigation {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  width: min(100% - 2rem, 76rem);
  max-width: none;
  min-height: var(--mto-hauteur-menu-principal, 3.65rem);
  height: var(--mto-hauteur-menu-principal, 3.65rem);
  gap: 1rem;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  background: rgb(var(--mto-color-principal-base)) !important;
  background-image: none !important;
  box-shadow: none;
}

wa-page::part(subheader) {
  background: rgb(var(--mto-color-principal-base)) !important;
  background-image: none !important;
}

.mto-mega-liste {
  display: flex;
  height: 100%;
  align-items: stretch;
  min-width: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mto-mega-liste > li {
  display: flex;
  height: 100%;
  align-items: stretch;
  align-self: stretch;
  margin: 0;
}

.mto-mega-lien-direct,
.mto-mega-declencheur {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  min-height: var(--mto-hauteur-menu-principal, 3.65rem);
  height: var(--mto-hauteur-menu-principal, 3.65rem);
  align-self: stretch;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0.65rem 1rem;
  border: 0 !important;
  border-radius: 0;
  appearance: none;
  background: var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base))) !important;
  background-color: var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base))) !important;
  background-image: none !important;
  color: var(--mto-menu-texte-onglet, #fff) !important;
  box-shadow: none !important;
  filter: none !important;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.mto-mega-lien-direct::after,
.mto-mega-declencheur::after {
  position: absolute;
  right: 0.8rem;
  bottom: 0;
  left: 0.8rem;
  height: 0.24rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: transparent;
  content: '';
}

.mto-mega-lien-direct:hover,
.mto-mega-lien-direct:focus-visible,
.mto-mega-declencheur:hover,
.mto-mega-declencheur:focus-visible,
.mto-mega-declencheur[aria-expanded='true'] {
  outline: 0;
  background: var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base))) !important;
  background-image: none !important;
  color: var(--mto-menu-texte-onglet, #fff);
  box-shadow: none !important;
}

.mto-mega-lien-direct:focus-visible,
.mto-mega-declencheur:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 2px var(--mto-menu-texte-onglet, #fff), 0 0 0 3px #143e36 !important;
}

.mto-mega-declencheur::before {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

.mto-mega-lien-direct.is-active::after,
.mto-mega-declencheur.is-active::after,
.mto-mega-declencheur[aria-expanded='true']::after {
  background: var(--mto-menu-texte-onglet, #fff);
}

.mto-mega-lien-direct > wa-icon,
.mto-mega-declencheur > wa-icon:not(.mto-mega-chevron) {
  font-size: 1.05rem;
}

.mto-mega-chevron {
  margin-left: 0.1rem;
  font-size: 0.66rem;
  transition: transform 160ms ease;
}

.mto-mega-declencheur[aria-expanded='true'] .mto-mega-chevron {
  transform: rotate(180deg);
}

.mto-mega-panneau {
  position: absolute;
  z-index: 60;
  top: calc(100% - 0.25rem);
  right: 0;
  left: 0;
  display: grid;
  overflow: auto;
  max-height: min(70vh, 38rem);
  grid-template-columns: minmax(13rem, 0.85fr) repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
  padding: 1.45rem;
  border: 1px solid #cbd8d5;
  border-top: 0.28rem solid var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base)));
  border-radius: 0 0 0.65rem 0.65rem;
  background: #fff;
  color: #172b28;
  box-shadow: 0 1rem 2rem rgb(17 43 38 / 24%);
}

.mto-mega-panneau[hidden] {
  display: none;
}

.mto-mega-introduction {
  display: flex;
  gap: 0.85rem;
  padding-right: 1rem;
  border-right: 1px solid #dbe4e2;
}

.mto-mega-introduction > wa-icon {
  flex: 0 0 auto;
  color: var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base)));
  font-size: 1.8rem;
}

.mto-mega-introduction h2,
.mto-mega-colonne h3 {
  margin: 0;
  color: #122d28;
}

.mto-mega-introduction h2 {
  font-size: 1.15rem;
}

.mto-mega-introduction p {
  max-width: 18rem;
  margin: 0.5rem 0 0;
  color: #52635f;
  font-size: 0.86rem;
  line-height: 1.5;
}

.mto-mega-colonne {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.mto-mega-colonne h3 {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mto-mega-colonne a {
  display: flex;
  min-width: 0;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.58rem;
  border-radius: 0.45rem;
  color: #1a3f38;
  text-decoration: none;
}

.mto-mega-colonne a:hover,
.mto-mega-colonne a:focus-visible,
.mto-mega-colonne a[aria-current='page'] {
  outline: 0;
  background: #f0f3f2;
  box-shadow: inset 0.2rem 0 var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base)));
}

.mto-mega-colonne a > wa-icon {
  flex: 0 0 1.05rem;
  margin-top: 0.15rem;
  color: var(--mto-menu-couleur-onglet, rgb(var(--mto-color-principal-base)));
}

.mto-mega-colonne a > span {
  display: grid;
  min-width: 0;
}

.mto-mega-colonne strong {
  font-size: 0.88rem;
}

.mto-mega-colonne small {
  margin-top: 0.14rem;
  color: #62716e;
  font-size: 0.72rem;
  line-height: 1.35;
}

.mto-mega-colonne--categories a {
  justify-content: space-between;
  align-items: center;
  padding-block: 0.4rem;
}

.mto-mega-colonne--categories a > wa-icon {
  margin: 0;
  font-size: 0.72rem;
}

.mto-mega-recherche {
  display: flex;
  width: min(17rem, 27vw);
  align-self: center;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  box-sizing: border-box;
  padding: 0.15rem 0.25rem 0.15rem 0.75rem;
  border: 2px solid #174d46;
  border-radius: 0.4rem;
  background: #fff;
  color: #41534f;
}

.mto-mega-recherche:focus-within,
.mto-mega-recherche.is-active {
  border-color: #163c35;
  box-shadow: 0 0 0 2px #fff;
}

.mto-mega-recherche input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172b28;
  font: inherit;
  font-size: 0.82rem;
}

.mto-mega-recherche button {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0.3rem;
  place-items: center;
  background: #276f60;
  color: #fff;
  cursor: pointer;
}

.mto-mega-recherche button:hover,
.mto-mega-recherche button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  background: #174d46;
  box-shadow: 0 0 0 2px #143e36;
}

.mto-visuellement-cache {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.mto-mega-navigation--apparition-session {
  animation: mto-mega-apparition 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mto-mega-apparition {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1060px) {
  #menu-principal.mto-mega-navigation { width: calc(100% - 1rem); gap: 0.4rem; }
  .mto-mega-lien-direct, .mto-mega-declencheur { padding-inline: 0.7rem; font-size: 0.78rem; }
  .mto-mega-recherche { width: min(14rem, 24vw); }
}

.mto-menu-mobile-navigation {
  display: none;
}

@media (max-width: 920px) {
  wa-page[view='mobile']::part(navigation-toggle),
  wa-page[view='mobile']::part(navigation) {
    display: none !important;
  }

  wa-page[view='mobile'] > [slot='navigation'] {
    display: none !important;
  }

  .mto-mega-barre {
    display: block !important;
    min-height: var(--mto-hauteur-menu-principal, 3.25rem);
  }

  #menu-principal.mto-mega-navigation {
    display: none !important;
  }

  .mto-menu-mobile-navigation {
    display: flex !important;
    width: 100%;
    min-height: var(--mto-hauteur-menu-principal, 3.25rem);
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
  }

  .mto-menu-mobile-ouverture,
  .mto-menu-mobile-accueil {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    padding: 0.45rem 0.75rem;
    border: 2px solid transparent;
    border-radius: 0.35rem;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
  }

  .mto-menu-mobile-ouverture:hover,
  .mto-menu-mobile-ouverture:focus-visible,
  .mto-menu-mobile-accueil:hover,
  .mto-menu-mobile-accueil:focus-visible {
    outline: 0;
    border-color: #fff;
    background: rgb(0 0 0 / 16%);
  }

  .mto-menu-mobile-superposition {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgb(7 25 21 / 58%);
  }

  .mto-menu-mobile-superposition[hidden] {
    display: none;
  }

  .mto-menu-mobile-dialogue {
    overflow: auto;
    width: min(100%, 30rem);
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    color: #172b28;
    box-shadow: -0.75rem 0 2rem rgb(0 0 0 / 26%);
    animation: mto-menu-mobile-entree 220ms ease-out both;
  }

  .mto-menu-mobile-entete {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #cad8d4;
    background: rgb(var(--mto-color-principal-base));
    color: #fff;
  }

  .mto-menu-mobile-entete > strong {
    font-size: 1.15rem;
  }

  .mto-menu-mobile-fermeture,
  .mto-menu-mobile-sous-entete button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem;
    border: 0;
    border-radius: 0.3rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
  }

  .mto-menu-mobile-fermeture:hover,
  .mto-menu-mobile-fermeture:focus-visible {
    outline: 2px solid #fff;
    background: rgb(0 0 0 / 16%);
  }

  .mto-menu-mobile-vue {
    padding-bottom: 1.5rem;
  }

  .mto-menu-mobile-vue[hidden] {
    display: none;
  }

  .mto-menu-mobile-sous-entete {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid #d5dfdc;
    background: #edf6f3;
  }

  .mto-menu-mobile-sous-entete button {
    width: fit-content;
    margin-left: -0.5rem;
    color: #17483e;
  }

  .mto-menu-mobile-sous-entete button:hover,
  .mto-menu-mobile-sous-entete button:focus-visible {
    outline: 2px solid #17483e;
    background: #d8ebe6;
  }

  .mto-menu-mobile-sous-entete > strong {
    font-size: 1.18rem;
  }

  .mto-menu-mobile-liste {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mto-menu-mobile-liste li {
    margin: 0;
    border-bottom: 1px solid #dce4e2;
  }

  .mto-menu-mobile-liste a,
  .mto-menu-mobile-liste button {
    display: grid;
    width: 100%;
    min-height: 3.75rem;
    box-sizing: border-box;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #193e37;
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .mto-menu-mobile-liste a:hover,
  .mto-menu-mobile-liste a:focus-visible,
  .mto-menu-mobile-liste button:hover,
  .mto-menu-mobile-liste button:focus-visible,
  .mto-menu-mobile-liste a[aria-current='page'] {
    outline: 0;
    background: #e3f1ed;
    box-shadow: inset 0.28rem 0 rgb(var(--mto-color-principal-base));
  }

  .mto-menu-mobile-liste a > wa-icon,
  .mto-menu-mobile-liste button > wa-icon {
    color: rgb(var(--mto-color-principal-base));
  }

  .mto-menu-mobile-liste a > wa-icon:last-child,
  .mto-menu-mobile-liste button > wa-icon:last-child:not(:first-child) {
    font-size: 0.72rem;
  }

  .mto-menu-mobile-onglet--actualites {
    --mto-menu-couleur-onglet: var(--mto-menu-couleur-actualites);
  }

  .mto-menu-mobile-onglet--vie-pratique {
    --mto-menu-couleur-onglet: var(--mto-menu-couleur-vie-pratique);
  }

  .mto-menu-mobile-onglet--infos-utiles {
    --mto-menu-couleur-onglet: var(--mto-menu-couleur-infos-utiles);
  }

  .mto-menu-mobile-liste button[class*='mto-menu-mobile-onglet--'] {
    box-shadow: inset 0.3rem 0 var(--mto-menu-couleur-onglet) !important;
  }

  .mto-menu-mobile-liste button[class*='mto-menu-mobile-onglet--'] > wa-icon {
    color: var(--mto-menu-couleur-onglet);
  }

  .mto-menu-mobile-recherche {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    background: #f5f8f7;
  }

  .mto-menu-mobile-recherche > label {
    color: #354b46;
    font-size: 0.75rem;
    font-weight: 750;
  }

  .mto-menu-mobile-recherche > div {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.7rem;
    border: 2px solid #78938c;
    border-radius: 0.35rem;
    background: #fff;
  }

  .mto-menu-mobile-recherche > div:focus-within {
    border-color: #153f36;
    box-shadow: 0 0 0 2px #b7d8d0;
  }

  .mto-menu-mobile-recherche input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    font: inherit;
  }

  .mto-menu-mobile-recherche button {
    align-self: stretch;
    padding: 0 0.9rem;
    border: 0;
    background: rgb(var(--mto-color-principal-base));
    color: #fff;
    cursor: pointer;
  }

  body.mto-menu-mobile-ouvert {
    overflow: hidden;
  }

  @keyframes mto-menu-mobile-entree {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mto-mega-navigation--apparition-session { animation: none; }
  .mto-mega-chevron { transition: none; }
}