@charset "UTF-8";

@font-face {
	font-family:'titre';
	src: url("fonts/Cardinal Fruit/cardinal-fruit.ttf") format("truetype"),
	url("fonts/Cardinal Fruit/cardinal-fruit.woff2") format("woff2"),
	url("fonts/Cardinal Fruit/cardinal-fruit.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family:'titre-italic';
	src: url("fonts/Cardinal Fruit Italic/cardinal-fruit-italic.ttf") format("truetype"),
	url("fonts/Cardinal Fruit/cardinal-fruit-italic.woff2") format("woff2"),
	url("fonts/Cardinal Fruit/cardinal-fruit-italic.woff") format("woff");
	font-display: swap;
}


@font-face {
    font-family:'texte';
    src: url('fonts/avenir-font/AvenirLTStd-Light.otf'),
	;
    font-display: swap;
}

@font-face {
    font-family:'texte-gras';
    src: url('fonts/avenir-font/AvenirLTStd-Medium.otf'),
	;
    font-display: swap;
}


@font-face {
    font-family:'sous-titre';
    src: url('fonts/avenir-font/AvenirLTStd-Roman.otf')
	;
    font-display: swap;
}






:root {
    --light-black: #2f2f2e;
	--light-grey: #e9e9e9;
	--grey: #989897;
	--medium-grey: #e0e0e0;
}


*, *::before, *::after {
	padding: 0;
	margin: 0;
	text-decoration: none;
}


html {
	scroll-behavior: smooth;
	height: -webkit-fill-available;	
}

body {
	background:  #f9f9f9;
}

ul {
	white-space: nowrap;
	list-style-type: none;
}

header {
	display:flex;
    width: 100vw;
	min-height: 52vw;
    height: 100vh;
	box-sizing: border-box;
}

/*DEFINITION H */

h1 {
	display: inline-block;
	font-family: 'titre', Arial, sans-serif;
	color: var(--light-black);
	font-weight: 300;
	font-size: clamp(3.4rem, 7vw, 6rem);
	line-height: clamp(3.2rem, 6.4vw, 5.3rem);
	
}

h1 span {
	display: inline-block;
	font-family: 'titre-italic', Arial, sans-serif;
}

h2 {
	display: inline-block;
	font-family: 'titre', Arial, sans-serif;
	color: var(--light-black);
	font-weight: lighter;
	font-size: clamp(2.8rem, 6vw, 6rem);
	line-height: clamp(2.8rem, 5.8vw, 5.6rem);
	letter-spacing: clamp(-0.15rem, -1vw, -0.3rem);
}

h2 span {
	font-family: 'titre-italic', Arial, sans-serif;
}

h3 {
	font-family: 'sous-titre', Arial, sans-serif;
	font-size: clamp(1.4rem, 2.6vw, 3.4rem);
	line-height: clamp(1.6rem, 2.8vw, 3.6rem);
	color: var(--light-black);
	letter-spacing: clamp(.2rem, .4vw, 0.1rem);	
}


h4 {
	display: inline-block;
	font-family: 'texte', Arial, sans-serif;
	font-size: clamp(1.1rem, 1.6vw, 3rem);
	color: var(--light-black);
}

h5 {
	font-family: 'texte-gras', Arial, sans-serif;
	font-weight: bolder;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	line-height: clamp(1.8rem, 3vw, 1.8rem);
	padding-top:2vw;
	border-bottom: .8px solid var(--grey); /* Crée le "soulignement" */
	border-top: .8px solid var(--grey); /* Crée le "soulignement" */
  	padding-bottom: 2vw; /* Déplace la ligne plus loin du texte */
	letter-spacing: clamp(0rem, 1vw, 0.1rem);
}


p {
	display: inline-block;
	font-family: 'texte', Arial, sans-serif;
	font-weight: lighter;
	font-size: clamp(1rem, 1.8vw, 1.3rem);
	line-height: clamp(1.8rem, 3vw, 1.8rem);
	color: var(--light-black)
}

p span {
	font-family: 'texte-gras', Arial, sans-serif;
}

a, .liens a, #section-01 button {
	font-family: 'texte', Arial, sans-serif;
	font-weight: lighter;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	text-decoration:none;
	white-space: nowrap;
	color: var(--light-black);	
}

