/*
 * OG e-Commerce — responsive.css
 * Breakpoints mobile-first
 * Mobile < 768px | Tablette 768–1024px | Desktop > 1024px
 */

/* ════════════════════════════════════════════════════════════════════════
   TABLETTE — 768px et plus
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    :root { --ci-container-px: 2rem; }

    .og-ec-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .og-ec-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .og-ec-grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Footer : 2 colonnes sur tablette */
    .og-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--ci-space-xl); }

    /* Topbar : afficher email sur tablette */
    .og-topbar__item--desktop { display: flex; }

    /* Hamburger visible tablette */
    .og-hamburger        { display: flex; }
    .og-header__nav      { display: none; }

    /* WooCommerce — 2 colonnes */
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   DESKTOP — 1025px et plus
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    :root { --ci-container-px: 1.5rem; }

    .og-ec-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .og-ec-grid-4 { grid-template-columns: repeat(4, 1fr); }

    /* Header : nav visible, hamburger masqué */
    .og-header__nav { display: flex; }
    .og-hamburger   { display: none; }

    /* Footer 4 colonnes */
    .og-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: var(--ci-space-2xl); }

    /* WooCommerce — 4 colonnes */
    .woocommerce ul.products        { grid-template-columns: repeat(4, 1fr) !important; }
    .woocommerce-page ul.products   { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE ONLY — Moins de 768px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    :root {
        --ci-container-px: 1rem;
        --ci-space-3xl:    3rem;
    }

    /* Grilles : 1 colonne sur mobile */
    .og-ec-grid-2,
    .og-ec-grid-3,
    .og-ec-grid-4 { grid-template-columns: 1fr; }

    /* Topbar : masquer éléments secondaires */
    .og-topbar__item--desktop { display: none !important; }
    .og-topbar__inner         { min-height: 34px; padding-block: 0.35rem; }
    .og-topbar__item span     { display: none; }
    .og-topbar__item          { gap: 0; width: 32px; height: 32px; justify-content: center; }
    .og-topbar__whatsapp span { display: none; }
    .og-topbar__whatsapp      { padding: 6px 10px; }

    /* Header */
    .og-header__inner   { min-height: 60px; gap: var(--ci-space-sm); }
    .og-header__nav     { display: none; }
    .og-hamburger       { display: flex; }
    .og-ec-logo--header .og-ec-logo__img { height: 40px; max-width: 140px; }

    /* Footer mobile */
    .og-footer__main    { padding-block: var(--ci-space-2xl) var(--ci-space-xl); }
    .og-footer__grid    { grid-template-columns: 1fr; gap: var(--ci-space-xl); }
    .og-footer__offices { gap: var(--ci-space-md); }
    .og-footer__bottom-inner { flex-direction: column; text-align: center; gap: var(--ci-space-sm); }
    .og-footer__back-top { margin: 0 auto; }

    /* WhatsApp float : plus petit */
    .og-whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 1.375rem;
        bottom: 1rem;
        right: 1rem;
    }
    .og-whatsapp-float__tooltip { display: none; }

    /* Buttons */
    .og-ec-btn--xl { padding: 0.875rem 1.5rem; font-size: 1rem; }

    /* Section header */
    .og-ec-section { padding-block: var(--ci-space-2xl); }

    /* Inputs — éviter zoom iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea { font-size: 16px !important; }

    /* Page banner */
    .og-page-banner { padding-block: var(--ci-space-xl); }

    /* WooCommerce mobile */
    .woocommerce ul.products        { grid-template-columns: repeat(2, 1fr) !important; }
    .og-ec-card-actions             { flex-direction: column; }
    .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   TRÈS PETIT MOBILE — Moins de 380px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 379px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
    .og-ec-btn--xl { padding: 0.75rem 1.25rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   GRANDS ÉCRANS — 1400px et plus
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    :root { --ci-container: 1320px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRÉFÉRENCES UTILISATEUR
   ════════════════════════════════════════════════════════════════════════ */

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}