/****************************************************
					MISE EN PAGE
****************************************************/

.grid { 
	display: grid;
	clear: both;
	overflow: hidden;
	grid-column-gap: 1rem;
}
.grid_home {
	grid-column-gap: 3rem;
}

.grid_2			{ grid-template-columns: repeat(2, 1fr); }
.grid_2_auto	{ grid-template-columns: repeat(2, auto); }
.grid_3		 	{ grid-template-columns: repeat(3, 1fr); }
.grid_3_auto 	{ grid-template-columns: repeat(3, auto); }
.grid_4			{ grid-template-columns: repeat(4, 1fr); }
.grid_4_auto	{ grid-template-columns: repeat(4, auto); }
.grid_2_ad300	{ grid-template-columns: 300px 1fr; grid-column-gap: 2rem; }
.grid_user		{ grid-template-columns: repeat(3, 230px); grid-column-gap: 19px; }

.container {
	margin: 0 auto;
	width: var(--width-max);
	max-width: 92%;
}
.container_text {
	margin-left: auto;
	margin-right: auto;
	width: var(--width-max-text);
}
main .container > p, main .container > h2, main .container > h3, main .container > h4, main .container > ul {
	margin: 0 auto 2rem;
	max-width: var(--width-max-text);
}
main .container > h1 {
	margin: 0 auto 2rem;
	text-align: center;
	max-width: var(--width-max);
}

.columns_2 { column-count: 2; }
.columns_3 { column-count: 3; }
.columns_4 { column-count: 4; }
.columns_2 ul, .columns_3 ul, .columns_4 ul { break-inside: avoid; }


/*	CONNECT FORM
----------------------------------------------------*/
#connect_box {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: -320px;
	right: 15px;
	padding: 15px;
	width: 270px;
	height: auto;
	max-width: 100%;
	background-color: white;
	border: 3px solid var(--color-main);
	border-radius: 10px;
	z-index: 9;
	transition: all 0.3s;
	overflow: auto;
}
#connect_box p {
	font-size: 0.875rem;
	margin: 0;
	padding: 0;
}
#connect_box form {
	margin-bottom: 0;
	padding: 0;
}
#connect_box p#close_connect_box {
	text-align: right;
}
#connect_box p#close_connect_box a {
	text-decoration: none;
	font-size: 1.25rem;
	color: white;
	background-color: var(--color-main);
	padding: 0 .5rem;
	border-radius: 50%;
}
#connect_message p {
	padding: 5px;
	margin: 0;
	font-size: 0.875rem;
	background-color: yellow;
	color: black;
}

/*	HEADER
----------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	display: grid;
	clear: both;
	overflow: hidden;
	grid-column-gap: 2rem;
	grid-template-columns: 240px auto auto 180px;
	align-content: center;
	padding: 0 2rem;
	width: 100%;
	height: var(--height-header);
	transition: all .3s ease-in-out;
	background-color: var(--color-bg);
	z-index: 3;
}

header #logo {
	order: 1;
	text-align: left;
	font-size: 1.5rem;
}
header #logo img {
    width: 100%;
    height: auto;
    max-width: 240px;
    max-height: 64px;
}

header ul#nav_main {
	order: 2;
}
header ul#nav_main a.dropdown::after {
	content: '\02C5';
	margin-left: .3rem;
}
header ul {
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}
header ul li {
	display: inline-block;
	margin-left: 1.5rem;
	line-height: 4rem;
}
header ul li a {
	color: white;
	text-decoration: none;
	letter-spacing: 0.1rem;
	font-size: 0.9375rem;
	font-weight: bold;
	cursor: pointer;
	transition: 300ms;
}
header ul li a:hover {
	color: antiquewhite;
}
header ul li a::after {
	content: '';
	margin-top: -1rem;
	margin-inline: auto;
	text-align: center;
	width: 0px;
	height: 2px;
	display: block;
	background: antiquewhite;
	transition: 300ms;
}
header ul li a:hover::after {
	width: 100%;
}

header ul li img {
	display: inline-block;
	vertical-align: middle;
	line-height: 4rem;
}

header form {
	order: 3;
	display: grid;
	overflow: hidden;
	grid-column-gap: 0;
	grid-template-columns: 1fr 40px;
	align-content: center;
	padding: 0;
	margin: auto;
	width: 100%;
	height: 40px;
	border: 2px solid white;
	border-radius: 20px;
}
header form input {
	padding: 0 16px;
	height: 40px;
	background-color: transparent;
	border: none;
	font-size: 0.875rem;
	color: white;
}
header form input[type="submit"] {
	width: 40px;
	background-color: transparent;
	background-image: url("../img/ico_search.png");
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
}

header ul#nav_user {
	order: 4;
	text-align: right;
}
header ul#nav_user li {
	margin-left: 0.8rem;
}


/*	Megamenu	*/

