/* ----- ACCUEIL - COMMUN ---------------------------------------------------------------- */
/* Commun - Corps de la pages d'acceuil */
body {
	background-color: #275F8B; /* #275F8B doit pr compresser jpg correspondre couleur fond accueilNuage.jpg issu du png - bleu ciel proche du nuage */
	margin: 0%;
	font-family: "Times New Roman", Times, serif;
	}

/* --------- Cadre général contenant tout pour centrer l'ensemble --------- */
.accueilCadre2 {
	margin-top: 0%;
	margin-left: 0%;
	width: 100%; 
	height: 100%; 
}
/* Fond ciel */
#cl-ciel {
	margin-top: 0%;
	margin-left: 0%;
	left: 0%;
	top: 0%;
	height: 80%;
	width: 100%; 
	position: absolute;
	}
#ico-ciel {
	margin-top: 0%;
	margin-left: 0%;
	left: 0%;
	top: 0%;
	width: 100%; 
	height: 100%; 
	position: absolute;
	}
/* ----- Animation oiseau */
#cl-oiseau {
	margin-top: 0%;
	margin-left: 0%;
	left: 71%;
	top: 39%;
	width: 25%; 
	height: 25%;
	position: absolute;
    /* Navigateur Chrome, Safari, Opera */
    -webkit-animation-name: DeplaceOiseau; 
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    -webkit-animation-iteration-count: 1;
    animation-name: DeplaceOiseau; 
    animation-duration: 60s;
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    animation-iteration-count: 1;
	}
@-webkit-keyframes DeplaceOiseau { /* Navigateur Chrome, Safari, Opera */
    	0%   {left: 71%; top:36%; width: 25%;} 
    	8%   {left: 61%; top:45%; width: 20%;} 
    	16%  {left: 49%; top:48%; width: 30%;} 
    	25%  {left: 38%; top:44%; width: 20%;}
    	40%  {left: 23%; top:18%; width: 30%;} 
    	50%  {left: 35%; top:1%;  width: 20%;} 
    	60%  {left: 59%; top:1%;  width: 30%;} 
    	75%  {left: 53%; top:27%; width: 20%;} 
    	90%  {left: 72%; top:18%; width: 15%;} 
    	100% {left: 71%; top:39%; width: 25%;} 
		}
@keyframes DeplaceOiseau { 
    	0%   {left: 71%; top:36%; width: 25%;} 
    	8%   {left: 61%; top:45%; width: 20%;} 
    	16%  {left: 49%; top:48%; width: 30%;} 
    	25%  {left: 38%; top:44%; width: 20%;}
    	40%  {left: 23%; top:18%; width: 30%;} 
    	50%  {left: 35%; top:1%;  width: 20%;} 
    	60%  {left: 59%; top:1%;  width: 30%;} 
    	75%  {left: 53%; top:27%; width: 20%;} 
    	90%  {left: 72%; top:18%; width: 15%;} 
    	100% {left: 71%; top:39%; width: 25%;} 
		}
#ico-oiseau {
	width: 25%; 
	height: 20%; 
	}
/* ----- Fond salle */
#cl-salle {
	margin-top: 0%;
	margin-left: 0%;
	left: 0%;
	top: 36%;
	width: 100%; 
	height: 64%; 
	position: absolute;
	-webkit-clip-path: polygon(0 0, 1% 0, 1% 5%, 13% 20%, 25% 34%, 44% 43%, 59% 43%, 77% 35%, 99% 7%, 99% 0, 100% 0, 100% 100%, 0 100%);
	}
#cl-oculus {
	margin-top: 0%;
	margin-left: 0%;
	left: 39.8%;
	top: 16.6%;
	height: 23%;
	width: 22%; 
	position: absolute;
	-webkit-clip-path: circle(62.2% at 50% 50%);
	}
#cl-etoile {
	margin-top: 0%;
	margin-left: 0%;
	left: 47.3%;
	top: 21.5%;
	height: 7%;
	width: 7%; 
	position: absolute;
    /* Animation titre (navigateur Chrome, Safari, Opera) */
    -webkit-animation-name: DeplaceEtoile;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); /* ease-in-out;*/
    -webkit-animation-delay: 2s;
    -webkit-filter: hue-rotate(0deg);
    animation-name: DeplaceEtoile;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); /* ease-in-out;*/
    animation-delay: 2s;
    filter: hue-rotate(0deg);
	}
