/* * VivaWeb — E-commerce : barre latérale de la boutique. * * La barre n'est rendue qu'une fois, à sa place dans le

du thème. Le * mode tiroir n'est qu'une bascule de mise en page : aucun nœud n'est déplacé * ni dupliqué, ce qui préserve la numérotation des panneaux de filtres et * l'observateur du bloc « récemment consultés ». * * Les bornes sont celles de Kadence, reprises en dur : la grille à deux * colonnes de .content-container n'existe qu'au-dessus de 1025 px, dans un * fichier minifié que les filtres de media query du thème n'atteignent pas. * Un point de rupture à 768 px laisserait la tablette avec la colonne rejetée * sous les produits — exactement ce que cette option corrige. */ .vw-shop-sidebar { --vw-shop-sidebar-width: min( 86vw, 22rem ); --vw-shop-sidebar-gap: 2rem; } .vw-shop-sidebar__item + .vw-shop-sidebar__item { margin-top: var( --vw-shop-sidebar-gap ); } .vw-shop-sidebar__title { margin: 0 0 0.75rem; font-size: 1.05rem; line-height: 1.3; } .vw-shop-sidebar__image { display: block; width: 100%; height: auto; } .vw-shop-sidebar__item--texte p:last-child { margin-bottom: 0; } /* L'en-tête n'a de sens qu'en tiroir : en colonne, il ferait doublon. */ .vw-shop-sidebar__head { display: none; } .vw-shop-sidebar-toggle-wrap { display: none; margin: 0 0 1.25rem; } .vw-shop-sidebar-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6em 1.1em; border: 1px solid currentColor; border-radius: 0.35rem; background: transparent; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; } .vw-shop-sidebar-toggle:hover, .vw-shop-sidebar-toggle:focus-visible { background: color-mix( in srgb, currentColor 8%, transparent ); } /* ------------------------------------------------------------------------- * Mode tiroir, sous le point de rupture de la grille Kadence * ---------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .vw-shop-sidebar-toggle-wrap { display: block; } /* * C'est le

du thème qui devient le tiroir, pas un conteneur à nous : * il n'a ainsi aucun ancêtre susceptible de créer un bloc conteneur et de * casser le `position: fixed`. La classe est posée sur le par le * filtre body_class, ce qui évite de dépendre de `:has()`. */ body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .primary-sidebar { position: fixed; z-index: 100001; top: 0; bottom: 0; left: 0; width: var( --vw-shop-sidebar-width, min( 86vw, 22rem ) ); max-width: 100%; margin: 0; padding: 0; background: var( --global-palette9, #fff ); box-shadow: 0 0 2.5rem rgba( 0, 0, 0, 0.25 ); transform: translateX( -100% ); transition: transform 0.25s ease; } /* * Pas de `will-change: transform` ici : la propriété créerait un bloc * conteneur permanent, et tout descendant en `position: fixed` — un * sous-menu, une modale d'un widget — se retrouverait recadré sur le tiroir * puis rogné par son `overflow`. */ body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir.vw-shop-sidebar--droite .primary-sidebar { right: 0; left: auto; transform: translateX( 100% ); } body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir.vw-shop-drawer-open .primary-sidebar { transform: none; } /* * Le tiroir fermé reste dans le rendu — il n'est pas en display:none — mais * il est retiré du parcours au clavier et de l'arbre d'accessibilité par * l'attribut inert posé côté script. */ /* * Colonne flexible : l'en-tête garde sa place en haut et seul le contenu * défile. Un en-tête laissé dans le flux du conteneur défilant emporterait * le bouton de fermeture hors de vue dès la première liste de facettes un * peu longue — c'est-à-dire dans la configuration par défaut. */ body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .primary-sidebar .sidebar-inner-wrap, body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .vw-shop-sidebar { display: flex; flex-direction: column; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; } body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .vw-shop-sidebar__body { flex: 1 1 auto; min-height: 0; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Le thème pose un fond et une marge basse sur chaque widget : en plein écran, les deux jurent avec le tiroir. */ body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .primary-sidebar .widget { margin-bottom: 0; padding: 0; background: transparent; } body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .vw-shop-sidebar__head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.9rem 1.25rem; border-bottom: 1px solid color-mix( in srgb, currentColor 15%, transparent ); } .vw-shop-sidebar__heading { font-size: 1.05rem; font-weight: 700; } .vw-shop-sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .vw-shop-sidebar__close:hover, .vw-shop-sidebar__close:focus-visible { background: color-mix( in srgb, currentColor 10%, transparent ); } /* Posé sur par le script, jamais réutilisé d'un autre module : le verrou de défilement de la modale de recherche a le sien. */ .vw-shop-overlay { position: fixed; z-index: 100000; inset: 0; background: rgba( 0, 0, 0, 0.45 ); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } body.vw-shop-drawer-open .vw-shop-overlay { opacity: 1; pointer-events: auto; } body.vw-shop-drawer-open { overflow: hidden; } /* Barre demandée masquée sous le point de rupture. */ body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--masquee .primary-sidebar { display: none; } } /* ------------------------------------------------------------------------- * Au-dessus du point de rupture : la grille native du thème suffit * ---------------------------------------------------------------------- */ @media screen and (min-width: 1025px) { .vw-shop-sidebar-toggle-wrap, .vw-shop-overlay { display: none; } } /* Spécificité alignée sur celle de la règle qui pose la transition, sinon la préférence de l'utilisateur resterait sans effet sur le panneau. */ @media ( prefers-reduced-motion: reduce ) { body.vw-shop-sidebar-active.vw-shop-sidebar-mobile--tiroir .primary-sidebar, .vw-shop-overlay { transition: none; } }