#map3d {
	/* DIV contenant la carte */
	position: absolute;
	/*float: right;*/
	right: 0;
	top: 0;
	background: red ;
	height: 100% ;
	/* width: 60% ; */
	width: 60% ;
	/* border-radius: 20px;
	border: 1px solid #000;    bordure de la carte GM  */
	z-index: 501;   
}

#zzifmap3d {
	position: relative ;
	background: black ;
	height: 100% ;
	width: 100% ;
	border-radius: 20px;
	border: 1px solid #000;   /* bordure de la carte GM  */
	z-index: 0;
	}

#zflags {
	position: absolute ;
	bottom: 10% ;
	margin-right: 1% ;
	border: 0px solid #000 ;
	width: 45% ;
	height: 05% ;
	background: transparent ;
	z-index: 200 ;
	}
	
#formAccesDoc {
	float: right ;
	margin-right: 10%;
	border: 1px solid #FFF ;
}
#formAccesDoc th {
	color: white ;
	}

/*
#TitreGeo  {
	position: absolute ;
	top: 1% ;
	left: 1% ;
	color: white ;
	font-size: 3em ; 
	}
*/
	
.blanc  {
	color: white;
	}
	
/* ----- CSS de l'écran avec slides  
	

radio click through #2
Hornebom / 2013-10-23
MIT licensed
http://hornebom.com/  /
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
	/* 
		// latin-ext 
		@font-face {
 	 		font-family: 'Titillium Web';
 	 		font-style: normal;
 	 		font-weight: 300;
  			src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGIVzY4SY.woff2) format('woff2');
  			unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
		}	
		// latin 
		@font-face {
  			font-family: 'Titillium Web';
  			font-style: normal;
 			font-weight: 300;
 	 		src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(https://fonts.gstatic.com/s/titilliumweb/v7/NaPDcZTIAOhVxoMyOr9n_E7ffGjEGItzYw.woff2) format('woff2');
  			unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
		}
	


@import url(http://weloveiconfonts.com/api/?family=entypo);

*/

zzhtml {
	/* permet à l'image de fond de s'adapter automatiquement à la taille de la fenetre */
	background: url(../img/fdp4.jpg) fixed no-repeat center top;
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-ms-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;
	}

/*  -- A quoi se rapporte : * ??
*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
*/


#gal {
	/* GAL est le conteneur global de l'accès Géolocalisation (slides + map3d) */
  /* ne permet pas d'avoir un fond d'écran couvert à 100 % ... 
  background: url(../img/fdp4.jpg) fixed no-repeat center top;  /* Jc fond de page du div "global"  */

  /*
  position:relative;
  float: right;
  width:1280px;
  height:800px;
  top:100px;
  */
  /* largeur de 90% pour laisser accès aux boutons GoogleMaps situés en bas à droite et à gauche
  	de ce fait, les boutons radios se trouvent plus centrés, ce qui n'est pas plus mal ...
  	Par contre, les bordures ne sont pas utiles...      */
  	
  position: absolute;
  top: 15%;
  right: 4%; 
 
  width: 90%;  /* au lieu de 79%  */
  height: 80%;  /* au lieu de 79%  */

  z-index: 0;
  /* border: solid 1px; */

  /* background:white; 
  -webkit-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  box-shadow:0px 0px 0px 10px white,
             5px 5px 0px 10px rgba(0,0,0,0.1);
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:   translate3d(0, 0, 0);
  -ms-transform:    translate3d(0, 0, 0);
  -o-transform:     translate3d(0, 0, 0);
  transform:        translate3d(0, 0, 0);
  */
}

#gal:after {
  content:'';
  position:absolute;
  bottom:24px;
  right:0;
  left:0;
  width:100%;
  height:1px;
  background:rgba(255,255,255,0.35);
  z-index:3;
}

#gal ul {list-style-type:none;}



/*   Rempladement des 4 styles suivants (sur label) par les mêmes sur nom de classe MGeoRadio
input[type="radio"], input[type="radio"] + label {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}

label {
	position: absolute;
	bottom: 2px;
	display: block;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	cursor:pointer;
  }
  
input[type="radio"] {
  opacity:0;
  z-index:9;
}

input[type="radio"] + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}

 */ 

.MGeoRadio, .MGeoRadio + label  {
  position:absolute;
  bottom:15px;
  display:block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  cursor:pointer;
}
.MGeoRadio label  {
	position: absolute;
	bottom: 2px;
	display: block;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	cursor:pointer;
  }

.MGeoRadio {
  opacity:0;
  z-index:9;
}  


/* définit l'offset de positionnement des boutons radio par rapport au bord du bloc nav (?)  */
input[value="one"], input[value="one"] + label {left:20px;}
input[value="two"], input[value="two"] + label {left:128px;}
input[value="three"], input[value="three"] + label {left:236px;}
input[value="four"], input[value="four"] + label {left:344px;}
input[value="five"], input[value="five"] + label {left:452px;}
input[value="six"], input[value="six"] + label {left:560px;}

.MGeoRadio + label {
  background:rgba(255,255,255,0.35);
  z-index:7;
  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
  -webkit-transition:all .3s;
  -moz-transition:all .3s;
  -o-transition:all .3s;
  transition:all .3s;
}

