/* Header global */
.site-header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);

  /* + transition pour le switch overlay/solid */
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  border-bottom: 1px solid transparent; /* base neutre */
}

/* à€°tats du header selon la section (overlay sur le hero, solid ailleurs) */
.header--overlay{
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
  overflow: visible;
}

.header--overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255, 255, 255, 0.23);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index:-1;
  pointer-events:none;
}

/* Texte & icà´nes en blanc (couleur de base pour "difference") */
.header--overlay .site-nav a,
.header--overlay .nav-parent,
.header--overlay .site-burger{ color:#fff; }

/* Hover en overlay : pas de fond opaque */
@media (min-width:901px){
  .header--overlay .site-nav a:hover,
  .header--overlay .has-submenu:hover > .nav-parent,
  .header--overlay .has-submenu.is-desktop-open > .nav-parent{
    background: transparent;
    color: #fff; /* coins suivent currentColor => blancs */
  }


  /* Sous-menus overlay : transparents */
  .header--overlay .nav-submenu{
    background: rgba(255, 255, 255, 0.23);
    box-shadow: none;
    border-bottom-color: transparent;
    overflow: visible;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

.header--solid{
  background: var(--paper);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  border-bottom-color: rgba(242,233,216,.15);
}

/* Active en overlay : pas de fond opaque */
.header--overlay .site-nav a.active{
  background: transparent;
  color: #fff;
}

/* (utile si tu veux être explicite) */
.header--solid .site-nav a,
.header--solid .nav-parent,
.header--solid .site-burger{ color: var(--ink); }

.site-header__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;              /* évite toute “marge gauche fantà´me” */
  min-height: var(--header-h); /* cohérent avec le mobile */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
}

.site-logo {
  display: flex;
  align-items: center;
}
.site-logo__img {
  height: 50px; /* à ajuster selon ton logo */
  width: auto;
  transition: height .25s ease, opacity .25s ease;
}
.header--solid .site-logo__img{
  height: 42px;
}


/* Base nav */
.site-nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  font-family: sans-serif;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  list-style: none;
}

/* mêmes bases pour <a> et le bouton parent */
.site-nav a,
.nav-parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--ink);
  /*font-weight: 700;*/
  line-height: 1;
  transition: background .3s ease, color .3s ease;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;   /* réduit la différence de graisse perà§ue sur iOS */
  text-rendering: optimizeLegibility;
}


/* Coin haut droit */
.site-nav a::before,
.nav-parent::before{
  content:"";
  position:absolute; top:0; right:0;
  width:10px; height:10px;
  border-top:8px solid currentColor;
  border-right:8px solid currentColor;
  opacity:0;
  transition: width .3s, height .3s, border-color .3s, opacity .3s;
}

/* Coin bas gauche */
.site-nav a::after,
.nav-parent::after{
  content:"";
  position:absolute; bottom:0; left:0;
  width:10px; height:10px;
  border-bottom:8px solid currentColor;
  border-left:8px solid currentColor;
  opacity:0;
  transition: width .3s, height .3s, border-color .3s, opacity .3s;
}


.site-nav a:hover::before,
.site-nav a:hover::after {
  width: 20px; height: 20px; opacity: 1;
  border-color: currentColor; /* <= suit la couleur (overlay/solid) */
}

/* Lien actif */
.site-nav a.active {
  background: var(--paper);
  color: #ffffff;
}

.site-nav a.active::before,
.site-nav a.active::after {
  width: 20px;
  height: 20px;
  opacity: 1;
  border-color: currentColor;
}

/* Visually hidden (pour le texte du bouton) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Bouton burger (icône grille -> croix) */
.site-burger{
  display: none;                /* visible seulement en mobile (<=900px) */
  position: relative;
  width: 44px; height: 36px;
  border: 0; background: transparent; cursor: pointer;
  color: currentColor;          /* hérite: blanc en overlay, encre en solid */
}

.site-burger .icon{
  position: absolute; inset: 0;
  width: 28px; height: 28px; margin: auto;
  transition: transform .25s ease, opacity .25s ease;
  fill: currentColor;
}

/* État par défaut : on voit la grille, la croix est cachée */
.site-burger .icon--menu  { opacity: 1; transform: scale(1); }
.site-burger .icon--close { opacity: 0; transform: scale(.8) rotate(-90deg); }

