/*
Theme Name: Booster Pharma
Theme URI: https://ephaco.com/booster
Author: EPHACO
Description: Thème immersif pour le département Booster — agencement de pharmacies. Fond crème chaud, accents orange & marron.
Version: 3.2.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
License URI: https://ephaco.com/license
Text Domain: booster
Domain Path: /languages
Tags: custom-logo, custom-menu, featured-images, theme-options, translation-ready, e-commerce
*/

/* ====================================
   ROOT & VARIABLES
==================================== */
:root {
  /* Palette — Orange & Marron (inspired by brand poster) */
  --rose:         #FF6B00;
  --rose-dk:      #E55A00;
  --rose-light:   #FFF0E0;
  --fuchsia:      #FF8C33;
  --violet:       #8B2500;
  --violet-dk:    #6B1A0A;
  --violet-light: #FFF4EC;
  --teal:         #FF6B00;
  --teal-dk:      #E55A00;
  --teal-light:   #FFF0E0;
  --dark:         #4A1A08;          /* deep brown */
  --cream:        #FFF8F2;          /* warm white with orange tint */
  --white:        #FFFFFF;
  --gray:         #6B7280;
  --gray-light:   #FAF5F0;          /* orange-tinted light gray */
  --green-section: #FFF0E0;         /* soft orange — CTA sections */

  /* Typography */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Inter', system-ui, sans-serif;

  /* Accent — couleur principale d'accentuation */
  --accent:       #FF6B00;            /* orange vif */

  /* Helpers */
  --grad:         linear-gradient(135deg, var(--rose), var(--fuchsia), var(--violet));
  --grad-warm:    linear-gradient(135deg, var(--rose), var(--fuchsia));
  --container:    1240px;
  --pad:          clamp(20px, 5vw, 80px);
  --section-y:    clamp(80px, 10vw, 140px);
}

/* ====================================
   SKIP LINK — Accessibility
==================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--dark);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 100000;
  transition: top 0.2s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--rose);
  outline-offset: 2px;
}

/* Screen reader text (WordPress convention) */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
  position: static;
  z-index: 100000;
}

/* ====================================
   RESET & BASE
==================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Note: scroll-behavior removed — Lenis handles smooth scroll */

html {
  overflow-x: clip; /* clip (pas hidden) — hidden crée un scroll-container et casse position:sticky */
}
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip !important; /* override embedded stylesheet — clip ne casse pas sticky contrairement à hidden */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
}

a { color: var(--rose); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--teal-dk); }

img { max-width: 100%; height: auto; display: block; }
p { margin-bottom: 1rem; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ====================================
   UTILITY
==================================== */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-center { text-align: center; }
.text-white  { color: var(--white) !important; }
.text-rose   { color: var(--rose); }
.text-teal   { color: var(--teal); }
.text-muted  { color: var(--gray); }

/* On dark sections, paragraphs default to white/semi */
.section-dark p { color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--white); }

/* ====================================
   ANIMATIONS — FAST (≤0.6s)
==================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
@keyframes float {
  from { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes revealLine {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatBobble {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  33%       { transform: translate(calc(-50% + 10px), calc(-50% - 22px)) scale(1.06) rotate(5deg); }
  66%       { transform: translate(calc(-50% - 7px), calc(-50% + 14px)) scale(0.96) rotate(-3deg); }
}
@keyframes floatRingAnim {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.07; }
  50%       { transform: translate(-50%, calc(-50% - 28px)) scale(1.12) rotate(180deg); opacity: 0.14; }
}
@keyframes floatCross {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.06; }
  40%       { transform: translate(-50%, calc(-50% - 18px)) scale(1.08) rotate(20deg); opacity: 0.11; }
  70%       { transform: translate(-50%, calc(-50% + 8px)) scale(0.95) rotate(-10deg); opacity: 0.07; }
}

/* ====================================
   FLOATING SECTION DECORATORS
==================================== */
.section-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.section-floaters > * { position: absolute; }

/* Bubble floaters */
.fl-bubble {
  border-radius: 50%;
  animation: floatBobble var(--dur, 8s) var(--delay, 0s) ease-in-out infinite;
}
/* Ring floaters */
.fl-ring {
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  animation: floatRingAnim var(--dur, 10s) var(--delay, 0s) ease-in-out infinite;
}
/* Cross / pharmacy cross floaters */
.fl-cross {
  animation: floatCross var(--dur, 9s) var(--delay, 0s) ease-in-out infinite;
}
.fl-cross::before,
.fl-cross::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.fl-cross::before { width: 100%; height: 30%; top: 35%; left: 0; }
.fl-cross::after  { width: 30%; height: 100%; top: 0; left: 35%; }

/* Ensure parent sections are positioned */
.services,
.methode,
.portfolio,
.testimonials,
.contact-section {
  position: relative;
}

/* ====================================
   SCROLL REVEAL
==================================== */
/* Révélation — GSAP gère opacity/transform via inline styles (pas de conflit) */
.bst-reveal {
  /* Pas de transition CSS : GSAP anime directement les inline styles */
  will-change: opacity, transform;
}
/* Fallback CSS si JS absent (pas d'!important qui écraserait GSAP) */
.no-js .bst-reveal,
.bst-reveal.visible {
  opacity: 1;
  transform: none;
}
/* Fallback: reveal .ap-reveal elements if GSAP/ScrollTrigger doesn't fire */
.ap-reveal {
  will-change: opacity, transform;
}
.ap-reveal.in-view,
.no-js .ap-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ====================================
   SCROLL PROGRESS BAR
==================================== */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--grad);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(255,107,0,0.55), 0 0 3px rgba(255,107,0,0.8);
}

/* ====================================
   WORD / LINE REVEAL (GSAP)
==================================== */
/* Conteneur de masque pour le texte */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.word-inner {
  display: inline-block;
  will-change: transform;
}

/* ====================================
   TICKER BRAND IMMERSIF
==================================== */
.brand-ticker {
  background: var(--dark);
  padding: 1.1rem 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.brand-ticker-track {
  display: flex;
  width: max-content;
  gap: 0;
  white-space: nowrap;
  animation: tickerMove 18s linear infinite;
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.brand-ticker-item strong {
  color: var(--rose);
  -webkit-text-fill-color: var(--rose);
}
.brand-ticker-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rose);
  opacity: 0.5;
  flex-shrink: 0;
}

/* ====================================
   PRELOADER
==================================== */
.preloader {
  position: fixed;
  inset: 0;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 9999;
  transition: opacity 0.8s cubic-bezier(0.23,1,0.32,1),
              transform 0.8s cubic-bezier(0.23,1,0.32,1),
              clip-path 0.9s cubic-bezier(0.77,0,0.175,1);
  clip-path: inset(0 0 0 0);
}
.preloader.exit {
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
.preloader-logo {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 3px;
}
.preloader-sub {
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.preloader-bar {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-progress {
  height: 100%;
  background: var(--grad);
  width: 0%;
  border-radius: 2px;
  transition: width 1.8s ease;
}

/* ====================================
   CUSTOM CURSOR
==================================== */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--rose);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  opacity: 0;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border: 2px solid var(--rose);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  will-change: transform;
  opacity: 0;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ====================================
   HEADER / NAVBAR
==================================== */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.5rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s cubic-bezier(0.23,1,0.32,1),
              padding 0.5s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.5s ease,
              backdrop-filter 0.5s ease;
}

/* Initially — white links for dark hero sections (all pages have dark hero at top) */
header .nav-menu a {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 6px rgba(0,0,0,0.45), 0 0 20px rgba(0,0,0,0.25);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
header .menu-toggle span { background: var(--white); transition: background 0.4s ease; }

/* After scroll — cream background + dark links */
body.scrolled header {
  background: rgba(253, 250, 247, 0.97);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  padding: 0.85rem var(--pad);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.04);
}
body.scrolled header .nav-menu a { color: var(--dark); text-shadow: none; }
body.scrolled header .menu-toggle span { background: var(--dark); }
body.scrolled .logo-tagline { color: var(--gray); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1.12; }
.logo-text {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-tagline {
  font-size: 0.6rem;
  color: var(--gray);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;    /* tient sur une seule ligne */
  margin-top: 3px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: clamp(1rem, 2vw, 2.5rem);   /* gap adaptatif — se réduit si pas assez d'espace */
  align-items: center;
  flex-wrap: nowrap;
}
.nav-menu a {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;   /* empêche À propos de couper sur 2 lignes */
}
.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.23,1,0.32,1), left 0.35s cubic-bezier(0.23,1,0.32,1);
}
.nav-menu a:hover::after { width: 100%; left: 0; }

/* Nav CTA pill */
.nav-cta {
  background: var(--grad);
  color: var(--white) !important;
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 4px 18px rgba(255,107,0,0.3);
  text-shadow: none;
}
.nav-cta:hover {
  box-shadow: 0 8px 32px rgba(255,107,0,0.45);
  transform: translateY(-2px) scale(1.02);
  opacity: 0.95;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px 0;
  transition: all 0.3s;
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(9px, 9px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

/* Dark overlay behind sidebar */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74,26,8,0.6);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.23,1,0.32,1);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
}
.mobile-menu-overlay.active { opacity: 1; pointer-events: all; }

/* Slide-in sidebar */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 90vw);
  height: 100dvh;
  background: #ffffff;
  /* Liseré décoratif gauche teal */
  border-left: 3px solid transparent;
  background-clip: padding-box;
  z-index: 999;
  padding: 1.75rem 1.75rem 2.5rem;
  flex-direction: column;
  gap: 0;
  transform: translateX(110%);
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  box-shadow: -20px 0 70px rgba(0,0,0,0.16), -1px 0 0 rgba(139,37,0,0.3);
  overflow-y: auto;
}
.mobile-menu.active { transform: translateX(0); }

/* Sidebar top bar */
.sidebar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(74, 26, 8, 0.07);
}
.sidebar-brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.sidebar-brand em { font-style: normal; color: var(--rose); }
.sidebar-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(74, 26, 8, 0.12);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.22s ease;
  color: var(--dark);
  flex-shrink: 0;
}
.sidebar-close:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  transform: rotate(90deg);
}
.sidebar-close svg { pointer-events: none; }

/* ══════════════════════════════════════════
   SIDEBAR NAV — redesign centré & élégant
══════════════════════════════════════════ */

/* Séparateur décoratif au-dessus du nav */
.mobile-menu .nav-menu {
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  position: relative;
  /* Ligne dégradé en haut du bloc nav */
  padding-top: 1.5rem;
}
.mobile-menu .nav-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--rose));
}

/* Items — plus de border-bottom grisé */
.mobile-menu .nav-menu li {
  border-bottom: none;
  list-style: none;
}

/* Liens — centrés, bien lisibles */
.mobile-menu .nav-menu a {
  color: rgba(74, 26, 8, 0.65);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem 1.25rem;
  border-radius: 10px;
  transition: background 0.22s ease, color 0.22s ease, transform 0.2s ease;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Supprimer l'underline animée du desktop */
.mobile-menu .nav-menu a::after { display: none; }

/* Indicateur latéral (barre rose à gauche au hover) */
.mobile-menu .nav-menu a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 2px;
  background: var(--teal);
  transition: transform 0.2s ease;
}

/* HOVER — fond teal doux + texte teal + indicateur */
.mobile-menu .nav-menu a:hover {
  color: var(--teal);
  background: rgba(255, 107, 0, 0.10);
  transform: translateX(4px);
  padding-left: 1.25rem; /* reset ancien padding-left: 10px */
}
.mobile-menu .nav-menu a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* Item actif (page courante) */
.mobile-menu .nav-menu .current-menu-item > a,
.mobile-menu .nav-menu .current_page_item > a,
.mobile-menu .nav-menu .current-menu-ancestor > a {
  color: var(--teal);
  background: rgba(255, 107, 0, 0.10);
  font-weight: 700;
}
.mobile-menu .nav-menu .current-menu-item > a::before,
.mobile-menu .nav-menu .current_page_item > a::before {
  transform: translateY(-50%) scaleY(1);
  background: var(--rose);
}

/* Sidebar CTA */
.sidebar-cta {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 107, 0, 0.15);
}
.sidebar-cta .btn { width: 100%; justify-content: center; }

/* ====================================
   BUTTONS
==================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.35s ease,
              background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
  text-decoration: none;
  font-family: var(--sans);
  will-change: transform;
}
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  background: var(--grad);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(255,107,0,0.35);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Shimmer sweep on hover */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.35) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0s;
}
.btn-primary:hover::after {
  transform: translateX(120%);
  transition: transform 0.55s ease;
}
.btn-primary { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.5s; }
.btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 40px rgba(255,107,0,0.5), 0 0 60px rgba(255,107,0,0.15); color: var(--white); filter: brightness(1.08); }
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.35);
  color: var(--white);
  background: transparent;
  backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); color: var(--white); }
.btn-outline-dark {
  border: 1.5px solid var(--dark);
  color: var(--dark);
  background: transparent;
}
.btn-outline-dark:hover { background: var(--dark); color: var(--white); }

/* Eyebrow tag */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal-dk);
  margin-bottom: 1rem;
}
/* Gradient pulse dot */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  flex-shrink: 0;
  animation: eyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255,107,0,0.6); transform: scale(1); }
  50%       { box-shadow: 0 0 0 5px rgba(255,107,0,0);   transform: scale(1.15); }
}
.eyebrow-dark {
  color: var(--teal);
}

/* Section header */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dark);
}
.section-title em {
  font-style: italic;
  color: var(--rose-dk);
  padding-right: 0.08em;  /* Playfair Display italic glyph overshoot — empêche le clipping */
  display: inline-block;   /* nécessaire pour que le padding s'applique */
}
.section-title-white {
  color: var(--white);
}
.section-sub {
  color: var(--gray);
  font-size: 1rem;
  margin-top: 0.75rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.section-sub-white {
  color: rgba(255,255,255,0.55);
}

/* ====================================
   HERO — DARK SECTION
==================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
  padding: 120px var(--pad) 80px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,140,51,0.2) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(255,140,51,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #4A1A08 0%, #6B1A0A 50%, #8B2500 100%);
}

#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  border: 1px solid rgba(255,107,0,0.4);
  color: var(--rose);
  padding: 0.4rem 1.2rem;
  border-radius: 50px;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease 0.3s both;
}

.hero-title {
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.hero-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.08em;  /* Playfair Display italic glyph overshoot */
  display: inline-block;
}

/* Line reveal animation */
.hero-line { overflow: hidden; padding-bottom: 0.18em; /* room for descenders (g, p, y) */ }
.hero-line .inner {
  display: block;
  opacity: 0;
  transform: translateY(100%);
}
.hero-line .inner.revealed {
  animation: revealLine 0.65s cubic-bezier(0.33,1,0.68,1) forwards;
}
.hero-line:nth-child(1) .inner { animation-delay: 0.4s; }
.hero-line:nth-child(2) .inner { animation-delay: 0.55s; }
.hero-line:nth-child(3) .inner { animation-delay: 0.7s; }

.hero-subtitle {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2.5rem;
  animation: fadeUp 0.6s ease 0.9s both;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.6s ease 1.05s both;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: fadeUp 0.6s ease 1.2s both;
}
.metric { text-align: center; }
.metric-value {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.metric-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 0.25rem;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.35);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: bounce 2s ease-in-out infinite;
}
.scroll-line {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3));
}

/* ====================================
   SECTION WAVE SEPARATORS (dark ↔ cream)
==================================== */
/* Vague en bas du hero (dark → cream) */
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  background: var(--cream);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 3;
  pointer-events: none;
}
/* Vague en bas du catalogue (green → cream) */
.catalogue {
  position: relative;
}
.catalogue::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 55px;
  background: #ffffff;
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 3;
  pointer-events: none;
}
/* Vague en bas de la newsletter (gradient → cream) */
.newsletter-section::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 55px;
  background: var(--cream);
  clip-path: ellipse(60% 100% at 50% 100%);
  z-index: 3;
  pointer-events: none;
}

/* ====================================
   SERVICES — CREAM SECTION (LIGHT)
==================================== */
/* ====================================
   SERVICES — Image de fond + Carousel 3D Glassmorphisme
==================================== */
.services {
  position: relative;
  padding: clamp(80px,12vh,140px) var(--pad);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ── Image d'arrière-plan ── */
.svc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* ── Overlay sombre — warm brown ── */
.svc-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(30,12,4,0.72) 0%,
      rgba(40,16,6,0.60) 40%,
      rgba(50,20,8,0.68) 100%);
}

.services > .container { position: relative; z-index: 2; width: 100%; }
.services .section-header { text-align: center; margin-bottom: 2rem; }

