/* =========================================
   BULLES MENU — STRATÉGIE MATHS
   ========================================= */

@media (hover: hover) and (pointer: fine) {

  header nav a,
  .ct-header a.ct-menu-link {
    position: relative;
  }

  .menu-bulle {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);

    width: 260px;
    max-width: 260px;

    padding: 10px 14px;

    background: #ffffff;
    border: 1px solid #ff7a00;
    color: #ff7a00;

    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);

    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 9999;

    /* ✅ retour à la ligne automatique */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }

  header nav a:hover .menu-bulle,
  .ct-header a.ct-menu-link:hover .menu-bulle {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
  }
}

/* ============================================================
   MENU — STYLE UNIFIÉ (gauche + droite + mobile)
   Objectif : même entourage orange partout
   ============================================================ */

/* Base identique sur tous les liens de menu (premium léger) */
.ct-header a.ct-menu-link,
.ct-panel  a.ct-menu-link,
.ct-drawer a.ct-menu-link,
#menu-menu-moi-droite a.ct-menu-link{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.1 !important;

  /* 👇 un peu plus “premium” : moins large + plus net */
  padding: 7px 10px !important;          /* moins large horizontalement */
  border-radius: 12px !important;        /* moins ovale que 999, plus chic */

  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative;

  /* Texte */
  color: #15171a !important;

  /* Bordure “réservée” (évite que ça bouge au hover) */
  border: 1px solid transparent !important;

  /* Fond neutre */
  background: rgba(255,255,255,0.00) !important;

  /* 👇 micro animation premium */
  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease,
    box-shadow .16s ease !important;
}

/* On tue les underline Blocksy (souvent en ::after/::before) */
.ct-header a.ct-menu-link::after,
.ct-panel  a.ct-menu-link::after,
.ct-drawer a.ct-menu-link::after,
#menu-menu-moi-droite a.ct-menu-link::after,
.ct-header a.ct-menu-link::before,
.ct-panel  a.ct-menu-link::before,
.ct-drawer a.ct-menu-link::before,
#menu-menu-moi-droite a.ct-menu-link::before{
  display: none !important;
}

/* HOVER : premium léger (petit relief + glow très doux) */
.ct-header a.ct-menu-link:hover,
.ct-panel  a.ct-menu-link:hover,
.ct-drawer a.ct-menu-link:hover,
#menu-menu-moi-droite a.ct-menu-link:hover{
  border-color: #f57c00 !important;
  background: rgba(245,124,0,0.07) !important;
  color: #f57c00 !important;

  /* petit “lift” discret */
  transform: translateY(-1px) !important;

  /* glow doux, pas trop voyant */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(245,124,0,0.18) !important;
}

/* ACTIF : premium léger (plus “posé” que hover) */
.ct-header .menu-item.sm-menu-active > a.ct-menu-link,
.ct-panel  .menu-item.sm-menu-active > a.ct-menu-link,
.ct-drawer .menu-item.sm-menu-active > a.ct-menu-link,
#menu-menu-moi-droite .menu-item.sm-menu-active > a.ct-menu-link{
  border-color: #f57c00 !important;
  background: rgba(245,124,0,0.10) !important;
  color: #f57c00 !important;

  /* actif = plus “stable”, pas de lift */
  transform: none !important;

  /* glow plus fin et propre */
  box-shadow: 0 6px 18px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(245,124,0,0.18) !important;
}

/* ============================================================
   TEST HAUTEUR — verrouillage identique gauche + droite
   (Blocksy : header-menu-1 = gauche, header-menu-2 = droite)
   ============================================================ */

nav#header-menu-1 li.menu-item > a.ct-menu-link,
nav#header-menu-2 li.menu-item > a.ct-menu-link{
  display: inline-flex !important;
  align-items: center !important;

  /* même “boîte” partout */
  padding: 8px 6px !important;
  line-height: 1.1 !important;
  border-radius: 10px !important;   /* 👈 moins ovale */

  /* au cas où le thème force une hauteur */
  height: auto !important;
  min-height: 0 !important;

  /* évite des écarts dus à des marges internes */
  margin: 0 !important;
}

/* Même taille/épaisseur de texte sur gauche + droite */
nav#header-menu-1 a.ct-menu-link,
nav#header-menu-2 a.ct-menu-link{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* IMPORTANT : la bulle ne doit jamais influencer la hauteur */
nav#header-menu-1 a.ct-menu-link > .menu-bulle,
nav#header-menu-2 a.ct-menu-link > .menu-bulle{
  position: absolute !important;
}

/* =========================================
   ESPACE ENTRE LES BOUTONS MENU
   ========================================= */

nav#header-menu-1 .menu-item,
nav#header-menu-2 .menu-item{
  margin-right: 5px !important; /* 👈 espace horizontal */
}

/* Supprime la marge du dernier item */
nav#header-menu-1 .menu-item:last-child,
nav#header-menu-2 .menu-item:last-child{
  margin-right: 0 !important;
}