@-webkit-keyframes DeplaceEtoile { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 47.3%; top: 21.5%; width:7%; height:7%;} 
    	60%  {left: 47%;   top: 21%;   width:8%; height:8%; filter:hue-rotate(330deg);filter:saturate(10%)} 
    	100% {left: 47.3%; top: 21.5%; width:7%; height:7%;} 
		}
@keyframes DeplaceEtoile { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 47.3%; top: 21.5%; width:7%; height:7%;} 
    	60%  {left: 47%;   top: 21%;   width:8%; height:8%; filter:hue-rotate(330deg);filter:saturate(10%)} 
    	100% {left: 47.3%; top: 21.5%; width:7%; height:7%;} 
		}
/* ----- Titres */
#cl-titre-biblio {
	margin-top: 0%;
	margin-left: 0%;
	left: 1.6%;
	top: 46%;
	height: 15%;
	width: 20%; 
	position: absolute;
	z-index: 2;
	background-image:url('/img/accueil/titre-biblio.gif');
    background-size: 100% 100%;
    /* Animation titre (navigateur Chrome, Safari, Opera) */
    -webkit-animation-name: DeplaceTitreBiblio;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    animation-name: DeplaceTitreBiblio;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
	}
@-webkit-keyframes DeplaceTitreBiblio { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 1.6%; top:46%; width: 20%;height: 15%;} 
		}
@keyframes DeplaceTitreBiblio { 
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 1.6%; top:46%; width: 20%;height: 15%;} 
		}

#cl-titre-photo {
	margin-top: 0%;
	margin-left: 0%;
	left: 42.8%;
	top: 65.5%;
	height: 3.5%;
	width: 17%; 
	position: absolute;
	z-index: 2;
	background-image:url('/img/accueil/titre-photo.gif');
    background-size: 100% 100%;
    /* Animation titre (navigateur Chrome, Safari, Opera) */
    -webkit-animation-name: DeplaceTitrePhoto;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    animation-name: DeplaceTitrePhoto;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
	}
@-webkit-keyframes DeplaceTitrePhoto { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 42.8%; top:65.5%; width: 17%;height: 3.5%;} 
		}
@keyframes DeplaceTitrePhoto { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 42.8%; top:65.5%; width: 17%;height: 3.5%;} 
		}

#cl-titre-video {
	margin-top: 0%;
	margin-left: 0%;
	left: 79.7%;
	top: 47.9%;
	height: 14%;
	width: 19.8%; 
	position: absolute;
	z-index: 2;
	background-image:url('/img/accueil/titre-video.gif');
    background-size: 100% 100%;
    /* Animation titre (navigateur Chrome, Safari, Opera) */
    -webkit-animation-name: DeplaceTitreVideo;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    animation-name: DeplaceTitreVideo;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
	}
@-webkit-keyframes DeplaceTitreVideo { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 79.7%; top:47.9%; width: 19.8%;height: 14%;} 
		}
@keyframes DeplaceTitreVideo { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width: 1%; height: 1%;} 
    	100% {left: 79.7%; top:47.9%; width: 19.8%;height: 14%;} 
		}

#cl-titre-audio {
	margin-top: 0%;
	margin-left: 0%;
	left: 44.5%;
	top: 9.5%;
	height: 6%;
	width: 13%; 
	position: absolute;
	z-index: 2;
	background-image:url('/img/accueil/titre-audio.gif');
    background-size: 100% 100%;
    /* Animation titre (navigateur Chrome, Safari, Opera) */
    -webkit-animation-name: DeplaceTitreAudio;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    animation-name: DeplaceTitreAudio;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
	}
@-webkit-keyframes DeplaceTitreAudio { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width:1%; height:1%;} 
    	100% {left: 44.5%; top:9.5%;  width:13%; height:6%;} 
		}
@keyframes DeplaceTitreAudio { /* Animation titre (navigateur Chrome, Safari, Opera) */
    	0%   {left: 50%; top:24%; width:1%; height:1%;} 
    	100% {left: 44.5%; top:9.5%;  width:13%; height:6%;} 
		}

/* --------- Animation Bibliothèque --------- */
/* Zone clicable : forcer placement au-dessus de son image nécessairement affichée après (et donc naturellement dessus) afin d'utiliser l'opérateur tilde */
#biblio-zone, #photo-zone, #video-zone, #audio-zone {
	z-index: 3;
	}
