/*
Theme Name: Plateforme
Description: Thème custom 
Author: Boréale Média
Author URI: https://borealemedia.com
Version: 1.0

*/

/***************************************************************************************************************************************************************************************/

/*HTML5 BOILERPLATE MINIFIED*/

/***************************************************************************************************************************************************************************************/

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif;color:#222}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;cursor:pointer;-webkit-appearance:button;overflow:visible;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;white-space:normal;padding:0}input[type="button"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="reset"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="submit"]{cursor:pointer;-webkit-appearance:button;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="radio"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

/***************************************************************************************************************************************************************************************/

/*BODY STYLES*/

/***************************************************************************************************************************************************************************************/
@font-face {
    font-family: 'gilroy';
    src: url('css/fonts/gilroy-extrabold-webfont.woff2') format('woff2'),
         url('css/fonts/gilroy-extrabold-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;

}
html {
    font-size: 100%;
}

body { 
	background: #FFF; 
	color: #415a73; 
	font-family: 'Nunito Sans', sans-serif;
	font-size: 18px;
	animation-name: opaque;
  	animation-duration: .5s;
	opacity: 1;
}
@keyframes opaque {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
input, button, textarea, label, select{
	font-family: 'Nunito Sans', sans-serif;
}
a { 
	transition: all .5s ease;
	color: #415a73;
	-ms-text-justify: distribute;
	text-decoration: underline;
	text-decoration-color: #f85241;
	font-weight: 700;
}

a:hover {
	color: #f85241;
}

.container {
	clear: both;
	margin: 0 auto; 
	max-width: 1100px;
	padding:0 20px;
}
section{
	position: relative;
}
img {
	height: auto;
	max-width: 100%;
}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}


p{
	color: #415a73;
}
label{
	color: #415a73;
	font-weight: 400;
	font-size: 18px;
}
label.red{
	color: #8b0d07;
}
button, input[type=submit]{
	background-color: #213353;
	color: #fff;
	min-height: 50px;
	text-transform: uppercase;
	width: auto;
	padding: 5px 25px;
	border-radius: 0;
	font-weight: 400;
	font-size: 20px;
	transition: all .5s ease;
	border: none;
}
button:hover, input[type=submit]:hover{
	background-color: #333;
	
}
button:focus, input[type=submit]:focus, input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus{
	outline: none;
	border-bottom: 1px solid #f85241;
}
button.focus, input[type=submit].focus{
	/*border: 2px solid #636363;*/
	background-color: #BDBDBD;
	border-radius: 0px;
	color: #000;
}
p.full{
	width: 100%;
	clear: both;
}
p.prix{
	font-size: 24px;
	font-weight: 300;
	margin: 0;
}
p.prix span{
	font-weight: 700;
}
p.prix-total{
	font-size: 32px;
	font-weight: 300;
	margin: 0;
}
p.prix-total span{
	font-weight: 700;
}
span.taxe {
    line-height: 1;
    font-size: 12px;
    font-weight: 400;
    top: -17px;
    position: relative;
}
input[type=text], input[type=email], input[type=password], input[type=tel], select{
	width: 100%;
	height: 55px;
	margin-bottom: 10px;
	padding: 0 15px;
	border-radius: 0;
	border: 1px solid #e2e2eb;
	background-color: transparent;
	max-width: 320px;
	color: #415a73;
}
select.ui-datepicker-month{
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url("images/arrows-select.svg");
	background-size: 14px;
	background-position: center right 10px;
	background-repeat: no-repeat;
	padding-right: 35px;
	height: auto;
}
select:focus{
	border: 2px solid #636363;
}
select:not(.ui-datepicker-month){
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url("images/arrows-select.svg");
	background-size: 14px;
	background-position: center right 10px;
	background-repeat: no-repeat;
	padding-right: 35px
}
button[disabled]{
	opacity: 0.05;
	cursor: not-allowed;
}
.hidden{
	visibility: hidden;
}
p.validate{
	margin: 0;
	font-size: 10px;
	line-height: 10px;
	color: #8b0d07;
	margin-top: -4px;
	margin-bottom: 4px;
}
p#retour{
	color:#8b0d07;
	font-size: 10px;
	line-height: 10px;
	margin: 0;
}
div.ranger{
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
.hidden-field{
	display: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #415a73;
	text-transform: uppercase;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #415a73;
	text-transform: uppercase;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: #415a73;
	text-transform: uppercase;
}
/* Customize the label (the container) */
.contain {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.contain input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #e2e2eb;
    transform: translateY(-50%);
}
.checkmark.green{
	border: 1px solid #F20A0A;
}
/* On mouse-over, add a grey background color */
.contain:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.contain input:checked ~ .checkmark {
  background-color: #fff;
	border: 1px solid #e2e2eb;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.contain input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.contain .checkmark:after {
	top: 4px;
	left: 4px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #f85241;
}


div.full-question {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
    margin-bottom: 10px;
}
div#form-user-9{
	padding-top: 80px;
}
.left.secondaire {
    padding-left: 20px;
}
p#resultat-hepathique{
	margin-top: 0;
	color: #8b0d07;
	font-size: 18px;
	font-weight: 700;
}
ul.float{
	list-style: none;
}
ul.float li{
	float: left;
	padding: 5px 20px;
}
li.choix {
    padding-left: 0;
    list-style: none;
    margin-top: 10px;
}

/***************************************************************************************************************************************************************************************/

/*HEADER STYLES*/