q {
	display: inline-block;
	font-family: 'titre', Arial, sans-serif;
	color: var(--light-black);
	quotes: none;
	font-weight: 300;
	font-size: clamp(2.8rem, 6vw, 4rem);
	line-height: clamp(2.8rem, 6vw, 3.6rem);
	padding-top:3vw;
	border-bottom: .8px solid; /* Crée le "soulignement" */
	border-top: .8px solid; /* Crée le "soulignement" */
  	padding-bottom: 3vw; /* Déplace la ligne plus loin du texte */
}

q span {
	font-family: 'titre-italic', Arial, sans-serif;
}

/*q span{
	font-size: clamp(2rem, 3vw, 3rem);
}*/


/* PREMIERE SECTION */

header {
	height: 100svh;
}

.grid-container {
  	display: grid;
	width: 100vw;
  	grid-template-columns: 40% 60%;
	grid-template-rows: clamp(2rem, 10vw, 7rem) clamp(2rem, 5vw, 2.5rem) auto;
  	grid-template-areas: 
    "box-titre ."
    "nav colonnecontact"
    "colonnetexte image-container";
	overflow: hidden;
	border-bottom: solid 0.8px var(--grey);
}


.boxtitre {
	grid-area: box-titre;
	display: flex;
	width: 100%;
	background-color: var(--light-black);
	align-items: center;
}

.boxtitre a {
	width: 100vw;
}

.boxtitre img {
	padding-left: 3vw;
	padding-right: 3vw;
	box-sizing: border-box;
	width: 100%;
}

.main-nav {
	grid-area: nav;	
	display: flex;
	position: relative;
	border-top: solid 1px var(--grey);
	border-bottom: solid 1px var(--grey);
	padding-left: 3vw;
}

.main-nav ul {
	display: flex;
	opacity: 0;
	/* Appartion au lancement */
	animation: apparition 0.4s 4s ease-out forwards;
}


.main-nav ul li a {
	display: flex;
	height: 105%;
	align-items: center;
	position: relative;
	margin-right: 6vw;
}

.main-nav ul li a::before{
	content: "";
  	position: absolute;
  	width: 0;
  	height: 1px; /* Hauteur de la ligne de soulignement */
  	bottom: 8px;
  	left: 0;
  	background-color: var(--grey); /* Couleur de la ligne de soulignement */
  	transition: width 0.1s; /* Animation de transition de la largeur */
}

.Description-Projet a::before{
	content: "";
  	position: absolute;
  	width: 0;
  	height: 1px; /* Hauteur de la ligne de soulignement */
  	bottom: 0;
  	left: 0;
  	background-color: var(--grey); /* Couleur de la ligne de soulignement */
  	transition: width 0.1s; /* Animation de transition de la largeur */
}


.main-nav ul li a:hover::before,
.Description-Projet a:hover::before
{
  	width: 100%;	
}

.colonnecontact{
	grid-area: colonnecontact;	
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	/*align-items: center;*/
	border-top: solid 1px var(--grey);
	border-bottom:solid 1px var(--grey);
}

.colonnecontact ul{
	display: flex;
}

.colonnecontact li{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 1vw;
	opacity: 0;
	/* Appartion au lancement */
	animation: apparition 0.4s 4s ease-out forwards;
}

.colonnecontact li a img{
	opacity: .8;
	width: clamp(1rem, 3.6vw, 1.9rem);
	padding-top: 1rem;
	padding-bottom: 1rem;
	vertical-align: middle;
}

.separateur{
	height: 100%;
	border-left: solid 1px var(--grey);
}

.boutoncontact {
	display: flex;
	height: clamp(2rem, 5vw, 2.5rem);
	justify-content: center;
	align-items: center;
	padding-right: 2vw;
	padding-left: 2vw;
	opacity: 0;
	/* Animation du bouton */
	transition: background-color 0.3s ease-out;
	/* Appartion au lancement */
	animation: apparition 0.4s 4s ease-out forwards;
}


