/*
Theme Name: JG-HEADER-CSS
Theme URI: https://capitainewp.io
Author: Joël GASPAR
Author URI: https://dysign.fr
Description: Mon premier thème !
Requires at least: WordPress 5.0
Version: 1.0
*/



/* ******************************************************************************* */
/* ************************* HEADER ************************************ */
/* ******************************************************************************* */


/************************** HOW TO *************************************************/
/*	Si modification de la hauteur de l'entete:
	Les positions sont en absolute pour pouvoir faire passer le logo sur la vidéo avec propriété z-index
	qui ne fonctionne qu'en position absolute
	Modifier jg-big-header.top, jg-home-accroche.top, jg-home-video-r.top
	Cote js: mettre à jour la fonction sizeHome1()
																				   */
/***********************************************************************************/

/* Zero séparation: Row sans padding - Small box Authorized */ /* Used for HEADERS */
div.jg-r0				{ margin:0px; padding:0px; display:flex; flex-direction: row; flex-wrap: wrap; }
div.jg-r0 div.jg-1		{ margin:0px; flex:1 0px; } 
div.jg-r0 div.jg-2		{ margin:0px; flex:2 0px; /*border:RED 1px SOLID;*/ } 
div.jg-r0 div.jg-3		{ margin:0px; flex:3 0px; } 
div.jg-r0 div.jg-4		{ margin:0px; flex:4 0px; } 
div.jg-r0 div.jg-5		{ margin:0px; flex:5 0px; /*border:RED 1px SOLID;*/  } 
div.jg-r0 div.jg-10		{ margin:0px; flex:10 0px; } 
div.jg-r0 div.jg-15		{ margin:0px; flex:15 0px; } 


/* ********************************* BIG HEADER **********************************/

.jg-header-lineup		{ position: absolute; top:0%; z-index: 4;  width:100%; }

div.jg-big-header		{ position: absolute; top:26px; z-index: 4; width:100%; }

.jg-bh-logo				{ display:flex; justify-content: flex-end; } 
.jg-bh-bg-img			{ height:200px; padding:10px; background-color:rgba(255,255,255,1); } 
.jg-bh-links			{ font-size:14px; line-height:25px; padding:10px; }												
.jg-bh-liens-langue		{ font-size:11px; line-height:25px; padding:10px; text-align:right; /*background-color:rgba(255,255,255,1);*/ }
.jg-bh-liens-langue-pad 	{ padding:0px 5px; }


/*MENTION LEGALES */
div.jg-big-header-ml		{ position: absolute; top:26px; z-index: 4; width:100%; background-color:rgba(255,255,255,1); }
.jg-site-title			{ font-size:16px; line-height:16px; padding: 5px 0px; text-align: center; color:rgb(207,128,45); }
.jg-ml-group			{ margin-bottom:50px; background-color:rgba(255,255,255,1); }

/* ********************************* SMALL HEADER **********************************/
.jg-nav-small			{ position: fixed; width: 100%; z-index: 4; }
.jg-hide-small-header 	{ margin-top: -200px; transition: all 0.3s; }
.jg-show-small-header 	{ margin-top: 0px; transition: all 0.3s; }

.jg-sh-bg 				{ height: 42px; border-bottom: 1px SOLID rgba(207,128,45,1); background: WHITE; }
.jg-sh-logo				{ width:95px; height:auto; padding:5px; margin-left:45px; background: WHITE; transition:all .3s; }

.jg-sh-liens-menu		{ padding:13px 10px;  font-size:14px; line-height:16px; text-align:center; transition:all .3s; }
.jg-sh-liens-langue		{ text-align:right;  font-size:11px; line-height:16px; }
.jg-sh-liens-langue-pad 	{ padding:0px 5px; }

.jg-sh-border			{ border-left:1px rgb(207,128,45) SOLID; }



/* ********************************* ECRAN TACTILES **********************************/
@media only screen and (max-width:800px) and (pointer: coarse)   { 
	.jg-liens-langue-ecran-tactile 	{ display:none; }  
}

@media (pointer: coarse) { 
	.jg-bh-liens-langue-pad 	{ padding:0px 20px; }
	.jg-sh-liens-langue-pad 	{ padding:0px 20px; }
}

