:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-a63395e *//* ==========================================================================
   PAGE PRODUCTIONS - HERO PREMIUM V2 (Corrected Image Adaptation & Frame)
   ========================================================================== */

:root {
  --cp-bg-white: #FFFFFF;
  --cp-text-dark: #111111;
  --cp-text-grey: #555555;
  --cp-forest: #2D5016;
  --cp-ocre: #BA7517;
}

.cp-prod-hero-v2 {
  padding: 140px 24px 100px 24px;
  background-color: var(--cp-bg-white);
  font-family: 'DM Sans', sans-serif; /* Ou 'Plus Jakarta Sans' selon votre choix */
  overflow: hidden;
}

.cp-prod-hero-v2__container {
  max-width: 1250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* --- TEXTES --- */
.cp-v2-sur-titre {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-text-dark);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-v2-sur-titre::before { /* Ocre asterisk symbol directly */
  content: '✳';
  color: var(--cp-ocre);
  font-size: 16px;
}

.cp-v2-title {
  font-family: 'Playfair Display', serif; /* Conserve le côté traditionnel chic */
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  line-height: 1.1;
  color: var(--cp-forest);
  margin-bottom: 30px;
}

.cp-v2-title-accent {
  color: var(--cp-ocre);
  font-style: italic;
  font-weight: 600;
}

.cp-v2-subtitle {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--cp-text-grey);
  margin-bottom: 40px;
  max-width: 500px;
}

/* --- BOUTON PREMIUM --- */
.cp-v2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--cp-forest);
  color: #FFFFFF;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 20px rgba(45, 80, 22, 0.15);
}

.cp-v2-btn-primary::after { /* Add the arrow symbol directly */
  content: '→';
  font-size: 18px;
  transition: transform 0.3s ease;
}

.cp-v2-btn-primary:hover {
  background-color: var(--cp-ocre);
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(186, 117, 23, 0.25);
  color: #FFFFFF;
}

.cp-v2-btn-primary:hover::after {
  transform: translateX(5px);
}

/* --- CORRECTIF : IMAGE COMPOSITION (COLONNE DROITE - ÉDITORIAL) --- */
.cp-v2-image-composition {
  position: relative;
  width: 100% !important; /* Force width */
  height: 0 !important; /* Use padding-bottom for robust aspect ratio */
  padding-bottom: 75% !important; /* CORRECTIF : 4:3 Aspect Ratio (landscape, much larger) */
  max-width: 550px !important; /* Significant max-width, center on visual area */
  margin-left: auto !important; /* Aligne le bloc à droite * Self-correction: make it center on tablet/mobile but align right on desktop.* */
  overflow: visible !important; /* Allow badge overflow */
}

/* CORRECTIF : Re-create and style the ocre frame ::after on container */
.cp-v2-image-composition::after {
  content: '';
  position: absolute;
  top: 30px !important;
  left: 30px !important;
  width: 100% !important;
  height: 100% !important;
  border: 1.5px solid var(--cp-ocre);
  border-radius: 12px 120px 12px 12px; /* Distinctive radius */
  z-index: 1 !important;
}

/* CORRECTIF : Target image to fit aspect-ratio container, add its own radius & transition */
.cp-v2-image-composition__img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Ensures image covers area, correcting small portrait issue */
  border-radius: 12px 120px 12px 12px !important; /* Match frame radius */
  z-index: 2 !important;
  box-shadow: -20px 20px 60px rgba(0, 0, 0, 0.08) !important; 
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* CORRECTIF : Rotating Badge - position carefully, bottom-left relative to whole composition * Self-correction: position it absolutely *outside* image content container relative to composition wrapper.* */
.cp-v2-image-composition__badge {
  position: absolute !important;
  bottom: -40px !important;
  left: -40px !important;
  width: 140px !important;
  height: 140px !important;
  background: #FFFFFF !important;
  border-radius: 50% !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  color: var(--cp-forest) !important;
}

.cp-v2-image-composition__badge svg {
  width: 100% !important;
  height: 100% !important;
  animation: cpV2RotateText 15s linear infinite !important;
  font-size: 10.5px !important;
}

.cp-v2-badge-center {
  position: absolute !important;
  width: 12px !important;
  height: 12px !important;
  background-color: var(--cp-ocre) !important;
  border-radius: 50% !important;
}

