/**
 * Style Organic Shapes - Clémence Fouquet
 * Design inspiré de la maquette avec grandes formes fluides
 */

/* ========================================
   1. MASQUER TITRES DE PAGES AUTOMATIQUES
   ======================================== */
/* Masquer le titre automatique sur toutes les pages */
.wp-block-post-title {
  display: none !important;
}

/* ========================================
   2. TYPOGRAPHIE EN MAJUSCULES
   ======================================== */
h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* ========================================
   2. GRANDES FORMES ORGANIQUES FLUIDES
   ======================================== */

/* Conteneur pour formes */
.organic-shapes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Forme fluide générique */
.fluid-shape {
  position: absolute;
  will-change: transform;
}

/* Forme orange grande */
.fluid-shape-orange-large {
  width: 800px;
  height: 600px;
  background: #f89420;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  top: -100px;
  left: -200px;
  animation: morph 20s ease-in-out infinite;
  opacity: 0.75;
  mix-blend-mode: normal;
}

/* Forme turquoise medium */
.fluid-shape-turquoise-medium {
  width: 600px;
  height: 500px;
  background: #51c4b5;
  border-radius: 38% 62% 63% 37% / 70% 33% 67% 30%;
  bottom: 10%;
  right: -100px;
  animation: morph 25s ease-in-out infinite reverse;
  opacity: 0.6;
  mix-blend-mode: normal;
}

/* Forme violet large */
.fluid-shape-violet-large {
  width: 700px;
  height: 550px;
  background: #5b2e7f;
  border-radius: 51% 49% 47% 53% / 62% 44% 56% 38%;
  top: 20%;
  right: -150px;
  animation: morph 30s ease-in-out infinite;
  opacity: 0.4;
  mix-blend-mode: normal;
}

/* Forme beige décorative */
.fluid-shape-beige {
  width: 400px;
  height: 350px;
  background: #fff8e7;
  border-radius: 73% 27% 46% 54% / 53% 68% 32% 47%;
  bottom: -50px;
  left: 30%;
  animation: morph 15s ease-in-out infinite;
  opacity: 0.7;
}

/* Animation de morphing */
@keyframes morph {
  0%, 100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  }
  25% {
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  }
  50% {
    border-radius: 41% 59% 41% 59% / 65% 60% 40% 35%;
  }
  75% {
    border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%;
  }
}

/* ========================================
   3. HEADER AVEC FORMES ORGANIQUES
   ======================================== */
.wp-block-cover.hero-section {
  position: relative;
  overflow: visible !important;
}

/* Superposition des formes */
.wp-block-cover__inner-container {
  position: relative;
  z-index: 2 !important;
}

/* S'assurer que le contenu reste lisible dans les sections avec formes */
.section-violet-organic > .wp-block-group,
.section-violet-organic > .wp-block-columns,
.section-violet-organic h1,
.section-violet-organic h2,
.section-violet-organic p {
  position: relative;
  z-index: 10 !important;
}

.section-beige-organic > * {
  position: relative;
  z-index: 10 !important;
}

/* ========================================
   4. SECTIONS AVEC FOND BEIGE
   ======================================== */
.section-beige-organic {
  background: #fff8e7 !important;
  position: relative;
  overflow: hidden;
}

.section-beige-organic::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: #f5e6d3;
  border-radius: 50% 50% 48% 52% / 63% 37% 63% 37%;
  top: -200px;
  right: -100px;
  opacity: 0.6;
  z-index: 0;
}

/* ========================================
   5. STYLE BOUTONS - ORANGE ARRONDI
   ======================================== */
.wp-block-button__link {
  background: #f89420 !important;
  color: white !important;
  border-radius: 25px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 15px rgba(248, 148, 32, 0.3);
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(248, 148, 32, 0.4);
}

/* ========================================
   6. TITRES AVEC COULEURS SPÉCIFIQUES
   ======================================== */
.title-orange {
  color: #f89420 !important;
}

.title-violet {
  color: #5b2e7f !important;
}

.title-turquoise {
  color: #51c4b5 !important;
}

.title-white {
  color: #ffffff !important;
}

/* ========================================
   7. SECTIONS VIOLETTES AVEC FORMES
   ======================================== */
.section-violet-organic {
  background: #5b2e7f !important;
  position: relative;
  overflow: hidden;
}

.section-violet-organic::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: #3a1e54;
  border-radius: 47% 53% 61% 39% / 56% 48% 52% 44%;
  bottom: -200px;
  left: -150px;
  opacity: 0.4;
  z-index: 0;
}

.section-violet-organic .wp-block-group {
  position: relative;
  z-index: 1;
}

/* ========================================
   8. STYLE CARTES AVEC OMBRES DOUCES
   ======================================== */
.service-card {
  background: white !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #51c4b5 0%, #f89420 100%);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ========================================
   9. NAVIGATION MODERNE
   ======================================== */
.wp-block-navigation-item__content {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

/* ========================================
   10. RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .fluid-shape-orange-large {
    width: 400px;
    height: 300px;
  }

  .fluid-shape-turquoise-medium {
    width: 350px;
    height: 280px;
  }

  .fluid-shape-violet-large {
    width: 380px;
    height: 300px;
  }

  .fluid-shape-beige {
    width: 250px;
    height: 200px;
  }

  h1, .has-xx-large-font-size {
    font-size: clamp(1.8rem, 8vw, 3rem) !important;
  }
}

/* ========================================
   11. HEADER MODERNE STICKY
   ======================================== */
.modern-header-sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.modern-header-sticky .wp-block-navigation__container {
  gap: 32px !important;
}

.modern-header-sticky .wp-block-navigation-item a {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: #44403c;
  transition: color 0.3s ease;
}

.modern-header-sticky .wp-block-navigation-item a:hover {
  color: #5b2e7f;
}

.modern-header-sticky .nav-cta a {
  background: #f89420 !important;
  color: white !important;
  padding: 10px 24px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

.modern-header-sticky .nav-cta a:hover {
  background: #d67b0a !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(248, 148, 32, 0.3);
}

/* ========================================
   12. DÉSACTIVER ANIMATIONS SI PRÉFÉRÉ
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}