/* ********************************* PROGRESS BAR **********************************/
.jg-progress-small		{ height:3px; margin-bottom: 0px; border-radius: 0px; padding-left: 0px; padding-right: 0px; box-shadow: 1px 1px 3px rgba(0,0,0,0.5); 
						background-image: linear-gradient(rgb(238,234,232) 0px, rgb(238,234,232) 100%); transition: all 0.7s; }


/*****************************************
	Taille écran bureau 			1600 
	Taille écran portable			1350
	Taille écran tablette			950
	Taille écran TEL XXL retourné	810
	Taille écran TEL XL retourné	725
	Taille écran TEL M retourné		560
	Taille écran Tel XL				375
	Taille écran TEL M				300
/*****************************************/



/* Taille écran bureau 1600 */
@media only screen and (max-width:1600px)  {
	.jg-bh-bg-img			{ height:200px; } 
}



/* Taille écran portable */
@media only screen and (max-width:1350px)  {
	.jg-bh-bg-img			{ height:160px; } 
}


/* Taille écran portable */
@media only screen and (max-width:1100px)  {	

}

/* Taille écran Tablette XL */
@media only screen and (max-width:950px)  {
	.jg-bh-bg-img			{ padding:8px; height:125px; } 	
	.jg-bh-links			{ padding-right:0px; padding-left:5px; }
}

/* Taille écran Tablette L */
@media only screen and (max-width:835px)  {
	.jg-sh-liens-menu 		{ padding-left:0px; font-size: 13px; }
	.jg-sh-liens-langue 		{ font-size:11px; }
	.jg-bh-links			{ font-size:13px; }
	.jg-bh-liens-langue		{ font-size:11px; }
}

/* Taille écran Tablette L */
@media only screen and (max-width:810px)  {
	.jg-bh-bg-img 			{ padding:5px; height:90px; }
}


/* Taille écran Tablette M */
@media only screen and (max-width:728px)  {

	.jg-bh-bg-img			{ height:80px; padding:5px; } 	
	.jg-bh-liens-langue-pad 	{ padding:0px 2px; }

	.jg-sh-liens-menu 		{ font-size: 11px; padding-top:5px; padding-bottom:5px; }
	.jg-sh-bg 				{ height: 26px; }
	.jg-sh-logo 				{ width: 75px; }

}

/* Taille écran Téléphone XL - IPhone X*/ /* Tel retourner: width = 600px */ 
@media only screen and (max-width:600px)  {
	div.jg-big-header 		{ top: 22px; }

	.jg-bh-bg-img			{ height:70px; } 	
	.jg-bh-links 			{ font-size:11px; line-height: 12px; padding-bottom:11px;}
	/* .jg-bh-liens-langue		{ font-size:9px; line-height: 12px; padding-bottom:11px; } */
	.jg-bh-liens-langue		{ display:none; }

	/* Small Header out sur smartphone*/
	.jg-show-small-header	{ display:none; } 
	
	.jg-sh-logo { width:0px; padding:0px; }
	.jg-sh-liens-menu {  padding:0px; font-size:0px; line-height:0px; }
	.jg-sh-liens-langue { font-size:0px; line-height:0px; }
	.jg-sh-bg { height:0px; border-bottom:0px SOLID rgba(207,128,45,1); }
	
}

@media only screen and (max-width:555px)  {
	.jg-bh-links 			{ font-size:10px; }
	.jg-bh-liens-langue		{ font-size:8px; }
}


/* Taille écran Téléphone M - IPhone 5 */
@media only screen and (max-width:430px)  {
	div.jg-big-header 		{ top: 20px; background-color: rgba(253,248,244,1); }
	.jg-header-lineup		{ height:20px; }
	
	.jg-bh-bg-img			{ height:80px; background-color:unset; padding: 3px; height:87px; } 	
	
	.jg-bh-links 			{ font-size:12px; line-height:16px; padding:16px 0px; text-align:center; border-left:1px SOLID white; border-bottom:1px SOLID white;}
	.jg-bh-links-mobile		{ border-left:1px SOLID white; }

	div.jg-r0				{ margin:0px; padding:0px; display:flex; flex-direction: row; flex-wrap: wrap; }
	div.jg-r0 div.jg-3		{ margin:0px; flex:3  90px; } 
	div.jg-r0 div.jg-5		{ margin:0px; flex:5  100px; } 
	div.jg-r0 div.jg-15		{ margin:0px; flex:15 100px; } 


}