/*******FONT***********/
.comfortaa{font-family: 'Comfortaa', cursive;}
.comfortaa.font900{text-shadow: 0.2px 0.2px, 0.2px 0.2px, 0.2px 0.2px;}

/***********ICONS****************/
.icon.mail:before { content: "\f100"; }
.icon.notification:after { content: "\f101"; }
.icon.message:after { content: "\f102"; }
.icon.poubelle:after { content: "\f103"; }
.icon.menu:after { content: "\f104"; }
.icon.secure:after { content: "\f105"; }
.icon.user:after,.icon.client:after { content: "\f106"; }
.icon.edit:after { content: "\f107"; }
.icon.tel:after { content: "\f108"; }
.icon.mobile:after { content: "\f109"; }
.icon.map:after { content: "\f10a"; }
.icon.arobase:after { content: "\f10b"; }
.icon.time:after { content: "\f10c"; }
.icon.calendar:after { content: "\f10d"; }
.icon.compta:after { content: "\f10e"; }
.icon.pdf:after { content: "\f10f"; }
.icon.search:after { content: "\f110"; }
.icon.contact:after { content: "\f111"; }
.icon.danger:after { content: "\f112"; }
.icon.alert:after { content: "\f113"; }
.icon.close:after { content: "\f114"; }
.icon.valide:after { content: "\f115"; }
.icon.coche:after { content: "\f116"; }
.icon.coche.active:after { content: "\f117"; }
.icon.radio.active:after { content: "\f118"; }
.icon.radio:after { content: "\f119"; }
.icon.info:after { content: "\f11a"; }
.icon.power:after { content: "\f11b"; }
.icon.move:after { content: "\f11c"; }
.icon.down:after { content: "\f11d"; }
.icon.up:after { content: "\f11d";-ms-transform: rotate(180deg); /* IE 9 */-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg); }
.icon.graph:after { content: "\f11e"; }
.icon.stat:after { content: "\f11f"; }
.icon.send:after { content: "\f120"; }
.icon.next:after { content: "\f121"; }
.icon.prev:after { content: "\f122"; }
.icon.error:after { content: "\f123"; }
.icon.folder:after { content: "\f124"; }
.icon.photo:after { content: "\f125"; }
.icon.link:after { content: "\f126"; }
.icon.more:after { content: "\f127"; }
.icon.troispoint:after { content: "\f128"; }
.icon.save:after { content: "\f129"; }
.icon.add:after { content: "\f12a"; }
.icon.boncadeau:after { content: "\f12b"; }
.icon.money:after,.icon.espece:after { content: "\f12c"; }
.icon.cheque:after { content: "\f12d"; }
.icon.carte:after,.icon.cb:after { content: "\f12e"; }
.icon.virement:after { content: "\f12f"; }
.icon.caisse:after { content: "\f130"; }
.icon.birthday:after { content: "\f131"; }
.icon.male:after { content: "\f132"; }
.icon.female:after { content: "\f133"; }
.icon.man:after { content: "\f134"; }
.icon.woman:after { content: "\f135"; }
.icon.men:after { content: "\f136"; }
.icon.women:after { content: "\f137"; }
.icon.inconnu:after { content: "\f138"; }
.icon.sms:after { content: "\f139"; }
.icon.eye:after { content: "\f13a"; }
.icon.eye.ferme:after { content: "\f13b"; }
.icon.cible:after { content: "\f13c"; }
.icon.deplace:after { content: "\f13d"; }
.icon.group:after { content: "\f13e"; }
.icon.smile:after { content: "\f13f"; }
.icon.download:after { content: "\f140"; }
.icon.play:after { content: "\f141"; }
.icon.pause:after { content: "\f142"; }
.icon.micro:after { content: "\f143"; }
.icon.stop:after { content: "\f144"; }
.icon.paypal:after { content: "\f145"; }
.icon.add2:after { content: "\f146"; }
.icon.moon:after { content: "\f147"; }
.icon.sun:after { content: "\f148"; }
.icon.repeater:after { content: "\f149"; }
.icon.unique:after { content: "\f14a"; }
.icon.sans:after { content: "\f14b"; }
.icon.etoile:after { content: "\f14c"; }
.icon.etoile.active:after { content: "\f14d"; }
.icon.europe:after { content: "\f14e"; }
.icon.fibre:after { content: "\f14f"; }
.icon.pauvre_glucide:after { content: "\f150"; }
.icon.proteine:after { content: "\f151"; }
.icon.sans_colorant:after { content: "\f152"; }
.icon.sans_conservateur:after { content: "\f153"; }
.icon.sans_dioxyde:after { content: "\f154"; }
.icon.sans_gluten:after { content: "\f155"; }
.icon.sans_nano:after { content: "\f156"; }
.icon.sans_ogm:after { content: "\f157"; }
.icon.sucre:after { content: "\f158"; }
.icon.vegan:after { content: "\f159"; }
.icon.vegetal:after { content: "\f15a"; }
.icon.fournisseur:after { content: "\f15b"; }
.icon.produit:after { content: "\f15c"; }
.icon.medecin:after { content: "\f15d"; }
.icon.commande:after { content: "\f15e"; }
.icon.livraison:after { content: "\f15f"; }
.icon.preparation:after { content: "\f160"; }
.icon.oxyform:after { content: "\f161"; }
.icon.stock:after { content: "\f162"; }
.icon.france:after { content: "\f163"; }
.icon.lipide:after { content: "\f164"; }
.icon.matiere_grasse:after { content: "\f165"; }
.icon.sans_sucre:after { content: "\f166"; }

