/****************************************************
				RESPONSIVE > 1280
****************************************************/

@media only screen and (min-width: 1280px) {

ul.sound_list form {
	/*margin-top: -1px;*/
}

/*********************	/fin	*********************/ }



/****************************************************
				RESPONSIVE 1100 <-> 1279
****************************************************/

@media only screen and (min-width: 1100px) and (max-width: 1279px) {

html { font-size: 15px; }

:root {
	--width-max:			92%;
	--width-max-half:		46%;
}
.columns_4 { 
	column-count: 3;
}
header {
	grid-column-gap: 1rem;
	grid-template-columns: 240px auto auto 180px;
	padding: 0 1rem;
}

#hero { background-image: url("../img/banniere_bg_1280.jpg"); }

/*	Sound list	*/
ul.sound_list li {
	grid-template-columns: 5fr 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);
}

/*********************	/fin	*********************/ }




/****************************************************
				RESPONSIVE 768 <-> 1099
****************************************************/

@media only screen and (min-width: 768px) and (max-width: 1099px) { 

:root {
	--width-max:			92%;
	--width-max-half:		46%;
	--height-header-shrink: 7rem;
	--width-soundlist-bt:	21px;
	--min-heigth-soundlist:	48px;
}

html { font-size: 14px; }

.grid { grid-column-gap: 20px; }
.columns_3, .columns_4 { 
	column-count: 2;
	margin-left: auto;
	margin-right: auto;
	width: var(--width-max-text);
}

header {
	grid-template-columns: 180px 1fr 180px; 
	grid-template-rows: 1fr 64px;
	grid-template-areas: 
	"search search nav_user"
	"logo nav_main nav_main";
	align-items: center;
}
header #logo { grid-area: logo; }
header form { grid-area: search; }
header form {
	width: 100%;
	max-width: 480px;
	height: 26px;
	border-radius: 16px;
	border-width: 1px;
	margin: auto 0;
}
header form input {
	padding: 0 13px;
	height: 26px;
}
header form input[type="submit"] { 	width: 26px; }

header ul#nav_main { grid-area: nav_main; }
header ul#nav_user { grid-area: nav_user; }
header ul { text-align: right; }
header ul li {
	margin: 0 0 0 2rem;
	line-height: 2rem;
}
header ul li a { font-size: 1rem; }
header ul li a::after {	margin-top: 0; }

/*	megamenu	*/
div#menu_bruitages .megamenu_list { column-count: 4; }


#hero { background-image: url("../img/banniere_bg_1100.jpg"); }

#index main section { padding-bottom: 3rem; }


/*	Sound list	*/

ul.sound_list li {
	grid-template-columns: 4fr 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: 6px;
}

ul.sound_list form input[type="submit"]{ width: var(--width-soundlist-bt); }
/*ul.sound_list li div.sound_info { padding-top: 4px; }*/
ul.sound_list strong { font-size: 0.875rem; }
ul.sound_list strong.free { font-size: 0.8125rem; }

/*	Page catégorie	*/
.category_header {
	grid-template-columns: 100px 1fr;
	grid-template-rows: 48px 1fr;
	gap: 0 1.5rem;
	margin-bottom: 1.5rem;
	padding-top: 4rem;
}
.category_header h2 { font-size: 1.75rem; align-self: center; }
.category_header p { line-height: 1.5rem; }

/*	pricing	*/
#pricing { grid-column-gap: 20px; }
#pricing div {
	padding: 0.6rem 1rem 1rem;
}


/*********************	/fin	*********************/ }




/****************************************************
				RESPONSIVE -> 767
****************************************************/

