/* ================================================================
   BRAIN LE PORTEL — Mobile CSS
   Optimisé pour écrans < 768px
   ================================================================ */

@media (max-width: 768px) {

/* ── MENU ── */
.menu-nav { display: none !important; }
.menu-reserve { display: none !important; }
.menu-burger { display: flex !important; }
.menu-logo-text .menu-logo-name { font-size: 14px !important; }

/* Drawer mobile */
.menu-drawer {
    display: none !important;
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #0E0C1E !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    border-top: 3px solid #D04A4A !important;
}
.menu-drawer.open { display: block !important; }

/* ── BODY ── */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
}
img { max-width: 100% !important; }
iframe { max-width: 100% !important; }

/* ── ÉVÉNEMENTS : carousel swipeable ── */
.evt-section {
    padding: 16px 0 !important;
    overflow: visible !important;
}
.evt-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 16px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
}
.evt-grid::-webkit-scrollbar { display: none !important; }
.evt-card {
    min-width: 260px !important;
    max-width: 260px !important;
    width: 260px !important;
    height: 320px !important;
    min-height: 320px !important;
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ── SALLES ACCUEIL : carousel ── */
.brain-salles-grid,
.salles-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 16px 12px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.brain-salles-grid::-webkit-scrollbar { display: none !important; }

/* ── TARIFS : onglets scrollables + grille 2x2 ── */
.brain-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 0 16px 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.brain-tabs::-webkit-scrollbar { display: none !important; }
.brain-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
}
.brain-prices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

/* ── AVIS : 1 visible ── */
.avis-wrapper {
    overflow: hidden !important;
}
.avis-track {
    display: flex !important;
    transition: transform .4s ease !important;
}
.avis-card {
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── TYPOGRAPHY ── */
h1, .h1 { font-size: clamp(22px, 6vw, 32px) !important; }
h2, .h2 { font-size: clamp(18px, 5vw, 26px) !important; }

/* ── EVJF ── */
.evjf-hero { flex-direction: column !important; }
.evjf-hero-video { flex: 0 0 200px !important; width: 100% !important; }
.evjf-hero-content { padding: 20px 5% !important; }
.evjf-h1 { font-size: 26px !important; }
.evjf-grid { grid-template-columns: 1fr !important; }
.evjf-btns { flex-direction: column !important; }
.evjf-btn-main, .evjf-btn-sec { width: 100% !important; text-align: center !important; box-sizing: border-box !important; }
.evjf-loc { flex-direction: column !important; }
.evjf-multi { flex-direction: column !important; }

/* ── TEAM BUILDING ── */
.tb-hero { flex-direction: column !important; }
.tb-hero-content { padding: 20px 5% !important; }

/* ── BLOG ── */
.blog-grid { grid-template-columns: 1fr !important; }

/* ── FOOTER ── */
footer, .footer-inner { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
.footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }

/* ── TICKER ── */
.evt-ticker-item { font-size: 11px !important; padding: 0 20px !important; }

/* ── FORMULAIRES ── */
.form-grid { grid-template-columns: 1fr !important; }

/* ── LOGOS ── */
.logos-track { gap: 20px !important; }
.logo-client { max-height: 40px !important; }

} /* fin @media 768px */

/* ── BURGER ACTIF : animation croix ── */
@media (max-width: 768px) {
.menu-burger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
}
.menu-burger.active span:nth-child(2) {
    opacity: 0 !important;
}
.menu-burger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
}
}