/*Structure générale de la page*/
html,body {
	margin: 0;
	padding: 0;
  height: 100%;
  /*Début animation fond*/
 	/*background-image: url("images/flocons.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;*/
  /*Fin animation fond*/
  /*background-color: #EFF8FB;
  background-size: cover;
  box-sizing: border-box;*/
  /*background-image: url("images/flocons.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;*/
  
  /*Début animation fond*/
 	/*background-image: url("images/fleur.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;*/
  /*Fin animation fond*/
  /*background-color: #EFF8FB;
  background-size: cover;
  box-sizing: border-box;*/
  /*background-image: url("images/fleur.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;*/
  
  /*Début animation fond*/
 	/*background-image: url("images/feuilles.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;*/
  /*Fin animation fond*/
  /*background-color: #EFF8FB;
  background-size: cover;
  box-sizing: border-box;*/
  background-image: url("images/feuilles.gif");
  background-repeat: repeat;
  background-attachment: fixed;  
  background-position: center;
}
#bloc_page { /* Bloc qui contient toutes les infos de la page + pied de page*/
	position: relative;
	min-height: 100%;
	font-family: arial,sans-serif;
  margin: auto;
}
#bloc_contenu {/*Bloc qui contient l'entête, le menu et les blocs de la page*/
	border: 1px solid transparent; /* ne se voit donc pas mais positionne le tout en haut de page??*/
	padding-bottom: 150px; /* espace ente le bas et le haut du pied de page*/
	min-height: 1200px;
}
.cadre_centre { /*cadre de toutes pages*/
	margin-left: 5px;
	width: 1300px;
	min-height: 650px;
  padding: 0;/* Marge intérieure*/
  text-align: justify;
 	border: 1px solid #9d1102;
  border-radius: 6px;
  /*box-shadow: 6px 6px 0 black;
  background-color: whitesmoke;
  font-size: small;*/
}
#marge_basse{ margin-top: 390px;}/*Marge du menu et du fondu*/
#marge_haute{ margin-top: 15px;}/*cadre des actus du carrousel*/

#pied_de_page {
	position: absolute;
	height: 110px;
	bottom: 0;
	width: 1300px;
	left: 5px;
	font-family: sans-serif;
	background-color: #f5f5f5;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #9d1102;
}
#formulaire {
	margin: 10px;
	background-color: #A9F5BC;	
}
.fondu {
	position: absolute;
	left:  5px;
	top: 110px;/* En dessous du logo et du menu*/
} 
.fondu img {
	position: absolute;
	width: 1300px;
	height: 271px;
	left: 0;
	top: 0;	
	background-color: #eee;
	border-radius: 6px;
	border: 3px solid #9d1102;
}
/* Début section qui concerne le menu */
#blocmenu{
	position: absolute;
	top: 5px;
	left: 240px;/*Position du menu juste après le logo*/
	padding: 0;
	margin: 0;
	font-size: small;
}
.imgmenu{
}
.menu {
	opacity: 1;
	z-index: 1;
	position:absolute; 
  padding:0;
  top: 0px;
  margin:0;
  list-style:none;
  text-align: center;
  width: 170px;
  background-color: white; /*doit correspondre à la couleur de fond de l'image, sauf si transparente*/
  border-radius: 4px;
  box-shadow: 3px 3px 3px #999;
  border:solid 1px #333A40;
}
#menu1{left: 0px;}
#menu2{left: 180px;}
#menu3{left: 360px;}
#menu4{left: 540px;}
#menu5{left: 720px;}
#menu6{left: 900px;}

