.dropbtn {
	cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	/*
	min-width: 290px;
	max-width: 400px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
	*/
	width: max-content;
	z-index: 1000;
	padding: 24px 24px 0px 0px;
	background-color: #FFFFFF;
}

nav.mobile_nav .dropdown-content {
	width: 100%;
	padding: 10px 0px;
	gap: 5px;
}

.dropdown-content ul {
	display: block !important;
	list-style: none;
}


.dropdown-content ul li::before {
	display: inline-block;
	content: "• ";
	color: #e30613;
	font-size: 43px;
	line-height: 0px;
	vertical-align: sub;
	margin-right: 10px;
}

.dropdown.ddright .dropdown-content ul li::before {
	color: #000000;
}

.dropdown-content ul li {
	padding: 2px 0px;
}


/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 8px 8px;
	text-decoration: none;
	display: block;
	font-size: 18px !important;
	font-weight: 100 !important;
	display: contents;
}

.dropdown-bgmenu {
	display: none;
	position: fixed;
	z-index: 999;
	top: 130px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 130px;
	background: #FFFFFF;
}

.dropdown>a::after {
	display: block;
	z-index: 1001;
	content: " ";
	position: absolute;
	bottom: -12px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 2px;
	background: transparent;
}

.dropdown.over>a::after {
	display: block;
	background: #e30613;
	transition: all ease-in 0.3s;
}

.dropdown.ddright.over>a::after {
	display: none;
}


.dropdown .button_black:hover,
.button_black:focus {
	background-color: #FFFFFF;
	color: #000000;
}

.dropdown.over>a {
	color: #e30613;
	transition: all ease-in 0.3s;
}

.dropdown.over>a.button_black {
	background-color: #FFFFFF;
	color: #000000;
	border-radius: 20px;
	border: solid 1px #000000;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropdown-bgmenu {
	display: block;
}


.button_red {
	border-radius: 20px;
	padding: 5px 10px;
	background-color: #fff;
	display: inline-block;
	color: #e30613;
}

main #direction_musicale .block_gris2 {
	padding: 0px 40px;
}

.bloc_text .text_content p {
	font-weight: 100 !important;
}

.mentions_footer {
	vertical-align: middle;
	height: auto;
}

main #actions_educatives nav {
	position: -webkit-sticky;
	/* Safari */
	position: sticky;
	top: 130px;
}

main #actions_educatives nav ul li .sub_title_3 {
	font-size: 27px;
}

main #actions_educatives .education {
	padding-top: 0px !important;
	padding-bottom: 30px !important;
}

/*
#header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    background-color: #FFFFFF !important;
    z-index: 9999 !important;
}*/

.bloc_base .bloc_base_article_img {
	height: 220px !important;
}

.touchcarousel {
	height: 340px !important;
}

.touchcarousel-item>.article {
	margin: 10px !important;
	min-width: 312px;
}

.touchcarousel-disabled {
	height: 340px !important;
}

.touchcarousel-item-disabled>.article {
	margin: 10px !important;
	min-width: 325px;
}

#header nav.mobile_nav .menu_open {
	display: none;
}

/**
		* Carousel with image and text (horizontal)
		**/
#carousel-image-text-horizontal {
	width: 940px;
	height: 70px;
	margin: 0 auto;
}

#carousel-image-text-horizontal .touchcarousel-item {
	width: 216px;
	height: 60px;
	margin-right: 12px;
	background-color: #F0F3F3;
	padding: 5px;
	position: relative;
}

#carousel-image-text-horizontal img,
#carousel-image-text-horizontal h4,
#carousel-image-text-horizontal p {
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
}

#carousel-image-text-horizontal img {
	width: 60px;
	height: 60px;
}

#carousel-image-text-horizontal .rblock {
	width: 138px;
	float: left;
	margin-left: 7px;
}

#carousel-image-text-horizontal h4 {
	font: bold 13px/20px Helvetica, Arial, sans-serif;
	color: #000;
	width: 140px;
}

#carousel-image-text-horizontal p {
	font: normal 13px/20px Helvetica, Arial, sans-serif;
	color: #555;
}






/**
		* Carousel with a single image per view
		**/
