/****************************************************
					IMPORTS
****************************************************/

@import url("reset.css");
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans'),
	url('fonts/OpenSans-Regular.woff2') format('woff2'),
	url('fonts/OpenSans-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Italic'),
	url('fonts/OpenSans-Italic.woff2') format('woff2'),
	url('fonts/OpenSans-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Open Sans Bold'),
	url('fonts/OpenSans-Bold.woff2') format('woff2'),
	url('fonts/OpenSans-Bold.woff') format('woff');
}

/****************************************************
					VARIABLES
****************************************************/

:root {
    /* couleurs textes */
   /* --color-main:			#b41;*/
    --color-main:			#c32;
    --color-main-dark:		#920;
    --color-main-x-dark:	#700;
	--color-main-light:		#f50;
    --color-link-hover:		#310;
	--color-text: 			#678;
	--color-text-light: 	#bcd;
	--color-text-dark:	 	#456;
	--color-green:			#9a1;
	--color-green-light:	#ef8;
	--color-green-dark:		#781;
    /* couleurs backgrounds */
	--color-bg:	 			#c32;
	--color-bg-black:	 	#101117;
	--color-bg-dark:	 	#310;
	--color-bg-light:		#f5f5dc;
	/*	couleurs gris	*/
    --color-grey-xx-light:	#f0f5fa;
    --color-grey-x-light:	#e4ebf2;
    --color-grey-light:     #bcd;
    --color-grey:			#89a;
	--color-grey-dark:		#678;
	--color-grey-x-dark:	#456;
    /* typos */
	--font-text: 			open sans, Arial, Helvetica, sans-serif;
	--font-title: 			open sans, Arial, Helvetica, sans-serif;
	--font-nav: 			open sans, Arial, Helvetica, sans-serif;
    /* tailles */
	--width-max:			1260px;
	--width-max-text:		728px;
	--width-max-half:		630px;
	--height-header: 		8rem;
	--height-header-shrink: 4rem /* hauteur du logo */;
	--width-soundlist-bt:	24px;
	--heigth-soundlist:		auto;
	--min-heigth-soundlist:	48px;
}

/****************************************************
					STYLES
****************************************************/

html { font-size: 16px; }
body { 
	margin: 0;
	padding: 0;
	padding-top: var(--height-header);
	font-style: normal; 
	font-weight: normal; 
	font-size: 1rem;
	line-height: 1.5;
	font-family: var(--font-text);
	color: var(--color-text);
	background-color: var(--color-bg);
 }

p, ul { 
	font-size: 1.125rem;
	margin-bottom: 2rem;
}
p.small { 
	font-size: 0.875rem;
	line-height: 1.25;
	margin-bottom: .75rem;
}
p.message { 
	padding: 1rem 0;
	color: var(--color-green);
	border: 1px solid var(--color-green);
	border-width: 3px 0;
	font-style: italic;
	text-align: center;
}


strong { font-weight: bold; }
em { font-style: italic; }
s { font-size: 75%; }

h1, h2, h3, h4, h5, h6 { line-height: 110%; font-weight: bold; font-family: var(--font-title); color: var(--color-text); margin-bottom: 2rem; }
h1 {	font-size: 	3rem; margin-bottom: 4rem; font-weight: normal; color: var(--color-main); }
h2 {	font-size: 	2rem; font-weight: normal; color: var(--color-main); }
h3 {	font-size: 	1.5rem; }
h4 {	font-size: 	1.25rem; }
h5, h6 {font-size: 	1rem; }

acronym { cursor: help; border-bottom: 1px dotted; }
code { display: block; margin-bottom: 2rem; padding: 1.25rem; font: 0.75em/*12px/16px*/ "Courier New", Courier, monospace; border: 1px dotted; }
blockquote { margin-bottom: 2rem; padding-left: 1.25rem; font-style: italic; text-align: justify; }
	blockquote p { margin: 0; }

hr { margin: 2rem auto; border: 0; height: 1px; width: auto; background-color: var(--color-grey-x-light); color: var(--color-grey-x-light); }

figcaption { 
	font-size: 0.75rem;
	font-style: italic;
	line-height: 1.25;
	margin-bottom: .75rem;
}



/*	LIENS
----------------------------------------------------*/

a { color: var(--color-main); text-decoration: underline; }
a:hover, a:active { color: var(--color-link-hover); }
a:focus { outline: none; }
a[rel=external]::after {
	content: url("../img/external.png");
	padding-left: .25rem
}
footer a[rel=external]::after {
	content: url("../img/external_white.png");
	padding-left: .25rem
}


/*	DIV
----------------------------------------------------*/

div.bloc {
	background-color: var(--color-grey-xx-light);
	padding: 1rem;
	margin-bottom: 1rem;
	text-align: center;
	border-radius: 1rem;
}



/*	LISTES
----------------------------------------------------*/

ol, ul { 
	margin-bottom: 2rem; 
	list-style-position: inside;
	line-height: normal;
}
ol { list-style-type: decimal; }
ul ul, ol ol { margin-bottom: 0; margin-left: 1.25rem; }
dl { }
	dt { font-weight: bold; }
	dd { margin: 0 0 1.25rem 1.25rem; }

