/* ========================================
   UNIFORMISATION BOUTIQUE - CARTES
   ======================================== */
/* Cards produits: hauteur minimale uniforme */
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 500px; /* Ajuster selon le contenu si besoin */
}

/* ========================================
   OVERRIDES FINAUX - IMAGES PRODUITS CARTES
   Forcer conteneur fixe et image uniforme
   ======================================== */
.products-grid .product-card .product-image {
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  padding: 0 !important;
  overflow: hidden; /* pour les scales */
}

.products-grid .product-card .product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}

/* Harmonisation visuelle des boîtes verticales (MOH, POZ) */
.product-card[data-product-id="moh"] .product-image img,
.product-card[data-product-id="poz"] .product-image img {
  transform: scale(1.12);
  transform-origin: center center;
}

/* Ajustement léger pour JDC si perçu trop grand, à activer si besoin */
/* .product-card[data-product-id="jdc"] .product-image img { transform: scale(0.96); } */

@media (max-width: 640px) {
  .products-grid .product-card .product-image {
    height: 200px;
  }
}
/* ========================================
   ORA SHEL TORAH - STYLES PRINCIPAUX
   ======================================== */

/* Variables CSS */
:root {
  /* Couleurs primaires */
  --color-dark-bg: #0d1f26;        /* Noir-bleuté (fonds sombres) */
  --color-gold: #eda234;           /* Or (accents, CTA) */
  --color-gold-light: #f4c86f;     /* Or clair (hover) */
  
  /* Couleurs secondaires */
  --color-white: #ffffff;
  --color-off-white: #faf9f6;      /* Blanc cassé (fonds clairs) */
  --color-text-dark: #2c3e50;      /* Texte sur fond clair */
  --color-text-light: #ecf0f1;     /* Texte sur fond sombre */
  
  /* Couleurs des jeux (auras) */
  --color-jdc: #eda234;            /* Jerusalem: or */
  --color-moh: #3498db;            /* Minhag: bleu */
  --color-poz: #2ecc71;            /* Pozta: vert */
  
  /* Système */
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-error: #e74c3c;
  
  /* Typographie */
  --font-heading: 'Crimson Text', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Tailles */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  
  /* Poids */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Espacements */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  
  /* Container */
  --container-max-width: 1200px;
  --container-padding: 2rem;
  
  /* Ombres */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.15);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.2);
  --shadow-gold: 0 0 20px rgba(237,162,52,0.3);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-dark);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-gold-light);
}

img {
  max-width: 100%;
  height: auto;
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Header */
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(13, 31, 38, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: var(--space-md) 0;
  transition: all var(--transition-base);
}

#main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-white);
  text-decoration: none;
}

.logo img {
  height: 40px;
  width: auto;
}

.logo .tagline {
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-style: italic;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Styles pour les liens de navigation */
.main-nav .nav-link {
  color: var(--color-text-light);
  text-decoration: none;
  font-weight: var(--font-medium);
  font-size: var(--text-base);
  padding: var(--space-xs) var(--space-md);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.main-nav .nav-link:hover {
  background: rgba(237, 162, 52, 0.1);
  color: var(--color-gold);
}

.main-nav .nav-link.active {
  color: var(--color-gold);
  border-bottom: 2px solid var(--color-gold);
}

.btn-preorder {
  background: var(--color-gold);
  color: var(--color-dark-bg);
  border: none;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-preorder:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.cart-icon {
  position: relative;
  color: var(--color-white);
  font-size: var(--text-xl);
  transition: all var(--transition-fast);
}

.cart-icon:hover {
  color: var(--color-gold);
}

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-gold);
  color: var(--color-dark-bg);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  display: none;
}

.cart-count.show {
  display: flex;
}

/* ACTE 1: Hero Mystérieux */
.hero-dark {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hebrew-letters {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.hebrew-letters svg {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.03;
}

.letter-aleph {
  top: 20%;
  left: 10%;
  transform: rotate(-15deg);
}

.letter-shin {
  top: 60%;
  right: 15%;
  transform: rotate(10deg);
}

.letter-lamed {
  bottom: 20%;
  left: 20%;
  transform: rotate(-5deg);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-white);
  max-width: 800px;
  padding: 0 var(--space-lg);
}

.hero-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  animation: fadeInUp 2s ease-out;
}

.hero-logo img {
  width: auto;
  height: 180px;
  max-width: 400px;
  transition: all var(--transition-base);
  /* Assurer que l'image s'affiche correctement */
  display: block;
}

.hero-logo img:hover {
  transform: scale(1.05);
}

.hero-title {
  font-size: var(--text-6xl);
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  animation: fadeInUp 2s ease-out 0.3s both;
  font-weight: var(--font-bold);
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2xl);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  animation: fadeInUp 2s ease-out 0.5s both;
}

.hero-actions {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-bottom: var(--space-3xl);
  animation: fadeInUp 2s ease-out 1s both;
}

.btn-primary, .btn-secondary {
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-dark-bg);
  box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
  background: var(--color-gold-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-gold);
}

.btn-secondary:hover {
  background: var(--color-gold);
  color: var(--color-dark-bg);
  transform: translateY(-3px);
}

.scroll-indicator {
  animation: fadeInUp 2s ease-out 1.5s both;
}

.scroll-indicator span {
  color: var(--color-gold);
  font-size: var(--text-sm);
  animation: bounce 2s infinite;
}

/* ACTE 2: Histoire du fondateur */
.histoire-fondateur {
  background: var(--color-off-white);
  padding: var(--space-4xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.eyebrow {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-dark-bg);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-md);
}

.video-container {
  max-width: 800px;
  margin: 0 auto var(--space-3xl);
  position: relative;
  pointer-events: auto;
  z-index: 10;
}

.video-container video {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

/* S'assurer qu'aucun pseudo-élément ne bloque les contrôles */
.video-container::before,
.video-container::after {
  pointer-events: none !important;
}


.cta-subtle {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
}

.btn-link {
  color: var(--color-gold);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.btn-link:hover {
  border-bottom-color: var(--color-gold);
}

/* ACTE 3: Philosophie */
.philosophie {
  background: var(--color-dark-bg);
  color: var(--color-text-light);
  padding: var(--space-4xl) 0;
}

.philosophie .section-header.center {
  text-align: center;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

/* ========================================
   ANIMATION PHILOSOPHIE POINTS - TIMINGS CORRIGÉS
   ======================================== */

.philosophie-point {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
}

.philosophie-point:nth-child(1) {
  animation-delay: 0.2s;    /* Démarre à 0.2s, finit à 0.8s */
}

.philosophie-point:nth-child(2) {
  animation-delay: 0.4s;    /* Démarre à 0.4s - chevauche le 1er à mi-parcours */
}

.philosophie-point:nth-child(3) {
  animation-delay: 0.6s;    /* Démarre à 0.6s - chevauche le 2ème à mi-parcours */
}

.philosophy-card {
  background: rgba(255, 255, 255, 0.05);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  text-align: center;
  border: 1px solid rgba(237, 162, 52, 0.2);
  transition: all var(--transition-base);
}

.philosophy-card:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
  box-shadow: var(--shadow-gold);
}

.philosophy-card .icon {
  font-size: var(--text-4xl);
  display: block;
  margin-bottom: var(--space-lg);
}

.philosophy-card h3 {
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.quote-block {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.quote-block blockquote {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}

.quote-block cite {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  opacity: 0.8;
}

/* ACTE 4: Révélation des jeux */
.revelation-jeux {
  background: var(--color-white);
  padding: var(--space-4xl) 0;
}

/* Triple Split Panels */
.triple-split-container {
  display: flex;
  height: 500px;
  margin: var(--space-3xl) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.split-panel {
  flex: 1;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-panel:hover {
  flex: 1.3;
}

.panel-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.panel-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.4s ease;
}

/* Cadrage spécifique pour Jérusalem du Ciel - montrer le côté gauche avec la boîte */
.split-panel[data-target="hero-bis-jdc"] .panel-background img {
  object-position: center center;
}

/* Centrer les boîtes pour MOH et POZ dans les split-panels */
.split-panel[data-target="hero-bis-moh"] .panel-background img,
.split-panel[data-target="hero-bis-poz"] .panel-background img {
  object-fit: cover;
  object-position: center center;
}



.split-panel:hover .panel-background img {
  filter: grayscale(0%) brightness(1);
}

.panel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: var(--space-xl);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
  transform: translateY(20px);
  opacity: 0.8;
  transition: all 0.4s ease;
}

.split-panel:hover .panel-content {
  transform: translateY(0);
  opacity: 1;
}

.panel-content h3 {
  font-size: var(--text-3xl);
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}

.panel-content p {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}

/* Hero Bis Sections */
.hero-bis {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bis-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Quand la section vidéo est active, le background ne doit pas bloquer */
.hero-bis .video-section[style*="display: block"] ~ .hero-bis-background,
.hero-bis .video-section[style*="display: block"] ~ .hero-bis-content {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.hero-bis-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ajuster le cadrage de l'image JDC pour positionner la boîte à droite (comme MOH et POZ) */
.jdc-hero .hero-bis-background img {
  object-fit: contain;
  object-position: center center;
}

/* Centrer et contenir les images des hero-bis MOH et POZ comme JDC */
#hero-bis-moh .hero-bis-background img,
#hero-bis-poz .hero-bis-background img {
  display: block !important;
}

/* Centrage interne pour appliquer les marges visuelles */
#hero-bis-moh .hero-bis-background,
#hero-bis-poz .hero-bis-background {
  display: block;
  background: none !important;
}

/* Reset aération MOH/POZ -> revenir au comportement JDC (plein écran cover) */
#hero-bis-moh .hero-bis-background img,
#hero-bis-poz .hero-bis-background img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 1024px) {
  #hero-bis-moh .hero-bis-background img,
  #hero-bis-poz .hero-bis-background img {
    width: 94% !important;
    height: 94% !important;
  }
}

/* === Overrides finaux ultra-spécifiques (après uniformisation) === */
html body #hero-bis-moh .hero-bis-background,
html body #hero-bis-poz .hero-bis-background {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
}

html body #hero-bis-moh .hero-bis-background img,
html body #hero-bis-poz .hero-bis-background img {
  display: block !important;
}

.hero-bis-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  max-width: 800px;
  padding: 0 var(--space-lg);
  margin-left: 35%;
}

/* Ajuster la position du contenu JDC pour centrer la boîte comme les autres */
.jdc-hero .hero-bis-content {
  margin-left: 35%;
}

.hero-bis-content h2 {
  font-size: var(--text-5xl);
  color: var(--color-gold);
  margin-bottom: var(--space-lg);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
  line-height: 1.2;
}

/* ========================================
   SOUS-TITRES H2 (HERO-BIS)
   ======================================== */

.hero-bis h2 {
  font-size: 3rem;
  line-height: 1.2;
}

.hero-bis h2 .h2-subtitle {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.5rem;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
  .hero-bis h2 {
    font-size: 2rem;
  }
  
  .hero-bis h2 .h2-subtitle {
    font-size: 1rem;
    margin-top: 0.25rem;
  }
}

.hero-bis-subtitle {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2xl);
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.hero-bis-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  max-width: 600px;
  margin: 0 auto;
}

.hero-bis-actions .btn-modal {
  padding: var(--space-md) var(--space-xl);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  display: inline-block;
}

.hero-bis-actions .btn-modal:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-dark-bg);
  transform: translateY(-3px);
}

.hero-bis-actions .btn-store {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-dark-bg);
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 300px;
}

.hero-bis-actions .btn-store:hover {
  background: var(--color-gold-light);
  border-color: var(--color-gold-light);
}

.boxes-container {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}

.game-box {
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-base);
  opacity: 0;
  transform: translateY(-100vh);
}

.game-box.fall-animation {
  animation: boxFall 0.8s ease-out forwards;
}