@media only screen and (max-width: 767px) {

:root {
	--width-max:			92%;
	--width-max-half:		92%;
	--width-max-text:		92%;
	--height-header: 		auto;
	--height-header-shrink: auto;
	--width-soundlist-bt:	21px;
	--min-heigth-soundlist:	48px;
}
html { font-size: 14px; }

h1 { font-size: 2.5rem; }
main > h1, #index main section > h1 { margin-bottom: 3rem; }

.encart { display: block; }
.encart_img { text-align: center; }
.encart_img img { 
	max-width: 300px;
	margin: 0 auto 2rem;
}
ul.point_list { 
	column-count: 1;
	text-align: center;
}


h2 { font-size: 1.75rem; }
.columns_2, .columns_3, .columns_4 { 
	column-count: 1;
	margin-left: auto;
	margin-right: auto;
	width: var(--width-max-text);
}

.grid { 
	display: block; 
	overflow: auto;
	/*text-align: center;*/
}

/*	header */
header { position: relative; display: block; text-align: center; padding: 0 0 1rem; }

header form {
	margin-bottom: 20px;
	width: 90%;
	max-width: 600px;
	height: 26px;
	border-radius: 16px;
	border-width: 1px;
}

header #logo { padding: 0; margin-bottom: 1rem; text-align: center;}
header #logo a { display: inline-block; text-align: center;}
header ul { 
	margin: 1rem 0;
	text-align: center;
}
header ul li { 
	margin: 0 1rem;	
	line-height: 2rem;
}
header ul li a { font-size: 1rem; }
header ul li a::after {	margin-top: 0; }
header ul#nav_user { text-align: center; }
header ul#nav_user li { margin: 0; }


#hero { background-image: url("../img/banniere_bg_768.jpg"); }

#index main section { padding-bottom: 2rem; }

/*	megamenu	*/
div#menu_bruitages .megamenu_list, div#menu_musiques .megamenu_list { column-count: 2; }
div.megamenu { position: absolute; }
div.megamenu ul li {
	font-size: 1rem;
	line-height: 1.5rem;
}

/*	main	*/
main { padding: 2rem 0; }

/*	NEWS	*/
#news article { 
	margin: 0 auto 2rem;
	max-width: 420px;
}
#news img { margin: 0 auto 1rem; }
#news h3 { margin: 0 0 0.25rem; }
#news p { font-size: 1rem; }

/*	Sound list	*/
/*
ul.sound_list li {
	grid-template-columns: var(--width-soundlist-bt) 4fr 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: 6px;
}
*/
ul.sound_list {
	border-bottom: 3px solid var(--color-grey-x-light);
}
ul.sound_list li {
	/*height: calc(var(--heigth-soundlist) * 2);*/
	height: auto;
	min-height: auto;
	padding: 0;
	margin-bottom: 1rem;
	grid-template-columns: repeat(3, var(--width-soundlist-bt)) 1fr repeat(2, var(--width-soundlist-bt)) 1fr repeat(2, var(--width-soundlist-bt)); 
	/*grid-template-rows: repeat(2, 1fr);*/
	grid-template-rows: var(--heigth-soundlist) 36px;;
	grid-column-gap: 8px;
	grid-row-gap: 0;
	border-top: 3px solid var(--color-grey-x-light);
}
ul.sound_list li > * {
	padding: 0;
	margin: 0;
}
ul.sound_list li div.sound_file {
	justify-content: flex-end;
	padding: 0;
	border-left: none;
}
ul.sound_list li div.bt {
}

.sound_info { grid-area: 1 / 1 / 2 / 10; border-bottom: 1px solid var(--color-grey-x-light); }
.sound_player { grid-area: 2 / 1 / 3 / 2; }
.bt_favori { grid-area: 2 / 2 / 3 / 3; }
.bt_info { grid-area: 2 / 3 / 3 / 4; }
.sound_file_mp3 { grid-area: 2 / 4 / 3 / 5;}
.bt_mp3_premium { grid-area: 2 / 5 / 3 / 6; }
.bt_mp3_dl { grid-area: 2 / 6 / 3 / 7; }
.sound_file_wav { grid-area: 2 / 7 / 3 / 8; }
.bt_wav_premium { grid-area: 2 / 8 / 3 / 9; }
.bt_wav_dl { grid-area: 2 / 9 / 3 / 10; }

ul.sound_list li div.sound_file_mp3 {
	padding-left: 0;
	border-left: none;
}

ul.sound_list form input[type="submit"]{ width: var(--width-soundlist-bt); }
/*ul.sound_list li div.sound_info { padding-top: 4px; }*/
ul.sound_list strong { font-size: 0.875rem; }
ul.sound_list strong.free { font-size: 0.5rem; }

/*	Page catégorie	*/
.category_header {
	grid-template-columns: 80px 1fr;
	grid-template-rows: 30px 1fr;
	gap: 0 1rem;
	margin-bottom: 2rem;
	padding-top: 2rem;
}
.category_header h2 { font-size: 1.5rem; align-self: center; }
.category_header p { line-height: 1.25rem; }

/*	pricing	*/
#pricing div {
	margin: 0 auto 1rem;
	max-width: 300px;
}

ul.check_list { column-count: 1; }


/*	footer	*/
footer section { text-align: center; margin-bottom: 4rem; }
footer section img { margin: 0 auto; }

.multicol_2 {
	column-count: 1;
	column-gap: 0;
}


/*********************	/fin	*********************/ }



/****************************************************
				RESPONSIVE -> 450
****************************************************/

@media only screen and (max-width: 450px) {


ul.sound_list strong {
	font-size: 0.75rem;
}
ul.sound_list strong.free {
	/*font-size: 0.625rem;*/
}

/*********************	/fin	*********************/ }