/* 
=====================================================================
*   Keep It Simple Media Queries
*   url: styleshout.com
*   07-12-2014
/* ================================================================== */

header a.intranet, header a.webmail {
	float: right;
	font-size: 2em;
	line-height: 1.8em;
	width: 40px;
	text-align: center;
}

@media (prefers-color-scheme: dark) {
	header a.intranet, header a.webmail {
		filter: grayscale(100%);
	}
}

footer {
	margin-bottom: 6px;
}

.footer-content dd {
	display: inline;
	float: right;
	position: relative;
	right: 9px;
	top: 5px;
	padding-right: 9px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	header, .header, footer {
		background: linear-gradient(
			to right,
			var(--gray_color_600),
			var(--gray_color_800)
		);
	}
}

.global_message a {
	border-bottom: 1px white dotted;
	color: white;
}

footer {
	margin-top: 5px;
}

#top footer {
	margin-top: 0px;
}

.header-content::before, .footer-content::before {
	background-color: var(--primary_color_900_transparent);
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.rainbow::before {
	background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
	);
}

.france::before {
	background: linear-gradient(
		to right,
		#0c1c8c, white, #ed2e38
		);
}

.belgique::before {
	background: linear-gradient(
		to right,
		black, #ffe936, #ed2e38
		);
}

.en_berne::before {
	background: linear-gradient(
		to right,
		black, black, gray
		);
}


#navigation li.has-children.languages {
	float: right;
}

.lab_title {
	color: white;
	position: absolute;
	font-weight: 600;
}

svg#LIP6 {
	width: 130px;
	height: 130px;
	margin-top: 11px;
	margin-bottom: 11px;
	margin-left: 15px;
	margin-right: 15px;
}

.lab_title {
	font-size: var(--header_font_size);
	bottom: 68px;
}

svg#CNRS, svg#SU {
	display: block;
	fill: var(--color_scheme_background_light);
	margin-right: auto;
	margin-left: auto;
	margin-top: 11px;
}

.global_message {
	text-align: right;
	bottom: 5px;
	position: absolute;
	right: 30px;
	font-weight: bold;
}

.global_message a {
	border-bottom: 1px white dotted;
}

.global_message, .global_message a {
	color: white;
	margin-bottom: 0px;
}
@media only screen and (min-width: 768px) {
	svg#LIP6 {
		width: 55px;
		height: 55px;
	}
	.lab_title {
		font-size: 18px;
		bottom: 30px;
	}
	svg#CNRS, svg#SU {
		height: 26px;
	}
	.global_message {
		font-size: 10px;
	}
}

@media only screen and (min-width: 992px) {
	svg#LIP6 {
		width: 70px;
		height: 70px;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	.lab_title {
		font-size: 22px;
		bottom: 33px;
	}
	svg#CNRS, svg#SU {
		height: 27px;
		margin-top: 8px;
	}
	.global_message {
		font-size: small;
		line-height: 5px;
	}
}

@media only screen and (min-width: 1200px) {
	svg#LIP6 {
		width: 125px;
		height: 125px;
	}
	.lab_title {
		font-size: 28px;
		bottom: 64px;
	}
	svg#CNRS, svg#SU {
		height: 45px;
	}
	.global_message {
		font-size: medium;
	}
}

@media only screen and (min-width: 1400px) {
	svg#LIP6 {
		width: 138px;
		height: 138px;
	}
	.lab_title {
		font-size: 37px;
		bottom: 68px;
	}
	svg#CNRS, svg#SU {
		height: 50px;
	}
	.global_message {
		font-size: large;
	}
}
@media only screen and (max-width: 991px) {
	.global_message {
		display: none;
	}
}


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */

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

	/* header styles 
	-------------------------------------------------------------- */
	#nav-wrap {
		font-size: 11px;
	}
	ul#navigation li a {
		padding: 0 10px;
	}
}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

	/* header styles 
	-------------------------------------------------------------- */
	#nav-wrap {
		font-size: 9px;
	}
	ul#navigation li a {
		padding: 0 12px;
	}
	header a svg#webmail {
		margin-top: 14px;
		width: 18px;
		height: 12px;
	}
	header a.brands {
		margin-top: 21px;
	}

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	svg#LIP6 {
		width: 55px;
		height: 55px;
	}
	.lab_title {
		font-size: 18px;
		bottom: 30px;
	}
	svg#CNRS, svg#SU {
		height: 26px;
	}
	#nav-wrap {
		float: left;     
	}
	ul.fil {
		display: none;
	}
	header a svg#webmail {
		margin-top: 0;
		width: 21px;
		height: 39px;
	}

   /* mobile navigation

 -------------------------------------------------------------------- */

   #nav-wrap {
	border-top-style: none;
	font-size: 12px;
	}

	/* header styles 
	-------------------------------------------------------------- */
	header .header-content {
	height: 60px;
	}

	.header h1#logo-text	{
		padding-top: 0px;
	}
	.header h1#logo-text a {
		font-size: 36px;
		text-shadow: none;
	} 
	
	h1 { font-size: 22px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; }
 	h2 { font-size: 20px; line-height: 30px; }
	h3 { font-size: 18px; line-height: 30px; margin-bottom: 12px; }

	#navigation li.has-children.languages {
		display: none;
	}
}

 /* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

	/* header styles 
	-------------------------------------------------------------- */
	header .header-content {
	height: 38px;
	}
	.header h1#logo-text {
		padding-top: 0px;
	} 
	.header h1#logo-text a {
		font-size: 30px;
	} 

	h1 { font-size: 20px; line-height: 30px; margin-bottom: 12px; letter-spacing: -1px; }
	h2 { font-size: 18px; line-height: 30px; }
	h3 { font-size: 24px; line-height: 30px; margin-bottom: 12px; }

	#content-wrap {
		margin-top: 0;
		padding-top: 0;
	}
}

