html, body {
	margin:0; padding:0; background-color:#efefef;
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	line-height: 1.5;
	font-size: 100%;	
}

.title {
	display:none;
}

.navTop {
	padding:0 1.5rem 0 0;
}

.navTop ul {
	list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.navTop ul li {
	margin: 0 .5rem 0 0;
}

.navTop ul li a {
	text-decoration:none; color:#3b3b3b;
}

/* //////////////////////////////// */
.souris {
	height: 200px; width: 120px;
	border-radius: 50% 50% 50% 50% / 60% 60% 45% 45%;
	box-shadow: 20px 14px 12px rgba(0, 0, 0, 0.34),inset -10px -10px 15px rgb(188, 185, 185);
	background: radial-gradient(ellipse at 0% 10%,rgb(255, 255, 255) 20%,rgb(205, 205, 205));
	overflow: hidden; position: absolute; top:84dvh; scale:.35;
}
	.souris .molette {
		position:absolute; top: 0; left: 50%; margin: 0 0 0 -1px; width: 2px; height: 90px;
		background:rgb(141, 141, 141);
	}
	
		.souris .molette .molette_1 {
			position:absolute; top:20px;left:-6px; border-radius:7px; height:30px; width:14px; background:rgb(100, 100, 100);
		}
		.souris .molette .molette_2{
			position:absolute; top:60px; left:-3px; height:10px; width:8px; border-radius:3px; background:black;
		}
		
		.souris .scroll-indicator {
			position:abdolute;
			left:50%;
			top: 30px;
			translate:-50% 0;
            width: 30px;
            height: 60px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }

        .souris .scroll-indicator .arrow {
            position: absolute;
			/* top:-20px; */
            width: 100%;
            height: 20px;
            /* background:linear-gradient(rgb(204, 204, 204), rgba(255, 88, 88, 0.5)); */
            animation: scrollAlternate 2s infinite;
			
			text-align:center; line-height:20px; font-size:18px;
        }
		
		@keyframes scrollAlternate {
			0% {
				top:0px;
			}
			50% {
				top:40px;
			}
			100% {
				top:0px; 
			}
		}
	
	
/* //////////////////////////////// */

.pelagos canvas {
	opacity:1 !important;
}

@media only screen and (max-width:500px) {
	.pelagos canvas {
		/* display:none !important; */
		scale:.5;
	}
}

#theHeader, #theFooter {
	position:fixed; left:0; width:100%; z-index:100; border-style:solid; /* border-color:rgb(191, 22, 54); */ border-color:rgb(255, 255, 255); padding:0 1rem;
}

.theBorder {
	position:fixed; top:0; bottom:0; height:100%; width:.5rem; /* background:rgb(191, 22, 54); */ background:rgb(255, 255, 255); z-index:99;
}
	.theBorder.atLeft {left:0; right:auto;}
	.theBorder.atRight {right:0; left:auto;}

#theHeader {
	top:0; height:20px; border-width:.5rem 0 0 0; display:flex;
	justify-content:space-between; flex-flow:row wrap; align-items:center;
}
/*
	#theHeader .leLogo {
		position:relative; height:50px; width:50px; scale:.65;
	}
		#theHeader .leLogo svg { fill:#ff0000; height:50px; width:50px;}
*/
.leLogoHome {
	position:fixed; height:50px; width:50px; scale:.65; z-index:9999; top:.5rem; left:1rem;
}

.leLogo {
	position:relative; height:50px; width:50px; scale:.65;
}
	.homebody #theHeader .leLogo  {opacity:0;}

	.leLogo svg, .leLogoHome svg { fill:#ff0000; height:50px; width:50px;}



#theFooter {
	bottom:0; height:30px; border-width:0 0 .5rem 0;
}
/* OLD
.neoBtn {
	font-size: initial;
	padding: 1rem;
    width: 150px;
    height: 150px;
	background-color:transparent;
	background-image:repeating-conic-gradient(rgb(255,255,255) 0deg 1deg, rgba(255,255,255, 0) 1deg 2deg);
	border-radius:50%;
	overflow:hidden;
	
}
*/
	/* Very Old
	.neoBtn a.bl-trigger {
		color:rgb(107 107 107); 
		pointer-events:auto;
		font-size: initial;
		height: 100%;
		width: 100%;
		display: block;
		height: 100%;
		width: 100%;
		display: block;
		text-decoration:none;
	}
	.neoBtn a.bl-trigger {
		font-size: 50px;
		font-weight: bold;
		letter-spacing: -4px;
		position: absolute;
		transform-origin: 50% 50%;
		rotate: 270deg;
		translate: -36px -11px;
		color: rgb(202, 199, 192);
	} */
	
	/* OLD
	.neoBtn a.bl-trigger {
		box-sizing:border-box;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		height:100%; width:100%;
		text-decoration:none;
	}
	
	.neoBtn a.bl-trigger h4 {
		color: transparent;
		font-weight: bold;
		background-clip: border-box;
		background-clip: text;
		-webkit-background-clip: text;
		margin:0 0 -1rem 0;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		text-transform: uppercase;
		letter-spacing: -.25rem;
		font-size: 2rem;
		padding: 0 .5rem;
		filter:drop-shadow(0px 2px 0.1rem rgba(255,255,255, 1));

	}
	.neoBtn a.bl-trigger span {
		color:rgb(50,50,50);
	} */

/* ///////////////////////////////////////////////////////////////////////////// 

.neoBtn {
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	color: rgb(255,255,255);
	height: 10dvw;
	width: 10dvw;
	min-height:75px;
	min-width:75px;
	max-width: 150px;
    max-height: 150px;
	background: transparent;
	font-weight: bold;
	text-transform: uppercase;
	box-shadow: -.2rem -.3rem .3rem rgba(255,255,255, .2), .3rem .3rem .5rem rgba(55,55,55, .3);
	border: .2rem solid rgba(255,255,255, .03);
	font-size: 1.2dvw;
	overflow: hidden;
	background:radial-gradient(circle at 0 0, transparent 60%, rgba(255,255,255, .1) 100%);
	text-shadow: 2px 2px rgba(0,0,0, .3);
}
	.neoBtn a.bl-trigger {
		text-decoration:none; height: 100%; width: 100%; position: absolute;
		display: flex; justify-content: center; align-items: center; flex-flow: column;
		background-repeat:no-repeat !important; background-position:center !important; background-size:cover !important;
		color:rgb(255,255,255); pointer-events:auto;
	}
		
		.neoBtn a.bl-trigger span {
			font-size:80%; font-weight:normal;
		}
		.neoBtn a.bl-trigger h4 {}

	@keyframes laFormeUn {
		0% {
			border-radius:49% 48% 23% 73% / 46% 59% 38% 51%;
		}
		50% {
			border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
		}
		100% {
			border-radius:49% 48% 23% 73% / 46% 59% 38% 51%;
		}
	}
	@keyframes laFormeDeux {
		0% {
			border-radius:52% 48% 50% 49% / 59% 39% 60% 41% ;
		}
		50% {
			border-radius:33% 67% 29% 71% / 70% 31% 69% 30% ;
		}
		100% {
			border-radius:52% 48% 50% 49% / 59% 39% 60% 41% ;
		}
	}
	@keyframes laFormeTrois {
		0% {
			border-radius:28% 72% 84% 16% / 62% 54% 46% 38% ;
		}
		50% {
			border-radius:82% 18% 9% 91% / 30% 78% 22% 70% ;
		}
		100% {
			border-radius:28% 72% 84% 16% / 62% 54% 46% 38% ;
		}
	}
	
*/

.neoBtn {
	background:rgba(215, 100, 100, .5);
    width: 15rem;
    padding: 2rem;
    height: 15rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	pointer-events: auto;
}
@media only screen and (max-width:768px) {
	.neoBtn {
		scale:.6;
	}
}