.box-inner {
  position: relative;
  margin-bottom: var(--space-lg);
}

.box-inner img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  transition: all var(--transition-base);
}

.box-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.jdc-glow {
  background: radial-gradient(circle, rgba(237,162,52,0.3) 0%, transparent 70%);
}

.moh-glow {
  background: radial-gradient(circle, rgba(52,152,219,0.3) 0%, transparent 70%);
}

.poz-glow {
  background: radial-gradient(circle, rgba(46,204,113,0.3) 0%, transparent 70%);
}

.game-box:hover .box-inner img {
  transform: scale(1.05);
}

.game-box h3 {
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

.game-box .tagline {
  color: var(--color-gold);
  font-weight: var(--font-medium);
}

.note {
  text-align: center;
  color: var(--color-text-dark);
  opacity: 0.7;
  font-style: italic;
}

/* ACTE 5: Démos interactives */
.demos-interactives {
  background: var(--color-off-white);
  padding: var(--space-4xl) 0;
}

.demos-grid {
  display: grid;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.demo-card {
  background: var(--color-white);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.demo-card h3 {
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.demo-card p {
  margin-bottom: var(--space-lg);
  color: var(--color-text-dark);
  opacity: 0.8;
}

.cta-after-demo {
  text-align: center;
}

.cta-after-demo p {
  font-size: var(--text-xl);
  margin-bottom: var(--space-lg);
  color: var(--color-text-dark);
}

/* ACTE 6: Communauté */
.communaute {
  background: var(--color-white);
  padding: var(--space-4xl) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.stat-card {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
}

.stat-number {
  display: block;
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.stat-label {
  color: var(--color-text-dark);
  font-weight: var(--font-medium);
}

.testimonials {
  margin-bottom: var(--space-3xl);
}

.testimonials h3 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  color: var(--color-text-dark);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
}

.testimonial-card {
  background: var(--color-white);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-gold);
}

.testimonial-content p {
  font-style: italic;
  margin-bottom: var(--space-lg);
  color: var(--color-text-dark);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info strong {
  display: block;
  color: var(--color-text-dark);
  margin-bottom: var(--space-xs);
}

.author-info span {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  opacity: 0.7;
}

.partners {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.partners h3 {
  margin-bottom: var(--space-lg);
  color: var(--color-text-dark);
}

.partners-logos {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.partner-logo {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-off-white);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-dark);
  transition: all var(--transition-fast);
}

.partner-logo:hover {
  background: var(--color-gold);
  color: var(--color-white);
}

.partner-badge {
  background: var(--color-gold);
  color: var(--color-dark-bg);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  display: inline-block;
}

.newsletter-block {
  background: var(--color-dark-bg);
  color: var(--color-text-light);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  text-align: center;
}

.newsletter-block h3 {
  color: var(--color-gold);
  margin-bottom: var(--space-md);
}

.newsletter-block p {
  margin-bottom: var(--space-lg);
  opacity: 0.9;
}

.newsletter-form {
  display: flex;
  gap: var(--space-md);
  max-width: 400px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.newsletter-form button {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-gold);
  color: var(--color-dark-bg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.newsletter-form button:hover {
  background: var(--color-gold-light);
}

/* ========================================
   SECTION CONTACT / PARTENARIAT
   ======================================== */

/* ========================================
   FORMULAIRE DE CONTACT - CORRECTION
   ======================================== */

.contact-partenariat {
  background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%);
  padding: 5rem 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.contact-partenariat.visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-partenariat .section-header {
  margin-bottom: var(--space-3xl);
}

.contact-partenariat .section-header h2 {
  color: #1a3a42;
}

.contact-partenariat .section-header .intro {
  color: #4a5568;
  font-size: 1.1rem;
  margin-top: 1rem;
}

.contact-partenariat .section-header .eyebrow {
  color: #eda234;
}

.forms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.form-wrapper {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  transition: border-color 0.3s ease;
}

.form-wrapper:hover {
  border-color: rgba(212, 175, 55, 0.3);
}

/* Nouveau style pour contact-form-wrapper - fond clair */
.contact-form-wrapper {
  background: #ffffff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(26, 58, 66, 0.1);
  border: 1px solid rgba(237, 162, 52, 0.2);
}

.form-wrapper h3 {
  color: #1a3a42;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-family: 'Crimson Text', serif;
}

.contact-form-wrapper h3 {
  color: #1a3a42;
}

.form-description {
  color: #4a5568;
  font-size: 0.95rem;
  margin-bottom: 30px;
}

.contact-form-wrapper .form-description {
  color: #4a5568;
}

.form-group {
  margin-bottom: 20px;
}

.contact-form-wrapper .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Styles pour les formulaires */
.contact-form,
.partnership-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Labels pour les formulaires */
.contact-form-wrapper .form-group label {
  font-weight: 600;
  color: #1a3a42;
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
}

/* Nouveaux styles pour contact-form-wrapper - champs clairs */
.contact-form-wrapper .form-group input,
.contact-form-wrapper .form-group textarea,
.contact-form-wrapper .form-group select {
  background: #f7fafc;
  border: 2px solid #cbd5e0;
  color: #1a3a42;
  padding: 1rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.contact-form-wrapper .form-group input::placeholder,
.contact-form-wrapper .form-group textarea::placeholder {
  color: #718096;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #d4af37;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.contact-form-wrapper .form-group input:focus,
.contact-form-wrapper .form-group textarea:focus,
.contact-form-wrapper .form-group select:focus {
  border-color: #eda234;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(237, 162, 52, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form-wrapper .form-group textarea {
  min-height: 150px;
}

.form-group select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d4af37' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

/* ========================================
   FIX MOTIFS FORMULAIRE PARTENARIAT
   ======================================== */

.contact-form-wrapper .form-group select {
  background: #f7fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  background-clip: padding-box !important;
  border: 2px solid #cbd5e0 !important;
  border-style: solid !important;
  padding-right: 2.5rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Supprimer tous les patterns/motifs */
  -webkit-background-size: 12px auto !important;
  -moz-background-size: 12px auto !important;
  background-size: 12px auto !important;
}

/* Supprimer les motifs/patterns des inputs et textarea (pas les selects) */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper textarea {
    background: #f7fafc !important;
    background-image: none !important;
    border: 2px solid #cbd5e0 !important;
    border-style: solid !important;
}

/* Supprimer les pseudo-éléments qui pourraient causer des motifs */
.contact-form-wrapper select::before,
.contact-form-wrapper select::after,
.contact-form-wrapper input::before,
.contact-form-wrapper input::after {
    display: none !important;
    content: none !important;
}

/* S'assurer que le select est propre au focus */
.contact-form-wrapper .form-group select:focus {
    background: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px !important;
}

.form-group select option {
  background: #1a1a1a;
  color: #fff;
}

.contact-form-wrapper .form-group select option {
  background: #ffffff !important;
  color: #1a3a42 !important;
  background-image: none !important;
  padding: 0.5rem !important;
}

.btn-submit {
  width: 100%;
  background: #d4af37;
  color: #000;
  padding: 15px 40px;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

/* Nouveau style pour contact-form-wrapper - bouton doré */
.contact-form-wrapper .btn-submit {
  background: linear-gradient(135deg, #eda234 0%, #d68910 100%);
  color: #ffffff;
  padding: 1rem 2rem;
  font-size: 1rem;
}

.contact-form-wrapper .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237, 162, 52, 0.4);
}

.contact-form-wrapper .btn-submit:active {
  transform: translateY(0);
}

/* Message de validation */
.form-message {
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  text-align: center;
  font-weight: 500;
}

.form-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .contact-partenariat {
    padding: 3rem 1rem;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .forms-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .contact-form-wrapper .form-group input,
  .contact-form-wrapper .form-group textarea,
  .contact-form-wrapper .form-group select {
    font-size: 16px; /* Évite le zoom automatique sur iOS */
  }
}

.btn-submit:hover {
  background: #f4cf47;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.btn-submit:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-partenariat {
    padding: var(--space-2xl) 0;
  }

  .forms-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .form-wrapper {
    padding: 30px 20px;
  }

  .form-wrapper h3 {
    font-size: 1.5rem;
  }
}

/* ACTE 7: CTA Final + Boutique */
.cta-final {
  background: var(--color-off-white);
  padding: var(--space-4xl) 0;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

/* ========================================
   AJUSTEMENTS CARTES PRODUITS - URGENT
   ======================================== */

/* Conteneur des cartes produits */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Cartes produits - hauteur auto adaptative */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    /* Hauteur auto adaptée au contenu */
    height: auto !important;
    min-height: auto !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Zone image - plus grande avec plus d'espace */
.product-image {
    position: relative;
    padding: 2rem !important; /* Augmenté de 1rem */
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /* Hauteur flexible pour l'image */
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image du produit - plus grande */
.product-image img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    object-position: center;
    background: white;
    margin: 0 auto;
}

/* Badge Best-seller / Nouveauté */
.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-gold);
    color: var(--color-dark-bg);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    z-index: 10;
}

/* Zone info - flex avec space-between pour pousser le bouton en bas */
.product-info {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-info h3 {
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.product-tagline {
    color: var(--color-gold);
    font-weight: var(--font-medium);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.product-specs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.product-specs span {
    font-size: 0.85rem;
    color: var(--color-text-dark);
    opacity: 0.7;
}

/* Prix */
.product-price {
    margin-bottom: 1.5rem;
}

.price-original {
    text-decoration: line-through;
    color: var(--color-text-dark);
    opacity: 0.5;
    margin-right: 0.5rem;
    font-size: 0.95rem;
}

.price-current {
    font-size: 1.8rem;
    font-weight: var(--font-bold);
    color: var(--color-gold);
}

.price-save {
    display: block;
    font-size: 0.85rem;
    color: #27ae60;
    font-weight: var(--font-semibold);
    margin-top: 0.5rem;
}

/* Pack includes - scroll si nécessaire */
.pack-includes {
    margin-bottom: 1.5rem;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.pack-includes::-webkit-scrollbar {
    width: 6px;
}

.pack-includes::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.pack-includes::-webkit-scrollbar-thumb {
    background: #eda234;
    border-radius: 3px;
}

.pack-includes ul {
    list-style: none;
    padding: 0;
    margin-top: 0.5rem;
}

.pack-includes li {
    padding: 0.3rem 0;
    color: var(--color-text-dark);
    font-size: 0.85rem;
}

/* Bouton - poussé en bas avec margin-top auto */
.btn-add-to-cart {
    width: 100%;
    padding: 1rem;
    background: var(--color-gold);
    color: var(--color-dark-bg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    /* Pousser le bouton en bas */
    margin-top: auto;
}

.btn-add-to-cart:hover {
    background: var(--color-gold-light);
    transform: translateY(-2px);
}

/* Pack featured */
.product-card.featured {
    border: 2px solid var(--color-gold);
}

.featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-gold);
    color: var(--color-dark-bg);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: var(--font-semibold);
    z-index: 2;
}

.featured-btn {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
    box-shadow: 0 4px 12px rgba(237, 162, 52, 0.3);
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  min-height: 400px;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.product-card.featured {
  border: 2px solid var(--color-gold);
  transform: scale(1.05);
}

.featured-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: var(--color-gold);
  color: var(--color-dark-bg);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  z-index: 2;
}

.product-image {
  position: relative;
  padding: var(--space-2xl);
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.product-image img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center;
  background: white;
}

.badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--color-gold);
  color: var(--color-dark-bg);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.product-info {
  padding: var(--space-2xl);
}

.product-info h3 {
  color: var(--color-text-dark);
  margin-bottom: var(--space-sm);
}

.product-tagline {
  color: var(--color-gold);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-lg);
}

.product-specs {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.product-specs span {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  opacity: 0.7;
}

.product-price {
  margin-bottom: var(--space-lg);
}

.price-original {
  text-decoration: line-through;
  color: var(--color-text-dark);
  opacity: 0.5;
  margin-right: var(--space-sm);
}

.price-current {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gold);
}

.price-save {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-success);
  font-weight: var(--font-semibold);
  margin-top: var(--space-xs);
}

.pack-includes {
  margin-bottom: var(--space-lg);
}

.pack-includes ul {
  list-style: none;
  padding: 0;
  margin-top: var(--space-sm);
}

.pack-includes li {
  padding: var(--space-xs) 0;
  color: var(--color-text-dark);
}

.btn-add-to-cart {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-gold);
  color: var(--color-dark-bg);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-add-to-cart:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
}

.featured-btn {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  box-shadow: var(--shadow-gold);
}

.trust-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.trust-item {
  text-align: center;
}

.trust-item .icon {
  font-size: var(--text-2xl);
  display: block;
  margin-bottom: var(--space-sm);
}

.trust-item strong {
  display: block;
  color: var(--color-text-dark);
  margin-bottom: var(--space-xs);
}

.trust-item small {
  color: var(--color-text-dark);
  opacity: 0.7;
}

/* Panier Sidebar */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: var(--color-white);
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
  z-index: 2000;
  transition: right var(--transition-base);
  display: flex;
  flex-direction: column;
}

.cart-sidebar.open {
  right: 0;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid #eee;
}

.cart-header h3 {
  margin: 0;
  color: var(--color-text-dark);
}

.close-cart {
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--color-text-dark);
}

.cart-items {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
}

.cart-empty {
  text-align: center;
  color: var(--color-text-dark);
  opacity: 0.7;
  padding: var(--space-2xl);
}

.cart-item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid #eee;
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.cart-item-info {
  flex: 1;
}

.cart-item-info h4 {
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  color: var(--color-text-dark);
}

.cart-item-price {
  color: var(--color-gold);
  font-weight: var(--font-semibold);
}

.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.cart-item-quantity button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-quantity input {
  width: 50px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}

.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-error);
  font-size: var(--text-lg);
}

.cart-summary {
  padding: var(--space-lg);
  border-top: 1px solid #eee;
  background: var(--color-off-white);
}

.cart-subtotal, .cart-shipping, .cart-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.cart-total {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  border-top: 1px solid #ddd;
  padding-top: var(--space-sm);
  margin-top: var(--space-md);
}

.cart-actions {
  padding: var(--space-lg);
  display: flex;
  gap: var(--space-md);
}

.cart-actions button {
  flex: 1;
  padding: var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Rendre le bouton "Continuer mes achats" visible dans le panier (fond clair) */
.cart-actions .btn-secondary {
  background: #f5f5f5 !important;   /* fond clair visible sur blanc */
  color: var(--color-dark-bg) !important;
  border: 2px solid var(--color-gold) !important;
}

.cart-actions .btn-secondary:hover,
.cart-actions .btn-secondary:focus,
.cart-actions .btn-secondary:active {
  background: var(--color-gold);
  color: var(--color-dark-bg);
}

/* Footer */
/* ========================================
   FOOTER - CORRECTION COMPLÈTE
   ======================================== */

footer {
    background: linear-gradient(135deg, #1a3a42 0%, #0f2830 100%);
    color: #ffffff;
    padding: 3rem 2rem 2rem;
    margin-top: 5rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Instagram en haut */
.footer-social {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(237, 162, 52, 0.3);
}

.footer-social a {
    color: #eda234;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #eda234;
}

.footer-social a:hover {
    background: #eda234;
    color: #1a3a42;
    transform: translateY(-3px);
}

.footer-social svg {
    width: 20px;
    height: 20px;
}

/* Colonnes du footer */
.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-column h3 {
    color: #eda234;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-column nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #eda234;
    padding-left: 5px;
}

.footer-contact p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0.5rem 0;
}

.footer-contact a {
    color: #eda234;
}

/* Copyright en bas */
.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(237, 162, 52, 0.3);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.footer-tagline {
    font-style: italic;
    color: #eda234;
}

/* Responsive mobile */
@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem;
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-social {
        margin-bottom: 2rem;
    }
    
    .footer-column {
        text-align: center;
    }
    
    .footer-column nav {
        align-items: center;
    }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.footer-column h4 {
  color: #eda234;
  margin-bottom: var(--space-lg);
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column li {
  margin-bottom: var(--space-sm);
}

.footer-column a {
  color: #eda234;
  opacity: 0.9;
  transition: color 0.3s ease;
  text-decoration: none;
}

.footer-column a:hover {
  color: #f5b942;
  text-decoration: underline;
}

.footer-contact p {
  margin-bottom: var(--space-sm);
  color: #ffffff;
  opacity: 0.9;
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
  color: #ffffff;
  margin: 1rem 0;
  opacity: 0.9;
}

.footer-tagline {
  color: #eda234 !important;
  font-style: italic;
}

/* Responsive mobile pour footer */
@media (max-width: 768px) {
  #main-footer,
  .footer {
    padding: 2rem 1rem;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .footer-column {
    text-align: center;
  }
}

/* Modales Hero */
.modal-hero {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1400px;
  height: 85vh;
  max-height: 800px;
  overflow: hidden;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  flex-direction: row;
}

.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  color: white;
  font-size: var(--text-3xl);
  cursor: pointer;
  z-index: 10001;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.modal-hero-image {
  flex: 0 0 35%;              /* 35% de largeur */
  max-width: 450px;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modal-hero-image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;        /* Garde les proportions */
  border-radius: var(--radius-lg);
}

.box-3d {
  max-width: 280px;
  max-height: 350px;
  object-fit: contain;
}

.box-corner {
  position: absolute;
  bottom: -50px;
  right: -50px;
}

.box-3d {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

.modal-content {
  flex: 1;
  padding: 2.5rem;
  overflow-y: auto;           /* Scroll si trop de contenu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

.modal-content-text {
  flex: 0 0 60%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-content h2 {
  color: var(--color-gold);
  margin-bottom: var(--space-md);
  text-align: center;
  width: 100%;
  margin: 0 auto 1rem;
}

.modal-tagline {
  text-align: center;
  width: 100%;
}

.modal-tagline {
  color: var(--color-text-dark);
  margin-bottom: var(--space-2xl);
  font-size: var(--text-lg);
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: flex-start;
}

.btn-modal {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-off-white);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.btn-modal:hover {
  border-color: var(--color-gold);
  background: var(--color-white);
}

.btn-modal .icon {
  font-size: var(--text-2xl);
}

.btn-modal .label {
  font-weight: var(--font-semibold);
  color: var(--color-text-dark);
  display: block;
  margin-bottom: var(--space-xs);
}

.btn-modal .sublabel {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  opacity: 0.7;
}

.btn-store {
  background: var(--color-gold) !important;
  color: var(--color-dark-bg) !important;
}

.btn-store:hover {
  background: var(--color-gold-light) !important;
}

/* Sections vidéo et démo en plein écran */
.video-section,
.demo-section {
  width: 100% !important;
  height: 100% !important;
  padding: 2rem !important;
  display: none;              /* Cachées par défaut */
  text-align: center;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* S'assurer qu'aucun overlay ne bloque les contrôles vidéo */
.video-section::before,
.video-section::after,
.demo-section::before,
.demo-section::after {
  pointer-events: none !important;
  display: none !important;
}

.btn-back {
  background: var(--color-gold);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s;
  display: inline-block;
}

.btn-back:hover {
  background: var(--color-gold-light);
  transform: translateX(-5px);
}

.video-section video,
.video-section iframe,
.demo-section iframe {
  width: 100% !important;
  height: 600px !important;
  border-radius: 12px;
  border: none;
}

.product-details h3 {
  color: var(--color-text-dark);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.product-details ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-lg);
}

.product-details li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-left: var(--space-lg);
}

.product-details li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: bold;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.spec {
  background: var(--color-off-white);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes boxFall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 0;
  }
  60% {
    transform: translateY(20px) rotate(360deg);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1); 
  }
}

/* Toast Notification */
.toast-notification {
  position: fixed;
  top: 100px;
  right: var(--space-lg);
  background: var(--color-success);
  color: var(--color-white);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 4000;
  transform: translateX(400px);
  transition: transform var(--transition-base);
}

.toast-notification.show {
  transform: translateX(0);
}

/* Utilitaires */
.center {
  text-align: center;
}

.hidden {
  display: none !important;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-off-white);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light);
}

/* ====================================
   BOUTON RETOUR EN HAUT
   ==================================== */

.scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  background: rgba(0, 0, 0, 0.3);         /* Noir transparent */
  backdrop-filter: blur(10px);            /* Effet flou */
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-to-top.visible {
  opacity: 0.6;                           /* Plus discret */
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  opacity: 1;                             /* Opaque au survol */
  background: rgba(237, 162, 52, 0.9);    /* Or au survol */
  transform: scale(1.1);
}

/* Responsive mobile */
@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ====================================
   CSS VIDÉO - GARANTIR VISIBILITÉ
   ==================================== */

.video-section {
  display: none;              /* Caché par défaut */
  width: 100%;
  height: 100%;
  padding: 3rem;
  background: white;
  overflow-y: auto;
}

.video-section h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
  font-size: 1.8rem;
}

.video-section video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 1000px;
  height: 400px !important;
  max-height: 70vh;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: black !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 10 !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* Forcer l'affichage */
.video-section[style*="display: block"] {
  display: block !important;
}

/* ========================================
   CORRECTION CONTRÔLES VIDÉO - S'assurer que les contrôles sont cliquables
   ======================================== */

/* S'assurer que la vidéo et ses contrôles sont accessibles */
.video-section video,
.video-container video {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* S'assurer que le background hero ne bloque pas quand la section vidéo est active */
.hero-bis[style*=""] .hero-bis-background[style*="display: none"] {
  display: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* S'assurer qu'aucun élément parent ne bloque les clics */
.video-section * {
  pointer-events: auto;
}

.video-section .btn-back,
.video-section .btn-close {
  pointer-events: auto !important;
  z-index: 20 !important;
}

/* Les contrôles vidéo doivent être au-dessus de tout */
.video-section video::-webkit-media-controls-panel,
.video-section video::-webkit-media-controls-play-button,
.video-section video::-webkit-media-controls-timeline,
.video-section video::-webkit-media-controls-volume-slider {
  pointer-events: auto !important;
  z-index: 11 !important;
}

/* Container vidéo philosophie + présentation fondateur */
.video-philosophy-container {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 2rem;
  height: 66.67vh; /* 2/3 de la hauteur de l'affichage */
}

.video-philosophy-wrapper {
  flex: 1;
  min-width: 0; /* Permet au contenu de se rétrécir */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-philosophy-wrapper video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Présentation fondateur à droite de la vidéo */
.founder-intro {
  flex: 0 0 700px; /* Largeur élargie pour la présentation */
  padding: 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%; /* Même hauteur que le container */
  overflow-y: auto; /* Scroll si nécessaire pour voir le bouton */
}

.founder-intro-photo {
  flex: 0 0 auto;
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}

.founder-intro-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.founder-intro-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  min-height: 0; /* Permet au flex de fonctionner */
}

.founder-intro-text h3 {
  font-size: 1.5rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
  font-family: 'Crimson Text', serif;
}

.founder-intro-text p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4a4a;
  margin-bottom: 1rem;
}

.founder-intro-text strong {
  color: #eda234;
}

/* Bouton CTA Acte 2 */
.founder-intro-text .btn-cta-acte2,
.btn-cta-acte2 {
  display: inline-block !important;
  background: transparent !important;
  color: #d4af37 !important;
  padding: 0.9rem 2rem !important;
  border: 2px solid #d4af37 !important;
  border-radius: 30px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center;
  transition: all 0.3s ease !important;
  margin-top: auto !important; /* Pousse le bouton en bas du flex */
  width: 100%;
  visibility: visible !important;
  opacity: 1 !important;
}

.founder-intro-text .btn-cta-acte2:hover,
.btn-cta-acte2:hover {
  background: #d4af37 !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

.founder-intro-cta {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.video-section[style*="display: block"] video {
  display: block !important;
}

/* Section contenu détaillé */
.content-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem !important;
  display: none;
  overflow-y: auto;
  background: white;
}

.content-container {
  max-width: 100%;
}

/* Description du jeu */
.game-description {
  margin-bottom: 1.5rem;
}

.game-description h3 {
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.game-description p {
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

/* Règles du jeu */
.game-rules {
  margin-bottom: 1.5rem;
}

.game-rules h3 {
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.game-rules ol {
  padding-left: 1.5rem;
  line-height: 1.8;
}

.game-rules li {
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

.game-rules strong {
  color: var(--color-gold);
}

/* Galerie d'images */
.game-gallery {
  margin-bottom: 1.5rem;
}

.game-gallery h3 {
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: scale(1.05);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholders empilables */
.gallery-item.placeholder {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px dashed var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
}

.placeholder-icon {
  font-size: 3rem;
  opacity: 0.5;
}

.placeholder-text {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: var(--font-medium);
}

.gallery-item.placeholder:hover {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border-color: var(--color-gold-light);
}

/* Contenu de la boîte */
.box-contents {
  margin-bottom: 1.5rem;
}

.box-contents h3 {
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.box-contents ul {
  list-style: none;
  padding-left: 0;
}

.box-contents li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.box-contents li:before {
  content: "✓ ";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Spécifications */
.game-specs {
  margin-bottom: 2rem;
}

.game-specs h3 {
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.game-specs .specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.spec-item {
  background: var(--color-off-white);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.spec-item strong {
  display: block;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.spec-item p {
  color: var(--color-text-dark);
  opacity: 0.8;
  margin: 0;
  font-size: 0.95rem;
}

/* Objectifs pédagogiques */
.pedagogical-objectives {
  margin-bottom: 2rem;
}

.pedagogical-objectives h3 {
  color: var(--color-gold);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.pedagogical-objectives p {
  color: var(--color-text-dark);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.pedagogical-objectives ul {
  list-style: none;
  padding-left: 0;
}

.pedagogical-objectives li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-dark);
  line-height: 1.6;
}

.pedagogical-objectives li:before {
  content: "✓ ";
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: bold;
}

/* Responsive pour les sections de contenu */
@media (max-width: 768px) {
  .content-section {
    padding: 1rem !important;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .placeholder-icon {
    font-size: 2rem;
  }
  
  .placeholder-text {
    font-size: 0.8rem;
  }
  
  .specs-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   CORRECTION SECTION FONDATEUR (700px)
   ======================================== */

.founder-intro-text {
    max-width: 700px !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.founder-intro-text h3 {
    font-size: 1.4rem !important;
    margin-bottom: 1rem;
}

.founder-intro-text p {
    font-size: 0.9rem !important;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

/* ========================================
   SECTIONS DÉCOUVRIR - LAYOUT 4 QUADRANTS
   ======================================== */

.content-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 0;
}

.content-section .btn-back {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background: rgba(237, 162, 52, 0.9);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.content-section .btn-back:hover {
    background: rgba(237, 162, 52, 1);
    transform: translateX(-5px);
}

/* Titre principal centré en haut */
.content-section > h2 {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Crimson Text', serif;
    font-size: 2rem;
    color: #1a1a1a;
    margin: 0;
    z-index: 90;
}

/* Container en grille 2x2 */
.content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    height: 100%;
    width: 100%;
    padding-top: 5rem;
    background: #ddd;
}

/* Styles communs pour les 4 quadrants */
.content-quadrant {
    background: white;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.content-quadrant h3 {
    font-family: 'Crimson Text', serif;
    font-size: 1.4rem;
    color: #eda234;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.content-quadrant p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 0.8rem;
}

.content-quadrant ul {
    list-style: none;
    padding-left: 0;
    margin: 0.8rem 0;
}

.content-quadrant li {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
    position: relative;
}

.content-quadrant li:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #eda234;
    font-size: 0.9rem;
}

.content-quadrant ol {
    padding-left: 1.2rem;
    margin: 0.8rem 0;
}

.content-quadrant ol li {
    font-size: 0.85rem;
    padding-left: 0.3rem;
}

.content-quadrant ol li:before {
    display: none;
}

.content-quadrant strong {
    color: #eda234;
    font-weight: 600;
}

/* QUADRANT 1 : Description (haut gauche) */
.quadrant-description {
    grid-column: 1;
    grid-row: 1;
}

/* QUADRANT 2 : Galerie (haut droite) */
.quadrant-gallery {
    grid-column: 2;
    grid-row: 1;
    padding: 1rem;
    overflow: hidden;
}

/* QUADRANT 3 : Règles (bas gauche) */
.quadrant-rules {
    grid-column: 1;
    grid-row: 2;
}

/* QUADRANT 4 : Contenu boîte + specs (bas droite) */
.quadrant-specs {
    grid-column: 2;
    grid-row: 2;
}

/* COLONNE GAUCHE : TEXTE */
.content-text-column {
  padding-right: 2rem;
}

.content-text-column h2 {
  font-family: 'Crimson Text', serif;
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 2rem;
  font-weight: 700;
}

.content-text-column h3 {
  font-family: 'Crimson Text', serif;
  font-size: 1.8rem;
  color: #eda234;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.content-text-column p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  margin-bottom: 1.2rem;
}

.content-text-column ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.content-text-column ul li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
}

.content-text-column ul li:before {
  content: "✦";
  position: absolute;
  left: 0;
  color: #eda234;
  font-size: 1.2rem;
}

.content-text-column ol {
  padding-left: 1.5rem;
  margin: 1.5rem 0;
}

.content-text-column ol li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 0.8rem;
  padding-left: 0.5rem;
}

.content-text-column ol li:before {
  display: none;
}

.content-text-column strong {
  color: #eda234;
  font-weight: 600;
}

/* Blocs spécifiques */
.game-description,
.game-rules,
.box-contents,
.game-specs,
.pedagogical-objectives {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.game-description h3,
.game-rules h3,
.box-contents h3,
.game-specs h3,
.pedagogical-objectives h3 {
  margin-top: 0;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.spec-item {
  text-align: center;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.spec-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(237, 162, 52, 0.2);
}

.spec-item strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
}

.spec-item p {
  margin: 0;
  color: #666;
  font-size: 0.95rem;
}

/* ========================================
   GALERIE CAROUSEL (quadrant haut droite)
   ======================================== */

.gallery-carousel {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.carousel-viewport {
    width: 100%;
    height: calc(100% - 60px);
    position: relative;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-item.active {
    opacity: 1;
}

.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: default;
    transition: opacity 0.3s ease;
}

.carousel-item img:hover {
    opacity: 0.9;
}

.carousel-item video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: default;
}

/* Flèches carousel */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(237, 162, 52, 0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-nav:hover {
    background: rgba(237, 162, 52, 1);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav span {
    color: white;
    font-size: 1.3rem;
    font-weight: bold;
}

.carousel-nav.prev { left: 10px; }
.carousel-nav.next { right: 10px; }

/* Indicateurs (points) */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

.carousel-indicator.active {
  background: rgba(237, 162, 52, 1);
  width: 30px;
  border-radius: 5px;
}

/* Caption sous la galerie */
.carousel-caption {
  padding: 1.5rem;
  text-align: center;
  background: #f8f9fa;
}

.carousel-caption p {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
  font-style: italic;
}

/* RESPONSIVE MOBILE */
@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .content-gallery-column {
    position: relative;
    top: 0;
    padding-left: 0;
  }
  
  .carousel-viewport {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .content-section {
    padding: 1rem 0;
  }
  
  .content-container {
    padding: 0 1rem;
  }
  
  .content-text-column {
    padding-right: 0;
  }
  
  .content-text-column h2 {
    font-size: 2rem;
  }
  
  .content-text-column h3 {
    font-size: 1.5rem;
  }
  
  .content-text-column p,
  .content-text-column ul li,
  .content-text-column ol li {
    font-size: 1rem;
    text-align: left;
  }
  
  .specs-grid {
    grid-template-columns: 1fr;
  }
  
  .carousel-viewport {
    height: 300px;
  }
}

/* Indicateurs (points) */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.carousel-indicator.active {
    background: #eda234;
    width: 24px;
    border-radius: 4px;
}

/* Caption */
.carousel-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0.5rem;
    background: rgba(0,0,0,0.7);
    text-align: center;
}

.carousel-caption p {
    margin: 0;
    font-size: 0.8rem;
    color: white;
}

/* ========================================
   MODE PLEIN ÉCRAN POUR LE CAROUSEL
   ======================================== */

/* Overlay plein écran */
.fullscreen-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    cursor: zoom-out;
}

.fullscreen-overlay.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Container plein écran */
.fullscreen-container {
    position: relative;
    width: 90vw;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Contenu plein écran */
.fullscreen-content {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fullscreen-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.fullscreen-content video {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

/* Bouton fermer plein écran */
.fullscreen-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(237, 162, 52, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.fullscreen-close:hover {
    background: rgba(237, 162, 52, 1);
    transform: rotate(90deg) scale(1.1);
}

.fullscreen-close span {
    color: white;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
}

/* Flèches de navigation plein écran */
.fullscreen-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(237, 162, 52, 0.9);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10001;
}

.fullscreen-nav:hover {
    background: rgba(237, 162, 52, 1);
    transform: translateY(-50%) scale(1.15);
}

.fullscreen-nav span {
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.fullscreen-nav.prev { left: 30px; }
.fullscreen-nav.next { right: 30px; }

/* Indicateurs plein écran */
.fullscreen-indicators {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10001;
}

.fullscreen-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.fullscreen-indicator.active {
    background: #eda234;
    width: 36px;
    border-radius: 6px;
}

/* Caption plein écran */
.fullscreen-caption {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    z-index: 10001;
    pointer-events: none;
}

/* ========================================
   SPECS GRID (quadrant bas droite)
   ======================================== */

.specs-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 1rem 0;
}

.spec-item-mini {
    text-align: center;
    padding: 0.8rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.spec-item-mini strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: #1a1a1a;
}

.spec-item-mini p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

/* ========================================
   RESPONSIVE MOBILE COMPLÈT
   ======================================== */

@media (max-width: 1024px) {
    .content-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        padding-top: 4rem;
        height: auto;
    }
    
    .quadrant-description { grid-column: 1; grid-row: 1; }
    .quadrant-gallery { grid-column: 1; grid-row: 2; min-height: 400px; }
    .quadrant-rules { grid-column: 1; grid-row: 3; }
    .quadrant-specs { grid-column: 1; grid-row: 4; }
    
    .content-section {
        height: auto;
        overflow-y: auto;
    }
    
    .fullscreen-nav {
        width: 45px;
        height: 45px;
    }
    
    .fullscreen-nav.prev { left: 15px; }
    .fullscreen-nav.next { right: 15px; }
    
    .fullscreen-close {
        width: 40px;
        height: 40px;
        top: 15px;
        right: 15px;
    }
}

#hero-bis-jdc .carousel-item img:hover,
#hero-bis-jdc .carousel-item video:hover {
    opacity: 0.9;
}

/* ========================================
   SUPPRIMER TOUS LES FONDS COLORÉS - JDC
   ======================================== */

/* Tous les éléments possibles dans content-section JDC */
#hero-bis-jdc .content-section,
#hero-bis-jdc .content-section > *,
#hero-bis-jdc .content-section h2,
#hero-bis-jdc .content-section::before,
#hero-bis-jdc .content-section::after {
    background: transparent !important;
    background-color: transparent !important;
}

/* Container également transparent */
#hero-bis-jdc .content-container {
    background: transparent !important;
    background-color: transparent !important;
}

/* Titre sans fond */
#hero-bis-jdc .content-section > h2 {
    background: none !important;
    background-color: transparent !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #1a1a1a;
    padding: 0 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive : titre un peu plus petit sur mobile */
@media (max-width: 768px) {
    #hero-bis-jdc .content-section > h2 {
        font-size: 2.2rem !important;
    }
}

/* ========================================
   BOUTON RETOUR - JDC
   ======================================== */

/* Bouton retour visible et stylisé */
#hero-bis-jdc .content-section .btn-back {
    position: fixed !important;
    top: 6rem !important;
    left: 1rem !important;
    background: rgba(237, 162, 52, 0.95) !important;
    color: white !important;
    border: none !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 10000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#hero-bis-jdc .content-section .btn-back:hover {
    background: rgba(237, 162, 52, 1) !important;
    transform: translateX(-3px) !important;
    box-shadow: 0 4px 12px rgba(237, 162, 52, 0.4) !important;
}

/* ========================================
   DÉSACTIVER ZOOM JDC - URGENT
   ======================================== */

/* Curseur normal sur les images */
#hero-bis-jdc .carousel-item img,
#hero-bis-jdc .carousel-item video {
    cursor: default !important;
    pointer-events: auto !important;
}

#hero-bis-jdc .carousel-item img:hover,
#hero-bis-jdc .carousel-item video:hover {
    cursor: default !important;
    opacity: 1 !important;
}

/* S'assurer qu'aucun élément n'a cursor: zoom-in */
#hero-bis-jdc * {
    cursor: default !important;
}

#hero-bis-jdc .carousel-item * {
    cursor: default !important;
}

#hero-bis-jdc .carousel-item * {
    cursor: default !important;
}

/* ========================================
   SECTIONS DÉCOUVRIR - MOH ET POZ
   Styles identiques à JDC
   ======================================== */

/* Fond transparent pour MOH et POZ */
#hero-bis-moh .content-section,
#hero-bis-poz .content-section {
    background: transparent !important;
}

/* Titre agrandi pour MOH et POZ */
#hero-bis-moh .content-section > h2,
#hero-bis-poz .content-section > h2 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #1a1a1a;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 90;
}

/* Bouton retour pour MOH et POZ */
#hero-bis-moh .content-section .btn-back,
#hero-bis-poz .content-section .btn-back {
    position: fixed !important;
    top: 6rem !important;
    left: 1rem !important;
    background: rgba(237, 162, 52, 0.95) !important;
    color: white !important;
    border: none !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 10000 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#hero-bis-moh .content-section .btn-back:hover,
#hero-bis-poz .content-section .btn-back:hover {
    background: rgba(237, 162, 52, 1) !important;
    transform: translateX(-3px) !important;
    box-shadow: 0 4px 12px rgba(237, 162, 52, 0.4) !important;
}

/* Container pour MOH et POZ */
#hero-bis-moh .content-container,
#hero-bis-poz .content-container {
    padding-top: 4.5rem;
    background: #e8e8e8;
}

/* Quadrants pour MOH et POZ */
#hero-bis-moh .content-quadrant,
#hero-bis-poz .content-quadrant {
    background: #ffffff;
}

/* Scrollbars pour MOH et POZ */
#hero-bis-moh .content-quadrant::-webkit-scrollbar,
#hero-bis-poz .content-quadrant::-webkit-scrollbar {
    width: 8px;
}

#hero-bis-moh .content-quadrant::-webkit-scrollbar-track,
#hero-bis-poz .content-quadrant::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#hero-bis-moh .content-quadrant::-webkit-scrollbar-thumb,
#hero-bis-poz .content-quadrant::-webkit-scrollbar-thumb {
    background: #eda234;
    border-radius: 4px;
}

/* Curseur normal sur images - MOH et POZ */
#hero-bis-moh .carousel-item img,
#hero-bis-moh .carousel-item video,
#hero-bis-poz .carousel-item img,
#hero-bis-poz .carousel-item video {
    cursor: default !important;
}

