@CHARSET "utf-8";

/* PC */
@media all and (min-width:781px) {
	#bandeau .menu-wrapper  {display:block !important;}
	#bandeau-mobile {display:none !important;}
	#paniermobile-bandeau {display:none !important;}
	#mon-comptemobile {display:none !important;}	
	#mon-comptemobile-smenu {display:none !important;}
	#paniermobile-contenu {display:none !important;}
}

@media all and (max-width:1259px) {
	
	.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;}
		
    video {width:100%; height:auto;}
    
  /*  #menu .menu-element {margin:0 14px;}*/
    
    #accueil-slider .accueil-slider-li .accueil-slider-centre .global {width:calc(100% - 150px);}
    #accueil-slider-control-prev { left: 25px;}
	#accueil-slider-control-next { right: 25px;}
	
	#accueil-informations-conteneur .global {padding:0 10px;}
	#accueil-informations .accueil-pave-titre {height:auto;}
	#accueil-informations .accueil-pave-texte {height:auto;}
}

@media all and (max-width:1210px) {
   /* #menu .menu-element {margin:0 10px;}*/
}

@media all and (max-width:1190px) {
	#bandeau #logo a img {height:74px;}
	#bandeau-telephone > span, #global #bandeau-telephone > a, #global #bandeau-telephone > a:visited {font-size:19px;}
		
	#menu .menu-element {margin:0 30px;}
	
	#accueil-vousetes .accueil-vousetes {margin: 20px 55px;}
	
}

@media all and (max-width:1130px) {

	#bandeau #logo {padding: 2px 0 0 1px;}
	#bandeau #logo a img {height:52px;}	
}

@media all and (max-width:1100px) {

	#bandeau.sm #bandeau-telephone > span, #global #bandeau.sm #bandeau-telephone > a {font-size: 16px; padding-top: 28px;}
	#bandeau.sm #menu-conteneur { padding-top: 16px; }
	#bandeau.sm #menu .menu-element > a > span, 
	#bandeau.sm #menu .menu-element > a:visited > span, 
	#bandeau.sm #menu .menu-element > span {font-size:14px;}
	#bandeau.sm #menu .menu-element > a > span::after,
	#bandeau.sm #menu .menu-element > span::after {bottom:9px;}
	
	#accueil-paves .accueil-pave {width:33.33333%;}
	
	#accueil-vousetes .accueil-vousetes {margin: 20px 35px;}
	
	
	#accueil-informations .accueil-information-image {width:205px;}
	#accueil-informations .accueil-pave-centre {width:calc(100% - 220px);}
	
}
	