.icon.coeur-et-tension:after,.icon.cardio-vasculaire:after { content: "\f167"; }
.icon.digestion:after,.icon.digestion-et-microbiote:after { content: "\f168"; }
.icon.fatigue-et-vitalite:after { content: "\f169"; }
.icon.fatigue-et-vitalite-immunite:after { content: "\f16a"; }
.icon.immunite:after { content: "\f16b"; }
.icon.jambes-lourdes:after { content: "\f16c"; }
.icon.microbiote:after { content: "\f16d"; }
.icon.minceur:after { content: "\f16e"; }
.icon.complements-mineraux:after,.icon.vitamines-et-mineraux:after { content: "\f16f"; }
.icon.sante-musculaire:after { content: "\f170"; }
.icon.sante-osseuse:after,.icon.articulations-et-capital-osseux:after { content: "\f171"; }
.icon.fatigue-et-stress:after { content: "\f172"; }

.icon.instagram:after { content: "\f173"; }
.icon.youtube:after { content: "\f174"; }
.icon.twitter:after { content: "\f175"; }
.icon.facebook:after { content: "\f176"; }
.icon.panier.add:after { content: "\f177"; }
.icon.panier:after { content: "\f178"; }
.icon.panier.valide:after { content: "\f179"; }
.icon.panier.delete:after { content: "\f17a"; }
.icon.user.add:after { content: "\f17b"; }
.icon.boutique:after { content: "\f17c"; }
.icon.cactus:after { content: "\f17d"; }
.icon.feuille:after { content: "\f17e"; }
.icon.cadeau:after { content: "\f17f"; }

.icon.grille:after { content: "\f180"; }
.icon.list:after { content: "\f181"; }
.icon.nopicture:after { content: "\f182"; }
.icon.burger:after { content: "\f183"; }
.icon.sedentaire:after { content: "\f184"; }
.icon.filtre:after { content: "\f185"; }
.icon.more:after { content: "\f186"; }
.icon.less:after { content: "\f187"; }
.icon.pack:after { content: "\f188"; }

.icon.cholesterol-et-glycemie:after { content: "\f189"; }
.icon.circulation:after { content: "\f18a"; }
.icon.detox:after { content: "\f18b"; }
.icon.fonction-thyroidienne:after { content: "\f18c"; }
.icon.tonus-et-vitalite:after { content: "\f18d"; }
.icon.prescription:after { content: "\f18e"; }
.icon.pathologie:after { content: "\f18f"; }
.icon.posologie:after { content: "\f190"; }



