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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; margin:0; padding:0; background-color:#FFF; }

.haut{background-color:#564c4a;
background-image: linear-gradient(45deg, #525252 25%, #564c4a 25%, #564c4a 50%, #525252 50%, #525252 75%, #564c4a 75%, #564c4a 100%);
background-size: 6.00px 6.00px;}
.header {}
.header span{display:block; font-size:0; text-indent:-3000px;}
.social{ float:right; text-align:right;}

.page { width: 1200px; max-width:95%; margin:25px auto; text-align: left; }

.bas {text-align: left;clear:both; background-color:#564c4a; padding:30px 0; z-index: 3; position: relative; }
.bas .page, .haut .page, .nav .page {margin:0 auto; padding:0; }
.main {  }
.footer { clear: both; }

/* largeur calculee du wrapper: 1200*70%  = 840px */
.wrapper { clear: both; float: left; width: 70%; border-top:3px solid #e7523e;  }
.page_rubrique.rubrique13 .wrapper, .page_rubrique.rubrique154 .wrapper, 
.page_rubrique.rubrique14 .wrapper, .page_rubrique.rubrique157 .wrapper,
.page_rubrique.rubrique7 .wrapper, .page_sommaire .wrapper, .page_rubrique .wrapper   {float:none; width:100%;}

/*.page_rubrique.rubrique144 .wrapper { clear: both; float: left; width: 71%; overflow: hidden; border-top:3px solid #e7523e;  }
*/

.content { min-height: 350px; }
/* largeur calculee du aside: 840px / 3 = 280px = 23.333 %*/
.aside { float: right; width: 25%; overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  border-top:3px solid #b5aeac; margin-bottom:30px; }  
 
 .arbo {margin:20px auto; text-align: left; } 

 .main{padding-bottom:20px;}
 .wrapper{}
 .content, .aside{padding-top:15px;}
  

/* stiky dans le main*/
.cf::after {
  clear: both;
}
.cf::before, .cf::after {
  content: " ";
  display: table;
}
 
  
/* Entete et barre de navigation
------------------------------------------ */
.header { padding : 10px 0; padding-top:0;  }
.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:#db1762;}
.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo {margin-bottom:0;}
.header #slogan { display:none; }
.header .social{ float:right; margin-top:20px;}

#nav {background-color:#f8f1ef; padding:15px 0; padding-bottom:0;}
.nav ul{ margin-bottom:0; text-transform:uppercase;}
.nav li {display:inline;}
.nav li a { display: inline-block; padding: 7px 25px; margin: 0 5px 15px 0;border-radius: 20px;  text-decoration: none;  background: #53b23f; color: #FFF; }
.nav li.on a { font-weight: normal; background-color:#e20613;}
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #564c4a; color:#fff; }
/*Toogle responsive -------*/
.nav label, #toggles{display: none;}
 #toggles:checked + ul {display: block;}

.footer, .footer a{color:#FFF;}
.footer a:hover, .footer a:visited{color:#e0d9db;}
.footer .colophon { float: left; width: 50%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }
.footer .generator a:hover  {color:#c41558;}

.grid{
	display: grid; padding-bottom:1em;
}
.formulaire_hebergement .grid{
	padding-bottom:0;
}

.grid .spip_logo{float:none; margin:0; margin-bottom:5px; border-radius:8px;}
.grid2{
	grid-template-columns: repeat(2, 1fr);grid-gap: 0 20px;
}

.grid3{
	grid-template-columns: repeat(3, 1fr);grid-gap: 0 20px;
}
.grid4{
	grid-template-columns: repeat(4, 1fr);grid-gap: 0 20px;
}
.grid5{
	grid-template-columns: repeat(5, 1fr);grid-gap: 0 20px;
}

#result .grid4{grid-gap: 10px 40px;}

.formulaire_hebergement .grid2, .formulaire_hebergement .grid3, .formulaire_hebergement .grid4, .formulaire_hebergement .grid5{grid-gap: 20px;}

#btn_up {
position: fixed;
bottom: 40px;
right: 25px;
cursor: pointer;
display:none;
z-index:100; }

.partage{float:right; line-height:32px; clear:both; padding-top:1.5em;}

/* moteur recherche en haut ------ */
button.toogle{padding:0; width:36px; height:36px; float:right; border-radius:50%; background-image:url(../images/search-pm.png); background-position:center center; background-repeat:no-repeat;}
.header {position:relative;}
#cache {position:absolute; right:0; top:60px;}

.lecteurpdf{width:100%;}

/* 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: 810px) {
	body {   	width: 100%; background-image:none;}
	.wrapper,
    .content,
    .aside, .page_rubrique.rubrique144 .wrapper { width: 100%; float:none;}
	
    .content,
    .aside { clear: both; float: none; width: 100%; }
	.page, .bas .page, .haut .page, .nav .page { padding:0 20px;}
	
	.grid3, .grid4, .grid5{grid-template-columns: repeat(2, 1fr);grid-gap: 10px;}
	.nav { font-size:90%;}
	.arbo{padding:0 10px;}

}
 
/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
	.header { padding : 10px 0;  }
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
	.etab-bloc .spip_logo { margin: 10px 0;
}
	.footer .colophon, .footer .generator { float: none; display:block; width: 100%; padding-bottom: 15px; }
	#btn_up img {display:none; }
	
	.header .social{ float:right; margin-top:10px;}
	



    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }
	
	 /* Grids */
	
	.grid3, .grid4, .grid5{
	grid-template-columns: repeat(2, 1fr);grid-gap: 10px;
	}
	.une.grid3, .relatif .grid4, .relatif .grid5, .relatif .grid2, .relatif .grid3{
	grid-template-columns: repeat(1, 1fr);grid-gap: 10px; 
	}
	.grid3.agenda, .grid3.actualites{
	grid-template-columns: repeat(1, 1fr);grid-gap: 0px;
	}
	
	.nav label {display:block;}
	#nav{padding:0;}
    nav ul {
        display: none;
		position:relative;
		}
	.nav ul li a { float: none; border: 0; }
	.nav li a{margin: 0 5px 5px 0;}
    .nav label {
        font-size: 30px; color: #000; cursor: pointer;}
 
    /*#toggle:checked + ul {display: block;}*/
	
	#cache {top:55px;}
 body.page_mot_zone{;}

}