/* ── Eyebrow light ── */
.eyebrow-light {
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* ── Titre gradient animé avec glow ── */
.svc-title-glow {
  background: linear-gradient(90deg, #FF6B00, #FF6B00, #8B2500, #FF6B00);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: svcTitleShift 6s ease infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(255,107,0,0.3));
}
.svc-title-glow em {
  -webkit-text-fill-color: transparent;
}
@keyframes svcTitleShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Particules flottantes ── */
.svc-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.svc-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,107,0,0.5);
  box-shadow: 0 0 8px rgba(255,107,0,0.4);
  animation: svcFloat 8s ease-in-out infinite;
}
.svc-particle:nth-child(1)  { left: 10%; top: 20%; animation-delay: 0s;    animation-duration: 7s;  background: rgba(139,37,0,0.5); box-shadow: 0 0 8px rgba(139,37,0,0.4); }
.svc-particle:nth-child(2)  { left: 25%; top: 60%; animation-delay: 1.2s;  animation-duration: 9s; }
.svc-particle:nth-child(3)  { left: 45%; top: 15%; animation-delay: 2.5s;  animation-duration: 6s;  background: rgba(255,140,51,0.5); box-shadow: 0 0 8px rgba(255,140,51,0.4); width: 3px; height: 3px; }
.svc-particle:nth-child(4)  { left: 65%; top: 75%; animation-delay: 0.8s;  animation-duration: 10s; background: rgba(139,37,0,0.4); box-shadow: 0 0 6px rgba(139,37,0,0.3); }
.svc-particle:nth-child(5)  { left: 80%; top: 30%; animation-delay: 3s;    animation-duration: 8s; }
.svc-particle:nth-child(6)  { left: 90%; top: 55%; animation-delay: 1.5s;  animation-duration: 7s;  background: rgba(255,140,51,0.4); }
.svc-particle:nth-child(7)  { left: 15%; top: 80%; animation-delay: 4s;    animation-duration: 11s; width: 5px; height: 5px; }
.svc-particle:nth-child(8)  { left: 55%; top: 45%; animation-delay: 2s;    animation-duration: 9s;  background: rgba(139,37,0,0.5); width: 3px; height: 3px; }
@keyframes svcFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.5; }
  25%      { transform: translateY(-40px) translateX(20px) scale(1.3); opacity: 0.9; }
  50%      { transform: translateY(-15px) translateX(-15px) scale(0.8); opacity: 0.4; }
  75%      { transform: translateY(-55px) translateX(10px) scale(1.1); opacity: 0.8; }
}

/* ── Conteneur 3D — perspective ── */
.svc-carousel-wrap {
  position: relative;
  margin-top: 2rem;
  padding: 5rem 0 6rem;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  overflow: visible;
}
.svc-carousel-wrap.is-dragging { cursor: grabbing; }

/* ── Anneau circulaire 3D ── */
.svc-carousel {
  position: relative;
  width: 280px;
  height: 370px;
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform;
  /* L'auto-rotation est gérée en JS */
}

/* ── Reflet sol ── */
.svc-carousel-reflection {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 120px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.04) 40%,
    transparent 70%);
  pointer-events: none;
  filter: blur(10px);
}

/* ── Carte glassmorphisme — Ultra Pro ── */
.svc-card {
  position: absolute;
  width: 280px;
  padding: 2rem 1.6rem 1.8rem;
  top: 0; left: 0;
  /* Vrai glassmorphisme — verre transparent */
  background: linear-gradient(145deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.10) 100%);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.35);
  border-left-color: rgba(255,255,255,0.22);
  border-radius: 22px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.25),
    0 2px 6px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 0.5s cubic-bezier(0.23,1,0.32,1),
              border-color 0.5s ease,
              background 0.5s ease;
  overflow: hidden;
}

/* Carte active (face à la caméra) — glow orange subtil */
.svc-card.is-front {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,240,230,0.10) 50%,
    rgba(255,255,255,0.14) 100%);
  border-color: rgba(255,255,255,0.30);
  border-top-color: rgba(255,255,255,0.50);
  box-shadow:
    0 12px 48px rgba(0,0,0,0.30),
    0 0 40px rgba(255,107,0,0.08),
    0 2px 6px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
}

/* Shimmer cinématique — sweep lumineux */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.05) 40%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.05) 60%,
    transparent 80%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.svc-card.shimmer-go::before {
  animation: svcShimmer 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
@keyframes svcShimmer {
  0%   { left: -80%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}

/* Reflet supérieur — highlight verre réaliste */
.svc-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.05) 30%,
    transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* ── Numéro carte ── */
.svc-card-num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  font-family: var(--ff-heading, 'Playfair Display', serif);
  letter-spacing: 0.05em;
  z-index: 3;
}

/* ── Icône — cercle glass subtil ── */
.svc-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,107,0,0.15);
  border: 1px solid rgba(255,107,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  position: relative;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.svc-card-icon svg {
  width: 28px; height: 28px;
  position: relative;
  z-index: 1;
  stroke-width: 1.8;
}
.svc-card-icon.has-img {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.svc-card-icon.has-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Textes carte — haute lisibilité ── */
.svc-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.2);
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 3;
  letter-spacing: -0.01em;
}
.svc-card p {
  color: rgba(255,255,255,0.88);
  font-size: 0.84rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.svc-card a {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FF8C33;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: color 0.25s ease, gap 0.3s ease;
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.svc-card a:hover { color: #fff; gap: 0.7rem; }
.svc-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.svc-card a:hover .svc-arrow { transform: translateX(4px); }

/* ── Indicateur grab ── */
.svc-grab-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
  margin-top: 0.5rem;
  text-align: center;
  animation: svcHintPulse 3s ease-in-out infinite;
  transition: opacity 0.5s ease;
}
.svc-grab-hint.is-hidden { opacity: 0; pointer-events: none; }
.svc-grab-hint svg { opacity: 0.5; }
@keyframes svcHintPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .svc-carousel-wrap { perspective: 900px; padding: 4rem 0 5rem; }
  .svc-card { width: 250px; padding: 1.6rem 1.3rem; }
  .svc-carousel { width: 250px; height: 340px; }
  .svc-carousel-reflection { width: 400px; }
}
@media (max-width: 480px) {
  .svc-carousel-wrap { perspective: 700px; padding: 3rem 0 4rem; }
  .svc-card { width: 230px; padding: 1.4rem 1.1rem; }
  .svc-carousel { width: 230px; height: 310px; }
  .services { min-height: auto; padding: 60px var(--pad); }
  .svc-carousel-reflection { width: 320px; height: 80px; }
  .svc-particles { display: none; }
}

/* ====================================
   CATALOGUE / PRODUCTS — DARK SECTION
==================================== */
.catalogue {
  background: var(--green-section);
  padding: var(--section-y) var(--pad);
  color: var(--dark);
}
.catalogue .section-header .eyebrow { color: var(--teal-dk); }
.catalogue .section-title { color: var(--dark); }
.catalogue .section-header p { color: rgba(74,26,8,0.65); }

.woocommerce-loop,
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: var(--container);
  margin: 3rem auto 0;
}

.product-card,
.woocommerce ul.products li.product {
  background: #ffffff;
  border: 1px solid rgba(139,37,0,0.18);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  cursor: pointer;
}
.product-card:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-8px);
  border-color: rgba(139,37,0,0.5);
  box-shadow: 0 20px 50px rgba(139,37,0,0.15), 0 8px 24px rgba(0,0,0,0.06);
}

.product-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-img img,
.woocommerce ul.products li.product:hover .product-img img { transform: scale(1.1); }

.product-img-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-img-placeholder,
.woocommerce ul.products li.product:hover .product-img-placeholder { transform: scale(1.06); }
.product-img-placeholder svg {
  width: 80px; height: 80px;
  opacity: 0.25;
}
.p1 .product-img-placeholder { background: linear-gradient(135deg, rgba(139,37,0,0.14), rgba(139,37,0,0.04)); }
.p2 .product-img-placeholder { background: linear-gradient(135deg, rgba(255,107,0,0.14), rgba(255,107,0,0.04)); }
.p3 .product-img-placeholder { background: linear-gradient(135deg, rgba(139,37,0,0.08), rgba(255,107,0,0.08)); }
.p4 .product-img-placeholder { background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(139,37,0,0.08)); }

.product-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--grad);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.product-info { padding: 1.4rem; }
.product-cat {
  color: var(--teal);
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.product-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--dark);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.product-desc {
  color: rgba(74,26,8,0.55);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.btn-add {
  background: var(--grad);
  color: var(--white);
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-add:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(255,107,0,0.4); }

/* ====================================
   STATS BAND — GRADIENT + GLASS CARDS
==================================== */
.stats-band {
  position: relative;
  background: linear-gradient(135deg, #CC4A00 0%, #E55A00 100%);
  padding: 5.5rem var(--pad);
  color: var(--white);
  overflow: hidden;
}
/* --- Stats band with background image --- */
.stats-has-bg {
  padding: 6rem var(--pad);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.stats-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.stats-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(194,64,122,0.72) 0%,
      rgba(26,143,134,0.72) 100%);
  mix-blend-mode: normal;
}
/* Subtile texture lumineuse */
.stats-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 80% at 15% 50%, rgba(255,255,255,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 50%, rgba(0,0,0,0.08) 0%, transparent 55%);
  pointer-events: none;
}

.stats-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.stat-item {
  text-align: center;
  padding: 2.5rem 1.5rem;
  position: relative;
  transition: background 0.3s;
}
/* Séparateur vertical entre items */
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
.stat-item:hover {
  background: rgba(255,255,255,0.06);
}
.stat-number {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ====================================
   BEFORE / AFTER — CREAM SECTION
==================================== */
.before-after {
  background: #ffffff;
  padding: var(--section-y) var(--pad);
  border-top: 1px solid rgba(139,37,0,0.12);
}
.before-after .section-header .eyebrow { color: var(--teal-dk); }

.before-after-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}

