:root {
  --black1: #2b2b2b;
  --black2: #555;
  --white1: #FFF;
  --greyBlueLight:#f6f5f88f;
  --jvmc1: #10d1c0;
  --jvmc3: #0cdfcc;
  --jvmc2: #0edfcc;
  --jvmc-deep: #246c66d6; 
  --darkBlue: #484c68;
  --pad1: clamp(16px, 4vw, 48px);
  --gutter-inline: clamp(12px, 4vw, 48px);
  --title1: clamp(1.8rem, 3vw, 5rem);
  --gray-shadow1: 2PX 2PX 6PX #d0d0d0;
  --gray-shadow2:0PX 2PX 12PX #f3f3f3;
  --gray-shadow3:0PX 2PX 9PX #dfdfdf;
  --gray1:#8f8f8f;
  --lightGrey1 : #d7d7d7;
  --darkBlue : #333347;
  
    /* Font */
  --font-main: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scale */
  --fs-300: 0.875rem;  /* 14px */
  --fs-400: 1rem;      /* 16px */
  --fs-500: 1.125rem;  /* 18px */
  --fs-600: 1.25rem;   /* 20px */
  --fs-700: 1.5rem;    /* 24px */
  --fs-800: 2rem;      /* 32px */
  --fs-900: 2.5rem;    /* 40px */
  
}
 
/* ================================
   REASSURANCE PRODUITS ET AUTRES CATEGORIES
   DEBUT
   ================================ */

.usp-list .usp {display:none;}

/* complément capillaires standards */
.product-id-category-27 .usp2, .product-id-category-27 .usp4, .product-id-category-27 .usp6  {display:flex;}
.category-id-27 .usp2, .category-id-27 .usp4, .category-id-27 .usp6  {display:flex;}

/* colles capillaires */
.product-id-category-21 .usp2, .product-id-category-21 .usp4, .product-id-category-21 .usp6  {display:flex;}
.category-id-21 .usp2, .category-id-21 .usp4, .category-id-21 .usp6  {display:flex;}
.product-id-2359 .usp1 {display:flex;}
 
/* ================================
   REASSURANCE PRODUITS ET AUTRES CATEGORIES
   FIN
   ================================ */
 
/* --- Neutraliser Material Icons (remplacées par SVG inline) --- */
.material-icons {
  font-family: Arial, sans-serif;
  font-size: 0;
  display: none;
}
.product-flags li.product-flag.online-only::before {
  font-family: Arial, sans-serif;
  content: "";
}

/* --- SVG icons (remplacement Material Icons) --- */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.svg-icon svg {
  flex-shrink: 0;
}

html, body {
  font-family: var(--font-main);
  font-size: var(--fs-400);
  line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

body .h1 {
    text-transform: capitalize;
    font-size: clamp(1.75rem, 2.4vw, 2.05rem);
    font-weight: 600;
    letter-spacing: 0.7px;
}

.block-category h1, #js-product-list-header {
    margin-bottom: 1rem;
    font-size: var(--title1);
    text-transform: none;
}

/* H1 = produit ou catégorie */
h1 {
  font-size: var(--fs-800);
  font-weight: 700;
  line-height: 1.2;
}

/* H2 = sections */
h2 {
  font-size: var(--fs-700);
  font-weight: 600;
  line-height: 1.3;
}

/* H3 */
h3 {
  font-size: var(--fs-600);
  font-weight: 600;
}

/* Petit texte */
small,
.text-muted {
  font-size: var(--fs-300);
}
 
.header-nav,
#top-menu {
  font-weight: 600;
  letter-spacing: 0.02em;
} 

.product-prices .current-price {
  font-size: var(--fs-800);
  font-weight: 700;
  letter-spacing: -0.5px;
}

@media (max-width: 768px) {
  h1 {
    font-size: var(--fs-700);
  }

  .product-prices .current-price {
    font-size: var(--fs-700);
  }
}

h1 {
  text-wrap: balance;
}

button,
.btn {
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Firefox */
* {
  scrollbar-width: auto;              /* thin | auto */
  scrollbar-color: var(--jvmc1) var(--black1);   /* thumb (vert) / track (noir) */
}

/* Chrome / Edge / Brave / Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px; /* scrollbar horizontale */
}

::-webkit-scrollbar-track {
  background: var(--black1);        /* barre noire */
  border-radius: 0;        /* carré */
}

::-webkit-scrollbar-thumb {
  background:  var(--jvmc1);     /* curseur vert */
  border-radius: 0;        /* carré */
  border: 2px solid #000;  /* petit liseré noir (optionnel, style "propre") */
}

::-webkit-scrollbar-thumb:hover {
  background:  var(--jvmc1);     /* vert un peu plus sombre au hover */
}

/* Les "bouts" (haut/bas ou gauche/droite) */
::-webkit-scrollbar-corner {
  background: var(--black1);        /* coin noir (quand 2 scrollbars se croisent) */
}

/* Optionnel : enlever les boutons (flèches) si présents */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}  
  
/* Container full width fluide */
/* Container full width (désactivé pour LCP)
.container {
  max-width: none;
  width: 100%;
  margin-inline: auto;
    padding-left: 0px;
    padding-right: 0px;
}
*/

#products,
.featured-products {
  max-width: none;
}

/* --- Section stacking / overlap scroll effect --- */
#js-product-list-header {
  z-index: 1;
}

#products {
  position: relative;
  z-index: 2;
  background: var(--white1);
  border-radius: 24px 24px 0 0;
  padding-top: 2rem;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
}

.products {
  display: flex;
  flex-wrap: wrap;
}

.products > .product {
  margin-bottom: 1.25rem;
}

/* --- Product cards UI --- */
.product-miniature {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  transition: box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-miniature:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  transform: translateY(-3px);
}

.product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-miniature .thumbnail-top {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.product-miniature .product-thumbnail {
  display: block;
  overflow: hidden;
  height: auto;
  aspect-ratio: 1 / 1;
}

.product-miniature .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
  border-radius: 0;
}

.product-miniature:hover .product-thumbnail img {
  transform: scale(1.04);
}

.product-miniature .product-description {
  padding: 1rem 1rem 1.125rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-miniature .product-title {
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.4;
  margin: 0 0 .65rem;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: initial;
}

.product-miniature .product-title a {
    color: var(--black1);
    text-decoration: none;
    transition: color .2s ease;
    font-size: 1rem;
    font-weight: 500;
}

.product-miniature .product-title a:hover {
  color: var(--jvmc1);
}

.product-miniature .product-price-and-shipping {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid rgba(0, 0, 0, .06);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .35rem;
}

.product-miniature .price {
  font-size: var(--fs-600);
  font-weight: 700;
  color: var(--jvmc1);
}

.product-miniature .regular-price {
  font-size: var(--fs-300);
  color: #999;
  text-decoration: line-through;
  margin-right: .35rem;
}

.product-miniature .discount-product {
  font-size: var(--fs-200, .75rem);
  font-weight: 700;
  color: #fff;
  background: var(--jvmc1);
  padding: .15rem .45rem;
  border-radius: 6px;
  vertical-align: middle;
}

/* Quick view overlay */
.product-miniature .highlighted-informations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  transition: opacity .25s ease;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.product-miniature:hover .highlighted-informations {
  opacity: 1;
}

.product-miniature .highlighted-informations .quick-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #fff;
  color: var(--black1);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
      margin-bottom: 1rem;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.product-miniature .highlighted-informations .quick-view:hover {
  background: var(--jvmc1);
  color: #fff;
  transform: scale(1.1);
}

.product-miniature .highlighted-informations .quick-view svg {
  width: 20px;
  height: 20px;
}

/* Product flags / badges */
.product-miniature .product-flags {
  position: absolute;
  top: .5rem;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-miniature .product-flags li.product-flag {
  font-size: var(--fs-200, .75rem);
  font-weight: 700;
  padding: .25rem .6rem;
  margin-bottom: .25rem;
  border-radius: 0 6px 6px 0;
}

.product-miniature .product-flags li.product-flag.on-sale {
  background: var(--jvmc1);
  color: #fff;
}

.product-miniature .product-flags li.product-flag.discount {
  background: var(--jvmc1);
  color: #fff;
}

.product-miniature .product-flags li.product-flag.new {
  background: var(--darkBlue);
  color: #fff;
}

.product-miniature .product-flags li.product-flag.out_of_stock {
  background: #888;
  color: #fff;
}

#header .header-nav {
    background-color: var(--black1);
    padding-inline: var(--gutter-inline);
    border-bottom: none;
}

#wrapper, #header .header-top {
    padding-inline: var(--gutter-inline);
}

body#index {
  background-image: url("/themes/JVMC_PS8_2026/assets/img/background1.webp");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;  /* pleine largeur, hauteur naturelle, tile verticalement */

  width: 100%;
  min-height: 60vh;      /* hauteur visible minimale */
  /* max-height retiré : contraignait la zone de peinture du background à 700px,
     ce qui limitait la texture au tout haut de la page. Body doit pouvoir grandir
     avec le contenu pour que le repeat-x couvre toute la largeur du hero. */
}

#index #wrapper, #index #header {
    background: none;
}

#index .header-jvmc-icons svg, #index .cart-products-count {
}

#index .header-jvmc-icons a {
    box-shadow: none;
}

#index .scroll_heading .my-cart-slot,  #index #header .scroll_heading .header-jvmc-icon.ico-search, #index .scroll_heading .header-jvmc-icons a {
        box-shadow: var(--gray-shadow1);
}

#header .header-jvmc-icons a:hover {color: white;}

#index .header-jvmc-icons .blockcart a {box-shadow: none;}

#index .my-cart-slot, #index #header .header-jvmc-icon.ico-search {
        box-shadow: none;
}

#index .scroll_heading .header-jvmc-icons svg, #index .scroll_heading .cart-products-count {
}

#index #header.menu-open .my-cart-slot, #index #header.menu-open .header-jvmc-icon.ico-search, #index #header.menu-open .header-jvmc-icons a {

    box-shadow: var(--gray-shadow1);
}

@media (max-width: 767px) {
    #index .ets_mm_megamenu .container {
        background-color: transparent;
    }
}

#index .ybc-menu-toggle .icon-bar {background-color : var(--white1);}

#index .ybc-menu-toggle {
color :  var(--white1);
}

#index .scroll_heading .ybc-menu-toggle .icon-bar {background-color : var(--black1);}

#index .scroll_heading .ybc-menu-toggle {
color :  var(--black1);
}

#index .mm_menus_ul.active .mm_menu_content_title {
    color: var(--black1);
}

.mm_menus_ul.active .menu-logo {display:none;}

#header {
    box-shadow: none;
}

#wrapper {
    background: var(--white1);
}

/*logo du menu */

/* Le <li> du logo */
.mm_menus_ul > li.menu-logo > a .mm_menu_content_title{
  /* on garde le texte pour SR/SEO, mais invisible visuellement */
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On injecte le logo */
.mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before{
  content: "";
  display: block;
  width: 130px;   /* adapte */
  height: 130px;   /* adapte */
  background: url("/themes/JVMC_PS8_2026/assets/img/logo.svg") center / contain no-repeat;
  filter: invert(100%) drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
}

.scroll_heading .mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before{
  width: 110px;   /* adapte */
  height: 110px;   /* adapte */
  transition: all 0.2s ease;
}

/* Optionnel : zone cliquable + padding cohérent */
.mm_menus_ul > li.menu-logo > a{
  padding: 0px;
}

/* centre verticalement le contenu du lien dans l'onglet */
.mm_menus_ul > li.mm_menus_li_tab > a.ets_mm_url{
  display: flex;
  align-items: center;
  height: 100%;
}

.transition_slide.ets_mm_megamenu .mm_columns_ul {
    overflow: hidden;
}

#header .ets_mm_megamenu_content {
    border : none;
        background: var(--white1);
}

#header .layout_layout1 .mm_menus_li:last-child {
    border: none;
}

#header .layout_layout1 .mm_menus_li:nth-child(2)
 {
    border: none;
}

#header .layout_layout1 .mm_menus_li.mm_no_border {
    border: none;

}

#header .layout_layout1:not(.ybc_vertical_menu).click_open_submenu .mm_menus_li.open_li > a:before {background-color:transparent;}

#header .layout_layout1.click_open_submenu .mm_menus_li.mm_has_sub.open_li > a:after {bottom:0px;}

#index .mm_menu_content_title {color:var(--white1);font-weight: 500;}
#index #header.menu-open .mm_menu_content_title {color:var(--black1);}
#index .scroll_heading .mm_menu_content_title, #index .header-jvmc.is-sticky .mm_menu_content_title {color:var(--black1);}

/* état normal */
#index .mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before{
  filter: invert(0%) drop-shadow(3px 3px 4px rgba(0,0,0,.3));
}

/* état menu ouvert — DOIT être après */
#index #header.menu-open .mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before{
  filter: invert(100%) drop-shadow(3px 3px 4px rgba(0,0,0,.3));
}
#index .scroll_heading .mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before, #index .header-jvmc.is-sticky .mm_menus_ul > li.menu-logo > a .mm_menu_content_title::before{
    filter: invert(100%) drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
    width: 110px;
    height: 110px;
  }

#index .ets_mm_megamenu_content {
    border: none;
    background: transparent;
}

#index #header .scroll_heading {
        background-color: var(--white1);
    }
#index #header.menu-open .ets_mm_megamenu.layout_layout1 , #index .header-jvmc.is-sticky .ets_mm_megamenu.layout_layout1{
        background: var(--white1);
    }
#index .ets_mm_megamenu.layout_layout1 {
        background: transparent;
    }

#index .ets_mm_url {background-color: transparent;}

/* ─── Vague SVG en bas de la barre menu — même esthétique que les
       waves entre sections home. Affichée par défaut (pages != home)
       ou conditionnellement sur home (uniquement quand la barre est
       blanche : sticky ou menu ouvert). Fill blanc, fond SVG transparent.
       Filled area au top (touche la barre), wavy edge qui descend dans
       le contenu — en phase horizontale avec les vagues home (peak à
       x=360). Amplitude réduite par rapport aux vagues home pour rester
       discret sur la bar. ─── */
.ets_mm_megamenu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'><path d='M0,0 L0,5 Q360,-5 720,5 T1440,5 L1440,0 Z' fill='%23ffffff'/></svg>");
  pointer-events: none;
  z-index: 2;
  /* Pas de transition par défaut : disparition instantanée quand la barre
     redevient transparente sur home (évite le délai blanc fantôme). */
  transition: opacity 0s;
}
/* Sur la home, masquer la vague tant que la barre est transparente
   (en haut de page). Elle réapparaît quand sticky ou quand le menu est
   ouvert (= barre devient blanche, raccord visuel cohérent). */
#index .ets_mm_megamenu::after {
  opacity: 0;
}
#index #header.menu-open .ets_mm_megamenu::after,
#index .ets_mm_megamenu.scroll_heading::after {
  opacity: 1;
  /* Fade-in smooth uniquement à l'apparition (barre devient blanche). */
  transition: opacity .25s ease;
}

/* ════════════════════════════════════════════════════════
   MEGAMENU — labels de sub-category au-dessus des colonnes
   (finesse / phare / sportif / partiel / résistant / la gamme).
   Variante A : pill teal léger (bg rgba 8% + color jvmc-deep,
   uppercase + letterspacing). Override 2 règles du module avec
   specificity (0,4,0). */
.ets_mm_megamenu .ets_mm_block > .h4.mm_block_title {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto 14px !important;
  padding: 4px 14px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: rgba(36, 108, 102, 0.08) !important;
  color: var(--jvmc-deep) !important;
  border-radius: 999px !important;
  font-family: var(--font-main) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.ets_mm_megamenu .ets_mm_block > .h4.mm_block_title a {
  color: inherit;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════
   MEGAMENU SIDEBAR (.mm_tabs_li) — étape 1 : active state.
   Fond teal subtil sur l'item .open uniquement, rien d'autre. */
.ets_mm_megamenu .mm_tabs_li.open .mm_tab_li_content {
  background: rgba(36, 108, 102, 0.08) !important;
  border-radius: 6px !important;
  box-shadow: inset 3px 0 0 var(--jvmc-deep) !important;
}
/* Étape 2 : hover state sur items inactifs — fond teal très léger
   pour signaler la cliquabilité, transition douce. */
.ets_mm_megamenu .mm_tabs_li:not(.open) .mm_tab_li_content {
  transition: background .2s ease !important;
}
.ets_mm_megamenu .mm_tabs_li:not(.open):hover .mm_tab_li_content {
  background: rgba(36, 108, 102, 0.04) !important;
  border-radius: 6px !important;
}
/* Étape 3 : couleur des icônes SVG — teal-deep pour cohérence
   avec la palette brand. SVG utilise stroke="currentColor", donc
   la color: cascade sur le stroke. */
.ets_mm_megamenu .mm_tabs_li .mm_svg_icon {
  
}
/* Étape 3 bis : titre de l'item .open en teal-deep — renforce le
   signal visuel d'item actif en plus du fond teal. */
.ets_mm_megamenu .mm_tabs_li.open .ets_mm_url {
  color: var(--jvmc-deep) !important;
}

/* ════════════════════════════════════════════════════════
   MEGAMENU SIDEBAR — bottom reviews block (.mm_tabs_reviews).
   Option 1 : restyle discret premium — étoiles passées en
   teal-deep (au lieu de #111 noir), rating en darkBlue, count
   en gray subtle. Override module CSS via specificity (0,2,0)
   + !important (cf. mémoire ets-megamenu-css-override). */
.ets_mm_megamenu .mm_reviews_rating {
  color: var(--darkBlue) !important;
  font-weight: 700 !important;
}
.ets_mm_megamenu .mm_reviews_stars,
.ets_mm_megamenu .mm_star_filled {
  color: var(--jvmc-deep) !important;
}
/* Half-star : base pâle teal pour le creux, overlay (::before) en plein teal */
.ets_mm_megamenu .mm_star_half {
  color: rgba(36, 108, 102, 0.22) !important;
}
.ets_mm_megamenu .mm_star_half::before {
  color: var(--jvmc-deep) !important;
}
.ets_mm_megamenu .mm_reviews_count {
  color: var(--gray1, #888) !important;
  font-size: 11px !important;
}

/* ════════════════════════════════════════════════════════
   MEGAMENU — carte "Voir toute la collection" (variante de
   .product-miniature). Réutilise la grille produit mais désactive
   image/prix/rating pour assumer un rôle éditorial de découverte.
   Stretched-link sur l'ensemble, hover lift cohérent avec les
   testimonials de la home. GPU only.
   ════════════════════════════════════════════════════════ */
.product-miniature--see-all {
  position: relative;
  isolation: isolate;
}
.product-miniature--see-all .thumbnail-container {
  background: linear-gradient(160deg,
    rgba(36, 108, 102, 0.04) 0%,
    rgba(16, 209, 192, 0.06) 100%);
  border-radius: var(--home-radius, 8px);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
  height: 100%;
  /* Override : pas de padding-bottom hérité du style produit générique */
  padding-bottom: 0;
}
.product-miniature--see-all:hover .thumbnail-container {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(36, 108, 102, 0.12);
}

/* Zone "image" remplacée par un icône grand format centré.
   Ratio 5/4 (plus court qu'un carré) pour matcher la hauteur des
   images produit du megamenu et éviter que la carte See-all soit
   visiblement plus haute que ses voisines.
   Specificity bumpée à (0,2,0) pour battre `.product-miniature
   .product-thumbnail` qui force display:block et aspect-ratio:1/1. */
.product-miniature--see-all .product-thumbnail--see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  text-decoration: none;
  overflow: hidden;
}
.product-miniature--see-all .see-all-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--jvmc-deep);
  box-shadow: 0 6px 22px rgba(36, 108, 102, 0.10);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
  flex-shrink: 0;
}
.product-miniature--see-all .see-all-icon svg {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0;
}
.product-miniature--see-all:hover .see-all-icon {
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(36, 108, 102, 0.18);
}

/* Stretched-link : toute la carte cliquable via la thumbnail link */
.product-miniature--see-all .product-thumbnail--see-all::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Description : même classes que les autres cards, enrichies */
.product-miniature--see-all .mm-product-description {
  padding: 0.8rem 1rem 1.2rem;
}
.product-miniature--see-all .product-title a {
  color: var(--darkBlue);
  text-decoration: none;
}
.product-miniature--see-all:hover .product-title a {
  color: var(--jvmc-deep);
}
/* Eyebrow see-all : taille bumpée à 12px + !important pour battre
   le module qui force 13px lowercase gris sur tous les .product_combination
   (spécificité 0,3,0). Specificity poussée à (0,3,0) en chainant. */
.ets_mm_block .product-miniature--see-all .product_combination {
  color: var(--jvmc-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 4px !important;
}
.see-all-tagline {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.85rem;
  color: var(--black2, #555);
  line-height: 1.4;
}
.see-all-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  transition: gap .25s ease;
}
.product-miniature--see-all:hover .see-all-cta {
  gap: 10px;
}
.see-all-cta svg {
  transition: transform .25s ease;
}
.product-miniature--see-all:hover .see-all-cta svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .product-miniature--see-all .thumbnail-container,
  .product-miniature--see-all .see-all-icon,
  .see-all-cta,
  .see-all-cta svg {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   MEGAMENU — carte "feature" (variante de .product-miniature)
   Pour mettre en avant une sous-catégorie spécifique dans une
   colonne 3/12 (ex. "Perruque femme" dans Prothèses Médicales).
   Réutilise tout le styling produit (image, thumbnail, hover)
   mais ajoute eyebrow teal-deep + tagline + CTA chevron.
   Stretched-link pattern via ::after sur la thumbnail link. */
.product-miniature--feature {
  position: relative;
  isolation: isolate;
}
/* Chaîne de positionnement explicite pour que le stretched-link
   ::after couvre TOUTE la card (image + description) :
   - thumbnail-container = positioned ancestor (relative)
   - product-thumbnail = static (ne capture pas le ::after)
   - ::after = absolute inset:0 → fills thumbnail-container = whole card */
.product-miniature--feature .thumbnail-container {
  position: relative !important;
}
.product-miniature--feature .product-thumbnail {
  position: static !important;
}
.product-miniature--feature .product-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
/* Anti-flicker : force cursor:pointer sur tout descendant de la card
   pour éviter que le curseur switche entre pointer (sur l'overlay
   ::after) et default (sur les textes internes type tagline/eyebrow). */
.product-miniature--feature,
.product-miniature--feature * {
  cursor: pointer;
}
/* Stretched-link fix : pointer-events:none sur les éléments non-cliquables
   de la description pour que les clics passent à travers et atteignent
   le ::after de la stretched-link en dessous. Le titre <a> reste naturel-
   lement cliquable (pas concerné). */
.product-miniature--feature .mm-product-description,
.product-miniature--feature .product-title,
.product-miniature--feature .product_combination,
.product-miniature--feature .feature-tagline,
.product-miniature--feature .feature-cta,
.product-miniature--feature .feature-cta * {
  pointer-events: none;
}
/* Titre cliquable doit rester au-dessus du stretched-link ET ré-activer
   pointer-events (son parent .product-title est désormais none). */
.product-miniature--feature .product-title a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.product-miniature--feature .product-title a {
  color: var(--darkBlue);
  text-decoration: none;
}
.product-miniature--feature:hover .product-title a {
  color: var(--jvmc-deep);
}
/* Variante carte à lien unique : le titre est du texte simple (pas de 2e <a>),
   on lui applique donc directement la couleur/hover du titre. Additif :
   inerte sur les cartes à <a> interne (le <a> impose sa propre couleur). */
.product-miniature--feature .product-title {
  color: var(--darkBlue);
}
.product-miniature--feature:hover .product-title {
  color: var(--jvmc-deep);
}
.ets_mm_block .product-miniature--feature .product_combination {
  color: var(--jvmc-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  text-align: center !important;
  margin-top: 4px !important;
}
.feature-tagline {
  margin: 0.6rem 0 0.8rem;
  font-size: 0.85rem;
  color: var(--black2, #555);
  line-height: 1.45;
  text-align: center;
}
.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  transition: gap .25s ease;
}
.product-miniature--feature:hover .feature-cta {
  gap: 10px;
}
.feature-cta svg {
  transition: transform .25s ease;
}
.product-miniature--feature:hover .feature-cta svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .feature-cta,
  .feature-cta svg {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════
   MEGAMENU — bloc Mini-FAQ Mosaïque 2×2 (6/12 dans Prothèses
   Médicales). 4 cards cliquables avec icône sémantique + CTA.
   Toutes pointent vers la même page FAQ remboursement. */
.mm-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 12px;
}
.mm-faq-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background: linear-gradient(160deg,
    rgba(36, 108, 102, 0.03) 0%,
    rgba(16, 209, 192, 0.05) 100%);
  border: 1px solid rgba(36, 108, 102, 0.10);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--darkBlue);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  min-height: 130px;
  position: relative;
  isolation: isolate;
}
.mm-faq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(36, 108, 102, 0.10);
  border-color: rgba(36, 108, 102, 0.22);
  color: var(--jvmc-deep) !important;
}
.mm-faq-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--jvmc-deep);
  transition: background .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.mm-faq-card:hover .mm-faq-card__icon {
  background: var(--jvmc-deep);
  color: #fff;
  transform: scale(1.05);
}
.mm-faq-card__icon svg {
  display: block;
}
.mm-faq-card__question {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
  flex: 1;
}
.mm-faq-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  margin-top: auto;
  transition: gap .25s ease;
}
.mm-faq-card:hover .mm-faq-card__cta {
  gap: 9px;
}
.mm-faq-card__cta svg {
  transition: transform .25s ease;
}
.mm-faq-card:hover .mm-faq-card__cta svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .mm-faq-card,
  .mm-faq-card__icon,
  .mm-faq-card__cta,
  .mm-faq-card__cta svg {
    transition: none;
  }
}

.header-jvmc-icons {
    align-items: center;
    display: flex;
margin-right: var(--gutter-inline);
}

.header-jvmc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: currentColor;
  text-decoration: none;
}

.header-jvmc-icon span {
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Le lien est la "ligne" flex */
#_desktop_cart .header a,
#_desktop_cart .header {
  display: inline-flex;
  align-items: center;      /* ALIGNEMENT VERTICAL */
  gap: .4rem;               /* espace constant entre icône / texte / count */
  white-space: nowrap;
      color: var(--white1);
}

/* Icône SVG */
#_desktop_cart .cart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Texte */
#_desktop_cart .cart-label {
  line-height: 1;
}

/* Compteur */
#_desktop_cart .cart-products-count {
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  padding-bottom: 1px;
}

/* Conteneur panier aligné avec les autres icônes */
.header-jvmc-icons .my-cart-slot {
    height: 40px;
    display: flex;
    align-items: center;
}