.neoBtn a.bl-trigger{
	text-decoration:none;
}
.neoBtn a.bl-trigger span {
	display: block;
	width: 100%;
	text-transform: uppercase;
	font-weight: bold;
}
.neoBtn a.bl-trigger span:first-child {
	font-size: 1.5rem;
	letter-spacing: -.12rem;
}
.neoBtn a.bl-trigger span:nth-child(2) {
	font-size: 3rem;
	line-height: 2rem;
	letter-spacing: -.15rem;
	margin: 0 0 0 -.5rem;
}
.neoBtn a.bl-trigger span:last-child {
  font-size: 1rem;
  text-align: right;
  padding: 0 .5rem 0 0;
}

/* ///////////////////////////////////////////////////////////////////////////// 
//////////  La Tablette //////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////// */

			.laTabletteBox {
				position:relative; transform-style:preserve-3d; height:400px; width:400px;
			}
			
			.laTabletteBox .laTablette {
				position:relative; box-sizing:border-box; transform-style:preserve-3d; height:400px; width:550px;
				background:rgb(171,171,171); border-radius:20px; transition:all 500ms ease-in-out;
				transform:translate3d(0dvw, -10dvh, 0dvw) rotateX(0deg) rotateY(0deg) rotateZ(0deg); scale:.75;
			}
				.laTabletteBox .laTablette.stand {
					transform:rotateX(-36deg) rotateY(-38deg) rotateZ(32deg) translate3d(2dvw,-26dvh,-25dvw) scale(1);
				}

				.laTabletteBox .ombreTaTablette {
					position:absolute; z-index:2; height:400px; width:550px; background:rgba(50,50,50);
					translate:2px 2px; scale:.75; filter: blur(2px); border-radius: 20px;
					transform:translate3d(0dvw,-64dvh,0dvw); transition:all 500ms ease-in-out;
				}
				.laTabletteBox .ombreTaTablette.stand {
					transform:rotateX(0deg) rotateY(0deg) rotateZ(46deg) translate3d(-20dvw,-90dvh,-45dvw); filter:blur(7px); background:rgba(55,55,55, .3);
				}
			
				.laTabletteBox .laTablette .borderTablette {
					position:absolute; background:rgb(171,171,171);
				}
					.laTabletteBox .laTablette .borderTablette.btTop {
						top:0; left:20px; width:510px; height:10px; transform-origin:50% 0; transform: rotateX(90deg);
					}
					.laTabletteBox .laTablette .borderTablette.btBottom {
						bottom:0; left:20px; width:510px; height:10px; transform-origin:50% 100%; transform: rotateX(-90deg);
					}
					.laTabletteBox .laTablette .borderTablette.btLeft {
						left:0; top:20px; height:360px; width:10px; transform-origin:0 50%; transform:rotateY(-90deg);
					}
					.laTabletteBox .laTablette .borderTablette.btRight {
						right:0; top:20px; height:360px; width:10px; transform-origin:100% 50%; transform:rotateY(90deg);
					}
					
					.screenTablette {
						position:absolute; box-sizing:border-box; top:0; left:0; height:400px; width:550px; border-radius:20px; 
						background:linear-gradient(135deg,rgb(20,20,20) 50%, rgb(0,0,0) 49%); 
						transform:translateZ(10px);
					}
						.screenTablette .inScreenTablette {
							position:absolute; top:20px; left:20px; height:360px; width:510px; background:#ccc;
						}
						
						.screenTablette .inScreenTablette .video-wrapper {
							height:100%;
						}
						.screenTablette .inScreenTablette .video-wrapper .fullscreen-video {
							width: 510px; height: 360px; position: relative;
						}
						
		@media only screen and (max-width:700px) {
			.laTabletteBox {
				scale:.9; translate:-43dvw 0;
			}					
		}


