/** Shopify CDN: Minification failed

Line 7369:0 All "@import" rules must come first

**/
/* ============================================
   WITH—BY— Theme v2 — Global Styles
   Based on design system v2 (April 2026)
   ============================================ */

/* --- FONTS --- */
@font-face { font-family:'FT Polar'; src:url('FTPolar-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-BookItalic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Regular.woff2') format('woff2'); font-weight:450; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Heavy.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'FT Polar'; src:url('FTPolar-Black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('FragmentMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fragment Mono'; src:url('FragmentMono-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

/* --- CSS VARIABLES --- */
:root {
  --font-primary: 'FT Polar', sans-serif;
  --font-mono: 'Fragment Mono', monospace;

  --black: #000000;
  --white: #ffffff;
  --gray-bg: #d9d9d9;      /* header background */
  --gray-panel: #EFEFEF;   /* configurator panel bg */
  --red: #FF5656;
  --green: #33B76E;
  --blue: #337AFF;
  --error: #FF0202;
  --announcement-bg: #4285f4;

  --gradient-rgb: linear-gradient(90deg, #FF5656 0%, #33B76E 50%, #337AFF 100%);

  --header-h: 47px;
  --announcement-h: 35px;
  --footer-h: 35px;

  --tr: 0.3s ease;
  --tr-fast: 0.15s ease;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font-primary); font-weight: 400; color: var(--black); background: var(--black); overflow-x: hidden; }
main { display: block; margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* --- UTILITY --- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.img-cover { width:100%; height:100%; object-fit:cover; }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }

/* --- ANNOUNCEMENT BAR --- */
.announcement-bar {
  background: var(--announcement-bg);
  height: var(--announcement-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}
.announcement-marquee { overflow: hidden; width: 100%; }
.announcement-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 25s linear infinite;
}
.announcement-item {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 0 32px;
}
.announcement-dot { color: rgba(255,255,255,0.4); padding: 0 8px; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* --- HEADER WRAP (announcement + header, glissent ensemble au scroll) --- */
#site-header-wrap {
  transition: transform 0.35s ease;
  will-change: transform;
}
#site-header-wrap.is-hidden { transform: translateY(-100%); }

/* --- HEADER --- */
.site-header {
  background: var(--gray-bg);
  border-bottom: none;
  height: var(--header-h);
  z-index: 40;
}
.site-header.on-configurator { transform: none !important; }

.header-inner {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media (min-width: 768px) { .header-inner { padding: 0 20px; } }

/* Menu button — BLACK with white text (v2) */
.header-menu-btn {
  background: var(--black);
  border: 1px solid var(--black);
  border-radius: 14px;
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--tr-fast);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) { .header-menu-btn { padding: 0 20px; font-size: 12px; } }
.header-menu-btn:hover { background: #222; }

.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}
.header-logo img { height: 17px; width: 148px; object-fit: contain; }

/* Cart button — BLACK with white icon (v2) */
.header-cart-btn {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--black);
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background var(--tr-fast);
}
.header-cart-btn:hover { background: #222; }

.cart-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 20px;
  height: 20px;
  background: var(--error);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  color: var(--white);
  line-height: 1;
}

/* --- NAV DRAWER --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr);
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: var(--white);
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) { .nav-drawer { max-width: 40%; } }
@media (min-width: 1024px) { .nav-drawer { max-width: 27%; } }
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-inner {
  padding: 32px 48px 96px;
  width: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .nav-drawer-inner { padding: 32px 24px 96px; }
}

.nav-section { margin-bottom: 40px; }
.nav-section-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  color: var(--black);
  margin-bottom: 12px;
}
@media (min-width: 768px) { .nav-section-title { font-size: 20px; } }

.nav-links { display: flex; flex-direction: column; gap: 12px; padding-left: 24px; }
.nav-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  display: block;
  transition: opacity var(--tr-fast);
}
@media (min-width: 768px) { .nav-link { font-size: 18px; } }
.nav-link:hover { opacity: 0.5; }

/* Product preview on hover — desktop */
.nav-preview {
  display: none;
}
@media (min-width: 1024px) {
  .nav-preview {
    display: block;
    position: absolute;
    bottom: 48px;
    left: 48px;
    right: 48px;
  }
  .nav-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
  }
  .nav-preview-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gray-bg);
    border-radius: 12px;
  }
}

/* Close button — mobile bottom center */
.nav-close-mobile {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  padding: 16px 0 32px;
  justify-content: center;
  z-index: 51;
}
@media (min-width: 768px) { .nav-close-mobile { display: none; } }
.nav-close-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity var(--tr-fast);
}
.nav-close-btn:hover { opacity: 0.6; }

/* --- FOOTER --- */
.site-footer {
  background: var(--black);
  min-height: var(--footer-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px 8px;
  position: relative;
  flex-shrink: 0;
  gap: 4px;
}
@media (min-width: 768px) {
  .site-footer {
    flex-direction: row;
    padding: 4px 20px 8px;
    gap: 0;
    height: var(--footer-h);
  }
}

.footer-left { order: 2; display: flex; align-items: center; gap: 6px; }
@media (min-width: 768px) { .footer-left { position: absolute; left: 20px; order: unset; } }

.footer-center { order: 3; }
@media (min-width: 768px) { .footer-center { position: absolute; left: 50%; transform: translateX(-50%); order: unset; } }

.footer-right {
  order: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 768px) { .footer-right { position: absolute; right: 20px; order: unset; flex-wrap: nowrap; } }

.footer-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--white);
  background: var(--black);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 10px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  transition: background var(--tr-fast);
  white-space: nowrap;
  cursor: pointer;
}
@media (min-width: 768px) { .footer-pill { font-size: 12px; } }
.footer-pill:hover { background: #1a1a1a; }
.footer-pill.active { background: var(--white); color: var(--black); }

.footer-copyright {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--white);
  white-space: nowrap;
}
@media (min-width: 768px) { .footer-copyright { font-size: 12px; } }

.footer-lang { position: relative; }
.footer-lang-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--black);
  border: 1px solid var(--white);
  border-radius: 10px;
  overflow: hidden;
  min-width: 100px;
  display: none;
  z-index: 60;
}
.footer-lang-dropdown.open { display: block; }
.footer-lang-option {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--tr-fast);
}
.footer-lang-option:hover { background: #1a1a1a; }
.footer-lang-divider { height: 1px; background: rgba(255,255,255,0.3); }

/* --- SCROLL ANIMATIONS --- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.5s; }

/* --- PARALLAX IMAGES --- */
.parallax-wrap {
  overflow: hidden;
  border-radius: 12px;
}
.parallax-img {
  width: 100%;
  object-fit: cover;
  will-change: transform;
}

/* --- PRODUCT PAGE --- */
.product-page { background: var(--black); color: var(--white); min-height: 100vh; overflow-x: hidden; }

.product-section { padding: 48px 24px; }
@media (min-width: 768px) { .product-section { padding: 64px 48px; } }
@media (min-width: 1024px) { .product-section { padding: 96px 48px; } }

.product-section-inner { max-width: 841px; margin: 0 auto; }
.product-section-inner--wide { max-width: 1440px; margin: 0 auto; }
.product-section-inner--center { text-align: center; }
@media (max-width: 767px) { .product-section-inner--center { text-align: left; } }

.product-h1 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 48px);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.product-h2 {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.3;
  margin-bottom: 32px;
}
.product-h3 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  margin-bottom: 20px;
}
.product-body {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
}
.product-body p { margin-bottom: 16px; }

/* Parallax image section */
.product-image-section { padding: 24px; }
@media (min-width: 768px) { .product-image-section { padding: 32px 48px; } }
@media (min-width: 1024px) { .product-image-section { padding: 48px; } }

.product-image-wrap {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4/5;
}
@media (min-width: 768px) { .product-image-wrap { aspect-ratio: 16/9; } }
.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* CTA inline */
.product-cta-wrap {
  text-align: left;
  margin-top: 32px;
}
@media (min-width: 768px) { .product-cta-wrap { text-align: center; } }
.product-cta-btn {
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 999px;
  padding: 8px 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 20px);
  cursor: pointer;
  transition: background var(--tr-fast);
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
}
.product-cta-btn:hover { background: #f0f0f0; }
.product-price-label {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}
@media (min-width: 768px) { .product-price-label { font-size: 16px; } }

/* --- SLIDESHOW --- */
.slideshow-wrap { position: relative; }

/* Mobile: horizontal scroll */
.slideshow-mobile-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 24px;
  padding-right: 40px;
}
.slideshow-mobile-scroll::-webkit-scrollbar { display: none; }
.slideshow-mobile-item {
  flex: 0 0 85vw;
  scroll-snap-align: start;
  border-radius: 12px;
  overflow: hidden;
}

/* Desktop: 2-col */
.slideshow-desktop-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (min-width: 768px) { .slideshow-desktop-grid { display: grid; } }
@media (max-width: 767px) { .slideshow-mobile-scroll { display: flex; } }
@media (min-width: 768px) { .slideshow-mobile-scroll { display: none; } }

.slide-image-square { aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
.slide-image-circle { aspect-ratio: 1; border-radius: 50%; overflow: hidden; max-width: 480px; margin: 0 auto; }
.slide-image-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--red), var(--green), var(--blue)); }

.slideshow-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 767px) { .slideshow-nav-row { margin-top: 16px; } }
.slide-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--tr-fast);
}
.slide-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.slide-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.slide-dots { display: flex; align-items: center; gap: 6px; }
.slide-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--tr), background var(--tr);
}
.slide-dot.active { width: 28px; background: var(--white); }

/* --- HOME PAGE --- */
.home-page { background: var(--black); }

/* Hero video section */
.home-hero {
  position: relative;
  min-height: calc(100vh - var(--announcement-h) - var(--header-h));
  overflow: hidden;
  background: var(--black);
  cursor: pointer;
}
.home-hero-video-wrap {
  position: absolute;
  inset: 0;
  opacity: 1;
}
.home-hero-video { width: 100%; height: 100%; object-fit: cover; }
.home-hero-logo {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  z-index: 10;
  pointer-events: none;
}
.home-hero-logo img { width: 100%; max-height: 100px; object-fit: contain; object-position: left top; }
@media (max-width: 767px) { .home-hero-logo img { max-height: 60px; } }

.home-hero-subtitle {
  font-family: var(--font-primary);
  line-height: 1;
  text-align: center;
  margin: var(--subtitle-gap, 4px) 0 0;
  padding: 0;
  letter-spacing: 0;
}
@media (max-width: 767px) { .home-hero-subtitle { font-size: 86px; } }

.home-hero-cta {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}
@media (min-width: 768px) { .home-hero-cta { bottom: 64px; } }
.home-hero-btn {
  background: transparent;
  border: 1px solid var(--white);
  border-radius: 999px;
  padding: 6px 20px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: var(--white);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  white-space: nowrap;
}
@media (min-width: 768px) { .home-hero-btn { font-size: 18px; padding: 6px 24px; } }
.home-hero-btn:hover { background: var(--white); color: var(--black); }

.home-sound-btn {
  position: absolute;
  bottom: 32px; left: 24px;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--tr-fast);
}
@media (min-width: 768px) { .home-sound-btn { bottom: 48px; left: 32px; } }
.home-sound-btn:hover { opacity: 1; }

/* Products grid */
.home-products {
  background: var(--black);
  color: var(--white);
  padding: 64px 24px;
}
@media (min-width: 768px) { .home-products { padding: 96px 48px; } }
.home-products-inner { max-width: 1440px; margin: 0 auto; }
.home-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 768px) { .home-products-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.home-product-card { display: flex; flex-direction: column; }
.home-product-name {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 18px;
  color: var(--white);
  margin-bottom: 12px;
}
@media (min-width: 768px) { .home-product-name { font-size: 20px; } }
.home-product-image {
  aspect-ratio: 1;
  background: var(--gray-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}
.home-product-image img { width: 100%; height: 100%; object-fit: cover; }
.home-product-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
}
.home-product-buy-btn {
  background: var(--white);
  color: var(--black);
  border-radius: 999px;
  padding: 8px 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background var(--tr-fast);
}
@media (min-width: 768px) { .home-product-buy-btn { font-size: 16px; padding: 8px 32px; } }
.home-product-buy-btn:hover { background: #f0f0f0; }
.home-product-from {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
@media (min-width: 768px) { .home-product-from { font-size: 14px; } }
.home-product-price {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
}
@media (min-width: 768px) { .home-product-price { font-size: 16px; } }

/* Renaissance section */
.home-renaissance {
  position: relative;
  min-height: 50vh;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.5s ease;
}
.home-renaissance:hover { background: var(--red); }
.home-renaissance-text {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(36px, 8vw, 120px);
  color: var(--black);
  text-align: center;
  text-transform: uppercase;
  line-height: 0.95;
  padding: 0 20px;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) { .home-renaissance-text { line-height: 0.85; } }
.home-renaissance-cta {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
@media (min-width: 768px) { .home-renaissance-cta { bottom: 64px; } }
.home-renaissance-btn {
  background: transparent;
  border: 1px solid var(--black);
  border-radius: 999px;
  padding: 6px 20px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: var(--black);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  white-space: nowrap;
}
@media (min-width: 768px) { .home-renaissance-btn { font-size: 18px; padding: 6px 24px; } }
.home-renaissance-btn:hover { background: var(--black); color: var(--white); }

/* --- CONFIGURATOR --- */
.configurator-page {
  background: var(--white);
  min-height: calc(100vh - var(--announcement-h) - var(--header-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Split layout */
.configurator-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 1024px) {
  .configurator-layout {
    flex-direction: row;
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    overflow: hidden;
  }
}

/* LEFT — image 80% desktop */
.configurator-visual {
  width: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 0;
  gap: 12px;
}
@media (min-width: 1024px) {
  .configurator-visual {
    width: 60%;
    position: sticky;
    top: calc(var(--announcement-h) + var(--header-h));
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    overflow: hidden;
    flex-shrink: 0;
    padding: 48px;
    gap: 0;
  }
}

.configurator-image-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  max-height: 40vh;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
@media (min-width: 1024px) {
  .configurator-image-wrap {
    max-height: none;
    aspect-ratio: 16/10;
    max-width: 90%;
    border-radius: 30px;
  }
}
.configurator-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.configurator-image-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--red), var(--green), var(--blue));
}

/* Accessories badge */
.configurator-acc-badge {
  position: absolute;
  top: 24px; right: 24px;
  background: rgba(0,0,0,0.9);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--white);
  z-index: 5;
}

/* Image carousel dots — mobile */
.configurator-dots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media (min-width: 1024px) {
  .configurator-dots-row {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.config-img-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  background: rgba(0,0,0,0.2);
  transition: background var(--tr);
}
.config-img-dot.active { background: var(--black); }

.configurator-img-nav-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0.5px solid rgba(0,0,0,0.2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background var(--tr-fast);
}
@media (min-width: 1024px) {
  .configurator-img-prev {
    position: absolute;
    left: 32px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    font-size: 16px;
  }
  .configurator-img-next {
    position: absolute;
    right: 32px; top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    font-size: 16px;
  }
}

/* RIGHT — panel 20% */
.configurator-panel {
  width: 100%;
  background: var(--gray-panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .configurator-panel {
    width: 40%;
    overflow-y: auto;
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    padding-bottom: 0;
    flex-shrink: 0;
  }
}

/* Sticky header in panel */
.configurator-panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gray-panel);
  border-bottom: 0.5px solid var(--black);
  padding: 20px 24px;
}
@media (min-width: 1024px) { .configurator-panel-header { padding: 20px 39px; } }
.configurator-panel-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.config-product-name {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  line-height: 1.3;
}
@media (min-width: 768px) { .config-product-name { font-size: 16px; } }
.config-product-dim {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  color: var(--black);
  margin-top: 2px;
}
@media (min-width: 768px) { .config-product-dim { font-size: 12px; } }
.config-total-price {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  white-space: nowrap;
  text-align: right;
}
@media (min-width: 768px) { .config-total-price { font-size: 16px; } }

/* Config panel content */
.configurator-content { padding: 0 24px; }
@media (min-width: 1024px) { .configurator-content { padding: 0 39px; } }

/* Section titles */
.config-section { padding-top: 45px; padding-bottom: 24px; }
.config-section-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin-bottom: 0;
}
.config-section-subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--black);
  margin-bottom: 24px;
}

/* Option cards */
.config-card {
  background: var(--white);
  border: 0.5px solid var(--black);
  border-radius: 15px;
  padding: 24px;
  margin-bottom: 25px;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  position: relative;
}
.config-card:last-child { margin-bottom: 0; }
.config-card.selected { background: rgba(0,0,0,0.04); }
.config-card--required { cursor: default; }

.config-card-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin-bottom: 0;
}
.config-card-specs {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--black);
  margin-bottom: 0;
  white-space: pre-line;
}
.config-card-hint {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--black);
}
.config-card-price {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  color: var(--black);
  text-align: right;
  margin-top: 8px;
}

/* Radio button */
.config-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  background: var(--white);
  flex-shrink: 0;
  transition: border-color var(--tr-fast), background var(--tr-fast);
  position: relative;
}
.config-radio.checked {
  border-color: var(--black);
  background: var(--black);
}
.config-radio.checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--white);
}

/* Module counter */
.config-module-counter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.config-counter-btn {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--tr-fast);
}
.config-counter-btn:hover { opacity: 0.6; }
.config-counter-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.config-counter-val {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  min-width: 24px;
  text-align: center;
}

/* Accessory card with image */
.config-acc-card {
  background: var(--white);
  border: 0.5px solid var(--black);
  border-radius: 15px;
  padding: 24px;
  margin-bottom: 25px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: background var(--tr-fast);
}
.config-acc-card.selected { background: rgba(0,0,0,0.04); }
.config-acc-img {
  width: 80px; height: 80px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--gray-bg);
  flex-shrink: 0;
}
.config-acc-info { flex: 1; }
.config-acc-name {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin-bottom: 0;
}
.config-acc-price {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  color: var(--black);
  margin-top: 8px;
}
.config-acc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
}

/* Summary section */
.config-summary-wrap { padding-top: 24px; padding-bottom: 24px; }
.config-summary-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 0;
}
.config-summary-subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 24px;
}
.config-summary-card {
  background: var(--white);
  border: 0.5px solid var(--black);
  border-radius: 15px;
  padding: 24px;
}
.config-summary-line {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin-bottom: 4px;
  line-height: 1.4;
}
.config-summary-note {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: var(--black);
  margin-top: 12px;
}

/* Delivery row */
.config-delivery-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 0 32px;
}
.config-delivery-label { font-family: var(--font-primary); font-weight: 600; font-size: 16px; color: var(--black); }
.config-delivery-info { font-family: var(--font-primary); font-weight: 400; font-size: 12px; color: var(--black); }
.config-delivery-price { font-family: var(--font-primary); font-weight: 600; font-size: 20px; color: var(--black); }