.before-after-slider {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  aspect-ratio: 4/3;
  cursor: ew-resize;
  user-select: none;
  /* APRÈS: modern pharmacy — dark/teal */
  background:
    radial-gradient(ellipse 80% 30% at 50% 12%, rgba(139,37,0,0.18) 0%, transparent 70%),
    radial-gradient(circle at 30% 70%, rgba(139,37,0,0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(255,107,0,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #4A1A08 0%, #6B1A0A 55%, #8B2500 100%);
}
.before-after-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Pure CSS before/after illustrations — no photos needed */
/* APRÈS (modern pharmacy) lives directly on the slider base */

.ba-before {
  position: absolute;
  top: 0; left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  /* AVANT (old pharmacy) */
  background:
    radial-gradient(ellipse 80% 25% at 50% 8%, rgba(245,230,128,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #c8b89a 0%, #b5a285 55%, #a89070 100%);
}
.ba-before img {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba-handle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: rgba(255,255,255,0.7);
  cursor: ew-resize;
  z-index: 10;
  transition: background 0.3s;
}
.before-after-slider:hover .ba-handle { background: var(--white); }

/* Cercle extérieur (halo) */
.ba-handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.before-after-slider:hover .ba-handle::before { transform: translate(-50%, -50%) scale(1.1); }

/* Bouton gradient central + chevrons */
.ba-handle::after {
  content: '‹  ›';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: var(--grad);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 900;
  color: white;
  letter-spacing: -2px;
  box-shadow: 0 4px 20px rgba(255,107,0,0.5);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.before-after-slider:hover .ba-handle::after {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 28px rgba(255,107,0,0.65);
}
.ba-label {
  position: absolute;
  bottom: 1.5rem;
  background: rgba(0,0,0,0.5);
  color: var(--white);
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}
.ba-label-before { left: 1.5rem; }
.ba-label-after  { right: 1.5rem; }

.before-after-content h3 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
  color: var(--dark);
}
.before-after-content p {
  color: var(--gray);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.before-after-features {
  list-style: none;
  margin-bottom: 2rem;
}
.before-after-features li {
  padding: 0.5rem 0;
  color: var(--dark);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.before-after-features li::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--grad);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ====================================
   MÉTHODE — CREAM SECTION (LIGHT)
==================================== */
.methode {
  background: #f0f7f4;
  padding: var(--section-y) var(--pad);
  border-top: 1px solid rgba(139,37,0,0.12);
  position: relative;
  overflow: hidden;
}
/* --- Methode with background image --- */
.methode-has-bg {
  background: transparent;
  min-height: 700px;
}
.methode-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.methode-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
.methode-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(240,247,244,0.75) 0%,
      rgba(240,247,244,0.55) 30%,
      rgba(240,247,244,0.20) 55%,
      rgba(240,247,244,0.05) 75%,
      rgba(240,247,244,0.0) 100%);
}
.methode-has-bg .section-floaters {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.methode-has-bg .section-header,
.methode-has-bg .process-grid {
  position: relative;
  z-index: 2;
}
/* Left-align steps, title card bottom-right */
.methode-has-bg {
  position: relative;
}
.methode-has-bg > .container {
  position: static;
  z-index: 2;
  margin-left: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.methode-has-bg .section-header {
  position: absolute;
  bottom: 3rem;
  right: var(--pad, 2rem);
  text-align: left;
  max-width: 480px;
  margin: 0;
  /* Glassmorphic title card */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.18) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 24px;
  padding: 2rem 2.2rem 1.8rem;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.5);
  animation: glassStepReveal 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
.methode-has-bg .section-header .section-title {
  text-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.methode-has-bg .section-header p {
  color: rgba(74,26,8,0.7);
}
.methode-has-bg .process-grid {
  max-width: 540px;
  margin-left: 0;
  margin-right: auto;
  gap: 1rem;
  margin-top: 0;
}
.methode-has-bg .methode-step {
  padding: 1.3rem 1.5rem;
}
.methode .section-header .eyebrow { color: var(--rose-dk); }

/* ── Process grid: smooth auto-scroll carousel ──────────────── */
.process-grid {
  max-width: 700px;
  height: 420px;
  margin: 3rem auto 0;
  padding: clamp(16px, 2.5vw, 32px);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: rgba(240,247,244,0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(139,37,0,0.12);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Hide scrollbar completely */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Grab cursor for drag-to-scroll */
  cursor: grab;
}
.process-grid::-webkit-scrollbar { display: none; }
.process-grid.is-grabbing {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Glassmorphic Steps inside scroll carousel ── */
.methode-step {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  position: relative;
  flex-shrink: 0;
  /* Glassmorphism on light bg */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.75) 0%,
    rgba(255,255,255,0.45) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  transition:
    transform 0.45s cubic-bezier(0.23,1,0.32,1),
    box-shadow 0.4s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    opacity 0.4s ease;
  will-change: transform, box-shadow, opacity;
}
.methode-step:nth-child(1) { animation-delay: 0.05s; }
.methode-step:nth-child(2) { animation-delay: 0.15s; }
.methode-step:nth-child(3) { animation-delay: 0.25s; }
.methode-step:nth-child(4) { animation-delay: 0.35s; }
.methode-step:nth-child(5) { animation-delay: 0.45s; }

@keyframes glassStepReveal {
  0% {
    opacity: 0;
    transform: perspective(800px) rotateX(12deg) rotateY(-8deg) translateZ(-40px) translateY(30px);
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotateX(0) rotateY(0) translateZ(0) translateY(0);
  }
}

/* Shine reflection sweep */
.methode-step::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.3) 45%,
    rgba(255,255,255,0.08) 55%,
    transparent 60%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* Rainbow border glow on hover */
.methode-step::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: linear-gradient(135deg, #FF6B00, #8B2500, #FF6B00, #FF6B00);
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: borderGlowShift 4s ease infinite;
}
@keyframes borderGlowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.methode-step:hover {
  background: linear-gradient(135deg, var(--rose) 0%, #8B2500 50%, var(--teal) 100%);
  border-color: transparent;
  transform: scale(1.02);
  box-shadow: 0 12px 36px rgba(255,107,0,0.25), 0 4px 16px rgba(0,0,0,0.1);
}
/* ── Texte blanc au survol pour lisibilité ── */
.methode-step:hover .methode-step-content h4 { color: #fff; }
.methode-step:hover .methode-step-content p { color: rgba(255,255,255,0.85); }
.methode-step:hover::before {
  opacity: 1;
  animation: shineSwipe 0.7s ease forwards;
}
.methode-step:hover::after {
  opacity: 1;
}

@keyframes shineSwipe {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Number badge — floating 3D orb ── */
.methode-step-num {
  width: 50px; height: 50px;
  min-width: 50px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  position: relative;
  z-index: 2;
  box-shadow:
    0 4px 15px rgba(255,140,51,0.35),
    0 2px 6px rgba(255,140,51,0.20),
    inset 0 2px 4px rgba(255,255,255,0.25);
  animation: numFloat 3s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
}
.methode-step:hover .methode-step-num {
  transform: scale(1.12) translateY(-3px);
  box-shadow:
    0 8px 25px rgba(255,140,51,0.45),
    0 4px 12px rgba(255,140,51,0.25),
    inset 0 2px 4px rgba(255,255,255,0.3);
}
@keyframes numFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* JS-triggered reveal */
.methode-step.glass-visible {
  animation: glassStepReveal 0.8s cubic-bezier(0.22,1,0.36,1) both;
}

.methode-step-content {
  position: relative;
  z-index: 2;
}
.methode-step-content h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: var(--dark);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.methode-step-content p {
  color: var(--gray);
  font-size: 0.87rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* ── Methode Responsive ── */
@media (max-width: 1200px) {
  .methode-has-bg .process-grid {
    max-width: 460px;
  }
  .methode-has-bg .section-header {
    max-width: 420px;
    bottom: 2.5rem;
    right: var(--pad, 60px);
    padding: 1.6rem 1.8rem 1.4rem;
  }
}

@media (max-width: 1024px) {
  .methode-has-bg {
    min-height: auto;
    padding-bottom: 2rem;
  }
  .methode-has-bg > .container {
    padding-left: var(--pad, 40px);
    padding-right: var(--pad, 40px);
  }
  /* Stack: image on top, title, then steps below */
  .methode-has-bg .section-header {
    position: relative;
    bottom: auto;
    right: auto;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  .methode-has-bg .process-grid {
    max-width: 100%;
    gap: 1rem;
  }
  /* Overlay: full coverage but lighter to show image peeking through */
  .methode-bg-overlay {
    background:
      linear-gradient(180deg,
        rgba(240,247,244,0.3) 0%,
        rgba(240,247,244,0.75) 25%,
        rgba(240,247,244,0.88) 50%,
        rgba(240,247,244,0.92) 100%) !important;
  }
  .methode-bg-img {
    object-position: center 20% !important;
  }
}

@media (max-width: 768px) {
  .methode-has-bg {
    padding-top: 280px;
    padding-bottom: 2rem;
  }
  .methode-has-bg .process-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .methode-has-bg .methode-step {
    padding: 1.1rem 1.2rem;
  }
  .methode-has-bg .section-header {
    padding: 1.4rem 1.6rem 1.2rem;
    border-radius: 18px;
  }
  .methode-bg-overlay {
    background:
      linear-gradient(180deg,
        rgba(240,247,244,0.0) 0%,
        rgba(240,247,244,0.40) 15%,
        rgba(240,247,244,0.80) 30%,
        rgba(240,247,244,0.94) 45%,
        rgba(240,247,244,0.97) 100%) !important;
  }
  .methode-step:hover {
    transform: scale(1.01);
  }
}

@media (max-width: 480px) {
  .methode-has-bg {
    padding-top: 220px;
  }
  .methode-has-bg .section-header {
    padding: 1.2rem 1.2rem 1rem;
  }
  .methode-has-bg .section-header .section-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }
  .methode-step-num {
    width: 40px; height: 40px; min-width: 40px;
    font-size: 0.9rem;
  }
}

/* ====================================
   PORTFOLIO — CREAM SECTION
==================================== */
.portfolio {
  background: #ffffff;
  padding: var(--section-y) var(--pad);
  border-top: 1px solid rgba(139,37,0,0.12);
}
.portfolio .section-header .eyebrow { color: var(--teal-dk); }

/* ── Modern Portfolio Carousel ── */
.pf-carousel-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

/* Label above (tag name) */
.pf-carousel-label {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 1.4rem;
  min-height: 1.2em;
  transition: opacity 0.3s ease;
  padding: 0.35rem 1.2rem;
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(139,37,0,0.08);
  border-radius: 20px;
  border: 1px solid rgba(139,37,0,0.15);
}

/* Stage — contains arrows + track */
.pf-carousel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Arrows */
.pf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,26,8,0.12);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dark);
  transition: all 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.pf-arrow:hover {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.pf-arrow-left { left: -22px; }
.pf-arrow-right { right: -22px; }

/* Track — horizontal strip, centered */
.pf-carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 550px;
  position: relative;
  perspective: 1200px;
}

/* Individual slide */
.pf-slide {
  position: absolute;
  width: 700px;
  height: 520px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--dark);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7) translateX(0);
}
.pf-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pf-slide:hover img { transform: scale(1.05); }

/* Badge "Visite 3D" sur les slides cliquables */
.pf-tour-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--fuchsia, #FF6B00);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(255,107,0,0.4);
  z-index: 10;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.pf-slide.is-active .pf-tour-badge,
.pf-slide.pf-active .pf-tour-badge {
  opacity: 1;
  transform: translateY(0);
}
.pf-slide.has-tour.is-active,
.pf-slide.has-tour.pf-active { cursor: pointer; }
.pf-slide.has-tour.is-active:hover .pf-tour-badge,
.pf-slide.has-tour.pf-active:hover .pf-tour-badge {
  background: var(--rose, #E55A00);
  box-shadow: 0 4px 20px rgba(194,24,91,0.5);
}

.pf-slide-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #4A1A08 0%, #6B1A0A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Active (center) card */
.pf-slide.pf-active,
.pf-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 5;
  transform: scale(1) translateX(0) rotateY(0);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* Previous (left) card */
.pf-slide.pf-prev {
  opacity: 0.55;
  pointer-events: auto;
  z-index: 3;
  transform: scale(0.62) translateX(-560px) rotateY(14deg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

/* Next (right) card */
.pf-slide.pf-next {
  opacity: 0.55;
  pointer-events: auto;
  z-index: 3;
  transform: scale(0.62) translateX(560px) rotateY(-14deg);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

/* Far left */
.pf-slide.pf-far-prev {
  opacity: 0.15;
  z-index: 1;
  transform: scale(0.45) translateX(-880px) rotateY(22deg);
}

/* Far right */
.pf-slide.pf-far-next {
  opacity: 0.15;
  z-index: 1;
  transform: scale(0.45) translateX(880px) rotateY(-22deg);
}

/* Caption below active card */
.pf-carousel-caption {
  text-align: center;
  margin-top: 1.8rem;
  min-height: 3.2em;
}
.pf-carousel-caption .pf-cap-title {
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--dark);
  margin-bottom: 0.3rem;
  background: linear-gradient(135deg, var(--dark) 0%, var(--teal-dk) 60%, var(--rose) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.pf-carousel-caption .pf-cap-sub {
  font-size: 0.75rem;
  color: var(--gray);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
}

/* Dots */
.pf-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.pf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(74,26,8,0.15);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}
.pf-dot.active {
  background: var(--rose);
  width: 24px;
  border-radius: 4px;
}

/* ── CTA buttons inside slides ── */
.pf-slide-cta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px 22px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.50) 50%,
    transparent 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 12;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s;
  pointer-events: none;
}
.pf-slide.is-active .pf-slide-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 3D Tour button — with pulse */
.pf-btn-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 50px;
  background: linear-gradient(135deg, #FF6B00, #E55A00);
  color: #fff;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(255,107,0,0.45);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  animation: pf-pulse-glow 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
.pf-btn-3d:hover {
  background: linear-gradient(135deg, #FF8C33, #FF6B00);
  box-shadow: 0 6px 24px rgba(255,107,0,0.6);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

/* Portfolio button — outline glass */
.pf-btn-portfolio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 50px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
  text-decoration: none;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  position: relative;
  z-index: 2;
}
.pf-btn-portfolio:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

/* Pulse glow animation for Visite 3D button */
@keyframes pf-pulse-glow {
  0%, 65% {
    box-shadow: 0 4px 18px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0.5);
  }
  75% {
    box-shadow: 0 4px 18px rgba(255,107,0,0.45), 0 0 0 10px rgba(255,107,0,0.25);
  }
  85% {
    box-shadow: 0 4px 18px rgba(255,107,0,0.45), 0 0 0 18px rgba(255,107,0,0);
  }
  100% {
    box-shadow: 0 4px 18px rgba(255,107,0,0.45), 0 0 0 0 rgba(255,107,0,0);
  }
}

/* ── Portfolio carousel responsive ── */
@media (max-width: 900px) {
  .pf-slide { width: 440px; height: 360px; }
  .pf-slide.pf-prev  { transform: scale(0.65) translateX(-360px) rotateY(10deg); }
  .pf-slide.pf-next  { transform: scale(0.65) translateX(360px) rotateY(-10deg); }
  .pf-slide.pf-far-prev { transform: scale(0.45) translateX(-560px) rotateY(18deg); }
  .pf-slide.pf-far-next { transform: scale(0.45) translateX(560px) rotateY(-18deg); }
  .pf-carousel-track { height: 380px; }
  .pf-arrow-left { left: 4px; }
  .pf-arrow-right { right: 4px; }
  .pf-carousel-caption .pf-cap-title { font-size: 1.35rem; }
  .pf-slide-cta { padding: 18px 14px 16px; gap: 10px; }
  .pf-btn-3d, .pf-btn-portfolio { font-size: 0.75rem; padding: 8px 16px; }
}
@media (max-width: 600px) {
  .pf-slide { width: 300px; height: 260px; }
  .pf-slide.pf-prev  { transform: scale(0.62) translateX(-240px) rotateY(8deg); }
  .pf-slide.pf-next  { transform: scale(0.62) translateX(240px) rotateY(-8deg); }
  .pf-slide.pf-far-prev, .pf-slide.pf-far-next { opacity: 0; }
  .pf-carousel-track { height: 280px; }
  .pf-arrow { width: 36px; height: 36px; }
  .pf-arrow-left { left: 2px; }
  .pf-arrow-right { right: 2px; }
  .pf-carousel-caption .pf-cap-title { font-size: 1.15rem; }
  .pf-carousel-caption .pf-cap-sub { font-size: 0.65rem; letter-spacing: 1.5px; }
  .pf-slide-cta { padding: 12px 10px 12px; gap: 8px; flex-direction: column; }
  .pf-btn-3d, .pf-btn-portfolio { font-size: 0.7rem; padding: 7px 14px; width: 100%; justify-content: center; }
}
/* (old portfolio overlay removed — now using carousel) */

/* ====================================
   TESTIMONIALS — CREAM SECTION
==================================== */
.testimonials {
  background: #f0f7f4;
  padding: var(--section-y) 0;
  border-top: 1px solid rgba(139,37,0,0.12);
  overflow: hidden;
}
.testimonials .container { padding-bottom: 0; }
.testimonials .section-header { padding: 0 var(--pad); margin-bottom: 3rem; }
.testimonials .section-header .eyebrow { color: var(--rose-dk); }

.testimonials-marquee {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 30s linear infinite;
  padding: 0.5rem 0;
}
.testimonials-marquee:hover { animation-play-state: paused; }

.testimonial-card {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  width: 320px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
  overflow: hidden;
}
/* Grande guillemet décorative en arrière-plan */
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -0.2rem;
  right: 1.25rem;
  font-family: var(--serif);
  font-size: 6rem;
  line-height: 1;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.3s;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 55px rgba(255,107,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  border-color: rgba(255,107,0,0.15);
}
.testimonial-card:hover::before { opacity: 0.22; }

/* Étoiles SVG (plus propres que les caractères ★) */
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 0.85rem;
}
.testimonial-stars svg {
  width: 14px; height: 14px;
  fill: var(--rose);
}
.testimonial-text {
  color: var(--dark);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.testimonial-info h4 { font-size: 0.9rem; color: var(--dark); font-family: var(--sans); }
.testimonial-info p  { font-size: 0.78rem; color: var(--gray); margin: 0; }

/* ====================================
   NEWSLETTER — GRADIENT ACCENT
==================================== */
.newsletter-section {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vw, 110px) var(--pad);
  background: linear-gradient(135deg, #CC4A00 0%, #E55A00 100%);
}
/* Subtle texture overlay */
.newsletter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(0,0,0,0.1) 0%, transparent 55%);
  pointer-events: none;
}

.newsletter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Icon pill */
.newsletter-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: floatBobble 7s ease-in-out infinite;
}

/* Text block */
.newsletter-text { min-width: 0; }
.newsletter-title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.newsletter-title em {
  font-style: italic;
  color: rgba(255,255,255,0.85);
}
.newsletter-sub {
  color: rgba(255,255,255,0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Form */
.newsletter-form { flex-shrink: 0; min-width: 320px; }
.newsletter-field {
  display: flex;
  gap: 0;
  border-radius: 50px;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.newsletter-field:focus-within {
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.nl-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.9rem 1.25rem;
  font-size: 0.92rem;
  color: var(--white);
  font-family: var(--sans);
}
.nl-input::placeholder { color: rgba(255,255,255,0.55); }
.nl-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.4rem;
  background: var(--white);
  color: var(--rose-dk);
  border: none;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  margin: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: var(--sans);
}
.nl-btn:hover { background: var(--dark); color: var(--white); transform: translateX(3px); }
.nl-btn:disabled { opacity: 0.6; pointer-events: none; }
.nl-btn.success { background: #22c55e; color: var(--white); }

/* Privacy note */
.nl-privacy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
  margin-top: 0.65rem;
  margin-bottom: 0;
  padding-left: 0.25rem;
}
.nl-privacy svg { flex-shrink: 0; opacity: 0.7; }

/* Feedback message */
.nl-message {
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.5rem;
  padding-left: 0.25rem;
  min-height: 1.2rem;
}
.nl-message.ok  { color: rgba(255,255,255,0.9); }
.nl-message.err { color: #fca5a5; }

/* Responsive stacking */
@media (max-width: 900px) {
  .newsletter-inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .newsletter-form {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 560px) {
  .newsletter-inner { grid-template-columns: 1fr; text-align: center; }
  .newsletter-icon  { margin: 0 auto; }
  .nl-privacy       { justify-content: center; }
  .newsletter-field { flex-direction: column; border-radius: 16px; }
  .nl-btn           { width: 100%; justify-content: center; margin: 0 4px 4px; border-radius: 12px; }
  .nl-input         { border-bottom: 1px solid rgba(255,255,255,0.15); text-align: center; }
}

/* ====================================
   CTA — DARK SECTION
==================================== */
.cta-section {
  background: var(--green-section);
  padding: var(--section-y) var(--pad);
  border-top: 1px solid rgba(139,37,0,0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* --- CTA with background image --- */
.cta-has-bg {
  background: #0a0a1a;
  border-top: none;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.cta-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,26,0.55) 0%,
      rgba(10,10,26,0.70) 40%,
      rgba(10,10,26,0.85) 100%),
    linear-gradient(90deg,
      rgba(255,140,51,0.15) 0%,
      rgba(255,107,0,0.10) 50%,
      rgba(139,37,0,0.10) 100%);
}
.cta-section:not(.cta-has-bg)::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(139,37,0,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 50%, rgba(255,107,0,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-has-bg .cta-inner h2 {
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  color: #fff;
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.cta-has-bg .cta-inner h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #FF6B00, #8B2500, #FF6B00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-has-bg .eyebrow-dark {
  color: #FF6B00;
  text-shadow: 0 0 20px rgba(139,37,0,0.4);
}
.cta-has-bg .cta-inner p {
  color: rgba(255,255,255,0.75);
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
/* Keep default styles for fallback */
.cta-section:not(.cta-has-bg) .cta-inner h2 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  color: var(--dark);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.cta-section:not(.cta-has-bg) .cta-inner h2 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-section:not(.cta-has-bg) .cta-inner p { color: rgba(74,26,8,0.65); font-size: 1rem; margin-bottom: 2.5rem; }

/* ====================================
   PAGE À PROPOS — REFONTE 3D
==================================== */

/* ─── ap-reveal (scroll reveal) ───
   État initial masqué — GSAP ou IntersectionObserver déclenche le reveal.
   Pas de transition CSS ici : GSAP anime directement les inline styles.
   La transition n'est ajoutée QUE quand IntersectionObserver active .ap-visible. */
.ap-reveal {
  opacity: 0;
  will-change: opacity, transform;
}
/* Fallback IO : transition appliquée seulement au moment de l'activation
   Easing: slide-up rapide → décélération douce (power4.out approximation) */
.ap-reveal.ap-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.25,1,0.5,1), transform 0.9s cubic-bezier(0.25,1,0.5,1);
}

/* ─── Hero ap ─── */
.ap-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px var(--pad) 100px;
  overflow: clip;
}
.ap-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(255,140,51,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 78% 72%, rgba(255,140,51,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(217,70,168,0.15) 0%, transparent 40%),
    linear-gradient(155deg, #6B1A0A 0%, #4A1A08 35%, #8B2500 70%, #6B1A0A 100%);
}
#about-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1; pointer-events: none; display: block;
}

/* 3D orbs */
.ap-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ap-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  will-change: transform;
}
.ap-orb--1 { width: 120px; height: 120px; top: 15%; left: 8%;  background: radial-gradient(circle, rgba(255,107,0,0.3) 0%, transparent 70%); animation: floatBobble 7s ease-in-out infinite; }
.ap-orb--2 { width: 200px; height: 200px; top: 60%; right: 5%; background: radial-gradient(circle, rgba(139,37,0,0.25) 0%, transparent 70%);  animation: floatBobble 9s ease-in-out 1.5s infinite; }
.ap-orb--3 { width: 80px;  height: 80px;  bottom: 20%; left: 22%; background: radial-gradient(circle, rgba(255,107,0,0.2) 0%, transparent 70%); animation: floatBobble 6s ease-in-out 2s infinite; }
.ap-orb--4 { width: 150px; height: 150px; top: 25%; right: 18%; background: radial-gradient(circle, rgba(139,37,0,0.2) 0%, transparent 70%);   animation: floatBobble 11s ease-in-out 0.5s infinite; }
.ap-orb--5 { width: 60px;  height: 60px;  top: 50%; left: 42%;  background: radial-gradient(circle, rgba(255,107,0,0.25) 0%, transparent 70%);  animation: floatBobble 8s ease-in-out 3s infinite; }

/* 3D rotating cubes */
.ap-cube {
  position: absolute;
  width: 40px; height: 40px;
  transform-style: preserve-3d;
}
.ap-cube--1 { top: 30%; left: 5%;  animation: cubeRotate 12s linear infinite; opacity: 0.18; }
.ap-cube--2 { bottom: 25%; right: 8%; animation: cubeRotate 16s linear 3s infinite reverse; opacity: 0.12; }
.ap-cube span {
  position: absolute; inset: 0;
  border: 1.5px solid rgba(255,107,0,0.6);
  border-radius: 4px;
}
.ap-cube span:nth-child(1) { transform: translateZ(20px); }
.ap-cube span:nth-child(2) { transform: rotateY(90deg) translateZ(20px); }
.ap-cube span:nth-child(3) { transform: rotateX(90deg) translateZ(20px); }
@keyframes cubeRotate {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(240deg) rotateZ(120deg); }
}

/* Floating rings */
.ap-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(139,37,0,0.2);
  pointer-events: none;
}
.ap-ring--1 { width: 300px; height: 300px; top: 8%; right: 2%;  animation: floatRingAnim 14s ease-in-out infinite; }
.ap-ring--2 { width: 180px; height: 180px; bottom: 10%; left: 3%; animation: floatRingAnim 10s ease-in-out 2s infinite reverse; border-color: rgba(255,107,0,0.15); }

.ap-hero-content {
  position: relative; z-index: 2;
  max-width: 860px;
  text-align: center;
}
.ap-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  animation: fadeUp 0.6s ease 0.3s both;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 10px var(--rose);
  animation: floatBobble 2s ease-in-out infinite;
}
.ap-hero-title {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 1.5rem;
}
.ap-hero-sub {
  color: rgba(255,255,255,0.6);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  animation: fadeUp 0.6s ease 0.9s both;
}

/* Hero inline stats */
.ap-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.6s ease 1.1s both;
}
.ap-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2.5rem;
}
.ap-hs-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}
.ap-hs-unit { font-size: 1.1rem; color: rgba(255,255,255,0.55); font-weight: 700; }
.ap-hs-label { font-size: 0.72rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.3rem; }
.ap-hs-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.12); }
.ap-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  animation: fadeUp 0.6s ease 1.25s both;
}
.ap-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}
.ap-scroll-hint:hover { color: var(--teal); }
.ap-scroll-hint svg { animation: bounce 1.8s ease-in-out infinite; }

