/* micro reset et décalage des puces de 10+10 */
* {
	box-sizing: border-box;
}
html, body, {
	padding: 0; margin: 0;
}
ul {
	padding: 10	; margin: 10;
}


/* Quelques styles de base dans le corps de page (body) */

body {  font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10pt; background-image: url(../backsouterweb.gif); font-weight: normal}
a:link {  color: #000099; text-decoration: underline; font-weight: bold}
a:visited {  color: #006600; font-weight: bold}
a:hover {  color: #7f0000; background-color: #a6f458; font-weight: bold}

/* css spécifique à la barre de menu fixe */

.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial;
font-size: 13px;
}

.menu li {
border: 0px solid #d40203;
margin: 0;
padding: 10;
display: inline-block;
width: 170px;
}

.menu li a {
border: 0px solid #FFFF00;
padding: 5px;
height: auto;
text-align: center;
display: block;
color: #800000;
background-color: #0A436D;
text-decoration: none;
}


/* css perso héritée de souterweb.css */
.menu a:hover {
background-color: #66FF33;
color: #CC0000;
} 
 
.fondblanc {
	background-color: #FFFFFF;
}

.souterweb-tabtitre {  font-family: "Comic Sans MS"!important; 
color: #000000!important; font-size: 12pt!important; 
background-image:  url(../backspeleo.gif)!important; 
text-align: center!important; 
vertical-align: middle!important; 
background-position: center!important
}

.souterweb-signature {  font-family: "Comic Sans MS"!important; 
font-size: 10pt!important; 
font-style: italic!important; 
font-weight: normal!important
}

.souterweb-tabpage {  font-family: "Comic Sans MS"!important;   
font-size: 10pt!important; 
bgcolor: #FFFFFF!important; 
background-image: url(../backsouterweb.gif)!important; 
background-color: #0A436D; text-decoration: none;
}

.unnamed1 {
	background-color: #FFFFFF;
}
 
.surligne {
	background-color: #FFFF66;
}

.main-header {
	color: #B13C2E;
	background: #FFF;
}

/* Les éléments de la abrre de menu sont placés l'un à côté de l'autre */
.header-inner {
	display: table;
	width: 100%;
	max-width: 2000px;
	margin: 0 auto; /* on centre l'élément */
	padding: 5px 5px; /* on ventile un peu */
}
.header-inner > * {
	display: table-cell;
	vertical-align: middle;
}

/* Alignement du menu */
.header-nav {
	font-family: "Arial"!important;
	text-align: center;
}
/*
   Faire passer le menu en inline (inline-block, inline-table ou inline-flex) pour le rendre sensible à l'alignement centré. Ses items aussi sont en inline.
*/
.header-nav ul,
.header-nav li {
	display: inline;
	list-style: none;
}
.header-nav a {
	position: relative;
	display: inline-block;
	padding: 8px 8px;
	vertical-align: middle;
	font-weight: 580; /* entre regular et light */
	letter-spacing: 0.018em;
	color: #80000;
	text-decoration: none;
	font-size: 0.95em;
}

/* Animation du lien, début */
.header-nav a:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 20px;
	left: 8px;
	height: 2px;
	background-color: #B13C2E;
	opacity: 0;
	transform: translateY(5px);
	transition: all;
	top: 12px;
.4s;

/* Je vire outline car juste au-dessus je définis un style :focus : fin de l'animation */
.header-nav a:focus {
	outline: none;
}

.nav-is-stuck .main-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	animation: stickAnim .3s;
}
 
@keyframes stickAnim {
	0% {
		transform: translateY(-86px);
	}
	100% {
		transform: translateY(0);
	}
}