.menu ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
.menu li {
   background-color:white;
   border-radius: 3px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40;
}
.menu li li {
   max-height:0;
   overflow: hidden;
   transition: all 2s;
   border-radius:0;
   background: lightgray;
   box-shadow: none;
   border:none;
   margin:0;
}
.menu a {
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.1em;
}
.menu ul li a, .menu li:hover li a {
  font-size:1em;
}
.menu li:hover {
   background:white;
}
.menu li li:hover {
   background: white;
   overflow: visible;/*Rajout Pour permettre l'affichage des sous-menus*/
}
.menu ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
.menu li:hover li {
  max-height: 15em;
}
/* Fin section qui concerne le menu */
/* Sous-menus*/
.sousmenu {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 168px;
}
.sousmenu,
.sousmenu ul {
  /* Suppression des puces et des marges pour les listes du menu et des sous-menus */
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.sousmenu ul {
  display: none;/* Masquage des sous-menu par defaut */
}
.sousmenu li {
  /* Positionnement relative des elements de menu pour pouvoir positionner les sous-menu correctement en absolu */
  position: relative;
  background-color:#729EBF;
  background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
  background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
  border-radius: 6px;
  margin-bottom:2px;
  box-shadow: 3px 3px 3px #999;
  border:solid 1px #333A40
}
.sousmenu a {
  /* Dimensions des liens */
  width: 170px;
  height: 30px;
  line-height: 30px; /* Doit être équivalent a la hauteur du menu pour centrer le texte verticalement */
  text-align: center;
  display:block;
  text-decoration: none;
  color: black;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
.sousmenu li:hover ul {
  display: block;/* Affichage du soumenu au survol */
  position: absolute;/* Positionnement du sous-menu */
  top: 0px;
  left: 170px; /* Decalage du sous-menu de la largeur du menu */
  z-index: 100; /* Gestion de la superposition des sous-menus par rapport au reste de la page */
  border:solid 1px #333A40
}
.sousmenu ul a {
  /* Changement de l'affichage des liens des sous-menus pour ne pas les afficher en inline-block comme 
  les liens de menu, ils seront donc verticaux */
  display: block;
}
.sousmenu ul li:hover a {
	/* Couleurs sous-menu au survol
   color: #FF0000;
   background:#CED8F6;*/
}
.sousmenu ul li a, .sousmenu li:hover li a {
  font-size:1em
}
.sousmenu ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
.sousmenu li:hover li {
  max-height: 15em;
}
/* Fin des sous-menus décalés */
/* bandeau de défilement*/
.defilebandeau{
  width:1200px;
  height:40px;
  background-color:#fff880;
  border-width:2;
  border-style:solid;
  border-color:#689cff;
  font-size: 2em;
  font-style:italic;
  font-weight: bold; 
  overflow:hidden;
  margin-left: 48px;
  position:relative;
}
.textebandeau{
  white-space:nowrap;
  position:absolute;
 }
/* Fin bandeau de défilement*/ 

#logo {
	position: absolute;
	width:223px; 
	height: 85px;
	padding-top: 3px;
	padding-left:5px;
	margin-top: 5px;
	margin-left: 3px;
	text-align: center;
	top: 0;
	background-color: #dbeaff;
	box-shadow: 3px 3px 3px #999;
	border: 1px solid black;
	border-radius: 10px;
}
#texteaccueil{/*Texte de bienvenue*/
	display: inline-block;
	position: relative;
	margin: 5px;
	padding: 10px;
	font-size: medium;
	/*border-radius: 6px;
	border: 1px solid #9d1102;
	background-color: #dbeaff;*/
}
#infosacceuil{/*Pavé cubes et météo*/
	display: inline-block;
	position: relative;
	vertical-align: top;
	top: 0px;
	margin-left: 2px;
	padding: 0px;
	width: 623px;
	height: 400px;
	border-radius: 6px;
	border: 3px solid #9d1102;
	background-color: #2F6FDCBF;
}
#liensaccueil {/*Lien pavé cubes*/
	float: left;
	display: grid;
  width: 480px;
	height: 392px;
	padding: 1px;
	margin: 5px 0 5px 0;
	grid-template-columns: 160px 160px 160px;/*Dimensions cubes*/
  grid-template-rows: 130px 130px 130px;/*Dimensions cubes*/	
}
.boitelien{/*cube*/
	border: 3px solid black;
  border-radius: 6px;
  border: 1px solid black;
  color: black;
  margin: 1px;
  overflow: hidden;
	background-color: white;
}
.boitesupplement{
	display: inline-block;
	vertical-align: top;
	margin: 15px 35px 15px 34px;*/35px/doite 34px/gauche  pour 1300px de large= positionnement équilibré en attendant margin-block*/ 
	width: 250px;
	height: 100px;
	background-color: lightgrey;
	overflow: hidden;
	border: 1px solid #9d1102;
	border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
}
#retourhaut {margin: 20px;}
#datemaj{
	float: left;
	margin-left: 10px;
}
.btnaccueil{
	margin-left: 10px;
	width: 80px;
	height: 60px;
	overflow: hidden;
	padding: 0;
	border: 1px solid #9d1102;
  border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
}
/*Mise en page d'articles avec photos*/
section {
	display: flex;
  margin-bottom: 20px;
}
article, aside {text-align: justify;
}
article {
	margin: 0 20px 0 20px;
	border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
	flex: 3;
}
article p {
	margin: 10px;
	font-size: 0.9em; /*1em= taille normale, moins:plus petite*/
}
aside {
	flex: 1.2;
  position: relative;
  background-color: #F5D0A9; /*#706b64;*/
  border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
  padding: 10px;
  color: black;
  font-size: medium;
  font-weight: bolder;
  margin: 0 10px 0 10px;
}
aside img {margin: 0 5px 0 5px;}

