/* ==========  CSS  ========== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
 
        body {
            font-family: 'Arial', sans-serif;
            background: #ffffff;
            overflow-x: hidden;
            color: #333;
        }
        header{
            display: over;
            align-items:center;
            padding:12px;
            background-color: rgb(255, 255, 255);
        }
.header-naviga{
    display:flex;
    align-items:center;
    padding:12px
}

.avantmain {
    height: 75vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.avantmain h1 { font-size: 4rem;
        margin-bottom: 20px;
        margin-top: 15vh;
        }
#emodji {
    margin-top: 5vh;
}




.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    font-size: 3rem;
    opacity: 0.5;
}

/* gallery items (cercles) */
.gallery-item {
    margin-bottom: 120px;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s ease-out;
    text-align: center;
    position: relative; /* important pour tooltip */
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.image-container {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 400px;
    height: 400px;
    margin: 0 auto;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    background: #ddd;
}

.image-container:hover { transform: scale(1.15); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

.image-container img { width: 100%; height: 100%; object-fit: cover; display: block; }



/* === LAYOUT STICKY SCROLL REVEAL === */
.sticky-layout {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 60px;
    padding: 60px 20px;
    align-items: start;
}

.steps-column { width: 50%; }
/*l'encadré sur le côté*/
.sticky-box {
    width: 50%;
    position: sticky;
    top:250px;
    height: 300px;
    background: white;
    border-radius: 25px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .image-container { width: 60vw; height: 60vw; max-width: 350px; max-height: 350px; }
    .header h1 { font-size: 3rem; }
    .sticky-layout { flex-direction: column; gap: 30px; }
    .steps-column, .sticky-box { width: 100%; }
    .sticky-box { position: static; top: auto; height: auto; padding: 24px; border-radius: 16px; }
}

@media (max-width: 600px) {
    .image-container { width: 70vw; height: 70vw; max-width: 300px; max-height: 300px; }
    .tooltip { font-size: 0.85rem; padding: 10px 14px; bottom: calc(100% + 8px); }
    .header h1 { font-size: 2.2rem; }
}

@media (max-width: 400px) {
    .image-container { width: 80vw; height: 80vw; }
    .tooltip { bottom: calc(100% + 6px); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-20px); }
    60% { transform: translateX(-50%) translateY(-10px); }
}