/* style.css
   Regroupe les styles definissent l'apparence du site.
   On y retrouve par exemple les proprietes suivantes :
   	- background
   	- border
   	- color
   	- font, font-size
   	- line-height
   	- text-align
   	- text-decoration
*/

/*** FONT ETOILE ***/
@font-face {
	font-family: 'icomoon';
	src:url('/_boutiques/CLAIRENATURE//fonts/icomoon.eot');
	src:url('/_boutiques/CLAIRENATURE//fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('/_boutiques/CLAIRENATURE//fonts/icomoon.woff') format('woff'),
		url('/_boutiques/CLAIRENATURE//fonts/icomoon.ttf') format('truetype'),
		url('/_boutiques/CLAIRENATURE//fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

body { font: 13px/17px Helvetica Neue,Helvetica,Arial,sans-serif;}
a,
.liste_rayons li a:hover,
.fp_vignettes a:hover { text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 0.75em 0;}

.alerte_ok { color:#006729; }
.alerte_error { color:#cd3a18; }

input, select, textarea {  font: 12px/16px Helvetica Neue,Helvetica,Arial,sans-serif;  }

/*** elements récurents ***/
#zd_rassurance  { 
	font-size: 12px; line-height: 13px; text-align: center;  
}
.rs_index #zd_rassurance  { text-align: left; }

#elem_breadcrumb { 
	font-size: 11px; line-height: 21px; 
}
.bc_separateur { 
	text-indent: -5000px; background: transparent url(/_boutiques/CLAIRENATURE//site_image/sep_breadcrumb.png) 5px 50% no-repeat; 
}

.bp_msg_promo { text-transform: uppercase; }

#elem_newsletter > div  { line-height: 14px; display: inline-block;}

/*** header ***/
#logo a { font-size: 2em; line-height: 2.1em; font-weight: bold; }
.header_info { font-size: 11px; line-height: 2.5em; text-align: right; }

#elem_ssmenu li,
#elem_rechercher  input[type=text]{ line-height: 25px; }

#elem_compte { background: #75c00e url(/_boutiques/CLAIRENATURE//site_image/mon_compte.png) 5px 50% no-repeat!important; padding-left: 45px; }
#elem_panier { background: #d8007a url(/_boutiques/CLAIRENATURE//site_image/panier.png) 5px 50% no-repeat!important; padding-left: 45px; }

/*** footer ***/
#footer {
	font-size: 12px; line-height: 18px;
}

.footer_liens li + li { border-left: 1px solid #FFF; }
.credits { font-size: 11px;}

#back-top { 
	background: #E1E1E1 url(/_boutiques/CLAIRENATURE//site_image/arrow_top.png) 50% 50% no-repeat;
	width: 40px; height: 40px; text-indent: -5000px; display: block; 
}

/*** boutons ***/
.form_bouton.alerte_mail { padding-left: 54px; }

.bouton {font-size: 1em;}

.btn_principal, .btn_secondaire,
.prevBtn, .nextBtn {
	border: none; display: block; margin: 0.5em auto; max-width: 45%; padding: 0.25em 0.75em; text-align: center;
}
.fenetre_contextuelle .btn_principal, 
.fenetre_contextuelle .btn_secondaire { width: 100%; max-width:inherit; }

.btn_principal,
.nextBtn {
}
	.btn_principal:hover,
	.nextBtn:hover { text-decoration: none; }

.btn_secondaire,
.prevBtn { background: #BCBCBC; color: #FFF; }
	.btn_secondaire:hover,
	.prevBtn:hover {
		color: #686868; text-decoration: none;
	}
	
.form_bouton,
.form_bouton2, 
a.form_bouton, 
.bloc_produit a.form_bouton { 
	display: inline-block; border: none; font-size: 12px;
    height: 26px; line-height: 26px; padding: 0 13px; text-transform: uppercase; cursor: pointer; box-sizing:border-box; -moz-box-sizing:border-box; text-wrap:normal; overflow-wrap:break-word;
} 
.fp_btn_achat a.form_bouton { 
	display: inline-block; font-size: 88%; text-align: center; line-height: 40px; height: 40px;
}
.form_bouton:hover,
.form_bouton2:hover { text-decoration: none; }
.rs_commande #form_deja_client .bouton { margin: 2em auto 1em 0; font-size: 1em; line-height: 1em;  }
.rs_commande .bouton.form_bouton { height: 29px; line-height: 29px; margin:0 auto 1em 0; }

a.form_bouton.alerte_mail { padding-left: 44px; line-height: 28px; }
.form_bouton.alerte_mail.small { font-size: 0.75em; line-height: 1.3em; height: auto; min-height: 33px; padding-top: 3px; }

/* carrousel */
.home_carrousel .slick-prev, 
.home_carrousel .slick-next { 
	text-indent: -5000px; border: none; 
}
.home_carrousel .slick-prev { background: transparent url(/_boutiques/CLAIRENATURE//site_image/fleche_gauche.png) 0 0 no-repeat; }
.home_carrousel .slick-next { background: transparent url(/_boutiques/CLAIRENATURE//site_image/fleche_droite.png) 0 0 no-repeat; }

/* partage social */
.partage_social { margin-bottom: 1em;}
.envoi_ami {
	display: inline-block; font-size: 11px; padding: 0 0.5em 0 24px; background: #eee url(/_boutiques/CLAIRENATURE/theme/picto_envoi_ami.png) 4px 50% no-repeat;
	border: 1px solid #ccc;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.envoi_ami:hover { border-color: #bbb;}

	.envoi_ami a { display: block; }
	.envoi_ami a:hover { text-decoration: none;}

/*** pagination ***/
.syspage {
	padding: 0.75em 0; 
}

.syspage_start,
.syspage_num,
.syspage strong { 
	font-size: 16px; padding: 0 0.5em; 
}

/*** liste rayon et cms ***/
.liste_rayons li a { text-align: center; }
#liste_rayons .niv2 h3 a,
#cms_menu li.niv2 > a  { text-transform: uppercase; } 
#sidebar01 #liste_rayons .niv2 h3 a { text-transform: none; } 
	#liste_rayons ul.niv3 li a,
	#cms_menu ul.niv3 li a { 
		background: transparent url(/_boutiques/CLAIRENATURE//site_image/puce_rayon.gif) 0 5px no-repeat; 
		}
	#liste_rayons ul.niv3 li  a.active,
	#cms_menu ul.niv3 li  a.active{ 
		background: transparent url(/_boutiques/CLAIRENATURE//site_image/puce_rayon2.gif) 0 5px no-repeat; 
		}

/*** navigation produits ***/
#navigation {
}

#elem_menu a { 
	font-size: 12px; line-height: 3em; 
}
	#elem_menu  a.niv1 { font-weight: bold; }
	#elem_menu a.niv2 { text-transform: uppercase; }
		#elem_menu a.niv3 { text-transform: none; }

#elem_menu ul a { text-transform: none; }


/*** liste de produits ***/
.bloc_produit { text-align: center; }
.bloc_produit a:hover { text-decoration: none; }
.bp_nom { 
	font-size: 14px; line-height: 16px;
}
.bp_fournisseur{
	font-size: 12px; text-transform: uppercase; line-height: 16px; height: 32px;  color: #7b7b7b;
}
.bp_description { 
	font-size: 12px; line-height: 15px;
}
.bp_prix { font-weight: bold; }
.bp_prix em, 
.bp_prix del { font-size: 11px; }

/* produits associes */
.produits_associes .bloc_produit,
.historique_produits .bloc_produit { }

/*** formulaires ***/
.form_avis {
	border-left: 1px solid #B2B1B2;
}
.rs_ami .form_avis { border: none;}

.form_inline fieldset p {
	border-bottom: 1px solid #E1E1E1; line-height: 2em; margin: 0; padding: 0.5em 0;
}

.form_inline label { text-align: right; }
.adresseDifferente { 
	display: block; background: transparent url(/_boutiques/CLAIRENATURE//site_image/picto_livraisonD.png) 0 0 no-repeat; padding-left: 30px;
}

/* mon compte, parrainage identification */
.message_info,
#form_mon_compte fieldset,
#form_parrainage_identification fieldset,
#form_parrainage fieldset,
#form_parrainage_contacts fieldset,
#form_mdp_perdu fieldset {
	background: #E1E1E1; border: 3px solid #fff;
}

.rs_mescommandes #form_parrainage fieldset { 
	background: none; border: none;
}

#form_mon_compte p,
#form_parrainage_identification p,
#form_parrainage p,
#form_mdp_perdu p { border-color: #fff; }

.rs_mescommandes #content form {
	border: 0;
}
.rs_mescommandes #sidebar01 li { line-height:2.3em; text-align:center; background-color: #FFF; border: 1px solid #0092a3; margin-bottom: 0.5em;  }
	

.rs_mescommandes #sidebar01 li.actif { border: 1px solid #d8007a; }
.rs_mescommandes #sidebar01 .actif a { color: #fff; }
	.rs_mescommandes #content .tableau_generique form { border: none;}

/* coordonnees */
#form_deja_client, #form_verif_mail { background: #F9F7F6; border: 1px solid #d8007a; }

#form_deja_client form { font-size: 0.75em; }


/* personnalisation et diagnostic */
.form_personnalisation fieldset p,
.form_diagnostic_connexion fieldset p { border: none;}

/*** tableaux ***/
/* tableau generique */
.tableau_generique, 
.bloc_code_promo .inner {
	background: #F9F7F6; border: 12px solid #F9F7F6; margin-bottom: 1em; width: 100%;
}

table.tableau_generique { border-collapse: separate; }
table#detail_commande { border-collapse: collapse; }

	.tableau_generique th {
		background: #EDE8E5; padding: 0.5em 0;
	}
	
	.tableau_generique td {
		background: #fff; border: 1px solid #F9F7F6; border-width: 6px 0; margin: 2px 0; padding: 1%;
	}
		.tableau_generique td td { border: none;}
	
	.tableau_generique del { font-size: 0.75em;}
	
	.tableau_generique .no_background { background: none;}

.tableau_generique + .tableau_generique { margin-bottom: 0;}

.tableau_generique p { margin: 0;}
.tableau_generique .nopadding { padding: 0;} /* pour supprimer les paddings dans des cellules de tableau */

/* tableau specifique panier */
#panier_listing_produits .code_promo_etape01 td { background: #EAF3CD;}

#panier_listing_produits .panier_ss_total { padding: 1em 0; }
	
.panier_supprimer_produit img { background: #b2b1b2 url(/_boutiques/CLAIRENATURE/theme/delete_cache.png);}

.panier_option td { padding: 0.5em 0; }

.panier_livraison fieldset {
	background: #fff; border: 1px solid #b2b1b2;
}

.panier_total_ttc, 
.recap_total_ttc { background: #fff; padding: 1em 0;
}

.panier_total_ttc strong { text-align: center;}

/* tableau specifique choix-paiement et paiement dans le compte */
.tableau_paiement {
	font-size: 0.85em; line-height: 1.4em; text-align: right;
}

.tableau_paiement td { padding: 1em; }

.tableau_paiement em { font-size: 0.9em; }

.tableau_paiement blockquote {
	background: #F9F7F6; margin: 1em 5%; padding: 0.5em 1em;
}

.bloc_paiement {
    background-color: #FFFFFF;
    border: 12px solid #F9F7F6;
    clear: both;
    padding: 10px;
	width: 100%;
	display: table; 
	box-sizing: border-box; -moz-box-sizing: border-box; 
}

.bloc_paiement blockquote {
    background-color: #F9F7F6;
    font-size: 90%;
    line-height: 1em;
    margin: 5px auto;
    padding: 5px;
    text-align: center;
    width: 70%;
}
.bloc_paiement em {
    font-size: 80%;
}

.info_paiement {
    display: table-cell;
    text-align: left;
    width: 40%;
}

#conf_paiement_cheque, 
#conf_paiement_virement, 
#conf_paiement_cb, 
.conf_paiement_autre {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 30%;
}
/* tableau liste des commandes dans le compte */
#listing_mes_commandes td { padding: 0.25em 0;}
.commande_active, 
.commande_active a { color: #fff; }

/* tableau detail de la commande dans le compte */
#detail_commande {
	border-bottom: none; margin-bottom: 0; width: 100%;
}
	#detail_commande td { vertical-align: top;}
	#detail_commande td + td { border-left: 2px solid #F9F7F6; }
	#detail_commande tr tr + tr { border-top: 2px solid #f9f7f6;}

/*** Index ***/
.rs_index h1 { 
	font-size: 14px; line-height: 22px;
}
.home_blog h2 { font-size: 17px; }

#home_selection > h3 {
	cursor: pointer;
	line-height: 33px; 
}

/*** CMS ***/
#cms_menu a, 
.cms_nom_section {
	display: block; 
}

#cms_menu a:hover { text-decoration: none;}


/*** fiche-produit ***/
.fp_bloc_achat label, 
.fp_bloc_achat .faux_label {  
	font-size: 110%; line-height: 120%;
}

.fp_selecteur_produits label { text-align: right; }

.fp_qte label { line-height: 40px; }

.fp_qte input {
    padding: 2px; text-align: right; line-height: 20px;
}

.fp_prix {
	font-size: 26px; line-height: 40px; font-weight: bold;
 }

.bloc_prix_fp em,
.bloc_prix_fp del,
.fp_prix em,
.fp_prix del { font-size: 16px;}

.fp_bloc_achat .zone_dyn {
	font-size: 12px; line-height: 16px;
}
.fp_bloc_achat .zone_dyn em { font-size: 16px; }

/* description avec onglets */
#fp_description {  }
	#fp_description #onglets-box_fp { }
	#onglets-box_fp .onglet { 
		font-size: 14px; line-height: 33px; text-align: center; text-transform: uppercase; text-decoration: none;
}
	
	#fp_description .onglet-contenu { 
		line-height: 20px; 
	}
		#fp_description .onglet-contenu p {
			font-size: 13px; line-height: 20px; 
		}

/* ajout au panier */
.recap_ajout_panier {
	margin: 1em 0;
}
	.recap_ajout_panier td { padding: 0.5em 1%; }

.actions_ajout_panier { text-align: right; }
	.actions_ajout_panier .btn_principal,
	.actions_ajout_panier .btn_secondaire {
		display: inline-block; margin-left: 1em;
	}

/* ajout panier ssproduit */
.recap_ajout_panier label { font-size: 10px; }

.recap_ajout_panier #fp_disponibilite { font-size: 11px; }

.form_personnalisation .surcouche_personnalisation p {
	border: 1px solid #B2B1B2; border-width: 1px 0;
}

.surcouche_personnalisation .personnalisation_libelle { text-align: right; }

/* form-nondispo */
.rs_form-nondispo .bloc_produit {
	border: 1px solid #B2B1B2; border-width: 1px 0; padding: 0.5em 0;
}

/* disponibilite */
#fp_disponibilite {
	font-size: 11px; text-align: center; width: 189px; /* idem largeur bouton ajout panier */
}

/* produits associes */
.rs_ficheproduit #sidebar01 { text-align: center;}

.rs_ficheproduit #sidebar01 .faux_titre_niv2 {
	margin: 0.25em; text-align: left;
}