@media all and (max-width:990px) {
	.lg {height: 100px;}
	.sm {height:61px;}
	
	#bandeau.sm .bandeau-element {height:30px; min-width: 90px;}
	#bandeau.sm .bandeau-element > span,
	#bandeau.sm .bandeau-element > a,
	#bandeau.sm .bandeau-element > a:visited {padding:2px 0 0 30px; height:calc(100% - 2px);width:calc(100% - 30px);  background-position:3px center ; }
	#bandeau.sm #bandeau-telephone > span, 
	#global #bandeau.sm #bandeau-telephone > a {font-size:16px; padding: 5px 0 0 25px; width:calc(100% - 25px); background-position:left 3px; height: calc(100% - 5px);}
	#bandeau.sm #bandeau-email span, 
	#bandeau.sm #bandeau-email a {font-size:11px;}
	#bandeau.sm #bandeau-client .bandeau-titre span {font-size:11px; padding:2px 0 0 35px; width:calc(100% - 35px);  height:calc(100% - 2px); background-position:7px center ; }
	#bandeau.sm #mon-compte-smenu {top:30px;}
	
	#bandeau.sm #logo a img {height:40px;}
	#bandeau.sm #menu-conteneur {padding-top: 30px;}
	#bandeau.sm #menu .menu-element > a > span::after,
	#bandeau.sm #menu .menu-element > span::after {bottom:-1px;}

	#bandeau.sm #menu .menu-element > a > span, 
	#bandeau.sm #menu .menu-element > a:visited > span, 
	#bandeau.sm #menu .menu-element > span { padding:5px 0;}
	#bandeau.sm #menu .smenu-conteneur {top:27px;}

	#bandeau .bandeau-element {height:55px; min-width:110px; text-align:left; }
	#bandeau .bandeau-element > span, 
	#bandeau .bandeau-element > a, 
	#bandeau .bandeau-element > a:visited {height: calc(100% - 10px); padding:10px 0 0 35px; width:calc(100% - 35px); background-position: 3px 16px; background-size:27px auto; -webkit-background-size: 27px auto; -moz-background-size: 27px auto; -o-background-size: 27px auto; }		
	#bandeau #bandeau-telephone > span, 
	#global #bandeau #bandeau-telephone > a, 
	#global #bandeau #bandeau-telephone > a:visited {background-position:left 10px; padding-top:14px; height: calc(100% - 14px);}
	
	#bandeau #bandeau-client .bandeau-titre span {height: calc(100% - 13px); padding:11px 0 2px 40px;  width:calc(100% - 40px); background-position: 5px center; background-size:22px auto; -webkit-background-size: 22px auto; -moz-background-size: 22px auto; -o-background-size: 22px auto; }
	#bandeau #mon-compte-smenu {top:55px;}
	
	#menu .menu-element {  margin: 0 20px;}
	
	#contenu h1,
	#accueil-conteneur h2 {padding:0 30px;}
	/* Droite */
	#droite {display:none;}

  	/* Module Contact */
  	#module-contact #module-contact-adresse {float:none; width:100%;}
	#module-contact .googlemap {float:none;  width:100%; margin:20px 0;}
	
	
	/* Template Article Default */
	#template-article .template-article-image-texte .template-article-image,
	#template-article .template-article-texte-image .template-article-image {margin:20px auto 20px; text-align:center;}	
	#template-article .template-article-image {width:100%; }
	#template-article .template-article-image img {max-width:400px; width:100%; height:auto !important;}
	#template-article .template-article-texte {width:100%;}
	
	#accueil-slider {height:350px;}
	#accueil-slider .accueil-slider-li .accueil-slider-titre, 
	#accueil-slider .accueil-slider-li .accueil-slider-titre p {font-size: 50px;}
	#accueil-slider .accueil-slider-li .accueil-slider-texte, 
	#accueil-slider .accueil-slider-li .accueil-slider-texte p {font-size: 30px;}
	#accueil-slider-control-prev, #accueil-slider-control-next {top: calc(100% - 200px);}
	
	#accueil-informations .accueil-information {margin:5px 0 45px 50px;}
	#accueil-informations .accueil-information-image {display:block; width:235px;margin:0 auto;}
	#accueil-informations .accueil-pave-centre {width:100%; margin:10px 0 0;}
	 
	#pied #col-menu {width: 240px;}

		
	#realisations .conteneur .contenu .photo {width:250px;}
	#realisations .conteneur .contenu .photo img {width:auto; height:auto; max-width:100%; max-height:100%;}
	
	
	
}

@media all and (max-width:930px) {
		
	#accueil-vousetes .accueil-vousetes {margin: 20px;}
				
	#pied .col {float:none !important; margin: 15px 5px; padding:0; width:320px !important;}
	#pied #col-centre.col { display:block;}	

}
@media all and (max-width:860px) {

	
	#gabarit-photo .gabarit-gauche-image,
	#gabarit-photo .gabarit-droite-image {max-width:50%;}

}

@media all and (max-width:810px) {
	#accueil-paves .accueil-pave {width:50%;}
	
	#accueil-vousetes .accueil-vousetes {margin: 20px 10px;}
}