/* screenwidth less than or equal 420px - mobile narrow
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 420px) { 
	.header { 
	   height: 93px;

	}
   .header h1#logo-text a {
		font-size: 30px;
	} 
	.header p#intro {
		font-size: 10px;
	}
	/* content 

	-------------------------------------------------------------- */

	#content-wrap {
	}
} 

footer h1, footer h1 a {
	color: var(--secondary_color_100);
	letter-spacing: 0px;
}

/* b. Header Styles
/* ------------------------------------------------------------------ */

header, .header { 
	background-color: transparent;
}

/* .header-content .footer-content
/* ------------------------------------------------------------------ */

header, footer, .header {
	z-index: 0;
	background-image: url(../images/trame.png);
	position: relative;
}

.rainbow .header-content, .rainbow .footer-content {
	background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
	);
}

.france .header-content, .france .footer-content {
	background: linear-gradient(
		to right,
		#0c1c8c, white, #ed2e38
		);
}

.belgique .header-content, .belgique .footer-content {
	background: linear-gradient(
		to right,
		black, #ffe936, #ed2e38
		);
}

.en_berne .header-content, .en_berne .footer-content {
	background: linear-gradient(
		to right,
		black, black, gray
		);
}

.footer-content dd {
	display: inline;
	float: right;
	position: relative;
	right: 9px;
	top: 5px;
	padding-right: 9px;
}

/* Footer
/* ------------------------------------------------------------------ */

footer {
	width: 100%;;	
	padding-bottom: 9px;
}

footer a, footer a:hover, footer a:visited {
	color: white;	
}

footer a:hover {
	font-weight: bold;
}

footer {	
	padding-top: 0px;
	line-height: 16px;
}
footer .footer-content {
	height: 35px;
	background-size: 100% 100%;
}

footer .vcard {
	color: white;	
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	header .header-content, .header, footer {
		background: linear-gradient(
			to right,
			var(--gray_color_600),
			var(--gray_color_800)
		);
	}
}

/*
 Partie dépendante de la largeur de l'écran
*/
:root {
	--header_font_size: 32px;
}

/* Go To Top Button */
#go-top {
	position: fixed;
	bottom: 30px;
	right: 30px;  
	text-align: center; 
	display: none;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 48px;
	height: 48px;
	transition: all 0.2s ease-in-out;
	color: #fff;
	font-size: 16px;
	line-height: 48px;
	border-radius: 3px;
}

#go-top a:hover { background:  var(--color_scheme_secondary_link_text_color); }

#go-top a {
	position: fixed;
	bottom: 100px;
	right: 20px;
	background:  var(--color_scheme_link_hover_text_color);
}

@media only screen and (min-width: 1024px) {
	svg
	.organisation .portrait {
		height: 60px;
	}
}


/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {
	footer .vcard {
		line-height: 13px;
		left: 15px;
		top: 8px;
		font-size: 11px;
	}
	
	footer .footer-content {
		height: 89px;
	}
	.global_message {
		font-size: smaller;
	}
}

/* screenwidth less than or equal 767 px
--------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	:root {
		--header_font_size: 19px;
	}

 	/* Go To Top Button */
	#go-top { right: 20px; } 
	#go-top a {
		width: 42px;
		height: 42px;
		line-height: 42px;
	}   
}