/*** avis ***/
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
 .votre_note {
	float: left;
	line-height: 20px;
}

.votre_note  span { float: left; margin-right: 5px; }

.votre_note:not(:checked) > input {
    position: absolute;
    top: -9999px;
}

.votre_note:not(:checked) > label {
	color:#ddd;
	cursor:pointer;
    float:right;
    font-size: 16px;
    padding: 0 2px;    
	overflow:hidden;
	width: 16px;
    white-space:nowrap;
}

.votre_note:not(:checked) > label:before {
	font-family: 'icomoon';
    content: '\e001';
}

/* couleur des etoiles selectionnees au hover */
.votre_note > input:checked + label:hover,
.votre_note > input:checked + label:hover ~ label,
.votre_note > input:checked ~ label:hover,
.votre_note > input:checked ~ label:hover ~ label,
.votre_note > label:hover ~ input:checked ~ label {
    color: #4cb172;
}
.avis strong { display: block; padding: 0.5em 1em; margin: 5px 0 0 30px; font-weight: normal; font-style: italic;  }

.liste_avis li {
	padding: 1em 0;
}
	.liste_avis .meta_avis { text-align: center;}

/* correctif avis sur ficheproduit */
.rs_ficheproduit .liste_avis li {
	border: none; padding: 0; margin-top: 1em; 
}
	.rs_ficheproduit .liste_avis .meta_avis { text-align: left;}
	.rs_ficheproduit .avis {
		margin-bottom: 0.2em; padding: 0;
	}

