:root {
	--ts-tab-height: 3em;

	--ts-tool-height: 3rem;
	--ts-tool-height-top: 3rem;

	--gap-auto-vertical: 1em;
	--gap-auto-horizontal: 1em;
	--taille-globale: 100%;
	--popup-titre-height: 4em;
	--popup-max-height: 80vh;

	/* Boutons popupDefaut / VALIDER 	TODO : à voir si couleur spécique*/
	--button-bg-def: var(--button-bg);
	--button-def-text: var(--button-color);
	--button-def-border: var(--shade-grey-1);
	--button-bg-suppr: #B03A2E;
	
	--titre_popup-error: var(--primary-red);

	--tooltip-bgcolor:#f4f4b0; /*var(--secondary-l-green);*/
	--tooltip-color:var(--primary-green);
}


/* SCREEN READER ONLY */
.no-display {
	color:#000 !important;
	background-color: white !important;
  }


.____________________blz_debug____________________{}

.blzDebugOff {
	display: none;
}

.blzDebug {
	position: fixed;
	border: 0px solid black;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 200px;
	z-index: 10000;
	overflow: auto;
	background-color: wheat;
}

.blzDebug input[type='button'],.debugSwitch input[type='button']{
	height: 32px;
	background-color: yellow;
}

.debugSwitch {
	border: 0px solid black;
	position: fixed;
	bottom: 0px;
	width: 60px;
	z-index: 10000;
	height: 32px;
}

.debugSwitch:hover {
	width: unset;
}

.debugSwitch input {
	width: auto;
}

.head {
	background-color: rgb(235, 179, 179);
}


/******************************************************************************************************************************
	modification de classe studio
******************************************************************************************************************************/

.____________________classes_studio____________________{}

body {
	font: var(--taille-globale) var(--stack);
}

div.panel {
	height: 100%;
	margin-top: 1em;
	padding: 1em;
	margin-bottom: unset;
	overflow: hidden;
}

div:has(> .tsTabBar.panel) {
	display: flex;
	gap: 1rem;
	height: 100%;
	overflow: hidden;

	.tsTabBar {
		width: 250px;
		padding: 0;
		display: flex;
		flex-direction: column;

		&:not(.collapsed) {
			height: auto !important;
		}

		.tabBarTitle {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			margin: 1.5rem 1rem;
			max-height: fit-content;
			min-height: fit-content;
			text-wrap: nowrap;

			.collapse {
				max-height: 24px;
				max-width: 24px;
				overflow: hidden;
			}

			h2 {
				font: normal 1.2rem var(--stack-h2);
				text-transform: uppercase;
				padding: 0 0.75rem;
			}
		}

		&.collapsed {
			width: calc(35px + 1.5rem);
			transition: width .2s ease;

			li:not(:has(i)), li span, i.fa-caret-right {
				display: none;
			}

			li.ischild > * {
				transform: translateX(0);
			}
		}

		ul {
			flex-direction: column;
			overflow-y: auto;
			overflow-x: hidden;
			height: auto;

			li {
				background-color: initial;
				border-radius: 0;
				margin: 0;
				text-align: left;
				font-size: 0.8rem;
				padding: .75rem;
				font-variation-settings: var(--fvs-regular);
				display: flex;
				align-items: center;
				gap: 1rem;
				border-left: 5px solid transparent;
				text-wrap: nowrap;
				overflow: hidden;
				min-height: fit-content;

				span {
					flex: 1;
				}

				i {
					font-size: 20px;

					&.fa-caret-right {
						transition: transform .2s ease-out, opacity .2s ease-out;
						transform: rotate(0);

						&:hover {
							opacity: 0.8;
						}

						&.is-expanded {
							transform: rotate(90deg);
						}
					}
				}

				&.ischild > * {
					transform: translateX(15px);
					transition: transform .2s ease-out;
				}

				&::after {
					display: none;
				}

				&:hover {
					background-color: var(--main-light);
					color: var(--body-text);
				}

				&.selected {
					background-color: var(--main-light);
					border-left: 5px solid var(--main-color);
					color: var(--body-text);
				}
			}
		}
	}

	> div:not(.tsTabBar) {
		flex: 1;
		overflow: hidden;
	}
}

.bar-group {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-grow: 2;
	gap: 0.5rem;
}


