/* Adaptations mobile.
   Le kit Elementor ne déclare aucune taille de police pour les petits écrans :
   un h1 sort à 64 px et un h2 à 40 px sur un téléphone de 375 px de large.
   Les !important de ce fichier sont nécessaires — Elementor déclare ces
   valeurs par élément, à spécificité supérieure à toute règle générique. */

@media (max-width: 767px) {

    /* ---------- Typographie ---------- */
    h1.elementor-heading-title {
        font-size: clamp(26px, 7.5vw, 34px) !important;
        line-height: 1.15 !important;
        /* Évite un mot isolé sur la dernière ligne. */
        text-wrap: balance;
    }

    h2.elementor-heading-title,
    h3.elementor-heading-title {
        font-size: clamp(19px, 5.4vw, 25px) !important;
        line-height: 1.25 !important;
        text-wrap: balance;
    }

    /* h4 et p servent de sous-titres : ils doivent rester au corps du texte. */
    h4.elementor-heading-title,
    p.elementor-heading-title,
    h5.elementor-heading-title,
    h6.elementor-heading-title {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Titres de cartes produit : plus petits que les titres de section. */
    .woocommerce ul.products li.product h2.elementor-heading-title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .elementor-loop-container .e-loop-item h2.elementor-heading-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* ---------- Cibles tactiles ---------- */
    /* 44 px est le minimum confortable au doigt. */
    .elementor-button,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce .checkout-button {
        min-height: 46px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .elementor-nav-menu--dropdown a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* ---------- Fiche produit ---------- */
    .xt-keyspecs {
        grid-template-columns: repeat(2, 1fr);
    }

    .xt-installment {
        padding: 14px;
    }
    .xt-installment__amount {
        font-size: 17px;
    }

    .xt-reassurance {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Le bouton d'ajout occupe toute la largeur, la quantité reste à côté. */
    .woocommerce div.product form.cart {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }
    .woocommerce div.product form.cart .quantity {
        flex: 0 0 auto;
    }
    .woocommerce div.product form.cart button.single_add_to_cart_button {
        flex: 1 1 auto;
    }
    .woocommerce div.product form.cart table.variations,
    .woocommerce div.product form.cart .single_variation_wrap,
    .woocommerce div.product form.cart .xt-swatches,
    .woocommerce div.product form.cart .reset_variations {
        flex: 1 1 100%;
    }

    /* ---------- Panier : le tableau devient une liste de cartes ----------
       Un tableau à cinq colonnes est illisible sous 400 px. WooCommerce
       renseigne data-title sur chaque cellule, on s'en sert comme libellé. */
    .woocommerce-cart table.shop_table.cart,
    .woocommerce-cart table.shop_table.cart tbody,
    .woocommerce-cart table.shop_table.cart tr,
    .woocommerce-cart table.shop_table.cart td {
        display: block;
        width: 100%;
    }

    .woocommerce-cart table.shop_table.cart thead {
        display: none;
    }

    .woocommerce-cart table.shop_table.cart tr.cart_item {
        position: relative;
        margin-bottom: 14px;
        padding: 14px;
        border: 1px solid #e6e6ec;
        border-radius: 12px;
    }

    .woocommerce-cart table.shop_table.cart tr.cart_item td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border: 0;
        text-align: right;
    }

    .woocommerce-cart table.shop_table.cart tr.cart_item td::before {
        content: attr(data-title);
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #6c6c78;
    }

    /* La vignette et la croix de suppression n'ont pas besoin de libellé. */
    .woocommerce-cart table.shop_table.cart td.product-thumbnail,
    .woocommerce-cart table.shop_table.cart td.product-remove {
        display: block;
        text-align: left;
    }
    .woocommerce-cart table.shop_table.cart td.product-thumbnail::before,
    .woocommerce-cart table.shop_table.cart td.product-remove::before {
        content: none;
    }
    .woocommerce-cart table.shop_table.cart td.product-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0;
    }
    .woocommerce-cart table.shop_table.cart td.product-thumbnail img {
        width: 84px;
    }

    .woocommerce-cart table.shop_table.cart td.actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 14px;
    }
    .woocommerce-cart table.shop_table.cart td.actions::before {
        content: none;
    }
    .woocommerce-cart table.shop_table.cart td.actions .button {
        width: 100%;
    }

    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart_totals {
        width: 100% !important;
        float: none !important;
    }

    /* ---------- Paiement : une seule colonne ---------- */
    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #customer_details .col-1,
    .woocommerce-checkout #customer_details .col-2,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout #order_review_heading {
        width: 100% !important;
        float: none !important;
        margin-left: 0;
        margin-right: 0;
    }
    .woocommerce-checkout #order_review {
        margin-top: 22px;
        padding: 18px 16px;
    }
    .woocommerce-checkout #order_review_heading {
        margin-top: 26px;
    }

    /* ---------- Compte client ---------- */
    .woocommerce-account .woocommerce form.login,
    .woocommerce-account .woocommerce form.register {
        padding: 22px 18px;
    }

    /* ---------- Garde-fou contre le débordement latéral ----------
       Une seule ligne trop large fait scroller toute la page de travers. */
    html, body {
        overflow-x: hidden;
    }
    img, video, iframe, table {
        max-width: 100%;
    }
    .woocommerce table.shop_table:not(.cart) {
        display: block;
        overflow-x: auto;
    }
}

