/* skin etchas (d'après transparence18 de https://demoskins.71site.fr/ ) */
/* Jean-Denis : https://adhoc.71site.fr/ première édition juin 2021, révision juillet 2021 */

/* déclaration des polices de caractères */
@font-face {
	font-family: 'Open Sans';
	src: url(fonts/OpenSans-Light.woff) format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Lato';
	src: url(fonts/Lato-Bold.woff) format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'etchas';
	src: url(fonts/etchas.woff) format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'fontawesome';
	src: url(fonts/fontawesome.woff) format('woff');
	font-weight: normal;
	font-style: normal;
}

/* HTML */
* {
	margin: 0;
	padding: 0;
	border: 0px none;
	outline: 0px none;
	vertical-align: baseline;
	box-sizing: border-box;
}

/* HTML */
/* Attributs généraux de la page */
html {
	background: transparent; /*couleur fond*/
}
body { /*corps de la page*/
	font-family: 'Open Sans';
	color: #FFF;
	background: url(img/fond.jpg)no-repeat bottom fixed; /*image de fond*/
	background-size:100%;
	height: 100%;
	line-height:normal;
}
h1 { /*Titre 1*/
	font-family: 'Open Sans';
	font-weight: bold;
	font-size: 260%;
	line-height: 210%
}
h2 { /*Titre 2*/
	font-size: 110%;
	color: #FEE9BE;
	margin-top: 10px;
}
h3 { /*Titre 3*/
	margin-top: 10px;
	font-size: 24px;
}
a, a:visited { /*liens, liens visités*/
	text-decoration: none;
	color: #00FF40;
}
a:hover { /*liens survolés*/
	color: #FFFF00;
}
ul { /*attributs puce des listes*/
	list-style: outside none disc;
	text-align: left;
}
li { /*attributs item listes*/
	margin-left: 18px;
}
img {max-width:100%; height:auto}
hr { /*ligne horizontale*/
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin: 16px 0;
}

/* Tables */
td {padding: 5px;}

/* Forms */ /* Formulaires */
form h3 { /*Titre 3*/
	margin-top: 28px;
	color: #FFCC40;
	border-bottom: solid 4px #FFCC40;
	font-size:20px;
	padding-left:5px;
	font-weight:bold;
} 

