body{
	/*background-color: #888;*/
	background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
	color: #fff; position: absolute; width: 99%; padding-top: 1px;
}
#fond23{background-image: url('img/fond23.webp');}
input[type=submit], button{cursor: pointer;}
.centrer{text-align: center;}
.afc{color: #afc;}
.justifier{text-align: justify;}
.retourChariot{display: none;}

::-webkit-scrollbar, -ms-overflow-style{width: 4px;}


/************************* Bandeau ******************************/
#bandeau {height: 140px;}
#logo{display: inline-block; position: absolute; top: 0px;}
#slogan2{
	display: inline-block;
	position: absolute; top: 0px;
	margin-top: 40px;
	margin-left: 200px;
}
#menuHaut{display:inline-block; position:absolute; top:40px; left:666px;}
.boutonMenu{
	background-color: rgba(0,60,60,0.6);
	font-family: 'Allura-Regular'; font-size: 30px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	width: 120px; height: 40px;
}
.inline{display: inline-block; height: 0;}


/**************** Barre latérale Gauche ***********************/
#barLatG{float: left; position: absolute; top: 170px; left: 20px;}
#barLatG_Collante{float: left; position: sticky; top: 170px; left: 20px;}
.catégorie{
	background-color: rgba(0,60,60,0.6);
	font-family: 'Allura-Regular'; font-size: 24px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	width: 288px;
	padding: 10px;
	}
.catégorie h3{margin-bottom: 0;}
.catégorie ul{margin-top: 0;}
.boutonCat{
	background-color: rgba(0,60,60,0.6);
	font-family: 'Allura-Regular'; font-size: 30px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	width: 280px; height: 40px;
}
#thierry{margin: 22px;}


/**************************************************************/
/*********************** Contenu ******************************/
/**************************************************************/
#contenu{
	font-family: 'DancingScript-VariableFont_wght';
	background-color: rgba(0,10,10,0.68);
	border : 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	font-size: 26px;
	overflow: auto;
	position: absolute; top: 160px; left: 350px;
	padding: 20px; padding-top: 0px;
}

/******************** Contenu Accueil **************************/
#pageAccueil{width: 820px; height: 600px;}
#pageAccueil img{width: 60%; height: 60%;}

/******************** Contenu Stylos ***************************/
.vignetteCat{
	background-color: rgba(0,60,60,0.6);
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline-block;
	width: 400px; height: 350px;
	margin: 20px;
	text-align: center;
	overflow: auto;
}
.vignetteCat input{width: 340px; margin-top:20px;}

/****************** Contenu Standard **************************/
#contenuArticles {
	font-family: 'DancingScript-VariableFont_wght';
	font-size: 26px;
	margin-left: 350px;
	}
#contenuArticles p{margin: 0;}
#contenuArticles figure{margin: 10px;}

/****************** Contenu Celtique **************************/
#celt{
	font-family: 'DancingScript-VariableFont_wght';
	background-color: rgba(0,10,10,0.68);/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	font-size: 26px;
	text-align: center;
	overflow: auto;
	position : absolute;
	width: 1000px; height: 680px; top: 160px; left: 333px;
	padding: 20px; padding-top: 0px;
}
#chercheArbre{
	text-align: center;
}
#chercheArbre select{
	background-color: rgba(0,60,60,0.6);
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
#chercheArbre input{
	background-color: rgba(0,60,60,0.6);
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
#zone{height: 20px;}
#imgTotem img{
	height: 220px;
}
#textTotem{padding: 10px;}
.vignetteCelt{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght';
	font-size: 24px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: flex;
	width: 1000px;
	text-align: center;
	overflow: auto;
}
.styloCelt{
	font-family: 'DancingScript-VariableFont_wght';
	font-size: 28px;
	color: #fff;
	text-align: center;
	margin: 20px;
}

.styloCelt img{
	width: 440px;
	/*transition: width 0.4s linear;*/
}
.styloCelt:hover img{
	background-color: rgba(10,10,0,0.8);
	border-radius: 8px;
	padding: 20px;
	z-index: 10;
	width: 1000px;
	position: fixed;
	top: 40px;
}

