@charset "UTF-8";

@import url("https://use.typekit.net/pcc8ykz.css");

* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
*::selection {
  background-color: #708ccf !important;
  color: white !important;
}
*::-moz-selection {
  background-color: #708ccf !important;
  color: white !important;
}
body {
	margin:0 auto;
    color: #1b3047;
	background-color: #FFFFFF;
	background-image: url("../images/img-left.png"), url("../images/img-right.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom 40px left, bottom 40px right;
	background-size: 40%;	
	
/*Poppins Regular*/
font-family: poppins, sans-serif;
font-weight: 400;
font-style: normal;
}
body.offre-30,
body.offre-50,
body.offre-50se {
	overflow-x: hidden;
}
main {
	box-shadow: 0px 400px 0px #FFF;
}
h1, h2, h3, h4, p.offre {
/*Poppins Medium*/
font-family: poppins, sans-serif;
font-weight: 500;
font-style: normal;
	color:#1b3047;
}

h1 {font-size:2.50em;}
h2 {font-size:2.25em;}
h3 {font-size:2.00em;}
h4 {font-size:1.75em;}
h5 {font-size:1.50em;}
h6 {font-size:1.25em;}

p, li, td h5, label, a {
	font-size: 1.00em;
	line-height: normal;
}
p.legende {font-size: 0.75em;}
ul li {list-style: none}
a {border:none;}
sup {font-size: 0.6em; line-height: 0; vertical-align: super;}

hr {
	border: none;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	-moz-border-image: url(../images/cadre-dotted.png) 15 round;
	-webkit-border-image: url(../images/cadre-dotted.png) 15 round;
	-o-border-image: url(../images/cadre-dotted.png) 15 round;
	border-image: url(../images/cadre-dotted.png) 15 fill round;
}
hr + p {
	margin-top:20px !important;
}

.student-hide {display: block;}
.student-show {display:none;}
h3.student-show,
.student-show h3 {color:#f29eb6;}

body.offre-50se .student-hide {display: none;}
body.offre-50se .student-show {display:block;}

.hidden {display: none;}
#tooltip {
	position: absolute;
	width: 75px;
	height: 55px;
	margin-top: -25px;
	top: 0;
	left: 0;
	background-color: #009ea3;
	padding: 5px;
	color: #FFFFFF;
	font-size: 20px;
	font-weight:   bold;
	text-align: center;
}
#tooltip::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 27px;
	border-style: solid;
	border-width: 10px;
	border-color: #009ea3 transparent transparent transparent;
	margin-bottom: -50px;
}

