@CHARSET "utf-8";

/* PREPARATION RESPONSIVE */
.w780 {display:none;}
.w435 {display:none;}
.w1260 {display:block;}

/* PC */
@media all and (min-width:881px) {
	#bandeau-mobile {display:none;}
	#menumobile-wrapper {display:none;}
	#menumobile {display:none;}
}

@media all and (max-width:1259px) {
	
	/* Bandeau */
	#bandeau-sup .global {padding:0 15px;}
	#bandeau .titre {}
	#bandeau.sm .menu-wrapper {}
	#bandeau #logo a,
	#bandeau #logo a:visited {width:235px;}

	
	/* Menu */
	#bandeau.sm #menu .menu-element,
	#menu .menu-element {}
	#menu .menu-element > span,
	#menu .menu-element > a,
	#menu .menu-element > a:visited {max-width:100px; text-align:center;}
	
	/* Sous menu "Soins et tarifs" */
	#menu #smenu-77.smenu-conteneur {width:100%;}
	#menu #smenu-77 .smenu-centre {padding-left:0px; background:none;}
	#menu .smenu-centre .smenu-photo {display:none !important;}
	#menu #smenu-77 .smenu-colonne.trois-colonnes {width:calc(33% - 10px); } 
	
	/* Pied */
	#pied #pied-facebook {display:block; margin:15px auto 0 auto;}
	
	.iframe-responsive-wrapper {position: relative;}
	#contenu .iframe-responsive-wrapper .iframe-ratio {   display: block;    width: 97%;   height: auto;}
	.iframe-responsive-wrapper iframe{position: absolute;top: 0;left: 0;width: 97% !important; height: 97% !important;}
	
	/* Module Accueil */
	#pied-sup-accueil {height:auto; text-align:center;}
	
	/* Template Famille (famille) */
	#famille.fam .ligne {text-align:center; }
	
	
    video {width:100%; height:auto;}
}

@media all and (max-width:1200px) {
	#module-contact .googlemap {float:none;}
}

@media all and (max-width:1160px) {
	#contenu img {max-width:100%; max-height:100%; height:auto;}
}

@media all and (max-width:1090px) {
	#menu .menu-element > span,
	#menu .menu-element > a,
	#menu .menu-element > a:visited {padding:0 5px; font-size:16px;}
	
	/* Template Produit */
	#produit {}
	#produit .photos {float:none; display:inline-block; vertical-align:top; width:50%; max-width:350px;}
	#produit .texte {margin-left:0px; display:inline-block; vertical-align:top; width: calc(100% - 350px); }
	#produit .texte p:first-child {margin-top:0px;}
}

@media all and (max-width:1010px) {
	/* Pied */
	#pied #pied-logos {display:block; margin:0px 0px 15px 0px; text-align:center;}
}

@media all and (max-width:990px) {
	
	#bandeau-sup .global {padding:0 10px;}
	#bandeau .sloganEnseigne {padding-left:0px;}
	#bandeau #logo {top:44px;}
	#bandeau #logo a,
	#bandeau #logo a:visited {width:165px; height:auto;}
	
	#menu .menu-element > a > span,
	#menu .menu-element > span {}
	#menu .menu-element {}
	
	/* Droite */
	#droite {display:none;}
	
	/* Contenu */
	#contenu {width:auto; max-width:none;}
	
  	#accueil-actualite {width:100%;}
  	
  	/* Module Contact */
  	#module-contact #module-contact-adresse {float:none; width:100%;}
	#module-contact .googlemap {float:none;  width:100%; margin:20px 0;}
}

