/* ==========================================================================
   Gestion Apparence Site — CSS de base et responsive (fichier fixe, mis en cache)

   Les couleurs viennent des variables --gas-* publiées en tête de page par le
   plugin (bloc <style id="gas-vars">), selon le thème actif et les réglages.

   Paliers responsive :
     tablette      ≤ 900px  en-tête empilé
     mobile        ≤ 768px  grille 2 colonnes, barre infos, menu, boutons, checkout
     petit mobile  ≤ 480px  version compacte

   Les règles mobiles commencent par « html body » : le CSS du thème restaurant
   est injecté plus bas dans la page, cette priorité garantit que le mobile
   l'emporte sans dépendre de l'ordre de chargement.
   ========================================================================== */


/* ── Pages WooCommerce : marges latérales ── */
.woocommerce-cart .site-content .inside-article,
.woocommerce-checkout .site-content .inside-article,
.woocommerce-shop .site-content .inside-article,
.woocommerce-page .site-content .inside-article {
    padding-left: 30px;
    padding-right: 30px;
}

/* ── Pages WooCommerce : largeur max centrée ── */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-shop .woocommerce {
    max-width: 1000px;
    margin: 0 auto;
}

/* ── Message d'en-tête ── */
.message-darka-header {
    position: absolute;
    top: 50px;
    right: 50px;
    max-width: 300px;
    background-color: #f9f9f9;
    border: 1px solid #3498db;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    color: #333;
    text-align: right;
    z-index: 999;
}

/* ── Mon compte : espacement des boutons de commande ── */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button {
    margin-right: 8px;
    margin-bottom: 5px;
}
.woocommerce-account .woocommerce-orders-table .button + .button {
    margin-left: 8px;
}

/* ── Promo : masquer l'ancien prix quand le badge promo est présent ── */
.cart_item:has(.custom-promo-badge) .product-price .amount:first-child,
.wc-block-components-order-summary-item:has(.custom-promo-badge) .wc-block-components-product-price .amount:first-child {
    display: none !important;
}

/* ── Émojis natifs : aucun filtre CSS ── */
img.emoji {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    transform: none !important;
    color: initial !important;
}


/* ==========================================================================
   TABLETTE (≤ 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* En-tête : logo au-dessus de l'image (seulement si image d'en-tête) */
    html body.gas-has-header-img .site-header .inside-header,
    html body.gas-has-header-img .site-header .grid-container {
        flex-direction: column !important;
        max-height: none !important;
    }
    html body.gas-has-header-img .site-branding { flex: 0 0 auto !important; width: 100% !important; }
    html body.gas-has-header-img .gas-header-image-container { width: 100% !important; max-height: 220px !important; }
    html body.gas-has-header-img .gas-header-image {
        min-height: var(--gas-header-mobile-min-h, 169px) !important;
        max-height: 220px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    html body.gas-has-header-img .gas-header-image-container::before { display: none !important; }
}


