/* =========================================================
   MENU MODALE MOBILE — style "Tenki"
   Panneau .modale-nav à 80% (max 360px) depuis la gauche,
   fond assombri à droite, ancré sur les classes personnalisées :
   .modale-nav (Groupe) / .modale-logo (Logo du site) / .modale-links (menu de liens)
   .copy-modale existe déjà.
   A coller dans : Styles > Options avancées > CSS personnalisé
   ========================================================= */

/* --- Conteneur plein écran : glisse depuis la gauche, sert de fond assombri --- */
.wp-block-navigation__responsive-container {
  transition: transform 0.35s ease;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) {
  transform: translateX(-100%);
}

.wp-block-navigation__responsive-container.is-menu-open {
  transform: translateX(0);
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: rgba(20, 22, 30, 0.55) !important; /* assombrissement de la partie visible à droite */
}
.modale-menu{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 24px 64px 24px !important;
  min-width: 290px;
}

/* Chaîne de wrappers techniques WordPress entre le conteneur plein écran et
   .modale-nav : transparents, PLEINE HAUTEUR mais LARGEUR AUTO (épousent
   la largeur de .modale-nav au lieu de forcer 100% de l'écran) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__overlay-container {
  margin: 0 !important;
  padding: 0 !important;
  width: auto;
  box-sizing: border-box;
}


/* --- Pas de croix de fermeture visible --- */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .modale-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 !important; 
  padding: 0 !important;
  width: 100%;
}

/* --- Logo : centré horizontalement, 64px au-dessus des liens --- */
.wp-block-navigation__responsive-container.is-menu-open {
  align-self: center; /* seul le logo est centré, pas le reste */
  margin: 0 0 64px 0;
  flex-shrink: 0;
}

/* --- Liste des liens : gap 24px, alignée à gauche, ne rétrécit jamais --- */
.wp-block-navigation__responsive-container.is-menu-open .modale-links {
  width: 100%;
  flex-shrink: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links ul.wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #2c3454 !important; /* couleur fixe, plus fiable que l'héritage avec un menu réutilisé */
  text-decoration: none;
}

/* --- Icônes 32x32px avant chaque lien --- */
.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item__content::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: #2c3454;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item:nth-of-type(1) .wp-block-navigation-item__content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item:nth-of-type(2) .wp-block-navigation-item__content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3H7a2 2 0 0 0-2 2v16l7-3 7 3V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item:nth-of-type(3) .wp-block-navigation-item__content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.04C10.34 4.78 7.9 4 6 4 4.83 4 3.66 4.29 3 4.75v14.5c.66-.46 1.83-.75 3-.75 1.9 0 4.34.78 6 2.04V6.04zm0 0c1.66-1.26 4.1-2.04 6-2.04 1.17 0 2.34.29 3 .75v14.5c-.66-.46-1.83-.75-3-.75-1.9 0-4.34.78-6 2.04'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.04C10.34 4.78 7.9 4 6 4 4.83 4 3.66 4.29 3 4.75v14.5c.66-.46 1.83-.75 3-.75 1.9 0 4.34.78 6 2.04V6.04zm0 0c1.66-1.26 4.1-2.04 6-2.04 1.17 0 2.34.29 3 .75v14.5c-.66-.46-1.83-.75-3-.75-1.9 0-4.34.78-6 2.04'/%3E%3C/svg%3E");
}

.wp-block-navigation__responsive-container.is-menu-open
  .modale-links .wp-block-navigation-item:nth-of-type(4) .wp-block-navigation-item__content::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
}

/* --- Copyright : centré, tout en bas, 14px --- */
.wp-block-navigation__responsive-container.is-menu-open .copy-modale {
  align-self: center;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #2c3454 !important;
  background-color: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

/* --- Bouton hamburger (fermé) --- */
.wp-block-navigation__responsive-container-open {
  color: #2c3454;
}

/* =========================================================
   MOBILE UNIQUEMENT : neutralise les effets hover hérités du
   CSS desktop (ombre / fond au survol) dans la modale
   ========================================================= */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open .modale-links a:hover,
  .wp-block-navigation__responsive-container.is-menu-open .modale-links a:focus,
  .wp-block-navigation__responsive-container.is-menu-open .copy-modale:hover {
    background-color: transparent !important;
    box-shadow: none !important;
  }
}