.fleche_gauche {
	position: absolute;
  top: 20%;
  left: -17px;
}
.fleche_droite {
	position: absolute;
  top: 20%;
  right: -17px;
}
.photo_article {text-align: center;}

.photo_article img {
  border: 1px solid #9d1102;
  border-radius: 6px;
}
#fond_jaune{background-color:#F7F8E0;}
#fond_vert{background-color: #E0F8E0;}
#fond_bleu{background-color: #E0E6F8;}
#fond_mauve{background-color: #FBEFFB;}
#fond_gris{background-color: #F2F2F2;}

/*Mise en page avec des blocs*/
.blocinfos{/*Bloc contenant les paragraphes*/
	display: inline-flex;
	flex-wrap: wrap;
	position: relative;
	margin: 10px 15px 10px 15px;
	padding: 10px;
	font-size: medium;
	border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
	/*border: 1px solid #9d1102;*/
}
.textebloc{
	margin: 10px;
	overflow: auto;/*création auto d'un ascenseur*/
}

/*Fin Mise en page*/
#congratulation {
	background-image: url("images/congratulation.jpg");
	background-color: #ff624d;
	width: 1050px;
	min-height: 180px;
  background-repeat: no-repeat;
  background-position: center left;
  margin-left: 50px;
  padding-left: 150px; 
  color: white;
  font-weight: bold;
}

#admin {
	font-size: x-small;
	text-align: center;
	padding: 12px;
}
.titreparagraphe {
	text-align: center;
	/*background-color:lightgray;
	border: 3px solid #9d1102;*/
}
.traitparagraphe{
	display:inline-block;
	vertical-align:middle; 
	width: 300px;
	border-bottom: 5px solid rgb(157,17,2,0.6); /*#9d1102;*/
}
.traitparagraphecourt{
	display:inline-block;
	vertical-align:middle; 
	width: 20%;
	border-bottom: 5px solid rgb(157,17,2,0.6); /*#9d1102;*/
}
.textelarge {font-size: large;}
.textegras {font-weight: bold;}
.centrebloc {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
	border: 3px solid #9d1102;
 }
.entreprises, .histoire, .infospratiques, .tourisme{
	width: 1300px;
	margin: auto;
}	
.entreprises .infospratiques td {
	width: 240px;
	vertical-align: top;
}
.colinfprat {
	width: 110px;
}
.bordimages {
	border-radius: 6px;
	border: 2px solid #9d1102;/*black;*/
	margin: 1px;
}
.tablecentre {
	width: 1000px;
	margin: auto;
}
.tablecentre tr td {
	border-collapse: collapse;
	font-size: large;
	text-align: center;
	background-color: #E6E6E6;
	border-radius: 6px;
	border: 1px solid #9d1102;
}
/*.cadrecouleur{
	border-radius: 6px;
	border: 3px solid #9d1102;
}*/
/* Fenêtres modales du cimetière */
.fenetremodale{
    display: none;/*cache la fenêtre*/
    position: fixed;
    top:0; right:0; bottom:0; left:0;/*La fenêtre occupe tout l'écran*/
    background-color: rgba(0, 0, 0, 0.5);/*opacifie le fond à l'apparition*/
    z-index: 1000;/*Place la fenêtre au dessus de toutes*/
}
.fenetremodale:target{
    display: block; /*fait apparaître la fenêtre*/
}
.bloc_popup{
	display: flex;
	background: #fff; /* couleur du fond de la fenêtre */
	padding: 20px;
	position: relative;
	margin: 10% auto;
	width: 60%;
	border: 1px solid #9d1102;
	border-radius: 6px;
  box-shadow: 0px 2px 5px #1c1a19;
}
.btn_fin{cursor:pointer;}             

.bloc_popup img{
	margin-left: 5px;
	border-radius: 6px;
	border: 1px solid #9d1102;
}
.table_modale{
	width: auto;
	min-width: 420px;
	margin-right: 20px;
	border-radius: 6px;
	border: 1px solid #9d1102;
	margin-left: 10px;*/
	}
.table_modale td {
	width:50px;/* auto;*/
	border-collapse: collapse;
	font-size:small;
	text-align: center;
	background-color: #E6E6E6;
}
/* Fin fenêtres modales du cimetière */

