/*********** Sélecteurs génériques ***********/
.bootstrap-scope body {margin: 0;}
.bootstrap-scope .container-fluid .container {padding: 0;}

/* liens */
.bootstrap-scope a, .bootstrap-scope a:hover, .bootstrap-scope a:visited {text-decoration: none;}
.bootstrap-scope a {color: var(--link_color);}
.bootstrap-scope a:hover {color: var(--link_color_hover);}
.bootstrap-scope .dropdown-item.active, .bootstrap-scope .dropdown-item:active {background-color: var(--primary_color);}
/* pictos */
.bootstrap-scope .fa, .bootstrap-scope .fas, .bootstrap-scope .far, .bootstrap-scope .fab {color: var(--main_color); padding-right: 5px;}
.bootstrap-scope .fa-flip-horizontal {padding-left: 5px; padding-right: 0;}

/* vidéos responsive */
.bootstrap-scope .video-container {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.bootstrap-scope .video-container iframe, .bootstrap-scope .video-container object, .bootstrap-scope .video-container embed {position: absolute; top: 0; left: 0;	width: 100%; height: 100%;}

@media(max-width:575.8px) {
	.bootstrap-scope .fa {color: var(--main_color); padding-right: 0;}
}

/*********** slideshow ***********/
.bootstrap-scope #carousel {padding: 0;}
.bootstrap-scope #slider_form {position: absolute; left: 0; right: 0; bottom: 15px;}
.bootstrap-scope #slider_form .row .col:first-child {padding: 0;}
.bootstrap-scope #carousel .stripe {height: 25px;}
.bootstrap-scope .slogan {font-size: 2.5rem; line-height: 2.5rem; color: #FFFFFF; position: absolute; bottom: 40px; width: 100%; text-align: center;}
.bootstrap-scope #slider_form + .slogan, .bootstrap-scope .stripe + .slogan {bottom: 84px;}
.bootstrap-scope h1 {font-size: 2.5rem; line-height: 2.5rem;}
@media(max-width:1199.8px) {
	.bootstrap-scope .slogan, .bootstrap-scope .slogan h1 {font-size: 2rem;}
	/*#slider_form + .slogan, .stripe + .slogan {bottom: 90px;}*/
}
@media(max-width:991.8px) {
	.bootstrap-scope #slider_form {position: unset;}
	.bootstrap-scope #slider_form + .slogan, .bootstrap-scope .stripe + .slogan {bottom: 250px;}
	.bootstrap-scope .slogan, .bootstrap-scope .slogan h1 {font-size: 1.8rem;}
}
@media(max-width:767.98px) {
	.bootstrap-scope .slogan, .bootstrap-scope .slogan h1 {font-size: 1.5rem;}
}
@media(max-width:575.8px) {
	.bootstrap-scope #carousel .stripe {height: 0;}
	.bootstrap-scope .slogan, .bootstrap-scope .slogan h1 {font-size: 1rem; line-height: 1rem;}
}

/*********** stripe (bandeau bleu) ***********/
.bootstrap-scope .stripe {background-color: var(--main_color); color: #FFFFFF;}
.bootstrap-scope .secondary_stripe {background-color: var(--stripe_secondary_color);}

/*********** bouton back to top ***********/
.bootstrap-scope #back-to-top {cursor: pointer; position: fixed; bottom: 50px; right: 20px; display:none;}
.bootstrap-scope #back-to-top .fas {color: white; padding: 0;}
@media(max-width:767.98px) {
	.bootstrap-scope #back-to-top {right: 5px;}
}