/**
 * Hero Image Blending v2 - Clémence Fouquet
 * Corrections: Image plus grande, aura visible, animations rapides, full desktop 1920px+
 * v2.6.0: MASQUAGE formes solides + NOUVELLES formes dégradées pour fusion naturelle
 * Version: 2.6.0
 */

/* ========================================
   0. MASQUER FORMES SOLIDES ORIGINALES (organic-shapes-style.css)
   ======================================== */

/* Masquer complètement les formes solides pour hero et sections violettes */
.hero-section .organic-shapes-container .fluid-shape-orange-large,
.hero-section .organic-shapes-container .fluid-shape-turquoise-medium,
.hero-section .organic-shapes-container .fluid-shape-violet-large,
.section-violet-organic .organic-shapes-container .fluid-shape-orange-large,
.section-violet-organic .organic-shapes-container .fluid-shape-turquoise-medium,
.section-violet-organic .organic-shapes-container .fluid-shape-violet-large {
  display: none !important;
}

/* ========================================
   1. IMAGE PLUS GRANDE AVEC AURA VISIBLE
   ======================================== */

.hero-section figure {
  position: relative;
  /* Agrandir l'image de 30% */
  transform: scale(1.3);
  transform-origin: center center;
}

/* Cibler l'image dans le hero */
.hero-section figure img[alt*="Clémence"],
.hero-section .wp-block-image img {
  /* Ombre douce PLUS FORTE pour profondeur */
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.4))
          drop-shadow(0 15px 40px rgba(91, 46, 127, 0.6))
          drop-shadow(0 0 60px rgba(248, 148, 32, 0.3));

  /* Légère opacité pour fusion */
  opacity: 0.98;

  /* Transition fluide */
  transition: all 0.4s ease;

  /* Position relative pour z-index */
  position: relative;
  z-index: 10;
}

/* ========================================
   2. AURA ORANGE TRÈS VISIBLE
   ======================================== */

/* Créer une AURA ORANGE FORTE qui entoure l'image */
.hero-section figure::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: radial-gradient(
    ellipse at center,
    rgba(248, 148, 32, 0.4) 0%,
    rgba(248, 148, 32, 0.25) 30%,
    rgba(81, 196, 181, 0.15) 60%,
    transparent 80%
  );
  z-index: -1;
  filter: blur(40px);
  pointer-events: none;
  animation: pulse-aura 4s ease-in-out infinite;
}

@keyframes pulse-aura {
  0%, 100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* ========================================
   3. GRADIENT OVERLAY POUR FONDRE L'IMAGE
   ======================================== */

/* Overlay gradient pour fondre les bords SANS ligne verticale */
.hero-section figure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 60% 50%,
    transparent 35%,
    rgba(91, 46, 127, 0.08) 70%,
    rgba(91, 46, 127, 0.15) 100%
  );
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: multiply;
}

/* ========================================
   4. ANIMATION FLOTTANTE SUBTILE
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero-section figure {
    animation: float-soft 8s ease-in-out infinite;
  }

  @keyframes float-soft {
    0%, 100% {
      transform: scale(1.3) translateY(0) translateX(0);
    }
    25% {
      transform: scale(1.3) translateY(-15px) translateX(8px);
    }
    50% {
      transform: scale(1.3) translateY(0) translateX(-8px);
    }
    75% {
      transform: scale(1.3) translateY(15px) translateX(5px);
    }
  }
}

/* Hover subtil pour dynamisme */
.hero-section figure img[alt*="Clémence"]:hover,
.hero-section .wp-block-image img:hover {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 35px 90px rgba(0, 0, 0, 0.45))
          drop-shadow(0 18px 50px rgba(91, 46, 127, 0.7))
          drop-shadow(0 0 80px rgba(248, 148, 32, 0.5));
}

/* ========================================
   5. CORRIGER LES ANIMATIONS DE TEXTE (TROP LENTES)
   ======================================== */

/* Animations fade-in BEAUCOUP PLUS RAPIDES */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px); /* Réduit de 30px à 20px */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Réduit de 0.6s à 0.3s */
  }

  .fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Délais progressifs RÉDUITS */
  .fade-in-on-scroll:nth-child(1) { transition-delay: 0s; }
  .fade-in-on-scroll:nth-child(2) { transition-delay: 0.05s; } /* Réduit de 0.1s */
  .fade-in-on-scroll:nth-child(3) { transition-delay: 0.1s; }
  .fade-in-on-scroll:nth-child(4) { transition-delay: 0.15s; }
  .fade-in-on-scroll:nth-child(5) { transition-delay: 0.2s; }
}

