@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
	{
	--hue-a: 210;
	--hue-b: 70;
	--hue-c: 0;

	--light-a: 50%;
	--light-b: 60%;
	--light-c: 50%;

	--color-light-bg:40%;
	--color-light-bg-hover:30%;
	--color-light-bg-active:20%;
	--color-light-border:20%;
	--color-light-border-hover:25%;
	--color-light-border-active:30%;

	--color-a-bg:				hsl( var(--hue-a), var(--light-a), var(--color-light-bg) );
	--color-a-border:			hsl( var(--hue-a), var(--light-a), var(--color-light-border) );
	--color-a-hover-bg:			hsl( var(--hue-a), var(--light-a), var(--color-light-bg-hover) );
	--color-a-hover-border:		hsl( var(--hue-a), var(--light-a), var(--color-light-border-hover) );
	--color-a-active-bg:		hsl( var(--hue-a), var(--light-a), var(--color-light-bg-active) );
	--color-a-active-border:	hsl( var(--hue-a), var(--light-a), var(--color-light-border-active) );

	--color-b-bg:				hsl( var(--hue-b), var(--light-b), var(--color-light-bg) );
	--color-b-border:			hsl( var(--hue-b), var(--light-b), var(--color-light-border) );
	--color-b-hover-bg:			hsl( var(--hue-b), var(--light-b), var(--color-light-bg-hover) );
	--color-b-hover-border:		hsl( var(--hue-b), var(--light-b), var(--color-light-border-hover) );
	--color-b-active-bg:		hsl( var(--hue-b), var(--light-b), var(--color-light-bg-active) );
	--color-b-active-border:	hsl( var(--hue-b), var(--light-b), var(--color-light-border-active) );

	--color-c-bg:				hsl( var(--hue-c), var(--light-c), var(--color-light-bg) );
	--color-c-border:			hsl( var(--hue-c), var(--light-c), var(--color-light-border) );
	--color-c-hover-bg:			hsl( var(--hue-c), var(--light-c), var(--color-light-bg-hover) );
	--color-c-hover-border:		hsl( var(--hue-c), var(--light-c), var(--color-light-border-hover) );
	--color-c-active-bg:		hsl( var(--hue-c), var(--light-c), var(--color-light-bg-active) );
	--color-c-active-border:	hsl( var(--hue-c), var(--light-c), var(--color-light-border-active) );

	--color-link: hsl( var(--hue-a), 50%, 30% );

	--header-color-bg: hsl(var(--hue-a), 50%, 30%);
	--header-color-border: hsl(var(--hue-a), 30%, 40%);

	--header-height: 56px;

	--bs-body-font-family:"text","Arial";
	--bs-heading-font-family:"title","Arial";
	}

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

h1 { /* color:var(--color-a-bg); */ }

body { display: grid; grid-template-rows: auto 1fr auto auto;
grid-template-areas:
	"header"
	"content"
	"footer";
min-height: 100vh;
margin: 0;
}

#header {
grid-area: header;
position: sticky;
top: 0;
z-index: 100;
background-color: hsl( var(--hue-a), var(--light-a), 35% );
/* height:var(--header-height); */
}

#content {
grid-area: content;
overflow-y: auto;
 min-height:calc(100vh - var(--header-height));
}

#footer {
grid-area: footer;
background-color: var(--color-link);
color:white;
}
#offcanvas_left { background-color:var(--color-link); color:white; }


#body .color_a, #body .color_b, #body .color_c {  --bs-link-color:white; --color-link:white; --bs-card-color:white; --bs-card-title-color:white; --bs-heading-color:white; --bs-body-color:white; }

#body .color_a				{ background-color: var(--color-a-bg);			border-color: var(--color-a-border); }
#body .btn.color_a:hover	{ background-color: var(--color-a-hover-bg);	border-color: var(--color-a-hover-border); }
#body .btn.color_a:active	{ background-color: var(--color-a-active-bg);	border-color: var(--color-a-active-border); }

