/* ---------------------------------------------mainstyles.css----------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------ */ :root { height: 100%; interpolate-size: allow-keywords;} * { margin: 0; padding: 0; box-sizing: border-box;} body { width: 100vw; height: 100vh; overflow: hidden; font-family: arial, sans-serif; background-color: white;} body.no-js { height: 100vh; overflow-y: hidden;} .icon::before { display: inline-block; margin-right: 0.4em; font-family: Bullesdesaison; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;} /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------Header------------------------------------------------------- */ .header { position: fixed; display: flex; padding: 15px 0; width: 97vw; height: 15vh; grid-area: header; background: rgb(240, 240, 239); justify-content: center; z-index: 1;} .header .header_items { display: flex; width: 74vw; height: 100%; justify-content: space-between;} .header .header_items .logoheader, .header .header_items .logoheader p { height: 100%;} .header .header_items .logoheader p a { display: inline-block; height: 100%;} .header .header_items .logoheader img { height: 100%; object-fit: contain;} .header .header_items .menuheader { display: flex; width: 10.42vw; height: 100%; flex-flow: row nowrap; align-items: center;} .header .header_items .menuheader p, .header .header_items .menuheader label { flex: 1; text-align: center;} .header .header_items .menuheader p a, .header .header_items .menuheader label { display: inline-block; color: rgb(0,0,0); text-decoration: none; font-size: 2.7em;} .header .header_items .menuheader p a:hover, .header .header_items .menuheader label:hover { color: rgb(27,45,28); text-shadow: 0px 0px 4px rgb(168,220,171);} .header .header_items .menuheader p a::before, .header .header_items .menuheader label::before { margin: 0;} .header .header_items .menuheader .m_contact { height: auto; cursor: pointer;} .header .header_items .menuheader .m_cgv { height: auto; cursor: pointer;} .header .header_items .menuheader .m_panier { position: relative; height: auto; cursor: pointer;} .header .header_items .menuheader .m_panier .badge-panier { position: absolute; top: 2em; right: 0.5em; display: flex; width: 1.35em; height: 1.35em; justify-content: center; align-items: center; font-family: Arial, sans-serif; font-size: 0.35em; font-weight: bold; color: white; background-color: rgb(200,35,35); border-radius: 50%; box-shadow: 0 0 0 2px rgb(240,240,239);} @media only screen and (max-width: 1350px) { .header { height: 27vh;} .header .header_items { flex-direction: column; justify-content: space-between;} .header .header_items .logoheader { width: 100%; height: 72%;} .header .header_items .logoheader p { width: 100%; text-align: center;} .header .header_items .logoheader img { width: 100%;} .header .header_items .menuheader { width: 100%; height: 18%; flex-flow: row nowrap;} } /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------Main page---------------------------------------------------- */ #mainpage { width: 100vw; height: 100vh; overflow: hidden;} #mainpage input[name="slidepage"], #mainpage input[name="produit"], #mainpage input[name="panier"], #mainpage input[name="informations-legales"], #mainpage input[name="question-decouverte"], #mainpage input[name="contact"] { display: none;} .container { position: absolute; display: flex; width: 194vw; height: 100vh; overflow: hidden; transition: left 1s ease;} #boutique:not(:checked) ~ .container { left: -94vw;} #boutique:checked ~ .container { left: 0%;} .container label { width: 100%; height: 100%;} .boutique { width: 97vw; height: 100vh; flex: 0 0 97vw; overflow-x: hidden; overflow-y: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(31,105,35,0.1) transparent; scrollbar-gutter: stable; background-color: rgb(240,240,239);} .decouverte { width: 97vw; height: 100vh; flex: 0 0 97vw; overflow-x: hidden; overflow-y: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(31,105,35,0.22) transparent; scrollbar-gutter: stable; background-color: rgb(168,220,171);} .boutique::-webkit-scrollbar, .decouverte::-webkit-scrollbar { width: 4px;} .boutique::-webkit-scrollbar-track, .decouverte::-webkit-scrollbar-track { background: transparent;} .boutique::-webkit-scrollbar-thumb, .decouverte::-webkit-scrollbar-thumb { background-color: rgba(31,105,35,0.1); border-radius: 10px;} .boutique::-webkit-scrollbar-thumb:hover, .decouverte::-webkit-scrollbar-thumb:hover { background-color: rgba(31,105,35,0.3);} #boutique:checked ~ .container .boutique { overflow-y: auto;} #boutique:checked ~ .container .decouverte { overflow-y: hidden;} #boutique:not(:checked) ~ .container .boutique { overflow-y: hidden;} #boutique:not(:checked) ~ .container .decouverte { overflow-y: auto;} body:has(input[name="produit"]:checked, input[name="panier"]:checked, input[name="informations-legales"]:checked, input[name="question-decouverte"]:checked) .boutique, body:has(input[name="produit"]:checked, input[name="panier"]:checked, input[name="informations-legales"]:checked, input[name="question-decouverte"]:checked) .decouverte { overflow-y: hidden;} noscript { position: absolute; display: block; width: 100vw; height: 100vh; z-index: 3; background-color: rgba(0,0,0,0.8);} noscript .noscript { margin: 15% 12% 0; padding: 1%; width: 73vw; background-color: white; border: 3px solid rgb(215,215,215); border-radius: 10px;} noscript .noscript p { font-family: 'Please'; text-align: center; font-size: 1.5em; font-weight: bold;} .overlay { position: fixed; display: block; width: 100vw; height: 100vh; background-color: rgba(10,10,10,0.65); opacity: 0; z-index: 0; transition: opacity .3s linear;} .popup { position: fixed; top: 1vw; left: 50%; margin: 0; width: 32vw; height: 95vh; border-radius: 0.5vw 0.2vw 0.2vw 0.5vw; background-color: rgb(240,240,239); overflow-y: hidden; opacity: 0; box-shadow: 0px 0px 15px 2px rgb(20,20,20); transform: translateX(-50%); transition: opacity 0.3s linear; z-index: 0;} .popup > .fermeture { position: absolute; top: 0.5vw; right: 1.2vw; color: rgb(0,0,0); font-size: 2vw; text-align: center; cursor: pointer; z-index: 3;} .popup > .fermeture::before { margin: 0;} .popup > .fermeture:hover { color: rgb(80,80,80);} .popup-scroll { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgb(187,193,188) transparent; overscroll-behavior: contain;} .popup-scroll::-webkit-scrollbar { width: 8px;} .popup-scroll::-webkit-scrollbar-track { background: transparent;} .popup-scroll::-webkit-scrollbar-thumb { background-color: rgba(210,211,211); border-radius: 20px;} .popup-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(168,220,171,0.6);} .boutique:focus, .decouverte:focus, .popup-scroll:focus { outline: none;} input[name="produit"]:checked + .overlay, input[name="panier"]:checked + .overlay, input[name="informations-legales"]:checked + .overlay, input[name="question-decouverte"]:checked + .overlay, input[name="contact"]:checked + .overlay { opacity: 1; z-index: 3;} input[name="produit"]:checked + .overlay + .popup, input[name="panier"]:checked + .overlay + .popup, input[name="informations-legales"]:checked + .overlay + .popup, input[name="question-decouverte"]:checked + .overlay + .popup, input[name="contact"]:checked + .overlay + .popup { opacity: 1; z-index: 4;} input[name="produit"]:checked ~ .container .header, input[name="produit"]:checked ~ .container .nav, input[name="produit"]:checked ~ .container .content, input[name="panier"]:checked ~ .container .header, input[name="panier"]:checked ~ .container .nav, input[name="panier"]:checked ~ .container .content, input[name="informations-legales"]:checked ~ .container .header, input[name="informations-legales"]:checked ~ .container .nav, input[name="informations-legales"]:checked ~ .container .content, input[name="question-decouverte"]:checked ~ .container .header, input[name="question-decouverte"]:checked ~ .container .nav, input[name="question-decouverte"]:checked ~ .container .content, input[name="question-decouverte"]:checked ~ .container .content, input[name="contact"]:checked ~ .container .header, input[name="contact"]:checked ~ .container .nav, input[name="contact"]:checked ~ .container .content { filter: blur(3px);} input[name="informations-legales"]:checked + .overlay { z-index: 5;} input[name="informations-legales"]:checked + .overlay + .popup { z-index: 6;} /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------Boutique---------------------------------------------------- */ .boutique label[for="boutique"] { display: grid; grid-template-columns: 1fr 3vw; grid-template-rows: 15vh 1fr; grid-template-areas: "header nav" "content nav";} .boutique .nav { position: fixed; top: 0; display: flex; width: 3vw; height: 100vh; grid-area: nav; order: 2; justify-content: center; align-items: center; transition: left 1s ease; z-index: 2;} .boutique .nav p { writing-mode: vertical-rl; text-orientation: upright; font-family: Please; color: rgb(60,174,99); font-size: 2.2em; font-weight: bold; text-transform: uppercase;} #boutique:not(:checked) ~ .container .boutique .nav { left: 0;} #boutique:checked ~ .container .boutique .nav { left: 94vw;} .boutique .content { position: relative; padding-top: 1%; width: 97vw; grid-area: content; order: 1;} .boutique .content .promo { width: 100%;} .boutique .content .promo .scroll-layout { display: grid; padding-top: 15px; grid-template-areas: "scroll scroll scroll" "left markers right"; grid-template-columns: 2vw 70vw 2vw; justify-content: center;} .boutique .content .promo .scroll-layout .slidenav { position: relative; top: -630%; margin: 5%; width: 90%; aspect-ratio: 1; align-self: center; font-size: 1.3em; color: rgb(0,0,0); border-radius: 50%; border: 1px solid rgb(50,50,50); background-color: rgb(240,240,239); cursor: pointer; opacity: 0.5;} .boutique .content .promo .scroll-layout .slidenav:hover { opacity: 0.85; scale: 1.1;} .boutique .content .promo .scroll-layout .slidenav.prev { grid-area: left;} .boutique .content .promo .scroll-layout .slidenav.next { grid-area: right;} .boutique .content .promo .scroll-layout .carrousel { display: grid; overflow-x: hidden; scroll-snap-type: x; overscroll-behavior-x: contain; scroll-marker-group: before; grid-area: scroll; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth;} @media (hover: none) { overflow-x: auto;}} .boutique .content .promo .scroll-layout .carrousel::-webkit-scrollbar { display: none;} .boutique .content .promo .scroll-layout .carrousel::scroll-marker-group { position: relative; top: -80%; display: grid; padding: 10px; grid: 18px / auto-flow 18px; gap: 12px; place-content: safe center; scroll-padding: 15px; grid-area: markers; overflow: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth;}} .boutique .content .promo .scroll-layout .carrousel ul { display: grid; grid: 1fr / auto-flow 74vw; gap: 20px;} .boutique .content .promo .scroll-layout .carrousel ul li { display: inline-block; list-style-type: none; scroll-snap-align: start; overflow-y: hidden;} .boutique .content .promo .scroll-layout .carrousel ul li img { width: 100%; height: 100%;} .boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker { content: " "; border: 1px solid rgb(100,100,100); border-radius: 50%; outline-offset: 4px; -webkit-tap-highlight-color: transparent; scroll-snap-align: start;} .boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker:is(:hover, :focus-visible) { border-color: rgb(20,20,20);} .boutique .content .promo .scroll-layout .carrousel ul li::scroll-marker:target-current { background: rgba(190,190,190,0.9); border-color: rgb(20,20,20);} .boutique .content .produits { display: flex; width: 100%; min-height: 1000px; justify-content: flex-start; flex-flow: column nowrap; align-items: center;} .boutique .content .produits h1 { padding: 0.80em; width: 100%; color: rgb(0,0,0); font-family: Please; font-size: 2.5em; text-align: left;} .boutique .content .produits .menu1 { display: inline-flex; margin: 1% auto; padding: 0 7%; height: fit-content; align-items: center; justify-content: center; background-color: rgb(177,213,179); backdrop-filter: blur(10px); border-radius: 25px;} .boutique .content .produits .menu1 li { position: relative; margin: 0 4%; padding: 2% 1%; list-style: none; font-family: sans-serif; color: white; font-weight: bold; cursor: pointer; white-space: nowrap;} .boutique .content .produits .menu1 li::before { position: absolute; top: 0; left:0; width: 100%; height:100%; content: " "; border-radius: 25px; z-index:-1; transition: .2s;} .boutique .content .produits .menu1 li:hover, .boutique .content .produits .menu1 li.actif { color: black;} .boutique .content .produits .menu1 li:hover::before, .boutique .content .produits .menu1 li.actif::before { background: linear-gradient(to bottom, rgb(240,240,239), rgb(233,241,233)); box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.35); transform: scale(1.15);} .boutique .content .produits .menu1 li:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.3vw;} .boutique .content .produits .listeproduits { display: flex; margin-top: 2%; width: 74vw; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: 50px 5%;} .boutique .content .produits .listeproduits .fiche-produit { width: 16%; border-radius: 10px; box-shadow: 0px 0px 20px 10px rgb(255,255,255);} /*300px 400px*/ .boutique .content .produits .listeproduits .fiche-produit:hover { box-shadow: 0px 0px 20px 10px rgb(171,197,172); cursor: pointer;} .boutique .content .produits .listeproduits .fiche-produit .image { display: flex; width: 100%; min-height: 23vh;} .boutique .content .produits .listeproduits .fiche-produit .image img { width: 100%; height: 100%; border-radius: 10px 10px 0 0;} .boutique .content .produits .listeproduits .fiche-produit .titre { width: 100%; height: 7.5vh; border-radius: 0 0 10px 10px;} .boutique .content .produits .listeproduits .fiche-produit .titre.sd { background-image: linear-gradient(225deg, rgba(251,244,243,0.85) 30%, transparent), url('../images/boutique/produits/sd/texture.jpg'); background-position: bottom;} /*linear-gradient rgba(227,83,54,0.9)*/ .boutique .content .produits .listeproduits .fiche-produit .titre.sf { background-image: linear-gradient(225deg, rgba(251,244,243,0.85) 30%, transparent), url('../images/boutique/produits/sf/texture.jpg'); background-position: bottom;} .boutique .content .produits .listeproduits .fiche-produit .titre.se { background-image: linear-gradient(225deg, rgba(251,244,243,0.85) 30%, transparent), url('../images/boutique/produits/se/texture.jpg'); background-position: bottom;} .boutique .content .produits .listeproduits .fiche-produit .titre.sj { background-image: linear-gradient(225deg, rgba(251,244,243,0.85) 30%, transparent), url('../images/boutique/produits/sj/texture.jpg'); background-position: bottom;} .boutique .content .produits .listeproduits .fiche-produit .titre p { padding: 2% 5% 0 0; font-family: Please; font-size: 1.5vw; font-weight: bold; text-align: right; text-transform: uppercase; text-shadow: 2px 2px 0 rgb(255,165,145);} .boutique .content .produits .listeproduits .fiche-produit .titre p span { display: block; font-family: arial, sans-serif; color: rgb(227,154,136); font-size: 0.55em; font-weight: normal; text-transform: lowercase; text-shadow: none;} /*color: rgb(255,200,187);*/ .boutique .content .produits .listeproduits .fiche-produit.masque { display: none;} .boutique .content .produits .aucun-produit { margin-top: 2vw; font-family: Cocogoose; font-size: 0.8vw;} .boutique .content .produits .aucun-produit[hidden] { display: none;} @media only screen and (max-width: 1350px) { .boutique .content .promo .scroll-layout .carrousel ul li.intro span { padding: 14% 5%;} } /* ------------------------------------------------------------------------------------------------------------------- */ /* -----------------------------------------------Détails des produits------------------------------------------------ */ .popup.produit .infos { position: relative; height: 100%;} .popup.produit .infos .titre { position: absolute; left: -1px; padding: 1.7vw 0 0 1.6vw; width: 16vw; aspect-ratio: 1; font-family: Cocogoose; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); background-position: right bottom;} .popup.produit .infos .titre .nom { width: 100%; font-size: 2vw; line-height: 1.05; font-weight: 600; white-space: nowrap; text-transform: uppercase;} .popup.produit .infos .titre .type { font-size: 1.4vw;} .popup.produit.sd .infos .titre { background-image: url(../images/boutique/produits/sd/texture.jpg);} .popup.produit.sf .infos .titre { background-image: url(../images/boutique/produits/sf/texture.jpg);} .popup.produit.se .infos .titre { background-image: url(../images/boutique/produits/se/texture.jpg);} .popup.produit.sj .infos .titre { background-image: url(../images/boutique/produits/sj/texture.jpg);} .popup.produit .infos .photo { margin-left: 4vw; padding-top: 4vw; height: 42%;} .popup.produit .infos .photo img { height: 100%; aspect-ratio: 1;} .popup.produit .infos .resume { padding: 2vw 1vw 1vw; height: 30%;} .popup.produit .infos .resume p { font-family: Cocogoose; font-size: 0.8vw; font-weight: 400; text-align: center;} .popup.produit .infos .baspopup { position: relative; padding-top: 3vw; height: 28%;} .popup.produit .infos .baspopup .fmtstock { display: flex; margin-top: 1vw; padding: 1vw; align-items: center;} .popup.produit .infos .baspopup .fmtstock .legende { width: 4.2vw; font-family: Cocogoose; font-size: 0.76vw; font-weight: 600;} .popup.produit .infos .baspopup .fmtstock .format { padding-left: 0.85vw; font-size: 0.93vw;} .popup.produit .infos .baspopup .fmtstock .stock { padding-left: 1.7vw; font-family: Cocogoose; font-size: 0.7vw; font-weight: 300;} .popup.produit .infos .baspopup .fmtstock .stock.statut1 { color: rgb(37,137,37);} .popup.produit .infos .baspopup .fmtstock .stock.statut2 { color: rgb(200,35,35);} .popup.produit .infos .baspopup .prix { display: flex; margin-top: 1vw; padding: 1vw 0 0.4vw 1vw; width: 20.5vw; align-items: center;} .popup.produit .infos .baspopup .prix .legende { width: 4.2vw; font-family: Cocogoose; font-size: 0.76vw; font-weight: 600;} .popup.produit .infos .baspopup .prix .prixttc { padding-left: 0.85vw;} .popup.produit .infos .baspopup .prix .prixttc .pxuni { display: flex; align-items: start;} .popup.produit .infos .baspopup .prix .prixttc .pxuni .entier { font-size: 1.15vw;} .popup.produit .infos .baspopup .prix .prixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.8vw;} .popup.produit .infos .baspopup .prix .prixttc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.8vw;} .popup.produit .infos .baspopup .prix .prixttc .pxkg { color: rgb(70,70,70); font-size: 0.75em; font-weight: 300;} .popup.produit .infos .baspopup .prix .prixttc .pxkg .symbole { padding-left: 0.2vw;} .popup.produit .infos .baspopup .prix .promo { padding-left: 1.5vw;} .popup.produit .infos .baspopup .prix .promo .reduc { font-size: 0.91vw; color: rgb(37,137,37); font-weight: bold;} .popup.produit .infos .baspopup .prix .promo .reduc .symbole { padding-left: 0.1vw;} .popup.produit .infos .baspopup .prix .promo .libelle { padding-top: 0.16vw; font-size: 0.63vw; color: rgb(37,137,37);} .popup.produit .infos .baspopup .prix .oldprixttc { padding-left: 1.5vw;} .popup.produit .infos .baspopup .prix .oldprixttc .pxuni { display: flex; color: rgb(130,130,130); align-items: start; text-decoration: line-through;} .popup.produit .infos .baspopup .prix .oldprixttc .pxuni .entier { font-size: 0.91vw;} .popup.produit .infos .baspopup .prix .oldprixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.58vw;} .popup.produit .infos .baspopup .prix .oldprixttc .pxuni .symbole { padding-left: 0.1vw; font-size: 0.58vw;} .popup.produit .infos .baspopup .prix .oldprixttc .pxkg { color: rgb(130,130,130); font-size: 0.63vw; font-weight: 300; text-decoration: line-through;} .popup.produit .infos .baspopup .prix .oldprixttc .pxkg .symbole { padding: 0.16vw 0 0 0.1vw;} .popup.produit .infos .baspopup .prix .non { display: none;} .popup.produit .infos .baspopup .achat { position: absolute; right: 0; top: 0; display: flex; padding: 0 0.2vw 0.85vw 0; height: 100%; aspect-ratio: 1; align-items: end; justify-content: end; background-color: rgb(168,220,171); clip-path: polygon(0% 100%, 100% 100%, 100% 0);} .popup.produit .infos .baspopup .achat .bouton-achat { display: flex; width: 78%; align-items: center; background: linear-gradient(to right, rgb(208,243,210) 39%, rgb(50,99,52) 39%); border: 1px solid rgb(19,105,22); border-radius: 1vw; overflow: hidden;} .popup.produit .infos .baspopup .achat .bouton-achat:has(.ajout-panier.disabled) { background: linear-gradient(to right, rgb(240,240,239) 39%, rgb(167,107,107) 39%); border: 1px solid rgb(167 167 167);} .popup.produit .infos .baspopup .achat .bouton-achat .quantite { display: flex; margin: 0; justify-content: center; align-items: center; flex: 2; min-width: 0;} .popup.produit .infos .baspopup .achat .bouton-achat .quantite input { width: 100%; min-width: 0; color: rgb(0,0,0); font-size: clamp(0.65vw, 0.8vw, 0.9vw); text-align: center; font-weight: bold; font-variant-numeric: tabular-nums; border: none; outline: none; background: none; appearance: none; -webkit-appearance: none; -moz-appearance: textfield;} .popup.produit .infos .baspopup .achat .bouton-achat .controles { display:flex; flex-direction:column; justify-content:center; padding: 0.2vw; flex: 1; border-left: 1px solid rgb(120,169,122);} .popup.produit .infos .baspopup .achat .bouton-achat .controles button { width: 100%; font-size: 0.75vw; font-weight: bold; cursor: pointer; background: none; border: none; transition: transform .08s ease, opacity .12s ease; will-change: transform;} .popup.produit .infos .baspopup .achat .bouton-achat .controles button::before { margin: 0;} .popup.produit .infos .baspopup .achat .bouton-achat .controles button:active{ transform: scale(.75);} .popup.produit .infos .baspopup .achat .bouton-achat .controles button.disabled{ color: rgba(16, 16, 16); opacity: 0.4; cursor: default;} .popup.produit .infos .baspopup .achat .bouton-achat .ajout-panier { padding: 0.25vw 0.13vw; flex: 5; font-size: 0.69vw; color: rgb(250,250,249); cursor: pointer; background: none; border: none; border-radius: 0 1vw 1vw 0; transition: filter .15s ease, transform .12s ease; will-change: transform;} .popup.produit .infos .baspopup .achat .bouton-achat .ajout-panier.disabled { color: rgb(240,240,239); cursor: default;} .popup.produit .infos .baspopup .achat .bouton-achat .ajout-panier:hover{ filter: brightness(1.05);} .popup.produit .infos .baspopup .achat .bouton-achat .ajout-panier:active{ transform: scale(.98);} .popup.produit .description { padding: 2vw 0.6vw 0 0.6vw;} .popup.produit .description .surgras { display: flex; justify-content: center; align-items: baseline;} .popup.produit .description .surgras .legende { font-family: Cocogoose; font-size: 0.8vw;} .popup.produit .description .surgras .valeur { padding-left: 0.4vw;} .popup.produit .description .peaux { display: flex; padding-top: 1vw; justify-content: center; align-items: baseline;} .popup.produit .description .peaux p { font-family: Cocogoose; font-size: 0.8vw;} .popup.produit .description .ing { padding-top: 1.5vw;} .popup.produit .description .ing .legende { font-family: Cocogoose; font-size: 0.8vw;} .popup.produit .description .ing .valeur { padding-top: 0.5vw; font-family: Cocogoose; font-size: 0.7vw;} .popup.produit .description .inci { padding: 1.5vw 0 1vw;} .popup.produit .description .inci .legende { font-family: Cocogoose; font-size: 0.45vw;} .popup.produit .description .inci .valeur { padding-top: 0.5vw; font-family: Arial, sans-serif; font-size: 0.45vw;} /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------Panier---------------------------------------------------- */ .popup.panier { width: 40vw;} .popup.panier .section_achat { width: 100%;} .popup.panier .section_achat .banniere { padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.panier .section_achat .banniere img { width: 100%;} .popup.panier .section_achat .message-panier { position: relative; display: flex; margin: 0 0 1.5em; padding: 0.9em 2.5em 0.9em 1.2em; align-items: center; justify-content: center; font-size: 0.9em; line-height: 1.4em; text-align: center; border-radius: 0.4em;} .popup.panier .section_achat .message-panier.attention { color: rgb(144,26,1); background-color: rgb(196 151 110 / 50%); border: 1px solid rgb(196,151,110);} .popup.panier .section_achat .message-panier .fermer-message-panier { position: absolute; top: 50%; right: 0.8em; color: inherit; font-size: 1.2em; cursor: pointer; background: none; border: none; transform: translateY(-50%);} .popup.panier .section_achat .message-panier .fermer-message-panier:hover { opacity: 0.65;} .popup.panier .section_achat .liste_articles { padding: 1.5vw 1vw 0;} .popup.panier .section_achat .liste_articles .article { display: flex; padding-top: 0.5vw; width: 100%; align-items: center;} .popup.panier .section_achat .liste_articles .article .description { display: flex; width: 40%; height: 100%; align-items: center;} .popup.panier .section_achat .liste_articles .article .description .symbole { width: 20%; aspect-ratio: 1; clip-path: polygon(0% 0%, 100% 100%, 0% 100%); background-position: right bottom; background-size: 10vw;} .popup.panier .section_achat .liste_articles .article .description .titre { padding-left: 1%;} .popup.panier .section_achat .liste_articles .article .description .titre .nom { font-family: Cocogoose; font-size: 0.8vw; text-transform: uppercase; font-weight: bold;} .popup.panier .section_achat .liste_articles .article .description .titre .format { font-size: 0.7vw;} .popup.panier .section_achat .liste_articles .article.sd .description .symbole { background-image: url(../images/boutique/produits/sd/texture.jpg);} .popup.panier .section_achat .liste_articles .article.sf .description .symbole { background-image: url(../images/boutique/produits/sf/texture.jpg);} .popup.panier .section_achat .liste_articles .article.se .description .symbole { background-image: url(../images/boutique/produits/se/texture.jpg);} .popup.panier .section_achat .liste_articles .article.sj .description .symbole { background-image: url(../images/boutique/produits/sj/texture.jpg);} .popup.panier .section_achat .liste_articles .article .stock { width: 12%;} .popup.panier .section_achat .liste_articles .article .stock p { margin: 0 auto; padding: 0.1vw 0.4vw; width: fit-content; font-family: Cocogoose; font-size: 0.55vw; color: rgb(255,255,255); font-weight: 300; text-align: center; border-radius: 0.5vw;} .popup.panier .section_achat .liste_articles .article .stock p.statut1 { background-color: rgb(37,137,37);} .popup.panier .section_achat .liste_articles .article .stock p.statut2 { background-color: rgb(200,35,35);} .popup.panier .section_achat .liste_articles .article .prix { display: flex; width: 15%; flex-flow: row wrap; justify-content: end; align-items: center;} .popup.panier .section_achat .liste_articles .article .prix .prixttc { width: 100%;} .popup.panier .section_achat .liste_articles .article .prix .prixttc .pxuni { display: flex; align-items: start; justify-content: end;} .popup.panier .section_achat .liste_articles .article .prix .prixttc .pxuni .entier { font-size: 1vw;} .popup.panier .section_achat .liste_articles .article .prix .prixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.6vw;} .popup.panier .section_achat .liste_articles .article .prix .prixttc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.6vw;} .popup.panier .section_achat .liste_articles .article .prix .promo.no { display: none;} .popup.panier .section_achat .liste_articles .article .prix .promo .reduc { margin-right: 0.4vw; padding: 0.1vw 0.2vw; font-size: 0.6vw; color: rgb(255,255,255); font-style: italic; background-color: rgb(155,0,0); border-radius: 0.5vw;} .popup.panier .section_achat .liste_articles .article .prix .promo .reduc .symbole { padding-left: 0.1vw;} .popup.panier .section_achat .liste_articles .article .prix .oldprixttc.no { display: none;} .popup.panier .section_achat .liste_articles .article .prix .oldprixttc .pxuni { display: flex; color: rgb(130,130,130); align-items: start; text-decoration: line-through; justify-content: end;} .popup.panier .section_achat .liste_articles .article .prix .oldprixttc .pxuni .entier { font-size: 0.8vw;} .popup.panier .section_achat .liste_articles .article .prix .oldprixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.5vw;} .popup.panier .section_achat .liste_articles .article .prix .oldprixttc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.5vw;} .popup.panier .section_achat .liste_articles .article .alerte-stock-ligne { position: relative; top: 3px; right: 6px; margin-left: 4%; width: 2.7%; color: rgb(105,8,7); font-size: 1.6vw; text-align: center;} .popup.panier .section_achat .liste_articles .article .alerte-stock-ligne.icon-attention { cursor: help;} .popup.panier .section_achat .liste_articles .article .alerte-stock-ligne::before { margin-right: 0;} .popup.panier .section_achat .liste_articles .article .bouton-achat { display: flex; margin-left: 1%; width: 13%; align-items: center; border: 1px solid rgb(175,175,175); border-radius: 0.6vw; overflow: hidden;} .popup.panier .section_achat .liste_articles .article .bouton-achat .quantite { display: flex; margin: 0; justify-content: center; align-items: center; flex: 2; min-width: 0;} .popup.panier .section_achat .liste_articles .article .bouton-achat .quantite input { width: 100%; min-width: 0; color: rgb(0,0,0); font-size: clamp(0.6vw, 0.7vw, 0.8vw); text-align: center; font-weight: bold; font-variant-numeric: tabular-nums; border: none; outline: none; background: none; appearance: none; -webkit-appearance: none; -moz-appearance: textfield;} .popup.panier .section_achat .liste_articles .article .bouton-achat .controles { display: flex; flex-direction: column; justify-content: center; padding: 0.1vw; flex: 1; border-left: 1px solid rgb(210,210,210);} .popup.panier .section_achat .liste_articles .article .bouton-achat .controles button { width: 100%; font-size: 0.8vw; cursor: pointer; background: none; border: none; transition: transform .08s ease, opacity .12s ease; will-change: transform;} .popup.panier .section_achat .liste_articles .article .bouton-achat .controles button::before { margin: 0;} .popup.panier .section_achat .liste_articles .article .bouton-achat .controles button:active{ transform: scale(.75);} .popup.panier .section_achat .liste_articles .article .bouton-achat .controles button.disabled{ color: rgba(16, 16, 16); opacity: 0.4; cursor: default;} .popup.panier .section_achat .liste_articles .article .bouton-achat .ctl-supp { padding: 0.4vw 0.1vw 0; flex: 1; border-left: 1px solid rgb(210,210,210);} .popup.panier .section_achat .liste_articles .article .bouton-achat .ctl-supp button { font-size: 1.4vw; background: none; border: none; transition: transform .08s ease, opacity .12s ease; will-change: transform; cursor: pointer;} .popup.panier .section_achat .liste_articles .article .bouton-achat .ctl-supp button::before { margin-right: 0;} .popup.panier .section_achat .liste_articles .article .prixlignettc { margin-right: 2%; width: 14%;} .popup.panier .section_achat .liste_articles .article .prixlignettc .pxuni { display: flex; align-items: start; justify-content: end; font-weight: bold;} .popup.panier .section_achat .liste_articles .article .prixlignettc .pxuni.reduc { color: rgb(130,0,0);} .popup.panier .section_achat .liste_articles .article .prixlignettc .pxuni .entier { font-size: 1vw;} .popup.panier .section_achat .liste_articles .article .prixlignettc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.6vw;} .popup.panier .section_achat .liste_articles .article .prixlignettc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.6vw;} .popup.panier .section_achat .totalarticles { padding: 1vw;} .popup.panier .section_achat .totalarticles .prixttc { display: flex; width: 100%; justify-content: end;} .popup.panier .section_achat .totalarticles .prixttc .pxuni { display: flex; padding: 0.4vw 0.8vw; align-items: start; font-weight: bold; border: 3px solid rgb(128,193,132); border-radius: 1.1vw;} .popup.panier .section_achat .totalarticles .prixttc .pxuni .entier { font-size: 1.1vw;} .popup.panier .section_achat .totalarticles .prixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.7vw;} .popup.panier .section_achat .totalarticles .prixttc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.7vw;} .popup.panier .section_achat .totalarticles .prixttc .pxuni .taxe { padding-left: 0.5vw; font-family: Cocogoose; font-size: 0.7vw; align-self: center; font-weight: normal;} .popup.panier .section_achat .retour { display: flex; margin-bottom: 2vw; justify-content: center;} .popup.panier .section_achat .retour label { padding: 0.4vw 1vw; font-family: Cocogoose; font-size: 0.7vw; cursor: pointer; border-radius: 1vw; background-color: rgb(168 220 171);} .popup.panier .section_achat .retour label::before { font-size: 1vw; vertical-align: middle;} .popup.panier .section_envoi { width: 100%; overflow: visible;} .popup.panier .section_envoi .banniere { margin-bottom: 2vw; padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.panier .section_envoi .banniere img { width: 100%;} .popup.panier .section_envoi .chx-livraison { display: flex; justify-content: center;} .popup.panier .section_envoi .chx-livraison .custom-select { position: relative; width: 100%; max-width: 18vw;} .popup.panier .section_envoi .chx-livraison .select-trigger { display: flex; padding: 0.5vw 1vw; width: 100%; justify-content: space-between; align-items: center; font-family: Cocogoose; font-size: 0.7vw; color: rgb(40,40,40); cursor: pointer; background-color: rgb(168,220,171); border: none; border-radius: 1vw;} .popup.panier .section_envoi .chx-livraison .select-trigger::after { content: "\f00f"; font-family: Bullesdesaison; transition: transform .2s ease;} .popup.panier .section_envoi .chx-livraison .custom-select.open .select-trigger::after { transform: rotate(180deg);} .popup.panier .section_envoi .chx-livraison .select-options { position: absolute; top: calc(100% + 0.3vw); left: 0; margin: 0; padding: 0; width: 100%; list-style: none; background: white; border-radius: 1vw; box-shadow: 0 0 10px rgba(0,0,0,.15); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-5px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 8001;} .popup.panier .section_envoi .chx-livraison .custom-select.open .select-options { opacity: 1; visibility: visible; transform: translateY(0);} .popup.panier .section_envoi .chx-livraison .select-options li { padding: 0.7vw 1vw; font-family: Cocogoose; font-size: 0.7vw; cursor: pointer; transition: background .15s ease, color .15s ease;} .popup.panier .section_envoi .chx-livraison .select-options li:hover { background: rgb(168,220,171);} .popup.panier .section_envoi .chx-livraison .select-options li.selected { color: white; background: rgb(82,117,83);} .popup.panier .section_envoi .delivery-modules { position: relative; margin-top: 0; height: 0; overflow: hidden; transition: height .3s ease, margin-top .25s ease;} .popup.panier .section_envoi .delivery-modules.active { margin-top: 1vw; overflow: visible;} .popup.panier .section_envoi .delivery-modules .delivery-module { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; border-radius: 1vw; background-color: rgb(230,240,231); box-sizing: border-box; transition: opacity .25s ease;} .popup.panier .section_envoi .delivery-modules .delivery-module.active { position: relative; opacity: 1; pointer-events: auto;} .popup.panier .section_envoi .delivery-modules .delivery-module .remise-info { padding: 1vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .remise-info p { font-family: Cocogoose; font-size: 0.62vw; line-height: 1.5; color: rgb(60,60,60);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc { padding: 0 1vw 1vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .modifier-coordonnees { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form { display: flex; padding: 0 7vw 1vw; flex-direction: column; gap: 0.7vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-formulaire { display: contents;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .field { display: flex; flex-direction: column;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form label { margin-bottom: 0.25vw; font-family: Cocogoose; font-size: 0.60vw; font-weight: bold;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form input { padding: 0.55vw 0.8vw; font-family: Arial, sans-serif; font-size: 0.70vw; border: 1px solid rgb(180,190,181); border-radius: 0.7vw; background-color: white; outline: none; transition: border-color .15s ease, box-shadow .15s ease;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form input:focus { border-color: rgb(60,174,99); box-shadow: 0 0 0 2px rgba(60,174,99,.15);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form input[aria-expanded="true"] { border-radius: 0.7vw 0.7vw 0 0;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-autocomplete { position: relative;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-autocomplete-etat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions { position: absolute; top: 100%; left: 0; margin: 0; padding: 0; width: 100%; max-height: 12vw; list-style: none; overflow-y: auto; background-color: white; border: 1px solid rgb(180,190,181); border-top: none; border-radius: 0 0 0.7vw 0.7vw; box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.18); z-index: 30;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions[hidden] { display: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions li { margin: 0; padding: 0;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions li:not(:last-child) { border-bottom: 1px solid rgb(225,225,225);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion { display: flex; padding: 0.6vw 0.7vw; width: 100%; align-items: center; gap: 0.55vw; font-family: Arial, sans-serif; font-size: 0.68vw; line-height: 1.3; color: rgb(45,45,45); text-align: left; cursor: pointer; background-color: white; border: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion:hover, .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion.active { background-color: rgb(238,245,239);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion-repere { width: 0.85vw; height: 0.85vw; flex: 0 0 auto; color: rgb(170,170,170);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion-contenu { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion-voie { color: rgb(45,45,45);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion-voie strong { font-weight: bold; color: rgb(20,20,20);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-suggestions .adresse-suggestion-localite { margin-left: 0.35em; color: rgb(155,155,155); font-size: 0.92em;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .enregistrer-coordonnees { align-self: flex-end; padding: 0.55vw 1vw; font-family: Cocogoose; font-size: 0.62vw; color: white; cursor: pointer; background-color: rgb(82,117,83); border: none; border-radius: 0.7vw; transition: background-color .15s ease, transform .1s ease;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .enregistrer-coordonnees:hover { background-color: rgb(60,95,61);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .enregistrer-coordonnees:active { transform: scale(.98);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .choix-adresse-facturation label { display: flex; margin: 0.3vw 0; align-items: center; gap: 0.5vw; font-weight: normal; cursor: pointer;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .choix-adresse-facturation input { padding: 0; width: 1vw; height: 1vw; flex: 0 0 auto; cursor: pointer; box-shadow: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-facturation-distincte { display: contents; margin: 0; padding: 0; min-width: 0; border: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .adresse-facturation-distincte .adresse-formulaire-titre { margin: 0.5vw 0 0.2vw; width: 100%; font-family: Cocogoose; font-size: 0.68vw; color: rgb(78,92,125);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .remise-form .choix-adresse-facturation:has(input:checked) + .adresse-facturation-distincte { display: none;} .popup.panier .section_envoi .delivery-modules .delivery-module[data-delivery$="-domicile"] .destinataire-bloc.enregistre:has(> .coordonnees-adresse ~ .coordonnees-adresse) > .coordonnees-destinataire { flex-basis: 100%;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees { position: relative; padding: 1vw 3.2vw 1vw 1vw; width: 100%; min-height: 7.5vw; font-family: Arial, sans-serif; font-size: 0.72vw; line-height: 1.55; background-color: white; border: 1px solid rgb(195,195,195); border-radius: 0.75vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .coordonnees-titre { margin-bottom: 0.55vw; color: rgb(135,135,135); font-size: 0.68vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .coordonnees-contenu p { overflow-wrap: anywhere;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .coordonnees-nom { font-weight: bold;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .modifier-coordonnees-bouton { position: absolute; top: 0.8vw; right: 0.8vw; display: flex; width: 1.8vw; height: 1.8vw; justify-content: center; align-items: center; color: rgb(78,92,125); cursor: pointer; background-color: white; border: 2px solid rgb(140,151,180); border-radius: 50%;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .modifier-coordonnees-bouton:hover { color: rgb(45,60,95); border-color: rgb(78,92,125);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .modifier-coordonnees-bouton svg { width: 1.05vw; height: 1.05vw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .coordonnees-enregistrees .modifier-coordonnees-bouton .texte-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre { display: flex; padding-top: 1vw; flex-wrap: wrap; align-items: stretch; gap: 1vw;} .popup.panier .section_envoi .delivery-modules .delivery-module .remise-info + .destinataire-bloc.enregistre { padding-top: 0;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre > .coordonnees-enregistrees { flex: 1 1 calc(50% - 0.5vw); width: auto; min-width: 0;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre > .destinataire-info, .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre > .remise-form { width: 100%;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre .remise-form { display: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre .destinataire-info { display: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre .modifier-coordonnees:checked ~ .coordonnees-enregistrees { display: none;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre .modifier-coordonnees:checked ~ .remise-form { display: flex;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre .modifier-coordonnees:checked ~ .destinataire-info { display: block;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .point-relais-enregistre { padding-right: 1vw; min-height: auto; border-color: rgb(181,70,109);} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .point-relais-enregistre .mondialrelay-selection-adresse, .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc .point-relais-enregistre .mondialrelay-selection-ville { text-transform: lowercase;} .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre:has(> .coordonnees-enregistrees ~ .coordonnees-enregistrees ~ .coordonnees-enregistrees) > .point-relais-enregistre { flex-basis: 100%;} #module-mondialrelay-relais .mondialrelay-form + .destinataire-bloc { padding-top: 1vw;} #mondialrelay-widget .MR-Widget.MR-Widget-Responsive { overflow: visible !important;} #mondialrelay-widget .MR-Widget.MR-Widget-Responsive .MRW-Content { position: relative !important;} #mondialrelay-widget .MR-Widget.MR-Widget-Responsive .MRW-LockerModal { position: absolute !important; top: var(--locker-modal-top, 50%) !important; left: var(--locker-modal-left, 50%) !important; transform: translate(-50%, -58%) !important; z-index: 30 !important;} #mondialrelay-widget .MR-Widget.MR-Widget-Responsive .MRW-Content.locker-modal-ouverte .MRW-Results { filter: blur(3px); opacity: 0.55; pointer-events: none; user-select: none;} #mondialrelay-widget .PR-List-Item.bulles-selectionne { background-color: rgba(181,70,109,0.35) !important;} .popup.panier .section_envoi .totalenvoi { padding: 1vw;} .popup.panier .section_envoi .totalenvoi .prixttc { display: flex; width: 100%; justify-content: end;} .popup.panier .section_envoi .totalenvoi .prixttc .pxuni { display: flex; padding: 0.4vw 0.8vw; align-items: start; font-weight: bold; border: 3px solid rgb(128,193,132); border-radius: 1.1vw;} .popup.panier .section_envoi .totalenvoi .prixttc .pxuni .entier { font-size: 1.1vw;} .popup.panier .section_envoi .totalenvoi .prixttc .pxuni .decimal { padding-left: 0.1vw; font-size: 0.7vw;} .popup.panier .section_envoi .totalenvoi .prixttc .pxuni .symbole { padding-left: 0.2vw; font-size: 0.7vw;} .popup.panier .section_envoi .totalenvoi .prixttc .pxuni .taxe { padding-left: 0.5vw; font-family: Cocogoose; font-size: 0.7vw; align-self: center; font-weight: normal;} .popup.panier .section_paiement { margin-top: 2vw; width: 100%;} .popup.panier .section_paiement .banniere { margin-bottom: 2vw; padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.panier .section_paiement .banniere img { width: 100%;} .popup.panier .section_paiement .totalcommande { display: flex; margin: 0 1vw 1vw; align-items: stretch; overflow: hidden; background-color: white; border: 3px solid rgb(128,193,132); border-radius: 1.1vw;} .popup.panier .section_paiement .totalcommande .prixttc { display: flex; padding: 0.8vw 1vw; flex: 1 1 auto; justify-content: end; align-items: center;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni { display: flex; padding: 0; width: 100%; justify-content: end; align-items: center; font-weight: bold;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .comment { margin-right: auto; padding-right: 1vw; text-align: left; font-size: 0.8vw;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .comment em { font-size: 0.7vw; font-weight: normal;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .entier { font-size: 1.1vw;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .decimal { padding: 0.25vw 0 0 0.1vw; font-size: 0.7vw; align-self: start;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .symbole { padding: 0.25vw 0 0 0.2vw; font-size: 0.7vw; align-self: start;} .popup.panier .section_paiement .totalcommande .prixttc .pxuni .taxe { padding-left: 0.5vw; font-family: Cocogoose; font-size: 0.7vw; align-self: center; font-weight: normal;} .popup.panier .section_paiement .validation-commande { display: flex; margin: 0; padding: 0.8vw 1vw; min-width: 13vw; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; gap: 0.35vw; border-left: 1px solid rgb(128,193,132);} .popup.panier .section_paiement .bouton-recapitulatif { padding: 0.65vw 1.2vw; width: 100%; font-family: Cocogoose; font-size: 0.72vw; font-weight: normal; font-synthesis: none; color: rgb(240,240,239); white-space: nowrap; cursor: pointer; background-color: rgb(31,105,35); border: none; border-radius: 0.8vw; transition: background-color .15s ease, transform .1s ease, opacity .15s ease;} .popup.panier .section_paiement .bouton-recapitulatif:not(:disabled):hover { background-color: rgb(16,49,18);} .popup.panier .section_paiement .bouton-recapitulatif:not(:disabled):active { transform: scale(.98);} .popup.panier .section_paiement .bouton-recapitulatif:disabled { color: rgb(110,110,110); cursor: not-allowed; background-color: rgb(220,220,220); opacity: 0.65;} .popup.panier .section_paiement .message-commande-incomplete { display: flex; margin: 0; max-width: 13vw; justify-content: flex-start; align-items: flex-start; gap: 0.2vw; font-family: Cocogoose; font-size: 0.6vw; line-height: 1.25; color: rgb(126,82,24); text-align: left;} .popup.panier .section_paiement .message-commande-incomplete .icone-message-commande { margin-top: 0.1vw; width: 0.65vw; height: 0.65vw; flex: 0 0 0.65vw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;} /* Récapitulatif avant paiement */ .popup.panier.recapitulatif-avant-paiement .banniere-recapitulatif { padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.panier.recapitulatif-avant-paiement .banniere-recapitulatif h1 { margin: 0;} .popup.panier.recapitulatif-avant-paiement .banniere-recapitulatif img { display: block; width: 100%;} .popup.panier.recapitulatif-avant-paiement .recapitulatif-commande, .popup.panier.recapitulatif-avant-paiement .coordonnees-commande, .popup.panier.recapitulatif-avant-paiement .section_paiement { padding: 1vw 1.4vw 0.4vw; width: 100%; font-family: Cocogoose; font-size: 0.65vw; line-height: 1.4; color: rgb(40,40,40);} .popup.panier.recapitulatif-avant-paiement .lignes-commande, .popup.panier.recapitulatif-avant-paiement .livraison-commande { width: 100%; table-layout: fixed; border: 1px solid rgb(195,215,197); border-collapse: separate; border-spacing: 0; border-radius: 0.4vw; background-color: white; overflow: hidden;} .popup.panier.recapitulatif-avant-paiement .lignes-commande caption, .popup.panier.recapitulatif-avant-paiement .livraison-commande caption { position: relative; padding: 0 1.7vw 0.2vw 0; min-height: 1.35vw; font-size: 0.75vw; font-weight: bold; text-align: left; color: rgb(30,30,30);} .popup.panier.recapitulatif-avant-paiement .lignes-commande caption > span, .popup.panier.recapitulatif-avant-paiement .livraison-commande caption > span { display: block;} .popup.panier.recapitulatif-avant-paiement .lignes-commande .modifier-recapitulatif-bouton, .popup.panier.recapitulatif-avant-paiement .livraison-commande .modifier-recapitulatif-bouton { position: absolute; top: -0.1vw; right: 0; display: flex; padding: 0; width: 1.35vw; height: 1.35vw; justify-content: center; align-items: center; color: rgb(78,92,125); cursor: pointer; background-color: white; border: 1.5px solid rgb(140,151,180); border-radius: 50%;} .popup.panier.recapitulatif-avant-paiement .lignes-commande .modifier-recapitulatif-bouton:hover, .popup.panier.recapitulatif-avant-paiement .livraison-commande .modifier-recapitulatif-bouton:hover { color: rgb(45,60,95); border-color: rgb(78,92,125);} .popup.panier.recapitulatif-avant-paiement .lignes-commande .modifier-recapitulatif-bouton:focus-visible, .popup.panier.recapitulatif-avant-paiement .livraison-commande .modifier-recapitulatif-bouton:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.15vw;} .popup.panier.recapitulatif-avant-paiement .lignes-commande .modifier-recapitulatif-bouton svg, .popup.panier.recapitulatif-avant-paiement .livraison-commande .modifier-recapitulatif-bouton svg { width: 0.78vw; height: 0.78vw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;} .popup.panier.recapitulatif-avant-paiement .lignes-commande th, .popup.panier.recapitulatif-avant-paiement .lignes-commande td, .popup.panier.recapitulatif-avant-paiement .livraison-commande th, .popup.panier.recapitulatif-avant-paiement .livraison-commande td { padding: 0.65vw 0.45vw; vertical-align: top; border-bottom: 1px solid rgb(205,220,206);} .popup.panier.recapitulatif-avant-paiement .lignes-commande thead th, .popup.panier.recapitulatif-avant-paiement .livraison-commande thead th { font-size: 0.6vw; font-weight: bold; color: rgb(31,105,35); background-color: rgb(220,240,222);} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody th, .popup.panier.recapitulatif-avant-paiement .livraison-commande tbody th { font-family: Arial, sans-serif; font-weight: normal; text-align: left; overflow-wrap: anywhere;} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody td, .popup.panier.recapitulatif-avant-paiement .livraison-commande tbody td { font-family: Arial, sans-serif; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody tr:last-child > *, .popup.panier.recapitulatif-avant-paiement .livraison-commande tbody tr:last-child > * { border-bottom: none;} .popup.panier.recapitulatif-avant-paiement .lignes-commande thead th { width: 22%; text-align: right;} .popup.panier.recapitulatif-avant-paiement .lignes-commande thead th:first-child { width: 44%; text-align: left;} .popup.panier.recapitulatif-avant-paiement .lignes-commande thead th:nth-child(2) { width: 12%; text-align: center;} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody td:nth-child(2) { text-align: center;} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody td:last-child { font-weight: bold;} .popup.panier.recapitulatif-avant-paiement .lignes-commande tbody tr:nth-child(even) { background-color: rgb(245,249,245);} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .livraison-commande thead th:first-child { width: 78%; text-align: left;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .livraison-commande thead th:last-child { width: 22%; text-align: right;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .livraison-commande td:last-child { font-weight: bold;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .informations-livraison-commande { display: grid; margin-top: 0.55vw; grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr)); gap: 0.55vw;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .informations-livraison-commande > * { min-width: 0;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande h3 { margin: 0; padding: 0.5vw 0.8vw; font-family: Cocogoose; font-size: 0.6vw; font-weight: bold; color: rgb(31,105,35); background-color: rgb(220,240,222);} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .destinataire-commande, .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .adresse-commande { display: flex; padding: 0; min-width: 0; flex-direction: column; font-family: Arial, sans-serif; background-color: white; border: 1px solid rgb(195,215,197); border-radius: 0.6vw; overflow: hidden;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .details-coordonnees-commande { padding: 0.55vw 0.8vw; flex: 1; font-family: Arial, sans-serif; font-size: 0.62vw; line-height: 1.4; font-style: normal; background-color: white; overflow-wrap: anywhere;} .popup.panier.recapitulatif-avant-paiement .section_paiement { margin-top: 0;} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande { width: 100%; font-family: Cocogoose; font-size: 0.68vw; line-height: 1.35; table-layout: fixed; border: 1px solid rgb(195,215,197); border-spacing: 0; border-radius: 0.4vw; background-color: white; overflow: hidden;} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande caption { padding-bottom: 0.2vw; font-size: 0.75vw; font-weight: bold; text-align: left; color: rgb(30,30,30);} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande th, .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande td { padding: 0.3vw 0.75vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande th { font-weight: normal; text-align: left;} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande td { font-family: Arial, sans-serif; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;} .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande .montant-total-commande th, .popup.panier.recapitulatif-avant-paiement .section_paiement .totaux-commande .montant-total-commande td { padding-top: 0.5vw; font-size: 0.85vw; font-weight: bold; color: rgb(31,105,35); border-top: 2px solid rgb(128,193,132);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif { display: flex; margin-top: 0.55vw; padding: 0.25vw 0.75vw 0; align-items: flex-start; justify-content: space-between; gap: 1vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .conditions-paiement { display: flex; flex: 1; flex-direction: column; gap: 0.45vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .consigne-paiement { padding-top: 0.4vw; font-family: Cocogoose; font-size: 0.6vw; line-height: 1.45; color: rgb(55,55,55);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .acceptation-cgv { display: flex; align-items: flex-start; gap: 0.35vw; font-family: Cocogoose; font-size: 0.58vw; line-height: 1.4; color: rgb(55,55,55);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .acceptation-cgv input { margin-top: 0.08vw; width: 0.7vw; height: 0.7vw; flex: 0 0 auto; accent-color: rgb(31,105,35); cursor: pointer;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .acceptation-cgv p { margin: 0;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .acceptation-cgv label { cursor: pointer;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .ouvrir-cgv { padding: 0; font: inherit; color: rgb(31,105,35); text-decoration: underline; background: none; border: 0; cursor: pointer;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .ouvrir-cgv:hover { color: rgb(16,49,18);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .ouvrir-cgv:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.1vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement { display: flex; width: 13vw; flex-direction: column; align-items: stretch; gap: 0.2vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .bouton-paiement { padding: 0.55vw 1vw; font-family: Cocogoose; font-size: 0.65vw; font-weight: normal; font-synthesis: none; color: rgb(240,240,239); cursor: pointer; background-color: rgb(31,105,35); border: none; border-radius: 0.8vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .bouton-paiement:not(:disabled):hover { background-color: rgb(16,49,18);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .bouton-paiement:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.15vw;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .bouton-paiement:disabled { color: rgb(145,145,145); cursor: not-allowed; background-color: rgb(230,230,230);} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .message-paiement-indisponible { display: flex; justify-content: center; align-items: flex-start; gap: 0.2vw; font-family: Cocogoose; font-size: 0.52vw; line-height: 1.35; color: rgb(125,78,26); text-align: center;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement .message-paiement-indisponible .icone-message-commande { margin-top: 0.05vw; width: 0.6vw; height: 0.6vw; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;} @media only screen and (max-width: 768px) { .popup.panier .section_envoi .delivery-modules .delivery-module .destinataire-bloc.enregistre > .coordonnees-enregistrees { flex-basis: 100%;} .popup.panier.recapitulatif-avant-paiement .coordonnees-commande .informations-livraison-commande { grid-template-columns: 1fr;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif { flex-direction: column;} .popup.panier.recapitulatif-avant-paiement .section_paiement .validation-paiement-recapitulatif .action-paiement { width: 100%;} } /* ------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------------Contact----------------------------------------------------- */ .popup.contact { width: 42vw;} .popup.contact .contact-contenu { min-height: 100%; font-family: Arial, sans-serif; background-color: rgb(240,240,239);} .popup.contact .contact-contenu .banniere { margin-bottom: 0.5vw; padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.contact .contact-contenu .banniere img { width: 100%;} .popup.contact .contact-contenu .formulaire-contact { padding: 1.5vw 2vw 2vw; font-size: 0.72vw;} .popup.contact .contact-contenu .formulaire-contact .introduction-formulaire { margin-bottom: 1.3vw; line-height: 1.55;} .popup.contact .contact-contenu .formulaire-contact .champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;} .popup.contact .contact-contenu .formulaire-contact fieldset { margin-bottom: 1.2vw; padding: 1vw 1.2vw 1.2vw; border: 1px solid rgb(190,210,191); border-radius: 0.6vw;} .popup.contact .contact-contenu .formulaire-contact legend { padding: 0 0.5vw; font-size: 0.82vw; font-weight: bold; color: rgb(31,105,35);} .popup.contact .contact-contenu .formulaire-contact label { display: flex; height: auto; flex: 1; flex-direction: column; gap: 0.35vw;} .popup.contact .contact-contenu .formulaire-contact label + label { margin-top: 0.9vw;} .popup.contact .contact-contenu .formulaire-contact label > span { font-weight: bold;} .popup.contact .contact-contenu .formulaire-contact label strong, .popup.contact .contact-contenu .formulaire-contact .champs-obligatoires strong { color: rgb(145,30,20);} .popup.contact .contact-contenu .formulaire-contact .ligne-formulaire { display: flex; margin-bottom: 0.9vw; gap: 1vw;} .popup.contact .contact-contenu .formulaire-contact .ligne-formulaire label + label { margin-top: 0;} .popup.contact .contact-contenu .formulaire-contact input, .popup.contact .contact-contenu .formulaire-contact select, .popup.contact .contact-contenu .formulaire-contact textarea { padding: 0.55vw 0.7vw; width: 100%; font-family: Arial, sans-serif; font-size: 0.72vw; color: rgb(30,30,30); background-color: white; border: 1px solid rgb(155,170,156); border-radius: 0.4vw;} .popup.contact .contact-contenu .formulaire-contact textarea { resize: vertical;} .popup.contact .contact-contenu .formulaire-contact input:focus-visible, .popup.contact .contact-contenu .formulaire-contact select:focus-visible, .popup.contact .contact-contenu .formulaire-contact textarea:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.15vw;} .popup.contact .contact-contenu .formulaire-contact .contact-numero-commande[hidden] { display: none;} .popup.contact .contact-contenu .formulaire-contact .confidentialite-contact { margin-top: 0.3vw; color: rgb(75,75,75); font-size: 0.65vw; font-style: italic; line-height: 1.5;} .popup.contact .contact-contenu .formulaire-contact .champs-obligatoires { font-size: 0.65vw; color: rgb(90,90,90);} .popup.contact .contact-contenu .formulaire-contact .actions-formulaire { display: flex; justify-content: flex-end;} .popup.contact .contact-contenu .formulaire-contact .actions-formulaire button { padding: 0.6vw 1vw; color: rgb(240,240,239); font-size: 0.72vw; font-weight: bold; cursor: pointer; background-color: rgb(31,105,35); border: none; border-radius: 0.8vw;} .popup.contact .contact-contenu .formulaire-contact .actions-formulaire button:not(:disabled):hover { background-color: rgb(16,49,18);} .popup.contact .contact-contenu .formulaire-contact .actions-formulaire button:disabled { cursor: not-allowed; opacity: 0.45;} /* ------------------------------------------------------------------------------------------------------------------- */ /* --------------------------------------Détails des informations juridiques------------------------------------------ */ .popup.informations-legales { width: 50vw;} .popup.informations-legales .informations-legales-contenu { min-height: 20vw; font-family: Arial, sans-serif;} .popup.informations-legales .informations-legales-contenu .banniere { margin-bottom: 0.5vw; padding: 0 10%; width: 100%; background-color: rgb(168,220,171);} .popup.informations-legales .informations-legales-contenu .banniere img { width: 100%;} .popup.informations-legales .informations-legales-contenu .fond-menu { position: sticky; top: 0; padding-top: 1.5vw; background-color: rgb(240 240 239 / 90%); z-index: 2;} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales { display: flex; margin: 0 8%; padding: 0 5%; height: fit-content; align-items: center; justify-content: center; background-color: rgb(177,213,179); backdrop-filter: blur(10px); border-radius: 25px;} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a { position: relative; margin: 0 1.2%; padding: 1.2% 1%; font-family: sans-serif; color: white; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; z-index: 0;} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; border-radius: 25px; z-index: -1; transition: .2s;} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a:hover, .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a.actif { color: black;} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a:hover::before, .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a.actif::before { background: linear-gradient(to bottom, rgb(240,240,239), rgb(233,241,233)); box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.35); transform: scale(1.07);} .popup.informations-legales .informations-legales-contenu .fond-menu .menu-informations-legales a:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.3vw;} .popup.informations-legales .informations-legales-contenu .documents-juridiques { padding: 1vw 2vw 2vw;} .popup.informations-legales .informations-legales-contenu .document-juridique { padding: 1vw 0; scroll-margin-top: 4vw;} .popup.informations-legales .informations-legales-contenu .document-juridique + .document-juridique { margin-top: 1vw; padding-top: 2vw; border-top: 1px solid rgb(168,220,171);} .popup.informations-legales .informations-legales-contenu .document-juridique > h1 { margin-bottom: 0.5vw; font-family: Arial, sans-serif; font-size: 1.2vw; color: rgb(31,105,35);} .popup.informations-legales .informations-legales-contenu .document-juridique h2 { margin: 1.3vw 0 0.5vw; font-family: Arial, sans-serif; font-size: 0.9vw; color: rgb(31,105,35);} .popup.informations-legales .informations-legales-contenu .document-juridique h3 { margin: 0.9vw 0 0.4vw; font-family: Arial, sans-serif; font-size: 0.78vw; color: rgb(45,90,50);} .popup.informations-legales .informations-legales-contenu .document-juridique p { margin-bottom: 0.65vw; font-size: 0.72vw; line-height: 1.55; text-align: justify;} .popup.informations-legales .informations-legales-contenu .document-juridique .version-document { margin-bottom: 1.2vw; font-size: 0.65vw; color: rgb(90,90,90); text-align: right;} .popup.informations-legales .informations-legales-contenu .document-juridique .liste-document { margin: 0.2vw 0 0.9vw 1.5vw; font-size: 0.72vw; line-height: 1.55;} .popup.informations-legales .informations-legales-contenu .document-juridique .liste-document li { padding: 0.15vw 0 0.15vw 0.3vw;} .popup.informations-legales .informations-legales-contenu .encadre-legal { margin: 1.3vw 0; padding: 1.2vw 1.4vw; color: rgb(35,70,38); background-color: rgb(228,240,229); border: 1px solid rgb(128,193,132); border-radius: 0.8vw;} .popup.informations-legales .informations-legales-contenu .encadre-legal .titre-encadre { margin-top: 0; font-size: 0.85vw;} .popup.informations-legales .informations-legales-contenu .encadre-legal p:last-child { margin-bottom: 0;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation { margin-top: 1.5vw; padding: 1.4vw; font-size: 0.72vw; background-color: rgb(247,247,246); border: 1px solid rgb(168,220,171); border-radius: 0.8vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .introduction-formulaire { margin-bottom: 1.2vw; line-height: 1.55; text-align: left;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation fieldset { margin-bottom: 1.2vw; padding: 1vw 1.2vw 1.2vw; border: 1px solid rgb(190,210,191); border-radius: 0.6vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation legend { padding: 0 0.5vw; font-size: 0.82vw; font-weight: bold; color: rgb(31,105,35);} .popup.informations-legales .informations-legales-contenu .formulaire-retractation label { display: flex; height: auto; flex-direction: column; gap: 0.35vw; flex: 1;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation label > span { font-weight: bold;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation label strong, .popup.informations-legales .informations-legales-contenu .formulaire-retractation .champs-obligatoires strong, .popup.informations-legales .informations-legales-contenu .formulaire-retractation legend strong { color: rgb(145,30,20);} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .ligne-formulaire { display: flex; margin-bottom: 0.9vw; gap: 1vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .ligne-formulaire:last-child { margin-bottom: 0;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation input, .popup.informations-legales .informations-legales-contenu .formulaire-retractation textarea { padding: 0.55vw 0.7vw; width: 100%; font-family: Arial, sans-serif; font-size: 0.72vw; color: rgb(30,30,30); background-color: white; border: 1px solid rgb(155,170,156); border-radius: 0.4vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation textarea { resize: vertical;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation input:focus-visible, .popup.informations-legales .informations-legales-contenu .formulaire-retractation textarea:focus-visible { outline: 2px solid rgb(31,105,35); outline-offset: 0.15vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .aide-formulaire { margin-bottom: 0.7vw; color: rgb(75,75,75); text-align: left;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .choix-retractation { display: flex; margin-bottom: 0.9vw; gap: 1.5vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .choix-retractation label, .popup.informations-legales .informations-legales-contenu .formulaire-retractation .confirmation-retractation { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .choix-retractation input, .popup.informations-legales .informations-legales-contenu .formulaire-retractation .confirmation-retractation input { width: auto;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .choix-retractation label > span, .popup.informations-legales .informations-legales-contenu .formulaire-retractation .confirmation-retractation > span { font-weight: normal;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .produits-retractation[hidden] { display: none;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .confirmation-retractation { margin: 0.3vw 0 0.8vw; gap: 0.5vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .champs-obligatoires { font-size: 0.65vw; color: rgb(90,90,90); text-align: left;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .actions-formulaire { display: flex; justify-content: flex-end;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .actions-formulaire button { padding: 0.6vw 1vw; color: rgb(240,240,239); font-size: 0.72vw; font-weight: bold; cursor: pointer; background-color: rgb(31,105,35); border: none; border-radius: 0.8vw;} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .actions-formulaire button:not(:disabled):hover { background-color: rgb(16,49,18);} .popup.informations-legales .informations-legales-contenu .formulaire-retractation .actions-formulaire button:disabled { cursor: not-allowed; opacity: 0.45;} /* ------------------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------------Boîte de dialogue------------------------------------------------- */ body:has(.boite-dialogue[open]) { overflow-y: hidden;} .boite-dialogue { position: fixed; inset: 0; margin: auto; padding: 0; width: 32vw; color: rgb(30,30,30); border: none; border-radius: 0.5vw; background: url(../images/templates/bulles.png) 0% 0% / contain no-repeat, rgb(240,240,239); box-shadow: 0 0 15px 2px rgb(20,20,20); overflow: hidden;} .boite-dialogue::backdrop { background-color: rgba(10,10,10,0.65); backdrop-filter: blur(3px);} .boite-dialogue .boite-dialogue-contenu { max-height: 80vh; overflow-y: auto;} .boite-dialogue .boite-dialogue-entete { display: flex; padding: 1vw 1.2vw; align-items: center; justify-content: space-between; background-color: rgb(168,220,171);} .boite-dialogue[data-type="attention"] .boite-dialogue-entete { color: rgb(144 26 1); background-color: rgb(196 151 110 / 50%);} .boite-dialogue[data-type="erreur"] .boite-dialogue-entete { color: rgb(240,240,239); background-color: rgb(114 10 10 / 50%);} .boite-dialogue[data-type="succes"] .boite-dialogue-entete { color: rgb(240,240,239); background-color: rgb(0 99 6 / 50%);} .boite-dialogue .boite-dialogue-entete h2 { font-family: Cocogoose; font-size: 1vw; font-weight: 600;} .boite-dialogue .boite-dialogue-fermer { color: inherit; font-size: 1.5vw; cursor: pointer; background: none; border: none;} .boite-dialogue .boite-dialogue-fermer::before { margin: 0;} .boite-dialogue .boite-dialogue-fermer:hover { opacity: 0.65;} .boite-dialogue .boite-dialogue-messages { padding: 1.4vw 1.5vw 0.5vw; font-family: Cocogoose; font-size: 0.8vw; line-height: 1.5;} .boite-dialogue .boite-dialogue-messages p + p { padding-top: 0.5vw;} .boite-dialogue .boite-dialogue-messages .nombre { font-family: Arial, sans-serif;} .boite-dialogue .boite-dialogue-messages .reference, .boite-dialogue .boite-dialogue-messages .adresse-electronique { font-family: Consolas, "Courier New", monospace; font-weight: bold; overflow-wrap: anywhere; user-select: all;} .boite-dialogue .boite-dialogue-messages .reference { letter-spacing: 0.02em;} .boite-dialogue .boite-dialogue-actions { display: flex; padding: 0.8vw 1.5vw 1vw; justify-content: flex-end; gap: 0.7vw;} .boite-dialogue .boite-dialogue-actions .icon { font-size: 1vw; vertical-align: middle;} .boite-dialogue .boite-dialogue-actions .icone-apres::before { margin-right: 0; margin-left: 0.4em;} .boite-dialogue .boite-dialogue-actions button { padding: 0.55vw 0.9vw; font-size: 0.72vw; font-weight: bold; cursor: pointer; border: 1px solid rgb(31,105,35); border-radius: 0.8vw;} .boite-dialogue[data-type="attention"] .boite-dialogue-actions button { border: 1px solid rgb(92,20,5);} .boite-dialogue[data-type="erreur"] .boite-dialogue-actions button { border: 1px solid rgb(64,8,8);} .boite-dialogue .boite-dialogue-actions .principale { color: rgb(240, 240, 239); background-color: rgb(66,130,68);} .boite-dialogue[data-type="attention"] .boite-dialogue-actions .principale { background-color: rgb(155,97,38);} .boite-dialogue[data-type="erreur"] .boite-dialogue-actions .principale { background-color: rgb(167,107,107);} .boite-dialogue .boite-dialogue-actions .secondaire { color: rgb(31,105,35); background-color: rgb(240,240,239);} .boite-dialogue[data-type="attention"] .boite-dialogue-actions .secondaire { color: rgb(144,26,1);} .boite-dialogue[data-type="erreur"] .boite-dialogue-actions .secondaire { color: rgb(167,107,107);} .boite-dialogue .boite-dialogue-actions button:hover { color: rgb(240,240,239); background-color: rgb(6,83,11);} .boite-dialogue[data-type="attention"] .boite-dialogue-actions button:hover { color: rgb(240,240,239); background-color: rgb(148,69,50);} .boite-dialogue[data-type="erreur"] .boite-dialogue-actions button:hover { color: rgb(240,240,239); background-color: rgb(122,62,61);} /* -------------------------------------------------------------------------------------------------------- */ /* -------------------------------------------Decouverte---------------------------------------------------- */ .decouverte label[for="decouverte"] { display: grid; grid-template-columns: 1fr 3vw; grid-template-rows: 15vh 1fr; grid-template-areas: "header nav" "content nav";} .decouverte .header { background: rgb(168,220,171);} .decouverte .header .header_items .menuheader p a, .decouverte .header .header_items .menuheader label { color: rgb(31,105,35);} .decouverte .header .header_items .menuheader p a:hover, .decouverte .header .header_items .menuheader label:hover { color: rgb(16,49,18); text-shadow: 0px 0px 5px rgb(255,255,255);} .decouverte .nav { position: fixed; top: 0; display: flex; width: 3vw; height: 100vh; grid-area: nav; order: 2; justify-content: center; align-items: center; transition: left 1s ease; z-index: 2;} .decouverte .nav p { writing-mode: vertical-rl; text-orientation: upright; font-family: Please; color: rgb(255,255,255); font-size: 2.2em; font-weight: bold; text-transform: uppercase;} #boutique:not(:checked) ~ .container .decouverte .nav { left: 3vw;} #boutique:checked ~ .container .decouverte .nav { left: 97vw;} .decouverte .content { position: relative; padding-top: 1%; width: 97vw; grid-area: content; order: 1;} .decouverte .content .questions-decouverte { display: flex; width: 100%; min-height: 1000px; flex-flow: column nowrap; align-items: center;} .decouverte .content .questions-decouverte .menu1 { display: inline-flex; margin: 1% auto; padding: 0 1.2vw; height: fit-content; align-items: center; justify-content: center; background-color: rgb(240,240,239); backdrop-filter: blur(10px); border-radius: 25px;} .decouverte .content .questions-decouverte .menu1 li { position: relative; margin: 0 0.8vw; padding: 0.75vw 0.65vw; color: rgb(31,105,35); font-family: sans-serif; font-weight: bold; list-style: none; cursor: pointer; white-space: nowrap; z-index: 0;} .decouverte .content .questions-decouverte .menu1 li::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; border-radius: 25px; z-index: -1; transition: .2s;} .decouverte .content .questions-decouverte .menu1 li:hover, .decouverte .content .questions-decouverte .menu1 li.actif { color: rgb(240,240,239);} .decouverte .content .questions-decouverte .menu1 li:hover::before, .decouverte .content .questions-decouverte .menu1 li.actif::before { background: linear-gradient(to bottom, rgb(114,177,117), rgb(31,105,35)); box-shadow: 0px 3px 20px 0px rgba(0,0,0,0.35); transform: scale(1.1, 1.2);} .decouverte .content .questions-decouverte .menu1 li:focus-visible { outline: 2px solid rgb(240,240,239); outline-offset: 0.3vw;} .decouverte .content .questions-decouverte .listequestions { display: flex; margin-top: 2%; width: 74vw; flex-flow: row wrap; justify-content: center; align-items: flex-start; gap: 50px 5%;} .decouverte .content .questions-decouverte .listequestions .fiche-question { width: 16%; height: auto; background-color: rgb(31,105,35); border-radius: 10px; box-shadow: 0px 0px 20px 10px rgb(113,167,116); overflow: hidden; cursor: pointer;} .decouverte .content .questions-decouverte .listequestions .fiche-question:hover { box-shadow: 0px 0px 20px 10px rgb(240,240,239);} .decouverte .content .questions-decouverte .listequestions .fiche-question .image { display: flex; width: 100%; aspect-ratio: 1; overflow: hidden;} .decouverte .content .questions-decouverte .listequestions .fiche-question .image img { display: block; width: 100%; height: 100%; object-fit: cover;} .decouverte .content .questions-decouverte .listequestions .fiche-question .question { display: flex; padding: 0.8vw; width: 100%; height: 7.5vh; align-items: center; justify-content: center; background-color: rgb(31,105,35);} .decouverte .content .questions-decouverte .listequestions .fiche-question .question p { color: rgb(240,240,239); font-family: Cocogoose; font-size: 0.72vw; line-height: 1.45; text-align: center;} .decouverte .content .questions-decouverte .listequestions .fiche-question .question p .nombre { font-family: Arial, sans-serif;} .decouverte .content .questions-decouverte .listequestions .fiche-question.masque { display: none;} .decouverte .content .questions-decouverte .aucune-question { margin-top: 2vw; color: rgb(31,105,35); font-family: Cocogoose; font-size: 0.8vw;} .decouverte .content .questions-decouverte .aucune-question[hidden] { display: none;} /* ------------------------------------------------------------------------------------------------------------------- */ /* -----------------------------------------------Détails des questions----------------------------------------------- */ .popup.question-decouverte > .fermeture { color: rgb(240,240,239);} .popup.question-decouverte > .fermeture:hover { color: rgb(210,230,211);} .popup.question-decouverte .question-contenu { min-height: 100%; background-color: rgb(240,240,239);} .popup.question-decouverte .question-contenu .question-entete { position: sticky; top: 0; display: flex; margin-bottom: -0.35vw; padding: 1.6vw 4.5vw 1.6vw 2vw; width: 100%; min-height: 7.5vw; align-items: center; background: linear-gradient(to bottom, rgb(31,105,35), rgb(25,91,30)); box-shadow: 0 0.5vw 0.8vw -0.3vw rgb(10 40 12 / 65%); z-index: 2;} .popup.question-decouverte .question-contenu .question-entete h1 { color: rgb(240,240,239); font-family: Cocogoose; font-size: 1.45vw; line-height: 1.3; font-weight: 600;} .popup.question-decouverte .question-contenu .question-entete h1 .nombre { font-family: Arial, sans-serif;} .popup.question-decouverte .question-contenu .photo { width: 100%; aspect-ratio: 5 / 4; background-color: rgb(168,220,171); overflow: hidden;} .popup.question-decouverte .question-contenu .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;} .popup.question-decouverte .question-contenu .photo.position-centre img { object-position: center center;} .popup.question-decouverte .question-contenu .photo.position-centre-haut img { object-position: center 35%;} .popup.question-decouverte .question-contenu .photo.position-haut img { object-position: center top;} .popup.question-decouverte .question-contenu .photo.position-centre-bas img { object-position: center 65%;} .popup.question-decouverte .question-contenu .photo.position-bas img { object-position: center bottom;} .popup.question-decouverte .question-contenu .reponse { position: relative; margin-top: -1vw; padding: 2vw 2.2vw 2vw; color: rgb(30,30,30); background-color: rgb(240,240,239); border-radius: 1.2vw 1.2vw 0 0; box-shadow: 0 -0.2vw 0.6vw rgb(20 20 20 / 12%); z-index: 1;} .popup.question-decouverte .question-contenu .reponse::before { display: block; margin-bottom: 1.6vw; width: 4.5vw; height: 0.15vw; content: " "; background-color: rgb(31,105,35); border-radius: 1vw;} .popup.question-decouverte .question-contenu .reponse p { font-family: Arial, sans-serif; font-size: 0.78vw; line-height: 1.65; text-align: justify;} .popup.question-decouverte .question-contenu .reponse p + p { margin-top: 1vw;}