/***Jac23RW introduit ce CSS Reset  => 

  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
  
  => These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect. So it isn't as necessary anymore.

I also don't believe it's necessary to strip away all of the browser defaults. I probably do want <em> tags to set font-style: italic, for example! I can always make different design decisions in the individual project styles, but I see no point in stripping away common-sense defaults.
  
*/

*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/***Jac23RW le block dans images gène 
img, 
***/

picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
#root, #__next {
  isolation: isolate;
}





/***Jac23RW => styleRW derivé de style22 mais faut ajouter menu en noir et typo blanche


indexVideo7c => pour réduire CENTEREDMENU vers les 75px du logo *****/




body {
	
/*****JAC22 ajoute Monserrat de Google (voir Link dans page html) les  => font: 1em/150% Arial, Helvetica, sans-serif; *

****/
	
	font: 1em/150% Montserrat, Arial, Helvetica, sans-serif;
	
	
/***JAC23RW  (noir #000000; blanc #FFFFFF;) => Rose RW: #ca929c     *****/
	background: #ffffff;
	color: #000000;
	
/*****JACVIDEO pour avoir même taille que MyVideo *****/	
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
}	

a {
	text-decoration: none;
	color: black;
}
a:hover {
	text-decoration: none;
}
/*****JAC22 ajoute Monserrat de Google (voir Link dans page html)  font: 60px/100% Montserrat, Arial, Helvetica, sans-serif; les  => font: bold 36px/100% Arial, Helvetica, sans-serif; 
 et aussi text-align:justify;
 font-weight:bold;
 margin: 20% auto;
 DDERNIER pour 7D est +>
 font: 60px/100% Montserrat, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 54%;
	margin: 18% auto;
	color: #FFFFFF;
*****/

h1 { /*****JAC23RW étailt trop grand 
	font: 80px/100% Gotham, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 75%;
	margin: 18% auto;
	color: #d0006f; */
	text-align: center; 
	
/*****JAC220405  new par Isa ****/	
	letter-spacing: 3px;
	
  /*font-family: 'Open Sans', sans-serif;*/
	font-size: 3em; 
	color: #000000;
	line-height: 40px;
  /*	
	border-bottom: 1px solid #E5E5E5;
   padding: 10px 0px ;
	   margin: 0px 20px ;      */	
	
}


h2 {
/*****JAC220405  new from ILLP ****/
	text-align: left;
  /*font-family: 'Open Sans', sans-serif;*/
	font-size: 1.75em; 
	color: #000000;
	line-height: 30px;
	border-bottom: 1px solid #E5E5E5;
	padding: 10px 0px ;
	margin: 0px 20px ;
}

h3 {
/*****JAC220405  new from ILLP ****/
	text-align: center;
  /*font-family: 'Open Sans', sans-serif;*/
	font-size: 1em; 
	color: #000000;
	line-height: 25px;
	border-bottom: 1px solid #E5E5E5;
	padding: 10px 0px ;
	margin: 0px 20px ;
}

h4 {
	font: 60px/100% Times, Arial, Helvetica, sans-serif;
	color: #ffffff;
}

/*****JAC22 pour voir email sur fond banc *****/
.email {
	color: #669;
}	

/*****JAC25 font: 50px/130% Roboto Condensed, Montserrat, Arial, Helvetica, sans-serif;  *****/
#BaseText {
	font: 50px/130% Roboto Condensed, Montserrat, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 82%;
	margin: 10% auto 0 auto; /* top auto bottom auto - centre horizontalement */
	
/*****JAC220405 était 		color: #FFFFFF; *****/
	color: #FFFFFF;
}

/*****JAC25 NEW smaller *****/
#BaseText2 {
	font: 30px/130% Roboto Condensed, Montserrat, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 82%;
	margin: 5px auto 10% auto; /* petite marge top, centré horizontalement */
	
