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

    .section-rgpd {
        background: #ffffff;
        padding-bottom: 4rem;
    }

    .rgpd-intro {
        padding: 2rem 1.5rem;
        margin-bottom: 1rem;
        background: #48525B;
    }

    .rgpd-intro h2 {
        text-align: center;
        text-transform: uppercase;
        font-size: 38px;
        margin-bottom: 1rem;
        padding: 0!important;
        color: #FF9933;
    }

    .rgpd-intro h3 {
        text-align: center;
        font-size: 16px;
        color:#ffffff;
        padding: 0!important;
        font-weight: 400;
    }

    .conteneur-rgpd {
        justify-content: center;
    }
    
    .arg-rgpd {
        display: flex;
        flex-wrap: wrap;
        width: 85%;
        padding: 0rem;
    }

    .chiffre-rgpd {
        font-family: 'Kanit', sans-serif;
        font-size: 55px;
        font-weight: 600;
        color: #f07e13;
        text-align: center;
        margin: 0 auto 0 auto;
        width: 100%;
    }

    .txt-rgpd {
        font-size: 15px;
    }

    .lien-rgpd {
        justify-content: center;
        width: 90%;
        margin: 1rem auto 0 auto;
    }

    .lien-rgpd a {
        width: -moz-fit-content;
        width: fit-content;
        padding: 0;
        color:#f07e13;
        font-size: 16px;
        font-family: 'Biryani', sans-serif;
        text-decoration: none;
    }

    .lien-rgpd a:hover {
        color: #D35F00;
        text-decoration: underline;
    }

    
    /* style process */

    .section-process {
        background: #ffffff;
        padding: 6rem 2rem 4rem 2rem;
    }

    .process-intro {
        width: 100%;
        margin: 0 auto 4rem auto;
    }

    .process-intro h1 {
        text-align: center;
        text-transform: uppercase;
        font-size: 26px;
        margin-bottom: 1rem;
        padding: 0!important;
    }

    .process-intro p {
        font-family: 'Kanit', sans-serif;
        font-weight: 500;
        color: #2C373F;
        font-size: 16px;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .deroulement-process {
        width: 100%;
        margin: 0 auto;
    }

    .deroulement-process h2 {
        font-family: 'Kanit';
        color: #242424;
        font-size: 22px;
        margin-left: 0;
        margin-bottom: 3rem;
        border-bottom: 2px solid #f07e13;
        width: -moz-fit-content;
        width: fit-content;
        padding: 0 0.4rem 0.3rem 0rem;
    }

    .process-step {
        display: flex;
        margin-bottom: 4rem;
        flex-wrap: wrap;
    }

    .illu-process {
        display: flex;
        width: 100%;
        margin: 0 0 1rem 0;
    }

    .illu-process img {
        width: 100px;
        height: auto;
        margin: auto;
    }

    .text-process h3 {
        color: #f07e13;
        font-size: 28px;
        font-family: 'Kanit', sans-serif;
    }

    .process-conclusion {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .process-conclusion h3 {
        margin-bottom: 1rem;
        font-size: 36px;
        color: #2c373f;
    }

}


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

    /* style process SM */
    .section-process {
        padding: 6rem 4rem 4rem 4rem;
    }

    .process-intro h1 {
        font-size: 32px;
    }

    

}




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

    .rgpd-intro h3 {
        font-size: 18px;
    }

    .arg-rgpd {
        width: 75%;
    }

    .txt-rgpd {
        font-size: 16px;
    }

    /* style process MD */
    .section-process {
        padding: 6rem 4rem 4rem 4rem;
    }

    .process-intro {
        margin: 0 auto 3rem auto;
    }

    .process-intro h1 {
        font-size: 38px;
    }

    .process-intro p {
        font-size: 18px;
        text-align: center;
    }

    .process-step {
        flex-wrap: nowrap;
    }

    .illu-process {
        margin: 0 4rem 0 0;
        width: auto;
    }

    .illu-process img {
        width: 120px;
        margin: auto auto auto 0;
    }

    .text-process h3 {
        font-size: 32px;
    }

    .process-conclusion {
        width: 90%;
        border: 2px solid #f07e13;
        padding: 2rem;
        border-radius: 15px;
    }

}



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

    .section-rgpd {
        background: #697077;
    }

    .rgpd-intro {
        padding: 3rem 1.5rem;
        margin-bottom: 4rem;
    }

    .rgpd-intro h2 {
        font-size: 48px;
    }

    .conteneur-rgpd {
        justify-content: space-between;
        padding: 0 2rem;
    }

    .arg-rgpd {
        margin-bottom: 2rem;
        width: 45%;
        box-shadow: 0px 1px 8px rgb(0 0 0 / 8%);
        padding: 2rem;
        border-radius: 15px;
        background: #ffffff;
    }

    .chiffre-rgpd {
        font-size: 55px;
        margin: 0 auto 1rem auto;
        line-height: 0.8;
    }

    .lien-rgpd a {
        color:#ffffff;
        font-weight: 600;
    }

    .lien-rgpd a:hover {
        color: #FF9933;
    }

    /* style process  */
    .process-intro {
        width: 90%;
    }

    .deroulement-process {
        width: 85%;
    }

    .deroulement-process h2 {
        font-size: 26px;
        margin-bottom: 4rem;
        
    }

}



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

    .intro-rgpd h2 {
        font-size: 54px;
    }

    .intro-rgpd h3 {
        text-align: center;
    }

    .conteneur-rgpd {
        justify-content: space-evenly;
    }

    .arg-rgpd {
        margin-bottom: 3rem;
        width: 40%;
    }

    .chiffre-rgpd {
        font-size: 64px;
        line-height: 0.7;
        width: 3rem;
    }

    .lien-rgpd {
        margin-top: 0;
    }

    /* style process XL */
    .section-process {
        padding: 8rem 2rem 4rem 2rem;
    }


}



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

    .process-intro h1 {
        font-size: 52px;
    }
}

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



}