/*===== HEADER =====*/
body > header {
    margin:0;
    padding: 20px 20px;
	position: relative;
    z-index: 1000;
	overflow: hidden;
	background: #F6F6F6;
}
body > header > section {
    display: table;
    width: 100%;
    max-width: 60em;
    margin: 0 auto;
    padding: 0;
	z-index:1000;
}
body > header > section > div {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}
body > header > section > div:first-child {
	width: 200px;
}
body > header > section > div:last-child {
	width: calc(100% - 200px);
}
body > header > section > div:first-of-type > p > img {
	display: block;
    height: auto;
    width: 200px;
    float: left;
	padding: 20px;
/*	box-shadow: 0px 0px 20px rgba(0,0,0,0.10);*/

}
body > header > section > div:last-of-type > h1 {
    font-size: 3em;
    text-align: center;
}
body > header > section > div:last-of-type > h1 big {display: block;}
body > header > section > div:last-of-type > h1 big span {color: #f29eb6;}
body > header > section > div:last-of-type > h1 small {display: block; font-size: 0.66em;}

/*===== HEADER - Offre =====*/
body.offre-30 > header:after {
	content: "-30%";
	position: absolute;
	display: block;
	top: 10px;
	right: -52px;
	padding: 3px 50px;
	background: #f29eb6;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 2.5em;
	text-align: center;
	transform: rotate(45deg);
}
body.offre-50 > header:after {
	content: "-50%";
	position: absolute;
	display: block;
	top: 10px;
	right: -52px;
	padding: 3px 50px;
	background: #f29eb6;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 2.5em;
	text-align: center;
	transform: rotate(45deg);
}
body.offre-50se > header:after {
	content: "-50%";
	position: absolute;
	display: block;
top: 45px;
right: 35px;
	color: #f29eb6;
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	transform: rotate(45deg);
}

body.offre-50se > header > div.offre-speciale {
	position: absolute;
	display: block;
top: 25px;
right: -65px;
	padding: 3px 50px;
	background: #f29eb6;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.0em;
	text-align: center;
	transform: rotate(45deg);
}


/*===== DESCRIPTION PRODUIT + FORMULAIRE =====*/
body > main {
    padding:1em;
}
body > main > div:last-child {
	display: table;
	border-collapse:separate;
	border-spacing: 0px;
    margin: 0 auto;
	padding: 30px;
    max-width: 60em;
	background: rgba(255,255,255,0.85);
	/*box-shadow: 0px 0px 20px rgba(0,0,0,0.10);*/
}
body.illustration > main > div:last-child {
	background: rgba(255,255,255,0.0);
}


/*===== SECTION-GAUCHE =====*/
body > main > div:last-child > section {
	display: table-cell;
	width: 65%;
	vertical-align: top;
	padding-right: 20px;
    margin-top: 25px;
}
body > main > div:last-child > section > article > img {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
}
body > main > div:last-child > section > article,
body > main > div:last-child > section > footer {
    clear: both;
}
body > main > div:last-child > section > article > ul > li {margin: 0 0 10px 20px;}
body > main > div:last-child > section > article > ul > li:last-child {margin: 0 0 20px 20px;}
body > main > div:last-child > section > article ul > li::before {
	content:"";
	display: block;
	margin: 0 0 -16px -20px;	
	border-style: solid;
	border-color: transparent transparent transparent #183149;
	border-width: 8px;
}


/*===== ARTICLE =====*/
body > main > div > section > article#version-limitee {
	display: table;
	position: relative;
	border-collapse: separate;
	border-spacing: 20px;
	width: calc(100% + 40px);
	margin: -20px -20px 40px; 
}
body > main > div > section > article#version-limitee > div {
	display: table-cell;
	vertical-align: middle;
}
body > main > div > section > article#version-limitee > div > img {
	display: block;
	width: 100%;
	height: auto !important;
}
body > main > div > section > article#version-limitee > div:last-child > img {
	box-shadow: 0px 3px 10px rgba(0,0,0,0.25);
}
body > main > div > section > article#version-limitee > div > p.version {
    display: block;
    position: relative;
    width: 184px;
	height: auto;
    margin: 15px auto 0px;
	font-size: 1.5em;
	line-height: 1em;
	color: #FFFFFF;
	background: #f29eb6;
	border: 5px solid #FFFFFF;
	padding: 10px;
	text-align: center;
}
body.illustration > main > div > section > article#comparatif > a > figure > span.version {
	background-color: #4C4C4C !important;
}

/*===== ARTICLE COMPARATIF =====*/
body > main > div > section > article#comparatif {
	display: table;
	border-collapse: separate;
	border-spacing: 20px;
	width: calc(100% + 40px);
	margin: -20PX -20px 50px;
}
body > main > div > section > article#comparatif > a {
	display: table-cell;
	width: 50%;
	border: none;
	vertical-align: top;
	text-decoration: none;
	text-align: center;
}
body > main > div > section > article#comparatif > a > figure {	
	text-decoration: none;
	vertical-align: top;
}

body > main > div > section > article#comparatif > a > figure > span.version{
    display: block;
    position: relative;
    width: 184px;
	height: 65px;
    margin: 10px auto -60px;
}
body > main > div > section > article#comparatif > a > figure > span.version{
	display: inline-block;
	position: relative;
	width: auto;
	height: auto;
	font-size: 1.25em;
	line-height: 1em;
	color: #FFFFFF;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: 0 auto;
	padding: 10px 30px;
}
body > main > div > section > article#comparatif > a:first-of-type > figure > span.version {
	color: #1b3047;
	background-color: #ffa1b8;
}
body > main > div > section > article#comparatif > a:last-of-type > figure > span.version {
	background-color: #708ccf;
}
body > main > div > section > article#comparatif > a > figure > img {
	display: block;
	width: calc(100% + 40px);
	height: auto;
	margin: -35px -20px 0px;
}
body > main > div > section > article#comparatif > a > figure > img.illustree {
	margin: 5px -20px 0px;
}
body > main > div > section > article#comparatif > a > figure > span.plus {
	display: block;
	position: relative;
	width: 25px;
	height: 25px;
	padding: 0px;
	margin: -20px auto -110px;
	background-color: #ffa1b8;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	box-shadow: 0px 3px 10px rgba(0,0,0,0.33);
	
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	line-height: 20px;
}