.header-jvmc-icons .my-cart-slot .blockcart {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-jvmc-icons .blockcart .header {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.header-jvmc-icons .blockcart .header a {
    display: flex;
    align-items: center;
    gap: 2px;
}

.header-jvmc-icons .blockcart .cart-icon svg {
    display: block;
    vertical-align: middle;
    margin-top: -3px;
}

.header-banner {
    height: 30px;
    background-color: var(--black1);
    display: flex;
    align-items: center;
}

#banner-contact a {
    align-items: center;
    background-color: var(--jvmc1);
    border-radius: 5px;
    display: inline-flex;
    padding: 0 8px;
}

#banner-contact {
    margin-left: auto;
    margin-right: var(--gutter-inline)
}

#main .images-container .product-images img{
  aspect-ratio: 1 / 1;
}

/* ================================
   Product page: thumbnails LEFT
   Classic PS 8.x (REAL markup)
   ================================ */

#main .images-container{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Main image */
#main .images-container .product-cover{
  flex: 1 1 auto;
  min-width: 0;
  position: sticky;
    top: 130px;
        margin-bottom: 0px;
}

/* Wrapper of thumbnails */
#main .images-container .js-qv-mask.js-qv-mask.scroll{
    max-width: 240px;
    flex: 0 0 auto;
    width: 34%;
}

/* Thumbnails list */
#main .images-container .product-images{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

/* Each thumb */
#main .images-container .thumb-container{
  width: 100%;
}

/* Thumb image */
#main .images-container .thumb-container img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  cursor: pointer;
  border-radius: 20px;
}

/* --- Mobile: thumbs back under main image --- */
@media (max-width: 767px){
  #main .images-container{
    flex-direction: column;
  }

  #main .images-container .js-qv-mask{
    order: 0;
    width: 100%;
  }

  #main .images-container .product-images{
    flex-direction: row;
    justify-content: center;
    margin-top: 4px;
  }

  #main .images-container .thumb-container{
    width: 64px;
  }
  #product .page-content > .product-flags {
    top: 85px;
  }
  #product .product-cover {
        margin-top: -12px;
  }
}

#main .images-container .scroll-box-arrows{
  display: none !important;
}

#product .col-md-6 {padding-left:0px;}
#content-wrapper {padding:0px;}
.row {
        margin-right: 0px;
        margin-left: 0px;}

#product #content {
    max-width: 100%;
}

#product-modal .modal-content .modal-body .product-cover-modal, .product-cover img {
    border-radius: 20px;
}

#product .scroll-box-arrows.scroll {
    display: none;
}

.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: #dbdbdb 1px solid;
}

.has-discount .discount {
    background: var(--jvmc1);
    border-radius: 6px;
    font-weight: 700;
    vertical-align: middle;
}
/* flags discount/amount/percentage gérés dans le bloc product cards UI */

@media (max-width: 767px) {
    .ets_mm_megamenu.hook-default {
        margin-top: 0px;
        padding: 0px;
    }
    .col-md-6 {
        padding-right: 0px;
    }
    
    .ets_mm_megamenu .container {
        background-color: transparent;
    }
}

#index #header .header-jvmc {
    box-shadow: none;
}

.header-jvmc {
    box-shadow: 0px 5px 9px #f7f7f7;
}

.ets_mm_megamenu.hook-default {
    border-bottom: 1px solid #F7F7F7;
}

#index .ets_mm_megamenu.hook-default {
    border-bottom: none;
}

.breadcrumb svg {
    vertical-align: sub;
}

.mm_menu_content_title {
    /* font-family: system-ui !important; */
    letter-spacing: 2px;
    font-weight: 500;
    text-transform: capitalize;
    font-size:15px;
}

.header-jvmc-icons .my-cart-slot {
    margin-left: 5px;
}

.search-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(255,255,255,.98);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:10vh;
}

.search-overlay.is-active{
  opacity:1;
  visibility:visible;
}

.search-overlay-inner{
  width:100%;
  max-width:720px;
  padding:0 1.25rem;
}

.search-close{
  appearance:none;
  border:0;
  background:transparent;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  display:block;
  margin-left:auto;
}

.search-overlay input[type="search"],
.search-overlay input[type="text"]{
  width:100%;
  font-size:1.25rem;
  padding:1rem 0;
  border:0;
  border-bottom:2px solid currentColor;
  background:transparent;
  outline:none;
}

#index .breadcrumb {display:none;}

@media (min-width: 992px) {
    
    /* pour avoir le menu toujours au milieu de la page */
  .ets_mm_megamenu .ets_mm_megamenu_content_content > ul.mm_menus_ul{

  }
}

.ico-account, .ico-mail {
    background-color: var(--jvmc1);
    border-radius: 10px;
    box-shadow: var(--gray-shadow1);
}

.ico-mail {
    margin-right: 6px;
}

.my-cart-slot, #header .header-jvmc-icon.ico-search {
    background-color: var(--black1);
    color: #FFF;

    border-radius: 10px;
    box-shadow: var(--gray-shadow1);
}

.header-jvmc-icons-left {
    margin-left: var(--gutter-inline);
    margin-right: 0px;
}

.ico-search {
    margin-right: 5px;
}

.my-cart-slot {
    padding: 2px 9px 0 8px;
}

#social-icons a {color:var(--white1);     display: flex;}
#social-icons a:hover {color:var(--jvmc1);}
#social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    margin-right: var(--gutter-inline);
}

.icon-youtube-banner {
    margin-right: 5px;
}

.btn-primary, .btn-primary:hover {
    background-color: var(--jvmc1);
    border-radius: 10px;
    box-shadow: var(--gray-shadow1);
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.btn-primary.dropdown-toggle.focus, .open>.btn-primary.dropdown-toggle:focus, .open>.btn-primary.dropdown-toggle:hover {
    background-color: var(--black1);
}

.bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default {
    background: var(--jvmc1);
}

.ico-account.ico-mobile {margin-right: 6px;}

@media (min-width: 992px) {
    .ico-mobile { display:none;}
        #product .product-main-block {
        padding-left: 40px;
        padding-right: 50px;
    }
    .product-second-image {
      padding: 0px 4% 0px 0px;
  }
}
@media (max-width: 992px) {
    .ico-desktop { display:none;}
    .ico-mail {
    margin-right: 0px;
    }
}

.product-prices {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding: 8px 0 4px 0;
}

#main .page-header.product-header {
    margin-bottom: 0rem;
}

.product-prices .tax-shipping-delivery-label {display:none;}

.product-prices div {
    margin-bottom: 0rem;
}

.page-content.page-cms ul, p {

        color: var(--black2);
        letter-spacing: 0.2px;
}

.col-md-7 .product-description {
padding: 0 4rem;
}

.product-availability .out_of_stock {display:none;}

.product-price {
    color: var(--jvmc1);
}

.usp-list {
    list-style: none;
    padding: 20px 0 0 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.usp{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fafafa;
  line-height: 1.2;
}

.usp__icon{
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.usp__svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.usp__text{
  font-size: 14px;
}

.product-information {
    padding-top: 20px;
}

.h1.product-title {
    font-weight: 700;
    padding-top: 6px;
    text-wrap: auto;
}

#wrapper {
    padding-top: 2.563rem;
}

.product-variants.js-product-variants {
  text-align: center;
}

.add-to-cart {
  display: inline-flex;
  align-items: center;   /* centre verticalement */
  justify-content: center;
  gap: 8px;              /* espace icône / texte */
}

.add-to-cart .icon-cart {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .add-to-cart .add-to-cart-label {
    display: none;
  }
  #product .add-to-cart {
    height: 38px;
    padding: 0 16px;
  }
}

.tabs .nav-tabs .nav-link.active, .tabs .nav-tabs .nav-link:hover {
    border-bottom: var(--black1) 1px solid;
    margin-bottom: 14px;
}
.tabs .nav-tabs .nav-link.active {
    color: var(--black1);
}

.has-discount .page-content.page-cms ul, .has-discount p, .has-discount.product-price, .page-content.page-cms .has-discount ul {
    color: var(--jvmc1);
}

.product-discount .regular-price {
    font-weight: 700;
}
.product-main-block .product-discount .regular-price {
    font-weight: 400;
}
.tabs .nav-tabs .nav-link {
    color: var(--black1);
    font-weight: 400;
    letter-spacing: 0.4px;
    font-size: 15px;
}

.tabs {
    padding: 1.25rem 0rem;
    margin-top: 2rem;
}

.products-selection {
    padding: .6rem 0;
    margin-bottom: .5rem;
    align-items: center;
}

.products-selection .total-products p {
    margin: 0;
    color: var(--black1);
    font-size: var(--fs-300);
    font-weight: 500;
}

.products-selection .sort-by-row,
.products-selection .sort-by-row .select-title,
.products-selection .sort-by-row .sort-by,
.products-selection p .select-title,
.products-selection p .sort-by {
    font-size: .875rem;
    font-weight: 500;
    border-radius: 8px;
    letter-spacing: .5px;
}

.block-category .block-category-inner #category-description .page-content.page-cms ul:first-child, .block-category .block-category-inner #category-description p:first-child, .page-content.page-cms .block-category .block-category-inner #category-description ul:first-child {
    letter-spacing: 0.3px;
}

.btn-unstyle.select-title {
    line-height: 20px;
}

.block-category .block-category-inner #category-description strong {
    font-weight: 700;
    color: var(--black1);
}

@media (min-width: 992px) {
    #js-product-list-header {
        display: flex;
    }
    .category-cover {
        width: 50%;
    }
    
    .block-category.card.card-block {
        width: 50%;
    }    
    
}

.category-cover img {max-width:100%;}

@media screen and (max-width: 767px) {
    .category-cover {
        display: inherit;
    }
}

.pagination {
    color: var(--black1);
}

.usp-list {
    color: var(--black1);
}

/* --- Product page : section stacking / overlap scroll effect --- */
.product-top-block {
  z-index: 1;
}
.product-bottom-block {
  position: relative;
  z-index: 2;
  background: #fafafa;
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  padding-top: 1rem;
  box-shadow: 0 -10px 10px -5px rgb(0 0 0 / 9%);
  border-radius: 24px;
 }

/* --- Fixed product actions (real form) --- */
.product-actions.js-product-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--white1);
  padding: 5px 0px 0px 0px;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}
body.noscroll .product-actions.js-product-actions {
  display: none;
}

.product-second-image {
    margin-top: 140px;
    position: sticky;
    top: 140px;
}

/* --- Product page : secondary image card style (comme les miniatures catégorie) --- */
.product-main-only-wrap {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  transition: box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
  border: 1px solid #00000012;
}
.product-main-only-wrap:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
  transform: translateY(-3px);
}
.product-main-only-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}
.product-main-only-wrap:hover img {
  transform: scale(1.04);
}

.col-md-7 {
    padding-left: 0px;
}

#product-modal .modal-content .modal-body .product-images img {
    width: 9.25rem;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
}

/* 1) Met tout en flex sur une ligne */
#product .bootstrap-touchspin {
  display: flex;
  align-items: stretch;
}

/* 2) L’input au milieu */
#product .bootstrap-touchspin input#quantity_wanted {
  order: 2;
  min-height: 44px;
  width: 72px;          /* ajuste */
  text-align: center;
}

/* 3) Le wrapper des boutons devient horizontal et se place autour de l’input */
#product .bootstrap-touchspin .input-group-btn-vertical {
  display: contents; /* “déballe” le wrapper pour réordonner les boutons */
}

/* 4) Le bouton - à gauche */
#product .bootstrap-touchspin .bootstrap-touchspin-down {
  order: 1;
}

/* 5) Le bouton + à droite */
#product .bootstrap-touchspin .bootstrap-touchspin-up {
  order: 3;
}

/* 6) Tailles tactiles */
#product .bootstrap-touchspin .btn-touchspin,
#product .bootstrap-touchspin .bootstrap-touchspin-up,
#product .bootstrap-touchspin .bootstrap-touchspin-down {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#product .product-quantity .input-group-btn-vertical .btn {
    margin: 0px;
}

/* Icônes touchspin (remplacement Material Icons) */
.bootstrap-touchspin .touchspin-up,
.bootstrap-touchspin .touchspin-down {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  line-height: 0;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px 16px;
}
.bootstrap-touchspin .touchspin-up {
  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='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15'/%3E%3C/svg%3E") !important;
}
.bootstrap-touchspin .touchspin-down {
  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='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

#product .product-quantity .input-group-btn-vertical .btn i {
    top: 27%;
    left: 30%;
    font-size: 1rem;
}

#product .product-add-to-cart .product-quantity {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

#product .bootstrap-touchspin input#quantity_wanted {
    border-radius: 10px;
}

#product .product-quantity .input-group-btn-vertical .btn {
    border-radius: 10px;
}

@media (max-width: 767px) {
  #product .bootstrap-touchspin .btn-touchspin,
  #product .bootstrap-touchspin .bootstrap-touchspin-up,
  #product .bootstrap-touchspin .bootstrap-touchspin-down {
    min-width: 38px;
    min-height: 38px;
    max-height: 38px;
  }
  #product .bootstrap-touchspin input#quantity_wanted {
    min-height: 38px;
    max-height: 38px;
    height: 38px;
  }
}

.page-my-account #content .links a span.link-item {
    color: var(--black1);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-transform: none;
    border: solid 1px #f1f1f1;
    box-shadow: 0PX 4PX 4PX #f5f5f5;
    font-weight: 400;
    border-radius: 12px;
}

.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type=submit] .search:hover, .top-menu .sub-menu a:hover {
    color: var(--jvmc1);
}

.page-addresses .address {
    border: solid 1px #f1f1f1;
    box-shadow: 0PX 4PX 4PX #f5f5f5;
}

.order-options #delivery {display:none;}

.form-control {
    color: var(--black1);
    background: white;
    border: 1px solid rgb(145 145 145 / 25%);
    border-radius: 12px;
}

.input-group .input-group-btn>.btn[data-action=show-password] {
    padding: .78rem 1rem;
    background: var(--black1);
    border-radius: 0PX 12PX 12PX 0PX;
}

.block-promo .promo-input+button {
    border: 2px solid var(--jvmc1);
}

.block-promo .promo-input {
    margin-right: .24rem;
    color: var(--black1);
    border: 1px solid var(--lightGrey1);
    border-radius: 12px;
}

.form-control:focus {
    outline: .1rem solid var(--jvmc1);
}
.form-control:focus {
    border-color: var(--jvmc1);
}

form .form-control-label {
    letter-spacing: 0.4px;
}

.forgot-password a {color:var(--black1);}

.no-account a {
    color: var(--black1);
    background-color: white;
    border-radius: 10px;
    padding: 4px 26px;
    box-shadow: var(--gray-shadow1);
    font-weight: 500;
    border: 1px solid #2323234d;
}

#contact .bootstrap-filestyle .btn-default {
    border-radius: 0px 12px 12px 0px;
}

.fc-turnstile-wrapper {
    width: 100%;
}

.form-group.row:has(input[name="newsletter"]) {
  display: none;
}

.form-footer {
  text-align: center;
}

#contact .form-footer {
  text-align: center !important;
}

.form-footer .form-control-submit {
  float: none !important;
  margin: 0 auto;
  display: inline-block;
}

.card-block {
    padding: 0px;
}

.contact-form {
    padding: 0px;
}

#contact .col-md-9 {padding:0px;}

#my-account .text-sm-center a {
    color: white;
    background-color: var(--black1);
    padding: 5px 10px;
    border-radius: 12px;
        display: inline-block;
}

.fc-cp-progress-step.completed .fc-cp-progress-step-number {
    background: var(--jvmc1);
    color: #fff;
    border-color: var(--jvmc1);
}

.fc-cp-progress-step.completed .fc-cp-progress-step-name {
    color: #08897d;
}

.fc-cp-header::after {
    background: var(--jvmc-deep);
}

.fc-cp-option-card.selected .fc-cp-option-check {

}

.fc-cp-option-card.selected {

}

.fc-cp-step-number {
    color: var(--jvmc-deep);
}

.fc-cp-required-badge {
    background: var(--jvmc-deep);
}

.fc-cp-progress-step.active .fc-cp-progress-step-number {
    background: var(--black1);
border-color: var(--black1);
    box-shadow: 0 0 0 4px rgb(71 71 71 / 14%);
}

.fc-cp-progress-step.active .fc-cp-progress-step-name {
    color: var(--black1);
}

.fc-cp-progress-fill {
    background: var(--jvmc1);
}

.fc-cp-btn-next {
    background: linear-gradient(135deg, #4dd7cb, var(--jvmc1));
}
.fc-cp-btn-next:hover {
    background: linear-gradient(135deg, var(--jvmc1), #4dd7cb);
}

.fc-cp-option-card.selected .fc-cp-option-name {
    color: var(--black1);
}
.btn:focus {
    outline: none;
}

@media (min-width: 992px) {
    #blockEmailSubscription_displayFooterBefore {
    margin: 0 0 0 auto;
    }
}

#footer .block_newsletter #block-newsletter-label {
    float: none;
    font-weight: 600;
}

#footer .container .rowed {display:flex;}

#speInp {
    height: 12px;
    margin-right: 4px;
}

input {
    border-radius: 12px;
}

.alert {
    border-radius: 12px;
}

.contact-form {
    background: transparent;
}

/* #authentication #main, #contact #main .page-content {
    border: solid 1px #f9f9f9;
    box-shadow: var(--gray-shadow2);
    border-radius: 12px;
} */

#authentication h1, #contact h1 {
    color: var(--black1);
    margin: 1.5rem 0 0 1.5rem;
}

.form-control:hover, .bootstrap-filestyle  {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
        box-shadow: var(--gray-shadow2);
}

a:hover, .btn-default:hover, .btn:hover, button:hover, input:hover, a:hover, .newsletter-conditions a:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.table thead th {
    color: #FFF;
    background-color: var(--black1);
    border-radius: 7px;
    border-bottom: transparent;
    border: 1px solid #ffffff;
}
.table-bordered, .table-bordered td, .table-bordered th {
    border: 1px solid #ffffff;
    color: var(--black1);
}
.page-footer a, .newsletter-conditions a {display: inline-block;}

.breadcrumb a:hover, .page-footer a:hover, .footer-col a:hover, .footer-logo:hover {display: inline-block;}
.address {
    border-radius: 12px;
}
.newsletter-conditions input {transform:none;}

.account-link {
    background-color: var(--jvmc1);
    border-radius: 10px;
    box-shadow: var(--gray-shadow1);
        padding: 4px 14px 4px 10px;
        color:white;
        font-weight: 700;
    letter-spacing: 0.3px;
}
.newsletter-input-group .btn:hover {box-shadow:none;}        
.account-link:hover {
    color:white;
}        
        
.psgdprinfo17 {
    color: var(--black1);
    border: 1px dashed #dbdbdb;
    border-radius: 12px;
    background: transparent;
}        
        
a {
    color: var(--jvmc1);
    font-weight: 700;
}
        
p a:hover {
    display: inline-block;
    color: #00c9b7;
}

/* ================================
   FOOTER  (Bootstrap 4 grid)
   ================================ */

/* --- Transition vague vers le footer --- */
.footer-wave {
  background: transparent;
  line-height: 0;
  margin-bottom: -1px;
}

.footer-wave--dark {
  background: #333347;
}

.footer-wave svg {
  display: block;
  width: 100%;
  height: 50px;
}

/* --- Footer Before : newsletter + réassurance --- */
.footer-before {
  background-color: #333347;
  color: var(--white1);
  padding: 2.5rem 0;
}

/* Newsletter */
.footer-newsletter {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 2rem;
}

.footer-before .block_newsletter {
  background: transparent;
  padding: 0;
}

.footer-before .block_newsletter h3 {
  color: var(--white1);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 .5rem;
}

.footer-before .block_newsletter p {
  color: rgba(255, 255, 255, .65);
  margin: 0 0 1.25rem;
  font-size: var(--fs-300);
  line-height: 1.5;
  max-width: 36ch;
}

/* Container unifié input+bouton avec border subtile qui s'illumine
   au focus-within. Donne l'effet "form premium contained" type Stripe. */
.footer-before .newsletter-input-group {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  padding: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.footer-before .newsletter-input-group:focus-within {
  border-color: rgba(16, 209, 192, 0.45);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 0 0 4px rgba(16, 209, 192, 0.10);
}

.footer-before .newsletter-input-group .input-wrapper {
  flex: 1;
}

.footer-before .newsletter-input-group input[type="email"] {
  border-radius: 10px;
  border: none;
  background: transparent;
  padding: .65rem 1rem;
  width: 100%;
  height: 100%;
  color: var(--white1);
  font-size: var(--fs-400);
  outline: none;
}
.footer-before .newsletter-input-group input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.40);
}

.footer-before .newsletter-input-group .btn-primary {
  background-color: var(--jvmc1);
  color: var(--black1);
  border: none;
  border-radius: 10px;
  padding: .65rem 1.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  /* Pulse idle subtile — halo teal qui rayonne lentement (rythme
     cardiaque ~5s) pour signaler le CTA conversion sans agresser.
     Suspendue dès qu'on focus le form ou hover le bouton. */
  animation: newsletter-btn-pulse 5s ease-in-out 2s infinite;
}
.footer-before .newsletter-input-group .btn-primary:hover {
  background-color: #0ac4b3;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 209, 192, 0.28);
  animation: none;
}
.footer-before .newsletter-input-group:focus-within .btn-primary {
  animation: none;
}
.footer-before .newsletter-input-group .btn-primary:active {
  transform: translateY(0);
}

@keyframes newsletter-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 209, 192, 0.40); }
  60%  { box-shadow: 0 0 0 14px rgba(16, 209, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 209, 192, 0); }
}

.footer-before .newsletter-conditions {
  margin-top: .85rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
  line-height: 1.5;
}

.footer-before .newsletter-conditions label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  text-align: left;
}

.footer-before .newsletter-conditions label span {
  color: rgba(255, 255, 255, 0.55);
}

.footer-before .newsletter-conditions input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--jvmc1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-before .newsletter-input-group,
  .footer-before .newsletter-input-group .btn-primary {
    transition: none;
    animation: none;
  }
  .footer-before .newsletter-input-group .btn-primary:hover {
    transform: none;
  }
}

.footer-before .newsletter-conditions a {
  padding: .25rem .15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-before .block_newsletter .alert {
  margin-top: .5rem;
  font-size: var(--fs-300);
  border-radius: 8px;
}

/* Bloc confiance / communauté */
.footer-trust {
  text-align: center;
  padding: 0 0 1rem;
}

.footer-trust h3 {
  color: var(--white1);
  font-size: var(--fs-600);
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.footer-trust-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
}

.footer-trust-stat {
  text-align: center;
}

.footer-trust-stat strong {
  display: block;
  font-size: var(--fs-800);
  font-weight: 800;
  color: var(--jvmc1);
  line-height: 1.1;
}

.footer-trust-stat span {
  display: block;
  font-size: var(--fs-300);
  color: rgba(255, 255, 255, .6);
  margin-top: .2rem;
}

.footer-trust-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: .3rem;
  color: #f5a623;
}

/* Stars constellation shimmer — chaque étoile s'allume en séquence
   au reveal du footer (déclenché par .is-revealed). Easing bouncy
   avec léger overshoot pour effet "rating bar qui se remplit". */
.footer-before .footer-trust-stars svg {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.34, 1.4, .42, 1);
}
.footer-before.is-revealed .footer-trust-stars svg {
  opacity: 1;
  transform: scale(1);
}
.footer-before.is-revealed .footer-trust-stars svg:nth-child(1) { transition-delay: 350ms; }
.footer-before.is-revealed .footer-trust-stars svg:nth-child(2) { transition-delay: 430ms; }
.footer-before.is-revealed .footer-trust-stars svg:nth-child(3) { transition-delay: 510ms; }
.footer-before.is-revealed .footer-trust-stars svg:nth-child(4) { transition-delay: 590ms; }
.footer-before.is-revealed .footer-trust-stars svg:nth-child(5) { transition-delay: 670ms; }
@media (prefers-reduced-motion: reduce) {
  .footer-before .footer-trust-stars svg {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.footer-trust-quote {
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
}

.footer-trust-quote p {
  color: rgba(255, 255, 255, .75);
  font-style: italic;
  font-size: var(--fs-400);
  margin: 0 0 .25rem;
  line-height: 1.5;
  text-align: center;
}

.footer-trust-quote cite {
  color: rgba(255, 255, 255, .45);
  font-size: var(--fs-300);
  font-style: normal;
}
.footer-trust-quote-heart {
  display: inline-block;
  margin-left: 0.2em;
  color: var(--jvmc1);
  font-size: 1.05em;
  vertical-align: -0.05em;
}

/* Réassurance */
.footer-reassurance {
  margin-top: .5rem;
}

.footer-reassurance-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem .75rem;
  border-radius: 8px;
  transition: transform .35s ease, background .35s ease;
}
.footer-reassurance-item:hover {
  transform: translateY(-3px);
  background: rgba(16, 209, 192, 0.06);
}

.footer-reassurance-item svg {
  flex-shrink: 0;
  color: var(--jvmc1);
  transition: transform .35s ease;
}
.footer-reassurance-item:hover svg {
  transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-reassurance-item,
  .footer-reassurance-item svg {
    transition: none;
  }
  .footer-reassurance-item:hover,
  .footer-reassurance-item:hover svg {
    transform: none;
  }
}

.footer-reassurance-item strong {
  display: block;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--white1);
}

.footer-reassurance-item span {
  display: block;
  font-size: var(--fs-300);
  color: rgba(255, 255, 255, .6);
}

/* ─── Reveal cascade footer-before (effet G) ───
   Quand l'utilisateur scrolle vers le footer, les enfants apparaissent
   en stagger : trust h3 (0ms) → stats (100/200/300) → quote (450) →
   reassurance items (600/680/760/840). Triggered par .is-revealed
   posée par JS via IntersectionObserver. GPU only, reduced-motion
   neutralise tout. */
