/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* scrollbar */
html::-webkit-scrollbar {background-color: #624831;}
html::-webkit-scrollbar-thumb {background: #333;}
html {scrollbar-color: #333 #624831;}

body {
  font-family:"Open Sans","Droid Sans","Verdana",sans serif;
  color:#fff;
}

.nofont {font:0/0 a;}
.nettoyeur {clear:both;}
.left {text-align:left;}
.centre, .center {text-align:center;}
.right {text-align:right;}
.container {max-width:900px;margin:auto;}

/*--
░█▄█░█▀▀░█▀█░█░█░░░█▀▄░█▀█░█▀▄
░█░█░█▀▀░█░█░█░█░░░█▀▄░█▀█░█▀▄
░▀░▀░▀▀▀░▀░▀░▀▀▀░░░▀▀░░▀░▀░▀░▀ 
--*/

/* à factoriser ! */

@media only screen and (max-width: 1299px) {
.optional {display:none;}
#menuBar {
	width:100%;height:106px;
	border-bottom:1px solid #000;
	background:linear-gradient(to top, #222, #333);
	font-size:14px;
	line-height:50px;
	position:absolute;top:0;left:0;z-index:100;
}

/* Menu téléphones */
@media (max-width: 599px) {
#extraMenu, .sous {display:none;}

#mainMenu {
  display:block;height:50px;
  position:absolute;top:5px;left:0;
  list-style:outside none none;
  margin:0;padding:0;
}
#extraMenu {
  display:block;height:50px;
  position:absolute;top:5px;right:130px;
  list-style:outside none none;
  margin:0;padding:0;
}
#mainMenu > li, #extraMenu > li {display:none;}

#headerHome {display:block !important;width:200px !important;}
#headerHome  a {display:block !important;height:50px;background:url(ico1.png) no-repeat 10px 0;opacity:0.9;border:none !important;}
#headerHome  a:hover {background:url(ico1.png) no-repeat 10px 0;opacity:1}

#headerShop {
  display:block !important;
  position:absolute;top:0;left:0;
}
#headerShop a {
  display:block;text-decoration:none;
  padding-left:50px !important;width:60px;background:url(ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}

#headerSearch {position:absolute;top:55px;left:10px;right:60px;margin:8px 0;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:90%;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
@media (max-width: 370px) {#headerSearch input {width:85%;}}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}

}

/* Menu petits ordis, tablettes */

@media (min-width: 600px) {
#menuBarContainer{position:relative;width:590px;margin:auto;}

#mainMenu {
  display:block;height:50px;
  position:absolute;top:55px;left:-50px;
  list-style:outside none none;
  margin:0;
}
#extraMenu {
  display:block;height:50px;width:150px;text-align:center;
  position:absolute;top:55px;left:400px;
  list-style:outside none none;
  margin:0;}
#mainMenu > li {float:left;width:150px;text-align:center;}
#mainMenu > li > a, #mainMenu li > a:visited, #extraMenu > li > a, #extraMenu li > a:visited {display:block;padding:0 10px;color:#ccc;text-decoration:none;}
#mainMenu > li > a, #mainMenu li > a:visited {border-right:1px solid #111;}
#mainMenu > li > a:hover, #extraMenu li > a:hover {color:#fff;background-color:#2d2922;}

#headerHome {
position:absolute;top:-50px;left:50px;
width:200px !important;
}
#headerHome  a {height:50px;background:url(ico1.png) no-repeat 10px 0;opacity:0.9;border:none !important;}
#headerHome  a:hover {background:url(ico1.png) no-repeat 10px 0;opacity:1}

#headerSearch {position:absolute;top:5px;left:190px;width:260px;margin:8px 10px;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:230px;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}

#headerShop a {
  display:block !important;
  position:absolute;top:-50px;left:60px;
  padding-left:50px !important;width:60px;background:url(ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}