div.megamenu {
	position: absolute;
	top: var(--height-header);
	left: 0;
	width: 100%;
	transition: 0.3s ease-in-out;
	margin-top: -2200px;
	z-index: 2;
	padding: 3rem;
	background-color: var(--color-bg-dark);
	color: white;
	opacity: 0.95;
}
div#menu_bruitages .megamenu_list { column-count: 5; }
div#menu_musiques .megamenu_list { column-count: 3; }
div.megamenu ul {
	margin: 0 0 2rem;
	list-style: none;
	break-inside: avoid;
}
div.megamenu ul li {
	font-size: .875rem;
	line-height: 1.25rem;
}
div.megamenu h2 {
	text-align: center;
}
div.megamenu h4 {
	display: inline-block;
	margin: 0 0 0.5rem;
	color: var(--color-main);
}
div.megamenu ul a { 
	color: white;
	text-decoration: none;
}
.close_menu {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	cursor: pointer;
}

/*	MAIN
----------------------------------------------------*/
main {
	padding: 4rem 0;
	background-color: white;
}
main > h1, #index main section > h1 {
	margin-bottom: 4.5rem;
}
main section { 
	margin-bottom: 4rem;
}
#index main p { text-align: justify; }

section.category_list {
	background-color: var(--color-grey-xx-light);
	padding: 3rem 0;
	margin: 0;
}
main section.category_list {
	margin-bottom: 3rem;
}
section.category_list ul {
	/*color: white;*/
	list-style-type: "›  ";
	font-size: 0.875rem;
}
section.category_list ul li {
	padding: 0.125rem 0;
}
section.category_list a {
	color: var(--color-text-dark);
	text-decoration: none;
}
section.category_list a:hover {
	color: var(--color-green);
	text-decoration: underline;
}
section.category_list h2 {
	margin-bottom: 3rem;
}
section.category_list h3 {
	color: var(--color-main);
	font-size: 1.25rem;
}


/*	Encarts	*/

.encart {  
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto 1fr;
	gap: 0px 30px;
	grid-template-areas:
	"encart_titre encart_titre"
	"encart_img encart_list";
}
#encart_premium {  
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
	"encart_titre encart_titre"
	"encart_img encart_list"
	"encart_cta encart_cta";
}
/**/
.encart_titre { grid-area: encart_titre; }
.encart_titre h2 { 
	text-wrap: balance;
	font-size: 2.5rem;
	text-align: center;
}

.encart_img { 
	grid-area: encart_img;
	align-self: center; 
}
/**/
.encart_list { 
	grid-area: encart_list;
	align-self: center;
}
.encart_list ul { 
	margin: 0;
	padding: 0;
}
.encart_list ul li { margin-bottom: 1rem; }
/**/
.encart_cta { grid-area: encart_cta; }
.encart_cta p { margin: 2rem 0; }



section#premium {
	padding: 2rem 0 1rem;
	background-color: var(--color-bg-light);
	border-radius: 10px;
}
span.promo_premium {
	color: var(--color-main);
	/*
	font-size: 125%;
	*/
}

/*	Hero	*/

#hero {
	padding: 4rem 0 2rem;
	text-align: center;
	background-color: var(--color-main);
	background-image: url("../img/banniere_bg.jpg");
	background-position: center; 
	color: white;
}
#hero h1 {
	margin: 0 auto 3rem;
	text-align: center;
	max-width: 92%;
	color: white;
}
#hero h2 {
	color: white;
}
#hero p {
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 1.25rem;
	max-width: var(--width-max);
	text-wrap: balance;
}
#hero a {
	color: white;
}
#hero .grid p {
	font-size: 1rem;
	text-align: justify;
}


/*	NEWS	*/

#newslist { grid-column-gap: 40px; }
#newslist article {
	margin-bottom: 2rem;
	padding: 18px;
	border: 2px solid var(--color-grey-x-light);
}
#newslist img { 
	margin: 0 0 1rem;
	width: 100%;
}
main #newslist h3 { 
	margin: 0 0 0.75rem;
	text-align: left;
	font-size: 1.25rem;
}
main #newslist p {
	font-size: 0.875rem;
	margin: 0;
	text-align: left;
}
main #newslist p.date {
	font-size: .75rem;
	font-style: italic;
}