/* Add to cart */
.config-add-to-cart {
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--tr-fast);
  text-align: center;
}
.config-add-to-cart:hover { background: #222; }

/* Fixed footer desktop */
.configurator-footer-fixed {
  display: none;
}
@media (min-width: 1024px) {
  .configurator-footer-fixed {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }
}



/* --- CONTACT PAGE --- */
.contact-page { background: var(--white); padding: 64px 20px; min-height: calc(100vh - 82px); }
.contact-title { font-family: var(--font-primary); font-weight: 400; font-size: clamp(24px,4vw,32px); color: var(--black); margin-bottom: 48px; line-height: 1.32; }
.contact-form-outer { display: flex; justify-content: center; }
.contact-gradient-card {
  width: 100%;
  max-width: 876px;
  border-radius: 20px;
  padding: 48px 40px;
  background: var(--gradient-rgb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media (max-width: 767px) { .contact-gradient-card { padding: 32px 20px; border-radius: 12px; } }
.contact-intro { font-family: var(--font-primary); font-weight: 400; font-size: 16px; color: var(--white); text-align: center; max-width: 463px; line-height: 1.6; }
.contact-fields { width: 100%; max-width: 463px; display: flex; flex-direction: column; gap: 16px; }
.contact-input {
  width: 100%;
  height: 44px;
  background: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 13px;
  color: var(--black);
  text-align: center;
  outline: none;
  -webkit-appearance: none;
}
.contact-input::placeholder { color: rgba(0,0,0,0.45); }
.contact-textarea { height: auto; padding: 12px 16px; resize: none; text-align: left; line-height: 1.6; }
.contact-submit-wrap { display: flex; justify-content: center; }
.contact-submit { font-family: var(--font-primary); font-weight: 600; font-size: 16px; color: var(--white); background: none; border: none; cursor: pointer; transition: opacity var(--tr-fast); }
.contact-submit:hover { opacity: 0.7; }

/* --- MANIFESTO PAGE --- */
.manifesto-page { background: var(--white); }
.manifesto-hero { background: var(--white); padding: 50px 20px 25px; }
@media (min-width: 768px) { .manifesto-hero { padding: 80px 48px 40px; } }
.manifesto-hero h1 {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(28px,6vw,56px);
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: none;
}

.manifesto-intro { padding: 30px 20px 50px; }
@media (min-width: 768px) { .manifesto-intro { padding: 50px 48px; } }
.manifesto-intro-text { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--black); max-width: 900px; white-space: pre-line; }
@media (min-width: 768px) { .manifesto-intro-text { font-size: 18px; } }

.manifesto-protocol-wrap { padding: 30px 20px 50px; }
@media (min-width: 768px) { .manifesto-protocol-wrap { padding: 50px 48px; } }
.manifesto-protocol-intro-flex { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
@media (min-width: 768px) { .manifesto-protocol-intro-flex { flex-direction: row; gap: 32px; margin-bottom: 64px; } }
.manifesto-protocol-img { width: 100%; height: 200px; overflow: hidden; flex-shrink: 0; }
@media (min-width: 768px) { .manifesto-protocol-img { width: 300px; height: 300px; } }
.manifesto-protocol-img img { width: 100%; height: 100%; object-fit: cover; }
.manifesto-protocol-intro-text { font-family: var(--font-primary); font-weight: 500; font-size: clamp(22px,3vw,32px); color: var(--black); line-height: 1.1; margin-bottom: 24px; }
.manifesto-protocol-body { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: rgba(0,0,0,0.9); white-space: pre-line; }
@media (min-width: 768px) { .manifesto-protocol-body { font-size: 18px; } }

/* Phases grid */
.manifesto-phases-grid { display: grid; grid-template-columns: 1fr; border: 2px solid var(--black); }
@media (min-width: 1024px) { .manifesto-phases-grid { grid-template-columns: 1fr 1fr; } }
.manifesto-phase {
  border-bottom: 2px solid var(--black);
  padding: 20px;
}
@media (min-width: 768px) { .manifesto-phase { padding: 32px; } }
@media (min-width: 1024px) {
  .manifesto-phase:nth-child(1),
  .manifesto-phase:nth-child(3) { border-right: 2px solid var(--black); }
  .manifesto-phase:nth-child(3),
  .manifesto-phase:nth-child(4) { border-bottom: none; }
}
.manifesto-phase-icon { margin-bottom: 16px; color: var(--black); }
.manifesto-phase-title { font-family: var(--font-mono); font-weight: 400; font-size: 16px; color: var(--black); line-height: 1.1; margin-bottom: 16px; }
@media (min-width: 768px) { .manifesto-phase-title { font-size: 20px; } }
.manifesto-phase-body { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: rgba(0,0,0,0.8); line-height: 1.6; white-space: pre-line; }
@media (min-width: 768px) { .manifesto-phase-body { font-size: 16px; } }

/* --- GENERIC PAGE (legal etc) --- */
.generic-page { background: var(--white); padding: 64px 20px; min-height: calc(100vh - 82px); }
.generic-page-title { font-family: var(--font-primary); font-weight: 400; font-size: clamp(24px,4vw,32px); color: var(--black); margin-bottom: 48px; }
.rte { font-family: var(--font-primary); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--black); max-width: 841px; }
.rte h2 { font-weight: 600; font-size: 20px; margin: 40px 0 12px; }
.rte h3 { font-weight: 500; font-size: 17px; margin: 28px 0 10px; }
.rte p { margin-bottom: 14px; }
.rte ul, .rte ol { margin: 0 0 14px 24px; }
.rte li { margin-bottom: 6px; }
.rte a { color: var(--blue); text-decoration: underline; }
.rte strong { font-weight: 600; }
.rte hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 28px 0; }

/* --- ACCESSORIES PAGE --- */
.accessories-page { background: var(--black); color: var(--white); min-height: calc(100vh - 82px); padding: 48px 20px; }
@media (min-width: 768px) { .accessories-page { padding: 64px 48px; } }
.accessories-inner { max-width: 1440px; margin: 0 auto; }
.accessories-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.acc-filter-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.acc-filter-btn.active { background: var(--white); color: var(--black); border-color: var(--white); }
.accessories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 768px) { .accessories-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .accessories-grid { grid-template-columns: repeat(4, 1fr); } }
.acc-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.acc-card-img { aspect-ratio: 1; overflow: hidden; }
.acc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.acc-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.acc-card-name { font-family: var(--font-primary); font-weight: 500; font-size: 14px; color: var(--white); margin-bottom: 6px; }
.acc-card-desc { font-family: var(--font-primary); font-weight: 300; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.acc-card-footer { display: flex; align-items: center; justify-content: space-between; }
.acc-card-price { font-family: var(--font-primary); font-weight: 500; font-size: 14px; color: var(--white); }
.acc-card-btn { background: var(--white); color: var(--black); border: none; border-radius: 999px; padding: 6px 14px; font-family: var(--font-primary); font-weight: 500; font-size: 12px; cursor: pointer; transition: background var(--tr-fast); }
.acc-card-btn:hover { background: #f0f0f0; }

/* --- CART NOTIFICATION --- */
.cart-notification {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--white);
  color: var(--black);
  padding: 16px 24px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  transform: translateY(120px);
  opacity: 0;
  transition: transform var(--tr), opacity var(--tr);
  z-index: 999;
  max-width: 320px;
}
.cart-notification.visible { transform: translateY(0); opacity: 1; }

/* --- SCROLL TO TOP --- */
.scroll-top-btn {
  position: fixed;
  bottom: 24px; left: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr);
  z-index: 100;
}
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; }
.site-header {
  margin-bottom: 0;
}

.site-header + * {
  margin-top: 0;
}
/* HOVER STATES */
.header-menu-btn { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.header-menu-btn:hover { background: #ffffff; color: #000000; border-color: #000000; }
.header-cart-btn { transition: opacity 0.3s ease; }
.header-cart-btn:hover { opacity: 0.7; }
.home-hero-btn { transition: background 0.3s ease, color 0.3s ease; }
.home-hero-btn:hover { background: #ffffff; color: #000000; }
.home-renaissance-btn { transition: background 0.3s ease, color 0.3s ease; }
.home-renaissance-btn:hover { background: #000000; color: #ffffff; }
.home-product-buy-btn { transition: background 0.3s ease, color 0.3s ease; }
.home-product-buy-btn:hover { background: #000000; color: #ffffff; }
.nav-link { transition: opacity 0.2s ease; }
.nav-link:hover { opacity: 0.45; }
.footer-pill { transition: background 0.2s ease; }
.footer-pill:not(.active):hover { background: rgba(255,255,255,0.15); }
.config-add-to-cart { transition: background 0.3s ease; }
.config-add-to-cart:hover { background: #1a1a1a; }
.config-card:not(.config-card--required) { transition: border-color 0.2s ease; }
.config-card:not(.config-card--required):hover { border-color: rgba(0,0,0,0.4); }
.config-acc-card { transition: border-color 0.2s ease; }
.config-acc-card:hover { border-color: rgba(0,0,0,0.4); }
.product-cta-btn { transition: background 0.3s ease, color 0.3s ease; }
.product-cta-btn:hover { background: #000000; color: #ffffff; }
.contact-submit { transition: opacity 0.2s ease; }
.contact-submit:hover { opacity: 0.6; }
.home-hero-logo { justify-content: center; }
.home-hero-logo img { object-position: center top; }
.product-variant-buy-btn { background: #D5FF02; color: #000000; border: none; border-radius: 999px; padding: 10px 28px; font-family: 'FT Polar', sans-serif; font-weight: 500; font-size: 15px; cursor: pointer; transition: background 0.3s ease; display: inline-flex; align-items: center; text-decoration: none; }
.product-variant-buy-btn:hover { background: #c4ee00; }
.slide-image-placeholder { font-size: 0 !important; color: transparent !important; }
.product-cta-gradient-title, .product-cta-gradient-body { background: linear-gradient(90deg, #FF5656 0%, #33B76E 50%, #337AFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Accordéon détails — lignes plus épaisses */
#details [style*="border-top:1px"] {
  border-top: 2px solid rgba(255,255,255,0.3) !important;
}
#details [style*="border-top:1px solid rgba(255,255,255,0.15);"] + div {
  border-top: 2px solid rgba(255,255,255,0.3) !important;
}

/* Dernière ligne en bas */
#details > div > div > div:last-child {
  border-top: 2px solid rgba(255,255,255,0.3) !important;
}

/* Lignes entre les lignes de texte dans chaque accordéon */
#details .rte p,
#details [style*="line-height:2"] {
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  padding-bottom: 4px;
  margin-bottom: 4px;
}
/* Contact — champs plus larges */
.contact-fields {
  width: 100%;
  max-width: 600px;
}
.contact-gradient-card input,
.contact-gradient-card textarea {
  max-width: 100% !important;
  width: 100% !important;
}

.contact-fields {
  width: 100% !important;
  max-width: 100% !important;
}
.contact-fields { max-width: 580px !important; }
.contact-gradient-card { max-width: 1000px !important; }
.contact-fields { max-width: 700px !important; width: 100% !important; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* --- HEADER WRAP / MAIN CONTENT ---
   Le positionnement du header est géré par le JS dans theme.liquid :
   - Par défaut : #site-header-wrap est en position:sticky → pas de marge à compenser
   - Sur la page À propos : #site-header-wrap passe en position:fixed et le JS
     applique dynamiquement le margin-top correspondant à #main-content.
   On ne doit PAS ajouter de margin-top global ici, sinon ça crée une bande
   de fond noir (body) visible entre le header et le contenu. */
body { margin: 0; padding: 0; }
#main-content { margin-top: 0; }

/* Pages à fond blanc (évite que le noir du body transparaisse) */
.template-page { background: #fff; }
.template-page-a-propos,
.template-page-a-propos #main-content { background: #fff; }
/* ============================================
   PAGE 404
   ============================================ */
.template-404 { background: #fff; }
.template-404 #main-content { background: #fff; }

.notfound-page {
  background: #fff;
  min-height: calc(100vh - var(--announcement-h) - var(--header-h) - var(--footer-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.notfound-inner {
  text-align: center;
  max-width: 560px;
}
.notfound-code {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(120px, 22vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  background: var(--gradient-rgb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.notfound-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--black);
  margin-bottom: 16px;
}
.notfound-text {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: rgba(0,0,0,0.6);
  line-height: 1.6;
  margin-bottom: 32px;
}
.notfound-btn {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 999px;
  padding: 10px 28px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--tr), color var(--tr);
}
.notfound-btn:hover {
  background: transparent;
  color: var(--black);
}


/* ============================================
   PAGE MENTIONS LÉGALES
   ============================================ */
.template-page-mentions-legales { background: #fff; }
.template-page-mentions-legales #main-content { background: #fff; }

.legal-page { background: #fff; color: var(--black); }

/* Hero */
.legal-hero {
  padding: 60px 24px 40px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
@media (min-width: 768px) { .legal-hero { padding: 80px 40px 48px; } }
.legal-hero-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.legal-hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Layout 2 colonnes */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0 24px 80px;
}
@media (min-width: 900px) {
  .legal-layout {
    grid-template-columns: 260px 1fr;
    gap: 48px;
    padding: 0 40px 120px;
  }
}

/* Nav latérale */
.legal-nav-wrap {
  padding-top: 32px;
}
@media (min-width: 900px) {
  .legal-nav-wrap {
    position: sticky;
    top: calc(var(--announcement-h) + var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--announcement-h) - var(--header-h) - 48px);
    overflow-y: auto;
    padding-top: 48px;
  }
}

/* Bouton toggle (mobile uniquement) */
.legal-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}
.legal-nav-toggle svg { transition: transform var(--tr); }
.legal-nav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (min-width: 900px) {
  .legal-nav-toggle { display: none; }
}

/* Nav links */
.legal-nav {
  display: none;
  padding-top: 12px;
}
.legal-nav.open { display: block; }
@media (min-width: 900px) {
  .legal-nav { display: block; padding-top: 0; }
}
.legal-nav ul { list-style: none; padding: 0; margin: 0; }
.legal-nav li { margin-bottom: 2px; }
.legal-nav-link {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--tr-fast), color var(--tr-fast);
  line-height: 1.3;
}
.legal-nav-link:hover { background: rgba(0,0,0,0.04); color: var(--black); }
.legal-nav-link.active {
  background: var(--black);
  color: var(--white);
  font-weight: 500;
}

/* Contenu */
.legal-content { padding-top: 32px; }
@media (min-width: 900px) { .legal-content { padding-top: 48px; } }
.legal-section { margin-bottom: 64px; scroll-margin-top: 120px; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.legal-section-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,0.8);
}
.legal-section-body p { margin-bottom: 14px; }
.legal-section-body h3 { font-weight: 500; font-size: 17px; margin: 24px 0 10px; color: var(--black); }
.legal-section-body h4 { font-weight: 500; font-size: 15px; margin: 18px 0 8px; color: var(--black); }
.legal-section-body ul,
.legal-section-body ol { margin: 0 0 14px 20px; }
.legal-section-body li { margin-bottom: 6px; }
.legal-section-body a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }
.legal-section-body a:hover { color: var(--blue); }
.legal-section-body strong { font-weight: 500; color: var(--black); }

.legal-empty {
  font-family: var(--font-mono);
  font-size: 14px;
  color: rgba(0,0,0,0.5);
  text-align: center;
  padding: 48px 0;
}
/* --- Footer language switcher (options) --- */
.footer-lang-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  color: white;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background var(--tr-fast);
}
.footer-lang-option:hover { background: rgba(255,255,255,0.1); }
.footer-lang-option.active { font-weight: 500; }
/* ========================================
   FOOTER LANGUAGE SWITCHER — override complet
   ======================================== */
.footer-lang {
  position: relative;
  display: inline-block;
}

.footer-lang-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 140px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 6px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.footer-lang-dropdown.open {
  display: block;
}

.footer-lang-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  color: white;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.footer-lang-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.footer-lang-option.active {
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
}

.footer-lang-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}
/* ============================================
   CONFIGURATEUR — AMÉLIORATIONS VISUELLES (Apple-like)
   ============================================ */

/* Padding plus généreux dans le contenu du panel */
@media (min-width: 1024px) {
  .configurator-content {
    padding: 32px 48px 120px;
  }
  .configurator-panel-header {
    padding: 24px 48px;
  }
}

/* Typographie du header panel plus imposante */
.config-product-name {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--black);
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .config-product-name { font-size: 22px; }
}

.config-product-dim {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,0,0,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .config-product-dim { font-size: 12px; }
}

.config-total-price {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  color: var(--black);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .config-total-price { font-size: 22px; }
}

/* Sections plus aérées */
.config-section {
  margin-bottom: 48px;
}
@media (min-width: 1024px) {
  .config-section { margin-bottom: 64px; }
}

.config-section-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 20px;
  color: var(--black);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) {
  .config-section-title { font-size: 24px; }
}

.config-section-subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Cards plus spacieuses et élégantes */
.config-card {
  padding: 20px 22px;
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--white);
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.config-card:hover:not(.config-card--required) {
  border-color: rgba(0,0,0,0.35);
}
.config-card.selected {
  background: var(--white);
  border-color: var(--black);
  border-width: 1.5px;
  padding: calc(20px - 1px) calc(22px - 1px);
}

.config-card-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--black);
  line-height: 1.35;
}

.config-card-specs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  line-height: 1.5;
  margin-top: 6px;
  white-space: pre-line;
}

.config-card-price {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0,0,0,0.7);
  margin-top: 8px;
}

/* Radio button plus soigné */
.config-radio {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color var(--tr-fast), background var(--tr-fast);
  position: relative;
}
.config-radio.checked {
  border-color: var(--black);
  background: var(--black);
}
.config-radio.checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--white);
  border-radius: 50%;
}

/* Accessory cards avec image — plus élégantes */
.config-acc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.config-acc-card:hover { border-color: rgba(0,0,0,0.35); }
.config-acc-card.selected {
  border-color: var(--black);
  border-width: 1.5px;
  padding: calc(14px - 1px);
}
.config-acc-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #f0f0f0;
  object-fit: cover;
  flex-shrink: 0;
}
.config-acc-info { flex: 1; min-width: 0; }
.config-acc-name {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
  line-height: 1.3;
}
.config-acc-price {
  font-family: var(--font-primary);
  font-size: 13px;
  color: rgba(0,0,0,0.7);
  margin-top: 3px;
}

/* Compteur +/- plus soigné */
.config-module-counter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
}
.config-counter-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast);
}
.config-counter-btn:hover { background: rgba(0,0,0,0.08); }
.config-counter-val {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  color: var(--black);
  min-width: 20px;
  text-align: center;
}

/* Bloc "Votre nouveau X" — récap final plus prestigieux */
.config-summary-wrap {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 0.5px solid rgba(0,0,0,0.15);
}
.config-summary-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 22px;
  color: var(--black);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.config-summary-subtitle {
  font-family: var(--font-primary);
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 20px;
}
.config-summary-card {
  background: var(--white);
  border: 0.5px solid rgba(0,0,0,0.15);
  border-radius: 14px;
  padding: 24px;
}
.config-summary-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(0,0,0,0.75);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.config-summary-note {
  color: rgba(0,0,0,0.5);
  font-style: italic;
  margin-top: 8px !important;
}

/* Delivery row */
.config-delivery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-top: 0.5px solid rgba(0,0,0,0.15);
  border-bottom: 0.5px solid rgba(0,0,0,0.15);
  margin-top: 32px;
}
.config-delivery-label {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
}
.config-delivery-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.config-delivery-price {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  color: var(--black);
}

/* Add to cart button — plus imposant */
.config-add-to-cart {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  margin-top: 24px;
  transition: background var(--tr-fast);
}
.config-add-to-cart:hover { background: #1a1a1a; }
.config-add-to-cart:disabled { opacity: 0.6; cursor: wait; }
/* ============================================
   CONFIGURATEUR — PROGRESS NAV HORIZONTALE
   ============================================ */

.configurator-steps {
  padding: 14px 24px 16px;
  background: var(--gray-panel);
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
  position: sticky;
  top: 82px; /* hauteur du panel-header sticky */
  z-index: 9;
}
@media (min-width: 1024px) {
  .configurator-steps {
    padding: 16px 48px 18px;
    top: 98px;
  }
}

.configurator-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.configurator-steps-list::-webkit-scrollbar { display: none; }

.configurator-step {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Ligne de connexion entre les étapes */
.configurator-step + .configurator-step::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(0,0,0,0.15);
  margin: 0 2px;
  flex-shrink: 0;
}

.configurator-step-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 999px;
  transition: background var(--tr-fast);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  white-space: nowrap;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .configurator-step-btn { font-size: 13px; }
}
.configurator-step-btn:hover {
  color: rgba(0,0,0,0.75);
}

.configurator-step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.3);
  flex-shrink: 0;
  transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
  position: relative;
}

/* Étape active : dot noir, label noir gras */
.configurator-step.active .configurator-step-btn {
  color: var(--black);
  font-weight: 500;
}
.configurator-step.active .configurator-step-dot {
  background: var(--black);
  border-color: var(--black);
}

/* Étape complétée : dot avec petit check blanc */
.configurator-step.completed .configurator-step-dot {
  background: var(--black);
  border-color: var(--black);
}
.configurator-step.completed .configurator-step-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%) rotate(-45deg);
  width: 3.5px;
  height: 1.5px;
  border-bottom: 1.2px solid var(--white);
  border-left: 1.2px solid var(--white);
}

/* Agrandir l'image : réduire le padding de .configurator-visual */
@media (min-width: 1024px) {
  .configurator-visual {
    padding: 24px;
  }
  .configurator-image-wrap {
    max-width: 100%;
    aspect-ratio: auto;
    height: 100%;
    max-height: calc(100vh - var(--announcement-h) - var(--header-h) - 48px);
  }
}
/* ============================================
   CONFIGURATEUR — FIX DÉBORDEMENT + HEADER PANEL
   ============================================ */

/* Éviter tout débordement horizontal dans le panel */
.configurator-panel {
  overflow-x: hidden;
}
.configurator-content {
  overflow-x: hidden;
  width: 100%;
}

/* Header panel : layout en 2 lignes (plus lisible sur 40%) */
.configurator-panel-header {
  padding: 20px 24px;
}
@media (min-width: 1024px) {
  .configurator-panel-header { padding: 24px 40px; }
}

.configurator-panel-header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Ligne 1 : nom + prix côte à côte */
.configurator-panel-header-inner > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
  flex-wrap: wrap;
}

/* Retire la ligne 2 (prix seul) — on va tout mettre dans div:first-child */
.configurator-panel-header .config-total-price {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Taille prix adaptée */
.config-total-price {
  font-size: 18px;
}
@media (min-width: 1024px) {
  .config-total-price { font-size: 20px; }
}

/* Nom produit ne doit pas casser la mise en page */
.config-product-name {
  min-width: 0;
}

/* La longueur passe bien sur sa propre ligne en dessous */
.config-product-dim {
  display: block;
  width: 100%;
}

/* Cards config : éviter qu'une ligne trop longue force un overflow */
.config-card,
.config-acc-card {
  max-width: 100%;
  overflow: hidden;
}
.config-card-title,
.config-card-specs,
.config-card-hint,
.config-card-price,
.config-acc-name,
.config-acc-price {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Specs en mono : peuvent avoir des longues lignes, on autorise le wrap */
.config-card-specs {
  white-space: pre-wrap;
}
/* ============================================
   CART DRAWER
   ============================================ */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9998;
}
.cart-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.15);
}
.cart-drawer-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0;
}
.cart-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--tr-fast);
}
.cart-drawer-close:hover { background: rgba(255, 255, 255, 0.1); }

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.cart-drawer-loading {
  text-align: center;
  padding: 40px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.cart-drawer-empty {
  text-align: center;
  padding: 60px 20px;
}
.cart-drawer-empty p {
  font-family: var(--font-primary);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 24px;
}
.cart-drawer-continue {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  padding: 10px 24px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.cart-drawer-continue:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.cart-drawer-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cart-drawer-item {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  transition: opacity 0.2s ease;
}
.cart-drawer-item:last-child { border-bottom: none; }

.cart-drawer-item-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  flex-shrink: 0;
}
.cart-drawer-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-drawer-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-drawer-item-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
}

