/**
 * Custom Styles for Clémence Fouquet
 * Design améliorations visuelles
 */

/* ========================================
   1. MASQUER LE TITRE "ACCUEIL"
   ======================================== */
.home .wp-block-post-title {
  display: none;
}

/* ========================================
   2. VAGUES SVG ENTRE SECTIONS
   ======================================== */
.section-wave {
  position: relative;
  overflow: hidden;
}

.section-wave::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Vagues violet vers blanc */
.wave-violet-to-white::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Vagues blanc vers violet */
.wave-white-to-violet::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%235b2e7f'/%3E%3C/svg%3E");
}

/* Vagues blanc vers orange */
.wave-white-to-orange::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23f89420'/%3E%3C/svg%3E");
}

/* ========================================
   3. FORMES ORGANIQUES DÉCORATIVES
   ======================================== */
.organic-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.organic-shape-1 {
  width: 300px;
  height: 300px;
  background: var(--wp--preset--color--orange-500);
  top: 10%;
  right: -100px;
  animation: float 20s ease-in-out infinite;
}

.organic-shape-2 {
  width: 200px;
  height: 200px;
  background: var(--wp--preset--color--violet-700);
  bottom: 20%;
  left: -80px;
  animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* ========================================
   4. TYPOGRAPHIE FLUIDE (RESPONSIVE)
   ======================================== */
h1, .has-xx-large-font-size {
  font-size: clamp(2.5rem, 5vw, 4.236rem) !important;
}

h2, .has-x-large-font-size {
  font-size: clamp(1.75rem, 3.5vw, 2.618rem) !important;
}

h3, .has-large-font-size {
  font-size: clamp(1.25rem, 2.5vw, 1.618rem) !important;
}

.has-medium-font-size {
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
}

/* ========================================
   5. OMBRES SUBTILES
   ======================================== */
.wp-block-group.has-background {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.wp-block-group.has-background:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Cartes services */
.wp-block-group.has-beige-200-background-color {
  box-shadow: 0 2px 10px rgba(91, 46, 127, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group.has-beige-200-background-color:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(91, 46, 127, 0.15);
}

/* ========================================
   6. ANIMATIONS AU SCROLL
   ======================================== */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

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

/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .organic-shape-1,
  .organic-shape-2 {
    animation: none;
  }
}

/* ========================================
   7. AMÉLIORATIONS BULLE ORANGE
   ======================================== */
.wp-block-group[style*="border-radius:50%"] {
  box-shadow: 0 10px 40px rgba(248, 148, 32, 0.3);
  position: relative;
  overflow: visible;
}

/* ========================================
   8. ESPACEMENTS AMÉLIORÉS
   ======================================== */
.wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

/* ========================================
   9. BOUTONS AMÉLIORÉS
   ======================================== */
.wp-block-button__link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* ========================================
   10. NAVIGATION AMÉLIORÉE
   ======================================== */
.wp-block-navigation__container {
  gap: 1.5rem;
}

.wp-block-navigation-item__content {
  position: relative;
  transition: color 0.2s ease;
}

.wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--wp--preset--color--orange-500);
  transition: width 0.3s ease;
}

.wp-block-navigation-item__content:hover::after {
  width: 100%;
}

/* ========================================
   11. ACCESSIBILITÉ - FOCUS VISIBLE
   ======================================== */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--orange-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================
   12. RESPONSIVE MOBILE
   ======================================== */
@media (max-width: 768px) {
  .wp-block-cover {
    min-height: 400px !important;
  }

  .wp-block-group[style*="border-radius:50%"] {
    border-radius: 16px !important;
  }

  .section-wave::after {
    height: 60px;
  }
}