#blog .container_text article p:first-of-type {
	font-size: 1.5rem;
	border-left: 5px solid var(--color-grey-x-light);
	padding-left: 1rem;
}

article p iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
article p:has(iframe) {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

/*	iframes audio */
article p iframe.audio {
	position: relative;
}
article p:has(iframe.audio) {
	padding-bottom: 0;
	height: auto;
	overflow: hidden;
}



.nav_articles {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.nav_articles p {}

ul.pagination {
	text-align: center;
	list-style: none;
}
ul.pagination li {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 4px;
	min-width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
}
ul.pagination a {
	display: block;
	width: 2rem;
	user-select: none;
	color: white;
	background-color: var(--color-main);
	border-radius: 3px;
	transition: all 0.15s ease-in-out;
	text-decoration: none;
}
ul.pagination a.active, ul.pagination a:hover {
	background-color: var(--color-bg-dark);
	color: white;
}



/*	Pricing	*/

#pricing { grid-column-gap: 40px; }
#pricing div {
	margin-bottom: 1rem;
	padding: 1rem 1.5rem 1.5rem;
	border: 3px solid var(--color-grey-x-light);
	text-align: center;
	border-radius: 8px;
}
#pricing h2 {
	margin-bottom: 1rem;
}
#pricing h3 {
	margin: 0;
	color: var(--color-green);
}
#pricing p {
	margin-bottom: 0rem;
}
#pricing form {
	padding-top: 1rem;
}


/*	UL sound List	*/

ul.sound_list {
	list-style: none;
	width: 100%;
	border-bottom: 2px solid var(--color-grey-x-light);
	font-size: 1rem;
}
main .container > ul.sound_list {
	max-width: var(--width-max);
}
ul.sound_list li {
	margin-bottom: 0;
	padding: 0 4px;
	height: var(--heigth-soundlist);
	min-height: var(--min-heigth-soundlist);
	box-sizing: content-box;
	border-top: 2px solid var(--color-grey-x-light);
	display: grid;
	grid-template-columns: 6fr var(--width-soundlist-bt) var(--width-soundlist-bt) var(--width-soundlist-bt) 1fr var(--width-soundlist-bt) var(--width-soundlist-bt) 1fr var(--width-soundlist-bt) var(--width-soundlist-bt);
	grid-column-gap: 8px;
	/*align-content: center;*/
	overflow: hidden;
}
ul.sound_list li:hover {
	background-color: var(--color-grey-xx-light);
}
ul.sound_list li.current_sound {
	background-color: var(--color-grey-xx-light);
}
ul.sound_list li a {
	display: inline;
	padding: 0;
	margin: 0;
	text-decoration: none;
	color: var(--color-text-dark);
}
ul.sound_list li div.sound_info {
	padding: 0.5rem 0;
	height: auto;
	overflow: hidden;
	box-sizing: border-box;
}
ul.sound_list li div.sound_info a {
	/*display: inline-block;*/
}

ul.sound_list li div.sound_info strong {
	font-size: 1.25rem;
}
span.free_tag {
	vertical-align: top;
	font-size: .75rem;
	background-color: var(--color-green);
	color: white;
	padding: 0 .15rem;
	text-transform: uppercase;
	border-radius: 3px;
}
span.new_tag {
	vertical-align: top;
	font-size: .75rem;
	background-color: var(--color-main);
	color: white;
	padding: 0 .15rem;
	margin-right: 0.25rem;
	text-transform: uppercase;
	border-radius: 3px;
}
span.licence_tag {
	vertical-align: top;
	font-size: .75rem;
	background-color: var(--color-grey-x-light);
	color: white;
	padding: 0 .15rem;
	text-transform: uppercase;
	border-radius: 3px;
}
ul.sound_list li div.sound_file {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: .25rem;
	border-left: 2px solid var(--color-grey-x-light);
	height: 100%;
}
ul.sound_list li div.sound_file p {}
ul.sound_list li div.sound_player {
	align-self: center;
	/*margin-top: .15rem;*/
}
ul.sound_list li div.sound_player img:hover,
ul.sound_list img.ajout_favori:hover,
ul.sound_list img.retrait_favori:hover{
	cursor: pointer;
}
ul.sound_list li div.bt {
	align-self: center;
	padding: 0;
	overflow: hidden;
}
ul.sound_list li p {
	margin: 0;
	line-height: 150%;
	font-size: 0.75rem;
}
ul.sound_list strong {
	color: var(--color-text-dark);
	font-size: 0.9375rem;
}
ul.sound_list li.free_sound .sound_info strong {
	color: var(--color-green);
}