/*******BORDER***********/
.bbn{border-bottom:1px solid #4f4f4f}
.brd{border-right:1px solid #D4B687}
.blbl{border-left:1px solid #66829A}
.bbbl{border-bottom:1px solid #66829A}
/*.bbbl3{border-bottom:3px solid #66829A}*/
.bbbl3 {
    position: relative;
}
.bbbl3:after {
    background-color:  #66829A;
    content: "";
    bottom: 2px;
    width: 100%;
    position: absolute;
    height: 3px;
    left: 0;
}
.btbl{border-top:1px solid #66829A}
.ba2bl{box-shadow: 0 0 0px 3px #66829A;}
.ba2bleu{border:2px solid #66829A}
.ba2v{border:2px solid #A4D905}
.bav{border:1px solid #A4D905}
.bl10v{border-left:8px solid #A4D905}
.bao{border:1px solid #FE6867}
.bab{border:1px solid #fff}
.babl{border:1px solid #66829A}
.btd{border-top:1px solid #D4B687}
.ban{border:1px solid rgba(255, 255, 255, 0.2) }
.bbn{border-bottom:1px solid rgba(255, 255, 255, 0.2) }
.ba3g{box-shadow: 0 0 0px 5px #EDEDED;}

.dent {
    position: relative;
}
.dent.haut::before {
    content: '';
    position: absolute;
    right: 0;
    left: -0%;
    bottom: 100%;
    z-index: 10;
    display: block;
    height: 35px;
    background-size: 35px 100%;
    background-image: linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%);
    background-position: 0 0;
}
.dent::after {
    content: '';
    position: absolute;
    right: 0;
    left: -0%;
    top: 100%;
    z-index: 10;
    display: block;
    height: 35px;
    background-size: 35px 100%;
    background-image: linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%);
    background-position: 0 0;
}
.dent.fg::after {
    background-image: linear-gradient(135deg, #EDEDED 25%, transparent 25%), linear-gradient(225deg, #EDEDED 25%, transparent 25%);
}

.gradientL {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 10;
}

.gradientR {
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 10;
}



/*******BACKGROUND***********/
.ligneTab:nth-child(even),.ligneTab2:nth-child(even) {background-color: #EDEDED;}
.ligneTab:nth-child(odd),.ligneTab2:nth-child(odd) {background-color: #fff;}
.fg,.fgris{background-color:#EDEDED}
.fccc{background-color:#ccc}
.fblack{background-color:#000}
.fn{background-color:#2D323D}
.fn2{background-color:#394254}
.fn3{background-color:#576b7d}
.f9{background-color:#999}
.fb6{background-color:#f6f6f6}
.f0{background-color:#fff}
.fb{background-color:#fff}
.fbl{background-color:#66829A}
.fbl2{background-color:#6694A3}
.fv{background-color:#91BF1F}
.fvc{background-color: #BDD979;}
.fvic{background-color: #b39be6;}
.fo{background-color:#FE6867}
.fo2{background-color:#F99755}
.foc{background-color:#FBC19B}
.fr{background-color:#FD3F26}
.fp{background-color:#FF9999}
.fvi{background-color: mediumpurple;}


.fblc08{background-color: rgba(102,148,163,0.8)}
.fvc08{background-color: rgba(189,217,121,0.8)}
.foc08{background-color: rgba(251,193,155,0.8)}
.fvic08{background-color: rgba(158,141,158,0.8)}


.fn08{background-color: rgba(44,53,71,0.85)}
.fbl08{background-color: rgba(62,80,100,0.85)}
.fbl208{background-color: rgba(102,130,154,0.85)}
.fbl308{background-color: rgba(134,155,174,0.85)}
.bloccouleur:nth-child(1){background-color: rgba(44,53,71,0.85)}
.bloccouleur:nth-child(2){background-color: rgba(62,80,100,0.85)}
.bloccouleur:nth-child(3){background-color: rgba(102,130,154,0.85)}
.bloccouleur:nth-child(4){background-color: rgba(134,155,174,0.85)}
.fn03{background-color:rgba(0,0,0,0.3)}
.fn05{background-color:rgba(0,0,0,0.5)}
.fn07{background-color:rgba(0,0,0,0.7)}
.fb04{background-color:rgba(255,255,255,0.4)}
.fb07{background-color:rgba(255,255,255,0.7)}
.fn02{background-color:rgba(0,0,0,0.2)}
.fn01{background-color:rgba(0,0,0,0.1)}
.fhoverchild{cursor: pointer !important}
.fhover:hover{background-color: #EDEDED;cursor: pointer !important;/*box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1)*/}
.fhover:hover{background-color: #EDEDED;cursor: pointer !important;/*box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1)*/}
.fhoverb:hover{background-color: #fff;cursor: pointer !important;/*box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1)*/}
.foc .fhover:hover{background-color: #F99755;cursor: pointer !important;/*box-shadow: 0 3px 3px 0 rgba(0,0,0,0.1)*/}
.fhoverchild:hover .child {
    background-color: #EDEDED;
}
/*.fhover.hover:hover {color: #FE6867;}*/
.fg.fhover:hover{background-color: #fff;cursor: pointer !important}
.fv.fhover:hover{background-color: #99cb04;cursor: pointer !important}
.hover.underline:hover{text-decoration: none}

.after_dg_dr{position:relative}
.after_dg_dr:after{content: "";height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 2;background: rgb(0,0,0);
                   background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
                   background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
                   background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
                   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);}
.after_dg_dr_bl:after{content: "";height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 2;background: rgb(255,255,255);
                      background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 79%, rgba(255,255,255,1) 100%);
                      background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 79%, rgba(255,255,255,1) 100%);
                      background: linear-gradient(90deg, rgba(255,255,255,0) 79%, rgba(255,255,255,1) 100%);
                      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);}

/*******COULEUR***********/
.blanc,.white{color:#ffffff;}
.gccc{color:#ccc;}
.geee{color:#EDEDED;}
.g999{color:#999;}
.vert{color:#84b900;}
.vert.clair{color:#A4D905;}
.bleu{color:#004C66;}
.noir,.gris{color:#465963;}
.black{color:#000;}
.orange{color:#FE6867;}
.violet{color: mediumpurple;}
.bleu.fonce,.bleufonce{color:#394254}
.pink{color:#FF9999}
.mce-text{color :rgb(87, 87, 89) !important}

.grayscale{cursor: default;filter: grayscale(1);}


.placeholder{color:#999}
.placeholder.active.orange{color:#fe6867}
.placeholder.active.blanc{color:#fff}
.placeholder.active.vert{color:#84b900}
.placeholder.active.vert.clair{color:#a4d905}


/*******TUNNEL***********/

.tunnel::before {clear: both;content: "";display: table;}
.tunnel {background-color: transparent;}
ol, ul {list-style: outside none none;}
.tunnel li.visited::after {width: 100%;}
.tunnel .anime:after,.tunnel .anime *:before{-webkit-transition: 1s linear 0s; -moz-transition: 1s linear 0s; -o-transition: 1s linear 0s; -ms-transition: 1s linear 0s; transition: 1s linear 0s;}
.tunnel li::before {background-color: #eee;bottom: 5px;color: #959fa5;content: "";height: 4px;left: 50%;position: absolute;width: 100%;}
.tunnel li::after {background-color: #91BF1F;bottom: 5px;color: #959fa5;content: "";height: 4px;left: 50%;position: absolute;width: 0;}
.tunnel li:last-child::before {width: 0;}
.tunnel li {float: left;position: relative;}
.tunnel li.current > *::before,.tunnel li.visited:first-child > *::before {background-color: #91BF1F;}
/*.tunnel li.visited:not(:first-child):hover > *::before {-webkit-transition: 0.3s linear 0s; -moz-transition: 0.3s linear 0s; -o-transition: 0.3s linear 0s; -ms-transition: 0.3s linear 0s; transition: 0.3s linear 0s;background-color: #91BF1F;border-radius: 50%;bottom: 0;content: "";height: 15px;line-height: 15px;left: calc(50% - 10px);font-size: 16px;position: absolute;width: 15px;z-index: 1;box-shadow: 0 0 0 5px rgba(253, 63, 38, 0.3);}*/
.tunnel li.visited:not(:first-child) > *::before{-webkit-transition: 0s linear 0s; -moz-transition: 0s linear 0s; -o-transition: 0s linear 0s; -ms-transition: 0s linear 0s; transition: 0s linear 0s;box-shadow: 0 0 0 5px #fff;background-color: #fff;bottom:0;color: #a4d905;content: "\f115";font-family: "Flaticon";font-size: 16px;left: calc(50% - 10px);line-height: 15px;height: 15px;width: 15px;}
.tunnel li > *::before {background-color: #eee;border-radius: 50%;bottom: 0;content: "";height: 15px;line-height: 15px;left: calc(50% - 10px);font-size: 16px;position: absolute;width: 15px;z-index: 1;}
.tunnel li > *, .tunnel li.current > * {height: 40px;line-height: 15px;display: inline-block;padding-bottom: 20px;position: relative;text-align: center;text-decoration: none;width: 100%;}
.tunnel li.current > *{color:#91BF1F}
.tunnel li:last-child.current > *{color:#a4d905;font-size: 16px;font-weight: 900}
.tunnel li.visited > *{color:#575759}
.tunnel li a:link, .tunnel li a:visited {text-decoration: none;transition: color 0.2s ease-in 0s;}
.tunnel a::before {box-shadow: 0 0 0 0 rgba(253, 63, 38, 0);transition: all 0.2s ease-in 0s;}
.tunnel a:hover::before {box-shadow: 0 0 0 5px rgba(253, 63, 38, 0.3);transition: all 0.2s ease-in 0s;}
.tunnel a:hover {color: #91BF1F;}

/*************SWITCH****************/
.switch {background-color: white;background-image: linear-gradient(to bottom, #e0e0e0, white 25px);border-radius: 18px;box-shadow: 0 -1px white inset, 0 1px 1px rgba(0, 0, 0, 0.05) inset;cursor: pointer;padding: 3px;}
.switch.disabled{cursor: default;filter: grayscale(1);}
.curseur{background-color: #eceeef;border-radius: inherit;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset, 0 0 3px rgba(0, 0, 0, 0.2) inset;height: inherit;font-family: "Flaticon";}
.switch.off .curseur::before{opacity:1}
.switch.off .curseur::after{opacity:0}

.curseur{background-color: rgba(0, 153, 204,0.6) !important;}


.switch.off .curseur {background-color: rgba(255,64,0,0.6) !important;}

.curseur::after,.curseur::before{line-height: 1;margin-top: -0.5em;position: absolute;top: 50%;-webkit-transition: 0.2s ease 0s; -moz-transition: 0.2s ease 0s; -o-transition: 0.2s ease 0s; -ms-transition: 0.2s ease 0s; transition: 0.2s ease 0s;text-align: center;width:60%}
.curseur::after {color: white;content: "\f115";text-shadow: 0 1px rgba(0,0,0, 0.5);left:0}
.curseur::before {color: white;content: "\f123";text-shadow: 0 1px rgba(0, 0, 0, 0.5);right:2px;opacity:0}
.point{background: white linear-gradient(to bottom, white 40%, #f0f0f0) repeat scroll 0 0;border-radius: 10px;box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);height: calc(100% - 2px);left: 60%;position: absolute;top: 4px;width: 35%;}
.switch.off .point{box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);left: 4px !important;right:100%}

.curseur.monnaie{font-family: "Roboto";font-size:17px}
.curseur.monnaie,.switch.off .curseur.monnaie{background-color: #66829A !important;}
.curseur.monnaie::after {content: "€";}
.curseur.monnaie::before {content: "%";}


/*******BOUTON*********/
.slid.icon:after {
    position: absolute;
    right: 10px;
    width: 25px;
    text-align: center;
    height: 30px;
    top: calc(50% - 15px);
    line-height: 30px;
}

.bouton.perso{position: relative;cursor:pointer;--color:var(--color)}
.bouton.fv,.bouton.bav{position: relative;cursor:pointer;--color:#91bf1f}
.bouton.fb{position: relative;cursor:pointer;--color:#fff}
.bouton.ba{position: relative;cursor:pointer;--color:#ddd}
.bouton.bab{position: relative;cursor:pointer;--color:#fff}
.bouton.fn2{position: relative;cursor:pointer;--color:#576b7d}
.bouton.fo2{position: relative;cursor:pointer;--color:#F99755}
.bouton.fo,.bouton.bao{position: relative;cursor:pointer;--color:#FE6867}
.bouton:hover, 
.bouton:focus {
    animation: pulsation 0.8s;

}
@keyframes pulsation {
    from {
        box-shadow: 0 0 0 0 var(--color);
    }
    to {
        box-shadow: 0 0 0 0.6em transparent;
    }
}

/*******TRIANGLE*********/
/*.triangle{position: relative}
.tri.bas.gauche:after{position:absolute;width: 0;height: 0;border-style: solid;border-width: 40px 0 0 40px;border-color: transparent transparent transparent #fff ;bottom:0;right:-40px;content:" ";}
.tri.haut.droite.fbl:after{position:absolute;width: 0;height: 0;border-style: solid;border-width:0 40px 40px 0;border-color: transparent #66829A transparent transparent ;top:0;left:-40px;content:" ";}*/


/**********ALT****************/
.affiche{position: relative}
.affiche > .op0.hid{-webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;}
.affiche:hover  > .op0.hid{
    opacity: 1 !important;
    display: inherit !important
}

.altg,.altd,.alth,.altb{position: relative}
.altg.absolute,.altd.absolute,.alth.absolute,.altb.absolute{position: absolute}
.altg::before,.altd::before,.alth::before,.altb::before,.altg::after,.altd::after,.alth::after,.altb::after{opacity:0;visibility: hidden;font-family: 'Roboto', sans-serif;font-size: 14px;font-weight: 400;letter-spacing: initial;text-transform: initial;}
.altg:hover::before,.altd:hover::before,.alth:hover::before,.altb:hover::before,.altg:hover::after,.altd:hover::after,.alth:hover::after,.altb:hover::after{
    opacity:1;
    visibility: visible;
    /*    -webkit-transition: 0.2s ease 1s; -moz-transition: 0.2s ease 1s; -o-transition: 0.2s ease 1s; -ms-transition: 0.2s ease 1s; transition: 0.2s ease 1s;*/
}
.altg::after,.altd::after,.alth::after,.altb::after{z-index:999;}
.altg::before,.altd::before,.alth::before,.altb::before{
    background-color:#FE6867;/*#6382A9*/
    color:#fff;
    content:attr(alt);
    font-size:12px;
    font-weight:700;
    height:30px;
    line-height:30px;
    position:absolute;
    text-align:left;
    white-space:nowrap;
    z-index:999;
    padding: 0 10px;
    font-family: 'Roboto', 'helvetica',sans-serif;
}
.altg::after{
    border-bottom: 7px solid transparent;
    border-left: 7px solid #FE6867;/*#6382A9*/
    border-top: 7px solid transparent;
    content: " ";
    height: 0;
    left: -10px !important;
    position: absolute;
    top: calc(50% - 7px);
    width: 0;
}
.altd::after{
    border-bottom: 7px solid transparent;
    border-right: 7px solid #FE6867;/*#6382A9*/
    border-top: 7px solid transparent;
    content: " ";
    height: 0;
    right: -10px !important;
    position: absolute;
    top: calc(50% - 7px);
    width: 0;
}
.altb::after{
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-bottom: 7px solid #FE6867;/*#6382A9*/
    bottom: -10px;
    content: " ";
    height: 0;
    left: calc(50% - 7px);
    position: absolute;
    width: 0;
}
.alth::after{
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-top: 7px solid #FE6867;/*#6382A9*/
    top: -10px;
    content: " ";
    height: 0;
    left: calc(50% - 7px);
    position: absolute;
    width: 0;
}
.altd[alt]::before{top:calc(50% - 15px);left:calc(100% + 10px);}
.altg[alt]::before{top:calc(50% - 15px);right:calc(100% + 10px);}
.altb[alt]::before{bottom:-40px;left:calc(50% - 15px);}
.alth[alt]::before{top:-40px;left:calc(50% - 15px);}
/*.altb.gauche[alt]::before,.alth.gauche[alt]::before{right:0 !important;left: inherit}*/
.altb.gauche[alt]::before,.alth.gauche[alt]::before{right:calc(50% - 15px)  !important;left: inherit}
.altb.droite[alt]::before,.alth.droite[alt]::before{left:0 !important;right: inherit}
.altb.droite::after{left:10px !important}


/*******HEADER***********/



/*******FOOTER***********/


/*******CDF*************/

#cdf a,#cdf span:not(.icon){padding: 0 10px;position: relative;line-height: 15px;}
#cdf a:after{content:"/";position: absolute;right: -5px;color:#fff !important;line-height: 15px;}
#cdf a.g999:after{color:#ccc !important}
#cdf a:first-child{padding-left: 0}
#cdf .active{padding-right: 0;font-weight: 500;font-style: italic;opacity: 0.8}
#cdf a:last-child:after{content:"";position: absolute;right: -5px}


#cdf a:hover{color:#fe6867 }
#cdf a.orange:hover{color:#fff }
#cdf a.g999:hover{color:#84b900 }
#cdf a:hover:after{color:#fff !important}
#cdf a.g999:hover:after{color:#ccc !important}

/***********NAV****************/
.rotate270{-ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg);}
.originlt{-ms-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0;}


.cat:hover{
    width: 75%
}




.menu .li.relative::before{border-left: 10px solid rgba(0, 0, 0, 0);border-right: 10px solid rgba(0, 0, 0, 0);border-bottom: 10px solid #fff;bottom: -60px;content: " ";height: 0;left: calc(50% - 10px);position: absolute;width: 0;z-index: 204;transition: opacity .3s ease-in-out .1s, bottom .3s ease-in-out .1s; opacity: 0;visibility: hidden;}
.menu >li:hover .li.relative::before{bottom: -20px; opacity: 1;visibility: visible;}
.menu > li:hover > .megacontent {
    margin: 0 0 0;
    visibility: visible;
    opacity: 1;
}
.menu > li > .megacontent {
    transition: opacity .3s ease-in-out .1s, margin-top .3s ease-in-out .1s;
    /*width: auto;*/
    margin: 40px 0 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    z-index: 203;
    opacity: 0;
    left: 0
}


.menu > li:nth-child(-n+4) > .megacontent .trihaut::before{left:70px !important}
.menu > li:nth-child(n+5) > .megacontent .trihaut::before{right:70px !important;left: inherit !important}


.megacontent > .sub {
    /*display: table;
    width: max-content;*/
    margin-left: 0;
    margin-right: 0;
}
.menu > li:hover > .megacontent .sub {
    visibility: visible;
    opacity: 1;
}



/************TIMELINE**************/

::placeholder {
    color: #ccc;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ccc;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #ccc;
    opacity: 1; /* Firefox */
}

@keyframes sonarWarning {0% {box-shadow: 0 0 0 0 #66829A;}100% {box-shadow: 0 0 0 15px rgba(102,130,154, 0);}}
@keyframes sonarDanger {0% {box-shadow: 0 0 0 0 #ff715b;}100% {box-shadow: 0 0 0 15px rgba(255, 113, 91, 0);}}
@keyframes sonarSuccess {0% {box-shadow: 0 0 0 0 #82B440;}100% {box-shadow: 0 0 0 15px rgba(169, 253, 0, 0);}}
.danger {animation: 1.8s linear 0s normal none infinite running sonarDanger;background-color: #FD3F26;}
.warning {animation: 1.8s linear 0s normal none infinite running sonarWarning;background-color: #f9cb40;}
.success {animation: 1.8s linear 0s normal none infinite running sonarSuccess;background-color: #82B440;}
.messagepop::before {font-family: "Flaticon";background-color: #d33d28;border-radius: 30px;content: "\f11a";font-size: 20px;height: 50px;line-height: 50px;left: -60px;position: absolute;text-align: center;top: calc(50% - 25px);width: 50px;}
.messagepop.fbl::before {content: "\f113";animation: 1.8s linear 0s normal none infinite running sonarWarning;background-color: #66829A;}
.messagepop.fo::before,.messagepop.fr::before {content: "\f112";animation: 1.8s linear 0s normal none infinite running sonarDanger;background-color: #FD3F26;}
.messagepop.fv::before {content: "\f115";animation: 1.8s linear 0s normal none infinite running sonarSuccess;background-color: #A4D905;}

/***************BLOC PAIMENT***************/
.kr-embedded,.kr-embedded.kr-help-button-inner-field .kr-payment-button, .kr-embedded.kr-help-button-inner-field .kr-form-error{
    width: 100% !important
}
.kr-embedded.kr-help-button-inner-field .kr-payment-button{
    text-align: center;
    font-family: 'Comfortaa';
    font-size: 18px;
    font-weight: 700;
    height: 50px;
    background-color: #92c020;
}
.kr-embedded.kr-help-button-inner-field .kr-form-error{
    color: #FE6867;
}
.kr-embedded .kr-pan,.kr-embedded .kr-expiry,.kr-embedded .kr-security-code {
    height: 45px !important;
    border: 1px solid #ccc !important;
    margin-bottom: 25px !important;
    border-radius: 5px !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

/**************DONUT****************/
.donut-ring {
    position: relative;
}
.donut-ring.absolute {
    position: absolute !important;
}

.ring {
    position: absolute;
    width: 50%;
    height: 50%;
}

.ring.hg {
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
    opacity:1;
}
.ring.bd {
    bottom: 0;
    right: 0;
    border-radius: 0 0 100% 0;
    opacity:0.5;
}
.ring.bg {
    bottom: 0;
    left: 0;
    border-radius: 0 0 0 100%;
    opacity:0.7;
}
.ring.hd {
    top: 0;
    right: 0;
    border-radius: 0 100% 0 0;
    opacity:0.3;
}
.donut-ring .inner{
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    border-radius: 50%;
}
.donut-ring.vert .inner.dashed{
    border: 3px dashed #84b900;
}
.donut-ring.perso .inner.dashed{
    border: 3px dashed var(--color);
}
.donut-ring.blanc .inner.dashed{
    border: 3px dashed #fff;
}

.donut-ring.perso .ring.hg {
    border-top: 5px solid var(--color);
    border-left: 5px solid var(--color);
}
.donut-ring.perso .ring.hd {
    border-top: 5px solid var(--color);
    border-right: 5px solid var(--color);
}

.donut-ring.perso .ring.bg {
    border-bottom: 5px solid var(--color);
    border-left: 5px solid var(--color);
}

.donut-ring.perso .ring.bd {
    border-bottom: 5px solid var(--color);
    border-right: 5px solid var(--color);
}


.donut-ring.vert .ring.hg {
    border-top: 5px solid #91bf1f;
    border-left: 5px solid #91bf1f;
}
.donut-ring.vert .ring.hd {
    border-top: 5px solid #91bf1f;
    border-right: 5px solid #91bf1f;
}

.donut-ring.vert .ring.bg {
    border-bottom: 5px solid #91bf1f;
    border-left: 5px solid #91bf1f;
}

.donut-ring.vert .ring.bd {
    border-bottom: 5px solid #91bf1f;
    border-right: 5px solid #91bf1f;
}
.donut-ring.blanc .ring.hg {
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
}
.donut-ring.blanc .ring.hd {
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
}

.donut-ring.blanc .ring.bg {
    border-bottom: 5px solid #fff;
    border-left: 5px solid #fff;
}

.donut-ring.blanc .ring.bd {
    border-bottom: 5px solid #fff;
    border-right: 5px solid #fff;
}

.donut-ring.orange .ring.hg {
    border-top: 5px solid #F99755;
    border-left: 5px solid #F99755;
}
.donut-ring.orange .ring.hd {
    border-top: 5px solid #F99755;
    border-right: 5px solid #F99755;
}

.donut-ring.orange .ring.bg {
    border-bottom: 5px solid #F99755;
    border-left: 5px solid #F99755;
}

.donut-ring.orange .ring.bd {
    border-bottom: 5px solid #F99755;
    border-right: 5px solid #F99755;
}
.donut-ring.bw10 .ring{
    border-width: 10px !important;
}
.donut-ring.bw20 .ring{
    border-width: 20px !important;
}
.cadrehaut,.cadrehaut{position:relative}
.cadrehaut:after {
    content:"";
    position:absolute;
    opacity:1;
    width: calc(50% - var(--px));
    height: calc(50% - var(--px));
    top:  var(--px);
    left: var(--px);
    border-top: 8px solid #91bf1f;
    border-left: 8px solid #91bf1f;
    z-index: 1;
}
.cadrehaut:before {
    content:"";
    position:absolute;
    width: calc(50% - var(--px));
    height: calc(50% - var(--px));
    top:  var(--px);
    right:  var(--px);
    opacity:0.3;
    border-top: 8px solid #91bf1f;
    border-right: 8px solid #91bf1f;
    z-index: 1;
}
.cadrebas:after {
    content:"";
    position:absolute;
    width: calc(50% - var(--px));
    height: calc(50% - var(--px));
    bottom:  var(--px);
    left:  var(--px);
    border-bottom: 8px solid #91bf1f;
    border-left: 8px solid #91bf1f;
    opacity:0.7;
    z-index: 1;
}
.cadrebas:before {
    content:"";
    position:absolute;
    width: calc(50% - var(--px));
    height: calc(50% - var(--px));
    bottom: var(--px);
    right: var(--px);
    border-bottom: 8px solid #91bf1f;
    border-right: 8px solid #91bf1f;
    opacity:0.5;
    z-index: 1;
}
.cadrehaut10,.cadrehaut10{position:relative}
.cadrehaut10:after {
    content:"";
    position:absolute;
    opacity:1;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
    top:  10px;
    left: 10px;
    border-top: 8px solid #91bf1f;
    border-left: 8px solid #91bf1f;
    z-index: 1;
}
.cadrehaut10:before {
    content:"";
    position:absolute;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
    top:  10px;
    right:  10px;
    opacity:0.3;
    border-top: 8px solid #91bf1f;
    border-right: 8px solid #91bf1f;
    z-index: 1;
}
.cadrebas10:after {
    content:"";
    position:absolute;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
    bottom:  10px;
    left:  10px;
    border-bottom: 8px solid #91bf1f;
    border-left: 8px solid #91bf1f;
    opacity:0.7;
    z-index: 1;
}
.cadrebas10:before {
    content:"";
    position:absolute;
    width: calc(50% - 10px);
    height: calc(50% - 10px);
    bottom: 10px;
    right: 10px;
    border-bottom: 8px solid #91bf1f;
    border-right: 8px solid #91bf1f;
    opacity:0.5;
    z-index: 1;
}



.cadrebas.bgbl:after,.cadrebas.bgbl:before,.cadrehaut.bgbl:after,.cadrehaut.bgbl:before {
    border-color: #6694A3;
}
.cadrebas.bgv:after,.cadrebas.bgv:before,.cadrehaut.bgv:after,.cadrehaut.bgv:before {
    border-color: #91bf1f;
}
.cadrebas.bgo:after,.cadrebas.bgo:before,.cadrehaut.bgo:after,.cadrehaut.bgo:before {
    border-color: #FBC19B;
}
.cadrebas.bgvi:after,.cadrebas.bgvi:before,.cadrehaut.bgvi:after,.cadrehaut.bgvi:before {
    border-color: #9E8D9E;
}
.cadrebas10.bgbl:after,.cadrebas10.bgbl:before,.cadrehaut10.bgbl:after,.cadrehaut10.bgbl:before {
    border-color: #6694A3;
}
.cadrebas10.bgv:after,.cadrebas10.bgv:before,.cadrehaut10.bgv:after,.cadrehaut10.bgv:before {
    border-color: #91bf1f;
}
.cadrebas10.bgo:after,.cadrebas10.bgo:before,.cadrehaut10.bgo:after,.cadrehaut10.bgo:before {
    border-color: #FBC19B;
}
.cadrebas10.bgvi:after,.cadrebas10.bgvi:before,.cadrehaut10.bgvi:after,.cadrehaut10.bgvi:before {
    border-color: #9E8D9E;
}

.cat:hover .fblc08{background-color: rgba(102,148,163,1)}
.cat:hover .fvc08{background-color: rgba(189,217,121,1)}
.cat:hover .foc08{background-color: rgba(251,193,155,1)}
.cat:hover .fvic08{background-color: rgba(158,141,158,1)}



.sonar.fo::before {
    background: #FD3F26;
}
.sonar.fo::after {
    background: #FD3F26;
}
.sonar.fv::before {
    background: #91BF1F;
}
.sonar.fv::after {
    background: #91BF1F;
}
.sonar.fb::after {
    background: #fff;
}

.sonar.fvc::before {
    background: rgba(189,217,121, 1);
}
.sonar.fvc::after {
    background: rgba(189,217,121, 1);
}

.sonar::before,
.sonar::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 50%;
    animation: ripple 2s linear infinite 0s;
}
.sonar::after {
    animation: ripple 2s linear infinite 1s;
}
#notif_panier.son::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    border-radius: 50%;
    animation: ripple 1s linear infinite 0s;
    background: #FD3F26;
}
@keyframes ripple {

    from {
        opacity: 0.4;
    }
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}



.empty{-webkit-animation: bolaDesierto 5s linear infinite;-moz-animation: bolaDesierto 5s linear infinite;animation: bolaDesierto 5s linear infinite;}
.tourne{-webkit-animation: giroBolaDesierto 1.2s linear infinite;-moz-animation: giroBolaDesierto 1.2s linear infinite;animation: giroBolaDesierto 1.2s linear infinite;}

.bloc_hover:hover{box-shadow: 0 0 25px 0 rgba(0,0,0,0.1)}
.produit .cadre:after,.produit .cadre:before,.produit .cadreinner:after,.produit .cadreinner:before   {
    -webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;
}
.produit .cadre:after {
    content:"";
    position:absolute;
    opacity:1;
    width: calc(50% + 20px);
    height: calc(50% + 20px);
    top:  -20px;
    left: -20px;
    border-top: 5px solid var(--color);
    border-left: 5px solid var(--color);
    border-top-left-radius: 20px;
    z-index: 1;
}
.produit .cadre:before {
    content:"";
    position:absolute;
    width: calc(50% + 20px);
    height: calc(50% + 20px);
    top:  -20px;
    right:  -20px;
    opacity:0.3;
    border-top: 5px solid var(--color);
    border-right: 5px solid var(--color);
    border-top-right-radius: 20px;
    z-index: 1;
}
.produit .cadreinner:after {
    content:"";
    position:absolute;
    width: calc(50% + 20px);
    height: calc(50% + 20px);
    bottom:  -20px;
    left:  -20px;
    border-bottom: 5px solid var(--color);
    border-left: 5px solid var(--color);
    opacity:0.7;
    z-index: 1;
}
.produit .cadreinner:before {
    content:"";
    position:absolute;
    width: calc(50% + 20px);
    height: calc(50% + 20px);
    bottom: -20px;
    right: -20px;
    border-bottom: 5px solid var(--color);
    border-right: 5px solid var(--color);
    opacity:0.5;
    z-index: 1;
}





.produit:hover .cadre:after {
    width: calc(50% - 10px);
    height: calc(50% - 0px);
    top:  0px;
    left: 10px;
}
.produit:hover  .cadre:before {
    width: calc(50% - 10px);
    height: calc(50% - 0px);
    top:  0px;
    right:  10px;
}
.produit:hover  .cadreinner:after {
    width: calc(50% - 10px);
    height: calc(50% - 0px);
    bottom:  0px;
    left:  10px;
}
.produit:hover  .cadreinner:before {
    width: calc(50% - 10px);
    height: calc(50% - 0px);
    bottom: 0px;
    right: 10px;
}

.tag-wrap {
    filter: drop-shadow(0 0 25px rgba(0,0,0, 0.1));
}
.triangle{position: relative}
.triangle:before {    
    position: absolute;
    content: '';
    height: 100%;
    width: 50px;
    background-color: #fff;
    top: 0;
    left: 99%;
    clip-path: polygon(0% 0%, 10% 0, 100% 50%, 10% 100%, 0% 100%);
}
.triangle.bas:before {    
    position: absolute;
    content: '';
    height: 50px;
    width: 100%;
    background-color: #fff;
    top: 99%;
    left: 0;
    clip-path: polygon(0% 0%, 100% 0, 100% 50%, 50% 100%, 0 50%);
}


.selection2 {
    -moz-column-count: 2;
    -moz-column-gap: 2%;
    -moz-column-width: 48%;
    -webkit-column-count: 2;
    -webkit-column-gap: 2%;
    -webkit-column-width: 48%;
    column-count: 2;
    column-gap: 2%;
    column-width: 48%
}

.selection3 {
    -moz-column-count: 3;
    -moz-column-gap: 2%;
    -moz-column-width: 31%;
    -webkit-column-count: 3;
    -webkit-column-gap: 2%;
    -webkit-column-width: 31%;
    column-count: 3;
    column-gap: 2%;
    column-width: 31%
}

.selection4 {
    -moz-column-count: 4;
    -moz-column-gap: 0;
    -moz-column-width: 25%;
    -webkit-column-count: 4;
    -webkit-column-gap: 0;
    -webkit-column-width: 25%;
    column-count: 4;
    column-gap: 0;
    column-width: 25%
}

.selection5 {
    -moz-column-count: 5;
    -moz-column-gap: 0;
    -moz-column-width: 20%;
    -webkit-column-count: 5;
    -webkit-column-gap: 0;
    -webkit-column-width: 20%;
    column-count: 5;
    column-gap: 0;
    column-width: 20%
}

.selection2 > *, .selection4 > *, .selection5 > *, .selection3 > * {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display: table
}

@media only screen and (max-width: 1200px){ /*JUSQUA 1200px*/
    .selection3 {
        -moz-column-count: 2;
        -moz-column-gap: 2%;
        -moz-column-width: 48%;
        -webkit-column-count: 2;
        -webkit-column-gap: 2%;
        -webkit-column-width: 48%;
        column-count: 2;
        column-gap: 2%;
        column-width: 48%
    }
}
@media only screen and (max-width: 600px){ /*JUSQUA 1200px*/
    .selection3 {
        -moz-column-count: 1;
        -moz-column-gap: 0%;
        -moz-column-width: 100%;
        -webkit-column-count: 1;
        -webkit-column-gap: 0%;
        -webkit-column-width: 100%;
        column-count: 1;
        column-gap: 0%;
        column-width: 100%
    }
}
.before_point:before {
    content: "";
    position: absolute;
    width: 150%;
    border-bottom: 6px dotted #eee;
    left: -150%;
    top: calc(50% - 3px);
    height: 1px;
    z-index: 0;
}
.after_point:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 6px dotted #eee;
    left: 0;
    top: calc(50% - 3px);
    height: 1px;
    z-index: 0;
}

.bookmark{ 
    padding: 0px; 
    -webkit-transform: rotate(0deg) skew(0deg); 
    transform: rotate(0deg) skew(0deg); 
    border-left: 12px solid var(--color); 
    border-right: 12px solid var(--color); 
    border-bottom: 8px solid transparent; 
}