/*------------- HEADER MOBILE --------------*/
@media screen and (max-width: 1246px) {

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* bloque scroll horizontal global */
    background-color: var(--background-color);
  }

  body.menu-open {
    overflow: hidden;
    position: relative;
  }

  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #b9949400;
    color: var(--general-font);
    position: relative;
    z-index: 9999;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    padding: 20px 2em 1em 2em;
  }

  .logo a {
    color: var(--font-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: 20px;
  }

  .logo {
    margin: 0;
    flex-shrink: 0;

  }

  .header-logo-img {
    width: 100px;
  }
  
  .menu-burger {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1003;
    margin-right: 1em;
  }

  .menu-burger span {
    display: block;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    transition: 0.3s;
  }

  .menu-burger.open span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }
  .menu-burger.open span:nth-child(2) {
    opacity: 0;
  }
  .menu-burger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  .header-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .menu-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: #1B1B1B;
    color: var(--border-color);
    display: none;
    flex-direction: column;
    z-index: 1001;
    text-align: center;
    background-image: 
      radial-gradient(circle, #141414 1.3px, transparent 1px),
      linear-gradient(to top, #1b1b1b 0%, #2B2B2B 44%, #323232 78%, #1B1B1B 100%);
    background-size: 10px 10px, auto;
    background-repeat: repeat, no-repeat;
    overflow-y: auto; /* scroll vertical uniquement */
    overflow-x: hidden; /* bloque scroll horizontal */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;
    align-items: stretch;
  }

  #menu-menu {
    width: min-content;
    align-self: center;
  }

  .menu-page.open {
    display: flex;
  }

  .menu-content {
    display: flex;
    flex-direction: column;
    padding-top: 5em;  /* garde l’espacement du haut */
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .menu-page .menu,
  .menu-page .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
  }

  .menu li {
    padding: clamp(1rem, 20px, 25px);
    font-family: var(--title-font);
    font-size: clamp(2vw, 6vw, 7vw);
    font-weight: 400;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
  }

  .sub-menu li {
    border-bottom: none;
    padding: 5px;
  }

  .menu li a {
    color: var(--font-color);
    text-decoration: none;
    cursor: pointer;
    display: block;
    text-align: left;
    width: 100%;
    padding-left: 1em; /* espace texte menu */
    box-sizing: border-box;
  }

  /* Sous-menu mobile corrigé */
  .menu li .sub-menu {
    display: flex;
    flex-direction: column;
    max-height: 0; /* collapsed */
    overflow: hidden;
    opacity: 0;
    transform-origin: top center;
    transform: translateY(-8px) scaleY(.98);
    /* animer max-height + transform + opacity + padding pour une ouverture douce */
    transition: max-height 480ms cubic-bezier(.16,.84,.24,1),
                transform 420ms cubic-bezier(.16,.84,.24,1),
                opacity 360ms ease,
                padding 360ms ease;
    padding: 0 0 0 1em; /* collapsed padding (bottom/top zero) */
    position: relative; /* reste sous parent */
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .menu li.open > .sub-menu {
    /* Set a reasonable max-height to allow transition. If some sub-menus
       are taller you can increase this value or use JS to set exact height. */
    max-height: 600px;
    opacity: 1;
    transform: translateY(0) scaleY(1);
    padding: 8px 0 8px 1em; /* animate padding into place */
  }

  .menu li .sub-menu li a {
    display: block;
    padding: 8px 0.5em;
    font-family: var(--general-font);
    font-size: 13px;
    color: #F1E2CC;
    width: 100%;
    box-sizing: border-box;
  }

  /* Barre de recherche mobile */
  .menu-search-desktop { display: none !important; }
  .menu-search-mobile { display: none; }

  .menu-page.open .menu-search-mobile {
    display: flex;
    padding: 10px 1em;
    align-items: center;
    justify-content: flex-start;
    width: -webkit-fill-available;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    margin-top: 4em;
    background: var(--font-color);
    margin: 5em 2em 0em 2em;
    font-family: var(--general-font);
  }

  @media screen and (min-width: 576px)  {
    .menu-page.open .menu-search-mobile {
      margin: 5em 3em 0em 3em;
    }    

    .logo {
      margin-left: 1em;
    }

    .site-header {
      border-bottom: 1px solid var(--border-color);
    }
  }

  .menu-page.open .menu-search-mobile input {
    flex-grow: 1;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding-left: 1em;
    color: var(--background-color);
  }

  .menu-page.open .menu-search-mobile button {
    box-sizing: border-box;
    background: #00000000;
    border-style: none;
  }

  .search-form button svg {
    fill: var(--background-color);
  }

  .header-margin { height: 0px; }


  /*lorque le menu est ouvert, elle ne prend que 1/3 de la page en horizontale*/
  @media screen and (min-width: 767px) and (max-width: 1246px) {

    .menu-page.open .menu-search-mobile {
      margin: 3.8em 0 0 0;
    }

    /* Ajuster la bordure droite lorsque le menu est ouvert */
    body.menu-open .border.droite {
      bottom: 0; /* leave header space (adjust if your header is taller) */
      height: 0;
      transition: top 300ms ease, height 300ms ease;
    }

    /* (Animation) Animer le menu bruger en tablette */
    .menu-burger {
      transform: translateX(0);
      transition: transform 300ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
      will-change: transform, opacity;
    }

    /* (Animation) Lorsque le menu est ouvert, déplacer le burger vers la droite  */
    body.menu-open .menu-burger {
      transform: translateX(100%);
    }

    .site-header {
      z-index: 10000;
    }

    /* Menu translation du coté avec animation on click avec le menu-burger  */
    .menu-page {
      width: clamp(300px, 33.333vw, 500px); 
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;
      height: 100vh;
      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
      z-index: 1000;
      /* menu est caché */
      transform: translateX(100%);
      transition: transform 320ms cubic-bezier(.2,.8,.2,1);
      pointer-events: none;
      display: flex; /* ensure layout is preserved for transform */
      flex-direction: column;
    }

    .menu-page.open {
      transform: translateX(0);
      pointer-events: auto;
    }


    .menu-content {
      padding-top: 5em;
    }

    .menu li {
      font-size: clamp(14px, 3.5vw, 24px);
    }

    .menu li a {
      padding-left: 0.5em;
    }
  }

  /* Ajuster le padding du header entre 1024px et 1246px */
  @media screen and (min-width: 1024px) and (max-width: 1246px) {
    .site-header
    {
        padding: 20px 3em 1em 3em;
    }
  }

}