ul.sound_list .sound_file strong {
	font-size: 0.8125rem;
	text-transform: uppercase;
}
ul.sound_list .sound_file strong.format {
	padding-right: .2rem;
}
ul.sound_list .sound_file strong.prix {
	color: var(--color-main);
}
ul.sound_list .sound_file strong.prix-barre {
	color: var(--color-green);
	text-decoration: line-through;
}
ul.sound_list strong.free {
	color: var(--color-green);
}
ul.sound_list form {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
ul.sound_list img {
	margin: 0;
	padding: 0;
}
ul.sound_list form input[type="submit"]{
	display: block;
	width: var(--width-soundlist-bt);
	height: var(--width-soundlist-bt);
	background-color: transparent;
	background-image: url("../img/bt_cart.png");
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	cursor: pointer;
}

#waveform {}


/* Page sound	*/

span.play_btn {}

span.play_btn img {
	display: inline-block;
	margin-right: 1rem;
	margin-bottom: 0;
}
span.play_btn img:hover {
	cursor: pointer;
}
#player_detail {
	display: grid;
	grid-column-gap: 0;
	grid-template-columns: 120px 1fr ;
	overflow: hidden;
	border: 1px solid var(--color-grey-x-light);
	border-width: 2px 0;
	margin: 0 auto 2rem;
	width: var(--width-max);
	max-width: 92%;
}
#player_detail img {
	margin: 0;
	padding: 0;
	align-self: center;
	justify-self: center;
	cursor: pointer;
}
#player_detail_waveform {
	z-index: 1;
}
a.button {
	display: block;
	padding: 0.5rem 1rem;
	text-align: center;
	text-decoration: none;
	color: white;
	background-color: var(--color-green);
	border-radius: .25rem;
	line-height: 2rem;
}
a.button strong::before {
	vertical-align: bottom;
	margin-right: .4rem;
	position: relative; 
	left: 0;
	top: .3rem;
}
a.button_premium {
	background-color: var(--color-main-light);
}
a.button_premium strong::before {
	content: url("../img/ico_premium.png");
}
a.button_dl strong::before {
	content: url("../img/ico_dl.png");
}
a.button_ogd strong::before {
	content: url("../img/ico_ogd.png");
}

button.button_add {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	font-family: var(--font-text);
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: var(--color-main);
	color: white;
	border: none;
	border-radius: .25rem;
	line-height: 2rem;
	cursor: pointer;
}
button.button_add::before {
	content: url("../img/ico_cart.png");
	vertical-align: bottom;
	margin-right: .5rem;
	position: relative; 
	left: 0;
	top: .25rem;
}

div .sound_purchase_box {
	background-color: var(--color-grey-xx-light);
	padding: 1.5rem;
	margin-bottom: 2rem;
}

/*	Page catégorie	*/

span.category_count {
	display: block;
	color: var(--color-text);
	font-size: 1.5rem;
}

.category_header {
	display: grid;
	grid-template-columns: 120px 1fr; 
	grid-template-rows: 48px 1fr; 
	gap: 0px 2rem;
	margin-bottom: 2rem;
	padding-top: 4rem;
	grid-template-areas: 
	"cover titre"
	"cover description";
}
.category_header img {
	grid-area: cover;
	margin: 0;
	padding-top: 3px;
	border-radius: 20px;
}
.category_header h2 {
	grid-area: titre;
	display: block;
	text-align: left;
	margin: 0;
}
.category_header p {
	grid-area: description;
	margin: 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

ul.tags_list {
	list-style: none;
}
ul.tags_list li {
	display: inline;
}
ul.tags_list li a {
	display: inline-block;
	margin: 0 .5rem .5rem 0;
	padding: .5rem 1rem;
	text-decoration: none;
	color: var(--color-text-dark);
	background-color: var(--color-grey-xx-light);
	border: solid 1px var(--color-grey-light);
	border-radius: 3px;
}

ul.category_list {
	list-style: none;
	/*column-count: 3;*/
	font-size: 1.5rem;
}
ul.category_list li::before {
	content: '› ';
}
ul.category_list li a { text-transform: capitalize; }


/*	Page série	*/

.serie_header {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	margin-bottom: 2rem;
}
.serie_header img {
	margin: 0;
	border-radius: 20px;
}
.serie_header p {
	margin: 0;
}


/*	Page compte	*/
a.user_card {
	display: block;
	margin-bottom: 19px;
	height: 230px;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	background-color: var(--color-grey-xx-light);
	transition: .5s all ease;
}
a.user_card:hover {
	background-color: var(--color-grey-light);
}
a.user_card h3 {
	font-size: 1.125rem;
}


/*	Page recherche	*/

#recherche h2 {
	border-style: solid;
	border-color: var(--color-main);
	border-width: 1px 1px 0 1px;
	padding: .5rem;
}
main .container > h3.search_results_serie {
	margin: 0 auto .5rem;
	max-width: var(--width-max);
	font-weight: normal;
	font-size: 1rem;
}