/* Mobile */
@media (max-width: 768px) {
    #hero-bis-moh .content-section > h2,
    #hero-bis-poz .content-section > h2 {
        font-size: 2.2rem !important;
    }
}

/* ========================================
   UNIFORMISATION STRICTE DES HERO-BIS
   Les 3 sections doivent avoir exactement la même taille
   ======================================== */

/* Forcer la même largeur pour tous les hero-bis */
.hero-bis,
#hero-bis-jdc,
#hero-bis-moh,
#hero-bis-poz {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container des hero-bis - même taille */
.hero-bis-content,
#hero-bis-jdc .hero-bis-content,
#hero-bis-moh .hero-bis-content,
#hero-bis-poz .hero-bis-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Background des hero-bis - pleine largeur */
.hero-bis-background,
#hero-bis-jdc .hero-bis-background,
#hero-bis-moh .hero-bis-background,
#hero-bis-poz .hero-bis-background {
    width: 100% !important;
    height: 100vh !important;
}

.hero-bis-background img,
#hero-bis-jdc .hero-bis-background img,
#hero-bis-moh .hero-bis-background img,
#hero-bis-poz .hero-bis-background img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Hauteur minimale identique */
.hero-bis,
#hero-bis-jdc,
#hero-bis-moh,
#hero-bis-poz {
    min-height: 100vh !important;
    height: 100vh !important;
}