.boutoncontact:hover {
	background-color: var(--light-black);
	color: white;
}

.colonnetexte {
	z-index: 3;
	grid-area: colonnetexte;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	margin: 3vw;
}

.titre-principal h1 {
	opacity: 0;
}

.titre-principal {
	display: flex;
	flex-flow: column;
}

.titre-principal > span, h1:nth-child(1){
	animation: apparition 0.8s 1s ease-out forwards;
	/*line-height: clamp(2rem, 6vw, 6rem)*/;
}

.titre-principal > span, h1:nth-child(2){
	animation: apparition 0.8s 2s ease-out forwards;
}

.titre-principal > span, h1:nth-child(3){
	animation: apparition 0.8s 3s ease-out forwards;	
}


.colonnetexte img {
	display: flex;
	width: clamp(5.5rem, 18vw, 14rem);
	opacity: 0;
	/* Appartion au lancement */
	animation: apparition 0.4s 4s ease-out forwards;
}

.colonnetexte p {
	display: block;
	opacity: 0;
	transition: background-color 0.3s ease-out;
	/* Appartion au lancement */
	animation: apparition 0.4s 4s ease-out forwards;
}


@keyframes apparition {
	from { opacity: 0;
			scale: .8;
	transform: translateX(-100%);}
	to{ opacity: 1;
		scale: 1;
	transform: translateX(0);}
}

.image-container { 
	z-index: 3;
	grid-area: image-container;
	border-left: solid 1px var(--grey);
}

.image-container video, .image-container img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.image-container h1 {
	padding-top: 8vw;
	padding-left: 4vw;
}

.image-container p {
	padding: 2vw 4vw 0 4vw;
}


/* VIDEO ANIMANTION XP*/

.animationJS {
	width: 100vw;
	height: clamp(5.5rem, 350vw, 260rem);
}

.animationJS video {
	position: sticky;
	top: 0;
	width: 100vw;
	object-fit: cover;
	z-index: -1;
}


/* CITATION*/


.presentation{
	padding-top: 30vw;
	position: absolute;
	display: flex;
	flex-direction: column-reverse;
}

.citation {
  	width: 80vw;
	align-self: flex-end;
	z-index: -2;
}

.citation h1 {
	margin: 10vw 10vw 20vw 10vw;
	border: none;
	animation: fondu02 ease-in-out forwards;
	animation-timeline: view();
	animation-range-start: -10%;
	animation-range-end: 100%;
}

@keyframes fondu02 {
	0% { opacity: 0;
	transform: translateY(5vw);
	}
	50% { opacity: 1;
		transform: translateY(0);
		}
	100% { opacity: 0;
		transform: translateY(5vw);
		}	
}


.mantra {
	position: sticky;
	margin-top: -1500px;
	display: grid;
  	width: 100vw;
	height: auto;
	grid-template-columns: 70% 30%;
  	grid-template-rows: auto;
	grid-template-areas:
	"citation citation"
  	"texte dl";
  	overflow: hidden;
  	border-bottom: solid 0.8px var(--grey);
	border-top: solid 0.8px var(--grey);
	background-color: #f9f9f9;
	z-index: 1;
}

.black-bg {
	grid-area: citation;
	background-color: var(--light-black);
}

.black-bg h5 {
	border-top: none;
	border-bottom: none;
	padding-bottom: 0vw;
	padding-top: 8vw;
}

.mantra q {
	margin: 6vw 10vw 6vw 10vw;
	color: white;
}

@keyframes citation {
	to { opacity: 1;
	}
}

.frame {
	position: relative;
	grid-area: dl;
}

.mission {
	grid-area: texte;
	border-top: solid 0.8px var(--grey);
	padding: 10vw 10vw 10vw 10vw;
}

.mission p {
	margin-top: 6vw;
}

.liens {
	position: relative;
	height: 100%;
	padding-left: 4vw;
	background-color: #f9f9f9;
	border-top: solid 0.8px var(--grey);
	border-left: solid 0.8px var(--grey);
}

.liens h3 {
	padding: 10vw 0 5vw 0vw;
}