/*** news ***/
.news_date {
	margin-top: 0.25em; text-align: right;
}

/*** FAQ ***/
.rs_faq h2 { }

/*** Presse ***/
.presse_listing {  }

.presse_listing > li {
	padding: 1em 0;
}

.presse_logo_article, 
.presse_images { text-align: center; }

.presse_extrait { }

/*** tunnel de commande ***/
/* on definit les styles de base (etapes a venir) des etapes */
.etapes_tunnel {
	background: url(/_boutiques/CLAIRENATURE/theme/cartouches_etapes_tunnel.png) 0 0 no-repeat; text-align: center;
}
	.etapes_tunnel li {
		line-height: 35px; height: 35px; /* hauteur cartouche - paddingbottom */
		padding-bottom: 5px; /* meme valeur que le span:before.top */

	}
	.etapes_tunnel span:before {
		content:url(/_boutiques/CLAIRENATURE/theme/tunnel_upcoming.png); position: relative; top: 5px; /* a modifier si changement de la hauteur des icones */
	}

/* on definit les styles de l'etape en cours */
	.rs_panier .etape_panier span:before, 
	.rs_commande .etape_commande span:before, 
	.rs_recap-commande .etape_recapitulatif span:before, 
	.rs_choix-paiement .etape_paiement span:before  { content:url(/_boutiques/CLAIRENATURE/theme/tunnel_current.png); }

