html {
overflow: hidden;
width: 100%;
}
body {
min-height: 100vh;
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
/*avant : juste height:100%; et ce qui est dessous */
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

/* loader */

.loader-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(302deg, rgba(255,250,255,1) 7%, rgba(255,252,247,1) 35%, rgba(255,253,247,1) 60%, rgba(246,253,255,1) 88%);/*linear-gradient(to bottom right,#fffcf2,#fcedff);*/
    /*transition: opacity 1s ease-in-out;*/
	z-index:6;
}
#lottie{

	}

.fondu-out {
    opacity: 0;
    transition: opacity 0.4s ease-out;
	z-index:8;
}
/* FIN LOADER */



 body::-webkit-scrollbar {
  display: none;
  }
  
.transition {
    position: fixed;
    width:100%;
    height:100%;
    background: #ffffff;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
	/*transform: translateY(300px);*/
    transition : ease-in 0.4s;
}
.transition.active{
    opacity: 1;
	/*transform: translateY(0px);*/
    pointer-events: none;
}

.main{
	z-index: 8;
}
p {
	font-family:'ApercuBold';
	}

h1{
  -webkit-tap-highlight-color: transparent;
}
h2{
  -webkit-tap-highlight-color: transparent;
}
h3{
  -webkit-tap-highlight-color: transparent;
}

/*@media (prefers-color-scheme: dark) {
  html {
    filter: invert(1) hue-rotate(.42turn);
  }

  img {
    filter: invert(1) hue-rotate(.42turn);
  }

}*/
}
@supports (object-fit: cover) {
  .show-640 > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}