.footer-before .footer-trust h3,
.footer-before .footer-trust-stat,
.footer-before .footer-trust-quote,
.footer-before .footer-reassurance > div {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .6s cubic-bezier(.22, .61, .36, 1),
    transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.footer-before.is-revealed .footer-trust h3,
.footer-before.is-revealed .footer-trust-stat,
.footer-before.is-revealed .footer-trust-quote,
.footer-before.is-revealed .footer-reassurance > div {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger trust */
.footer-before.is-revealed .footer-trust h3                  { transition-delay: 0ms; }
.footer-before.is-revealed .footer-trust-stat:nth-child(1)   { transition-delay: 100ms; }
.footer-before.is-revealed .footer-trust-stat:nth-child(2)   { transition-delay: 200ms; }
.footer-before.is-revealed .footer-trust-stat:nth-child(3)   { transition-delay: 300ms; }
.footer-before.is-revealed .footer-trust-quote               { transition-delay: 450ms; }
/* Stagger reassurance (target les Bootstrap cols, pas l'item interne) */
.footer-before.is-revealed .footer-reassurance > div:nth-child(1) { transition-delay: 600ms; }
.footer-before.is-revealed .footer-reassurance > div:nth-child(2) { transition-delay: 680ms; }
.footer-before.is-revealed .footer-reassurance > div:nth-child(3) { transition-delay: 760ms; }
.footer-before.is-revealed .footer-reassurance > div:nth-child(4) { transition-delay: 840ms; }
@media (prefers-reduced-motion: reduce) {
  .footer-before .footer-trust h3,
  .footer-before .footer-trust-stat,
  .footer-before .footer-trust-quote,
  .footer-before .footer-reassurance > div {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Footer principal --- */
.footer-container {
  background-color: var(--black1);
  /* Pattern dotted subtil — texture papier magazine, 4% blanc.
     Pure CSS, aucune requête, négligeable côté perf. */
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1.5px);
  background-size: 28px 28px;
  color: rgba(255, 255, 255, .85);
  padding: 2rem 0 0 0;
}

/* Colonne logo */
.footer-logo-col {
  text-align: center;
  margin-bottom: 1.5rem;
  min-height: 180px;
}

/* Halo teal subtil au hover du logo footer.
   Le drop-shadow s'ajoute APRÈS la filter chain blanche → glow
   teal autour de la silhouette blanche du logo. Scale léger sur
   l'anchor pour la sensation tactile. */
.footer-logo {
  display: inline-block;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.footer-logo:hover {
  transform: scale(1.04);
}

.footer-logo img {
  width: 120px;
  height: auto;
  filter: brightness(0) invert(1);
  margin-bottom: .75rem;
  transition: filter .4s ease;
}
.footer-logo:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(16, 209, 192, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo,
  .footer-logo img {
    transition: none;
  }
  .footer-logo:hover {
    transform: none;
  }
}

.footer-baseline {
  color: rgba(255, 255, 255, .55);
  font-size: var(--fs-300);
  line-height: 1.4;
  margin: 0 0 .75rem;
  padding-left: .5rem;
  max-width: 100%;
  text-align: center;
}

.footer-flag {
  display: inline-block;
  vertical-align: -1px;
  margin-right: .2rem;
  border-radius: 2px;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: .75rem;
}

/* Pills 38×38 avec brand color du réseau au hover, via pseudo
   ::before pour permettre le crossfade smooth du gradient Instagram.
   Lift + scale au hover pour la sensation tactile premium. */
.footer-container .footer-social a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, 0.85);
  transition: color .3s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.footer-container .footer-social a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}

.footer-container .footer-social a:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.06);
}

.footer-container .footer-social a:hover::before {
  opacity: 1;
}

/* Couleurs de marque par réseau (ciblées par aria-label = stable) */
.footer-container .footer-social a[aria-label="YouTube"]::before  { background: #FF0000; }
.footer-container .footer-social a[aria-label="Instagram"]::before {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.footer-container .footer-social a[aria-label="TikTok"]::before    { background: #000; }
.footer-container .footer-social a[aria-label="Facebook"]::before  { background: #1877F2; }

@media (prefers-reduced-motion: reduce) {
  .footer-container .footer-social a,
  .footer-container .footer-social a::before {
    transition: none;
  }
  .footer-container .footer-social a:hover {
    transform: none;
  }
}

/* Colonnes de liens */
.footer-col {
  margin-bottom: 1.5rem;
  text-align: center;
  min-height: 180px;
}

/* Titres footer — eyebrow premium avec accent teal sous le texte.
   Uppercase + letter-spacing pour le ton éditorial cohérent avec
   le reste du site, fine ligne 28×2px sous chaque h4 comme accent
   de marque. */
.footer-container .footer-col h4,
.footer-container .links .h3,
.footer-container .links h3,
.footer-container h4 {
  position: relative;
  display: inline-block;
  color: var(--white1);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  padding-bottom: 0.7rem;
}
.footer-container .footer-col h4::after,
.footer-container .links .h3::after,
.footer-container .links h3::after,
.footer-container h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--jvmc1);
}

.footer-container .footer-col ul,
.footer-container .links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-container .footer-col ul li,
.footer-container .links ul li {
  margin-bottom: .5rem;
}

.footer-container .footer-col ul li a,
.footer-container .links ul li a,
.footer-container a {
  color: rgba(255, 255, 255, .65);
  font-weight: 400;
  font-size: var(--fs-300);
  text-decoration: none;
  transition: color .25s ease;
}

/* Underline hover premium : fine ligne teal qui s'étire depuis le
   centre, cohérent avec l'esthétique éditoriale du site.
   Limité aux liens nav (pas le .footer-container a catch-all qui
   toucherait le logo, social, etc.). */
.footer-container .footer-col ul li a,
.footer-container .links ul li a {
  position: relative;
  display: inline-block;
}
.footer-container .footer-col ul li a::after,
.footer-container .links ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--jvmc1);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.footer-container .footer-col ul li a:hover,
.footer-container .links ul li a:hover,
.footer-container a:hover {
  color: var(--jvmc1);
}
.footer-container .footer-col ul li a:hover::after,
.footer-container .links ul li a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Colonne contact : icônes inline */
.footer-col-contact li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.footer-col-contact svg {
  flex-shrink: 0;
  color: var(--jvmc1);
}

/* Modules injectés via hooks */
.footer-container .links .collapse {
  display: block;
}

.footer-container .block-contact {
  color: rgba(255, 255, 255, .65);
  font-size: var(--fs-300);
}

.footer-container .block-contact .h4,
.footer-container .block-contact h4 {
  color: var(--white1);
}

/* --- Footer bottom : copyright + liens légaux (raffiné) ---
   Fine ligne teal gradient en accent visuel discret au-dessus,
   séparateurs middle-dot, spacing aéré, typo letterspaced. */
.footer-bottom {
  position: relative;
  background-color: #1e1e2c;
  color: rgba(255, 255, 255, .45);
  padding: 1.75rem 0;
  font-size: var(--fs-300);
}
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 320px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(16, 209, 192, 0.35), transparent);
}

.footer-copyright {
  margin: 0;
  color: rgba(255, 255, 255, .45);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .85rem;
}

.footer-sep {
  color: rgba(255, 255, 255, .25);
  font-size: 1.1rem;
  line-height: 1;
}

/* Signature monogramme JVMC centré dans le footer-bottom — éditorial
   mark typographique entre copyright (left) et liens légaux (right).
   Letter-spacing très expandé pour transformer le mot en signe de
   marque. Hidden sur mobile (où les cols stack verticalement). */
.footer-bottom .row {
  position: relative;
}
.footer-bottom .row::after {
  content: 'JVMC';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--jvmc1);
  pointer-events: none;
  opacity: 0.85;
}
@media (max-width: 991px) {
  .footer-bottom .row::after {
    display: none;
  }
}

.footer-bottom a {
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-bottom a:hover {
  color: var(--jvmc1);
}

/* Hook displayFooter masqué (contenu dupliqué, codé en dur dans le template) */
.footer-container .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Focus visible pour accessibilité clavier */
#footer a:focus-visible {
  outline: 2px solid var(--jvmc1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Footer responsive --- */

@media (max-width: 991px) {
  .footer-trust {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .footer-newsletter-col {
    margin-top: 0;
  }

  #blockEmailSubscription_displayFooterBefore,
  #blockEmailSubscription_displayFooterBefore p {
    text-align: center;
  }

  .footer-before .newsletter-conditions label {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-bottom .text-md-right {
    text-align: center;
  }

  .footer-copyright {
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .footer-trust-stats {
    gap: 1rem;
  }
}

#wrapper .breadcrumb li a {font-weight: 400;
}

.product-miniature .thumbnail-container .product-thumbnail {
    height: auto;
}

.quickview .modal-content {
    background-color: white;
}

.quickview .mask {
    margin-right: 0.6rem;
}

.quick-view {
  display:none !important;
}

.modal-body, .modal-header {
    border-radius: 24px;
}
#blockcart-modal .product-name {
    color: var(--black1);
}
.modal-content {
    border-radius: 24px;
    box-shadow: 0 4px 20px #535353;
}
#blockcart-modal .cart-content .cart-content-btn .btn {
    border-radius: 12px;
        
}
#js-product-list-header {
    margin-bottom: 0rem;
    z-index: 0;
}

.product-discounts.js-product-discounts {margin-bottom:0px;}
.product-quantity .add, .product-quantity .qty {
    margin-bottom: 0px;
}
.product-bottom-block .tabs {
    margin-top: 0rem;
    padding-top: 0px;
    padding-bottom: 0px;
    background: #fafafa;
}
.product-bottom-block .tabs .nav-tabs .nav-link.active {
    background: #fafafa;
}

@media (max-width: 767px) {
  .product-top-block .col-md-7 {
    padding-right: 0px;
  }
  .product-second-image {
    margin-top: 0px;
  }
  #main .images-container .js-qv-mask.js-qv-mask.scroll {
    max-width: none;
    flex: 0 0 auto;
    width: 100%;
  }
}
.product-accessories{
    background-color: white;
    z-index: 10;
    position: relative;
    padding-top: 4rem;
}
#product-comments-list-header, #product .product-comment-list-item, #product #product-comments-list, #product #product-comments-list-footer {
    background-color: white;
    z-index: 10;
    position: relative;
}
#product .product-comment-list-item {
  margin-bottom: 0px;}
#search #js-product-list-header {margin-bottom: 3rem;}
#product #product-availability {
  display: block;
  text-align: center;
  margin-top: 0px;
  font-weight: 600;
}
#product #product-availability i {
  vertical-align: middle;
  font-size: 18px;
  line-height: 1;
}
.js-mailalert {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#product .product-variants>.product-variants-item {
        margin: 0px 0px 8px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-variants.js-product-variants .clearfix.product-variants-item .form-control-select {
    text-align: center;
    padding: 0px;
}
#product .social-sharing {display:none;}
#product .product-comments-additional-info {display:none;}
.product-actions .control-label {
    display: none;
}

/* ═══════════════════════════════════════════════════
   Drawer coloris — bottom sheet pour swatches texture
   ═══════════════════════════════════════════════════ */

/* --- Trigger compact dans la barre sticky --- */
.swatch-drawer-trigger {
  display: none;
}
.product-actions .has-color-drawer .swatch-drawer-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  cursor: pointer;
  background: var(--white1, #fff);
  transition: border-color .2s, box-shadow .2s;
  margin: 0 auto 4px;
  max-width: fit-content;
}
.swatch-drawer-trigger:hover,
.swatch-drawer-trigger:focus {
  border-color: var(--jvmc1, #3cd2b1);
  box-shadow: 0 0 0 2px rgba(60, 210, 177, .15);
}
.swatch-drawer-trigger .swatch-preview {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #232323;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.swatch-drawer-trigger .swatch-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--black1, #1a1a1a);
  white-space: nowrap;
}
.swatch-drawer-trigger .swatch-chevron {
  width: 16px;
  height: 16px;
  opacity: .5;
  transition: transform .25s;
}
.swatch-drawer-trigger[aria-expanded="true"] .swatch-chevron {
  transform: rotate(180deg);
}

/* --- Masquer la liste originale dans la sticky quand le drawer est actif --- */
.product-actions .has-color-drawer > ul {
  display: none;
}

/* --- Overlay --- */
.swatch-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.swatch-drawer-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* --- Drawer panel --- */
.swatch-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--white1, #fff);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32, .72, 0, 1);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.swatch-drawer.is-open {
  transform: translateY(0);
}

/* Poignée de tirage */
.swatch-drawer-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: grab;
  flex-shrink: 0;
}
.swatch-drawer-handle::after {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .15);
}

/* En-tête */
.swatch-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 12px;
  flex-shrink: 0;
}
.swatch-drawer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--black1, #1a1a1a);
  margin: 0;
}
.swatch-drawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,.06);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.swatch-drawer-close:hover {
  background: rgba(0,0,0,.12);
}

/* Grille de swatches */
.swatch-drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 4px 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.swatch-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color .2s, background .2s;
}
.swatch-drawer-item:hover {
  background: rgba(0, 0, 0, .03);
}
.swatch-drawer-item.is-selected {
  border-color: var(--jvmc1, #3cd2b1);
  background: rgba(60, 210, 177, .06);
}
.swatch-drawer-item .swatch-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .1);
  background-size: cover;
  background-position: center;
  transition: transform .2s, border-color .2s;
}
.swatch-drawer-item.is-selected .swatch-circle {
  border-color: var(--jvmc1, #3cd2b1);
  transform: scale(1.08);
}
.swatch-drawer-item .swatch-name {
  font-size: .7rem;
  font-weight: 500;
  color: var(--black1, #1a1a1a);
  text-align: center;
  line-height: 1.2;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- Desktop : drawer centré en modal --- */
@media (min-width: 768px) {
  .product-actions .has-color-drawer .swatch-drawer-trigger {
    display: flex;
  }
  .product-actions .has-color-drawer > ul {
    display: none;
  }

  /* Le drawer devient une modal centrée sur desktop */
  .swatch-drawer {
    max-height: 80vh;
    max-width: 640px;
    width: 90%;
    margin: 0 auto;
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) scale(.92);
    opacity: 0;
    border-radius: 20px;
    transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .3s;
  }
  .swatch-drawer.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* Grille 4 colonnes sur desktop */
  .swatch-drawer-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Poignée inutile sur desktop */
  .swatch-drawer-handle {
    display: none;
  }

  /* Plus d'espace en haut */
  .swatch-drawer-header {
    padding: 16px 24px 12px;
  }
  .swatch-drawer-grid {
    padding: 4px 24px 28px;
    gap: 16px;
  }
}
#product .btn.disabled, #product .btn:disabled {
    cursor: not-allowed;
    opacity: 0.15;
    background-color: #000;
}
#product .product-additional-info.js-product-additional-info .tabs {
    padding: 0PX 0PX 8PX 0PX;
    margin: 0px;
}
#product .product-additional-info.js-product-additional-info .tabs .btn-primary {
margin-top: 0px !important;
}
#product .product-minimal-quantity.js-product-minimal-quantity {display:none;}

#product .js-mailalert .form-control {
    max-width: 300px;
    margin-bottom: 8px;
    text-align: center;
}
#product-availability .product-unavailable {
    color: var(--jvmc1);
}
    #product .product-bottom-block .product-description {
        padding: 0px 10%;
    }
@media (max-width: 768px) {
    #blockcart-modal .modal-body {
        padding: 1.875rem 1rem;
    }
    #wrapper {
    padding: 0.563rem 4px 0px 4px;
    }
    .page-content.page-cms ul, p {
    text-align: left;
    }
    #wrapper .breadcrumb {
    padding: 10px 0 0 0;
    background: 0 0;
    display: none;
    }
    .product-main-block {
    margin-top: 10px;
    }
    .psforum-fw__col-popular{
    margin-bottom: 14px;
    }
    .page-order-detail .messages .message>div, body#checkout section.checkout-step .payment-options .payment-option {
        margin-bottom: .5rem;
        border-bottom: 1px solid #f3f3f3;
        padding-bottom: 12px;
    }
    .block-category.card.card-block {
      padding: 0px 8px;
    }
    #wrapper .breadcrumb li a {
        font-size: var(--fs-300);
    }
    #search #js-product-list-header {
        margin-bottom: 1rem;
    }
    .products-selection .showing {
        padding-top: 1rem;
        color: var(--black1);
        font-size: var(--fs-300);
        font-weight: 500;
    }
    #product .product-bottom-block .product-description {
        padding: 0px 0px;
    }
}

#product h2 {
    font-weight: 700;
    padding: 1rem 0px;
}

.product-accessories .h5 {
    font-size: var(--fs-700);
    font-weight: 700;
    padding: 0 0 1rem 12px;
}
.psforum-fw {
    padding: 0px var(--gutter-inline);
}

.psforum-fw__col-popular, .psforum-fw__col-latest{
    border: solid 1px #0000000d;
    border-radius: 20px;
    padding: 1rem 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: box-shadow .25s ease, transform .25s ease;
}
body#checkout section.checkout-step .address-item.selected {
    border: #e7e7e7 1px solid;
    border-radius: 16px;
}
.done {
    color: var(--jvmc1);
}
body#checkout section.checkout-step.-reachable.-current .step-number {
    background-color: var(--jvmc1);
}
.custom-radio input[type=radio]:checked+span {
    background-color: var(--jvmc1);
}
.d-block.js-terms a {
    color: var(--gray-shadow2);
    font-weight: 500;
}
.card-block .cart-summary-products.js-cart-summary-products .js-show-details {
    color: var(--black1);
}
.card-block .cart-summary-products.js-cart-summary-products .product-name a {
    color: var(--black1);
}
#checkout .payment-options label {
  font-size: 1.2rem;
  text-align: left;
}

#checkout .payment-options section {
    border: 1px solid #ebebeb;
    border-radius: 16px;
    padding: 10px 14px 0px 14px;
    margin-bottom: 1rem;
}
body#checkout section.checkout-step .payment-options .custom-radio {
    margin-right: 0.6rem;
    margin-top: 6px;
}
.definition-list dl dd, .definition-list dl dt {
    border-radius: 10px;
}
#search #js-product-list-header {
    padding-left: 1rem;
}

#search #products {
    padding-top: 0px;
    box-shadow: none;
}
#products .up .btn-secondary, #products .up .btn-tertiary {
    color: var(--black1);
    text-transform: inherit;
    border-radius: 12px;
    background-color: white;
    box-shadow: var(--gray-shadow3);
    padding: 10px 3px 10px 16px;
    margin-right: 10px;
}
.layout_layout1 .mm_menus_li {
    border: none;
}
.product-flags li.product-flag.discount, .product-flags li.product-flag.discount-amount, .product-flags li.product-flag.discount-percentage {
    background-color: var(--darkBlue);
    border-radius: 8px 10px 10px 0px;
}
.tabs .tab-pane {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
}

.product-accessories .products > .product {
    margin-left: auto;
    margin-right: auto;
}
.product-flags li.product-flag
{
    background: var(--darkBlue);
}
#header #spr .rating-star-display > span, #header #spr_list .rating-star-display > span {
    font-size: 10px;
    font-weight: 800;
}

.rating-star-display {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product #spr_list .rating-star-display .average_text {
    font-size: 13px;
    font-weight: 800;
    margin-left: 5px;
    padding-top: 3px;
}

.ets_mm_block_content #spr_list {
    margin-top: -3px;
    margin-bottom: 14px;
}
.ets_mm_block_content #spr_list .row.mt-1 {
    margin-top: 0px !important;
}
 #spr .spr-average-left .spr-average-note {
    font-size: 0.75em;
}
#spr .spr-average-left .spr-average-count {
    font-size: 0.75em;
}
#wrapper .breadcrumb li a {
  color:#505050;
}
#wrapper .breadcrumb li {
    font-size: 15px;
}
/* Onglet "Product Details" inutile dans le thème : on cache le bouton ET le panneau.
   Spécificité (0,2,3,0)=230 pour battre l'override .nav-link de l'action #12
   qui appliquait display: inline-flex (spécificité 131). */
#product .product-bottom-block .tabs .nav-tabs #product-details-tab,
#product .product-bottom-block #product-details {
  display: none;
}
#spr a.spr_btn_rating {
    background-color: var(--black1);
    border-color: var(--black1);
    border-radius: 10px;
    padding: 4px 12px 5px 10px !important;
}
.spr_product_review_form .btn-warning {
    color: #5b5b5b;
    background-color: white;
    border-color: #dfdfdf;
}
.spr_product_review_form .alert.alert-info {
    background-color: #f9f9f9;
    color: var(--black1);
    border-color: #dfdfdf;
}
#product .spr-average-left{
    font-weight: 700;
}
.ets_mm_block .aPartir {
    font-weight: 500;
    color: var(--gray1);
    margin-left: auto;
    font-size: 13px;
}
.ets_mm_block_content .imgMenu1 {
    max-width: max-content;
    margin: 18px auto 4px auto;
    width: 50%;
    display: block;
}
#content-hook_order_confirmation .card-title, #content-hook_order_confirmation p {
  text-align:center;
}

#content-hook_order_confirmation {
    border: solid 1px #f1f1f1;
    border-radius: 20px;
    padding: 26px 0 12px 0;
    margin-bottom: 40px;
    box-shadow: var(--gray-shadow2);
}
body#checkout section.checkout-step .address-item {
    border-radius: 16px;
}
body#checkout section.checkout-step .delivery-options .delivery-option {
    border-radius: 16px;
    background-color: white;
    border: solid 1px #F7F7F7;
    box-shadow: var(--gray-shadow2);
}
#colissimo-pickup-point-address-selected {
    border: 1px solid #f6f6f6;
    margin-bottom: 20px;
    border-radius: 16px;
    box-shadow: var(--gray-shadow2);
    padding: 14px 10px 0px 14px;
}
body#checkout section.checkout-step .payment-options .payment-option {
    margin-bottom: 0.9rem;
    border: 1px solid #f6f6f6;
    box-shadow: var(--gray-shadow2);
    border-radius: 16px;
    padding: 16px 20px;
}
.block-promo .promo-code-button.cancel-promo {
    color: var(--black1);
}
.cart-grid-right .promo-discounts .cart-summary-line .label .code {
    color: #0db9aa;
}
#cart .cart-grid-body, #cart .cart-grid-right {
    box-shadow: var(--gray-shadow2);
    border-radius: 16px;
    border: solid 1px #f7f7f7;
}
#checkout .cart-grid-body, #checkout .cart-grid-right {
    box-shadow: var(--gray-shadow2);
    border-radius: 16px;
    border: solid 1px #f7f7f7;
}
#cart .js-cart-line-product-quantity.form-control {
  border-radius: 11px 0px 0px 11px;
}
#cart .cart-grid-right, #checkout .cart-grid-right {
    padding: 40px 20px 0 20px;
}
#cart .cart-grid-body, #checkout .cart-grid-body {
  padding-bottom: 20px;
  padding-top: 20px;
}
#cart .product-image.media-middle img {
  border-radius: 14px;
    box-shadow: var(--gray-shadow2);
}
#cart .breadcrumb, #checkout .breadcrumb {display:none;}
#checkout .promo-code .btn.btn-primary {
    background-color: white;
    color: var(--black1);
    font-weight: 400;
    border: solid 1px #e7e7e7;
    text-transform: uppercase;
    font-size: 13px;
}
body#checkout section.checkout-step .step-title {
    text-transform: inherit;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit{
    color: var(--black1);
    font-weight: 400;
}
@media (min-width: 768px) {
  .product-bottom-block {
    padding: 30px 6%;
  }
  .logoMobile {display:none;}
}
@media (max-width: 768px) {
  .product-bottom-block .tab-content {
    padding: 0 20px;
  }
  .tabs .tab-pane {
    padding-top: 1.25rem;
  }
  .header-jvmc-icons {
      margin-right: 0px;
  }
}
.product-bottom-block .tab-content {
    /* Cream warm au lieu de greyBlueLight (#f6f5f88f) — fait mieux respirer
       les cards blanches éditoriales (ol li, details) qui flottent dessus */
    background-color: #fafafa;
    border-radius: 24px;
}
.tabs .nav-tabs {
    border-bottom: none;
}
.ybc-menu-toggle {
    text-transform: capitalize;
    font-weight: 400;
    letter-spacing: 0.5px;
}
.video-container iframe {
    max-width: 100%;
}
@media (max-width: 768px) {
  .product-bottom-block .col-md-8 {
    padding: 0 6px;
  }
  .ico-account, .ico-mail {
      background-color: transparent;
      border-radius: 10px;
      box-shadow: var(--gray-shadow2);
  }
  .my-cart-slot, #header .header-jvmc-icon.ico-search {
      background-color: transparent;
      color: var(--black1);
      border-radius: 10px;
      box-shadow: var(--gray-shadow2);
  }
  #_desktop_cart .header a, #_desktop_cart .header {
      color: var(--black1);
  }
  .product-images>li.thumb-container .thumb.selected {
      border: transparent;
  }
  body .h1 {
      font-size: 24px;
  }
  .mm_columns_li {
    margin-top: 10px;
  }
  .mm_tabs_reviews {
    display:none;
  }
  .seeAll {
      justify-self: center;
  }
  #social-icons.desktop {display:none;}
  .header-jvmc-icons-left {
      margin-left: auto;
  }
  body#checkout .cart-grid-body {
      padding: 0px;
  }
  body#checkout .col-md-3 {padding-left:0px;}
  body#checkout .col-md-6 {padding-left:0px;}
  body#authentication .col-md-3 {padding-left:0px;}
  body#authentication .col-md-6 {padding-left:0px;}
  body#authentication h1 {margin-left:4%;}
  body#registration .col-md-3 {padding-left:0px;}
  body#registration .col-md-6 {padding-left:0px;}
  body#registration h1 {margin-left:4%;}
  .psforum-topic-header__top {
    display: block;
  }
  .psforum-topic-toolbar {
    justify-content: center;
  }
  .product-second-image {display:none;}
  .logoMobile-link {
    /*
    background-color: white;
    box-shadow: 0PX 2PX 12PX #1a1a1a7d;*/
  }
}
.password-requirements-score, .password-strength-feedback .progress-bar {display:none;}
.fixed-width-md.colissimo-pickup-mobile-phone {
    padding-left: 88px;
    max-width: 240px;
}

#spr_reviews_list_footer {
    border-radius: 16px;
    padding: 10px 10px;
}
.ybc-menu-toggle {
    width: fit-content;
}
.logoMobile-link {
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: 12px;
  min-width: 66px;
}
.logoMobile {
  max-height: 42px;
  display: block;
  filter: invert(100%) drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
}
@media (min-width: 768px) {
  .logoMobile-link {
    display:none;
    width: 0px;
  }
  
}
#header #header-forum-btn {
    color: white;
    padding: 3px 10px 3px 8px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
}
#header #header-forum-btn svg {
    color: #fff;
}
#header #header-forum-btn {
    border-left: 1px solid rgba(255,255,255,.3);
    padding-left: 10px;
    margin-left: 8px;
}

/* --- Banner réassurance mobile (logo + texte rotatif) --- */
#banner-reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: 8px;
    flex: 1;
    min-width: 0;
}
#banner-reassurance .banner-logo-mini {
    padding-right: 8px;
    border-right: 1px solid rgba(255,255,255,.3);
}
#banner-reassurance .banner-logo-j {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    display: inline;
}
.banner-rotator {
    position: relative;
    overflow: hidden;
    height: 16px;
    min-width: 130px;
    flex: 1 1 auto;
}
.banner-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, 100%);
    transition: opacity .35s ease, transform .35s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    line-height: 16px;
}
#banner-reassurance a.banner-slide,
#banner-reassurance a.banner-slide svg {
    color: #fff;
    stroke: #fff;
}
.banner-slide-active {
    opacity: 1;
    transform: translate(-50%, -50%);
}
.banner-slide-out {
    opacity: 0;
    transform: translate(-50%, -200%);
}
@media (min-width: 768px) {
    #banner-reassurance {
        justify-content: flex-start;
    }
    .banner-slide {
        left: 0;
        font-size: 13px;
        transform: translateY(100%);
    }
    .banner-slide-active {
        transform: translateY(-50%);
    }
    .banner-slide-out {
        transform: translateY(-200%);
    }
    #header-forum-btn {display:none;}
    #spr_reviews_list_footer {
        margin: 0 14px;
    }
  }