/* on definit les styles des etapes validees */
	.rs_commande .etape_panier span:before,
	.rs_recap-commande .etape_panier span:before, .rs_recap-commande .etape_commande span:before,
	.rs_choix-paiement .etape_panier span:before, .rs_choix-paiement .etape_commande span:before, .rs_choix-paiement .etape_recapitulatif span:before,
	.rs_fin-commande .etape_panier span:before, .rs_fin-commande .etape_commande span:before, .rs_fin-commande .etape_recapitulatif span:before, .rs_fin-commande .etape_paiement span:before {
		content:url(/_boutiques/CLAIRENATURE/theme/tunnel_tick.png);
	}
	
/* on definit la position du cartouche pour chaque etape (sauf le panier, defini par defaut) */

.elem_tunnel { font-size: 80%; font-weight: bold; text-transform: uppercase; }

/* colonne de rassurance */
.TUNNEL_RASSURANCE { margin-top: 37px!important; /* modifier la hauteur en fonction de la taille du titre h1 et de la marge */ }

/*** commande ***/
.mot_de_passe_oubli { text-align: right; }

.coordonnees_tableau { border: 4px solid #b2b1b2; }
/*** recap-commande ***/
.bloc_code_promo .inner {
	background: #fff; width: auto;
}

/*** mon compte ***/
.points_fidelite_box {
	border: 4px solid #F9F7F6; padding: 1em 0; text-align: center;
}

.suivi_colis { background: #9EC32D;}

#detail_commande h2 { margin: 0;}
table + h2 { margin-top: 1em;}

#detail_commande h3 {
	font-size: 11px; line-height: 16px; text-align: left;
}

/* etats de commande */
#detail_commande .etat_commande_1,
#detail_commande .etat_commande_2,
#detail_commande .etat_commande_3,
#detail_commande .etat_commande_4 { padding-top : 90px; /* hauteur pictogramme + eventuelle marge */ }

/* etat 1 : en attente de paiement */
#detail_commande .etat_commande_1 { background: #fff url(/_boutiques/CLAIRENATURE/theme/etat_commande_1.png) 50% 0 no-repeat; }

/* etat 2 : commande en cours de traitement, payee etc... */
#detail_commande .etat_commande_2 { background: #fff url(/_boutiques/CLAIRENATURE/theme/etat_commande_2.png) 50% 0 no-repeat; }

/* etat 3 : commande envoyee */
#detail_commande .etat_commande_3 { background: #fff url(/_boutiques/CLAIRENATURE/theme/etat_commande_3.png) 50% 0 no-repeat; }

/* etat 4 : incident (remboursement, retour...) */
#detail_commande .etat_commande_4 { background: #fff url(/_boutiques/CLAIRENATURE/theme/etat_commande_4.png) 50% 0 no-repeat; }

/*** sitemap ***/
.niveau1 { margin-top: 1em;}
.niveau2 { margin-left: 2em;}
.niveau3 { margin-left: 4em;}


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

	MAJ du 11/04/2017 by TG

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

.hide{
	display: none!important;
}

li.carte_cadeau{
	margin-top: 15px;
}

li.carte_cadeau img{
	width: 35px;
	float: left;
}

li.carte_cadeau h2{
	margin-bottom: 15px;
}

li.carte_cadeau label{
	margin-top: 10px;
	margin-left: 10px;
	float: left;
}

@media all and (max-width: 480px){
	li.carte_cadeau label{
		margin-top: 3px;
		margin-left: 10px;
		display: block;
		width: 65%;
		font-size: 14px;
		line-height: 16px;
	}

	li.carte_cadeau input#cadeau{
	
		margin-top: 10px;

	}


}

