/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Europale Basket Club
   Breakpoints :
     1200px  → grands écrans / desktop large
      992px  → tablette paysage / laptop
      768px  → tablette portrait
      480px  → mobile large
      360px  → petit mobile
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. GLOBAL
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    section { padding: 20px 8%; }
}
@media (max-width: 480px) {
    section { padding: 20px 5%; }
}

/* ══════════════════════════════════════════════════════════════
   2. HEADER / NAV
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .menu { padding: 10px 6%; }
    .links { display: none; }
    .burger { display: flex; }
}

/* ══════════════════════════════════════════════════════════════
   3. HERO SECTION (home)
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .home {
        min-height: 100vh;
        margin-bottom: 40px;
    }
    .home_page_content {
        position: relative;
        bottom: auto;
        padding: 140px 6% 40px;
        animation: none;
        opacity: 1;
        transform: none;
    }
    .home_page_content h1 {
        font-size: clamp(36px, 7vw, 60px);
        line-height: 1.1;
    }
    .image_box {
        position: relative;
        bottom: auto; right: auto;
        animation: none;
        opacity: 1;
        transform: none;
        padding: 0 6% 40px;
    }
    .image_box img {
        width: 100%;
        height: 280px;
    }
}
@media (max-width: 768px) {
    .home_page_content h1 { font-size: clamp(28px, 8vw, 44px); }
    .image_box img { height: 220px; }
}
@media (max-width: 480px) {
    .home_page_content { padding: 120px 5% 30px; }
    .home_page_content h1 { font-size: 32px; line-height: 1.15; }
    .image_box img { height: 180px; }
    /* Adresse lisible sur fond sombre mobile */
    .image_box p {
        font-size: 0.78rem;
        color: #fff;
        background: rgba(0,0,0,0.55);
        display: inline-block;
        padding: 4px 10px 4px 7px;
        border-radius: 20px;
        float: right;
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    .image_box i { margin-right: 6px; }
}