/*------------- HEADER DESKTOP --------------*/
@media screen and (min-width: 1247px) {

  body {
    margin: 0;
  }

  .header-margin {
    height: 0px;
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #b9949400;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    height: 40px;
    padding: 0 4em;
  }

  .logo {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 11vw;
  }

  .logo a {
    font-size: 1rem;
    color: var(--border-color);
    text-decoration: none;
    font-weight: bold;
  }


  .header-logo-img {
    width: 100px;
  }

  /* Hide burger on desktop */
  .menu-burger {
    display: none;
  }

  /* Menu container */
  .menu-page {
    flex: 1;
    display: flex;
    justify-content: center;
    background: none;
    position: static;
    height: auto;
  }

  .menu-content {
    display: flex;
    flex-flow: row-reverse;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
  }


  .menu {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu li {
    position: relative;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 15px;
  }

  .menu li a {
    color: var(--font-color);
    text-decoration: none;
    font-family: var(--title-font);
    font-size: clamp(12px, 0.7vw, 15.5px);
    transition: color 0.2s ease, transform 0.2s ease-out;
  }

  .menu li a:hover {
    color: #f3efe8;
    transform: scale(1.05);
  }

 /* --- Sous-menu dropdown --- */
  .menu li .sub-menu {
    position: absolute;
    top: 103%;
    left: 0;
    background: #1f1f1f;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    border: 1px solid var(--border-color);
    min-width: 140px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 1005;
    display: flex;
    flex-direction: column;
    translate: 0px -12px;
    border-top: none;
  }

  .menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .menu li .sub-menu li {
    border: none;
    height: auto;
    padding: 0;
  }

  .menu li .sub-menu li a {
    display: block;
    padding: 10px 15px;
    color: #F1E2CC;
    font-size: 9px;
    text-align: left;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .menu li .sub-menu li a:hover {
    color: #fff;
  }

  .menu li .sub-menu li .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 8px;
  }

  /* --- Search bar --- */
  form.search-form {
    display: flex;
    align-items: center;
    border: 1px solid #444;
    padding: 4px 10px;
    background-color: #2B2B2B;
    margin-left: auto;
    max-width: 200px;
    min-width: 100px;
    padding-right: 25px;
  }

  input.search-field {
    background: transparent;
    border: none;
    color: #F1E2CC;
    outline: none;
    font-family: var(--general-font);
  }

  .search-form button {
    background: none;
    border: none;
    color: var(--border-color);
    cursor: pointer;
    content: "0";
  }

  .menu-search-mobile {
    display: none !important;
  }

    /* Centrer la barre de recherche dans le header desktop, partout */
  header form.search-form {
    margin-left: auto;
    margin-right: auto;      /* centre horizontalement */
    place-self: unset;       /* annule tout place-self venant d'autres styles */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  
  @media screen and (min-width: 767.02px) and (max-width: 1247px) {

    .menu li a{
      font-size: 10px;
    }

    /* --- Search bar --- */
    form.search-form {
      display: flex;
      align-items: center;
      border: 1px solid #444;
      padding: 4px 10px;
      background-color: #2B2B2B;
      margin-left: auto;
      width: 200px;
      padding-right: 25px;
    }

    .menu-search-desktop {
      position: absolute;
      right: 3em;
      z-index: 1010;
    }

    /* --- Expanding search styles (collapsed by default, expanded when JS adds .expanded) --- */
    .menu-search-desktop .search-form {
      /* smoother, GPU-driven transitions */
      transition: width 420ms cubic-bezier(.16,.84,.24,1),
                  padding 340ms cubic-bezier(.16,.84,.24,1),
                  box-shadow 300ms cubic-bezier(.16,.84,.24,1),
                  background-color 260ms ease,
                  border-radius 260ms ease;
      width: 70vw; /* expanded target width */
      max-width: 680px;
      box-sizing: border-box;
      overflow: visible;
      border-radius: 8px;
      background-clip: padding-box;
      position: relative;
      /* reserve space on the right for the fixed icon so it doesn't shift */
      padding-right: 44px;
      will-change: width, box-shadow, transform, opacity;
      transform: translateZ(0); /* promote to its own layer */
    }

    /* collapsed: small rounded pill with only icon visible */
    .menu-search-desktop .search-form.collapsed {
      width: 40px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 20px;
      background: transparent;
      border: none;
    }

    /* animate the input using transform (scaleX) and opacity for smooth GPU-accelerated animation */
    .menu-search-desktop .search-form .search-field {
      display: inline-block;
      transform-origin: left center;
      transition: transform 360ms cubic-bezier(.22,.9,.2,1),
                  opacity 240ms cubic-bezier(.2,.8,.2,1),
                  padding 220ms ease;
      transform: scaleX(1);
      opacity: 1;
      width: calc(100% - 52px);
      padding-left: 8px;
      box-sizing: border-box;
      will-change: transform, opacity;
      backface-visibility: hidden;
    }

    /* closed input: scaleX close to 0 (avoid exact 0) and fade out */
    .menu-search-desktop .search-form.collapsed .search-field {
      opacity: 0;
      padding: 0;
      pointer-events: none;
    }

    .menu-search-desktop .search-form button {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border-radius: 6px;
      z-index: 3;
      /* keep the icon visually fixed — pin it to the right inside the form */
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
    }

    /* when expanded, add a gentle shadow and ensure input is interactive */
    .menu-search-desktop .search-form.expanded {
      width: 70vw;
      padding-left: 12px;
      /* maintain reserved space for the pinned icon while expanded */
      padding-right: 0px;
      border-radius: 9px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.32);
      background-color: rgba(30,30,30,0.98);
    }

    .menu-search-desktop .search-form.expanded .search-field {
      transform: scaleX(1);
      opacity: 1;
      pointer-events: auto;
    }

    /* Tablet-specific: make the top-level menu indicator (square) a bit smaller
       and adjust left/padding so it remains aligned visually on tablet widths */
    .menu > li > a::before {
      width: 4px;
      height: 4px;
    }

    .menu > li > a {
      padding-left: 24px;
    }

    .menu-page {
      padding-right: 4em;
    }
  }
}

@media screen and (min-width: 1247px) {

  .header-container {
    padding: 0.5em 4em;
  }

  .menu li .sub-menu {
    min-width: 155px;
    top: 125%;
  }

  .menu li .sub-menu li a {
    font-size: 10px;
    transition: background 0.2s ease, color 0.2s ease;
            /* occupe toute la largeur */
    
  }

  .menu li a {
    font-size: clamp(10px, 0.7vw, 15.5px);
    transition: color 0.2s ease, transform 0.2s ease-out;
    padding-bottom: 15px;
    padding-top: 15px;
    cursor: pointer;
  }
}


/* ------------------- Indicateur carré niveau supérieur (CSS uniquement) ------------------- */
/* Affiche un petit indicateur carré uniquement pour les liens du menu de premier niveau
  et pour les éléments courants/ancêtres. Cela évite des modifications JS/PHP
  et masque explicitement les marqueurs générés dans les sous-menus. */

.menu > li > a {
  position: relative;
  padding-left: 28px;
  box-sizing: border-box;
  display: inline-block;
}

.menu > li > a::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 0;
  border: 1px solid rgba(227, 204, 148, 0.237);
  background: transparent;
  transition: background-color 180ms, border-color 180ms, transform 120ms;
  pointer-events: none;
  z-index: 1;
}