li.carte_cadeau input#cadeau{
	float: left;
	margin-left: 1em;
	margin-top: 13px;
	margin-right: 0.5em;
}

.txtPerso{
	font-weight: 400;
}

.txtPerso::before{
	content: "Votre message : ";
	margin-left:8px;
}

/** Fomg : ajout du bundle inverse 27/03/2018 **/
.bundle_info {
	text-align: left; 
}

#listeVignettes li.bundle_suivant {
	border-top :1px solid #efefef;
}
#listeVignettes li .bp_prix del {
	color: #434343;
}
#listeVignettes .bp_nom {
	font-weight: normal; color: #434343; height: inherit; 
}
.rs_ficheproduit #listeVignettes .bp_prix {
		text-align: left; color: #0092a3; font-size: 26px;
	}
.bp_prix .line_reduc {
	font-size: 12px; line-height: 13px; color: #434343; font-weight: normal;
}

.boutActionBundle {
	background:#D8007A url(/_boutiques/CLAIRENATURE//site_image/panier.png) 2px 50% no-repeat; padding: 0 5px 0 31px; display: block; width: 45px; height: 40px;  color:#FFF; font-size: 20px; font-weight: bold; -moz-box-sizing:border-box;box-sizing:border-box;
}
li#voir_plus_bundle a{
	text-decoration: underline; color: #434343;
}
#listeVignettes a:hover, #listeVignettes a:hover .bp_nom, li#voir_plus_bundle a:hover{
	color: #75c00e
}

/** INTERVENTIONS DU 01/06/2018 Théo TG01062018 **/

/* Remise quantitative */

.fp_rq{
	color: #ff4828;
	font-size: 12px;
	padding: 10px 3px 20px;
}

.fp_rq::before{
	content:"%";
	display: inline-block;
	width: 30px;
	height: 20px;
	line-height: 20px;
	border-radius: 10px;
	background: #ff4828;
	color: #fff;
	text-align: center;
	margin-right: 5px;
}