/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */


@media (max-width: 991px) {
  .inverse {
      display: flex;
      flex-direction: column-reverse;
  }
}

@media (min-width: 1024px) {
  .center-text-image {
      display: flex;
      align-items: center;
  }
}

/* Align both buttons on the same line */
.buttons-inline .et_pb_column {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Remove Divi module spacing */
.buttons-inline .et_pb_button_module_wrapper {
    margin: 0 !important;
}

/* Mobile */
@media (max-width: 767px) {
    .buttons-inline .et_pb_column {
        flex-direction: column;
        gap: 12px;
    }

    .buttons-inline .et_pb_button {
        width: 100%;
        max-width: 290px;
        text-align: center;
    }
}



/*****/






/* Colonne qui contient les 2 images */
.et_pb_column:has(.image1):has(.image2) {
    position: relative;
    padding-bottom: 80px;
}

/* IMAGE 1 : grande image derrière */
.image1 {
    width: 78%;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.image1 img {
    width: 100%;
    height: 665px;
    object-fit: cover;
    display: block;
}

/* IMAGE 2 : image au-dessus */
.image2 {
    position: absolute;
    width: 50%;
    right: 0;
    top: 220px;
    z-index: 3;
    margin: 0 !important;
}

.image2 img {
    width: 100%;
    height: 370px;
    object-fit: cover;
    display: block;
}

/* Fond clair visible à droite */


/* TABLETTE */
@media (max-width: 980px) {

    .image1 {
        width: 82%;
    }

    .image1 img {
        height: 550px;
    }

    .image2 {
        width: 52%;
        top: 180px;
    }

    .image2 img {
        height: 320px;
    }
}

/* MOBILE */
@media (max-width: 767px) {

    /* Garder uniquement l'image 1 */
    .image1 {
        width: 100% !important;
        margin: 0 !important;
    }

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

    /* Masquer l'image 2 */
    .image2 {
        display: none !important;
    }

    /* Supprimer le fond décoratif */
    .et_pb_column:has(.image1):has(.image2)::after {
        display: none;
    }

    .et_pb_column:has(.image1):has(.image2) {
        padding-bottom: 0;
    }
}