#social-icons.mobile {
    margin-right: auto;
    margin-left: 0;
    gap: 0;
}
#social-icons.mobile svg {
    width: 16px;
    height: 16px;
}
#social-icons.mobile a {
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .mm_tab_toggle_title a:hover {
  color: var(--black1);
}
#social-icons.mobile {display:none;}
.logoMobile-link {
  /*
    border: solid 1px #e3e3e3;
    padding: 2px 14px 1px 9px;
    border-radius: 6px;
    box-shadow: var(--gray-shadow2);*/
}
.psforum-home .psforum-header {
    background: white;
    padding: 0 0 0 0;
    border: none;
    box-shadow: none;
    margin-bottom: 10px;
}
.psforum-header__stats {
    color: var(--black1);
    opacity: 1;
}
.psforum-btn-new-topic {
    border: 1px solid #E3E3E3;
    text-transform: capitalize;
    font-weight: 500;
}
.psforum-category-page .psforum-header, .psforum-topic-page .psforum-topic-header {

}
.psforum-category__stats .psforum-stat strong {
    color: #4f4f4f;
    font-weight: 600;
    font-size: 13px;
}
@media (max-width: 991px) {
    body#checkout section.checkout-step .address-item {
        flex: 100%;
    }
    body#checkout section.checkout-step .address-item>header {
        min-height: 0px;
    }
    .contact-form {
        padding-right: 14px;
    }
}

/* ════════════════════════════════════════════════════════════
   HOME ÉDITORIALE — index.tpl (refonte 2026)
   Styles scopés sur .page-home--editorial pour ne rien casser
   du reste du thème. 6 sections : hero, manifeste, transformations,
   processus, sélection (wrap HOOK_HOME), expertise.
   DEBUT
   ════════════════════════════════════════════════════════════ */

.page-home--editorial {
  /* tokens locaux à la home pour ne pas polluer :root */
  --home-section-y: clamp(80px, 12vw, 160px);
  --home-inner-x:   clamp(20px, 5vw, 80px);
  --home-max-w:     1280px;
  --home-eyebrow-fs: 0.78rem;
  --home-title-fs:  clamp(2rem, 4.4vw, 3.75rem);
  --home-hero-fs:   clamp(2.6rem, 6.5vw, 6rem);
  --home-radius:    14px;

  background: transparent;
}

/* ─── BREAK OUT du .container Bootstrap parent ───
   Le layout PS enveloppe la home dans :
     <div class="container"><div class="row"><div id="content-wrapper">
       <section id="main"><section id="content" class="page-home--editorial">
   Le .container limite la largeur à ~1140px. On force toutes les
   sections de la home éditoriale à occuper 100vw via marge négative.
   Compatible avec scrollbar : on évite l'overflow horizontal global. */
.page-home--editorial > .home-hero,
.page-home--editorial > .home-proof,
.page-home--editorial > .home-testimonials {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Évite tout débordement horizontal résiduel sur la home */
body#index {
  overflow-x: hidden;
}

/* ─── Header flottant sur la home éditoriale ───
   Le thème a déjà configuré le header avec un fond transparent et
   du texte blanc sur #index (lignes 487, 617). Mais le header reste
   en position statique, donc le hero commence APRÈS le header.
   Pour un effet éditorial immersif, on bascule le header en
   position absolute UNIQUEMENT quand la home éditoriale est active,
   de sorte que l'overlay et l'image du hero s'étendent sous le header.
   Le comportement sticky au scroll (ajout de .scroll_heading par JS)
   n'est pas affecté — il s'applique par-dessus ce réglage initial. */
body:has(.page-home--editorial) #header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

body:has(.page-home--editorial) #wrapper {
  padding-top: 0;
  margin-top: 0;
}

/* Le hero prend alors toute la hauteur depuis le sommet du viewport.
   Son overlay couvre donc également l'espace occupé par le header. */
body:has(.page-home--editorial) .home-hero {
  margin-top: 0;
}

/* ─── Composants partagés : eyebrow, titre, header de section ─── */
.page-home--editorial .home-section-eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  font-size: var(--home-eyebrow-fs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc1);
}

.page-home--editorial .home-section-title {
  margin: 0 0 1.25rem;
  font-size: var(--home-title-fs);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--black1);
}

.page-home--editorial .home-section-lede {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
}

.page-home--editorial .home-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  padding: 0 var(--home-inner-x);
}

.page-home--editorial .home-section-header--light .home-section-title {
  color: var(--white1);
}
.page-home--editorial .home-section-header--light .home-section-lede {
  color: rgba(255, 255, 255, .75);
}

/* ─── Boutons éditoriaux ─── */
.page-home--editorial .btn-jvmc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1.5px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  cursor: pointer;
}
.page-home--editorial .btn-jvmc:hover,
.page-home--editorial .btn-jvmc:focus-visible {
  transform: translateY(-2px);
}
.page-home--editorial .btn-jvmc--primary {
  background: var(--jvmc1);
  color: var(--black1);
  border-color: var(--jvmc1);
}
.page-home--editorial .btn-jvmc--primary:hover {
  background: #0bbcae;
  border-color: #0bbcae;
}
.page-home--editorial .btn-jvmc--ghost {
  background: transparent;
  color: var(--white1);
  border-color: rgba(255, 255, 255, .85);
}
.page-home--editorial .btn-jvmc--ghost:hover {
  background: var(--white1);
  color: var(--black1);
  border-color: var(--white1);
}
.page-home--editorial .btn-jvmc--ghost-light {
  background: transparent;
  color: var(--black1);
  border-color: rgba(0, 0, 0, .2);
}
.page-home--editorial .btn-jvmc--ghost-light:hover {
  background: rgba(0, 0, 0, .04);
  border-color: var(--black1);
}

/* ════════════════════════════════════════════════════════
   1. HERO — split texte + cutout modèle
   Pas de background-image : body#index affiche déjà background1.webp.
   On ajoute juste un overlay dégradé sombre pour la lisibilité du texte,
   plus marqué côté gauche où se trouve le contenu textuel.
   ════════════════════════════════════════════════════════ */
.page-home--editorial .home-hero {
  position: relative;
  min-height: clamp(580px, 90vh, 940px);
  color: var(--white1);
  overflow: hidden;
  isolation: isolate;
}

/* Overlay qui assombrit la gauche pour lisibilité du texte,
   et laisse respirer la droite où flotte le modèle découpé. */
.page-home--editorial .home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.65) 40%,
      rgba(0, 0, 0, 0.18) 72%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.35) 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.page-home--editorial .home-hero__inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: clamp(170px, 12vh, 220px) var(--home-inner-x) clamp(48px, 5vh, 80px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  /* content et figure partagent la même cellule (grid-area: 1/1) :
     le texte passe naturellement par-dessus l'image via z-index. */
}

/* ─── Colonne texte ─── */
.page-home--editorial .home-hero__content {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  position: relative;
  z-index: 2;
  min-width: 0;
  /* Colonne texte plus généreuse pour éviter l'effet "tassé" à gauche */
  max-width: min(820px, 58vw);
}

.page-home--editorial .home-hero__eyebrow {
  display: inline-block;
  margin: 0 0 1.5rem;
  font-size: var(--home-eyebrow-fs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jvmc1);
  padding-left: 56px;
  position: relative;
  text-align: left;
}
.page-home--editorial .home-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 1px;
  background: var(--jvmc1);
}

.page-home--editorial .home-hero__title {
  font-family: var(--font-main);
  margin: 0 0 1.5rem;
  max-width: 25ch;
  /* Réduit de clamp(2.6rem, 6.5vw, 6rem) = 96px max à 56px max :
     à ce calibre, "Le complément capillaire" (24 chars ≈ 739px) tient
     dans le content capé à 780px → titre sur 2 lignes propres au lieu de 4 */
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--white1);
  text-wrap: balance;
}
.page-home--editorial .home-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
}

.page-home--editorial .home-hero__lede {
  max-width: 46ch;
  margin: 0 0 2.5rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

.page-home--editorial .home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(24px, 3vh, 40px);
}

/* ─── Trust badge : étoiles + 4,6/5 + base clients ─── */
.page-home--editorial .home-hero__trust {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 440px;
}
.page-home--editorial .home-hero__trust-stars {
  display: flex;
  gap: 2px;
  color: #f5a623;
  flex-shrink: 0;
}
.page-home--editorial .home-hero__trust-stars svg {
  width: 16px;
  height: 16px;
}
.page-home--editorial .home-hero__trust-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-home--editorial .home-hero__trust-text strong {
  color: var(--white1);
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ─── Figure : hauteur calée sur home-hero__inner, largeur auto (aspect ratio image) ─── */
.page-home--editorial .home-hero__figure {
  grid-area: auto;
  justify-self: auto;
  align-self: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding-top: 60px;
  isolation: isolate;
  z-index: 1;
  pointer-events: none;
}
/* Halo turquoise radial derrière le modèle : lui donne une présence
   lumineuse, le détache de la texture du body sans imposer de rectangle. */
.page-home--editorial .home-hero__figure::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, rgba(16, 209, 192, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 60%, rgba(16, 209, 192, 0.14), transparent 75%);
  filter: blur(12px);
  pointer-events: none;
}
.page-home--editorial .home-hero__figure img {
  position: relative;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

/* ─── Animation d'entrée au chargement : fade-up en cascade ───
   ATTENTION LCP : la figure (modèle) n'est PAS animée. C'est le
   candidat LCP et l'animer avec opacity:0 au départ pénaliserait
   de ~300ms le LCP. Seul le texte est animé. */
@keyframes home-hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-home--editorial .home-hero__eyebrow,
.page-home--editorial .home-hero__title,
.page-home--editorial .home-hero__lede,
.page-home--editorial .home-hero__actions,
.page-home--editorial .home-hero__trust {
  opacity: 0;
  animation: home-hero-fade-up 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) forwards;
  will-change: opacity, transform;
}

.page-home--editorial .home-hero__eyebrow { animation-delay: 0.1s; }
.page-home--editorial .home-hero__title   { animation-delay: 0.25s; }
.page-home--editorial .home-hero__lede    { animation-delay: 0.45s; }
.page-home--editorial .home-hero__actions { animation-delay: 0.6s; }
.page-home--editorial .home-hero__trust   { animation-delay: 0.75s; }

/* ─── Indicateur de scroll ─── */
.page-home--editorial .home-hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  animation: home-hero-scroll-bounce 2.6s ease-in-out infinite;
}
.page-home--editorial .home-hero__scroll:hover {
  color: var(--white1);
}
@keyframes home-hero-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ─── Responsive hero split ─── */
@media (max-width: 991px) {
  /* Sur tablette/mobile, on sort de l'overlap : content et figure
     reviennent en stack vertical avec chacun leur row dédiée. */
  .page-home--editorial .home-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: clamp(24px, 5vw, 48px);
    padding-bottom: clamp(80px, 10vh, 140px);
  }
  .page-home--editorial .home-hero__content {
    grid-area: 2 / 1;
    justify-self: stretch;
    max-width: 100%;
  }
  .page-home--editorial .home-hero__figure {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    grid-area: 1 / 1;
    width: 100%;
    max-width: 360px;
    justify-self: center;
    pointer-events: auto;
  }
  .page-home--editorial .home-hero__figure img {
    height: auto;
    object-fit: unset;
    object-position: unset;
  }
  .page-home--editorial .home-hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.85) 100%);
  }
}

@media (max-width: 640px) {
  .page-home--editorial .home-hero__figure {
    max-width: 280px;
  }
}

/* Mobile/tablette <992px : figure masquée (GIF 1×1 servi par <picture>).
   À la place, un "J" décoratif en watermark donne de l'impact au hero. */
@media (max-width: 991px) {
  .page-home--editorial .home-hero__eyebrow {
    margin-bottom: 0.75rem;
  }
  .page-home--editorial .home-hero__figure {
    display: none;
  }
  .page-home--editorial .home-hero__inner {
    grid-template-rows: auto;
  }
  .page-home--editorial .home-hero__content {
    grid-area: 1 / 1;
  }
  /* J décoratif en arrière-plan du hero, positionné à droite */
  .page-home--editorial .home-hero::after {
    content: "J";
    position: absolute;
    top: 50%;
    right: -8%;
    transform: translateY(-50%);
    font-family: var(--font-main, "Inter"), sans-serif;
    font-weight: 900;
    font-size: clamp(24rem, 70vw, 36rem);
    line-height: 1;
    color: rgb(255 255 255 / 10%);
    pointer-events: none;
    z-index: 0;
    letter-spacing: -.08em;
    user-select: none;
  }
}

/* ════════════════════════════════════════════════════════
   TÉMOIGNAGES FORUM — cards cliquables (stretched-link pattern)
   ════════════════════════════════════════════════════════ */
.page-home--editorial .home-testimonials {
  background: #fafafa;
  padding: var(--home-section-y) 0;
}
/* Vague SVG de transition home-video → home-testimonials (mirror du
   pattern .home-video--wall::before, fill = bg de la section cible). */
.page-home--editorial .home-testimonials::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0,40 L0,32 Q360,16 720,32 T1440,32 L1440,40 Z' fill='%23fafafa'/></svg>");
  pointer-events: none;
  z-index: 2;
}
/* Override eyebrow color sur home-testimonials : jvmc-deep au lieu de jvmc1 */
.page-home--editorial .home-testimonials .home-section-eyebrow {
  color: var(--jvmc-deep);
}
.page-home--editorial .home-testimonials__grid {
  max-width: var(--home-max-w);
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 0 var(--home-inner-x);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
}
.page-home--editorial .home-testimonial {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--white1);
  border-radius: var(--home-radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  transition: transform .35s ease, box-shadow .35s ease;
}
.page-home--editorial .home-testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
}
/* Ring de focus clavier porté par la carte (la cible reste le lien) */
.page-home--editorial .home-testimonial:focus-within {
  outline: 2px solid var(--jvmc1);
  outline-offset: 4px;
}
.page-home--editorial .home-testimonial__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
}
.page-home--editorial .home-testimonial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.page-home--editorial .home-testimonial:hover .home-testimonial__media img {
  transform: scale(1.05);
}
.page-home--editorial .home-testimonial__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--jvmc-deep);
  color: var(--white1);
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  z-index: 2; /* au-dessus du stretched-link ::after */
}
.page-home--editorial .home-testimonial__caption {
  padding: 1.5rem 1.75rem 1.75rem;
}
.page-home--editorial .home-testimonial__name {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--black1);
}
.page-home--editorial .home-testimonial__link {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
/* Stretched-link : couvre toute la carte sans casser la sémantique */
.page-home--editorial .home-testimonial__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-home--editorial .home-testimonial__link:focus { outline: none; }
.page-home--editorial .home-testimonial:hover .home-testimonial__link {
  color: var(--jvmc-deep);
}
.page-home--editorial .home-testimonial__quote {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.55;
  color: #555;
}
/* Variante tagline : description éditoriale (pas une citation client).
   Non-italique pour ne pas faire passer le texte pour une parole rapportée. */
.page-home--editorial .home-testimonial__quote--tagline {
  font-style: normal;
  color: var(--darkBlue);
  font-weight: 500;
}
.page-home--editorial .home-testimonial__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  transition: gap .25s ease;
}
.page-home--editorial .home-testimonial:hover .home-testimonial__cta {
  gap: 10px;
}
.page-home--editorial .home-testimonial__cta svg {
  flex-shrink: 0;
  transition: transform .25s ease;
}
.page-home--editorial .home-testimonial:hover .home-testimonial__cta svg {
  transform: translateX(2px);
}

/* ─── Reveal cascade premium (déclenché par .is-revealed via IO) ─── */
.page-home--editorial .home-testimonials .home-section-eyebrow,
.page-home--editorial .home-testimonials .home-section-title,
.page-home--editorial .home-testimonials .home-section-lede,
.page-home--editorial .home-testimonials .home-testimonial {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.65,.25,1),
              transform .7s cubic-bezier(.2,.65,.25,1);
  will-change: opacity, transform;
}
.page-home--editorial .home-testimonials.is-revealed .home-section-eyebrow,
.page-home--editorial .home-testimonials.is-revealed .home-section-title,
.page-home--editorial .home-testimonials.is-revealed .home-section-lede,
.page-home--editorial .home-testimonials.is-revealed .home-testimonial {
  opacity: 1;
  transform: translateY(0);
}
.page-home--editorial .home-testimonials.is-revealed .home-section-eyebrow { transition-delay: 0ms; }
.page-home--editorial .home-testimonials.is-revealed .home-section-title   { transition-delay: 100ms; }
.page-home--editorial .home-testimonials.is-revealed .home-section-lede    { transition-delay: 200ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(1) { transition-delay: 350ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(2) { transition-delay: 450ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(3) { transition-delay: 550ms; }

/* Image scale-in : settle 1.06 → 1, en sync avec sa carte */
.page-home--editorial .home-testimonials .home-testimonial__media img {
  transform: scale(1.06);
}
.page-home--editorial .home-testimonials.is-revealed .home-testimonial__media img {
  transform: scale(1);
}
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(1) .home-testimonial__media img { transition-delay: 350ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(2) .home-testimonial__media img { transition-delay: 450ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(3) .home-testimonial__media img { transition-delay: 550ms; }

/* Badge slide-in depuis la gauche, après la carte */
.page-home--editorial .home-testimonials .home-testimonial__badge {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .5s ease, transform .5s ease;
}
.page-home--editorial .home-testimonials.is-revealed .home-testimonial__badge {
  opacity: 1;
  transform: translateX(0);
}
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(1) .home-testimonial__badge { transition-delay: 750ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(2) .home-testimonial__badge { transition-delay: 850ms; }
.page-home--editorial .home-testimonials.is-revealed .home-testimonial:nth-child(3) .home-testimonial__badge { transition-delay: 950ms; }

/* Reduced motion : on coupe tout et on rend tout visible immédiatement */
@media (prefers-reduced-motion: reduce) {
  .page-home--editorial .home-testimonials .home-section-eyebrow,
  .page-home--editorial .home-testimonials .home-section-title,
  .page-home--editorial .home-testimonials .home-section-lede,
  .page-home--editorial .home-testimonials .home-testimonial,
  .page-home--editorial .home-testimonials .home-testimonial__media img,
  .page-home--editorial .home-testimonials .home-testimonial__badge {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   5. SÉLECTION — wrap stylé autour de HOOK_HOME
   ════════════════════════════════════════════════════════ */
/* Section autonome : max-width contraint + fond blanc full-bleed
   via pseudo-élément (isolation pour contenir le z-index négatif). */
.page-home--editorial .home-selection {
  position: relative;
  isolation: isolate;
  max-width: var(--home-max-w);
  margin: 0 auto;
  padding: var(--home-section-y) var(--home-inner-x);
}
.page-home--editorial .home-selection::before {
  content: '';
  position: absolute;
  inset: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--white1);
  z-index: -1;
}
/* Vague SVG de transition home-testimonials → home-selection (fill = bg
   de la section cible). Placée sur le later sibling pour bénéficier de
   l'ordre de peinture naturel par-dessus home-testimonials. */
.page-home--editorial .home-selection::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0,40 L0,32 Q360,16 720,32 T1440,32 L1440,40 Z' fill='%23ffffff'/></svg>");
  pointer-events: none;
  z-index: 0;
}

/* Atténuation visuelle douce des modules PS injectés via HOOK_HOME.
   On évite tout !important et tout display:none agressif qui pourrait
   casser ps_featuredproducts, ps_bestsellers ou les noms de produits.
   À adapter au cas par cas selon les modules réellement actifs dans
   theme.yml > displayHome. */
.page-home--editorial .home-selection > * {
  margin-top: 0;
  margin-bottom: 2rem;
}
.page-home--editorial .home-selection > *:last-child {
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════
   TRANSITION ENTRE SECTIONS — Parallax lift on entry (effet A)
   ════════════════════════════════════════════════════════
   Chaque section below-the-fold (home-proof, home-video,
   home-testimonials, home-selection) entre dans le viewport en
   "montant" de 20px depuis sa position naturelle, sur 0.65s avec
   easing premium. Classe `home-section-lift` posée par JS au boot
   (état initial : transform: translateY(20px)) → IntersectionObserver
   ajoute `is-lifted` au passage du seuil → transform: translateY(0).
   N'interfère pas avec les cascades intra-section qui visent les
   children. GPU only, prefers-reduced-motion neutralise. */
.page-home--editorial .home-section-lift {
  transform: translateY(100px) scale(0.97);
  opacity: 0.6;
  transform-origin: center top;
  will-change: transform, opacity;
}
.page-home--editorial .home-section-lift.is-lifted {
  animation: home-section-lift-anim 0.95s cubic-bezier(.25, 1, .5, 1) forwards;
}
@keyframes home-section-lift-anim {
  from { transform: translateY(100px) scale(0.97); opacity: 0.6; }
  to   { transform: none;                          opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home--editorial .home-section-lift {
    transform: none !important;
    opacity: 1 !important;
  }
  .page-home--editorial .home-section-lift.is-lifted {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   TRANSITION ENTRE SECTIONS — Chapter badges (effet B)
   ════════════════════════════════════════════════════════
   Badge éditorial fixe top-right qui affiche le nom de la section
   actuellement traversée. Mise à jour par IO "trigger band" (40-60%
   du viewport, 1 seule section visible à la fois dans cette bande).
   Hidden quand hero est mostly visible (top de page). Mobile : caché. */
.home-chapter-badge {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.home-chapter-badge.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.home-chapter-badge__label {
  display: inline-block;
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  padding: 9px 14px 9px 12px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-left: 2px solid var(--jvmc1);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(36, 108, 102, 0.08);
}
@media (max-width: 991px) {
  .home-chapter-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-chapter-badge {
    transition: opacity .15s ease;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   TRANSITION ENTRE SECTIONS — Color tint flow (effet D)
   ════════════════════════════════════════════════════════
   Overlay fixe plein viewport en mix-blend-mode multiply, couleur
   près-blanc qui shift selon la section traversée. Le multiply avec
   ~99% blanc crée une teinte 1-3% perceptible sans altérer la
   lisibilité (lecture inconsciente = ambiance).
   Narrative chromatique :
     hero/proof : warm cream (chaleur intro)
     video      : warm plus marqué (communauté chaleureuse)
     testimonials : cool neutral (clinique, clean)
     selection  : pur blanc (clarté pour action)
   Mobile : caché (mix-blend-mode full-viewport coûteux compositor). */
.home-ambient-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  background-color: white;
  transition: background-color 1.2s ease;
}
.home-ambient-tint[data-section="hero"]         { background-color: rgb(254, 251, 245); }
.home-ambient-tint[data-section="proof"]        { background-color: rgb(254, 251, 245); }
.home-ambient-tint[data-section="video"]        { background-color: rgb(252, 248, 240); }
.home-ambient-tint[data-section="testimonials"] { background-color: rgb(252, 253, 254); }
.home-ambient-tint[data-section="selection"]    { background-color: rgb(255, 255, 255); }
@media (max-width: 768px) {
  .home-ambient-tint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-ambient-tint { transition: none; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — mobile / tablette
   ════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .page-home--editorial .home-testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .page-home--editorial .home-hero {
    min-height: 78vh;
  }
  .page-home--editorial .home-hero__inner {
    padding-top: clamp(96px, 14vh, 140px);
    padding-bottom: clamp(96px, 12vh, 140px);
  }
  .page-home--editorial .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .page-home--editorial .home-hero__actions .btn-jvmc {
    width: 100%;
  }
  .page-home--editorial .home-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* Reduced motion : on coupe les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .page-home--editorial .home-hero__scroll,
  .page-home--editorial .home-hero__eyebrow,
  .page-home--editorial .home-hero__title,
  .page-home--editorial .home-hero__lede,
  .page-home--editorial .home-hero__actions,
  .page-home--editorial .home-hero__trust {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-home--editorial .home-testimonial,
  .page-home--editorial .home-testimonial__media img,
  .page-home--editorial .btn-jvmc {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   HOME ÉDITORIALE — index.tpl (refonte 2026)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — DESCRIPTION ÉDITORIALE (action A3)
   Transforme la description admin (HTML libre TinyMCE) en mise en
   page magazine : drop cap, h2/h3 avec barre turquoise, listes
   stylées, mode d'emploi numéroté en cards, pull-quote, FAQ
   accordion via <details>/<summary>.
   Scopé strictement à #product .product-bottom-block .product-description
   pour ne PAS affecter la short description du header ni les cards
   produits dans .product-miniature.
   DEBUT
   ════════════════════════════════════════════════════════════ */

#product .product-bottom-block .product-description {
  /* Tokens éditoriaux locaux */
  --editorial-rhythm: clamp(1rem, 1.4vw, 1.5rem);
  --editorial-section-gap: clamp(2.5rem, 4vw, 4rem);
  --editorial-radius: 12px;

  /* Override de l'ancien `padding: 0 10%` pour respiration éditoriale */
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 5%, 4rem);
  /* Largeur de lecture confortable, centrée */
  max-width: 980px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.05vw, 1.125rem);
  line-height: 1.7;
  color: var(--black1);
}

/* ─── Drop cap : première lettre du premier paragraphe ─── */
#product .product-bottom-block .product-description > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-main);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.85;
  padding: 0.1em 0.18em 0 0;
  color: var(--jvmc1);
  letter-spacing: -0.04em;
}

/* ─── Section titles avec barre verticale turquoise ─── */
/* h2 = section principale (gros, barre épaisse) */
#product .product-bottom-block .product-description h2 {
  margin: var(--editorial-section-gap) 0 1.25rem;
  padding: 0 0 0 1.5rem;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--black1);
  text-wrap: balance;
  position: relative;
}
#product .product-bottom-block .product-description h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 6px;
  background: var(--jvmc1);
  border-radius: 3px;
}
/* h3 = sous-section (plus modeste, barre fine) */
#product .product-bottom-block .product-description h3 {
  margin: calc(var(--editorial-section-gap) * 0.6) 0 0.75rem;
  padding: 0 0 0 1rem;
  font-size: clamp(1.2rem, 1.5vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--black1);
  text-wrap: balance;
  position: relative;
}
#product .product-bottom-block .product-description h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 2px;
  background: var(--jvmc1);
  border-radius: 1px;
  opacity: 0.7;
}
/* Premier titre : pas de gap énorme en haut */
#product .product-bottom-block .product-description > h2:first-child,
#product .product-bottom-block .product-description > h3:first-child {
  margin-top: 0;
}

/* h4 plus discret (sous-sous-titre) */
#product .product-bottom-block .product-description h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--black1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Paragraphes ─── */
#product .product-bottom-block .product-description p {
  margin: 0 0 var(--editorial-rhythm);
  text-wrap: pretty;
}
#product .product-bottom-block .product-description p strong {
  color: var(--black1);
  font-weight: 600;
}
#product .product-bottom-block .product-description p em {
  font-style: italic;
  color: #555;
}

/* ─── Liens dans la description ─── */
#product .product-bottom-block .product-description a {
  color: var(--jvmc1);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
#product .product-bottom-block .product-description a:hover {
  color: #0bbcae;
  text-decoration-thickness: 2px;
}

/* ─── Listes à puces : custom bullet turquoise ─── */
#product .product-bottom-block .product-description ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 var(--editorial-rhythm);
}
#product .product-bottom-block .product-description ul li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
#product .product-bottom-block .product-description ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 8px;
  height: 8px;
  background: var(--jvmc1);
  border-radius: 50%;
}

