/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

body, html, a, ul, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;}
a{transition : all 0.2s linear;}
body{ font:15px/24px 'Titillium Web', sans-serif; font-weight:300;color:#8b8b8b; line-height: 24px;}
a{ text-decoration:none;color:#515848;}img{ border:0px;}
/*Bouton pour remonter en haut de la page :*/

div#btn_up{position: fixed;bottom: 15px;right: 25px;cursor: pointer;display:none;z-index:99999; width:50px; height:50px; background:url(../charte/btn_up.png); opacity:0.5;transition : all 0.2s linear;}
div#btn_up:hover{opacity:1}

div#first{ width:100%; float:left; text-align:center; position: relative; z-index: 9;}
div#first div#second{ width:1200px; margin:auto; text-align:left; position:relative; z-index: 1;}

@media screen and (max-width: 900px) {div#first div#second{ width:100%; margin:auto; text-align:left;}div#first div#second img{ max-width:100%;}}
@media screen and (min-width: 901px) {div#first div#second{ width:900px; margin:auto; text-align:left;}}
@media screen and (min-width: 1200px) {div#first div#second{ width:1200px; margin:auto; text-align:left;}}

/* HEADER */
.header{ position:relative; background: #FFFFFF; border-bottom: 1px solid #d7d7d7; height: 42px; line-height: 42px !important;}
.header .coordonnees{ float:left; color:#8b8b8b; font-weight: 100;}
.header .contact{ float:right; color:#000000; font-weight: 100;}

/* MENU */
.menu{ position:relative; background: #FFFFFF; border-bottom: 1px solid #d7d7d7;  z-index: 9999!important;}
	.menu .logo{ float:left; padding: 5px;}

@media screen and (max-width: 900px) { 
.header .coordonnees,.header .contact { width: 100%; text-align: center;}
	.header{ height: auto;}
	.menu2{display:block; float: right; padding: 29px 29px 29px 29px;}
	.lemenu{display:none;}
	.menu ul.lemenu{ width: 100%; position: absolute; z-index: 999999; top:100px; left: 0px; float: left; height: auto;}
	.menu ul.lemenu li{ width:100%; border-bottom: 1px solid #71c5c6; float: left; background-color: rgba(255,255,255,0.90);}
	.menu ul.lemenu li a{ line-height: 40px; padding: 0px 0px 0px 10px;}
	.menu ul.lemenu li ul.ssmenu{}
	.menu ul.lemenu li ul.ssmenu li{ border-bottom: 0px; background-color: inherit !important;}
	.menu ul.lemenu li ul.ssmenu li a{padding: 0px 0px 0px 20px;}
	.menu.fixe .menu2{display:block; float: right; padding: 4px 29px 4px 29px;} 
	.menu.fixe ul.lemenu{ top:40px;}

}
@media screen and (min-width: 900px) { 
.menu{height: 100px; line-height: 100px !important;}
	.menu2{display:none;}
.menu ul.lemenu{ width: calc(100% - 110px); width: -webkit-calc(100% - 110px); height: 100px; text-align: center;}
.menu ul.lemenu li{ display: inline-block; transition : all 0.2s linear; position:relative;}
.menu ul.lemenu li a{ display: block; text-transform: uppercase; padding: 0px 10px 0px 10px; float: left; position: relative;}
.menu ul.lemenu li ul.ssmenu{  margin: 0px; padding: 0px; display:block; height: 0px; overflow: hidden; position: absolute; top:100px; left:0px; opacity: 0; transition : all 0.2s linear; width: auto inherit; float:left;}
.menu ul.lemenu li:hover ul.ssmenu{ opacity: 1; height: auto;}
.menu ul.lemenu li ul.ssmenu li{ width:100%; height: auto !important;  line-height: 30px !important; padding: 0px; margin: 0px; display: block; float:left;}
.menu ul.lemenu li ul.ssmenu li a{height:auto; line-height: 30px !important; display: block; text-transform: uppercase; padding: 0px 10px 0px 10px; float: left; position: relative; text-align: left; background-color:#ffffff; white-space: nowrap;}
.menu ul.lemenu li ul.ssmenu li a::after{content: "";}
}

.menu ul.lemenu li a::after{content: " → "; position: relative; transition : all 0.2s linear;}
.menu ul.lemenu li a:hover{ color:#71c5c6; text-decoration: underline;}

#logositeweb2{display:none;}

.menu.fixe{ position: fixed !important; top: 0px; left: 0px; z-index: 999999;height: 40px; line-height: 40px !important;}
.menu.fixe ul.lemenu{ height:40px;}
.menu.fixe ul.lemenu li ul.ssmenu{top:40px;}


/**########*/
/*DIAPORAMA*/
div#diaporama{ float:left; width:100%; position:relative; z-index: 1; top: 0px; left: 0px; margin:0px 0px 0px 0px; padding:0px; height:700px;}
div#diaporama .diapo{ float:left; width:100%; height:100%; overflow:hidden;z-index:1; position:absolute; top:0px; left:0px; display: none;}
@media screen and (max-width: 900px) 
{		
	div#diaporama a.left, div#diaporama a.right{display: none;}
	div#diaporama{ width:100%; z-index:1; height:320px; top: 0px;}
div#diaporama .diapo .bloc_txt{  position:absolute; z-index: 2; bottom: 50px; height:auto; left:10px ; display: none; color: #ffffff;}
	/*div#diaporama .diapo img{  height:100%; width: auto;}*/
}
@media screen and (min-width: 901px)
{
	div#diaporama{height:500px;}
	div#diaporama .diapo .bloc_txt{ width:auto; margin:auto; position: absolute; text-align:left;left:50%; top: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  z-index: 2;  color: #FFFFFF;}
	div#diaporama .diapo .bloc_txt h1{font:66px/70px 'Titillium Web', sans-serif; font-weight:900; text-align: center; float: left; width: 100%; color: #FFFFFF; margin: 0px; padding: 0px; line-height: 70px;}
	div#diaporama .diapo .bloc_txt h2{font:36px/40px 'Titillium Web', sans-serif; font-weight:300; text-align: center; float: left; width: 100%; color: #FFFFFF; margin: 0px; padding: 0px; line-height: 40px;}
}
@media screen and (min-width: 1200px) 
{
	div#diaporama{height:670px;}
	div#diaporama .diapo .bloc_txt{ width:auto; margin:auto; position: absolute; text-align:left;left:50%; top: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  z-index: 2; color: #FFFFFF;}
}
div#diaporama .diapo img{ position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  }

div#diaporama a.left{position:absolute; z-index: 999; left: 10px; top: 50%;  transform: translateY(-50%); -webkit-transform:translateY(-50%); width: 57px; height:98px; background: url(../charte/fleche-diap.png) left;}
div#diaporama a.right{position:absolute; z-index: 999; right: 10px; top: 50%;  transform: translateY(-50%); -webkit-transform:translateY(-50%);width: 57px; height:98px; background: url(../charte/fleche-diap.png) right;}

div#diaporama .navigation{ position: absolute; z-index: 999; text-align: center; bottom: 20px;  left:50%;  transform:  translateX(-50%); -webkit-transform: translateX(-50%); }
@media screen and (max-width: 900px) {div#diaporama .navigation{}}
@media screen and (min-width: 901px) {div#diaporama .navigation{}}
@media screen and (min-width: 1200px) {div#diaporama .navigation{}}
div#diaporama .navigation a{background:none; display:inline-block; width: 20px; height: 20px; margin: 0px 5px 10px 5px; border:1px solid #FFFFFF; border-radius:2px;}
div#diaporama .navigation a.on{background: #71c5c6;}

/*Parralaxe*/

.bg_para1{background:url(../diaporama/maison-bois-bonheur.jpg) right center; height: 400px; background-size: cover;}
.bg_para2{background:url(../diaporama/forest-finlandaise-maison.jpg) right center; height: 400px; background-size: cover;}
.bg_para3{background:url(../diaporama/marteau-clous.jpg) right center; height: 400px; background-size: cover;}
.bg_para4{background:url(../diaporama/maison-ecologique.jpg) right center; height: 400px; background-size: cover;}
.bg_para5{background:url(../diaporama/cadre-apaisant.jpg) right center; height: 400px; background-size: cover;}
.bg_para6{background:url(../diaporama/foret-durable-finlande.jpg) right center; height: 400px; background-size: cover;}
.bg_para7{background:url(../diaporama/construction-madrier.jpg) right center; height: 400px; background-size: cover;}


/* Carrousel*/
a.left_carrousel{ width:auto; float: left; background:url(../charte/fleche-gauche.png) left center no-repeat; display: block; padding: 0px 0px 0px 30px;}
a.right_carrousel{ width:auto; float: right; background:url(../charte/fleche-droite.png) right center no-repeat; display: block; padding: 0px 30px 0px 0px;}
div.carrousel .slideshow{float:left; width: 100%; position: relative; overflow: hidden; margin: 0px 18px 0px 18px;}
div.carrousel .slideshow ul{ width:5000px; position:relative;padding:0; margin:0;}

div.carrousel .slideshow ul li{ overflow: hidden; position: relative; float: left; border-radius: 5px; background-color: rgba(0,0,0,1);}

@media screen and (max-width: 900px) {
div.carrousel{ width:100%; float: left; height: 260px;}
	div.carrousel .slideshow ul li{ width: 190px; height: 260px; float:left; margin: 0px 5px 0px 4px;}
	div.carrousel .slideshow ul li img{ width: 100%; width: auto !important; max-width: none !important;min-height:100%;}	
	div.carrousel .slideshow{ height: 260px;}
}
@media screen and (min-width: 900px) {
	div.carrousel .slideshow{ height: 450px;}
	div.carrousel .slideshow ul li{ width: 313px; height: 450px; margin: 0px 10px 0px 10px; float:left;}
	div.carrousel .slideshow ul li img{width:100%;}
}
@media screen and (min-width: 1200px) {
	div.carrousel .slideshow{ height: 450px;}
	div.carrousel .slideshow ul li{ width: 380px; height: 450px; margin: 0px 10px 0px 10px; float:left;display: inline;}
	div.carrousel .slideshow ul li img{wdth:100%;}
}

div.carrousel .slideshow ul li img{  position: absolute; opacity: 0.6; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);  }

div.carrousel .slideshow ul li #contenu{ position: absolute; top: 0px; left: 0px; width: 100%; height:100%;transition : all 0.2s linear;}
div.carrousel .slideshow ul li #contenu a{ display:block;}
div.carrousel .slideshow ul li #contenu a img{opacity:0; position: absolute; letter-spacing: 50%; bottom: -50px; top:inherit;width: 162px; height: 134px; min-height: inherit;  transform: translateY(-50%) ; -webkit-transform: translateX(-50%);}
div.carrousel .slideshow ul li:hover > img{ opacity:1;transition : all 0.2s linear;}
div.carrousel .slideshow ul li:hover > #contenu a img{ width: 162px; height: 134px; min-height: inherit; opacity:1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);transition : all 0.2s linear;}



@media screen and (max-width: 480px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%; position: relative;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; margin:20px 0px 0px 0px; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:100%;}
.div75{ float:left; width:100%;}
.div25_2{ float:left; width:98%; padding:1%;}
.div20{ float:left; width:50%;}
.div20_2{ float:left; width:48%; padding:1%;}}
@media screen and (min-width: 481px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%; position: relative;}
.div50{ float:left; width:100%; position:relative;}
.div50_2{ float:left; width:98%; padding:1%; position:relative;}
.div30{ float:left; width:100%;}
.div30_2{  width:98%; padding:1%; display:inline-table;}
.div30_3{ float:left; width:98%; padding:0% 0% 0% 2%;}
.div30_4{  width:98%; padding:1%; float:left;}
.div60_2{ float:left; width:98%; padding:1%;}
.div25{ float:left; width:25%;}
.div75{ float:left; width:75%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:17%;}
.div20_2{ display:inline-table; width:15%; padding:1%;}}
@media screen and (min-width: 901px) {
	.div100{ float:left; width:100%; position:relative;}
.div100_2{ float:left; width:98%; padding:1%; position:relative;}
.div50{ float:left; width:50%; position:relative;}
.div50_2{ float:left; width:48%; padding:1%; position:relative;}
.div30{ float:left; width:33%;}
.div30_2{  width:31%; padding:1%; float:left; max-width:31%; overflow:hidden}
.div30_2 a img{ max-width:100%; overflow:hidden;}
.div30_3{ float:left; width:31%; padding:0% 0% 0% 2%;}
.div30_4{  width:31%; padding:1%; float:left;}
.div60_2{ float:left; width:64%; padding:1%;}
.div25{ float:left; width:25%;}
.div75{ float:left; width:75%;}
.div25_2{ float:left; width:23%; padding:1%;}
.div20{ display:inline-table; width:20%;}
.div20_2{ display:inline-table; width:18%; padding:1%;}
}

/*###########*/
/*Tailles TXT*/
.small2{ font-size:12px; line-height: 16px;}
.small{ font-size:14px; line-height: 16px;}.small2{ font-size:14px; line-height: 20px;}.small3{ font-size:14px; line-height: 30px;}
.medium2{ font-size:16px; line-height: 20px;}
.large{ font-size:18px;  line-height: 22px;}
.large2{ font-size:18px;  line-height: 32px;}
.xlarge{ font-size:20px; line-height: 22px;}
.xxlarge{ font-size:22px;  line-height: 28px;}
.xxlarge2{ font-size:22px;  line-height: 22px;}
.xxxlarge{ font-size:25px;  line-height: 32px;}
.x4large{ font-size:30px; line-height: 40px;}
.x5large{ font-size:40px; line-height: 50px;}
.x6large{ font-size:50px; line-height: 60px;}

@media screen and (max-width: 900px) {
.x4large{ font-size:26px; line-height: 35px;}
.x5large{ font-size:28px; line-height: 35px;}
.x6large{ font-size:30px; line-height: 35px;}
}
/*Couleur police*/
.txtblanc{ color:#ffffff !important;} .txtnoir{ color:#000000;} .txtombre{text-shadow: 2px 2px 4px #000000; color: #FFFFFF;} .txtbleu{color:#71c5c6;}.txtgris{ color:#8b8b8b;}
/*Align police*/
.txtcenter{ text-align:center;}.txtleft{ text-align:left;}.txtright{ text-align:right;}.txtjustify{ text-align:justify;}
/*Epaisseur*/
.w100{font-weight: 100 !important;}.w300{font-weight: 300 !important;}.w700{font-weight: 700 !important;}.w900{font-weight: 900 !important;}
/*BoUTON*/
a.btn1, button.btn1{ border-radius:5px; display:inline-block; padding:5px 10px 5px 10px; color:#FFFFFF;  background-color:#71c5c6; font-weight: 600; box-shadow: none; border:0px; transition : all 0.2s linear; cursor: pointer; }
a.btn1::after, button.btn1::after{content: " → "; position: relative;}
a.btn1:hover, button.btn1:hover{ background-color: #FFFFFF; color:#71c5c6;}

a.btn2{ border-radius:5px; display:inline-block; padding:5px 10px 5px 10px; color:#000000;  background-color:#ffffff; border:1px solid #000000; font-weight: 600;   }
a.btn2::after{content: " → "; position: relative;}
a.btn2:hover{ border:1px solid #71c5c6; color:#71c5c6;}

a.btn3{ border-radius:5px; display:inline-block; padding:5px 10px 5px 10px; color:#FFFFFF;   border:1px solid #FFFFFF; font-weight: 600;  }
a.btn3::after{content: " → "; position: relative;}
a.btn3:hover{ border:1px solid #71c5c6; color:#71c5c6;}

a.listing{ color:#71c5c6;font:16px/24px 'Titillium Web', sans-serif; font-weight:300; padding: 0px 15px 0px 15px; border:1px solid #ffffff;}
a.listing:hover{ border:1px solid #71c5c6;}

/*Background*/
.bggris{ background-color: #f0f0f0;}.bggrisf{ background-color:#b3b3b3;}.bgbleu{ background-color: #71c5c6;}

/*titre*/
h1.design1, h2.design1, h3.design2{ text-transform: uppercase; color:#000000; font: 36px/50px 'Titillium Web', sans-serif; font-weight:300; padding: 0px 0px 0px 60px; }
h1.design1::before, h2.design1::before, h3.design2::before{ float: left; content: url(../charte/h1.png); margin-left: -60px; margin-top:-10px;}
h3.design1{  color:#000000; font: 28px/36px 'Titillium Web', sans-serif; font-weight:300; padding: 0px 0px 0px 0px; }

@media screen and (max-width: 900px) {
h1.design1, h2.design1{ padding: 0px 0px 0px 10px !important; }
	h1.design1::before, h2.design1::before{ content: "";margin-left: 0px;}	
}


img.img100{max-width:100%;}
img.img75{max-width:75%;}
img.img50{max-width:50%;}img.ronde{border-radius:100%;}
.megacenter{position: absolute; z-index: 1; top: 50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%); }


/* Formulaire Footer*/
#form_footer, #form_top{ float:left; width:100%;}
#form_footer input[type='text'], #form_top input{ border:0px; height:40px;font:15px/20px 'Titillium Web', sans-serif; color:#ad965e; width:96%; margin:1%; padding:1%; float:left; background:#e6e6e6;}
#form_footer textarea, #form_top textarea{ border:0px; min-height: 160px; font:15px/20px 'Titillium Web', sans-serif; color:#ad965e; width:96%; margin:1%; padding:1%; height:93%; background:#e6e6e6; float: left;}

/* Fil d'arianne*/
div#fil{float:left;width:100%;font:10px/16px  'Titillium Web', sans-serif;}
div#fil a{width:100%;text-decoration:none;font:10px/16px  'Titillium Web', sans-serif;}
div#fil a:hover{color:#71c5c6;}

/*Effet image*/
img.imgeffect{	-webkit-filter: sepia(100%);filter: sepia(100%);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out;}
img.imgeffect:hover{-webkit-filter: sepia(0);filter: sepia(0);}
/* Stats */
.wrapper {
    position:relative;
    margin:20px;
}
.legende_stats{position:absolute; top: 33px; width: 200px; text-align: right; font: 16px/20px 'Titillium Web', sans-serif; text-transform: uppercase; }
.content_stats{ margin: -60px 0px 0px 200px;     -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);  -o-transform: rotate(45deg);
    transform: rotate(45deg); float: left; display: block;position: relative;}
.logocenter{ top:130px; left:130px; position: absolute; border-radius: 150px; width:150px; height: 150px; border:1px solid #72c5c8;-webkit-transform: rotate(-45deg) !important;   -moz-transform: rotate(-45deg) !important;   -ms-transform: rotate(-45deg) !important;  -o-transform: rotate(-45deg) !important;
    transform: rotate(45deg);}
.logocenter img{ height:100px !important; max-height: 100px !important; position: absolute; top:50%; left:50%;transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);}
.arc1, .arc2, .arc3, .arc4 { position:absolute; border-radius:100%; border:10px solid;}
.arc1{ width:220px; height: 220px;z-index: 15; top: 60px; left: 60px;}
.arc2{ width:260px; height: 260px;z-index: 14; top: 40px; left: 40px;}
.arc3{ width:300px; height: 300px;z-index: 13; top: 20px; left: 20px;}
.arc4{ width:340px; height: 340px;z-index: 12; top: 0px; left: 0px;}
.arc1.arc_start, .arc2.arc_start, .arc3.arc_start, .arc4.arc_start {
    
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.arc1.arc_start{border-color: #6fc5c6 transparent transparent transparent ;}
.arc2.arc_start{border-color: #7c3b3c transparent transparent transparent;}
.arc3.arc_start{border-color:#d36f6f transparent transparent transparent ;}
.arc4.arc_start{border-color: #387a7a transparent transparent transparent;}
.arc1.arc_end {
    border-color:#6fc5c6 transparent transparent transparent ;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.arc2.arc_end {
    border-color:#7c3b3c transparent transparent ;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.arc3.arc_end {
    border-color: #d36f6f transparent transparent transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.arc4.arc_end {
    border-color:#387a7a transparent transparent transparent ;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

/* Style liste*/
ul.design{}
ul.design li{font:18px/30px 'Titillium Web', sans-serif; font-weight:300; float:left; width: 100%;}
ul.design li::before{ content: url(../charte/puce-plus.png); padding:2px 20px 0px 0px; float:left; }

/* Les trapèzes */
div.ligne1, div.ligne2{float:left; width: 100%;}div.ligne2{margin-top:-75px; transition:all 0.2s linear;}
div.ligne1 div.trapeze{clip-path : polygon(0 100%, 0 0, 100% 0, 100% 75%) ; width:calc( 100% / 3 - 10px);width:-webkit-calc( 100% / 3 - 10px); margin: 5px; height: 300px; float: left; position: relative; overflow: hidden;}
div.ligne1 div.trapeze2{clip-path : polygon(0 75%, 0 0, 100% 0, 100% 100%) ; width:calc( 100% / 3 - 10px);width:-webkit-calc( 100% / 3 - 10px); margin: 5px; height: 300px;float: left; position: relative; overflow: hidden;}
div.trapeze , div.trapeze2{ z-index:2;}
div.trapeze a , div.trapeze2 a{ display: block; float: left; z-index:2;}
div.trapeze a img, div.trapeze2 a img{height: 300px; max-width: none !important; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%);transition:all 0.2s linear; z-index: 1;}

div.ligne2 div.trapeze{clip-path : polygon(0 100%, 0 0, 100% 25%, 100% 100%) ; width:calc( 100% / 3 - 10px);width:-webkit-calc( 100% / 3 - 10px); margin: 5px; height: 300px; float: left; position: relative;}
div.ligne2 div.trapeze2{clip-path : polygon(0 100%, 0 25%, 100% 0, 100% 100%) ; width:calc( 100% / 3 - 10px);width:-webkit-calc( 100% / 3 - 10px); margin: 5px; height: 300px;float: left; position: relative;}

div.ligne2 div.trapeze, div.ligne2 div.trapeze2, div.ligne1 div.trapeze, div.ligne1 div.trapeze2{ background-color: #95d5de; overflow: hidden;}
div.ligne2 div.trapeze a:hover > img, div.ligne2 div.trapeze2 a:hover > img, div.ligne1 div.trapeze a:hover > img, div.ligne1 div.trapeze2 a:hover > img{ opacity: 0.5;transition:all 0.2s linear;}
div.ligne2 div.trapeze a .loupe, div.ligne2 div.trapeze2 a .loupe, div.ligne1 div.trapeze a .loupe, div.ligne1 div.trapeze2 a .loupe{ top:-100px; width: 100%; height: auto; position: absolute; display: block; background: url(../charte/zoom.png) top center no-repeat; padding: 70px 0px 0px 0px; left: 50%; z-index: 10; transition:all 0.2s linear;transform: translateX(-50%); -webkit-transform: translateX(-50%); opacity: 0; color:#ffffff; text-align: center;}
div.ligne2 div.trapeze a:hover > .loupe, div.ligne2 div.trapeze2 a:hover > .loupe, div.ligne1 div.trapeze a:hover > .loupe, div.ligne1 div.trapeze2 a:hover > .loupe{ top:50%; transform: translateY(-50%) translateX(-50%); -webkit-transform:translateY(-50%) translateX(-50%); transition:all 0.2s linear; opacity: 1; }
div.ligne2 div.trapeze:hover > a, div.ligne2 div.trapeze2:hover > a, div.ligne1 div.trapeze:hover > a, div.ligne1 div.trapeze2:hover > a{ z-index: 1;}

@media screen and (max-width: 780px) {
.pop{ background-color: rgba(0,0,0,0.82); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999999999999 !important; display: none;}
.pop .unepop{ position:absolute; top: 10px; left: 10px;  background-color: #FFFFFF; border-radius: 20px; overflow-y: visible; height: calc(100% - 20px); height: -webkit-calc(100% - 20px); width: calc(100% - 20px); width: -webkit-calc(100% - 20px);}
.pop .unepop #close{position:absolute; top: -10px; right: -10px; z-index: 2;}
}
@media screen and (min-width: 781px) {
.pop{ background-color: rgba(0,0,0,0.82); position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999999999999 !important; display: none;}
.pop .unepop{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); background-color: #FFFFFF; border-radius: 20px; overflow-y: visible; max-height: 100%;}
.pop .unepop #close{position:absolute; top: 10px; right: 10px; z-index: 2;}
}