@media (min-width: 62.5rem) {

	div.panel {
		height: 100%;
		margin-top: 0px;
	}

	.top-content1 {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		margin-bottom: 1rem;
		border-bottom: 1px solid var(--shade-grey-1);
		border-left: 8px solid var(--shade-grey-1);

		h1 {
			padding: 0.2rem 0 0.25rem 0.75rem;
		}
	}

	.top-content2 {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		align-items: center;

		.wrapper-collapse-titre:has(>div.horizontal.close) h2 {
			display: none;
		}

		h2:not(.tag) {
			padding: 0.2rem 0 0.25rem 0.75rem;
			margin-bottom: 0px;

			small {
				display: block;
				font: 80% / 2 var(--stack);
        		text-transform: none;
			}
		}
	}

	div:has(> .tsTabBar.panel) .tsTabBar.collapsed h2 {
		display: none;	
	}

	.collapse.open.left, .collapse.close.right {
		transform: rotate(90deg);
		cursor: pointer;
	}

	.collapse.close.left, .collapse.open.right {
		transform: rotate(-90deg);
		cursor: pointer;
	}

	.collapse.open.top, .collapse.close.bottom {
		transform: rotate(180deg);
		cursor: pointer;
	}

	.collapse.close.top, .collapse.open.bottom {
		cursor: pointer;
	}

	.tsPage {
		height: calc(100% - var(--ts-tab-height));
	}

	.tsNoTabs > .tsPage {
		height: 100%;
	}

	/*
	onglet gestion tailles toolbar top, bottom et page
	*/

	.tsPage.hasTop.hasBottom>*:nth-child(1) {
		height: var(--ts-tool-height);
		width: 100%;
	}

	.tsPage.hasTop.hasBottom>*:nth-child(2) {
		height: calc(100% - 2 * var(--ts-tab-height) - 1 * var(--gap-auto-vertical));
		margin-bottom: var(--gap-auto-vertical);
		width: 100%;
	}

	.tsPage.hasTop.hasBottom>*:nth-child(3) {
		height: var(--ts-tool-height);
		width: 100%;
	}

	.tsPage.hasTop.noBottom>*:nth-child(1) {
		min-height: var(--ts-tool-height);
		width: 100%;
	}

	.tsPage.hasTop.noBottom>*:nth-child(2) {
		height: calc(100% - var(--ts-tab-height));
		width: 100%;
	}

	.tsPage.noTop.hasBottom>*:nth-child(2) {
		height: calc(100% - var(--ts-tab-height) - var(--gap-auto-vertical));
		margin-bottom: var(--gap-auto-vertical);
		width: 100%;
	}

	.tsPage.noTop.hasBottom>*:nth-child(3) {
		height: var(--ts-tool-height);
		width: 100%;
	}

	.tsPage.noTop.noBottom>div {
		height: 100%;
		width: 100%;
	}

	.tabLevel1.tsPage.hasTop.hasBottom>*:nth-child(1) {
		height: var(--ts-tool-height-top);
		width: 100%;
	}

	.tabLevel1.tsPage.hasTop.hasBottom>*:nth-child(2) {
		height: calc(100% - 2 * var(--ts-tab-height) - 2 * var(--gap-auto-vertical));
		width: 100%;
	}

	.tabLevel1.tsPage.hasTop.hasBottom>*:nth-child(3) {
		height: var(--ts-tool-height);
		width: 100%;
	}

	.tabLevel1.tsPage.hasTop.noBottom>*:nth-child(1) {
		height: var(--ts-tool-height-top);
		width: 100%;
	}

	.tabLevel1.tsPage.hasTop.noBottom>*:nth-child(2) {
		height: calc(100% - var(--ts-tool-height-top) - 2 * var(--gap-auto-vertical));
		width: 100%;
	}
}

/* -1px pour éviter que les 2 media queries min et max s'appliquent en même temps sur la taille exacte 62.5rem */
@media (max-width: calc(62.5rem - 1px)) {
	.top-content1 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		gap: .5rem;

		h1 {
			padding: 0.2rem 0 0.25rem 0.75rem;
			border-bottom: 1px solid var(--shade-grey-1);
			border-left: 8px solid var(--shade-grey-1);
		}

		.bar-group {
			margin-bottom: 0 !important;
		}
	}

	.top-content2 {
		display: flex;
		gap: 1rem;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		&:not(:has(div.collapse)) {
			margin-bottom: 1rem;
		}

		h2 {
			padding: 0;
			border: none;
			margin-top: .5rem;
			margin-bottom: .5rem;

			small {
				display: block;
				font: 80% / 2 var(--stack);
        		text-transform: none;
			}
		}
	}

	div:has(> .tsTabBar.panel) {
		flex-direction: column;

		.tsTabBar {
			width: 100% !important;

			&.collapsed {
				height: 72px;
			}
		}
	}

	.collapse.open {
		transform: rotate(180deg);
		cursor: pointer;
	}

	.collapse.close {
		cursor: pointer;
	}

	div.panel {
		margin-top: .5rem;
		padding-top: .5rem;
	}
}

/* visu etiquettes (adminRef): scrollable */
div.visuEtiq{
	overflow: auto;
}

.card {
	background-color: initial;

	&.active {
		border: none;
	}
}

li.card > .wrappedcard, li.card:not(:has(> .wrappedcard)) {
	transform: scale(.97);
	transition: transform .2s ease-out;
	border-radius: .25rem;
	position: relative;
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	background-color: var(--card-bg);

	&::marker {
		content: '';
	}

	&:hover {
		transform: scale(0.99);
	}
}

li.card > .wrappedcard {
	padding: 1rem;

	&.collapsed {
		display: none;
	}
}

ul:has(li.card > .wrappedcard) {
	padding-left: 7px;
}

li.card:has(> .wrappedcard) {
	border-left: 1px solid var(--shade-grey-2);
	position: relative;
	padding-right: 0;
	padding-bottom: 0;

	&:first-of-type::before {
		content: '';
		width: 6px;
		height: 6px;
		border-top: 1px solid var(--shade-grey-2);
		border-left: 1px solid var(--shade-grey-2);
		position: absolute;
		top: 1px;
		left: -4px;
		transform: rotate(45deg);
	}

	&:has(>.collapsed):not(:has(> .evtDate)) {
		padding: 0;
		height: 0;

		&::marker {
			content: '';
		}
	}

	.evtDate {
		width: fit-content;
		padding: .25rem .25rem 1rem;
		font-variation-settings: var(--fvs-bold);
		display: flex;
		gap: .25rem;
		align-items: center;
		cursor: pointer;

		&:hover + .toggleDate {
			background-color: var(--shade-grey-3);
		}

		i {
			transition: transform .1s ease-out;

			&.caret-down {
				transform: rotate(90deg);
			}
		}

		.nbEvents {
			border-radius: 50%;
			display: flex;
			place-content: center;
			place-items: center;
			width: 1rem;
			height: 1rem;
			background-color: var(--tag-info);
			font-size: .7rem;
			margin-left: .25rem;
			color: var(--body-text);
		}
	}

	.toggleDate {
		position: absolute;
		left: -6px;
		top: 22px;
		height: 11px;
		width: 11px;
		border-radius: 50%;
		border: 1px solid var(--shade-grey-2);
		background-color: var(--primary-white);
		transition: background-color .1s ease-out;
		cursor: pointer;

		&:hover {
			background-color: var(--shade-grey-3);
		}
	}

	&.active > .wrappedcard {
		animation: scaleBounce 0.2s ease-in-out;
		transform: scale(0.99);
		border: 1px solid var(--alert);
	}
}

