align/* ---------   Responsiveness ------------------ */
.responsive {
  width: 50%;
   height: auto;
}

.responsive100 {
  width: 100%;
 height: auto;
}


.responsive35 {
  width: 35%;
 height: auto;
}

.responsive80 {
  width: 80%;
 height: auto;
}

.responsive65 {
  width: 65%;
 height: auto;
}

.responsive85 {
  width: 85%;
 height: auto;
}

.responsive20 {
  width: 20%;
 height: auto;
}

.responsive15 {
  width: 15%;
 height: auto;
}

/* --------- FIN  Responsiveness ------------------ */



/* +++++++++++++++  header position relative  +++++++++++ */
.containerimg {
  position: relative;
}	
/* --------- FIN  header position relative  ------------------ */



/* +++++++++++++++  Fontes et tailles +++++++++++ */


.ptitre1 {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
}	


/*
.p3 {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}	
*/
 	
/* --------- FIN  Fontes et tailles  ------------------ */




/* --------- couleurs de FOND ------------------ */


	
/* couleur fond  bloc blanc- --- */
.fond_bloc_blanc  {
    background-color: white;  
}	

/* couleur fond  bloc contraste --- */
.fond_bloc_contraste  {
    background-color: #f2c4a4;  
}	

/* --------- FIN  couleurs de FOND ------------------ */




/* --------- Positionnement  ------------------ */


	

.alignedroite {
text-align: end;
}

.blcentre {
 text-align: center;
}
	

div.sinecentre {
  text-align: center;
}



.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}




/*Insert after each row element: */	
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* --------- Liens ------------------ */

a:link {
 color: #AA6C41;
}

a:visited {
 color: #AA6C41;
}

a:hover {
   color: #AA6C41;
}

a:active {
  color: #AA6C41;
}


/* --------- Fin Liens ------------------ */



/*  ---------- MEDIA QUERIES  ----------  */




/*  ---------- Ne pas afficher  SUR  GRAND ecran () >= 1291 px )----------  */
@media only screen and (min-width: 1291px)  {

	div.nonesurPC {
    	display: none;
  	}
 }
/* ---- FIN Ne pas afficher  SUR  GRAND ecran () >= 1291 px )----------- */



/*  ---------- Ne pas afficher  SUR  GRAND ecran () >= 1291 px )----------  */
@media only screen and (max-width< 1290px)  {

	div.nonesurtabettel {
    	display: none;
  	}
 }
/* ---- FIN Ne pas afficher  SUR  GRAND ecran () >= 1291 px )----------- */


/* ----Pour NE PAS  afficher sur PETIT  ecran  < ou = 1290 px----------- */
@media only screen and (max-width: 1290px)  {
	div.nonesurTELetTAB{
    	display: none;
  	}	
}
/* ----FIN Pour NE PAS  afficher sur PETIT  ecran  < ou = 1290 px----------- */


/* ----  texte pour ecran */


/* 	
@media screen and (min-width: 701px) and (max-width: 1600px) { 
	
		.ptextetemoyen {
 		font-family: Verdana, Arial, Helvetica, sans-serif;	
		text-align: justify;
		text-justify: inter-word;
		font-size: 12px;
		line-height: 1.6;	
	}
}
*/

@media only screen and (min-width: 701px){
	
	.ptextetegd {
 		font-family: Verdana, Arial, Helvetica, sans-serif;	
		text-align: justify;
		text-justify: inter-word;
		font-size: 15px;
		line-height: 1.6;	
	}	
	
} 





/* ----Classes applicables pour ecran >= 701 px---------- */

@media only screen and (min-width: 701px){

	div.nonesurgdecran {
		display: none;
	}	
	
	.responsivegd100 {
		width: 100%;
		height: auto;
	}	
	
		.responsivegd80 {
		width: 80%;
		height: auto;
	}
	
		.responsivegd50 {
		width: 50%;
		height: auto;
	}
	
			.responsivegd40 {
		width: 40%;
		height: auto;
	}
	
	.responsivegd30 {
		width: 30%;
		height: auto;
	}
	
	.responsivegd20 {
		width: 20%;
		height: auto;
	}	
	
	
	.sinepaddinggd  	{
		padding-top: 30px;
		padding-right: 30px;
  		padding-bottom: 30px;
  		padding-left: 30px;
	}	

	.top-leftimggd {
  	position: absolute;
  	top: 23px;
  	left: 50px;
	}
	

 	.top-leftimggd2 {
		position: absolute;
  		top: 80px;
  		left: 50px;
	}		

}
/* ----FIN Classes applicables pour ecran >= 701 px----------- */
 