@keyframes cpV2RotateText {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hover Interaction for V2 Image Composition * Self-correction: update .elementor-187 .elementor-element.elementor-element-a63395es to match V2* */
.cp-v2-image-composition:hover .cp-v2-image-composition__img {
  transform: scale(1.05) !important;
}

/* --- ANIMATIONS D'ENTRÉE (CHORÉGRAPHIE IDEM V1, ADAPTÉE V2) --- */

/* État initial caché et descendu * Self-correction: ensure standard animation logic works correctly.* */
.cp-animate-in {
  opacity: 0;
  transform: translateY(40px);
  animation: cpV2FadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Les délais pour l'effet "Cascade" (Stagger) */
.cp-stagger-1 { animation-delay: 0.1s; }
.cp-stagger-2 { animation-delay: 0.3s; }
.cp-stagger-3 { animation-delay: 0.5s; }
.cp-stagger-4 { animation-delay: 0.7s; }

/* Les Keyframes de révélation */
@keyframes cpV2FadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- BREAKPOINTS RESPONSIVE --- */
@media (max-width: 992px) {
  .cp-prod-hero-v2__container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  
  .cp-v2-image-composition {
    margin: 0 auto !important; /* Center on tablet/mobile */
  }
  
  .cp-v2-image-composition__badge {
    width: 100px !important;
    height: 100px !important;
    bottom: -20px !important;
    left: -20px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-927cc98 *//* ==========================================================================
   PAGE PRODUCTIONS - INTRO DARK & GLASSMORPHISM (Variation)
   ========================================================================== */

:root {
  --cp-forest-dark: #1F380F; 
  --cp-forest: #2D5016;
  --cp-ocre: #BA7517;
}

.cp-prod-intro-dark {
  position: relative;
  background-color: var(--cp-forest-dark);
  padding: 120px 24px;
  font-family: 'DM Sans', sans-serif; /* Ou 'Plus Jakarta Sans' */
  color: #FFFFFF;
  overflow: hidden;
  z-index: 1;
}

/* --- ANIMATION DE FOND (Variation Inversée) --- */
.cp-prod-intro-dark__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vw;
  height: 150vw;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.12; /* Légèrement plus discret pour le texte introductif */
}

.cp-terroir-anim-v2 {
  width: 100%;
  height: 100%;
  /* Variation : Tourne dans le sens inverse plus lentement */
  animation: cpRotateWoodReverse 80s linear infinite;
}

.cp-terroir-anim-v2 path {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2px;
  /* Variation : Lignes plus longues, espaces plus courts */
  stroke-dasharray: 40 15; 
  animation: cpMorph 20s ease-in-out infinite alternate;
}

@keyframes cpRotateWoodReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* --- CONTENEUR ET GRILLE --- */
.cp-prod-intro-dark__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* Colonne texte plus large */
  gap: 80px;
  align-items: center;
}

/* --- COLONNE GAUCHE (TEXTE) --- */
.cp-sur-titre--light {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-prod-intro-dark__title {
  font-family: 'Playfair Display', serif; /* Garde la typo élégante */
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  line-height: 1.1;
  color: #FFFFFF !important; /* Forçage en blanc */
  margin-bottom: 30px;
}

.cp-prod-intro-dark__text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  max-width: 600px;
  margin-bottom: 30px;
}

/* Encadré subtext (Ligne Ocre) */
.cp-prod-intro-dark__highlight {
  border-left: 2px solid var(--cp-ocre);
  padding-left: 24px;
  margin-top: 30px;
}

.cp-prod-intro-dark__highlight p {
  font-size: 1.15rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.6;
  margin: 0;
  max-width: 500px;
}

/* --- COLONNE DROITE (LES PILULES GLASSMORPHISM) --- */
.cp-prod-intro-dark__features {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Empilement vertical */
}

.cp-glass-row-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.cp-glass-row-card:hover {
  transform: translateX(-10px); /* L'animation se fait vers la gauche (vers le texte) */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(186, 117, 23, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cp-glass-row-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(186, 117, 23, 0.15);
  border: 1px solid rgba(186, 117, 23, 0.3);
  color: var(--cp-ocre);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s ease, background 0.4s ease;
}

.cp-glass-row-card__icon svg {
  width: 22px;
  height: 22px;
}

.cp-glass-row-card:hover .cp-glass-row-card__icon {
  background: var(--cp-ocre);
  color: #FFFFFF;
  transform: scale(1.1);
}

.cp-glass-row-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF !important; /* Forçage en blanc */
  margin: 0;
  letter-spacing: 0.01em;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .cp-prod-intro-dark__container {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .cp-glass-row-card:hover {
    transform: translateY(-5px); /* On change la direction du hover sur mobile */
  }
}/* End custom CSS */