@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://use.typekit.net/gis2hij.css");

/* 
font-family: "config-variable", sans-serif;
font-variation-settings: "slnt" 0, "wdth" 50, "wght" 100;

font-family: "adapt-variable", sans-serif;
font-variation-settings: "wdth" 100, "wght" 100;
*/

/* CLASS - COULEURS ET VARIABLES */

	:root{
		--noir: 		#141414; 
		--gris1: 		#1E1E1E; 
		--gris2: 		#D8D8D8;
		--blanc: 		#FFFFFF;
		--violet-blanc: #FDF9FF;
		--violet-clair: #D2B3FF;
		--violet: 		#5C00E0;
		--violet-trans:	#5C00E024;
		--violet-fonce: #39126F;
		--jaune: 		#ffbc00; 
		--rouge: 		#FF0900;
		--fond: url("../medias/autres/FOND-VIOLET.png");

		--marges:	10vw;
		font-size: 18px;
	}

	@media (max-width: 1000px) {
		:root{
			--marges: 7vw;
		} 
	}
	@media (max-width: 450px) {
		:root{
			--marges: 5vw;
		} 
	}
	@media (min-width: 1400px) {
		:root{
			--marges: 15vw;
		} 
	}

/* BASES */

	*{
		box-sizing: border-box;
	}

	.hidden {
		display: none;
	}	

	html{
		margin: 0;
		padding: 0;
	}
	
	body{
		margin: 0;
		padding: 0;
		position: relative;
		scroll-behavior: smooth;
	}
	
	* {
		scroll-behavior: smooth;
		scrollbar-width: auto; /* Firefox */
		scrollbar-color: var(--violet) var(--blanc); /* Firefox */
	}
	
	/* Chrome, Edge, Safari */
	*::-webkit-scrollbar {
		height: 14px; /* Plus épaisse que la normale */
	}
	
	*::-webkit-scrollbar-track {
		background: var(--blanc);
		border-radius: 7px;
	}
	
	*::-webkit-scrollbar-thumb {
		background-color: var(--violet);
		border-radius: 7px;
		border: 3px solid var(--blanc); /* Pour créer un espace blanc autour */
		transition: background-color 0.3s ease;
	}
	
	*::-webkit-scrollbar-thumb:hover {
		background-color: #4e2a94; /* Violet plus foncé au survol */
	}
	
	.hide{
		display: none !important;
	}

/* TEXTES */


	*{
		font-family: "config-variable", sans-serif;
	}

	h1, h2, h3, h4, h5, h6, p, figcaption, label, blockquote, abbr, acronym, address, pre, a, em, ins, kbd, q, s, big, cite, code, del, dfn,  samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, details, summary, mark, input, select, textarea{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 300;
		letter-spacing: 0.0em;
		font-size: 18px;
	}

	h1, h2, h3, h4, h5, h6{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 500;
		letter-spacing: -0.05em;
	}

	/* p, figcaption, option, legend, li, a, blockquote, div, figure, menu, ol, li, pre, label, input, textarea{
		font-size: 18px;
	} */

	h1{
		margin-top: 2em;
		font-size: 2em;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 900;
	}
	h2{
		font-size: 1.5em;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 700;
	}
	h3{
		font-size: 1.3em;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 550;
	}
	h4{
		font-size: 1.3em;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 500;
	}
	
	h2.Title2{
		margin: 2em 0;
		text-align: center;
		font-variation-settings: "slnt" 0, "wdth" 50, "wght" 700;
		position: relative;
		width: fit-content;
		letter-spacing: .005em;
		span{
			display: block;
			margin: 0.2em;
			font-variation-settings: "slnt" 9, "wdth" 50, "wght" 700;
			font-size: 3em;
			color: var(--violet);
			line-height: 1;
			transition: all 0.3s ease-in-out;
			&::after{
				content: "";
				background-color: var(--rouge);
				height: 1.5px;
				width: 50%;
				position: absolute;
				bottom: -5px;
				left: 25%;
			}
		}
		&.Title2-Dark{
			color: var(--violet-clair);
			span{
				color: white;
			}
		}
	}
	@media screen and (max-width: 700px){
		h2.Title2 span{
			font-size: 2.5em !important;
		}
	}
	
	h2.Title2 span:hover{
		font-variation-settings: "slnt" 0, "wdth" 50, "wght" 700;
	}

	p{
		margin: 0.5em 0;
	}

	a{
		color: black;
		text-decoration-style: underline;
		text-decoration-color: var(--violet);
		text-decoration-thickness: 2px;
		transition: all 0.3s ease;
		&:hover{
			text-decoration-color: var(--blanc);
		}
	}

	pre, pre *{
		font-size: 16px !important;
		font-family: monospace !important;
		font-variation-settings: unset !important;
	}

	strong{
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 500;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 500;
	}
	
	blockquote{
		border-left: var(--violet) 2px solid;
		margin: 0;
		padding: 15px;
		font-variation-settings: "slnt" -7, "wdth" 90, "wght" 300;
	}

	ul{
		list-style-type: "- ";
		li ::marker{
			margin-right: 5px;
		}
	}

	.violet{
		color: var(--violet);
	}

/* COMPONENTS */

.center{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.btn{
	padding: 7px 20px;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 100px;
	font-variation-settings: "slnt" 0, "wdth" 75, "wght" 600;
	transition: all 0.3s ease-in-out;
	i.bi{
		margin-right: 5px;
	}
	&.btn-jaune{
		background-color: var(--jaune);
		color: black;
	}
	&.btn-jaune:hover{
		background-color: var(--violet);
		color: white;
	}
	&.btn-vide{
		background-color: #FFFFFF00;
		color: white;
		border: 2px white solid;
	}
	&.btn-vide:hover{
		background-color: white;
		color: var(--violet);
		border: 2px solid #FFFFFF00;
	}
}

main{
	display: flex;
	flex-direction: column;
}

section{
	padding: 50px var(--marges);
}