/*
* 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: #000000;
	
}
* {
	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: #ffffff ;
}

/*------------------------- <h1> -----------------------------------------------------------------------------------------------------------------*/
h1{
	font-size: 25px;
	font-weight:700; 
	margin-bottom:10px;
	color: #ffffff ;
	text-align:center;
}

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

.cadre-bleu{
	background-color:#83c6ce;
	width: 100%;
	text-align: center;
	height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cadre-bleu img {
	max-width:500px;
    width: 100%;
}

@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*/
	.cadre-bleu{
		width:100%;
		/*max-width:580px;*/
		margin-left: auto;
		margin-right: auto;
	}
}

/*WEDNESDAY . PHP -------------------------------------*/
.wednesday-conteneur {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
}
.wednesday-conteneur .gauche {
    width: 100%;
    margin-top: 30px;
}
@media screen and (max-width: 1000px) {
    .wednesday-conteneur .gauche {
        width: 110%;
        margin-left: -5%;
    }
}
@media screen and (max-width: 500px) {
    .wednesday-conteneur .gauche {
        width: 113%;
        margin-left: -7%;
    }
}
.wednesday-conteneur .droite {
    /*max-width: 400px;*/
    width: 100%;
    margin-left: 30px;
}
.format {
    display: flex;
}
.format input {
    display: none;
}
.format label {
    padding: 5px 10px;
    border: #bbbabb 2px solid;
    color: #bbbabb;
    cursor: pointer;
    transition: all;
    transition-duration: 150ms;
}
.file_label {
    color: white;
    border: #bbbabb 1px solid;
    border-radius: 15px;
    padding: 5px 15px;
    display: block;
    width: fit-content;
    cursor: pointer;
}
#file_wednesday {
    display: none;
}

@media screen and (max-width: 1000px) {
    .wednesday-conteneur {
        flex-direction: column;
    }
    .wednesday-conteneur .droite {
        margin-left: 0;
    }
}


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

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

	.wednesday-logo img {
		width:200px ;/*300px250px; /* vrai 335*/ /* G++: ton image initiale est juste trop grande, tu as mis toi même les dimensions réelles qui sont + grandes */
		height:158px   ;/*237px198px;/* 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 */
	.wednesday-logo img {
		width:200px;/*180px;/*166px;*/
		height:158px;/*142px;/*131px;*/
		margin-top:25px;  
		margin-bottom:-25px;
	}
}
@media screen and (max-width: 450px) {/*F++ : réduction taille bb logo sur mobile*/   /*R E S P O N S I V E */
	.wednesday-logo img {
		width:150px;/*180px;/*166px;*/
		height:118px;/*142px;/*131px;*/
		margin-top:50px;  
		margin-bottom:-25px;
	}
}


/*-------------------------------------------------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   W E D N E S D A Y . PHP -----------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Largeur définie pour toute la page, responsive */
.main-conteneur {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
#main-wednesday-conteneur {
    max-width: 1500px;
}
/*---- TITRE SVG--------------------*/
.titre-monposterwednesday {
	margin-top:50px;
	text-align:center;
	padding-bottom:30px;
}
.titre-monposterwednesday 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 */
	.titre-monposterwednesday img {
		margin-bottom:-25px;
	}
}

h2{
	/*width:90%; /*marge du texte de lintro pour version mobile, ptet ajouter un maxwidth*/
	padding-top:0px;
	font-weight: 300;
	text-align: center;
	font-size:18px;
	line-height:2em;
	color:#fcfcfc;
}