/* Survol / focus / pression : ne colorie que le contour (éléments non-actuels).
  Cible explicitement l'élément <a> afin d'exclure les liens utilisant `aria-current="page"`. */
.menu > li:not(.current-menu-item):not(.current_page_item):hover > a:not([aria-current="page"])::before,
.menu > li:not(.current-menu-item):not(.current_page_item):focus-within > a:not([aria-current="page"])::before,
.menu > li:not(.current-menu-item):not(.current_page_item):active > a:not([aria-current="page"])::before {
  background: transparent;
  border-color: var(--font-color);
  transform: translateY(-50%) scale(1.02);
}

/* Remplissage de l'indicateur pour la page exactement courante (blanc)
  et pour les éléments ancêtres (couleur du thème) */
.menu > li.current-menu-item > a::before,
.menu > li.current_page_item > a::before,
.menu > li > a[aria-current="page"]::before {
  background: var(--font-color); /* remplissage pour la page courante */
  border: 1px solid rgba(255,255,255,0.14); /* conserve un contour visible */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset; /* léger contraste intérieur */
  transform: translateY(-50%) scale(1.08);
}

/* Éléments ancêtres/parents : remplir avec la couleur du thème lorsqu'un sous-menu est actif.
  Cela indique clairement la sous-section active. Si WordPress n'ajoute pas la classe
  ancestor, la règle :has() la prendra en charge dans les navigateurs compatibles. */
