/* Variables */
:root {
  --font-size:1rem;
}

.nav-color {
  --navbar-color: #FFF;
  --navbar-bg-color: #1e3562; 
}
.inf-color {
  --infbar-color: #FFF;
  --infbar-bg-color: #7ec245;
}
.bgd-color {
  --bgdcol-color: #FFF;
  --bgdcol-bg-color: #d8e8b0;
}

/* Basic style */
body {
  margin: 0;
  font-size:var(--font-size);
  font-family: Arial;/* 'Poppins', sans-serif; */
  background:#ffffff;
}
.logo {
  /* border: 1px solid white; */
  width : 11.875rem; /* 11.875rem=190px - auto */
  height : 6.875rem; /* 6.875rem=100px - auto */
}

/* Header */
.page-header {
	position: fixed; /* sticky ou fixed */
	top: 0;
	width: 100%;
/*	height: 5.28rem;*/	/* height: 5.28rem avec bandeau inférieur sans 3.96rem;  */
	z-index:999; /* affiche le header au dessus du footer */
}

/* Navbar */
.navbar_logo {
	padding: 0.1rem 0.625rem; /* 0.625rem = 10 px  !!! a changer pour px logo*/
}
.navbar {  
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 0 1.250rem; /* 0.625rem = 10 px */
	font-size:1.0rem;
	background:linear-gradient(to right, white,white,var(--navbar-bg-color),var(--navbar-bg-color),var(--navbar-bg-color));  /*var(--navbar-bg-color); *//* anciennement supprimé quand bgnav était utilisé */
	color:var(--navbar-color);
}
.navbar ul {
	list-style:none;
	margin:0;
	padding:0;
}
.navbar_links {
	display:flex;
}
.navbar_link { 
	padding:0 0.625rem;
}
.navbar_link > a { 
	color:var(--navbar-color);
	text-decoration:none;
}

.downh{
	margin-top:5.2rem;
}
.downl{
	margin-top:0;
}
/*   Ajout de couleur différente au survol */
.first > a:hover {
	color:#7ec245; /* choix de la couleur de survol */
}


/* Infbar */
.infbar {
	height: 1.3rem;
	background:var(--infbar-bg-color);
	color:var(--infbar-color);
	vertical-align: middle;
	line-height: 1.3rem;
	padding: 0 1.900rem;
	/*border-bottom: 1px solid #d02020;*/
}
.infbar > a { 
	color:var(--infbar-color);
	text-decoration:none;
}
.infbar > a:hover {
	font-weight: bold;
}

/* Headerplace */
.headerplace {
	height: calc(0.2rem + 6.875rem + 1.3rem);
	color: #FFFF;
	background:#888888;
	line-height: 1.5rem;
	font-size:1.5rem;
}

 /* Rest of the page */
.main-content {
/*	padding: 0 1.5rem; */
	z-index:1;
}
.restpage {
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	min-height:calc(100vh - (0.2rem + 6.875rem + 1.3rem + 1.2rem));
	width:100%;
}

.bggreen {
	color:#1e3562;
	background-color: #d8e8b0;
	margin: 1rem;
}
.bgred {
	color: white;
	background-color: #ff4040;
	margin: 1rem;
}
.bgwhite {
	color:#1e3562;
	margin-bottom: 1rem;
}

.infobox {
	width: 70%;
/*	margin: 0 60px; */
	padding: 10px;
	border-radius: 10px;
	text-align: center;
}

.infobox h2 {
	margin: .5rem;
}
.infobox h4 {
	margin: .5rem;
}

.infobox form {
	margin: 1rem;
}

.infobox input, textarea, select, button {
	margin : 5px 10px;
	font-family : inherit;
	font-size   : var(--font-size);
}
/**//**/.infobix {
	-webkit-appearance: checkbox; /* none - checkbox */
	appearance: checkbox; /* none - checkbox */
	-webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
	   -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
			box-sizing: border-box;
}