.cart-drawer-item-props {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cart-drawer-item-props li {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  gap: 8px;
}
.cart-drawer-item-props li span:last-child {
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
}

.cart-drawer-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.cart-drawer-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.cart-drawer-qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast);
  line-height: 1;
}
.cart-drawer-qty-btn:hover { background: rgba(255, 255, 255, 0.15); }
.cart-drawer-qty-val {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  min-width: 16px;
  text-align: center;
}

.cart-drawer-item-price {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
  margin: 0;
}

.cart-drawer-item-remove {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-primary);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  margin-top: 2px;
  transition: color var(--tr-fast);
}
.cart-drawer-item-remove:hover { color: var(--white); }

.cart-drawer-footer {
  padding: 20px 24px 24px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.15);
  background: var(--black);
}

.cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--white);
  margin-bottom: 16px;
}
.cart-drawer-subtotal span:last-child {
  font-weight: 500;
  font-size: 18px;
}

.cart-drawer-checkout {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--white);
  color: var(--black);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  border-radius: 999px;
  transition: background var(--tr-fast);
}
.cart-drawer-checkout:hover { background: rgba(255, 255, 255, 0.85); }

/* Ajustement mobile : prend tout l'écran */
@media (max-width: 560px) {
  .cart-drawer { max-width: 100%; }
}
/* ============================================
   PAGE MANIFESTE v6 — Typo unifiée complète
   ============================================ */
.template-page-manifeste { background: #fff; }
.template-page-manifeste #main-content { background: #fff; }

.manifesto-v4 {
  background: #fff;
  color: var(--black);
  font-family: var(--font-primary);
}

.mf-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .mf-wrap { padding: 0 56px; } }

/* ════════════════ HERO (exception volontaire, gros) ════════════════ */
.mf-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px 24px 64px;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
@media (min-width: 768px) {
  .mf-hero { min-height: 88vh; padding: 100px 56px 88px; }
}
.mf-hero-bg { position: absolute; inset: 0; z-index: 0; }
.mf-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mf-hero-bg--gradient {
  background: linear-gradient(135deg, #1a0000 0%, #001a0d 50%, #000a1a 100%);
}
.mf-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
.mf-hero-content {
  position: relative; z-index: 2;
  max-width: 1320px; width: 100%; margin: 0 auto;
}
.mf-hero-kicker {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.65);
  margin: 0 0 28px;
  line-height: 1;
}
.mf-hero-title {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  max-width: 1200px;
}
.mf-hero-scroll {
  position: absolute;
  bottom: 28px; right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
}
@media (min-width: 768px) { .mf-hero-scroll { bottom: 40px; right: 56px; } }
.mf-hero-scroll svg { animation: mf-scroll-bounce 2s ease-in-out infinite; }
@keyframes mf-scroll-bounce {
  0%,100% { transform: translateY(0); }
  50%    { transform: translateY(4px); }
}

/* ════════════════ SECTION GÉNÉRIQUE ════════════════ */
.mf-section {
  padding: 100px 0;
}
@media (min-width: 768px) { .mf-section { padding: 140px 0; } }

/* ════════════════ CHAPTER HEADER — gabarit commun ════════════════ */
.mf-chapter-header {
  max-width: 1100px;
  margin: 0 0 56px;
  padding: 0;
}
@media (min-width: 768px) { .mf-chapter-header { margin-bottom: 80px; } }

.mf-chapter-label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(0,0,0,0.4);
  margin: 0 0 28px;
}
.mf-chapter-label--light { color: rgba(255,255,255,0.45); }

.mf-chapter-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 28px;
  max-width: 900px;
}
.mf-chapter-title--light { color: var(--white); }

/* Textes de prose dans les blocs étape/partenariat (taille standard) */
.mf-phase-body,
.mf-pblock-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(0,0,0,0.75);
  max-width: 780px;
  margin: 0;
}

/* Textes d'introduction de chapitre : imposants, graisse medium */
.mf-chapter-intro {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--black);
  max-width: 1100px;
  margin: 0;
}
.mf-chapter-intro--light { color: rgba(255, 255, 255, 0.92); }

.mf-chapter-intro p,
.mf-chapter-intro--light p {
  margin: 0 0 20px;
}
.mf-chapter-intro p:last-child,
.mf-chapter-intro--light p:last-child {
  margin-bottom: 0;
}
/* Neutralise les Hx venus du richtext */
.mf-chapter-intro h1, .mf-chapter-intro h2, .mf-chapter-intro h3,
.mf-chapter-intro--light h1, .mf-chapter-intro--light h2, .mf-chapter-intro--light h3 {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 0 20px;
}

/* ════════════════ IMAGE 16:9 RÉUTILISABLE ════════════════ */
.mf-hero-visual {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  margin: 0;
  border-radius: 14px;
}
.mf-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ════════════════ PROTOCOLE — TIMELINE ════════════════ */
.mf-timeline { display: flex; flex-direction: column; }

.mf-phase {
  padding: 48px 0;
  border-top: 1px solid rgba(0,0,0,0.15);
}
@media (min-width: 768px) { .mf-phase { padding: 64px 0; } }
.mf-phase:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }

.mf-phase-marker {
  margin-bottom: 32px;
  display: flex;
  align-items: baseline;
}
@media (min-width: 768px) { .mf-phase-marker { margin-bottom: 48px; } }

.mf-phase-num {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--black);
}

.mf-phase-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .mf-phase-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.mf-phase-visual {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  border-radius: 14px;
}
.mf-phase-visual img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.mf-phase:hover .mf-phase-visual img { transform: scale(1.02); }

.mf-phase-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red), var(--green), var(--blue));
  opacity: 0.1;
}
.mf-phase-placeholder span {
  font-family: var(--font-primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--black);
  opacity: 0.6;
}

.mf-phase-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--black);
  margin: 0 0 20px;
}

.mf-phase-body { white-space: pre-line; }

/* ════════════════ PARTENARIAT ════════════════ */
.mf-partnership .mf-hero-visual {
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .mf-partnership .mf-hero-visual { margin-bottom: 80px; }
}

.mf-pblocks {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
}

.mf-pblock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 48px 0;
  border-top: 1px solid rgba(0,0,0,0.15);
}
@media (min-width: 768px) {
  .mf-pblock {
    grid-template-columns: 80px 1fr;
    gap: 48px;
    padding: 56px 0;
  }
}
.mf-pblock:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }

.mf-pblock-num {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--black);
}

.mf-pblock-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--black);
  margin: 0 0 20px;
  max-width: 800px;
}

.mf-pblock-body { white-space: pre-line; }

/* ════════════════ ENGAGEMENT FINAL — fond noir, mêmes tailles ════════════════ */
.mf-final {
  background: var(--black);
  color: var(--white);
}

.mf-final .mf-chapter-header {
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .mf-final .mf-chapter-header { margin-bottom: 80px; }
}

.mf-final .mf-hero-visual {
  background: rgba(255,255,255,0.05);
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .mf-final .mf-hero-visual { margin-bottom: 80px; }
}

.mf-signature {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 900px;
}
@media (min-width: 768px) { .mf-signature { margin-top: 80px; } }

.mf-signature p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
.mf-signature p + p { margin-top: 4px; }

.mf-download { margin-top: 56px; }
@media (min-width: 768px) { .mf-download { margin-top: 80px; } }

.mf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  color: var(--black);
  padding: 18px 32px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform var(--tr), background var(--tr);
}
.mf-download-btn:hover { background: #e6e6e6; transform: translateY(-1px); }
.mf-download-btn svg { flex-shrink: 0; transition: transform var(--tr); }
.mf-download-btn:hover svg { transform: translateX(3px); }

/* ════════════════ FADE-IN ════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   MOBILE LIGHTFORMCOLOR v4 — Hiérarchie propre
   ============================================ */

/* Vidéo : switch desktop/mobile (toujours actif) */
.video-desktop-only { display: block; }
.video-mobile-only { display: none; }
@media (max-width: 767px) {
  .video-desktop-only { display: none; }
  .video-mobile-only { display: block; }
}

/* Vidéo portrait mobile : plein écran edge-to-edge */
.product-image-wrap-portrait {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
/* ============================================
   NAV DRAWER v4 — Typo unique, sans lignes, largeur élargie
   ============================================ */

/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  cursor: pointer;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

/* Drawer container — élargi */
.nav-drawer-v3 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  height: 100vh;
  width: min(560px, 94vw);
  background: #fff;
  color: var(--black);
  z-index: 10000;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.nav-drawer-v3.is-open {
  transform: translateX(0);
}

.nd-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Top bar */
.nd-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 32px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .nd-top { padding: 24px 40px; }
}

.nd-close {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--black);
  transition: background 0.2s ease, border-color 0.2s ease;
  padding: 0;
}
.nd-close:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.4);
}

/* Body scrollable */
.nd-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px 40px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  flex: 1;
}
@media (min-width: 768px) {
  .nd-body { padding: 28px 40px 48px; }
}
.nd-body::-webkit-scrollbar { width: 4px; }
.nd-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 2px; }

/* Sections : espace entre */
.nd-section {
  margin-bottom: 40px;
}
.nd-section:last-child { margin-bottom: 0; }

/* ── Typo unique FT Polar Book pour TOUS les éléments ── */
.nd-section-title,
.nd-link,
.nd-link-text,
.nd-sub-link,
.nd-pill,
button.nd-link {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--black);
}

/* Gros titre de section */
.nd-section-title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: 0 0 16px;
}

/* Liens (titres) */
.nd-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nd-item {
  border: 0;
}
.nd-link,
button.nd-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
  text-decoration: none;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  transition: color 0.2s ease;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.nd-link:hover { color: rgba(0, 0, 0, 0.55); }

.nd-link-text {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nd-link:hover .nd-link-text {
  transform: translateX(6px);
}

/* Chevron pour bouton expansible */
.nd-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(0, 0, 0, 0.55);
}
.nd-link--expandable[aria-expanded="true"] .nd-chevron {
  transform: rotate(180deg);
}

/* Sous-menu expansible (sous-titres LFC Tube) */
.nd-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nd-item--expandable.is-open .nd-sub {
  max-height: 400px;
}
.nd-sub-links {
  list-style: none;
  margin: 0;
  padding: 4px 0 10px 20px;
}
.nd-sub-links li + li { margin-top: 2px; }
.nd-sub-link {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.3;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nd-sub-link:hover {
  color: var(--black);
  transform: translateX(6px);
}

/* ── Section Informations : boutons pills ── */
.nd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: transparent;
  color: var(--black);
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nd-pill:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.nd-pill--active {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
  cursor: default;
  pointer-events: none;
}

/* Bloc langue dans le drawer — espacement de séparation */
.nd-lang {
  margin-top: 32px;
  display: flex;
  gap: 10px;
}

/* Anti-scroll body quand ouvert */
body.nav-open { overflow: hidden; }

/* Mobile — format portrait fluide */
@media (max-width: 767px) {
  .nav-drawer-v3 {
    width: 100vw;
    max-width: 100vw;
  }
  .nd-body {
    padding: 20px 24px 32px;
  }
  .nd-section {
    margin-bottom: 32px;
  }
  .nd-section-title {
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: 12px;
  }
  .nd-link,
  button.nd-link {
    font-size: clamp(17px, 4.5vw, 20px);
    padding: 5px 0;
  }
  .nd-pill {
    padding: 9px 16px;
    font-size: 14px;
  }
}
/* ═══════════════════════════════════════════════
   ACTIVE UNIQUEMENT EN MOBILE (< 768px)
   Desktop intact
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Anti-débordement global */
  html, body { overflow-x: hidden; }


  /* ─────────────────────────────────────────
     NIVEAU PRINCIPAL — marges 20px
     Tous les contenus forts : textes, cards, formulaires
     ───────────────────────────────────────── */

  /* Textes de présentation (hero et blocs text_section) */
  .product-section-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important;
  }

  /* Containers de blocs text_section et autres wrappers produit */
  .product-section > div[style*="max-width:1100px"],
  .product-section > div[style*="max-width:1200px"],
  .product-section > div[style*="max-width:1050px"],
  .product-section > div[style*="max-width:900px"],
  .product-section > div[style*="width:92%"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Titres principaux ferrés à gauche, texte aligné gauche */
  .product-section-inner .product-h1,
  .product-section-inner .product-h2 {
    text-align: left !important;
  }
  .product-section-inner .product-h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
  }
  .product-section-inner .product-body {
    text-align: left !important;
    max-width: 100% !important;
  }


  /* ─────────────────────────────────────────
     TEXTE MULTICOLORE "Illuminons votre prochain projet"
     Reste centré et impactant
     ───────────────────────────────────────── */
  .product-section-inner h2[style*="background:linear-gradient"] {
    font-size: 34px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    margin-bottom: 28px !important;
  }
  .product-section-inner div[style*="background:linear-gradient"] {
    max-width: 100% !important;
    width: 100% !important;
    font-size: 22px !important;
    line-height: 1.35 !important;
    padding: 0 !important;
    text-align: center !important;
    font-weight: 400 !important;
  }
  .product-section div[style*="max-width:900px"][style*="width:90%"] {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }


  /* ─────────────────────────────────────────
     BOUTONS "Acheter" — centrés, taille native
     ───────────────────────────────────────── */
  .product-cta-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
  }
  .product-section-inner--center {
    text-align: left !important;
  }
  .product-section-inner--center .product-cta-wrap {
    align-items: center !important;
    width: 100% !important;
  }
  .product-cta-btn {
    width: auto !important;
    min-width: 0 !important;
  }


  /* ─────────────────────────────────────────
     NIVEAU SECONDAIRE — SLIDESHOWS
     Marges 40px pour retrait visuel
     ───────────────────────────────────────── */

  .wb-slideshow .wb-slide > div {
    max-width: 100% !important;
    padding: 0 40px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: auto !important;
    display: block !important;
  }

  /* Neutralise les paddings inline des divs intermédiaires dans les slides
     (ex: padding:0 60px, padding:0 32px) pour éviter le double padding */
  .wb-slideshow .wb-slide > div > div[style*="padding:0 60px"],
  .wb-slideshow .wb-slide > div > div[style*="padding: 0 60px"],
  .wb-slideshow .wb-slide > div > div[style*="padding:0 32px"],
  .wb-slideshow .wb-slide > div > div[style*="padding: 0 32px"],
  .wb-slideshow .wb-slide > div > div[style*="padding:0 48px"],
  .wb-slideshow .wb-slide > div > div[style*="padding: 0 48px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Image rectangulaire : 4/3 pleine largeur (dans les 40px de padding) */
  .wb-slideshow .wb-slide > div > div:first-child:not([style*="border-radius:50%"]) {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4/3 !important;
    margin: 0 0 24px !important;
    border-radius: 16px !important;
  }

  

  /* Légendes : plus petites que les titres principaux (niveau 2) */
  .wb-slideshow .wb-slide h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
    color: #fff !important;
  }
  .wb-slideshow .wb-slide p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin: 0 !important;
  }

  /* Masque les flèches inline (repositionnées via JS dans .wb-ss-controls) */
  .wb-slideshow .wb-slide > div > div[style*="align-items:flex-start"] > button {
    display: none !important;
  }
  .wb-slideshow .wb-slide > div > div[style*="align-items:flex-start"] {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
  }

  /* Barre de contrôle unifiée (flèche · dots · flèche) */
  .wb-ss-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }
  .wb-ss-controls .wb-ss-arrow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .wb-ss-controls .wb-ss-dots-inner {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
  }

  /* Masque les containers vides après réorganisation JS */
  .wb-slideshow .wb-slide > div > div[style*="justify-content:center"][style*="margin-top:32px"]:empty,
  .wb-slideshow .wb-slide > div > div[style*="justify-content:center"][style*="margin-top:24px"]:empty {
    display: none !important;
  }


  /* ─────────────────────────────────────────
     PICTOGRAMMES PIXELS — 3 + 2 centrés
     ───────────────────────────────────────── */
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    justify-content: center !important;
    gap: 20px 12px !important;
    overflow: visible !important;
    padding: 0 20px !important;
    margin-bottom: 32px !important;
  }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(1) { grid-column: 1 / 3 !important; justify-self: center !important; }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(2) { grid-column: 3 / 5 !important; justify-self: center !important; }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(3) { grid-column: 5 / 7 !important; justify-self: center !important; }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(4) { grid-column: 2 / 4 !important; justify-self: center !important; }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(5) { grid-column: 4 / 6 !important; justify-self: center !important; }
  .px-btn {
    width: 64px !important;
    height: 64px !important;
  }
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] p {
    font-size: 12px !important;
  }

  /* Slide précision interne */
  .prec-slide {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .product-section > div > div[style*="background:rgba(255,255,255,0.06)"][style*="border-radius:20px"] {
    padding: 24px !important;
  }


  /* ─────────────────────────────────────────
     NIVEAU PRINCIPAL — CARDS "ACHETER" (3 variantes)
     Empilement vertical, marges 20px comme le reste
     ───────────────────────────────────────── */
  #product-options > div[style*="max-width:1200px"] {
    padding: 0 20px !important;
  }
  #product-options > div > div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }


  /* ─────────────────────────────────────────
     NIVEAU PRINCIPAL — DÉTAILS accordéon
     ───────────────────────────────────────── */
  #details > div[style*="max-width:1200px"] {
    padding: 0 20px !important;
  }
  #details button span { flex-shrink: 0 !important; }


  /* ─────────────────────────────────────────
     NIVEAU PRINCIPAL — FORMULAIRE CONTACT
     Champs compacts, marges 20px
     ───────────────────────────────────────── */
  input[type="text"]:not(.contact-overlay-input),
  input[type="email"]:not(.contact-overlay-input),
  input[type="tel"]:not(.contact-overlay-input),
  input[type="number"]:not(.contact-overlay-input),
  input[type="search"]:not(.contact-overlay-input),
  textarea:not(.contact-overlay-input),
  select {
    padding: 12px 20px !important;
    min-height: 42px !important;
    height: auto !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  button[type="submit"]:not(.contact-overlay-submit),
  input[type="submit"] {
    padding: 12px 32px !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }
  button[type="submit"],
  input[type="submit"] {
    padding: 12px 32px !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }


  /* ─────────────────────────────────────────
     ESPACEMENT VERTICAL DES SECTIONS
     ───────────────────────────────────────── */
  .product-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

}