body > main > div > section > article#comparatif > a > figure > span.description {
	display: block;
	width: 150px;
	margin: 115px auto -50px;
	font-size: 0.75em;
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
	color: #000000;
}
body > main > div > section > article#comparatif > div {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
}
body > main > div > section > article#comparatif > div.intro-reliee,
body > main > div > section > article#comparatif > div.intro-illustree {
	padding-left: 20px;
}
body > main > div > section > article#comparatif > div > h2 {
	color: #000000;
}
body > main > div > section > article#comparatif > div > p {color:#000000;}
body > main > div > section > article#comparatif > div > p:not(:last-of-type) {
	margin-bottom: 15px;
}

/*===== ARTICLE LES PLUS PRODUITS =====*/
body > main > div > section > article#plus-produit {}
body > main > div > section > article#plus-produit > h2 {}
body > main > div > section > article#plus-produit > h2 > span {
    display: inline-block;
    vertical-align: middle;
    background-color: #6781BE;
    border-radius: 50%;
    width: 35px;
    height: 35px;
	font-size: 1em;
	line-height: 35px;
    text-align: center;
    color: #FFFFFF;
}
body > main > div > section > article#plus-produit > div {
	display: table;
	border-collapse: separate;
	border-spacing: 20px;
	width: calc(100% + 40px);
	margin: -15px -20px 0;
}
body > main > div > section > article#plus-produit > div > p {
	display: table-cell;
	background: #6781BE;
	padding: 10px;
	color: #FFFFFF;
	text-align: left;
	font-size: 0.85em;
	line-height: 1.25em;
	vertical-align: top;
}

body > main > div > section > article#plus-produit > div > p a {
	color: #FFFFFF;
	font-size: 0.95em;
}


/*===== ARTICLE TABLRAU COMPARATIF =====*/
body > main > div > section > article > table#responsive_table { 
  margin: 0 auto;
  border-collapse:separate;
	border-spacing: 0px;
  background: #FFFFFF; color: #fff;
}
body > main > div > section > article > table#responsive_table > thead > tr > th > img,
body > main > div > section > article > table#responsive_table > tbody > tr > td > img {display: block; margin: 0 auto;}
body > main > div > section > article > table#responsive_table > thead > tr > th,
body > main > div > section > article > table#responsive_table > tbody > tr > td {padding: 10px;}
body > main > div > section > article > table#responsive_table > tbody > tr > td {background: #FFFFFF; color: #000 ;}
body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(2) {background-color: #e0dede;}
body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(3) {background-color: #cccccc;}


body > main > div > section > article > table#responsive_table > thead > tr > th,
body > main > div > section > article > table#responsive_table > tbody > tr > td:first-child,
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) td,
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td {
	border-style: solid;
	border-width: 3px;
	-moz-border-image: url(../images/cadre-dotted.png) 15 round;
	-webkit-border-image: url(../images/cadre-dotted.png) 15 round;
	-o-border-image: url(../images/cadre-dotted.png) 15 round;
	border-image: url(../images/cadre-dotted.png) 15 fill round;
}
body > main > div > section > article > table#responsive_table > thead > tr > th:first-child,
body > main > div > section > article > table#responsive_table > thead > tr > th:nth-child(2) {border-right-width: 0px;}
body > main > div > section > article > table#responsive_table > tbody > tr > td:first-child,
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) > td,
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td {border-right-width: 0px; border-top-width:0px !important;}
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) > td:nth-child(n+2),
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td:nth-child(n+2) {border-left-width:0px !important;}

body > main > div > section > article > table#responsive_table > thead > tr > th,
body > main > div > section > article > table#responsive_table > tbody > tr:not(:last-child) > td:first-child {border-bottom: 3px solid #e0dede;}
body > main > div > section > article > table#responsive_table > thead > tr > th,
body > main > div > section > article > table#responsive_table > tbody > tr:not(:last-child) > td:nth-child(n+2) {border-bottom: 3px solid #FFFFFF;}