/* ══════════════════════════════════════════════════════════════
   4. SECTION TEXTE (watermark)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .text_section { padding-top: 50px; padding-bottom: 50px; }
    .text_section p { font-size: clamp(60px, 22vw, 130px); line-height: 1; }
    .text_section h2 { font-size: clamp(18px, 5vw, 24px); }
    .ev-text-section { padding: 50px 6% 50px; }
    .ev-text-section .watermark { font-size: clamp(60px, 20vw, 120px); }
    .ev-text-section h2 { font-size: 1.4rem; }
}
@media (max-width: 480px) {
    .text_section { padding-top: 40px; padding-bottom: 40px; }
    .text_section p { font-size: clamp(48px, 18vw, 80px); line-height: 1; }
    .text_section h2 { font-size: clamp(16px, 4.5vw, 20px); }
    .ev-text-section .watermark { font-size: clamp(48px, 16vw, 70px); }
    .big { margin: 60px 0 20px; }
    .big p { font-size: clamp(60px, 20vw, 100px); line-height: 1.1; }
    .big h2 { font-size: clamp(22px, 8vw, 40px); }
}
@media (max-width: 360px) {
    .text_section p { font-size: 44px; }
    .text_section h2 { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   5. SECTION OWNER (Le Club / présentation)
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .owner, .owner_left {
        flex-direction: column;
        height: auto;
        margin: 60px 0;
        margin-bottom: 60px;
        gap: 30px;
    }
    .image_box_owner { width: 100%; height: 280px; }
    .content_box { width: 100%; }
    .small_title::before { display: none; }
    .big_title { font-size: 28px; line-height: 1.2; }
}
@media (max-width: 480px) {
    .image_box_owner { height: 220px; }
    .big_title { font-size: 24px; }
    .owner, .owner_left { margin: 40px 0; }
}

/* ══════════════════════════════════════════════════════════════
   6. SECTION BACKGROUND (TIB)
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .background {
        height: auto;
        margin-bottom: 40px;
    }
    .background .image { height: 280px; }
    .text-box {
        position: relative;
        right: auto; bottom: auto;
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 30px 6%;
    }
}
@media (max-width: 480px) {
    .background .image { height: 200px; }
    .text-box { padding: 24px 5%; }
    .text-box h3 { font-size: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   7. SERVICES / BOUTIQUE (grille accueil)
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .services {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    .services .box {
        width: calc(50% - 24px);
        margin: 0;
    }
    .services .box img { width: 100%; height: 200px; }
}
@media (max-width: 600px) {
    .services .box { width: 100%; }
    .services .box img { height: 180px; }
}

/* ══════════════════════════════════════════════════════════════
   8. TESTIMONIALS / DIRIGEANTS
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .testimonials {
        flex-direction: column;
        margin: 60px 0;
        gap: 24px;
    }
    .left, .right { width: 100%; }
    .comment { padding: 28px; }
}
@media (max-width: 480px) {
    .comment { padding: 20px; }
    .testimonials { margin: 40px 0; }
}

/* ══════════════════════════════════════════════════════════════
   9. FOOTER
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .footer-columns {
        flex-wrap: wrap;
        gap: 40px;
    }
    .footer-sep { display: none; }
    .footer-column { flex: 1 1 calc(50% - 20px); min-width: 200px; }
    .footer-column:first-child { flex: 1 1 100%; }
    .footer-content { padding: 50px 6% 30px; }
}
@media (max-width: 600px) {
    .footer-column { flex: 1 1 100%; }
    .footer-content { padding: 40px 5% 24px; }
    .map-container iframe { height: 220px; }
    .sponsor-bar { height: 90px; }
    .item { height: 90px; }
    .item img { max-height: 60px; max-width: 110px; }
}

/* ══════════════════════════════════════════════════════════════
   10. CLUB PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .club-owner {
        flex-direction: column;
        padding: 0 6%;
        gap: 30px;
        margin-bottom: 40px;
    }
    .club-owner.owner_left { flex-direction: column; }
    .club-owner .image_box_owner { width: 100%; height: 240px; }
    .club-owner .content_box { width: 100%; }
    .labels-row { padding: 20px 5% 50px; gap: 24px; }
    .label-item { width: 160px; }
}
@media (max-width: 600px) {
    .club-owner .image_box_owner { height: 200px; }
    .label-item { width: 140px; }
    .label-item img { width: 70px; height: 70px; }
    .timeline-scroll-wrapper { padding: 20px 20px 30px; }
}
@media (max-width: 480px) {
    .labels-row { gap: 16px; }
    .label-item { width: calc(50% - 8px); }
}

/* ══════════════════════════════════════════════════════════════
   11. TIB PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .tib-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 5% 60px !important;
    }
    .tib-edition-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 5% 60px !important;
    }
    .tib-contact-note { padding: 24px 6%; }
}
@media (max-width: 600px) {
    .tib-services-grid { grid-template-columns: 1fr !important; }
    .tib-edition-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   12. ÉVÉNEMENTS PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .ev-agenda-wrap {
        flex-direction: column !important;
    }
    .ev-agenda-cover {
        width: 100% !important;
        height: 300px !important;
        border-radius: 0 !important;
    }
    .ev-floating-cards {
        padding: 30px 5% !important;
        gap: 16px !important;
    }
    .ev-float-card {
        width: 100% !important;
        max-width: 500px;
        margin: 0 auto;
    }
    .ev-float-card--duo { min-width: unset !important; }
}
@media (max-width: 600px) {
    .ev-agenda-cover { height: 220px !important; }
    .mc-body { gap: 10px; }
    .mc-team-name { font-size: 1rem; }
}
@media (max-width: 480px) {
    .ev-float-card { padding: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════
   13. ÉQUIPES PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .teams-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 5% 60px !important;
    }
}
@media (max-width: 480px) {
    .teams-grid { grid-template-columns: 1fr !important; }
    .teams-carousel-wrap { padding: 0 30px; }
}

/* ══════════════════════════════════════════════════════════════
   14. PAGE ÉQUIPE (détail)
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .td-info-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 5% 50px !important;
    }
    .td-players-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .td-training-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .td-info-grid { grid-template-columns: 1fr !important; }
    .td-players-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .td-training-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 360px) {
    .td-players-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   15. GALERIE PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .galerie-grid {
        columns: 2 !important;
        padding: 0 5% 60px !important;
    }
    .galerie-filters-inner {
        flex-wrap: wrap;
        gap: 10px !important;
        padding: 16px 5% !important;
    }
}
@media (max-width: 600px) {
    .galerie-grid { columns: 1 !important; }
}

/* ══════════════════════════════════════════════════════════════
   16. BOUTIQUE PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .bt-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 5% 60px !important;
        gap: 20px !important;
    }
    .bt-cta-inner {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .bt-cta { padding: 60px 6% !important; }
}
@media (max-width: 600px) {
    .bt-grid { grid-template-columns: 1fr !important; }
    .bt-band { gap: 12px; font-size: .75rem; }
    .bt-sep { display: none; }
}
@media (max-width: 360px) {
    .bt-card-footer { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   17. SPONSORS PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .sp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 20px 6% 60px !important;
    }
    .sp-cta-section { padding: 50px 8% !important; }
}
@media (max-width: 480px) {
    .sp-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   18. MENTIONS LÉGALES
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ml-hero { padding: 60px 6% 50px; flex-direction: column; }
    .ml-hero-deco { display: none; }
    .ml-nav { padding: 0 4%; }
    .ml-body { padding: 40px 16px 60px; }
    .ml-section { padding: 22px 20px; flex-direction: column; gap: 14px; }
    .ml-rights-grid { grid-template-columns: 1fr; }
    .ml-info-label { min-width: 110px; font-size: .7rem; }
}

/* ══════════════════════════════════════════════════════════════
   19. CONTACT PAGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr !important;
    }
    .contact-map-col { display: none; }
}
@media (max-width: 600px) {
    .contact-form-wrap { padding: 28px 20px !important; }
    .contact-info-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════════
   20. PAGE 404
══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .err-num { font-size: clamp(100px, 25vw, 160px) !important; }
    .err-title { font-size: 1.3rem !important; }
    .err-actions { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   21. BOUTON RETOUR EN HAUT
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    #backToTop { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: .85rem; }
}

/* ══════════════════════════════════════════════════════════════
   22. UTILITAIRES RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .show-mobile-only { display: none !important; }
}
@media (max-width: 992px) {
    .hide-tablet { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   23. TRÈS GRANDS ÉCRANS (1400px+)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    .home_page_content { bottom: 12%; padding-right: 10%; }
    .ev-floating-cards { padding: 60px 12% 80px; }
    .bt-grid           { padding: 0 12% 90px; }
    .sp-grid           { padding: 20px 14% 80px; }
    .ml-body           { max-width: 960px; }
    .bt-cta-inner      { max-width: 1200px; }
}

/* ══════════════════════════════════════════════════════════════
   24. TRÈS PETITS MOBILES (320px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    /* Global */
    body { font-size: 14px; }
    .white_btn { padding: 8px 18px; font-size: 13px; }

    /* Hero */
    .home_page_content { padding: 110px 4% 24px; }
    .home_page_content h1 { font-size: 28px; }
    .home_page_content .text { font-size: 0.85rem; }
    .image_box img { height: 160px; }

    /* Nav mobile */
    .links_responsive li a { font-size: 1.1rem; }

    /* Sections watermark */
    .ev-text-section .watermark { font-size: 56px; }
    .ev-text-section { padding: 40px 4% 40px; }

    /* Boutique */
    .bt-grid { gap: 14px !important; }
    .bt-card-body { padding: 16px !important; }
    .bt-price-main { font-size: 1.6rem !important; }
    .bt-btn-cmd { padding: 8px 14px !important; font-size: 0.75rem !important; }

    /* Sponsors */
    .sp-card-img { height: 120px !important; }
    .sp-cta-section { padding: 40px 5% !important; }

    /* Équipes */
    .teams-grid { grid-template-columns: 1fr !important; }

    /* Footer */
    .footer-bottom { font-size: 0.7rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   25. LANDSCAPE MOBILE (hauteur < 500px)
══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (max-width: 992px) {
    .home { min-height: auto; }
    .home_page_content { padding: 80px 6% 20px; }
    .links_responsive {
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 80px;
    }
    .links_responsive li { margin: 8px 0; }
    .links_responsive li a { font-size: 1.1rem; padding: 6px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   26. PRINT
══════════════════════════════════════════════════════════════ */
@media print {
    header, footer, #backToTop, .burger, .mc-arrow, .mc-controls { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .home { min-height: auto; page-break-after: always; }
}