/* ============================================================
   Puff66 — Habillage global du thème Classic (style puff66.fr)
   Emplacement : themes/classic/assets/css/custom.css
   Accent framboise : #C71F66 · fond blanc · texte presque noir
   v2 — grille "Nos catégories" responsive + boutons framboise exacts
   ============================================================ */

:root{
  --p66:#7C3AED;
  --p66-dark:#a81854;
  --p66-light:#fbe8f0;
  --p66-ink:#1a1a1a;
  --p66-head:#BF3A6C;   /* teinte en-tête adoucie (un cran moins saturé) */
}

/* Surcharge des tokens préexistants du thème (accent #D6006E -> framboise) */
:root{
  --p66-accent:#7C3AED !important;
  --p66-accent-bar:#7C3AED !important;
  --p66-price:#7C3AED !important;
}

/* ---------- Liens & accents ---------- */
a{ color:var(--p66-ink); }
a:hover{ color:var(--p66); }
.breadcrumb a,
.page-content a,
.product-line-grid a,
#footer a:hover,
.cms-id-4 a{ color:var(--p66); }

/* ---------- Boutons (sélecteurs forts pour gagner sur le thème) ---------- */
body .btn-primary,
body .btn-primary:focus,
body button.btn-primary,
body .product-add-to-cart .btn,
body .add-to-cart,
body #search_widget button[type="submit"],
body .cart-grid .checkout .btn,
body .block-newsletter .btn,
body .btn.button-primary{
  background-color:var(--p66) !important;
  border-color:var(--p66) !important;
  color:#fff !important;
}
body .btn-primary:hover,
body .product-add-to-cart .btn:hover,
body .add-to-cart:hover,
body .cart-grid .checkout .btn:hover{
  background-color:var(--p66-dark) !important;
  border-color:var(--p66-dark) !important;
}
body .btn-secondary,
body .btn-outline-primary,
body .btn-tertiary{
  color:var(--p66) !important;
  border-color:var(--p66) !important;
}
body .btn-secondary:hover,
body .btn-outline-primary:hover{ background-color:var(--p66) !important; color:#fff !important; }

/* ---------- Prix ---------- */
.price,
.product-price,
.current-price span,
.current-price .price,
.product-prices .current-price,
.featured-products .price,
.product-miniature .price{
  color:var(--p66) !important;
  font-weight:700;
}
.regular-price{ color:#999; }

/* ---------- Badges / flags ---------- */
.product-flag,
.product-flag.new,
.product-flag.on-sale,
.product-flag.discount,
.badge{
  background-color:var(--p66) !important;
  color:#fff !important;
}

/* ---------- Titres de sections ---------- */
.featured-products .h2,
h2.products-section-title,
.products-section-title,
.h1.title-block,
.page-header h1{
  color:var(--p66-ink);
  text-transform:none;
  letter-spacing:.2px;
}
h2.products-section-title::after,
.products-section-title::after{
  content:""; display:block; width:56px; height:3px;
  background:var(--p66); margin:10px auto 0;
}
.all-product-link,
.featured-products .all-product-link{ color:var(--p66) !important; font-weight:700; }

/* ---------- Menu principal : adoucir les majuscules ---------- */
#_desktop_top_menu .top-menu a,
.menu .top-menu a{ text-transform:none; letter-spacing:.2px; }
#_desktop_top_menu .top-menu a:hover{ color:var(--p66); }

/* ============================================================
   GRILLE "NOS CATÉGORIES" (bloc accueil .p66-cats)
   4 colonnes desktop / 3 tablette / 2 mobile
   ============================================================ */
.p66-cats{ max-width:1140px; margin:10px auto 40px; padding:0 14px; }
.p66-cats .p66-cats-title{
  text-align:center; color:var(--p66) !important; font-weight:800;
  font-size:28px; letter-spacing:.4px; text-transform:uppercase;
  margin:8px 0 26px; position:relative;
}
.p66-cats-title::after{
  content:""; display:block; width:64px; height:4px; border-radius:2px;
  background:var(--p66); margin:12px auto 0;
}
.p66-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
@media (max-width:992px){ .p66-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:600px){ .p66-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

.p66-cat{
  display:block; text-decoration:none; color:var(--p66-ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.p66-cat:hover{ transform:translateY(-4px); }
.p66-thumb{
  display:block; width:100%; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08); background:var(--p66-light);
}
.p66-thumb img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px;
}
.p66-cat:hover .p66-thumb{ box-shadow:0 8px 22px rgba(124,58,237,.28); }
.p66-label{
  display:block; text-align:center; font-weight:700;
  color:var(--p66-ink); margin-top:10px; font-size:14.5px;
  min-height:38px; line-height:1.25; text-transform:none;
}
/* catégorie sans image : dégradé framboise + nom blanc centré */
.p66-cat.p66-noimg .p66-thumb{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--p66),var(--p66-dark));
  padding:12px;
}
.p66-cat.p66-noimg .p66-thumb img{ display:none; }
.p66-cat.p66-noimg .p66-ph{
  color:#fff; font-weight:800; font-size:16px; text-align:center; line-height:1.2;
}
/* bouton CTA sous la grille */
.p66-cta{ text-align:center; margin-top:30px; }
.p66-cta-btn{
  display:inline-block; background:var(--p66); color:#fff !important;
  font-weight:700; padding:13px 30px; border-radius:999px;
  text-decoration:none; transition:background .2s ease;
}
.p66-cta-btn:hover{ background:var(--p66-dark); color:#fff !important; }

/* ============================================================
   PAGE CATÉGORIE : vignettes des sous-catégories
   ============================================================ */
.category-miniature img,
#subcategories .subcategory-image img,
.subcategory-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
}
/* masque proprement les placeholders "Aucune image disponible" */
.category-miniature img[src*="fr-default"],
.subcategory-image img[src*="fr-default"],
.product-thumbnail img[src*="fr-default"]{
  opacity:0;
}
/* ====== Vignettes sous-catégories : vraie image par gamme ====== */
.subcategory-image{ border-radius:14px; overflow:hidden; }
.subcategory-image a.img{
  display:block; position:relative; aspect-ratio:1/1;
  border-radius:14px; overflow:hidden; background:#fff;
  background-size:cover; background-position:center;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:box-shadow .2s ease, transform .2s ease;
}
.subcategory-image a.img:hover{ box-shadow:0 8px 22px rgba(124,58,237,.25); transform:translateY(-3px); }
.subcategory-image a.img img{ opacity:0 !important; width:100%; height:100%; object-fit:cover; }

.subcategory-image a[title="Météorite 100K"],
.subcategory-image a[title="Météorite 100K (vide)"]{ background-image:url('/img/p/1/9/19-home_default.jpg'); }
.subcategory-image a[title="Stellarc 50K"]{ background-image:url('/img/p/5/7/57-home_default.jpg'); }
.subcategory-image a[title="Shishasip 35K"]{ background-image:url('/img/p/6/6/66-home_default.jpg'); }
.subcategory-image a[title="Shisha Pro 39K"]{ background-image:url('/img/p/7/6/76-home_default.jpg'); }
.subcategory-image a[title="JPUFF 47K"]{ background-image:url('/img/p/9/0/90-home_default.jpg'); }
.subcategory-image a[title="Gorilla 43K"],
.subcategory-image a[title="Gorilla 43K (vide)"]{ background-image:url('/img/p/1/0/0/100-home_default.jpg'); }
.subcategory-image a[title="Z Pulse 42K"]{ background-image:url('/img/p/4/0/1/401-home_default.jpg'); }
.subcategory-image a[title="30K"]{ background-image:url('/img/p/1/3/5/135-home_default.jpg'); }
.subcategory-image a[title="28K"]{ background-image:url('/img/p/3/5/1/351-home_default.jpg'); }
.subcategory-image a[title="DOJO 15K"]{ background-image:url('/img/p/2/2/22-home_default.jpg'); }
.subcategory-image a[title="PUFF JNR"]{ background-image:url('/img/p/5/7/57-home_default.jpg'); }
.subcategory-image a[title="La Potion"],
.subcategory-image a[title="La Potion 10ml"]{ background-image:url('/img/p/1/8/18-home_default.jpg'); }
.subcategory-image a[title="JNR 10ml"]{ background-image:url('/img/p/1/6/9/169-home_default.jpg'); }
.subcategory-image a[title="Paradise 10ml"]{ background-image:url('/img/p/3/9/6/396-home_default.jpg'); }
.subcategory-image a[title="Tornadoliq"]{ background-image:url('/img/p/7/7-home_default.jpg'); }

/* ====== Pages catégories : titre propre, suppression du H1 redondant ====== */
body.category-id-10 .block-category,
body.category-id-4  .block-category,
body.category-id-20 .block-category,
body.category-id-24 .block-category{ display:none !important; }

body.category-id-10 .subcategory-heading,
body.category-id-4  .subcategory-heading,
body.category-id-20 .subcategory-heading,
body.category-id-24 .subcategory-heading{
  font-size:0 !important; color:transparent; margin-bottom:18px;
}
body.category-id-10 .subcategory-heading::after,
body.category-id-4  .subcategory-heading::after,
body.category-id-20 .subcategory-heading::after,
body.category-id-24 .subcategory-heading::after{
  display:block; font-weight:800; color:var(--p66);
  font-size:1.7rem; letter-spacing:.3px;
}
body.category-id-10 .subcategory-heading::after{ content:"Les puffs JNR"; }
body.category-id-4  .subcategory-heading::after{ content:"Les cartouches"; }
body.category-id-20 .subcategory-heading::after{ content:"Les e-liquides"; }
body.category-id-24 .subcategory-heading::after{ content:"Les puffs"; }

/* ---------- Filtres à facettes : accent ---------- */
#search_filters .facet-title,
.facet .facet-title{ color:var(--p66-ink); }
#search_filters .ui-slider .ui-slider-range{ background:var(--p66); }
.faceted-slider .ui-slider-range,
.ui-slider .ui-slider-handle{ background:var(--p66) !important; border-color:var(--p66) !important; }

/* ---------- Footer ---------- */
.footer-container{ background:#fafafa; }
.footer-container li a:hover{ color:var(--p66); }

/* Footer mobile (≤768px) : texte clair lisible sur fond sombre, homogène sur les 4 blocs */
@media (max-width:768px){
  .footer-container .links ul{ background:transparent !important; }
  /* tout le texte du bloc footer sombre passe en clair (newsletter exclue : hors .footer-container) */
  .footer-container,
  .footer-container .title a,
  .footer-container li a,
  .footer-container .links ul > li a,
  .footer-container .block-contact,
  .footer-container .block-contact a,
  .footer-container .text-sm-center,
  .footer-container .text-sm-center *{ color:rgba(255,255,255,.88) !important; }
  /* titres de colonnes bien blancs */
  .footer-container .h3,
  .footer-container .title,
  .footer-container .links .title{ color:#ffffff !important; }
  /* liens : survol framboise */
  .footer-container li a:hover,
  .footer-container .links ul > li a:hover{ color:var(--p66) !important; }
  /* chevron d'ouverture/fermeture de l'accordéon */
  .footer-container .title .material-icons,
  .footer-container .title .float-xs-right,
  .footer-container .title [class*="icon"],
  .footer-container .navbar-toggler{ color:#ffffff !important; }
}

/* ---------- Général ---------- */
body{ color:var(--p66-ink); background:var(--wash); }

/* ============================================================
   ACCUEIL PREMIUM (façon gfc-provap) — héro, bannières de gammes
   ============================================================ */

/* ---- Héro / carrousel ---- */
#carousel.carousel{
  max-width:1200px; margin:20px auto 10px; border-radius:22px;
  overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.13);
}
#carousel figure{ position:relative; margin:0; }
#carousel .carousel-item img{ width:100%; height:auto; display:block; }
#carousel .caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:30px 36px; text-align:left;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0));
}
#carousel .caption h2,
#carousel .caption .display-1{
  color:#fff !important; font-weight:800; font-size:2.3rem;
  text-transform:none !important; margin:0 0 16px; letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
#carousel .caption .caption-description,
#carousel .caption p{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
#carousel .caption::after{
  content:"Découvrir →"; display:inline-block; margin-top:2px;
  background:var(--p66); color:#fff; font-weight:700;
  padding:12px 28px; border-radius:999px; font-size:1rem;
  box-shadow:0 5px 16px rgba(124,58,237,.45);
}
#carousel .carousel-indicators li{ background:#fff; opacity:.55; }
#carousel .carousel-indicators li.active{ background:var(--p66); opacity:1; }

/* ---- Grille de bannières de gammes ---- */
.p66-gammes{ max-width:1200px; margin:34px auto 54px; padding:0 16px; }
.p66-gammes-title{
  text-align:center; color:var(--p66) !important; font-weight:800;
  font-size:1.95rem; text-transform:uppercase; letter-spacing:.6px; margin:6px 0 6px;
}
.p66-gammes-title::after{
  content:""; display:block; width:66px; height:4px; border-radius:2px;
  background:var(--p66); margin:12px auto 0;
}
.p66-gammes-sub{ text-align:center; color:#888; margin:14px 0 30px; font-size:1.02rem; }
.p66-gamme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px){ .p66-gamme-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:600px){ .p66-gamme-grid{ grid-template-columns:1fr; gap:18px; } }

.p66-gamme{
  position:relative; display:block; aspect-ratio:16/10;
  border-radius:18px; overflow:hidden; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.10); background:#f3f3f3;
  transition:transform .25s ease, box-shadow .25s ease;
}
.p66-gamme:hover{ transform:translateY(-6px); box-shadow:0 16px 36px rgba(124,58,237,.26); }
.p66-gamme-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .45s ease;
}
.p66-gamme:hover .p66-gamme-img{ transform:scale(1.08); }
.p66-gamme-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 18px 16px; color:#fff; font-weight:800; font-size:1.3rem;
  letter-spacing:.3px; text-shadow:0 2px 8px rgba(0,0,0,.55);
  background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0));
}
.p66-gamme-badge{
  position:absolute; top:13px; left:13px; z-index:3;
  background:var(--p66); color:#fff; font-weight:800; font-size:.72rem;
  letter-spacing:.7px; padding:5px 13px; border-radius:999px;
  box-shadow:0 3px 10px rgba(124,58,237,.45);
}

/* ---- Barre de recherche bien visible ---- */
#search_widget{ width:100%; max-width:440px; margin-left:auto; }
#search_widget form{ position:relative; }
#search_widget input[type="text"]{
  width:100%; border:2px solid #ececec; border-radius:999px !important;
  padding:12px 48px 12px 22px !important; font-size:1rem; background:#fafafa;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#search_widget input[type="text"]:focus{
  border-color:var(--p66); background:#fff; outline:none;
  box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
#search_widget button[type="submit"]{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  background:var(--p66) !important; border:0; border-radius:50% !important;
  width:40px; height:40px; padding:0; display:flex; align-items:center; justify-content:center;
}
#search_widget button[type="submit"] *{ color:#fff !important; }

/* ---- Masquer JNR 30K résiduel ---- */
.subcategory-image a[title="30K"]{ display:none !important; }

/* ---- Responsive héro ---- */
/* Héro mobile : carrousel contraint à la largeur de l'écran (anti-débordement) */
@media (max-width:768px){
  html, body{ overflow-x:hidden !important; }
  #carousel.carousel{ max-width:100% !important; width:auto !important; margin:12px 12px 8px !important; }
  #carousel .carousel-inner,
  #carousel .carousel-item,
  #carousel .carousel-item figure,
  #carousel .carousel-item img{ width:100% !important; max-width:100% !important; }
  #carousel .carousel-item{ position:relative !important; left:0 !important; right:0 !important; transform:none !important; float:none !important; }
  #carousel .carousel-item:not(.active){ display:none !important; }
}
@media (max-width:600px){
  #carousel.carousel{ border-radius:14px; margin:12px 12px 8px; }
  #carousel .caption{ padding:0 0 8px !important; text-align:center !important; background:linear-gradient(transparent, rgba(0,0,0,.40)) !important; }
  #carousel .caption h2, #carousel .caption .display-1, #carousel .caption p, #carousel .caption .caption-description{ display:none !important; }
  #carousel .caption::after{ padding:7px 18px; font-size:.82rem; }
  #search_widget{ max-width:100%; }
}

/* ============================================================
   EN-TÊTE FRAMBOISE façon puff66.fr + bandeaux réassurance
   ============================================================ */
/* --- Bandeaux réassurance (toutes pages, au-dessus du header) --- */
.header-banner{ display:block !important; margin:0 !important; padding:0 !important; max-width:none !important; }
.header-banner::before{
  content:"Vente strictement réservée aux adultes — +18 ans  ·  Produits contenant de la nicotine";
  display:block; width:100%; background:#1a1a1a; color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.68rem; letter-spacing:.2px; padding:4px 14px; line-height:1.3; box-sizing:border-box;
}
.header-banner::after{
  content:"Livraison offerte dès 30 €  —  Expédition en France";
  display:block; width:100%; background:var(--p66-head); color:#fff; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:.72rem; font-weight:500; letter-spacing:.2px; padding:4px 14px; line-height:1.3; box-sizing:border-box;
}

/* --- Header : bande utilitaire framboise + bande principale noire --- */
.header-nav{ background:var(--p66-head) !important; border:0 !important; }
.header-top{ background:#000 !important; border:0 !important; }
/* le menu et ses conteneurs ne doivent pas réintroduire de framboise sur le noir */
.header-top-right, #_desktop_top_menu, #_desktop_top_menu .top-menu,
.header-top .menu, .header-top #_desktop_top_menu > ul{ background:transparent !important; }
.header-nav{ padding-top:3px !important; padding-bottom:3px !important; }
.header-top{ padding-top:6px !important; padding-bottom:6px !important; }
.header-top .container, .header-nav .container{ padding-left:28px !important; padding-right:28px !important; }
.header-nav a, .header-nav span, .header-nav li,
.header-top a, #_desktop_top_menu .top-menu a,
#_desktop_user_info a, .user-info a,
.header-nav .material-icons, .header-top .material-icons{ color:#fff !important; }
#_desktop_top_menu .top-menu a:hover, .header-nav a:hover, .header-top a:hover{ color:rgba(255,255,255,.80) !important; }
#_desktop_top_menu .top-menu a{ text-transform:uppercase; letter-spacing:.3px; }

/* logo wordmark "Puff66" blanc (remplace l'image) */
#_desktop_logo img, #_mobile_logo img, .header-top .logo img{ display:none !important; }
#_desktop_logo a, #_mobile_logo a, #_mobile_logo, .header-top .logo a{ display:inline-block !important; text-decoration:none; line-height:1; }
#_mobile_logo{ min-width:96px; min-height:30px; vertical-align:middle; }
#_desktop_logo a::after, #_mobile_logo::after{
  content:"Puff66"; color:#fff; font-weight:800; font-size:30px; letter-spacing:-.5px; vertical-align:middle;
}
#_mobile_logo::after{ font-size:25px; }
/* Contactez-nous en blanc */
#contact-link a, #_desktop_contact_link a, #contact-link, #_desktop_contact_link{ color:#fff !important; }

/* --- Panier : supprimer le cyan --- */
.blockcart, .blockcart.cart-preview, .blockcart.active{ background:transparent !important; box-shadow:none !important; }
.blockcart a, .blockcart span, .blockcart .material-icons, .blockcart .shopping-cart{ color:#fff !important; }
.blockcart .cart-products-count{
  background:#fff !important; color:var(--p66) !important; font-weight:800;
  border-radius:999px; padding:0 7px; min-width:20px; display:inline-block; text-align:center;
}

/* --- Recherche blanche arrondie dans l'en-tête rose --- */
.header-top #search_widget input[type="text"]{
  background:#fff !important; border:2px solid #fff !important; border-radius:999px !important; color:#333 !important;
}
.header-top #search_widget button[type="submit"]{ background:var(--p66-dark) !important; }
.header-top #search_widget button[type="submit"] *{ color:#fff !important; }

/* --- Icône burger (sur l'en-tête) --- */
.menu-icon, .menu-icon *, #menu-icon, #menu-icon *{ color:#fff !important; }

/* ============================================================
   (8) MENU MOBILE ☰ — panneau blanc, aéré, lisible
   Tout est limité à #mobile_top_menu_wrapper (mobile only),
   donc aucun impact sur le méga-menu desktop.
   ============================================================ */
#mobile_top_menu_wrapper, #_mobile_top_menu, #_mobile_top_menu .top-menu,
.mobile-menu, #mobile_top_menu_wrapper .js-top-menu{
  background:#fff !important; box-shadow:0 10px 30px rgba(0,0,0,.12) !important;
}
/* entrées de 1er niveau : aérées, séparateurs discrets */
#mobile_top_menu_wrapper .top-menu > li{
  position:relative !important; border-bottom:1px solid #f1e6ec !important; background:#fff !important;
}
#mobile_top_menu_wrapper .top-menu > li:last-child{ border-bottom:0 !important; }
#mobile_top_menu_wrapper .top-menu li a{
  color:var(--p66-ink) !important; display:block !important;
  padding:15px 44px 15px 18px !important; font-weight:600 !important; font-size:1rem !important; line-height:1.25 !important;
}
#mobile_top_menu_wrapper .top-menu li a:hover,
#mobile_top_menu_wrapper .top-menu li a:active{ color:var(--p66) !important; }
/* chevrons ⌄ alignés à droite, même position partout */
#mobile_top_menu_wrapper .navbar-toggler.collapse-icons,
#mobile_top_menu_wrapper .top-menu > li > .navbar-toggler{
  position:absolute !important; top:0 !important; right:0 !important;
  width:48px !important; height:50px !important; margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--p66) !important; background:transparent !important;
}
#mobile_top_menu_wrapper .navbar-toggler.collapse-icons .material-icons{ color:var(--p66) !important; font-size:24px !important; }
/* sous-menus indentés clairs sous la catégorie */
#mobile_top_menu_wrapper .sub-menu,
#mobile_top_menu_wrapper .top-menu ul,
#mobile_top_menu_wrapper .collapse{
  background:#fbf4f8 !important; padding:4px 0 !important;
}
#mobile_top_menu_wrapper .sub-menu li,
#mobile_top_menu_wrapper .top-menu ul li{ border-bottom:1px solid #f3eaf0 !important; }
#mobile_top_menu_wrapper .sub-menu li:last-child,
#mobile_top_menu_wrapper .top-menu ul li:last-child{ border-bottom:0 !important; }
#mobile_top_menu_wrapper .sub-menu a,
#mobile_top_menu_wrapper .top-menu ul a{
  padding:12px 18px 12px 34px !important; font-weight:500 !important; font-size:.92rem !important; color:#444 !important;
}
#mobile_top_menu_wrapper .sub-menu a:hover{ color:var(--p66) !important; }