/***************************************************************************************************************************************************************************************/
div#popup{
	position: fixed;
	z-index: 999999;
	background-color: rgba(255,255,255,0.50);
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
div#popup div.popup{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 500px;
	width: 95%;
	background-color: #ddd;
	transform: translate(-50%,-50%);
	border: 1px solid #8D8D8D;
}
div#popup div.popup button{
	float: right;
}
div#popup div.popup span#x{
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 40px;
	font-weight: 300;
	cursor: pointer;
}
header div.logo{
	width: 200px;
}
header div.colonne-menu{
	display: flex;
	flex-wrap: wrap;
}
header .connexion {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
header .connexion p{
	margin: 0;
	color: #415a73;
}
header .connexion p a{
	text-decoration: none;
}
header .connexion sup{
	color: #f00;
}
header .menu-top{
	background-color: #fff;
	padding: 8px 0;
	overflow: hidden;
	border-bottom: 1px solid #e2e2eb;
}
header .menu-top input{
	height: 40px;
	margin: 0 5px;
}
header .menu-top input#rememberme {
    display: none;
}
header .menu-top input[type="text"], header .menu-top input[type="password"] {
    width: 190px;
    margin-bottom: 0;
}
header .menu-top input[type="submit"], header .menu-top button {
    height: 40px;
    border: none;
    border-radius: 0;
    background-color: #213353;
    color: #fff;
    padding: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 400;
	margin-left: 20px;
}
header .menu-top .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
    padding: 0 3%;
}
header .menu-top nav#menu-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
header .menu-top nav#menu-top li a{
	color: #415a73;
	text-decoration: none;
}
header .menu-top nav#menu-top li:hover a{
	color: #fff;
	text-decoration: underline;
}
header div.colonne-logo{
	width: 200px;
	padding-top: 20px;
	padding-bottom: 20px;
}
header {
    display: block;
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 9;
}
div.height{
	width: 100%;
	height: 67px;
}
/***************************************************************************************************************************************************************************************/

/*NAV STYLES*/

/***************************************************************************************************************************************************************************************/

nav#menu ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
nav#menu ul > li > a{
	padding: 10px 15px;
	color: #fff;
	background-color: #000;
	text-decoration: none;
	
}
nav#menu ul > li > a:hover{
	text-decoration: none;
	color: #000;
	background-color: #ccc;
}
nav#menu ul > li:last-of-type > a{
	color: #000;
	background-color: transparent;
}
nav#menu ul > li:last-of-type > a:hover{
	text-decoration: underline;
}
nav#menu ul > li{
	margin: 10px;
}
/***************************************************************************************************************************************************************************************/

/*FOOTER STYLES*/

/***************************************************************************************************************************************************************************************/

footer span{
	font-family: 'gilroy', sans-serif;
}
footer div.ranger{
	justify-content: space-between;
	font-size: 15px;
	color: #fff;
	padding: 0 3%;
}
footer{
	background-color: #213353;
}
footer a, footer p{
	color: #fff;
	text-decoration: none;
}

section#footer{
	background-color: #213353;
}
section#footer label{
	color: #fff;
}
section#footer div.ranger{
	justify-content: space-between;
	font-size: 15px;
	color: #fff;
	padding: 0 3%;
}
section#footer div.ranger div.logo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 20vw;
	min-height: 20vw;
}
section#footer div.connexion{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
section#footer div.connexion input[type=text],section#footer div.connexion input[type=password] {
	width: 250px;
	color: #fff;
}
section#footer div.connexion form{
	display: flex;
	flex-wrap: wrap;
}
section#footer div.connexion h3{
	font-weight: 400;
	text-transform: uppercase;
	font-size: 26px;
	margin-top: 0;
}
section#footer div.connexion input[type=submit]{
	background-color: #f85241;
	margin-right: 0
	
}
section#footer div.connexion input[type=submit]:focus{
	border-bottom: none;
}
section#footer div.connexion input{
	margin: 0 10px;
	font-size: 18px;
}
section#footer div.connexion label.contain{
	padding-top: 13px;
	margin: 0 10px;
}
section#footer div.connexion label.contain .checkmark{
	top: 24px;
	background-color: #213353;
	border-color: #fff;
}
section#footer ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #fff;
	text-transform: uppercase;
	opacity: 1; /* Firefox */
}

section#footer :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #fff;
	text-transform: uppercase;
}

section#footer ::-ms-input-placeholder { /* Microsoft Edge */
	color: #fff;
	text-transform: uppercase;
}
section#footer div.hr{
	padding: 0 3%;
}
section#footer div.hr hr{
	border-top: 1px solid #e2e2eb;
	padding: 0;
	margin: 0;
}
footer{
	clear: both;
}
/***************************************************************************************************************************************************************************************/

/*HOME STYLES*/

/***************************************************************************************************************************************************************************************/