fieldset {margin-top: 20px;}
label {margin-top: 22px;color:#FFF;} /*titre des champs de formulaire*/
label span {font-size: 14px; color: #4C390F; float: right;background:#fff;padding:0 5px;border-radius:4px;} /*commentaires des champs de formulaire*/
label span::before {content:'('}
label span::after {content:')'}
fieldset .field {width:100%}
.search-form {padding-top:10px;}
.field { /*champs des formulaires*/
	padding: 9px 12px;
	border:1px solid #511D00;
	margin-bottom: 14px;
	font-size: 105%;
	min-height:42px;
	border-radius: 6px;
	background:rgba(81, 29, 0, .6); /*#511D00*/
	color:#FFF;
}
.field:focus {
	background:rgba(81, 29, 0, .9); /*#511D00*/
}
.block {
	width: 100%;
	min-width: initial !important;
}
/* Form 2 columns - adHoc 0.61 */ 
fieldset.col-2 {display:grid; grid-template-columns: 48% 48%; grid-gap:4%}
fieldset.col-2 label {margin-top: 0;}
fieldset.col-2 .span-2 {grid-column: 1 / span 2;} /*end Form 2 columns */

textarea {resize:none;}
button, .btn, a.btn , form p a { /*boutons des formulaires*/
	margin : 0;
	border:1px solid #511D00;
	background:rgba(210, 149, 34, .8); /*#D29522*/
	color: #fff;
	font-family : inherit;
	font-size : 110%;
	cursor : pointer;
	padding: 8px 12px;
	min-width: 90px;
	text-align:center;
	border-radius: 6px;
}
form p {text-indent:20px;}
button:hover, .btn:hover, form p a:hover { /*boutons des formulaires au survol*/
	border:1px solid #511D00;
	background:rgba(255, 255, 255, .8); /*#FFF*/
	color:#511D00;
}
.btn-group {
	margin: 16px auto;
	white-space: nowrap;
	text-align: center;
	display: inline-block;
	width: 100%;
}
.btn:first-child {float: left;}
.btn:last-child {float: right;}
.btn-outline {}
.btn-big {padding: 5px;}
.btn-med {min-width: 90px;padding: 6px 10px;}
.btn-sml {padding: 1px;}

input[type=checkbox] {
	display:none;
}
label + input[type="checkbox"] { /*bouton à cocher*/
	background-image:url(img/chkbx.png); /*image chkbx.png à changer, à renommer !!garder ses dimensions!! */
}

input[type="checkbox"] + label {
	padding-left: 50px;
	height: 30px;
	display: inline-block;
	line-height: 25px;
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;
	background-image:url(img/chkbx.png); /*image chkbx.png à changer, à renommer !!garder ses dimensions!! */
	margin-top:12px;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;

}
input[type=checkbox]:checked + label {
	background-position: 0 -30px;
}

input.field::placeholder {color:#A8A8A8;} /*couleur suggestions*/
.infoform { /*pavé information des formulaires*/
	font-size:85%;
	color:#FFF;
	margin:8px 0 !important;
	padding:12px 8px;
	background:rgba(30,72,17,.8); /*#1E4811*/
	border-radius:6px;
	border:1px solid #511D00;

}
label.block p {color:#FFF;}

/* glyphs 64 */ /*icône user*/
.glyph64 {
	height: 78px;
	width: 78px;
	padding: 4px;
	border:4px double #511D00;
	background:rgba(30,72,17,.8); /*#1E4811*/
	margin-right: 14px;
	float: left;
}

/* grid */ /*Grille d'affichage : largeurs en % (!!mieux vaut ne pas modifier!!)*/
.w12 {
	width: 48%;
	float: left;
	margin-left: 4%;
}
.w13 {
	width: 30.6%;
	float: left;
	margin-left: 4.1%;
}
.w23 {
	width: 65.3%;
	float: left;
	margin-left: 4.1%;
}
.w14 {
	width: 22.75%;
	float: left;
	margin-left: 3%;
}
.w24 {
	width: 48.5%;
	float: left;
	margin-left: 3%;
}
.w34 {
	width: 74.25%;
	float: left;
	margin-left: 3%;
}
.w45 {
	width: 79.5%;
	float: left;
	margin-left: 2.5%;
}
.w35 {
	width: 59%;
	float: left;
	margin-left: 2.5%;
}
.w25 {
	width: 38.5%;
	float: left;
	margin-left: 2.5%;
}
.w15 {
	width: 18%;
	float: left;
	margin-left: 2.5%;
}
.w11,
.w22,
.w33,
.w44,
.w55 {
	width: 100%;
	float: none;
	margin: 0;
	clear:both;
}

/* !!!ATTENTION!!! Pour cette skin particulière : ces règles modifient les largeurs d'affichage des pages _index et _default */
/*largeur totale : 78% + 1% + 21% = 100% */
/*******************************************/
div#SideBar0.w15 { /*_index et _default*/
	width: 21%;
	float: left;
	margin-left: 1%;
}
div#Main.w45 { /*_index */
	width: 78%;
	float: left;
	margin-left: 0%;
}
div#main-content.w45 { /*_default */
	width: 78%;
	float: left;
	margin-left: 0%;
}

/* General Styles */
.nowrap {white-space: nowrap;}
.evidence { /*mise en évidence des résultats de recherche*/
	background: #802D00;
	font-weight: 600;
	padding: 0 4px;
}
.occurrence { /*nombre d'occurrences de la recherche*/
	background : #FEE9BE;
	color : #802D00;
	font-weight: 600;
	margin : 0 4px;
}
.quick-links { /*liens rapides de l'éditeur Popline*/
	display: none;
	text-align: right;
	background: #555;
	height: 34px;
	margin-top: 6px;
	padding: 4px 12px 0 0;
	margin: 6px 1px 0 1px!important;
	font-weight:initial;
	font-size:10px;
	color: #fff;
}
.quick-links img, .quick-links a img {
	padding: 1px;
	height:20px;
	width:20px;
	cursor:pointer;
	background: #fff;
	margin: 2px 4px 0 2px;
}	
.quick-links img:hover, .quick-links a:hover img {
	height:22px;
	width:22px;
	margin: 0 2px 0 2px;
}

/* Container */
#container { /*Contenu général*/
	width: 100%;
	min-height: calc(100% - 30px);
	margin: auto;
	overflow: hidden;
	background: transparent;
}
.wrapper { /*Contenu de chaque partie de #container*/
	max-width: 1280px;
	margin: auto;
	clear:both;
	overflow:hidden;
}
.wrapper div:first-child { /*ne pas supprimer mais adapter chaque wrapper au besoin...*/
	margin-left: 0;
}