/* ─── Story ─── */
.ap-story {
  position: relative;
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  overflow: clip;          /* clip (pas hidden) — hidden casse position:sticky sur .ap-story-left */
}
.ap-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.ap-story-left p { color: var(--gray); margin-bottom: 1rem; }
.ap-story-kpis {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(74,26,8,0.08);
}
.ap-kpi-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.ap-kpi-lbl { font-size: 0.75rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.5px; }

/* ──────────────────────────
   Timeline — layout propre
────────────────────────── */
.ap-timeline {
  position: relative;
  padding-left: 0;   /* le dot est IN-FLOW, pas absolu */
}

/* Rail de fond (toujours visible, très discret) */
.ap-tl-track {
  position: absolute;
  left: 17px;          /* centre du dot 36px = 18px − 1px (moitié du trait 2px) */
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: rgba(74,26,8,0.07);
  z-index: 0;
  overflow: hidden;
}
/* Remplissage animé piloté par la variable CSS --tl-progress */
.ap-tl-track::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--tl-progress, 0%);
  background: linear-gradient(180deg, #FF6B00 0%, #8B2500 100%);
  border-radius: 2px;
  transition: height 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chaque étape : flex row avec le dot IN-FLOW */
.ap-tl-item {
  display: flex;
  gap: 14px;
  padding: 0.8rem 0;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

/* Dot — IN FLOW (plus en absolute), centré sur le rail */
.ap-tl-dot {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
  margin-top: 3px;
  z-index: 2;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(74,26,8,0.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.ap-tl-item--active .ap-tl-dot {
  background: linear-gradient(135deg, #FF6B00, #8B2500);
  border-color: transparent;
  box-shadow: 0 0 0 5px rgba(255,107,0,0.15), 0 4px 16px rgba(255,107,0,0.35);
  transform: scale(1.12);
}

/* Pulse ring à l'apparition d'un dot (ajouté par JS) */
@keyframes dotPulseRing {
  0%   { box-shadow: 0 0 0 0px rgba(255,107,0,0.55), 0 2px 8px rgba(0,0,0,0.06); }
  60%  { box-shadow: 0 0 0 10px rgba(255,107,0,0),   0 2px 8px rgba(0,0,0,0.06); }
  100% { box-shadow: 0 0 0 0px  rgba(255,107,0,0),   0 2px 8px rgba(0,0,0,0.06); }
}
.ap-dot-pulse {
  animation: dotPulseRing 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ap-tl-item--active .ap-dot-pulse {
  animation: none;   /* l'actif a déjà son propre glow permanent */
}

/* Icône SVG dans le dot */
.ap-tl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.ap-tl-icon svg {
  width: 18px; height: 18px;
  stroke: #7a7a9a;
  transition: stroke 0.35s ease;
}
.ap-tl-item--active .ap-tl-icon svg { stroke: #fff; }

/* Carte */
.ap-tl-card {
  flex: 1;
  background: var(--white);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(74,26,8,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.ap-tl-card:hover {
  transform: translateY(-4px) perspective(500px) rotateX(2deg);
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
.ap-tl-item--active .ap-tl-card {
  border-color: rgba(255,107,0,0.2);
  box-shadow: 0 4px 24px rgba(255,107,0,0.1);
}
.ap-tl-year {
  display: block;
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--rose);
  margin-bottom: 0.3rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.ap-tl-card h4 {
  font-size: 0.94rem;
  font-family: var(--sans);
  font-weight: 600;
  margin-bottom: 0.28rem;
  line-height: 1.3;
}
.ap-tl-card p {
  font-size: 0.81rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.55;
}

/* ─── Story scroll-lock (desktop) ─── */
.ap-story-scroll-wrapper { position: relative; }

/* Fallback: reveal timeline items on mobile/tablet (JS handles desktop via GSAP scrub) */
@media (max-width: 1024px) {
  #ap-timeline .ap-tl-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (min-width: 1025px) {
  /* ── Left side: sticky within the grid — natural scroll, no scroll-lock ── */
  .ap-story-left {
    position: sticky;
    top: 100px;
    align-self: start;
  }

  /* ── Item : piloté par GSAP ScrollTrigger scrub (opacity + transform inline) ── */
  #ap-timeline .ap-tl-item {
    will-change: opacity, transform;
  }

  /* ── Dot : transition pour le gradient actif ── */
  #ap-timeline .ap-tl-item .ap-tl-dot {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  #ap-timeline .ap-tl-item--active .ap-tl-dot {
    transform: scale(1.12);
  }

  /* ── Contenu : pas de transition CSS (GSAP gère tout) ── */
  #ap-timeline .ap-tl-item .ap-tl-year,
  #ap-timeline .ap-tl-item .ap-tl-card h4,
  #ap-timeline .ap-tl-item .ap-tl-card p {
    opacity: 1;
    transform: none;
  }
}

/* Scroll-hint bar (shown during lock phase) */
.ap-story-scroll-hint {
  display: none;
}
@media (min-width: 1025px) {
  .ap-story-scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  .ap-story-scroll-hint.visible { opacity: 1; }
  .ap-ssh-bar {
    width: 36px; height: 2px;
    border-radius: 2px;
    background: var(--grad);
    animation: sshPulse 1.6s ease-in-out infinite;
  }
  @keyframes sshPulse {
    0%, 100% { opacity: 1; transform: scaleX(1); }
    50%       { opacity: 0.4; transform: scaleX(0.7); }
  }
  .ap-ssh-label {
    font-size: 0.7rem;
    color: var(--gray);
    letter-spacing: 0.6px;
    text-transform: uppercase;
  }
}

/* ─── Values — 3D flip ─── */
.ap-values {
  position: relative;
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  overflow: clip;
}
.ap-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.ap-flip-card {
  height: 280px;
  perspective: 900px;
  cursor: pointer;
}
.ap-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.23,1,0.32,1);
}
.ap-flip-card:hover .ap-flip-inner { transform: rotateY(180deg); }
.ap-flip-front,
.ap-flip-back {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.75rem;
}
.ap-flip-front {
  background: var(--white);
  border: 1px solid rgba(74,26,8,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  align-items: flex-start;
  gap: 0.75rem;
}
.ap-flip-num {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.18;
  position: absolute;
  top: 1rem; right: 1.25rem;
}
.ap-flip-icon {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,107,0,0.1), rgba(139,37,0,0.1));
  display: flex; align-items: center; justify-content: center;
}
.ap-flip-icon svg { width: 26px; height: 26px; }
.ap-flip-front h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.ap-flip-hint { font-size: 0.72rem; color: var(--gray); margin-top: auto; }
.ap-flip-back {
  transform: rotateY(180deg);
  background: var(--grad);
  color: var(--white);
  gap: 1rem;
}
.ap-flip-back h4 { font-size: 1.1rem; font-weight: 700; color: var(--white); margin: 0; }
.ap-flip-back p  { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.6; }
.ap-flip-link {
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.2s;
}
.ap-flip-link:hover { gap: 0.5rem; color: var(--white); }

/* ─── Presence ─── */
.ap-presence {
  background: linear-gradient(160deg, #f8f5fc 0%, #f3eef9 50%, #f0eaff 100%);
  padding: var(--section-y) var(--pad);
  position: relative;
  overflow: clip;
}
.ap-presence::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,107,0,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 50%, rgba(107,47,160,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.ap-countries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3.5rem;
}
.ap-country-card {
  background: var(--white);
  border: 1px solid rgba(107,47,160,0.08);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(107,47,160,0.06);
}
.ap-country-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rose), #CC4A00, var(--rose));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ap-country-card:hover::before { opacity: 1; }
.ap-country-card:hover {
  border-color: rgba(255,107,0,0.2);
  box-shadow: 0 20px 50px rgba(107,47,160,0.12);
  transform: translateY(-6px);
}
.ap-country-badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--grad);
  color: var(--white);
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(255,107,0,0.25);
}
.ap-country-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ap-country-flag { font-size: 2.8rem; line-height: 1; }
.ap-country-stat { text-align: right; }
.ap-cs-num { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 900; color: var(--rose); line-height: 1; }
.ap-cs-lbl { font-size: 0.7rem; color: rgba(74,26,8,0.4); letter-spacing: 0.5px; }
.ap-country-card h4 { color: var(--dark); font-size: 1.05rem; font-family: var(--sans); font-weight: 700; margin-bottom: 0.35rem; }
.ap-country-city {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; color: var(--rose); font-weight: 500;
  margin-bottom: 0.65rem;
}
.ap-country-card p { font-size: 0.82rem; color: rgba(74,26,8,0.5); margin: 0; line-height: 1.55; }

/* ─── Team ─── */
.ap-team {
  position: relative;
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  overflow: clip;
}
.ap-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.ap-team-card {
  background: var(--white);
  border-radius: 18px;
  padding: 0;
  border: 1px solid rgba(74,26,8,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}
.ap-team-card:hover {
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
  transform: translateY(-6px);
}
/* Shine sweep on hover */
.ap-tc-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
  z-index: 2;
}
.ap-team-card:hover .ap-tc-shine { transform: translateX(100%); }
/* Photo wrapper — takes up top portion of card */
.ap-tc-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(145deg, #e8e4ef 0%, #d5d0de 50%, #cbc5d6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ap-tc-photo-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0,0,0,0.04), transparent);
  pointer-events: none;
}
.ap-tc-initial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 2.8rem; font-weight: 900;
  color: rgba(107,47,160,0.25);
  letter-spacing: 2px;
}
.ap-tc-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Info section below photo */
.ap-tc-info {
  padding: 1.25rem 1rem 1.5rem;
}
.ap-tc-info h4 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.3rem;
}
.ap-tc-role {
  font-size: 0.78rem;
  color: var(--rose-dk);
  font-weight: 500;
  line-height: 1.4;
}

/* ─── Process ─── */
.ap-process {
  position: relative;
  background: linear-gradient(160deg, #f3eef9 0%, #f8f5fc 50%, #faf7ff 100%);
  padding: var(--section-y) var(--pad);
  overflow: clip;
}
.ap-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  position: relative;
}
.ap-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  position: relative;
  background: var(--white);
  border: 1px solid rgba(107,47,160,0.08);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(107,47,160,0.06);
  transition: border-color 0.3s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.ap-process-step:hover {
  border-color: rgba(255,107,0,0.2);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(107,47,160,0.12);
}
.ap-ps-number {
  font-family: var(--serif);
  font-size: 0.72rem; font-weight: 700;
  color: rgba(255,107,0,0.5);
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.ap-ps-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(107,47,160,0.08));
  border: 1.5px solid rgba(255,107,0,0.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; z-index: 1;
}
.ap-ps-icon svg { width: 28px; height: 28px; }
.ap-process-step:hover .ap-ps-icon {
  background: linear-gradient(135deg, rgba(255,107,0,0.15), rgba(107,47,160,0.15));
  border-color: var(--rose);
  transform: scale(1.12);
  box-shadow: 0 8px 24px rgba(255,107,0,0.2);
}
.ap-ps-content h4 { font-size: 0.92rem; font-family: var(--sans); font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.ap-ps-content p  { font-size: 0.78rem; color: rgba(74,26,8,0.5); margin: 0; line-height: 1.55; }
/* Arrow connector */
.ap-ps-arrow {
  position: absolute;
  top: 50%;
  right: -1.25rem;
  width: 24px;
  opacity: 0.5;
  transform: translateY(-50%);
}
.ap-ps-arrow svg { width: 100%; }

/* ─── RESPONSIVE À PROPOS ─── */
@media (max-width: 1280px) {
  .ap-values-grid  { grid-template-columns: repeat(2, 1fr); }
  .ap-flip-card    { height: 260px; }
  .ap-process-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .ap-ps-arrow     { display: none; }
}
@media (max-width: 1024px) {
  .ap-story-grid   { grid-template-columns: 1fr; gap: 3.5rem; }
  .ap-countries    { grid-template-columns: repeat(2, 1fr); }
  .ap-team-grid    { grid-template-columns: repeat(3, 1fr); }
  .ap-process-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .ap-ps-arrow     { display: none; }
  .ap-hero-title   { font-size: clamp(2.4rem, 6vw, 4.5rem); }
  .ap-hero-stat    { padding: 0 1.5rem; }
}
@media (max-width: 768px) {
  .ap-hero         { padding: 100px 1.5rem 60px; }
  .ap-hero-title   { font-size: clamp(2rem, 7vw, 3rem); }
  .ap-hero-stats   { gap: 0; flex-wrap: wrap; }
  .ap-hero-stat    { padding: 0.75rem 1.25rem; }
  .ap-hs-divider   { display: none; }
  .ap-values-grid  { grid-template-columns: 1fr 1fr; }
  .ap-flip-card    { height: 240px; }
  .ap-countries    { grid-template-columns: 1fr 1fr; }
  .ap-team-grid    { grid-template-columns: repeat(2, 1fr); }
  .ap-process-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .ap-story-kpis   { gap: 1.25rem; }
  .ap-orb--2, .ap-orb--4 { display: none; }
}
@media (max-width: 480px) {
  .ap-hero-title   { font-size: 2rem; }
  .ap-values-grid  { grid-template-columns: 1fr; }
  .ap-flip-card    { height: auto; perspective: none; }
  .ap-flip-inner   { transform: none !important; }
  .ap-flip-front   { position: relative; border-radius: 22px 22px 0 0; }
  .ap-flip-back    { position: relative; border-radius: 0 0 22px 22px; transform: none; backface-visibility: visible; }
  .ap-flip-hint    { display: none; }
  .ap-countries    { grid-template-columns: 1fr; }
  .ap-team-grid    { grid-template-columns: repeat(2, 1fr); }
  .ap-process-grid { grid-template-columns: 1fr; }
  .ap-hero-ctas    { flex-direction: column; align-items: center; }
  .ap-orbs         { display: none; }
}

/* ====================================
   QUI SOMMES-NOUS — HOMEPAGE ABOUT
==================================== */
.about-home {
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(139,37,0,0.12);
}
.about-home-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.about-home-content .section-title { text-align: left; }
.about-home-text {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.about-home-pillars {
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}
.about-pillar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.about-pillar-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,140,51,0.1), rgba(255,140,51,0.1));
  color: var(--rose);
  flex-shrink: 0;
}
.about-pillar-label {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--dark);
}
.about-home-visual {
  position: relative;
}
.about-home-images {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.about-home-img {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(45,27,78,0.15);
}
.about-home-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.about-home-img:hover img { transform: scale(1.05); }
.about-home-img-main { height: 260px; }
.about-home-img-secondary { height: 260px; }
.about-home-stats-row {
  display: flex;
  gap: 1rem;
}
.about-home-card {
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 40px rgba(45,27,78,0.12), inset 0 1px 1px rgba(255,255,255,0.3);
  background: linear-gradient(135deg, rgba(255,140,51,0.1), rgba(255,140,51,0.08), rgba(139,37,0,0.06));
  text-align: center;
  flex: 1;
}
.about-home-card-num {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--rose), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.about-home-card-label {
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-top: 0.3rem;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .about-home-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-home-content .section-title { text-align: center; }
  .about-home-visual { min-height: 260px; max-width: 400px; margin: 0 auto; }
  .about-home-pillars { justify-content: center; flex-wrap: wrap; gap: 1.2rem; }
  .about-home-content { text-align: center; }
  .about-home-content .btn { margin: 0 auto; }
}
@media (max-width: 560px) {
  .about-home-pillars { flex-direction: column; align-items: center; }
}

/* ====================================
   VIDEO SHOWREEL — FULL-WIDTH IMMERSIVE
==================================== */
/* ═══════════════════════════════════════════════════════════
   PROJETS HERO — Plein écran immersif (même schéma visite 3D)
═══════════════════════════════════════════════════════════ */
.projets-hero {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  margin-left: calc(-50vw + 50%);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1a0a2e;
}

/* ── Fond vidéo plein écran ── */
.ph-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ph-bg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ph-bg-slide.is-active { opacity: 1; }
.ph-bg-slide img,
.ph-bg-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-bg-slide video {
  position: absolute;
  inset: 0;
}
.ph-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,21,104,0.82) 0%, rgba(26,10,46,0.7) 50%, rgba(91,45,122,0.65) 100%);
  z-index: 1;
}

/* ── Vignettes ── */
.ph-vig {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  pointer-events: none;
}
.ph-vig-b { bottom: 0; height: 30%; background: linear-gradient(to top, rgba(26,10,46,0.6), transparent); }
.ph-vig-t { top: 0; height: 20%; background: linear-gradient(to bottom, rgba(26,10,46,0.4), transparent); }

/* ── Grain cinéma ── */
.ph-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Contenu hero ── */
.ph-content {
  position: relative;
  z-index: 3;
  padding: clamp(7rem,12vw,9rem) clamp(2rem,5vw,4rem) clamp(3rem,6vw,5rem);
  max-width: 720px;
  color: var(--white);
}

/* Eyebrow */
.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 0.55em 1.3em;
  margin-bottom: 1.5rem;
}
.ph-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: ph-pulse 2s ease-in-out infinite;
}
@keyframes ph-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

/* Titre */
.ph-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.2rem;
  color: var(--white);
}
.ph-title em {
  font-style: italic;
  color: var(--accent);
}

/* Description */
.ph-desc {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 520px;
  margin-bottom: 2rem;
}

