/* CSS venant du document Newext.css **/


html {

    --largeurcolgauche: 240px;
    --largeurcolgaucheferme: 68px;
    --largeurcoldroite: 0px;
    --largeurcoldroiteferme: 0px;
    --paddingcoldroite: 0px;
    --largeurblocconnexion: 450px;
    --primary50: #EDF6FC;
    --primary100: #E0EEFA;
    --primary200: #BDDCF5;
    --primary300: #9DCBF0;
    --primary400: #7AB8EB;
    --primary500: #59A6E6;
    --primary600: #3B94E0;
    --primary700: #237BC6;
    --primary800: #0D4470;
    --primary900: #012945;
    --accent50: #FFF3EB;
    --accent100: #FFE9E0;
    --accent200: #FFD9C9;
    --accent300: #FFC6B0;
    --accent400: #FFA57F;
    --accent500: #FF8957;
    --accent600: #FE5F1C;
    --accent700: #E54502;
    --accent800: #B33500;
    --accent900: #812500;
    --grey50: #F0F0F0;
    --grey100: #EEEEEE;
    --grey150: #DADADA;
    --grey200: #C7C7C7;
    --grey300: #ABABAB;
    --grey400: #8F8F8F;
    --grey450: #818181;
    --grey500: #737373;
    --grey600: #616161;
    --grey700: #595959;
    --grey800: #3D3D3D;
    --grey900: #2B2B2B;
    --colorValid50: #EDFCF2;
    --colorValid100: #DCF9E5;
    --colorValid200: #BDF5BF;
    --colorValid300: #9AEFB3;
    --colorValid400: #7BEA9C;
    --colorValid500: #59E583;
    --colorValid600: #2ADF33;
    --colorValid700: #1CB54A;
    --colorValid800: #158938;
    --colorValid900: #0E5824;
    --colorValid950: #0A421B;
    --colorInvalid: #ffb3b3;
    --orange: #e29d58;
    --couleurBordure: #ECECEC;
    --couleurFondModal: rgba(0, 0, 0, 0.56);
    --couleurFondBlanc: #FFFFFF;
    --couleurFondHover: #ECECEC;
    --radius8: 8px;
    --radius10: 10px;
    --radius12: 12px;
    --radius16: 16px;
    --radius24: 24px;
    --rougeorganon: #fd6767;
}

.containerIcone.primary500 {background: var(--primary500);}



.sousTitrePourBloc {
	font: normal normal 600 42px/55px Poppins;
	margin-bottom: 12px;
}
    
:is(.sousTitrePourBloc, .sousTitrePourBlocSearch) span {
	color: var(--primary500);
}


.calendar :is(input[type="text"]).typedate {
	max-width: 9ch;
}


.blocBorder.blocItem {
	padding: 4rem 10rem;
	background-color: rgba(255,255,255,.5);
}
.blocBorder {
	border: 2px solid var(--couleurBordure);
	box-shadow: 0px 2px 0px var(--couleurBordure);
	border-radius: var(--radius12);
}
.blocBorder.blocBorderInscrit {
	--couleurBordure: var(--accent100);
}


