/* ======================================================
   RESPONSIVE GLOBAL — mobile et tablette
   Chargé en dernier afin d'harmoniser l'ensemble du site.
====================================================== */

html { overflow-x: clip; }
body { min-width: 0; overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
main, section, article, aside, .container, [class*="__inner"], [class*="__content"] { min-width: 0; }

/* Les contenus éditoriaux ne doivent jamais provoquer de débordement. */
:where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, a, span, strong) {
    overflow-wrap: anywhere;
}

/* Zones tabulaires : le tableau conserve sa lisibilité et défile dans sa carte. */
:where(.table-scroll, .team-ranking__scroll, .licences-table-wrap, .results-table-wrap, .documents-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Empêche les longues URL et libellés administrables de casser la mise en page. */
:where(.button, button, input, select, textarea) { max-width: 100%; }

@media (max-width: 1050px) {
    :root {
        --container-padding: clamp(1.25rem, 3vw, 2rem);
    }

    .site-header { position: sticky; top: 0; }
    .site-header__inner { gap: 1rem; }
    .site-navigation { z-index: 100; }

    /* Le menu reste utilisable sur les tablettes en paysage peu hautes. */
    .site-navigation.is-open {
        max-height: calc(100dvh - 88px);
        overscroll-behavior: contain;
    }

    /* Les colonnes principales passent à une composition plus souple. */
    :where(
        .club-intro__grid,
        .club-values__grid,
        .organisation-intro__grid,
        .contact-layout,
        .contact-grid,
        .practical-layout,
        .licences-intro__grid,
        .history-intro__grid,
        .partners-intro__grid,
        .benevoles-intro__grid
    ) {
        min-width: 0;
    }
}

@media (max-width: 820px) {
    :root {
        --container-padding: clamp(1rem, 4vw, 1.5rem);
    }

    /* Rythme vertical commun aux pages institutionnelles. */
    :where(main section, .section, [class$="__section"]) {
        scroll-margin-top: 96px;
    }

    :where(.page-hero, .institutional-hero, .club-hero, .organisation-hero, .join-hero) {
        min-height: auto;
    }

    :where(.page-hero__inner, .institutional-hero__inner, .club-hero__inner, .organisation-hero__inner, .join-hero__inner) {
        padding-block: clamp(3.25rem, 9vw, 5rem);
    }

    :where(.page-hero h1, .institutional-hero h1, .club-hero h1, .organisation-hero h1, .join-hero h1) {
        max-width: 100%;
        font-size: clamp(2.2rem, 8vw, 4rem);
        line-height: .98;
    }

    /* Les groupes de boutons se replient proprement. */
    :where(.hero-actions, [class*="__actions"], .button-group) {
        flex-wrap: wrap;
    }

    /* Les images décoratives ne doivent pas imposer une largeur de bureau. */
    :where([class*="__media"], [class*="__image"], [class*="__visual"]) {
        min-width: 0;
    }

    /* Cartes et panneaux : marges et rayons adaptés aux écrans tactiles. */
    :where([class*="__card"], [class*="__panel"]) {
        min-width: 0;
    }

    /* Résultats et équipes : les blocs complexes passent en pile avant le mobile étroit. */
    :where(.team-next-match__panel, .team-performance__grid, .team-staff__panel) {
        min-width: 0;
    }

    .team-ranking__scroll,
    .team-calendar,
    .licences-table-wrap {
        margin-inline: calc(var(--container-padding) * -0.35);
        padding-inline: calc(var(--container-padding) * 0.35);
    }
}

@media (max-width: 680px) {
    body { font-size: 1rem; }

    .site-header__inner { min-height: 76px; }
    .site-header__brand { transform: none; }
    .site-header__brand img { height: 60px; max-width: min(58vw, 230px); object-fit: contain; }
    .site-navigation { max-height: calc(100dvh - 76px); padding: 1rem var(--container-padding) 1.5rem; }
    .site-navigation__list > li > a { min-height: 48px; }
    .site-navigation .sub-menu { padding-left: .75rem; }
    .site-header__cta { justify-content: center; }

    /* Titres fluides sur toutes les pages. */
    h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); }
    h2 { font-size: clamp(1.75rem, 8.5vw, 2.55rem); }
    h3 { font-size: clamp(1.25rem, 6vw, 1.75rem); }

    /* Tous les CTA deviennent confortables au pouce sans dépasser. */
    :where(.hero-actions, [class*="__actions"], .button-group) > .button,
    :where(.hero-actions, [class*="__actions"], .button-group) > a.button {
        width: 100%;
        justify-content: center;
    }

    .button { min-height: 46px; white-space: normal; text-align: center; }

    /* Grilles génériques souvent utilisées dans les pages. */
    :where(
        .cards-grid,
        .features-grid,
        .values-grid,
        .links-grid,
        .steps-grid,
        .materials-grid,
        .practices-grid,
        .contact-grid,
        .documents-grid,
        .partners-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Les tableaux administrables restent accessibles sans écraser le texte. */
    table { max-width: none; }
    :where(.team-ranking, .licences-table, .results-table) { min-width: 620px; }

    /* Fiches équipe. */
    .team-next-match__panel,
    .team-staff__panel,
    .team-photo-card,
    .team-section__card {
        padding-inline: clamp(1rem, 4vw, 1.35rem);
    }

    .team-next-match__fixture,
    .team-result__fixture,
    .team-calendar__match > div:nth-child(2) {
        min-width: 0;
    }

    .team-result__club,
    .team-calendar__club {
        align-items: center;
    }

    .team-result__club span,
    .team-calendar__club span {
        line-height: 1.2;
    }

    /* Formulaires : évite le zoom automatique d'iOS. */
    input, select, textarea { font-size: 16px; }

    /* Pied de page compact sans liens trop serrés. */
    .site-footer__legal { gap: .75rem 1rem; }
    .site-footer__legal a { display: inline-flex; min-height: 40px; align-items: center; }
}