div#popup-inscription{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: rgba(31,49,82,0.90);
	z-index:99999;
	display: none;
}
div#popup-inscription div#form-registration {
    position: absolute;
    max-width: 96%;
    width: 550px;
    height: auto;
    top: calc(50% + 50px);
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 70%;
    overflow-y: scroll;
    background-color: #fff;
    padding: 30px;
}
div#popup-inscription div#form-registration h2{
	text-align: center;
}
div#popup-inscription div#form-registration input{
	max-width: 100%;
}
div#popup-inscription div#form-registration #fname, div#popup-inscription div#form-registration #lname{
	display: none;
}
div#popup-inscription span#close-popup-inscription{
	color: #fff;
	font-size: 50px;
	position: absolute;
	top: 50px;
	right: 50px;
	cursor: pointer;
}
section#banniere-accueil{
	background-color: #1f3152;
	background-image: url("images/accueil/banniere-therapeute-virtuel.png");
	background-size: cover;
	background-position: bottom center;
	position: relative;
	height: 40vw;
	width: 100%;
}
section#banniere-accueil div.texte{
	position: absolute;
	bottom: 44%;
	left: 8.8%;
	max-width: 36%;
	
}
section#banniere-accueil div.texte h1{
	font-family: 'Bebas Neue', cursive;
	margin: 0;
	color: #fff;
	font-size: 3.3vw;
	letter-spacing: .1vw;
	font-weight: 400;
	line-height: 1.2;
}
section#banniere-accueil div.texte p{
	color: #fff;
	margin: 0;
	font-size: 1.9vw;
	margin-top: 0.4vw;
	margin-bottom: 2vw;
	line-height: 1.2;
	font-weight: 400;
}
section#banniere-accueil div.texte button{
	color: #fff;
	background-color: #2d9e8d;
	padding: 1.3vw 2vw;
	font-size: 1.4vw;
	font-weight: 400;
	text-transform: none;
}
section#video div.container{
	max-width: 100%;
	width: 100%;
	padding: 0 8.8%;
	margin-top: 6vw;
	margin-bottom: 6vw;
	position: relative;
	z-index: 1;
}
section#video div.container:after{
	content: '';
	position: absolute;
	bottom: -8vw;
	left: -1vw;
	width: 8vw;
	height: 8vw;
	background-image: url("images/accueil/plus-3-bleu.png");
	z-index: 5;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
section#video div.container:before {
    content: '';
    position: absolute;
    bottom: -10vw;
    right: 4vw;
    width: 26vw;
    height: 14vw;
    background-image: url(images/accueil/plus-bouteille.png);
    z-index: 5;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
section#video div.colonne:first-of-type{
	padding-left: 0%;
	padding-right: 0%;
	position: relative;
	width: 50%;
}
section#video div.colonne:first-of-type div.videoWrapper {
    position: relative;
    width: calc( 100% - 0% );
    top: 0;
    left: 0;
    right: 0%;
    border: 0px solid #fff;
    height: 0;
    padding-bottom: 70%;
	background-color: #fff;
}
section#video div.colonne:first-of-type div.videoWrapper iframe{
	position: absolute;
    z-index: 1;
    width: 100%!important;
    height: 100%!important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	opacity: 0;
	transition: opacity 1.5s ease;
}
section#video div.colonne:first-of-type div.absolute img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section#video div.colonne:first-of-type div.absolute {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	cursor: pointer;
}
section#video div.colonne:first-of-type div.absolute:before{
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.35);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 3;
	position: absolute;
}
section#video div.colonne:first-of-type div.absolute:after{
	content: '';
	position: absolute;
	z-index: 4;
	width: 120px;
	height: 120px;
	background-image: url("images/accueil/play.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	cursor: pointer;
}
section#video div.colonne:last-of-type{
	padding-left: 3vw;
	width: 50%;
}
section#video div.colonne{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
section#video h2{
	color: #1f3152;
	font-family: 'Bebas Neue', cursive;
	margin: 0;
	font-size: 3.3vw;
	letter-spacing: .1vw;
	font-weight: 400;
	line-height: 1.1;
}
section#liste h2{
	color: #1f3152;
	font-family: 'Bebas Neue', cursive;
	margin: 0;
	font-size: 3.3vw;
	letter-spacing: .1vw;
	font-weight: 400;
	line-height: 1.1;
}
section#video h2 span.bulle{
	position: relative;
	z-index: 1;
}
section#video h2 span.bulle:after{
	width: 104%;
	height: 70%;
	background-color: #08b3e6;
	border-radius: 8px;
	content: '';
	position: absolute;
	top: 20%;
	left: -2%;
	right: -2%;
	z-index: -1;
}
section#liste h2 span.bulle{
	position: relative;
	z-index: 1;
}
section#liste h2 span.bulle.orange:after{
	width: 104%;
	height: 70%;
	background-color: #fcaf1a;
	border-radius: 8px;
	content: '';
	position: absolute;
	top: 20%;
	left: -2%;
	right: -2%;
	z-index: -1;
}

section#video p{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	font-size: 1.4vw;
	margin-top: 0.4vw;
	margin-bottom: 2vw;
	line-height: 1.2;
	font-weight: 400;
}
section#video p.prix {
	font-family: 'Bebas Neue', cursive;
	font-size: 1.6vw;
	font-weight: 400;
	letter-spacing: 2px;
	margin-bottom: 0;
}
section#video p.prix span.vert{
	color: #2d9e8d;
}
section#video p.prix span.rouge{
	color: #f02a36;
}
span.surligner{
	text-decoration: line-through;
	text-decoration-color: #f02a36;
}
section#video button{
	color: #fff;
	background-color: #1f3152;
	padding: 1.3vw;
	font-size: 1.4vw;
	font-weight: 400;
	text-transform: none;
	width: 21vw;
}
section#liste div.titre{
	margin-top: 6vw;
	padding-left: 40px;
}
section#liste div.container{
	width: 100%;
	max-width: 100%;
	padding: 0 8.8%;
}
section#liste div.ranger-etape{
	display: flex;
	flex-wrap: wrap;
	margin-top: 4vw;
}
section#liste div.ranger-etape div.colonne:nth-child(odd){
	width: 50%;
	padding-right: 3vw;
}
section#liste div.ranger-etape div.colonne:nth-child(even){
	width: 50%;
	padding-left: 3vw;
}
section#liste div.ranger-etape div.colonne li{
	position: relative;
	list-style: none;
}
section#liste div.ranger-etape div.colonne li:before{
	background-image: url("images/accueil/crochet-rouge.png");
	width: 3vw;
	height: 3vw;
	top: 2vw;
	left: -4vw;
	content: '';
	position: absolute;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
