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

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

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

/* Elements principaux
------------------------------------------ */
body { text-align: center; background:#ddd;}
.page {
/*	position: relative;*/
/*	width: 960px;*/
	max-width:95%;
	margin:2em auto;
	text-align: left;
	border: 1px solid white;
/*	background: #6b6e73 url(../../objets/tee.gif) bottom left no-repeat fixed;*/
/*	background: #6b6e73 url(../../objets/tgv.gif) bottom left no-repeat fixed;*/
	
/*	background: #6b6e73 url(../../objets/accueil_flou.jpg) bottom left no-repeat fixed;*/

	/*	background: #6b6e73 url(../../objets/130609_CR_rotonde_avancement_05) bottom left no-repeat fixed;*/
/*	background: #3a372e url(../../objets/tee.gif) bottom left no-repeat fixed;*/
/*	background: #6b6e73 url(../../objets/PICT0111_flou_01.jpg) bottom right no-repeat;*/
	background: #6b6e73 url(../../objets/TEE_flou_02.jpg) top right no-repeat fixed;
/*	background: #6b6e73 url(../../objets/affiche_40100_01.jpg) top right no-repeat fixed;*/

	
	
	background-size: cover;

	}
	
/* largeur maximum 767px */
@media (max-width: 789px) { 
.page {
/*	background: #6b6e73 url(../../objets/tee.gif) bottom right no-repeat fixed;*/
/*	background: #3a372e url(../../objets/tee.gif) bottom right no-repeat fixed;*/
	}

	}
	
.header	{
	  grid-area: zhd;
	}
	
.main	{
	padding: 0;

	}
	
.footer	{
	grid-area: zft;
	  
	clear: both;
	padding: 1em 0 0;
	margin:1em 0 0 0;
	border-top:1px solid #fff;
	background-color: rgba(33, 36, 43, 0.7) !important;		/*** bleu gris foncé #21242b / rgb 33, 36, 43 - opacité forte ***/
	background-color: #21242b;	/*** bleu gris foncé #21242b / rgb 33, 36, 43 ***/

	}
	



.bside	{
	float: right;
	width: 25%;

/*	overflow: hidden;*/
/*	background: transparent url(../../objets/tee.gif) top right no-repeat fixed;*/

	}    


.secondaire	{

	width: auto;


	overflow: hidden;
/*	background: transparent url(../../objets/tee.gif) top right no-repeat fixed;*/

	}    
	
	
.principal	{
	float: left;

	width: 60%;


	background:transparent;
	overflow: hidden;
	}
	
/*.content { min-height: 350px;  }*/
.content	{
	min-height: 350px;

/*	background: #6b6e73 url(../../objets/accueil_flou.jpg) bottom left no-repeat fixed;*/
/*	background-size: cover;*/
	
	
	}

* {box-sizing: border-box;}


.page > div {
/*  border: 1px solid #fff;*/
/*  border-radius: 6px;*/
 /* background-color: rgba(233,171,88,.5);*/
  padding: 0em;
  color: #fff;
}

.page {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
/*  grid-template-columns: 2fr 1fr 1fr;*/
/*  grid-gap: 4px;*/
  grid-auto-rows: minmax(10px, auto);
    grid-template-areas: 
    "zhd   zhd   zhd   zhd   zhd   zhd   zhd   zhd   zhd   zhd   zhd   zhd"
    "zarbo zarbo zarbo zarbo zarbo zarbo zarbo zarbo zarbo zarbo zarbo zarbo"
	"zsel  zsel  zsel  zsel  zsel  zsel  zrech zrech zrech zrech zrech zrech"  
    "znav  znav  znav  zcont zcont zcont zcont zcont zcont zl    zl    zl"
	"zft   zft   zft   zft   zft   zft   zft   zft   zft   zft   zft   zft";
}


.zone_contenu {
  grid-area: zcont;
}
.zone_telechargement {
  grid-area: zt;
}
.zone_selection_langue {
  grid-area: zsel;
}

.zone_navigation {
  grid-area: znav;
}

.zone_recherche {
  grid-area: zrech;
}


.zone_commentaires {
  grid-area: zcom;
}

.zone_inscription {
  grid-area: zinsc;
}

.zone_liens {
  grid-area: zl;
}

.arbo	{
	grid-area: zarbo;
	  

	}
	
	
	
/* Entete et barre de navigation
------------------------------------------ */
.header {
/*	padding-bottom: 1em;*/
/*	margin-bottom: 1em;*/
/*	border: 1px solid white;*/
	background:transparent url(../../objets/dgrd_crt_3a3d44.png) top left repeat-x;

	}
.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;*/
	}

.haut	{
	border-bottom: 1px solid white;

	}

	
.header .spip_logo_site a:hover	{
	background: transparent;

	/*color:#db1762;*/
	}


.header .spip_logo_site a:hover img {opacity:0.7;}
.header .spip_logo	{
	margin-bottom:0em;
	}
	
.header #slogan {
	margin: -50px 0 0 0;
/*	padding: 1.5em;*/
	float:right;
	}

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
/*
.nav {
	float: right;
	position: relative;
	z-index:1000;
	margin-top:-4.5em;
	margin-right:1em;
	}
*/
.nav li {display:inline;}
.nav li a	{
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0.5em 0.25em 0.5em 0;
	border: 1px solid white;
	border-radius: 0.5em;
	text-decoration: none;
	background: #f0f0f0;
	color: #21242b; /*** / #21242b = bleu gris foncé rgb 33, 36, 43 ***/
	}

.nav li.on a {
	background:#21242b; /*** / #21242b = bleu gris foncé rgb 33, 36, 43 ***/
	color:#fff;
	font-weight: normal;
	border: 1px solid white;
	border-radius: 0.5em;
	}
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #fa8400; color:#fff; }
 


.footer .colophon { float: left; height: 40px; width: 70%; margin: 0, 0, 0.5em, 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

a.generator.spip_out img	{
	border: none;
	}
	


	
	

/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page,
    .principal,
    .content { width: auto; }
    .nav,
    .arbo,
    .secondaire,
    .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 */
/*    .principal,
    .content,
	.bside,
    .secondaire	{
	width: 100%;

	}
    
	.content,
	.bside,
    .secondaire { clear: both; float: none; width: 100%; }
	
	.principal	{
	margin: 0;
	}

    /* 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; }
*/

.page {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
/*  grid-template-columns: 2fr 1fr 1fr;*/
/*  grid-gap: 4px;*/
  grid-auto-rows: minmax(10px, auto);
    grid-template-areas: 
    "zhd   zhd   zhd   zhd   zhd   zhd"
    "zarbo zarbo zarbo zarbo zarbo zarbo"
	"zsel  zsel  zsel  zsel  zsel  zsel"
	"zrech zrech zrech zrech zrech zrech"  
    "znav  znav  znav  znav  znav  znav"
	"zcont zcont zcont zcont zcont zcont"
	"zl    zl    zl    zl    zl    zl"
	"zft   zft   zft   zft   zft   zft";
}

}

/* fin */