/* Header */
#header {background: transparent;}
/* Header général : réglages des 3 sections du Header */
#head-top div.wrapper div {
	float:right;
	color:#fff;
}
#head-mid div.wrapper div {
	float:left;
	margin-top:0px;
	margin-bottom:-10px;
}
#head-btm div.wrapper div {
	float:right;
	color:#fff;
	margin-bottom:0px;
}


/* Header elements */
#logo { /* placement logo à droite en head-mid */
	float: right; /*à droite*/
	height: 220px; /*hauteur à régler*/
	margin-left:30px;
}
#logo img {padding: 0 10px;}
#site_title {
	color: #fff;
	text-shadow: 2px 2px 0px #1E4811;
	height: 80px;
	padding: 5px 50px 0 5px;
}
#site_title h1 {
	font-family: 'etchas';
	font-weight: normal;
	font-size: 380%;
	line-height: 120%;
}
#site_slogan {
	font-family: 'Open Sans';
	font-weight: bold;
	font-size: 140%;
	line-height: 110%;
	color: #fff;
	text-shadow: 1px 1px 0px #1E4811;
	margin: 0;
	padding:30px 0 0 0;
}
#date {
	width: 100%;
	padding: 5px;
	text-align: left;
	float: right;
}
/* !!! ATTENTION !!! dans cette skin le user-panel est à régler mais la boite recherche avec son drapeau et le login sont séparés */
/* user-panel à droite en head-mid et Login à droite en head-btm */
#user-panel{ /*panneau utilisateur : contient boite recherche header et login*/
	/*float: right !important;*/
	margin: -60px 5px 40px 0; /*à ajuster pour position Login*/
	padding:15px 0 0 0;
	height: 30px;
}
#head-mid div.wrapper div #login {display:none;} /*!ATTENTION! dans cette section, permet d'afficher le user-panel sans Login (pour placer celui-ci ailleurs)*/
#src-head { /*boite recherche header*/
	/*float: right !important;*/
	margin-left: 350px;
	margin-right: 20px;
	margin-top: 20px !important;
	border: solid 0px #fff;
	height:30px;
	background: transparent;
}
#search { /*champ texte recherche*/
	vertical-align:text-top;
	height:30px;
	border: none;
	border-radius:6px;
	padding-left:5px;
	border:1px solid #1E4811;
}
input#search::placeholder {color:#A8A8A8;} /*couleur suggestion champ texte recherche*/
input#nwslmail.field.block::placeholder {color:#000;} /*couleur suggestion champ texte newsletter si utilisé*/
#src-head form input[type=submit] { /*zone lien icône recherche*/
	background:none;
	height: 30px;
	width:30px;
	vertical-align:text-top;
}
#src-head::after { /*icône recherche*/
	font-family: "fontawesome";
	content: "\f002";
	font-size: 26px;
	color:#FFF;
	text-shadow: 1px 1px 0px #1E4811;
	margin-right:0px;
	margin-top:-28px;
	float: right !important;
}
#src-head:hover::after { /*icône recherche au survol*/
	color:#C5141D;
	text-shadow: 1px 1px 0px #FFF;
}
#login {
	float:right;
	margin-top:-2px;
}
a#login-btn { /*lien bouton login*/
	font: normal 24px 'etchas';
	color: #000;
	background: rgba(255, 255, 255, 0.8); /*#FFF*/
	border: 1px solid #59484E;
	border-radius: 4px;
	padding: 2px 15px;
}
a#login-btn:hover { /*lien bouton login au survol*/
	color:#FFF;
	text-decoration:none;
	background: url(img/fond-onglet.png)no-repeat, linear-gradient( to left, rgba( 0, 0, 0, 0.2)0%, rgba( 0, 0, 0, 0.6)40%, rgba( 0, 0, 0, 0.9)100%); /*#000*/
}
#SwitchLang { /*zone lien drapeau langue*/
	margin: 25px 10px 0 0px !important;
	text-align: center;
	width: 40px;
}
#flags-panel { /*panneau drapeaux langues*/
	position: absolute;
	margin-top:10px !important;
	border-radius: 3px;
	color: white;
	display: none;
	background:#333;
	width: 40px;
	padding: 10px;
	z-index: 20;
}
#flags-panel img {
	padding-top: 10px;
}