/* Tablette */
@media all and (max-width:780px) {
	
	body {width:100%;}
	
	#global {min-width:inherit; margin:0 auto; width:auto; padding-top:105px;}

	/* Bandeau */	
	.noscroll #bandeau-haut,
	.noscroll #bandeau-contact,
	.noscroll #bandeau-mobile {display:none;}
	
	#bandeau.sm #bandeau-haut {background:#fff; color:#222222; height:0px;}
	#bandeau.sm .bandeau-element {height:100%;}
	#bandeau.sm .bandeau-element a, #bandeau.sm .bandeau-element > span,
	#bandeau.sm #bandeau-telephone,#bandeau.sm #bandeau-telephone span, #global #bandeau.sm #bandeau-telephone a, #global #bandeau.sm #bandeau-telephone a:visited {color:#525252;}	
	#bandeau.sm #bandeau-email a { padding:3px 5px 1px 35px; height:calc(100% - 4px);}
	
	#bandeau.sm #bandeau-client {top:0px; height:35px;}		
	#bandeau.sm #bandeau-client .bandeau-titre span {padding: 5px 0 0 35px; height:calc(100% - 5px);}
	#bandeau.sm #bandeau-conteneur {height:auto;}	
	#bandeau.sm #bandeau-contact {opacity:0; height:0;}
	#bandeau.sm #bandeau-contact #logo {display:none; }
	#bandeau.sm #bandeau-telephone > span, 
	#global #bandeau.sm #bandeau-telephone > a, 
	#global #bandeau.sm #bandeau-telephone > a:visited {background-position: left 4px; padding:5px 0 0 25px; height:calc(100% - 5px);  background-size:19px auto; -webkit-background-size: 19px auto; -moz-background-size: 19px auto; -o-background-size: 19px auto; }
	
	#bandeau.sm #mon-compte-smenu {top: 35px;}
	
	
	#bandeau-haut {height:50px; width: 110px;float: right;}	
	#bandeau-haut .global, #bandeau-elements {height:100%;}	
	#bandeau-contact {opacity:1;  height:20px; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out;}
	
	
	.lg {  height: 105px;}
	.sm { height: 35px; border:none;}
		
	#bandeau-conteneur {height:auto; clear: right;}
	#bandeau #logo {float:none; padding:0px 0 0px 8px; position: absolute; left: 0; top: -45px;}
	#bandeau #logo a img {height:60px; }
	#bandeau .bandeau-element {height:100%;}
	#bandeau .bandeau-element > span, 
	#bandeau .bandeau-element > a, 
	#bandeau .bandeau-element > a:visited {padding:5px 5px 0 35px; width:auto; height:calc(100% - 5px); background-position: 3px 14px;}
	#bandeau #bandeau-email {width:110px;}
	#bandeau #bandeau-email a {width:calc(100% - 40px); padding:8px 5px 0 35px; height:calc(100% - 8px);}
	#bandeau #bandeau-telephone > span, 
	#global #bandeau #bandeau-telephone > a, 
	#global #bandeau #bandeau-telephone > a:visited {background-position: left 4px;padding:5px 0 0 35px; height:calc(100% - 5px);   background-size:24px auto; -webkit-background-size: 24px auto; -moz-background-size: 24px auto; -o-background-size: 24px auto; }
	#bandeau #bandeau-client {position:absolute; right:0px; top:20px; min-width: 0; width: 110px; height:50px;}
	#bandeau #bandeau-client .bandeau-titre span {height: calc(100% - 12px); padding: 8px 0 4px 40px;}
	#bandeau #mon-compte-smenu {  top: 50px;}
	
	/* Menu mobile */
    #bandeau-mobile { min-width:inherit; width:100%; }	
	
 	/* bas */
	#bandeau-mobile-bas {position: relative; z-index: 45; clear:both; background:#ff3d9e; height:35px; cursor:pointer; }
	#bandeau-mobile-bas > span {font-size: 18px; width: auto; text-transform: uppercase; padding-left:40px; padding-top: 7px; display: block; color: #ffffff; text-decoration: none; position:relative;}
	#bandeau-mobile-bas i {position:absolute; left:10px; top:5px; font-size:23px;}
			
	#bandeau #menu-conteneur { padding:0; position: fixed; z-index: 9999; top: 0;left: 0;  height: 100%;  width:80%;  width: calc(100% - 45px); background: #fff;    -webkit-transition: transform 0.5s;    -khtml-transition: transform 0.5s;    -moz-transition: transform 0.5s;    -ms-transition: transform 0.5s;    -o-transition: transform 0.5s;    transition: transform 0.5s;    -webkit-transform: translateX(-100%);    -khtml-transform: translateX(-100%);    -moz-transform: translateX(-100%);    -ms-transform: translateX(-100%);    -o-transform: translateX(-100%);    transform: translateX(-100%);    overflow-x: hidden;    overflow-y: scroll;}
	#bandeau #menu-conteneur.open {display: block;-webkit-transform: translateX(0%);-khtml-transform: translateX(0%);-moz-transform: translateX(0%);-ms-transform: translateX(0%);-o-transform: translateX(0%);transform: translateX(0%);}
	
	#bandeau #menu-titre { display:block; margin-bottom: 20px;}
	#bandeau #menu-titre > span {font-size: 18px; width: auto; text-transform: uppercase; padding-left:20px; padding-top: 5px; display: block; color: #313131; text-decoration: none; position:relative;}
	#bandeau #menu-titre i {position:absolute; left:0px; top:6px; font-size:20px;}
			
	#bandeau #menu-close {display: none; line-height: 45px; cursor:pointer; font-weight: 700; z-index: 999; border:1px solid #313131; text-align:center; font-size: 50px;color: #ffffff; width: 45px;height: 45px; position: fixed;  top: 0; right: 0;background: #313131;}
	#bandeau #menu-close.visible {display:block;}
	#bandeau #menu-wrapper {padding: 10px;}	
	#bandeau #menu-conteneur .target {display:none;}
	#menu .menu-element {height:auto; margin:10px 0px 0 !important; display:block; padding:0 0 10px 17px; border-bottom:1px solid #edecec;}
	#menu .menu-element > a > span,
	#menu .menu-element > a:visited > span,
	#menu .menu-element > span {padding:5px; text-align:left;  color:#313131; opacity:1 !important; border:none;font-size:15px;}
	
	#menu .menu-element > a > span::after,
	#menu .menu-element > span::after,
	#menu .menu-element.selected > a > span::after,
	#menu .menu-element.selected > span::after,
	#menu .menu-element:hover > a > span::after,
	#menu .menu-element:hover > span::after {display:none !important;}	
	
	#menu .menu-element.selected > a > span,
	#menu .menu-element.selected > span {color:#016eeb; font-weight:500;}
	#menu .menu-element:hover > a > span,
	#menu .menu-element:hover > span {color:#016eeb;}
	
	#menu .smenu-conteneur {margin-top:6px; width:100%; padding:0; display:block !important; position:relative; left:0 !important; top:0; background:none; min-height: 0; height:auto !important;}
	#menu .smenu-centre {border:none; margin:0; width:auto;}
	#menu .ssmenu-conteneur-images {display:none !important;}
	#menu .smenu-centre-menus {float:none; width:auto;}
	#menu .smenu-conteneur .smenu-element{display:block; width:auto;}
	#menu .smenu-element > a > span, 
	#menu .smenu-element > span {text-align: left;padding:5px 0 5px 15px; display:block !important; border:none;width:auto; text-decoration:none;color:#000000;font-size:14px; text-transform: none; }
	#menu .smenu-element > a, #menu .smenu-element > a:hover {text-decoration:none;}
	
	#menu .smenu-element.selected > a > span,
	#menu .smenu-element:hover > a > span {background:#ff3d9e;color:#fff;}

	#menu .smenu-element > a > span::after,
	#menu .smenu-element > span::after,
	#menu .smenu-element.selected > a > span::after,
	#menu .smenu-element.selected > span::after,
	#menu .smenu-element:hover > a > span::after,
	#menu .smenu-element:hover > span::after {display:none !important;}
	
		
	/* Gauche */
	#gauche {display:none;}
	
	/* Centre */
	#centre {width:auto; margin:0; padding-top:0px;}
	#centre .global .contenu-wrapper {padding-top:0px;}
	
	#centre table {float:none; width:100% !important; margin:10px auto;}
	table tr td {display:inline-block; vertical-align:top;}
	
	#produit #declinaisons tr td {display:table-cell;}
	#cart-grid tr td {display:table-cell;}
	#cart-grid .prix {display:none;}
	
	
	/* Fil d'ariane */
	#ariane {display:none;}
	
	/* Contenu */
	#contenu {width:auto; }
	#contenu img {max-width:100%; max-height:100%;  height:auto; width:auto; }
	
	#contenu h1,
	#accueil-conteneur h2 {padding:0 15px; max-width: 85%;}
	
	/* Formulaire */
	input.bouton {height:38px;}
	#contenu .input-text,
	#contenu input[type="text"] {width:calc(100% - 15px);height:30px;}
	#contenu input[type="image"],#contenu input[type="checkbox"],#contenu input[type="radio"] {width:auto; height:auto;}
	#contenu select {height:30px; }
	#contenu textarea {width:calc(100% - 12px) !important; }
	#contenu .submit input, 
	#contenu input.submit, 
	#contenu .bouton, #contenu a.bouton, 
	#contenu a.bouton:visited {width:100%;}
	#contenu .form140 {float:none; text-align:left; width:auto;}
	#module-contact .form div.submit-conteneur,#module-contact .submit, #module-contact #contact-captcha { margin-left:0;}	
	#contact-container .contact-vide {display:none;}
	
	/* Paginator */
	#paginator {margin:30px 0 20px;}
	#contenu #paginator .pagination-lien, #contenu #paginator .pagination-span {margin:0 9px;}

	.mosaique-conteneur {text-align:center;}
		
	#produit-photo-zoom div.desktop {display:none;}
	#produit-photo-principale-responsive{display:block;}
	
	
	#cart-grid .cart-nom {width: calc(100% - 290px);}
	#contenu #panier-suivant {width: 263px; height: 29px;}
	#cart-grid #promotion-code {width:170px; height:18px;} 

	
	#accueil-slider {height:310px;}
	#accueil-slider .accueil-slider-li .accueil-slider-titre, 
	#accueil-slider .accueil-slider-li .accueil-slider-titre p {font-size: 40px;}
	#accueil-slider .accueil-slider-li .accueil-slider-texte, 
	#accueil-slider .accueil-slider-li .accueil-slider-texte p {font-size: 25px;}
	#accueil-slider-control-prev, #accueil-slider-control-next {top: calc(100% - 170px);}
		
	#accueil-vousetes .accueil-vousetes {width: 202px; height: 202px;}	
}