/* Stats */
.ph-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.ph-stat-val {
  font-family: var(--font-heading, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
}
.ph-stat-plus {
  font-size: 0.6em;
  color: var(--accent);
  vertical-align: super;
}
.ph-stat-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 0.2em;
}
.ph-stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.15);
}

/* Actions */
.ph-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* Mini carrousel navigation */
.ph-carousel-nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ph-nav-item {
  position: relative;
  width: 100px;
  height: 65px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s;
  background: none;
  padding: 0;
}
.ph-nav-item.is-active {
  border-color: var(--accent, #FF6B00);
  border-width: 2.5px;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255,107,0,0.4);
}
.ph-nav-item:hover { border-color: rgba(255,255,255,0.5); transform: scale(1.05); }
.ph-nav-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph-nav-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 3px 5px;
  font-size: 0.55rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scroll cue */
.ph-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.ph-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  animation: ph-scroll-bounce 2s ease-in-out infinite;
}
@keyframes ph-scroll-bounce { 0%,100% { transform: scaleY(1); opacity: 0.5; } 50% { transform: scaleY(1.3); opacity: 1; } }
.ph-cue-text {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ph-content { padding: 6rem 1.5rem 2.5rem; }
  .ph-carousel-nav { gap: 0.5rem; }
  .ph-nav-item { width: 70px; height: 48px; }
  .ph-stats { gap: 1rem; }
}

/* ═══ video-showreel (fallback/ancien) ═══ */
.video-showreel {
  background: linear-gradient(165deg, #3A1205 0%, #5A1808 40%, #4A1A08 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Header */
.vs-header {
  text-align: center;
  padding: clamp(3rem,6vw,5rem) var(--pad) 2rem;
}
.vs-header .section-title {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0.6rem 0 0;
  line-height: 1.2;
}
.vs-header .section-title em {
  color: var(--rose);
  font-style: italic;
  padding-right: 0.08em;
  display: inline-block;
}
.vs-header .eyebrow { color: var(--teal); }

/* Carousel container — full width */
.vs-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.5;
  max-height: 75vh;
  overflow: hidden;
}

/* Track — holds all slides stacked */
.vs-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual slide */
.vs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.vs-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.vs-slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Poster image — full cover, visible by default */
.vs-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity 0.6s ease, transform 8s ease;
}
.vs-slide.is-active .vs-poster {
  transform: scale(1.03);
}
.vs-slide.is-playing .vs-poster {
  opacity: 0;
  pointer-events: none;
}

/* Video — behind poster, shown on play */
.vs-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Play button — centered, elegant glass */
.vs-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,140,51,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.4s cubic-bezier(0.23,1,0.32,1), background 0.3s, box-shadow 0.3s, opacity 0.4s;
  box-shadow: 0 8px 40px rgba(255,140,51,0.45), 0 0 0 0 rgba(255,140,51,0.3);
}
.vs-play-btn .vs-play-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,140,51,0.3);
  animation: vs-ring-pulse 2s ease-in-out infinite;
}
@keyframes vs-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.4; }
}
.vs-play-btn svg {
  margin-left: 3px;
}
.vs-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--rose);
  box-shadow: 0 12px 48px rgba(255,140,51,0.55), 0 0 0 12px rgba(255,140,51,0.1);
}
.vs-play-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.8);
}

/* Info overlay — bottom left, elegant */
.vs-slide-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 3rem 2rem;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.65) 100%);
  z-index: 5;
}
.vs-slide-info h4 {
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 600;
  margin: 0 0 0.25rem;
  letter-spacing: 0.3px;
}
.vs-slide-info span {
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Arrows — on side edges */
.vs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.vs-arrow:hover {
  background: rgba(255,140,51,0.6);
  border-color: var(--rose);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,140,51,0.3);
}
.vs-arrow-left { left: clamp(1rem, 2vw, 2.5rem); }
.vs-arrow-right { right: clamp(1rem, 2vw, 2.5rem); }

/* Navigation — dots + counter */
.vs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 0 clamp(2.5rem, 4vw, 4rem);
}
.vs-dots {
  display: flex;
  gap: 10px;
}
.vs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
  padding: 0;
}
.vs-dot.is-active {
  background: var(--rose);
  width: 28px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(255,140,51,0.4);
}
.vs-dot:hover { background: rgba(255,255,255,0.5); }
.vs-counter {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.vs-counter span { color: #fff; font-weight: 700; }

/* ── Video showreel responsive ── */
@media (max-width: 768px) {
  .vs-carousel { aspect-ratio: 16/10; max-height: 60vh; }
  .vs-play-btn { width: 64px; height: 64px; }
  .vs-play-btn svg { width: 22px; height: 22px; }
  .vs-arrow { width: 40px; height: 40px; }
  .vs-slide-info { padding: 2rem 1.5rem 1.2rem; }
  .vs-slide-info h4 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .vs-carousel { aspect-ratio: 16/12; }
  .vs-play-btn { width: 56px; height: 56px; }
  .vs-arrow { width: 36px; height: 36px; }
  .vs-arrow-left { left: 0.5rem; }
  .vs-arrow-right { right: 0.5rem; }
  .vs-slide-info { padding: 1.5rem 1rem 1rem; }
}

/* ====================================
   FAQ — ACCORDION SECTION
==================================== */
.faq-section {
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,140,51,0.1);
}
.faq-list {
  max-width: 800px;
  margin: 2.5rem auto 0;
}
.faq-item {
  border-bottom: 1px solid rgba(45,27,78,0.08);
}
.faq-item:first-child {
  border-top: 1px solid rgba(45,27,78,0.08);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.4rem 0;
  background: none;
  border: none;
  font-family: var(--heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  text-align: left;
  gap: 1rem;
  transition: color 0.3s ease;
}
.faq-question:hover { color: var(--rose); }
.faq-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,140,51,0.08), rgba(255,140,51,0.06));
  color: var(--rose);
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
  background: linear-gradient(135deg, var(--rose), var(--violet));
  color: white;
}
.faq-icon-v {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.faq-question[aria-expanded="true"] .faq-icon-v {
  transform: rotate(90deg);
  opacity: 0;
}
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.faq-answer[hidden] { display: block; max-height: 0; }
.faq-answer.is-open { max-height: 400px; }
.faq-answer-inner {
  padding: 0 0 1.4rem 0;
}
.faq-answer-inner p {
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 0.92rem;
}

/* ====================================
   TESTIMONIAL LOCATION
==================================== */
.testimonial-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
  opacity: 0.7;
}
.testimonial-location svg { flex-shrink: 0; opacity: 0.6; }

/* ====================================
   PORTFOLIO NUMBERING + DETAIL LINK
==================================== */
.portfolio-item-num {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  z-index: 5;
  letter-spacing: 0.06em;
}
.portfolio-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rose);
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
  transition: gap 0.3s ease;
}
.portfolio-item:hover .portfolio-detail-link { gap: 10px; }
.portfolio-detail-link svg {
  transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-detail-link svg {
  transform: translate(2px, -2px);
}
.portfolio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.portfolio-item:hover .portfolio-img {
  transform: scale(1.06);
}

/* ====================================
   CONTACT — CREAM SECTION
==================================== */
.contact {
  background: var(--cream);
  padding: var(--section-y) var(--pad);
  border-top: 1px solid rgba(139,37,0,0.12);
}
.contact .section-header .eyebrow { color: var(--teal-dk); }

.contact-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(0,0,0,0.1);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--dark);
  outline: none;
  transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(139,37,0,0.12);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 110px; }

/* RGPD consent checkbox */
.form-consent {
  margin-top: 0.25rem;
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem !important;
  color: var(--gray, #6B7280) !important;
  font-weight: 400 !important;
  cursor: pointer;
  line-height: 1.5;
}
.consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--rose, #FF6B00);
  cursor: pointer;
}
.consent-label a {
  color: var(--rose, #FF6B00);
  text-decoration: underline;
  font-weight: 600;
}
.consent-label a:hover {
  color: var(--rose-dk, #E55A00);
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--teal-dk);
  font-weight: 600;
}

/* ====================================
   VISITE GUIDÉE 3D — PLEIN ÉCRAN
   Structure : sticky stage inside tall wrapper
==================================== */

/* ─── Header transparent pendant la visite ─── */
body.tour-active header {
  background: linear-gradient(180deg, rgba(107,47,160,0.55) 0%, rgba(107,47,160,0.15) 70%, transparent 100%) !important;
  box-shadow: none !important;
}
body.tour-active header .logo-text,
body.tour-active header .logo-tagline,
body.tour-active header .nav-menu a,
body.tour-active header .nav-cta {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(107,47,160,0.5) !important;
}
body.tour-active header .menu-toggle span {
  background: rgba(255,255,255,0.85) !important;
}

/* ─── Wrapper : crée l'espace de scroll ─── */
.tour-wrapper {
  position: relative;
  /* height défini par JS : 100dvh + TRAVEL */
}

/* ─── Stage fixed — géré manuellement via JS (style Webflow) ─── */
.tour-stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  z-index: 50;
  /* invisible par défaut ; géré par JS via inline style */
  opacity: 0;
  pointer-events: none;
  /* Fade doux en sortie de tour */
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Pendant le tour actif — pas de transition (changements instantanés) */
.tour-stage.tour-live {
  transition: none;
}

/* ─── Canvas / image full bleed (Apple style) ─── */
.tour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  z-index: 0;
}

/* ─── Barre de préchargement ─── */
.tour-loader {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.15);
  z-index: 20;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.tour-loader.done { opacity: 0; pointer-events: none; }
.tour-loader-bar {
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.8);
  transition: width 0.1s linear;
}

/* ─── Vignettes atmosphériques ─── */
.tour-vig {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1);
}
/* Quand la visite commence, les vignettes disparaissent → clarté nette */
.tour-stage.tour-active .tour-vig {
  opacity: 0;
}
.tour-vig-b {
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top,
    rgba(45,27,78,0.85) 0%,
    rgba(45,27,78,0.45) 35%,
    rgba(45,27,78,0.1) 65%,
    transparent 100%
  );
}
.tour-vig-t {
  inset: 0 0 auto 0;
  height: 28%;
  background: linear-gradient(to bottom,
    rgba(45,27,78,0.6) 0%,
    transparent 100%
  );
}
.tour-vig-l {
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(to right,
    rgba(45,27,78,0.35) 0%,
    transparent 100%
  );
}
.tour-vig-r {
  inset: 0 0 0 auto;
  width: 18%;
  background: linear-gradient(to left,
    rgba(45,27,78,0.25) 0%,
    transparent 100%
  );
}

/* ─────────────────────────────────────
   INTRO SCREEN — Landing moderne & soft
───────────────────────────────────── */
.tour-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background:
    linear-gradient(to right, rgba(107,47,160,0.82) 0%, rgba(107,47,160,0.55) 40%, rgba(107,47,160,0.22) 70%, rgba(107,47,160,0.08) 100%),
    linear-gradient(to top, rgba(107,47,160,0.50) 0%, transparent 35%);
  transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1),
              transform 1.1s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.tour-intro.gone {
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}

/* Grain cinéma très subtil */
.tour-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: grainAnim 0.15s steps(1) infinite;
}
@keyframes grainAnim {
  0%  { background-position: 0 0; }
  25% { background-position: 30px -20px; }
  50% { background-position: -15px 10px; }
  75% { background-position: 20px 30px; }
}

/* Contenu intro — centré verticalement, aligné gauche */
.tour-intro-inner {
  position: relative;
  z-index: 5;
  text-align: left;
  max-width: min(680px, 85vw);
  padding: 0 clamp(32px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Eyebrow — badge subtil */
.tour-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.2rem;
  padding: 6px 14px 6px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: fit-content;
  opacity: 0;
  animation: tiFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
@keyframes tiFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ti-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 8px var(--rose);
  flex-shrink: 0;
  animation: tiDotPulse 2s ease-in-out infinite;
}
@keyframes tiDotPulse {
  0%, 100% { box-shadow: 0 0 6px var(--rose); }
  50%      { box-shadow: 0 0 14px var(--rose), 0 0 28px rgba(255,107,0,0.3); }
}

/* Titre principal — grand, élégant */
.tour-intro-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  margin: 0 0 1.2rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  opacity: 0;
  animation: tiFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;
}
.tour-intro-title em {
  font-style: normal;
  background: linear-gradient(135deg, #F8BBD0 0%, #CE93D8 50%, #F48FB1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-right: 0.08em;
  display: inline-block;
}

/* Description — paragraphe lisible */
.tour-intro-desc {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0 0 2rem;
  max-width: 520px;
  opacity: 0;
  animation: tiFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.75s forwards;
}

/* Stats row — chiffres clé */
.tour-intro-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2.4rem;
  opacity: 0;
  animation: tiFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.95s forwards;
}
.tis-item {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(14px, 2vw, 28px);
}
.tis-item:first-child { padding-left: 0; }
.tis-val {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}
.tis-plus {
  font-size: 0.6em;
  color: rgba(255,255,255,0.55);
  margin-left: 1px;
}
.tis-label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.tis-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* CTA buttons */
.tour-intro-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 0;
  opacity: 0;
  animation: tiFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 1.15s forwards;
}
.ti-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 50px;
  padding: 13px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  border: none;
  font-family: inherit;
}
.ti-cta-primary {
  background: linear-gradient(135deg, var(--rose) 0%, var(--violet) 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,107,0,0.3);
}
.ti-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,107,0,0.45);
}
.ti-cta-primary svg { transition: transform 0.3s ease; }
.ti-cta-primary:hover svg { transform: translateX(4px); }
.ti-cta-ghost {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ti-cta-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

/* Scroll cue — position absolue en bas */
.tour-scroll-cue {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  left: clamp(32px, 6vw, 80px);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: tiFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) 1.5s forwards;
}
.tsc-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, var(--rose), transparent);
  display: block;
  animation: tscPulseH 2s ease-in-out infinite;
}
@keyframes tscPulseH {
  0%, 100% { opacity: 1; width: 24px; }
  50%      { opacity: 0.4; width: 14px; }
}
.tsc-text {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

/* ─────────────────────────────────────
   ANNOTATIONS
───────────────────────────────────── */
/* ── Annotations — flex arm (CSS pur, sans SVG) ────────────────── */
.tour-ann {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transform: translateY(-50%);  /* centrer verticalement sur l'ancre */
}
/* Direction gauche : tout s'inverse, le dot reste à l'ancre */
.ann-l {
  flex-direction: row-reverse;
  transform: translateX(-100%) translateY(-50%);
}

/* ── Point pulsant ── */
.ann-dot {
  flex-shrink: 0;
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--fuchsia);
  box-shadow: 0 0 0 0 rgba(217,70,168,0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tour-ann.is-visible .ann-dot { opacity: 1; }

.ann-dot-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(217,70,168,0.5);
  animation: annPulseRing 2s ease-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tour-ann.is-visible .ann-dot-ring { opacity: 1; }
@keyframes annPulseRing {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ── Bras (ligne CSS) ── */
.ann-arm {
  flex-shrink: 0;
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(255,140,51,0.45);
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.ann-r .ann-arm { transform-origin: left center; }
.ann-l .ann-arm { transform-origin: right center; }
.tour-ann.is-visible .ann-arm { transform: scaleX(1); }

/* ── Label ── */
.ann-label {
  flex-shrink: 0;
  /* Glassmorphism réaliste */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.4) 0%,
      rgba(255,240,248,0.3) 50%,
      rgba(237,233,254,0.28) 100%);
  backdrop-filter: blur(32px) saturate(190%) brightness(1.1);
  -webkit-backdrop-filter: blur(32px) saturate(190%) brightness(1.1);
  border: 1.5px solid rgba(255,255,255,0.5);
  border-top-color: rgba(255,255,255,0.65);
  border-radius: 12px;
  padding: 0.55rem 0.9rem;
  box-shadow:
    0 4px 20px rgba(255,140,51,0.1),
    0 1px 3px rgba(0,0,0,0.05),
    inset 0 1px 1px rgba(255,255,255,0.5),
    inset 0 0 20px rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.5s ease 0.5s, transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.5s;
}
.ann-r .ann-label { transform: translateX(10px); }
.ann-l .ann-label { transform: translateX(-10px); }
.tour-ann.is-visible .ann-label { opacity: 1; transform: translateX(0); }

.ann-label strong {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
  white-space: nowrap;
}
.ann-label span {
  display: block;
  font-size: 0.68rem;
  color: rgba(45,27,78,0.6);
  line-height: 1.4;
  max-width: 180px;
  white-space: normal;
}

/* ─────────────────────────────────────
   OVERLAYS GLASSMORPHISME — VISITE GUIDÉE
   Premium dark glass with teal accent
───────────────────────────────────── */
@keyframes glassShimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(400%)  skewX(-15deg); }
}
@keyframes glassBarPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ── Tour overlay card — glassmorphism ── */
.tour-glass {
  position: absolute;
  width: 310px;
  padding: 1.2rem 1.4rem 1.25rem 1.5rem;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,248,252,0.50) 40%,
    rgba(255,255,255,0.45) 100%);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-top-color: rgba(255,255,255,0.60);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(107,47,160,0.15),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 1px rgba(255,255,255,0.5);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.6s ease;
  pointer-events: none;
  z-index: 25;
}

/* ── Apparition ── */
.tour-glass.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow:
    0 8px 32px rgba(107,47,160,0.15),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 1px rgba(255,255,255,0.5),
    0 0 30px rgba(107,47,160,0.08);
}

/* ── Enfants staggerés ── */
.tour-glass .tour-glass-tag,
.tour-glass .tour-glass-title,
.tour-glass .tour-glass-desc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tour-glass.is-visible .tour-glass-tag {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.08s;
}
.tour-glass.is-visible .tour-glass-title {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.18s;
}
.tour-glass.is-visible .tour-glass-desc {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.28s;
}