/* Supprimer toutes les contraintes de largeur spécifiques */
#hero-bis-jdc {
    max-width: none !important;
}

#hero-bis-jdc .hero-bis-content {
    max-width: none !important;
}

/* Override des styles existants pour uniformiser */
.jdc-hero,
.moh-hero,
.poz-hero {
    width: 100% !important;
    max-width: 100vw !important;
}

.jdc-hero .hero-bis-content,
.moh-hero .hero-bis-content,
.poz-hero .hero-bis-content {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 2rem !important;
}

/* Mobile - même comportement pour tous */
@media (max-width: 768px) {
    .hero-bis,
    #hero-bis-jdc,
    #hero-bis-moh,
    #hero-bis-poz {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
    }
}

/* ========================================
   UNIFORMISATION IMAGES DES CARTES PRODUITS
   ======================================== */
.product-card .product-image img {
  width: 100%;
  height: 280px;
  object-fit: contain;
  object-position: center;
  background: white;
  padding: 20px;
}

/* ========================================
   MODALE DÉCOUVRIR LE CONTENU - LAYOUT 2/3 - 1/3
   ======================================== */

/* Overlay sombre */
.content-discovery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}

.content-discovery-overlay.active {
  display: flex;
  opacity: 1;
}

/* Modal container */
.content-discovery-modal {
  position: relative;
  width: 90vw;
  max-width: 1600px;
  height: 85vh;
  background: white;
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

.content-discovery-overlay.active .content-discovery-modal {
  transform: scale(1);
}

/* Bouton fermer */
.content-discovery-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  font-size: 32px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  line-height: 1;
}

