/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700&display=swap'); /*import google font*/
																									
body {
	margin : 0px;
	background-color: #ecebeb;
}
* {
	font-family: 'Tajawal', sans-serif;/* importé de google fonts - complete la ligne @import.....*/ 
 -webkit-box-sizing: border-box; 
  box-sizing: border-box; /* G++: tu as mis des box-sizing bizarre pour tes textarea je sais pas pourquoi, ça cassait tout et tu as mis des margin-right pour corriger ce que tu avais cassé haha, tout le temps rester en box-sizing: border-box !! */
}

/*------------------------LIENS a -----------------------------------------------------------------------------------------------------------------*/
a {
	color: #7fc6cd ;
	outline: none;
	text-decoration: none;
	font-weight:700;	
}

a:hover {
	color: #706f6f ;
}

/*------------------------- <h1> -----------------------------------------------------------------------------------------------------------------*/
h1{
	font-size: 30px;
	font-weight:200; 
	margin-bottom:10px;
}

/****** NAVBAR *****/
/*  LOGO EN HAUT A GAUCHE OK MAIS PASSE EN DESSOUS DE LIMAGE PARRALAX-----*/
.logo{
	position: fixed;
	top: 20px;
	left: 20px;
	  z-index:3;
  }
  
.en-cours-de-developpement {
position: fixed;
top: 0;
width: 50%;
max-width: 200px;
height: auto;
margin: 0 auto;
left: 0;
right: 0;
z-index: 3;
}


.laptop-nav {
position: fixed;
right: 25px;
z-index: 3;
text-align: right;
top: 0;
bottom: 0;
margin: auto 0;
height: fit-content;
}
#nav-menu-span {
color: rgb(128, 128, 128);
font-size: 12px;
letter-spacing: 1px;
font-weight: 300;
margin-bottom: 5px;
display: block;
}
.laptop-nav ul {
list-style: none;
padding: 0;
margin: 0;
margin-right: 9px;
}
.laptop-nav li {
display: flex;
align-items: center;
justify-content: end;
margin: 2.5px 0;
padding: 2.5px 0;
}
.laptop-nav li a {
cursor: pointer;
text-decoration: none;
font-weight: normal;
}
.laptop-nav li .nav-title {
opacity: 0;
transition-duration: 200ms;
color: rgb(128, 128, 128);
}
.laptop-nav li .nav-point {
display: block;
transition-duration: 200ms;
width: 10px;
height: 10px;
background-color: rgb(128, 128, 128);
border-radius: 25px;
margin-left: 10px;
}
.laptop-nav li:hover > .nav-title {
opacity: 1;
}
.laptop-nav li:hover > .nav-point {
width: 5px;
height: 5px;
/*background-color: rgb(187, 187, 187);*/
margin-right: 2.5px;
}

#menuToggle {
display: none;
}

@media screen and (max-width: 900px) {
.laptop-nav {
	display: none;
}
#menuToggle
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
}

#menuToggle
{
position: fixed;
top: 45px;
right: 20px;

z-index: 3;

-webkit-user-select: none;
user-select: none;
}

#menuToggle a
{
text-decoration: none;
color: #ffffff;
text-align: center;
font-weight: normal;
transition: color 0.3s ease;
}

#menuToggle a:hover
{
color: #b8b8b8;
}


#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
right: -6px;

cursor: pointer;

opacity: 0; /* hide this */
z-index: 4; /* and place it over the hamburger */

-webkit-touch-callout: none;
}

/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;

background: #ffffff;
border-radius: 3px;

z-index: 2;

transform-origin: 4px 0px;

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
			opacity 0.55s ease;
}

#menuToggle span:first-child
{
transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}

/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 100vw;
height: 100vh;
margin: -45px -20px 0 0;
padding: 50px;
padding-top: 125px;

background: rgba(0, 0, 0, 0.85);
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */

transform-origin: 0% 0%;
transform: translate(100%, 0);

transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
padding: 10px 0;
font-size: 22px;
}

/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}

/*-------------------------------HEADER----(@GUILLAUME : pas réussi à positionner le header correctement en include) ----------------------------------------------------------------------------------------*/

.header{
	/*top:0; /*test 1/2*/
	/*height:200px;*/
}

/*-----------BANDEAU CANARD-----------------------------------------------------------------------------------------------------------------*/
.bandeau-canard {
	background-image: url('https://www.creativebyfre.com/images/header-canard.jpg');
	background-size: contain; /*le code magique qui m'a enfin permis dafficher le fucking background à sa taille reelle !!!!! */
	/*background-color: #ecebeb;*/
	text-align: center;
	padding-top: 0px;
	height:160px;
	margin:0;
}

/*-----------BANDEAU WEDNESDAY-----------------------------------------------------------------------------------------------------------------*/
.bandeau-wednesday {
	background-image: url('https://www.creativebyfre.com/images/header-wednesday.jpg');
	background-size: contain; /*le code magique qui m'a enfin permis dafficher le fucking background à sa taille reelle !!!!! */
	background-repeat:none;
	/*background-color: #ecebeb;*/
	text-align: center;
	padding-top: 0px;
	height:160px;
	margin:0;
}


/*---------------LOGO BABY-------------------------------------------------------------------------------------------------------------------*/
.baby {
	text-align:center;
	margin-top: -100px; 
	/*a essayer :                    */
	/* Préserve le ratio de l'image  */
	/*min-width: 100%;               */
	/*min-height: 100%;              */
}	

	.baby img {
		width:250px; /* vrai 335*/ /* G++: ton image initiale est juste trop grande, tu as mis toi même les dimensions réelles qui sont + grandes */
		height:198px;/* vrai 265*/ /*je ne comprend pas pkoi le png apparait zoomé, obligé de le reduire en css pour avoir sa vraie taille....*/
}

@media screen and (max-width: 840px) {/*F++ : réduction taille bb logo sur mobile*/   /*R E S P O N S I V E */
	.baby img {
		width:200px;/*180px;/*166px;*/
		height:158px;/*142px;/*131px;*/
		margin-top:25px;  
		margin-bottom:-25px;
	}
}

