@charset "UTF-8";
/* CSS Document */

/*********** Commun ***********/
body {
	margin-top: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	line-height: normal;
	background: #333; /* Couleur de fond */
	font-family: Verdana, Arial;
}

/*********** Config. Pages ***********/
/*********** Container principal ***********/
#container {
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	width: 1000px; /* Largeur globale du site */
	height: auto;
}

/*********** Cellule centrale ***********/
#contentbar {
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
}

/*********** Section haute ***********/
/*********** Top + pub ***********/
#top {
	/* Make it stick, even on scroll */
	position: -webkit-sticky;
	position: sticky;
	z-index: 15;
	top: 0px;
	height: auto; /* Hauteur du container Top */
	background-color: #FFFFFF;
}

#toppy {
	position: relative;
	top: 0px;
	height: 80px; /* Largeur Top */
}

#top-logo {
	position: absolute;
	top: 5px;
	left: 5px;
}

#top-logo a {
	padding: 0px;
	font-size: 0px;
	text-decoration: none;
}

#top-logo img{
	vertical-align: middle;
}

#titre {
	position: absolute;
	top: 10px;
	left: 80px;
}

#titre a {
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-size: 18px;
	font-weight: bold;
	color: #FF8727;
	text-decoration: none;
}

#pub {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 468px; /* En auto, s'adapte a la largeur du bandeau (pub-468 ici), mais collapse si bloqueur pub */
	height: 60px; /* En auto, s'adapte a la hauteur du bandeau (pub-468 ici), mais collapse si bloqueur pub */
}

#sociaux {
	position: absolute;
	top : 38px;
	left: 80px; /* Decalage gauche */
}

#sociaux a {
	margin: 0px;
	border: 0px;
	text-decoration: none;
}

/* Definition du sprite original pour les liens sociaux */
.sprite {
	background : url("https://wda-fr.org/pict/social-45.png") no-repeat;
	display: inline-block;
	height : 25px;
	width : 25px;
	max-width: 100%;
}

/* Decoupe des sprites */
/* Socials */
.fb { background-position : 0px -25px; }
.fb:hover,.fb:focus { background-position : 0px 0px; }
.twitter { background-position : -325px -25px; }
.twitter:hover,.twitter:focus { background-position : -325px 0px; }
.youtube { background-position : -75px -25px; }
.youtube:hover,.youtube:focus { background-position : -75px 0px; }
.flickr { background-position : -100px -25px; }
.flickr:hover,.flickr:focus { background-position : -100px 0px; }
.instagram { background-position : -125px -25px; }
.instagram:hover,.instagram:focus { background-position : -125px 0px; }
.pinterest { background-position : -150px -25px; }
.pinterest:hover,.pinterest:focus { background-position : -150px 0px; }
.rss { background-position : -175px -25px; }
.rss:hover,.rss:focus { background-position : -175px 0px; }
.discord { background-position : -200px -25px; }
.discord:hover,.discord:focus { background-position : -200px 0px; }
.bluesky { background-position : -300px -25px; }
.bluesky:hover,.bluesky:focus { background-position : -300px 0px; }
.mastodon { background-position : -250px -25px; }
.mastodon:hover,.mastodon:focus { background-position : -250px 0px; }
.threads { background-position : -275px -25px; }
.threads:hover,.threads:focus { background-position : -275px 0px; }

/* Encart Google */
#google {
	position: absolute;
	width: 290px; /* Largeur MAX du bloc de recherche */
	height: 30px!important;
	bottom: 0px;
	left: 5px;
}

/* Moteur de recherche */
.gsc-control-cse {
	width: 290px!important; /* Largeur totale */
	height: 30px!important;
	margin: 0px!important;
	padding: 0px!important;
	border: 0px!important;
}

.gsc-search-box {
	margin: 0px!important;
}

/*********** Section de contenu ***********/
/*********** Bloc compris dans la cellule centrale ***********/
#content {
	width: auto; /* Largeur des pages de contenu */
	margin: 35px 0px 0px 0px;
	padding: 0px 10px;
	font-size: 12px;
	background-color: #FFFFFF;
}

/*********** Menu de bas de page ***********/
#footer {
	display: block;
	width: auto;
	height: auto;
	z-index: 15;
	margin: 10px auto 0px auto;
	padding: 10px 5px;
	background: #FF8727;
	text-align: right;
	font-size: 11px;
	color: #FFFFFF;
}

#footer a {
	text-decoration: none;
}

#footer a:link, #footer a:visited {
	color: #FFFFFF;
}

#footer a:hover {
	color: #333;
}

#compteurtop {
	color: #FFFFFF;
	font-size: 10px;
}

/* Règles pour les écrans de taille moyenne */
@media screen and (max-width: 768px) {
	.sprite {
		transform: scale(0.8);
		margin-right: -5px;
	}
}