@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');
/*font-family: 'Mulish', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700&display=swap');
/*font-family: 'Karla', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
/* font-family: 'Rammetto One', sans-serif; */
*
{
 margin: 0;
 padding: 0;
font-family: 'Karla', sans-serif;}




.contenuxapropos{
width: 100%;
height: auto;
margin-top: 50px;
/*background-color:#b01149;*/}

.illustationapropos{
width: 99%;
height:500px;
background-color:#AAA7A7;
background-image: url("../images/lien-mere-enfant.jpg");
background-size: cover;

margin: 0px auto	
}

.divtextapropos{
width: 80%;
height:200px;
position: relative;
top: 140px;
margin: 0px auto	
}

.divtextapropos p{
letter-spacing: 10px;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px #333;
}

.divtextapropos h1{
text-align: center;
font-family: 'Rammetto One', sans-serif;
font-size: 70px;
color: #fff;
text-shadow: 3px 3px #333;
}

.centeruxapropos{
width: 90%;
height: auto;
margin: 0px auto
/*background-color:#b01149;*/}

.contenuxaprops1{
width: 100%;
height: 300px;
margin: 0px auto;
}

.contenuxaprops1 p{
color:#464545;
text-align: center;}

.contenuxaprops1 h1{
text-align: center;
font-family: 'Rammetto One', sans-serif;}

.texteapropos{
width: 80%;
height: 200px;
line-height: 1.5;
margin: 0px auto;	
}

.texteapropos p{
color:#464545;
text-align:justify;}


.contenuxaprops2{
width: 80%;
height: 800px;
margin: 0px auto;
display: flex;
}

.contenuxaprops2-1{
width: 240px;
height: 800px;
margin: 0px auto;

}

.xentu{
width: 240px;
height: 350px;
margin: 0px auto;
background-color: #fff;

}

.rond1{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color:#1CF876;
}

.rond1 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
left: 20px;
}

.rond2{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color: #09D8F1;
}

.rond2 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
left: 20px;
}

.xentu h5{
text-align: center;
font-family: 'Rammetto One', sans-serif;
}

.xentu p{
text-align: center;
color:#464545;
line-height: 1.5;
}

.contenuxaprops2-2{
width: 500px;
height: 500px;
margin: 0px auto;
border-radius: 50%;

border:dashed 12px #A54FFA;
}

.contenuxaprops2-3{
width: 240px;
height: 800px;
margin: 0px auto;

}

.xentu2{
width: 240px;
height: 300px;
margin: 0px auto;
background-color: #fff;
}
.xentu2 h5{
text-align: center;
font-family: 'Rammetto One', sans-serif;
}

.xentu2 p{
text-align: center;
color:#464545;
line-height: 1.5;
}
.imgapropos{
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}

.contenuxaprops3{
width: 90%;
height: auto;
margin: 0px auto;
display: flex;
}

.contenuxaprops3-1{
width: 680px;
height: 600px;
margin: 15px;

}

.contenuxaprops3-1 h1{
font-family: 'Rammetto One', sans-serif;
}

.contenuxaprops3-1 p{
text-align: justify;
color:#464545;
line-height: 1.5;
}

.btnlire{
width: 150px;
height: 35px;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
border: none;
background-color:#FB144E; ;
}
.contenuxaprops3-2{
width: 400px;
height: 300px;
margin: 0px auto;
border-radius: 5px;
background-color: #F2686A;
}

.xloxxo{
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}



@media only screen and (min-width: 481px) and (max-width: 1024px){
	
 *{
padding: 0;
margin: 0;}
	


	
}


@media only screen and (min-width: 200px) and (max-width: 480px){
	
*{
padding: 0;
margin: 0;}
	
.contenuxapropos{
width: 100%;
height: auto;
margin-top: 50px;
/*background-color:#b01149;*/}

.illustationapropos{
width: 99%;
height:500px;
background-color:#AAA7A7;

background-size: cover;

margin: 0px auto	
}
	
.divtextapropos{
width: 100%;
height:200px;
position: relative;
top: 100px;
margin: 0px auto	
}

.divtextapropos p{
letter-spacing: 10px;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px #333;
}

.divtextapropos h1{
text-align: center;
font-family: 'Rammetto One', sans-serif;
font-size: 40px;
color: #fff;
text-shadow: 3px 3px #333;
}

.centeruxapropos{
width: 90%;
height: auto;
margin: 0px auto
/*background-color:#b01149;*/}

.contenuxaprops1{
width: 100%;
height: auto;
margin: 0px auto;
}

.contenuxaprops1 p{
color:#464545;
text-align: center;}

.contenuxaprops1 h1{
font-size: 20px;
text-align: center;
font-family: 'Rammetto One', sans-serif;}

.texteapropos{
width: 80%;
height: auto;
line-height: 1.5;
margin: 0px auto;	
}

.texteapropos p{
color:#464545;
text-align:justify;}


.contenuxaprops2{
width: 90%;
height: auto;
margin: 0px auto;
display: block;
}

.contenuxaprops2-1{
width: 100%;
height: auto;
margin: 0px auto;

}

.xentu{
width: 100%;
height: 350px;
margin: 0px auto;
background-color: #fff;

}

.rond1{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color:#1CF876;
}

.rond1 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
left: 20px;
}

.rond2{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color: #09D8F1;
}

.rond2 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
left: 20px;
}

.xentu h5{
text-align: center;
font-family: 'Rammetto One', sans-serif;
}

.xentu p{
text-align: center;
color:#464545;
line-height: 1.5;
}

.contenuxaprops2-2{
width: 250px;
height: 250px;
margin: 0px auto;
border-radius: 50%;

border:dashed 8px #A54FFA;
}

.contenuxaprops2-3{
width: 100%;
height: auto;
margin: 0px auto;

}

.xentu2{
width: 100%;
height: 300px;
margin: 0px auto;
background-color: #fff;
}
.xentu2 h5{
text-align: center;
font-family: 'Rammetto One', sans-serif;
}

.xentu2 p{
text-align: center;
color:#464545;
line-height: 1.5;
}
.imgapropos{
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}

.contenuxaprops3{
width: 90%;
height: auto;
margin: 0px auto;
display: block;
}

.contenuxaprops3-1{
width: 100%;
height: auto;
margin: 0px auto;

}

.contenuxaprops3-1 h1{
font-size: 20px;
}

.contenuxaprops3-1 p{
text-align: justify;
color:#464545;
line-height: 1.5;
}

.btnlire{
width: 100%;
height: 35px;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #fff;
border: none;
background-color:#FB144E; ;
}
.contenuxaprops3-2{
width: 100%;
height: 300px;
margin: 0px auto;
border-radius: 5px;
margin-top: 30px;
background-color: #F2686A;
}

.xloxxo{
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}


}