/*****JAC220405 était 		color: #FFFFFF; *****/
	color: #FFFFFF;
}


#BasePourquoi {
	font: 1.5em/150% Monserrat, Arial, Helvetica, sans-serif;
/*****JAC220408 NEW , per ressembler à About us ****/	
	text-align:justify;
	padding: 5px;
	width: 80%;
	margin: 20px auto;
/*****JAC220407  	
	padding: 5px 5px 5px 90px;
	margin: 5% auto;
	text-align: left;
*****/	
	
}


#BasePourquoi1 {
	font: 1.2em/150% Monserrat, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 75%;
	margin: 20px auto;
	text-align: left;
	
}



#BasePoint {
	          
          
}

/************************************************************************************
JAC MODIF big  +  
*************************************************************************************/
img {
	max-width: 100%;
/*****JAC220405  pour gèrer taille logo	et photo, 1 à 1
	height: auto;
*****/	
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /**
  width: 50%;
  **/
  /**
  height: 125px;
  **/
}

P.blocktext {
    margin-left: auto;
    margin-right: auto;
}



/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
	
}

#header {
	margin:auto;
	text-align:center;
	width: 80%;
	
}

#content {
/******MOD JAC enleve : 	float:left;   *************/
	text-align:center;
	margin:auto;
	
}

/***JAC23RW il y a } tout seul ?!?  

}		

***/


/******MOD JAC new !   *************/
#profile {
	text-align:right;
	padding: 5px;
	margin: 20px auto;
	font-weight:bold;
	
}


/***JAC23RW    ***************
CONTENTCONTAINER : tout ce qui n'est pas dans menu top car j'ai du mettre body background en Noir
*******************/

#contentcontainer
	{
		
	color: #000000;
	background: #ffffff;
   
}


/***JAC23RW    ***************
FOOTERbody 
*******************/

#footer {
	background: #ffffff;	
	text-align: center;
   
}

#titrepdt
	{
		
	color: #d93cc0;
	background: ##d9d73c;
 }  




/***JAC23RW    ***************
Presentation Produits sur 7 Colonnes dont 3 pour produits: via ChatGPT
***********

 <!---JAC23  =>   STYLE X ESHOP RW via CHATGPT 2nd tentative @    =========================================== 
=======================================================================  

  <style>

 ********/


  
	
 /***Jac23RW via CHAT GPT  Create a container to hold the columns and make it responsive */
        .rowchat {
            display: flex;
/*** per colore text */	
			color: #000000;
			text-align: center;
		
		}
		
        /* Define the columnchat widths using CSS */
		

       .column1 {
            width: 7%;
		
        }

        .column2 {
            width: 24%;
		
        }

        .column3 {
            width: 7%;
        }

        .column4 {
            width: 24%;

        }

        .column5 {
            width: 7%;
        }

        .column6 {
            width: 24%;

        }

        .column7 {
            width: 7%;
        }


       .column8 {
            width: 7%;
		
        }

        .column9 {
            width: 86%;
		
        }

        .column10 {
            width: 7%;
        }

        .column11 {
            width: 20%;
        }

        .column12 {
            width: 60%;
        }
			
        .column13 {
            width: 20%;
        }
		
	    .column14 {
            width: 40%;
        }	
		
		.column15 {
            width: 30%;
        }			
			
			
/*	tolto x rest 	
            flex-wrap: wrap;
            justify-content: space-between;
*/		
        }

        /* Add some basic styling for clarity */
        .column {
            border: 1px solid #000;
            padding: 00px;
            text-align: center;
        }

/* CLAUDE26 Ajoute cette classe spécifique pour une image full-width */
		.column-full {
    width: 86%; /* 7% vide + 5×16% colonnes centrales + 7% vide = 86% au centre */
			}



   

/*****

  </style>

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




#textes {
/*****JAC220405 repris de nous de LIC=> pour élargir plage texte, était max-width: 700px; 

	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	vertical-align: middle;
*****/	
	text-align:center;
	margin:auto;
}

