/* =========================================================
   OXYGÈNE - ACCORDEON EXPERIENCES
   VERSION FINALE
   DESKTOP + MOBILE
========================================================= */


/* =========================
   SECTION
========================= */

.oxy-accordion-test {

    width:100%;
    padding:100px 0 80px;
    background:#fff;
    overflow:hidden;

}


.oxy-accordion-test * {

    box-sizing:border-box;

}



/* =========================
   TITRE
========================= */


.oxy-accordion-test .section-title {

    max-width:900px;
    margin:0 auto 50px;
    padding:0 20px;
    text-align:center;

}


.oxy-accordion-test .section-title h2 {

    margin-bottom:15px;

}



/* =========================================================
   DESKTOP ACCORDEON
========================================================= */


.oxy-panels {

    width:100%;
    height:520px;
    display:flex;
    overflow:hidden;
    margin:0;

}



.oxy-panel {

    position:relative;
    flex:1;
    height:520px;
    overflow:hidden;
    cursor:pointer;
    background:#000;

    transition:
    flex .6s cubic-bezier(.25,.8,.25,1);

}



.oxy-panel:hover {

    flex:3;

}



/* =========================
   IMAGE
========================= */


.oxy-panel > img {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;

    transition:
    transform .6s ease;

}



.oxy-panel:hover img {

    transform:scale(1.03);

}



/* =========================
   DEGRADE
========================= */


.oxy-panel::after {

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(34,90,55,.35),
        rgba(0,0,0,.95)
    );

}



/* =========================
   TEXTE
========================= */


.oxy-panel-text {

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:35px;

    z-index:3;

    color:#fff;

}



.oxy-panel-text strong {

    display:block;

    color:#fff;

    font-size:30px;

    font-weight:600;

    margin-bottom:10px;

}



/* =========================
   DETAILS
========================= */


.oxy-details {

    display:block;

}



.oxy-bar-description {

    color:#fff;

    font-size:15px;

    line-height:1.5;

    margin-bottom:8px;

}



.oxy-bar-columns {

    display:flex;

    gap:30px;

}



.oxy-bar-column {

    flex:1;

    color:#fff;

    font-size:13px;

    line-height:1.8;

}



.oxy-bar-column small {

    color:rgba(255,255,255,.75);

}



/* =========================
   BOUTON
========================= */


.oxy-more {

    display:none;

}



/* =========================================================
   TABLETTE
========================================================= */


@media(max-width:991px){


    .oxy-accordion-test {

        padding:70px 25px;

    }


    .oxy-panels {

        height:450px;

    }


    .oxy-panel {

        height:450px;

    }

}



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


@media(max-width:767px){


    .oxy-accordion-test {

        padding:60px 15px;

    }



    .oxy-panels {

        display:block;

        height:auto;

    }



    /* cartes fermées */

    .oxy-panel {

        width:100%;

        height:120px;

        margin-bottom:4px;

        transition:
        height .5s ease;

    }



    /* texte fermé */

    .oxy-panel-text {

        top:0;

        bottom:auto;

        height:95px;

        padding:47px 20px 20px 20px;

        display:flex;

        align-items:center;

        justify-content:space-between;

    }



    .oxy-panel-text strong {

        font-size:22px;

        line-height:1;

        margin:0 0 10px 0;

    }



    /* bouton */

    .oxy-more {

        display:inline-flex;

        align-items:center;

        justify-content:center;

        height:30px;

        padding:6px 14px;

        background:transparent;

        border:1px solid #fff;

        color:#fff;

        border-radius:18px;

        font-size:12px;

        line-height:1;

        white-space:nowrap;

        cursor:pointer;

    }



    /* détails cachés */

    .oxy-details {

        display:none;

    }



    /* panneau ouvert */

    .oxy-panel.active {

        height:430px;

    }



    .oxy-panel.active .oxy-panel-text {

        display:block;

        height:auto;

        padding:22px;

    }



    .oxy-panel.active .oxy-more {

           display:none;

    }



    .oxy-panel.active .oxy-details {

        display:block;

        animation:oxyFade .4s ease;

    }



    .oxy-bar-columns {

        display:block;

    }



    .oxy-bar-column {

        font-size:14px;

        margin-bottom:10px;

    }


}



/* =========================================================
   ANIMATION
========================================================= */


@keyframes oxyFade {


    from {

        opacity:0;

        transform:translateY(10px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* =========================================================
   FULL WIDTH
========================================================= */


.oxy-accordion-test {

    padding-left:0 !important;

    padding-right:0 !important;

}



.oxy-panels {

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

}

/* =========================================================
   MOBILE - DEGRADE RENFORCE PANNEAU OUVERT
========================================================= */

@media(max-width:767px){

    .oxy-panel.active::after {

         background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(34,90,55,0.55),
        rgba(0,0,0,0.95)
        );

    }


    .oxy-panel.active .oxy-panel-text {

        z-index:4;

    }

}