/* ── Sortie ── */
.tour-glass:not(.is-visible) .tour-glass-tag,
.tour-glass:not(.is-visible) .tour-glass-title,
.tour-glass:not(.is-visible) .tour-glass-desc {
  transition-delay: 0s;
}

/* Positions */
.tour-glass[data-pos="bottom-left"]   { bottom: 6rem; left: 2rem; }
.tour-glass[data-pos="bottom-right"]  { bottom: 6rem; right: 2rem; }
.tour-glass[data-pos="bottom-center"] {
  bottom: 6rem;
  left: 50%; margin-left: -155px;
}
.tour-glass[data-pos="top-left"]  { top: 5.5rem; left: 2rem; }
.tour-glass[data-pos="top-right"] { top: 5.5rem; right: 2rem; }

/* ── Chip catégorie ── */
.tour-glass-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.7rem;
  margin-bottom: 0.6rem;
  background: rgba(107,47,160,0.12);
  border: 1px solid rgba(107,47,160,0.25);
  color: var(--dark);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 20px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Petit point lumineux avant le tag */
.tour-glass-tag::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--fuchsia);
  box-shadow: 0 0 6px rgba(217,70,168,0.6);
  flex-shrink: 0;
}

/* ── Titre ── */
.tour-glass-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  text-shadow: none;
  line-height: 1.28;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}

/* ── Description ── */
.tour-glass-desc {
  font-size: 0.74rem;
  color: rgba(107,47,160,0.80);
  text-shadow: none;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
  .tour-glass { width: calc(100vw - 4rem); max-width: 290px; }
  .tour-glass[data-pos="bottom-center"] { left: 2rem; margin-left: 0; }
  .tour-glass[data-pos="bottom-right"]  { right: auto; left: 2rem; }
  .tour-glass[data-pos="top-right"]     { right: auto; left: 2rem; }
  .tour-glass[data-pos="top-left"]      { display: none; }
}

/* ─────────────────────────────────────
   HUD BAS DE PAGE
───────────────────────────────────── */
.tour-hud {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 15;
  padding: 0 clamp(28px,5vw,80px) clamp(32px,5vh,56px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
/* Hide HUD / tag while intro overlay is still visible */
#tourIntro:not(.gone) ~ #tourHUD,
#tourIntro:not(.gone) ~ #tourTag {
  opacity: 0;
  pointer-events: none;
}

/* Chapitres */
.tour-hud-left { flex: 1; }
.tour-chapter-wrap { position: relative; min-height: 80px; }
.tour-chapter {
  position: absolute;
  bottom: 0; left: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.tour-chapter.is-active { opacity: 1; transform: translateY(0); }
.tc-num {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.4rem;
}
.tc-of { color: rgba(255,255,255,0.3); font-weight: 400; }
.tc-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.tc-desc {
  font-size: clamp(0.75rem, 1.3vw, 0.88rem);
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 420px;
  line-height: 1.55;
}

/* Progression */
.tour-hud-right { flex-shrink: 0; min-width: 200px; }
.tour-progress-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.tour-progress-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: visible;
}
.tour-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--grad);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(217,70,168,0.65);
  transition: width 0.04s linear;
}
.tour-mark {
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  transition: background 0.3s;
}
.tour-mark.passed { background: var(--rose); border-color: var(--rose); }
.tour-timecode {
  font-family: monospace;
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.35);
}

/* ─────────────────────────────────────
   OUTRO (metrics à 90%)
───────────────────────────────────── */
.tour-outro {
  position: absolute;
  bottom: clamp(80px,15vh,140px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 16;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* ── Glassmorphism panel ── */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,240,248,0.18) 40%,
    rgba(237,233,254,0.15) 70%,
    rgba(255,255,255,0.2) 100%);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.55);
  border-radius: 22px;
  padding: 2rem 2.5rem 1.8rem;
  box-shadow:
    0 8px 40px rgba(45,27,78,0.2),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 1px rgba(255,255,255,0.4);
}
.tour-outro.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.tour-outro-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 2rem;
  margin-bottom: 1.8rem;
  justify-content: center;
}
.too-item { text-align: center; }
.too-val {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}
.too-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(45,27,78,0.55);
  margin-top: 0.35rem;
}
.tour-outro-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: auto;
}
.tour-outro-cta svg { width: 16px; height: 16px; }

/* ─────────────────────────────────────
   TAG PROJET (haut-gauche)
───────────────────────────────────── */
.tour-tag {
  position: absolute;
  top: clamp(75px,11vh,110px);
  left: clamp(28px,5vw,80px);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.tour-tag.is-visible { opacity: 1; }
.tour-tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 12px var(--rose);
  flex-shrink: 0;
  animation: tagPulse 2s ease-in-out infinite;
}
@keyframes tagPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.5; transform:scale(1.5); }
}
.tour-tag span:last-child {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* ─────────────────────────────────────
   RESPONSIVE
───────────────────────────────────── */
@media (max-width: 1024px) {
  .tour-hud { flex-direction: column; align-items: flex-start; }
  .tour-hud-right { width: 100%; }
  .tour-progress-wrap { align-items: flex-start; }
  .tour-outro-grid { grid-template-columns: repeat(2, auto); }
  .tour-outro { left: 50%; transform: translateX(-50%) translateY(20px); }
  .tour-outro.is-visible { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 768px) {
  .tour-ann { display: none; }
  .tour-lbx { height: 16px; }
  .tc-desc { display: none; }
  .tour-intro-inner { padding: 0 20px; }
  .tour-intro-stats { flex-wrap: wrap; gap: 8px; }
  .tis-sep { display: none; }
  .tis-item { padding: 8px 16px; background: rgba(255,255,255,0.05); border-radius: 12px; }
  .tour-intro-actions { flex-direction: column; align-items: flex-start; }
  .ti-cta { width: 100%; justify-content: center; }
  .tour-outro { left: 50%; transform: translateX(-50%) translateY(20px); padding: 1.5rem 1.8rem 1.4rem; }
  .tour-outro.is-visible { transform: translateX(-50%) translateY(0); }
  .tour-outro-grid { grid-template-columns: repeat(2, auto); gap: 1rem; }
}
@media (max-width: 480px) {
  .tour-intro-title { font-size: clamp(1.6rem,7vw,2.2rem); }
  .tour-intro-desc { font-size: 0.9rem; }
  .tis-val { font-size: 1.3rem; }
  .tour-outro { display: none; }
}


/* ====================================
   SERVICE ICON — avec image custom
==================================== */
.service-icon.has-img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  background: none;
  box-shadow: none;
}
.service-icon.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.4s ease;
}
.service-card:hover .service-icon.has-img img { transform: scale(1.06); }

/* ====================================
   SECTION CONTACT — layout 2 colonnes
==================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: 3rem;
}
.contact-info {
  background: var(--white);
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.05);
}
.ci-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--rose-light);
  color: var(--rose-dk);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 40px;
  margin-bottom: 1.5rem;
}
.contact-info h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin-bottom: 0.75rem;
}
.contact-info > p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}
.ci-items { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2rem; }
.ci-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.3s;
}
.ci-item:hover { color: var(--rose); }
.ci-icon {
  width: 42px; height: 42px;
  background: var(--rose-light);
  color: var(--rose-dk);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.ci-item:hover .ci-icon { background: var(--rose); color: var(--white); }
.ci-label { display: block; font-size: 0.72rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.1rem; }
.ci-value { font-size: 0.9rem; font-weight: 600; }

/* Trust bar */
.ci-trust {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--cream);
  border-radius: 16px;
  padding: 1rem 1.5rem;
}
.ci-trust-item { text-align: center; }
.ci-trust-num {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ci-trust-label { font-size: 0.72rem; color: var(--gray); }
.ci-trust-sep { width: 1px; height: 32px; background: rgba(0,0,0,0.1); }

/* Contact form — fond blanc arrondi */
.contact-form {
  background: var(--white);
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Responsive contact */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ---- Contact PAGE template (page-contact.php) ---- */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-container .contact-info {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
}
.contact-container .contact-info h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--dark);
  margin-bottom: 1rem;
}
.contact-container .contact-info > p {
  color: var(--gray, #666);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-light, #FFF0E0);
  border-radius: 12px;
}
.contact-detail h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dark);
  margin-bottom: 0.25rem;
}
.contact-detail p {
  color: var(--gray, #666);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.contact-detail a {
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
.contact-detail a:hover { color: var(--fuchsia); }

.contact-container .contact-form {
  background: var(--white, #fff);
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 8px 40px rgba(107,47,160,0.08);
  border: 1px solid rgba(107,47,160,0.08);
}
.contact-container .contact-form .form-group label {
  color: var(--dark);
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
}
.contact-container .contact-form .form-group input,
.contact-container .contact-form .form-group textarea {
  width: 100%;
  background: var(--cream, #FFF8F2);
  border: 1px solid rgba(107,47,160,0.12);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--dark);
  font-size: 0.95rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-container .contact-form .form-group input:focus,
.contact-container .contact-form .form-group textarea:focus {
  outline: none;
  border-color: var(--fuchsia);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
}
.contact-container .contact-form .form-group textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-container .contact-form .form-group {
  margin-bottom: 1.25rem;
}

/* WhatsApp CTA button */
.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.9rem 1.6rem;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 60px;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 18px rgba(37,211,102,0.3);
}
.whatsapp-cta:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
  color: #fff;
}
.whatsapp-cta svg { flex-shrink: 0; }

@media (max-width: 900px) {
  .contact-container { grid-template-columns: 1fr; }
  .whatsapp-cta { width: 100%; justify-content: center; }
}

/* ====================================
   PAGE CATALOGUE — DESIGN IMMERSIF
==================================== */

/* ── Hero ───────────────────────── */
.catalogue-page-hero {
  position: relative;
  background: var(--dark);
  overflow: hidden;
  padding: clamp(100px, 14vw, 180px) 0 clamp(80px, 10vw, 130px);
  min-height: 54vh;
  display: flex;
  align-items: center;
}
.catalogue-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 0;
  cursor: default;
}
.cph-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.cph-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,107,0,0.2) 0%, transparent 70%);
  top: -120px; right: -80px;
}
.cph-orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(139,37,0,0.15) 0%, transparent 70%);
  bottom: -60px; left: 5%;
}
.cph-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,107,0,0.1) 0%, transparent 70%);
  top: 30%; left: 45%;
}

.catalogue-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Wrapper hero + égérie */
.catalogue-hero-wrap {
  position: relative;
  z-index: 1;
}

/* Égérie — déborde de la section, traverse la courbe */
.catalogue-hero-egerie {
  position: absolute;
  right: 8%;
  bottom: -80px;         /* déborde sous la courbe dans la zone blanche */
  width: 500px;
  z-index: 10;           /* au-dessus de tout — section, wave, contenu en dessous */
  pointer-events: none;
  animation: egerie-rise 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}
.catalogue-hero-egerie img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 45px rgba(107,47,160,0.4));
}
@keyframes egerie-rise {
  from {
    opacity: 0;
    transform: translateY(60%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1024px) {
  .catalogue-hero-egerie { width: 380px; right: 3%; bottom: -60px; }
}
@media (max-width: 768px) {
  .catalogue-hero-egerie { display: none; }
}
.catalogue-hero-text { max-width: 700px; }
.catalogue-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--white);
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
  padding-top: 0.05em;
  overflow: visible;
}
.catalogue-hero-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.85);
  max-width: 540px;
  line-height: 1.65;
  margin: 0;
}

/* Breadcrumb */
.catalogue-breadcrumb { z-index: 2; }
.woocommerce-breadcrumb,
.catalogue-breadcrumb .cbc-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}
.woocommerce-breadcrumb a,
.cbc-item a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.3s; }
.woocommerce-breadcrumb a:hover,
.cbc-item a:hover { color: var(--rose); }
.cbc-sep { color: rgba(255,255,255,0.25); margin: 0 0.2rem; }

/* Quick stats bar */
.catalogue-hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 60px;
  padding: 0.85rem 2rem;
  width: fit-content;
}
.chs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.chs-num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.chs-label { font-size: 0.72rem; color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.chs-sep { width: 1px; height: 34px; background: rgba(255,255,255,0.3); }

/* Wave bas du hero */
.cph-wave {
  position: absolute;
  bottom: -1px; left: 0;
  width: 100%; height: 70px;
  background: var(--cream);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 3;
}

/* ── Barre Filtres ───────────────── */
.catalogue-filters-section {
  background: #ffffff;
  padding: 2.5rem 0 1.5rem;
  position: sticky;
  top: 72px;
  z-index: 90;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.catalogue-filters-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.catalogue-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 60px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.1);
  text-decoration: none;
  transition: all 0.28s ease;
  cursor: pointer;
  white-space: nowrap;
}
.cf-pill:hover {
  border-color: var(--rose);
  color: var(--rose);
  background: var(--rose-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,107,0,0.18);
}
.cf-pill.active {
  background: var(--grad);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(255,107,0,0.35);
}
.cf-pill.active:hover { transform: translateY(-2px); opacity: 0.9; }
.cf-pill-icon { display: inline-flex; align-items: center; opacity: 0.7; }
.cf-pill-count {
  background: rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 0.05rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.1rem;
}
.cf-pill.active .cf-pill-count { background: rgba(255,255,255,0.22); }

/* Sort + count bar */
.catalogue-sort-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.csb-count { font-size: 0.85rem; color: var(--gray); white-space: nowrap; }
.woocommerce-result-count { margin: 0; font-size: 0.85rem; color: var(--gray); }
.woocommerce-ordering select,
.csb-sort select {
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-family: var(--sans);
  color: var(--dark);
  background: var(--white);
  cursor: pointer;
  outline: none;
  transition: border-color 0.25s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2rem;
}
.woocommerce-ordering select:focus,
.csb-sort select:focus { border-color: var(--rose); }

/* ── Barre de recherche catalogue ── */
.catalogue-search-wrap {
  flex: 1 1 260px;
  max-width: 420px;
  min-width: 200px;
}
.catalogue-search-form { width: 100%; }
.cs-input-wrap {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 60px;
  padding: 0.35rem 0.45rem 0.35rem 1rem;
  gap: 0.6rem;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
.cs-input-wrap:focus-within {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.1);
}
.cs-icon {
  flex-shrink: 0;
  color: rgba(0,0,0,0.3);
  transition: color 0.25s;
}
.cs-input-wrap:focus-within .cs-icon { color: var(--rose); }
.cs-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--dark);
  padding: 0.35rem 0;
}
.cs-input::placeholder { color: rgba(0,0,0,0.35); }
.cs-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--grad);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
}
.cs-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(255,107,0,0.35);
}

/* ── Cartes produits centrées ────── */
.product-info-centered {
  text-align: center;
  padding: 1.2rem 1rem 1.4rem;
}
.product-info-centered .product-cat {
  margin-bottom: 0.35rem;
}
.product-info-centered .product-name {
  margin-bottom: 0.5rem;
}
.product-info-centered .product-price {
  display: block;
  margin-top: 0.2rem;
}

/* ── Corps — Grille produits ─────── */
.catalogue-body {
  background: #ffffff;
  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);
}
/* Slide-in animation — produits catalogue */
.catalogue-body .product-card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.45s cubic-bezier(0.0, 0.0, 0.2, 1),
              transform 0.45s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.catalogue-body .product-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: chaque carte dans la rangée a un délai progressif */
.catalogue-body .product-card:nth-child(4n+1) { transition-delay: 0s; }
.catalogue-body .product-card:nth-child(4n+2) { transition-delay: 0.06s; }
.catalogue-body .product-card:nth-child(4n+3) { transition-delay: 0.12s; }
.catalogue-body .product-card:nth-child(4n+4) { transition-delay: 0.18s; }
/* Fallback: si JS ne charge pas, les cartes deviennent visibles après 2s */
@keyframes card-fallback-reveal {
  to { opacity: 1; transform: translateY(0); }
}
.catalogue-body .product-card {
  animation: card-fallback-reveal 0.6s ease 2s forwards;
}
.catalogue-body .product-card.card-visible {
  animation: none; /* JS a pris le relais, annuler le fallback */
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-body .product-card { opacity: 1; transform: none; transition: none; animation: none; }
}
/* Related products — toujours visible */
.sp-related-section .product-card {
  opacity: 1 !important;
  transform: none !important;
}
/* Homepage catalogue section — staggered slide-in entrance */
.catalogue .product-card {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
  animation: card-fallback-reveal 0.6s ease 2s forwards;
}
.catalogue .product-card.card-visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
/* Grille catalogue — espacement correct */
.catalogue-body .products-grid.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: var(--container);
  margin: 0 auto;
}

/* Variantes couleurs produits */
.product-card.pc-teal   .product-img-placeholder { background: linear-gradient(135deg, rgba(139,37,0,0.14) 0%, rgba(139,37,0,0.04) 100%); }
.product-card.pc-rose   .product-img-placeholder { background: linear-gradient(135deg, rgba(255,107,0,0.14) 0%, rgba(255,107,0,0.04) 100%); }
.product-card.pc-mixed  .product-img-placeholder { background: linear-gradient(135deg, rgba(139,37,0,0.08) 0%, rgba(255,107,0,0.08) 100%); }

/* Image wrap et overlay hover */
.product-img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border-radius: 12px 12px 0 0;
}
.product-img-wrap .product-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.product-card:hover .product-img-wrap .product-img img { transform: scale(1.08); }

.product-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,107,0,0.75), rgba(139,37,0,0.75));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.product-card:hover .product-hover-overlay { opacity: 1; }
.pho-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  transform: translateY(12px);
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.product-card:hover .pho-text { transform: translateY(0); }

/* Product name link */
.product-name a { color: var(--dark); text-decoration: none; transition: color 0.3s; }
.product-name a:hover { color: var(--rose); }