#aboutus {
	text-align:justify;
	padding: 5px;
	width: 80%;
	margin: 20px auto;
}

#comment {
	text-align:justify;
	padding: 5px;
	width: 60%;
	margin: 20px 0 0 20%;
	/**
	font-weight:bold;
	**/
}


/*****JAC22  new nEW opaque VIDEO via : https://jsfiddle.net/kiirosora/36Lj4kxt/ *****/


.videoContainer {

/*****JAC22 replace	 position: relative; et ajoute  right: 0;
  bottom: 0; pour pouvoir placer la baseline *****/
    position: fixed;
	 right: 0;
	bottom: 0;
	
    width: 100%;
    height: 100%;
	/*
    padding: 20px;
    border-radius: 5px;
	*/
    background-attachment: scroll;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
/***JAC23RW supprime min-height: 100%;  car empêche vid de bien prendre toute la hauteur ***/
    min-height: 0%;
    position: relative;
    z-index: 1;
}

}
.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
	/**
    background-color: green;
    opacity: 0.3;
	**/
	background: rgba(0, 0, 0, 0.3);
}





/* Rename it "video" for indexVideo7b => Style the video #MyVideo: 100% width and height to cover the entire window  
#video {

  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  
  *****/
  
  
  
  /*****VIDEO3 enlève les 
 /*****JACVIDEO ajouté ici ***** 
  box-sizing: border-box;
  ****/
}

/***** new from indexVideo7 copy "id: video *****/
#bgvid {

  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
 /*****JACVIDEO ajout ici  
 background: rgba(0, 0, 0, 0.3);
  color: #f1f1f1;
  padding: 0px 0px 100%px;
 *****/ 

  
}

 
.baselineonvideo {
  position: fixed;
  
 /*****JAC23 => pour avoir menu hamburger sur la droite  *************/ 
   width: 100%;
  
  /*
  left: 5%;
  bottom: 30%;
 
 background: rgba(0, 0, 0, 0.5);
 */
}
 
  
/*********** OUT TEST JAC22 ***********************
.baselineonvideo {
	position: sticky;
	left: 0%;
	bottom: 0%;
	width: 100%;
	height: 100%;

  color: #f1f1f1;  *****
	background: rgba(0, 0, 0, 0.3);
	color: #f1f1f1;
	padding: 0px 0px 10%;
}

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

/*****JAC23 => enlève les " de #baseline1"  *************/
#baseline1 {
	
  	text-align:justify;
	padding: 5px;
	width: 60%;
	margin: 20px auto;
	font-weight:bold;
	font: 80px/100% Montserrat, Arial, Helvetica, sans-serif;
	
}

/* Style the HTML button if used to pause/play the video 
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

/* Style the HTML button if used to pause/play the video 
#myBtn:hover {
  background: #ddd;
  color: black;
}


*/





/*****JAC22  new pour INDEX=FULL SITE ON ONE PAGE  *****/

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side{
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 75%;
}

/* NEW MOFIF JAC => out!! 
#footer {
	clear: both;

	width:100%;
	
	/*MOFIF JAC car était: background-color: #000000; 
	
	background: #FFFFFF;
	color: #000000;
	
	
}
*/




/*************** 
jac23RW TOPBAR fond couleur pour RW via
 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav   
***************/


.topnav {
	
  overflow: hidden;
  /******JAC25 ***/
  background: #8dc9be;
/******JAC220405 était background-color:  #ca929c; #69cbc5; *****/ 

}