@media (max-width: 449px) and (max-height: 639px) {
	.show-landscape {
		
		display:none;
		}
.numeros {
	font-size: 15px;
    margin-right: -2px;
	}
	
.show-640 {
	display: flex;
    position: fixed;
    transform: scale(0.38);
    height: 100vh;
    width: 68vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}

/*.show-640 {
display: flex;
    transform: scale(0.8);
    height: 100vh;
    width: 69vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}*/
 .hide-640
{
display: none;
}
	
    .website {
	/*margin-top: -100vh;  poussé de la moitié de hauteur de viewport*/
    /*transform: translateY(100%);  tiré de la moitié de sa propre hauteur*/
		padding: 12%;
    	box-sizing: content-box;
    	-webkit-box-align: center;
		display: grid;
    	grid-template-columns: 500px 1fr;
		z-index:9;

  }
  aside {
  
		position: fixed;
		
}
    .main {
	padding-bottom: 4%;
    /*margin-left: -7px;*/
    box-sizing: content-box;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;
    bottom: 6vh;

	/*line-height:10vh;*/
  }
header {
	font-size:6.5vw;
	font-family: ApercuLight;
	letter-spacing:-0.5px;
	color:#3300ff;
  	/*top:20px;*/
	left: 12%;
    top: 5vh;
	position:fixed;
	line-height:0px;
	max-width:100%;
}
.sous-texte {
	font-size:5vw;
	margin-left:2.5vw;
	line-height:3px;

	}
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
h1 {
  font-family: Apercu;
  font-size: 9vw;
  padding-right:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;
  color:#3300ff;
	margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h2 {
  font-family: Apercu;
  font-size: 9vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;	
  top:290px;
  color: #3300ff;
  margin:0;
      margin-top: 9px;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:30px;*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before, h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:34px;*/
  margin-right:23px;
    -webkit-tap-highlight-color: transparent;
}
h3 {
  font-family: Apercu;
  font-size: 9vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  /*color:#3300ff;*/
  transition: 0.2s;	
  top:400px;
  color: #3300ff;
  margin:0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 15px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
.show-2000
    {
		display: none;
    /*position: absolute;
    top: -16vh;
    left: -25vw;
    display: block;
    transform: scale(0.7);*/
    }
	 .hide-mobile
	{
    display: none;
	}
}

@media (max-width: 449px) and (min-height: 640px) {
	.show-landscape {
		
		display:none;
		}
.numeros {
	font-size: 15px;
    margin-right: -2px;
	}
	
.show-640 {
	display: flex;
    position: fixed;
        transform: scale(0.44);
    height: 88vh;
    width: 64vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}

/*.show-640 {
display: flex;
    transform: scale(0.8);
    height: 100vh;
    width: 69vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}*/
 .hide-640
{
display: none;
}
	
    .website {
	/*margin-top: -100vh;  poussé de la moitié de hauteur de viewport*/
    /*transform: translateY(100%);  tiré de la moitié de sa propre hauteur*/
		padding: 12%;
    	box-sizing: content-box;
    	-webkit-box-align: center;
		display: grid;
    	grid-template-columns: 500px 1fr;
		z-index:9;

  }
  aside {
  
		position: fixed;
		
}
    .main {
	padding-bottom: 4%;
    /*margin-left: -19px;*/
    box-sizing: content-box;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;
    bottom: 6vh;

	/*line-height:10vh;*/
  }
header {
	font-size:6.5vw;
	font-family: ApercuLight;
	letter-spacing:-0.5px;
	color:#3300ff;
  	top: 4.2vh;
    position: fixed;
    line-height: 7px;
	left: 13%;
	max-width:100%;
}
.sous-texte {
	font-size:4.5vw;
	margin-left:2.5vw;
	line-height:3px;

	}
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
h1 {
  font-family: Apercu;
  font-size: 9.2vw;
  padding-right:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;
  color:#3300ff;
	margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h2 {
  font-family: Apercu;
  font-size: 9.2vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;	
  top:290px;
  color: #3300ff;
  margin:0;
  margin-top: 7px;
  margin-bottom: 9px;
  -webkit-tap-highlight-color: transparent;
  z-index:9;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:30px;*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
	/*margin-left:30px;*/
	margin-right: 4px;
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
	/*margin-left:30px;*/
	margin-right: 15px;
    -webkit-tap-highlight-color: transparent;
}
h3 {
  font-family: Apercu;
  font-size: 9.2vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  /*color:#3300ff;*/
  transition: 0.2s;	
  top:400px;
  color: #3300ff;
  margin:0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 15px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
.show-2000
    {
		display: none;
    /*position: absolute;
    top: -16vh;
    left: -25vw;
    display: block;
    transform: scale(0.7);*/
    }
	 .hide-mobile
	{
    display: none;
	}
}




@media (max-width: 449px) and (min-height: 686px) {  /* RESPONSIVE REMIS COMME PRECEDEMMENT - MAI */
	.show-landscape {
		
		display:none;
		}
.numeros {
	font-size: 17px;
    margin-right: -2px;
	}
	
.show-640 {
	display: flex;
    position: fixed;
    transform: scale(0.50);
    height: 100vh;
    width: 52vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*.show-640 {
display: flex;
    transform: scale(0.8);
    height: 100vh;
    width: 69vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}*/
 .hide-640
{
display: none;
}
    .website {
	/*margin-top: -100vh;  poussé de la moitié de hauteur de viewport*/
    /*transform: translateY(100%);  tiré de la moitié de sa propre hauteur*/
		padding: 9%;
    	box-sizing: content-box;
    	-webkit-box-align: center;
		display: grid;
    	grid-template-columns: 500px 1fr;
		z-index:9;

  }
aside {
	display: flex;
    position: relative;
    grid-area: aside;
    justify-content: flex-end;
    align-items: center;
    right: 10vw;
    top: 1vh;
		
}
    .main {
	padding-bottom: 4%;
    /*margin-left: -7px;*/
    box-sizing: content-box;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;
    bottom: 6vh;
  }
header {
	font-size: 7.3vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -1px;
    color: #3300ff;
    left: 12%;
    top: 5vh;
	position:fixed;
	line-height:0px;
	max-width:100%;
}
.sous-texte {
	font-size: 4.7vw;
    margin-left: 2.5vw;
    line-height: 7px;

	}
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
h1 {
  font-family: Apercu;
  font-weight: 300;
  font-size: 9.4vw;
  padding-right:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;
  color:#3300ff;

	margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h2 {
  font-family: Apercu;
  font-weight: 300;
  font-size: 9.4vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;	
  top:290px;
  color: #3300ff;
  margin:0;
  margin-top:8px;
  margin-bottom:9px;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:30px;*/
  margin-right:0px;
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
	transform: scaleX(1);
	transform-origin: bottom left;
	/*margin-left: 8vw;*/
	margin-right: 0;
	-webkit-tap-highlight-color: transparent;
}
h3:hover::before {
	transform: scaleX(1);
	transform-origin: bottom left;
	/*margin-left: 8vw;*/
	margin-right: 4vw;
	-webkit-tap-highlight-color: transparent;
}
h3 {
  font-family: Apercu;
  font-weight: 300;
  font-size: 9.4vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  /*color:#3300ff;*/
  transition: 0.2s;	
  top:400px;
  color: #3300ff;
  margin:0;
    -webkit-tap-highlight-color: transparent;
	z-index:9;
}
h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 15px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
.show-2000
    {
		display: none;
    /*position: absolute;
    top: -16vh;
    left: -25vw;
    display: block;
    transform: scale(0.7);*/
    }
	 .hide-mobile
	{
    display: none;
	}
}
@media (min-width: 450px) and (max-width: 760px) {
.show-landscape {

display:none;
}
.numeros {
	font-size: 30px;
    margin-right: -2px;
	}
.show-640 {
	display:none;
	transform: scale(0.7);
}
 .hide-640
{
display: block;
}

	    .website {
	padding: 7%;
    	box-sizing: content-box;
    	-webkit-box-align: center;
		display: grid;
    	grid-template-columns: 500px 1fr;
		z-index:9;
  }
	/* a mettre si on veut correctement mettre les éléments dans une grille	
	grid-template-columns: 100% 1fr;
    grid-template-rows: 20% 50% 30% 3fr;
	*/
aside {
	display: flex;
    position: relative;
    grid-area: aside;
    justify-content: flex-end;
    align-items: center;
    right: 10vw;
    top: 1vh;
		
}
    .main {
	padding-bottom: 4%;
    margin-left: -7px;
    box-sizing: content-box;
    -webkit-box-align: center;
    align-items: center;
    position: fixed;
    bottom: 6vh;
  }
header {
	font-size: 7vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -1px;
    color: #3300ff;
    left: 12%;
    top: 5vh;
	position:fixed;
	line-height:0px;
	max-width:100%;
}
.sous-texte {
    font-size: 3.3vw;
    margin-left: 13px;
	}
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
h1 {
  font-family: Apercu;
  font-size: 7vw;
  padding-right:20px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;
  color:#3300ff;
  top:140px;
	margin-left: 7px;
    margin-top: 0;
    margin-bottom: 0;
	margin-right: 0;
}
h2 {
  font-family: Apercu;
  font-size: 7vw;
  padding-right:25px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;	
  top:280px;
  color: #3300ff;
  margin:0;
  margin-top: 10px;
  margin-bottom: 10px;
}
h3 {
  font-family: Apercu;
  font-size: 7vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  color:#3300ff;
  transition: 0.2s;	
  top:400px;
  color: #3300ff;
  margin:0;
  margin-right: 37px;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  margin-right:13px;
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;

  margin-right:20px;
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;

    -webkit-tap-highlight-color: transparent;
}
h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 15px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
.show-2000
    {

	display: none;
	/*max-width: 100%;
    height: auto;*/
    }
	 .hide-mobile
	{
    
    transform: scale(0.9)/* rotate(-30deg)*/;
    left: 17vw;
    top: 15vh;
    position: fixed;
	}
}
@media (min-width: 450px) and (max-width: 789px) and (orientation:landscape) {
	.website {
		display:none;
		}
	.show-landscape {
		display: flex;
    transform: scale(1);
	    height: 100vh;
    width: 100vw;
    align-content: center;
    justify-content: center;
    align-items: center;
	background: rgb(253,245,246);
background: linear-gradient(45deg, rgba(253,245,246,1) 13%, rgba(252,240,251,1) 100%);
		}
			.show-640{
		
		display:none;
		}
	.hide-640{
		
		display:none;
		}
	.hide-mobile{
		
		display:none;
		}
	.show-2000{
		
		display:none;
		}
}
/* @media (min-width: 450px) (max-width: 789px) and (orientation: landscape) { */
@media (min-width: 400px) and (max-width: 600px) and (min-height: 700px) {
	.show-640 {
	display: flex;
    position: fixed;
    transform: scale(0.55);
    height: 100vh;
    width: 51vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
}
.show-2000
    {

	display: none;

    }
	 .hide-mobile
	{
    
    display: none;
	}
	
}
@media (min-width: 500px) and (max-width: 600px) and (min-height: 700px) and (max-height: 800px) {
	.numeros {
	font-size: 4.5vw;
	}
	.show-640 {
	/*
	display: flex;
    position: fixed;
    transform: scale(0.51);
	height: 100vh;
    width: 105vw;
    object-fit: cover;
    justify-content: center;
    align-items: center;
	*/
	margin-top: 47svh;
    margin-left: 20%;
    transform: translateY(-50%) scale(51%);
}
.show-2000
    {

	display: none;

    }
	 .hide-mobile
	{
    
    display: none;
	}
	
}
@media (min-width: 600px) and (max-width: 700px) and (min-height: 900px) {
	.numeros {
	font-size: 4.5vw;
	}
	.show-640 {
	/*
	display: flex;
    position: fixed;
    transform: scale(0.51);
	height: 100vh;
    width: 105vw;
    object-fit: cover;
    justify-content: center;
    align-items: center;
	*/
	margin-top: 47svh;
    margin-left: 10%;
    transform: translateY(-50%) scale(55%);
}
.show-2000
    {

	display: none;

    }
	 .hide-mobile
	{
    
    display: none;
	}
	
}
@media (max-width: 600px) and (min-height: 700px) {
	.numeros {
	font-size: 4.5vw;
	}
	.show-640 {
	/*
	display: flex;
    position: fixed;
    transform: scale(0.51);
	height: 100vh;
    width: 105vw;
    object-fit: cover;
    justify-content: center;
    align-items: center;
	*/
	margin-top: 47svh;
    transform: translateY(-50%) scale(0.51);
}
.show-2000
    {

	display: none;

    }
	 .hide-mobile
	{
    
    display: none;
	}
	
}
@media (max-width: 600px) and (min-height: 840px) {
	.show-640 {
	/*
	display: flex;
    position: fixed;
    transform: scale(0.55);
    height: 100vh;
    width: 45vh;
    object-fit: cover;
    justify-content: center;
    align-items: center;
	*/
	margin-top: 49svh;/* poussé de la moitié de hauteur de viewport */
    transform: translateY(-50%) scale(60%);/* tiré de la moitié de sa propre hauteur */
}
.show-2000
    {

	display: none;

    }
	 .hide-mobile
	{
    
    display: none;
	}
	
}

@media (max-width: 700px) and (orientation: landscape) {
	.website {
		display:none;
		}
	.show-landscape {
		display: flex;
    transform: scale(1);
	    height: 100vh;
    width: 100vw;
    align-content: center;
    justify-content: center;
    align-items: center;
	background: rgb(253,245,246);
background: linear-gradient(45deg, rgba(253,245,246,1) 13%, rgba(252,240,251,1) 100%);
		}
			.show-640{
		
		display:none;
		}
	.hide-640{
		
		display:none;
		}
	.hide-mobile{
		
		display:none;
		}
	.show-2000{
		
		display:none;
		}
}

@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
.show-landscape {

display:none;
}
.numeros {
    margin-right: 0px;
	font-size: 2.8vw;
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
    .website {
	display: grid;
	min-width: 100vw;
    grid-template-columns: 110%;
    grid-template-rows: 11% 40% 27%;
    gap: 0px 0px;
    align-content: center;
    grid-template-areas:
        "header header"
        "aside aside"
        "main main";
    overflow: hidden;
  }
  aside {
    display: flex;
    position: relative;
    grid-area: aside;
    justify-content: flex-end;
    align-items: center;
    right: 10vw;
    top: 1vh;

}
    .main {
	display: flex;
    position: relative;
    margin: 0;
    align-content: flex-start;
    grid-area: main;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
	left: 8vw;
  }
header {
	font-size: 4.5vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -1px;
    color: #3300ff;
    top: -2.5vh;
    left: 4vw;
    position: relative;
    line-height: 0px;
    display: flex;
    grid-area: header;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
	left: 13vw;
}
.sous-texte {
	font-size: 3.3vw;
    margin-left: 15px;
    line-height: 1vw;
	}
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
h1 {
  font-family: ApercuBold;
  font-size: 7.5vw;
  padding-right:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;
  color:#3300ff;
  top:140px;
	margin-left: 5px;
    margin-top: 0;
    margin-bottom: 0;
	margin-right: 0;
}
h2 {
  font-family: ApercuBold;
  font-size: 7.5vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: 0.2s;	
  top:280px;
  color: transparent;
  -webkit-text-stroke: 1px #3300ff;
  margin:0;
  margin-bottom:12px;
  margin-top:12px;
}
h3 {
  font-family: ApercuBold;
  font-size: 7.5vw;
  padding-right:5px;
  padding-left:5px;
  letter-spacing:-1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  color:#3300ff;
  transition: 0.2s;	
  top:400px;
  color: transparent;
  -webkit-text-stroke: 1px #3300ff;
  margin:0;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*/*margin-left:30px;*/*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:6vw;*/
  margin-right:4vw;
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:6vw;*/
  margin-right:0;
    -webkit-tap-highlight-color: transparent;
}
h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 15px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
.show-2000
    {

	display: none;
	/*max-width: 100%;
    height: auto;*/
    }
	 .hide-mobile
	{
    /*position: relative;*/
    transform: scale(0.8)/* rotate(-30deg)*/;
	}
}
@media (min-width: 800px) and (max-width: 850px) and (min-height: 1130px) and (orientation: portrait) {
	
		.show-landscape {
		
		display:none;
		}
.numeros {
	font-size: 3.2vw;
    margin-right: 5px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
    .website {
	display: grid;
	min-width: 100vw;
    grid-template-columns: 110%;
    grid-template-rows: 11% 40% 27%;
    gap: 0px 0px;
    align-content: center;
    grid-template-areas:
        "header header"
        "aside aside"
        "main main";
    overflow: hidden;
  }
  aside {
    position: relative;
    grid-area: aside;
    right: -12vw;
    top: 7vh;
    align-content: center;
    flex-direction: column;
		
}
    .main {
	display: flex;
    position: relative;
    margin: 0;
    align-content: flex-start;
    grid-area: main;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
	left: 8vw;
  }
header {
	font-size: 4.5vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -1px;
    color: #3300ff;
    top: -2.5vh;
    left: 4vw;
    position: relative;
    line-height: 0px;
    display: flex;
    grid-area: header;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
	left: 13vw;
}
	 .hide-mobile
	{
    /*position: relative;*/
    transform: scale(1)/* rotate(-30deg)*/;
	}
	}
@media (min-width: 700px) and (max-width: 1199px) and (min-height: 1250px) and (orientation: portrait) {
	    .website {
	display: grid;
	min-width: 100vw;
    /*grid-template-columns: 110%;*/
    grid-template-rows: 11% 40% 27%;
    gap: 0px 0px;
    align-content: center;
    grid-template-areas:
        "header header"
        "aside aside"
        "main main";
    overflow: hidden;
  }
  aside {
	display: flex;
    position: relative;
    grid-area: aside;
    justify-content: center; /* A METTRE SI PROBLEME ENTRE 2 DEVICES */
    align-items: center;
    right: -7vw;
    top: 3vh;		
}
    .main {
	display: flex;
    position: relative;
    margin: 0;
    align-content: flex-start;
    grid-area: main;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
	left: 8vw;
  }
header {
	font-size: 4.5vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -1px;
    color: #3300ff;
    top: -2.5vh;
    left: 4vw;
    position: relative;
    line-height: 0px;
    display: flex;
    grid-area: header;
    align-items: flex-start;
    align-content: flex-start;
    flex-direction: column;
    justify-content: flex-start;
	left: 13vw;
}
		.show-landscape {
		
		display:none;
		}
.numeros {
	font-size: 2.8vw;
    margin-right: 5px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
.hide-mobile {
    transform: scale(1);
}
}
@media (min-width: 790px) and (max-width: 1199px) and (max-height:460px) and (orientation: landscape) { 
	.website {
		display:none;
		}
	.show-landscape {
		display: flex;
    transform: scale(1);
	    height: 100vh;
    width: 100vw;
    align-content: center;
    justify-content: center;
    align-items: center;
	background: rgb(253,245,246);
background: linear-gradient(45deg, rgba(253,245,246,1) 13%, rgba(252,240,251,1) 100%);
		}
			.show-640{
		
		display:none;
		}
	.hide-640{
		
		display:none;
		}
	.hide-mobile{
		
		display:none;
		}
	.show-2000{
		
		display:none;
		}
}

@media (min-width: 790px) and (max-width: 1199px) and (min-height:460px)  and (orientation: landscape) {    /* RESPONSIVE REVU - ipad + air + mini */
	.show-landscape {
		
		display:none;
		}
		.website {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 25% 50%;
    gap: 0px 0px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
    grid-template-areas:
        "header header"
        "aside main";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 8;
    justify-content: center;
}
.numeros {
	 font-size:22px;
	 padding-right: 0px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
  main {
    /* OLD
	display: flex;
    position: relative;
    margin: 0;
    height: 50vh;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
	*/
	
	display: flex;
    position: relative;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	grid-area: main;


}
aside {
    display: flex;
    position: relative;
    justify-content: flex-start;
    grid-area: aside;
    top: 3vh;
	left: 2vw;
    align-items: center;
}
#pap {

}
header {
	font-size: 30px;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -0.5px;
    color: #3300ff;
    top: 8vh;
    left: 4.5vw;
    position: relative;
    line-height: 3px;
	grid-area: header;
	display:flex;
	flex-direction: column;
    align-items: flex-start;
}

.sous-texte {
	font-size: 20px;
    margin-left: 13px;
 }
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
 h1 {
	font-family: ApercuBold;
    font-size: 7vh;
    margin-right: 20px;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    color: #3300ff;
    position: relative;
    margin-bottom: 0;
    margin-top: 0;

}
h2 {
	font-family: ApercuBold;
    font-size: 7vh;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 107px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 17px;
    margin-bottom: 17px;
    color: transparent;
    -webkit-text-stroke: 1px #3300ff;
}
h3 {
	font-family: ApercuBold;
    font-size: 7vh;
    margin-right: 167px;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 1px #3300ff;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:35px;*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:35px;*/
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:35px;*/
    -webkit-tap-highlight-color: transparent;
}

h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 37px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
  .hide-mobile
{
	display: block;
    transform: scale(0.8);
}
 .show-2000
{
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1500px) {
	.show-landscape {
		
		display:none;
		}
		.website {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 25% 50%;
    gap: 0px 0px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
    grid-template-areas:
        "header header"
        "aside main";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 8;
    justify-content: center;
}
.numeros {
	 font-size:22px;
	 padding-right: 0px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
  main {
    /* OLD
	display: flex;
    position: relative;
    margin: 0;
    height: 50vh;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
	*/
	
	display: flex;
    position: relative;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	grid-area: main;


}
aside {
    display: flex;
    position: relative;
    justify-content: flex-start;
    grid-area: aside;
    top: 3vh;
	left: 12vw;
    align-items: center;
}
#pap {

}
header {
	font-size: 32px;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -0.5px;
    color: #3300ff;
    top: 8vh;
    left: 8vw;
    position: relative;
    line-height: 2px;
	grid-area: header;
}
.sous-texte {
	font-size:19px;
	margin-left:0px;
 }
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
 h1 {
	font-family: ApercuBold;
    font-size: 60px;
    margin-right: 3vw;
	padding-left:5px;
	padding-right:5px;
    letter-spacing: -2px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    color: #3300ff;
    position: relative;
    margin-top: 0;
	margin-bottom: 9px;

}
h2 {
	font-family: ApercuBold;
    font-size:60px;
	padding-left:5px;
	padding-right:5px;
    margin-left: 5vw;
    letter-spacing: -2.4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 30px;
	margin-bottom: 30px;
    color: transparent;
    -webkit-text-stroke: 0.9px #3300ff;

}
h3 {
font-family: ApercuBold;
    font-size: 60px;
	padding-left:5px;
	padding-right:5px;
    margin-right: 14vw;
    letter-spacing: -2.4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 0;
	margin-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 0.9px #3300ff;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:45px;*/
  -webkit-tap-highlight-color: transparent;
}
h2:hover::before, h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:40px;*/
  -webkit-tap-highlight-color: transparent;
}

h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 37px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
  .hide-mobile
{
	display: block;
    transform: scale(0.9);
}
 .show-2000
{
display: none;
}
}
@media (min-width: 1501px) and (max-width: 2400px) {    /* RESPONSIVE REVU */
.show-landscape {
		
		display:none;
		}
.website {
    display: grid;
    grid-template-columns: 42% 36%;
    grid-template-rows: 26% 72%;
    gap: 0px 0px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
    grid-template-areas:
        "header header"
        "aside main";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 8;
    justify-content: center;
}
.numeros {
	 font-size:25px; 
	}
.show-640 {
	display:none;
}
 .hide-640
{
display: block;
}
  main {
    /* OLD
	display: flex;
    position: relative;
    margin: 0;
    height: 50vh;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
	*/
	
	display: flex;
    position: relative;
    margin: 0;
    height: 45vh;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;


}
aside {
	display: flex;
    position: relative;
    justify-content: flex-end;
	margin-top: -20px;
}
#pap {

}
header {
	font-size: 38px;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -0.5px;
    color: #3300ff;
    top: 8vh;
    left: 4.5vw;
    position: relative;
    line-height: 2px;
	grid-area: header;
}
.sous-texte {
	font-size:23px;
	margin-left:15px;
 }
.char {
  transform: translateY(-150px);
  transition: transform 0.6s;
}
 h1 {
	font-family: ApercuBold;
    font-size: 75px;
    margin-right: 3vw;
	padding-left:5px;
	padding-right:5px;
    letter-spacing: -2px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    color: #3300ff;
    position: relative;
    margin-top: 0;
	margin-bottom: 9px;

}
h2 {
	font-family: ApercuBold;
    font-size: 75px;
	padding-left:5px;
	padding-right:5px;
    margin-left: 5vw;
    letter-spacing: -2.4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 30px;
	margin-bottom: 30px;
    color: transparent;
    -webkit-text-stroke: 0.9px #3300ff;

}
h3 {
font-family: ApercuBold;
    font-size: 75px;
	padding-left:5px;
	padding-right:5px;
    margin-right: 14vw;
    letter-spacing: -2.4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 0;
	margin-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 0.9px #3300ff;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:45px;*/
  -webkit-tap-highlight-color: transparent;
}
h2:hover::before, h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:40px;*/
  -webkit-tap-highlight-color: transparent;
}

h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 37px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
  .hide-mobile
{
	display: block;
}
 .show-2000
{
display: none;
}
}
@media (min-width: 2401px) and (max-width: 3000px) {
	.show-landscape {
		
		display:none;
		}
		.website {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 25% 50%;
    gap: 0px 0px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
    grid-template-areas:
        "header header"
        "aside main";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 8;
    justify-content: center;
}
.numeros {
	 font-size:2.5rem;
	 margin-right: 15px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
	display:block;
}
  main {
    /* OLD
	display: flex;
    position: relative;
    margin: 0;
    height: 50vh;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
	*/
	
	display: flex;
    position: relative;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	grid-area: main;


}
aside {
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: aside;
    top: 3vh;
    left: 6vw;
    align-items: center;
	transform: scale(0.9);
}
#pap {

}
header {
	font-size: 3rem;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -0.5px;
    color: #3300ff;
    top: 8vh;
    left: 4.5vw;
    position: relative;
    line-height: 0.5rem;
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sous-texte {
	font-size: 2rem;
    margin-left: 1rem;
    position: inherit;
 }
.char {
  transform: translateY(-197px);
  transition: transform 0.6s;
}
 h1 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    margin-right: -2vw;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    color: #3300ff;
    position: relative;
    margin-bottom: 0;
    margin-top: 0;

}
h2 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 14vw;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 40px;
    margin-bottom: 40px;
    color: transparent;
    -webkit-text-stroke: 1.2px #3300ff;
}
h3 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    margin-right: 8vw;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 1.2px #3300ff;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:4.5rem;*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:4.5rem;*/
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:4.5rem;*/
    -webkit-tap-highlight-color: transparent;
}

h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 37px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
  .hide-mobile
{
	display: none;
}
 .show-2000
{
display: block;
transform: scale(0.8);
}
}
@media (min-width: 3001px) {
	.show-landscape {
		
		display:none;
		}
		.website {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-template-rows: 25% 50%;
    gap: 0px 0px;
    /* grid-auto-flow: row; */
    grid-auto-flow: column;
    grid-template-areas:
        "header header"
        "aside main";
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    z-index: 8;
    justify-content: center;
}
.numeros {
	 font-size:50px;
	 margin-right: 15px;
	}
.show-640 {
	display:none;
}
 .hide-640
{
	display:block;
}
  main {
    /* OLD
	display: flex;
    position: relative;
    margin: 0;
    height: 50vh;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: center;
	*/
	
	display: flex;
    position: relative;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
	grid-area: main;


}
aside {
    display: flex;
    position: relative;
    justify-content: center;
    grid-area: aside;
    top: 3vh;
    left: 7vw;
    align-items: center;
}
#pap {

}
header {
	font-size: 1.8vw;
    font-family: ApercuLight;
    z-index: 5;
    letter-spacing: -0.5px;
    color: #3300ff;
    top: 8vh;
    left: 4.5vw;
    position: relative;
    line-height: 0.7rem;
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sous-texte {
	font-size: 1.45vw;
    margin-left: 1.4rem;
 }
.char {
  transform: translateY(-197px);
  transition: transform 0.6s;
}
 h1 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    margin-right: 1vw;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    color: #3300ff;
    position: relative;
    margin-bottom: 0;
    margin-top: 0;

}
h2 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 8vw;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 50px;
    margin-bottom: 50px;
    color: transparent;
    -webkit-text-stroke: 1.2px #3300ff;
}
h3 {
	font-family: ApercuBold;
    font-size: 7.5vh;
    margin-right: 9vw;
    padding-left: 5px;
    padding-right: 5px;
    letter-spacing: -1.5px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition: 0.2s;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    color: transparent;
    -webkit-text-stroke: 1.2px #3300ff;
}
h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:5rem;*/
    -webkit-tap-highlight-color: transparent;
}
h2:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:5rem;*/
    -webkit-tap-highlight-color: transparent;
}
h3:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
  /*margin-left:5rem;*/
    -webkit-tap-highlight-color: transparent;
}

