/* VARIABLES

haut | droite | bas | gauche */

:root {
	--H1FontSize: 4.8rem;
	--H1LineHeight: 1.1;
	--H1MarginTop: 0.1rem;
	--H1MarginBottom: 0.5rem;
	
	--H1FontSizeMob: 2rem;
	--H1MarginTopMob: 0.4rem;
	
	--ButFontSize: 1.1rem;
	--ButLineHeight: 1.5;
	--ButMarginBottom: 0.1rem;
	
	--ButMarginBottomMob: 0.1rem;
	--VartLet: "633+";
	
	

	--VarHMenuMin: calc(var(--H1FontSize) * var(--H1LineHeight));

	--OffsetMenu: var(--VarHMenuMin);
	--OffsetMenuMob: var(--VarHMenuMin);
	/*calc(var(--H1FontSize) * var(--H1LineHeight) + var(--H1MarginTop) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottom));
	--OffsetMenuMob: calc(var(--H1FontSizeMob) * 2 * var(--H1LineHeight) + var(--H1MarginTopMob) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottomMob));*/
	
	
	--MarginSide : 15%;
	--WidthNews : 32%;
}

#header
{
	--VarHMenuMax: 60%;
	--VarPaddingMenuStart: 15%;
}

#header img
{
	--ImgH: 100%;
}




/*CSS*/

html
{
	margin: 0 !important;
	height: 100%;
	width: 100%;
	font-size: 100%;
	scroll-behavior: smooth;
}


body
{
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding-bottom: 5rem;
	line-height: 1.2;
	font-size: 1.1rem;
	width: 100%;
	color: rgb(20% 20% 20%);
	font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	text-rendering: optimizeLegibility;

	
	/*white-space: pre-line; A PREVOIR POUR LES PETITS PARAGRAPHES*/
}


#header
{
	position : fixed;
	top: 0;
	width: 100%;
	height: var(--VarHMenuMax);
	text-align: center;
	padding: var(--VarPaddingMenuStart) 0 0.2rem 0;
	transition: 0.2s;
	
	
/*rend invisible le défilement sous le titre*/
	background:inherit;
	z-index: 1000;
	
}

#header img
{
	height: var(--ImgH);
}



#StartSpace
{
	height: var(--OffsetMenu);
}



#main
{
	position: absolute;
	width:100%;
	margin-top: calc(var(--OffsetMenu) + 2rem);
	/*transition: 0.2s;*/
	visibility: hidden;
}

		
footer
{
	min-height: 8rem;
	height: auto;
	width: 100%;
	background: #f6f1eb;
	padding: 2rem;
}


a
{
	text-decoration:none;
}


a:hover
{
	text-decoration:none;
}


h1
{
	/*font-family: Arial, Helvetica Neue, Helvetica, sans-serif;*/
	font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace, serif;
	font-style: italic;
	margin-bottom: var(--H1MarginBottom);
	text-align: center;
	font-size: 0.9rem;
	left: 1rem;
	right: 1rem;
	color: black;
}



h2
{
  /*font-family: Baskerville, Baskerville Old Face, Garamond, Times New Roman, serif; */
  font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace, serif;
  font-size: 2rem;
  font-weight:bold;
  text-align: center;
  margin-bottom: 0.7rem;
  margin-bottom: 1.4rem;
  /*margin-top: 0.5rem;*/
}


h3
{
	all: unset;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 0.6rem;
	display: inline;
	/*text-align: left !important;*/
}


section
{
	margin: 0 var(--MarginSide) 0 var(--MarginSide);
	font-size: 1.1rem;
	margin-bottom: 3.5rem;
	/*clear: both;*/
}

strong
{
	font-weight: inherit;
}

b
{
	font-weight: bold;
}


sup
{
	font-size: 0.6rem;
}

small
{
	font-size: 0.6rem;
	line-height: 0.6rem;
	display: inline-block;
}

