/* ============================================================================
   minecraft.fr — MENU "Bloc par Bloc" (PUBLIC, tout le monde)
   Skin CSS sur la structure native du thème Extra (#top-header / #main-header
   / #et-menu / .sub-menu). Aucune modif de markup.
   Replis var(--mc-*, valeur) : marche en CLAIR sans redesign.css, et suit le
   THÈME SOMBRE quand redesign.css (overlay [data-theme="dark"]) est chargé.
   Dropdowns = cartes claires en cascade (proposition B de la maquette).
   ============================================================================ */

/* ---- Conteneur global ---- */
.header{
  background:var(--mc-dark,#161D1B) !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ------------------------------------------------------------
   1) BARRE SECONDAIRE — #top-header (fine bande sombre du haut)
   ------------------------------------------------------------ */
#top-header{
  background:var(--mc-dark-2,#202A27) !important;
  border-bottom:1px solid var(--mc-dark-line,#2E3A36) !important;
  box-shadow:none !important;
  color:#C7D3CF !important;
}
#top-header #et-secondary-nav a,
#top-header #et-secondary-nav li a{
  font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:#A9B7B2 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
#top-header #et-secondary-nav a:hover{ color:#fff !important; }

/* barre "TRENDING" / À la une */
#et-trending-label{
  font-family:var(--mc-display,"Space Grotesk",system-ui,sans-serif) !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  color:var(--mc-tq-l,#34CBB2) !important;
}
#et-trending-button span{ background:var(--mc-tq,#1AA995) !important; }
.et-trending-post a{ color:#C7D3CF !important; }
.et-trending-post a:hover{ color:#fff !important; }

/* icônes sociales (haut) */
#top-header .et-extra-social-icon a{
  color:#A9B7B2 !important;
  transition:color .15s ease, background .15s ease;
}
#top-header .et-extra-social-icon a:hover{ color:var(--mc-tq-l,#34CBB2) !important; }

/* ------------------------------------------------------------
   2) BARRE PRINCIPALE — #main-header
   ------------------------------------------------------------ */
#main-header{
  background:var(--mc-dark,#161D1B) !important;
  box-shadow:none !important;
}
/* liseré turquoise signature sous le header */
#main-header::after{
  content:"";
  display:block;
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--mc-tq,#1AA995);
  z-index:2;
}
#main-header .container{ position:relative; }

/* Header fixe (au scroll) : fond sombre + ombre dure */
.et-fixed-header #main-header,
#main-header.et-fixed-header{
  background:var(--mc-dark,#161D1B) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.18) !important;
}

/* Logo : on garde l'image, on cale l'alignement */
#main-header a.logo,
.logo_container a.logo{
  display:inline-flex !important;
  align-items:center !important;
}

/* ------------------------------------------------------------
   3) NAVIGATION PRINCIPALE — #et-menu (niveau 0)
   ------------------------------------------------------------ */
#main-header nav .menu-item > a,
#et-navigation #et-menu > li > a,
#main-header #top-menu li a{
  font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
  font-weight:600 !important;
  font-size:14px !important;
  color:#C7D3CF !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:color .15s ease;
}
#main-header nav .menu-item > a:hover,
#et-navigation #et-menu > li > a:hover{ color:#fff !important; }

/* chevron des entrées de 1er niveau à sous-menu (Extra l'affiche en ::after) */
#et-navigation #et-menu > li.menu-item-has-children > a::after{
  color:var(--mc-tq-l,#34CBB2) !important;
  opacity:.85;
}

/* Entrée active : soulignement turquoise bloc */
#main-header nav .current-menu-item > a,
#main-header nav .current_page_item > a,
#main-header nav .current-menu-ancestor > a{
  color:#fff !important;
  position:relative;
}
#main-header nav > ul > .current-menu-item > a::before,
#main-header nav > ul > .current_page_item > a::before,
#main-header nav > ul > .current-menu-ancestor > a::before{
  content:"";
  position:absolute;
  left:11px; right:11px; bottom:6px;
  height:3px;
  background:var(--mc-tq,#1AA995);
}

/* ------------------------------------------------------------
   4) DÉROULANTS — cartes claires en cascade (proposition B)
   Tous niveaux : .sub-menu (niv. 1) + .sub-menu .sub-menu (niv. 2/3)
   ------------------------------------------------------------ */