.totem img{
	width: 200px;
}

.vignette{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght'; font-size: 28px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline-block;
	width: 360px; height: 400px;
	margin: 10px;
	text-align: center;
	overflow: auto;
}
.vignette img, video{
	margin-top: 10px;
	/*transition: width 0.4s linear;*/
}
/*
.vignette:hover img{
	width: 840px;
	position: fixed;
	top: 200px;
	left: 400px;
}
*/
.vignettePlume{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght'; font-size: 28px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline-block;
	width: 360px;
	height: 480px;
	margin: 10px;
	padding: 20px;
	text-align: center;
	overflow: auto;
}

/********************* Zoom images ****************************/
.lightbox {display: none;}
.lightboxPlume {display: none;}

.mini img{width: 340px; cursor: zoom-in;}
.zoom img{
	border: 2px solid #666;
	box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	background-color: rgba(10,10,0,0.8);
	border-radius: 8px;
	padding: 20px;
	width: 980px;
	cursor: zoom-out;
}
.lightbox:target {
	display: block;
	position: fixed; top: 20px; left: 400px;
}
.lightboxPlume:target {
	display: block;
	position: fixed; top: 220px; left: 400px;
}

#contenuBozo{
	position: absolute; top: 140px;
	left: 320px; width: 1560px;
}
#bozo{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght'; font-size: 28px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline-block;
	width: 420px;
	height: 736px;
	margin: 20px;
	text-align: center;
	overflow: auto;
}
#bozo p{margin: 0;}
#bozo img{width: 360px; margin-top:20px;}
#videoBozo{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght'; font-size: 28px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display:inline-block;
	width:400px; height:240px;
	margin:20px;
	text-align:center;
	overflow:auto;
}

/**************************************************************/
/**************** Barre latérale Droite ***********************/
/**************************************************************/

/**********************  Accueil ******************************/
#barreLatD{
	background-color: rgba(0,10,10,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	text-align: center;
	overflow: auto;
	position : absolute;
	width: 460px; height: 615px; top: 160px; left: 1220px;
	padding: 20px;
}
#barreLatD figure{
	margin-left: auto;
	margin-right: auto;
}
.cadre{ width: 400px; height: 300px; margin: auto;}
.diapo-2{position: relative;}
.diapo-2 img{
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  animation: diapo-2 24s linear infinite 0s;
}
.diapo-2 img:nth-child(1) {animation-delay: 0s;}
.diapo-2 img:nth-child(2) {animation-delay: 6s;}
.diapo-2 img:nth-child(3) {animation-delay: 12s;}
.diapo-2 img:nth-child(4) {animation-delay: 18s;}
@keyframes diapo-2 {
  0% {opacity: 0; animation-timing-function: ease-in;}
  8.33% {opacity: 1;  animation-timing-function: ease-out;}
  25% {opacity: 1;}
  33.33% {opacity: 0;}
  100% {opacity: 0;}
}

/*************** Texte Culture Celtique ***********************/
#barLatCelt{
	font-family: 'DancingScript-VariableFont_wght';
	background-color: rgba(0,10,10,0.68);
	font-size: 26px;
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	text-align: center;
	overflow: auto;
	position : absolute;
	width: 460px; height: 660px; top: 160px; left: 1380px;
	padding: 20px;
}
#barLatCelt h2{
	text-align: center;
}
#barLatCelt p{
	text-align: justify;
	margin: 30px;
}

/***************** Texte Bozo-Bozo ****************************/
#texteBozo{
	background-color: rgba(0,60,60,0.6);
	font-family: 'DancingScript-VariableFont_wght'; font-size: 28px;
	color: #fff;
	border: 0px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
	display: inline-block;
	position: absolute;
	left: 450px;
	width: 1000px;
	height: 736px;
	margin: 20px;
	padding-left: 20px;
	padding-right: 20px;
	overflow: auto;
}
#texteBozo h2{text-align:center;}