.content-discovery-close:hover {
  background: rgba(0, 0, 0, 1);
  transform: scale(1.1);
}

/* Wrapper principal : layout 2/3 - 1/3 */
.content-discovery-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Colonne gauche : Contenu (2/3) */
.content-discovery-left {
  flex: 0 0 66.666%;
  padding: 3rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
}

.content-discovery-left::-webkit-scrollbar {
  width: 8px;
}

.content-discovery-left::-webkit-scrollbar-track {
  background: transparent;
}

.content-discovery-left::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 4px;
}

/* Header */
.content-discovery-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-gold);
}

.content-discovery-header h2 {
  color: var(--color-gold);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.content-discovery-subtitle {
  color: var(--color-text-dark);
  font-size: 1.1rem;
  opacity: 0.8;
  margin: 0;
}

/* Body */
.content-discovery-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Sections */
.content-discovery-section {
  margin-bottom: 0;
}

.content-discovery-section h3 {
  color: var(--color-gold);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: var(--font-semibold);
}

.content-discovery-section p {
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.content-discovery-section ol,
.content-discovery-section ul {
  padding-left: 1.5rem;
  line-height: 1.8;
}

.content-discovery-section li {
  margin-bottom: 0.75rem;
  color: var(--color-text-dark);
  font-size: 1.05rem;
}

.content-discovery-section strong {
  color: var(--color-gold);
  font-weight: var(--font-semibold);
}

/* Spécifications compactes */
.content-discovery-specs {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.spec-item-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  padding: 1rem;
  background: var(--color-off-white);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spec-item-compact:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.spec-item-compact strong {
  font-size: 1.2rem;
  color: var(--color-text-dark);
  font-weight: var(--font-semibold);
}

.spec-item-compact span {
  font-size: 1.1rem;
  color: #000;
  font-weight: var(--font-medium);
}

/* Colonne droite : Carrousel vertical (1/3) */
.content-discovery-right {
  flex: 0 0 33.333%;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-left: 2px solid #e9ecef;
  position: relative;
  overflow: hidden;
}

/* Carrousel vertical */
.vertical-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vertical-carousel-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.vertical-carousel-item.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}

.vertical-carousel-item img,
.vertical-carousel-item video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.vertical-carousel-item video {
  width: 100%;
  height: auto;
}

/* Navigation verticale */
.vertical-carousel-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(237, 162, 52, 0.9);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.vertical-carousel-nav:hover {
  background: rgba(237, 162, 52, 1);
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.vertical-carousel-nav.prev {
  top: 24px;
}

.vertical-carousel-nav.next {
  bottom: 80px;
}

.vertical-carousel-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Indicateurs verticaux */
.vertical-carousel-indicators {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}

.vertical-carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.vertical-carousel-indicator.active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  width: 12px;
  height: 32px;
  border-radius: 6px;
}

.vertical-carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 1024px) {
  .content-discovery-modal {
    width: 95vw;
    height: 90vh;
  }
  
  .content-discovery-left {
    padding: 2rem;
  }
  
  .content-discovery-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .content-discovery-wrapper {
    flex-direction: column;
  }
  
  .content-discovery-left {
    flex: 0 0 60%;
    padding: 1.5rem;
  }
  
  .content-discovery-right {
    flex: 0 0 40%;
    border-left: none;
    border-top: 2px solid #e9ecef;
  }
  
  .vertical-carousel-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .vertical-carousel-nav.prev {
    top: 16px;
  }
  
  .vertical-carousel-nav.next {
    bottom: 60px;
  }
  
  .content-discovery-specs {
    flex-direction: column;
    gap: 1rem;
  }
  
  .spec-item-compact {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .content-discovery-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  
  .content-discovery-left {
    padding: 1rem;
  }
  
  .content-discovery-header h2 {
    font-size: 1.75rem;
  }
  
  .content-discovery-section h3 {
    font-size: 1.25rem;
  }
}

/* ========================================
   MODALES DÉCOUVRIR LE CONTENU - CSS COMPLET
   Layout 2/3 - 1/3 avec carrousel vertical
   Version alternative avec fond sombre
   ======================================== */

.content-discovery-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.content-discovery-overlay.active {
    opacity: 1;
}

.content-discovery-modal {
    background: #1a1a2e;
    border-radius: 20px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* Backgrounds spécifiques pour chaque modale */
#content-discovery-jdc .content-discovery-modal {
    background-image: url('../images/backgrounds-descriptif/fond-jdc.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#content-discovery-jdc .content-discovery-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

#content-discovery-moh .content-discovery-modal {
    background-image: url('../images/backgrounds-descriptif/fond-moh.png?v=2');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#content-discovery-moh .content-discovery-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

#content-discovery-poz .content-discovery-modal {
    background-image: url('../images/backgrounds-descriptif/fond-poz.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

#content-discovery-poz .content-discovery-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

.content-discovery-overlay.active .content-discovery-modal {
    transform: scale(1);
}

.content-discovery-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-discovery-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.content-discovery-wrapper {
    display: flex;
    height: 100%;
    max-height: 90vh;
    position: relative;
    z-index: 2;
}

/* Colonne gauche : Contenu 2/3 */
.content-discovery-left {
    flex: 2;
    padding: 40px;
    overflow-y: auto;
    color: white;
}

.content-discovery-header h2 {
    font-size: 2.5rem;
    color: #d4af37;
    margin-bottom: 10px;
}

.content-discovery-subtitle {
    font-size: 1.2rem;
    color: #aaa;
    margin-bottom: 30px;
}

.content-discovery-section {
    margin-bottom: 30px;
}

.content-discovery-section h3 {
    font-size: 1.5rem;
    color: #d4af37;
    margin-bottom: 15px;
}

.content-discovery-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 15px;
    color: #ddd;
}

.content-discovery-section ul {
    list-style: none;
    padding-left: 0;
}

.content-discovery-section ul li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    color: #ddd;
}

.content-discovery-section ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #d4af37;
    font-weight: bold;
}

.content-discovery-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.spec-item-compact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.spec-item-compact strong {
    color: #d4af37;
    font-size: 1rem;
}

.spec-item-compact span {
    color: #000;
    font-size: 0.95rem;
}

/* Colonne droite : Galerie d'images en grille */
.content-discovery-right {
    flex: 1;
    background: #0f0f1e;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow-y: auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 500px;
}

.gallery-item {
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    border-color: rgba(212, 175, 55, 0.4);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lightbox plein écran */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 20000;
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img,
.lightbox-content video {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 40px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 175, 55, 0.8);
    border: none;
    color: white;
    font-size: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.lightbox-nav:hover {
    background: rgba(212, 175, 55, 1);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav.prev {
    left: 20px;
}

.lightbox-nav.next {
    right: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .content-discovery-wrapper {
        flex-direction: column;
    }
    
    .content-discovery-left,
    .content-discovery-right {
        flex: 1;
    }
    
    .content-discovery-left {
        padding: 30px 20px;
    }
}

/* Correction hauteur modale iPhone */
@media (max-width: 768px) {
  .content-discovery-modal {
    height: 95vh !important;
    max-height: 95vh !important;
  }
  
  .vertical-carousel-viewport {
    height: 100% !important;
    min-height: 500px !important;
  }
  
  .vertical-carousel-item {
    padding: 1rem !important;
  }
  
  .content-discovery-right {
    padding-top: 1rem !important;
    display: flex !important;
    align-items: flex-start !important;
  }
  
  .gallery-grid {
    margin-top: 0 !important;
    align-self: flex-start !important;
  }
}

@media (max-width: 480px) {
  .content-discovery-modal {
    height: 98vh !important;
  }
}

/* FIX ANDROID - Forcer l'affichage de la modale */
@media (max-width: 1024px) {
  .content-discovery-overlay {
    display: none !important;
  }
  
  .content-discovery-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  .content-discovery-modal {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    position: relative !important;
    margin: auto !important;
  }
}

/* ========================================
   STYLES POUR LES NOUVELLES SECTIONS JDC
   ======================================== */

/* Styles pour les nouvelles sections JDC */
.highlight-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    border-left: 4px solid #d4af37;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
}

.faq-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h4 {
    color: #d4af37;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.faq-item p {
    color: #dddddd;
    line-height: 1.7;
    font-size: 0.95rem;
}

.testimonials-mini {
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.testimonial-compact {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 3px solid #d4af37;
}

.testimonial-compact:last-child {
    margin-bottom: 0;
}

.testimonial-compact p:first-of-type {
    color: #d4af37;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* RESPONSIVE MOBILE - CRITIQUE */
@media (max-width: 768px) {
    .content-discovery-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        height: 90vh !important;
        max-height: 90vh !important;
        margin: 2.5vh auto !important;
    }
    
    .content-discovery-wrapper {
        flex-direction: column !important;
    }
    
    .content-discovery-left {
        width: 100% !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        padding: 1.5rem 1rem !important;
    }
    
    .content-discovery-right {
        width: 100% !important;
        max-height: 30vh !important;
        overflow-y: auto !important;
    }
    
    .content-discovery-section h3 {
        font-size: 1.3rem !important;
    }
    
    .content-discovery-section p,
    .content-discovery-section li {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    .faq-item h4 {
        font-size: 1rem !important;
    }
    
    .testimonial-compact {
        padding: 1rem !important;
    }
    
    .highlight-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
}

@media (max-width: 480px) {
    .content-discovery-left {
        padding: 1rem 0.75rem !important;
    }
    
    .content-discovery-section h3 {
        font-size: 1.2rem !important;
    }
    
    .content-discovery-section p,
    .content-discovery-section li {
        font-size: 0.85rem !important;
    }
}

/* ========================================
   STYLES SPÉCIFIQUES MOH - EXEMPLES HALAKHA/MINHAG
   ======================================== */

.example-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border-left: 3px solid rgba(212, 175, 55, 0.3);
}

.example-item p:first-child {
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.example-item p:last-child {
    color: #cccccc;
    line-height: 1.7;
    font-size: 0.95rem;
}

.badge-halakha,
.badge-minhag,
.badge-both {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.5rem;
}

.badge-halakha {
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: #ffffff;
}

.badge-minhag {
    background: linear-gradient(135deg, #4a90e2, #2e5c8a);
    color: #ffffff;
}

.badge-both {
    background: linear-gradient(135deg, #d4af37, #a68a2b);
    color: #1a1a2e;
}

/* RESPONSIVE MOBILE - Adaptations MOH */
@media (max-width: 768px) {
    .example-item {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .example-item p {
        font-size: 0.85rem !important;
    }
    
    .badge-halakha,
    .badge-minhag,
    .badge-both {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .example-item {
        padding: 0.5rem;
    }
    
    .example-item p:first-child {
        font-size: 0.9rem !important;
    }
}

/* ========================================
   STYLES SPÉCIFIQUES POZ - BLOCS DE CATÉGORIES
   ======================================== */

.category-block {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #4a90e2;
    transition: all 0.3s ease;
}

.category-block:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.category-block h4 {
    color: #4a90e2;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.category-block p {
    color: #dddddd;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.category-block ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.category-block li {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
}

.category-block li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4a90e2;
    font-size: 1.2rem;
}

.category-block em {
    color: #aaaaaa;
    font-size: 0.9rem;
    font-style: italic;
}

/* Catégorie Mitsvot - Bleu */
.category-mitzvot {
    border-left-color: #4a90e2;
}

.category-mitzvot h4 {
    color: #4a90e2;
}

.category-mitzvot li:before {
    color: #4a90e2;
}

/* Catégorie Averot - Bleu foncé */
.category-averot {
    border-left-color: #3498db;
}

.category-averot h4 {
    color: #3498db;
}

.category-averot li:before {
    color: #3498db;
}

/* Catégorie Situations de Vie - OR (se distingue) */
.category-lieux.category-gold {
    border-left-color: #d4af37;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.category-lieux.category-gold h4 {
    color: #d4af37;
}

.category-lieux.category-gold li:before {
    color: #d4af37;
}

/* Liste des situations de vie (format spécial) */
.mitsvot-list {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
}

.mitsvot-list li {
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 0.75rem;
    padding-left: 0;
    position: relative;
    font-size: 0.95rem;
}

.mitsvot-list li strong {
    color: #d4af37;
    margin-right: 0.5rem;
}

.mitsvot-list li:before {
    display: none;
}

/* RESPONSIVE MOBILE - Adaptations POZ */
@media (max-width: 768px) {
    .category-block {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .category-block h4 {
        font-size: 1.1rem !important;
    }
    
    .category-block p,
    .category-block li {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .category-block {
        padding: 0.75rem;
        border-left-width: 3px;
    }
    
    .category-block h4 {
        font-size: 1rem !important;
    }
    
    .category-block p,
    .category-block li {
        font-size: 0.8rem !important;
    }
}

/* ============================================
   PAGE À PROPOS - STYLES COMPLETS
   ============================================ */

/* Page principale - Fond blanc nacré */
.page-about {
    background: #f8f8f8 !important;
    min-height: 100vh;
    padding: 2rem 0 4rem;
}

.page-about .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero À Propos - Image de fond avec overlay */
.hero-about {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.7)),
                url('../images/backgrounds/back_a_propos.png') center/cover;
    padding: 8rem 2rem 6rem;
    text-align: center;
    color: #ffffff;
    position: relative;
    margin-top: 80px; /* Espace pour le header fixe */
}

.hero-about h1 {
    font-size: 3rem;
    color: #d4af37;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-about .subtitle {
    font-size: 1.3rem;
    color: #cccccc;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}

/* Sections de contenu */
.about-section {
    background: #ffffff !important;
    padding: 3rem 2.5rem;
    margin-bottom: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #d4af37;
}

.about-section h2 {
    color: #d4af37 !important;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
}

.about-section p {
    color: #333333 !important;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-align: justify;
}

.about-section p:last-child {
    margin-bottom: 0;
}

/* Liste des jeux */
.about-section .jeux-list {
    list-style: none;
    padding-left: 0;
    margin: 2rem 0;
}

.about-section .jeux-list li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: #333333 !important;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.about-section .jeux-list li:before {
    content: "✨";
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

.about-section .jeux-list li strong {
    color: #d4af37 !important;
    font-weight: 700;
}

/* Section message final - Style spécial */
.about-section.message-final {
    background: #ffffff !important;
    border: 2px solid #d4af37 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

.about-section.message-final h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.about-section.message-final p {
    text-align: center;
    font-size: 1.15rem;
}

/* Message en surbrillance */
.highlight-message {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
    border-left: 4px solid #d4af37;
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 8px;
    text-align: center;
}

.highlight-message p {
    margin-bottom: 1rem;
    color: #333333 !important;
    font-size: 1.2rem;
    line-height: 1.6;
}

.highlight-message p:last-child {
    margin-bottom: 0;
}

.highlight-message strong {
    color: #d4af37 !important;
    font-size: 1.3rem;
    font-weight: 700;
}

/* Bouton retour */
.back-to-home {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.btn-back {
    display: inline-block;
    background: #d4af37;
    color: #000000;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.btn-back:hover {
    background: #b8941f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
}

/* Header et Footer - Cohérence avec index.html */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(13, 31, 38, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: var(--space-md) 0;
    transition: all var(--transition-base);
}

.container-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .logo img {
    height: 40px;
    width: auto;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
    font-size: 0.95rem;
}

.nav a:hover,
.nav a.active {
    color: var(--color-gold);
}

.btn-precommander {
    background: var(--color-gold);
    color: var(--color-dark-bg);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-precommander:hover {
    background: var(--color-gold-light);
    transform: translateY(-2px);
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #1a3a42 0%, #0f2830 100%);
    color: #ffffff;
    padding: 3rem 2rem;
    margin-top: 5rem;
}

.container-footer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.footer-column {
    margin-bottom: var(--space-2xl);
}

.footer-column h4 {
    color: #eda234;
    margin-bottom: var(--space-lg);
    font-size: 1.1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column li {
    margin-bottom: var(--space-sm);
}

.footer-column a {
    color: #eda234;
    opacity: 0.9;
    transition: color 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-column a:hover {
    color: #f5b942;
    text-decoration: underline;
}

.social-links {
    display: flex;
    gap: var(--space-md);
}

.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.social-links a:hover {
    background: var(--color-gold);
}

/* ========================================
   BOUTON CTA HISTOIRE - ACTE 2
   ======================================== */

.btn-story-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #eda234 0%, #d68f1f 100%);
    border: 2px solid #eda234;
    border-radius: 12px;
    text-decoration: none;
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 0;
    box-shadow: 0 4px 12px rgba(237, 162, 52, 0.3);
    position: relative;
    z-index: 1;
}

.btn-story-cta:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(237, 162, 52, 0.4);
    border-color: #f5b942;
    background: linear-gradient(135deg, #f5b942 0%, #eda234 100%);
}

.cta-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
}

.cta-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
    text-align: left;
}

.cta-main {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff !important;
    font-family: 'Crimson Text', serif;
    line-height: 1.2;
    display: block;
}

.cta-sub {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 400;
    line-height: 1.3;
    display: block;
}

.cta-arrow {
    font-size: 1.5rem;
    color: #ffffff !important;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    line-height: 1;
    display: inline-block;
}

.btn-story-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* Style pour le message final avec emoji */
.message-final {
    font-style: italic;
    color: #eda234;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .btn-story-cta {
        padding: 1rem 1.5rem;
        gap: 0.75rem;
    }
    
    .cta-icon {
        font-size: 1.5rem;
    }
    
    .cta-main {
        font-size: 1rem;
    }
    
    .cta-sub {
        font-size: 0.8rem;
    }
    
    .cta-arrow {
        font-size: 1.25rem;
    }
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-2xl);
}

.footer-bottom p {
    color: #ffffff;
    margin: 1rem 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

/* RESPONSIVE PAGE À PROPOS */
@media (max-width: 968px) {
    .page-about .container {
        padding: 0 1.5rem;
    }
    
    .about-section {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .hero-about {
        padding: 6rem 1.5rem 4rem;
        margin-top: 70px;
    }
    
    .hero-about h1 {
        font-size: 2rem;
    }
    
    .hero-about .subtitle {
        font-size: 1.1rem;
    }
    
    .about-section {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .about-section h2 {
        font-size: 1.6rem;
    }
    
    .about-section p {
        font-size: 1rem;
        text-align: left;
    }
    
    .about-section .jeux-list li {
        font-size: 1rem;
    }
    
    .highlight-message {
        padding: 1.5rem;
    }
    
    .highlight-message p {
        font-size: 1.1rem;
    }
    
    .highlight-message strong {
        font-size: 1.2rem;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .nav {
        display: none;
    }
    
    .container-footer {
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-about h1 {
        font-size: 1.6rem;
    }
    
    .about-section {
        padding: 1.5rem 1rem;
    }
    
    .about-section h2 {
        font-size: 1.4rem;
    }
    
    .about-section p {
        font-size: 0.95rem;
    }
    
    .about-section .jeux-list li {
        font-size: 0.95rem;
        padding-left: 1.5rem;
    }
    
    .highlight-message {
        padding: 1rem;
    }
    
    .highlight-message p {
        font-size: 1rem;
    }
    
    .highlight-message strong {
        font-size: 1.1rem;
    }
    
    .btn-back {
        font-size: 0.9rem;
        padding: 0.7rem 1.5rem;
    }
}

/* S'assurer que le bouton est visible dans .founder-intro-text */
.founder-intro-text {
    overflow: visible !important;
}

/* ============================================
   BOUTON "LIRE L'HISTOIRE COMPLÈTE" - SOUS EN RÉSUMÉ
   ============================================ */

/* Container du bouton */
.cta-below-summary {
    text-align: center;
    margin-top: 0.5rem !important; /* Réduit de 2rem à 0.5rem pour rapprocher du container */
    margin-bottom: 1rem;
    padding: 0 1rem;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
}

/* Bouton petit et élégant */
.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #d4af37;
    padding: 0.7rem 1.5rem;
    border: 2px solid #d4af37;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}

.btn-read-more:hover {
    background: #d4af37;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Icône */
.btn-read-more .icon {
    font-size: 1.2rem;
    line-height: 1;
}

/* Texte */
.btn-read-more .text {
    line-height: 1;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .cta-below-summary {
        display: block !important; /* IMPORTANT - Forcer l'affichage */
        text-align: center;
        margin-top: 0.5rem !important; /* Réduit pour rapprocher du container */
        margin-bottom: 1.5rem !important;
        padding: 0 1rem;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 10;
    }
    
    .btn-read-more {
        display: inline-flex !important; /* IMPORTANT - Forcer l'affichage */
        padding: 0.7rem 1.3rem !important;
        font-size: 0.9rem !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .btn-read-more .icon {
        font-size: 1.1rem;
    }
    
    /* S'assurer que le slide texte affiche le bouton */
    .philosophy-slide.text-slide .cta-below-summary {
        display: block !important;
    }
    
    /* S'assurer que le conteneur ne cache pas le bouton */
    .philosophy-slide,
    .text-slide {
        overflow: visible !important;
    }
    
    .video-philosophy-container {
        overflow: visible !important;
    }
}

/* Responsive petit mobile */
@media (max-width: 480px) {
    .cta-below-summary {
        margin-top: 0.5rem !important; /* Réduit pour rapprocher du container */
        margin-bottom: 1.25rem !important;
    }
    
    .btn-read-more {
        padding: 0.6rem 1.1rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-read-more .icon {
        font-size: 1rem;
    }
}

/* ============================================
   RÉVÉLATION TRILOGIE - VIDÉOS DE RÉVÉLATION
   ============================================ */

/* === Révélation des 3 jeux : Ajustement des proportions === */
#revelation-trilogie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #faf9f6; /* Blanc cassé chaud */
    padding: 5rem 0; /* Augmenté pour plus d'espace vertical */
    gap: 2rem; /* Augmenté pour plus d'espace entre les boîtes */
    min-height: 66vh; /* hauteur de 2/3 de hero */
    position: relative;
    overflow: hidden;
}

#revelation-trilogie .container {
    display: flex;
    flex-direction: column; /* Colonne pour empiler titre + boîtes */
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 2rem; /* Augmenté pour plus d'espace entre les boîtes */
}

/* Wrapper pour les 3 boîtes vidéo (côte à côte) */
.revelation-boxes-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 2rem; /* Espace entre les boîtes */
}

/* ============================================
   TITRE SECTION TRIPANEL
   ============================================ */
.tripanel-header {
    text-align: center;
    margin-bottom: 50px; /* Réduit de 60px à 50px */
    padding: 40px 20px 0;
    width: 100%;
    animation: fadeInUp 1s ease;
}

.tripanel-title {
    font-family: var(--font-heading, 'Crimson Text', Georgia, serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #eda234; /* OR/DORÉ au lieu de bleu-vert */
    margin-bottom: 15px; /* Réduit de 20px à 15px */
    letter-spacing: -0.5px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(237, 162, 52, 0.2); /* Léger glow */
}

.tripanel-subtitle {
    font-family: var(--font-heading, 'Crimson Text', Georgia, serif);
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-style: italic;
    color: #4d727b; /* Bleu-vert élégant au lieu de vert terne */
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 1; /* 100% au lieu de 0.9 */
}

/* Séparateur décoratif entre titre et sous-titre */
.title-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
    max-width: 300px;
}

.title-separator::before,
.title-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(237, 162, 52, 0.3),
        transparent
    );
}

.separator-star {
    font-size: 1.5rem;
    color: #eda234; /* Or */
    opacity: 0.7;
}

/* Animation d'apparition */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.revelation-video-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrage vertical */
    width: 28%; /* Réduit de 32% à 28% (réduction ~12%) */
    cursor: pointer; /* Curseur pointer pour indiquer que c'est cliquable */
    transition: all 0.4s ease;
}

/* ============================================
   RÉVÉLATION TRILOGIE - SYNCHRONISATION POSTERS/VIDÉOS/BOÎTES
   Les posters (attribut poster), vidéos et boîtes finales doivent avoir
   LA MÊME taille pour éviter les sauts visuels
   ============================================ */

/* Styles de base pour toutes les vidéos - NE PAS MODIFIER LES CONTAINERS */
#revelation-trilogie video {
    width: 100%;
    height: 52vh;
    object-fit: cover; /* cover pour que la première frame remplisse le conteneur */
    object-position: center; /* Centre l'image pour éviter de couper les parties importantes */
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease; /* transition pour toutes les propriétés */
    background: #000;
    display: block;
    margin: 0 auto; /* Centrage */
    transform-origin: center center;
    /* État initial : EN COULEURS (pas de désaturation) */
    filter: none;
    opacity: 1;
}

/* Une fois que la vidéo joue, on passe à contain pour l'animation */
/* EXCEPTION : MOH garde cover pour éviter le cadre blanc */
#revelation-trilogie video[data-playing]:not(#video2):not([src*="reveal-moh"]),
.revelation-video-wrapper video[data-playing]:not(#video2):not([src*="reveal-moh"]) {
    object-fit: contain; /* contain pour l'animation pour éviter les coupures */
    object-position: center; /* Centre l'animation */
}

/* MOH garde cover même pendant la lecture */
#revelation-trilogie video#video2[data-playing],
#revelation-trilogie video[src*="reveal-moh"][data-playing],
.revelation-video-wrapper video#video2[data-playing],
.revelation-video-wrapper video[src*="reveal-moh"][data-playing] {
    object-fit: cover !important;
    object-position: center center !important;
}

/* ============================================
   1. VIDÉOS D'ANIMATION - JDC (30% réduction)
   ============================================ */
video[src*="reveal-jdc"],
#video1 {
    transform: scale(0.7); /* 70% de la taille = -30% réduction */
    transform-origin: center center;
}

/* ============================================
   2. VIDÉOS D'ANIMATION - MOH et POZ (35% réduction)
   FORCER LE POSTER À REMPLIR LE CONTAINER
   ============================================ */
video[src*="reveal-moh"],
video[src*="reveal-poz"],
#video2,
#video3 {
    transform: scale(0.65);
    transform-origin: center center;
}

/* CORRECTION POSTER MOH - Forcer remplissage complet */
video#video2,
video[src*="reveal-moh"] {
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
}

/* Forcer le poster à remplir même avant que la vidéo charge */
video#video2::before,
video[src*="reveal-moh"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* ============================================
   3. POSTERS (affichés avant les vidéos via attribut poster)
   Les posters héritent automatiquement de la taille des vidéos
   grâce à object-fit: contain et les mêmes dimensions
   ============================================ */
/* Les posters sont gérés par l'attribut poster des vidéos,
   donc ils prennent automatiquement la même taille que les vidéos */

/* ============================================
   4. ÉTAT INACTIVE - Désaturation après animation
   ============================================ */
/* Classe ajoutée par JavaScript après la fin de l'animation */
.revelation-video-wrapper.inactive video,
#revelation-trilogie video.inactive {
    filter: grayscale(50%) brightness(0.95); /* Désaturation moins radicale (50% au lieu de 100%) */
    opacity: 0.85; /* Opacité plus élevée (85% au lieu de 70%) */
    transition: filter 1s ease, opacity 1s ease; /* Désaturation progressive */
}

/* S'assurer que le hover ne soit pas affecté par la transition de désaturation */
.revelation-video-wrapper.inactive:hover video,
#revelation-trilogie video.inactive:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Pas de transition sur filter/opacity */
}

/* ============================================
   5. HOVER - Resaturation INSTANTANÉE + Zoom animé
   ============================================ */
/* Hover uniquement sur les éléments inactive */
.revelation-video-wrapper.inactive:hover video,
#revelation-trilogie video.inactive:hover {
    filter: grayscale(0%) brightness(1.05) !important; /* Resaturation INSTANTANÉE */
    opacity: 1 !important;
    box-shadow: 0 12px 35px rgba(237, 162, 52, 0.35); /* Ombre dorée */
    /* Pas de transition sur filter/opacity pour hover instantané */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Seulement zoom animé */
}

/* Zoom spécifique pour chaque vidéo au hover (uniquement si inactive) - ANIMÉ */
.revelation-video-wrapper.inactive:hover video[src*="reveal-jdc"],
.revelation-video-wrapper.inactive:hover #video1,
#video1.inactive:hover {
    transform: scale(0.756); /* JDC : 0.7 * 1.08 = 0.756 (zoom 8%) */
    transition: transform 0.3s ease; /* Zoom animé */
}

.revelation-video-wrapper.inactive:hover video[src*="reveal-moh"],
.revelation-video-wrapper.inactive:hover video[src*="reveal-poz"],
.revelation-video-wrapper.inactive:hover #video2,
.revelation-video-wrapper.inactive:hover #video3,
#video2.inactive:hover,
#video3.inactive:hover {
    transform: scale(0.702); /* MOH/POZ : 0.65 * 1.08 = 0.702 (zoom 8%) */
    transition: transform 0.3s ease; /* Zoom animé */
}

/* ============================================
   6. BOUTON REPLAY - MINIMALISTE
   ============================================ */
.revelation-replay-btn {
    position: absolute;
    bottom: 50px; /* Positionné plus haut sous le container */
    left: 50%; /* Centré horizontalement */
    transform: translateX(-50%) scale(0.8); /* Centrage + échelle initiale */
    z-index: 20;
    
    /* Style : petit cercle */
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Apparence */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border: 2px solid rgba(237, 162, 52, 0.7);
    border-radius: 50%;
    cursor: pointer;
    
    /* Animation */
    transition: all 0.3s ease;
    
    /* État initial : caché */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Icône SVG */
.revelation-replay-btn svg {
    width: 18px;
    height: 18px;
    stroke: #eda234; /* Orange/doré */
    transition: transform 0.3s ease;
}

/* État visible */
.revelation-replay-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1); /* Centrage maintenu + échelle normale */
}

/* Hover */
.revelation-replay-btn:hover {
    background: rgba(237, 162, 52, 0.9);
    border-color: #eda234;
    box-shadow: 0 3px 10px rgba(237, 162, 52, 0.4);
    transform: translateX(-50%) scale(1.1); /* Centrage maintenu + zoom */
}

.revelation-replay-btn:hover svg {
    stroke: white;
    transform: rotate(-180deg); /* Rotation au survol */
}

/* Active (clic) */
.revelation-replay-btn:active {
    transform: translateX(-50%) scale(0.95); /* Centrage maintenu + compression */
}

/* ============================================
   7. INDICATEUR "DÉCOUVRIR" au hover
   ============================================ */
.revelation-video-wrapper::after {
    content: 'Découvrir';
    position: absolute;
    bottom: 100px; /* Position au-dessus du titre (ajusté pour éviter chevauchement) */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Légèrement en dessous */
    
    /* Style du bouton */
    background: linear-gradient(135deg, #eda234, #d48f1f);
    color: white;
    padding: 10px 25px;
    border-radius: 25px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    
    /* Animation d'apparition */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    
    /* Effet de profondeur */
    box-shadow: 0 4px 15px rgba(237, 162, 52, 0.4);
    z-index: 10;
}

/* Apparition au hover (uniquement si inactive) */
.revelation-video-wrapper.inactive:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* Remonte légèrement */
}

/* Ajustement spécifique pour JDC (container plus grand) */
.revelation-video-wrapper:nth-child(1)::after {
    bottom: 120px; /* Augmenté de 100px à 120px pour éviter le chevauchement avec le container plus grand */
}

/* ============================================
   7. EFFET CLIC (feedback visuel)
   ============================================ */
.revelation-video-wrapper.inactive:active video,
#revelation-trilogie video.inactive:active {
    transform: scale(0.95); /* Légère compression */
    transition: transform 0.1s ease;
}

/* Compression spécifique pour chaque vidéo au clic (uniquement si inactive) */
.revelation-video-wrapper.inactive:active video[src*="reveal-jdc"],
.revelation-video-wrapper.inactive:active #video1,
#video1.inactive:active {
    transform: scale(0.665); /* JDC : 0.7 * 0.95 = 0.665 */
}

.revelation-video-wrapper.inactive:active video[src*="reveal-moh"],
.revelation-video-wrapper.inactive:active video[src*="reveal-poz"],
.revelation-video-wrapper.inactive:active #video2,
.revelation-video-wrapper.inactive:active #video3,
#video2.inactive:active,
#video3.inactive:active {
    transform: scale(0.6175); /* MOH/POZ : 0.65 * 0.95 = 0.6175 */
}