/*
.infobix input[type=email]{
  -webkit-appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%; 

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/
/*
.infobox input:invalid {
  box-shadow: 0 0 5px 1px red;
}
*/
.infobox input:invalid{
  border-color: #900;
  background-color: #FDD;
}
.infobox input:focus:invalid {
  outline: none;
}


.infobox input[type=image] {
	margin : 2px 0 0 0;
	width : 80px;
	height: 20px;
}

.infobox fieldset {
/* padding:0 20px 20px 20px;
 margin-bottom:10px;
 border:1px solid #DF3F3F; */
 }
.infobox legend {
	/* color:#DF3F3F; */
	font-size: 1.4rem;
	font-weight: bold;
 }
.infobox label {
	font-weight: bold;
}

.infobox table,td {
	color:#1e3562;
	border:#32638e 1px solid; /* #1e5784 #32638e #72c245 #007a3d #007742 */
	background-color:#ffffff;
	text-align: center;
}
.infobox th {
	color:#ffffff;
	border:#32638e 1px solid; /* #72c245 */
	background-color:#32638e;
	text-align: center;
}

.affgreen			{ color: #50b030 }
.affgreen	:active	{ color: #50b030 }
.affgreen	:link	{ color: #50b030 }
.affgreen	:visited{ color: #50b030 }
.affgreen	:hover	{ color: #000080 }

.affblue			{ color: #3080c0 }
.affblue	:active	{ color: #3080c0 }
.affblue	:link	{ color: #3080c0 }
.affblue	:visited{ color: #3080c0 }
.affblue	:hover	{ color: #000080 }

.display-table {
    display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.display-table > div { 
    display: table-row; 
}
.display-table > div > div { 
    display: table-cell;
}

.display-tbl-btn {
	width: 18rem;
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: .9rem;
	margin-top: .3rem;
}
.display-tbl-btn > div { 
    display: table-row; 
}
.display-tbl-btn > div > div { 
    display: table-cell;
}
.display-tbl-btn input, textarea, select, button {
	margin-left: .2rem;
	margin-right: .2rem;
	font-size: .9rem;
}


/* Footerplace */
.footerplace {
	font-size:0.8rem;
	background:#ffffff;
	color:#ffffff;
	padding: 0.1rem;
}
/* Footer */
.page-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	font-size:0.8rem;
	background:var(--navbar-bg-color);
	color:var(--navbar-color);
	padding: 0.1rem;
	vertical-align: middle;
	text-align: center;
	z-index:900;
}
.page-footer > a {
	color:var(--navbar-color);
	text-decoration:none;
}

/*  Small device */
@media screen and (max-width:500.00px) {
  .logo {
	/* border: 1px solid white; */
	width : 7.9166rem; /* 11.875rem=190px - auto */
	height : 4.5833rem; /* 6.875rem=100px - auto */
  }
  
  /* Navbar */
  .navbar_logo {
	padding: 0.1rem 0.312rem; /* 0.625rem = 10 px  !!! a changer pour px logo*/
  }
  .navbar {  
	padding: 0 0.312rem; /* 0.625rem = 10 px */
	font-size:0.9rem;
  }
  
  .downh{
	margin-top:3.2rem;
  }
  
  /* Infbar */
  .infbar {
	padding: 0 0.8333rem;
	font-size:0.9rem;
  }
  
  /* Headerplace */
  .headerplace {
	height: calc(0.2rem + 4.5833rem + 1.3rem);
  }
  
  
  .infobox {
	width: 90%;
  }
  .infobox form {
	margin: 0;
  }
  
  .infobox table,th,td {
	font-size: .8rem;
}
 
 .display-table > div > div { 
	display: flex;
	flex-direction:column;
	width: -moz-max-content;
    width: max-content;
	text-align: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
  }
 
  /* Footerplace */
  .footerplace {
	font-size:0.7rem;
  }
  /* Footer */
  .page-footer {
	font-size:0.7rem;
  }
  .hidesmallscrn {
	display:none; /* Cache 'and powered' sur un petit écran */
  }
}