section#liste div.ranger-etape div.colonne:nth-child(1) li:before{
	background-image: url("images/accueil/crochet-rouge.png");
}
section#liste div.ranger-etape div.colonne:nth-child(2) li:before{
	background-image: url("images/accueil/crochet-bleu.png");
}
section#liste div.ranger-etape div.colonne:nth-child(3) li:before{
	background-image: url("images/accueil/crochet-orange.png");
}
section#liste div.ranger-etape div.colonne:nth-child(4) li:before{
	background-image: url("images/accueil/crochet-vert.png");
}
section#liste div.ranger-etape span.etape{
	text-transform: uppercase;
	font-weight: 400;
	font-family: 'Bebas Neue', cursive;
	color: #1f3152;
	font-size: 1.4vw;
}
section#liste div.ranger-etape h3{
	text-transform: uppercase;
	font-weight: 700;
	font-family: 'Bebas Neue', cursive;
	color: #1f3152;
	font-size: 2.2vw;
	margin: 0;
	letter-spacing: 2px;
}
section#liste div.ranger-etape p{
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	font-size: 1.4vw;
	margin-top: 0.4vw;
	margin-bottom: 2vw;
	line-height: 1.2;
	font-weight: 400;
}
section#bandeau div.container{
	width: 100%;
	max-width: 100%;
	padding: 0 8.8%;
	margin-bottom: 5vw;
	margin-top: 5vw;
}
section#bandeau div.bandeau{
	background-image: url("images/accueil/bandeau.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 27vw;
	background-color: #fcaf1a;
	position: relative;
}
section#bandeau div.bandeau div.texte{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 50%;
	max-width: 40%;
}
section#bandeau h2{
	color: #1f3152;
	font-family: 'Bebas Neue', cursive;
	margin: 0;
	font-size: 3.3vw;
	letter-spacing: .1vw;
	font-weight: 400;
	line-height: 1.1;
}
section#bandeau h2 span.bulle{
	position: relative;
	z-index: 1;
}
section#bandeau h2 span.bulle:after{
	width: 104%;
	height: 70%;
	background-color: #fff;
	border-radius: 8px;
	content: '';
	position: absolute;
	top: 20%;
	left: -2%;
	right: -2%;
	z-index: -1;
}
section#bandeau button{
	color: #fff;
	background-color: #1f3152;
	padding: 1.3vw;
	font-size: 1.4vw;
	font-weight: 400;
	text-transform: none;
	width: 21vw;
	margin-top: 2vw;
}
section#form div.colonne:first-of-type h2{
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 3vw;
	line-height: 1.25;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	color: #373f50;
}
section#form div.colonne:first-of-type{
	width: 60%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom-right-radius: 10vw;
	min-height: 55vw;
	position: relative;
}
section#form div.colonne:first-of-type img{
	width: 100%;
}
section#form div.colonne:last-of-type {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section#form div#form-registration{
	width: 80%;
	display: block;
	margin: 50px auto;
}
section#form div#form-registration strong, span.required{
	color: #8b0d07;
}
section#form div#form-registration h2{
	font-size: 35px;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1;
	margin-top: 0px;
}
section#form div#form-registration hr{
	border-top: 1px solid #f85241;
	width: 45px;
	margin-bottom: 35px;
}
section#form input[type=submit], section#form button{
	margin-top: 40px;
}
section#form div.ranger-bouton {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
section#form input[name=fname], section#form input[name=lname], section#form label[for=fname], section#form label[for=lname], section#form p.nom{
	display: none;
}
section#form select#sexe_update{
	clear: both;
}
section#form select#annee_de_naissance_update{
	width: auto;
	clear: both;
	float: left;
}
section#form select#mois_de_naissance_update, section#form select#jour_de_naissance_update{
	width: auto;
	float: left;
	margin-left: 10px;
}
section#form select#jour_de_naissance_update{
	float: none;
}
section#form select#poids_unite_update, section#form select#grandeur_unite_update{
	width: auto;
	float: left;
	margin-right: 10px;
}
section#form select#poids_kilo_update, section#form select#poids_livre_update, section#form select#grandeur_pouce_update, section#form select#grandeur_cm_update{
	width: auto;
	float: left;
	margin-right: 10px;
}
section#form select.checkUnite{
	display: none;
}
section#form h2 {
	font-size: 36px;
	margin: 50px 0 30px;
}
section#form div#form-registration{
	position: relative;
}
section#form div#form-registration div.suivant p{
	font-size: 36px;
	font-weight: 700;
}
section#form div#form-registration div.suivant button{
	float: right;
}
body .woocommerce form .form-row input.input-text, body .woocommerce form .form-row textarea{
	max-width: 100%;
}
body .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #e2e2eb;
    border-radius: 0px;
	height: 55px;
	padding: 12px 8px;
	color: #415a73;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 18px;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #415a73;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 13px;
    right: 8px;
    width: 20px;
}
body .woocommerce .col2-set .col-1, body .woocommerce-page .col2-set .col-1 {
    width: 100%;
}
body .woocommerce .col2-set .col-2, body .woocommerce-page .col2-set .col-2{
	width: 100%;
}
.woocommerce-page > div.container{
	min-height: calc(100vh - 128px);
	padding-bottom: 100px; 
}
body .woocommerce #respond input#submit.alt, body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce input.button.alt, body .woocommerce a.button{
	background-color: #213353;
	color: #fff;
	height: 50px;
	text-transform: uppercase;
	width: auto;
	padding: 16px 25px;
	border-radius: 0;
	font-weight: 400;
	font-size: 20px;
	transition: all .5s ease;
	border: none;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
	padding: 15px;
}
body .woocommerce-info, body.woocommerce-message {
    border-top-color: #213353;
}
body .woocommerce-info::before{
	content: none;
}
ul.produit{
	padding: 0;
	list-style: none;
}
div.ranger-produits{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #e6edf5;
	margin-bottom: 20px;
	padding: 20px;
}
div.ranger-produits-complementaires{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #e6edf5;
	margin-bottom: 20px;
	padding: 20px;
}
section#form div.ranger-produits-complementaires div.colonne:first-of-type {
    width: 50px;
    min-height: initial;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