.sous {background:linear-gradient(to bottom, #FFDAA9 0,#ffc578 15px,#d38002 100px);border:1px solid #644918;border-radius:0 0 6px 6px;padding:0;margin:0;box-shadow: 0 0px 5px #333;display:none;}
#mainMenu > li:hover .sous, #extraMenu > li:hover .sous  {display:block;}
.sous > li {list-style:outside none none;text-align:left;}
.sous > li a, .sous > li a:visited {display:block;color:#111 !important;text-decoration:none;padding-left:10px;list-style:outside none none;}
.sous > li a:hover {background-color:#FFFFFF50 !important;border-radius:6px;}

}
}

/* Menu grands Ordis */

@media only screen and (min-width: 1300px) {
#menuBarContainer{width:1300px;margin:auto;}
#menuBar {
	width:100%;height:50px;
	border-bottom:1px solid #000;
	background:linear-gradient(to top, #222, #333);
	font-size:14px;
	line-height:50px;
	position:absolute;top:0;left:0;z-index:100;
}
#mainMenu, #extraMenu {display:block;height:50px;float:left;list-style:outside none none;margin:0;padding:0;}
#mainMenu {width:770px;}
#extraMenu {width:250px;}
#extraMenu::after {content:"";display:table;clear:both;}

#mainMenu > li {float:left;width:140px;text-align:center;}
#extraMenu > li {float:left;width:50%;text-align:center;}
#mainMenu > li > a, #extraMenu li > a, #mainMenu li > a:visited , #extraMenu li > a:visited {display:block;padding:0 10px;color:#ccc;text-decoration:none;border-right:1px solid #111;}
#mainMenu > li > a:hover, #extraMenu li > a:hover {color:#fff;background-color:#2d2922;}
#headerHome {width:200px !important;}
#headerHome  a {display:block;height:50px;background:url(ico1.png) no-repeat 10px 0;opacity:0.9;}
#headerHome  a:hover {background:url(ico1.png) no-repeat 10px 0;opacity:1}
#headerShop a {padding-left:50px !important;width:65px;background:url(ico1.png) no-repeat -140px -50px;color:#fff !important;opacity:0.8;}
#headerShop a:hover {opacity:1;}

.sous {background:linear-gradient(to bottom, #FFDAA9 0,#ffc578 15px,#d38002 100px);border:1px solid #644918;border-radius:0 0 6px 6px;padding:0;margin:0;box-shadow: 0 0px 5px #333;display:none;}
#mainMenu > li:hover .sous, #extraMenu > li:hover .sous  {display:block;}
.sous > li {list-style:outside none none;text-align:left;}
.sous > li a, .sous > li a:visited {display:block;color:#111 !important;text-decoration:none;padding-left:10px;list-style:outside none none;}
.sous > li a:hover {background-color:#FFFFFF50 !important;border-radius:6px;}

#headerSearch {width:260px;float:left;margin:8px 10px;background:#aaa;border-radius:4px;}
#headerSearch:hover {background:#ccc;}
#headerSearch input {width:230px;color:#444;outline:0;border:0;line-height:18px;padding:7px; background:transparent;float:left;}
#headerSearch button {width:30px;height:32px;font:0/0 a;border:0;padding:0;background:transparent url(ico1.png) no-repeat -102px -59px;float:left;}
#headerSearch button:hover {cursor:pointer;}
}
/*---------------------*/

/*
░█░█░█▀▀░█▀█░█▀▄░█▀▀░█▀▄
░█▀█░█▀▀░█▀█░█░█░█▀▀░█▀▄
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
*/

/* Affichage Ordis */

@media only screen and (min-width: 800px) {
	body {background:url('banner-home.jpg') -300px -410px #77543f;}
	@media (min-width: 1300px) {
	  header {background:url('banner-home.jpg') no-repeat center 51px;padding:250px 0 10px 0;}
	}
	@media (max-width: 1299px) {
	  header {background:url('banner-home.jpg') no-repeat center 101px;padding:300px 0 10px 0;}
	}	
	#introScores::after, #introDiy::after, #introShop::after {
	  background:url('banner-home.jpg') no-repeat 0px -600px  #5e4130;
	}
}

/* Affichage petits */

@media only screen and (max-width: 799px) {
	body {background:url('planche-800.jpg') #77543f;}
	header { padding:120px 0 10px 0;}
	header h1 {
	  display:block;width:100%;height:140px;
	  background:url('title-opentrad.png') no-repeat center;background-size:contain;
	  }
	#menuBar {box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5);}
	#introScores::after, #introDiy::after, #introShop::after {
	  background:url('planche-800.jpg') 0 200px #b67c50;
	 }
}

/* Dans le header */
header h1 {text-align:center;font:0/0 a}

#saying {font-size:1.2em;text-align:center;text-shadow:1px 1px 8px #33271d;}

#selectLang {position:absolute;top:60px;right:20px;}
#selectLang a, #selectlang a:visited {
  color:#fff;text-decoration:none;
  padding:6px;
}
#selectLang b, #selectlang a:hover {
  background:rgba(255,255,255,0.4);font-weight:normal;border-radius:5px;padding:6px;
  cursor:pointer;transition: background 0.4s ease-in-out;  
  }

/*-- News --*/

@media only screen and (min-width: 1120px) {
#newsContainer, #footContainer {width:fit-content;margin:0 auto;}
}
@media only screen and (max-width: 1119px) {
#newsContainer {width:760px;margin:0 auto;}
#footContainer {width:fit-content;margin:0 auto;}
	@media (max-width: 759px) {
	#newsContainer {max-width:370px;}
	#footContainer {width:fit-content;}
		@media (max-width: 499px) {
		#footContainer {width:230px;}
		}
	}
}

.news {
  float:left;
  width:270px;padding:70px 15px 20px 15px;margin:35px;
  border:1px solid #c1a27f;background:#f0eae6;color:#333;border-radius:30px;
  }
.news h2 {
  margin: -55px auto 25px -32px;
  padding: 8px 6px;
  width: fit-content;
  background-color: #c1a27f;
  border-radius: 8px 10px 10px 2px;
  transform: rotate(-2deg);
  font-size: 1.2em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
}
.news h2::before {
  left: 0;
  border-color: #9b9b9b #9b9b9b transparent transparent;
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px 8px 5px 8px;
  width: 0;
  height: 0;
  top: 37px;
}
.news time {font-size:0.9em;line-height:2em;}
.news time::before {content:"▸ ";}
.news time::after {content:" ◂";}
.news ul {padding:5px;margin-top:-5px;margin-bottom:-3px;}
.news li {line-height:1.6em}
.news p {margin:5px 0;}
.news a, .news a:visited {color:#ac5a00;text-decoration:underline;}
.news a:hover {color:#f29a1c;}

/*--
░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
 or button-like
*/

#liberapay {
  display:inline-block;
  width:82px;height:30px;
  background:#f29a1c url(ico1.png) no-repeat 0 -112px; /*#f6c915*/
  border:none;
  border-radius:5px;
  transition: background-color 0.5s ease-in-out;
}
#liberapay:hover, #liberapay:active {
  background-color:#f6c915;
}
#lal {
  display:inline-block;
  width:87px;height:31px;
  background:#d22830 url(ico1.png) no-repeat 0 -50px;
  border:none;
  border-radius:7px;
  margin:2px 0 0 0;
}
#ccbysa {
  display:inline-block;
  width:88px;height:31px;
  background:#abb1aa url(ico1.png) no-repeat 0 -81px;
  border:none;
  border-radius:3px;
  margin:2px 0 0 0;
}

/*--
░▀█▀░█▀█░▀█▀░█▀▄░█▀█
░░█░░█░█░░█░░█▀▄░█░█
░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀
 sections
*/

@media only screen and (min-width: 906px) {
	.intro-img {height:600px;width:45%;}
	.intro-txt {width:40%;margin:70px 7%;}
}
@media only screen and (max-width: 905px) {
	.intro-img{height:400px;width:100%;}
	.intro-txt {margin:50px;}
}

.intro-txt {float:left;}
.intro-txt a {text-decoration:none;border-bottom:1px solid;}
.intro-txt li {line-height:2em;}
#introScores::after, #introDiy::after, #introShop::after {
  content:" ";
  display:block;
  height:100px;
}

/*-- Scores --*/

#introScores {
  background:#912727;color:#fed;
  }
