@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

/* Variables générales */
:root{
	  --vert: #7632f9;
	  --navy: #39245b;
	  --blanc: #fff;
	  --pill-border-radius: 3px;
	  
	  /* Définitions des variables de thème par défaut (Mode Clair) */
	   --main-text-color: var(--navy);
	   --body-bkg-color: var(--blanc);
	   --pill-bkg-color: var(--vert);
	   --h1-text-color: var(--navy);
	   --h2-text-color: var(--navy);
	   --aside-bkg-color: var(--navy);
	   --nav-logo: url('lib/img/exoterra.svg');
	   --btn-bkg-color: var( --navy );
	   
	   /* AJOUT : Définir le footer par défaut (s'il n'est pas déjà défini ailleurs) */
	   --footer-text-color: var( --navy );
}

/* Variables du mode clair */
@media (prefers-color-scheme: light) {
	
	:root{
		--main-text-color: var(--navy);
		--body-bkg-color: var(--blanc);
		--pill-bkg-color: var(--vert);
		--h1-text-color: var(--navy);
		--h2-text-color: var(--navy);
		--aside-bkg-color: var(--navy);
		--nav-logo: url('lib/img/exoterra.svg');
		--btn-bkg-color: var( --navy );
	}
	
}

/* Variables du mode sombre */
@media (prefers-color-scheme: dark) {
	
	:root{
		--pill-bkg-color: var(--vert);
		--body-bkg-color: var(--navy);
		--h1-text-color: var(--blanc);
		--h2-text-color: var(--blanc);
		--aside-bkg-color: var(--navy);
		--nav-logo: url('lib/img/exoterra-blanc.svg');
		--btn-bkg-color: var( --vert );
		--footer-text-color: var( --blanc );
	}
	
}

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

::selection {
  background-color: var(--navy);
  color: #fff;
}

body {
  position: relative;
  margin: 0;
  //font-family: $font-fam;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: auto;
  background-color: var(--body-bkg-color);
  font-family: "Exo 2", sans-serif;
  overflow-x: hidden;
}



.pill{
	display: flex;
	width: fit-content;
	margin-bottom: 20px;
	padding: 5px 9px;
	border-radius: var(--pill-border-radius);
	font-size: 0.7rem;
	background-color:  var(--pill-bkg-color);
	color: #fff;
	font-weight: 600;
}



footer{
	position: absolute;
	left: 60px;
	bottom: -80px !important;
	font-size: 0.65rem;
	opacity: .5;
	transition: opacity ease 0.7s;
}


.cod{
	background-color: #E3243F;
	color: #fff;
	font-weight: 800;
	padding: 2px 4px;
	margin-left: 3px;
	display: inline-block;
	border-radius: 2px;
	
}

/* FORM */
form{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.input{
	
	display: flex;
	flex-direction: column;
	gap: 5px;
	

	
}

.input input{
	font-size: 1.2rem;
	padding: 12px 15px;
	border: none;
	border-radius: 6px;
	border: solid 1px #ddd;
}

.input input:focus{
	border-color: var(--vert);
}

input.spe{
	display: none !important; 
	visibility: hidden !important;
	opacity: 0 !important; 
	position: absolute; 
	left: -5000px;
}

.input-chk{
	display: flex;
	gap: 10px;
	font-size: 0.9rem;
	color: #555;
}

.form-button{
	margin-top: 20px;
	

}

.form-button button{ 
	background: none;
	border: none;
	background-color: var(--vert);
	color: #fff;
	padding: 12px 20px;
	font-size: 1.1rem;
	border-radius: 3px;	
	cursor: pointer;
}

.form-button button:hover{
	background-color: var(--navy);
	transition: background ease 0.4s;
}

footer:hover{
	opacity: 1 !important;
	transition: opacity ease 0.4s;
}

/* SECTION */
.content{
	display: flex;
	width: 100vw;
	height: 100vh;
}

.content__l,
.content__r{
	width: 50%;
	padding: 80px;
}

.content__l{
	display: flex;
	flex-direction: column;
	background-color: var(--navy);
	
	gap: 80px;
}


.content__l--logo{
	
}

.content__l--logo img{
	width: 180px;
}
.content__l--textes{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.content__l .content__l--textes h1{
	margin-bottom: 30px;
	font-weight: 200;
	color: var(--blanc);
	font-size: 4rem;
}

.content__l .content__l--textes h2{
	font-weight: 300;
	color: var(--blanc);
	font-size: 1.4rem;
	line-height: 2rem;
	text-align: justify;
}

.content__l .content__l--textes p{
	font-weight: 300;
	color: var(--blanc);
	font-size: 1.1rem;


}

.content__r{
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	justify-content: center;
	
}
.content__r h3,
.content__r p{
	align-self: flex-start;
}
/* NOTIFICATIONS */

.form-status {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.success {
	color: #3c763d;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}
.error {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	white-space: pre-wrap; /* Maintient les sauts de ligne pour les erreurs multiples */
}

@media screen and (width < 1300px){
	.content__l,
	.content__r{

		padding: 50px;
	}
}

@media screen and (width < 1100px){


	.content__l .content__l--textes h1{

		font-size: 3rem;
	}
	
	.content__l .content__l--textes h2{

		font-size: 1.2rem;
	}

}

@media screen and (width < 900px){

	.content{
		flex-direction: column;
	}
	
	.content__l,
	.content__r{
		width: 100%;
	}

}


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

	
	footer{
		left: 40px;
		bottom: -40px !important;
		color: var(--footer-text-color);
	}
	
}