/* ── Styles spécifiques au menu (variables dans colors.css) ── */

/* ═══════════════════════════════════════════════════════════════
   Compensation du header sticky pour les ancres (#id, liens de
   sommaire…). Sans ça, une section ciblée par une ancre scrolle
   jusqu'à toucher le haut de l'écran — donc jusque SOUS le header
   fixe (#ldnr-header, position:fixed, présent sur toutes les pages)
   — repris de la maquette (scroll-padding-top y était déjà, jamais
   porté dans le vrai thème). S'applique globalement, à toute ancre
   du site, pas seulement aux fiches formation.
   ═══════════════════════════════════════════════════════════════ */
html {
  scroll-padding-top: 110px;
}

/* ═══════════════════════════════════════════════════════════════
   Logo — position fixe en haut à gauche, toutes les pages
   ═══════════════════════════════════════════════════════════════ */
.ldnr-logo {
  position: fixed;
  top: 1.05rem;
  left: 1.75rem;
  z-index: 51;
  display: flex;
  align-items: center;
  text-decoration: none;
  pointer-events: all;
}

.ldnr-logo img {
  height: 55px;
  width: auto;
}

/* Bascule vers le logo compact (sans le texte "LA FORMATION NUMÉRIQUE",
   juste "LDNR") quand la largeur devient trop juste pour que la nav
   centrée et le logo coexistent sans se chevaucher. Seuil à ajuster une
   fois vérifié en direct — 1100px est une première estimation. */
.ldnr-logo__compact { display: none; }

