/*******FONT***********/
.jost {
    font-family: 'Jost', sans-serif;
}

.comfortaa {
    font-family: 'Jost', sans-serif;
    text-transform: inherit !important;
}

/*******COULEUR***********/
:root {
    --beige1: #F3F3EE;
    --beige2: #EAEAE8;
    --beige3: #E5DDDA;
    --marron1: #E9E3D7;
    --marron2: #DDD9CE;
    --marron3: #A09A8E;
    --vert1: #A7D2BE;
    --vert2: #C0E2D2;
    --vert3: #E0EEDD;
    --vert4: #65b38f;
    --bleu1: #2E7AAB;

    --rgb_beige1: 243, 243, 238;
    --rgb_beige2: 234, 234, 232;
    --rgb_beige3: 229, 221, 218;
    --rgb_marron1: 233, 227, 215;
    --rgb_marron2: 221, 217, 206;
    --rgb_marron3: 160, 154, 142;
    --rgb_vert1: 167, 210, 190;
    --rgb_vert2: 192, 226, 210;
    --rgb_vert3: 224, 238, 221;
    --rgb_vert4: 101, 179, 143;
}

/***********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.posologie:after {
    content: "\f18e";
}

.icon.cereale:after {
    content: "\f18f";
}

.icon.pain:after {
    content: "\f190";
}

.icon.barres:after {
    content: "\f191";
}

.icon.boisson:after {
    content: "\f192";
}

.icon.chips:after {
    content: "\f193";
}

.icon.creme:after {
    content: "\f194";
}

.icon.crepe:after {
    content: "\f195";
}

.icon.plat:after {
    content: "\f196";
}

.icon.snack:after {
    content: "\f197";
}

.icon.repas:after {
    content: "\f198";
}

.icon.gauffre:after {
    content: "\f199";
}

.icon.accessoire:after {
    content: "\f19a";
}

.icon.pate:after {
    content: "\f19b";
}

.icon.soupe:after {
    content: "\f19c";
}

.icon.eco:after {
    content: "\f19d";
}
.icon.apple:after {
    content: "\f19e";
}
.icon.google:after {
    content: "\f19f";
}
.icon.nos-packs:after {
    content: "\f1a0";
}
.icon.sommeil:after {
    content: "\f1a1";
}
.icon.energy:after {
    content: "\f1a2";
}
.icon.etape:after {
    content: "\f1a3";
}
.icon.recette:after {
    content: "\f1a4";
}
.icon.free-recette:after {
    content: "\f1a5";
}
.icon.principe:after {
    content: "\f1a6";
}
.icon.principe:after {
    content: "\f1a6";
}
.icon.cheveux:after {
    content: "\f1a7";
}


/*******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
}

.babeige1 {
    border: 1px solid var(--beige1)
}

.babeige2 {
    border: 1px solid var(--beige2)
}

.babeige3 {
    border: 1px solid var(--beige3)
}

.bamarron1 {
    border: 1px solid var(--marron1)
}

.bamarron2 {
    border: 1px solid var(--marron2)
}

.bamarron3 {
    border: 1px solid var(--marron3)
}

.bavert1 {
    border: 1px solid var(--vert1)
}

.bavert2 {
    border: 1px solid var(--vert2)
}

.bavert3 {
    border: 1px solid var(--vert3)
}

.bavert4 {
    border: 1px solid var(--vert4)
}

.ba2vert1 {
    border: 2px solid var(--vert1)
}

.ba2vert2 {
    border: 2px solid var(--vert2)
}

.ba2vert3 {
    border: 2px solid var(--vert3)
}

.ba2vert4 {
    border: 2px solid var(--vert4)
}

/*.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
}

.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)
}

.ba3g {
    box-shadow: 0 0 0px 5px #EDEDED;
}

.dent {
    position: relative;
}

.dbbeige1::before {
    background: rgb(var(--rgb_beige1));
    background: linear-gradient(0deg, rgba(var(--rgb_beige1), 1) 40%, rgba(var(--rgb_beige1), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbbeige2::before {
    background: rgb(var(--rgb_beige2));
    background: linear-gradient(0deg, rgba(var(--rgb_beige2), 1) 40%, rgba(var(--rgb_beige2), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbbeige3::before {
    background: rgb(var(--rgb_beige3));
    background: linear-gradient(0deg, rgba(var(--rgb_beige3), 1) 40%, rgba(var(--rgb_beige3), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbmarron1::before {
    background: rgb(var(--rgb_marron1));
    background: linear-gradient(0deg, rgba(var(--rgb_marron1), 1) 40%, rgba(var(--rgb_marron1), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbmarron2::before {
    background: rgb(var(--rgb_marron2));
    background: linear-gradient(0deg, rgba(var(--rgb_marron2), 1) 40%, rgba(var(--rgb_marron2), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbmarron3::before {
    background: rgb(var(--rgb_marron3));
    background: linear-gradient(0deg, rgba(var(--rgb_marron3), 1) 40%, rgba(var(--rgb_marron3), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbvert1::before {
    background: rgb(var(--rgb_vert1));
    background: linear-gradient(0deg, rgba(var(--rgb_vert1), 1) 40%, rgba(var(--rgb_vert1), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbvert2::before {
    background: rgb(var(--rgb_vert2));
    background: linear-gradient(0deg, rgba(var(--rgb_vert2), 1) 40%, rgba(var(--rgb_vert2), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}

.dbvert3::before {
    background: rgb(var(--rgb_vert3));
    background: linear-gradient(0deg, rgba(var(--rgb_vert3), 1) 40%, rgba(var(--rgb_vert3), 0) 100%);
    content: ' ';
    width: 100%;
    height: 200%;
    top: -230%;
    position: absolute;
    left: 0;
}


.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;
}
.gradientbeige2L {
    background: rgb(234, 234, 232);
    background: linear-gradient(90deg, rgba(234, 234, 232, 1) 0%, rgba(234, 234, 232, 0) 100%);
    z-index: 10;
}

.gradientbeige2R {
    background: rgb(234, 234, 232);
    background: linear-gradient(90deg, rgba(234, 234, 232, 0) 0%, rgba(234, 234, 232, 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: #000
}

.fn2 {
    background-color: #576b7d
}

.f9 {
    background-color: #999
}

.fb6 {
    background-color: #f6f6f6
}

.f0 {
    background-color: #fff
}

.fn2 {
    background-color: #394254
}

.fb {
    background-color: #fff
}

.fbl {
    background-color: #66829A
}

.fbl2 {
    background-color: #6694A3
}

.fv {
    background-color: #91BF1F
}

.fvc {
    background-color: #BDD979;
}

.fo {
    background-color: #FE6867
}

.fo2 {
    background-color: #F99755
}

.foc {
    background-color: #FBC19B
}

.fr {
    background-color: #FD3F26
}

.fp {
    background-color: #FF9999
}

.fvi {
    background-color: mediumpurple;
}


.fbeige1 {
    background-color: var(--beige1)
}

.fbeige2 {
    background-color: var(--beige2)
}

.fbeige3 {
    background-color: var(--beige3)
}

.fmarron1 {
    background-color: var(--marron1)
}

.fmarron2 {
    background-color: var(--marron2)
}

.fmarron3 {
    background-color: var(--marron3)
}

.fvert1 {
    background-color: var(--vert1)
}

.fvert2 {
    background-color: var(--vert2)
}

.fvert3 {
    background-color: var(--vert3)
}

.fvert4 {
    background-color: var(--vert4)
}


.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)*/
}

