/* MOBILE */
/* ===========================
   MOBILE
=========================== */

@media (max-width:900px){

    .menu-toggle{
        display:block;
    }
    
    .nav-links{

        position:fixed;
        top:120px;      /* à adapter selon la hauteur de ton header */
        left:0;
        width:100vw;

        background:#0B1F3A;

        display:flex;
        flex-direction:column;

        align-items:center;

        gap:0;

        max-height:0;
        overflow:hidden;

        transition:max-height .4s ease;

        box-shadow:0 10px 20px rgba(0,0,0,.15);

    }
    
     .nav-links a{
        display:block;
        width:100%;
        padding:18px;
        text-align:center;

        border-top:1px solid rgba(255,255,255,.08);

    }

    .nav-links.show{

        max-height:500px;

    }
    
}

/*--------------Overlay---*/
.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.menu-overlay.show{

    opacity:1;

    visibility:visible;

}

@media(max-width:768px){

.hero h1{
    font-size:38px;
}

.stats-grid,
.news-grid,
.about-grid,
.grid
.under-grid,
.contact-grid{
    grid-template-columns:1fr;
}

/*.nav-links{
    display:none;
}*/

}

@media (max-width: 992px) {
 .menu-toggle {
  display: flex; 
  } 
  .nav-links { 
  position: absolute;
   top: 90px;
    left: 0;
     width: 100%;
      background: #fff;
       flex-direction: column;
        align-items: center;
         gap: 0;
          max-height: 0;
           overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.08);
             transition: max-height 0.4s ease;
              } 
   .nav-links.active { 
                max-height: 500px; 
                } 
   .nav-links a {
     display: block;
      padding: 18px;
       width: 100%;
        } 
    .logo-subtitle { 
    display: none;
     } 
 }