/* Floating Elements - Octogonal Photos */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-photo {
    position: absolute;
    border-radius: 5px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    opacity: 0.75;
    z-index: -1;
    overflow: hidden;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    transition: transform 0.3s ease;
}

.floating-photo:hover {
    transform: scale(1.05);
    opacity: 0.85;
}

.floating-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) brightness(105%) contrast(110%);
    transition: all 0.5s ease;
}

.floating-photo:hover img {
    filter: grayscale(0%) brightness(108%);
}

/* Positions spécifiques */
.floating-photo:nth-child(1) {
    width: 180px;
    height: 180px;
    top: 8%;
    left: 6%;
    transform: rotate(-10deg);
    animation: float-1 15s ease-in-out infinite;
    z-index: -1;
}

.floating-photo:nth-child(2) {
    width: 160px;
    height: 160px;
    bottom: 12%;
    left: 12%;
    transform: rotate(10deg);
    animation: float-2 18s ease-in-out infinite;
    z-index: -2;
}

.floating-photo:nth-child(3) {
    width: 200px;
    height: 200px;
    top: 15%;
    right: 8%;
    transform: rotate(8deg);
    animation: float-3 16s ease-in-out infinite;
    z-index: -1;
}

.floating-photo:nth-child(4) {
    width: 170px;
    height: 170px;
    bottom: 8%;
    right: 10%;
    transform: rotate(-5deg);
    animation: float-4 20s ease-in-out infinite;
    z-index: -2;
}

/* Animations flottantes intensifiées */
@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) rotate(-10deg); }
    50% { transform: translate(-25px, 20px) rotate(-7deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) rotate(10deg); }
    50% { transform: translate(22px, -15px) rotate(13deg); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) rotate(8deg); }
    50% { transform: translate(-18px, -22px) rotate(5deg); }
}

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

/* Banderole défilante de logos */
.logo-banner {
    position: absolute;
    width: 100%;
    height: 350px; /* Hauteur pour les logos de 300px */
    overflow: hidden;
    top: 60%; /* Position abaissée à 60% comme demandé */
    transform: translateY(-50%);
    z-index: 0; /* Derrière le conteneur */
    opacity: 0.7; /* Opacité pour un effet discret */
    pointer-events: none; /* Ne pas interférer avec les clics */
}

.logo-banner-content {
    display: flex;
    align-items: center;
    height: 100%;
    animation: scroll-banner 20s linear infinite; /* Animation plus rapide (20s au lieu de 30s) */
    white-space: nowrap; /* Empêcher le retour à la ligne */
}

.logo-banner-content img {
    height: 300px; /* Taille des logos à 300px */
    width: auto;
    margin: 0 30px; /* Espacement entre logos réduit à 30px */
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

/* Animation de défilement en boucle continue sans coupure */
@keyframes scroll-banner {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Déplace seulement de la moitié pour une boucle transparente */
    }
}

/* Animations flottantes pour logos */
@keyframes float-logo-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-15px, 10px) rotate(5deg); }
}

@keyframes float-logo-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -12px) rotate(-3deg); }
}

@keyframes float-logo-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-8px, -10px) rotate(2deg); }
}

@keyframes float-logo-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(12px, 8px) rotate(-4deg); }
}

@keyframes float-logo-5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-10px, 15px) rotate(3deg); }
}

/* Media Queries */
@media (max-width: 768px) {
    .floating-photo {
        opacity: 0.4; /* Encore plus discret sur mobile */
    }
    
    .floating-photo:nth-child(1) {
        width: 120px;
        height: 120px;
    }
    
    .floating-photo:nth-child(2) {
        width: 110px;
        height: 110px;
    }
    
    .floating-photo:nth-child(3) {
        width: 130px;
        height: 130px;
    }
    
    .floating-photo:nth-child(4) {
        width: 115px;
        height: 115px;
    }
    
    .floating-logo {
        opacity: 0.1;
        width: 40px !important;
    }
}