.ombrehover:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    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: #221F20;
}

.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
}


.beige1 {
    color: var(--beige1)
}

.beige2 {
    color: var(--beige2)
}

.beige3 {
    color: var(--beige3)
}

.marron1 {
    color: var(--marron1)
}

.marron2 {
    color: var(--marron2)
}

.marron3 {
    color: var(--marron3)
}

.vert1 {
    color: var(--vert1)
}

.vert2 {
    color: var(--vert2)
}

.vert3 {
    color: var(--vert3)
}

.vert4 {
    color: var(--vert4)
}
.bleu1 {
    color: var(--bleu1)
}
.jaune{color:#fc3;}

.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: var(--marron3);
    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: var(--marron3);
}

/*.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: var(--marron3);
    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: var(--marron3)
}

.tunnel li:last-child.current > * {
    color: var(--marron3);
    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 {
    cursor: pointer
}

.bouton.absolute {
    position: absolute !important
}

.bouton.perso {
    position: relative;
    cursor: pointer;
    --color: var(--color)
}

.bouton.fv, .bouton.bav {
    position: relative;
    cursor: pointer;
    --color: #91bf1f
}

.bouton.fv.absolute, .bouton.bav.absolute {
    position: absolute !important;
}

.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.babeige1, .bouton.fbeige1 {
    position: relative;
    cursor: pointer;
    --color: var(--beige1)
}

.bouton.babeige2, .bouton.fbeige2 {
    position: relative;
    cursor: pointer;
    --color: var(--beige2)
}

.bouton.babeige3, .bouton.fbeige3 {
    position: relative;
    cursor: pointer;
    --color: var(--beige3)
}

.bouton.bamarron1, .bouton.fmarron1 {
    position: relative;
    cursor: pointer;
    --color: var(--marron1)
}

.bouton.bamarron2, .bouton.fmarron2 {
    position: relative;
    cursor: pointer;
    --color: var(--marron2)
}

.bouton.bamarron3, .bouton.fmarron3 {
    position: relative;
    cursor: pointer;
    --color: var(--marron3)
}

.bouton.bavert1, .bouton.fvert1 {
    position: relative;
    cursor: pointer;
    --color: var(--vert1)
}

.bouton.bavert2, .bouton.fvert2 {
    position: relative;
    cursor: pointer;
    --color: var(--vert2)
}

.bouton.bavert3, .bouton.fvert3 {
    position: relative;
    cursor: pointer;
    --color: var(--vert3)
}

.bouton.bavert4, .bouton.fvert4 {
    position: relative;
    cursor: pointer;
    --color: var(--vert4)
}

.bouton.bab.absolute {
    position: absolute !important;
}

.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;

}

.transHover:hover .anim,
.transHover:focus .anim {
    animation: pulsationSlow 1.2s;
}

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

@keyframes pulsationSlow {
    from {
        box-shadow: 0 0 0 0 var(--marron3);
    }
    to {
        box-shadow: 0 0 0 1em 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;
    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-size: 18px;
    font-weight: 700;
    height: 50px;
    background-color: var(--vert4);
    border-radius: 10px;
}

.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.blanc .inner.dashed {
    border: 3px dashed #fff;
}

.donut-ring.beige1 .inner.dashed {
    border: 3px dashed var(--beige1);
}

.donut-ring.beige2 .inner.dashed {
    border: 3px dashed var(--beige2);
}

.donut-ring.beige3 .inner.dashed {
    border: 3px dashed var(--beige3);
}

.donut-ring.marron1 .inner.dashed {
    border: 3px dashed var(--marron1);
}

.donut-ring.marron2 .inner.dashed {
    border: 3px dashed var(--marron2);
}

.donut-ring.marron3 .inner.dashed {
    border: 3px dashed var(--marron3);
}

.donut-ring.vert1 .inner.dashed {
    border: 3px dashed var(--vert1);
}

.donut-ring.vert2 .inner.dashed {
    border: 3px dashed var(--vert2);
}

.donut-ring.vert3 .inner.dashed {
    border: 3px dashed var(--vert3);
}

.donut-ring.beige1 .ring.hg {
    border-top: 5px solid var(--beige1);
    border-left: 5px solid var(--beige1);
}

.donut-ring.beige1 .ring.hd {
    border-top: 5px solid var(--beige1);
    border-right: 5px solid var(--beige1);
}

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

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


.donut-ring.beige1 .ring.hg {
    border-top: 5px solid var(--beige1);
    border-left: 5px solid var(--beige1);
}


.donut-ring.beige2 .ring.hg {
    border-top: 5px solid var(--beige2);
    border-left: 5px solid var(--beige2);
}

.donut-ring.beige2 .ring.hd {
    border-top: 5px solid var(--beige2);
    border-right: 5px solid var(--beige2);
}

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

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


.donut-ring.beige2 .ring.hg {
    border-top: 5px solid var(--beige2);
    border-left: 5px solid var(--beige2);
}


.donut-ring.beige3 .ring.hg {
    border-top: 5px solid var(--beige3);
    border-left: 5px solid var(--beige3);
}

.donut-ring.beige3 .ring.hd {
    border-top: 5px solid var(--beige3);
    border-right: 5px solid var(--beige3);
}

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

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


.donut-ring.beige3 .ring.hg {
    border-top: 5px solid var(--beige3);
    border-left: 5px solid var(--beige3);
}


.donut-ring.marron1 .ring.hg {
    border-top: 5px solid var(--marron1);
    border-left: 5px solid var(--marron1);
}

.donut-ring.marron1 .ring.hd {
    border-top: 5px solid var(--marron1);
    border-right: 5px solid var(--marron1);
}

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

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


.donut-ring.marron1 .ring.hg {
    border-top: 5px solid var(--marron1);
    border-left: 5px solid var(--marron1);
}


.donut-ring.marron2 .ring.hg {
    border-top: 5px solid var(--marron2);
    border-left: 5px solid var(--marron2);
}

.donut-ring.marron2 .ring.hd {
    border-top: 5px solid var(--marron2);
    border-right: 5px solid var(--marron2);
}

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

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


.donut-ring.marron2 .ring.hg {
    border-top: 5px solid var(--marron2);
    border-left: 5px solid var(--marron2);
}


.donut-ring.marron3 .ring.hg {
    border-top: 5px solid var(--marron3);
    border-left: 5px solid var(--marron3);
}

.donut-ring.marron3 .ring.hd {
    border-top: 5px solid var(--marron3);
    border-right: 5px solid var(--marron3);
}

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

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


.donut-ring.marron3 .ring.hg {
    border-top: 5px solid var(--marron3);
    border-left: 5px solid var(--marron3);
}


.donut-ring.vert1 .ring.hg {
    border-top: 5px solid var(--vert1);
    border-left: 5px solid var(--vert1);
}

.donut-ring.vert1 .ring.hd {
    border-top: 5px solid var(--vert1);
    border-right: 5px solid var(--vert1);
}

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

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


.donut-ring.vert1 .ring.hg {
    border-top: 5px solid var(--vert1);
    border-left: 5px solid var(--vert1);
}


.donut-ring.vert2 .ring.hg {
    border-top: 5px solid var(--vert2);
    border-left: 5px solid var(--vert2);
}

.donut-ring.vert2 .ring.hd {
    border-top: 5px solid var(--vert2);
    border-right: 5px solid var(--vert2);
}

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

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


.donut-ring.vert2 .ring.hg {
    border-top: 5px solid var(--vert2);
    border-left: 5px solid var(--vert2);
}


.donut-ring.vert3 .ring.hg {
    border-top: 5px solid var(--vert3);
    border-left: 5px solid var(--vert3);
}

.donut-ring.vert3 .ring.hd {
    border-top: 5px solid var(--vert3);
    border-right: 5px solid var(--vert3);
}

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

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


.donut-ring.vert3 .ring.hg {
    border-top: 5px solid var(--vert3);
    border-left: 5px solid var(--vert3);
}


.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 {
    animation: pulsationSlow 1.2s;
}

.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
}
.tribas-center.fmarron1::before,.tribas.fmarron1::before{border-top: 10px solid var(--marron1);}
.tribas-center.fmarron2::before,.tribas.fmarron2::before{border-top: 10px solid var(--marron2);}
.tribas-center.fmarron3::before,.tribas.fmarron3::before{border-top: 10px solid var(--marron3);}

.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%);
}

.bgblur {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.6);
}

/*.tiny ul {*/
/*    padding-left: 40px*/
/*}*/

/*.tiny ul li {*/
/*    list-style: inherit;*/
/*}*/

.MR-Widget {
    width: 100% !important;
}

.tiny {
    line-height: 1.3;
}

.tiny .vert {
    color: inherit;
}

.tiny .comfortaa {
    color: inherit;
}

.widget_colissimo_close {
    display: none;
}

.widget_colissimo_input_text_normal {
    background: #FFFFFF !important;
    border: 1px solid #CDCDCD !important;
}

.widget_colissimo_contenu {
    height: 100% !important;
}

.widget_colissimo_map {
    height: calc(100% - 100px) !important;
}
.widget_colissimo_liste {
    height: calc(100% - 150px) !important;
}

.mapboxgl-canvas {
    width: 100% !important;
    height: 100% !important;
}

.widget_colissimo_bouton_validation {
    padding: 10px;
    text-align: center !important;
}
.widget_colissimo_text_bouton{
    text-align: center !important;
}


.swiper-slide.thumb {
    opacity: .5;
    cursor: pointer;

}

.swiper-slide.thumb:hover {
    opacity: .8
}

.swiper-slide-thumb-active.thumb {
    opacity: 1!important;
    cursor: default;
}
.bulleclient {
    border-radius: 15px;
    border-top-left-radius: 0px;
}