/*- WEDNESDAY / --- paragraphe INTRO--------------*/
.intro {
	/*width:90%; /*marge du texte de lintro pour version mobile, ptet ajouter un maxwidth*/
	padding-top:0px;
	font-weight: 300;
	text-align: center;
	font-size:18px;
	line-height:2em;
	color:#d2d2d2;
	/*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 {
		width:90%;
		line-height:1.5em;
		margin-left: auto;
		margin-right: auto;
	}
	.intro  .intro-title-1 {
		margin-top: 15px;
		display: block;
	}
	.intro  .intro-title-2 {
		margin: 0;
		display: block;
	}
}


/*-WEDNESDAY / --- Cadre slider + texte sur 2 colonnes --*/


.cadre-general {
	/*display: -webkit-box;
	display: -ms-flexbox;
	display: flex;        
	-ms-flex-wrap:wrap;        
	    flex-wrap:wrap;   
	margin-bottom: 0px;  */
}

/*--- cadre Gauche--*/
.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;*/
}

/*--- cadre  Droite--*/
.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;*/
	
}

.droite i{
	font-size:0.75em;
	color:#83c6ce;
}

.titre-w {
	font-weight: 600;
	text-align: left;
	font-size:17px;
	color:#525252;
	margin-bottom:10px;
	margin-top:10px;
}

.droite .texte{
	font-weight: 400;
	text-align: left;
	font-size:15px;
	color:#bbbabb;
}

.droite .texte-descriptif{
	font-weight: 400;
	text-align: justify;
	font-size:15px;
	color:#bbbabb;
	line-height:2em;
}

.droite .texte-descriptif img{
	width:15px;
	height:11px;
}


.droite .prix{
	font-weight: 700;
	text-align: justify;
	font-size:21px;
	color:#83c6ce;
}

.raye{
	font-weight: 300;
	color: #bbbabb ;
	text-decoration: line-through;
	font-size:17px;
}


form  .choix-punchline{
	line-height:170%; /*interlignage entre les lignes boutons radio*/
}
.choix-punchline .unset-height-textarea {
    height: unset;
}

.ptites-lignes{
	color:#bbbabb;
	margin-top:0px;
	/*background-color:red;*/
	font-size:12px;	
	text-align:justify;
	letter-spacing: 1px;
	padding:0px 15px;
}

.legende-image{
	color:#bbbabb;
	margin-top:0px;
	/*background-color:red;*/
	font-size:12px;	
	text-align:justify;
	letter-spacing: 1px;
	/*padding:0px 15px;*/
}


form textarea {
	margin-top: 3px; 
	margin-bottom:0px;
	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 textarea::placeholder  { /*style du texte placeholdder (texte par defaut dans le textarea AVANT SAISIE*/
  color: #ffffff;
  font-size: 15px; /*1.5em;*/
  text-align:justify;
  opacity: 0.8;
}
	
	
form .pied {
	text-align:center;
}
	
	
form .pied .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 .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*/




/*Accordeon------------------------------------*/
.accordeon{
	margin-top:20px;
}

/* A compléter avec le JAVASCRIPT dans page CGV.HTML POUR MENU ACCORDEON -AGRANDIR / REDUIRE- */
.accordeon .accordion {
  background-color: #1e1e1e;
  border:1px solid;
  border-color:#000000;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size:16px;
  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: #1e1e1e;
}

/* Style the accordion panel. Note: hidden by default */
.accordeon .panel {
  padding: 0 18px;
  background-color: #000000;
  display: none;
  overflow: hidden;
  font-weight:400;
  text-align:justify;
  font-size:15px;
  color:#bbbabb;
} 

/*add icons + et -      ----------------------------------------*/
.accordeon .accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 10px; /*taille des + et - */
  color: #1e1e1e;/*#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--------------------*/





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

.droite .texte{
	line-height:1.75em;
	}
}




/* G++: responsive */
@media screen and (max-width: 840px) {
	.cadre-general {
		-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;
	}
	.droite {
		margin: 0;
		margin-top:-10px;
	}
	
	.accordeon .panel {
		line-height:1.75em;
	}
		
}


/*------ SCHEMA PHOTO ETAPES---*/

.schema{
	margin:auto;
	text-align: center;
	margin-top: 50px; 
	background-color: #000000;

}


.schema img{
	width:100%;
	margin: 0 auto;
	max-width:800px;
}