section#form div.ranger-produits-complementaires div.colonne:nth-child(2){
	width: calc( 200px);
	min-height: initial;
}
section#form div.ranger-produits-complementaires div.colonne:nth-child(2) img{
	width: 100%;
}
section#form div.ranger-produits-complementaires div.colonne:last-of-type{
	width: calc( 100% - 250px);
	min-height: initial;
}
section#form div.ranger-produits div.colonne:first-of-type{
	width: 200px;
	min-height: initial;
	padding-right: 20px;
}
section#form div.ranger-produits div.colonne:last-of-type{
	width: calc( 100% - 200px);
	min-height: initial;
}
body .woocommerce-error, body .woocommerce-info, body .woocommerce-message {
    padding: 1em 2em 1em 3.5em;
    margin: 0 0 2em;
    position: relative;
    background-color: #fff;
    color: #213353;
    border-top: 0px solid #a46497;
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
	border: 1px solid #000;
	box-shadow: 0px 0px 50px 50px rgba(200,200,200,0.2);
}
body .woocommerce-message::before, body .woocommerce-info:before, body .woocommerce-error:before {
	content: none;
}

	
/***************************************************************************************************************************************************************************************/

/*DEFAULT PAGE STYLES*/

/***************************************************************************************************************************************************************************************/

.left { 
	float: left; 
	margin-right: 15px; 
}

.right { 
	float: right; 
	margin-left: 15px; 
}

.clear{
	clear:both;
}

.min-hauteur{
	min-height: calc(100vh - 143px);
}

/***************************************************************************************************************************************************************************************/

/*HOMMES*/

/***************************************************************************************************************************************************************************************/
div#image {
    padding: 0 8%;
    margin-top: 100px;
    margin-bottom: 80px;
    min-height: 30vw;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
}


div#image div.colonne{
	width: 50%;
	padding: 0 5%;
}
div#image svg{
	width: 100%;
	max-width: 100%;
}
div#image #Sous-scapulaire path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Sous-scapulaire.choisi path{
	fill: #DB3F56;
}
div#image #Sous-scapulaire:hover path{
	fill: #DB3F56;
}
div#image #Triceps path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Triceps.choisi path{
	fill: #DB3F56;
}
div#image #Triceps:hover path{
	fill: #DB3F56;
}
div#image #Mollet path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Mollet.choisi path{
	fill: #DB3F56;
}
div#image #Mollet:hover path{
	fill: #DB3F56;
}
div#image #Joue path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Joue.choisi path{
	fill: #DB3F56;
}
div#image #Joue:hover path{
	fill: #DB3F56;
}
div#image #Menton path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Menton.choisi path{
	fill: #DB3F56;
}
div#image #Menton:hover path{
	fill: #DB3F56;
}
div#image #Pectoral path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Pectoral.choisi path{
	fill: #DB3F56;
}
div#image #Pectoral:hover path{
	fill: #DB3F56;
}
div#image #Mid-axillaire path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Mid-axillaire.choisi path{
	fill: #DB3F56;
}
div#image #Mid-axillaire:hover path{
	fill: #DB3F56;
}
div#image #Ombilical path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Ombilical.choisi path{
	fill: #DB3F56;
}
div#image #Ombilical:hover path{
	fill: #DB3F56;
}
div#image #Suprailliac path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Suprailliac.choisi path{
	fill: #DB3F56;
}
div#image #Suprailliac:hover path{
	fill: #DB3F56;
}
div#image #Genou path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Genou.choisi path{
	fill: #DB3F56;
}
div#image #Genou:hover path{
	fill: #DB3F56;
}

div#image #Ischio-jambier path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Ischio-jambier.choisi path{
	fill: #DB3F56;
}
div#image #Ischio-jambier:hover path{
	fill: #DB3F56;
}
div#image #Quadriceps path{
	fill: #8799C7;
	cursor: pointer;
}
div#image #Quadriceps.choisi path{
	fill: #DB3F56;
}
div#image #Quadriceps:hover path{
	fill: #DB3F56;
}
section#form div.colonne-image{
	width: 50%;
}