.bouton, button {
	display: flex;
  	align-items: center;
  	justify-content: center;
	width: clamp(8rem, 14vw, 9rem);
	padding: 10px;
	margin-top: clamp(1rem, 1.4vw, 3rem);
	border-radius: 10px;
	outline: 1px solid var(--grey);
	background-color: var(--light-grey);
	cursor: pointer;
	font-size: inherit;
    font-family: inherit;
	animation: fondu ease-in-out forwards;
    border: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
	z-index: 20;
}

.bouton:hover, button:hover {
	outline: solid 1.2px var(--light-black);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transform: scale(1.05);
}

button:focus, a:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}


/*ETUDE DE PROJET*/


.grid-container03 {
	position: relative;
	width:100vw;
	height: auto;
	display: grid; 
  	grid-template-columns: 50% 50%; 
  	grid-template-rows: auto auto auto auto;
  	grid-template-areas: 
    	"img1 desc1" 
		"desc2 img2"
		"img3 desc3"
		"desc4 img4";
}

.grid-container03 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit:cover;
}


.img1 {
    grid-area: img1;
	background-color: white;
	border-right: solid 0.8px var(--grey);
	z-index: 10;
}

.plans {
    grid-area: img2;
}

.etapes {
	background-color: white;
	border-top: solid 0.8px var(--grey);
}

.etapes img {
	width: 100%;
	height: inherit;
	object-fit: cover;	
}

.img3 {
	z-index: 10;
    grid-area: img3;
	border-right: solid 0.8px var(--grey);
	border-top: solid 0.8px var(--grey);
	
}

.img4 {
    grid-area: img4;
	z-index: 10;
	border-top: solid 0.8px var(--grey);
	border-bottom: solid 0.8px var(--grey);
}

.img3 video, .img4 video {
	width: 100%;
	height: 100%;
	object-fit: cover;	
	border-right: solid 0.8px var(--grey);
}

.Description-Projet {
	position: relative;
	display: flex;
	flex-flow: column;
}


.Description-Projet a {
	position: relative;
	width: fit-content;
	color: dimgrey;
	margin-bottom: 3vw;
}

.Description-Projet h3 {
	margin-bottom: 4vw;
}

.Description-Projet h5 {
	margin-bottom: 2vw;
}

.desc1 {
    grid-area: desc1;
	padding: 10vw 8vw 10vw 4vw;
	background-color: var(--light-black);
}

.Description-Projet p {
	margin-bottom: 6vw;
}


.desc1 q, .desc1 p {
	color: white;
	z-index: 10;
	opacity: 0;
	animation: apparition 1s ease-out forwards;
	animation-timeline: view();
	animation-range-start: 20%;
	animation-range-end: 50%;
}

@keyframes apparition {
	to {
		opacity:1;
	}
}

.desc2 {
    grid-area: desc2;
	padding: 10vw 8vw 10vw 4vw;
	border-top: solid 0.8px var(--grey);
	border-right: solid 0.8px var(--grey);
}

.desc3 {
    grid-area: desc3;
	padding: 10vw 8vw 10vw 4vw;
	border-top: solid 0.8px var(--grey);
	
}

.desc4 {
    grid-area: desc4;
	z-index: 10;
	border-top: solid 0.8px var(--grey);
	border-right: solid 0.8px var(--grey);
	border-bottom: solid 0.8px var(--grey);
	padding: 10vw 8vw 10vw 4vw;
}

.desc5 {
	z-index: 5;
	border-top: solid 0.8px var(--grey);
	border-right: solid 0.8px var(--grey);
	border-bottom: solid 0.8px var(--grey);
	padding: 5vw 8vw 5vw 4vw;
}

.Description-Projet h3 {
	padding-top: 5vw;
}

.desc2 p, .Description-Projet h5, .Description-Projet h3, .desc4 p, .desc4 a, .merci p, .desc5 p, .contact-texte h2 {
	opacity: 0;
	transform: translateX(-150%);
	animation: apparitiondroitefondu 1s ease-out forwards;
	animation-timeline: view();
	animation-range-start: 10%;
	animation-range-end: 20%;
}


