.elementor-kit-11{--e-global-color-primary:#7E62E0;--e-global-color-secondary:#A78BFA;--e-global-color-text:#F4F1FF;--e-global-color-accent:#5EEAD4;--e-global-color-4291bf2:#07040F;--e-global-color-2cf74b7:#0E0821;--e-global-color-817d572:#1B1240;--e-global-color-99f180d:#7046A8;--e-global-color-744b241:#C4B5FD;--e-global-color-d0bc8af:#A9A2C9;--e-global-color-7bbe227:#FBBF24;--e-global-color-20a1011:rgba(167, 139, 250, 0.18);--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.15em;--e-global-typography-primary-letter-spacing:-0.6px;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.4em;--e-global-typography-6b6d037-font-family:"Poppins";--e-global-typography-6b6d037-font-size:54px;--e-global-typography-6b6d037-font-weight:700;--e-global-typography-6b6d037-line-height:1.05em;--e-global-typography-6b6d037-letter-spacing:-1.4px;--e-global-typography-e6d0575-font-family:"Poppins";--e-global-typography-e6d0575-font-size:12px;--e-global-typography-e6d0575-font-weight:700;--e-global-typography-e6d0575-text-transform:uppercase;--e-global-typography-e6d0575-line-height:1.6em;--e-global-typography-e6d0575-letter-spacing:2.2px;--e-global-typography-ae14da3-font-family:"Poppins";--e-global-typography-ae14da3-font-size:14px;--e-global-typography-ae14da3-font-weight:400;--e-global-typography-ae14da3-line-height:1.7em;--e-global-typography-7de70ab-font-family:"Poppins";--e-global-typography-7de70ab-font-size:30px;--e-global-typography-7de70ab-font-weight:700;--e-global-typography-7de70ab-line-height:1.1em;--e-global-typography-7de70ab-letter-spacing:-0.5px;background-color:#07040F;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{background-color:#7046A8;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );color:#FFFFFF;border-radius:99px 99px 99px 99px;padding:14px 28px 14px 28px;}.elementor-kit-11 button:hover,.elementor-kit-11 button:focus,.elementor-kit-11 input[type="button"]:hover,.elementor-kit-11 input[type="button"]:focus,.elementor-kit-11 input[type="submit"]:hover,.elementor-kit-11 input[type="submit"]:focus,.elementor-kit-11 .elementor-button:hover,.elementor-kit-11 .elementor-button:focus{background-color:#7E62E0;color:#FFFFFF;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 a{color:var( --e-global-color-secondary );font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-kit-11 a:hover{color:var( --e-global-color-accent );}.elementor-kit-11 h1{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h2{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h3{color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h4{color:var( --e-global-color-text );font-family:"Poppins", Sans-serif;font-size:22px;font-weight:700;line-height:1.3em;}.elementor-kit-11 h5{color:var( --e-global-color-text );font-family:"Poppins", Sans-serif;font-size:18px;font-weight:700;line-height:1.4em;}.elementor-kit-11 h6{color:#C4B5FD;font-family:"Poppins", Sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;line-height:1.5em;letter-spacing:1.6px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-11{--e-global-typography-6b6d037-font-size:40px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h2{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h3{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-11{--e-global-typography-6b6d037-font-size:31px;--e-global-typography-7de70ab-font-size:26px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-11 h1{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h2{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 h3{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* --- Tableaux (guides comparatifs) --- */
.elementor-widget-text-editor table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:14.5px;background:rgba(126,98,224,.05);border:1px solid var(--e-global-color-20a1011);border-radius:14px;overflow:hidden}
.elementor-widget-text-editor th,.elementor-widget-text-editor td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--e-global-color-20a1011);vertical-align:top}
.elementor-widget-text-editor th{color:var(--e-global-color-text);font-weight:700;font-size:13.5px;background:rgba(126,98,224,.10)}
.elementor-widget-text-editor tr:last-child td{border-bottom:0}

/* --- Listes du corps de texte --- */
.elementor-widget-text-editor ul{list-style:none;padding-left:0}
.elementor-widget-text-editor ul li{position:relative;padding-left:20px;margin-bottom:10px}
.elementor-widget-text-editor ul li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--e-global-color-accent)}
.elementor-widget-text-editor ol{padding-left:20px}
.elementor-widget-text-editor ol li{margin-bottom:10px}
.elementor-widget-text-editor strong,.elementor-widget-text-editor td strong{color:var(--e-global-color-text)}
.elementor-widget-text-editor a{text-decoration:underline;text-underline-offset:3px}

/* --- Accents en Poppins Bold Italic, comme le logo --- */
h1 em,h2 em,h3 em,h4 em{font-style:italic;font-weight:700}

html{scroll-behavior:smooth}