/* ─── Liste numérotée (Mode d'emploi) en cards numérotées + timeline ─── */
#product .product-bottom-block .product-description ol {
  list-style: none;
  counter-reset: editorial-step;
  padding: 0;
  margin: 1.5rem 0 var(--editorial-section-gap);
  display: grid;
  gap: 0.75rem;
  position: relative;
}
#product .product-bottom-block .product-description ol li {
  counter-increment: editorial-step;
  position: relative;
  padding: 1rem 1.25rem 1rem 4.5rem;
  background: var(--white1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--editorial-radius);
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#product .product-bottom-block .product-description ol li:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}
/* Badge numéro */
#product .product-bottom-block .product-description ol li::before {
  content: counter(editorial-step, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jvmc1);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 50%;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
/* Timeline pointillée verticale qui relie les badges (sauf pour le dernier) */
#product .product-bottom-block .product-description ol li::after {
  content: "";
  position: absolute;
  left: calc(1rem + 1.125rem); /* aligné au centre du badge (1rem padding + half badge) */
  top: calc(50% + 1.125rem);   /* part du bas du badge */
  width: 0;
  height: calc(100% + 0.75rem - 2.25rem + 1.125rem); /* couvre le gap jusqu'au prochain badge */
  border-left: 2px dashed var(--jvmc1);
  opacity: 0.4;
  transform: translateX(-1px);
  pointer-events: none;
}
#product .product-bottom-block .product-description ol li:last-child::after {
  display: none; /* pas de timeline après le dernier item */
}

/* ─── Pull-quote (blockquote) avec guillemet typographique « ─── */
#product .product-bottom-block .product-description blockquote {
  position: relative;
  margin: var(--editorial-section-gap) 0;
  padding: 1.5rem 0 1.5rem 4.5rem;
  border-left: 3px solid var(--jvmc1);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black1);
  text-wrap: balance;
}
#product .product-bottom-block .product-description blockquote::before {
  content: "\00ab"; /* guillemet français ouvrant « */
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--jvmc1);
  opacity: 0.85;
  pointer-events: none;
}
#product .product-bottom-block .product-description blockquote p {
  margin: 0;
}
#product .product-bottom-block .product-description blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--gray1);
}

/* ─── Tableau caractéristiques ─── */
#product .product-bottom-block .product-description table {
  width: 100%;
  margin: 1.5rem 0 var(--editorial-section-gap);
  border-collapse: collapse;
}
#product .product-bottom-block .product-description table th,
#product .product-bottom-block .product-description table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#product .product-bottom-block .product-description table th {
  font-weight: 600;
  color: var(--black1);
  letter-spacing: 0.02em;
}

/* ─── FAQ accordion via HTML5 <details>/<summary> ───
   Si l'admin utilise <details><summary>Q?</summary>R</details>,
   ça devient un accordion stylé. Sinon les questions <h3>/<p>
   restent simplement bien stylées. */
#product .product-bottom-block .product-description details {
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--white1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--editorial-radius);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
#product .product-bottom-block .product-description details[open] {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.12);
}
#product .product-bottom-block .product-description details > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--black1);
  list-style: none;
  user-select: none;
  padding-right: 2rem;
  position: relative;
  line-height: 1.4;
}
#product .product-bottom-block .product-description details > summary::-webkit-details-marker {
  display: none;
}
#product .product-bottom-block .product-description details > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--jvmc1);
  border-bottom: 2px solid var(--jvmc1);
  transform: translateY(-75%) rotate(45deg);
  transition: transform 0.25s ease;
}
#product .product-bottom-block .product-description details[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
#product .product-bottom-block .product-description details > *:not(summary) {
  margin-top: 1rem;
}
#product .product-bottom-block .product-description details > *:not(summary):last-child {
  margin-bottom: 0;
}

/* ─── Section divider (HR custom) ─── */
#product .product-bottom-block .product-description hr {
  margin: var(--editorial-section-gap) 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}

/* ─── Image dans la description ─── */
#product .product-bottom-block .product-description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--editorial-radius);
  margin: 1rem 0;
  display: block;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  #product .product-bottom-block .product-description {
    padding: 1.5rem 1rem;
    font-size: 1rem;
  }
  #product .product-bottom-block .product-description > p:first-of-type::first-letter {
    font-size: 2.5rem;
  }
  #product .product-bottom-block .product-description ol li {
    padding: 0.85rem 1rem 0.85rem 3.5rem;
  }
  #product .product-bottom-block .product-description ol li::before {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.75rem;
    left: 0.75rem;
  }
  #product .product-bottom-block .product-description blockquote {
    padding: 1rem 0 1rem 1rem;
    font-size: 1.125rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — TOC sticky (action #6)
   Layout grid 2 col : sommaire à gauche (sticky), description à droite.
   Le wrap est créé par JS uniquement si ≥ 2 <h2> détectés.
   Sur mobile (≤991px), le grid s'effondre et le TOC est masqué.
   ════════════════════════════════════════════════════════════ */

#product .product-bottom-block .product-description-wrap {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(1.5rem, 2.5vw, 3rem);
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 5%, 4rem);
}

/* Quand le wrap est présent, override le centrage/padding du
   .product-description (sinon on aurait un double centrage). */
#product .product-bottom-block .product-description-wrap .product-description {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ─── Le sommaire en lui-même ─── */
#product .product-bottom-block .product-description__toc {
  position: sticky;
  top: 140px;
  align-self: start;
  font-size: 0.85rem;
}

#product .product-bottom-block .product-description__toc-title {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray1);
}

#product .product-bottom-block .product-description__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
/* Désactive les puces turquoise du style éditorial sur cette liste */
#product .product-bottom-block .product-description__toc-list li::before {
  display: none;
}
#product .product-bottom-block .product-description__toc-list li {
  padding: 0;
  margin: 0;
}

#product .product-bottom-block .product-description__toc-list a {
  display: block;
  padding: 0.45rem 0 0.45rem 1rem;
  margin-left: -1px;
  color: var(--gray1);
  text-decoration: none;
  border-left: 2px solid transparent;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
#product .product-bottom-block .product-description__toc-list a:hover {
  color: var(--black1);
  padding-left: 1.2rem;
}
#product .product-bottom-block .product-description__toc-list a.is-active {
  color: var(--black1);
  border-left-color: var(--jvmc1);
  font-weight: 600;
}

/* ─── Scroll-margin pour les h2 ciblés (offset header) ─── */
#product .product-bottom-block .product-description__heading {
  scroll-margin-top: 140px;
}

/* ─── Smooth scroll global pour l'ancre TOC ─── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ─── Responsive : sur mobile/tablette, on retire le TOC ─── */
@media (max-width: 991px) {
  #product .product-bottom-block .product-description-wrap {
    display: block;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4%, 3rem);
  }
  #product .product-bottom-block .product-description__toc {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — TOC sticky (action #6)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Animation fade-up au scroll (action #7)
   Chaque enfant direct de .product-description fade-up quand il
   entre dans le viewport. État initial appliqué par JS via
   .is-reveal-pending pour éviter le FOUC sur connexions lentes.
   ════════════════════════════════════════════════════════════ */

#product .product-bottom-block .product-description > .is-reveal-pending {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transform-origin: center top;
  transition: opacity 0.85s cubic-bezier(0.2, 0.65, 0.25, 1),
              transform 0.85s cubic-bezier(0.2, 0.65, 0.25, 1);
  will-change: opacity, transform;
}

#product .product-bottom-block .product-description > .is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

/* Reduced motion : on annule l'animation */
@media (prefers-reduced-motion: reduce) {
  #product .product-bottom-block .product-description > .is-reveal-pending,
  #product .product-bottom-block .product-description > .is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Animation fade-up au scroll (action #7)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Sticky « Au sommaire » horizontal (action #11)
   Nav fixée en haut du viewport, apparaît quand l'utilisateur est
   dans la zone description. Mobile/tablette uniquement (sur desktop
   le TOC vertical du #6 fait déjà le job).
   ════════════════════════════════════════════════════════════ */

.product-description__toc-horizontal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--white1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
  pointer-events: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-description__toc-horizontal::-webkit-scrollbar {
  display: none;
}
.product-description__toc-horizontal.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.product-description__toc-horizontal-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray1);
  padding-right: 0.85rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.product-description__toc-horizontal-list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.25rem;
  white-space: nowrap;
}
.product-description__toc-horizontal-list li {
  margin: 0;
  padding: 0;
}
.product-description__toc-horizontal-list li::before {
  display: none;
}

.product-description__toc-horizontal-list a {
  display: block;
  font-size: 0.85rem;
  color: var(--gray1);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.product-description__toc-horizontal-list a:hover {
  color: var(--black1);
}
.product-description__toc-horizontal-list a.is-active {
  color: var(--black1);
  border-bottom-color: var(--jvmc1);
  font-weight: 600;
}

/* Sur desktop, on cache la version horizontale (le vertical du #6 gère) */
@media (min-width: 992px) {
  .product-description__toc-horizontal {
    display: none;
  }
}

/* Reduced motion : on coupe la transition d'apparition */
@media (prefers-reduced-motion: reduce) {
  .product-description__toc-horizontal {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Sticky « Au sommaire » horizontal (action #11)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Restyle nav-tabs (action #12)
   Onglets type magazine premium : padding généreux, uppercase
   letter-spacing, underline turquoise animé sur active.
   Override des règles existantes (lignes 1186-1213 + 2212-2220)
   par cascade (ces règles étant définies plus loin dans le fichier).
   ════════════════════════════════════════════════════════════ */

#product .product-bottom-block .tabs {
  background: transparent; /* override l'ancien #fafafa */
  margin-top: 0;
  padding: 0;
}

#product .product-bottom-block .tabs .nav-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 1rem;
  margin: 0;
  list-style: none;
  background: transparent;
}

#product .product-bottom-block .tabs .nav-tabs .nav-item {
  margin: 0;
  padding: 0;
}

#product .product-bottom-block .tabs .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.5rem;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--gray1);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease,
              border-color 0.35s cubic-bezier(0.2, 0.65, 0.25, 1),
              background-color 0.2s ease;
}

/* Icône SVG inline dans les onglets */
#product .product-bottom-block .tabs .nav-tabs .nav-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: baseline;
}

/* Hover (non-active) : couleur s'éclaircit + border subtle gris */
#product .product-bottom-block .tabs .nav-tabs .nav-link:hover,
#product .product-bottom-block .tabs .nav-tabs .nav-link:focus-visible {
  color: var(--black1);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.015);
  outline: none;
  margin-bottom: 0; /* override l'ancien margin-bottom: 14px */
}

/* Active : couleur noire + bold + underline turquoise marqué */
#product .product-bottom-block .tabs .nav-tabs .nav-link.active {
  color: var(--black1);
  font-weight: 700;
  border-bottom-color: var(--jvmc1);
  background: transparent;
  margin-bottom: 0; /* override l'ancien margin-bottom: 14px */
}

/* État active + hover combinés (priorité au turquoise) */
#product .product-bottom-block .tabs .nav-tabs .nav-link.active:hover {
  border-bottom-color: var(--jvmc1);
  background: transparent;
}

/* Compteur d'avis (« Avis (96) ») : on garde le texte mais on l'allège visuellement */
#product .product-bottom-block .tabs .nav-tabs .nav-link span {
  font-weight: 500;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ─── Responsive : tabs plus compactes sur mobile ─── */
@media (max-width: 767px) {
  #product .product-bottom-block .tabs .nav-tabs {
    padding: 0;
    /* scroll horizontal si beaucoup d'onglets */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  #product .product-bottom-block .tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  #product .product-bottom-block .tabs .nav-tabs .nav-link {
    padding: 0.85rem 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #product .product-bottom-block .tabs .nav-tabs .nav-link svg {
    width: 14px;
    height: 14px;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Restyle nav-tabs (action #12)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Réduction du padding-top de .tab-pane (#13)
   Override de la règle .tabs .tab-pane { padding-top: 3.25rem }
   qui empilait 52 px de padding au-dessus de la padding éditoriale
   propre à .product-description (32-64 px).
   ════════════════════════════════════════════════════════════ */

#product .product-bottom-block .tabs .tab-pane {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  #product .product-bottom-block .tabs .tab-pane {
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Réduction padding-top tab-pane (#13)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Transition bottom-block → accessoires (P1.3 + P2)
   - P1.3 : divider hairline + chiffre éditorial "02" entre les 2 sections
   - P2.1 : eyebrow uppercase turquoise au-dessus du titre
   - P2.2 : h5 → h2 avec typo plus présente (clamp + letter-spacing négatif)
   - P2.3 : tagline italique grise sous le titre
   - P2.4 : container max-width 960px centré (cohérent avec tab-content)
   ════════════════════════════════════════════════════════════ */

/* ─── P1.3 : Divider entre bottom-block et accessories ─── */
/* Pseudo-element ::before sur la section accessoires.
   - Affiche un chiffre éditorial "02" centré (style numérotation magazine)
   - Avec deux traits hairline 60px de part et d'autre du chiffre
   - L'espace vertical du divider remplace le padding-top 4rem ancien */
.product-accessories::before {
  content: "02";
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vh, 4rem);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray1);
  font-variant-numeric: tabular-nums;
  /* Deux gradients linéaires identiques = deux traits 60px positionnés
     symétriquement à 80px de part et d'autre du centre. */
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  background-size: 60px 1px, 60px 1px;
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(50% - 80px) center,
    calc(50% + 80px) center;
}

/* ─── P2 : container et header de la section accessoires ─── */
.product-accessories .product-accessories__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

.product-accessories .product-accessories__header {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  text-align: left;
}

/* P2.1 — Eyebrow turquoise uppercase letter-spaced */
.product-accessories .product-accessories__eyebrow {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc1);
  line-height: 1.2;
}

/* P2.2 — Titre h2 typographique premium */
.product-accessories .product-accessories__title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--black1);
  text-wrap: balance;
  text-transform: none;
}

/* P2.3 — Tagline italique grise */
.product-accessories .product-accessories__tagline {
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  max-width: 50ch;
}

/* ─── Override ancien h5 (au cas où il serait encore rendu via override théma) ─── */
.product-accessories > .h5,
.product-accessories > p.h5 {
  display: none;
}

/* ─── Reset padding-top de la section : le divider ::before porte l'espace ─── */
#product .product-accessories {
  padding-top: 0;
}

/* ─── Responsive : divider plus compact sur mobile ─── */
@media (max-width: 768px) {
  .product-accessories::before {
    padding: 1.5rem 0 2rem;
    font-size: 0.65rem;
    background-position:
      calc(50% - 60px) center,
      calc(50% + 60px) center;
    background-size: 40px 1px, 40px 1px;
  }
  .product-accessories .product-accessories__title {
    font-size: clamp(1.4rem, 5vw, 1.75rem);
  }
  .product-accessories .product-accessories__tagline {
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Transition bottom-block → accessoires (P1.3 + P2)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — DESCRIPTION ÉDITORIALE (action A3)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Transition accessoires → forum (Phase V)
   - P5.1 : margin généreuse sur accessoires + divider chiffré "03"
            avant le forum + header éditorial (eyebrow + h2 + tagline)
   - P5.2 : restyle minimal des headings/cards du forum (psforum-fw)
   ════════════════════════════════════════════════════════════ */

/* ─── P5.1 : Margin-bottom généreux sur accessoires ─── */
#product .product-accessories {
  margin-bottom: clamp(2rem, 6vh, 4rem);
}

/* ─── P5.1 : Divider chiffré "03" avant le forum (pseudo ::before) ─── */
.product-forum-section::before {
  content: "03";
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vh, 4rem);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray1);
  font-variant-numeric: tabular-nums;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18));
  background-size: 60px 1px, 60px 1px;
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(50% - 80px) center,
    calc(50% + 80px) center;
}

/* ─── P5.1 : Header éditorial du forum (mêmes patterns que accessoires) ─── */
.product-forum-section {
  margin: clamp(3rem, 6vw, 5rem) auto clamp(3.5rem, 7vw, 6rem);
}

.product-forum-section .product-forum-section__header {
  max-width: 960px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0 clamp(1rem, 4vw, 3rem);
  text-align: left;
}

.product-forum-section .product-forum-section__eyebrow {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc1);
  line-height: 1.2;
}

.product-forum-section .product-forum-section__title {
  margin: 0;
  padding: 0;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--black1);
  text-wrap: balance;
  text-transform: none;
}

.product-forum-section .product-forum-section__tagline {
  margin: 0.75rem 0 0;
  padding: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  max-width: 60ch;
}

/* ─── P5.2 : Restyle du module psforum (sélecteurs réels du module) ───
   IMPORTANT : le module psforum inline son CSS dans <style> dans le template.
   Pour battre la spécificité de l'inline, on chaîne .psforum-fw avec les
   classes enfants. Ces règles s'appliquent PARTOUT où le widget est rendu
   (footer toutes pages + bloc dédié sur fiche produit). */

/* Container du widget : largeur contrôlée + suppression du border-top natif */
.psforum-fw {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  border: none;
}

/* Gap réel entre les deux colonnes (le module n'en a pas) */
.psforum-fw .row {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-left: -0.875rem;
  margin-right: -0.875rem;
}
.psforum-fw .psforum-fw__col-popular,
.psforum-fw .psforum-fw__col-latest {
  margin: 0 0.875rem;
  width: calc(50% - 1.75rem);
  max-width: calc(50% - 1.75rem);
  flex: 0 0 calc(50% - 1.75rem);
}
@media (max-width: 899px) {
  .psforum-fw .psforum-fw__col-popular,
  .psforum-fw .psforum-fw__col-latest {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0 0 1rem;
  }
}

/* Les 2 colonnes : style "card" cohérent avec le design-system */
.psforum-fw .psforum-fw__col-popular,
.psforum-fw .psforum-fw__col-latest {
  position: relative;
  background: var(--white1);
  border: 1px solid rgba(16, 209, 192, 0.15);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
  min-height: clamp(220px, 30vw, 280px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.psforum-fw .psforum-fw__col-popular:hover,
.psforum-fw .psforum-fw__col-latest:hover {
  border-color: rgba(16, 209, 192, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ─── Effet 4 : Aurora sheen — bande teal qui balaye la border au hover ─── */
.psforum-fw .psforum-fw__col-popular::before,
.psforum-fw .psforum-fw__col-latest::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(16, 209, 192, 0.75) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-position 0.8s ease;
}
.psforum-fw .psforum-fw__col-popular:hover::before,
.psforum-fw .psforum-fw__col-latest:hover::before {
  opacity: 1;
  background-position: 0% 0;
}
@media (prefers-reduced-motion: reduce) {
  .psforum-fw .psforum-fw__col-popular::before,
  .psforum-fw .psforum-fw__col-latest::before {
    transition: opacity 0.2s ease;
  }
  .psforum-fw .psforum-fw__col-popular:hover::before,
  .psforum-fw .psforum-fw__col-latest:hover::before {
    background-position: 50% 0;
  }
}
.psforum-fw .psforum-fw__col-latest {
  border-left: 1px solid rgba(16, 209, 192, 0.15);
}

/* Titre des colonnes : "Discussions populaires" / "Derniers messages" en eyebrow */
.psforum-fw .psforum-fw__title {
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray1);
  line-height: 1.2;
  justify-content: flex-start;
}
.psforum-fw .psforum-fw__title svg {
  width: 14px;
  height: 14px;
  color: var(--jvmc-deep);
}

/* Liens des items (slides du carousel) */
.psforum-fw .psforum-fw__link {
  display: block;
  color: var(--black1);
  opacity: 1;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}
.psforum-fw .psforum-fw__link:hover {
  color: var(--jvmc-deep);
}

/* Titre du topic dans chaque slide */
.psforum-fw .psforum-fw__topic-title {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  color: var(--black1);
  text-wrap: balance;
}

/* Métadonnées (réponses, vues, catégorie, auteur, date) */
.psforum-fw .psforum-fw__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray1);
  opacity: 1;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Dots d'animation : couleur turquoise active */
.psforum-fw .psforum-fw__dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-top: 1.5rem;
}
/* Note : opacity + box-shadow + width sont gérés par @keyframes psfw-dot-premium
   plus bas (section UPGRADES PREMIUM). On ne fixe ici que la couleur, hauteur,
   et border-radius pill (999px) pour que width 6→18px produise une pill et
   non une ellipse (50% donnerait un ovale 3:1 disgracieux à 18×6). */
.psforum-fw .psforum-fw__dot {
  height: 6px;
  border-radius: 999px;
  background: var(--jvmc1);
}

/* Lien "Voir le forum →" : style CTA discret */
.psforum-fw .psforum-fw__all {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 2.25rem auto 0;
  padding: 0.9rem 1.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jvmc-deep);
  text-decoration: none;
  border: 1.5px solid var(--jvmc-deep);
  border-radius: 999px;
  opacity: 1;
  transition: color 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
/* Fill sweep : bloc teal qui balaye depuis la gauche (cohérent aurora cards) */
.psforum-fw .psforum-fw__all::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--jvmc1);
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.psforum-fw .psforum-fw__all:hover {
  color: var(--black1);
  box-shadow: 0 6px 18px rgba(16, 209, 192, 0.28);
  transform: translateY(-1px);
}
.psforum-fw .psforum-fw__all:hover::before {
  transform: translateX(0);
}
.psforum-fw .psforum-fw__all svg,
.psforum-fw .psforum-fw__all-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.psforum-fw .psforum-fw__all:hover .psforum-fw__all-arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .psforum-fw .psforum-fw__all::before {
    transition: transform 0.15s linear;
  }
  .psforum-fw .psforum-fw__all-arrow,
  .psforum-fw .psforum-fw__all {
    transition: color 0.15s linear;
  }
  .psforum-fw .psforum-fw__all:hover {
    transform: none;
  }
  .psforum-fw .psforum-fw__all:hover .psforum-fw__all-arrow {
    transform: none;
  }
}

/* ─── Mobile : 2 colonnes deviennent stack vertical ─── */
@media (max-width: 767px) {
  .psforum-fw .psforum-fw__col-popular,
  .psforum-fw .psforum-fw__col-latest {
    padding: 1.25rem 1.25rem;
    margin-bottom: 0.85rem;
  }
  .psforum-fw .psforum-fw__col-latest {
    border-top: 1px solid rgba(16, 209, 192, 0.15);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   psforum-fw — UPGRADES PREMIUM (4 effets indépendants, retirables un par un)
   Les @keyframes du module (psfw-rotate, psfw-dot) sont définis inline dans
   <style> dans le footer-widget.tpl. On override via animation-name pour
   pointer vers nos propres keyframes (priorité au sélecteur chainé .psforum-fw).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── EFFET 1 — Crossfade carousel premium (blur + scale + opacity) ───
   Remplace le translateY 6px basique par une transition cinématique :
   slide entrante = blur 4px→0 + scale 0.96→1 + opacity 0→1
   slide sortante = blur 0→4px + scale 1→1.02 + opacity 1→0
   Cubic-bezier (.22, 1, .36, 1) = "easeOutQuint" → décélération naturelle */
.psforum-fw .psforum-fw__slide {
  animation-name: psfw-rotate-premium;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
@keyframes psfw-rotate-premium {
  0%   { opacity: 0; transform: scale(0.96); filter: blur(4px); pointer-events: none; }
  3%   { opacity: 1; transform: scale(1);    filter: blur(0);   pointer-events: auto; }
  22%  { opacity: 1; transform: scale(1);    filter: blur(0);   pointer-events: auto; }
  25%  { opacity: 0; transform: scale(1.02); filter: blur(4px); pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}

/* ─── EFFET 2 — Active dot morphing en pill ───
   Le dot passe de cercle 6px à pill 18px avec glow teal pendant la phase
   active (4%→22% du cycle 16s). Style stories Instagram / Twitter premium. */
.psforum-fw .psforum-fw__dot {
  animation-name: psfw-dot-premium;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width, opacity, box-shadow;
}
@keyframes psfw-dot-premium {
  0%   { opacity: 0.3; width: 6px;  box-shadow: 0 0 0 0 rgba(16, 209, 192, 0); }
  4%   { opacity: 1;   width: 18px; box-shadow: 0 0 10px 0 rgba(16, 209, 192, 0.45); }
  22%  { opacity: 1;   width: 18px; box-shadow: 0 0 10px 0 rgba(16, 209, 192, 0.45); }
  25%  { opacity: 0.3; width: 6px;  box-shadow: 0 0 0 0 rgba(16, 209, 192, 0); }
  100% { opacity: 0.3; width: 6px;  box-shadow: 0 0 0 0 rgba(16, 209, 192, 0); }
}

/* ─── EFFET 3 — Live pulse à côté des titres de colonnes ───
   Petit dot vert (6px) qui pulse en 2.4s à droite du titre. Signal "le forum
   est vivant, ces discussions sont actives". Animation box-shadow → composited
   GPU (pas de layout). */
.psforum-fw .psforum-fw__title::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.6rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: psfw-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  vertical-align: middle;
}
@keyframes psfw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ─── EFFET 4 — Aurora sheen hover sur les cards ───
   Au hover, un gradient teal diagonal balaye la card de droite à gauche
   en 0.9s. Effet "reflet de lumière premium" sans saturer l'œil. */
.psforum-fw .psforum-fw__col-popular,
.psforum-fw .psforum-fw__col-latest {
  position: relative;
  overflow: hidden;
}
.psforum-fw .psforum-fw__col-popular::after,
.psforum-fw .psforum-fw__col-latest::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(16, 209, 192, 0.18) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  z-index: 0;
}
.psforum-fw .psforum-fw__col-popular > *,
.psforum-fw .psforum-fw__col-latest > * {
  position: relative;
  z-index: 1;
}
.psforum-fw .psforum-fw__col-popular:hover::after,
.psforum-fw .psforum-fw__col-latest:hover::after {
  animation: psfw-sheen 0.9s ease-out forwards;
}
@keyframes psfw-sheen {
  0%   { background-position: 100% 0;  opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { background-position: -50% 0;  opacity: 0; }
}

/* Reduced-motion : neutralise tous les effets premium (anims = inutiles) */
@media (prefers-reduced-motion: reduce) {
  .psforum-fw .psforum-fw__slide {
    animation-name: psfw-rotate; /* retour à l'anim simple du module */
  }
  .psforum-fw .psforum-fw__dot {
    animation-name: psfw-dot;
  }
  .psforum-fw .psforum-fw__title::after {
    animation: none;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  .psforum-fw .psforum-fw__col-popular:hover::after,
  .psforum-fw .psforum-fw__col-latest:hover::after {
    animation: none;
    opacity: 0;
  }
}

/* ─── Responsive : header et divider compactés sur mobile ─── */
@media (max-width: 768px) {
  .product-forum-section::before {
    padding: 1.5rem 0 2rem;
    font-size: 0.65rem;
    background-position:
      calc(50% - 60px) center,
      calc(50% + 60px) center;
    background-size: 40px 1px, 40px 1px;
  }
  .product-forum-section .product-forum-section__title {
    font-size: clamp(1.4rem, 5vw, 1.75rem);
  }
  .product-forum-section .product-forum-section__tagline {
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Transition accessoires → forum (Phase V)
   FIN
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   FICHE PRODUIT — Top-block dramatisé (alignement éditorial)
   But : raccorder le langage visuel du top-block (titre, prix,
   CTA, USPs) au registre éditorial déjà en place plus bas.
   ════════════════════════════════════════════════════════════ */

/* Eyebrow au-dessus du H1 (cohérent avec accessoires/forum) */
#product .product-header .product-eyebrow {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc1);
  line-height: 1.2;
}
#product .product-header .product-eyebrow__link {
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
#product .product-header .product-eyebrow__link:hover,
#product .product-header .product-eyebrow__link:focus-visible {
  opacity: .7;
  text-decoration: none;
  color: inherit;
}

/* Titre produit dramatisé (clamp pour responsive natif) */
#product .h1.product-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--black1);
  text-wrap: balance;
  margin: 0 0 0.75rem;
  padding-top: 0;
}

/* Prix dramatisé : grand, tabular, hiérarchie nette */
#product .product-prices .current-price-value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--black1);
  line-height: 1;
}
#product .product-prices .has-discount .current-price-value {
  color: var(--jvmc1);
}
#product .product-prices .regular-price {
  font-size: 1rem;
  color: #999;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
#product .product-prices .discount {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--jvmc1);
  color: var(--black1);
  border-radius: 999px;
  vertical-align: middle;
}