@media all and (max-width: 710px) {	

	#renseignement-titre span {font-size: 26px;}
	#renseignement-contenu {width:calc(100% - 300px);}
}

@media all and (max-width: 685px) {	
	
	#contenu h1,
	#accueil-conteneur h2 {padding:0 10px; max-width: 70%;}
	
	#accueil-vousetes .accueil-vousetes {margin: 10px; width: 182px; height: 182px;}
	#accueil-vousetes .accueil-vousetes-image {height:110px;}
	
	#realisations .conteneur .contenu .photo {float:none; margin:10px auto;}
	#realisations .conteneur .contenu .extrait {min-height:0;}
	
	/* Renseignement petit */
	#renseignement-titre {display:block;}
	#renseignement-titre::after {display:none;}
	#renseignement-contenu {margin-left:0; display:block; width:100%;}
		
}

@media all and (max-width: 605px) {
    	
	#contenu p,
	#contenu ul,
	#contenu h2,
	#contenu h3 {margin-left:0px;}
	
		
	#gabarit-photo .gabarit-gauche-image,
	#gabarit-photo .gabarit-droite-image {float:none !important; margin:15px auto !important; max-width:unset;}
	#gabarit-photo .portrait,
	#gabarit-photo .paysage {width:100%; min-width: 0 !important; text-align:center;}
	
	
	#pied .col {display:block; width:100% !important; }
}