/**************************************************************/
/******************** Pied de page ****************************/
/**************************************************************/
#piedPage{
	background-color: rgba(10,10,0,0.68);
	/*border : 2px solid #666; box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);*/
	position: absolute;
	top: 820px; left: 350px; width: 1370px;
}
#piedPage a{
	text-decoration: none;
	font: 18px calibri;
	text-shadow: 2px 2px #000;
}
.blocPiedPage{
	font-family: calibri;
	position: relative;
	display: inline-block;
	margin: 20px; margin-top: 8px; margin-bottom: 10px;
	vertical-align: top;
}
.blocPiedPage form{
	margin-left: -10px;
}
.blocPiedPage input{
	color: white; font-family: calibri; font-size: 16px; background-color: rgba(0,0,0,0); border : 0px;
}

#date_heure{
	color: black;
}


/**************************************************************/
/***************** Chargement Polices *************************/
/**************************************************************/
@font-face {
  font-family: 'DancingScript-VariableFont_wght';
  src:  url('polices/DancingScript-VariableFont_wght.woff2') format('woff2'),
		url('polices/DancingScript-VariableFont_wght.woff') format('woff'),
		url('polices/DancingScript-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Allura-Regular';
  src:  url('polices/Allura-Regular.woff2') format('woff2'),
		url('polices/Allura-Regular.woff') format('woff'),
		url('polices/Allura-Regular.ttf') format('truetype');
  font-display: swap;
}


/*********************************************************/
/***************  Medias querries  ***********************/
/*********************************************************/
#ecran{position: absolute; top: 0; left: 0; background-color: #000;}
/*********************************************************/
@media all and (min-width: 1916px) {
}

@media all and (min-width: 1440px) and (max-width: 1916px) {
#ecran{background-color: #808;}
#barLatG, #barLatG_Collante{top: 160px; left: 6px;}
#contenu{top: 160px; left: 318px; width: 628px; height: 666px;}
#pageAccueil{width: 628px;}
#barreLatD{left: 992px; width: 400px; height: 650px;}
#piedPage{top: 860px; left: 320px; width: 1110px;}
/*********************************************************/
#texteBozo{width: 600px;}
/*********************************************************/
#celt{position: relative; top: 30px; left: 333px; width: 1000px; height: auto;}
#barLatCelt{position: relative; top: 36px; left: 333px; width: 1000px; height: auto;}

}

@media all and (min-width: 1024px) and (max-width: 1440px) {
.boutonCat{width: 244px;}
.catégorie{padding: 0; padding-bottom: 10px; width: 262px;}
#ecran{background-color: #880;}
#menuHaut{left: 620px; top: 80px;}
#barLatG, #barLatG_Collante{position: absolute; top: 140px;}
#thierry{margin-left: 0; margin-top: 22px;}
#contenu{position: relative; top: 20px; left: 300px; width: 67%; height: 650px;}
#pageAccueil{width: 100%;}
#barreLatD{position: relative; top: 32px; left: 300px; width: 67%; height: auto;}
#piedPage{position: relative; top: 42px; left: 300px; width: 71%;}
/*********************************************************/
#contenuBozo{position: relative; top: 30px; left: 288px; width: 70%}
#bozo{margin:0; width: 100%;}
#texteBozo{position: relative; top: 10px; left: 0; margin: 0; width: 94%; height: auto;}
/*********************************************************/
#celt{position: relative; top: 60px; left: 284px; width: 68%; height: auto;}
.vignetteCelt{width: 100%; display: inline-block;}
#textTotem{width: 94%}
.retourChariot{display: inline;}
#barLatCelt{position: relative; top: 66px; left: 284px; width: 68%; height: auto;}
.styloCelt img{width: 100%;}
.styloCelt:hover img{
	background-color: none;
	border-radius: 0;
	padding: 0;
	z-index: 10;
	width: 100%;
	position: static;
	top: 40px;}
}


@media all and (min-width: 860px) and (max-width: 1024px) {
body{width: 100%; margin:0;}
.cache{display: none;}
#ecran{display: none;}
#barLatG, #barLatG_Collante{display: none}
#pageAccueil{width: 100%;}
#barreLatD{position: relative; top: 60px; left: 0; width: 100%; height: auto; padding-left: 0; padding-right: 0;}
#barreLatD video{width: 88%;}
.cadre{margin: 0; width: 300px;}
#contenu{position: relative; top: 50px; left: 0; width: 95%; height: auto;}
#piedPage{position: relative; top: 70px; left: 0; width: 100%;}
#logo{background-color: rgba(600,600,600,0.4); border-radius: 84px / 80px; left: 120px;}
#slogan2{background-color: rgba(600,600,600,0.4); border-radius: 155px / 42px; margin: 0; top: 10px; left: 360px; width: 420px;}
#menuHaut{top: 120px; left: 380px;}
#contenuArticles{position: absolute; top: 320px; left: 0; margin: 0;}
#contenuArticles figure{margin: 0; width: 100%;}
.vignette{margin: 0; width: 100%}
.vignetteCat{margin: 0; width: 100%}
/*********************************************************/
.vignettePlume{margin: 0; padding: 0; padding-top: 20px; width: 100%}
/*********************************************************/
#contenuBozo{top: 320px; left: 0; width: 100%}
#bozo{margin:0; width: 100%;}
#texteBozo{top: 820px; left: 0; margin: 0; width: 90%; height: auto;}
/*********************************************************/
#celt{position: relative; top: 60px; left: 0; width: 94%; height: auto;}
.vignetteCelt{width: 100%; display: inline-block;}
#textTotem{width: 94%}
.retourChariot{display: inline;}
#barLatCelt{position: relative; top: 66px; left: 0; width: 94%; height: auto;}

.styloCelt img{width: 100%;}
.styloCelt:hover img{
	background-color: none;
	border-radius: 0;
	padding: 0;
	z-index: 10;
	width: 100%;
	position: static;
	top: 40px;}
}


@media all and (min-width: 80px) and (max-width: 860px) {
body{width: 100%; margin:0;}
.cache{display: none;}
#ecran{display: none;}
#barLatG, #barLatG_Collante{display: none}
#pageAccueil{width: 100%; height: auto;}
#barreLatD{position: relative; top: 190px; left: 0; width: 100%; height: auto; padding-left: 0; padding-right: 0;}
#barreLatD video{width: 88%;}
.cadre{margin: 0; width: 300px;}
#contenu{position: relative; top: 180px; left: 0; width: 90%;}
#piedPage{position: relative; top: 198px; left: 0; width: 100%;}
#logo{background-color: rgba(600,600,600,0.4); border-radius: 84px / 80px; left: 120px;}
#slogan2{background-color: rgba(600,600,600,0.4); border-radius: 155px / 42px; margin: 0; top: 170px; left: 40px; width: 310px;}
#menuHaut{top: 250px; left: 10px;}
#contenuArticles{position: absolute; top: 320px; left: 0; margin: 0;}
#contenuArticles figure{margin: 0; width: 100%;}
.vignette{margin: 0; width: 100%}
.vignetteCat{margin: 0; width: 100%}
/*********************************************************/
.vignettePlume{margin: 0; padding: 0; padding-top: 20px; width: 100%}
/*********************************************************/
#contenuBozo{top: 320px; left: 0; width: 100%}
#bozo{margin:0; width: 100%;}
#texteBozo{top: 820px; left: 0; margin: 0; width: 90%; height: auto;}
/*********************************************************/
#celt{position: relative; top: 180px; left: 0; width: 90%; height: auto;}
#textTotem{width: 94%;}
#imgTotem{position: relative;}
#barLatCelt{position: relative; top: 190px; left: 0; width: 90%; height: auto;}
.retourChariot{display: inline;}
.vignetteCelt{width: 100%; display: inline-block;}
.styloCelt img{width: 100%;}
.styloCelt:hover img{
	background-color: none;
	border-radius: 0;
	padding: 0;
	z-index: 10;
	width: 100%;
	position: static;
	top: 40px;}
}

@media all and (min-width: 20px) and (max-width: 80px) {
}