/* menu bar*/
#menu-bar { /* !!!ATTENTION!!! menu-bar à gauche du Login en head-btm */
	font: normal 24px 'etchas';
	margin-top:7px;
	margin-left:0px;
}
ul#menu li {
	float: left;
	width:auto; /*dimensions auto pour items menu-bar*/
	height:30px;
	margin:7px 10px;
	text-align: center;
}
ul#menu li:hover { /*rien ici pour cette skin*/ }
#menu-bar li a {
	color: #000;
	background: rgba(255, 255, 255, 0.8); /*#FFF*/
	border: 1px solid #59484E;
	border-radius: 4px;
	line-height: 100%;
	padding: 2px 15px;
	position:relative;
	top:-2px;
	text-align: center;
}
#menu-bar li a:hover {
	color:#FFF;
	text-decoration:none;
	background: url(img/fond-onglet.png)no-repeat, linear-gradient( to left, rgba( 0, 0, 0, 0.2)0%, rgba( 0, 0, 0, 0.6)40%, rgba( 0, 0, 0, 0.9)100%); /*#000*/
}
#navmob-btn {display:none} /*bouton mobile désactivé*/

/* Sections horizontales à compléter par vos propres sections :*/
/* déclarées dans skin.dbt et placées dans _index.inc et/ou _default.inc */
/* nombre illimité, noms à votre convenance, par exemple : */
/* #UpTab1 #UpTab2... #DownTab1 #DownTab2... */
/* Il sera possible de préciser les boites de ces sections avec leurs indices de 0 à 4 */
/* par exemple : #UpTab1-0 #Uptab1-1 ... (titres et corps des boites également) */
#HeroUnit {
	padding: 20px 5px;
	font-size: 180%;
	color: #fff;
	background: transparent;
	margin: 0 auto;
}
#HeroUnit .wrapper { /*règle spécifique pour cette section*/
	padding:20px 10px;
}
#HeroUnit .lbox { /* boites de cette section */
	background: linear-gradient( to bottom, rgba(81,29,0,0.3)0%, rgba(81,29,0,0.5)40%, rgba(81,29,0,0.7)100%); /*#511D00*/
	border:none;
	color:#fff;
	border-radius:6px;
}
#UpTab, #DownTab {
	text-align: center;
	font-weight: bold;
	font-size: 90%;
	color: #fff;
	padding-bottom: 15px;
}
#DownTab {
	background: rgba(255, 255, 255, .5);
	max-width: 1296px;
	margin:0 auto; 
}
#UpTab .lbox, #DownTab .lbox { /* boites de ces sections */
	background: linear-gradient( to bottom, rgba(175,149,104,0.4)0%, rgba(175,149,104,0.6)40%, rgba(175,149,104,0.8)100%); /*#AF9568*/
}
#UpTab .ltit, #DownTab .ltit { /* titre boites de cette section */
	text-align: center;
	border-top-left-radius: 400px 60px;
	border-top-right-radius: 400px 60px;
}
/* Colonnes latérales */
#SideBar0 {
	padding:6px; /*à adapter*/
	color:#fff;
	margin-top:20px;
	background: transparent;
}

.clearfix {clear: both;height:30px}