table
{
	margin:auto;
}


td, th
{
	padding: 0.5rem;
}

th
{
	font-weight: bold;
}

td, th, table
{
	width: auto;
}

tr
{
	border-bottom: 0.9px solid #E5E1DE;
	/*border-bottom: 0.9px solid #F6ECF3;*/
}

input, textarea
	{
		border: 0.9px solid #a88d00;
		font-size: 1.5rem;
	}
	

main div
{
	margin-bottom: 1.4rem;
}

main p
{
	margin-bottom: 1.2rem;
}

form
{
/*	position: absolute;*/
/*	margin-left: 11rem;
	margin-right: 11rem;*/
/*	margin-top: 2rem;*/
/*	top: 5rem;*/

	/*font-size: 1.5rem;*/
}



		
	
		
.News{
	/*width: 49.9%;*/
	column-count: 2;
	column-gap: 5%;
}

.Xtra
{
	display: table;
}

.Xtra>div
{
	display: table-cell;
}

.Xtra>#XtraSp
{
	width: 5%;
}
		
.ClearFloat{
		clear: both;
		visibility: hidden;
	}

.anchor
{
	display: block;
	/* height: calc(var(--H1FontSize) * var(--H1LineHeight) + var(--H1MarginTop) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottom)); /*same height as header*/
	/* margin-top: calc(0 - (var(--H1FontSize) * var(--H1LineHeight) + var(--H1MarginTop) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottom))); /*same height as header*/
	height: var(--OffsetMenu);
	margin-top: calc(-1*var(--OffsetMenu));
	visibility: hidden;
}

.warning
{
	color:red;
	font-weight: bold;
	font-size: 1.1rem;
}


.justify
{
	text-align: justify;
}


.center
{
	text-align: center;
}


.left
{
	text-align: left;
}


.hidden
{
	visibility: hidden;
}

.DspNone
{
	display: none;
}


.BoxStyle
{
	margin: 0.6rem 0 0.6rem 0;
	border-width: 0.3rem 0 0.3rem 0; 
	border-color: #a88d00; /*#FFD700;*/
	border-style: double none double none; /* haut | droite | bas | gauche */
/*	vertical-align: middle;	*/
}

.ImgSize1
{
	width: 23rem;
}

.ImgSize2
{
	width: 18rem;
}

.ImgSize100
{
	width: 100%;
}

.ImgSize80
{
	width: 80%;
}

.ImgSize30
{
	width: 30%;
}


.FloatLeft
{
	float: left; /*inline-start*/
	Margin-right: 1rem;
	text-align: left;
}


.FloatRight
{
	float: right; /*inline-end*/
	Margin-left: 1rem;
}





.logo-fixed-left
{
	position: fixed;
	bottom: 0.6rem;
	left: 0.6rem;
	width: 10rem;
}


.logo-fixed-right
{
	position: fixed;
	bottom: 0.6rem;
	right: 0.6rem;
	width: 10rem;
}


.acr1
{
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	color: #a88d00; /*#FFD700; /*#6c757d;*/
	margin-bottom: 0.5rem;
	margin-top: 0.5rem;
	font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace, serif;
}

.STitle
{
	color: #a88d00;
}


.submit
{
	font-size: 1.5rem;
}

.linkRS
{
	width: 1.4rem;
	margin: 0.2rem;
}



/* ------------------------Bouton général------------------------*/


.BoutonRev5A
{
	background: #f6f1eb;
	
	-moz-border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
    -webkit-border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
    border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
	
	display: inline-block;
	color: #000000 !important;
	font: bold var(--ButFontSize)/var(--ButLineHeight) arial, sans-serif;
	text-align: center;
	width: 15rem;
	border: 1px solid #D8D3D0;
}


.BoutonRev5A:hover
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+26,f2ebe6+100 */
	background: #ffffff; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 26%, #f2ebe6 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 26%,#f2ebe6 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #ffffff 26%,#f2ebe6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2ebe6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}