/*---------------LOGO CREATIVE BY FRE TEMOIGNAGES-------------------------------------------------------------------------------------------------------------------*/
.logo-cbf {
	text-align:center;
	margin-top: -100px; 
	/*a essayer :                    */
	/* Préserve le ratio de l'image  */
	/*min-width: 100%;               */
	/*min-height: 100%;              */
}	

	.logo-cbf img {
		width:180px; /* vrai 335*/ /* G++: ton image initiale est juste trop grande, tu as mis toi même les dimensions réelles qui sont + grandes */
		height:180px;/* vrai 265*/ /*je ne comprend pas pkoi le png apparait zoomé, obligé de le reduire en css pour avoir sa vraie taille....*/
}

@media screen and (max-width: 840px) {/*F++ : réduction taille bb logo sur mobile*/   /*R E S P O N S I V E */
	.logo-cbf img {
		width:120px;/*180px;/*166px;*/
		height:120px;/*142px;/*131px;*/
		margin-top:-25px;  
		margin-bottom:-35px;
	}
}


/*-----------BANDEAU CANARD-----------------------------------------------------------------------------------------------------------------*/
.bandeau-cbf {
	background-image: url('https://www.creativebyfre.com/images/header-creative-by-fre.jpg');
	background-size: contain; /*le code magique qui m'a enfin permis dafficher le fucking background à sa taille reelle !!!!! */
	/*background-color: #ecebeb;*/
	text-align: center;
	padding-top: 0px;
	height:150px;
	margin:0;

}

@media screen and (max-width: 840px) {/*F++ : réduction taille bb logo sur mobile*/   /*R E S P O N S I V E */
	.bandeau-cbf {
		/*width:3000px;*/
		
		background-repeat:no-repeat;
	}
}


/*-------------------------------------------------LOGIN POUR PAGE RECAP & PAIEMENT -------------------------------------------------------------------------*/

