/* --------------------------------------- */
/* ---------- MOBILE XS - 300px ---------- */
@media (min-width:1px) {

    body {
        background: #fdfdfd;
    }

    .section-comparatif, .section-comparatif .conteneur-comparatif { 
        transform: rotateX(180deg);
    }

    .section-intro {
        padding: 7rem 2rem 1rem 2rem;
        background: #fdfdfd;
    }
    
    .comparatif-intro {
        margin-bottom: 0rem;
    }

    h1 {
        text-align: center;
        color: #F07E13;
        font-size: 38px;
    }

    h2 {
        text-align: center;
        color: #2C373F;
        font-size: 20px;
    }

    .scroll-instruction {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        margin: 2rem 1.5rem 0 auto;
        max-width: 1800px;
    }

    .line {
        flex-grow: 100;
        height: 3px;
        background: #F07E13;
        margin: auto 0;
        position: relative;
    }

    .line-left img {
        position: absolute;
        left: -2px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: 25px;
    }

    .line-right img {
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: 25px;
    }

    .center-instruction {
        display: flex;
        flex-wrap: wrap;
        margin: auto 2rem;
        width: fit-content;
        justify-content: center;
    }

    .img-scroll {
        width: 40px;
        height: 40px;
        margin: auto 0.5rem auto 0;
        background-image: url("../svg/scroll-icon-mob.svg");
    }

    .center-instruction p {
        margin: auto 0;
        font-weight: 600;
    }

    .center-instruction p span {
        display: none;
    }

    .section-comparatif {
        background: #fdfdfd;
        padding: 5rem 1rem 1rem 1rem;
        overflow-x: auto;
        position: relative;
    }

    .conteneur-comparatif {
        display: flex;
        overflow: auto;
        white-space: nowrap;
        width: -moz-fit-content;
        width: fit-content;
    }

    .colonne-solution {
        width: 86vw;
        margin: 1rem 1.5rem;
    }
    
    .card-solution {
        background: #ffffff;
        box-shadow: 0px 1px 10px rgb(0 0 0 / 18%);
        padding: 1.5rem 0 0 0;
        border-radius: 30px;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        align-content: start;
    }

    .card-solution h3, .card-solution h4, .card-solution p {
        white-space: normal;
    }

    .picto-intro {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .picto-intro img {
        width: 150px;
        height: auto;
    }

    .card-solution h3 {
        font-family: 'Kanit', sans-serif;
        font-size: 36px;
        text-align: center;
        color: #FF9933;
        margin: 1rem auto 1.5rem auto;
    }

    .point-fort {
        border-top: 2px solid #FF9933;
        padding-top: 1rem;
        background: #fffaef;
        padding: 2.5rem 2rem;
        width: 100%;
        height: 42%;
    }

    .point-fort h4 {
        text-align: center;
        text-transform: uppercase;
        font-weight: 800;
    }

    .point-fort p {
        font-weight: 600;
        color: #2C373F;
    }

    .usage {
        border-top: 2px solid #697077;
        border-bottom: 2px solid #697077;
        padding: 2.5rem 2rem;
        background: #fcfcfc;
        width: 100%;
        height: 24%;
    }

    .usage h4 {
        color: #F07E13;
    }

    .usage p {
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: 'Kanit';
        color: #2C373F;
    }

    .usage p:last-child, .point-fort p:last-child {
        margin-bottom: 0;
    }

    .colonne-solution a {
        margin: 2rem auto;
    }

    .colonne-solution button {
        margin: auto;
        padding: 0.7rem 1.5rem;
        border-radius: 6px;
        border: none;
        background-color: #FF9933;
        color: #ffffff;
        font-size: 16px;
        font-family: 'Kanit', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.1s ease-in-out;
    }

    .colonne-solution button:hover {
        background-color: #F07E13;
    }

    .bouton-scroll-left, .bouton-scroll-right {
        position: fixed;
        padding: 1.8rem 0.6rem 1.5rem 0.6rem;
        font-family: 'Biryani';
        font-size: 24px;
        font-weight: 800;
        color: #ffffff;
        background: #2C373F;
        border: 2px solid #2C373F;
        border-radius: 5rem;
        box-shadow: 0px 0px 6px 2px rgb(0 0 0 / 14%);
        opacity: 90%;
        z-index: 1000;
    }

    .bouton-scroll-left {
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
    }

    .bouton-scroll-right {
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* style spécifique cawibox */

    .solution-cawibox .usage {
        border-top: 2px solid #FF9933;
        border-bottom: 2px solid #FFAC5A;
    }

    /* style spécifique cawipad */
    .solution-cawipad h3 {
        color: #75a575;
    }

    .solution-cawipad .point-fort {
        border-top: 2px solid #75a575;
        background: #e7ffe6;
    }

    .solution-cawipad .usage h4 {
        color:#4d844e;
    }

    .solution-cawipad .usage {
        border-top: 2px solid #75a575;
        border-bottom: 2px solid #9cc69b;
    }

    .solution-cawipad button {
        background-color: #75a575;
    }

    .solution-cawipad button:hover {
        background-color: #4d844e;
    }

    /* style spécifique enquête online */
    .solution-online h3 {
        color: #7ED1D1;
    }

    .solution-online .point-fort {
        border-top: 2px solid #7ED1D1;
        background: #f3fdff;
    }

    .solution-online .usage h4 {
        color:#5bb2ab;
    }

    .solution-online .usage {
        border-top: 2px solid #7ED1D1;
        border-bottom: 2px solid #a0e5ea;
    }

    .solution-online button {
        background-color: #7ed1d1;
    }

    .solution-online button:hover {
        background-color: #5bb2ab;
    }

    /* style spécifique enquête papier */
    .solution-papier h3 {
        color: #ccab72;
    }

    .solution-papier .point-fort {
        border-top: 2px solid #ccab72;
        background: #fffceb;
    }

    .solution-papier .usage h4 {
        color:#b28951;
    }

    .solution-papier .usage {
        border-top: 2px solid #e1cd96;
        border-bottom: 2px solid #e1cd96;
    }

    .solution-papier button {
        background-color: #ccab72;
    }

    .solution-papier button:hover {
        background-color: #b28951;
    }

}


/* ----------------------------------------------- */
/* ---------- PETIT TABLETTE SM - 576px ---------- */
@media (min-width:576px) {

    .center-instruction p span {
        display: inline;
    }

    .colonne-solution {
        width: 60vw;
    }

}




/* ----------------------------------------- */
/* ---------- TABLETTE MD - 768px ---------- */
@media (min-width:768px) {

    .colonne-solution {
        width: 25rem;
        margin: 1rem 1.5rem;
    }

}



/* -------------------------------------- */
/* ---------- ECRAN LG - 992px ---------- */
@media (min-width:992px) {



}



/* --------------------------------------------- */
/* ---------- ECRAN MOYEN XL - 1200px ---------- */
@media (min-width:1200px) {

    .img-scroll {
        width: 45px;
        height: 45px;
        background-image: url("../svg/scroll-icon-desk.svg");
    }

}



/* ---------------------------------------------- */
/* ---------- ECRAN LARGE XXL - 1400px ---------- */
@media (min-width:1400px) {

    .conteneur-comparatif {
        justify-content: center;
    }

}

/* ---------------------------------------------- */
/* ---------- CAS PARTICULIER - 1850px ---------- */
@media (min-width:1900px) {

    .bouton-scroll-left, .bouton-scroll-right {
        display: none;
    }

    .scroll-instruction {
        display: none;
    }

    .conteneur-comparatif {
        margin: auto;
    }

    .colonne-solution {
        width: 26rem;
    }

}