.BoutonRev5A:active
{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2edd5+26,efe9e6+100 */
	background: #f2edd5; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #f2edd5 26%, #efe9e6 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover,  #f2edd5 26%,#efe9e6 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center,  #f2edd5 26%,#efe9e6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2edd5', endColorstr='#efe9e6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.Interline
{
	border-top: 1px solid #E5E1DE;
	line-height: 1.4rem;
	height: 1.4rem;
	margin-top: 2.8rem;
	margin-left: 30%;
	Margin-right: 30%;
}



div.Msg
{
	position: relative;
	padding:1rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
	text-align: justify;
	background: white; 
}



span.crytel
{
	unicode-bidi: bidi-override;
	direction: rtl;
	font-weight: bold;
}

/*
#myButton
{
	width: 15rem;
}
*/


#refresh
{
	width: 50px;
}


#TopButton
{
	width: 100%;
	margin-bottom: var(--ButMarginBottom);
	text-align: center;
}


#BottomButton
{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 2rem;
	text-align: center;
}


#LeftButton
{
	position: fixed;
	left: 0;
	width: 10rem;
	top: 6rem;
	bottom: 2rem;
	text-align: center;
}


#RightButton
{
	position: fixed;
	right: 0;
	width: 10rem;
	top: 10rem;
	bottom: 2rem;
	text-align: center;
}




#captcha
{
	width: 10rem;
}


/*
#CenterLButton
{
	position: fixed;
	left: 11rem;
	right: 50%;
	top: 10rem;
	bottom: 10rem;
	text-align: center;
}


#CenterRButton
{
	position: fixed;
	left: 50%;
	right: 11rem;
	top: 10rem;
	bottom: 10rem;
	text-align: center;
}*/

/*avoirh1
{
	font-family: Garamond, serif;
	line-height: 1rem;
	color: #2f912a;
	font-weight:bold;
	font-size: 131px;
	text-shadow:0px 0px 0 rgb(15,113,10),1px 1px 0 rgb(7,105,2),2px 2px 0 rgb(0,98,-5),3px 3px 0 rgb(-8,90,-13),4px 4px 0 rgb(-15,83,-20),5px 5px 0 rgb(-23,75,-28),6px 6px 0 rgb(-30,68,-35),7px 7px 0 rgb(-38,60,-43),8px 8px 0 rgb(-45,53,-50),9px 9px 0 rgb(-53,45,-58),10px 10px 0 rgb(-60,38,-65), 11px 11px 0 rgb(-67,31,-72),12px 12px 11px rgba(0,0,0,0.9),12px 12px 1px rgba(0,0,0,0.5),0px 0px 11px rgba(0,0,0,.2);
}*/

/*#intro
{
	position: absolute;
	width: 70%;
	text-align: center;
	padding: 15%;
}*/


/* ------------------------Logo------------------------*/
/*#tronix
{
	font-family: Garamond, serif;
	line-height: 1rem;
	color: #2f912a;
	font-weight:bold;
	font-size: 1.5rem;
	text-shadow:0px 0px 0 rgb(19,117,14), 1px 1px 0 rgb(-9,89,-14),2px 2px 1px rgba(0,0,0,0),2px 2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
}*/

/* ------------------------Zone Menu------------------------*/



/*---------------------------------------------------------------------------------------------*/



/* disabled button styles
   works with this markup: <button disabled="disabled">Submit</button>
*******************************************************************************/
button[disabled],
button[disabled]:hover,
button[disabled]:active {
  background: #999;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #aaa;
  cursor: not-allowed;
  text-shadow: none; }
 
 
/* disabled button styles
   works with this markup: <div class='disabled'>Submit</button>
*******************************************************************************/
div.disabled,
div.disabled:hover,
div.disabled:active {
	margin-bottom: 4px;
	margin-left: 4px;
	background: #2f912a;
	
	-moz-border-radius: 0 0.8rem 0 0.8rem;
    -webkit-border-radius: 0 0.8rem 0 0.8rem;
    border-radius: 0 0.8rem 0 0.8rem;
	
	font: bold 1rem/1.5 arial, sans-serif;
	text-align: center;
	width: 10rem;
	
	background: #999;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #aaa;
	text-shadow: none;
}

div.g-recaptcha>div
{
	margin: 1.5rem auto;
}







/*Menu panneau latéral gauche*/
#lateral-panel {
	z-index: 9999;                  /* pour être au dessus des autres éléments */
	position: fixed;                /* ne suit pas le scroll de la page et sert de réfèrent */
	top: 0;                         /* position en haut */
	left: 0;                        /* à gauche */
	width: 15rem;                    /* valeur de largeur pour tout le contenu */
	min-height: 100vh;              /* occupe toute la hauteur du viewport */
	transform: translateX(-100%);   /* on déplace à gauche pour ne pas interférer avec le document */
}

