/* ========================================
   STYLES SPÉCIFIQUES PAGE PRESTATIONS - VERSION CORRIGÉE
   ======================================== */

/* Tailles personnalisées pour les fleurs */
.w-84 { width: 21rem; }
.h-84 { height: 21rem; }
.w-88 { width: 22rem; }
.h-88 { height: 22rem; }
.w-92 { width: 23rem; }
.h-92 { height: 23rem; }

/* Animation de flottement pour les éléments décoratifs */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

.float-element {
    animation: float 8s ease-in-out infinite;
}

.float-element:nth-child(2) {
    animation: floatSlow 10s ease-in-out infinite;
}

.float-element:nth-child(3) {
    animation: floatGentle 9s ease-in-out infinite;
}

.float-element:nth-child(4) {
    animation: float 11s ease-in-out infinite;
}

.float-element:nth-child(5) {
    animation: floatSlow 7s ease-in-out infinite;
}

/* Conteneur main */
main.prestations-content {
    position: relative;
    z-index: 1;
}

/* Styles pour les animations au scroll */
[data-scroll] {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

[data-scroll="fade-up"] { transform: translateY(50px); }
[data-scroll="fade-down"] { transform: translateY(-50px); }
[data-scroll="fade-left"] { transform: translateX(50px); }
[data-scroll="fade-right"] { transform: translateX(-50px); }
[data-scroll="scale"] { 
    transform: scaleX(0);
    transition: opacity 1.2s ease-out, transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}
[data-scroll="scale-up"] {
    transform: scale(0.88);
    transition: opacity 1.2s ease-out, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll="card"] {
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Ajustement de l'espacement du titre principal - RÉDUIT */
.hero-title-container {
    margin-bottom: 1rem; /* Réduit de 1.5rem à 1rem */
}

/* Ajustement de l'espacement des sections principales */
.main-section {
    margin-bottom: 4rem; /* Réduit de 6rem à 4rem (-33%) */
    transition: all 0.6s ease-out;
}

/* NOUVEAU : Réduction de l'espace entre le header et les séances individuelles */
#seances-individuelles {
    padding-top: 0.5rem; /* TRÈS RÉDUIT : presque plus d'espace en haut */
}

/* Section modalités avec plus d'espacement */
.main-section.modalites {
    margin-top: 5rem; /* Réduit de 8rem à 5rem (-37%) */
    margin-bottom: 4rem;
}

/* Responsive : ajustement sur mobile */
@media (max-width: 768px) {
    .hero-title-container {
        margin-bottom: 0.5rem; /* Réduit de 1rem à 0.5rem */
    }
    
    .main-section {
        margin-bottom: 2.5rem; /* Réduit de 3rem à 2.5rem (-17%) */
    }
    
    .main-section.modalites {
        margin-top: 3rem; /* Réduit de 4rem à 3rem (-25%) */
        margin-bottom: 2.5rem;
    }
}

/* Styles pour le carrousel des prestations */
.prestations-carousel-container {
    overflow: visible;
    position: relative;
}

.prestations-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    overflow: visible;
}

.prestation-slide {
    flex-shrink: 0;
    padding: 0 1rem;
}

.prestations-prev-btn,
.prestations-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 3rem;
    height: 3rem;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69443C;
    transition: background-color 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
}

.prestations-prev-btn:hover,
.prestations-next-btn:hover {
    background-color: #F2E9E4;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.prestations-prev-btn { left: -3rem; }
.prestations-next-btn { right: -3rem; }

/* Style modernisé pour les indicateurs de slides - SUPPRIMÉS */
.prestations-dot {
    display: none !important; /* SUPPRIMÉ : plus de dots du tout */
}

.prestations-dot.bg-\[\#69443C\] {
    display: none !important; /* SUPPRIMÉ : plus de dots du tout */
}

/* Styles modernisés pour les cartes */
.bg-white {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Effet de survol élégant pour les cartes */
.rounded-2xl {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rounded-2xl:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Amélioration des badges et étiquettes */
.rounded-full, .rounded-lg {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animation pour la section hero */
.hero-animation {
    animation: heroFade 1.5s ease-out forwards;
    will-change: transform;
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style modernisé pour les sections */
.section-title-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    margin-bottom: 2.5rem;
}

/* Effets de transitions améliorés */
a, button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation subtile pour les éléments du fond */
@keyframes floatElement {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0); }
}

/* Styles pour la modal des ateliers */
#ateliersModal {
    transition: opacity 0.3s ease-out;
}

#ateliersModal:not(.hidden) {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#ateliersModal .bg-white,
#ateliersModal .max-w-3xl,
#ateliersModal .relative.bg-\[\#F9F7F5\] {
    border-radius: 1.5rem !important;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#ateliersModal .rounded-t-lg,
#ateliersModal .rounded-b-lg {
    border-radius: 1.5rem !important;
}

