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



html, body
{
	padding: 0;
	margin: 0;
}


html, .vue{width: 100vw;overflow: hidden;height: 100svh;}

body
{
	background: var(--backgroundBody);
	color:var(--couleurText);
	font-family: var(--fontBody);
	display: flex!important; 
	height: 100dvh; 
	width: 100dvw; 
}

body.chargement
{
	font-size: 3em;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%
}

a{color: var(--couleurPrincipale); text-decoration: none}

img{display: block}
.masquer{display: none!important}

.height100dvh{ height: 100dvh} 
.widthMax{width: 100%} 
.heightMax{ height: 100%} 

.overflowAuto{overflow: auto}

/*-----------------------------------------------------------------*/
/* ALIGNEMENT                              	            		   */
/*-----------------------------------------------------------------*/
.centrer{text-align: center;}
.alignCenter{ align-items: center}

.centrerCentrer
{ 
	display: grid;
	place-items: center; 
	width: 100%;
	height: 100%;
}

/*-----------------------------------------------------------------*/
/* PADDING	                              	            		   */
/*-----------------------------------------------------------------*/
.padding0{padding:0}
.padding10{padding:10}
.padding20{padding:20}
.padding30{padding:30}
.padding40{padding:40}
.padding50{padding:50}
.padding60{padding:60}
.padding70{padding:70}
.padding80{padding:80}
.padding90{padding:90}
.padding100{padding:100}

/*-----------------------------------------------------------------*/
/* MARGIN	                            		  	               */
/*-----------------------------------------------------------------*/
.margin0{margin:0}
.margin10{margin:10}
.margin20{margin:20}
.margin30{margin:30}
.margin40{margin:40}
.margin50{margin:50}
.margin60{margin:60}
.margin70{margin:70}
.margin80{margin:80}
.margin90{margin:90}
.margin100{margin:100}

/*-----------------------------------------------------------------*/
/* ROND		                              	            		   */
/*-----------------------------------------------------------------*/
.rond{aspect-ratio: 1/1; border-radius: 50%; background: red;}
.rond50{width: 50px;}




.btnAfter
{
	display: grid;
	cursor: pointer;
	align-items: center;
	gap: 1em;
	padding: 0px;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	transition: background .1s ease-in-out;
	margin: 2px 0px;
	background: rgba(255, 255, 255, 0);
	position: relative;
	z-index: 1;
	overflow: hidden;
	grid-template-columns: 50px 1fr 40px;
}

.btnAfter:after
{
	content: " ";
	display: block;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .3);
	border-radius: 10px;
	transition: transform .3s ease-in-out;
	transform: translateX(-100%);
	
}


.btnAfter:hover{text-decoration: none}
.btnAfter:hover:after
, .btnAfter.menuActif:after
, .btnAfter:has(.menuActif):after

, .btnAfter.menuParentActif:not(.ignorer-menu-parent-actif):after
, .btnAfter:has(.menuParentActif:not(.ignorer-menu-parent-actif)):after
{
  transform: translateX(0);
}


mon-textarea{height: 200px}

#apps { view-transition-name: vue}






@keyframes slide-from-right {
  from { transform: translateX(120%); }
}

@keyframes slide-to-left {
  to { transform: translateX(-10%); }
}

@keyframes slide-to-right {
  to { transform: translateX(120%); }
}

@keyframes slide-from-left {
  from { transform: translateX(-10%); }
}

/*
::view-transition-old(vue) {
  animation:  slide-to-left var(--duree-transition-view) ease;
}

::view-transition-new(vue) {
  animation: var(--duree-transition-view) slide-from-right ease;
}
*/
/*
:root.animation-retour::view-transition-old(vue) {
  animation: slide-to-right var(--duree-transition-view) ease;
  z-index: 2;
}

:root.animation-retour::view-transition-new(vue) {
  animation: slide-from-left var(--duree-transition-view) ease;
  z-index: 1;
}
	*/	
	
	/*
::view-transition-group(root) {
	overflow: hidden;
}

::view-transition-group(vue) {
	overflow: hidden;
	border-radius: 20px; 
}*/