@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Junge&display=swap');


html, body {
    margin: 0;
    transition: 1s;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.no-scroll {
    overflow: hidden;
}

body::-webkit-scrollbar {
    display: none; /* Masque la barre de défilement */
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

/* Style du spinner */
.spinner {
    border: 8px solid rgba(255, 255, 255, 1);
    border-top: 8px solid green;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
}

.titre1 {
	font-family: "Junge", cursive;
	font-size: calc(var(--haut)*3);
	margin-top: 20px;
	text-align: center;
	justify-content: center;
}

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

#content {
    opacity: 0;
    transition: 1s;
}

p {
	margin: 0px;
	padding: 0px;
	font-family: Helvetica Neue;
	line-height: 140%;
	font-size: calc(var(--haut) * 2.6);
}

ul {
	margin: 0px;
	padding-right: 0px;
	padding-left: 0px;
	font-family: Helvetica Neue;
	line-height: 140%;
	font-size: calc(var(--haut) * 2.4);
}

li {
	/*margin-bottom: calc(var(--haut) * 1.8);*/
}

h1 {
	color: black;
	font-family: "Junge", cursive;
  	font-style: normal;
	font-size: calc(var(--haut) * 13);
	font-weight: normal;
	letter-spacing: -2px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
	/*transition: 1s;*/
}

#marge {
	height: calc(var(--haut) * 24);
}

.contain {
	height: 100%;
	object-fit: contain;
}

h2 {

	color: black;
	font-family: "Junge";
	font-weight: lighter;
	font-size: calc(var(--haut) * 5);
	text-align: left;
	margin-top: 0px;
	margin-bottom: 10px;
}

img {
	height: 200%;
}

#baniere {
	display: flex;
	height: calc(var(--haut) * 25);
	overflow: hidden;
	justify-content: center;
	align-items: center;
	transition: 0s;
}

#titre {
	transition: 0s;
	position: absolute;
	z-index: 1;
	left: auto;
	right: auto;
	top: calc(var(--haut) * 24);
	left: 50%;
	transform: translate(-50%, 0%);
}

#bouton_port button {
	font-family: "Helvetica Neue";
	cursor: pointer;
	padding: 10px;
	display: block;
	text-align: center;
	color: black;
	font-size: calc(var(--haut) * 2.5);
	background: none;
	outline: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 60px;
	border: solid calc(var(--haut) * 0.4);
	border-color: black;
}

#bouton_port button:hover {
	transition: 0.4s;
	color: green;
	border-color: green;
}

.titrebio {
	display: flex;
	margin-bottom: 10px;
	padding: 0px;
	align-items: center;
	/*font-size: 3rem;*/
	/*font-weight: bold;
	text-align: left;
	padding: 0px;
	margin-left: 20px;
	margin-bottom: 0px;*/
}

.lieninsta {
	cursor: pointer;
	margin-left: auto;
	height: calc(var(--haut) * 5);
	color: black;
	text-decoration: none;
}

/*.lieninsta {
	cursor: pointer;
	font-size: calc(var(--haut) * 4);
	text-decoration: none;
	color: black;
	margin-left: auto;
	font-family: 'Junge';
}*/



#bio {
	display: flex;
	flex-wrap: wrap;
	text-align: justify;
	font-size: calc(var(--haut) * 2);
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 0px;
	margin-bottom: calc(var(--haut) *3);
	transition: 0.4s;
	background: none;
}

.jracontemavie {
	flex: 400px;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 40px;
	padding: 0px

}

@media (max-width: 1000px) {
    #item2 {
        order: 0; /* Item 2 devient le premier */
    }

    #item3 {
    	order: 1;
    }

    #item1 {
    	order: 2;
    }
}


#video {
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-around;
	transition: 0s;
	background: none;
	position: relative;
	top: calc(var(--haut) * 0);
    margin-bottom: 20px;
    overflow: hidden;
    height: calc(var(--haut) * 72);
}

.arrow {
	font-size: calc(var(--haut) * 15);
	z-index: 2;
	background: none;
	cursor: pointer;
	border: none;
}

.arrow:hover {
	color: green;
	transition: 0.4s;
}

.carrousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.carrousel-item {
    min-width: 100%;
   /*display: flex;*/
}


.nav_carrousel {
	width: 100vw;
	position: relative;
	bottom: 0%;
	display: flex;
	justify-content: center;
	font-size: calc(var(--haut)*2);
}

.zi {
	display: flex;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    height: 526px;
    width: 936px;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


.YT {
	z-index: 1;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
    height: 526px;
    width: 936px;
}

.info {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	font-size: calc(var(--haut) * 3);
	font-family: "Junge", cursive;
	cursor: help;
}

#description {
	margin-left: 20px;
	margin-right: 20px;
}

.dordi {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
	height: calc(var(--haut) * 58.1);
	width: calc(var(--haut) * 107.1);
    padding: calc(var(--haut) * 2);
    margin: auto;
    opacity: 0;
    transition: 0.3s;
    z-index: 0;
}

.legende {
	font-family: 'Junge';
	font-size: calc(var(--haut) * 2);
	line-height: 110%;
	margin-right: 20px;
	text-align: justify;
}

.bouton {
	background: none;
	z-index: 3;
	height: calc(var(--haut) * 6);
}

.instabas {
	z-index: 2;
	outline: 0;
	cursor: pointer;
	margin-left: auto;
	height: calc(var(--haut) * 7);
	color: black;
	text-decoration: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

#footer {
	position: relative;
	width: 100%;
	bottom: 0;
	padding-bottom: calc(var(--haut) * 1);
	font-family: Helvetica Neue;
	font-size: calc(var(--haut) * 1.8);
	text-align: center;
}