/* ----Classes applicables pour ecran <= 700 px---------- */
@media only screen and (max-width: 700px) {
	
	/*= pas affiché sur tel et tablette      ------ */
 	div.nonesurpetitecran {
    	display: none;
  	}

	
	.top-leftimgtel {
		position: absolute;
		top: 8px;
  		left: 15px;
	}

	.top-leftimgtel2 {
		position: absolute;
		top: 50px;
		left: 15px;
	}	
	
 	.ptextetetel {
 		font-family: Verdana, Arial, Helvetica, sans-serif;	
		text-align: left;
		text-justify: inter-word;
		font-size: 17px;
		line-height: 1.6;	
	}
	
	
	 	.ptexteteteloeuvres {
 		font-family: Verdana, Arial, Helvetica, sans-serif;	
		text-align: left;
		font-size: 17px;
		line-height: 1.6;	
	}
	
 
	
	
	
	/* couleur fond  bloc blanc dans inner sur petitecran - --- */
	.fond_bloc_blanc-inner_petit  {
    	background-color: white;  
	}	
		
	.sinepaddingpetit {
		padding-right: 10px;
		padding-left: 10px;
	}	
	
	.sinepaddingtel 	{
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
	}	
	
	.sinepaddingimg {
		padding-left: 5px;
	}	
		
		.responsivetel50 {
  width: 50%;
   height: auto;
}
	
		.responsivetel30 {
  width: 30%;
   height: auto;
}

	.responsivetel70 {
  width: 70%;
   height: auto;
}
	

}
/*  ---------- FIN pour  TEL    max-width: 600px  ----------  */	
 


	
/*  ---------- largeurs colonnes sur telephone  <= 700 px---------- */
[class*="col-"] {	
  width: 100%;

	/* fait flotter contre le bord de l'élément précédent ; pas de passage à la ligne */
    float: left;
    
	/* écart entre les colonnes    */  
      padding: 0px;

}  
/*  ---------- FIN largeurs colonnes sur telephone  ---------- */



/*  ---------- largeurs colonnes sur TAB  entre  701x  et  1290 px ---------- */
@media only screen and (min-width: 701px)  {
  /* sur tablettes */
  .col-s-1 {width: 8.33%;}
  .col-s-1petit {width: 4%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-55 {width: 45.83%;}
  .col-s-555 {width: 48%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
	.col-s-111 {width: 92%;}
  .col-s-12 {width: 100%;}
}




/*  ---------- largeurs colonnes sur Gd ecran min-width: 1291px---------- */
@media only screen and (min-width: 1291px) {
  /* sur PC */
  .col-1 {width: 8.33%;}
  .col-1petit {width: 4%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
.col-55 {width: 45.83%;}
.col-555 {width: 48%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
.col-111 {width: 92%;}
  .col-12 {width: 100%;}
	
}




/* menu--------------------------------------------- */


div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}    


nav 
{
    width: 100%;
    height: 50px;
    background: #EC9455;
}
 
nav .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
/* ligne avec lien  */
nav .main_pages a 
{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: black;
	font-size: 17px;
}
 
nav a:hover 
{
    background: linen;
}


label, #toggle
{
    display: none;
}
 
/* menu-  sur ecran <=700 -------------------------------------------- */

@media all and (max-width: 700px) {
    
	nav {
		/* hauteur verticale du bandeau  meunu */
        height: 50px;
		/* largeur de la zone d'affichage hamburger menu */	
		width: 100%;
    }
 
	nav .main_pages  {
        display: none;
        flex-direction: column;
        background: #EC9455;
		/* hauteur  de la zone où sont affiches les differents elements du menu */
        height: 120px;
		 font-size: 17px;
		/* largeur menu vertical tel */
 		width: 100%;
	 	justify-content: space-between;
    }
 
    nav .main_pages a {
	/* largeur des textes des menus dans la boite main page x %  de la largeur main-page */
        width: 100%;
		color: black;
    }
 
    /* menu hamburger*/
	label {
       /*  width: 30px;*/
        display: flex;
        font-size: 20px;
        color: white;
        cursor: pointer;
		/* width: 80%;*/
    }
	
	 #toggle:checked + .main_pages {
        display: inherit;
		position: absolute;
		z-index: 1000;
    }
	

	
/* -------------------- fin  menu--------------------------------------------- */	
}
/* -------------------- fin  menu--------------------------------------------- */




/*Modal*/
	
/*https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html	*/
.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;

}
.image2 {
  position: absolute;
  top: 18px;
  right: 16px;

}


/* -------------------- non utilisé------------------------------------------ */
/* our positionnement logo ? 
.bottom-rightimg {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
*/


/*
.fondgrisviolet {	
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(234,205,235,1) 22%, rgba(213,221,226,1) 100%);
	}
	
.fondinvgrisviolet {	
background: linear-gradient(90deg, rgba(213,221,226,1) 0%, rgba(234,205,235,1) 79%, rgba(0,0,0,1) 100%);
	}
*/

/*
	 	
	.fondfonceclair {	
		background: linear-gradient(90deg, rgba(129,56,4,1) 0%, rgba(214,144,94,1) 14%, rgba(242,200,164,1) 100%);
	}
	
	
	.fondclairfonce {	
		background: linear-gradient(90deg, rgba(242,200,164,1) 0%, rgba(214,144,94,1) 86%, rgba(129,56,4,1) 100%);
	}		
*/

	
	
/*
	.sine-container {
  	display: table;
  	width: 100%;
	}
	
*/
	
/*
	.sinecol {
		display: table-cell;
		padding: 0x;
		}
*/

/*
	.sineflexcol-container {
		display: flex;
		width: 100%;
	}
*/

/*
	.sineflecol {
		padding: 0x;
	}
  
*/