/* Polices Adobe Font */
@import url("https://use.typekit.net/lxh1yjb.css");
@import url("https://use.typekit.net/cmt2kwx.css");
/* Icons bootstrap https://icons.getbootstrap.com/ */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* CLASS - COULEURS ET VARIABLES */

	:root{
		--noir: 	#141414; 
		--gris1: 	#4d4d4d; 
		--gris2: 	#D8D8D8;
		--blanc: 	#FFFFFF;
		--violet: 	#662D91;
		--rouge: 	#E01C24; 
		--orange: 	#FF931E;
		--vert: 	#2E9959;
		--rose:		#ED5FB1;
		--bleu:		#3885F4; 
		/* --gradient: linear-gradient(135deg, #331a5a, #583d86, #00a86b); */
		/* --gradient: linear-gradient(135deg, #331a5a, #120428, #283273); */
		--gradient: linear-gradient(135deg, #120428, #331a5a, #283273);

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

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

/* CLASS - POLICES ET COULEURS */

	.peridot{
		font-family: "peridot-pe-variable", sans-serif;
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 400;
	}
	.dorival{
		font-family: "dorival-ui-variable", sans-serif;
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 400;
	}

	.peridot-compressed-black{
		font-family: "peridot-pe-variable", sans-serif;
		font-variation-settings: "slnt" 0, "wdth" 50, "wght" 900;
		letter-spacing: 0;
	}
	.peridot-compressed-heavy{
		font-family: "peridot-pe-variable", sans-serif;
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 950;
		letter-spacing: -0.05em;
	}
	.dorival-condensed-medium{
		font-family: "dorival-ui-variable", sans-serif;
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 500;
		letter-spacing: -0.05em;
	}
	
	.font-light{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 100;
	}
	.font-regular{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 400;
	}
	.font-bold{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 600;
	}
	.font-black{
		font-variation-settings: "slnt" 0, "wdth" 80, "wght" 950;
	}

	.bg-violet{
		background-color: var(--violet);
	}
	.bg-rouge{
		background-color: var(--rouge);
	}
	.bg-orange{
		background-color: var(--orange);
	}
	.bg-vert{
		background-color: var(--vert);
	}
	.bg-rose{
		background-color: var(--rose);
	}
	.bg-bleu{
		background-color: var(--bleu);
	}

/* CORPS */

	*{
		box-sizing: border-box;
	}

	.hidden {
		display: none;
	}	

	html{
		margin: 0;
		padding: 0;
	}
	
	body{
		margin: 0;
		min-height: 100vh;
		position: relative;
	}

	main{
		margin: 50px var(--marges);
	}

	* {
		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: "dorival-ui-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-family: "peridot-pe-variable", sans-serif;
		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;
	}

	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;
	}

/* COMPOSANTS */

	hr{
		border: .5px solid var(--violet);
	}

	/* Bouton répondre à l'enquête */

		.btn_enquete{
			padding: 15px 30px;
			width: fit-content;
			font-size: 1.3em;
			font-family: "dorival-ui-variable", sans-serif;
			font-variation-settings: "slnt" 0, "wdth" 50, "wght" 600;
			text-decoration: none;
			background-color: var(--violet);
			color: var(--blanc);
			border: 1px var(--violet) solid;
			transition: all 0.3s ease;
			&:hover{
				background-color: var(--blanc);
				color: var(--violet);
				border: 1px var(--violet) solid;
			}
		}

	/* div centrée avec flex */

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

/* FORMULAIRES */

	textarea{
		resize: vertical;
	}

	label{
		display: block;
		font-variation-settings: "slnt" 0, "wdth" 90, "wght" 400;
	}

	.input{
		width: 100%;
	}

	input, textarea{
		width: 100%;
		padding: 10px;
		border: var(--violet) 1px solid;
		border-radius: 0px;
	}
	
	input[type="checkbox"]{
		width: min-content;
	}

	.input:has([required]) label::after, fieldset.required legend::after{
		content: " *";
		color: var(--rouge);
		font-weight: 600;
	}

	.input:has(> [disabled]){
		color: #777777 !important;
		label{
			text-decoration: line-through;
		}
		input{
			border-color: #777777;
			color: #777777 !important;

		}
	}

	.invalid{
		border: var(--rouge) 1px solid !important;
	}

/* DIALOG (notification) */

	dialog{
		position: fixed;
		top: 15px;
		left: 15px;
		z-index: 3000;

		width: fit-content;
		min-width: 300px;
		max-width: 70vw !important;
		margin: 0;
		border-width: 2px;
		border-style: solid;


		display: flex;
		flex-direction: row;
		gap: 20px;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: baseline;

		> i{
			font-size: 1.3em;
		}
		p{
			margin: 0;
		}
		button{
			background-color: unset;
			border: none;
			margin: 0;
			padding: 0;
		}

		&.suc{
			border-color: var(--vert);
			background-color: #89dcaa;
			> i{
				color: var(--vert);
			}
			button:hover{
				color: var(--vert);
			}
		}
		&.err{
			border-color: var(--rouge);
			background-color: #ee777b;
			> i{
				color: var(--rouge);
			}
			button:hover{
				color: var(--rouge);
			}
		}
	}