/* text block */
.webtex-homepage-text .wx-text {
    max-width: var(--max-width, 100%);
    padding: 40px 20px;
}

.webtex-homepage-text .wx-text-image {
    display: block;
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    margin: 0 auto 20px;
}

.webtex-homepage-text .wx-text-pretitle {
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.webtex-homepage-text .wx-text-title {
    font-weight: 700;
    margin-bottom: 14px;
}

.webtex-homepage-text .wx-text-body {
    margin-bottom: 18px;
}

/* "Voir plus" / "Voir moins" (hauteur max configurable en BO) : réutilise
   le comportement JS déjà actif site-wide (.st_read_more toggle
   .de_truncated sur le .truncate_block le plus proche, cf theme.js), mais
   avec nos propres règles CSS (hauteur en --wx-text-max-height, valeur
   BO arbitraire) plutôt que les classes truncate_cate_desc_N du thème
   (hauteurs fixes, et leur règle d'expansion ne cible que 4 contextes
   choisis, pas les nôtres).

   Volontairement SANS chevauchement : c'est .st_read_more_box (le texte
   lui-même) qui est tronqué à --wx-text-max-height ; "Voir plus" reste un
   élément normal, affiché juste EN DESSOUS, jamais superposé au texte
   (contrairement au style "fondu en dégradé" du thème, pensé pour des
   hauteurs bien plus grandes que celles utilisées ici). */
/* .truncate_block porte aussi une règle générique du thème
   (position:relative;overflow:hidden) qui s'appliquerait telle quelle à
   .wx-text-body si on ne la redéfinit pas : sans effet visible ici (pas de
   hauteur fixée sur ce conteneur), mais explicitée pour éviter toute
   ambiguïté. La troncature elle-même se fait sur .st_read_more_box. */
.webtex-homepage-text .wx-text-body.truncate_block {
    overflow: visible;
}
.webtex-homepage-text .wx-text-body .st_read_more_box {
    position: relative;
    overflow: hidden;
    max-height: var(--wx-text-max-height);
}
.webtex-homepage-text .wx-text-body.truncate_block.de_truncated .st_read_more_box {
    max-height: none;
}
/* Dégradé décoratif en bas du texte tronqué (fondu vers le blanc) : posé en
   ::after DANS .st_read_more_box (coupé net par son overflow:hidden à la
   ligne de troncature), jamais sur "Voir plus" lui-même qui reste un bloc
   séparé juste en dessous — pas de retour au chevauchement précédent. */
.webtex-homepage-text .wx-text-body .st_read_more_box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.001), #fff 80%);
    pointer-events: none;
}
.webtex-homepage-text .wx-text-body.truncate_block.de_truncated .st_read_more_box::after {
    display: none;
}
.webtex-homepage-text .wx-text-body .st_read_more {
    position: static;
    z-index: auto;
    left: auto;
    right: auto;
    bottom: auto;
    overflow: visible;
    height: auto;
    max-height: none;
    min-height: 0;
    background: none;

    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 18px;
    /* line-height: 1.4; */
    cursor: pointer;
    text-decoration: underline;
}
.webtex-homepage-text .wx-text-body .st_showless_btn {
    display: none;
}
.webtex-homepage-text .wx-text-body.truncate_block.de_truncated .st_showmore_btn {
    display: none;
}
.webtex-homepage-text .wx-text-body.truncate_block.de_truncated .st_showless_btn {
    display: inline;
}

.webtex-homepage-text .wx-text-btn {
    display: inline-block;
    padding: 12px 18px;
    text-decoration: none;
}

/* =========================================================
   WEBTEX HOMEPAGE — BASE
   ========================================================= */

.webtex-homepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.webtex-homepage .link {
    color: #ff4e08;
}

.webtex-homepage .link:hover {
    text-decoration: none;
    border-bottom: 1px solid #ff4e08;
}

.webtex-homepage.nowxswiper .block-custom-footer h3 {
    font-size: 14px;
}

/* =========================================================
   NO CAROUSEL — CUSTOM
   ========================================================= */
.webtex-homepage-nocarousel.custom,
.webtex-homepage-nocarousel.category_image {
    display: grid;
    grid-template-columns: repeat(var(--wxc-columns, 4), 1fr);
    gap: 2px;
}

/* =========================================================
   NO CAROUSEL — PRODUCTS
   ========================================================= */

.webtex-homepage-nocarousel {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    column-gap: 8px;
}

.webtex-homepage-nocarousel.product article {
    margin: 0;
    padding: 0;
    /* padding: 0 8px; pc */
    flex: 1 1 0;
    /* max-width: 288px; pc */
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .webtex-homepage-nocarousel.product article {
        flex: 0 0 calc(50% - 8px);
        max-width: calc(50% - 8px);
    }
}

/* =========================================================
   CAROUSEL — PRODUCTS (Swiper)
   ========================================================= */

.webtex-homepage .webtex-homepage-carousel {
    width: 100%;
    display: block;
    overflow: hidden; /* ne doit pas dépasser */
}

.webtex-homepage .webtex-homepage-carousel .swiper-wrapper {
    flex-wrap: nowrap !important;
}

/* .webtex-homepage-carousel.product .swiper-slide {
    padding: 0 4px;
} */

.webtex-homepage .webtex-homepage-carousel article {
    display: flex;
    justify-content: center;
    padding: 0;
    position: relative;
}

.webtex-homepage .webtex-homepage-carousel article .product-flags {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    pointer-events: none;
}

/* IMPORTANT : .cat-product-miniature n'est PAS la carte produit — c'est la
   classe de l'image de survol (hover), en position:absolute, sans rapport
   avec la mise en page normale. La vraie carte est .pro_outer_box (enfant
   direct de l'article/swiper-slide). Cibler .cat-product-miniature n'a
   donc aucun effet visible sur la taille réelle de la carte. */
