/* Header / Navigation */
header {
  border-bottom: var(--border);
  background: var(--light-main);
}

.top-menu {
  max-width: var(--viewport);
  margin: 0 auto;
}

header nav {
  padding: 1rem;
}

/* Reset listes */
header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ancrage pour tous les niveaux */
header nav li {
  position: relative;
}

/* flex pour pousser les actions à droite */
header nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Menu niveau 1 */
header nav > ul {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* Liens (tous niveaux) */
header nav ul li a {
  display: block;
  padding: 0.5rem 0.85rem;
  color: inherit;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* Hover / focus niveau 1 */
header nav ul li a:hover {
  outline: none;
}

/* =========================
   ITEMS PARENTS (flèche + clic)
   ========================= */

/* Les items avec enfants : on met le lien en "flex" pour placer la flèche à droite */
header nav li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* =========================
   CHEVRON SVG (dropdown / drop-right)
   ========================= */

header nav li.menu-item-has-children > a::after{
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--ptah-chevron);
  mask-image: var(--ptah-chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transition: transform .25s ease;
}

/* Niveau 1 → dropdown */
header nav .menu > li.menu-item-has-children > a::after{
  transform: rotate(0deg);
}

/* Sous-menu → drop-right */
header nav .sub-menu > li.menu-item-has-children > a::after{
  transform: rotate(-90deg);
}

/* Ouvert niveau 1 */
header nav .menu > li.menu-item-has-children.is-open > a::after{
  transform: rotate(180deg);
}

/* Ouvert sous-menu */
header nav .sub-menu > li.menu-item-has-children.is-open > a::after{
  transform: rotate(90deg);
}

/* Feedback visuel quand ouvert */
header nav li.menu-item-has-children.is-open > a, .account > button[aria-expanded="true"] {
  color: var(--accent-main);
  background: var(--hover-focus);
}

/* =========================
   SOUS-MENUS (générique)
   ========================= */

/* Tous les sous-menus (tous niveaux) */
header nav ul.sub-menu {
  display: none;
  position: absolute;

  /* évite le micro-décalage à chaque niveau */
  top: calc(100% + 0.25rem);
  left: 0;

  min-width: 14rem;
  padding: 0.35rem;

  background: var(--light-menu);
  border: var(--border);
  border-radius: var(--radius);

  z-index: 1000;
  white-space: nowrap;

  /* ombre douce (light mode) */
  box-shadow: var(--shadow);
}

/* Affichage UNIQUEMENT quand ouvert au clic */
header nav li.is-open > ul.sub-menu {
  display: block;
}

/* Liens dans les sous-menus */
header nav ul.sub-menu a {
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
}

/* Hover/focus dans sous-menus */
header nav ul.sub-menu a:hover {
  outline: none;
}

/* =========================
   NIVEAUX 2+ (illimité)
   ========================= */

/* Sous-menu DANS un sous-menu (niveau 3,4,5,...) */
header nav ul.sub-menu ul.sub-menu {
  top: -0.35rem;
  left: calc(100% + 0.35rem);
  z-index: 1100;
}

/* Petit retrait visuel interne (lisibilité hiérarchie) */
header nav ul.sub-menu ul.sub-menu a {
  padding-left: 0.9rem;
}

/* =========================
   ACTIONS À DROITE (icône + dropdown)
   ========================= */

header nav .nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Bouton icône */
header nav .nav-action {
  appearance: none;
  border: 0;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;

  width: 100%;
}

header nav .account {
  position: relative;
}

header nav .account .icon {
  display: inline-flex;
  line-height: 0;
}

/* Dropdown panel (compte / login) */
header nav .account-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);

  min-width: 16rem;
  padding: 0.35rem;

  background: var(--light-menu);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1200;
}

header nav .account.is-open > .account-panel {
  display: block;
}

ul.menu-account .menu-item:last-child{
  margin-bottom: 0.5rem;
}

/* Login form (wp_login_form) */
header nav .account-panel form {
  display: grid;
  gap: 0.5rem;
  padding: 0.35rem;
}

header nav form p {
  margin: 0;
}
.login-submit p{
  margin-top: 0.5rem;
}

header nav .account-panel h5 {
  text-align: center;
  margin: 0.5rem;
}

header nav .account-panel label, header nav .account-panel p {
  font-size: 0.9em;
}

.account-panel button {
  margin : 0;
}
/* Style du label contenant */
.ptah-loginform-remember {
  cursor: pointer;
}

.account-welcome {
  margin: 0 0 0.5rem 0;
  text-align: center;
  color: var(--text-muted);
}

/* Erreurs de champ spécifiques */
.field-error {
  display: block;
  color: var(--error);
  font-size: 0.8em;
  margin-top: -10px;
}

/* Accessibilité */
header nav .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}