/* ========================================
   RESPONSIVE — Mobile-first prioritaire
   Les bases (modules précédents) sont desktop-large ;
   ici on adapte aux écrans plus petits, de 1180px → 320px.
   Objectif : aucun débordement horizontal, cibles tactiles ≥44px.
   ======================================== */

/* ---------- Grandes tablettes / petits laptops ---------- */
@media (max-width: 1180px) {
    .pricing { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; gap: 24px; }
    .price-featured { transform: none; }

    /* Menu burger plein écran dès ce palier : la nav compte jusqu'à 9 items
       et déborderait en ligne en-dessous de ~1180px (« La Salle » se cassait
       sur 2 lignes). Au-delà, la nav horizontale a la place de tout afficher. */
    .nav {
        position: fixed;
        top: 0; right: 0;
        width: 82%;
        max-width: 360px;
        height: 100vh;
        background: var(--black);
        padding: 100px 30px 30px;
        /* translateX hors écran : n'élargit pas la page (anti-débordement) */
        transform: translateX(100%);
        transition: transform var(--speed) var(--ease);
        border-left: 1px solid var(--border);
        overflow-y: auto;
    }
    .nav.active { transform: translateX(0); }
    .nav-list { flex-direction: column; align-items: stretch; gap: 8px; }
    .nav-link {
        padding: 16px 20px;
        font-size: 16px;
        text-align: left;
        border-bottom: 1px solid var(--border);
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .nav-link::after { display: none; }
    .nav-cta { text-align: center; justify-content: center; margin-top: 12px; }
    .burger { display: flex; }
    .logo-text { display: none; }
}

/* ---------- Tablettes ---------- */
@media (max-width: 1024px) {
    :root { --section-pad: 90px; }
    .grid-2 { grid-template-columns: 1fr; gap: 50px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .stat:nth-child(2) { border-right: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 240px); }
    .gallery-large { grid-column: span 2; grid-row: span 1; }
    .gallery-wide { grid-column: span 2; }
    .presentation-img img { height: 400px; }
}

/* ---------- Mobile (tablette portrait → smartphone) ---------- */
@media (max-width: 768px) {
    :root { --section-pad: 70px; }
    .container { padding: 0 20px; }

    /* (Le menu burger plein écran est défini dès ≤1024px — voir bloc tablette.) */

    /* Hero & boutons pleine largeur */
    .hero-logo { width: 130px; }
    .hero-actions { flex-direction: column; gap: 12px; width: 100%; max-width: 340px; margin: 0 auto; }
    .hero-actions .btn { width: 100%; }
    .btn { padding: 14px 24px; font-size: 13px; }
    /* Sur mobile, les boutons empilés occupent toute la hauteur utile :
       on masque l'indicateur « SCROLL » pour éviter tout chevauchement. */
    .hero-scroll { display: none; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .cards-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .pricing { grid-template-columns: 1fr; max-width: 420px; }
    .gallery { grid-template-columns: 1fr; grid-template-rows: repeat(7, 200px); }
    .gallery-large { grid-column: span 1; }
    .gallery-wide { grid-column: span 1; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .shop-grid { grid-template-columns: 1fr; }
    .section-head { margin-bottom: 50px; }

    /* Horaires : empilement vertical lisible */
    .hours-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 22px; }

    /* Désactivation de la parallaxe coûteuse sur petit écran (géré aussi en JS) */
    .parallax-img { transform: none !important; }

    /* Affichage du bandeau d'appel sticky mobile */
    .mobile-cta { display: flex; }
    /* Marge basse pour ne pas masquer le footer derrière le bandeau */
    body { padding-bottom: 0; }
    .footer-bottom { padding-bottom: 88px; }
}

/* ---------- Petits smartphones ---------- */
@media (max-width: 480px) {
    .hero-title { letter-spacing: 2px; }
    .price-card { padding: 36px 24px; }
    .stat-num { font-size: 48px; }
    .contact-actions .btn { width: 100%; }
    .mobile-cta a { font-size: 12px; letter-spacing: 0.5px; }
}

/* ---------- Très petits écrans (320px) : garde-fous anti-débordement ---------- */
@media (max-width: 360px) {
    .container { padding: 0 16px; }
    .marquee-item { font-size: 30px; padding: 0 18px; }
    .hours-time { font-size: 22px; }
}