/* Rating */
.product-rating { margin: 0.4rem 0; }
.product-rating .star-rating { font-size: 0.85rem; }

/* ── Pagination ──────────────────── */
.catalogue-pagination {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  justify-content: center;
}
.catalogue-pagination .nav-links,
.page-numbers { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.page-numbers a,
.page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  height: 44px;
  padding: 0 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid rgba(0,0,0,0.1);
  color: var(--dark);
  text-decoration: none;
  transition: all 0.28s ease;
  background: var(--white);
}
.page-numbers a:hover {
  border-color: var(--rose);
  color: var(--rose);
  background: var(--rose-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,107,0,0.18);
}
.page-numbers.current {
  background: var(--grad);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(255,107,0,0.35);
}
.page-numbers.prev a,
.page-numbers.next a,
.prev.page-numbers,
.next.page-numbers {
  padding: 0 1.4rem;
  gap: 0.5rem;
}

/* ── Empty state ─────────────────── */
.catalogue-empty {
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.catalogue-empty-icon {
  margin: 0 auto 2rem;
  width: 100px;
  height: 100px;
  background: var(--rose-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalogue-empty h3 { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 0.75rem; }
.catalogue-empty p { color: var(--gray); margin-bottom: 2rem; }

/* ── CTA bande ───────────────────── */
.catalogue-cta-band {
  background: var(--dark);
  padding: clamp(60px, 9vw, 100px) 0;
  position: relative;
  overflow: hidden;
}
.catalogue-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,107,0,0.12), transparent);
  pointer-events: none;
}
.ccb-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.ccb-text { max-width: 540px; }
.ccb-text h2 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--white); margin: 0.4rem 0 0.8rem; }
.ccb-text p { color: rgba(255,255,255,0.6); margin: 0; }
.ccb-actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── Responsive catalogue ────────── */
@media (max-width: 900px) {
  .catalogue-filters-section { position: static; }
  .catalogue-filters-inner { flex-direction: column; align-items: flex-start; }
  .catalogue-search-wrap { max-width: 100%; flex-basis: 100%; }
  .ccb-inner { flex-direction: column; text-align: center; }
  .ccb-actions { justify-content: center; }
}
@media (max-width: 768px) {
  .catalogue-hero-stats { gap: 1rem; padding: 0.7rem 1.2rem; }
  .chs-num { font-size: 1.15rem; }
  .catalogue-sort-bar { flex-direction: column; align-items: flex-start; }
  .catalogue-filter-pills { gap: 0.4rem; }
  .cf-pill { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
}
@media (max-width: 480px) {
  .catalogue-hero-stats { flex-wrap: wrap; border-radius: 20px; justify-content: center; }
  .chs-sep { display: none; }
}

/* ====================================
   WOOCOMMERCE — OVERRIDES
==================================== */
.woocommerce-page .site-main { background: var(--cream); }
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products li.product { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; }
.woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: 0 16px 45px rgba(0,0,0,0.1); }
.woocommerce ul.products li.product img { width: 100%; height: 220px; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif); font-size: 1rem; color: var(--dark); padding: 1rem 1rem 0.25rem; }
.woocommerce ul.products li.product .price { color: var(--rose-dk); font-weight: 700; padding: 0 1rem 0.75rem; }
.woocommerce ul.products li.product .button { margin: 0 1rem 1rem; background: var(--grad); color: var(--white); border-radius: 50px; padding: 0.5rem 1.2rem; font-size: 0.85rem; font-weight: 600; transition: opacity 0.3s; display: inline-block; }
.woocommerce ul.products li.product .button:hover { opacity: 0.85; color: var(--white); }

/* Single product */
.woocommerce div.product { background: var(--cream); padding: 2rem var(--pad); }
.woocommerce div.product .product_title { font-family: var(--serif); color: var(--dark); font-size: 2.2rem; }
.woocommerce div.product .price { color: var(--rose-dk); font-size: 1.8rem; font-weight: 700; }
.woocommerce div.product .single_add_to_cart_button { background: var(--grad); color: var(--white); border-radius: 50px; padding: 1rem 2.5rem; font-weight: 600; transition: opacity 0.3s; }
.woocommerce div.product .single_add_to_cart_button:hover { opacity: 0.85; }

/* ====================================
   FOOTER — DARK
==================================== */
footer {
  background: linear-gradient(160deg, #4A1A08 0%, #6B1A0A 60%, #8B2500 100%);
  padding: 4rem var(--pad);
  color: rgba(255,255,255,0.55);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-brand-col { max-width: 300px; }
.footer-tagline {
  color: rgba(255,255,255,0.35);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.footer-widgets {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.footer-widget-area {
  min-width: 160px;
}
.footer-widget-area .widget-title {
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-widget-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-widget-area ul li {
  margin-bottom: 0.4rem;
}
.footer-widget-area ul li a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s;
}
.footer-widget-area ul li a:hover {
  color: var(--teal);
}
.footer-logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}
.footer-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-links a {
  color: rgba(255,255,255,0.4);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--teal); }
.footer-copy { font-size: 0.78rem; }

/* Footer company info */
.footer-company-info {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.7;
  opacity: 0.6;
}
.footer-company-info a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-company-info a:hover { color: var(--teal); }

/* Footer bottom row */
.footer-bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Footer legal links */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}
.footer-legal a {
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-legal a:hover { color: var(--teal); }
.footer-legal-sep {
  color: rgba(255,255,255,0.2);
  font-size: 0.7rem;
}

/* ══════ Cookie Consent Banner ══════ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 0 1rem 1rem;
  pointer-events: none;
}
.cookie-banner-inner {
  max-width: 780px;
  margin: 0 auto;
  background: rgba(30,12,5,0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.3);
  pointer-events: auto;
}
.cookie-banner-text {
  flex: 1;
  min-width: 240px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cookie-banner-text p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
}
.cookie-banner-text a {
  color: var(--rose, #FF6B00);
  text-decoration: underline;
  font-weight: 600;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  padding: 9px 22px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #FF6B00, #E55A00);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,107,0,0.35);
}
.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #FF8C33, #FF6B00);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,107,0,0.45);
}
.cookie-btn-reject {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}
.cookie-btn-reject:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; text-align: center; padding: 18px; }
  .cookie-banner-text { justify-content: center; }
  .cookie-banner-actions { width: 100%; justify-content: center; }
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.social-icon {
  color: rgba(255,255,255,0.4);
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 50%;
}
.social-icon:hover {
  transform: translateY(-2px) scale(1.1);
}
.social-icon--linkedin:hover  { color: var(--teal); }
.social-icon--instagram:hover { color: var(--rose); }

/* ====================================
   RESPONSIVE
==================================== */
/* ── TABLET + MOBILE (≤1024px) — hamburger appears ── */
@media (max-width: 1024px) {
  .before-after-container { grid-template-columns: 1fr; gap: 3rem; }
  .process-grid           { grid-template-columns: 1fr; }

  /* Hide desktop nav only — NOT the sidebar nav */
  .main-nav            { display: none !important; }   /* wrapper nav du header */
  header .nav-cta      { display: none !important; }   /* CTA bouton header */
  .menu-toggle         { display: flex !important; align-items: center; }

  /* Le nav-menu du sidebar reste toujours visible */
  .mobile-menu .nav-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0.3rem;   /* respecte le nouveau design */
    flex: 1;
    width: 100%;
  }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ── TABLET only (768–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-title    { font-size: clamp(2.8rem, 6vw, 4.5rem); }
  .hero-metrics  { grid-template-columns: repeat(4, 1fr); }
  .stats-grid    { grid-template-columns: repeat(4, 1fr); }
  .methode-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {
  :root { --section-y: clamp(60px, 8vw, 100px); }

  header { padding: 1rem 1.5rem; }

  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }

  footer { padding: 3rem 1.5rem; flex-direction: column; text-align: center; gap: 1.5rem; }
  .footer-links { justify-content: center; gap: 1.2rem; }
  .footer-bottom { justify-content: center; }
  .footer-social { justify-content: center; }

  .contact-form { padding: 2rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }

  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ── SMALL PHONE (≤480px) ── */
@media (max-width: 480px) {
  .hero-title { font-size: 2.4rem; }
  .hero-ctas  { flex-direction: column; align-items: center; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .before-after-slider { height: 260px; }
}

/* ====================================
   GLOBAL UI/UX POLISH
==================================== */

/* Smoother focus outlines for accessibility */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fl-bubble, .fl-ring, .fl-cross { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* Selection color */
::selection {
  background: rgba(255,107,0,0.2);
  color: var(--dark);
}

/* Improve image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Smooth anchor scrolling for non-Lenis fallback */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}

/* Tour stage — smoother fade between sections */
.tour-stage {
  transition: opacity 0.55s cubic-bezier(0.23,1,0.32,1);
}
.tour-stage.tour-live {
  transition: none; /* pas de transition pendant le scroll actif */
}

/* ====================================
   SINGLE PRODUCT PAGE
==================================== */

/* ── Hero band ── */
.sp-hero {
  position: relative;
  padding: clamp(100px,14vw,160px) var(--pad) clamp(60px,8vw,90px);
  overflow: hidden;
}
.sp-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,140,51,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(255,140,51,0.18) 0%, transparent 50%),
    linear-gradient(150deg, #4A1A08 0%, #6B1A0A 50%, #8B2500 100%);
}
.sp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sp-orb-1 { width: 280px; height: 280px; top: -60px;  left: -80px;  background: radial-gradient(circle, rgba(255,107,0,0.25) 0%, transparent 70%); filter: blur(2px); animation: floatBobble 9s ease-in-out infinite; }
.sp-orb-2 { width: 200px; height: 200px; top: 40%;    right: -40px; background: radial-gradient(circle, rgba(139,37,0,0.2)  0%, transparent 70%); filter: blur(2px); animation: floatBobble 11s ease-in-out 1.5s infinite; }
.sp-orb-3 { width: 120px; height: 120px; bottom: 10%; left: 30%;    background: radial-gradient(circle, rgba(255,107,0,0.18) 0%, transparent 70%); filter: blur(1px); animation: floatBobble 7s ease-in-out 3s infinite; }

.sp-hero-inner {
  position: relative; z-index: 2;
}

/* Breadcrumb */
.sp-breadcrumb { margin-bottom: 1.8rem; }
.sp-bc-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sp-bc-item a {
  color: rgba(255,255,255,0.45);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.3s;
}
.sp-bc-item a:hover { color: var(--rose); }
.sp-bc-sep { color: rgba(255,255,255,0.25); font-size: 0.75rem; }
.sp-bc-current { color: rgba(255,255,255,0.65); font-size: 0.8rem; }

.sp-hero-text { max-width: 700px; }
.sp-hero-title {
  color: var(--white);
  font-size: clamp(2rem,5vw,3.5rem);
  line-height: 1.1;
  margin-top: 0.7rem;
}
.sp-sale-ribbon {
  display: inline-block;
  background: var(--grad);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: 100px;
  margin-top: 0.8rem;
}

/* ── Main layout ── */
.sp-main {
  padding-top: clamp(3rem,6vw,6rem);
  padding-bottom: clamp(3rem,6vw,6rem);
}
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,5vw,6rem);
  align-items: start;
}

/* ── Gallery ── */
.sp-gallery-wrap { position: sticky; top: 100px; }

.sp-main-img-wrap {
  position: relative;
  border-radius: clamp(16px,2.5vw,28px);
  overflow: hidden;
  background: var(--white);
  aspect-ratio: 4/3;
  cursor: zoom-in;
  box-shadow: 0 24px 80px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.4s ease;
}
.sp-main-img-wrap:hover {
  box-shadow: 0 36px 100px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,107,0,0.15);
}
.sp-main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.sp-main-img-wrap:hover .sp-main-img { transform: scale(1.04); }

.sp-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-light);
}
.sp-no-img svg { width: 100px; height: 100px; opacity: 0.5; }

.sp-badge {
  position: absolute;
  top: 16px; left: 16px;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 2;
}
.sp-badge-sale {
  background: var(--grad);
  color: var(--white);
}

.sp-zoom-hint {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
  pointer-events: none;
}
.sp-main-img-wrap:hover .sp-zoom-hint { opacity: 1; transform: scale(1); }

/* Shine overlay 3D */
.sp-shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}
.sp-main-img-wrap:hover .sp-shine { opacity: 1; }

/* Thumbnails */
.sp-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.sp-thumb {
  width: 72px; height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: none; padding: 0;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-thumb:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 6px 16px rgba(255,107,0,0.25); }
.sp-thumb-active { border-color: var(--rose) !important; box-shadow: 0 0 0 3px rgba(255,107,0,0.2) !important; }

/* ── Info column ── */
.sp-info-header { margin-bottom: 1.5rem; }
.sp-cat-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal-dk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  text-decoration: none;
  margin-bottom: 0.8rem;
  transition: background 0.3s, color 0.3s;
}
.sp-cat-tag:hover { background: var(--teal); color: var(--white); }

.sp-product-title {
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  line-height: 1.2;
  color: var(--dark);
}

/* Price */
.sp-price-block {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sp-price-regular {
  font-size: 1.05rem;
  color: var(--gray);
  text-decoration: line-through;
}
.sp-price-current {
  font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 700;
  color: var(--rose);
  font-family: var(--serif);
}
.sp-price-current .woocommerce-Price-amount { color: var(--rose); }

/* Short desc */
.sp-short-desc {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  border-left: 3px solid var(--teal);
  padding-left: 1rem;
}

/* WooCommerce cart form override */
.sp-cart-form {
  margin-bottom: 2rem;
}
.sp-cart-form .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gray-light);
  border-radius: 12px;
  padding: 0.3rem;
  margin-right: 1rem;
  margin-bottom: 0;
}
.sp-cart-form .quantity input[type="number"] {
  width: 52px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  outline: none;
}
.sp-cart-form .single_add_to_cart_button {
  background: var(--grad);
  color: var(--white);
  border: none;
  border-radius: 100px;
  padding: 0.9rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.3s;
  box-shadow: 0 8px 24px rgba(255,107,0,0.35);
}
.sp-cart-form .single_add_to_cart_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,107,0,0.5);
}
.sp-cart-form form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }

/* Trust bar */
.sp-trust-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
  background: var(--gray-light);
  border-radius: 16px;
}
.sp-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dark);
}
.sp-trust-item svg {
  width: 18px; height: 18px;
  color: var(--teal);
  flex-shrink: 0;
}

/* Meta */
.sp-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 1.5rem;
}
.sp-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
}
.sp-meta-label {
  color: var(--gray);
  min-width: 90px;
  font-weight: 500;
}
.sp-meta-val { color: var(--dark); }
.sp-meta-link { color: var(--rose); text-decoration: none; }
.sp-meta-link:hover { color: var(--teal-dk); }
.sp-tag-pill {
  display: inline-block;
  background: var(--rose-light);
  color: var(--rose-dk);
  border-radius: 100px;
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  text-decoration: none;
  margin-right: 0.3rem;
  transition: background 0.2s, color 0.2s;
}
.sp-tag-pill:hover { background: var(--rose); color: var(--white); }

/* Share */
.sp-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sp-share-label { font-size: 0.8rem; color: var(--gray); }
.sp-share-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gray-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.sp-share-btn svg { width: 16px; height: 16px; }
.sp-share-btn:hover { background: var(--rose); color: var(--white); transform: translateY(-2px); }

/* ── Tabs section ── */
.sp-tabs-section {
  padding: clamp(3rem,6vw,6rem) 0;
  background: var(--white);
  position: relative;
}
.sp-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  margin-bottom: 3rem;
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-tabs-nav::-webkit-scrollbar { display: none; }
.sp-tab-btn {
  background: none;
  border: none;
  padding: 1rem 1.8rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.3s;
}
.sp-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.23,1,0.32,1);
}
.sp-tab-btn:hover { color: var(--dark); }
.sp-tab-active { color: var(--dark) !important; }
.sp-tab-active::after { transform: scaleX(1) !important; }

/* Tab panels */
.sp-tab-panel { display: none; }
.sp-tab-panel-active { display: block; }

.sp-tab-content {
  max-width: 860px;
}
.sp-desc-content {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--gray);
}
.sp-desc-content p { margin-bottom: 1rem; color: var(--gray); }
.sp-desc-content h3,
.sp-desc-content h4 { color: var(--dark); margin: 1.5rem 0 0.5rem; }

/* Specs table */
.sp-specs-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
.sp-spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  transition: background 0.2s;
}
.sp-spec-row:nth-child(odd) { background: var(--gray-light); }
.sp-spec-row:nth-child(even) { background: var(--white); }
.sp-spec-row:hover { background: var(--rose-light); }
.sp-spec-label { font-weight: 600; color: var(--dark); }
.sp-spec-val { color: var(--gray); }

/* Livraison cards */
.sp-livraison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sp-liv-card {
  background: var(--gray-light);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-liv-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.sp-liv-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.sp-liv-icon svg { width: 26px; height: 26px; }
.sp-liv-icon-rose { background: var(--rose-light); color: var(--rose); }
.sp-liv-icon-teal { background: var(--teal-light); color: var(--teal-dk); }
.sp-liv-card h4 { font-size: 1rem; margin-bottom: 0.6rem; }
.sp-liv-card p { font-size: 0.85rem; color: var(--gray); margin-bottom: 1rem; }
.sp-liv-delay {
  display: inline-block;
  background: var(--white);
  border-radius: 100px;
  padding: 0.25rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal-dk);
  border: 1px solid rgba(139,37,0,0.2);
}