/* boutons radios du slide résultats Géo */
.ElargGeo {
	padding-left: 2% ;
}


.BtnGeoExtG  {
	position: relative;
	float: left;
	min-width: 30% ;
	margin-left: 10%;
}
.BtnGeoExtD  {
	position: relative;
	float: left;
	min-width: 50% ;
	margin-left: 5%;
}

/* les classes "entypo-forward" sont les classes des <figure>, "entypo-dribble" et "entypo-twitter" sont les classes des liens des slides */
[class*="entypo-"]:before {
  position:absolute;
  font-family: 'entypo', sans-serif;
}


figure[class*="entypo-"]:before {
  left:10px;
  top:5px;
  font-size:2rem;
  color:rgba(255,255,255,0);
  z-index:1;
  -webkit-transition:color .1s;
  -moz-transition:color .1s;
  -o-transition:color .1s;
  transition:color .1s;
}

a[class*="entypo-"]:before {
  top:8px;
  left:9px;
  font-size:1.5rem;
  color:white;
}

a:hover[class*="entypo-"]:before {
  color:white;
}


/* Zone GEO: Chaque ligne du menu (ul - li) est constituée
		d'un bouton et de son label
		d'une zone "figure" (qui pourrait contenir une image de fond)
			contenant une zone "figcaption" ( qui elle-même peut contenir des infos ou un formulaire)
*/

figure {
  position: absolute;
  top: 5%;
  left: 5%;
  margin: auto;
  width: 90% ;   /* au lieu de 1280 et 800 */
  height: 80% ;  /* si 90%: définit comme un rail sur lequel s'appuient les slides (qui de toutes façons ne descendront pas plus bas - même si height = 100%. OK si height de figure est à 100%  */
  display: block;
  /* utile? z-index: 0; */
  /* border: dotted 1px; */
}

zzfigure img {
  /*  sert pour les images de fond qd on les change en appuyant sur le bouton radio correspondant ... */
  bottom:0;
  left:0;
  display:block;
  width:80%;    /* au lieu de 1280 et 800 */
  height:100%;
  z-index:1;
  
  -webkit-transform:translateX(600px);
  -moz-transform:translateX(600px);
  -ms-transform:translateX(600px);
  -o-transform:translateX(600px);
  transform:translateX(600px);
  
  -webkit-transition:all .15s .15s, z-index 0s;
  -moz-transition:all .15s .15s, z-index 0s;
  -o-transition:all .15s .15s, z-index 0s;
  transition:all .15s .15s, z-index 0s;
}

/* changt nom des slides "figcaptionxx" --> G -< 6, VD -> 5, VU -> 4, HG -> 3,  figcaption -> 2                    */
/* width définit la largeur du slide qui vient en recouvrement ...   */
figcaption_2, figcaption_3, figcaption_4, figcaption_5, figcaption_6 {
  /*  tous les slides viennent maintenant de gauche  */
  position:absolute;
  top:0;
  left:-5%;
  display:block;
  /* width:20%;  */
  width:40%;
  height:95%;
  padding-top:20px;
  background-image:radial-gradient(rgba( 255,255,255,30), transparent);
  /* background-size: 270px 800px; */
  background-repeat:no-repeat;
  /* background-position: -100px 0px; */
  text-align:center;
  z-index:13;
  border: solid 2px red;
  
  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
  
  -webkit-transform:translateX(-620px);
  -moz-transform:translateX(-620px);
  -ms-transform:translateX(-620px);
  -o-transform:translateX(-620px);
  transform:translateX(-620px);
  
  -webkit-transition:all .35s;
  -moz-transition:all .35s;
  -o-transition:all .35s;
  transition:all .35s;
}

.entypo-forward h4 {
  display:inline-block;
  padding:0 25px;
  color:white;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:2rem;
}

figcaption_2 nav ul, figcaption_3 nav ul, figcaption_4 nav ul, figcaption_5 nav ul, figcaption_6 nav ul  {display:block;padding-top:10px;}
figcaption_2 nav ul li, figcaption_3 nav ul li, figcaption_4 nav ul li , figcaption_5 nav ul li, figcaption_6 nav ul li  {display:inline-block;margin-left:5px;}

figcaption_2 nav ul li a, figcaption_3 nav ul li a, figcaption_4 nav ul li a, figcaption_5 nav ul li a, figcaption_6 nav ul li a  {
  position:relative;
  display:block;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.2);
  text-decoration:none;
  color:white;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  
  -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
  
  -webkit-transition:all .15s;
  -moz-transition:all .15s;
  -o-transition:all .15s;
  transition:all .15s;
}

figcaption_2 nav ul li a:hover, figcaption_3 nav ul li a:hover, figcaption_4 nav ul li a:hover, figcaption_5 nav ul li a:hover, figcaption_6 nav ul li a:hover  {
  background:rgba(255,255,255,0);
  -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
  box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
}

