/* ===========================================================================
   Surcouche du menu mobile — sites statiques Wiloki
   ---------------------------------------------------------------------------
   Le menu burger d'Avada s'affiche en dessous de 1200 px. Tel quel, c'est une
   pile de lignes blanches séparées par des filets, sans marge, sans état au
   survol et sans que la page courante se distingue.

   Ce fichier ne change que ça. Tout est enfermé dans .fusion-mobile-nav-holder,
   qui n'existe qu'en version mobile : le menu de bureau n'est pas touché.

   Couleurs reprises des options Avada du site :
     bleu de marque  #00a1ff      boutons  #ffa737 / survol #ffb251
     titres #202020               filets   #e8eaf0
   =========================================================================== */

:root {
  --wk-bleu: #00a1ff;
  --wk-orange: #ffa737;
  --wk-orange-survol: #ffb251;
  --wk-encre: #202020;
  --wk-filet: #e8eaf0;
  --wk-titre: "Source Sans Pro", Arial, Helvetica, sans-serif;
}

/* --- Le panneau ---------------------------------------------------------- */

.fusion-mobile-nav-holder {
  background: #fff;
}

.fusion-mobile-nav-holder.fusion-mobile-menu-expanded {
  padding: 10px 0 14px;
  border-bottom: 3px solid var(--wk-bleu);
  box-shadow: 0 14px 30px rgba(32, 32, 32, 0.16);
  animation: wk-menu-ouvre 0.22s ease-out;
}

@keyframes wk-menu-ouvre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fusion-mobile-nav-holder.fusion-mobile-menu-expanded { animation: none; }
}

.fusion-mobile-nav-holder .fusion-mobile-menu {
  padding: 0 14px;
  margin: 0;
  list-style: none;
}

/* --- Les entrées --------------------------------------------------------- */

/* Avada pose des filets sur chaque ligne : c'est ce qui fait l'effet
   « liste administrative ». On les retire au profit de l'espacement. */
.fusion-mobile-nav-holder .fusion-mobile-nav-item,
.fusion-mobile-nav-holder .fusion-mobile-nav-item > a {
  border: 0 !important;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item {
  margin: 2px 0;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;            /* confortable au doigt */
  padding: 13px 18px;
  border-radius: 10px;
  font-family: var(--wk-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--wk-encre);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Avada applique ses propres fonds via .fusion-background-highlight, avec une
   priorité supérieure. On la reprend dans le sélecteur, et on force le fond —
   c'est le propre d'une surcouche que de l'emporter sur le thème. */
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-nav-item > a:hover,
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-nav-item > a.fusion-background-highlight:hover,
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-nav-item > a:focus-visible {
  background-color: rgba(0, 161, 255, 0.09) !important;
  color: var(--wk-bleu);
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item > a:focus-visible {
  outline: 3px solid var(--wk-bleu);
  outline-offset: 2px;
}

/* La page où l'on se trouve : sans ça, on ne sait pas où on est. */
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-current-nav-item > a,
.fusion-mobile-nav-holder .fusion-mobile-menu .fusion-mobile-current-nav-item > a.fusion-background-highlight {
  background-color: rgba(0, 161, 255, 0.12) !important;
  color: var(--wk-bleu);
  font-weight: 700;
}

/* --- Les sous-menus ------------------------------------------------------ */

.fusion-mobile-nav-holder .fusion-mobile-nav-item ul {
  padding-left: 14px;
  list-style: none;
  border-left: 2px solid var(--wk-filet);
  margin: 2px 0 6px 18px;
}

.fusion-mobile-nav-holder .fusion-mobile-nav-item ul a {
  min-height: 44px;
  font-weight: 400;
  font-size: 1rem;
}

/* --- Le bouton d'appel à l'action ---------------------------------------- */

/* Le lien qui sort du site — « Jouer à Adibou », « C'est parti » — reprend
   le bouton orange du menu de bureau, qu'Avada perd en version mobile. */
.fusion-mobile-nav-holder .fusion-mobile-menu > li > a[href^="http"]:not([href*="wiloki.com"]) {
  margin-top: 8px;
  background-color: var(--wk-orange) !important;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.fusion-mobile-nav-holder .fusion-mobile-menu > li > a[href^="http"]:not([href*="wiloki.com"]):hover,
.fusion-mobile-nav-holder .fusion-mobile-menu > li > a[href^="http"]:not([href*="wiloki.com"]):focus-visible {
  background-color: var(--wk-orange-survol);
  color: #fff;
}

/* --- Le bouton burger ---------------------------------------------------- */

.fusion-mobile-menu-icons a.fusion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  color: var(--wk-encre);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fusion-mobile-menu-icons a.fusion-icon:hover,
.fusion-mobile-menu-icons a.fusion-icon[aria-expanded="true"] {
  background-color: rgba(0, 161, 255, 0.10);
  color: var(--wk-bleu);
}