/* État ouvert : la grille disparaît, la croix apparaît */
.site-burger.is-open .icon--menu  { opacity: 0; transform: scale(.8) rotate(90deg); }
.site-burger.is-open .icon--close { opacity: 1; transform: scale(1) rotate(0); }

/* Focus visible */
.site-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* --------- Responsive Mobile --------- */

@media (max-width: 900px){

  .site-nav{
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    z-index: 4000;

    /* plus de blur direct ici */
    background: rgba(12,12,12,.7);
    transform: scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: transform .45s ease, opacity .45s ease;
    overflow: hidden;
  }

  /* flou bckgrnd */
  .site-nav::before{
    content:"";
    position:absolute;
    inset:0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index:-1; /* derrière le contenu */
  }

  .site-nav.is-open{
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .has-submenu > .nav-submenu{
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin: 0;
    padding: 0.6rem 0 0;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: height .35s ease, opacity .25s ease, transform .35s ease;
  }

  .has-submenu.is-open > .nav-submenu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-submenu[hidden]{
    display: none;
  }

}


/* === Burger mobile (visible, animé) === */
@media (max-width: 900px){
  .site-burger{
    display:block;
    position:fixed;
    top: clamp(14px, 4vw, 24px);
    right: clamp(14px, 4vw, 28px);
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    cursor:pointer;
    color:#fff; /* blanc sur fond blur */
    z-index:4100;
  }

  .site-burger .icon{
    position:absolute;
    inset:0;
    width:26px;
    height:26px;
    margin:auto;
    fill:currentColor;
    transition:transform .25s ease, opacity .25s ease;
  }

  /* Par défaut : menu visible, croix cachée */
  .site-burger .icon--menu{ opacity:1; transform:scale(1); }
  .site-burger .icon--close{ opacity:0; transform:scale(.8) rotate(-90deg); }

  /* Quand menu ouvert */
  .site-burger.is-open .icon--menu{ opacity:0; transform:scale(.8) rotate(90deg); }
  .site-burger.is-open .icon--close{ opacity:1; transform:scale(1) rotate(0); }

  .site-burger:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
  }
}


/* Focus visible (utilise la couleur courante pour rester lisible sur fond noir/blanc) */
.site-nav a:focus-visible,
.site-burger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.nav-open {
  overflow: hidden;
}

/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Sous-liens stylises */
.nav-sub-link{
  display: block;
  /*font-style: italic;*/
  font-weight: 500;
  /*text-align: right;*/
}
/* === Sous-menu Réalisations === */

.nav-item { position: relative; }

/* normalisation du bouton (le style vient du bloc commun .site-nav a, .nav-parent) */
.nav-parent{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 901px){
  .site-nav a:hover,
  .nav-parent:hover,
  .has-submenu:hover > .nav-parent,
  .has-submenu.is-desktop-open > .nav-parent {
    background: var(--paper);
    color: #ffffff;
  }
  .site-nav a:hover::before, .site-nav a:hover::after,
  .nav-parent:hover::before, .nav-parent:hover::after,
  .has-submenu:hover > .nav-parent::before,
  .has-submenu:hover > .nav-parent::after,
  .has-submenu.is-desktop-open > .nav-parent::before,
  .has-submenu.is-desktop-open > .nav-parent::after {
    width: 20px; height: 20px; opacity: 1; border-color: #ffffff;
  }

  /* dropdown sans gap */
  .nav-item { position: relative; }
  .nav-submenu { display: none; }
  .has-submenu:hover > .nav-submenu,
  .has-submenu:focus-within > .nav-submenu,
  .has-submenu.is-desktop-open > .nav-submenu {
    display: flex;
    position: absolute;
    left: 0; top: 100%;
    flex-direction: column;
    min-width: 240px;
    background: var(--paper);
    border: 1px solid rgba(242,233,216,.2);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    margin: 0;
    padding: 6px 0;
    list-style: none;
    z-index: 1003;
  }

  .header--overlay .has-submenu:hover > .nav-submenu,
  .header--overlay .has-submenu:focus-within > .nav-submenu,
  .header--overlay .has-submenu.is-desktop-open > .nav-submenu{
    background: rgba(255, 255, 255, 0.23);
    box-shadow: none;
    border-bottom-color: transparent;
    overflow: visible;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}