.webtex-homepage .webtex-homepage-carousel article .pro_outer_box {
    /* max-width (pas width) : la carte s'adapte à la largeur de slot que
       Swiper calcule (conteneur / "Éléments visibles"), au lieu de la
       forcer à 300px fixe — sinon dès que ce slot calculé est légèrement
       inférieur à 300px, la carte déborde et le dernier élément visible
       se fait rogner. */
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* Mode "Images plein écran" (bord à bord, slidesPerView "auto" côté JS) :
   même mécanisme que le bloc "Personnalisable" (largeur proportionnelle à
   la fenêtre, calculée depuis "Éléments visibles" — rétrécit donc de façon
   fluide comme le slider "Shops"), mais PLAFONNÉ à 334px (taille standard
   de la maquette) : min() prend la plus petite des deux valeurs, donc la
   vignette ne grossit jamais au-delà de 334px même s'il y a moins de
   produits que d'éléments visibles configurés. */
.webtex-homepage.peek-mode .webtex-homepage-carousel article .pro_outer_box {
    width: min(calc(100vw / var(--wx-visible-items, 4)), 334px);
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .webtex-homepage.peek-mode .webtex-homepage-carousel article .pro_outer_box {
        width: 82vw;
    }
}

/* Le thème neutralise son propre plafond sur l'image dès qu'on est dans un
   contexte .wxswiper (.wxswiper .pro_first_box img { max-width: unset }
   dans custom.css, plus spécifique que le plafond de base) : l'image
   grossit alors librement au lieu de suivre la largeur de sa carte, quelle
   que soit la valeur qu'on donne à .pro_outer_box ci-dessus. On la fait
   suivre explicitement, avec assez de spécificité + !important pour
   passer devant cette règle du thème. */
.webtex-homepage.peek-mode .webtex-homepage-carousel .pro_first_box,
.webtex-homepage.peek-mode .webtex-homepage-carousel .pro_first_box img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

.webtex-homepage .webtex-homepage-carousel .stamps {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 8rem 1rem;
    z-index: 1;
}

.webtex-homepage .webtex-homepage-carousel .stamps img {
    width: 25px;
    height: 25px;
    margin: 0.2rem 0;
    z-index: 2;
}

.webtex-homepage .webtex-homepage-carousel h2.type_produit {
    color: #555;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.webtex-homepage .webtex-homepage-carousel h3.type_produit {
    color: #333;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    margin: 0 0 0.3rem 0;
}

/* =========================================================
   FULL IMAGE (bannière full width + overlay + contenu)
   ========================================================= */

.webtex-homepage-fullimage {
    position: relative;
    width: 100vw;
    height: 100%;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
}

.webtex-homepage-fullimage .fullimage {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.webtex-homepage-fullimage .fullimage .separated {
    padding: 0 15px;
}

.webtex-homepage-fullimage .fullimage img {
    display: block;
    width: 100%;
    height: auto;
}

/* Overlay gradient */
.webtex-homepage-fullimage .fullimage:not(.separated)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0) 30%
    );
}

.webtex-homepage-fullimage .fullimage-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 20px 20px;
    z-index: 2;
    text-align: center;
}

.webtex-homepage-fullimage .fullimage-title {
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0 0 10px 0;
}

.webtex-homepage-fullimage .fullimage-text {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 15px;
}

.webtex-homepage-fullimage .view {
    color: #fff;
    font-size: 16px;
    line-height: 2;
    padding-bottom: 10px;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
    text-decoration-color: #fff;
}

/* =========================================================
   FULL IMAGE — WHITE BOX (bloc texte sur image)
   ========================================================= */

.webtex-homepage-fullimage .fullimage:not(.separated) .fullimage-whitebox {
    position: absolute;
    z-index: 3;
    left: var(--wx-x, 50%);
    top: var(--wx-y, 50%);
    width: var(--wx-w, 40%);
    transform: translate(
        calc(var(--wx-x, 50%) * -1),
        calc(var(--wx-y, 50%) * -1)
    );
    text-align: var(--wx-align, center);
    color: var(--wx-text, #ffffff);
    padding: var(--wx-pad-y, 60px) var(--wx-pad-x, 60px);
    background: var(--wx-bg, transparent);
    border: 0;
}

.webtex-homepage-fullimage .fullimage-brand {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.webtex-homepage-fullimage .fullimage-whitebox-title {
    font-size: clamp(18px, 1.4vw, 32px);
    font-weight: 400;
    margin-bottom: 14px;
}

.webtex-homepage-fullimage .fullimage-whitebox-text {
    font-size: clamp(0.8vmin, 1vw, 20px);
    font-weight: 600;
}

/* =========================================================
   CUSTOM BLOCKS (carousel.custom)
   ========================================================= */

.webtex-homepage-carousel.custom a {
    color: #252422;
    text-decoration: none;
}

.webtex-homepage-carousel.custom .block-custom {
    display: block;
    position: relative;
    /* padding-bottom: 2.5rem; */
    max-width: 477px;
    max-height: 700px;
    text-decoration: none;
}

.webtex-homepage-carousel.custom .block-custom img {
    width: 100%;
    height: auto;
}

.webtex-homepage-carousel.custom .block-custom-footer {
    padding-top: 1rem;
    text-align: center;
}

.webtex-homepage-carousel.custom h2 {
    color: #252422;
    font-weight: 700;
    font-size: 1.1rem;
}

.webtex-homepage-carousel.custom h3 {
    color: #252422;
    font-weight: 400;
    font-size: 1rem;
}

.webtex-homepage-carousel.custom .block-custom-footer .lk {
    color: #ff4e08;
    font-weight: 700;
    border-bottom: 1px solid;
}

/* overrides “tri / style” */
.webtex-homepage.wxswiper .swiper-wrapper {
    height: auto;
}

/* =========================================================
   SWIPER CONTROLS (progressbar + chevrons)
   ========================================================= */

.webtex-homepage .webtex-swiper-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 18px;
}

/* Progressbar wrapper */
.webtex-homepage .webtex-swiper-controls .swiper-pagination,
.webtex-homepage
    .webtex-swiper-controls
    .swiper-pagination.swiper-pagination-progressbar {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 4px !important;
    background: #d9d9d9 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

/* Fill visible */
.webtex-homepage .webtex-swiper-controls .swiper-pagination-progressbar-fill {
    position: relative !important;
    display: block !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: #000 !important;
    transform-origin: left center !important;
    z-index: 2 !important;
}

/* Nav */
.webtex-homepage .webtex-swiper-controls .swiper-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 32px;
    padding-right: 20px;
    /* margin-bottom: 40px; */
}

/* buttons reset */
.webtex-homepage .webtex-swiper-controls .swiper-button-prev,
.webtex-homepage .webtex-swiper-controls .swiper-button-next {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #000 !important;
}

.webtex-homepage .webtex-swiper-controls .swiper-button-prev::after,
.webtex-homepage .webtex-swiper-controls .swiper-button-next::after {
    display: none !important;
    content: none !important;
}

.webtex-homepage .webtex-swiper-controls .swiper-button-prev svg {
    transform: rotate(180deg);
}

.webtex-homepage .webtex-swiper-controls .swiper-button-disabled,
.webtex-homepage.wxswiper .webtex-swiper-controls .swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Option: si tu veux réactiver les ::after Swiper dans wxswiper */
.webtex-homepage.wxswiper .webtex-swiper-controls .swiper-button-prev::after,
.webtex-homepage.wxswiper .webtex-swiper-controls .swiper-button-next::after {
    display: inline-block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700;
}

/* =========================================================
   SECTIONS SPECIFIQUES (IDs)
   ========================================================= */

#elegance-cardin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 0;
}