/* ── Related products ── */
.sp-related-section {
  padding: clamp(4rem,8vw,8rem) 0;
  background: var(--cream);
}
.sp-related-section .section-header { margin-bottom: 3rem; }
.sp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ── Related product cards (single-product) ── */
.sp-related-grid .product-card {
  background: #ffffff;
  border: 1px solid rgba(139,37,0,0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.23,1,0.32,1),
              box-shadow 0.35s ease, border-color 0.3s ease;
}
.sp-related-grid .product-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(139,37,0,0.45);
  box-shadow: 0 16px 40px rgba(139,37,0,0.12), 0 6px 20px rgba(0,0,0,0.06);
}
.sp-related-grid .product-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sp-related-grid .product-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.sp-related-grid .product-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.sp-related-grid .product-card:hover .product-card-img-wrap img {
  transform: scale(1.08);
}
.sp-related-grid .product-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-related-grid .pc-rose .product-card-placeholder,
.sp-related-grid .product-card:nth-child(odd) .product-card-placeholder {
  background: linear-gradient(135deg, rgba(255,107,0,0.10), rgba(255,107,0,0.03));
}
.sp-related-grid .pc-teal .product-card-placeholder,
.sp-related-grid .product-card:nth-child(even) .product-card-placeholder {
  background: linear-gradient(135deg, rgba(139,37,0,0.10), rgba(139,37,0,0.03));
}
.sp-related-grid .product-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, var(--rose), var(--fuchsia));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
}
.sp-related-grid .product-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(139,37,0,0.85) 0%, rgba(139,37,0,0.35) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.sp-related-grid .product-card:hover .product-hover-overlay {
  opacity: 1;
}
.sp-related-grid .pho-cta {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sp-related-grid .pho-arrow {
  width: 20px;
  height: 20px;
  color: #fff;
}
.sp-related-grid .product-card-body {
  padding: 1rem 1.2rem 1.4rem;
}
.sp-related-grid .product-card-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 0.3rem;
}
.sp-related-grid .product-card-name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.sp-related-grid .product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-related-grid .product-card-price {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--rose);
}
.sp-related-grid .product-card-price del {
  color: #bbb;
  font-weight: 400;
  font-size: 0.85rem;
  margin-right: 0.3rem;
}
.sp-related-grid .product-card-price ins {
  text-decoration: none;
  color: var(--rose);
}
.sp-related-grid .product-card-arrow {
  font-size: 1.3rem;
  color: var(--teal);
  transition: transform 0.3s ease;
}
.sp-related-grid .product-card:hover .product-card-arrow {
  transform: translateX(4px);
}

/* ── CTA band ── */
.sp-cta-band {
  position: relative;
  padding: clamp(5rem,10vw,9rem) var(--pad);
  overflow: hidden;
}
.sp-cta-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #4A1A08 0%, #6B1A0A 60%, #8B2500 100%);
}
.sp-cta-bg::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,0,0.18) 0%, transparent 65%);
  top: -150px; right: -100px;
}
.sp-cta-bg::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,37,0,0.14) 0%, transparent 65%);
  bottom: -100px; left: 10%;
}
.sp-cta-inner {
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem,5vw,5rem);
  flex-wrap: wrap;
}
.sp-cta-text { max-width: 560px; }
.sp-cta-text h2 { color: var(--white); font-size: clamp(1.8rem,4vw,2.8rem); margin-bottom: 0.75rem; }
.sp-cta-text p { color: rgba(255,255,255,0.6); font-size: 1rem; margin: 0; }
.sp-cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── WooCommerce notices override ── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--white);
  border: none;
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.woocommerce-error { border-left-color: var(--rose); }

/* ── Single product responsive ── */
@media (max-width: 960px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-gallery-wrap { position: static; }
  .sp-related-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-livraison-grid { grid-template-columns: 1fr; }
  .sp-info-header { display: none; } /* shown in hero */
}
@media (max-width: 768px) {
  .sp-hero-title { font-size: clamp(1.7rem,6vw,2.4rem); }
  .sp-cta-inner { flex-direction: column; text-align: center; }
  .sp-cta-actions { justify-content: center; }
  .sp-trust-bar { grid-template-columns: 1fr 1fr; }
  .sp-related-grid { grid-template-columns: 1fr; }
  .sp-specs-grid .sp-spec-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sp-trust-bar { grid-template-columns: 1fr; }
  .sp-thumbs { gap: 0.5rem; }
  .sp-thumb { width: 60px; height: 60px; }
}

/* ====================================
   BACK TO TOP BUTTON
==================================== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(30,30,46,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--teal);
  color: var(--dark);
  border-color: var(--teal);
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ====================================
   WOOCOMMERCE COMPATIBILITY LAYER
==================================== */
/* Ensure WooCommerce notices display properly */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  font-family: var(--sans);
}
.woocommerce-message {
  background: rgba(139,37,0,0.1);
  border-left: 4px solid var(--teal);
  color: var(--cream);
}
.woocommerce-info {
  background: rgba(255,255,255,0.05);
  border-left: 4px solid var(--gray);
  color: var(--cream);
}
.woocommerce-error {
  background: rgba(255,107,0,0.1);
  border-left: 4px solid var(--rose);
  color: var(--cream);
}
.woocommerce-error li {
  list-style: none;
}

/* WooCommerce buttons match theme */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce a.button.alt {
  background: var(--grad);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 0.75rem 2rem;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,107,0,0.3);
}

/* WooCommerce form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  background: var(--white);
  border: 1px solid rgba(107,47,160,0.18);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--dark);
  font-family: var(--sans);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(139,37,0,0.15);
  outline: none;
}

/* WooCommerce table (cart, checkout) */
.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
}
.woocommerce table.shop_table th {
  background: var(--gray-light);
  color: var(--dark);
  padding: 1rem;
  font-family: var(--sans);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid rgba(107,47,160,0.1);
}
.woocommerce table.shop_table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(107,47,160,0.08);
  color: var(--dark);
}

/* WooCommerce product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--rose);
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
}

/* WooCommerce breadcrumb */
.woocommerce .woocommerce-breadcrumb {
  color: var(--gray);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--teal);
  text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--rose);
}

/* WooCommerce pagination */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  padding: 2rem 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.woocommerce nav.woocommerce-pagination ul li a {
  background: rgba(255,255,255,0.06);
  color: var(--cream);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--teal);
  color: var(--dark);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--grad);
  color: var(--dark);
}

/* WooCommerce star rating */
.woocommerce .star-rating {
  color: var(--rose);
}

/* WooCommerce widgets sidebar */
.woocommerce .widget_price_filter .ui-slider {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
  background: var(--grad);
}
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
  background: var(--teal);
  border: 2px solid var(--dark);
  border-radius: 50%;
}

/* ====================================
   FORM PLUGIN COMPATIBILITY
   WPForms, Contact Form 7, Gravity Forms
==================================== */

/* ── WPForms ── */
.wpforms-container {
  font-family: var(--ff);
  color: var(--dark);
}
.wpforms-container .wpforms-form .wpforms-field-label {
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: var(--ff);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
  outline: none;
}
.wpforms-container .wpforms-form .wpforms-submit-container button {
  background: var(--grad);
  color: var(--dark);
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wpforms-container .wpforms-form .wpforms-submit-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 85, 158, 0.3);
}

/* ── Contact Form 7 ── */
.wpcf7 {
  font-family: var(--ff);
  color: var(--dark);
}
.wpcf7 .wpcf7-form label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: var(--ff);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.wpcf7 .wpcf7-form-control:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
  outline: none;
}
.wpcf7 input.wpcf7-submit {
  background: var(--grad);
  color: var(--dark);
  border: none;
  border-radius: 50px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wpcf7 input.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 85, 158, 0.3);
}
.wpcf7 .wpcf7-not-valid-tip {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 4px;
}
.wpcf7 .wpcf7-response-output {
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 0.95rem;
}
.wpcf7 .wpcf7-mail-sent-ok {
  border-color: var(--teal);
  background: rgba(46, 196, 182, 0.08);
}

/* ── Gravity Forms ── */
.gform_wrapper {
  font-family: var(--ff);
  color: var(--dark);
}
.gform_wrapper .gfield_label {
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 6px;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  font-family: var(--ff) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15) !important;
  outline: none;
}
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
  background: var(--grad) !important;
  color: var(--dark) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 85, 158, 0.3);
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
  border-color: #e74c3c !important;
}
.gform_wrapper .validation_message {
  color: #e74c3c;
  font-size: 0.85rem;
}
.gform_wrapper .gform_confirmation_message {
  background: rgba(46, 196, 182, 0.08);
  border: 1px solid var(--teal);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--dark);
}

/* ── Ninja Forms ── */
.nf-form-cont {
  font-family: var(--ff);
}
.nf-form-cont .nf-field-container input,
.nf-form-cont .nf-field-container textarea,
.nf-form-cont .nf-field-container select {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nf-form-cont .nf-field-container input:focus,
.nf-form-cont .nf-field-container textarea:focus,
.nf-form-cont .nf-field-container select:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(194, 24, 91, 0.1);
  outline: none;
}

/* =========================================================================
   PREMIUM MOTION DESIGN — Fluid, smooth & premium-grade
   ========================================================================= */

/* ── Auto-reveal fallback for .ap-reveal ──
   If GSAP or IntersectionObserver fail to add .in-view / .ap-visible,
   this CSS-only animation ensures content becomes visible after 2.5s.
   EXCLUDES timeline items — those are controlled by scroll-lock JS.
   Easing: fast start → slow deceleration (cubic-bezier mimics power4.out) */
/* Only auto-reveal .ap-reveal elements NOT managed by GSAP or IntersectionObserver */
.ap-reveal:not(.in-view):not(.ap-visible):not(.gsap-managed) {
  animation: apAutoReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) 3s both;
}
/* Inside story wrapper, ap-reveal elements use standard reveal (no scroll-lock cancel) */
@keyframes apAutoReveal {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: none; }
}

/* Same fallback for .bst-reveal */
.bst-reveal:not(.visible) {
  animation: bstAutoReveal 0.9s cubic-bezier(0.25, 1, 0.5, 1) 3s both;
}
@keyframes bstAutoReveal {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}

/* ── Preloader — elevated exit ── */
.preloader {
  will-change: clip-path, opacity;
}
.preloader.exit {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s;
}
.preloader-logo {
  animation: preloaderPulse 2s ease-in-out infinite alternate;
}
@keyframes preloaderPulse {
  0%   { filter: brightness(1); transform: scale(1); }
  100% { filter: brightness(1.2); transform: scale(1.02); }
}

/* ── Smooth section transitions ── */
section {
  transform: translateZ(0);
  will-change: auto;
}

/* ── Enhanced card hover — lift & glow ── */
.svc-card,
.methode-step,
.product-card,
.portfolio-item,
.testimonial-card,
.ap-team-card,
.ap-value-card {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

/* ── Stagger-friendly generic hover ── */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(107, 47, 160, 0.18),
              0 4px 12px rgba(233, 30, 144, 0.08);
}

.portfolio-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 50px rgba(107, 47, 160, 0.2);
}

.ap-value-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 44px rgba(156, 39, 176, 0.2),
              0 0 20px rgba(233, 30, 144, 0.06);
}

.ap-team-card:hover {
  box-shadow: 0 20px 50px rgba(107, 47, 160, 0.2),
              0 0 24px rgba(233, 30, 144, 0.08);
}

/* ── Smooth image zoom inside cards ── */
.portfolio-item img,
.product-card img,
.service-card img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-item:hover img,
.product-card:hover img,
.service-card:hover img {
  transform: scale(1.05);
}

/* ── Buttons — fluid hover with gradient shift ── */
.btn, .nav-cta, [data-magnetic] {
  position: relative;
  overflow: hidden;
}
.btn::after,
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.btn:hover::after,
.nav-cta:hover::after {
  opacity: 1;
}

/* ── Smooth link underline animation ── */
.main-nav a,
.nav-menu > li > a {
  position: relative;
}
.main-nav a::after,
.nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--grad);
  border-radius: 1px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-nav a:hover::after,
.nav-menu > li > a:hover::after,
.nav-menu > li.current-menu-item > a::after {
  width: 100%;
  left: 0;
}

/* ── Playfair Display italic anti-clip — global catch-all ── */
h1 em, h2 em, h3 em,
.section-title em,
.hero-title em,
.ap-hero-title em,
.tour-intro-title em,
.sp-hero-title em {
  padding-right: 0.08em;
  overflow: visible;
}

/* ── Hero text gradient shimmer ── */
.hero-title em,
.ap-hero-title em,
.tour-intro-title em {
  background-size: 200% auto;
  animation: gradientShimmer 4s linear infinite;
}
@keyframes gradientShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Smooth scroll progress glow ── */
#scroll-progress {
  transition: box-shadow 0.3s ease;
}

/* ── Back-to-top button — smooth slide up ── */
.back-to-top {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              box-shadow 0.3s ease;
}
.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(233, 30, 144, 0.25);
}

/* ── Floating decorative elements — smoother drift ── */
.fl-bubble, .fl-ring, .fl-cross,
.ap-orb {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* ── Section eyebrow glow pulse — refined ── */
.eyebrow {
  animation: eyebrowGlowPulse 3s ease-in-out infinite alternate;
}
@keyframes eyebrowGlowPulse {
  0%   { text-shadow: 0 0 0 transparent; }
  100% { text-shadow: 0 0 12px rgba(233, 30, 144, 0.15); }
}

/* ── Stat counter — number pop effect ── */
.stat-number, .ap-hs-num {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-item:hover .stat-number,
.ap-hero-stat:hover .ap-hs-num {
  transform: scale(1.08);
}

/* ── Custom cursor — smoother transitions ── */
.cursor-dot {
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease;
}
.cursor-ring {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              border-color 0.3s ease;
}

/* ── Header transitions — buttery smooth ── */
#site-header {
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.5s ease;
}

/* ── Footer links hover ── */
.footer-section a {
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-section a:hover {
  color: var(--fuchsia);
  transform: translateX(3px);
}

/* ── Testimonial marquee — smooth pause ── */
.testimonials-marquee {
  transition: animation-play-state 0.3s ease;
}

/* ── Mobile menu — fluid slide ── */
.mobile-menu {
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              box-shadow 0.5s ease !important;
}
.mobile-menu.active {
  box-shadow: -20px 0 60px rgba(107, 47, 160, 0.25);
}
.mobile-menu-overlay {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Menu toggle lines — smooth morph ── */
.menu-toggle span {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              background 0.3s ease;
}

/* ── Form inputs — refined focus ── */
input, textarea, select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(233, 30, 144, 0.08);
}

/* ── Reduce motion for accessibility ── */
/* ── Button & CTA slide-up entrance ── */
.btn-slide-up,
.cta-section .btn,
.contact-form .form-submit,
.hero-ctas .btn,
.ap-hero-ctas .btn,
.about-home-content .btn,
.catalogue-cta-band .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease,
              filter 0.3s ease;
}
.btn-slide-up.btn-visible,
.cta-section .btn.btn-visible,
.contact-form .form-submit.btn-visible,
.hero-ctas .btn.btn-visible,
.ap-hero-ctas .btn.btn-visible,
.about-home-content .btn.btn-visible,
.catalogue-cta-band .btn.btn-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered delay for adjacent buttons */
.hero-ctas .btn:nth-child(2),
.ap-hero-ctas .btn:nth-child(2) {
  transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .preloader { display: none !important; }
  .ap-reveal, .bst-reveal, .btn-slide-up,
  .cta-section .btn, .hero-ctas .btn, .ap-hero-ctas .btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* Logo responsive (Booster) */
@media (max-width:600px){.logo-text{font-size:1.75rem;}.logo-tagline{font-size:0.5rem;letter-spacing:0.4px;white-space:normal;}}

/* ===========================================================
   BOOSTER — Motion polish (micro-interactions au survol)
   Ajout sobre, sans conflit avec les effets existants.
   =========================================================== */
.temoignage-form-wrap,
.contact .contact-form,
.contact .contact-info,
.faq-item {
  transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease;
  will-change: transform;
}
.temoignage-form-wrap:hover,
.contact .contact-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 72px rgba(31,26,20,.26), inset 0 1px 0 rgba(255,255,255,.72);
}
.contact .contact-info:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 64px rgba(139,37,0,.34);
}
.faq-item { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.faq-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(74,26,8,.10); }

/* Coordonnées : glissement doux au survol */
.contact .ci-item { transition: background .25s ease, transform .25s ease; }
.contact .ci-item:hover { transform: translateX(5px); }

/* Boutons : micro-lift homogène */
.btn, .nl-btn, .tf-submit, .ti-cta {
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, filter .25s ease;
}
.btn:hover, .nl-btn:hover, .tf-submit:hover, .ti-cta:hover { transform: translateY(-3px); }

/* Liens de menu : soulignement animé */
.nav-menu a { position: relative; }
.nav-menu a::after {
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background: var(--rose,#FF6B00); transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Animations ambiantes (désactivées si l'utilisateur préfère moins de mouvement) */
@media (prefers-reduced-motion: no-preference) {
  .newsletter-icon { animation: bstFloatY 5s ease-in-out infinite; }
  .booster-wa-float { animation: bstWaIn .5s ease both, bstPulseWa 3s ease-in-out 1.2s infinite; }
}
@keyframes bstFloatY { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes bstPulseWa {
  0%,100% { box-shadow: 0 8px 24px rgba(37,211,102,.38), 0 2px 6px rgba(0,0,0,.18); }
  50%     { box-shadow: 0 10px 30px rgba(37,211,102,.55), 0 0 0 9px rgba(37,211,102,.12); }
}

/* Accessibilité : on calme tout si demandé */
@media (prefers-reduced-motion: reduce) {
  .temoignage-form-wrap, .contact .contact-form, .contact .contact-info,
  .faq-item, .btn, .nl-btn, .tf-submit, .ti-cta, .contact .ci-item { transition: none; }
  .newsletter-icon, .booster-wa-float { animation: none; }
}