/* ==========================================================================
   Talia — Navbar
   --------------------------------------------------------------------------
   SEUL fichier de style de la barre de navigation. Markup : parts/navbar.php
   et parts/navbar/. Comportement : assets/js/navbar.js.
   Rien de la navbar ne doit repartir dans main.css.

   01. Tokens & barre           06. Barre mobile : burger + avatar
   02. Logo                     07. Panneau mobile : navigation plein écran
   03. Navigation (desktop)     08. Thèmes clair / sombre
   04. Actions : crédits        09. Variante landing (header sur hero)
   05. Menu utilisateur

   Contrat avec main.css : --header-height est déclaré ICI, sur :root, et
   consommé par les sections full-bleed (hero) qui vivent hors de .header
   (main.css : .hero-*, --hero-content-safe-top). Changer la hauteur de la
   barre ici suffit, les hero suivent.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS & BARRE
   ========================================================================== */

:root {
  --navbar-height: 60px;
  --navbar-logo-height: 38px;
  /* Cible tactile : 48px = minimum Material 3 (Apple HIG et WCAG 2.1 AAA
     demandent 44). On prend le plus exigeant des trois. */
  --navbar-tap: 48px;
  --navbar-gutter: var(--spacing-md);
  --navbar-nav-gap: var(--spacing-lg);

  /* Consommé hors de .header par les sections full-bleed */
  --header-height: var(--navbar-height);
}

@media (min-width: 768px) {
  :root {
    --navbar-height: 64px;
    --navbar-logo-height: 40px;
    --navbar-gutter: var(--spacing-lg);
  }
}

@media (min-width: 1280px) {
  :root {
    --navbar-gutter: var(--spacing-2xl);
    --navbar-nav-gap: var(--spacing-xl);
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: 10000; /* au-dessus du panneau mobile (9999) et du hero */
  min-height: var(--navbar-height);
  padding: 0;
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

/* Barre pleine largeur : trois zones en flux normal, logo | nav | actions.
   Pas de .container ici — la gouttière est portée par la barre elle-même. */
.header-content {
  display: flex;
  align-items: center;
  gap: var(--navbar-nav-gap);
  width: 100%;
  min-height: var(--navbar-height);
  padding: 0 var(--navbar-gutter);
  box-sizing: border-box;
  position: relative;
  overflow: visible; /* le burger doit rester visible sur iOS */
}

.header-spacer {
  display: none;
}


/* ==========================================================================
   02. LOGO
   Portée sous .header : le footer a ses propres règles dans main.css.
   ========================================================================== */

.header .no-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
  padding: 0;
  z-index: 10001; /* reste cliquable au-dessus du panneau mobile */
}

.header .custom-logo-link {
  display: block;
  max-width: none;
  position: relative;
  margin: 0;
  padding: 0;
}

.header .no-logo img,
.header .custom-logo-link img {
  max-height: var(--navbar-logo-height);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  object-fit: contain;
}

.header .custom-logo-dark {
  display: none;
}

.header .custom-logo-link:not(:has(.custom-logo-dark)) .custom-logo-light {
  display: block;
}

/* Le logo ne doit jamais passer sous les contrôles mobile (burger + avatar,
   positionnés en absolu à droite). */
@media (max-width: 1023.98px) {
  .header .no-logo {
    max-width: calc(100% - 130px); /* 2 cibles de 48px + gap + gouttiere */
    overflow: hidden;
  }
}

.header .no-logo h1,
.header .no-logo h1 a {
  margin: 0;
  line-height: 1.2;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}

.header .no-logo .tagline {
  margin: 2px 0 0;
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.2;
}


/* ==========================================================================
   03. NAVIGATION PRINCIPALE — DESKTOP
   Sous 1025px, .header-nav devient le panneau plein écran : voir 07.
   ========================================================================== */

@media (min-width: 1024px) {
  .header-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--navbar-nav-gap);
    min-width: 0;
  }

  .nav-container {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin: 0;
  }

  .nav-container .nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--navbar-nav-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-container .nav li {
    margin: 0;
  }

  .nav-container .nav a,
  .nav-container .nav-link {
    display: inline-block;
    padding: 4px 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-normal), border-color var(--transition-normal);
  }

  .nav-container .nav a:hover,
  .nav-container .nav-link:hover {
    color: var(--primary-color);
    text-decoration: none;
  }

  /* Page courante : soulignement */
  .nav-container .current-menu-item > a,
  .nav-container .current-menu-ancestor > a,
  .nav-container .current_page_item > a {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
  }

  /* Connecté : menu principal. Non connecté : menu unlogged.
     La présence de .nav-actions distingue les deux états. */
  .nav-container-unlogged {
    display: none;
  }

  .header-nav:not(:has(.nav-actions)) .nav-container-primary {
    display: none;
  }

  .header-nav:not(:has(.nav-actions)) .nav-container-unlogged {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
  }
}