/* Pages génériques */
@media (max-width: 767px) {
  section[style*="padding:0 48px"],
  section[style*="padding: 0 48px"] {
    padding: 0 20px !important;
  }
  .home-products-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Fix vide 400px sous slideshow cercle */
@media (max-width: 767px) {
  .wb-slideshow .wb-slide div[style*="min-height:400px"],
  .wb-slideshow .wb-slide div[style*="min-height: 400px"] {
    min-height: 0 !important;
  }
}
/* Fix vide résiduel : ancienne zone de contrôles cercle vidée par le JS */
@media (max-width: 767px) {
  .wb-slideshow .wb-slide div[style*="align-items:center"][style*="justify-content:center"][style*="margin-top:32px"] {
    display: none !important;
  }
}
/* Espace respiration entre image cercle et légende en mobile */
@media (max-width: 767px) {
  .wb-slideshow .wb-slide > div > div[style*="border-radius:50%"]:first-child {
    margin: 0 auto 32px !important;
  }
}
/* Padding latéral à 0 sur les textes de présentation produit (niveau 1) */
@media (max-width: 767px) {
  .product-section-inner {
    padding: 0 !important;
  }
}
/* Padding latéral à 0 sur tous les textes de présentation produit (niveau 1) */
@media (max-width: 767px) {
  .product-section > div[style*="max-width:1100px"],
  .product-section > div[style*="max-width:1200px"],
  .product-section > div[style*="max-width:1050px"],
  .product-section > div[style*="max-width:900px"],
  .product-section > div[style*="width:92%"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ============================================
   CONTRÔLES SLIDESHOW — Desktop + Mobile
   Style Apple : barre unifiée centrée
   ============================================ */
.wb-ss-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  width: fit-content !important;
}
.wb-ss-controls .wb-ss-arrow {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wb-ss-controls .wb-ss-arrow:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.wb-ss-controls .wb-ss-dots-inner {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
/* ============================================
   PAGE LIGHTFORMCOLOR — Style typographique "Manifeste"
   Desktop + Mobile
   ============================================ */

/* Titres principaux (h2.product-h1, h2.product-h2) */
.product-section-inner .product-h1,
.product-section-inner .product-h2 {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 0 24px !important;
  text-transform: none !important;
  color: var(--white) !important;
}

/* Sous-titre product-h2 (quand il vient après product-h1) : légèrement plus petit */
.product-section-inner .product-h1 + .product-h2 {
  font-size: clamp(24px, 3vw, 36px) !important;
  margin-bottom: 32px !important;
  opacity: 0.9 !important;
}

/* Textes courants : style chapô manifeste */
.product-section-inner .product-body,
.product-section-inner .product-body p {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: var(--white) !important;
  text-align: left !important;
  max-width: 900px !important;
  margin: 0 0 20px !important;
}
.product-section-inner .product-body:last-of-type,
.product-section-inner .product-body:last-of-type p {
  margin-bottom: 32px !important;
}

/* Blocs text_section dynamiques (Un dispositif modulaire, Technologie durable, etc.) */
.product-section > div[style*="max-width:1100px"] h2:not([style*="background:linear-gradient"]) {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 0 24px !important;
  text-transform: none !important;
  color: var(--white) !important;
}
.product-section > div[style*="max-width:1100px"] .product-body,
.product-section > div[style*="max-width:1100px"] .product-body p {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  color: var(--white) !important;
  text-align: left !important;
  max-width: 900px !important;
  margin: 0 0 20px !important;
}

/* Garde le bloc multicolore "Illuminons votre prochain projet" avec son style gradient spécifique,
   mais applique quand même la tonalité/taille du manifeste */
.product-section-inner h2[style*="background:linear-gradient"] {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}
.product-section-inner div[style*="background:linear-gradient"] {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}
/* ============================================
   HOME HERO — Vidéo portrait mobile
   ============================================ */
/* Sur desktop, .video-desktop-only est déjà visible par défaut (règle existante pour la page LIGHTFORMCOLOR).
   Sur mobile, .video-mobile-only prend le relais. Rien à ajouter. */

/* Mobile : ajuster le hero pour afficher la vidéo portrait en plein écran */
@media (max-width: 767px) {
  .home-hero-video.video-desktop-only {
    display: none !important;
  }
  .home-hero-video.video-mobile-only {
    display: block !important;
    object-fit: cover !important;
  }
}
/* ============================================
   HOME HERO — Accroche + 2 boutons (Desktop + Mobile)
   ============================================ */

/* Wrap de la zone CTA : stack vertical (tagline au-dessus, boutons en-dessous) */
.home-hero-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Accroche au-dessus des boutons */
.home-hero-tagline {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
  text-align: center;
  max-width: 720px;
}

/* Groupe de boutons : desktop côte à côte, mobile empilés */
.home-hero-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .home-hero-btns {
    flex-direction: column-reverse;
    width: 100%;
    max-width: 320px;
  }
  .home-hero-btns .home-hero-btn {
    width: 100%;
    text-align: center;
  }
}

/* Bouton "En savoir plus" — style ghost (bordure blanche, fond transparent) */
.home-hero-btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.home-hero-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

/* Bouton "Acheter" — style primary (fond blanc, texte noir) */
.home-hero-btn--primary {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
}
.home-hero-btn--primary:hover {
  background: rgba(255, 255, 255, 0.9);
}
/* ============================================
   Hero LIGHTFORMCOLOR : aligner comme les autres sections
   ============================================ */
.product-section-inner--center,
.product-section-inner--center .product-h1,
.product-section-inner--center .product-h2,
.product-section-inner--center .product-body,
.product-section-inner--center .product-body p {
  text-align: left !important;
}

/* Le bouton CTA (Acheter) et le texte "à partir de" restent centrés */
.product-section-inner--center .product-cta-wrap {
  align-items: center !important;
  text-align: center !important;
}
/* ============================================
   Hero LIGHTFORMCOLOR : uniformiser la largeur 
   avec les autres sections text_section
   ============================================ */

/* Desktop : même max-width que les text_section (1100px) */
.product-section-inner {
  max-width: 1100px !important;
}

/* Desktop : padding latéral cohérent (celui appliqué sur text_section) */
@media (min-width: 768px) {
  .product-section > div > .product-section-inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
/* Permettre au texte corps d'occuper plus de largeur */
.product-section-inner .product-body,
.product-section-inner .product-body p,
.product-section > div[style*="max-width:1100px"] .product-body,
.product-section > div[style*="max-width:1100px"] .product-body p {
  max-width: 100% !important;
}
/* ============================================
   PAGE À PROPOS — v3 (basée sur la version qui marchait)
   Mobile : empilé (titre / image portrait 3:4 / contenu)
   Desktop (≥ 768px) : 3 colonnes flex, hauteur fixée, contenu scroll
   ============================================ */

.about-page {
  background: var(--white);
  min-height: calc(100vh - var(--announcement-h) - var(--header-h));
}

.about-layout {
  display: flex;
  flex-direction: column;
}

/* ─── MOBILE (par défaut) ─── */
.about-col-left {
  padding: 24px 20px 0;
  flex-shrink: 0;
}

.about-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 24px;
  color: var(--black);
  line-height: 1.32;
  margin: 0;
}

.about-col-center {
  flex: 1;
  margin-top: 16px;
  padding: 0 20px;
}

/* Mobile : image portrait 3:4 */
.about-mobile-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f5f5;
}
.about-mobile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback mobile : gradient RGB en 3:4 */
.about-gradient--mobile {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--gradient-rgb);
  border-radius: 14px;
}

/* Masquer la version desktop en mobile */
.about-gradient--desktop {
  display: none;
}

.about-col-right {
  width: 100%;
  padding: 32px 20px 60px;
  overflow-y: visible;
}

.about-block {
  margin-bottom: 48px;
}
.about-block:last-child {
  margin-bottom: 0;
}
.about-block-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 24px;
  color: var(--black);
  margin: 0 0 16px;
  line-height: 1.2;
}
.about-block-body {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  line-height: 1.65;
}
.about-block-body p { margin: 0 0 12px; }
.about-block-body p:last-child { margin-bottom: 0; }
.about-block-body ol,
.about-block-body ul {
  padding-left: 22px;
  margin: 12px 0;
}
.about-block-body li { margin: 0 0 8px; }
.about-block-body a {
  color: var(--black);
  text-decoration: underline;
}

/* Fondateurs */
.about-founder {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}
.about-founder-info { flex: 1; }
.about-founder-info p {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  line-height: 1.5;
  margin: 0;
}
.about-linkedin {
  color: var(--black);
  opacity: 0.5;
  flex-shrink: 0;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}
.about-linkedin:hover { opacity: 1; }

/* ─── DESKTOP (≥ 768px) ─── */
@media (min-width: 768px) {

  .about-layout {
    flex-direction: row;
    height: calc(100vh - var(--announcement-h) - var(--header-h) - var(--footer-h) - 60px);
    overflow: hidden;
  }

  .about-col-left {
    padding: 45px 0 0 20px;
  }
  .about-title {
    font-size: 32px;
  }

  .about-col-center {
    padding: 45px 20px;
    margin-top: 0;
    margin-left: -50px;
    height: 100%;
  }

  /* Masquer mobile image en desktop */
  .about-mobile-image {
    display: none;
  }
  .about-gradient--mobile {
    display: none;
  }
  /* Afficher version desktop */
  .about-gradient--desktop {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gradient-rgb);
    overflow: hidden;
  }

  .about-col-right {
    width: 428px;
    flex-shrink: 0;
    padding: 45px 20px 100px 0;
    overflow-y: auto;
  }
}
/* Ajustements about desktop : pas de chevauchement titre, espace image/texte */
@media (min-width: 768px) {
  .about-col-center {
    margin-left: 0 !important;
    padding: 45px 48px !important;
  }
}
/* Titre "À propos" aligné sur les titres manifeste */
.about-title {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

@media (min-width: 768px) {
  .about-title {
    font-size: clamp(32px, 4.5vw, 56px) !important;
  }
}
/* Titre "Contact" aligné sur les titres manifeste */
.contact-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #000;
  margin: 0 0 48px;
}
/* Wrapper de la page Contact : padding aligné sur la page À propos */
.contact-wrapper {
  background: #fff;
  padding: 24px 20px 60px;
  min-height: calc(100vh - 82px);
}

@media (min-width: 768px) {
  .contact-wrapper {
    padding: 45px 20px 80px;
  }
}
/* Réduire les titres type "Un dispositif modulaire" au niveau de "Un signal lumineux narratif" */
.product-section > div[style*="max-width:1100px"] h2:not([style*="background:linear-gradient"]) {
  font-size: clamp(24px, 3vw, 36px) !important;
  opacity: 0.9 !important;
  margin-bottom: 32px !important;
}
/* Corps de texte des sections produit en FT Polar Book (400) */
.product-section > div[style*="max-width:1100px"] .product-body,
.product-section > div[style*="max-width:1100px"] .product-body p {
  font-weight: 400 !important;
}
/* Accordéons details : respecter le gras + ajouter des lignes entre paragraphes */
#details button + div > div {
  font-weight: 300 !important;
}

/* Le gras doit rester visible */
#details button + div strong,
#details button + div b {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Chaque paragraphe (retour à la ligne dans l'éditeur) devient une ligne séparée */
#details button + div p {
  margin: 0 !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
}
#details button + div p:first-child {
  padding-top: 0 !important;
  border-top: none !important;
}
#details button + div p:last-child {
  padding-bottom: 0 !important;
}
/* Épaissir les traits de séparation entre accordéons details */
#details > div > div > div[style*="border-top:1px solid rgba(255,255,255,0.15)"],
#details > div > div > div[style*="border-top: 1px solid rgba(255,255,255,0.15)"] {
  border-top: 3px solid rgba(255, 255, 255, 0.5) !important;
}
/* Nettoyage ultime : toute ligne parasite sous le dernier paragraphe d'accordéon */
#details button + div > div {
  border: none !important;
}
#details button + div > div > p {
  border-bottom: none !important;
}
#details button + div > div > p:last-of-type {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
/* Si le padding-bottom:24px de la div crée la ligne via un autre élément */
#details button + div > div > p:last-of-type::after {
  display: none !important;
  content: none !important;
}
/* Slideshow mobile : image rectangulaire carrée et pleine largeur edge-to-edge */
@media (max-width: 767px) {
  /* Le container du slide : retirer le padding latéral pour pleine largeur */
  .wb-slideshow .wb-slide > div {
    padding: 0 !important;
  }
  /* L'image rectangulaire : carrée (1:1), pleine largeur, sans border-radius pour matcher l'image du dessus */
  .wb-slideshow .wb-slide > div > div:first-child:not([style*="border-radius:50%"]) {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    margin: 0 0 24px !important;
  }
  /* La légende : elle DOIT garder les marges latérales */
  .wb-slideshow .wb-slide > div > div[style*="align-items:flex-start"] {
    padding: 0 20px !important;
  }
  /* Les contrôles (flèches + dots) : même chose */
  .wb-ss-controls {
    padding: 0 20px !important;
  }
}
/* Accroche hero accueil : FT Polar Book */
.home-hero-tagline {
  font-weight: 400 !important;
}
/* ============================================
   HERO ACCUEIL — Ajustements accroche + position
   ============================================ */

/* Remonter l'ensemble accroche + boutons */
.home-hero-cta {
  bottom: 140px !important;
}
@media (min-width: 768px) {
  .home-hero-cta {
    bottom: 180px !important;
  }
}

/* Agrandir l'accroche */
.home-hero-tagline {
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.2 !important;
  max-width: 820px !important;
}

/* Plus d'espace entre l'accroche et les boutons */
.home-hero-cta {
  gap: 32px !important;
}
/* Tagline hero accueil : une seule ligne sur mobile */
@media (max-width: 767px) {
  .home-hero-tagline {
    white-space: nowrap !important;
    font-size: clamp(13px, 4.5vw, 18px) !important;
  }
}
/* Hero accueil mobile : boutons à taille naturelle (pas étirés) */
@media (max-width: 767px) {
  .home-hero-btns {
    max-width: none !important;
    width: auto !important;
  }
  .home-hero-btns .home-hero-btn {
    width: auto !important;
  }
}
/* Hero accueil mobile : boutons côte à côte + descendre l'ensemble */
@media (max-width: 767px) {
  /* Les boutons en ligne (flex-direction: row au lieu de column-reverse) */
  .home-hero-btns {
    flex-direction: row !important;
    gap: 10px !important;
    max-width: none !important;
    width: auto !important;
    justify-content: center !important;
  }
  .home-hero-btns .home-hero-btn {
    width: auto !important;
  }
  /* Descendre l'ensemble accroche + boutons */
  .home-hero-cta {
    bottom: 80px !important;
  }
}
/* Hero accueil mobile : boutons côte à côte + descendre l'ensemble */
@media (max-width: 767px) {
  /* Les boutons en ligne (flex-direction: row au lieu de column-reverse) */
  .home-hero-btns {
    flex-direction: row !important;
    gap: 10px !important;
    max-width: none !important;
    width: auto !important;
    justify-content: center !important;
  }
  .home-hero-btns .home-hero-btn {
    width: auto !important;
  }
  /* Descendre l'ensemble accroche + boutons */
  .home-hero-cta {
    bottom: 80px !important;
  }
}

/* Hero accueil desktop : descendre l'ensemble phrase + boutons */
@media (min-width: 768px) {
  .home-hero-cta {
    bottom: 60px !important;
  }
}
/* ============================================
   HERO ACCUEIL desktop : toujours remplir la viewport
   (revert au comportement d'origine : 100vh, vidéo cover)
   ============================================ */
@media (min-width: 768px) {
  .home-hero {
    min-height: calc(100vh - var(--announcement-h) - var(--header-h));
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    max-height: calc(100vh - var(--announcement-h) - var(--header-h));
  }
}
/* ============================================
   ABOUT OVERLAY — style Unknown Untitled
   Texte énorme, Light, pleine largeur
   ============================================ */

.about-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10002;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  visibility: hidden;
  will-change: transform;
}
.about-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}

/* Bloquer le scroll derrière + flouter la page */
body.about-overlay-open {
  overflow: hidden;
}
body.about-overlay-open main,
body.about-overlay-open .site-header,
body.about-overlay-open .site-footer,
body.about-overlay-open #shopify-section-announcement-bar {
  filter: blur(8px);
  transition: filter 0.5s ease;
}

/* Bouton fermer en haut à droite */
.about-overlay-close {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.about-overlay-close:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Zone scrollable */
.about-overlay-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 80px 48px 120px;
  box-sizing: border-box;
}

/* Conteneur : large, aligné à gauche */
.about-overlay-inner {
  max-width: none;
  margin: 0;
  color: #fff;
}

/* ──────── Typo UNIQUE : énorme + Light ──────── */
.about-overlay-inner,
.about-overlay-inner h1,
.about-overlay-inner h2,
.about-overlay-inner p,
.about-overlay-inner li,
.about-overlay-inner a,
.about-overlay-inner strong {
  font-family: var(--font-primary);
  font-weight: 300 !important;
  font-size: clamp(22px, 2.8vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}

/* Titre principal "À propos" : masqué (pas de H1 dans Unknown Untitled) */
.about-overlay-title {
  display: none !important;
}

/* Sections : grosses marges entre les blocs de texte */
.about-overlay-section {
  margin-bottom: 1.2em;
}
.about-overlay-section:last-child {
  margin-bottom: 0;
}

/* Titres de section : masqués (le texte suffit) */
.about-overlay-section h2 {
  display: none !important;
}

/* Paragraphes : espace vertical important */
.about-overlay-section p {
  margin-bottom: 1em !important;
}
.about-overlay-section p:last-child {
  margin-bottom: 0 !important;
}

/* Listes : inline dans le texte */
.about-overlay-section ol,
.about-overlay-section ul {
  padding-left: 0;
  margin: 1em 0;
  list-style: none;
}
.about-overlay-section li {
  margin-bottom: 0.3em;
}

/* Liens : soulignement discret */
.about-overlay-section a {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
}
.about-overlay-section a:hover {
  opacity: 0.6;
}

/* Gras : reste Light comme tout le reste */
.about-overlay-inner strong {
  font-weight: 300 !important;
}

/* Fondateurs : deux blocs simples avec séparation */
.about-overlay-founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 1.2em;
}
.about-overlay-founder p {
  margin-bottom: 0 !important;
}
.about-overlay-founder a {
  display: inline-block;
  margin-top: 0.4em;
}

/* Mobile */
@media (max-width: 767px) {
  .about-overlay-scroll {
    padding: 60px 24px 80px;
  }
  .about-overlay-close {
    top: 16px;
    right: 16px;
  }
  .about-overlay-inner,
  .about-overlay-inner h1,
  .about-overlay-inner h2,
  .about-overlay-inner p,
  .about-overlay-inner li,
  .about-overlay-inner a,
  .about-overlay-inner strong {
    font-size: clamp(22px, 5.5vw, 30px);
    line-height: 1.2;
  }
  .about-overlay-founders {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* Fondateurs About Overlay : grille 2 colonnes */
.about-overlay-founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 1.2em;
}
.about-overlay-founders-grid .about-overlay-founder {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-overlay-founders-grid .about-overlay-founder p {
  margin: 0 !important;
}
.about-overlay-founders-grid .about-overlay-founder a {
  margin-top: 0.6em;
}

/* Mobile : une seule colonne */
@media (max-width: 767px) {
  .about-overlay-founders-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* ============================================
   CONTACT OVERLAY — même design que About Overlay
   Typo unique, Light, ferré à gauche
   ============================================ */

.contact-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10002;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  visibility: hidden;
  will-change: transform;
}
.contact-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}

/* Bloquer scroll + flouter derrière */
body.contact-overlay-open {
  overflow: hidden;
}
body.contact-overlay-open main,
body.contact-overlay-open .site-header,
body.contact-overlay-open .site-footer,
body.contact-overlay-open #shopify-section-announcement-bar {
  filter: blur(8px);
  transition: filter 0.5s ease;
}

/* Bouton fermer */
.contact-overlay-close {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.contact-overlay-close:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Zone scrollable */
.contact-overlay-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 80px 48px 120px;
  box-sizing: border-box;
}

/* Conteneur : aligné à gauche, pleine largeur */
.contact-overlay-inner {
  max-width: none;
  margin: 0;
  color: #fff;
}

/* ──────── Typo UNIQUE : Light, grande, ferré à gauche ──────── */
.contact-overlay-inner,
.contact-overlay-inner p,
.contact-overlay-inner a,
.contact-overlay-input,
.contact-overlay-submit,
.contact-overlay-success,
.contact-overlay-error {
  font-family: var(--font-primary);
  font-weight: 300 !important;
  font-size: clamp(24px, 3.2vw, 60px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}

/* Sections : espace entre blocs */
.contact-overlay-section {
  margin-bottom: 1.2em;
}
.contact-overlay-section p {
  margin: 0;
}

/* Formulaire : simple colonne flex alignée à gauche */
.contact-overlay-form {
  display: block;
  width: 100%;
  margin-bottom: 1.2em;
}

/* Inputs + textarea : reset agressif + hérite tout du parent */
input.contact-overlay-input,
textarea.contact-overlay-input {
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent;
  background-color: transparent;
  border: 0;
  border-width: 0;
  outline: 0;
  padding: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 0 0.3em 0;
  box-sizing: border-box;
  border-radius: 0;
  resize: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-indent: 0;
  vertical-align: top;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #fff;
  text-align: left;
}

/* Placeholder : MEME couleur blanche que le texte */
input.contact-overlay-input::placeholder,
textarea.contact-overlay-input::placeholder {
  color: #fff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #fff;
}
input.contact-overlay-input::-webkit-input-placeholder,
textarea.contact-overlay-input::-webkit-input-placeholder {
  color: #fff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #fff;
}
input.contact-overlay-input::-moz-placeholder,
textarea.contact-overlay-input::-moz-placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

/* Masquer placeholder quand focus */
input.contact-overlay-input:focus::placeholder,
textarea.contact-overlay-input:focus::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

/* Bouton Envoyer : aligné à gauche comme le reste */
button.contact-overlay-submit {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0.6em 0 0 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
button.contact-overlay-submit:hover {
  opacity: 0.6;
  transform: translateX(6px);
}

/* Textarea message : grandit automatiquement avec le contenu, jamais de scroll interne */
.contact-overlay-textarea,
textarea.contact-overlay-textarea {
  min-height: 1.2em;
  overflow: hidden;
  resize: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Bouton envoyer : même typo, soulignement discret au hover */
.contact-overlay-submit {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 0.6em;
  cursor: pointer;
  text-align: left;
  display: inline-block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-overlay-submit:hover {
  opacity: 0.6;
  transform: translateX(6px);
}

/* Messages succès / erreur */
.contact-overlay-success {
  margin: 0.6em 0;
}
.contact-overlay-error {
  font-size: 16px;
  color: #FF5656;
  margin: 0 0 20px;
}

/* Coordonnées : même typo et taille */
.contact-overlay-coords {
  margin-top: 1.5em;
}
.contact-overlay-coords p {
  margin: 0;
}
.contact-overlay-coords a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Mobile */
@media (max-width: 767px) {
  .contact-overlay-scroll {
    padding: 60px 24px 80px;
  }
  .contact-overlay-close {
    top: 16px;
    right: 16px;
  }
  .contact-overlay-inner,
  .contact-overlay-inner p,
  .contact-overlay-inner a,
  .contact-overlay-input,
  .contact-overlay-submit,
  .contact-overlay-success {
    font-size: clamp(22px, 5.5vw, 30px);
    line-height: 1.2;
  }
}
/* Force reset du bouton Envoyer de l'overlay contact (plus spécifique) */
button.contact-overlay-submit[type="submit"] {
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: inherit !important;
  margin-left: 0 !important;
  margin-top: 0.8em !important;
}
/* ============================================
   CONTACT OVERLAY — couleur de fond + texte noir
   ============================================ */

/* Fond bleu clair */
.contact-overlay {
  background: #a7d4e9 !important;
}

/* Tous les textes en noir */
.contact-overlay-inner,
.contact-overlay-inner p,
.contact-overlay-inner a,
.contact-overlay-input,
.contact-overlay-submit,
.contact-overlay-success,
.contact-overlay-error,
button.contact-overlay-submit,
input.contact-overlay-input,
textarea.contact-overlay-input {
  color: #000 !important;
}

/* Placeholders en noir avec opacité pour distinction */
input.contact-overlay-input::placeholder,
textarea.contact-overlay-input::placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 0.5 !important;
}
input.contact-overlay-input::-webkit-input-placeholder,
textarea.contact-overlay-input::-webkit-input-placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 0.5 !important;
}
input.contact-overlay-input::-moz-placeholder,
textarea.contact-overlay-input::-moz-placeholder {
  color: #000 !important;
  opacity: 0.5 !important;
}

/* Bouton fermer en noir aussi */
.contact-overlay-close {
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
.contact-overlay-close:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.45) !important;
}

/* Retirer le soulignement des liens dans les coordonnées */
.contact-overlay-coords a {
  text-decoration: none !important;
}
/* Placeholders : noir plein (pas d'opacité) */
input.contact-overlay-input::placeholder,
textarea.contact-overlay-input::placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}
input.contact-overlay-input::-webkit-input-placeholder,
textarea.contact-overlay-input::-webkit-input-placeholder {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
}
input.contact-overlay-input::-moz-placeholder,
textarea.contact-overlay-input::-moz-placeholder {
  color: #000 !important;
  opacity: 1 !important;
}