/* ============================================================
   EN-TÊTE — CORRECTIFS v3 (wordmark, hauteur, sous-menus, recherche)
   ============================================================ */
/* (1) Wordmark PUFF66 : entièrement visible, taille cohérente, centré */
#_desktop_logo, .header-top .logo{ overflow:visible !important; }
#_desktop_logo a::after, #_mobile_logo::after{
  font-size:26px !important; white-space:nowrap !important; display:inline-block !important; line-height:1.1 !important;
}
#_mobile_logo{ padding-left:6px !important; overflow:visible !important; white-space:nowrap !important; }
#_mobile_logo::after{ font-size:22px !important; }

/* (2) Hauteur d'en-tête resserrée */
.header-top{ padding-top:6px !important; padding-bottom:6px !important; }
.header-top .container > .row{ min-height:0 !important; }
.header-top #search_widget{ margin-top:4px !important; }
.header-top #search_widget input[type="text"]{ height:40px !important; padding:6px 18px !important; }
#_desktop_top_menu .top-menu > li > a{ padding-top:6px !important; padding-bottom:6px !important; }

/* (3) Sous-menus déroulants au survol — panneau blanc lisible */
#_desktop_top_menu .top-menu .sub-menu,
#_desktop_top_menu .top-menu li .sub-menu{
  background:#fff !important;
  width:auto !important; min-width:230px !important; max-width:320px !important;
  padding:8px 0 !important; top:100% !important;
  border-radius:0 0 14px 14px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.20) !important;
  z-index:1000 !important; border:0 !important;
}
#_desktop_top_menu .top-menu .sub-menu ul{ width:100% !important; padding:0 !important; margin:0 !important; }
#_desktop_top_menu .top-menu .sub-menu li{
  display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important;
}
/* texte foncé framboise (surcharge le blanc hérité du header) */
#_desktop_top_menu .top-menu .sub-menu a,
#_desktop_top_menu .top-menu .sub-menu li a{
  color:var(--p66-ink) !important; background:transparent !important;
  display:block !important; padding:9px 20px !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-weight:500 !important; font-size:.95rem !important; white-space:nowrap !important;
}
#_desktop_top_menu .top-menu .sub-menu a:hover,
#_desktop_top_menu .top-menu .sub-menu li a:hover{
  color:#fff !important; background:var(--p66) !important;
}

/* (4) Recherche : champ propre, pas de rectangle blanc parasite mobile */
.header-top #search_widget{ max-width:440px !important; }
.header-top #search_widget form{ background:transparent !important; box-shadow:none !important; }
@media (max-width:767px){
  #search_widget, .header-top #search_widget{ width:100% !important; max-width:100% !important; margin:6px 0 0 !important; padding:0 10px !important; }
  #search_widget input[type="text"]{ height:38px !important; }
}

/* (5) PLACEMENT DESKTOP — en-tête sur une seule ligne, wordmark aligné */
@media (min-width:768px){
  /* wordmark jamais coupé, aligné verticalement */
  #_desktop_logo, #_desktop_logo a{ overflow:visible !important; white-space:nowrap !important; }
  #_desktop_logo{ float:none !important; display:flex !important; align-items:center !important; min-width:140px !important; }
  #_desktop_logo a::after{ vertical-align:middle !important; }
  /* logo · menu · recherche sur une ligne */
  .header-top .container > .row{ align-items:center !important; }
  .header-top-right{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:14px !important; flex-wrap:nowrap !important; }
  .header-top-right #_desktop_top_menu{ margin:0 auto 0 0 !important; flex:1 1 auto !important; }
  #_desktop_top_menu .top-menu{ flex-wrap:nowrap !important; white-space:nowrap !important; justify-content:center !important; }
  #_desktop_top_menu .top-menu > li > a{ font-size:13px !important; letter-spacing:0 !important; padding-left:10px !important; padding-right:10px !important; }
  .header-top #search_widget{ margin:0 !important; flex:0 0 230px !important; max-width:230px !important; }
  .header-top #search_widget input[type="text"]{ height:42px !important; }
  #_desktop_logo a::after{ font-size:24px !important; }
}

/* (6) Sous-menus ancrés SOUS leur propre item (pas sous le logo) */
#_desktop_top_menu .top-menu{ position:relative !important; }
#_desktop_top_menu .top-menu > li{ position:relative !important; }
#_desktop_top_menu .top-menu > li > .sub-menu{ left:0 !important; right:auto !important; top:100% !important; }

/* ============================================================
   (7) MÉGA-MENU À IMAGES (desktop ≥768px) — style gfc-provap
   Cartes vignette + libellé par sous-catégorie. Images = image de
   catégorie /img/c/{id}.jpg (mêmes que l'accueil). Gris neutre sinon.
   Mobile : on garde la liste empilée classique (pas de panneau).
   ============================================================ */
@media (min-width:768px){
  /* Panneau blanc sous l'élément survolé */
  #_desktop_top_menu .top-menu > li > .sub-menu{
    width:500px !important; min-width:500px !important; max-width:500px !important;
    padding:18px !important; box-sizing:border-box !important;
    border-radius:0 0 16px 16px !important; box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
    transition:opacity .18s ease, visibility .18s ease !important; transition-delay:.28s !important; /* temporisation fermeture */
  }
  #_desktop_top_menu .top-menu > li:hover > .sub-menu{ transition-delay:0s !important; }
  /* Grille 4 colonnes */
  #_desktop_top_menu .top-menu > li > .sub-menu > ul{
    display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:16px 14px !important;
    width:100% !important; margin:0 !important; padding:0 !important;
  }
  #_desktop_top_menu .top-menu .sub-menu li.category{
    display:block !important; width:auto !important; padding:0 !important; margin:0 !important; float:none !important;
  }
  /* Carte = image carrée + libellé */
  #_desktop_top_menu .top-menu .sub-menu li.category > a{
    display:flex !important; flex-direction:column !important; align-items:center !important;
    text-align:center !important; padding:0 !important; gap:8px !important; background:transparent !important;
    color:var(--p66-ink) !important; font-size:.8rem !important; font-weight:700 !important;
    text-transform:none !important; letter-spacing:0 !important; white-space:normal !important; line-height:1.15 !important;
  }
  #_desktop_top_menu .top-menu .sub-menu li.category > a::before{
    content:"" !important; display:block !important; width:100% !important; aspect-ratio:1/1 !important; height:auto !important;
    border-radius:12px !important; background:#ededed 50% 50%/cover no-repeat !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10) !important; transition:transform .2s ease !important;
  }
  #_desktop_top_menu .top-menu .sub-menu li.category > a:hover{ color:var(--p66) !important; background:transparent !important; }
  #_desktop_top_menu .top-menu .sub-menu li.category > a:hover::before{ transform:translateY(-2px) scale(1.03) !important; }
  /* Images de catégorie (mêmes visuels que l'accueil) */
  #_desktop_top_menu #category-11 > a::before{ background-image:url('/img/c/11.jpg') !important; }
  #_desktop_top_menu #category-12 > a::before{ background-image:url('/img/c/12.jpg') !important; }
  #_desktop_top_menu #category-13 > a::before{ background-image:url('/img/c/13.jpg') !important; }
  #_desktop_top_menu #category-14 > a::before{ background-image:url('/img/c/14.jpg') !important; }
  #_desktop_top_menu #category-15 > a::before{ background-image:url('/img/c/15.jpg') !important; }
  #_desktop_top_menu #category-16 > a::before{ background-image:url('/img/c/16.jpg') !important; }
  #_desktop_top_menu #category-17 > a::before{ background-image:url('/img/c/17.jpg') !important; }
  #_desktop_top_menu #category-19 > a::before{ background-image:url('/img/c/19.jpg') !important; }
  /* CARTOUCHES : visuels des vrais produits cartouches (pas l'image puff) */
  #_desktop_top_menu #category-5  > a::before{ background-image:url('/img/p/3/2/32-large_default.jpg')  !important; }
  #_desktop_top_menu #category-6  > a::before{ background-image:url('/img/p/3/3/33-large_default.jpg')  !important; }
  #_desktop_top_menu #category-7  > a::before{ background-image:url('/img/p/3/4/34-large_default.jpg')  !important; }
  #_desktop_top_menu #category-8  > a::before{ background-image:url('/img/p/4/2/42-large_default.jpg')  !important; }
  #_desktop_top_menu #category-9  > a::before{ background-image:url('/img/p/2/1/6/216-large_default.jpg')  !important; }
  /* E-liquides 10ml sel de nicotine : visuel produit (pas d'image de catégorie) */
  #_desktop_top_menu #category-21 > a::before{ background-image:url('/img/p/1/8/18-large_default.jpg') !important; }
  #_desktop_top_menu #category-22 > a::before{ background-image:url('/img/p/1/6/9/169-large_default.jpg') !important; }
  #_desktop_top_menu #category-23 > a::before{ background-image:url('/img/p/7/7-large_default.jpg') !important; }
  #_desktop_top_menu #category-25 > a::before{ background-image:url('/img/p/3/9/6/396-large_default.jpg') !important; }
}

/* --- FIX HÉRO MOBILE : hauteur du carrousel = image (plus de vide) --- */
#carousel .carousel-inner, #carousel .carousel-item, #carousel .carousel-item figure{ height:auto !important; }
#carousel .carousel-item img{ width:100% !important; height:auto !important; display:block; }

/* ============================================================
   (10) MASQUER PARTOUT LES PRODUITS EN RUPTURE / INDISPONIBLES
   Cible le drapeau .product-flag.out_of_stock présent sur les
   vignettes : pages catégorie, recherche, mises en avant,
   produits associés/accessoires, carrousels, etc.
   ============================================================ */
.js-product:has(.product-flag.out_of_stock),
.products .product:has(.product-flag.out_of_stock),
li.product:has(.product-flag.out_of_stock),
.product-miniature:has(.product-flag.out_of_stock),
article.product-miniature:has(.product-flag.out_of_stock),
.product-accessories .product:has(.product-flag.out_of_stock),
.featured-products .product:has(.product-flag.out_of_stock){
  display:none !important;
}

/* ============================================================
   SECTIONS PRODUITS ACCUEIL — pleine largeur, 4 col, sans rupture
   ============================================================ */
/* Masquer "Nouveaux produits" (100% en rupture de stock) */
.featured-products.mt-3{ display:none !important; }
/* Exclure tout produit en rupture des mises en avant */
.featured-products .product-miniature:has(.product-flag.out_of_stock){ display:none !important; }

/* Pleine largeur centrée */
.featured-products{ max-width:1240px; margin:26px auto 48px !important; padding:0 18px; float:none; width:auto; }
.featured-products .products-section-title{ text-align:center; }

/* Grille 4 colonnes uniforme (override Bootstrap cols) */
.featured-products .products{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px; margin:0 !important; }
.featured-products .products > .product,
.featured-products .products > .js-product,
.featured-products .products > li{
  width:100% !important; max-width:none !important; flex:0 0 auto !important;
  padding:0 !important; margin:0 !important; float:none !important;
}
@media (max-width:1100px){ .featured-products .products{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .featured-products .products{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* Cartes cohérentes */
.featured-products .product-miniature{ width:100% !important; margin:0 !important; height:100%; }
.featured-products .thumbnail-container{ width:100%; margin:0; }
.featured-products .product-thumbnail img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:12px;
}
.featured-products .product-title{
  font-size:.86rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.3em; margin:12px 8px 8px; font-weight:600; text-align:center;
}
.featured-products .product-title a{ color:var(--p66-ink); }
.featured-products .product-price-and-shipping{ text-align:center; }
.featured-products .price{ color:var(--p66) !important; font-weight:800; font-size:1.06rem; }

/* Badges : Neuf discret, rupture grisée */
.featured-products .product-flag.new{
  background:#fff !important; color:var(--p66) !important; border:1px solid var(--p66);
  font-size:.64rem; font-weight:700; padding:3px 9px; letter-spacing:.4px;
}
.featured-products .product-flag.out_of_stock{ background:#9a9a9a !important; color:#fff !important; font-size:.64rem; }

/* Bouton ajouter au panier framboise (si présent) */
.featured-products .add-to-cart,
.featured-products .product-add-to-cart .btn{
  background:var(--p66) !important; border-color:var(--p66) !important; color:#fff !important;
}

/* ============================================================
   (9) PAGES CATÉGORIE — sous-catégories en GRILLE 2 COLONNES (mobile)
   Ne s'applique qu'à ≤767px ; le desktop garde sa grille actuelle.
   ============================================================ */
@media (max-width:767px){
  #subcategories .subcategories-list{
    display:grid !important; grid-template-columns:repeat(2,1fr) !important;
    gap:18px 12px !important; list-style:none !important; padding:0 !important; margin:0 !important;
  }
  #subcategories .subcategories-list > li{
    width:auto !important; max-width:none !important; min-width:0 !important;
    margin:0 !important; padding:0 !important; float:none !important; text-align:center !important;
  }
  #subcategories .subcategory-image{ margin:0 !important; }
  #subcategories .subcategory-image a.img{
    display:block !important; width:100% !important; height:auto !important; aspect-ratio:1/1 !important;
    border-radius:12px !important; background-size:cover !important; background-position:center !important;
    box-shadow:0 2px 8px rgba(0,0,0,.10) !important;
  }
  #subcategories .subcategory-image a.img img{ width:100% !important; height:100% !important; opacity:0 !important; }
  #subcategories h5{ margin:8px 0 0 !important; }
  #subcategories .subcategory-name{
    color:var(--p66) !important; font-weight:700 !important; font-size:.86rem !important;
    display:block !important; line-height:1.2 !important; text-align:center !important;
  }
}

/* ============================================================
   (11) RETIRER LES BADGES "NEUF" / "NOUVEAU" sur les produits
   ============================================================ */
.product-flag.new, .product-flag.online-only.new, span.product-flag.new{ display:none !important; }

/* ============================================================
   (12) ENCART D'EN-TÊTE DE CATÉGORIE (.p66-cathero)
   Structure dans la description catégorie (BO) : div.p66-cathero
   > table > td.p66-txt + td.p66-vis. Ici : finitions premium +
   responsive (empilé ≤768px). Réutilisable sur toutes catégories.
   ============================================================ */