figcaption_2 p, figcaption_3 p, figcaption_4 p, figcaption_5 p, figcaption_6 p {
  padding:50px 15px;
  font-family:'Titillium Web', sans-serif;
  font-weight:300;
  color:#333;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
  background-size:1px 100%;
  background-repeat:no-repeat;
  background-position:50% 0%;
}

input[type="radio"]:hover + label {
  background:rgba(255,255,255,0.6);
}

input[type="radio"]:checked + label {
  background:rgba(255,255,255,1);
  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
}

/*input[type="radio"]:checked + label:before {}*/

input[type="radio"]:checked ~ figure img {
  z-index:2;
  /*   pas d'impact (en tout cas, aucun impact sur les slides...) */
  -webkit-transform:translatex(0px);
  -moz-transform:translatex(0px);
  -ms-transform:translatex(0px);
  -o-transform:translatex(0px);
  transform:translatex(0px);
 
  -webkit-transition:all .15s, z-index 0s;
  -moz-transition:all .15s, z-index 0s;
  -o-transition:all .15s, z-index 0s;
  transition:all .15s, z-index 0s;
  
  
}

input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  /* les classes "entypo-forward" sont les classes des <figure>, "entypo-dribble" et "entypo-twitter" sont les classes des liens des slides */
  z-index:3;
  color:rgba(255,255,255,0.5);
  -webkit-transition:color .5s;
  -moz-transition:color .5s;
  -o-transition:color .5s;
  transition:color .5s;
}

input[type="radio"]:checked ~ figure figcaption_2, input[type="radio"]:checked  ~ figure figcaption_3, input[type="radio"]:checked  ~ figure figcaption_4, input[type="radio"]:checked  ~ figure figcaption_5, input[type="radio"]:checked  ~ figure figcaption_6 {
  /* c'est ici que se déclenchent les mvts des slides, qd un bouton est cliqué... */
  /* A l'affichage initial, CSS fait que chaque slide est translaté vers sa position de repli
     Quand on clique sur un bouton radio, le figcaption qui lui est associé (membre frère) est remis en position 0 (donc apparent à l'écran)
	 Question: comment sait-il qu'il faut faire une translation Horizontale ou Verticale et dans quel sens ?????  */
  /* z-index:8; */
  -webkit-transform:translateX(0px);
  -moz-transform:translateX(0px);
  -ms-transform:translateX(0px);
  -o-transform:translateX(0px);
  transform:translateX(0px);
  -webkit-transition:all .35s, .7s;
  -moz-transition:all .35s, .7s;
  -o-transition:all .35s, .7s;
  transition:all .35s, .7s;
}

figcaption_2 {
	/* correspond au formulaire FiltreGeo */
	/* de base les figcaption ont une largeur de 20% 
		changer cette largeur => synchroniser avec largeur de map3d ! */
	padding-left: 2% ;
	/* width: 22%;   pour modifier largeur slides */
	width: 40%;
}


/* paramètres des champs du formulaire de filtrage (AccèsGéo)  */
form[name=FiltreGeo] {
	font-size:0.8em;
	}
#zzFiltrePeriode {
	margin-left: 30%;
	}

#zzZTLibper  {
	/* zone libellé Période du Filtre Géo */
	position: relative ;
	float: left;
	display: in-line ;
	border: solid 1px;
	}
.FGLib {
	position: relative ;
	float: left;
	}
.FGChamp {
	position: relative;
	float: right;
	margin-right: 8%;
}		

#ZTLibMC {
	/* zone libellé Mots clés du Filtre Géo */
	position: relative ;
	float: left;
	display: in-line ;	
	border: solid 1px;
}



#RepListeD  {
	min-height: 90%;
}
#RepListe {
	max-width: 75%;	
}	
	
		
/* ----- h2 ne semble plus utilisé 
h2 {
  margin-top:150px;
  text-align:center;
  font-family: 'Titillium Web', sans-serif;
  font-weight:300;
  font-size:1.2rem;
}

h2 a {
  position:relative;
  color:tomato;
  text-decoration:none;
}

h2 a:after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:tomato;
  -webkit-transition:width .1s;
  -moz-transition:width .1s;
  -o-transition:width .1s;
  transition:width .1s;
}

h2 a:hover:after {
  width:100%;
}
*/


xbody {background:#f0f0f0;}    /*  fait un fond blanc derriere une image qui ne couvre par totalement l'écran...   */

xxhtml, xxbody {
  width:100%;
  height:100%;
}

#zzzZonClick {
	/* les z-index ne fonctionnent que si les champs sont "positionnés". d'où, ici, position absolute et z-index =10 pour le mettre sur le devant de la scène (y compris au-dessus des slides) ... */
	position: absolute;
	z-index:10;
	top: 0;
	height: 90%;
	width: 90%;
	border: solid 1px;
	}
	


/* container est l'Id du 1er tag <figure> , celui qui contient l'iframe de GE  */
#zzcontainer {
background: rgba(0, 0, 0, 0.8);
border-radius: 20px;
border: 3px solid #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
margin: 0 auto;
overflow: visible ; /* Has to be !important only if you're using an on/off switch */

position: relative;
top: 50px;
height: 800px;
width: 1300px;
z-index: 1; /* Has to be at least one increment larger in value than the Google Maps iframe z-index */

}