.topnav a {
	   /******JACVIDEO était float: left;  *****/ 
  float: left;
  display: block;
  
  
 /***JACV25 était  color: #000000; RW #ca929c; #69cbc5; et pas de background spécific  *****/ 
  color: #ffffff;
  background: #8dc9be;
  
  text-align: center;
   /******JACVIDEO était padding: 14px 16px;   *****/ 
  padding: 16px 16px;
  text-decoration: none;
  /******JACVIDEO était font-size: 30px   *****/ 
  font-size: 17px;
  
/***JAC23RW était 80px mais avec CSS reset et logo à 60 il passe à 60 ******/  
  line-height:60px;
  
  /******JACVIDEO récup de CenterMenu   *****/ 
  text-transform:uppercase;
   
}



/***
.topnavtext a {
  float: center;
  color: #cc2;
  
   
}
***/

.topnav a:hover {
	 /******JAC25 ajoute texte en Rose pour isa=> color: #d0006f; background-color: #ddd;  #a2dfdb; *****/ 
  background-color: #8dc9be; 
  color: #3b2b6e;
}

/******JACVIDEO a été utilisé pour le Logo donc pas besoin de coulerurs *****/
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

  /******JACVIDEO ajouté pour augmenter taille des options du menu  *****/ 
.topnav li {

/***Jac23RW était 80px ***/	
   line-height:70px;
}	

 /******sert à cacher l'icone hamburger du menu tant que la taille est suffisante avant de collapser *****/ 
.topnav .icon {
  display: none;
}


 /***JACV23RW NEW pour fixer Taille Logo à 60px ****/
 #topnavlogo {
  height: 60px;

}


 /***JAC23rw   *** pourréduire espace modifiable entre logo e autres choix menu => était  padding-left: 20%; *****/ 
#topnavespace {
  padding-left: 0%;
  
}


/******************
*******************
Jac23RW Nouveau TopbarTRANSP x RW23 juste pour vidéo avec fond menu Transparent

!! il faut aujouter dans HTML le myTopnavTRANSP !! => <!---JAC23RW modif pour avoir TopMEnuTransp du NEW TOPmenu avec son script !! => était getElementById("myTopnav"); ------>
********************
*******************/


.topnavTRANSP {
	
  overflow: hidden;
  /******JAC23RW ajoute couleur RW ***/

/******JAC220405 était   background: #929cca;  *****/ 

}



.topnavTRANSP a {
	   /******JACVIDEO était float: left;  *****/ 
  float: left;
  display: block;
  
  
 /***JACV23RW était  color: #000000; RW #ca929c; background: #ca929c; et pas de background spécific  *****/ 
  color: #ffffff;
 
  
  text-align: center;
   /******JACVIDEO était padding: 14px 16px;   *****/ 
  padding: 16px 16px;
  text-decoration: none;
  /******JACVIDEO était font-size: 30px   *****/ 
  font-size: 17px;
  
/***JAC23RW était 80px mais avec CSS reset et logo à 60 il passe à 60 ******/  
  line-height:60px;

/***JAC23RW ajputé pour être plus lisible   font-weight: bold; ******/   

  
  /******JACVIDEO récup de CenterMenu   *****/ 
  text-transform:uppercase;
   
}



/***
.topnavtext a {
  float: center;
  color: #cc2;
  
   
}
***/

.topnavTRANSP a:hover {
	 /******JACSC25  JACVIDEO ajoute texte en Rose pour isa=> color: #d0006f;   *****/ 
  background-color: #ddd; 
  color: #3b2b6e;
}

/******JACVIDEO a été utilisé pour le Logo donc pas besoin de coulerurs *****/
.topnavTRANSP a.active {
  background-color: #04AA6D;
  color: white;
}

  /******JACVIDEO ajouté pour augmenter taille des options du menu  *****/ 
.topnavTRANSP li {
   line-height:70px;
}	

 /******sert à cacher l'icone hamburger du menu tant que la taille est suffisante avant de collapser *****/ 
.topnavTRANSP .icon {
  display: none;
}


 /***JACV23RW NEW pour fixer Taille Logo à 60px ****/
 #topnavlogoTRANSP {
  height: 60px;

}


 /***JAC23rw   *** pourréduire espace modifiable entre logo e autres choix menu => était  padding-left: 20%; *****/ 