/* CTA "Ajouter au panier" : pill premium, plus présent */
#product .add-to-cart {
  height: 52px;
  padding: 0 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#product .add-to-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 209, 192, 0.35);
}

/* USPs : version plus discrète pour ne pas concurrencer le titre/prix */
#product .product-information .usp {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 12px;
  border-radius: 10px;
}
#product .product-information .usp__text {
  font-size: 13px;
  color: var(--black2);
  font-weight: 500;
  line-height: 1.3;
}

/* Responsive : titre et prix réduits sur mobile (fluide via clamp déjà actif) */
@media (max-width: 767px) {
  #product .add-to-cart {
    height: 46px;
    padding: 0 1.25rem;
  }
}

/* ====================================================
   HOME VIDEO mynameisBond — 3 concepts (A/B/C)
   ==================================================== */

/* Full-width comme les autres sections éditoriales */
.page-home--editorial > .home-video {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-top: -5px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- Player partagé (lazy YouTube) ---- */
.home-video-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  margin: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
}
.home-video-player__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .6s ease;
}
.home-video-player:hover .home-video-player__thumb,
.home-video-player:focus-visible .home-video-player__thumb {
  transform: scale(1.03);
  filter: brightness(.85);
}
.home-video-player__playbtn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.home-video-player__playbtn::before {
  content: "";
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  transition: transform .3s ease;
}
.home-video-player:hover .home-video-player__playbtn::before {
  transform: scale(1.08);
}
.home-video-player__playbtn svg {
  position: relative;
  z-index: 1;
  color: #0f0f10;
  margin-left: 4px;
}

/* ─── Effet premium "mise au point caméra" : à l'entrée de la section,
   le player arrive flou + assombri + légèrement zoomé, puis se MET AU
   POINT (net, lumineux, échelle 1) — langage de la vidéo (autofocus).
   Déclenché par .is-revealed (posé one-shot par initHomeVideoReveal).
   Confiné à no-preference : sous reduced-motion la JS ajoute .is-revealed
   direct, mais ce bloc est ignoré → le player reste net d'emblée. */
@media (prefers-reduced-motion: no-preference) {
  /* État pré-révélation (hors écran) : posé via :not(.is-revealed) pour
     éviter tout flash au démarrage de l'animation. */
  .home-video--wall:not(.is-revealed) .home-video-player__thumb,
  .home-video--wall:not(.is-revealed) .home-video-player--placeholder {
    filter: blur(12px) brightness(.7);
    transform: scale(1.06);
    opacity: .55;
  }
  .home-video--wall.is-revealed .home-video-player__thumb,
  .home-video--wall.is-revealed .home-video-player--placeholder {
    animation: home-video-focus 1.05s cubic-bezier(.22, .7, .25, 1) both;
    will-change: filter, transform, opacity;
  }
  @keyframes home-video-focus {
    0% {
      filter: blur(12px) brightness(.7);
      transform: scale(1.06);
      opacity: .55;
    }
    60% {
      filter: blur(3px) brightness(.9);
      opacity: 1;
    }
    100% {
      filter: blur(0) brightness(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  /* Le bouton play se révèle une fois la mise au point quasi faite,
     puis fait UNE pulsation calme du halo. */
  .home-video--wall:not(.is-revealed) .home-video-player__playbtn {
    opacity: 0;
  }
  .home-video--wall.is-revealed .home-video-player__playbtn {
    animation: home-video-play-in .5s ease .75s both;
  }
  .home-video--wall.is-revealed .home-video-player__playbtn::before {
    animation: home-video-halo 1.1s ease 1.15s 1 both;
  }
  @keyframes home-video-play-in {
    from { opacity: 0; transform: scale(.85); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes home-video-halo {
    0%   { box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,.5); }
    55%  { box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 0 0 22px rgba(255,255,255,0); }
    100% { box-shadow: 0 10px 40px rgba(0,0,0,.4), 0 0 0 0 rgba(255,255,255,0); }
  }
}

/* ─── Placeholder vidéo "en tournage" — temporaire, à swapper avec
   le <button class="home-video-player"> + data-youtube-id quand la
   vidéo est prête. Hérite des dimensions du player (aspect-ratio
   16/9, border-radius 16px) et override le background pour un
   gradient teal-deep éditorial. */
.home-video-player--placeholder {
  cursor: default;
  background: linear-gradient(135deg, #246c66 0%, #1a534f 45%, #142e2d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
  color: var(--white1);
}
.home-video-player__placeholder-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white1);
  line-height: 1;
}
.home-video-player__placeholder-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #ff5a5a;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.55);
  animation: video-rec-pulse 1.8s ease-in-out infinite;
}
@keyframes video-rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.55); }
  50%      { box-shadow: 0 0 0 9px rgba(255, 90, 90, 0); }
}
.home-video-player__placeholder-content {
  max-width: 520px;
}
.home-video-player__placeholder-title {
  font-family: var(--font-main);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white1);
  margin: 0 0 1rem;
}
.home-video-player__placeholder-sub {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  max-width: 42ch;
}
.home-video-player__placeholder-sign {
  margin: 1.4rem auto 0;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.home-video-player__placeholder-icon {
  position: absolute;
  bottom: 20px;
  right: 22px;
  color: rgba(255, 255, 255, 0.38);
  line-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  .home-video-player__placeholder-dot { animation: none; }
}
@media (max-width: 640px) {
  .home-video-player__placeholder-badge {
    top: 14px;
    left: 14px;
    padding: 5px 10px 5px 9px;
    font-size: 0.62rem;
  }
  .home-video-player__placeholder-icon {
    bottom: 14px;
    right: 14px;
  }
  .home-video-player__placeholder-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* ============ MUR DE QUESTIONS ============ */
.home-video--wall {
  padding: var(--home-section-y) 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,154,82,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(15,15,16,.04), transparent 60%),
    linear-gradient(180deg, #fafaf7 0%, #f5f3ee 100%);
}
/* Vague SVG de transition hero → section — ondulation douce */
.home-video--wall::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0,40 L0,32 Q360,16 720,32 T1440,32 L1440,40 Z' fill='%23faf3ec'/></svg>");
  pointer-events: none;
  z-index: 2;
}
.home-video-wall__inner {
  position: relative;
  /* Élargi à 1500px pour donner suffisamment d'espace aux bulles
     mid-line de "sortir" de la zone vidéo (820px centrée).
     Sur viewports < 1500px : 100% width avec padding fluide. */
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--home-inner-x);
}
.home-video-wall__head {
  text-align: center;
  margin-bottom: 56px;
}
.home-video-wall__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 700 13px/1 "Inter", sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  /* Teal désaturé brand — cohérence éditoriale avec home-proof.
     Les traits décoratifs .eyebrow-line héritent automatiquement
     via background: currentColor. */
  color: var(--jvmc-deep);
}
.home-video-wall__eyebrow-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: currentColor;
  opacity: .4;
}
.home-video-wall__title {
  font: 700 clamp(2.2rem, 3.6vw, 3.2rem)/1.1 "Inter", sans-serif;
  margin: 20px 0 0;
  color: #0f0f10;
  letter-spacing: -.01em;
}
.home-video-wall__stage {
  position: relative;
  padding: 80px 0;
}
.home-video-wall__media {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px -30px rgba(0,0,0,.4);
}
.home-video-wall__bubbles {
  /* Container des bulles = remplit le stage (qui est lui-même constraint
     par .home-video-wall__inner max-width: 1500px). Sur viewport 1900+px,
     le stage fait 1340px, ce qui laisse 260px de chaque côté de la vidéo
     centrée 820px → assez d'espace pour que les bulles ne chevauchent
     pas la vidéo. */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity .6s ease;
}
.home-video-wall__bubble {
  position: absolute;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,.18);
  max-width: 250px;
}
.home-video-wall__bubble p {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.45;
  color: #222;
  font-style: italic;
}
.home-video-wall__bubble cite {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #999;
}
.home-video-wall__bubble.bubble-1 { top: 0;    left: 0;     transform: rotate(-2deg); }
.home-video-wall__bubble.bubble-2 { top: 8%;   right: 0;    transform: rotate(2deg); }
/* Mid-line (3 & 4) : max-width réduite + collées aux bords du container,
   pour éviter le chevauchement avec la vidéo centrée à 820px. */
.home-video-wall__bubble.bubble-3 { top: 42%;  left: 0;     transform: rotate(-1deg); max-width: 200px; }
.home-video-wall__bubble.bubble-4 { top: 48%;  right: 0;    transform: rotate(3deg);  max-width: 200px; }
/* Bottom (5 & 6) : alignés aux bords du container + bottom:0 pour rester
   sous la vidéo, dans la zone padding-bottom du stage. */
.home-video-wall__bubble.bubble-5 { bottom: 0;  left: 0;     transform: rotate(-3deg); }
.home-video-wall__bubble.bubble-6 { bottom: 0;  right: 0;    transform: rotate(1deg); }
.home-video-wall__stage.is-playing .home-video-wall__bubbles {
  opacity: 0;
}

/* ─── Tablette + petit desktop (601-1199px) : 4 bulles aux coins.
       En-dessous de 1200px, le stage n'a pas assez de largeur pour
       les bulles mid-line (3, 4) sans qu'elles chevauchent la vidéo. ─── */
@media (min-width: 601px) and (max-width: 1199px) {
  .home-video-wall__bubble.bubble-3,
  .home-video-wall__bubble.bubble-4 { display: none; }
  .home-video-wall__bubble { max-width: 200px; }
  .home-video-wall__stage { padding: 60px 0; }
}

/* ─── Mobile (≤600px) : 4 bulles aux 4 coins (haut-gauche/droite,
       bas-gauche/droite). Vidéo prend la largeur entre les deux étages.
       Max-width fluide via clamp pour s'adapter de 320px (134px/bulle)
       à 600px (180px/bulle). Stage padding 80px haut/bas pour donner
       l'espace nécessaire au-dessus et en-dessous de la vidéo. ─── */
@media (max-width: 600px) {
  .home-video-wall__stage { padding: 80px 0; }

  .home-video-wall__bubble { display: none; }
  .home-video-wall__bubble.bubble-1,
  .home-video-wall__bubble.bubble-2,
  .home-video-wall__bubble.bubble-5,
  .home-video-wall__bubble.bubble-6 {
    display: block;
    max-width: min(42vw, 180px);
  }
  .home-video-wall__bubble.bubble-1 { top: 0;    left: 8px;  }
  .home-video-wall__bubble.bubble-2 { top: 0;    right: 8px; }
  .home-video-wall__bubble.bubble-5 { bottom: 0; left: 8px;  }
  .home-video-wall__bubble.bubble-6 { bottom: 0; right: 8px; }
}

/* ================================
   HOME-VIDEO — ANIMATIONS PREMIUM
   1. Reveal cascade (IntersectionObserver via JS)
   2. Bulles flottantes idle (signature de section)
   3. Halo pulsant sur play button
   4. Hover : shadow renforcée + z-index sur bulles
   5. Eyebrow lines qui se dessinent au reveal
   GPU only (transform/opacity), prefers-reduced-motion neutralise tout.
   ================================ */

/* ─── 1. Reveal cascade : état initial caché ─── */
.home-video--wall .home-video-wall__eyebrow,
.home-video--wall .home-video-wall__title,
.home-video--wall .home-video-wall__media {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.85, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.85, 0.2, 1);
  will-change: opacity, transform;
}
.home-video--wall .home-video-wall__bubble {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}

/* États révélés : cascade staggerée header → vidéo → bulles */
.home-video--wall.is-revealed .home-video-wall__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}
.home-video--wall.is-revealed .home-video-wall__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 180ms;
}
.home-video--wall.is-revealed .home-video-wall__media {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 420ms;
}

/* Bulles : opacity stagger + lancement de l'animation idle avec delay */
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-1 {
  opacity: 1;
  transition-delay: 580ms;
  animation: hv-float-1 5.8s ease-in-out 1.5s infinite;
}
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-2 {
  opacity: 1;
  transition-delay: 660ms;
  animation: hv-float-2 6.9s ease-in-out 1.7s infinite;
}
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-3 {
  opacity: 1;
  transition-delay: 740ms;
  animation: hv-float-3 4.9s ease-in-out 1.4s infinite;
}
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-4 {
  opacity: 1;
  transition-delay: 820ms;
  animation: hv-float-4 6.4s ease-in-out 2.0s infinite;
}
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-5 {
  opacity: 1;
  transition-delay: 900ms;
  animation: hv-float-5 6.2s ease-in-out 1.6s infinite;
}
.home-video--wall.is-revealed .home-video-wall__bubble.bubble-6 {
  opacity: 1;
  transition-delay: 980ms;
  animation: hv-float-6 5.5s ease-in-out 1.8s infinite;
}

/* ─── 2. Bulles flottantes idle (6 trajectoires uniques, rotation préservée).
       Amplitudes augmentées (~+50%) + rotation alternée plus marquée pour
       un mouvement plus vivant. ─── */
@keyframes hv-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50%      { transform: translate3d(8px, -12px, 0) rotate(-1deg); }
}
@keyframes hv-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50%      { transform: translate3d(-10px, -9px, 0) rotate(3deg); }
}
@keyframes hv-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50%      { transform: translate3d(7px, 11px, 0) rotate(-2deg); }
}
@keyframes hv-float-4 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); }
  50%      { transform: translate3d(-9px, -10px, 0) rotate(2deg); }
}
@keyframes hv-float-5 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50%      { transform: translate3d(10px, -7px, 0) rotate(-2deg); }
}
@keyframes hv-float-6 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg); }
  50%      { transform: translate3d(-7px, -12px, 0) rotate(2deg); }
}

/* ─── 3. Halo pulsant sur play button (invite au clic, stoppe au hover) ─── */
.home-video-player__playbtn {
  position: relative;
}
.home-video--wall.is-revealed .home-video-player__playbtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(16, 209, 192, 0.55);
  animation: hv-play-pulse 2.4s ease-in-out 1.2s infinite;
}
@keyframes hv-play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 209, 192, 0.55); }
  50%      { box-shadow: 0 0 0 14px rgba(16, 209, 192, 0); }
}
.home-video-player:hover .home-video-player__playbtn::after,
.home-video-player:focus-visible .home-video-player__playbtn::after {
  animation-play-state: paused;
  box-shadow: none;
}

/* ─── 4. Hover sur bulles : shadow renforcée + z-index, sans casser le float ─── */
.home-video--wall.is-revealed .home-video-wall__bubble {
  transition: opacity 0.7s ease-out, box-shadow 280ms ease-out;
  cursor: default;
}
.home-video--wall.is-revealed .home-video-wall__bubble:hover {
  box-shadow: 0 22px 56px -12px rgba(0, 0, 0, 0.28);
  z-index: 2;
  animation-play-state: paused;
}

/* ─── 5. Eyebrow lines qui se dessinent depuis le centre ─── */
.home-video-wall__eyebrow-line {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.05, 1);
}
.home-video--wall.is-revealed .home-video-wall__eyebrow-line {
  transform: scaleX(1);
  transition-delay: 400ms;
}

/* ─── Reduced motion : tout figé, état final visible immédiatement ─── */
@media (prefers-reduced-motion: reduce) {
  .home-video--wall .home-video-wall__eyebrow,
  .home-video--wall .home-video-wall__title,
  .home-video--wall .home-video-wall__media,
  .home-video--wall .home-video-wall__bubble {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .home-video--wall .home-video-wall__eyebrow-line {
    transform: scaleX(1);
    transition: none;
  }
  /* Restaurer les rotations statiques des bulles */
  .home-video-wall__bubble.bubble-1 { transform: rotate(-2deg); }
  .home-video-wall__bubble.bubble-2 { transform: rotate(2deg); }
  .home-video-wall__bubble.bubble-3 { transform: rotate(-1deg); }
  .home-video-wall__bubble.bubble-4 { transform: rotate(3deg); }
  .home-video-wall__bubble.bubble-5 { transform: rotate(-3deg); }
  .home-video-wall__bubble.bubble-6 { transform: rotate(1deg); }
  /* Halo pulse désactivé */
  .home-video--wall.is-revealed .home-video-player__playbtn::after {
    animation: none;
    box-shadow: none;
  }
}

/* ====================================================
   HOME HERO — Variante éditoriale (typo + trust strip)
   ==================================================== */
.home-hero--v1 .home-hero__eyebrow {
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: .85;
}
.home-hero--v1 .home-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 18px 0 26px;
}
.home-hero--v1 .home-hero__title em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.01em;
}
.home-hero--v1 .home-hero__lede {
  max-width: 480px;
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: .85;
}
.home-hero--v1 .home-hero__trust-strip {
  list-style: none;
  margin: 36px 0 0;
  padding: 16px 22px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  max-width: 100%;
}
.home-hero--v1 .home-hero__trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.9);
  font-weight: 500;
  letter-spacing: .02em;
}
.home-hero--v1 .home-hero__trust-strip li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  margin-left: 18px;
}
.home-hero--v1 .home-hero__trust-strip strong {
  color: #fff;
  font-weight: 700;
}
.home-hero--v1 .home-hero__trust-strip svg {
  color: var(--jvmc1, #ff9a52);
}
@media (max-width: 768px) {
  /* Sur mobile : pill row → stack vertical.
     Le format pill avec wrap crée des dots orphelins + forme cassée.
     Ici on passe chaque item sur sa ligne, dot séparateur remplacé par
     une puce turquoise devant chaque item. */
  .home-hero--v1 .home-hero__trust-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    width: 100%;
    max-width: 340px;
  }
  .home-hero--v1 .home-hero__trust-strip li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.4;
  }
  .home-hero--v1 .home-hero__trust-strip li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--jvmc1, #10d1c0);
  }
  /* On désactive le dot séparateur "::after" hérité du desktop */
  .home-hero--v1 .home-hero__trust-strip li:not(:last-child)::after {
    display: none;
  }
  /* Sur mobile on garde uniquement 3 items clés (note, clients, Agréé)
     pour ne pas pousser le scroll indicator trop bas */
  .home-hero--v1 .home-hero__trust-strip li:nth-child(3),
  .home-hero--v1 .home-hero__trust-strip li:nth-child(5) {
    display: none;
  }
  /* H1 : l'italique devient un sous-titre plus léger pour alléger la densité */
  .home-hero--v1 .home-hero__title em {
    display: block;
    margin-top: 10px;
    font-size: .55em;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: 0;
    color: rgba(255,255,255,.75);
  }
}
@media (max-width: 768px) {
   #index #header a.ico-account, #index #header a.ico-search, #index #header a.ico-mail {
    color: white;
  }
   #index #header .scroll_heading a.ico-account,#index #header .scroll_heading a.ico-search, #index #header .scroll_heading a.ico-mail {
    color: var(--black1);
  }
  #index #_desktop_cart .header a, #index #_desktop_cart .header {
          color: white;
  }
  #index .scroll_heading #_desktop_cart .header a, #index .scroll_heading #_desktop_cart .header {
          color: var(--black1);
  }
  #index .logoMobile {
      filter: none;
  }
  #index .scroll_heading .logoMobile {
      filter: invert(100%) drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.3));
  }
}

/* ================================
   HOME — SECTION PREUVE (slider avant/après glissable)
   Climax visuel entre Process et Sélection.
   ================================ */

.page-home--editorial .home-proof {
  padding-block: var(--home-section-y, clamp(80px, 12vw, 160px));
  background: #ffffff;
  position: relative;
}
/* Vague SVG de transition hero → home-proof — ondulation douce.
   Couleur #ffffff pour matcher le top de home-proof. */
.page-home--editorial .home-proof::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0,40 L0,32 Q360,16 720,32 T1440,32 L1440,40 Z' fill='%23ffffff'/></svg>");
  pointer-events: none;
  z-index: 2;
}

.page-home--editorial .home-proof__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
}

.page-home--editorial .home-proof .home-section-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 72px);
  /* Plus généreux que le 720px par défaut pour laisser respirer le titre paradoxal */
  max-width: 880px;
}

/* Eyebrow "Avant / Après" en teal désaturé profond (vs --jvmc1 brand vif des autres sections)
   → cohérence éditoriale avec l'em du titre paradoxal qui utilise la même couleur. */
.page-home--editorial .home-proof .home-section-eyebrow {
  color: var(--jvmc-deep);
}

/* Titre paradoxal : taille resserrée + line-wrap auto-balancé.
   Font-size réduite vs --home-title-fs pour faire tenir
   "pas le complément capillaire." sur une seule ligne. */
.page-home--editorial .home-proof .home-section-title {
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  text-wrap: balance;
  line-height: 1.08;
}
.page-home--editorial .home-proof .home-section-title em {
  font-style: italic;
  font-weight: 400;
  /* Teal désaturé profond — dialogue avec le --jvmc1 brand sans le concurrencer.
     Variable réutilisable pour autres accents éditoriaux discrets. */
  color: var(--jvmc-deep);
}

.page-home--editorial .home-proof .home-section-lede {
  max-width: 620px;
  margin-inline: auto;
}

/* ─── Showcase : duo desktop / pile mobile ─── */
.page-home--editorial .home-proof__showcase {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

@media (min-width: 768px) {
  .page-home--editorial .home-proof__showcase {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Un comparateur (figure) ─── */
.page-home--editorial .ba-slider {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-home--editorial .ba-slider__frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: clamp(12px, 2vw, 24px);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(51, 51, 71, 0.25);
  cursor: ew-resize;
  background: #efefef;
  isolation: isolate;
}

@media (min-width: 768px) {
  .page-home--editorial .ba-slider__frame {
    max-width: none;
  }
}

.page-home--editorial .ba-slider__after,
.page-home--editorial .ba-slider__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.page-home--editorial .ba-slider__before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 2;
}

.page-home--editorial .ba-slider__after {
  z-index: 1;
}

/* ─── Badges Avant / Après ─── */
.page-home--editorial .ba-slider__label {
  position: absolute;
  top: 16px;
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--darkBlue);
  pointer-events: none;
}
.page-home--editorial .ba-slider__label--before { left: 16px; }
.page-home--editorial .ba-slider__label--after  { right: 16px; }

/* ─── Poignée centrale ─── */
.page-home--editorial .ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-home--editorial .ba-slider__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--jvmc1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.page-home--editorial .ba-slider__handle-knob {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--jvmc1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
  cursor: ew-resize;
  /* Réactive les pointer events spécifiquement sur le knob (le parent
     .ba-slider__handle a pointer-events: none pour que la ligne et la
     zone autour de la poignée ne bloquent pas le scroll vertical). */
  pointer-events: auto;
  /* Bloque le scroll vertical UNIQUEMENT sur le knob (zone draggable).
     Le reste du frame conserve touch-action: auto → le doigt peut
     scroller la page verticalement quand il passe sur l'image. */
  touch-action: none;
}

/* ─── Range natif invisible (clavier + a11y) ───
   pointer-events: none → laisse les taps/swipes traverser jusqu'au frame.
   Sinon le range natif (qui couvre tout le frame) capte le touch et bouge
   sa valeur à chaque tap, ce qui décale le miroir avant/après pendant un
   simple scroll vertical sur l'image. Le clavier (focus Tab + flèches)
   reste fonctionnel car les événements clavier ignorent pointer-events. */
.page-home--editorial .ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  cursor: ew-resize;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.page-home--editorial .ba-slider__range:focus { outline: none; }

.page-home--editorial .ba-slider__range:focus-visible ~ .ba-slider__handle .ba-slider__handle-knob {
  outline: 3px solid var(--jvmc1);
  outline-offset: 4px;
  transform: scale(1.05);
}

.page-home--editorial .ba-slider__frame:hover .ba-slider__handle-knob {
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* ─── Carte légende — sous chaque comparateur ─── */
.page-home--editorial .ba-slider__caption {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px auto 0;
  padding: 18px 22px;
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: var(--gray-shadow2);
}

@media (min-width: 768px) {
  .page-home--editorial .ba-slider__caption {
    max-width: none;
  }
}

/* ─── Tags de condition (badges teal en haut de caption) ─── */
.page-home--editorial .ba-slider__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.page-home--editorial .ba-slider__tag {
  display: inline-block;
  padding: 3px 10px;
  /* Teal désaturé brand — cohérent avec eyebrow + em du titre paradoxal.
     Background/border en rgba explicite pour opacités basses (le var
     --jvmc-deep a déjà 75% alpha intégré, parfait pour le texte). */
  background: rgba(36, 108, 102, 0.08);
  color: var(--jvmc-deep);
  border: 1px solid rgba(36, 108, 102, 0.22);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ─── Prose éditoriale sous les tags ─── */
.page-home--editorial .ba-slider__story {
  margin: 4px 0 0;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--black2);
}
.page-home--editorial .ba-slider__story strong {
  color: var(--darkBlue);
  font-weight: 600;
}

/* ─── Mobile : ajustements knob + labels (l'aspect-ratio reste 4/5) ─── */
@media (max-width: 600px) {
  .page-home--editorial .ba-slider__handle-knob {
    width: 44px;
    height: 44px;
  }
  .page-home--editorial .ba-slider__label {
    top: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
  }
  .page-home--editorial .ba-slider__label--before { left: 12px; }
  .page-home--editorial .ba-slider__label--after  { right: 12px; }
  .page-home--editorial .ba-slider__caption {
    padding: 16px 18px;
  }
}

/* ─── Respect du préférence reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .page-home--editorial .ba-slider__handle-knob,
  .page-home--editorial .ba-slider__frame:hover .ba-slider__handle-knob {
    transition: none;
    transform: none;
  }
}

/* ================================
   HOME-PROOF — ÉLEVATION INTERACTION PREMIUM
   Reveal IO + auto-démo + hint + drag states + limit bounce.
   Toutes les animations en transform/opacity (GPU only),
   prefers-reduced-motion désactive démo/pulse/hint.
   ================================ */

/* ─── Reveal cascade au passage de la section dans le viewport ─── */
.page-home--editorial .home-proof .home-section-header,
.page-home--editorial .home-proof .ba-slider {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.2, 0.85, 0.2, 1),
              transform 0.85s cubic-bezier(0.2, 0.85, 0.2, 1);
  will-change: opacity, transform;
}

.page-home--editorial .home-proof.is-revealed .home-section-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}
.page-home--editorial .home-proof.is-revealed .ba-slider:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 220ms;
}
.page-home--editorial .home-proof.is-revealed .ba-slider:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 380ms;
}