h5 {
  font-family: ApercuLight;
  font-style:italic;
  position:absolute;
  font-size: 37px;
  color:#bfd1e2;
  font-weight: normal;
  margin: 0;
  top:300px;
  right:740px;
  /*margin-top: 5px;*/
}
  .hide-mobile
{
	display: none;
}
 .show-2000
{
display: block;
}
}

/*------ FIN DU RESPONSIVE ------*/
#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
/*background-image:url(images/home-bg.jpg);------*/
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.header {
  grid-column: 1 / -1;
}

.navigation-list {
  display: grid;
  gap: .5rem;
}

/* Bonus : Toute la hauteur */
.website {
	min-height: 100vh;
	margin: 0 auto;
	/*max-width: 1900px; */
}

/* Base */
body {
  margin: 0;
  font-family: "ApercuLight";
}
a {
	text-decoration:none;
	  -webkit-tap-highlight-color: transparent;
}

h1:hover, h2:hover, h3:hover {
  color: #f0f5fb;/*e8edf7*/
    -webkit-tap-highlight-color: transparent;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background-color:#3300ff;
  transition: transform .7s ease;
  transform: scaleX(0);
  transform-origin: bottom right;
  /* margin-left:50px;*/
}

h2::before, h3::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background-color:#3300ff;
  transition: transform .7s ease;
  transform: scaleX(0);
  transform-origin: bottom right;
  /* margin-left:50px;*/
}

/* Decoration optionnelle 
ul {
  padding: 1rem;
}
li {
}
article {
  padding: 1rem;
}
[class*="grid"] > * {
  padding: 1rem;
}
header, footer {
  padding: 1rem;
}
main {

}
aside {
}
.navigation-link {
  padding: 1rem;
  display: block;
}

.navigation-link:hover,
.navigation-link:focus
{
  background: rgba(0,0,0,.15);
}*/




/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Barlow:400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@charset "utf-8";
@font-face {
    font-family: ApercuLight;
    src: url("ApercuLight.otf") format("opentype"),
	url("ApercuBold.otf") format("opentype");
}
@font-face {
    font-family: ApercuBold;
    src: url("ApercuBold.otf") format("opentype");
}
@font-face {
    font-family: Playfair Display;
    src: url("PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
}
@font-face {
    font-family: Times New Roman;
    src: url("times.ttf") format("truetype");
}
/*
@font-face {
    font-family: Playfair Display italic;
    src: url("PlayfairDisplay-Italic.ttf") format("truetype");
}*/