body > main > div > section > article > table#responsive_table > thead > tr > th > h2 {
	text-align: center;
	margin: 0;
    color: #000;
	font-size: 1.75em;
	line-height: 1.25em;
}
body > main > div > section > article > table#responsive_table > thead > tr > th:nth-child(2) div {background: #ffa1b8;}
body > main > div > section > article > table#responsive_table > thead > tr > th:nth-child(3) div {background: #708ccf;}
body > main > div > section > article > table#responsive_table > thead > tr > th > div {
	background: #4c4c4c;
	display: block;
    position: relative;
    margin: 0 5px 5px;
    padding: 10px 10px 5px;;
    text-align: center;
}
body > main > div > section > article > table#responsive_table > thead > tr > th > div > h3 {
	color: #FFFFFF;
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1em;
	text-align: center;
	margin: 0;
	padding: 0;
}
body > main > div > section > article > table#responsive_table > thead > tr > th:nth-child(2) > div > h3 {
	color: #183149 !important;
}
body > main > div > section > article > table#responsive_table > thead > tr > th > h4 {
	color: #000000;
	font-weight: normal;
	font-size: 1.25em;
	text-align: center;
	margin: 0;
	padding: 0;
}
body > main > div > section > article > table#responsive_table > thead > tr > th > div > hr { margin: 5px 0;}
body > main > div > section > article > table#responsive_table > tbody > tr > td > h5 {font-size: 14px; font-weight: normal; text-align: left; margin: 0; padding: 0;}
body > main > div > section > article > table#responsive_table > tbody > tr > td > p {font-size: 14px; font-weight: normal; text-align: center; margin: 0; padding: 0;}


body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) > td::before {content: none;}
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) > td {
	background-color: #FFFFFF;
	border-left-width: 0px;
}
body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) > td:first-child > h5 {display: none;}

@media all and (max-width: 860px) and (min-width: 761px), (max-width: 560px) {
	body > main > div > section > article > table#responsive_table {
		width: 100%;
		border-style: solid;
		border-width: 3px;
		-moz-border-image: url(../images/cadre-dotted.png) 15 round;
		-webkit-border-image: url(../images/cadre-dotted.png) 15 round;
		-o-border-image: url(../images/cadre-dotted.png) 15 round;
		border-image: url(../images/cadre-dotted.png) 15 fill round;
	}
	
	body > main > div > section > article > table#responsive_table > thead > tr > th,
	body > main > div > section > article > table#responsive_table > tbody > tr > td:first-child,
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) td,
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td {border: none;}
	
	body > main > div > section > article > table#responsive_table > thead > tr > th,
	body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(n) {border-bottom: none !important;}
	body > main > div > section > article > table#responsive_table > tbody > tr:not(:last-child) > td:nth-child(n+3) {border-bottom: 10px solid #FFFFFF !important;}	
	body > main > div > section > article > table#responsive_table > thead > tr > th:nth-child(n+2) {display: none;}	
	body > main > div > section > article > table#responsive_table > tbody > tr > td > h5 {text-align: center; margin: -20px auto 0;}
	body > main > div > section > article > table#responsive_table > tbody > tr:first-child > td > h5 {line-height: 24px;}
	body > main > div > section > article > table#responsive_table > tbody > tr:first-child > td > h5 strong {background-color: #FFFFFF; padding: 2px; margin: 2px;}
	body > main > div > section > article > table#responsive_table > tbody > tr > td {display: block;}
	body > main > div > section > article > table#responsive_table > tbody > tr > td:first-child {background: #666; color: #fff;}
	body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(n)::before { 
		display: inline-block;
		text-align: left !important;
		font-size: 14px;
	}
	body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(n)::before {content: "";}
	body > main > div > section > article > table#responsive_table > tbody > tr > td:nth-child(n+2)::before {
		content: attr(data-th);
		width: calc(100% - 30px);
		position: relative;
		display: inline-block;
	}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td:nth-child(n+2)::before {
		width: 100%;
		top: 0px;
		display: inline-block;
		vertical-align: middle;
		text-align: center !important;
	}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td > p {
		display: inline-block;
		width: 100%;
		text-align: center;
		vertical-align: middle;
	}
	
	body > main > div > section > article > table#responsive_table > tbody > tr > td > p {
		display: inline-block;
		width: 40%;
		text-align: right;
		vertical-align: middle;
	}
	body > main > div > section > article > table#responsive_table > thead > tr > th > img,
	body > main > div > section > article > table#responsive_table > tbody > tr > td > img {float: right; margin: 0;}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(4) > td:last-child,
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td:last-child {border-bottom: 20px solid #FFFFFF !important;}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td:first-child {background-color:#f29eb6;}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(3) > td:first-child > h5 {display: block;color:#FFFFFF;}
	body > main > div > section > article > table#responsive_table > tbody > tr:nth-last-child(2) {display: none;}
	
}