.page-template-page-homme section#form.min-height, .page-template-page-femme section#form.min-height{
	padding-bottom: 200px;
}
section#form.min-height{
	min-height: calc(100vh - 169px);
	padding-bottom: 200px;
}
section#form.min-height div.ranger-bouton {
    width: 100%;
    max-width: 1100px;
    padding: 0 20px;
    bottom: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
form#page-1{
	display: flex;
	flex-wrap: wrap;
}
form#page-1 p.full{
	width: 50%;
	margin-bottom: 0;
}
/***************************************************************************************************************************************************************************************/

/*Tailles*/

/***************************************************************************************************************************************************************************************/
div#taille {
    padding: 0 8%;
    margin-top: 100px;
    margin-bottom: 80px;
    min-height: 30vw;
}
section#form div.colonne-taille{
	width: 20%;
    padding: 0 2%;
	flex: 1;
}
section#form div.colonne-taille ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
section#form div.colonne-taille ul li{
	text-align: center;
}
div#taille div.colonne-taille img{
	width: 100%;
	border: 4px solid #fff;
	height: 100%;
	cursor: pointer;
	max-width: 300px;
	display: block;
	margin: 0 auto;
}
div#taille div.colonne-taille:hover img{
	border: 4px solid #C6C6C6;
}
div#taille div.colonne-taille.selected img{
	border: 4px solid #8b0d07;
}


/***************************************************************************************************************************************************************************************/

/*Grosseur*/

/***************************************************************************************************************************************************************************************/
div#grosseur {
    padding: 0 8%;
    margin-top: 100px;
    margin-bottom: 80px;
    min-height: 30vw;
}
section#form div.colonne-grosseur{
	width: 11.1111%;
    padding: 0 1%;
}
div#grosseur div.colonne-grosseur img{
	width: 100%;
	border: 4px solid #fff;
	height: 100%;
	padding: 3%;
	cursor: pointer;
}
div#grosseur div.colonne-grosseur:hover img{
	border: 4px solid #C6C6C6;
}
div#grosseur div.colonne-grosseur.selected img{
	border: 4px solid #8b0d07;
}
/***************************************************************************************************************************************************************************************/

/*Bilan*/

/***************************************************************************************************************************************************************************************/

div#produits-complementaire{
	/*display: none;*/
}
/***************************************************************************************************************************************************************************************/

/*Produits*/

/***************************************************************************************************************************************************************************************/
section#produits div.big-container{
	padding: 0 7.5%;
	display: flex;
	flex-wrap: wrap;
}
section#produits div.big-container div.content{
	width: calc( 100% - 300px);
}
section#produits div.big-container div.sidebar{
	width: 300px;
	padding-top: 30px;
}
section#produits div.big-container div.sidebar .border{
	border: 1px solid #DBDBDB;
	box-shadow: 0px 0px 50px 50px rgba(200,200,200,0.2);
	padding: 15px;
	position: fixed;
	width: 300px;
	max-height: 80vh;
	overflow-y: auto;
	z-index: 2;
}
section#produits div.big-container div.sidebar ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
section#produits div.big-container div.sidebar h4{
	margin-bottom: 0;
	position: relative;
	padding-bottom: 10px;
}

