@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,900;1,300&display=swap');

@font-face {
	font-family: 'InterExtraBold';
	src: url('/fonts/Inter-ExtraBold.woff2') format('woff2'),
			 url('/fonts/Inter-ExtraBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'InterBold';
	src: url('/fonts/Inter-Bold.woff2') format('woff2'),
			 url('/fonts/Inter-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'InterMedium';
	src: url('/fonts/Inter-Medium.woff2') format('woff2'),
			 url('/fonts/Inter-Medium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ionicons";
	src: url("/fonts/ionicons.eot?v=2.0.0");
	src: url("/fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"),
	url("/fonts/ionicons.ttf?v=2.0.0") format("truetype"),
	url("/fonts/ionicons.woff?v=2.0.0") format("woff"),
	url("/fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


:root {
	/* Background color */
	--main-bg-color: #FBFBFB;

	--white-bg-color: #FFF;

	--grey-bg-color: #EEECF0;
				--grey2-bg-color: #ECEBEB;
	--lgrey-bg-color: #F8FAFC;
	--lgrey2-bg-color: #F0F2F5;
	--hgrey-bg-color: #404040;

	--red-bg-color: #E70014;
	--red-alpha-bg-color: #E700143D;

				--hred-bg-color: #C41837;

				--yellow-bg-color: #FAF403;

				--black-bg-color: #1D1F26;
				--lblack-bg-color: #33363f;
				--mblack-bg-color: #2B2F3C;

	/* Text color */
	--main-txt-color: #1D1F26;
	--white-txt-color: #FFF;
	--grey-txt-color: #9199A3;
	--hgrey-txt-color: #484E55;

	--red-txt-color: #E70014;
	--green-txt-color: #00E71B;

	/* Text size */
	--min-txt: 0.75rem; /* 12px */
	--pref-txt: 2vw;
	--max-txt: 1rem; /* 16px */

	/* Menu size */
	--menu-width: 450px;
	--menu-height: calc(100vh - 198px); /* 175px */

	/* Border and shadow */
	--bloc-grey-border: 1px solid var(--grey-bg-color);
	--bloc-grey-border-radius: 10px;
	--bloc-grey-border-background: var(--lgrey-bg-color);
	--bloc-grey-box-shadow: 0 0 15px var(--grey2-bg-color);

	--bloc-lgrey-border-background: var(--lgrey-bg-color);

	--bloc-lgrey2-border-background: var(--lgrey2-bg-color)
}

.containerA {
	position: relative;
	background: none;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	width: 1500px;
	height: 100%;
}

.containerA * {font-size: clamp(var(--min-txt), var(--pref-txt), var(--max-txt));}

.captiondiapo {
	z-index: 1;
	position: absolute;
	display: flex;
	align-items: center;
	width: 40%;
	height: 100%;
	font-family: 'InterMedium', 'Roboto', 'Arial', 'Verdana', sans-serif;
	color: var(--grey-txt-color);
}

.captiondiapo span {font-family: 'InterBold', 'Roboto', 'Arial';color:var(--red-txt-color);}

.captiondiapo span::before {content: "";display:inline-block;background: url("/picts/css/fleche-rouge.png") no-repeat;background-size: 20px;width:25px;height:12px;margin-right: 5px;}

.captionintdiapo {padding: 30px 25px;border-radius: 15px;background-color:var(--white-bg-color);}

.captiondiapo h1 {font-family: 'InterExtraBold', 'Roboto', 'Arial';--max-txt: 2rem;}

.captiondiapo h2 {font-family: 'InterExtraBold', 'Roboto', 'Arial';--max-txt: 1.5rem;}

h1, h2, h3, h4, h5 {margin-bottom: 15px;font-family: 'InterBold', 'Roboto', 'Arial';font-weight:500;color:var(--main-txt-color);}

.captiondiapo a {text-decoration:none;}
.captiondiapo a:visited {text-decoration:none;}


.BT001, .BT001:visited, .BT002, .BT002:visited, .BT003, .BT003:visited, .BT004, .BT004:visited, .BTProd, .BTProd:visited {
	display: inline-block;
	box-sizing:border-box;
	width:fit-content;
	padding: 10px 20px;
	border: 0;
	border-radius: 7px;
	background: var(--red-bg-color);
	text-align:center;
	text-decoration:none;
	white-space: nowrap;
	transition: filter 500ms;
}

.BT001, .BT001:visited, .BTProd, .BTProd:visited {background: var(--red-bg-color);color: var(--white-txt-color);}

.BT002, .BT002:visited {background: var(--white-bg-color);border: 1px solid var(--red-bg-color);color: var(--main-txt-color);}

.BT003, .BT003:visited {background: var(--black-bg-color);color: var(--white-txt-color);}

.BT004, .BT004:visited {background: var(--white-bg-color);color: var(--main-txt-color);}

.BT001::after, .BT003::after {content: "";display:inline-block;background: url("/picts/css/fleche-blanche.png") no-repeat;background-size: 20px;width:20px;height:10px;margin-left: 10px;}

.BT001:hover, .BT002:hover, .BT003:hover, .BT004:hover, .BTProd:hover {filter: brightness(0.85);text-shadow:none;}


/*****
	Style Add
*****/
.blocBT {display:flex;flex-flow: row wrap;gap: 25px;padding:35px 0;}

.blocPicto-cont {display:flex;flex-flow: row wrap;gap: 10px;}
.blocPicto-cont > div {display: flex;flex-direction: column;justify-content: space-between;gap: 10px;max-width:70px;padding: 10px 10px 5px;border: var(--bloc-grey-border);border-radius: var(--bloc-grey-border-radius);background-color: var(--bloc-grey-border-background);text-align: center;--min-txt: 0.8rem;--max-txt: 0.9rem;}
.blocPicto-cont > div > div {display: flex;flex-direction: row;justify-content: center;align-items: center;height:60px;border: var(--bloc-grey-border);border-radius: var(--bloc-grey-border-radius);background-color: var(--bloc-lgrey2-border-background);}
.blocPicto-cont > div img {max-width: 50px;max-height: 40px;}

@media only screen and (max-width: 1750px) {
	body {width: calc(100% - 200px);padding-left: 100px;padding-right: 100px;}

	.containerA {max-width: 1250px;}
}