/* ==========================================================================
   MOBILE (≤ 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* Message d'en-tête sous le logo, pleine largeur */
    html body .message-darka-header {
        position: relative;
        top: auto;
        right: auto;
        max-width: 100%;
        text-align: center;
        margin: 10px auto 0;
    }

    /* Grille produits sur 2 colonnes */
    html body .woocommerce ul.products li.product {
        width: 48% !important;
        margin-right: 2% !important;
    }
    html body .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
    }

    /* Barre infos (adresse / horaires / téléphone) : une info par ligne */
    html body .gas-info-bar-inner { flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; }
    html body .gas-ib-sep { display: none; }
    html body .gas-ib-item { font-size: 11px; max-width: calc(100vw - 20px); }
    html body .gas-ib-icon { font-size: 14px !important; }

    /* Horaires : plus de texte coupé. Chaque plage de jours reste entière,
       et les plages se suivent sur la même ligne tant qu'il y a la place */
    html body .gas-ib-horaires {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        align-items: flex-start;
    }
    html body .gas-ib-htext {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 12px;
        text-align: center;
    }
    html body .gas-ib-hgroup { white-space: nowrap; }
    html body .gas-ib-hsep { display: none; }

    /* Cartes produits : prix sur une ligne, bouton sans coupure de mot */
    html body .woocommerce ul.products li.product .woocommerce-Price-amount {
        display: inline !important;
        white-space: nowrap !important;
    }
    html body .woocommerce ul.products li.product .button,
    html body .woocommerce ul.products li.product a.button,
    html body .woocommerce ul.products li.product .add_to_cart_button,
    html body .woocommerce ul.products li.product .custom-choisir-button,
    html body .woocommerce ul.products li.product a[class*="button"],
    html body .woocommerce ul.products li.product a[class*="choisir"] {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        font-size: clamp(0.72rem, 3.2vw, 0.92rem) !important;
        letter-spacing: 0 !important;
        line-height: 1.25 !important;
        padding: 10px 6px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        min-height: 2.6em !important;
    }

    /* Menu déplié (GeneratePress) : fond et liens lisibles */
    html body .main-navigation.toggled .main-nav,
    html body .main-navigation.toggled .inside-navigation,
    html body .main-navigation .main-nav.toggled-on,
    html body .main-navigation .main-nav > ul {
        background-color: var(--gas-mnav-bg, #222222) !important;
    }
    html body .main-navigation.toggled .main-nav ul li a,
    html body .main-navigation .main-nav.toggled-on ul li a,
    html body .main-navigation .main-nav > ul li a {
        color: var(--gas-mnav-text, #ffffff) !important;
        background-color: transparent !important;
    }
    html body .main-navigation.toggled .main-nav ul li a:hover,
    html body .main-navigation .main-nav > ul li a:hover {
        color: var(--gas-mnav-hover, #3498db) !important;
        background-color: var(--gas-mnav-bg-dark, #1a1a1a) !important;
    }
    html body .main-navigation.toggled .main-nav ul ul,
    html body .main-navigation .main-nav > ul ul {
        background-color: var(--gas-mnav-bg-dark, #1a1a1a) !important;
    }
    html body .menu-toggle,
    html body button.menu-toggle {
        color: var(--gas-mnav-text, #ffffff) !important;
        background: transparent !important;
    }

    /* Panier et checkout (WooCommerce Blocks) */
    html body .wc-block-checkout__contact-fields,
    html body .wc-block-checkout__shipping-fields,
    html body .wc-block-checkout__payment-method { padding: 14px !important; border-radius: 12px !important; }
    html body table.wc-block-cart-items thead { display: none !important; }
    html body tr.wc-block-cart-items__row td { display: block !important; border-radius: 0 !important; }
    html body tr.wc-block-cart-items__row td:first-child { border-radius: 12px 12px 0 0 !important; }
    html body tr.wc-block-cart-items__row td:last-child { border-radius: 0 0 12px 12px !important; }
    html body .wc-block-components-order-summary,
    html body .wp-block-woocommerce-checkout-order-summary-block,
    html body .wc-block-order-summary-sidebar { padding: 16px !important; }
    html body .wc-block-components-totals-item { padding: 10px 4px !important; }
    html body .wc-block-components-totals-footer-item { padding-top: 12px !important; }

    /* Mon compte : connexion et inscription empilées (si styles Mon compte actifs) */
    html body.gas-account-styles.woocommerce-account .woocommerce { padding: 12px !important; }
    html body.gas-account-styles #customer_login { display: flex !important; flex-direction: column !important; gap: 16px !important; }
    html body.gas-account-styles .u-column1,
    html body.gas-account-styles .u-column2 { width: 100% !important; float: none !important; margin: 0 !important; padding: 20px !important; }
    html body.gas-account-styles .woocommerce-form-login .woocommerce-Input,
    html body.gas-account-styles .woocommerce-form-register .woocommerce-Input { font-size: 1rem !important; }
}


/* ==========================================================================
   PETIT MOBILE (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {

    /* Image d'en-tête plus basse */
    html body.gas-has-header-img .gas-header-image-container { max-height: 160px !important; }
    html body.gas-has-header-img .gas-header-image {
        min-height: 140px !important;
        max-height: 160px !important;
        object-position: center 30% !important;
    }

    /* Boutons des cartes produits plus compacts */
    html body .woocommerce ul.products li.product .button,
    html body .woocommerce ul.products li.product a.button,
    html body .woocommerce ul.products li.product .add_to_cart_button,
    html body .woocommerce ul.products li.product .custom-choisir-button,
    html body .woocommerce ul.products li.product a[class*="button"],
    html body .woocommerce ul.products li.product a[class*="choisir"] {
        font-size: clamp(0.65rem, 3vw, 0.78rem) !important;
        padding: 9px 4px !important;
        letter-spacing: -0.01em !important;
    }
}