/**
 * Responsive — polish global et cohérence cross-breakpoints.
 *
 * Note : chaque module (header.css, footer.css, homepage.css, woocommerce.css)
 * gère déjà ses propres breakpoints internes pour les grilles et structures.
 * Ce fichier traite la typographie globale, les espacements de section,
 * le container et les ajustements transversaux.
 *
 * Breakpoints :
 *   - Tablette  : max-width 1024px
 *   - Mobile    : max-width 768px
 *   - Petit     : max-width 480px
 *   - Desktop   : min-width 1025px (par défaut, pas de media query)
 */

/* ============ TABLETTE ≤ 1024px ============ */
@media (max-width: 1024px) {
    :root {
        --space-section-desktop: 60px;
        --container-max: 100%;
    }

    body.storefront-child {
        font-size: 15px;
    }

    .sfc-container {
        padding-inline: 20px;
    }

    .sfc-section {
        padding-block: 60px;
    }

    .sfc-section-header {
        margin-bottom: 2.5rem;
    }
}

/* ============ MOBILE ≤ 768px ============ */
@media (max-width: 768px) {
    :root {
        --space-section-desktop: var(--space-section-mobile);
    }

    body.storefront-child {
        font-size: 15px;
        line-height: 1.55;
    }

    h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.125rem, 4vw, 1.5rem); }

    .sfc-container {
        padding-inline: 16px;
    }

    .sfc-section {
        padding-block: var(--space-section-mobile);
    }

    .sfc-section-header {
        margin-bottom: 2rem;
    }

    /* Boutons : réduction du padding et taille pour ne pas déborder */
    .sfc-btn {
        padding: 14px 28px;
        font-size: 12px;
    }

    /* Grilles helper : passe à 1 colonne */
    .sfc-grid--2,
    .sfc-grid--3,
    .sfc-grid--4 {
        grid-template-columns: 1fr;
    }

    /* WP Block content : sécuriser images débordantes */
    .sfc-main img,
    .sfc-page-content img {
        max-width: 100%;
        height: auto;
    }

    /* Sub-footer : empilé déjà géré dans footer.css mais on rabote padding */
    .sfc-subfooter {
        padding-block: 18px;
    }
}

/* ============ PETIT MOBILE ≤ 480px ============ */
@media (max-width: 480px) {
    .sfc-container {
        padding-inline: 14px;
    }

    .sfc-btn {
        width: 100%;
        max-width: 320px;
    }

    /* Hero : réduire la hauteur sur très petit écran */
    .sfc-hero {
        min-height: 60vh;
    }

    .sfc-hero__title {
        font-size: clamp(1.625rem, 7vw, 2rem);
    }

    .sfc-hero__subtitle {
        font-size: 14px;
    }
}

/* ============ POINTERS / HOVER ============ */
@media (hover: none) {
    /* Sur tactile : neutraliser les hover transforms qui peuvent rester collés */
    .sfc-categories__card:hover,
    .sfc-traiteur__card:hover,
    .woocommerce ul.products li.product:hover {
        transform: none;
    }
}

/* ============ IMPRESSION ============ */
@media print {
    .sfc-topbar,
    .sfc-header,
    .sfc-mobile-drawer,
    .sfc-mini-cart,
    .sfc-overlay,
    .sfc-footer,
    .sfc-fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
    .sfc-topbar,
    .sfc-header,
    .sfc-mobile-drawer,
    .sfc-mini-cart,
    .sfc-overlay,
    .sfc-footer {
        display: none !important;
    }
    body.storefront-child {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }
    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ============ DESKTOP wide ≥ 1440px ============ */
@media (min-width: 1440px) {
    :root {
        --container-max: 1320px;
    }
}