/* ========================================
   6. DIVIDERS ORGANIQUES ENTRE SECTIONS
   ======================================== */

/* Divider entre sections - forme organique */
.section-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: transparent;
}

/* Vague organique SVG */
.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C240,20 480,100 720,60 C960,20 1200,100 1440,60 L1440,120 L0,120 Z' fill='%23fff8e7' fill-opacity='0.8'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  animation: wave-flow 15s ease-in-out infinite;
}

@keyframes wave-flow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5%);
  }
}

/* Divider violet vers beige */
.section-divider.violet-to-beige {
  background: linear-gradient(to bottom, #5b2e7f 0%, #fff8e7 100%);
}

.section-divider.violet-to-beige::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C320,100 640,20 960,60 C1120,80 1280,40 1440,60 L1440,120 L0,120 Z' fill='%23fff8e7'/%3E%3C/svg%3E");
}

/* Divider beige vers blanc */
.section-divider.beige-to-white {
  background: linear-gradient(to bottom, #fff8e7 0%, #ffffff 100%);
}

.section-divider.beige-to-white::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C360,90 720,30 1080,60 C1260,75 1350,45 1440,60 L1440,120 L0,120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Divider blanc vers violet */
.section-divider.white-to-violet {
  background: linear-gradient(to bottom, #ffffff 0%, #5b2e7f 100%);
}

.section-divider.white-to-violet::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C280,30 560,90 840,60 C1120,30 1360,90 1440,60 L1440,120 L0,120 Z' fill='%235b2e7f'/%3E%3C/svg%3E");
}

/* ========================================
   7. ANIMATIONS GLOBALES TOUTES PAGES
   ======================================== */

/* S'applique automatiquement à toutes les pages */
body .wp-block-group,
body .wp-block-columns,
body .wp-block-cover {
  /* Animation rapide au scroll */
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

body .wp-block-group.visible,
body .wp-block-columns.visible,
body .wp-block-cover.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cartes services - animation depuis le bas */
.service-card {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ========================================
   8. RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Image moins agrandie sur mobile */
  .hero-section figure {
    transform: scale(1.1);
  }

  /* Aura plus petite sur mobile */
  .hero-section figure::before {
    width: 130%;
    height: 130%;
    filter: blur(30px);
  }

  /* Animation mobile plus simple */
  @media (prefers-reduced-motion: no-preference) {
    .hero-section figure {
      animation: float-soft-mobile 6s ease-in-out infinite;
    }

    @keyframes float-soft-mobile {
      0%, 100% {
        transform: scale(1.1) translateY(0);
      }
      50% {
        transform: scale(1.1) translateY(-10px);
      }
    }
  }

  /* Dividers plus petits sur mobile */
  .section-divider {
    height: 50px;
  }
}

/* ========================================
   9. RESPECTER PREFERS-REDUCED-MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-section figure,
  .fade-in-on-scroll,
  .service-card,
  .section-divider::before {
    animation: none !important;
    transition: none !important;
  }

  body .wp-block-group,
  body .wp-block-columns,
  body .wp-block-cover {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   10. FORMES ORGANIQUES AMÉLIORÉES
   ======================================== */

/* Étendre les formes au-delà de la ligne verticale */
.hero-section .fluid-shape-orange-large {
  opacity: 0.5;
  filter: blur(60px);
  mix-blend-mode: normal;
  width: 900px !important; /* Plus large */
  height: 700px !important; /* Plus haute */
}

.hero-section .fluid-shape-turquoise-medium {
  opacity: 0.4;
  filter: blur(70px);
  mix-blend-mode: normal;
  width: 700px !important;
  height: 600px !important;
}

.hero-section .fluid-shape-violet-large {
  opacity: 0.3;
  filter: blur(80px);
  mix-blend-mode: normal;
  width: 800px !important;
  height: 650px !important;
}

/* ========================================
   11. NOUVELLES FORMES DÉGRADÉES v2.6 (remplacement complet)
   ======================================== */

/* NOUVELLE FORME GAUCHE - Orange avec dégradé radial naturel */
.hero-section .organic-shapes-container::before {
  content: '';
  position: absolute;
  width: 1100px;
  height: 900px;
  top: 0;
  left: -250px;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(248, 148, 32, 0.85) 0%,      /* Orange fort au centre */
    rgba(248, 148, 32, 0.6) 25%,
    rgba(248, 148, 32, 0.35) 50%,
    rgba(248, 148, 32, 0.15) 75%,
    transparent 100%
  );
  border-radius: 45% 55% 48% 52%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: morph 20s ease-in-out infinite;
}

/* NOUVELLE FORME CENTRALE - Turquoise + Violet mélangés */
.hero-section .organic-shapes-container::after {
  content: '';
  position: absolute;
  width: 1400px;
  height: 1000px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(81, 196, 181, 0.7) 0%,       /* Turquoise central fort */
    rgba(81, 196, 181, 0.55) 20%,
    rgba(91, 46, 127, 0.6) 40%,       /* Transition vers violet */
    rgba(91, 46, 127, 0.4) 60%,
    rgba(248, 148, 32, 0.25) 80%,     /* Touche orange aux bords */
    transparent 100%
  );
  border-radius: 48% 52% 45% 55%;
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
  animation: rotate-pulse-central 25s ease-in-out infinite;
}