#main-header nav ul.sub-menu,
#main-header nav .menu-item .sub-menu,
#et-navigation #et-menu .sub-menu{
  background:var(--mc-surface,#FFFFFF) !important;
  border:2px solid var(--mc-edge,#1E2422) !important;
  border-top:4px solid var(--mc-tq,#1AA995) !important;
  box-shadow:var(--mc-sh,4px 4px 0 #1E2422) !important;
  padding:6px !important;
  min-width:206px !important;
}

/* lignes du déroulant */
#main-header nav .sub-menu li,
#et-navigation #et-menu .sub-menu li{ border:0 !important; }

#main-header nav .sub-menu li a,
#et-navigation #et-menu .sub-menu li a{
  font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
  font-weight:600 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  color:var(--mc-ink-2,#3C4742) !important;
  background:none !important;
  padding:9px 30px 9px 12px !important;
  border:0 !important;
  position:relative !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  transition:background .12s ease, color .12s ease;
}
/* séparateurs pointillés entre lignes voisines */
#main-header nav .sub-menu li + li > a,
#et-navigation #et-menu .sub-menu li + li > a{
  border-top:1px dotted var(--mc-line-2,#CFCABD) !important;
}

/* hover ligne */
#main-header nav .sub-menu li a:hover,
#et-navigation #et-menu .sub-menu li a:hover{
  background:var(--mc-bone,#F4F1EA) !important;
  color:var(--mc-ink,#1E2422) !important;
}

/* ligne d'une entrée du chemin actif / survolé en cascade */
#main-header nav .sub-menu .current-menu-item > a,
#main-header nav .sub-menu .current-menu-ancestor > a,
#et-navigation #et-menu .sub-menu .current-menu-item > a{
  background:var(--mc-tq,#1AA995) !important;
  color:#06231E !important;
}

/* chevron "›" sur les lignes qui ouvrent un sous-niveau */
#main-header nav .sub-menu li.menu-item-has-children > a::after,
#et-navigation #et-menu .sub-menu li.menu-item-has-children > a::after{
  content:"\203A" !important;            /* › */
  position:absolute !important;
  right:12px; top:50%;
  transform:translateY(-50%);
  font-size:15px !important;
  line-height:1 !important;
  color:var(--mc-muted,#6B756F) !important;
}
#main-header nav .sub-menu li.menu-item-has-children > a:hover::after,
#et-navigation #et-menu .sub-menu li.menu-item-has-children > a:hover::after{
  color:var(--mc-tq-d,#11796A) !important;
}
#main-header nav .sub-menu .current-menu-ancestor > a::after{
  color:#06231E !important;
}

/* ------------------------------------------------------------
   5) RECHERCHE — icône + champ
   ------------------------------------------------------------ */
#et_top_search,
#et-navigation .et-search-form,
.et_search_form_container{ color:#C7D3CF !important; }
#et_search_icon::before,
.et-search-icon::before{ color:#C7D3CF !important; }
#et_search_icon:hover::before{ color:var(--mc-tq-l,#34CBB2) !important; }

.et-top-search input,
.et-search-field,
input.et-search-field{
  font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
  font-size:14px !important;
  color:#EAF1EE !important;
  background:var(--mc-dark,#161D1B) !important;
  border:2px solid var(--mc-edge,#2E3A36) !important;
}
.et-top-search input::placeholder,
.et-search-field::placeholder{ color:#7E8C87 !important; }

/* ------------------------------------------------------------
   6) MOBILE — tiroir accordéon (max-width:1024px, breakpoint Extra)
   Vrai menu mobile de minecraft.fr : #et-mobile-navigation
   > #et-extra-mobile-menu.et_extra_mobile_menu.
   Les sous-menus s'ouvrent INLINE (accordéon), pas en carte flottante.
   Extra ajoute la classe .selected sur le <a> d'un parent ouvert.
   ------------------------------------------------------------ */
@media only screen and (max-width:1024px){

  /* bouton burger : carré turquoise (3 barres) */
  #et-mobile-navigation .show-menu-button{
    background:var(--mc-tq,#1AA995) !important;
    box-shadow:var(--mc-sh-sm,3px 3px 0 #1E2422) !important;
  }
  #et-mobile-navigation .show-menu-button span{ background:#06231E !important; }

  /* panneau : tiroir clair, liseré turquoise, bord + ombre dure */
  #et-mobile-navigation #et-extra-mobile-menu{
    background:var(--mc-surface,#FFFFFF) !important;
    border:2px solid var(--mc-edge,#1E2422) !important;
    border-top:4px solid var(--mc-tq,#1AA995) !important;
    box-shadow:var(--mc-sh,4px 4px 0 #1E2422) !important;
    padding:0 !important;
    min-width:0 !important;
  }

  /* rangées de 1er niveau */
  #et-mobile-navigation #et-extra-mobile-menu > li > a{
    font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
    font-weight:700 !important;
    font-size:15px !important;
    color:var(--mc-ink,#1E2422) !important;
    background:none !important;
    padding:14px 46px 14px 16px !important;
    border-bottom:2px solid var(--mc-line,#E3DFD5) !important;
    position:relative !important;
    text-transform:none !important;
  }
  #et-mobile-navigation #et-extra-mobile-menu > li:last-child > a{ border-bottom:0 !important; }

  /* puce carrée turquoise sur les parents de 1er niveau */
  #et-mobile-navigation #et-extra-mobile-menu > li.menu-item-has-children > a{ padding-left:34px !important; }
  #et-mobile-navigation #et-extra-mobile-menu > li.menu-item-has-children > a::before{
    content:"" !important; position:absolute !important; left:16px; top:50%;
    transform:translateY(-50%); width:10px; height:10px;
    background:var(--mc-tq,#1AA995) !important;
    box-shadow:inset -2px -2px 0 rgba(0,0,0,.2);
  }

  /* SOUS-MENUS : inline (accordéon), aucune carte flottante */
  #et-mobile-navigation #et-extra-mobile-menu .sub-menu{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important;
    background:var(--mc-bone,#F4F1EA) !important;
    border:0 !important; border-top:0 !important;
    box-shadow:none !important;
    padding:2px 0 !important; margin:0 !important;
    min-width:0 !important; width:auto !important;
    transform:none !important;
  }

  /* items du sous-menu */
  #et-mobile-navigation #et-extra-mobile-menu .sub-menu li > a{
    font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
    font-weight:600 !important;
    font-size:14px !important;
    color:var(--mc-ink-2,#3C4742) !important;
    background:none !important;
    border:0 !important; border-top:0 !important;
    padding:11px 46px 11px 30px !important;
    position:relative !important;
  }
  /* puce turquoise des feuilles */
  #et-mobile-navigation #et-extra-mobile-menu .sub-menu li > a::before{
    content:"" !important; position:absolute !important; left:16px; top:50%;
    transform:translateY(-50%); width:7px; height:7px;
    background:var(--mc-tq,#1AA995) !important;
  }
  /* niveau 3 : indentation supplémentaire */
  #et-mobile-navigation #et-extra-mobile-menu .sub-menu .sub-menu li > a{ padding-left:44px !important; }
  #et-mobile-navigation #et-extra-mobile-menu .sub-menu .sub-menu li > a::before{ left:30px; }

  /* flèche des parents (chevron bas, pivote à l'ouverture) */
  #et-mobile-navigation #et-extra-mobile-menu li.menu-item-has-children > a::after{
    content:"\25BE" !important;                 /* ▾ */
    font-family:var(--mc-sans,"IBM Plex Sans",system-ui,sans-serif) !important;
    position:absolute !important;
    right:16px !important; left:auto !important; top:50% !important;
    transform:translateY(-50%) !important;
    font-size:13px !important; line-height:1 !important;
    color:var(--mc-muted,#6B756F) !important;
    transition:transform .15s ease;
  }
  /* parent ouvert (.selected) : fond turquoise clair + flèche pivotée */
  #et-mobile-navigation #et-extra-mobile-menu li > a.selected{
    background:var(--mc-tq-bg,#E4F4F0) !important;
    color:var(--mc-tq-d,#11796A) !important;
  }
  #et-mobile-navigation #et-extra-mobile-menu li.menu-item-has-children > a.selected::after{
    transform:translateY(-50%) rotate(180deg) !important;
    color:var(--mc-tq-d,#11796A) !important;
  }
  /* entrée courante */
  #et-mobile-navigation #et-extra-mobile-menu .current-menu-item > a{
    color:var(--mc-tq-d,#11796A) !important;
  }
}