/* Page */
#Main { /*section verticale principale page _index*/
	margin-top:20px;
	padding:6px; /*à adapter*/
	color:#fff;
	background: transparent;

}
#Main .ltit { /*titre section verticale principale page _index*/
	color: #FFF;
	background: url(img/fond-titre.png)no-repeat, linear-gradient( to right, rgba(128,45,0,0.1)0%, rgba(128,45,0,0.5)40%, rgba(128,45,0,0.9)100%); /*#802D00*/
	border-radius:0 20px 0 0;
	border-top-left-radius: 500px 70px;
	border-bottom: 4px double #4C390F;
	text-align:center;
}
#Main .lbox { /*Corps boite section verticale principale page _index*/
	background: linear-gradient( to bottom, rgba(81,29,0,0.3)0%, rgba(81,29,0,0.5)40%, rgba(81,29,0,0.7)100%); /*#511D00*/
}
#main-content { /*section verticale principale page _default*/
	margin-top:20px;
	padding:6px; /*à adapter*/
	color:#fff;
	background: transparent;

}
#page { /*insertion deux images en filigrane : positions à régler...*/
	background: url(img/boussole.png)no-repeat 5% 0%, url(img/co.png)no-repeat 70% 40px, linear-gradient( to bottom, rgba(255,255,255,1)0%, rgba(255,255,255,0.7)5%, rgba(255,255,255,0.5)7%);
	max-width: 1296px;
	margin:0 auto;
	border-radius: 6px 6px 0 0;
}

.cbox, .lbox { /*Corps boite principale // Corps boites latérales et sections horizontales*/
	display: inline-block;
	width:100%;
	border-radius: 0 0 4px 4px;
	padding:10px;
	margin-top:0px;
	background: linear-gradient( to bottom, rgba(81,29,0,0.3)0%, rgba(81,29,0,0.5)40%, rgba(81,29,0,0.7)100%); /*#511D00*/
}
.lbox { /*Corps boites latérales et sections horizontales*/
	background: linear-gradient( to bottom, rgba(175,149,104,0.4)0%, rgba(175,149,104,0.6)40%, rgba(175,149,104,0.8)100%); /*#AF9568*/
}
.cbox p {margin-bottom:10px;}

.lbox ul, .lbox p, .lbox div {padding-bottom:10px;}
.ctit { /*Titre boite principale*/
	color: #FFF;
	font-family: etchas;
	font-weight:normal;
	text-align:center;
	background: url(img/fond-titre.png)no-repeat, linear-gradient( to right, rgba(128,45,0,0.1)0%, rgba(128,45,0,0.5)40%, rgba(128,45,0,0.9)100%); /*#802D00*/
	border-radius:0 20px 0 0;
	border-top-left-radius: 500px 70px;
	border-bottom: 4px double #4C390F;
	margin: 0px 0px;
}
h2.ctit, .ctit {
	font-size: 34px;
	padding: 0px 20px;
}

/* side boxes */
.box { /*boites latérales et sections horizontales*/
	margin-top:0px; /*marges extérieures hautes*/
	margin-bottom:15px; /*marges extérieures basses*/
}
.ltit { /*Titre boites latérales et sections horizontales*/
	font-family: etchas;
	font-size: 34px;
	font-weight:normal;
	color: #FFF;
	background: url(img/fond-titre2.png)no-repeat, linear-gradient( to left, rgba(210,149,34,0.1)0%, rgba(210,149,34,0.5)40%, rgba(210,149,34,0.9)100%); /*#D29522*/
	border-radius:20px 0 0 0;
	border-top-right-radius: 500px 70px;
	border-bottom: 4px double #4C390F;
	margin: 0px 0px;
	padding: 0px 20px;
	text-align:left;
}

/* side menus */ /*Boites menu latérales*/
.catitem, .rubr { /*catégories*/
	font-family: Lato;
	font-size:110%;
	background: transparent;
	padding:10px 5px;
}
ul.item {list-style: outside none none;}
li.item { /*item : nom des pages*/
	padding: 6px 18px;
	border-bottom: dotted 1px #511D00;
	font-size: 90%;
	font-weight: bold;
	margin:0;
}