/* ─── Hint texte "Glissez" sous chaque slider (avant 1ère interaction) ─── */
.page-home--editorial .ba-slider__hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--darkBlue);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.page-home--editorial .ba-slider__hint svg {
  color: var(--jvmc1);
  flex-shrink: 0;
}

/* Hint visible (animation flottement) tant que slider non touché */
.page-home--editorial .ba-slider:not(.is-touched) .ba-slider__hint {
  opacity: 1;
  animation: ba-hint-float 2.4s ease-in-out infinite;
}
@keyframes ba-hint-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Chevrons du hint qui oscillent latéralement */
.page-home--editorial .ba-slider:not(.is-touched) .ba-slider__hint svg {
  animation: ba-hint-chev 1.4s ease-in-out infinite;
}
@keyframes ba-hint-chev {
  0%, 100% { transform: scaleX(1) translateX(0); }
  50%      { transform: scaleX(1.15) translateX(2px); }
}

/* ─── Pulsation halo turquoise sur le knob (avant 1ère interaction) ─── */
.page-home--editorial .ba-slider:not(.is-touched) .ba-slider__handle-knob {
  animation: ba-knob-pulse 2.4s ease-in-out infinite;
}
@keyframes ba-knob-pulse {
  0%, 100% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
                0 0 0 0 rgba(16, 209, 192, 0.55);
  }
  50% {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25),
                0 0 0 14px rgba(16, 209, 192, 0);
  }
}

/* ─── État :is-dragging — feedback tactile pendant drag ─── */
.page-home--editorial .ba-slider.is-dragging .ba-slider__frame {
  cursor: grabbing;
}
.page-home--editorial .ba-slider.is-dragging .ba-slider__handle-knob {
  transform: scale(1.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32),
              0 0 0 6px rgba(16, 209, 192, 0.16);
  animation: none;
  transition: transform 90ms ease-out, box-shadow 120ms ease-out;
}

/* ─── État at-limit — bounce du knob quand --pos atteint 0 ou 100 ─── */
.page-home--editorial .ba-slider.at-limit .ba-slider__handle-knob {
  animation: ba-knob-bounce 0.5s ease-out;
}
@keyframes ba-knob-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.88); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Quand le slider est touché, on garde le frame en grab (pas grabbing) au hover */
.page-home--editorial .ba-slider.is-touched .ba-slider__frame {
  cursor: grab;
}
.page-home--editorial .ba-slider.is-touched.is-dragging .ba-slider__frame {
  cursor: grabbing;
}

/* ─── Mobile : hint réduit pour ne pas écraser le slider en portrait ─── */
@media (max-width: 600px) {
  .page-home--editorial .ba-slider__hint {
    bottom: 14px;
    padding: 6px 12px;
    font-size: 0.72rem;
  }
}

/* ─── Reduced motion : neutralise reveal, démo, pulse, hint, bounce ─── */
@media (prefers-reduced-motion: reduce) {
  .page-home--editorial .home-proof .home-section-header,
  .page-home--editorial .home-proof .ba-slider {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-home--editorial .ba-slider:not(.is-touched) .ba-slider__handle-knob,
  .page-home--editorial .ba-slider:not(.is-touched) .ba-slider__hint,
  .page-home--editorial .ba-slider:not(.is-touched) .ba-slider__hint svg,
  .page-home--editorial .ba-slider.at-limit .ba-slider__handle-knob {
    animation: none;
  }
  .page-home--editorial .ba-slider.is-dragging .ba-slider__handle-knob {
    transform: none;
  }
}

/* ================================
   HERO V8 · V1 + MAÎTRISE RESPONSIVE (5 PALIERS)
   Hérite de .home-hero--v1 pour le style desktop standard.
   Surcharge ciblée des breakpoints pour :
     · ≥1600px       → ultra-wide cap + titre +20%
     · 1280-1599px   → desktop large : titre légèrement plus grand
     · 992-1279px    → desktop standard (= V1, aucune surcharge)
     · 768-991px     → TABLETTE : split 2 colonnes ré-activé (figure visible)
     · 480-767px     → mobile : typo intermédiaire, watermark J réduit
     · <480px        → small mobile : CTAs full-width, typo compacte
   ================================ */

/* ─── Petit mobile (<480px) : compaction maximale ─── */
@media (max-width: 479.98px) {
  .page-home--editorial .home-hero--v8 .home-hero__title {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
    line-height: 1.1;
  }
  .page-home--editorial .home-hero--v8 .home-hero__lede {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .page-home--editorial .home-hero--v8 .home-hero__eyebrow {
    font-size: 0.72rem;
  }
  /* CTAs full-width pour faciliter le tap */
  .page-home--editorial .home-hero--v8 .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-home--editorial .home-hero--v8 .home-hero__actions .btn-jvmc {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ─── Mobile (480-767px) : typo intermédiaire ─── */
@media (min-width: 480px) and (max-width: 767.98px) {
  .page-home--editorial .home-hero--v8 .home-hero__title {
    font-size: clamp(2.1rem, 5.8vw, 2.9rem);
  }
  .page-home--editorial .home-hero--v8 .home-hero__lede {
    font-size: 1rem;
  }
}

/* ─── <992px : V3-style spotlight (image full-bleed dimmée + voile radial central)
   Couche image + voile activées ; figure desktop masquée ; overlay V1 désactivé
   (remplacé par le voile) ; watermark J masqué (vraie image visible). ─── */

/* Par défaut : couches mobile masquées (desktop ≥992px) */
.page-home--editorial .home-hero--v8 .home-hero-v8__mobile-bg,
.page-home--editorial .home-hero--v8 .home-hero-v8__mobile-veil {
  display: none;
}

@media (max-width: 991.98px) {
  /* Couche image full-bleed */
  .page-home--editorial .home-hero--v8 .home-hero-v8__mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .page-home--editorial .home-hero--v8 .home-hero-v8__mobile-bg picture,
  .page-home--editorial .home-hero--v8 .home-hero-v8__mobile-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .page-home--editorial .home-hero--v8 .home-hero-v8__mobile-bg img {
    filter: brightness(0.55) saturate(0.85) contrast(1.05);
  }

  /* Voile radial central (style V3 mobile) */
  .page-home--editorial .home-hero--v8 .home-hero-v8__mobile-veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      circle 380px at center,
      transparent 0%,
      rgba(5, 8, 16, 0.4) 35%,
      rgba(5, 8, 16, 0.85) 70%,
      rgba(5, 8, 16, 0.96) 100%
    );
  }

  /* Overlay V1 désactivé (redondant avec le voile) */
  .page-home--editorial .home-hero--v8 .home-hero__overlay {
    display: none;
  }

  /* Figure desktop masquée — l'image est dans la couche bg maintenant */
  .page-home--editorial .home-hero--v8 .home-hero__figure {
    display: none;
  }

  /* Watermark "J" masqué — la vraie image est visible */
  .page-home--editorial .home-hero--v8::after {
    display: none;
  }

  /* Contenu et scroll au-dessus des couches image+voile */
  .page-home--editorial .home-hero--v8 .home-hero__inner {
    position: relative;
    z-index: 2;
  }
  .page-home--editorial .home-hero--v8 .home-hero__scroll {
    z-index: 2;
  }

  /* Bg fallback opaque (au cas où l'image tarde) */
  .page-home--editorial .home-hero--v8 {
    isolation: isolate;
    background: #050810;
  }
}

/* ─── Tablette (768-991px) : section min-height un peu plus généreuse
       pour bien voir l'image en bg + texte ─── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-home--editorial .home-hero--v8 {
    min-height: clamp(620px, 80vh, 820px);
  }
  .page-home--editorial .home-hero--v8 .home-hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-block: clamp(140px, 16vh, 200px) clamp(48px, 6vh, 72px);
  }
  .page-home--editorial .home-hero--v8 .home-hero__content {
    grid-area: 1 / 1;
    justify-self: stretch;
    max-width: 100%;
  }
  .page-home--editorial .home-hero--v8 .home-hero__title {
    font-size: clamp(2.2rem, 4.6vw, 3rem);
    line-height: 1.08;
  }
  .page-home--editorial .home-hero--v8 .home-hero__trust-strip {
    gap: 10px 18px;
    font-size: 0.82rem;
  }
}

/* ─── DESKTOP STANDARD (992-1279px) : aucune surcharge — hérite V1 tel quel ─── */

/* ─── DESKTOP LARGE (1280-1599px) : titre légèrement plus grand,
       cap min-height relevé pour que l'image (height-driven) continue
       de grandir. AUCUN cap sur inner ou content : le hero s'étend
       edge-to-edge comme V7/V1 (padding --home-inner-x suffit). ─── */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .page-home--editorial .home-hero--v8 {
    /* V1 cape min-height à 940px → on relève à 1080px pour grands écrans */
    min-height: clamp(720px, 88vh, 1080px);
  }
  .page-home--editorial .home-hero--v8 .home-hero__title {
    font-size: clamp(3rem, 4.2vw, 4.4rem);
  }
}

/* ─── ULTRA-WIDE (≥1600px) : image bien plus grande grâce au min-height relevé.
       Inner reste full-width avec padding --home-inner-x (comme V7/V1).
       Content garde son cap V1 (min(820px, 58vw)) pour la line-length. ─── */
@media (min-width: 1600px) {
  .page-home--editorial .home-hero--v8 {
    /* On laisse l'image grandir : cap à 1280px (vs 940px V1) */
    min-height: clamp(820px, 86vh, 1280px);
  }
  .page-home--editorial .home-hero--v8 .home-hero__title {
    font-size: clamp(3.6rem, 4vw, 5rem);
    line-height: 1.04;
  }
  .page-home--editorial .home-hero--v8 .home-hero__lede {
    font-size: 1.18rem;
  }
}

/* ─── ULTRA-ULTRA-WIDE (≥2000px) : on continue de pousser le cap min-height
       pour les 4K / écrans 27"+ pro. Inner toujours full-width. ─── */
@media (min-width: 2000px) {
  .page-home--editorial .home-hero--v8 {
    min-height: clamp(960px, 80vh, 1500px);
  }
}

/* ─── WIDE+ (≥1800px) : décale le contenu vers l'intérieur pour éviter
       l'effet "trop collé au bord gauche". Inner padding gauche scaling
       de ~180px à 1800vw jusqu'à 260px sur écrans 4K. La figure reste
       intacte (position absolute right:0 sur la section). ─── */
@media (min-width: 1800px) {
  .page-home--editorial .home-hero__inner {
    padding-left: clamp(140px, 10vw, 260px);
  }
}
@media (max-width: 768px) {
    #chatbox-toggle.has-text {
      /*
        background: white;
        border: 1px solid #00000024;
        border-radius: 5px;
        padding: 5px;
        */
    }
}

/* Bounce-in du toggle chatbox à l'apparition (une seule fois) */
@keyframes chatbox-toggle-bounce-in {
    0%   { opacity: 0; transform: scale(0.3) translateY(40px); }
    60%  { opacity: 1; transform: scale(1.1) translateY(-6px); }
    80%  { transform: scale(0.95) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Pulse de rappel toutes les 30s (la pulsation occupe ~2.5s, puis 27.5s de repos) */
@keyframes chatbox-toggle-pulse {
    0%, 8%, 100% { transform: scale(1); }
    2%           { transform: scale(1.12); }
    4%           { transform: scale(0.96); }
    6%           { transform: scale(1.03); }
}

#chatbox-toggle {
    animation:
        chatbox-toggle-bounce-in 0.9s cubic-bezier(0.2, 0.65, 0.25, 1) 0.6s both,
        chatbox-toggle-pulse 30s ease-in-out 5s infinite;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    #chatbox-toggle {
        animation: none;
    }
}

@media (max-width: 768px) {
    #product #chatbox-toggle.bottom_right {
        bottom: 110px;
    }
}

#chatbox.theme-chatgpt #chatbox-send-button {
    box-shadow: none;
}
#chatbox a {
    color: var(--jvmc1);
    display: contents;
    font-weight: 600;
}
#footer {
    background-color: white;
}
#main .page-footer {
    margin-bottom: 0px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CMS PREMIUM — Étape 1 : typographie éditoriale
   Scope : article.cms-article (wrapper ajouté dans templates/cms/page.tpl).
   Toutes les règles sont chainées sur .cms-article pour éviter de polluer
   d'autres pages du theme. Aucune dépendance JS pour cette étape.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-cms #content.page-content {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.cms-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: var(--font-main, "Inter"), "Inter Fallback", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--black2, #555);
  text-align: left;
}

/* ─── Titres ─────────────────────────────────────────────────────────────── */
.cms-article h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--darkBlue, #333347);
  font-weight: 700;
  margin: 0 0 18px;
}

/* "Mis à jour le ... — Lecture : ..." juste sous le h1 */
.cms-article h1 + p {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray1, #8f8f8f);
  margin: 0 0 36px;
  font-weight: 500;
}
.cms-article h1 + p em {
  font-style: normal;
}