/* NOUVELLE FORME DROITE - Violet avec dégradé radial naturel */
.hero-section .organic-shapes-container > div:first-child {
  content: '';
  position: absolute;
  width: 1000px;
  height: 850px;
  top: 0;
  right: -200px;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(91, 46, 127, 0.9) 0%,        /* Violet fort au centre */
    rgba(91, 46, 127, 0.7) 25%,
    rgba(91, 46, 127, 0.45) 50%,
    rgba(91, 46, 127, 0.2) 75%,
    transparent 100%
  );
  border-radius: 52% 48% 55% 45%;
  filter: blur(40px);
  z-index: 2;
  pointer-events: none;
  animation: morph 30s ease-in-out infinite reverse;
}

@keyframes rotate-pulse-central {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  33% {
    transform: translate(-50%, -50%) rotate(120deg) scale(1.08);
    opacity: 1;
  }
  66% {
    transform: translate(-50%, -50%) rotate(240deg) scale(0.95);
    opacity: 0.9;
  }
}

/* RESPONSIVE - Forme centrale plus petite sur mobile */
@media (max-width: 768px) {
  .hero-section .organic-shapes-container::after {
    width: 400px;
    height: 400px;
    filter: blur(60px);
  }
  
  .hero-section .organic-shapes-container .fluid-shape-orange-large {
    width: 500px !important;
    height: 450px !important;
  }
  
  .hero-section .organic-shapes-container .fluid-shape-turquoise-medium {
    width: 450px !important;
    height: 400px !important;
  }
  
  .hero-section .organic-shapes-container .fluid-shape-violet-large {
    width: 480px !important;
    height: 420px !important;
  }
}

/* ========================================
   12. NOUVELLES FORMES DÉGRADÉES v2.6 - SECTIONS VIOLETTES
   ======================================== */

/* NOUVELLE FORME GAUCHE - Orange avec dégradé radial naturel */
.section-violet-organic .organic-shapes-container::before {
  content: '';
  position: absolute;
  width: 1100px;
  height: 900px;
  top: 0;
  left: -250px;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(248, 148, 32, 0.85) 0%,      /* Orange fort au centre */
    rgba(248, 148, 32, 0.6) 25%,
    rgba(248, 148, 32, 0.35) 50%,
    rgba(248, 148, 32, 0.15) 75%,
    transparent 100%
  );
  border-radius: 45% 55% 48% 52%;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: morph 20s ease-in-out infinite;
}

/* NOUVELLE FORME CENTRALE - Turquoise + Violet mélangés */
.section-violet-organic .organic-shapes-container::after {
  content: '';
  position: absolute;
  width: 1400px;
  height: 1000px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(81, 196, 181, 0.7) 0%,       /* Turquoise central fort */
    rgba(81, 196, 181, 0.55) 20%,
    rgba(91, 46, 127, 0.6) 40%,       /* Transition vers violet */
    rgba(91, 46, 127, 0.4) 60%,
    rgba(248, 148, 32, 0.25) 80%,     /* Touche orange aux bords */
    transparent 100%
  );
  border-radius: 48% 52% 45% 55%;
  filter: blur(60px);
  z-index: 1;
  pointer-events: none;
  animation: rotate-pulse-central 25s ease-in-out infinite;
}

/* NOUVELLE FORME DROITE - Violet avec dégradé radial naturel */
.section-violet-organic .organic-shapes-container > div:first-child {
  content: '';
  position: absolute;
  width: 1000px;
  height: 850px;
  top: 0;
  right: -200px;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(91, 46, 127, 0.9) 0%,        /* Violet fort au centre */
    rgba(91, 46, 127, 0.7) 25%,
    rgba(91, 46, 127, 0.45) 50%,
    rgba(91, 46, 127, 0.2) 75%,
    transparent 100%
  );
  border-radius: 52% 48% 55% 45%;
  filter: blur(40px);
  z-index: 2;
  pointer-events: none;
  animation: morph 30s ease-in-out infinite reverse;
}