.menu > li.current-menu-ancestor > a::before,
.menu > li.current-menu-parent > a::before {
  background: var(--font-color);
  border: 1px solid rgba(255,255,255,0.14); /* garde le contour également pour les ancêtres */
  transform: translateY(-50%) scale(1.06);
}

/* Rattrapage via :has() — remplit le parent quand un lien du sous-menu descendant a aria-current */
.menu > li:has(.sub-menu a[aria-current="page"]) > a::before {
  background: var(--font-color);
  border: 1px solid rgba(255,255,255,0.14);
  transform: translateY(-50%) scale(1.06);
}

/* Au survol de l'élément courant, ajouter une ombre intérieure discrète pour maintenir le contraste */
.menu > li.current-menu-item:hover > a::before,
.menu > li.current_page_item:hover > a::before {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06) inset;
}

/* Masque les pseudo-éléments/contenus dans les sous-menus afin que seul le niveau supérieur affiche l'indicateur */
.menu li .sub-menu li::before,
.menu li .sub-menu li::after,
.menu li .sub-menu li a::before,
.menu li .sub-menu li a::after,
.menu li .sub-menu li::marker {
  display: none !important;
  content: none !important;
}

/* Mobile : appliquer la même règle pour le menu accordéon (niveau supérieur uniquement) */
@media screen and (max-width: 767px) {
  .menu > li > a::before {
    left: 5px;
    /* carré plus grand pour mobile */
    width: 10px;
    height: 10px;
  }
  .menu > li > a { padding-left: 44px; }
}