.item a {display:block}
.mark-cat.active::before { /*icône catégorie active : "menu Liste Catégories"*/
	font-family: "fontawesome";
	font-size:120%;
	content: "\f0da";
	padding-right:10px;
}
.mark-item.active::before { /*icône page affichée*/
	font-family: "fontawesome";
	font-size:120%;
	content: "\f0da";
	padding-right:10px;
}
.mark-cat.open::after { /*icône pour catégorie à ouvrir : "menu Liste Dynamique1"*/
	font-family: "fontawesome";
	font-size:130%;
	content: "\f061";
	color:#00FF40;
	padding-right:10px;
}
.mark-cat.open:hover::after { /*icône au survol pour catégorie à ouvrir : "menu Liste Dynamique1"*/
	color:#FFFF00;
}
.mark-cat.close::before { /*icône pour catégorie à fermer : "menu Liste Dynamique1"*/
	font-family: "fontawesome";
	font-size:130%;
	content: "\f068";
	color:#C5141D;
	padding-right:10px;
}
.active {
	color:#C5141D;
}

/* Footer */
#footer {
	background: rgba(255, 255, 255, .5);
	max-width: 1296px;
	margin:0 auto; 
	color: #FFF;
	font-size: 100%;
}
#footer .ltit { /* titre boites de cette section */
	text-align: center;
	border-top-left-radius: 700px 70px;
	border-top-right-radius: 700px 70px;
}

/* Il sera possible de préciser plus les boites de cette section avec leurs indices de 0 à 4 */
/* par exemple : #foot-box-0 #foot-box-1 ... (titres et corps des boites également) */
#foot-box-0, #foot-box-1, #foot-box-2, #foot-box-3, #foot-box-4 {font-size: 100%;}

/* Info-footer */
#info-footer { /*section pied de page : liens skinneur et adHoc*/
	background: #000;
	color: #fff;
	height: auto;
	font-size: 75%;
	padding-bottom:5px;
}
#info-footer a {color:#00FF40;}
#info-footer a:hover {color:#FFFF00;}
#info-footer .wrapper {max-width: 96%;}
#info-footer div {min-height: 3px; padding-top: 4px; color: #fff;}
#skin-author {text-align:left;}
#gen-time {text-align: center;}
#adHoc-link {text-align: right;}

/* Pagination */
ul.pager {
	text-align: center;
	color: #fff;
	list-style: none;
	padding-bottom:10px;
	/*display:none;*/ /*pour ne pas l'afficher du tout*/
}
.pager li,
.pagernext,
.pagerprev { /*3 boutons*/
	padding: 8px;
	border-radius: 6px;
	display: inline-block;
	margin: 0;
}
.pager li { /*bouton central*/
	background: rgba(128,45,0,.8); /*#802D00*/
	border:1px solid #802D00;
}
.pagernext,
.pagerprev { /*boutons précédent // suivant*/
	background:rgba(0,0,0,.3) !important;
	border:1px solid #802D00 !important;
	color: #777;
	float: right;
}
.pagernext a,
.pagerprev a { /*liens*/ /*s'il est nécessaire de personnaliser*/
	color: #00FF40;
}
.pagernext a:hover,
.pagerprev a:hover { /*liens survolés*/ /*s'il est nécessaire de personnaliser*/
	color: #FFFF00;
}
.pagerprev {
	float: left;
	padding-left: 0;
}

/* Permalien+ */
.noprint { /*liens en bas de page*/
	padding-bottom:10px;
	/*display:none;*/ /*pour ne pas les afficher du tout*/
}
#pginfo { /*pavé info*/
	background: rgba(0,0,0,.5); /*#000*/
	border: solid 1px #000;
	border-radius: 6px;
	color: #fff;
	padding: 12px;
}

/* Pages */
nav #pg-idx h2{font-weight: bold;}
/*boutons de défilement si "menu Liste Catégories"  deux solutions au choix : */
/*solution avec icônes police FontAwesome... que vous pouvez adapter...*/
.btn-scroll-up, .btn-scroll-down { 
	cursor:pointer;
	height: 60px;
	width: 60px;
}
.btn-scroll-up {margin:0 0 20px 80px;}
.btn-scroll-down {margin:-40px 0 0 80px;padding-bottom:80px;}
.btn-scroll-up::after, .btn-scroll-down::after {
	font-family: "fontawesome";
	font-size:600%;
	color:#00FF40;
}
.btn-scroll-up::after {content: "\f0d8";}
.btn-scroll-down::after {content: "\f0d7";}
.btn-scroll-up:hover::after, .btn-scroll-down:hover::after {
	color:#FFFF00;
}