section#produits div.big-container div.sidebar a {
	font-weight: inherit;
	text-decoration: none;
}
section#produits div.big-container div.sidebar a:hover{
	text-decoration: underline;
	color: #415a73;
	text-decoration-color: #f85241;
}
section#produits div.big-container div.sidebar li{
	padding-bottom: 10px;
}
section#produits div.ranger.produit{
	display: flex;
	flex-wrap: wrap;
}
section#produits div.container{
	max-width: 90%;	
}
section#produits div.ranger.produit div.colonne{
	width: 25%;
	position: relative;
	z-index: 1;
	margin-bottom: 80px;
	padding: 0 15px;
}
section#produits div.bg h3{
	text-align: center;
}
section#produits div.bg p.description{
	text-align: center;
}
section#produits div.ranger.produit div.colonne div.border{
	border: 1px solid #DBDBDB;
	box-shadow: 0px 0px 50px 50px rgba(200,200,200,0.2);
	height: 100%;
}
section#produits div.ranger.produit div.colonne div.border h4{
	font-size: 24px;
	text-align: center
}
section#produits div.ranger.produit div.colonne div.hover{
	position: absolute;
	z-index:2;
	top:60%;
	transform: translateY(-50%);
	text-align: center;
	flex-direction: column;
	justify-content: center;
	display: flex;
	opacity: 0;
	transition: all .5s ease;
	width: 100%;
}
section#produits div.ranger.produit div.colonne:hover div.hover{
	display: block;
	opacity: 1;
	top: 50%;
	
}
section#produits div.ranger.produit div.colonne  button{
	margin: 10px auto;
	display: block;
	width: 90%;
	font-size: 16px;
}
section#produits div.ranger.produit div.colonne a{
	text-decoration: none;
}
section#produits div.ranger.produit div.colonne p{
	margin: 0;
	text-align: center;
}
section#produits h2{
	text-align: center;
	font-size: 36px;
}
section#produits div.bg hr{
	width: 80px;
	border-top: 2px solid #415a73;
	display: block;
	margin: 0 auto;
	margin-bottom: 60px;
	margin-top: 60px;
}
div.review{
	background-color: #fff;
	clear: both;
}
.wrapper-tab {
    width: 100%;
    max-width: 1300px;
	padding: 0 20px;
    margin: 0 auto;
	margin-bottom: 80px;
}
body.single-product div.container{
	min-height: initial;
	padding-bottom: 0;
}
.wrapper-tab div.content{
	background-color: #fff;
	border: 1px solid #DBDBDB;
	box-shadow: 0px 0px 50px 50px rgba(200,200,200,0.2);
	display: none;
	padding: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	min-height: 400px;
}
.wrapper-tab div.content#benefice{
	display: block;
}
.wrapper-tab div.tabs{
	display: flex;
	flex-wrap: wrap;
}
.wrapper-tab div.tabs div.tab{
	flex:1;
	text-align: center;
	border: 1px solid #f1f1f1;
	border-bottom: none;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: #f22935;
	cursor: pointer;
	color: #fff;
	transition: all .5s ease;
}
.wrapper-tab div.tabs div.tab:hover{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.wrapper-tab div.tabs div.tab:hover p{
	text-shadow: 0px 0px 16px rgba(255,255,255,1);
}
.wrapper-tab div.tabs div.tab p{
	color: #fff;
	transition: all .5s ease;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 22px;
	margin: 5px;
}
.wrapper-tab div.tabs div.tab:nth-child(2){
	background-color: #0e95d3;
}
.wrapper-tab div.tabs div.tab:nth-child(3){
	background-color: #fcb031;
}
.wrapper-tab div.tabs div.tab:nth-child(4){
	background-color: #918f5f;
}
span#plus-quantity{
	cursor: pointer;
	font-size: 20px;
}
span#moins-quantity{
	cursor: pointer;
	font-size: 20px;
}
body.woocommerce div.product form.cart .button {
    height: 40px;
    border: none;
    border-radius: 0;
    background-color: #213353;
    color: #fff;
    padding: 0 15px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    margin-left: 20px;
}
.woocommerce .quantity input.qty[type=number]::-webkit-inner-spin-button, 
.woocommerce .quantity input.qty[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.woocommerce .quantity input.qty{
	height: 40px;
}
div.full-question label{
		max-width: 500px;
	}
div.sante{
	border: 2px solid #f85241;
	width: 100%;
	padding: 30px;
	margin-top: 50px;
}
form#page-1 div.sante p.full{
	width: 100%;
	margin-top: 2em;
}
form#page-1 div.sante input{
	width: 100%;
	max-width: 100%;
}
textarea.input{
	width: 100%;
	height: auto;
	min-height: 150px;
	margin-bottom: 10px;
	padding: 15px;
	border-radius: 0;
	border: 1px solid #e2e2eb;
	background-color: transparent;
	max-width: 100%;
	color: #415a73;
}
textarea.input:focus{
	outline: none;
	border-bottom: 1px solid #f85241;
}
div.sante div.moitie{
	width: 50%;
	float: left;
	padding-right: 30px;
}
div#popup-activite{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background-color: rgba(0,0,0,0.90);
	display: none;
}
div#popup-activite span#x{
	color: #fff;
	top: 10px;
	right: 30px;
	font-size: 50px;
	position: absolute;
	z-index: 99999999;
	cursor: pointer;
}
div#popup-activite div.content-popup{
	width: 90%;
	max-width: 1000px;
	height: calc( 90% - 100px ) ;
	top: calc( 50% );
	display: block;
	margin: 0 auto;
	position: absolute;
	overflow-y: scroll;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	padding: 30px;
}
#descriptif-activite{
	cursor: pointer;
	padding-left: 10px;
}
/***************************************************************************************************************************************************************************************/

/*MQ MAX-WIDTH 850*/

/***************************************************************************************************************************************************************************************/

@media only screen and (min-width: 2200px) {
	section#produits div.ranger.produit div.colonne{
		width: 20%;
	}

}
@media only screen and (max-width: 1600px) {
	section#produits div.ranger.produit div.colonne{
		width: 33.3333%;
	}

}

