/* **********************************************/
/* 		 				*/
/* **********************************************/
body{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #c8dde1;
}

#container_all {
	display: flex;
	flex-direction: column;
	background-color:#fffcf3;
	align-items: center;
		border: 2px solid #258BCC;
	border-bottom:none;
	height:100%;
}
#container_all p1{
	font-size: x-small;
	text-align: right;
	width: 100%;
	font-weight: normal;
}
#banner_container {
	display: flex;
	flex-direction:column;
	align-items: center;
	font-weight: bold;
	background-image: url('../image/fond_test_1.jpeg');
	justify-content: space-around;
	font-family: Dulcelin;
	background-position: top;
	background-attachment: fixed;
	background-repeat: no-repeat;
	width:100%;
	padding:5px 0 5px 0;
}
#banner_title {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
}
#banner_citation  {
	display: flex;
	font-family: 'source_sans_proregular', Arial, sans-serif;
	font-family: 'Dulcelin';
	/* font-family: 'French Script MT'; */
	border: 1px solid #258BCC;
	border-top-left-radius: 20px 20px;
	border-top-right-radius: 20px 20px;
	border-bottom-left-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	background-color: white;
	color: #258BCC;
	font-weight:normal;
	padding: 2px 10px;
	text-align: center;
	width: 95%;
	font-size: large;
	flex-direction: column;
	height: max-content;
	margin: 5px auto 5px auto;
}
#banner_citation p {
	background-color: white;
	color:#258BCC;
}
#banner_title  h1,
#banner_title p{
	font-family: Dulcelin;
	font-size: xx-large;
	font-weight:bold;
	text-align: center;
	font-size: xxx-large;
}
#banner_citation p1{
	margin-right: 30px;
	font-size: small;
}
#banner_citation a{
	font-family: 'source_sans_proregular', Arial, sans-serif;
	font-size: small;
	font-weight: normal;
	color:#258BCC;
}
#container_main{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.class_home_citation p,
.class_doula_citation p{
	font-family: 'Dulcelin';
	font-size: large;
	text-align: center;
	font-weight: normal;
	color:#258BCC;
}
.class_citation_button{
	display: flex;
	flex-direction: column;
	position: absolute;
	border-top-left-radius: 80px 80px;
	border-top-right-radius: 80px 80px;
	border-bottom-left-radius: 80px 80px;
	border-bottom-right-radius: 80px 80px;
	background-color: white;
	padding: 10px 25px;
	z-index:1;
	font-weight:bold;
	color:#258BCC;
	text-align: center;
}
#container_homeButtonLeft{
	width: 50%;
	top: 42%;
	left: 1%;
	padding: 5px 5px;
}
#container_homeButtonLeft .class_container_input{
	display: flex;
	flex-direction: column;
	margin: 10px 0 0 0;
}
#container_homeButtonRight{
	width: 29%;
	padding: 5px 10px;
	right:1%;
	top: 55%;
}
#container_homeButtonBottom{
	background-color: transparent;
	top: 90%;
	right: 15%;
}
#container_homeButtonRight .class_home_citation{
	margin: 5px 0 0 5px;
}
input[type='button']{
	z-index: 1;
	background-color: #9FC12B;
	color: white;
	text-decoration: none;
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	cursor: pointer;
	border: none;
	margin:5px;
	align-self: center;
	font-size: large;
	text-wrap: auto;
	width: 80%;
}
#container_homeButtonRight input[type='button']{
	width:60%;
}
#container_homeButtonBottom input[type='button']{
	width:100%;
}
.class_home_citation{
	display: flex; 
	flex-direction: column;
	align-items: center;
	padding-top: 5px;
}
.class_doula_citation{
	position:absolute;
	display: flex; 
	flex-direction: column;
	align-items: center;
	background-color: white;
	border:2px solid #9FC12B;
	border-top-left-radius: 80px 80px;
	border-top-right-radius: 80px 80px;
	border-bottom-left-radius: 80px 80px;
	border-bottom-right-radius: 80px 80px;
}
#citation_definition{
	width:90%;
	top:8%;
	right: 3%;
	padding:5px;	
}
#citation_definition p1{
	margin-right: 30px;
	font-size: small;
}
#citation_definition a{
	font-family: 'source_sans_proregular', Arial, sans-serif;
	font-size: small;
}
#citation_deathEnd{
	width:90%;
	top:8%;
	right: 3%;	
}
#citation_deathEnd p1{
	padding-right: 40px;
	font-size: small;
}
#container_text input[type="button"] {
	top: 1%;
	position: absolute;
	right: 1%;
	font-size: xx-large;
}
#container_text input[type="button"][name='home'] {
	font-family: 'source_sans_proregular', Arial, sans-serif;
	width: max-content;
	font-size: x-large;
}