/* ==========================================================================
   04. ACTIONS — pilule crédits & boutons
   L'icône de crédits est réglable en admin (toolbox_credit_icon) : ne pas
   la contraindre au-delà de sa boîte.
   ========================================================================== */

@media (min-width: 1024px) {
  .nav-actions,
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
    flex-shrink: 0;
  }
}

.credit-balance-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

.credits-info-wrap {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 var(--spacing-sm) !important;
  gap: var(--spacing-xs) !important;
}

.credit-icon-custom {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.credit-emoji {
  font-size: 18px !important;
}

.credit-amount-val {
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.credit-suffix {
  font-size: var(--font-size-xs) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-left: 2px !important;
}

.credit-balance-pill .buy-credits-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 var(--spacing-lg) !important;
  background: var(--primary-color) !important;
  color: #fff !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background-color var(--transition-normal) !important;
}

.credit-balance-pill .buy-credits-btn:hover {
  background: var(--primary-light) !important;
  color: #fff !important;
  transform: none !important;
}

/* Boutons S'inscrire / Se connecter (non connecté) */
.header-actions .btn {
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.logout-btn {
  height: 36px;
  transition: box-shadow var(--transition-normal);
}

.logout-btn:hover {
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   05. MENU UTILISATEUR — bouton + dropdown
   Contenu et comportement inchangés (gravatar, toggle clair/sombre dans le
   dropdown : c'est un réglage rare, il ne prend pas de place en barre).
   ========================================================================== */

@media (max-width: 1023.98px) {
    .user-menu-wrapper {
      position: relative;
      width: var(--navbar-tap); /* Même largeur que le burger */
      height: var(--navbar-tap); /* Même hauteur que le burger */
    }

    .user-menu-toggle {
      background: none;
      border: 2px solid var(--border-color);
      border-radius: 50%;
      width: var(--navbar-tap); /* Même taille que le burger pour alignement parfait */
      height: var(--navbar-tap); /* Même taille que le burger pour alignement parfait */
      padding: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-normal);
      position: relative; /* Pour z-index */
      z-index: 10003; /* Au-dessus de tout */
      margin: 0; /* Pas de margin */
    }

    .user-menu-toggle:hover {
      border-color: var(--primary-color);
      background-color: var(--bg-secondary);
    }

    .user-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      pointer-events: none; /* Permet les clics sur le bouton parent */
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
      pointer-events: none; /* Permet les clics sur le bouton parent */
    }

    .user-menu-wrapper-desktop,
    .nav-actions .user-menu-wrapper,
    #userMenuToggleDesktop,
    #userMenuDropdownDesktop {
      display: none !important;
    }

    .user-menu-header {
      padding: var(--spacing-md);
      padding-left: var(--spacing-md); /* Padding gauche pour alignement cohérent */
      border-bottom: 1px solid var(--border-color);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      padding-left: 0; /* Pas de padding supplémentaire, le padding vient du header */
    }

    .user-info img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-details {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .user-name {
      font-weight: 600;
      color: var(--text-primary);
    }

    .user-credits {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
    }

    .user-menu-items {
      list-style: none;
      padding: var(--spacing-sm) 0;
      margin: 0;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a {
      display: flex;
      align-items: flex-start; /* Alignement en haut, pas centré */
      gap: var(--spacing-md);
      width: 100%;
      padding: var(--spacing-md) var(--spacing-md); /* Padding normal pour les liens */
      padding-left: var(--spacing-md); /* Padding gauche identique au header */
      min-height: 44px; /* Hauteur minimale raisonnable */
      background: none;
      border: none;
      text-align: left;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      cursor: pointer;
      transition: background-color var(--transition-normal);
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      font-weight: 500;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a:hover,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a:hover {
      background-color: var(--bg-secondary);
      text-decoration: none !important;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a svg,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a svg {
      flex-shrink: 0;
      color: var(--text-secondary);
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a span,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a span {
      flex: 1;
    }

    .user-menu-theme-toggle .user-menu-item,
    .user-menu-theme-toggle li .user-menu-item {
      display: flex;
      align-items: flex-start; /* Alignement en haut, pas centré */
      gap: var(--spacing-md);
      width: 100%;
      padding: var(--spacing-md) var(--spacing-md) !important; /* Padding normal, pas de lg */
      padding-left: var(--spacing-md) !important; /* Padding gauche identique au header */
      min-height: 44px !important; /* Hauteur normale, pas 52px */
      background: none;
      border: none;
      text-align: left;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      cursor: pointer;
      transition: background-color var(--transition-normal);
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      font-weight: 500;
    }

    .user-menu-item:hover {
      background-color: var(--bg-secondary);
      text-decoration: none !important;
    }

    .user-menu-item svg {
      flex-shrink: 0;
      color: var(--text-secondary);
    }

    .user-menu-item span {
      flex: 1;
    }

    .user-menu-logout {
      color: var(--error-color) !important;
    }

    .user-menu-logout:hover {
      background-color: color-mix(in srgb, var(--error-color) 10%, transparent);
      text-decoration: none !important;
    }

    .user-menu-logout svg {
      color: var(--error-color);
    }
}


@media (min-width: 1024px) {
    .nav-actions .user-menu-wrapper {
      margin-left: var(--spacing-md);
    }

    .user-menu-wrapper {
      position: relative;
    }

    .user-menu-toggle {
      background: none;
      border: 2px solid var(--border-color);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      padding: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-normal);
      overflow: hidden; /* Pour que l'avatar ne dépasse pas */
      flex-shrink: 0;
    }

    .user-menu-toggle:hover {
      border-color: var(--primary-color);
      background-color: var(--bg-secondary);
    }

    .user-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .user-menu-dropdown {
      position: absolute;
      top: calc(100% + var(--spacing-sm)); /* Collé sous la barre compacte */
      right: 0;
      margin-top: 0;
      background: color-mix(in srgb, var(--bg-primary) 80%, transparent); /* Opacité 0.8 sur le background avec variable du thème */
      backdrop-filter: blur(10px); /* Flou pour l'effet de transparence */
      border: 2px solid var(--border-color);
      border-radius: var(--border-radius-md);
      box-shadow: var(--shadow-lg);
      min-width: 280px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all var(--transition-normal);
      z-index: 1000;
    }

    .user-menu-dropdown.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .user-menu-header {
      padding: var(--spacing-md);
      padding-left: var(--spacing-md); /* Padding gauche pour alignement cohérent */
      border-bottom: 1px solid var(--border-color);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      padding-left: 0; /* Pas de padding supplémentaire, le padding vient du header */
    }

    .user-info img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-details {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .user-name {
      font-weight: 600;
      color: var(--text-primary);
    }

    .user-credits {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
    }

    .user-menu-items {
      list-style: none;
      padding: var(--spacing-sm) 0;
      margin: 0;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a {
      display: flex;
      align-items: flex-start; /* Alignement en haut, pas centré */
      gap: var(--spacing-md);
      width: 100%;
      padding: var(--spacing-md) var(--spacing-md); /* Padding normal pour les liens */
      padding-left: var(--spacing-md); /* Padding gauche identique au header */
      min-height: 44px; /* Hauteur minimale raisonnable */
      background: none;
      border: none;
      text-align: left;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      cursor: pointer;
      transition: background-color var(--transition-normal);
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      font-weight: 500;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a:hover,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a:hover {
      background-color: var(--bg-secondary);
      text-decoration: none !important;
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a svg,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a svg {
      flex-shrink: 0;
      color: var(--text-secondary);
    }

    .user-menu-items:not(.user-menu-theme-toggle) li a span,
    .user-menu-items:not(.user-menu-theme-toggle) > li > a span {
      flex: 1;
    }

    .user-menu-theme-toggle .user-menu-item,
    .user-menu-theme-toggle li .user-menu-item {
      display: flex;
      align-items: flex-start; /* Alignement en haut, pas centré */
      gap: var(--spacing-md);
      width: 100%;
      padding: var(--spacing-md) var(--spacing-md) !important; /* Padding normal, pas de lg */
      padding-left: var(--spacing-md) !important; /* Padding gauche identique au header */
      min-height: 44px !important; /* Hauteur normale, pas 52px */
      background: none;
      border: none;
      text-align: left;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      cursor: pointer;
      transition: background-color var(--transition-normal);
      font-family: var(--font-body);
      font-size: var(--font-size-base);
      font-weight: 500;
    }

    .user-menu-item:hover {
      background-color: var(--bg-secondary);
      text-decoration: none !important;
    }

    .user-menu-item svg {
      flex-shrink: 0;
      color: var(--text-secondary);
    }

    .user-menu-item span {
      flex: 1;
    }

    .user-menu-logout {
      color: var(--error-color) !important;
    }

    .user-menu-logout:hover {
      background-color: color-mix(in srgb, var(--error-color) 10%, transparent);
      text-decoration: none !important;
    }

    .user-menu-logout svg {
      color: var(--error-color);
    }
}



/* ==========================================================================
   06. BARRE MOBILE — burger + avatar
   Gabarit validé, seuls les traits du burger ont été épaissis (3px -> 4px).
   ========================================================================== */

@media (max-width: 1023.98px) {
    .header-content:not(:has(.hamburger-menu)) .header-actions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      gap: var(--spacing-sm);
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      width: auto;
      position: absolute;
      right: var(--navbar-gutter);
      top: 50%;
      transform: translateY(-50%);
    }

    .mobile-controls {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      position: absolute;
      right: var(--navbar-gutter);
      top: 50%;
      transform: translateY(-50%);
      z-index: 10001;
      flex-wrap: nowrap; /* Empêcher le wrap */
    }

    .mobile-controls .hamburger-menu {
      position: static;
      transform: none;
      right: auto;
      top: auto;
      order: 1; /* Menu burger en premier (à gauche dans le groupe de droite) */
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: var(--navbar-tap); /* Même largeur que le gravatar */
      height: var(--navbar-tap); /* Même hauteur que le gravatar pour alignement parfait */
      min-width: var(--navbar-tap);
      min-height: var(--navbar-tap);
      margin: 0; /* Pas de margin pour alignement parfait */
    }

    .mobile-controls .user-menu-wrapper {
      order: 2; /* Menu profile après le burger (à droite) */
      position: relative;
      display: flex !important; /* S'assurer que le menu utilisateur est visible sur mobile */
      z-index: 10001; /* Au même niveau que mobile-controls */
      width: var(--navbar-tap); /* Même largeur que le burger */
      height: var(--navbar-tap); /* Même hauteur que le burger */
      flex-shrink: 0; /* Empêcher la réduction */
      margin: 0; /* Pas de margin */
    }

    .mobile-controls .user-menu-toggle {
      display: flex !important;
      pointer-events: auto !important;
      z-index: 10003; /* Au-dessus de tout */
      width: var(--navbar-tap) !important; /* Même taille que le burger */
      height: var(--navbar-tap) !important; /* Même taille que le burger */
      min-width: var(--navbar-tap) !important;
      min-height: var(--navbar-tap) !important;
      margin: 0 !important; /* Pas de margin pour alignement parfait */
      position: relative !important; /* Position relative pour z-index */
      flex-shrink: 0 !important; /* Empêcher la réduction */
    }

    .mobile-controls .btn {
      min-width: auto;
      white-space: nowrap;
    }

    .mobile-controls .btn-primary {
      order: 2;
    }

    .mobile-controls .btn-outline {
      order: 3;
    }

    .user-menu-mobile {
      display: none !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      background: var(--bg-primary) !important; /* Fond opaque */
      border-top: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg);
      flex-direction: column !important;
      padding: var(--spacing-lg) !important;
      gap: var(--spacing-md);
      z-index: 9999 !important;
      max-height: 100vh !important;
      overflow-y: auto;
      /*
        Le panneau part de `top: 0`, donc il recouvre AUSSI le bandeau promo
        posé au-dessus du header. Sa marge haute doit dégager les deux, sinon
        son contenu démarre sous la navbar et la chevauche — constat QA, avatar
        et pseudo au niveau du logo.
      */
      padding-top: calc(
        var(--hero-promo-height, 0px) + var(--navbar-height) + var(--spacing-lg)
      ) !important;
      margin: 0 !important;
    }

    .user-menu-mobile.active {
      display: flex !important;
    }

    .user-menu-toggle-mobile {
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: var(--navbar-tap);
      height: var(--navbar-tap);
      padding: 0;
      margin: 0;
      border: 2px solid var(--border-color);
      background: transparent;
      cursor: pointer;
      border-radius: 50%;
      transition: all var(--transition-normal);
      order: 2;
      flex-shrink: 0;
    }

    .user-menu-toggle-mobile:hover {
      border-color: var(--primary-color);
    }

    .user-menu-toggle-mobile .user-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .user-menu-toggle-mobile .user-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      pointer-events: none;
    }

    .user-menu-mobile .user-menu-header {
      padding: var(--spacing-md);
      border-bottom: 1px solid var(--border-color);
    }

    .user-menu-mobile .user-info {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
    }

    .user-menu-mobile .user-info img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-menu-mobile .user-details {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .user-menu-mobile .user-name {
      font-weight: 600;
      color: var(--text-primary);
      font-size: 1.1rem;
    }

    .user-menu-mobile .user-credits {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .user-menu-mobile .user-menu-items {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }

    .user-menu-mobile .user-menu-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      color: var(--text-primary);
      text-decoration: none;
      border-radius: var(--border-radius-sm);
      transition: background-color var(--transition-fast);
      font-size: 1rem;
      background: none;
      border: none;
      cursor: pointer;
      width: 100%;
      text-align: left;
    }

    .user-menu-mobile .user-menu-item:hover {
      background: var(--bg-secondary);
    }

    .user-menu-mobile .user-menu-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    .user-menu-mobile .user-menu-logout {
      color: var(--accent-error);
      margin-top: var(--spacing-md);
      border-top: 1px solid var(--border-color);
      padding-top: var(--spacing-md);
    }

    .hamburger-menu {
      display: flex !important;
      flex-direction: column;
      gap: 0; /* Pas de gap, les lignes sont en position absolue */
      cursor: pointer;
      padding: 0; /* Pas de padding, centrage via align-items */
      border: none;
      background: none;
      z-index: 10002 !important; /* Au-dessus du logo et du menu */
      position: relative;
      width: var(--navbar-tap); /* Même largeur que le gravatar */
      height: var(--navbar-tap); /* Même hauteur que le gravatar */
      /* Corrections spécifiques iOS */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      pointer-events: auto !important;
      -webkit-user-select: none;
      user-select: none;
      align-items: center;
      justify-content: center;
      margin: 0; /* Pas de margin pour alignement parfait */
      overflow: hidden; /* IMPORTANT: Empêcher les lignes de déborder visuellement */
      flex-shrink: 0; /* Ne pas réduire */
    }

    .hamburger-line {
      height: 4px;
      background: var(--primary-color) !important;
      border-radius: 2px;
      transition: all 0.3s ease;
      display: block;
      transform-origin: center center;
      pointer-events: none; /* Permet les clics sur le bouton parent */
      position: absolute; /* Position absolue pour que toutes les lignes soient au même endroit */
      left: 10px; /* Position fixe à gauche, pas left:50% qui peut déborder */
      right: 10px; /* Position fixe à droite pour centrer */
      margin: 0; /* Pas de margin négative */
    }

    .hamburger-line:nth-child(1) {
      width: 26px;
      top: calc(50% - 11px); /* trait haut */
      left: 10px; /* Fixe à gauche */
      right: auto; /* Pas de right */
    }

    .hamburger-line:nth-child(2) {
      width: 26px;
      top: calc(50% - 2px); /* trait médian */
      left: 10px; /* Fixe à gauche */
      right: auto; /* Pas de right */
    }

    .hamburger-line:nth-child(3) {
      width: 18px; /* dernier trait volontairement plus court */
      top: calc(50% + 7px); /* trait bas */
      left: 18px; /* aligné à droite du bouton */
      right: auto;
    }

    .hamburger-menu.active .hamburger-line:nth-child(1) {
      transform: rotate(45deg) !important;
      background: var(--primary-color) !important;
      top: calc(50% - 2px); /* rejoint le trait médian */
      width: 26px; /* croix */
      left: 10px; /* Centré dans le container */
    }

    .hamburger-menu.active .hamburger-line:nth-child(2) {
      opacity: 0 !important;
      transform: scaleX(0) !important;
    }

    .hamburger-menu.active .hamburger-line:nth-child(3) {
      transform: rotate(-45deg) !important;
      background: var(--primary-color) !important;
      top: calc(50% - 2px); /* rejoint le trait médian */
      width: 26px; /* croix */
      left: 10px; /* Centré dans le container */
    }
}


@media (min-width: 1024px) {
    .hamburger-menu {
      display: none !important;
    }

    .mobile-controls {
      display: none !important;
    }

    .user-menu-mobile,
    .user-menu-toggle-mobile {
      display: none !important;
    }
}



/* ==========================================================================
   07. PANNEAU MOBILE — navigation plein écran
   Ouvert par le burger. Inchangé, hors décalage haut qui suit désormais
   la hauteur réelle de la barre au lieu d'un 140px en dur.
   ========================================================================== */

@media (max-width: 1023.98px) {
    .nav-container {
      flex-direction: column;
      align-items: center;
      gap: var(--spacing-md);
      width: 100%;
    }

    .nav-link {
      border-radius: var(--border-radius-sm);
      border: none;
      padding: var(--spacing-md);
      width: 100%;
    }

    .header-nav.active .nav-container-primary {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-md);
      width: 100%;
      display: flex !important;
    }

    .header-nav.active .nav-container-unlogged {
      display: none !important;
    }

    .header-nav.active .nav {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-sm); /* Espacement entre les items */
      width: 100%;
      list-style: none;
      padding: var(--spacing-sm) 0; /* Padding vertical pour le conteneur */
      margin: 0;
    }

    .header-nav.active .nav li {
      width: 100%;
      text-align: left; /* Alignement à gauche comme le menu profile */
    }

    /*
      Aligné sur le menu profil, que ce fichier citait déjà comme référence
      pour l'alignement et la hauteur. La bordure de 2px en `--text-secondary`
      était un reste : sur fond sombre elle se lisait comme un gros cadre blanc
      autour de chaque entrée. Elle n'était visible que depuis que les liens
      d'un vrai menu WordPress reçoivent la classe `nav-link` (v3.0.0.74) —
      avant, aucune règle ne s'appliquait.

      Ce qui reste : la hauteur de 52px, qui est une cible tactile, et le fond
      au survol, comme le menu profil.
    */
    .header-nav.active .nav-link {
      display: flex;
      align-items: center;
      width: 100%;
      padding: var(--spacing-md);
      min-height: 52px;
      border-radius: var(--border-radius-sm);
      border: none;
      text-align: left;
      font-family: var(--font-heading);
      font-weight: 700 !important;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      transition: background-color var(--transition-fast);
    }

    .header-nav.active .nav-link:hover {
      background-color: var(--bg-secondary);
      color: var(--text-primary) !important;
      text-decoration: none !important;
    }

    .header-nav {
      display: none !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      background: var(--bg-primary) !important; /* Fond opaque */
      border-top: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg);
      flex-direction: column !important;
      padding: var(--spacing-lg) !important;
      gap: var(--spacing-md);
      z-index: 9999 !important; /* En dessous du header (10000) */
      max-height: 100vh !important;
      overflow-y: auto;
      /*
        Le panneau part de `top: 0`, donc il recouvre AUSSI le bandeau promo
        posé au-dessus du header. Sa marge haute doit dégager les deux, sinon
        son contenu démarre sous la navbar et la chevauche — constat QA, avatar
        et pseudo au niveau du logo.
      */
      padding-top: calc(
        var(--hero-promo-height, 0px) + var(--navbar-height) + var(--spacing-lg)
      ) !important;
      margin: 0 !important;
    }

    .header-nav.active {
      display: flex !important;
    }

    body.nav-open {
      overflow: hidden !important;
      position: fixed;
      width: 100%;
      height: 100%;
    }
}



/* ==========================================================================
   08. THÈMES CLAIR / SOMBRE
   ========================================================================== */

[data-theme="dark"] .custom-logo-light {
  display: none !important;
}

[data-theme="dark"] .custom-logo-dark {
  display: block !important;
}

[data-theme="dark"] .credit-balance-pill {
    background: #1e293b !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .credit-suffix {
    color: #94a3b8 !important;
}

[data-theme="light"] .nav-container .nav-link,
[data-theme="light"] .nav-container .nav a,
[data-theme="light"] .nav-container a {
  color: var(--text-primary) !important;
}

[data-theme="light"] .nav-container .nav-link:hover,
[data-theme="light"] .nav-container .nav a:hover,
[data-theme="light"] .nav-container a:hover {
  color: var(--text-primary) !important;
  opacity: 0.7;
}

[data-theme="light"] .user-menu-items li a,
[data-theme="light"] .user-menu-items > li > a {
  color: var(--text-primary) !important;
}

[data-theme="light"] .user-menu-items li a:hover,
[data-theme="light"] .user-menu-items > li > a:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .user-menu-items li a svg,
[data-theme="light"] .user-menu-items > li > a svg {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .user-menu-logout,
[data-theme="light"] .logout-btn {
  color: var(--error-color) !important;
}

[data-theme="light"] .user-menu-logout:hover,
[data-theme="light"] .logout-btn:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--error-color) !important;
}

[data-theme="light"] .user-menu-logout svg {
  color: var(--error-color) !important;
}

[data-theme="light"] .user-name {
  color: var(--text-primary) !important;
}

[data-theme="light"] .user-credits {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .credit-amount-val {
  color: #f1f5f9 !important;
}



/* ==========================================================================
   09. VARIANTE LANDING — header transparent au-dessus du hero
   body.landing-minimal-header-hero, états scrolled / non scrolled.
   ========================================================================== */

body.landing-minimal-header-hero .header {
  position: fixed;
  /* Sous le bandeau injecté (hauteur mesurée → --hero-promo-height, cf. hero-video.js / landing-hero-header.js) */
  top: var(--hero-promo-height, 32px);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10000;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    backdrop-filter 0.28s ease,
    min-height 0.28s ease,
    padding 0.28s ease;
}

body.admin-bar.landing-minimal-header-hero .header {
  top: calc(32px + var(--hero-promo-height, 32px));
}

body.landing-minimal-header-hero .header:not(.header--scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 0;
  /* Un peu d’air sous le bandeau promo */
  padding: 14px 0 12px;
  --header-height: var(--navbar-height);
  /* Ne pas rogner le logo (souvent plus haut que la ligne de boutons) */
  overflow: visible;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .no-logo {
  overflow: visible;
  max-height: none;
  height: auto;
  align-self: center;
}

body.landing-minimal-header-hero .header .no-logo {
  overflow: visible;
  max-height: none;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .header-content {
  /* Au moins la hauteur max du logo + marge (évite clip avec .no-logo) */
  min-height: 48px;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-light {
  display: none !important;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-dark {
  display: block !important;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-link:not(:has(.custom-logo-dark)) .custom-logo-light {
  display: block !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .header-actions .btn-outline,
body.landing-minimal-header-hero .header:not(.header--scrolled) .mobile-controls .btn-outline {
  display: inline-flex !important;
  color: #f8fafc !important;
  border-color: rgba(248, 250, 252, 0.95) !important;
  background: rgba(15, 23, 42, 0.35) !important;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .header-actions .btn-primary,
body.landing-minimal-header-hero .header:not(.header--scrolled) .mobile-controls .btn-primary {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .hamburger-line {
  background-color: #f8fafc !important;
}

body.landing-minimal-header-hero .header:not(.header--scrolled) .user-menu-toggle-mobile {
  box-shadow: 0 0 0 2px rgba(248, 250, 252, 0.9);
  border-radius: 50%;
}

body.landing-minimal-header-hero .header.header--scrolled {
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: var(--navbar-height);
  padding: 0;
  --header-height: var(--navbar-height);
}

body.landing-minimal-header-hero .header.header--scrolled .header-content {
  min-height: var(--navbar-height);
}

body.page-template-page-landing-php .landing-page-content .wp-block-post-title,
body.page-template-page-landing-php .landing-page-content > header.page-header,
body.page-template-page-landing-php .landing-page-content .page-header .page-title,
.landing-page-template .page-title {
  display: none !important;
}

@media (max-width: 767.98px) {
    body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-link img {
      max-height: 40px !important;
    }

    body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-link:not(:has(.custom-logo-dark)) .custom-logo-light {
      filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) !important;
    }

    body.page-template-page-landing-php .no-logo img,
    body.page-template-page-landing-php .no-logo .custom-logo,
    body.page-template-page-landing-php .no-logo .custom-logo-link,
    body.page-template-page-landing-php .no-logo .custom-logo-link img,
    body.page-template-page-landing-php .custom-logo-link,
    body.page-template-page-landing-php .custom-logo-link img {
      max-height: 52px !important;
    }

    body.page-template-page-landing-php .no-logo {
      max-height: 56px;
    }

    body.page-template-page-landing-php .header-content {
      min-height: 56px;
    }

    body.page-template-page-landing-php .header {
      min-height: 0;
      padding: var(--spacing-sm) 0;
    }
}


@media (min-width: 768px) {
    body.landing-minimal-header-hero .header:not(.header--scrolled) .header-content {
      min-height: 60px;
    }

    body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-link img {
      max-height: 56px !important;
    }

    body.landing-minimal-header-hero .header:not(.header--scrolled) .custom-logo-link:not(:has(.custom-logo-dark)) .custom-logo-light {
      filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)) !important;
    }

    body.landing-minimal-header-hero .header:not(.header--scrolled) .nav-actions .credit-balance-pill {
      display: none !important;
    }

    /*
      Sur un hero de landing, la barre ne montre que le logo tant qu'on n'a pas
      défilé : les conteneurs de navigation sont masqués.

      `:not(.active)` EST INDISPENSABLE. Sans lui, la règle masquait aussi le
      contenu du PANNEAU DU BURGER une fois ouvert — sa spécificité (0,5,1)
      écrasant le `display: flex !important` du panneau (0,3,0). Le menu
      s'ouvrait sur du vide à partir de 768px, et fonctionnait en dessous où
      cette media query ne s'applique pas : d'où un menu cassé sur iPad
      seulement. Constat QA.

      Masquer la barre au repos, oui ; masquer le menu qu'on vient d'ouvrir,
      non.
    */
    body.landing-minimal-header-hero .header:not(.header--scrolled) .header-nav:not(.active) .nav-container-primary,
    body.landing-minimal-header-hero .header:not(.header--scrolled) .header-nav:not(.active) .nav-container-unlogged {
      display: none !important;
    }

    body.landing-minimal-header-hero .header.header--scrolled .header-nav:has(.nav-actions) .nav-container-primary {
      display: flex !important;
    }

    body.landing-minimal-header-hero .header.header--scrolled .header-nav:not(:has(.nav-actions)) .nav-container-unlogged {
      display: flex !important;
    }
}


@media screen and (max-width: 782px) {
    body.admin-bar.landing-minimal-header-hero .header {
      top: calc(46px + var(--hero-promo-height, 32px));
    }
}