@keyframes apparitiondroitefondu {
	from { 	
	opacity: 0;
	transform: translateX(-100%);}
	to{ 
	opacity: 1;
	transform: translateX(0);}
}

.Description-Projet h2 {
	display: inline-block;
	border-bottom: .8px solid; /* contrôle l'épaisseur et le style du soulignement */
	padding-bottom: 2px; /* ajuster l'espace entre le texte et le "soulignement" */
	width: fit-content;
	margin-bottom: 5vw;
}

.Description-Projet q {
	/*animation scroll TITRE*/
	opacity: .1;
	margin-bottom: 6vw;
	animation: fondu ease-in-out forwards;
	transform: translateY(5vw);
	animation-timeline: view();
	animation-range-start: 1%;
	animation-range-end: 80%;	
}

/*IMPORTANT*/

.important {
	position: sticky;
	top:0;
	z-index: 30;
}


.texte-defile {
	overflow: clip; /*magique*/
	display: flex;
	align-items: center;
	width: 100%;
	height: clamp(2rem, 3.5vw, 2.6rem);
	clip-path: border-box;
	background-color: var(--grey);
}

.texte-defile a {
	/*font-family: 'menu', Arial, sans-serif;*/
	white-space: nowrap;
	color: var(--light-grey);
	animation: defilement-auto 60s linear infinite;
}


@keyframes defilement-auto {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-100%, 0);
	}
}

@keyframes fondu {
	to { opacity: 1;
	transform: translateY(0);
	}
}


.quadrillage-haut {
	position: absolute;
	width: 100%;
	top: 0;
    height: 301px;
	z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; 
	opacity: 90%;
	z-index: 0;
}


.quadrillage-bas {
	position: absolute;
	width: 100%;
	bottom: 0;
    height: 301px;
	z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
	opacity: 90%;
}



.section-projets {
	position: relative;
	border-bottom: solid 1px var(--grey);
	border-top: solid 1px var(--grey);
	padding-bottom: 20vw;
	background-color:  #f9f9f9;
}


.section-autre {
	/*flex-flow: column;*/
	position: relative;
	height: auto;
	padding-bottom: 10vw;
}


.section-autre img {
	position: relative;
	padding-top: 10vw;
	width: 100%;
	object-fit: cover;
	z-index: 2;
	animation: fondu ease-in-out forwards;
	transform: translateY(40px);
	opacity: 0;
	animation-timeline: view();
	animation-range-start: 30%;
	animation-range-end: 70%;
}

.section-autre h3,.section-projets h3, .section-projets h1 {
	margin: 15vw 0 2vw 10vw;
}

.merci {
	padding-bottom: 10vw;
	border-top: solid 0.8px var(--grey);
}

.merci h3 {
	margin: 5vw 4vw 0vw 8vw;
}

.merci p {
	padding: 5vw 8vw 0 8vw;
}


.carte-projet {
	position: relative;
  	display: grid;
	width: 100vw;
	grid-template-columns: 5vw auto; 
  	grid-template-rows: 16vw auto;
  	grid-template-areas: 
    "date nom-projet"
    "date description"; 
	margin-top: 8vw;
	border-right: solid 0.8px var(--light-black);
	border-bottom: solid .8px var(--light-black);
	border-top: solid .8px var(--light-black);
	transition: transform 1s ease-in-out;
	overflow: hidden;
	animation: apparitiondroite 1s ease-out forwards;
	animation-timeline: view();
	animation-range-start: cover 0%;
	animation-range-end: contain 50%;
	cursor: pointer;
	z-index: 20;
}