/* L'encart .p66-cathero remplace l'image de couverture par défaut du thème */
#category .category-cover, .block-category .category-cover, .category-cover{ display:none !important; }
.p66-cathero{
  background:#ffffff !important;
  border:1px solid #efe2ea !important;
  border-radius:14px !important;
  box-shadow:0 6px 24px rgba(20,20,20,.06) !important;
  padding:34px 38px !important;
  margin:0 0 26px !important;
  overflow:visible !important;
}
.p66-cathero table{ width:100% !important; border-collapse:collapse !important; margin:0 !important; background:transparent !important; }
.p66-cathero td{ background:transparent !important; border:0 !important; }
.p66-cathero .p66-txt{ vertical-align:middle !important; padding-right:34px !important; }
.p66-cathero h2{
  color:#1f1f1f !important;
  font-size:1.7rem !important; font-weight:800 !important;
  letter-spacing:.4px !important; margin:0 0 6px !important; line-height:1.15 !important;
}
.p66-cathero h2 .p66-accent{ color:#7C3AED !important; font-weight:700 !important; }
.p66-cathero .p66-rule{
  display:block !important; width:46px !important; height:3px !important;
  background:#7C3AED !important; border-radius:2px !important; margin:0 0 16px !important;
}
.p66-cathero p{ color:#555 !important; font-size:1rem !important; line-height:1.6 !important; margin:0 0 16px !important; }
.p66-cathero p strong{ color:#1f1f1f !important; font-weight:700 !important; }
.p66-cathero .p66-reassure{
  color:#8a8a8a !important; font-size:.85rem !important; font-weight:600 !important;
  letter-spacing:.3px !important; margin:0 !important;
}
.p66-cathero .p66-reassure .p66-dot{ color:#7C3AED !important; font-weight:700 !important; padding:0 8px !important; }
.p66-cathero .p66-vis{ vertical-align:middle !important; text-align:center !important; width:240px !important; }
.p66-cathero .p66-vis img{
  max-width:100% !important; height:auto !important; border-radius:10px !important;
  box-shadow:0 12px 28px rgba(20,20,20,.16) !important; background:transparent !important;
}
@media (max-width:768px){
  .p66-cathero{ padding:24px 22px !important; }
  .p66-cathero table, .p66-cathero tbody, .p66-cathero tr, .p66-cathero td{ display:block !important; width:auto !important; }
  .p66-cathero .p66-txt{ padding-right:0 !important; text-align:center !important; }
  .p66-cathero .p66-rule{ margin-left:auto !important; margin-right:auto !important; }
  .p66-cathero .p66-vis{ width:auto !important; margin-top:20px !important; }
  .p66-cathero .p66-vis img{ max-width:210px !important; }
  .p66-cathero h2{ font-size:1.4rem !important; }
  .p66-cathero .p66-reassure{ font-size:.8rem !important; }
  .p66-cathero .p66-reassure .p66-dot{ padding:0 5px !important; }
}

/* ============================================================
   (13) SÉLECTEUR NICOTINE EN PILULES (boutons radio façon puff66.fr)
   DOM : .product-variants-item > ul#group_X > li.input-container
         > label > input.input-radio + span.radio-label
   ============================================================ */
.product-variants .product-variants-item .control-label{ font-weight:700 !important; color:#1f1f1f !important; }
.product-variants .product-variants-item ul{
  list-style:none !important; padding:0 !important; margin:10px 0 0 !important;
  display:flex !important; flex-wrap:wrap !important; gap:10px !important;
}
.product-variants .product-variants-item li.input-container{ float:none !important; margin:0 !important; padding:0 !important; }
.product-variants .product-variants-item input.input-radio{
  position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important; pointer-events:none !important;
}
.product-variants .product-variants-item li.input-container label{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:9px 20px !important; min-width:62px !important;
  border:1.5px solid #e3c7d5 !important; border-radius:999px !important;
  background:#ffffff !important; color:#555 !important; font-weight:600 !important; font-size:.95rem !important;
  cursor:pointer !important; transition:all .15s ease !important;
}
.product-variants .product-variants-item li.input-container label:hover{ border-color:#7C3AED !important; color:#7C3AED !important; }
.product-variants .product-variants-item li.input-container label:has(input.input-radio:checked){
  background:#7C3AED !important; border-color:#7C3AED !important; color:#ffffff !important;
  box-shadow:0 4px 12px rgba(124,58,237,.25) !important;
}
.product-variants .product-variants-item .radio-label{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  color:inherit !important; padding:0 !important; margin:0 !important;
  min-width:0 !important; width:auto !important; height:auto !important; line-height:1 !important;
}

/* ============================================================
   (14) ACCUEIL — resserrage desktop & mobile (rythme homogène)
   Carrousel moins haut & rempli, suppression du vide, marges
   régulières entre carrousel → NOS GAMMES → sous-texte → grille.
   ============================================================ */
#carousel{ margin:0 0 20px !important; border-radius:14px !important; overflow:hidden !important; box-shadow:0 6px 22px rgba(20,20,20,.10) !important; }
#carousel .carousel-inner, #carousel .carousel-item{ border-radius:14px !important; }
/* NE PAS forcer display sur .carousel-item : Bootstrap masque les slides inactifs
   (display:none) et les affiche un par un. On force seulement la largeur pleine. */
#carousel .carousel-inner{ display:block !important; width:100% !important; }
#carousel .carousel-item{ width:100% !important; }
/* le lien + figure qui enveloppent l'image sont en inline-block (shrink-to-fit) :
   on les force en bloc pleine largeur sinon l'image retombe sur sa largeur intrinseque */
#carousel .carousel-item a, #carousel .carousel-item figure{
  display:block !important; width:100% !important; margin:0 !important; padding:0 !important;
}
#carousel .carousel-item img, #carousel .carousel-inner img, #carousel img{
  width:100% !important; height:250px !important; object-fit:cover !important; object-position:center !important; display:block !important;
}
/* Bloc NOS GAMMES (#custom-text) : padding resserré, marges homogènes */
#custom-text{ padding:22px 0 26px !important; margin:0 0 22px !important; border-radius:14px !important; }
.p66-gammes{ margin:6px 0 6px !important; padding:0 !important; }
.p66-gammes-title{ margin:0 0 4px !important; }
.p66-gammes-sub{ margin:4px 0 22px !important; }
.p66-gamme-grid{ gap:20px !important; }
.p66-gamme{ border-radius:16px !important; overflow:hidden !important; aspect-ratio:16/10 !important; }
.p66-gamme-img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; }
@media (max-width:768px){
  #carousel{ margin-bottom:14px !important; }
  #carousel .carousel-item img, #carousel .carousel-inner img, #carousel img{ height:165px !important; }
  #custom-text{ padding:16px 0 18px !important; }
  .p66-gammes-sub{ margin-bottom:16px !important; }
  .p66-gamme-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
}

/* ============================================================
   (16) ACCUEIL — Bandeau réassurance + FAQ (bas de page, avant footer)
   Le contenu est dans #custom-text > .p66-home (ps_customtext).
   On hoiste via display:contents pour pouvoir placer trust+faq en
   dernier (order:99) dans la colonne #content, après les produits.
   ============================================================ */
#content.page-home{ display:flex !important; flex-direction:column !important; }
#content.page-home #custom-text,
#content.page-home .p66-home{ display:contents !important; }
/* le fond "carte" blanc était porté par #custom-text : on le remet sur .p66-gammes */
#content.page-home .p66-gammes{ background:#fff !important; border-radius:14px !important; padding:24px 26px 28px !important; box-shadow:0 6px 24px rgba(20,20,20,.05) !important; margin:0 0 22px !important; }
#content.page-home .p66-trust,
#content.page-home .p66-faq{ order:99 !important; }

/* --- Réassurance : 4 blocs sur une ligne (desktop) --- */
.p66-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; background:#fafafa; border:1px solid #f1e7ed; border-radius:14px; padding:22px 24px; margin:6px 0 26px; }
.p66-trust-item{ display:flex; align-items:center; gap:13px; }
.p66-trust-ico{ color:#7C3AED !important; font-size:30px; line-height:1; flex:0 0 auto; }
.p66-trust-txt{ display:flex; flex-direction:column; min-width:0; }
.p66-trust-tt{ font-weight:800; color:#1f1f1f; font-size:.95rem; line-height:1.2; }
.p66-trust-st{ color:#8a8a8a; font-size:.8rem; margin-top:3px; }

/* --- FAQ : accordéon (ouverture au CLIC via .is-open, géré par custom.js) --- */
.p66-faq{ margin:0 0 32px; text-align:center; }
.p66-faq-title{ font-size:1.7rem; font-weight:800; color:#1f1f1f; text-transform:uppercase; letter-spacing:.5px; margin:6px 0 4px; }
.p66-faq-rule{ display:inline-block; width:54px; height:3px; background:#7C3AED; border-radius:2px; margin:0 0 22px; }
.p66-faq-list{ max-width:1060px; margin:0 auto; text-align:left; display:flex; gap:0 46px; align-items:flex-start; }
.p66-faq-col{ flex:1 1 0; min-width:0; border-top:1px solid #ececec; }
.p66-faq-item{ border-bottom:1px solid #ececec; }
.p66-faq-q{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 8px; cursor:pointer; font-weight:600; color:#2a2a2a; transition:color .2s ease; -webkit-tap-highlight-color:transparent; }
/* framboise réservé aux appareils à vrai survol (évite le hover « collé » sur mobile) */
@media (hover:hover){ .p66-faq-q:hover{ color:#7C3AED; } }
.p66-faq-item.is-open .p66-faq-q{ color:#7C3AED; }
.p66-faq-chev{ color:#7C3AED; font-size:1.5rem; line-height:1; flex:0 0 auto; transition:transform .25s ease; }
.p66-faq-item.is-open .p66-faq-chev{ transform:rotate(90deg); }
.p66-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.p66-faq-item.is-open .p66-faq-a{ max-height:460px; }
.p66-faq-a-in{ padding:0 8px 18px; color:#666; line-height:1.55; font-size:.92rem; }
.p66-faq-a-in a{ color:#7C3AED; text-decoration:underline; }

/* --- Responsive : réassurance 2×2, FAQ 1 colonne pleine largeur --- */
@media (max-width:768px){
  .p66-trust{ grid-template-columns:repeat(2,1fr); gap:14px 12px; padding:18px 14px; }
  .p66-faq-title{ font-size:1.4rem; }
  .p66-faq-list{ max-width:100%; display:block; }
  .p66-faq-col{ border-top:0; }
  .p66-faq-col:first-child{ border-top:1px solid #ececec; }
}

/* ============================================================
   (17) FICHE PRODUIT — Bloc réassurance (module blockreassurance)
   Les icônes du module pointent vers /puff66/modules/... (404) :
   on force la bonne URL via content:url() et on rend l'img visible,
   puis on aère la mise en page (icône à gauche, texte indenté).
   ============================================================ */
img.svg[src*="blockreassurance"]{ visibility:visible !important; opacity:1 !important; width:40px !important; height:40px !important; }
img.svg[src*="blockreassurance"][src*="security"]{ content:url('/modules/blockreassurance/views/img/reassurance/pack2/security.svg'); }
img.svg[src*="blockreassurance"][src*="carrier"]{ content:url('/modules/blockreassurance/views/img/reassurance/pack2/carrier.svg'); }
/* Bloc 3 « Produits authentiques » : icône bouclier-coche (data-URI, le colis ne convient plus) */
img.svg[src*="blockreassurance"][src*="parcel"]{ content:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2070%2070'%20fill='none'%20stroke='%23444'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M35%206%20L58%2015%20V33%20C58%2049%2048%2060%2035%2064%20C22%2060%2012%2049%2012%2033%20V15%20Z'/%3E%3Cpath%20d='M26%2035%20l6.5%207%20L46%2027'/%3E%3C/svg%3E"); }
.blockreassurance_product > div:not(.clearfix){ position:relative; padding-left:54px; min-height:44px; margin-bottom:16px; }
.blockreassurance_product > div:not(.clearfix) .item-product{ position:absolute; left:0; top:2px; margin:0; }
.blockreassurance_product .block-title{ display:block; font-weight:700; color:#1f1f1f; margin-bottom:2px; }
.blockreassurance_product > div p{ margin:0; color:#666; line-height:1.5; }

/* ============================================================
   (18) TUILES SOUS-CATÉGORIES racine (Cartouches / E-liquides / Puffs)
   ============================================================ */
.subcategory-image a[title="Cartouches"]{ background-image:url('/img/p/3/2/32-home_default.jpg'); }
.subcategory-image a[title="E-liquides 10ml sel de nicotine"]{ background-image:url('/img/p/1/8/18-home_default.jpg'); }
.subcategory-image a[title="Puffs"]{ background-image:url('/img/p/3/5/1/351-home_default.jpg'); }

/* ============================================================
   (19) PAGES CMS — titres framboise + texte lisible
   ============================================================ */
.p66-cms h2{ color:#7C3AED !important; font-weight:800 !important; font-size:1.25rem !important; margin:22px 0 8px !important; letter-spacing:.2px; }
.p66-cms h2:first-child{ margin-top:4px !important; }
.p66-cms p{ color:#444; line-height:1.6; margin:0 0 14px; }

/* ============================================================
   (20) FOOTER — masquer un éventuel lien « Magasins » résiduel (404)
   ============================================================ */
#footer a[href*="controller=stores"], #footer a[href$="/magasins"]{ display:none !important; }

/* ============================================================
   (21) BANDEAU HAUT MODERNISÉ (framboise modernisé)
   ============================================================ */
/* Bandeau +18 : sobre, lettrage espacé, plus premium */
.header-banner::before{
  background:#141414 !important; color:rgba(255,255,255,.80) !important;
  font-size:.7rem !important; font-weight:500 !important; letter-spacing:.7px !important;
  text-transform:uppercase !important; padding:6px 14px !important;
}
/* Bandeau promo : dégradé framboise + texte affirmé */
.header-banner::after{
  background:linear-gradient(90deg,#c4366c 0%,#a82a59 100%) !important; color:#fff !important;
  font-size:.78rem !important; font-weight:700 !important; letter-spacing:.9px !important;
  text-transform:uppercase !important; padding:7px 14px !important;
}
/* Barre utilitaire framboise : légère profondeur + transitions douces */
.header-nav{ background:linear-gradient(180deg,#c0386a 0%,#ad2f5d 100%) !important; }
.header-nav a, .header-nav span{ font-weight:600 !important; letter-spacing:.3px !important; transition:opacity .2s ease, color .2s ease !important; }
.header-nav a:hover{ color:#fff !important; opacity:.82 !important; }
.header-nav #_desktop_user_info a, .header-nav #_desktop_cart a,
#_desktop_user_info a, #_desktop_cart a{ display:inline-flex !important; align-items:center !important; gap:7px !important; }
.header-nav .material-icons{ font-size:22px !important; transition:transform .2s ease; }
.header-nav #_desktop_cart a:hover .material-icons{ transform:translateY(-1px); }
/* Badge panier : pastille blanche nette sur la barre framboise */
.cart-products-count{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:21px; height:21px; padding:0 6px; border-radius:11px;
  background:#fff !important; color:#ad2f5d !important; font-weight:800 !important;
  font-size:.72rem !important; line-height:1;
}

/* ============================================================
   (22) CONTRÔLE D'ÂGE +18 (overlay plein écran)
   ============================================================ */
#p66-agegate{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  /* fond quasi opaque : PAS de backdrop-filter — sur iOS Safari, le
     -webkit-backdrop-filter casse la detection tactile des boutons
     enfants (bouton visible mais non cliquable). Retire = corrige. */
  background:rgba(18,18,20,.96);
  -webkit-transform:translateZ(0); transform:translateZ(0);
}
#p66-agegate .p66-age-box,
#p66-agegate .p66-age-btns,
#p66-agegate .p66-age-yes,
#p66-agegate .p66-age-no{ pointer-events:auto !important; }
#p66-agegate .p66-age-yes,
#p66-agegate .p66-age-no{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(0,0,0,.08); }
#p66-agegate .p66-age-box{
  width:100%; max-width:440px; text-align:center;
  background:#fff; border-radius:16px; padding:34px 28px 26px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  animation:p66AgeIn .25s ease;
}
@keyframes p66AgeIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
#p66-agegate .p66-age-logo{
  font-weight:800; font-size:1.5rem; letter-spacing:.5px; color:#ad2f5d; margin-bottom:14px;
}
#p66-agegate .p66-age-title{ color:#141414; font-size:1.35rem; font-weight:800; margin:0 0 12px; }
#p66-agegate .p66-age-txt{ color:#555; font-size:.95rem; line-height:1.55; margin:0 0 22px; }
#p66-agegate .p66-age-btns{ display:flex; flex-direction:column; gap:10px; }
#p66-agegate .p66-age-yes{
  background:linear-gradient(90deg,#c4366c 0%,#a82a59 100%); color:#fff; border:0;
  padding:14px 18px; border-radius:10px; font-weight:700; font-size:1rem; cursor:pointer;
  transition:filter .2s ease;
}
#p66-agegate .p66-age-yes:hover{ filter:brightness(1.06); }
#p66-agegate .p66-age-no{
  background:#f1f1f1; color:#333; border:0;
  padding:12px 18px; border-radius:10px; font-weight:600; font-size:.95rem; cursor:pointer;
  transition:background .2s ease;
}
#p66-agegate .p66-age-no:hover{ background:#e6e6e6; }
#p66-agegate .p66-age-legal{ color:#999; font-size:.78rem; margin:18px 0 0; }

/* ============================================================
   (23) BANDEAU COOKIES (RGPD)
   ============================================================ */
#p66-cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:99999;
  background:#141414; color:rgba(255,255,255,.92);
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
#p66-cookiebar .p66-cookiebar-inner{
  max-width:1100px; margin:0 auto; padding:14px 18px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
}
#p66-cookiebar .p66-cookiebar-txt{ margin:0; font-size:.86rem; line-height:1.5; flex:1 1 320px; }
#p66-cookiebar .p66-cookiebar-txt a{ color:#f1a0bf; text-decoration:underline; }
#p66-cookiebar .p66-cookiebar-btns{ display:flex; gap:10px; flex:0 0 auto; }
#p66-cookiebar .p66-ck-accept{
  background:linear-gradient(90deg,#c4366c 0%,#a82a59 100%); color:#fff; border:0;
  padding:9px 20px; border-radius:8px; font-weight:700; font-size:.86rem; cursor:pointer;
}
#p66-cookiebar .p66-ck-refuse{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:9px 18px; border-radius:8px; font-weight:600; font-size:.86rem; cursor:pointer;
}
#p66-cookiebar .p66-ck-refuse:hover{ border-color:#fff; }
@media (max-width:560px){
  #p66-cookiebar .p66-cookiebar-btns{ width:100%; }
  #p66-cookiebar .p66-ck-accept, #p66-cookiebar .p66-ck-refuse{ flex:1; }
}

/* ============================================================
   Section 24 — Compteur panier moderne (badge circulaire)
   ============================================================ */
.header .blockcart .cart-products-count,
#_desktop_cart .cart-products-count,
.header-nav .cart-products-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  margin-left:7px;
  border-radius:999px;
  background:#fff;
  color:var(--p66, #C71F66);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  box-shadow:0 1px 4px rgba(0,0,0,.20);
  vertical-align:middle;
  transition:transform .15s ease;
}
/* masque le badge quand le panier est vide */
.cart-products-count.p66-empty{ display:none !important; }
/* petit pop quand le compteur change */
.cart-products-count.p66-bump{ transform:scale(1.18); }

/* ============================================================
   Section 25 — Alignement en-tête : Déconnexion / Compte / Panier
   Les 3 éléments sont centrés verticalement sur la même ligne.
   ============================================================ */
.header-nav .right-nav,
.right-nav{ align-items:center !important; }

#_desktop_user_info .user-info{
  display:inline-flex !important;
  align-items:center !important;
}
#_desktop_user_info .user-info a.logout,
#_desktop_user_info .user-info a.account{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}
#_desktop_cart .blockcart,
#_desktop_cart .blockcart > a{
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* ============================================================
   Section 27 — RELOOKING « DARK & NÉON » (ACCUEIL) — Étape 1
   Fonds sombres anthracite, texte clair, cartes plus claires.
   Scope : body#index (accueil uniquement, pas de checkout).
   Rollback : supprimer la Section 27.
   ============================================================ */
:root{
  --p66-bg:#0E0E10;      /* fond principal */
  --p66-bg2:#141419;     /* section alternée */
  --p66-card:#1B1B21;    /* cartes (plus claires que la section) */
  --p66-line:rgba(255,255,255,.09);
  --p66-txt:#ECECEF;     /* texte clair */
  --p66-soft:#AAAAB4;    /* texte secondaire */
}

/* --- Fond général sombre --- */
body#index{ background:#0E0E10 !important; color:var(--p66-txt); }
body#index #wrapper,
body#index #main,
body#index .page-home{ background:transparent !important; }

/* Section "NOS GAMMES / FAQ / réassurance" (était blanche) --> sombre */
body#index #custom-text{ background:#0E0E10 !important; color:var(--p66-txt); }

/* --- Textes foncés --> clairs (sur fond sombre) --- */
body#index #custom-text p,
body#index #custom-text li,
body#index .puff-reassurance,
body#index .puff-reassurance *,
body#index .p66-faq-item,
body#index .p66-faq-a,
body#index .p66-faq-a *,
body#index .featured-products .product-title a{
  color:var(--p66-txt) !important;
}
/* sous-titres un cran plus doux */
body#index #custom-text > p,
body#index .products-section-title + p{ color:var(--p66-soft) !important; }

/* Titres de section : gardent le framboise (h2) ; question FAQ framboise = ok */

/* --- Cartes produits : fond légèrement plus clair + texte clair --- */
body#index .product-miniature{
  background:var(--p66-card) !important;
  border:1px solid var(--p66-line);
  border-radius:16px;
  overflow:hidden;
}
body#index .product-miniature .thumbnail-container,
body#index .product-miniature .product-description,
body#index .product-miniature .product-description-short{
  background:transparent !important;
}
body#index .product-miniature .product-title a,
body#index .product-miniature .product-title{ color:var(--p66-txt) !important; }

/* Nettoie les panneaux blancs résiduels de l'accueil
   (sélecteurs renforcés pour battre #content.page-home ... du thème) */
body#index #content.page-home .p66-gammes,
body#index #content.page-home .p66-home,
body#index #content.page-home #custom-text .card,
body#index #content.page-home #custom-text .block,
body#index #content.page-home .featured-products{
  background:transparent !important; box-shadow:none !important;
}

/* FAQ : questions lisibles sur fond sombre (fermée=claire, ouverte=framboise) */
body#index .p66-faq-q{ color:var(--p66-txt) !important; }
body#index .p66-faq-item.is-open .p66-faq-q{ color:var(--p66) !important; }
body#index .p66-faq-item:not(.is-open) .p66-faq-q{ color:var(--p66-txt) !important; }

/* Newsletter (bas de page) : fond sombre + texte clair, champ blanc conservé */
body#index .block_newsletter{ background:transparent !important; color:var(--p66-txt) !important; box-shadow:none !important; }
body#index .block_newsletter h4,
body#index .block_newsletter .h3,
body#index .block_newsletter p{ color:var(--p66-txt) !important; }
body#index .block_newsletter p small,
body#index .block_newsletter .form-text,
body#index .block_newsletter .text-muted{ color:var(--p66-soft) !important; }

/* ============================================================
   Section 28 — HÉRO PLEIN ÉCRAN (Étape 2)
   Full-bleed + plus haut + titre XXL + CTA qui claque.
   ============================================================ */
body#index #carousel{
  width:100vw !important; max-width:none !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important; box-shadow:none !important;
}
body#index #carousel .carousel-inner,
body#index #carousel .carousel-item{ height:clamp(360px,52vh,480px) !important; }
body#index #carousel .carousel-item img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:0 !important;
}
/* Titre XXL */
body#index #carousel .caption h2.display-1{
  font-size:clamp(2.6rem,7vw,5.4rem) !important;
  line-height:.95 !important; letter-spacing:.5px;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
/* CTA « Découvre la 50K → » qui claque */
body#index #carousel .caption::after{
  content:"Découvre la 50K →" !important;
  font-size:clamp(1rem,1.5vw,1.2rem) !important; font-weight:800 !important;
  padding:14px 30px !important; border-radius:999px !important;
  letter-spacing:.3px;
  box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 10px 34px rgba(124,58,237,.6) !important;
}

/* ============================================================
   Section 29 — COULEURS & GLOW ÉLECTRIQUES (Étape 3)
   Framboise signature + accents violet/cyan/lime, dégradés + halos.
   ============================================================ */
:root{
  --p66-violet:#7C3AED;
  --p66-cyan:#22D3EE;
  --p66-lime:#A3E635;
}
/* Boutons principaux : dégradé framboise -> violet + glow */
body#index .btn-primary,
body#index .add-to-cart,
body#index .block_newsletter .btn,
body#index #carousel .caption::after,
body#index .p66-quickadd{
  background-image:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  border:0 !important;
  box-shadow:0 8px 26px rgba(124,58,237,.45), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
body#index .btn-primary:hover,
body#index .add-to-cart:hover,
body#index .block_newsletter .btn:hover,
body#index .p66-quickadd:hover{
  filter:brightness(1.07);
  box-shadow:0 12px 36px rgba(124,58,237,.55) !important;
}
/* Soulignés de titres : dégradé électrique + halo */
body#index .p66-gammes-title::after,
body#index .products-section-title::after,
body#index .featured-products h2::after,
body#index .p66-faq-title::after{
  background:linear-gradient(90deg,#7C3AED,#C71F66) !important;
  height:4px !important; border-radius:3px !important;
  box-shadow:0 0 16px rgba(34,211,238,.55);
}
/* Badges (NOUVEAU / WINNER) : léger halo framboise */
body#index .product-flag,
body#index .product-flag.new{
  box-shadow:0 6px 18px rgba(124,58,237,.5) !important;
}
/* Prix : léger glow framboise pour ressortir sur sombre */
body#index .product-miniature .price,
body#index .featured-products .price{
  text-shadow:0 0 18px rgba(124,58,237,.35);
}

/* ============================================================
   Section 30 — MOUVEMENT & MICRO-INTERACTIONS (Étape 4)
   Survol zoom+glow, apparition au scroll, bandeau défilant.
   ============================================================ */
/* Survol cartes produits : zoom + glow */
body#index .product-miniature{ transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
body#index .product-miniature:hover{
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(124,58,237,.55) !important;
  box-shadow:0 18px 46px rgba(124,58,237,.34), 0 0 0 1px rgba(124,58,237,.4) !important;
}
/* Tuiles de gammes : léger zoom au survol */
body#index .p66-gammes a{ transition:transform .3s ease, box-shadow .3s ease; }
body#index .p66-gammes a:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 16px 40px rgba(0,0,0,.55); }

/* Apparition en fondu au scroll */
body#index .p66-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
body#index .p66-reveal.p66-in{ opacity:1; transform:none; }

/* Bandeau défilant (marquee) */
.p66-marquee{ overflow:hidden; background:linear-gradient(90deg,#7C3AED,#C71F66); color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.p66-mq-track{ display:inline-flex; align-items:center; gap:26px; white-space:nowrap; padding:7px 0; animation:p66mq 28s linear infinite; will-change:transform; }
.p66-mq-item{ font-weight:800; font-size:.8rem; letter-spacing:1.2px; text-transform:uppercase; }
.p66-mq-sep{ opacity:.55; }
@keyframes p66mq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.p66-marquee:hover .p66-mq-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .p66-mq-track{ animation:none; }
  body#index .p66-reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Section 31 — CARTES PRODUITS PUNCHY (Étape 5)
   Prix plus gros, titres resserrés, moins de vide, image XL.
   ============================================================ */
body#index .product-miniature .product-title{ margin:8px 10px 3px !important; }
body#index .product-miniature .product-title a{ font-size:15px !important; font-weight:700 !important; line-height:1.15 !important; }
body#index .product-miniature .price,
body#index .featured-products .product-miniature .price{
  font-size:22px !important; font-weight:800 !important; letter-spacing:.2px;
}
body#index .product-miniature .product-description{ padding:2px 8px 12px !important; }
/* image plein cadre, coins raccords avec la carte arrondie */
body#index .product-miniature img,
body#index .product-miniature .thumbnail-container img{ border-radius:15px 15px 0 0 !important; }
/* moins de vide entre l'image et le texte */
body#index .product-miniature .thumbnail-container{ margin-bottom:0 !important; }

/* ============================================================
   Section 32 — MOBILE D'ABORD (Étape 6)  |  scope accueil
   Tap targets, héro/cartes mobile, barre panier collante.
   ============================================================ */
@media (max-width:767px){
  /* Cibles tactiles plus grosses */
  body#index .btn, body#index .add-to-cart, body#index .p66-quickadd{ min-height:46px !important; }
  body#index #carousel .caption::after{ min-height:44px; display:inline-flex; align-items:center; }
  /* Héro adapté au mobile (format plus vertical) */
  body#index #carousel .carousel-inner,
  body#index #carousel .carousel-item{ height:clamp(240px,44vh,360px) !important; }
  body#index #carousel .caption h2.display-1{ font-size:clamp(2rem,10vw,3.1rem) !important; }
  body#index #carousel .caption::after{ font-size:1rem !important; padding:12px 22px !important; }
  /* Prix bien gros sur mobile */
  body#index .product-miniature .price{ font-size:20px !important; }
  /* Espace pour la barre collante */
  body#index.p66-has-stickybar{ padding-bottom:66px !important; }
  /* Marquee un peu plus compact */
  .p66-mq-item{ font-size:.72rem; }
}

/* Barre panier collante (mobile, accueil) */
.p66-stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:1040; display:none;
  background:rgba(14,14,16,.96); border-top:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.p66-stickybar-inner{ display:flex; align-items:stretch; }
.p66-sb-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:9px 4px; color:#ECECEF !important; text-decoration:none; font-size:.66rem; font-weight:700; }
.p66-sb-item .material-icons{ font-size:22px; }
.p66-sb-cart{ background:linear-gradient(135deg,#7C3AED,#C71F66); color:#fff !important; position:relative; }
.p66-sb-badge{ position:absolute; top:5px; right:24%; background:#fff; color:#7C3AED; border-radius:999px;
  min-width:17px; height:17px; font-size:.6rem; display:flex; align-items:center; justify-content:center; font-weight:800; }
@media (max-width:767px){ body#index .p66-stickybar{ display:block; } }

/* ============================================================
   Section 33 — THÈME SOMBRE GLOBAL (toutes pages sauf accueil)
   Objectif : rendu sombre cohérent et lisible de haut en bas sur
   catégories, fiches produit, CMS, compte, panier et checkout.
   Scope : body:not(#index)  (l'accueil garde ses Sections 27-32).
   Rollback : supprimer la Section 33.
   ============================================================ */
:root{
  --p66-card2:#1E1E22;        /* cartes légèrement plus claires */
  --p66-line2:rgba(255,255,255,.12);
}

/* --- Fond + wrappers transparents pour laisser voir l'anthracite --- */
body:not(#index){ background:#0E0E10 !important; color:var(--p66-txt) !important; }
body:not(#index) #wrapper,
body:not(#index) #main,
body:not(#index) #content-wrapper,
body:not(#index) #content,
body:not(#index) .container,
body:not(#index) .page-content,
body:not(#index) .page-wrapper,
body:not(#index) .cms-content,
body:not(#index) .rte-content,
body:not(#index) .tab-content,
body:not(#index) .tab-pane,
body:not(#index) .product-information,
body:not(#index) .product-tabs,
body:not(#index) .product-actions,
body:not(#index) .product-prices{ background:transparent !important; }

/* --- Texte clair (aucun texte foncé sur fond foncé) --- */
body:not(#index) :where(
  h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
  p,li,span,strong,em,b,dd,dt,th,td,label,figcaption,blockquote,
  .page-title,.section-title,
  .breadcrumb,.breadcrumb a,.breadcrumb li,.breadcrumb li a,
  .facet-label,.facet-title,#search_filters a,.magnitude,
  .custom-control-label,.form-control-label,.control-label,
  .nav-tabs .nav-link,.product-information,.product-description,.product-description *,
  .data-sheet dt,.data-sheet dd,.product-features *,
  .cms-content *,.rte-content *,
  .step-title,.checkout-step .content,.product-line-info,
  .cart-summary-line,.cart-total,.js-subtotal,.order-confirmation *,
  .value,.label,.definition-list,.address,.address *
){ color:var(--p66-txt) !important; }

/* --- Texte secondaire (gris clair) --- */
body:not(#index) :where(
  .text-muted,.category-description,#category-description,
  .pagination,.pagination *,.products-sort-order,
  .total-products,.total-products p,small,.form-text,
  .cart-summary-line .label,.product-comments
){ color:var(--p66-soft) !important; }

/* --- Accents framboise conservés --- */
body:not(#index) .p66-accent{ color:var(--p66) !important; }
body:not(#index) :where(#search_filters a:hover,.breadcrumb a:hover,.cms-content a,.rte-content a,.nav-tabs .nav-link.active){ color:var(--p66) !important; }

/* --- Cartes / blocs : anthracite un peu plus clair + liseré --- */
body:not(#index) :where(
  #search_filters,.block-category,.card,.page-content,
  .checkout-step,.cart-summary,.cart-grid-body .card,.cart-grid-right .card,
  .address,.block-contact,#authentication .card,#identity .card,
  .page-addresses .address,.tabs,.product-tabs,.product-features,
  .data-sheet,.reassurance,.product-accessories .card,
  #order-detail,.order-options,.order-confirmation .card,
  .quickview .modal-content,.js-checkout-summary
){ background:var(--p66-card2) !important; border:1px solid var(--p66-line2) !important; color:var(--p66-txt) !important; box-shadow:none !important; }

/* encart de présentation (description catégorie) : fond transparent, texte clair */
body:not(#index) #category-description,
body:not(#index) #category-description *{ background-color:transparent !important; }

/* onglets fiche produit */
body:not(#index) .nav-tabs{ border-bottom-color:var(--p66-line2) !important; }
body:not(#index) .nav-tabs .nav-link.active{ background:transparent !important; border-color:transparent transparent var(--p66) transparent !important; }
body:not(#index) .data-sheet dt,
body:not(#index) .data-sheet dd{ background:transparent !important; border-color:var(--p66-line2) !important; }

/* --- Formulaires & champs (libellés, bordures, placeholders) --- */
body:not(#index) :where(input,select,textarea,.form-control,.input-group-text,.custom-select,.bootstrap-touchspin input,.select-title){
  background:#16161B !important; color:var(--p66-txt) !important; border-color:var(--p66-line2) !important;
}
body:not(#index) ::placeholder{ color:var(--p66-soft) !important; opacity:1; }
/* cases à cocher / radios : contour visible sur fond sombre */
body:not(#index) :where(.custom-radio,.custom-checkbox span,.psgdpr_consent_message){ border-color:var(--p66-line2) !important; }

/* barre de tri « Trier par » */
body:not(#index) .products-sort-order .select-title{ background:#16161B !important; color:var(--p66-txt) !important; border-color:var(--p66-line2) !important; }

/* liens génériques dans le contenu (hors header/menu) */
body:not(#index) #content a,
body:not(#index) .page-content a{ color:var(--p66-txt); }
body:not(#index) #content a:hover,
body:not(#index) .page-content a:hover{ color:var(--p66) !important; }

/* ============================================================
   Section 34 — ACCUEIL : Produits populaires pleine lumière + FAQ
   ============================================================ */
/* Cartes « Produits populaires » toujours pleinement lumineuses
   (on neutralise le voile/opacité de l'animation d'apparition) */
body#index .featured-products .product-miniature,
body#index .featured-products .product-miniature.p66-reveal,
body#index .product-miniature.p66-reveal{ opacity:1 !important; transform:none !important; }
body#index .featured-products .product-miniature .product-title a{ color:var(--p66-txt) !important; }
body#index .featured-products .product-miniature .price{ color:var(--p66) !important; font-weight:800 !important; }

/* FAQ : questions blanches (framboise survol/ouverture), réponses gris clair, séparateurs clairs */
body#index .p66-faq-q:hover{ color:var(--p66) !important; }
body#index .p66-faq-a,
body#index .p66-faq-a *{ color:var(--p66-soft) !important; }
body#index .p66-faq-item{ border-color:rgba(255,255,255,.12) !important; }
body#index .p66-faq-q::after,
body#index .p66-faq-q .p66-faq-chevron{ color:var(--p66-soft) !important; }

/* ============================================================
   Section 35 — Correctifs lisibilité (formulaires & liens)
   Boutons submit framboise (le champ sombre écrasait btn-primary),
   bouton "Choisir un fichier" neutralisé, cases/radios cochés visibles,
   liens du plan du site éclaircis.
   ============================================================ */
/* Boutons d'envoi = framboise cohérente (contact "Envoyer", etc.) */
body:not(#index) input[type="submit"],
body:not(#index) button[type="submit"],
body:not(#index) .btn-primary,
body:not(#index) input.btn-primary{
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  color:#fff !important; border:0 !important;
}
body:not(#index) input[type="submit"]:hover,
body:not(#index) button[type="submit"]:hover,
body:not(#index) .btn-primary:hover{
  filter:brightness(1.08) !important;
}
/* Bouton "Choisir un fichier" : neutre sombre au lieu du bleu par défaut */
body:not(#index) .btn-default,
body:not(#index) label.btn.btn-default,
body:not(#index) .input-group .btn-default{
  background:#26262C !important; color:var(--p66-txt) !important;
  border:1px solid var(--p66-line2) !important;
}
/* Cases à cocher cochées : coche framboise (sinon invisible sur fond sombre) */
body:not(#index) .checkbox-checked,
body:not(#index) .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked{
  color:var(--p66) !important;
}
/* Radios cochés : point framboise */
body:not(#index) .custom-radio input:checked + span{
  background-color:var(--p66) !important;
}
/* Liens du plan du site : plus lisibles + survol framboise */
body#sitemap a,
body#sitemap .sitemap a{ color:var(--p66-soft) !important; }
body#sitemap a:hover,
body#sitemap .sitemap a:hover{ color:var(--p66) !important; }

/* deploy: fixes forms/links s35 — 20260701 */
/* deploy: dark sitewide s33+s34 — 20260701 */
/* deploy: restyle mobile step6 — 20260701 */
/* deploy: restyle cards step5 — 20260701 */
/* deploy: restyle motion step4 — 20260701 */
/* deploy: restyle glow step3 — 20260701 */
/* deploy: restyle hero step2 — 20260701 */
/* deploy: restyle dark step1 — 20260701 */
/* deploy: header align v1 — 20260630-1540 */
/* deploy: cart badge v1 — 20260630-1500 */
/* deploy: age+cookies v1 — 20260630-0943 */

/* ============================================================
   Section 36 — REFONTE HYBRIDE (clair + 2 îlots sombres)
   VOLET 1 : clair partout SAUF héro (#carousel) et Nos Gammes.
   VOLET 2 : accent violet→magenta (déjà propagé Sections 1-35).
   Rollback : supprimer la Section 36 (le sombre des S.27-35 reprend).
   ============================================================ */
:root{
  --acc:#7C3AED; --acc2:#C71F66;
  --accg:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%);
  --ink:#1a1a1e; --ink2:#5a5a63; --paper:#ffffff; --line-l:#e7e7ea;
  /* fond des SECTIONS claires : blanc cassé très légèrement lavande (charte).
     Distinct de --paper (#fff) qui reste la couleur des CARTES → contraste doux. */
  --wash:#F4F2F8;
}

/* ---- Header : barre pinky -> accent ---- */
.header-nav{ background:var(--accg) !important; }

/* ================= ACCUEIL : clair ================= */
body#index{ background:var(--wash) !important; color:var(--ink) !important; }
body#index #custom-text{ background:var(--wash) !important; color:var(--ink) !important; }
body#index #custom-text p, body#index #custom-text li,
body#index .puff-reassurance, body#index .puff-reassurance *,
body#index .featured-products .product-title a,
body#index .featured-products .product-miniature .product-title,
body#index .block_newsletter, body#index .block_newsletter h4, body#index .block_newsletter .h3, body#index .block_newsletter p{ color:var(--ink) !important; }
body#index #custom-text > p, body#index .products-section-title + p,
body#index .block_newsletter p small, body#index .block_newsletter .form-text{ color:var(--ink2) !important; }
body#index .featured-products .products-section-title,
body#index .featured-products h2.products-section-title,
body#index .p66-faq-title{ color:var(--ink) !important; }

/* Cartes « Produits populaires » claires (punchy conservé) */
body#index .featured-products .product-miniature{ background:var(--paper) !important; border:1px solid var(--line-l) !important; box-shadow:0 6px 20px rgba(20,20,30,.06) !important; }
body#index .featured-products .product-miniature .product-title a{ color:var(--ink) !important; }
body#index .featured-products .price{ color:var(--acc) !important; text-shadow:none !important; }
body#index .featured-products .product-miniature:hover{ border-color:rgba(124,58,237,.5) !important; box-shadow:0 18px 46px rgba(124,58,237,.28), 0 0 0 1px rgba(199,31,102,.35) !important; }

/* Réassurance claire, icônes accent */
body#index .p66-trust-ico{ color:var(--acc) !important; }

/* FAQ claire */
body#index .p66-faq-q, body#index .p66-faq-item:not(.is-open) .p66-faq-q{ color:var(--ink) !important; }
body#index .p66-faq-item.is-open .p66-faq-q, body#index .p66-faq-q:hover{ color:var(--acc) !important; }
body#index .p66-faq-a, body#index .p66-faq-a *, body#index .p66-faq-a-in, body#index .p66-faq-a-in *{ color:var(--ink2) !important; }
body#index .p66-faq-a-in a{ color:var(--acc) !important; }
body#index .p66-faq-chev{ color:var(--acc) !important; }
body#index .p66-faq-item{ border-color:rgba(0,0,0,.10) !important; }

/* ---- Îlot sombre : NOS GAMMES (full-bleed) ---- */
body#index #content.page-home .p66-gammes{
  background:#0E0E10 !important; color:#ECECEF !important;
  box-shadow:0 0 0 100vmax #0E0E10 !important;
  -webkit-clip-path:inset(0 -100vmax) !important; clip-path:inset(0 -100vmax) !important;
  padding-top:48px !important; padding-bottom:56px !important; margin-top:12px !important; border-radius:0 !important;
}
body#index #content.page-home .p66-gammes .p66-gammes-title,
body#index #content.page-home .p66-gammes h2{ color:#ffffff !important; }
body#index #content.page-home .p66-gammes .p66-gammes-title + p,
body#index #content.page-home .p66-gammes > p,
body#index #content.page-home .p66-gammes p{ color:#C9C9D2 !important; }

/* ---- Footer clair ---- */
#footer, .footer-container{ background:#f4f4f6 !important; color:var(--ink) !important; }
.footer-container .title a, .footer-container .h3, .footer-container .title,
.footer-container li a, .footer-container .links ul > li a,
.footer-container .block-contact, .footer-container .block-contact a,
.footer-container .text-sm-center, .footer-container .text-sm-center *{ color:#2a2a30 !important; }
.footer-container .title .material-icons, .footer-container .navbar-toggler{ color:#2a2a30 !important; }
.footer-container li a:hover, .footer-container .links ul > li a:hover{ color:var(--acc) !important; }

/* ================= TOUTES PAGES SAUF ACCUEIL : clair ================= */
body:not(#index){ background:var(--wash) !important; color:var(--ink) !important; }
body:not(#index) #wrapper,body:not(#index) #main,body:not(#index) #content-wrapper,body:not(#index) #content,body:not(#index) .container,body:not(#index) .page-content,body:not(#index) .page-wrapper,body:not(#index) .tab-content,body:not(#index) .product-information,body:not(#index) .product-tabs{ background:transparent !important; }
body:not(#index) #wrapper :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,p,li,span,strong,em,b,dd,dt,th,td,label,figcaption,blockquote,.breadcrumb,.breadcrumb a,.breadcrumb li,.breadcrumb li a,.facet-label,.facet-title,#search_filters a,.magnitude,.nav-tabs .nav-link,.product-information,.product-description,.product-description *,.data-sheet dt,.data-sheet dd,.product-features *,.cms-content *,.rte-content *,.step-title,.page-title,.custom-control-label,.form-control-label){ color:var(--ink) !important; }
body:not(#index) #wrapper :where(.text-muted,.category-description,#category-description,.pagination,.pagination *,.products-sort-order,.total-products,.total-products p,small,.form-text){ color:var(--ink2) !important; }
body:not(#index) :where(#search_filters,.block-category,.card,.page-content,.checkout-step,.cart-summary,.cart-grid-body .card,.cart-grid-right .card,.address,.block-contact,#authentication .card,#identity .card,.page-addresses .address,.tabs,.product-tabs,.product-features,.data-sheet,.reassurance,.product-accessories .card,#order-detail,.order-options){ background:var(--paper) !important; border:1px solid var(--line-l) !important; color:var(--ink) !important; box-shadow:0 4px 16px rgba(20,20,30,.05) !important; }
body:not(#index) #category-description, body:not(#index) #category-description *{ background-color:transparent !important; }
body:not(#index) .nav-tabs{ border-bottom-color:var(--line-l) !important; }
body:not(#index) .nav-tabs .nav-link.active{ color:var(--acc) !important; border-color:transparent transparent var(--acc) transparent !important; background:transparent !important; }
body:not(#index) .data-sheet dt, body:not(#index) .data-sheet dd{ background:transparent !important; border-color:var(--line-l) !important; }
body:not(#index) :where(input,select,textarea,.form-control,.input-group-text,.custom-select,.bootstrap-touchspin input,.select-title){ background:var(--paper) !important; color:var(--ink) !important; border-color:#d5d5db !important; }
body:not(#index) ::placeholder{ color:#8a8a93 !important; opacity:1; }
body:not(#index) .p66-accent, body:not(#index) .p66-cathero h2 .p66-accent{ color:var(--acc) !important; }
body:not(#index) #content a:hover, body:not(#index) .page-content a:hover, body:not(#index) .breadcrumb a:hover, body:not(#index) #search_filters a:hover{ color:var(--acc) !important; }
body:not(#index) .price, body:not(#index) .product-price, body:not(#index) .current-price span, body:not(#index) .product-price .current-price span{ color:var(--acc) !important; }

/* deploy: hybride s36 + accent violet-magenta — 20260701 */

/* ============================================================
   Section 37 — HAUT ALLÉGÉ (2 niveaux) + PRIX MAGENTA
   1 fin bandeau info (marquee + « +18 » épinglé) + header intégrant
   Contactez-nous / Connexion / Panier. Prix en magenta vif.
   Rollback : supprimer la Section 37 (+ revert JS buildMarquee/slimHeader).
   ============================================================ */

/* --- Supprimer les bandeaux redondants (le marquee porte +18 & livraison) --- */
.header-banner{ display:none !important; }
.header-nav{ display:none !important; }

/* --- Bandeau info = marquee fin, avec « +18 » épinglé à gauche (toutes pages) --- */
.p66-marquee{ position:relative !important; }
.p66-marquee .p66-mq-track{ padding:5px 0 !important; }
.p66-mq-item{ font-size:.72rem !important; }
.p66-marquee::before{
  content:"VENTE RÉSERVÉE AUX +18";
  position:absolute; left:0; top:0; bottom:0; z-index:4;
  display:flex; align-items:center; padding:0 16px;
  background:#141414; color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.6px; white-space:nowrap;
}

/* --- Prix en magenta vif (extrémité magenta du dégradé) --- */
:root{ --price:#C71F66; }
.price, .product-price, .current-price span, .current-price .price, .product-prices .current-price,
.featured-products .price, .product-miniature .price,
body#index .product-miniature .price, body#index .featured-products .price,
body#index .featured-products .product-miniature .price,
body:not(#index) .price, body:not(#index) .product-price, body:not(#index) .current-price span,
body:not(#index) .product-prices .current-price{ color:var(--price) !important; text-shadow:none !important; }

/* --- Utilitaires header (Contactez-nous / Connexion / Panier) --- */
.p66-header-utils{ display:inline-flex; align-items:center; gap:12px; white-space:nowrap; }
.p66-header-utils a{ color:#fff !important; font-size:.72rem !important; font-weight:600; display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.p66-header-utils a:hover{ color:rgba(255,255,255,.8) !important; }
.p66-header-utils .material-icons{ font-size:20px !important; color:#fff !important; }
.p66-header-utils .cart-products-count{ background:var(--accg) !important; color:#fff !important; }

/* --- Mise en page header sur une seule ligne (desktop) --- */
@media (min-width:768px){
  .header-top #mobile_top_menu_wrapper{ display:none !important; }
  .header-top .container > .row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; gap:12px !important; }
  .header-top #_desktop_logo{ flex:0 0 auto !important; margin:0 !important; width:auto !important; max-width:none !important; }
  .header-top .header-top-right{ flex:1 1 auto !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:12px !important; min-width:0 !important; float:none !important; }
  .header-top #_desktop_top_menu{ flex:0 0 auto !important; margin:0 !important; }
  .header-top #_desktop_top_menu .top-menu{ flex-wrap:nowrap !important; white-space:nowrap !important; }
  .header-top #_desktop_top_menu .top-menu > li > a{ font-size:.86rem !important; letter-spacing:0 !important; padding-left:8px !important; padding-right:8px !important; }
  .header-top #search_widget, .header-top #search_widget form, .header-top .search-widgets,
  .header-top #search_widget input[type=text], .header-top .search-widgets input{ max-width:150px !important; width:150px !important; min-width:0 !important; margin:0 !important; }
  .p66-header-utils{ margin-left:auto !important; flex:0 0 auto !important; }
}

/* --- Mobile : garder le header natif, +18 raccourci dans le marquee --- */
@media (max-width:767px){
  .p66-marquee::before{ content:"+18"; padding:0 10px; font-size:.62rem; }
  .p66-header-utils{ display:none !important; }
}

/* deploy: haut allégé + prix magenta s37 — 20260701 */

/* Section 37b — prix magenta : spécificité renforcée sur pages non-accueil
   (bat la règle texte #wrapper de la Section 36) */
body:not(#index) #wrapper .price,
body:not(#index) #wrapper .product-price,
body:not(#index) #wrapper .current-price span,
body:not(#index) #wrapper .product-miniature .price,
body:not(#index) #wrapper .product-prices .current-price{ color:var(--price) !important; }
/* deploy: prix magenta non-accueil s37b — 20260701 */

/* ============================================================
   Section 38 — FINITIONS (héro sans blanc, footer sombre,
   tri lisible, pilule magenta, réassurance mise en valeur)
   Rollback : supprimer la Section 38.
   ============================================================ */

/* 1. Héro accueil : bande sombre continue (pas de blanc autour) */
body#index #carousel{
  background:#0E0E10 !important;
  box-shadow:0 0 0 100vmax #0E0E10 !important;
  -webkit-clip-path:inset(-30px -100vmax -40px -100vmax) !important;
  clip-path:inset(-30px -100vmax -40px -100vmax) !important;
}

/* 2. Footer sombre, texte clair, survol magenta */
#footer, .footer-container{ background:#0E0E10 !important; color:#ECECEF !important; }
.footer-container .title a, .footer-container .h3, .footer-container .title, .footer-container .links .title{ color:#ffffff !important; }
.footer-container li a, .footer-container .links ul > li a,
.footer-container .block-contact, .footer-container .block-contact a,
.footer-container .text-sm-center, .footer-container .text-sm-center *{ color:rgba(255,255,255,.85) !important; }
.footer-container li a:hover, .footer-container .links ul > li a:hover{ color:#C71F66 !important; }
.footer-container .title .material-icons, .footer-container .navbar-toggler{ color:#fff !important; }
.footer-container .block-contact{ background:transparent !important; border:0 !important; box-shadow:none !important; }
#footer .block_newsletter, #footer .block_newsletter h4, #footer .block_newsletter .h3, #footer .block_newsletter p{ color:#ECECEF !important; }
#footer .block_newsletter .form-text, #footer .block_newsletter small{ color:#B0B0B8 !important; }

/* 3. Catégorie : « Trier par » lisible (select clair + options) */
.products-sort-order .select-title{ background:#ffffff !important; color:#1a1a1e !important; border:1px solid #d5d5db !important; }
.products-sort-order .select-title .material-icons{ color:#1a1a1e !important; }
.products-sort-order .dropdown-menu{ background:#ffffff !important; border:1px solid #d5d5db !important; box-shadow:0 8px 24px rgba(20,20,30,.12) !important; }
.products-sort-order .dropdown-menu a, .products-sort-order .select-list{ color:#1a1a1e !important; }
.products-sort-order .dropdown-menu a:hover, .products-sort-order .select-list:hover, .products-sort-order .select-list.current{ background:#f2f2f5 !important; color:#7C3AED !important; }

/* 4a. Pilule nicotine -> magenta plein (unité avec les prix) */
body:not(#index) .product-variants label,
body:not(#index) .product-variants-item label,
body:not(#index) .input-container label{ background:#C71F66 !important; background-image:none !important; color:#ffffff !important; border:0 !important; }

/* 4b. Réassurance fiche produit : carte + titres magenta */
.blockreassurance_product{ border:1px solid #ececf0 !important; border-radius:14px !important; padding:6px 20px !important; background:#fafafb !important; box-shadow:0 6px 18px rgba(20,20,30,.05) !important; margin-top:14px !important; }
.blockreassurance_product .block-title{ color:#C71F66 !important; font-weight:800 !important; }

/* deploy: finitions s38 — 20260701 */

/* Section 38b — spécificité renforcée (bat les règles body:not(#index) de S.33/36) */
body:not(#index) .products-sort-order .select-title{ background:#ffffff !important; color:#1a1a1e !important; border:1px solid #d5d5db !important; }
body:not(#index) .products-sort-order .select-title .material-icons{ color:#1a1a1e !important; }
body:not(#index) #wrapper .blockreassurance_product .block-title{ color:#C71F66 !important; font-weight:800 !important; }
/* pilule nicotine : texte blanc lisible sur fond magenta (bat la règle texte S.36) */
body:not(#index) #wrapper .product-variants label,
body:not(#index) #wrapper .product-variants-item label,
body:not(#index) #wrapper .input-container label,
body:not(#index) #wrapper .product-variants label .radio-label,
body:not(#index) #wrapper .product-variants-item label .radio-label,
body:not(#index) #wrapper .product-variants label span,
body:not(#index) #wrapper .input-container label span{ color:#ffffff !important; }
/* deploy: finitions s38b — 20260701 */

/* ============================================================
   Section 39 — « Contactez-nous » en texte à l'extrême gauche du
   header (collé au bord gauche, à gauche du logo). Plus de drapeau
   « +18 » : le message +18 reste dans le bandeau défilant.
   #p66-contact-left est injecté en JS dans .header-top.
   Rollback : supprimer la Section 39 + placeContactLeft() du JS.
   ============================================================ */
.header-top{ position:relative !important; }
/* on neutralise tout ancien drapeau +18 s'il traîne encore */
#p66-age-flag{ display:none !important; }
#p66-contact-left{ display:none; }
@media (min-width:768px){
  #p66-contact-left{
    position:absolute !important; left:0; top:0; bottom:0; z-index:20;
    display:flex !important; align-items:center;
    padding-left:18px; padding-right:10px;
  }
  #p66-contact-left #_desktop_contact_link,
  #p66-contact-left #contact-link{ margin:0 !important; padding:0 !important; background:none !important; border:0 !important; }
  #p66-contact-left a{ color:#ffffff !important; font-size:.8rem !important; font-weight:600 !important; text-decoration:none !important; white-space:nowrap !important; display:inline-flex; align-items:center; gap:6px; }
  #p66-contact-left a:hover{ color:rgba(255,255,255,.8) !important; }
  #p66-contact-left .material-icons{ display:none !important; }
}
/* deploy: Contactez-nous à gauche (plus de drapeau +18) s39 — 20260701 */

/* ============================================================
   Section 40 — Barre de réassurance remontée sous le héro,
   en bande dégradé pleine largeur (avant « Nos Gammes »).
   Le nœud .p66-trust est déplacé en JS juste avant .p66-gammes.
   Rollback : supprimer la Section 40 + le déplacement JS.
   ============================================================ */
/* on annule l'ordre 99 : la barre passe dans le flux haut, avant les catégories */
#content.page-home .p66-trust{ order:0 !important; }
/* pas d'espace blanc entre la barre et la bande sombre « Nos Gammes » */
body#index #content.page-home .p66-gammes{ margin-top:0 !important; }
/* supprime la bande noire sous le héro : la barre colle au bas du héro */
body#index #carousel{ margin-bottom:0 !important; }
body#index #content.page-home #carousel{ margin-bottom:0 !important; }
/* bande pleine largeur, dégradé de marque, contenu centré et aéré (desktop) */
.p66-trust{
  position:relative !important; z-index:2 !important;
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  margin-top:0 !important; margin-bottom:0 !important;
  border:0 !important; border-radius:0 !important;
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  display:flex !important; grid-template-columns:none !important;
  justify-content:space-between !important; align-items:center !important;
  flex-wrap:nowrap !important; gap:30px !important;
  /* marges gauche/droite égales : contenu limité à ~1180px centré */
  padding:18px max(28px, calc((100vw - 1180px) / 2)) !important;
  box-sizing:border-box !important;
}
.p66-trust-item{ justify-content:center !important; flex:1 1 0 !important; }
.p66-trust-ico,
body#index .p66-trust-ico{ color:#ffffff !important; }
.p66-trust-tt{ color:#ffffff !important; }
.p66-trust-st{ color:rgba(255,255,255,.85) !important; }
/* mobile : 2×2 propre et aéré sur le dégradé */
@media (max-width:768px){
  .p66-trust{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:16px 18px !important; padding:18px 22px !important; }
  .p66-trust-item{ justify-content:flex-start !important; flex:1 1 auto !important; }
}
/* deploy: barre réassurance collée + aérée s40 — 20260701 */

/* ============================================================
   Section 41 — « Nos Gammes » en fond clair (au lieu de noir).
   Titres/textes foncés, souligné magenta conservé, cartes avec
   ombre douce. Enchaînement : barre réassurance (dégradé) →
   Nos Gammes clair, sans liseré noir. Le héro reste sombre.
   Rollback : supprimer la Section 41.
   ============================================================ */
/* bande claire pleine largeur (remplace l'îlot sombre de la S.29) */
body#index #content.page-home .p66-gammes{
  background:var(--wash) !important; color:#1f1f24 !important;
  box-shadow:0 0 0 100vmax var(--wash) !important;
  -webkit-clip-path:inset(0 -100vmax) !important; clip-path:inset(0 -100vmax) !important;
  padding-top:44px !important; padding-bottom:52px !important;
  margin-top:0 !important; border-radius:0 !important;
}
/* titre « NOS GAMMES » foncé + sous-titre foncé (souligné reste magenta via S.29) */
body#index #content.page-home .p66-gammes .p66-gammes-title,
body#index #content.page-home .p66-gammes h2{ color:#1f1f24 !important; }
body#index #content.page-home .p66-gammes .p66-gammes-title + p,
body#index #content.page-home .p66-gammes > p,
body#index #content.page-home .p66-gammes p,
body#index #content.page-home .p66-gammes .p66-gammes-sub{ color:#6b6b73 !important; }
/* cartes catégories : ombre douce + coins arrondis nets sur fond clair */
body#index #content.page-home .p66-gammes .p66-gamme{
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(20,20,45,.10) !important;
}
body#index #content.page-home .p66-gammes .p66-gamme:hover{
  box-shadow:0 16px 40px rgba(124,58,237,.22) !important;
}
/* deploy: Nos Gammes fond clair s41 — 20260701 */

/* ============================================================
   Section 42 — En-tête : espacement Déconnexion / nom client
   + retrait du bloc « +18 » épinglé en haut à gauche.
   Rollback : supprimer la Section 42.
   ============================================================ */
/* 1) le lien compte (nom) et le lien déconnexion ne se chevauchent plus */
.p66-header-utils .user-info,
#_desktop_user_info .user-info{ display:inline-flex !important; align-items:center !important; gap:16px !important; }
.p66-header-utils .user-info .account{ order:1 !important; }
.p66-header-utils .user-info .logout{ order:2 !important; }
/* 2) on retire le rectangle « VENTE RÉSERVÉE AUX +18 » épinglé sur la barre
   défilante (le message +18 reste présent dans le texte qui défile) */
.p66-marquee::before{ display:none !important; content:none !important; }
/* deploy: header +18 retiré + espace compte s42 — 20260701 */

/* ============================================================
   Section 43 — Héro sans bande noire dessous + en-tête aligné.
   Rollback : supprimer la Section 43 (+ JS quick-view/Z Pulse).
   ============================================================ */
/* 1) supprime la bande sombre sous l'image du héro (marge interne du carrousel)
   + coupe l'extension sombre en bas → la barre réassurance colle à l'image */
body#index #carousel .carousel-inner{ margin-bottom:0 !important; }
body#index #carousel{
  -webkit-clip-path:inset(-30px -100vmax 0 -100vmax) !important;
  clip-path:inset(-30px -100vmax 0 -100vmax) !important;
}
/* 2) en-tête : tous les boutons (Déconnexion / compte / Panier) sur la même ligne */
.p66-header-utils{ align-items:center !important; }
.p66-header-utils > *,
.p66-header-utils .user-info,
.p66-header-utils .user-info a,
.p66-header-utils #_desktop_cart a{ display:inline-flex !important; align-items:center !important; line-height:1 !important; }
/* 3) vignettes de sous-catégories : l'image (auto-remplie en JS) remplit la tuile */
#subcategories .subcategory-image img,
#subcategories li img{ object-fit:cover !important; width:100% !important; height:100% !important; }
/* deploy: héro sans noir + entête aligné + vignettes sous-cat s43 — 20260701 */

/* ============================================================
   Section 44 — Corrections MOBILE : héro propre + newsletter lisible.
   Rollback : supprimer la Section 44.
   ============================================================ */
@media (max-width:767px){
  /* Héro mobile — version qui marche : hauteur FIXE en pixels (175px) à tous
     les niveaux + image en cover. (height:100% ne se résolvait pas → l'image
     prenait sa hauteur naturelle et débordait ; en pixels fixes c'est carré.) */
  body#index #carousel{
    width:100% !important; max-width:100% !important; margin:0 !important;
    height:175px !important; min-height:0 !important; max-height:175px !important;
    position:relative !important; overflow:hidden !important; border-radius:0 !important;
  }
  body#index #carousel .carousel-inner{ height:175px !important; overflow:hidden !important; width:100% !important; }
  body#index #carousel .carousel-item{ display:none !important; }
  body#index #carousel .carousel-item.active{
    display:block !important; height:175px !important; width:100% !important;
    transform:none !important; left:0 !important; right:0 !important; margin:0 !important; float:none !important;
  }
  body#index #carousel .carousel-item.active a,
  body#index #carousel .carousel-item.active figure{
    display:block !important; height:175px !important; width:100% !important; margin:0 !important; padding:0 !important;
  }
  body#index #carousel .carousel-item.active img,
  body#index #carousel .carousel-item img,
  body#index #carousel img{
    width:100% !important; max-width:none !important; height:175px !important;
    object-fit:cover !important; object-position:center !important; display:block !important; position:static !important;
  }
  /* flèches + légende masquées sur mobile (héro propre, bannière cliquable) */
  body#index #carousel .carousel-control-prev,
  body#index #carousel .carousel-control-next,
  body#index #carousel .caption{ display:none !important; }

  /* MENU MOBILE : la barre .header-nav (qui contient le hamburger #menu-icon +
     le menu catégories/sous-catégories) avait été masquée globalement en desktop.
     On la ré-affiche sur mobile pour rétablir le menu 3 barres à gauche. */
  .header-nav{ display:block !important; }
  #menu-icon{ display:inline-flex !important; align-items:center !important; }
  #menu-icon .material-icons{ font-size:30px !important; color:#fff !important; }
}

/* Newsletter : texte clair sur le footer sombre (une règle body#index le
   forçait en sombre → invisible). On repasse en clair, priorité renforcée. */
body#index #footer .block_newsletter,
body#index #footer .block_newsletter h4,
body#index #footer .block_newsletter .h3,
body#index #footer .block_newsletter .h4,
body#index #footer .block_newsletter p,
body#index #footer .block_newsletter label,
#footer .block_newsletter h4,
#footer .block_newsletter .h3{ color:#ECECEF !important; }
body#index #footer .block_newsletter p small,
body#index #footer .block_newsletter .form-text,
body#index #footer .block_newsletter .text-muted,
body#index #footer .block_newsletter small{ color:#C7C7CF !important; }
/* deploy: mobile héro + newsletter s44 — 20260702 */

/* ============================================================
   Section 45 — Tunnel de commande : textes lisibles.
   Des textes secondaires (liens « ajouter une adresse »,
   « adresse de facturation différente »…) étaient gris clair
   sur fond clair → on les passe en foncé lisible.
   Rollback : supprimer la Section 45.
   ============================================================ */
body#checkout #content-wrapper{ color:#242428 !important; }
body#checkout #content-wrapper p,
body#checkout #content-wrapper label,
body#checkout #content-wrapper .form-control-label,
body#checkout #content-wrapper .checkout-step,
body#checkout #content-wrapper .checkout-step h1,
body#checkout #content-wrapper .address-item,
body#checkout #content-wrapper .delivery-option,
body#checkout #content-wrapper .step-title{ color:#242428 !important; }
/* liens secondaires (ajouter/modifier adresse, facturation différente…) : lisibles, pas gris pâle */
body#checkout #content-wrapper a:not(.btn):not(.button):not(.btn-primary),
body#checkout #content-wrapper .text-muted,
body#checkout #content-wrapper small,
body#checkout #content-wrapper .js-address-form a,
body#checkout #content-wrapper .add-address a{ color:#3a2b5e !important; }
/* champs de saisie bien lisibles */
body#checkout #content-wrapper input,
body#checkout #content-wrapper select,
body#checkout #content-wrapper textarea{ color:#242428 !important; }
/* deploy: tunnel commande textes lisibles s45 — 20260702 */

/* ============================================================
   Section 46 — Bouton « Continuer mes achats » (dégradé) sur le
   tunnel de commande + panier. Injecté en JS, ramène à l'accueil.
   Rollback : supprimer la Section 46 + le bloc JS s46.
   ============================================================ */
.p66-continue-shopping{
  display:flex !important; align-items:center; justify-content:center; gap:8px;
  width:max-content !important; max-width:100% !important;
  margin:0 auto 18px auto !important;                 /* centré horizontalement */
  background-image:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  color:#ffffff !important; font-weight:700 !important; text-decoration:none !important;
  padding:12px 26px !important; border-radius:12px !important; border:0 !important;
  box-shadow:0 8px 24px rgba(124,58,237,.35) !important;
  line-height:1.1 !important; cursor:pointer;
  transition:filter .2s ease, transform .2s ease !important;
}
.p66-continue-shopping:hover{ filter:brightness(1.07) !important; transform:translateY(-1px) !important; color:#fff !important; text-decoration:none !important; }
.p66-continue-shopping .material-icons{ font-size:19px !important; color:#fff !important; }
/* deploy: bouton continuer mes achats s46 — 20260702 */

/* ============================================================
   Section 47 — Héro mobile : filet CSS. Annule le full-bleed
   desktop (left:50%/right:-50%) qui décalait la bannière à droite,
   et affiche l'image entière au ratio naturel, centrée.
   ============================================================ */
@media (max-width:767px){
  body#index #carousel{
    left:0 !important; right:0 !important; inset:auto !important;
    width:100% !important; margin:0 !important; transform:none !important;
    height:auto !important; max-height:none !important; min-height:0 !important;
    overflow:hidden !important; background:#0e0e12 !important;
  }
  body#index #carousel .carousel-inner{
    height:auto !important; max-height:none !important; min-height:0 !important;
    width:100% !important; transform:none !important; overflow:hidden !important;
  }
  /* on ne montre QUE la slide active (sinon les 3 bannières s'empilent) */
  body#index #carousel .carousel-item{ display:none !important;
    height:auto !important; max-height:none !important; min-height:0 !important;
    width:100% !important; transform:none !important; float:none !important; position:relative !important; }
  body#index #carousel .carousel-item.active{ display:block !important; }
  body#index #carousel .carousel-item a,
  body#index #carousel .carousel-item figure{
    height:auto !important; max-height:none !important; min-height:0 !important;
    width:100% !important; display:block !important; }
  body#index #carousel .carousel-item img{
    width:100% !important; height:auto !important; max-width:100% !important;
    max-height:none !important; object-fit:contain !important; object-position:center !important;
    position:static !important; transform:none !important; display:block !important; margin:0 auto !important;
  }
  /* flèches Bootstrap 3 (.left/.right.carousel-control) + BS4 + indicateurs */
  body#index #carousel .carousel-control,
  body#index #carousel .left.carousel-control,
  body#index #carousel .right.carousel-control,
  body#index #carousel .carousel-control-prev,
  body#index #carousel .carousel-control-next,
  body#index #carousel .carousel-indicators,
  body#index #carousel .caption{ display:none !important; }
}
/* deploy: hero mobile full-bleed reset s47 — 20260702 */

/* ============================================================
   Section 48 — Améliorations MOBILE de l'accueil (≤767px).
   1) Héro pleine largeur bord à bord
   2) Barre du bas : fonds uniformes, onglet actif en dégradé
   3) Recherche du haut retirée (accès via l'onglet du bas)
   + Compactage de la barre de réassurance (2×2). Desktop inchangé.
   Rollback : supprimer la Section 48 + les hooks JS (is-active / p66-search-open).
   ============================================================ */
@media (max-width:767px){

  /* --- 3) Recherche du haut : bande noire repliée par défaut --- */
  body#index .header-top{
    max-height:0 !important; overflow:hidden !important;
    padding-top:0 !important; padding-bottom:0 !important;
    border:0 !important; transition:max-height .25s ease;
  }
  body#index.p66-search-open .header-top{
    max-height:96px !important; padding:8px 0 !important; overflow:visible !important;
  }

  /* --- 1) Héro PLEINE LARGEUR bord à bord, collé sous le header --- */
  body#index #wrapper{ padding-top:0 !important; }   /* supprime le liseré noir sous le header */
  body#index #carousel{
    width:100vw !important; max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
    margin-top:0 !important; margin-bottom:0 !important;
    left:0 !important; right:auto !important; inset:auto !important;
    border-radius:0 !important; overflow:hidden !important;
    background:#0e0e12 !important; transform:none !important;
  }
  body#index #carousel .carousel-inner,
  body#index #carousel .carousel-item,
  body#index #carousel .carousel-item a,
  body#index #carousel .carousel-item figure,
  body#index #carousel .carousel-item img{ border-radius:0 !important; }

  /* --- 2) Barre du bas : même fond pour les 3 onglets, actif en dégradé --- */
  .p66-sb-item{ position:relative; color:#E7E7EE !important; }
  .p66-sb-cart{ background:transparent !important; color:#E7E7EE !important; }  /* plus de dégradé permanent */
  .p66-sb-item.is-active .material-icons,
  .p66-sb-item.is-active > span{
    background:linear-gradient(135deg,#7C3AED,#C71F66) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent !important; color:transparent !important;
  }
  .p66-sb-item.is-active::before{
    content:"" !important; position:absolute; top:0; left:20%; right:20%; height:3px;
    border-radius:0 0 4px 4px; background:linear-gradient(135deg,#7C3AED,#C71F66);
  }

  /* --- Compactage barre de réassurance (2×2 plus ramassé) --- */
  body#index .p66-trust{ gap:6px 10px !important; padding:11px 14px !important; }
  body#index .p66-trust-item{ gap:9px !important; align-items:center !important; }
  body#index .p66-trust-ico{ font-size:21px !important; }
  body#index .p66-trust-tt{ font-size:.8rem !important; line-height:1.12 !important; }
  body#index .p66-trust-st{ font-size:.68rem !important; margin-top:1px !important; line-height:1.12 !important; }
}
/* deploy: mobile accueil héro pleine largeur + nav bas + recherche unique + réassurance compacte s48 — 20260702 */

/* ============================================================
   Section 49 — Tiroir de menu mobile autonome (catégories).
   Remplace le tiroir natif (cassé par nos personnalisations).
   Injecté par le bloc JS s50. Desktop non impacté.
   ============================================================ */
@media (max-width:767px){
  #mobile_top_menu_wrapper{ display:none !important; }   /* tiroir natif neutralisé */
}
.p66-mobmenu{ position:fixed; inset:0; z-index:3000; }
.p66-mobmenu[hidden]{ display:none; }
.p66-mm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s ease; }
.p66-mobmenu.open .p66-mm-backdrop{ opacity:1; }
.p66-mm-panel{ position:absolute; top:0; left:0; bottom:0; width:82%; max-width:340px;
  background:#141018; color:#fff; box-shadow:2px 0 24px rgba(0,0,0,.5);
  transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.p66-mobmenu.open .p66-mm-panel{ transform:translateX(0); }
.p66-mm-head{ display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; font-weight:800; font-size:1.05rem; letter-spacing:.02em;
  background:linear-gradient(135deg,#7C3AED,#C71F66); color:#fff; }
.p66-mm-close{ background:transparent; border:0; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; padding:0 4px; }
.p66-mm-nav{ padding:6px 0 24px; }
.p66-mm-group{ border-bottom:1px solid rgba(255,255,255,.08); }
.p66-mm-cat{ display:flex; align-items:stretch; }
.p66-mm-catlink{ flex:1; display:block; padding:14px 18px; color:#fff !important; text-decoration:none !important; font-weight:700; font-size:.98rem; }
.p66-mm-catlink:active{ background:rgba(255,255,255,.06); }
.p66-mm-toggle{ background:transparent; border:0; color:#cfc6da; width:52px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.p66-mm-toggle .material-icons{ transition:transform .2s ease; }
.p66-mm-group.open .p66-mm-toggle .material-icons{ transform:rotate(180deg); }
.p66-mm-subs{ display:none; padding:2px 0 10px; background:rgba(255,255,255,.03); }
.p66-mm-group.open .p66-mm-subs{ display:block; }
.p66-mm-subs a{ display:block; padding:10px 18px 10px 34px; color:rgba(255,255,255,.86) !important; text-decoration:none !important; font-size:.9rem; }
.p66-mm-subs a:active{ background:rgba(255,255,255,.06); color:#fff !important; }
/* deploy: tiroir menu mobile autonome s49/s50 — 20260702 */

/* ============================================================
   (52) ACCUEIL — Carte "Gorilla 43K" : rogner la bordure
   Le visuel produit a une marge claire autour ; on zoome
   l'image pour la faire disparaître et rester plein cadre.
   ============================================================ */
.p66-gamme-img[alt="Gorilla 43K"]{ transform:scale(1.32); transform-origin:center 46%; }

/* ============================================================
   (53) ACCUEIL "Nos gammes" — survol moderne (sans voile couleur)
   Zoom image ~1.05 + lift + halo violet/magenta + "Découvrir →"
   ============================================================ */
/* transitions douces */
body#index .p66-gammes .p66-gamme{ transition:transform .3s ease, box-shadow .3s ease !important; }
.p66-gamme-img{ transition:transform .35s ease !important; }
.p66-gamme-name{ transition:transform .3s ease !important; }

/* libellé "Découvrir →" (masqué au repos, sous le nom) */
.p66-gamme-name::after{
  content:"Découvrir \2192"; display:block; margin-top:5px;
  font-size:.82rem; font-weight:600; letter-spacing:.3px; color:#fff;
  opacity:0; transform:translateY(6px); max-height:0; overflow:hidden;
  transition:opacity .3s ease, transform .3s ease, max-height .3s ease;
}

/* --- Desktop : survol souris --- */
@media (hover:hover){
  body#index .p66-gammes .p66-gamme:hover{
    transform:translateY(-5px) !important;
    box-shadow:0 12px 26px rgba(124,58,237,.32), 0 10px 34px rgba(199,31,102,.26) !important;
  }
  body#index .p66-gammes .p66-gamme:hover .p66-gamme-img{ transform:scale(1.05) !important; }
  body#index .p66-gammes .p66-gamme:hover .p66-gamme-img[alt="Gorilla 43K"]{ transform:scale(1.386) !important; transform-origin:center 46% !important; }
  body#index .p66-gammes .p66-gamme:hover .p66-gamme-name{ transform:translateY(-4px) !important; }
  body#index .p66-gammes .p66-gamme:hover .p66-gamme-name::after{ opacity:1 !important; transform:translateY(0) !important; max-height:2.4em !important; }
}

/* --- Mobile : pas de survol → cartes nettes + ombre douce ; zoom au tap --- */
@media (hover:none){
  body#index .p66-gammes .p66-gamme{ box-shadow:0 6px 18px rgba(124,58,237,.14) !important; }
  body#index .p66-gammes .p66-gamme:active .p66-gamme-img{ transform:scale(1.05) !important; }
  body#index .p66-gammes .p66-gamme:active .p66-gamme-img[alt="Gorilla 43K"]{ transform:scale(1.386) !important; transform-origin:center 46% !important; }
}

/* ============================================================
   Section 39 — En-tête pleine largeur : Panier jamais coupé
   Le bloc menu + recherche + utilitaires (compte/panier) dépassait
   le conteneur Bootstrap (max 1140px) -> le Panier était rejeté hors
   écran et tronqué à droite. On élargit l'en-tête à 100% de la largeur
   et on décale le logo pour dégager le lien "Contactez-nous" (positionné
   en absolu à gauche). Desktop uniquement (>=992px), mobile inchangé.
   Rollback : supprimer la Section 39.
   ============================================================ */
@media (min-width:992px){
  #header .header-top .container{ max-width:100% !important; width:100% !important; }
  #header .header-top #_desktop_logo{ padding-left:140px !important; }
  #header .header-top .header-top-right{ min-width:0 !important; }
  #header .header-top .p66-header-utils{ flex:0 0 auto !important; margin-left:auto !important; white-space:nowrap !important; }
  #header .header-top #_desktop_cart{ flex:0 0 auto !important; }
}
/* deploy: header pleine largeur (panier complet) s39 — 20260706 */

/* ============================================================
   Section 40 — Case "J'accepte les CGV" visible au paiement
   La vraie checkbox est masquée (opacity:0) et remplacée par un span
   .custom-checkbox dont la bordure (blanche 12%) était invisible sur le
   fond BLANC de l'étape paiement -> la case n'apparaissait pas.
   On lui donne une bordure framboise + fond blanc, et à l'état coché un
   fond framboise avec une coche blanche. Libellé et lien CGV contrastés.
   Rollback : supprimer la Section 40.
   ============================================================ */
#conditions-to-approve .custom-checkbox{ display:inline-block !important; width:20px !important; height:20px !important; vertical-align:middle; }
#conditions-to-approve .custom-checkbox > span{
  display:inline-block !important; width:20px !important; height:20px !important; box-sizing:border-box !important;
  border:2px solid #C71F66 !important; background:#fff !important; border-radius:4px !important; position:relative !important; cursor:pointer;
}
#conditions-to-approve .custom-checkbox input[type=checkbox]:checked + span{
  background:#C71F66 !important; border-color:#C71F66 !important;
}
#conditions-to-approve .custom-checkbox input[type=checkbox]:checked + span::after{
  content:"" !important; position:absolute !important; left:5px; top:1px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
#conditions-to-approve .custom-checkbox i.checkbox-checked{ color:#fff !important; }
#conditions-to-approve .custom-checkbox input[type=checkbox]:focus + span{ box-shadow:0 0 0 3px rgba(199,31,102,.25) !important; }
#conditions-to-approve label, #conditions-to-approve .condition-label{ color:#242428 !important; }
#conditions-to-approve a{ color:#C71F66 !important; text-decoration:underline !important; font-weight:600 !important; }
/* deploy: case CGV visible au checkout s40 — 20260706 */

/* ============================================================
   Section 45 — Bouton « Ajout rapide » moderne sur les cartes produits
   Remplace le lien bleu + loupe (style PS par défaut) par une PILULE
   dégradé violet→magenta, texte blanc, icône panier. Apparition en fondu
   + glissement vers le haut au survol de la carte, centrée en bas de
   l'image. Mobile (hover:none) : toujours visible. Le comportement
   quickview (ajout au panier) est conservé (aucun changement de DOM).
   S'applique à toutes les cartes (accueil + pages catégorie).
   Rollback : supprimer la Section 45.
   ============================================================ */
.product-miniature .thumbnail-top{ position:relative !important; }
.product-miniature .highlighted-informations{
  position:absolute !important; left:0 !important; right:0 !important; bottom:12px !important; top:auto !important;
  width:auto !important; text-align:center !important; z-index:4 !important; background:transparent !important;
  pointer-events:none !important; box-shadow:none !important; transition:none !important;
}
.product-miniature .highlighted-informations .quick-view{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  padding:9px 18px !important; border-radius:999px !important;
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  color:#fff !important; font-size:.82rem !important; font-weight:700 !important; letter-spacing:.2px !important;
  text-decoration:none !important; white-space:nowrap !important;
  box-shadow:0 8px 20px rgba(124,58,237,.35), 0 4px 10px rgba(199,31,102,.28) !important;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, box-shadow .25s ease, filter .2s ease !important;
}
.product-miniature .highlighted-informations .quick-view,
.product-miniature .highlighted-informations .quick-view *{ color:#fff !important; }
.product-miniature:hover .quick-view,
.product-miniature .thumbnail-container:hover .quick-view{
  opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important;
}
.product-miniature .quick-view:hover{
  filter:brightness(.93) !important;
  box-shadow:0 12px 28px rgba(124,58,237,.5), 0 6px 16px rgba(199,31,102,.42) !important;
}
/* On masque l'icone loupe native du theme (le ligature laissait un residu) */
.product-miniature .quick-view .material-icons,
.product-miniature .quick-view .material-icons.search{ display:none !important; }
/* et on dessine notre panier directement sur le lien (glyphe unique, codepoint direct) */
.product-miniature .quick-view::before{
  content:"\e854" !important; /* add_shopping_cart */
  font-family:'Material Icons' !important;
  font-feature-settings:normal !important;
  font-weight:normal !important;
  font-size:18px !important;
  line-height:1 !important;
  color:#fff !important;
  -webkit-font-smoothing:antialiased;
}
@media (hover:none){
  .product-miniature .highlighted-informations .quick-view{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
}
/* deploy: bouton Ajout rapide pilule dégradé s45 — 20260707 */

/* =====================================================================
   Section 50 — Prix uniformes : magenta charte (#C71F66) + gras 700
   Objectif : tous les prix (accueil, catégorie, fiche, panier) adoptent
   la teinte magenta unie du bouton « Ajout rapide » (extrémité du dégradé
   violet→magenta), même police (Epilogue) et même graisse (700). Corrige
   notamment les totaux du panier restés en quasi-noir.
   Rollback : supprimer la Section 50.
   ===================================================================== */
.price,
.product-price,
.product-miniature .price,
.featured-products .price,
.products .price,
.product-list .price,
.current-price,
.current-price span,
.current-price .price,
.product-prices .current-price,
.product-prices .current-price span,
.product-line-info .price,
.product-line-info .product-price,
.cart__item .price,
.cart-item .price,
.product-line-grid .current-price,
.cart-summary-line .value,
.cart-summary-totals .value,
.cart-total .value,
.cart-detailed-totals .value,
#cart-subtotal-products .value,
#cart-subtotal-shipping .value,
.cart-summary .value{
  color:#C71F66 !important;
  font-weight:700 !important;
  font-family:'Epilogue', sans-serif !important;
}
/* Ancien prix barré : gris discret (ne pas passer en magenta) */
.regular-price,
.product-line-info .regular-price,
.product-discount .regular-price,
.product-prices .regular-price{
  color:#9a9a9a !important;
  font-weight:600 !important;
}
/* Renfort de spécificité : bat la règle globale de couleur de texte
   (body:not(#index) #wrapper :where(...)) qui repassait certains prix
   du panier en foncé. Même structure => l'emporte par l'ordre source. */
body:not(#index) #wrapper :where(
  .price, .product-price, .product-price strong,
  .current-price, .current-price span, .current-price .price,
  .product-prices .current-price, .product-prices .current-price span,
  .product-line-info .price, .product-line-info .product-price,
  .cart__item .price, .product-line-grid .current-price,
  .cart-summary-line .value, .cart-total .value,
  .cart-detailed-totals .value, .cart-summary .value,
  #cart-subtotal-products .value, #cart-subtotal-shipping .value
){
  color:#C71F66 !important;
  font-weight:700 !important;
}
/* le prix barré (ancien) reste gris, même avec le renfort ci-dessus */
body:not(#index) #wrapper :where(.regular-price, .product-line-info .regular-price){
  color:#9a9a9a !important; font-weight:600 !important;
}
/* Accueil : uniformiser la graisse des prix à 700 (les prix "Produits
   populaires" étaient en 800 via des règles body#index très spécifiques). */
body#index #wrapper .featured-products .product-miniature .price,
body#index #wrapper .featured-products .price,
body#index #wrapper .product-miniature .price,
body#index #wrapper .price{
  color:#C71F66 !important;
  font-weight:700 !important;
}
/* Garde-fou : un éventuel prix dans l'en-tête framboise reste blanc lisible */
#header .price,
#header .cart-preview .price,
.header-top .price{ color:#fff !important; }
/* deploy: prix magenta uniformes s50 — 20260708b */

/* ===== Section 51 (v1.6.47) — Blog : index (cartes) + lisibilité article ===== */
/* --- Index blog --- */
.p66-blog-index{max-width:1120px;margin:0 auto;}
.p66-blog-intro{color:#c9c9d2;font-size:1.05rem;line-height:1.6;margin:0 0 1.8rem;}
.p66-blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:767px){.p66-blog-grid{grid-template-columns:1fr;}}
.p66-blog-card{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border-radius:16px;
  background:#171720;border:1px solid rgba(255,255,255,.08);text-decoration:none !important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.p66-blog-card:hover{transform:translateY(-4px);border-color:rgba(199,31,102,.6);box-shadow:0 12px 32px rgba(199,31,102,.20);}
.p66-blog-tag{align-self:flex-start;font-size:.70rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%);padding:5px 13px;border-radius:999px;}
.p66-blog-card-title{color:#fff !important;font-size:1.18rem;line-height:1.32;margin:4px 0 0;font-weight:700;}
.p66-blog-card-exc{color:#b9b9c4;font-size:.95rem;line-height:1.55;margin:0;flex:1 1 auto;}
.p66-blog-more{color:#C71F66;font-weight:700;font-size:.92rem;margin-top:6px;}
.p66-blog-card:hover .p66-blog-more{color:#e0559a;}

/* --- Lisibilité contenu article (guides/blog) --- */
#content .rte,#content .cms-content,.page-cms .rte,.page-content.page-cms,#content .page-content{max-width:840px;margin-left:auto;margin-right:auto;}
#content .rte h2,.page-cms h2{font-size:1.55rem;line-height:1.3;margin:2rem 0 .7rem;color:#fff;}
#content .rte h3,.page-cms h3{font-size:1.2rem;line-height:1.35;margin:1.5rem 0 .5rem;color:#fff;}
#content .rte p,#content .rte li,.page-cms p,.page-cms li{line-height:1.72;color:#d7d7de;}
#content .rte ul,.page-cms ul{margin:.4rem 0 1.1rem 1.15rem;}
#content .rte a,.page-cms .rte a{color:#e0559a;text-decoration:underline;}
#content .rte blockquote,.page-cms blockquote{background:rgba(199,31,102,.09);border-left:3px solid #C71F66;
  padding:14px 18px;border-radius:8px;margin:1.4rem 0;color:#e9e9f0;}
/* deploy: blog s51 — 20260709a */

/* ===== Section 51b (v1.6.48) — cartes blog en <div> + lien titre cliquable ===== */
.p66-blog-card{position:relative;}
.p66-blog-card-title{margin:4px 0 0;}
.p66-blog-card-title a{color:#fff !important;text-decoration:none !important;}
.p66-blog-card:hover .p66-blog-card-title a{color:#fff !important;}
/* toute la carte cliquable via le lien du titre */
.p66-blog-card-title a::after{content:"";position:absolute;inset:0;z-index:1;}
.p66-blog-tag,.p66-blog-more{position:relative;z-index:2;}
/* deploy: blog cards div s51b — 20260709b */

/* ===== Section 51c (v1.6.49) — Blog cartes thème CLAIR (contenu sur fond blanc) ===== */
.p66-blog-intro{color:#4a4a52 !important;}
.p66-blog-card{background:#ffffff !important;border:1px solid #ececf0 !important;box-shadow:0 2px 10px rgba(0,0,0,.05) !important;}
.p66-blog-card:hover{border-color:rgba(199,31,102,.55) !important;box-shadow:0 12px 30px rgba(199,31,102,.16) !important;transform:translateY(-4px);}
.p66-blog-tag{color:#fff !important;}
.p66-blog-card-title a{color:#1a1a1e !important;text-decoration:none !important;}
.p66-blog-card:hover .p66-blog-card-title a{color:#C71F66 !important;}
.p66-blog-card-exc{color:#5c5c66 !important;}
.p66-blog-more{color:#C71F66 !important;font-weight:700 !important;}
/* Article : garantir titres/citations lisibles sur fond blanc */
#content .rte h2,.page-cms h2,#content .rte h3,.page-cms h3{color:#1a1a1e !important;}
#content .rte blockquote,.page-cms blockquote{color:#1a1a1e !important;}
/* deploy: blog light theme s51c — 20260709c */

/* ===== Section 51d (v1.6.50) — Tableaux dans les articles CMS ===== */
#content .rte table,.page-cms table{width:100%;border-collapse:collapse;margin:1.3rem 0;font-size:.95rem;}
#content .rte th,#content .rte td,.page-cms th,.page-cms td{border:1px solid #e4e4ea !important;padding:10px 12px !important;text-align:left;vertical-align:top;color:#2a2a30;}
#content .rte thead th,.page-cms thead th{background:#f4eefb !important;color:#1a1a1e !important;font-weight:700 !important;}
#content .rte tbody tr:nth-child(even),.page-cms tbody tr:nth-child(even){background:#faf9fc;}
#content .rte td strong,.page-cms td strong{color:#1a1a1e;}
/* deploy: tables articles s51d — 20260709d */

/* ============================================================
   Section 54 (v1.6.51) — ACCUEIL MOBILE : rythme resserré, grille
   catégories équilibrée, scrim des libellés, cartes compactes,
   marge sous la barre de navigation fixe.
   Scope STRICT : body#index + @media (max-width:767px).
   Desktop (>767px) totalement inchangé.
   ============================================================ */
@media (max-width:767px){

  /* 1) Moins de vide vertical entre les sections (enchaînement plus fluide) */
  body#index #content.page-home .p66-gammes{
    padding:14px 12px 16px !important;
    margin:6px 0 10px !important;
    border-radius:14px !important;
  }
  body#index .p66-gammes-title{ margin:2px 0 2px !important; }
  body#index .p66-gammes-sub{ margin:2px auto 12px !important; max-width:36ch; }
  body#index .featured-products{ margin:8px auto 18px !important; padding:0 12px !important; }
  body#index .featured-products .products-section-title,
  body#index .featured-products h2.products-section-title{ margin:0 0 12px !important; }

  /* 2) Grille catégories : 2 colonnes, gouttières égales.
        Dernière carte impaire (ex. « Paradise 10ml ») recentrée, plus d'orpheline à gauche. */
  body#index .p66-gammes .p66-gamme-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
  body#index .p66-gammes .p66-gamme-grid > .p66-gamme:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
    width:calc(50% - 6px) !important;
    justify-self:center !important;
    margin-inline:auto !important;
  }

  /* 4) Cartes plus compactes (moins hautes) → on en voit plus d'un coup */
  body#index .p66-gammes .p66-gamme{
    aspect-ratio:16/9 !important;
    border-radius:14px !important;
    box-shadow:0 5px 16px rgba(124,58,237,.16) !important;   /* ombre douce, palette conservée */
  }

  /* 3) Scrim dégradé + libellés homogènes et lisibles quel que soit le visuel */
  body#index .p66-gammes .p66-gamme-name{
    padding:24px 13px 11px !important;
    font-size:1.02rem !important;
    line-height:1.15 !important;
    letter-spacing:.2px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.6) !important;
    background:linear-gradient(to top,
                 rgba(0,0,0,.80) 0%,
                 rgba(0,0,0,.42) 44%,
                 rgba(0,0,0,0) 100%) !important;
  }

  /* 5) Marge basse : la barre fixe (Accueil · Rechercher · Panier) ne chevauche plus le contenu.
        On étend le pied de page SOMBRE sous le copyright pour réserver la place,
        sans laisser de bande blanche entre le footer et la barre. */
  body#index #footer{ padding-bottom:calc(74px + env(safe-area-inset-bottom)) !important; }
  body#index{ padding-bottom:0 !important; }
}
/* deploy: accueil mobile rythme + grille equilibree + scrim + compact + pad nav s54 — 20260709e */
/* deploy: pad bas = footer sombre (anti bande blanche) s54b — 20260709f */

/* ============================================================
   Section 55 (v1.6.57) — BLOG : lisibilité & modernité (CSS only)
   Objectif : rendre les articles agréables à lire, sans toucher
   au contenu ni à la structure SEO (H1/H2 inchangés).
   Portée ARTICLES = les 6 pages CMS listées dans les :is(...).
   >>> NOUVEL ARTICLE : ajouter son id (ex. body.cms-id-15) dans
       CHAQUE liste :is(...) de cette section.
   Portée LISTE = page « Blog » (.p66-blog-*), cms-id-12.
   ============================================================ */

/* ---------- 1) Corps d'article : largeur de lecture ~720px, centré ---------- */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header,
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms{
  max-width:720px !important; margin-left:auto !important; margin-right:auto !important;
  float:none !important;
}

/* Police de lecture confortable (serif) pour le corps ; texte gris très foncé,
   aligné à gauche, interligne aéré, espace généreux entre paragraphes. */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p,
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms li{
  text-align:left !important;
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif !important;
  font-size:1.08rem !important;            /* ~17.5px */
  line-height:1.72 !important;
  color:#2b2b33 !important;                /* gris très foncé, pas noir pur */
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p{
  margin:0 0 1.2em !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms ul,
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms ol{
  margin:.5em 0 1.35em 1.35em !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms li{
  margin:.35em 0 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms a{
  color:#a81854 !important; text-decoration:underline !important; text-underline-offset:2px;
}

/* ---------- 2) Titres : casse normale + hiérarchie claire (Anton conservé) ---------- */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms h2{
  text-transform:none !important;
  font-size:1.62rem !important; line-height:1.22 !important;
  color:#1a1a1e !important; text-align:left !important;
  margin:2.2em 0 .25em !important;
}
/* accent dégradé sous chaque H2 (casse la monotonie + couleur de marque) */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms h2::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  margin:.45em 0 .1em; background:linear-gradient(90deg,#7C3AED,#C71F66);
}
/* léger séparateur entre sections (aération), sauf avant le 1er H2 */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms h2:not(:first-of-type){
  border-top:1px solid #edecf1 !important; padding-top:1.7em !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms h3{
  text-transform:none !important;
  font-size:1.24rem !important; line-height:1.3 !important;
  color:#2a2a30 !important; text-align:left !important;
  margin:1.7em 0 .3em !important;
}

/* ---------- 3) Couverture d'article : l'en-tête devient une bannière dégradée ---------- */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#7C3AED 0%,#9B2AAE 50%,#C71F66 100%) !important;
  border-radius:20px !important;
  padding:46px 36px 42px !important;
  margin-top:14px !important; margin-bottom:32px !important;
  box-shadow:0 14px 36px rgba(124,58,237,.22) !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header::after{
  content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header::before{
  content:"GUIDE PUFF66"; display:inline-block; margin-bottom:14px;
  font-family:"Epilogue",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  color:#fff; background:rgba(255,255,255,.17); padding:6px 13px; border-radius:999px;
  position:relative; z-index:1;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header h1{
  color:#fff !important; text-transform:none !important;
  font-size:2.15rem !important; line-height:1.12 !important; letter-spacing:.2px !important;
  margin:0 !important; position:relative; z-index:1;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}

/* ---------- 4) Confort de lecture : encart +18 + encadrés « points clés » ---------- */
/* Notes +18 = paragraphes dont l'unique enfant est <em> → mises en valeur (conservées) */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p:has(> em:only-child){
  text-align:center !important;
  font-family:"Epilogue",sans-serif !important; font-size:.86rem !important;
  color:#6b3fd4 !important;
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(199,31,102,.07)) !important;
  border:1px solid rgba(124,58,237,.20) !important; border-radius:10px !important;
  padding:11px 16px !important; margin:1.6em 0 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p:has(> em:only-child) em{
  font-style:normal !important; color:#6b3fd4 !important;
}
/* Citations / points clés mis en avant */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms blockquote{
  background:linear-gradient(135deg,#f6f0ff,#fdf0f6) !important;
  border:0 !important; border-left:4px solid #C71F66 !important;
  border-radius:12px !important; padding:16px 20px !important; margin:1.8em 0 !important;
  color:#2b2b33 !important;
  font-family:Georgia,"Palatino Linotype",serif !important; font-size:1.06rem !important;
}

/* ---------- 5) Mobile : pleine largeur avec marges latérales confortables ---------- */
@media (max-width:767px){
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header{
    padding:30px 20px 26px !important; border-radius:16px !important;
    margin:10px 14px 24px !important;
  }
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #main > .page-header h1{
    font-size:1.58rem !important;
  }
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms{
    padding-left:16px !important; padding-right:16px !important;
  }
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p,
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms li{
    font-size:1.04rem !important;
  }
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms h2{
    font-size:1.36rem !important;
  }
}

/* ---------- 6) Page LISTE du blog : cartes compactes (SANS bloc dégradé vide) ---------- */
/* Plus de bandeau/rectangle de dégradé en haut des cartes (effet image manquante). */
.p66-blog-card::before{ content:none !important; display:none !important; background:none !important; height:0 !important; margin:0 !important; }
.p66-blog-card{
  overflow:hidden;
  padding:22px 22px 20px !important;   /* padding intérieur confortable */
  border-radius:16px !important;       /* coins arrondis */
  background:#ffffff !important;        /* fond clair */
  border:1px solid #ececf0 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.05) !important;   /* ombre douce */
  gap:11px !important;
}
/* Structure haut → bas : pastille, titre, extrait (aligné à gauche), lien. */
.p66-blog-card-exc{ text-align:left !important; }
/* Grille : 2 colonnes desktop, 1 mobile, gouttières égales, hauteurs cohérentes. */
.p66-blog-grid{ grid-template-columns:repeat(2,1fr) !important; gap:22px !important; align-items:stretch !important; }
@media (max-width:767px){ .p66-blog-grid{ grid-template-columns:1fr !important; } }
/* ---------- 7) Boost de spécificité couleurs (bat le thème « #wrapper :where() ») ---------- */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #main > .page-header h1{
  color:#fff !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms p,
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms li{
  color:#2b2b33 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms h2{
  color:#1a1a1e !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms h3{
  color:#2a2a30 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms blockquote{
  color:#2b2b33 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms p:has(> em:only-child),
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms p:has(> em:only-child) em{
  color:#6b3fd4 !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #content.page-cms a{
  color:#a81854 !important;
}
/* deploy: blog lisibilité + covers dégradés + vignettes liste s55 — 20260710a */
/* Titres des cartes de la liste : casse normale (cohérence « pas de majuscules ») */
.p66-blog-card-title, .p66-blog-card-title a{ text-transform:none !important; letter-spacing:normal !important; }
/* deploy: blog h1 blanc + couleurs corps (boost spécificité #wrapper) s55b — 20260710b */
/* deploy: cartes liste titres casse normale s55c — 20260710c */

/* deploy: +articles 15,16 (santé + panorama JNR) + cartes blog compactes s55d — 20260710d */

/* ============================================================
   Section 56 (v1.6.61) — LOGO D'EN-TÊTE : la vraie image, en PNG transparent
   Contexte : PrestaShop reconvertit systématiquement le logo boutique en JPG
   → la transparence est perdue (fond blanc/noir plaqué sur l'en-tête).
   Solution : on héberge le PNG dans le module (views/img/p66-logo.png) et on
   l'affiche via CSS, en remplaçant le wordmark texte "Puff66" de la section 7.
   Desktop : embleme couleur + "puff66.fr" blanc (en-tête noir).
   Mobile  : même logo passé en blanc (en-tête dégradé violet→magenta).
   ============================================================ */

/* --- Desktop : on ré-affiche la vraie <img> et on remplace sa source --- */
#_desktop_logo img.logo,
#_desktop_logo img{
  display:block !important;
  content:url("../img/p66-logo.png") !important;
  height:38px !important;
  width:auto !important;
  max-width:none !important;
}
/* on supprime le wordmark texte "Puff66" (sections 7 / v3 / placement) */
#_desktop_logo a::after{ content:none !important; display:none !important; }
#_desktop_logo{ display:flex !important; align-items:center !important; overflow:visible !important; }
#_desktop_logo a{ display:inline-flex !important; align-items:center !important; line-height:1 !important; }
#_desktop_logo h1{ margin:0 !important; line-height:1 !important; }

/* --- Mobile : #_mobile_logo est un <div> vide → logo en image de fond, en BLANC --- */
#_mobile_logo::after{ content:none !important; display:none !important; }
#_mobile_logo{
  background-image:url("../img/p66-logo.png") !important;
  background-repeat:no-repeat !important;
  background-position:left center !important;
  background-size:contain !important;
  width:132px !important;  min-width:132px !important;
  height:32px !important;  min-height:32px !important;
  filter:brightness(0) invert(1);   /* logo entièrement blanc, lisible sur le dégradé */
}
@media (max-width:767px){
  #_mobile_logo{ width:124px !important; min-width:124px !important; height:30px !important; min-height:30px !important; }
}
/* deploy: logo header = vraie image PNG (embleme couleur + puff66.fr blanc) s56 — 20260712a */
/* deploy: +articles 17-21 (recharger, autonomie, gout brule, comparatif, meteorite) s56b — 20260712b */

/* ==========================================================================
   57 — Illustrations editoriales du blog (v1.6.67)
   - image de couverture 16:9 en tete d'article
   - vignette sur chaque carte de la page liste
   ========================================================================== */

/* --- Banniere de titre plus compacte : il y a desormais une vraie image en dessous */
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #main > .page-header{
  padding:34px 32px 30px !important;
  margin-bottom:22px !important;
  box-shadow:0 10px 26px rgba(124,58,237,.18) !important;
}
:is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #main > .page-header h1{
  font-size:1.95rem !important;
}

/* --- Couverture de l'article */
#wrapper #content.page-cms p.p66-cover{
  margin:0 0 34px !important;
  text-align:center !important;
}
#wrapper #content.page-cms p.p66-cover img{
  display:block !important;
  width:100% !important; height:auto !important;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:18px !important;
  border:1px solid #ececf0 !important;
  box-shadow:0 8px 26px rgba(0,0,0,.07) !important;
  background:#F7F7FA;
}

/* --- Vignettes des cartes de la page liste (fond CSS : pas de contenu a modifier) */
.p66-blog-card{ padding-top:0 !important; }
.p66-blog-card::before{
  content:"" !important; display:block !important;
  width:calc(100% + 44px) !important;
  margin:0 -22px 16px !important;
  aspect-ratio:16 / 9;
  background-color:#F7F7FA !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
  border-bottom:1px solid #ececf0 !important;
  height:auto !important;
}
.p66-blog-card:has(a[href*="/8-"])::before  { background-image:url("../img/blog/art-08.webp") !important; }
.p66-blog-card:has(a[href*="/9-"])::before  { background-image:url("../img/blog/art-09.webp") !important; }
.p66-blog-card:has(a[href*="/10-"])::before { background-image:url("../img/blog/art-10.webp") !important; }
.p66-blog-card:has(a[href*="/11-"])::before { background-image:url("../img/blog/art-11.webp") !important; }
.p66-blog-card:has(a[href*="/13-"])::before { background-image:url("../img/blog/art-13.webp") !important; }
.p66-blog-card:has(a[href*="/14-"])::before { background-image:url("../img/blog/art-14.webp") !important; }
.p66-blog-card:has(a[href*="/15-"])::before { background-image:url("../img/blog/art-15.webp") !important; }
.p66-blog-card:has(a[href*="/16-"])::before { background-image:url("../img/blog/art-16.webp") !important; }
.p66-blog-card:has(a[href*="/17-"])::before { background-image:url("../img/blog/art-17.webp") !important; }
.p66-blog-card:has(a[href*="/18-"])::before { background-image:url("../img/blog/art-18.webp") !important; }
.p66-blog-card:has(a[href*="/19-"])::before { background-image:url("../img/blog/art-19.webp") !important; }
.p66-blog-card:has(a[href*="/20-"])::before { background-image:url("../img/blog/art-20.webp") !important; }
.p66-blog-card:has(a[href*="/21-"])::before { background-image:url("../img/blog/art-21.webp") !important; }

/* la pastille de categorie repasse sous la vignette, avec la bonne marge laterale */
.p66-blog-card > .p66-blog-tag{ margin-left:0 !important; }

@media (max-width:767px){
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #main > .page-header{
    padding:26px 20px 24px !important;
    border-radius:16px !important;
  }
  :is(body.cms-id-8,body.cms-id-9,body.cms-id-10,body.cms-id-11,body.cms-id-13,body.cms-id-14,body.cms-id-15,body.cms-id-16,body.cms-id-17,body.cms-id-18,body.cms-id-19,body.cms-id-20,body.cms-id-21,body.cms-id-22,body.cms-id-23,body.cms-id-24) #wrapper #main > .page-header h1{
    font-size:1.5rem !important;
  }
  #wrapper #content.page-cms p.p66-cover{ margin:0 0 24px !important; }
  #wrapper #content.page-cms p.p66-cover img{ border-radius:14px !important; }
  .p66-blog-card::before{ border-radius:0 !important; }
}
/* deploy: illustrations blog (couvertures + vignettes) s57 — 20260712c */

/* --- 57b : resserrage des cartes (le H2 heritait d'un margin-top de 32px) */
.p66-blog-card .p66-blog-card-title{ margin-top:0 !important; }
.p66-blog-card::before{ margin-bottom:14px !important; }
/* deploy: resserrage cartes s57b — 20260712d */

/* --- 57c : figures pedagogiques dans le corps des articles */
#wrapper #content.page-cms p.p66-fig{
  margin:28px 0 32px !important;
  text-align:center !important;
}
#wrapper #content.page-cms p.p66-fig img{
  display:block !important;
  width:100% !important; height:auto !important;
  border-radius:14px !important;
  border:1px solid #ececf0 !important;
  box-shadow:0 4px 18px rgba(0,0,0,.06) !important;
  background:#fff;
}
@media (max-width:767px){
  #wrapper #content.page-cms p.p66-fig{ margin:22px 0 24px !important; }
  #wrapper #content.page-cms p.p66-fig img{ border-radius:10px !important; }
}
/* deploy: figures pedagogiques s57c — 20260712e */

/* ==========================================================================
   58 — MISSION MOBILE (v1.6.70) — desktop strictement inchange
   1. grille produits 2 colonnes
   2. hero plus haut + CTA
   3. barre de reassurance alignee
   4. sous-titre "Nos Gammes" raccourci
   5. marge basse (barre fixe + encoche iOS)
   ========================================================================== */
@media (max-width:767px){

  /* ---------- 1. GRILLE PRODUITS EN 2 COLONNES ---------- */
  /* NB : ne PAS toucher a .featured-products : ce bloc est deja en grille
     2 colonnes (cf. section 6, @media max-width:760px). Le passer en flex
     ici casserait la grille. On ne cible que les pages de listing. */
  #js-product-list .products.row,
  #products .products.row{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    justify-content:flex-start !important;
    margin-left:-5px !important; margin-right:-5px !important;
    align-items:stretch !important;
  }
  #js-product-list .products.row > .js-product,
  #products .products.row > .js-product{
    flex:0 0 50% !important; max-width:50% !important; width:50% !important;
    padding:0 5px !important; margin-bottom:10px !important;
    display:flex !important;
  }
  #js-product-list .products .product-miniature,
  #products .products .product-miniature{ width:100% !important; display:flex !important; }
  #js-product-list .products .product-miniature .thumbnail-container,
  #products .products .product-miniature .thumbnail-container{
    width:100% !important; height:auto !important;
    display:flex !important; flex-direction:column !important;
    margin:0 !important; padding:0 0 8px !important;
    border-radius:12px !important;
  }
  /* visuel : carre, donc hauteurs homogenes */
  .products .product-miniature .thumbnail-container .thumbnail,
  .products .product-miniature .thumbnail-container .product-thumbnail{
    display:block !important; width:100% !important;
  }
  .products .product-miniature .thumbnail-container img{
    width:100% !important; height:auto !important; aspect-ratio:1 / 1;
    object-fit:cover !important; border-radius:12px 12px 0 0 !important;
  }
  .products .product-miniature .product-description{
    padding:8px 8px 0 !important; flex:1 1 auto !important;
    display:flex !important; flex-direction:column !important;
  }
  /* nom : 2 lignes maxi */
  .products .product-miniature .product-title{
    margin:0 0 5px !important;
    font-size:.76rem !important; line-height:1.22 !important;
    min-height:calc(2 * 1.22 * .76rem);
    display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden !important; text-overflow:ellipsis;
  }
  .products .product-miniature .product-title a{ font-size:inherit !important; }
  .products .product-miniature .price{
    font-size:1rem !important; margin:0 !important; line-height:1.2 !important;
  }
  /* on degage ce qui alourdit la carte en 2 colonnes */
  .products .product-miniature .highlighted-informations,
  .products .product-miniature .variant-links,
  .products .product-miniature .product-description-short,
  .products .product-miniature .product-flags .discount{ display:none !important; }
  .products .product-miniature .product-flags{ transform:scale(.8); transform-origin:top left; }

  /* ---------- 2. HERO : format haut, banniere entiere + CTA ---------- */
  body#index #carousel{
    background:linear-gradient(160deg,#7C3AED 0%,#9B2AAE 55%,#C71F66 100%) !important;
    padding:14px 14px 16px !important;
    margin:0 0 6px !important;
  }
  body#index #carousel .carousel-inner,
  body#index #carousel .carousel-item{
    height:auto !important; min-height:0 !important;
  }
  body#index #carousel .carousel-item img{
    width:100% !important; height:auto !important;
    object-fit:contain !important;
    border-radius:14px !important;
    box-shadow:0 6px 18px rgba(0,0,0,.28) !important;
    display:block !important;
  }
  body#index #carousel .direction{ display:none !important; }
  body#index #carousel .carousel-indicators{
    position:static !important; margin:12px 0 0 !important; justify-content:center !important;
  }
  body#index #carousel .carousel-indicators li{
    width:7px !important; height:7px !important; border-radius:50% !important;
    background:rgba(255,255,255,.45) !important; border:0 !important; margin:0 4px !important;
    text-indent:-9999px !important;
  }
  body#index #carousel .carousel-indicators li.active{ background:#fff !important; }
  /* le CTA est injecte par le JS (bloc s58) */
  .p66-hero-cta{
    display:flex !important; align-items:center; justify-content:center; gap:8px;
    margin:12px 2px 0 !important; min-height:48px;
    background:#fff; color:#C71F66 !important;
    font-family:"Epilogue",sans-serif; font-weight:800; font-size:.95rem;
    letter-spacing:.02em; text-decoration:none !important;
    border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.22);
  }
  .p66-hero-cta:active{ transform:translateY(1px); }

  /* ---------- 3. REASSURANCE : 2x2 parfaitement aligne ---------- */
  body#index .p66-trust{
    grid-template-columns:1fr 1fr !important;
    align-items:stretch !important;
    gap:8px 10px !important; padding:12px 14px !important;
  }
  body#index .p66-trust-item{
    display:flex !important; align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important; min-height:40px !important;
  }
  body#index .p66-trust-ico{ font-size:20px !important; flex:0 0 20px !important; }
  body#index .p66-trust-txt{ justify-content:center !important; }
  body#index .p66-trust-tt{
    font-size:.76rem !important; line-height:1.18 !important; font-weight:800 !important;
  }
  /* libelles courts : le sous-titre est secondaire, on le retire sur mobile */
  body#index .p66-trust-st{ display:none !important; }

  /* ---------- 4. SOUS-TITRE "NOS GAMMES" RACCOURCI ---------- */
  body#index #content.page-home .p66-gammes .p66-gammes-sub{
    /* NB : font-size:0 masque le texte d'origine (contenu inchange dans le BO).
       Ne PAS mettre de max-width en "ch" ici : il serait calcule sur font-size 0. */
    font-size:0 !important; line-height:0 !important;
    margin:2px 0 14px !important; max-width:none !important;
    padding:0 16px !important;
  }
  body#index #content.page-home .p66-gammes .p66-gammes-sub::after{
    content:"Puffs rechargeables & e-liquides — livraison offerte dès 30 €";
    display:block; font-size:.85rem !important; line-height:1.4;
    max-width:310px; margin:0 auto; text-align:center;
  }

  /* ---------- 5. MARGE BASSE (barre fixe + encoche iOS) ---------- */
  .p66-stickybar{
    padding-bottom:env(safe-area-inset-bottom, 0px) !important;
  }
  body#index.p66-has-stickybar{
    padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body#index.p66-has-stickybar #footer{
    margin-bottom:10px !important;
  }
  /* ceinture + bretelles : un peu d'air en bas de toutes les pages mobiles */
  body:not(#index) #wrapper{ padding-bottom:24px !important; }
}
/* deploy: mission mobile (grille 2 col, hero, reassurance, sous-titre, marge bas) s58 — 20260713a */

/* --- 58b : logo mobile cliquable (retour accueil)
   Cause : le vrai logo est affiche en background-image sur #_mobile_logo,
   et l'<img> d'origine est en display:none -> le <a> qui l'entoure tombait
   a 0x0, donc plus aucune zone cliquable. On force le lien a couvrir le bloc. */
@media (max-width:767px){
  #_mobile_logo{ position:relative !important; }
  #_mobile_logo h1,
  #_mobile_logo .h1{
    margin:0 !important; padding:0 !important;
    width:100% !important; height:100% !important;
  }
  #_mobile_logo a{
    display:block !important;
    position:absolute !important; top:0; left:0; right:0; bottom:0;
    width:100% !important; height:100% !important;
    font-size:0 !important; line-height:0 !important;
    z-index:2;
  }
}
/* deploy: logo mobile cliquable s58b — 20260713b */

/* ===== 60 — Panier mobile : zone de tap confortable (>=44px) =====
   Le tap est gere par le JS s60. Ici on garantit juste une cible large et
   un curseur pointer. Mobile uniquement, desktop inchange. */
@media (max-width:767px){
  #_mobile_cart{ cursor:pointer !important; }
  #_mobile_cart .blockcart,
  #_mobile_cart .blockcart .header{
    cursor:pointer !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  /* toute la zone reste cliquable, meme le compteur et l'icone */
  #_mobile_cart .blockcart .header > *{ pointer-events:none !important; }
}
/* deploy: panier mobile s60 — 20260715 */

/* ===== 67 — Compteur panier MOBILE lisible : chiffre noir sur pastille blanche ===== */
@media (max-width:767px){
  #_mobile_cart .cart-products-count{
    background:#fff !important;
    color:#111 !important;      /* etait #ad2f5d (rose mute) -> illisible */
    font-weight:800 !important;
  }
}

/* ===== 68 — HEADER DESKTOP : plus de debordement horizontal =====
   Cause : la rangee flex (logo | menu | recherche | compte+panier) etait plus
   large que la fenetre sur les ecrans <= ~1366px (le libelle « E-liquides 10ml
   sel de nicotine » a lui seul = 237px). Le panier sortait a droite et, la page
   devenant plus large que l'ecran, « Contactez-nous » paraissait coupe a gauche.
   Correctif : on autorise les enfants flex a retrecir (min-width:0), on aligne
   « Contactez-nous » sur la meme marge que la droite, et on compacte legerement
   le menu + la recherche sous 1400px. Les libelles longs sont raccourcis en JS.
   Mobile (<768px) NON concerne. */
@media (min-width:768px){
  /* aucune ligne du header ne depasse la fenetre */
  .header-top, .header-top .container, .header-top .container > .row{ max-width:100% !important; }
  /* les blocs flex peuvent retrecir au lieu de pousser le panier hors ecran */
  .header-top-right{ min-width:0 !important; }
  .header-top-right > *{ min-width:0 !important; }
  .header-top-right #_desktop_top_menu{ min-width:0 !important; }
  .p66-header-utils{ flex:0 0 auto !important; }
  /* la recherche peut retrecir (au lieu d'etre figee a 230px) */
  .header-top #search_widget{ flex:0 1 230px !important; min-width:120px !important; }
  /* « Contactez-nous » aligne sur la marge laterale (comme a droite), pas colle au bord */
  #p66-contact-left{ left:28px !important; }
}
/* ecrans portables : on compacte le menu et la recherche pour tout faire tenir */
@media (min-width:768px) and (max-width:1400px){
  #_desktop_top_menu .top-menu > li > a{ font-size:12px !important; padding-left:8px !important; padding-right:8px !important; }
  .header-top #search_widget{ flex:0 1 200px !important; }
}
@media (min-width:768px) and (max-width:1200px){
  #_desktop_top_menu .top-menu > li > a{ font-size:11.5px !important; padding-left:6px !important; padding-right:6px !important; }
  .header-top #search_widget{ flex:0 1 160px !important; }
  .header-top .container, .header-nav .container{ padding-left:18px !important; padding-right:18px !important; }
  #p66-contact-left{ left:18px !important; }
}
/* deploy: header desktop no-overflow + compteur mobile noir — 20260715 */

/* ===== 69 — QUICK-ADD MOBILE : bouton pilule + bottom-sheet nicotine =====
   Bouton masque par defaut (desktop). Visible seulement <=767px. */
.p66-qa-btn{ display:none; }
@media (max-width:767px){
  #js-product-list .js-product-miniature .p66-qa-btn,
  #products .js-product-miniature .p66-qa-btn{
    display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
    width:100% !important; margin:8px 0 2px !important; min-height:42px; padding:9px 12px;
    border:0 !important; border-radius:999px !important; cursor:pointer;
    background:linear-gradient(90deg,#7C3AED 0%,#C71F66 100%) !important;
    color:#fff !important; font-weight:800 !important; font-size:.86rem !important; line-height:1 !important;
    box-shadow:0 3px 10px rgba(124,58,237,.28); -webkit-tap-highlight-color:transparent;
    text-transform:none !important; letter-spacing:0 !important;
  }
  /* le texte du bouton DOIT rester blanc (le theme force #1a1a1e sur les
     textes de carte -> on remonte la specificite pour gagner a coup sur) */
  html body #js-product-list .js-product-miniature button.p66-qa-btn:not(.p66-qa-oos),
  html body #products .js-product-miniature button.p66-qa-btn:not(.p66-qa-oos),
  html body #js-product-list .js-product-miniature button.p66-qa-btn:not(.p66-qa-oos) *,
  html body #products .js-product-miniature button.p66-qa-btn:not(.p66-qa-oos) *{
    color:#fff !important; -webkit-text-fill-color:#fff !important;
  }
  .p66-qa-btn .p66-qa-plus{ font-size:1.1rem; font-weight:900; line-height:0; }
  .p66-qa-btn:active{ transform:translateY(1px); }
  .p66-qa-btn.p66-qa-loading{ opacity:.72 !important; }
  .p66-qa-btn.p66-qa-done{ background:#1c9e63 !important; box-shadow:none !important; }
  .p66-qa-btn.p66-qa-oos{
    background:#3a3a40 !important; color:#c4c4cc !important; box-shadow:none !important;
    cursor:not-allowed; font-weight:700 !important;
  }
}

/* ----- bottom-sheet (fiche qui remonte du bas) ----- */
.p66-sheet-ov{
  position:fixed; inset:0; z-index:2147482000;
  background:rgba(15,15,18,.5);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .25s ease;
}
.p66-sheet-ov.open{ opacity:1; }
.p66-sheet{
  width:100%; max-width:560px; background:#fff;
  border-radius:20px 20px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -12px 40px rgba(0,0,0,.28);
}
.p66-sheet-ov.open .p66-sheet{ transform:translateY(0); }
.p66-sheet-grab{ width:42px; height:5px; border-radius:3px; background:#dcdce3; margin:4px auto 14px; }
.p66-sheet-title{ font-weight:800; font-size:1.02rem; color:#161616; text-align:center; line-height:1.3; }
.p66-sheet-sub{ font-size:.85rem; color:#666; text-align:center; margin:6px 0 16px; }
.p66-sheet-opts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.p66-sheet-opt{
  flex:0 0 auto; min-width:76px; min-height:48px; padding:10px 18px;
  border-radius:12px; border:2px solid #e4e4ea; background:#f7f7fa;
  color:#242424; font-weight:700; font-size:.98rem; cursor:pointer; transition:all .15s ease;
}
.p66-sheet-opt.is-sel{ border-color:#C71F66; background:#fdeef4; color:#a3134f; }
.p66-sheet-add{
  width:100%; min-height:52px; border:0; border-radius:14px; cursor:pointer;
  background:linear-gradient(90deg,#7C3AED 0%,#C71F66 100%); color:#fff;
  font-weight:800; font-size:1rem; box-shadow:0 4px 14px rgba(199,31,102,.3);
}
.p66-sheet-add.is-loading{ opacity:.8; }
@media (min-width:768px){ .p66-sheet-ov{ display:none !important; } }
/* deploy: quick-add mobile s62 — 20260715 */

/* ===== 70 — Header : « Contactez-nous » a droite avec deroulant (desktop) =====
   Place dans le groupe droite (.p66-header-utils), avant Connexion. */
#p66-contact-left{ display:none !important; }   /* ancien bloc gauche neutralise */

.p66-cdrop{ position:relative; display:inline-flex; align-items:center; }
.p66-cdrop-trigger{
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:0; cursor:pointer; font-family:inherit;
  color:#fff !important; font-weight:600; font-size:14px; line-height:1;
  padding:8px 6px; white-space:nowrap;
}
.p66-cdrop-trigger:hover{ color:rgba(255,255,255,.85) !important; }
.p66-cdrop-caret{ font-size:11px; transition:transform .2s ease; }
.p66-cdrop.open .p66-cdrop-caret{ transform:rotate(180deg); }
.p66-cdrop-menu{
  position:absolute; top:100%; right:0; min-width:230px; z-index:1200;
  background:#fff; border-radius:12px; padding:8px; margin-top:2px;
  box-shadow:0 14px 34px rgba(20,20,25,.22);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.p66-cdrop.open .p66-cdrop-menu{ opacity:1; visibility:visible; transform:none; }
.p66-cdrop-item{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px; border-radius:9px;
  color:#242424 !important; text-decoration:none !important;
  font-weight:600; font-size:14px; white-space:nowrap; transition:background .15s ease, color .15s ease;
}
.p66-cdrop-item:hover{ background:linear-gradient(90deg,#7C3AED 0%,#C71F66 100%); color:#fff !important; }
.p66-cdrop-item .p66-cdrop-ic{ font-size:15px; }
/* deroulant masque sur mobile (le tiroir gere le contact) */
@media (max-width:767px){ #p66-contact-drop{ display:none !important; } }

/* ----- « Contactez-nous » dans le tiroir mobile ----- */
.p66-mm-contact .p66-mm-cat{ cursor:pointer; }
.p66-mm-contact .p66-mm-catlink{ font-weight:700 !important; }
.p66-mm-contact .p66-mm-ctog{
  background:transparent !important; border:0 !important; cursor:pointer; color:inherit;
  display:inline-flex; align-items:center; padding:6px; transition:transform .2s ease;
}
.p66-mm-contact.open .p66-mm-ctog{ transform:rotate(180deg); }
.p66-mm-contact .p66-mm-subs a{ display:flex !important; align-items:center; gap:8px; }
.p66-mm-contact .p66-mm-subs a .p66-cdrop-ic{ font-size:15px; }
/* deploy: header contact deroulant s39v2 — 20260715 */

/* ===== 71 — Header : compaction pour faire tenir Contact+Connexion+Panier =====
   L'ajout de « Contactez-nous » a droite elargit le groupe droit : on compacte
   le declencheur, la recherche et le menu sur les ecrans <=1400px. */
@media (min-width:768px) and (max-width:1400px){
  .p66-cdrop-trigger{ font-size:13px !important; padding:8px 4px !important; gap:4px !important; }
  .p66-header-utils{ gap:8px !important; }
  .header-top #search_widget{ flex:0 1 168px !important; }
}
@media (min-width:768px) and (max-width:1300px){
  .p66-cdrop-trigger{ font-size:12px !important; padding:8px 3px !important; }
  .p66-header-utils{ gap:6px !important; }
  .header-top #search_widget{ flex:0 1 116px !important; }
  #_desktop_top_menu .top-menu > li > a{ font-size:11px !important; padding-left:4px !important; padding-right:4px !important; }
  .header-top .container, .header-nav .container{ padding-left:14px !important; padding-right:14px !important; }
}
/* deploy: header compaction contact s71 — 20260715b */

/* =========================================================================
   72 — Avis clients : bouton "Donner votre avis" (s64)
   ========================================================================= */
.p66-review-cta{
  display:flex; justify-content:center;
  margin:18px 0 6px;
}
.p66-review-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px;
  border:0; border-radius:999px;
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%);
  color:#fff !important; -webkit-text-fill-color:#fff;
  font-weight:700; font-size:15px; line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(124,58,237,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.p66-review-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(199,31,102,.34);
  filter:brightness(1.05);
}
.p66-review-btn .p66-review-star{ font-size:16px; line-height:1; }
/* deploy: avis clients bouton s64 — 20260715c */

/* =========================================================================
   73 — Cases à cocher VISIBLES (inscription / compte / newsletter / RGPD)
   -------------------------------------------------------------------------
   Bug : le span visuel de .custom-checkbox heritait d'une bordure blanche
   a 12% (couleur du theme sombre) sur des pages a fond blanc -> case
   invisible (consentement RGPD, CGV, newsletter, offres partenaires).
   On lui redonne une vraie case grise + fond blanc + coche magenta.
   Le checkout (#conditions-to-approve) garde ses regles propres (plus
   specifiques), donc inchange.
   ========================================================================= */
.custom-checkbox input[type="checkbox"] + span{
  display:inline-block !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  border:2px solid #9a9aa5 !important;
  border-radius:5px !important;
  background:#fff !important;
  position:relative !important;
  vertical-align:-5px !important;
  margin-right:8px !important;
  box-shadow:none !important;
  opacity:1 !important;
}
/* on masque l'icone Material du theme pour eviter une double coche */
.custom-checkbox input[type="checkbox"] + span .checkbox-checked{ display:none !important; }
/* etat coche : fond degrade + coche blanche dessinee en CSS */
.custom-checkbox input[type="checkbox"]:checked + span{
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  border-color:#C71F66 !important;
}
.custom-checkbox input[type="checkbox"]:checked + span::after{
  content:"" !important;
  position:absolute !important; left:5px; top:1px;
  width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
/* focus clavier accessible */
.custom-checkbox input[type="checkbox"]:focus + span{
  box-shadow:0 0 0 3px rgba(199,31,102,.25) !important;
}
/* deploy: cases a cocher visibles inscription/compte s73 — 20260715d */

/* =========================================================================
   73b — Cases a cocher : override haute specificite (bat body:not(#index))
   La regle theme sombre "body:not(#index) :where(.custom-checkbox span)"
   imposait border-color blanc 12%. On repasse dessus avec le meme prefixe
   body:not(#index) + selecteurs plus specifiques pour gagner.
   ========================================================================= */
body:not(#index) .custom-checkbox input[type="checkbox"] + span{
  border:2px solid #9a9aa5 !important;
  background:#fff !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  border-radius:5px !important;
  position:relative !important;
  vertical-align:-5px !important;
  margin-right:8px !important;
  box-shadow:none !important;
  opacity:1 !important;
}
body:not(#index) .custom-checkbox input[type="checkbox"] + span .checkbox-checked{ display:none !important; }
body:not(#index) .custom-checkbox input[type="checkbox"]:checked + span{
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  border-color:#C71F66 !important;
}
body:not(#index) .custom-checkbox input[type="checkbox"]:checked + span::after{
  content:"" !important; position:absolute !important; left:5px; top:1px;
  width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
body:not(#index) .custom-checkbox input[type="checkbox"]:focus + span{
  box-shadow:0 0 0 3px rgba(199,31,102,.25) !important;
}
/* deploy: cases a cocher override specificite s73b — 20260715e */

/* =========================================================================
   74 — Footer : newsletter + INFORMATIONS lisibles hors accueil
   -------------------------------------------------------------------------
   Bug : sur toutes les pages sauf l'accueil, le bloc newsletter
   (#blockEmailSubscription_displayFooterBefore) et le bloc INFORMATIONS
   (.block-contact) gardaient un fond BLANC alors que leur texte est force
   en clair (#ECECEF) -> ecriture grise illisible sur fond blanc.
   On leur redonne le fond sombre du footer. L'accueil (body#index), deja
   correct, n'est pas touche.
   ========================================================================= */
body:not(#index) #blockEmailSubscription_displayFooterBefore,
body:not(#index) .block_newsletter,
body:not(#index) #footer .block-contact,
body:not(#index) #footer .block-contact.wrapper{
  background-color:#0E0E10 !important;
  background-image:none !important;
  box-shadow:none !important;
}
/* textes du bloc newsletter + informations : bien clairs sur le fond sombre */
body:not(#index) #blockEmailSubscription_displayFooterBefore .h3,
body:not(#index) #blockEmailSubscription_displayFooterBefore h4,
body:not(#index) .block_newsletter .h3,
body:not(#index) .block_newsletter h4,
body:not(#index) #footer .block-contact .h3,
body:not(#index) #footer .block-contact .title,
body:not(#index) #footer .block-contact .title *{
  color:#FFFFFF !important;
}
body:not(#index) .block_newsletter p,
body:not(#index) #footer .block-contact,
body:not(#index) #footer .block-contact li,
body:not(#index) #footer .block-contact a,
body:not(#index) #footer .block-contact span{
  color:#ECECEF !important;
}
body:not(#index) .block_newsletter p small,
body:not(#index) .block_newsletter .form-text,
body:not(#index) .block_newsletter .text-muted{
  color:#B0B0B8 !important;
}
/* deploy: footer newsletter + informations lisibles s74 — 20260716a */

/* 75 — Tableaux dans les articles de blog (conversion nicotine, etc.) */
.p66-tbl{
  width:100% !important;
  border-collapse:collapse !important;
  margin:26px 0 !important;
  font-size:15px !important;
  background:#fff !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:0 1px 3px rgba(14,14,16,.10) !important;
}
.p66-tbl caption{
  caption-side:top !important;
  text-align:left !important;
  font-size:13px !important;
  color:#6B6B78 !important;
  padding:0 0 8px 2px !important;
}
.p66-tbl thead th{
  background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  color:#fff !important;
  font-weight:600 !important;
  text-align:left !important;
  padding:12px 14px !important;
  border:0 !important;
  white-space:nowrap !important;
}
.p66-tbl tbody td{
  padding:11px 14px !important;
  border-top:1px solid #EAEAEF !important;
  color:#1B1B22 !important;
  vertical-align:middle !important;
}
.p66-tbl tbody tr:nth-child(even){ background:#FAFAFC !important; }
.p66-tbl tbody tr:last-child td{ font-weight:600 !important; }
.p66-tbl tbody td:first-child{ font-weight:600 !important; white-space:nowrap !important; }
.p66-tbl tbody td:nth-child(2){ color:#C71F66 !important; font-weight:700 !important; white-space:nowrap !important; }
@media (max-width:480px){
  .p66-tbl{ font-size:13.5px !important; }
  .p66-tbl thead th, .p66-tbl tbody td{ padding:9px 8px !important; }
}
/* deploy: tableaux blog s75 — 20260716b */

/* 75b — Surcharge specificite tableaux blog.
   Le theme applique `body:not(#index) #wrapper :where(...)` = (2,0,1) !important
   sur th/td. Il faut donc au moins (2,1,3) pour reprendre la main. */
body:not(#index) #wrapper .p66-tbl thead th,
body:not(#index) #content .p66-tbl thead th{
  color:#fff !important;
  background-image:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
  border:0 !important;
}
body:not(#index) #wrapper .p66-tbl tbody td,
body:not(#index) #content .p66-tbl tbody td{
  color:#1B1B22 !important;
}
body:not(#index) #wrapper .p66-tbl tbody td:nth-child(2),
body:not(#index) #content .p66-tbl tbody td:nth-child(2){
  color:#C71F66 !important;
  font-weight:700 !important;
}
body:not(#index) #wrapper .p66-tbl caption,
body:not(#index) #content .p66-tbl caption{
  color:#6B6B78 !important;
}
/* deploy: tableaux blog specificite s75b — 20260716c */

/* 76 — Marqueur « * » sur les champs obligatoires (adresse, checkout, compte).
   PrestaShop pose deja la classe .required sur le label ; le theme ne l'affiche pas.
   On se contente de la reveler, pour TOUS les champs requis (coherence). */
body#checkout .form-control-label.required::after,
body#address .form-control-label.required::after,
body#authentication .form-control-label.required::after,
body#identity .form-control-label.required::after{
  content:" *" !important;
  color:#C71F66 !important;
  font-weight:700 !important;
  margin-left:2px !important;
}
/* Message d'erreur natif du navigateur : rien a styler (rendu OS).
   Message PrestaShop « adresse incomplete » : on s'assure du contraste. */
body#checkout .alert-danger,
body#checkout .js-address-error{
  background-color:#FDECEF !important;
  color:#8A1538 !important;
  border-left:3px solid #C71F66 !important;
}
/* deploy: asterisque champs obligatoires s76 — 20260717a */

/* ============================================================
   Section 77 (v1.6.108) — ACCUEIL MOBILE : haut fluidifié.
   Héro bord à bord (fini l'îlot noir des S.38/43), CTA en overlay
   sur le bas du héro (dégradé violet→magenta), transitions de fond
   adoucies (héro → réassurance dégradé → « Nos Gammes » en feuille
   claire arrondie), cartes catégories plus grandes + indice « → ».
   Scope STRICT : body#index + @media (max-width:767px).
   Desktop (>767px) totalement inchangé.
   Rollback : supprimer la Section 77.
   ============================================================ */
@media (max-width:767px){
  /* 1) HÉRO bord à bord : annule l'îlot noir (box-shadow/clip-path S.38/43)
        et le cadre (padding/gradient/rayon) de la couche précédente. */
  body#index #carousel{
    position:relative !important;
    width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 !important;
    border-radius:0 !important;
    background:#0E0E10 !important;
    box-shadow:none !important;
    -webkit-clip-path:none !important; clip-path:none !important;
    aspect-ratio:1 / 1 !important; height:auto !important; min-height:0 !important; max-height:none !important;
    overflow:hidden !important;
  }
  /* héro mobile agrandi : format carré, image recadrée en cover (visuel plus impactant) */
  body#index #carousel ul.carousel-inner,
  body#index #carousel .carousel-inner{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; min-height:0 !important; max-height:none !important;
    margin:0 !important; transform:none !important;
  }
  body#index #carousel ul.carousel-inner > li.carousel-item,
  body#index #carousel .carousel-item{
    display:none !important;
    height:100% !important; min-height:0 !important; max-height:none !important;
    width:100% !important; position:absolute !important; inset:0 !important; float:none !important; transform:none !important; margin:0 !important;
  }
  body#index #carousel ul.carousel-inner > li.carousel-item.active,
  body#index #carousel .carousel-item.active{
    display:block !important;
    height:100% !important; width:100% !important; position:absolute !important; inset:0 !important;
  }
  body#index #carousel .carousel-item.active > a,
  body#index #carousel .carousel-item.active > a > figure,
  body#index #carousel .carousel-item a,
  body#index #carousel .carousel-item figure{
    height:100% !important; width:100% !important; margin:0 !important; padding:0 !important; display:block !important;
  }
  body#index #carousel .carousel-item.active img,
  body#index #carousel .carousel-item img,
  body#index #carousel img{
    width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
    object-fit:cover !important; object-position:center 45% !important;
    border-radius:0 !important; box-shadow:none !important; margin:0 !important; display:block !important;
  }
  /* indicateurs (points) masqués : le CTA occupe le bas du héro */
  body#index #carousel .carousel-indicators{ display:none !important; }
  /* scrim sombre en bas du héro : lisibilité du CTA quel que soit le visuel */
  body#index #carousel::after{
    content:"" !important; position:absolute !important; left:0; right:0; bottom:0;
    height:72px !important; pointer-events:none !important; z-index:1 !important;
    background:linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%) !important;
  }
  /* 1ter) ANTI-FLASH : l'ancien carrousel image ne doit JAMAIS s'afficher
     (même un instant avant le JS). On le masque dès le 1er rendu et on met
     le poster de la vidéo en fond du héro → transition invisible vers la vidéo. */
  body#index #carousel .carousel-inner{ display:none !important; }
  body#index #carousel{
    background:#0e0e12 url('/modules/puffcss/views/video/hero-poster.jpg?r=3') center 45% / cover no-repeat !important;
  }

  /* 1bis) Bandeau défilant en fond SOMBRE (se détache du header dégradé,
     casse l'empilement « pavé violet » du haut). Texte clair. Mobile only. */
  .p66-marquee{
    background:#0E0E10 !important; background-image:none !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    box-shadow:none !important;
  }
  .p66-marquee,
  .p66-marquee a,
  .p66-marquee span,
  .p66-marquee li,
  .p66-marquee *{
    color:#ECECEF !important;
    -webkit-text-fill-color:#ECECEF !important;
  }

  /* 2) CTA en overlay sur le bas du héro, dégradé violet→magenta, texte blanc */
  body#index #carousel .p66-hero-cta,
  .p66-hero-cta{
    position:absolute !important; left:12px !important; right:auto !important; bottom:11px !important;
    transform:none !important;
    z-index:2 !important; margin:0 !important;
    width:auto !important; max-width:calc(100% - 24px) !important;
    padding:7px 14px !important; min-height:0 !important;
    background:linear-gradient(135deg,#7C3AED 0%,#C71F66 100%) !important;
    color:#ffffff !important;
    font-weight:700 !important; font-size:.8rem !important; letter-spacing:.01em !important;
    border-radius:999px !important; box-shadow:0 5px 14px rgba(124,58,237,.42) !important;
    display:inline-flex !important; align-items:center !important; gap:5px !important;
    text-decoration:none !important; white-space:nowrap !important;
  }
  body#index #carousel .p66-hero-cta span,
  .p66-hero-cta span{ color:#fff !important; font-size:.85em !important; }
  .p66-hero-cta:active{ transform:translateY(1px) !important; }

  /* 3) TRANSITIONS de fond adoucies : héro → barre réassurance (dégradé) collée →
        « Nos Gammes » clair qui remonte en feuille arrondie (séparation voulue). */
  body#index #content.page-home #carousel{ margin-bottom:0 !important; }
  body#index #content.page-home .p66-trust{
    margin-top:0 !important; margin-bottom:0 !important;
    border-radius:0 !important;
    padding:16px 16px 22px !important;
  }
  body#index #content.page-home .p66-gammes{
    position:relative !important; z-index:2 !important;
    margin:-16px 0 10px !important;
    border-radius:20px 20px 14px 14px !important;
    padding:18px 12px 16px !important;
    box-shadow:0 -6px 18px rgba(20,20,45,.10) !important;
  }

  /* 4) CARTES catégories plus grandes + indice de clic (garde 2 colonnes) */
  body#index .p66-gammes .p66-gamme{
    position:relative !important;
    aspect-ratio:3 / 2 !important;
    border-radius:16px !important;
    box-shadow:0 6px 18px rgba(124,58,237,.18) !important;
    transition:transform .12s ease, box-shadow .12s ease !important;
  }
  body#index .p66-gammes .p66-gamme:active{
    transform:scale(.975) !important;
    box-shadow:0 3px 10px rgba(124,58,237,.20) !important;
  }
  body#index .p66-gammes .p66-gamme-name{
    padding:30px 14px 13px !important;
    text-align:center !important;
    font-size:1.14rem !important; font-weight:800 !important;
    line-height:1.15 !important; letter-spacing:.2px !important;
    text-shadow:0 2px 8px rgba(0,0,0,.65) !important;
    background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,0) 100%) !important;
  }
  /* pastille flèche supprimée : la carte entière reste cliquable, libellé centré */
  body#index .p66-gammes .p66-gamme::after{
    content:none !important; display:none !important;
  }

  /* 5) respiration : espacements réguliers */
  body#index .featured-products{ margin:14px auto 18px !important; }
}
/* deploy: accueil mobile fluidifie — hero bord a bord + CTA overlay + transitions + cartes s77 — 20260721 */

/* ===== Section 60 (2026-08-09) — Guides 22/23 dans le style article + encadré "En bref" ===== */
/* Encadré "En bref" en tête de guide : liseré magenta + fond tinté, cohérent avec les blockquotes */
:is(body.cms-id-22,body.cms-id-23,body.cms-id-24) #content.page-cms p[style*="f3e9fb"],
#content .rte p[style*="f3e9fb"],.page-cms p[style*="f3e9fb"]{
  background:linear-gradient(135deg,rgba(124,58,237,.07),rgba(199,31,102,.07)) !important;
  border-left:4px solid #C71F66 !important;
  border-radius:10px !important;
  padding:16px 18px !important;
  margin:.4rem 0 1.6rem !important;
  color:#1a1a1e !important;
  font-family:Epilogue,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-size:1rem !important;
  line-height:1.6 !important;
}
/* deploy: guides 22/23 scope + En bref s60 — 20260809 */