/* ///////////////////////////////////////////////////////////////////////////// 
//////////  COLOR CHECKER //////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////// */

			.checkerBox {
				position:absolute; height:400px; width:300px; filter:drop-shadow(7px 8px 3px rgba(0,0,0, .5)); rotate:-10deg;
				scale:.7; translate:-12dvw 10dvh;
			}
				.colorChecker {
					position:absolute; top:0; height:400px; width:300px; border-radius:20px;
					border: 4px solid rgb(15, 15, 15); box-sizing: border-box;
					background-image: linear-gradient(45deg, rgb(19, 19, 19) 50%, transparent 50%);
					background-size: 5px 5px;
					background-color: rgb(30, 30, 30);
				}
					.colorChecker.checkLeft {
						left:-150px; border-right-width: 20px;
					}
					
					.colorChecker.checkRight {
						right:-151px; border-left-width: 20px;
					}
					
					.checkerBox .charniere {
						position:absolute; z-index:2; height:300px; width:20px; top:50px; left:140px; 
					}
						.charniere span {
							position:absolute; height:60px; width:20px; left:0; box-sizing:border-box; 
							border-color:rgb(19, 19, 19); border-style:solid;
						}
							.charniere span:first-child {top:0;}
							.charniere span:nth-child(2) {top:60px;}
							.charniere span:nth-child(3) {top:120px;}
							.charniere span:nth-child(4) {top:180px;}
							.charniere span:last-child {top:240px;}
							
							.charniere span:nth-child(odd) {
								border-width:1px 1px 1px 0;
								background:linear-gradient(90deg,rgb(15, 15, 15), rgb(50, 50, 50), rgb(30, 30, 30));
							}
							.charniere span:nth-child(even) {
								border-width:1px 0 1px 1px;
								background:linear-gradient(90deg,rgb(30,30,30), rgb(50, 50, 50), rgb(15, 15, 15));
							}
							
							
					.boxColorCheck {
						position:absolute; top:5px; left:20px; height:330px; width:210px; 
						display:flex; flex-flow: row nowrap; justify-content:space-between;
					}
						.boxColorCheck .boxColorCheckBox {position:relative;}
							.boxColorCheck .boxColorCheckBox svg {fill:#ffffff;}
						
							.boxColorCheck .boxColorCheckBox:first-child, .boxColorCheck .boxColorCheckBox:last-child {
								width:20%; height:100%; 
							}	
								.boxColorCheck .boxColorCheckBox:first-child span, .boxColorCheck .boxColorCheckBox:last-child span {
									position:relative; display:block; width:100%; height:calc((100% / 8) - 4px ); margin:0 0 5px 0; background:white;
								}
									.boxColorCheck .boxColorCheckBox:first-child span:first-child {background:rgb(227, 74, 138);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(2) {background:rgb(174, 109, 189);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(3) {background:rgb(0, 147, 227);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(4) {background:rgb(0, 192, 218);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(5) {background:rgb(0, 196, 110);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(6) {background:rgb(250, 214, 32);}
									.boxColorCheck .boxColorCheckBox:first-child span:nth-child(7) {background:rgb(255, 172, 54);}
									.boxColorCheck .boxColorCheckBox:first-child span:last-child {background:rgb(239, 86, 81);}
									
									.boxColorCheck .boxColorCheckBox:last-child span:first-child {background:rgb(244, 244, 242);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(2) {background:rgb(233, 233, 233);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(3) {background:rgb(219, 219, 219);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(4) {background:rgb(202, 202, 202);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(5) {background:rgb(53, 53, 53);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(6) {background:rgb(47, 46, 51);}
									.boxColorCheck .boxColorCheckBox:last-child span:nth-child(7) {background:rgb(34, 34, 34);}
									.boxColorCheck .boxColorCheckBox:last-child span:last-child {background:rgb(27, 27, 27);}
									
	
								
							.boxColorCheck .boxColorCheckBox:nth-child(2), .boxColorCheck .boxColorCheckBox:nth-child(3) {
								width:25%; height:100%; 
							}
								.boxColorCheck .boxColorCheckBox:nth-child(2) span:first-child, .boxColorCheck .boxColorCheckBox:nth-child(3) span:first-child,
								.boxColorCheck .boxColorCheckBox:nth-child(2) span:last-child, .boxColorCheck .boxColorCheckBox:nth-child(3) span:last-child {
										display: flex; justify-content: center; align-items: center;
								}
							
								.boxColorCheck .boxColorCheckBox:nth-child(2) span, .boxColorCheck .boxColorCheckBox:nth-child(3) span {
									position:relative; display:block; width:100%; height:calc((100% / 7) - 4px ); margin:0 0 5px 0;
								}
									.boxColorCheck .boxColorCheckBox:nth-child(2) span:nth-child(2) {background:rgb(203, 222, 226);}
									.boxColorCheck .boxColorCheckBox:nth-child(2) span:nth-child(3) {background:rgb(207, 221, 222);}
									.boxColorCheck .boxColorCheckBox:nth-child(2) span:nth-child(4) {background:rgb(211, 219, 221);}
									.boxColorCheck .boxColorCheckBox:nth-child(2) span:nth-child(5) {background:rgb(219, 220, 224);}
									.boxColorCheck .boxColorCheckBox:nth-child(2) span:nth-child(6) {background:rgb(217, 217, 217);}
									
									.boxColorCheck .boxColorCheckBox:nth-child(3) span:nth-child(2) {background:rgb(207, 220, 226);}
									.boxColorCheck .boxColorCheckBox:nth-child(3) span:nth-child(3) {background:rgb(211, 219, 222);}
									.boxColorCheck .boxColorCheckBox:nth-child(3) span:nth-child(4) {background:rgb(217, 217, 217);}
									.boxColorCheck .boxColorCheckBox:nth-child(3) span:nth-child(5) {background:rgb(224, 218, 218);}
									.boxColorCheck .boxColorCheckBox:nth-child(3) span:nth-child(6) {background:rgb(227, 215, 217);}
									
					
					
					/* ////////////////////////////////////////////////////////////// */
					
					.colorCheckerBox {
						position:relative; height:350px; width:245px; background:rgb(40,40,40); border: 1px solid rgb(0,0,0);
					}	
						.checkLeft .colorCheckerBox {
							margin:24px auto auto 25px; border-radius:10px 0 0 10px;
						}
						.checkRight .colorCheckerBox {
							margin:24px 25px auto auto; border-radius:0 10px 10px 0;
						}
						
						.checkRight .colorCheckerBox .headerCheck, .checkRight .colorCheckerBox .footerCheck {
							position:relative; width:100%; height:10%; color: white; font-family: arial; display: flex;
							justify-content: space-between; padding: 0 5px 10px 5px; box-sizing: border-box; 
						}
							.checkRight .colorCheckerBox .headerCheck {font-size: 14px;}
							.checkRight .colorCheckerBox .footerCheck {font-size:10px;}
							
							.mesure {
								position:absolute; z-index:5; height:5px; width:170px; transform-origin:0% 100%; color:rgb(255,255,255); 
								font-size:10px;
								background-image: repeating-linear-gradient(to right, #ffffff, #ffffff 1px, transparent 1px, transparent);
								background-size: 3px 5px;
								background-color:transparent;
							}
								.mesure .mesure-01 {
									position:absolute; z-index:1; height:10px; width:170px; bottom:0;
									background-image: repeating-linear-gradient(to right, #ffffff, #ffffff 1px, transparent 1px, transparent);
									background-size: 42px 5px;
									background-color:transparent;
								}
								.mesure .mesure-02 {
									position:absolute; z-index:2; height:7px; width:170px; bottom:0;
									background-image: repeating-linear-gradient(to right, #ffffff, #ffffff 1px, transparent 1px, transparent);
									background-size: 21px 5px;
									background-color:transparent;
								}
							
								.checkLeft .colorCheckerBox .mesure {
									rotate:90deg;
								}
								
								.mesure:after {
									content:"mm";
									position:absolute; top: -10px; right: -20px;
								}
								
								.kodak-Gray-Scale {
									position:absolute; transform-origin:0 100%; rotate:-90deg; font-size:10px; color:rgb(255,255,255);
									font-family:arial; bottom:10px; left:245px;
								}
							
							.checkRight .colorCheckerBox .footerCheck .mesure {
								bottom:0; left:20px;
							}
							
						.checkRight .colorCheckerBox .thrColor {
							position:relative;
							display: grid;
							grid-template-columns: repeat(4, 1fr);
							grid-template-rows: repeat(6, 1fr);
							grid-column-gap: 10px;
							grid-row-gap: 10px;
							width:80%; height:calc(80% - 8px); margin:0 auto; padding:4px 0; 
						}
							.checkRight .colorCheckerBox .thrColor .coin {
								position:absolute; height:10px; width:10px; border-style:solid; border-color:rgb(255,255,255); z-index:2; 
							}
								.checkRight .colorCheckerBox .thrColor .coin:nth-child(25) {
									top:0; left:-5px; border-width:1px 0 0 1px;
								}
								.checkRight .colorCheckerBox .thrColor .coin:nth-child(26) {
									top:0; right:-5px; border-width:1px 1px 0 0;
								}
								.checkRight .colorCheckerBox .thrColor .coin:nth-child(27) {
									bottom:0; left:-5px; border-width:0 0 1px 1px;
								}
								.checkRight .colorCheckerBox .thrColor .coin:nth-child(28) {
									bottom:0; right:-5px; border-width:0 1px 1px 0;
								}
						
						.checkRight .colorCheckerBox .thrColor span {
							background:white;  height:100%; width:100%;  margin:0 auto;
						}
							.checkRight .colorCheckerBox .thrColor span:first-child {background:rgb(115, 212, 201);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(2) {background:rgb(242, 176, 40);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(3) {background:rgb(0, 162, 195);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(4) {background:rgb(33, 33, 33);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(5) {background:rgb(150, 141, 196);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(6) {background:rgb(183, 206, 64);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(7) {background:rgb(223, 86, 166);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(8) {background:rgb(79, 78, 83);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(9) {background:rgb(89, 111, 62);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(10) {background:rgb(95, 51, 102);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(11) {background:rgb(233, 201, 32);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(12) {background:rgb(133, 133, 133);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(13) {background:rgb(103, 138, 180);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(14) {background:rgb(230, 93, 101);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(15) {background:rgb(210, 56, 58);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(16) {background:rgb(183, 185, 184);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(17) {background:rgb(225, 170, 150);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(18) {background:rgb(69, 95, 192);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(19) {background:rgb(52, 171, 81);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(20) {background:rgb(219, 219, 219);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(21) {background:rgb(122, 79, 63);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(22) {background:rgb(244, 141, 48);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(23) {background:rgb(11, 58, 162);}
							.checkRight .colorCheckerBox .thrColor span:nth-child(24) {background:rgb(242, 242, 242);}



/* ///////////////////////////////////////////////////////////////////////////// 
//////////  Pantonnier /////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////// */



	.pantone {
		position:absolute; top:50%; left:50%; height:450px; width:90px; border-radius:10px;
		margin:0; filter: drop-shadow(12px -5px 7px rgba(0,0,0, .5)); scale:.65; rotate:45deg; translate:30dvw  0dvh;
	}
		.pantone .brige {
			position:absolute; top:0; left:0; height:450px; width:90px; transform-origin:80% 95%; border-radius:10px;
			transition: rotate 500ms ease-in-out 500ms; box-shadow:0 0 1px rgba(0,0,0, .4); rotate:0deg;
		}
		
	/*	.active .pantone .brige { rotate: -35deg !important;} */
		
			.pantone .brige span {
				position:absolute; z-index:5; height:20px; width:20px; top:calc(95% - 10px); left:calc(80% - 10px);
				border-radius:50%; background:radial-gradient(circle at 30% 40%, rgb(230, 230, 230) 45%,rgb(180, 180, 180) 70%);
			}
			
			.pantone .brige .pantonier {
				position:absolute; z-index:1; height:100%; width:100%; font-size:1rem;
			}
				.pantone .brige .pantonier .pantonier_1, .pantone .brige .pantonier .pantonier_ {
					width:100%
				}
					.pantone .brige .pantonier .pantonier_1 {
						height:70%; writing-mode: vertical-rl; transform:rotateZ(180deg);
						font-weight:bolder; color:rgb(255,255,255); padding:10px; box-sizing:border-box;
					}
						.pantone .brige .pantonier .pantonier_1 b {font-size:130%; display:block;}
					
					.pantone .brige .pantonier .pantonier_2 {
						font-weight:bolder;
						height:30%; padding:7px 10px;
					}
		
			.pantone .brige:first-child {
				rotate:-35deg;				
				background:linear-gradient(0deg,transparent 13%,
				rgb(26, 189, 0) 13%, rgb(26, 189, 0) 23%,transparent 23%,transparent 25%,
				rgb(3, 221, 135) 25%, rgb(3, 221, 135) 35%, transparent 35%,transparent 37%,
				rgb(1, 255, 164) 37%, rgb(1, 255, 164) 47%,transparent 47%, transparent 49%,
				rgb(5, 253, 165) 49%, rgb(5, 253, 165) 59%,transparent 59% ,transparent 61%,
				rgb(54, 255, 180) 61%, rgb(54, 255, 180) 71%,transparent 71%,transparent 73%,
				rgb(55, 255, 183) 73%, rgb(55, 255, 183) 83%,transparent 83%,transparent 85%,
				rgb(108, 255, 201) 85%, rgb(108, 255, 201) 95%,transparent 95%),
				rgb(255,255,255); 
			}
			
			.pantone .brige:nth-child(2) {
				rotate:-30deg;				
				background:linear-gradient(0deg,transparent 13%,
				rgb(8, 64, 240) 13%, rgb(8, 64, 240) 23%,transparent 23%,transparent 25%,
				rgb(50, 120, 254) 25%, rgb(50, 120, 254) 35%, transparent 35%,transparent 37%,
				rgb(69, 137, 254) 37%, rgb(69, 137, 254) 47%,transparent 47%, transparent 49%,
				rgb(75, 164, 254) 49%, rgb(75, 164, 254) 59%,transparent 59% ,transparent 61%,
				rgb(118, 199, 254) 61%, rgb(118, 199, 254) 71%,transparent 71%,transparent 73%,
				rgb(100, 212, 252) 73%, rgb(100, 212, 252) 83%,transparent 83%,transparent 85%,
				rgb(178, 240, 255) 85%, rgb(178, 240, 255) 95%,transparent 95%),
				rgb(255,255,255); 
			}
			
			.pantone .brige:nth-child(3) { background:orange; 
				rotate:-25deg;				
				background:linear-gradient(0deg,transparent 13%,
				rgb(35, 28, 249) 13%, rgb(35, 28, 249) 23%,transparent 23%,transparent 25%,
				rgb(57, 54, 254) 25%, rgb(57, 54, 254) 35%, transparent 35%,transparent 37%,
				rgb(75, 66, 255) 37%, rgb(75, 66, 255) 47%,transparent 47%, transparent 49%,
				rgb(110, 104, 254) 49%, rgb(110, 104, 254) 59%,transparent 59% ,transparent 61%,
				rgb(147, 131, 255) 61%, rgb(147, 131, 255) 71%,transparent 71%,transparent 73%,
				rgb(156, 139, 254) 73%, rgb(156, 139, 254) 83%,transparent 83%,transparent 85%,
				rgb(239, 214, 254) 85%, rgb(239, 214, 254) 95%,transparent 95%),
				rgb(255,255,255); 
			}
			
			.pantone .brige:nth-child(4) { 
				rotate:-20deg;  
				background:linear-gradient(0deg,transparent 13%,
				rgb(135, 23, 253) 13%, rgb(135, 23, 253) 23%,transparent 23%,transparent 25%,
				rgb(165, 42, 254) 25%, rgb(165, 42, 254) 35%, transparent 35%,transparent 37%,
				rgb(179, 71, 255) 37%, rgb(179, 71, 255) 47%,transparent 47%, transparent 49%,
				rgb(192, 90, 254) 49%, rgb(192, 90, 254) 59%,transparent 59% ,transparent 61%,
				rgb(216, 126, 254) 61%, rgb(216, 126, 254) 71%,transparent 71%,transparent 73%,
				rgb(233, 154, 254) 73%, rgb(233, 154, 254) 83%,transparent 83%,transparent 85%,
				rgb(244, 136, 255) 85%, rgb(244, 136, 255) 95%,transparent 95%),
				rgb(255,255,255);
			}
			
			.pantone .brige:nth-child(5) {
				rotate:-15deg; 
				background:linear-gradient(0deg,transparent 13%,
				rgb(252, 14, 21) 13%, rgb(252, 14, 21) 23%,transparent 23%,transparent 25%,
				rgb(255, 38, 65) 25%, rgb(255, 38, 65) 35%, transparent 35%,transparent 37%,
				rgb(255, 35, 70) 37%, rgb(255, 35, 70) 47%,transparent 47%, transparent 49%,
				rgb(255, 52, 101) 49%, rgb(255, 52, 101) 59%,transparent 59% ,transparent 61%,
				rgb(255, 72, 124) 61%, rgb(255, 72, 124) 71%,transparent 71%,transparent 73%,
				rgb(255, 80, 135) 73%, rgb(255, 80, 135) 83%,transparent 83%,transparent 85%,
				rgb(255, 92, 137) 85%, rgb(255, 92, 137) 95%,transparent 95%),
				rgb(255,255,255);
			}
			
			.pantone .brige:nth-child(6) {
				rotate:-10deg;
				background:linear-gradient(0deg,transparent 13%,rgb(254, 163, 12) 13%, rgb(254, 163, 12) 23%,transparent 23%,transparent 25%,rgb(254, 195, 57) 25%, rgb(254, 195, 57) 35%, transparent 35%,transparent 37%,rgb(255, 218, 103) 37%, rgb(255, 218, 103) 47%,transparent 47%, transparent 49%,rgb(254, 235, 94) 49%, rgb(254, 235, 94) 59%,transparent 59% ,transparent 61%,rgb(253, 255, 70) 61%, rgb(253, 255, 70) 71%,transparent 71%,transparent 73%, rgb(254, 248, 100) 73% ,rgb(254, 248, 100) 83%,transparent 83%,transparent 85%,rgb(255, 250, 130) 85%, rgb(255, 250, 130) 95%,transparent 95%),rgb(255,255,255);
			}
			
			.pantone .brige:nth-child(7) {
				rotate:0deg; 
				background:linear-gradient(0deg, transparent 30%, rgb(172, 33, 204) 30%), rgb(255,255,255); 
			}
			
			.pantone.closed .brige{
				rotate:-35deg !important;
			}




/* ///////////////////////////////////////////////////////////////////////////// 
//////////  brochure ///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////// */

			.brochure {
				height:600px; width:300px; transform-style: preserve-3d; transform-origin: bottom center; 
				transform:rotateX(0deg); scale:.7; transition:all 500ms linear;
				translate: 3dvw 5dvh; rotate: 30deg;
			}
			
				.brochure.stand {
					transform:rotateX(-90deg) translate3D(0dvw,0dvh,-40dvh);
				}
			
			.brochure .brochurePage {
				height:600px; width:300px; position:absolute; top:0; transform-style: preserve-3d;
			}
				.brochure .brochurePage.page_1 {
					transform-origin:100% 0; left:-300px; z-index:2; transform:rotateY(180deg);
					transition:all 500ms ease-in;
				}
					.brochure .brochurePage.page_1 {
						transition-delay:550ms;
					}
					.brochure.stand .brochurePage.page_1 {
						 transform:rotateY(30deg);
						transition-delay:125ms;
					}
				
				.brochure .brochurePage.page_2 {
					transform-origin:0 0; right:-300px; z-index:1; transform:rotateY(-180deg);
					transition:all 500ms ease-in;
				}
					.brochure .brochurePage.page_2 {
						transition-delay:125ms;
					}
					.brochure.stand .brochurePage.page_2 {
						transform:rotateY(-40deg);
						transition-delay:550ms;
					}
				
				.brochure .brochurePage .page-recto, .brochure .brochurePage .page-verso,
				.centerPage  .page-recto, .centerPage  .page-verso {
					position: absolute; width: 100%; height: 100%; backface-visibility:hidden; box-sizing: border-box;
				}
				
				.brochurePage.page_1 .page-recto {
					background:orange; padding:5px; border: 15px solid #fff; padding: 170px 0 0 0;
					background-image:url(https://adessias.fr/wp-content/uploads/2025/11/lipesick2.jpg);
					background-position:center; background-repeat:no-repeat; background-size:cover;
				}
					.brochurePage.page_1 .page-recto span {
						display:block; width:100%; font-family:arial; text-align:center;
						background:rgba(255,255,255, .4);
					}
				
				.brochurePage.page_1 .page-verso {
					background-image:url(https://adessias.fr/wp-content/uploads/2025/11/pour-le-fun-9.jpg);
					background-position:center; background-repeat:no-repeat; background-size:cover;
					display:flex; justify-content: center; align-items: self-end;
				}
					.brochurePage.page_1 .page-verso span {
						font-size: 65px; color: rgb(255, 0, 0); font-family:arial;
						font-weight: bold; margin: 0 0 80px 0; letter-spacing:-5px;
					}
					
				.brochurePage.page_2 .page-recto {
					background:linear-gradient(-60deg, #ccc, #fff);
					
							background:url(https://adessias.fr/wp-content/uploads/2025/11/lipesick.jpg);
							background-position:center; background-repeat:no-repeat; background-size:cover;
				}
				
				.brochurePage.page_2 .page-verso {
					background:url(https://adessias.fr/wp-content/uploads/2025/11/lipesick3.jpg);
					background-position:center; background-repeat:no-repeat; background-size:cover;
				}
				
				.centerPage {
					height:600px; width:300px; transform-style:preserve-3d;
				}
				
				.centerPage .page-recto {
					background:linear-gradient(45deg, #ccc 30%, #fff 60%);
					display:flex; justify-content: flex-start; align-items: center; flex-flow: column;
				}
					.centerPage .page-recto div {
						width:100%; padding:10px; box-sizing:border-box;
					}
					.centerPage .page-recto div:first-child {
						height:16%; text-align:center; padding:20px 0 0 0;
					
					}
					.centerPage .page-recto div:nth-child(2) { height:42%; }
						.centerPage .page-recto div:nth-child(2) span {font-size:18px; text-align: center; display: block;}
					.centerPage .page-recto div:nth-child(3) {height:42%;}
						.centerPage .page-recto div:nth-child(3) span {
							height:100%; width:80%; display:block; margin:0 auto;
							background:url(https://adessias.fr/wp-content/uploads/2025/11/carteMap.jpg);
							background-position:center; background-repeat:no-repeat; background-size:cover;
						}
				
				.centerPage .page-verso {
					background-image:url(https://adessias.fr/wp-content/uploads/2025/11/lipesick.jpg);
					background-position:center; background-repeat:no-repeat; background-size:cover;
				}
				/*/////////////////////////*/
				
				.page-recto {}
				.page-verso {
					transform: rotateY(180deg);
				}
				
				/* brochureOmbre */
				
				.brochureOmbre {
					position:absolute; width:0px; height:150px; transform-origin:0 0; transform:rotateX(90deg) skewX(0deg); background:linear-gradient(90deg, rgba(0,0,0, .2) 10%, transparent 80%);
					transition:all 500ms ease-in; filter:blur(2px);
				}
					.brochure.stand .brochureOmbre {width:500px; transform:rotateX(90deg) skewX(-60deg);}

					.brochureOmbre_3 {
						position:absolute; width:390px; height:196px; background:linear-gradient(70deg,rgba(0, 0, 0, 0.44) 0%,rgba(0, 0, 0, 0.18) 20%,transparent 100%);
						top:0; left:334px; transform:skewX(71deg) rotateZ(8deg); transform-origin:0 0; transition:all 500ms ease-in 550ms;
					}

/* ///////////////////////////////////////////////////////////////////////////// */

.pelagos .leCiel canvas {
    /* filter:drop-shadow(10rem 3rem 3.5rem rgba(155, 100, 100, .2)); */
    filter:drop-shadow(3rem 6rem 2.5rem rgba(100, 10, 10, .65));
}

.pelagos .surface canvas {
	/* filter:drop-shadow(6rem 3rem 3rem rgba(155, 100, 100, .4)); */
	filter:drop-shadow(6rem 3rem 3rem rgba(100, 10, 10, .65));
}

.pelagos .aphotique canvas {
	/* filter:drop-shadow(3rem 3rem 2rem rgba(155, 100, 100, .6)); */
	filter:drop-shadow(3rem 3rem 2rem rgba(100, 10, 10, .75));
}

.pelagos .bathypelagique canvas {
	/* filter:drop-shadow(1.5rem 2rem 1.5rem rgba(155, 100, 100, .8)); */
	filter:drop-shadow(1.5rem 2rem 1.5rem rgba(100, 10, 10, .85));
}

.pelagos .abysse canvas {
	/* filter:drop-shadow(.5rem 2rem 1rem rgba(155, 100, 100, .95)); */
	filter:drop-shadow(.5rem 2rem 1rem rgba(100, 10, 10, .95));
}

/* ///////////////////////////////////////////////////////////////////////////// */

	.infosTxt {
		position:relative; z-index:2; width:calc(500px + 2rem);
		background:rgba(255, 255, 255, .8); padding:2rem; border-radius:1rem;
		font-family:'comfortaaregular'; box-sizing: border-box;
		
	}
	
	.infosTxt h3 {
		font-size: 1.5rem;
		margin: 0 0 1rem 0;
		line-height: 1.5rem;
		font-family:"Rock Salt", cursive;
	}
	
	@media only screen and (max-width:768px) {
		.infosTxt h2 {
			font-size:1.5rem !important;
		}
	}
	
		.zone_pelagique .infosTxt h2 {
			font-size:3rem; font-weight:bold; line-height:2.25rem; margin:0 0 1rem 0; font-family:'perfect-moment';
		}
		
		.zone_pelagique .infosTxt p {
			padding:0 1rem .5rem 1rem;
		}
		
		.zone_pelagique .infosTxt p a.bl-trigger {
			font-size: .85rem; color:rgb(0,0,0); cursor:help; background:yellow; padding:.2rem .35rem;
		}

/* ///////////////////////////////////////////////////////////////////////////// */



#group4.pelagos canvas {
	translate:15% 0;
}

#group5.pelagos canvas {
	translate:-25% 15%;
}

#group6.pelagos canvas {
	translate:40% 0;
}

#group7.pelagos canvas {
	translate:-50% 0;
}

#group8.pelagos canvas {
	translate:45% 0;
}

#group9.pelagos canvas {
	translate:-45% 0;
}

#group10.pelagos canvas {
	translate:30% 0;
}

#group11.pelagos canvas {
	translate:-55% 0;
}

#group12.pelagos canvas {
	translate:50% 0;
}



/* ////////////////////////////////////////////////////////////////////////// */

	.colorFixed {
		position:fixed; z-index:1;
		top:0; left:0; height:100dvh; width:100dvw;
	}
		.colorFixed .blockColor, .theLightHalo {
			position:absolute; top:0; left:0; height:100%; width:100%;
			transition:opacity 1s linear;
		}
		
			.theLightHalo {
				background:radial-gradient(circle at 50% 50%,rgba(255,255,255, .4), transparent); z-index:8;
			}
		
			.colorFixed .blockColor.bC_1 {z-index:7; background:radial-gradient(circle at 50% 0%,rgb(207, 89, 193) 50%,rgb(102, 41, 95) 80%,rgb(61, 11, 55) 100%); opacity:1;}
				 .colorFixed .blockColor.bC_1.remove {opacity:0;}
				
			.colorFixed .blockColor.bC_2 {z-index:6; background:rgb(255,238,27); opacity:1;} 
				.colorFixed .blockColor.bC_2.remove {opacity:0;} 
			
			.colorFixed .blockColor.bC_3 {z-index:5; background:rgb(255,210,63); opacity:1;} 
				.colorFixed .blockColor.bC_3.remove {opacity:0;}
			
			.colorFixed .blockColor.bC_4 {z-index:4; background:rgb(249,138,41); opacity:1;} 
				.colorFixed .blockColor.bC_4.remove {opacity:0;} 
				
			.colorFixed .blockColor.bC_5 {z-index:3; background:rgb(243,66,19); opacity:1;} 
				.colorFixed .blockColor.bC_5.remove {opacity:0;}
			
			.colorFixed .blockColor.bC_6 {z-index:2; background:rgb(111,29,27); opacity:1;} 
				.colorFixed .blockColor.bC_6.remove {opacity:0;}
			
			.colorFixed .blockColor.bC_7 {z-index:1; background:rgb(55,24,77); opacity:1;} 
				.colorFixed .blockColor.bC_7.remove {opacity:0;} 



/* ////////////////////////////////////////////////////////////////////////// */

.troisDTxt {
	position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transform-style: preserve-3d;
    transform:translateZ(-100dvw) translateX(-50dvw) rotateY(54deg);
}
	.troisDTxt .introisDTxt {
		font-size: 20rem;
		text-align: center;
		letter-spacing: -5rem;
		color:rgb(30, 30, 30, .2);
	}

/* ////////////////////////////////////////////////////////////////////////// */

.partBlock {
	position:relative; height:100%; display:flex; justify-content:center; flex-flow:row wrap; align-items:center;
	box-sizing:border-box;
}

/* ////////////////////////////////////////////////////////////////////////// */

#accueil {
	z-index:5;
}

/* ////////////////////////////////////////////////////////////////////////// */
#group2 {
	z-index:3;
}
	#group2.pelagos canvas {
		translate:0% -38dvh;
	}
	#group2.pelagos .abysse canvas {
		filter:drop-shadow(0rem 1rem 1rem rgba(100,10,10, .9)) drop-shadow(0rem 0rem 9rem rgba(100, 10, 10, 1));
	}

	#group2 .aphotique .partBlock .infosTxt {
		margin:auto 1rem auto 2rem; max-width:500px;
	}
	
	#group2 .aphotique .partBlock:first-child {
		width:calc((100dvw / 3) * 2); /* background:rgba(255,255,0, .45); */
	}
	#group2 .aphotique .partBlock:nth-child(2) {
		width:calc(100dvw / 3); /* background:rgba(255,165,0, .5); */
	}
	
	@media only screen and (max-width:768px) {
		#group2 .aphotique .partBlock .infosTxt {
			margin:auto; max-width:none;
		}
		#group2 .aphotique .partBlock:first-child {
			width:calc(100% - 1rem); height:auto; /* background:rgba(255,255,0, .45); */
		}
		
		#group2 .aphotique .partBlock:nth-child(2) {
			display:none;
		}
	}
	
	
	
	

/* ////////////////////////////////////////////////////////////////////////// */
#group3 {
	z-index:4;
}

	#group3.pelagos canvas {
		translate:20% -15%;
	}
	
	#group3 .aphotique .partBlock .infosTxt {
		margin:auto auto auto 1rem; max-width:calc(500px - 2.8rem);
	}
	
	#group3 .surface .partBlock {
		width:50%; 
	}
	
	#group3 .infosTxt {
		margin:auto 1rem auto 2rem;
	}
	
	@media only screen and (max-width:768px) {
		#group3 .surface .partBlock:first-child {
			width:calc(100% - 1rem); 
		}
			#group3 .surface .partBlock:first-child .infosTxt {
				margin:0 auto;
			}
			
		#group3 .surface .partBlock:nth-child(2) {
			display:none; 
		}
	}
	
/* ////////////////////////////////////////////////////////////////////////// */
#webdesign {
	z-index:1;
}
	#webdesign.pelagos canvas {
		translate:-25% -6%;
	}

	#webdesign .partBlock .infosTxt {
		max-width:calc(500px - 2.8rem);
	}
	#webdesign .partBlock:first-child {
		width:45%;
	}

	#webdesign .partBlock:nth-child(2) {
		width:55%; transform-style: preserve-3d;
	}

	#webdesign .partBlock .inGlobalBox  {
		scale:.7;
	}
	
	.ordiShadow {
		position:absolute; top:100px; left:100px; height:400px; width:600px; 
		transform:translate3d(0px, -400px, 0) skewX(-40deg) scaleY(.5); transform-origin:bottom center;
		background: linear-gradient(-5deg, rgba(0,0,0, .7), transparent); border-radius: 20px;
		filter:blur(5px);
	}
	
	#webdesign h2.webd {
		font-size: 10rem; letter-spacing: -.8rem; margin:30rem 0 0 0;
		color:rgb(255,255,255); transition:margin 500ms cubic-bezier(0, 0, 0.02, 0.98) 125ms;
	}

	@media only screen and (max-width:768px) {
		#webdesign .partBlock .inGlobalBox  {
			scale:.55;
		}

		#webdesign h2.webd {
			font-size:5rem; letter-spacing:-.4rem;
		}
		
		#webdesign.pelagos canvas {
			translate: -15% -6%;
		}
	}

	
/* ////////////////////////////////////////////////////////////////////////// */
#group5 {
	z-index:3;
}

	#group5 .bathypelagique .partBlock .infosTxt {
		margin:60dvh 1rem auto auto; max-width:calc(500px - 2.8rem);
	}
	
	#group5 .bathypelagique .partBlock {
		width:50%; 
	}


/* ////////////////////////////////////////////////////////////////////////// */
#group6 {
	z-index:2;
}
	#group6 .bathypelagique .partBlock:first-child {
		width:60%;
	}
	#group6 .bathypelagique .partBlock:nth-child(2) {
		width:40%;
	}
	
	#group6 .bathypelagique .partBlock:first-child .infosTxt {
		margin:auto 4rem auto auto; color:rgb(0,0,0); text-align:left;
	}
	
