/* ==========================================================================
   MENU CSS-ONLY — topnav dropdown sans JavaScript
   ========================================================================== */


/* --------------------------------------------------------------------------
   CHECKBOX CACHÉE (commune desktop + mobile)
   -------------------------------------------------------------------------- */
.topnav__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}


/* ==========================================================================
   DESKTOP >= 768px
   Dropdown au :hover / :focus-within sur le wrapper .topnav__item
   ========================================================================== */
@media (min-width: 768px) {

  /* Cache le bouton flèche, inutile en desktop */
  .topnav__toggle-label {
    display: none;
  }

  /* Wrapper : même comportement qu'un <a> dans la flex row */
  .topnav__item {
    
    flex: 1 1 0%;
    border-right: 1px solid #fff;
  }
  .topnav__item:last-child {
    border-right: none;
  }

  /* Le lien occupe tout le wrapper */
  .topnav__item > .topnav__menu__item {
    display: block;
    width: 100%;
    border-right: none !important;
  }

  /* Dropdown : caché par défaut, absolu sous le wrapper */
  .topnav__item .topnav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    z-index: 9;
    background-color: #fff;
    border-bottom: 5px solid #FED916;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
  }

  /* Ouverture au hover et au focus clavier */
  .topnav__item:hover .topnav__dropdown,
  .topnav__item:focus-within .topnav__dropdown {
    display: block;
  }

  /* Style du lien au hover */
  .topnav__item:hover > .topnav__menu__item,
  .topnav__item:focus-within > .topnav__menu__item {
    background-color: #206AB9;
    color: #FED916;
  }
  .topnav__item:hover > .topnav__menu__item:after,
  .topnav__item:focus-within > .topnav__menu__item:after {
    display: inline-block;
    border-top-color: #206AB9;
  }

  /* Compatibilité avec l'ancien système .active */
  .topnav__dropdown.active {
    display: block;
  }
}


/* ==========================================================================
   MOBILE < 768px
   ========================================================================== */
@media (max-width: 767.98px) {

  /* La nav devient une colonne */
  .topnav .topnav__menu {
    flex-direction: column;
    width: 100%;
  }

  /* Chaque item = un bloc qui contient une ligne + le dropdown dessous */
  .topnav__item {
    display: block;
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Ligne du haut = lien + flèche en flex */
  .topnav__item > .topnav__menu__item,
  .topnav__item > .topnav__toggle-label {
    display: flex;
    margin-bottom: 0;
  }

  /* Conteneur flex pour aligner lien et flèche */
  .topnav__item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }

  /* Le lien prend tout l'espace horizontal sauf la flèche */
  .topnav__item > .topnav__menu__item {
    flex: 1 1 auto;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* Flèche : même hauteur que le lien (grâce à align-items:stretch du parent) */
  .topnav__toggle-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #206AB9;
    color: #fff;
    width: 3rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
  }
  .topnav__toggle-label .fas {
    font-size: .75rem;
    transition: transform 0.25s ease;
    pointer-events: none;
  }
  .topnav__toggle-label:hover {
    background-color: #1a5798;
  }

  /* Rotation chevron quand ouvert */
  .topnav__toggle-input:checked ~ .topnav__toggle-label .fas {
    transform: rotate(180deg);
  }
  .topnav__toggle-input:checked ~ .topnav__toggle-label {
    background-color: #FED916;
    color: #206AB9;
  }

  /* Dropdown : caché par défaut.
     width:100% + ordre naturel = il s'affiche sous la ligne lien+flèche */
  .topnav__item .topnav__dropdown {
    display: none;
    width: 100%;       /* force le passage à la ligne suivante dans le flex wrap */
    background-color: #f0f8ff;
    border-top: 2px solid #FED916;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Ouverture via checkbox */
  .topnav__toggle-input:checked ~ .topnav__dropdown {
    display: block;
  }

  /* Quand un dropdown est ouvert, agrandir la topnav (navigateurs modernes) */
  .open-left-menu .topnav:has(.topnav__toggle-input:checked) {
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Header du dropdown simplifié en mobile */
  .topnav__item .topnav__dropdown .header__left,
  .topnav__item .topnav__dropdown .header__center,
  .topnav__item .topnav__dropdown .header__right {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Liste de villes en 2 colonnes */
  .topnav__item .topnav__dropdown .topnav__dropdown__menu {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    padding: .5rem 1rem 1rem;
  }
  .container-fluid {
    display : none;
  }
  .topnav .topnav__dropdown {
    
  }
}


/* --------------------------------------------------------------------------
   ACCESSIBILITÉ
   -------------------------------------------------------------------------- */
.topnav__menu__item:focus-visible {
  outline: 3px solid #FED916;
  outline-offset: -3px;
}
.topnav__toggle-label:focus-visible {
  outline: 3px solid #FED916;
  outline-offset: -2px;
}