/* =====================================================
   STYLE MOBILE
   (media queries et règles spécifiques au mobile)
   ===================================================== */

@media (max-width: 900px) {
    .titre-page h1 { font-size: 2.4rem; }
    .hero { padding: 56px 12px; }
    .conteneur { padding: 18px; }
}

@media (max-width: 700px) {

    /* IMPORTANT : Désactiver le hover CSS en mobile */
    .has-sub:hover > .submenu {
        display: none;
    }

    /* CORRECTION : Header plus compact en mobile */
    .main-header {
        height: 56px;
    }
    
    .main-header .nav-inner {
        height: 56px;
    }

    /* Afficher le burger */
    .menu-toggle { display: flex; }

    /* Menu : passer en version mobile (slide-in) */
    .menu-root {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 72%;
        max-width: 320px;
        padding-top: 64px;
        background: rgba(6,8,10,0.96);
        flex-direction: column;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.35s ease;
        z-index: 2600;
        overflow-y: auto;
    }

    /* Quand le JS ajoute .open */
    .menu-root.open { transform: translateX(0); }

    /* Menu items (mobile) - CORRECTION ICI */
    .menu-root > li {
        width: 100%;
    }
    
    .menu-root > li > a {
        padding: 16px 22px;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        font-size: 1.05rem;
        color: var(--gold);
        display: block;
        width: 100%;
        text-align: left;
    }

    /* Sous-menus : statiques, s'ouvrent via .has-sub.open */
    .submenu {
        position: static;
        display: none;
        background: transparent;
        border: none;
        padding-left: 12px;
        width: 100%;
    }
    .has-sub.open > .submenu { display: block; }

    .submenu li { width: 100%; }
    .submenu li a { 
        padding: 12px 34px; 
        color: var(--gold-light);
        display: block;
        width: 100%;
    }

    /* header / logo adjustments */
    .logo-site { 
        left: 12px; 
        font-size: 1rem;
        gap: 6px;
    }
    
    .logo-site img {
        max-height: 32px;
    }
    
    /* Bouton prévente CENTRÉ en mobile - CORRECTION */
    .page-header .btn-prevente { 
        left: 50%;
        transform: translateX(-50%);
        top: 64px;
        font-size: 0.9rem;
        padding: 8px 16px;
    }
    
    .page-header { 
        margin-top: 70px; 
        padding-top: 48px;
    }

    /* conteneur largeur + paddings */
    .conteneur { margin: 18px auto; padding: 14px; }

    /* footer logos smaller */
    .footer-logos img { width: 86px; }
    .menu-root {
    padding-bottom: 32px; /* espace sous le dernier item */
  }

  .menu-root .cta-prevente {
    text-align: center;
    margin: 16px 0;
    width: 50%;
  }

  .menu-root .cta-prevente a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(212,175,55,0.85);
    border-radius: 6px;
    text-align: center;
  }

  /*Bouton audio*/
  .menu-root .cta-prevente {
        text-align: center;
        margin: 16px 0;
        width: 50%;
    }

    .menu-root .cta-prevente a {
        display: inline-block;
        padding: 8px 16px;
        border: 1px solid rgba(212,175,55,0.85);
        border-radius: 6px;
        text-align: center;
    }

    /* Ajoute ceci pour le bouton audio */
    .menu-root .cta-audio {
        text-align: center;
        margin: 16px 0;
        width: 50%;
    }

    .menu-root .cta-audio button {
        display: inline-block;
    }
}

/* petit écran très petit */
@media (max-width: 480px) {
    .titre-page h1 { font-size: 1.9rem; }
    .titre-page h2 { font-size: 1.4rem; }
    .hero .feature-box { padding: 22px; }
    
    /* Bouton prévente encore plus petit sur très petit écran */
    .page-header .btn-prevente {
        font-size: 0.85rem;
        padding: 6px 10px;
    }
}