#body .color_b				{ background-color: var(--color-b-bg);			border-color: var(--color-b-border); --bs-link-color:white; }
#body .btn.color_b:hover	{ background-color: var(--color-b-hover-bg);	border-color: var(--color-b-hover-border); }
#body .btn.color_b:active	{ background-color: var(--color-b-active-bg);	border-color: var(--color-b-active-border); }

#body .color_c				{ background-color: var(--color-c-bg);			border-color: var(--color-c-border); --bs-link-color:white; }
#body .btn.color_c:hover	{ background-color: var(--color-c-hover-bg);	border-color: var(--color-c-hover-border); }
#body .btn.color_c:active	{ background-color: var(--color-c-active-bg);	border-color: var(--color-c-active-border); }

#body .border_a				{ --bs-card-border-color: var(--color-a-bg); }
#body .border_b				{ --bs-card-border-color: var(--color-b-bg); }
#body .border_c				{ --bs-card-border-color: var(--color-c-bg); }

#body p.head { font-weight:600; }

#body a:not(.btn)	{ text-decoration:none; color:var(--color-link); }

#body .bulle
	{
	background-color: var(--bs-btn-bg); font-family:var(--bs-heading-font-family);; font-weight:normal; color:white; font-size:0.85rem; --bs-btn-bg:rgba(10,10,10,0.5);
	padding:0.25rem 0.5rem; margin:0.15rem 0.15rem 0.15rem 0; display:inline-block;
	border:var(--bs-border-size) var(--bs-border-color) solid; border-radius:6px;
	}
#body .bulle.date { --bs-btn-bg:#454545dd; }
#body a.bulle	{ color:hsl( var(--hue-a), 50%, 95% ); }
#body a.bulle:hover	{ background-color:#252525; color:white; }

#body [data-list]	{ scroll-behavior:smooth; }
#body [data-hstack]	{ overflow-x:auto; }
#body [data-vstack]	{ overflow-y:auto; flex-direction:column !important; }
#body [data-lazy]:not(img)   { background-size:cover; background-position:center center; }

#body .bloc	{ }
#body .bloc.none	{ --bs-card-border-color:transparent; }
#body .bloc .item	{ background-color:rgba(0,0,0,0.50); color:#e8e8e8; --bs-secondary-color:#e8e8e8; }
#body .bloc .item.border	{ border:1px rgba(0,0,0,0.15) solid!important; }
#body .bloc .item a			{ color:#e8e8e8; }
#body .bloc .item a:hover, #body .bloc .item strong	{ color:#ffffff; }

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


.pointer { cursor:pointer; }
.hide { display:none; }

.nav * { font-family:var(--bs-heading-font-family); text-transform:uppercase; }

[data-marquee]	{ display:none; }
.marquee	{ white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.marquee>p	{ font-size:1.25rem; font-family:'title',sans-serif; display:inline-block; margin:0; padding-left:100%; animation: marquee 25s linear infinite; }



[data-row], [data-col] { border:1px transparent solid; }


#carousel_page>.carousel-inner { height:20vh; }

/* Small devices */
@media (min-width: 576px)
	{
	}

/* Medium devices */
@media (min-width: 768px)
	{
	#carousel_page>.carousel-inner
		{
		height:30vh;
		}
	}

/* Large devices */
@media (min-width: 992px)
	{
	#carousel_page>.carousel-inner
		{
		height:40vh;
		}
	}

/* X-Large devices */
@media (min-width: 1200px)
	{
	#carousel_page>.carousel-inner
		{
		height:45vh;
		}
	}

/* XX-Large devices */
@media (min-width: 1400px)
	{
	#carousel_page>.carousel-inner
		{
		height:50vh;
		/* border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; */
		}
	}


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

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

@keyframes marquee
	{
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
	}

.accordion-item .accordion-collapse.collapsing { transition: none !important; }

#lightboxOverlay { position: fixed !important; top: 0; left: 0; height: 100% !important; width: 100% !important; }
#lightbox { position: fixed !important; top: 50% !important; transform: translateY(-50%); }