/* =========================================
   GRID / BLOCS
   ========================================= */

.des_rowspan2 {
    grid-row: span 2;
}

.col_start2 {
    grid-column-start: 2;
}

.col_start3 {
    grid-column-start: 3;
}

.col_start4 {
    grid-column-start: 4;
}

.col_start5 {
    grid-column-start: 5;
}

.col_start6 {
    grid-column-start: 6;
}

.col_start7 {
    grid-column-start: 7;
}

.col_stop12 {
    grid-column-end: 12;
}


/* ---------- DESKTOP FONTS ---------- */


/* ---------- HERO BANNER ---------- */

.hero_txtcontent {
    grid-column: 1/12;
    margin: 2rem 1rem;
}

.elementor .hero_bantype {
    border-radius: 1rem;
    width: 95dvw !important;
    max-width: 1600px;
    height: 450px;
    padding: 2rem;
}


@media (min-width: 667px) {

    .hero_txtcontent {
        grid-column: 7/12 !important;
    }

}


/* ---------- IMAGE GALLERY ---------- */

.kxp_gal .gallery-icon {
    padding: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 5px;
    gap: 1rem;
}


.kxp_gal .gallery-item img {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;

    transform: scale(1.25);
    transition: transform 0.3s ease-in-out;
}


.kxp_gal .gallery-item img:hover {
    transform: scale(1);
}


/* ---------- FIN IMAGE GALLERY ---------- */


/* ---------- TERMS AND CONDITIONS ---------- */

.tandc > div {
    display: flex;
    flex-direction: column;
}


/* ---------- LIGHTGALLERY ---------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-flow: dense;
}


.gallery a {
    display: block;
    aspect-ratio: 4.5 / 3;
    overflow: hidden;
    border-radius: 5px;
}


.gallery picture {
    display: block;
    width: 100%;
    height: 100%;
}


.gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

    transform: scale(1.25);
    transition: transform 0.3s ease-in-out;
}


.gallery img:hover {
    transform: scale(1);
}


.gallery a:nth-child(1),
.gallery a:nth-child(5) {
    grid-row: span 2;
}


.gallery a:nth-child(1),
.gallery a:nth-child(5) {
    aspect-ratio: initial;
}


.gallery a:nth-child(8),
.gallery a:nth-child(9),
.gallery a:nth-child(10) {
    display: none;
}


@media (min-width: 600px) {

    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }

}


/*
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery a:nth-child(5) {
        grid-column: 4/5;
    }
*/


/* ---------- FIN LIGHTGALLERY ---------- */


/* =========================================
   POPUP TAUX DE CHANGE
   ========================================= */


/* ---------- DIALOG ---------- */

.currency-popup-dialog {
    width: 90vw;
    max-width: 1100px;
    box-sizing: border-box;

    padding: 30px;

    background: white;

    border: 0;

    opacity: 0;

    transition: opacity 0.3s ease;
}


.currency-popup-dialog[open] {
    opacity: 1;
    border-radius: var(--radius-sm);

}


/* ---------- BACKDROP ---------- */

.currency-popup-dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}


/* ---------- POPUP BOX ---------- */

.currency-popup-box {
    position: relative;
}


/* =========================================
   OPTIONS DE DEVISES
   ========================================= */

.currency-popup-options {

    display: grid;

    /*
     * Le nombre de colonnes s'adapte
     * automatiquement à la largeur disponible.
     *
     * 210px = largeur minimale d'une colonne.
     */
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 10px;

    text-align: left;
}


/* =========================================
   BOUTONS DES DEVISES
   ========================================= */

/*
 * On laisse ici ton CSS global des boutons
 * gérer les couleurs, bordures, padding, etc.
 *
 * On ne modifie que ce qui concerne
 * la disposition et l'alignement.
 */

.currency-popup-options button {

    width: 100%;

    min-width: 0;

    margin: 0;

    text-align: left;

}


/* ---------- Texte des boutons ---------- */

body .currency-popup-options [type=button] {

    text-transform: capitalize;

    letter-spacing: 0;

}



/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .currency-popup-options {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   FIN POPUP TAUX DE CHANGE
   ========================================= */
.currency-popup-options button.is-selected {
    background-color: var(--grey);
    border-color: var(--grey);
    color: var(--white);
}



/* ---------- Image incrustée ----------*/

.img_inside img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}