@media only screen and (max-width:768px) {
	#group6 .bathypelagique .partBlock:first-child {
		width:calc(100% - 4rem);
	}
	#group6 .bathypelagique .partBlock:first-child .infosTxt {
		margin:0 auto;
	}
	
	#group6 .bathypelagique .partBlock:nth-child(2) {
		display:none;
	}
}

/* ////////////////////////////////////////////////////////////////////////// */

#group7 {
	z-index:3;
}
	#group7 .surface .partBlock .infosTxt {
		
	}
	#group7 .surface .partBlock:first-child {
		width:20%;
	}
	#group7 .surface .partBlock:nth-child(2) {
		width:80%;
	}

/* ////////////////////////////////////////////////////////////////////////// */

#photographies {
	z-index:2;
}
	#photographies h2.fullTitle {
		position: absolute; top: 50%; left: 50%; translate: -49% -70%; color:rgba(255,255,255, .8);
		text-align: center; font-size: 36dvw; transform-style: preserve-3d;
		transform: rotateY(0deg) rotateZ(0deg) rotateX(0deg) translate3d(-3dvw, 14dvh, 0dvw);
		transform-origin: 50% 50%; margin: 0; letter-spacing: -3dvw;
		filter:drop-shadow(0rem 2rem 6px rgba(100,100,100, .2));
	}
	
	#photographies .neoBtn.photoOne {
		animation: laFormeUn 10s ease-in-out infinite;
		translate:30dvw 40dvh;
	}
		#photographies .neoBtn.photoOne a.bl-trigger {
			/* background-image:url(../../images/remanance_btn.jpg); */
		}
		#photographies .neoBtn.photoOne a.bl-trigger h4 {
			background-image: url(../../images/remanance_btn.jpg);
		}
		
	#photographies .neoBtn.photoTwo {
		animation: laFormeDeux 10s ease-in-out infinite;
		translate:-25dvw 30dvh;
	}
		#photographies .neoBtn.photoTwo a.bl-trigger  {
			/* background-image:url(../../images/05gym_btn.jpg); */
		}
			#photographies .neoBtn.photoTwo a.bl-trigger  h4 {
				background-image: url(../../images/05gym_btn.jpg);
			}