ul.check_list {	
	font-size: 1.375rem;
	color: var(--color-text);
	list-style-type: "\2713   ";
	list-style-position: inside;
}
ul.check_list li { break-inside: avoid; }
ul.check_list li::marker { color: var(--color-green); }

ul.point_list { 
	margin: 0;
	padding: 0;
	font-size: 1.25rem;
	color: var(--color-text);
	list-style-type: "➥  ";
	column-count: 2;
}
ul.point_list li {
	padding: 1rem 0;
	text-wrap: balance;
	font-style: italic;
}




/*	TABLEAUX
----------------------------------------------------*/

table {
	margin-bottom: 2rem;
	padding: 0;
	width: 100%;
}
table th, table td { 
	text-align: left;
	padding: 0.5rem;
	border-bottom: 1px solid var(--color-grey-x-light);
}
table thead { border-bottom: 3px solid var(--color-grey-x-light); }
table tfoot { border-top: 3px solid var(--color-grey-x-light); }
table tfoot td { text-align: right; }
table tfoot tr:last-child td { border-bottom: none; }
table img {
	display: inline;
	margin: 0;
}

table.packs {
    border-collapse: separate;
    /*border-spacing: 0 2rem;*/
}
table.packs td {
	vertical-align: top;
	border: none;
	padding-bottom: 2rem;
}
table.packs h3 {
	margin: 0 0 .5rem;
}
table.packs h3 a {
	text-decoration: none;
}
table.packs img {
	margin-top: .5rem;
}

/*	FORMULAIRES
----------------------------------------------------*/

form.form_std input::placeholder {
	opacity: 0.75;
}
header form::placeholder {
	color: white;
	opacity: 0.75;
}


/*	form in body	*/
main .container form.form_std {
	/*max-width: var(--width-max-text);*/
	background-color: var(--color-grey-xx-light);
	border-radius: 5px;
	padding: 2rem;
	margin-bottom: 2rem;
}
main .container form.form_std input,
main .container form.form_std select,
main .container form.form_std textarea {
	padding: 10px 6px;
}
main .container form.form_std input[type="checkbox"], main .container form.form_std input[type="radio"] { 
	padding: 6px;
}
main .container form.form_std input[type="submit"] {
	padding: 16px;
	width: auto;
	margin: 2rem auto 1rem;
}
/*	No style	*/
main .container form.form_nostyle {
	padding: 0;
	background: none;
}
main .container form.form_nostyle input[type="submit"] {
	margin: 0;
}
#premium main .container form.form_nostyle input[type="submit"] {
	margin: 0 auto;
}



form.form_std { 
	/*font-size: .875rem;*/
	margin-bottom: 2rem;
}
form.form_std fieldset { 
	padding: 0;
	margin: 0 0 2rem;
	border: none;
}
form.form_std fieldset legend { 
	padding: 0;
	margin: 0;
	border: none;
	font-weight: bold; 
	font-family: var(--font-title); 
	color: var(--color-text); 
	margin-bottom: 1rem;
	font-size: 1.5rem;
}
form.form_std label { 
	display: block;
}
form.form_std input,
form.form_std select,
form.form_std textarea {
	display: block;
	padding: 6px;
	margin: 0 0 12px;
	width: 100%;
	border: 2px solid var(--color-grey-x-light);
	border-radius: 3px;
	font: normal normal 0.75rem Tahoma, Arial, Helvetica, sans-serif;
	background-color: white;
}
form.form_std input.big_input, main form.form_std input.big_input {
	padding: 1rem;
	margin: 0 0 12px;
	border: 2px solid var(--color-grey-x-light);
	border-radius: 12px;
	font: normal normal 1.5rem Tahoma, Arial, Helvetica, sans-serif;
}

form.form_std input[type="submit"] {
	padding: 8px;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	background-color: var(--color-green);
	color: white;
	font-size: 1rem;
	width: auto;
}
form.form_std input[type="checkbox"], form.form_std input[type="radio"] { 
	display: inline-block;
	width: auto;
	margin-top: 6px;
	margin-left: 2px;
	margin-bottom: 0;
}
form.form_std input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
	padding: 4px;
	outline: 2px solid var(--color-grey-x-light);
	border-color: white;
	border-radius: 2px;
    background: #fff;
}
form.form_std input[type="checkbox"]:checked {
    background: var(--color-green);
}
form.form_std input[type="checkbox"] + label, form.form_std input[type="radio"] + label { 
	display: inline;
	padding-left: 5px;
	vertical-align: 3px;
	cursor: pointer;
	font-size: .875rem;
}
form.form_std input[type="checkbox"] + label::after, form.form_std input[type="radio"] + label::after { 
	content: ' ';
	display: block;
	margin-bottom: 12px;
}

form.form_inline {
	text-align: right;
}
form.form_inline img, form.form_inline input {
	display: inline;
	width: auto;
}
form.form_inline img {
	vertical-align: middle;
}

form.form_center {
	text-align: center;
}

#email_confirmation, #email + label { display: none; }


form.panier_supp input[type="submit"] {
	width: 14px;
	background-color: transparent;
	background-image: url("../img/supp.png");
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
}


/*	CLASSES DIVERSES
----------------------------------------------------*/

.center, p.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.barre { text-decoration: line-through; }
.multicol_2 {
	padding: 0;
	column-count: 2;
	column-gap: 3rem;
}