/* =====================================================================
   50-navigation/n-center-logo.css  (WS) — VERSION STABLE REPRISE
   =====================================================================

   Base :
   - on repart de ton ancien fichier
   - on corrige seulement :
     1) le burger mobile
     2) le split desktop autour du logo
     3) le débordement
     4) la cohabitation avec le vrai HTML Gutenberg

   PRÉREQUIS GUTENBERG
   ---------------------------------------------------------------------
   Sur le bloc Navigation :
   ws-nav-split

   IMPORTANT
   ---------------------------------------------------------------------
   Ce fichier suppose que le header est géré par :
   40-header/h-center-logo.css

   ===================================================================== */


/* =====================================================================
   1) TOKENS
   ===================================================================== */

:root{
  --ws-nav-breakpoint: 900px;

  /* Mobile */
  --ws-nav-burger-right: 8px;
  --ws-nav-burger-y: -12px;
  --ws-nav-burger-color: #043a57;
  --ws-nav-burger-size: 34px;

  --ws-nav-mobile-bg: rgba(255,255,255,0.97);
  --ws-nav-mobile-link-color: #043a57;
  --ws-nav-mobile-link-hover: #F26A21;
  --ws-nav-mobile-link-size: 1.2rem;
  --ws-nav-mobile-link-gap: 14px;

  --ws-nav-mobile-close-color: #043a57;
  --ws-nav-mobile-close-size: 28px;
  --ws-nav-mobile-close-top: 18px;
  --ws-nav-mobile-close-right: 18px;

  --ws-nav-mobile-pad-top: 84px;
  --ws-nav-mobile-pad-x: 24px;
  --ws-nav-mobile-pad-bottom: 32px;

  /* Desktop */
  --ws-nav-desktop-left: 16px;
  --ws-nav-desktop-right: 16px;
  --ws-nav-desktop-top: 0px;
  --ws-nav-desktop-gap: 4svw;

  --ws-nav-link-color: #043a57;
  --ws-nav-link-hover: #F26A21;
  --ws-nav-link-active: #F26A21;
}


/* =====================================================================
   2) RESET
   ===================================================================== */

.ws-header nav.ws-nav-split,
.ws-header nav.ws-nav-split ul,
.ws-header nav.ws-nav-split li{
  margin: 0 !important;
}

.ws-header nav.ws-nav-split ul{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ws-header nav.ws-nav-split .wp-block-navigation__container,
.ws-header nav.ws-nav-split .wp-block-page-list{
  list-style: none !important;
  min-width: 0;
}


/* =====================================================================
   3) MOBILE
   ===================================================================== */

@media (max-width: 900px){

  .ws-header nav.ws-nav-split{
    position: static !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
    position: absolute !important;
    right: var(--ws-nav-burger-right);
    top: calc(50% + var(--ws-nav-burger-y));
    transform: translateY(-50%);
    width: var(--ws-nav-burger-size);
    height: var(--ws-nav-burger-size);
    align-items: center;
    justify-content: center;
    color: var(--ws-nav-burger-color) !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-open svg{
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container:not(.is-menu-open){
    display: none !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container.is-menu-open{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--ws-nav-mobile-bg) !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-close{
    position: relative !important;
    width: 100%;
    min-height: 100dvh;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-dialog{
    position: relative !important;
    width: 100%;
    min-height: 100dvh;
    box-sizing: border-box;
    padding:
      var(--ws-nav-mobile-pad-top)
      var(--ws-nav-mobile-pad-x)
      var(--ws-nav-mobile-pad-bottom)
      var(--ws-nav-mobile-pad-x);
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content{
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Vrai menu mobile : supporte wp-block-page-list ET container */
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-page-list{
    display: flex !important;
    flex-direction: column;
    gap: var(--ws-nav-mobile-link-gap);
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline-start: 0 !important;
    list-style: none !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content li{
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content a,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-pages-list__item__link,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
    display: block !important;
    width: 100%;
    padding: 10px 0 !important;
    color: var(--ws-nav-mobile-link-color) !important;
    text-decoration: none !important;
    font-size: var(--ws-nav-mobile-link-size) !important;
    line-height: 1.4 !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content a:hover,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-pages-list__item__link:hover,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover{
    color: var(--ws-nav-mobile-link-hover) !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
    display: inline-flex !important;
    position: absolute !important;
    top: var(--ws-nav-mobile-close-top);
    right: var(--ws-nav-mobile-close-right);
    width: var(--ws-nav-mobile-close-size);
    height: var(--ws-nav-mobile-close-size);
    align-items: center;
    justify-content: center;
    color: var(--ws-nav-mobile-close-color) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    z-index: 100000 !important;
    cursor: pointer;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
}


/* =====================================================================
   4) DESKTOP — split compatible vrai menu Gutenberg
   ===================================================================== */

@media (min-width: 901px){

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-open{
    display: none !important;
  }

  .ws-header nav.ws-nav-split{
    position: absolute;
    left: var(--ws-nav-desktop-left);
    right: var(--ws-nav-desktop-right);
    top: calc(50% + var(--ws-nav-desktop-top));
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    z-index: 3;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-close,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-dialog,
  .ws-header nav.ws-nav-split .wp-block-navigation__responsive-container-content{
    display: block !important;
    width: 100% !important;
  }

  .ws-header nav.ws-nav-split ul.wp-block-navigation__container{
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: var(--ws-nav-desktop-gap);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Avec 4 liens : 2 à gauche, 2 à droite */
  .ws-header nav.ws-nav-split ul.wp-block-navigation__container > li:nth-child(3){
    margin-left: auto !important;
  }

  .ws-header nav.ws-nav-split ul.wp-block-navigation__container > li{
    flex: 0 0 auto;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation-item__content{
    color: var(--ws-nav-link-color) !important;
    text-decoration: none !important;
    white-space: nowrap;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation-item__content:hover{
    color: var(--ws-nav-link-hover) !important;
  }

  .ws-header nav.ws-nav-split .wp-block-navigation-item__content[aria-current="page"]{
    color: var(--ws-nav-link-active) !important;
  }
}


/* =====================================================================
   5) MAINTENANCE RAPIDE
   =====================================================================

   Écarter davantage le menu du logo :
   :root{
     --ws-nav-center-gap-desktop: 320px;
   }

   Le rapprocher :
   :root{
     --ws-nav-center-gap-desktop: 180px;
   }

   Descendre le menu desktop :
   :root{
     --ws-nav-desktop-top: 8px;
   }

   Descendre le burger mobile :
   :root{
     --ws-nav-burger-y: -6px;
   }

   Si tu veux 3 liens à gauche :
   remplacer nth-child(3) par nth-child(4)

   ===================================================================== */