.cms-article h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  line-height: 1.3;
  color: var(--darkBlue, #333347);
  font-weight: 700;
  margin: 56px 0 18px;
  padding-left: 16px;
  border-left: 4px solid var(--jvmc-deep, #246c66);
  scroll-margin-top: 100px;
}

.cms-article h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  color: var(--darkBlue, #333347);
  font-weight: 600;
  margin: 32px 0 12px;
  scroll-margin-top: 100px;
}

/* ─── Paragraphes & inline ──────────────────────────────────────────────── */
.cms-article p {
  margin: 0 0 18px;
  color: var(--black2, #555);
  text-align: left;
  letter-spacing: 0;
}

.cms-article strong {
  color: var(--jvmc-deep, #246c66);
  font-weight: 600;
}

.cms-article em {
  font-style: italic;
}

.cms-article sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
}

.cms-article a {
  color: var(--jvmc-deep, #246c66);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.cms-article a:hover,
.cms-article a:focus-visible {
  color: var(--jvmc1, #10d1c0);
  text-decoration-thickness: 2px;
}

/* ─── Listes ─────────────────────────────────────────────────────────────── */
.cms-article ul,
.cms-article ol {
  margin: 0 0 22px;
  padding-left: 1.5em;
  color: var(--black2, #555);
}
.cms-article li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.cms-article ul li::marker {
  color: var(--jvmc-deep, #246c66);
  font-size: 1.1em;
}
.cms-article ol li::marker {
  color: var(--jvmc-deep, #246c66);
  font-weight: 600;
}
.cms-article li > strong:first-child {
  /* "<strong>Chimiothérapie</strong> et certaines..." → respiration visuelle */
  display: inline;
}

/* Listes imbriquées (sources, FAQ) — réduction du space */
.cms-article li ul,
.cms-article li ol {
  margin: 8px 0 0;
}

/* ─── Sommaire (TOC) — détecté par CSS : premier h2 + son ol direct ────── */
.cms-article > h2:first-of-type + ol {
  background: rgba(16, 209, 192, 0.06);
  border-left: 4px solid var(--jvmc-deep, #246c66);
  border-radius: 0 8px 8px 0;
  padding: 22px 24px 22px 48px;
  margin: 0 0 48px;
  list-style: decimal;
}
.cms-article > h2:first-of-type + ol li {
  margin-bottom: 6px;
  padding-left: 0;
}
.cms-article > h2:first-of-type + ol li::marker {
  color: var(--jvmc-deep, #246c66);
  font-weight: 600;
  font-size: 0.95em;
}
.cms-article > h2:first-of-type + ol a {
  text-decoration: none;
  color: var(--darkBlue, #333347);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cms-article > h2:first-of-type + ol a:hover,
.cms-article > h2:first-of-type + ol a:focus-visible,
.cms-article > h2:first-of-type + ol a.is-active {
  color: var(--jvmc-deep, #246c66);
  border-bottom-color: var(--jvmc-deep, #246c66);
}

/* Le h2 "Sommaire" est plus discret que les autres h2 */
.cms-article > h2:first-of-type {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray1, #8f8f8f);
  border-left: none;
  padding-left: 0;
  margin: 32px 0 14px;
  font-weight: 600;
  scroll-margin-top: 0;
}

/* ─── Blockquote — encadrés clés ────────────────────────────────────────── */
.cms-article blockquote {
  margin: 36px 0;
  padding: 22px 26px;
  background: rgba(16, 209, 192, 0.08);
  border-left: 4px solid var(--jvmc-deep, #246c66);
  border-radius: 0 8px 8px 0;
  color: var(--darkBlue, #333347);
  font-size: 1rem;
  line-height: 1.65;
}
.cms-article blockquote p {
  margin: 0;
  color: var(--darkBlue, #333347);
}
.cms-article blockquote p + p {
  margin-top: 12px;
}
.cms-article blockquote strong {
  color: var(--jvmc-deep, #246c66);
}

/* ─── Tableaux — comparatifs ────────────────────────────────────────────── */
.cms-article table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-size: 0.94rem;
  background: var(--white1, #fff);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 2px 12px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow: hidden;
}
.cms-article table caption {
  caption-side: bottom;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--gray1, #8f8f8f);
  padding: 10px 0 0;
  text-align: left;
}
.cms-article thead th {
  background: var(--jvmc-deep, #246c66);
  color: var(--white1, #fff);
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  border: none;
}
.cms-article tbody td {
  padding: 14px 16px;
  border-top: 1px solid #eef0f2;
  vertical-align: top;
  color: var(--black2, #555);
}
.cms-article tbody tr:nth-child(even) td {
  background: #fafbfc;
}
.cms-article tbody td strong {
  color: var(--jvmc-deep, #246c66);
}

/* Mobile : scroll horizontal sur les tables (plutôt qu'overflow ou squash) */
@media (max-width: 768px) {
  .cms-article {
    padding: 28px 16px 60px;
    font-size: 16px;
  }
  .cms-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .cms-article thead th,
  .cms-article tbody td {
    white-space: normal;
    min-width: 140px;
  }
}

/* ─── Séparateur (hr) avant les sources ─────────────────────────────────── */
.cms-article hr {
  border: none;
  height: 1px;
  margin: 56px auto 32px;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(36, 108, 102, 0.4),
    transparent
  );
}

/* ─── Sources (paragraphe + liste après le hr) ──────────────────────────── */
.cms-article hr + p,
.cms-article hr + p + ul {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--gray1, #8f8f8f);
}
.cms-article hr + p strong {
  color: var(--darkBlue, #333347);
}
.cms-article hr + p + ul + p em {
  display: block;
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--gray1, #8f8f8f);
  font-style: italic;
}

/* ─── Reduced-motion — neutralise tous les transitions ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cms-article a {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CMS PREMIUM — Étape 2 : TOC sticky desktop (pure CSS, zéro CLS)
   Le sommaire est détecté par sélecteur CSS : .cms-article > h2:first-of-type + ol
   - Mobile/tablette : box teal inline (styles de l'étape 1 plus haut)
   - Desktop ≥1200px : extrait en sidebar sticky col 1 via grid-column override
   custom.js → initCmsToc gère uniquement le scroll-spy (toggle .is-active).
   Aucune mutation DOM côté JS → la position finale est posée dès le 1er paint.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .cms-article {
    max-width: 1140px;
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 80px;
    align-items: start;
  }
  /* Tous les enfants directs vont dans la colonne 2 (contenu) */
  .cms-article > * {
    grid-column: 2;
    max-width: 760px;
  }
  /* Le 1er h2 "Sommaire" en col 1 row 1, sticky top */
  .cms-article > h2:first-of-type {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 100px;
    align-self: start;
    margin: 0 0 14px;
    z-index: 1;
  }
  /* Son ol direct en col 1 sous le h2, sticky aligné, override style sidebar */
  .cms-article > h2:first-of-type + ol {
    grid-column: 1;
    grid-row: 2 / span 9999;
    position: sticky;
    top: calc(100px + 2.5em);
    align-self: start;
    background: transparent;
    border-left: 2px solid #e6e8eb;
    border-radius: 0;
    padding: 4px 0 4px 18px;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    list-style: none;
    counter-reset: toc;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(36, 108, 102, 0.3) transparent;
  }
  .cms-article > h2:first-of-type + ol::-webkit-scrollbar {
    width: 4px;
  }
  .cms-article > h2:first-of-type + ol::-webkit-scrollbar-thumb {
    background: rgba(36, 108, 102, 0.3);
    border-radius: 2px;
  }
  .cms-article > h2:first-of-type + ol li {
    position: relative;
    padding-left: 0;
    margin-bottom: 10px;
    counter-increment: toc;
  }
  .cms-article > h2:first-of-type + ol li::marker {
    content: none;
  }
  .cms-article > h2:first-of-type + ol a {
    display: block;
    padding: 4px 0 4px 8px;
    margin-left: -20px;
    border-left: 2px solid transparent;
    border-bottom: none;
    color: var(--gray1, #8f8f8f);
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
  }
  .cms-article > h2:first-of-type + ol a:hover,
  .cms-article > h2:first-of-type + ol a:focus-visible {
    color: var(--darkBlue, #333347);
    border-bottom: none;
  }
  .cms-article > h2:first-of-type + ol a.is-active {
    color: var(--jvmc-deep, #246c66);
    border-left-color: var(--jvmc-deep, #246c66);
    font-weight: 600;
    padding-left: 12px;
    border-bottom: none;
  }
}

/* Reduced-motion : neutralise les transitions du TOC */
@media (prefers-reduced-motion: reduce) {
  .cms-article > h2:first-of-type + ol a {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CMS PREMIUM — Étape 3 : Reading progress bar
   Barre fixée tout en haut de la viewport, fill teal gradient qui suit
   la progression de lecture dans .cms-article (créée par initCmsProgressBar).
   ═══════════════════════════════════════════════════════════════════════════ */
.cms-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(36, 108, 102, 0.08);
  z-index: 1040;
  pointer-events: none;
}
.cms-progress__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    var(--jvmc-deep, #246c66),
    var(--jvmc1, #10d1c0)
  );
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CMS PREMIUM — Étape 4 : Back-to-top floating button
   Bouton circulaire bottom-right qui apparaît après 600px de scroll.
   Mobile : décalé bottom: 130px pour éviter la collision avec #chatbox-toggle
   (qui est à bottom: 110px dans la rule existante ligne 7462).
   ═══════════════════════════════════════════════════════════════════════════ */
.cms-back-to-top {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--jvmc-deep, #246c66);
  color: var(--white1, #fff);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  z-index: 1030;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  will-change: opacity, transform;
}
.cms-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cms-back-to-top:hover,
.cms-back-to-top:focus-visible {
  background: var(--jvmc1, #10d1c0);
}
.cms-back-to-top:focus-visible {
  outline: 2px solid var(--jvmc1, #10d1c0);
  outline-offset: 3px;
}
.cms-back-to-top svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

@media (max-width: 768px) {
  .cms-back-to-top {
    bottom: 24px;
    left: 16px;
    width: 44px;
    height: 44px;
  }
  .cms-back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms-back-to-top {
    transform: none;
    transition: opacity 0.15s linear, background 0.2s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CMS PREMIUM — Étape 5 : Anchor links copiables sur h2/h3
   Bouton "#" inline ajouté après le texte de chaque h2/h3 ayant un id.
   Hidden par défaut, visible au hover du heading ou au focus du bouton.
   Click → copie l'URL + hash dans le presse-papier, tooltip "Lien copié".
   Desktop-only feature (hover-based), masquée sur mobile/tactile.
   ═══════════════════════════════════════════════════════════════════════════ */
.cms-article h2,
.cms-article h3 {
  position: relative;
}

.cms-article .cms-anchor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  padding: 0;
  vertical-align: -4px;
  border: none;
  background: transparent;
  color: var(--gray1, #8f8f8f);
  font-family: var(--font-main, "Inter"), Arial, sans-serif;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
  border-radius: 6px;
  position: relative;
}
.cms-article .cms-anchor-link > span {
  display: block;
}

.cms-article h2:hover > .cms-anchor-link,
.cms-article h3:hover > .cms-anchor-link,
.cms-article .cms-anchor-link:focus-visible,
.cms-article .cms-anchor-link.is-copied {
  opacity: 1;
}

.cms-article .cms-anchor-link:hover,
.cms-article .cms-anchor-link:focus-visible {
  color: var(--jvmc-deep, #246c66);
  background: rgba(16, 209, 192, 0.10);
}

.cms-article .cms-anchor-link:focus-visible {
  outline: 2px solid var(--jvmc1, #10d1c0);
  outline-offset: 2px;
}

/* Tooltip "Copier le lien" / "Lien copié" en pseudo-element */
.cms-article .cms-anchor-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: var(--darkBlue, #333347);
  color: var(--white1, #fff);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.cms-article .cms-anchor-link:hover::after,
.cms-article .cms-anchor-link:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cms-article .cms-anchor-link.is-copied::after {
  background: var(--jvmc-deep, #246c66);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile/tactile : pas de hover, on masque entièrement la feature */
@media (max-width: 1024px), (hover: none) {
  .cms-article .cms-anchor-link {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms-article .cms-anchor-link,
  .cms-article .cms-anchor-link::after {
    transition: opacity 0.1s linear, background 0.1s linear, color 0.1s linear;
    transform: translateX(-50%) translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CMS « En savoir plus » — hub de ressources (cartes par cluster)
   Scopé .esp-hub. Sélecteurs chaînés .esp-hub .X (0,2,0) pour battre les
   règles .cms-article ... (0,1,1) du thème sans !important.
   Grid responsive sans media query (auto-fill + minmax). GPU-only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le hub spanne toute la largeur même quand .cms-article passe en grid
   sidebar à ≥1200px (sinon colonne 240px vide + contenu décalé à droite) */
.cms-article > .esp-hub {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin-inline: auto;
}

.esp-hub .esp-hub__eyebrow {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jvmc-deep, #246c66);
}
.esp-hub .esp-hub__title {
  margin: 0 0 1rem;
  padding: 0;
  border: none;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--darkBlue, #333347);
  text-wrap: balance;
}
.esp-hub .esp-hub__lede {
  margin: 0 0 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black2, #555);
  max-width: 62ch;
}

.esp-hub .esp-cluster {
  margin: 0 0 2.75rem;
}
.esp-hub .esp-cluster__title {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--darkBlue, #333347);
}
.esp-hub .esp-cluster__num {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--jvmc-deep, #246c66);
  font-variant-numeric: tabular-nums;
}

.esp-hub .esp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.85rem;
}
.esp-hub .esp-grid li {
  margin: 0;
  padding: 0;
}
.esp-hub .esp-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--white1, #fff);
  border: 1px solid rgba(36, 108, 102, 0.16);
  border-radius: 14px;
  text-decoration: none;
  color: var(--darkBlue, #333347);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.2s ease, color 0.2s ease;
}
.esp-hub .esp-card__txt {
  flex: 1;
}
.esp-hub .esp-card__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--jvmc-deep, #246c66);
  transition: transform 0.25s ease;
}
.esp-hub .esp-card:hover,
.esp-hub .esp-card:focus-visible {
  border-color: rgba(36, 108, 102, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
  color: var(--jvmc-deep, #246c66);
  text-decoration: none;
}
.esp-hub .esp-card:hover .esp-card__arrow,
.esp-hub .esp-card:focus-visible .esp-card__arrow {
  transform: translateX(4px);
}
.esp-hub .esp-card:focus-visible {
  outline: 2px solid var(--jvmc1, #10d1c0);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .esp-hub .esp-card,
  .esp-hub .esp-card__arrow {
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .esp-hub .esp-card:hover,
  .esp-hub .esp-card:focus-visible {
    transform: none;
  }
  .esp-hub .esp-card:hover .esp-card__arrow,
  .esp-hub .esp-card:focus-visible .esp-card__arrow {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CMS « En savoir + » — hub guides compléments capillaires.
   Balisage SÉMANTIQUE : <h1> + <p> natifs (stylés par .cms-article comme
   toutes les autres pages CMS) + <ul class="jvmc-guides"> de <li><a>.
   Palette ÉDITORIALE : --jvmc-deep au repos, --jvmc1 au hover (= .cms-article a).
   Icônes en mask-image CSS (zéro SVG dans le contenu CMS), classe par <li>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset du style liste .cms-article + passage en grille */
.cms-article ul.jvmc-guides {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 0.85rem;
}
/* Sans sommaire, .cms-article passe en grille 240px|1fr à ≥1200px :
   on span les 2 colonnes pour rester centré pleine largeur. Le header
   (h1 + p natifs, sans classe) doit suivre le même conteneur 1100px
   sinon il reste coincé dans la colonne 2 décalée → header désaligné
   de la grille. Scopé via :has() pour ne toucher QUE la page hub. */
.cms-article > ul.jvmc-guides,
.cms-article:has(> ul.jvmc-guides) > h1,
.cms-article:has(> ul.jvmc-guides) > p {
  grid-column: 1 / -1;
  max-width: 1100px;
  margin-inline: auto;
}
.cms-article ul.jvmc-guides > li {
  margin: 0;
  padding: 0;
}
.cms-article ul.jvmc-guides > li::marker {
  content: none;
}

/* La carte = le <a> (tout cliquable, sémantique) */
.cms-article ul.jvmc-guides > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.1rem 3rem 1.1rem 1.25rem;
  background: var(--white1, #fff);
  border: 1px solid rgba(36, 108, 102, 0.16);
  border-radius: 14px;
  text-decoration: none;
  color: var(--darkBlue, #484c68);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.2s ease, color 0.2s ease;
}
/* Pastille icône (::before du <a>) — couleur éditoriale --jvmc-deep */
.cms-article ul.jvmc-guides > li > a::before {
  content: "";
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: rgba(36, 108, 102, 0.1);
  transition: background-color 0.25s ease;
}
/* Glyphe de l'icône (::after positionné sur la pastille via une 2e couche) :
   on superpose le glyphe en absolute dans la pastille. */
.cms-article ul.jvmc-guides > li > a > span.ic {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cms-article ul.jvmc-guides > li > a > span.ic::before {
  content: "";
  width: 19px;
  height: 19px;
  background-color: var(--jvmc-deep, #246c66);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.25s ease;
}
/* Flèche (::after du <a>) */
.cms-article ul.jvmc-guides > li > a::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: var(--jvmc-deep, #246c66);
  transition: background-color 0.25s ease, transform 0.25s ease;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI1IiB5MT0iMTIiIHgyPSIxOSIgeTI9IjEyIi8+PHBvbHlsaW5lIHBvaW50cz0iMTIgNSAxOSAxMiAxMiAxOSIvPjwvc3ZnPg==") center/contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxsaW5lIHgxPSI1IiB5MT0iMTIiIHgyPSIxOSIgeTI9IjEyIi8+PHBvbHlsaW5lIHBvaW50cz0iMTIgNSAxOSAxMiAxMiAxOSIvPjwvc3ZnPg==") center/contain no-repeat;
}
/* Hover : accents passent en --jvmc1 vif (= .cms-article a) */
.cms-article ul.jvmc-guides > li > a:hover,
.cms-article ul.jvmc-guides > li > a:focus-visible {
  border-color: rgba(16, 209, 192, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
  color: var(--jvmc-deep, #246c66);
  text-decoration: none;
}
.cms-article ul.jvmc-guides > li > a:hover::before,
.cms-article ul.jvmc-guides > li > a:focus-visible::before {
  background-color: var(--jvmc-deep, #246c66);
}
.cms-article ul.jvmc-guides > li > a:hover > span.ic::before,
.cms-article ul.jvmc-guides > li > a:focus-visible > span.ic::before {
  background-color: #fff;
}
.cms-article ul.jvmc-guides > li > a:hover::after,
.cms-article ul.jvmc-guides > li > a:focus-visible::after {
  background-color: var(--jvmc1, #10d1c0);
  transform: translateY(-50%) translateX(4px);
}
.cms-article ul.jvmc-guides > li > a:focus-visible {
  outline: 2px solid var(--jvmc1, #10d1c0);
  outline-offset: 2px;
}
.cms-article ul.jvmc-guides > li.i--help > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDMiLz48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyLjAxIiB5Mj0iMTciLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNOS4wOSA5YTMgMyAwIDAgMSA1LjgzIDFjMCAyLTMgMy0zIDMiLz48bGluZSB4MT0iMTIiIHkxPSIxNyIgeDI9IjEyLjAxIiB5Mj0iMTciLz48L3N2Zz4=")}
.cms-article ul.jvmc-guides > li.i--pin > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDE3djUiLz48cGF0aCBkPSJNOSAxMC43NmEyIDIgMCAwIDEtMS4xMSAxLjc5bC0xLjc4LjlBMiAyIDAgMCAwIDUgMTUuMjRWMTZhMSAxIDAgMCAwIDEgMWgxMmExIDEgMCAwIDAgMS0xdi0uNzZhMiAyIDAgMCAwLTEuMTEtMS43OWwtMS43OC0uOUEyIDIgMCAwIDEgMTUgMTAuNzZWN2ExIDEgMCAwIDEgMS0xIDIgMiAwIDAgMCAwLTRIOGEyIDIgMCAwIDAgMCA0IDEgMSAwIDAgMSAxIDF6Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDE3djUiLz48cGF0aCBkPSJNOSAxMC43NmEyIDIgMCAwIDEtMS4xMSAxLjc5bC0xLjc4LjlBMiAyIDAgMCAwIDUgMTUuMjRWMTZhMSAxIDAgMCAwIDEgMWgxMmExIDEgMCAwIDAgMS0xdi0uNzZhMiAyIDAgMCAwLTEuMTEtMS43OWwtMS43OC0uOUEyIDIgMCAwIDEgMTUgMTAuNzZWN2ExIDEgMCAwIDEgMS0xIDIgMiAwIDAgMCAwLTRIOGEyIDIgMCAwIDAgMCA0IDEgMSAwIDAgMSAxIDF6Ii8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--palette > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTMuNSIgY3k9IjYuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjEwLjUiIHI9Ii41IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjcuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iNi41IiBjeT0iMTIuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTEyIDJDNi41IDIgMiA2LjUgMiAxMnM0LjUgMTAgMTAgMTBjLjkyNiAwIDEuNjQ4LS43NDYgMS42NDgtMS42ODggMC0uNDM3LS4xOC0uODM1LS40MzctMS4xMjUtLjI5LS4yODktLjQzOC0uNjUyLS40MzgtMS4xMjVhMS42NCAxLjY0IDAgMCAxIDEuNjY4LTEuNjY4aDEuOTk2YzMuMDUxIDAgNS41NTUtMi41MDMgNS41NTUtNS41NTRDMjEuOTY1IDYuMDEyIDE3LjQ2MSAyIDEyIDJ6Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTMuNSIgY3k9IjYuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iMTcuNSIgY3k9IjEwLjUiIHI9Ii41IiBmaWxsPSJibGFjayIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjcuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PGNpcmNsZSBjeD0iNi41IiBjeT0iMTIuNSIgcj0iLjUiIGZpbGw9ImJsYWNrIi8+PHBhdGggZD0iTTEyIDJDNi41IDIgMiA2LjUgMiAxMnM0LjUgMTAgMTAgMTBjLjkyNiAwIDEuNjQ4LS43NDYgMS42NDgtMS42ODggMC0uNDM3LS4xOC0uODM1LS40MzctMS4xMjUtLjI5LS4yODktLjQzOC0uNjUyLS40MzgtMS4xMjVhMS42NCAxLjY0IDAgMCAxIDEuNjY4LTEuNjY4aDEuOTk2YzMuMDUxIDAgNS41NTUtMi41MDMgNS41NTUtNS41NTRDMjEuOTY1IDYuMDEyIDE3LjQ2MSAyIDEyIDJ6Ii8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--wave > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIgMTJjLjYtMS41IDEuNS0zIDMtM3MyLjQgMS41IDMgMyAxLjUgMyAzIDMgMi40LTEuNSAzLTMgMS41LTMgMy0zIDIuNCAxLjUgMyAzIi8+PHBhdGggZD0iTTIgMTdjLjYtMS41IDEuNS0zIDMtM3MyLjQgMS41IDMgMyAxLjUgMyAzIDMgMi40LTEuNSAzLTMgMS41LTMgMy0zIDIuNCAxLjUgMyAzIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIgMTJjLjYtMS41IDEuNS0zIDMtM3MyLjQgMS41IDMgMyAxLjUgMyAzIDMgMi40LTEuNSAzLTMgMS41LTMgMy0zIDIuNCAxLjUgMyAzIi8+PHBhdGggZD0iTTIgMTdjLjYtMS41IDEuNS0zIDMtM3MyLjQgMS41IDMgMyAxLjUgMyAzIDMgMi40LTEuNSAzLTMgMS41LTMgMy0zIDIuNCAxLjUgMyAzIi8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--clock > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWxpbmUgcG9pbnRzPSIxMiA2IDEyIDEyIDE2IDE0Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWxpbmUgcG9pbnRzPSIxMiA2IDEyIDEyIDE2IDE0Ii8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--sparkle > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkuOTM3IDE1LjVBMiAyIDAgMCAwIDguNSAxNC4wNjNsLTYuMTM1LTEuNTgyYS41LjUgMCAwIDEgMC0uOTYyTDguNSA5LjkzNkEyIDIgMCAwIDAgOS45MzcgOC41bDEuNTgyLTYuMTM1YS41LjUgMCAwIDEgLjk2MyAwTDE0LjA2MyA4LjVBMiAyIDAgMCAwIDE1LjUgOS45MzdsNi4xMzUgMS41ODFhLjUuNSAwIDAgMSAwIC45NjRMMTUuNSAxNC4wNjNhMiAyIDAgMCAwLTEuNDM3IDEuNDM3bC0xLjU4MiA2LjEzNWEuNS41IDAgMCAxLS45NjMgMHoiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkuOTM3IDE1LjVBMiAyIDAgMCAwIDguNSAxNC4wNjNsLTYuMTM1LTEuNTgyYS41LjUgMCAwIDEgMC0uOTYyTDguNSA5LjkzNkEyIDIgMCAwIDAgOS45MzcgOC41bDEuNTgyLTYuMTM1YS41LjUgMCAwIDEgLjk2MyAwTDE0LjA2MyA4LjVBMiAyIDAgMCAwIDE1LjUgOS45MzdsNi4xMzUgMS41ODFhLjUuNSAwIDAgMSAwIC45NjRMMTUuNSAxNC4wNjNhMiAyIDAgMCAwLTEuNDM3IDEuNDM3bC0xLjU4MiA2LjEzNWEuNS41IDAgMCAxLS45NjMgMHoiLz48L3N2Zz4=")}
.cms-article ul.jvmc-guides > li.i--layers > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTEyLjgzIDIuMThhMiAyIDAgMCAwLTEuNjYgMEwyLjYgNi4wOGExIDEgMCAwIDAgMCAxLjgzbDguNTggMy45MWEyIDIgMCAwIDAgMS42NiAwbDguNTgtMy45YTEgMSAwIDAgMCAwLTEuODNaIi8+PHBhdGggZD0ibTIyIDE3LjY1LTkuMTcgNC4xNmEyIDIgMCAwIDEtMS42NiAwTDIgMTcuNjUiLz48cGF0aCBkPSJtMjIgMTIuNjUtOS4xNyA0LjE2YTIgMiAwIDAgMS0xLjY2IDBMMiAxMi42NSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0ibTEyLjgzIDIuMThhMiAyIDAgMCAwLTEuNjYgMEwyLjYgNi4wOGExIDEgMCAwIDAgMCAxLjgzbDguNTggMy45MWEyIDIgMCAwIDAgMS42NiAwbDguNTgtMy45YTEgMSAwIDAgMCAwLTEuODNaIi8+PHBhdGggZD0ibTIyIDE3LjY1LTkuMTcgNC4xNmEyIDIgMCAwIDEtMS42NiAwTDIgMTcuNjUiLz48cGF0aCBkPSJtMjIgMTIuNjUtOS4xNyA0LjE2YTIgMiAwIDAgMS0xLjY2IDBMMiAxMi42NSIvPjwvc3ZnPg==")}
.cms-article ul.jvmc-guides > li.i--scan > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgN1Y1YTIgMiAwIDAgMSAyLTJoMiIvPjxwYXRoIGQ9Ik0xNyAzaDJhMiAyIDAgMCAxIDIgMnYyIi8+PHBhdGggZD0iTTIxIDE3djJhMiAyIDAgMCAxLTIgMmgtMiIvPjxwYXRoIGQ9Ik03IDIxSDVhMiAyIDAgMCAxLTItMnYtMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxMiIgeTI9IjEyIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgN1Y1YTIgMiAwIDAgMSAyLTJoMiIvPjxwYXRoIGQ9Ik0xNyAzaDJhMiAyIDAgMCAxIDIgMnYyIi8+PHBhdGggZD0iTTIxIDE3djJhMiAyIDAgMCAxLTIgMmgtMiIvPjxwYXRoIGQ9Ik03IDIxSDVhMiAyIDAgMCAxLTItMnYtMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxMiIgeTI9IjEyIi8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--grid > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjciIGhlaWdodD0iNyIgcng9IjEiLz48cmVjdCB4PSIxNCIgeT0iMyIgd2lkdGg9IjciIGhlaWdodD0iNyIgcng9IjEiLz48cmVjdCB4PSIxNCIgeT0iMTQiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIi8+PHJlY3QgeD0iMyIgeT0iMTQiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjciIGhlaWdodD0iNyIgcng9IjEiLz48cmVjdCB4PSIxNCIgeT0iMyIgd2lkdGg9IjciIGhlaWdodD0iNyIgcng9IjEiLz48cmVjdCB4PSIxNCIgeT0iMTQiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIi8+PHJlY3QgeD0iMyIgeT0iMTQiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIi8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--ruler > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxLjMgMTUuM2EyLjQgMi40IDAgMCAxIDAgMy40bC0yLjYgMi42YTIuNCAyLjQgMCAwIDEtMy40IDBMMi43IDguN2EyLjQxIDIuNDEgMCAwIDEgMC0zLjRsMi42LTIuNmEyLjQxIDIuNDEgMCAwIDEgMy40IDBaIi8+PHBhdGggZD0ibTE0LjUgMTIuNSAyLTIiLz48cGF0aCBkPSJtMTEuNSA5LjUgMi0yIi8+PHBhdGggZD0ibTguNSA2LjUgMi0yIi8+PHBhdGggZD0ibTE3LjUgMTUuNSAyLTIiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIxLjMgMTUuM2EyLjQgMi40IDAgMCAxIDAgMy40bC0yLjYgMi42YTIuNCAyLjQgMCAwIDEtMy40IDBMMi43IDguN2EyLjQxIDIuNDEgMCAwIDEgMC0zLjRsMi42LTIuNmEyLjQxIDIuNDEgMCAwIDEgMy40IDBaIi8+PHBhdGggZD0ibTE0LjUgMTIuNSAyLTIiLz48cGF0aCBkPSJtMTEuNSA5LjUgMi0yIi8+PHBhdGggZD0ibTguNSA2LjUgMi0yIi8+PHBhdGggZD0ibTE3LjUgMTUuNSAyLTIiLz48L3N2Zz4=")}
.cms-article ul.jvmc-guides > li.i--refresh > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMTJhOSA5IDAgMCAxIDktOSA5Ljc1IDkuNzUgMCAwIDEgNi43NCAyLjc0TDIxIDgiLz48cGF0aCBkPSJNMjEgM3Y1aC01Ii8+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDAgMS05IDkgOS43NSA5Ljc1IDAgMCAxLTYuNzQtMi43NEwzIDE2Ii8+PHBhdGggZD0iTTggMTZIM3Y1Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgMTJhOSA5IDAgMCAxIDktOSA5Ljc1IDkuNzUgMCAwIDEgNi43NCAyLjc0TDIxIDgiLz48cGF0aCBkPSJNMjEgM3Y1aC01Ii8+PHBhdGggZD0iTTIxIDEyYTkgOSAwIDAgMS05IDkgOS43NSA5Ljc1IDAgMCAxLTYuNzQtMi43NEwzIDE2Ii8+PHBhdGggZD0iTTggMTZIM3Y1Ii8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--star > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIxMiAyIDE1LjA5IDguMjYgMjIgOS4yNyAxNyAxNC4xNCAxOC4xOCAyMS4wMiAxMiAxNy43NyA1LjgyIDIxLjAyIDcgMTQuMTQgMiA5LjI3IDguOTEgOC4yNiAxMiAyIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIxMiAyIDE1LjA5IDguMjYgMjIgOS4yNyAxNyAxNC4xNCAxOC4xOCAyMS4wMiAxMiAxNy43NyA1LjgyIDIxLjAyIDcgMTQuMTQgMiA5LjI3IDguOTEgOC4yNiAxMiAyIi8+PC9zdmc+")}
.cms-article ul.jvmc-guides > li.i--compass > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWdvbiBwb2ludHM9IjE2LjI0IDcuNzYgMTQuMTIgMTQuMTIgNy43NiAxNi4yNCA5Ljg4IDkuODggMTYuMjQgNy43NiIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWdvbiBwb2ludHM9IjE2LjI0IDcuNzYgMTQuMTIgMTQuMTIgNy43NiAxNi4yNCA5Ljg4IDkuODggMTYuMjQgNy43NiIvPjwvc3ZnPg==")}
.cms-article ul.jvmc-guides > li.i--feather > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyLjY3IDE5YTIgMiAwIDAgMCAxLjQxNi0uNTg4bDYuMTU0LTYuMTcyYTYgNiAwIDAgMC04LjQ5LTguNDlMNS41ODYgOS45MTRBMiAyIDAgMCAwIDUgMTEuMzI4VjE4YTEgMSAwIDAgMCAxIDF6Ii8+PHBhdGggZD0iTTE2IDggMiAyMiIvPjxwYXRoIGQ9Ik0xNy41IDE1SDkiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyLjY3IDE5YTIgMiAwIDAgMCAxLjQxNi0uNTg4bDYuMTU0LTYuMTcyYTYgNiAwIDAgMC04LjQ5LTguNDlMNS41ODYgOS45MTRBMiAyIDAgMCAwIDUgMTEuMzI4VjE4YTEgMSAwIDAgMCAxIDF6Ii8+PHBhdGggZD0iTTE2IDggMiAyMiIvPjxwYXRoIGQ9Ik0xNy41IDE1SDkiLz48L3N2Zz4=")}
.cms-article ul.jvmc-guides > li.i--list > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjgiIHgyPSIyMSIgeTE9IjYiIHkyPSI2Ii8+PGxpbmUgeDE9IjgiIHgyPSIyMSIgeTE9IjEyIiB5Mj0iMTIiLz48bGluZSB4MT0iOCIgeDI9IjIxIiB5MT0iMTgiIHkyPSIxOCIvPjxsaW5lIHgxPSIzIiB4Mj0iMy4wMSIgeTE9IjYiIHkyPSI2Ii8+PGxpbmUgeDE9IjMiIHgyPSIzLjAxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMy4wMSIgeTE9IjE4IiB5Mj0iMTgiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjgiIHgyPSIyMSIgeTE9IjYiIHkyPSI2Ii8+PGxpbmUgeDE9IjgiIHgyPSIyMSIgeTE9IjEyIiB5Mj0iMTIiLz48bGluZSB4MT0iOCIgeDI9IjIxIiB5MT0iMTgiIHkyPSIxOCIvPjxsaW5lIHgxPSIzIiB4Mj0iMy4wMSIgeTE9IjYiIHkyPSI2Ii8+PGxpbmUgeDE9IjMiIHgyPSIzLjAxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMy4wMSIgeTE9IjE4IiB5Mj0iMTgiLz48L3N2Zz4=")}
.cms-article ul.jvmc-guides > li.i--shield > a > span.ic::before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDEzYzAgNS0zLjUgNy41LTcuNjYgOC45NWExIDEgMCAwIDEtLjY3LS4wMUM3LjUgMjAuNSA0IDE4IDQgMTNWNmExIDEgMCAwIDEgMS0xYzIgMCA0LjUtMS4yIDYuMjQtMi43MmExLjE3IDEuMTcgMCAwIDEgMS41MiAwQzE0LjUxIDMuODEgMTcgNSAxOSA1YTEgMSAwIDAgMSAxIDF6Ii8+PHBhdGggZD0ibTkgMTIgMiAyIDQtNCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDEzYzAgNS0zLjUgNy41LTcuNjYgOC45NWExIDEgMCAwIDEtLjY3LS4wMUM3LjUgMjAuNSA0IDE4IDQgMTNWNmExIDEgMCAwIDEgMS0xYzIgMCA0LjUtMS4yIDYuMjQtMi43MmExLjE3IDEuMTcgMCAwIDEgMS41MiAwQzE0LjUxIDMuODEgMTcgNSAxOSA1YTEgMSAwIDAgMSAxIDF6Ii8+PHBhdGggZD0ibTkgMTIgMiAyIDQtNCIvPjwvc3ZnPg==")}
@media (prefers-reduced-motion: reduce) {
  .cms-article ul.jvmc-guides > li > a,
  .cms-article ul.jvmc-guides > li > a::before,
  .cms-article ul.jvmc-guides > li > a::after,
  .cms-article ul.jvmc-guides > li > a > span.ic::before {
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  .cms-article ul.jvmc-guides > li > a:hover,
  .cms-article ul.jvmc-guides > li > a:focus-visible {
    transform: none;
  }
  .cms-article ul.jvmc-guides > li > a:hover::after,
  .cms-article ul.jvmc-guides > li > a:focus-visible::after {
    transform: translateY(-50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGAMENU — Carte "Conseils d'entretien" (2 liens guides : naturels / synthé)
   Bloc HTML statique collé dans ets_mm_block (textarea brut → SVG inline OK).
   Chaque demi-carte = un <a> unique englobant (zéro souci de zone morte).
   Palette éditoriale : --jvmc-deep au repos, --jvmc1 au hover.
   ═══════════════════════════════════════════════════════════════════════════ */
.mm-guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
}
/* .mm-guides chaîné → spécificité (0,2,0) pour battre le wildcard
   .ets_mm_block * { font-size } généré dans dynamic.css du module. */
.mm-guides .mm-guides__head {
  grid-column: 1 / -1;
  margin: 0 0 0.25rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jvmc-deep, #246c66);
}
.mm-guide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 2.6rem 1.05rem 1.1rem;
  background: var(--white1, #fff);
  border: 1px solid rgba(36, 108, 102, 0.16);
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.2s ease;
}
.mm-guide__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(36, 108, 102, 0.1);
  color: var(--jvmc-deep, #246c66);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mm-guide__icon svg {
  width: 20px;
  height: 20px;
}
.mm-guide__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mm-guides .mm-guide__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--darkBlue, #484c68);
  transition: color 0.2s ease;
}
.mm-guides .mm-guide__text {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--black2, #555);
}
.mm-guide__arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--jvmc-deep, #246c66);
  transition: color 0.25s ease, transform 0.25s ease;
}
.mm-guide:hover,
.mm-guide:focus-visible {
  border-color: rgba(16, 209, 192, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
  text-decoration: none;
}
.mm-guide:hover .mm-guide__title,
.mm-guide:focus-visible .mm-guide__title {
  color: var(--jvmc-deep, #246c66);
}
.mm-guide:hover .mm-guide__icon,
.mm-guide:focus-visible .mm-guide__icon {
  background: var(--jvmc-deep, #246c66);
  color: #fff;
}
.mm-guide:hover .mm-guide__arrow,
.mm-guide:focus-visible .mm-guide__arrow {
  color: var(--jvmc1, #10d1c0);
  transform: translateY(-50%) translateX(3px);
}
.mm-guide:focus-visible {
  outline: 2px solid var(--jvmc1, #10d1c0);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mm-guide,
  .mm-guide__icon,
  .mm-guide__arrow,
  .mm-guide__title {
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  }
  .mm-guide:hover,
  .mm-guide:focus-visible {
    transform: none;
  }
  .mm-guide:hover .mm-guide__arrow,
  .mm-guide:focus-visible .mm-guide__arrow {
    transform: translateY(-50%);
  }
}
.mm_svg_icon svg {
    width: 26px;
    height: 26px;
}
.mm_svg_icon {margin:0px;}
.mm_tab_title_text { vertical-align: middle;
}