/* Overlays About & Contact : passer en FT Polar Book (400) */
.about-overlay-inner,
.about-overlay-inner h1,
.about-overlay-inner h2,
.about-overlay-inner p,
.about-overlay-inner li,
.about-overlay-inner a,
.about-overlay-inner strong,
.contact-overlay-inner,
.contact-overlay-inner p,
.contact-overlay-inner a,
.contact-overlay-input,
.contact-overlay-submit,
.contact-overlay-success,
.contact-overlay-error,
input.contact-overlay-input,
textarea.contact-overlay-input,
button.contact-overlay-submit {
  font-weight: 400 !important;
}

/* Placeholders aussi en Book */
input.contact-overlay-input::placeholder,
textarea.contact-overlay-input::placeholder {
  font-weight: 400 !important;
}
/* ============================================
   LEGAL OVERLAY — fond blanc, typo Book grande
   Liste des titres en haut + contenu à la suite
   ============================================ */

.legal-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 10002;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  visibility: hidden;
  will-change: transform;
}
.legal-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}

/* Bloquer scroll + flouter derrière */
body.legal-overlay-open {
  overflow: hidden;
}
body.legal-overlay-open main,
body.legal-overlay-open .site-header,
body.legal-overlay-open .site-footer,
body.legal-overlay-open #shopify-section-announcement-bar {
  filter: blur(8px);
  transition: filter 0.5s ease;
}

/* Bouton fermer en noir */
.legal-overlay-close {
  position: fixed;
  top: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.legal-overlay-close:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.45);
}

/* Zone scrollable */
.legal-overlay-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 80px 48px 120px;
  box-sizing: border-box;
}

/* Conteneur : pleine largeur, aligné à gauche */
.legal-overlay-inner {
  max-width: none;
  margin: 0;
  color: #000;
}

/* ──────── Typo UNIQUE : FT Polar Book, grande, ferré à gauche ──────── */
.legal-overlay-inner,
.legal-overlay-inner p,
.legal-overlay-inner a,
.legal-overlay-inner li,
.legal-overlay-inner h2,
.legal-overlay-inner h3,
.legal-overlay-inner strong,
.legal-overlay-menu-link,
.legal-overlay-section-title {
  font-family: var(--font-primary);
  font-weight: 400 !important;
  font-size: clamp(24px, 3.2vw, 60px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #000;
  margin: 0;
  text-align: left;
}

/* LISTE DES TITRES EN HAUT (menu de navigation) */
.legal-overlay-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2em;
}
.legal-overlay-menu-link {
  text-decoration: none;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  transition: color 0.2s ease;
  display: inline-block;
  width: fit-content;
}
.legal-overlay-menu-link:hover {
  color: #000;
}

/* CONTENU : sections empilées avec grosses marges entre */
.legal-overlay-content {
  display: block;
}
.legal-overlay-section {
  margin-top: 2em;
  scroll-margin-top: 60px;
}
.legal-overlay-section:first-child {
  margin-top: 0;
}
.legal-overlay-section-title {
  margin-bottom: 0.4em !important;
}
.legal-overlay-section-body p {
  margin: 0 0 0.4em !important;
}
.legal-overlay-section-body p:last-child {
  margin-bottom: 0 !important;
}
.legal-overlay-section-body ol,
.legal-overlay-section-body ul {
  padding-left: 1em;
  margin: 0.4em 0;
}
.legal-overlay-section-body li {
  margin-bottom: 0.2em;
}
.legal-overlay-section-body a {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.legal-overlay-section-body strong {
  font-weight: 500 !important;
}

/* Mobile */
@media (max-width: 767px) {
  .legal-overlay-scroll {
    padding: 60px 24px 80px;
  }
  .legal-overlay-close {
    top: 16px;
    right: 16px;
  }
  .legal-overlay-inner,
  .legal-overlay-inner p,
  .legal-overlay-inner a,
  .legal-overlay-inner li,
  .legal-overlay-inner h2,
  .legal-overlay-menu-link,
  .legal-overlay-section-title {
    font-size: clamp(22px, 5.5vw, 30px);
    line-height: 1.2;
  }
}
/* ============================================
   PRODUCT MODULE — Bandeau suggestions en bas
   ============================================ */

.pm-suggestions {
  padding: 60px 48px 80px;
  background: var(--white);
  border-top: 0.5px solid rgba(0,0,0,0.1);
}

.pm-suggestions-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.pm-suggestions-kicker {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.5);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pm-suggestions-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.015em;
  margin: 0;
}

.pm-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
}

.pm-suggestion-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}
.pm-suggestion-card:hover {
  opacity: 0.75;
}

.pm-suggestion-image {
  background: #f5f5f3;
  border-radius: 20px;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}
.pm-suggestion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-suggestion-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 10px;
  background: #000;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
}

.pm-suggestion-info {
  padding: 0 4px;
}

.pm-suggestion-kicker {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(0,0,0,0.5);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.pm-suggestion-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}

.pm-suggestion-subtitle {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  margin: 0 0 10px;
}

.pm-suggestion-price {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  margin: 0;
}

/* Responsive */
@media (max-width: 1023px) {
  .pm-suggestions-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pm-suggestions { padding: 48px 24px 64px; }
}
@media (max-width: 480px) {
  .pm-suggestions-grid { grid-template-columns: 1fr; }
}
/* Grille produits accueil : image cliquable avec overlay hover */
.home-product-image {
  display: block;
  cursor: pointer;
  position: relative;
}
.home-product-image-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.home-product-image:hover .home-product-image-overlay {
  opacity: 0.05;
}
/* Grille produits accueil : arrondis plus marqués pour matcher le site */
.home-product-image {
  border-radius: 20px !important;
}
/* Scroll doux pour les ancres (bouton Acheter hero → grille produits) */
html {
  scroll-behavior: smooth;
}

/* Offset pour ne pas passer sous le header + announcement bar */
#produits {
  scroll-margin-top: calc(var(--announcement-h) + var(--header-h) + 20px);
}
/* Contact overlay : passer les placeholders en FT Polar Light (300) */
input.contact-overlay-input::placeholder,
textarea.contact-overlay-input::placeholder {
  font-weight: 300 !important;
}
input.contact-overlay-input::-webkit-input-placeholder,
textarea.contact-overlay-input::-webkit-input-placeholder {
  font-weight: 300 !important;
}
input.contact-overlay-input::-moz-placeholder,
textarea.contact-overlay-input::-moz-placeholder {
  font-weight: 300 !important;
}

/* Bouton Envoyer : encadré pour donner un statut de bouton */
button.contact-overlay-submit[type="submit"] {
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  padding: 0.35em 1em !important;
  display: inline-block !important;
  align-self: flex-start !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
button.contact-overlay-submit[type="submit"]:hover {
  background: #000 !important;
  color: #a7d4e9 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* ============================================
   WITH YOU BY YOU — v7
   Hiérarchie : grand (intro) / moyen (chapitres + étapes) / petit (corps)
   Images 16/9 edge-to-edge
   ============================================ */

.wybu {
  background: #fff;
  color: #000;
  padding: 0;
}

/* ── Typo unique FT Polar Book partout ── */
.wybu,
.wybu p,
.wybu h1,
.wybu a,
.wybu .wybu-hero-title,
.wybu .wybu-chapter-title,
.wybu .wybu-step-title,
.wybu .wybu-step-num,
.wybu .wybu-text,
.wybu .wybu-signature p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: #000;
  margin: 0;
  text-align: left;
  letter-spacing: -0.015em;
}

/* ── HERO : grand titre en haut de page ── */
.wybu-hero {
  padding: 60px 48px 24px;
}
.wybu-hero-title {
  font-size: clamp(40px, 9vw, 140px);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ── SECTIONS ── */
.wybu-section {
  padding: 24px 48px;
  max-width: none;
}

/* ── TEXTES (3 niveaux) ── */
/* Grand : utilisé pour l'intro (même taille que les grands titres Unknown Untitled) */
.wybu-text--lg,
.wybu-text--lg p {
  font-size: clamp(24px, 3.2vw, 52px);
  line-height: 1.2;
}
.wybu-section--intro {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Titres de chapitre (agrandis — niveau intermédiaire entre hero et intro) */
.wybu-chapter-title {
  font-size: clamp(32px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.3em !important;
}

/* Intros de chapitre (Notre méthode, Devenir partenaires) : même taille que titres */
.wybu-text--md,
.wybu-text--md p {
  font-size: clamp(24px, 3.2vw, 52px);
  line-height: 1.2;
}

/* Étape : numéro + titre */
.wybu-step {
  padding-top: 48px;
}
.wybu-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0.4em;
  flex-wrap: wrap;
}
.wybu-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: 0;
}
.wybu-step-title {
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.15;
  flex: 1;
  min-width: 0;
}

/* Textes de corps des étapes : même taille que les titres d'étape (moyen) */
.wybu-text--sm,
.wybu-text--sm p {
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.2;
}
.wybu-text p {
  margin-bottom: 0.8em !important;
}
.wybu-text p:last-child {
  margin-bottom: 0 !important;
}

/* ── IMAGES 16/9 EDGE-TO-EDGE ── */
.wybu-figure-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 40px;
  margin-bottom: 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.wybu-figure-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Signature */
.wybu-signature {
  margin-top: 1.5em;
}
.wybu-signature p {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.4;
  margin: 0;
}

/* Bouton téléchargement */
.wybu-download {
  margin-top: 1.5em;
}
.wybu-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.4em 1em;
  border: 1px solid #000;
  border-radius: 999px;
  text-decoration: none;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1;
  color: #000;
  transition: background 0.2s ease, color 0.2s ease;
}
.wybu-download-btn:hover {
  background: #000;
  color: #fff;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .wybu-hero {
    padding: 40px 24px 16px;
  }

  /* Niveau 1 : Géant (hero) */
  .wybu-hero-title {
    font-size: clamp(44px, 13vw, 84px);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .wybu-section {
    padding: 20px 24px;
  }
  .wybu-section--intro {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* Niveau 2 : Grand+ (titres de chapitre) */
  .wybu-chapter-title {
    font-size: clamp(32px, 8.5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  /* Niveau 3 : Grand (intros) */
  .wybu-text--lg,
  .wybu-text--lg p,
  .wybu-text--md,
  .wybu-text--md p {
    font-size: clamp(22px, 5.8vw, 34px);
    line-height: 1.2;
  }

  /* Niveau 4 : Moyen (titres d'étapes + corps d'étapes) */
  .wybu-step-title,
  .wybu-text--sm,
  .wybu-text--sm p {
    font-size: clamp(20px, 5vw, 28px);
    line-height: 1.25;
  }

  /* Niveau 5 : Petit (signature, bouton) */
  .wybu-signature p {
    font-size: 15px;
    line-height: 1.5;
  }
  .wybu-download-btn {
    font-size: 14px;
  }

  /* Numéro d'étape adapté */
  .wybu-step-num {
    font-size: 14px;
    width: 2.1em;
    height: 2.1em;
  }

  .wybu-figure-full {
    margin-top: 24px;
    margin-bottom: 24px;
  }
}
/* ============================================
   LEGAL OVERLAY — réduction taille du contenu
   (les titres de section et le menu initial restent inchangés)
   ============================================ */

.legal-overlay-section-body {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

.legal-overlay-section-body p,
.legal-overlay-section-body li,
.legal-overlay-section-body a,
.legal-overlay-section-body span {
  font-size: inherit;
  line-height: inherit;
}

.legal-overlay-section-body h3,
.legal-overlay-section-body h4,
.legal-overlay-section-body strong {
  font-size: clamp(16px, 1.3vw, 18px);
}

@media (max-width: 767px) {
  .legal-overlay-section-body {
    font-size: 14px;
    line-height: 1.55;
  }
  .legal-overlay-section-body h3,
  .legal-overlay-section-body h4,
  .legal-overlay-section-body strong {
    font-size: 15px;
  }
}
/* ============================================================
   PRICE DUAL — Double affichage TTC + HT
   ============================================================ */

.price-dual {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--font-primary);
  color: var(--black);
}

.price-dual-ttc {
  font-weight: 500;
}

.price-dual-ht {
  font-weight: 400;
  opacity: 0.6;
  margin-top: 2px;
  font-size: 0.78em;
}

/* ── Tailles ─────────────────────────────── */
.price-dual--small   .price-dual-ttc { font-size: 13px; }
.price-dual--default .price-dual-ttc { font-size: 16px; }
.price-dual--large   .price-dual-ttc { font-size: 20px; }
.price-dual--xlarge  .price-dual-ttc { font-size: clamp(22px, 3vw, 28px); }

/* ── Couleurs ────────────────────────────── */
.price-dual--dark .price-dual-ttc { color: var(--black); }
.price-dual--dark .price-dual-ht  { color: var(--black); opacity: 0.55; }

.price-dual--light .price-dual-ttc { color: #fff; }
.price-dual--light .price-dual-ht  { color: rgba(255, 255, 255, 0.55); opacity: 1; }

.price-dual--muted-on-dark .price-dual-ttc { color: rgba(255, 255, 255, 0.9); }
.price-dual--muted-on-dark .price-dual-ht  { color: rgba(255, 255, 255, 0.45); opacity: 1; }

/* ── Alignement ──────────────────────────── */
.price-dual--align-left   { align-items: flex-start; text-align: left; }
.price-dual--align-right  { align-items: flex-end;   text-align: right; }
.price-dual--align-center { align-items: center;     text-align: center; }

/* ── Classes spécifiques page produit (nouveau wrapper CTA) ── */
.product-price-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.product-price-prefix {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
}

/* ── Wrapper dans le configurateur (remplace config-card-price direct) ── */
.config-card-price-wrap {
  margin-top: 8px;
}
.config-acc-price-wrap {
  margin-top: 4px;
}

/* Légère adaptation : quand le price-dual est dans une carte du configurateur,
   on réduit encore la taille de la ligne HT pour garder la compacité. */
.config-card .price-dual-ht,
.config-acc-card .price-dual-ht {
  font-size: 0.85em;
  margin-top: 1px;
}
/* ── Wrapper dans le footer de carte home (remplace les 2 spans inline) ── */
.home-product-price-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
/* ============================================================
   PAGE PRODUIT LIGHTFORMCOLOR — Typo en FT Polar Book (400)
   ============================================================
   Cible spécifiquement les 3 textes :
   - Texte intro (sous le H1 dans la section HERO)
   - Texte Tube 1 (premier paragraphe de la section TUBE)
   - Texte Tube 2 (second paragraphe de la section TUBE)

   Sans cette règle, ils héritaient d'un override Medium (500)
   défini plus haut dans le fichier (ligne ~3626).
   ============================================================ */

.product-section-inner--center .product-body,
.product-section-inner--center .product-body p {
  font-weight: 400 !important;
}
/* ============================================================
   PAGE PRODUIT — Bouton son sur la vidéo plein page 1
   ============================================================
   Reprend l'esthétique du .home-sound-btn du hero accueil
   (transparent, blanc, opacity 0.8, hover 1) mais positionné
   en bas au centre de la vidéo, avec un padding aéré.
   ============================================================ */

.product-sound-btn {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--tr-fast);
}

.product-sound-btn:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  .product-sound-btn {
    bottom: 48px;
  }
}
/* ============================================================
   HERO ACCUEIL — Bloc complet
   ============================================================
   Ce bloc REMPLACE tous les anciens blocs "HERO ACCUEIL" que
   j'ai pu vous livrer auparavant. Il contient :
   1. Dégradé blanc en haut (derrière le logo)
   2. Tagline pill blanche au-dessus des boutons
   3. Bouton "En savoir plus" fond noir
   4. Bouton "Acheter" fond blanc + contour noir
   ============================================================ */

/* ── 1. DÉGRADÉ BLANC en haut du hero (derrière le logo) ── */
.home-hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(240px, 28vh, 400px);
  z-index: 5; /* au-dessus de la vidéo/image, en dessous du logo (z-index 10) */
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 45%,
    rgba(255, 255, 255, 0.6) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
@media (max-width: 767px) {
  .home-hero-gradient {
    height: 200px;
  }
}

/* ── 2. Bloc .home-hero-cta : confirmer position en bas + gap ── */
.home-hero-cta {
  bottom: 40px !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}
@media (min-width: 768px) {
  .home-hero-cta {
    bottom: 64px !important;
    gap: 24px !important;
  }
}

/* ── 3. Tagline : pill blanche, FT Polar Book ── */
.home-hero-tagline {
  display: inline-block !important;
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 999px !important;
  margin: 0 !important;

  font-weight: 400 !important;
  line-height: 1.25 !important;

  font-size: clamp(15px, 1.55vw, 22px) !important;
  padding: 9px 26px !important;

  white-space: nowrap !important;
  max-width: none !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  .home-hero-tagline {
    font-size: clamp(11px, 3.7vw, 18px) !important;
    padding: 7px 16px !important;
    white-space: nowrap !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ── 4. Bouton "En savoir plus" — fond noir ── */
.home-hero-btn--ghost {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}
.home-hero-btn--ghost:hover {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* ── 5. Bouton "Acheter" — fond blanc, contour noir ── */
.home-hero-btn--primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}
.home-hero-btn--primary:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
/* ============================================================
   PAGE D'ACCUEIL — Grille produits à 4 colonnes
   ============================================================
   Override de la règle existante (3 colonnes) pour s'adapter
   à 4 produits affichés sur la même ligne.

   - Mobile (< 768px) : 1 colonne
   - Tablette (768-1023px) : 2 colonnes (4 produits trop serrés sur tablette)
   - Desktop (≥ 1024px) : 4 colonnes sur la même ligne
   ============================================================ */

@media (min-width: 768px) {
  .home-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }
}

@media (min-width: 1024px) {
  .home-products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* Réduire légèrement le padding intérieur des cartes en 4 colonnes,
   sinon le contenu (nom + prix double + bouton) devient trop tassé */
@media (min-width: 1024px) {
  .home-product-card {
    padding: 20px !important;
  }
  .home-product-name {
    font-size: clamp(15px, 1.3vw, 17px) !important;
  }
}
/* ============================================================
   PAGE PRODUIT LIGHTFORMCOLOR — Variantes en 4 colonnes
   ============================================================
   Remplace l'ancienne grille inline 3 colonnes par une grille
   responsive : mobile 1 col, tablette 2 col, desktop 4 col.
   ============================================================ */

.lfc-variants-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .lfc-variants-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .lfc-variants-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* ── Carte variante (remplace les styles inline d'origine) ── */
.lfc-variant-card {
  display: flex;
  flex-direction: column;
}

.lfc-variant-name {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 20px);
  color: #fff;
  margin-bottom: 16px;
}

.lfc-variant-img-link {
  display: block;
  text-decoration: none;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.lfc-variant-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lfc-variant-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lfc-variant-buy-btn {
  background: #D5FF02;
  color: #000;
  border: none;
  border-radius: 999px;
  padding: 10px 24px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.lfc-variant-buy-btn:hover { background: #c4ee00; }

.lfc-variant-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.lfc-variant-from {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* En 4 colonnes desktop : on conserve la disposition horizontale
   (bouton à gauche, prix à droite) mais on compacte légèrement
   pour que ça tienne dans la largeur réduite des cartes. */
@media (min-width: 1024px) {
  .lfc-variant-buy-btn {
    padding: 9px 22px;
    font-size: 13px;
  }
  .lfc-variant-name {
    font-size: clamp(14px, 1.1vw, 16px);
  }
  .lfc-variant-footer {
    gap: 10px;
  }
}
/* ============================================================
   PAGE D'ACCUEIL — Images produits cliquables
   ============================================================
   Le <div class="home-product-image"> est devenu <a> pour être
   cliquable. Ces règles s'assurent que :
   - Le <a> garde le même rendu visuel qu'un <div> (block, pas
     d'underline, pas de couleur héritée)
   - L'overlay sombre apparaît au hover de l'image (effet visuel
     qui était géré en JS inline auparavant)
   ============================================================ */

a.home-product-image {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Effet sombre au survol de l'image (remplace le JS onmouseenter inline) */
a.home-product-image .home-product-image-overlay {
  pointer-events: none;
}
a.home-product-image:hover .home-product-image-overlay {
  opacity: 0.05 !important;
}
/* ============================================================
   PAGE MODULE-SECONDAIRE — Description produit
   ============================================================
   Bloc de description optionnel affiché en haut du panneau,
   au-dessus du sélecteur de modules. Style cohérent avec les
   autres sous-titres du configurateur (.config-section-subtitle)
   mais légèrement plus présent (taille un peu plus grande,
   meilleure respiration).
   ============================================================ */

.config-product-description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}

.config-product-description p {
  margin: 0 0 12px;
}
.config-product-description p:last-child {
  margin-bottom: 0;
}

.config-product-description strong,
.config-product-description b {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
}

.config-product-description a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 1023px) {
  .config-product-description {
    font-size: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
}
/* ============================================================
   PAGE D'ACCUEIL — Section "With you by you" (v3)
   ============================================================
   Le titre est un <h2> normal en HTML. Sa taille est calculée
   dynamiquement en JavaScript pour remplir exactement 100% de
   la largeur de son conteneur, sur tous les écrans.

   - Padding uniforme haut/gauche/droite
   - Bouton centré sous le titre, jamais de chevauchement
   - Fond gris clair
   ============================================================ */

.home-wybu {
  background: #f0efeb;
  padding: clamp(40px, 5vw, 80px)
           clamp(40px, 5vw, 80px)
           clamp(80px, 8vw, 140px);
  overflow: hidden; /* sécurité au cas où le JS tarderait à mesurer */
}

.home-wybu-inner {
  max-width: 100%;
  margin: 0 auto;
  /* On définit la largeur de référence pour le calcul JS */
  width: 100%;
}

.home-wybu-title {
  font-family: var(--font-primary), serif;
  font-weight: 400;
  /* Taille initiale (sera recalculée par JS).
     Le clamp sert de fallback si JS désactivé. */
  font-size: clamp(40px, 14vw, 280px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000;
  margin: 0;
  text-align: left;
  white-space: nowrap;
  display: inline-block;
}

/* Espace garanti entre le titre et le bouton */
.home-wybu-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 6vw, 80px);
}

.home-wybu-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  padding: 14px 32px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 17px);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  text-align: center;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}

.home-wybu-btn:hover {
  background: #fff;
  color: #000;
}

@media (max-width: 480px) {
  .home-wybu-btn {
    white-space: normal;
    padding: 12px 24px;
    line-height: 1.3;
  }
}
/* ============================================================
   FIX MENU — Overlay bloque les clics quand ouvert
   ============================================================
   Le menu (nav-drawer) utilise un overlay sombre (.nav-overlay)
   pour assombrir le contenu en arrière-plan. Mais pour que les
   clics sur cet overlay (a) ferment le menu, et (b) ne traversent
   pas vers le contenu en dessous (hero accueil par exemple),
   il faut explicitement activer pointer-events: auto.

   Avant ce fix : l'overlay était visible mais transparent aux
   clics, donc cliquer sur le hero pendant que le menu était
   ouvert déclenchait la redirection du hero.
   ============================================================ */

.nav-overlay {
  pointer-events: none;
}

.nav-overlay.is-open {
  pointer-events: auto;
}
/* ============================================================
   PAGE D'ACCUEIL — Section typo Anthony : ajustement taille
   ============================================================
   Réduit le facteur vw pour que le texte soit confortable sur
   écran 13 pouces sans dépasser le viewport.
   - Avant : clamp(48px, 9vw, 130px) → 115px sur 1280px (trop)
   - Après : clamp(40px, 6.5vw, 130px) → 83px sur 1280px (OK)
   - Sur 27 pouces (≥2000px) : le cap à 130px est atteint, donc
     identique au rendu actuel que vous trouvez parfait.
   ============================================================ */

.home-typo-words {
  font-size: clamp(40px, 6.5vw, 130px) !important;
}

/* Sécurité : si malgré tout le texte essaie de déborder, on cache
   ce qui sortirait (cas extrême avec un mot très long) */
.home-typo-section {
  overflow-x: hidden;
}
/* ============================================================
   HERO ACCUEIL — Tagline mobile : taille augmentée
   ============================================================
   Avant : clamp(11px, 3.7vw, 18px)
   Après : clamp(12px, 4.2vw, 20px)
   La phrase reste sur une seule ligne (white-space: nowrap
   conservé), avec un cap qui grandit légèrement en tablette.
   ============================================================ */

@media (max-width: 767px) {
  .home-hero-tagline {
    font-size: clamp(12px, 4.2vw, 20px) !important;
  }
}
/* ============================================================
   PAGE D'ACCUEIL — Section "Image bandeau"
   ============================================================
   Fond noir + image centrée avec ratio préservé.
   Padding identique sur les 4 côtés.
   ============================================================ */

.home-image-block {
  background: #000;
  /* Padding égal haut/bas/gauche/droite */
  padding: clamp(20px, 2.5vw, 40px);
}

.home-image-block-inner {
  width: 100%;
  /* Hauteur fixe responsive : la section a une présence
     visuelle constante quelle que soit l'image */
  height: clamp(280px, 40vw, 500px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-image-block-img {
  /* Image centrée avec ratio respecté.
     object-fit: contain → image entière visible, fond noir
     visible autour si l'image n'a pas le bon ratio. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Placeholder visible uniquement quand aucune image n'est uploadée */
.home-image-block-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 767px) {
  .home-image-block {
    padding: 20px;
  }
}
/* ============================================================
   PAGE D'ACCUEIL — Section "Image pleine largeur"
   ============================================================
   L'image occupe toute la largeur de la page (bord à bord),
   sans padding latéral. Hauteur fixe responsive.
   - Desktop : ratio 16:9
   - Mobile : ratio 4:5 (portrait, plus immersif sur mobile)
   ============================================================ */

.home-fullwidth-image {
  width: 100%;
  margin: 0;
  padding: 0;
  /* Hauteur basée sur un ratio 16:9 desktop (56.25vw)
     avec un cap pour ne pas être démesuré sur 4K */
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  overflow: hidden;
  background: #000; /* fond visible le temps que l'image charge */
}

.home-fullwidth-image-img {
  width: 100%;
  height: 100%;
  /* object-fit: cover → l'image remplit tout l'espace,
     rognée si nécessaire. Pas de bandes vides. */
  object-fit: cover;
  display: block;
}

/* Mobile : ratio 4:5 (portrait), plus impactant que 16:9 sur petit écran */
@media (max-width: 767px) {
  .home-fullwidth-image {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
}

/* Placeholder visible tant qu'aucune image n'est uploadée */
.home-fullwidth-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Dots noirs UNIQUEMENT sur le 1er
   slideshow (celui avec image fond clair "Modules indépendants").
   ============================================================
   Les autres slideshows du site gardent leurs dots blancs.
   On cible le slideshow par son ID #slideshow-1 (1er slideshow
   de la page = identifiant auto-généré par le Liquid).
   ============================================================ */

#slideshow-1 .slide-dot {
  background: rgba(0, 0, 0, 0.35) !important;
}

#slideshow-1 .slide-dot.active {
  background: #000 !important;
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Dots de la section Precision Pixel
   ============================================================
   Style identique aux .slide-dot des autres slideshows :
   blanc semi-transparent, élargi en barre quand actif.
   ============================================================ */

.prec-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s, background 0.3s;
}

.prec-dot.active {
  width: 28px;
  background: #fff;
}
/* ============================================
   Slideshow 1 mobile : dots blancs (override desktop noir)
   Sur mobile, le JS déplace les dots hors de l'image,
   sur le fond noir de la page. Les dots noirs deviennent
   invisibles, on rétablit donc le blanc par défaut.
   ============================================ */
@media (max-width: 767px) {
  #slideshow-1 .slide-dot {
    background: rgba(255, 255, 255, 0.35) !important;
  }
  #slideshow-1 .slide-dot.active {
    background: #fff !important;
  }
}
/* ============================================================
   CONFIGURATEUR MOBILE — Image carrée + marge sous les dots
   ============================================================ */
@media (max-width: 1023px) {
  .configurator-image-wrap {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    cursor: pointer;
  }
  .configurator-dots-row {
    margin-bottom: 28px;
  }
}
/* ============================================================
   HERO ACCUEIL MOBILE — Compenser les barres Safari iOS
   ============================================================
   Sur iOS, 100vh inclut les zones masquées par la barre d'URL
   et la barre de navigation. On utilise 100dvh (dynamic viewport
   height) qui s'ajuste à la zone réellement visible.
   ============================================================ */
@media (max-width: 767px) {
  .home-hero {
    /* Fallback pour les très anciens navigateurs */
    min-height: calc(100vh - var(--announcement-h) - var(--header-h));
    /* Valeur réellement appliquée sur iOS Safari moderne et tous les navigateurs supportant dvh */
    min-height: calc(100dvh - var(--announcement-h) - var(--header-h));
    height: calc(100dvh - var(--announcement-h) - var(--header-h));
  }
}
/* ============================================================
   CONFIGURATEUR — Description produit : padding mobile
   ============================================================
   Sur mobile uniquement, ajoute un espace entre la ligne de
   séparation du panel-header et le début du texte de description.
   Sur desktop le rendu actuel est conservé.
   ============================================================ */
@media (max-width: 1023px) {
  .config-product-description {
    margin-top: 20px;
  }
}
/* ============================================================
   WITH YOU BY YOU — Bandeau défilant (marquee v2)
   ============================================================
   - Vitesse lente (~80s/cycle, comme worklouder.cc)
   - Typo x3 (54px mobile / 66px desktop)
   - "With you, by you" en police Anthony
   - Logo WITH—BY— en image (uploadable via Personnaliser)
   - Pause au hover, accessibilité (prefers-reduced-motion)

   Note : la police Anthony doit être déclarée ailleurs dans
   theme.css ou theme.liquid (déjà le cas pour la section
   home-typography). Si elle ne l'est pas, voir le bloc
   @font-face en bas de ce fichier.
   ============================================================ */

.wybu-marquee {
  display: block;
  width: 100%;
  background: #000;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  padding: 28px 0;
  cursor: pointer;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}
.wybu-marquee:hover {
  background: #1a1a1a;
}

@media (min-width: 768px) {
  .wybu-marquee {
    padding: 36px 0;
  }
}

/* Piste défilante */
.wybu-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wybu-marquee-scroll 105s linear infinite;
  will-change: transform;
}

.wybu-marquee-half {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Texte du message — taille x3 par rapport à v1 */
.wybu-marquee-text {
  font-family: var(--font-primary), sans-serif;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  padding: 0 32px;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
}

@media (min-width: 768px) {
  .wybu-marquee-text {
    font-size: 66px;
    padding: 0 48px;
  }
}

/* "With you, by you." en police Anthony */
.wybu-marquee-brand {
  font-family: 'Anthony', var(--font-primary), serif;
  font-weight: 400;
  font-size: 1.25em; /* légèrement plus grand que le texte courant pour caler la hauteur de capitale */
  letter-spacing: -0.02em;
  display: inline-block;
  /* Petit ajustement vertical car Anthony a une métrique différente
     de FT Polar — fait reposer "With you, by you" sur la même ligne
     de base optique que le texte d'intro */
  transform: translateY(0.06em);
}

/* Logo WITH—BY— séparateur — taille adaptée au texte x3 */
.wybu-marquee-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 28px;
  padding: 0 24px;
  opacity: 0.7;
}

@media (min-width: 768px) {
  .wybu-marquee-logo {
    height: 34px;
    padding: 0 32px;
  }
}

.wybu-marquee-logo img {
  height: 100%;
  width: auto;
  display: block;
  /* Si l'image n'est pas blanche par nature, on peut forcer son affichage
     sur un canal blanc, mais ici l'utilisateur upload déjà un logo blanc */
}

/* Animation : translate -50% = 1 cycle complet
   À 80s, c'est calme et lisible (style worklouder) */
@keyframes wybu-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause au survol */
.wybu-marquee:hover .wybu-marquee-track {
  animation-play-state: paused;
}

/* Accessibilité : si l'utilisateur a activé "réduire les animations",
   on ralentit énormément (240s = quasi-statique mais perceptible) */
@media (prefers-reduced-motion: reduce) {
  .wybu-marquee-track {
    animation-duration: 240s;
  }
}

/* ============================================================
   Police Anthony — déclaration @font-face (au cas où elle n'est
   pas déjà déclarée ailleurs dans theme.css).
   À NE PAS coller si vous voyez déjà un bloc @font-face Anthony
   plus haut dans theme.css.
   ============================================================ */
/*
@font-face {
  font-family: 'Anthony';
  src: url('Anthony.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/
/* ============================================================
   PAGE ACCESSOIRES — vitrine connectée à la collection Shopify
   ============================================================
   Mise en page : on réutilise les classes de la grille d'accueil
   (home-product-card, home-product-image, home-product-buy-btn,
   home-product-price-wrap) pour une cohérence visuelle stricte.
   On ne style ici que ce qui est SPÉCIFIQUE à la page Accessoires :
   wrapper, en-tête, filtres, états du bouton Ajouter.
   ============================================================ */

.accessories-page {
  background: var(--black);
  color: var(--white);
  min-height: calc(100vh - var(--announcement-h) - var(--header-h) - var(--footer-h));
  padding: 64px 24px 96px;
}

@media (min-width: 768px) {
  .accessories-page {
    padding: 80px 48px 120px;
  }
}

.accessories-inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* ── EN-TÊTE ── */
.accs-header {
  margin-bottom: 48px;
}
@media (min-width: 768px) {
  .accs-header {
    margin-bottom: 64px;
  }
}

.accs-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--white);
}

.accs-intro {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
}
.accs-intro p { margin: 0 0 12px; }
.accs-intro p:last-child { margin-bottom: 0; }

/* ── FILTRES ── */
.accs-filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .accs-filters {
    margin-bottom: 56px;
  }
}