@media (max-width: 480px) {
    :root { --container-padding: 1rem; }

    .site-header__brand img { height: 56px; max-width: 62vw; }
    .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; }

    :where(.page-hero__inner, .institutional-hero__inner, .club-hero__inner, .organisation-hero__inner, .join-hero__inner) {
        padding-block: 3rem;
    }

    :where(.page-hero h1, .institutional-hero h1, .club-hero h1, .organisation-hero h1, .join-hero h1) {
        font-size: clamp(2rem, 12vw, 2.8rem);
    }

    /* Cartes moins massives sur les petits téléphones. */
    :where([class*="__card"], [class*="__panel"]) {
        border-radius: min(var(--radius-lg, 18px), 16px);
    }

    /* Matchs : logos et noms conservent chacun une place utile. */
    .team-result__fixture,
    .team-calendar__match > div:nth-child(2) {
        gap: .35rem;
    }

    .team-result__club img,
    .team-calendar__club img {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .team-result__fixture strong,
    .team-calendar__match b {
        font-size: 1rem;
    }

    /* La lightbox et les médias restent dans le viewport dynamique. */
    :where(.lightbox, .history-lightbox, .team-photo-lightbox) {
        max-width: 100vw;
        max-height: 100dvh;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Pas de déplacement de cartes au toucher : évite les états coincés. */
    :where([class*="__card"], [class*="__panel"]):hover {
        transform: none;
    }

    :where(a, button, summary, input, select, textarea) {
        -webkit-tap-highlight-color: rgba(0, 120, 70, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}


/* ======================================================
   PASSE QUALITÉ 1.8 — NAVIGATION ET CONTENUS TACTILES
====================================================== */

@media (max-width: 1050px) {
    body.has-open-navigation {
        overflow: hidden;
    }

    .site-navigation.is-open {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 680px) {
    :where(a, button, summary, input[type="checkbox"], input[type="radio"]) {
        min-inline-size: 44px;
    }

    :where(.site-footer a, .site-navigation a, .button) {
        min-block-size: 44px;
    }

    .wp-block-embed,
    .wp-block-video,
    .wp-block-image,
    .wp-caption {
        max-width: 100%;
    }
}

@media (prefers-contrast: more) {
    :where(.button, [class*="__card"], [class*="__panel"]) {
        border-width: 2px;
    }

    a {
        text-decoration-thickness: .12em;
        text-underline-offset: .18em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}