/* ============================================
   5. BOÎTES FINALES (si elles apparaissent après l'animation)
   Même taille que les vidéos pour éviter les sauts
   ============================================ */
/* Boîte finale JDC - 30% réduction (identique à la vidéo) */
.box-final-jdc,
.game-box-jdc,
img[src*="jdc_box"],
img[src*="jdc-box"],
#revelation-trilogie img[src*="jdc"] {
    transform: scale(0.7);
    transform-origin: center center;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Boîtes finales MOH et POZ - 35% réduction (identique aux vidéos) */
.box-final-moh,
.box-final-poz,
.game-box-moh,
.game-box-poz,
img[src*="moh_box"],
img[src*="poz_box"],
img[src*="moh-box"],
img[src*="poz-box"],
#revelation-trilogie img[src*="moh"],
#revelation-trilogie img[src*="poz"] {
    transform: scale(0.65);
    transform-origin: center center;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ============================================
   7. TITRES SOUS LES ANIMATIONS (pas overlay)
   ============================================ */
.revelation-text,
.game-label {
    /* Position : en dessous du container vidéo/image */
    position: relative; /* Pas absolute, donc sous la vidéo */
    text-align: center;
    margin-top: 20px;
    
    /* Style texte */
    font-family: var(--font-heading, 'Crimson Text', Georgia, serif);
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50; /* Gris foncé élégant */
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Apparition progressive */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease, color 0.3s ease;
}