.accs-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.accs-filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
  white-space: nowrap;
}

.accs-filter-btn {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .accs-filter-btn {
    font-size: 14px;
    padding: 8px 18px;
  }
}

.accs-filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.accs-filter-btn.is-active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* ── GRILLE : on s'appuie sur .home-products-grid existante.
   Sur la page Accessoires, on peut avoir plus de produits qu'à
   l'accueil, donc on ajoute une variante d'espacement. ── */
.accs-grid.home-products-grid {
  /* En desktop la grille reste à 4 colonnes (comme l'accueil),
     mais sur de très grands écrans on peut tenter 4-5 colonnes
     pour mieux occuper l'espace s'il y a beaucoup d'accessoires. */
  gap: 32px 24px;
}

/* ── États du bouton Ajouter ── */
.home-product-buy-btn[data-accs-add] {
  border: none;
  cursor: pointer;
}

.home-product-buy-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.home-product-buy-btn.is-success {
  background: var(--green);
  color: var(--white);
}
.home-product-buy-btn.is-success:hover {
  background: var(--green);
  color: var(--white);
}

.home-product-buy-btn--unavailable {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: not-allowed;
  pointer-events: none;
}

/* Effet hover image (zoom léger) cohérent avec le reste du site */
.accs-grid .home-product-card .home-product-image {
  transition: transform 0.3s ease;
}
.accs-grid .home-product-card .home-product-image img {
  transition: transform 0.6s ease;
}
.accs-grid .home-product-card:hover .home-product-image img {
  transform: scale(1.03);
}

/* ── ÉTAT VIDE / RÉSULTAT VIDE ── */
.accs-empty {
  text-align: center;
  padding: 80px 24px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
}
.accs-empty p {
  margin: 0;
}
/* ============================================================
   PAGE ACCESSOIRES — Alignement des cartes en grille (v3)
   ============================================================
   - Titres ferrés EN BAS (collés à l'image)
   - Grille 3 colonnes en desktop (override de la règle 4 cols
     d'accueil qui utilise !important)
   - Footer toujours aligné en bas

   À COLLER À LA FIN DE theme.css.
   Si vous avez déjà une version précédente (v1 ou v2), REMPLACEZ-LA
   par celle-ci.
   ============================================================ */

/* ── Grille : 3 colonnes en desktop ────────────────────────── */
/* On utilise !important pour battre la règle de home-products-grid
   qui force 4 colonnes en !important sur les écrans ≥ 1024px */

.accs-grid.home-products-grid {
  grid-template-columns: 1fr !important;
  align-items: stretch !important;
}

@media (min-width: 600px) {
  .accs-grid.home-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important;
  }
}

@media (min-width: 1024px) {
  .accs-grid.home-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px 32px !important;
  }
}

/* ── Carte : flex column ──────────────────────────────────── */
.accs-grid.home-products-grid .home-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Titre ferré en bas du conteneur ──────────────────────── */
.accs-grid.home-products-grid .home-product-name {
  display: flex;
  align-items: flex-end;
  min-height: 4.2em;
  margin: 0 0 16px;
}

/* ── Image : reste carrée ─────────────────────────────────── */
.accs-grid.home-products-grid .home-product-image {
  flex-shrink: 0;
}

/* ── Footer : aligné en bas de carte ──────────────────────── */
.accs-grid.home-products-grid .home-product-footer {
  margin-top: auto;
  padding-top: 16px;
}

/* ── Mobile : pas de contrainte de hauteur sur le titre ───── */
@media (max-width: 599px) {
  .accs-grid.home-products-grid .home-product-name {
    min-height: 0;
    align-items: flex-start;
  }
}
/* ============================================================
   PAGE ACCESSOIRES — Ajustements titre + intro
   ============================================================
   - Titre "Accessoires" en FT Polar Book (font-weight 400)
   - Intro plus grande et en blanc

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Titre : passer de Medium (500) à Book (400) */
.accs-title {
  font-weight: 400 !important;
}

/* Intro : taille augmentée + couleur blanche pleine */
.accs-intro,
.accs-intro p {
  font-size: clamp(20px, 1.8vw, 24px) !important;
  line-height: 1.5 !important;
  color: #fff !important;
}
/* ============================================================
   PAGE PRODUIT ACCESSOIRE
   ============================================================
   Layout 50/50 desktop (image / infos), empilé en mobile.
   Inspiration esthétique : configurateur, simplifié pour produit unique.
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.paccs-page {
  background: var(--white);
  min-height: calc(100vh - var(--announcement-h) - var(--header-h));
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .paccs-page {
    flex-direction: row;
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    overflow: hidden;
  }
}

/* ════════ COLONNE GAUCHE — VISUEL (50%) ════════ */
.paccs-visual {
  width: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 0;
  gap: 12px;
  position: relative;
}

@media (min-width: 1024px) {
  .paccs-visual {
    width: 50%;
    position: sticky;
    top: calc(var(--announcement-h) + var(--header-h));
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    overflow: hidden;
    flex-shrink: 0;
    padding: 24px;
    gap: 16px;
  }
}

/* Conteneur image principale */
.paccs-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 50vh;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #f5f5f5;
}

@media (min-width: 1024px) {
  .paccs-image-wrap {
    max-height: none;
    aspect-ratio: auto;
    height: 100%;
    flex: 1;
    border-radius: 24px;
  }
}

.paccs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.paccs-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.paccs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.paccs-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ececec, #f5f5f5);
}

/* Miniatures */
.paccs-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 600px;
}

.paccs-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
}
.paccs-thumb:hover {
  opacity: 0.9;
}
.paccs-thumb.is-active {
  border-color: var(--black);
  opacity: 1;
}
.paccs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .paccs-thumb {
    width: 72px;
    height: 72px;
  }
}

/* Flèches navigation */
.paccs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 5;
  transition: background 0.2s ease;
}
.paccs-arrow:hover { background: #f0f0f0; }
.paccs-arrow-prev { left: 24px; }
.paccs-arrow-next { right: 24px; }

@media (min-width: 1024px) {
  .paccs-arrow {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .paccs-arrow-prev { left: 36px; }
  .paccs-arrow-next { right: 36px; }
}

/* ════════ COLONNE DROITE — PANEL (50%) ════════ */
.paccs-panel {
  width: 100%;
  background: var(--gray-panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .paccs-panel {
    width: 50%;
    overflow-y: auto;
    height: calc(100vh - var(--announcement-h) - var(--header-h));
    padding-bottom: 0;
    flex-shrink: 0;
  }
}

/* Header sticky */
.paccs-panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--gray-panel);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
}
@media (min-width: 1024px) {
  .paccs-panel-header { padding: 24px 40px; }
}

.paccs-panel-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.paccs-product-info {
  flex: 1;
  min-width: 0;
}

.paccs-product-name {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: var(--black);
  letter-spacing: -0.01em;
  margin: 0;
}
@media (min-width: 1024px) {
  .paccs-product-name { font-size: 22px; }
}

.paccs-product-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 0;
}

.paccs-total-price {
  flex-shrink: 0;
  text-align: right;
}

/* Contenu scrollable */
.paccs-content {
  padding: 32px 24px 48px;
}
@media (min-width: 1024px) {
  .paccs-content { padding: 40px 40px 80px; }
}

/* Description */
.paccs-description {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.paccs-description p { margin: 0 0 12px; }
.paccs-description p:last-child { margin-bottom: 0; }
.paccs-description strong { font-weight: 500; color: rgba(0, 0, 0, 0.9); }
.paccs-description ul, .paccs-description ol { padding-left: 20px; margin: 12px 0; }
.paccs-description li { margin-bottom: 6px; }

/* Compatibilité — pills */
.paccs-compat-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.paccs-compat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 4px;
}
.paccs-compat-pill {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 12px;
  background: var(--black);
  color: var(--white);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* Sections (variantes, quantité, specs) */
.paccs-section {
  margin-bottom: 28px;
}
.paccs-section-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  color: var(--black);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
  .paccs-section-title { font-size: 16px; }
}

/* Sélecteurs de variantes */
.paccs-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paccs-option {
  position: relative;
  cursor: pointer;
}

.paccs-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.paccs-option-label {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: var(--black);
  background: var(--white);
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  padding: 9px 18px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  user-select: none;
}