.carte-projet:hover {
	outline: solid 1.2px var(--light-black);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@keyframes apparitiondroite {
	from { 	
	transform: translateX(-100%);}

	to{ 
	transform: translateX(0);}
}

.vertical-texte {
	grid-area: date;
	display: flex;
	align-items: center;
	margin-right: auto;
	margin-left:auto;
	background-color: #f9f9f9;
}

.vertical-texte p {
	display: flex;
	flex-direction: row-reverse;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	/*color: gray;*/
}


.carte-projet-description {
	grid-area: description;
	border-left: solid 0.8px var(--light-black);
	border-top: solid 0.8px var(--light-black);
	white-space: normal;
	background-color: #f9f9f9;
}

.carte-projet-nom {
	grid-area: nom-projet;
}

.carte-projet-description, .carte-projet-nom {
	display: inline-block;
	display: flex;
	flex-direction: row;
	align-items:center;
	border-left: solid 0.8px var(--light-black);
	color: var(--light-black);
	padding-left: 2vw;
}

.carte-projet-nom h1{
	display: flex;
	margin: 0;
	white-space: normal;
	margin-top: 4vw;
	margin-bottom: 4vw;
	z-index: 10;
}

.carte-projet-description p {
	margin: 1vw;
}

.carte-projet-image {
	grid-area: nom-projet;
}

.carte-projet-image img {
	height: 100%;
	width: 100%;
	overflow: hidden;
	object-fit: cover;
	border-left: solid 0.8px var(--light-black);

}

section {
	position: relative;
}

/* CONTACT */

.section-contact {
	display: flex;
	width: 100vw;
	position: relative;
	padding-top: 6vw;
	padding-bottom: 20vw;
	border-bottom: solid 0.8px var(--light-black);
}

.contact-texte {
	width: 40vw;
	padding-left: 10vw;
}

.contact-texte p {
	padding-top: 4vw;
	padding-right: 4vw;
	opacity: .1;
	animation: fondu ease-in-out forwards;
	transform: translateY(5vw);
	animation-timeline: view();
	animation-range-start: 10%;
	animation-range-end: 50%;
}


form {
	z-index: 2;
	width: 60vw;
	padding-right: 10vw;
}

#section-01 input, #section-01 textarea {
	width: 100%;
	height: clamp(2.6rem, 4vw, 3rem);
	display: inline-block;
	font-family: 'texte', Arial, sans-serif;
	font-weight: lighter;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	line-height: clamp(1.6rem, 3vw, 1.8rem);
	color: var(--light-black);
	border: solid 1px var(--grey);
	border-radius: 10px;
	padding-left: 1vw;
	padding-right: 1vw;
	margin-bottom: 1vw;
}

#section-01 textarea {
	padding-top: 0.7vw;
	height: 30vw;
	resize: none;
}




/* FOOTER */

footer {
	display: grid;
	grid-template-columns: auto 5vw clamp(1.8rem, 4vw, 4rem); 
  	grid-template-rows: 15vw 10vw;
  	grid-template-areas: 
    "nom liens reseaux "
	"copyright copyright copyright";
	background-color: var(--light-black);	
	padding: 5vw 3vw 1vw 3vw;	
}

.copyright p, .sections a, .adresse p {
	color: white;
}

.adresse {
	grid-area: nom;
	display: flex;
	flex-flow: column;
	justify-content:space-between;
	height: 100%;
}

.logoATfooter {
	width: 60vw;
	margin-bottom: 3vw;
}

.copyright {
	grid-area: copyright;
	display: flex;
	align-items: flex-end;
}

.copyright p {
	font-size: clamp(0.8rem, 1vw, 1rem);
}



/*---------------------------------------------------------------*/