/* Écrans très étroits : on resserre encore. */
@media (max-width: 380px) {
    .xt-keyspecs {
        gap: 8px;
    }
    .xt-keyspecs__item {
        padding: 10px 6px;
    }
    .xt-keyspecs__value {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    /* ---------- Logo ----------
       Il était bridé à 155 px et le conteneur flexible le comprimait encore. */
    .elementor-widget-theme-site-logo img,
    .elementor-widget-site-logo img {
        width: 190px !important;
        max-width: 46vw !important;
    }
    .elementor-widget-theme-site-logo,
    .elementor-widget-site-logo {
        flex: 0 0 auto;
    }

    /* ---------- Grille « bento » de la section modèle ----------
       Elle est construite en lignes de 737 px de haut avec des tuiles à 50 %
       imbriquées. Sur téléphone on la déplie en une colonne. Les conteneurs
       porteurs et les tuiles sont traités séparément : les mélanger créait des
       déclarations contradictoires qui écrasaient la hauteur des tuiles. */

    /* Les trois conteneurs porteurs : simple empilement, hauteur libre. */
    .elementor-element-c06639b,
    .elementor-element-8ae4220,
    .elementor-element-aff40af {
        --flex-direction: column !important;
        --min-height: 0 !important;
        --width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        gap: 10px;
    }

    /* Les quatre tuiles visibles : hauteur fixe, texte calé en bas. */
    .elementor-element-4fdc5b9,
    .elementor-element-5fe5a53,
    .elementor-element-bc8db92,
    .elementor-element-2d0932d {
        position: relative;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        --width: 100% !important;
        width: 100% !important;
        /* Hauteur imposee, pas seulement un minimum : la tuile « Pliage » porte
           --flex-grow:0 et --flex-shrink:0 dans Elementor, ce qui laissait sa
           hauteur dependre du parent et rejetait le texte hors du cadre. */
        --min-height: 240px !important;
        min-height: 240px !important;
        height: 240px !important;
        max-height: none !important;
        flex: 0 0 240px !important;
        gap: 6px;
        padding: 16px !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 12px;
        overflow: hidden;
    }

    /* Voile sombre sous le texte : sans lui, le blanc devient illisible dès que
       l'image est claire à cet endroit. */
    .elementor-element-4fdc5b9::before,
    .elementor-element-5fe5a53::before,
    .elementor-element-bc8db92::before,
    .elementor-element-2d0932d::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(to top, rgba(8, 8, 16, .88) 0%, rgba(8, 8, 16, .55) 38%, rgba(8, 8, 16, 0) 78%);
        pointer-events: none;
    }
    .elementor-element-4fdc5b9 > *,
    .elementor-element-5fe5a53 > *,
    .elementor-element-bc8db92 > *,
    .elementor-element-2d0932d > * {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    /* Une seule police et une seule échelle pour les quatre tuiles :
       elles héritaient chacune d'un réglage différent. */
    .elementor-element-4fdc5b9 .elementor-heading-title,
    .elementor-element-5fe5a53 .elementor-heading-title,
    .elementor-element-bc8db92 .elementor-heading-title,
    .elementor-element-2d0932d .elementor-heading-title {
        font-family: "Inter", sans-serif !important;
        color: #fff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    }
    .elementor-element-4fdc5b9 h2.elementor-heading-title,
    .elementor-element-5fe5a53 h2.elementor-heading-title,
    .elementor-element-bc8db92 h2.elementor-heading-title,
    .elementor-element-2d0932d h2.elementor-heading-title {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }
    .elementor-element-4fdc5b9 p.elementor-heading-title,
    .elementor-element-5fe5a53 p.elementor-heading-title,
    .elementor-element-bc8db92 p.elementor-heading-title,
    .elementor-element-2d0932d p.elementor-heading-title {
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }
    .elementor-element-4fdc5b9 .elementor-button,
    .elementor-element-5fe5a53 .elementor-button,
    .elementor-element-bc8db92 .elementor-button,
    .elementor-element-2d0932d .elementor-button {
        align-self: flex-start;
        margin-top: 6px;
        font-size: 13px !important;
        padding: 10px 20px !important;
        min-height: 42px;
    }
}

@media (max-width: 767px) {

    /* ---------- Ordre de la zone d'achat ----------
       La galerie est tout en haut ; caractéristiques et encart Klarna
       s'intercalaient entre elle et les pastilles de couleur. On remonte le
       formulaire juste sous l'image pour que le changement de coloris se voie
       immédiatement, et on renvoie les informations sous le bouton d'achat. */
    .elementor-add-to-cart {
        display: flex;
        flex-direction: column;
    }
    .elementor-add-to-cart form.cart        { order: 1; }
    .elementor-add-to-cart .xt-installment  { order: 2; margin: 18px 0 0; }
    .elementor-add-to-cart .xt-keyspecs     { order: 3; margin: 16px 0 0; }
    .elementor-add-to-cart .xt-reassurance  { order: 4; }
    .elementor-add-to-cart .xt-payments     { order: 5; }
}


@media (max-width: 767px) {
    /* Les pastilles restent compactes : leur zone tactile est large
       horizontalement, inutile de les faire hautes comme un bouton d'achat. */
    .xt-swatch {
        min-height: 38px;
        padding: 7px 12px;
        font-size: 12.5px;
    }
}

@media (max-width: 767px) {
    /* ---------- Titres pivotés des tuiles ----------
       Le titre « Pliage rapide » est pivoté à −90° et positionné en absolu
       avec un décalage négatif : voulu sur grand écran, illisible sur
       téléphone où il se réduit à une colonne de lettres hors cadre.
       On remet tous les enfants de tuile en flux normal. */
    .elementor-element-4fdc5b9 > .elementor-element,
    .elementor-element-5fe5a53 > .elementor-element,
    .elementor-element-bc8db92 > .elementor-element,
    .elementor-element-2d0932d > .elementor-element {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        --e-transform-rotateZ: 0deg !important;
        --e-transform-rotate: 0deg !important;
        --align-self: stretch !important;
        --order: 0 !important;
        align-self: stretch !important;
        order: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        writing-mode: horizontal-tb !important;
        text-align: left !important;
    }
}

/* --- Barre de tri du catalogue ---
   Sur mobile le compteur passe au-dessus et le select occupe toute la largeur :
   c'est la cible tactile principale de la page. */
@media (max-width: 767px) {
    .xt-sort {
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 14px;
    }

    .xt-sort__count,
    .xt-sort__form {
        width: 100%;
    }

    .xt-sort__form {
        gap: 8px;
    }

    .xt-sort__field {
        flex: 1;
    }

    .xt-sort__select {
        width: 100%;
        min-height: 46px;
        font-size: 16px; /* < 16px déclenche le zoom automatique sur iOS */
    }
}