/*===== ARTICLE OFFRE =====*/
body > main > div > section > article#offre {
	display: block;
	margin: 40px 0;
	padding: 10px;	
	border-style: solid;
	
	border: 2px solid #183149;
	
}
body > main > div > section > article#offre > h2 {
    text-align: center;
    display: block;
    width: 320px;
	margin: -42px auto 20px;
	color: #183149;
	background-color: #FFFFFF;
}

body > main > div > section > article#offre > img {
	float: right;
	margin-left: 20px;
	margin-top: -20px;
}

/*===== ARTICLE Facebook =====*/
body > main > div > section > article#facebook {
	display: table;
	border-collapse: collapse;
	width: 100%;
}
body > main > div > section > article#facebook > div,
body > main > div > section > article#facebook > p {
	display: table-cell;
	vertical-align: middle;
}

body > main > div > section > article#facebook > div {
	padding-right: 10px;
}




/*===== FORMULAIRE =====*/

body > main > div:last-child > aside {
	display: table-cell;
	width: 35%;
	vertical-align: top;
    background: #efefef;
    margin-top: 25px;
    padding: 20px;
	margin-bottom:20px;
	
	border: solid 2px #183149;
	
	
	
}
body > main > div:last-child > aside > h2 {
	display: block;
	width: calc(100% + 44px);
	height: auto;
	background: #183149;
	
    clear: both;
    color: #FFFFFF;
	
    font-size: 2.0em;
	line-height: normal;
    margin: -22px -22px 20px;
    padding: 5px;
    text-align: center;
	
}
body > main > div:last-child > aside  h3 {
	text-align: center;
	font-size: 1.33em;
	line-height: 1em;
	margin: 20px 0 20px;
	color: #f29eb6;
}

body > main > div:last-child > aside  h4 {
	text-align: center;
	font-size: 1.12em;
	line-height: 1em;
	margin: 20px 0 0;
}

body > main > div:last-child > aside  p span#total {
	display: inline-block;
	background: #708ccf;
	padding: 3px 3px 0px;
	color: #FFFFFF;
	line-height: 16px;
}
body > main > div:last-child > aside  p strong.calcul-relie,
body > main > div:last-child > aside  p strong.calcul-recharge,
body > main > div:last-child > aside  p strong.calcul-modulable {
	display: inline-block;
	color: #708ccf;
}

body > main > div:last-child > aside > div.legend p,
body > main > div:last-child > aside > div.legend ol li {font-size:0.75em; margin-bottom: 5px;}
body > main > div:last-child > aside > div.legend ol {margin-left: 20px;}

