/* Source: afla-style.css */

/* ════════════════════════════════════════════════════
   MEGA MENU
   ════════════════════════════════════════════════════ */

#afla-mega {
  position: fixed;
  left: 0; right: 0;
  z-index: 9990;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.13);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  border-top: 1px solid var(--afla-regle);
}
#afla-mega.afla-mega--out {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
}
#afla-mega-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}

/* Bouton fermer */
#afla-mega-close {
  position: absolute;
  top: 14px; right: 20px;
  background: none; border: none; padding: 4px 8px;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--afla-ink3);
  transition: color .15s;
}
#afla-mega-close:hover { color: var(--afla-ink); }

/* Boutons dans les panneaux — force le radius pill indépendamment du chargement du CSS bloc */
#afla-mega .wp-block-button__link {
  border-radius: 9999px;
}

/* Helpers de mise en page dans les panneaux */
.afla-mega-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
.afla-mega-col-title {
  font-family: var(--afla-fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--afla-ink3);
  margin-bottom: 12px;
}
.afla-mega-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.afla-mega-links-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--afla-fb);
  font-size: 15px;
  color: var(--afla-ink);
  text-decoration: none;
  transition: color .15s;
}
.afla-mega-links-list a:hover { color: var(--afla-rouge-2); }
.afla-mega-links-list a svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
/* ════════════════════════════════════════════════════
   MENU MOBILE (overlay natif WordPress)
   ════════════════════════════════════════════════════ */

/* Fond crème chaleureux */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--afla-creme) !important;
}

/* Boîte de dialogue centrée */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
  background-color: var(--afla-creme);
}

/* Bouton fermer — discret mais lisible */
.wp-block-navigation__responsive-container-close {
  color: var(--afla-ink2) !important;
}
.wp-block-navigation__responsive-container-close:hover {
  color: var(--afla-or-3) !important;
}

/* Items de premier niveau : grande typo Playfair */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: var(--afla-ink) !important;
  padding: .55em 0 !important;
  line-height: 1.2 !important;
  transition: color .15s !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content:focus {
  color: var(--afla-or-3) !important;
}

/* Séparateur chaud entre items */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item {
  border-bottom: 1px solid var(--afla-regle) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container
> .wp-block-navigation-item:first-child {
  border-top: 1px solid var(--afla-regle) !important;
}

/* Sous-menus : légèrement plus petits, teinte chaude */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
  font-weight: 400 !important;
  color: var(--afla-ink2) !important;
  padding: .4em 0 .4em 1.2em !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content:hover {
  color: var(--afla-or-3) !important;
}

/* Flèche de sous-menu — couleur dorée */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon svg {
  stroke: var(--afla-or-3) !important;
}

/* On s'assure que le conteneur parent (le Groupe) est la référence */
.wp-block-group:has(.mon-filigrane) {
    position: relative;
    overflow: hidden; /* Évite que le blason ne dépasse du menu */
}

/* La classe pour l'image en filigrane */
.mon-filigrane {
    position: absolute !important; /* Sort l'image du flux pour la mettre derrière */
    
    /* Positionnement basé sur vos réglages */
    left: 15%; 
    bottom: 14%; /* 100% - 86% pour inverser la logique top/bottom */
    
    /* Taille et aspect */
    width: 250px;
    height: auto;
    
    /* L'effet filigrane */
    opacity: 0.1; /* Ajustez entre 0.05 et 0.20 selon l'envie */
    z-index: 0;   /* Derrière le texte mais devant le fond du bloc */
    
    /* Sécurité pour le survol */
    pointer-events: none; 
    filter: grayscale(100%); /* Optionnel : force le noir et blanc si besoin */
}

/* On s'assure que le texte passe bien par-dessus */
.wp-block-group:has(.mon-filigrane) > * {
    position: relative;
    z-index: 2;
}

/* ════════════════════════════════════════════════════
   DESKTOP — masquer flèches et sous-menus natifs
   Stratégie : masquer globalement, ré-afficher dans l'overlay mobile
   ════════════════════════════════════════════════════ */

/* Flèche (caret ^) : masquée partout par défaut */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* Sous-menu natif Gutenberg : masqué partout par défaut */
.wp-block-navigation .wp-block-navigation__submenu-container {
  display: none !important;
  pointer-events: none !important;
}

/* ── Ré-afficher dans l'overlay mobile ─────────────── */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon {
  display: flex !important;
  pointer-events: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  pointer-events: auto !important;
  /* display et max-height gérés par les règles accordéon ci-dessous */
}

/* ════════════════════════════════════════════════════
   MOBILE — fond coloré + image de fond + accordéon
   ════════════════════════════════════════════════════ */

/* ── Fond ─────────────────────────────────────────── */
/* Modifiez --afla-mob-bg pour changer la couleur     */
.wp-block-navigation__responsive-container.is-menu-open {
  --afla-mob-bg: var(--afla-rouge-3); /* #8B0A30 — rouge AFLA foncé */
  background-color: var(--afla-mob-bg) !important;

  /* Image de fond : décommentez et remplacez l'URL   */
  /* --afla-mob-img: url('/wp-content/themes/afla/img/menu-bg.jpg');
  background-image: var(--afla-mob-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: multiply !important; */
}

/* Le dialogue hérite du fond transparent */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
  background-color: transparent !important;
}