.login{
	font-size:14px;
	background-color: white;
	padding:5px ;
	color: #564645 ;  
	border-radius: 10px; 
	/*width:210px; /* Je fixe pas de largeur pour que la taille s'adapte à la taille du nom*/
	/*les 2 lignes du dessous ==> pour que le login et le picto se retrouve l'un à coté de lautre (à completer avec display:flex et flex-direction:column dans la div picto et div nom*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 
	-ms-flex-wrap:wrap; 
	    flex-wrap:wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	position: absolute;
	top: 30px;
	right: 30px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}
.login img {
	width: 20px;
	height: 20px;
	margin-right: 5px;
}
.login-nom{
	display: flex;
	line-height: 14px;
}
@media screen and (max-width: 840px) {/*F++ : réduction taille bb logo sur mobile*/   /*R E S P O N S I V E */
	.login {
		right: 0;
		left: 0;
		margin-left: auto; 
  		margin-right: auto;
		padding: 4px 5px;
		border-radius: 8px; 
	}
	.login img {
		width: 16px;
		height: 16px;
	}
	.login-nom{
		margin-top: 2px;
		line-height: 14px;
	}
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------P A G E   F O R M U L A I R E -----------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Largeur définie pour toute la page, responsive */
.main-conteneur {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
/*-PAGE FORMULAIRE / --- TITRE SVG--------------------*/
.mon-beau-faire-part{
	margin-top:50px;
	text-align:center;
}
.mon-beau-faire-part img {
	width: 90%; /* G++: responsive de l'image */
	max-width: 400px;
}

@media screen and (max-width: 840px) {/*F++ : réduction espace sous titre mon beau faire-part*/ /*R E S P O N S I V E */
	.mon-beau-faire-part img {
		margin-bottom:-25px;
	}
}



/*-PAGE FORMULAIRE / --- paragraphe INTRO--------------*/
.intro h2{
	/*width:90%; /*marge du texte de lintro pour version mobile, ptet ajouter un maxwidth*/
	padding-top:30px;
	font-weight: 300;
	text-align: center;
	font-size:18px;
	line-height:2em;
	/*margin-bottom: 0px; *//*pas d'espace sous le cadre gris, si je ne met pas ca, par defaut l'espace est plus grand */
}

.intro i{
	color:#7fc6cd
}

@media screen and (max-width: 580px) {/*F++ : tentative marges sur texte intro pour version mobile sinon collé aux bords, mais ca le décentre...pas réussi à centrer*/
	.intro h2{
		width:90%;
		line-height:1;
		margin-left: auto;
		margin-right: auto;
	}
	.intro h2 .intro-title-1 {
		margin-top: 15px;
		display: block;
	}
	.intro h2 .intro-title-2 {
		margin: 0;
		display: block;
	}
}
/*fin INTRO--*/



/*-PAGE FORMULAIRE / --- Cadre gris OFFRE SPECIALE  --*/
.cadre-offre {
	margin:auto;
	background-color: #564645; 
	margin-top:35px;
	padding:10px 20px 10px 20px ;
	border-radius: 10px;
	text-align: center;
	font-size:15px; 
	font-weight:300;
	max-width: 750px;
}

.cadre-offre-corps {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;        
	-ms-flex-wrap:wrap;        
	    flex-wrap:wrap;   
	margin-bottom: 0px;  
}

/*-PAGE FORMULAIRE / --- cadre OFFRE Gauche-----------*/
.cadre-offre-corps-gauche{
	color: white ;
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
}

.cadre-offre-corps-gauche .raye{
	margin-top:0px;
	color: white ;
	text-decoration: line-through;
	font-size:12px;
	line-height:0.8em;	
}

.prix{ 
	margin-top:0px;
	color:#7fc6cd ;
	font-size:20px;
	line-height:0.8em;
}


.cadre-offre i{
	font-size: 0.75em ;
	color:#7fc6cd
}

.offre-speciale {
	color: white ;
	font-weight:200;
	margin-top:0px;
	margin-bottom: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* G++: pour centrer les étoiles, on passe l'élément en flex et on utilise la propriété justify-content et align-items */
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.offre-speciale i{
	font-size:20px;
}
.offre-speciale span {
	margin: 0 20px;
	letter-spacing: 5px;
	font-size:35px;
}

.reduc20 {
	font-size:60px;
	font-weight:200;
	color:#7fc6cd ;
	margin-top: -5px; 
	margin-bottom: -5px;
}

.imp-liv-offerte{
	color:#7fc6cd;
	font-size:20px;
	margin-top: 0.3em;
	margin-bottom:10px;
}
/*-PAGE FORMULAIRE / --- cadre OFFRE Droite-----------*/
.cadre-offre-corps-droite{
	color: white ;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
	margin-left: 40px;
	text-align:center;
}

.cadre-offre-corps-droite p{
	font-size:20px;
	margin-top:3px;
	margin-bottom:0px;
	letter-spacing: 1px;
	line-height:1.5em;
}

.devis{
	margin-top: 0px;
	color: white ;
	font-style: italic;
	font-size:12px;
	text-align:justify;
}


/* G++: responsive */
@media screen and (max-width: 840px) {
	.cadre-offre-corps {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column; /* On passe en horizontal les 2 blocs */
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center; /* On centre les deux blocs en horizontal */
		margin-top:0px;
	}
	.cadre-offre-corps-droite {
		margin: 0;
		margin-top:-10px;
	}
	.devis {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.offre-speciale {
		margin-top:10px; /*bricolage pour centrer verticalement avec les deux etoiles*/
		margin-bottom: 0;
	}
	.offre-speciale span {
		font-size:25px;
		margin: 0 10px;
	}
	.offre-speciale i {
		font-size:10px;
		margin-bottom: 7px;
	}
	/*.cadre-offre-corps-gauche{ */
	/*	margin-top:-35px; /*remonter le paragraphe "profitez de....." NON ! ca calle nickel sur iphone mais cata sur smartphone !!!!!!!!!!!!!!*/
	/*}*/

	
	.cadre-offre-corps-droite p{
		font-size:16px;/*F++ diminuer taille police*/
	}
	.reduc20 {
	font-size:40px;
	}
}
@media screen and (max-width: 390px) {
	.offre-speciale span {
		font-size:20px;
		letter-spacing: 3px;
		margin: 0 7px;
	}
}
/*fin cadre OFFRE SPECIALE---*/




/*-PAGE FORMULAIRE / --- D I A P O R A M A -------------*/

.diaporama{
	margin:auto;
	background-color: white;
	margin-top:50px;
	border-radius: 10px;																																				
	left: 50% ;
	text-align: center;
	/*padding: 0 30px;*/
	/*box-shadow: inset 5em 1em #000000; pas beau !*/
	height:220px;
}

.conteneur1{
    width: 100%;
    /*margin:0px; /*10px auto;/*50*/
    overflow: hidden;
    /*box-shadow: 0px 15px 10px -5px #777;*/
}

.d1{
	margin-top:10px; /*rajouté par moi*/
	width: 100%;
	height: 200px; /*réduction homotétique de la vraie taille du jpg*/
	background-color: #EDEDED;
}
.d1 img {
	-webkit-animation: defilement1 50s linear infinite;
	animation: defilement1 50s linear infinite;/*12s trop rapide*/
	width: auto;
	height: 200px; /*réduction homotétique de la vraie taille du jpg*/
}
@-webkit-keyframes defilement1{
    0%{
		-webkit-transform: translate(0,0);
		transform: translate(0,0);}
    100%{
		-webkit-transform: translate(-80%,0);
		transform: translate(-80%,0);}
}
@keyframes defilement1{
    0%{
		-webkit-transform: translate(0,0);
		transform: translate(0,0);}
    100%{
		-webkit-transform: translate(-80%,0);
		transform: translate(-80%,0);}
}

.d1:hover, .d1 img:hover {
   -webkit-animation-play-state: paused;
           animation-play-state: paused;/*ca fait stopper le diapo au survol ! top !!*/
}
/*-- Fin DIAPORAMA-- */



/*-PAGE FORMULAIRE / ---- E T A P E S ----------------------*/
.etapes{
	margin:auto;
	margin-top:50px;
	color: #564645 ;  
	line-height: 200%; 
	background-color: white; 
	padding:15px 30px 30px 30px ;
	border-radius: 10px;
	left: 50% ;         			  
	font-size:15px;
}

.etapes h1{
	margin-top:5px;
	margin-bottom:10px; 
}

.etapes .etapes-liste{
	text-align: justify;
}
.etapes i{
	color:#7fc6cd;
}

.etapes .entretien{
	margin-top:15px;
	padding:15px;
	background-color: #7fc6cd;
	color:white;
	font-size:15px;
	border-radius: 10px; 
	line-height: 1.5em;
	
}


/* responsive */
@media screen and (max-width: 840px) {
	.etapes .etapes-liste{
		line-height:1.5;
	}

}

/*-PAGE FORMULAIRE / --- F O R M U L A I R E ----------*/
.formulaire-faire-part {
	margin:auto;
	margin-top: 50px; 
	background-color: white;
	padding:5px 30px 10px 30px ;																								
	left: 50% ;         			
	color: #564645 ;  
	border-radius: 10px;
}

form .corps-formulaire{ 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;         
	-ms-flex-wrap:wrap;         
	    flex-wrap:wrap;         
	margin-bottom: 30px; 
	margin-top:0px;
}

form .corps-formulaire .groupe{ 
	position: relative ;    /* !! pour que les icones se positionnent dans le champ de saisie  */
	margin-top : 10px; 		
	display: -webkit-box; 		
	display: -ms-flexbox; 		
	display: flex; 			/* ETAPE 1sur2 ==> EMPILAGE ELEMENTS DU GROUPE : Ca colle les elements du groupe les uns à coté des autres, mais nous on veut les empiler alors on rajoute la ligne ci dessous : */
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column ;
	        flex-direction: column ;/* ETAPE 2sur2 ==> EMPILAGE ELEMENTS DU GROUPE : ca superpose les uns en dessous des autres les 3 elements du groupe alignés à gauche*/
}

form .separation{
/*stylisation du trait de séparation*/
	width: 100%;
	height: 1px;
	background-color: #7fc6cd ;
	margin-top:35px;
}

form .corps-formulaire .partie-gauche .groupe input{
	margin-top: 3px;
	padding: 5px 5px 5px 30px; /*le 30px pour la gauche c pour décaler le picto dans le champ vers la droite*/
	border: 1px solid #7fc6cd;
	border-radius: 5px;
	color:#777676;
	outline-color: #7fc6cd;/*couleur bordure au clic - marche sur chrome mais pas sur firefox :( */
	width: 250px;
}


form .corps-formulaire .partie-gauche .groupe label{
/*pas utilisé*/	 
}


form .corps-formulaire .partie-gauche .groupe i{
    /*permet de positionner le i (icone) par rapport à son parent le plus proche soit : div groupe (c pour ca que ya position relative à la div groupe )*/
	position: absolute;
	left: 0 ; /*pour placer l'icone au bord  gauche de la div groupe*/
	top: 23px ; /*pour placer l'icone à bord haut de la div groupe*/
	padding: 9px 8px; /*marge à linterieur des icones*/
	color: #7fc6cd;
}
/*-- fin PARTIE GAUCHE--- */


form .corps-formulaire .partie-droite{ 
margin-left: 40px;/*Marges exterieure gauche de la div partie droite : pour separer la colonne de gauche de la colonne de rroite*/
                  /* !! ATTENTION RESPONSIVE : il faut ajuster pour responsive mobile sinon la partie droite ira ala ligne mais tjs avec sa marge a gauche*/
				  /*cf code tout en bas @mediascreen and (max-width......*/
}

form .corps-formulaire .partie-droite .groupe{ 
	/*height: 100%;/*la div  partie-droite occupera la totalité de la hauteur du corps formulaire - pas utilisé*/
}
.texte-faire-part {
	width: 100%;
}

form .corps-formulaire .partie-droite .groupe input{
	margin-top: 3px;
	padding: 5px 5px 5px 30px;
	border: 1px solid #7fc6cd;
	outline-color: #7fc6cd;
	border-radius: 5px;
	color:#777676;
	width: 250px;
}

form .corps-formulaire .partie-droite .groupe i{
/*balise icone i : permet de positionner le i par rapport à son parent le plus proche soit : div groupe (c pour ca quon a ajouté une position relative à la iv groupe au prealable)*/
	position: absolute;
	left: 0 ;         /*pour placer l'icone au bord  gauche de la div groupe*/
	top: 23px ;       /*pour placer l'icone à bord haut  de la div groupe*/
	padding: 9px 8px; /*marge à linterieur des icones*/
	color: #7fc6cd;
}
/*-- fin PARTIE DROITE--- */


form .corps-formulaire .choix-recontact{
	line-height:170%; /*interlignage entre les lignes boutons radio*/
}

			/*TENTATIVE STYLISATION DES BOUTONS RADIO */           /*MARCHE PAS*/
form .corps-formulaire .partie-gauche .choix-recontact input{      /*MARCHE PAS*/
	margin-top: 3px;											   /*MARCHE PAS*/
	border: 1px solid #7fc6cd;                                     /*MARCHE PAS*/
	outline-color: #7fc6cd;/*couleur bordure au clic */            /*MARCHE PAS*/
	color:#777676;                                                 /*MARCHE PAS*/
	background-color: #7fc6cd;                                     /*MARCHE PAS*/
	border-color: #7fc6cd;                                         /*MARCHE PAS*/
}
	
form .corps-formulaire .choix-offre {
		/*width: 200px ;*/
		text-align: justify ;
		line-height:180%; 
		width:100%;
}

form .corps-formulaire textarea {
	margin-top: 3px; 
	margin-bottom:15px;
	padding: 10px;
	border: 1px solid #7fc6cd;
	outline-color: #7fc6cd;
	border-radius: 5px;
	background-color: #7fc6cd;
	resize: none; /*pour figer la taille sinon par defaut on peut le redimensionner dans le navigateur*/
	height: 100px;
	font-size:16px;
	font-family: 'Tajawal', sans-serif;
	font-weight:500;
	color:#ffffff;
	width: 100%; /*le textarea occupe 100% de la largeur de son parent "div choix offre"  ATTENTION IL FAUT FAIRE DE MEME AVEC LA DIV PARENT SI ELLE MEME SE TROUVE DANS UNE DIV    */	
}
form .corps-formulaire .couleur-theme-faire-part textarea,
form .corps-formulaire .precision textarea {
	margin-bottom: 0;
}

form .corps-formulaire textarea::placeholder { /*style du texte placeholdder (texte par defaut dans le textarea AVANT SAISIE*/
  color: #fcfcfc;
  font-size: 15px; /*1.5em;*/
  text-align:justify;
  opacity: 0.8;
}
	

form .corps-formulaire .couleur-theme-faire-part {
	width:100%;
}


/*-PAGE FORMULAIRE / -----"PRECISIONS / AUTRE"-----------------------------------*/
form .corps-formulaire .precision {
	width:100%; /*la div occupe 100% de la largeur de sa div parent*/
}

form .pied-formulaire {
	text-align:center;
}
/* G++: responsive en passant les 2 blocs de champs de texte en colonne */
@media screen and (max-width: 668px) {
	form .corps-formulaire {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	form .corps-formulaire .partie-droite {
		margin-left: 0; /* code fré ok - on enlève la marge du bloc droit */
	}
	form .corps-formulaire .partie-gauche .groupe input, form .corps-formulaire .partie-droite .groupe input {
		width: 100%; /* on passe les champs en largeur 100% */
	}
	form .corps-formulaire .partie-gauche .groupe input,
	form .corps-formulaire .partie-droite .groupe input {
		height:40px;	
	}	
	form .corps-formulaire h1{
	font-size: 25px;
	}
	form .corps-formulaire .partie-droite .groupe i,
	form .corps-formulaire .partie-gauche .groupe i {
		top: 27px;
	}
}

	
/*-PAGE FORMULAIRE / --- RGPD ------------------------*/
.pied-formulaire .rgpd{
	margin-top:0px;
	/*background-color:red;*/
	font-size:12px;	
	text-align:justify;
	letter-spacing: 1px;
	padding:0px 15px;
}




/*-PAGE FORMULAIRE / --- BOUTON du formulaire --------*/

/*   1ere methode : button (pas active, jai fai la 2eme methode)------*/
form .pied-formulaire button{ 
	margin-top: 50px;/*2 espacer + le bouton des elements au dessus si besoin*/
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 14px; /*Taille du texte*/
	border: none;
	padding: 5px 10px 5px 10px; /*marge intérieure pour pas que les bords soient collés au texte- HAUT / DROITE / DESSOUS / GAUCHE*/
	border-radius: 15px; /*coins arrondis*/
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/	
}
	
form .pied-formulaire button:hover{ 
/*pas besoin de répeter toutes les propriétes du bouto de base, JUSTE METTRE CE QUON VEUT CHANGER OU AJOUTER*/
	/*background-color:#444444; ==> couleur du bouton, je vire car leffet grossissant suffit*/
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05); /*si on veut un effet grossissant au survol. 1.5 c trop, 1.05 suffit*/
}
/*   fin bouton 1ere methode bouton*/

	
	
	
/*   2eme methode : BOUTON-----------(active)-----------------------*/
form .pied-formulaire .bouton{ 
	margin-top: 20px;
	margin-bottom:30px; 
	background-color:#7fc6cd; 
	color: white; 
	font-weight:400;
	height:40px;
	font-size: 16px;
	border: none;
	padding: 5px 10px 5px 10px; 
	border-radius: 15px;
	width:210px;
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */ /*ici surement inutile*/
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/	
	-webkit-transition: -webkit-transform 0.5s;	
	transition: -webkit-transform 0.5s;	
	-o-transition: transform 0.5s;	
	transition: transform 0.5s;	
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
}	
	
form .pied-formulaire .bouton:hover{ 
    /*pour le css hover : pas besoin de répeter toutes les propriétes du bouton de base, JUSTE METTRE CE QUON VEUT CHANGER OU AJOUTER*/
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05); /*si on veut un effet grossissant au survol. 1.5 c trop, 1.05 suffit*/
}	
/*  fin 2eme methode bouton*/

@media screen and (max-width: 600px) { /* F++ bouton grossi pour version mobile*/
	form .pied-formulaire .bouton{
		width:95%;
		font-size:20px;
	}
}


/*-PAGE FORMULAIRE / --- CONTACT QUESTION --------------*/

.contact {
	margin:auto;
	margin-top:50px;
	text-align:center;
	padding: 10px 10px 15px 10px;
	max-width: 500px;
	background-color:#373a41;/*564645;*/
	border-radius:10px;
	color:white;				
}

.contact .question-contact {
text-align:center;
margin-bottom:10px;
}


.contact a {
		/*text-align:center;*/
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 16px; /*Taille du texte*/
	font-weight: 400;
	border: none;
	display: flex;
	width: fit-content;
	align-items: center;
	margin: 0 auto;
	height: 40px;
	padding: 5px 15px; /*marge intérieure pour pas que les bords soient collés au texte- HAUT / DROITE / DESSOUS / GAUCHE*/
	border-radius: 15px; /*coins arrondis*/
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
}

@media screen and (max-width: 600px) { /* F++ bouton grossi pour version mobile ***marche pas*/
	.contact a{
		font-size: 20px;
	}
}


/*-PAGE FORMULAIRE / --- TEMOIGNAGES ------------------*/
.temoignages{
	margin:auto;
	margin-top:50px;
	background-color: white; 
	padding:20px 20px 20px 20px ;
	border-radius: 10px;
	left: 50% ;  
	color: #564645 ;
	margin-bottom: 40px;
}



.temoignages h1{
	text-align:center;	
}

.temoignages .temoignages-bloc{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;        
	-ms-flex-wrap:wrap;        
	    flex-wrap:wrap;
	-webkit-box-pack: space-evenly;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly; /* G++: après le wrap, on espace les avis */
}

.temoignages .groupe-avis{
	margin-top : 30px; 		/*une marge au dessus de chaque GROUPE (la boite des 3 elements), ca les espace entre eux et aussi du trait separateur*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			/* ETAPE 1sur2 ==> EMPILAGE ELEMENTS DU GROUPE : Ca colle les elements du groupe les uns à coté des autres, mais nous on veut les empiler alors on rajoute la ligne ci dessous : */
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column ;
	        flex-direction: column ;/* ETAPE 2sur2 ==> EMPILAGE ELEMENTS DU GROUPE : ca superpose les uns en dessous des autres les 3 elements du groupe alignés à gauche*/
	max-width: 300px; /* G++: on fixe une largeur max, mais on la fixe pas pour autant -> responsive */
	padding-left:10px;
	padding-right:10px;
}

.temoignages .groupe-avis .avatar{
	text-align:center;
}


.temoignages .groupe-avis .redaction{
	text-align: justify;
	font-size:13px;
	margin-bottom:0px;
	word-break: normal; /*type de césure*/
}

.temoignages .groupe-avis .signature{
	text-align:right;
	font-size:13px;
	margin-top:10px;
}
	
 @media screen and (max-width: 600px) { /* F++ titre temoignages moins gros pour mobile*/ 
	.temoignages h1{
		font-size:19px;
	}
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E     A     P R O P O S ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.apropos {
	margin:auto;
	margin-top:50px;
	background-color: white;
	padding:20px 30px 10px 30px ;
	left: 50% ;         			 
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;
}

.apropos h1{
	font-weight:200;
	font-size:60px;
	text-align:center;
	margin-top:10px;
}

.marmite{
	text-align:center;
}

.marmite img{
	width:200px;
	height:62px;
}

.texte-apropos{
	text-align:justify;
	line-height:2em;
	font-weight:300;
}

.texte-apropos .titre{
	text-align:center;
	margin-bottom:10px;
	font-size:25px;
	font-weight:200;
}

.texte-apropos i{
	color:#7fc6cd;
}

.texte-apropos .liste-savoir-faire{
	margin-top:-25px;
	font-size:15px;
	line-height:1.5em;
}

.apropos .separation{
/*stylisation du trait de séparation*/
	width: 100%;
	height: 1px;
	background-color: #7fc6cd ;
	margin-top:35px;
}

.apropos .bouton-container{
	text-align:center;
	margin-bottom:30px;
}

.apropos a { 
	display: inline-block;
	margin-top: 50px;/*2 espacer + le bouton des elements au dessus si besoin*/
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 13px; /*Taille du texte*/
	border: none;
	padding: 15px 20px 15px 20px; /* HAUT / DROITE / DESSOUS / GAUCHE*/
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
	border-radius: 10px;
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E    c g v    ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.cgv {
	margin:auto;
	margin-top:50px;
	background-color: white; 
	padding:20px 30px 10px 30px ;
	left: 50% ;         			
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;
}


.cgv h1{
	font-weight:200;
	font-size:60px;
	text-align:center;
	margin-top:10px;
}

.cgv .titre{
	text-align:center;
	margin-bottom:10px;
	font-size:25px;
	font-weight:200;
	
}
/*Accordeon------------------------------------*/
.accordeon{
	margin-top:50px;
}

/* A compléter avec le JAVASCRIPT dans page CGV.HTML POUR MENU ACCORDEON -AGRANDIR / REDUIRE- */
.accordeon .accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.accordeon button{
	letter-spacing:1px;
}


.accordeon .active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.accordeon .panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  
  text-align:justify;
  font-size:14px;
  color:#5f5d5d;
} 

/*add icons + et -      ----------------------------------------*/
.accordeon .accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 10px; /*taille des + et - */
  color: #797777;/*#777;*/ /*MARCHE PAS - NE CHANGE PAS DU TOUT LA COULEUR DES + Et - */
  float: right;
  margin-left: 5px;
}

.accordeon .active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
/*fin accordeon*/

.date{
	margin-top:10px;
	/*text-align:right; /*marche pas :(  */
	font-size:12px;	
	font-weight:300;
	text-align:justify;
	letter-spacing: 1px;
	line-height:1.2em;
	width:100%;
}
/* fin CGV----*/


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E    Politique de confidentialité    ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.politique {
	margin:auto;
	background-color: white; 
	padding:20px 30px 10px 30px ;
	left: 50% ;   
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;
}

.politique h1{
	font-weight:200;
	font-size:60px;
	text-align:center;
	margin-top:10px;
}
/* G++: responsive */
@media screen and (max-width: 450px) {
	.politique h1{
		font-size:40px;
	}
}

.politique .titre{
	text-align:center;
	margin-top: 20px;
	margin-bottom:20px;
	font-size:25px;
	font-weight:200;
}

.politique .contenu{
	margin-top: 30px;
	text-align:justify;
	font-size:14px;
	color:#5f5d5d;
	margin-bottom:30px;
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E    Mentions légales    ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mentions {
	margin:auto;
	margin-top:50px;
	background-color: white;
	padding:20px 30px 10px 30px ;
	left: 50% ;        
	color: #564645 ;   
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;
}

.mentions h1{
	font-weight:200;
	font-size:60px;
	text-align:center;
	margin-top:10px;
}

.mentions .titre{
	text-align:center;
	margin-top: 20px;
	margin-bottom:20px;
	font-size:25px;
	font-weight:200;
}

.mentions .contenu{
	margin-top: 30px;
	text-align:justify;
	font-size:14px;
	line-height:2em;
	color:#5f5d5d;
	margin-bottom:30px;
}
/*fin MENTIONS LEGALES*/


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E    Récapitulatif    ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.recapitulatif {
	text-align:center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;         
	-ms-flex-wrap:wrap;         
	    flex-wrap:wrap;
	width: 97%; /* G++: on fait une largeur responsive */
	max-width: 1300px;
	margin: 0 auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.recapitulatif h1{
	color:#7fc6cd;
	font-weight:300;
	font-size:35px;
	margin-top:20px;
}


.recapitulatif .recapitulatif-gauche{
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;	
	background-color: white;
	padding:0px 30px 10px 30px ;
	color: #564645 ;  
	border-radius: 10px; 
	width:60%;
}

.recapitulatif .recapitulatif-gauche .contenu .titre{
	text-align:justify;
	margin-top: 30px;
	margin-bottom:15px;
	font-size:25px;
	font-weight:300;
	color:#564645 ; 
}

.recapitulatif .recapitulatif-gauche .contenu{
	text-align:justify;
	font-size:15px;
	line-height:1.5em;
	color:#5f5d5d;
	margin-bottom:30px;
}

.recapitulatif .recapitulatif-gauche .contenu .nom{
	color:#7fc6cd;
	font-weight:400;
	font-size:17px;
}

.recapitulatif .recapitulatif-gauche .contenu .italic{
font-style: italic;
}


/* droite-------*/
.recapitulatif .recapitulatif-droite{
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;	
	margin-left:20px;/*pour l'espacer de son voisin de gauche, passe à la ligne en ode mobile  (responsive cf code css media screen tout en bas*/
	background-color: white;
	padding:0px 30px 20px 30px ;
	border-radius: 10px; 
	width:35%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content; /*je fixe la hauteur du cadre de drote sinon il prend la meme hauteur que son voisin de gauche
					G++: non! fit-content permet de rendre la hauteur adaptative au contenu!
					*/
}

/*droite / panier*/
.recapitulatif .recapitulatif-droite .panier{
	/*text-align:center;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;         
	-ms-flex-wrap:wrap;         
	    flex-wrap:wrap;
	width:100%;	
	line-height:2em;
}

.panier-conteneur {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	width: 100%;
}

.recapitulatif .recapitulatif-droite .panier .panier-gauche{
	text-align:left;
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
	/*float:left;*/
	line-height:2em;
}


.recapitulatif .recapitulatif-droite .panier .panier-droite{
	text-align:right;
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
	margin-left: 5px;
	/*        @GUILLAUME : trouver une meilleure solution pour espace la gauche de la droite, le libellé collé a gauché et prix collé a droite
			G++: ce genre de chose se règle avec les propriétés flex. On met un justify-content: space-between!
	*/
}

.recapitulatif .separation{
/*stylisation du trait de séparation*/
	width: 100%;
	height: 1px;
	background-color: #7fc6cd ;
	margin-top:2px;
}

/*-CASE A COCHER VALIDE RECAP----------*/
.recapitulatif .recapitulatif-droite .panier .valide-recap{
	margin-top:0px;
	font-size:12px;	
	font-weight:300;
	text-align:justify;
	letter-spacing: 1px;
	line-height:1.2em;
	width:100%;
}

.recapitulatif .recapitulatif-droite .panier .bouton-container{
	text-align:center;
	width:100%;
}


.recapitulatif .recapitulatif-droite .panier button{ 
	margin-top: 10px;
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 15px; 
	font-weight:700;
	letter-spacing:1px;
	border: none;
	padding: 5px 20px 5px 20px; 
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
	border-radius: 10px; 
	height:50px;
	width:100%;
}
@media screen and (max-width: 910px) {
	.recapitulatif {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.recapitulatif .recapitulatif-gauche {
		width: 90%;
		margin: 4px auto 0;
	}
	.recapitulatif .recapitulatif-droite {
		width: 90%;
		margin: 30px auto 0;
	}
}
	

	
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--PAGE PAIEMENT----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.paiement {
	text-align:center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;         
	-ms-flex-wrap:wrap;         
	    flex-wrap:wrap;
	width: 97%; /* G++: on fait une largeur responsive */
	max-width: 1300px;
	margin: 0 auto;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}


.paiement h1{
	color:#7fc6cd;
	font-weight:300;
	font-size:35px;
	margin-top:20px;
}


.paiement .paiement-gauche{
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;	
	background-color: white;
	padding:0px 30px 20px 30px ;
	color: #564645 ;  
	border-radius: 10px; 
	width:60%;
	max-width: 600px;
}


.paiement .paiement-gauche .italic{
font-style: italic;
font-size:13px;

}

/*droite / panier*/
.paiement .paiement-gauche .choix{
	/*text-align:center;*/
	width:100%;	
	line-height:2em;
	max-width: 350px;
    margin: 35px auto;
}
.item-choix {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: left;
}



/* droite--------------*/
.paiement .paiement-droite{
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;	
	margin-left:20px;/*pour l'espacer de son voisin de gauche, passe à la ligne en ode mobile  (responsive cf code css media screen tout en bas*/
	background-color: white;
	padding:0px 30px 20px 30px ;
	border-radius: 10px; 
	width:35%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content; /*je fixe la hauteur du cadre de drote sinon il prend la meme hauteur que son voisin de gauche
					G++: non! fit-content permet de rendre la hauteur adaptative au contenu!
					*/
}



/*droite / panier*/
.paiement .paiement-droite .panier{
	/*text-align:center;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;   
	-ms-flex-wrap:wrap;   
	    flex-wrap:wrap;
	width:100%;	
	line-height:2em;
}


.paiement .paiement-droite .panier .panier-gauche{
	text-align:left;
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
	/*float:left;*/
	line-height:2em;
}


.paiement .paiement-droite .panier .panier-droite{
	text-align:right;
	margin-top:4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex; 			
	-webkit-box-orient: vertical; 			
	-webkit-box-direction: normal; 			
	    -ms-flex-direction: column; 			
	        flex-direction: column;
	margin-left: 5px;
	/*        @GUILLAUME : trouver une meilleure solution pour espace la gauche de la droite, le libellé collé a gauché et prix collé a droite
			G++: ce genre de chose se règle avec les propriétés flex. On met un justify-content: space-between!
	*/
}

.paiement .separation{
/*stylisation du trait de séparation*/
	width: 100%;
	height: 1px;
	background-color: #7fc6cd ;
	margin-top:2px;
}

/*---------CASE A COCHER VALIDE CGV----------*/
.paiement .paiement-droite .panier .valide-cgv{
	margin-top:0px;
	font-size:12px;	
	font-weight:300;
	text-align:justify;
	letter-spacing: 1px;
	line-height:1.2em;
	width:100%;
}

.paiement .paiement-droite .panier .bouton-container{
	text-align:center;
	width:100%;
}
.paiement .paiement-droite .panier .bouton-container button {
	border-radius: 4px;
	height: 45px;
}
#paypal-button-container {
	display: none;
	margin-top: 10px;
	height: 45px;
}

.paiement .paiement-droite .panier button{ 
	margin-top: 10px;
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 15px;
	font-weight:700;
	letter-spacing:1px;
	border: none;
	padding: 5px 20px 5px 20px; 
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
	border-radius: 10px; /*15coins arrondis*/
	height:50px;
	width:100%;
}

.logo-cic{
	width:50px;
}

.logo-paypal{
	width:68px;
}


@media screen and (max-width: 910px) {
	.paiement {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.paiement .paiement-gauche {
		width: 90%;
		margin: 4px auto 0;
	}
	.paiement .paiement-droite {
		width: 90%;
		margin: 30px auto 0;
	}
	.logo-cic{
	width:34px;
	}
	
	.logo-paypal{
	width:56px;
	}
	
}




/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--   PAGE "Confirmation de commande "   ----------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.confirmation-commande{
	margin:auto;
	margin-top:50px;
	background-color: white;
	padding:20px 30px 40px 30px ;
	left: 50% ; 
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;	
	font-size:15px;
	line-height:1.5em;
	text-align:center;
}

.confirmation-commande h1{
	font-weight:200;
	font-size:30px;
	text-align:center;
	margin-top:25px;
	margin-bottom:25px;
	
}
.confirmation-commande i{
	margin-top:25px;
	font-size:30px;
	color:#7fc6cd;
}


.confirmation-commande .titre{
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
	font-size:25px;
	font-weight:300;
}

.confirmation-commande button{ 
	margin-top: 25px;
	background-color:#7fc6cd;
	color: white;
	font-size: 13px; 
	border: none;
	padding: 5px 20px 5px 20px; 
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; 
	-webkit-transition: -webkit-transform 0.5s; 
	transition: -webkit-transform 0.5s; 
	-o-transition: transform 0.5s; 
	transition: transform 0.5s; 
	transition: transform 0.5s, -webkit-transform 0.5s;
	border-radius: 10px; 
	height:50px;
}

.confirmation-commande .verif-spam{
	color:#636466;
	font-size:12px;	
	text-align:justify;
	letter-spacing: 1px;
	text-align:center;
}

/* G++: responsive */
@media screen and (max-width: 600px) {
.confirmation-commande button{
		font-size:16px;
		width:97%;
	}
}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------ENVOI.PHP -----------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/


.envoi-form{
	margin:auto;
	margin-top:50px;
	background-color: white;
	padding:20px 30px 40px 30px ;
	left: 50% ; 
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;	
	font-size:15px;
	line-height:1.5em;
	text-align:center;
}

.envoi-form h1{
	font-weight:200;
	font-size:30px;
	text-align:center;
	margin-top:25px;
	margin-bottom:25px;
	
}

.envoi-form i{
	margin-top:25px;
	font-size:30px;
}
.envoi-form .check-mark {
	color:#7fc6cd;
}
.envoi-form .cross-mark {
	color:red;
}


.envoi-form .titre{
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
	font-size:25px;
	font-weight:300;
}

.envoi-form a {
	display: inline-block;
	margin-top: 25px;
	background-color:#7fc6cd;
	color: white;
	font-size: 13px; 
	border: none;
	padding: 15px 20px 15px 20px; 
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; 
	-webkit-transition: -webkit-transform 0.5s; 
	transition: -webkit-transform 0.5s; 
	-o-transition: transform 0.5s; 
	transition: transform 0.5s; 
	transition: transform 0.5s, -webkit-transform 0.5s;
	border-radius: 10px;
}

/* G++: responsive */
@media screen and (max-width: 600px) {
	.envoi-form a{
		font-size:16px;
		width:97%;
	}
}



/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------I B A N  ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.iban{
	margin:auto;
	margin-top:50px;
	background-color: white;
	padding:20px 30px 40px 30px ;
	left: 50% ; 
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;	
	font-size:15px;
	line-height:1.5em;
	text-align:center;
	letter-spacing : 0.05em;
}
.iban p{
	text-align:justify;
}

.iban i{
	color: #70c5cc;
}

.iban h1{
	line-height:1.5em;
}




/*-----------------------------------------------------------------------------------------------------------------------------------*/
/*--- BAT ----------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------*/


.bat {
	margin:auto;
	margin-top: 50px; 
	background-color: white;
	padding:5px 30px 10px 30px;	
	color: #564645 ;  
	border-radius: 10px;
}

.bat h1 {
	color:#70c5cc;
	text-align:center;
}


.bat form .email input{
	margin-top: 3px;
	padding: 5px 5px 5px 5px;
	border: 1px solid #7fc6cd;
	outline-color: #7fc6cd;
	border-radius: 5px;
	color:#777676;
	width: 250px;
}

.bat img{
	width:100%;
	margin: 0 auto;
}


.bat form .pied-formulaire2 {
	text-align:center;
}

 .ptiteslignes{
	margin-top:-10px;
	font-size:12px;	
	text-align:justify;
	letter-spacing: 1px;
	padding:0px;
}

@media screen and (max-width: 668px) {
	
	.bat form .email input{
		width: 100%; /* on passe les champs en largeur 100% */
		height:40px;
	}

	.bat h1{
	font-size: 30px;
	font-weight:300; 
	}
}

	






/*-PAGE FORMULAIRE / --- BOUTON du formulaire --------*/

/*   1ere methode : button (pas active, jai fai la 2eme methode)------*/
form .pied-formulaire2 button{ 
	margin-top: 50px;/*2 espacer + le bouton des elements au dessus si besoin*/
	background-color:#7fc6cd; /*couleur du bouton*/
	color: white; /*couleur du texte*/
	font-size: 14px; /*Taille du texte*/
	border: none;
	padding: 5px 10px 5px 10px; /*marge intérieure pour pas que les bords soient collés au texte- HAUT / DROITE / DESSOUS / GAUCHE*/
	border-radius: 15px; /*coins arrondis*/
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	-o-transition: transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/	
}
	
form .pied-formulaire2 button:hover{ 
/*pas besoin de répeter toutes les propriétes du bouto de base, JUSTE METTRE CE QUON VEUT CHANGER OU AJOUTER*/
	/*background-color:#444444; ==> couleur du bouton, je vire car leffet grossissant suffit*/
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05); /*si on veut un effet grossissant au survol. 1.5 c trop, 1.05 suffit*/
}
/*   fin bouton 1ere methode bouton*/

	
	
	
/*   2eme methode : BOUTON-----------(active)-----------------------*/
form .pied-formulaire2 .bouton{ 
	margin-top: 20px;
	margin-bottom:30px; 
	background-color:#7fc6cd; 
	color: white; 
	font-weight:400;
	height:40px;
	font-size: 16px;
	border: none;
	padding: 5px 10px 5px 10px; 
	border-radius: 15px;
	width:210px;
	outline-color: none;/* AUCUNE couleur bordure au clic - marche sur chrome mais pas firefox */ /*ici surement inutile*/
	cursor:pointer; /*transforme le curseur en une main pour indiquer que c un lien*/	
	-webkit-transition: -webkit-transform 0.5s;	
	transition: -webkit-transform 0.5s;	
	-o-transition: transform 0.5s;	
	transition: transform 0.5s;	
	transition: transform 0.5s, -webkit-transform 0.5s; /* zoom fluide qui correspond à la transition de 0.5 secondes quon veut appliquer sur notre grossissement de bouton sur le HOVER (cf transform sur le hover scale 1.05*/
}	
	
form .pied-formulaire2 .bouton:hover{ 
    /*pour le css hover : pas besoin de répeter toutes les propriétes du bouton de base, JUSTE METTRE CE QUON VEUT CHANGER OU AJOUTER*/
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05); /*si on veut un effet grossissant au survol. 1.5 c trop, 1.05 suffit*/
}	
/*  fin 2eme methode bouton*/

@media screen and (max-width: 600px) { /* F++ bouton grossi pour version mobile*/
	form .pied-formulaire2 .bouton{
		width:95%;
		font-size:20px;
	}
}



/*FIN BAT--------------------------*/

/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------F O O T E R ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

footer {
	margin: auto;
	width:100%;
	background-color:#373a41; /*564645*/
	color:white;
	font-size:13px;
	font-weight:300;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center; /* G++:on centre le tout */
	display: block;
	padding: 40px 20px;
}

footer img{ /*logos reseaux sociaux*/
	width:25px;
	height:25px;
}

footer a {
	color: white ;
	outline: none;
	text-decoration: none;
	font-weight:300;
}
.logos-reseaux {
	margin-right: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
}
.logos-reseaux a {
	margin: 0 5px;
}

footer a:hover {
	color: #7fc6cd; 
}
.footer-conteneur {
	width: 100%;
	margin: 0 auto;
}
.items-footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.footer-links {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	line-height: 1.8;
}
.footer-links a {
	margin: 0 15px;
	padding: 2px 5px;
}
footer .final{
	text-align:center;
	margin: 25px 0 0 0;
}
@media screen and (max-width: 650px) {
	.footer-links {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: start;
	}
}
@media screen and (max-width: 360px) {
	.items-footer {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.logos-reseaux {
		margin: 0 0 10px 0;
	}
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- P A G E    Offres en cours    ----------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.offres {
	margin:auto;
	background-color: white; 
	padding:20px 30px 10px 30px ;
	left: 50% ;   
	color: #564645 ;  
	border-radius: 10px; 
	width:90%;
	max-width: 1100px;
}

.offres h1{
	font-weight:200;
	font-size:60px;
	text-align:center;
	margin-top:10px;
}
/* G++: responsive */
@media screen and (max-width: 450px) {
	.offres h1{
		font-size:40px;
	}
}

.offres .titre{
	text-align:center;
	margin-top: 20px;
	margin-bottom:20px;
	font-size:25px;
	font-weight:200;
}

.offres .contenu{
	margin-top: 30px;
	text-align:justify;
	font-size:14px;
	color:#5f5d5d;
	margin-bottom:30px;
}