/* Tablette */
@media all and (max-width:880px) {
	.w1260 {display:none;}
	.w435 {display:none;}
	.w780 {display:block;}
	
	body {width:100%;}
	
	#global {min-width:inherit; margin:0 auto; width:auto; padding-top:0px;}
	
	/* Bandeau */
	#bandeau {display:none;}
	
	/* Centre */
	#global {padding-left:0px; padding-right:0px;}
	#centre {padding:0px;}
	
	#contenu h2,
	#contenu h3 {padding-left:0px;}
	
	/* Droite */
	#droite {display:none;}
	
	/* Gauche */
	#gauche {display:none;}
	
	/* Centre */
	#centre {width:auto; margin:0; padding-top:0px;}
	#centre .global {padding-left:0px; padding-right:0px;}
	#centre .global .contenu-wrapper {padding-top:0px;}
	
	/* Fil d'ariane */
	#ariane {display:none;}
	
	/* Contenu */
	#contenu {width:auto;}
	
	/* Pied */
	#pied-sup {background:none; padding-top:0px;}
	
	/* Formulaire */
	input.bouton {height:38px;}
	#contenu select,
	#contenu .input-text,
	#contenu input {width:97%;height:30px;}
	#contenu input[type="image"],#contenu input[type="checkbox"],#contenu input[type="radio"] {width:auto; height:auto;}
	#contenu select {height:40px; }
	#contenu textarea,
	#contenu textarea {width:97% !important; }
	#contenu .form140 {float:none; text-align:left; width:auto;}
	
	#module-contact .submit { margin-left:0; }
	
	/* Paginator */
	#paginator {margin:20px 0;}
	#contenu #paginator .pagination-lien, #contenu #paginator .pagination-span {margin:0 9px;}
	
	/* Menu mobile */
	#bandeau-mobile {height:inherit; min-width:inherit; background:#704D37; width:100%; }
	#bandeau-mobile .menu-icon {padding:5px 10px 2px 10px; }
	
	#bandeau-mobile .menu-icon #bandeau-menu {display:block; float:left;}
	#bandeau-mobile .menu-icon .fa-bars {color:#ffffff; font-size:41px;}
	
	#bandeau-mobile .mobile-panier {display:flex; flex-direction:column; justify-content:center; float:right; color:#fef3e0; background: url(../images/spa-sante-panier.png) left center no-repeat; height:41px; padding-left:35px; text-decoration:none; text-transform:uppercase;}
	
	#bandeau-mobile .menu-icon a.enseigne {color: #ffffff; display: block; float: right; padding-right: 15px; text-decoration:none;}
	
	#bandeau-mobile .mobile-logo {width:120px; margin:0 auto; display:block; float:none;}
	#bandeau-mobile .mobile-logo img {width:100%; height:auto;}
	
	#menumobile-wrapper {display:block;}
	#menumobile {width:100%; background:#fcf8f0; padding:5px 0; border-bottom:1px solid #704d37; display:none;}
	#menumobile .menumobile-element {margin:15px 0 5px 0; padding:0 7px;}
	#menumobile .menumobile-element span,
	#menumobile .menumobile-element a,
	#menumobile .menumobile-element a:visited {text-decoration:none; color:#5a5a5a; font-family:"VAGBold", Arial; color:#704d37; text-transform:uppercase; font-size:1.1em;}
	#menumobile .menumobile-element a:hover {text-decoration:underline;}
	#menumobile .smenumobile-conteneur {padding:0 20px;}
	#menumobile .smenumobile-conteneur .smenumobile-element {margin:6px 0; line-height:17px;}
	#menumobile .smenumobile-conteneur .smenumobile-element span,
	#menumobile .smenumobile-conteneur .smenumobile-element a,
	#menumobile .smenumobile-conteneur .smenumobile-element a:visited {text-decoration:none; font-size:1em; font-family:"VAGBold", Arial; text-transform:none; }
	#menumobile .smenumobile-conteneur .smenumobile-element span {font-weight:bold;}
	#menumobile .smenumobile-conteneur .smenumobile-element a:hover {text-decoration:underline;}
	#menumobile .smenumobile-conteneur .ssmenumobile-element {}
	#menumobile .smenumobile-conteneur .ssmenumobile-element a,
	#menumobile .smenumobile-conteneur .ssmenumobile-element a:visited {font-size:1em; font-family:"VAGLight", Arial; text-decoration:none; padding-left:7px; text-transform:none;}
	#menumobile .smenumobile-conteneur .ssmenumobile-element a:hover {text-decoration:underline;}
	
	
	.accueil-actualite {width:50%;}
	
	/* Template Produit */
	#contenu #produit input {width:auto;}
	
	/* Module Cart (Panier) */
	#contenu #cart-grid input {width:inherit; height:inherit;}
	
	/* Etape 2 */
	#compte-authentification .submit,
	#compte-creation .submit {float:none; text-align:right; margin-top:20px;}
	
	#compte-authentification .submit input,
	#compte-creation .submit input {width:inherit;}
	
	/* Etape 3 */
	#panier #panier-actions #panier-suivant {width:inherit;}
}

@media all and (max-width: 835px) {
	#accueil-bandeau-slider .accueil-bandeau-slider-nom {font-size: 30px; line-height: 35px;}
}

@media all and (max-width: 735px) {
	#produit .texte { width:50%; }
	
	.conditions label {display:block;}
	
}

