.text-rouge{
	color: #ff0000 !important;
}

.text-rose{
	color: #E47662 !important;
}

.text-bleu{
	color: #00205F !important;
}



.bg-rouge{
	background-color: #ff0000 !important;
}

.bg-rose{
	background-color: #E47662 !important;
}

.bg-bleu{
	background-color: #00205F !important;
}




/*================= CSS DU CONTENU ========================*/

.content{
    width: 100%;
    background-color: #F9F7F4;
    padding-top: 220px;
    /* z-index: -2; */

}
.container-decor{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
}


/*===== CSS DU titre =====*/
.g-title{
    height: 70px;
}

.g-title h1{
	font-size: 65px;
    font-weight: 500;
}

/*===== fin  =====*/



/*======== CSS Des informations et de l'image  ==========*/

/*===== CSS Des colonnes de text  =====*/

.colon1{
    width: 22%;
    margin-right: auto;
    z-index: 5;
}

.colon3{
    width: 22%;
    margin-left: auto;
    z-index: 1;
}




/* CSS Des colonnes image de pourcentage */
.bloc{
    min-height: 600px;
}
/*
.bt{
    position: relative;
    margin-top: auto !important;
    height: 500px !important;
} */

.bloc img{
    width: 50px;
    padding-bottom: 20px;
}
/* fin */

.bloc .h1{
	font-size: 70px;
    line-height: 50px;
    font-weight: 600;
    margin-top: auto;
}
.bloc .h2{
	font-size: 70px;
    line-height: 50px;
    font-weight: 600;
}

.bloc p{
    margin-top: 20px;
	font-size: 20px;
    /* height: 200px; */
}


.bloc a{
	font-size: 22px;
    font-weight:600;
    /* bottom: 0px;
    position: absolute; */
    /* padding-bottom: 20px;
    border-bottom: 3px solid; */
}


.g{
    text-align: left;
}

.d{
    text-align: right;
}


/* CSS Du cercle image */

.colon2{
    width: 50%;
    /* margin-top: auto;
    margin-bottom: auto; */
    height: max-content;
    position: sticky;
    top: 170px;
    margin-top: 50px;
    margin-bottom: 100px;
}


.maLigne{
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0px;
    left: 0px;
    visibility: hidden;
}

.maLigne2{
    position: absolute;
    width: 50%;
    z-index: 1;
    top: -200px;
    left: 0px;
}


/* fin du CSS Du cercle image */


/* css de grand boutton du bas */
@media screen and (max-width: 1427px) {

    .bloc img{
        width: 40px;
        padding-bottom: 0px;
    }

    .bloc .h1{
        font-size: 50px;
        font-weight: 600;
        line-height: 40px;
    }
    .bloc .h2{
        font-size: 50px;
        font-weight: 600;
        line-height: 40px;
    }
    
    .bloc p{
        font-size: 20px;
        line-height: 22px;
    }
    
    
    .bloc a{
        font-size: 22px;
        font-weight:600;
    }
    
}

@media screen and (max-width: 1400px) {
    .maLigne2{
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 0px;
        left: 0px;
    }
}


@media screen and (max-width: 1024px) {

    .dc{
        width: 90%;
        border-radius: 50%;
        border: 2px solid #fff;
        overflow: hidden;
        margin-top:auto !important;
        margin-bottom:auto !important;
    }
    /*===== CSS DU titre =====*/
    .g-title{
        height: 100px;
    }
    
    .g-title h1{
        font-size: 60px;
        font-weight: 500;
    }
    
    /*===== fin  =====*/
    

    .colon2{
        width: 100%;
        position: relative;
        top: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    
    .colon1,.colon3{
        width: 80%;
        margin: auto;
    }
    
    .colon3{
        margin-top: 120px !important;
    }
    
    
    .bloc{
        min-height: 500px;
    }
    
    /* CSS Des colonnes image de pourcentage */
    .bloc img{
        width: 50px;
        padding-bottom: 20px;
    }
    /* fin */
    
    .bloc .h1{
        font-size: 90px;
        font-weight: 600;
        line-height: 70px;
    }
    .bloc .h2{
        font-size: 90px;
        font-weight: 600;
        line-height: 70px;
    }
    
    .bloc p{
        font-size: 27px;
        line-height: 30px;
    }

    
    .g{
        text-align: center;
    }
    
    .d{
        text-align: center;
    }

    .maLigne2{
        visibility: hidden;
    }
    
    .maLigne{
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 0px;
        left: 0px;
        visibility: visible;
    }

}





@media screen and (max-width: 652px) {
    .colon1,.colon3{
        width: 100%;
        margin: auto;
        margin-bottom: auto;
    }
    
}



@media screen and (max-width: 558px) {
    
    .g-title h1{
        font-size: 50px;
        font-weight: 500;
    }
    

    
    /* CSS Des colonnes image de pourcentage */
    .bloc img{
        width: 40px;
        padding-bottom: 10px;
    }
    /* fin */
    
    .bloc .h1{
        font-size: 60px;
        font-weight: 600;
        line-height: 50px;
    }
    .bloc .h2{
        font-size: 60px;
        font-weight: 600;
        line-height: 50px;                              
    }
    
    .bloc p{
        font-size: 20px;
        line-height: 30px;
    }
    
    
    .bloc a{
        font-size: 22px;
        font-weight:600;
        /* bottom: 120px; */
    }
    

}

@media screen and (max-width: 477px) {
    .bloc a{
        font-size: 22px;
        font-weight:600;
        /* bottom: 100px; */
    }
}
.carousel-item {
    width: auto !important;
}