/*Media Query pour les écrans plus petits */
@media only screen and (max-width: 767px) {

	h1 {
		letter-spacing: -0rem;
	}

	q {
		padding-top: 8vw;
		padding-bottom: 8vw; /* Déplace la ligne plus loin du texte */
		letter-spacing: -0.0rem;
	}

	h5 {
		padding-top:5vw;
		padding-bottom: 5vw; /* Déplace la ligne plus loin du texte */
	}

	
/*PREMIERE SECTION */	
	
	.grid-container {
	
  	display: grid;
	grid-template-rows: 18vw 9vw 45vh auto;
  	grid-template-areas: 
    "box-titre box-titre"
    "nav colonnecontact"
	"image-container image-container"
	"colonnetexte colonnetexte";
}

.main-nav ul li a {
	margin-right: 3.5vw;
}


	.colonnecontact li a img{
	width: 6.4vw;
	padding-right: .4rem;	
}
	
	.boutoncontact{
		height: 9vw;
	}

	.colonnetexte {
		grid-area: colonnetexte;
		display: flex;
		flex-flow:row;
		justify-content: space-between;
		margin-left: 6vw;
		margin-right: 6vw;
		align-self:center;
	}

	.colonnetexte p {
		text-align: end;
		width: 26vw;
	}

	.image-container { 
		border-left: none;
		border-bottom: solid 1px var(--grey);
	}

	.colonnetexte img{
		align-self: flex-end;
	} 

	/*SECTION EXPERIENCE*/

	
	.animationJS video {
		position: fixed;
		visibility: hidden;
	}

	.animationJS {
		height: 820vw;
	}

	.citation {
		margin-top: 20vw;
		margin-bottom: 20vw;
	}

	.citation h1 {
		margin-top: 40vw;
		margin-bottom: 40vw;
	}

	.presentation {
		
		padding-top: 0vw;
		height: auto;
	}

	.liens {
		padding-left: 10vw;
	}

	.mantra {
		grid-template-columns: 100vw;
		grid-template-rows: auto auto auto;
		grid-template-areas:
		"citation citation"
		"texte texte"
		"dl dl";
	}

.liens {
	padding-top: 10vw;
}

.liens h3{
	padding-top: 0;
}

.frame .quadrillage-bas {
	visibility: hidden;
}

	/*PROJETS*/


.carte-projet {
	grid-template-rows: 30vw auto;
	grid-template-columns: 8vw auto;
	grid-template-areas: 
	"date nom-projet"
	"date description";
	margin-top: 12vw;
}

.frame {
	margin-bottom: 15vw;
}

.carte-projet h1 {
	padding-top:3vw;
	padding-bottom:3vw;
	white-space: normal;
	margin: 0;
}
		
	/*CONTACT*/
	
.section-contact {
	display: flex;
	flex-flow: column;
	width: 100vw;
	position: relative;
	padding-top: 15vw;
	padding-bottom: 30vw;
	border-bottom: solid 0.8px var(--light-black);
	border-top: none;
}
	
.contact-texte {
	width: auto;
	padding-left: 6vw;
	padding-right: 8vw;
}

.contact-texte p {
	margin-top: 6vw;
	margin-right: 4vw;
}

	
form {
	width: auto;
	padding-top: 8vw;
	padding-right: 10vw;
	padding-left: 6vw;
}

	#section-01 textarea {
	padding-top: 2vw;
	height: 80vw;
	resize: none;
}

	#section-01 input {
	height: 10vw;
}

	#section-01 input, #section-01 textarea {
	padding-left: 3vw;
	margin-bottom: 2vw;
}


	
	
/*PROJETS*/
	.grid-container03 {
	position: relative;
	width:100vw;
	height: auto;
	display: grid; 
  	grid-template-columns: 100%; 
  	grid-template-rows: auto auto auto auto auto auto auto auto;
	border-bottom: none;
  	grid-template-areas: 
    	"img1"
		"desc1"
		"img2"
		"desc2"
		"img3"
		"desc3"
		"img4"
		"desc4"
	;	
}

.Description-Projet {
	padding: 20vw 6vw 20vw 6vw;
}

.Description-Projet p {
	margin-top: 5vw;
	margin-bottom: 10vw;
}

.Description-Projet h3 {
	padding-top: 10vw;
}

.Description-Projet h5 {
	margin-top: 18vw;
}

.grid-container03 {
	border-top: none;
}

.img1 {
	border-right: none;
	border-bottom: solid 0.8px var(--light-black);
	border-top: solid 0.8px var(--light-black);
}

.img3 {
	border-right: none;
	border-bottom: solid 0.8px var(--light-black);
}
.section-autre {
	border-top: solid 0.8px var(--light-black);
	border-bottom: none;
}

.section-autre img {
	height: 150vw;
	object-fit:cover;
}


.desc4 {
	border-top: none;
	border-right: none;
	border-bottom: none;
}

.merci h3 {
	margin:0;
}

.merci p {
	padding: 0;
}

/*FOOTER*/

footer {
  	grid-template-rows: 23vw 20vw;	
	padding: 5vw 3vw 3vw 3vw;	
}

.adresse img {
	width: 80vw;
}
	
}