/* ****************************************************************************************/
@media all and (max-height: 800px)
{
	#banner_title  h1,
	#banner_title p {
		font-size: xx-large;
	}
}
/* ****************************************************************************************/
@media all and (max-width: 800px)
{
	#banner_title  h1,
	#banner_title p {
		font-size: xx-large;
	}
}


/* ****************************************************************************************/
/*            Règles spécifiques PC Ariane                               */
/* ****************************************************************************************/
@media all and (max-height: 700px)
{
	#banner_title  h1,
	#banner_title p {
	  font-size: xx-large;
	}

	input[type="button"][name="home"] {
		font-size: x-large;
	  }

}

/* ****************************************************************************************/
/*            Règles spécifiques pour smartphone tablet mode landscape                               */
/* ****************************************************************************************/
@media all and (max-width: 1024px), all and (orientation: landscape)
{
}


/* ****************************************************************************************/
/*           IPAD portrait & landscape                              */
/* ****************************************************************************************/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
{ 
}
/* ****************************************************************************************/
/*           IPAD landscape                                 */
/* ****************************************************************************************/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{ 
}

/* ****************************************************************************************/
/*           IPAD portrait                            */
/* ****************************************************************************************/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){

}

/* ****************************************************************************************/
/*           smartphone portrait                            */
/* ****************************************************************************************/
@media only screen  
and (max-device-width : 768px) 
and (orientation : portrait)
{
}
/* ****************************************************************************************/
/*           smartphone landscape                                 */
/* ****************************************************************************************/

@media only screen 
and (max-device-width : 768px) 
and (orientation : landscape)
{ 
}
/* ****************************************************************************************/
/*           smartphone portrait & landscape                              */
/* ****************************************************************************************/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 768px) 
{ 
}
/* ****************************************************************************************/
/*           Règles spécifiques pour tablet mode portrait                                 */
/* ****************************************************************************************/
@media all and (max-width: 840px) , all and (max-height: 700px)
{
}

/* ****************************************************************************************/

@media all and (orientation: landscape) {
}

/* ****************************************************************************************/
@media all and (orientation: portrait) , all and (max-height: 1500px) {
}
/* ****************************************************************************************/
/* ****************************************************************************************/
@media all and (orientation: portrait) {
}

/* ****************************************************************************************/
/*                    Règles spécifiques petite hauteur                        */
/* ****************************************************************************************/
 @media all and (max-height: 700px)
 {
	input[type="button"] {
	  font-size: medium;
	}
	 #container_homeButtonRight {
		top: 36%;
	  }
	 #container_homeButtonRight input[type="button"]{
		width:80%;
	  }
 }

/* ****************************************************************************************/
/*                    Règles spécifiques pour all et petite taille                        */
/* ****************************************************************************************/

 @media all and (max-width: 700px) ,
 all and (max-height: 550px) 
{

	.class_home_citation p {
		font-size: large;
	}
	#container_homeButtonLeft{
		width: 42%;
		    padding: 2px 0 5px 0;
	}
	#container_homeButtonRight{
        width: 37%;
        top: 55%;
        padding: 10px 0 10px;
	}
	#container_homeButtonRight input[type='button'] {
		width: 85%;
	}

	#banner_title  h1,
	#banner_title  p{
		font-size: x-large;
		padding: 5px 0 5px 0;
	}
	#container_homeButtonLeft .class_home_citation,
	#container_homeButtonRight .class_home_citation,
	#container_homeButtonRight p1{
		display:none;
	}
	.class_citation_button{
		border-top-left-radius: 40px 40px;
		border-top-right-radius: 40px 40px;
		border-bottom-left-radius: 40px 40px;
		border-bottom-right-radius: 40px 40px;
		background-color: white;
		border: none;
	}
	.class_citation_button input[type='button']{
		width: 100%;
        word-break: unset;
        word-wrap: normal;
        /* font-size: 1em; */
		text-wrap: auto;
		margin: 5px;
	}

}

/* ****************************************************************************************/
/*                    Règles spécifiques smartphone portrait     */
/* ****************************************************************************************/
 @media all and (max-width: 480px) 
{
	#banner_container {
		flex-direction:column;
		background-image: url('../image/entete_3.png');
		background-size: cover;
	}
	#banner_title {
		flex-direction:column;
		align-items: center;
	}
	#container_all { /* sinon border pas bonne sur smartphone 360x630 */
		margin-left:2px;
	}
	#banner_citation{
		width: 90%;
		font-size: medium;
	}
	#banner_citation p{
		width: 80%;
		align-self: center;
	}
	#container_homeButtonLeft {
        top: 35%;
    }
	#container_homeButtonRight {
        top: 40%;
    }
	#container_homeButtonLeft input[type='button'] {
        padding: 0;
    }
	#container_homeButtonBottom {
		width: 90%;
		right: 0;
		padding: 0 5%;
	}
}