html {
	box-sizing: border-box;
	margin:0;
}

body {
  	font-family:"montserrat", Calibri, Arial, sans-serif;
	font-size:17px;
	text-align:left;
	margin:0;
	padding:0;
	}

h1 {
	text-align:right;
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight:700;
	color: #111;
	margin-left:clamp(32px,5vw,96px);
	margin-right:clamp(32px,5vw,96px);
}


@media screen and (max-width: 768px) {
	h1 {
	font-size: clamp(2rem, 14vw, 10rem);
	margin-left:clamp(32px,5vw,124px);
	margin-right:clamp(32px,5vw,124px);
	}
}

h3 {
	text-align:center;
	font-weight:700;
	font-size:clamp(3rem, 5vw, 4rem);
	margin:2rem 2rem 2rem 2rem;
}
	
h4 {
	text-align:center;
	font-weight:700;
	font-size:clamp(1.25rem, 2vw, 2rem);
	line-height:1.25em;
}

h5 {
	text-align:center;
	font-weight:500;
	font-size:1.25rem;
	margin:0rem 2rem 1.5rem 2rem;
}

h6 {
	text-align:left;
	font-weight:700;
	font-size:1.25rem;
	margin:3rem 0rem 1rem 0rem;
}

p {
	line-height:1.5em;
}

a {
	color:#0FD488;
}

a:hover {
	color:#007BFF;
}
	
.footer {
	display:block;
	width:100%;
	background-color:#333;
	color:#fff;
	text-align:center;
}

.main {
	box-sizing:border-box;
    	min-height:100vh;
	width:100%;
	padding-left:clamp(64px,18vw,250px);
	padding-right:clamp(64px,18vw,250px);
	padding-top:clamp(32px,3vw,64px);
	padding-bottom:clamp(32px,5vw,42px);
}


@media screen and (max-width: 768px) {
	.main {
	padding-left:clamp(32px,5vw,124px);
	padding-right:clamp(32px,5vw,124px);
    }
	.grid-cell{
		margin:0;
	}
}

.grid-cell{
	margin:1em;
	}

.green {
	background-color:#0FD488;
	align-content:flex-end;

}

.green-font {
	color:#0FD488;
}

.purple {
	background-color:#28006d;
	color: #fff;
}

.purple ul li::before {
	content:"\2712";
	color: #fff;
}

@media screen and (max-width: 768px) {
.purple ul li::before {
	content:"\27A8";
}
}

.light {
	font-weight:300;
}
ul {
	list-style-type: none;
	padding:0;
	}
ul li {
	font-weight:700;
}

ul li::before {
	content:"\2712";
	color: #0FD488;
	font-size:1.25rem;
	padding-right:1em;
	font-weight:100;
}

@media screen and (max-width: 768px) {
ul li::before {
	content:"\27A8";
}
}

.p-center {
	text-align:center;
}

.special {
	margin-top:25vh;
}

.a-highlight {
	color:#0FD488;
	font-weight:700;
}

.no-padding {
	margin-bottom:0.5rem;
}

.important {
	color:#E3223F;
	background-color:#fff;
	font-weight:700;
	text-align:center;
	border:2px solid #E3223F;
	border-radius:6px;
	padding:1em;
	margin:4em;
}

/*IMAGE*/

.picture {
	display:flex;
	right:0;
	max-width:100%;
	max-height:100%;
}

.icon {
	width:64px;
	height:64px;
}

.logo {
	width:128px;
	height:128px;
}
.img-bg {
	background-image:url('Images/Icones/imgbg.svg');
	background-position:center;
	background-size:110%;
	background-repeat:no-repeat;
}

/*GRILLES*/

#container-grid {
	display:grid;
	grid-template-areas: "home"
	"intro"
	"infos"
	"about"
	"how"
	"detail2"
	"plans"
	"contact"
	"footer";
	align-items:center;
	justify-items:center;
}

#about {
	display:grid;
	padding-left:0;
	padding-right:0;
	grid-template-columns:2fr 1fr;
	grid-template-areas: "titre picture"
	"text text";
}