#ec-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 80px;
}

/* Block 1 custom */
.webtex-homepage {
    align-items: unset;
}

.webtex-homepage h2 {
    /* margin-bottom: 32px; */
    font-size: 56px;
    font-weight: 800;
}

.webtex-homepage .section-header {
    text-align: center;
}

@media(max-width: 768px)
{
    .webtex-homepage .section-header {
        text-align: left;
        padding-left: 0!important;
    }
}

.webtex-homepage .section-header .section-description {
    max-width: 800px;
    margin: 8px auto 24px;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* Avec un lien "Voir tout" : titre en pleine largeur, puis description
   (gauche) + lien (droite) sur une même ligne en dessous — au lieu du
   bloc centré par défaut ci-dessus. */
.webtex-homepage .section-header.has-see-all {
    text-align: left;
}

.webtex-homepage .section-header.has-see-all .section-header-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

.webtex-homepage .section-header.has-see-all .section-description {
    max-width: none;
    margin: 8px 0 0;
    flex: 1 1 auto;
}

.webtex-homepage .section-see-all {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: inherit;
}

/* Sur mobile : lien "Voir tout" sous la description, pas à côté. */
@media (max-width: 767px) {
    .webtex-homepage .section-header.has-see-all .section-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* lk style override */
.webtex-homepage.nowxswiper .block-custom-footer .lk,
.webtex-homepage-carousel.custom .block-custom-footer .lk,
.webtex-homepage-nocarousel.custom .block-custom-footer .lk {
    color: #000;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    line-height: 2;
    text-underline-offset: 4px;
    border-bottom: 0;
}

/* .webtex-homepage .custom .block-custom img {
    padding-bottom: 10px;
} */

.webtex-homepage .custom .block-custom-footer {
    text-align: left;
    padding: 8px;
}

.webtex-homepage .custom .block-custom-footer h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.webtex-homepage .custom .block-custom-footer h3 {
    font-size: 14px;
}

/* .webtex-homepage#block-3 {
    padding: 40px 0;
} */

.webtex-homepage-carousel.custom h2 {
    font-size: 16px;
    color: #000;
    font-weight: 500;
}

/* =========================================================
   CUSTOM BLOCKS — STYLE VARIANTS (below / overlay)
   ========================================================= */

.webtex-homepage .block-custom {
    position: relative;
}

/* .block-custom-image encadre strictement l'image (+ icône de coin), quel
   que soit le style (texte en dessous ou sur l'image) : le dégradé et
   l'icône de coin se positionnent par rapport à l'image seule, jamais
   par rapport au bloc titre/texte qui peut être en dessous. */
.webtex-homepage .block-custom-image {
    position: relative;
}

/* Un <img> est inline par défaut : ça laisse ~4px d'espace sous l'image
   (whitespace baseline) et décale tout ce qui est positionné en bottom:0. */
.webtex-homepage .block-custom img,
.webtex-homepage .block-custom-image img {
    display: block;
}

/* Type "Catégorie / Image" : image ronde + légende centrée en dessous
   (maquette "Les essentiels pour finir le look"), au lieu du style "carte"
   par défaut du type "Personnalisable". */
.webtex-homepage.category_image .block-custom {
    text-align: center;
}
.webtex-homepage.category_image .block-custom-image {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    max-width: 200px;
    margin: 0 auto;
}
.webtex-homepage.category_image .block-custom-image img:not(.block-custom-corner) {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -o-object-fit: cover;
       object-fit: cover;
}
/* :not(.style-overlay) : en style "Texte sur l'image", .block-custom-footer
   doit garder le position:absolute du style-overlay (cf plus bas) pour que
   "Position du texte sur l'image" (bottom/centré) continue de fonctionner —
   sinon cette règle (position:static) s'appliquait quel que soit le style,
   empêchant tout affichage en overlay pour ce type. */
.webtex-homepage.category_image:not(.style-overlay) .block-custom-footer {
    position: static;
    text-align: center;
    padding: 12px 0 0;
}
.webtex-homepage.category_image .block-custom-footer h2 {
    font-size: 16px;
}

.webtex-homepage.style-overlay .block-custom-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
    text-align: center;
    z-index: 2;
}

.webtex-homepage.style-overlay .block-custom-footer h2,
.webtex-homepage.style-overlay .block-custom-footer h3 {
    color: #fff;
}

.webtex-homepage.style-overlay .block-custom-footer .lk {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 28px;
    border: 1px solid #fff;
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* Contenu centré sur l'image plutôt qu'en bas, par élément */
.webtex-homepage.style-overlay .block-custom.content-center .block-custom-footer {
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Dégradé sombre bas d'image : indépendant du style (dessous / sur l'image),
   activable par élément — utile même sans texte, purement décoratif. */
.block-custom-image.has-gradient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* =========================================================
   CUSTOM BLOCKS — CORNER ICON (uploaded per item)
   ========================================================= */

.block-custom-corner {
    position: absolute;
    width: 32px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}

.block-custom-corner.corner-top-left {
    top: 16px;
    left: 16px;
}

.block-custom-corner.corner-top-right {
    top: 16px;
    right: 16px;
}

.block-custom-corner.corner-bottom-left {
    bottom: 16px;
    left: 16px;
}

.block-custom-corner.corner-bottom-right {
    bottom: 16px;
    right: 16px;
}

/* =========================================================
   CUSTOM BLOCKS — PEEK MODE (plein écran, bord du suivant visible)
   Slides en largeur "auto" : chaque image garde ses proportions
   d'origine (hauteur fixe, largeur calculée), sans recadrage ni
   déformation. Autant d'images que la place le permet, la dernière
   pouvant être coupée par le bord de l'écran.
   ========================================================= */

.webtex-homepage.peek-mode {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.webtex-homepage.peek-mode .swiper-slide {
    width: auto;
}

.webtex-homepage.peek-mode .block-custom,
.webtex-homepage.peek-mode .block-custom-image {
    display: inline-block;
    width: auto;
    max-width: none;
    max-height: none;
}

/* Hauteur calculée à partir du nombre d'"Éléments visibles" configuré en
   BO (--wx-visible-items, posé en inline-style depuis le tpl) plutôt qu'une
   hauteur fixe en vh : chaque image occupe alors une fraction FIXE de la
   largeur d'écran (~100vw / N), ratio d'aspect ~0.68 (477x700, format
   utilisé partout sur ce site). Résultat : le nombre d'images nécessaires
   pour remplir l'écran reste constant quelle que soit sa largeur (plus de
   vide béant sur très grand écran), et les images ne sont plus disproportionnées
   par rapport à ce qui a été réglé en BO. */
.webtex-homepage.peek-mode .block-custom-image img:not(.block-custom-corner) {
    width: auto;
    height: calc(100vw / var(--wx-visible-items, 4) / 0.68);
    max-width: none;
    max-height: none;
}

/* Type "Catégorie / Image" en mode "Images plein écran" : la formule
   ci-dessus (calc basé sur 100vw) suppose des images portrait (ratio 0.68,
   477x700) ET vise à remplir tout l'écran — inadapté aux tuiles rondes de
   ce type, pensées pour une taille FIXE (maquette : cercle 170px, tuile
   ~240px), pas proportionnelle à la largeur d'écran (ce qui causait un
   débordement/rognage sur les bords dès que "Éléments visibles" était
   petit sur un grand écran). Le rang de tuiles reste centré par
   .webtex-homepage-nocarousel (justify-content:center). */
/* La tuile (cercle) reste TOUJOURS à taille fixe (170px), mais la SLIDE qui
   la contient garde la largeur "100vw / Éléments visibles" (comme les
   blocs "Personnalisable" portrait ci-dessus) : sans ça, un slide de
   largeur "auto" (règle générale ci-dessus) se cale sur le contenu réel
   (~170px + texte), donc N slides tiennent presque toujours dans l'écran
   sans dépasser — aucun swipe possible même si "Éléments visibles" < le
   nombre réel d'éléments. Cette largeur de slide plus grande que la tuile
   ne se voit pas : la tuile reste centrée dedans (margin:0 auto ci-dessous).*/
/* Desktop uniquement (cf. règle mobile dédiée, 82vw/~1.2 tuile, dans le
   @media (max-width:767px) plus bas) : "Éléments visibles" n'a de sens que
   pour une largeur desktop — sur mobile, même 1 seule valeur de ce champ
   (souvent 4-5) donnerait des tuiles minuscules (100vw/5 ≈ 20vw) au lieu du
   ~1.2 tuile visible attendu (maquette mobile). */
@media (min-width: 768px) {
    .webtex-homepage.peek-mode.category_image .swiper-slide {
        width: calc(100vw / var(--wx-visible-items, 4));
    }
}

/* Le bord-à-bord (100vw) colle sinon le premier/dernier élément pile au
   bord de l'écran : son titre (centré sous la tuile) déborde alors hors
   viewport côté gauche/droite et devient illisible. Padding sur le
   conteneur (swiper OU grille nocarousel) plutôt que sur les tuiles
   elles-mêmes : la valeur ci-dessous a un box-sizing:border-box, l'inset
   ne réduit donc pas la largeur de la zone de swipe/grid, seulement la
   position de départ. Même valeur que .section-header/.webtex-swiper-controls
   ci-dessus, pour un alignement visuel cohérent. */
.webtex-homepage.peek-mode.category_image .webtex-homepage-carousel,
.webtex-homepage.peek-mode.category_image .webtex-homepage-nocarousel {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* .block-custom est en display:inline-block (règle générale plus haut),
   aligné à GAUCHE par défaut dans sa slide — invisible pour les autres
   types (slide "auto" = toujours exactement la largeur du contenu), mais
   ici la slide est volontairement plus large que la tuile (170px) pour
   forcer le swipe (cf. commentaires ci-dessus) : sans ce centrage, la
   tuile colle au bord gauche de la slide au lieu d'être centrée dedans. */
.webtex-homepage.peek-mode.category_image .swiper-slide {
    text-align: center;
}

/* La règle générale plus haut (.webtex-homepage.peek-mode .section-header,
   .webtex-swiper-controls) donne aussi ce padding à la barre de nav/pagination
   — correct pour les autres types de bloc, mais ici le rail de tuiles a
   maintenant SON PROPRE padding (juste au-dessus) : cumulé avec celui de
   .webtex-swiper-controls, la barre de progression semblait trop courte,
   décalée par rapport aux tuiles. Titre/description (.section-header) gardent
   leur padding, seule la barre de nav est concernée ici. */
.webtex-homepage.peek-mode.category_image .webtex-swiper-controls {
    padding-left: 0;
    padding-right: 0;
}

.webtex-homepage.peek-mode.category_image .block-custom-image {
    width: 170px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}
.webtex-homepage.peek-mode.category_image .block-custom-image img:not(.block-custom-corner) {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.webtex-homepage.peek-mode .section-header,
.webtex-homepage.peek-mode .webtex-swiper-controls {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* Sur mobile, une hauteur fixe en vh ne laisse quasi plus de place pour
   le "bord suivant" (l'image en fait quasi toute la largeur de l'écran).
   On passe donc en largeur pilotée (~82% de l'écran, soit ~1.2 image
   visible) avec hauteur auto : les proportions restent respectées,
   seule la largeur change par rapport au mode desktop. */
@media (max-width: 767px) {
    .webtex-homepage.peek-mode .block-custom-image {
        width: 82vw;
    }

    /* :not(.block-custom-corner) indispensable ici : sans lui cette règle a
       une spécificité plus faible que la formule desktop (qui l'a) et perd
       face à elle malgré la media query, l'icône de coin héritant sinon
       width:100% en plus. */
    .webtex-homepage.peek-mode .block-custom-image img:not(.block-custom-corner) {
        width: 100%;
        height: auto;
    }

    /* Type "Catégorie / Image" : même principe que ci-dessus (~1.2 tuile
       visible), mais la SLIDE doit garder une largeur explicite (pas
       "auto") pour forcer le swipe même quand les tuiles tiennent toutes
       (cf. commentaire desktop plus haut). */
    .webtex-homepage.peek-mode.category_image .swiper-slide {
        width: 82vw;
    }

    /* Le cercle reste fixe à 170px sur desktop (maquette), mais centré tel
       quel dans une slide de 82vw sur mobile, il devient minuscule au
       milieu d'une grande zone vide : le "aperçu" du produit suivant ne
       montre alors que du vide, pas sa tuile (plus de sensation de
       "1.2 produit visible"). Sur mobile, le cercle est donc agrandi pour
       occuper l'essentiel de sa slide (comme les blocs "Personnalisable"
       portrait ci-dessus, dont l'image fait ~100% de la largeur de la
       slide) : il reste centré, mais un bord du produit suivant redevient
       visible dans l'espace restant. */
    .webtex-homepage.peek-mode.category_image .block-custom-image {
        width: 68vw;
    }
}

/* "Pas de slider sur desktop" (grille CSS statique, .desktop-static) : les
   règles peek-mode ci-dessus supposent un contexte swiper-slide
   (display:inline-block, largeur "auto", hauteur calculée depuis
   --wx-visible-items qui n'existe pas ici puisqu'il n'y a pas de swiper) —
   cassé dans une grille où chaque item doit simplement remplir sa colonne.
   Plus spécifique que les règles peek-mode ci-dessus (3 classes d'ancêtre
   contre 2), donc les remplace correctement pour ce contexte précis. */
.webtex-homepage.peek-mode .webtex-homepage-nocarousel.desktop-static .block-custom,
.webtex-homepage.peek-mode .webtex-homepage-nocarousel.desktop-static .block-custom-image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
}
.webtex-homepage.peek-mode .webtex-homepage-nocarousel.desktop-static .block-custom-image img:not(.block-custom-corner) {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
}



/* =========================================================
   PEEK MODE — STYLE "FEATURED"
   Slides espacées, image active mise en avant (agrandie + ombre).
   ========================================================= */

/* IMPORTANT : le thème pose `overflow:hidden` sur .st-content (wrapper de
   très haut niveau utilisé par le menu off-canvas, dans theme.css) — un
   ancêtre qu'on ne peut pas toucher sans risquer de casser ce menu.
   transform:scale() ne compte pas dans la mise en page normale, donc tout
   débordement qu'il crée est rogné par cet ancêtre quoi qu'on fasse. */
.webtex-homepage.peek-mode.peek-featured .webtex-homepage-carousel {
    overflow-x: hidden;
}

/* Décale tout le rail d'une demi-largeur d'image vers la gauche : sans
   centeredSlides (retiré, cf home.js), le défilement démarre "flush" à
   gauche et ne montre plus qu'une demi-image que sur le bord droit. Ce
   décalage, purement CSS (indépendant de Swiper et de sa navigation),
   révèle une demi-image de chaque côté en permanence, quelle que soit la
   position de défilement et quel que soit N. */
.webtex-homepage.peek-mode.peek-featured .swiper-wrapper {
    margin-left: calc(-0.5 * (100vw / var(--wx-visible-items, 4)));
}

/* .block-custom-image a une hauteur FIXE (celle de la taille "agrandie")
   POUR TOUTES LES SLIDES, pas seulement l'active — évite le rebond
   vertical. La LARGEUR reste "auto" (calée sur l'image réellement
   affichée) : la fixer aussi à la taille agrandie créait un vide visible
   autour de chaque image non-active (centrée dans une boîte ~15% plus
   large qu'elle), donnant l'impression d'un grand espacement entre les
   images alors que spaceBetween est bien à 2px. */
.webtex-homepage.peek-mode.peek-featured .block-custom-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(100vw / var(--wx-visible-items, 4) / 0.68 * 1.15);
}

.webtex-homepage.peek-mode.peek-featured .block-custom-image img:not(.block-custom-corner) {
    height: calc(100vw / var(--wx-visible-items, 4) / 0.68);
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.webtex-homepage.peek-mode.peek-featured .wx-zoom-active .block-custom-image img:not(.block-custom-corner) {
    /* Remplit tout le conteneur fixe ci-dessus : c'est là qu'est le zoom. */
    height: 100%;
}

.webtex-homepage.peek-mode.peek-featured .wx-zoom-active .block-custom-image {
    /* Pas de décalage vertical : un halo neutre autour de l'image, pas une
       ombre plus marquée en bas qu'ailleurs. */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Style "Texte en dessous de l'image" : plafonne la hauteur du texte
   (titre + description + bouton peuvent varier en longueur) pour un rendu
   prévisible d'une slide à l'autre. */
.webtex-homepage.style-below.peek-mode.peek-featured .block-custom-footer {
    max-height: 160px;
    overflow: hidden;
}

/* Sur mobile, le style "Mis en avant" est neutralisé : même rendu que le
   style "Simple" (peek basique ~1.2 image, sans zoom ni ombre). Le JS ne
   configure déjà plus centeredSlides sur mobile ; ceci couvre aussi la
   partie purement visuelle (CSS) pour rester cohérent dans tous les cas. */
@media (max-width: 767px) {
    .webtex-homepage.peek-mode.peek-featured .block-custom-image {
        display: inline-block;
        height: auto;
        width: 82vw;
    }

    .webtex-homepage.peek-mode.peek-featured .block-custom-image img:not(.block-custom-corner),
    .webtex-homepage.peek-mode.peek-featured .wx-zoom-active .block-custom-image img:not(.block-custom-corner) {
        width: 100%;
        height: auto;
    }

    .webtex-homepage.peek-mode.peek-featured .wx-zoom-active .block-custom-image {
        box-shadow: none;
    }
}

/* Icône de coin : taille fixe, jamais affectée par les hauteurs des slides
   voisines (peek-mode, featured ou non). */
.webtex-homepage-carousel.custom .block-custom .block-custom-corner {
    width: 60px;
    height: auto !important;
}

/* Centre l'agrandissement vertical de la slide active : sans ça, les
   slides s'alignent par le haut et la hauteur en plus ne se voit qu'en
   bas (comportement flex par défaut). */
.webtex-homepage.peek-mode .swiper-wrapper {
    align-items: center;
}

/* =========================================================
   OPTION "COINS ARRONDIS" — s'applique à toutes les images du
   bloc, quel que soit le style (dessous / sur l'image / peek).
   ========================================================= */

/* Sur l'<img> elle-même, pas sur .block-custom-image : en style "Mis en
   avant", ce conteneur est plus grand que l'image quand elle n'est pas
   active (pour laisser la place au zoom) — un arrondi posé dessus ne
   "touchait" donc plus le bord réel de l'image, plus petite et centrée
   à l'intérieur. */
.webtex-homepage.rounded-corners .block-custom-image img:not(.block-custom-corner) {
    border-radius: 8px;
}

.webtex-homepage-fullimage .fullimage-pretitle {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 12px;
    text-transform: uppercase;
    opacity: 0.95;
}

.webtex-homepage-fullimage .fullimage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.webtex-homepage-fullimage .fullimage-whitebox .fullimage-pretitle,
.webtex-homepage-fullimage .fullimage-whitebox .fullimage-whitebox-title,
.webtex-homepage-fullimage .fullimage-whitebox .fullimage-whitebox-text {
    color: var(--wx-text, #000);
}

.webtex-homepage-fullimage .fullimage-whitebox.has-border {
    border: 1px solid var(--wx-border, #000);
}

.webtex-homepage-fullimage .fullimage-media-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* =========================================================
   BLOC "MARQUES" (proxy wxscrollbrand)
   ========================================================= */

/* Le CSS de wxscrollbrand (#marques-products { flex: 0 0 100%; }) a été
   conçu pour un parent flex en ligne (ou pas flex du tout). Ici il est
   imbriqué dans .webtex-homepage, qui est en flex-direction:column — dans
   ce contexte, flex:0 0 100% s'applique à la hauteur (axe principal),
   pas à la largeur, ce qui cassait le calcul de largeur que fait Swiper
   à l'intérieur (#bloc_marques). On neutralise ce flex-basis hérité et on
   redonne une largeur explicite. */
.webtex-homepage.brands #marques-products {
    flex: 0 0 auto;
    width: 100%;
}

.webtex-homepage.brands{
    padding: 40px 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
    .webtex-homepage {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
    }

    .webtex-homepage-nocarousel.product {
        flex-wrap: wrap;
    }

    .webtex-homepage .maxwidth {
        padding: 0 15px;
    }

    /* re-show arrows on mobile (selon ton besoin) */
    .webtex-homepage .webtex-homepage-carousel .swiper-button-prev,
    .webtex-homepage .webtex-homepage-carousel .swiper-button-next {
        display: block !important;
    }

    .webtex-homepage .webtex-homepage-carousel .swiper-pagination {
        display: block;
    }

    /* custom image blocks */
    .webtex-homepage .img-block {
        width: 50%;
    }

    .webtex-homepage .img-right {
        padding-right: 1px;
    }

    .webtex-homepage .img-left {
        padding-left: 1px;
    }

    /* .webtex-homepage .img-block img {
        padding-bottom: 12px;
    } */

    .webtex-homepage .img-block .block-custom-footer {
        padding-bottom: 20px;
    }

    .webtex-homepage.nowxswiper .block-custom-footer {
        padding: 8px 8px 30px 8px;
    }
    .webtex-homepage.nowxswiper .block-custom-footer h2 {
        padding-bottom: 8px;
    }

    .webtex-homepage .img-block .block-custom-footer h2 {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin: 0;
    }

    .webtex-homepage-fullimage .fullimage-whitebox .fullimage-pretitle,
    .webtex-homepage-fullimage .fullimage-whitebox .fullimage-whitebox-title,
    .webtex-homepage-fullimage .fullimage-whitebox .fullimage-whitebox-text {
        color: var(--wx-text-mobile, var(--wx-text, #fff));
    }

    /* Fullimage text scaling */
    .webtex-homepage-fullimage .fullimage-whitebox-title {
        font-size: 1.5rem;
    }

    .webtex-homepage-fullimage .fullimage-whitebox-text {
        font-size: 0.875rem;
    }

    /* padding image (desktop vs index) */
    .webtex-homepage-fullimage .fullimage img {
        padding: 20px 20px 0 20px;
    }

    #index .webtex-homepage-fullimage .fullimage img {
        /* padding: 20px 0 0 0; */
        padding: 0;
    }

    /* whitebox mobile frame text */
    .webtex-homepage-fullimage .fullimage .fullimage-whitebox {
        padding: 40px 20px;
        text-align: var(--wx-align, center);
        color: var(--wx-text-mobile, var(--wx-text, #fff));
        width: 100%;
    }

    /* whitebox mobile frame text separated */
    .webtex-homepage-fullimage .fullimage.separated .fullimage-whitebox {
        /* padding: 60px 20px 0 20px; */
        padding: 40px 20px;
        text-align: var(--wx-align, center);
        position: relative;
    }

    /* block-specific tweaks */
    .webtex-homepage h2 {
        font-size: 24px;
        margin: 12px 0;
        text-align: left;
    }

    .webtex-homepage#block-3 {
        padding: 0;
    }

    .webtex-homepage-nocarousel.product article {
        padding: 0 18px;
    }

    .webtex-homepage .webtex-swiper-controls {
        margin-top: 14px;
    }

    .webtex-homepage-fullimage .fullimage-whitebox-title {
        font-size: 24px;
    }

    .webtex-homepage-fullimage .fullimage-whitebox-text {
        font-size: 14px;
    }
}

/* =========================================================
   BLOC "MIX IMAGE + SLIDER"
   Image fixe (colonne gauche ou droite) + slider produit contenu
   (pas bord à bord comme le mode "Images plein écran" — juste un
   slidesPerView "auto" avec des vignettes à taille fixe, le "bord
   suivant" apparaît naturellement dès que le contenu déborde de sa
   colonne).
   ========================================================= */

/* Étendu bord à bord comme les autres blocs "peek" (ex. "La sélection de
   l'été") : la section déborde en pleine largeur du viewport, avec un
   padding gauche/droite repoussant le contenu au niveau de la marge
   habituelle du site — seul le slider (sans padding droit) peut ensuite
   déborder/"peek" jusqu'au bord droit de l'écran. */
.webtex-homepage.mixed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.webtex-homepage.mixed .section-header {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* "Bordure sur mobile" (option BO, mixed_mobile_border) : reproduit
   exactement le padding que le thème applique génériquement aux blocs
   "wxswiper" sur mobile/tablette (@media max-width:1024px,
   .webtex-homepage.wxswiper { padding: 40px 0 0 20px !important; } dans
   custom.css) — que les blocs "mixed" n'ont jamais eu puisqu'ils n'ont pas
   la classe "wxswiper". Optionnel via le BO car ce module est réutilisé sur
   d'autres sites dont le thème n'a pas forcément cette convention. */
@media (max-width: 1024px) {
    .webtex-homepage.mixed.mobile-border {
        padding: 40px 0 0 20px !important;
    }

    /* Le padding-left de la section (20px, ci-dessus) et celui du
       .section-header / .mixed-row (20px chacun, plus haut/bas dans ce
       fichier) s'additionnaient sinon : la section fournit déjà l'inset
       gauche, ses enfants n'en ont plus besoin quand l'option est active. */
    .webtex-homepage.mixed.mobile-border .section-header {
        padding-left: 0;
        padding-right: 0;
    }

    .webtex-homepage.mixed.mobile-border .mixed-row,
    .webtex-homepage.mixed.mobile-border.mixed-right .mixed-row {
        padding-left: 0;
        padding-right: 0;
    }
}

.webtex-homepage.mixed .mixed-row {
    display: flex;
    /* "center" (pas "stretch") : l'image (hauteur plafonnée à 659px) et le
       slider (hauteur naturelle de ses cartes produit, généralement plus
       courte) se centrent l'un par rapport à l'autre au lieu que le slider
       soit étiré à la hauteur de l'image. */
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
}

.webtex-homepage.mixed.mixed-right .mixed-row {
    padding-left: 0;
    padding-right: 20px;
}

.webtex-homepage.mixed.mixed-right .mixed-row {
    flex-direction: row-reverse;
}

.webtex-homepage.mixed .mixed-image {
    flex: 0 0 34%;
    /* Jamais plus grande que 542x659 (taille maquette), même sur très grand
       écran où 34% de la largeur dépasserait cette taille. */
    max-width: min(34%, 542px);
}

.webtex-homepage.mixed .mixed-image a {
    display: block;
    width: 100%;
}

.webtex-homepage.mixed .mixed-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 542px;
    max-height: 659px;
    object-fit: cover;
}

.webtex-homepage.mixed .mixed-slider-wrap {
    flex: 1 1 auto;
    /* min-width:0 indispensable dans un flex item contenant un carrousel :
       sinon le carrousel refuse de se contenir sous sa largeur de contenu
       "naturelle" et déborde de sa colonne au lieu de defiler. */
    min-width: 0;
    position: relative;
}

/* Les flèches/barre de progression du slider ne doivent pas compter dans le
   centrage vertical par rapport à l'image (sinon leur hauteur pousse les
   produits vers le haut) : sorties du flux normal, elles se placent juste
   sous le slider sans influencer la hauteur prise en compte par
   align-items:center sur .mixed-row. Desktop uniquement (cf. media query
   plus bas, qui les remet en flux normal sur mobile). */
@media (min-width: 768px) {
    /* Les contrôles sont désormais un frère du .swiper dans le template
       (plus un enfant), donc plus besoin de toucher à l'overflow du
       carrousel : la tentative précédente (overflow-x:hidden +
       overflow-y:visible) provoquait un scroll vertical indésirable —
       un axe non-"visible" force l'autre à "auto" au lieu de "visible"
       selon la spec CSS overflow, créant une zone scrollable. */
    .webtex-homepage.mixed .webtex-swiper-controls {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 16px;
    }
}

/* Indispensable pour slidesPerView:"auto" (comme les autres carrousels en
   mode "peek") : sans ça .swiper-slide garde le width:100% par défaut de
   Swiper, chaque diapositive prend alors toute la largeur du conteneur et
   un seul produit s'affiche à la fois au lieu d'autant que la place le permet. */
.webtex-homepage.mixed .mixed-slider .swiper-slide {
    width: auto;
}

/* Le bloc "mixed" (image + slider) doit toujours avoir l'en-tête en pleine
   largeur, titre + description alignés à gauche et lien "Voir tout" (s'il
   existe) aligné à droite sur la même ligne que la description — comme
   "La sélection de l'été" (type Catégorie). Contrairement au style par
   défaut (centré, 640px max), ce n'est pas conditionné à la présence du
   lien "Voir tout" : même sans lien, un bloc "mixed" reste en pleine
   largeur / aligné à gauche. */
.webtex-homepage.mixed .section-header {
    text-align: left;
    width: 100%;
}

.webtex-homepage.wxswiper .section-header .section-header-bottom,
.webtex-homepage.mixed .section-header .section-header-bottom,
.webtex-homepage.links .section-header .section-header-bottom {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between !important;
    gap: 40px;
    width: 100%;
    /* Espace avant l'image/slider (pas sur .section-description : sinon le
       lien "Voir tout", aligné en baseline à côté, ne pousse pas le
       contenu suivant de la même façon selon qu'il y a un lien ou non). */
    margin-bottom: 40px;
}

/* Sans description, .section-header-bottom ne contient plus que le lien
   "Voir tout" : avec un seul enfant, justify-content:space-between
   l'aligne au début (flex-start = gauche), pas à droite — il faut donc
   flex-end dans ce cas précis. Spécificité égale à la règle ci-dessus (même
   sélecteurs + :has()) pour être sûr de la remplacer, peu importe l'ordre
   de chargement. */
.webtex-homepage.wxswiper .section-header .section-header-bottom:not(:has(.section-description)),
.webtex-homepage.mixed .section-header .section-header-bottom:not(:has(.section-description)),
.webtex-homepage.links .section-header .section-header-bottom:not(:has(.section-description)) {
    justify-content: flex-end !important;
}

.webtex-homepage.mixed .section-header .section-description,
.webtex-homepage.links .section-header .section-description {
    max-width: none;
    margin: 8px 0 0;
    flex: 1 1 auto;
}

.webtex-homepage.mixed .section-header .section-see-all,
.webtex-homepage.links .section-header .section-see-all {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .webtex-homepage.mixed .section-header .section-header-bottom,
    .webtex-homepage.links .section-header .section-header-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 100px;
    }
}

/* Même correctif que pour "La sélection de l'été" : .cat-product-miniature
   est l'image de survol (hors flux), la vraie carte est .pro_outer_box.
   Largeur fixe (334px, la taille standard de la maquette) plutôt que
   calculée depuis la largeur de la colonne : slidesPerView "auto" affiche
   alors naturellement autant de vignettes que la colonne le permet, avec
   le "bord suivant" qui dépasse dès qu'il y a plus de contenu que de
   place. */
.webtex-homepage.mixed .mixed-slider .pro_outer_box {
    width: 334px;
    max-width: 100%;
    height: auto;
}

.webtex-homepage.mixed .mixed-slider .pro_first_box,
.webtex-homepage.mixed .mixed-slider .pro_first_box img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

@media (max-width: 767px) {
    /* Sur mobile l'image reste bord à bord (comme le reste du système
       mobile existant, qu'on ne touche pas) : le padding desktop qui aligne
       l'image sur la marge du header n'a plus lieu d'être une fois la ligne
       empilée en colonne. */
    .webtex-homepage.mixed .mixed-row,
    .webtex-homepage.mixed.mixed-right .mixed-row {
        flex-direction: column;
        /* align-items:center (posé pour le centrage vertical desktop) prend
           un tout autre sens une fois la ligne empilée en colonne : il
           centre/rétrécit les colonnes sur l'axe horizontal au lieu de les
           laisser remplir 100% de la largeur — c'est ce qui cassait le
           slider (et l'image) sur mobile. */
        align-items: stretch;
        padding-left: 0;
        padding-right: 0;
    }

    .webtex-homepage.mixed .mixed-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 4 / 5;
        padding-right: 20px;
    }

    .webtex-homepage.mixed .mixed-slider-wrap {
        width: 100%;
    }

    /* Sur mobile les flèches/barre de progression reprennent le flux normal
       (empilées sous le slider) : pas besoin de les sortir du flux, il n'y a
       plus d'image à côté avec laquelle se centrer verticalement. */
    .webtex-homepage.mixed .webtex-swiper-controls {
        position: static;
        margin-top: 0;

    }

    /* Sur mobile l'image remplit sa boîte 4:5 (pas de plafond 542x659,
       réservé au desktop) : height:100% requis pour que object-fit:cover
       fonctionne dans ce conteneur à ratio fixe. */
    .webtex-homepage.mixed .mixed-image img {
        height: 100%;
        max-width: 100%;
        max-height: none;
    }

    .webtex-homepage.mixed .mixed-slider .pro_outer_box {
        width: 82vw;
    }
}

/* =========================================================
   LINKS — "Titre / liens en colonne"
   ========================================================= */

/* Pas de bord à bord ici (contrairement à "mixed"/"peek-mode", qui en ont
   besoin pour l'effet "peek" du carrousel) : "links" n'a pas de slider,
   juste du texte statique — il doit occuper le conteneur de page normal
   (comme le footer), pas déborder jusqu'aux bords du viewport. */
.webtex-homepage.links {
    width: 100%;
    padding: 20px 0 80px 0;
}

/* Barre de séparation, couleur pilotée par le BO via --links-separator-color
   (posée en inline-style) ; position (haut/bas) pilotée par le BO via la
   classe separator-top/separator-bottom sur la section. */
.webtex-homepage.links.separator-top {
    border-top: 1px solid var(--links-separator-color);
}
.webtex-homepage.links.separator-bottom {
    border-bottom: 1px solid var(--links-separator-color);
}
@media(max-width: 1024px)
{
    .webtex-homepage.links {
        left: auto;
        right: auto;
        margin-left: unset !important;
    }    
}

.webtex-homepage.links .section-header {
    width: 100%;
}

/* Taille du titre propre à ce type de bloc : la classe "links" posée sur
   .section-header (comme "category" pour le type Catégorie) permet de la
   cibler sans affecter les autres types, dont les h2 peuvent avoir une
   taille différente. */
.section-header.links h2 {
    /* !important : même spécificité que la règle du thème
       .webtex-homepage .section-header h2 (48px, custom.css), qui gagnerait
       sinon selon l'ordre de chargement des feuilles de style. */
    font-size: 32px !important;
}

/* Répartition en flexbox plutôt que CSS column-count : column-count utilise
   par défaut un remplissage "équilibré" (hauteurs de colonnes égales), pas
   séquentiel (1ère colonne remplie avant la 2e) et nécessite une hauteur de
   conteneur définie pour être fiable — la répartition (qui va dans quelle
   colonne) est donc calculée côté PHP (array_chunk, $link_column_groups) et
   seul l'affichage en colonnes reste ici. */
.webtex-homepage.links .links-grid {
    display: flex;
    gap: 24px;
    /* .webtex-homepage est en display:flex + align-items:center (règle
       générique du thème) : sans width:100% explicite ici, ce enfant flex se
       rétrécit à la largeur de son contenu au lieu de remplir la section —
       c'est ce qui donnait un bloc "links" tout riquiqui au lieu de prendre
       toute la largeur du conteneur de page. */
    width: 100%;
}

.webtex-homepage.links .links-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.webtex-homepage.links .links-item {
    display: block;
    text-align: center;
    padding: 8px 0;
    color: #000;
    text-decoration: none;
    font-size: 18px;
}

.webtex-homepage.links .links-item:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .webtex-homepage.links .links-grid {
        flex-direction: column;
        gap: 0;
        padding-bottom: 80px;
    }
}

/* =========================================================
   PAGE PRODUIT — bloc wxhomepage contenu comme sur l'accueil
   ========================================================= */

/* Sur l'accueil, #columns.container donne déjà le padding + max-width aux
   blocs wxhomepage. La page produit n'a pas cet ancêtre : sans ça, un bloc
   comme "Parcourir par marque" s'étale sur toute la largeur au lieu de
   rester contenu comme le reste du site. Uniquement du CSS (aucune balise
   ajoutée dans product.tpl) : le calcul de hcSticky, qui mesure la colonne
   produit sticky à côté, ne dépend ainsi jamais de ce correctif — un bug de
   sticky déjà présent sans lui a confirmé qu'il n'y est pour rien. Valeurs
   reprises de .container du thème (position/margin/padding/breakpoints). */
body#product #main > .webtex-homepage {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body#product #main > .webtex-homepage {
        max-width: 768px;
    }
}

@media (min-width: 992px) {
    body#product #main > .webtex-homepage {
        max-width: 992px;
    }
}

@media (min-width: 1200px) {
    body#product #main > .webtex-homepage {
        max-width: 1200px;
    }
}

@media (min-width: 1440px) {
    body#product #main > .webtex-homepage {
        max-width: 1440px;
    }
}

/* Type "scrolltext" (texte défilant en boucle, ex-module wxscrolltext,
   intégré ici pour permettre un texte différent par bloc/page marque). */
.wxscrolltext {
    overflow: hidden;
    background: transparent;
    color: var(--wxst-color, #000);
    font-size: var(--wxst-font-size, 18px);
    line-height: 1.2;
    font-weight: 700;
    padding: 20px 0;

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
}

@media (max-width: 767px) {
    .wxscrolltext {
        font-size: calc(var(--wxst-font-size, 18px) - 24px);
    }
}

.wxscrolltext__track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: wxscrolltext-marquee var(--wxst-duration, 18s) linear infinite;
}

.wxscrolltext__content {
    display: flex;
    align-items: center;
}

.wxscrolltext__text {
    padding-right: 3rem; /* espace entre répétitions */
}

.wxscrolltext__icon {
    height: 1em;
    width: auto;
    margin-right: 3rem;
    flex-shrink: 0;
}

@keyframes wxscrolltext-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Accessibilité : réduire l'animation si demandé */
@media (prefers-reduced-motion: reduce) {
    .wxscrolltext__track {
        animation: none;
    }
}

/* Si un bloc scrolltext est utilisé via displayAfterProductThumbs (fiche
   produit), un ancêtre du thème a souvent overflow:hidden autour des
   carrousels, ce qui coupe le plein-large (width:100vw + marge négative).
   :has() cible uniquement les conteneurs qui contiennent réellement
   .wxscrolltext, donc sans effet sur le reste du site. */
.product_left_content:has(.wxscrolltext),
.product-scroll-column:has(.wxscrolltext),
.norow.product-sticky-layout:has(.wxscrolltext) {
    overflow: visible !important;
}