@media only screen and (max-width: 1400px) {
	section#produits div.ranger.produit div.colonne{
		width: 50%;
	}
}
@media only screen and (max-width: 1270px) {
	section#footer div.ranger div.logo{
		width: 100%;
	}
	section#footer div.logo img{
		display: block;
		margin: 25px auto;
		max-width: 100%;
		width: 320px;
	}
	section#footer div.connexion h3{
		text-align: center;
	}
	section#footer div.connexion input[type=text], section#footer div.connexion input[type=password]{
		width: 100%;
		max-width: 100%;
		margin-bottom: 20px;
	}
	section#footer div.connexion input[type=submit]{
		width: 100%;
	}
	section#footer div.connexion input[type=submit] {
		width: 200px;
		max-width: 100%;
		margin: 20px 10px;
	}
	section#footer div.connexion {
		display: block;
		max-width: 450px;
		margin: 20px auto;
	}
	footer div.ranger div.colonne{
		width: 100%;
		text-align: center;
	}
}
@media only screen and (max-width: 1100px) {
	section#produits div.ranger.produit div.colonne{
		width: 100%;
	}
}
@media only screen and (max-width: 1023px) {
	section#produits div.ranger.produit div.colonne{
		width: 50%;
	}
	section#produits div.big-container div.content{
		width: 100%;
	}
	section#produits div.big-container div.sidebar{
		display: none;
	}
	header .connexion {
		margin-right: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 100%;
	}
	header .menu-top input[type="text"], header .menu-top input[type="password"] {
		width: 100%;
		margin-bottom: 10px;
		max-width: 100%;
		margin-top: 10px;
		margin-right: 0;
		margin-left: 0;
	}
	header .menu-top input[type="submit"], header .menu-top button{
		margin-right: 0;
		float: right;
	}
	.home div.height {
		height: 237px;
	}
	div.height {
		height: 190px;
	}
	header .menu-top .container{
		display: block;
	}
	header .connexion form{
		width: 100%;
		max-width: 350px;
	}
	section#form div.colonne:first-of-type{
		width: 100%;
	}
	section#form div.colonne:last-of-type{
		width: 100%;
	}
	section#form div.colonne:first-of-type h2 {
		top: 50%;
		font-size: 5vw;
	}
	input[type=text], input[type=email], input[type=password], input[type=tel], select{
		width: 100%;
	}
	form#page-1 p.full{
		width: 100%;
	}
	section#form.min-height {
		min-height: calc(100vh - 370px);
	}
	header{
		position: absolute;
	}
	div#taille{
		display: block;
	}
	section#form div.colonne-taille{
		width: 100%;
		margin-bottom: 50px;
	}
	section#banniere-accueil {
		background-size: 153%;
		background-position: bottom right;
		position: relative;
		height: 588px;
		width: 100%;
		background-repeat: no-repeat;
	}
	section#banniere-accueil div.texte{
		top: 8%;
		bottom: initial;
		max-width: 74%;
	}
	section#banniere-accueil div.texte h1{
		font-size: 26px;
	}
	
	section#video div.colonne:first-of-type, section#video div.colonne:last-of-type{
		width: 100%;
		padding-left: 0;
		margin-bottom: 40px;
	}
	section#video h2, section#liste h2, section#bandeau h2{
		font-size: 32px;
	}
	section#video p, section#liste div.ranger-etape span.etape, section#liste div.ranger-etape span.etape, section#liste div.ranger-etape p, section#banniere-accueil div.texte p{
		font-size: 18px;
	}
	section#liste div.ranger-etape h3{
		font-size: 24px;
	}
	section#video p.prix{
		font-size: 20px;
	}
	section#video button, section#bandeau button, section#banniere-accueil div.texte button{
		padding: 15px 10px;
		font-size: 16px;
		width: 224px;
		margin-top: 15px;
	}
	section#liste div.ranger-etape div.colonne:nth-child(odd), section#liste div.ranger-etape div.colonne:nth-child(even){
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}
	section#bandeau div.bandeau {
		background-size: 225%;
		background-position: bottom left;
		height: 500px;
	}
	section#bandeau div.bandeau div.texte {
		top: 5%;
		transform: none;
		left: 6%;
		max-width: 60%;
	}
	section#liste div.ranger-etape div.colonne li:before {
		width: 30px;
		height: 30px;
		top: 20px;
		left: -40px;
	}
	section#liste div.titre, section#liste div.ranger-etape ul{
		padding-left: 20px;
	}
	div.sante div.moitie{
		width: 100%;
	}
}
@media only screen and (max-width: 767px) {
	.home div.height {
		height: 116px;
	}
	section#video div.container:before{
		width: 140px;
		height: 140px;
	}
	section#produits div.ranger.produit div.colonne{
		width: 100%;
	}
	section#form div.colonne-image {
		width: 100%;
	}
	div.full-question {
		display: block;
		clear: both;
		padding-top: 20px;
		padding-bottom: 20px;
		overflow: hidden;
	}
	div.full-question div{
		width: 100%;
	}
	div.full-question label{
		width: 100%;
		padding-bottom: 10px;
		max-width: 100%;
	}
	section#form div.ranger-produits div.colonne:first-of-type{
		width: 100px;
	}
	section#form div.ranger-produits div.colonne:last-of-type{
		width: calc(100% - 100px);
	}
	section#form div.ranger-bouton{
		display: block;
	} 
	section#form div.ranger-bouton button{
		display: block;
		margin: 10px auto;
		min-width: 245px;
	}
	section#form.min-height{
		padding-bottom: 160px;
	}
	section#form div.colonne-grosseur {
		width: 100%;
		max-width: 400px;
		display: block;
		margin: 0 auto;
		padding: 0 1%;
	}
	section#form div.ranger-produits-complementaires div.colonne:nth-child(2) {
		width: calc( 100px);
	}
	section#form div.ranger-produits-complementaires div.colonne:last-of-type {
		width: calc( 100% - 130px);
	}
	section#form div.ranger-produits-complementaires div.colonne:first-of-type{
		width: 30px;
		padding-right: 0;
	}
	section#form div#form-registration div.suivant p {
		font-size: 24px;
		font-weight: 700;
	}
	ul.float li{
		float: none;
	}
	section#form h2{
		font-size: 24px;
	}
	div#grosseur div.colonne-grosseur img {
		width: 80%;
		max-width: 165px;
		margin: 20px auto;
		display: block;
	}
}
@media only screen and (max-width: 767px) {
	.home div.height {
		height: 286px;
	}
	div.height {
		height: 269px;
	}

	section#produits div.big-container{
		padding: 0 15px;
	}
	header .connexion p{
		text-align: center;
		width: 100%;
	}
	header .menu-top input[type="submit"], header .menu-top button{
		float: none;
		display: block;
		margin: 10px auto;
	}
	header div.logo {
		width: 200px;
		display: block;
		margin: 0 auto;
	}
	header .connexion{
		margin-top: 30px;
	}
}