#carousel-single-image {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	background: #242021;
}

#carousel-single-image .touchcarousel-container {
	height: auto;
	background: url(demo-images/wood-pattern.jpg) repeat;
}

#carousel-single-image .touchcarousel-item {
	margin-right: 0;
	width: 400px;
	height: 400px;
}

#carousel-single-image img {
	width: 300px;
	height: 300px;
	margin: 47px 0 0 47px;

	float: left;
	position: relative;
	display: block;
	padding: 3px;
	background: #FFF;
	border: 0;

	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

#carousel-single-image .tc-paging-container {
	margin-top: -29px;
}





/**
		* Carousel with image and text, custom skinned scrollbar
		**/
#carousel-image-and-text {
	width: 940px;
	height: 279px;
	margin: 0 auto;
}

#carousel-image-and-text .arrow-holder {
	height: 250px;
}

#carousel-image-and-text .touchcarousel-item {
	margin-right: 1px;
	width: 170px;
	height: 277px;
}

#carousel-image-and-text .item-block {
	width: 170px;
	height: 277px;
	display: block;
}

#carousel-image-and-text .item-block img,
#carousel-image-and-text .item-block h4,
#carousel-image-and-text .item-block p {
	float: left;
	position: relative;
	display: block;
	margin: 0;
}

#carousel-image-and-text .item-block img {
	width: 170px;
	height: 230px;
	border: 0;
	padding: 0;
}

#carousel-image-and-text .item-block {
	text-decoration: none;
	color: inherit;
}

#carousel-image-and-text .item-block h4 {
	font: bold 13px/20px Helvetica, Arial, sans-serif;
	color: #000;
	width: 158px;
	height: auto;
	padding: 2px 0 0 6px;
	-webkit-transition: color 0.2s ease-out;
	-moz-transition: color 0.2s ease-out;
	transition: color 0.2s ease-out;
}

#carousel-image-and-text .item-block:hover h4 {
	color: #1873c9;
}

#carousel-image-and-text .item-block p {
	font: normal 13px/20px Helvetica, Arial, sans-serif;
	color: #555;
	width: 158px;
	padding: 0 0 0 6px;
}

#carousel-image-and-text .scrollbar-holder {
	background: #CED7DB;
	bottom: 0;
	height: 1px;
	left: 0;
	right: 0;
}

#carousel-image-and-text .scrollbar {
	background-color: #45a8ce !important;
	bottom: 0;
}




/**
		* "Free-scroll" gallery
		**/
#carousel-gallery {
	width: 100%;
	margin: 0;
	padding: 15px 0;
	background: #EFEFEF;
	overflow: hidden !important;
}

#carousel-gallery .touchcarousel-wrapper {
	overflow: visible;
	margin-left: 80px;
}

#carousel-gallery .touchcarousel-item {
	margin-right: 15px;
	background: #CCC;
	height: 400px;
}

#carousel-gallery .arrow-icon.left {
	left: 25px;
}

#carousel-gallery .arrow-icon.right {
	right: 25px;
}

#carousel-gallery .arrow-holder {
	width: 60px;
}

#carousel-gallery .scrollbar-holder {
	bottom: 6px;
}

.button_white {
	outline: none !important;
	border: 2px solid #FFFFFF;
	border-color: #FFFFFF;
}

#header nav.pc_nav .logo .logo_link img {
	max-width: 206px !important;
}

/*
TODO: Il faut que tu le fasse pour une section spécifique, car ça enleve le contour partout dans le site
.button_red {
	outline: none !important;
}
*/
button_red.v2 {
	background-color: #FFFFFF;
	color: #e30613;
	padding: 5px 10px !important;
	border-radius: 20px;
	border-color: #e30613;
	font-size: 23px;
	border: solid 1px #e30613;
	line-height: 0.75;
	position: relative;
	display: flex;
	align-items: center;
	gap: 0px;
}

.outil_pedagogique_img {
	border: 1px solid #000;
	aspect-ratio: 1:1 !important;
	object-fit: cover;
	width: 100%;
}

main #outils_pedagogiques {
	padding-top: 0px;
	padding-bottom: 60px;
}

main #outils_pedagogiques.withoutils {
	padding-bottom: 0px;
}

