body
{
font-family: "colaborate-thinregular", Verdana, Arial, sans-serif;
cursor: url(images/boutons/carrerougeb15.png) 2 2, pointer;
scroll-behavior: smooth;
}
#logo /* Le logo */
{
	float: right;
	display: inline-block;
	position: relative;
	top: 20px;
	z-index: 4;
}
header
{
	height: 169px;
	transition: 2s;
	overflow: hidden;
}
header:hover /* La bannière survolée */
{
	height: 295px;
	transition: 2s;
}
section /* Balises englobantes chapitres pour toutes les sections */
{
	position: relative;
	width: 1024px;
	margin: auto;
	padding-top: 50px;
	padding-bottom: 20px;
}
h1
{
	font-family: osp-din, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

@font-face {
    font-family: "osp-din";
    src: url("osp-din/osp-din-webfont.woff2") format("woff2"),
         url("osp-din/osp-din-webfont.woff") format("woff"),
	url("osp-din/osp-din.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'colaborate-boldregular';
    src: url('colaborate_bold_macroman/ColabBol-webfont.eot');
    src: url('colaborate_bold_macroman/ColabBol-webfont.eot?#iefix') format('embedded-opentype'),
         url('colaborate_bold_macroman/ColabBol-webfont.woff') format('woff'),
         url('colaborate_bold_macroman/ColabBol-webfont.ttf') format('truetype'),
         url('colaborate_bold_macroman/ColabBol-webfont.svg#colaborate-boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'colaboratelightregular';
    src: url('colaborate_light_macroman/ColabLig-webfont.eot');
    src: url('colaborate_light_macroman/ColabLig-webfont.eot?#iefix') format('embedded-opentype'),
         url('colaborate_light_macroman/ColabLig-webfont.woff') format('woff'),
         url('colaborate_light_macroman/ColabLig-webfont.ttf') format('truetype'),
         url('colaborate_light_macroman/ColabLig-webfont.svg#colaboratelightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'colaborate-mediumregular';
    src: url('colaborate_medium_macroman/ColabMed-webfont.eot');
    src: url('colaborate_medium_macroman/ColabMed-webfont.eot?#iefix') format('embedded-opentype'),
         url('colaborate_medium_macroman/ColabMed-webfont.woff') format('woff'),
         url('colaborate_medium_macroman/ColabMed-webfont.ttf') format('truetype'),
         url('colaborate_medium_macroman/ColabMed-webfont.svg#colaborate-mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'colaborate-regularregular';
    src: url('colaborate_regular_macroman/ColabReg-webfont.eot');
    src: url('colaborate_regular_macroman/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('colaborate_regular_macroman/ColabReg-webfont.woff') format('woff'),
         url('colaborate_regular_macroman/ColabReg-webfont.ttf') format('truetype'),
         url('colaborate_regular_macroman/ColabReg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'colaborate-thinregular';
    src: url('colaborate_thin_macroman/ColabThi-webfont.eot');
    src: url('colaborate_thin_macroman/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('colaborate_thin_macroman/ColabThi-webfont.woff') format('woff'),
         url('colaborate_thin_macroman/ColabThi-webfont.ttf') format('truetype'),
         url('colaborate_thin_macroman/ColabThi-webfont.svg#colaborate-thinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face /* Valises des polices du site */
{
    font-family: 'greyscalebasicregular';
    src: url('greyscalebasic_regular_macroman/Greyscale_Basic_Regular-webfont.eot');
    src: url('greyscalebasic_regular_macroman/Greyscale_Basic_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('greyscalebasic_regular_macroman/Greyscale_Basic_Regular-webfont.woff') format('woff'),
         url('greyscalebasic_regular_macroman/Greyscale_Basic_Regular-webfont.ttf') format('truetype'),
         url('greyscalebasic_regular_macroman/Greyscale_Basic_Regular-webfont.svg#greyscalebasicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face
{
    font-family: 'BPdotsUnicase';

    src: url('polices/bpdotsunicase_regular_macroman/BPdotsUnicase-webfont.eot');

    src: url('polices/bpdotsunicase_regular_macroman/BPdotsUnicase-webfont.eot?#iefix') format('embedded-opentype'),

         url('polices/bpdotsunicase_regular_macroman/BPdotsUnicase-webfont.woff') format('woff'),

         url('polices/bpdotsunicase_regular_macroman/BPdotsUnicase-webfont.ttf') format('truetype'),

         url('polices/bpdotsunicase_regular_macroman/BPdotsUnicase-webfont.svg#BPdotsUnicase') format('svg');

}
@font-face
{
    font-family: 'letter-gothic-std';

    src: url('polices/letter-gothic-std/LetterGothicStd.woff') format('woff'),

         url('polices/letter-gothic-std/LetterGothicStd.otf') format('opentype');

}


#tout_menu /* Le menu */
{
	position: fixed;
	left: 10px;
	display:inline-block;
	z-index: 100;
	opacity: 1;
	transition: 1s;
}
#tout_menu:hover
{
	position: fixed;
	left: 10px;
	display:inline-block;
	z-index: 100;
	opacity: 1;
	transition: 1s;
}
nav
{
	display: inline-block;
	opacity: 1;
}
nav a
{
	text-decoration: none;
}
.m-0
{
}
.m-1
{
	transition: 0.2s;
}
.m-2
{
	transition: 0.2s;
}
.m-9
{
	width: 134px;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: underline;
	transition: 0.2s;
}
.m-4
{
	transition: 0.5s;
}
.m-5
{
	transition: 0.5s;
}
.m-7
{
	transition: 0.5s;
}
.m-8
{
	transition: 0.5s;
}
.m-9
{
	transition: 3s;
}
#exiti
{
	display: none;
	font-size: 0.8em;
	color: rgb(50,30,30);
	width: 220px;
}

.m-1 { background-position: left top; }
.m-2 { background-position: left top; }
.m-3 { background-position: left top; }
.m-4 { background-position: left top; }
.m-5 { background-position: left top; }
.m-6 { background-position: left top; }
.m-7 { background-position: left top; }
.m-8 { background-position: left top; }
.m-9 { background-position: left top; }

.m-0:hover 
{ 

}
.m-0:active 
{ 
}
.m-1:hover 
{
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-1:active 
{ 
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-2:hover 
{
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-2:active 
{
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-3:hover 
{ 
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-3:active 
{ 
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-4:hover 
{
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-4:active
{
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;	
}
.m-5:hover
{
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-5:active
{
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-7:hover 
{ 
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-7:active
{ 
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-8:hover 
{ 
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.2s;
}
.m-8:active
{ 
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}
.m-9:hover 
{ 
	font-size: 1.2em;
	text-decoration: underline;
	transition: 0.3s;
}
.m-9:hover #exiti
{
	display: inline-block;
}
.m-9:active
{ 
	text-transform: uppercase;
	transition: 0.2s;
	text-decoration: underline;
	font-size: 1.2em;
}

/* Fin du menu */

/* Chapitres */

#actualite 
{
	display: inline-block;
	width: 100%;
}
#actualite3
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#actualite3 h2 /* Les titres secondaires */
{	
	display: block;
	margin-left: 100px;
	vertical-align: top;
}
#actualite3 figure video
{
	display: block;
	width: 500px;
	margin: auto;
	padding: 10px;
}
#formation 
{
	background: white;
	display: inline-block;
	width: 100%;
}
#expositions
{
	background: white;
	display: inline-block;
	width: 100%;	
}
#travaux
{
	background: white;
	display: inline-block;
	width: 100%;
}
#conception
{
	background: white;
	display: inline-block;
	width: 100%;
}
#autre
{
	background: white;
	display: inline-block;
	width: 100%;
}
#demarche
{
	background: white;
	display: inline-block;
	width: 100%;
}
#materiau
{
	background: white;
	display: inline-block;
	width: 100%;
}
#contact
{
	display: inline-block;
	width: 100%;
}
#liens
{
	background: url(images/fond_mur2268.jpg);
	display: inline-block;
	width: 100%;
} /* Fin des chapitres */

#liens strong /* Les textes fort */
{
	font-size: 1.4em;	
}
a /* Tous les liens */
{
	text-decoration: underline;
	color: black;
	cursor: url(images/boutons/carrerouge15.png) 2 2, pointer;
}
h1 /* Les grands titres */
{
	padding-left: 280px;
	font-size: 2.5em;	
}
h2 /* Les titres secondaires */
{	
	display: inline-block;
	vertical-align: top;
	margin-left: 100px;
}
h3 /* Les titres tertiaires moins importants */
{
	padding-left: 100px;
	font-size: 1.8em;	
}
#liens h2 /* Les titres 2 du chapitre liens */
{
	padding-left: 200px;
	font-size: 1.8em;
}

/* Alignement des vignettes */

#entreleslignes , #lorgnettes
{
	display: inline-block;
	vertical-align: top;
}
#inegalites , #rien , #ligne
{
	display: inline-block;
	vertical-align: top;
}

#horscadre , #decadre , #rupture
{
	display: inline-block;
	vertical-align: top;
}

#mapraa
{
	display: inline-block;
	vertical-align: top;
}

#coeur , #cerveau , #intestins
{
	display: inline-block;
	vertical-align: top;
}

#xx-xy , #perdu , #bon
{
	display: inline-block;
	vertical-align: top;
}

#stop , #cbrise , #autonomie 
{
	display: inline-block;
	vertical-align: top;
}
#egalite , #dignite , #solidarite
{
	display: inline-block;
	vertical-align: top;
}
#liberte , #femme , #puzzle
{
	display: inline-block;
	vertical-align: top;
}
#conglo , #epatant , #jamais
{
	display: inline-block;
	vertical-align: top;
}
#eperdument , #contre , #repercussion , #airambiant
{
	display: inline-block;
	vertical-align: top;
}
#lasuite , #code , #endeux
{
	display: inline-block;
	vertical-align: top;
}
#endeux , #end , #desillusion
{
	display: inline-block;
	vertical-align: top;
}

#renouveau , #sans , #changement
{
	display: inline-block;
	vertical-align: top;
}
#colonnes , #sansentrave
{
	display: inline-block;
	vertical-align: top;
}
#dematerialisation , #cblanche , #murluz
{
	display: inline-block;
	vertical-align: top;
}
#ames , #lecairn , #infini
{
	display: inline-block;
	vertical-align: top;
}
#equilibre , #electrons , #paix
{
	display: inline-block;
	vertical-align: top;
}
#legerete , #fatima , #hommage
{
	display: inline-block;
	vertical-align: top;
}
#marie , #vache , #noeuds
{
	display: inline-block;
	vertical-align: top;
}
#dome , #maison
{
	display: inline-block;
	vertical-align: top;
}
#solcorse , #sphere
{
	display: inline-block;
	vertical-align: top;
}
#derndiag , #dernhori , #dernspi
{
	display: inline-block;
	vertical-align: top;
}
#dernvert , #derncroi , #dernpla
{
	display: inline-block;
	vertical-align: top;
}
#renverse , #indesirable , #renaissance
{
	display: inline-block;
	vertical-align: top;
}

p /* Style des paragraphes */
{
	margin-left: 80px;
	max-width: 800px;
	text-align: justify;
	padding-right: 80px;
}
figure /* Balise englobante des images */
{
	max-width: 1024px;
	width: auto;
	margin: auto;
}
.middle /* S'applique à tous les éléments dont la class est middle */
{
	display: block;
	width: auto;
	margin: auto;
}
img /* Toutes les images */
{
	vertical-align: top;
	display: inline-block;
}
table /* Tableaux */
{
	display: block;
	margin: auto;
	width: auto;
	border: none;
}
table tbody tr td:nth-child(1) /* Première colonne */
{
    width: 150px;
	font-weight: bold;
}
table tbody tr td:nth-last-child(1) /* Dernière colonne */
{
	font-weight: normal;
}
table caption /* Titre du tableau */
{
	width: auto;
	font-weight: bold;
	font-size: 1.2em;
	text-align: left;
	padding-left: 130px;
	padding-top: 20px;
	padding-bottom: 10px;
}
table thead /* Titre des colonnes */
{
	display: none;
}

/* image agrandie */
#mur20221
{
	width: 800px;
	display: block;
	margin: auto;
}
#recherche41
{
	width: 800px;
	display: block;
	margin: auto;
}
#recherche31
{
	width: 800px;
	display: block;
	margin: auto;
}
#recherche21
{
	width: 800px;
	display: block;
	margin: auto;
}
#recherche11
{
	width: 800px;
	display: block;
	margin: auto;
}
#capasse1
{
	width: 800px;
	display: block;
	margin: auto;
}
#pablo1
{
	width: 800px;
	display: block;
	margin: auto;
}
#etau1
{
	width: 800px;
	display: block;
	margin: auto;
}
#entreleslignes1
{
	width: 800px;
	display: block;
	margin: auto;
}
#lorgnettes1
{
	width: 800px;
	display: block;
	margin: auto;
}
#inegalites1
{
	width: 800px;
	display: block;
	margin: auto;
}
#rien1
{
	width: 800px;
	display: block;
	margin: auto;
}
#ligne1
{
	width: 800px;
	display: block;
	margin: auto;
}
#stop1 
{
	width: 800px;
	display: block;
	margin: auto;
}
#hors1
{
	width: 800px;
	display: block;
	margin: auto;
}
#dign001 
{
	width: 800px;
	display: block;
	margin: auto;
}
#decadre1 
{
	width: 800px;
	display: block;
	margin: auto;
}
#rupture1 
{
	width: 800px;
	display: block;
	margin: auto;
}

#solid001
{
	width: 650px;
	display: block;
	margin: auto;
}
#liber001
{
	width: 800px;
	display: block;
	margin: auto;
}
#fem001
{
	width: 550px;
	display: block;
	margin: auto;
}
#puz001
{
	width: 800px;
	display: block;
	margin: auto;
}
#a1 /* image agrandie coeur brisé */
{
	width: 600px;
	display: block;
	margin: auto;
}
#act001 /* première vignette d'actualité */
{
	width: 200px;
	display: inline-block;
	margin: auto;
	vertical-align: middle;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.act1 /* rectangle invisible cliquable dans actualité travaux */
{	
	display: inline-block;
	height: 210px;
	width: 240px;
	position: absolute;
	left: 600px;
	top: 390px;
	transition:2s;
	   transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.act1::before /* rectangle invisible cliquable dans actualité travaux chargé par le navigateur avant d'être vu */
{
	content: attr(title);
	color: rgba(255, 251, 251, 1);
	font-size: 1.5em;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;
		transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   


}
.act1:hover::before /* comportement du rectangle invisible cliquable dans actualité travaux */
{
	display: none;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
#act002 /* image vignette 2 */
{
	width: 265px;
	display: inline-block;
	margin: 20px;
	vertical-align: middle;
}
.act2 /* rectangle invisible cliquable dans actualité */
{
	height: 230px;
	width: 220px;
	position: absolute;
	display: inline-block;
	left: 540px;
	top: 730px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.act2::before /* zone cliquable alternative chargée avant par le navigateur */
{
	content: attr(title);
	color: black;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 0.8em;
	width: 130px;
	height: 180px;
	padding: 20% 25%;
	text-align: center;
	display: none;
		transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   


}
.act2:hover::before /* zone cliquable alternative chargée avant par le navigateur apparait ici au survol */
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
#act004 /* image vignette 2 */
{
	width: 265px;
	display: inline-block;
	margin: 20px;
	vertical-align: middle;
}
.act4 /* rectangle invisible cliquable dans actualité */
{
	height: 230px;
	width: 220px;
	position: absolute;
	display: inline-block;
	left: 390px;
	top: 340px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.act4::before /* zone cliquable alternative chargée avant par le navigateur */
{
	content: attr(title);
	color: white;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 0.8em;
	width: 130px;
	height: 180px;
	padding: 20% 25%;
	text-align: center;
	display: none;
		transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   


}
.act4:hover::before /* zone cliquable alternative chargée avant par le navigateur apparait ici au survol */
{
	display: inline-block;
	z-index: 4;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
#act005
{
	width: 265px;
	display: inline-block;
	margin: 20px;
	vertical-align: middle;
}
.act5
{
	height: 190px;
	width: 250px;
	position: absolute;
	display: inline-block;
	left: 390px;
	top: 40px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.act5::before /* zone cliquable alternative chargée avant par le navigateur */
{
	content: attr(title);
	color: white;
	font-size: 1.4em;
	font-weight: bold;
	line-height: 0.8em;
	width: 130px;
	height: 180px;
	padding: 20% 25%;
	text-align: center;
	display: none;
		transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   


}
.act5:hover::before /* zone cliquable alternative chargée avant par le navigateur apparait ici au survol */
{
	display: inline-block;
	z-index: 4;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
#act003 /* image vignette 3 */
{
	width: 300px;
	display: inline-block;
	margin: 20px;
	vertical-align: middle;
}
.act3 /* rectangle invisible cliquable dans actualité */
{
	height: 220px;
	width: 500px;
	position: absolute;
	display: inline-block;
	left: 260px;
	top: 710px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
	z-index: 2;
}
.act3::before /* zone cliquable alternative chargée avant par le navigateur */
{
	content: attr(title);
	color: white;
	font-size: 1.7em;
	font-weight: bold;
	line-height: 0.8em;
	width: 130px;
	height: 180px;
	padding: 20% 36%;
	text-align: center;
	display: none;
		transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   


}
.act3:hover::before /* zone cliquable alternative chargée avant par le navigateur apparait ici au survol */
{
	display: none;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}

#ligne001 
{
	width: 800px;
	display: block;
	margin: auto;
}
#intestins001 
{
	width: 800px;
	display: block;
	margin: auto;
}
#xx-xy001
{
	width: 800px;
	display: block;
	margin: auto;
}
#cerveau001 
{
	width: 800px;
	display: block;
	margin: auto;
}

#coeur001 
{
	width: 800px;
	display: block;
	margin: auto;
}	
#perdu001 
{
	width: 800px;
	display: block;
	margin: auto;
}
#bon001 
{
	width: 800px;
	display: block;
	margin: auto; 
}

#bon1 
{
	width: 900px;
	display: block;
	margin: auto; 
}
#diag1 /* convergence */
{
	width: 800px;
	display: block;
	margin: auto;
}
#hori001 /* horizon */
{
	width: 800px;
	display: block;
	margin: auto;
}
#spi001 /* spirale */
{
	width: 800px;
	display: block;
	margin: auto;
}
#vert001 /* fragilité */
{
	width: 800px;
	display: block;
	margin: auto;
}
#croi001 /* spirale */
{
	width: 800px;
	display: block;
	margin: auto;
}
#endeux001 /* crucifixion */
{
	width: 800px;
	display: block;
	margin: auto;
}
#ch001 /* Changement */
{
	width: 800px;
	display: block;
	margin: auto;
}
#code001 /* Code */
{
	width: 800px;
	display: block;
	margin: auto;
}
#cong001 /* CCV */
{
	width: 800px;
	display: block;
	margin: auto;
}
#contre001 /* Contre */
{
	width: 800px;
	display: block;
	margin: auto;
}
#air001 /* Air ambiant */
{
	width: 800px;
	display: block;
	margin: auto;
}
#egal001 /* Egalité */
{
	display: block;
	width: 800px;
	margin: auto;
}
#reperc001 /* Répercussion */
{
	display: block;
	margin-left: 60px;
}
#egal002 /* Egalité */
{
	position: absolute;
	left: 250px;
	width: 510px;
	height: 264px;
	top: 196px;
}
#egal003 /* Egalité */
{
	position: absolute;
	left: 503px;
	width: 266px;
	height: 516px;
	top: 198px;
}
#egal004 /* Egalité */
{
	position: absolute;
	left: 244px;
	width: 509px;
	height: 246px;
	top: 465px;
}
#electr /* Electrons */
{
	display: block;
	margin: auto;
}
#elec001
{
	height: 450px;
}
#elec002
{
	height: 450px;
}

#end001
{
	width: 800px;
	display: block;
	margin: auto;
}
#desil001
{
	width: 800px;
	display: block;
	margin: auto;
}
#epa001
{
	width: 500px;
	display: block;
	margin: auto;
}
#eper001
{
	width: 800px;
	display: block;
	margin: auto;
}
#eper002
{
	width: 500px;
	display: block;
	margin: auto;
}
#eper003
{
	width: 500px;
	display: block;
	margin: auto;
}
#equi001
{
	width: 800px;
	display: block;
	margin: auto;
}
#jam001
{
	display: block;
	margin: auto;
}
#sui001
{
	width: 800px;
	display: block;
	margin: auto;
}
#sui002
{
	width: 800px;
	display: block;
	margin: auto;
}
#sui003
{
	width: 800px;
	display: block;
	margin: auto;
}
#piq001
{
	width: 800px;
	display: block;
	margin: auto;
}
#leg001
{
	width: 1000px;
	display: block;
	margin: auto;
}
#pai001
{
	height: 500px;
	display: inline-block;
	margin: auto;
}
#pai002
{
	height: 500px;
	display: inline-block;
	margin: auto;
}
#ren001
{
	width: 800px;
	display: block;
	margin: auto;
}
#sans img
{
	width: 800px;
	display: block;
	margin: auto;
}
#dom001
{
	width: 900px;
	display: block;
	margin: auto;
}
#dom002
{
	width: 450px;
	display: inline;
	margin: auto;
}
#dom003
{
	width: 450px;
	display: inline;
	margin: auto;
}
#elm001
{
	height: 250px;
	display: inline;
	margin: auto;
}
#elm002
{
	height: 250px;
	display: inline;
	margin: auto;
}
#elm003
{
	height: 250px;
	display: inline;
	margin: auto;
}
#sol001
{
	height: 500px;
	display: inline;
	margin: auto;
}
#sol002
{
	height: 500px;
	display: inline;
	margin: auto;
}
#sph001
{
	height: 450px;
	display: inline;
	padding-right: 10px;
}
#sph002
{
	height: 450px;
	display: inline;
	margin: auto;
}
#murcb001
{
	height: 700px;
	display: inline;
	margin: auto;
}
#murluz001
{
	width: 1000px;
	display: block;
	margin: auto;
}
#murluz002
{
	width: 1000px;
	display: block;
	margin: auto;
}

#inf001
{
	height: 400px;
	display: inline;
}
#inf002
{
	height: 400px;
	display: inline;
}
#fat001
{
	height: 500px;
	display: inline;
	vertical-align: bottom;
}
#fat002
{
	height: 600px;
	display: inline;
}
#vache img
{
	height: 450px;
	margin-left: 5px;
}
#noeuds img
{
	height: 450px;
	margin-left: 5px;
}
/* fin des grandes images */

blockquote /* les citations */
{
	display: inline-block;
	font-family: "BPdotsUnicase", "courier new", courier, monospace;
	font-size: 1em;
	color: #FF0;
}
.auteur
{
	display: inline-block;
	font-family: "letter gothic std", "Courier New", Courier, monospace;
	font-size: 0.8em;
	padding-left: 100px;
	line-height: 0.2em;
	color: #999999;
}
.ss-titre /* sous-titre stop en gris */
{
	display: inline-block;
	font-family: "letter gothic std", "Courier New", Courier, monospace;
	font-size: 1.1em;
	padding-left: 280px;
	margin-top: -20px;
	line-height: 1.2em;
	color: #999999;
	width: 400px;
	text-align: justify;
}



.mur2022001 /* ça passe, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 410px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur2022001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.mur2022001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur2022001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mur2022001:active , .etau001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/images2022/mur2211200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 270px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.mur2022001:active::before
{
	color: white;
}
.mur20220011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur20220011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mur2022002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 290px;
	top: 1150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur2022002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.mur2022002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur2022002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.mur2022002:active , .mur2022002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/images2022/mur2221200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 880px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.mur20220021:active::before
{
	color: white;
}
.mur20220021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mur20220021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.recherche1001 /* Recherche1, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 480px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche1001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche1001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche1001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche1001:active , .recherche1001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/recherche1/recherche131200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: -50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche1001:active::before
{
	color: white;
}
.recherche10011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche10011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche1002 /* recherche1, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 500px;
	top: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche1002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.recherche1002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche1002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche1002:active , .recherche1002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/recherche1/recherche141200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 440px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche10021:active::before
{
	color: white;
}
.recherche10021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche10021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche2001 /* Recherche1, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 480px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche2001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche2001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche2001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche2001:active , .recherche1001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/recherche2/recherche231200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: -50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche2001:active::before
{
	color: white;
}
.recherche20011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche20011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche2002 /* recherche1, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 400px;
	top: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche2002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.recherche2002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche2002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche2002:active , .recherche2002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/recherche2/recherche241200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 440px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche20021:active::before
{
	color: white;
}
.recherche20021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche20021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}






.recherche3001 /* Recherche3, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche3001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche3001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche3001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche3001:active , .recherche1001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/recherche3/recherche321200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: -50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche3001:active::before
{
	color: white;
}
.recherche30011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche30011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche3002 /* recherche3, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 400px;
	top: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche3002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche3002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche3002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche3002:active , .recherche3002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/recherche3/recherche331200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 440px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche30021:active::before
{
	color: white;
}
.recherche30021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche30021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.recherche4001 /* Recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche4001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche4001:active , .recherche4001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/recherche4/recherche411200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche4001:active::before
{
	color: white;
}
.recherche40011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche40011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche4002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 300px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche4002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche4002:active , .recherche4002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/recherche4/recherche421200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche40021:active::before
{
	color: white;
}
.recherche40021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche40021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.recherche4003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 500px;
	top: 380px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.recherche4003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche4003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.recherche4003:active , .recherche4003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/recherche4/recherche431200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.recherche40031:active::before
{
	color: white;
}
.recherche40031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.recherche40031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.fenetre1001 /* Recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 360px;
	top: 260px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1001:active , .fenetre1001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/fenetres/fenetre1/fenetre121024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 100px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre1001:active::before
{
	color: white;
}
.fenetre10011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 110px;
	height: 100px;
	position: absolute;
	left: 280px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre1002:active , .fenetre1002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre1/fenetre131024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre10021:active::before
{
	color: white;
}
.fenetre10021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 420px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre1003:active , .fenetre1003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre1/fenetre141024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre10031:active::before
{
	color: white;
}
.fenetre10031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1004 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 460px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1004::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1004:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre1004:active , .fenetre1004:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre1/fenetre151024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre10041:active::before
{
	color: white;
}
.fenetre10041
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10041:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1005 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 350px;
	top: 430px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1005::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1005:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1005:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre1005:active , .fenetre1005:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre1/fenetre161024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre10051:active::before
{
	color: white;
}
.fenetre10051
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10051:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre1006 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 300px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1006::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre1006:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre1006:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre1006:active , .fenetre1006:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre1/fenetre171024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 170px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre10061:active::before
{
	color: white;
}
.fenetre10061
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre10061:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.fenetre2001 /* Recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 360px;
	top: 360px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre2001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 180px;
	height: 200px;
	position: absolute;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre2001:active , .fenetre2001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/fenetres/fenetre2/fenetre231200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 100px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre2001:active::before
{
	color: white;
}
.fenetre20011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre20011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre2002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 110px;
	height: 100px;
	position: absolute;
	left: 480px;
	top: 380px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre2002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 180px;
	height: 120px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre2002:active , .fenetre2002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre2/fenetre241200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre20021:active::before
{
	color: white;
}
.fenetre20021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre20021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre2003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 420px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre2003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 180px;
	height: 100px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre2003:active , .fenetre2003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre2/fenetre251200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 190px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre20031:active::before
{
	color: white;
}
.fenetre20031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre20031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre2004 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 360px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2004::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre2004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2004:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre2004:active , .fenetre2004:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre2/fenetre261200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre20041:active::before
{
	color: white;
}
.fenetre20041
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre20041:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fenetre2005 /* recherche4, la grande image */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 270px;
	top: 330px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2005::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.fenetre2005:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre2005:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fenetre2005:active , .fenetre2005:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/fenetres/fenetre2/fenetre271200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.fenetre20051:active::before
{
	color: white;
}
.fenetre20051
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fenetre20051:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}





.capasse001 /* ça passe, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 270px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.capasse001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.capasse001:active , .capasse001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/capasse/capasse-gp11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.capasse001:active::before
{
	color: white;
}
.capasse0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.capasse002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 300px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.capasse002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.capasse002:active , .capasse002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/capasse/capasse-gp21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.capasse0021:active::before
{
	color: white;
}
.capasse0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.capasse003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 500px;
	top: 680px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.capasse003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.capasse003:active , .capasse003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/capasse/capasse-gp31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 540px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.capasse0031:active::before
{
	color: white;
}
.capasse0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.capasse0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}




.pablo001 /* ça passe, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 620px;
	top: 800px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.pablo001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pablo001:active , .pablo001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/pablo/pablo21200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 440px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.pablo001:active::before
{
	color: white;
}
.pablo0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pablo002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 600px;
	top: 590px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.pablo002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pablo002:active , .pablo002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/pablo/pablo31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 280px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.pablo0021:active::before
{
	color: white;
}
.pablo0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pablo003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 520px;
	top: 880px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.pablo003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pablo003:active , .pablo003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/pablo/pablo41200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 540px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.pablo0031:active::before
{
	color: white;
}
.pablo0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pablo004 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo004::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.pablo004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo004:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pablo004:active , .pablo004:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/pablo/pablo51200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 440px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.pablo0041:active::before
{
	color: white;
}
.pablo0041
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pablo0041:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.etau001 /* ça passe, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 310px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.etau001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.etau001:active , .etau001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/etau/etau-gp21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.etau001:active::before
{
	color: white;
}
.etau0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.etau002 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 540px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.etau002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.etau002:active , .etau002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/etau/etau-gp31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 280px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.etau0021:active::before
{
	color: white;
}
.etau0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.etau003 /* recherche4, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 590px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}
.etau003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.etau003:active , .etau003:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/etau/etau-gp41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.etau0031:active::before
{
	color: white;
}
.etau0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.etau0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.lorgnettes001 /* ligne, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 190px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}.entreleslignes001 /* entre les lignes, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.entreleslignes001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.entreleslignes001:active , .entreleslignes001:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/entre/entre41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: -50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.entreleslignes001:active::before
{
	color: white;
}
.entreleslignes0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.entreleslignes002 /* entre les lignes, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 500px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.entreleslignes002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.entreleslignes002:active , .entreleslignes002:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/entre/entre21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.entreleslignes0021:active::before
{
	color: white;
}
.entreleslignes0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.entreleslignes003 /* entre les lignes, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 340px;
	top: 380px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.entreleslignes003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.entreleslignes003:active , .entreleslignes003:focus
{
	width: 900px;
	height: 511px;
	background-image: url(images/entre/entre31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.entreleslignes003:active::before
{
	color: white;
}
.entreleslignes0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.entreleslignes0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.lorgnettes001 /* ligne, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 100px;
	position: absolute;
	left: 190px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes001::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.lorgnettes001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 300px;
	left: 140px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.lorgnettes001:active , .lorgnettes001:focus
{
	width: 800px;
	height: 661px;
	background-image: url(images/lorgnettes/lorgnettesps21200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.lorgnettes001:active::before
{
	color: white;
}
.lorgnettes0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.lorgnettes002 /* la grande image */
{
	display: inline-block;
	width: 210px;
	height: 100px;
	position: absolute;
	left: 510px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes002::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.lorgnettes002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 340px;
	left: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.lorgnettes002:active , .lorgnettes002:focus
{
	width: 800px;
	height: 454px;
	background-image: url(images/lorgnettes/lorgnettesps31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 00px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.lorgnettes002:active::before
{
	color: white;
}
.lorgnettes0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.lorgnettes003 /* la grande image */
{
	display: inline-block;
	width: 210px;
	height: 110px;
	position: absolute;
	left: 200px;
	top: 840px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes003::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.lorgnettes003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 750px;
	left: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.lorgnettes003:active , .lorgnettes003:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/lorgnettes/lorgnettesps1200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 600px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.lorgnettes003:active::before
{
	color: white;
}
.lorgnettes0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.lorgnettes0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites001 /* ligne, la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 140px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites001::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 300px;
	left: 140px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites001:active , .inegalites001:focus
{
	width: 900px;
	height: 507px;
	background-image: url(images/inegalites/inegalitesps81024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites002 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 440px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites002::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 200px;
	left: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites002:active , .inegalites002:focus
{
	width: 820px;
	height: 452px;
	background-image: url(images/inegalites/inegalitesps31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites003 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 540px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites003::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 250px;
	left: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites003:active , .inegalites003:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites004 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 440px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites004::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites004:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 420px;
	left: 380px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites004:active , .inegalites004:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps51024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0041
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0041:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites005 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 140px;
	top: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites005::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites005:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites005:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 450px;
	left: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites005:active , .inegalites005:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 300px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0051
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0051:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites006 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 640px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites006::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites006:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites006:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 400px;
	left: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites006:active , .inegalites006:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 300px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0061
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0061:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites007 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 540px;
	top: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites007::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites007:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites007:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 650px;
	left: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites007:active , .inegalites007:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps61024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 300px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0071
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0071:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.inegalites008 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 140px;
	top: 700px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites008::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.inegalites008:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites008:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 650px;
	left: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.inegalites008:active , .inegalites008:focus
{
	width: 900px;
	height: 509px;
	background-image: url(images/inegalites/inegalitesps71024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.inegalites0081
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.inegalites0081:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien001 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 140px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien001::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 300px;
	left: 140px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien001:active , .rien001:focus
{
	width: 800px;
	height: 450px;
	background-image: url(images/rien/3xps51024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien002 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 640px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien002::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 200px;
	left: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien002:active , .rien002:focus
{
	width: 800px;
	height: 451px;
	background-image: url(images/rien/3xps21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien003 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 370px;
	top: 470px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien003::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 440px;
	left: 390px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien003:active , .rien003:focus
{
	width: 900px;
	height: 507px;
	background-image: url(images/rien/3xps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien004 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 240px;
	top: 700px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien004::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien004:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 700px;
	left: 240px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien004:active , .rien004:focus
{
	width: 900px;
	height: 507px;
	background-image: url(images/rien/3xps41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0041
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0041:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien005 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 600px;
	top: 530px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien005::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien005:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien005:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 520px;
	left: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien005:active , .rien005:focus
{
	width: 900px;
	height: 507px;
	background-image: url(images/rien/3xps31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0051
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0051:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rien006 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 480px;
	top: 670px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien006::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.rien006:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien006:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 670px;
	left: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rien006:active , .rien006:focus
{
	width: 900px;
	height: 507px;
	background-image: url(images/rien/3xps61024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 400px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.rien0061
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rien0061:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.ligne001 /* la grande image */
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 40px;
	top: 190px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne001::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 9% 10%;
	text-align: justify;
	display: none;
}

.ligne001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 160px;
	left: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.ligne001:active , .ligne001:focus
{
	width: 800px;
	height: 650px;
	background-image: url(images/ligne/ligneps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	overflow: visible;
}
.ligne0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.ligne002
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 570px;
	top: 130px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne002::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 15% 5%;
	text-align: justify;
	display: none;
}
.ligne002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne002:hover
{
	background-color: rgba(0, 0, 0, 0.7);
	width: 250px;
	height: 200px;
	position: absolute;
	top: 100px;
	left: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.ligne002:active
{
	width: 800px;
	height: 500px;
	background-image: url(images/ligne/ligneps21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.ligne0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne0021:hover
{
	background-color: rgba(0, 0, 0, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.ligne003
{
	display: inline-block;
	width: 130px;
	height: 100px;
	position: absolute;
	left: 250px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne003::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 5%;
	text-align: justify;
	display: none;
}
.ligne003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne003:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 300px;
	position: absolute;
	top: 100px;
	left: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.ligne003:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/ligne/ligneps31024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.ligne0031
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ligne0031:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rupture001 /* rupture, la grande image */
{
	display: inline-block;
	width: 150px;
	height: 120px;
	position: absolute;
	left: 340px;
	top: 550px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture001::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.rupture001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 480px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.rupture001:active , .rupture001:focus
{
	width: 1024px;
	height: 585px;
	background-image: url(images/rupture/ruptureps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 460px;
	left: -60px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.rupture0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.rupture002
{
	display: inline-block;
	width: 230px;
	height: 200px;
	position: absolute;
	left: 440px;
	top: 790px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture002::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.rupture002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 300px;
	position: absolute;
	top: 800px;
	left: 440px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.rupture002:active
{
	width: 1024px;
	height: 650px;
	background-image: url(images/rupture/ruptureps21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 340px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.rupture0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.rupture0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.decadre001 /* decadre, la grande image */
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 40px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre001::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.decadre001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 150px;
	left: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.decadre001:active , .decadre001:focus
{
	width: 800px;
	height: 670px;
	background-image: url(images/decadre/decadreps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.decadre0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.decadre002
{
	display: inline-block;
	width: 230px;
	height: 250px;
	position: absolute;
	left: 300px;
	top: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre002::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 25% 30%;
	text-align: justify;
	display: none;
}
.decadre002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 300px;
	position: absolute;
	top: 480px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.decadre002:active
{
	width: 1000px;
	height: 550px;
	background-image: url(images/decadre/decadreps21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 400px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.decadre0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.decadre0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.hors001 /* Hors-cadre, la grande image */
{
	display: inline-block;
	width: 250px;
	height: 180px;
	position: absolute;
	left: 340px;
	top: 750px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors001::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.hors001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 780px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.hors001:active , .hors001:focus
{
	width: 910px;
	height: 600px;
	background-image: url(images/horscadre/horscadre21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 360px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.hors0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.hors002
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 350px;
	top: 270px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors002::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.hors002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors002:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 300px;
	position: absolute;
	top: 250px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.hors002:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/horscadre/horscadreps11024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 180px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.hors0021
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hors0021:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.intestins1
{
	display: inline-block;
	width: 230px;
	height: 200px;
	position: absolute;
	left: 480px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.intestins1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 300px;
	height: 300px;
	position: absolute;
	top: 460px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.intestins1:active
{
	width: 1000px;
	height: 604px;
	background-image: url(images/intestins/intestinsps1024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 200px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.intestins11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.intestins2
{
	display: inline-block;
	width: 230px;
	height: 200px;
	position: absolute;
	left: 150px;
	top: 270px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins2::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.intestins2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.intestins2:active
{
	width: 1000px;
	height: 604px;
	background-image: url(images/intestins/intestinsps21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 140px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.intestins21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.intestins21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.cerveau1
{
	display: inline-block;
	width: 170px;
	height: 200px;
	position: absolute;
	left: 350px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau1::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cerveau1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cerveau1:active
{
	width: 1000px;
	height: 630px;
	background-image: url(images/cerveau/cerveaups1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 80px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.cerveau11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.cerveau2
{
	display: inline-block;
	width: 170px;
	height: 200px;
	position: absolute;
	left: 600px;
	top: 760px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau2::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cerveau2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 200px;
	height: 230px;
	top: 720px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cerveau2:active
{
	width: 1000px;
	height: 633px;
	background-image: url(images/cerveau/cerveaups21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 380px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 1;
}
.cerveau21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cerveau21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.coeur1
{
	display: inline-block;
	width: 230px;
	height: 230px;
	position: absolute;
	left: 270px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
#coeur p
{
margin-left: 80px;
}
.coeur1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.coeur1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.coeur1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.coeur1:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/coeur/coeurps1024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 200px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.coeur11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.coeur11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.coeur2
{
	display: inline-block;
	width: 230px;
	height: 230px;
	position: absolute;
	left: 250px;
	top: 790px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.coeur2::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.coeur2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.coeur2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 700px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.coeur2:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/coeur/coeurps21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 540px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.coeur21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.coeur21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.xx-xy1
{
	display: inline-block;
	width: 170px;
	height: 100px;
	position: absolute;
	left: 130px;
	top: 270px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy1::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.xx-xy1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 230px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.xx-xy1:active
{
	width: 1000px;
	height: 380px;
	background-image: url(images/xx-xy/xx-xyps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 100px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.xx-xy11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.xx-xy2
{
	display: inline-block;
	width: 170px;
	height: 100px;
	position: absolute;
	left: 600px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.xx-xy2::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.xx-xy2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 200px;
	height: 230px;
	top: 220px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.xx-xy2:active
{
	width: 1000px;
	height: 340px;
	background-image: url(images/xx-xy/xx-xyps21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.xx-xy21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.xx-xy3
{
	display: inline-block;
	width: 170px;
	height: 100px;
	position: absolute;
	left: 400px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy3::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.xx-xy3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 220px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.xx-xy3:active
{
	width: 800px;
	height: 320px;
	background-image: url(images/xx-xy/xx-xyps31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.xx-xy31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.xx-xy31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.perdu1
{
	display: inline-block;
	width: 350px;
	height: 270px;
	position: absolute;
	left: 150px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.perdu1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.perdu1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.perdu1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.perdu1:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/perdu/perdups2.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 130px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.perdu11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 190px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.perdu11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.perdu2
{
	display: inline-block;
	width: 330px;
	height: 300px;
	position: absolute;
	left: 450px;
	top: 470px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.perdu2::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.perdu2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.perdu2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 460px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.perdu2:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/perdu/perdups1024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	top: 240px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.perdu21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.perdu21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}



.bon1 /* Transition rectangle blanc sélection image 1 */
{
	display: inline-block;
	width: 250px;
	height: 180px;
	position: absolute;
	left: 340px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
 }
.bon1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.bon1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.bon1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 380px;
	left: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.bon1:active
{
	width: 1000px;
	height: 660px;
	background-image: url(images/boncote/boncoteps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.bon11 /* loupe */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.bon11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.hori1 /* Transition rectangle blanc sélection image 1 */
{
	display: inline-block;
	width: 350px;
	height: 280px;
	position: absolute;
	left: 390px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hori1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.hori1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hori1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 500px;
	left: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.hori1:active
{
	width: 1000px;
	height: 750px;
	background-image: url(images/derniere/derniere2d1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.hori11 /* loupe */
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.hori11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.diag001
{
	display: inline-block;
	width: 250px;
	height: 180px;
	position: absolute;
	left: 340px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
 }
.diag001::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.diag001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.diag001:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 480px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.diag001:active , .diag001:focus
{
	width: 900px;
	height: 650px;
	background-image: url(images/derniere/derniere1d21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 180px;
	left: -60px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.diag0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.diag0011:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.spi1
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 240px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.spi1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.spi1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.spi1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 180px;
	left: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.spi1:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/derniere/derniere3d21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 120px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.spi11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.spi11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.spi2
{
	display: inline-block;
	width: 150px;
	height: 180px;
	position: absolute;
	left: 340px;
	top: 430px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.spi2::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.spi2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.spi2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 380px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.spi2:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/derniere/derniere3d11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 80px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.spi21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.spi21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.vert1
{
	display: inline-block;
	width: 200px;
	height: 140px;
	position: absolute;
	left: 300px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.vert1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 300px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.vert1:active
{
	width: 1000px;
	height: 750px;
	background-image: url(images/derniere/derniere4d11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 90px;
	left: -50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.vert11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.vert2
{
	display: inline-block;
	width: 200px;
	height: 130px;
	position: absolute;
	left: 300px;
	top: 660px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert2::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.vert2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 600px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.vert2:active
{
	width: 900px;
	height: 602px;
	background-image: url(images/derniere/fragiliteps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 190px;
	left: -60px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.vert21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.vert3
{
	display: inline-block;
	width: 200px;
	height: 140px;
	position: absolute;
	left: 550px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.vert3::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.vert3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert3:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 400px;
	left: 570px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.vert3:active
{
	width: 800px;
	height: 607px;
	background-image: url(images/derniere/derniere4d21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 160px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.vert31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.vert31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.accu1
{
	display: inline-block;
	width: 200px;
	height: 140px;
	position: absolute;
	left: 140px;
	top: 250px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.accu1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 180px;
	left: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.accu1:active
{
	width: 988px;
	height: 654px;
	background-image: url(images/derniere/accups1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.accu11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.accu2
{
	display: inline-block;
	width: 150px;
	height: 130px;
	position: absolute;
	left: 440px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu2::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.accu2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 380px;
	left: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.accu2:active
{
	width: 890px;
	height: 588px;
	background-image: url(images/derniere/accups21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 290px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.accu21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.accu21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pla1
{
	display: inline-block;
	width: 200px;
	height: 150px;
	position: absolute;
	left: 250px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.pla1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.pla1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 320px;
	left: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pla1:active
{
	width: 600px;
	height: 450px;
	background-image: url(images/derniere/architecturegp11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 80px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.pla11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pla2
{
	display: inline-block;
	width: 200px;
	height: 120px;
	position: absolute;
	left: 190px;
	top: 490px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.pla2::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.pla2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 480px;
	left: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pla2:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/derniere/derniere6d41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 90px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.pla21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pla3
{
	display: inline-block;
	width: 200px;
	height: 160px;
	position: absolute;
	left: 500px;
	top: 220px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.pla3::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.pla3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla3:hover
{
	background-color: rgba(0, 0, 0, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 220px;
	left: 530px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pla3:active
{
	width: 800px;
	height: 500px;
	background-image: url(images/derniere/derniere7d1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.pla31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.pla4
{
	display: inline-block;
	width: 200px;
	height: 150px;
	position: absolute;
	left: 600px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.pla4::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.pla4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla4:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 420px;
	left: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.pla4:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/derniere/derniere6d21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 240px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.pla41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.pla41:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux1
{
	display: inline-block;
	width: 150px;
	height: 80px;
	position: absolute;
	left: 140px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.endeux1::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.endeux1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 360px;
	left: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux1:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/endeux/en-deuxgp61024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.endeux11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux2
{
	display: inline-block;
	width: 170px;
	height: 80px;
	position: absolute;
	left: 340px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.endeux2::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.endeux2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	top: 220px;
	left: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux2:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/endeux/en-deuxgp101024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.endeux21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux3
{
	display: inline-block;
	width: 170px;
	height: 80px;
	position: absolute;
	left: 510px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.endeux3::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.endeux3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux3:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 480px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux3:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/endeux/en-deuxgp41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.endeux31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 150px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.endeux31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 150px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux4
{
	display: inline-block;
	width: 170px;
	height: 80px;
	position: absolute;
	left: 310px;
	top: 610px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.endeux4::before
{
	content: attr(title);
	color: #666666;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.endeux4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.endeux4:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.endeux4:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/endeux/en-deuxgp21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 140px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.endeux41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.endeux41:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.auto1
{
	display: inline-block;
	width: 150px;
	height: 200px;
	position: absolute;
	left: 150px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.auto1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 20px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.auto1:active
{
	width: 884px;
	height: 660px;
	background-image: url(images/autonomie/autonomie1detail21824.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 10px;
	left: -30px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.auto1:checked
{
	width: 800px;
	height: 600px;
	background-image: url(images/autonomie/autonomie1detail21824.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 0px;
	left: 50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
#auto001
{
	width: 700px;
	display: block;
	margin: auto;
}
.auto11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.auto2
{
	display: inline-block;
	width: 130px;
	height: 130px;
	position: absolute;
	left: 250px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.auto2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.auto2:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/autonomie/autonomie2detail11824.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 90px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.auto21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.auto3
{
	display: inline-block;
	width: 130px;
	height: 130px;
	position: absolute;
	left: 400px;
	top: 230px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.auto3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.auto3:active
{
	width: 830px;
	height: 620px;
	background-image: url(images/autonomie/autonomie1detail31824.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 50px;
	left: -30px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.auto31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.auto4
{
	display: inline-block;
	width: 230px;
	height: 150px;
	position: absolute;
	left: 400px;
	top: 420px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto4::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding-left: 50%;
	padding-top: 50%;
	text-align: justify;
	display: none;
}
.auto4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto4:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 400px;
	left: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.auto4:active
{
	width: 980px;
	height: 790px;
	background-image: url(images/autonomie/autonomie3detail11749.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 0px;
	left: -10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 100;
}
.auto41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.auto41:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.stop001
{
	display: inline-block;
	width: 320px;
	height: 170px;
	position: absolute;
	left: 130px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop001::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.stop001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop001:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 290px;
	left: 150px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.stop001:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/stop/stopps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 190px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.stop0011
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop0011:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.stop002
{
	display: inline-block;
	width: 270px;
	height: 200px;
	position: absolute;
	left: 500px;
	top: 250px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop002::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 10% 10%;
	text-align: justify;
	display: none;
}
.stop002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop002:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 200px;
	height: 270px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
    z-index: 10;
}

.stop002:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/stop/stopps21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 190px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.stop0022
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 35px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.stop0022:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 40px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.dign1
{
	display: inline-block;
	width: 140px;
	height: 140px;
	position: absolute;
	left: 360px;
	top: 420px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign1::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.dign1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.dign1:active
{
	width: 1000px;
	height: 667px;
	background-image: url(images/dignite/dignite21200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 120px;
	left: -10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.dign11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.dign2
{
	display: inline-block;
	width: 120px;
	height: 140px;
	position: absolute;
	left: 500px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign2::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.dign2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 200px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.dign2:active
{
	width: 1000px;
	height: 667px;
	background-image: url(images/dignite/dignite31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 120px;
	left: -100px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.dign21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.dign3
{
	display: inline-block;
	width: 170px;
	height: 140px;
	position: absolute;
	left: 160px;
	top: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign3::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.dign3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.dign3:active
{
	width: 1000px;
	height: 566px;
	background-image: url(images/dignite/dignite-gp11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 180px;
	left: -100px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.dign31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.dign4
{
	display: inline-block;
	width: 170px;
	height: 200px;
	position: absolute;
	left: 500px;
	top: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign4::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.dign4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign4:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.dign4:active
{
	width: 1000px;
	height: 566px;
	background-image: url(images/dignite/dignite-gp31024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 250px;
	left: -100px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.dign41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign41:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.dign5
{
	display: inline-block;
	width: 170px;
	height: 120px;
	position: absolute;
	left: 100px;
	top: 670px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign5::before
{
	content: attr(title);
	color: white;
	width: 120px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.dign5:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign5:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	top: 540px;
	left: 120px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.dign5:active
{
	width: 1000px;
	height: 566px;
	background-image: url(images/dignite/dignite-gp21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 260px;
	left: -100px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 0.9;
}
.dign51
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dign51:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.solid1
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 530px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.solid1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 500px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.solid1:active
{
	width: 1000px;
	height: 500px;
	background-image: url(images/solidarite/solidariteps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 300px;
	left: 10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.solid11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.solid2
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	left: 580px;
	top: 650px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.solid2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 560px;
	top: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.solid2:active
{
	width: 1000px;
	height: 500px;
	background-image: url(images/solidarite/solidarite-gp1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 300px;
	left: 10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.solid21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.solid3
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 390px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid3::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.solid3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 350px;
	top: 180px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.solid3:active
{
	width: 1000px;
	height: 520px;
	background-image: url(images/solidarite/solidarite-gp11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 100px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.solid31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.solid31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.liber1
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 400px;
	top: 280px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.liber1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 340px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.liber1:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/liberte/liberte31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 100px;
	left: 60px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.liber11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.liber2
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 130px;
	top: 190px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber2::before
{
	content: attr(title);
	color: black;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.liber2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 230px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.liber2:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/derniere/reconnaissance-gp21024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 120px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.liber21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 70px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.liber21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.fem1
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 170px;
	top: 270px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.fem1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fem1:active
{
	width: 890px;
	height: 505px;
	background-image: url(images/derniere/femme-gp11024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 80px;
	left: -10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.fem11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fem2
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 410px;
	top: 310px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.fem2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 220px;
	height: 190px;
	position: absolute;
	left: 450px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fem2:active
{
	width: 880px;
	height: 500px;
	background-image: url(images/derniere/femme-gp51024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 80px;
	left: 10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.fem21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fem3
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 310px;
	top: 910px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem3::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.fem3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 220px;
	height: 190px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.fem3:active
{
	width: 880px;
	height: 499px;
	background-image: url(images/derniere/femme-gp41024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 620px;
	left: 10px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.fem31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.fem31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.puz1
{
	display: inline-block;
	width: 380px;
	height: 150px;
	position: absolute;
	left: 350px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.puz1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 370px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.puz1:active
{
	width: 850px;
	height: 500px;
	background-image: url(images/puzzle/puzzleps1024.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 130px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.puz11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.puz2
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 370px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.puz2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 300px;
	top: 650px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.puz2:active
{
	width: 400px;
	height: 600px;
	background-image: url(images/puzzle/puzzle2800.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 230px;
	left: 280px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.puz21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.puz3
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 570px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz3::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.puz3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 500px;
	top: 750px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.puz3:active
{
	width: 800px;
	height: 530px;
	background-image: url(images/puzzle/puzzle31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 430px;
	left: 180px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.puz31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.puz31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 90px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.cb1
{
	display: inline-block;
	width: 200px;
	height: 174px;
	position: absolute;
	left: 200px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb1:active
{
	width: 800px;
	height: 600px;
	background-image: url(images/cbar/cbacdetail11824.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 90px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.cb2
{
	display: inline-block;
	width: 230px;
	height: 174px;
	position: absolute;
	left: 265px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb2:active
{
	width: 580px;
	height: 770px;
	background-image: url(images/cbar/cbacdetail21368.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 50px;
	top: 50px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.cb3
{
	display: inline-block;
	width: 230px;
	height: 174px;
	position: absolute;
	left: 400px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb3:active
{
	width: 970px;
	height: 550px;
	background-image: url(images/cbar/coeur-brise-gp1024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -20px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.cb4
{
	display: inline-block;
	width: 150px;
	height: 134px;
	position: absolute;
	left: 365px;
	top: 570px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb4::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb4:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 450px;
	left: 420px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb4:active
{
	width: 960px;
	height: 545px;
	background-image: url(images/cbar/coeur-brise-gp21024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 290px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb41:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.cb5
{
	display: inline-block;
	width: 150px;
	height: 174px;
	position: absolute;
	left: 460px;
	top: 390px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb5::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb5:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb5:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 390px;
	left: 460px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb5:active
{
	width: 920px;
	height: 520px;
	background-image: url(images/cbar/coeur-brise-gp31024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 40px;
	top: 200px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb51
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb51:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.cb6
{
	display: inline-block;
	width: 130px;
	height: 114px;
	position: absolute;
	left: 165px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cb6::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cb6:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb6:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 80px;
	left: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cb6:active
{
	width: 800px;
	height: 460px;
	background-image: url(images/cbar/coeur-brise-gp41024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cb61
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cb61:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.reperc1
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 260px;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.reperc1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.reperc1:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/repercussion/repercussion3900.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 240px;
	left: -70px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.reperc11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.reperc2
{
	display: inline-block;
	width: 130px;
	height: 130px;
	position: absolute;
	left: 480px;
	top: 370px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.reperc2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.reperc2:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/repercussion/repercussion2900.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 300px;
	left: -70px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.reperc21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.reperc3
{
	display: inline-block;
	width: 130px;
	height: 130px;
	position: absolute;
	left: 360px;
	top: 540px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.reperc3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.reperc3:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/repercussion/repercussion4900.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 280px;
	left: -70px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.reperc31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.reperc31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.ch1 /* changement */
{
	display: inline-block;
	width: 370px;
	height: 400px;
	position: absolute;
	left: 490px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.ch1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.ch1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ch1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.ch1:active
{
	width: 400px;
	height: 600px;
	background-image: url(images/changement/changementdet3-819.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 370px;
	top: 100px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.ch11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ch11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.ch2
{
	display: inline-block;
	width: 370px;
	height: 400px;
	position: absolute;
	left: 480px;
	top: 780px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.ch2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.ch2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ch2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 360px;
	position: absolute;
	top: 780px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.ch2:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/changement/changement-det11229.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 10px;
	top: 540px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.ch21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.ch21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.code1
{
	display: inline-block;
	width: 320px;
	height: 400px;
	position: absolute;
	left: 190px;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.code1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.code1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 230px;
	position: absolute;
	top: 200px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.code1:active
{
	width: 800px;
	height: 600px;
	background-image:  url(images/code/code41024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 180px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
	opacity: 1;
}
.code11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.code2
{
	display: inline-block;
	width: 370px;
	height: 60px;
	position: absolute;
	left: 480px;
	top: 190px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.code2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.code2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 120px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.code2:active
{
	width: 900px;
	height: 300px;
	background-image: url(images/code/code31024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: -40px;
	top: 170px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.code21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 190px;
	top: 10px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.code3
{
	display: inline-block;
	width: 370px;
	height: 100px;
	position: absolute;
	left: 480px;
	top: 450px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.code3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.code3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 120px;
	position: absolute;
	top: 450px;
	left: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.code3:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/code/code21024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: -40px;
	top: 70px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.code31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.code31:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 190px;
	top: 10px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}


.air1
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 630px;
	top: 720px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.air1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 600px;
	top: 680px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.air1:active
{
	width: 600px;
	height: 900px;
	background-image: url(images/air_ambiant/air-ambiant21200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 100px;
	left: 60px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.air11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.air2
{
	display: inline-block;
	width: 180px;
	height: 150px;
	position: absolute;
	left: 500px;
	top: 490px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.air2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 280px;
	height: 200px;
	position: absolute;
	left: 480px;
	top: 480px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.air2:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/air_ambiant/air-ambiant31200.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	top: 200px;
	left: 0px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}

.air21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.air21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 80px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.cong1
{
	display: inline-block;
	width: 330px;
	height: 370px;
	position: absolute;
	left: 150px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cong1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cong1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cong1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cong1:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/ccv/ccv-gp41024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 10px;
	top: 200px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cong11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cong11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.cong2
{
	display: inline-block;
	width: 330px;
	height: 300px;
	position: absolute;
	left: 150px;
	top: 570px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.cong2::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.cong2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cong2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 500px;
	height: 300px;
	position: absolute;
	top: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.cong2:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/ccv/ccv-gp51024.jpg);
	background-repeat: no-repeat;
	position: absolute;
	left: 10px;
	top: 240px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.cong21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 90px;
	top: 110px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.cong21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 100px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.contre1
{
	display: inline-block;
	width: 270px;
	height: 150px;
	position: absolute;
	left: 440px;
	top: 240px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.contre1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.contre1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 150px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.contre1:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/contre/contre-toi-det11229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -50px;
	top: 160px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.contre11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.contre2
{
	display: inline-block;
	width: 370px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.contre2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.contre2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 150px;
	position: absolute;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.contre2:active
{
	width: 1000px;
	height: 241px;
	background-image: url(images/contre/contre-toi1276.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -150px;
	top: 340px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.contre21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.contre3
{
	display: inline-block;
	width: 350px;
	height: 150px;
	position: absolute;
	left: 250px;
	top: 500px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.contre3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.contre3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 150px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.contre3:active
{
	width: 800px;
	height: 528px;
	background-image: url(images/contre/contre-toi-det31229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 170px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.contre31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.contre31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.egal1
{
	display: inline-block;
	width: 150px;
	height: 155px;
	position: absolute;
	left: 360px;
	top: 195px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 1;
}
.egal1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.egal1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.egal1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 180px;
	position: absolute;
	top: 195px;
	left: 380px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.egal1:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/egalite/egalite21024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -55px;
	top: 185px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.egal2
{
	display: inline-block;
	width: 225px;
	height: 140px;
	position: absolute;
	left: 305px;
	top: 505px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 1;
}
.egal2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.egal2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.egal2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 180px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.egal2:active
{
	width: 1000px;
	height: 570px;
	background-image: url(images/egalite/egalite31024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -100px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.egal3
{
	display: inline-block;
	width: 220px;
	height: 170px;
	position: absolute;
	left: 110px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.egal3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.egal3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.egal3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 180px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.egal3:active
{
	width: 900px;
	height: 511px;
	background-image: url(images/egalite/egalite41024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -40px;
	top: 105px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.emer1
{
	display: inline-block;
	width: 460px;
	height: 250px;
	position: absolute;
	left: 290px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.emer1:hover
{
	width: 1000px;
	height: 600px;
	background-image: url(images/emergence/emergencedet21024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 10px;
	top: 360px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.end1
{
	display: inline-block;
	width: 400px;
	height: 200px;
	position: absolute;
	left: 110px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.end1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.end1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 150px;
	position: absolute;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.end1:active
{
	width: 1000px;
	height: 666px;
	background-image: url(images/end/the-end21229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -10px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.end11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.end2
{
	display: inline-block;
	width: 260px;
	height: 150px;
	position: absolute;
	left: 370px;
	top: 410px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.end2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.end2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 260px;
	height: 150px;
	position: absolute;
	top: 400px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.end2:active
{
	width: 1000px;
	height: 600px;
	background-image: url(images/end/the-end-det61284.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -100px;
	top: 150px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.end21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 140px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.end3
{
	display: inline-block;
	width: 200px;
	height: 150px;
	position: absolute;
	left: 670px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.end3::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.end3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end3:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 260px;
	height: 150px;
	position: absolute;
	top: 200px;
	left: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.end3:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/end/the-end-det11229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -50px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.end31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 140px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.end4
{
	display: inline-block;
	width: 200px;
	height: 150px;
	position: absolute;
	left: 670px;
	top: 510px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.end4::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.end4:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end4:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 260px;
	height: 150px;
	position: absolute;
	top: 470px;
	left: 580px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.end4:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/end/the-end-det41229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -40px;
	top: 130px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.end41
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.end41:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 140px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.desil1
{
	display: inline-block;
	width: 400px;
	height: 200px;
	position: absolute;
	left: 110px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.desil1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.desil1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.desil1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 370px;
	height: 150px;
	position: absolute;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.desil1:active
{
	width: 900px;
	height: 666px;
	background-image: url(images/desillusion/desillusiond11024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 10px;
	top: 20px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.desil11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 170px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.desil11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.epa1
{
	display: inline-block;
	width: 500px;
	height: 100px;
	position: absolute;
	left: 110px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.epa1::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.epa1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 700px;
	height: 150px;
	position: absolute;
	top: 210px;
	left: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.epa1:active
{
	width: 900px;
	height: 207px;
	background-image: url(images/epatant/epatant1488.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -60px;
	top: 230px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.epa11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 520px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 540px;
	top: 30px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.epa2
{
	display: inline-block;
	width: 120px;
	height: 400px;
	position: absolute;
	left: 100px;
	top: 510px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.epa2::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.epa2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 200px;
	height: 300px;
	position: absolute;
	top: 510px;
	left: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.epa2:active
{
	width: 460px;
	height: 691px;
	background-image: url(images/epatant/et-pas-tant-que-ca-det2-819.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 60px;
	top: 210px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.epa21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 140px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 45px;
	top: 140px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.epa3
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 400px;
	top: 510px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.epa3::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.epa3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa3:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 150px;
	position: absolute;
	top: 510px;
	left: 420px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.epa3:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/epatant/et-pas-tant-que-ca-det1229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 50px;
	top: 310px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.epa31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 40px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.epa31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 160px;
	top: 25px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.eper1
{
	display: inline-block;
	width: 270px;
	height: 300px;
	position: absolute;
	left: 110px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.eper1::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.eper1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 200px;
	height: 300px;
	position: absolute;
	top: 210px;
	left: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.eper1:active
{
	width: 306px;
	height: 507px;
	background-image: url(images/eperdument/eperdument-copyright-det4743.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 70px;
	top: 190px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.eper11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 20px;
	top: 120px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50px;
	top: 150px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.eper2
{
	display: inline-block;
	width: 270px;
	height: 200px;
	position: absolute;
	left: 510px;
	top: 460px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.eper2::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.eper2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 200px;
	position: absolute;
	top: 360px;
	left: 520px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.eper2:active
{
	width: 907px;
	height: 606px;
	background-image: url(images/eperdument/eperdument-copyright-det1-1229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -50px;
	top: 180px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.eper21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 150px;
	top: 50px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.eper3
{
	display: inline-block;
	width: 200px;
	height: 130px;
	position: absolute;
	left: 350px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.eper3::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.eper3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper3:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.eper3:active
{
	width: 907px;
	height: 606px;
	background-image: url(images/eperdument/eperdument-copyright-det81200.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: -50px;
	top: 140px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.eper31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.eper31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 150px;
	top: 50px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.jam1
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 300px;
	top: 210px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.jam1::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.jam1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam1:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 300px;
	height: 150px;
	position: absolute;
	top: 210px;
	left: 320px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.jam1:active
{
	width: 400px;
	height: 600px;
	background-image: url(images/jamais/jamais-2-sans-3det1819.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 80px;
	top: 210px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.jam11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 120px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam11:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 160px;
	top: 25px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}


.jam2
{
	display: inline-block;
	width: 200px;
	height: 260px;
	position: absolute;
	left: 500px;
	top: 340px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.jam2::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.jam2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam2:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 240px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.jam2:active
{
	width: 400px;
	height: 600px;
	background-image: url(images/jamais/jamais-2-sans-3det3819.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 380px;
	top: 210px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.jam21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam21:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 73px;
	top: 85px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.jam3
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 640px;
	top: 560px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.jam3::before
{
	content: attr(title);
	color: #666666;
	width: 100px;
	padding: 50% 10%;
	text-align: justify;
	display: none;
}
.jam3:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam3:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	width: 240px;
	height: 200px;
	position: absolute;
	top: 500px;
	left: 600px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.jam3:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/jamais/jamais-2-sans-3det21229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 280px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.jam31
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 60px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.jam31:hover
{
	background-color: rgba(255, 255, 255, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 73px;
	top: 10px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.sui1
{
	display: inline-block;
	width: 400px;
	height: 250px;
	position: absolute;
	left: 440px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.sui1::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.sui1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.sui1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 380px;
	height: 220px;
	position: absolute;
	top: 350px;
	left: 440px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.sui1:active
{
	width: 467px;
	height: 700px;
	background-image: url(images/la_suite/je-veux-la-suite-det4819.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 230px;
	top: 140px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.sui11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 160px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.sui11:hover
{
	background-color:  rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 193px;
	top: 70px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.sui2
{
	display: inline-block;
	width: 500px;
	height: 300px;
	position: absolute;
	left: 390px;
	top: 830px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.sui2::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.sui2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.sui2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 380px;
	height: 220px;
	position: absolute;
	top: 850px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.sui2:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/la_suite/je-veux-la-suite-det1229.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 0px;
	top: 610px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.sui21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 160px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.sui21:hover
{
	background-color:  rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 193px;
	top: 70px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.leg1 /* légèreté */
{
	display: inline-block;
	width: 500px;
	height: 300px;
	position: absolute;
	left: 290px;
	top: 330px;
	cursor: url(images/boutons/loupe27.png) 2 2, pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.leg1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.leg1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.leg1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 460px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.leg1:active
{
	width: 900px;
	height: 600px;
	background-image: url(images/legerete/legerete1504.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 90px;
	top: 110px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.leg11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.leg11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 240px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.renverse1 /* un monde renversant */
{
	display: inline-block;
	width: 500px;
	height: 300px;
	position: absolute;
	left: 290px;
	top: 230px;
	cursor: url(images/boutons/loupe27.png) 2 2, pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.renverse1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.renverse1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renverse1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 460px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.renverse1:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/renverse/renverse31024.gif);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 90px;
	top: 110px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.renverse11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renverse11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 240px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.indesirable1 /* indésirable */
{
	display: inline-block;
	width: 500px;
	height: 300px;
	position: absolute;
	left: 290px;
	top: 230px;
	cursor: url(images/boutons/loupe27.png) 2 2, pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.indesirable1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.indesirable1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.indesirable1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 460px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.indesirable1:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/indesirable/indesirable11024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 90px;
	top: 110px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.indesirable11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.indesirable11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 240px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.renaissance1 /* renaissance */
{
	display: inline-block;
	width: 400px;
	height: 200px;
	position: absolute;
	left: 90px;
	top: 230px;
	cursor: url(images/boutons/loupe27.png) 2 2, pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.renaissance1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.renaissance1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renaissance1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 460px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.renaissance1:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/renaissance/renaissance21024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 90px;
	top: 110px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.renaissance11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renaissance11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 240px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.renaissance2 /* renaissance */
{
	display: inline-block;
	width: 200px;
	height: 200px;
	position: absolute;
	left: 510px;
	top: 270px;
	cursor: url(images/boutons/loupe27.png) 2 2, pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.renaissance2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}
.renaissance2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renaissance2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 400px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.renaissance2:active
{
	width: 900px;
	height: 510px;
	background-image: url(images/renaissance/renaissance11024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 90px;
	top: 110px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.renaissance21
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 200px;
	top: 20px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.renaissance21:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 240px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.murcb1
{
	display: inline-block;
	width: 460px;
	height: 300px;
	position: absolute;
	left: 390px;
	top: 350px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   }
.murcb1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.murcb1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murcb1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 260px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.murcb1:active
{
	width: 699px;
	height: 470px;
	background-image: url(images/murcb/murcbgp1024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 130px;
	top: 120px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.murcb11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murcb11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 70px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.murluz1
{
	display: inline-block;
	width: 460px;
	height: 300px;
	position: absolute;
	left: 210px;
	top: 300px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.murluz1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 400px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.murluz1:active
{
	width: 699px;
	height: 525px;
	background-image: url(images/murluz/lun-dans-lautre-ps1024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 230px;
	top: 220px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.murluz11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.murluz2
{
	display: inline-block;
	width: 460px;
	height: 300px;
	position: absolute;
	left: 210px;
	top: 950px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz2::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.murluz2:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz2:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 230px;
	height: 400px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}

.murluz2:active
{
	width: 699px;
	height: 525px;
	background-image: url(images/murluz/murluzdet1024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 230px;
	top: 920px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.murluz22
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 160px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.murluz22:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 170px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.dom1
{
	display: inline-block;
	width: 400px;
	height: 300px;
	position: absolute;
	left: 440px;
	top: 100px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dom1::before
{
	content: attr(title);
	color: white;
	width: 150px;
	padding: 5% 10%;
	text-align: justify;
	display: none;
}

.dom1:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dom1:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	width: 260px;
	height: 200px;
	position: absolute;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 10;
}

.dom1:active
{
	width: 500px;
	height: 700px;
	background-image: url(images/dome/dome41024.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 110px;
	top: 220px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 	z-index: 1;
}
.dom11
{
	display: inline-block;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 70px;
	top: 60px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.dom11:hover
{
	background-color: rgba(29, 29, 27, 0.7);
	background-image: url(images/boutons/loupe27.png);
	background-repeat: no-repeat;
	background-position: center;
	width: 100px;
	height: 100px;
	position: absolute;
	left: 80px;
	top: 70px;
	cursor: pointer;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}

.mat001 /* matériau */
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 280px;
	left: 280px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat001::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat001:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat001:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat002
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 280px;
	left: 480px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat002::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat002:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat002:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat003
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 280px;
	left: 680px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat003::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat003:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat003:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat004
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 280px;
	left: 880px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat004::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat004:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat004:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat005
{
	display: inline-block;
	width: 380px;
	height: 220px;
	position: absolute;
	top: 520px;
	left: 290px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat005::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat005:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat005:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat006
{
	display: inline-block;
	width: 380px;
	height: 220px;
	position: absolute;
	top: 520px;
	left: 690px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat006::before
{
	content: attr(title);
	color: grey;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat006:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat006:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat007
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 850px;
	left: 280px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat007::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat007:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat007:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat008
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 850px;
	left: 480px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat008::before
{
	content: attr(title);
	color: black;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat008:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat008:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat009
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 850px;
	left: 680px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat009::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat009:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat009:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
.mat010
{
	display: inline-block;
	width: 180px;
	height: 120px;
	position: absolute;
	top: 850px;
	left: 880px;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.mat010::before
{
	content: attr(title);
	color: white;
	width: 100px;
	padding: 20% 20%;
	text-align: justify;
	display: none;

}
.mat010:hover::before
{
	display: inline-block;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);   
}
.mat010:hover
{
	width: 160px;
	height: 150px;
	position: absolute;
	transition:2s;
    transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
 z-index: 10;
}
/* Expand les check-box qui permettent d'ouvrir une section en cliquant sur une vignette */
#decouv, #expand
{
    display: none;
	transition:2s;
}
#expand-btn 
{
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.6);
	cursor: url(images/boutons/carrerouge15.png) 2 2, pointer;
}
#expand:checked ~ #decouv
{
    display: block;
    background: #cccccc;
	transition:2s;
}
#ligne
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#mur2022
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#recherche1
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#recherche2
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#recherche3
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#recherche4
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#fenetre1
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#fenetre2
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#capasse
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#pablo
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#etau
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#entreleslignes
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#lorgnettes
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#inegalites
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#rien
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#rupture
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#decadre
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 0px;
}
#horscadre
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#mapraa
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#mapraa p
{
margin-left: 150px;
}
#mapraa img:nth-of-type(1)
{
	position: absolute;
	margin: 140px 70px;
}
#mapraa img:nth-of-type(1):hover
{
	content: url(images/boutons/fleche240.png);
	margin: 142px 75px;
}

#intestins
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#cerveau
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#coeur
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#xx-xy
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#perdu
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#bon
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#derndiag
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#dernhori
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#dernspi
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#dernvert
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#derncroi
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#dernpla
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#pla001
{
	width: 800px;
	display: block;
	margin: auto;
}
#endeux
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#expostop
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#expostop p
{
	margin-left: 200px;
}
#expostop img:nth-of-type(1) 
{
	position: absolute;
	padding-left: 75px;
	padding-top: 110px;
}
#tableau-stop
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#stop
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#cbrise
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#autonomie
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#dignite
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#solidarite
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#liberte
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#femme
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#femme p
{
	padding:  20px 60px 20px; 
}
#puzzle
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#changement
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#repercussion
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#code
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#airambiant
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#conglo
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#contre
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#egalite
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#electrons
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#emergence
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#end
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#desillusion
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#epatant
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#eperdument
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#equilibre
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#jamais
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#lasuite
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#lepiquant
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#legerete
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#paix
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#renouveau
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#rouages
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}
#sans
{
	border: solid thin #999;
	width: 800px;
	display: block;
	transition:2s;
	overflow: hidden;
	padding-bottom: 80px;
}

#hautpage
{
	display: none;
	position: -webkit- sticky;
	position: sticky;
	bottom : 10px;
	right: 40px;
}

footer /* pied de page */
{
	padding-top: 10px;
	padding-bottom: 20px;
	position: relative;
	width: 400px;
	margin: auto;	
}
footer img
{
	max-width: 280px;
}