@media only screen and (max-width:768px) {
	#photographies .neoBtn.photoOne {
		translate: 25dvw 29dvh;
	}
	
	#photographies .neoBtn.photoTwo {
		translate: -25dvw 25dvh;
	}
}

/* ////////////////////////////////////////////////////////////////////////// */

#group9 {
	z-index:3;
}

	#group9 .neoBtn.photoThree {
		animation: laFormeTrois 10s ease-in-out infinite;
		translate:-10dvw -175dvh;
	}
		#group9 .neoBtn.photoThree a.bl-trigger {
			/* background-image:url(../../images/portraits_btn.jpg); */
		}
		#group9 .neoBtn.photoThree a.bl-trigger h4 {
			background-image: url(../../images/portraits_btn.jpg);
		}
/* ////////////////////////////////////////////////////////////////////////// */

#group10 {
	z-index:3;
}
	#group10 .infosTxt {
		translate:0 5dvh;
	}

/* ////////////////////////////////////////////////////////////////////////// */

#group11 {
	z-index:2;
}

/* ////////////////////////////////////////////////////////////////////////// */

#group12 {
	z-index:1;
}

/* ////////////////////////////////////////////////////////////////////////// */

#print {
	z-index:2;
}

#print.pelagos .leCiel canvas {
	translate:30% 0%;
}

	#print .bathypelagique .partBlock:first-child {
		width:70%;
	}
	#print .bathypelagique .partBlock:nth-child(2) {
		width:30%;
	}

		#print .abysse h2.prinTitle {
			position:absolute; top:50%; left:0%; translate:-50% -50%; margin:0 0 0 7rem; font-size:22rem; rotate:90deg; color:rgb(255,255,255);
		}
		
	@media only screen and (max-width:768px) {
		#print .bathypelagique .partBlock:first-child  {
			width:100%;
		}
			
			#print .bathypelagique .partBlock:nth-child(2) {
				display:none;
			}
		
		#print .bathypelagique .partBlock .theMag {
			transform:scale3D(.55,.55,.55); translate:0% 0%;
		}
		
		#print .abysse h2.prinTitle {
			left:50%; translate:-50% -50%; rotate:0deg; font-size:11rem; margin:-16rem 0 0 -.5rem;
		}
	}

