@font-face
	{
	font-family:'title'; font-style:normal; font-weight:400;
	src:url('engine/fonts/Roboto-Condensed.ttf') format('ttf');
	src:url('engine/fonts/Roboto-Condensed.eot') format('eot');
	src:url('engine/fonts/Roboto-Condensed.svg') format('svg');
	src:url('engine/fonts/Roboto-Condensed.woff') format('woff');
	}

@font-face
	{
	font-family:'title'; font-style:bold; font-weight:700;
	src:url('engine/fonts/Roboto-Condensed-Bold.ttf') format('ttf');
	src:url('engine/fonts/Roboto-Condensed-Bold.eot') format('eot');
	src:url('engine/fonts/Roboto-Condensed-Bold.svg') format('svg');
	src:url('engine/fonts/Roboto-Condensed-Bold.woff') format('woff');
	}

@font-face
	{
	font-family:'text'; font-style:normal; font-weight:400;
	src:url('engine/fonts/OpenSans-Regular.ttf') format('ttf');
	src:url('engine/fonts/OpenSans-Regular.eot') format('eot');
	src:url('engine/fonts/OpenSans-Regular.svg') format('svg');
	src:url('engine/fonts/OpenSans-Regular.woff') format('woff');
	}


:root
	{
	--font-title:'title','Arial','sans-serif';
	--font-texte:'text','Helvetica','Arial','sans-serif';
	--bs-body-font-family:var(--font-texte);
	--bs-btn-font-family:var(--font-title);

	--hue-primary: 210; /* 210 36 */
	--hue-secondary: calc( var(--hue-primary) - 170 );
	--main-sat: 1;

	--link-hue:var(--hue-secondary);
	--link-sat:calc( 100% * var(--main-sat) );
	--link-lum: 40%;
	--color-link: hsl(var(--link-hue),calc( var(--link-sat) * var(--main-sat) ),var(--link-lum) );
	--color-link-hover: hsl(var(--link-hue),calc( var(--link-sat) * var(--main-sat) ),calc( var(--link-lum) - 10% ) );;

	--color-a-hue: var(--hue-primary);
	--color-a-sat: 50%;
	--color-a-lum: 35%;
	--color-a-bg:			hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),var(--color-a-lum) );
	--color-a-text:			hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),1 );
	--color-a-border-color:	hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),calc( var(--color-a-lum) - 10% ) );
	--color-a-hover-bg:		hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),calc( var(--color-a-lum) - 10% ) );

	--color-b-hue: var(--hue-secondary);
	--color-b-sat: 50%;
	--color-b-lum: 50%;
	--color-b-bg:			hsl(var(--color-b-hue),calc( var(--color-b-sat) * var(--main-sat) ),var(--color-b-lum) );
	--color-b-text:			hsl(var(--color-b-hue),calc( var(--color-b-sat) * var(--main-sat) ),calc( 100% - var(--color-b-lum) ) );
	--color-b-border-color:	hsl(var(--color-b-hue),calc( var(--color-b-sat) * var(--main-sat) ),calc( var(--color-b-lum) - 10% ) );
	--color-b-hover-bg:		hsl(var(--color-b-hue),calc( var(--color-b-sat) * var(--main-sat) ),calc( var(--color-b-lum) - 10% ));

	--color-c-hue: var(--hue-secondary);
	--color-c-sat: 90%;
	--color-c-lum: 25%;
	--color-c-bg:			hsl(var(--color-c-hue),calc( var(--color-c-sat) * var(--main-sat) ),var(--color-c-lum) );
	--color-c-text:			hsl(var(--color-c-hue),calc( var(--color-c-sat) * var(--main-sat) ),calc( 100% - var(--color-c-lum) ) );
	--color-c-border-color:	hsl(var(--color-c-hue),calc( var(--color-c-sat) * var(--main-sat) ),calc( var(--color-c-lum) - 10% ) );
	--color-c-hover-bg:		hsl(var(--color-c-hue),calc( var(--color-c-sat) * var(--main-sat) ),calc( var(--color-c-lum) - 10% ) );

	--color-dark-hue: var(--hue-primary);
	--color-dark-sat: 5%;
	--color-dark-lum: 20%;
	--color-dark-bg:			hsl(var(--hue-primary),calc( var(--color-dark-sat) * var(--main-sat) ),var(--color-dark-lum) );
	--color-dark-text:			hsl(var(--hue-primary),calc( var(--color-dark-sat) * var(--main-sat) ),calc( 100% - var(--color-dark-lum) ) );
	--color-dark-border-color:	hsl(var(--hue-primary),calc( var(--color-dark-sat) * var(--main-sat) ),calc( var(--color-dark-lum) - 10% ) );
	--color-dark-hover-bg:		hsl(var(--hue-primary),calc( var(--color-dark-sat) * var(--main-sat) ),calc( var(--color-dark-lum) + 30% ) );

	--color-grey-hue: var(--hue-primary);
	--color-grey-sat: 5%;
	--color-grey-lum: 50%;
	--color-grey-bg:			hsl(var(--hue-primary),calc( var(--color-grey-sat) * var(--main-sat) ),var(--color-grey-lum) );
	--color-grey-text:			hsl(var(--hue-primary),calc( var(--color-grey-sat) * var(--main-sat) ),calc( 100% - var(--color-grey-lum) ) );
	--color-grey-border-color:	hsl(var(--hue-primary),calc( var(--color-grey-sat) * var(--main-sat) ),calc( var(--color-grey-lum) - 10% ) );
	--color-grey-hover-bg:		hsl(var(--hue-primary),calc( var(--color-grey-sat) * var(--main-sat) ),calc( var(--color-grey-lum) + 20% ) );

	--color-light-hue: var(--hue-primary);
	--color-light-sat: 5%;
	--color-light-lum: 80%;
	--color-light-bg:			hsl(var(--hue-primary),calc( var(--color-light-sat) * var(--main-sat) ),var(--color-light-lum) );
	--color-light-text:			hsl(var(--hue-primary),calc( var(--color-light-sat) * var(--main-sat) ),calc( 100% - var(--color-light-lum) ) );
	--color-light-border-color:	hsl(var(--hue-primary),calc( var(--color-light-sat) * var(--main-sat) ),calc( var(--color-light-lum) - 10% ) );
	--color-light-hover-bg:		hsl(var(--hue-primary),calc( var(--color-light-sat) * var(--main-sat) ),calc( var(--color-light-lum) + 20% ) );

	--back-light-color: hsl(var(--hue-secondary),40%,90%);;
	--back-dark-color:#0b1824;

	--color-header: hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),calc( var(--color-a-lum) - 0% ) );
	--color-footer: hsl(var(--color-a-hue),calc( var(--color-a-sat) * var(--main-sat) ),calc( var(--color-a-lum) - 10% ) );
	--bs-offcanvas-bg: var(--color-a-hover-bg);

	--color-grey:hsl(var(--hue-primary),0%,50% );

	--main-color: hsl( var(--accent-hue), calc( 0.5 * var(--accent-saturation) ), var(--accent-lightness) );
	--main-light-color:	hsl( var(--hue-primary), calc( 60% * var(--main-sat) ), calc( var(--main-lightness) + 25% ) );
	--main-dark-color:	hsl( var(--hue-primary), calc( 60% * var(--main-sat) ), 25% );


	--link-color:			hsl(var(--accent-hue), 80%, 50% );
	--link-color-active:	hsl(var(--accent-hue), 70%, 25% );
	--link-color-disabled:	hsl(var(--accent-hue), 10%, 50% );


	--green-color:#37730c;
	--green-rgb:55,115,12;
	--orange-color:#cf8512;
	--orange-rgb:207,133,18;
	--grey-color:#888888;
	--grey-rgb:128,128,128;
	--header-height:55px;
	--header-bg-color:var(--accent-dark-color);
	--header-text-color:#ffffff;
	--badge-manif-color:#252525;
	--badge-manif-bg:#cf8512;
	--badge-dates-color:#dfdfdf;
	--badge-dates-bg:#163768;
	--badge-commune-color:#cfcfcf;
	--badge-commune-hover-color:#ffffff;
	--badge-commune-bg:#aa0000;
	--badge-commune-hover-bg:#880000;
	--badge-adresse-color:#cfcfcf;
	--badge-adresse-bg:#511eb9;
	--badge-adresse-doublon-color:#cfcfcf;
	--badge-adresse-doublon-bg:#b9431e;
	--badge-activite-color:#dfdfdf;
	--badge-activite-bg:#006912;
	--badge-organisateur-color:#d4e7d9;
	--badge-organisateur-bg:#038408;
	--badge-distance-color:#252525;
	--badge-distance-bg:#afafaf;

	--waze-bg:#00607b;
	--waze-color:#ffffff;
	--gmap-bg:#346341;
	--gmap-color:#ffffff;


	/* COULEURS */
	--commune-hue:0;
	--commune-text:			hsl( var(--commune-hue), 60%, 90% );
	--commune-text-hover:	hsl( var(--commune-hue), 60%, 90% );
	--commune-bg:			hsl( var(--commune-hue), 65%, 35% );
	--commune-bg-hover:		hsl( var(--commune-hue), 80%, 40% );
	--commune-border-color:	hsl( var(--commune-hue), 80%, 20% );
	--commune-border: 1px var(--commune-border-color) solid;

	--dates-hue: 216;
	--dates-text: hsl( var(--dates-hue), 60%, 90% );
	--dates-bg: hsl( var(--dates-hue), 65%, 25% );
	--dates-border-color: hsl( var(--dates-hue), 65%, 15% );
	--dates-border: 1px var(--dates-border-color) solid;
	--dates-bg-hover:  var(--dates-border-color);

	--manif-hue:40;
	--manif-text:			hsl( var(--manif-hue), 60%, 90% );
	--manif-text-hover:		hsl( var(--manif-hue), 60%, 90% );
	--manif-bg:				hsl( var(--manif-hue), 65%, 30% );
	--manif-bg-hover:		hsl( var(--manif-hue), 80%, 40% );
	--manif-border-color:	hsl( var(--manif-hue), 65%, 15% );
	--manif-border: 1px var(--manif-bg-hover) solid;

	--organisateur-hue:120;
	--organisateur-text:			hsl( var(--organisateur-hue), 60%, 90% );
	--organisateur-text-hover:		hsl( var(--organisateur-hue), 60%, 90% );
	--organisateur-bg:				hsl( var(--organisateur-hue), 65%, 35% );
	--organisateur-bg-hover:		hsl( var(--organisateur-hue), 80%, 40% );
	--organisateur-border-color:	hsl( var(--organisateur-hue), 65%, 15% );
	--organisateur-border: 1px var(--organisateur-bg-hover) solid;

	--sortie-hue:30;
	--sortie-text:			hsl( var(--sortie-hue), 60%, 90% );
	--sortie-text-hover:	hsl( var(--sortie-hue), 60%, 90% );
	--sortie-bg:			hsl( var(--sortie-hue), 65%, 35% );
	--sortie-bg-hover:		hsl( var(--sortie-hue), 80%, 40% );
	--sortie-border-color:	hsl( var(--sortie-hue), 65%, 15% );
	--sortie-border: 1px var(--sortie-bg-hover) solid;

	--participants-hue:200;
	--participants-text:			hsl( var(--participants-hue), 10%, 80% );
	--participants-text-hover:		hsl( var(--participants-hue), 0%, 90% );
	--participants-bg:				hsl( var(--participants-hue), 25%, 20% );;
	--participants-bg-hover:		hsl( var(--participants-hue), 25%, 10% );
	--participants-border-color:	hsl( var(--participants-hue), 50%, 20% );
	--participants-border: 1px var(--participants-border-color) solid;

	--inscrit-hue:225;
	--inscrit-text:			hsl( var(--inscrit-hue), 10%, 80% );
	--inscrit-text-hover:	hsl( var(--inscrit-hue), 0%, 90% );
	--inscrit-bg:			hsl( var(--inscrit-hue), 25%, 20% );;
	--inscrit-bg-hover:		hsl( var(--inscrit-hue), 25%, 10% );
	--inscrit-border-color:	hsl( var(--inscrit-hue), 50%, 20% );
	--inscrit-border: 1px var(--participants-border-color) solid;

	--genre-0-hue: 30;
	--genre-0-text:	hsl(var(--genre-0-hue),calc( 0% * var(--main-sat) ),40% );
	--genre-0-bg:		hsl(var(--genre-0-hue),calc( 0% * var(--main-sat) ),40% );
	--genre-0-bg-hover:	hsl(var(--genre-0-hue),calc( 0% * var(--main-sat) ),20% );

	--genre-1-hue: 215;
	--genre-1-text:	hsl(var(--genre-1-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-1-bg:		hsl(var(--genre-1-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-1-bg-hover:	hsl(var(--genre-1-hue),calc( 100% * var(--main-sat) ),20% );

	--genre-2-hue: 320;
	--genre-2-text:	hsl(var(--genre-2-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-2-bg:		hsl(var(--genre-2-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-2-bg-hover:	hsl(var(--genre-2-hue),calc( 100% * var(--main-sat) ),20% );

	--genre-3-hue: 30;
	--genre-3-text:	hsl(var(--genre-3-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-3-bg:		hsl(var(--genre-3-hue),calc( 100% * var(--main-sat) ),40% );
	--genre-3-bg-hover:	hsl(var(--genre-3-hue),calc( 100% * var(--main-sat) ),20% );

	--map-hue:102;
	--map-text:			hsl( var(--map-hue), 10%, 80% );
	--map-text-hover:	hsl( var(--map-hue), 0%, 90% );
	--map-bg:			hsl( var(--map-hue), 35%, 30% );
	--map-bg-hover:		hsl( var(--map-hue), 25%, 10% );
	--map-border-color:	hsl( var(--map-hue), 50%, 20% );
	--map-border: 1px var(--participants-border-color) solid;

	}

html
	{
	overflow-y: scroll;
	&[data-bs-theme=light]
		{
		body#body	{ background-color:var(--back-light-color); }--badge-sortie-border-size
		table
			{
			tr:nth-child(odd)	{ background-color:rgba(0,0,0,0.05); }
			tr:nth-child(even)	{ background-color:rgba(0,0,0,0.10); }
			}
		}
	&[data-bs-theme=dark] body#body
		{
		background-color:var(--back-dark-color);
		table
			{
			tr:nth-child(odd)	{ background-color:rgba(255,255,255,0.05); }
			tr:nth-child(even)	{ background-color:rgba(255,255,255,0.10); }
			}
		}

	}

body#body
	{
	padding:0!important;

	h1,h2,h3,h4,h5,h6  { font-family:var(--font-title); font-weight:700; text-transform:uppercase; }

	.badge,.btn,.input-group-text,.nav,.dropdown,.list-group, input, select, textarea, figcaption, .pagination>.page-item	{ font-family:var(--font-title); }

	.bulle
		{
		background-color: var(--bs-btn-bg); font-family:var(--font-title); font-weight:normal; color:white; font-size:0.85rem; --bs-btn-bg:rgba(0,0,0,0.5);
		padding:0.25rem 0.5rem; margin:0.15rem 0.25rem 0.15rem 0; display:inline-block;
		border:var(--bs-border-size) var(--bs-border-color) solid; border-radius:6px;
		&.date { --bs-btn-bg:#666666; }
		}

	.btn,.badge,.card,.alert,.bulle
		{
		a 		{ color:var(--color-link); }
		a:hover { color:var(--color-link-hover); }

		&.color_a,&.color_b,&.color_c,&.color_light,&.color_grey,&.color_dark,&.genre_0,&.genre_1,&.genre_2,&.genre_3,&.map
			{
			--bs-btn-color:var(--back-light-color);
			--bs-btn-active-bg:var(--bs-btn-hover-bg);
			--bs-btn-active-color:#ffffff;
			--bs-btn-hover-color:#ffffff;
			&.outline	{ --bs-btn-bg:transparent; }
			&.active	{ --bs-btn-border-color:#ffffff; --bs-btn-color:#ffffff; }
			&.badge,&.bulle,&.card,&.alert		{ background-color:var(--bs-btn-bg); color:var(--bs-btn-color); --color-link:var(--bs-btn-color); --color-link-hover:var(--bs-btn-color);  }

			h1,h2,h3,h4,h5,h6  { --color-link:white; --color-link-hover:white; }


			a		{ text-decoration:underline;  }
			a:hover	{ text-decoration:underline; }
			}

		&.color_a				{ --bs-btn-bg:var(--color-a-bg); --bs-btn-border-color:var(--color-a-border-color);--bs-btn-hover-bg:var(--color-a-hover-bg); }
		&.color_a.outline		{ --bs-btn-color:var(--color-a-bg); }

		&.color_b				{ --bs-btn-bg:var(--color-b-bg); --bs-btn-border-color:var(--color-b-border-color);--bs-btn-hover-bg:var(--color-b-hover-bg); }
		&.color_b.outline		{ --bs-btn-color:var(--color-b-bg); }

		&.color_c				{ --bs-btn-bg:var(--color-c-bg); --bs-btn-border-color:var(--color-c-border-color);--bs-btn-hover-bg:var(--color-c-hover-bg); }
		&.color_c.outline		{ --bs-btn-color:var(--color-c-bg); }

		&.color_light			{ --bs-btn-bg:var(--color-light-bg); --bs-btn-border-color:var(--color-light-border-color);--bs-btn-hover-bg:var(--color-light-hover-bg); --color-link-hover:black; --back-light-color:black; --bs-btn-hover-color:black; --color-link:black; }
		&.color_light.outline	{ --bs-btn-color:var(--color-light-bg); --color-link:white; }

		&.color_grey			{ --bs-btn-bg:var(--color-grey-bg); --bs-btn-border-color:var(--color-grey-border-color);--bs-btn-hover-bg:var(--color-grey-hover-bg); }
		&.color_grey.outline	{ --bs-btn-color:var(--color-grey-bg); }

		&.color_dark			{ --bs-btn-bg:var(--color-dark-bg); --bs-btn-border-color:var(--color-dark-border-color);--bs-btn-hover-bg:var(--color-dark-hover-bg); }
		&.color_dark.outline	{ --bs-btn-color:var(--color-dark-bg); }

		&.map			{ --bs-btn-bg:var(--map-bg); --bs-btn-border-color:var(--map-border-color);--bs-btn-hover-bg:var(--map-bg-hover); --bs-btn-color:var(--map-text-hover); --bs-btn-color:var(--map-text-hover); }

		&.genre_0		{ --inscrit-text:var(--genre-0-text); --inscrit-bg:var(--genre-0-bg); --inscrit-bg-hover:var(--genre-0-bg-hover); }
		&.genre_1		{ --inscrit-text:var(--genre-1-text); --inscrit-bg:var(--genre-1-bg); --inscrit-bg-hover:var(--genre-1-bg-hover); }
		&.genre_2		{ --inscrit-text:var(--genre-2-text); --inscrit-bg:var(--genre-2-bg); --inscrit-bg-hover:var(--genre-2-bg-hover); }
		&.genre_3		{ --inscrit-text:var(--genre-3-text); --inscrit-bg:var(--genre-3-bg); --inscrit-bg-hover:var(--genre-3-bg-hover); }
		}

	.bg_grey
		{
		background-color:var(--color-grey-bg); color:var(--back-light-color);
		}

	.manif
		{
		color:var(--manif-text);
		&.bulle	{ --bs-btn-bg:var(--manif-bg); --bs-btn-hover-bg:var(--manif-bg-hover); --bs-btn-hover-color:var(--manif-text-hover); --bs-btn-hover-bg:var(--manif-bg-hover); border:var(--manif-border); }
		}

	.inscrit
		{
		text-transform:uppercase;
		color:var(--inscrit-text);
		}

	.btn,.badge,.bulle
		{
		background-color: var(--bs-btn-bg);
		font-family:var(--font-title);  text-decoration:none;
		--color-link:white; --color-link-hover:white;

		&.adresse			{ color:var(--badge-adresse-color); --bs-btn-bg:var(--badge-adresse-bg); }
		&.adresse.doublon	{ color:var(--badge-adresse-doublon-color); --bs-btn-bg:var(--badge-adresse-doublon-bg); }

		&.distance			{ color:var(--badge-distance-color); --bs-btn-bg:var(--badge-distance-bg); }
		&.activite			{ color:var(--badge-activite-color); --bs-btn-bg:var(--badge-activite-bg); }
		&.organisateur		{ color:var(--badge-organisateur-color); --bs-btn-bg:var(--badge-organisateur-bg); --bs-border-size:var(--badge-organisateur-border-size); --bs-border-color:var(--badge-organisateur-border-color); }

		&.inscrit		{ color:var(--inscrit-text); --bs-btn-bg:var(--inscrit-bg); --bs-btn-hover-bg:var(--inscrit-bg-hover); --bs-btn-hover-color:var(--inscrit-text-hover); }
		&.dates			{ color:var(--dates-text); --bs-btn-bg:var(--dates-bg); --bs-btn-hover-bg:var(--dates-bg-hover); --bs-btn-hover-color:var(--dates-text-hover); border:var(--dates-border); }
		&.dates.passe	{ --dates-bg:hsl( var(--dates-hue), 25%, 25% ); --dates-border:hsl( var(--dates-hue), 25%, 10% ); }
		&.commune		{ color:var(--commune-text); --bs-btn-bg:var(--commune-bg); --bs-btn-hover-bg:var(--commune-bg-hover); --bs-btn-hover-color:var(--commune-text-hover); border:var(--commune-border); }
		&.manif			{ color:var(--manif-text); --bs-btn-bg:var(--manif-bg); --bs-btn-hover-bg:var(--manif-bg-hover); --bs-btn-hover-color:var(--manif-text-hover); --bs-btn-hover-bg:var(--manif-bg-hover); border:var(--manif-border); }
		&.sortie		{ color:var(--sortie-text); --bs-btn-bg:var(--sortie-bg); --bs-btn-hover-bg:var(--sortie-bg-hover); --bs-btn-hover-color:var(--sortie-text-hover); --bs-btn-hover-bg:var(--sortie-bg-hover); border:var(--sortie-border); }
		&.organisateur	{ color:var(--organisateur-text); --bs-btn-bg:var(--organisateur-bg); --bs-btn-hover-bg:var(--organisateur-bg-hover); --bs-btn-hover-color:var(--organisateur-text-hover); --bs-btn-hover-bg:var(--organisateur-bg-hover); border:var(--organisateur-border); }
		&.participants	{ color:var(--participants-text); --bs-btn-bg:var(--participants-bg); border:var(--participants-border); }

		&.waze	{ color:var(--waze-color); --bs-btn-bg:var(--waze-bg); }
		&.gmap	{ color:var(--gmap-color); --bs-btn-bg:var(--gmap-bg); }

		}

	a.btn,button.btn,a.badge,a.bulle
		{
		text-decoration:none!important;
		&:hover	{ text-decoration:none!important; }
		}


	.offcanvas
		{
		--bs-offcanvas-bg:var(--main-dark-color);

		.btn-close { color:white; filter:none; }
		.nav { --bs-nav-link-color:hsl(var(--color-a-hue),80%,90%); }
		}

	.bg_genre_0,.bg_genre_1,.bg_genre_2,.bg_genre_3	{ text-transform:none; }

	.bg_genre_0
		{
		color:var(--genre-0-color); --inscrit-hue:var(--genre-0-hue);
		&.card,&.btn,&.badge,&.alert { background-color:hsl(var(--genre-0-hue),0%,40%); color:#e5e5e5; }
		&.btn:hover	{ background-color:hsl(var(--genre-0-hue),0%,20%); color:white; }
		}
	.bg_genre_1
		{
		 --bs-btn-color:#e5e5e5!important; --inscrit-hue:var(--genre-1-hue);
		color:#e5e5e5;
		&.card,&.btn,&.badge,&.alert { background-color:hsl(var(--genre-1-hue),calc( 100% * var(--main-sat) ),40%); }
		&.btn:hover	{ background-color:hsl(var(--genre-1-hue),calc( 100% * var(--main-sat) ),20%); color:white; }
		}
	.bg_genre_2
		{
		color:var(--genre-2-color); --inscrit-hue:var(--genre-3-hue);
		&.card,&.btn,&.badge,&.alert { background-color:hsl(var(--genre-2-hue),calc( 100% * var(--main-sat) ),40%); color:#e5e5e5; }
		&.btn:hover	{ background-color:hsl(var(--genre-2-hue),calc( 100% * var(--main-sat) ),20%); color:white; }
		}

	.bg_genre_3
		{
		color:var(--genre-3-color); --inscrit-hue:var(--genre-3-hue);
		&.card,&.btn,&.badge,&.alert { background-color:hsl(var(--genre-3-hue),calc( 100% * var(--main-sat) ),40%); color:#e5e5e5; }
		&.btn:hover	{ background-color:hsl(var(--genre-3-hue),calc( 100% * var(--main-sat) ),20%); color:white; }
		}

	.bg_map			{ background-color:hsl( var(--map-hue),20%,20% );; }

	.text-underline { text-decoration:underline; }

	[data-lazy]:not(img)   { background-size:cover; background-position:center center; }

	.btn:hover,#body button:hover	{ transition:all .3s ease-out; }

	.date_card { width:5.5rem; border-radius:6px; padding:2px; background-color:rgba(0,0,0,0.5); text-align:center; font-family:'title'; --bs-link-color-rgb:220,220,220; --bs-link-hover-color-rgb:255,255,255; }
	.date_card:hover	{ color:white; background-color:rgba(20,20,20,0.5); }
	.date_card>.month { border-radius:6px; background-color:rgba(255,0,0,1); color:white; padding:0.1rem 0; text-transform:capitalize; }
	.date_card>.day { font-size:3rem; line-height:3rem; font-weight:900; padding:0.25rem 0; }
	.date_card>.day_name { background-color:rgba(0,0,0,0.25); }
	.date_card>.hours { font-size:0.6rem; padding:0.25rem 0; }


	.fill_black path	{ color:#000000; }

	.fill-black path	{ color:#000000; }
	.fill-grey path	{ color:#888888; }
	.fill-blue path	{ color:#1515bb; }
	.fill-orange path	{ color:var(--orange-color); }
	.fill-green path	{ color:green; }
	.fill-red path	{ color:red; }


	.carousel button	{ filter: drop-shadow(0px 2px 2px #000000); opacity: .75; }

	#zone_carte .leaflet-marker-icon>.icon    { color:#000000; }
	#zone_carte .leaflet-popup-content { font-family:var(--font-title); margin:0.5rem 1.25rem 0.5rem 0.5rem; display:block; min-width:280px; }
	#map .leaflet-popup-content a.btn { color:white; }

	.bt_waze				{ --bs-list-group-bg:#01c8ffff; --color-link:#000000; }
	.bt_waze:hover			{ --bs-list-group-bg:#01c8ffbb; --color-link-hover:#ffffff; }
	.bt_google_maps			{ --bs-list-group-bg:#46b465ff; --color-link:#000000; }
	.bt_google_maps:hover	{ --bs-list-group-bg:#46b465bb; --color-link-hover:#ffffff; }


	fieldset
		{
		border:1px var(--bs-border-color-translucent) solid;
		border-radius:4px;
		padding:0.25rem 0.5rem 0.5rem 0.5rem;
		legend
			{
			float:inherit; width:inherit; margin:0; padding:0 0.25rem; font-size:0.75rem;
			}
		}

	table { width:100%; }

	ul>.nav-item>.nav-link:hover
		{
        background-color: var(--color-link-hover);
        color: white;
		}

	.text-title		{ font-family:var(--font-title); }
	.text-ucfirst::first-letter	{ text-transform: capitalize; }
	}

#body #header
		{
		max-height:var(--header-height); height: calc(var(--header-height) - 1px); top:0;
		background-color:var(--color-header); color:white;
		box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.25); border-bottom:1px #0003 solid;
		font-family:var(--font-title); color:var(--header-text-color); font-weight:700;
		}
#body #header * { font-family:var(--font-title); color:var(--header-text-color); font-weight:700; }
#body #header_content { padding-top:12px; top:0; }


#body a[status]>svg 				{ fill:rgba(255,255,255,.2); }
#body a[status=granted]>svg { fill:#3cc53c; }
#body a[status=prompt]>svg 	{ fill:#003a95; }
#body a[status=denied]>svg 	{ fill:#000000; }
#body a[status=pending]>svg { fill:#cccc00; }
#body a[status=error]>svg 	{ fill:#ed5252; }
#body a[status=asking]>svg 	{ fill:#ffe200; }
#body a[status=active]>svg 	{ fill:white; }

#body #header #site_title	{ font-family:var(--font-title); font-size:1.5rem; line-height:1.4; text-transform:uppercase; text-decoration:none; color:white; }

#body #content
		{
		min-height: calc(100dvh - var(--header-height));
		}

#body #footer
		{
		border-top:1px #0003 solid;
		background-color:var(--color-footer); color:white;
		}


#body .nav.onglets
	{
	padding-top:1rem;
	}
#body .nav.onglets>a
	{
	border-top-left-radius:10px; border-top-right-radius:10px; padding:1rem 0; border:1px var(--bs-border-color) solid; border-bottom:none;
	color:var(--color-a-text);
	background-color:transparent; border-color:transparent;
	}
#body .nav.onglets>a[aria-selected=true]
	{
	background-color:var(--color-b-bg); color:var(--bs-body-bg);
	}

.debug	{ font-family:'title'; font-size:0.5rem; line-height:0.85rem; }
.debug>p { margin:1px }

#body .pointer	{ cursor:pointer; }


.scroll-container { display:flex!important; scroll-behavior:smooth; padding:0rem; overflow-x:auto; }
.scroll-item { }

#body [data-list]					{ display:flex!important; scroll-behavior:smooth; }
#body [data-list][data-hstack]	{ overflow-x:auto; }
#body [data-list][data-vstack]	{ overflow-y:auto; }

#zone_debug>*	{ margin:0; padding:4px; border-top:1px #888888 solid;  }

::backdrop { background-color:#000000d0; }

.no-select { user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }


@keyframes fadein { from { opacity:0; } to { opacity:1; } }
.fade-in { animation: fadein .3s ease-in; }

@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.rotating { animation: spin 0.5s linear infinite; display:inline-block; }

@keyframes shake
	{
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
	20%, 40%, 60%, 80% { transform: translateX(10px); }
	}
.shake { animation: shake 0.5s ease-in-out; animation-iteration-count: 5; }