/* =============================================================
   OSESAME — Correctifs responsive mobile (2026-07-10)
   Chargé après toutes les autres feuilles du thème enfant.
   Beaucoup de `!important` : les widgets du plugin
   sesame-image-gallery impriment leur CSS en <style> inline
   depuis render(), donc plus bas dans le DOM que le <head>.
   ============================================================= */

/* -------------------------------------------------------------
   1. En-tête : il occupait 158px de haut sur un écran de 844px
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    header.elementor-location-header .elementor-element-e3f84d4 {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    header.elementor-location-header .elementor-element-e3f84d4 .elementor-heading-title {
        font-size: 13px !important;
        line-height: 1.35 !important;
        letter-spacing: .02em !important;
    }

    header.elementor-location-header .elementor-element-2a7251fb.header-style {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Logo un peu plus compact */
    header.elementor-location-header .elementor-element-2a7251fb img {
        max-height: 46px !important;
        width: auto !important;
    }
}

/* -------------------------------------------------------------
   2. Menu déroulant mobile : fond opaque + cibles tactiles 44px+
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

    header .elementor-nav-menu--dropdown {
        background-color: #fbf8f4 !important;
        box-shadow: 0 20px 34px -22px rgba(58, 42, 32, .55) !important;
        border-top: 1px solid #e7ddd2 !important;
    }

    header .elementor-nav-menu--dropdown a.elementor-item {
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 16px !important;
    }

    /* Le bouton hamburger doit faire au moins 44x44 */
    header .elementor-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* -------------------------------------------------------------
   3. Pages prestation /catering/{slug}/
   La grille du widget "description" restait en 3 colonnes à 375px
   (`.lg\:grid-cols-3` était déclarée HORS media query dans le
   <style> inline du widget) → un mot par ligne.
   ------------------------------------------------------------- */