/* ////////////////////////////////////////////////////////////////////////// */

#group14 .zone_pelagique .neoBtn.photoOne {
	animation: laFormeUn 10s ease-in-out infinite;
	translate:20dvw 0dvh;
}
#group14 .zone_pelagique .neoBtn.photoTwo {
	animation: laFormeDeux 10s ease-in-out infinite;
	translate:-10dvw 0dvh;	
}

/* ////////////////////////////////////////////////////////////////////////// */

#group16 {
	z-index:4;
}

#group16 canvas {
	transform:translate3d(-60dvw,58dvh,-62dvw);
}

/* ////////////////////////////////////////////////////////////////////////// */

#contact {
	z-index:3;
}
	#contact .forContact, #group16 .forContact {
		min-height:10dvh; width:60dvw; max-width:calc(100% - 10rem); background:rgba(255,255,255, .5);
		border-radius:1.5rem; padding:1.5rem 2rem;
	}
	
	.forContact h2 {
		font-size:3rem;
		font-family:'perfect-moment';
		margin:0 0 1rem 0;
		line-hight:2.2rem;
	}
	.forContact p {
		margin:0 0 0 .5rem;
		margin:0 0 1rem 0;
	}
	
	#contact canvas {
		translate: -30dvw 17dvh;
	}