/* État visible (classe ajoutée par JavaScript) */
.revelation-text.visible,
.game-label.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hover sur le wrapper : titre devient doré (uniquement si inactive) */
.revelation-video-wrapper.inactive:hover .revelation-text,
.revelation-video-wrapper.inactive:hover .game-label {
    color: #eda234; /* Doré au survol */
}

/* Responsive : tablette (2 colonnes) */
@media (max-width: 1023px) {
    #revelation-trilogie {
        padding: 4rem 1rem; /* Augmenté pour plus d'espace */
        gap: 1.5rem; /* Augmenté */
    }
    
    .tripanel-header {
        margin-bottom: 40px;
        padding: 30px 15px 0;
    }
    
    .tripanel-title {
        font-size: 1.8rem;
        margin-bottom: 12px; /* Réduit pour mobile aussi */
    }
    
    .tripanel-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .revelation-video-wrapper {
        width: 48%;
    }
    
    #revelation-trilogie video {
        height: 40vh; /* Réduit proportionnellement (de 50vh à 40vh) */
    }
    
    /* Tailles spécifiques maintenues sur tablette */
    video[src*="reveal-jdc"],
    #video1,
    .box-final-jdc,
    img[src*="jdc_box"],
    img[src*="jdc-box"] {
        transform: scale(0.7);
    }
    
    video[src*="reveal-moh"],
    video[src*="reveal-poz"],
    #video2,
    #video3,
    .box-final-moh,
    .box-final-poz,
    img[src*="moh_box"],
    img[src*="poz_box"] {
        transform: scale(0.65);
    }
    
    .revelation-text,
    .game-label {
        font-size: 14px;
        letter-spacing: 1.5px;
        margin-top: 15px;
    }
    
    /* Bouton replay sur tablette */
    .revelation-replay-btn {
        width: 32px;
        height: 32px;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
    }
    
    .revelation-replay-btn.visible {
        transform: translateX(-50%) scale(1);
    }
    
    .revelation-replay-btn:hover {
        transform: translateX(-50%) scale(1.1);
    }
    
    .revelation-replay-btn:active {
        transform: translateX(-50%) scale(0.95);
    }
    
    .revelation-replay-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Responsive : mobile (1 colonne) */
