/* Styles pour les écrans Mobile S */
@media screen and (max-width: 320px) {

	:root {
		--var-max-width-logo: 150px;
		--var-margin-logo: 0px;
		--var-size-navbar: 50px;
		--var-size-article-img: 100%;
		--var-size-container: 100%;
	}

}

/* Styles pour les écrans Mobile M */
@media screen and (min-width: 320px) {
	:root {
		--var-max-width-logo: 200px;
		--var-size-navbar: 60px;
		--var-size-article-img: 100%;
		--var-size-container: 100%;
	}
}

/* Styles pour les écrans Mobile L */
@media screen and (min-width: 375px) {
	:root {
		--var-max-width-logo: 250px;
		--var-size-navbar: 73px;
	}
}

/* Styles pour les écrans Tablettes */
@media screen and (min-width: 425px) {
	:root {
		--var-max-width-logo: 300px;
		--var-size-navbar: 90px;
	}
}

/* Styles pour les écrans Bureau */
@media screen and (min-width: 768px) {
	:root {
		--var-margin-logo: 20px;
		--var-size-article-img: 250px;
	}
}

/* Styles pour les écrans Bureau L */
@media screen and (min-width: 1024px) {
	:root {
		--var-size-container: 90%;
	}
}

/* Styles pour les écrans Bureau XL */
@media screen and (min-width: 1440px) {
	:root {
		--var-size-article-img: 300px;
		--var-size-container: 80%;
	}
}

/* Styles pour les écrans Bureau XXL */
@media screen and (min-width: 2560px) {
	:root {
		--var-size-article-img: 350px;
		--var-size-container: 75%;
	}
}

:root {
	--bs-bluedrago-rgb: 32, 102, 148;
	--var-max-height-logo: 80px;
}

.bg-default {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-bluedrago-rgb), var(--bs-bg-opacity)) !important;
}

#navbar {
	position: relative;
	height: var(--var-size-navbar);
}

nav img {
	max-width: var(--var-max-width-logo);
	max-height: var(--var-max-height-logo);
	margin-right: var(--var-margin-logo);
}

.container-fluid {
	width: var(--var-size-container);
}

.card-header {
	font-size: x-large;
}

.card-body {
	font-size: larger;
}

.card-footer {
	font-size: large;
}

.card-body>img {
	float: left;
	margin-right: 20px;
	margin-left: 0px;
}

.card-body article img {
	width: var(--var-size-article-img);
}

.figure-right {
	float: right;
	margin-left: 20px;
	margin-right: 0px;
}

.figure-left {
	float: left;
	margin-right: 20px;
	margin-left: 0px;
}

figcaption {
	width: var(--var-size-article-img);
}

footer a {
	color: lightblue;
}

footer a:hover {
	color: #878750;
}

@media screen and (max-width: 400px) {
	.card-body img {
		width: 100%;
	}
}

@font-face {
	font-family: 'FranklinGothicRegular';
	font-style: normal;
	font-weight: normal;
	src: local('FranklinGothicRegular'), url('../fonts/FranklinGothic.woff') format('woff');
}

@font-face {
	font-family: 'FranklinGothicCondensed';
	font-style: normal;
	font-weight: normal;
	src: local('FranklinGothicCondensed'), url('../fonts/FranklinGothicCondensed.woff') format('woff');
}

.zyzomis {
	font-family:'FranklinGothicCondensed', arial, helvetica, sans-serif;
	color: #ff0000;
	font-weight:normal;
}

.fs-6 {
	font-size: 0.7rem!important;
}