#ateliersModal.fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Animation pour l'apparition des dates */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

#dates-a-venir {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.5s ease-out forwards;
}

/* Stylisation moderne des icônes */
[data-lucide] {
    stroke-width: 1.75;
}

/* Amélioration des boutons CTA */
.bg-\[\#69443C\] {
    position: relative;
    overflow: hidden !important; /* RENFORCÉ : priorité absolue */
}

.bg-\[\#69443C\]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
    pointer-events: none; /* AJOUTÉ : évite les interférences */
    opacity: 0; /* AJOUTÉ : invisible par défaut */
}

.bg-\[\#69443C\]:hover::after {
    left: 100%;
    opacity: 1; /* AJOUTÉ : visible seulement au hover */
}

/* NOUVEAU : Supprimer l'effet blanc du bouton ateliers */
.btn-voir-dates::after {
    display: none !important; /* SUPPRIME l'effet blanc */
}

.btn-voir-dates:hover::after {
    display: none !important; /* SUPPRIME l'effet blanc au hover */
}

/* Optimisations performance */
.prestations-carousel-container,
.rounded-2xl,
[data-scroll] {
    contain: layout style paint;
}

/* NOUVEAU : Permettre le débordement des flèches du carrousel */
.prestations-carousel {
    overflow: visible !important;
    margin: 0 3rem; /* Espace pour les flèches */
}

/* Section des séances individuelles - permettre débordement */
#seances-individuelles {
    overflow: visible !important;
}

/* Container principal des prestations */
.container.max-w-6xl {
    overflow: visible !important;
}

/* Grille et conteneurs de prestations */
.prestations-carousel .prestations-carousel-container {
    overflow: visible !important;
    margin: 0; /* Reset margin du container */
}

/* Lazy loading pour les images décoratives */
.float-element {
    will-change: transform;
}

/* Responsive optimizations */
@media (max-width: 768px) {
    .prestations-prev-btn,
    .prestations-next-btn {
        width: 2.5rem;
        height: 2.5rem;
        left: -2rem !important; /* Ajusté pour mobile */
        right: -2rem !important; /* Ajusté pour mobile */
    }
    
    .prestations-prev-btn {
        left: -2rem !important;
    }
    
    .prestations-next-btn {
        right: -2rem !important;
    }
    
    /* Ajuster la marge du carrousel sur mobile */
    .prestations-carousel {
        margin: 0 2.5rem !important;
    }
    
    .hero-animation {
        animation-duration: 1s;
    }
    
    [data-scroll] {
        transition-duration: 0.8s;
    }
}

/* Préchargement critique */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Styles pour les cartes de prestations */
.prestation-card {
    transition: all 0.3s ease;
}

.prestation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Responsive improvements */
@media (max-width: 1024px) {
    .main-section {
        margin-bottom: 4rem;
    }
}

/* CORRECTION BADGES - Permettre aux badges de déborder */
.grid, .grid-cols-1, .md\\:grid-cols-3 {
    overflow: visible !important;
}

/* S'assurer que tous les conteneurs permettent le débordement des badges */
.container, .max-w-6xl, .mx-auto, .px-4 {
    overflow: visible !important;
}

/* Conteneurs de cartes */
.relative {
    overflow: visible !important;
}

/* Badges spécifiques */
.absolute.-top-12 {
    z-index: 999 !important;
}

/* Grille des prestations */
.gap-8 {
    overflow: visible !important;
}

/* Section principales */
section {
    overflow: visible !important;
}