@media screen and (max-width: 768px) {
	#about {
	grid-template-columns:1fr;
	grid-template-areas: 
	"titre"
	"picture"
	"text";
	}
	
	.column1 {
	padding-left:96px;
	padding-right:96px;
	}
	.column2 {
	justify-content:flex-end;
	}
	.column3 {
	padding-left:clamp(46px,12vw,96px);
	}
}

.column1 {
	display:grid;
	grid-area:titre;
	padding-left:clamp(64px,20vw,192px);
	padding-right:auto;
	text-align:center;
}
.column2 {
	display:grid;
	align-content:center;
	grid-area:picture;
	padding-left:32px;
}
.column3 {
	display:grid;
	grid-area:text;
	padding-left:clamp(64px,20vw,192px);
	padding-right:clamp(64px,20vw,192px);
}


#grid-how {
 display:grid;
 grid-template-columns:1fr 1fr 1fr;
 grid-template-areas: "c1 c2 c3";
 align-content: center;
 text-align:center;
 column-width: minmax(250px, auto);
 
}

@media screen and (max-width: 768px) {
	
	#grid-how {
	grid-template-columns:1fr;
	grid-template-areas: "c1"
	"c2"
	"c3";
	}
}

.c1 {
	grid-area:c1;
}
.c2 {
	grid-area:c2;
}
.c3 {
	grid-area:c3;
}


#grid-details {
 display:grid;
 grid-template-columns:1fr 1fr;
 grid-template-areas: "g1 g2";
 align-content: center;
 text-align:center;
}

@media screen and (max-width: 768px) {

#grid-details {
	grid-template-columns:1fr;
	grid-template-areas: "g1"
	"g2";
	}
}

.g1 {
	grid-area:g1;
}

.g2 {
	grid-area:g2;
}

#grid-plans {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-areas: "titre titre titre"
	"offer1 offer2 offer3"
	"titre2 titre2 titre2"
	"offer4 offer5 offer6";
	align-items: center;
	justify-items:center;
}

@media screen and (max-width: 768px) {
	#grid-plans {
	grid-template-columns:1fr;
	grid-template-areas: "titre"
	"offer1"
	"offer2"
	"offer3"
	"titre2"
	"offer4"
	"offer5" 
	"offer6";
	}
}

.titre {
	grid-area:titre;
}
.titre2 {
	grid-area:titre2;
}
.offer1 {
	grid-area:offer1;
}
.offer2 {
	grid-area:offer2;
}
.offer3 {
	grid-area:offer3;
}

.offer4 {
	grid-area:offer4;
}
.offer5 {
	grid-area:offer5;
}
.offer6 {
	grid-area:offer6;
}


/*Divider*/

#divider {
	display:grid;
	grid-template-areas: "lignl entity lignr";
	grid-template-columns:2fr 4vw 2fr;
	text-align: center;
    align-items: center;
    justify-content: center;
	justify-self:center;
	width:110%;
	margin-top:2.5rem;
}

.margin-top-divider {
	margin-top:0;
}

.lign-l {
	grid-area:lignl;
	border-bottom:2px solid #0FD488;
	border-radius: 0 0 0 25px;
}
.lign-r {
	grid-area:lignr;
	border-bottom:2px solid #0FD488;
	border-radius: 0 0 25px 0;
}

.entity {
	grid-area:entity;
	color:#0FD488;
	margin-bottom: -1.25rem;
}
.entity p::after{
	content:'\2712';
	font-size:1.5em;
}

@media screen and (max-width: 768px) {
.entity p::after{
	content:'\273A';
	font-size:1em;
}
}

/***animations***/

@keyframes entrance {
	0% {opacity:0;}
	100%  {opacity:1;}
}

.element {
	animation-name: entrance;
	animation-timing-function: ease-in;
	animation-delay: 0s;
	opacity:0;
	animation-duration: 0.75s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.element:nth-child(2) {
	animation-delay: 1s;
}

.element:nth-child(3) {
	animation-delay: 2s;
}

.element:nth-child(4) {
	animation-delay: 3s;
}

.element:nth-child(5) {
	animation-delay: 4.5s;
}