#lateral-panel-input {
	position: absolute;           /* pour sortir l'élément du flux */
	left: -999em;                 /* position hors de la fenêtre */
}

#lateral-panel-label {
	z-index: 1;                   /* on le met au dessus */
	position: absolute;           /* pour sortir l'élément du flux, il va bouger */
	top: 0;                       /* position en haut */
	left: 100%;                   /* alignement sur le bord droit du parent */
	width: 3rem;                   /* dimensions respectables */
	height: 3rem;
	cursor: pointer;
}

#lateral-panel-bloc {
	z-index: 0;                   /* mise au niveau zéro */
	position: absolute;           /* pour sortir l'élément du flux, il va bouger */
	top: 0;                       /* position en haut */  
	left: 0;                      /* alignement sur bord gauche du parent */
	box-sizing: border-box;       /* modèle de boîte, plus simple à gérer */
	width: 100%;                  /* largeur 100% de son parent */
	height: 100%;                 /* hauteur 100% de son parent */
	padding: 1rem;                 /* on décolle le contenu du bord */
	overflow: auto;               /* rien ne doit déborder */
	line-height: 2.2rem;
}

#lateral-panel-bloc span {
	display: block;
}

#lateral-panel-bloc p {
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 0.25rem;
}

#lateral-panel-bloc ul {
	list-style-type: none;
	margin-bottom: 0.2rem;
	padding-left: 1.2rem;
}

#lateral-panel-bloc a {
	display: inline-block;
	width: 100%;
	text-decoration:none;
}

#lateral-panel-input:checked ~ #lateral-panel-label {
	left: 200%;                     /* décalage vers la droite, passe de 100% à 200% */
}   
#lateral-panel-input:checked ~ #lateral-panel-bloc {
	transform: translateX(100%);    /* translation vers la droite de 100% */
}

#lateral-panel-label,
#lateral-panel-bloc {
	font-size: inherit;             /* taille font du référent */
	background: #f6f1eb;               /* il faut un fond opaque */
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	transition: all .5s;
}

#lateral-panel-label:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	width: 1rem;
	height: 1rem;
	border: .2rem solid black;
	border-width: .2rem .2rem 0 0;
	border-radius: 0.3rem 0 0.3rem 0;
	color: #888;
	transition: all .5s;
	transform: translate(-50%, -50%) rotate(45deg);
}

#lateral-panel-input:checked ~ #lateral-panel-label:before {
	transform: translate(-50%, -50%) rotate(-135deg);
}

.has-sub-item
{
	font-style: italic;
}

.link-menu{
	border-bottom: 1px solid #E5E1DE;
}




/*fin panneau latéral*/









/*POPUP*/


