/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

-------------------------------------------------------------- */

/* Elements principaux
------------------------------------------ */
body { text-align: center; }
.classbody {position: relative; width: 100%; margin:0.5em auto; text-align: left; background:#cde4dc;}
.page { position: relative; width: 960px; max-width:95%; margin:0.5em auto; text-align: left; }
.header { background:#98e2c0; width: 100% }
.traitjaune {background:#546332; width: 100% }
.main { padding: 0em 0; }

.content {background:#cfe7d9; width: 100% padding: 0.4em 0.4 0.5 0.5; margin:0.4em 0.4 0.5 0.5}
.footer { clear: both; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid #999; }

/* largeur calculee du wrapper: 960*70%  = 672px */
.wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
.content { min-height: 350px; }
/* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
.aside { float: right; width: 23.333%; overflow: hidden; }    
  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding-bottom: 0.2em;  }
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header .spip_logo_site,
.header .spip_logo_site a,
.header .spip_logo_site a:hover { background: transparent; text-decoration:none; color:#222; }
.header .spip_logo_site a:hover  {color:#035227;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

.nav { position: relative; width: 960px; max-width:95%; margin:0.2em auto; text-align: left;  }
.nav li {display:inline;}
.nav li a { display: inline-block; padding: 0.2em 0.2em; margin: 0.25em 0.3em 0.3em 0; border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #04613c; }
.nav li.on a { background:#047258; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #037525; color:#fff; }
 

.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover  {color:#034539;}

.ClassUne
 {
  background-color: #029452;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  color: #e4e8e6;
   margin-bottom: 1.5em;
  /*padding: 1em 1em 0.7em 0.7em;*/
  padding-left: 1em;
  padding-right: 1em;
  padding-top: .5em;
  padding-bottom: .5em;
  width: 960px; 
  height: 340px;
  max-width:95%; 
  margin:1em auto; 
  text-align: left; 
  
  text-overflow: ellipsis; 
  
   position:relative;
   overflow: hidden;
   
}

.ClassUne { position: relative;  max-width:95%; margin:0.5em auto; text-align: left;  }
.ClassUne li {display:inline; margin-right: 20px; }
.ClassUne ul {list-style-type: none; padding: 0;}
.ClassUne > li {
    
     float: left;
}
.pagination li {display:inline; margin-right: 15px; text-align: center;}
/*.pagination {
    width: 100%;
    text-align: center;
ul.pagination-items {
width: 60%;
display: flex; justify-content: space-evenly;
li.pagination-item {
width: 30px;
text-align: center;
border-right: 1px solid gray;
&:last-child {
border-right: 0;



}*/
/*}
}
} */
 

.BoutonUne
 {
  background-color: #9fb9ad;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  
   margin-bottom: 1.5em;
  padding: 337px 1em 8px 1em;
 
  max-width:95%; 
  margin:1em auto; 
  text-align: left; 
  
  text-overflow: ellipsis;  
   overflow: hidden;
   
}
.BoutonUne02
 {
  background-color: #9fb9ad;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  
   margin-bottom: 1.5em;
  padding: 337px 1em 8px 1em;
  
  
   
   overflow: hidden;
   
}


.DivUneDiapo
 {
 position: absolute;
 
 /*display: none;*/
 display: block;
  /*display: flex;*/
 /* display: inline-block;*/
 top: 0.5em;
  left: 0.5em;
  margin-bottom: 0.1em;
  padding: 0.2em 0.2em;
  padding-bottom: .1em;
  padding-top: 5px;
  margin-top: 5px;
  
  /*width: 300%;*/
  width:98%; 
  height: 95%;
  
  /*background-color: #577b6b;*/
  background-size: contain ;
  flex: 1 0 100%;
  
  animation: slide 15s ease-in-out infinite both;
   
}
.DivUneDiapo> * + * {
    position: absolute;
   
    top: 0;
    left: O;

}
.DivUneDiapo.active{
    opacity: 1;
}
.ClassUne:hover, .DivUneDiapo:hover{
    animation-play-state: paused;
}

@keyframes slide{
    0% 20% 100% {transform: translate (0,0)};
     35% 55% {transform: translate (-33.33%,0)};
     70% 90% {transform: translate (-66.67%,0)};
}
/*@keyframes fondu{
    0%{background-image: url("diapo1.jpg");}
   33.33%{background-image: url("diapo2.jpg");}
    66.67%{background-image: url("diapo3.jpg");}
    100%{background-image: url("diapo1.jpg");}
}*/


.liUne{
    list-style-type: none;
}

.BlocActu{
    display: block;
    position: absolute;
}
.ClassActu
 {
  background-color: #ebfbeb;
  border: 1px solid #037942;
  border-radius: 10px;
  box-shadow: 0 2px 0  rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
  color: #035e1d;
  margin-top: 0.3em;
  padding-top: .2em;
  margin-bottom: 0.3em;
  padding: 0.2em 0.2em ;
  padding-bottom: .2em;
  width: 960px; 
  max-width:95%; 
  margin:0.3em auto;
  
  text-align: left; 
  overflow: hidden;
  text-overflow: ellipsis; 
  overflow-wrap: break-word;
  display: block;
    
  
  
}


nav {
    
    background-color: none;
}

.menu > li {
    float: left;

}

.logoUne  {
    float: right;
    

}
.logoActu  {
    float: left;
    padding: 0.5em 0.5em;
   

}
.DivActu  {
    float: left;
    padding: 0.2em 0.2em ;
    margin-top: 5px;
    position: relative;
    width: 99%;
    border: 1px solid #bee3dc;
    border-radius: 10px;
    margin-left: 5px;
    margin-bottom: 5px ;

}
.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    
}



.menu > li > a, .dropbtn {
    display: inline-block;
    color: blue;
    text-align: center;
    padding: 6px 7px;
    text-decoration: none;
    width: 160px; 
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu > li > a:hover, .dropdown:hover .dropbtn {
    background-color: #23fd56;
}   




.dropdown-content {
    position: relative;
    
    
}

.dropdown:hover .dropdown-content {
    display: block;
    
}




.dropdown-content {
    list-style-type: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 3px 2.5px 0px rgba(0,0,0,0.2);
    z-index: 1;
   display: none;
   
   
}
  

.dropdown-content > li {
    float: none;
}

.dropdown-content > li > a {
    color: black;
    padding: 3px 3px 3px 3px;
    text-decoration: none;
    display: block;
    text-align: left;
    margin: 3px 3px 3px 3px;
}



.dropdown-content> li > a:hover 
{
    background-color: #23fd56;
}




/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page,
    .wrapper,
    .content { width: auto; }
    .nav,
    .arbo,
    .aside,
    .footer { display: none; }
}

/* Affichage sur petits ecrans  
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */

/* largeur maximum 767px */
@media (max-width: 767px) {
	body {   	width: 100%;		padding: 0 20px;	}
	.page {  	width: 100%;  	max-width: none; 	}
}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    .wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}

/* fin */