@media (max-width: 767px) {
    #revelation-trilogie {
        padding: 3rem 1rem; /* Augmenté pour plus d'espace */
        gap: 2rem; /* Augmenté */
    }
    
    .tripanel-header {
        margin-bottom: 30px;
        padding: 20px 10px 0;
    }
    
    .tripanel-title {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }
    
    .tripanel-subtitle {
        font-size: 0.95rem;
        padding: 0 15px;
    }
    
    .title-separator {
        max-width: 200px;
        gap: 15px;
    }
    
    .separator-star {
        font-size: 1.2rem;
    }
    
    .revelation-boxes-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .revelation-video-wrapper {
        width: 100%;
        max-width: 60%;
        aspect-ratio: 9 / 16; /* Format portrait vertical pour vidéos type stories */
    }
    
    #revelation-trilogie video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Remplit le container sans déformation */
    }
    
    /* Tailles spécifiques maintenues sur mobile */
    video[src*="reveal-jdc"],
    #video1,
    .box-final-jdc,
    img[src*="jdc_box"],
    img[src*="jdc-box"] {
        transform: scale(0.7);
    }
    
    video[src*="reveal-moh"],
    video[src*="reveal-poz"],
    #video2,
    #video3,
    .box-final-moh,
    .box-final-poz,
    img[src*="moh_box"],
    img[src*="poz_box"] {
        transform: scale(0.65);
    }
    
    .revelation-text,
    .game-label {
        font-size: 14px;
        letter-spacing: 1.5px;
        margin-top: 15px;
    }
    
    /* ============================================
       RESPONSIVE MOBILE - Ajustements hover
       ============================================ */
    /* Sur mobile : indicateur toujours visible */
    .revelation-video-wrapper::after {
        opacity: 0.9;
        bottom: 20px;
        font-size: 12px;
        padding: 8px 20px;
    }
    
    /* Désaturation moins forte sur mobile (uniquement si inactive) */
    #revelation-trilogie video.inactive,
    .revelation-video-wrapper.inactive video {
        filter: grayscale(60%);
        opacity: 0.85;
    }
    
    /* Effet au tap */
    .revelation-video-wrapper.inactive:active video {
        filter: grayscale(0%);
    }
    
    /* Indicateur visible par défaut sur mobile si inactive */
    .revelation-video-wrapper.inactive::after {
        opacity: 0.9;
        bottom: 20px;
        font-size: 12px;
        padding: 8px 20px;
    }
    
    /* Ajustement spécifique pour JDC sur mobile (container plus grand) */
    .revelation-video-wrapper:nth-child(1)::after {
        bottom: 30px; /* Augmenté pour éviter le chevauchement avec le container plus grand */
    }
    
}

/* ============================================
   8. ACCESSIBILITÉ - Focus clavier
   ============================================ */
/* Focus clavier (pour navigation sans souris) */
.revelation-video-wrapper:focus,
.revelation-video-wrapper:focus-within {
    outline: 3px solid #eda234;
    outline-offset: 5px;
    border-radius: 12px;
}

.revelation-video-wrapper:focus::after,
.revelation-video-wrapper:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   9. VARIANTE : Textes personnalisés par jeu
   ============================================ */
/* Si vous voulez des textes différents pour chaque jeu,
   ajoutez ces classes aux wrappers dans le HTML */
.revelation-video-wrapper:nth-child(1)::after {
    content: 'Découvrir'; /* JDC par défaut */
}

.revelation-video-wrapper:nth-child(2)::after {
    content: 'Découvrir'; /* MOH par défaut */
}

.revelation-video-wrapper:nth-child(3)::after {
    content: 'Découvrir'; /* POZ par défaut */
}

/* Variantes personnalisées (à activer si besoin) */
/*
.revelation-video-wrapper:nth-child(1)::after {
    content: 'Voyager dans l\'histoire';
}

.revelation-video-wrapper:nth-child(2)::after {
    content: 'Tester vos connaissances';
}

.revelation-video-wrapper:nth-child(3)::after {
    content: 'Explorer les mitzvot';
}
*/