@media (max-width: 1100px) {
  .ldnr-logo__full    { display: none; }
  .ldnr-logo__compact { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   Header — position fixe, centré, z-index au-dessus de tout
   ═══════════════════════════════════════════════════════════════ */
#ldnr-header {
  position: fixed;
  top: 1.2rem;
  left: 0;
  right: 0;
  z-index: 50; /* sous le loader (z-index: 100) — réapparaît naturellement après le fade-out */
  display: flex;
  justify-content: center;
  pointer-events: none; /* laisse passer les clics sur le canvas */
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   Accueil — menu + logo masqués pendant le hero 3D, révélés après 100vh
   La classe .is-revealed est posée par menu.js au scroll (>= 100vh).
   ═══════════════════════════════════════════════════════════════ */
body.home #ldnr-header,
body.home .ldnr-logo {
  opacity: 0;
  transform: translateY(-130%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Tant que non révélé : aucun clic possible (même invisible) */
body.home #ldnr-header:not(.is-revealed) .ldnr-nav,
body.home .ldnr-logo:not(.is-revealed) {
  pointer-events: none;
}

body.home #ldnr-header.is-revealed,
body.home .ldnr-logo.is-revealed {
  opacity: 1;
  transform: none;
}
body.home .ldnr-logo.is-revealed {
  pointer-events: all;
}

/* ═══════════════════════════════════════════════════════════════
   Nav — la barre liquid glass
   ═══════════════════════════════════════════════════════════════ */
.ldnr-nav {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.35rem 0.35rem 1.4rem;
  --lg-tint:      var(--color-nav-tint);
  --lg-radius:    999px;
  --lg-bezel:     14px;
  --lg-thickness: 24px;
  /* --lg-blur et --lg-saturate gérés par les classes lg--blur-* sur l'élément */
  --lg-specular:  0.5;
  --lg-shadow:    0.22;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   Liste de liens (générée par wp_nav_menu)
   ═══════════════════════════════════════════════════════════════ */
.ldnr-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem; /* WP génère des <li> sans espace → le gap remplace les marges */
}

.ldnr-nav__list li {
  margin: 0;
  padding: 0;
}

.ldnr-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 1rem;
  border-radius: 999px;
  color: var(--color-nav-text);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 1;
}

/* Surbrillance animée avec pseudo-élément */
.ldnr-nav__list a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-nav-hover);
  border-radius: 999px;
  z-index: -1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ldnr-nav__list a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.ldnr-nav__list .current-menu-item > a {
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════
   Sous-menus (dropdowns)
   ═══════════════════════════════════════════════════════════════ */

/* Conteneur du sous-menu — caché par défaut */
.ldnr-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  border: 1px solid var(--color-nav-border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

/* Affiche le sous-menu au hover du parent */
.ldnr-nav__item--has-children:hover > .ldnr-nav__submenu {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.ldnr-nav__item--has-children:focus-within > .ldnr-nav__submenu {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* Éléments du sous-menu */
.ldnr-nav__submenu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ldnr-nav__submenu a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem !important;
  color: var(--color-nav-text);
  font-size: 0.82rem;
  border-radius: 8px;
  z-index: 1;
}

/* Surbrillance animée pour sous-menus */
.ldnr-nav__submenu a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-radius: 8px;
  z-index: -1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ldnr-nav__submenu a:hover::before {
  opacity: 1;
  transform: scale(1);
}


/* Élément actif du sous-menu */
.ldnr-nav__submenu .current-menu-item > a {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  color: var(--color-text);
  font-weight: 600;
}

/* Indicateur de menu déroulant (triangle/chevron) */
.ldnr-nav__toggle {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.ldnr-nav__toggle::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.ldnr-nav__item--has-children:hover > a .ldnr-nav__toggle {
  opacity: 1;
}

.ldnr-nav__toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.10);
}

/* Position relative pour l'élément parent (contexte de positionnement) */
.ldnr-nav__item {
  position: relative;
}

/* Zone invisible entre le lien et le submenu pour éviter que le hover disparaisse */
.ldnr-nav__item--has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: auto;
}

/* État "menu-open" pour mobile */
.ldnr-nav__item--has-children.menu-open > .ldnr-nav__submenu {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────
   Sous-menus imbriqués (niveaux 2, 3, 4+)
   Position en cascade horizontale
   ───────────────────────────────────────────────────────────── */

/* Sous-menu de niveau 2+ : positionnement horizontal (left: 100%) */
.ldnr-nav__submenu .ldnr-nav__submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  min-width: 180px;
}

/* Les sous-menus imbriqués au hover */
.ldnr-nav__submenu .ldnr-nav__item--has-children:hover > .ldnr-nav__submenu {
  opacity: 1;
  transform: scale(1) translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Zone invisible horizontale pour les sous-menus imbriqués */
.ldnr-nav__submenu .ldnr-nav__item--has-children::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 12px;
  height: 100%;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Bouton burger (mobile uniquement)
   ═══════════════════════════════════════════════════════════════ */
.ldnr-menu-button {
  display: none;
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--color-nav-tint);
  border: 1px solid var(--color-nav-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-nav-text);
  z-index: 60;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ldnr-menu-button:hover {
  background: var(--color-nav-hover);
  border-color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════
   Responsive mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ldnr-menu-button { display: flex; }
  .ldnr-nav { display: none !important; }

  /* Header fixe (pas le sticky natif Kadence) retiré du flux : sans ça,
     le logo + bouton menu recouvrent le tout début du contenu sur les
     pages qui ne démarrent pas par une image pleine largeur (.img-banner
     gère déjà son propre cas en passant sous le header). */
  body:not(.home) .entry-content-wrap {
    padding-top: 110px;
  }
  body:not(.home) .entry-content-wrap > .img-banner:first-child,
  body:not(.home) .entry-content-wrap > *:first-child .img-banner {
    margin-top: -110px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Modale menu mobile
   ═══════════════════════════════════════════════════════════════ */
.ldnr-menu-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  visibility: hidden;
  pointer-events: none;
}

.ldnr-menu-modal[data-open] {
  visibility: visible;
  pointer-events: auto;
}

/* Overlay */
.ldnr-menu-modal__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-bg) 50%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ldnr-menu-modal[data-open] .ldnr-menu-modal__overlay {
  opacity: 1;
}

/* Panneau latéral */
.ldnr-menu-modal__content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 90vw);
  height: 100%;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-left: 1px solid var(--color-nav-border);
  display: flex;
  flex-direction: column;
  padding: 0 0 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ldnr-menu-modal[data-open] .ldnr-menu-modal__content {
  transform: translateX(0);
}


/* En-tête de la modale (toggle thème) */
.ldnr-menu-modal__header {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-nav-border);
  flex-shrink: 0;
}

/* ── Override : ldnr-nav__submenu en accordéon dans la modale ──
   Le Walker génère toujours ldnr-nav__submenu, même dans la modale mobile.
   On annule ici tous les styles dropdown desktop. */
.ldnr-menu-modal .ldnr-nav__submenu {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
  border: none;
  border-radius: 0;
  min-width: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: block;
  flex-direction: unset;
  z-index: auto;
  box-shadow: none;
}

.ldnr-menu-modal .ldnr-nav__item--has-children.menu-open > .ldnr-nav__submenu {
  max-height: 600px;
}

/* Zone hover invisible desktop — inutile dans la modale */
.ldnr-menu-modal .ldnr-nav__item--has-children::after { display: none; }

/* Liens du sous-menu dans la modale */
.ldnr-menu-modal .ldnr-nav__submenu a {
  padding: 0.7rem 1.5rem 0.7rem 2.5rem !important;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-nav-border);
}

/* Niveau 2 et plus : indentation supplémentaire */
.ldnr-menu-modal .ldnr-nav__submenu .ldnr-nav__submenu a {
  padding-left: 3.5rem !important;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ── Liste principale ── */
.ldnr-menu-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ldnr-menu-modal__list > li,
.ldnr-menu-modal__list > .ldnr-nav__item {
  border-bottom: 1px solid var(--color-nav-border);
}

.ldnr-menu-modal__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  color: var(--color-nav-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

.ldnr-menu-modal__list a:hover {
  background: var(--color-nav-hover);
}

/* ── Sous-menus accordéon ── */
.ldnr-menu-modal__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
}

.ldnr-nav__item--has-children.menu-open > .ldnr-menu-modal__submenu {
  max-height: 600px;
}

.ldnr-menu-modal__submenu a {
  padding: 0.7rem 1.5rem 0.7rem 2.5rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-nav-border);
}

.ldnr-menu-modal__submenu--level-2 a {
  padding-left: 3.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Bouton toggle thème — cercle à droite
   ═══════════════════════════════════════════════════════════════ */
.ldnr-theme-toggle {
  margin-left: 0.3rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  --lg-radius: 999px;
  --lg-bezel: 10px;
  --lg-thickness: 18px;
  --lg-tint: var(--color-toggle-bg);
  --lg-specular: 0.6;
  --lg-shadow: 0.15;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ldnr-theme-toggle:hover {
  transform: scale(1.1);
}

/* Les deux icônes sont dans le DOM — on affiche l'une ou l'autre */
.ldnr-theme-toggle__icon {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: brightness(0) invert(1); /* blanc par défaut (dark mode) */
}

/* Dark : lune visible, soleil masqué */
.ldnr-theme-toggle__icon--moon { opacity: 1;  transform: scale(1)   rotate(0deg);   }
.ldnr-theme-toggle__icon--sun  { opacity: 0;  transform: scale(0.6) rotate(90deg);  }

/* Light : soleil visible, lune masquée */
[data-theme="light"] .ldnr-theme-toggle__icon--moon { opacity: 0; transform: scale(0.6) rotate(-90deg); }
[data-theme="light"] .ldnr-theme-toggle__icon--sun  { opacity: 1; transform: scale(1)   rotate(0deg);
  filter: brightness(0); /* noir en light mode */
}