/* ==========================================================================
   Correctifs responsive globaux - Volley Ball des Grèves
   À charger après volley.css et les CSS personnalisés.
   ========================================================================== */

:root {
    --vbg-mobile-padding: 0.85rem;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

iframe {
    border: 0;
}

main,
section,
article,
aside,
header,
footer,
div {
    min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
strong,
small,
li,
td,
th,
button {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Empêche les contenus libres GrapeJS de provoquer un scroll horizontal. */
.page-free-block,
.page-free-block *,
.vbg-home-hero,
.vbg-home-hero *,
.vbg-section-colored,
.vbg-section-colored *,
.vbg-inscription-info-card,
.vbg-inscription-info-card *,
.vbg-contact-card,
.vbg-contact-card * {
    max-width: 100%;
}

.page-free-block table,
.card table,
.vbg-section-colored table,
.vbg-inscription-info-card table,
.vbg-contact-card table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.page-free-block iframe,
.vbg-section-colored iframe,
.vbg-inscription-info-card iframe,
.vbg-contact-card iframe,
.boutique-iframe-wrapper iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

/* Couleurs sûres pour les blocs réutilisables hors hero.
   Avant, certains boutons secondaires étaient blancs sur fond blanc. */
.page-free-block .vbg-home-kicker,
.page-free-block .vbg-inscription-kicker {
    background: #dcfce7;
    color: var(--club-green, #087b3b);
}

.page-free-block .vbg-home-btn-secondary,
.page-free-block .vbg-inscription-btn-secondary {
    background: #111827;
    color: #ffffff !important;
    border-color: transparent;
}

.vbg-home-hero .vbg-home-kicker,
.vbg-home-cta .vbg-home-kicker,
.vbg-inscription-hero .vbg-inscription-kicker,
.vbg-contact-hero .vbg-contact-card-label,
.vbg-inscription-contact .vbg-inscription-kicker {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
}

.vbg-home-hero .vbg-home-btn-secondary,
.vbg-home-cta .vbg-home-btn-secondary,
.vbg-inscription-hero .vbg-inscription-btn-secondary,
.vbg-inscription-contact .vbg-inscription-btn-secondary {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28);
}

.vbg-section-colored,
.vbg-inscription-info-card,
.vbg-contact-card,
.vbg-contact-links-section,
.vbg-editor-two-columns article,
.vbg-editor-card-grid article,
.team-card,
.team-list-card,
.calendar-card,
.calendar-team-card,
.sponsors-page-card,
.presse-card,
.boutique-card {
    color: var(--ink, #111827);
}

.vbg-section-colored p,
.vbg-inscription-info-card p,
.vbg-contact-card p,
.vbg-editor-two-columns p,
.vbg-editor-card-grid p {
    color: var(--muted, #555f6d);
}

/* Cartes match : longs noms d'équipes / lieux. */
.vbg-home-next-team,
.vbg-home-next-versus,
.home-upcoming-match-title,
.team-match-title,
.team-result-versus,
.insta-match-versus,
.insta-match-meta {
    overflow-wrap: anywhere;
}

.team-result-versus span,
.team-match-title,
.vbg-home-next-versus,
.home-upcoming-match-title {
    min-width: 0;
}

/* Pages utilisant encore des classes Tailwind compilées : garde-fou mobile. */
.card {
    max-width: 100%;
    overflow: hidden;
}

.form-field,
.btn-primary,
.card input,
.card textarea,
.card select {
    max-width: 100%;
}

/* Google Calendar et iframes externes. */
.calendar-iframe-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.calendar-iframe-wrapper iframe {
    width: 100% !important;
    min-width: min(720px, 100%);
}

/* HelloAsso peut injecter des largeurs fixes. */
.boutique-iframe-wrapper,
.boutique-iframe-wrapper > * {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
}

/* Carousel sponsors plus confortable sur très petit écran. */
.sponsors-marquee {
    max-width: 100%;
}

.sponsors-marquee-track {
    will-change: transform;
}

/* Contact / inscription : évite les emails et documents trop longs qui sortent. */
.vbg-contact-lines a,
.vbg-contact-link-card,
.vbg-contact-document-card,
.vbg-document-card,
.vbg-document-link,
.vbg-inscription-contact-actions a,
.vbg-contact-partner-actions a {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Garde-fou pour les médias insérés depuis l'éditeur. */
.vbg-editor-image-card,
.vbg-editor-image-card img,
.page-free-block figure,
.page-free-block figure img {
    max-width: 100%;
}

@media (max-width: 1050px) {
    .vbg-home-hero-inner,
    .vbg-contact-grid,
    .team-layout {
        grid-template-columns: 1fr !important;
    }

    .team-sidebar {
        order: -1;
    }
}

@media (max-width: 900px) {
    .vbg-navbar {
        position: sticky;
    }

    .vbg-nav-toggle:checked ~ .vbg-nav-menu {
        max-height: calc(100vh - 92px);
        overflow-y: auto;
    }
}

@media (max-width: 780px) {
    main.mx-auto.max-w-6xl {
        width: 100% !important;
        padding-left: var(--vbg-mobile-padding) !important;
        padding-right: var(--vbg-mobile-padding) !important;
    }

    .page-free-block,
    .home-dynamic-section,
    .home-sponsors-section,
    .teams-page,
    .team-page,
    .calendar-page,
    .sponsors-page,
    .presse-page,
    .boutique-page,
    .vbg-inscription-documents-auto,
    .vbg-contact-documents-auto {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vbg-home-actions,
    .vbg-inscription-actions,
    .home-upcoming-actions,
    .vbg-contact-form-actions,
    .vbg-contact-partner-actions,
    .vbg-inscription-contact-actions {
        width: 100%;
    }

    .vbg-home-btn,
    .vbg-inscription-btn,
    .btn-primary,
    .teams-global-calendar,
    .calendar-secondary-button,
    .calendar-main-button,
    .team-ffvb-button,
    .team-resource-button,
    .boutique-button,
    .vbg-contact-form-actions button,
    .vbg-contact-partner-actions a,
    .vbg-inscription-contact-actions a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .home-dynamic-header,
    .teams-header,
    .calendar-header,
    .sponsors-page-header,
    .team-hero,
    .calendar-team-card,
    .vbg-home-cta-inner,
    .vbg-inscription-contact,
    .vbg-contact-partner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .home-featured-news-grid,
    .home-upcoming-matches-grid,
    .teams-grid,
    .sponsors-grid,
    .presse-grid,
    .boutique-grid,
    .vbg-support-grid,
    .vbg-editor-two-columns,
    .vbg-editor-card-grid,
    .vbg-tarifs-grid,
    .vbg-documents-grid,
    .vbg-inscription-hours-grid,
    .vbg-contact-links-grid,
    .vbg-contact-documents-grid,
    .vbg-contact-form-grid {
        grid-template-columns: 1fr !important;
    }

    .team-result-card,
    .team-result-main {
        grid-template-columns: 1fr !important;
    }

    .team-result-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .team-result-scorebox {
        width: 100%;
        min-height: 58px;
    }

    .team-player-card {
        flex-direction: column;
        align-items: stretch;
    }

    .team-player-card img,
    .team-player-placeholder {
        width: 100% !important;
        height: auto;
        min-height: 220px;
        max-height: 320px;
        flex-basis: auto !important;
        object-fit: cover;
    }

    .calendar-iframe-wrapper iframe {
        min-width: 0;
        min-height: 560px;
    }
}

@media (max-width: 520px) {
    :root {
        --vbg-mobile-padding: 0.7rem;
    }

    .vbg-navbar-inner {
        width: calc(100% - 1rem);
    }

    .vbg-navbar-title {
        max-width: 185px;
    }

    .vbg-home-hero,
    .vbg-section-colored,
    .vbg-home-cta,
    .vbg-inscription-hero,
    .vbg-inscription-info-card,
    .vbg-inscription-contact,
    .vbg-contact-card,
    .vbg-contact-links-section,
    .vbg-contact-partner,
    .calendar-card,
    .calendar-team-card,
    .team-card,
    .team-list-card,
    .sponsors-page-card,
    .presse-header,
    .presse-card,
    .boutique-hero,
    .boutique-card {
        border-radius: 20px !important;
    }

    .vbg-home-hero,
    .vbg-section-colored,
    .vbg-home-cta,
    .vbg-inscription-hero,
    .vbg-inscription-info-card,
    .vbg-inscription-contact,
    .vbg-contact-card,
    .vbg-contact-links-section,
    .vbg-contact-partner,
    .calendar-card,
    .calendar-team-card,
    .team-card,
    .presse-header,
    .boutique-hero {
        padding: 1rem !important;
    }

    .vbg-home-hero h1,
    .vbg-inscription-hero h1,
    .vbg-contact-hero h1,
    .presse-header h1,
    .boutique-hero h1 {
        font-size: clamp(2rem, 11vw, 2.8rem) !important;
        line-height: 1 !important;
        letter-spacing: -0.035em;
    }

    .vbg-home-next-team,
    .team-list-top,
    .team-card-header,
    .team-result-status-row,
    .vbg-hour-top,
    .vbg-support-card,
    .vbg-tarif-card {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .vbg-support-arrow,
    .vbg-home-next-team span,
    .vbg-hour-badge {
        align-self: flex-start;
    }
}