/* ── Texte adapté au fond foncé ───────────────────── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item__content {
  color: var(--afla-blanc) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .75) !important;
  padding-left: 1.4em !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content:hover {
  color: var(--afla-or-1) !important;
}

/* Séparateurs discrets sur fond foncé */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation-item {
  border-bottom-color: rgba(255, 255, 255, .15) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
.wp-block-navigation__container
> .wp-block-navigation-item:first-child {
  border-top-color: rgba(255, 255, 255, .15) !important;
}

/* Bouton fermer adapté au fond foncé */
.wp-block-navigation__responsive-container-close {
  color: rgba(255, 255, 255, .7) !important;
}
.wp-block-navigation__responsive-container-close:hover {
  color: var(--afla-or-1) !important;
}

/* ── Layout : chevron sur la même ligne que le parent ── */

/* L'item parent devient une rangée flex avec retour à la ligne */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Le lien principal prend tout l'espace horizontal */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child
> .wp-block-navigation-item__content {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* Le bouton chevron reste à droite, même ligne */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child
> .wp-block-navigation__submenu-icon {
  flex: 0 0 auto !important;
  padding: 8px 12px !important;
  margin-left: 8px !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
}

/* Le sous-menu prend toute la largeur (retour à la ligne) */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child
> .wp-block-navigation__submenu-container {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ── Taille du chevron ─────────────────────────────── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: rgba(255, 255, 255, .7) !important;
  fill: none !important;
  display: block !important;
}

/* ── Accordéon sous-menus ──────────────────────────── */

/* Replié par défaut */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
  display: block !important;
  overflow: hidden !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transition: max-height .35s ease, opacity .25s ease !important;
}

/* Déployer quand le bouton est activé (aria-expanded="true") */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon[aria-expanded="true"]
~ .wp-block-navigation__submenu-container {
  max-height: 800px !important;
  opacity: 1 !important;
}

/* Auto-déplier le sous-menu contenant la page active */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child:has(.wp-block-navigation__submenu-container [aria-current="page"])
> .wp-block-navigation__submenu-container {
  max-height: 800px !important;
  opacity: 1 !important;
}

/* ── Animation rotation du chevron ─────────────────── */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon {
  transition: transform .3s ease, background .2s ease !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon[aria-expanded="true"] {
  transform: rotate(180deg) !important;
  background: rgba(255,255,255,.2) !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
  stroke: var(--afla-or-1) !important;
}