/*		Packs		*/
.pack { overflow: auto; }
.pack h3 { margin-bottom: .5rem; }
.pack h3 a { text-decoration: none; }
.pack p {
	margin-bottom: 0;
	font-size: 0.875rem;
}
.pack img {
	width: 120px;
	float: left;
	margin: 5px 20px 0 0;
}

/*	FOOTER
----------------------------------------------------*/

.grid_footer	{ 
	grid-template-columns: 300px repeat(3, auto); 
	grid-gap: 2rem;
}

footer {
	padding: 4rem 0 1rem;
	background-color: var(--color-bg);
	color: white;
}
footer div.container {
	justify-content: space-between;
}
footer h2 {
	color: var(--color-main-x-dark);
	font-weight: bold;
}
footer h3 {
	font-size :	1.25rem;
	margin-bottom: 1rem;
	color: var(--color-main-x-dark);
}
footer a {
	color: white;
}
footer ul {
	list-style: none;
	font-size: 1rem;
}
footer ul li {
	margin-bottom: 0.5rem;
}
footer ul a {
	text-decoration: none;
}
footer hr { 
	background-color: var(--color-main-dark); 
	color: var(--color-main-dark);
}

ul.footer_links {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.8125rem;
	opacity: 0.5;
}
ul.footer_links li {
	display: inline-block;
	margin: 0 .75rem;
}


#player { 
	/*display: none; */
	position: fixed; 
	bottom: -110px;; 
	width: 100%; 
	height: 110px;
	background-color: var(--color-bg-black);
	line-height: 3.5em;
	transition: bottom .3s ease;
	z-index: 2;
}
#player.show_player {
	bottom: 0;
}

#player .container {
	display: grid;
	grid-template-columns: 30px 1fr 46px;
	grid-template-rows: 45px 50px;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
	"play sound_name close"
	" waveform waveform waveform";
}

#player_sound_name	{
	grid-area: sound_name;
	text-align: left;
	padding-left: .625rem;
	line-height: 45px;
	color: var(--color-text-light);
	font-size: 0.875rem;
}
#player_play {
	grid-area: play;
	display: flex;
	justify-content: center;
	align-items: center;
}
#player_waveform {
	grid-area: waveform;
	border: 1px solid var(--color-text-dark);
	border-radius: 3px;
	/*border-top: 1px solid var(--color-grey-x-dark);*/
}
#player_close	{
	grid-area: close;
	display: flex;
	justify-content: center;
	align-items: center;
}
#player_play img, #player_close img { cursor: pointer; }




/*	HOME
----------------------------------------------------*/



/*	DIVERS
----------------------------------------------------*/

/*	back to top	*/

a#backtotop {
	position: fixed;
	right: 10px;
	bottom: -50px;
	width: 70px;
	height: 40px;
	overflow: hidden; 
	text-indent: -999px; 
	background: url(../img/totop.png) no-repeat left top; 
	text-decoration: none;
	transition: all .2s ease-in-out;
	z-index: 3;
}
a#backtotop:hover {
	height: 50px;
	background-position: 0 0;
}
a#backtotop:active, a#backtotop:focus { outline: none; }

/*	Notify	*/
.notify_success {
	background-color: var(--color-green);
}



/*	POPUP
----------------------------------------------------*/

#popup {
	position: fixed;
	top: 0;
	width: 100vw;
	height: 100%;
	display: grid;
	align-content: center;
	justify-content: center;
	background-color: rgba(0,0,0,0.75);
	z-index: 1002;
	visibility: hidden;
}
#popup_content {
	position: relative;
	padding: 30px;
	width: 420px;
	max-width: 100%;
	height: auto;
	background-color: white;
	border-radius: 10px;
	text-align: center;
}
a#popup_close {
	position: absolute;
	top: 0;
	right: 8px;
	color: var(--color-main);
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 30px;
}