@media (max-width: 1023px) {

    [data-widget_type="sesame_catering_service_description.default"] .grid {
        display: block !important;
    }

    [data-widget_type="sesame_catering_service_description.default"] .sticky {
        position: static !important;
        top: auto !important;
        margin-top: 32px !important;
    }

    /* La carte "Points Clés" passe sous le texte, pleine largeur */
    [data-widget_type="sesame_catering_service_description.default"] .sticky > * {
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {

    /* Galerie : une colonne, images plus hautes */
    [data-widget_type="sesame_catering_service_gallery.default"] .gallery-grid {
        grid-template-columns: 1fr !important;
    }

    /* Hero : l'image passe au-dessus du texte, pleine largeur */
    [data-widget_type="sesame_catering_service_hero.default"] .bg-cover {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 18px !important;
    }
}

/* -------------------------------------------------------------
   4. Texte trop petit (< 12px) sur mobile
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .ofc-tab-pick,
    .ofc-tab-pick span,
    .ofc-info-ing,
    .ofc-info-ing span,
    .quote-subtitle-text,
    .osesame-category-badge,
    .osesame-subcategory-badge {
        font-size: 12.5px !important;
        line-height: 1.4 !important;
    }
}

/* -------------------------------------------------------------
   5. Boutique : cartes de hauteur égale, cibles tactiles
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .osesame-products-grid {
        align-items: stretch !important;
    }

    .osesame-product-card {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .osesame-product-info {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    /* La description s'aligne sur 2 lignes pour égaliser les cartes */
    .osesame-product-description {
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        min-height: 2.8em;
    }

    .osesame-product-price {
        margin-top: auto !important;
    }

    /* Filtres : cases à cocher de 17px → cibles confortables */
    .osesame-filter-checkbox {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .osesame-filter-label,
    label.osesame-filter-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Liens "En savoir plus" trop bas pour le pouce */
    .sesame-catering-service-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* -------------------------------------------------------------
   6. Composeur de formules
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .ofc-nav {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 14px 16px !important;
    }

    .ofc-nav .ofc-continue,
    .ofc-nav .ofc-add {
        flex: 1 1 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
    }

    .ofc-steps {
        font-size: 11px !important;
    }
}

/* -------------------------------------------------------------
   7. Pied de page : le menu "Liens Rapide" se repliait en
   hamburger (inutilisable) au lieu d'afficher les liens.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

    footer .elementor-menu-toggle {
        display: none !important;
    }

    footer .elementor-nav-menu--dropdown {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-top: 4px !important;
    }

    footer .elementor-nav-menu--dropdown a.elementor-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 0 !important;
        background: transparent !important;
    }
}

/* -------------------------------------------------------------
   8. Pas de défilement horizontal
   ------------------------------------------------------------- */
/* ⚠️ `overflow-x: hidden` sur <html> crée un conteneur de défilement et
   casse `position: fixed` sur iOS Safari (l'en-tête cessait d'être
   collant). `overflow-x: clip` coupe le débordement SANS créer de
   conteneur de défilement : l'en-tête fixe reste fixe. */
html,
body {
    overflow-x: clip;
}

/* -------------------------------------------------------------
   9. Accueil : le hero passait SOUS l'en-tête fixe.
   La règle de décalage est `html body:not(.home)` (l'accueil est
   exclu car son hero a sa propre marge haute… en desktop
   seulement). Sur mobile, le titre était coupé par l'en-tête.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

    html body.home {
        padding-top: var(--osesame-header-h, 140px);
    }
}

/* -------------------------------------------------------------
   10. Collage de la galerie d'accueil : les deux vignettes
   débordent volontairement du cadre (left:-32px / right:-24px).
   Sur mobile le conteneur touche le bord → images rognées.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .sesame-image-gallery {
        padding: 0 6px;
    }

    .sesame-image-gallery .bottom-left-image {
        left: 0 !important;
    }

    .sesame-image-gallery .top-right-image {
        right: 0 !important;
    }

    .sesame-image-gallery .bottom-left-image,
    .sesame-image-gallery .top-right-image {
        width: 126px !important;
        height: 126px !important;
    }
}

/* -------------------------------------------------------------
   11. Carrousel de témoignages : les diapos inactives sont en
   opacity:0 mais décalées de +100px → elles élargissaient la page.
   ------------------------------------------------------------- */
.testimonial-slider {
    overflow: hidden;
}

.testimonial-slider .testimonial-slide {
    max-width: 100%;
}

/* -------------------------------------------------------------
   12. Accueil : la pastille « Élégance et Raffinement » occupait
   toute la largeur, texte collé au filet arrondi.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    html body.home .elementor-element-f031a19 {
        display: flex !important;
        justify-content: center !important;
    }

    html body.home .elementor-element-f031a19 > .elementor-widget-container {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 7px 16px !important;
    }

    html body.home .elementor-element-f031a19 p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
}

/* -------------------------------------------------------------
   13. Collage : les vignettes sont légèrement pivotées, donc leur
   boîte englobante dépasse encore. On les rentre davantage.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .sesame-image-gallery .bottom-left-image {
        left: 16px !important;
    }

    .sesame-image-gallery .top-right-image {
        right: 16px !important;
        left: auto !important;
    }

    .sesame-image-gallery .bottom-left-image,
    .sesame-image-gallery .top-right-image {
        width: 118px !important;
        height: 118px !important;
    }
}

/* -------------------------------------------------------------
   14. Cartes « Nos collections » : le libellé blanc était posé sur
   des photos claires (LES MINIS SALÉS) → illisible. Voile renforcé.
   (Correctif volontairement global : le problème existe aussi en
   desktop.)
   ------------------------------------------------------------- */
.osesame-collection-overlay {
    background: linear-gradient(to top,
            rgba(30, 20, 14, .80) 0%,
            rgba(30, 20, 14, .42) 45%,
            rgba(30, 20, 14, 0) 100%) !important;
}

.osesame-collection-name {
    text-shadow: 0 1px 12px rgba(30, 20, 14, .55);
}

@media (max-width: 767px) {

    .osesame-collection-name {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .osesame-collection-count {
        font-size: 12px !important;
    }
}

/* -------------------------------------------------------------
   15. L'en-tête est `position:fixed` : toute cible d'ancre ou de
   scrollIntoView atterrissait dessous. On réserve sa hauteur.
   ------------------------------------------------------------- */
[id],
.ofc-stage,
.ofc-steps {
    scroll-margin-top: calc(var(--osesame-header-h, 140px) + 16px);
}

/* -------------------------------------------------------------
   16. Fiche produit : la section porte un `margin-top:124px` codé
   en dur (reliquat d'avant le décalage automatique sous l'en-tête
   fixe). Sur mobile cela laissait un grand vide blanc.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

    body.single-product .elementor-element-39365ae {
        margin-top: 24px !important;
    }
}


/* -------------------------------------------------------------
   17. En-tête collant sur mobile
   - On réaffirme `position: fixed` (le thème et Elementor tentent
     tous deux de reprendre la main sur les petits écrans).
   - Au défilement, la barre promo se replie : l'en-tête passe de
     ~130px à ~78px, soit 6% de l'écran rendus au contenu.
     `--osesame-header-h` est mesurée au repos par header-fix.js,
     donc le calage du contenu reste correct.
   ------------------------------------------------------------- */
@media (max-width: 1024px) {

    header.elementor-location-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
    }

    header.elementor-location-header .elementor-element-e3f84d4 {
        overflow: hidden;
        max-height: 64px;
        opacity: 1;
        transition: max-height .26s ease, opacity .18s ease,
            padding-top .26s ease, padding-bottom .26s ease;
    }

    body.is-scrolled header.elementor-location-header .elementor-element-e3f84d4 {
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {

    header.elementor-location-header .elementor-element-e3f84d4 {
        transition: none;
    }
}

/* -------------------------------------------------------------
   18. Boutique : le bouton « Ajouter au panier » est passé sous le
   prix (il masquait la photo). Sur 2 colonnes en 390px, le libellé
   se cassait en deux lignes → on resserre.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .osesame-add-to-cart-btn {
        padding: 11px 8px !important;
        font-size: 12px !important;
        gap: 6px !important;
        white-space: nowrap !important;
        min-height: 44px !important;
    }

    .osesame-add-to-cart-btn svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }
}

/* -------------------------------------------------------------
   19. Mini-panier flottant (widget Elementor a591069) sur mobile
   Elementor l'ancre en `inset-inline: 0 auto` = left:0 par rapport
   à l'icône panier, elle-même tout à droite (x≈320). Le panneau de
   300px partait donc vers la droite et sortait de l'écran.
   → sur mobile on en fait une feuille centrée sous l'en-tête.
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container {
        position: fixed !important;
        top: calc(var(--osesame-header-h, 140px) + 8px) !important;
        left: 12px !important;
        right: 12px !important;
        inset-inline: 12px 12px !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__main {
        width: auto !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        box-shadow: 0 26px 60px -26px rgba(58, 42, 32, .7) !important;
    }

    /* La liste des produits défile si le panier est long */
    .elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__products {
        max-height: 46vh !important;
        overflow-y: auto !important;
    }

    /* Boutons « Voir le panier » / « Commander » : plein pouce */
    .elementor-menu-cart__footer-buttons a {
        min-height: 46px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* -------------------------------------------------------------
   20. Logo un peu plus présent sur mobile (était plafonné à 46px)
   ------------------------------------------------------------- */
@media (max-width: 767px) {

    header.elementor-location-header .elementor-element-2a7251fb img {
        max-height: 60px !important;
    }
}

/* Un transform résiduel (translateX) décalait la feuille : on le neutralise
   et on force la géométrie plein-largeur. */
@media (max-width: 767px) {

    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart .elementor-menu-cart__container {
        transform: none !important;
    }

    .elementor-widget-woocommerce-menu-cart.elementor-menu-cart--cart-type-mini-cart.elementor-menu-cart--shown .elementor-menu-cart__main {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Le logo est contraint par la largeur du widget theme-site-logo (82px),
   pas par max-height. On élargit le widget sur mobile → ~64px de haut. */
@media (max-width: 767px) {

    /* header-fix.css verrouille la HAUTEUR du logo à 44px sur mobile ;
       en jouant sur la largeur on l'étirait. On pilote la hauteur (58px) et
       la largeur suit le ratio. Même spécificité, chargé après header-fix. */
    .elementor-10311 .elementor-element.elementor-element-60eb5642 img {
        height: 58px !important;
        width: auto !important;
        max-width: 150px !important;
        max-height: none !important;
    }

    /* Au défilement (barre promo repliée) le logo se réduit un peu */
    body.is-scrolled .elementor-10311 .elementor-element.elementor-element-60eb5642 img {
        height: 48px !important;
    }
}
