/* =========================================================
   RESPONSIVE RENFORCÉ — Chippendales Marseille
   Breakpoints : Desktop > 1024 · Tablette 768-1024 · Mobile 480-768 · Small <480
   ========================================================= */

/* =========================================================
   FIX UNIVERSEL — évite les débordements horizontaux
   ========================================================= */
* { box-sizing: border-box; max-width: 100%; }
html, body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; display: block; overflow-x: auto; }

/* =========================================================
   TABLETTE (≤ 1024 px)
   ========================================================= */
@media (max-width: 1024px) {

    .container { padding-left: 20px !important; padding-right: 20px !important; }

    /* Typo ajustée */
    h1 { font-size: clamp(2rem, 5vw, 3rem) !important; }
    h2, .section-title { font-size: clamp(1.6rem, 4vw, 2.3rem) !important; }
    h3 { font-size: 1.25rem !important; }

    /* Grid auto-responsive */
    .grid-4, .grid-3, .grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 20px !important;
    }

    /* Stats hero */
    .hero-stats-fest { gap: 20px !important; }
    .hero-stats-fest .stat-fest { padding: 14px 20px !important; }
    .hero-stats-fest .num { font-size: 2rem !important; }

    /* Partner cards */
    .partner-card { padding: 28px !important; }

    /* Nav liens plus compacts */
    .nav-links li a { padding: 8px 12px !important; font-size: 0.95rem !important; }
}

/* =========================================================
   MOBILE (≤ 768 px) — la majorité du trafic
   ========================================================= */