/* Zone clicable et son image : même position se superposant */
#biblio-img {
	margin-top: 0%;
	margin-left: 0%;
	left: 0%;
	top: 0%;
	height: 58%;
	width: 44%; 
	position: absolute;
	-webkit-clip-path: polygon(34% 0, 100% 33%, 100% 35%, 96% 39%, 94% 44%, 94% 51%, 95% 56%, 98% 60%, 70% 84%, 58% 100%, 56% 100%, 30% 87%, 2% 69%, 0 65%, 0 0);
	}
#biblio-zone {
	margin-top: 0%;
	margin-left: 0%;
	left: 0%;
	top: 0%;
	height: 65%;
	width: 44%; 
	position: absolute;
	-webkit-clip-path: polygon(33% 0, 100% 32%, 93% 37%, 91% 49%, 95% 53%, 67% 76%, 56% 90%, 53% 89%, 48% 96%, 0% 77%, 0 65%, 0 0);
	}
/* Opérateur tilde ~ : l'évènement (hover) sur le 1er élément (zone clicable au dessus) transfert l'action (transform) sur le 2ème élément (image) frère (même parent) construit après et forcé en-dessous (afin que son déplacement ne le sorte pas de son hover ce qui le ferait revenir à sa position initiale à peine sorti) */
#biblio-zone:hover ~ #biblio-img {
	transition: all 550ms ease-in-out;
	-webkit-transform: translate(-75%,-20%);
}
#biblio-zone:hover ~ #cl-biblio {
	transition: all 1s ease-in-out;
	opacity: 1;
}
#biblio-zone:hover ~ #cl-livre {
	transition: all 3s ease-in-out;
	opacity: 1;
}
#biblio-zone:hover ~ #cl-titre-biblio {
	background-image:url('/img/accueil/titre-biblio-up.gif');
}

/* --------- Animation Photothèque --------- */
/* Zone clicable et son image : même position se superposant */
#photo-img {
	margin-top: 0%;
	margin-left: 0%;
	left: 23.8%;
	top: 33.5%;
	width: 55%;
	height: 30.8%;
	position: absolute;
	-webkit-clip-path: polygon(33% 0, 38% 11%, 43% 17%, 49% 19%, 55% 17%, 60% 11%, 65% 0, 82% 39%, 100% 79%, 100% 83%, 66% 100%, 35% 100%, 2% 82%, 0 79%, 3% 71%, 11% 46%, 32% 0);
	transform-origin: 0% 100%;
	}
#photo-zone {
	margin-top: 0%;
	margin-left: 0%;
	left: 23.8%;
	top: 33.5%;
	width: 55%;
	height: 36%;
	position: absolute;
	-webkit-clip-path: polygon(38% 11%, 49% 16%, 60% 11%, 64% 4%, 99% 70%, 66% 84%, 66% 100%, 34% 100%, 34% 84%, 1% 69%, 10% 46%, 33% 2%);
	transform-origin: 0% 100%;
	}
/* Opérateur tilde ~ : l'évènement (hover) sur le 1er élément transfert l'action (transform) sur le 2ème élément (image) */
#photo-zone:hover ~ #photo-img {
	transition: all 550ms ease-in-out;
	-webkit-transform: rotateX(75deg);
}
#photo-zone:hover ~ #cl-photo {
	transition: all 1s ease-in-out;
	opacity: 1;
}
#photo-zone:hover ~ #cl-image {
	transition: all 3s ease-in-out;
	opacity: 1;
}
#photo-zone:hover ~ #cl-titre-photo {
	background-image:url('/img/accueil/titre-photo-up.gif');
}

/* --------- Animation Videothèque --------- */
/* Zone clicable et son image : même position se superposant */
#video-img {
	margin-top: 0%;
	margin-right: 0%;
	right: 0%;
	top: 0%;
	width: 42.3%;
	height: 59%;
	position: absolute;
	-webkit-clip-path: polygon(0 33%, 84% 0%, 100% 0, 100% 63%, 98% 71%, 48% 100%, 47% 100%, 1% 60%, 3% 56%, 5% 52%, 5% 47%, 4% 41%, 0 35%);
	transform-origin: -22% 54%;
	}