@media all and (max-width: 640px) {
	
	
	#accueil-bandeau-slider .accueil-bandeau-slider-nom {font-size: 25px; }
	
	.accueil-actualite {float:none; width:100%;}
  	.accueil-actualite-image {height:150px;}
  	
  	/* Contenu */
  	#contenu {padding: 15px 10px 30px 10px;}
  	
  	/* Pied */
  	#pied .global {padding:0px;}
  	#pied #pied-plan,
  	#pied #pied-mentions,
  	#pied #pied-creation {display:block; padding:0px; margin:10px 0; text-align:center;}
  	#pied #pied-plan:after,
  	#pied #pied-mentions:after {display:none;}
  	#pied #pied-creation {width:auto;}
  	#pied #pied-creation a#pied-creation-site {float:none;}
  	#pied #pied-creation a,
  	#pied #pied-creation a:visited {}
  	
  	/* Template Famille */
  	#famille .ligne .conteneur.famille-liste .photo {float:none; margin-right:0px; margin-bottom:10px;}
  	#famille .ligne .conteneur .details {float:none; width:auto;}
  	
  	/* Template Produit */
  	#produit .photos {width:auto; display:block; margin:0 auto;}
  	#produit .photos img {margin:0 auto;}
  	#produit .texte {width:auto; margin-top:15px;}
  	#produit .texte p {padding-left:0px;}
  	
  	/* Table responsive */
	#centre table.table-vertical {float:none; width:100% !important; margin:10px auto;}
	table.table-vertical tr td {display:inline-block; vertical-align:top;}
	
	#contenu .table-vertical thead tr {
	    left: -9999px;
	    position: absolute;
	    top: -9999px;
	}
	#contenu table.table-vertical,
	#contenu table.table-vertical thead,
	#contenu table.table-vertical tbody,
	#contenu table.table-vertical th,
	#contenu table.table-vertical td,
	#contenu table.table-vertical tr {
	    display: block;
	}
	
	#contenu .table-vertical td {
	    -moz-border-bottom-colors: none;
	    -moz-border-left-colors: none;
	    -moz-border-right-colors: none;
	    -moz-border-top-colors: none;
	    border-color: -moz-use-text-color -moz-use-text-color #e0e0e0;
	    border-image: none;
	    border-style: none none solid;
	    border-width: 0 0 1px;
	    padding-left: 30% !important;
	    position: relative;
	    text-align: left;
	    white-space: normal;
	    width:auto;
	}
	
	#contenu .table-vertical td::before {
	    content: attr(data-title);
	    font-weight: 700;
	    left: 6px;
	    padding-right: 10px;
	    position: absolute;
	    text-align: left;
	    top: 6px;
	    white-space: nowrap;
	    width: 27%;
	}
	
	/* Module Cart (Panier) */
	#cart-grid tr.paire,
	#cart-grid tr.impaire {margin-top:15px;}
	
	#cart-grid tr.paire td,
	#cart-grid tr.impaire td {padding:5px 0px;}
	
	#contenu #cart-grid.table-vertical tr.promotion td,
	#contenu #cart-grid.table-vertical td.commentaire-conteneur {padding-left:0% !important; border:none;}
	#cart-grid .commentaire-label {padding:10px 0; }
	
	#contenu #cart-grid.table-vertical td.label {display:none;}
	#contenu #cart-grid.table-vertical td.total,
	#contenu #cart-grid.table-vertical td.totalpanier {text-align:right;}
}


@media all and (max-width:550px) {
	#recap-produit {width:96%;}
	#recap-produit .dr-lien a,
	#recap-produit .dr-lien a:visited {float:none; display:block; width:220px; margin:5px auto;}
	#recap-produit .dr-lien a#recap-produit-panier {float:none;}
}

@media all and (max-width:480px) {
	
	#actualites .conteneur .contenu .photo {float:none; margin:10px auto; text-align: center;}
	
	/* Pied */
	#pied #pied-logos img {height:auto; max-width: 100%;}
	
	/* Module Accueil */
	
	/* Template Produit */
	#declinaisons {}
	#produit .declinaison-titre-mobile {display:block;}
	#declinaisons table tr th,
	#declinaisons table tr td.duree,
	#declinaisons table tr td.prix {display:none;}
	
	#produit #declinaisons table td.nom {font-family: "VAGbold"; font-size:16px; }
	#produit #declinaisons table td.nom .duree,
	#produit #declinaisons table td.nom .prix {display:block; font-family: "VAGLight"; font-size:14px;}
	
	#produit .retour,
	#produit .bouton-conteneur {text-align:center; display:block; float:none;}
	
	#produit .retour {margin-bottom:10px;}
	
	#produit .retour a,
	#produit .retour a:visited,
	#produit .bouton-conteneur a,
	#produit .bouton-conteneur a:visited {width:88%;}
}

/* Smartphone */
@media all and (max-width:435px) {	
	.w1260 {display:none;}
	.w780 {display:none;}
	.w435 {display:block;}
	
	/* Gel du parallax */
	#bandeau-image {display:none;}
	.parallax-mirror {display:none;}
	
	/* Module Cart (Panier) */
	#centre #panier-actions {text-align:center;}
	#centre #panier-actions #panier-precedent,
	#centre #panier-actions #panier-suivant {width:93%; margin-top:10px; float:none; display:inline-block; vertical-align:top; padding:0px;}
	
	#bandeau-mobile .mobile-panier {font-size:0px;}
}

@media all and (max-width:390px) {
	
	#accueil-bandeau-slider .accueil-bandeau-slider-nom {font-size: 22px; }
	
	
	/* Récapitulatif */
	#recap-produit-message {font-size:17px;}
	
	/* Module Cart (Panier) */
	#cart-grid tr.paire td,
	#cart-grid tr.impaire td {text-align: right; padding-right: 15px; }
	
	#compte-continuer .submit,
	#compte-authentification .submit,
	#compte-creation .submit {text-align:center;}
	
	#compte-authentification .submit input,
	#compte-creation .submit input {width:97%;}
	
	#compte-continuer .submit {display:block;}
	#compte-continuer .submit a {width:89%;}
}