@font-face {
  font-family: "fontRegular";
  src: url("/local/fonts/Nunito/Nunito-Light.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "fontBold";
  src: url("/local/fonts/Nunito/Nunito-Bold.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "fontTitre";
  src: url("/local/fonts/DMSerifDisplay/DMSerifDisplay-Regular.ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;

}

:root, :host
{	
	
	--couleurText: #162D23;
	--couleur2: oklch(from var(--couleur1) 75% calc(c * 0.6) h);
	--couleurVueBackground: oklch(from var(--couleur1) 96% calc(c * 0.08) h);

	
	--couleur1:rgba(0, 128, 128, 1);
	--couleurFond1:#F7F7F7;
	--couleurClaire:#FFF;
	--couleurClaire1: #ede7dc;
	
	--couleurClaire2:#fef9f0;
	--couleurClaire3:rgb(133, 166, 153);
	--couleur2:#2D543A;
	--couleur3:#507D4C;
	--couleur4:#7EA65A;
	--couleur5:#B6D065;
	--couleur6:#F9F871;
	--couleur7:#f9c571;
	--couleur8:rgba(214, 169, 106, 0.2);
		
	--couleurTitre: rgba(37, 75, 59, 1);	
	--couleurNeutre1:#F1FCF6;
	--couleurNeutre2:#E8F3F5;
	
	--couleurBTN:#F9F871;
	--couleurBTN2:#D6A96A;
	--couleurBTNText:#162D23;
	
	
	
	--couleurValidation:#2ecc71;
	--couleurAvertissement: #F2747C;
	--couleurLegende: rgb(0, 146, 255);

	--degrader1:linear-gradient(315deg, rgb(37, 75, 60), rgb(108, 161, 136));
	
	--couleurBodyBackgroundClaire:#f3f2ee;
	--couleurBodyBackground:#fff;
				
	--borderRadiusXS:10px;
	--borderRadiusS:15px;
	--borderRadius: 20px;
	--borderRadiusXL:25px;
	--borderRadiusXXL:30px;
				
	--boxShadow: 0 4px 30px rgba(0, 0, 0, 0.1);

	--fontBody: fontRegular;
	--fontTitre: fontTitre;
	--fontBold: fontBold;
	
	--paddingXS:10px 0;
	--padding:50px;
	--maxWidth: min(95%, 1400px);
	
	@media (max-width: 768px)
	{
		--maxWidth: 80%;
	}
	--fontAwesome : "Font Awesome 7 Pro";
	
	--headerHeight:90px;
	
	--formCouleurBordure:#d7d7d7;
	--formBorderRadius:10px;
	--formCouleurFocus:#efdf80;
	--formCouleurInput:white;


	--duree-transition-view:1s;
	
	h1, h2, h3, h4, h5, h6
	{
		font-family: var(--fontTitre);
		margin: 0;
		font-weight: 100;
		color: var(--couleurTitre);
	}
	
	h1{
		font-size: 4em;
		line-height: .95;
	}
	
	h2{
		font-size: 2.5em;
		line-height: 1;
	}
	
	h3{
		font-size: 2.25em;
		line-height: 1.05;
	}
	
	h4{
		font-size: 2em;
		line-height: 1.1;
	}
	
	h5{
		font-size: 1.75em;
		line-height: 1.15;
	}
	
	h6{
		font-size: 1.5em;
		line-height: 1.2;
	}	  
}
.grid, [class*="grid"] 
{
	display: grid;
	gap: 1em;
}

@media (max-width: 820px) 
{
	.grid, [class*="grid"]{
		display: block;
	}	
}

.gap0{gap: 0}

/*-----------------------------------------------------------------*/
/* 2 COLONNES	                              	               */
/*-----------------------------------------------------------------*/

.grid_1_1{ grid-template-columns: minmax(0,1fr) minmax(0,1fr);}
.grid_1_1_30px{ grid-template-columns: 1fr 1fr 30px}
.grid_2_1{ grid-template-columns: 2fr 1fr}
.grid_1_2{ grid-template-columns: 1fr 2fr}
.grid_3_1{ grid-template-columns: 3fr 1fr}
.grid_1_3{ grid-template-columns: 1fr 3fr}

/*-----------------------------------------------------------------*/
/* 3 COLONNES		                              	               */
/*-----------------------------------------------------------------*/
.grid_1_1_1{ grid-template-columns: 1fr 1fr 1fr}
.grid_3_1_1{ grid-template-columns: 3fr 1fr 1fr}

/*-----------------------------------------------------------------*/
/* 4 COLONNES		                              	               */
/*-----------------------------------------------------------------*/
.grid_1_1_1_1{ grid-template-columns: 1fr 1fr 1fr 1fr}

*{box-sizing:border-box; -ms-overflow-style: none; scrollbar-width: none;
  scroll-behavior: smooth;}
*::-webkit-scrollbar {display: none;}

html, body
{
	padding: 0;
	margin: 0;
	min-height: 100dvh;
}

@media (max-width: 768px)
{
	html, body
	{
		
		width: 100dvw;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
}


body
{
	
	
	.btn{
		border-radius: var(--borderRadiusXS);
		background: var(--couleur1);
		padding: 10px 20px;
		text-decoration: none;
		margin: 10px 0;
		display: inline-flex;
		gap: .5em;
		color: var(--couleurText);
		background: var(--couleurBTN);
		transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
		transform: scale(1);	
		font-weight: 100;
	}
	
	.btn:hover{
		transform: scale(1.01);
	}
	
	.btn i{
		line-height: 30px;
	}
	
	a{
		color: var(--couleur1);
		font-weight: bold;
	}
	
}


[data-composant="form"]
{
	.parent
	{
		margin-bottom: 20px;
	}
	
	label
	{
		display: block; 
		margin-bottom:5px;
		min-height: 20px;
		cursor: pointer;
	}
	
	.blocInput
	{
		&
		{
			transition: background .5s ease, border .5s ease;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: 45px auto 45px;
			border-radius: var(--formBorderRadius);
			position: relative;
			overflow: hidden;
			gap: 0px;
			align-items: center;
			min-height: 55px;
		}
		
		*
		{
			transition: opacity .5s ease;
		}
		
		&:has([disabled])
		{
			background: #ccc; 
			cursor: not-allowed
		}
		
		&:has([disabled]) *
		{
			cursor: not-allowed;
		}
		
		&:not(:has([required])):has(output:empty)
		{
			grid-template-columns: 45px auto 0;
		}
		
		.avantChamp, .apresChamp
		{
			color: #9d9e9e;
			display: flex;
			justify-content: center;
			height: 100%;
			align-items: center;
			flex-direction: column-reverse;
			padding: 5px;		
			background: #fff;
			width: 100%;
		}
		
		.avantChamp
		{
			font-size: 1.1em
		}
		
		.champ
		{
			&
			{
				display: block;
				height: 100%;
			}
			
			input, textarea, select
			{
				outline: none;
			}
			
			input:not([type="checkbox"]):not([type="radio"])
			, textarea
			{
				width: 100%;
				height: 100%;
				padding: 0 10px;
				font-weight: 400;
				font-size: 1em;
				background-color: var(--formCouleurInput);
				border: none;
			}
			
			&:has(textarea)
			{
				height: 200px;
			}
			
			textarea
			{
				padding: 5px;
				height: 100%;
			}
			
		}
		
		.apresChamp
		{
			background: #fff;
			gap: 5px;
			font-size: 1.5em;
			position: relative;
			z-index: 1;
			
		}
		
		.apresChamp::before
		{
			background: #fff;
			content: " ";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
		}
		
		output
		{
			&
			{	
				font-size: .4em;
				z-index: 1;
			}
			
			&:empty
			{
				display: none;
			}
			
			&.avertissement
			{
				color: var(--couleurAvertissement);
			}	
		}
		
		.legende
		{
			color:var(--couleurLegende);
			font-size: .8em;
			font-style: italic;
		}
		
		.explicationErreur
		{
			min-height: 20px;
			margin-top:5px;
			color: #fff;
			
			background: var(--couleurAvertissement);
			padding: 10px;
			border-radius: var(--borderRadiusMin);
			padding-top: 20px;
			border: 1px solid var(--couleurAvertissement);
			position: relative;
			z-index: -1;
		
			margin-top: -15px;
			margin-bottom: 20px;
			transition: margin-top .5s ease, opacity .5s ease;
			opacity: 1;
		}
		
		.explicationErreur:empty
		{
			margin-top: -55px;
			opacity: 0;
		}
		
	}
	
	.submit
	{
		position: relative;
	}
	.submit button
	{
		background: var(--couleurBTN);
		color: var(--couleurText);
		padding: 10px;
		border-radius: var(--borderRadius);
		text-align: center;
		transition: opacity .5s ease;
		border: 1px solid var(--couleurBTN);
		width: 100%;
		font-size: 1em;
		opacity: 1;
		cursor: pointer;
		font-weight: 100;
	}
	
	&:has(:invalid) button
	{
		/*opacity: .5;*/
	}
	
	&:has(:invalid) .submit:after
	{
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0);
		width: 100%;
		height: 100%;
		z-index: 1;
		cursor: not-allowed;
	}
	
	
	.parent:has([required])
	{
		.apresChamp::after 
		{
			font-weight: 300;
			font-family: var(--fontAwesome);
			justify-content: end;
			content: " ";
			z-index: 1;
		}
		
		.blocInput:has(:valid) .apresChamp:after
		{
			content: "\f058";
			color: var(--couleurValidation);
		}
		
		.blocInput:has(:invalid) .apresChamp::after 
		{
			content: "\f071";
			color: var(--couleurAvertissement);
		
		}
		
	}
	
	
	
	
	
	
	.desactiver-border .blocInput
	{
		border: 2px solid var(--formCouleurBordure);
	}
	
	
	.parent:not(.desactiver-border):has(:focus)
	, .parent:not(.desactiver-border):has(:focus):has(:hover)
	{
		border-color: var(--formCouleurFocus)
	}
	
	.masquer-bordure .blocInput
	{
		border:none;
	}
	
	.parent:has(.explicationErreur:not(:empty)) .blocInput.invalid
	{
		border-color: var(--couleurAvertissement)!important;
	}

	.supprimer-espace-label label:empty
	{
		display: none;
	}
	
	.supprimer-espace-bottom
	{
		margin-bottom: 0!important
	}
	
	input:not([type="checkbox"]):not([type="radio"])[disabled]
	, select[disabled], textarea[disabled]
	, input:not([type="checkbox"]):not([type="radio"])[readonly]
	, select[readonly], textarea[readonly]
	{
		background-color: var(--formCouleurBordure);	
	}
	
	.reassurances
	{
		display: flex;
		gap: 1em;
		padding-left: 0;
		font-size: .7em;
		
		--fa-primary-color: rgb(255, 255, 255);
		--fa-secondary-color: var(--couleurBTN); 
		--fa-secondary-opacity: 1;
	}
	
	@media (max-width: 768px) 
	{
		.reassurances{
			justify-content:center;
		}
	}
	
	.reassurances li
	{
		list-style: none;
	}
	
	.reassurances li i
	{
		color:var(--couleurBTN);
	}
	
	@media (max-width: 768px)
	{
		.reassurances li
		{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.reassurances li i
		{
			display: block;
		}
	}
}
[data-composant="zone-texte"]
{
	&{
		width: var(--maxWidth);
		margin: 0 auto;
		padding: var(--padding);
	}
	
	h1
	{
		margin-bottom: 50px;
		color: var(--couleurTitre);
	}
	
	
	
}
@view-transition{
	navigation:auto
}

@keyframes slide-out {
	to{
		translate: 100dvw;
	}
}

@keyframes slide-in {
	from{
		translate: 100dvw;
	}
}

::view-transition-group(vue)
{
	animation-duration: 1s;
	animation-timing-function: ease;
	mix-blend-mode: normal;
}

::view-transition-old(vue)
{
	animation-name: slide-out
}

::view-transition-new(vue)
{
	animation-name: slide-in
}

html,
body{

	height:100%;
	margin:0;

}

#_apps{
	&{
		background: var(--couleur1);
		padding: 10px;
	}
	
	& > header
	{
		&{
		}
		
		ul, li{ 
			margin: 0;
			padding: 0;
		}
		
		li{
			list-style: none;
		}
		.actif{
			background: red;
		}
		a{
			color: white;
		}
	}
	
	#corps{
		border-radius: var(--borderRadius);
		position: relative;
		height:calc(100vh - 20px);
	}
	
}


[data-composant='vue']{
	&{
		background: var(--couleurFond1);	
		border-radius: var(--borderRadius);
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		view-transition-name: vue

	}
	
	main
	{
		overflow-y: auto;
		flex: 1;
		
	}
	

	header, footer{
		background: var(--couleurClaire);
		height: 60px;
	}
}