li.card:not(:has(> .wrappedcard)) {
	margin-bottom: 1rem;

	&:has(.icon-vaccin-container) {
		overflow: hidden;
	}

	div.icon-vaccin-container i {
		position: absolute;
		top: -2rem;
		right: -3rem;
		display: block;
		color: lightgrey;
		opacity: .5;
		font-size: 6.5rem;
	}

	&.active {
		animation: scaleBounce 0.2s ease-in-out;
		transform: scale(0.99);
		border: 1px solid var(--alert);
	}
}

@keyframes scaleBounce {
	0% {
		transform: scale(0.99);
	}
	70% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.99);
	}
}

li.card+li.card {
	margin-top: 0px;
}

.tag {
	padding: .25rem .5rem;
	border-radius: 1rem;
}

.tag a {
	color: black;
}

.tag2 {
	padding-top: 1em;
}

.tag2+.tag2 {
	border: 0px;
}

/*****************************************************************************************************************************
	tabsheet
	--------
*****************************************************************************************************************************/

.____________________tabsheet____________________{}

.tabLevel1.tsPage {
	padding: 1rem;
}

.tabLevel1 > div > .bar-group {
	margin-bottom: 1em;
}

.vertical.collapsed>.tsTabBar {
	display: none;
}

.vertical.collapsed>.tsPage>*:nth-child(1) {
	display: unset;
}

.vertical.collapsed>.tsPage>*:nth-child(2),
.vertical.collapsed>.tsPage>*:nth-child(3),
.vertical.collapsed>.tsPage>*:nth-child(1)>h2,
.vertical.collapsed>.tsPage>*:nth-child(1)>h3,
.vertical.collapsed>.tsPage>*:nth-child(1)>.bar-group {
	display: none;
}

.collapsed>.tsPage>*:nth-child(1) {
	height: var(--ts-tab-height);
	width: 100%;
}

.tsTabPage .tsTabBar .disabled{
	pointer-events: none;
	opacity: 0.5;
}

