html {	font-size: 62.5%;}
body {
	background-color: #fff;
	color: #000;
	/*font-family: "Century Gothic", helvetica, arial, sans-serif;*/
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.3em; /* equiv 14px */
	/*line-height: 1.5;  adapt to your design */
}

p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details, 
figure, 
hgroup {font-size: 1em;	/*line-height: 1.5;*/margin: 1.5em 0 0;}
h1, .h1-like {font-size: 1.4em;font-weight: normal;line-height: 1.6154em;margin: .8077em 0 0 0;}
h2, .h2-like {font-size: 1.3em;font-weight: bold;line-height: 1.75em;margin: .875em 0 0 0;}
h3, .h3-like {font-size: 1.2em;font-weight: normal;line-height: 1.909em;margin: .9545em 0 0 0;}
h4, .h4-like {font-size: 1.4286em;font-weight: normal;line-height: 1.05em;margin:  1.05em 0 0 0;}
h5, .h5-like {font-size: 1.2857em;font-weight: normal;line-height: 1.1667em;margin:  1.1667em 0 0 0;}
h6, .h6-like {font-size: 1.1429em;font-weight: normal;line-height: 1.3125em;margin:  1.3125em 0 0 0;}
.smaller {font-size: .7143em;line-height: 2.1em;}
.small {font-size: .8571em;line-height: 1.75em;}
.big { font-size: 1.1429em;line-height: 1.3125em;}
.bigger {font-size: 1.2857em;line-height: 1.1667em;}
.biggest {font-size: 1.4286em;line-height: 1.05em;}
/* soft reset */
html,body,textarea,figure,label {margin: 0;padding: 0;}
ul,ol {	padding-left: 2em;}
code,pre,samp {	white-space: pre-wrap;	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;}
code { line-height: 1em; }
table { margin-bottom: 1.5em; }
/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {margin-top: 0;}
/* avoid margins on nested elements */
li p,li ul,li ol {margin-top: 0;margin-bottom: 0;}
/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
/* max values */
img, table, td, blockquote, code, pre, textarea, input, video {	max-width: 100%;}
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;}
/* pictures */
img {vertical-align: middle;}
a img { border: 0; }
/* scripts */
body > script {display: none !important;}
/* skip-links */
.skip-links {position: absolute;}
.skip-links a {	position: absolute;left: -9999px;padding: 0.5em;background: #000;color:#fff;text-decoration: none;}
.skip-links a:focus {position: static;}
/*Fin BASE*/
*, *:before, *:after {  -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;  box-sizing: border-box;}
/* Layout */
html {display: flex; flex-direction: column;} /* IE fix */
body {display: flex;  flex-direction: column;}
.container{display: flex; flex-direction:column;min-height:100vh; }
.inside{display: flex;flex-direction: row; max-width: 768px;margin: auto;}
.wrapper {  flex: 1 1 auto;  display: flex;  flex-direction: row;  flex-wrap: wrap;  max-width: 768px;  margin: auto;}
.contenu_header{display: flex;flex-direction: row;flex: 1;align-items: center;}
.logo{flex-grow: 0;flex-shrink: 0;flex-basis: 25%;}
.content{ flex: 1;}
.connexion{position: relative;	top: auto;margin-left: auto;margin-top: 0.5em;}
/* Responsive */
@media only screen and (min-width: 768px) {/* tablettes et ordinateurs */}
@media only screen and (max-width: 767px) {/* smartphone */}
@media only screen and (max-width: 767px) and (orientation: portrait) {/* smartphone en mode portait */}

@media (max-width: 768px) {
    body {  min-height: 0; }
    nav{  width: auto; }
    .connexion {text-align: center !important;order: 1;margin-top: 0; }
    .contenu_header{padding: 0;flex-wrap: wrap;justify-content:flex-end;}
    .content {-ms-flex-preferred-size: auto; flex-basis: auto; width: 100%;}
    .wrapper { -webkit-box-orient: vertical;    -webkit-box-direction: normal; -ms-flex-direction: column;  flex-direction: column;  width: 100%; }
    .inside{flex-wrap: wrap;}
    .titre{	width: auto;margin: 0;padding: 0;  }
    .logo{margin-left: 40px;flex-basis: auto; }
    }
/* Decoration */
body {margin: 0;background: #fff;font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
.container{background-image: url(../Images/background.jpg);background-repeat: no-repeat;background-position: center 0px; background-size: cover;}
header, nav, section, footer {	margin: 0;color: #3c4858;}
header {background: #fff;border-bottom: 2px solid #e2eaf7;}
.inside{background-color: #fff;	color: #3c4858;}
.wrapper{background-color: #444;}
.logo{padding: 0 20px;}
.titre{white-space: nowrap;color: #013D92;font-variant: small-caps;}
.connexion .bouton{white-space: nowrap;}
/* Liens */
a {text-decoration: none;}
a:hover, a:focus, a:active{text-decoration:underline;}	
/* Navigation */
nav {background: orange;background: #FFF;}
nav a { display: block;  padding: .5em 1em;  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3);}
nav ul {  list-style: none;  padding-left: 0; }
nav .nav-item:not(:first-child) {  border-top: 1px solid BurlyWood;}
.nav-link {
  display: block;
  position: relative;
  padding: 0.5rem;
  border: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-decoration: none;
 }
.nav-link:focus {  outline: 0;  font-weight: bold;}
/* sub-nav and links */
.sub-nav { background: #fff;}
.sub-nav a { display: block;  padding: 0.2rem;  text-decoration: none;  color:#404040;}
.sub-nav a:hover,
.sub-nav a:focus {color: #0DA3E5;}
/* icon */
.nav-link:not(:only-child)::before,
.nav-link:not(:only-child)::after {
  content: "";
  position: absolute;
  top: 50%; 
  transform: translateY(-50%);
  width: 10px;
  height: 3px;
  background: #404040;
  transition: .25s;  /*will-change: transform, bottom, left, right;*/
}
.nav-link:not(:only-child)::before {  transform: rotate(-45deg); right: 1rem;}
.nav-link:not(:only-child)::after  {  transform: rotate(45deg);  right: calc(1rem + 5px);}
/* icon's animation */
/*.nav-link:not(:only-child):focus::before { transform: rotate(45deg) translateZ(0); }
.nav-link:not(:only-child):focus::after  { transform: rotate(-45deg) translateZ(0); }
/* hiding / showing sub-nav  */ 
/*.nav-link + * {  max-height: 20em;  overflow: hidden;  }
.nav-link:not(:only-child):focus + * {  max-height: 0; transition:  max-height .35s;}
.nav-link:not(:only-child):focus {pointer-events:none;}
.nav-link:not(:only-child):not(:focus) { pointer-events:auto }*/
.nav-link {color:#404040;font-weight: 600;}
.nav-link:hover{color: #0DA3E5 !important;}
/* Fin navigation */
section {background: #F3F3F3;padding: 10px;}
footer {background: #fff;text-align: center;border-top: 2px solid #e2eaf7;}
.bouton, input[type="submit"]{
	/*background-color: #0DA3E5;*/
	position: relative;
	display: inline-block;
	padding: .95rem 1.5rem;
	margin: .95rem;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	font-weight: 700;
	font-size: 1em;
	text-shadow: 0 -1px 1px rgba(0,0,0,.25);
	color: #fff;
	border: 0;
	border-radius: .5rem;
	white-space: normal;
}
.vert{	background-color: #abc738;}
.vert:focus,.vert:hover { background-color:#87a800;}
.bleu:hover{ background-color:#1d89b7;}
.bleu {background-color: #0DA3E5;}
.orange:hover{ background-color: darkorange;}
.orange {background-color: orange;}
.rouge{	background-color: #cc2600;/*display:block;text-align:center;*/}
.rouge:focus,.rouge:hover { background-color:#a51e00; }
/* Code David*/
/* 2- fluid inputs */
form div > p {display: flex;}
form input:not([type=submit]) {	flex: 1;display: block;	min-width: 0;}
/* 3- fluid textarea */
textarea {flex: 1;display: block;}
/* Decoration */
input,textarea,select {padding: .6em;	border: 1px solid #555;	border-radius: 3px;background: #FFF;}
input:focus,textarea:focus {outline: none;}
label {	margin-right: .5em;text-align: right;}
div:first-child p:first-child {	justify-content: flex-end;}
textarea {resize: vertical;color: #aaa;}
div > p:first-child {margin-top: 0;}
div > p:last-child {margin-bottom: 0;}
small {	font-size: 0.8rem;color: #aaa;}
/* small screens */
#error{	padding: .6em;border: 1px solid #cc2600;border-radius: 3px;background: #FFF;color: #cc2600;font-weight: bold;z-index: 110;margin: 5px; }
#error_vert{padding: .6em;border: 1px solid green;border-radius: 3px;background: #FFF;color: #009900;font-weight: bold;z-index: 110;margin: 5px; } 
h3{color: #666666;}    
h3:before { content: " »"; display: block; width: 10px; height: 10px;  float: left;  margin: 0 6px 0 0;}
/* Tableau */
.tablo{	border-collapse: collapse;}
.tablo tr {border-top: thin solid #333;}