#introScores .intro-img {
  float:left; 
  background:url('intro.jpg') repeat-y top right #cdcece;
}
#introScores a, #introScores a:visited{color:#fed;}
#introScores a:hover{color:#fff;}

/*-- DIY --*/

#introDiy {
  background:#ab731f;color:#ffefbe;
  text-align:right;
}
#introDiy .intro-img {
  float:right;
  background:url('intro.jpg') repeat-y center -600px #8e8177;
}
#introDiy a, #introDiy a:visited{color:#fed;}
#introDiy a:hover{color:#fff;}
#introDiy li {list-style:outside none none;}
#introDiy li::after {content:" •";}

/*-- Shop --*/

#introShop {
  background:#DED8BE;
  color:#79512A;
  }
#introShop .intro-img {
  float:left;
  background:url('intro.jpg') repeat-y right -1200px #cdcece;
}
#introShop .intro-txt {float:left;}
#introShop a, #introShop a:visited{color:#79512A;}
#introShop a:hover{color:#333;}


/*--
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█▀▄
░█▀▀░█░█░█░█░░█░░█▀▀░█▀▄
░▀░░░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀
*/

footer{
  width:100%;padding:10px 0 50px 0;
  border-top:1px solid #000;
  color:#ccc;
  background:linear-gradient(to top, #222, #333);
  line-height:1.7em;
}
footer a, footer a:visited {color:#ccc;text-decoration:none;}
footer a:hover {color:#fff;}
.foot-block{
  width:200px;margin:5px 15px; 
  float:left;
}
.foot-block ul {padding:0;margin:0;}
.foot-block li {
  list-style:outside none none;
  line-height:1.7em;
}
#dispOpentrad {display:block;width:200px;height:48px;margin:auto;background:url(ico1.png) no-repeat 10px 0;opacity:0.9}
#dispOpentrad:hover {background:url(ico1.png) no-repeat 10px 0;opacity:1}
#socialMed li {float:left;margin-left:-10px;}
#socialMed a, #socialMed a:visited {
  display:inline-block;
  width:50px;height:50px;
  border:none;
  margin:0 20px 2px 0;
  opacity:0.8;
}
#socialMed a:hover { opacity:1;}
#icoMasto {background:url(ico1.png) no-repeat -140px -150px;}
#icoPeertube {background:url(ico1.png) no-repeat -50px -150px;}
#icoDogmazik {background:url(ico1.png) no-repeat 0 -150px;}
#siteAutor {text-align:center;margin:30px auto;padding-top:30px;max-width:300px;border-top:1px solid #ccc;}