/* --- Bandeau d'annonce défilant (topbar) --- */
#klx-annonce{overflow:hidden}
#klx-annonce .klx-marquee{display:flex;flex-wrap:nowrap;width:max-content;animation:klx-scroll var(--klx-marquee-speed,32s) linear infinite}
#klx-annonce .klx-marquee:hover{animation-play-state:paused}
#klx-annonce .klx-marquee>p{white-space:nowrap;margin:0;flex:0 0 auto}
@keyframes klx-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:767px){#klx-annonce{--klx-marquee-speed:20s}}
@media(prefers-reduced-motion:reduce){#klx-annonce .klx-marquee{animation:none}}

/* --- WooCommerce : boutique et fiche produit --- */
.woocommerce-result-count{color:var(--e-global-color-d0bc8af);font-size:14px}
.woocommerce select.orderby,.woocommerce-ordering select{background:rgba(126,98,224,.10);color:var(--e-global-color-text);border:1px solid var(--e-global-color-20a1011);border-radius:99px;padding:10px 18px;font-family:Poppins,sans-serif;font-size:14px;outline:none}
.woocommerce select.orderby option{background:#1B1240;color:#F4F1FF}
.woocommerce .quantity input[type=number]{background:rgba(126,98,224,.10);color:var(--e-global-color-text);border:1px solid var(--e-global-color-20a1011);border-radius:12px;padding:11px 8px;font-family:Poppins,sans-serif}
.woocommerce div.product .woocommerce-tabs ul.tabs{border-bottom:1px solid var(--e-global-color-20a1011);padding-left:0}
.woocommerce div.product .woocommerce-tabs .panel h2{color:var(--e-global-color-text);font-family:Poppins,sans-serif}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:rgba(126,98,224,.08);color:var(--e-global-color-d0bc8af);border-top-color:var(--e-global-color-primary)}
.woocommerce .star-rating span,.woocommerce p.stars a{color:var(--e-global-color-7bbe227)}
.woocommerce span.onsale{background:var(--e-global-color-accent);color:var(--e-global-color-4291bf2);font-family:Poppins,sans-serif;font-weight:700}
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{color:var(--e-global-color-d0bc8af);border-radius:10px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--e-global-color-99f180d);color:#fff}

.woocommerce div.product .woocommerce-tabs .panel>h2:first-child{display:none}
.woocommerce div.product .woocommerce-tabs .panel{padding-top:26px}

/* --- tables mobile --- */
@media(max-width:767px){
.elementor-widget-text-editor table{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;font-size:13px;border-radius:12px;margin:8px 0 20px}
.elementor-widget-text-editor th,.elementor-widget-text-editor td{padding:10px 12px;font-size:13px;line-height:1.45}
.elementor-widget-text-editor th{font-size:12.5px}
.elementor-widget-text-editor th:first-child,.elementor-widget-text-editor td:first-child{min-width:96px}
.elementor-widget-text-editor td,.elementor-widget-text-editor th{min-width:88px}
}

/* --- titres responsive --- */
h1,h2,h3,h4,.elementor-heading-title{overflow-wrap:break-word;word-break:normal}
@media(max-width:1024px){
.elementor-widget-heading h2.elementor-heading-title{font-size:29px}
.elementor-widget-heading h3.elementor-heading-title{font-size:20px}
}
@media(max-width:767px){
.elementor-widget-heading h1.elementor-heading-title{font-size:31px;line-height:1.14em}
.elementor-widget-heading h2.elementor-heading-title{font-size:25px;line-height:1.2em}
.elementor-widget-heading h3.elementor-heading-title{font-size:18.5px;line-height:1.3em}
}

/* --- titres woo mobile --- */
@media(max-width:1024px){
.elementor-widget-woocommerce-product-title h1{font-size:34px}
}
@media(max-width:767px){
.elementor-widget-woocommerce-product-title h1{font-size:27px;line-height:1.2em}
.elementor-widget-theme-page-title h1{font-size:31px;line-height:1.15em}
.woocommerce div.product .woocommerce-tabs .panel>h2{font-size:21px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px}
}

/* --- barre légale + crédit HDKN --- */
#klx-legal a{text-decoration:none}
#klx-legal a:hover{color:var(--e-global-color-744b241)}
#klx-legal .elementor-icon-list-text a{display:inline}
#klx-legal .elementor-icon-list-item{white-space:nowrap}

/* --- ciel étoilé (classe klx-sky sur une section) --- */
.klx-sky::before,.klx-sky::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}
.klx-sky::before,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::before{
background-image:radial-gradient(2px 2px at 342px 519px,rgba(255,255,255,0.78) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 59px 525px,rgba(255,255,255,0.97) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 662px 152px,rgba(255,255,255,0.78) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 394px 362px,rgba(255,255,255,0.92) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 220px 80px,rgba(255,255,255,0.60) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 422px 269px,rgba(255,255,255,0.53) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 603px 532px,rgba(255,255,255,0.92) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 367px 472px,rgba(255,255,255,0.97) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 678px 372px,rgba(255,255,255,0.90) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 458px 517px,rgba(255,255,255,0.91) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 671px 509px,rgba(255,255,255,0.70) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 49px 333px,rgba(255,255,255,0.61) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 96px 218px,rgba(255,255,255,0.61) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 129px 153px,rgba(255,255,255,0.57) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 340px 330px,rgba(255,255,255,0.67) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 1px 20px,rgba(255,255,255,0.67) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 222px 335px,rgba(255,255,255,0.73) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 277px 87px,rgba(255,255,255,0.62) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 356px 387px,rgba(255,255,255,0.52) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 191px 47px,rgba(255,255,255,0.58) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 434px 179px,rgba(255,255,255,0.57) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 357px 54px,rgba(255,255,255,0.66) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 150px 325px,rgba(255,255,255,0.62) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 7px 262px,rgba(255,255,255,0.61) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 118px 57px,rgba(255,255,255,0.80) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 215px 362px,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 30px 450px,rgba(255,255,255,0.44) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 214px 50px,rgba(255,255,255,0.62) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 153px 125px,rgba(255,255,255,0.39) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 126px 209px,rgba(255,255,255,0.36) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 141px 77px,rgba(255,255,255,0.36) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 22px 152px,rgba(255,255,255,0.51) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 193px 259px,rgba(255,255,255,0.34) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 181px 224px,rgba(255,255,255,0.56) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 110px 172px,rgba(255,255,255,0.41) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 104px 228px,rgba(255,255,255,0.31) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 290px 216px,rgba(255,255,255,0.38) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 191px 261px,rgba(255,255,255,0.45) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 234px 190px,rgba(255,255,255,0.34) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 242px 126px,rgba(255,255,255,0.49) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 42px 194px,rgba(255,255,255,0.41) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 57px 221px,rgba(255,255,255,0.52) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 114px 30px,rgba(255,255,255,0.37) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 36px 46px,rgba(255,255,255,0.36) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 249px 96px,rgba(255,255,255,0.32) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 279px 2px,rgba(255,255,255,0.39) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 249px 192px,rgba(255,255,255,0.38) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 285px 189px,rgba(255,255,255,0.42) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 212px 119px,rgba(255,255,255,0.33) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 156px 106px,rgba(255,255,255,0.54) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 240px 276px,rgba(255,255,255,0.58) 0,rgba(255,255,255,0) 100%),radial-gradient(1px 1px at 290px 154px,rgba(255,255,255,0.56) 0,rgba(255,255,255,0) 100%),radial-gradient(closest-side at 50% 50%,rgba(126,98,224,.22),rgba(126,98,224,0) 100%),radial-gradient(closest-side at 50% 50%,rgba(94,234,212,.09),rgba(94,234,212,0) 100%),radial-gradient(closest-side at 50% 50%,rgba(167,139,250,.13),rgba(167,139,250,0) 100%);
background-size:680px 680px,460px 460px,300px 300px,1100px 820px,900px 700px,1000px 780px;
background-position:0 0,0 0,0 0,8% 6%,88% 26%,52% 86%;
background-repeat:repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
animation:klx-drift 300s linear infinite}
.klx-sky::after,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after{
background-image:radial-gradient(1.7px 1.7px at 424px 325px,rgba(255,255,255,0.73) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 438px 30px,rgba(255,255,255,0.50) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 407px 457px,rgba(255,255,255,0.54) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 29px 261px,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 39px 179px,rgba(255,255,255,0.74) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 135px 429px,rgba(255,255,255,0.82) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 13px 186px,rgba(255,255,255,0.99) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 409px 187px,rgba(255,255,255,0.97) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 501px 130px,rgba(255,255,255,0.96) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 506px 230px,rgba(255,255,255,0.67) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 119px 184px,rgba(255,255,255,0.82) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 77px 210px,rgba(255,255,255,0.59) 0,rgba(255,255,255,0) 100%),radial-gradient(1.7px 1.7px at 78px 3px,rgba(255,255,255,0.72) 0,rgba(255,255,255,0) 100%);
background-size:520px 520px;background-repeat:repeat;
animation:klx-twinkle 6.5s ease-in-out infinite alternate}
@keyframes klx-drift{
from{background-position:0 0,0 0,0 0,8% 6%,88% 26%,52% 86%}
to{background-position:-680px -680px,-460px -460px,-300px -300px,8% 6%,88% 26%,52% 86%}}
@keyframes klx-twinkle{from{opacity:.42}to{opacity:1}}
@media(max-width:767px){
.klx-sky::before,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::before{background-size:520px 520px,380px 380px,260px 260px,760px 620px,640px 520px,700px 580px;animation:none}
.klx-sky::after,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after{background-size:420px 420px}}
@media(prefers-reduced-motion:reduce){.klx-sky::before,.klx-sky::after{animation:none}}

/* --- finitions landing --- */
.klx-card{position:relative;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.klx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease;
background:radial-gradient(130% 95% at 50% -12%,rgba(167,139,250,.17),rgba(167,139,250,0) 70%)}
.klx-card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.40);
box-shadow:0 20px 48px -22px rgba(126,98,224,.85)}
.klx-card:hover::after{opacity:1}
.klx-panel{position:relative}
.klx-panel::after{content:"";position:absolute;left:9%;right:9%;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.55),rgba(167,139,250,0))}
.klx-pill{box-shadow:0 0 0 1px rgba(167,139,250,.16),0 10px 32px -14px rgba(126,98,224,.85)}
.klx-halo{position:relative}
.klx-halo::after{content:"";position:absolute;left:50%;top:0;width:min(1100px,100%);height:360px;
transform:translate(-50%,-58%);pointer-events:none;z-index:0;
background:radial-gradient(closest-side,rgba(126,98,224,.17),rgba(126,98,224,0) 100%)}
.klx-halo>*{position:relative;z-index:1}
.klx-fade-line .elementor-divider-separator{border:0!important;height:1px;background:linear-gradient(90deg,
rgba(167,139,250,0),rgba(167,139,250,.45) 20%,rgba(167,139,250,.10) 76%,rgba(167,139,250,0))}
.elementor-button{transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease}
.elementor-widget-button .elementor-button:hover{transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(126,98,224,.9)}
.elementor-widget-icon-box .elementor-icon{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.klx-card:hover .elementor-icon{transform:translateY(-2px) scale(1.06)}
@media(prefers-reduced-motion:reduce){.klx-card,.elementor-button,.elementor-widget-icon-box .elementor-icon{transition:none}
.klx-card:hover{transform:none}}

/* --- fiche produit : analyse + variations --- */
.klx-coa .shop_attributes{width:100%;border-collapse:collapse;margin:0;border:0;background:none}
.klx-coa .shop_attributes tr,.klx-coa .shop_attributes tbody tr{border:0;background:none}
.klx-coa .shop_attributes th,.klx-coa .shop_attributes td{padding:9px 0;text-align:left;border:0;
border-bottom:1px solid rgba(167,139,250,.14);font-style:normal;background:none;vertical-align:top}
.klx-coa .shop_attributes tr:last-child th,.klx-coa .shop_attributes tr:last-child td{border-bottom:0}
.klx-coa .shop_attributes th{width:46%;color:var(--e-global-color-d0bc8af);font-weight:500;font-size:13.5px}
.klx-coa .shop_attributes td{color:var(--e-global-color-text);font-weight:600;font-size:13.5px}
.klx-coa .shop_attributes td p{margin:0;font-style:normal}
.woocommerce div.product form.cart .variations{margin:0 0 14px;border:0}
.woocommerce div.product form.cart .variations tr,.woocommerce div.product form.cart .variations td{border:0;background:none}
.woocommerce div.product form.cart .variations th.label{color:var(--e-global-color-d0bc8af);
font-weight:600;font-size:13px;padding-inline-end:14px}
.woocommerce div.product form.cart .variations select{background:var(--e-global-color-2cf74b7);
color:var(--e-global-color-text);border:1px solid var(--e-global-color-20a1011);border-radius:10px;
padding:11px 14px;font-family:Poppins,sans-serif;font-size:14px;min-height:46px;width:100%}
.woocommerce div.product form.cart .variations select option{background:#0E0821;color:#F4F1FF}
.woocommerce div.product .woocommerce-variation-price{margin:4px 0 10px}
.woocommerce div.product .woocommerce-variation-description p{color:var(--e-global-color-744b241);
font-size:13.5px;margin:0}
.woocommerce div.product .reset_variations{color:var(--e-global-color-d0bc8af);font-size:12.5px}
.woocommerce div.product form.cart .variations th.label{background:none!important;padding:0 14px 6px 0;
display:block;width:auto;text-align:left}
.woocommerce div.product form.cart .variations td.value{display:block;width:100%}
.woocommerce div.product form.cart .variations tr{display:block}
.woocommerce div.product .woocommerce-variation-price .price,
.woocommerce div.product .woocommerce-variation-price span.amount{color:var(--e-global-color-text)!important;
font-family:Poppins,sans-serif;font-weight:700;font-size:26px}
.woocommerce div.product .woocommerce-variation-availability{color:var(--e-global-color-accent);font-size:13px}
.woocommerce div.product .reset_variations{display:inline-block;margin-top:6px}
@media(max-width:767px){.klx-coa .shop_attributes th{width:52%;font-size:12.5px}
.klx-coa .shop_attributes td{font-size:12.5px}}

/* --- panier et commande : boutons natifs --- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.wc-block-cart__submit-button,.wc-block-components-button:not(.is-link),
.woocommerce .cart .button,.woocommerce .cart input.button{
background:linear-gradient(135deg,var(--e-global-color-primary),#8f74ea)!important;
color:#fff!important;border:0!important;border-radius:99px!important;
font-family:Poppins,sans-serif!important;font-weight:600!important;font-size:14.5px!important;
padding:13px 26px!important;line-height:1.2!important;
box-shadow:0 14px 34px -16px rgba(126,98,224,.95);text-decoration:none!important;text-align:center;
transition:transform .3s ease,box-shadow .3s ease,filter .3s ease}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,
.wc-block-cart__submit-button:hover,.wc-block-components-button:not(.is-link):hover{
background:linear-gradient(135deg,#8f74ea,var(--e-global-color-secondary))!important;
color:#fff!important;transform:translateY(-2px);
box-shadow:0 20px 44px -16px rgba(126,98,224,1)}
.woocommerce a.button:disabled,.woocommerce button.button:disabled,
.wc-block-components-button:disabled{opacity:.45;transform:none;box-shadow:none}
.woocommerce a.button.wc-backward,.wc-block-components-button.is-link{
background:none!important;color:var(--e-global-color-744b241)!important;box-shadow:none!important;
padding:0!important;text-decoration:none!important}
.woocommerce a.button.wc-backward:hover{color:var(--e-global-color-accent)!important;transform:none}
.wc-block-components-totals-item__value,.wc-block-formatted-money-amount,
.woocommerce .cart_totals .order-total .amount{color:var(--e-global-color-text)!important}
.wc-block-components-text-input input,.wc-block-components-select__select,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select{
background:var(--e-global-color-2cf74b7)!important;color:var(--e-global-color-text)!important;
border:1px solid var(--e-global-color-20a1011)!important;border-radius:10px!important}
.wc-block-components-radio-control__option,.wc-block-components-panel{
border-color:var(--e-global-color-20a1011)!important}
.woocommerce table.shop_table{border-color:var(--e-global-color-20a1011)!important;border-radius:16px}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{
border-color:var(--e-global-color-20a1011)!important;color:var(--e-global-color-text)}

/* --- pages de categorie --- */
.klx-archive-seo .elementor-widget-woocommerce-archive-description{max-width:820px;margin:0 auto}
.klx-archive-seo p{color:var(--e-global-color-d0bc8af);font-size:15.5px;line-height:1.8;margin:0 0 16px}
.klx-archive-seo h2{color:var(--e-global-color-text);font-family:Poppins,sans-serif;font-weight:700;
font-size:22px;line-height:1.25;margin:34px 0 12px}
.klx-archive-seo a{color:var(--e-global-color-secondary);text-decoration:none}
.klx-archive-seo a:hover{color:var(--e-global-color-744b241)}
.klx-archive-seo strong{color:var(--e-global-color-text);display:block;margin-bottom:2px;font-size:16.5px}
.klx-archive-seo .term-description>p:last-child em{font-style:normal}
.klx-archive-seo .term-description>p:first-child{color:var(--e-global-color-text);font-size:17.5px;line-height:1.7;
padding:22px 24px;border-radius:18px;background:rgba(126,98,224,.07);
border:1px solid var(--e-global-color-20a1011);margin-bottom:30px}
.klx-archive-seo .term-description>p:last-child em,.klx-archive-seo .term-description>p:last-child{margin-top:34px;padding-top:20px;font-size:12.5px;line-height:1.7;
color:rgba(169,162,201,.72);border-top:1px solid var(--e-global-color-20a1011)}
@media(max-width:767px){.klx-archive-seo h2{font-size:19px;margin-top:26px}
.klx-archive-seo p{font-size:14.5px}
.klx-archive-seo .term-description>p:first-child{font-size:15.5px;padding:18px 16px}}

/* --- encart video --- */
.klx-video-sec{position:relative;isolation:isolate;overflow:hidden}
.klx-video-sec .elementor-background-video-container,
.klx-video-sec .elementor-background-video-hosted{filter:saturate(.82) contrast(1.04) brightness(1.12)}
.klx-video-sec:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,#07040F 0%,rgba(7,4,15,0) 20%,rgba(7,4,15,0) 80%,#07040F 100%)}
.klx-video-sec:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(130% 85% at 50% 50%,rgba(126,98,224,.14),rgba(7,4,15,.30) 74%)}
.klx-video-sec>.e-con-inner,.klx-video-sec>.elementor-element{position:relative;z-index:2}
.klx-video-sec .klx-panel{background-color:rgba(14,8,33,.70)!important;
-webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
border:1px solid rgba(167,139,250,.30)!important;
box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.klx-video-sec .klx-panel:after{background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.7),rgba(167,139,250,0))}
@media(max-width:767px){.klx-video-sec .klx-panel{background-color:rgba(14,8,33,.80)!important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.klx-video-sec video{display:none}}

/* --- mentions et prix boutique --- */
.elementor-83 .elementor-element-2dda1e04{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.elementor-83 .elementor-element-43ae3516{position:relative;padding:20px 24px 20px 54px;
border-radius:16px;background:rgba(126,98,224,.06);border:1px solid var(--e-global-color-20a1011)}
.elementor-83 .elementor-element-43ae3516:before{content:"";position:absolute;left:22px;top:22px;
width:18px;height:18px;border-radius:50%;border:1.5px solid var(--e-global-color-secondary);
box-shadow:0 0 0 4px rgba(167,139,250,.10)}
.elementor-83 .elementor-element-43ae3516 p{margin:0;font-size:12.5px;line-height:1.75}
.elementor-83 .elementor-element-43ae3516 strong{color:var(--e-global-color-text)}
@media(max-width:767px){.elementor-83 .elementor-element-43ae3516{padding:18px 18px 18px 46px}
.elementor-83 .elementor-element-43ae3516:before{left:16px;top:20px;width:16px;height:16px}}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price .amount{color:var(--e-global-color-accent)!important;
font-family:Poppins,sans-serif;font-weight:700}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .amount{color:var(--e-global-color-d0bc8af)!important;font-weight:500}

/* --- fiche produit : selecteur de grammage --- */
.klx-has-grams table.variations{display:none}
.klx-grams{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;margin:2px 0 18px}
.klx-grams button.klx-gram{-webkit-appearance:none;appearance:none;font:inherit;position:relative;display:flex;
  flex-direction:column;align-items:flex-start;gap:3px;padding:15px 14px 14px;margin:0;cursor:pointer;text-align:left;
  text-transform:none;letter-spacing:normal;background:rgba(27,18,64,.6);background-image:none;
  border:1px solid rgba(167,139,250,.24);border-radius:14px;box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.klx-grams button.klx-gram:hover:not(:disabled){background-color:rgba(126,98,224,.12);border-color:rgba(167,139,250,.6);transform:translateY(-2px)}
.klx-grams button.klx-gram:focus-visible{outline:2px solid #7E62E0;outline-offset:2px}
.klx-grams button.klx-gram.is-selected{border-color:#7E62E0;background-color:rgba(126,98,224,.2);
  box-shadow:0 0 0 1px #7E62E0 inset,0 10px 26px -14px rgba(126,98,224,1)}
.klx-gram__w{font-size:17px;font-weight:700;line-height:1.15;color:#F4F1FF}
.klx-gram__p{font-size:15px;font-weight:600;line-height:1.2;color:#F4F1FF}
.klx-gram__u{font-size:12px;line-height:1.3;color:#A9A2C9}
.klx-gram__badge{position:absolute;top:-10px;left:12px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;color:#04121B;background:#5EEAD4;white-space:nowrap;line-height:1.4}
.klx-grams button.klx-gram.is-out{opacity:.4;cursor:not-allowed}
.klx-grams button.klx-gram.is-out .klx-gram__p{text-decoration:line-through}
@media(max-width:520px){.klx-grams{grid-template-columns:repeat(2,1fr)}}

/* --- fiche produit : fourchette puis prix choisi --- */
.product-type-variable .elementor-widget-woocommerce-product-price .price:before{
  content:"Prix selon le grammage";display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#A9A2C9;margin-bottom:6px}

.single-product .woocommerce-variation{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.single-product .woocommerce-variation-description p{margin:0;font-size:14px;color:#5EEAD4;font-weight:600}
.single-product .woocommerce-variation-price{margin:0 0 8px}
.single-product .woocommerce-variation-price .price{font-size:26px;font-weight:700;color:#F4F1FF}
.single-product .woocommerce-variation-price .price:before{content:"Votre sélection";display:block;font-size:12px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#A9A2C9;margin-bottom:4px}

/* --- fiche produit : cadre image --- */
.single-product .woocommerce-product-gallery__wrapper{background:rgba(27,18,64,.45);border-radius:18px;
  border:1px solid rgba(167,139,250,.18);overflow:hidden}
.single-product .woocommerce-product-gallery img[src*="placeholder"]{opacity:.14}

/* --- fiche produit : barre d'achat collante mobile --- */
.klx-buybar{position:fixed;left:0;right:0;bottom:0;z-index:998;display:flex;align-items:center;gap:12px;
  padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(14,8,33,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(167,139,250,.22);transform:translateY(115%);transition:transform .25s ease;pointer-events:none}
body.klx-buybar-on .klx-buybar{transform:none;pointer-events:auto}
.klx-buybar__p{flex:1 1 auto;font-size:17px;font-weight:700;color:#F4F1FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klx-buybar__b{flex:0 0 auto;font:inherit;font-size:15px;font-weight:700;color:#fff;cursor:pointer;
  padding:12px 20px;border:0;border-radius:999px;background:#7E62E0}
@media(min-width:768px){.klx-buybar{display:none}}




/* --- hero accueil : nebuleuse floutee (remplace les lueurs en degrades) --- */
body.home::before{opacity:.55}
.klx-sky > *:not(.klx-neb){position:relative;z-index:1}
.klx-neb{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;width:100%!important;height:100%!important;z-index:-2!important;pointer-events:none!important;overflow:hidden;
 background:
  linear-gradient(147deg, rgba(167,139,250,.10) 0%, rgba(167,139,250,0) 42%),
  radial-gradient(115% 55% at 50% 118%, rgba(126,98,224,.30), rgba(126,98,224,0) 60%),
  radial-gradient(80% 60% at 50% -12%, rgba(7,4,15,.85), rgba(7,4,15,0) 68%);
 box-shadow:inset 0 0 260px 90px rgba(7,4,15,.7)}
.klx-neb::before,.klx-neb::after{content:"";position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.klx-neb::before{right:2vw;top:14vh;width:42vw;height:46vh;
 background:radial-gradient(circle at 50% 50%, rgba(167,139,250,.55), rgba(126,98,224,.22) 46%, rgba(126,98,224,0) 72%);
 filter:blur(80px);opacity:.9;animation:klx-neb1 52s ease-in-out infinite alternate}
.klx-neb::after{left:-10vw;bottom:-14vh;width:44vw;height:40vh;
 background:radial-gradient(circle at 50% 50%, rgba(94,234,212,.30), rgba(232,121,249,.20) 50%, rgba(232,121,249,0) 74%);
 filter:blur(90px);opacity:.75;animation:klx-neb2 64s ease-in-out infinite alternate}
@keyframes klx-neb1{from{translate:0 0;scale:1}to{translate:-5vw 4vh;scale:1.14}}
@keyframes klx-neb2{from{translate:0 0;scale:1.06}to{translate:6vw -5vh;scale:.92}}
@media(max-width:767px){
 .klx-neb::before{width:88vw;height:34vh;right:-16vw;top:10vh;filter:blur(60px)}
 .klx-neb::after{width:86vw;height:30vh;left:-22vw;bottom:-8vh;filter:blur(64px)}
 .klx-neb{box-shadow:inset 0 0 140px 50px rgba(7,4,15,.7)}}
@media(prefers-reduced-motion:reduce){.klx-neb::before,.klx-neb::after{animation:none}}

/* --- halo derriere l'astronaute (suit la silhouette) --- */
.elementor-element-592bea4 img{filter:drop-shadow(0 0 46px rgba(167,139,250,.42)) drop-shadow(0 18px 40px rgba(7,4,15,.6))}


/* --- astronaute du hero : coupe par la section suivante + apesanteur --- */
.klx-sky{overflow:hidden}
.elementor-element-592bea4 img{animation:klx-astro 6.8s ease-in-out infinite alternate}
@keyframes klx-astro{from{transform:translateY(140px)}to{transform:translateY(162px)}}
@media(max-width:1024px){@keyframes klx-astro{from{transform:translateY(90px)}to{transform:translateY(106px)}}}

@media(prefers-reduced-motion:reduce){.elementor-element-592bea4 img{animation:none;transform:translateY(150px)}}


/* --- astronaute mobile : petit, cale a droite, coupe par la section suivante --- */
@media(max-width:767px){
 .klx-sky{padding-bottom:0!important}
 .klx-sky .elementor-element-592bea4{margin:-96px 0 0 auto!important;width:auto!important}
 .klx-sky .elementor-element-592bea4 img{width:186px!important;height:auto!important;display:block;margin-left:auto}
 @keyframes klx-astro{from{transform:translateY(52px)}to{transform:translateY(66px)}}
}


/* --- logo de l'en-tete en mobile --- */
@media(max-width:767px){.elementor-element-6c2afabb img{width:126px!important;max-width:126px!important;height:auto!important}}


/* --- Panier WooCommerce : ligne produit sur telephone --- */
@media(max-width:767px){
 .wc-block-cart-items__row{grid-template-columns:72px minmax(0,1fr) auto!important;column-gap:14px}
 .wc-block-cart-items__row .wc-block-cart-item__image,
 .wc-block-cart-items__row .wc-block-cart-item__product{padding-right:0!important}
 .wc-block-cart-items__row .wc-block-cart-item__total{align-self:end;padding-left:10px!important;text-align:right}
}


/* --- Fiche produit : onglets WooCommerce a la charte --- */
.woocommerce-tabs ul.tabs{border:0!important;margin:0 0 22px!important;padding:0!important;display:flex!important;flex-wrap:wrap;gap:8px;list-style:none}
.woocommerce-tabs ul.tabs::before,.woocommerce-tabs ul.tabs::after{display:none!important;content:none!important}
.woocommerce-tabs ul.tabs li{background:var(--e-global-color-2cf74b7)!important;border:1px solid var(--e-global-color-20a1011)!important;border-radius:99px!important;margin:0!important;padding:0!important;box-shadow:none!important;overflow:hidden}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none!important;content:none!important;border:0!important;box-shadow:none!important}
.woocommerce-tabs ul.tabs li a{display:block;color:var(--e-global-color-d0bc8af)!important;font-weight:600;padding:10px 20px!important;text-decoration:none!important;transition:background .18s,color .18s}
.woocommerce-tabs ul.tabs li:hover{background:var(--e-global-color-817d572)!important}
.woocommerce-tabs ul.tabs li:hover a{color:var(--e-global-color-text)!important}
.woocommerce-tabs ul.tabs li.active{background:var(--e-global-color-primary)!important;border-color:transparent!important}
.woocommerce-tabs ul.tabs li.active a{color:#FFFFFF!important}
.woocommerce-tabs .panel{padding:0!important;margin-bottom:0!important}
/* "Informations complementaires" -> "Infos" */
.woocommerce-tabs ul.tabs li.additional_information_tab a{font-size:0!important}
.woocommerce-tabs ul.tabs li.additional_information_tab a::after{content:"Infos";font-size:16px}

@media(max-width:767px){
 /* onglets : les trois sur une ligne */
 .woocommerce-tabs ul.tabs{flex-wrap:nowrap!important;gap:6px!important}
 .woocommerce-tabs ul.tabs li{flex:1 1 0!important;min-width:0}
 .woocommerce-tabs ul.tabs li a{text-align:center;font-size:12.5px!important;padding:10px 6px!important;white-space:nowrap}
 .woocommerce-tabs ul.tabs li.additional_information_tab a::after{font-size:12.5px}
 /* textes natifs WooCommerce, trop grands sur telephone */
 .woocommerce-tabs .panel h3{font-size:19px!important;line-height:1.3!important;margin-top:22px!important}
 .woocommerce-tabs .panel p{font-size:14.5px!important}
 .woocommerce-product-attributes th,.woocommerce-product-attributes td{font-size:13px!important}
 
 .klx-buybar__p{font-size:14px!important;line-height:1.2}
 /* cartes de grammage : trois colonnes compactes */
 .klx-grams{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:7px!important;row-gap:17px!important}
 .klx-grams button.klx-gram{padding:9px 4px!important;border-radius:16px!important;align-items:center!important;text-align:center!important}
 .klx-gram__badge{font-size:8px!important;padding:2px 5px!important;top:-8px!important;left:50%!important;transform:translateX(-50%)!important;white-space:nowrap}
 .klx-gram__w{font-size:13px!important}
 .klx-gram__p{font-size:13px!important}
 .klx-gram__u{font-size:10px!important}
 /* bandeau de reassurance : quatre reperes sur une ligne */
 /* bandeau de reassurance : elargi hors des retraits de colonne (memes -26px que
    le panneau d analyse), quatre reperes sur une ligne. Avant, chaque repere ne
    disposait que de 60px et "reglementation" se coupait en plein mot. */
 .elementor-element-3c33c6c0{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
   gap:0 7px!important;width:auto!important;margin-left:-26px!important;margin-right:-26px!important;
   padding:18px 0!important;align-items:start!important}
 .elementor-element-3c33c6c0>.e-con{width:auto!important;min-width:0!important;padding-left:0!important;padding-right:0!important}
 .elementor-element-3c33c6c0 .elementor-widget-icon-box{width:100%!important}
 .elementor-element-3c33c6c0 .elementor-icon-box-wrapper{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:9px!important}
 .elementor-element-3c33c6c0 .elementor-icon-box-icon{margin:0 auto!important}
 .elementor-element-3c33c6c0 .elementor-icon-box-title{font-size:10.5px!important;line-height:1.34!important;margin:0!important;
   word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important}
}


/* --- Fiche produit mobile : alignement, panneau, barre d'achat (6 aout 2026) --- */
@media(max-width:767px){
 /* les cartes de grammage : neutraliser l'espacement Elementor entre boutons */
 html body .klx-grams{--button-spacing:0px}
 html body .klx-grams button.klx-gram{margin:0!important;margin-inline-start:0!important;margin-inline-end:0!important}
 /* panneau d'analyse : pleine largeur utile */
 .klx-coa{margin-left:-26px!important;margin-right:-26px!important;width:calc(100% + 52px)!important;max-width:none!important;padding-left:15px!important;padding-right:15px!important}
 /* onglets : libelle centre (WooCommerce impose display:inline-block) */
 .woocommerce-tabs ul.tabs li a{display:block!important;text-align:center!important;width:100%}
 /* barre d'achat permanente : le bloc natif disparait */
 /* barre d achat permanente : le bloc natif disparait.
    L espace reserve est pris sur le PIED DE PAGE et non sur le body : sur le body
    il produisait une bande de 82px de fond de page (presque noir) sous le footer. */
 body.single-product footer[data-elementor-type="footer"]{padding-bottom:82px}
 html body.single-product .klx-buybar{transform:none!important;pointer-events:auto!important}
 .single-product form.cart .quantity,
 .single-product form.cart .single_add_to_cart_button{display:none!important}
 html body .klx-buybar{gap:8px!important;padding-left:12px!important;padding-right:12px!important}
 html body .klx-buybar .klx-buybar__p{font-size:12.5px!important;min-width:0!important}
 html body .klx-buybar button.klx-buybar__b{padding:11px 14px!important;font-size:13.5px!important}
 /* selecteur de quantite dans la barre */
 html body .klx-buybar .klx-buybar__q{flex:0 0 auto!important;display:flex!important;align-items:center;gap:0;border:1px solid var(--e-global-color-20a1011);border-radius:99px;padding:2px;background:var(--e-global-color-2cf74b7)}
 html body .klx-buybar button.klx-buybar__qb{appearance:none!important;-webkit-appearance:none!important;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;color:var(--e-global-color-text)!important;font-size:17px!important;font-weight:700!important;line-height:1!important;width:24px!important;height:24px!important;min-width:0!important;border-radius:50%!important;padding:0!important;margin:0!important;cursor:pointer}
 html body .klx-buybar .klx-buybar__qv{min-width:18px;text-align:center;font-size:14px;font-weight:700;color:var(--e-global-color-text)}
}

/* --- Astronaute en fond du pied de page (6 aout 2026) --- */
footer[data-elementor-type="footer"] > .e-con{position:relative;overflow:hidden}
footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro){position:absolute!important;inset:0!important;padding:0!important;margin:0!important;z-index:0!important;pointer-events:none!important;overflow:hidden!important}
footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro) ~ *{position:relative;z-index:1}
.klx-foot-astro{position:absolute!important;top:0;left:0;width:180px!important;opacity:.5;pointer-events:none;animation:klx-fastroX 86s linear infinite}
.klx-foot-astro .elementor-widget-container,.klx-foot-astro figure{animation:klx-fastroY 41s ease-in-out infinite alternate}
.klx-foot-astro img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 26px rgba(167,139,250,.28));animation:klx-fastroSpin 58s linear infinite}
@keyframes klx-fastroX{from{transform:translateX(-45%)}to{transform:translateX(calc(100vw + 25%))}}
@keyframes klx-fastroY{from{transform:translateY(10px)}to{transform:translateY(92px)}}
@keyframes klx-fastroSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:767px){.klx-foot-astro{width:110px!important;opacity:.45;animation-duration:70s}}
@media(prefers-reduced-motion:reduce){.klx-foot-astro,.klx-foot-astro .elementor-widget-container,.klx-foot-astro figure,.klx-foot-astro img{animation:none!important}}


/* --- Accueil : fond cosmique (6 aout 2026) --- */
body.home::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 45vh at 18% 12%,rgba(126,98,224,.30),rgba(126,98,224,0) 70%),
             radial-gradient(50vw 40vh at 85% 78%,rgba(94,234,212,.14),rgba(94,234,212,0) 70%),
             radial-gradient(70vw 55vh at 50% 105%,rgba(167,139,250,.16),rgba(167,139,250,0) 70%)}
body.home::after{content:"";position:fixed;top:12vh;left:-16vw;width:150px;height:2px;z-index:-1;
  --klx-a:19deg;pointer-events:none;opacity:0;transform-origin:0 50%;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(226,232,255,.5) 60%,rgba(255,255,255,.9) 100%);
  animation:klx-shoot 14s linear infinite}
/* zone cosmique : collante, hauteur nulle, demarre apres la 2e section */
.klx-cosmos,.elementor-element-c05ac001{display:block!important;position:sticky!important;top:0!important;
  height:0!important;min-height:0!important;margin:0!important;padding:0!important;z-index:0!important;
  pointer-events:none!important;overflow:visible!important;width:100%!important;max-width:none!important}
.klx-cosmos::before,.klx-cosmos::after{content:"";position:absolute;left:-16vw;border-radius:2px;opacity:0;
  pointer-events:none;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(226,232,255,.5) 60%,rgba(255,255,255,.92) 100%);
  animation:klx-shoot 22s linear infinite}
.klx-cosmos::before{--klx-a:11deg;top:26vh;width:96px;height:1.5px;filter:opacity(.7);animation-delay:6s}
.klx-cosmos::after{--klx-a:27deg;top:52vh;width:58px;height:1.1px;filter:opacity(.5);animation-duration:31s;animation-delay:14s}
.klx-home-astro{position:absolute!important;top:0;left:0;width:150px!important;opacity:.5;pointer-events:none;
  animation:klx-hastroX 78s linear infinite}
.klx-home-astro img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 28px rgba(167,139,250,.3));
  animation:klx-hastroY 37s ease-in-out infinite alternate, klx-hastroSpin 61s linear infinite}
@keyframes klx-shoot{
 0%{opacity:0;transform:rotate(var(--klx-a,19deg)) translate3d(0,0,0) scaleX(.45)}
 2%{opacity:1;transform:rotate(var(--klx-a,19deg)) translate3d(10vw,0,0) scaleX(1)}
 16%{opacity:1;transform:rotate(var(--klx-a,19deg)) translate3d(80vw,0,0) scaleX(1)}
 18%{opacity:0;transform:rotate(var(--klx-a,19deg)) translate3d(90vw,0,0) scaleX(.8)}
 100%{opacity:0;transform:rotate(var(--klx-a,19deg)) translate3d(90vw,0,0) scaleX(.8)}}
@keyframes klx-hastroX{from{translate:-22vw 0}to{translate:112vw 0}}
@keyframes klx-hastroY{from{translate:0 10vh}to{translate:0 62vh}}
@keyframes klx-hastroSpin{from{rotate:0deg}to{rotate:360deg}}
@media(max-width:767px){.klx-home-astro{width:100px!important;opacity:.42}}
/* le flottement vertical de l'astronaute du pied de page (widget image sans conteneur interne) */
.klx-foot-astro img{animation:klx-fastroY 41s ease-in-out infinite alternate, klx-fastroSpin 58s linear infinite}
@keyframes klx-fastroY{from{translate:0 10px}to{translate:0 92px}}
@keyframes klx-fastroSpin{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){body.home::after,.klx-cosmos::before,.klx-cosmos::after,.klx-home-astro,.klx-home-astro img,.klx-foot-astro,.klx-foot-astro img{animation:none!important}}
/* --- Accueil : pied de page fondu --- */
body.home footer[data-elementor-type="footer"] > .e-con{background-color:transparent!important;border-top:0!important}
body.home footer[data-elementor-type="footer"]{background:linear-gradient(to bottom,rgba(14,8,33,0) 0%,rgba(14,8,33,.5) 26%,rgba(14,8,33,.88) 62%,#0E0821 100%)}


/* --- Pied de page general : ciel + astronaute colles dans le footer (6 aout 2026) --- */
body:not(.home) footer[data-elementor-type="footer"]{position:relative;overflow:hidden;overflow:clip;background-color:var(--e-global-color-2cf74b7)}
body:not(.home) footer[data-elementor-type="footer"] > .e-con{position:relative;z-index:1;overflow:hidden;overflow:clip}
html body:not(.home) footer[data-elementor-type="footer"] > .e-con.e-con{background:transparent!important}
/* couche ciel : le conteneur de l astronaute devient collant, hauteur nulle, ancre en bas de fenetre */
body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro){position:sticky!important;order:1;top:auto!important;left:auto!important;right:auto!important;bottom:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;flex:0 0 auto!important;z-index:0!important;pointer-events:none!important;overflow:visible!important}
/* etoiles : une hauteur de fenetre au-dessus de l ancrage, le footer glisse dessus */
body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after{content:"";display:block;position:absolute;left:0;right:0;bottom:-20vh;height:120vh;z-index:0;pointer-events:none}
/* pas de derive du fond : c est ce qui faisait ramer la page */
body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before{animation:none!important}
/* astronaute : ancre sur le bas de la couche collante */
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-astro{top:auto!important;bottom:0!important}
@keyframes klx-fastroY{from{translate:0 -22vh}to{translate:0 -64vh}}
/* cometes : portees par un widget espaceur dans la couche collante, donc collantes aussi */
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets{position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:0!important;min-height:0!important;width:100%!important;margin:0!important;padding:0!important;pointer-events:none!important;z-index:0!important;overflow:visible!important}
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets > *{display:none!important}
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::before,body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::after{content:"";display:block;position:absolute;left:-16vw;border-radius:2px;opacity:0;pointer-events:none;z-index:0;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(226,232,255,.5) 60%,rgba(255,255,255,.92) 100%);animation:klx-shoot 20s linear infinite}
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::before{--klx-a:16deg;bottom:54vh;width:120px;height:1.6px;filter:opacity(.75)}
body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::after{--klx-a:28deg;bottom:24vh;width:62px;height:1.1px;filter:opacity(.5);animation-duration:29s;animation-delay:11s}

/* l astronaute de l accueil doit rester visible jusqu en bas */
body.home .elementor.elementor-21{display:contents}
/* sur l accueil l astronaute du pied de page disparait : il y en a deja un qui derive */
body.home .klx-foot-astro{display:none!important}
@media(prefers-reduced-motion:reduce){body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::before,body:not(.home) footer[data-elementor-type="footer"] .klx-foot-comets::after,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,body:not(.home) footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after{animation:none!important}}

/* --- signature HDKN : barres dessinees en CSS (independant de FontAwesome) --- */
footer[data-elementor-type="footer"] .nounderline .fa-bars{font-size:0!important;line-height:1;display:inline-block;vertical-align:middle}
footer[data-elementor-type="footer"] .nounderline .fa-bars::before{content:""!important;display:inline-block;width:15px;height:11px;margin-right:6px;vertical-align:middle;background:linear-gradient(currentColor,currentColor) left top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) left 50%/100% 2px no-repeat,linear-gradient(currentColor,currentColor) left bottom/100% 2px no-repeat}


/* --- accueil : le champ d etoiles ne derive plus --- */
/* klx-drift anime background-position sur une couche fixe de 55 degrades : non compositable,
   donc repeint continu -> bande non peinte en bas de l ecran pendant un defilement rapide.
   Meme correctif que dans le pied de page. Le scintillement de ::after (opacity) est conserve. */
.klx-sky::before{animation:none!important}

/* --- accueil : contenir l astronaute comme dans le pied de page --- */
/* la couche collante rogne elle-meme sur l axe X (clip, pas hidden : hidden creerait un
   conteneur de defilement et casserait son propre collage). overflow-y reste visible pour
   que l astronaute puisse deriver sous la couche, qui fait 0 de haut. */
.klx-cosmos,.elementor-element-c05ac001{overflow-x:clip!important;overflow-y:visible!important}

/* --- grammages : equilibrer les grilles a 9 et a 4 paliers --- */
/* resines et concentres Boost-K : 9 paliers, 3x3 plutot que 4+4+1 */
.klx-grams:has(> .klx-gram:nth-child(9)){grid-template-columns:repeat(3,1fr)!important}
@media(max-width:767px){
 /* minibuds et trim : exactement 4 paliers, 2x2 plutot que 3+1 */
 .klx-grams:has(> .klx-gram:nth-child(4)):not(:has(> .klx-gram:nth-child(5))){grid-template-columns:repeat(2,1fr)!important}
}

/* --- Boutique et archives : prefixe « A partir de » au lieu de la fourchette --- */
/* le prefixe est pose sur le premier montant, qui porte aria-hidden : il n est donc pas relu
   par les lecteurs d ecran, qui continuent d entendre la plage complete du .screen-reader-text.
   Tout est conditionne a :has() : sans support, l affichage d origine est conserve. */
ul.products li.product .price:has(> .amount ~ .amount) > .amount:first-child::before{content:"À partir de ";font-weight:400;opacity:.72}
ul.products li.product .price:has(> .amount ~ .amount) > span[aria-hidden="true"]:not(.amount){display:none}
ul.products li.product .price:has(> .amount ~ .amount) > .amount ~ .amount{display:none}


/* ===== MENU PRINCIPAL - SOUS-MENUS CATEGORIES ===== */
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu{padding:7px!important;border-radius:16px!important;background:rgba(16,9,38,.94)!important;border:1px solid rgba(126,98,224,.32)!important;box-shadow:0 22px 46px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);min-width:224px!important;margin-top:12px!important;overflow:visible!important}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu::before{content:"";position:absolute;top:-6px;left:24px;width:11px;height:11px;rotate:45deg;background:rgba(16,9,38,.94);border-left:1px solid rgba(126,98,224,.32);border-top:1px solid rgba(126,98,224,.32);border-radius:2px}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu li{position:relative}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item{border-radius:11px!important;padding:11px 16px 11px 27px!important;font-size:14.5px!important;transition:background-color .25s ease,color .25s ease,padding-left .25s ease}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item::before{content:"";position:absolute;left:14px;top:50%;translate:0 -50%;width:5px;height:5px;border-radius:50%;background:var(--e-global-color-primary,#7E62E0);opacity:0;scale:.4;transition:opacity .25s ease,scale .25s ease}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover::before,header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus::before,header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active::before{opacity:1;scale:1}
header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:focus,header[data-elementor-type="header"] .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active{background:linear-gradient(90deg,rgba(126,98,224,.30),rgba(126,98,224,.05))!important;padding-left:31px!important;color:#fff!important}
/* menu mobile : hierarchie lisible */
header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown li{position:relative}
header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown a.elementor-sub-item{padding-left:38px!important;font-size:14.5px!important;opacity:.9}
header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown a.elementor-sub-item::before{content:"";position:absolute;left:24px;top:50%;translate:0 -50%;width:4px;height:4px;border-radius:50%;background:var(--e-global-color-primary,#7E62E0);opacity:.75}
header[data-elementor-type="header"] nav.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active{opacity:1}


/* ===== FOND COSMIQUE SUR LES EN-TETES DE PAGE ===== */
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child{position:relative;overflow:hidden;overflow:clip;background-color:var(--e-global-color-2cf74b7)!important}
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child > *{position:relative;z-index:1}
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::before,body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::after{content:"";display:block;position:absolute;z-index:0;pointer-events:none}
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::before{inset:0;animation:none!important}
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::after{left:0;bottom:8%;width:clamp(88px,11vw,150px);aspect-ratio:700/461;background:url(https://www.k-laxie.fr/wp-content/uploads/2026/08/k-laxie-astronaute-flottant.webp) center/contain no-repeat;opacity:.42;filter:drop-shadow(0 0 22px rgba(167,139,250,.26));animation:klx-heroAstroX 86s linear infinite,klx-heroAstroSpin 58s linear infinite}
@keyframes klx-heroAstroX{from{translate:-45% 0}to{translate:calc(100vw + 25%) 0}}
@keyframes klx-heroAstroSpin{from{rotate:0deg}to{rotate:360deg}}
@media(max-width:767px){body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::after{width:86px;opacity:.38;animation-duration:70s,58s}}
@media(prefers-reduced-motion:reduce){body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::after{animation:none!important}}


/* ===== BADGE "POPULAIRE" SUR LE 10 G ===== */
.klx-grams .klx-gram[data-value="10-g"]::before{content:"Populaire";position:absolute;top:-10px;left:12px;z-index:2;background:var(--e-global-color-primary,#7E62E0);color:#fff;font-size:9.5px;font-weight:700;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;white-space:nowrap;pointer-events:none}
.klx-grams .klx-gram[data-value="10-g"].is-best::before{content:none}
@media(max-width:479px){.klx-grams .klx-gram[data-value="10-g"]::before{font-size:8.5px;padding:2px 7px;left:8px}}


/* ===== FICHE PRODUIT : loupe retiree + ajout au panier en Ajax ===== */
.woocommerce-product-gallery__trigger{display:none!important}
.klx-toast{position:fixed;left:50%;bottom:26px;translate:-50% 22px;z-index:9999;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);padding:13px 20px;border-radius:14px;background:rgba(16,9,38,.96);border:1px solid rgba(126,98,224,.34);box-shadow:0 22px 46px -20px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--e-global-color-text,#F4F1FF);font-family:Poppins,sans-serif;font-size:14px;opacity:0;pointer-events:none;transition:opacity .3s ease,translate .3s ease}
.klx-toast.is-on{opacity:1;translate:-50% 0;pointer-events:auto}
.klx-toast.is-err{border-color:rgba(248,113,113,.5)}
.klx-toast__t{font-weight:600;display:flex;align-items:center}
.klx-toast__t::before{content:"";flex:0 0 auto;width:14px;height:8px;margin-right:12px;border-left:2px solid #5EEAD4;border-bottom:2px solid #5EEAD4;rotate:-45deg;translate:0 -2px}
.klx-toast.is-err .klx-toast__t::before{border-color:#F87171}
.klx-toast__a{color:#5EEAD4;text-decoration:none;font-weight:600;white-space:nowrap}
.klx-toast__a:hover{text-decoration:underline}
form.cart.klx-adding .single_add_to_cart_button{opacity:.6;cursor:progress}
@media(max-width:767px){body.klx-buybar-on .klx-toast{bottom:92px}}
@media(prefers-reduced-motion:reduce){.klx-toast{transition:none}}


/* --- bandeau de reassurance : ecrans tres etroits (< 375px) --------------- */
/* sous 375px, quatre colonnes redescendent sous 74px et le mot le plus long ne
   passe plus : on repasse en 2x2, qui reste lisible jusqu a 320px. */
@media(max-width:374px){
 .elementor-element-3c33c6c0{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 10px!important}
}

/* --- accueil : ce qui passe derriere le hero doit rester indistinct ------- */
/* L astronaute qui derive passait NET devant la nebuleuse floutee : la couche
   floutee etait SOUS lui (z-index -2 contre 0). On redescend la couche cosmique
   a -2 (elle reste avant .klx-neb dans le DOM, donc dessous) et on donne a la
   nebuleuse un backdrop-filter : elle floute alors tout ce qui est peint en
   dessous (fond, aurore, astronaute) et laisse net ce qui est au-dessus,
   c est-a-dire les etoiles (-1) et le contenu du hero (1).
   Ne PAS remonter le z-index des etoiles a la place : leurs pseudos sont en
   position:fixed sur toute la page et passeraient au-dessus du contenu. */
/* Depuis le 7 aout (2e passe), cette couche est aussi passee en position:fixed :
   en sticky, sa position de flux est SOUS l en-tete, donc elle ne se collait
   qu apres avoir fait defiler la hauteur de l en-tete — on voyait le decrochage.
   Elle fait toujours 0 de haut : aucun impact sur la mise en page, et les deux
   cometes portees par ses pseudos deviennent fixes elles aussi. */
body.home .klx-cosmos,body.home .elementor-element-c05ac001{
  position:fixed!important;top:0!important;left:0!important;width:100%!important;
  height:0!important;min-height:0!important;z-index:-2!important}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body.home .klx-neb{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
 @media(max-width:767px){body.home .klx-neb{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}
}

/* ==========================================================================
   PAGES WOOCOMMERCE NATIVES (7 aout 2026)
   Mon compte, Panier, Commander, Commande recue, connexion, mot de passe perdu.
   Ces pages ne sont pas construites dans Elementor : elles sont rendues par
   Hello Elementor + les blocs WooCommerce, donc elles n heritent pas du kit et
   sortent au style d usine. Tout leur habillage vit ici, en couleurs globales.
   ⚠ WooCommerce pose des pseudos de clearfix (::before / ::after) sur .woocommerce,
   .col2-set, .woocommerce-Addresses et ul.order_details : des qu on passe le
   parent en grid ils deviennent des CASES de la grille et decalent tout. Il faut
   les neutraliser (content:none) avant toute mise en grille.
   ========================================================================== */

/* -- 1. cadre de page ----------------------------------------------------- */
body.woocommerce-account .page-header,
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header{padding:6px 0 22px;margin-bottom:26px;
  border-bottom:1px solid var(--e-global-color-20a1011)}
body.woocommerce-account .page-content,body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content{padding-bottom:70px}
body.woocommerce-account .woocommerce::before,body.woocommerce-account .woocommerce::after,
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce-Addresses::before,.woocommerce-Addresses::after,
.woocommerce ul.order_details::before,.woocommerce ul.order_details::after,
.woocommerce-order-details::before,.woocommerce-order-details::after,
.woocommerce-customer-details::before,.woocommerce-customer-details::after{content:none!important;display:none!important}

/* -- 2. avis WooCommerce (blocs et natifs) -------------------------------- */
.wc-block-components-notice-banner{background:var(--e-global-color-2cf74b7)!important;
  color:var(--e-global-color-text)!important;border:1px solid var(--e-global-color-20a1011)!important;
  border-radius:14px!important}
.wc-block-components-notice-banner.is-error{background:rgba(248,113,113,.09)!important;border-color:rgba(248,113,113,.45)!important}
.wc-block-components-notice-banner.is-error>svg{fill:#F87171!important}
.wc-block-components-notice-banner.is-success{background:rgba(94,234,212,.08)!important;border-color:rgba(94,234,212,.45)!important}
.wc-block-components-notice-banner.is-success>svg{fill:var(--e-global-color-accent)!important}
.wc-block-components-notice-banner.is-info,.wc-block-components-notice-banner.is-warning{
  background:rgba(126,98,224,.12)!important;border-color:rgba(167,139,250,.38)!important}
.wc-block-components-notice-banner.is-info>svg,.wc-block-components-notice-banner.is-warning>svg{fill:var(--e-global-color-secondary)!important}
.wc-block-components-notice-banner .wc-block-components-button.is-link{color:var(--e-global-color-744b241)!important}
.wc-block-components-validation-error p{color:#F87171!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border:1px solid var(--e-global-color-20a1011);
  border-top:3px solid var(--e-global-color-primary);border-radius:14px;padding:14px 18px;list-style:none}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{content:none!important;display:none!important}
.woocommerce-error{border-top-color:#F87171}
.woocommerce-message{border-top-color:var(--e-global-color-accent)}

/* -- 3. champs de formulaire (natifs et blocs) ---------------------------- */
.woocommerce form .form-row{margin:0 0 16px}
.woocommerce form label,.woocommerce-EditAccountForm label,.woocommerce-address-fields label{
  display:block;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--e-global-color-d0bc8af)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:12px 14px!important;height:auto!important;
  font-family:Poppins,sans-serif!important;font-size:15px!important;
  background:var(--e-global-color-2cf74b7)!important;color:var(--e-global-color-text)!important;
  border:1px solid var(--e-global-color-20a1011)!important;border-radius:10px!important;box-shadow:none!important}
.woocommerce form .form-row input.input-text::placeholder,.woocommerce form .form-row textarea::placeholder{color:#6E6790}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus{outline:none!important;
  border-color:var(--e-global-color-secondary)!important;box-shadow:0 0 0 3px rgba(126,98,224,.28)!important}
.woocommerce input:-webkit-autofill,.woocommerce input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--e-global-color-text)!important;caret-color:var(--e-global-color-text);
  -webkit-box-shadow:0 0 0 1000px var(--e-global-color-2cf74b7) inset!important}
.woocommerce form .form-row .required{color:var(--e-global-color-secondary);text-decoration:none}
.woocommerce form .form-row-first,.woocommerce form .form-row-last{width:calc(50% - 8px)}
.woocommerce form span.description,.woocommerce form em{color:var(--e-global-color-d0bc8af);
  font-size:13px;font-style:normal;display:block;margin-top:6px}
.woocommerce .select2-dropdown{background:var(--e-global-color-2cf74b7);border-color:var(--e-global-color-20a1011);color:var(--e-global-color-text)}
.woocommerce .select2-results__option--highlighted{background:var(--e-global-color-primary)!important}
.woocommerce-form__label-for-checkbox{display:flex!important;align-items:center;gap:9px;font-weight:500;color:var(--e-global-color-d0bc8af)}
.woocommerce-form__input-checkbox{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:17px;height:17px;
  border:1px solid var(--e-global-color-20a1011);border-radius:5px;background:var(--e-global-color-2cf74b7);
  cursor:pointer;position:relative;margin:0}
.woocommerce-form__input-checkbox:checked{background:var(--e-global-color-primary);border-color:var(--e-global-color-primary)}
.woocommerce-form__input-checkbox:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wc-block-components-checkbox__input[type=checkbox]{background:var(--e-global-color-2cf74b7)!important;
  border:1px solid var(--e-global-color-20a1011)!important}
.wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--e-global-color-primary)!important;
  border-color:var(--e-global-color-primary)!important}
.wc-block-components-radio-control__input{accent-color:var(--e-global-color-primary)}
.wc-block-components-text-input label,.wc-block-components-select label{color:var(--e-global-color-d0bc8af)!important}
.woocommerce-privacy-policy-text p{color:var(--e-global-color-d0bc8af);font-size:13.5px}

/* -- 4. tableaux WooCommerce (commandes, telechargements, details) --------- */
.woocommerce table.shop_table,.woocommerce table.woocommerce-orders-table,
.woocommerce table.woocommerce-table--order-details,.woocommerce table.woocommerce-table--order-downloads{
  width:100%;background:var(--e-global-color-2cf74b7);border:1px solid var(--e-global-color-20a1011)!important;
  border-radius:16px;border-collapse:separate!important;border-spacing:0;overflow:hidden;margin:0 0 24px}
.woocommerce table.shop_table th{background:var(--e-global-color-817d572);color:var(--e-global-color-text);
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding:14px 16px;text-align:left;border:0!important}
.woocommerce table.shop_table td{padding:15px 16px;border:0!important;
  border-top:1px solid var(--e-global-color-20a1011)!important;color:var(--e-global-color-d0bc8af);vertical-align:middle}
.woocommerce table.shop_table td a{color:var(--e-global-color-744b241)}
.woocommerce table.shop_table tfoot th,.woocommerce table.shop_table tfoot td{
  background:transparent;color:var(--e-global-color-text);font-size:14px;letter-spacing:0;text-transform:none}

/* -- 5. Mon compte -------------------------------------------------------- */
body.woocommerce-account .woocommerce{display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:32px;align-items:start}
body.woocommerce-account:not(.logged-in) .woocommerce{display:block}
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{width:auto!important;float:none!important}
.woocommerce-MyAccount-navigation{background:var(--e-global-color-2cf74b7);
  border:1px solid var(--e-global-color-20a1011);border-radius:18px;padding:10px;position:sticky;top:104px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation li a{display:block;padding:11px 16px;border-radius:12px;
  color:var(--e-global-color-d0bc8af);font-size:14.5px;font-weight:600;text-decoration:none!important;
  transition:background .2s ease,color .2s ease}
.woocommerce-MyAccount-navigation li a:hover{background:var(--e-global-color-817d572);color:var(--e-global-color-text)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--e-global-color-primary);color:#fff}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content>p{color:var(--e-global-color-d0bc8af)}
.woocommerce-MyAccount-content a:not(.button){color:var(--e-global-color-744b241);text-decoration:none}
.woocommerce-MyAccount-content a:not(.button):hover{color:var(--e-global-color-secondary);text-decoration:underline}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{
  font-size:20px;font-weight:700;color:var(--e-global-color-text);margin:0 0 14px}
.woocommerce-MyAccount-content fieldset{border:1px solid var(--e-global-color-20a1011);
  border-radius:16px;padding:18px 20px;margin:26px 0 18px}
.woocommerce-MyAccount-content fieldset legend{padding:0 8px;font-weight:700;color:var(--e-global-color-text)}
.woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.woocommerce-Addresses .woocommerce-Address{width:auto!important;float:none!important;
  background:var(--e-global-color-2cf74b7);border:1px solid var(--e-global-color-20a1011);
  border-radius:16px;padding:20px 22px}
.woocommerce-Address-title{display:flex!important;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 8px}
.woocommerce-Address-title h3{font-size:17px!important;margin:0!important}
.woocommerce-Address address{font-style:normal;color:var(--e-global-color-d0bc8af);line-height:1.7;margin:12px 0 0}
.woocommerce-account .addresses .title .edit{color:var(--e-global-color-744b241);font-weight:600;font-size:13.5px}

/* connexion, creation de compte, mot de passe perdu */
.woocommerce .col2-set,.woocommerce-page .col2-set{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;width:auto}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{width:auto!important;float:none!important}
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{
  background:var(--e-global-color-2cf74b7)!important;border:1px solid var(--e-global-color-20a1011)!important;
  border-radius:18px!important;padding:24px 24px 26px!important;margin:0!important}
.woocommerce-form-login__rememberme{margin:0 0 14px}
.woocommerce-LostPassword{margin:12px 0 0;font-size:13.5px}
.woocommerce-LostPassword a{color:var(--e-global-color-744b241)}

/* -- 6. Panier et Commander : les panneaux lateraux deviennent des cartes -- */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar.wc-block-components-sidebar{
  background:var(--e-global-color-2cf74b7);border:1px solid var(--e-global-color-20a1011);
  border-radius:18px;padding:20px 22px 24px}
.wc-block-components-order-summary__content,.wc-block-components-totals-wrapper{border-color:var(--e-global-color-20a1011)!important}
.wc-block-components-totals-item__label,.wc-block-components-totals-footer-item{color:var(--e-global-color-text)!important}
.wc-block-components-panel__button,.wc-block-components-totals-coupon__button{color:var(--e-global-color-744b241)!important}
.wc-block-components-panel__button svg{fill:var(--e-global-color-744b241)!important}
.wc-block-components-product-name{color:var(--e-global-color-text)!important;text-decoration:none!important}
.wc-block-components-product-metadata,.wc-block-components-product-badge,
.wc-block-components-product-details,.wc-block-cart-item__remove-link,
.wc-block-components-product-metadata__description{color:var(--e-global-color-d0bc8af)!important}
.wc-block-components-radio-control__option,.wc-block-components-panel,
.wc-block-components-address-card{background:var(--e-global-color-2cf74b7)!important;border-radius:14px!important}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted{
  border-color:var(--e-global-color-primary)!important;box-shadow:0 0 0 1px var(--e-global-color-primary)!important}
.wc-block-components-title,.wc-block-cart__totals-title,.wc-block-components-checkout-step__title{
  color:var(--e-global-color-text)!important}
.wc-block-components-checkout-step__description,.wc-block-components-checkout-step__heading-content{
  color:var(--e-global-color-d0bc8af)!important}
.wc-block-cart-items thead th{color:var(--e-global-color-d0bc8af)!important;font-size:11.5px;
  letter-spacing:1.6px;text-transform:uppercase}
.wc-block-cart-item__wrap .wc-block-components-product-price{color:var(--e-global-color-text)!important}
.wc-block-components-quantity-.elementor-kit-11{border:1px solid var(--e-global-color-20a1011)!important;border-radius:99px!important}
.wc-block-components-quantity-.elementor-kit-11__button{color:var(--e-global-color-text)!important;background:none!important}

/* -- 7. Commande recue ---------------------------------------------------- */
.woocommerce-order .woocommerce-thankyou-order-received{font-size:22px;font-weight:700;
  color:var(--e-global-color-text);margin:0 0 22px}
.woocommerce ul.order_details{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;list-style:none;margin:0 0 30px;padding:0}
.woocommerce ul.order_details li{background:var(--e-global-color-2cf74b7);
  border:1px solid var(--e-global-color-20a1011)!important;border-radius:14px;padding:14px 16px;margin:0;
  float:none!important;font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--e-global-color-d0bc8af)}
.woocommerce ul.order_details li strong{display:block;margin-top:6px;font-size:16px;
  letter-spacing:0;text-transform:none;color:var(--e-global-color-text)}
.woocommerce-column__title,.woocommerce-order-details__title{font-size:20px;color:var(--e-global-color-text);margin:0 0 14px}
.woocommerce-customer-details address{font-style:normal;background:var(--e-global-color-2cf74b7);
  border:1px solid var(--e-global-color-20a1011)!important;border-radius:16px;padding:18px 20px;
  color:var(--e-global-color-d0bc8af);line-height:1.7}

/* -- 8. tablette et telephone --------------------------------------------- */
@media(max-width:900px){
 body.woocommerce-account .woocommerce{grid-template-columns:minmax(0,1fr);gap:22px}
 .woocommerce-MyAccount-navigation{position:static;padding:8px}
 .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:6px}
 .woocommerce-MyAccount-navigation li a{padding:9px 14px;font-size:13.5px}
}
@media(max-width:767px){
 body.woocommerce-account .page-header,body.woocommerce-cart .page-header,
 body.woocommerce-checkout .page-header{padding-bottom:16px;margin-bottom:20px}
 .woocommerce form .form-row-first,.woocommerce form .form-row-last{width:100%}
 .woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:12px 12px;font-size:13.5px}
 .wc-block-cart__sidebar .wc-block-components-sidebar,
 .wc-block-checkout__sidebar.wc-block-components-sidebar{padding:16px 16px 20px;border-radius:16px}
 .woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword{padding:18px 18px 20px!important}
 .woocommerce ul.order_details{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
}


/* ==========================================================================
   L ASTRONAUTE DANS LES EN-TETES DE PAGE (7 aout 2026, 2e passe)
   Retour de William : le revoir sur le hero de la boutique, des categories, de
   chaque fiche produit et de toutes les pages editoriales finissait par lasser.
   On le coupe donc dans les EN-TETES DE PAGE uniquement — le ciel etoile reste.

   ⚠ Il RESTE dans le pied de page global (correction du 7 aout au soir) : c est
   la qu il a sa place, une fois par page et tout en bas. Il n est masque que sur
   l accueil, ou un autre astronaute derive deja en fond fixe.
   ⚠ Ne jamais supprimer le widget image du modele 83 pour couper l astronaute :
   les etoiles du pied de page sont portees par les pseudos du conteneur
   selectionne par :has(> .klx-foot-astro). Sans le widget dans le DOM, le :has
   ne matche plus et le ciel disparait avec lui.
   ========================================================================== */
body:not(.home) .elementor:not([data-elementor-type="header"]):not([data-elementor-type="footer"]):not([data-elementor-type="popup"]) > .e-con.e-parent:first-child:not(.klx-cosmos)::after{content:none!important}

/* --- les lueurs du pied de page (7 aout, soir) ----------------------------
   Sur l accueil, le pied de page baigne dans l aurore fixe de body.home::before
   et se fond dans la page. Sur les autres pages il n avait que sa couleur plate :
   il manquait les halos. On les repose ici en background-image sur le pied de
   page lui-meme, et pas sur un pseudo : les quatre pseudos des deux couches
   collantes sont deja pris par les etoiles et par les cometes.
   Valeurs calquees sur body.home::before, avec son opacite .55 deja integree aux
   alphas. Statique : pas d animation, pas de background-attachment, cout nul. */
body:not(.home) footer[data-elementor-type="footer"]{
  background-image:
    radial-gradient(58% 62% at 18% 6%,rgba(126,98,224,.22),rgba(126,98,224,0) 70%),
    radial-gradient(50% 58% at 87% 72%,rgba(94,234,212,.11),rgba(94,234,212,0) 70%),
    radial-gradient(72% 74% at 50% 108%,rgba(167,139,250,.14),rgba(167,139,250,0) 70%)}


/* ==========================================================================
   ASTRONAUTES A PLEINE OPACITE (7 aout 2026, soir) — demande de William
   Rappel utile : l astronaute ne figure plus qu a DEUX endroits du site —
   la couche fixe de l accueil (.klx-home-astro) et le pied de page global
   (.klx-foot-astro, lui-meme masque sur l accueil). Il a ete retire des
   en-tetes de page le meme jour. Sur l accueil il reste indistinct derriere
   le hero grace au backdrop-filter de .klx-neb : monter l opacite ne casse
   donc pas le voile.
   ========================================================================== */
.klx-home-astro,.klx-foot-astro{opacity:1!important}
@media(max-width:767px){.klx-home-astro,.klx-foot-astro{opacity:1!important}}


/* 7 aout, soir : les pre-roules sont ranges dans Accessoires a la demande de
   William, mais ce sont des produits CBD — ils doivent GARDER leur bulletin
   d analyse et le repere « Analyse de lot fournie ». Ils portent l etiquette
   produit « consommable », que WooCommerce sort en .product_tag-consommable
   dans les post_class du conteneur produit. Toute nouvelle reference de ce
   type (pre-roules, futures huiles...) rangee dans Accessoires n a qu a
   recevoir cette etiquette pour etre exclue des regles ci-dessous. */
/* ==========================================================================
   FICHES ACCESSOIRES : pas de bulletin d analyse (7 aout 2026, soir)
   Le gabarit produit 307 est commun a tout le catalogue. Sur un briquet, un
   grinder ou un carnet de feuilles, le panneau « Bulletin d analyse du lot »
   et le repere « Analyse de lot fournie » sont des promesses fausses.
   On les coupe sur les seules fiches rangees dans Accessoires. Le crochet est
   la classe post_class du conteneur produit (.product_cat-accessoires) : le
   <body> ne porte AUCUNE classe de categorie sur une fiche produit, c est
   verifie. Les caracteristiques restent lisibles dans l onglet « Infos ».
   ========================================================================== */
body.single-product:has(.product_cat-accessoires):not(:has(.product_tag-consommable)) .klx-coa,
body.single-product:has(.product_cat-accessoires):not(:has(.product_tag-consommable)) .elementor-element-67b96a29{display:none!important}
@media(max-width:767px){
 body.single-product:has(.product_cat-accessoires):not(:has(.product_tag-consommable)) .elementor-element-3c33c6c0{
   grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* =========================================================================
   FICHE PRODUIT v2 — tuiles de variation denses, promotions, suggestions
   Ajouté le 24/08/2026. Remplace l'habillage des anciennes cartes de
   grammage (règles plus haut dans ce fichier, neutralisées par !important).
   Une seule couleur à changer pour toute la promo : --klx-promo.
   ========================================================================= */
:root{
  --klx-promo:#FF4D9D;
  --klx-promo-ink:#FFFFFF;
  --klx-tile:#170E31;
  --klx-tile-hi:#1F1540;
  --klx-line:rgba(167,139,250,.20);
}

/* ---- la grille -------------------------------------------------------- */
html body .klx-grams{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px 10px!important;
  margin:0 0 18px!important;
}
html body .klx-grams:has(> .klx-gram:nth-child(9)){grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* ---- une tuile -------------------------------------------------------- */
html body .klx-grams button.klx-gram{
  -webkit-appearance:none!important;appearance:none!important;
  background-image:none!important;box-shadow:none!important;
  font:inherit!important;text-transform:none!important;letter-spacing:normal!important;
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  gap:1px 10px!important;
  padding:9px 12px!important;
  margin:0!important;margin-inline-start:0!important;margin-inline-end:0!important;
  text-align:left!important;
  background-color:var(--klx-tile)!important;
  border:1px solid var(--klx-line)!important;
  border-radius:14px!important;
  cursor:pointer!important;
  transition:background-color .16s,border-color .16s,transform .16s!important;
}
html body .klx-grams button.klx-gram:hover:not(:disabled){
  background-color:var(--klx-tile-hi)!important;
  border-color:rgba(167,139,250,.42)!important;
  transform:none!important;
}
html body .klx-grams button.klx-gram:focus-visible{
  outline:2px solid var(--e-global-color-secondary,#A78BFA)!important;outline-offset:2px!important;
}

/* ---- la tuile sélectionnée passe en pleine largeur, en tête ----------- */
html body .klx-grams button.klx-gram.is-sel,
html body .klx-grams button.klx-gram.is-selected{
  grid-column:1/-1!important;
  order:-1!important;
  padding:12px 18px!important;
  background-color:var(--klx-tile-hi)!important;
  border-color:var(--e-global-color-primary,#7E62E0)!important;
  box-shadow:0 0 0 1px var(--e-global-color-primary,#7E62E0) inset!important;
}
html body .klx-grams button.klx-gram.is-sel .klx-gram__w,
html body .klx-grams button.klx-gram.is-selected .klx-gram__w{font-size:26px!important}
html body .klx-grams button.klx-gram.is-sel .klx-gram__p,
html body .klx-grams button.klx-gram.is-selected .klx-gram__p{font-size:22px!important}

/* ---- contenu de la tuile --------------------------------------------- */
.klx-gram__head{grid-column:1!important;grid-row:1!important;display:flex!important;align-items:center!important;gap:7px!important;min-width:0}
.klx-gram__w{font-size:17px!important;font-weight:700!important;line-height:1.15!important;color:var(--e-global-color-text,#F4F1FF)!important;white-space:nowrap}
.klx-gram__u{grid-column:1!important;grid-row:2!important;font-size:11.5px!important;line-height:1.25!important;color:#A9A2C9!important;white-space:nowrap}
.klx-gram__prices{grid-column:2!important;grid-row:1/3!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important;gap:1px!important;min-width:0}
.klx-gram__was{font-size:11.5px!important;line-height:1.2!important;color:#7C749B!important;text-decoration:line-through!important;white-space:nowrap}
.klx-gram__p{font-size:17px!important;font-weight:700!important;line-height:1.15!important;color:var(--e-global-color-text,#F4F1FF)!important;white-space:nowrap}
html body .klx-grams button.klx-gram.is-out{opacity:.42!important;cursor:not-allowed!important}
html body .klx-grams button.klx-gram.is-out .klx-gram__p{text-decoration:line-through!important}
.klx-gram__out{grid-column:1/-1!important;grid-row:3!important;font-size:10px!important;letter-spacing:.06em;text-transform:uppercase;color:#A9A2C9!important}

/* ---- la puce de remise, la seule chose qui bouge ---------------------- */
.klx-gram__off,.klx-xs__off,.woocommerce span.onsale{
  position:relative;
  display:inline-block;
  background:var(--klx-promo)!important;
  color:var(--klx-promo-ink)!important;
  font-size:11px!important;font-weight:700!important;line-height:1!important;
  letter-spacing:.02em;
  padding:4px 6px!important;
  border-radius:6px!important;
  white-space:nowrap;
  will-change:transform;
  animation:klx-promo-pulse 1.6s ease-in-out infinite;
}
/* la lueur vit sur un pseudo : on n'anime qu'une opacité, jamais une ombre */
.klx-gram__off::after,.klx-xs__off::after,.woocommerce span.onsale::after{
  content:"";position:absolute;inset:-2px;border-radius:8px;
  box-shadow:0 0 10px 2px var(--klx-promo),0 0 26px 6px var(--klx-promo);
  opacity:.34;pointer-events:none;
  animation:klx-promo-glow 1.6s ease-in-out infinite;
}
@keyframes klx-promo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes klx-promo-glow{0%,100%{opacity:.30}50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){
  .klx-gram__off,.klx-xs__off,.woocommerce span.onsale{animation:none!important;transform:none!important}
  .klx-gram__off::after,.klx-xs__off::after,.woocommerce span.onsale::after{animation:none!important;opacity:.34!important}
}
/* la pastille WooCommerce des grilles produit : même langage, bonne place */
.woocommerce span.onsale{
  position:absolute!important;top:12px!important;left:12px!important;right:auto!important;
  min-width:0!important;min-height:0!important;margin:0!important;
  font-size:12px!important;padding:5px 9px!important;border-radius:7px!important;
  z-index:3!important;
}

/* ---- « Meilleur prix » / « Populaire » : jamais en même temps qu'une remise */
.klx-gram__badge{
  position:absolute!important;top:-9px!important;left:50%!important;transform:translateX(-50%)!important;
  font-size:9px!important;font-weight:700!important;line-height:1!important;
  letter-spacing:.05em!important;text-transform:uppercase!important;
  padding:3px 7px!important;border-radius:99px!important;
  color:#04141A!important;background:#5EEAD4!important;white-space:nowrap!important;
}
.klx-grams .klx-gram[data-value="10-g"]::before{
  content:"Populaire";
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  z-index:1;
  background:var(--e-global-color-primary,#7E62E0);color:#FFFFFF;
  font-size:9px;font-weight:700;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;white-space:nowrap;
}
.klx-grams .klx-gram[data-value="10-g"].is-best::before{content:none}
.klx-grams .klx-gram.is-promo .klx-gram__badge{display:none!important}
.klx-grams .klx-gram.is-promo[data-value="10-g"]::before{content:none!important}
.klx-grams .klx-gram.is-sel::before,.klx-grams .klx-gram.is-selected::before{content:none!important}
.klx-grams .klx-gram.is-sel .klx-gram__badge,.klx-grams .klx-gram.is-selected .klx-gram__badge{display:none!important}

/* ---- « Complétez votre commande » ------------------------------------ */
.klx-xs{margin:20px 0 6px}
.klx-xs__title{
  margin:0 0 10px!important;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#A9A2C9;
}
.klx-xs__list{display:flex;flex-direction:column;gap:8px}
.klx-xs__item{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;
  padding:9px 12px;
  background:var(--klx-tile);border:1px solid var(--klx-line);border-radius:14px;
  transition:background-color .16s,border-color .16s;
}
.klx-xs__item:hover{background:var(--klx-tile-hi);border-color:rgba(167,139,250,.42)}
.klx-xs__thumb{display:block;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#100A22;flex:none}
.klx-xs__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.klx-xs__body{min-width:0;display:flex;flex-direction:column;gap:3px}
.klx-xs__name{
  font-size:13.5px;font-weight:600;line-height:1.3;color:var(--e-global-color-text,#F4F1FF);
  text-decoration:none!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.klx-xs__name:hover{color:var(--e-global-color-secondary,#A78BFA)}
.klx-xs__prices{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.klx-xs__was{font-size:11.5px;color:#7C749B;text-decoration:line-through}
.klx-xs__p{font-size:15px;font-weight:700;color:var(--e-global-color-text,#F4F1FF)}
.klx-xs__add{
  -webkit-appearance:none;appearance:none;background-image:none;box-shadow:none;
  flex:none;font:inherit;font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:99px;cursor:pointer;
  color:#F4F1FF;background-color:rgba(126,98,224,.22);
  border:1px solid rgba(167,139,250,.42);
  transition:background-color .16s,color .16s,border-color .16s;
}
.klx-xs__add:hover{background-color:var(--e-global-color-primary,#7E62E0);border-color:transparent}
.klx-xs__add.is-busy{opacity:.7;cursor:default}
.klx-xs__add.is-done{background-color:#5EEAD4;border-color:transparent;color:#04141A}

/* ---- téléphone -------------------------------------------------------- */
@media(max-width:767px){
  html body .klx-grams{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 8px!important}
  html body .klx-grams button.klx-gram{padding:8px 10px!important;border-radius:12px!important;gap:1px 6px!important}
  html body .klx-grams button.klx-gram.is-sel,
  html body .klx-grams button.klx-gram.is-selected{padding:10px 14px!important}
  html body .klx-grams button.klx-gram.is-sel .klx-gram__w,
  html body .klx-grams button.klx-gram.is-selected .klx-gram__w{font-size:22px!important}
  html body .klx-grams button.klx-gram.is-sel .klx-gram__p,
  html body .klx-grams button.klx-gram.is-selected .klx-gram__p{font-size:18px!important}
  .klx-gram__w{font-size:15px!important}
  .klx-gram__p{font-size:15px!important}
  .klx-gram__u{font-size:10.5px!important}
  .klx-gram__was{font-size:10.5px!important}
  .klx-gram__off{font-size:10px!important;padding:3px 5px!important}
  .klx-xs__item{grid-template-columns:48px 1fr auto;gap:10px;padding:8px 10px}
  .klx-xs__thumb{width:48px;height:48px}
  .klx-xs__name{font-size:12.5px}
  .klx-xs__add{padding:8px 13px;font-size:12.5px}
}
@media(max-width:359px){
  html body .klx-grams{grid-template-columns:1fr!important}
}


/* =========================================================================
   FICHE PRODUIT v2 — correctifs du 25/08/2026
   1. libellés longs : la puce de remise débordait sur le prix
   2. grille produits : choix du format dans la carte (snippet 909)
   ========================================================================= */

/* ---- 1. libellés longs (couleur, design, parfum) ---------------------- */
/* Une tuile « Fanta orange −25% » ne tient pas sur une ligne de 182 px :
   le libellé est en nowrap, il débordait par-dessus la colonne des prix.
   Les tuiles SANS prix à l'unité passent en deux lignes empilées. */
html body .klx-grams button.klx-gram{grid-template-columns:minmax(0,1fr) auto!important}
.klx-gram__head{min-width:0!important;flex-wrap:wrap!important}
.klx-gram__off{flex:0 0 auto!important}
.klx-gram__w{min-width:0!important}

html body .klx-grams button.klx-gram:not(:has(.klx-gram__u)){
  grid-template-columns:minmax(0,1fr)!important;
  gap:4px 8px!important;
}
html body .klx-grams button.klx-gram:not(:has(.klx-gram__u)) .klx-gram__w{white-space:normal!important}
html body .klx-grams button.klx-gram:not(:has(.klx-gram__u)) .klx-gram__prices{
  grid-column:1!important;grid-row:2!important;
  flex-direction:row!important;align-items:baseline!important;
  justify-content:flex-start!important;gap:8px!important;
}
/* la tuile choisie est large : elle peut revenir sur deux colonnes */
html body .klx-grams button.klx-gram.is-sel:not(:has(.klx-gram__u)),
html body .klx-grams button.klx-gram.is-selected:not(:has(.klx-gram__u)){
  grid-template-columns:minmax(0,1fr) auto!important;
}
html body .klx-grams button.klx-gram.is-sel:not(:has(.klx-gram__u)) .klx-gram__prices,
html body .klx-grams button.klx-gram.is-selected:not(:has(.klx-gram__u)) .klx-gram__prices{
  grid-column:2!important;grid-row:1!important;
  flex-direction:column!important;align-items:flex-end!important;gap:1px!important;
}

/* ---- 2. le format se choisit dans la carte de la grille --------------- */
html body a.add_to_cart_button.klx-loop-hidden{display:none!important}
.klx-loop{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px}
.klx-loop__sel{
  -webkit-appearance:none;appearance:none;
  width:100%;min-width:0;
  font:inherit;font-size:13.5px;line-height:1.2;
  padding:10px 34px 10px 14px;
  color:var(--e-global-color-text,#F4F1FF);
  background-color:var(--klx-tile,#170E31);
  border:1px solid var(--klx-line,rgba(167,139,250,.20));
  border-radius:99px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px 8px;
  cursor:pointer;
  transition:border-color .16s,background-color .16s;
}
.klx-loop__sel:hover{border-color:rgba(167,139,250,.45)}
.klx-loop__sel:focus-visible{outline:2px solid var(--e-global-color-secondary,#A78BFA);outline-offset:2px}
.klx-loop__sel option{background:#170E31;color:#F4F1FF}
.klx-loop__sel option:disabled{color:#6F6790}
.klx-loop__add{
  -webkit-appearance:none;appearance:none;background-image:none;box-shadow:none;
  width:100%;font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 16px;border-radius:99px;cursor:pointer;
  color:#FFFFFF;background-color:var(--e-global-color-primary,#7E62E0);
  border:1px solid transparent;
  transition:background-color .16s,color .16s,opacity .16s;
}
.klx-loop__add:hover:not(:disabled){background-color:#6B4FD0}
.klx-loop__add:disabled{opacity:.45;cursor:not-allowed}
.klx-loop__add.is-done{background-color:#5EEAD4;color:#04141A}
@media(max-width:767px){
  .klx-loop{gap:6px;margin-top:10px}
  .klx-loop__sel,.klx-loop__add{font-size:12.5px;padding-top:9px;padding-bottom:9px}
}


/* ---- cartes de la grille : les boutons alignés en bas ----------------- */
/* Un produit simple n'a qu'un bouton, un produit variable a un select
   au-dessus : sans cela les deux ne tombent pas à la même hauteur. */
.woocommerce ul.products li.product{display:flex!important;flex-direction:column!important}
.woocommerce ul.products li.product .klx-loop,
.woocommerce ul.products li.product > a.add_to_cart_button,
.woocommerce ul.products li.product > a.button{margin-top:auto!important}


/* =========================================================================
   GRILLES PRODUIT — cartes uniformes (26/08/2026)
   Toutes les cartes ont la même forme : image, titre, capsule, bouton.
   Produit variable → sélecteur de format · produit simple → prix en capsule.
   La ligne de prix native est masquée dans les deux cas (classe klx-loop-on,
   posée par le snippet 909 et retirée si les prix n'ont pas pu être chargés).
   ========================================================================= */

.woocommerce ul.products li.product.klx-loop-on .price{display:none!important}

.klx-loop__price{
  display:block;width:100%;box-sizing:border-box;
  font-size:13.5px;line-height:1.2;font-weight:600;
  padding:10px 14px;
  background-color:var(--klx-tile,#170E31);
  border:1px solid var(--klx-line,rgba(167,139,250,.20));
  border-radius:99px;
  cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.klx-loop__price,.klx-loop__price *{color:var(--e-global-color-text,#F4F1FF)!important}
.klx-loop__price del,.klx-loop__price del *{color:#7C749B!important}
.klx-loop__price del{font-weight:400;margin-right:7px}
.klx-loop__price ins{text-decoration:none;background:transparent}

/* le bouton natif et le nôtre : un seul gabarit, celui de la charte */
.woocommerce ul.products li.product .klx-loop__add,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product .klx-loop a.button{
  display:block!important;width:100%!important;box-sizing:border-box!important;
  -webkit-appearance:none!important;appearance:none!important;
  font-family:Poppins,sans-serif!important;font-size:14px!important;font-weight:600!important;
  line-height:1.2!important;letter-spacing:normal!important;
  text-align:center!important;text-decoration:none!important;white-space:nowrap!important;
  margin:0!important;padding:13px 16px!important;
  border:0!important;border-radius:99px!important;
  color:#FFFFFF!important;
  background-color:transparent!important;
  background-image:linear-gradient(135deg,var(--e-global-color-primary,#7E62E0),#8F74EA)!important;
  box-shadow:0 14px 34px -16px rgba(126,98,224,.95)!important;
  cursor:pointer!important;
  transition:transform .3s,box-shadow .3s,filter .3s!important;
}
.woocommerce ul.products li.product .klx-loop__add:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover{filter:brightness(1.08)!important}
.woocommerce ul.products li.product .klx-loop__add.is-done{
  background-image:none!important;background-color:#5EEAD4!important;color:#04141A!important;
  box-shadow:none!important;
}
/* « Voir le panier » que WooCommerce ajoute après un ajax : il décale la carte
   et casse l'alignement de la rangée. Le bouton passe à « Ajouté » (snippet 909)
   et le panier de l'en-tête se met à jour : le lien ne sert plus à rien. */
.woocommerce ul.products li.product a.added_to_cart{display:none!important}
.woocommerce ul.products li.product .klx-loop a.add_to_cart_button.is-done{
  background-image:none!important;background-color:#5EEAD4!important;
  color:#04141A!important;box-shadow:none!important;
}

@media(max-width:767px){
  .woocommerce ul.products li.product .klx-loop__add,
  .woocommerce ul.products li.product a.add_to_cart_button{font-size:12.5px!important;padding:11px 10px!important}
  .klx-loop__price{font-size:12.5px;padding:9px 12px}
}

/* ---- description de catégorie : un seul trait, et seulement s'il sépare --- */
/* La règle d'origine visait le dernier paragraphe (la mention en italique) et
   son <em> à la fois. Sur une description d'un seul paragraphe, ce paragraphe
   est aussi le premier : il cumulait le cadre, le trait de séparation et celui
   de son <em> — d'où les traits parasites dans le cadre. */
.klx-archive-seo .term-description > p:last-child em{
  border-top:0!important;margin-top:0!important;padding-top:0!important;
}
.klx-archive-seo .term-description > p:first-child:last-child{
  margin-top:0!important;padding-top:22px!important;border-top:0!important;
  font-size:17.5px!important;line-height:1.7!important;
  color:var(--e-global-color-text,#F4F1FF)!important;
}
.klx-archive-seo .term-description > p:first-child:last-child em{
  font-size:inherit!important;line-height:inherit!important;color:inherit!important;
}


/* Le lien natif « Choix des options » reste masqué quoi qu'il arrive : la règle
   de gabarit des boutons ci-dessus est plus spécifique que la règle d'origine
   et le faisait réapparaître sous le sélecteur des cartes à variations. */
html body .woocommerce ul.products li.product a.add_to_cart_button.klx-loop-hidden,
html body a.add_to_cart_button.klx-loop-hidden{display:none!important}


/* Sur téléphone, le bouton natif déplacé dans la capsule (.klx-loop a.button)
   est atteint par un sélecteur plus spécifique que la règle mobile plus haut :
   il restait à la taille bureau à côté du nôtre. */
@media(max-width:767px){
  html body .woocommerce ul.products li.product .klx-loop a.button,
  html body .woocommerce ul.products li.product .klx-loop__add{
    font-size:12.5px!important;padding:11px 10px!important;
  }
}


/* ---- pas de clignotement au chargement des grilles -------------------- */
/* Le snippet 931 pose « klx-grid-js » sur <html> en <head>, avant le premier
   affichage. Tant qu'une carte n'a pas sa capsule ET son prix (classe
   klx-loop-done posée par le snippet 909), on masque le prix natif et le bouton
   « Choix des options » en réservant exactement leur hauteur : plus de prix vert
   qui apparaît puis disparaît, plus de sélecteur sans tarif, aucun saut.
   Sans JavaScript, « klx-grid-js » n'existe pas et la carte s'affiche normalement. */
html.klx-grid-js .woocommerce ul.products li.product:not(.klx-loop-done) .price{display:none!important}
html.klx-grid-js .woocommerce ul.products li.product:not(.klx-loop-done) .klx-loop{visibility:hidden!important}
html.klx-grid-js .woocommerce ul.products li.product:not(.klx-loop-done) a.add_to_cart_button{
  visibility:hidden!important;
  height:89px!important;padding:0!important;
  margin-top:auto!important;   /* comme .klx-loop, sinon la carte perd 12 px en se révélant */
  box-shadow:none!important;background-image:none!important;
}
@media(max-width:767px){
  html.klx-grid-js .woocommerce ul.products li.product:not(.klx-loop-done) a.add_to_cart_button{
    height:78px!important;margin-top:auto!important;
  }
}


/* ---- notes en étoiles ------------------------------------------------- */
/* Fiche produit : la note vit entre la description courte et les formats.
   Étoiles et compteur d'avis sur une seule ligne, avec de l'air en dessous. */
.woocommerce-product-rating{
  display:flex!important;align-items:center;flex-wrap:wrap;gap:4px 10px;
  margin:4px 0 20px!important;line-height:1!important;
}
.woocommerce-product-rating .star-rating{float:none!important;margin:0!important;font-size:17px!important}
.woocommerce-product-rating .woocommerce-review-link{font-size:13.5px;white-space:nowrap}

/* Grille : la note occupe sa propre ligne, alignée sur le titre et le prix,
   avec assez d'espace pour ne pas coller à la capsule. */
.woocommerce ul.products li.product .star-rating{
  display:block!important;float:none!important;
  margin:10px 0 14px!important;
  font-size:16px!important;
}
@media(max-width:767px){
  .woocommerce-product-rating{margin:2px 0 16px!important}
  .woocommerce-product-rating .star-rating{font-size:15px!important}
  .woocommerce ul.products li.product .star-rating{
    font-size:14px!important;margin:8px 0 12px!important;
  }
}


/* =========================================================================
   PAGE 404 — gabarit error-404 (938)
   Reprend le décor de l'accueil : nébuleuse floutée du hero, halos de section,
   astronaute. Le reste (ciel du pied de page) vient des règles body:not(.home).
   ========================================================================= */

/* le grand nombre : dégradé de la charte, halo qui respire */
.klx-404-num .elementor-heading-title{
  font-size:clamp(88px,17vw,210px)!important;
  line-height:.84!important;letter-spacing:-.045em!important;
  margin:0 0 4px!important;
  background:linear-gradient(135deg,#F4F1FF 0%,#A78BFA 34%,#7E62E0 62%,#5EEAD4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent!important;
  animation:klx-404-glow 5.5s ease-in-out infinite;
}
@keyframes klx-404-glow{
  0%,100%{filter:drop-shadow(0 0 24px rgba(126,98,224,.40))}
  50%    {filter:drop-shadow(0 0 46px rgba(167,139,250,.72))}
}

/* l'astronaute dérive doucement et s'incline : deux animations séparées,
   l'une sur le conteneur, l'autre sur l'image, pour ne pas se disputer transform */
.klx-404-astro{animation:klx-404-float 9s ease-in-out infinite alternate}
.klx-404-astro img{
  filter:drop-shadow(0 0 42px rgba(167,139,250,.34));
  animation:klx-404-tilt 34s ease-in-out infinite;
}
@keyframes klx-404-float{0%{transform:translateY(-16px)}100%{transform:translateY(18px)}}
@keyframes klx-404-tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* la recherche produit, au gabarit des capsules de la boutique */
.klx-404-search form.woocommerce-product-search{
  display:flex;gap:8px;max-width:540px;width:100%;
}
.klx-404-search label,.klx-404-search .screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.klx-404-search .search-field{
  flex:1 1 auto;min-width:0;box-sizing:border-box;
  font:inherit;font-size:15px;
  padding:14px 20px;
  color:var(--e-global-color-text,#F4F1FF);
  background:rgba(23,14,49,.72);
  border:1px solid var(--klx-line,rgba(167,139,250,.22));
  border-radius:99px;-webkit-appearance:none;appearance:none;
  backdrop-filter:blur(8px);
}
.klx-404-search .search-field::placeholder{color:#8F87AE}
.klx-404-search .search-field:focus{
  outline:none;border-color:var(--e-global-color-secondary,#A78BFA);
  box-shadow:0 0 0 3px rgba(167,139,250,.18);
}
.klx-404-search button[type="submit"]{
  flex:0 0 auto;font:inherit;font-size:14px;font-weight:600;
  padding:14px 26px;border:0;border-radius:99px;color:#FFFFFF;cursor:pointer;
  background-color:transparent;
  background-image:linear-gradient(135deg,var(--e-global-color-primary,#7E62E0),#8F74EA);
  box-shadow:0 14px 34px -16px rgba(126,98,224,.95);
  transition:filter .3s;
}
.klx-404-search button[type="submit"]:hover{filter:brightness(1.08)}

@media(max-width:767px){
  .klx-404-num .elementor-heading-title{font-size:clamp(78px,26vw,140px)!important}
  .klx-404-search form.woocommerce-product-search{flex-direction:column}
  .klx-404-search button[type="submit"]{width:100%}
  .klx-404-astro{animation-duration:11s}
}
@media(prefers-reduced-motion:reduce){
  .klx-404-num .elementor-heading-title,.klx-404-astro,.klx-404-astro img{animation:none!important}
}


/* le libellé du bouton vient de WooCommerce et ne se règle pas dans le widget :
   « Recherche » est un nom, on veut un verbe */
.klx-404-search button[type="submit"]{font-size:0!important;padding-left:30px!important;padding-right:30px!important}
.klx-404-search button[type="submit"]::after{content:"Chercher";font-size:14px;font-weight:600}
.klx-404-search{margin-bottom:24px}
@media(max-width:767px){
  .klx-404-search button[type="submit"]::after{font-size:13.5px}
  .klx-404-search{margin-bottom:20px}
}

/* ===== décor cosmique étendu aux pages boutique — 25 août 2026 ============ */
/* Les gabarits 307 (fiche produit) et 312 (archive produit) portent désormais
   la même couche .klx-cosmos que l'accueil, et la classe .klx-sky sur leur
   bandeau de titre : le ciel étoilé est donc déjà fixe sur toute la hauteur.
   Ce bloc termine la bascule. Les pages éditoriales (guides, notre univers,
   pages locales) ne sont PAS concernées : elles gardent leur ciel de hero et
   leur pied de page décoré. */

/* 1. la couche cosmique doit être fixe, pas collante : en sticky elle ne se
   colle qu'après avoir fait défiler la hauteur de l'en-tête, on voit le
   décrochage. Même raison que sur l'accueil. */
body.single-product .klx-cosmos,
body.tax-product_cat .klx-cosmos,
body.post-type-archive-product .klx-cosmos{
  position:fixed!important;top:0!important;left:0!important;z-index:-2!important;
  background:none!important;background-color:transparent!important}

/* 2. les sections de contenu laissent passer le ciel. On épargne le bandeau de
   titre (.klx-sky) qui garde sa teinte violette très légère sur l'archive. */
body.single-product .elementor-location-single > .e-con.e-parent:not(.klx-sky),
body.tax-product_cat .elementor-location-archive > .e-con.e-parent:not(.klx-sky),
body.post-type-archive-product .elementor-location-archive > .e-con.e-parent:not(.klx-sky){
  background-color:transparent!important}

/* 3. le pied de page se fond dans la page au lieu de rejouer son propre décor :
   plus de halos radiaux, plus de ciel local, plus de second astronaute.
   On garde .klx-foot-astro dans le DOM : le sélecteur :has(> .klx-foot-astro)
   des étoiles du pied de page en dépend. */
body.single-product footer[data-elementor-type="footer"],
body.tax-product_cat footer[data-elementor-type="footer"],
body.post-type-archive-product footer[data-elementor-type="footer"]{
  background-color:transparent!important;
  background-image:none!important}
body.single-product footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,
body.single-product footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after,
body.tax-product_cat footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,
body.tax-product_cat footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after,
body.post-type-archive-product footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::before,
body.post-type-archive-product footer[data-elementor-type="footer"] .e-con:has(> .klx-foot-astro)::after{
  content:none!important}
body.single-product .klx-foot-astro,
body.tax-product_cat .klx-foot-astro,
body.post-type-archive-product .klx-foot-astro{visibility:hidden!important}

/* 4. bandeau de titre + fil d'Ariane compact. Il faisait 262 px en bureau et
   196 px en téléphone pour trois lignes de texte. */
.klx-pagehead .elementor-widget-woocommerce-breadcrumb{margin-bottom:10px!important}
.klx-pagehead .elementor-widget-heading{margin-bottom:4px!important}
.klx-pagehead .elementor-widget-theme-page-title{margin-bottom:0!important}
@media(max-width:1024px){
  .klx-pagehead .elementor-widget-woocommerce-breadcrumb{margin-bottom:8px!important}
}
@media(max-width:767px){
  html body .klx-pagehead{padding-top:14px!important;padding-bottom:12px!important}
  html body .klx-pagehead .woocommerce-breadcrumb{font-size:11px!important;line-height:1.5!important}
  html body .klx-pagehead .elementor-widget-woocommerce-breadcrumb{margin-bottom:6px!important}
  html body .klx-pagehead h1,
  html body .klx-pagehead .elementor-heading-title{font-size:27px!important;line-height:1.14!important}
}

/* 5. la couche cosmique est le PREMIER conteneur de ces pages, mais elle ne
   doit pas etre traitee comme la premiere section : la regle qui pose le ciel
   sur le premier conteneur est exclue de .klx-cosmos (voir plus haut,
   :first-child:not(.klx-cosmos)). Sans cette exclusion elle ecrasait les deux
   cometes portees par ses pseudos, et le bandeau de titre perdait son ciel
   fixe au profit d un ciel local haut de 0.
   Corollaire : .klx-sky reste le seul porteur du ciel sur ces pages. */

/* ===== 26 aout : retouches demandees par William ========================== */

/* 1. bandeau de titre centre. Le liseret et la teinte violette ont ete retires
   des gabarits 307 et 312 eux-memes, pas neutralises ici : une regle morte dans
   le kit est exactement ce qu'on essaie d'eviter. */
.klx-pagehead > .e-con,.klx-pagehead .e-con-inner{align-items:center!important}
.klx-pagehead,.klx-pagehead .elementor-widget{text-align:center}
.klx-pagehead .elementor-widget{width:100%}
.klx-pagehead .woocommerce-breadcrumb{text-align:center!important}

/* 2. pied de page des pages boutique : plus de lueur du tout. Il n'est plus
   qu'une zone de texte posee sur le ciel fixe de la page. */
body.single-product footer[data-elementor-type="footer"] > .e-con.e-parent,
body.tax-product_cat footer[data-elementor-type="footer"] > .e-con.e-parent,
body.post-type-archive-product footer[data-elementor-type="footer"] > .e-con.e-parent{
  border-top:0!important;background-color:transparent!important;background-image:none!important}

/* 3. telephone : le prix de la barre d'achat ouvre le choix du format.
   Les tuiles y sont DEPLACEES par le snippet 518 — elles disparaissent donc
   du corps de la page sans qu'on ait a les masquer. */
@media(max-width:767px){
  /* la pastille n'est un bouton que s'il y a un choix a faire : sur un produit
     simple elle n'affiche qu'un prix, sans cadre ni chevron. */
  .klx-buybar__p{display:inline-flex;align-items:center;gap:7px;border-radius:12px;
    font-weight:700}
  .klx-buybar__p.is-choix{cursor:pointer;padding:6px 11px;
    background-color:rgba(126,98,224,.16);border:1px solid rgba(167,139,250,.30)}
  .klx-buybar__p.is-choix::after{content:"";width:7px;height:7px;flex:0 0 auto;margin-top:-3px;
    border-right:2px solid #C9BEF7;border-bottom:2px solid #C9BEF7;transform:rotate(45deg)}
  .klx-sheet{position:fixed;left:0;right:0;bottom:0;z-index:100000;
    background:#140C2E;border-radius:20px 20px 0 0;
    border-top:1px solid rgba(167,139,250,.22);
    box-shadow:0 -18px 50px rgba(0,0,0,.55);
    /* la feuille laisse la place a la barre d'achat (62 px) : sans ca, sa
       derniere rangee de tuiles passe dessous. */
    padding:14px 14px calc(78px + env(safe-area-inset-bottom));
    max-height:76vh;overflow:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(106%);visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s}
  body.klx-sheet-on .klx-sheet{transform:none;visibility:visible}
  .klx-sheet__bd{position:fixed;inset:0;z-index:99999;background:rgba(7,4,15,.64);
    opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  body.klx-sheet-on .klx-sheet__bd{opacity:1;visibility:visible}
  .klx-sheet__h{display:flex;align-items:center;justify-content:space-between;
    font-size:15px;font-weight:600;margin:2px 2px 12px;color:#F4F1FF}
  .klx-sheet__x{background:none;border:0;color:#C9BEF7;font-size:26px;line-height:1;
    padding:0 6px;cursor:pointer}
  .klx-sheet .klx-grams{margin:0!important}
  body.klx-sheet-on .klx-buybar{z-index:100001}
}

/* 4. panier : un seul trait par ligne.
   🔴 Les trois cellules portaient chacune leur border-top. Les lignes tombent
   sur des positions fractionnaires (331,8 / 475 / 618,3 px…) et le navigateur
   arrondit CHAQUE cellule separement a la grille de pixels : d'ou un trait qui
   se decale d'un pixel au milieu, sur certaines lignes seulement. Un seul
   element porteur, et le probleme disparait. */
.wc-block-cart-items__row > td,
.wc-block-cart-items thead th{border-top:0!important}
.wc-block-cart-items__row,
.wc-block-cart-items thead tr{
  background-image:linear-gradient(rgba(244,241,255,.15),rgba(244,241,255,.15));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0}

/* 5. panier : changer le format d'une ligne (snippet 952) */
.klx-cartvar{display:flex;align-items:center;gap:9px;margin:7px 0 3px;flex-wrap:wrap}
.klx-cartvar__l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(244,241,255,.5)}
.klx-cartvar__s{appearance:none;-webkit-appearance:none;
  background-color:rgba(126,98,224,.14);
  background-image:linear-gradient(45deg,transparent 50%,#C9BEF7 50%),
                   linear-gradient(135deg,#C9BEF7 50%,transparent 50%);
  background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  border:1px solid rgba(167,139,250,.28);color:#F4F1FF;border-radius:10px;
  padding:6px 32px 6px 11px;font-size:13px;line-height:1.2;cursor:pointer;max-width:100%}
.klx-cartvar__s option{background:#140C2E;color:#F4F1FF}
.klx-cartvar.is-busy{opacity:.5;pointer-events:none}
.klx-cartvar.is-ko .klx-cartvar__s{border-color:#FF4D9D}
.klx-cartvar-on .wc-block-components-product-metadata{display:none!important}

/* 6. accueil en telephone : les quatre cartes de categorie etaient illisibles
   (146 px de large dont 52 px de padding). On coupe la description, on centre. */
@media(max-width:767px){
  body.home .klx-card{padding:16px 12px!important;text-align:center!important;
    align-items:center!important}
  body.home .klx-card .elementor-icon-box-description{display:none!important}
  body.home .klx-card .elementor-icon-box-wrapper{text-align:center!important}
  body.home .klx-card .elementor-icon-box-icon{margin:0 auto 10px!important}
  body.home .klx-card .elementor-icon-box-title{font-size:15px!important;
    line-height:1.25!important;margin:0!important}
  body.home .klx-card .elementor-widget-heading{width:100%!important}
  body.home .klx-card .elementor-widget-heading .elementor-heading-title{
    text-align:center!important;font-size:13px!important}

  /* les deux boutons du hero, cote a cote plutot qu'empiles */
  body.home .klx-sky .e-con:has(> .elementor-widget-button){
    flex-wrap:nowrap!important;gap:10px!important;align-items:stretch!important}
  body.home .klx-sky .elementor-widget-button{flex:1 1 0!important;min-width:0!important;
    width:auto!important;max-width:none!important}
  body.home .klx-sky .elementor-widget-button .elementor-button{
    width:100%!important;padding:11px 10px!important;font-size:12.5px!important;
    line-height:1.25!important;white-space:normal!important;
    text-align:center!important;justify-content:center!important}
}

/* 7. les quatre cartes de categorie tenaient sur deux colonnes a UN pixel pres
   (47 % de 311 px, deux fois, plus 20 px de gouttiere : 312,3 px pour 311 px
   disponibles). Il suffisait d'un ecran un peu plus etroit, ou d'une barre de
   defilement, pour qu'elles se mettent en colonne. On cale la largeur sur la
   gouttiere au lieu de la deviner. */
@media(max-width:767px){
  body.home .e-con:has(> .klx-card){gap:16px!important;justify-content:center!important}
  body.home .klx-card{width:calc(50% - 8px)!important;flex:0 0 auto!important;max-width:none!important}
}

/* 8. le prix des produits simples.
   🔴 Le gabarit 307 n'avait aucun widget Prix : les fiches variables affichent
   leurs prix dans les tuiles, mais une fiche simple (un briquet, un grinder)
   n'affichait AUCUN prix, ni en bureau ni en telephone. Widget ajoute apres la
   note en etoiles, et masque sur les produits variables ou il ne montrerait
   qu'une fourchette redondante. La classe product-type-* est posee par le
   serveur : pas de clignotement. */
.elementor-location-single.product-type-variable .klx-prix-simple{display:none!important}
.klx-prix-simple .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0!important;font-size:26px!important;font-weight:700!important;
  line-height:1.1!important;color:#F4F1FF!important}
.klx-prix-simple .price del{font-size:17px!important;font-weight:500!important;opacity:.5}
.klx-prix-simple .price ins{text-decoration:none!important;background:none!important}
@media(max-width:767px){
  .klx-prix-simple .price{font-size:23px!important}
}

/* ===== 26 aout : fiche produit en telephone, facon fiche marchande ========
   Demande de William apres avoir compare avec Back Market : « la photo est
   trop grande, le bloc titre + etoiles + prix est plus compact et mieux
   travaille ». Aucun contenu ne change — seuls la taille, l'ordre et un
   resume de prix (fabrique a partir de la tuile selectionnee) bougent.
   Le bureau n'est pas touche : tout est dans cette media query. */
@media(max-width:767px){

  /* 1. la galerie devient un carrousel a defilement natif. L'accroche de la
     photo suivante (86 % de large) dit qu'il y en a d'autres, sans fleche. */
  html body .woocommerce-product-gallery{margin:0 0 14px!important;opacity:1!important}
  html body .woocommerce-product-gallery__wrapper{
    display:flex!important;gap:10px;margin:0!important;padding:0!important;
    /* 🔴 sans !important, un overflow:hidden plus specifique gagne et le
       carrousel n'est plus defilable au doigt — on peut encore bouger
       scrollLeft en JS, ce qui donne l'illusion que tout marche. */
    overflow-x:auto!important;overflow-y:hidden!important;
    touch-action:pan-x pinch-zoom;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  html body .woocommerce-product-gallery__wrapper::-webkit-scrollbar{display:none}
  html body .woocommerce-product-gallery__image{
    flex:0 0 86%;scroll-snap-align:center;margin:0!important;
    aspect-ratio:4/5;border-radius:18px;overflow:hidden;
    border:1px solid rgba(167,139,250,.16)}
  html body .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child{
    flex-basis:100%}
  html body .woocommerce-product-gallery__image a,
  html body .woocommerce-product-gallery__image img{
    display:block!important;width:100%!important;height:100%!important;
    max-width:none!important;object-fit:cover;object-position:center;
    border-radius:18px;margin:0!important}
  /* le carrousel deborde des deux paddings imbriques de la colonne (2 x 10 px) :
     sinon la photo ne fait que 249 px de large sur un ecran de 387, et le
     carrousel a l'air d'une vignette perdue au milieu de la page. */
  html body .elementor-widget-woocommerce-product-images{
    width:calc(100% + 40px)!important;max-width:none!important;
    margin-left:-20px!important;margin-right:-20px!important}
  .klx-gal-dots{display:flex;justify-content:center;gap:6px;margin:10px 0 0}
  .klx-gal-dots span{width:6px;height:6px;border-radius:50%;
    background:rgba(244,241,255,.24);transition:width .22s,background .22s}
  .klx-gal-dots span.is-on{width:18px;border-radius:3px;background:#A78BFA}

  /* 2. le bandeau ne porte plus que le fil d'Ariane : le titre est descendu
     sous la photo par le snippet 518. */
  html body .klx-pagehead{padding-top:10px!important;padding-bottom:8px!important}
  html body .klx-pagehead .elementor-widget-woocommerce-breadcrumb{margin-bottom:0!important}

  /* 3. l'ordre de lecture : photo, titre, note, prix, achat, puis le texte */
  .klx-resume-tel{display:flex;flex-direction:column}
  .klx-resume-tel > *{order:9}
  .klx-resume-tel > .klx-titre-tel{order:1;width:100%;margin:0 0 6px!important}
  .klx-resume-tel > .elementor-widget-woocommerce-product-rating{order:2}
  .klx-resume-tel > .klx-mprix{order:3}
  .klx-resume-tel > .elementor-widget-woocommerce-product-price{order:3}
  .klx-resume-tel > .elementor-element:has(form.cart){order:4}
  .klx-resume-tel > .elementor-widget-woocommerce-product-short-description{order:6;margin-top:6px!important}
  .klx-resume-tel .woocommerce-product-rating{justify-content:center;margin:0 0 10px!important}
  .klx-resume-tel > .elementor-widget-woocommerce-product-price{text-align:center}
  .klx-resume-tel > .elementor-widget-woocommerce-product-price .price{justify-content:center}

  /* 4. le resume de prix des produits a variations : ce que coute le format
     choisi, la ou une fiche marchande le met — juste sous la note. */
  .klx-mprix{display:flex;flex-direction:column;align-items:center;gap:9px;
    margin:0 0 14px}
  .klx-mprix.is-vide{display:none}
  .klx-mprix__l{display:flex;align-items:baseline;justify-content:center;
    flex-wrap:wrap;gap:9px}
  .klx-mprix__p{font-size:27px;font-weight:800;line-height:1;color:#F4F1FF}
  .klx-mprix__was{font-size:15px;color:rgba(244,241,255,.42);text-decoration:line-through}
  .klx-mprix__was:empty{display:none}
  .klx-mprix__off{font-size:12px;font-weight:700;color:#fff;
    background:var(--klx-promo,#FF4D9D);border-radius:99px;padding:3px 9px;line-height:1.2}
  .klx-mprix__off:empty{display:none}
  .klx-mprix__f{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    background:rgba(126,98,224,.16);border:1px solid rgba(167,139,250,.30);
    border-radius:12px;padding:7px 13px;color:#F4F1FF;font-size:13.5px;font-weight:600}
  .klx-mprix__f::before{content:"Format :";font-weight:500;color:rgba(244,241,255,.55)}
  .klx-mprix__f::after{content:"";width:7px;height:7px;flex:0 0 auto;margin-top:-3px;
    border-right:2px solid #C9BEF7;border-bottom:2px solid #C9BEF7;transform:rotate(45deg)}
}

/* --- suite du 26 aout : corrections apres essai sur telephone ------------- */

/* 1. plus aucune visionneuse sur les photos produit. Les liens sont neutralises
   par le snippet 518 ; ici on coupe aussi le pointeur, sinon un glissement sur
   la photo est capte par le lien au lieu de faire defiler le carrousel. */
html body .woocommerce-product-gallery__image a{pointer-events:none!important;cursor:default!important}
html body .woocommerce-product-gallery__image img{
  pointer-events:none!important;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
html body .woocommerce-product-gallery__trigger,
html body .pswp{display:none!important}

@media(max-width:767px){
  /* 2. en telephone, le prix et le choix du format vivent a un seul endroit :
     la barre d'achat, toujours a l'ecran. Rien de tout ca sur la page — un
     bloc qui apparait et disparait selon le defilement n'aide personne. */
  html body .klx-resume-tel > .elementor-widget-woocommerce-product-price{display:none!important}

  /* 3. le bloc « Vous aimerez peut-etre » devient un carrousel : empile, il
     faisait trois ecrans de haut et cassait la fin de fiche. Deux titres
     suffisent, le troisieme (celui du widget) est de trop. */
  html body .related.products > h2{display:none!important}
  html body .related.products ul.products{
    display:flex!important;grid-template-columns:none!important;
    gap:12px!important;margin:0!important;padding:0 0 2px!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  html body .related.products ul.products::-webkit-scrollbar{display:none}
  html body .related.products ul.products li.product{
    flex:0 0 62%!important;width:auto!important;max-width:none!important;
    scroll-snap-align:start;margin:0!important}
  /* il deborde des paddings de section, comme la galerie */
  html body .elementor-widget-woocommerce-product-related{
    width:calc(100% + 40px)!important;max-width:none!important;
    margin-left:-20px!important;margin-right:-20px!important}
  html body .elementor-widget-woocommerce-product-related ul.products{padding-left:20px!important;padding-right:20px!important}
}

/* le trait au-dessus de « Dans la meme famille » allait d'un bord a l'autre de
   l'ecran. Il reprend la largeur du contenu, comme les autres separateurs. */
.klx-sep-haut{position:relative}
.klx-sep-haut::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:min(1240px,calc(100% - 56px));height:1px;
  background:rgba(167,139,250,.18);pointer-events:none}

/* meme correctif d'overflow pour le carrousel des produits similaires */
@media(max-width:767px){
  html body .related.products ul.products{overflow-x:auto!important;overflow-y:hidden!important;
    touch-action:pan-x pinch-zoom}
}

/* ═══ Fiche produit en telephone — reprise du 26 aout au soir ═══ */
@media(max-width:767px){
  /* Un seul cadre : celui de la photo. Le conteneur qui defile n'en a plus,
     sinon des qu'un produit a deux photos on voit une grande boite vide
     autour du carrousel, en plus du cadre de chaque photo. */
  html body .woocommerce-product-gallery__wrapper{
    border:0!important;border-radius:0!important;background:none!important;
    box-shadow:none!important;padding:0!important;
    /* 🔴 « touch-action:pan-x » interdit au doigt de faire defiler la PAGE
       depuis la photo : le geste vertical est avale par le carrousel et le
       telephone parait bloque. On rend les deux axes. */
    touch-action:auto!important}
  /* le meme cadre pour tout le monde, une photo comme dix */
  html body .woocommerce-product-gallery__image{
    border:1px solid rgba(167,139,250,.16)!important;border-radius:18px!important;
    background:rgba(27,18,64,.45);overflow:hidden}
  html body .related.products ul.products{touch-action:auto!important}

  /* « Votre selection » : centre sous le titre, et c'est un bouton */
  html body .klx-resume-tel .woocommerce-variation{text-align:center}
  html body .klx-resume-tel .woocommerce-variation-price{margin:0 0 14px}
  html body.single-product .woocommerce-variation-price .price{
    display:inline-block;position:relative;padding:0 26px;cursor:pointer}
  html body.single-product .woocommerce-variation-price .price::after{
    content:"";position:absolute;right:4px;bottom:11px;width:9px;height:9px;
    border-right:2px solid #C9BEF7;border-bottom:2px solid #C9BEF7;
    transform:rotate(45deg)}
  /* la description passe AVANT « Completez votre commande » */
  html body .klx-resume-tel > .klx-xs{order:7;width:100%;margin:10px 0 30px}
}
/* La feuille de choix reste SOUS la barre d'achat, a l'ouverture comme a la
   fermeture. Avant : feuille tres haute et barre remontee pendant l'ouverture
   — des que la classe partait, la barre retombait et la feuille lui passait
   devant pendant son animation de sortie. On range par z-index fixes. */
html body .klx-sheet{z-index:996}
html body .klx-sheet__bd{z-index:995}
html body.klx-sheet-on .klx-buybar{z-index:998}
/* Vignettes produit : coins arrondis partout, y compris l'image par defaut
   des produits sans photo, qui restait carree. */
html body ul.products li.product img{border-radius:16px!important}

/* Le recapitulatif de commande se colle en haut quand il est plus court que
   l'ecran (classe is-sticky posee par WooCommerce). Son decalage par defaut est
   de 24 px : il se rangeait donc DERRIERE l'en-tete fixe, qui fait 136 px.
   On cale le decalage sur la hauteur reelle de l'en-tete, admin bar comprise. */
@media(min-width:701px){
  html body .wc-block-components-sidebar{top:138px!important}
  html body.admin-bar .wc-block-components-sidebar{top:170px!important}
}
@media(min-width:1000px){
  html body .wc-block-components-sidebar{top:152px!important}
  html body.admin-bar .wc-block-components-sidebar{top:184px!important}
}


/* ==========================================================================
   ICONE COMPTE DANS L EN-TETE (4 septembre 2026)
   Widget Nav Menu « klxacct1 » pose AVANT le panier, sur le menu « Menu compte »
   (parent « Mon compte » + 4 entrees). Les reglages de deroulant du widget ont
   ete COPIES depuis le menu principal a sa creation : l habillage du panneau est
   identique par construction, il n y a aucune couleur a redefinir ici.

   ⚠ Elementor rend DEUX <nav> par menu : .elementor-nav-menu--main et
   .elementor-nav-menu--dropdown (la version repliee). Le reglage « dropdown:none »
   ne masque pas la seconde de facon fiable, on la coupe ici.
   ⚠ .elementor-nav-menu--dropdown sert AUSSI de classe aux <ul class="sub-menu"> :
   toujours prefixer par « nav » pour ne viser que le conteneur, jamais le panneau.
   ⚠ Les icones sont posees en BACKGROUND-IMAGE sur le lien, pas en mask sur un
   ::before. Elementor occupe deja le ::before de .elementor-item pour son effet
   de soulignement : un masque pose dessus calcule des valeurs correctes
   (23x23, static, mask-size:contain) mais ne se peint jamais. Teste et abandonne.
   ========================================================================== */
.klx-compte nav.elementor-nav-menu--dropdown{display:none!important}
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a{
  width:36px!important;height:39px!important;padding:0!important;
  box-sizing:border-box!important;
  border:1px solid rgba(167,139,250,.18)!important;
  background-color:rgba(126,98,224,.1)!important;
  background-repeat:no-repeat!important;background-position:center!important;
  background-size:23px 23px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A2C9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")!important;
  font-size:0!important;line-height:0!important}
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li:hover > a,
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")!important}
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a .sub-arrow{display:none!important}
/* le panneau se cale sur le bord droit, sinon il sort de la fenetre */
.klx-compte .elementor-nav-menu--main ul.sub-menu{
  right:0!important;left:auto!important;min-width:238px}
/* une petite icone devant chaque entree du panneau */
/* ⚠ On decale le TEXTE avec text-indent, pas avec padding-left : le padding
   horizontal du panneau vient d un reglage du widget, sa regle generee par
   Elementor est plus specifique et gagne meme contre un !important. text-indent
   n est pas pilote par le widget, il passe — et l icone reste calee sur le bord. */
.klx-compte ul.sub-menu li > a.elementor-sub-item{
  background-repeat:no-repeat!important;background-position:left 20px center!important;
  background-size:17px 17px!important;text-indent:26px!important}
.klx-compte ul.sub-menu li.klx-ic-compte > a.elementor-sub-item{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")!important}
.klx-compte ul.sub-menu li.klx-ic-commandes > a.elementor-sub-item{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")!important}
.klx-compte ul.sub-menu li.klx-ic-fidelite > a.elementor-sub-item{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6 .9-4.3 4.2 1 6-5.3-2.9-5.3 2.9 1-6L3.4 9.5l6-.9z'/%3E%3C/svg%3E")!important}
.klx-compte ul.sub-menu li.klx-ic-sortie > a.elementor-sub-item{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1FF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E")!important}


/* ===================================================================
   cadre icone compte + panneau centre sous l'icone  (4 sept. 2026)
   Le cadre reprend exactement celui du bouton panier :
   bordure rgba(167,139,250,.18), fond rgba(126,98,224,.1), hauteur 39px.
   Sur mobile l'icone reste large de 36px : elle ne doit pas elargir la
   zone panier de l'entete, sinon l'entete deborde a 390px.
   Le panneau etait cale a droite (right:0) : sur grand ecran il pendait
   entierement a gauche d'une icone de 44px et semblait detache. On le
   centre donc sous l'icone au-dela de 768px, et on recentre la fleche.
   =================================================================== */
@media(min-width:768px){
  .klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a{width:44px!important}
  .klx-compte .elementor-nav-menu--main ul.sub-menu{
    left:50%!important;right:auto!important;transform:translateX(-50%)!important}
  .klx-compte .elementor-nav-menu--main ul.sub-menu::before{
    left:50%!important;right:auto!important;margin-left:-5.5px!important}
}
@media(max-width:767px){
  .klx-compte .elementor-nav-menu--main ul.sub-menu::before{
    left:auto!important;right:13px!important}
  /* hauteur alignee sur le bouton panier mobile */
  .klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a{height:35px!important}
}
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li:hover > a,
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li.elementor-active > a,
.klx-compte .elementor-nav-menu--main > ul.elementor-nav-menu > li > a:focus{
  border-color:rgba(167,139,250,.42)!important;
  background-color:rgba(126,98,224,.2)!important}


/* ===================================================================
   en-tete mobile : logo colle a gauche, puis a droite panier > compte > menu
   (4 sept. 2026, ordre demande par William)
   Le bloc logo est le SEUL elastique : il grandit pour pousser le groupe
   de droite contre le bord, et il retrecit quand le bouton panier
   s'elargit. Le panier est place en premier dans le groupe de droite,
   donc il grandit vers la gauche, la ou il y a de la place.
   L'ordre desktop (compte, panier, Commander) n'est pas touche : c'est
   uniquement l'ordre flex qui est inverse sous 767 px.
   =================================================================== */
@media(max-width:767px){
  .elementor-element-9dbceebc{flex-grow:1!important;flex-shrink:1!important;min-width:0!important}
  .elementor-element-9dbceebc .elementor-widget-image{min-width:0!important;flex-shrink:1!important}
  /* Elementor ecrit width:126px ET max-width:126px sur le logo : sans ceci
     l'image ne suit pas son conteneur quand il retrecit et elle deborde */
  .elementor-element-9dbceebc img{max-width:100%!important;height:auto!important}

  .elementor-element-7be05649,
  .elementor-element-fa8ec7df{flex-grow:0!important;flex-shrink:0!important}
  .elementor-element-7be05649{padding-left:0!important;padding-right:0!important}
  .elementor-element-7be05649 .elementor-element-698b3eae{order:1!important}
  .elementor-element-7be05649 .klx-compte{order:2!important;flex-shrink:0!important}
  .elementor-menu-cart__toggle .elementor-button{white-space:nowrap!important}

  /* la fleche reste calee sur l'icone : elle est deja posee a right:13px
     plus haut dans ce fichier, et le <li> fait exactement 36 px ici */
}
/* sous 360 px le montant s'efface : il reste l'icone panier et sa pastille */
@media(max-width:359px){
  .elementor-menu-cart__toggle .elementor-button .elementor-button-text{display:none!important}
}

/* ═══ Mon compte en telephone : le menu devient un rail defilant ═══
   Empile, il prenait 217 px de haut avant le moindre contenu. En rail, il
   tient sur une ligne. Les voiles de bord sont peints par le fond du rail :
   les couches « local » suivent le defilement et masquent l'ombre en bout de
   course, celles en « scroll » restent collees aux bords. Aucun script. */
@media(max-width:767px){
  html body .woocommerce-MyAccount-navigation ul{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    /* 🔴 jamais « pan-x » seul : le doigt ne pourrait plus faire defiler la page */
    touch-action:auto!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    scroll-snap-type:x proximity;
    background:
      linear-gradient(90deg,#0E0821 45%,rgba(14,8,33,0)) left center/28px 100% no-repeat local,
      linear-gradient(270deg,#0E0821 45%,rgba(14,8,33,0)) right center/28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(167,139,250,.45),rgba(167,139,250,0)) left center/16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(167,139,250,.45),rgba(167,139,250,0)) right center/16px 100% no-repeat scroll}
  html body .woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
  html body .woocommerce-MyAccount-navigation li{flex:0 0 auto;scroll-snap-align:start}
  html body .woocommerce-MyAccount-navigation li a{white-space:nowrap}
  html body .woocommerce-MyAccount-navigation{margin-bottom:18px}
}


/* -- 5 bis. Mon compte : echelle des boutons et version telephone ---------- */
/* 4 septembre 2026. Les actions du compte sont secondaires : elles n'ont pas
   besoin de la taille du bouton « Ajouter au panier ». */
body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  padding:9px 14px;font-size:13.5px}
body.woocommerce-account .woocommerce-MyAccount-content a.button,
body.woocommerce-account .woocommerce-MyAccount-content button.button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button{
  padding:9px 18px!important;font-size:13.5px!important;line-height:1.3!important;
  border-radius:10px!important;letter-spacing:0}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button{
  padding:7px 15px!important;font-size:12.5px!important;border-radius:9px!important}

/* Un select prend la largeur de son contenu : « France » seul faisait une
   pastille de 84 px au milieu de champs pleine largeur. */
body.woocommerce-account .woocommerce-MyAccount-content .form-row select,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper select{
  width:100%;max-width:100%}

/* « Recommander » reste secondaire, « Voir » est l'action principale.
   background-image:none est obligatoire : le kit peint un degrade en !important. */
html body a.button.hdkn-recommander{
  background-image:none!important;background-color:rgba(167,139,250,.12)!important;
  border:1px solid rgba(167,139,250,.5)!important;color:#E9E3FF!important;
  box-shadow:none!important}
html body a.button.hdkn-recommander:hover{
  background-image:none!important;background-color:rgba(167,139,250,.26)!important;
  border-color:rgba(167,139,250,.75)!important}

@media(max-width:767px){
  body.woocommerce-account .woocommerce-MyAccount-navigation li a{
    padding:8px 13px;font-size:12.5px}
  body.woocommerce-account .woocommerce-MyAccount-content a.button,
  body.woocommerce-account .woocommerce-MyAccount-content button.button,
  body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
  body.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button{
    padding:9px 16px!important;font-size:13px!important}
  /* Deux actions cote a cote plutot qu'un empilement pleine largeur.
     Le ::before porte le libelle « Actions: » : il prend sa propre ligne. */
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions{
    display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions::before{
    flex:1 0 100%;float:none!important;margin:0 0 2px;text-align:left}
  body.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button{
    flex:1 1 0;min-width:118px;margin:0!important;text-align:center}
  /* Notification « confirmer l'adresse » : le bouton est avant le texte dans
     le HTML, column-reverse le remet dessous sans toucher au balisage. */
  body.woocommerce-account .woocommerce-info,
  body.woocommerce-account .woocommerce-message{
    display:flex!important;flex-direction:column-reverse;align-items:stretch;gap:12px}
  body.woocommerce-account .woocommerce-info .button,
  body.woocommerce-account .woocommerce-message .button{
    float:none!important;margin:0!important;align-self:flex-start}
}


/* ===== 7 sept 2026 — galerie produit : photos carrées sur fond cosmique ===== */
/* Bureau : le cadre vit sur .flex-viewport (l'element qui rogne), plus sur le ul du slider,
   sinon seuls les coins gauches de la 1re diapo sont arrondis. */
@media(min-width:768px){
  html body.single-product .woocommerce-product-gallery .flex-viewport{border-radius:18px;overflow:hidden;background:rgba(27,18,64,.45);border:1px solid rgba(167,139,250,.18)}
  html body.single-product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__wrapper{border-radius:0;border:0;background:none}
}
/* Telephone : diapos carrees (les composites sont en 1600x1600), plus de rognage lateral.
   Titre : masque tant qu'il est dans le bandeau .klx-sky, le snippet 518 le deplace ensuite -> plus de flash. */
@media(max-width:767px){
  html body .woocommerce-product-gallery__image{aspect-ratio:1/1}
  html body.single-product .klx-sky .elementor-widget-theme-page-title{display:none}
}


/* ===== 7 sept 2026 — astronaute : depart aleatoire (variables posees sur :root par le snippet 931) ===== */
html body .klx-home-astro, html body .klx-foot-astro{animation-delay:var(--klx-astro-dx,0s)!important;animation-direction:var(--klx-astro-dir,normal)!important}
html body .klx-home-astro img, html body .klx-foot-astro img{animation-delay:var(--klx-astro-dy,0s),var(--klx-astro-ds,0s)!important}


/* ===== 7 sept 2026 — accueil telephone : le widget Trustindex (8e33174) pousse la page a 587 px
   tant qu'il n'est pas initialise (infobulles .ti-verified-tooltip en absolu). On rogne le widget
   et le document en horizontal sous 767 px. ===== */
@media(max-width:767px){
  html{overflow-x:clip}
  .elementor-element-8e33174{overflow-x:clip}
}
/* ===== 7 sept 2026 — fiche produit telephone : zoom au doigt maintenu (snippet "Zoom galerie au doigt").
   Pas de visionneuse : l'image est agrandie dans sa carte, rognee par le rayon de 18 px. ===== */
@media(max-width:767px){
  html body .woocommerce-product-gallery__image{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
  html body .woocommerce-product-gallery__image img{transition:transform .18s ease-out;will-change:transform}
  html body .woocommerce-product-gallery__image.klx-zoom-on{z-index:3;border-color:rgba(167,139,250,.5)}
  html body .woocommerce-product-gallery__image.klx-zoom-on img{transition:transform .12s ease-out}
}

/* 7 sept 2026 — grilles produits : cadre violet léger sur les vignettes avec photo (klx-grid-frame). Le visuel d'attente garde son cadre clair WooCommerce. */
html body ul.products li.product img:not(.woocommerce-placeholder){border:1px solid rgba(167,139,250,.55);box-sizing:border-box}
html body ul.products li.product a:hover img:not(.woocommerce-placeholder){border-color:rgba(167,139,250,.95)}

/* 8 sept 2026 — hologramme : plus aucun cadre autour des visuels produit, grilles et galerie (klx-no-frame). Annule le cadre violet du 7 sept, le cadre clair WooCommerce du visuel d'attente et le cadre de la galerie. */
html body ul.products li.product img,html body ul.products li.product .woocommerce-placeholder,html body ul.products li.product a:hover img{border:0!important}
html body .woocommerce-product-gallery__image,html body .woocommerce-product-gallery__image.klx-zoom-on,html body .woocommerce-product-gallery__wrapper,html body.single-product .woocommerce-product-gallery .flex-viewport{border:0!important;background:transparent!important}

/* 8 sept 2026 — /mon-compte/ : le menu du compte (sticky) passait sous l'en-tête collant (136 px) ; décalage = en-tête + 24 px, plus la barre d'admin quand elle existe (klx-account-sticky) */
@media(min-width:1025px){html body .woocommerce-MyAccount-navigation{top:calc(160px + var(--wp-admin--admin-bar--height,0px))!important}}

/* Fiche produit : la photo suit le defilement (bureau uniquement).
   Le calage vertical reprend l'en-tete collant (136px) + une respiration, et la barre
   d'admin quand elle existe. La galerie est bridee par la HAUTEUR de la fenetre : les
   photos sont carrees, donc limiter la largeur limite la hauteur, et l'image tient
   toujours entierement sous l'en-tete, meme sur un portable a ecran court.
   Sous 1025px (tablette et telephone) : rien ne change. */
@media(min-width:1025px) and (min-height:600px){
 html body.single-product .e-con:has(> .elementor-widget-woocommerce-product-images){
  position:sticky!important;
  top:calc(160px + var(--wp-admin--admin-bar--height,0px));
  align-self:flex-start!important;
 }
 html body.single-product .woocommerce-product-gallery{
  max-width:calc(100vh - 190px - var(--wp-admin--admin-bar--height,0px));
  margin-left:auto!important;margin-right:auto!important;
 }
}


/* ---- 16 sept 2026 - puces des tuiles : une seule par tuile (klx-badge-collision) ----
   Le script pose la puce « Meilleur prix » (span.klx-gram__badge) sur le meilleur prix au gramme
   parmi les formats en stock, sans classe is-best : quand les gros formats sont épuisés elle tombe
   sur le 10 g, qui porte déjà « Populaire » en ::before. Priorité : remise > Meilleur prix > Populaire.
   Une tuile épuisée ne porte aucune puce. */
html body .klx-grams .klx-gram[data-value="10-g"]:has(.klx-gram__badge)::before{content:none!important}
html body .klx-grams .klx-gram:has(.klx-gram__out)::before{content:none!important}
html body .klx-grams .klx-gram:has(.klx-gram__out) .klx-gram__badge{display:none!important}
html body .klx-grams .klx-gram.is-promo[data-value="10-g"]::before{content:none!important}

/* == klx-suivi-colis : bloc de suivi de colis (Advanced Shipment Tracking, zorem) sur Mon compte et Commande reçue == */
html body .woocommerce h2:has(+ .fluid_section){font-size:0!important;line-height:0!important}
html body .woocommerce h2:has(+ .fluid_section)::before{content:"Suivi de votre colis";font-size:1.25rem;line-height:1.4;font-weight:600;color:#F4F1FF}
html body .fluid_section .fluid_container{background:rgba(126,98,224,.07)!important;border:1px solid rgba(167,139,250,.18)!important;border-radius:14px!important;box-shadow:none!important;color:#F4F1FF!important}
html body .fluid_container .provider_name,html body .fluid_container .provider_name div,html body .fluid_container strong.tracking_provider,html body .fluid_container .order_status,html body .fluid_container .order_status strong{color:#F4F1FF!important}
html body .fluid_container .order_status{color:#A9A2C9!important}
html body .fluid_container a.tracking_number{color:#C4B5FD!important;text-decoration:none}
html body .fluid_container .fluid_provider_img{background:#fff;border-radius:10px;overflow:hidden}

/* == klx-livraison-toggle : bascule Expédier / Retrait du bloc Commander (option choisie illisible : fond blanc, texte clair) == */
html body .wc-block-checkout__shipping-method-container{border-radius:14px;padding:4px}
html body .wc-block-checkout__shipping-method-option{border-radius:11px;color:#F4F1FF}
html body .wc-block-checkout__shipping-method-option--selected{background:#7E62E0!important;color:#fff!important;box-shadow:none!important}
html body .wc-block-checkout__shipping-method-option--selected *{color:#fff!important}
html body .wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):hover{background:rgba(126,98,224,.18)!important}

/* === Commander : puces de quantite lisibles + un seul resume en telephone (18 septembre 2026) ===
   La puce heritait d'un fond lilas clair ET d'un texte clair : chiffre invisible.
   En telephone WooCommerce rend deux resumes : le bandeau repliable du haut et le resume complet
   au-dessus du bouton. On garde celui du bas. Le :has() garantit qu'on ne masque le haut que si
   celui du bas existe vraiment. */
html body .wc-block-components-order-summary-item__quantity{background:#7E62E0!important;color:#fff!important;border:2px solid #0E0821!important;box-shadow:none!important;font-weight:700!important}
html body .wc-block-components-order-summary-item__quantity span{color:#fff!important}
html body .wc-block-checkout:has(.checkout-order-summary-block-fill-wrapper) .wc-block-checkout__sidebar{display:none!important}

/* === La fusee du decor (18 septembre 2026, v2) ===
   Sur les pages qui ont la couche .klx-cosmos (accueil, fiches, categories, boutique).
   Meme traitement que l'astronaute : halo lavande (drop-shadow), et dans le hero le voile
   (backdrop-filter) la floute comme lui. La flamme est dans l'image, dans le reacteur.
   Plus petite et plus lente que lui (138vw en 99 s, 1,4 vw/s contre 1,7), toutes les 260 s.
   Depart aleatoire : le retard reprend --klx-astro-dx (0 a -78 s, tire au sort par le
   snippet 931) multiplie par 3,3, soit 0 a -257 s : elle est n'importe ou sur son cycle a
   l'arrivee sur la page, et va tout droit. Sans le snippet : premiere traversee a 40 s.
   z-index -2 et pas -3 : a -3 elle passe sous les lueurs opaques de body::before. */
html:has(.klx-cosmos)::after{content:"";position:fixed;left:0;top:0;z-index:-3;width:clamp(46px,4.4vw,88px);aspect-ratio:360/143;background:url(/wp-content/uploads/2026/09/klx-fusee-v2.webp) center/contain no-repeat;opacity:.92;pointer-events:none;filter:drop-shadow(0 0 18px rgba(167,139,250,.35)) drop-shadow(0 0 6px rgba(253,186,116,.25));translate:-22vw 70vh;rotate:-14deg;animation:klx-fusee 260s linear calc(var(--klx-astro-dx,-12s) * 3.3) infinite;will-change:translate}
@keyframes klx-fusee{0%{translate:-22vw 70vh}38%{translate:116vw calc(70vh - 34vw)}100%{translate:116vw calc(70vh - 34vw)}}
@media(prefers-reduced-motion:reduce){html:has(.klx-cosmos)::after{display:none}}

/* ==== Bandeau d'annonce v2 (29 septembre 2026) : trois messages, typo grasse, icônes. Remplace l'ancien texte courant. ==== */
#klx-annonce .klx-marquee{--klx-marquee-speed:55s}
#klx-annonce .klx-marquee > p{display:flex; align-items:center; font-family:"Poppins",sans-serif; font-weight:800; font-size:12.5px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:#F4F1FF}
#klx-annonce .klx-a{display:inline-flex; align-items:center; gap:9px; padding:0 4px}
#klx-annonce .klx-a::before{content:""; flex:0 0 16px; width:16px; height:16px; background:#7DE2C3; -webkit-mask:var(--klx-ico) center/contain no-repeat; mask:var(--klx-ico) center/contain no-repeat}
#klx-annonce .klx-a--livraison{--klx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2%22/%3E%3Cpath d=%22M15 18H9%22/%3E%3Cpath d=%22M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22/%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E")}
#klx-annonce .klx-a--promo{--klx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z%22/%3E%3Ccircle cx=%227.5%22 cy=%227.5%22 r=%22.5%22 fill=%22%23000%22/%3E%3C/svg%3E")}
#klx-annonce .klx-a--relais{--klx-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22/%3E%3C/svg%3E")}
#klx-annonce .klx-a__code{display:inline-block; margin-left:2px; padding:4px 9px 3px; border-radius:999px; border:1px solid rgba(125,226,195,.7); background:rgba(125,226,195,.14); color:#7DE2C3; font-weight:800; letter-spacing:.16em; box-shadow:0 0 14px -4px rgba(125,226,195,.8)}
#klx-annonce .klx-a__bientot{display:inline-block; margin-left:2px; padding:4px 8px 3px; border-radius:999px; background:rgba(196,181,253,.16); color:#C4B5FD; font-style:normal; font-weight:700; font-size:10px; letter-spacing:.14em}
#klx-annonce .klx-a__sep{display:inline-block; flex:0 0 10px; width:10px; height:10px; margin:0 30px; background:#C4B5FD; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 0c.8 6.6 5.4 11.2 12 12-6.6.8-11.2 5.4-12 12-.8-6.6-5.4-11.2-12-12C6.6 11.2 11.2 6.6 12 0z%22/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 0c.8 6.6 5.4 11.2 12 12-6.6.8-11.2 5.4-12 12-.8-6.6-5.4-11.2-12-12C6.6 11.2 11.2 6.6 12 0z%22/%3E%3C/svg%3E") center/contain no-repeat; animation:klx-a-scintille 2.4s ease-in-out infinite}
@keyframes klx-a-scintille{0%,100%{opacity:.45; transform:scale(.75)}50%{opacity:1; transform:scale(1.15)}}
#klx-annonce{position:relative; overflow:hidden}
#klx-annonce::after{content:""; position:absolute; top:0; bottom:0; left:-30%; width:30%; pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0),rgba(196,181,253,.14),rgba(255,255,255,0)); animation:klx-a-reflet 7s ease-in-out infinite}
@keyframes klx-a-reflet{0%,40%{left:-30%}100%{left:130%}}
@media (max-width:767px){
  #klx-annonce .klx-marquee{--klx-marquee-speed:12s}
  #klx-annonce .klx-marquee > p{font-size:11.5px; letter-spacing:.11em}
  #klx-annonce .klx-a__sep{margin:0 22px}
}
@media (prefers-reduced-motion:reduce){
  #klx-annonce .klx-a__sep, #klx-annonce::after{animation:none}
}
/* ==== fin bandeau v2 ==== */

/* ==== Produit hors stock : « Actuellement indisponible » (29 septembre 2026, Dry Sift) ==== */
/* fiche produit : bandeau au-dessus des formats, bouton neutralisé, promesse de retrait masquée */
.single-product .product.outofstock .elementor-widget-woocommerce-product-add-to-cart::before{
  content:"Actuellement indisponible"; display:block; margin:0 0 14px; padding:12px 16px;
  border:1px solid rgba(252,165,165,.45); border-radius:12px; background:rgba(252,165,165,.08);
  color:#FCA5A5; font-family:"Poppins",sans-serif; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}
.single-product .product.outofstock .quantity{display:none!important}
html body .single-product .product.outofstock .single_add_to_cart_button,
.single-product .product.outofstock .single_add_to_cart_button{font-size:0!important; pointer-events:none; filter:grayscale(1); opacity:.55}
.single-product .product.outofstock .single_add_to_cart_button::after{content:"Indisponible"; font-size:14px; letter-spacing:.02em}
.single-product .product.outofstock .klx-pj{display:none!important}
/* grilles : le bouton dit la vérité, l'image s'efface un peu */
html body .woocommerce ul.products li.product.outofstock a.button, html body ul.products li.product.outofstock a.button{font-size:0!important; background-image:none!important; background-color:transparent!important; border:1px solid rgba(252,165,165,.45)!important; box-shadow:none!important}
html body .woocommerce ul.products li.product.outofstock a.button::after, html body ul.products li.product.outofstock a.button::after{content:"Actuellement indisponible"; font-size:13px; font-weight:700; color:#FCA5A5; letter-spacing:.02em}
li.product.outofstock img{filter:grayscale(.55); opacity:.75}
/* téléphone : la barre d'achat collante n'a rien à vendre sur un produit épuisé */
body:has(.product.outofstock form.variations_form) .klx-buybar,
body:has(.product.outofstock .elementor-widget-woocommerce-product-add-to-cart) .klx-buybar{display:none!important}
/* ==== fin produit hors stock ==== *//* End custom CSS */