/**********
 * FONT *
 *********/

@import url('https://fonts.cdnfonts.com/css/macula');
@import url('https://fonts.cdnfonts.com/css/poppins');

@font-face {
    font-family: 'Aquifer';
    src: url('/font/Aquifer.eot');
    src: url('/font/Aquifer.eot?#iefix') format('embedded-opentype'),
        url('/font/Aquifer.woff') format('woff'),
        url('/font/Aquifer.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/**********
 * GLOBAL *
 *********/

:root {
	--primary-color: #FFF9D6;
	--secondary-color: #085226;
}

html{
	margin: 0px;
	padding: 0px;
	color: var(--primary-color);
	font-size: 12px;
	border: 0px solid transparent;
	font-family: 'Poppins', Arial, sans-serif;
	background: radial-gradient(at top left, #005226, #083B1E);
}
body{
	margin: 0px;
	padding: 0px;
	width: 100%; 
	background: url('/imgs/bg-1.png') -20px top no-repeat;
}

* {
	margin:0;
	padding:0;
}

a{ 
	outline: none;
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}
img {
	border: none; 
	max-width: 100%;
}
.pure-g [class*="pure-u"] {
	font-family: 'Poppins', Arial, sans-serif;
}
ul{	list-style-type: none; }
.italic { font-style: italic; }

h1{
	font-family: 'Aquifer','Arial',sans-serif;
	font-size: 50px;
	text-transform: uppercase;
	padding-bottom: 15px;
	font-weight: 400;
	margin: 0px;
}
p{
	font-family: 'Poppins','Arial',sans-serif;
	font-size: 16px;
	line-height: 22px;
}

.btn{
	font-family: 'Macula','Arial',sans-serif;
	display: inline-flex;
	font-size: 26px;
	background: var(--primary-color);
    mask-image: url('/imgs/bg-btn.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('/imgs/bg-btn.png');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;		
	color: var(--secondary-color);
	padding: 0px 15px;
	font-weight: 500;
	height: 55px;
	line-height: 55px;
	z-index: 9999;
	border: none;
}
.btn.min{
	font-size: 16px;
	padding: 0px 15px;
	height: 35px;
	line-height: 35px;
}
.btn.bis{
	font-size: 18px;
	background: url('/imgs/bg-btn-2.png') no-repeat center / 100% 100%;
	color: var(--primary-color);
}


/**********
 * RTOTOP *
 *********/

#returnOnTop {
	bottom: 5%;
	cursor: pointer;
	display: none;
	filter: alpha(opacity = 80); /* IE < 8 */
	opacity: .8;
	position: fixed;
	right: 1%;
	width: 60px;
	height: 60px;
	background: var(--primary-color);
	border-radius: 60px;
	text-align: center;
	font-size: 3em;
	color: #FFF;
	line-height: 60px;
	z-index: 9999;
	color: var(--secondary-color);
}
#returnOnTop:hover {
	filter: alpha(opacity = 100); /* IE < 8 */
	opacity: 1;
}

/**********
 * FOCUS *
 *********/

:focus {
	outline:none;
}
::-moz-focus-inner {
	border:0;
}
::-moz-selection { 
	color: #000; 
	background: var(--primary-color); 
}
::selection  { 
	color: #000; 
	background: var(--primary-color); 
}

/**********
 * PLACEHOLDER *
 *********/

 /* WebKit, Blink, Edge */
::-webkit-input-placeholder {
	color: rgba(253, 63, 146, 0.2);	
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
	opacity:  1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
	opacity:  1;
}
/* Internet Explorer 10-11 */
:-ms-input-placeholder { 
	color: rgba(253, 63, 146, 0.2);	
}
:placeholder-shown {
	color: rgba(253, 63, 146, 0.2);	
}

/**********
 * STANDARD *
 *********/

button:focus { outline: none !important; box-shadow: none !important; }

.alc{ text-align: center!important; }
.alr{ text-align: right!important; }
.all{ text-align: left!important; }
.prel { position: relative; }
.absolute{ position: absolute; }
.height100{ height: 100%; }
.ovhid{ overflow: hidden; }
.din{ display: none; }
.dib{ display: block!important; }
.dinb{ display: inline-block!important; }
.dit{ display: table!important; }
.m0auto { margin: 0 auto; }
.mauto { margin: auto; }
.pt5 {	padding-top: 5px;}
.pt10 {	padding-top: 10px;}
.pt15 {	padding-top: 15px;}
.pt20 {	padding-top: 20px;}
.pt25 {	padding-top: 25px;}
.pt30 {	padding-top: 30px;}
.pt50 {	padding-top: 50px;}
.pt100 { padding-top: 100px;}
.pb10 {	padding-bottom: 10px;}
.pb25 {	padding-bottom: 25px;}
.pb50 {	padding-bottom: 50px; }
.pb75 {	padding-bottom: 75px; }
.pl10 { padding-left: 10px; }
.plr10 { padding: 0 10px; }
.plr15 { padding: 0 15px; }
.plr30 { padding: 0 30px; }
.plr25 { padding: 0 25px; }
.plr50 { padding: 0 50px; }
.ptb10 { padding: 10px 0; }
.ptb15 { padding: 15px 0; }
.ptb25 { padding: 25px 0; }
.ptb30 { padding: 30px 0; }
.ptb20 { padding: 20px 0; }
.ptb25 { padding: 25px 0; }
.ptb50 { padding: 50px 0; }
.ptb70 { padding: 70px 0; }
.ptb100 { padding: 100px 0; }
.ptb200 { padding: 200px 0; }
.pb20{ padding: 0 0 20px 0; }
.pb30{ padding: 0 0 30px 0; }
.pb50{ padding: 0 0 50px 0; }
.mt25 { margin: 25px 0 0 0; }
.mt30 { margin: 30px 0 0 0; }
.mt50 { margin: 50px 0 0 0; }
.mt100 { margin: 100px 0 0 0; }
.mtb25 { margin: 20px 0!important; }
.mb10{ margin-bottom: 10px!important;}
.mb20{ margin-bottom: 20px!important;}
.mtb25auto { margin: 25px auto; }
.pad5{ padding: 5px; }
.pad10{ padding: 10px; }
.pad15{ padding: 15px; }
.pad20{ padding: 20px; }
.padL10{ padding: 0 0 0 10px; }
.padT10{ padding: 10px 0 0 0; }
.padT30{ padding: 30px 0 0 0; }
.pad25{	padding: 25px; }
.pad30 { padding: 30px; }
.pad50 { padding: 50px; }
.pad60 { padding: 60px; }
.pad70 { padding: 70px; }
.pad80 { padding: 80px; }
.pOption{ padding: 20px 10px 10px 0px; }
.pad50NoTop { padding: 0 50px 50px 50px; }
.pad50NoTopRight { padding: 0 0 50px 50px; }
.is-hidden{display: none;}
.w50{ width: 50%!important; }
.w90{ width: 90%!important; }
.w100{ width: 100%!important; }
.h100{ height: 100%!important; }
.mw900{ max-width: 900px; }
.mw500{ max-width: 500px; }
.m-2 {  margin:.5rem!important }
.fin{ clear:both; line-height:0; height:0; font-size:1px; }
.br10{ border-radius: 10px; }
.br20{ border-radius: 20px; }
.c-white{ color: #FFF!important; }
.c-primary{ color: var(--primary-color)!important; }
.c-secondary{ color: var(--secondary-color)!important; }
.c-global{ color: var(--global-background-color)!important; }
.bg-primary{ background-color: var(--primary-color)!important; }
.bg-secondary{ background-color: var(--secondary-color)!important; }
.bg-tertiary{ background-color: var(--tertiary-color)!important; }
.bg-global{ background-color: var(--global-background-color)!important; }
.bg-blur{ 
	background:none!important;
	-webkit-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);	
	backdrop-filter: blur(10px); 
}
.mar0auto{ margin: 0 auto!important;}
.mar0autoSpec{ margin: 5px auto 20px auto!important;}
.maxW450{ max-width: 450px;}
.bold { font-weight: 700!important; }

input[type="text"]:-moz-read-only,
textarea:-moz-read-only,
input[type="text"]:read-only,
textarea:read-only {
	background: var(--secondary-background-color)!important;
	color: var(--global-title-color);
}

.content_max_width {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	overflow: hidden;
}

.mw800{
	max-width: 800px;
}

/**********
 * SWAL *
 *********/

#strErreur, 
#strInfo,
#strValide,
#strLink{ display: none; }

/**********
 * FLEX *
 *********/

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex!important;
}
.flex.sb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex.sa {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
.flex.start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start; 
}
.flex.end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end; 
}
.flex.jcc {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex.jcb {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex.ac {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex.col { 
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; 
}
.acc {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.ast {
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.as {
	-ms-flex-item-align: start;
	-ms-grid-row-align: start;
	align-self: flex-start;
}
.ac {
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
}
.ae {
	-ms-flex-item-align: end;
	-ms-grid-row-align: end;
	align-self: flex-end;
}
.wrap {
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}
.flex-1-1-0{
	flex: 1 1 0;
}
.fb33{ flex-basis: 33.33333333333333333%; }
.fb70{flex-basis: 70%}
.fb30{flex-basis: 30%}
.fb100{ flex-basis: 100%; }
.fb50{ flex-basis: 50%; }
.fg1{ flex-grow: 1; }

form fieldset{
	padding: 10px;
	border: none;
	display: block;
}
form label{
	font-family: 'Macula','Arial',sans-serif;
	color: var(--secondary-color);
	font-size: 20px;
	font-weight: 500;
	padding-bottom: 5px;
	display: block;
	white-space: nowrap;
}
input.std,
select.std{
	background: #FFF;
    mask-image: url('/imgs/mask-2.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('/imgs/mask-2.png');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;	
	border: none;
	display: block;
	width: 100%;
	height: 35px;	
	text-indent: 10px;
}
select.std{
	text-indent: 0px;
	padding-left: 15px;
}
form input[type="submit"].std{
	cursor: pointer;
	text-align: center;
	background: var(--secondary-color);
    mask-image: url('/imgs/mask-3.png');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
	mask-position: center;
    -webkit-mask-image: url('/imgs/mask-3.png');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	font-size: 20px;
	font-family: 'Macula','Arial',sans-serif;
	padding: 0 20px;
	color: var(--primary-color);
	font-weight: 500;
}

/**********
 * SMOKE *
 *********/

.smoke-div {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
}

/**********
 * CSS *
 *********/

nav{
	padding: 20px 0;
}
nav a,
nav span{
	font-family: 'Macula','Arial',sans-serif;
	display: inline-flex;
	margin: 0 20px;
	font-size: 22px;
	font-weight: 500;
	background: url('/imgs/img-7.png') right calc(100% + 10px) no-repeat;
	padding-bottom: 10px;
	color: var(--primary-color);
	-webkit-transition: background 0.2s ease-out;
	-moz-transition: background 0.2s ease-out;
	-o-transition: background 0.2s ease-out;
	transition: background 0.2s ease-out;
}
nav span{
	cursor: default;
}
nav a:hover,
nav a.sel,
nav span:hover,
nav span.sel{
	background: url('/imgs/img-7.png') right bottom no-repeat;
	-webkit-transition: background 0.3s ease-in-out!important;
	-moz-transition: background 0.3s ease-in-out!important;
	-o-transition: background 0.3s ease-in-out!important;
	transition: background 0.3s ease-in-out!important;
}

/* Styles pour le sous-menu */
.menu-item {
	position: relative;
	display: inline-block;
}

.header-area {
	overflow: visible !important;
}

.submenu {
	position: fixed;
	background: rgba(8, 82, 38, 0.95);
	border: 2px solid var(--primary-color);
	border-radius: 5px;
	min-width: 200px;
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 9999;
}

.menu-item:hover .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.submenu-item {
	display: block !important;
	padding: 10px 20px !important;
	margin: 0 !important;
	font-size: 18px !important;
	background: none !important;
	border-bottom: 1px solid rgba(255, 249, 214, 0.2);
	transition: background 0.2s ease;
}

.submenu-item:last-child {
	border-bottom: none;
}

.submenu-item:hover {
	background: rgba(255, 249, 214, 0.1) !important;
}
a.connexion{
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	background: url('/imgs/bg-btn-3.png') no-repeat center / 100%;
	height: 45px;
	text-align: center;
	width: 151px;
	font-weight: 700;
	font-size: 18px;
	line-height: 45px;
}

.header-area{
	padding: 30px 0 15px 0;
	position: relative;
	z-index: 20;
}

footer{
	background: url('/imgs/img-bot.png') center 35px no-repeat;
	padding-top: 150px;
	max-width: 1200px;
	margin: 0 auto;
}
footer a{
	font-size: 14px;
	font-weight: 700;
}
footer .bot{
	background: url('/imgs/img-bot-2.png') center top no-repeat;
	padding: 40px 0 70px 0;
	margin-top: 20px;
}

.logo{
	background: url('/imgs/bot-logo.png') center bottom no-repeat;
	width: 100%;
	max-width: 841px;
	text-align: center;
}

strong.prix{
	display: inline-block;
	font-size: 38px;
	padding: 10px 0;
	font-family: 'Aquifer','Arial',sans-serif;
}

.part-2{
	background: #FFF9D6 url('/imgs/pattern-1.jpg') repeat;
}
.part-2-back{
	background: url('/imgs/bg-2.png') no-repeat;
	background-position: calc(100% + 180px) center;
	z-index: 2;	
	position: relative;	
}
.part-2 .bloc-1{
	padding: 50px;
	color: var(--secondary-color);
	position: relative;
}
.part-2 .bloc-1:before, 
.bloc-quote:before{
	content: "“";
	font-size: 290px;
	font-family: 'Aquifer',Arial,sans-serif;
	opacity: 0.2;
	position: absolute;
	top: 0px;
	left: 0px;
}
.bloc-quote:before{
	top: -50px;
	left: -60px;
}
.part-2 .bloc-1 h2{
	font-family: 'Aquifer',Arial,sans-serif;
	font-size: 40px;
	font-weight: 500;
}
.part-2 .bloc-1 p{
	padding: 20px 0;
	line-height: 26px;
}
.part-2 .bloc-1 .bot strong{
	display: block;
	font-size: 28px;
	font-family: 'Macula','Arial',sans-serif;
	font-weight: 500;
	background: url('/imgs/img-4.png') right center no-repeat;
	padding-right: 120px;
}

.bloc-img-1{
	background: var(--primary-color);
    mask-image: url('/imgs/mask-1.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('/imgs/mask-1.png');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
	overflow: hidden;
}

.box-shadow{
	-webkit-box-shadow: inset 0px 0px 20px 3px rgba(3,73,35,0.7); 
	box-shadow: inset 0px 0px 20px 3px rgba(3,73,35,0.7);
}

/* Chauve souris 1 */
.img-2{
	position: absolute;
	top: 140px;
	right: 50%;
	z-index: 10;	
	transform: translateY(-50%);
}

/* Chauve souris 2 */
.img-3{
	position: absolute;
	bottom: 40px;
	left: 100px;
	z-index: 1;	
	transform: translateX(-50%);
}

.part-3{
	background: url('/imgs/bg-3.png') no-repeat center;
}

.part-3 h2 {
	font-family: 'Aquifer',Arial,sans-serif;
	font-size: 40px;
	font-weight: 500;
}

.bloc-2{
	background: url('/imgs/bg-4.png') no-repeat center top / 100% 100%;
	width: 100%;
	color: var(--secondary-color);
	max-width: 572px;
}
.bloc-2.noback{
	background: none;
}
.bloc-2 .pad{
	padding: 45px 65px;
}
.bloc-2 .illus-1{
	background: url('/imgs/illustration-1.png') no-repeat center top / 100%;
	padding-top: 200px;
	max-width: 413px;
}
.bloc-2 .illus-2{
	background: url('/imgs/illustration-2.png') no-repeat center top / 100%;
	padding-top: 200px;
}
.bloc-2 .illus-3{
	background: url('/imgs/illustration-3.png') no-repeat center top / 100%;
	padding-top: 200px;
}
.bloc-2 .illus-4{
	background: url('/imgs/illustration-4.png') no-repeat center top / 100%;
	padding-top: 200px;
}
.bloc-2 .illus-5{
	background: url('/imgs/illustration-5.png') no-repeat center top / 100%;
	padding-top: 200px;
}
.bloc-2 .illus-6{
	background: url('/imgs/illustration-6.png') no-repeat center top / 100%;
	padding-top: 200px;
}
.bloc-2 .illus-7{
	background: url('/imgs/illustration-7.png') no-repeat center top / 100%;
	padding-top: 210px;
}
.bloc-2 .illus-8{
	background: url('/imgs/illustration-8.png') no-repeat center top / 100%;
	padding-top: 210px;
}
.bloc-2 .illus-9{
	background: url('/imgs/illustration-9.png') no-repeat center top / 100%;
	padding-top: 210px;
}
.bloc-2 .illus-10{
	background: url('/imgs/illustration-10.png') no-repeat center top / 100%;
	padding-top: 210px;
}
.bloc-2 h3{ 
	font-family: 'Aquifer','Arial',sans-serif;
	font-weight: 400;
	font-size: 24px;
	text-align: center;
	padding-bottom: 20px;
	text-transform: uppercase;
}
.bloc-2.noback h3{
	font-weight: 600;
	padding-bottom: 5px;
}
.bloc-2 p{
	font-size: 14px;
}

.bg-des{
	background: url('/imgs/bg-des.png') no-repeat right bottom;
}

.bg-top{
	background: url('/imgs/img-10.png') no-repeat center top;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.div-to-appear {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

/***********
 * LIGHTBOX
 */

/* Loader centré dans la lightbox */
#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px; /* Centrage */
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1001;
    display: none; /* Caché par défaut */
}

/* Animation de rotation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Lightbox modification */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
}

/* Style pour centrer la lightbox */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: hidden;
}

.lightbox-content {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* Bouton de fermeture */
.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 1001;
}

#lightboxImage {
    max-width: none;
    width: auto;
    height: auto;
    cursor: grab;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
}

/***********
 * DES
 */ 

.cube-wrapper {
  font-size: 130px;
}
.dice-num-1 .cube-wrapper {
  font-size:150px
}
#cubes-wrapper {
  margin-top:2rem;
  cursor:pointer;
  direction:ltr;
  min-width: 600px;
}
.cube {
  position:absolute;
  transform-origin:0.5em 0.5em;
  transform-style:preserve-3d
}
.cube-wrapper {
  width:1em;
  height:1em;
  margin:.25em auto
}
.beam,
.face{
  position:absolute;
  width:1em;
  height:1em;
  display:inline-block;
  background-color:#fff;
  border-radius:.2em;
  border: .02em solid var(--secondary-color);
  background: var(--primary-color);
  text-align:center
}
.beam {
  border:none;
  border-radius:.2em;
  width:.96em;
  height:.96em
}
.face-1 {
  transform:translateZ(.5em)
}
.face-2 {
  transform:rotateY(90deg) translateZ(.5em)
}
.face-3 {
  transform:rotateX(90deg) translateZ(.5em)
}
.face-4 {
  transform:rotateX(-90deg) translateZ(.5em)
}
.face-5 {
  transform:rotateY(-90deg) translateZ(.5em)
}
.face-6 {
  transform:rotateX(-180deg) translateZ(.5em)
}
.beam-1 {
  transform:rotateX(-180deg) translateX(.02em) translateY(-.02em) translateZ(0)
}
.beam-2 {
  transform:rotateX(90deg) translateX(.02em) translateY(.02em) translateZ(0)
}
.beam-3 {
  transform:rotateY(90deg) translateX(.02em) translateY(.02em) translateZ(0)
}
.loading {
  display:none
}
.no-transform .loading {
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  z-index:300
}
.dice-loaded .loading {
  display:none!important
}
.no-transform .beam {
  display:none!important
}
.no-transform .face {
  transform:none!important
}
.no-transform .face img {
  position:absolute;
  width:.24em;
  height:.24em
}
.no-transform .face-1 img {
  top:.36em;
  left:.36em
}
.no-transform .face-2 img:first-child {
  top:.1em;
  left:.1em
}
.no-transform .face-2 img:nth-child(2) {
  bottom:.1em;
  right:.1em
}
.no-transform .face-3 img:first-child {
  top:.1em;
  left:.1em
}
.no-transform .face-3 img:nth-child(2) {
  top:.36em;
  left:.36em
}
.no-transform .face-3 img:nth-child(3) {
  bottom:.1em;
  right:.1em
}
.no-transform .face-4 img:first-child {
  top:.1em;
  left:.1em
}
.no-transform .face-4 img:nth-child(2) {
  top:.1em;
  right:.1em
}
.no-transform .face-4 img:nth-child(3) {
  bottom:.1em;
  left:.1em
}
.no-transform .face-4 img:nth-child(4) {
  bottom:.1em;
  right:.1em
}
.no-transform .face-5 img:first-child {
  top:.1em;
  left:.1em
}
.no-transform .face-5 img:nth-child(2) {
  top:.1em;
  right:.1em
}
.no-transform .face-5 img:nth-child(3) {
  bottom:.1em;
  left:.1em
}
.no-transform .face-5 img:nth-child(4) {
  bottom:.1em;
  right:.1em
}
.no-transform .face-5 img:nth-child(5) {
  top:.36em;
  left:.36em
}
.no-transform .face-6 img:first-child {
  top:.05em;
  left:.08em
}
.no-transform .face-6 img:nth-child(2) {
  top:.05em;
  right:.08em
}
.no-transform .face-6 img:nth-child(3) {
  top:.36em;
  left:.08em
}
.no-transform .face-6 img:nth-child(4) {
  top:.36em;
  right:.08em
}
.no-transform .face-6 img:nth-child(5) {
  bottom:.05em;
  left:.08em
}
.no-transform .face-6 img:nth-child(6) {
  bottom:.05em;
  right:.08em
}
.dot {
  background-color:var(--secondary-color);
  width:.2em;
  height:.2em;
  border-radius:.1em;
  box-shadow:0 0 .02em var(--secondary-color);
} 

/***********
 * FLIPPER
 */

.flip-content img{
	border-radius: 10px;
}

.flip-container {
    perspective: 1000px;
    width: 100%;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;	
}

.flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.front, .back {
    position: absolute;
    width: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
	top: 0px;
	color: var(--secondary-color);
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column; 	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;	
}

.back {
    transform: rotateY(180deg);
	background-color: var(--secondary-color);
	color: #FFF;
	border-radius: 10px;
}

.flipped .flipper {
    transform: rotateY(180deg);
}

.countdown{
	text-align: center;
	font-family: 'Aquifer','Arial',sans-serif;
	font-size: 26px;
	font-weight: 500;
}

ul.rgpd li strong{
	padding: 30px 0 10px 0;
	display: inline-block;
}

 /**********
 * LANDING *
 *********/

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.no-border {
	border: none !important;
}

.landing {
	padding-bottom: 30px;
}

.landing-row {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.landing-row > div {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	box-sizing: border-box;
}

.landing-row .landing-illustration {
	max-width: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.landing-illustration {
	max-width: 400px;
	width: 80%;
	display: block;
	padding: 15px;
	background: var(--primary-color) url('/imgs/pattern-1.jpg') repeat center;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.landing-text-block h2 {
	font-family: 'Aquifer','Arial',sans-serif;
	font-size: 36px;
	font-weight: 400;
	text-transform: uppercase;
}

h1.landing-h1 {
	font-family: 'Poppins','Arial',sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
	text-transform: none;
	padding: 0;
	margin: 0 0 20px 0;
}

.landing-text-block p {
	font-size: 16px;
	line-height: 26px;
}

.landing-savoir-card {
	background: rgba(255, 249, 214, 0.08);
	border: 1px solid rgba(255, 249, 214, 0.15);
	border-radius: 10px;
	padding: 30px;
	box-sizing: border-box;
}

.landing-savoir-card h2 {
	font-family: 'Aquifer','Arial',sans-serif;
	font-size: 28px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--primary-color);
	margin: 0;
}

.landing-savoir-sep {
	width: 60px;
	height: 3px;
	background: var(--primary-color);
	margin: 15px auto 25px;
	border-radius: 2px;
	opacity: 0.5;
}

.landing-savoir-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 600px;
}

.landing-savoir-list li {
	padding: 12px 0;
	color: var(--primary-color);
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}

.landing-savoir-list li + li {
	border-top: 1px solid rgba(255, 249, 214, 0.1);
}

.btn.landing-btn {
	font-size: 32px;
	padding: 0px 25px;
	height: 70px;
	line-height: 70px;
}

 /**********
 * RESPONSIVE *
 *********/

@media screen and (max-width: 1280px) {
	
}

/* Styles pour les tablettes en paysage */
@media screen and (max-width: 1024px) {

}

/* Styles pour les tablettes en portrait */
@media screen and (max-width: 768px) {
	nav a{
		font-size: 14px;
		padding: 0px;
		margin: 0 5px;
		text-align: center;
	}

	h1{
		font-size: 36px;
	}

	.bloc-quote::before{
		font-size: 200px;
		left: -30px;
		top: -35px;
	}

  	.img-2{
		opacity: 0.2;
  	}

	.header-area{
		padding-top: 10px;
	}

	.logo{
		padding-top: 40px;
	}

	.bloc-2 .pad{
		padding-left: 40px;		
		padding-right: 45px;		
	}

	.plr50{
		padding: 0 25px;
	}

	.mentions div.pad10.alr{
		text-align: left!important;
	}
	
	footer a{
		flex-basis: 100%;
		text-align: center;
		padding: 10px 0;
	}

	.btn.bis{
		font-size: 16px;
	}

	.part-2 .bloc-1 .bot strong{
		padding-bottom: 20px;
	}

	.pad50{
		padding: 30px;
	}

	.part-2 .bloc-1{
		background: rgba(255,249,214,0.8);
	}

	.alc-resp{ text-align: center; }
	.alr-resp{ text-align: center!important; }

	.part-2 .bloc-1{
		padding: 35px;
	}

	a.connexion{
		font-size: 14px;
		right: 10px;
		height: 40px;
		line-height: 40px;
	}

	.landing-illustration {
		max-width: 280px;
	}
	.landing-text-block {
		padding: 0 15px;
		box-sizing: border-box;
	}
	.landing-text-block h2 {
		font-size: 26px;
	}
	.landing-text-block p,
	h1.landing-h1 {
		font-size: 14px;
		line-height: 22px;
	}
	.btn.landing-btn {
		font-size: 20px;
		padding: 0 15px;
		height: 55px;
		line-height: 55px;
	}
	.landing-row {
		padding: 0 15px;
		box-sizing: border-box;
	}
	.landing-row > div {
		padding: 10px 0;
	}
	.landing-savoir-card {
		padding: 25px 20px;
	}
	.landing-savoir-card h2 {
		font-size: 26px;
	}
}


/* Styles pour les grands téléphones (type iPhone Plus, Galaxy Note) */
@media screen and (max-width: 568px){

}