/* ////////////////////////////////////////////////////////////////////////// */

#group16 .abysse .mokaBaseBox {
	transform: rotateX(45deg) rotateZ(17deg) scale3d(.7, .7, .7) translate3d(15dvw, 60dvh, 0dvw);
}

	#group16 .zone_pelagique .forContact {
		display: flex;
		justify-content: center;
		align-items:stretch;
		box-sizing: border-box;
	}
		#group16 .zone_pelagique .forContact .contactBlock {
			padding:1rem;
		}
			#group16 .zone_pelagique .forContact .contactBlock dl {
				height:auto; padding:0 1rem .2rem 1rem;
			}
			#group16 .zone_pelagique .forContact .contactBlock dl dt {
				font-size:1.1rem; line-height:1.1rem; padding: 
			} 
			#group16 .zone_pelagique .forContact .contactBlock dl dd {
				line-height: 1rem; padding:0 0 0 .5rem;
			}
		
		
		
			#group16 .zone_pelagique .forContact .contactBlock .contactFoto {
				position:relative; height:calc(100% - 2rem); width:100%; background:url(../../images/moi.jpg) center/cover no-repeat;
			}
		
		#group16 .zone_pelagique .forContact .contactBlock:first-child {
			width:40%;
		}
		
		#group16 .zone_pelagique .forContact .contactBlock:nth-child(2) {
			width:60%;
		}
			#group16 .zone_pelagique .forContact .contactBlock:nth-child(2) h2, #group16 .zone_pelagique .forContact .partBlock:nth-child(2) p {
				text-align:left;
			}
			
			#group16 .zone_pelagique .forContact .contactBlock:nth-child(2) p {
				padding:1rem;
			}


/* ////////////////////////////////////////////////////////////////////////// */

	#contact .zone_pelagique .forContact{
		display: flex;
		justify-content: center;
		align-items:stretch;
		box-sizing: border-box;
	}
	#contact .zone_pelagique .forContact .contactBlock:first-child {width:30%;}
	#contact .zone_pelagique .forContact .contactBlock:nth-child(2) {width:70%;}
	
	/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
		
	@media (max-width: 768px) {
		#group16 .zone_pelagique .forContact, #contact .zone_pelagique .forContact {
			width: calc(100% - 2rem); max-width:none; align-items:center; flex-flow:wrap; padding:1rem;
		}
			#group16 .zone_pelagique .forContact .contactBlock:first-child, #contact .zone_pelagique .forContact .contactBlock:first-child {
				width:100%; height:25dvh;
			}
				#group16 .zone_pelagique .forContact .contactBlock .contactFoto {
					height:100%; border-radius:1rem 1rem 0 0;
				}
			#group16 .zone_pelagique .forContact .contactBlock:nth-child(2), #contact .zone_pelagique .forContact .contactBlock:nth-child(2) {
				width:100%; height:auto;
			}
				#group16 .zone_pelagique .forContact .contactBlock:nth-child(2) p, #contact .zone_pelagique .forContact .contactBlock:nth-child(2) p  {
					padding:0 1rem;
				}
	}

/* ////////////////////////////////////////////////////////////////////////// */

.theLastOne {
	background: rgb(255, 255, 255) !important;
    box-shadow: 0rem -.5rem 1rem rgba(0, 0, 0, 0.15) !important;
} 
	#theLastOne .aphotique  {
		pointer-events:auto;
	}

#theLastOne .aphotique a.vHaut {
	position:absolute; bottom:10dvh; right:5dvw; height:30px; width:30px; text-align:center; line-height:30px;
	border:1px solid rgb(0,0,0); font-size:20px; border-radius:50%; z-index:3; font-family:'line-Awesome';
	color: rgb(50, 50, 50);
}