.paccs-option:hover .paccs-option-label {
  border-color: rgba(0, 0, 0, 0.5);
}

.paccs-option input:checked + .paccs-option-label {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Compteur quantité */
.paccs-qty {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  background: var(--white);
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}

.paccs-qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  line-height: 1;
}
.paccs-qty-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.paccs-qty-val {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  color: var(--black);
  min-width: 24px;
  text-align: center;
}

/* Stock pill */
.paccs-stock {
  margin-bottom: 32px;
}

.paccs-stock-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
}
.paccs-stock-ok    { color: #1a7a3e; }
.paccs-stock-low   { color: #b85c00; }
.paccs-stock-out   { color: #b00020; }

/* Spécifications */
.paccs-specs {
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.1);
}

.paccs-specs-list {
  margin: 0;
  display: grid;
  gap: 0;
}

.paccs-spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  align-items: start;
}
.paccs-spec-row:first-child { padding-top: 0; }
.paccs-spec-row:last-child { border-bottom: none; padding-bottom: 0; }

.paccs-spec-row dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  padding-top: 2px;
}

.paccs-spec-row dd {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.5;
  margin: 0;
}

/* Bloc multi-lignes (compatibilité, contenu) */
.paccs-spec-row--block {
  grid-template-columns: 1fr;
  gap: 4px;
}
.paccs-spec-row--block dt {
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .paccs-spec-row {
    grid-template-columns: 160px 1fr;
  }
}

/* Bouton Ajouter au panier */
.paccs-add-to-cart {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--black);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  margin-top: 16px;
}
.paccs-add-to-cart:hover:not(:disabled) {
  background: #1a1a1a;
}
.paccs-add-to-cart:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.paccs-add-to-cart.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.paccs-add-to-cart.is-success {
  background: var(--green);
}
.paccs-add-to-cart.is-success:hover {
  background: var(--green);
}

/* ════════ AUTRES ACCESSOIRES (pleine largeur en bas) ════════ */
.paccs-others {
  width: 100%;
  background: var(--black);
  color: var(--white);
  padding: 64px 24px 96px;
}

@media (min-width: 768px) {
  .paccs-others { padding: 80px 48px 120px; }
}

.paccs-others-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.paccs-others-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.015em;
  margin: 0 0 40px;
  color: var(--white);
}

.paccs-others-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 600px) {
  .paccs-others-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (min-width: 1024px) {
  .paccs-others-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
  }
}

/* Cartes "autres" : titre ferré bas + footer aligné bas, comme la page accessoires */
.paccs-others-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.paccs-others-card .home-product-name {
  display: flex;
  align-items: flex-end;
  min-height: 4.2em;
  margin: 0 0 16px;
}
.paccs-others-card .home-product-image { flex-shrink: 0; }
.paccs-others-card .home-product-footer {
  margin-top: auto;
  padding-top: 16px;
}

@media (max-width: 599px) {
  .paccs-others-card .home-product-name {
    min-height: 0;
    align-items: flex-start;
  }
}
/* ============================================================
   PAGE PRODUIT ACCESSOIRE — Ajustements
   ============================================================
   - Image en ratio carré (et non plus pleine hauteur en desktop)
   - Padding mobile entre image et panel
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* ── Desktop : image en ratio carré, centrée verticalement ── */
@media (min-width: 1024px) {
  .paccs-image-wrap {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    max-width: 900px;
    width: 100%;
  }
}

/* ── Mobile : padding sous l'image avant la zone grise ── */
@media (max-width: 1023px) {
  .paccs-visual {
    padding-bottom: 14px;
  }
}
/* ============================================================
   BANDEAU "With you by you" — Accélération
   ============================================================
   Durée actuelle : 105s. Nouvelle durée : 75s (~30% plus rapide).
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.wybu-marquee-track {
  animation-duration: 75s !important;
}
/* ============================================================
   CONFIGURATEUR — Pill verte intégrale pour la longueur (fit-content)
   ============================================================
   Toute la mention "Longueur de votre configuration : XX cm"
   devient une pill verte LFC en FT Polar Book, dont le fond
   s'adapte à la longueur du texte (et non à 100% de la largeur).
   À COLLER À LA FIN DE theme.css.
   Si une version précédente du même bloc CSS est présente, la REMPLACER.
   ============================================================ */

/* Pill : fond uniquement sur le texte, pas sur toute la largeur */
.config-product-dim {
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  background: var(--green) !important;
  color: var(--white) !important;
  font-family: var(--font-primary) !important;
  font-weight: 400 !important;        /* FT Polar Book */
  padding: 6px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Annuler les styles spécifiques aux spans intérieurs */
.config-dim-label,
.config-dim-value {
  display: inline !important;
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: inherit !important;
}
/* ============================================================
   CONFIGURATEUR — Marge de la pill dans la section Modules
   ============================================================
   La pill "Longueur de votre configuration : XX cm" est maintenant
   placée juste avant le premier cadre Module. On lui ajoute une marge
   verticale propre pour un bon respiratoire.
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.config-section[data-step="modules"] .config-product-dim {
  margin-top: 8px !important;
  margin-bottom: 20px !important;
}
/* ============================================================
   PAGE WITH YOU BY YOU — Espacement titre / intro de chapitre
   ============================================================
   Augmente l'espace entre les titres de chapitre (Expertises,
   E-commerce, WITH... BY..., etc.) et leur paragraphe d'introduction.
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.wybu .wybu-chapter-title {
  margin-bottom: 1.2em !important;
}

/* Mobile : un peu moins pour ne pas créer de gros vide */
@media (max-width: 767px) {
  .wybu .wybu-chapter-title {
    margin-bottom: 0.9em !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Taille des titres de phase
   ============================================================
   Alignement de la taille typographique des titres de phase
   (et des blocs E-commerce / partenariat numérotés)
   sur celle des introductions de chapitre (.wybu-text--md).
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Desktop : titres de phase = même taille que l'intro chapitre */
.wybu .wybu-step-title {
  font-size: clamp(24px, 3.2vw, 52px) !important;
  line-height: 1.2 !important;
}

/* Numéro 01/02/03 placé devant : aligné sur la même taille pour rester cohérent */
.wybu .wybu-step-num {
  font-size: clamp(24px, 3.2vw, 52px) !important;
  line-height: 1.2 !important;
}

/* Mobile : valeurs alignées sur l'intro mobile */
@media (max-width: 767px) {
  .wybu .wybu-step-title,
  .wybu .wybu-step-num {
    font-size: clamp(22px, 5.8vw, 34px) !important;
    line-height: 1.2 !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Espacement titre phase / texte phase
   ============================================================
   Ajoute un écart vertical entre le titre numéroté de la phase
   (01, 02, 03...) et le paragraphe descriptif qui suit.
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.wybu .wybu-step-header {
  margin-bottom: 0.8em !important;
}

/* Mobile : un peu plus serré pour ne pas créer de gros vide */
@media (max-width: 767px) {
  .wybu .wybu-step-header {
    margin-bottom: 0.6em !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Numéros style Shrigley/Sachs
   ============================================================
   Les numéros 01/02/03/04 des phases (et blocs E-commerce
   et partenariat) sont stylisés comme tracés à la main :
   - Cercle SVG irrégulier (4 variantes différentes)
   - Police Caveat Brush (pinceau brut)
   - Rotation et taille légèrement variables par numéro
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Police écriture main importée depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

/* On override complètement l'apparence par défaut du numéro */
.wybu .wybu-step-num {
  /* Box : carré 64x64 avec le cercle SVG en background */
  width: 64px !important;
  height: 64px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  /* Centrage du numéro */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;

  /* Typo écriture main */
  font-family: 'Caveat Brush', cursive !important;
  font-weight: 400 !important;
  color: #0a0a0a !important;
  line-height: 1 !important;

  /* Léger overflow autorisé pour les rotations */
  overflow: visible !important;
}

/* Mobile : un peu plus petit */
@media (max-width: 767px) {
  .wybu .wybu-step-num {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ── 4 variantes de cercles, en rotation cyclique ── */

.wybu .wybu-step-num--1 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M%2014%2033%20C%2011%2018%2C%2023%207%2C%2036%209%20C%2049%2011%2C%2056%2023%2C%2053%2036%20C%2051%2049%2C%2038%2056%2C%2025%2052%20C%2014%2048%2C%2010%2039%2C%2014%2032%20L%2016%2030%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") !important;
  font-size: 30px !important;
  transform: rotate(-3deg) translate(-1px, 1px) !important;
}

.wybu .wybu-step-num--2 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M%209%2030%20C%207%2014%2C%2018%204%2C%2033%206%20C%2048%208%2C%2058%2019%2C%2055%2033%20C%2053%2047%2C%2041%2056%2C%2027%2053%20C%2014%2050%2C%206%2042%2C%209%2028%20C%2010%2024%2C%2012%2022%2C%2014%2022%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") !important;
  font-size: 32px !important;
  transform: rotate(2deg) translate(1px, -1px) !important;
}

.wybu .wybu-step-num--3 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M%2012%2032%20C%208%2019%2C%2017%206%2C%2032%207%20C%2047%207%2C%2057%2016%2C%2055%2031%20C%2056%2046%2C%2043%2056%2C%2028%2055%20C%2016%2053%2C%209%2044%2C%2011%2032%20C%2012%2027%2C%2014%2024%2C%2017%2022%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") !important;
  font-size: 29px !important;
  transform: rotate(-1deg) translate(0, 2px) !important;
}

.wybu .wybu-step-num--4 {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M%2013%2034%20C%209%2016%2C%2022%205%2C%2035%208%20C%2050%209%2C%2058%2022%2C%2054%2036%20C%2050%2050%2C%2036%2057%2C%2023%2051%20C%2011%2047%2C%209%2038%2C%2013%2030%20C%2014%2027%2C%2016%2025%2C%2019%2025%22%20fill%3D%22none%22%20stroke%3D%22%230a0a0a%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") !important;
  font-size: 31px !important;
  transform: rotate(4deg) translate(-1px, 0) !important;
}

/* Mobile : tailles de typo réduites proportionnellement */
@media (max-width: 767px) {
  .wybu .wybu-step-num--1 { font-size: 24px !important; }
  .wybu .wybu-step-num--2 { font-size: 26px !important; }
  .wybu .wybu-step-num--3 { font-size: 23px !important; }
  .wybu .wybu-step-num--4 { font-size: 25px !important; }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Slideshow Cercle (mobile = comme Carré)
   ============================================================
   En mobile, la slideshow Cercle est rendue avec la MÊME structure
   visuelle que la slideshow Carré : image en haut (cercle), légende
   en dessous, flèches + dots tout en bas. Pas de carte verte
   débordante, pas de grille forcée.

   En desktop, la version "card avec image ronde + texte côte à côte"
   est conservée.

   À COLLER À LA FIN DE theme.css.
   IMPORTANT : si vous avez d'autres blocs précédents nommés "Slideshow
   forme Cercle", supprimez-les. Ce bloc remplace tout.
   ============================================================ */

/* ── Image (cercle) ── */
.product-page .wbcircle-img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.product-page .wbcircle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-page .wbcircle-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FF5656, #33B76E, #337AFF);
}

/* ── Titre et corps ── */
.product-page .wbcircle-title {
  font-family: var(--font-primary);
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.3;
}
.product-page .wbcircle-body {
  font-family: var(--font-primary);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  margin: 0;
}

/* ── Barre de contrôles (flèches + dots) ── */
.product-page .wbcircle-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.product-page .wbcircle-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-page .wbcircle-dots {
  display: flex;
  gap: 6px;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP (≥768px) : card avec grille 2 colonnes
   ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .product-page .wbcircle-card {
    border-radius: 24px;
    padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 60px);
  }
  .product-page .wbcircle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    min-height: 340px;
  }
  .product-page .wbcircle-img {
    max-width: 460px;
  }
  .product-page .wbcircle-title {
    font-size: clamp(18px, 2vw, 24px);
  }
  .product-page .wbcircle-body {
    font-size: clamp(14px, 1.2vw, 16px);
  }
  .product-page .wbcircle-controls {
    margin-top: 32px;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE (<768px) : structure identique à la slideshow Carré
   - Pas de card colorée
   - Image en haut (cercle), pleine largeur
   - Légende en dessous
   - Flèches + dots tout en bas
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* La carte n'est plus une "carte" : pas de fond, pas de border-radius, pas de padding */
  .product-page .wbcircle-card {
    background: transparent !important;  /* override le style inline */
    border-radius: 0;
    padding: 0;
  }

  /* La grille devient une simple colonne (image au-dessus, texte dessous) */
  .product-page .wbcircle-grid {
    display: block;
  }

  /* Image cercle limitée à une taille raisonnable */
  .product-page .wbcircle-img {
    max-width: 280px;
    margin: 0 auto 24px;
  }

  /* Texte aligné à gauche, comme la Carré */
  .product-page .wbcircle-text {
    text-align: left;
    max-width: 100%;
  }

  /* Tailles typo mobile */
  .product-page .wbcircle-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .product-page .wbcircle-body {
    font-size: 14px;
  }

  /* Contrôles : marge serrée comme sur la Carré */
  .product-page .wbcircle-controls {
    margin-top: 20px;
  }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Slideshow Cercle (FIX MOBILE FINAL)
   ============================================================
   Problème identifié : la règle existante (ligne ~3337)
       .wb-slideshow .wb-slide > div > div:first-child:not([style*="border-radius:50%"])
   force aspect-ratio:4/3 sur la carte verte, ce qui écrase sa
   hauteur et fait déborder le contenu par-dessus la section
   suivante "Une anatomie de la précision".

   Cette règle override l'aspect-ratio uniquement pour .wbcircle-card.
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

@media (max-width: 767px) {
  /* Annule l'aspect-ratio:4/3 forcé sur la carte verte */
  .wb-slideshow .wb-slide .wbcircle-card {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Annule aussi la règle pour le wrapper interne (le 1er enfant qui n'est pas un cercle) */
  .wb-slideshow .wb-slide .wbcircle-grid {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* L'image cercle reste un vrai cercle, taille raisonnable */
  .wb-slideshow .wb-slide .wbcircle-img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 24px !important;
  }

  /* Texte aligné à gauche, comme la slideshow Carré */
  .wb-slideshow .wb-slide .wbcircle-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Marge sous le texte avant les contrôles */
  .wb-slideshow .wb-slide .wbcircle-text {
    margin-bottom: 20px !important;
  }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Slideshow Cercle (FIX RÉEL VÉRIFIÉ DOM)
   ============================================================
   DIAGNOSTIC vérifié dans Safari iOS Inspector :
   - .wbcircle-card reçoit aspect-ratio:1/1 forcé (342×342px)
   - Le contenu (image 280px + titre + paragraphe + flèches)
     dépasse cette hauteur → débordement sur la section suivante.

   CORRECTION : sélecteur via #slideshow-2 (ID unique = +100 de
   spécificité) pour gagner contre toutes les règles existantes.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

@media (max-width: 767px) {
  /* La carte ne doit JAMAIS être contrainte par un aspect-ratio.
     Sa hauteur doit s'ajuster à son contenu. */
  #slideshow-2 .wbcircle-card,
  #slideshow-2 .wb-slide > .wbcircle-wrap > .wbcircle-card {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  /* La grille intérieure : empilage simple */
  #slideshow-2 .wbcircle-grid {
    display: block !important;
    grid-template-columns: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Image cercle : reste un cercle, taille raisonnable, centrée */
  #slideshow-2 .wbcircle-img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    overflow: hidden !important;
  }

  /* Texte : pleine largeur, aligné à gauche */
  #slideshow-2 .wbcircle-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 20px !important;
  }
  #slideshow-2 .wbcircle-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
  }
  #slideshow-2 .wbcircle-body {
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }

  /* Contrôles : barre normale */
  #slideshow-2 .wbcircle-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* La section produit elle-même : pas de hauteur min imposée */
  #slideshow-2 {
    min-height: 0 !important;
  }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Slideshow Cercle (FIX UNIVERSEL)
   ============================================================
   S'applique à TOUS les slideshows Cercle de la page (slideshow-2,
   slideshow-3, etc.), peu importe leur position.

   Spécificité boostée par triple sélecteur de classe pour gagner
   contre les règles concurrentes ligne 4087 et 3342 du theme.css.

   À COLLER À LA FIN DE theme.css.
   Remplace tous les blocs précédents "Slideshow Cercle".
   ============================================================ */

@media (max-width: 767px) {
  /* La carte ne doit jamais être contrainte par un aspect-ratio */
  .product-page .wb-slideshow .wb-slide .wbcircle-wrap .wbcircle-card,
  .wb-slideshow .wb-slide > .wbcircle-wrap > .wbcircle-card {
    aspect-ratio: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Grille intérieure : empilage simple */
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-grid,
  .wb-slideshow .wb-slide .wbcircle-card > .wbcircle-grid {
    display: block !important;
    grid-template-columns: none !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Image cercle : reste un cercle, centrée, max 280px */
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-img,
  .wb-slideshow .wb-slide .wbcircle-card .wbcircle-img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto 24px !important;
    overflow: hidden !important;
  }

  /* Texte : pleine largeur, aligné à gauche */
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-text {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 20px !important;
  }
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
  }
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-body {
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
  }

  /* Contrôles : barre normale */
  .product-page .wb-slideshow .wb-slide .wbcircle-card .wbcircle-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Image pleine page 2 : switch desktop/mobile
   ============================================================
   Même logique que pour la vidéo plein page 1 : on a deux <section>
   (.image-2-desktop-only et .image-2-mobile-only), une seule est
   visible à la fois selon la largeur de viewport.

   Mobile : image portrait, format 4/5 (immersive sans plein écran).
   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Switch desktop / mobile par défaut : desktop visible, mobile caché */
.image-2-desktop-only { display: block; }
.image-2-mobile-only { display: none; }

@media (max-width: 767px) {
  .image-2-desktop-only { display: none; }
  .image-2-mobile-only { display: block; }
}

/* Conteneur de l'image portrait mobile : edge-to-edge avec ratio 4/5 */
.product-image-wrap-portrait-2 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.product-image-wrap-portrait-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ============================================================
   CONFIGURATEUR — Cards accessoires : description + compteur
   ============================================================
   Complète le style existant des .config-acc-card pour gérer :
   - Une description courte sous le nom
   - Un compteur +/- quand qty_mode = "counter"
   - Un message vide quand aucun accessoire n'est défini

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Card : layout flex, alignement vertical en haut pour bien gérer la description */
.config-acc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.config-acc-card.selected {
  border-color: var(--black);
  border-width: 1.5px;
  padding: calc(14px - 1px);
}

/* Info centrale : empilage vertical nom / desc / prix */
.config-acc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.config-acc-name {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--black);
  margin: 0;
}

.config-acc-desc {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.55);
  margin: 2px 0 0;
}

.config-acc-price {
  font-family: var(--font-primary);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  margin: 4px 0 0;
}

.config-acc-price-unit {
  color: rgba(0, 0, 0, 0.5);
  font-size: 11px;
}

/* Compteur +/- pour les accessoires en mode quantité */
.config-acc-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: auto;
}

.config-acc-counter-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.config-acc-counter-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.config-acc-counter-val {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 14px;
  color: var(--black);
  min-width: 18px;
  text-align: center;
}

/* Empêche le clic sur les boutons +/- de propager au card click (mode case) */
.config-acc-card .config-acc-counter {
  cursor: default;
}

/* Message "aucun accessoire" */
.config-empty-hint {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  font-style: italic;
  text-align: center;
  padding: 24px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 0.5px dashed rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin: 0;
}
/* ============================================================
   CONFIGURATEUR — Cards accessoires v2 : variantes en pills
   ============================================================
   Complète le CSS précédent. La card est désormais structurée en :
   - .config-acc-top : image + info + action (ligne du haut)
   - .config-acc-variants : sélecteur de variantes en pills (apparait
     uniquement quand la card est sélectionnée, animation max-height)

   À COLLER À LA FIN DE theme.css.
   Si vous avez collé le CSS précédent (cards accessoires v1),
   vous pouvez le LAISSER EN PLACE — ce nouveau bloc complète/override
   les règles concernées.
   ============================================================ */

/* ── Card : on supprime le display:flex direct, c'est .config-acc-top qui le fait ── */
.config-acc-card {
  display: block !important;
  padding: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--white);
  transition: border-color 0.2s ease, background 0.2s ease;
  overflow: hidden; /* pour cacher proprement les pills repliées */
}

.config-acc-card.selected {
  border-color: var(--black);
  border-width: 1.5px;
  padding: calc(14px - 1px);
}

/* ── Top row : image + info + action ── */
.config-acc-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Wrapper image (pour bien dimensionner) */
.config-acc-img-wrap {
  flex-shrink: 0;
}

/* Action (côté droit : compteur ou radio) */
.config-acc-action {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Pills variantes : section sous la top row ── */
.config-acc-variants {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              margin-top 0.35s ease,
              padding-top 0.35s ease;
  margin-top: 0;
  padding-top: 0;
  border-top: 0 solid rgba(0, 0, 0, 0);
}

.config-acc-variants.is-open {
  max-height: 200px; /* large pour permettre 2 lignes de pills */
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}

.config-acc-variants-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5);
  margin: 0 0 10px;
}