.bar-group button[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.tsTabBar {
	min-height: var(--ts-tab-height);
	width: 100%;
}

.tsPage .noTitle {
	display: none;
}


.tabLevel2 .tsTabPage,
.tabLevel3 .tsTabPage {
	overflow: auto;
	padding: 5px;
}

div.tsTabBar ul {
	display: flex;
	flex-direction: row;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

div.tsTabBar li {
	/*copie de fieldset.switch label*/
	display: block;
	position: relative;
	text-align: center;
	padding: 0.5rem 1rem;
	margin-right: 0.5rem;
	margin-bottom: 14px;
	border-radius: 3rem;
	background-color: var(--shade-grey-3);
	cursor: pointer;
}

div.tsTabBar li.selected, div.tsTabBar li:hover {
	/*copie de fieldset.switch input:checked + label*/
	background-color: var(--switch-bg-checked);
	color: var(--switch-text-checked);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

div.tsTabBar li.selected::after {
	content:'';
	display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    bottom: -17px;
    left: calc(50% - 12px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23026A7F'%3E%3Cpath d='M12 16L6 10H18L12 16Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

fieldset.switch {
	margin-bottom: 0rem;

	label {
		white-space: nowrap;
	}
}

h2 {
	margin-bottom: 0rem;
}

h2:focus-visible {
    outline: 0px solid white;
}

.top-content2 {

	h2 {
		max-width: 75%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wrapper-collapse-titre {
		display: flex;
		gap: .5rem;
		align-items: center;
		padding: 0.25rem;

		h2 {
			max-width: 100%;
		}

		&:has(>div.horizontal.close) + .bar-group {
			display: none;
		}
	}
}



/*****************************************************************************************************************************
	Navigation : Worskpaces, barres supérieure/inférieure et Ariane
	--------
*****************************************************************************************************************************/

.____________________blzNavigation____________________ {}


.navigation {
	padding: 0 1rem;

	ul {
		display: inline-block;
		list-style-type: none;
		padding: 0px;
		margin: 0px;

		li {
			float: left;
			display: flex;
			align-items: center;
			padding: 0px 5px;
			margin: 0px;
			cursor: pointer;
		}
	}
}

nav td {
	padding: .5rem;
}

/* texte en accessTextuel */
nav button.ws{
	color:var(--primary-green);
	aspect-ratio: initial;
}

p.site-identity {
	background-color: initial;
	display: flex;
	align-items: center;
	cursor: help;
}

.buttons-bar {
	flex-wrap: nowrap;
	
	.buttons-bar-separator {
		align-self: stretch;
		border-right: 1px solid var(--border-grey);

		&:first-child, &:last-child {
			display: none;
		}
	}
}


/******************************************************************************************************************************/
/******				  Popups	  			*******/
/******************************************************************************************************************************/
.____________________blzPopup____________________ {}

/*		-----------------------		*/
/* 		-- générique popups	 -- 	*/
/*		-----------------------		*/


div.umModal {
	/*  zone "calque" pour inhiber l'arrière plan  */
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	cursor: wait;
}

.rotating {
	animation: spinner 3s linear infinite; 
}

#waitConteneur {
	z-index: 9999;
	display: flex;
	place-items: center;
	place-content: center;
}

div.blzPopup {
	/* conteneur externe popup */
	overflow: hidden;
	position: absolute;
	/* placé centré par défaut */
	left: 50%;
	top: 50%;
	background-color: white;
	padding: 0.5rem;
	animation: bouncyFadeIn .2s ease-out;
	margin-left: 0 !important;
	margin-top: 0 !important;
	transform-origin: top left;

	&.prompt, &.confirm, &.error, &.system, &.message {
		width: fit-content !important;
		max-width: 80vw;
		height: fit-content !important;
		max-height: var(--popup-max-height);
		text-wrap: pretty;

		div.tsTabPage {
			overflow-y: auto;
			max-height: calc(var(--popup-max-height) - var(--popup-titre-height) - var(--ts-tool-height) - 3rem);
			padding: 0;
			margin: 5px;
		}

		.blzToolBar {
			margin-top: 2rem;
			display: flex;

			.bar-group {
				align-items: flex-end;

				.buttons-bar {
					flex-direction: row-reverse;
				}
			}
		}
	}

	&.fade-out {
		animation: bouncyFadeOut 0.2s ease-out;
		animation-fill-mode: forwards;
	}
}

@media (min-width: 44rem)
{
	div.blzPopup {
		transform: translate(-50%, -50%);
		box-shadow: #00000033 0px 0px 20px, #00000033 0px 0px 20px, #00000033 0px 0px 20px, #00000033 0px 0px 20px;
	}
}

@media (max-width: calc(44rem - 1px))
{
	div.blzPopup {
		inset: 0;

		&.prompt, &.confirm, &.error, &.system, &.message {
			max-width: 100dvw !important;
			max-height: 100dvh !important;
			width: 100dvw !important;
			height: 100dvh !important;
		}

		div.blzTabsheet {
			overflow: auto;
			margin-top: 1rem;
			padding-bottom: 2rem;
		}
	}

	/* Si une popup est ouverte on désactive le scroll en background */
	html:has(div.blzPopup:not([style*="display: none"])),
	html:has(#waitConteneur:not([style*="display: none"])) {
		overflow: hidden;
	}
}

@media (max-width: 22.6rem) {
	.bar-group {
		flex-direction: column;
	}

	.top-content2 h2 {
		align-self: flex-start;
	}
}

@keyframes bouncyFadeIn {
	0% {
    	transform: scale(0.8) translate(-50%, -50%);
     	opacity: 0;
   	}
   	50% {
    	transform: scale(1.01) translate(-50%, -50%);
    	opacity: .99;
   	}
	100% {
    	transform: scale(1) translate(-50%, -50%);
		opacity: 1;
   	}
}

@keyframes bouncyFadeOut {
   	0% {
		opacity: 1;
		transform: scale(1) translate(-50%, -50%);
   	}
   	100% {
		opacity: 0;
		transform: scale(0) translate(-50%, -50%);
   	}
}

@keyframes fadeout {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes spinner {
	to { transform: rotate(360deg); }
}

div.pnSaveOK {
	animation: .2s ease-out .8s fadeout;
}

div.blzPopup>div.popupTitre {
	border-top: 5px solid var(--shade-grey-1);
	padding-top: 1em;
	padding-bottom: 1em;
	height: var(--popup-titre-height	);
}

div.blzPopup.error>div.popupTitre {
	color :var(--titre_popup-error);
}

div.blzPopup.system  .tErrSys {
	color :var(--titre_popup-error);
	font-weight: bold;
}

div.blzPopup>div:nth-child(2){
	height: calc(100% - var(--popup-titre-height));
}

button.popupCancel, button.ANNULER {
    background-color: var(--button-bg-reset);
    color: var(--button-reset-text);
    border: 1px solid var(--button-reset-border);
}

button.popupDefaut, button.VALIDER {
	background-color: var(--button-bg-def);
    color: var(--button-def-text);	
    border: 1px solid var(--button-def-border);
	/*text-decoration: underline;==> non conforme RGAA*/
}

/****************************************************************/
/************* ddMenu - Drop Down Menu **************************/
/****************************************************************/

._____________________BlzDdMenu_____________________________ {}

div.ddMenu {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #FFF;
	border: 1px solid black;
}

div.ddMenu .back{
		display: none;
}

@media (max-width: 44rem) {
	div.ddMenu {
		top: 0px !important;
		left: 0px !important;
		bottom: 0px !important;
		right: 0px !important;
	}

	div.ddMenu>ul {
		width: 100% !important;
	}
	div.ddMenu .back{
		display: block;
	}

	#customTooltip{
		display: none;
		visibility: hidden;
	}

}

div.ddMenu>ul {
	float: left;
	list-style: none;
	z-index: 50;
	cursor: default;
	margin: 0px;
	padding: 5px 0px 5px 0px;
	border-right: 1px solid #CCC;
}

div.ddMenu.visible {
	display: block;
}

div.ddMenu>ul>li {
	display: flex;
	justify-content: start;
	align-items: center;
	padding: .3em;
	
	border-left: 5px solid white;
}

div.ddMenu>ul>li a {
	font-size: 1.2em;
	color: var(--body-text);
	font-variation-settings: "wght" 400;
	margin-right: 1.75rem;
	


}

div.ddMenu>ul>li>i {
	/* icone triangulaire vers le bas ou la droite */
	position: absolute;
	right: 1em;
}

div.ddMenu>ul>li.back>i {
	/* icone triangulaire vers le bas ou la droite */
	position: unset;
	right: unset;
	margin-right: 1em;
}

div.ddMenu>ul>hr {
	border: 0;
	height: 1px;
	background-color: #e1e1e1;
	margin: 0px 5px;
}
div.ddMenu>ul>hr.hidden {
	display: none;
}
div.ddMenu>ul>li.hidden {
	display: none
}

div.ddMenu>ul>li.disabled>a {
	font-style: italic;
}

div.ddMenu>ul>li.over {
	background-color: var(--main-light);
	border-left: 5px solid var(--main-color);
	color: var(--body-text);

}

div.ddMenu>ul>li.selected {
	background-color: #0F0;
	color: #000;
}

div.ddMenu>ul>li.ddIndent {
	padding-left: 25px
}

div.ddMenu>ul>li.ddTitre {
	font-weight: bold;
	margin-left: -5px;
}



/******************************************************************************************************************************
grid
********************************************************************************************************************************/

.____________________blzGrid____________________ {}

.gridTopSwap {
	display: flex;
	flex-direction: row-reverse;
	flex-grow: 1;
}

table.blzGrid td,
table.blzGrid th {
	white-space: nowrap;text-overflow: ellipsis;
}

table.blzGrid tbody tr {
	transition: background-color 0.2s ease-in-out;
	cursor: pointer;

	&.gdRowOdd {
		background-color: var(--table-odd-bg);
	}

	&.gdRowEven {
		background-color: var(--table-even-bg);
	}

	&:hover {
		background-color: #027A6F44;
	}

	&.selected {
		background-color: #027A6F88;

		td {
			background-color: initial;
		}
	}
}

.grid.tools-on>div:nth-child(1) {
	height: var(--ts-tab-height);
}

.grid.tools-on>div:nth-child(2) {
	height: calc(100% - var(--ts-tab-height));
	display: block;
	overflow-y: auto;
}

.grid.tools-on>div:nth-child(2)>table {
	width: 100%;
}

.grid.tools-on>div:nth-child(3) {
	height: calc(100% - var(--ts-tab-height));
}

.grid.tools-on>ul:nth-child(4) {
	height: calc(100% - 2*var(--ts-tab-height) - 1em);
}

.grid.tools-off>div:nth-child(1) {
	height: 0px;
}

.grid.tools-off>div:nth-child(2) {
	height: 100%;
	display: block;
	overflow-y: auto;
}

.grid.tools-off>div>table {
	width: 100%;
}

.grid.tools-off>div:nth-child(3) {
	height: 100%;
	padding-right: 1em;
}


/* masquer tout sour les outils si le dataset est vide mode grid ou card*/
.grid.hideGridOnEmpty>*:nth-child(2),
.grid.hideGridOnEmpty>*:nth-child(3),
.grid.hideGridOnEmpty>*:nth-child(4),
.grid.hideGridOnEmpty>*:nth-child(1) .gridTopSwap{
	visibility:hidden
}


/* indentation par niveau (ex arbre en admin annuaire) */
table.blzGrid > tbody > tr > td > div.gdLevel_0{	
    font-weight:bold;							
}
table.blzGrid > tbody > tr > td > div.gdLevel_1{
    padding-left:2em;				/*(n)*/
}
table.blzGrid > tbody > tr > td > div.gdLevel_2{
    padding-left:4em;				/*(n)*/
}
table.blzGrid > tbody > tr > td > div.gdLevel_3{
    padding-left:6em;				/*(n)*/
}
table.blzGrid > tbody > tr > td > div.gdLevel_4{
    padding-left:8em;				/*(n)*/
}
table.blzGrid > tbody > tr > td > div.gdLevel_5{							
    padding-left:10em;				/*(n)*/
}

/* style de cases  */
table.blzGrid > tbody > tr > td > div.gdItal_0{
  font-style: italic;					
}
table.blzGrid > tbody > tr > td > div.gdBold_1{																
  font-weight: bold;								
}

/*
correctif tri à gauche
*/

table.blzGrid th {
	padding: unset;
	font-weight: normal;
}

.grid th,
.grid td {
	overflow: hidden;
	max-width: 0px;

	&:has(.cellTitle) {
		padding: 0;

		.cellTitle {
			padding: 1rem 0.5rem;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	div {
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: 6.5rem;
	}
}

/* centrage des titres */
table.blzGrid th>button, table.blzGrid th {
	text-align:center;
}

table th > button,table th > button[aria-sort=ascending] ,table th > button[aria-sort=descending]  {
    background-image: unset;
    background-repeat: unset;
    background-position: unset;
}

table.blzGrid th > button{
	display: flex;
	padding: .5rem .3rem;
}

table.blzGrid th > button:before,table.blzGrid th > button[aria-sort=ascending]:before ,table.blzGrid th > button[aria-sort=descending]:before  {
	width:16px;
	height: 16px;
    content:' ';
    background-color: var(--body-bg);
	background-repeat: no-repeat;
}

table.blzGrid th.gdSort > button:before {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5664 10.2003L10.9727 11.7941V2.85138H10.0872V11.7941L8.49349 10.2003L7.8737 10.8201L10.5299 13.4764L13.1862 10.8201L12.5664 10.2003ZM4.33203 2.85138L1.67578 5.50763L2.29557 6.12742L3.88932 4.53367V13.4764H4.77474V4.53367L6.36849 6.12742L6.98828 5.50763L4.33203 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
}

table.blzGrid th.gdSort > button[aria-sort=ascending]:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.55295 2.85138L4.8967 5.50763L5.51649 6.12742L7.11024 4.53367V13.4764H7.99566V4.53367L9.58941 6.12742L10.2092 5.50763L7.55295 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
}
table.blzGrid th.gdSort > button[aria-sort=descending]:before {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.55295 10.7386L6.2092 8.08234L5.58941 7.46254L3.99566 9.05629L3.99566 0.113586L3.11024 0.113586L3.11024 9.05629L1.51649 7.46254L0.896698 8.08234L3.55295 10.7386Z' fill='%23707070'/%3E%3C/svg%3E");
	background-position-y: 3px;
    background-position-x: 3px;
}
table.blzGrid th > button[aria-sort=ascending] ,table.blzGrid th > button[aria-sort=descending] {
	text-decoration: underline;
	color: var(--body-text);
}


/*
correctif filtre
*/

.gdFilterRow label, .cardFilters label{
	position: absolute;
	top: -100px;
	left: -100px;
	font-size: 0px;
}

table.blzGrid thead tr {
	background-color: transparent;
}

table.blzGrid thead tr td {
	background-color: transparent;
	border: 1px dotted lightgray;
}

.gdFilterRow td {
	padding: 0px;
}

.gdFilterRow td div>*:not(.resetFilter) {
	box-sizing: border-box;
	padding: 0.2em;
	margin: 0.2em;
	background-color: var(--body-bg);
	min-height: 2em;
	border: 1px solid var(--body-text);
	width: calc(100% - 0.4em);
}

.gdFilterRow td div input:focus-visible {
	outline: 2px solid var(--main-color);
	outline-offset: 1px;
}

.gdFilter {
	z-index: 5;
}

/* bouton de grille (ex importer dans l'adminQuest)*/
table.blzGrid > tbody > tr > td > div.boutonGrille {
	background-color: var(--button-bg);
    color: var(--button-color);	
	border: 1px solid var(--button-color);
	border-radius: 0.2em;
	cursor: pointer;
	padding: 5px;
}
table.blzGrid > tbody > tr > td > div.boutonGrille:hover,
table.blzGrid > tbody > tr > td > div.boutonGrille:active{
	border: 1px solid var(--button-bg);
}

/*
 les cartes des grid
 */
div.hPanel .gridCards {
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	justify-content: space-around;
}

div.hPanel .gridCards1 {
	display: block;
	overflow-y: auto;
}


@media screen and (max-width: 1600px) {
	div.hPanel .gridCards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 1360px) {
	div.hPanel .gridCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gridTop {
	display: flex;
	flex-basis: auto;
	align-content: flex-start;
	align-items: center;
}

.gridTopTitre {
	flex-grow: 1;
}

.gridTopTitre.off,
.gridTopSwap.off {
	display: none;
}

.gridFilter {
	input, select {

		&:focus-visible {
			border: none;
			outline: 2px solid var(--main-color);
			outline-offset: 1px;
		}
	}

	>input + a{
		margin-left: -1.75em;
		cursor: pointer;
		display:none;
		background-color: white;
		color:black;
	}

	>input:not(:placeholder-shown) + a{
		display: unset;
	}
}

.cardFiltersSort {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .5rem;
	height: fit-content !important;
	padding: .25rem;
	padding-top: calc(0.25rem + 5px);
	background-color: var(--primary-white);
	position: sticky;
	top: -5px;
	z-index: 1;

	.cardFiltersSortTitle {
		font-weight: bold;
		text-transform: uppercase;
		font-size: 1.1rem;
		width: 5rem;
	}

	.cardSort {
		display: flex;
		align-items: center;
		gap: .5rem;

		.cardSortContainer {
			display: flex;
			gap: .5rem;
			border-radius: 1rem;
			background-color: var(--card-bg);

			button {
				text-decoration: underline;
				color: var(--body-text);
				display: flex;
				padding: .5rem .3rem;
				background-color: var(--card-bg);
				border: none;

				&[aria-sort="ascending"]::before {
					background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.55295 2.85138L4.8967 5.50763L5.51649 6.12742L7.11024 4.53367V13.4764H7.99566V4.53367L9.58941 6.12742L10.2092 5.50763L7.55295 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
				}

				&[aria-sort="descending"]::before {
					background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.55295 10.7386L6.2092 8.08234L5.58941 7.46254L3.99566 9.05629L3.99566 0.113586L3.11024 0.113586L3.11024 9.05629L1.51649 7.46254L0.896698 8.08234L3.55295 10.7386Z' fill='%23707070'/%3E%3C/svg%3E");
					background-position-y: 3px;
					background-position-x: 3px;
				}

				&::before {
					width: 16px;
					height: 16px;
					content: ' ';
					background-color: var(--card-bg);
					background-repeat: no-repeat;
					background-image: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5664 10.2003L10.9727 11.7941V2.85138H10.0872V11.7941L8.49349 10.2003L7.8737 10.8201L10.5299 13.4764L13.1862 10.8201L12.5664 10.2003ZM4.33203 2.85138L1.67578 5.50763L2.29557 6.12742L3.88932 4.53367V13.4764H4.77474V4.53367L6.36849 6.12742L6.98828 5.50763L4.33203 2.85138Z' fill='%23707070'/%3E%3C/svg%3E");
				}
			}
		}
	}

	.cardFilters {
		display: flex;
		gap: .5rem;
		align-items: center;

		.cardFiltersContainer {
			display: flex;
			gap: .5rem;
			flex-wrap: wrap;
			align-items: center;

			input, select {
				padding: .5rem;
				border-radius: 5px;
				border: 1px solid var(--shade-grey-1);

				&:focus-visible {
					border: none;
					outline: 2px solid var(--main-color);
					outline-offset: 1px;
				}

				option {
					padding: .5rem;
				}
			}
		}
	}
}

div.eltTable div.eltLigne {
	display: grid !important;
	grid-auto-flow: column;
  	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.onglet.legend {
	display: none;
}

div.eltTableau, div.eltTable  { /* , .quest > fieldset>*:nth-child(3) - ça décale la 2e PJ en historique evt, et en quest, je ne vois pas de cas où on a un 3e child  */
	width: 100%;
}



table:not(.cards) .gridFilter a::after {
    content: unset;
    position: unset;
    display: unset;
    width: unset;
    height: unset;
    top: unset;
    left: unset;
    background-image: unset;
}

.gdFilterPeriode{
	position: absolute !important;
	display: none;
	height: unset !important;
	width: 200px !important;
	margin: unset !important;
	padding: unset !important;
	min-height: unset !important	;
}

.gdFilterPeriode.actif {
	display: block;
}

.gdFilterPeriode div{
	padding: 0.25em !important;
	display: grid;
	grid-template-columns: 40px 150px;
}

.gdFilterPeriode fieldset{
	border: 0 !important;
}


.gdFilterPeriode input{
	width:7em;
}

.gdFilterPeriode label{
	padding: 0 !important;
	position:unset;
	font-size: unset;
	border: 0 !important;
}

.gdFilterPeriode span{
	border: 0 !important;
	padding: 0 !important;
}

.gdFilterPeriode .calendarAlone{
	margin-top:0.3em;
}

.______couleur_icones______ {}

.fa_green, .fa_red, .fa_gray {	
	font-weight: bold;
	padding-left: 1em;
}
.fa_green{	
    color:green;		
}
.fa_red{	
    color:red;		
}
.fa_gray{	
    color:grey;		
}
.fa.fa_inline{
	padding-left: 1em;
	display:inline;
}



/*******
agenda
*/


div.agenda table.planning {

	tr.ps td {
		width: unset;
	}
}

div.agenda thead {
	background-color: white;
	position: sticky;
	top: 0;
	z-index: 400;

}

div.agenda tbody {
	tr:first-of-type td:first-of-type {
		border-bottom: 1px dashed var(--shade-grey-2);
	}
}

.____________________labels____________________ {}
label.w5,
.labelLike.w5 {
	width: 5em;
}

label.w6,
.labelLike.w6 {
	width: 6em;
}

label.w7,
.labelLike.w7 {
	width: 7em;
}

label.w8,
.labelLike.w8 {
	width: 8em;
}

label.w9,
.labelLike.w9 {
	width: 9em;
}

label.w10,
.labelLike.w10 {
	width: 10em;
}

label.w11,
.labelLike.w11 {
	width: 11em;
}

label.w12,
.labelLike.w12 {
	width: 12em;
}

label.w13,
.labelLike.w13 {
	width: 13em;
}

label.w14,
.labelLike.w14 {
	width: 14em;
}

label.w15,
.labelLike.w15 {
	width: 15em;
}

label.w16,
.labelLike.w16 {
	width: 16em;
}

label.w17,
.labelLike.w17 {
	width: 17em;
}

label.w18,
.labelLike.w18 {
	width: 18em;
}

label.w19,
.labelLike.w19 {
	width: 19em;
}

label.w20,
.labelLike.w20 {
	width: 20em;
}

label.w21,
.labelLike.w21 {
	width: 21em;
}

label.w22,
.labelLike.w22 {
	width: 22em;
}

label.w23,
.labelLike.w23 {
	width: 23em;
}

label.w24,
.labelLike.w24 {
	width: 24em;
}

label.w25,
.labelLike.w25 {
	width: 25em;
}

label.w26,
.labelLike.w26 {
	width: 26em;
}

label.w27,
.labelLike.w27 {
	width: 27em;
}

label.w28,
.labelLike.w28 {
	width: 28em;
}

label.w29,
.labelLike.w29 {
	width: 29em;
}

label.w30,
.labelLike.w30 {
	width: 30em;
}

label.w31,
.labelLike.w31 {
	width: 31em;
}

label.w32,
.labelLike.w32 {
	width: 32em;
}

label.w33,
.labelLike.w33 {
	width: 33em;
}

label.w34,
.labelLike.w34 {
	width: 34em;
}

label.w35,
.labelLike.w35 {
	width: 35em;
}

label.w36,
.labelLike.w36 {
	width: 36em;
}

label.w37,
.labelLike.w37 {
	width: 37em;
}

label.w38,
.labelLike.w38 {
	width: 38em;
}

label.w39,
.labelLike.w39 {
	width: 39em;
}

label.w40,
.labelLike.w40 {
	width: 40em;
}

.scrollableY {
	overflow-y: auto;
}

.questRun .elt.puce1>*:nth-child(3) {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.questRun:not([id^="questDossierListe"]) .elt.puce2>*:nth-child(3) {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

.questRun .elt.puce2>div.legend {
	display: none;
}

.questRun .elt.puce2.rg_section>*:nth-child(3) {
	display: block;
	flex-direction: unset;
	flex-wrap: unset;
}

.questRun .elt.puce3.rg_section>*:nth-child(3) {
	display: block;
	flex-direction: unset;
	flex-wrap: unset;
}

.NO_RG .elt.puce2 {
	border: 0px;
	padding: 0px;
	margin: 0px;
}

.elt .inRadio.inText {
	flex-wrap: nowrap;
}

.NO_RG .elt select {
	margin: 0px;
	padding: 5px;
	border: 1px solid gray;
}
.titreNonVisible
{
	display: none;
}
.enDessous{
	display:block;						
	float:none;	
}

.elt textarea {
	width: 100%;
	
}




/****************************************************************/
/************* autocomplete *************************************/
/****************************************************************/

.____________________autocomplete____________________ {}

div.autoComplete {
	position: relative;
	background-color: #FFF;
	border: 1px solid #000;
	top: 0px;
	left: 0px;
	z-index: 20;
}

div.autoCompleteCmd {
	/* les boutons */
	display: block;
	height: 15px;
}

div.autoCompleteCmd>a {
	margin: 2px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 75%/1 var(--stack);
	text-align: center;
	color: var(--button-color);
	background-color: var(--button-bg);
	padding: 0.75rem;
	border-radius: 0.2em;
	border: 1px solid var(--button-bg);
	cursor: pointer;
}

div.autoCompleteCmd>a.autoCompleteAction {
	/* bouton d'action (ex: recherche étendue)*/
	float: left;
}

div.autoCompleteCmd>a.autoCompleteRaz {
	/* bouton d'effacement */
	float: right;
}

div.autoCompleteData

/* lignes de données : même couleurs que la grille*/
	{
	width: 100%;
	height: 150px;
	overflow-Y: auto;
	overflow-X: hidden;
	clear: both;
}

div.autoCompleteData>a {
	width: 2000px;
	padding: .25rem 2px;
	display: block;
	font-variation-settings: var(--fvs-regular);
}

div.autoCompleteData a,
div.autoCompleteData a:visited {
	color: #000;
	text-decoration: none;
}

div.autoCompleteData a:nth-child(even) {
	background: var(--table-even-bg);
}

div.autoCompleteData a:nth-child(odd) {
	background: var(--table-odd-bg);
}

div.autoCompleteData a.active,
div.autoCompleteData a:hover {
	background-color: var(--button-bg);
	color: white;
}

button {
	transition: opacity 0.2s ease-in-out;
	gap: .5rem;
}

.tooltip {
	position: absolute;
	background-color: #f5f7fa;
	color: #1f2937;
	color: var(--tooltip-color);
	padding: 0.25rem;
	border-radius: 0.25rem;
	border: 3px solid #90b5e9;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	z-index: 21;
	opacity: 0;
	transition: opacity 0.2s ease;
	word-break: break-all;
}

@media (max-width: 44rem) {
	.tooltip{
		visibility: hidden;
	}
	
}

.______addons_de_questionnaire______ {}


div.elt .addon_multiselect_box {
	color: black;
	background-color: rgb(230, 230, 230);
	padding: 3px;

    span {
        display: inline-block;
        background-color: lightgray;
        color: black;
        border-radius: 5px;
        padding: 5px;
        margin-right: 5px;
        cursor: pointer;
        margin-bottom: 2px;

        &::after {
            content: "X";
            color: black;
            font-weight: bold;
            margin-left: 10px;
            transition: color 0.2s ease-out;
        }
    }

    &.visu {
        margin: 0px;
	    padding: 0px;
	    background-color: transparent;

        i {
            display: none;
        }

        span::after {
            content: "";
	        margin-left: 0px;
        }

        .addon_multiselect_view {
            border:0px;
	        background-color:transparent;
        }
    }
}

.addon_multiselect_view{
	border: 1px solid lightgray;
	padding: 2px;
	background-color:white;
}

.addon_multiselect_filter{
	background-color: var(--primary-white);
	border: 1px solid lightgray;
	padding: 5px;
	margin-top: 5px;
    width: 100%;

    input {
        width: 100%;
    }
}

.boxMultiSel > div {
    display:flex;
    align-items: center;
    gap: .25rem;
}

.______admin_annuaire______ {}

.annuaireProfil{
	font-size:0.8em;
	margin-left: 0.5em;
}

/*
suclassement font-awesome, pour positionner uniquement sur l'élément before et non sur l'élément complet
*/

.bfa:before{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-right:0.2em;
}

.___________SPECIFIQUE_NOVA___________________ {}

.______Interfaces______ {}


/* colonne 8 : Etat de l'import */
td:has(div.interface_etat_0){
	background-color: var(--st-complete);
}
td:has(div.interface_etat_1){ /* ano dossier */
	background-color: var(--st-late);
}
td:has(div.interface_etat_2){ /* doublon */
	background-color: var(--st-todo);
}
td:has(div.interface_etat_3), td:has(div.interface_etat_4){ /* épisode ou secto  */
	background-color: var(--st-sector);
}
td:has(div.interface_etat_5){ /* (SGR) en attente  */
	background-color: var(--st-onhold);
}

.______correction_studio______ {}
@media print {

	.bar-group{
		display:none !important;
	}

    div.along {
        display: grid;
        grid-template-columns: 20rem auto;
        gap: 2rem;
        
        & legend {padding: 0;}

        & ul {
            flex-direction: row;
        }
    }
    
    dl.data-list.simple div {
        display: grid;
        grid-template-columns: 20rem auto;
        gap: 0.75rem 1rem;
    }
    
    dl.data-list div.data-level-2 dd {
        padding-left: 0;
    }
}


@media screen and (min-width: 50rem) {

    dl.data-list.simple div.elt-PUCE {
        display: block;
        grid-template-columns: unset;
        gap: unset;
    }
}

fieldset.choice {

    & legend {
        font-variation-settings: normal !important;
		color: var(--body-text);
    }
}

/* espace après les groupes : 2rem vers 0px */
.data-group {
    margin-bottom: 0px;
}

/* bouton de suppression : pour le moment même couleur que secondary */

button.suppr {
	color: var(--primary-white);
	background-color: var(--button-bg-suppr);
    border: 1px solid var(--button-sec-border);
}

.elt.puce + dl {
	margin-top : 1em;
}

.center {
	display: flex;
	place-items: center;
	place-content: center
}

/*bouton sans déco, non border, no background */
button.noDeco {
	background: none;
	border: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/*
popup : bouton de fermeture
*/
.bt-close i:before{
	margin-left: -0.25rem;
}

/* Ces 2 wrappers servent à définir un container et ainsi appliquer des media-queries sur la taille du container */
.wrapper1-toolbar-top {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	height: fit-content;

	.wrapper2-toolbar-top {
		container-type: inline-size;
		min-width: 0;
		grid-column: span 1;
		height: fit-content;
	}
}

/*gestion de l'ombre des bouton, sauf sur les case de l'agenda*/
button:hover{
	opacity: 0.8 !important;
}
table.planning button:hover,
 button.control:hover {
	box-shadow: 0 0 0 transparent !important;
	opacity: 1 !important;
}

/*gestion de toogle sur l'élément suivant*/

/* Curseur pointer pour indiquer la cliquabilité */
.toggleNext {
  cursor: pointer;
  user-select: none;
}

.toggleNext::after {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;  /* ▼ */
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.toggleNextHide::after {
  transform: rotate(-90deg);           /* ▶ */
}

/* L'élément suivant : transition sur max-height pour l'animation */
.toggleNext + * {
  display: grid;
 max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

/* Quand la classe est ajoutée : on "écrase" la hauteur */
.toggleNextHide + * {
  max-height: 0px;
  opacity: 0;
}

/* Nécessaire pour que grid-template-rows fonctionne */
.toggleNext + * > *,
.toggleNextHide + * > * {
  min-height: 0;
}


.______correction_specifique_navigateur______ {}
/* Supprime l'icône de visualisation du mot de passe sur Edge */
input::-ms-reveal {
    display: none;
}

/* Supprime également l'icône de nettoyage du champ (la croix) */
input::-ms-clear {
    display: none;
}