*{
	margin:0;
	padding:0;
}

h1,h2,h3,h4,h5, p, span, b, div, li{
	font-family: 'Catamaran';
}

ul li{
	list-style-type: none;
}

a{
	text-decoration:none;
}

ul > li::marker{
	content:'';
}

:root {
	--bleu-1: #385170;
	--bleu-2: #142D4C;
	--jaune-1: #F7D59C;
	--jaune-2: #EAC27E;
	--vert-1: #A3D2CA;
	--vert-2: #5EAAA8;
	--beige: #F9F6F2;
}

body{
	background-color:var(--beige);
}

html{
	scroll-behavior: smooth;
}

@font-face {
	font-family: 'Catamaran';
	src: url('../fonts/catamaran.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

.vert{
	color:var(--vert-1);
}

.jaune{
	color:var(--jaune-1);
}

.bleu{
	color:var(--bleu-1);
}

.container{
	position:relative;
	padding:15px;
}

.block{
	padding-top:50px;
	padding-left:50px;
	position:relative;
}

.block::before{

}

/* Accueil */

.accueil_top{
	background-image:url('../img/bg_accueil_mobile.webp');
	width:100%;
	height:100vh;
	background-size:cover;
	background-position:center;
}

.accroche{
	padding-top:40px;
	text-align:center;
}

.accroche h1{
	font-weight:bold;
	color:white;
	font-size:1.6rem;
}

.accroche .vert, .accroche .jaune, .accroche .t{
	font-size:1.5rem;
	display:block;
	font-weight:500;
}

.accroche .vert{
	padding-top:15px;
}

.accroche .t{
	display:none;
}

.down-arrow{
	display:block;
	border-radius:10px;
	border:3px solid white;
	position:absolute;
	top:-120px;
	left:calc(50%);
	transform:translateX(-50%);
	width:70px;
	height:70px;
}

.down-arrow::after{
	content:'';
	display:block;
	position:absolute;
	width:65px;
	height:65px;
	-webkit-mask-image:url('../img/arrow.svg');
	-webkit-mask-size: 68%;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	background:white;
	left: 50%;
	transform: translateX(-50%);
	top: 2px;
	animation: GradientArrow 3s ease infinite;
	z-index:5;
}

@keyframes GradientArrow {
	0%{background:var(--jaune-2);}
	50%{background:var(--vert-2)}
	100%{background:var(--jaune-2);}
}

/* Navigation */

.btn-nav{
	position: fixed;
    top: 50%;
	transform:translateY(-50%);
    right: -43px;
    overflow: hidden;
    background: white;
    width: 86px;
    height: 86px;
    border-radius: 50%;
	display:flex;
	flex-direction: column;
	cursor:pointer;
	z-index:10;
}

.btn-nav .points{
	position:absolute;
	left:20px;
	top:20px;
	display:flex;
	flex-direction: column;
}

.btn-nav .point{
	width:11px;
	height:11px;
	background:var(--bleu-2);
	border-radius:50%;
	margin-bottom:6px;
}

.btn-nav .croix{
    width: 30px;
    height: 30px;
    position: absolute;
    left: 8px;
    top: 40px;
	display:none;
}

.btn-nav .croix::after, .btn-nav .croix::before{
    content: '';
    width: 30px;
    height: 6px;
    background-color: var(--bleu-2);
    border-radius: 10px;
    display: block;
	position:absolute;
}

.btn-nav .croix::after{
	transform:rotate(45deg);
}

.btn-nav .croix::before{
	transform:rotate(-45deg);
}

.menu{
	height:100vh;
	width:100%;
	background:white;
	position:fixed;
	right:-100vw;
	overflow-x:hidden;
	overflow-y:scroll;
	transition:.2s;
	z-index:8;
}

.menu .logo{
	height:115px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu .logo a{
	display:flex;
}

.menu .blue-nav{
	background:var(--bleu-1);
	height:170px;
}

.menu ul{
	padding-left:20px;
}

.menu ul.rs-links{
	padding-top:0;
	display:flex;
}

.menu ul.rs-links li{
	margin:10px;
}

.menu ul.rs-links li a{
	font-size:0;
	display: block;
	width: 100%;
	height: 100%;
}

.facebook, .instagram, .linkedin{
	content: '';
	display: block;
	width:35px;
	height:35px;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	background:white;
	transition:.2s;
}

.facebook:hover, .instagram:hover, .linkedin:hover{
	background:var(--jaune-1);
}

.facebook{
	-webkit-mask-image: url('../img/facebook.svg');
}

.instagram{
	-webkit-mask-image: url('../img/instagram.svg');
}

.linkedin{
	-webkit-mask-image: url('../img/linkedin.svg');
}

.blue-links, .yellow-nav, .green-nav, .rs-links{
	padding-top:10px;
	padding-bottom:15px;
}

.blue-links li:nth-child(2){
	margin-top:10px;
}

.blue-links li a{
	color:white;
	font-size:1.3rem;
	font-weight:500;
	position:relative;
	transition:.2s;
	left:0;
}

/* lien titre catégorie */
.yellow-nav ul li.nav-title, .green-nav ul li.nav-title{
	font-size:1.3rem;
	font-weight:bold;
}

/* tous les liens hors titre de catégorie */
.yellow-nav ul li:not(.nav-title), .green-nav ul li:not(.nav-title){
	padding-left:20px;
	font-size:1.2rem;
	font-family: 'Catamaran', sans-serif;
}

.yellow-nav ul li a, .green-nav ul li a{
	color:var(--bleu-1);
	position:relative;
	transition:.2s;
	left:0;
}

.yellow-nav ul li a:hover, .green-nav ul li a:hover, .blue-links li a:hover{
	left:10px;
}

.yellow-nav{
	min-height:85px;
	background:var(--jaune-1);
}

.green-nav{
	min-height:85px;
	background:var(--vert-1);
}

body.menu-open{
	overflow:hidden;
}

body.menu-open .menu{
	right:0;
}

body.menu-open .points{
	display:none;
}

body.menu-open .croix{
	display:block;
}