/*ou solution "classique" avec "bordures triangles"*/
/**********************************
.btn-scroll-up, .btn-scroll-down {
	margin-left:80px;
	cursor:pointer;
	width: 0;
	height: 0;
	border: solid 30px transparent;
}
.btn-scroll-up{border-bottom: solid 15px #00FF40;}
.btn-scroll-up:hover {border-bottom: solid 15px #FFFF00;}
.btn-scroll-down{border-top: solid 15px #00FF40;}
.btn-scroll-down:hover {border-top: solid 15px #FFFF00;}
**********************************/

.pg-inside-menu p {
	display:block;
	padding: 0 22px;
}

/*Info nouveauté et MAJ (texte ou image)*/
.label-new, .label-upd {font: status-bar; float:right; padding: 0 8px; font-size:10px;text-shadow:initial}
.label-new {color: #8080FF;}
.label-upd {color: #00FFFF;}
.img-new, .img-upd {float:right; padding: 6px;}
.pg-inside-menu .img-new, 
.pg-inside-menu .img-upd, 
h4 .img-new, 
h4 .img-upd {float:none; padding: 0 8px; }
.pg-inside-menu span.label-new,
.pg-inside-menu span.label-upd,
h4 span.label-new, 
h4 span.label-upd {float:none; vertical-align:super; padding: 0 8px; }


/* Messages d'infos et d'erreur : affichage public */
.message{padding: 6px; margin-top: 22px; color:#fff}
.info{background:#2D90FF;}
.warning{background:#D90000;}

/*Panneau coulissant latéral*/
.show-side-panel { /*onglet*/
	position: fixed;
	top: 50%;
	right: 0px;
	width: 20px;
	height: 120px;
	border: solid 20px transparent;
	border-right-color: #eee;
	z-index: 100;
}
.user-side-panel { /*panneau*/
	position: fixed;
	top: 0px;
	right: -220px;
	z-index: 100;
	background: #eee none repeat scroll 0% 0%;
	width: 220px;
	height: 100%;
	text-align: center;
	font-family: Lato;
	font-size: 90%;
}
.user-side-panel p {
	padding: 10px;
	clear: both;
}

/* goTop Link */
.goTop {
	background: url(img/goTop.png); /*image goTop.png à placer ou à changer*/
	height: 48px;
	width: 48px;
	position: fixed;
	right: 2%;
	bottom: 10%;
	opacity: 0.8;
	cursor: pointer;
	z-index:20;
}
.goTop:hover {opacity: 1;scale:1.2;}

/* Règles spécifiques pour tablettes et smartphones */ /* mobile */
/* Eviter de modifier les % : ils sont prévus pour afficher le site en une seule colonne à 100% */
@media screen and (max-width: 1024px) {.wrapper{width:96%}}
@media screen and (min-width: 901px) {#menu{display:inline-block !important}}
@media screen and (max-width: 900px) {
body { /*corps de la page*/
	background: url(img/fond.jpg)no-repeat top fixed; /*image de fond*/
}
img {max-width: 98%; margin: 5px 2px; clear:both}
.wrapper{width:100%} /*Contenu de chaque partie de #container*/
#SideBar0 {margin-top:10px;}
#foot-box-0 .lbox, #foot-box-1 .lbox, #foot-box-2 .lbox, #foot-box-3 .lbox, #foot-box-4 .lbox { /*permet un affichage correct du corps des boîtes footer*/
	display: inline-block;
	padding-bottom: 2px; /*à adapter*/
	margin-bottom: 5px; /*à adapter*/
}

/* grid */ /*Grille d'affichage : largeurs en % */
.w11, .w12, .w13, .w14, .w15, .w22, .w23, .w24, .w25, .w33, .w34, .w35, .w44, .w45, .w55 {
	width: 98%;
	float: left;
	margin-left:1% !important;
}

div#SideBar0.w15,
div#Main.w45,
div#main-content.w45 { /*Rectifications nécessaires pour cette skin particulière*/
	width: 98%;
	float: left;
	margin-left: 1% !important;
}

/* Header */
#header{margin-top: 50px;} /*important pour fixer le #user-panel */
#head-top div.wrapper div {
	float:right;
}
#head-mid div.wrapper div {
	float:left;
}
#head-btm div.wrapper div {
	float:left;
}
/*panneau utilisateur : contient #navmob-btn et #login*/
#user-panel {
	position: fixed;
	margin: 0;
	margin-top:-15px !important;
	top: 13px;
	right: 20px;
	z-index: 20;
}
#SwitchLang { /*zone lien drapeau langue*/
	position: fixed;
	padding:0;
	margin:0;
	top: -10px;
	left:100px;
}
#login {float:right !important; margin-top:-2px !important;}