#video-zone {
	margin-top: 0%;
	margin-right: 0%;
	right: 0%;
	top: 0%;
	width: 42.3%;
	height: 64%;
	position: absolute;
	-webkit-clip-path: polygon(2% 32%, 84% 0%, 100% 0, 100% 81%, 54% 99%, 50% 92%, 3% 55%, 9% 50%, 9% 39%);
	transform-origin: -22% 54%;
	}
/* Opérateur tilde ~ : l'évènement (hover) sur le 1er élément transfert l'action (transform) sur le 2ème élément (image) */
#video-zone:hover ~ #video-img {
	transition: all 550ms ease-in-out;
	-webkit-transform: translate(-10%,-20%) scale(0.1) rotateX(180deg)
	}
#video-zone:hover ~ #cl-video {
	transition: all 1s ease-in-out;
	opacity: 1;
}
#video-zone:hover ~ #cl-film {
	transition: all 3s ease-in-out;
	opacity: 1;
}
#video-zone:hover ~ #cl-titre-video {
	background-image:url('/img/accueil/titre-video-up.gif');
}

/* --------- Animation : Audiothèque --------- */
#audio-img {
	margin-top: 0%;
	margin-left: 0%;
	left: 12%;
	top: 0%;
	width: 85%;
	height: 22%;
	position: absolute;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 2%, 56% 100%, 55% 100%, 53% 90%, 49% 81%, 45% 79%, 42% 81%, 38% 90%, 36% 100%, 0 2%);
	transform-origin: -9% 46%;
	}
#audio-zone {
	margin-top: 0%;
	margin-left: 0%;
	left: 12%;
	top: 0%;
	width: 85%;
	height: 22%;
	position: absolute;
	-webkit-clip-path: polygon(0 0, 99% 0, 55% 92%, 51% 83%, 41% 82%, 36% 93%);
	transform-origin: -9% 46%;
	}
/* Opérateur tilde ~ : l'évènement (hover) sur le 1er élément transfert l'action (transform) sur le 2ème élément (image) */
#audio-zone:hover ~ #audio-img {
	transition: all 850ms ease-in-out;
	opacity: 0
}
#audio-zone:hover ~ #cl-audio {
	transition: all 1s ease-in-out;
	opacity: 1;
}
#audio-zone:hover ~ #cl-music {
	transition: all 3s ease-in-out;
	opacity: 1;
}
#audio-zone:hover ~ #cl-titre-audio {
	transition: all 600ms ease-in-out;
	opacity: 0
}

/* --------- Divers --------- */
/* Toutes les images occupe 100% de leurs div bien dimensionnés par ailleurs */
#ico-biblio , #ico-photo , #ico-video , #ico-audio, #ico-ciel, #ico-oculus, #ico-etoile, #ico-salle, #ico-livre, #ico-film, #bt-biblio, #bt-photo, #bt-video, #bt-audio {
	width: 100%; 
	height: 100%; 
	}
/* Images symbole des domaines */
#cl-livre {
	margin-top: 0%;
	margin-left: 0%;
	left: -3%;
	top: 27%;
	width: 25%;
	height: 26%;
	position: absolute;
	transform: rotate(28deg);
	opacity: 0;
   	}
#cl-film {
	margin-top: 0%;
	margin-left: 0%;
	left: 82%;
	top: 22%;
	width: 18%;
	height: 26%;
	position: absolute;
	opacity: 0;
	}
/* Boutons des domaines */
#cl-biblio {
	margin-top: 0%;
	margin-left: 0%;
	left: 20%;
	top: 22%;
	width: 15vmin;
	min-width: 70px;
	position: absolute;
	opacity: 0;
   	}
#cl-photo {
	margin-top: 0%;
	margin-left: 0%;
	left: 45%;
	top: 41%;
	width: 15vmin;
	min-width: 70px;
	position: absolute;
	opacity: 0;
   	}
#cl-video {
	margin-top: 0%;
	margin-left: 0%;
	left: 67%;
	top: 22%;
	width: 15vmin;
	min-width: 70px;
	position: absolute;
	opacity: 0;
   	}
#cl-audio {
	margin-top: 0%;
	margin-left: 0%;
	left: 46%;
	top: 1%;
	width: 15vmin;
	min-width: 70px;
	position: absolute;
	opacity: 0;
   	}