/* ============================================================
   DECORATIONS FLORALES - logo2.png
   Fleurs décoratives pour animer les sections
   ============================================================ */

/* ============================================================
   BASE - Classe commune
   ============================================================ */

.flower-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    opacity: 1;
    background-image: url('../../img/logonew.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   TAILLES
   ============================================================ */

.flower-xs {
    width: 20px;
    height: 20px;
}

.flower-sm {
    width: 30px;
    height: 30px;
}

.flower-md {
    width: 50px;
    height: 50px;
}

.flower-lg {
    width: 80px;
    height: 80px;
}

.flower-xl {
    width: 120px;
    height: 120px;
}

/* ============================================================
   OPACITES
   ============================================================ */

.flower-opacity-low {
    opacity: 1;
}

.flower-opacity-medium {
    opacity: 1;
}

.flower-opacity-high {
    opacity: 1;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* Rotation lente */
@keyframes flower-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.flower-rotate {
    animation: flower-rotate 30s linear infinite;
}

.flower-rotate-slow {
    animation: flower-rotate 60s linear infinite;
}

.flower-rotate-reverse {
    animation: flower-rotate 40s linear infinite reverse;
}

/* Flottement doux */
@keyframes flower-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.flower-float {
    animation: flower-float 6s ease-in-out infinite;
}

/* Pulsation douce */
@keyframes flower-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.flower-pulse {
    animation: flower-pulse 4s ease-in-out infinite;
}

/* ============================================================
   POSITIONS PREDEFINIES - Près des titres
   ============================================================ */

.flower-title-left {
    top: 50%;
    left: -60px;
    transform: translateY(-50%);
}

.flower-title-right {
    top: 50%;
    right: -60px;
    transform: translateY(-50%);
}

.flower-title-top {
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   POSITIONS ORGANIQUES
   ============================================================ */

/* Position haute gauche - décalée */
.flower-pos-1 {
    top: 8%;
    left: 5%;
}

/* Position haute droite - décalée */
.flower-pos-2 {
    top: 12%;
    right: 8%;
}

/* Position milieu gauche */
.flower-pos-3 {
    top: 45%;
    left: 3%;
}

/* Position milieu droite */
.flower-pos-4 {
    top: 40%;
    right: 4%;
}

/* Position basse gauche - décalée */
.flower-pos-5 {
    bottom: 15%;
    left: 6%;
}

/* Position basse droite - décalée */
.flower-pos-6 {
    bottom: 10%;
    right: 5%;
}

/* Position haute centre-gauche */
.flower-pos-7 {
    top: 5%;
    left: 20%;
}

/* Position basse centre-droit */
.flower-pos-8 {
    bottom: 8%;
    right: 18%;
}

/* ============================================================
   POSITIONS PREDEFINIES - Flottantes
   ============================================================ */

.flower-float-1 {
    top: 15%;
    left: 5%;
}

.flower-float-2 {
    top: 25%;
    right: 8%;
}

.flower-float-3 {
    bottom: 20%;
    left: 10%;
}

.flower-float-4 {
    bottom: 30%;
    right: 5%;
}

.flower-float-5 {
    top: 50%;
    left: 3%;
}

.flower-float-6 {
    top: 60%;
    right: 4%;
}

/* ============================================================
   DECORATIONS SPECIFIQUES PAR SECTION
   ============================================================ */

/* Section avec fond blanc - fleurs plus visibles */
.consultations-section .flower-decoration,
.apercu-offre-section .flower-decoration,
.valeurs-section .flower-decoration,
.podcast-section .flower-decoration,
.a-propos-section .flower-decoration {
    opacity: 1;
}

/* Sections avec fond coloré - fleurs en blanc/light */
.programmes-section .flower-decoration,
.testimonials-section .flower-decoration,
.instagram-section .flower-decoration,
.ressource-gratuite-section .flower-decoration {
    opacity: 1;
}

/* ============================================================
   RESPONSIVE - TABLETTE
   ============================================================ */

@media (max-width: 1024px) {
    .flower-xl {
        width: 100px;
        height: 100px;
    }

    .flower-lg {
        width: 60px;
        height: 60px;
    }

    .flower-title-left {
        left: -40px;
    }

    .flower-title-right {
        right: -40px;
    }

    .flower-corner-top-left,
    .flower-corner-top-right,
    .flower-corner-bottom-left,
    .flower-corner-bottom-right {
        display: none;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 768px) {
    .flower-xl {
        width: 60px;
        height: 60px;
    }

    .flower-lg {
        width: 40px;
        height: 40px;
    }

    .flower-md {
        width: 30px;
        height: 30px;
    }

    .flower-title-left,
    .flower-title-right {
        display: none;
    }

    .flower-float-1,
    .flower-float-2,
    .flower-float-3,
    .flower-float-4,
    .flower-float-5,
    .flower-float-6 {
        display: none;
    }
}