:root {
  --primary-theme: rgb(66, 39, 122);
  --grey-theme: rgb(255, 255, 255);
  --grey-dark-theme: rgb(215, 215, 215);
}

html {
	border: none;
	padding: none;
}

body {
	color: var(--primary-theme);
	background-color: var(--grey-theme);
	overflow-x: hidden;
}

header {
	overflow-x: hidden;
  width: 100vw;
  height: 5vh;
  border-bottom: 2px solid var(--primary-theme);
  position: fixed;
  z-index: 10;
  top: 0px;
  background-color: var(--grey-theme);
  padding: 1.5vw;
  padding-left: 3vw;
}

h1 {
	margin-top: 1.5vh;
	font-family: "Krona One", sans-serif;
	font-size: 1.3em;
	color: var(--primary-theme);
}

.photos::after {
	font-family: "Work Sans", sans-serif;
	font-size: 1em;
	width: 45%;
	color: var(--primary-theme);
}

p {
	font-family: "Work Sans", sans-serif;
	font-size: 1em;
	width: 63%;
	color: var(--primary-theme);
}

.texte_presentation {
	overflow-x: hidden;
	margin-top: 8vh;
	margin-left: 3vw;
}


.plan {
	width: 84vw;
	padding-bottom: 2vw;
	position: relative;
	bottom: 3vw;
	margin-top: 2vh;
	left: -3vw;
}

.global {
	overflow-x: hidden;
	display: block;
	gap: 4vw;
}

.photos img {
	width: 100%;
	filter: hue-rotate(10deg);
}

article {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.legende {
	width: 100%;
	position: relative;
	bottom: 0px;
	background-color: white;
	display: flex;
	justify-content: left;
	padding: 1vw 0;
	transition: all 0.4s ease;
	margin-bottom: 1vh;
}

article:hover .legende{
	bottom: 50px;
}

.legende p{
	margin-left: 1vw;
	width: 100%;
	color: var(--primary-theme);
}

footer {
	overflow-x: hidden;
	display: flex;
	width: 100vw;
	border-top: 2px solid var(--primary-theme);
}

footer img{
	width: 2.2vw;
	margin-right: 1vw;
}

footer div {
	padding: 1.3vw;
}

footer p {
	cursor: pointer;
	font-family: "Krona One", sans-serif;
	font-size: 3vw;
	text-decoration: none;
	transition: margin ease-in-out 0.4s;
	color: var(--primary-theme);
}

.fleche-text{
  width: 2.6vw;
  transition: opacity 0.3s ease, padding-right 0.3s ease, margin-top 0.3s ease;
  opacity: 0;
  margin-top: 0.8vw;
  margin-right: 0px;
}

.lien-dsaa:hover .fleche-text,
.lien-dnmade:hover .fleche-text {
  opacity: 1;
  padding-right: 1vw;
  margin-top: 0vw;
}


.lien-dsaa {
	width: 50%;
	display: flex;
	justify-content: center;
	border-right: 2px solid var(--primary-theme);
}

.lien-dnmade {
	width: 50%;
	display: flex;
	justify-content: center;
}

.lien-dsaa p,
.lien-dnmade p {
  transition: margin-left ease-in-out 0.4s;
  color: var(--primary-theme);
}

a {
	text-decoration: none;
}

/*
.lien-dnmade:hover p,
.lien-dsaa:hover p {
  margin-left: 0.4vw;
  transition: margin-left ease-in-out 0.3s;
}

.fleche-text {
  width: 2.6vw;
  transition: margin-left ease-in-out 0.4s;
}

.lien-dsaa:hover .fleche-text,
.lien-dnmade:hover .fleche-text,{
  margin-left: 0.8vw;
  transition: margin-left ease-in-out 0.3s;
}

*/

.global{
	width: 95%;
}


.lien-dsaa {
	margin-left: -4vw;
}