.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 400ms;
  visibility: hidden;
  opacity: 0;
  margin-bottom: 0;
  	display: flex;
	align-items: center;
	justify-content: center;
	
	
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	border: 2px solid #a88d00;
	width: 80%;
	max-height: 70%;
	margin-bottom: 0;
	position: relative;
	transition: all 1s ease-in-out;
	overflow-y: scroll;
	scrollbar-color: #a88d00 #dddddd;
	scrollbar-width: thin;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
  color: #a88d00;
}

.popup .close:hover {
  color: #000000;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

#RF
{
	width: 7%;
}

#FC
{
	width: 14%;
}

.OtherLink{
	text-decoration: #a88d00 solid underline;
	font-weight: bold;
}



@media all and (max-width: 991px){
	.popup
	{
		width: 90%;
	}
	#RF
	{
		width: 25%;
	}

	#FC
	{
		width: 50%;
	}

}

/*FIN-POPUP*/















































@media all and (max-width: 991px)
{


	html {font-size: 260%; width: 100%;}
	
	
	body {width: 100%;}
	
	#header
	{
		--VarHMenuMax: 45%;
		--VarPaddingMenuStart: 40%;
	}


	
	
	.logo-fixed-left, .logo-fixed-right
	{
		position: absolute;
		width: 4.4rem;
		bottom: unset;
	}
	
	
	section
	{
		margin-left: 0.9rem;
		margin-right: 0.9rem;
		/*padding-top: calc(var(--H1FontSizeMob) * 2 * var(--H1LineHeight) + var(--H1MarginTopMob) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottomMob));*/
	}
	
	small
	{
		
	}

	
	#captcha
	{
		width: 20rem;
	}
	
	.anchor
	{
		display: block;
		/* height: calc(var(--H1FontSizeMob) * 2 * var(--H1LineHeight) + var(--H1MarginTopMob) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottomMob)); /*same height as header*/
		/* margin-top: calc(0 - (var(--H1FontSizeMob) * 2 * var(--H1LineHeight) + var(--H1MarginTopMob) + var(--H1MarginBottom) + var(--ButFontSize) * var(--ButLineHeight) + var(--ButMarginBottomMob))); /*same height as header*/
		height: var(--OffsetMenuMob);
		margin-top: calc(-1*var(--OffsetMenuMob));
		visibility: hidden !important;
	}
	
	.News{
		column-count: 1;
	}
	
	.Xtra
	{
		display: block;
	}

	.Xtra>div
	{
		display: block;
	}
	
	.ImgSize30
	{
		width: 100%;
	}

	.Xtra>#XtraSp
	{
		display: none;
	}

	div.g-recaptcha
	{
		width:33%; /*l'inverse du transform suivant*/
	}
	div.g-recaptcha>div
	{
		margin: 1rem 0 5.5rem;
	}
	#rc-imageselect,
    .g-recaptcha {
        transform:scale(2.24);
        transform-origin:0;
        transform:scale(2.24);
        transform-origin:0 0;
        -webkit-transform:scale(2.24);
        transform:scale(2.24);
        -webkit-transform-origin:0 0;
        transform-origin:0 0;
     }


	.BoutonRev5A
	{
		/*width: 6.2rem;*/
		/*margin-bottom: var(--ButMarginBottomMob);*/
	}
	
	.LongTitle
	{
	    display: block;
	}


	.FloatLeft, .FloatRight
	{
		float:none;
		width: 100%;
		Margin: 2rem 0 2rem 0;
		display: inline-block;
	}
	
	
	.acr span
	{
		display: inline-block;
		margin-bottom: 0.2rem;
		margin-bottom: 0.2rem;
	}
	
	
	.form
	{
		margin-left: 3rem;
		margin-right: 3rem;	
		/*text-align: center;*/
	}
	

	input
	{
		width: 80%;
		font-size: 1.3rem;
	}
	
	
	textarea
	{
		font-size: 1.3rem;
		width: 100%;
	}
	
	label{
	display: block;
	}
	
	.popup{
		scrollbar-width: auto;
	}


}