@media all and (max-width:580px) {
	
	#accueil-slider {height:275px;}
	#accueil-slider .accueil-slider-li .accueil-slider-titre, 
	#accueil-slider .accueil-slider-li .accueil-slider-titre p {font-size: 35px;}
	#accueil-slider .accueil-slider-li .accueil-slider-texte, 
	#accueil-slider .accueil-slider-li .accueil-slider-texte p {font-size: 20px;}	
	#accueil-slider .accueil-slider-li .accueil-slider-centre .global {width:calc(100% - 20px);}
	#accueil-slider-fleches-conteneur {display:none;}
		
	#accueil-paves .accueil-pave {width:100%; max-width:315px; margin:0 auto; display:block;}

	#accueil-informations .accueil-information {margin:5px auto 20px !important; width:100%;}
		

	
	#contenu h1,
	#accueil-conteneur h2 {padding:0; max-width: 100%; font-size: 30px; width:auto;}
	
	#contenu .h1-conteneur::before,
	#accueil-conteneur .h2-conteneur::before,
	#accueil-vousetes-conteneur .h2-conteneur::before,
	#accueil-vousetes-conteneur .h2-conteneur::after {display:none;}
	
}

@media all and (max-width:480px) {
		
	#global {padding-top:95px;}
	.lg {  height: 95px;}
	.sm { height: 35px; }
	
	#bandeau.sm #bandeau-email a {padding:0; height: 100%; }
		
	#bandeau #logo {top: -25px;}
	#bandeau #logo a img  {height: 50px;}
	#bandeau-haut {  height: 30px;} 
	#bandeau-contact {height: 30px;}
	#bandeau .bandeau-element {height:30px}
	#bandeau.sm #bandeau-client { height: 30px;}
	#bandeau #bandeau-telephone, #bandeau #bandeau-email {min-width:0;margin: 0 5px; width:auto;}	
	#bandeau #bandeau-telephone span, 
	#bandeau #bandeau-telephone a, 
	#bandeau #bandeau-telephone a:visited {font-size: 17px; background:none; padding-left:0; width:auto;}
	#bandeau #bandeau-email {margin:0 0 0 5px;}
	#bandeau #bandeau-email a {padding: 0; width: 86px; height: 100%; background-position: center center; }	
	#bandeau #bandeau-email span {display:none;}
	
	#bandeau #bandeau-client {height:auto;top:21px; width:86px;}
	#bandeau #bandeau-client .bandeau-titre span {font-size: 12px; padding:6px 0 5px 31px; width: calc(100% - 31px); height:auto; background-size: 18px auto;-webkit-background-size: 18px auto;-moz-background-size: 18px auto;-o-background-size: 18px auto;}
	#bandeau #mon-compte-smenu {top: 39px;}
		
	#actualites .conteneur .contenu .photo {display:block; margin:10px auto; text-align: center;}
	#actualites .conteneur .contenu .texte {width:100%;}
	#actualites .conteneur .contenu .extrait {min-height:0;}
	
	#contenu #paginator .pagination-fleche {display:none;}

	
	#cart-grid-header .cart-titre {font-size:13px;}
	#cart-grid .cart-quantite {width:55px;}
	#cart-grid-header .cart-titre.cart-action {width:25px; height:100%;}
	#cart-grid-header .cart-titre.cart-action span {display:none;}
	
	#cart-grid .cart-nom {width: calc(100% - 210px);}
	#cart-grid .cart-action {width:25px;}
	
	#panier select {width:250px; margin:5px auto; display: block;}
}
/* Smartphone */
@media all and (max-width:435px) {	
	
	#contenu img { margin-left: auto !important; margin-right: auto !important;}
	
	#produit .photos-conteneur { width: 100%;}
	#produit-photo-conteneur {  width: 100%;}
	

}

@media all and (max-width:385px) {
	
	#bandeau #logo a img  {height: 42px;}
	#cart-grid .cart-nom {width: calc(100% - 150px);}
	#cart-grid .cart-prixtotal {width:70px;}

	#renseignement-telephone a, #renseignement-telephone a:visited {font-size: 24px;}

}