/*------ PHOTO NON CONSEILLEE---*/

.conseil-photo{
	margin:auto;
	text-align: center;
	margin-top: 50px; 
	background-color: #000000;
}


.conseil-photo img{
	width:100%;
	margin: 0 auto;
	max-width:600px;
	height: auto;
}




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


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

.contact {
	margin:auto;
	margin-top:50px;
	text-align:center;
	padding: 10px 10px 15px 10px;
	max-width: 500px;
	background-color:#1e1e1e;
	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;
	}
}


/*-W E D N E S D A Y  --- TEMOIGNAGES ------------------*/
.temoignages{
	margin:auto;
	margin-top:50px;
	background-color: #3b3b3b; 
	padding:20px 20px 20px 20px ;
	border-radius: 10px;
	left: 50% ;  
	color: #c4c4c4 ;
	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;
}

.temoignages .stars {
    margin: 0 auto 10px;
}
.temoignages .stars i{
	text-align:center;
    font-size: 9px;
}
	
 @media screen and (max-width: 600px) { /* F++ titre temoignages moins gros pour mobile*/ 
	.temoignages h2{
		font-size:19px;
		
	}
	.temoignages .redaction{
		line-height:1.75em;
		font-size:15px;
	}
	
		.temoignages .signature{
		line-height:1.75em;
		font-size:15px;
	}
}



/*---PICTO PANIER---------------*/
.picto-panier {
	text-align:right;
	color:white;
	font-size: 16px;
    position: absolute;
    top: 55px;
    right: 40px;
    display: flex;
    align-items: center;
}
.picto-panier img{
	width:50px;
	height:30px;
}
@media screen and (max-width: 500px) {
    .picto-panier {
        top: 45px;
        right: 20px;
    }
}



/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------- 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:50%;
}

.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:45%;
	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;
    margin-left: 25px;
    display: flex;
}
.recapitulatif .recap-containeur {
    display: flex;
    align-items: center;
}
@media screen and (max-width: 1150px) {
    .recapitulatif .recap-containeur {
        flex-direction: column;
        align-items: start;
    }
    .recapitulatif .recapitulatif-droite .panier .valide-recap {
        margin-left: 0;
    }
    .mt-5 {
        margin-top: 15px;
    }
}

.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;
	}
}
	
.photojointe img {
	max-height:150px; /*hauteur max 127px et respecter taille homothétiquement si format portrait ou paysage*/
    max-width: 200px;
}

.cerclerouge{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color:#ff0623;
    margin-left: 10px;
    margin-top: 2px;
}
.cerclevert{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color:#1de283;
    margin-left: 10px;
    margin-top: 2px;
}

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


.formulaire-paiement {
	text-align:left;
	margin:auto;
	margin-top: 50px; 
	background-color: white;
	padding:5px 10px 10px;																								
	left: 50% ;         			
	color: #564645 ;  
	border-radius: 10px;
}

.formulaire-paiement input[type="text"],
.formulaire-paiement input[type="email"]{
	margin-top: 3px;
	padding: 5px 5px 5px 5px; /*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;
}
@media screen and (max-width: 580px) {
    .formulaire-paiement {
        padding:5px 0 10px;
    }
    .formulaire-paiement input[type="text"],
    .formulaire-paiement input[type="email"] {
        width: 100%;
    }
}
#livraison-facturation {
    margin-top: 5px;
    display: block;
}

.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-labels label {
    display: block;
    line-height: 34px;
    white-space: nowrap;
    margin-right: 20px;
}


.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: #bbbabb ;  
	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;
	color:#bbbabb;
	
}
.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%;
	}
}

.confirmation-commande .marmite{
	text-align:center;
}

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


/*--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------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;
	color:#313135;
	
}

.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:#bbbabb;   
	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{
	font-weight:200;
	font-size:30px;
	text-align:center;
	margin-top:-50px;
	margin-bottom:25px;
	color:#bbbabb;
	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:#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;
	}
}