@media (max-width: 768px) {

    /* Empêche le contenu de déborder */
    section, .section, .container { padding-left: 16px !important; padding-right: 16px !important; }
    .section { padding-top: 40px !important; padding-bottom: 40px !important; }

    /* Typo mobile confortable */
    body { font-size: 15px !important; line-height: 1.6 !important; }
    h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; margin-bottom: 14px !important; }
    h2, .section-title { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
    h3 { font-size: 1.15rem !important; }
    p { font-size: 0.95rem !important; }

    /* ======= NAVIGATION MOBILE (menu hamburger) ======= */
    .nav-container { padding: 12px 16px !important; position: relative; }
    .logo-text { font-size: 1rem !important; }
    .logo-icon { font-size: 1.3rem !important; }

    .nav-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 12px;
        z-index: 101;
        min-width: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212,175,55,0.3);
        user-select: none;
        -webkit-user-select: none;
    }
    .nav-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        background: #d4af37;
        border-radius: 2px;
        transition: all 0.3s ease;
        pointer-events: none !important; /* Le clic passe au bouton parent */
    }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

    .nav-links {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        background: rgba(0,0,0,0.97) !important;
        padding: 20px !important;
        gap: 12px !important;
        border-top: 2px solid #d4af37;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease, padding 0.4s ease !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .nav-links.active {
        max-height: 100vh !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .nav-links li { width: 100%; }
    .nav-links li a { display: block; padding: 14px 16px !important; text-align: center; border-bottom: 1px solid rgba(212,175,55,0.15); font-size: 1rem !important; }
    .nav-links .btn-nav { background: linear-gradient(135deg, #d4af37, #b8860b) !important; color: #000 !important; border-radius: 30px !important; margin-top: 10px; }

    /* ======= HERO PRINCIPAL ======= */
    .hero, .hero-marseille {
        min-height: 80vh !important;
        padding: 50px 16px !important;
        background-attachment: scroll !important;
    }
    .hero-content, .hero-content-fest { padding: 20px !important; }
    .hero-title-fest { font-size: clamp(2rem, 10vw, 3rem) !important; line-height: 1.1 !important; }
    .hero-title-fest .script { font-size: 0.55em !important; margin-top: 6px !important; }
    .hero-sub-fest { font-size: 0.95rem !important; margin-bottom: 24px !important; }
    .hero-badge { font-size: 0.7rem !important; padding: 8px 16px !important; letter-spacing: 1px !important; }

    /* Stats hero en grille mobile */
    .hero-stats-fest, .hero-stats { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 24px !important; }
    .hero-stats-fest .stat-fest, .hero-stats .stat { padding: 10px !important; }
    .hero-stats-fest .num, .hero-stats .num { font-size: 1.5rem !important; }
    .hero-stats-fest .lbl, .hero-stats .lbl { font-size: 0.7rem !important; }

    /* Boutons hero empilés */
    .hero-buttons, .cta-buttons { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100%; }
    .hero-buttons .btn, .cta-buttons .btn { width: 100% !important; padding: 14px 20px !important; font-size: 0.95rem !important; text-align: center; justify-content: center; }

    /* ======= GRILLES → colonne unique ======= */
    .grid-4, .grid-3, .grid-2, .arrond-grid, .err-suggestions, .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ======= CARDS ======= */
    .card, .card-fest, .presta-card, .presta-card-fest, .partner-card, .arrond-card, .err-card {
        padding: 20px !important;
    }
    .partner-card h2 { font-size: 1.3rem !important; flex-wrap: wrap !important; }
    .partner-card .btn-visit { width: 100% !important; text-align: center; box-sizing: border-box; }

    /* ======= FORMULAIRES ======= */
    .form-row { grid-template-columns: 1fr !important; gap: 16px !important; }
    .form-group input, .form-group select, .form-group textarea {
        font-size: 16px !important; /* évite zoom iOS */
        padding: 12px !important;
    }
    .form-group label { font-size: 0.9rem !important; }
    .payment-options { grid-template-columns: 1fr !important; gap: 12px !important; }
    .payment-option { padding: 16px !important; }

    /* Récap paiement */
    .amount-display { padding: 20px !important; }
    .amount-display .amount { font-size: 1.6rem !important; }
    #acompteAmount { font-size: 2rem !important; }

    /* ======= PROMO BAR ======= */
    .promo-bar p { font-size: 0.8rem !important; padding: 8px 30px 8px 10px !important; line-height: 1.4; }
    .promo-close { right: 8px !important; top: 50% !important; transform: translateY(-50%); }

    /* ======= FOOTER ======= */
    .footer-grid { text-align: center; }
    .footer-col { padding: 10px 0; }
    .social-links { justify-content: center; }
    .contact-list { display: inline-block; text-align: left; }

    /* ======= WHATSAPP FLOAT ======= */
    .whatsapp-float { bottom: 16px !important; right: 16px !important; }
    .whatsapp-label { display: none !important; }
    .whatsapp-float i { font-size: 1.5rem !important; }
    .whatsapp-float { width: 56px !important; height: 56px !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; }

    /* ======= BREADCRUMB ======= */
    .breadcrumb { font-size: 0.8rem !important; flex-wrap: wrap; }

    /* ======= TABLEAUX ======= */
    table { font-size: 0.85rem !important; }
    th, td { padding: 8px !important; }

    /* ======= BANDEAU VERT FRAIS OFFERTS ======= */
    .hero .container > div[style*="gift"] {
        margin-top: 16px !important;
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        flex-wrap: wrap;
    }

    /* Admin spécifique */
    .tabs { overflow-x: auto; flex-wrap: nowrap; }
    .tab-btn { padding: 10px 14px !important; font-size: 0.85rem !important; white-space: nowrap; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Modal admin responsive */
    .modal-content { width: 95% !important; padding: 20px !important; max-height: 85vh; overflow-y: auto; }

    /* Pages EVJF packages / grilles prix */
    div[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }

    /* Sections info fermées en responsive */
    .zone-box, .err-contact, .err-contact a { font-size: 0.9rem !important; }
    .err-contact a { display: block; margin: 8px 0 !important; width: 100%; box-sizing: border-box; text-align: center; }
}

/* =========================================================
   MOBILE PETIT (≤ 480 px) — iPhone SE, anciens smartphones
   ========================================================= */
@media (max-width: 480px) {

    body { font-size: 14px !important; }

    h1 { font-size: 1.6rem !important; }
    h2, .section-title { font-size: 1.3rem !important; }
    h3 { font-size: 1.05rem !important; }

    .section { padding-top: 30px !important; padding-bottom: 30px !important; }

    .hero-stats-fest, .hero-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .hero-stats-fest .num { font-size: 1.3rem !important; }

    /* Hero numéro 404 */
    .err-number { font-size: 5rem !important; }

    /* Logo plus compact */
    .logo-text { font-size: 0.85rem !important; }

    /* Cartes artistes plus compactes */
    .artist-card, .artist-profile { padding: 16px !important; }
    .artist-info h2, .artist-info h3 { font-size: 1.2rem !important; }

    /* Boutons plus compacts */
    .btn { padding: 12px 18px !important; font-size: 0.9rem !important; }
    .btn-lg { padding: 14px 22px !important; font-size: 0.95rem !important; }
    .btn-sm { padding: 8px 14px !important; font-size: 0.85rem !important; }

    /* Pas de confettis sur très petit écran (perf) */
    .confetti { display: none; }

    /* Card fantômes */
    .err-card { padding: 16px !important; }
    .err-card i { font-size: 1.6rem !important; }
    .err-card h3 { font-size: 0.95rem !important; }

    /* Partner cards */
    .partner-card h2 { font-size: 1.1rem !important; gap: 6px !important; }
    .partner-card .specialty { padding: 4px 10px !important; font-size: 0.7rem !important; }
}

/* =========================================================
   MOBILE TRÈS PETIT (≤ 360 px) — très anciens smartphones
   ========================================================= */
@media (max-width: 360px) {

    body { font-size: 13px !important; }
    h1 { font-size: 1.4rem !important; }

    .container { padding-left: 12px !important; padding-right: 12px !important; }

    .hero-stats-fest, .hero-stats { grid-template-columns: 1fr !important; }

    .btn, .btn-lg { padding: 11px 16px !important; font-size: 0.85rem !important; }

    .logo-text { font-size: 0.75rem !important; }
    .logo-icon { font-size: 1.1rem !important; }
}

/* =========================================================
   LANDSCAPE MOBILE (écrans étroits en hauteur)
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero, .hero-marseille { min-height: auto !important; padding: 40px 20px !important; }
    .hero-stats-fest { margin-bottom: 16px !important; }
}

/* =========================================================
   TOUCH — boutons plus gros pour les doigts
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
    .btn, button, a.btn-nav, .payment-option, .nav-links li a {
        min-height: 44px; /* recommandation WCAG pour mobile tactile */
    }
    .whatsapp-float { min-width: 56px; min-height: 56px; }
}

/* =========================================================
   PRINT — page péages imprimable
   ========================================================= */
@media print {
    .navbar, .footer, .whatsapp-float, .promo-bar, .btn-print, .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    * { color: #000 !important; background: #fff !important; box-shadow: none !important; }
    a { color: #b8860b !important; text-decoration: underline; }
}

/* =========================================================
   DARK MODE RESPECT (si l'utilisateur a dark mode actif)
   ========================================================= */
@media (prefers-color-scheme: dark) {
    /* le site est déjà en dark par défaut, rien à faire */
}

/* =========================================================
   REDUCED MOTION (accessibilité)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .confetti, .light-rays { display: none !important; }
}