#topnavespaceTRANSP {
  padding-left: 0%;
  
}






/******************
LANGUAGE
*******************/
#language
	{
	position: absolute;
	right: 0;
	top: 0;
	height:30px;
	width:auto;
		/* MOFIF JAC qui remplace color: #000000; avec #70695a */
	background-color: #ffffff;
	text-align: left;
	font-size: 15px;
	font-weight: bold;
	font-variant:small-caps;
	text-decoration: none;
	
	}

#language a 
	{
	line-height: 1em ;
	padding: 7px 0 ;
	/* MOFIF JAC qui remplace color: #666666; avec #FFD1D8 */
	color: #000000;
	font-weight: bold;
	font-variant:small-caps;
	text-decoration: none ;
	text-align: center ;
	font-size: 15px;
	}

a#switch
	{
	color: #FFD1D8;
	}


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

>1150px Normal

< 1150px menu plus petit mais complet

< 980px menu bascule sur Icone hamburger

< 820 video bascule en vertical


/******************************************
******* Min 1150 px **********************
*****************************************/

/*** Jac23RW modiife le min-width: 1100px  car menu plus long =>  for 1100px or more MODIFIE à 100% pour iPad HORR*/
@media screen and (min-width: 1150px) {
	
	#pagewrap {
		width: 100%;
	}
	
	#content {
		width: 100%;
	}
	
	#myVideo {
		width: 100%;
	}
}



/******************************************
******* MAX 1150 px **********************
*****************************************/

/*** Jac23RW modiife (max-width: 1100px) car menu plus long =>  for 980px till 1100px MODIFIE à 66% pour iPad HORR*/
@media screen and (max-width: 1150px) {
	
	#topnavespace { /***Jac23RW était 10%; */
		padding-left: 0%;
	}		
	#topnavespaceTRANSP {/***Jac23RW était 10%; */
		padding-left: 0%;
	}

	.topnav a { /***Jac23RW était en haut  padding: 16px 16px; mais trop espacé x ipad ***/
	 padding: 6px 6px;
	}
	.topnavTRANSP a { /***Jac23RW était en haut  padding: 16px 16px; mais trop espacé x ipad ***/
	 padding: 6px 6px;
	}

	
	#pagewrap {
		width: 62%;
	}
	#content {
		width: 100%;
	}
	
}



/***** for 880px or less 
@media screen and (max-width: 880px) and (max-height: 550px) {
	
	
	#pagewrap {
		width: 100%;

	}
	
	
	#content {
		width: 100%;
	}
	
*****/	
	
/***Jac23RW  pas utile jusqu'à 880 	
	.topnav a:not(:first-child) {display: none;
	}		


	.topnavTRANSP a:not(:first-child) {display: none;
	}	
	
}

***/



/******************************************
******* MAX 880 px et MAX-Heyght 550 **********************
*****************************************/

/***Jac23RW for 880px or less */
@media screen and (max-width: 880px) and (max-height: 550px) {	
	
/*****JAC220406  new  pour les phone en paysage *****/	
	#BaseText {
		margin: 5% 0 0 5%;
		font: 50px/130% Gotham, Arial, Helvetica, sans-serif;
	}
}	


/******************************************
******* MAX 880 px **********************
*****************************************/

/**** for 880px or less *  ***/
@media screen and (max-width: 880px) {
	
	#topnavespace {
		padding-left: 0%;
	}
	
	#topnavespaceTRANSP {
		padding-left: 0%;
	}	
	

}



/******************************************
******* MAX 980 px **********************
*****************************************/

/***Jac23RW POUR MENU HAMBURGER ! j'ai augmenter le 880px  car menu plus long => DEBUT De l'ICONE MENU => mais avant était  680px or less */

		/*****JAC22 per nuovo Topbar e Baseline  *****/