/* Logo si activé */
#logo {
	/*display:none;*/ /*ôter commentaire pour désactivation logo*/
	width:100%;
	margin:4px 0;
	padding-left:40px;
}

/* menu bar*/
#menu-bar { 
	top: 0px;
	left:0px;
	position: fixed;
	width: 100% !important;
	margin-top:0;
	margin-left:0;
	background: #802D00;
	z-index: 10;
}
#navmob-btn { /*bouton menu mobile*/
	display: block;
	margin: 10px 12px !important;
	border: 1px solid #c0c0c0;
	float: left;
	color: #c0c0c0;
}
#navmob-btn p {padding: 2px 12px; font-weight:normal}
#navmob-btn span { /*3 lignes au centre du bouton*/
	width: 20px;
	background: #c0c0c0 none repeat scroll 0% 0%;
	display: block;
	height: 2px;
	margin: 5px 10px;
}
ul#menu {
	padding-top:10px;
	display: none;
	background:transparent;
	clear:both;
}
ul#menu li {
	float:none;margin:10px 10%;
}
ul#menu li a {width:100%;}
#menu-bar a {
	margin: -5px auto 5px;
}

/* Page */
#page {
	background: url(img/boussole.png)no-repeat 50% 70px, linear-gradient( to bottom, rgba(255,255,255,1)0%, rgba(255,255,255,0.7)5%, rgba(255,255,255,0.5)7%);
	margin:0 auto;
}
#Main .ltit, .ctit {background-size:auto 100%;height:auto;text-align:right;}
.ltit, #UpTab .ltit, #DownTab .ltit, #footer .ltit {background-size:auto 100%;height:auto;}
/* Pagination */
ul.pager {padding-bottom: 20px;}
ul.pager li {display: none;} /*désactivation bouton central*/
li.pagerprev, li.pagernext {display: block !important;}

/* Permalien+ */
.noprint { /*liens en bas de page*/
	margin-top:20px;
	font-size:100% !important;
}
#pginfo { /*pavé info*/
	font-size:90%;
	padding: 10px;
	width:60%;
}

/*images dans les boites*/
.lbox img {clear:both;margin:auto!important;max-width:100%;}

/* Form 2 columns - adHoc 0.61 */ 
fieldset.col-2 {display:block;}

}

@media screen and (max-width: 480px) { 
#logo {/*display:none;*/} /*ôter commentaire pour désactivation logo*/
#site_title{width:initial;padding:5px 20px;}
#site_title h1 {line-height: 100%;font-size: 330%;}
#site_slogan{display:none;} /*désactivation slogan*/
#src-head{display:none;} /*désactivation boite recherche header*/
#HeroUnit {padding: 40px 10px;}
#HeroUnit .wrapper {padding: 20px 10px;} /*cadre spécifique pour cette section*/

}

@media print { /*impression*/

#header, #SideBar1, .show-side-panel, #footer, #info-footer {display:none} /*désactivation*/
/* grid */ /*Grille d'impression : largeurs en % */
.w12,.w13,.w23,.w14,.w24,.w34,.w45,.w35,.w25,.w15,.w11,.w22,.w33,.w44,.w55 {
	width: 100%;
	float: none;
	margin: 0;
}

div#SideBar0.w15,
div#Main.w45,
div#main-content.w45 { /*Rectifications nécessaires pour cette skin particulière*/
	width: 100%;
	float: none;
	margin: 0;
}

}
