/**
 * Styles pour la page Calendrier et Tarifs
 * Thème Esperanza
 */

/* Section Hero */
.hero-section {
    background: linear-gradient(135deg, #769984 0%, #8fae9d 50%, #a8c3b6 100%);
    position: relative;
    overflow: hidden;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    animation: float-hero ease-in-out infinite;
}

.hero-shape-1 {
    top: 20%;
    left: 10%;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    animation-duration: 6s;
}

.hero-shape-2 {
    top: 60%;
    right: 15%;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.08);
    animation-duration: 8s;
    animation-direction: reverse;
}

.hero-shape-3 {
    bottom: 20%;
    left: 20%;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.12);
    animation-duration: 7s;
}

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

/* Section contenu */
.retreat-content-section {
    background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%);
    min-height: 100vh;
    position: relative;
}

/* Formes animées */
.animated-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    opacity: 0.05;
    animation: float 20s ease-in-out infinite alternate;
}

.shape-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--sage);
    top: 10%;
    left: -100px;
    animation-duration: 25s;
}

.shape-square {
    width: 200px;
    height: 200px;
    background: var(--terra);
    top: 40%;
    right: -50px;
    transform: rotate(45deg);
    animation-duration: 30s;
    animation-delay: 5s;
}

.shape-triangle {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-bottom: 260px solid var(--sand);
    bottom: 10%;
    left: 20%;
    animation-duration: 35s;
    animation-delay: 2s;
}

.shape-donut {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 40px solid var(--sage);
    top: 20%;
    right: 15%;
    animation-duration: 40s;
    animation-delay: 7s;
}

.shape-plus {
    width: 120px;
    height: 120px;
    background: var(--terra);
    bottom: 15%;
    right: 25%;
    clip-path: polygon(
        35% 0%, 65% 0%, 65% 35%, 100% 35%, 
        100% 65%, 65% 65%, 65% 100%, 35% 100%, 
        35% 65%, 0% 65%, 0% 35%, 35% 35%
    );
    animation-duration: 28s;
    animation-delay: 3s;
}

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

/* Calendrier */
.calendar-month {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.calendar-month.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.calendar-day.has-events .day-number {
    font-weight: 600;
}

.calendar-day.has-events {
    background-color: rgba(118, 153, 132, 0.05);
}

.event-item {
    border-left: 3px solid #769984;
}

/* Section tarifs */
.pricing-info {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pricing-info.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-note {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.info-note.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* Animation des éléments au scroll */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in-up.animated {
    opacity: 1;
    transform: translateY(0);
}