body > main > div:last-child > aside > div > div > form > div > p > input {color:#000; font-weight:bold; width:25px; margin:0; padding:0; height:inherit;}

body > main > div:last-child > aside > p,
body > main > div:last-child > aside > div > div > form > div >  p,
body > main > div:last-child > aside > div > div > form > div > div > p ,
body > main > div:last-child > aside > div > div > form > div > div > div > p {
    margin: 5px 0 15px 0px;
    font-weight: normal;
    line-height: 1.3em;
	font-size: 0.85em;
}

body > main > div:last-child > aside label,
body > main > div:last-child > aside input,
body > main > div:last-child > aside select {
	width:100%;
	margin: 0 0 10px;
}
body > main > div:last-child > aside input,
body > main > div:last-child > aside select {
	background: #FFFFFF;
	
	border-radius: 0px !important;
	border-style: solid;
	border-width: 1px;
	border-color: #CCCCCC #FFFFFF #FFFFFF #CCCCCC;
	
	
	width:100%;
	margin: 10px 0 12px;
	height: 20px;
	
}
body > main > div:last-child > aside textarea {
    max-width: 298px;
    min-width: 100%;
    max-height: 200px;
    min-height: 100px;
	margin-bottom: 10px;
}

body > main > div:last-child > aside input[name="agenda"] {width:15px !important; margin: 0 5px !important; float: left}
body > main > div:last-child > aside input[name="agenda"] + p {
	display: block;
	width: auto;
	margin: 10px 0 10px 30px;
	font-weight: bold;
}

body > main > div:last-child > aside input[type="radio"]    {width:10px; margin: 5px 5px 5px 40px;}
body > main > div:last-child > aside input[type="checkbox"] {width:15px; margin: 0px 0 0 40px;}
body > main > div:last-child > aside input[type="submit"] {
    display: block;
    width: auto;
	height: auto;
    margin: 15px auto;
    padding: 5px 40px 5px 35px;
    border: none;
    background:  #f29eb6 url("../images/cache_fleche.png") right center no-repeat;
    font-size: 1.85em;
    font-weight: normal;
    color: white;
}
body > main > div:last-child(2) > aside p + ol {
    display: block;
    width: auto;
    margin:0 0 10px 20px;
}
body > main > div:last-child > aside input[type="radio"] + p strong big,
body > main > div:last-child > aside p strong.orange {color: #f29eb6;}
body > main > div:last-child > aside input[type="radio"] + p strong:first-of-type big { font-size: 1.5em}

form table {
	display:table;
	border-collapse: collapse;
	position:relative;
	margin:0;
	border:1px solid black;
	width: 100%;
}
form table th, form table td {border:1px solid #8f8f8f;padding:5px;}
form table th:first-child,
form table td:first-child {width:190px;}
form table th:last-child,
form table td:last-child {width:70px;}
form table th p {font-size: 12px; text-align: left}
form table th:last-child p {text-align: center}
form table td p {font-size: 12px}


p[class^="open"] {
	text-align: center;
	font-size: 0.85em;
	cursor: pointer;
	text-decoration: underline;
}
div.toggle.reliee table,
div.toggle.modulable table,
div.toggle.recharge table {
	display: none;
} 
div.toggle.reliee.active table,
div.toggle.modulable.active table,
div.toggle.recharge.active table {
	display: table;
	margin-bottom: 20px;
}

form table.reliee th { background:#4c4c4c; color:white;font-weight: normal;}
form table.reliee td:first-child { background:#e0dede;}
form table.reliee td:last-child { background:white;}

form table.recharge th { background:#000000; color:white;font-weight: normal;}
form table.recharge td:first-child { background:#cccccc;}
form table.recharge td:last-child { background:white;}

form table.modulable th { background:#000000; color:white;font-weight: normal;}
form table.modulable td:first-child { background:#cccccc;}
form table.modulable td:last-child { background:white;}

table#versus p, form table p {margin:0;}


body.offre-30 form table th:first-child,
body.offre-30 form table td:first-child,
body.offre-50 form table th:first-child,
body.offre-50 form table td:first-child {width:auto;}

body.offre-30 form table th:last-child,
body.offre-30 form table td:last-child, 
body.offre-50 form table th:last-child,
body.offre-50 form table td:last-child {width:100px;}

body.offre-50 form table td p strong,
body.offre-30 form table td p strong {
	font-weight: normal !important;
	text-decoration: line-through;
}
body.offre-30 form table td p b {
	font-weight: bold !important;
	color: #f29eb6;
}

/*===== TEL =====*/
body > section#tel {
	display: block;
	position: fixed;
	margin: 0;
	padding: 0;
	width:100%;
	bottom:0px;
}
body > section#tel > p {
	display:block;
	position:relative;
	margin: 0px auto;
	padding: 8px;
	background: #708ccf;
	
	vertical-align:middle;
	color:#FFF;
	font-weight:bold;
	text-align: center;
}
body > section#tel > p a {color: #FFF; text-decoration: none;}

/*===== FOOTER =====*/
body > footer {
	display: block;
	background: #FFFFFF;
	width: 100%;
	max-width: 980px;
	font-size: 0.75em;
	margin: 0 auto;
	padding: 10px;
}
body > footer > figure {
	display: table;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0px;
}
body > footer > figure > a,
body > footer > figure > p {
	display: table-cell;
	vertical-align: bottom
}
body > footer > figure > a {
	width: 120px;
}
body > footer > figure > a img {
	display: block;
	position: relative;
	width: 100%;
	max-width: 120px !important;
	height: auto !important;
	margin: 0 auto;
}
body > footer > figure > p {
	width: calc(100% - 120px);
	padding-left: 20px;
}

body > footer > p {
	display: block;
	margin-top: 10px
}

#maj-chiffres {
	display: none;
}

#maj-chiffres.active-2,
#maj-chiffres.active-r {
	display: block;
}


/*===== MEDIA-QUERIES =====*/
@media screen and (max-width:1060px){
	body.offre-50se > header > div.offre-speciale {
		position: relative;
		display: block;
		top: 5px;
		right: 0px;
		padding: 3px 50px;
		background: #f29eb6;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 1.5em;
		text-align: center;
		transform: rotate(0deg);
		width: 100%;
	}
	body.offre-50se > header > div.offre-speciale br {display: none;}
	body.offre-50se > header > div.offre-speciale::after {
		content: " -50%";
	}
	body.offre-50se > header::after {content: none;}
}
@media screen and (max-width:760px){
	
	
	body {
		background-position: top 250px center;
		background-size: 150%;
	}
	
	body > header > section > div {display: block;width: 100% !important;}
	body > header > section > div:first-of-type > p > img {float: none; display: block; margin: 0 auto 10px;}
	
	
	body > main > div:last-child > section,
	body > main > div:last-child > aside {
		display: block;
		width: 100% !important;
		padding: 0px !important;
	}
	body > main > div:last-child > aside {padding: 15px !important;}
	
	
	body > main > div > section > article.description-popin {display: block; width: 100%; margin: 0;}
	
	body > main > div > section > article#comparatif,
	body > main > div > section > article#plus-produit > div{width: calc(100% + 36px) !important;}
	
	body > main > div > section > article#offre {margin: 60px 0 20px;}
}

@media screen and (max-width:665px){
	body > header > section {
		width: 100% !important;
	}
	
	body > main > div:last-child {display: block;}
}
@media screen and (max-width:630px){
	
	
	body > footer > section > div:first-child {width: 40px;}
	body > footer > section > div:first-child > p > img:last-child {display: none !important;}
	body > footer > section > div:last-child {width: calc(100% - 40px);}
	
}
@media only screen and (max-width: 550px) {
	
	body {
		background-position: top 350px center;
		background-size: 150%;
	}
	body.offre-50 {
		background-position: top 500px center;
	}
	body.illustration > main > div > section > article#version-limitee,
	body > main > div > section > article#version-limitee > div {
		display: block !important;
		border-collapse: collapse;
		border-spacing: 0 !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 0 50px !important;
	}
	body.illustration > main > div > section > article#version-limitee > div:first-child{display: none !important}
	
	
	
	body > main > div > section > article#comparatif > a,
	body > main > div > section > article#comparatif > div,
	body > main > div > section > article#plus-produit > div > p,
	body > main > div > section > article.description-popin > p,
	body > main > div > section > article.description-popin > a{display: block;	width: 100% !important;	}
	
	body > main > div > section > article#comparatif > div > h2,
	body > main > div > section > article#comparatif > div > p {text-align: center;}
	
	body > main > div > section > article#comparatif {margin: -40px -20px 0px;}
	body > main > div > section > article#comparatif > a {margin: 0 0 90px;}
	body > main > div > section > article#comparatif > a > img {}
	
	body > main > div > section > article#offre > h2 {width: 180px; margin: -60px auto 0; }
	body > main > div > section > article#offre > img {float: none !important;margin: 0px auto 20px;}
	
	body > main > div > section > article#plus-produit > h2 {text-align: center;}
	body > main > div > section > article#plus-produit > div > p {border-bottom: 10px solid #FFFFFF;}
	
	body > main > div > section > article.description-popin:nth-child(3) {margin-top: 0px;}
	body > main > div > section > article.description-popin > p {margin: 0;text-align: center;}
	
}
@media only screen and (max-width: 450px) {
	
	body {
		background-position: top 400px center;
		background-size: 150%;
	}
	body.offre-50se {
		background-position: top 550px center;
	}
	body > header > section > div:last-of-type > h1 {
		font-size: 2.25em;
	}
	body.offre-30 > header::after,
	body.offre-50 > header::after {
		font-size: 2em;
		padding: 2px 50px;
	}
	
	body > main > div:last-child {padding: 0px !important;}
}