/*Eviter l'apparition du clignotement de texte (non-selectionnable) */
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*Permettre l'apparition du clignotement de texte (selectionnable)*/
.selectall {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
/*Carrousel accueil*/
#bloc_carrousel {
	display: inline-block;
	position: relative;
	/*position: absolute;*/
	top: 0px;
	left: 0px;
	width: 600px;/*Taille image . Donner la même valeur que le pourcentage de width du carrousel figure*/
	height: 400px;
	color: white;
	min-height: 200px;
	overflow: hidden;
	border-radius: 6px;
	border: 3px solid #9d1102;
}
.texteinfo{
	text-decoration: none;
	color: white;
	font-size: large;
}
#carrousel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;/*aligne toutes les images horizontalement par défaut*/
  max-height: 100%;
  /*CSS3 keyframes animation*/
  animation-name: slide;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
#carrousel:hover {
    animation-play-state: paused; /* Mise en pause de l'animation */
}
#carrousel figure {
  display: inline-block;
  width: 600px;/*Donner la valeur exacte de la largeur de l'image*/
  max-height: 100%;
  margin: 0;
}
#carrousel figure img {
	height: 100%;
  width: 100%;
  position: relative;/*Centrer l'image verticalement si celle-ci ne peut être affichée totalement*/
  top: 50%;
	transform: translateY(-50%);
}
#carrousel figure figcaption {
	position: absolute;
	top: 0; /*place le texte en haut*/
   height: 5%;/*Env. 20px pour img de 400px*/
   text-align: center;
   width: inherit;
   background-color:rgba(157,17,2,0.7);/*#9d1102;*/
   color:white;
}
.commande_puces  {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding:0;
  margin: 0;
	text-align: center;
}
.commande_puces li {
   display: inline;
   padding:0; margin:0;
}
.commande_puces label {
  position: relative;
  display: inline-block;
  height:12px;
  width: 12px;
  margin: 0 5px;
  text-indent: -9999px;
  background: lightgreen;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
  cursor: pointer;
}
.commande_puces label:active {
  outline: none;
  background: #9d1102;
}
#play {
  position: absolute;
  cursor: pointer;
  bottom: 2em;
  right: 2em;
  width: 0;
  height: 0;
  left: 10px;
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid rgba(157,17,2,0.9);
  display: none;
  text-indent: -9999px;
}
#bloc_carrousel input[type="radio"] {
  display: none;
}
#bloc_carrousel input[type="radio"]#montre_image1:checked ~ .navcarrousel .commande_puces li:nth-of-type(1) label,
#bloc_carrousel input[type="radio"]#montre_image2:checked ~ .navcarrousel .commande_puces li:nth-of-type(2) label,
#bloc_carrousel input[type="radio"]#montre_image3:checked ~ .navcarrousel .commande_puces li:nth-of-type(3) label,
#bloc_carrousel input[type="radio"]#montre_image4:checked ~ .navcarrousel .commande_puces li:nth-of-type(4) label {
   outline: none;
   background: #9d1102;
}

#bloc_carrousel input[type="radio"]#montre_image1:checked ~ div#carrousel {
   animation: none;
   left: 0;
}
#bloc_carrousel input[type="radio"]#montre_image2:checked ~ div#carrousel {
   animation: none;
   left: -600px; /*2ème image taille de l'image*/
}
#bloc_carrousel input[type="radio"]#montre_image3:checked ~ div#carrousel {
   animation: none;
   left: -1200px /*3ème image le double etc.*/
}
#bloc_carrousel input[type="radio"]#montre_image4:checked ~ div#carrousel {
   animation: none;
   left: -1800px /*4ème image le triple etc.*/
}

#bloc_carrousel input[type="radio"]:not(:nth-last-of-type(1)):checked ~ .navcarrousel label#play {
   display: block;
}
#bloc_carrousel input[type="radio"]#play:checked ~ div#carrousel {
   animation-name: slide;
   animation-duration: 20s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
}
/*Animation %1=démarrage %2=délai attente le 3eme de la ligne1 étant le maximum(100%) */
@keyframes slide {
	0%, 20%, 100% {
  		left: 0; /*1ère image*/
  }
  25%, 45% {
      left: -600px; /*2ème image taille de l'image*/
  }
  50%, 70% {
      left: -1200px /*3ème image le double etc.*/
  }
  75%, 95% {
      left: -1800px /*4ème image le triple etc.*/
  }
}

.clignote {
	text-decoration: none;
	font-size: large;
	color:yellow;
  animation: clignote 3s linear infinite;
}
@keyframes clignote {  
  50% { opacity: 0; }
}