.config-acc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.config-acc-pill {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  color: var(--black);
  background: var(--white);
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.config-acc-pill:hover:not(.is-unavailable) {
  border-color: rgba(0, 0, 0, 0.5);
}

.config-acc-pill.is-active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.config-acc-pill.is-unavailable {
  color: rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.1);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ── Mobile : pills un peu plus compactes ── */
@media (max-width: 1023px) {
  .config-acc-pill {
    font-size: 11px;
    padding: 5px 12px;
  }
  .config-acc-variants.is-open {
    max-height: 240px; /* mobile : on peut avoir plus de lignes */
  }
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Precision Pixel mobile : 4 pictos sur 1 ligne
   ============================================================
   Override des anciennes règles "5 pictos en 3+2" qui sont devenues
   obsolètes depuis le retrait du picto Composants. On force 4 colonnes
   égales pour que les 4 pictos restants tiennent sur une seule ligne.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

@media (max-width: 767px) {
  /* Container : 4 colonnes égales au lieu de 6 + repositionnements */
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px 8px !important;
    padding: 0 12px !important;
  }

  /* Annule les span-2 + nth-child placements ancien layout (3+2) */
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(1),
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(2),
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(3),
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] > div:nth-child(4) {
    grid-column: auto !important;
    justify-self: center !important;
  }

  /* Pictos un peu plus petits pour bien tenir à 4 sur la ligne */
  .px-btn {
    width: 56px !important;
    height: 56px !important;
  }

  /* Labels : police légèrement réduite + word-break pour éviter overflow */
  .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  /* Sur les très petits écrans (< 360px), on réduit encore un peu */
  @media (max-width: 359px) {
    .px-btn {
      width: 52px !important;
      height: 52px !important;
    }
    .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] {
      gap: 10px 6px !important;
      padding: 0 8px !important;
    }
    .product-section > div > div[style*="display:flex;justify-content:center;gap:32px"] p {
      font-size: 10px !important;
    }
  }
}
/* ============================================================
   CONFIGURATEUR — Description produit : listes à puces propres
   ============================================================
   Avant : les <ul>/<ol> n'avaient aucun padding-left défini, donc
   les puces sortaient du bloc de texte (à gauche, en dehors).

   Après : les listes ont un retrait à gauche, les puces sont
   alignées sur la marge gauche du texte, et les items sont
   correctement indentés à droite des puces.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.config-product-description ul,
.config-product-description ol {
  padding-left: 22px;
  margin: 8px 0 12px;
  list-style-position: outside;
}

.config-product-description ul {
  list-style-type: disc;
}

.config-product-description ol {
  list-style-type: decimal;
}

.config-product-description li {
  margin: 0 0 6px;
  line-height: 1.55;
  padding-left: 4px;
}

.config-product-description li:last-child {
  margin-bottom: 0;
}

/* Marqueurs de puce : couleur cohérente avec le texte de description */
.config-product-description li::marker {
  color: rgba(0, 0, 0, 0.55);
}

/* Listes imbriquées : retrait supplémentaire */
.config-product-description ul ul,
.config-product-description ol ol,
.config-product-description ul ol,
.config-product-description ol ul {
  margin: 4px 0 4px;
  padding-left: 20px;
}

/* Mobile : retrait légèrement réduit */
@media (max-width: 1023px) {
  .config-product-description ul,
  .config-product-description ol {
    padding-left: 20px;
  }
}
/* ============================================================
   PAGE MODULE SECONDAIRE — Section "Vous aimerez aussi" v2
   ============================================================
   Refonte cards : utilisent maintenant la structure home-product-card
   (titre au-dessus / image cliquable / bouton Acheter + prix double).
   La grille passe en auto-fit pour s'adapter au nombre de cards.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Grille auto-adaptative : 3 cards = 3 colonnes, 4 cards = 4 colonnes, etc. */
.pm-suggestions-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  max-width: 1400px !important;
}

/* Si trop de cards par rapport à la largeur, ne dépasse pas 4 par ligne */
@media (min-width: 1400px) {
  .pm-suggestions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Card v2 : héberge le badge en absolu sur l'image */
.pm-suggestion-card-v2 {
  position: relative;
}

/* Le badge garde sa position sur l'image (style préservé) */
.pm-suggestion-card-v2 .pm-suggestion-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 10px;
  background: #000;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hover image overlay (cohérent avec home-product-card) */
.pm-suggestion-card-v2 .home-product-image {
  position: relative;
}
.pm-suggestion-card-v2:hover .home-product-image-overlay {
  opacity: 0.05 !important;
}

/* Mobile : grille 1 colonne */
@media (max-width: 767px) {
  .pm-suggestions-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
/* ============================================================
   PAGE MODULE SECONDAIRE — Section "Vous aimerez aussi" v2
   ============================================================
   Refonte cards : utilisent maintenant la structure home-product-card
   (titre au-dessus / image cliquable / bouton Acheter + prix double).
   La grille passe en auto-fit pour s'adapter au nombre de cards.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Grille auto-adaptative : 3 cards = 3 colonnes, 4 cards = 4 colonnes, etc. */
.pm-suggestions-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  max-width: 1400px !important;
}

/* Si trop de cards par rapport à la largeur, ne dépasse pas 4 par ligne */
@media (min-width: 1400px) {
  .pm-suggestions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Card v2 : héberge le badge en absolu sur l'image */
.pm-suggestion-card-v2 {
  position: relative;
}

/* Le badge garde sa position sur l'image (style préservé) */
.pm-suggestion-card-v2 .pm-suggestion-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 10px;
  background: #000;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hover image overlay (cohérent avec home-product-card) */
.pm-suggestion-card-v2 .home-product-image {
  position: relative;
}
.pm-suggestion-card-v2:hover .home-product-image-overlay {
  opacity: 0.05 !important;
}

/* Mobile : grille 1 colonne */
@media (max-width: 767px) {
  .pm-suggestions-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
/* ============================================================
   PAGE MODULE SECONDAIRE — Section "Vous aimerez aussi" v2
   ============================================================
   Refonte cards : utilisent maintenant la structure home-product-card
   (titre au-dessus / image cliquable / bouton Acheter + prix double).
   La grille passe en auto-fit pour s'adapter au nombre de cards.
   Override des couleurs : la classe home-product-* est conçue pour
   fond foncé (page d'accueil), ici on est sur fond clair → on inverse.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

/* Grille auto-adaptative : 3 cards = 3 colonnes, 4 cards = 4 colonnes, etc. */
.pm-suggestions-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  max-width: 1400px !important;
}

/* Si trop de cards par rapport à la largeur, ne dépasse pas 4 par ligne */
@media (min-width: 1400px) {
  .pm-suggestions-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Card v2 : héberge le badge en absolu sur l'image */
.pm-suggestion-card-v2 {
  position: relative;
}

/* ── Adaptation thème clair (fond blanc de la page module secondaire) ── */
/* Bouton Acheter : noir sur blanc au lieu de blanc sur noir */
.pm-suggestion-card-v2 .home-product-buy-btn {
  background: var(--black) !important;
  color: var(--white) !important;
}
.pm-suggestion-card-v2 .home-product-buy-btn:hover {
  background: #333 !important;
  color: var(--white) !important;
}

/* "À partir de" : gris foncé au lieu de gris clair */
.pm-suggestion-card-v2 .home-product-from {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Le badge garde sa position sur l'image (style préservé) */
.pm-suggestion-card-v2 .pm-suggestion-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 10px;
  background: #000;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hover image overlay (cohérent avec home-product-card) */
.pm-suggestion-card-v2 .home-product-image {
  position: relative;
}
.pm-suggestion-card-v2:hover .home-product-image-overlay {
  opacity: 0.05 !important;
}

/* Mobile : grille 1 colonne */
@media (max-width: 767px) {
  .pm-suggestions-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
/* ============================================================
   CONFIGURATEUR — z-index flèches & dots au-dessus des slides
   ============================================================
   Les slides d'images ont z-index 1 ou 2 (pour gérer correctement
   l'empilement à l'init). Sans cette règle, les flèches et dots
   passent SOUS les slides et deviennent inaccessibles.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.configurator-img-nav-btn,
.configurator-img-prev,
.configurator-img-next {
  z-index: 5 !important;
}

.configurator-dots-row {
  z-index: 5 !important;
}

/* Le badge accessoire doit aussi rester au-dessus */
.configurator-acc-badge {
  z-index: 6 !important;
}
/* ============================================================
   PAGE D'ACCUEIL — Section With you by you
   Espace plus grand entre "...accompagnement :" et "With you, by you."
   ============================================================
   Override du gap du flex container .wybu-marquee-text.
   La règle d'origine était à 0.25em (très serré). On passe à 0.7em
   pour bien aérer visuellement les deux portions du marquee.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

.wybu-marquee-text {
  gap: 0.7em !important;
}
/* ============================================================
   PAGE LIGHTFORMCOLOR — Bloc texte gradient RGB sur desktop
   ============================================================
   Élargit la zone et agrandit le texte du bloc "gradient" sur desktop.
   Mobile (< 1024px) : aucun changement, conserve les valeurs inline d'origine.

   À COLLER À LA FIN DE theme.css.
   ============================================================ */

@media (min-width: 1024px) {
  /* Conteneur parent : on enlève la limite à 1100px et on étend à presque toute la largeur */
  .product-section-gradient-wide .gradient-block-wrap {
    max-width: 1700px !important;
    width: 92% !important;
  }

  /* Corps du texte : agrandir et utiliser presque toute la largeur du conteneur */
  .gradient-block-body {
    max-width: 1500px !important;
    width: 96% !important;
    font-size: clamp(28px, 3.6vw, 56px) !important;
    line-height: 1.25 !important;
  }

  /* Titre (s'il y en a un) : un peu plus grand aussi pour rester proportionnel */
  .gradient-block-title {
    font-size: clamp(40px, 5vw, 72px) !important;
  }
}

/* Très grand écran (> 1600px) : on monte encore un peu pour bien occuper l'espace */
@media (min-width: 1600px) {
  .gradient-block-body {
    font-size: clamp(36px, 3.4vw, 60px) !important;
  }
  .gradient-block-title {
    font-size: clamp(48px, 4.8vw, 80px) !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Mode "lecture article" sur desktop
   ============================================================
   Réduit les tailles de texte ET applique une largeur de lecture
   confortable (~720px) aux sections "Notre méthode", "E-commerce"
   et "Devenir partenaires" sur desktop, comme un article de magazine
   contemporain en ligne (NYT, Le Monde, Medium).

   Cible UNIQUEMENT les sections marquées .wybu-readable.
   L'introduction et l'engagement final (Renaissance) ne sont PAS
   marquées et conservent leur taille manifeste actuelle.

   Sur mobile (< 768px) : aucun changement, garde les valeurs actuelles
   qui sont déjà bien dimensionnées.

   À COLLER À LA FIN DE theme.css (remplace la version précédente
   si elle est déjà là — chercher le commentaire ci-dessus).
   ============================================================ */

@media (min-width: 768px) {
  /* ── Largeur de lecture article : ~720px centrés ──
     Le wrapper de section reste pleine largeur (sinon le numéro
     du step et les images full-width se cassent), mais le contenu
     interne est centré et limité en largeur. */
  .wybu-readable {
    max-width: 880px !important;       /* numéro + texte ensemble */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Le texte lui-même un peu plus étroit que le wrapper pour
     un alignement optique propre par rapport au numéro à gauche */
  .wybu-readable .wybu-text--sm,
  .wybu-readable .wybu-text--md {
    max-width: 720px;
  }

  /* ── Tailles de texte (mode article lisible) ── */
  .wybu-readable .wybu-chapter-title {
    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.6em !important;
  }

  .wybu-readable .wybu-text--md,
  .wybu-readable .wybu-text--md p {
    font-size: clamp(17px, 1.4vw, 22px) !important;
    line-height: 1.6 !important;
  }

  .wybu-readable .wybu-step-num {
    font-size: clamp(13px, 0.9vw, 15px) !important;
    width: 2.4em !important;
    height: 2.4em !important;
  }

  .wybu-readable .wybu-step-title {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.25 !important;
  }

  .wybu-readable .wybu-text--sm,
  .wybu-readable .wybu-text--sm p {
    font-size: clamp(16px, 1.2vw, 19px) !important;
    line-height: 1.7 !important;
  }

  /* Espacement vertical entre phases : un peu plus aéré pour la lisibilité */
  .wybu-readable.wybu-step {
    padding-top: 56px !important;
  }

  /* Aligner le corps du texte sous le titre (pas sous le numéro)
     pour un flux de lecture naturel d'article. Le numéro reste
     visible à gauche en hanging-indent. */
  .wybu-readable.wybu-step .wybu-text--sm {
    /* Décalage = largeur du num (2.4em) + gap header (16px ≈ 1em) */
    padding-left: calc(2.4em + 16px);
  }
}

/* Très grand écran : palier supplémentaire mais sans exploser */
@media (min-width: 1600px) {
  .wybu-readable .wybu-text--sm,
  .wybu-readable .wybu-text--sm p,
  .wybu-readable .wybu-text--md,
  .wybu-readable .wybu-text--md p {
    font-size: 20px !important;
  }
  .wybu-readable .wybu-step-title {
    font-size: 28px !important;
  }
  .wybu-readable .wybu-chapter-title {
    font-size: 48px !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Numéros encerclés FT Polar Book
   + alignement titre/corps + espacement signature
   ============================================================
   - Restaure le rendu numéros encerclés en typo principale
   - Aligne le début des titres numérotés et les textes sur la
     même marge à gauche (seul le numéro est plus à gauche)
   - Augmente légèrement l'espace entre le texte Renaissance
     et la date / signature

   À COLLER À LA FIN DE theme.css (remplace la version précédente
   de ce bloc).
   ============================================================ */

/* ── Numéros encerclés FT Polar Book ── */
.wybu-step-num,
.wybu-readable .wybu-step-num {
  font-family: var(--font-primary), sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #000 !important;
  border-radius: 50% !important;
  color: #000 !important;
  background: transparent !important;
  background-image: none !important;
  transform: none !important;
}

/* ── Sur desktop : numéro un peu plus grand + alignement titre/corps ── */
@media (min-width: 768px) {
  /* Numéros un peu plus grands (taille du contenu : 16-18px) */
  .wybu-readable .wybu-step-num {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    width: 2.4em !important;
    height: 2.4em !important;
  }

  /* Header en position relative, numéro en absolute à gauche
     pour que le titre s'aligne sur la même marge que le corps */
  .wybu-readable.wybu-step .wybu-step-header {
    position: relative;
    display: block !important;
    margin-bottom: 0.6em !important;
    /* Décalage à gauche identique au corps : laisse le numéro
       dépasser à gauche en hanging indent */
    padding-left: calc(2.4em + 16px);
  }

  /* Numéro absolu à gauche */
  .wybu-readable.wybu-step .wybu-step-header .wybu-step-num {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Titre du step : aligné sur la marge gauche (= sous lui-même
     et au-dessus du corps, même marge à gauche) */
  .wybu-readable .wybu-step-title {
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  /* Le corps : on annule l'ancien padding-left (qui le mettait
     en hanging indent par rapport au num). Maintenant titre et
     corps partagent la même marge gauche du wrapper section. */
  .wybu-readable.wybu-step .wybu-text--sm {
    padding-left: calc(2.4em + 16px);
  }
}

/* ── Espace entre corps Renaissance et signature/date ── */
.wybu-signature {
  margin-top: 2.5em !important;
}

@media (min-width: 768px) {
  .wybu-signature {
    margin-top: 3em !important;
  }
}
/* ============================================================
   PAGE WITH YOU BY YOU — Couleurs de fond par chapitre
   v3 : symétrie verticale autour des images
   ============================================================
   Chaque chapitre coloré a un padding identique au-dessus et
   en-dessous du contenu (texte) — y compris quand une image
   full-bleed touche le haut ou le bas du wrap.

   À COLLER À LA FIN DE theme.css (remplace les versions précédentes
   de ce bloc).
   ============================================================ */

/* ── Wrappers de chapitre : edge-to-edge ── */
.wybu-chapter-bg {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .wybu-chapter-bg {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

/* ── Couleurs par chapitre ── */
.wybu-chapter-bg--method    { background-color: #9ddcb9; }
.wybu-chapter-bg--ecommerce { background-color: #ffaeae; }
.wybu-chapter-bg--partners  { background-color: #9dbfff; }

/* ── Images à l'intérieur d'un wrap : pleine largeur ── */
.wybu-chapter-bg .wybu-figure-full {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ─── IMAGE EN PREMIER ENFANT DU WRAP ──
   L'image colle au top du wrap (pas de couleur au-dessus de l'image),
   PUIS on rajoute du padding-top entre l'image et le contenu suivant
   pour avoir le MÊME espace que padding-bottom du wrap. */
.wybu-chapter-bg > .wybu-figure-full:first-child {
  margin-top: -64px;
  margin-bottom: 64px; /* = padding-bottom du wrap → symétrie */
}
@media (min-width: 768px) {
  .wybu-chapter-bg > .wybu-figure-full:first-child {
    margin-top: -96px;
    margin-bottom: 96px; /* = padding-bottom desktop */
  }
}

/* ─── IMAGE EN DERNIER ENFANT DU WRAP ──
   Pareil en miroir : on colle au bottom mais on garde l'air avant. */
.wybu-chapter-bg > .wybu-figure-full:last-child {
  margin-bottom: -64px;
  margin-top: 64px;
}
@media (min-width: 768px) {
  .wybu-chapter-bg > .wybu-figure-full:last-child {
    margin-bottom: -96px;
    margin-top: 96px;
  }
}

/* ─── IMAGE SEULE DANS LE WRAP (cas extrême) ── */
.wybu-chapter-bg > .wybu-figure-full:only-child {
  margin-top: -64px;
  margin-bottom: -64px;
}
@media (min-width: 768px) {
  .wybu-chapter-bg > .wybu-figure-full:only-child {
    margin-top: -96px;
    margin-bottom: -96px;
  }
}

/* ─── Reset des images full-bleed (hors wrap aussi) ─── */
.wybu .wybu-figure-full {
  padding: 0;
  display: block;
}

.wybu .wybu-figure-full img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Image directement APRÈS un wrap coloré : pas de margin-top
   pour qu'elle se colle au bas de la zone colorée (cas du pont
   après le wrap Partenaires) ─── */
.wybu-chapter-bg + .wybu-figure-full {
  margin-top: 0 !important;
}

/* ─── Image directement AVANT un wrap coloré : pas de margin-bottom
   pour qu'elle se colle au haut de la zone colorée qui suit
   (cas de l'intro_image suivie du wrap Méthode/Expertises) ─── */
.wybu-figure-full:has(+ .wybu-chapter-bg) {
  margin-bottom: 0 !important;
}

/* Fallback compatibilité ancien navigateur (sans :has) :
   on neutralise carrément le margin-bottom de TOUTES les figures
   full quand un wrap suit, en ciblant via le parent .wybu */
.wybu .wybu-figure-full + .wybu-chapter-bg {
  margin-top: 0;
}

/* ── Garantie étendue : sous-titre explicatif sous le titre ── */
.config-warranty-sublabel {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
  margin: 4px 0 0 0;
  opacity: 0.9;
}
.config-warranty-card.selected .config-warranty-sublabel {
  color: rgba(0, 0, 0, 0.7);
}
/* ============================================
   TÉLÉCHARGEMENTS LFC TUBE — bouton + modale de capture lead
   ============================================ */

/* Bouton "Téléchargements" — même style que l'ancien lien */
.dl-trigger-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 16px 48px;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}
.dl-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Overlay modal */
.dl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 24px;
}
.dl-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* Modal */
.dl-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 48px 40px 40px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.dl-modal-overlay.is-open .dl-modal {
  transform: translateY(0);
}

.dl-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.dl-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.dl-modal-title {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 24px;
  color: #000;
  margin: 0 0 12px;
  line-height: 1.2;
}
.dl-modal-intro {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin: 0 0 24px;
}

.dl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dl-field-row {
  display: flex;
  gap: 12px;
}
.dl-field-row .dl-input {
  flex: 1;
  min-width: 0;
}

.dl-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 16px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  color: #000;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dl-input:focus {
  border-color: #000;
  background: #fff;
}
.dl-input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.dl-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 4px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}
.dl-consent input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.dl-consent a {
  color: #000;
  text-decoration: underline;
}

.dl-submit {
  width: 100%;
  height: 48px;
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s ease, transform 0.1s ease;
}
.dl-submit:hover:not(:disabled) {
  background: #1a1a1a;
}
.dl-submit:active:not(:disabled) {
  transform: scale(0.98);
}
.dl-submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.dl-error {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 13px;
  color: #FF5656;
  margin: 8px 0 0;
  text-align: center;
}

/* Mobile */
@media (max-width: 540px) {
  .dl-modal {
    padding: 40px 24px 28px;
    border-radius: 14px;
  }
  .dl-modal-title {
    font-size: 20px;
  }
  .dl-field-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* ─── Drawer panier : carte bundle (configuration LFC Tube complète) ─── */
.cart-drawer-bundle {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 8px;
}
.cart-drawer-bundle .cart-drawer-item-img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}
.cart-drawer-bundle .cart-drawer-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-drawer-bundle .cart-drawer-item-info {
  flex: 1;
  min-width: 0;
}
.cart-drawer-bundle .cart-drawer-item-title {
  font-weight: 500;
  margin-bottom: 8px;
}
.cart-drawer-bundle .cart-drawer-item-props {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 12px;
  opacity: 0.75;
}
.cart-drawer-bundle .cart-drawer-item-props li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.cart-drawer-bundle .cart-drawer-item-props li span:first-child {
  font-weight: 500;
}