/* ============================================================
   LARGEUR MINIMALE GLOBALE
   320px = le plus petit écran mobile supporté (iPhone SE)
   ============================================================ */
html {
  min-width: 320px;
}
/* ============================================================
   nav.css — Navigation CTT Brunoy v2
   ============================================================ */

/* ============================================================
   DESKTOP
   ============================================================ */
.nav-principale {
  width      : 100%;
  display    : flex;
  align-items: stretch;
  background : linear-gradient(to right, var(--bleu-nav-clair), var(--bleu-nav-fonce));
  box-shadow : var(--ombre-nav);
  position   : relative;
  z-index    : 50;
}

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

.menu > li {
  position   : relative;
  display    : flex;
  align-items: stretch;
}

.menu > li > a,
.menu > li > button.menu-label {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  white-space    : nowrap;
  padding        : 0 32px;
  min-height     : 68px;
  font-family    : var(--font-nav);
  font-weight    : 700;
  font-size      : clamp(13px, 1.3vw, 18px);
  color          : var(--blanc);
  text-decoration: none;
  border-bottom  : 3px solid transparent;
  transition     : background-color var(--transition), border-bottom-color var(--transition);
  background     : none;
  border-top     : none;
  border-left    : none;
  border-right   : none;
  cursor         : pointer;
  width          : 100%;
}

.menu > li > a:hover,
.menu > li > button.menu-label:hover {
  background-color   : rgba(255,255,255,0.10);
  border-bottom-color: var(--blanc);
}

.chevron {
  font-size: 0.65em;
  transition: transform var(--transition);
}

.has-submenu:hover > button .chevron { transform: rotate(90deg); }

/* Sous-menus desktop */
.sous-menu {
  position     : absolute;
  top          : 100%;
  left         : 0;
  min-width    : 100%;
  width        : max-content;
  background   : rgba(87,132,174,0.97);
  list-style   : none;
  padding      : 6px 0;
  margin       : 0;
  z-index      : 100;
  display      : none;
  border-radius: 0 0 var(--rayon-sm) var(--rayon-sm);
  box-shadow   : 0 8px 20px rgba(0,0,0,0.20);
}

.has-submenu:hover > .sous-menu { display: block; }

.sous-menu li a {
  display        : block;
  padding        : 12px 28px;
  font-family    : var(--font-nav);
  font-weight    : 600;
  font-size      : clamp(13px, 1.2vw, 17px);
  color          : var(--blanc);
  white-space    : nowrap;
  text-decoration: none;
  text-align     : center;
}

.sous-menu li a:hover { background: rgba(255,255,255,0.15); }

/* Éléments mobiles cachés sur desktop */
.burger      { display: none; }
.nav-overlay { display: none; }
.menu-header { display: none; }
.menu-close  { display: none; }

/* ============================================================
   MOBILE ≤ 800px
   ============================================================ */
@media (max-width: 800px) {

  /* Barre invisible — seul le burger est visible */
  .nav-principale {
    background : transparent;
    box-shadow : none;
    min-height : 0;
    padding    : 0;
  }

  .burger {
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    gap            : 6px;
    width          : 52px;
    height         : 52px;
    background     : linear-gradient(135deg, var(--bleu-nav-clair), var(--bleu-nav-fonce));
    border-radius  : 10px;
    border         : none;
    cursor         : pointer;
    position       : fixed;
    top            : 10px;
    left           : 10px;
    z-index        : 400;
    box-shadow     : 0 2px 10px rgba(0,0,0,0.25);
  }

  .burger-bar {
    width           : 26px;
    height          : 3px;
    background-color: var(--blanc);
    border-radius   : 2px;
    display         : block;
    transition      : transform 0.3s ease, opacity 0.3s ease;
  }

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

  /* Overlay */
  .nav-overlay {
    display   : none;
    position  : fixed;
    inset     : 0;
    background: rgba(0,0,0,0.45);
    z-index   : 200;
  }
  .nav-overlay.visible { display: block; }

  /* Menu déroulant */
  .menu {
    display       : none;
    position      : fixed;
    top           : 0;
    left          : 0;
    width         : 100%;
    flex-direction: column;
    background    : #3d6490;
    z-index       : 300;
    list-style    : none;
    margin        : 0;
    padding-top   : clamp(62px, 10vh, 80px);
    box-shadow    : 0 6px 20px rgba(0,0,0,0.30);
    max-height    : 100vh;
    overflow-y    : auto;
  }

  .menu.open { display: flex; }

  .menu > li {
    width        : 100%;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    display      : block;
  }

  .menu > li > a,
  .menu > li > button.menu-label {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : clamp(11px, 2.5vh, 18px) 20px;
    font-size      : clamp(0.9rem, 2.5vw, 1.05rem);
    min-height     : 0;
    border         : none;
    width          : 100%;
    color          : var(--blanc);
    font-family    : var(--font-nav);
    font-weight    : 700;
    cursor         : pointer;
    background     : none;
    text-decoration: none;
  }

  .menu > li > a:hover,
  .menu > li > button.menu-label:hover {
    background-color   : transparent;
    border-bottom-color: transparent;
  }

  .menu > li > a[aria-current="page"] {
    border-left  : 3px solid var(--blanc);
    padding-left : 17px;
    background   : rgba(255,255,255,0.08);
    border-bottom: none;
  }

  /* Sous-menus mobile : accordéon */
  .has-submenu:hover > .sous-menu { display: none; }

  .sous-menu {
    position     : static;
    display      : none;
    background   : rgba(0,0,0,0.15);
    box-shadow   : none;
    border-radius: 0;
    padding      : 0;
    min-width    : 0;
    width        : 100%;
  }

  .has-submenu.active > .sous-menu        { display: block; }
  .has-submenu.active > button .chevron   { transform: rotate(90deg); }

  .sous-menu li { border-bottom: 1px solid rgba(255,255,255,0.07); }

  .sous-menu li a {
    padding        : clamp(10px, 2vh, 15px) 20px clamp(10px, 2vh, 15px) 36px;
    font-size      : clamp(0.85rem, 2.2vw, 0.98rem);
    white-space    : normal;
    color          : var(--blanc);
    font-family    : var(--font-nav);
    font-weight    : 600;
    text-align     : left;
  }

  .sous-menu li a:hover { background: transparent; }
}

/* Cacher scroll-top quand menu mobile ouvert */
@media (max-width: 800px) {
  .menu.open ~ * #scrollTop,
  body.menu-ouvert #scrollTop {
    display: none !important;
  }
}