/* =========================================================================
   app-empire.css — Styles des widgets réactivés (étoiles, section avis, chat)
   greffés sur le thème Empire réutilisé.
   ========================================================================= */

/* ---- Étoiles type Loox (cartes produit) ---- */
.v001-card-stars { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px; }
.v001-star { color: #d9d9d9; font-size: 15px; line-height: 1; }
.v001-star.on { color: #f5a623; }
.v001-star.half { position: relative; color: #d9d9d9; }
.v001-star.half::before { content: "★"; position: absolute; left: 0; width: 50%; overflow: hidden; color: #f5a623; }
.v001-count { color: #6b7280; font-size: 12px; margin-left: 3px; }

/* ---- Section avis (bas d'accueil) ---- */
.v001-reviews { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.v001-reviews__summary { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
.v001-stars { display: inline-flex; }
.v001-stars--lg .v001-star { font-size: 26px; }
.v001-reviews__count { font-size: 20px; font-weight: 700; }
.v001-reviews__sort { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.v001-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.v001-rev { border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.v001-rev__media { aspect-ratio: 1/1; background: #f4f4f5; }
.v001-rev__media img { width: 100%; height: 100%; object-fit: cover; }
.v001-rev__body { padding: 12px 14px; }
.v001-rev__head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.v001-rev__verified { color: #137333; font-size: 11px; font-weight: 600; }
.v001-rev__date { color: #9ca3af; font-size: 12px; margin: 2px 0 4px; }
.v001-rev__text { font-size: 14px; line-height: 1.5; margin: 6px 0; }
.v001-rev__product { font-size: 12px; color: #6b7280; border-top: 1px solid #f0f0f0; padding-top: 8px; margin-top: 8px; }
.v001-rev__product a { color: #634c9f; }
.v001-reviews__more { margin: 26px auto 0; background: #fff; border: 1px solid #634c9f; color: #634c9f; border-radius: 8px; padding: 12px 26px; font-weight: 600; cursor: pointer; }
.v001-reviews__more:hover { background: #634c9f; color: #fff; }
.v001-reviews__by { text-align: center; color: #b0b0b0; font-size: 12px; margin-top: 16px; }

/* ---- Force l'affichage des images rimg (empire.js absent) ---- */
.rimg, .rimg--loaded { opacity: 1 !important; }
.rimg img, img.rimg, img[data-rimg], img[data-rimg-template] { opacity: 1 !important; visibility: visible !important; }
.rimg [data-rimg-canvas], canvas[data-rimg-canvas], .rimg canvas { opacity: 0 !important; }

/* Cartes produit & bannières : forcer la visibilité (pas de wrapper .rimg) */
.productitem--image img, .productgrid--item img, .product-item img, [class*="productitem--image"] img,
.product-item img, .promo-block img, .image-with-text img, .featured-collection img {
  opacity: 1 !important; visibility: visible !important;
}
.productitem--image-alternate { opacity: 0; }  /* image de survol : cachée par défaut, normal */

/* ---- Filtre section avis (bouton + panneau) ---- */
.v001-reviews__summary { justify-content: space-between; }
.v001-reviews__summary-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v001-reviews__filter { position: relative; }
.v001-reviews__filter-btn { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #333; }
.v001-reviews__filter-btn:hover { background: #f6f6f6; }
.v001-reviews__filter-menu { position: absolute; right: 0; top: 50px; z-index: 30; background: #fff; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 10px; min-width: 240px; }
.v001-reviews__filter-menu[hidden] { display: none; }
.v001-reviews__filter-title { font-size: 20px; font-weight: 700; padding: 8px 12px 12px; }
.v001-reviews__filter-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none;
    border: 0; padding: 12px; font-size: 15px; text-align: left; cursor: pointer; border-radius: 8px; color: #222; }
.v001-reviews__filter-opt:hover { background: #f5f5f5; }
.v001-reviews__check { opacity: 0; color: #111; font-weight: 700; }
.v001-reviews__filter-opt.is-active .v001-reviews__check { opacity: 1; }

/* ---- CORRECTIF images (empire.js absent) : masque le canvas placeholder gris
        (shimmer) partout, et force la visibilité des images du thème. ---- */
[data-rimg-canvas] { display: none !important; opacity: 0 !important; }
img[data-rimg], img[data-rimg="loaded"], img[data-rimg="lazy"], img[data-rimg="loading"], img[data-rimg-template] {
  opacity: 1 !important; visibility: visible !important;
}

/* ---- Bannières (featured collection / image-with-text) ----
   theme.css met .promo-block img en 1px/opacity:0 (empire.js les révèle normalement).
   On force le vrai dimensionnement de l'image de fond de bannière. ---- */
img.promo-block--background {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; opacity: 1 !important; object-fit: cover !important;
}

/* ---- Widget de notation natif du thème (alimenté par notre JS) : garantir l'affichage ---- */
.product__rating { display: flex; align-items: center; }
.productitem--info .rating__star-wrapper, .rating__star-wrapper { display: inline-flex !important; }
.productitem--info .rating__star { width: 15px; height: 15px; }

/* ---- Header sticky (comportement natif reproduit) ---- */
/* La ligne du haut reste visible ; les marques se replient au scroll. */
.site-header-sticky .site-header { position: sticky; top: 0; z-index: 1000; background: #fff; }
/* Replié : marques masquées SAUF si l'utilisateur rouvre via le hamburger. */
.site-header.v001-collapsed:not(.site-header-nav--open) .site-navigation-wrapper { display: none !important; }
/* Hamburger visible sur desktop quand le header est replié. */
.site-header.v001-collapsed .site-header-menu-toggle { display: inline-block !important; }
/* Quand rouvert au scroll, les marques s'affichent en dropdown sous la ligne du haut. */
.site-header.v001-collapsed.site-header-nav--open .site-navigation-wrapper {
  display: block !important; position: absolute; left: 0; right: 0; background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12); padding: 10px 0; z-index: 999;
}
.site-header { position: relative; }
/* Sous-menu du menu principal : le thème ne l'affiche que sous `.no-js` (classe posée puis
   retirée par empire.js, absent chez nous) → on l'affiche dès que le <details> est ouvert,
   ce que fait le survol (souris) ou le 1er appui (tactile). Voir initDesktopNav(). */
.navmenu-item-parent { position: relative; }
details[data-navmenu-details][open] > .navmenu-submenu { display: block; }
/* Tiroir mobile : le sous-menu est replié par défaut (le thème ne le masque que via des
   attributs d'animation posés par empire.js). initMobileNav() l'ouvre en style inline. */
[data-mobile-nav] [data-navmenu-submenu] { display: none; }



/* ---- Carrousel hero propre (remplace le slideshow d'Empire) ---- */
/* Высота = исходное соотношение (1280/480 desktop, 1/1 mobile) + регулируемая добавка. */
.v001-slider { --v001-hero-extra: 100px;
    position: relative; width: 100%; overflow: hidden; background: #140a24;
    height: calc(100vw * 480 / 1280 + var(--v001-hero-extra)); }
.v001-slide { position: absolute; inset: 0; display: block; }
/* <picture> не должен создавать бокс: <img> позиционируется по .v001-slide. */
.v001-slide picture { display: contents; }
.v001-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.v001-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.22); border: 0; color: #fff;
    font-size: 34px; line-height: 1; width: 46px; height: 66px; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; }
.v001-slider-arrow:hover { background: rgba(255,255,255,.42); }
.v001-slider-prev { left: 12px; } .v001-slider-next { right: 12px; }
.v001-slider-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 9px; justify-content: center; z-index: 5; }
.v001-slider-dot { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.v001-slider-dot.is-active { background: #fff; }
/* Мобильные ассеты темы квадратные (800x800) -> соотношение 1/1, + та же добавка. */
@media (max-width: 700px) { .v001-slider { height: calc(100vw + var(--v001-hero-extra)); } }

/* ---- Liste des collections (routes /products et /collections) ---- */
.collection-list__container { max-width: 1240px; margin: 0 auto; padding: 20px; }
.collection-list__content.collection-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.collection__item-link { display: block; text-decoration: none; color: inherit; }
.collection__item-image { aspect-ratio: 1/1; background-size: cover; background-position: center; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; overflow: hidden; }
.collection__item-image--placeholder { background: linear-gradient(135deg, #2ec5e0, #1449c7); }
.collection__item-placeholder-text { color: #fff; font-weight: 800; font-size: 26px; text-align: center; text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0,0,0,.35); padding: 10px; line-height: 1.1; }
.collection__item-info { text-align: center; padding: 12px 0; }
.collection__item-title { font-size: 16px; }
.pagination--container { margin: 34px 0; }
.pagination--inner { display: flex; gap: 10px; justify-content: center; list-style: none; padding: 0; }
.pagination--item { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; }
.pagination--active .pagination--item { font-weight: 700; }
@media (max-width: 800px) { .collection-list__content.collection-list { grid-template-columns: repeat(2, 1fr); } }

/* ---- Page collection : accordéons filtres + toggle description + récemment consultés ---- */
.v001-fg-collapsed { display: none !important; }
.rich-text-content.is-hidden { display: none; }
.description__length-toggle { background: none; border: 0; padding: 0; margin-left: 4px; color: #634c9f;
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Repli visuel de la sidebar en 2 colonnes si theme.css ne prend pas le relais. */
.productgrid--outer.layout--has-sidebar {
    display: grid; grid-template-columns: 250px 1fr; grid-column-gap: 32px; align-items: start;
    max-width: 1240px; margin: 0 auto; padding: 0 20px;
}
.productgrid--outer.layout--has-sidebar .productgrid--masthead { grid-column: 1 / -1; }
.productgrid--sidebar { grid-column: 1; }
.productgrid--wrapper { grid-column: 2; min-width: 0; }
@media (max-width: 860px) {
    .productgrid--outer.layout--has-sidebar { grid-template-columns: 1fr; }
    .productgrid--sidebar { display: none; }
    /* sinon .productgrid--wrapper garde grid-column:2 → colonne 1 vide à gauche. */
    .productgrid--outer.layout--has-sidebar .productgrid--wrapper,
    .productgrid--outer.layout--has-sidebar .productgrid--masthead { grid-column: 1 / -1 !important; }
}
.productgrid--sidebar-title { font-size: 22px; margin: 0 0 8px; }
.collection-filters__filter-group { border-top: 1px solid #ececec; }
.collection-filters__filter-group-heading { display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 16px 2px; cursor: pointer; font-size: 15px; }
.collection-filters__filter-title { font-weight: 600; }
.collection-filters__filter-icon-wrapper .icon-chevron-down { transition: transform .2s; }
.collection-filters__filter-group-heading[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); }
.collection-filters__filter-list { list-style: none; margin: 0 0 12px; padding: 0; }
.collection-filters__filter-list-item { margin: 0; }
.collection-filters__filter-link { display: flex; align-items: center; gap: 11px; padding: 7px 2px; color: inherit; font-size: 14px; }
/* Case à cocher personnalisée (le SVG animé du thème dépend de son JS absent → coche invisible). */
.collection-filters__filter-link .filter-icon--checkbox { width: 20px; height: 20px; box-sizing: border-box;
    border: 1.5px solid #cfcfcf; border-radius: 5px; background: #fff; position: relative;
    display: inline-flex; flex: 0 0 auto; transition: background .15s, border-color .15s; }
.collection-filters__filter-link .filter-icon--checkbox .checkmark { display: none; }
.collection-filters__filter-link:hover .filter-icon--checkbox { border-color: #9a9a9a; }
/* Coche blanche dessinée en CSS quand actif. */
.collection-filters__filter-link.is-checked .filter-icon--checkbox::after {
    content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.collection-filters__price-range-form { display: flex; align-items: center; gap: 8px; padding: 4px 2px 16px; }
.collection-filters__filter-range { display: flex; align-items: center; gap: 8px; }
.collection-filters__filter-range--from, .collection-filters__filter-range--to { display: inline-flex; align-items: center;
    border: 1px solid #d8d8d8; border-radius: 6px; padding: 4px 8px; gap: 4px; }
.collection-filters__filter-range-input { border: 0; width: 56px; font-size: 14px; outline: none; }

/* Barre utilitaire : « Trier par » à GAUCHE, « Voir en tant que » à DROITE, sur UNE seule
   ligne (on force row/nowrap pour neutraliser tout flex-basis hérité de theme.css). */
.productgrid--outer .productgrid--utils-container {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; width: 100%; }
.productgrid--outer .productgrid--utils.utils-filter { display: none !important; }  /* filtres = mobile */
.productgrid--outer .utils-sortby { display: flex !important; align-items: center; gap: 8px; margin: 0; flex: 0 0 auto; width: auto !important; }
.productgrid--outer .utils-view { margin: 0; flex: 0 0 auto; width: auto !important; }
@media (max-width: 860px) {
    .productgrid--outer .productgrid--utils.utils-filter { display: block !important; }
}
.utils-sortby-title { font-size: 14px; color: #333; white-space: nowrap; }
.utils-sortby-select { border: 1px solid #d8d8d8; border-radius: 8px; padding: 8px 30px 8px 12px; font-size: 14px;
    background: #fff; cursor: pointer; }
.utils-view { display: flex; align-items: center; }
.utils-viewtoggle { display: flex; align-items: center; gap: 8px; }
.utils-viewtoggle-label { font-size: 14px; color: #333; white-space: nowrap; }
.utils-viewtoggle-button { background: none; border: 0; padding: 4px; cursor: pointer; color: #bcbcbc; line-height: 0; }
.utils-viewtoggle-button.active { color: #111; }
@media (max-width: 860px) { .productgrid--utils.utils-filter { display: block; } }

/* ------------------------------------------------------------------------
   Barre mobile « Filtres » / « Trier par » + modales (comme l'original).
   Desktop : bouton filtres et bouton tri masqués, le <select> pilote le tri.
   Mobile  : les deux boutons (icône + texte) ouvrent une modale plein écran.
   ------------------------------------------------------------------------ */
.utils-filter-button, .utils-sortby-button { display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 6px 2px; cursor: pointer; font-size: 17px; color: #1a1a1a; font-family: inherit; }
.utils-icon { flex: 0 0 auto; }
.utils-sortby-button { display: none; }
.v001-panel__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1200; }
.v001-panel__overlay[hidden] { display: none; }
.v001-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #ececec; }
.v001-panel__title { font-size: 22px; margin: 0; }
.v001-panel__close { display: none; background: none; border: 0; padding: 4px; cursor: pointer; color: #1a1a1a; line-height: 0; }
.productgrid--sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v001-sortpanel { display: none; }

@media (max-width: 860px) {
    .productgrid--outer .utils-sortby .utils-sortby-title,
    .productgrid--outer .utils-sortby .utils-sortby-select--wrapper { display: none; }
    .utils-sortby-button { display: inline-flex; }
    .v001-panel__close { display: inline-flex; }

    /* La barre : Filtres | Trier par | vues (les 2 premiers collés à gauche). */
    .productgrid--outer .productgrid--utils-container { justify-content: flex-start; gap: 22px; }
    .productgrid--outer .utils-view { margin-left: auto; }
    .productgrid--outer .utils-viewtoggle-label { display: none; }

    /* Modale filtres : on réutilise la sidebar existante (mêmes cases, mêmes handlers). */
    .productgrid--sidebar { display: none; }
    .productgrid--outer.layout--has-sidebar .productgrid--sidebar.is-open {
        display: block; position: fixed; z-index: 1201; top: 24px; left: 12px; right: 12px; bottom: 24px;
        background: #fff; border-radius: 4px; overflow-y: auto; -webkit-overflow-scrolling: touch;
        box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 0 0 24px; }
    .productgrid--sidebar.is-open .productgrid--sidebar-head { padding: 18px 20px; border-bottom: 1px solid #ececec; }
    .productgrid--sidebar.is-open .productgrid--sidebar-title { margin: 0; }
    .productgrid--sidebar.is-open .filter-form { padding: 0 20px; }

    /* Modale tri : liste d'options en boutons, l'option courante en plein. */
    .v001-sortpanel { display: none; }
    .v001-sortpanel.is-open { display: block; position: fixed; z-index: 1201; left: 12px; right: 12px;
        top: 50%; transform: translateY(-50%); max-height: calc(100vh - 48px); overflow-y: auto;
        background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
    .v001-sortpanel__options { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
    .v001-sortopt { width: 100%; padding: 15px 12px; border: 1px solid #d9d5e6; border-radius: 4px;
        background: #fff; color: #634c9f; font-size: 16px; font-family: inherit; cursor: pointer; }
    .v001-sortopt.is-active { background: #494d41; border-color: #494d41; color: #fff; }
}

/* Grille produits : on neutralise le width:25% du thème (products-per-row-4) qui,
   combiné à notre grille CSS, écrasait les cartes. La grille pilote la largeur. */
/* Nombre de colonnes : on suit la classe posée par le thème (products-per-row-N) et ses
   paliers, relevés dans theme.css pour products-per-row-4 :
     < 680 px → 2 colonnes (50% - 5px, gouttière 10)
     680-859  → 3 colonnes (33,3% - 6,67px, gouttière 10)
     ≥ 860 px → 4 colonnes (25% - 15px, gouttière 20)
   Notre règle imposait 3 colonnes à TOUTES les tailles : sur grand écran la collection
   n'affichait que 3 produits par rangée là où l'original en met 4. */
.productgrid--outer .productgrid--items {
    list-style: none; margin: 0; padding: 0;
    display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px; float: none;
}
@media (min-width: 680px) {
    .productgrid--outer .productgrid--items { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (min-width: 860px) {
    .productgrid--outer .productgrid--items { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    /* Une collection réglée sur un autre nombre de colonnes garde le sien. */
    .productgrid--outer .productgrid--items.products-per-row-2 { grid-template-columns: repeat(2, 1fr); }
    .productgrid--outer .productgrid--items.products-per-row-3 { grid-template-columns: repeat(3, 1fr); }
    .productgrid--outer .productgrid--items.products-per-row-5 { grid-template-columns: repeat(5, 1fr); }
}
.productgrid--outer .productgrid--items .productgrid--item {
    width: auto !important; max-width: none !important; float: none !important;
    margin: 0 !important; padding: 0 !important; min-width: 0;
}
.productgrid--outer .productitem,
.productgrid--outer .productitem__container,
.productgrid--outer .productitem__image-container,
.productgrid--outer .productitem--info { width: 100% !important; max-width: none !important; }
.productgrid--outer .productitem--image,
.productgrid--outer .productitem--image-link { display: block; width: 100%; }
.productgrid--outer .productitem--image { position: relative; aspect-ratio: 1/1; background: #f4f4f5; overflow: hidden; }
.productgrid--outer .productitem--image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.productgrid--outer .productitem--title { font-size: 15px; line-height: 1.35; margin: 10px 0 4px; }
.productgrid--outer .productitem--title a { display: block; }
.productgrid--outer .productitem--vendor { font-size: 12px; color: #6b7280; }
@media (max-width: 700px) {
    /* Cartes plus larges sur mobile — valeurs reprises TELLES QUELLES du thème d'origine :
         .productgrid--item { width: calc(50% - 5px); margin-left: 10px }  → gouttière 10 px
         .productgrid--outer { padding: 0 10px }                           → retrait 10 px
       Nos règles imposaient 24 px de gouttière (jamais réduite pour le mobile) et 20 px de
       retrait, plus spécifiques donc gagnantes : chaque carte perdait ~17 px de largeur. */
    .productgrid--outer .productgrid--items { gap: 10px 10px; }
    .productgrid--outer.layout--has-sidebar { padding: 0 10px; }
}
/* Collection ne contenant qu'UN produit : ne pas le laisser collé à gauche (il occupait la
   moitié gauche d'une grille 2 colonnes). On centre une colonne de largeur raisonnable. */
.productgrid--outer .productgrid--items:has(> .productgrid--item:only-child) {
    grid-template-columns: minmax(0, 320px); justify-content: center;
}
/* Cartes-titre (bannière) des collections en vedette, ex. « JNR VAPE / Voir plus » : le thème
   CACHE l'<img> (`width:1px;height:1px;opacity:0`) et affiche l'image en `background-image` via
   SON JS (non chargé) → fond gris. On rend donc l'<img> réelle pleine largeur + visible, et on
   masque le canvas placeholder. (l'<img> a un vrai src, chargé par notre loader rimg.) */
.featured-collection__title-card { position: relative; overflow: hidden; }
.featured-collection__title-card > img[data-rimg-template],
.featured-collection__title-card > img[data-rimg] {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important; opacity: 1 !important;
    object-fit: cover !important; z-index: 0 !important;
}
.featured-collection__title-card [data-rimg-canvas] { display: none !important; }
.featured-collection__title-card .featured-collection__title-card-outer { position: relative; z-index: 1; }

/* Collections « en vedette » de l'accueil (ex. « Mega Deals ») : c'est une GRILLE dans le thème
   (5 col en desktop), pas un carrousel. Sans le JS du thème, la version mobile retombait sur un
   flex `nowrap` (cartes 204px `flex-shrink:0`) qui DÉBORDAIT à droite sans défilement possible.
   Correctif : forcer une vraie grille qui passe à la ligne — 2 colonnes, aucun débordement. */
@media (max-width: 1000px) {
    .featured-collection__content[data-layout="grid"]:not(.flickity-enabled),
    .featured-collection__content[data-layout="slideshow"]:not(.flickity-enabled) {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px 14px; overflow: visible !important; padding: 0 !important;
    }
    .featured-collection__content[data-layout="grid"] .productgrid--item,
    .featured-collection__content[data-layout="slideshow"] .productgrid--item {
        width: 100% !important; max-width: none !important; min-width: 0 !important;
        margin: 0 !important; flex: none !important; float: none !important;
    }
    /* Même correctif pour la section « Blog Vapes » de l'accueil : le thème la met en flex
       `nowrap` (cartes 17.5rem `flex-shrink:0`) → débordement. Grille 2 colonnes qui passe à la ligne. */
    .blogposts--inner:not(.flickity-enabled) {
        display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
        flex-direction: initial !important; flex-wrap: wrap !important;
        gap: 24px 16px; overflow: visible !important;
    }
    .blogposts--inner .article--excerpt-wrapper {
        width: 100% !important; max-width: none !important; min-width: 0 !important;
        margin: 0 !important; flex: none !important;
    }
    /* La carte est un flex (`.article-list-item{display:flex}`) : sans stretch, l'image se
       réduit à sa largeur intrinsèque et se colle à GAUCHE. On force colonne + pleine largeur. */
    .blogposts--inner .article-list-item {
        display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important;
    }
    .blogposts--inner .article--excerpt-image {
        display: block !important; width: 100% !important; align-self: stretch !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    .blogposts--inner .article--excerpt-image img { width: 100% !important; max-width: 100% !important; }
    .blogposts--inner .article--excerpt-content { width: 100% !important; }
}
@media (max-width: 560px) {
    .blogposts--inner:not(.flickity-enabled) { grid-template-columns: 1fr !important; }
}

/* Masthead : titre seul, sur sa propre ligne (évite le chevauchement avec « Filtres »). */
.productgrid--outer.layout--has-sidebar .productgrid--masthead {
    grid-row: 1; margin: 6px 0 18px; position: static;
}
.productgrid--outer .collection--title { font-size: 32px; font-weight: 700; margin: 0; }
.productgrid--outer.layout--has-sidebar .productgrid--sidebar { grid-row: 2; }
.productgrid--outer.layout--has-sidebar .productgrid--wrapper { grid-row: 2; }

/* Fil d'Ariane */
.breadcrumbs-container { max-width: 1240px; margin: 14px auto 6px; padding: 0 20px; display: flex; align-items: center;
    gap: 8px; font-size: 13px; color: #6b7280; }
.breadcrumbs-container a:hover { color: #634c9f; }
.breadcrumbs-delimiter { display: inline-flex; }

/* Bloc rich-text (description en bas) */
.rich-text--container { max-width: 1240px; margin: 30px auto; padding: 0 20px; }
.rich-text-heading { font-size: 26px; margin: 0 0 14px; }
.rich-text-content.rte { color: #333; line-height: 1.6; }

/* Récemment consultés */
.product-recently-viewed--section { max-width: 1240px; margin: 30px auto; padding: 24px 20px; background: #f6f6f7; border-radius: 8px; }
.product-recently-viewed--section[hidden] { display: none; }
.product-recently-viewed__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.product-recently-viewed__heading { font-size: 22px; margin: 0; }
.product-recently-viewed__clear { background: none; border: 0; color: #6b7280; font-size: 13px; cursor: pointer; text-decoration: underline; }
.product-recently-viewed__content { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); justify-content: center; gap: 18px; }
.rv-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.rv-card__top { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 12px; color: #9ca3af; }
.rv-card__remove { background: none; border: 0; font-size: 18px; line-height: 1; color: #9ca3af; cursor: pointer; padding: 0 2px; }
.rv-card .productitem--image { position: relative; aspect-ratio: 1/1; }
.rv-card .productitem--info { padding: 10px 12px 14px; }
.rv-card .productitem--title { font-size: 14px; margin: 4px 0; line-height: 1.35; }
/* Prix : le prix barré (ancien) au-dessus du prix courant, jamais collés. */
.rv-card .productitem__price { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 6px 0 4px; }
.rv-card .price__compare-at--single { font-size: 13px; }
.rv-card .price__current--single { font-size: 20px; font-weight: 800; }
.rv-card .productitem--stock-level { font-size: 13px; }
.rv-card .product__rating { margin-top: 6px; }
.rv-card .rating__count { font-size: 12px; }

/* ---- Badges & bannière de carte (classes v001- pour éviter toute collision theme.css) ---- */
.productgrid--outer .productitem__image-container { position: relative; }
/* Conteneur des pastilles : gauche/droite si ça tient, EMPILÉ sinon (jamais de chevauchement). */
.v001-badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4;
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; justify-content: space-between; }
.v001-badges:not(:has(.v001-badge--soldout)) { justify-content: flex-end; }   /* pastille custom seule → à droite */
.v001-badges:not(:has(.v001-badge--custom))  { justify-content: flex-start; } /* « Épuisé » seul → à gauche */
.v001-badge { position: static; width: auto !important; height: auto !important; max-width: 100%; flex-shrink: 0;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 5px 9px; border-radius: 4px;
    text-transform: uppercase; line-height: 1; white-space: nowrap; box-sizing: border-box; }
.v001-badge--soldout { background: #1a1a1a; color: #fff; }
.v001-save-banner { position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 4; background: #634c9f; color: #fff;
    font-size: 12px; font-weight: 700; text-align: center; padding: 6px 8px; width: auto !important; height: auto !important; }

/* ================= VUE LISTE ================= */
/* En grille : masquer description + colonne d'actions. */
.productgrid--outer:not(.productgrid-listview) .productitem--description,
.productgrid--outer:not(.productgrid-listview) .productitem--details-link,
.productgrid--outer:not(.productgrid-listview) .productitem--actions { display: none; }
/* Grille « produits connexes » : rendu grille pur (pas d'ancêtre .productgrid--outer ici,
   donc on masque explicitement les éléments vue-liste — sinon le prix s'affiche en double). */
.v001-related__grid .productitem--description,
.v001-related__grid .productitem--details-link,
.v001-related__grid .productitem--actions,
/* Idem pour les « collections en vedette » de l'accueil (mêmes cartes, 2ᵉ prix vue-liste à masquer). */
.featured-collection__content .productitem--description,
.featured-collection__content .productitem--details-link,
.featured-collection__content .productitem--actions { display: none !important; }

/* ===== Carrousel horizontal (produits connexes, récemment consultés) — desktop + mobile ===== */
.v001-hcarousel-wrap { position: relative; }
.v001-hcarousel {
  display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
  gap: 16px; margin: 0; padding: 4px 2px 10px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.v001-hcarousel::-webkit-scrollbar { height: 0; display: none; }
.v001-hcarousel > * {
  flex: 0 0 auto !important; width: clamp(180px, 44vw, 232px) !important; margin: 0 !important;
  scroll-snap-align: start;
}
.v001-hcarousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.18); color: #1c1c1c; font-size: 26px; line-height: 1;
  cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.v001-hcarousel-arrow:hover { background: #f3f4f6; box-shadow: 0 3px 14px rgba(0,0,0,.24); }
/* Flèches ENTIÈREMENT hors des cartes : à -8 px, une flèche de 44 px en recouvrait 36 et
   masquait le visuel du premier (et du dernier) produit. -58 px la sort complètement et laisse
   14 px de respiration. S'applique aux carrousels produit ET au carrousel du blog. */
.v001-hcarousel-prev { left: -58px; }
.v001-hcarousel-next { right: -58px; }
/* Fenêtres trop étroites pour loger les flèches dans les marges de page (le conteneur fait
   1350 px : il faut ~1466 px de large) → le carrousel se resserre pour leur faire place, au lieu
   de laisser les flèches remordre sur les cartes. Le nombre de cartes est recalculé en
   conséquence (le JS mesure la largeur réelle du rail). */
@media (min-width: 768px) and (max-width: 1500px) {
  .v001-hcarousel-wrap { padding-left: 58px; padding-right: 58px; }
  .v001-hcarousel-prev { left: 0; }
  .v001-hcarousel-next { right: 0; }
}
.v001-hcarousel-arrow.is-hidden { display: none; }

/* Bouton « Toutes nos meilleures promos » sous les carrousels : il était collé au rail
   au-dessus et à la section suivante. */
.featured-collection__button {
  display: inline-block;
  margin-top: 34px;
  margin-bottom: 34px;
}
.featured-collection__container .featured-collection__button { margin-top: 34px; }
@media (max-width: 767px) {
  .v001-hcarousel-arrow { display: none; } /* mobile : défilement tactile (swipe) */
  /* Deux cartes visibles par écran (plus petites), avec un léger aperçu de la suivante. */
  .v001-hcarousel { gap: 12px; }
  .v001-hcarousel > * { width: 52vw !important; }   /* secours : le JS pose la largeur réelle */
}
.productgrid-listview .productitem--details-link { order: 99; align-self: flex-start; display: inline-block; margin-top: 12px; color: #1c1c1c; font-size: 15px; font-weight: 600; text-decoration: none; }
.productgrid-listview .productitem--details-link:hover { text-decoration: underline; }

.productgrid-listview .productgrid--items { display: block !important; }
.productgrid-listview .productgrid--item { width: auto !important; margin: 0 0 18px !important; }
/* On reconstruit la carte en FLEX (le thème impose une grille concurrente sur ces mêmes
   classes) : display/flex forcés pour garantir un rendu propre desktop ET mobile. */
.productgrid-listview .productitem__container {
    display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 20px;
    border: 1px solid #ececec; border-radius: 10px; padding: 18px; background: #fff; height: auto !important;
}
.productgrid-listview .productitem__image-container { flex: 0 0 200px !important; width: 200px !important; grid-row-end: auto !important; }
.productgrid-listview .productitem--info { flex: 1 1 300px !important; min-width: 0; }
/* Colonne de droite (prix + bouton) : centrée verticalement sur la hauteur de la carte.
   Avec un seul bouton, le groupe restait collé en haut et laissait un grand vide dessous. */
.productgrid-listview .productitem--actions {
    flex: 0 0 210px !important; width: 210px !important; max-width: 210px !important;
    display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
    justify-content: center; align-self: stretch;
    text-align: right; margin: 0 !important; padding: 0 !important; order: 3;
}
.productgrid-listview .productitem--image { aspect-ratio: 1/1; border-radius: 8px; }
.productgrid-listview .productitem--title { font-size: 18px; font-weight: 600; }
.productgrid-listview .productitem--description { color: #555; font-size: 14px; line-height: 1.55; margin-top: 10px; }
/* En liste, le prix + stock à droite ; on garde le prix « info » masqué au profit de la colonne actions. */
.productgrid-listview .productitem--info .productitem__price { display: none; }
.productgrid-listview .productitem--listview-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.productgrid-listview .productitem--listview-price .price__compare-at--single { color: #9ca3af; text-decoration: line-through; font-size: 14px; }
.productgrid-listview .productitem--listview-price .price__current--single { font-size: 20px; font-weight: 800; color: #111; }
.productgrid-listview .productitem--listview-price .price__current--single.price__sale { color: #111; }
.productgrid-listview .productitem--listview-badge { display: inline-block; background: #634c9f; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; margin-top: 4px; }
.productitem--actions .productitem--action-trigger { display: inline-block; text-align: center; border-radius: 8px; padding: 11px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.productitem--actions .button-express { border: 1px solid #cfcfcf; background: #fff; color: #222; }
/* Bouton unique de la carte : il porte les deux classes, le style plein l'emporte. */
.productitem--actions .button-express.button-primary { background: #634c9f; border-color: #634c9f; color: #fff; }
.productitem--actions .button-express.button-primary:hover { background: #4a3877; border-color: #4a3877; }
/* Vue LISTE sur mobile : image + infos en haut, prix + boutons pleine largeur en dessous. */
@media (max-width: 680px) {
  .productgrid-listview .productitem__container { gap: 12px 14px; padding: 14px; }
  .productgrid-listview .productitem__image-container { flex: 0 0 108px !important; width: 108px !important; }
  .productgrid-listview .productitem--info { flex: 1 1 140px !important; }
  .productgrid-listview .productitem--actions { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; text-align: left; margin-top: 6px !important; }
  .productgrid-listview .productitem--listview-price { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .productgrid-listview .productitem--title { font-size: 16px; }
  .productgrid-listview .productitem--details-link { margin-top: 6px; }
}
.productitem--actions .button-primary { background: #634c9f; color: #fff; border: 1px solid #634c9f; }
.productitem--actions .button-primary.disabled { background: #3a3a3a; border-color: #3a3a3a; color: #fff; cursor: not-allowed; pointer-events: none; }
/* prix « info » masqué en liste : on garde la colonne actions comme source de prix */
@media (max-width: 800px) {
    .productgrid-listview .productitem__container { grid-template-columns: 120px 1fr; }
    .productgrid-listview .productitem--actions { grid-column: 1 / -1; text-align: left; align-items: stretch; }
}

/* Lien de filtre coché (état actif du filtrage client). */
.collection-filters__filter-link.is-checked .filter-icon--checkbox { background: #2b2b2b; border-color: #2b2b2b; }

/* ============================ FICHE PRODUIT ============================ */
.product__container--two-columns { max-width: 1400px; margin: 6px auto 20px; padding: 0 20px; }
/* Grille 2 colonnes forcée (spécificité élevée pour battre le theme.css). */
.product__container--two-columns .product--outer,
.product__container--two-columns > .product--outer {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 48px !important; align-items: start !important; float: none !important; width: 100% !important; }
@media (max-width: 900px) {
    .product__container--two-columns .product--outer { grid-template-columns: 1fr !important; gap: 26px !important; }
    /* La galerie est en sticky sur desktop : sur mobile (colonnes empilées) il FAUT la
       remettre en statique, sinon elle reste fixe et le texte lui passe par-dessus. */
    .product__container--two-columns .product--outer > .product-gallery,
    .product-gallery { position: static !important; top: auto !important; }
}

/* --- Galerie : conteneurs v001- propres, largeur pleine de sa colonne --- */
.product__container--two-columns .product--outer > .product-gallery {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: block !important;
    float: none !important; margin: 0 !important; flex: none !important; position: sticky; top: 90px; }
.product-gallery { position: sticky; top: 90px; }
.v001-gallery-main { position: relative; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff; }
.v001-gallery-figure { display: block; position: relative; margin: 0; aspect-ratio: 1/1; overflow: hidden; cursor: zoom-in; }
.v001-gallery-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.v001-gallery-figure.is-zoomed .v001-gallery-img { transform: scale(2); }
/* Menu déroulant Saveur : theme.css masque le select natif (widget custom absent) → on le réaffiche. */
.variant-selection__variants { display: block !important; }
.product-gallery--media.is-zoomed img { transform: scale(2); }
.product-gallery .v001-badge { position: absolute; top: 14px; right: 14px; z-index: 3; font-size: 12px; font-weight: 700;
    letter-spacing: .3px; padding: 6px 11px; border-radius: 4px; text-transform: uppercase; }
.product-gallery--navigation { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-gallery--thumbnail { width: 74px; height: 74px; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden;
    padding: 0; cursor: pointer; background: #fff; }
.product-gallery--thumbnail.is-selected { border-color: #634c9f; box-shadow: 0 0 0 1px #634c9f; }
.product-gallery--thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* --- Colonne infos --- */
.product-single__info { min-width: 0; }
.product-block { margin: 0 0 14px; }
.product-block--product-badge .product-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .3px;
    padding: 6px 11px; border-radius: 4px; text-transform: uppercase; }
.product-title { font-size: 30px; line-height: 1.2; font-weight: 700; margin: 6px 0; }
.product-vendor { color: #6b7280; font-size: 14px; }
.product-vendor a { color: #634c9f; }
.product-block--rating .product__rating { display: flex; align-items: center; gap: 8px; }
.product-block--rating .rating__count a { color: #6b7280; font-size: 13px; text-decoration: none; }

/* effects / specs — boîtes verticales du thème + VRAIES icônes PNG (URL absolue :
   le thème utilise url(/cdn/…) relatif → 404 sur localhost, on force l'absolu). */
.product-meta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: #333; margin-top: 10px; }
.product-meta > div { display: flex; align-items: center; padding: 8px 12px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eaeaea; }
.product-meta > div i { display: inline-block; width: 24px; height: 24px; margin-right: 10px; background-size: cover; background-repeat: no-repeat; flex: 0 0 auto; }
.icon-puffs    { background-image: url(/cdn/shop/files/icon-puffs.png) !important; }
.icon-eliquid  { background-image: url(/cdn/shop/files/icon-eliquid.png) !important; }
.icon-nicotine { background-image: url(/cdn/shop/files/icon-nicotine.png) !important; }
.icon-battery  { background-image: url(/cdn/shop/files/icon-battery.png) !important; }
.icon-boost    { background-image: url(/cdn/shop/files/icon-boost.png) !important; }
.icon-mesh     { background-image: url(/cdn/shop/files/icon-mesh.png) !important; }
.icon-smart    { background-image: url(/cdn/shop/files/icon-smart.png) !important; }
.icon-flavors  { background-image: url(/cdn/shop/files/icon-flavors.png) !important; }
/* Drapeau (livraison) */
.product-delivery-times { display: flex; align-items: center; gap: 10px; }
.v001-flag { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.v001-flag svg { border-radius: 2px; }

.product-delivery-times { font-size: 14px; color: #333; background: #f6f6f7; border-radius: 8px; padding: 10px 14px; }
.product-delivery-times__country-name { font-weight: 700; }
.payment-icons { margin: 4px 0; }
.payment-icons img { max-width: 320px; }

/* prix */
.product-block--price .price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.price__current--single { font-size: 30px; font-weight: 800; }
.price__current--single.price__sale { color: #e4002b; }
/* Prix des cartes produit (vue grille) : noir + gras, comme la vue liste (n'affecte pas la fiche produit). */
.productitem__price .price__current--single { color: #111; font-weight: 800; }
.productitem__price .price__current--single.price__sale { color: #111; }
/* Cartes produit (grille) : le prix héritait de 30px (fiche produit) → débordait des cartes
   étroites sur mobile. On le dimensionne pour la carte + on empêche tout débordement. */
.productgrid--outer .productitem__price { flex-wrap: wrap; }
.productgrid--outer .productitem__price .price__current--single { font-size: 16px; word-break: normal; }
.productgrid--outer .productitem__price .price__compare-at--single { font-size: 14px; }
.productgrid--outer .productitem__price .price__compare-at { margin: 0; }
/* Note : les étoiles + « N Commentaires » passent à la ligne au lieu d'être coupées. */
.productgrid--outer .product__rating { flex-wrap: wrap; gap: 3px 8px; }
.productgrid--outer .rating__count { white-space: nowrap; }
.productgrid--outer .rating__count span { font-size: 12px; color: #555; }
@media (max-width: 430px) {
  .productgrid--outer .productitem__price .price__current--single { font-size: 15px; }
  .productgrid--outer .productitem--title { font-size: 14px; }
  .productgrid--outer .rating__count span { font-size: 11px; }
}
.price__compare-at--single { color: #9ca3af; text-decoration: line-through; font-size: 18px; }
/* Le theme.css du CDN met AUSSI un line-through sur le CONTENEUR .price__compare-at → double
   trait avec celui du span. On neutralise celui du conteneur : un seul barré, propre. */
.price__compare-at { text-decoration: none !important; }
.v001-save-inline { background: #634c9f; color: #fff; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 6px; }

/* form */
.variant-selection { margin: 8px 0 16px; }
.variant-selection__label, .quantity-selector__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* Sélecteur de saveur : étiquette flottante au-dessus de la valeur (comme le thème original,
   .options-selection__select-label). Le <label> est en pointer-events:none pour que le clic
   traverse jusqu'au <select> natif ; la flèche est dessinée en fond (appearance:none). */
.variant-selection__field { position: relative; }
.variant-selection--single { display: none; } /* variante unique : pas de sélecteur (comme l'original) */
/* État par défaut (aucune saveur choisie) : l'étiquette fait office de texte d'invite, en grand
   et centrée verticalement. Elle rétrécit et remonte dès qu'une saveur est sélectionnée
   (classe posée par app-empire.js ; :has() en second filet pour les navigateurs récents). */
.variant-selection__floating { position: absolute; top: 18px; left: 15px; z-index: 2; font-size: 16px; line-height: 1; color: #949494; pointer-events: none;
  transition: top 125ms cubic-bezier(0, 0, .2, 1), font-size 125ms cubic-bezier(0, 0, .2, 1); }
.variant-selection__field.is-chosen .variant-selection__floating { top: 9px; font-size: 13px; }
/* Règle séparée : un navigateur sans :has() invaliderait tout le sélecteur s'il était groupé. */
.variant-selection__field:has(.variant-selection__variants:valid) .variant-selection__floating { top: 9px; font-size: 13px; }
.variant-selection__variants { width: 100%; padding: 25px 40px 9px 14px; border: 1px solid #d0d0d0; border-radius: 8px; font-size: 16px; line-height: 1.3; background: #fff; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234d4d4d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
/* iOS/Safari colore le texte des <select> en bleu système : on force le noir (comme l'original). */
.variant-selection__variants, .v001-tier__select, .v001-fl__input, select { color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; }
.variant-selection__variants option, .v001-tier__select option, select option { color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; }
.variant-selection__variants.is-error { border-color: #e4002b; }
.product-form__action-wrapper { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.quantity-selector__wrapper { display: inline-flex; align-items: center; border: 1px solid #d0d0d0; border-radius: 8px; overflow: hidden; }
.quantity-selector__button { width: 42px; height: 46px; border: 0; background: #f5f5f5; font-size: 20px; cursor: pointer; }
.quantity-selector__input { width: 56px; height: 46px; border: 0; text-align: center; font-size: 16px; -moz-appearance: textfield; }
.quantity-selector__input::-webkit-outer-spin-button, .quantity-selector__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* flex-basis:auto (pas 200px) : sinon en colonne (mobile, imposé par le thème) le 200px
   devient une HAUTEUR et le bouton s'étire démesurément. */
.product-form__add { flex: 1 1 auto; min-height: 50px; background: #634c9f; color: #fff; border: 0; border-radius: 8px;
    font-size: 16px; font-weight: 700; cursor: pointer; transition: .15s; }
@media (max-width: 760px) { .product-form__action-wrapper { align-items: stretch; } }
.product-form__add:hover { background: #52407f; }
.product-form__add:disabled { background: #3a3a3a; cursor: not-allowed; }

/* partage */
.product-block--share { margin-top: 18px; }
.share-buttons { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.share-buttons--title { font-size: 13px; color: #6b7280; }
.share-buttons--list { display: flex; gap: 8px; }
.share-buttons--button { font-size: 13px; color: #634c9f; border: 1px solid #e2e2e2; border-radius: 6px; padding: 5px 12px; }
.share-buttons--button:hover { background: #f6f6f6; }

/* description */
.product-block--description { margin-top: 18px; }
.product-description.rte { color: #333; line-height: 1.6; font-size: 15px; }
.product-description.is-hidden { display: none; }

/* onglets */
.product-block--collapsible-tab { border-top: 1px solid #ececec; margin: 0; }
.product-block--collapsible-tab:last-child { border-bottom: 1px solid #ececec; }
.collapsible-tab { }
.collapsible-tab__heading { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
    padding: 16px 2px; font-size: 16px; font-weight: 600; }
.collapsible-tab__heading::-webkit-details-marker { display: none; }
.collapsible-tab__icon { font-size: 20px; color: #634c9f; transition: transform .2s; }
details[open] .collapsible-tab__icon { transform: rotate(45deg); }
.collapsible-tab__text { padding: 0 2px 18px; color: #444; line-height: 1.6; font-size: 14px; }
.collapsible-tab__text h3 { font-size: 15px; margin: 14px 0 6px; }
.collapsible-tab__text ul { padding-left: 20px; }

/* note Loox en haut de la fiche */
.product-block--loox-rating { margin-bottom: 4px; }
/* Le layout Empire ne charge pas app.css (qui neutralise le style des liens) : sans ça, ce lien
   garde le bleu souligné par défaut du navigateur → trait bleu sous les étoiles jaunes. */
.v001-loox-top { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.v001-loox-stars { position: relative; display: inline-block; font-size: 17px; letter-spacing: 1px; color: #e0e0e0; line-height: 1; }
.v001-loox-stars::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--rating-value, 5) / 5 * 100%); overflow: hidden; color: #EBBF20; white-space: nowrap; }
.v001-loox-count { font-size: 13px; color: #6b7280; }

/* hint zoom galerie */
.v001-zoom-hint { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.92); color: #333; font-size: 12px; padding: 6px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* partage coloré */
.share-buttons--button { width: 34px; height: 34px; border: 0 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; padding: 0 !important; }
.share-buttons--facebook { background: #1877f2; }
.share-buttons--twitter { background: #000; }
.share-buttons--linkedin { background: #0a66c2; }
.share-buttons--pinterest { background: #e60023; }
.share-buttons--whatsapp { background: #25d366; }
.share-buttons--button:hover { opacity: .88; background: inherit; }

/* Widget Achetez par lot */
.product-block--bundle { margin: 18px 0; }
.v001-bundle__title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.v001-tier { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.v001-tier.is-selected { border-color: #634c9f; box-shadow: 0 0 0 1px #634c9f; }
.v001-tier__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; cursor: pointer; }
.v001-tier__head input { margin-top: 3px; accent-color: #634c9f; }
.v001-tier__label { flex: 1; font-size: 14px; font-weight: 600; }
.v001-tier__pricing { text-align: right; font-size: 12px; line-height: 1.6; }
.v001-tier__save { display: block; color: #634c9f; font-weight: 700; }
.v001-tier__unit s, .v001-tier__total s { color: #9ca3af; }
.v001-tier__total { display: block; color: #555; }
.v001-tier__rows { display: none; padding: 0 16px 16px; }
.v001-tier.is-selected .v001-tier__rows { display: block; }
.v001-tier__row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.v001-tier__num { width: 26px; color: #6b7280; font-size: 13px; }
.v001-tier__select { flex: 1; padding: 10px 12px; border: 1px solid #d0d0d0; border-radius: 8px; font-size: 14px; background: #fff; }
.v001-tier__add { display: flex; align-items: center; gap: 10px; width: 100%; background: #f5f5f5; border: 1px dashed #cfcfcf; border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.v001-tier__add[hidden] { display: none; }
.v001-tier__plus { flex: 1; text-align: center; font-size: 20px; color: #634c9f; font-weight: 700; }
.v001-bundle__cta { width: 100%; background: #634c9f !important; color: #fff !important; border: 0; border-radius: 8px;
    padding: 14px; font-size: 15px !important; font-weight: 800; letter-spacing: .3px; line-height: 1.3 !important;
    text-indent: 0 !important; text-transform: none !important; cursor: pointer; opacity: 1 !important; visibility: visible !important; }
.v001-bundle__cta:hover { background: #52407f !important; }

/* Bloc info paliers de remise */
.v001-discount-info { border: 1px solid #ececec; border-radius: 10px; padding: 16px; margin-top: 14px; }
.v001-discount-info .discount-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.v001-discount-info .discount-row + .discount-row { border-top: 1px solid #f2f2f2; }
.v001-discount-info .discount-info { display: flex; align-items: center; }
.v001-discount-info .bullet { width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 10px; display: inline-block; }
.v001-discount-info .discount-info p { margin: 0; font-size: 14px; }
.v001-discount-info .discount-icon img { height: 74px; width: auto; }
.v001-off-badge { display: inline-flex; align-items: center; justify-content: center; background: #634c9f; color: #fff; font-weight: 800; font-size: 14px; border-radius: 8px; padding: 8px 12px; }
.v001-discount-info .note { color: #555; font-size: 12px; margin: 10px 0 0; }

/* ============================ BLOG (listing) ============================ */
.blog--container { max-width: 1600px; margin: 10px auto 48px; padding: 0 40px; }
.blog--masthead { margin: 14px 0 30px; }
.blog--title { font-size: 34px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin: 0; }
.article--excerpt-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 40px; }
.article--excerpt { display: flex; flex-direction: column; }
/* Liste d'articles (page blog) — l'image doit occuper TOUTE la largeur de la colonne,
   sinon elle se cale à gauche pendant que le texte reste centré → décalage visible.
   theme.css impose une `height` fixe (15.625rem) : combinée à notre aspect-ratio, c'était
   elle qui dictait la largeur. On force donc width/height explicitement, ici uniquement
   (l'accueil garde le rendu du thème). */
.article--excerpt-list .article--excerpt-image-link { display: block; }
.article--excerpt-list .article--excerpt-image { width: 100%; height: auto; }
.article--excerpt-image { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin: 0 0 18px; background: #f4f4f5; display: block; }
.article--excerpt-image img { width: 100% !important; height: 100% !important; object-fit: cover; opacity: 1 !important; visibility: visible !important; }
.article--excerpt-content { display: flex; flex-direction: column; }
/* theme.css met padding:1.25rem sur le contenu : le texte serait centré sur une largeur
   différente de celle de l'image. On l'aligne exactement sur l'image (page blog). */
.article--excerpt-list .article--excerpt-content { padding: 0; width: 100%; }
.article--excerpt-meta { color: #9ca3af; font-size: 13px; text-align: center; margin-bottom: 10px; }
.article--excerpt-title { font-size: 21px; line-height: 1.3; text-align: center; margin: 0 0 14px; font-weight: 700; }
.article--excerpt-title a { color: #1a1a1a; }
.article--excerpt-title a:hover { color: #634c9f; }
.article--excerpt-text.rte { color: #555; font-size: 14px; line-height: 1.65; text-align: center; }
.article--excerpt-readmore { display: block; text-align: center; color: #634c9f; font-weight: 600; margin-top: 16px; }
.article--excerpt-readmore:hover { text-decoration: underline; }
@media (max-width: 900px) { .article--excerpt-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .article--excerpt-list { grid-template-columns: 1fr; } }

/* ============================ ARTICLE ============================ */
.article--single { max-width: 820px; margin: 8px auto 48px; padding: 0 20px; }
.article--masthead { text-align: center; margin: 16px 0 26px; }
.article--meta { color: #9ca3af; font-size: 13px; margin-bottom: 12px; }
.article--author { margin-left: 8px; }
.article--title { font-size: 34px; line-height: 1.22; font-weight: 700; margin: 0; }
.article--image { margin: 0 0 32px; border-radius: 12px; overflow: hidden; }
.article--image img { width: 100%; height: auto; display: block; }
.article--content.rte { line-height: 1.8; color: #333; font-size: 17px; }
.article--content.rte h2 { font-size: 26px; margin: 32px 0 12px; }
.article--content.rte h3 { font-size: 21px; margin: 26px 0 10px; }
.article--content.rte p { margin: 0 0 18px; }
.article--content.rte a { color: #634c9f; text-decoration: underline; }
.article--content.rte img { max-width: 100%; height: auto; border-radius: 8px; margin: 14px 0; }
.article--content.rte ul, .article--content.rte ol { padding-left: 24px; margin: 0 0 18px; }
.article--content.rte li { margin: 6px 0; }
.article--tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0; }
.article--tag { background: #f2f2f4; border-radius: 999px; padding: 5px 14px; font-size: 13px; color: #555; }
.article--nav { display: flex; justify-content: space-between; gap: 30px; margin-top: 44px; padding-top: 10px; }
.article--nav a { flex: 1; max-width: 48%; text-decoration: none !important; }
.article--nav-next { text-align: right; margin-left: auto; }
.article--nav-label { display: block; color: #3a3a3a; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.article--nav-title { display: block; color: #555; font-size: 15px; line-height: 1.5; font-style: italic; }
.article--nav a:hover .article--nav-title { color: #634c9f; }

/* ============================ PAGE CMS ============================ */
.site-page { max-width: 1080px; margin: 8px auto 48px; padding: 0 20px; }
.page-masthead { margin: 12px 0 26px; text-align: center; }
.page-title { font-size: 34px; font-weight: 700; margin: 0; }
.page-content.rte { line-height: 1.75; color: #333; font-size: 16px; }
.page-content.rte h2 { font-size: 26px; margin: 30px 0 12px; }
.page-content.rte h3 { font-size: 20px; margin: 24px 0 10px; }
.page-content.rte p { margin: 0 0 16px; }
.page-content.rte ul, .page-content.rte ol { padding-left: 24px; margin: 0 0 16px; }
.page-content.rte li { margin: 6px 0; }
.page-content.rte a { color: #634c9f; text-decoration: underline; }
.page-content.rte img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.page-content.rte table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.page-content.rte td, .page-content.rte th { border: 1px solid #e5e7eb; padding: 8px 12px; }

/* ---- Produits connexes (recommandations) ---- */
.v001-related { max-width: 1240px; margin: 44px auto; padding: 0 20px; }
.v001-related__title { text-align: center; font-size: 26px; font-weight: 700; margin: 0 0 26px; }
.v001-related__grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 22px; list-style: none; margin: 0; padding: 0; }
.v001-related__grid .productgrid--item { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; min-width: 0; }
.v001-related__grid .productitem, .v001-related__grid .productitem__container, .v001-related__grid .productitem__image-container, .v001-related__grid .productitem--info { width: 100% !important; max-width: none !important; }
.v001-related__grid .productitem--image { position: relative; aspect-ratio: 1/1; background: #f4f4f5; overflow: hidden; display: block; }
.v001-related__grid .productitem--image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.v001-related__grid .productitem--title { font-size: 14px; line-height: 1.35; margin: 10px 0 4px; }
@media (max-width: 1000px) { .v001-related__grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .v001-related__grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ---- Section avis (reproduction Loox) ---- */
.v001-reviews { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.v001-reviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.v001-reviews__bar-left { display: flex; align-items: center; gap: 12px; }
.v001-rev-stars { display: inline-flex; font-size: 18px; letter-spacing: 1px; }
.v001-rev-star { color: #e0e0e0; position: relative; }
.v001-rev-star.on { color: #EBBF20; }
.v001-rev-star.empty { color: #EBBF20; }   /* contour doré (caractère ☆) */
.v001-rev-star.half { color: #e0e0e0; }
.v001-rev-star.half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #EBBF20; }
.v001-reviews__filter-toggle { background: none; border: 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.v001-caret { font-size: 12px; color: #888; }
.v001-reviews__bar-right { display: flex; align-items: center; gap: 10px; }
.v001-reviews__write { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.v001-reviews__write:hover { background: #f6f6f6; }
.v001-reviews__filter-icon { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.v001-reviews__bar { position: relative; }
.v001-reviews__bar-right { position: relative; }
.v001-reviews__sortmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: #fff; border-radius: 14px;
    box-shadow: 0 14px 44px rgba(0,0,0,.18); padding: 16px 8px 10px; min-width: 300px; }
.v001-reviews__sortmenu[hidden] { display: none; }
.v001-reviews__sortmenu-title { font-size: 20px; font-weight: 700; padding: 4px 16px 10px; }
.v001-reviews__sortmenu-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none;
    border: 0; padding: 13px 16px; font-size: 16px; text-align: left; cursor: pointer; color: #222; border-radius: 8px; }
.v001-reviews__sortmenu-opt:hover { background: #f5f5f5; }
.v001-reviews__sortmenu-check { opacity: 0; font-weight: 700; }
.v001-reviews__sortmenu-opt.is-active .v001-reviews__sortmenu-check { opacity: 1; }
.v001-reviews__sortmenu-by { text-align: right; color: #b0b0b0; font-size: 13px; padding: 10px 16px 4px; }
/* Menu de tri sur mobile : il débordait de l'écran PAR LA GAUCHE.
   Il est calé à droite (`right: 0`) dans .v001-reviews__bar-right, qui est étroit et, une fois la
   barre passée à la ligne, se retrouve collé à gauche : ses 300 px minimum partaient donc hors du
   cadre, et les libellés de tri arrivaient tronqués (« sorteerd op », « bevolen »…).
   On rend .v001-reviews__bar-right non positionné sous 640 px : le menu s'ancre alors sur la
   barre entière (qui est, elle, en position: relative et large comme la section) et s'étale
   d'un bord à l'autre. Le max-width est un garde-fou : quel que soit l'ancrage, ce menu ne peut
   plus dépasser l'écran. */
@media (max-width: 640px) {
    .v001-reviews__bar-right { position: static; }
    .v001-reviews__sortmenu { left: 0; right: 0; min-width: 0; width: auto; }
}
.v001-reviews__sortmenu { max-width: calc(100vw - 32px); box-sizing: border-box; }
.v001-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.v001-rev { border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.v001-rev__media { aspect-ratio: 1/1; background: #f4f4f5; }
.v001-rev__media img { width: 100%; height: 100%; object-fit: cover; }
.v001-rev__body { padding: 12px 14px; }
.v001-rev__author { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.v001-rev__verified { display: inline-flex; align-items: center; gap: 3px; color: #137333; font-size: 11px; font-weight: 600; }
.v001-rev__verified svg { color: #2c9e4b; }
.v001-rev__date { color: #9ca3af; font-size: 12px; margin: 2px 0 6px; }
.v001-rev__title { font-weight: 600; font-size: 14px; margin: 6px 0 2px; }
.v001-rev__text { font-size: 14px; line-height: 1.5; margin: 4px 0; color: #333; }
.v001-rev__reply { font-size: 13px; color: #555; background: #f6f6f7; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.v001-rev__variant { font-size: 14px; color: #333; border-top: 1px solid #efefef; margin-top: 10px; padding-top: 10px; }
.v001-rev__variant-label { color: #9ca3af; display: block; font-size: 13px; }
.v001-rev-empty { color: #888; grid-column: 1 / -1; }
.v001-reviews__more { margin: 24px auto 0; display: block; background: #fff; border: 1px solid #634c9f; color: #634c9f; border-radius: 8px; padding: 12px 26px; font-weight: 600; cursor: pointer; }
.v001-reviews__more:hover { background: #634c9f; color: #fff; }
.v001-reviews__by { text-align: center; color: #b0b0b0; font-size: 12px; margin-top: 16px; }
/* modal écrire un avis */
.v001-rev-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.v001-rev-modal[hidden] { display: none; }
.v001-rev-modal__box { background: #fff; border-radius: 14px; padding: 24px; width: 440px; max-width: 100%; position: relative; }
.v001-rev-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 24px; cursor: pointer; color: #999; }
.v001-rev-modal__box h3 { margin: 0 0 14px; }
.v001-rev-form__stars { font-size: 30px; color: #e0e0e0; margin-bottom: 12px; }
.v001-rev-form__star { cursor: pointer; }
.v001-rev-form__star.on { color: #EBBF20; }
.v001-rev-form__input { width: 100%; border: 1px solid #d0d0d0; border-radius: 8px; padding: 11px 13px; font-size: 14px; margin-bottom: 10px; font-family: inherit; }
.v001-rev-form__submit { width: 100%; background: #634c9f; color: #fff; border: 0; border-radius: 8px; padding: 12px; font-weight: 700; cursor: pointer; }
.v001-rev-form__msg { font-size: 13px; color: #137333; margin: 10px 0 0; text-align: center; }

/* ============================================================
   Espace client (/account) — carte façon « nouveaux comptes
   clients » Shopify, intégrée dans le chrome Empire.
   ============================================================ */
.v001-account { max-width: 1100px; margin: 0 auto; padding: 48px 20px 72px; }

/* --- Carte de connexion --- */
.v001-account__card {
  max-width: 440px; margin: 0 auto; background: #fff;
  border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 40px 36px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.v001-account__title { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: #111; text-align: center; }
.v001-account__hint { font-size: 15px; color: #555; line-height: 1.5; margin: 0 0 22px; text-align: center; }
.v001-account__form { display: flex; flex-direction: column; }
/* L'attribut [hidden] doit gagner sur le display:flex ci-dessus (étape code masquée au départ). */
.v001-account [hidden] { display: none !important; }
.v001-account__label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.v001-account__input {
  width: 100%; box-sizing: border-box; padding: 13px 14px; font-size: 16px;
  border: 1px solid #c9c9c9; border-radius: 8px; margin-bottom: 18px; background: #fff; color: #111;
  transition: border-color .15s, box-shadow .15s;
}
.v001-account__input:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.v001-account__input--code { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; padding-left: .5em; }
.v001-account__btn {
  width: 100%; padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
  background: #111; color: #fff; border: 0; border-radius: 8px; transition: background .15s;
}
.v001-account__btn:hover { background: #333; }
.v001-account__links { display: flex; justify-content: space-between; margin-top: 16px; }
.v001-account__link { background: none; border: 0; padding: 0; font-size: 14px; color: #634c9f; cursor: pointer; text-decoration: underline; }
.v001-account__link:hover { color: #4a3877; }
.v001-account__error { color: #bf262f; font-size: 14px; text-align: center; margin: 14px 0 0; min-height: 1em; }
.v001-account__devcode { margin: 14px 0 0; text-align: center; font-size: 13px; color: #268c0b; background: #f0f9ee; border: 1px dashed #268c0b; border-radius: 6px; padding: 8px; }

/* --- Tableau de bord (connecté) --- */
.v001-account__dashhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.v001-account__hello { font-size: 15px; color: #555; margin: 6px 0 0; }
.v001-account__email { color: #111; font-weight: 600; }
.v001-account__logout { font-size: 14px; font-weight: 600; color: #111; border: 1px solid #c9c9c9; border-radius: 8px; padding: 10px 18px; text-decoration: none; white-space: nowrap; transition: background .15s; }
.v001-account__logout:hover { background: #f5f5f5; }
.v001-account__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; }
@media (max-width: 800px) { .v001-account__grid { grid-template-columns: 1fr; } }
.v001-account__blocktitle { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: #111; }
.v001-account__empty { font-size: 14px; color: #888; }
.v001-account__order, .v001-account__address { border: 1px solid #eaeaea; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.v001-account__orderhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.v001-account__ordermeta { font-size: 13px; color: #888; }
.v001-account__ordertotal { margin-left: auto; }
.v001-account__badge { font-size: 12px; font-weight: 600; background: #f0eefa; color: #634c9f; border-radius: 999px; padding: 3px 10px; text-transform: capitalize; }
.v001-account__items { margin: 8px 0 0; padding-left: 18px; font-size: 14px; color: #444; }
.v001-account__items li { margin: 2px 0; }
.v001-account__tracking { display: inline-block; margin-top: 10px; font-size: 14px; color: #634c9f; text-decoration: none; }
.v001-account__tracking:hover { text-decoration: underline; }
.v001-account__address p { font-size: 14px; line-height: 1.6; color: #333; margin: 6px 0 0; }

/* Inscription enrichie : case à cocher marketing */
.v001-account__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #555; line-height: 1.4; margin: 4px 0 20px; cursor: pointer; }
.v001-account__checkbox input { margin-top: 2px; flex-shrink: 0; }

/* Carte connexion — visuel « nouveaux comptes » (sous-titre + champ e-mail avec flèche) */
.v001-account__subtitle { font-size: 15px; color: #6b7280; text-align: center; margin: 0 0 26px; }
.v001-account__field { position: relative; }
.v001-account__input--arrow { padding-right: 52px; margin-bottom: 16px; }
.v001-account__arrow {
  position: absolute; top: 7px; right: 7px; width: 38px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; border-radius: 7px; cursor: pointer;
  background: #111; color: #fff; transition: background .15s;
}
.v001-account__input--arrow:focus + .v001-account__arrow, .v001-account__arrow:hover { background: #333; }

/* ============================================================
   Page de compte ISOLÉE (connexion/tableau de bord) — calquée
   sur la page hébergée Shopify : logo haut, carte centrée,
   privacy en bas, sans header/footer du site.
   ============================================================ */
.v001-account-page { background: #fff; }
.v001-authpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 28px; box-sizing: border-box; }
.v001-authpage__logo { display: inline-block; margin: 20px 0 0; }
.v001-authpage__logo img { width: 190px; height: auto; display: block; }
.v001-authpage__body { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.v001-authpage__footer { padding-top: 24px; }
.v001-authpage__footer a { color: #634c9f; font-size: 13px; text-decoration: none; }
.v001-authpage__footer a:hover { text-decoration: underline; }

/* Dans la page isolée : la carte de connexion n'a PAS de bordure/ombre (contenu sur blanc,
   comme l'original). Les champs gardent la leur. Le tableau de bord garde un cadre léger. */
.v001-account-page .v001-account { padding: 0; max-width: 460px; width: 100%; }
.v001-account-page .v001-account__card { border: 0; box-shadow: none; padding: 0; max-width: 420px; }
/* Le tableau de bord (connecté) ne doit PAS être contraint à 460px : il enveloppe le
   même .v001-account que la carte de login mais s'étale sur toute la largeur du contenu. */
.v001-account-page--dash .v001-account { max-width: none; width: auto; padding: 0; }

/* ---- Tableau de bord client (connecté) : barre haute + menu latéral, façon original ---- */
.v001-account-page--dash { background: #fff; }
/* Barre du haut ET contenu dans le MÊME conteneur centré : le logo s'aligne au-dessus du menu
   et l'avatar au bord droit du contenu (sinon logo/avatar collés aux bords → « trop éloigné »). */
.v001-authtop { display: flex; align-items: center; justify-content: space-between; max-width: 1160px; margin: 0 auto; padding: 30px 24px 10px; }
.v001-authtop__logo img { width: 200px; height: auto; display: block; }
.v001-authtop__avatar { width: 44px; height: 44px; border: 1px solid #e2e2e2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #333; }
.v001-authmain { max-width: 1160px; margin: 0 auto; padding: 24px 24px 80px; }
.v001-dash { display: grid; grid-template-columns: 190px 1fr; gap: 36px; align-items: start; }
@media (max-width: 720px) { .v001-dash { grid-template-columns: 1fr; gap: 20px; } }
.v001-dash__nav { display: flex; flex-direction: column; gap: 8px; }
.v001-dash__navlink { font-size: 19px; color: #6b7280; text-decoration: none; padding: 6px 0; font-weight: 500; }
.v001-dash__navlink.is-active { color: #111; font-weight: 700; }
.v001-dash__navlink:hover { color: #111; }
.v001-dash__welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #e6e6e6; border-radius: 16px; padding: 30px 34px; max-width: 620px; }
.v001-dash__welcometext h2 { font-size: 23px; font-weight: 700; margin: 0 0 6px; color: #111; }
.v001-dash__welcometext p { font-size: 17px; color: #6b7280; margin: 0; }
.v001-dash__cta { background: #634c9f; color: #fff; border-radius: 999px; padding: 13px 26px; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s; }
.v001-dash__cta:hover { background: #4a3877; }
.v001-dash__h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: #111; }
.v001-dash__h3 { font-size: 16px; font-weight: 700; margin: 26px 0 12px; color: #111; }
.v001-dash__id { font-size: 15px; color: #444; line-height: 1.5; margin: 0; }
.v001-dash__profile .v001-account__logout { display: inline-block; margin-top: 28px; }

/* ---- Onglet Profil (calqué sur l'original) ---- */
.v001-prof { max-width: 600px; }
.v001-prof__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.v001-prof__head:not(:first-child) { margin-top: 30px; }
.v001-prof__h2 { font-size: 20px; font-weight: 700; color: #111; margin: 0; }
.v001-prof__h2--mt { margin: 34px 0 12px; }
.v001-prof__btn { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #111; cursor: pointer; transition: background .15s; }
.v001-prof__btn:hover { background: #f5f5f5; }
.v001-prof__field { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; font-size: 15px; }
.v001-prof__flabel { color: #8a8a8a; }
.v001-prof__fval { color: #111; text-align: right; }
.v001-prof__empty, .v001-prof__toglabel { display: flex; align-items: center; gap: 12px; color: #8a8a8a; }
.v001-prof__addr { color: #333; }
.v001-prof__icon { color: #9a9a9a; flex-shrink: 0; }
.v001-prof__toglabel { color: #111; }
/* Interrupteur (toggle) */
.v001-switch { position: relative; width: 44px; height: 24px; border-radius: 999px; border: 0; background: #d0d0d0; cursor: pointer; padding: 0; transition: background .15s; flex-shrink: 0; }
.v001-switch.is-on { background: #634c9f; }
.v001-switch__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.v001-switch.is-on .v001-switch__knob { left: 22px; }
/* Formulaires édition / ajout d'adresse */
.v001-prof__edit { border: 1px solid #e6e6e6; border-radius: 12px; padding: 18px; margin-bottom: 10px; }
.v001-prof__ilabel { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 12px; }
.v001-prof__ilabel .v001-account__input { margin-top: 6px; margin-bottom: 0; }
.v001-prof__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .v001-prof__grid2 { grid-template-columns: 1fr; } }
.v001-prof__editrow { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.v001-prof__save { width: auto; padding: 11px 22px; }
/* Déconnexion */
.v001-prof__actions { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.v001-prof__logoutall { color: #634c9f; font-size: 14px; text-decoration: none; }
.v001-prof__logoutall:hover { text-decoration: underline; }
.v001-prof__error { color: #bf262f; font-size: 14px; margin-top: 12px; }
/* Pied de page du tableau de bord */
.v001-authdashfooter { text-align: center; padding: 30px 20px; }
.v001-authdashfooter a { color: #634c9f; font-size: 13px; text-decoration: none; }

/* ---- Modales du compte (Modifier le profil / Ajouter une adresse) ---- */
.v001-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.v001-modal[hidden] { display: none; }
.v001-modal__backdrop { position: absolute; inset: 0; background: rgba(20,20,20,.45); }
.v001-modal__card { position: relative; background: #fff; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.32); width: 100%; max-width: 640px; padding: 26px 30px 28px; max-height: 92vh; overflow: auto; }
.v001-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.v001-modal__title { font-size: 26px; font-weight: 700; color: #111; margin: 0; }
.v001-modal__x { background: none; border: 0; font-size: 26px; line-height: 1; color: #555; cursor: pointer; padding: 0 4px; }
.v001-modal__x:hover { color: #111; }
.v001-modal__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .v001-modal__grid2 { grid-template-columns: 1fr; } }
.v001-modal__help { font-size: 13px; color: #8a8a8a; margin: 8px 2px 0; }
.v001-modal__check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #333; margin: 18px 2px 0; cursor: pointer; }
.v001-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 26px; }
.v001-modal__cancel { background: none; border: 0; color: #634c9f; text-decoration: underline; font-size: 15px; cursor: pointer; padding: 0; }
.v001-modal__save { background: #f1f1f1; color: #6b6b6b; border: 0; border-radius: 12px; padding: 15px 28px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.v001-modal__save:hover { background: #e7e7e7; }

/* Champ à label flottant (façon nouveaux comptes Shopify) */
.v001-fl { position: relative; margin-bottom: 14px; }
.v001-fl__input { width: 100%; box-sizing: border-box; border: 1px solid #c9c9c9; border-radius: 12px; padding: 22px 16px 8px; font-size: 15px; color: #111; background: #fff; }
.v001-fl__input:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 2px rgba(99,76,159,.25); }
.v001-fl__input:disabled { background: #fbfbfb; color: #333; }
.v001-fl__label { position: absolute; left: 16px; top: 16px; color: #8a8a8a; font-size: 15px; pointer-events: none; transition: top .12s, font-size .12s; }
.v001-fl__input::placeholder { color: transparent; }
.v001-fl__input:focus + .v001-fl__label,
.v001-fl__input:not(:placeholder-shown) + .v001-fl__label,
.v001-fl--select .v001-fl__label { top: 8px; font-size: 12px; }
select.v001-fl__input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }

/* ---- Widget téléphone (drapeau + indicatif) dans la modale adresse ---- */
.v001-tel__input { padding-right: 96px; }
.v001-tel__flag { position: absolute; top: 8px; right: 8px; height: 40px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 0; border-left: 1px solid #e2e2e2; padding: 0 10px 0 12px; cursor: pointer; }
.v001-tel__flagimg { display: inline-flex; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.1); flex-shrink: 0; }
.v001-tel__flagimg svg { display: block; width: 100%; height: 100%; }
.v001-tel__caret { color: #888; }
/* Liste en position:fixed (posée par le JS) → déborde librement de la modale, non clippée. */
.v001-tel__list { position: fixed; z-index: 3000; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.2); overflow-y: auto; }
.v001-tel__list[hidden] { display: none; }
.v001-tel__opt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 9px 12px; font-size: 14px; text-align: left; cursor: pointer; border-radius: 8px; color: #222; }
.v001-tel__opt:hover, .v001-tel__opt:focus { background: #f2f2f2; outline: none; }
.v001-tel__optname { white-space: nowrap; }

/* ============================================================
   Tiroir « Ajouté à votre panier » (descend du haut, sans
   navigation) — reproduit le mini-panier de l'original.
   ============================================================ */
.v001-cartdrawer { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,0); transition: background .25s; }
.v001-cartdrawer[hidden] { display: none; }
.v001-cartdrawer.is-open { background: rgba(0,0,0,.12); }
.v001-cartdrawer__panel { position: absolute; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.16); transform: translateY(-100%); transition: transform .34s cubic-bezier(.2,.7,.3,1); padding: 26px 24px 30px; }
.v001-cartdrawer.is-open .v001-cartdrawer__panel { transform: translateY(0); }
.v001-cartdrawer__close { position: absolute; top: 16px; right: 24px; background: none; border: 0; font-size: 28px; line-height: 1; color: #333; cursor: pointer; }
.v001-cartdrawer__close:hover { color: #111; }
.v001-cartdrawer__inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.v001-cartdrawer__title { font-size: 22px; font-weight: 700; margin: 0 0 16px; color: #111; }
.v001-cartdrawer__check { color: #268c0b; }
.v001-cartdrawer__item { display: flex; align-items: center; gap: 16px; }
.v001-cartdrawer__img { width: 82px; height: 82px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; flex-shrink: 0; }
.v001-cartdrawer__info strong { display: block; font-size: 15px; color: #111; }
.v001-cartdrawer__variant { font-size: 14px; color: #666; margin: 3px 0; }
.v001-cartdrawer__qtyprice { font-size: 14px; color: #333; }
.v001-cartdrawer__right { text-align: right; }
.v001-cartdrawer__subtotal { font-size: 20px; color: #111; margin-bottom: 16px; }
.v001-cartdrawer__actions { display: flex; gap: 14px; justify-content: flex-end; }
.v001-cartdrawer__view { border: 1px solid #634c9f; color: #634c9f; border-radius: 8px; padding: 13px 24px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v001-cartdrawer__view:hover { background: #f3f0fa; }
.v001-cartdrawer__checkout { background: #634c9f; color: #fff; border-radius: 8px; padding: 13px 30px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v001-cartdrawer__checkout:hover { background: #4a3877; }
@media (max-width: 760px) {
  .v001-cartdrawer__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .v001-cartdrawer__right { text-align: left; }
  .v001-cartdrawer__actions { justify-content: stretch; }
  .v001-cartdrawer__view, .v001-cartdrawer__checkout { flex: 1; text-align: center; }
}

/* ============================================================
   Page panier (/cart) — parité avec l'original (chrome Empire).
   ============================================================ */
.v001-cart { max-width: 1200px; margin: 0 auto; padding: 40px 20px 70px; }
.v001-cart__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.v001-cart__title { font-size: 42px; font-weight: 400; margin: 0; color: #111; }
.v001-cart__topright { display: flex; align-items: center; gap: 22px; }
.v001-cart__topsub { text-align: right; font-size: 15px; color: #555; line-height: 1.3; }
.v001-cart__topsub span { display: block; }
.v001-cart__topsubval { font-size: 20px; color: #111; }
.v001-cart__checkbtn, .v001-cart__vabtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #634c9f; color: #fff; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .15s; }
.v001-cart__checkbtn { padding: 13px 26px; font-size: 15px; }
.v001-cart__checkbtn:hover, .v001-cart__vabtn:hover { background: #4a3877; }

/* Article */
.v001-cart__item { display: grid; grid-template-columns: 116px 1fr auto auto 40px; align-items: center; gap: 24px; border: 1px solid #ececec; border-radius: 12px; padding: 22px 24px; margin-bottom: 18px; }
.v001-cart__itemimg { display: block; }
.v001-cart__itemimg img { width: 100px; height: 100px; object-fit: contain; border: 1px solid #f0f0f0; border-radius: 8px; background: #fff; }
.v001-cart__itemtitle { display: block; font-size: 17px; font-weight: 700; color: #111; text-decoration: none; margin-bottom: 8px; }
.v001-cart__itemtitle:hover { color: #634c9f; }
.v001-cart__itemrow { font-size: 14px; color: #444; margin: 3px 0; }
.v001-cart__k { font-weight: 700; color: #222; }
.v001-cart__old { color: #999; margin-right: 4px; }
.v001-cart__now { color: #111; }
.v001-cart__itemqty { text-align: center; }
.v001-cart__qtylabel { font-size: 13px; font-weight: 700; color: #222; margin-bottom: 8px; }
.v001-cart__qtybox { display: inline-flex; align-items: center; border: 1px solid #d5d5d5; border-radius: 8px; overflow: hidden; }
.v001-cart__qtybtn { width: 44px; height: 46px; background: #fff; border: 0; font-size: 20px; color: #333; cursor: pointer; }
.v001-cart__qtybtn:hover { background: #f5f5f5; }
.v001-cart__qtyinput { width: 54px; height: 46px; border: 0; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; text-align: center; font-size: 16px; -moz-appearance: textfield; }
.v001-cart__qtyinput::-webkit-outer-spin-button, .v001-cart__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v001-cart__itemtotal { font-size: 17px; font-weight: 600; color: #111; white-space: nowrap; }
.v001-cart__itemremove { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f0f0f0; color: #555; font-size: 18px; cursor: pointer; line-height: 1; }
.v001-cart__itemremove:hover { background: #e2e2e2; color: #111; }
@media (max-width: 720px) {
  .v001-cart__item { grid-template-columns: 80px 1fr auto; grid-template-areas: "img info remove" "img qty total"; }
  .v001-cart__itemimg { grid-area: img; } .v001-cart__iteminfo { grid-area: info; } .v001-cart__itemqty { grid-area: qty; text-align: left; }
  .v001-cart__itemtotal { grid-area: total; } .v001-cart__itemremove { grid-area: remove; justify-self: end; }
}

/* Récap + actions */
.v001-cart__hr { border: 0; border-top: 1px solid #eee; margin: 34px 0 26px; }
.v001-cart__subtotalrow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.v001-cart__subtotallabel { font-size: 24px; color: #111; }
.v001-cart__subtotalval { font-size: 24px; font-weight: 700; color: #111; }
.v001-cart__taxnote { font-size: 14px; color: #666; margin: 6px 0; }
.v001-cart__shipcalc { font-size: 15px; font-weight: 700; color: #111; margin: 10px 0 24px; cursor: pointer; }
.v001-cart__vabtn { width: 100%; padding: 16px; font-size: 16px; box-sizing: border-box; }
.v001-cart__continue { display: inline-block; color: #634c9f; font-weight: 600; text-decoration: none; margin-top: 6px; }
.v001-cart__continue:hover { text-decoration: underline; }
.v001-cart__continue--center { display: block; text-align: center; margin: 22px auto 0; }
.v001-cart__empty { text-align: center; padding: 30px 0 10px; font-size: 16px; color: #555; }

/* Bloc promo « Achetez par lot » */
.v001-cart__promo { border: 1px solid #e2e2e2; border-radius: 12px; padding: 26px 30px; margin-top: 40px; }
.v001-cart__promorow { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.v001-cart__promorow p { margin: 0; font-size: 16px; color: #222; flex: 1; }
.v001-cart__bullet { width: 10px; height: 10px; border-radius: 50%; background: #333; flex-shrink: 0; }
.v001-cart__promoicon { height: 74px; width: auto; }
.v001-cart__promonote { color: #555; font-size: 14px; text-align: center; margin: 14px 0 0; }

/* ============================================================
   Checkout custom (calqué sur a.vapes001.com/checkout001).
   ============================================================ */
.v001-co-page { background: #f3f3f6; margin: 0; }
.v001-co-header { display: flex; align-items: center; justify-content: center; background: #fff; padding: 18px 24px; border-bottom: 1px solid #eee; }
.v001-co-brand { display: inline-flex; align-items: center; gap: 16px; }
.v001-co-logo img { height: 38px; width: auto; display: block; }
/* Sélecteur de langue à côté du logo */
.v001-co-lang { position: relative; }
.v001-co-langbtn { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #e6e6ea; border-radius: 10px; padding: 7px 11px; font-size: 15px; font-weight: 600; color: #333; cursor: pointer; }
.v001-co-langbtn:hover { border-color: #cfc7e6; }
.v001-co-langflag { border-radius: 50%; object-fit: cover; width: 22px; height: 22px; flex-shrink: 0; }
.v001-co-langcaret { color: #888; }
.v001-co-langmenu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.16); padding: 8px; margin: 0; list-style: none; min-width: 190px; z-index: 60; }
.v001-co-langopt { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 12px 16px; font-size: 16px; font-weight: 700; color: #222; cursor: pointer; text-align: left; }
.v001-co-langopt .v001-co-langflag { width: 26px; height: 26px; }
.v001-co-langopt:hover { background: #f4f2fb; }
.v001-co-langopt.is-current { background: #efeafb; color: #4a3877; }
.v001-co-main { min-height: 60vh; padding: 30px 20px 60px; }
.v001-co-footer { background: #1c1c1c; color: #cfcfcf; text-align: center; padding: 26px 20px; }
.v001-co-footlogo { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 1px; }
.v001-co-heart { color: #e0457b; margin: 0 2px; }
.v001-co-footer p { font-size: 13px; color: #9a9a9a; margin: 6px 0 0; }

.v001-co { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .v001-co { grid-template-columns: 1fr; } }

/* ---- Colonne commande ---- */
.v001-co-order { background: #fff; border-radius: 16px; padding: 26px 28px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.v001-co-editcart { display: inline-block; color: #634c9f; font-weight: 600; text-decoration: none; border: 1px solid #e3e0ef; border-radius: 10px; padding: 12px 18px; margin-bottom: 22px; }
.v001-co-editcart:hover { background: #f5f3fb; }
.v001-co-h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: .5px; color: #111; margin: 0 0 16px; }
.v001-co-i { color: #634c9f; flex-shrink: 0; }
.v001-co-progress { background: #f2effb; border-left: 3px solid #634c9f; border-radius: 8px; padding: 12px 16px; font-size: 14px; color: #333; margin-bottom: 18px; }
.v001-co-item { display: flex; gap: 16px; padding: 6px 0 18px; }
.v001-co-itemimg { width: 66px; height: 66px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; flex-shrink: 0; }
.v001-co-itemtitle { font-size: 15px; font-weight: 700; color: #111; }
.v001-co-itemsub { font-size: 13px; color: #777; margin: 2px 0; }
.v001-co-itemqty { font-size: 14px; color: #333; margin: 6px 0 4px; display: flex; align-items: center; gap: 8px; }
.v001-co-badge { background: #e7f6ea; color: #1a8a3b; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; }
.v001-co-itemprice { font-size: 15px; color: #111; }
.v001-co-old { color: #aaa; margin-right: 6px; }
.v001-co-itemsave { color: #1a8a3b; font-size: 13px; margin-top: 4px; }
.v001-co-totals { border-top: 1px solid #eee; padding-top: 16px; margin-top: 8px; }
.v001-co-line { display: flex; justify-content: space-between; font-size: 15px; color: #333; padding: 8px 0; }
.v001-co-green { color: #1a8a3b; }
.v001-co-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #eee; margin-top: 8px; padding-top: 16px; font-size: 18px; }
.v001-co-total strong { font-size: 20px; color: #111; }
.v001-co-artc { font-size: 13px; color: #888; font-weight: 400; }
.v001-co-savingsbox { background: #fdf6e3; border: 1px solid #f5e6bd; border-radius: 10px; padding: 14px 16px; font-size: 14px; color: #7a5b12; margin-top: 18px; }
.v001-co-perc { color: #d99a1c; font-weight: 800; margin-right: 6px; }
.v001-co-freeship { color: #1a8a3b; font-size: 14px; margin: 14px 0 0; }
.v001-co-check { color: #1a8a3b; }

/* ---- Colonne formulaires ---- */
.v001-co-forms { display: flex; flex-direction: column; gap: 30px; }
/* Espacement uniforme entre les cartes (contact / adresse / livraison / paiement),
   qui vivent DANS le <form> — le gap de .v001-co-forms ne les atteint pas. */
[data-checkout-form] { display: flex; flex-direction: column; gap: 30px; }
.v001-co-login { background: linear-gradient(135deg,#6d54ad,#5a3f96); color: #fff; border-radius: 16px; padding: 22px 24px; }
.v001-co-login-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.v001-co-login-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v001-co-login strong { font-size: 17px; }
.v001-co-login p { margin: 4px 0 0; font-size: 14px; color: #e7e1f5; }
.v001-co-loginbtn { display: block; text-align: center; background: #fff; color: #4a3877; border-radius: 10px; padding: 13px; font-weight: 700; text-decoration: none; }
.v001-co-card { background: #fff; border-radius: 18px; padding: 30px 32px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.v001-co-h3 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; letter-spacing: .5px; color: #222; margin: 0 0 22px; }
.v001-co-field { position: relative; margin-bottom: 16px; }
.v001-co-field input, .v001-co-field select, .v001-tel__input { width: 100%; box-sizing: border-box; border: 1px solid #dcdce2; border-radius: 12px; padding: 18px 18px; font-size: 16px; color: #111; background: #fff; }
.v001-co-field input:focus, .v001-co-field select:focus, .v001-tel__input:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 2px rgba(99,76,159,.18); }
.v001-co-field--icon input, .v001-co-field--icon select { padding-right: 46px; }
.v001-co-fi { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; color: #bcbcc4; font-size: 17px; pointer-events: none; }
.v001-co-field--select select { appearance: none; padding-top: 25px; padding-bottom: 9px; }
.v001-co-flabel { position: absolute; top: 8px; left: 18px; font-size: 12px; color: #9a9a9a; pointer-events: none; }
.v001-co-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v001-co-promo { display: flex; gap: 12px; margin: 16px 0; }
.v001-co-promofield { flex: 1; margin: 0; }
.v001-co-promobtn { background: #634c9f; color: #fff; border: 0; border-radius: 12px; padding: 0 26px; font-size: 15px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.v001-co-promobtn:hover { background: #57408c; }
/* Verdict du code promo : vert quand il est pris, rouge quand il est refusé — et toujours une
   phrase, jamais une couleur seule (un daltonien doit lire la réponse, pas la deviner). */
.v001-co-promobtn[disabled] { opacity: .6; cursor: progress; }
.v001-co-promonote { margin: -6px 0 14px; font-size: 13.5px; line-height: 1.4; }
.v001-co-promonote.is-ok { color: #15803d; }
.v001-co-promonote.is-ko { color: #b91c1c; }
.v001-co-check { display: flex; align-items: center; gap: 11px; font-size: 15px; color: #444; margin-top: 8px; cursor: pointer; }
.v001-co-check input { width: 18px; height: 18px; accent-color: #634c9f; }
/* Livraison */
.v001-co-eta { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #555; margin: 0 0 18px; }
.v001-co-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.v001-co-tab { display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid #dcdce2; border-radius: 12px; padding: 18px; font-size: 16px; font-weight: 600; color: #444; cursor: pointer; }
.v001-co-tab svg { color: #444; }
.v001-co-tab.is-active { border-color: #634c9f; color: #634c9f; background: #f7f5fc; }
.v001-co-tab.is-active svg { color: #634c9f; }
.v001-co-radio, .v001-co-pay { display: flex; align-items: center; gap: 16px; border: 1px solid #dcdce2; border-radius: 12px; padding: 20px; margin-bottom: 14px; cursor: pointer; }
.v001-co-radio.is-selected, .v001-co-pay.is-selected { border-color: #634c9f; background: #faf9fd; }
.v001-co-radio input, .v001-co-pay input { accent-color: #634c9f; width: 20px; height: 20px; flex-shrink: 0; }
.v001-co-carinfo, .v001-co-payname { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.v001-co-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #8a8a8a; font-weight: 400; }
.v001-co-sub svg { color: #a0a0a0; }
/* Prix de livraison mis en avant dans la section « mode de livraison » (délai reste discret). */
.v001-co-shipsep { color: #c4c4cc; }
.v001-co-shipprice { font-size: 15px; font-weight: 700; color: #17171c; }
.v001-co-shipprice.is-free { color: #1a8a3b; }
/* Bouton « Point relais » sur chaque transporteur (mode point relais uniquement) */
.v001-co-relaybtn { display: none; background: #eaf2fb; color: #2f6fc0; font-size: 14px; font-weight: 700; border-radius: 999px; padding: 9px 18px; flex-shrink: 0; }
.v001-co-relaynote { display: flex; align-items: flex-start; gap: 7px; color: #6b6b6b; font-size: 14px; line-height: 1.45; margin: 16px 0 0; }
.v001-co-relaynote[hidden] { display: none; }
.v001-co-relaynote svg { color: #8a8a8a; flex-shrink: 0; margin-top: 2px; }
.is-pickup .v001-co-relaybtn { display: inline-block; }
/* Liste des points relais QLS (mode relais). */
.v001-co-relaylist { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.v001-co-relaylist[hidden] { display: none; }
.v001-co-relayloading, .v001-co-relayempty { color: #6b6b6b; font-size: 14px; padding: 10px 2px; }
.v001-co-relay { display: flex; align-items: center; gap: 12px; border: 1px solid #e2e2e6; border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.v001-co-relay:hover { border-color: #c9c9d2; }
.v001-co-relay.is-selected { border-color: #634c9f; background: #faf9fd; box-shadow: 0 0 0 1px #634c9f inset; }
.v001-co-relay input { margin: 0; accent-color: #634c9f; flex-shrink: 0; }
.v001-co-relaybody { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.v001-co-relaybody strong { font-size: 15px; color: #1a1a1a; }
.v001-co-relayaddr { font-size: 13px; color: #666; }
.v001-co-relaycarrier { font-size: 11px; font-weight: 700; color: #634c9f; text-transform: uppercase; letter-spacing: .03em; }
.v001-co-relaydist { font-size: 12px; color: #888; white-space: nowrap; }
.v001-co-relaydist::after { content: ' km'; }
/* Paiement : logos réels issus du sprite pay_icons.png (7 col × 2 lignes) */
.v001-co-payicon { width: 52px; aspect-ratio: 247 / 150; border-radius: 6px; background-color: #fff; border: 1px solid #eee; flex-shrink: 0; background-image: url('/cdn/cdn.shopify.com/s/files/1/0864/0754/5156/files/pay_icons.png'); background-repeat: no-repeat; background-size: 700% 200%; }
.v001-co-payicon--card       { background-position:  50%   0%; }
.v001-co-payicon--apple      { background-position:   0%   0%; }
.v001-co-payicon--google     { background-position:   0% 100%; }
.v001-co-payicon--bancontact { background-position: 100%   0%; }
.v001-co-payicon--ideal      { background-position: 16.6667% 0%; }
.v001-co-paybtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #22a45d; color: #fff; border: 0; border-radius: 12px; padding: 19px; font-size: 16px; font-weight: 700; letter-spacing: .5px; cursor: pointer; margin-top: 10px; }
.v001-co-paybtn:hover { background: #1c8f50; }
.v001-co-secure { display: flex; align-items: center; gap: 8px; background: #f5f5f7; border-radius: 10px; padding: 14px 16px; font-size: 14px; color: #555; margin: 16px 0; }
/* Grille des moyens de paiement (14 logos, sprite pay_icons.png en 7 colonnes × 2 lignes) */
.v001-co-paygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 16px; }
.v001-co-paylogo { background: #f4f4f6; border-radius: 8px; padding: 9px 7px; display: flex; align-items: center; justify-content: center; }
.v001-co-paylogo i { display: block; width: 100%; aspect-ratio: 247 / 150; background-image: url('/cdn/cdn.shopify.com/s/files/1/0864/0754/5156/files/pay_icons.png'); background-repeat: no-repeat; background-size: 700% 200%; }
.v001-co-paylogo--apple      { background-position:   0%   0%; }
.v001-co-paylogo--ideal      { background-position: 16.6667%  0%; }
.v001-co-paylogo--revolut    { background-position: 33.3333%  0%; }
.v001-co-paylogo--mastercard { background-position:  50%   0%; }
.v001-co-paylogo--visa       { background-position: 66.6667%  0%; }
.v001-co-paylogo--bank       { background-position: 83.3333%  0%; }
.v001-co-paylogo--bancontact { background-position: 100%   0%; }
.v001-co-paylogo--gpay       { background-position:   0% 100%; }
.v001-co-paylogo--maestro    { background-position: 16.6667% 100%; }
.v001-co-paylogo--belfius    { background-position: 33.3333% 100%; }
.v001-co-paylogo--amex       { background-position:  50% 100%; }
.v001-co-paylogo--kbc        { background-position: 66.6667% 100%; }
.v001-co-paylogo--wero       { background-position: 83.3333% 100%; }
.v001-co-paylogo--cb         { background-position: 100% 100%; }
@media (max-width: 560px) { .v001-co-paygrid { grid-template-columns: repeat(4, 1fr); } }
.v001-co-err { color: #bf262f; font-size: 14px; margin: 10px 0 0; }
/* Icône « étiquette » (réduction / code promo) */
.v001-co-tag { vertical-align: -3px; margin-right: 2px; }

/* ============================================================
   Page « Nos marques de puffs » — grille de marques.
   Chaque carte redirige vers la collection de la marque.
   ============================================================ */
.v001-brands { max-width: 1200px; margin: 0 auto; padding: 10px 16px 60px; }
.v001-brands__title { text-align: center; font-size: 30px; font-weight: 800; color: #1c1c1c; margin: 18px 0 34px; }
.v001-brands__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.v001-brand { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #f3f3f6; box-shadow: 0 1px 4px rgba(0,0,0,.06); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.v001-brand:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.v001-brand__imgwrap { display: block; aspect-ratio: 1 / 1; }
.v001-brand__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v001-brand__name { position: absolute; left: 12px; bottom: 12px; background: rgba(28,28,28,.82); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .3px; padding: 7px 14px; border-radius: 999px; }
@media (max-width: 860px) { .v001-brands__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .v001-brands__title { font-size: 24px; } }
@media (max-width: 480px) { .v001-brands__grid { grid-template-columns: repeat(2, 1fr); } .v001-brand__name { font-size: 13px; padding: 5px 11px; } }

/* ============================================================
   En-tête : état de connexion + badge compteur panier.
   ============================================================ */
/* Lien compte connecté : « Mon compte » (gras) + « Se déconnecter » (sous-ligne). */
.site-header_account-link-text { display: flex; flex-direction: column; line-height: 1.15; }
.v001-acct__main { font-weight: 700; }
.v001-acct__logout { font-size: 13px; font-weight: 400; color: #555; cursor: pointer; }
.v001-acct__logout:hover { color: #634c9f; text-decoration: underline; }
/* Le badge du panier utilise le style natif du thème (.site-header-cart--count::after,
   pastille violette + .visible) — piloté par updateCartCount(). Rien à surcharger ici. */

/* Étiquette de stock sur les cartes produit : vert/gras (en stock), rouge/gras (rupture). */
.productitem--stock-level .in-stock { color: #1a8a3b; font-weight: 700; }
.productitem--stock-level .out-stock { color: #d0021b; font-weight: 700; }

/* ============================================================
   Page Contact — formulaire (étiquettes flottantes CSS pur).
   ============================================================ */
.v001-cf { max-width: 800px; margin: 26px auto 0; padding: 0 16px; }
.v001-cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .v001-cf__row { grid-template-columns: 1fr; } }
.v001-cf__field { position: relative; margin-bottom: 16px; }
.v001-cf__field input, .v001-cf__field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #cfcfcf; border-radius: 8px;
  background: #fff; color: #111; font-size: 15px; font-family: inherit;
  padding: 22px 14px 8px;
}
.v001-cf__field textarea { padding-top: 26px; resize: vertical; min-height: 150px; line-height: 1.5; }
.v001-cf__field input:focus, .v001-cf__field textarea:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 2px rgba(99,76,159,.16); }
.v001-cf__field label {
  position: absolute; left: 15px; top: 16px; color: #8a8a8a; font-size: 15px;
  pointer-events: none; transition: all .15s ease; background: transparent;
}
.v001-cf__field textarea + label { top: 18px; }
/* Flotte à l'état focus OU rempli (placeholder=" " → :not(:placeholder-shown)). */
.v001-cf__field input:focus + label,
.v001-cf__field input:not(:placeholder-shown) + label,
.v001-cf__field textarea:focus + label,
.v001-cf__field textarea:not(:placeholder-shown) + label {
  top: 7px; font-size: 11px; color: #634c9f;
}
.v001-cf__actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.v001-cf__submit {
  background: #634c9f; color: #fff; border: 0; border-radius: 8px;
  padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.v001-cf__submit:hover { background: #57408c; }
.v001-cf__msg { margin: 0; font-size: 14px; color: #1a8a3b; font-weight: 600; }

/* Nombre d'avis par ligne sur ordinateur : imposé, et non plus déduit par `auto-fill`.
   Avec `repeat(auto-fill, minmax(250px, 1fr))`, le nombre de colonnes dépendait de la largeur
   restante : 4 au-delà de ~1054 px de conteneur, 3 en dessous — donc variable selon la fenêtre.
   On fixe des paliers pour un résultat prévisible, plafonné à 4 avis par ligne. */
/* Colonnes MAÇONNÉES à toutes les tailles (et plus seulement sur mobile) : en grille, chaque
   ligne prend la hauteur de la carte la plus haute, donc un avis fleuve laissait un grand vide
   à côté des avis courts — visible sur ordinateur comme ça l'était sur mobile.
   Ici les cartes s'empilent au fil de l'eau, sans trou. Le nombre de colonnes est imposé
   (4 au maximum), il n'est plus déduit de la largeur restante. */
.v001-reviews__grid {
  display: block !important;          /* annule le `display: grid` des règles de base */
  column-gap: 18px;
}
.v001-reviews__grid > .v001-rev {
  break-inside: avoid;                /* une carte n'est jamais coupée entre deux colonnes */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 18px;
}
/* Aperçu de 5 lignes : cartes compactes et comparables ; l'avis entier se lit dans la modale,
   qui s'ouvre au clic et défile. Même règle que sur mobile. */
.v001-reviews__grid > .v001-rev .v001-rev__text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1100px) {
  .v001-reviews__grid { column-count: 4; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  .v001-reviews__grid { column-count: 3; }
}

/* ── Avis sur mobile : DEUX COLONNES MAÇONNÉES (accueil #looxReviews + fiche produit) ──
   Les avis se lisent en descendant, deux de front, comme sur la boutique d'origine. Deux étapes
   dans l'historique de ce bloc : d'abord un carrousel horizontal (une seule carte visible → les
   autres avis invisibles), puis une grille CSS (chaque ligne prenait la hauteur de la carte la
   plus haute → un avis long laissait un grand vide à côté d'un avis court). Les colonnes
   maçonnées règlent les deux.
   .v001-reviews__grid est notre classe (pas le thème CDN) → un media query suffit, sans
   !important. Sur desktop la présentation reste inchangée. */
@media (max-width: 768px) {
  /* Colonnes MAÇONNÉES plutôt qu'une grille : en grille, chaque ligne prend la hauteur de la
     carte la plus haute — un avis très long laissait un grand vide à côté d'un avis court.
     Ici les cartes s'empilent au fil de l'eau dans deux colonnes, sans trou. */
  /* Le bloc d'avis perdait ~30 px de chaque côté : 10 px du conteneur de section (thème) +
     20 px des nôtres. Sur un écran de 390 px, cela laissait 330 px utiles pour deux colonnes.
     On rend ces 20 px au contenu — les cartes gagnent une dizaine de pixels chacune. */
  .v001-reviews { padding: 0 4px; }

  .v001-reviews__grid {
    column-count: 2;
    column-gap: 10px;
    /* neutralise l'ancien carrousel si une règle plus haut le réintroduit */
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .v001-reviews__grid > .v001-rev {
    margin: 0 0 12px;        /* gouttière verticale resserrée sur mobile */
    max-width: none;
    scroll-snap-align: none;
  }
  .v001-reviews__grid > .v001-rev .v001-rev__media { aspect-ratio: 1 / 1; } /* photo carrée, comme l'original */

  /* Toute la carte est cliquable → on l'indique. */
  .v001-reviews__grid > .v001-rev { cursor: pointer; }
}

/* Écrans très étroits : une seule colonne, sinon les cartes deviennent illisibles. */
@media (max-width: 380px) {
  .v001-reviews__grid { column-count: 1; }
}

/* ── Page recherche (chrome Empire) — masthead + formulaire ── */
.search-page .productgrid--wrapper { max-width: 1300px; margin: 0 auto; padding: 24px 20px 60px; width: 100%; }
.search-page__masthead { margin: 8px 0 26px; }
.search-page__title { font-size: 26px; margin: 0 0 14px; }
.search-page__form { display: flex; gap: 10px; max-width: 620px; }
.search-page__input { flex: 1; border: 1px solid #d5d5da; border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.search-page__input:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 3px rgba(99,76,159,.12); }
.search-page__submit { background: #634c9f; color: #fff; border: 0; border-radius: 8px; padding: 12px 22px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.search-page__submit:hover { background: #4a3877; }
.search-page__query { margin: 14px 0 0; color: #555; font-size: 14px; }
.search-page__empty { margin: 22px 0; color: #555; }
@media (max-width: 560px) { .search-page__form { flex-direction: column; } }

/* ── Remise dégressive affichée dans le panier ── */
.v001-cart__discount { margin: 6px 0 2px; }
.v001-cart__discountrow { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 3px 0; }
.v001-cart__discountrow--save { color: #1a8a3b; font-weight: 600; }
.v001-cart__discountrow--after { font-weight: 700; }
/* Détail de la remise, un lot par ligne : discret (gris, plus petit) pour rester sous la ligne
   verte du total sans lui voler la vedette, mais lisible — c'est lui qui rend le montant
   vérifiable. Le nom du produit peut être long : il se tronque plutôt que de pousser le montant
   hors du cadre sur mobile. */
.v001-cart__discountdetail { margin: 2px 0 4px; }
.v001-cart__discountdetail[hidden] { display: none; }
.v001-cart__discountline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 13px; color: #6b7280; padding: 2px 0; }
.v001-cart__discountline-lab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v001-cart__discountline-qte { color: #9ca3af; }
.v001-cart__discountline-val { flex-shrink: 0; color: #1a8a3b; font-weight: 600; }
/* Pastille « -10% » : même code couleur que la remise, sur la ligne d'article comme au détail. */
.v001-cart__badge { display: inline-block; background: #e7f6ec; color: #1a8a3b; border-radius: 6px;
    padding: 1px 6px; font-size: 12px; font-weight: 700; vertical-align: middle; }
.v001-cart__discountpct { font-weight: 600; opacity: .9; }
.v001-cart__bulkprogress { margin: 8px 0 0; font-size: 13px; color: #634c9f; background: #f3f0fa; border-radius: 8px; padding: 8px 12px; }

/* ── Galerie produit : miniatures en CARROUSEL (5 visibles) + navigation image principale ──
   Avant : .product-gallery--navigation en flex-wrap:wrap → grille géante quand beaucoup de
   variantes. Maintenant strip horizontal défilable, 5 miniatures visibles, + flèches. */
.product-gallery--navigation {
  flex-wrap: nowrap !important;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.product-gallery--thumbnail {
  flex: 0 0 calc((100% - 32px) / 5);   /* 5 visibles (4 gaps de 8px) */
  width: auto; height: auto;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
}
.product-gallery--thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery--navigation::-webkit-scrollbar { height: 6px; }
.product-gallery--navigation::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Flèches sur l'image principale (navigation gauche/droite) */
.v001-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.15);
  cursor: pointer; font-size: 26px; line-height: 1; color: #333;
  display: flex; align-items: center; justify-content: center;
}
.v001-gallery-nav:hover { background: #fff; }
.v001-gallery-nav--prev { left: 10px; }
.v001-gallery-nav--next { right: 10px; }

/* Flèches du carrousel de miniatures */
.v001-thumbnav-wrap { position: relative; }
.v001-thumbnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 26px; height: 46px; padding: 0; border: 1px solid #e2e2e2; border-radius: 8px;
  background: rgba(255,255,255,.96); cursor: pointer; font-size: 20px; line-height: 1; color: #333;
  display: flex; align-items: center; justify-content: center;
}
.v001-thumbnav:hover { background: #fff; }
.v001-thumbnav--prev { left: -2px; }
.v001-thumbnav--next { right: -2px; }

/* ── Footer repliable (accordéon) sur MOBILE — sections « Nos Marques » / « Informations Utiles ».
   Les chevrons du thème sont déjà présents ; c'est le repli qui manquait (empire.js non chargé). */
@media (max-width: 768px) {
  .site-footer-block-item.has-accordion [data-accordion-trigger] {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .site-footer-block-item.has-accordion .site-footer-block-content { transition: max-height .32s ease; }
  .site-footer-block-item.has-accordion:not(.v001-acc-open) .site-footer-block-content {
    max-height: 0 !important; overflow: hidden !important;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  }
  .site-footer-block-item.has-accordion .accordion--icon svg { transition: transform .3s ease; }
  .site-footer-block-item.has-accordion.v001-acc-open .accordion--icon svg { transform: rotate(180deg); }
}



@media (max-width: 480px) {
  /* Плашка «Économisez jusqu'à 36%» (в теме: 0.8125rem). */
  .productitem__badge--sale {
    font-size: 10px !important;
    line-height: 1.25 !important;
    padding: 2px 5px !important;
    letter-spacing: 0 !important;
  }
  .productitem__badge--sale [data-price-percent-saved] { font-size: inherit !important; }

  /* Cartes de carrousel plus larges (l'image carrée grandit d'autant).
     NB : cette largeur ne s'applique QU'EN SECOURS — initHCarousels() pose un style inline
     !important qui la remplace dès que le JS s'exécute. Toute modification de la largeur doit
     donc se faire dans app-empire.js (constante cardW), sinon elle reste sans effet. */
  .v001-hcarousel { gap: 10px; }
  .v001-hcarousel > * { width: 52vw !important; }
}

/* Кликабельный рейтинг на карточках товара -> отзывы на странице. */
.productitem .product__rating { cursor: pointer; }
.productitem .product__rating:hover .rating__count { text-decoration: underline; }


/* ══════════════ Lightbox avis (façon Loox) ══════════════ */
.v001-lb { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; }
.v001-lb[hidden] { display: none; }
.v001-lb__backdrop { position: absolute; inset: 0; background: rgba(20,18,25,.55); }
.v001-lb__close { position: absolute; top: 22px; left: 22px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); color: #222; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.v001-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(30,25,40,.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.v001-lb__nav:hover { background: rgba(30,25,40,.8); }
.v001-lb__nav--prev { left: 18px; } .v001-lb__nav--next { right: 18px; }

.v001-lb__box { position: relative; z-index: 2; display: flex; width: min(1040px, 92vw); height: min(680px, 88vh);
    background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.4); }
.v001-lb__media { position: relative; flex: 0 0 58%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* `display: flex` ci-dessus l'emporterait sur l'attribut hidden : on le neutralise
   explicitement pour les avis sans photo (la fiche occupe alors toute la modale). */
.v001-lb__media[hidden] { display: none; }

/* Les cartes d'avis ouvrent la modale (accueil et fiche produit), sur toutes les tailles. */
.v001-reviews__grid > .v001-rev { cursor: pointer; }
.v001-reviews__grid > .v001-rev a { cursor: auto; }   /* sauf les liens, qui gardent le leur */
.v001-lb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v001-lb__vid { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Flèches internes (entre les photos d'un même avis) */
.v001-lb__marrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.85); color: #222; font-size: 24px; line-height: 1; cursor: pointer; }
.v001-lb__marrow--prev { left: 10px; } .v001-lb__marrow--next { right: 10px; }
.v001-lb__thumbs { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 2; }
.v001-lb__thumb { width: 54px; height: 54px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; cursor: pointer; background: #333; }
.v001-lb__thumb.is-active { border-color: #fff; }
.v001-lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.v001-lb__thumb-vid { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }

/* Carte à droite */
.v001-lb__card { flex: 1; padding: 26px 28px; overflow-y: auto; }
.v001-lb__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.v001-lb__author { font-weight: 700; font-size: 16px; color: #111; }
.v001-lb__verified { display: inline-flex; align-items: center; gap: 4px; color: #1a7a3a; font-size: 13px; }
.v001-lb__date { margin-left: auto; color: #888; font-size: 13px; }
.v001-lb__stars { display: flex; gap: 2px; margin: 6px 0 12px; }
.v001-lb__title { font-weight: 700; font-size: 17px; color: #111; margin-bottom: 10px; }
.v001-lb__text { color: #333; line-height: 1.55; font-size: 14.5px; margin-bottom: 16px; }
.v001-lb__reply { background: #f6f5fa; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; color: #444; margin-bottom: 14px; }
.v001-lb__variant { font-size: 14px; color: #555; }
.v001-lb__variant span { color: #999; font-size: 13px; }

/* Carte produit dans la lightbox (bouton « Voir le produit »). */
.v001-lb__product { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 18px;
    border-top: 1px solid #eee; text-decoration: none; }
.v001-lb__product-name { flex: 1; font-size: 14px; font-weight: 600; color: #111; line-height: 1.35; }
.v001-lb__product-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: #f2f0f7; color: #3a2a5a; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 8px; }
.v001-lb__product:hover .v001-lb__product-btn { background: #e6e1f0; }


/* Mobile : média en haut, carte en bas */
@media (max-width: 768px) {
  .v001-lb__box { flex-direction: column; width: 94vw; height: 90vh; }
  .v001-lb__media { flex: 0 0 55%; }
  .v001-lb__nav { display: none; }
  .v001-lb__close { top: 12px; left: 12px; }
}



/* =========================================================================
   Confirmation de commande / suivi (/checkout/confirmation?token=…)
   Cartes blanches + accent violet du checkout (#634c9f) pour rester dans le thème.
   ========================================================================= */
.v001-conf { max-width: 1080px; margin: 0 auto; padding: 0 4px; }  /* .v001-co-main porte déjà le padding vertical */
.v001-conf__card { background: #fff; border: 1px solid #ececf1; border-radius: 18px;
    padding: 26px 28px; box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 18px; }

/* --- Remerciement --- */
.v001-conf__hero { text-align: center; padding: 38px 28px 32px; }
.v001-conf__hero-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.v001-conf__title { font-size: 26px; font-weight: 800; color: #1a1a1a; margin: 0 0 12px; }
.v001-conf__lead { font-size: 15px; color: #444; margin: 0 0 4px; }
.v001-conf__lead--muted { color: #8a8a95; }

/* --- Progression en 5 étapes --- */
.v001-conf__steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; position: relative; }
.v001-conf__step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; position: relative; min-width: 0; }
/* trait de liaison entre deux étapes */
.v001-conf__step + .v001-conf__step::before { content: ""; position: absolute; top: 15px; right: 50%;
    width: 100%; height: 2px; background: #e6e6ee; z-index: 0; }
.v001-conf__step.is-done + .v001-conf__step::before,
.v001-conf__step.is-current::before { background: #23a55a; }
.v001-conf__bullet { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
    background: #f0f0f5; color: #9a9aa5; border: 2px solid #fff; }
.v001-conf__step.is-done .v001-conf__bullet,
.v001-conf__step.is-current .v001-conf__bullet { background: #23a55a; color: #fff; }
.v001-conf__steplabel { font-size: 12.5px; color: #8a8a95; line-height: 1.25; }
.v001-conf__step.is-current .v001-conf__steplabel { color: #1a1a1a; font-weight: 700; }
.v001-conf__steps.is-canceled .v001-conf__bullet { background: #e6e6ee; color: #9a9aa5; }
.v001-conf__canceled { text-align: center; color: #c0392b; font-weight: 700; margin: -6px 0 18px; }

/* --- Deux colonnes : commande / livraison --- */
.v001-conf__cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.v001-conf__h2 { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 0 0 18px; }

/* --- Lignes de commande --- */
.v001-conf__line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f2f2f6; }
.v001-conf__line:last-of-type { border-bottom: 0; }
.v001-conf__thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f5f5f9; flex: 0 0 auto; }
.v001-conf__thumb--empty { display: inline-block; }
.v001-conf__qty { font-size: 13px; color: #8a8a95; flex: 0 0 auto; }
.v001-conf__linetitle { flex: 1 1 auto; font-size: 14px; color: #222; min-width: 0; }
.v001-conf__linetitle a { color: inherit; text-decoration: none; }
.v001-conf__linetitle a:hover { text-decoration: underline; }
.v001-conf__variant { display: block; font-size: 12.5px; color: #8a8a95; }
.v001-conf__lineprice { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: #222; white-space: nowrap; }

/* --- Totaux --- */
.v001-conf__totals { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ececf1; }
.v001-conf__total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #444; padding: 5px 0; }
.v001-conf__total--save { color: #23a55a; }
.v001-conf__total--grand { margin-top: 8px; padding-top: 12px; border-top: 1px solid #ececf1;
    font-size: 17px; font-weight: 800; color: #111; }

/* --- Livraison --- */
.v001-conf__name { font-size: 14.5px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.v001-conf__addr { font-size: 14px; color: #555; margin: 0 0 3px; }
.v001-conf__badge { display: block; font-size: 13.5px; color: #444; background: #f6f6fa;
    border-radius: 10px; padding: 9px 12px; margin: 12px 0 0; }
.v001-conf__badge--paid { background: #eaf7ef; color: #1c7a43; }
.v001-conf__badge--relay { background: #f2effa; color: #4a3a80; }

/* --- Boutons --- */
.v001-conf__btn { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; padding: 13px 16px;
    border: 1px solid #dcdce2; border-radius: 12px; background: #fff; color: #222; font-size: 14.5px;
    font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.v001-conf__btn:hover { border-color: #634c9f; background: #faf9ff; }
.v001-conf__btn--primary { background: #634c9f; border-color: #634c9f; color: #fff; }
.v001-conf__btn--primary:hover { background: #56428a; border-color: #56428a; color: #fff; }

/* --- Suivi --- */
.v001-conf__event { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; }
.v001-conf__dot { width: 7px; height: 7px; border-radius: 50%; background: #23a55a; flex: 0 0 auto; }
.v001-conf__when { color: #8a8a95; font-variant-numeric: tabular-nums; }
.v001-conf__what { color: #222; font-weight: 600; }

.v001-conf__keep { text-align: center; font-size: 13.5px; color: #8a8a95; margin: 6px 0 0; }
.v001-conf__continue { text-align: center; margin: 22px 0 0; }
.v001-conf__continue .v001-conf__btn { display: inline-block; width: auto; min-width: 240px; }

@media (max-width: 860px) {
    .v001-conf__cols { grid-template-columns: 1fr; }
    .v001-conf__steplabel { font-size: 11px; }
    .v001-conf__title { font-size: 21px; }
    .v001-conf__card { padding: 20px 16px; }
}

/* =========================================================================
   Page « laissez un avis » (relance après commande) — /reviews/invite?token=…
   ========================================================================= */
.v001-inv { max-width: 720px; margin: 0 auto; padding: 26px 16px 60px; }
.v001-inv__card { background: #fff; border: 1px solid #ececf1; border-radius: 18px;
    padding: 24px 26px; box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 16px; }
.v001-inv__hero, .v001-inv__empty { text-align: center; }
.v001-inv__icon { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.v001-inv__title { font-size: 23px; font-weight: 800; color: #1a1a1a; margin: 0 0 10px; }
.v001-inv__lead { font-size: 15px; color: #555; margin: 0; }

.v001-inv__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.v001-inv__thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #f5f5f9; }
.v001-inv__name { font-size: 15px; font-weight: 700; color: #1a1a1a; text-decoration: none; }
.v001-inv__name:hover { text-decoration: underline; }

.v001-inv__stars { display: flex; gap: 4px; margin-bottom: 14px; }
.v001-inv__star { background: none; border: 0; padding: 0 2px; font-size: 30px; line-height: 1;
    color: #d8d8e0; cursor: pointer; transition: color .12s; }
.v001-inv__star:hover, .v001-inv__star.is-on { color: #f5a623; }

.v001-inv__input { width: 100%; box-sizing: border-box; border: 1px solid #dcdce2; border-radius: 12px;
    padding: 13px 15px; font-size: 15px; color: #111; background: #fff; margin-bottom: 10px; font-family: inherit; }
.v001-inv__input:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 2px rgba(99,76,159,.18); }
.v001-inv__textarea { resize: vertical; min-height: 92px; }

.v001-inv__photo { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 4px 0 2px; }
.v001-inv__photobtn { display: inline-block; border: 1px dashed #c9c9d4; border-radius: 12px;
    padding: 10px 16px; font-size: 14px; color: #444; background: #fafafd; }
.v001-inv__photobtn:hover { border-color: #634c9f; color: #634c9f; }
.v001-inv__photoname { font-size: 13px; color: #8a8a95; }
.v001-inv__hint { font-size: 12.5px; color: #9a9aa5; margin: 6px 0 14px; }

.v001-inv__btn { display: inline-block; border: 1px solid #dcdce2; border-radius: 12px; padding: 13px 22px;
    background: #fff; color: #222; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.v001-inv__btn--primary { background: #634c9f; border-color: #634c9f; color: #fff; }
.v001-inv__btn--primary:hover { background: #56428a; border-color: #56428a; }
.v001-inv__msg { font-size: 14px; color: #1c7a43; margin: 12px 0 0; min-height: 18px; }
.v001-inv__prod.is-done { opacity: .6; }
.v001-inv__prod.is-done .v001-inv__btn, .v001-inv__prod.is-done .v001-inv__stars { pointer-events: none; }

@media (max-width: 640px) { .v001-inv__card { padding: 18px 16px; } .v001-inv__title { font-size: 20px; } }

/* =========================================================================
   Page 404 — rendue dans le chrome du site (layout/empire).
   ========================================================================= */
.v001-404 { max-width: 640px; margin: 0 auto; padding: 60px 16px 80px; text-align: center; }
.v001-404__code { font-size: 84px; font-weight: 800; line-height: 1; color: #634c9f; letter-spacing: -2px; }
.v001-404__title { font-size: 24px; font-weight: 800; color: #1a1a1a; margin: 14px 0 8px; }
.v001-404__msg { font-size: 15px; color: #666; margin: 0 0 26px; }
.v001-404__search { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.v001-404__search input { flex: 1 1 auto; max-width: 340px; box-sizing: border-box; border: 1px solid #dcdce2;
    border-radius: 12px; padding: 13px 16px; font-size: 15px; background: #fff; color: #111; }
.v001-404__search input:focus { outline: none; border-color: #634c9f; box-shadow: 0 0 0 2px rgba(99,76,159,.18); }
.v001-404__search button { border: 0; border-radius: 12px; padding: 13px 20px; background: #634c9f; color: #fff;
    font-size: 15px; font-weight: 600; cursor: pointer; }
.v001-404__search button:hover { background: #56428a; }
.v001-404__links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.v001-404__btn { display: inline-block; border: 1px solid #dcdce2; border-radius: 12px; padding: 12px 22px;
    background: #fff; color: #222; font-size: 15px; font-weight: 600; text-decoration: none; }
.v001-404__btn:hover { border-color: #634c9f; color: #634c9f; }
.v001-404__btn--primary { background: #634c9f; border-color: #634c9f; color: #fff; }
.v001-404__btn--primary:hover { background: #56428a; border-color: #56428a; color: #fff; }
@media (max-width: 560px) { .v001-404__code { font-size: 62px; } .v001-404__search { flex-direction: column; align-items: center; } }

/* Mention « Traduit automatiquement depuis … » sous le texte d'un avis. */
.v001-rev__tnote { font-size: 12.5px; line-height: 1.45; color: #8a8a95; margin: 2px 0 6px; }
.v001-rev__toriginal { background: none; border: 0; padding: 0; font: inherit; color: #634c9f;
    text-decoration: underline; cursor: pointer; }
.v001-rev__toriginal:hover { color: #4a3a80; }

/* Dépôt d'avis — choix de la photo.
   Ordinateur : un seul bouton (« Ajouter une photo »), l'appareil photo n'a pas de sens.
   Mobile     : deux boutons — « Prendre une photo » (input capture → caméra arrière) et
                « Choisir une photo » (galerie). Le basculement se fait en CSS : aucune
                détection de terminal en JS, donc rien à maintenir quand les navigateurs évoluent. */
.v001-inv__photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.v001-inv__photo { display: inline-flex; align-items: center; cursor: pointer; }
.v001-inv__photo--camera { display: none; }          /* masqué par défaut (ordinateur) */
.v001-inv__lbl-mobile { display: none; }
@media (max-width: 768px) {
  .v001-inv__photo--camera { display: inline-flex; }
  .v001-inv__lbl-mobile { display: inline; }
  .v001-inv__lbl-desktop { display: none; }
  .v001-inv__photos { gap: 8px; }
  .v001-inv__photobtn { padding: 12px 14px; }        /* cible tactile plus confortable */
}

/* Carrousel « Blog Vapes » : cartes nettement séparées.
   Les visuels des articles sont des bannières panoramiques très proches les unes des autres
   (même palette, mêmes personnages) : sans contour ni arrondi, et avec une gouttière étroite,
   elles se lisaient comme UNE seule image continue au lieu de quatre articles distincts.
   La gouttière est élargie dans app-empire.js (28 px) ; ici on referme la carte sur elle-même. */
/* UN SEUL cadre, et c'est celui du thème. Le thème borde `.article--excerpt-wrapper` (sélecteur
   groupé avec .productitem, .cart-item…) SANS arrondi : c'est lui qui donnait les coins carrés,
   et lui qui a la bonne hauteur (uniforme, étirée par le rail). Une bordure arrondie avait été
   ajoutée sur l'élément intérieur `.article-list-item`, de hauteur variable → deux cadres
   superposés de tailles différentes. On arrondit donc le cadre du thème et on supprime l'autre. */
.blogposts--inner .article--excerpt-wrapper {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;                  /* rogne le visuel en haut */
}
.blogposts--inner .article-list-item {
    border: 0 !important;              /* plus de second cadre */
    border-radius: 0 !important;
    background: transparent;
    height: 100%;                      /* la carte remplit son cadre → hauteurs égales */
}
/* Arrondi répété sur le visuel : si le rognage du parent ne s'applique pas (styles inline du
   rail), l'angle reste arrondi malgré tout. */
.blogposts--inner .article--excerpt-image,
.blogposts--inner .article--excerpt-image img {
    border-radius: 14px 14px 0 0 !important;
    margin-bottom: 0 !important;
}
.blogposts--inner .article--excerpt-content { padding: 16px 18px 20px; }

/* Retour des liens de la newsletter (confirmation / désinscription). */
.v001-nl { max-width: 640px; margin: 0 auto; padding: 50px 16px 70px; }
.v001-nl__card { background: #fff; border: 1px solid #ececf1; border-radius: 18px;
    padding: 34px 30px; box-shadow: 0 1px 4px rgba(0,0,0,.05); text-align: center; }
.v001-nl__icon { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.v001-nl__title { font-size: 23px; font-weight: 800; color: #1a1a1a; margin: 0 0 12px; }
.v001-nl__lead { font-size: 15px; line-height: 1.6; color: #555; margin: 0 0 6px; }
.v001-nl__mail { font-size: 14px; color: #634c9f; font-weight: 600; margin: 10px 0 0; }
.v001-nl__hint { font-size: 13.5px; color: #8a8a95; margin: 14px 0 0; }
.v001-nl__btn { display: inline-block; margin-top: 24px; padding: 13px 26px; border-radius: 12px;
    background: #634c9f; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.v001-nl__btn:hover { background: #56428a; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════
   RECHERCHE — autocomplétion de l'en-tête + sections/état vide de /search
   ══════════════════════════════════════════════════════════════════════ */

/* ---- Autocomplétion (dropdown sous la barre de recherche) ---- */
.v001-ac { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200;
    background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    max-height: 70vh; overflow-y: auto; padding: 6px; min-width: 280px; }
.v001-ac[hidden] { display: none; }
.v001-ac__sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #8a8a95; padding: 8px 10px 4px; }
.v001-ac__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    text-decoration: none; color: #222; }
.v001-ac__row:hover, .v001-ac__row.is-active { background: #f4f2fa; }
.v001-ac__row img { width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: #fafafa; flex: 0 0 auto; }
.v001-ac__noimg { width: 42px; height: 42px; border-radius: 6px; background: #f2f2f5; flex: 0 0 auto; }
.v001-ac__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.v001-ac__title { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v001-ac__price { font-size: 13px; font-weight: 700; color: #634c9f; }
.v001-ac__all { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid #eee;
    font-size: 13px; font-weight: 600; color: #634c9f; text-decoration: none; }
.v001-ac__all:hover { background: #f4f2fa; border-radius: 0 0 8px 8px; }
.v001-ac__empty { padding: 16px; text-align: center; color: #8a8a95; font-size: 14px; }

/* ---- Bouton retour de la page /search ---- */
.search-page__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
    padding: 8px 14px; border: 1px solid #e0e0e0; border-radius: 999px; background: #fff;
    color: #333; text-decoration: none; font-weight: 600; font-size: 14px; }
.search-page__back:hover { border-color: #634c9f; color: #634c9f; }
.search-page__back span { font-size: 16px; line-height: 1; }

/* ---- Sections « Collections » / « Marques » sur la page /search ---- */
.v001-srch-extra:empty { display: none; }
.v001-srch-sec { margin: 22px 0 6px; }
.v001-srch-sec__t { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.v001-srch-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.v001-srch-chip { display: inline-block; padding: 9px 16px; border-radius: 999px; background: #fff;
    border: 1px solid #e0e0e0; color: #333; text-decoration: none; font-weight: 600; font-size: 14px; }
.v001-srch-chip:hover { border-color: #634c9f; color: #634c9f; }

/* ---- État « aucun résultat » : suggestions de marques ---- */
.v001-srch-empty__msg { font-size: 16px; color: #555; margin-bottom: 22px; }
.v001-srch-suggest:empty { display: none; }
.v001-srch-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.v001-srch-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px;
    border: 1px solid #ececec; border-radius: 12px; text-decoration: none; color: #222; background: #fff; transition: .12s; }
.v001-srch-brand:hover { border-color: #634c9f; transform: translateY(-2px); }
.v001-srch-brand img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.v001-srch-brand span { font-weight: 600; font-size: 14px; }

/* ---- État « collection vide » (plus chaleureux) ---- */
.v001-empty-coll { text-align: center; padding: 48px 20px 40px; }
.v001-empty-coll__icon { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.v001-empty-coll .productgrid--no-results-title { font-size: 22px; margin: 0 0 10px; }
.v001-empty-coll__hint { color: #666; font-size: 15px; line-height: 1.6; max-width: 460px; margin: 0 auto 22px; }
.v001-empty-coll__btn { display: inline-block; padding: 13px 26px; border-radius: 12px; background: #634c9f;
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.v001-empty-coll__btn:hover { background: #56428a; color: #fff; }

/* ---- Tiroir menu mobile AU-DESSUS du bandeau promo ----
   Le thème donne au tiroir `.site-mobile-nav` le MÊME z-index (1200) que la barre d'annonce
   `.announcement-bar` : selon l'ordre de rendu, la promo pouvait recouvrir la croix de fermeture.
   On passe le tiroir (overlay + panneau + croix) strictement au-dessus. */
.site-mobile-nav { z-index: 1300; }

/* ---- …mais cela ne suffisait PAS, et voici pourquoi ----
   Signalé sur mobile le 11/08 : la barre promo recouvrait toujours la croix, et le client se
   retrouvait enfermé dans le menu — seul un clic sur une marque en sortait.

   La ligne ci-dessus ne pouvait pas fonctionner. Le tiroir est IMBRIQUÉ dans le `<header>`,
   qui porte `position: sticky` + `z-index: 1110` : il forme donc un CONTEXTE D'EMPILEMENT.
   Le 1300 du tiroir n'a de valeur qu'À L'INTÉRIEUR de ce contexte ; vu de la page, tout le
   header vaut 1110. Or la barre d'annonce est un FRÈRE du header, à 1200 — elle passe donc
   au-dessus du header tout entier, croix comprise. Aucune valeur donnée au tiroir n'y change
   rien : c'est l'ANCÊTRE qu'il faut élever.

   `html.v001-nav-open` est posée par app-empire.js à l'ouverture du tiroir (et retirée à la
   fermeture) : la correction ne s'applique donc QUE menu ouvert, et le comportement collant
   de l'en-tête au repos reste intact. */
html.v001-nav-open .site-header { z-index: 1400; }

/* Mention sous l'e-mail verrouillé du checkout (client connecté). Discrète : c'est une
   explication, pas une alerte — mais le lien de déconnexion doit rester repérable, c'est
   la seule sortie pour commander sous une autre adresse. */
.v001-co-emailnote { margin: 8px 2px 0; font-size: 13px; color: #6b6b6b; line-height: 1.45; }
.v001-co-emailnote a { color: #634c9f; font-weight: 600; text-decoration: underline; }
/* Le champ verrouillé se distingue du champ saisissable, sinon on croit à un bogue. */
.v001-co-field input[readonly] { background: #f4f4f6; color: #555; cursor: not-allowed; }

/* Case « enregistrer cette adresse » : discrète, mais assez grande pour être touchée au doigt
   (44 px de haut, seuil recommandé sur mobile — c'est là que se fait l'essentiel du trafic). */
.v001-co-savead { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 2px 0;
  font-size: 14px; color: #4a4a4a; cursor: pointer; }
.v001-co-savead input { width: 18px; height: 18px; accent-color: #634c9f; flex: 0 0 auto; }