/* ---------------------------------------------styles.css----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ * { padding: 0; margin: 0; max-height: 100000px;} body { width: 100vw; overflow-x: hidden; font-family: arial, sans-serif; background-color: rgb(0,0,0);} body.bloque { overflow: hidden;} :focus { outline: -webkit-focus-ring-color auto 0;} a { text-decoration: none;} img { outline: none; border: none;} input[type="text"], input[type="password"] { padding: 0 0 0 5px; border-top: 1px solid rgb(120,120,120); border-right: 1px solid rgb(190,190,190); border-bottom: 1px solid rgb(190,190,190); border-left: 1px solid rgb(120,120,120); background-color: white;} .icon::before { display: inline-block; margin-right: 15px; font-family: Flaticon; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;} .icon2::before { display: inline-block; margin-right: 15px; font-family: Flaticon2; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;} .above { color: rgb(175,128,0) !important; font-weight: bold;} .below { color: rgb(175,0,0) !important; font-weight: bold;} .malus { color: rgb(158,54,54);} .show { opacity: 1; transition: opacity 500ms linear;} .hide { opacity: 0; transition: opacity 500ms linear;} .grayscale { filter: grayscale(0.9);} .QouD { height: 40px;} .QouD [type="checkbox"]:not(:checked), .QouD [type="checkbox"]:checked { position: absolute; left: -1000px;} .QouD [type="checkbox"]:not(:checked) + label, .QouD [type="checkbox"]:checked + label { padding-top: 2px; position: relative; padding-left: 110px; cursor: pointer; color: rgb(142,152,164); font-size: 22px; font-weight: bold;} .QouD [type="checkbox"]:not(:checked) + label .sp2, .QouD [type="checkbox"]:checked + label .sp2 { font-weight: normal; font-style: italic;} .QouD [type="checkbox"]:not(:checked) + label::before, .QouD [type="checkbox"]:checked + label::before, .QouD [type="checkbox"]:not(:checked) + label::after, .QouD [type="checkbox"]:checked + label::after { content: ''; position: absolute;} .QouD [type="checkbox"]:not(:checked) + label::before, .QouD [type="checkbox"]:checked + label::before { top: -5px; left: 0; width: 90px; height: 40px; border-radius: 20px; background-color: rgb(221,221,221); transition: background-color .2s;} .QouD [type="checkbox"]:not(:checked) + label::after, .QouD [type="checkbox"]:checked + label::after { top: 0px; left: 5px; width: 30px; height: 30px; border-radius: 50%; background-color: rgb(150,150,150); transition: all .2s;} .QouD.promo [type="checkbox"]:not(:checked) + label, .QouD.promo [type="checkbox"]:checked + label { color: rgb(173,121,93);} .QouD.promo [type="checkbox"]:not(:checked) + label::before, .QouD.promo [type="checkbox"]:checked + label::before { background-color: rgb(249,211,86);} .QouD.promo [type="checkbox"]:not(:checked) + label::after, .QouD.promo [type="checkbox"]:checked + label::after { background-color: rgb(173,121,93);} /* on checked */ .QouD [type="checkbox"]:checked + label::before { background-color: rgb(186,143,28);} .QouD [type="checkbox"]:checked + label::after { top: 0px; left: 55px; background-color: white;} .QouD [type="checkbox"]:checked + label .sp1, .QouD [type="checkbox"]:not(:checked) + label .sp1, .QouD [type="checkbox"]:not(:checked) + label .sp1::before, .QouD [type="checkbox"]:checked + label .sp1::after { position: absolute; top: -2px; left: 5px; width: 90px; height: 40px; font-size: 22px; text-align: left; font-weight: bold; line-height: 35px; border-radius: 20px; transition: all .2s;} .QouD [type="checkbox"]:not(:checked) + label .sp1::before { left: 37px; content: "non"; color: rgb(150,150,150);} .QouD [type="checkbox"]:checked + label .sp1::after { content: "oui"; color: rgb(245,245,245);} .QouD.promo [type="checkbox"]:checked + label::before { background-color: rgb(193,94,0);} .QouD.promo [type="checkbox"]:checked + label::after { background-color: white;} .QouD.promo [type="checkbox"]:not(:checked) + label .sp1::before { left: 37px; content: "non"; color: rgb(132,62,2);} .QouD.promo [type="checkbox"]:checked + label .sp1::after { color: rgb(245,245,245);} /* -------------------------------------------------------------------------------------------------------- */ /* -----------------------------------------Connexion------------------------------------------------------ */ .connexion { padding-top: 10%; width: 100%; height: 100%; text-align: center; background-position: 40% 75%; background-repeat: no-repeat; box-sizing: border-box;} .connexion .deco { display: none;} .connexion .logo { text-align: center;} .connexion .title { margin: 20px 0 50px 0; font-family: Hand; font-size: 20em; color: rgb(250,250,250);} .connexion .title::first-letter { color: rgb(180,0,0);} .connexion .title .version { position: relative; left: 315px; bottom: 80px; display: block; font-family: Lato; font-size: 30px; color: rgb(82,82,82); text-shadow: none;} .connexion .mdperreur { display: inline-block; margin: 0 auto 20px auto; height: 65px; width: 100%; line-height: 65px; background-color: rgb(58,45,51); border: 1px solid rgb(180,0,0); color: rgb(234,204,212); font-weight: bold; font-size: 30px; visibility: hidden; box-sizing: inherit;} .connexion .input { display: block; position: relative; margin: 60px auto 0 auto; width: 700px; box-sizing: border-box;} .connexion .input #pass { display: block; width: 100%; height: 100px; font-family: Lato, sans-serif; font-size: 40px; color: rgb(208,208,208); line-height: 100px; text-align: center; border-radius: 40px; background-color: rgba(115,115,115,0.45); border: none; box-shadow: none; box-sizing: inherit; transition: background-color 0.2s, border 0.2s;} .connexion .input #pass:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px rgb(207,205,214) inset;} /*pour Chrome*/ .connexion .input #pass + .icon-ferme { display: flex; align-items: center; position: absolute; top: 0; left: 0; padding-left: 40px; width: 100%; height: 100%; font-size: 55px; color: rgb(150,150,150); pointer-events: none; box-sizing: inherit; transition: color 0.2s;} .connexion .input #pass.wrong { border: 1px solid rgb(180,0,0); background-color: rgb(33,2,18);} .connexion .input #pass.wrong::placeholder { color: rgb(175,154,159);} .connexion .input #pass.wrong + .icon-ferme::before { color: rgb(165,74,74);} .connexion .input #login { display: block; position: absolute; top: 0; left: 0; margin-top: 150px; width: 100%; height: 100px; font-family: Hand, sans-serif; font-size: 50px; font-weight: bold; color: rgb(241,194,194); line-height: 50px; letter-spacing: 0.18em; border-radius: 40px; background-color: rgb(180,0,0); border: none; box-shadow: none; box-sizing: inherit; transition: background-color 0.2s, color 0.2s; cursor: pointer;} .connexion .input #login:hover { background-color: rgba(234,200,171,0.8); color: rgb(152,49,32);} /* --------------------------------------------Corps de page--------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ .perspective { position: relative; width: 100%; min-height: 100vh;} .container { position: relative; min-height: 100vh; background-color: rgb(255,250,246); -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); transform: translateZ(0) translateX(0) rotateY(0deg);} .container::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; opacity: 0; -webkit-transition: opacity 0.4s, height 0s 0.4s; transition: opacity 0.4s, height 0s 0.4s; z-index: 10;} .perspective.modalview { position: fixed; -webkit-perspective: 1500px; perspective: 1500px;} .modalview .container { position: absolute; width: 100%; height: 100%; cursor: pointer; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .animate .container::after { height: 101%; opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; z-index: 2;} .effect-moveleft { background: rgb(0,0,0);} .effect-moveleft .container { -webkit-transition: -webkit-transform 0.4s, padding 0.4s, margin 0.4s; transition: transform 0.4s, padding 0.4s, margin 0.4s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;} .effect-moveleft .container::after { background: rgba(0,0,0,0.55);} .effect-moveleft.conf .container::after { height: 100%; background: rgba(0,0,0,0.8); opacity: 1; transition: none;} .effect-moveleft.animate .container { transform: translateX(-35px) rotateY(26deg) translateZ(-95px);} #corps { position: relative; width: 100%; text-align: center;} /* ------------------------------------------Entête et bannières----------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #entete { position: fixed; top: 0; width: 100%; z-index: 4;} #entete .boxstats { position: relative; display: flex; width: 100%; height: 115px; background-color: rgb(0,0,0); color: rgb(230,230,230);} #entete .boxstats .niveau { position: realtive; margin-left: 1%; width: 6%; height: 102%; background-color: rgb(230,230,230); box-shadow: 0 5px 5px rgba(0,0,0,0.55);} #entete .boxstats .niveau p { padding-top: 12px; height: 100%; font-family: Lato, sans-serif; font-size: 30px; font-weight: bold; color: rgb(25,25,25); line-height: 46px; text-align: center; box-sizing: border-box;} #entete .boxstats .stats { width: 65%; height: 100%;} #entete .boxstats .stats a { display: flex; padding-top: 5px; color: rgb(230,230,230);} #entete .boxstats .stats a .icon { padding: 1.4%; font-family: "times new roman", serif; font-size: 30px; box-sizing: border-box;} #entete .boxstats .stats a .st_b1 { width: 40%;} #entete .boxstats .stats a .st_b1 .icon-pk { display: block; padding-left: 25px; width: 100%; text-align: left;} #entete .boxstats .stats a .st_b1 .icon-pk::before { position: relative; top: 3px; font-size: 40px; color: rgb(175,209,185);} #entete .boxstats .stats a .st_b1 .icon-opaline { display: inline-block; padding: 5px 0 0 25px; width: 45%; text-align: left;} #entete .boxstats .stats a .st_b1 .icon-opaline::before { position: relative; top: 3px; font-size: 38px; color: rgb(136,196,200);} #entete .boxstats .stats a .st_b1 .icon-jetons { display: inline-block; padding-top: 5px; width: 45%; text-align: left;} #entete .boxstats .stats a .st_b1 .icon-jetons::before { position: relative; top: 5px; font-size: 42px; color: rgb(208,200,145);} #entete .boxstats .stats a .icon-expe { width: 60%; text-align: left;} #entete .boxstats .stats a .icon-expe::before { position: relative; top: -1px; margin-right: 15px; font-size: 40px; color: rgb(149,191,232);} #entete .boxstats .logo { width: 12%; height: 100%;} #entete .boxstats .logo a { display: inline-block; padding: 5px 0; height: 100%; box-sizing: border-box;} #entete .boxstats .logo a img { margin-right: 20px; height: 100%;} #entete .boxstats .logo2 { width: 8%; height: 100%;} #entete .boxstats .logo2 a { display: inline-block; padding: 15px 0; height: 100%; box-sizing: border-box;} #entete .boxstats .logo2 a img { width: 90%;} #entete .icon-achat { position: relative; box-sizing: border-box; width: 8%; font-size: 3.8em;} #entete .icon-achat::before { margin: 30px 0 0 10px; color: rgb(218,184,150);} #entete .nbachat { position: absolute; top: 14px; right: -9px; width: 40px; height: 40px; font-family: sans-serif; font-size: .5em; font-weight: bold; color: rgb(250,250,250); line-height: 40px; text-align: center; background-color: rgb(61,163,214); border-radius: 50%;} #entete .boxstats .menu { width: 12%; height: 100px;} #entete .boxstats .menu a { display: inline-block; padding: 20px 0; height: 100%; box-sizing: border-box;} #entete .boxstats .menu .icon::before { margin: 0 25px 0 20px; font-size: 80px;} #entete .boxstats .menu .icon:hover {color: rgb(200,200,200);} #entete #panier { position: absolute; top: 115px; box-sizing: border-box; width: 100vw; height: 0px; background-color: rgba(0,0,0,0); z-index: -1; transition: background 0.8s linear;} #entete #panier.trans { transition: height 0s linear 0.8s, background 0.8s linear;} #entete #panier .contenu { position: relative; top: -10000px; padding-top: 85px; width: 100%; background-color: rgb(230,224,217); box-shadow: 0px 5px 20px 0px rgba(0,0,0,.78); overflow: hidden; transition: top .8s ease;} #entete #panier .contenu .titre { padding: 5px 0; font-family: "Arial Narrow", sans-serif; font-size: 3.5em; color: rgb(0,0,0); text-align: center; font-weight: bold; border-bottom: 1px solid rgb(0,0,0); background-color: rgb(223,184,138);} #entete #panier .contenu .noprod { padding: 50px; text-align: center;} #entete #panier .contenu .noprod img { width: 45%;} #entete #panier .contenu .rayon { margin: 0 50px 0 20px; padding: 50px 0 5px 20px; font-family: 'Lato', sans-serif; font-size: 2.1em; color: rgb(135,115,91); font-weight: bold; text-transform: capitalize; border-bottom: 2px solid rgb(86,59,27);} #entete #panier .contenu .produits { padding: 50px 10px 50px 30px;} #entete #panier .contenu .produits .produit { display: flex; margin-top: 20px; align-items: center;} #entete #panier .contenu .produits .produit .prod_img { width: 15%;} #entete #panier .contenu .produits .produit .prod_img img { width: 100%; border-radius: 10%; box-shadow: 4px 4px rgb(191 186 181);} #entete #panier .contenu .produits .produit .prod_desc { width: 42%; box-sizing: border-box; padding: 0 20px; font-family: arial;} #entete #panier .contenu .produits .produit .prod_desc .l1 { font-size: 2em; font-weight: bold; color: rgb(88,73,55);} #entete #panier .contenu .produits .produit .prod_desc .l2 { padding-top: 10px; color: rgb(108,105,100); font-size: 1.6em; font-style: italic;} #entete #panier .contenu .produits .produit .prod_desc .l3 { padding-top: 10px; min-height: 33px; color: rgb(157,140,120); font-size: 1.6em;} #entete #panier .contenu .produits .produit .prod_quantite { width: 20%; align-self: flex-start;} #entete #panier .contenu .produits .produit .prod_quantite p { font-size: 2em; text-align: center; color: rgb(108,105,100); font-weight: bold;} #entete #panier .contenu .produits .produit .prod_quantite p .icon::before { margin: 0 15px; font-size: 1.3em; color: rgb(169,141,108);} #entete #panier .contenu .produits .produit .prod_quantite p .icon.off { opacity: 0.5;} #entete #panier .contenu .produits .produit .prod_quantite p .num { position: relative; top: -2px;} #entete #panier .contenu .produits .produit .prod_quantite .l1 { height: 55px; font-size: 1.8em;} #entete #panier .contenu .produits .produit .prod_quantite .l2 { min-height: 44px;} #entete #panier .contenu .produits .produit .prod_prix { width: 15%; font-size: 1.8em; align-self: flex-start;} #entete #panier .contenu .produits .produit .prod_prix p { font-size: 1.1em; font-weight: bold; text-align: left; color: rgb(66,53,37);} #entete #panier .contenu .produits .produit .prod_prix p span { padding-left: 6px; font-size: 0.85em;} #entete #panier .contenu .produits .produit .prod_prix .l1 { height: 60px; font-size: 1em; color: rgb(108,105,100);} #entete #panier .contenu .produits .produit .prod_delete p { font-size: 2em; text-align: center; color: rgb(145,40,0);} #entete #panier .contenu .produits .produit .prod_delete p::before { margin-left: 15px; font-size: 1.3em;} #entete #panier .contenu .total { margin: 0 50px 0 20px; padding: 20px 55px 50px 0; font-family: 'Lato', sans-serif; font-size: 2.1em; color: rgb(135,115,91); font-weight: bold; text-align: right; border-top: 2px solid rgb(86,59,27);} #entete #panier .contenu .total .span1 { padding-left: 10px; font-family: arial; font-size: 1.05em; color: rgb(66,53,37);} #entete #panier .contenu .total .span2 { padding-left: 6px; font-size: 0.85em;} #entete #panier .contenu .paiement { box-sizing: border-box; margin: 20px 12% 80px; padding: 5px 0; width: 76%; font-family: "Arial Narrow", sans-serif; font-weight: bold; font-size: 3.5em; color: rgb(0,0,0); text-align: center; border: none; border-bottom: 1px solid rgb(0,0,0); background-color: rgb(165,207,172);} #entete .boxtitre { position: relative; top: -2px; display: flex; justify-content: center; width: 100%; height: 40px;} #entete .boxtitre .boxtitreleft { width: 100px; height: 100%; background: url('images/habillage/bordEnteteLeft.png') no-repeat;} #entete .boxtitre .boxtitreright { width: 100px; height: 100%; background: url('images/habillage/bordEnteteRight.png') no-repeat;} #entete .boxtitre .titre { display: flex; min-width: 30%; background-color: rgb(0,0,0);} #entete .boxtitre .titre p { position: relative; top: -10px; padding: 0 10%; width: 100%; height: 100%; font-size: 38px; font-weight: bold; text-align: center; color: rgb(230,230,230); box-sizing: border-box; white-space: nowrap;} .progressbar { position: relative; display: inline-block; width: 75%; height: 24px; background-color: rgb(65,65,65); border-radius: 5px; box-shadow: inset 0 1px 4px rgb(0,0,0), 0 -1px 0 rgb(60,60,60);} .progressbar::before { position: absolute; display: block; height: 25px; content: ''; background-color: rgb(200,200,200); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 3px rgba(0,0,0,0.4), 0 1px 1px rgb(0,0,0); z-index: 1;} .progressbar::after { position: absolute; display: block; height: 25px; content:'////////////'; overflow: hidden; font: bold 120px/80px sans-serif; letter-spacing: -6px; color: rgb(0,0,0); border-radius: 4px; opacity: 0.12; z-index: 2;} .progressbar.gray::before { background: rgb(220,139,169); background: linear-gradient(to bottom, rgb(229,229,229), rgb(176,176,176));} .progressbar .lv { position: absolute; top: -12px; left: -28px; display: block; width: 50px; height: 59px; font-family: arial, sans-serif; font-size: 22px; font-weight: bold; text-align: center; line-height: 59px; color: rgb(4,0,43); background: url('images/habillage/losangeback.png') no-repeat; z-index: 3;} /* -------------------------------------------------Menu------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ .outer-nav { position: absolute; padding: 11% 10px 0 10px; width: 170px; height: 88%; z-index: -1;} .outer-nav.vertical { top: 0; right: 0;} .outer-nav .lienhome { display: block; margin: 0 auto 15px; width: 164px; height: 80px; font-family: Sean, sans-serif; background: url('images/habillage/background/menubg1.jpg') no-repeat; border: 3px solid rgb(115,115,115);} .outer-nav .lienhome .icon { line-height: 100px; text-align: center; text-shadow: 8px 6px 1px rgba(126,117,117,0.7);} .outer-nav .lienhome .icon::before { margin: 0; font-size: 45px; color: rgb(255,250,246);} .outer-nav .lienhome .titre { padding-top: 10px; color: rgb(253,251,248); font-size: 30px; font-weight: bold; text-align: center;} .outer-nav .lienboutique { position: relative; display: block; margin: 0 auto 15px; width: 164px; height: 80px; font-family: Sean, sans-serif; background: url('images/habillage/background/menubg1.jpg') no-repeat; border: 3px solid rgb(104,134,102);} .outer-nav .lienboutique .icon { line-height: 100px; text-align: center; text-shadow: 8px 6px 1px rgba(126,117,117,0.7);} .outer-nav .lienboutique .icon::before { margin: 0; font-size: 52px; color: rgb(118,175,126);} .outer-nav .lienboutique .reste { position: absolute; top: 0; left: 0; margin: 3px; text-align: center; width: 45px; height: 45px; font-weight: bold; font-size: 25px; line-height: 50px; color: rgb(39,26,0); background-color: rgb(118,175,126); border-radius: 50%;} .outer-nav .lienboutique .titre { padding-top: 10px; color: rgb(253,251,248); font-size: 30px; font-weight: bold; text-align: center;} .outer-nav .lienmenu { position: relative; display: block; margin-bottom: 10px; width: 164px; height: 230px; font-family: Sean, sans-serif; border: 3px solid rgb(20,70,25); background: url('images/habillage/background/menubg1.jpg') center top no-repeat;} .outer-nav .lienmenu .icon { padding: 40px 0 20px 20px; text-align: center;} .outer-nav .lienmenu .icon::before { margin: 0; font-size: 100px; color: rgb(255,250,246);} .outer-nav .lienmenu .reste { position: absolute; top: 0; left: 0; margin: 3px; text-align: center; width: 45px; height: 45px; font-weight: bold; font-size: 25px; line-height: 50px; border-radius: 50%;} .outer-nav .lienmenu .titre { padding-top: 20px; font-size: 24px; text-align: center;} .outer-nav .lienmenu.imagine { border: 3px solid rgb(70,55,20);} .outer-nav .lienmenu.imagine .icon { text-shadow: 11px 20px 1px rgba(118,82,6,0.7);} .outer-nav .lienmenu.imagine .reste { color: rgb(39,26,0); background-color: rgb(142,122,83);} .outer-nav .lienmenu.imagine .titre { color: rgb(174,160,131);} .outer-nav .lienmenu.vf { border: 3px solid rgb(70,34,20);} .outer-nav .lienmenu.vf .icon { text-shadow: 11px 20px 1px rgba(118,41,6,0.7);} .outer-nav .lienmenu.vf .reste { color: rgb(39,26,0); background-color: rgb(142,100,83);} .outer-nav .lienmenu.vf .titre { color: rgb(174,144,131);} .outer-nav .lienmenu.puzzle { border: 3px solid rgb(20,63,70);} .outer-nav .lienmenu.puzzle .icon { text-shadow: 11px 20px 1px rgba(6,109,118,0.7);} .outer-nav .lienmenu.puzzle .reste { color: rgb(39,26,0); background-color: rgb(83,136,142);} .outer-nav .lienmenu.puzzle .titre { color: rgb(131,169,174);} .outer-nav .lienmenu.blackbox { border: 3px solid rgb(70,20,20);} .outer-nav .lienmenu.blackbox .icon { text-shadow: 11px 20px 1px rgba(118,6,6,0.7);} .outer-nav .lienmenu.blackbox .reste { color: rgb(39,26,0); background-color: rgb(142,83,83);} .outer-nav .lienmenu.blackbox .titre { color: rgb(174,131,131);} .outer-nav .lienmenu.action { border: 3px solid rgb(20,70,25);} .outer-nav .lienmenu.action .icon { text-shadow: 11px 20px 1px rgba(6,118,39,0.7);} .outer-nav .lienmenu.action .reste { color: rgb(0,39,19); background-color: rgb(83,142,112);} .outer-nav .lienmenu.action .titre { color: rgb(132,174,131);} .outer-nav .lienmenu.douceur { border: 3px solid rgb(70,20,54);} .outer-nav .lienmenu.douceur .icon { text-shadow: 11px 20px 1px rgba(204,135,163,0.7);} .outer-nav .lienmenu.douceur .reste { color: rgb(0,39,19); background-color: rgb(190,141,180);} .outer-nav .lienmenu.douceur .titre { color: rgb(190,128,179);} /* ---------------------------------------------Page principale------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------ */ .separation { position: absolute; bottom: -25px; left: 0; width: 100%; height: 50px; background: url('images/habillage/linesgrunge.png') no-repeat; z-index: 1;} .homeentete { position: relative; display: flex; padding: 20px 0 50px; width: 100%; justify-content: center; flex-wrap: wrap; background-color: rgb(0,0,0);} .homeentete .deco { display: none;} .homeentete .logo { margin-left: 0; width: 18%; transition: width .5s;} .homeentete .logo img { width: 100%;} .homeentete .titre { padding: 20px 0 0 30px; font-family: Hand, sans-serif; font-size: 150px; color: rgb(214,65,65); transition: font-size .5s;} .homeentete .titre::first-letter { color: rgb(255,250,246);} .homeentete .menuPrincipal { display: flex; margin-top: 50px; width: 100%; justify-content: center;} .homeentete .menuPrincipal a { position: relative; display: block; margin: 0 15px; width: 280px; height: 80px; font-family: Sean, sans-serif; font-size: 38px; color: rgb(250,250,250); line-height: 82px; z-index: 2;} .homeentete .menuPrincipal a .nbdef, .homeentete .menuPrincipal a .nbcad, .homeentete .menuPrincipal a .nbmess { position: absolute; top: 17px; left: 15px; display: block; width: 50px; height: 50px; font-size: 23px; color: rgb(245,245,245); line-height: 55px; background-color: rgb(74,128,165); border-radius: 50%;} .homeentete .menuPrincipal a .nbcad { background-color: rgb(72,156,130);} .homeentete .menuPrincipal a .nbmess { left: -40px; background-color: rgb(189,57,53);} .homeentete .une { padding-top: 30px;} .homepromos { position: relative; padding: 100px 0 130px; width: 100%; background-color: rgb(255,227,129);} .homepromos .title { margin-bottom: 30px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(206,87,0); font-weight: bold;} .homepromos .info { margin: 0 8% 80px 8%; padding: 2%; width: 82%; height: 100%; font-size: 35px; color: rgb(25,25,25); background-color: rgb(247,220,164); border-radius: 8px;} .homepromos .promo { margin-bottom: 50px;} .homepromos .promo .promoDet { display: flex; background-color: rgb(0,0,0); justify-content: space-between; font-family: Lato, sans-serif; font-weight: bold; font-size: 35px; color: rgb(240,240,240);} .homepromos .promo .promoDet .icon-cal { padding: 1% 4%; width: 40%; text-align: left;} .homepromos .promo .promoDet .icon-pk { padding: 1% 4%; width: 20%; text-align: right;} .homepromos .promo .promoDet .icon.natteint { color: rgb(236,91,91);} .homepromos .promo .promoDet .icon.natteint::before { color: rgb(212,202,202);} .homepromos .promo .promoDet .achat { padding: 1% 4%; width: 20%; text-align: right; color: rgb(72,14,14); background-color: rgb(226,207,207);} .homepromos .promo .promoDet .download { padding: 1% 4%; width: 20%; text-align: right; background-color: rgb(23,108,95);} .homepromos .promo .promoDet .download a { color: rgb(192,218,220);} .homepromos .promo .promoDet .achat::before { position: relative; top: 3px; margin-right: 30px; font-size: 40px; color: rgb(150,30,30);} .homepromos .promo .promoDet .download a::before { position: relative; top: 3px; margin-right: 30px; font-size: 40px; color: rgb(192,218,220);} .homepromos .promo .affiche { position: relative;} .homepromos .promo .affiche img { box-sizing: border-box; width: 100%; border: 4px solid rgb(0,0,0); border-top: none; vertical-align: middle;} .homepromos .promo .affiche .objectifs { position: absolute; bottom: 30px; right: 30px; display: flex; justify-content: flex-end;} .homepromos .promo .affiche .objectifs p { margin: 0 20px; padding-top: 15px; width: 75px; height: 60px; border-radius: 50%;} .homepromos .promo .affiche .objectifs .icon::before { margin: 0; font-size: 46px;} .homepromos .promo .affiche .objectifs .imagine { color: rgb(51,45,23); background-color: rgb(204,183,115);} .homepromos .promo .affiche .objectifs .vf { color: rgb(41,21,3); background-color: rgb(195,111,61);} .homepromos .promo .affiche .objectifs .puzzle { color: rgb(24,32,37); background-color: rgb(96,141,146);} .homepromos .promo .affiche .objectifs .blackbox { color: rgb(39,26,0); background-color: rgb(142,83,83);} .homepromos .promo .affiche .objectifs .action { color: rgb(0,39,19); background-color: rgb(101,171,135);} .homepromos .promo .affiche .objectifs p.desact { color: rgb(0,0,0,0.25); background-color: rgb(236,236,236,0.25);} .homepromos .promo .listeObj { height: 100%; border-bottom: 4px solid rgb(0,0,0); display: none;} .homepromos .promo .listeObj p { position: relative;} .homepromos .promo .listeObj .soustitre { padding: 1% 4% 2%; width: 92%; font-family: Lato, sans-serif; text-align: left; font-size: 30px; font-weight: bold; color: rgb(240,240,240); background-color: rgb(0,0,0);} .homepromos .promo .listeObj .icon { display: block; padding: 2% 0 2% 5%; width: 96%; font-family: Lato, sans-serif; font-size: 35px; text-align: left; color: rgb(230,230,230); background: linear-gradient(to right, rgb(105,105,105) 10%, rgb(0,0,0));} .homepromos .promo .listeObj .icon:hover { background: linear-gradient(to right, rgb(150,150,150) 10%, rgb(0,0,0));} .homepromos .promo .listeObj .icon::before { margin-right: 50px; font-size: 50px; text-shadow: 8px 8px rgb(0,0,0);} .homepromos .promo .listeObj .icon.valider { background: linear-gradient(to right, rgb(106,156,138) 10%, rgb(0,0,0));} .homepromos .promo .listeObj .icon.imagine::before { color: rgb(206,173,115);} .homepromos .promo .listeObj .icon.vf::before { color: rgb(210,155,130);} .homepromos .promo .listeObj .icon.puzzle::before { color: rgb(157,211,220);} .homepromos .promo .listeObj .icon.blackbox::before { color: rgb(226,184,184);} .homepromos .promo .listeObj .icon.action::before { color: rgb(157,220,188);} .homepromos .promo .listeObj .bonus { padding-left: 25px; font-size: 23px; color: rgb(212,192,192);} .homepromos .separation { background-position: 0 -250px;} .homeoffres { position: relative; padding: 100px 0 130px; width: 100%; background-color: rgb(156,3,29);} .homeoffres .title { margin-bottom: 30px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(247,203,203); font-weight: bold;} .homeoffres .info { margin: 0 5% 80px 5%; padding: 1%; width: 90%; height: 100%; box-sizing: border-box; font-size: 35px; color: rgb(25,25,25); background-color: rgb(210,129,140); border-radius: 8px;} .homeoffres .offre { margin-bottom: 50px;} .homeoffres .offre .offreDet { display: flex; background-color: rgb(0,0,0); justify-content: space-between; font-family: Lato, sans-serif; font-weight: bold; font-size: 35px; color: rgb(240,240,240);} .homeoffres .offre .offreDet.rare { background: url('images/habillage/background/rare.jpg') no-repeat;} .homeoffres .offre .offreDet .rarete { padding: 1% 0; font-family: 'Hand', sans-serif; text-align: center; color: rgb(255,233,128); font-weight: normal;} .homeoffres .offre .offreDet .icon-cal { padding: 1% 1% 1% 4%; width: 38%; text-align: left;} .homeoffres .offre .offreDet .icon-pk { padding: 1% 4%; width: 20%; text-align: right;} .homeoffres .offre .offreDet .icon.natteint { color: rgb(236,91,91);} .homeoffres .offre .offreDet .icon.natteint::before { color: rgb(212,202,202);} .homeoffres .offre .offreDet .achat { padding: 1% 2%; width: 20%; text-align: center; color: rgb(72,14,14); background-color: rgb(250,250,250);} .homeoffres .offre .offreDet .achat::before { position: relative; top: 3px; margin-right: 30px; font-size: 40px; color: rgb(150,30,30);} .homeoffres .offre .offreDet .offreepuise { padding: 1% 2%; width: 25%; text-align: center; color: rgb(238,210,210);} .homeoffres .offre .affiche { position: relative;} .homeoffres .offre .affiche.epuise::after { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-family: Flaticon; content: "\f239"; color: rgba(84,56,56,0.4); font-size: 20em; background-color: rgba(255,255,255,0.55); z-index: 0;} .homeoffres .offre .affiche img { box-sizing: border-box; width: 100%; border: 4px solid rgb(0,0,0); border-top: none; vertical-align: middle;} .homeoffres .offre .affiche .objectifs { position: absolute; bottom: 30px; right: 30px; display: flex; justify-content: flex-end;} .homeoffres .offre .affiche .objectifs p { margin: 0 20px; padding-top: 15px; width: 75px; height: 60px; border-radius: 50%;} .homeoffres .offre .affiche .objectifs .icon::before { margin: 0; font-size: 46px;} .homeoffres .offre .affiche .objectifs .imagine { color: rgb(51,45,23); background-color: rgb(204,183,115);} .homeoffres .offre .affiche .objectifs .vf { color: rgb(41,21,3); background-color: rgb(195,111,61);} .homeoffres .offre .affiche .objectifs .puzzle { color: rgb(24,32,37); background-color: rgb(96,141,146);} .homeoffres .offre .affiche .objectifs .blackbox { color: rgb(39,26,0); background-color: rgb(142,83,83);} .homeoffres .offre .affiche .objectifs .action { color: rgb(0,39,19); background-color: rgb(101,171,135);} .homeoffres .offre .affiche .objectifs .douceur { color: rgb(0,39,19); background-color: rgb(204,135,163);} .homeoffres .offre .affiche .objectifs p.desact { color: rgb(0,0,0,0.25); background-color: rgb(236,236,236,0.25);} .homeoffres .offre .listeObj { height: 100%; border-bottom: 4px solid rgb(0,0,0); display: none;} .homeoffres .offre .listeObj p { position: relative;} .homeoffres .offre .listeObj .soustitre { padding: 1% 4% 2%; width: 92%; font-family: Lato, sans-serif; text-align: left; font-size: 30px; font-weight: bold; color: rgb(240,240,240); background-color: rgb(0,0,0);} .homeoffres .offre .listeObj .icon { display: block; padding: 2% 0 2% 5%; width: 96%; font-family: Lato, sans-serif; font-size: 35px; text-align: left; color: rgb(230,230,230); background: linear-gradient(to right, rgb(105,105,105) 10%, rgb(0,0,0));} .homeoffres .offre .listeObj .icon:hover { background: linear-gradient(to right, rgb(150,150,150) 10%, rgb(0,0,0));} .homeoffres .offre .listeObj .icon::before { margin-right: 50px; font-size: 50px; text-shadow: 8px 8px rgb(0,0,0);} .homeoffres .offre .listeObj .icon.valider { background: linear-gradient(to right, rgb(106,156,138) 10%, rgb(0,0,0));} .homeoffres .offre .listeObj .icon.imagine::before { color: rgb(206,173,115);} .homeoffres .offre .listeObj .icon.vf::before { color: rgb(210,155,130);} .homeoffres .offre .listeObj .icon.puzzle::before { color: rgb(157,211,220);} .homeoffres .offre .listeObj .icon.blackbox::before { color: rgb(226,184,184);} .homeoffres .offre .listeObj .icon.action::before { color: rgb(157,220,188);} .homeoffres .offre .listeObj .bonus { padding-left: 25px; font-size: 23px; color: rgb(212,192,192);} .homeoffres .offre .listeObj .nbessai { padding-left: 30px; font-size: 30px;} .homeoffres .offre .listeObj .dispo { padding-left: 25px; font-size: 25px; color: rgb(173,195,218); font-style: italic;} .homeoffres .offre .listeObj .cpt { display: flex; width: 100%; align-items: center; justify-content: center; flex-wrap: nowrap;} .homeoffres .offre .listeObj .cpt .circle { display: block; margin: 10px; width: 30px; height: 30px; border: 3px solid rgb(232,222,210); border-radius: 50%;} .homeoffres .offre .listeObj .cpt .circle.fill1 { background: linear-gradient(319deg, rgb(204 182 169) 15%, rgb(152,70,22));} .homeoffres .offre .listeObj .cpt .circle.fill2 { background: linear-gradient(319deg, rgb(191 189 207) 15%, rgb(32 8 215));} .homeoffres .separation { background-position: 0 -50px;} .homestatut { position: relative; padding: 100px 8% 180px; width: 84%;} .homestatut .title { margin-bottom: 80px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(195,133,66); font-weight: bold;} .homestatut .argent { display: flex; font-family: Lato, sans-serif; background-color: rgb(238,230,219);} .homestatut .argent p, .homestatut .opalines p { box-sizing: border-box;} .homestatut .argent .icon-pk { width: 30%; font-size: 30px; color: rgb(128,128,128); font-weight: bold; text-align: left; border-radius: 10px 0 0 0;} .homestatut .argent .contenu { padding: 10px 50px 10px 0; width: 55%; color: rgb(90,80,65); text-align: right; font-size: 35px; font-weight: bold;} .homestatut .argent .boutique { position: relative; width: 15%; background-color: rgb(198,224,221); border-radius: 0 10px 0 0;} .homestatut .argent .boutique .icon-achat { display: block; width: 100%; font-size: 50px; color: rgb(53,82,73);} .homestatut .argent .boutique .nbprod { position: absolute; top: -25px; right: -25px; display: block; width: 60px; height: 60px; line-height: 65px; font-family: Sean, sans-serif; font-size: 32px; font-weight: bold; color: rgb(219,243,235); background-color: rgb(72,156,130); border-radius: 50%;} .homestatut .argent .icon-pk::before { position: relative; top: 5px; margin: 0 30px 0 20px; font-size: 50px; color: rgb(61,130,79);} .homestatut .argent .icon-achat::before { margin: 0;} .homestatut .opalines { display: flex; flex-flow: row wrap; font-family: Lato, sans-serif; border-top: 1px solid rgb(119,115,108);} .homestatut .opalines .icon-opaline { width: 30%; font-size: 30px; color: rgb(128,128,128); font-weight: bold; text-align: left; background-color: rgb(238,230,219);} .homestatut .opalines .contenu { padding: 10px 50px 10px 0; width: 55%; color: rgb(90,80,65); text-align: right; font-size: 35px; font-weight: bold; background-color: rgb(238,230,219);} .homestatut .opalines .echange { position: relative; width: 15%; background-color: rgb(53,82,73);} .homestatut .opalines .echange .icon-echange { display: block; width: 100%; font-size: 50px; color: rgb(198,224,221);} .homestatut .opalines .icon-opaline::before { position: relative; top: 5px; margin: 0 30px 0 20px; font-size: 50px; color: rgb(65,108,121);} .homestatut .opalines .icon-echange::before { margin: 0;} .homestatut .opalines .jauge { display: flex; padding-top: 20px; align-items: center; width: 100%; height: 80px; background-color: transparent; border-top: 1px solid rgb(119,115,108);} .homestatut .opalines .jauge p { padding: 5px 10px; margin-top: 5px; width: 21%;} .homestatut .opalines .jauge p span { display: inline-block; width: 100%; height: 25px; border-radius: 8px; border: 1px solid black; background: linear-gradient(to bottom,rgb(255,255,255) 20%,rgb(190,190,190));} .homestatut .opalines .jauge p span.full { background: linear-gradient(to bottom,rgb(15,135,144) 20%,rgb(65, 85, 86));} .homestatut .opalines .jauge .icon-splash { position: relative; top: -5px; padding: 0 10px 0 30px; width: 24%; font-size: 30px; color: rgb(128,128,128); text-align: left;} .homestatut .opalines .jauge .icon-splash::before { position: relative; top: 1px; color: rgb(15,135,144);} .homestatut .opalines .jauge .icon-opaline { position: relative; padding-left: 20px; width: 13%; background-color: transparent;} .homestatut .opalines .jauge .icon-opaline::before { position: relative; top: -5px; font-size: 45px;} .homestatut .opalines .jauge .icon-opaline em { position: absolute; top: -3px; left: 22px; font-weight: bold; font-size: 35px;} .homestatut .opalines .jauge .ready { animation: bounce 0.35s ease infinite alternate;} .homestatut .opalines .jauge .ready::before { text-shadow: 0 0 20px rgb(255,211,0);} .homestatut .progression { display: flex; margin: 30px 0 50px 0; height: 1000px; font-family: Lato, sans-serif; align-items: stretch;} .homestatut .progression .level { padding: 0 1%; width: 8%; height: 100%;} .homestatut .progression .level .txt { height: 7%; font-family: Hand, sans-serif; letter-spacing: 5px; font-size: 35px; font-weight: bold; line-height: 2; color: rgb(60,50,53);} .homestatut .progression .level .bar { position: relative; width: 100%; height: 93%; background-color: rgb(255,252,247); border-radius: 5px; box-shadow: inset 0 0 8px rgb(30,30,30);} .homestatut .progression .level .bar::before { position: absolute; bottom: 0; display: block; width: 100%; content: ''; background-color: rgb(200,200,200); border-radius: 10px 10px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 3px rgba(0,0,0,0.4), 0 1px 1px rgb(0,0,0); z-index: 1;} .homestatut .progression .level .bar::after { position: absolute; bottom: 0; display: block; width: 100%; content:'/////////////////////////'; writing-mode: vertical-lr; overflow: hidden; font: bold 120px/80px sans-serif; color: rgb(0,0,0); border-radius: 10px 10px 0 0; opacity: 0.12; z-index: 2;} .homestatut .progression .level .bar.pink::before { background: rgb(220,139,169); background: linear-gradient(to bottom, rgb(220,139,169), rgb(154,77,106));} .homestatut .progression .niveau { width: 75%; height: 100%;} .homestatut .progression .niveau .txt { height: 7%; font-family: Sean, sans-serif; font-size: 40px; color: rgb(189,0,60); line-height: 2;} .homestatut .progression .niveau .txt span { color: rgb(60,50,53);} .homestatut .progression .niveau .avatar { height: 86%; text-align: right;} .homestatut .progression .niveau .avatar img { width: 100%;} .homestatut .progression .prenom { padding: 12% 0 0 2.5%; width: 12.5%; background-color: rgb(238,230,219); border-radius: 0 0 10px 0;} .homestatut .progression .prenom p { writing-mode: vertical-lr; text-orientation: upright; font-family: Hand, sans-serif; font-size: 70px;} .homestatut .jetons { display: flex; font-family: Lato, sans-serif; background-color: rgb(238,230,219);} .homestatut .jetons p{ box-sizing: border-box;} .homestatut .jetons .icon-jetons { width: 75%; font-size: 30px; color: rgb(128,128,128); font-weight: bold; text-align: left; border-radius: 10px 0 0 0;} .homestatut .jetons .contenu { padding: 10px 50px 10px 0; width: 25%; color: rgb(90,80,65); text-align: right; font-size: 35px; font-weight: bold;} .homestatut .jetons .icon-jetons::before { position: relative; top: 5px; margin: 0 30px 0 20px; font-size: 55px; color: rgb(140,118,10);} .homestatut .separation { background-position: 0 -100px;} .hometenues { position: relative; padding: 100px 0 180px 0; width: 100%; background-color: rgb(222,159,178);} .hometenues .title { margin-bottom: 80px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(138,62,85); font-weight: bold;} .hometenues .info { margin: 0 8% 80px 8%; padding: 2%; width: 82%; height: 100%; font-size: 35px; color: rgb(25,25,25); background-color: rgb(245,211,221); border-radius: 8px;} .hometenues .listeTenues { display: flex; width: 100vw; flex-wrap: wrap; justify-content: center;} .hometenues .listeTenues p { position: relative; margin: 8px; width: 210px; height: 210px; border-radius: 50%; border: 7px solid rgb(144,105,117); box-shadow: inset 0 0 10px 2px rgb(138,62,85); background-size: cover; background-blend-mode: saturation;} .hometenues .listeTenues p .icon-star { position: absolute; font-size: 34px; color: rgba(255,213,76,0.9); transform-origin: center; text-shadow: 0 0 3px rgb(0,0,0);} .hometenues .listeTenues p .icon-star::before { margin: 0;} .hometenues .listeTenues p .icon-star.gray {color: rgba(228,228,228,0.75); text-shadow: none;} .hometenues .listeTenues p .st1 { left: 25px; top: -12px; transform: rotate(-25deg);} .hometenues .listeTenues p .st2 { left: 90px; top: -27px;} .hometenues .listeTenues p .st3 { right: 25px; top: -12px; transform: rotate(25deg);} .hometenues .listeTenues p .badge { position: absolute; top: 32%; left: 32%; width: 70px; height: 70px; font-family: emoji, sans-serif; font-size: 50px; line-height: 70px; font-weight: bold; color: rgb(0,0,0); background-color: rgba(177,0,0,85%); border-radius: 50%; border: 4px solid rgba(0,0,0,82%); animation: redflash 1.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate;} .hometenues .listeTenues .noel { background-image: url('images/bonus/costumes/badgenoel.jpg');} .hometenues .listeTenues .noel.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgenoel.jpg');} .hometenues .listeTenues .maid { background-image: url('images/bonus/costumes/badgemaid.jpg');} .hometenues .listeTenues .maid.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgemaid.jpg');} .hometenues .listeTenues .nurse { background-image: url('images/bonus/costumes/badgenurse.jpg');} .hometenues .listeTenues .nurse.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgenurse.jpg');} .hometenues .listeTenues .witch { background-image: url('images/bonus/costumes/badgewitch.jpg');} .hometenues .listeTenues .witch.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgewitch.jpg');} .hometenues .listeTenues .police { background-image: url('images/bonus/costumes/badgepolice.jpg');} .hometenues .listeTenues .police.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgepolice.jpg');} .hometenues .listeTenues .secretary { background-image: url('images/bonus/costumes/badgesecretary.jpg');} .hometenues .listeTenues .secretary.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgesecretary.jpg');} .hometenues .listeTenues .school { background-image: url('images/bonus/costumes/badgeschool.jpg');} .hometenues .listeTenues .school.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgeschool.jpg');} .hometenues .listeTenues .cheer { background-image: url('images/bonus/costumes/badgecheer.jpg');} .hometenues .listeTenues .cheer.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgecheer.jpg');} .hometenues .listeTenues .under { background-image: url('images/bonus/costumes/badgeunder.jpg');} .hometenues .listeTenues .under.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgeunder.jpg');} .hometenues .listeTenues .bunny { background-image: url('images/bonus/costumes/badgebunny.jpg');} .hometenues .listeTenues .bunny.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgebunny.jpg');} .hometenues .listeTenues .cat { background-image: url('images/bonus/costumes/badgecat.jpg');} .hometenues .listeTenues .cat.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgecat.jpg');} .hometenues .listeTenues .sultane { background-image: url('images/bonus/costumes/badgesultane.jpg');} .hometenues .listeTenues .sultane.gray { background-image: linear-gradient(black, black), url('images/bonus/costumes/badgesultane.jpg');} .hometenues .separation { background-position: 0 -300px;} .homeachats { position: relative; padding: 100px 0 180px 0; width: 100%; background-color: rgb(62,19,48);} .homeachats .title { margin-bottom: 80px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(209,185,200); font-weight: bold;} .homeachats .listeachats { margin: 0 auto; width: 900px; overflow-y: auto;} .homeachats .listeachats .prod { display: flex; box-sizing: border-box; margin: 30px 0; padding: 30px 0; align-items: start; border-radius: 20px; background-color: rgb(224,224,224);} .homeachats .listeachats .prod.offres { min-height: 334px; align-items: end; background-repeat: no-repeat; background-size: cover; border: 15px solid rgb(224,224,224);} .homeachats .listeachats .prod .img { position: relative; width: 40%; text-align: center;} .homeachats .listeachats .prod .img.icon-achat { font-size: 55px;} .homeachats .listeachats .prod .img img { border-radius: 15px; width: 300px;} .homeachats .listeachats .prod.tenue .img img { height: 300px; border-radius: 50%; border: 7px solid rgb(144,105,117); box-shadow: inset 0 0 10px 2px rgb(138 62 85);} .homeachats .listeachats .prod .details { box-sizing: border-box; padding-right: 15px; width: 60%; font-family: 'Lato'; text-align: left; color: rgb(50,50,50);} .homeachats .listeachats .prod .details .nom { display: inline-block; margin-bottom: 5px; width: 440px; font-size: 2.6em; font-weight: bold;} .homeachats .listeachats .prod .details .lastused { display: inline-block; margin-bottom: 11px; padding: 2px 5px; font-size: 1.5em; color: rgb(255,255,255); background-color: rgb(168,42,125)} .homeachats .listeachats .prod .details .desc { height: 155px; font-size: 1.7em; font-style: italic;} .homeachats .listeachats .prod .details .utilise { padding: 10px 0; width: 100%; font-size: 2.2em; font-weight: bold; text-align: center; background-color: rgb(255,255,255); border: none; border-radius: 15px; box-shadow:rgba(62,1,48,0.6) 0px 1px 4px;} .homeachats .listeachats .lienboutique { box-sizing: border-box; margin-top: 80px; padding: 30px 0; align-items: center; background-color: rgb(196,180,190); border-radius: 20px;} .homeachats .listeachats .lienboutique a { font-family: Lato, sans-serif; color: rgb(62,19,48); font-size: 2.7em; font-weight: bold;} .homeachats .listeachats .lienboutique a::before { margin-right: 50px; font-size: 1.2em;} .homeachats .separation { background-position: 0 -350px;} .homedefis { position: relative; padding: 100px 8% 180px; width: 84%; background-color: rgb(55,55,55);} .homedefis .title { margin-bottom: 80px; width: 100%; font-family: Beyond; font-size: 65px; color: rgb(189,199,199); font-weight: bold;} .homedefis .defis { display: flex; flex-wrap: wrap; justify-content: space-around;} .homedefis .defis .defi { position: relative; margin-top: 20px; padding: 0;} .homedefis .defis .defi .lien { display: block; outline: none;} .homedefis .defis .defi .lien .titre { position: absolute; top: 0; display: block; padding: 15px 0 20px 0; width: 100%; font-family: Hand, sans-serif; font-size: 32px; font-weight: bold; color: rgb(216,216,216); background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);} .homedefis .defis .defi .lien .nb { position: absolute; bottom: 20px; left: 15px; display: block; width: 70px; height: 70px; line-height: 75px; font-family: Sean, sans-serif; font-size: 36px; font-weight: bold; border-radius: 50%;} .homedefis .defis .defi .lien .nb.imagine { color: rgb(39,26,0); background-color: rgb(142,122,83);} .homedefis .defis .defi .lien .nb.vf { color: rgb(39,26,0); background-color: rgb(142,100,83);} .homedefis .defis .defi .lien .nb.puzzle { color: rgb(39,26,0); background-color: rgb(83,136,142);} .homedefis .defis .defi .lien .nb.blackbox { color: rgb(39,26,0); background-color: rgb(142,83,83);} .homedefis .defis .defi .lien .nb.action { color: rgb(0,39,19); background-color: rgb(83,142,112);} .homedefis .defis .defi .lien .nb.douceur { color: rgb(0,39,19); background-color: rgb(204,135,163);} .homedefis .defis .defi .lien .bg { display: block;} .homedefis .defis .defi .lien .bg img { width: 100%;} @keyframes bounce{ from {top: 8px;} to {top: -8px;} } @keyframes redflash{ from { background-color: rgba(177,0,0,85%);} to { background-color: rgba(255,255,255,55%);} } /* ----------------------------------------------Page vide----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ .nodefi { height: 100vh;} .nodefi p { padding-top: 30%; text-align: center;} /* --------------------------------------------Confirmation---------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ .confirmation { position: fixed; top: 0; padding-top: 40%; width: 100vw; height: 100vh; text-align: center; z-index: 10;} #confcontent { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #confcontent .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0;} #confcontent .desc { padding-top: 30px; font-size: 35px; font-weight: bold;} #confcontent .desc span { padding-left: 30px;} #confcontent .desc .soustitre { padding: 0; font-family: Hand, sans-serif; font-size: 45px; font-weight: bold; color: rgb(154,3,29); text-transform: capitalize; line-height: 65px;} #confcontent .descjs { position: relative; padding: 30px 20px; width: 100%; font-size: 32px; font-style: italic; color: rgb(80,80,80); box-sizing: border-box;} #confcontent .descjs .icon-star { position: absolute; font-size: 50px; color: rgba(255,213,76,0.9); transform-origin: center; text-shadow: 0 0 3px rgb(0,0,0); z-index: 1;} #confcontent .descjs .icon-star.gray {color: rgba(228,228,228,0.75);} #confcontent .descjs .st1 { left: 260px; top: 26px; transform: rotate(-25deg);} #confcontent .descjs .st2 { left: 370px; top: -5px;} #confcontent .descjs .st3 { right: 260px; top: 26px; transform: rotate(25deg);} #confcontent .descjs .icon-star::before { margin: 0;} #confcontent .descjs img { width: 90%; border: 1px solid rgb(100,100,100);} #confcontent .descjs img.badge { position: relative; width: 400px; height: 400px; border-radius: 50%; border: 7px solid rgb(144,105,117); box-shadow: inset 0 0 10px 2px rgb(138,62,85);} #confcontent .descjs .produit { display: flex; margin-top: 20px; align-items: center; text-align :left;} #confcontent .descjs .produit .prod_img { width: 14%;} #confcontent .descjs .produit .prod_img img { width: 100%; border-radius: 10%; box-shadow: 4px 4px rgb(191 186 181);} #confcontent .descjs .produit .prod_desc { width: 65%; box-sizing: border-box; padding-left: 30px; font-family: arial;} #confcontent .descjs .produit .prod_desc .l1 { font-size: .9em; font-weight: bold; color: rgb(88,73,55);} #confcontent .descjs .produit .prod_desc .l2 { padding-top: 10px; color: rgb(108,105,100); font-size: .9em; font-style: italic;} #confcontent .descjs .produit .prod_quantite { width: 20%;} #confcontent .descjs .produit .prod_quantite p { font-size: 1em; text-align: center; color: rgb(108,105,100); font-weight: bold;} #confcontent input[type="submit"] { display: block; margin: 30px auto 0; padding: 10px 35px; min-width: 40%; font-size: 40px; color: rgb(255,255,255); border-radius: 30px; background-color: rgb(134,115,115); border: none; cursor: pointer;} #conffonds { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #conffonds .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(226,193,193); background-color: rgb(156,3,29); border-radius: 20px 20px 0 0;} #conffonds .desc { padding-top: 30px; font-size: 35px; font-weight: bold;} #conffonds .desc span { padding-left: 30px; color: rgb(136,0,0);} #conffonds .descjs { padding: 30px 20px; width: 100%; font-size: 32px; font-style: italic; color: rgb(80,80,80); box-sizing: border-box;} #conffonds .descjs img { width: 90%; border: 1px solid rgb(100,100,100);} #confutilise { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #confutilise .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0;} #confutilise .desc { padding-top: 30px; font-size: 35px; font-weight: bold;} #confutilise .desc span { display: block; margin-top: 30px; font-family: Hand;} #confutilise input[type="submit"] { display: block; margin: 30px auto 0; padding: 10px 35px; min-width: 40%; font-size: 40px; color: rgb(255,255,255); border-radius: 30px; background-color: rgb(134,115,115); border: none; cursor: pointer;} #confok { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #confok .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0;} #confok .titre::before { margin-right: 25px;} #confok .titredefi { padding: 15px 0; font-family: Beyond; font-size: 50px; line-height: 70px; color: rgb(0,0,0); background-color: rgb(193,214,220);} #confok .desc { padding: 2% 0; font-size: 35px; font-weight: bold;} #confok .desc span { display: block; padding: 2px 0;} #confok .descsup { position: relative; padding: 30px 0 10px 130px; min-height: 125px; font-size: 32px; font-style: italic; color: rgb(80,80,80); box-sizing: border-box;} #confok .descsup.panier { padding: 30px 10px; min-height: 125px; font-size: 32px; font-style: italic; color: rgb(80,80,80); box-sizing: border-box;} #confok .descsup span { display: block; padding: 5px 0 5px 0; width: 100%; text-align: left; font-size: 30px; line-height: 50px; box-sizing: border-box;} #confok .descsup .rating { position: absolute; left: 0; display: flex; justify-content: center;} #confok .descsup .rating .icon { width: 100px; font-size: 50px; text-align: center; line-height: 70px; background: linear-gradient(-75deg, rgb(0,0,0), 4%, rgb(230,173,11)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} #confrating { display: flex; padding: 10px 5px 0 0; justify-content: center; align-items: center;} #confrating .votez { margin: 2px 35px; padding: 0px 15px; color: rgb(33,41,30); font-size: 1.9em; font-weight: bold; background-color: rgb(224,161,125); border-radius: 10px; animation: flash 1.2s cubic-bezier(1,0.26,1,1.01) infinite alternate;} #confrating input[type="radio"], #confrating input[type="submit"] { position: absolute; left: -100%;} #confrating label { padding: 0 1%; width: 55px; font-size: 55px; line-height: 60px; cursor: pointer; color: rgb(180,180,180); -webkit-tap-highlight-color: transparent;} #confrating .zero { display: none;} #confrating .icon { color: rgb(3,122,156);} #confrating input[type="radio"]:checked ~ .icon-star { color: rgb(164,161,161);} #confrating .icon-fleche-droite { padding-left: 8%; color: rgb(3,122,156);} #conferreurs { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #conferreurs .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 52px; font-weight: bold; color: rgb(226,193,193); background-color: rgb(156,3,29); border-radius: 20px 20px 0 0;} #conferreurs .titre::before { margin-right: 25px; font-size: 55px;} #conferreurs .desc { padding-top: 30px; font-size: 33px; font-weight: bold; color: rgb(43,1,1);} #confechange, #confconversion { margin: auto; padding-bottom: 30px; width: 80%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #confechange .titre, #confconversion .titre { padding: 30px 0; height: 100%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0;} #confechange .desc, #confconversion .desc { padding-top: 30px; font-size: 35px; font-weight: bold;} #confechange .descsup, #confconversion .descsup { padding: 30px 20px; width: 100%; font-size: 32px; font-style: italic; color: rgb(80,80,80); box-sizing: border-box;} #confechange .descsup img, #confconversion .descsup img { width: 90%; border: 1px solid rgb(100,100,100);} #confechange input[type="submit"], #confconversion input[type="submit"] { display: block; margin: 30px auto 0; padding: 10px; width: 42%; font-size: 40px; color: rgb(255,255,255); border-radius: 30px; background-color: rgb(115,126,134); border: none; cursor: pointer;} #confechange input[type="submit"]:disabled, #confconversion input[type="submit"]:disabled { width: 60%; font-size: 38px; background-color: rgb(151,77,77);} #conftenue { margin: auto; padding-bottom: 30px; width: 90%; height: 85vh; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30); box-sizing: border-box; overflow: hidden;} #conftenue .titre { padding: 30px 0; height: 10%; font-family: arial, sans-serif; font-size: 55px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0; box-sizing: border-box;} #conftenue .etat { padding: 2px 0; font-family: Lato, sans-serif; font-size: 30px; font-weight: bold; color: rgb(3,122,156); background-color: rgb(193,214,220); border-bottom: 10px solid rgb(3,122,156);} #conftenue .tenue { display: flex; padding-top: 5%; width: 100%; height: 90%; align-items: center; flex-wrap: wrap; font-family: Lato, sans-serif; box-sizing: border-box; overflow: scroll;} #conftenue .tenueimg { width: 50%;} #conftenue .tenueimg .td-titre { margin-bottom: 5%; font-family: Hand, sans-serif; font-size: 50px; font-weight: bold; color: rgb(154,3,29); text-transform: capitalize;} #conftenue .tenueimg .td-titre.gray { color: rgb(100,100,100);} #conftenue .tenueimg .td-stars { margin-bottom: 23%; font-size: 45px; color: rgb(210,210,210);} #conftenue .tenueimg .td-stars .icon-star { margin: 0 10px;} #conftenue .tenueimg .td-stars .icon-star.act { color: rgb(202,150,5); text-shadow: 0 0 0px rgb(51,47,36);} #conftenue .tenueimg .td-img { padding-bottom: 30px; width: 450px; min-height: 650px;} #conftenue .tenueimg .td-img img { width: 100%;} #conftenue .tenuedesc { margin: 0 3%; width: 44%; text-align: left;} #conftenue .tenuedesc .td-histoire { margin: 5% 0 15% 0; font-size: 30px; font-style: italic; text-align: justify; color: rgb(1,69,88);} #conftenue .tenuedesc .td-titre { margin: 15% 0 5% 0; font-size: 32px; font-weight: bold; color: rgb(3,122,156);} #conftenue .tenuedesc .td-desc { margin: 5% 0 8% 0; font-size: 26px; font-style: italic; text-align: justify; color: rgb(80,80,80);} #conftenue .tenuedesc .icon, #conftenue .tenuedesc .icon2 { margin: 4% 0; font-size: 30px; color: rgb(130,130,130); font-weight: bold;} #conftenue .tenuedesc .icon.null, #conftenue .tenuedesc .icon2.null { color: rgb(150,150,150); font-weight: normal;} #conftenue .tenuedesc .icon span, #conftenue .tenuedesc .icon2 span { margin-left: 30px; font-size: 26px; font-weight: normal;} #conftenue .tenuedesc .icon::before, #conftenue .tenuedesc .icon2::before { font-size: 30px; color: rgb(80,80,80);} #conftenue .tenuedesc .icon-cal { margin: 8% 0 4% 0; font-weight: normal;} #conftenue .tenuedesc .icon-compteur { margin: 4% 0 8% 0; font-weight: normal;} #conftenue .tenuedesc .icon-citation-g { margin: 0 0 0 15px;} #conftenue .tenuedesc .icon-lvl { color: rgb(20,20,20);} #conftenue .tenuedesc .icon-lvl span { color: rgb(130,130,130);} #conftenue .tenuedesc .icon-citation-d::before, #conftenue .tenuedesc .icon-citation-g::before { color: rgb(3,122,156);} #conftenue .tenuedesc .td-nvx { width: 104%; box-sizing: border-box; background-color: rgb(255,255,255); border-radius: 10px;} #conftenue .tenuedesc .td-nvx .td-nv { display: flex; padding: 0 2%; align-items: center;} #conftenue .tenuedesc .td-nvx .td-nv.select { border: 2px solid rgb(154,3,29);} #conftenue .tenuedesc .td-nvx .td-nv.parite { background-color: rgb(235,235,235);} #conftenue .tenuedesc .td-nvx .td-nv .icon { margin: 2% 0; width: 30%; font-size: 29px; color: rgb(110,110,110);} #conftenue .tenuedesc .td-nvx .td-nv.select .icon { color: rgb(154,3,29);} #conftenue .tenuedesc .td-nvx .td-nv .td-nvdesc { display: flex; flex-wrap: wrap; align-items: center;} #conftenue .tenuedesc .td-nvx .td-nv .td-nvdesc .icon, #conftenue .tenuedesc .td-nv .icon2 { width: 50%; font-size: 25px; color: rgb(130,130,130);} #conftenue .tenuedesc .td-nvx .td-nv.select .td-nvdesc .icon, #conftenue .tenuedesc .td-nv.select .icon2 { width: 50%; font-size: 25px; color: rgb(50,50,50);} #conftenue .tenuedesc .td-nvx .td-nv.select .td-nvdesc .icon::before, #conftenue .tenuedesc .td-nv.select .icon2::before { color: rgb(50,50,50);} #conftenue .tenuedesc .td-nvx .td-nv .td-nvdesc .icon::before, #conftenue .tenuedesc .td-nv .icon2::before { font-size: 25px;} #conftenue .tenuedesc .td-nvx .td-nv .td-nvdesc .icon.null, #conftenue .tenuedesc .td-nv .icon2.null { color: rgb(150,150,150); font-weight: normal;} #conftenue .tenueform { position: relative; top: -50px; padding: 0 5%; width: 100%; text-align: left;} #conftenue .tenueform .td-titre { margin: 0 0 5% 0; font-size: 32px; font-weight: bold; color: rgb(3,122,156);} #conftenue .tenueform .td-desc { margin: 6% 0 2% 0; font-size: 26px; font-style: italic; text-align: justify; color: rgb(80,80,80);} #conftenue .tenueform .td-nv { display: flex; padding: 0 2%;} #conftenue .tenueform .icon { margin: 4% 0; width: 25%; font-size: 30px; color: rgb(50,50,50); font-weight: bold; white-space: nowrap;} #conftenue .tenueform .icon.null { color: rgb(150,150,150); font-weight: normal;} #conftenue .tenueform .icon span { margin-left: 30px; font-size: 26px; font-weight: normal;} #conftenue .tenueform .icon::before { font-size: 30px; color: rgb(80,80,80);} #conftenue .tenueform .td-bar { margin: 4% 0; width: 70%; font-size: 28px; color: rgb(130,130,130); white-space: nowrap;} #conftenue .tenueform .td-bar .progressbar { position: relative; display: inline-block; margin: 0 30px 0 0; width: 85%; height: 24px; background-color: rgb(215,215,215); border-radius: 5px; box-shadow: inset 0 1px 4px rgb(0,0,0), 0 -1px 0 rgb(60,60,60);} #conftenue .tenueform .td-bar .progressbar::before { position: absolute; display: block; width: 70%; height: 23px; content: '??'; font-size: 21px; font-weight: bold; color: rgb(0,0,0); text-align: center; background-color: rgb(226,200,140); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 3px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.5); opacity: 0.8; z-index: 1;} #conftenue .tenueform .td-bar .progressbar::after { position: absolute; display: block; width: 70%; height: 23px; content:'//////////////////////////////////'; overflow: hidden; font: bold 120px/80px sans-serif; letter-spacing: -8px; color: rgb(128,88,0); border-radius: 4px; opacity: 0.15; z-index: 2;} #conftenue .tenueform .td-bar strong { padding-left: 20px;} #conftenue .tenueform form { text-align: center;} #conftenue .tenueform form button[type="button"] { margin-top: 15%; padding: 10px 10px 10px 70px; width: 95%; font-family: Lato, sans-serif; font-size: 30px; font-weight: bold; color: rgb(38,64,46); background-color: rgb(203,228,210); border-radius: 40px; border: 6px solid rgb(3,156,50); box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent;} #conftenue .tenueform form button[type="button"] { position: relative; margin-top: 5%;} #conftenue .tenueform form button[type="button"]::before { position: absolute; top: -1px; left: -1px; padding: 10px 20px; height: 104%; font-family: Flaticon; content: '\f29b'; color: rgb(210 228 215); background-color: rgb(3,156,50); border-radius: 40px 0 0 40px; box-sizing: border-box;} #conftenue .tenueform form.evolution button[type="button"]::before { content: '\f204';} #conftenue .tenueform form button[type="button"].nonactive { color: rgb(160,160,160); background-color: rgb(250,250,250); border: 6px solid rgb(160,160,160);} #conftenue .tenueform form button[type="button"].nonactive::before { color: rgb(250,250,250); background-color: rgb(160,160,160);} #conftenue .tenueform form button[type="button"] .icon { font-size: 30px; font-weight: bold; color: rgb(38,64,46);} #conftenue .tenueform form button[type="button"] .icon::before { color: rgb(38,64,46);} #conftenue .tenueform form button[type="button"].nonactive .icon { color: rgb(160,160,160);} #conftenue .tenueform form button[type="button"].nonactive .icon::before { color: rgb(150,150,150);} #confpanier { margin: auto; width: 51%; font-family: Lato, sans-serif; background-color: rgb(241,237,237); border-radius: 20px; box-shadow: 0 0 20px 5px rgb(30,30,30);} #confpanier .titre { padding: 25px 0; height: 100%; font-family: arial, sans-serif; font-size: 43px; font-weight: bold; color: rgb(193,214,220); background-color: rgb(3,122,156); border-radius: 20px 20px 0 0;} #confpanier .titre::before { margin-right: 40px;} #confpanier .desc { position: relative;} #confpanier .desc .nom { position: absolute; box-sizing: border-box; bottom: 0; left: 0; padding: 15px 10px; width: 100%; font-size: 2.4em; font-weight: bold; font-family: Lato, sans-serif; color: rgb(54 30 4); text-align: right; background-color: rgb(255 255 255 / 69%); border-radius: 0 0 20px 20px;} #confpanier .desc img { width: 100%; border-radius: 0 0 20px 20px;} /* -------------------------------------Éléments commun - page défis------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #actions, #douceurs, #imagine, #vf, #pzl, #bbox, #boutique { padding: 0 0 50px 0; width: 100%; background-color: rgba(255,250,243,0.5); font-family: Lato, sans-serif;} .defi { position: relative; padding: 120px 0 0;} .defi .deco { display: none;} .defi.termine .photo::after { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-family: Flaticon; content: "\f239"; color: rgba(84,56,56,0.4); font-size: 25em; background-color: rgba(255,255,255,0.55); z-index: 0;} .defi.termine .details, .defi.termine .sousTitre, .defi.termine .info, .defi.termine .classement, .defi.termine .scores, .defi.termine form { opacity: 0.55;} .defi.bientot .photo::after { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-family: Flaticon; content: "Bientôt"; color: rgba(84,56,56,0.4); font-size: 14em; background-color: rgba(255,255,255,0.55); z-index: 0;} .defi.bientot .details, .defi.bientot .sousTitre, .defi.bientot .info, .defi.bientot .classement, .defi.bientot .scores, .defi.bientot form { opacity: 0.55;} .defi .details { display: flex; margin-top: 50px; width: 100%; height: 60px; font-family: Lato; color: rgb(20,20,20); background-color: rgba(216,229,245,0.45); border-bottom: 1px solid rgb(101,115,138);} .defi .details .cal { width: 35%; height: 100%;} .defi .details .cal p { padding-left: 20px; height: 100%; font-size: 35px; text-align: left; line-height: 60px; white-space:nowrap;} .defi .details .cal p::before { font-size: 44px;} .defi .details .pts { width: 25%; height: 100%;} .defi .details .pts p { height: 100%; font-size: 35px; text-align: center; line-height: 60px; white-space:nowrap;} .defi .details .pts p::before { font-size: 40px;} .defi .details .pts p span:nth-of-type(2) { padding-left: 5px; font-size: 30px;} .defi .details .exp { width: 25%; height: 100%;} .defi .details .exp p { height: 100%; font-size: 35px; text-align: center; line-height: 60px; white-space:nowrap;} .defi .details .exp p::before { font-size: 40px;} .defi .details .exp p span:nth-of-type(2) { padding-left: 5px; font-size: 30px;} .defi .details .lim { width: 15%; height: 100%;} .defi .details .lim p { padding-right: 20px; height: 100%; font-size: 35px; text-align: right; line-height: 60px; white-space:nowrap;} .defi .details .lim p::before { font-size: 40px;} .defi .listescores { display: none; height: 100%; background-color: rgb(237,240,245);} .defi .listescores p { padding: 8px 30px; font-size: 28px; color: rgb(80,80,80); text-align: right;} .defi .listescores .res { margin-left: 30px; font-style: italic;} .defi .listescores .icon-pk { margin-left: 30px;} .defi .listescores .icon-expe { margin-left: 30px;} .defi .listescores .icon-jetons { margin-left: 30px;} .defi .listescores .icon-splash { margin-left: 30px;} .defi .listescores .icon-splash::before { font-size: 24px;} .defi .rappel_epuise { padding: 10px 0 0; width: 100%; height: 45px; font-family: Hand, sans-serif; font-size: 28px; color: rgb(253,255,229); background-color: rgb(63,92,140);} .defi .rappel_fin { padding: 10px 0 0; width: 100%; height: 45px; font-family: Hand, sans-serif; font-size: 28px; color: rgb(253,255,229); background-color: rgb(180,30,30);} .defi .rappel_offre { padding: 10px 0 0; width: 100%; height: 45px; font-family: Hand, sans-serif; font-size: 28px; color: rgb(234,245,223); background-color: rgb(121,171,189);} .defi .rappel_promo { padding: 10px 0 0; width: 100%; height: 45px; font-family: Hand, sans-serif; font-size: 28px; color: rgb(142,52,7); background-color: rgba(245,204,68,0.8);} .defi .sousTitre { padding-top: 50px; width: 100%; font-family: Beyond; font-size: 55px; line-height: 100px; color: rgb(140,0,0); font-weight: bold; box-sizing: border-box;} .defi .jetons { padding-top: 5px; width: 100%; font-family: arial, sans-serif; font-size: 30px; color: rgb(140,0,0); box-sizing: border-box;} .defi .info { position: relative; margin: 50px 8% 10px 8%; padding: 2% 1%; width: 84%; font-size: 30px; color: rgb(80,80,80); background-color: rgba(234,226,214,0.5); border-radius: 8px; box-sizing: border-box;} .defi .info .legende { position: absolute; top: -20px; left: 20px; font-size: 28px; font-weight: bold; color: rgb(167,108,20);} .defi .info ul { margin: 30px 0 30px 80px; text-align: left;} .defi .photo { position: relative; margin: 30px 8% 20px 8%; padding: 1%; width: 84%; background-color: rgb(235,235,235); border-radius: 8px; box-shadow: 3px 3px 5px rgba(100,100,100,0.6); border: 2px solid rgb(20,20,20); box-sizing: border-box;} .defi .photo img { width: 100%; border-radius: 8px;} .classement { position: relative; margin: 30px 8% 25px 8%; padding: 2%; width: 80%; font-size: 26px; color: rgb(80,80,80); text-align: left; background-color: rgba(234,226,214,0.5); border-radius: 8px;} .classement .legende { position: absolute; top: -20px; left: 20px; font-size: 28px; font-weight: bold; color: rgb(167,108,20);} .classement .resultats, .classement .resultats2 { position: relative; display: flex; margin: 6px 0; padding: 2px 3% 2px 3%; align-items: center;} .classement .resultats span { width: 33%; line-height: 40px;} .classement .resultats2 span { width: 50%; line-height: 40px;} .classement .resultats2 span img { margin-right: 15px; vertical-align: middle;} .classement .resultats .icon-medaille { font-weight: bold;} .classement .resultats .icon-medaille::before { position: relative; top: 4px; font-size: 35px;} .classement .resultats .icon-pk { padding-left: 10%; width: 25%;} .classement .resultats .icon-pk::before { position: relative; top: 4px; font-size: 35px; color: rgb(49,125,59);} .classement .resultats.promo { background-color: rgb(249,211,86);} .classement .resultats.promo::after { position: absolute; top: 8px; right: -70px; width: 70px; height: 70px; content: ''; background: url('images/habillage/promo-icon.png') no-repeat;} .classement .reponse { position: relative; display: flex; margin: 6px 0; padding: 2px 0 2px 0; align-items: center;} .classement .reponse span { width: 62%; line-height: 40px; white-space: nowrap;} .classement .reponse span img { margin-right: 40px; width: 40px; vertical-align: middle;} .classement .reponse .icon-pk { padding-left: 2%; width: 18%; font-weight: bold; box-sizing: border-box;} .classement .reponse .icon-pk::before { position: relative; top: 4px; font-size: 30px; color: rgb(130,130,130);} .classement .reponse .icon-expe { padding-left: 2%; width: 18%; font-weight: bold; box-sizing: border-box;} .classement .reponse .icon-expe::before { position: relative; top: 4px; font-size: 30px; color: rgb(130,130,130);} .classement .reponse.promo { background-color: rgb(249,211,86);} .classement .reponse.promo::after { position: absolute; top: 8px; right: -70px; width: 70px; height: 70px; content: ''; background: url('images/habillage/promo-icon.png') no-repeat;} .classement hr { margin: 25px 60px;} .bonusmalus { position: relative; margin: 30px 8% 25px 8%; padding: 2% 1%; width: 84%; font-size: 25px; color: rgb(80,80,80); text-align: left; background-color: rgba(234,226,214,0.5); border-radius: 8px; box-sizing: border-box;} .bonusmalus .legende { position: absolute; top: -20px; left: 20px; font-size: 28px; font-weight: bold; color: rgb(167,108,20);} .bonusmalus .condition { position: relative; display: flex; margin: 6px 0; padding: 2px 0 2px 0; align-items: center;} .bonusmalus .condition.promo { background-color: rgba(249,211,86,0.8);} .bonusmalus .condition.promo::after { position: absolute; top: 8px; right: -70px; width: 70px; height: 70px; content: ''; background: url('images/habillage/promo-icon.png') no-repeat;} .bonusmalus .condition .QouD { width: 65%; line-height: 40px; box-sizing: border-box;} .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label, .bonusmalus .condition .QouD [type="checkbox"]:checked + label { padding-top: 0; color: rgb(80,80,80); font-size: 25px;} .bonusmalus .condition.malus .QouD [type="checkbox"]:not(:checked) + label, .bonusmalus .condition.malus .QouD [type="checkbox"]:checked + label { color: rgb(158,54,54);} .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label .sp1::before { color: rgb(140,140,140);} .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::before, .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(255,255,255);} .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::after, .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after { background-color: rgb(191,169,136);} .bonusmalus .condition.malus .QouD [type="checkbox"]:not(:checked) + label::after, .bonusmalus .condition.malus .QouD [type="checkbox"]:checked + label::after { background-color :rgb(173,111,110);} .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(186,143,28);} .bonusmalus .condition.malus .QouD [type="checkbox"]:checked + label::before { background-color: rgb(158, 54, 54);} .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after, .bonusmalus .condition.malus .QouD [type="checkbox"]:checked + label::after { background-color: rgb(255,255,255);} .bonusmalus .condition .QouD.promo [type="checkbox"]:not(:checked) + label .sp1::before { color: rgb(85,85,85);} .bonusmalus .condition .QouD.promo [type="checkbox"]:not(:checked) + label::after { background-color: rgb(183,141,71);} .bonusmalus .condition .QouD.promo [type="checkbox"]:checked + label::before { background-color: rgb(193,94,0);} .bonusmalus .condition .intitule { width: 58%; line-height: 40px; text-align: left;} .bonusmalus .condition .intitule strong { padding-left: 10px;} .bonusmalus .condition .pkbonus, .bonusmalus .condition .xpbonus { width: 27%; text-align: left; line-height: 40px; box-sizing: border-box;} .bonusmalus .condition .pkbonus::first-letter, .bonusmalus .condition .xpbonus::first-letter { font-weight: bold;} .bonusmalus .condition .icon-pk { padding-left: 8%; width: 29%; line-height: 40px;} .bonusmalus .condition .icon-pk::before { position: relative; top: 4px; font-size: 35px; color: rgb(49,125,59);} .bonusmalus .condition .icon-xp { padding-left: 8%; width: 29%; line-height: 40px;} .bonusmalus .condition .icon-xp::before { position: relative; top: 4px; font-size: 35px; color: rgb(10,106,202);} .bonusmalus .condition .ejakbonus { width: 8%; text-align: left; line-height: 40px; box-sizing: border-box;} .bonusmalus .condition .ejakbonus::first-letter { font-weight: bold;} .bonusmalus .condition .icon-splash { padding-left: 8%; width: 29%; line-height: 40px;} .bonusmalus .condition .icon-splash::before { position: relative; top: 1px; font-size: 29px; color: rgb(15,135,144);} .tenues { position: relative; margin: 30px 8% 25px 8%; padding: 2% 1%; width: 84%; font-size: 25px; color: rgb(80,80,80); text-align: left; background-color: rgba(234,226,214,0.5); border-radius: 8px; box-sizing: border-box;} .tenues .legende { position: absolute; top: -20px; left: 20px; font-size: 28px; font-weight: bold; color: rgb(167,108,20);} .icon-medaille.or::before { color: rgb(177,125,16);} .icon-medaille.argent::before { color: rgb(124,124,124);} .icon-medaille.bronze::before { color: rgb(163,95,65);} .icon-medaille.choco::before { color: rgb(100,72,14);} .original { position: absolute; top: -70px; left: -70px; z-index: 1;} .quizReponse { position: relative; margin: 30px 8% 20px 8%; width: 80%; text-align: center; background-color: white; border-radius: 8px; box-shadow: 2px 2px 4px rgba(135,135,135,0.6); border: 2px solid rgb(200,200,200);} .quizReponse .fieldset { position: absolute; top: -20px; left: 20px; font-weight: bold; font-size: 28px; text-shadow: 0 0 5px rgb(255,255,255);} .quizReponse .essai { position: relative;} .quizReponse .essai p { text-align: center; font-family: arial, sans-serif; font-size: 28px; font-weight: bold; color: rgb(175,139,139);} .quizReponse .submit { position: absolute; top: -5px; right: 10px; margin: 0 auto 0 auto; padding: 0; width: 100px; height: 133px; overflow: hidden; border-radius: 0; box-shadow: none; border: none; vertical-align: top; cursor: pointer;} .quizReponse .submit input { display: block; width: 100px; height: 133px; opacity: 0; overflow: hidden; cursor: pointer;} .repOk { border: 2px solid rgb(85,207,84); background: url('images/habillage/repTextOk.jpg') center no-repeat, white; box-shadow: 2px 2px 4px rgba(0,0,0,0.6), inset 0 0 10px rgb(133,192,146);} .repBof { border: 2px solid rgb(255,158,100); background: url('images/habillage/repTextBof.jpg') center no-repeat, white; box-shadow: 2px 2px 4px rgba(0,0,0,0.6), inset 0 0 10px rgb(231,177,155);} .repFaux { border: 2px solid rgb(255,100,100); background: url('images/habillage/repTextFaux.jpg') center no-repeat, white; box-shadow: 2px 2px 4px rgba(0,0,0,0.6), inset 0 0 10px rgb(231,155,155);} .repNull { height: 50px; background: url('images/habillage/repTextNull.jpg') center no-repeat, white;} .repDesact { height: 80px; background: url('images/habillage/repDesact.jpg') center no-repeat, white;} .tbien { background-color: rgb(251,255,251); box-shadow: 2px 2px 4px rgba(63,63,63,0.7), inset 0 0 10px rgb(208,235,195); border: 2px solid rgb(75,133,44);} .bien { background-color: rgb(255,253,251); box-shadow: 2px 2px 4px rgba(63,63,63,0.7), inset 0 0 10px rgb(244,229,207); border: 2px solid rgb(194,130,41);} .pbien { background-color: rgb(255,251,251); box-shadow: 2px 2px 4px rgba(63,63,63,0.7), inset 0 0 10px rgb(239,210,210); border: 2px solid rgb(183,66,66);} .tor { background-color: rgb(239,230,166); border: 2px solid rgb(183,174,66);} .targent { background-color: rgb(225,225,225); border: 2px solid rgb(183,174,66);} .tbronze { background-color: rgb(210,171,127); border: 2px solid rgb(105,56,1);} .tchoco { background-color: rgb(117,73,28); border: 2px solid rgb(29,18,6); color: rgb(239, 230, 221);} .satisfaction { position: absolute; top: -10px; right: -70px; z-index: 1;} .satisfaction img { width: 50%;} input[type="text"].inputdesign { display: block; margin: 20px 0 15px 30px; padding: 2% 1% 2% 3%; width: 92%; font-family: Flaticon; font-size: 25px; font-weight: bold; color: rgb(126,107,92); letter-spacing: 2px; background-color: rgb(249,247,243); border: none; border-radius: 8px; box-shadow: inset 0 0 5px 1px rgb(124,113,95); resize: none;} input[type="text"].inputdesign::placeholder { color: rgb(200,200,200);} input[type="text"].inputdesign:focus { background-color: rgb(255,255,255); box-shadow: inset 0 0 4px 3px rgb(101,124,137); transition: all 800ms ease-out;} input[type="text"].inputdesign.repOk { padding-left: 10%; width: 85%; color: rgb(92,108,87); border: 2px solid rgb(227,217,205); background: url('images/habillage/tbienIcon.png') 10px center no-repeat; box-shadow: none;} input[type="text"].inputdesign.repBof { padding-left: 10%; width: 85%; color: rgb(109,90,87); border: 2px solid rgb(227,217,205); background: url('images/habillage/bienIcon.png') 10px center no-repeat; box-shadow: none;} input[type="text"].inputdesign.repFaux { padding-left: 10%; width: 85%; color: rgb(134,90,90); border: 2px solid rgb(227,217,205); background: url('images/habillage/pbienIcon.png') 10px center no-repeat; box-shadow: none;} input[type="text"].inputdesign.repNull { border: 2px solid rgb(227,217,205); background: rgb(245,245,245); box-shadow: none;} /* ------------------------------------------Défis Activités--------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #actions .defi .details { background-color: rgb(230,241,231); border-bottom: 1px solid rgb(50,152,59);} #actions .defi .sousTitre { color: rgb(50,152,59);} #actions .bonusmalus .legende { color: rgb(51,156,60);} #actions .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::after, #actions .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after { background-color: rgb(147,193,151);} #actions .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(43,148,30);} #actions .bonusmalus .condition .QouD.promo [type="checkbox"]:not(:checked) + label::after, #actions .bonusmalus .condition .QouD.promo [type="checkbox"]:checked + label::after { background-color: rgb(222,168,92);} #actions .bonusmalus .condition .QouD.promo [type="checkbox"]:checked + label::before { background-color: rgb(187,114,13);} #actions .tenues .legende { color: rgb(51,156,60);} #actions .tenues .liste .icon-desact { display: inline-block; font-size: 100px; line-height: 100px; background-color: rgb(255,255,255); border-radius: 50%; color: rgb(145,145,145); opacity: 0.8;} #actions .tenues .liste .icon-desact::before { margin: 0;} #actions .tenues .liste label img { width: 84px; height: 84px; border-radius: 50%; border: 8px solid rgb(147,193,151); vertical-align: bottom; filter: grayscale(0.8); opacity: 0.9;} #actions .tenues .liste input[type='radio']:disabled + label img { filter : grayscale(0.9); opacity: 0.3;} #actions .tenues .liste input[type='radio']:checked + label img { filter: none; opacity: 1;} #actions .tenues .liste input[type='radio']:checked + .icon-desact { color: rgb(50,152,59); opacity: 0.85;} #actions .tenues input[type='radio'] { position: relative; left: -1000px;} #actions .defi .photo { padding: 1px; background-color: rgb(33,41,30);} #actions .defi .photo .defiphoto { width: 100%; border-radius: 0 0 8px 8px; border: 1px solid rgb(50,50,50); border-top: none; box-sizing: border-box;} #actions .defi .photo .defivideo { width: 830px;} #actions .defi .photo .original img { border: none;} #actions .defi.termine .photo::after{ color: rgba(150,53,19,0.5);} #actions .defi.termine .photo{ opacity: 0.55;} #actions .defi.bientot .photo::after { color: rgba(92,26,3,0.7);} #actions .defi.bientot .photo{ opacity: 0.40;} #actions .quizReponse { padding: 3% 2%; height: 50px;} #actions .quizReponse .fieldset { color: rgb(51,156,60);} #actions .bilan { margin-top: 10px; padding-left: 70px; font-size: 26px; color: rgb(50,50,50); text-align: left;} #actions .bilan .icon-jetons, #actions .bilan .icon-pk, #actions .bilan .icon-expe, #actions .bilan .icon-splash { padding: 0 5px 0 20px; font-size: 28px;} #actions .bilan .icon-splash { opacity: 0;} #actions .bilan .icon-splash.show { opacity: 1;} #actions .bilan .icon-jetons::before { font-size: 30px; color: rgb(140,118,10);} #actions .bilan .icon-pk::before { font-size: 30px; color: rgb(49,125,59);} #actions .bilan .icon-expe::before { font-size: 30px; color: rgb(10,106,202);} #actions .bilan .icon-splash::before { font-size: 26px; color: rgb(15,135,144);} #actions .quizReponse .submit { background: url('images/habillage/submitBut2.png') no-repeat;} #actions #rating { display: flex; padding-right: 5px; justify-content: flex-end; align-items: center; background-color: rgb(33,41,30); border-radius: 8px 8px 0 0;} #actions #rating .votez { margin: 2px 35px; padding: 0px 15px; color: rgb(33,41,30); font-size: 1.9em; font-weight: bold; background-color: rgb(224,161,125); border-radius: 10px; animation: flash 1.2s cubic-bezier(1,0.26,1,1.01) infinite alternate;} #actions #rating input[type="radio"], #actions #rating input[type="submit"] { position: absolute; left: -100%;} #actions #rating label { padding: 0 0.5%; width: 35px; font-size: 35px; line-height: 50px; cursor: pointer; color: rgb(180,180,180); -webkit-tap-highlight-color: transparent;} #actions #rating .zero { display: none;} #actions #rating .icon { color: rgb(138,191,142);} #actions #rating input[type="radio"]:checked ~ .icon-star { color: rgb(110,110,110);} #actions #rating .icon-fleche-droite { padding-left: 3%; color: rgb(240,240,240);} @keyframes flash{ from {opacity: 1;} to {opacity: 0;} } /* ------------------------------------------Défis Douceurs--------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #douceurs .defi .details { background-color: rgb(241,230,240); border-bottom: 1px solid rgb(128,50,152);} #douceurs .defi .sousTitre { color: rgb(166,117,170);} #douceurs .bonusmalus .legende { color: rgb(144,51,156);} #douceurs .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::after, #douceurs .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after { background-color: rgb(204,179,202);} #douceurs .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(166,117,170);} #douceurs .bonusmalus .condition .QouD.promo [type="checkbox"]:not(:checked) + label::after, #douceurs .bonusmalus .condition .QouD.promo [type="checkbox"]:checked + label::after { background-color: rgb(222,168,92);} #douceurs .bonusmalus .condition .QouD.promo [type="checkbox"]:checked + label::before { background-color: rgb(187,114,13);} #douceurs .tenues .legende { color: rgb(51,156,60);} #douceurs .tenues .liste .icon-desact { display: inline-block; font-size: 100px; line-height: 100px; background-color: rgb(255,255,255); border-radius: 50%; color: rgb(145,145,145); opacity: 0.8;} #douceurs .tenues .liste .icon-desact::before { margin: 0;} #douceurs .tenues .liste label img { width: 84px; height: 84px; border-radius: 50%; border: 8px solid rgb(147,193,151); vertical-align: bottom; filter: grayscale(0.8); opacity: 0.9;} #douceurs .tenues .liste input[type='radio']:disabled + label img { filter : grayscale(0.9); opacity: 0.3;} #douceurs .tenues .liste input[type='radio']:checked + label img { filter: none; opacity: 1;} #douceurs .tenues .liste input[type='radio']:checked + .icon-desact { color: rgb(50,152,59); opacity: 0.85;} #douceurs .tenues input[type='radio'] { position: relative; left: -1000px;} #douceurs .defi .photo { padding: 1px; background-color: rgb(33,41,30);} #douceurs .defi .photo .defiphoto { width: 100%; border-radius: 0 0 8px 8px; border: 1px solid rgb(50,50,50); border-top: none; box-sizing: border-box;} #douceurs .defi .photo .original img { border: none;} #douceurs .defi.termine .photo::after { color: rgba(150,53,19,0.5);} #douceurs .defi.termine .photo{ opacity: 0.55;} #douceurs .quizReponse { padding: 3% 2%; height: 50px;} #douceurs .quizReponse .fieldset { color: rgb(144,51,156);} #douceurs .bilan { margin-top: 10px; padding-left: 70px; font-size: 26px; color: rgb(50,50,50); text-align: left;} #douceurs .bilan .icon-jetons, #douceurs .bilan .icon-pk, #douceurs .bilan .icon-expe, #douceurs .bilan .icon-splash { padding: 0 5px 0 20px; font-size: 28px;} #douceurs .bilan .icon-splash { opacity: 0;} #douceurs .bilan .icon-splash.show { opacity: 1;} #douceurs .bilan .icon-jetons::before { font-size: 30px; color: rgb(140,118,10);} #douceurs .bilan .icon-pk::before { font-size: 30px; color: rgb(49,125,59);} #douceurs .bilan .icon-expe::before { font-size: 30px; color: rgb(10,106,202);} #douceurs .bilan .icon-splash::before { font-size: 26px; color: rgb(15,135,144);} #douceurs .quizReponse .submit { background: url('images/habillage/submitBut3.png') no-repeat;} #douceurs #rating { display: flex; padding-right: 5px; justify-content: flex-end; align-items: center; background-color: rgb(33,41,30); border-radius: 8px 8px 0 0;} #douceurs #rating .votez { margin: 2px 35px; padding: 0px 15px; color: rgb(33,41,30); font-size: 1.9em; font-weight: bold; background-color: rgb(224,161,125); border-radius: 10px; animation: flash 1.2s cubic-bezier(1,0.26,1,1.01) infinite alternate;} #douceurs #rating input[type="radio"], #douceurs #rating input[type="submit"] { position: absolute; left: -100%;} #douceurs #rating label { padding: 0 0.5%; width: 35px; font-size: 35px; line-height: 50px; cursor: pointer; color: rgb(180,180,180); -webkit-tap-highlight-color: transparent;} #douceurs #rating .zero { display: none;} #douceurs #rating .icon { color: rgb(195,172,198);} #douceurs #rating input[type="radio"]:checked ~ .icon-star { color: rgb(110,110,110);} #douceurs #rating .icon-fleche-droite { padding-left: 3%; color: rgb(240,240,240);} /* ----------------------------------------Défis imagination--------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #imagine .defi .details { background-color: rgb(245,232,211); border-bottom: 1px solid rgb(199,133,27);} #imagine .defi .sousTitre { color: rgb(199,133,27);} #imagine .defi .jetons { color: rgb(130,91,28);} #imagine .classement .legende { color: rgb(199,133,27);} #imagine .bonusmalus .legende { color: rgb(199,133,27);} #imagine .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::after, #imagine .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after { background-color: rgb(218,181,108);} #imagine .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(187,136,53);} #imagine .defi.termine .photo::after { color: rgba(150,53,19,0.5);} #imagine .quizReponse { padding: 2%;} #imagine .quizReponse .upload textarea { padding: 5% 12% 5% 5%; width: 83%; height: 150px; font-size: 32px; color: rgb(80,80,80); font-weight: bold; text-align: left; border: none; background: url('images/habillage/uploadText.png') center no-repeat; resize: none;} #imagine .quizReponse.desactive .upload textarea { text-align: center;} #imagine .quizReponse .upload textarea:focus { background: white;} #imagine .quizReponse.tbien .upload textarea { background: url('images/habillage/repTextOk.png') 50% 75% no-repeat;} #imagine .quizReponse.bien .upload textarea { background: url('images/habillage/repTextBof.png') 50% 75% no-repeat;} #imagine .quizReponse.bien .essai p { color: rgb(119,98,53);} #imagine .quizReponse.pbien .upload textarea { background: url('images/habillage/repTextFaux.png') 50% 75% no-repeat;} #imagine .quizReponse .submit { background: url('images/habillage/submitBut.png') no-repeat;} /* -----------------------------------------Défis vrai/faux---------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #vf .defi .details { background-color: rgb(253,231,222); border-bottom: 1px solid rgb(205,69,19);} #vf .defi .sousTitre { color: rgb(205,69,19);} #vf .defi .jetons { color: rgb(138,74,50);} #vf .classement .legende { color: rgb(205,69,19);} #vf .bonusmalus .legende { color: rgb(205,69,19);} #vf .bonusmalus .condition .QouD [type="checkbox"]:not(:checked) + label::after, #vf .bonusmalus .condition .QouD [type="checkbox"]:checked + label::after { background-color: rgb(230,177,139);} #vf .bonusmalus .condition .QouD [type="checkbox"]:checked + label::before { background-color: rgb(171,89,32);} #vf .defi.termine .photo::after { color: rgba(150,53,19,0.45);} #vf .quizReponse { padding: 2%;} #vf .quizReponse .fieldset { color: rgb(205,69,19);} #vf .quizReponse .VouF { display: inline-block; clear: both; margin: 30px 0;} #vf .quizReponse .VouF input[type="radio"] { display: none;} #vf .quizReponse .VouF.gauche { margin-right: 50px;} #vf .quizReponse .VouF.droit { margin-left: 50px;} #vf .quizReponse .VouF label { width: 180px; border-radius: 8px; border: 1px solid rgb(235,235,235); box-shadow: 2px 2px 4px rgba(100,100,100,0.6); font-weight: bold; font-size: 22px; color: rgb(120,120,120); background-color: rgb(235,235,235);} #vf .quizReponse .VouF input.radio:empty { margin-left: -1000px;} #vf .quizReponse .VouF input.radio:empty ~ label { position: relative; float: left; line-height: 2.5em; text-indent: 2.25em; font-family: Lato, sans-serif; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #vf .quizReponse .VouF input.radio:empty ~ label::before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 2.5em; background-color: rgb(215,215,215); border-radius: 8px 0 0 8px;} #vf .quizReponse .VouF input.radio:checked ~ label::before { content:'\2714'; font-size: 25px; text-indent: .3em; color: rgb(242,208,179); background-color: rgb(220,97,9);} #vf .quizReponse .VouF input.radio:checked ~ label { color: rgb(0,0,0);} #vf .quizReponse .VouF input.radio:focus ~ label::before { box-shadow: 0 0 0 3px rgb(153,153,153);} #vf .quizReponse.desactive .VouF input.radio:checked ~ label , #vf .quizReponse.desactive .VouF input.radio:empty ~ label{ opacity: 0.4; color: rgb(150,150,150);} #vf .quizReponse .VouF.correct input.radio:empty ~ label::before, #vf .quizReponse .VouF.correct input.radio:checked ~ label::before { content:'\2714'; text-indent: .3em; color: rgb(15,79,25); background-color: rgb(119,191,135);} #vf .quizReponse .VouF.correct input.radio:checked ~ label , #vf .quizReponse .VouF.correct input.radio:empty ~ label{ opacity: 1; color: rgb(0,0,0);} #vf .quizReponse .VouF.faux input.radio:empty ~ label::before, #vf .quizReponse .VouF.faux input.radio:checked ~ label::before { content: "\f14e"; font-family: Flaticon; text-indent: .3em; color: rgb(245,245,245); background-color: rgb(205,104,104);} #vf .quizReponse .VouF.faux input.radio:checked ~ label , #vf .quizReponse .VouF.faux input.radio:empty ~ label{ opacity: 1; color: rgb(0,0,0);} #vf .quizReponse .submit { background: url('images/habillage/submitBut4.png') no-repeat;} /* --------------------------------------------Défis puzzle---------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #pzl .defi .details { background-color: rgb(223,232,232); border-bottom: 1px solid rgb(47,181,181);} #pzl .defi .sousTitre { color: rgb(47,181,181);} #pzl .defi .jetons { color: rgb(26,117,117);} #pzl .classement .legende { color: rgb(47,181,181);} #pzl .timers { display: flex; margin: 50px 8% 10px 8%; justify-content: space-evenly;} #pzl .timer { margin: 25px 0 10px 0; padding: 1% 0; width: 24%; font-size: 30px; color: rgb(80,80,80); background-color: rgba(198,181,155,0.5); border-radius: 8px; box-shadow: 0 3px 10px 0 rgba(0,0,0,0.5);} #pzl .timers .or { background-color: rgb(239,230,166);} #pzl .timers .argent { background-color: rgb(225,225,225);} #pzl .timers .bronze { background-color: rgb(231,191,146);} #pzl .pz { position: relative; margin: 20px 0; width: 100%; color: rgb(100,0,0); background-color: rgb(255,250,243); border-radius: 8px; box-shadow: none; border: none;} #pzl .pz .pzDesact { position: absolute; top: 20%; width: 100%; text-align: center; z-index: 1;} #pzl .pz .pzDesact img { width: 50%;} #puzzle { margin: 0 30px; padding: 20px 0;} #puzzle.desactive { opacity: 0.4;} #puzzle canvas { box-shadow: 0 0 15px 0 rgba(0,0,0,0.6);} /* ---------------------------------------------BlackBox----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #bbox .defi .details { background-color: rgb(236,217,217); border-bottom: 1px solid rgb(74,6,6);} #bbox .defi .jetons { color: rgb(74,6,6);} #bbox .info .legende { color: rgb(140,0,0);} #bbox .info .t1 { position: relative; display: block; margin: 10px 0 20px 0; font-size: 30px; font-weight: bold; text-align: center;} #bbox .info .t1.icon-add::before, #bbox .info .t1.icon-minus::before { position: absolute; top: 4px; right: 15px; font-size: 35px;} #bbox .info .regles { overflow: hidden; height: 0px;} #bbox .info .regles p { text-align: left; font-size: 26px;} #bbox .info .regles .t2 { display: block; margin: 10px 0; padding: 10px 20px; font-weight: bold; text-align: left; background-color: rgb(250,250,250);} #bbox .info .regles .t3 { display: block; margin: 15px 0; font-style: italic; text-align: left;} #bbox .classement .legende { color: rgb(140,0,0);} #bbox .classement .resultats .icon-medaille { width: 36%;} #bbox .classement .resultats .icon-pk { padding-left: 5%;} #bbox .scores { position: relative; display: flex; margin: 50px 8% 10px 8%; justify-content: space-evenly;} #bbox .scores .legende { position: absolute; top: -32px; left: 20px; font-size: 28px; font-weight: bold; color: rgb(140,0,0);} #bbox .scores .scoreGrilles { display: flex; margin-right: 4%; padding: 1%; width: 66%; font-size: 25px; color: rgb(80,80,80); background-color: rgba(234,226,214,0.5); border-radius: 8px;} #bbox .scores .scoreGrilles .scGr { width: 25%; font-size: 33px;} #bbox .scores .scoreGrilles .scGr strong { padding-left: 8px; font-size: 25px;} #bbox .scores .scoreTot { padding: 1%; width: 26%; font-size: 27px; color: rgb(80,80,80); background-color: rgba(234,226,214,0.6); border-radius: 8px; border: 1px solid rgb(159,148,137);} #bbox .scores .scoreTot::before { position: relative; top: 4px; margin-right: 20px; font-size: 35px;} #bbox .photo { margin: 80px auto 10px auto; padding: 10px; width: 776px; min-height: 1201px; box-sizing: border-box;} #bbox .original { display: none; z-index: 2;} #bbox .photo .val { position: absolute; top: -70px; left: -80px; width: 200px; height: 200px; font-family: Beyond, sans-serif; color: rgb(232,220,197); font-size: 45px; line-height: 200px; background: url('images/habillage/valider.png') no-repeat; z-index: 2;} #bbox .photo .txt { position: absolute; top: -15px; left: 20px; padding-left: 130px; width: 700px; height: 80px; font-family: arial, sans-serif; font-size: 27px; color: rgb(232,220,197); text-align: left; line-height: 80px; background: url('images/habillage/banderole.png') no-repeat; z-index: 1;} #bbox .photo #txtBb { padding-left: 20px; font-size: 24px;} #bbox .photo .imgDefi { padding-top: 65px; width: 100%; border-radius: 8px; opacity: 0;} #jeuBb { position: absolute; top: 75px; left: 10px; z-index: 1;} #jeuBb table { border-collapse: collapse;} #jeuBb table td { width: 108px; height: 93px; background-image: url('images/habillage/blackbox/background.jpg'); background-position: 0 0; transition: background 1000ms ease-in 1000ms;} #bbox .quizReponse { margin-top: 50px; padding: 4% 2% 2% 2%; min-height: 100px;} #bbox .quizReponse .fieldset { color: rgb(140,0,0);} #bbox .quizReponse .input { margin-bottom: 50px; padding-right: 120px; font-family: arial, sans-serif; font-size: 25px; font-weight: bold; letter-spacing: 1px; color: rgb(120,120,120); text-align: left;} #bbox .quizReponse .submit { background: url('images/habillage/submitBut5.png') no-repeat;} /* ---------------------------------------------Poker----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ #poker { padding: 0 0 50px 0; width: 100%; text-align: center; background-color: rgba(255,250,243,0.5); font-family: Lato, sans-serif;} #poker .titre { display: block; padding: 50px 0; font-family: Lato, sans-serif; font-size: 75px; color: rgb(233,255,255); font-weight: bold; background-color: rgba(0,108,109,0.9); border-bottom: 2px solid rgb(0,54,54);} #poker .sousTitre { padding-top: 50px; width: 100%; height: 85px; font-family: Beyond; font-size: 55px; line-height: 100px; color: rgb(140,0,0); font-weight: bold;} #poker .info { margin: 50px 8% 10px 8%; padding: 1%; width: 82%; height: 100%; font-size: 30px; color: rgb(80,80,80); background-color: rgba(234,226,214,0.5); border-radius: 8px;} #poker .info .t1 { position: relative; display: block; margin: 10px 0 20px 0; font-size: 30px; font-weight: bold; text-align: center;} #poker .info .t1.icon-add::before, #poker .info .t1.icon-minus::before { position: absolute; top: 4px; left: 15px; font-size: 35px;} #poker .regles { overflow: hidden; height: 0px;} #poker .regles p { text-align: left; font-size: 26px;} #poker .regles .t2 { display: block; margin: 10px 0; padding: 10px 20px; font-weight: bold; text-align: left; background-color: rgb(250,250,250);} #poker .regles .t3 { display: block; margin: 15px 0; font-style: italic; text-align: left;} #poker .hide { display: none;} #poker .reduit { height: 0px; overflow: hidden;} #poker .opacity50 { opacity: 0.5;} #poker .photo { position: relative; box-sizing: border-box; margin: 70px 8% 0 8%; padding: 1%; width: 84%; height: 100%; color: rgb(100,0,0); background-color: white; border-radius: 8px; box-shadow: 2px 2px 4px rgba(135,135,135,0.6); border: 2px solid rgb(180,180,180);} #poker .photo .bulle { position: absolute; top: 15px; left: 0; width: 100%;} #poker .photo .bulle p { position: relative; display: block; box-sizing: border-box; margin: 0 auto; padding: 15px 60px; width: fit-content; text-align: center; color: rgb(255,255,255); font-weight: bold; font-size: 35px; background-color: rgb(6,132,177); border-radius: 10px; text-shadow: 0 -0.05em 0.1em rgba(0,0,0,.3); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.63);} #poker .photo .bulle p::after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin: 0 0 -19px -19px; content: ''; border: 20px solid transparent; border-top-color: rgb(6,132,177); border-bottom: 0;} #poker .photo .icon-search { position: absolute; bottom: 20px; right: 20px; box-sizing: border-box; padding-left: 15px; width: 75px; height: 75px; line-height: 75px; font-size: 40px; color: rgb(210,210,210); border-radius: 50%; background-color: rgba(0,0,0,0.75); z-index: 1;} #poker .photo .description { display: flex; padding-bottom: 5px;} #poker .photo .description .nom { margin-right: 15px; width: 440px;} #poker .photo .description .nom p { padding-left: 150px; line-height: 38px; font-size: 38px; font-weight: bold; text-align: left; color: rgb(80,80,80);} #poker .photo .description .jetons { margin-right: 10px; width: 200px;} #poker .photo .description .jetons img { height: 38px;} #poker .photo .description .jetons p { position: relative; top: -5px; display: inline-block; line-height: 38px; font-size: 38px; font-weight: bold; text-align: left; color: rgb(80,80,80);} #poker .photo .description .jetons p span { padding-left: 15px;} #poker .photo .description .vetements { margin-right: 10px; width: 140px;} #poker .photo .description .vetements p { margin: 0 0 0 auto; height: 40px; background: url('images/bonus/poker/tshirt.png') 0 5px repeat-x; background-size: 35px;} #poker .photo .description .vetements .nb4 { width: 100%;} #poker .photo .description .vetements .nb3 { width: 75%;} #poker .photo .description .vetements .nb2 { width: 50%;} #poker .photo .description .vetements .nb1 { width: 25%;} #poker .photo .description .vetements .nb0 { width: 0%;} #poker .photo .portrait { height: 600px; overflow: hidden;} #poker .photo .portrait img { width: 100%; border-radius: 8px;} #console { height: 85px; transition: height 1s;} #console .statistiques { position: relative;} #console .statistiques .ia, #console .joueur { display: flex; box-sizing: border-box; margin: 5px 8% 10px 8%; width: 84%; height: 100%; justify-content: space-between; color: rgb(80,80,80); font-size: 36px; font-weight: bold;} #console .statistiques .stats { display: flex; box-sizing: border-box; padding: 1%; justify-content: flex-start; background-color: rgb(255,255,255); border-radius: 8px; box-shadow: 3px 3px 5px rgba(100,100,100,0.6); border: 2px solid rgb(140,140,140);} #console .statistiques .stats .vetements { width: 130px; line-height: 36px;} #console .statistiques .stats .nom { width: 300px; line-height: 38px; font-size: 38px;} #console .statistiques .stats .jetons { width: 190px; line-height: 36px; text-align: left;} #console .statistiques .stats .vetements span { padding-right: 15px;} #console .statistiques .stats .vetements img { position: relative; top: 6px; height: 38px;} #console .statistiques .stats .jetons span { padding-left: 15px;} #console .statistiques .stats .jetons img { position: relative; top: 6px; height: 38px;} #console .statistiques .mise { position: relative; box-sizing: border-box; padding: 1%; width: 185px; background-color: rgb(255,255,255); border-radius: 8px; box-shadow: 3px 3px 5px rgba(100,100,100,0.6); border: 2px solid rgb(140,140,140);} #console .statistiques .mise .bulle { position: absolute; top: -83px; left: -20px; width: 120%; z-index: 1;} #console .statistiques .mise .bulle p { position: relative; display: block; box-sizing: border-box; margin: 0 auto; padding: 20px 10px; text-align: center; color: rgb(210,210,210); font-weight: bold; font-size: 30px; background-color: rgb(0,0,0); border-radius: 10px; box-shadow: 3px 3px 2px 0px rgba(255,255,255, 0.65);} #console .statistiques .mise .bulle p::after { position: absolute; bottom: 0; left: 50%; width: 0; height: 0; margin: 0 0 -12px 0; content: ''; border: 20px solid transparent; border-top-color: rgb(0,0,0); border-bottom: 0;} #console .statistiques .mise span { padding-left: 15px;} #console .statistiques .mise img { position: relative; top: 6px; height: 38px;} #console .statistiques .dim { color: rgb(150,150,150);} #txtBox { position: relative; box-sizing: border-box; margin: 20px 8%; padding: 2% 2% 2% 100px; width: 84%; font-weight: bold; font-size: 35px; text-align: center; color: rgb(80,80,80); background-color: rgba(234,226,214,0.5); border-radius: 8px; border: 2px solid rgb(180,180,180);} #txtBox::before { position: absolute; top: 10px; left: 30px; font-size: 60px; color: rgb(70,70,70);} #console form { display: none; align-items: center; box-sizing: border-box; margin: 20px 8%; padding: 1% 0; width: 84%;} #console form .range { -webkit-appearance: none; appearance: none; width: 35%; height: 40px; background: #d3d3d3; border-radius: 10px; outline: none; opacity: 0.7; transition: opacity .2s;} #console form .range:hover { opacity: 1;} #console form .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 60px; height: 60px; background: rgb(23,93,30); border-radius: 50%; cursor: pointer;} #console form .range::-moz-range-thumb { width: 60px; height: 60px; background: rgb(23,93,30); border-radius: 50%; cursor: pointer;} #console form #rangeValueMise { padding-left: 10px; width: 80px; font-size: 30px; font-weight: bold;} #console form input[type='submit'] { padding: 1%; height: 65px; font-size: 25px; font-weight: bold; border-radius: 10px;} #console form .submise { margin: 0 10px 0 0; width: 150px; color: rgb(231,255,229); background-color: rgb(23,93,30);} #console form .subcheck { margin: 0 10px; width: 150px; color: rgb(235,235,235); background-color: rgb(40,40,40);} #console form .subcouche { margin: 0 0 0 10px; width: 170px; color: rgb(255,245,245); background-color: rgb(173,44,44);} #tablepoker { position: relative; box-sizing: border-box; margin: 20px 4% 0 4%; padding: 1%; width: 92%; min-height: 780px; color: rgb(100,0,0); border-radius: 50px; box-shadow: 3px 3px 5px rgba(100,100,100,0.6); border: 15px solid rgb(39,27,11); background: url('images/bonus/poker/plateau/fond.png') 50% 65% no-repeat, radial-gradient(rgb(13, 132, 3) 5%, rgb(4, 29, 1)); z-index: 2;} #tablepoker #launcher { padding: 20px 30px; font-size: 45px; font-weight: bold; color: #041900; text-shadow: -4px 3px 2px rgba(150, 187, 154, 0.8); cursor: pointer; border-radius: 25px 25px 5px 5px; background-color: rgba(183,195,177,0.84); box-shadow: 0 6px 5px rgba(0, 0, 0, 0.9);} #tablepoker.start { background: radial-gradient(rgb(13, 132, 3) 5%, rgb(4, 29, 1));} .fond { background: url('images/bonus/poker/plateau/logokdo.png') 50% 35% no-repeat;} #game { display: flex; flex-wrap: wrap;} #game .resume { width: 320px; font-size: 26px; font-weight: normal; color: rgb(145,195,151); text-align: center;} #game .main { position: relative;} #game .main.vous, #game .main.ia { width: 275px; height: 415px;} #game .main.plateau { width: 100%; height: 315px;} #game .intitule { padding-top: 5px; font-size: 35px; font-weight: bold; color: rgb(188,218,192); text-align: center;} #game .intitule::before { position: relative; top: -3px; font-size: 25px; color: rgb(222,126,126);} #game .mise { padding-top: 5px; font-size: 30px; font-weight: bold; color: rgb(145,195,151); text-align: center;} #game .mise img { position: relative; top: 8px; margin-right: 10px; width: 42px;} #game .resultat { position: absolute; top: 375px; left: 17px; width: 150%; font-size: 30px; color: rgb(188,218,192); text-align: left;} #game .resultat .icon { margin-left: 15px;} #game .main.ia .resultat { left: auto; right: 17px; text-align: right;} #game .resume strong { font-size: 30px;} #game .resume .r1 { padding-top: 10px;} #game .resume .r1 strong:first-of-type { margin-right: 30px;} #game .resume .r2 { padding-top: 10px;} #game .resume .r3 { padding: 110px 50px 0 0; height: 105px; text-align: right; background: url('images/bonus/poker/plateau/pot.png') 18% 78% no-repeat;} #game .resume .r3 strong { font-size: 40px;} #game .resume .r3 strong span { font-size: 40px; color: rgb(206,228,208);} #game .plateau .border_cartes { position: relative; display: flex; justify-content: center;} #game .plateau .border_cartes div { box-sizing: border-box; margin: 2% 6px; width: 160px; height: 224px; border: 5px solid rgba(255,255,255,0.6); border-radius: 12px;} #game .plateau .border_cartes p { position: absolute; top: 17px;} #game .plateau .border_cartes p img { width: 160px;} #game .plateau .border_cartes .c3 { left: 11px;} #game .plateau .border_cartes .c4 { left: 183px;} #game .plateau .border_cartes .c5 { left: 355px;} #game .plateau .border_cartes .c6 { left: 527px;} #game .plateau .border_cartes .c7 { left: 699px;} #game .main .carte { position: absolute; top: 130px; box-sizing: border-box; width: 160px;} #game .main .carte img { width: 160px;} #game .main .c1 { left: 20px; z-index: 1;} #game .main .c1 img { transform: rotate(-3deg);} #game .main .c2 { left: 100px; z-index: 2;} #game .main .c2 img { transform: rotate(9deg);} #game .main .select { top: 95px;} /* ---------------------------------------------Page de la boutique------------------------------------------------ */ /* ------------------------------------------------------------------------------------------------------------- */ #boutique { padding-top: 115px;} #boutique .chxrayon { display: block;} #boutique .chxrayon .t1 { position: relative; top: -30px; left: 50px; font-family: Lato, sans-serif; font-size: 2.75em; text-align: left; color: rgb(100,100,100); font-weight: bold;} #boutique .chxrayon .t1 span { font-size: 0.7em; font-weight: normal;} #boutique .chxrayon .label { position: relative;} #boutique .chxrayon .label .label_titre { padding: 5px 50px; width: 100%; height: 45px; box-sizing: border-box; font-size: 1.9em; font-family: 'Hand', sans-serif; color: white; text-align: left; background-color: rgb(26,77,78,0.8);} #boutique .chxrayon .label .nbnouv { position: absolute; top: 0; right: 0; padding: 0 10px 0 25px; height: 0; font-size: 1.7em; font-family: 'Sean', sans-serif; color: rgb(255 255 255); border-bottom: 47px solid rgb(19,57,57); border-left: 25px solid transparent;} #boutique .chxrayon .label .nbnouv span { position: relative; top: 7px;} #boutique .chxrayon .rayon { position: relative; margin: 0 auto 15px auto; min-height: 200px; border-bottom: 1px solid rgb(41,40,38); border-top: 1px solid rgb(41,40,38);} #boutique .chxrayon .rayon .stamps { position: absolute; top: 0; right: 0; width: 100%; font-family: Hand, sans-serif; font-size: 1.6em; z-index: 1;} #boutique .chxrayon .rayon .stamps .promo { padding: 5px 0; background-color: rgba(233,183,12,0.8);} #boutique .chxrayon .rayon .stamps .offre { padding: 5px 0; background-color: rgba(121,171,189,0.8);} #boutique .chxrayon .rayon .stamps .offrepromo { padding: 5px 0 5px 80px; text-align: left; background: linear-gradient(120deg, rgba(121,171,189,0.8) 31%, rgba(233,183,12,0.8) 25%);} #boutique .chxrayon .rayon .rayonimg { position: relative; width: 100%; height: 222px;} #boutique .chxrayon .rayon .rayonimg img { width: 100%;} #boutique .chxproduit { position: relative; display: none; padding-top: 60px;} #boutique .chxproduit .rayon { margin: 0 auto; width: 100%; height: 222px;} #boutique .chxproduit .rayon img { border-radius: 10px; width: 100%;} #boutique .chxproduit .t1 { padding: 8px 0; font-family: "Open Sans", sans-serif; font-size: 2.2em; font-weight: bold; color: rgb(255,250,245);} #boutique .chxproduit .icon-retour2 { position: absolute; top: 345px; left: 0; box-sizing: border-box; padding-left: 30px; width: 100vw; text-align: left; font-size: 2.4em; color: rgba(53,51,47,0.7); font-weight: bold;} #boutique .chxproduit .icon-retour2::before { position: relative; top: 8px; font-size: 1.6em; font-weight: normal;} #boutique .chxproduit .containColor { padding-top: 100px; background-color: rgb(255,250,245);} #boutique .chxproduit .containColor .produits { margin: 0 auto; width: 900px; border-radius: 20px; background-color: rgb(236,230,223); overflow-y: auto;} #boutique .chxproduit .containColor .produits .prod { display: flex; padding: 40px 0; align-items: center;} #boutique .chxproduit .containColor .produits .prod .img { position: relative; width: 40%; text-align: center;} #boutique .chxproduit .containColor .produits .prod .img .prod_prom { position: absolute; display: inline-block; margin: auto; padding: 5px; width: 300px; font-size: 1.5em; font-family: 'Hand', sans-serif; box-sizing: border-box; background-color: rgba(245,204,68,0.65); border-radius: 15px 15px 0 0;} #boutique .chxproduit .containColor .produits .prod .img .prod_offre { position: absolute; bottom: 0; display: inline-block; margin: auto; padding: 5px; width: 300px; font-size: 1.5em; font-family: 'Hand', sans-serif; box-sizing: border-box; background-color: rgba(121,171,189,0.7); border-radius: 0 0 15px 15px;} #boutique .chxproduit .containColor .produits .prod .img img { border-radius: 15px; width: 300px;} #boutique .chxproduit .containColor .produits .prod .details { box-sizing: border-box; padding-right: 15px; width: 60%; font-family: 'Lato'; text-align: left; color: rgb(50,50,50);} #boutique .chxproduit .containColor .produits .prod .details .red { color: rgb(180,0,0); font-weight: bold;} #boutique .chxproduit .containColor .produits .prod .details .nom { display: inline-block; margin-bottom: 5px; width: 440px; font-size: 2.6em; font-weight: bold;} #boutique .chxproduit .containColor .produits .prod .details .nv { display: inline-block; margin-bottom: 5px; font-size: 2em; font-weight: bold; font-stretch: condensed;} #boutique .chxproduit .containColor .produits .prod .details .freq { display: inline-block; margin-bottom: 15px; width: 370px; font-size: 1.5em; font-style: italic;} #boutique .chxproduit .containColor .produits .prod .details .lastused { display: inline-block; margin-bottom: 11px; padding: 2px 5px; font-size: 1.5em; color: rgb(255,255,255); background-color: rgb(196,64,62)} #boutique .chxproduit .containColor .produits .prod .details .desc { height: 155px; font-size: 1.7em; font-style: italic;} #boutique .chxproduit .containColor .produits .prod .details .prix { display: inline-block; margin-top: 10px; width: 300px; font-size: 2.2em; font-weight: bold;} #boutique .chxproduit .containColor .produits .prod .details .prix em { font-style: normal;} #boutique .chxproduit .containColor .produits .prod .details .prix .lastprix { padding-right: 15px; font-size: 0.75em; font-style: italic; text-decoration: line-through rgb(140,129,116); color: rgb(130,122,114);} #boutique .chxproduit .containColor .produits .prod .details .prix .lastprix + em.flecheprix { padding-right: 10px; font-size: 0.75em} #boutique .chxproduit .containColor .produits .prod .details .prix .lastprix + em.flecheprix + em.prixpromo { color: rgb(156,129,36);} #boutique .chxproduit .containColor .produits .prod .details .ajouter { display: inline-block; padding: 7px 0; width: 220px; font-size: 2.2em; font-weight: bold; text-align: center; background-color: rgb(255,255,255); border-radius: 15px; box-shadow:rgba(2,2,2,0.6) 0px 1px 4px;} #boutique .chxproduit .produits .prod .details .ajouter.icon-ferme { background-color: rgb(218,212,206);} #boutique .chxproduit .produits .prod .details .ajouter.icon-ferme::before { margin-right: 0; color: rgb(130,122,114);} #boutique .chxproduit.viequot { background-color: rgb(252,238,237);} #boutique .chxproduit.viequot .t1 { background-color: rgb(197,157,155);} #boutique .chxproduit.activites { background-color: rgb(195,236,196);} #boutique .chxproduit.activites .t1 { background-color: rgb(96,138,98);} #boutique .chxproduit.mode { background-color: rgb(202,230,243);} #boutique .chxproduit.mode .t1 { background-color: rgb(57,103,124);} #boutique .chxproduit.sexe { background-color: rgb(218,176,226);} #boutique .chxproduit.sexe .t1 { background-color: rgb(147,96,156);} #boutique .chxproduit.detente { background-color: rgb(198,223,217);} #boutique .chxproduit.detente .t1 { background-color: rgb(101,144,132);} #boutique .chxproduit.evasion { background-color: rgb(242,240,189);} #boutique .chxproduit.evasion .t1 { background-color: rgb(148,146,60);} /* -------------------------------------------Messages important----------------------------------------------- */ /* -----------------------------------------------animation---------------------------------------------------- */ #animation { position: absolute; display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-color: black; opacity: 1; overflow: hidden; z-index: 20;} #animation #aniVideo { width: 100vw; height: 100vh; object-fit: cover;} /* -----------------------------------------------nouveautés---------------------------------------------------- */ #nouv { padding-bottom: 50px; min-height: 100vh; font-family: Lato, sans-serif; background: linear-gradient(150deg, transparent 50%, rgb(183,159,140));} #nouv em { font-style: normal; font-weight: 600; color: rgb(204,155,18);} .nouv_entete { height: 215px; background-color: rgb(0,0,0);} .nouv_menu { margin-bottom: 60px; padding: 15px; font-size: 25px; text-align: left; background-color: rgb(0,0,0);} .nouv_menu a { font-size: 25px; color: rgb(255,250,246); text-decoration: none; color: rgb(255,250,246);} .nouv_txt1 { margin: 50px 30px; font-size: 32px; text-align: left; color: rgb(45,45,45);} .nouv_h1 { margin: 60px 0; padding: 5px 0 5px 50px; font-size: 32px; font-weight: bold; text-align: left; color: rgb(255,250,246); background: linear-gradient(125deg, rgb(123,1,0) 20%, transparent);} .nouv_h2 { margin: 25px 0; padding: 5px 0 5px 50px; font-size: 32px; font-weight: 700; text-align: left; color: rgb(30,30,30);} .nouv_h2::before { position: relative; top: -2px; font-size: 28px;} .nouv_capture { display: flex; margin: 15px 0; justify-content: center;} .nouv_capture img { margin: 0 10px;} .nouv_ul { margin: 30px 30px 30px 100px; text-align: left; font-size: 32px; color: rgb(45,45,45);} .nouv_boutton input[type="submit"] { margin: 0 0 50px 0; padding: 20px 70px; font-family: Lato; font-size: 50px; font-weight: bold; color: rgb(245,237,231); background: linear-gradient(45deg, rgb(123,1,0) 50%, rgb(88,13,13)); border-radius: 30px;}