/* Methodo Video Positioning */


.methodo-video-02 {
    position: absolute;
    left: 50%; /* Positionne le bord gauche de la vidéo au centre de la timeline */
    margin-left: -250px; /* Décale la vidéo de 260px vers la gauche par rapport au centre */
    top: 55%;
    transform: translateY(-50%);
    width: 200px; /* Taille demandée */
    border-radius: 8px;
    z-index: 1;
}

.methodo-image-01{
    position: absolute;
    left: 50%; /* Positionne le bord gauche de la vidéo au centre de la timeline */
    margin-left: 50px; /* Décale la vidéo de 260px vers la gauche par rapport au centre */
    top: 55%;
    transform: translateY(-50%);
    width: 200px; /* Taille demandée */
    border-radius: 8px;
    z-index: 1;
}

.methodo-image-03{
    position: absolute;
    left: 50%; /* Positionne le bord gauche de la vidéo au centre de la timeline */
    margin-left: 50px; /* Décale la vidéo de 260px vers la gauche par rapport au centre */
    top: 55%;
    transform: translateY(-50%);
    width: 200px; /* Taille demandée */
    border-radius: 8px;
    z-index: 1;
}


@media (max-width: 1024px) {
    /* Reset de la structure timeline pour l'empilement vertical */
    .process-timeline::before {
        left: 20px; /* Déplace la ligne verticale à gauche */
    }

    .process-item, 
    .process-item:nth-child(even) {
        display: flex;
        flex-direction: column; /* Empile contenu et média */
        padding: 0 0 40px 60px; /* Padding gauche pour laisser place à la ligne/numéros */
        justify-content: flex-start;
        text-align: left;
        align-items: flex-start;
    }

    .process-item .process-content,
    .process-item:nth-child(even) .process-content {
        padding: 0;
        text-align: left;
        max-width: 100%;
        margin-bottom: 20px; /* Espace avant le média */
    }

    /* Repositionnement des numéros */
    .process-number {
        left: 20px;
        transform: translateX(-50%);
        top: 0;
        margin-top: 0;
    }

    /* Gestion des médias (Images et Vidéo) */
    .process-item > div:not(.process-content):not(.process-number) {
        width: 100%; /* Force le conteneur d'image à prendre toute la largeur */
    }

    .methodo-video-02, 
    .methodo-image-01, 
    .methodo-image-03 {
        position: static; /* Rentre dans le flux normal */
        transform: none;
        margin: 0;
        width: 100%; /* Prend toute la largeur dispo */
        max-width: 100%; /* S'assure de ne pas dépasser */
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    /* Cacher les conteneurs vides qui pourraient traîner si structure HTML différente */
    .process-item > div:empty {
        display: none;
    }
}