main #outils_pedagogiques .inner_page_title .sub_title_3 {
	padding: 15px 0 38px 0;
}

main #outils_pedagogiques h3 {
	color: #e30613;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.2px;
	padding-bottom: 20px;
}

main #outils_pedagogiques .musiciens {
	padding-top: 35px;
	row-gap: 5px;
}

main #outils_pedagogiques .bloc_base {
	padding: 0px 0px 20px 0px;
}

main #outils_pedagogiques .bloc_base .bloc_base_img {
	height: 276px;
}


.sub_title_outil_pedagogique {
	padding-top: 15px;
	padding-bottom: 11px;
}

main #outils_pedagogiques .text_content {
	margin-top: 29px;
}

main #outils_pedagogiques .text_content .sub_title_3 {
	margin-top: 17px;
}

main #outils_pedagogiques .text_content .sub_title_1 {
	margin-top: 33px;
	line-height: 1.19;
}

main #outils_pedagogiques .text_content .description {
	margin-top: 42px;
	line-height: 1.19;
}

main #outils_pedagogiques .text_content .description.desc2 {
	margin-top: 23px;
}

main #outils_pedagogiques .info_contact {
	margin-top: 94px;
	padding: 17px 5px 0 24px;
}

main #outils_pedagogiques .crop-container {
	overflow: hidden;
	margin-top: 88px;
}

main #outils_pedagogiques .crop-container img {
	width: 100%;
}

main #outils_pedagogiques ._0_3ans {
	margin-top: 26px;
	width: 100%;
	height: 294px;
	background-image: url("/front/webp/0-3 ans.webp");
	background-position: center;
	background-size: cover;
}

.button_red:hover {
	color: #FFFFFF !important;
}

.button_red_small {
	font-size: 17px;
}

.sub_title_3 {
	padding-bottom: 10px;
	font-weight: 100 !important;
}

main #dossier-pedagogique .dossier_single_img_container img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1/1;
}

.video_dossier_pedagogique {
	padding-top: 30px;
}

main #dossier-pedagogique .bloc_base {
	padding-top: 30px;
}

main #dossier-pedagogique-main .pedagogique .bloc_base .bloc_base_img .img_container img, .audio_cover {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
    object-position: center top;
}

main #dossier-pedagogique-main .pedagogique .bloc_base .bloc_base_img .img_container, .audio_cover {
	height: fit-content;
	width: 100% !important;
}

main #dossier-pedagogique-main .pedagogique .bloc_base .bloc_base_article_img {
	height: fit-content !important;
}

main #dossier-pedagogique-main .bloc_base .reserver_pastille {
	position: inherit !important;
}

main #dossier-pedagogique-main .pedagogique .item {
	margin-bottom: 30px;
	margin-top: 30px;
}

.dossier_pedagogique_youtube {
	padding-bottom: 20px;
}

.menu_mobile_icon {
	width: 30px;
	height: 30px;
}
#header nav.mobile_nav .bottom_nav .links_container.active {
	background-color: #e30613;
}

#header nav.mobile_nav .menu_open {
	height: 100vh;
    overflow: auto;
    background: #FFFFFF;
}

#header nav.mobile_nav .dropdown-content {
	position: inherit;
}

#header nav.mobile_nav .menu_open .menu_links_2 {
	margin-bottom: 150px;
}

#header nav.mobile_nav .menu_open .menu_links .links .link_container a {
	font-size: 26px !important;
}
#header nav.mobile_nav .menu_open .menu_links .links .link_container .dropdown-content a {
	font-size: 20px !important;
}

@media screen and (max-width: 768px) {
	main #live.ondifmag .T1 {
		font-size:20px !important;
	}
}

#header nav.mobile_nav .menu_open .menu_links_2 .social_links a img {
	width: 25px !important;
	object-fit: contain;
	aspect-ratio: 1/1 !important;
}

#header nav.mobile_nav .bottom_nav .links_container a {
	width: 100%;
}

.smallText,.ql-size-small{
	font-size: 0.67em;
	font-weight: normal;
}
strong.smallText,strong.ql-size-small{
	font-size: 0.67em;
	font-weight: bold;
}