.calendar {
	--_paddingBlockCalendar: 16px;
	--_paddingInlineCalendar: 16px;
	--_rowHeightCalendar:60px;
	--_widthFirstCol: 110px;

	display: grid;
	grid-template-columns: 60% 40%;
	row-gap: 24px;
	padding: var(--_paddingBlockCalendar) var(--_paddingInlineCalendar);
	position: relative;
}
.calendar::before { /* ligne sous icones */
	content: "";
	display: block;
	position: absolute;
	height: calc(100% - (2 * (var(--_paddingBlockCalendar))));
	top: var(--_paddingBlockCalendar);
	left: 42px;
	width: 1px; 
	background-color: var(--couleurBordure);
	grid-column: 2;
}
.calendar > .gauche {
	--_heightGridLibelleJour: 65px; /* valeur par défaut, redéfini en javascript */

	padding-right: 48px;
	position: relative;
}
.calendar > .gauche::before { /* permet de rajouter un border-radius au calendrier */
	content: "";
	display: block;
	position: absolute;
	left: var(--_widthFirstCol);
	top: var(--_heightGridLibelleJour);
	width: calc(100% - var(--_widthFirstCol) - 48px);
	height: calc(100% - var(--_heightGridLibelleJour));
	outline: 5px solid var(--couleurFondBlanc);
	z-index: 1;
	border-radius: var(--radius12);
	pointer-events: none;
}
.calendar > .gauche::after {
	content: "";
	display: block;
	position: absolute;
	right: 0px;
	width: 16px;
	height: 100%;
	top: 0px;
	border-radius: 0px var(--radius12) var(--radius12) 0px;
	background: linear-gradient(to right, var(--couleurBordure) 0%, var(--couleurFondBlanc) 100%);
}
.calendar > .droite {
	padding: 24px 0px 24px 24px;
	max-height: calc((var(--_rowHeightCalendar) * var(--_nbRowsCalendar)));
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.calendar .selectMonth {
	height: fit-content;
	width: fit-content;
}
.calendar .selectMonth option {
	background-color: var(--couleurFondBlanc);
	color: var(--grey400);
	text-align: left;
}
.calendar .gridLibelleJour {
	display: grid;
	align-items: center;
	grid-template-columns: var(--_widthFirstCol) repeat(7, 1fr);
	text-align: center;
	margin-bottom: 24px;
	margin-top: calc(24px - var(--_paddingBlockCalendar));
}
.calendar .libelleJour {
	font: normal normal 700 16px/24px Poppins;
  	color: var(--grey600);
}
.calendar .gridChiffreJour {
	display: grid;
	grid-template-columns: var(--_widthFirstCol) repeat(7, 1fr);
	justify-items: center;
	align-items: center;
	height: calc(var(--_rowHeightCalendar) * var(--_nbRowsCalendar)); /* 6 semaines */
	overflow: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-snap-type: y mandatory;
}
.calendar .libelleMois {
	font: normal normal 400 14px/20px Poppins;
  	color: var(--grey400);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.calendar .libelleMois.libelleMoisHidden {
	color: var(--couleurFondBlanc);
}
.calendar .containerChiffreJour {
	width: 100%;
	height: var(--_rowHeightCalendar);
	display: flex;
	align-items: center;
	/* flex-direction: column; */
	scroll-snap-align: start;
}
.calendar .containerChiffreJour.bgMois0 {
	background-color: color-mix(in oklab, var(--couleurFondBlanc) 50%, var(--primary100));
}
.calendar .containerChiffreJour.bgMois1 {
	background-color: color-mix(in oklab, var(--couleurFondBlanc) 75%, var(--primary100));
}
.calendar .chiffreJour {
	font: normal normal 400 16px/24px Poppins;
	aspect-ratio: 1/1;
	width: calc(100% - 4px);
	max-width: 48px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-inline: auto;
	cursor: pointer;
	transition: color  0.3s ease, background-color 0.3s ease;
}
.calendar .chiffreJour.actif {
	background-color: var(--primary300);
	color: var(--couleurFondBlanc);
}
.calendar .chiffreJour.actif .moisJour {
	color: var(--couleurFondBlanc);
}
.calendar .chiffreJour.aujourdui {
	outline: 3px solid var(--accent500);
	outline-offset: 3px;
}
.calendar .moisJour {
	font: normal normal 400 10px/10px Poppins;
	margin-top: -3px;
	margin-bottom: 6px;
	color: var(--grey400);
	display: none;
}
.calendar [data-inscrit="1"] .chiffreJour {
	font-weight: 600;
	background-color: var(--colorValid300);
}
.calendar [data-inscrit="0"][data-ne-participe-pas="1"] .chiffreJour {
	font-weight: 600;
	background-color: #ef9a9a;
}
.calendar .chiffreJour:is(:hover, .hover) {
	background-color: var(--accent500);
	color: white;
}
.calendar .chiffreJour:is(:hover, .hover) .moisJour {
	color: white;
}
.calendar .itemListeCalendar {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.calendar .itemListeCalendar .icone,
.calendar :is(.boutonHaut,.boutonBas) .icone {
	transition: background-color 0.3s;
}
.calendar .itemListeCalendar:is(:hover, .hover) {
	--primary500: var(--accent500);
	cursor: pointer;
}
.calendar .itemListeCalendar .date {
	margin-bottom: 3px;
	font: normal normal 700 16px/24px Poppins;
	color: var(--grey600);
}
.calendar .itemListeCalendar .titre {
	font: normal normal 400 16px/20px Poppins;
	color: var(--grey400);
}
.calendar .itemListeCalendar .fondIcone {
	background-color: var(--couleurFondBlanc);
	height: 24px;
	width: 36px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

@container centre (max-width: 940px) { 
	.calendar {
		grid-template-columns: 100%;
	}
	.calendar > .gauche::before {
		width: calc(100%);
		left: 0px;
	}
	.calendar > .gauche::after {
		display: none;
	}
	.calendar > .gauche {
		padding-right: 0px;
	}
	.calendar > .droite {
		padding-left: 0px;
	}
	.calendar::before {
		grid-column: 1;
		grid-row: 2;
		left: 18px;
	}
}

@container centre (max-width: 640px) { 
	.calendar .gridChiffreJour,
	.calendar .gridLibelleJour
	 {
		grid-template-columns: repeat(7, 1fr);
	}
	.calendar .chiffreJour {
		font: normal normal 400 14px/20px Poppins;
	}
	.calendar .chiffreJour.aujourdui {
		outline-offset: -1px;
	}
	.calendar .selectMonth,
	.calendar .libelleMois {
		display: none;
	}
	.calendar .moisJour {
		display: block;
	}
}

@media screen and (max-width: 850px) {

	.calendar {
		display: flex;
		flex-direction: column;
	}

	.calendar::before {
		display: none;
	}


	.calendar > .gauche {
		padding-right: 0px;
	}

	.calendar > .gauche::after {
		display: none;
	}

	.calendar > .gauche::before {
		width: fit-content;
	}

	.calendar .chiffreJour.aujourdui {
		outline-offset : -1px;
	}

}

@media screen and (max-width: 450px) {

	#reloadCalendarGauche {
		display: none;
	}

}



.icone {
	--varTailleIcone: 100%;
	/* --varUrlIcone: url('/LIFRAS/OWS/Images/icone/event-1.svg'); */

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--varTailleIcone);
	mask-size: var(--varTailleIcone);
	mask-image: url('/LIFRAS/OWS/Images/icone/event-1.svg');
	-webkit-mask-image: url('/LIFRAS/OWS/Images/icone/event-1.svg');
	transition: transform;

	width: var(--varTailleIcone);
	height: var(--varTailleIcone);
	transition: background-color 0.3s;

	/* couleurs possibles pour l'icone */

	&.blanc {background-color: var(--couleurFondBlanc);}

	&.primary100 {background-color: var(--primary100);}
	&.primary200 {background-color: var(--primary200);}
	&.primary300 {background-color: var(--primary300);}
	&.primary400 {background-color: var(--primary400);}
	&.primary500 {background-color: var(--primary500);}

	&.accent100 {background-color: var(--accent100);}
	&.accent200 {background-color: var(--accent200);}
	&.accent300 {background-color: var(--accent300);}
	&.accent400 {background-color: var(--accent400);}
	&.accent500 {background-color: var(--accent500);}

	&.grey200 {background-color: var(--grey200);}
	&.grey450 {background-color: var(--grey600);}

	&:is(.grey400, .inactif) {background-color: var(--grey400);}
	.containerIcone.disabled & {background-color: var(--grey400);}

	&.valid {background-color: var(--colorValid400);}
	&.invalid {background-color: var(--colorInvalid);}

	.blocaccordeonTitre & {background-color: var(--primary200);}
	.blocaccordeon .blocaccordeonTitre & {background-color: var(--grey400);}
	.blocaccordeon .blocaccordeon .blocaccordeonTitre & {
		display: none;
	}
	.colonnegauche .divmenu & {
		background-color:rgba(255,255,255,0.6);
	}
	.colonnegauche .divmenu .actif & {
		background-color:rgba(255,255,255,1);
	} 
	.colonnegauche .divmenu:hover & {
		background-color:rgba(255,255,255,1);
	}
	.containerIcone.loading & {
		--varUrlIcone: url('../images/icone/sync.svg') !important;
		animation: rotate 2s infinite linear;
	}
	.Favori & {--varUrlIcone: url('../images/icone/bookmark-1.svg') !important;}
	.NonFavori & {--varUrlIcone: url('../images/icone/bookmark.svg') !important;}
	.triBas & {--varUrlIcone: url('../images/icone/expand_more.svg') !important;}
	.triHaut & {--varUrlIcone: url('../images/icone/expand_less.svg') !important;}
	
	:is(.blocaccordeonTitre, .titreFolderHie, .folderTableau).ouvert .containerIcone:not(.event-1, .diversity_3, .notexpand) & {
		--varUrlIcone: url('../images/icone/expand_less.svg') !important;
	}
	:is(.blocaccordeonTitre, .titreFolderHie, .folderTableau).ferme .containerIcone:not(.event-1, .diversity_3, .notexpand) & {
		--varUrlIcone: url('../images/icone/expand_more.svg') !important;
	}
	:is(.blocaccordeonTitre, .titreFolderHie, .folderTableau).ouvert .containerIcone:not(.event-1, .diversity_3, .notexpand) & {
		--varUrlIcone: url('../images/icone/expand_less.svg') !important;
	}
}


.calendar .selectMonth {
    height: fit-content;
    width: fit-content;
}

.bouton.colorAccent {
    color: var(--couleurFondBlanc);
    background-color: var(--accent500);
    border: 2px solid var(--accent500);
}

.bouton.paddingExtraSmall {
    padding: 4px 8px 4px 8px;
}

.bouton {
    font: normal normal 600 14px/20px Poppins;
    background: var(--couleurFondBlanc);
    color: var(--grey400);
    text-align: center;
    white-space: break-spaces;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
    border: 2px solid var(--grey50);
    border-radius: var(--radius8);
    cursor: pointer;
    width: fit-content;
    padding: 8px 14px;
    transition: 0.3s;
}

select {
    height: 44px;
    max-width: calc(100%);
    padding-right: 28px;
    background: var(--grey50) url(../Images/icone/expand_more.svg) no-repeat calc(100% - 12px) center / 16px;
}