@media screen and (max-width: 980px) {
	


	.topnav a:not(:first-child) {display: none;}
	
	.topnavTRANSP a:not(:first-child) {display: none;}

	.topnav a.icon {
		float: right;
	/**** pour grandir l'icone du menu hamburger ****/
		font-size: 30px;
		display: block; 
	/***JAC23RW pour allogner avec new logo  pour descendre hamburger sur ligne Logo *****/		
		margin-top: 18px;
	/***JAC23RW ajouté pour eloigner hamburger du bord droit *****/	
		margin-right: 20px;
	}
	
	.topnavTRANSP a.icon {
		float: right;
	/**** pour grandir l'icone du menu hamburger ****/
		font-size: 30px;
		display: block; 
	/***JAC23RW pour allogner avec new logo  pour descendre hamburger sur ligne Logo *****/			
		margin-top: 18px;
	/***JAC23RW ajouté pour eloigner hamburger du bord droit *****/	
		margin-right: 20px;		
	}
	
	
	
	/**** JACVIDEO ajoutte pour réduire taille Logo *****/
	.topnav a.active {
		height:20px;
	}	
	
	.topnavTRANSP a.active {
		height:20px;
	}		
	
	
	
	
	/**** JACVIDEO ajoutte pour réduire taille Logo *****/	
	img {
		max-width: 100%;
	/***** enlève car distorsion photo ISA  height: 80%; ******/
	
	}
 
	/**** JACVIDEO pour replacer baseline dans la hauteur grâce à Margin top 
 	font: 60px/100% Montserrat, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 80%;
	margin: 60% auto;
	color: #FFFFFF;
	*****/	

	
	#BaseText {
			/*****JAC22_v8_pour avoir texte plus long était font: 55px/100% Gotham, Arial, Helvetica, sans-serif;		******/
		font: 50px/130% Gotham, Arial, Helvetica, sans-serif;
		width: 82%;
			/*****JAC220406   de 20 à 5% *****/	
		margin: 5% 0 0 10%;

	}
	
	
	/*****JAC220408 NEW  ****/		
	#BasePourquoi {
		font: 1.2em/150% Monserrat, Arial, Helvetica, sans-serif;
	
	}
	
	#comment {
		width: 80%;
		margin: 10px 0 0 10%;

	}

	/******JAC220408  ************/
	.topnav a {
	/****JAC220406 supprime pour menu vertical   line-height:80px; ******/  
		line-height:10px;
 
	}

	.topnavTRANSP a {

	/****JAC220406 supprime pour menu vertical   line-height:80px; ******/  
		line-height:10px;
 
	}



	/*****JACVIDEO pour descendre le filtre opaque plus bas Etait 
		height: 100%; 
		width: 100%;

		 .baselineonvideo {	
			position: sticky;
			left: 0%;
			bottom: 0%;

			height: 850px;
		}
		*****/

 
}


/******************************************
******* MAX 980 px **********************
*****************************************/

/***Jac23RW faut monter à 980 avant était 820px mais était  680px or less *****/
@media screen and (max-width: 980px) {
	
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
  
  
    .topnavTRANSP.responsive {position: relative;}
	.topnavTRANSP.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
  
  
  
	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
  
    .topnavTRANSP.responsive a {
		float: none;
		display: block;
		text-align: left;
	}

/***Jac23RW  réduire les 10% ** pour déscendre menu qui restait en haut *****/
	#topnavespace {
		padding-top: 10%;
	}

	#topnavespaceTRANSP {
		padding-top: 10%;
	}
	
/***Jac23RW  réduire les H1, H2 et H3 *****/	
	h1 {
  /*était 3em*/
	font-size: 2.3em; 
	}
	
	h2 {
  /*était 1.75em*/
	font-size: 1.5em; 
	}
	
	h3 {
  /*était 1em*/
	font-size: 0.8em; 
	}
	
	
	

}

/******************************************
******* MAX 680 px **********************
*****************************************/