.theLastOne {
	z-index:20;
}
		.theLastOne .aphotique .leCafee, .theLastOne .aphotique .leWidgete {
			position:relative;
		}
		.theLastOne .aphotique .leCafee {
			height:60%; width:90%; border-bottom:1px solid rgba(0, 0, 0, 0.08); 
			background:radial-gradient(ellipse at 50% 57%, rgb(227, 227, 227) 0, transparent 50%);
		}
			.theLastOne .aphotique .leCafee .BoxCafe {
				height:100%; width: 100%; scale: 0.75;
			}
			
			.theLastOne .aphotique .leWidgete h2 {
				font-family:'comfortaaregular'; font-size:1.5rem; margin:1.5rem 0 0 0; padding:0;
			}
			
			.theLastOne .aphotique .leWidgete ul {
				list-style:none;  margin:0; padding:0 1rem;
			}
			.theLastOne .aphotique .leWidgete ul li {
				margin:0; padding:0; font-size:initial;
			}
				.theLastOne .aphotique .leWidgete ul li.wp-social-link {
					height:auto; line-height:normal;
				}
			.theLastOne .aphotique .leWidgete ul li a {
				text-decoration:none; font-size:.95rem; color:rgb(50,50,50);
			}
			
		
		.theLastOne .aphotique .leWidgete {
			height:40%; width:45%; display:flex; justify-content:center; flex-flow:row wrap; align-items:center;
			padding:0 1rem; box-sizing:border-box;
		} 	
			.theLastOne .aphotique .leWidgete .footer-widgets {
				width:80%;	
			}
				.theLastOne .aphotique .leWidgete.aTright .footer-widgets {
					margin-left:auto; text-align:right;
				}
				.theLastOne .aphotique .leWidgete.aTleft .footer-widgets {
					margin-right:auto;
				}
		
		.footer-widgets .widget.widget_block .widget-content p a {
			text-decoration:none; font-size:.95rem; color:rgb(50, 50, 50); padding:0 0 0 1rem; background:transparent;
		}
		
		
		span.sepa {
			position:absolute; height:30dvh; width:1px; background:rgb(110, 110, 110, .3);
			z-index:2; top:63dvh; left:50%;
		}
	
	@media only screen and (max-width:768px) {
		.theLastOne .aphotique .leCafee {
			height:40%;
		}
		
		.theLastOne .aphotique .leCafee .BoxCafe {
			scale:.5;
		}
		
		.theLastOne .aphotique .leWidgete {
			height:60%; width:50%;
		}
			.theLastOne .aphotique .leWidgete.leWidgete.aTright {
				padding:0 1rem 0 0;
			}
			.theLastOne .aphotique .leWidgete.leWidgete.aTleft {
				padding:0 0 0 1rem;
			}
			
			.theLastOne .aphotique .leWidgete ul li {
				line-height: 2.5rem;
			}
			
			.theLastOne .aphotique .leWidgete.aTleft .footer-widgets {
				width:100%;
			}
			
		span.sepa {
			top:42dvh; height:54dvh; 
		}
	}

/* ////////////////////////////////////////////////////////////////////////// */

		.colorFixed .blockCo, .theLightHalo {
			position:absolute; top:0; left:0; height:100%; width:100%;
			transition:opacity 750ms linear;
		}
		
			.colorFixed .blockCo.bC_1 {z-index:8; background:#fff; opacity:1;}
				 .colorFixed .blockCo.bC_1.remove {opacity:0;}
				
			.colorFixed .blockCo.bC_2 {z-index:7; background:#F0EFED; opacity:1;} 
				.colorFixed .blockCo.bC_2.remove {opacity:0;} 
			
			.colorFixed .blockCo.bC_3 {z-index:6; background:#E1DFDB; opacity:1;} 
				.colorFixed .blockCo.bC_3.remove {opacity:0;}
			
			.colorFixed .blockCo.bC_4 {z-index:5; background:#D2CFC9; opacity:1;} 
				.colorFixed .blockCo.bC_4.remove {opacity:0;} 
				
			.colorFixed .blockCo.bC_5 {z-index:4; background:#CAC7C0; opacity:1;} 
				.colorFixed .blockCo.bC_5.remove {opacity:0;}
				
			.colorFixed .blockCo.bC_6 {z-index:3; background:#C2BFB6; opacity:1;} 
				.colorFixed .blockCo.bC_6.remove {opacity:0;}
				
			.colorFixed .blockCo.bC_7 {z-index:2; background:#958b7d; opacity:1;} 
				.colorFixed .blockCo.bC_7.remove {opacity:0;}
				
			.colorFixed .blockCo.bC_8 {z-index:1; background:#6d624f; opacity:1;} 
				.colorFixed .blockCo.bC_8.remove {opacity:1;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////// Actualité ///////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////// */

main.paraMain section.actuExtrait {
	width:100%; max-width:900px; padding:1rem 0 5rem 0; box-sizing:border-box; background:rgb(255,255,255);
	display:flex; justify-content:space-around; flex-flow:row wrap; align-items:center; margin:5rem auto 0 auto;
}
	main.paraMain section.actuExtrait .pagination-wrapper {
		width:95%;
	}
		main.paraMain section.actuExtrait .pagination-wrapper .nav-links {
			width:100%; display:flex; justify-content:center;
		}
		
		main.paraMain section.actuExtrait .pagination-wrapper .nav-links .page-numbers {
			margin:0 1rem;
		}
	
	main.paraMain section.actuExtrait h1 {
		width:95%; font-family:'comfortaaregular';  text-align:center; margin:0 0 2rem 0;
		border-bottom:1px solid rgba(100,100,100, .3);
	}

	main.paraMain section.actuExtrait article.post {
		width:45%; height:30rem; box-sizing:border-box; padding: 1rem; background:rgb(239, 239, 239); margin:0 auto 3rem auto;
	}
		main.paraMain section.actuExtrait article.post h2 {
			font-family:'comfortaaregular';  text-align:left; font-size:1.3rem;
		}
			main.paraMain section.actuExtrait article.post h2 a {
				text-decoration:none;
			}
		
		main.paraMain section.actuExtrait article.post .thumbImg {
			width:100%; height:13rem; box-sizing:border-box; background-size:cover; background-repeat:no-repeat; background-position:center;
			margin:0 0 1rem 0;
		}
		
		main.paraMain section.actuExtrait article.post .entry-content p {
			font-size:.78rem; padding:0 .5rem;
		}
		
		main.paraMain section.actuExtrait article.post .entry-content a {
			display: block; text-decoration:none; font-size:.7rem; color:rgb(255, 255, 255); background:rgb(0, 170, 0); width:fit-content;
			padding:.3rem .5rem .2rem .5rem; margin:1rem 0 0 0; font-weight:bold;
		}

	@media only screen and (max-width:768px) {
		main.paraMain section.actuExtrait article.post {
			width:90%; height:auto;
		}
	}

	@media only screen and (max-width:500px) {
		.smartSize {
			scale:.5;
		}
	}



article.laPage {
	padding:5rem 0
}
	article.laPage .entry-content {
		padding:3rem 4rem 6rem 4rem; box-sizing:border-box; background:rgb(255,255,255); border-radius:1rem; 
	}
	
	article.laPage .entry-content h1, article.laPage .entry-content h2, article.laPage .entry-content h3 {
		font-family:'comfortaaregular'; 
	}
	
	article.laPage .entry-content h1 {
		margin:0 0 4rem 0; text-align:center;
	}
	
	article.laPage .entry-content h2 {
		margin:2rem 1.5rem;
	}
	
	article.laPage .entry-content h3 {
		margin:2rem 3rem 1rem 3rem; border-style:solid; border-color:rgba(100, 100, 100, 0.24); border-width:0 0 1px 0;
	}
	
	article.laPage .entry-content p {
		padding:0 5rem;
	}
	
	article.laPage .entry-content figure {
		height:fit-content; width:fit-content; float: left; margin: 0 1rem .5rem 5rem;
	}
		article.laPage .entry-content figure img {
			height:150px; width:150px;
		}