/* new Jac 2015for 680px or less */
@media screen and (max-width: 680px) {

	#content {
		width: auto;
		float: none;
		
	}
	

}	





/******************************************
******* MAX 580 px **********************
*****************************************/

/*****JAC220406 for 580px or less */
@media screen and (max-width: 580px)  {
	
	#pagewrap {
		width: 90%;

	}
	
	#header {
		height: auto;
	}
	
	h1 {
		font-size: 24px;
	}
	
		#BasePourquoi {
	font: 1.em/100% Gotham, Arial, Helvetica, sans-serif;
	}

		#BaseText {
	margin: 5% 0 0 5%;

	}
	
	
/***Jac23RW  mettre espace sur la gauche quand collapse*/
*, *::before, *::after {
  box-sizing: border-box;
}


	
	
/***Jac23RW pour faire aller en colonne (via CHAT GPT  Create a container to hold the columns and make it responsive )*/
        .rowchat {
	/* était display: flex;	*/	
            display: block;		
		}	
	
	
       .column1 {
            width: 0%;
		
        }

        .column2 {
            width: 96%;
			margin-left: 2%;
			margin-right: 2%;
        }

        .column3 {
            height: 30px;
        }

        .column4 {
            width: 96%;
			margin-left: 2%;
			margin-right: 2%;

        }

        .column5 {
            height: 30px;
        }

        .column6 {
            width: 96%;
			margin-left: 2%;
			margin-right: 2%;

        }

        .column7 {
            height: 30px;
        }


       .column8 {
            height: 30px;
		
        }

        .column9 {
            width: 100%;
		
        }

        .column10 {
            height: 30px;
        }

        .column11 {
            height: 30px;
        }

        .column12 {
            width: 90%;
			margin-left: 10px;
	
        }
			
        .column13 {
           height: 30px;
        }
		
	    .column14 {
            width: 96%;
			margin-left: 2%;
			margin-right: 2%;
        }			
	
}

/******************************************
******* MAX Width 430 px **********************
*****************************************/

@media screen and (max-width: 430px) {


	/***Jac23RW  pour déscendre menu vertical qui restait coincé en haut au niveau logo *****/
	#topnavespace {
		padding-top: 15%;
	}

	#topnavespaceTRANSP {
		padding-top: 15%;
	}

}	




/******************************************
******* MAX height 500 px **********************
*****************************************/

/*****JAC220408  pour déscendre sous les 500px or less */
@media screen and (max-height: 500px) {
	

		/*****JACVIDEO pour centrer la Video Verticale,  Etait 
		#bgvid {
		  position: fixed;
		  right: 0;
		  bottom: 0;
		  min-width: 100%; 
		  min-height: 100%;
		  }

		 *****/

}






		/*****JAC220404 new *****
		 #bgvid {
			height: 60%;
		  }
		****/
		
		
/******************************************
******* MAX 350 px **********************
*****************************************/	
	
/****** pour déscendre sous les 350px or less */
@media screen and (max-width: 350px) {


/***** pour déscendre menu qui restait en haut *****/
	#topnavespace {
		padding-top: 15%;
	}


	#topnavespaceTRANSP {
		padding-top: 15%;
	}



	
	#BaseText {
			/*****JAC22_v8_new pour avoir texte plus long 		******/
		font: 40px/100% Gotham, Arial, Helvetica, sans-serif;
		width: 90%;
		margin: 20% 0 0 10%;
	}
	
}	

	

	
	
	
	
/************************************************************************************
BORDERS & ALTRO
*************************************************************************************/

/* border & guideline (you can ignore these) */
#content {
	
}

#header, #content, {
	margin-bottom: 5px;
}

#pagewrap, #header, #content, #footer, #aboutus, #menu {

}

   /* JAC MODIF : per TESTARE i blocchi	
	border: 1px;
	border-color: red;
	border-style:solid;  
	****/