/* corrections.css — Havil’Or
 * 23/09/2026. style.css depasse 800 Ko et le navigateur cesse de le lire
 * avant la fin : tout ce qu'on y ecrivait restait mort. Les corrections
 * vivent donc ici, dans un fichier court, charge APRES style.css.
 *
 * C'EST ICI QU'ON MODIFIE L'APPARENCE DU SITE. Nulle part ailleurs.
 * style.css reste l'heritage du theme, on n'y touche plus.
 */

/* ===== BLOCS MIGRES DEPUIS valthea-boutique.php =====
 * 23/09/2026 : 61 blocs qui s'injectaient dans wp_head et wp_footer
 * sont repris ici, dans l'ordre de leurs anciennes priorites.
 * Tout se modifie dans ce fichier, plus rien n'est injecte.
 */


/* --- valthea-boutique (ancienne priorite 102) --- */

.vt-bandeau-livraison{background:#6B5328;color:#fff;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;font-family:'Jost',sans-serif}
.vt-decouvrir{display:inline-block;margin:8px 8px 0 0;padding:9px 18px;border:1px solid #6B5328;color:#6B5328;font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-family:'Jost',sans-serif}
.vt-decouvrir:hover{background:#6B5328;color:#fff}
.vt-panier{position:fixed;inset:0;z-index:99999}
.vt-panier-fond{position:absolute;inset:0;background:rgba(107,83,40,.35)}
.vt-panier-corps{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;padding:28px 24px;overflow:auto;font-family:'Jost',sans-serif}
.vt-panier-corps h3{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#6B5328;margin:0 0 18px}
.vt-panier-fermer{position:absolute;top:14px;right:16px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#6B5328}
.vt-panier-contenu table{width:100%;font-size:13px}
.vt-panier-contenu .product-remove,.vt-panier-contenu .actions{display:none}
.vt-panier-cta{display:block;margin-top:22px;background:#6B5328;color:#fff;text-align:center;padding:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.vt-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:99998;background:#fff;padding:18px 20px;font-family:'Jost',sans-serif;font-size:12.5px;color:#22252B;max-width:720px;margin:0 auto;box-shadow:0 2px 18px rgba(107,83,40,.12)}
.vt-cookies p{margin:0 0 12px;line-height:1.6}
.vt-cookies-choix{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:12px}
.vt-cookies-actions{display:flex;gap:10px;flex-wrap:wrap}
.vt-cookies-actions button{border:1px solid #6B5328;background:#fff;color:#6B5328;padding:9px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;font-family:'Jost',sans-serif}
.vt-cookies-actions #vt-ck-accepter{background:#6B5328;color:#fff}
@media(max-width:700px){.vt-cookies{font-size:12px;padding:14px 16px}
}

/* --- valthea-bouton-slider (ancienne priorite 996) --- */

.rev-btn,a.rev-btn,.rs-layer.rev-btn{background:#EDE0CE!important;background-color:#EDE0CE!important;color:#6B5328!important;font-size:12px!important;letter-spacing:.18em!important;text-transform:uppercase!important;padding:14px 26px!important;border-radius:0!important;border:0!important;line-height:1!important;min-width:0!important}
@media(max-width:820px){.rev-btn,a.rev-btn,.rs-layer.rev-btn{font-size:10px!important;padding:11px 18px!important}
}

/* --- valthea-bouton-decouvrir (ancienne priorite 998) --- */

.vc_btn3,a.vc_btn3,.vc_btn3-container a,.vt-decouvrir{border:0!important;outline:0!important;box-shadow:none!important;text-decoration:none!important;border-bottom:0!important;border-radius:0!important}
.vc_btn3,a.vc_btn3,.vc_btn3-container a{font-size:10px!important;letter-spacing:.18em!important;padding:12px 20px!important;line-height:1!important}
@media(max-width:820px){.vc_btn3,a.vc_btn3{font-size:9px!important;padding:10px 16px!important}
}

/* --- valthea-prix-inline (ancienne priorite 999) --- */

body .woocommerce ul.products li.product .price,body .woocommerce ul.products li.product .price .woocommerce-Price-amount,body .woocommerce ul.products li.product .price bdi,body .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,body .woocommerce div.product .price,body .woocommerce div.product .price bdi,body .woocommerce div.product .price .woocommerce-Price-amount,body .woocommerce div.product .price .woocommerce-Price-currencySymbol,body .price bdi,body .price .woocommerce-Price-currencySymbol{display:inline!important;float:none!important;width:auto!important;white-space:nowrap!important}
body .price{display:block!important;white-space:nowrap!important}

/* --- valthea-images-contenues (ancienne priorite 1002) --- */

ul.products li.product{overflow:hidden!important}
ul.products li.product img{max-width:100%!important;height:auto!important}

/* --- valthea-produits-visibles (ancienne priorite 1004) --- */

li.product .product-inner,li.product .product-inner.animation,li.product .product-inner.animation.bottom,.products .product-inner{opacity:1!important;transform:none!important;visibility:visible!important}

/* --- valthea-btn-une-ligne (ancienne priorite 1005) --- */

.vc_btn3,a.vc_btn3,.vc_btn3-container a,.rev-btn,.vt-decouvrir,.button,.woocommerce a.button{white-space:nowrap!important;word-break:keep-all!important;hyphens:none!important;width:auto!important;max-width:none!important;display:inline-block!important;line-height:1!important}
.vc_btn3-container{width:auto!important}

/* --- valthea-cartes-finition (ancienne priorite 1006) --- */

.vt-decouvrir,li.product .vt-decouvrir,.vc_btn3,a.vc_btn3{width:max-content!important;align-self:center!important;flex:0 0 auto!important;display:inline-block!important}
li.product .price,li.product .price *{display:inline!important;visibility:visible!important;opacity:1!important;font-size:14px!important;color:#6B5328!important}
li.product .price{display:block!important;margin:6px 0 10px!important}
li.product .price bdi{letter-spacing:0!important}
li.product .woocommerce-Price-currencySymbol{margin-left:1px!important}
li.product .shot,li.product .woocommerce-loop-product__link,li.product .product-inner{width:100%!important}
li.product img{aspect-ratio:3/4!important;object-fit:contain!important;width:100%!important;height:auto!important}

/* --- valthea-bouton-propre (ancienne priorite 1007) --- */

.vc_btn3,a.vc_btn3,.vc_btn3-container a,.vt-decouvrir,.rev-btn{border:0!important;border-bottom:0!important;border-top:0!important;box-shadow:none!important;text-align:center!important;align-self:center!important;margin-left:auto!important;margin-right:auto!important;text-decoration:none!important}
.vc_btn3-container{text-align:center!important}

/* --- valthea-hamburger (ancienne priorite 1010) --- */

.hamburger-menu svg rect,.burger svg rect,[class*="burger"] svg rect,.menu-toggle svg rect{fill:#6B5328!important;stroke:none!important;stroke-width:0!important;shape-rendering:crispEdges}
.hamburger-menu svg line,.burger svg line{stroke:#6B5328!important;stroke-width:1!important}

/* --- valthea-prix-hauteur (ancienne priorite 1011) --- */

@media (min-width:651px){html body.home .hentry .item .product_after_title{height:26px;min-height:26px}
}

/* --- valthea-sections-v2 (ancienne priorite 1015) --- */

.vt-bloc{max-width:1180px;margin:0 auto;padding:0 24px;font-family:Jost,sans-serif;color:#22252B;text-align:center}
.vt-bloc.vt-large{max-width:1320px}
.vt-bloc .vt-sur{font-size:10px!important;letter-spacing:.26em;text-transform:uppercase!important;color:#9AA0A8;margin:0 0 12px!important}
.vt-bloc h2{font-size:clamp(21px,2.5vw,30px);letter-spacing:.14em;text-transform:uppercase;color:#6B5328;margin:0 0 12px!important;font-weight:400}
.vt-bloc .vt-intro{font-size:14px;line-height:1.75;color:#6B6F76;max-width:600px;margin:0 auto 34px!important}
.vt-grille-photo{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vt-carte-photo{position:relative;display:block;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;text-decoration:none}
.vt-carte-fond{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,26,40,.72) 0%,rgba(20,26,40,.18) 46%,rgba(20,26,40,0) 72%)}
.vt-carte-txt{position:absolute;left:0;right:0;bottom:26px;display:block;text-align:center}
.vt-carte-titre{display:block;color:#fff!important;font-size:15px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.vt-carte-sous{display:block;color:rgba(255,255,255,.82)!important;font-size:11px;letter-spacing:.04em;margin-top:6px;padding:0 14px}
.vt-carte-photo img{display:none}
.vt-grille-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.vt-item h3{font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;color:#6B5328;margin:0 0 8px!important;font-weight:600;line-height:1.4}
.vt-item p{font-size:13px!important;line-height:1.7;color:#6B6F76;margin:0!important}
.vt-num{display:block;font-size:11px;letter-spacing:.2em;color:#C9B79C;margin:0 0 12px}
.vt-sobre .vt-item{border-top:1px solid #EEE9E1;padding-top:16px}
.vt-rail{overflow:hidden;padding:6px 0 4px;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.vt-piste{display:flex;gap:18px;width:max-content;font-family:Jost,sans-serif}
.vt-piste-ba{animation:vt-defile 64s linear infinite}
.vt-piste-avis{animation:vt-defile 58s linear infinite}
.vt-rail:hover .vt-piste{animation-play-state:paused}
@keyframes vt-defile{from{transform:translateX(0)}
to{transform:translateX(calc(-50% - 9px))}
}
.vt-carte-ba,.vt-carte-avis{flex:0 0 auto;background:#fff;border-radius:26px;padding:18px;text-align:left;border:1px solid #F0ECE5}
.vt-carte-ba{width:308px}
.vt-carte-avis{width:340px}
.vt-ba-tete{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.vt-ini{width:38px;height:38px;border-radius:13px;background:#F3EFE8 center/cover;flex:0 0 auto}
.vt-ini-lettre{display:flex;align-items:center;justify-content:center;color:#6B5328;font-size:14px;letter-spacing:.06em}
.vt-ba-id{display:block;min-width:0}
.vt-ba-nom{display:flex;align-items:center;gap:5px;font-size:13px;color:#22252B;letter-spacing:.01em}
.vt-verif{width:13px;height:13px;flex:0 0 auto}
.vt-ba-lieu{display:block;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:#A3AAB4;margin-top:3px}
.vt-etoiles{display:block;color:#6B5328;font-size:11px;letter-spacing:.14em;margin-top:3px}
.vt-ba-duo{display:flex;gap:8px;margin-bottom:14px}
.vt-ba-duo figure{position:relative;flex:1;margin:0;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#F3EFE8}
.vt-ba-duo img{width:100%;height:100%;object-fit:cover;display:block}
.vt-ba-duo figcaption{position:absolute;left:8px;bottom:8px;background:#fff;color:#22252B;padding:3px 9px;border-radius:999px;font-size:7px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.vt-ba-cat{font-size:8px!important;letter-spacing:.14em;text-transform:uppercase;color:#A3AAB4;margin:0 0 6px!important}
.vt-ba-res{font-size:22px!important;color:#6B5328;margin:0!important;line-height:1.2;letter-spacing:.01em}
.vt-ba-res span{font-size:13px;color:#A3AAB4;margin-left:8px;letter-spacing:.02em}
.vt-avis-titre{font-size:14px!important;color:#6B5328;margin:0 0 6px!important;letter-spacing:.02em;font-weight:500}
.vt-avis-txt{font-size:13px!important;line-height:1.7;color:#6B6F76;margin:0!important}
.vt-section-avant-apres,.vt-section-avis{background:#FAF7F2}
@media(max-width:900px){.vt-grille-photo{grid-template-columns:repeat(2,1fr);gap:10px}
.vt-grille-4{grid-template-columns:repeat(2,1fr);gap:22px}
.vt-carte-titre{font-size:13px;letter-spacing:.16em}
.vt-carte-ba{width:250px}
.vt-carte-avis{width:280px}
}

/* --- valthea-sections-v3 (ancienne priorite 1016) --- */

.vt-section-besoins,.vt-section-bienfaits,.vt-section-avant-apres,.vt-section-avis,.vt-section-reassurance{background:#fcf8f1!important;padding:58px 0!important}
.vt-section-besoins .vc_column_text,.vt-section-bienfaits .vc_column_text,.vt-section-avant-apres .vc_column_text,.vt-section-avis .vc_column_text,.vt-section-reassurance .vc_column_text{text-align:center!important}
.vt-bloc,.vt-bloc h2,.vt-bloc .vt-sur,.vt-bloc .vt-intro,.vt-bloc .vt-item{text-align:center!important}
.vt-carte-ba,.vt-carte-avis{background:#fff!important;text-align:left!important}
.vt-carte-ba *,.vt-carte-avis *{text-align:left!important}
.vt-ba-duo figcaption{text-align:center!important}

/* --- valthea-sections-v4 (ancienne priorite 1017) --- */

.vt-grille-4{gap:0!important}
.vt-grille-4 .vt-item{padding:0 26px;border-left:1px solid #EAE2D6}
.vt-grille-4 .vt-item:first-child{border-left:none}
.vt-sobre .vt-item{border-top:none!important;padding-top:0!important}
.vt-grille-4 .vt-item h3{margin:0 0 6px!important}
.vt-grille-4 .vt-item p{margin:0!important}
@media(max-width:900px){.vt-grille-4 .vt-item{padding:0 14px;margin-bottom:24px}
.vt-grille-4 .vt-item:nth-child(odd){border-left:none}
}

/* --- valthea-sections-v5 (ancienne priorite 1018) --- */

.vt-section-besoins,.vt-section-bienfaits,.vt-section-avant-apres,.vt-section-avis,.vt-section-reassurance{padding:46px 0!important}
.vt-bloc h2{font-size:clamp(18px,2vw,24px)!important;line-height:1.3!important;letter-spacing:.12em!important;margin:0 0 10px!important}
.vt-bloc .vt-intro{font-size:13px!important;line-height:1.6!important;margin:0 auto 26px!important}
.vt-grille-4 .vt-item{display:flex;flex-direction:column;align-items:center}
.vt-grille-4 .vt-item h3{font-size:11px!important;line-height:1.35!important;letter-spacing:.14em!important;margin:0 0 8px!important;min-height:2.7em;display:flex;align-items:flex-start;justify-content:center}
.vt-grille-4 .vt-item p{font-size:12px!important;line-height:1.55!important;margin:0!important}
.vt-num{font-size:10px!important;line-height:1!important;margin:0 0 10px!important}

/* --- valthea-sections-v6 (ancienne priorite 1019) --- */

.vt-grille-4 .vt-item h3{white-space:nowrap!important;min-height:0!important;display:block!important;font-size:11px!important;margin:0 0 8px!important}
.vt-grille-4 .vt-item p{min-height:2.6em;display:flex;align-items:flex-start;justify-content:center}
.vt-section-bienfaits,.vt-section-reassurance{padding:40px 0 34px!important}
.vt-section-bienfaits .vc_column_text,.vt-section-reassurance .vc_column_text{margin-bottom:0!important}
.vt-section-besoins .vc_column_text,.vt-section-avant-apres .vc_column_text,.vt-section-avis .vc_column_text{margin-bottom:0!important}
.vt-section-besoins .vc_row,.vt-section-bienfaits .vc_row,.vt-section-avant-apres .vc_row,.vt-section-avis .vc_row,.vt-section-reassurance .vc_row{margin-bottom:0!important}
@media(max-width:900px){.vt-grille-4 .vt-item h3{white-space:nowrap!important}
}

/* --- valthea-sections-v7 (ancienne priorite 1020) --- */

.vt-carte-ba,.vt-carte-avis{border:none!important;box-shadow:none!important}
.vt-grille-4 .vt-item{border:none!important;padding:0 18px!important}
.vt-grille-4{gap:12px!important}
.vt-sobre .vt-item{border:none!important}
.vt-section-avis,.vt-section-avant-apres{padding:34px 0!important}
.vt-section-avis .vt-bloc,.vt-section-avant-apres .vt-bloc{padding-bottom:0!important}
.vt-section-avis .vt-bloc h2,.vt-section-avant-apres .vt-bloc h2{margin:0 0 18px!important}

/* --- valthea-sections-v8 (ancienne priorite 1021) --- */

.vt-ligne{display:block;margin:0 0 12px;line-height:0}
.vt-ligne svg{width:22px;height:22px;display:inline-block}
.vt-sobre .vt-item h3{font-size:10px!important;letter-spacing:.16em!important;white-space:nowrap!important;margin:0 0 8px!important}
.vt-sobre .vt-item p{font-size:12px!important;line-height:1.55!important;min-height:0!important;display:block!important}
.vt-section-reassurance{padding:38px 0 26px!important}
.vt-section-reassurance .vt-bloc{padding-bottom:0!important}
.vt-section-reassurance .vt-bloc h2{margin:0 0 22px!important}
@media(max-width:900px){.vt-sobre .vt-item h3{white-space:nowrap!important}
}

/* --- valthea-sections-v9 (ancienne priorite 1022) --- */

.vt-ba-cat{text-transform:uppercase!important;letter-spacing:.16em!important;font-size:8px!important;color:#A3AAB4!important}
.vt-ba-lieu{text-transform:uppercase!important}
.vt-bloc .vt-sur{text-transform:uppercase!important}
.vt-carte-titre{text-transform:uppercase!important}
.vt-item h3{text-transform:uppercase!important}

/* --- valthea-sections-v10 (ancienne priorite 1023) --- */

body .vt-section-besoins a.vt-carte-photo span.vt-carte-txt span.vt-carte-titre,body .vt-section-besoins a.vt-carte-photo span.vt-carte-titre{color:#ffffff!important}
body .vt-section-besoins a.vt-carte-photo span.vt-carte-txt span.vt-carte-sous,body .vt-section-besoins a.vt-carte-photo span.vt-carte-sous{color:rgba(255,255,255,.88)!important}
body .vt-section-besoins a.vt-carte-photo span.vt-carte-fond{background:linear-gradient(to top,rgba(16,21,33,.82) 0%,rgba(16,21,33,.45) 40%,rgba(16,21,33,.05) 78%)!important}

/* --- valthea-sections-v11 (ancienne priorite 1024) --- */

.vt-bloc p:empty,.vt-grille-4 p:empty,.vt-item p:empty{display:none!important;margin:0!important;height:0!important}
.vt-rond{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #DED4C4;border-radius:50%;font-size:10px;letter-spacing:.14em;color:#6B5328;margin:0 0 14px!important;line-height:1!important}
.vt-grille-4 .vt-item h3{height:auto!important;min-height:0!important;padding:0!important;line-height:1.3!important;margin:0 0 6px!important}
.vt-grille-4 .vt-item p{min-height:0!important;display:block!important;padding:0!important;line-height:1.55!important;margin:0!important}
.vt-grille-4 .vt-item{gap:0!important}

/* --- valthea-sections-v12 (ancienne priorite 1025) --- */

.vt-section-besoins,.vt-section-bienfaits,.vt-section-avant-apres,.vt-section-avis,.vt-section-reassurance{overflow-x:hidden!important}
.vt-section-besoins>.sec_row,.vt-section-bienfaits>.sec_row,.vt-section-avant-apres>.sec_row,.vt-section-avis>.sec_row,.vt-section-reassurance>.sec_row{margin-left:auto!important;margin-right:auto!important;width:100%!important;max-width:100%!important;padding:0!important}
.vt-section-besoins .vc_row,.vt-section-bienfaits .vc_row,.vt-section-avant-apres .vc_row,.vt-section-avis .vc_row,.vt-section-reassurance .vc_row{margin-left:0!important;margin-right:0!important;width:100%!important}
.vt-section-besoins .vc_column-inner,.vt-section-bienfaits .vc_column-inner,.vt-section-avant-apres .vc_column-inner,.vt-section-avis .vc_column-inner,.vt-section-reassurance .vc_column-inner{padding-left:0!important;padding-right:0!important;margin:0!important;width:100%!important}
.vt-section-besoins .wpb_column,.vt-section-bienfaits .wpb_column,.vt-section-avant-apres .wpb_column,.vt-section-avis .wpb_column,.vt-section-reassurance .wpb_column{padding-left:0!important;padding-right:0!important;width:100%!important}
.vt-bloc{margin-left:auto!important;margin-right:auto!important;width:100%!important}
.vt-bloc h2,.vt-bloc .vt-sur,.vt-bloc .vt-intro{width:100%!important;margin-left:0!important;margin-right:0!important}
.vt-ligne svg{fill:none!important;stroke:#6B5328!important}
.vt-ligne svg *{fill:none!important;stroke:#6B5328!important;stroke-width:1!important;vector-effect:non-scaling-stroke}

/* --- valthea-sections-v13 (ancienne priorite 1026) --- */

.vt-bloc h2{width:auto!important;max-width:none!important;min-width:0!important;display:block!important;padding:0 24px!important}
.vt-bloc .vt-sur,.vt-bloc .vt-intro{width:auto!important;max-width:none!important;display:block!important;padding:0 24px!important}
.vt-bloc .vt-intro{max-width:620px!important;margin-left:auto!important;margin-right:auto!important}
.vt-grille-photo,.vt-grille-4{padding:0 24px!important}

/* --- valthea-sections-v14 (ancienne priorite 1027) --- */

.vt-section-besoins,.vt-section-bienfaits,.vt-section-avant-apres,.vt-section-avis,.vt-section-reassurance{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important;left:0!important;right:0!important}

/* --- valthea-sections-v15 (ancienne priorite 1028) --- */

body .vt-section-besoins a.vt-carte-photo span.vt-cta{display:inline-block;margin-top:14px;padding:9px 20px;border:1px solid rgba(255,255,255,.65);border-radius:999px;color:#fff!important;font-size:9px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
body .vt-section-besoins a.vt-carte-photo:hover span.vt-cta{background:#fff;color:#6B5328!important}
body .vt-section-besoins a.vt-carte-photo span.vt-carte-txt{bottom:22px}

/* --- valthea-titre-uniforme-2 (ancienne priorite 1030) --- */

html body.home .hentry .wpb_wrapper h1.vt-titre-uni,html body.home .hentry .wpb_wrapper h2.vt-titre-uni,html body .vc_section .wpb_wrapper h1.vt-titre-uni,html body h1.vt-titre-uni,html body h2.vt-titre-uni{font-family:futura,"Welcomeweb-Bold",Jost,sans-serif!important;font-size:clamp(18px,2vw,24px)!important;font-weight:300!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#6B5328!important;line-height:1.3!important;text-align:center!important;padding-bottom:0!important;margin:0 auto 14px!important;max-width:none!important}

/* --- valthea-carrousel-continu (ancienne priorite 1031) --- */

.vt-piste{animation-name:vt-defile!important}
@keyframes vt-defile{from{transform:translateX(0)}
to{transform:translateX(calc(-16.6666% - 3px))}
}
.vt-piste-ba{animation-duration:42s!important}
.vt-piste-avis{animation-duration:46s!important}
.vt-rail{-webkit-mask-image:none!important;mask-image:none!important}

/* --- vt-mobile-commun (ancienne priorite 1060) --- */

@media(max-width:767px){html,body{overflow-x:hidden!important;max-width:100%!important}
body .row,body .footer .row,body .footer-widgets .row{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
body .footer1,body .footer2,body .footer3,body .footer4,body .other-columns,body .column-wide{padding-left:16px!important;padding-right:16px!important;width:100%!important;max-width:100%!important;float:none!important}
body rs-module-wrap,body rs-module,body rs-slides,body rs-slide,body rs-static-layers,body rs-sbg-wrap,body rs-sbg,body rs-sbg-px,body .dddwrapper,body .dddwrapper-layer{left:0!important;width:100%!important;max-width:100%!important;margin-left:0!important}
body .vc_row,body .vc_row-fluid{margin-left:0!important;margin-right:0!important;max-width:100%!important}
body .container,body .sec_row.container{padding-left:16px!important;padding-right:16px!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
body .footer-widgets .widget{margin-bottom:22px!important}
}

/* --- vt-prix-visible (ancienne priorite 1062) --- */

body ul.products li.product,body ul.products li.item{height:auto!important;min-height:0!important;overflow:visible!important}
body ul.products li.product .product-inner,body ul.products li.product .caption{height:auto!important;overflow:visible!important}
body ul.products li.product .product_after_title{height:auto!important;min-height:0!important;overflow:visible!important}
body ul.products li.product .price,body ul.products li.product .product_after_shop_loop_price{display:block!important;visibility:visible!important;opacity:1!important;overflow:visible!important;margin-top:4px!important}
body ul.products li.product .price *{white-space:nowrap!important}
body ul.products li.product .woocommerce-loop-product__title,body ul.products li.product h2,body ul.products li.product h3{min-height:0!important;overflow:visible!important}

/* --- vt-buybox-commune (ancienne priorite 1063) --- */

html body.single-product .entry-summary form.cart{width:100%!important;max-width:100%!important;display:block!important}
html body.single-product .entry-summary .summary,html body.single-product .entry-summary .et-pro-summary-top{width:100%!important;max-width:100%!important}
html body.single-product.single .entry-summary form.cart div.et-wishlist-div-open{display:flex!important;align-items:stretch!important;gap:12px!important;width:100%!important;max-width:100%!important;flex-wrap:nowrap!important;float:none!important}
html body.single-product.single .entry-summary form.cart div.et-wishlist-div-open > div.quantity{flex:0 0 104px!important;width:104px!important;height:46px!important;margin:0!important;float:none!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body.single-product.single .entry-summary form.cart div.et-wishlist-div-open > div.quantity input,html body.single-product.single .entry-summary form.cart div.et-wishlist-div-open > div.quantity .qty{height:44px!important;line-height:44px!important;margin:0!important}
html body.single-product.single .entry-summary form.cart div.et-wishlist-div-open > button.single_add_to_cart_button{flex:1 1 0%!important;width:auto!important;max-width:none!important;min-width:0!important;height:46px!important;line-height:1!important;margin:0!important;padding:0 20px!important;float:none!important;display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:0!important;font-size:11px!important;letter-spacing:.18em!important;text-transform:uppercase!important;white-space:nowrap!important}
html body.single-product .summary .price,html body.single-product .summary .price *,html body ul.products li.product .price,html body ul.products li.product .price *{font-size:inherit!important;line-height:1.4!important;vertical-align:baseline!important}
html body.single-product .summary p.price,html body.single-product .summary span.price{font-size:20px!important;white-space:nowrap!important;display:block!important;margin:0 0 14px!important}
html body ul.products li.product .price{font-size:13px!important}

/* --- vt-lisible-final (ancienne priorite 1065) --- */

html body:not(.home) p:not(.vt-hero):not(.vt-hero *),html body:not(.home) li:not(.vt-hero):not(.vt-hero *),html body:not(.home) h4:not(.vt-hero):not(.vt-hero *),html body:not(.home) .wpb_text_column *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .vc_tta-panel-body *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .faq-answer:not(.vt-hero):not(.vt-hero *),html body:not(.home) .faq-answer *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .accordion-content *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .summary *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .woocommerce-Tabs-panel *:not(.vt-hero):not(.vt-hero *),html body:not(.home) .product_meta *:not(.vt-hero):not(.vt-hero *){color:#22252B!important}
html body:not(.home) h1,html body:not(.home) h2,html body:not(.home) h3{color:#6B5328!important}
html body .vt-hero h1,html body .vt-hero h2,html body .vt-hero h3,html body .vt-hero h4,html body .vt-hero p,html body .vt-hero span,html body .vt-hero li{color:#ffffff!important}
html body #cookie-notice,html body #cookie-notice p,html body #cookie-notice span{color:#ffffff!important}
html body .single_add_to_cart_button,html body .single_add_to_cart_button *{color:#ffffff!important}
html body .vt-carte-photo .vt-carte-titre,html body .vt-carte-photo .vt-carte-sous,html body .vt-carte-photo .vt-cta{color:#ffffff!important}
html body .site-footer *,html body footer#colophon p,html body footer#colophon a,html body footer#colophon h3,html body footer#colophon span{color:#ffffff!important}

/* --- vt-lisible-boutons (ancienne priorite 1066) --- */

html body .summary button.single_add_to_cart_button,html body .summary button.single_add_to_cart_button *,html body button.single_add_to_cart_button,html body button.single_add_to_cart_button *,html body .summary a.button,html body .summary a.button *,html body a.button.outlined,html body a.button.outlined *,html body .woocommerce a.button,html body .woocommerce button.button,html body .wc-forward,html body .checkout-button{color:#ffffff!important}
html body a.button.outlined{background:#22252B!important;border-color:#22252B!important}
html body .summary .woocommerce-Price-currencySymbol,html body .price .woocommerce-Price-currencySymbol,html body .woocommerce-Price-amount,html body .woocommerce-Price-amount *{color:inherit!important}
html body .summary p.price,html body .summary p.price *,html body ul.products li.product .price,html body ul.products li.product .price *{color:#22252B!important}

/* --- vt-actions-carte (ancienne priorite 1070) --- */

.vt-actions{display:flex;gap:10px;margin:12px 0 2px;width:100%}
.vt-actions a{flex:1 1 0%;display:flex;align-items:center;justify-content:center;height:42px;padding:0 12px;font-size:12px;letter-spacing:.02em;text-align:center;white-space:nowrap;border-radius:4px;text-decoration:none;transition:background .25s,color .25s}
.vt-actions .vt-btn-decouvrir{background:transparent;color:#6B5328!important;border:1px solid #6B5328}
.vt-actions .vt-btn-decouvrir:hover{background:#6B5328;color:#fff!important}
.vt-actions .vt-btn-panier{background:#6B5328!important;color:#fff!important;border:1px solid #6B5328}
.vt-actions .vt-btn-panier:hover{background:#0f1a2e!important;color:#fff!important}
.vt-actions .vt-btn-panier.loading{opacity:.6;pointer-events:none}
.vt-actions .vt-btn-panier.added::after{content:'✓';margin-left:8px}
li.product .added_to_cart{display:none!important}
@media(max-width:767px){.vt-actions{gap:6px;margin-top:8px}
.vt-actions a{height:36px;font-size:10px;padding:0 6px}
}

/* --- vt-actions-visibles (ancienne priorite 1071) --- */

html body li.product .after_shop_loop_actions,html body li.item .after_shop_loop_actions{display:block!important;opacity:1!important;visibility:visible!important;height:auto!important;position:static!important;transform:none!important}
html body li.product .product_after_title{height:auto!important;min-height:0!important;overflow:visible!important}
html body li.product .vt-actions{display:flex!important;height:auto!important;opacity:1!important;visibility:visible!important}
html body li.product .vt-actions a{height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:1 1 0%!important;opacity:1!important;visibility:visible!important}
@media(max-width:767px){html body li.product .vt-actions a{height:36px!important;font-size:10px!important}
}

/* --- vt-carte-uniforme (ancienne priorite 1072) --- */

html body li.product .woocommerce-loop-product__title,html body li.product h2.woocommerce-loop-product__title,html body li.product .caption h3,html body li.product .caption h2{min-height:2.6em!important;display:block!important;overflow:visible!important;margin:10px 0 6px!important;line-height:1.3!important}
html body li.product .price,html body li.product .product_after_shop_loop_price{display:block!important;visibility:visible!important;opacity:1!important;height:auto!important;overflow:visible!important;margin:0 0 4px!important}
html body li.product .product_after_title{height:auto!important;min-height:0!important;overflow:visible!important;display:block!important}
html body li.product,html body li.item{height:auto!important;min-height:0!important;overflow:visible!important}
html body li.product .caption,html body li.product .product-inner{height:auto!important;overflow:visible!important}

/* --- vt-lot-divers (ancienne priorite 1074) --- */

html body rs-layer.rev-btn *,html body .rev-btn *{color:#000000!important}
html body .woocommerce-cart-form .product-remove a.remove,html body a.remove,html body #side-cart a.remove,html body .mini_cart_item a.remove,html body .widget_shopping_cart a.remove{color:#6B5328!important;background:#fff!important;border:1px solid #E3DACB!important;width:26px!important;height:26px!important;line-height:24px!important;font-size:16px!important;text-align:center!important;border-radius:50%!important;opacity:1!important;visibility:visible!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important}
html body a.remove:hover,html body #side-cart a.remove:hover{background:#6B5328!important;color:#fff!important}
html body .mini_cart_item{position:relative!important}
html body #side-cart .mini_cart_item a.remove,html body .widget_shopping_cart .mini_cart_item a.remove{position:absolute!important;top:6px!important;right:0!important;z-index:5!important}
@media(max-width:767px){html body.home .vt-bloc,html body.home .vt-bloc h2,html body.home .vt-bloc .vt-sur,html body.home .vt-bloc .vt-intro,html body.home .vt-item{text-align:center!important}
html body.home .vt-bloc{padding-left:18px!important;padding-right:18px!important}
html body.home .wpb_text_column,html body.home .wpb_text_column p,html body.home .wpb_text_column h1,html body.home .wpb_text_column h2,html body.home .wpb_text_column h3{text-align:center!important}
html body.home .vc_column-inner{padding-left:0!important;padding-right:0!important}
html body.home rs-layer,html body.home .vt-hero rs-layer{text-align:left!important}
}

/* --- vt-rassurance-css (ancienne priorite 1075) --- */

.vt-rassurance{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 4px;font-family:Jost,sans-serif}
.vt-rassurance-item{display:flex;align-items:center;gap:10px}
.vt-rassurance-item svg{width:22px;height:22px;flex:0 0 auto}
.vt-rassurance-item span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6B5328;line-height:1.5}
.vt-rassurance-item small{font-size:10px;letter-spacing:.02em;text-transform:none;color:#6B6F76}
@media(max-width:600px){.vt-rassurance{grid-template-columns:1fr}
}

/* --- vt-mobile-ordre (ancienne priorite 1080) --- */

@media(max-width:767px){html,body{overflow-x:hidden!important}
html body.home .vc_section,html body.home .vc_row,html body.home .vc_column_container,html body.home .vc_column-inner,html body.home .wpb_wrapper{position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;transform:none!important;overflow:visible!important}
html body.home .vc_section{padding:34px 0!important;margin:0!important;clear:both!important;float:none!important}
html body.home h1{font-size:22px!important;line-height:1.25!important;letter-spacing:.06em!important;padding-bottom:8px!important}
html body.home h2,html body.home .vt-bloc h2{font-size:18px!important;line-height:1.3!important;letter-spacing:.08em!important;margin:0 0 10px!important}
html body.home h3{font-size:13px!important;line-height:1.35!important}
html body.home .vt-bloc .vt-intro{font-size:13px!important;line-height:1.65!important;margin:0 auto 22px!important;max-width:100%!important}
html body.home .vt-bloc .vt-sur{font-size:9px!important;letter-spacing:.26em!important;margin:0 0 8px!important}
html body ul.products{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:18px 12px!important;padding:0 14px!important;margin:0 auto!important;width:100%!important;max-width:100%!important}
html body ul.products li.product,html body ul.products li.item{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;float:none!important;position:relative!important;display:block!important;height:auto!important;min-height:0!important;overflow:visible!important}
html body ul.products li.product img{width:100%!important;height:auto!important;max-width:100%!important}
html body ul.products li.product .woocommerce-loop-product__title,html body ul.products li.product h2,html body ul.products li.product h3{font-size:10px!important;line-height:1.35!important;letter-spacing:.06em!important;min-height:2.7em!important;margin:8px 0 4px!important;text-align:center!important}
html body ul.products li.product .price{font-size:12px!important;text-align:center!important}
html body ul.products li.product .vt-actions{flex-direction:column!important;gap:6px!important}
html body ul.products li.product .vt-actions a{height:34px!important;font-size:9px!important;letter-spacing:.08em!important}
html body .vt-grille-photo{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;padding:0 14px!important}
html body .vt-grille-4{grid-template-columns:repeat(2,1fr)!important;gap:20px 12px!important;padding:0 14px!important}
html body .vt-carte-ba{width:250px!important}
html body .vt-carte-avis{width:270px!important}
}

/* --- vt-final-mobile (ancienne priorite 1090) --- */

html body .vt-rail{overflow:hidden!important;width:100%!important;max-width:100%!important;padding:6px 0!important}
html body .vt-piste{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;gap:14px!important}
html body .vt-piste > article{flex:0 0 auto!important;display:block!important}
html body .vt-ba-duo figcaption{background:#ffffff!important;color:#22252B!important;-webkit-text-fill-color:#22252B!important;font-size:7px!important;letter-spacing:.16em!important;padding:3px 9px!important;border-radius:999px!important}
html body .vt-bloc h2{text-transform:uppercase!important;text-align:center!important}
@media(max-width:767px){html body .vt-bloc h2{font-size:15px!important;line-height:1.35!important;letter-spacing:.07em!important;margin:0 0 10px!important;padding:0 10px!important}
html body .vt-bloc .vt-sur{font-size:9px!important;letter-spacing:.24em!important;text-align:center!important}
html body .vt-bloc .vt-intro{font-size:12px!important;line-height:1.6!important;text-align:center!important;padding:0 6px!important}
html body .vt-carte-ba{width:230px!important;padding:14px!important}
html body .vt-carte-avis{width:250px!important;padding:14px!important}
html body .vt-ba-nom{font-size:11px!important}
html body .vt-ba-lieu{font-size:7px!important}
html body .vt-ba-res{font-size:16px!important}
html body .vt-ba-res span{font-size:11px!important}
html body .vt-avis-titre{font-size:12px!important}
html body .vt-avis-txt{font-size:11px!important;line-height:1.55!important}
html body .vt-etoiles{font-size:10px!important}
html body .vt-section-reassurance .vt-grille-4{grid-template-columns:repeat(2,1fr)!important;gap:22px 12px!important}
html body .vt-section-reassurance .vt-item h3{font-size:9px!important;letter-spacing:.1em!important;white-space:nowrap!important;padding-top:10px!important}
html body .vt-section-reassurance .vt-item p{font-size:10px!important}
html body .vt-ligne svg{width:18px!important;height:18px!important}
}

/* --- vt-slider-mobile (ancienne priorite 1091) --- */

@media(max-width:767px){html body rs-layer.rev-btn,html body .rev-btn{font-size:9px!important;letter-spacing:.14em!important;padding:11px 18px!important;white-space:nowrap!important}
html body rs-module,html body rs-module-wrap{max-height:74vh!important}
}
@media(min-width:768px) and (max-width:1024px){}

/* --- vt-contact-css (ancienne priorite 1094) --- */

.vt-contact{align-items:center!important}
.vt-contact-form .vt-sur{font-size:10px!important;letter-spacing:.26em!important;text-transform:uppercase!important;color:#9AA0A8!important;margin:0 0 10px!important;text-align:left!important}
.vt-contact-form h2{font-size:22px!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#6B5328!important;margin:0 0 10px!important;text-align:left!important}
.vt-contact-form .vt-intro{font-size:13px!important;line-height:1.7!important;color:#6B6F76!important;margin:0 0 22px!important;text-align:left!important;max-width:460px}
.vt-contact-image{width:100%}
.vt-contact-image img{width:100%;height:100%;max-height:620px;object-fit:cover;border-radius:22px;display:block}
.vt-contact .gform_wrapper .gfield_label{font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#6B5328!important}
.vt-contact .gform_wrapper input[type=text],.vt-contact .gform_wrapper input[type=email],.vt-contact .gform_wrapper textarea{border:1px solid #E3DACB!important;border-radius:0!important;padding:11px!important;font-family:Jost,sans-serif!important}
.vt-contact .gform_wrapper .gform_button{background:#6B5328!important;color:#fff!important;border:0!important;border-radius:0!important;padding:14px 28px!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important}
.vt-contact .gform_wrapper .gfield--type-fileupload .gfield_description{font-size:11px!important;color:#9AA0A8!important}
@media(max-width:900px){.vt-contact .wpb_column{width:100%!important}
.vt-contact-image{margin-top:26px}
.vt-contact-image img{max-height:340px}
.vt-contact-form .vt-sur,.vt-contact-form h2,.vt-contact-form .vt-intro{text-align:center!important}
.vt-contact-form .vt-intro{margin-left:auto!important;margin-right:auto!important}
}

/* --- vt-compteur-image (ancienne priorite 1095) --- */

html body .quick_cart{position:relative!important}
html body .quick_cart .item-counter,html body .quick_cart .minicart-counter,html body .item-counter,html body .minicart-counter{position:relative!important;z-index:20!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;background:#6B5328!important;min-width:20px!important;width:20px!important;height:20px!important;line-height:20px!important;font-size:11px!important;font-weight:500!important;border-radius:50%!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-indent:0!important;overflow:visible!important;opacity:1!important;visibility:visible!important;text-shadow:none!important;font-family:Jost,sans-serif!important}
html body .item-counter::before,html body .item-counter::after,html body .minicart-counter::before,html body .minicart-counter::after{display:none!important;content:none!important}
html body .et-count-zero{display:inline-flex!important;opacity:1!important;visibility:visible!important}
html body .vt-contact-image{margin-bottom:46px!important}
html body .vt-contact{padding-bottom:26px!important}
@media(max-width:900px){html body .vt-contact-image{margin-top:30px!important;margin-bottom:56px!important}
html body .vt-contact{padding-bottom:36px!important}
}

/* --- vt-champs-uniformes (ancienne priorite 1098) --- */

html body .gform_wrapper input[type=text],html body .gform_wrapper input[type=email],html body .gform_wrapper input[type=tel],html body .gform_wrapper input[type=url],html body .gform_wrapper input[type=number],html body .gform_wrapper input[type=password],html body .gform_wrapper input[type=date],html body .gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=file]),html body .gform_wrapper textarea,html body .gform_wrapper select{border:1px solid #E3DACB!important;border-width:1px!important;border-color:#E3DACB!important;border-radius:0!important;background:#fff!important;padding:11px!important;font-family:Jost,sans-serif!important;font-size:14px!important;color:#22252B!important;box-shadow:none!important;outline:none!important}
html body .gform_wrapper input:focus,html body .gform_wrapper textarea:focus,html body .gform_wrapper select:focus{border-color:#6B5328!important;box-shadow:none!important;outline:none!important}
html body .gform_wrapper .gfield_label{font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#6B5328!important;font-weight:500!important}

/* --- vt-faq-mobile (ancienne priorite 1102) --- */

html body .vt-surtitre,html body p.vt-surtitre{text-transform:uppercase!important;text-align:center!important}
@media(max-width:767px){html body h1,html body .regular-title h1,html body .hero-header-container h1,html body .woocommerce-products-header h1{font-size:20px!important;line-height:1.3!important;letter-spacing:.06em!important;text-align:center!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;padding:0 18px!important;max-width:100%!important}
html body .vt-surtitre{font-size:9px!important;letter-spacing:.26em!important}
html body .faq-question,html body .faq-question-text,html body .vc_tta-panel-title,html body .vc_tta-title-text,html body .accordion-title,html body .et-accordion-title{font-size:12px!important;line-height:1.5!important;letter-spacing:.06em!important;text-align:left!important;white-space:normal!important;width:auto!important;flex:1 1 auto!important;padding-right:10px!important}
html body .faq-item,html body .vc_tta-panel,html body .accordion-item{width:100%!important;max-width:100%!important;padding:0!important;margin:0 0 6px!important}
html body .faq-question,html body .vc_tta-panel-heading,html body .accordion-header{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;padding:15px 18px!important}
html body .faq-toggle,html body .vc_tta-controls-icon{flex:0 0 auto!important;order:2!important;margin-left:auto!important;font-size:16px!important}
html body .faq-answer,html body .vc_tta-panel-body,html body .accordion-content{padding:0 18px 16px!important;font-size:12px!important;line-height:1.7!important;text-align:left!important}
html body .faq-liste,html body .vc_tta-container,html body .faq-section{padding:0 8px!important;width:100%!important;max-width:100%!important}
html body .faq-section-title,html body .vc_tta-panels{width:100%!important;max-width:100%!important}
}

/* --- vt-colonnes-mobile (ancienne priorite 1104) --- */

@media(max-width:767px){html body .vc_row.vc_inner,html body .vc_row-fluid.vc_inner{display:block!important;flex-wrap:wrap!important;width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
html body .vc_row.vc_inner > .wpb_column,html body .vc_row-fluid.vc_inner > .wpb_column,html body .vc_row .wpb_column,html body .wpb_column.vc_column_container{width:100%!important;max-width:100%!important;flex:0 0 100%!important;float:none!important;padding-left:0!important;padding-right:0!important}
html body .vc_column-inner{width:100%!important;max-width:100%!important;padding-left:14px!important;padding-right:14px!important}
html body .wpb_wrapper{width:100%!important;max-width:100%!important}
html body .vc_toggle,html body .vc_toggle_title,html body .vc_toggle_content{width:100%!important;max-width:100%!important}
html body .vc_toggle_title h4,html body .vc_toggle_title{font-size:12px!important;line-height:1.5!important;text-align:left!important;width:100%!important}
html body .vc_toggle_title h4{padding-right:26px!important}
html body .vc_toggle_content,html body .vc_toggle_content p{font-size:12px!important;line-height:1.7!important;text-align:left!important}
html body .vc_toggle{margin-bottom:8px!important;padding:2px 0!important}
}

/* --- vt-parrainage-piste (ancienne priorite 1109) --- */

html body .vt-par-rail{overflow:hidden!important;width:100%!important;max-width:100%!important}
html body .vt-par-piste{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:max-content!important;max-width:none!important;gap:14px!important}
html body .vt-par-vignette{flex:0 0 auto!important;display:block!important}
html body .vt-par-vignette img{width:100%!important;height:100%!important;object-fit:cover!important}
html body.page .regular-title,html body.page .hero-header-container{padding-top:18px!important}

/* --- vt-coupon-mobile (ancienne priorite 1110) --- */

html body .vt-coupon{width:100%!important;max-width:520px!important;box-sizing:border-box!important}
html body .vt-coupon-droite{min-width:0!important;overflow:hidden!important}
html body .vt-coupon-code{max-width:100%!important;overflow-wrap:anywhere!important;text-align:center!important;box-sizing:border-box!important}
@media(max-width:600px){html body .vt-coupon{flex-direction:column!important;max-width:100%!important;border-radius:18px!important}
html body .vt-coupon::before,html body .vt-coupon::after{left:50%!important;top:auto!important;bottom:auto!important}
html body .vt-coupon::before{display:none!important}
html body .vt-coupon::after{display:none!important}
html body .vt-coupon-gauche{flex:0 0 auto!important;width:100%!important;padding:18px 12px!important;flex-direction:row!important;gap:10px!important;justify-content:center!important;align-items:baseline!important}
html body .vt-coupon-remise{font-size:22px!important}
html body .vt-coupon-note{margin-top:0!important;font-size:9px!important}
html body .vt-coupon-droite{width:100%!important;padding:18px 14px!important;gap:9px!important}
html body .vt-coupon-code{font-size:16px!important;letter-spacing:.14em!important;padding:9px 12px!important;width:100%!important}
html body .vt-coupon-copier{width:100%!important;padding:11px 14px!important}
}

/* --- vt-coupon-label (ancienne priorite 1111) --- */

html body .vt-coupon-droite{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important;width:100%!important}
html body .vt-coupon-label{display:block!important;width:100%!important;text-align:center!important;white-space:nowrap!important;margin:0!important;position:static!important;float:none!important}
html body .vt-coupon-code{display:block!important;width:100%!important;box-sizing:border-box!important;white-space:nowrap!important;margin:0!important}
html body .vt-coupon-copier{display:block!important;width:100%!important;margin:0!important}

/* --- vt-orphelins (ancienne priorite 1112) --- */

html body h1,html body h2,html body h3,html body h4,html body .vt-bloc h2,html body .vt-par h2,html body .vt-par-titre-fin{text-wrap:balance;-webkit-hyphens:none;hyphens:none}
html body .vt-par a,html body .vt-par .vt-intro a,html body .vt-intro a,html body .vt-par-fin a:not(.vt-par-cta){font-size:inherit!important;letter-spacing:inherit!important;font-family:inherit!important;line-height:inherit!important;text-transform:none!important;color:#6B5328!important;text-decoration:underline!important;text-underline-offset:3px!important}
html body .vt-par-fin{text-align:center!important}
html body a.vt-par-cta{display:inline-flex!important;width:auto!important;max-width:100%!important;min-width:0!important;margin:6px auto 0!important;padding:0 34px!important;height:48px!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important;float:none!important;box-sizing:border-box!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;border-radius:999px!important;background:#6B5328!important;color:#fff!important;text-decoration:none!important}
@media(max-width:600px){html body a.vt-par-cta{padding:0 24px!important;height:46px!important;font-size:9px!important}
}

/* --- vt-bandeau-titre (ancienne priorite 1113) --- */

html body .regular-title,html body .hero-header-container,html body .page-title,html body .woocommerce-products-header,html body .entry-header{padding-top:34px!important;padding-bottom:34px!important}
html body .regular-title h1,html body .hero-header-container h1,html body .page-title h1,html body .woocommerce-products-header h1,html body .entry-header h1{margin:0!important;padding:0!important;line-height:1.3!important}
html body .vt-par-fin{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}
html body .vt-par-fin > *{margin-left:auto!important;margin-right:auto!important}
@media(max-width:767px){html body .regular-title,html body .hero-header-container,html body .page-title,html body .woocommerce-products-header,html body .entry-header{padding-top:26px!important;padding-bottom:26px!important}
}

/* --- vt-parrain-espaces (ancienne priorite 1114) --- */

html body .vt-section-parrainage{padding-top:22px!important}
html body .vt-section-parrainage .vt-par:first-child{padding-top:0!important}
html body .vt-section-parrainage .vc_row:first-child,html body .vt-section-parrainage .vc_row:first-child .vc_column-inner,html body .vt-section-parrainage .wpb_text_column:first-child{padding-top:0!important;margin-top:0!important}
html body .vt-par h2{margin-top:0!important}
@media(max-width:767px){html body .vt-section-parrainage{padding-top:16px!important}
}

/* --- vt-centrage-mobile (ancienne priorite 1115) --- */

html body .vt-par-etape p,html body .vt-par-etape h3,html body .vt-par .vt-intro,html body .vt-item p,html body .vt-item h3,html body .vt-bloc .vt-intro,html body .vt-par-fin p,html body .vt-par-titre-fin{text-align:center!important;text-align-last:center!important}
@media(max-width:767px){html body .vt-par-etape,html body .vt-par-etape *,html body .vt-par,html body .vt-par > *,html body .vt-item,html body .vt-item *,html body .vt-bloc,html body .vt-bloc > *{text-align:center!important;text-align-last:center!important}
html body .vt-par p,html body .vt-par-etape p,html body .vt-bloc p,html body .vt-item p{hyphens:none!important;word-spacing:normal!important;padding-left:10px!important;padding-right:10px!important}
}

/* --- vt-bouton-lisible (ancienne priorite 1116) --- */

html body a.vt-par-cta,html body .vt-par-cta{font-size:12px!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#fff!important;-webkit-text-fill-color:#fff!important;height:52px!important;padding:0 38px!important}
html body .vt-coupon-copier{font-size:11px!important;font-weight:500!important;letter-spacing:.12em!important;text-transform:uppercase!important;padding:12px 22px!important}
html body .vt-par-etape h3{font-size:12px!important;letter-spacing:.14em!important}
html body .vt-par-etape p{font-size:13px!important}
@media(max-width:767px){html body a.vt-par-cta,html body .vt-par-cta{font-size:11px!important;letter-spacing:.12em!important;height:48px!important;padding:0 28px!important}
html body .vt-coupon-copier{font-size:10px!important}
}

/* --- vt-images-cartes (ancienne priorite 1123) --- */

html body ul.products li.product .product_thumbnail,html body ul.products li.product figure.product_thumbnail{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:auto!important;overflow:hidden!important;margin:0 0 6px!important;position:static!important}
html body ul.products li.product .product_thumbnail img,html body ul.products li.product figure img,html body ul.products li.product img.main-image,html body ul.products li.product img.wp-post-image{position:static!important;inset:auto!important;width:100%!important;height:auto!important;max-width:100%!important;min-width:0!important;object-fit:cover!important;display:block!important;margin:0!important;opacity:1!important;visibility:visible!important}
html body ul.products li.product a.woocommerce-LoopProduct-link{display:block!important;width:100%!important}

/* --- vt-boutons-droits (ancienne priorite 1124) --- */

html body li.product .vt-actions a,html body .vt-actions .vt-btn-decouvrir,html body .vt-actions .vt-btn-panier{border-radius:0!important}

/* --- vt-fiche-mobile (ancienne priorite 1126) --- */

@media(max-width:767px){html body.single-product .product-showcase,html body.single-product .showcase-inner,html body.single-product .showcase-row,html body.single-product .product-gallery,html body.single-product .woocommerce-product-gallery,html body.single-product .col-12.col-lg-7,html body.single-product .product-images{padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
html body.single-product .woocommerce-product-gallery__wrapper,html body.single-product .woocommerce-product-gallery__image,html body.single-product .flexslider,html body.single-product .flex-viewport{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
html body.single-product .woocommerce-product-gallery__image img,html body.single-product .flex-viewport img{width:100%!important;height:auto!important;max-width:100%!important;display:block!important}
html body.single-product .flex-control-thumbs,html body.single-product .product-thumbnails,html body.single-product .thumbnails{display:flex!important;gap:8px!important;padding:10px 14px 0!important;margin:0!important;background:transparent!important;list-style:none!important;overflow-x:auto!important;width:100%!important}
html body.single-product .flex-control-thumbs li,html body.single-product .product-thumbnails li,html body.single-product .thumbnails li{flex:0 0 68px!important;width:68px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;list-style:none!important}
html body.single-product .flex-control-thumbs img,html body.single-product .product-thumbnails img,html body.single-product .thumbnails img{width:68px!important;height:88px!important;object-fit:cover!important;border:0!important;outline:0!important;background:#F7F4EF!important;box-shadow:none!important;opacity:.55!important;display:block!important;margin:0!important;padding:0!important}
html body.single-product .flex-control-thumbs img.flex-active,html body.single-product .flex-control-thumbs .flex-active img{opacity:1!important;border:0!important;outline:1px solid #6B5328!important;outline-offset:-1px!important}
html body.single-product .summary,html body.single-product .entry-summary,html body.single-product .product-information{padding-left:16px!important;padding-right:16px!important}
}

/* --- vt-titre-prix (ancienne priorite 1127) --- */

html body ul.products li.product .woocommerce-loop-product__title,html body ul.products li.product .caption h2,html body ul.products li.product .caption h3,html body ul.products li.product h2.woocommerce-loop-product__title{min-height:0!important;height:auto!important;margin:8px 0 6px!important;padding:0!important;display:block!important}
html body ul.products li.product .product_after_title,html body ul.products li.product .product_after_shop_loop_price{margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
html body ul.products li.product .price{margin:0 0 10px!important;padding:0!important;display:block!important}
html body ul.products li.product .caption{padding-bottom:0!important}
html body ul.products li.product .vt-actions{margin-top:0!important}

/* --- vt-prix-fiche (ancienne priorite 1128) --- */

html body.single-product .summary p.price,html body.single-product .summary span.price,html body.single-product .entry-summary .price{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:12px!important;margin:0 0 16px!important;line-height:1.5!important}
html body.single-product .summary .price del,html body.single-product .summary .price ins,html body.single-product .summary .price > span{display:inline-flex!important;align-items:baseline!important;gap:3px!important;margin:0!important;padding:0!important;white-space:nowrap!important;text-decoration-thickness:1px!important}
html body.single-product .summary .price ins{text-decoration:none!important}
html body.single-product .summary .price del{opacity:.55!important}
html body.single-product .summary .price .woocommerce-Price-currencySymbol{margin-left:2px!important;font-size:inherit!important}
html body.single-product .summary .onsale,html body.single-product .summary .sale-badge,html body.single-product .summary [class*="discount"],html body.single-product .price + .onsale{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:5px 11px!important;font-size:11px!important;line-height:1!important;border-radius:999px!important;background:#F3EDE4!important;color:#6B5328!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important}
html body.single-product .summary .product_title,html body.single-product .entry-summary h1{overflow-wrap:break-word!important;hyphens:none!important;max-width:100%!important;line-height:1.3!important;margin:0 0 12px!important}
@media(max-width:767px){html body.single-product .summary p.price,html body.single-product .summary span.price{gap:10px!important;font-size:18px!important}
html body.single-product .summary .onsale{font-size:10px!important;padding:4px 9px!important}
}

/* --- vt-fiche-design (ancienne priorite 1130) --- */

html body.single-product .summary .product_title,html body.single-product .entry-summary h1,html body.single-product .summary h1{text-align:left!important;margin:0 0 10px!important;line-height:1.3!important;letter-spacing:.06em!important;overflow-wrap:break-word!important}
html body.single-product .summary,html body.single-product .entry-summary{text-align:left!important}
html body.single-product .summary p.price,html body.single-product .summary span.price{display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;gap:14px!important;margin:0 0 14px!important;text-align:left!important;justify-content:flex-start!important}
html body.single-product .summary .price del,html body.single-product .summary .price ins{display:inline-flex!important;align-items:baseline!important;white-space:nowrap!important;margin:0!important;padding:0!important}
html body.single-product .summary .price ins{text-decoration:none!important;font-weight:500!important}
html body.single-product .summary .price .woocommerce-Price-currencySymbol{font-size:inherit!important;margin-left:3px!important;vertical-align:baseline!important;position:static!important}
html body.single-product .summary .onsale{position:static!important;display:inline-flex!important;align-items:center!important;height:24px!important;padding:0 11px!important;margin:0!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;border-radius:999px!important;background:#F3EDE4!important;color:#6B5328!important;overflow:visible!important;width:auto!important;min-width:0!important;transform:none!important}
html body.single-product .quantity{border:1px solid #DED4C4!important;border-radius:0!important;background:#fff!important;height:52px!important;box-sizing:border-box!important;overflow:hidden!important}
html body.single-product .quantity input,html body.single-product .quantity .qty{border:0!important;background:transparent!important;height:50px!important;line-height:50px!important;width:38px!important;text-align:center!important;font-size:14px!important;color:#22252B!important;-moz-appearance:textfield!important}
html body.single-product .quantity input::-webkit-outer-spin-button,html body.single-product .quantity input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}
html body.single-product .quantity .minus,html body.single-product .quantity .plus{border:0!important;background:transparent!important;width:30px!important;height:50px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;color:#6B5328!important}
html body.single-product .quantity .minus svg,html body.single-product .quantity .plus svg{width:12px!important;height:12px!important;stroke:#6B5328!important;fill:#6B5328!important}

/* --- vt-vignettes-galerie (ancienne priorite 1131) --- */

html body.single-product .flex-control-thumbs,html body.single-product .flex-control-nav{display:flex!important;gap:8px!important;padding:10px 14px 0!important;margin:0!important;list-style:none!important;background:transparent!important;overflow-x:auto!important;overflow-y:hidden!important}
html body.single-product .flex-control-thumbs li,html body.single-product .flex-control-nav li{flex:0 0 64px!important;width:64px!important;height:64px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;list-style:none!important;overflow:hidden!important;position:relative!important;line-height:0!important}
html body.single-product .flex-control-thumbs li img,html body.single-product .flex-control-nav li img{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;object-fit:cover!important;object-position:center!important;display:block!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;opacity:.5!important;transition:opacity .2s!important;float:none!important;position:static!important}
html body.single-product .flex-control-thumbs li img.flex-active,html body.single-product .flex-control-thumbs li img:hover{opacity:1!important;border:0!important;outline:1px solid #6B5328!important;outline-offset:-1px!important}

/* --- vt-label-express (ancienne priorite 1136) --- */

html body .product-label{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;box-sizing:border-box!important;width:100%!important}
html body .product-label .icon{flex:0 0 auto!important;margin:0!important;padding:0!important;line-height:1!important;font-size:15px!important;letter-spacing:2px!important;white-space:nowrap!important}
html body .product-label .product-content{flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important}
html body .product-label .product-name{margin:0!important;padding:0!important}
html body.single-product .wc-stripe-payment-request-wrapper,html body.single-product .wcpay-payment-request-wrapper,html body.single-product [id*="wc-stripe-payment-request"],html body.single-product .payment-request-button,html body.single-product [class*="express-payment"],html body.single-product [class*="googlepay"],html body.single-product [class*="gpay"],html body.single-product .wc-stripe-payment-request-button-separator{display:none!important}

/* ===== FIN DES BLOCS MIGRES ===== */

/* ===== DERNIERS BLOCS MIGRES =====
 * 23/09/2026 : les derniers blocs de CSS qui s'injectaient encore.
 */

/* --- valthea-minimal (depuis valthea-minimal.php, priorite 99) --- */
/* Titres de sections : sobres, espacés, sans or */
#page .vt .vt-head h2,
#content .vt .vt-head h2,
#main .vt .vt-head h2,
.vt .vt-head h2 {
  font-family: 'Jost', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #6B5328 !important;
  text-align: center !important;
  margin: 0 auto 10px !important;
}
#page .vt .vt-head p,
#content .vt .vt-head p,
.vt .vt-head p {
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: #6B6F76 !important;
  text-align: center !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}
/* Titres internes : routines, associations, coffrets */
#page .vt .vt-body h3,
#content .vt .vt-body h3,
.vt .vt-body h3 {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #6B5328 !important;
}
#page .vt .vt-asso-head h3,
#page .vt .vt-set-body h3,
.vt .vt-asso-head h3,
.vt .vt-set-body h3 {
  font-size: 15px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  color: #6B5328 !important;
}
/* Minimalisme : rien de superflu */
#page .vt *, #content .vt *, .vt * {
  box-shadow: none !important;
  border-radius: 0 !important;
}
#page .vt [class*="vt-"], .vt [class*="vt-"] { border: 0 !important; }
#page .vt .vt-card, #page .vt .vt-set, #page .vt .vt-asso-item,
#page .vt .vt-body, #page .vt .vt-wrap,
.vt .vt-card, .vt .vt-set, .vt .vt-asso-item, .vt .vt-body, .vt .vt-wrap {
  background: transparent !important;
}
#page .vt .vt-sec, .vt .vt-sec { background: transparent !important; padding: 56px 0 !important; }
/* Boutons : trait fin, pas d'aplat or */
#page .vt .vt-btn, #content .vt .vt-btn, .vt .vt-btn {
  background: transparent !important;
  color: #6B5328 !important;
  border-bottom: 1px solid #6B5328 !important;
  padding: 8px 0 !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
#page .vt .vt-btn:hover, .vt .vt-btn:hover { opacity: .6 !important; }
/* Étapes, listes, prix : gris encre */
#page .vt .vt-num, .vt .vt-num { color: #6B5328 !important; font-size: 22px !important; }
#page .vt .vt-step h4, .vt .vt-step h4 { color: #22252B !important; letter-spacing: .16em !important; }
#page .vt .vt-step p, #page .vt .vt-asso-liste, #page .vt .vt-set-body li,
.vt .vt-step p, .vt .vt-asso-liste, .vt .vt-set-body li { color: #6B6F76 !important; }
#page .vt .vt-prix, .vt .vt-prix { color: #6B5328 !important; font-size: 22px !important; }
#page .vt .vt-asso-total, .vt .vt-asso-total { color: #6B6F76 !important; }
#page .vt .vt-caro-nav, .vt .vt-caro-nav { background: transparent !important; color: #6B5328 !important; }

#page .vt, #content .vt, #main .vt, .vt,
#page .vt *, #content .vt *, .vt * {
  font-family: 'Jost', sans-serif !important;
}

/* --- valthea-fond-panier (depuis valthea-minimal.php, priorite 100) --- */
body.woocommerce-cart, body.woocommerce-checkout, body.woocommerce-account,#page, #content, #main, .site-content, .woocommerce, .woocommerce-cart-form,.cart_totals, .checkout, form.checkout, .woocommerce-checkout-review-order{background:#fff!important}body.woocommerce-cart *, body.woocommerce-checkout *{color:#22252B}.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table{background:#fff!important}.woocommerce-cart .product-name a{color:#6B5328!important;font-size:14px!important}

/* --- valthea-faq-contraste (depuis valthea-minimal.php, priorite 101) --- */
.faq-answer, .faq-answer p, .faq-item p, .accordion-content, .accordion-content p,.wpb_text_column .faq-answer, .vc_tta-panel-body, .vc_tta-panel-body p{color:#22252B!important}.faq-question, .faq-question-text, .vc_tta-title-text{color:#6B5328!important}

/* --- valthea-lisibilite (depuis valthea-minimal.php, priorite 106) --- */
'
    /* FAQ et accordeons : plus de texte blanc sur fond clair */
    . '.faq-answer,.faq-answer *,.accordion-content,.accordion-content *,.vc_tta-panel-body,.vc_tta-panel-body *,.wpb_text_column p,.wpb_text_column li,.wpb_text_column span{color:#22252B!important;opacity:1!important}.faq-question,.faq-question *,.vc_tta-title-text,.accordion-header{color:#6B5328!important}'
    /* Rien ne doit etre coupe */
    . '.vt,.vt *{overflow-wrap:break-word!important;word-break:normal!important;max-width:100%!important}.vt-diag,.vt-diag *{overflow:visible!important}.entry-content,.page-content,.wpb_text_column{overflow:visible!important}'
    /* Menu : un mot ne se coupe jamais en deux */
    . '.menu-item,.menu-item a,.nav a,.main-navigation a,.mobile-menu a{white-space:nowrap!important;word-break:keep-all!important;hyphens:none!important}

/* --- valthea-badges (depuis valthea-minimal.php, priorite 107) --- */
.vt-best{display:inline-block;background:#6B5328;color:#fff;font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;margin-bottom:8px}

/* --- vt-newsletter-style (depuis vt-sections.php, priorite 1220) --- */
.vt-newsletter{text-align:center;position:relative;z-index:0;padding-top:56px;padding-bottom:56px}.vt-newsletter::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100vw;background:#FCF8F1;z-index:-1}.vt-newsletter-inutile{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:24px;padding-right:24px;box-sizing:border-box}.vt-newsletter>*{max-width:640px;margin-left:auto;margin-right:auto}.vt-news-form{display:flex;gap:10px;justify-content:center;align-items:stretch;max-width:520px;margin:22px auto 12px;width:100%}.vt-news-form input[type="email"]{flex:1 1 auto;min-width:0;height:48px;padding:0 16px;border:1px solid #d9d2c6;background:#fff;font-size:14px;border-radius:0}.vt-news-form button{flex:0 0 auto;height:48px;padding:0 24px;border:0;border-radius:0;background:#6B5328;color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.vt-news-form button:hover{background:#EDE0CE;color:#6B5328}.vt-news-legal{font-size:12px;opacity:.7;margin:0}.vt-news-merci{font-size:15px;margin:22px 0 12px}@media(max-width:600px){.vt-news-form{flex-direction:column;gap:8px}.vt-news-form button{width:100%}}

/* ===== FIN DERNIERS BLOCS ===== */

/* ============================================================
 * CORRECTIONS HAVIL’OR, placees en tete de fichier le 23/09/2026.
 * Elles etaient en fin de fichier et le navigateur, sur une feuille
 * de plus de 800 Ko, cessait de lire avant d'y arriver.
 * Le selecteur :not(#aucun) ne change pas la cible : il leur rend la
 * priorite que leur position leur retirait.
 * C'est ICI qu'on modifie l'apparence du site, nulle part ailleurs.
 * ============================================================ */

/* ===== BOUTONS DES CARTES PRODUIT =====
 * « Découvrir » etait retombe en simple texte et « Ajouter au panier »
 * en display:none. Leurs regles existaient, mais en fin de feuille,
 * donc jamais lues. Elles sont reprises ici, en tete.
 */
html body:not(#aucun) li.product .vt-actions{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
html body:not(#aucun) li.product .vt-actions a.vt-btn-decouvrir,
html body:not(#aucun) li.product .vt-actions a.vt-btn-panier{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  /* height ne passait pas : 19 px mesures. min-height et padding tiennent. */
  min-height: 42px !important;
  height: auto !important;
  padding: 12px 10px !important;
  line-height: 1.2 !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
html body:not(#aucun) li.product .vt-actions a.vt-btn-decouvrir{
  background: transparent !important;
  color: #6B5328 !important;
  -webkit-text-fill-color: #6B5328 !important;
  border: 1px solid #6B5328 !important;
}
html body:not(#aucun) li.product .vt-actions a.vt-btn-panier{
  background: #6B5328 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid #6B5328 !important;
}
/* ===== FIN BOUTONS CARTES ===== */

/* ===== LE + DES ACCORDEONS, A DROITE =====
 * Un script pose sur .faq-toggle un style inline avec !important :
 * width:100%, max-width:100%, flex:1 1 auto. On ne peut donc pas le
 * retrecir pour le pousser a droite.
 * Le sortir du flux (position:absolute) l'a envoye ailleurs dans la page.
 * direction:rtl aligne son contenu a droite sans changer ni sa largeur
 * ni sa place : le + reste sur sa ligne, cale au bord droit.
 */
html body:not(#aucun) .faq-question .faq-toggle{
  direction: rtl !important;
  text-align: right !important;
}
/* ===== FIN LE + ===== */
/* ===== PHOTO FIXE AU SCROLL =====
 * Sur ordinateur, le bloc photo reste en place pendant qu'on fait defiler
 * la colonne de droite, comme sur kaniwabotanique.com.
 */
@media (min-width: 900px){
  /* Un element sticky plus haut que la fenetre ne colle pas : il defile
     jusqu'a ce que son bas touche le bas de l'ecran. La galerie faisait
     930 px pour une fenetre de 900. Elle tient desormais dans l'ecran. */
  html body:not(#aucun).single .product-images,
  html body:not(#aucun).single .product-gallery,
  html body:not(#aucun).single .woocommerce-product-gallery{
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 120px) !important;
  }
  html body:not(#aucun).single .woocommerce-product-gallery__wrapper,
  html body:not(#aucun).single .woocommerce-product-gallery__image{
    max-height: calc(100vh - 120px) !important;
  }
  html body:not(#aucun).single .woocommerce-product-gallery__image img{
    max-height: calc(100vh - 120px) !important;
    width: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  /* un parent en overflow cache empeche le sticky de fonctionner */
  html body:not(#aucun).single div.product,
  html body:not(#aucun).single .product-type-simple,
  html body:not(#aucun).single .et-product-detail{
    overflow: visible !important;
    align-items: flex-start !important;
  }
}
/* ===== FIN PHOTO FIXE ===== */

/* ===== ETIQUETTES PRODUIT =====
 * Les drapeaux vivent dans .icon et le texte dans .product-content :
 * aucun espace ne les separait, ils se touchaient.
 */
html body:not(#aucun) .product-label{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body:not(#aucun) .product-label .icon{
  flex: 0 0 auto !important;
  margin-right: 2px !important;
  line-height: 1 !important;
}
/* ===== FIN ETIQUETTES ===== */

/* ===== PASTILLE DU DIAGNOSTIC SUR L'IMAGE =====
 * Elle recouvre le logo et le menu des que la place manque.
 * Masquee jusqu'a 991 px : le script de lystes.ai pose display:flex en
 * inline avec !important, qu'aucune feuille ne peut battre, d'ou visibility.
 */
@media (max-width: 991px){
  html body:not(#aucun) #lystes-diagnostic-overlay-btn,
  html body:not(#aucun) button#lystes-diagnostic-overlay-btn{
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ===== FIN PASTILLE ===== */

/* ===== VIGNETTES ET TITRE PRODUIT =====
 * Mesure le 23/09/2026 a 411 px :
 * - les images de vignettes portaient border:1px solid rgba(0,0,0,.3) ;
 * - 16 px seulement entre le bas des vignettes et le titre ;
 * - la bande de vignettes demarrait a -8 px et faisait 424 px de large
 *   pour une fenetre de 411, donc elle depassait.
 */
html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs li,
html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs img,
html body:not(#aucun) .flex-control-thumbs li,
html body:not(#aucun) .flex-control-thumbs li img{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  /* les images portaient un background gris rgb(170,170,170) qui debordait */
  background: transparent !important;
  background-color: transparent !important;
}
html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs{
  margin-bottom: 34px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 991px){
  html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* Le titre touchait le bas de l'image produit. */
html body:not(#aucun).single .entry-summary h1,
html body:not(#aucun).single .product_title,
html body:not(#aucun).single .summary h1{
  margin-top: 40px !important;
  padding-top: 0 !important;
}
html body:not(#aucun).single .woocommerce-product-gallery{
  margin-bottom: 28px !important;
}
/* ===== FIN VIGNETTES ===== */

/* ===== GALERIE PRODUIT : vignettes a gauche de la photo =====
 * Mesure le 23/09/2026 sur kaniwabotanique.com : les vignettes portent
 * margin-left: -90px, ce qui les sort de la photo au lieu de les poser dessus.
 * Havil’Or a exactement 90 px de libre a gauche de sa galerie, le meme retrait convient.
 * Sans cela, la pastille du diagnostic recouvre la premiere vignette.
 */

@media (min-width:992px){html body:not(#aucun).single .woocommerce-product-gallery .flex-control-thumbs{margin:0 0 0 -90px !important}
}
@media (max-width:767px){html body:not(#aucun) #lystes-diagnostic-overlay-btn{visibility:hidden !important;pointer-events:none !important}
}

/* ===== FIN GALERIE ===== */

/* ===== FOOTER : proportions de kaniwabotanique.com =====
 * Mesure le 23/09/2026 sur kaniwabotanique.com a 1440 px :
 * colonne 1 = 401 px, colonnes 2 et 3 = 219 px, colonne 4 = 323 px.
 * Structure de Havil’Or : la rangee porte la colonne 1 et un bloc .other-columns
 * qui contient une rangee imbriquee avec les colonnes 2 a 4.
 * Les fractions compensent les trois gouttieres de 56 px propres a Havil’Or.
 */

html body:not(#aucun) #colophon .footer-widgets .other-columns{display:block !important;padding-left:0 !important;padding-right:0 !important}
@media (min-width:992px){html body:not(#aucun) #colophon .footer-widgets .container > .row{display:grid !important;grid-template-columns:384fr 840fr !important}
html body:not(#aucun) #colophon .footer-widgets .other-columns > .row{display:grid !important;grid-template-columns:210fr 210fr 309fr !important;gap:56px !important}
}
@media (min-width:768px) and (max-width:991px){html body:not(#aucun) #colophon .footer-widgets .container > .row{display:grid !important;grid-template-columns:1fr !important;gap:40px !important}
html body:not(#aucun) #colophon .footer-widgets .other-columns > .row{display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:32px !important}
}
@media (max-width:767px){html body:not(#aucun) #colophon .footer-widgets .container > .row,html body:not(#aucun) #colophon .footer-widgets .other-columns > .row{display:grid !important;grid-template-columns:1fr !important;gap:28px !important}
}
html body:not(#aucun) #colophon .footer-widgets,html body:not(#aucun) #colophon .footer-widgets p,html body:not(#aucun) #colophon .footer-widgets li,html body:not(#aucun) #colophon .footer-widgets h3,html body:not(#aucun) #colophon .footer-widgets .widget{text-align:left !important}
html body:not(#aucun) #colophon .footer-widgets h3,html body:not(#aucun) #colophon .footer-widgets .widget-title,html body:not(#aucun) #colophon .footer-widgets .widgettitle{font-size:15px !important;font-weight:700 !important;letter-spacing:.02em !important;text-transform:uppercase !important;line-height:1.35 !important;margin:0 0 14px !important}
html body:not(#aucun) #colophon .vt-reseaux{display:flex !important;gap:16px !important;margin-top:20px !important}
html body:not(#aucun) #colophon .vt-reseaux a{display:inline-flex !important;width:24px !important;height:24px !important;align-items:center !important;justify-content:center !important;opacity:.85 !important}
html body:not(#aucun) #colophon .vt-reseaux a:hover{opacity:1 !important}
html body:not(#aucun) #colophon .vt-reseaux svg{width:20px !important;height:20px !important;stroke:currentColor !important;fill:none !important;stroke-width:1.5 !important}

/* ===== FIN FOOTER ===== */

/* ===== FICHE PRODUIT : accordeons et widget =====
 * Mesure le 23/09/2026 a 375 px.
 */

html body:not(#aucun).single .faq-question{display:flex !important;align-items:center !important;justify-content:space-between !important}
html body:not(#aucun).single .faq-question .faq-question-text{flex:1 1 auto !important;width:auto !important;text-align:left !important}
html body:not(#aucun).single .faq-question .faq-toggle{flex:0 0 auto !important;width:auto !important;min-width:0 !important;margin-left:auto !important;text-align:right !important}
@media (max-width:767px){html body:not(#aucun) #lystes-product-chat .lystes-btn-label{white-space:nowrap !important}
html body:not(#aucun) #lystes-product-chat .lystes-chat-right-actions{gap:6px !important}
html body:not(#aucun) #lystes-product-chat .lystes-mic-btn,html body:not(#aucun) #lystes-product-chat .lystes-call-btn{width:20px !important;height:20px !important}
html body:not(#aucun) #lystes-product-chat .lystes-mic-btn svg,html body:not(#aucun) #lystes-product-chat .lystes-call-btn svg{width:12px !important;height:12px !important}
html body:not(#aucun) #lystes-product-chat .lystes-send-btn{width:22px !important;height:22px !important}
}

/* ===== FIN FICHE PRODUIT ===== */

/* ===== ACCUEIL : le vide sous la video =====
 * Mesure le 23/09/2026 a 375 px : Slider Revolution place le module en absolu et
 * reserve sa hauteur avec un bloc vide <rs-fw-forcer> de 752 px, alors que le
 * slider n'en fait que 601. D'ou 151 px de blanc, plus le padding de la section.
 * Le module reprend sa place dans le flux, le bloc de reservation ne sert plus.
 * On ne touche a aucun calque : ni rs-layer, ni rs-slide, ni rs-sbg.
 */

html body:not(#aucun).home rs-module-wrap{position:relative !important}
html body:not(#aucun).home rs-fw-forcer{display:none !important}

/* ===== FIN ACCUEIL ===== */

/* ===== CARTES D'AVIS : texte centre sur toutes les lignes =====
 * Mesure le 23/09/2026 : la carte portait text-align:left avec
 * text-align-last:center. La derniere ligne etait donc centree et les
 * precedentes collees a gauche : 24 px a gauche contre 41 a droite sur la
 * premiere ligne, pour 42/42 sur la seconde. Toutes les lignes sont centrees.
 */

html body:not(#aucun) .vt-carte-avis,html body:not(#aucun) .vt-carte-avis p,html body:not(#aucun) .vt-carte-avis .vt-avis-txt,html body:not(#aucun) .vt-carte-avis .vt-avis-titre,html body:not(#aucun) .vt-carte-avis .vt-etoiles{text-align:center !important;text-align-last:center !important;text-indent:0 !important}
html body:not(#aucun) .vt-carte-avis .vt-avis-tete{display:flex !important;justify-content:center !important;align-items:center !important}

/* ===== FIN CARTES D'AVIS ===== */

/* ===== REASSURANCE ET ETOILES =====
 * Mesure le 23/09/2026.
 * 1. « Paiement securise » tombait sur deux lignes quand les trois autres
 *    titres tenaient sur une : 66 px de texte pour un bloc de 129 px.
 * 2. L'ecart entre l'icone et le titre valait 0 px.
 * 3. Dans les cartes d'avis, un <span class="vt-ini"> vide occupait la gauche
 *    et poussait les etoiles de 38 px : 114 px a gauche contre 76 a droite.
 */

html body:not(#aucun) .vt-section-reassurance h3,html body:not(#aucun) .vt-section-reassurance h4,html body:not(#aucun) .vt-section-reassurance .vt-rea-titre{white-space:nowrap !important;letter-spacing:1.1px !important;padding-top:12px !important}
html body:not(#aucun) .vt-section-reassurance .vt-ligne svg,html body:not(#aucun) .vt-section-reassurance svg,html body:not(#aucun) .vt-section-reassurance img{margin-bottom:10px !important}
html body:not(#aucun) .vt-carte-avis .vt-ini:empty{display:none !important}
html body:not(#aucun) .vt-carte-avis .vt-avis-tete > div{width:100% !important}

/* ===== FIN REASSURANCE ===== */

/* ===== CARTES AVANT / APRES =====
 * Mesure le 23/09/2026 : le nom etait a 51 px du bord gauche et 104 du droit,
 * soit 53 px d'ecart, quand le reste de la carte etait centre.
 */

html body:not(#aucun) .vt-carte-ba,html body:not(#aucun) .vt-carte-ba p,html body:not(#aucun) .vt-carte-ba .vt-ba-nom,html body:not(#aucun) .vt-carte-ba .vt-ba-lieu,html body:not(#aucun) .vt-carte-ba .vt-ba-cat,html body:not(#aucun) .vt-carte-ba .vt-ba-res{text-align:center !important;text-align-last:center !important}

/* ===== FIN AVANT / APRES ===== */

/* ===== SECTION BIENFAITS =====
 * Mesure le 23/09/2026 : les pastilles etaient bien centrees dans leur bloc
 * (ecart 0), mais la grille donnait 158,5 px a la colonne de gauche contre
 * 171,5 a celle de droite, d'ou l'impression de decalage.
 * L'intro n'avait que 20 px sous elle avant la premiere pastille.
 */

html body:not(#aucun) .vt-grille-4{display:grid !important;grid-template-columns:1fr 1fr !important;gap:24px 14px !important}
@media (min-width:992px){html body:not(#aucun) .vt-grille-4{grid-template-columns:1fr 1fr 1fr 1fr !important}
}
html body:not(#aucun) .vt-bloc .vt-intro{padding-bottom:22px !important;margin-bottom:20px !important}

/* ===== FIN BIENFAITS ===== */

/* ===== SECTION CONCEPT =====
 * Mesure le 23/09/2026 : 61 px entre le sur-titre « Concept » et le titre
 * (margin-top de 35 px sur le titre), et 84 px sous le paragraphe
 * (26 px de marge plus 58 px de padding de section).
 */

html body:not(#aucun) .section-concept-ed64{padding-top:34px !important;padding-bottom:32px !important}
html body:not(#aucun) .section-concept-ed64 h1,html body:not(#aucun) .section-concept-ed64 h2,html body:not(#aucun) .section-concept-ed64 h3{margin-top:12px !important;margin-bottom:20px !important}
html body:not(#aucun) .section-concept-ed64 p:last-of-type{margin-bottom:0 !important}

/* ===== FIN CONCEPT ===== */

/* ===== POLICES DU PIED DE PAGE =====
 * Mesure le 23/09/2026 : les titres du pied de page sortaient en « Krona One »,
 * la police par defaut du theme pour les widgets, alors que les titres du site
 * sont en Welcomeweb-Bold et le texte courant en futuralightbt. Un script les
 * repeignait en inline ; il a ete retire, la police du theme est reapparue.
 * Elle est donc posee ici, une fois, au meme endroit que le reste.
 */

html body:not(#aucun) #colophon .footer-widgets h3,html body:not(#aucun) #colophon .footer-widgets .widget-title,html body:not(#aucun) #colophon .footer-widgets .widgettitle,html body:not(#aucun) #colophon .footer-bar h3{font-family:Welcomeweb-Bold,'Welcome web',futura,sans-serif !important}
html body:not(#aucun) #colophon .footer-widgets p,html body:not(#aucun) #colophon .footer-widgets li,html body:not(#aucun) #colophon .footer-widgets a,html body:not(#aucun) #colophon .footer-bar,html body:not(#aucun) #colophon .footer-bar *{font-family:futuralightbt,'Jost',sans-serif !important}

/* ===== FIN POLICES ===== */

/* ===== CROIX DE FERMETURE DU PANIER =====
 * Mesure le 23/09/2026 : la croix .et-close est faite de deux barres de
 * 18 x 1 px en ::before et ::after, dont le background-color valait #FCF8F1,
 * un beige quasi blanc pose sur un fond blanc. Elle etait invisible.
 */

html body:not(#aucun) .et-close::before,html body:not(#aucun) .et-close::after,html body:not(#aucun) a.et-close::before,html body:not(#aucun) a.et-close::after{background-color:#22252B !important;height:2px !important;opacity:1 !important}
html body:not(#aucun) .et-close:hover::before,html body:not(#aucun) .et-close:hover::after{background-color:#000000 !important}

/* ===== FIN CROIX ===== */


/* ===== TROIS CENTRAGES =====
 * 1. Le nom des cartes avant/apres vit dans un <p> en display:flex :
 *    text-align n'y fait rien, c'est justify-content qui centre.
 *    Mesure : 61 px a gauche contre 114 a droite.
 * 2. La mention legale sous la newsletter etait a gauche quand tout
 *    le bloc est centre.
 * 3. L'icone Instagram avait 20 px de marge haute, trop pour ce bloc.
 */
html body:not(#aucun) .vt-carte-ba p{
  justify-content: center !important;
}
html body:not(#aucun) .vt-news-legal{
  text-align: center !important;
}
html body:not(#aucun) #colophon .vt-reseaux{
  margin-top: 8px !important;
  /* l'icone etait decalee a droite du texte et trop grande */
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body:not(#aucun) #colophon .vt-reseaux a{
  width: 18px !important;
  height: 18px !important;
  margin-left: 0 !important;
  padding: 0 !important;
}
html body:not(#aucun) #colophon .vt-reseaux svg{
  width: 17px !important;
  height: 17px !important;
}
/* ===== FIN TROIS CENTRAGES ===== */

/* Le champ e-mail de la newsletter etait en capitales. */
html body:not(#aucun) .vt-news-form input[type=email],
html body:not(#aucun) .vt-news-form input[type=email]::placeholder,
html body:not(#aucun) .vt-newsletter input[type=email],
html body:not(#aucun) .vt-newsletter input[type=email]::placeholder{
  text-transform: none !important;
}

/* ===== SECTION CONCEPT SUR TABLETTE =====
 * Mesure a 1024 px : la section portait 80 px de marge de chaque cote,
 * et 32 px entre le sur-titre « Concept » et le titre.
 */
@media (min-width: 768px) and (max-width: 1199px){
  html body:not(#aucun) .section-concept-ed64{
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
html body:not(#aucun) .section-concept-ed64 h1,
html body:not(#aucun) .section-concept-ed64 h2,
html body:not(#aucun) .section-concept-ed64 h3{
  margin-top: 2px !important;
}
/* ===== FIN CONCEPT TABLETTE ===== */


/* ====================================================================
   DEMANDES DU 23/09 AU SOIR
   ==================================================================== */

/* LE « + » DES ACCORDEONS, A DROITE.
   Demande dix fois par JP. Aucune regle CSS ne gagnait : le bloc JavaScript
   vt-faq-js selectionnait [class*="faq"], ce qui attrape .faq-toggle, et lui
   posait width:100% !important en inline. Un style inline !important bat
   toutes les feuilles. Le « + » s'etalait sur 124 px et tombait au milieu.
   Le bloc JS a ete retire de valthea-boutique.php le 23/09. Ici on ne fait
   que nommer le resultat voulu : la boite du « + » epouse le glyphe et se
   colle a droite. Mesure avant : glyphe a 189 px, ligne finissant a 321. */
html body:not(#aucun) .faq-question{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body:not(#aucun) .faq-question .faq-toggle{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  direction: ltr !important;
  text-align: right !important;
  margin-left: auto !important;
}

/* LES VIGNETTES SOUS LA PHOTO, EN CARROUSEL (mobile et tablette).
   Elles etaient en position:absolute, posees PAR-DESSUS la photo, et
   debordaient en deux rangees. JP : « je veux que ce soit en dessous de la
   photo, pas au-dessus, sous forme de carrousel ». En position:static elles
   reprennent leur place dans le flux, donc apres la photo, puisque l'element
   suit deja la galerie dans le HTML. */
@media (max-width: 991px){
  html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs{
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    padding: 0 0 4px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{
    display: none;
  }
  html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs li{
    flex: 0 0 72px !important;
    width: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    scroll-snap-align: start;
  }
  html body:not(#aucun) .woocommerce-product-gallery .flex-control-thumbs li img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    cursor: pointer;
  }
}

/* LE TEXTE DE LA GARANTIE, A GAUCHE SUR MOBILE.
   Les deux paragraphes du bloc garantie etaient centres, ce qui donne des
   lignes en escalier sur une colonne etroite. */
@media (max-width: 991px){
  html body:not(#aucun) .custom-money-back-guarantee p,
  html body:not(#aucun) .custom-guarantee-content p,
  html body:not(#aucun) .custom-guarantee-text p,
  html body:not(#aucun) .custom-guarantee-text{
    text-align: left !important;
  }
}

/* ====================================================================
   FOOTER : LES QUATRE COLONNES SUR TOUTE LA LARGEUR
   ====================================================================
   Les colonnes etaient tassees sur la moitie gauche, avec 538 px de vide
   a droite. La grille du footer declarait QUATRE pistes (189 568 189 189)
   alors qu'elle ne contient que DEUX enfants : la colonne de marque, et un
   bloc .other-columns qui porte les trois autres dans une .row imbriquee.
   Les deux dernieres pistes restaient donc vides.
   Mesure apres : grille 310 / 930, colonnes internes 279 279 279, et le
   vide a droite tombe de 538 px a 15 px. */
@media (min-width: 992px){
  html body:not(#aucun) .footer-widgets .container > .row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    gap: 40px !important;
  }
  html body:not(#aucun) .footer-widgets .other-columns{
    width: 100% !important;
    max-width: none !important;
  }
  html body:not(#aucun) .footer-widgets .other-columns > .row{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
  }
  html body:not(#aucun) .footer-widgets .other-columns > .row > *{
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* ====================================================================
   ICONES DES RESEAUX SOCIAUX
   ====================================================================
   Une seule icone Instagram, de 18 px, alors que trois comptes sont
   declares en base. Facebook et TikTok ajoutes dans le widget le 23/09.
   Ici on ne fait que les rendre lisibles : 22 px, alignees, avec un ecart
   qui les separe du paragraphe au-dessus. */
html body:not(#aucun) .vt-reseaux{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 18px !important;
}
html body:not(#aucun) .vt-reseaux a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: inherit;
  opacity: .85;
  transition: opacity .2s ease;
}
html body:not(#aucun) .vt-reseaux a:hover{ opacity: 1; }
html body:not(#aucun) .vt-reseaux svg{
  width: 22px !important;
  height: 22px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* `width` ne gagnait pas sur ces deux elements, `min-width` oui : mesure du
   23/09, le svg restait a 17 px malgre width:22px !important, et passe a 24 px
   avec min-width. Une declaration de largeur peut etre ignoree la ou une
   contrainte minimale s'applique. */
html body:not(#aucun) .vt-reseaux a{
  flex: 0 0 24px !important;
  min-width: 24px !important; /* voir note */
  min-height: 24px !important;
}
html body:not(#aucun) .vt-reseaux svg{
  min-width: 24px !important;
  min-height: 24px !important;
}

/* ====================================================================
   PAS DE DEGRADE QUI EFFACE LA FIN DU TEXTE
   ====================================================================
   .description-inner portait un masque en degrade : la derniere ligne
   de la description, « Actifs cles : ... », disparaissait dans le blanc. */
html body:not(#a):not(#b) .description-inner,
html body:not(#a):not(#b) .woocommerce-product-details__long-description .description-inner{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* ====================================================================
   PAS DE PASTILLE SUR LA PHOTO DU PRODUIT
   ====================================================================
   La pastille « Faire mon diagnostic peau » se posait en haut a gauche,
   par-dessus la photo. Le diagnostic reste accessible par la barre du
   bas et par le menu. */
html body:not(#a):not(#b) #lystes-diagnostic-overlay-btn,
html body:not(#a):not(#b) button#lystes-diagnostic-overlay-btn{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ====================================================================
   LA PAGE NE DOIT PAS DEFILER LATERALEMENT
   ====================================================================
   Mesure du 24/09/2026 a 390 px : 8 px de debordement a droite, venant
   des colonnes du pied de page. */
@media (max-width: 991px){
  html body:not(#a):not(#b) .footer-widgets .row,
  html body:not(#a):not(#b) .footer-widgets .other-columns > .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}
html:not(#a), body:not(#a){ overflow-x: hidden !important; }

/* ====================================================================
   LE FOOTER SUR TOUTE LA LARGEUR
   ====================================================================
   La grille declarait QUATRE pistes pour DEUX enfants : 538 px de vide
   a droite. Mesure apres : vide a droite = 0. */
@media (min-width: 992px){
  html body:not(#aucun) .footer-widgets .container > .row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    gap: 40px !important;
  }
  html body:not(#aucun) .footer-widgets .other-columns{
    width: 100% !important; max-width: none !important;
  }
  html body:not(#aucun) .footer-widgets .other-columns > .row{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important; width: 100% !important;
  }
}
html body:not(#aucun) .vt-reseaux{
  display: flex !important; align-items: center !important;
  gap: 14px !important; margin-top: 16px !important;
}
html body:not(#aucun) .vt-reseaux a{
  flex: 0 0 17px !important; min-width: 17px !important; min-height: 17px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
html body:not(#aucun) .vt-reseaux svg{
  width: 17px !important; height: 17px !important;
  min-width: 17px !important; min-height: 17px !important;
  fill: none; stroke: currentColor; stroke-width: 1.4;
}

/* ====================================================================
   LE BANDEAU DE BIENVENUE
   ====================================================================
   Anthracite sur blanc : rapport de contraste 13,9:1, tres au-dessus du
   minimum de 4,5:1. Hauteur fixe pour que rien ne saute au chargement. */
html body:not(#a):not(#b) .vt-bandeau{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #22252b !important;
  color: #ffffff !important;
  padding: 10px 44px 10px 16px !important;
  position: relative !important;
  text-align: center !important;
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
}
html body:not(#a):not(#b) .vt-bandeau strong{
  color: #EDE0CE !important;
  font-weight: 600 !important;
}
html body:not(#a):not(#b) .vt-bandeau-fermer{
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  min-width: 34px !important;
  min-height: 34px !important;
}
html body:not(#a):not(#b) .vt-bandeau--ferme{ display: none !important; }
@media (max-width: 520px){
  html body:not(#a):not(#b) .vt-bandeau{
    font-size: 11px !important;
    padding: 9px 40px 9px 12px !important;
  }
}

/* ====================================================================
   UNE SEULE BARRE EN HAUT DE PAGE
   ====================================================================
   Mesure du 24/09/2026 : deux barres se superposaient, 37 px + 49 px, en
   deux bleus differents. Celle du theme porte desormais les deux messages,
   dans le bleu de la charte ; l'autre est masquee. */
html body:not(#a):not(#b) .vt-bandeau-livraison{
  display: none !important;
}
html body:not(#a):not(#b) .vt-bandeau{
  background: #6B5328 !important;
  font-family: 'Jost', sans-serif !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  padding: 9px 44px 9px 16px !important;
}
html body:not(#a):not(#b) .vt-bandeau strong{
  color: #EDE0CE !important;
  letter-spacing: .12em !important;
}
@media (max-width: 520px){
  html body:not(#a):not(#b) .vt-bandeau{
    font-size: 9.5px !important;
    letter-spacing: .08em !important;
    padding: 8px 38px 8px 12px !important;
  }
}

/* ====================================================================
   LE HERO SUR MOBILE
   ====================================================================
   Mesure du 24/09/2026 a 375 px, AVANT : rectangle noir vide de 601 px,
   image jamais chargee, titre a letter-spacing -3,125 px et width 0 px
   (donc une lettre par ligne, 1011 px de haut), bouton de 512 px de large
   sur un ecran de 375, trois calques empiles entre 302 et 323 px.

   Les positions sont ancrees par le BAS : un titre plus long grandit vers
   le haut au lieu de pousser le bouton hors du cadre. Utile pour les
   traductions, qui sont plus longues que le francais. */
@media (max-width: 767px){

  html body:not(#a):not(#b) rs-module#rev_slider_1_1,
  html body:not(#a):not(#b) rs-module-wrap#rev_slider_1_1_wrapper,
  html body:not(#a):not(#b) rs-slides,
  html body:not(#a):not(#b) rs-slide{
    height: 500px !important;
    min-height: 500px !important;
  }

  /* l'image restait en data-lazyload : on la pose nous-memes */
  html body:not(#a):not(#b) rs-sbg{
    background-image: url('/wp-content/uploads/revslider/video-media/7332185-hd_1920_1080_25fps_1.jpeg') !important;
    background-size: cover !important;
    background-position: 50% 35% !important;
    opacity: 1 !important;
  }

  html body:not(#a):not(#b) rs-slide > rs-layer-wrap{
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    transform: none !important;
    top: auto !important;
  }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(2){ bottom: 148px !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(3){ bottom: 92px !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(4){ display: none !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(5){ bottom: 34px !important; }

  html body:not(#a):not(#b) rs-slide rs-layer,
  html body:not(#a):not(#b) rs-slide rs-layer[id]{
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left !important;
    margin: 0 !important;
    padding-top: 0 !important;
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
  }

  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-0{
    font-size: 23px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
  }
  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-1{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .2em !important;
  }
  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-4{
    font-size: 11px !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    padding: 13px 22px !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
  }
}

/* ====================================================================
   LE BOUTON DU DIAPORAMA
   ====================================================================
   24/09/2026. Deux blocs JavaScript se battaient pour sa couleur : l'un
   posait le dore, l'autre le bleu avec un observateur qui le reposait en
   continu. Le bleu gagnait, alors que les reglages du slider disent
   #EDE0CE. Les deux blocs sont retires ; la couleur vit ici. */
html body:not(#a):not(#b) .rev-btn,
html body:not(#a):not(#b) a.rev-btn,
html body:not(#a):not(#b) rs-layer.rev-btn,
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-4{
  background: #EDE0CE !important;
  background-color: #EDE0CE !important;
  color: #6B5328 !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  padding: 14px 26px !important;
}
html body:not(#a):not(#b) .rev-btn *,
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-4 *{
  color: #6B5328 !important;
}
html body:not(#a):not(#b) .rev-btn:hover,
html body:not(#a):not(#b) a.rev-btn:hover{
  background-color: #e2d2ba !important;
  color: #6B5328 !important;
}
@media (max-width: 820px){
  html body:not(#a):not(#b) .rev-btn,
  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-4{
    font-size: 10px !important;
    padding: 11px 18px !important;
  }
}

/* ====================================================================
   LE HERO SUR ORDINATEUR
   ====================================================================
   Mesure a 1600 px AVANT : titre a 20 px, soit plus petit que les 23 px du
   mobile, sur 195 px de large ; sous-titre en display:none. Demande de JP
   le 24/09 : meme police que sur mobile, et le sous-titre partout.
   Ancrage par le bas, comme sur mobile. */
@media (min-width: 768px){

  html body:not(#a):not(#b) rs-slide > rs-layer-wrap{
    transform: none !important;
    top: auto !important;
  }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(2){ bottom: 290px !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(3){ bottom: 245px !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(4){ display: none !important; }
  html body:not(#a):not(#b) rs-slide > rs-layer-wrap:nth-child(5){ bottom: 191px !important; }

  html body:not(#a):not(#b) rs-slide rs-layer{
    white-space: normal !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-0{
    font-size: 44px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
    max-width: 620px !important;
  }
  /* le sous-titre etait masque sur ordinateur */
  html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-1{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
  }
}

/* ====================================================================
   LES CARTES PRODUIT SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : grille de 290 px posee a x=41, cartes de 59 px
   dans des colonnes de 126, et surtout les avatars du widget diagnostic
   gonfles a 1268 x 1614 px au milieu de chaque carte. APRES : grille 340,
   cartes 163, photos 161 x 161, 14 px entre la photo et le titre. */
@media (max-width: 767px){

  /* le conteneur gardait 25 px de marge interne de chaque cote */
  html body:not(#a):not(#b) .woocommerce.columns-4,
  html body:not(#a):not(#b) div.woocommerce[class*="columns-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body:not(#a):not(#b) ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body:not(#a):not(#b) ul.products li.product{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  html body:not(#a):not(#b) ul.products li.product .product-inner{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* la PHOTO du produit, et elle seule : le widget diagnostic pose ses
     propres images dans la meme carte */
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail{
    width: 100% !important;
    margin: 0 0 14px !important;
    display: block !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a > img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* les avatars du widget : 25 x 27 px annonces, 1268 x 1614 obtenus */
  html body:not(#a):not(#b) .lystes-avatars,
  html body:not(#a):not(#b) .lystes-archive-tryon-inner{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 40px !important;
  }
  html body:not(#a):not(#b) .lystes-avatars img{
    width: 25px !important;
    max-width: 25px !important;
    height: 27px !important;
    max-height: 27px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }

  /* tout le texte de la carte est centre, y compris le prix */
  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2,
  html body:not(#a):not(#b) ul.products li.product h3{
    width: 100% !important;
    margin: 0 0 8px !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }
  html body:not(#a):not(#b) ul.products li.product .price{
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    text-align: center !important;
  }
  html body:not(#a):not(#b) ul.products li.product .button,
  html body:not(#a):not(#b) ul.products li.product .add_to_cart_button{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
}

/* ====================================================================
   LE TITRE DU HERO EST BLANC DES LA PREMIERE IMAGE
   ====================================================================
   Slider Revolution pose color:#fff en inline depuis son JavaScript, donc
   apres le premier rendu : le titre s'affichait NOIR sur la photo pendant
   une a deux secondes. La couleur est posee ici, en CSS. */
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-0,
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-1,
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-0 *,
html body:not(#a):not(#b) rs-layer#slider-1-slide-1-layer-1 *{
  color: #ffffff !important;
}


/* ====================================================================
   LE MENU MOBILE TIENT DANS L'ECRAN
   ====================================================================
   Mesure a 375 x 812 AVANT : 20 px de police, 14 px de marge haut et bas,
   soit 62 px par entree. Neuf entrees plus l'entete depassaient l'ecran, et
   la barre « Faire mon diagnostic peau » passait devant le menu (z-index
   604 contre celui de la barre). */
@media (max-width: 991px){

  html body:not(#a):not(#b) .side-mobile-menu,
  html body:not(#a):not(#b) .side-panel.side-menu{
    z-index: 100000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* le voile du panneau reste juste dessous */
  html body:not(#a):not(#b) .side-panel-overlay,
  html body:not(#a):not(#b) .panel-overlay{
    z-index: 99998 !important;
  }

  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b) .side-mobile-menu .sliding-menu-panel > li > a,
  html body:not(#a):not(#b) .mobile-menu .sliding-menu-panel li a{
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .1em !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel > li.menu-item,
  html body:not(#a):not(#b) .side-mobile-menu .sliding-menu-panel > li{
    margin: 0 !important;
  }
  /* la barre de diagnostic ne doit pas couvrir la derniere entree */
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel{
    padding-bottom: 80px !important;
  }
}

/* ====================================================================
   LES CARTES PRIORITE SONT A LA MEME HAUTEUR
   ====================================================================
   Mesure AVANT : « Tiraillements, inconfort » tenait sur une ligne (19 px)
   quand les trois autres sous-titres en prenaient deux (37 px). Le titre
   « Hydratation » etait donc 19 px plus bas que « Eclat ». Le texte a ete
   allonge, et deux lignes sont reservees ici pour que les traductions,
   plus courtes, ne redecalent pas les titres. */
html body:not(#a):not(#b) .vt-besoin-sous,
html body:not(#a):not(#b) .besoin-sous,
html body:not(#a):not(#b) .vt-carte-sous{
  min-height: 2.8em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ====================================================================
   LE BOUTON QUI MET LE PRODUIT AU PANIER
   ====================================================================
   Mesure du 24/09/2026 AVANT : fond rgb(24,24,24), texte rgb(34,37,43),
   contraste 1,16:1, hauteur 11 px, marge interne 0. Invisible et ecrase :
   aucun achat possible depuis la fiche produit. APRES : noir plein, texte
   blanc, 15,3:1, 52 px de haut. */
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) form.cart button[type="submit"]{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 13px 20px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button *,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button:hover{
  background-color: #22252b !important;
  color: #ffffff !important;
}

/* ====================================================================
   LE BOUTON D'ACHAT PREND TOUTE LA LARGEUR SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : bouton de 282 px pose a x=39. Son conteneur
   `.et-wishlist-div-open` faisait lui-meme 282 px : c'est lui qui bridait,
   pas le bouton. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open,
  html body:not(#a):not(#b):not(#c) form.cart,
  html body:not(#a):not(#b):not(#c) .summary form.cart,
  html body:not(#a):not(#b):not(#c) .entry-summary form.cart{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .summary,
  html body:not(#a):not(#b):not(#c) .entry-summary,
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ====================================================================
   LE SELECTEUR DE QUANTITE SUIT LE BOUTON D'ACHAT
   ====================================================================
   Mesure a 381 px AVANT : `.quantity` faisait 104 x 104, un carre pose a
   gauche, quand le bouton juste en dessous faisait 346 x 46. Deux elements
   qui se suivent doivent partager leur largeur et leur hauteur. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) form.cart .quantity,
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open .quantity{
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity input.qty{
    height: 44px !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity .minus svg,
  html body:not(#a):not(#b):not(#c) form.cart .quantity .plus svg{
    width: 14px !important;
    height: 14px !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="minus"],
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="plus"]{
    height: 44px !important;
    min-height: 0 !important;
    width: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}

/* ====================================================================
   LE BOUTON « FAIRE UN DIAGNOSTIC » DU WIDGET
   ====================================================================
   Mesure du 24/09/2026 AVANT : libelle rgb(34,37,43) sur fond rgb(0,0,0),
   contraste 1,37:1, police 7 px. Illisible. APRES : blanc sur noir, 21:1,
   11 px. Le fond du bouton est noir : son texte doit etre blanc, pas
   l'anthracite herite du theme. */
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn *,
html body:not(#a):not(#b):not(#c) .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) .lystes-btn-label{
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn{
  min-height: 34px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ====================================================================
   LES CERTIFICATIONS DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 375 px AVANT : huit pictogrammes de 120 x 120 empiles, 960 px
   de haut, soit huit ecrans a parcourir. APRES : une ligne qui defile au
   doigt, 78 px de haut. */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  padding: 4px 0 10px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* la barre de defilement decalerait les pictogrammes */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > *{
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (min-width: 768px){
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    gap: 26px !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
}

/* ====================================================================
   LES PHOTOS DU PRODUIT DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 381 px AVANT : galerie de 1619 px de haut, trois photos de
   378 x 502 empilees. APRES : une seule photo a l'ecran, les autres a
   cote, avec accrochage au glissement. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images,
  html body:not(#a):not(#b):not(#c) .product-gallery-inner .product-images,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* la barre de defilement ajouterait une bande grise sous les photos */
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images::-webkit-scrollbar,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper::-webkit-scrollbar{
    height: 0 !important;
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images{
    scrollbar-width: none !important;
  }

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > *,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper > *{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > * img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* les vignettes restent sous la photo, sur une ligne */
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails,
  html body:not(#a):not(#b):not(#c) .product-gallery-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    position: static !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails img{
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    flex: 0 0 58px !important;
    cursor: pointer !important;
  }
}

/* ====================================================================
   LA BARRE FLOTTANTE « FAIRE MON DIAGNOSTIC PEAU »
   ====================================================================
   Mesure du 24/09/2026 AVANT : texte rgb(255,255,255) sur fond
   rgb(255,255,255), contraste 1:1. Invisible. Le fond de cette barre est
   blanc, contrairement au bouton noir du meme widget : son texte doit
   donc etre fonce, pas blanc. */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text,
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text *{
  color: #22252b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
/* le bouton rond a droite reste noir : son icone garde le blanc */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="send"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="arrow"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="submit"]{
  color: #ffffff !important;
}

/* ====================================================================
   L'ECHELLE D'ESPACEMENT DE LA FICHE PRODUIT
   ====================================================================
   Audit du 24/09/2026 a 375 px AVANT : ecarts de 7, 8, 14, 32 et 52 px
   entre les blocs ; marges de 2, 6 et 9 px sous des titres de meme rang ;
   titres H3 en 12, 14 et 15 px. Aucune de ces valeurs ne suivait de regle.
   APRES : une echelle de 8, et une seule valeur par role. */
@media (max-width: 767px){

  /* le titre, le prix et la description : 16 px entre chacun */
  html body:not(#a):not(#b):not(#c) .et-pro-summary-top > *{
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  html body:not(#a):not(#b):not(#c) .et-pro-summary-top > *:last-child{
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .et-pro-summary-top h1.product_title{
    margin-bottom: 12px !important;
  }

  /* entre les deux moities du resume : 24 px */
  html body:not(#a):not(#b):not(#c) .summary.entry-summary > .et-pro-summary-top{
    margin-bottom: 24px !important;
  }

  /* les blocs du bas du resume : 16 px, sauf la mention du widget qui
     appartient au bloc juste au-dessus et reste a 8 */
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content > *{
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content > .lystes-glow-wrapper{
    margin-top: 24px !important;
    margin-bottom: 8px !important;
  }
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content > .lystes-branding-outside{
    margin-bottom: 24px !important;
  }

  /* un seul rang de titre de section : 15 px, 8 px dessous */
  html body:not(#a):not(#b):not(#c) .summary h3,
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content h3,
  html body:not(#a):not(#b):not(#c) .vt-certifs-bloc h3{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  /* les encarts de reassurance : 8 px entre eux, 16 px avant et apres */
  html body:not(#a):not(#b):not(#c) form.cart > .vt-reassurance-item,
  html body:not(#a):not(#b):not(#c) form.cart > [class*="reassur"]{
    margin-bottom: 8px !important;
  }
}

/* ====================================================================
   SOCLE GOYA : LES DEFAUTS COMMUNS DU THEME
   ====================================================================
   Extrait de jhounysecret.com le 25/09/2026, apres une journee de
   corrections mesurees. Ne contient QUE des reglages de structure :
   alignement, debordement, tailles, superpositions, clics. Aucune
   couleur de marque, aucune classe propre a un site.
   Chaque bloc porte la mesure d'avant dans son commentaire.
   ==================================================================== */

/* ====================================================================
   LES VIGNETTES SOUS LA PHOTO
   ====================================================================
   Demande de JP : « les thumbnails ne doivent plus etre sur la photo mais
   en dessous ». Elles etaient posees en absolu par-dessus l'image. */
html body:not(#a):not(#b) .product-images .thumbnails,
html body:not(#a):not(#b) .woocommerce-product-gallery__wrapper + .thumbnails,
html body:not(#a):not(#b) .product-gallery-thumbs{
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
  transform: none !important;
}
html body:not(#a):not(#b) .product-images .thumbnails img{
  width: 68px !important; height: auto !important; cursor: pointer !important;
}


/* ====================================================================
   LES CHAMPS DE SAISIE DOIVENT SE VOIR
   ====================================================================
   Remarque de JP : « pour blanc sur blanc pourquoi tu vois pas ces
   problemes ». Les champs du paiement etaient blancs sur blanc, contraste
   mesure 1,06:1. Apres : 3,45:1. */
html body:not(#a):not(#b) input[type="text"],
html body:not(#a):not(#b) input[type="email"],
html body:not(#a):not(#b) input[type="tel"],
html body:not(#a):not(#b) input[type="password"],
html body:not(#a):not(#b) input[type="number"],
html body:not(#a):not(#b) textarea,
html body:not(#a):not(#b) select,
html body:not(#a):not(#b) .select2-selection{
  background-color: #ffffff !important;
  border: 1px solid #9a9a9a !important;
  color: #22252b !important;
  border-radius: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}
html body:not(#a):not(#b) input:focus,
html body:not(#a):not(#b) textarea:focus,
html body:not(#a):not(#b) select:focus{
  border-color: #22252b !important;
  outline: 2px solid rgba(34,37,43,.18) !important;
  outline-offset: 1px !important;
}
html body:not(#a):not(#b) label{ color: #22252b !important; }
html body:not(#a):not(#b) ::placeholder{ color: #6b6b6b !important; opacity: 1 !important; }


/* ====================================================================
   LE BOUTON QUI DECLENCHE L'ACHAT
   ====================================================================
   Remarque de JP : « le bouton doit etre noir et full avec ecriture
   blanche text-align centre ». Contraste mesure avant 1,06:1, apres
   15,36:1. */
html body:not(#a):not(#b) button.single_add_to_cart_button,
html body:not(#a):not(#b) .single_add_to_cart_button,
html body:not(#a):not(#b) #place_order,
html body:not(#a):not(#b) button#place_order,
html body:not(#a):not(#b) .checkout-button,
html body:not(#a):not(#b) .wc-proceed-to-checkout a{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  min-height: 52px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body:not(#a):not(#b) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b) #place_order:hover,
html body:not(#a):not(#b) .checkout-button:hover{
  background-color: #22252b !important; color: #ffffff !important;
}


/* ====================================================================
   LES TRAITS DE SEPARATION
   ====================================================================
   Remarque de JP : « on voit pas le trait de separation ». Ils etaient a
   1,06:1 sur fond blanc, donc invisibles. Apres : 2,61:1. */
html body:not(#a):not(#b) hr,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr th,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr td,
html body:not(#a):not(#b) .cart_totals table tr,
html body:not(#a):not(#b) .shop_table tbody tr td{
  border-color: #c9c9c9 !important;
}
html body:not(#a):not(#b) hr{
  border: 0 !important; border-top: 1px solid #c9c9c9 !important;
}


/* ====================================================================
   LE TITRE DU PRODUIT AERE, ET QUI NE TOUCHE PAS LA PHOTO
   ====================================================================
   Remarque de JP : « le titre est colle ». Le rapport hauteur de ligne /
   hauteur de police valait 0,86, donc les lignes se chevauchaient. Apres :
   1,30. */
html body:not(#a):not(#b) .product_title,
html body:not(#a):not(#b) h1.product_title,
html body:not(#a):not(#b) .summary .product_title{
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 8px !important;
}
html body:not(#a):not(#b) .summary,
html body:not(#a):not(#b) .entry-summary{
  padding-top: 6px !important;
}


/* ====================================================================
   AUCUN TEXTE NE S'ESTOMPE
   ====================================================================
   Remarque de JP : « enleve le degrade du texte qui s'estompe ». Un masque
   en degrade effacait la derniere ligne des descriptions. */
html body:not(#a):not(#b) .description-inner,
html body:not(#a):not(#b) .woocommerce-product-details__long-description,
html body:not(#a):not(#b) .woocommerce-Tabs-panel--description{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ====================================================================
   LES CARTES PRODUIT S'ALIGNENT
   ====================================================================
   Les cartes avaient des hauteurs differentes selon la longueur du nom :
   les prix ne tombaient pas sur la meme ligne. */
html body:not(#a):not(#b) ul.products li.product{
  display: flex !important;
  flex-direction: column !important;
}
html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title{
  min-height: 2.6em !important;
  line-height: 1.3 !important;
}
html body:not(#a):not(#b) ul.products li.product .price{
  margin-top: auto !important;
}


/* ====================================================================
   PAS DE VOILE SOMBRE SUR LE LOGO NI SUR LE HEADER
   ====================================================================
   Remarque de JP : « il y'a un aplat transparent degrade noir qui n'est pas
   coherent ». Un degrade noir se posait derriere l'entete au chargement. */
html body:not(#a):not(#b) .header-overlay,
html body:not(#a):not(#b) .site-header:before,
html body:not(#a):not(#b) .header-wrapper:before,
html body:not(#a):not(#b) .logo-wrapper:before{
  background: none !important;
  background-image: none !important;
  display: none !important;
}
html body:not(#a):not(#b) .site-logo img,
html body:not(#a):not(#b) .logo img{
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* ====================================================================
   LA PAGE NE DOIT PAS DEFILER LATERALEMENT
   ==================================================================== */
html:not(#a), body:not(#a){ overflow-x: hidden !important; max-width: 100% !important; }
@media (max-width: 991px){
  html body:not(#a):not(#b) .footer-widgets .row,
  html body:not(#a):not(#b) .footer-widgets .other-columns > .row{
    margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important;
  }
}


/* ====================================================================
   LES CARTES PRODUIT SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : grille de 246 px posee a x=63, colonnes de
   103 px, contenu des cartes 48 px, et les avatars du widget diagnostic
   gonfles a 300 x 404 px au milieu de chaque carte. */
@media (max-width: 767px){

  html body:not(#a):not(#b) .woocommerce.columns-4,
  html body:not(#a):not(#b) div.woocommerce[class*="columns-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(#a):not(#b) ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body:not(#a):not(#b) ul.products li.product{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  html body:not(#a):not(#b) ul.products li.product .product-inner{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* la PHOTO du produit, et elle seule */
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail{
    width: 100% !important;
    margin: 0 0 14px !important;
    display: block !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a > img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* les avatars du widget diagnostic */
  html body:not(#a):not(#b) .lystes-avatars,
  html body:not(#a):not(#b) .lystes-archive-tryon-inner{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 40px !important;
  }
  html body:not(#a):not(#b) .lystes-avatars img{
    width: 25px !important;
    max-width: 25px !important;
    height: 27px !important;
    max-height: 27px !important;
    aspect-ratio: auto !important;
  }

  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2,
  html body:not(#a):not(#b) ul.products li.product .price,
  html body:not(#a):not(#b) ul.products li.product .button{
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2{
    margin: 0 0 8px !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b) ul.products li.product .price{ margin: 0 0 12px !important; }
}


/* ====================================================================
   LE NOM DE LA BOUTIQUE NE COUVRE PLUS LE MENU
   ====================================================================
   Mesure a 375 px AVANT : h1.site-title a 31 px en white-space:nowrap,
   324 px de large, pose par-dessus le bouton burger (x=29 a 86) et le
   compteur du panier. Rien n'est masque ici : masquer l'icone du burger
   le 23/09 avait fait disparaitre le menu entier. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.site-title,
  html body:not(#a):not(#b):not(#c) #wrapper h1.site-title,
  html body:not(#a):not(#b):not(#c) .header-mobile h1.site-title,
  html body:not(#a):not(#b):not(#c) .logo-holder h1.site-title{
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    max-width: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* les deux commandes du bandeau restent cliquables au-dessus du titre */
  html body:not(#a):not(#b) .hamburger-menu,
  html body:not(#a):not(#b) .header-mobile [class*="cart"]{
    position: relative !important;
    z-index: 10 !important;
  }
}



/* ====================================================================
   LA GRILLE PRODUIT PREND TOUTE LA LARGEUR
   ====================================================================
   Mesure AVANT : .vc_column-inner gardait 22 px de marge interne de chaque
   cote, donc 296 px de grille au lieu de 340 sur un ecran de 375. */
@media (max-width: 767px){
  html body:not(#a):not(#b) .vc_column-inner:has(ul.products),
  html body:not(#a):not(#b) .vc_column-inner:has(.woocommerce){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================================================
   LE BOUTON QUI MET LE PRODUIT AU PANIER
   ====================================================================
   Mesure du 24/09/2026 AVANT : fond rgb(24,24,24), texte rgb(34,37,43),
   contraste 1,16:1, hauteur 11 px, marge interne 0. Invisible et ecrase :
   aucun achat possible depuis la fiche produit. APRES : noir plein, texte
   blanc, 15,3:1, 52 px de haut. */
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) form.cart button[type="submit"]{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 13px 20px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button *,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button:hover{
  background-color: #22252b !important;
  color: #ffffff !important;
}



/* ====================================================================
   LE BOUTON D'ACHAT PREND TOUTE LA LARGEUR SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : bouton de 282 px pose a x=39. Son conteneur
   `.et-wishlist-div-open` faisait lui-meme 282 px : c'est lui qui bridait,
   pas le bouton. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open,
  html body:not(#a):not(#b):not(#c) form.cart,
  html body:not(#a):not(#b):not(#c) .summary form.cart,
  html body:not(#a):not(#b):not(#c) .entry-summary form.cart{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .summary,
  html body:not(#a):not(#b):not(#c) .entry-summary,
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}



/* ====================================================================
   LE SELECTEUR DE QUANTITE SUIT LE BOUTON D'ACHAT
   ====================================================================
   Mesure a 381 px AVANT : `.quantity` faisait 104 x 104, un carre pose a
   gauche, quand le bouton juste en dessous faisait 346 x 46. Deux elements
   qui se suivent doivent partager leur largeur et leur hauteur. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) form.cart .quantity,
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open .quantity{
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity input.qty{
    height: 44px !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity .minus svg,
  html body:not(#a):not(#b):not(#c) form.cart .quantity .plus svg{
    width: 14px !important;
    height: 14px !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="minus"],
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="plus"]{
    height: 44px !important;
    min-height: 0 !important;
    width: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}



/* ====================================================================
   LE BOUTON « FAIRE UN DIAGNOSTIC » DU WIDGET
   ====================================================================
   Mesure du 24/09/2026 AVANT : libelle rgb(34,37,43) sur fond rgb(0,0,0),
   contraste 1,37:1, police 7 px. Illisible. APRES : blanc sur noir, 21:1,
   11 px. Le fond du bouton est noir : son texte doit etre blanc, pas
   l'anthracite herite du theme. */
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn *,
html body:not(#a):not(#b):not(#c) .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) .lystes-btn-label{
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn{
  min-height: 34px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}



/* ====================================================================
   LES PHOTOS DU PRODUIT DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 381 px AVANT : galerie de 1619 px de haut, trois photos de
   378 x 502 empilees. APRES : une seule photo a l'ecran, les autres a
   cote, avec accrochage au glissement. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images,
  html body:not(#a):not(#b):not(#c) .product-gallery-inner .product-images,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* la barre de defilement ajouterait une bande grise sous les photos */
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images::-webkit-scrollbar,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper::-webkit-scrollbar{
    height: 0 !important;
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images{
    scrollbar-width: none !important;
  }

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > *,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper > *{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > * img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* les vignettes restent sous la photo, sur une ligne */
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails,
  html body:not(#a):not(#b):not(#c) .product-gallery-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    position: static !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails img{
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    flex: 0 0 58px !important;
    cursor: pointer !important;
  }
}



/* ====================================================================
   LES COLONNES DU PIED DE PAGE S'ALIGNENT
   ====================================================================
   Mesure a 375 px AVANT : la premiere colonne commence a x=40, les trois
   suivantes a x=64. 24 px de decrochement, visibles a l'oeil nu. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns > .row,
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .footer-widgets .container > .row > *,
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns > .row > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
  /* une seule marge laterale, portee par le conteneur */
  html body:not(#a):not(#b):not(#c) .footer-widgets .container{
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}



/* ====================================================================
   LES TITRES DE SECTION SUIVENT LA CHARTE
   ====================================================================
   Mesure AVANT : « HAIRCARE » en EditorsNote-Extralight 47 px, quand le
   reste de la page est en Welcomeweb-Bold. Et sa marge haute etait nulle :
   le titre touchait le bloc precedent. */
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > h1{
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 40px 0 28px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > h1{
    font-size: 21px !important;
    margin: 32px 0 22px !important;
  }
}


/* ====================================================================
   LES TITRES DE SECTION NE TOUCHENT PLUS LES PRODUITS
   ====================================================================
   Le titre de la page d'accueil venait buter sur la premiere rangee de
   cartes. Un titre a besoin d'air en dessous, sinon on ne sait plus ce
   qu'il annonce. */
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
html body:not(#a):not(#b):not(#c) .wpb_text_column h1,
html body:not(#a):not(#b):not(#c) .wpb_text_column h2{
  margin-bottom: 32px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h1,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h2{
    margin-bottom: 26px !important;
  }
  /* la grille de produits garde ses distances avec ce qui la precede */
  html body:not(#a):not(#b):not(#c) .woocommerce.columns-4,
  html body:not(#a):not(#b):not(#c) div.woocommerce[class*="columns-"]{
    padding-top: 8px !important;
  }
}


/* ====================================================================
   LE MENU S'OUVRE SOUS L'EN-TETE, PLUS DERRIERE
   ====================================================================
   Le panneau porte `opacity` et `transform` : ces deux proprietes creent
   un contexte d'empilement, et son z-index de 100000 ne se compare plus a
   celui de l'en-tete (999). Surencherir ne sert a rien. On reserve plutot
   la hauteur de l'en-tete en haut du panneau : plus rien ne se recouvre,
   quel que soit l'ordre des plans. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .side-panel-content,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .side-panel-content{
    padding-top: 96px !important;
    box-sizing: border-box !important;
  }
  /* et le panier lateral, qui souffre du meme mal */
  html body:not(#a):not(#b):not(#c) .side-panel.mini-cart .side-panel-content{
    padding-top: 96px !important;
    box-sizing: border-box !important;
  }
}


/* ====================================================================
   LA PAGE CONCEPT SUR MOBILE
   ====================================================================
   Mesure a 337 px AVANT : titre en 22 px avec un interligne de 53 px,
   soit 2,4 fois la taille du texte, dans une colonne de 224 px sur 337.
   Quatre lignes, 212 px de haut. APRES : toute la largeur, interligne
   1,25, trois lignes. */
@media (max-width: 767px){

  /* la colonne reprend la largeur de l'ecran */
  html body:not(#a):not(#b):not(#c) .concept-right,
  html body:not(#a):not(#b):not(#c) .concept-left{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* le titre : interligne resserre, texte equilibre entre les lignes */
  html body:not(#a):not(#b):not(#c) h1.concept-title,
  html body:not(#a):not(#b):not(#c) .concept-title{
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    margin: 10px 0 18px !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  /* le mot manuscrit « Concept » */
  html body.page-concept:not(#a):not(#b):not(#c) .concept-script,
  html body:not(#a):not(#b):not(#c) .concept-left .titlescript,
  html body:not(#a):not(#b):not(#c) .concept-left .titlescript p{
    font-size: 42px !important;
    line-height: 1 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  /* le corps de texte respire sans se perdre */
  html body:not(#a):not(#b):not(#c) .concept-right p{
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    margin: 0 0 12px !important;
  }
}


/* ====================================================================
   LE SOUS-TITRE DE LA SECTION CONCEPT, REGLAGE DE JP
   ====================================================================
   Valeurs donnees par JP le 25/09 apres essai dans son navigateur.
   Son selecteur portait `#section-concept-ed64`, un identifiant genere
   par le constructeur de page : il change des que la section est
   recreee. On garde `.concept-subtitle`, qui est stable. */
@media (max-width: 767px){
  html body.home:not(#a):not(#b):not(#c) .concept-subtitle,
  html body:not(#a):not(#b):not(#c) [id^="section-concept"] .concept-subtitle{
    color: #000000 !important;
    font-size: 29px !important;
  }
}


/* ====================================================================
   LA PASTILLE DU PANIER SUR L'ORBE
   ====================================================================
   Deux choses, a ne pas melanger.

   L'ETAT appartient au script de l'orbe, qui pose `.on` sur la pastille
   et `.cache` sur le badge AI des que le panier compte au moins un
   article. Aucune regle ici ne doit forcer un `display` sans l'etat :
   la version precedente le faisait, et la pastille restait affichee a
   zero sur un panier vide, a cote du AI.

   L'APPARENCE nous revient : a 10 px, le blanc sur rouge (contraste
   4,35:1) ne tient que si le trait est epais. */

/* panier vide : rien. Le AI reste seul. */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier:not(.on){
  display: none !important;
}
/* panier rempli : la pastille, et elle seule. */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier.on{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#a):not(#b):not(#c) .lystes-brandcall-mini.cache{
  display: none !important;
}
/* le chiffre : blanc, epais, lisible a 10 px */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier,
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}


/* ====================================================================
   LE PANNEAU DU PANIER
   ====================================================================
   Un compteur a zero ne s'affiche pas, et le panneau tient sur un seul
   blanc du haut en bas. */

/* 1. plus aucune pastille a zero, ni dans l'entete ni dans le panneau.
      Le theme pose `et-count-zero` tout seul : on s'en sert. */
html body:not(#a):not(#b):not(#c) .item-counter.et-count-zero{
  display: none !important;
}

/* 2. dans le panneau, le compteur est blanc sur blanc : un rond vide colle
      au mot « Panier ». La liste des articles est juste en dessous, le
      chiffre n'apprend rien. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title .item-counter{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 3. un seul blanc : entete, corps, pied. */
html body:not(#a):not(#b):not(#c) #side-cart,
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-content,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons{
  background-color: #ffffff !important;
  background-image: none !important;
}
/* la limite entre l'entete et le corps ne doit pas se voir */
html body:not(#a):not(#b):not(#c) #side-cart > header{
  border-bottom: none !important;
  box-shadow: none !important;
}


/* ====================================================================
   LE BANDEAU DE TITRE, LE TRI, L'ICONE DU PANIER
   ==================================================================== */

/* 1. LE BANDEAU DE TITRE. Trois paddings empiles pour un seul titre :
      on les remet sur un seul niveau. 195 px -> environ 96. */
html body:not(#a):not(#b):not(#c) .regular-title{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body:not(#a):not(#b):not(#c) .regular-title .hero-header-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body:not(#a):not(#b):not(#c) .regular-title .woocommerce-products-header,
html body:not(#a):not(#b):not(#c) .regular-title header{
  padding-top: 34px !important;
  padding-bottom: 30px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .regular-title .woocommerce-products-header,
  html body:not(#a):not(#b):not(#c) .regular-title header{
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
}

/* 2. LE TRI. Un menu deroulant seul entre le titre et les produits, qui
      n'apporte rien sur une boutique de vingt references. */
html body:not(#a):not(#b):not(#c) form.woocommerce-ordering,
html body:not(#a):not(#b):not(#c) .woocommerce-result-count{
  display: none !important;
}

/* 3. L'ICONE DU PANIER. Le SVG du theme est en double dans la page, avec
      les memes identifiants internes : son masque ne resout plus et seul
      le rectangle de contour reste. On repeint l'icone par-dessus, avec
      un masque CSS, ce qui ignore le contenu casse. `currentColor` la
      laisse suivre la couleur du theme. */
html body:not(#a):not(#b):not(#c) svg.icon-cart{
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l1 12.5h-15z'/%3E%3Cpath d='M9 7.5V5.6a3 3 0 0 1 6 0v1.9'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l1 12.5h-15z'/%3E%3Cpath d='M9 7.5V5.6a3 3 0 0 1 6 0v1.9'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
html body:not(#a):not(#b):not(#c) svg.icon-cart > *{
  visibility: hidden !important;
}

/* 4. LE LIEN QUI RETIRE LE COUPON. 18 px de large, fond vert residuel :
      le mot ne tenait pas dans sa boite. */
html body:not(#a):not(#b):not(#c) .woocommerce-remove-coupon{
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 6px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #8a8f98 !important;
  white-space: nowrap !important;
}

/* 5. LA PAGE CONCEPT : des gouttieres de 16 px, pas davantage. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .concept-right,
  html body:not(#a):not(#b):not(#c) .concept-left{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body:not(#a):not(#b):not(#c) .concept-right > *,
  html body:not(#a):not(#b):not(#c) .concept-left > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================================================
   LES TRAITS PARASITES DE LA BOUTIQUE
   ==================================================================== */

/* le trait blanc au-dessus du titre */
html body:not(#a):not(#b):not(#c) h1.et-shop-title,
html body:not(#a):not(#b):not(#c) .woocommerce-products-header__title{
  border-top: none !important;
  border-bottom: none !important;
}

/* la barre de filtres : vide depuis que le tri est retire, elle ne
   laissait que ses deux bordures */
html body:not(#a):not(#b):not(#c) .shop-filters{
  display: none !important;
}


/* ====================================================================
   LA GALERIE DE LA FICHE PRODUIT
   ==================================================================== */

/* 1. LA GRANDE IMAGE. FlexSlider pose `width: 400%` sur le conteneur des
      diapos pour pouvoir les faire glisser ; un `max-width: 100%` le
      ramenait a la largeur d'une seule. Resultat : la deuxieme image
      restait hors champ et le clic sur sa vignette n'affichait que du
      blanc. On rend au conteneur le droit de depasser. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__image{
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .flex-viewport{
  overflow: hidden !important;
}

/* 2. LES VIGNETTES SOUS LA PHOTO, jamais dessus. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-nav,
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs{
  position: static !important;
  bottom: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* 3. UN CARROUSEL, PAS DEUX LIGNES. Au-dela de quatre photos, la bande
      defile horizontalement au doigt. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li{
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  opacity: .55 !important;
  transition: opacity .18s ease !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img:hover{
  opacity: 1 !important;
}


/* ====================================================================
   LA GALERIE : LE GLISSEMENT
   ====================================================================
   `display: flex` sur le conteneur des diapos doublait la translation et
   sortait les deux images du cadre. FlexSlider veut des flottants. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
  display: block !important;
  overflow: visible !important;
  width: 400% !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{
  float: left !important;
  display: block !important;
  width: 25% !important;
}


/* ====================================================================
   LES POLICES DE LA CHARTE
   ====================================================================
   Deux endroits ou le theme sort de la charte : les titres du pied de
   page, en « Krona One », et le titre de la fiche produit, en
   « Welcomeweb-Bold ». Partout ailleurs c'est Futura. */
html body:not(#a):not(#b):not(#c) footer h3.wp-block-heading,
html body:not(#a):not(#b):not(#c) footer .widget h3,
html body:not(#a):not(#b):not(#c) .site-footer h3,
html body:not(#a):not(#b):not(#c) .site-footer .widget-title{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  letter-spacing: .14em !important;
  font-weight: 500 !important;
}
html body:not(#a):not(#b):not(#c) h1.product_title,
html body:not(#a):not(#b):not(#c) .summary h1{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  letter-spacing: .05em !important;
}


/* ====================================================================
   LE CONTENU DU PANNEAU DU PANIER
   ==================================================================== */

/* 1. UN SEUL CADRE SUR LA QUANTITE. Le theme en posait deux, imbriques. */
html body:not(#a):not(#b):not(#c) #side-cart .quantity,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity{
  border: 1px solid #ddd8ce !important;
  border-radius: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .quantity input.qty,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity input.qty{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. LA CROIX QUI SUPPRIME. Beige sur blanc : on la rend nette. */
html body:not(#a):not(#b):not(#c) #side-cart a.remove,
html body:not(#a):not(#b):not(#c) .mini-cart a.remove{
  background: transparent !important;
  border: none !important;
  color: #6b6f76 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#a):not(#b):not(#c) #side-cart a.remove:hover{
  color: #22252b !important;
}

/* 3. LES DEUX BOUTONS DU BAS. « Voir le panier » etait beige sur blanc,
      « Commander » blanc sur beige : aucun des deux ne se lisait. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
/* le bouton secondaire : trait fin, texte anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a:not(.checkout){
  background: transparent !important;
  border: 1px solid #22252b !important;
  color: #22252b !important;
}
/* le bouton principal : plein, blanc sur anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout{
  background: #22252b !important;
  border: 1px solid #22252b !important;
  color: #ffffff !important;
}

/* 4. LE SOUS-TOTAL, lisible du libelle au montant. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total *{
  color: #22252b !important;
  font-size: 12px !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  margin-top: 6px !important;
  border-top: 1px solid #ece7dd !important;
}


/* ====================================================================
   RETOUCHES DU PANNEAU ET DES BADGES
   ==================================================================== */

/* 1. LA QUANTITE, plus basse : 46 px -> 34. */
html body:not(#a):not(#b):not(#c) #side-cart .quantity,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity{
  height: 34px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .quantity input.qty,
html body:not(#a):not(#b):not(#c) #side-cart .quantity .plus,
html body:not(#a):not(#b):not(#c) #side-cart .quantity .minus,
html body:not(#a):not(#b):not(#c) #side-cart .quantity > *{
  height: 32px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. « PANIER » en capitales, comme les autres titres du site. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  font-size: 11px !important;
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}

/* 3. LES BADGES : le meme retrait a gauche que le bloc voisin, et le
      drapeau ne touche plus le bord. */
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label{
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label .product-content{
  gap: 8px !important;
}


/* ====================================================================
   UNE SEULE GOUTTIERE, PORTEE PAR UN SEUL NIVEAU
   ====================================================================
   Mesure avant sur la page Concept : quatre retraits empiles, 81 px a
   gauche pour un texte de 210 px sur 375. Ce bloc vient APRES les
   precedents et les corrige. */
@media (max-width: 767px){

  /* le niveau exterieur, et lui seul, porte les 16 px */
  html body:not(#a):not(#b):not(#c) .vc_column-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* tout ce qui est dedans est a zero : rien ne peut plus s'additionner */
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_wrapper,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_text_column,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_column-inner section,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-left,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-right,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}


/* ====================================================================
   LA GOUTTIERE UNIQUE, VERSION DEFINITIVE
   ====================================================================
   Le coupable etait `.vc_row`, avec 50 px que mes blocs precedents ne
   nommaient jamais. Ici : tout a zero, 16 px sur la ligne racine. */
@media (max-width: 767px){

  /* tous les niveaux de structure a zero */
  html body:not(#a):not(#b):not(#c) .vc_section,
  html body:not(#a):not(#b):not(#c) .sec_row,
  html body:not(#a):not(#b):not(#c) .vc_row,
  html body:not(#a):not(#b):not(#c) .vc_row-fluid,
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper,
  html body:not(#a):not(#b):not(#c) .wpb_text_column,
  html body:not(#a):not(#b):not(#c) .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* la ligne racine, et elle seule, porte les 16 px */
  html body:not(#a):not(#b):not(#c) .vc_row:not(.vc_inner){
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* le sur-titre des pages : petites capitales espacees, comme partout */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4:first-child,
  html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child h4{
    text-transform: uppercase !important;
    letter-spacing: .22em !important;
    font-size: 10px !important;
    color: #6b6f76 !important;
    margin: 78px 0 10px !important;
    text-align: center !important;
  }

  /* l'espace vertical avant le titre : 219 px entre le sur-titre et le
     titre sur la FAQ. */
  html body:not(#a):not(#b):not(#c) .vc_row:not(.vc_inner){
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_column-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* le formulaire de contact prend toute la largeur utile */
  html body:not(#a):not(#b):not(#c) .gform_wrapper,
  html body:not(#a):not(#b):not(#c) .gform_wrapper form,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_fields,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gfield{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ====================================================================
   LES PARAGRAPHES VIDES DE L'EDITEUR
   ====================================================================
   Un bloc de 201 px de haut pour une ligne de 15 px : le reste, ce sont
   des paragraphes vides laisses par WPBakery. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_text_column p:empty,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > p:empty{
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .wpb_text_column br + br{
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_empty_space{
    height: 18px !important;
  }
}


/* ====================================================================
   PLUS AUCUNE MARGE NEGATIVE VERTICALE SUR TELEPHONE
   ====================================================================
   Une marge negative sert a superposer deux colonnes sur grand ecran.
   Sur telephone les colonnes sont empilees : la superposition n'a plus
   d'objet, et la remontee sort le contenu de l'ecran. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_row,
  html body:not(#a):not(#b):not(#c) .vc_row-fluid,
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .vc_section,
  html body:not(#a):not(#b):not(#c) .sec_row{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
  }
}


/* ====================================================================
   L'ESPACE AU-DESSUS DES TITRES DE PAGE
   ====================================================================
   Le sur-titre portait `padding-top: 175px` : 201 px de bloc pour une
   ligne de 15 px. Un rembourrage interne, que les regles de marge ne
   peuvent pas atteindre. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h4,
  html body:not(#a):not(#b):not(#c) .wpb_text_column > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* le sur-titre colle a son titre : 10 px, pas 175 */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4{
    margin: 78px 0 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1{
    margin: 0 0 22px !important;
  }

  /* les questions de la FAQ, un cran plus petites */
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    font-size: 11px !important;
    letter-spacing: .08em !important;
    line-height: 1.5 !important;
  }
}


/* ====================================================================
   LES QUESTIONS DE LA FAQ
   ====================================================================
   Le texte vit dans un `<h4>` a l'interieur du titre, avec sa propre
   taille. C'est lui qu'il faut viser. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .vc_toggle_title h4,
  html body:not(#a):not(#b):not(#c) .vc_toggle_title > h4{
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* l'ecart d'une question a l'autre : un trait, pas un trou */
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    margin-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_content{
    margin-top: 10px !important;
    padding-bottom: 0 !important;
  }
}


/* ====================================================================
   LES QUESTIONS DE LA FAQ, A TOUTES LES LARGEURS
   ====================================================================
   Sans condition de media : mes blocs precedents ne valaient que sous
   767 px, et les questions faisaient encore 19 px sur ordinateur. */

html body:not(#a):not(#b):not(#c) .vc_toggle_title h4{
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .03em !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  margin: 0 !important;
  padding: 0 !important;
}
/* l'espace d'une question a l'autre : 10 px de part et d'autre du trait */
html body:not(#a):not(#b):not(#c) .vc_toggle{
  margin: 0 !important;
  padding: 10px 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_content{
  margin: 8px 0 0 !important;
  padding-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
/* la croix d'ouverture suit la taille du texte */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: scale(.8) !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_toggle_title h4{
    font-size: 10.5px !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding: 9px 0 !important;
  }
}


/* ====================================================================
   LE « + » DES QUESTIONS
   ====================================================================
   18 px de haut pour un texte de 12 px : il pesait plus lourd que la
   question elle-meme. */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: scale(.62) !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -1px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::before,
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::after{
  border-width: 1px !important;
}


/* ====================================================================
   LE « + » REDESSINE, SANS MISE A L'ECHELLE
   ====================================================================
   `scale()` sur un trait de 1 px le rend flou et inegal. On donne sa
   taille reelle a l'icone et on dessine les deux barres. */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: none !important;
  width: 12px !important;
  height: 12px !important;
  left: 6px !important;
  top: 50% !important;
  margin-top: -6px !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
/* la barre horizontale */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 12px !important;
  height: 1px !important;
  margin-top: -0.5px !important;
  background: currentColor !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
}
/* la barre verticale, qui disparait quand la question est ouverte */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: 12px !important;
  margin-left: -0.5px !important;
  background: currentColor !important;
  border: none !important;
  transform: none !important;
  transition: opacity .18s ease !important;
  opacity: 1 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_active .vc_toggle_icon::after{
  opacity: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  color: #22252b !important;
}


/* ====================================================================
   LA PILULE « FAIRE UN DIAGNOSTIC »
   ====================================================================
   Masquee par un style en ligne du plugin, alors que le bouton est
   fonctionnel (verifie au clic). On l'affiche, a gauche, et le reste
   des actions se range a droite. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-wrapper{
  display: flex !important;
  align-items: center !important;
  margin-right: auto !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat #lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: 6px 14px 6px 6px !important;
  min-height: 29px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  width: auto !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn span{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn img{
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* la rangee : pilule a gauche, actions a droite */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-chat-actions-row{
  justify-content: space-between !important;
}


/* ====================================================================
   LE CHAT PRODUIT : ICONES ET ALIGNEMENT
   ==================================================================== */

/* les icones : leur trait etait blanc sur un fond blanc */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-mic-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-call-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-mic-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-call-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg *{
  stroke: #22252b !important;
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-chat-right-actions{
  gap: 10px !important;
  align-items: center !important;
}



/* ====================================================================
   LE PANNEAU DE CHAT : PAS DE CADRE SUR LE CHAMP
   ====================================================================
   La bordure grise que le theme pose sur tous les champs. */
html body:not(#a):not(#b):not(#c) .lystes-bc-field textarea,
html body:not(#a):not(#b):not(#c) .lystes-bc-field input,
html body:not(#a):not(#b):not(#c) [class*="lystes-bc"] textarea,
html body:not(#a):not(#b):not(#c) [class*="brandchat"] textarea,
html body:not(#a):not(#b):not(#c) [class*="brandchat"] input[type="text"]{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ====================================================================
   LA PASTILLE DU PANIER ET LE BADGE AI DANS LE CHAT
   ====================================================================
   JP : « le bouton panier, la ou il y a du rouge, c'est cense etre
   ecriture blanche sur fond rouge, pas noire » ; « en haut a droite, le
   badge AI, on ne le voit pas ». */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge *,
html body:not(#a):not(#b):not(#c) .lystes-cart-badge{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
/* le badge AI de la vignette : blanc sur son fond sombre */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: .02em !important;
}


/* ====================================================================
   LA PAGE PANIER : CROIX, QUANTITE, TRAITS
   ==================================================================== */

/* 1. LA CROIX. 73 px de large pour 16 de haut : un X etire en travers du
      nom du produit. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove,
html body:not(#a):not(#b):not(#c) .shop_table a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::before,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::after{
  content: none !important;
  display: none !important;
}

/* 2. LA QUANTITE. 25 px de large : le « + » venait se coller au prix. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
    border: 1px solid #ddd8ce !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity input.qty{
    width: 34px !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .plus,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .minus{
    width: 28px !important;
    border: none !important;
    background: transparent !important;
  }
}

/* 3. UN SEUL TRAIT. Meme couleur, meme epaisseur, jamais transparent :
      un trait semi-transparent change de teinte selon ce qu'il y a
      derriere, et deux cellules voisines ne se raccordent plus. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td,
html body:not(#a):not(#b):not(#c) .cart_totals tr,
html body:not(#a):not(#b):not(#c) .cart_totals th,
html body:not(#a):not(#b):not(#c) .cart_totals td{
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid #e8e4dc !important;
}
/* la premiere ligne n'a pas de trait au-dessus */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child td,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child th,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child td{
  border-top: none !important;
}


/* ====================================================================
   LA COLONNE DE LA QUANTITE
   ====================================================================
   55 px de colonne pour un selecteur de 96 : il debordait sur le
   sous-total. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    width: 104px !important;
    min-width: 104px !important;
    flex: 0 0 104px !important;
    max-width: 104px !important;
    padding-right: 6px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    width: 62px !important;
    min-width: 62px !important;
    flex: 0 0 62px !important;
    max-width: 62px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    width: 92px !important;
    min-width: 92px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    width: calc(100% - 172px) !important;
    max-width: calc(100% - 172px) !important;
    flex: 1 1 auto !important;
  }
}


/* ====================================================================
   LE DRAPEAU ALIGNE SUR LA PLANTE
   ====================================================================
   Glyphe a 10 px sur le premier badge, 22 px sur le second, a padding
   egal : les emojis du premier vivent hors du conteneur qui porte le
   retrait. On rattrape les 12 px. */
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label.label-1{
  padding-left: 30px !important;
}



/* ====================================================================
   LE PANNEAU DU PANIER : EN-TETE ALIGNE, BOUTONS ASSORTIS
   ==================================================================== */

/* 1. LES DEUX BOUTONS, la meme police et la meme graisse. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons a{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

/* 2. L'EN-TETE sur la meme verticale que les produits : les 5 px de
      decalage venaient du conteneur interne du bandeau. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .container{
  padding-left: 25px !important;
  padding-right: 25px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .et-close{
  margin-right: 0 !important;
  right: auto !important;
}


/* ====================================================================
   LES ALIGNEMENTS, EN DERNIER MOT
   ==================================================================== */

/* 1. L'EN-TETE DU PANNEAU sur la verticale des produits : 50 px, pas 75. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart > header > .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  padding-left: 50px !important;
  padding-right: 50px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. LA LIGNE DU PANIER : les colonnes Bootstrap ne tiennent pas a cette
      largeur, la quantite se posait sur le nom. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    padding: 0 !important;
    order: 2 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: right !important;
    padding: 0 !important;
    order: 3 !important;
    white-space: nowrap !important;
  }
  /* le prix unitaire sous le nom, pas en double au milieu */

}


/* ====================================================================
   LES COLONNES DU PANIER : DES LARGEURS, PAS UN PARTAGE A EGALITE
   ====================================================================
   `table-layout: fixed` sans largeurs donnait 194 px a la colonne photo
   et laissait 226 px vides a droite. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
  width: auto !important;
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
    width: 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
  }
  /* la quantite a gauche, le sous-total colle au bord droit */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    margin-left: auto !important;
    text-align: right !important;
  }
}


/* ====================================================================
   LA LIGNE DU PANIER, D'UN BORD A L'AUTRE
   ==================================================================== */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  row-gap: 10px !important;
}
/* le nom prend toute la premiere rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name > a{
  display: block !important;
}
/* le prix unitaire passe a gauche de la seconde rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 2 !important;
  margin-right: auto !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 3 !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 !important;
}


/* ====================================================================
   LE PANIER EN BLOCS SUR TELEPHONE
   ====================================================================
   La table imposait sa repartition et laissait la moitie droite vide.
   Sur telephone, chaque ligne devient un bloc : photo a gauche, texte et
   chiffres sur toute la largeur restante. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tbody,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #e8e4dc !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    display: block !important;
    flex: 0 0 74px !important;
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail img{
    width: 74px !important;
    height: auto !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    row-gap: 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    order: 3 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* la croix, en haut a droite de la ligne */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name a.remove{
    float: right !important;
    margin-left: 8px !important;
  }
}


/* ====================================================================
   LE PRIX UNITAIRE, UNE SEULE FOIS
   ====================================================================
   Le sous-total suffit : a quantite 1 c'est le meme montant, et au-dela
   c'est lui qui compte. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details .product-price{
  display: none !important;
}


/* ====================================================================
   LES CARTES PRODUIT REDEVIENNENT CLIQUABLES
   ====================================================================
   Le conteneur de la section du titre debordait sur la premiere rangee
   et interceptait les clics. Les cartes passent au-dessus. */
html body:not(#a):not(#b):not(#c) ul.products li.product{
  position: relative !important;
  z-index: 2 !important;
}
html body:not(#a):not(#b):not(#c) ul.products li.product a{
  position: relative !important;
  z-index: 3 !important;
}


/* ====================================================================
   LE PSEUDO-ELEMENT QUI AVALAIT LES CLICS
   ====================================================================
   `.sec_row::after` : 334 x 405 px, z-index 999, invisible, pose sur la
   premiere rangee de produits. Un decor ne capte pas le pointeur. */
html body:not(#a):not(#b):not(#c) .sec_row::after,
html body:not(#a):not(#b):not(#c) .sec_row::before,
html body:not(#a):not(#b):not(#c) .vc_row::after,
html body:not(#a):not(#b):not(#c) .vc_row::before{
  pointer-events: none !important;
}


/* ====================================================================
   LE PRIX UNITAIRE MASQUE, ET LE BANDEAU DU HAUT EN BLANC
   ==================================================================== */

/* le prix unitaire : specificite portee au niveau des regles qui le
   rallumaient, et pose en dernier */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form div.product-price{
  display: none !important;
}

/* le bandeau d'annonce : texte blanc sur le vert de la marque */
html body:not(#a):not(#b):not(#c) .top-bar,
html body:not(#a):not(#b):not(#c) .top-bar *,
html body:not(#a):not(#b):not(#c) .header-notice,
html body:not(#a):not(#b):not(#c) .header-notice *,
html body:not(#a):not(#b):not(#c) .announcement-bar,
html body:not(#a):not(#b):not(#c) .announcement-bar *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ====================================================================
   LE FOND DES BLOCS DE REASSURANCE
   ====================================================================
   « Garantie premiere commande » et « Non teste sur les animaux » se
   posent sur un gris tres clair, sans bordure. */
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #f9f9f9 !important;
  padding: 24px 20px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 2px !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}


/* ====================================================================
   « VALIDER LA COMMANDE », UN CRAN PLUS DISCRET
   ====================================================================
   13 px en HussarBold : la police est grasse par construction. Futura
   en 11,5 px donne le meme bouton, en moins lourd. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}


/* ====================================================================
   LA PAGE DE COMMANDE EN BLANC
   ====================================================================
   Meme traitement que la fiche produit : pas de beige sur les tunnels
   d'achat. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c),
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #main,
html body.woocommerce-cart:not(#a):not(#b):not(#c),
html body.woocommerce-cart:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-cart:not(#a):not(#b):not(#c) #main,
html body.page-id-8:not(#a):not(#b):not(#c),
html body.page-id-8:not(#a):not(#b):not(#c) #wrapper,
html body.page-id-8:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.page-id-8:not(#a):not(#b):not(#c) .site-content,
html body.page-id-8:not(#a):not(#b):not(#c) #main{
  background-color: #ffffff !important;
}


/* ====================================================================
   LE DEGRADE VIOLET DU PIED DE PAGE
   ====================================================================
   `linear-gradient(rgb(184,164,220) ...)` pose sur le footer. Sur la
   page de commande il n'en reste qu'une bande de 36 px, bien visible. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c) footer.site-footer,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .footer,
html body.page-id-8:not(#a):not(#b):not(#c) footer.site-footer,
html body.page-id-8:not(#a):not(#b):not(#c) .footer{
  background-image: none !important;
  background-color: #ffffff !important;
}


/* ====================================================================
   LE LIEN DE CONFIDENTIALITE ET LE BOUTON « COMMANDER »
   ==================================================================== */

/* le lien reprend la taille de la phrase, et se signale par un trait */
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-text a,
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-link,
html body:not(#a):not(#b):not(#c) .woocommerce-terms-and-conditions-link{
  font-size: inherit !important;
  font-family: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  color: inherit !important;
}

/* « Commander » : meme traitement que « Valider la commande ».
   HussarBold est grasse par construction, Futura l'allege. */
html body:not(#a):not(#b):not(#c) #place_order,
html body:not(#a):not(#b):not(#c) button[name="woocommerce_checkout_place_order"]{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}

/* ====================================================================
   SOCLE GOYA, COMPLEMENT DU 25/09 APRES CONTROLE VISUEL
   ====================================================================
   Deux defauts releves en regardant Eclose Paris et Maison SD a 375 px,
   que le premier socle ne couvrait pas. */

/* 1. LE BOUTON « RETOUR A LA BOUTIQUE » DU PANIER VIDE
      Mesure sur ecloseparis.com : color #fcf8f1 sur fond transparent,
      donc beige sur blanc. Contraste 1,05:1 : le bouton est la, on ne
      lit rien. Meme defaut que « Voir le panier » dans le panneau. */
html body:not(#a):not(#b):not(#c) .return-to-shop a,
html body:not(#a):not(#b):not(#c) .wc-backward,
html body:not(#a):not(#b):not(#c) .cart-empty + p a,
html body:not(#a):not(#b):not(#c) .woocommerce-cart .return-to-shop .button{
  color: #22252b !important;
  border: 1px solid #22252b !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}

/* 2. UNE IMAGE SEULE DANS SA LIGNE VA BORD A BORD
      Mesure sur maisonsd.lystes.ai : l'image d'accueil fait 340 px a
      x=16 sur un ecran de 375. La gouttiere de 16 px, faite pour le
      texte, bride aussi les images de pleine largeur.
      On ne vise que les lignes marquees sans marge par le theme, ou
      celles dont l'unique contenu est une image. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding,
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding .wpb_single_image img,
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding .wpb_single_image img,
  html body:not(#a):not(#b):not(#c) .vc_row-full-width + .vc_row img{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ====================================================================
   SOCLE GOYA, CORRECTIF DU BORD A BORD
   ====================================================================
   Mon complement precedent posait `padding: 0` sur toute ligne marquee
   `no-padding`, pour que les images aillent bord a bord. Mesure sur
   maisonsd.lystes.ai : la section Concept vit elle aussi dans une ligne
   `no-padding`, et son texte s'est retrouve colle aux deux bords, sur
   372 px d'un ecran de 375.

   C'est la meme faute que JP avait signalee sur jhounysecret : le bord a
   bord vaut pour une IMAGE, jamais pour du texte.

   Ce bloc vient en dernier : il rend sa gouttiere a toute ligne qui
   contient du texte, et ne laisse bord a bord que celles dont le contenu
   est une image seule. */
@media (max-width: 767px){

  /* on rend la gouttiere a toutes les lignes sans marge... */
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding,
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ...sauf celles qui ne portent qu'une image ou un diaporama */
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding:has(.wpb_single_image):not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(h3)),
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding:has(.wpb_single_image):not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(h3)),
  html body:not(#a):not(#b):not(#c) .vc_row:has(> * > * > .jh-hero),
  html body:not(#a):not(#b):not(#c) .vc_row:has(.rev_slider_wrapper){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* le texte du bloc Concept garde sa gouttiere quoi qu'il arrive */
  html body:not(#a):not(#b):not(#c) [class*="section-concept"]{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-right,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-left,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LE MENU MOBILE
   ====================================================================
   Mesure sur maisonsd.lystes.ai, a 375 px :
     entrees du menu   20 px, en averta-light-webfont
     #mobile-menu      z-index 604
   Sur jhounysecret, apres correction : 14 px en Futura, z-index 100000.

   Le z-index de 604 laisse la barre flottante de diagnostic passer
   devant le menu ouvert : on ne peut plus fermer le menu ni lire les
   dernieres entrees. Les panneaux lateraux doivent dominer tout le
   reste. */
@media (max-width: 991px){

  /* 1. les panneaux passent devant la barre flottante */
  html body:not(#a):not(#b):not(#c) #mobile-menu,
  html body:not(#a):not(#b):not(#c) #side-cart,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu,
  html body:not(#a):not(#b):not(#c) .side-panel.mini-cart{
    z-index: 100000 !important;
  }
  /* et leur voile aussi */
  html body:not(#a):not(#b):not(#c) .body-overlay,
  html body:not(#a):not(#b):not(#c) #body-overlay{
    z-index: 99999 !important;
  }

  /* 2. la taille des entrees : 20 px etaient trop grands pour un
        telephone, le menu debordait sous la ligne de flottaison */
  html body:not(#a):not(#b):not(#c) #mobile-menu ul li > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu ul li > a,
  html body:not(#a):not(#b):not(#c) #mobile-menu .sliding-menu-panel > li > a{
    font-size: 14px !important;
    letter-spacing: .08em !important;
    line-height: 1.4 !important;
  }
  html body:not(#a):not(#b):not(#c) #mobile-menu ul li{
    margin-bottom: 4px !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LES CERTIFICATIONS ET LE VIDE SOUS LE PAIEMENT
   ====================================================================
   Ces trois blocs avaient ete ecartes du premier socle : leur selecteur
   commence par `.vt-`, que j'avais pris pour une classe propre a
   Havil’Or. Verification faite, `.vt-certifs` existe sur TOUS les sites :
   c'est un bloc du theme enfant partage. Ils reviennent ici.
   ==================================================================== */
/* ====================================================================
   LES CERTIFICATIONS SOUS LA FICHE PRODUIT
   ====================================================================
   Demande d'une cliente le 24/09/2026 : mettre en avant les certifications
   bio et veganes pour justifier les prix. Les pictogrammes pesaient 3,5 Mo
   a huit, ramenes a 132 Ko avant mise en ligne. */
html body:not(#a):not(#b) .vt-certifs{
  margin: 56px 0 0;
  padding: 40px 0;
  border-top: 1px solid #e8e2d9;
}
html body:not(#a):not(#b) .vt-certifs-mentions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 34px; margin: 0 0 30px; padding: 0;
  font-size: 13px; letter-spacing: .06em; color: #5f6570;
}
html body:not(#a):not(#b) .vt-certifs-pictos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 22px 34px; margin: 0 0 40px; padding: 0; list-style: none;
}
html body:not(#a):not(#b) .vt-certifs-pictos li{ margin: 0; padding: 0; list-style: none; }
html body:not(#a):not(#b) .vt-certifs-pictos img{
  width: 64px; height: auto; display: block; opacity: .82;
}
html body:not(#a):not(#b) .vt-certifs-listes{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px; max-width: 760px; margin: 0 auto;
}
html body:not(#a):not(#b) .vt-certifs-bloc h3{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #22252b; margin: 0 0 16px; font-weight: 600;
}
html body:not(#a):not(#b) .vt-certifs-bloc ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
html body:not(#a):not(#b) .vt-certifs-bloc li{
  font-size: 14px; color: #5f6570; margin: 0; padding: 0;
  display: flex; align-items: baseline; gap: 9px;
}
html body:not(#a):not(#b) .vt-sans li span{ color: #9a3530; font-size: 13px; }
html body:not(#a):not(#b) .vt-avec li::before{
  content: "\2713"; color: #3d6b52; font-size: 13px;
}
@media (max-width: 640px){
  html body:not(#a):not(#b) .vt-certifs-listes{ grid-template-columns: 1fr; gap: 26px; }
  html body:not(#a):not(#b) .vt-certifs-pictos img{ width: 52px; }
  html body:not(#a):not(#b) .vt-certifs-pictos{ gap: 18px 22px; }
}


/* ====================================================================
   LE BLOC DES CERTIFICATIONS
   ====================================================================
   240 px de vide autour de 270 px de contenu, des textes hors charte et
   aucune gouttiere reguliere. */

html body:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* les traits qui ne delimitent rien */
html body:not(#a):not(#b):not(#c) .vt-certifs *{
  border-top: none !important;
  border-bottom: none !important;
}

/* la charte : Futura partout, une seule echelle */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span,
html body:not(#a):not(#b):not(#c) .vt-certifs h3,
html body:not(#a):not(#b):not(#c) .vt-certifs li,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs h3{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs li{
  font-size: 11.5px !important;
  line-height: 1.7 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
}

@media (max-width: 767px){
  /* les gouttieres, enfin regulieres */
  html body:not(#a):not(#b):not(#c) .vt-certifs{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes,
  html body:not(#a):not(#b):not(#c) .vt-certifs-bloc,
  html body:not(#a):not(#b):not(#c) .vt-certifs .vt-sans,
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* les deux mentions l'une sous l'autre, alignees a gauche */
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
}


/* ====================================================================
   LE VIDE SOUS LE BOUTON DE PAIEMENT
   ====================================================================
   Localise a la sonde : environ 300 px repartis entre le bas du bloc
   « garantie » et le bas de `.summary`. */

html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  margin-bottom: 8px !important;
  height: auto !important;
  min-height: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content,
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary > *:last-child,
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .product-showcase{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 18px !important;
  border-top: none !important;
}




/* ====================================================================
   SOCLE GOYA : LA PAGE PANIER, RATTRAPAGE
   ====================================================================
   Blocs ecartes a tort du premier socle parce qu'ils contenaient une
   couleur beige. Leur contenu est structurel : hauteur du champ de code
   promo, lisibilite du titre de page, traits du tableau.
   ==================================================================== */
/* ====================================================================
   LE PANNEAU DU PANIER
   ====================================================================
   Un compteur a zero ne s'affiche pas, et le panneau tient sur un seul
   blanc du haut en bas. */

/* 1. plus aucune pastille a zero, ni dans l'entete ni dans le panneau.
      Le theme pose `et-count-zero` tout seul : on s'en sert. */
html body:not(#a):not(#b):not(#c) .item-counter.et-count-zero{
  display: none !important;
}

/* 2. dans le panneau, le compteur est blanc sur blanc : un rond vide colle
      au mot « Panier ». La liste des articles est juste en dessous, le
      chiffre n'apprend rien. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title .item-counter{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 3. un seul blanc : entete, corps, pied. */
html body:not(#a):not(#b):not(#c) #side-cart,
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-content,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons{
  background-color: #ffffff !important;
  background-image: none !important;
}
/* la limite entre l'entete et le corps ne doit pas se voir */
html body:not(#a):not(#b):not(#c) #side-cart > header{
  border-bottom: none !important;
  box-shadow: none !important;
}


/* ====================================================================
   LA PAGE PANIER
   ====================================================================
   Neuf defauts du theme, tous mesures a 375 px. Voir l'en-tete du
   script pour les chiffres d'avant. */

/* 1. LE TITRE. Ecrit en beige sur un bandeau beige : present, invisible.
      Le bandeau faisait 185 px de haut pour ne rien montrer. */
html body:not(#a):not(#b):not(#c) .page-title,
html body:not(#a):not(#b):not(#c) .regular-title .page-title{
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) .regular-title{
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}

/* 2. LA TABLE NE DEBORDE PLUS. `table-layout: fixed` est le seul moyen
      d'obliger une table a tenir dans la largeur qu'on lui donne. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
html body:not(#a):not(#b):not(#c) .shop_table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td{
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 767px){

  /* 3. LA LIGNE D'ARTICLE. La photo, le nom et le prix, puis la quantite :
        chacun a sa place, plus de prix colle au milieu du nom. */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    width: 74px !important;
    padding: 14px 10px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    padding: 14px 8px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-name,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details a{
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .amount{
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* 4. LE CODE PROMO. Champ et bouton a la meme hauteur, cote a cote,
        dans la largeur. Avant : 178 + 155 a x=47, soit 51 px hors ecran,
        et 8 px d'ecart de hauteur entre les deux. */
  html body:not(#a):not(#b):not(#c) .coupon{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon input[name="coupon_code"]{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon button{
    flex: 0 0 auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

/* 5. « SOUS-TOTAL » : beige sur blanc, contraste 1,05:1. */
html body:not(#a):not(#b):not(#c) .cart-subtotal th,
html body:not(#a):not(#b):not(#c) .cart_totals th{
  color: #22252b !important;
}

/* 6. LA LIGNE DU CODE PROMO. Le theme peint la ligne ENTIERE en vert :
      deux aplats qui se chevauchent, et le libelle par-dessus. On rend
      la ligne au blanc et on garde le vert pour le texte. */
html body:not(#a):not(#b):not(#c) tr.cart-discount,
html body:not(#a):not(#b):not(#c) tr.cart-discount th,
html body:not(#a):not(#b):not(#c) tr.cart-discount td{
  background-color: transparent !important;
  background-image: none !important;
  color: #094846 !important;
}
html body:not(#a):not(#b):not(#c) tr.cart-discount th{
  font-size: 11px !important;
  letter-spacing: .04em !important;
}
html body:not(#a):not(#b):not(#c) tr.cart-discount .woocommerce-remove-coupon{
  color: #8a8f98 !important;
  font-size: 10px !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}

/* 7. LE TOTAL sur une seule ligne. Avant : « 74 € » / « (dont 12 € » /
      « VAT) », trois lignes pour un montant. */
html body:not(#a):not(#b):not(#c) .order-total td,
html body:not(#a):not(#b):not(#c) .cart-subtotal td,
html body:not(#a):not(#b):not(#c) .cart_totals .amount{
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .order-total .includes_tax,
html body:not(#a):not(#b):not(#c) .order-total small{
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  opacity: .7 !important;
  white-space: nowrap !important;
}

/* 8. LE BOUTON. Le texte se calait en haut parce que le line-height
      (13 px) valait la taille de police. On centre pour de vrai. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

/* 9. LES GOUTTIERES. Le contenu ne touche jamais le bord de l'ecran. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .woocommerce-cart-form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals > *{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ====================================================================
   LA CHARTE DES PAGES INTERIEURES
   ====================================================================
   Une seule mise en page pour Concept, Engagements, FAQ et Contact :
   sur-titre en petites capitales, titre de page a la meme taille
   partout, gouttieres de 16 px, colonnes pleine largeur. */
@media (max-width: 767px){

  /* 1. LES COLONNES REPRENNENT LA LARGEUR DE L'ECRAN.
        Mesure avant : 203 px sur 375, centrees. C'est la cause de tous
        les textes etrangles et des retraits absurdes. */
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-3,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-4,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-6,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-8,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-9,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-12{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .wpb_content_element{
    width: auto !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  /* pas de gouttiere qui se cumule d'un niveau a l'autre */
  html body:not(#a):not(#b):not(#c) .wpb_content_element .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. LE TITRE DE PAGE : la meme taille partout. Avant, 21 px sur la
        FAQ et 48 sur les Engagements. */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
  html body:not(#a):not(#b):not(#c) h2.engagements-title-nature-01,
  html body:not(#a):not(#b):not(#c) .jh-titre{
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    margin: 18px 0 20px !important;
  }

  /* 3. L'ESPACE AVANT LE TITRE. 314 px de vide avant « Questions
        frequentes », dont 201 px pour la seule ligne du sur-titre. */
  html body:not(#a):not(#b):not(#c) .wpb_text_column:first-child,
  html body:not(#a):not(#b):not(#c) .vc_row > .vc_column_container:first-child .wpb_wrapper > .wpb_text_column:first-child{
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_row{
    padding-top: 0 !important;
  }

  /* 4. L'ACCORDEON DE LA FAQ. Le titre partait a 143 px du bord. */
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_content{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  /* 5. LE FORMULAIRE DE CONTACT. Les champs etaient blancs sur le beige
        de la page : on rend le fond au beige et on retire le cadre qui
        s'ajoutait a la bordure du champ. */
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="text"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="email"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="tel"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper textarea,
  html body:not(#a):not(#b):not(#c) .gform_wrapper select{
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_body,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_fields,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gfield{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LES BLOCS POSES APRES LA PREMIERE EXTRACTION
   ====================================================================
   Corrections faites sur jhounysecret apres la construction du socle,
   toutes structurelles : panier en blocs, cartes cliquables, retour au
   panier en lien, tunnel de commande en blanc.
   ==================================================================== */
/* ====================================================================
   LA PAGE PANIER : CROIX, QUANTITE, TRAITS
   ==================================================================== */

/* 1. LA CROIX. 73 px de large pour 16 de haut : un X etire en travers du
      nom du produit. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove,
html body:not(#a):not(#b):not(#c) .shop_table a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::before,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::after{
  content: none !important;
  display: none !important;
}

/* 2. LA QUANTITE. 25 px de large : le « + » venait se coller au prix. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
    border: 1px solid #ddd8ce !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity input.qty{
    width: 34px !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .plus,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .minus{
    width: 28px !important;
    border: none !important;
    background: transparent !important;
  }
}

/* 3. UN SEUL TRAIT. Meme couleur, meme epaisseur, jamais transparent :
      un trait semi-transparent change de teinte selon ce qu'il y a
      derriere, et deux cellules voisines ne se raccordent plus. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td,
html body:not(#a):not(#b):not(#c) .cart_totals tr,
html body:not(#a):not(#b):not(#c) .cart_totals th,
html body:not(#a):not(#b):not(#c) .cart_totals td{
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid #e8e4dc !important;
}
/* la premiere ligne n'a pas de trait au-dessus */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child td,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child th,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child td{
  border-top: none !important;
}


/* ====================================================================
   LA COLONNE DE LA QUANTITE
   ====================================================================
   55 px de colonne pour un selecteur de 96 : il debordait sur le
   sous-total. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    width: 104px !important;
    min-width: 104px !important;
    flex: 0 0 104px !important;
    max-width: 104px !important;
    padding-right: 6px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    width: 62px !important;
    min-width: 62px !important;
    flex: 0 0 62px !important;
    max-width: 62px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    width: 92px !important;
    min-width: 92px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    width: calc(100% - 172px) !important;
    max-width: calc(100% - 172px) !important;
    flex: 1 1 auto !important;
  }
}


/* ====================================================================
   LE PANNEAU DU PANIER : EN-TETE ALIGNE, BOUTONS ASSORTIS
   ==================================================================== */

/* 1. LES DEUX BOUTONS, la meme police et la meme graisse. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons a{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

/* 2. L'EN-TETE sur la meme verticale que les produits : les 5 px de
      decalage venaient du conteneur interne du bandeau. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .container{
  padding-left: 25px !important;
  padding-right: 25px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .et-close{
  margin-right: 0 !important;
  right: auto !important;
}


/* ====================================================================
   LES ALIGNEMENTS, EN DERNIER MOT
   ==================================================================== */

/* 1. L'EN-TETE DU PANNEAU sur la verticale des produits : 50 px, pas 75. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart > header > .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  padding-left: 50px !important;
  padding-right: 50px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. LA LIGNE DU PANIER : les colonnes Bootstrap ne tiennent pas a cette
      largeur, la quantite se posait sur le nom. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    padding: 0 !important;
    order: 2 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: right !important;
    padding: 0 !important;
    order: 3 !important;
    white-space: nowrap !important;
  }
  /* le prix unitaire sous le nom, pas en double au milieu */

}


/* ====================================================================
   LES COLONNES DU PANIER : DES LARGEURS, PAS UN PARTAGE A EGALITE
   ====================================================================
   `table-layout: fixed` sans largeurs donnait 194 px a la colonne photo
   et laissait 226 px vides a droite. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
  width: auto !important;
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
    width: 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
  }
  /* la quantite a gauche, le sous-total colle au bord droit */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    margin-left: auto !important;
    text-align: right !important;
  }
}


/* ====================================================================
   LA LIGNE DU PANIER, D'UN BORD A L'AUTRE
   ==================================================================== */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  row-gap: 10px !important;
}
/* le nom prend toute la premiere rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name > a{
  display: block !important;
}
/* le prix unitaire passe a gauche de la seconde rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 2 !important;
  margin-right: auto !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 3 !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 !important;
}


/* ====================================================================
   LE PANIER EN BLOCS SUR TELEPHONE
   ====================================================================
   La table imposait sa repartition et laissait la moitie droite vide.
   Sur telephone, chaque ligne devient un bloc : photo a gauche, texte et
   chiffres sur toute la largeur restante. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tbody,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #e8e4dc !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    display: block !important;
    flex: 0 0 74px !important;
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail img{
    width: 74px !important;
    height: auto !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    row-gap: 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    order: 3 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* la croix, en haut a droite de la ligne */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name a.remove{
    float: right !important;
    margin-left: 8px !important;
  }
}


/* ====================================================================
   LE PRIX UNITAIRE, UNE SEULE FOIS
   ====================================================================
   Le sous-total suffit : a quantite 1 c'est le meme montant, et au-dela
   c'est lui qui compte. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details .product-price{
  display: none !important;
}


/* ====================================================================
   LES CARTES PRODUIT REDEVIENNENT CLIQUABLES
   ====================================================================
   Le conteneur de la section du titre debordait sur la premiere rangee
   et interceptait les clics. Les cartes passent au-dessus. */
html body:not(#a):not(#b):not(#c) ul.products li.product{
  position: relative !important;
  z-index: 2 !important;
}
html body:not(#a):not(#b):not(#c) ul.products li.product a{
  position: relative !important;
  z-index: 3 !important;
}


/* ====================================================================
   LE PSEUDO-ELEMENT QUI AVALAIT LES CLICS
   ====================================================================
   `.sec_row::after` : 334 x 405 px, z-index 999, invisible, pose sur la
   premiere rangee de produits. Un decor ne capte pas le pointeur. */
html body:not(#a):not(#b):not(#c) .sec_row::after,
html body:not(#a):not(#b):not(#c) .sec_row::before,
html body:not(#a):not(#b):not(#c) .vc_row::after,
html body:not(#a):not(#b):not(#c) .vc_row::before{
  pointer-events: none !important;
}


/* ====================================================================
   LE PRIX UNITAIRE MASQUE, ET LE BANDEAU DU HAUT EN BLANC
   ==================================================================== */

/* le prix unitaire : specificite portee au niveau des regles qui le
   rallumaient, et pose en dernier */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form div.product-price{
  display: none !important;
}

/* le bandeau d'annonce : texte blanc sur le vert de la marque */
html body:not(#a):not(#b):not(#c) .top-bar,
html body:not(#a):not(#b):not(#c) .top-bar *,
html body:not(#a):not(#b):not(#c) .header-notice,
html body:not(#a):not(#b):not(#c) .header-notice *,
html body:not(#a):not(#b):not(#c) .announcement-bar,
html body:not(#a):not(#b):not(#c) .announcement-bar *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ====================================================================
   LE BANDEAU DE LIVRAISON, LISIBLE
   ====================================================================
   Texte #22252b sur le vert #094846 : contraste 1,6:1. */
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison,
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ====================================================================
   LE FOND DES BLOCS DE REASSURANCE
   ====================================================================
   « Garantie premiere commande » et « Non teste sur les animaux » se
   posent sur un gris tres clair, sans bordure. */
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #f9f9f9 !important;
  padding: 24px 20px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 2px !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}


/* ====================================================================
   « VALIDER LA COMMANDE », UN CRAN PLUS DISCRET
   ====================================================================
   13 px en HussarBold : la police est grasse par construction. Futura
   en 11,5 px donne le meme bouton, en moins lourd. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}


/* ====================================================================
   LA PAGE DE COMMANDE EN BLANC
   ====================================================================
   Meme traitement que la fiche produit : pas de beige sur les tunnels
   d'achat. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c),
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #main,
html body.woocommerce-cart:not(#a):not(#b):not(#c),
html body.woocommerce-cart:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-cart:not(#a):not(#b):not(#c) #main,
html body.page-id-8:not(#a):not(#b):not(#c),
html body.page-id-8:not(#a):not(#b):not(#c) #wrapper,
html body.page-id-8:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.page-id-8:not(#a):not(#b):not(#c) .site-content,
html body.page-id-8:not(#a):not(#b):not(#c) #main{
  background-color: #ffffff !important;
}


/* ====================================================================
   LE DEGRADE VIOLET DU PIED DE PAGE
   ====================================================================
   `linear-gradient(rgb(184,164,220) ...)` pose sur le footer. Sur la
   page de commande il n'en reste qu'une bande de 36 px, bien visible. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c) footer.site-footer,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .footer,
html body.page-id-8:not(#a):not(#b):not(#c) footer.site-footer,
html body.page-id-8:not(#a):not(#b):not(#c) .footer{
  background-image: none !important;
  background-color: #ffffff !important;
}


/* ====================================================================
   LE LIEN DE CONFIDENTIALITE ET LE BOUTON « COMMANDER »
   ==================================================================== */

/* le lien reprend la taille de la phrase, et se signale par un trait */
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-text a,
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-link,
html body:not(#a):not(#b):not(#c) .woocommerce-terms-and-conditions-link{
  font-size: inherit !important;
  font-family: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  color: inherit !important;
}

/* « Commander » : meme traitement que « Valider la commande ».
   HussarBold est grasse par construction, Futura l'allege. */
html body:not(#a):not(#b):not(#c) #place_order,
html body:not(#a):not(#b):not(#c) button[name="woocommerce_checkout_place_order"]{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}


/* ====================================================================
   « RETOUR AU PANIER » : UN LIEN, PAS UN BOUTON
   ====================================================================
   Un retour ne pese pas autant que la validation de commande. */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout a[href*="panier"].button,
html body:not(#a):not(#b):not(#c) .checkout .wc-backward,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward{
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #22252b !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
/* la fleche, dessinee au trait devant le texte */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward::before,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}



/* ====================================================================
   SOCLE GOYA : LA HAUTEUR DU BANDEAU DE TITRE, RATTRAPAGE
   ====================================================================
   Mesure sur maisonsd.lystes.ai /boutique/, a 375 px : le bandeau fait
   220 px pour un titre de 40 px. Trois niveaux de rembourrage :

     .regular-title                      34 + 28
     .row.woocommerce-products-header    26 + 24
     h1.et-shop-title                    30 + 34   <- non vise jusqu'ici

   Mon premier socle ne nommait que le `<header>`, or selon les pages le
   thème utilise un `<div class="row woocommerce-products-header">`, et
   pose en plus un rembourrage sur le titre lui-meme.

   On remet tout a zero et on porte l'air sur un seul niveau. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .regular-title,
  html body:not(#a):not(#b):not(#c) .regular-title .hero-header-container,
  html body:not(#a):not(#b):not(#c) .regular-title .row,
  html body:not(#a):not(#b):not(#c) .regular-title .col-lg-8,
  html body:not(#a):not(#b):not(#c) .regular-title h1,
  html body:not(#a):not(#b):not(#c) h1.et-shop-title,
  html body:not(#a):not(#b):not(#c) .woocommerce-products-header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* un seul niveau porte l'air : environ 96 px de bandeau au total */
  html body:not(#a):not(#b):not(#c) .regular-title{
    padding-top: 28px !important;
    padding-bottom: 26px !important;
  }

  /* la description de page, quand elle est vide, ne prend pas de place */
  html body:not(#a):not(#b):not(#c) .page-description:empty{
    display: none !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LA BARRE DU HAUT DU MENU MOBILE
   ====================================================================
   Mesure sur maisonsd.lystes.ai : la bande `.mobile-bar` est en
   rgb(248,248,248), le panneau en beige. Deux gris casses poses l'un
   contre l'autre : la limite se voit comme un trait.

   Mon bloc d'origine corrigeait avec le beige de Jhouny ecrit en dur,
   ce qui ne vaut que pour ce site. Ici la barre devient transparente :
   elle prend alors la couleur du panneau, quelle que soit la marque. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar.light,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) #mobile-menu .mobile-bar{
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  /* la croix de fermeture, sans pastille grise */
  html body:not(#a):not(#b):not(#c) #mobile-menu .et-close,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .et-close{
    background-color: transparent !important;
    box-shadow: none !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LES DEUX DERNIERS VIDES
   ====================================================================
   Mesures sur maisonsd.lystes.ai a 375 px. */
@media (max-width: 767px){

  /* 1. L'AIR AUTOUR DU TITRE DE PAGE
        Mesure : le titre « ENGAGEMENTS » porte padding 16 en haut et
        35 en bas, PLUS marge 18 et 20. Quatre valeurs pour un seul
        ecart, et 60 px de vide avant le premier paragraphe.
        On pose un seul ecart, sur la marge. */
  html body:not(#a):not(#b):not(#c) [class*="engagements-header"] h1,
  html body:not(#a):not(#b):not(#c) [class*="engagements-header"] h2,
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"] h1,
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"] h2{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"]{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="-column-nature"]{
    padding-top: 0 !important;
  }

  /* 2. LA BANDE BLANCHE AVANT LE PIED DE PAGE
        Le contenu s'arrete, et le fond de la page apparait sur une
        centaine de pixels. On supprime le vide plutot que de le
        peindre : une couleur en dur ne vaudrait que pour une marque. */
  html body:not(#a):not(#b):not(#c) .site-content{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .site-content > *:last-child,
  html body:not(#a):not(#b):not(#c) .wpb-content-wrapper > *:last-child,
  html body:not(#a):not(#b):not(#c) .vc_section:last-child,
  html body:not(#a):not(#b):not(#c) .sec_row:last-child{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .page-padding{
    padding-bottom: 0 !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LES COLONNES ETROITES QUI DECENTRENT LES TITRES
   ====================================================================
   Mesure sur maisonsd.lystes.ai, accueil, a 375 px : le titre
   « SKINCARE » et son sur-titre sont centres... dans un conteneur de
   238 px place a x=48. A l'ecran, ils paraissent donc decales vers la
   gauche.

   Mon bloc precedent ne nommait que `.vc_col-sm-*`. Le theme utilise
   aussi les variantes md, lg et xs selon les pages. On les prend
   toutes, plus les conteneurs internes. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) [class*="vc_col-sm-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-md-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-lg-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-xs-"],
  html body:not(#a):not(#b):not(#c) [class*="col-md-"],
  html body:not(#a):not(#b):not(#c) [class*="col-lg-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* le sur-titre et le titre sont centres, et prennent la largeur utile */
  html body:not(#a):not(#b):not(#c) .vt-surtitre,
  html body:not(#a):not(#b):not(#c) .vt-titre-uni,
  html body:not(#a):not(#b):not(#c) .jh-surtitre,
  html body:not(#a):not(#b):not(#c) [class*="surtitre"],
  html body:not(#a):not(#b):not(#c) [class*="titre-uni"]{
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ====================================================================
   SOCLE GOYA : LE DIAPORAMA D'ACCUEIL, BORD A BORD
   ====================================================================
   Mesure sur maisonsd.lystes.ai, accueil, a 337 px : le module
   Slider Revolution fait 270 px a x=33. Il vit dans un
   `.vc_column-inner` qui porte 16 px de gouttiere, plus le retrait de
   sa propre ligne.

   JP : le diaporama doit aller d'un bord a l'autre, et lui SEUL. Le
   texte des autres blocs garde ses gouttieres.

   On ne vise donc que les conteneurs qui portent reellement un module
   de diaporama, grace a `:has()`. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(rs-fullwidth-wrap),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(.rev_slider),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(.rev_slider_wrapper),
  html body:not(#a):not(#b):not(#c) .wpb_column:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_row:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_row:has(.rev_slider_wrapper){
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* le module lui-meme prend toute la largeur */
  /* On ne touche PLUS aux dimensions du module : Slider Revolution
     les calcule lui-meme, et une largeur forcee les mettait a zero.
     Seuls les conteneurs perdent leur gouttiere, plus haut. */
}


/* ====================================================================
   SOCLE GOYA : TOUT LE RESTE, COULEURS DE MARQUE RETIREES
   ====================================================================
   Les blocs de jhounysecret que mon tri avait ecartes a tort. Seules
   les declarations posant le beige #fcf8f1 ou le vert #094846 ont ete
   neutralisees, ligne par ligne : la structure est conservee.
   Les blocs vraiment propres a Jhouny (routines, hero) restent dehors.
   ==================================================================== */
/* ====================================================================
   SOCLE GOYA : TOUT LE RESTE, COULEURS DE MARQUE RETIREES
   ====================================================================
   Les blocs de jhounysecret que mon tri avait ecartes. Ici, seules les
   declarations qui posaient le beige #fcf8f1 ou le vert #094846 ont ete
   neutralisees, ligne par ligne. Toute la structure est conservee :
   ecarts entre sur-titre et titre, alignement du pied de page, polices
   de la fiche produit, colonnes des routines.
   ==================================================================== */

/* ====================================================================
   LES ETIQUETTES DE REASSURANCE SUR UNE SEULE LIGNE
   ====================================================================
   Remarque de JP : « ca doit etre sur une ligne donc reduire la police sur
   soin vegan et expertise ». */
html body:not(#a):not(#b) .vt-reassurance,
html body:not(#a):not(#b) .product-reassurance{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}
html body:not(#a):not(#b) .vt-reassurance span,
html body:not(#a):not(#b) .product-reassurance span{
  font-size: 11px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}
@media (max-width: 520px){
  html body:not(#a):not(#b) .vt-reassurance span,
  html body:not(#a):not(#b) .product-reassurance span{ font-size: 9.5px !important; }
}



/* ====================================================================
   LES CERTIFICATIONS DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 375 px AVANT : huit pictogrammes de 120 x 120 empiles, 960 px
   de haut, soit huit ecrans a parcourir. APRES : une ligne qui defile au
   doigt, 78 px de haut. */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  padding: 4px 0 10px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* la barre de defilement decalerait les pictogrammes */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > *{
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (min-width: 768px){
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    gap: 26px !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
}




/* ====================================================================
   LE MENU ET LE PANIER PASSENT DEVANT LA BARRE DE DIAGNOSTIC
   ====================================================================
   Meme defaut que sur havilorskin.lystes.fr, meme theme : le panneau lateral
   etait a z-index 604, sous la barre flottante du widget et sous l'entete.
   Le panier lateral avait le meme sort. Les deux passent devant ; la barre
   du widget reste au-dessus du contenu, mais sous eux. */
@media (max-width: 991px){

  html body:not(#a):not(#b) .side-mobile-menu,
  html body:not(#a):not(#b) .side-panel.side-menu,
  html body:not(#a):not(#b) .side-panel.side-cart,
  html body:not(#a):not(#b) .side-panel.mini-cart,
  html body:not(#a):not(#b) [class*="cart-panel"],
  html body:not(#a):not(#b) .mini-cart-panel{
    z-index: 100000 !important;
  }
  html body:not(#a):not(#b) .side-panel-overlay,
  html body:not(#a):not(#b) .panel-overlay{
    z-index: 99998 !important;
  }
  /* la barre du widget reste visible, mais derriere les panneaux */
  html body:not(#a):not(#b) .lystes-chat-toggle,
  html body:not(#a):not(#b) [class*="lystes"][class*="sticky"]{
    z-index: 9000 !important;
  }

  /* les entrees du menu tiennent dans l'ecran, comme sur Havil’Or */
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b) .side-mobile-menu .sliding-menu-panel > li > a{
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .1em !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel{
    padding-bottom: 80px !important;
  }
}



/* ====================================================================
   LA CHARTE DES TITRES : UN SUR-TITRE, PUIS LE TITRE
   ====================================================================
   Structure de la maison, relevee sur la page d'accueil :

       JHOUNY'S SECRET     sur-titre, petit, tres espace
       HAIRCARE            titre, gros, majuscules, Futura

   Elle s'applique partout, y compris a la page des routines. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  display: block !important;
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 10px !important;
  opacity: .8 !important;
}
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre{
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 26px !important;
  line-height: 1.22 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 32px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    font-size: 21px !important;
    margin: 0 0 26px !important;
  }
}
html body:not(#a):not(#b):not(#c) .jh-entete-section{
  margin: 40px 0 0 !important;
  padding: 0 16px !important;
}



/* ====================================================================
   L'ECART ENTRE LE SUR-TITRE ET LE TITRE
   ====================================================================
   Mesure AVANT : 19 px, soit 10 px de marge basse du sur-titre plus 20 px
   de marge interne haute posee par le theme sur le titre. Deux valeurs qui
   s'ajoutent, dont une invisible tant qu'on ne regarde que les marges.
   APRES : un seul des deux porte l'ecart, 8 px. */
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre,
html body:not(#a):not(#b):not(#c) .jh-entete-section h1,
html body:not(#a):not(#b):not(#c) .jh-entete-section h2{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 8px !important;
}
/* le meme couple sur le reste du site */
html body:not(#a):not(#b):not(#c) .vt-surtitre{
  margin-bottom: 8px !important;
}
html body:not(#a):not(#b):not(#c) .vt-titre-uni{
  padding-top: 0 !important;
  margin-top: 0 !important;
}



/* ====================================================================
   REGLAGES RELEVES PAR JP DANS L'INSPECTEUR
   ====================================================================
   25/09/2026. Valeurs donnees par JP apres essai dans son navigateur.

   Son selecteur d'origine visait `post-23` et un `nth-child(6)` : il
   cesserait de marcher des qu'une section serait ajoutee avant. On vise
   donc le conteneur par son CONTENU, avec `:has()`. */
html body:not(#a):not(#b):not(#c) .vc_column-inner:has(> .wpb_wrapper > .jh-routines),
html body:not(#a):not(#b):not(#c) .wpb_wrapper:has(> .jh-routines),
html body:not(#a):not(#b):not(#c) .wpb_text_column:has(.jh-routines),
html body:not(#a):not(#b):not(#c) .wpb_text_column:has(.jh-routines) > .wpb_wrapper{
  padding: 0 !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) a.jh-routine-btn{
    font-size: 7px !important;
    letter-spacing: .08em !important;
    padding: 8px 8px !important;
    min-height: 30px !important;
  }
}



/* ====================================================================
   LE TITRE DE SECTION SUR MOBILE, REGLAGE DE JP
   ==================================================================== */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    margin-bottom: 32px !important;
    padding: 0 !important;
  }
}



/* ====================================================================
   LE SUR-TITRE COLLE AU TITRE, REGLAGE DE JP
   ====================================================================
   Marge basse a zero : seul l'interligne du titre separe les deux lignes.
   Ce bloc vient en dernier, il gagne donc sur les valeurs de 10 et 8 px
   posees plus haut. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  color: #6b6f76 !important;
  margin-bottom: 0 !important;
}



/* ====================================================================
   LES FINITIONS DU MENU MOBILE
   ====================================================================
   Quatre points releves par JP le 25/09, tous mesures avant correction. */
@media (max-width: 991px){

  /* 1. la police du menu : Futura, comme le reste du site.
        Mesure avant : averta-light-webfont. */
  html body:not(#a):not(#b):not(#c) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .sliding-menu-panel > li > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .et-menu-account-btn{
    font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  }

  /* 2. un seul beige, du haut en bas du panneau.
        Mesure avant : rgb(248,248,248) contre rgb(252,248,241). */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar.light,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .mobile-bar{
  /* couleur de marque retiree : background-color: #fcf8f1 !important; */
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* 3. les icones du panneau se voient : trait anthracite sur beige,
        contraste 12,4:1. */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras svg{
    stroke: #22252b !important;
    color: #22252b !important;
    width: 21px !important;
    height: 21px !important;
  }
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar a{
    color: #22252b !important;
    opacity: 1 !important;
  }

  /* 4. l'icone du compte redevient un trait, pas un aplat.
        Les icones Feather sont dessinees en trait ; le theme leur posait
        un remplissage. */
  html body:not(#a):not(#b):not(#c) svg.feather,
  html body:not(#a):not(#b):not(#c) svg.feather-user,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg *{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn{
    color: #22252b !important;
  }
}



/* ====================================================================
   LE TITRE COLLE A SON SUR-TITRE
   ====================================================================
   Mesure AVANT : 32 px d'ecart, qui venaient d'un `margin-top` sur le
   titre et non d'une marge du sur-titre. Un titre qui suit son sur-titre
   forme un seul bloc avec lui : pas de marge entre les deux. */
html body:not(#a):not(#b):not(#c) .vt-surtitre + h1,
html body:not(#a):not(#b):not(#c) .vt-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre + .vt-titre-uni,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h1,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre ~ h1.vt-titre-uni{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-surtitre,
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}



/* ====================================================================
   LE SUR-TITRE ET SON TITRE FORMENT UN BLOC
   ====================================================================
   Mesure : 32 px d'ecart, venus d'un `margin-top` sur le titre. Les deux
   vivent dans des `.wpb_text_column` differents, donc le selecteur `+`
   entre eux ne trouvait rien : on vise le bloc QUI SUIT un bloc
   `titlescript`.

   Le sur-titre garde sa taille de sur-titre : la regle de 42 px ecrite
   pour la page Concept ne doit pas l'atteindre ici. */
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h1,
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h2,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h2{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) p.vt-surtitre{
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .28em !important;
  margin: 0 0 2px !important;
}



/* ====================================================================
   LES BADGES DE LA FICHE PRODUIT
   ====================================================================
   Le badge « Expertise francaise » collait son drapeau au bord, celui du
   dessous avait un retrait : deux blocs voisins, deux retraits. On pose
   le meme sur les deux, sur mobile comme sur ordinateur. */
html body:not(#a):not(#b):not(#c) .jh-badge,
html body:not(#a):not(#b):not(#c) .vt-badge,
html body:not(#a):not(#b):not(#c) [class*="badge-origine"],
html body:not(#a):not(#b):not(#c) [class*="badge-vegan"]{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .jh-badge > :first-child,
html body:not(#a):not(#b):not(#c) .vt-badge > :first-child{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}



/* ====================================================================
   L'ALIGNEMENT DES QUESTIONS, ET LA BANDE BLANCHE
   ==================================================================== */

/* 1. le « + » est en position absolue a gauche : le texte doit lui
      laisser sa place, sinon il passe dessous. */
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  position: relative !important;
  padding-left: 30px !important;
  padding-right: 0 !important;
  min-height: 18px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  margin-top: -7px !important;
  transform: scale(.62) !important;
  width: 14px !important;
  height: 14px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_content{
  padding-left: 30px !important;
}

/* 2. le beige va jusqu'au pied de page */
html body:not(#a):not(#b):not(#c) .vc_section.videoservices,
html body:not(.single-product):not(#a):not(#b):not(#c) #wrapper,
html body:not(.single-product):not(#a):not(#b):not(#c) .page-wrapper-inner,
html body:not(.single-product):not(#a):not(#b):not(#c) .site-content{
  /* couleur de marque retiree : background-color: #fcf8f1 !important; */
}
html body:not(#a):not(#b):not(#c) .vc_section.videoservices{
  padding-bottom: 0 !important;
}



/* ====================================================================
   LES FINITIONS DU CHAT PRODUIT
   ==================================================================== */

/* 1. LE CHAMP : pas de cadre. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-input,
html body:not(#a):not(#b):not(#c) #lystes-product-chat textarea,
html body:not(#a):not(#b):not(#c) #lystes-product-chat input[type="text"]{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* 2. L'AVATAR DU DIAGNOSTIC. C'est son conteneur qui l'ecrasait a 7 px
      de large : on lui rend sa place avant de cadrer l'image. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn > span:first-child{
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn img{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* 3. LA FLECHE D'ENVOI, dessinee au trait et non remplie.
      Le SVG du plugin est une forme pleine : on le cache et on dessine
      la fleche avec un masque, comme pour l'icone du panier. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn svg{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn{
  position: relative !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 14px 14px !important;
  mask-size: 14px 14px !important;
}

/* 4. LE DERNIER BLOC BLANC de la fiche produit. */
html body.single-product:not(#a):not(#b) .sticky-product-bar{
  /* couleur de marque retiree : background-color: #fcf8f1 !important; */
}



/* ====================================================================
   LA FICHE PRODUIT : FOND BLANC
   ====================================================================
   Demande neuf fois par JP. J'avais compris l'inverse et pose du beige :
   c'est corrige ici, et ce bloc vient en dernier. */
html body.single-product:not(#a):not(#b),
html body.single-product:not(#a):not(#b) #wrapper,
html body.single-product:not(#a):not(#b) .page-wrapper-inner,
html body.single-product:not(#a):not(#b) .site-content,
html body.single-product:not(#a):not(#b) #main,
html body.single-product:not(#a):not(#b) .product-page-wrapper,
html body.single-product:not(#a):not(#b) .sticky-product-bar,
html body.single-product:not(#a):not(#b) .vt-certifs,
html body.single-product:not(#a):not(#b) .summary,
html body.single-product:not(#a):not(#b) .product-gallery-inner{
  background-color: #ffffff !important;
}

/* le trou de 151 px sous le bouton de paiement express */
html body.single-product:not(#a):not(#b) .wc-stripe-product-checkout-container,
html body.single-product:not(#a):not(#b) #wc-stripe-express-checkout-element,
html body.single-product:not(#a):not(#b) .wcpay-payment-request-wrapper,
html body.single-product:not(#a):not(#b) .__PrivateStripeElement{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 20px !important;
}
html body.single-product:not(#a):not(#b) .summary > *:last-child{
  margin-bottom: 0 !important;
}

/* les mentions de certification, en capitales */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}



/* ====================================================================
   LE FOND BLANC DE LA FICHE PRODUIT, EN DERNIER MOT
   ====================================================================
   Meme nombre d'identifiants que les regles beige, et pose en dernier :
   rien ne peut plus le reprendre. */
html body.single-product:not(#a):not(#b):not(#c),
html body.single-product:not(#a):not(#b):not(#c) #wrapper,
html body.single-product:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.single-product:not(#a):not(#b):not(#c) .site-content,
html body.single-product:not(#a):not(#b):not(#c) #main,
html body.single-product:not(#a):not(#b):not(#c) .header-main,
html body.single-product:not(#a):not(#b):not(#c) .sticky-product-bar,
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs,
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #ffffff !important;
}



/* ====================================================================
   SOCLE GOYA : LES DERNIERS BLOCS, SANS LES COULEURS
   ====================================================================
   Sur demande de JP : reprendre 100 % des corrections de jhounysecret,
   seules les couleurs de marque sont retirees. Les blocs qui visent des
   classes propres a ce site (routines, hero) sont inertes ailleurs :
   leurs selecteurs ne trouvent rien, ils ne coutent rien.
   ==================================================================== */
/* ====================================================================
   LA BARRE FLOTTANTE « FAIRE MON DIAGNOSTIC PEAU »
   ====================================================================
   Mesure du 24/09/2026 AVANT : texte rgb(255,255,255) sur fond
   rgb(255,255,255), contraste 1:1. Invisible. Le fond de cette barre est
   blanc, contrairement au bouton noir du meme widget : son texte doit
   donc etre fonce, pas blanc. */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text,
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text *{
  color: #22252b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
/* le bouton rond a droite reste noir : son icone garde le blanc */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="send"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="arrow"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="submit"]{
  color: #ffffff !important;
}



/* ====================================================================
   LES CARTES DE ROUTINE
   ====================================================================
   Quatre gammes, une carte chacune. Le bouton met toute la gamme au
   panier et applique la remise ; le kit n'est pas un article de stock,
   pour que la commande transmise au laboratoire ne contienne que des
   references qu'il connait. */
html body:not(#a):not(#b) .jh-routines{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 16px 40px !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px){
  html body:not(#a):not(#b) .jh-routines{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
html body:not(#a):not(#b) .jh-routine{
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  border: 1px solid #e3e3e3 !important;
  padding: 24px 20px !important;
}
html body:not(#a):not(#b) .jh-routine h3{
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
html body:not(#a):not(#b) .jh-routine-soins{
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}
html body:not(#a):not(#b) .jh-routine-soins li{
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 0 0 0 16px !important;
  margin: 0 0 6px !important;
  position: relative !important;
}
html body:not(#a):not(#b) .jh-routine-soins li:before{
  content: "·";
  position: absolute;
  left: 4px;
}
html body:not(#a):not(#b) .jh-routine-prix{
  margin: 0 0 4px !important;
  font-size: 18px !important;
}
html body:not(#a):not(#b) .jh-routine-prix .jh-barre{
  text-decoration: line-through !important;
  opacity: .55 !important;
  font-size: 14px !important;
  margin-right: 8px !important;
}
html body:not(#a):not(#b) .jh-routine-eco{
  margin: 0 0 16px !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
}
html body:not(#a):not(#b) a.jh-routine-btn{
  display: block !important;
  background: #000000 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 14px 20px !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b) a.jh-routine-btn:hover{
  background: #22252b !important;
  color: #ffffff !important;
}


/* ====================================================================
   LES CARTES DE ROUTINE, AVEC LEUR PHOTO
   ====================================================================
   La photo occupe le haut, le texte suit, le bouton est colle au bas :
   les quatre boutons tombent ainsi sur la meme ligne, quelle que soit la
   longueur de la liste des soins. */
html body:not(#a):not(#b):not(#c) .jh-routine{
  padding: 0 !important;
  overflow: hidden !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-photo{
  width: 100% !important;
  margin: 0 !important;
  background: #f4f4f2 !important;
  line-height: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-photo img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-corps{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 20px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-corps h3{
  margin: 0 0 12px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-soins{
  flex: 1 1 auto !important;
  margin: 0 0 16px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix{
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 4px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre .amount,
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre{
  font-size: 14px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise .amount{
  font-size: 19px !important;
  font-weight: 600 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-eco{
  margin: 0 0 16px !important;
}
html body:not(#a):not(#b):not(#c) a.jh-routine-btn{
  margin-top: auto !important;
}


/* ====================================================================
   LES ROUTINES EN COLONNES
   ====================================================================
   Demande de JP : quatre colonnes sur ordinateur, deux sur tablette, deux
   sur mobile. Les quatre gammes tiennent donc sur une seule rangee sur un
   grand ecran. */
html body:not(#a):not(#b):not(#c) .jh-routines{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
}
@media (max-width: 1024px){
  html body:not(#a):not(#b):not(#c) .jh-routines{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .jh-routines{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 16px 36px !important;
  }
  /* a deux colonnes sur un telephone, le texte doit se resserrer */
  html body:not(#a):not(#b):not(#c) .jh-routine-corps{
    padding: 14px 12px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-corps h3{
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .04em !important;
    margin: 0 0 8px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-soins li{
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding-left: 10px !important;
    margin-bottom: 4px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise .amount{
    font-size: 16px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre .amount{
    font-size: 12px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-eco{
    font-size: 10.5px !important;
    margin-bottom: 12px !important;
  }
  html body:not(#a):not(#b):not(#c) a.jh-routine-btn{
    font-size: 10px !important;
    letter-spacing: .08em !important;
    padding: 12px 8px !important;
    min-height: 42px !important;
  }
}


/* ====================================================================
   « NOS ROUTINES » EST LISIBLE
   ====================================================================
   Mesure AVANT : rgb(252,248,241) sur rgb(255,255,255), contraste 1,06:1.
   Le titre heritait de la couleur reservee aux fonds fonces. APRES :
   14,1:1. L'ecart avec les cartes passe de 26 a 40 px. */
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre,
html body:not(#a):not(#b):not(#c) .jh-entete-section h1,
html body:not(#a):not(#b):not(#c) .jh-entete-section h2{
  color: #6B5328 !important;
  margin-bottom: 40px !important;
}
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  color: #6b6f76 !important;
}
html body:not(#a):not(#b):not(#c) .jh-entete-section{
  margin-top: 0 !important;
  border-top: 48px solid #fcf8f1 !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    margin-bottom: 32px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-entete-section{
    margin-top: 40px !important;
  }
}


/* ====================================================================
   LA GRILLE DES ROUTINES PREND TOUTE LA LARGEUR
   ====================================================================
   Mesure a 375 px : la grille faisait 296 px. Les trois conteneurs les
   plus proches etaient deja a zero, mais `.vc_column-inner`, plus haut,
   garde 22 px de chaque cote : 340 - 44 = 296. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(.jh-routines){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* le titre des cartes, reglage donne par JP */
  html body:not(#a):not(#b):not(#c) .jh-routine-corps h3{
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: .04em !important;
    margin: 0 !important;
    padding: 4px !important;
  }
}


/* ====================================================================
   LES PRIX DES ROUTINES SE SERRENT
   ====================================================================
   WooCommerce separe le montant et le symbole par une espace insecable,
   visible des que la police grandit. Le theme ajoute une marge sur
   `.amount`, et mon `gap` s'y ajoutait encore. Tout est ramene a une seule
   valeur, portee par le conteneur. */
html body:not(#a):not(#b):not(#c) .jh-routine-prix{
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 6px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .amount,
html body:not(#a):not(#b):not(#c) .jh-routine-eco .amount{
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}
/* le symbole colle a son montant */
html body:not(#a):not(#b):not(#c) .jh-routine-prix .woocommerce-Price-currencySymbol,
html body:not(#a):not(#b):not(#c) .jh-routine-eco .woocommerce-Price-currencySymbol{
  margin-left: 1px !important;
  padding-left: 0 !important;
  font-size: .82em !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre,
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise{
  display: inline-flex !important;
  align-items: baseline !important;
  margin: 0 !important;
}
/* « Vous economisez » reste sur une ligne avec son montant */
html body:not(#a):not(#b):not(#c) .jh-routine-eco{
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  margin: 0 0 14px !important;
  white-space: nowrap !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .jh-routine-prix{
    gap: 6px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-eco{
    gap: 4px !important;
    margin-bottom: 10px !important;
  }
}


/* ====================================================================
   PAS DEUX FOIS « NOS ROUTINES » SUR LA MEME PAGE
   ====================================================================
   Le theme affiche le titre de la page, et l'entete a la charte le
   repete juste en dessous. On masque celui du theme sur cette page :
   l'entete garde la structure sur-titre + titre voulue par JP. */
html body.page-id-134256:not(#a):not(#b) .page-header,
html body.page-id-134256:not(#a):not(#b) .entry-header,
html body.page-id-134256:not(#a):not(#b) h1.entry-title,
html body.page-id-134256:not(#a):not(#b) h1.page-title{
  display: none !important;
}



/* ====================================================================
   LE TITRE EN DOUBLE SUR LA PAGE DES ROUTINES
   ====================================================================
   Mesure : un `<h2>` dans `.vt-head` a 149 px, et l'entete a la charte
   a 384 px. Deux fois « Nos routines », et 235 px de blanc entre les
   deux. On masque le bloc du theme : il n'a pas de sur-titre,
   contrairement a l'entete demandee par JP. */
html body.page-id-134256:not(#a):not(#b) .vt-sec .vt-head{
  display: none !important;
}
html body.page-id-134256:not(#a):not(#b) .vt-sec,
html body.page-id-134256:not(#a):not(#b) .vt-wrap{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
html body.page-id-134256:not(#a):not(#b) .jh-entete-section{
  margin-top: 24px !important;
}



/* ====================================================================
   LE HERO, SANS SLIDER REVOLUTION
   ====================================================================
   Le `<picture>` sert l'image du bureau au-dessus de 768 px, celle du
   telephone en dessous. Le navigateur choisit AVANT de telecharger.

   L'image porte ses dimensions dans le HTML : le navigateur reserve la
   place exacte des le premier rendu, et la page ne saute pas quand elle
   arrive. C'est ce qui manquait au diaporama, dont la hauteur devait etre
   devinee en CSS. */
html body:not(#a):not(#b) .jh-hero{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: #f4f4f2 !important;
}
html body:not(#a):not(#b) .jh-hero picture{
  display: block !important;
  width: 100% !important;
}
html body:not(#a):not(#b) .jh-hero img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  object-fit: cover !important;
}


/* ====================================================================
   LA MISE EN PAGE DES PRIX DES ROUTINES
   ====================================================================
   Les prix ne passent plus par `wc_price()` : plus d'espace insecable
   entre le montant et le symbole. Les deux prix partagent la meme ligne
   de base, l'economie passe dessous. */
html body:not(#a):not(#b):not(#c) .jh-routine-prix{
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 4px !important;
  flex-wrap: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre{
  text-decoration: line-through !important;
  opacity: .5 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise{
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
/* le symbole suit son montant, un peu plus petit */
html body:not(#a):not(#b):not(#c) .jh-devise{
  font-size: .78em !important;
  font-weight: inherit !important;
}
html body:not(#a):not(#b):not(#c) .jh-montant{
  font-variant-numeric: tabular-nums !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-eco{
  display: block !important;
  margin: 0 0 14px !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  opacity: .78 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-eco span{
  margin-right: 3px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .jh-routine-prix{
    gap: 8px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise{
    font-size: 17px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre{
    font-size: 12.5px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-eco{
    font-size: 10.5px !important;
    margin-bottom: 10px !important;
  }
}


/* ====================================================================
   LE HERO ET LES LIGNES BORD A BORD
   ====================================================================
   La gouttiere de 16 px vaut pour le texte, pas pour une image de
   pleine largeur. Une ligne marquee `no-padding` le dit elle-meme. */
html body:not(#a):not(#b):not(#c) .vc_row:has(.jh-hero){
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-hero,
html body:not(#a):not(#b):not(#c) .jh-hero picture,
html body:not(#a):not(#b):not(#c) .jh-hero img{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ====================================================================
   LES CARTES DE ROUTINES : FOND, POLICES, PRIX
   ====================================================================
   Le fond blanc des cartes tranchait sur le beige de la page. Tout
   passe au beige, les polices descendent d'un cran, et la ligne
   d'economie tient sur une seule ligne. */

/* 1. plus de fond blanc : la carte se pose sur le beige de la page */
html body:not(#a):not(#b):not(#c) .jh-routine-corps,
html body:not(#a):not(#b):not(#c) .jh-routine,
html body:not(#a):not(#b):not(#c) .jh-routine-carte{
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. les polices, un cran plus bas, toutes dans la meme famille */
html body:not(#a):not(#b):not(#c) .jh-routine-corps h3,
html body:not(#a):not(#b):not(#c) .jh-routine-corps li,
html body:not(#a):not(#b):not(#c) .jh-routine-corps p,
html body:not(#a):not(#b):not(#c) .jh-routine-prix,
html body:not(#a):not(#b):not(#c) .jh-routine-eco,
html body:not(#a):not(#b):not(#c) .jh-routine-btn{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-corps h3{
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
  margin: 0 0 10px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-corps li{
  font-size: 10px !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
  margin-bottom: 5px !important;
}

/* 3. les prix : une seule ligne, meme ligne de base */
html body:not(#a):not(#b):not(#c) .jh-routine-prix{
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
  margin: 12px 0 2px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-barre{
  font-size: 11px !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise{
  font-size: 16px !important;
}
/* la ligne d'economie ne se coupe plus avant le symbole */
html body:not(#a):not(#b):not(#c) .jh-routine-eco{
  white-space: nowrap !important;
  font-size: 9.5px !important;
  margin: 0 0 12px !important;
  opacity: .72 !important;
}
html body:not(#a):not(#b):not(#c) .jh-routine-eco span{
  margin-right: 4px !important;
}

/* 4. le bouton, a la meme echelle */
html body:not(#a):not(#b):not(#c) .jh-routine-btn{
  font-size: 8.5px !important;
  letter-spacing: .1em !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .jh-routine-corps{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-corps h3{
    font-size: 11px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-corps li{
    font-size: 9.5px !important;
  }
  html body:not(#a):not(#b):not(#c) .jh-routine-prix .jh-remise{
    font-size: 15px !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE RESTE EN LIGNE
   ====================================================================
   Mesure sur glowlyparis.fr, fiche produit a 375 px :
     .woocommerce-Price-currencySymbol   display: block, hauteur 0
   Le « € » est ecrase et s'affiche coupe.

   Cause : une de mes regles pose `display: block` sur les montants pour
   les empiler dans la ligne du panier. Le symbole est un `<span>` a
   l'interieur du montant : il herite du bloc et sort de la ligne.

   Un symbole de devise se lit sur la meme ligne que son nombre. */
html body:not(#a):not(#b):not(#c) .woocommerce-Price-currencySymbol,
html body:not(#a):not(#b):not(#c) .woocommerce-Price-amount bdi,
html body:not(#a):not(#b):not(#c) .amount .woocommerce-Price-currencySymbol{
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-Price-amount{
  white-space: nowrap !important;
}


/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE, ET LES VIGNETTES CARREES
   ====================================================================
   Deux defauts vus sur glowlyparis.fr, fiche produit a 375 px.

   1. Le « € » chevauche le nombre : il est en `display: block` avec une
      hauteur nulle. Ma regle precedente le remettait en ligne, mais une
      autre de mes regles (`li.product .amount { display: block }`) porte
      une classe de plus et gagnait. Ce bloc monte donc d'un cran de
      specificite, avec quatre identifiants au lieu de trois.

   2. Les vignettes de la galerie sont rondes. Un packshot dans un cercle
      se rogne sur les bords : le flacon est coupe. Elles redeviennent
      carrees, avec un coin a peine adouci. */

html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-currencySymbol,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount bdi,
html body:not(#a):not(#b):not(#c):not(#d) .summary .amount,
html body:not(#a):not(#b):not(#c):not(#d) li.product .amount,
html body:not(#a):not(#b):not(#c):not(#d) li.product .amount *{
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}
/* le prix reste un bloc, seul son contenu est en ligne */
html body:not(#a):not(#b):not(#c):not(#d) li.product .price,
html body:not(#a):not(#b):not(#c):not(#d) .summary .price{
  display: block !important;
}

/* 2. les vignettes carrees */
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-nav li img,
html body:not(#a):not(#b):not(#c):not(#d) .product-thumbnails li img{
  border-radius: 2px !important;
  overflow: hidden !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img.flex-active,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img:hover{
  border-radius: 2px !important;
}


/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE NE CHEVAUCHE PLUS LE NOMBRE
   ====================================================================
   Mesure sur glowlyparis.fr, fiche produit : le « € » se superpose au
   « 23 ». Le symbole est en `display: block` et resiste a tout, y
   compris a un style en ligne `!important` pose a la main : quelque
   chose le reimpose en continu.

   On cesse donc de se battre sur le `display` du symbole. On passe son
   conteneur en `flex` : dans un conteneur flex, un enfant declare
   `block` devient un element de ligne et se range a cote du precedent,
   quelle que soit sa valeur de display.

   `align-items: baseline` aligne le symbole sur la ligne d'ecriture du
   nombre, pas sur le haut de sa boite. */

html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount bdi{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount .woocommerce-Price-currencySymbol{
  flex: 0 0 auto !important;
  height: auto !important;
  line-height: inherit !important;
  margin: 0 !important;
}
/* le prix lui-meme reste sur sa ligne */
html body:not(#a):not(#b):not(#c):not(#d) .summary p.price,
html body:not(#a):not(#b):not(#c):not(#d) li.product .price{
  display: block !important;
  white-space: nowrap !important;
}


/* ====================================================================
   HAVIL’OR : LES DEUX DEFAUTS REMONTES PAR LES CLIENTES, 25/09/2026
   ====================================================================
   1. « Vous economisez » debordait de 77 px sur la carte voisine.
      Mesure a 375 px : la carte s'arrete a 181 px, ce texte allait
      jusqu'a 258. Il prend maintenant sa propre ligne.
   2. Le bouton « Essayer » pose sur les vignettes est retire, a la
      demande de JP. Le bouton de diagnostic reste. */

/* --- 1. l'economie passe sous le prix --- */
html body:not(#a):not(#b):not(#c) li.product .vt-economie,
html body:not(#a):not(#b):not(#c) .products .vt-economie{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-top: 4px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* le prix lui aussi sur sa propre ligne, pour que les deux s'empilent */
html body:not(#a):not(#b):not(#c) li.product .price{
  display: block !important;
  width: 100% !important;
}

/* --- 2. plus de bouton « Essayer » sur les vignettes --- */
/* ancienne regle display:none retiree : un style inline !important la
   rendait inoperante. Voir le bloc « LE CLIC SUR UNE VIGNETTE ». */


/* ====================================================================
   HAVIL’OR : LES PRIX S'ALIGNENT SUR LES TITRES
   ====================================================================
   Mesure a 375 px : titre et prix partaient du meme bord (x=48) mais
   le prix etait centre dans sa colonne, le titre a gauche. Les deux
   commencent maintenant sur la meme verticale. */
html body:not(#a):not(#b):not(#c) li.product .price,
html body:not(#a):not(#b):not(#c) li.product .vt-economie,
html body:not(#a):not(#b):not(#c) .products li .price,
html body:not(#a):not(#b):not(#c) .products li .vt-economie{
  text-align: left !important;
}


/* ====================================================================
   HAVIL’OR : LA GRILLE RESPIRE AVANT LE FOOTER
   ====================================================================
   Mesure a 375 px : zero pixel entre le dernier bouton et le footer.
   Le bouton « AU PANIER » et le footer partagent le meme bleu fonce,
   ils se fondaient l'un dans l'autre. */
html body:not(#a):not(#b):not(#c) .woocommerce ul.products,
html body:not(#a):not(#b):not(#c) ul.products.et-main-products{
  margin-bottom: 56px !important;
}

/* le titre s'aligne sur le prix, a gauche */
html body:not(#a):not(#b):not(#c) li.product .woocommerce-loop-product__title,
html body:not(#a):not(#b):not(#c) li.product h2.woocommerce-loop-product__title,
html body:not(#a):not(#b):not(#c) .products li .product-title{
  text-align: left !important;
}


/* ====================================================================
   HAVIL’OR : LE FOOTER SE RESSERRE
   ====================================================================
   Mesure a 375 px : 175 a 177 px entre chaque titre de colonne. Les
   colonnes sont faites de deux widgets, titre et liste, chacun avec
   22 px de marge basse qui s'additionnent. */
html body:not(#a):not(#b):not(#c) .footer-widgets .widget{
  margin-bottom: 8px !important;
}
/* le titre d'une colonne garde son air au-dessus, pas en dessous */
html body:not(#a):not(#b):not(#c) .footer-widgets .widget:has(> h3),
html body:not(#a):not(#b):not(#c) .footer-widgets .widget:has(> h2){
  margin-top: 12px !important;
  margin-bottom: 2px !important;
}
/* les liens de liste se resserrent */
html body:not(#a):not(#b):not(#c) .footer-widgets .widget li{
  margin-bottom: 2px !important;
  line-height: 1.9 !important;
}


/* ====================================================================
   HAVIL’OR : LE VIDE AU BAS DES COLONNES DU FOOTER
   ====================================================================
   Mesure a 375 px : 40 px de vide sous le dernier element de chaque
   colonne, plus 22 px de marge. 62 px perdus entre deux colonnes. */
html body:not(#a):not(#b):not(#c) .footer-widgets .column-first,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer2,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer3,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer4{
  margin-bottom: 4px !important;
}
/* le dernier element d'une colonne ne traine plus sa marge */
html body:not(#a):not(#b):not(#c) .footer-widgets .column-first > *:last-child,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer2 > *:last-child,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer3 > *:last-child,
html body:not(#a):not(#b):not(#c) .footer-widgets .footer4 > *:last-child{
  margin-bottom: 0 !important;
}
/* idem pour le dernier paragraphe ou la derniere liste a l'interieur */
html body:not(#a):not(#b):not(#c) .footer-widgets .widget > *:last-child,
html body:not(#a):not(#b):not(#c) .footer-widgets .widget ul:last-child,
html body:not(#a):not(#b):not(#c) .footer-widgets .widget p:last-child{
  margin-bottom: 0 !important;
}


/* ====================================================================
   HAVIL’OR : LE CLIC SUR UNE VIGNETTE OUVRE LA FICHE PRODUIT
   ====================================================================
   Une cliente qui cliquait sur un produit tombait sur une modale
   « Une erreur est survenue ». Le bouton de diagnostic est un <button>
   place DANS le lien du produit, en z-index 999999, couvrant une bande
   de 36 px sur la vignette : il captait le clic destine au produit.

   Son style inline force display:flex !important, qu'aucune feuille
   externe ne peut battre. En revanche il pose pointer-events et height
   SANS !important : c'est par la qu'on le neutralise. */
/* partout, pas seulement dans li.product : l'accueil n'en a pas */
html body:not(#a):not(#b):not(#c) .lystes-archive-diagnostic-btn,
html body:not(#a):not(#b):not(#c) .lystes-archive-tryon-inner{
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
/* le lien du produit reprend la main sur toute la vignette */
html body:not(#a):not(#b):not(#c) li.product .product_thumbnail > a{
  pointer-events: auto !important;
}


/* ====================================================================
   HAVIL’OR : PLUS DE GOOGLE PAY SUR LA FICHE PRODUIT
   ====================================================================
   Mesure : .wcpay-express-checkout-wrapper reste dans le flux avec sa
   marge de 16 px meme quand son bouton ne s'affiche pas. Retire, les
   logos de garantie remontent contre le bouton d'ajout au panier. */
html body:not(#a):not(#b):not(#c) .wcpay-express-checkout-wrapper,
html body:not(#a):not(#b):not(#c) .wcpay-payment-request-wrapper,
html body:not(#a):not(#b):not(#c) #wcpay-express-checkout-element,
html body:not(#a):not(#b):not(#c) #wc-stripe-express-checkout-element,
html body:not(#a):not(#b):not(#c) .wc-stripe-product-checkout-container,
html body:not(#a):not(#b):not(#c) .wcpay-express-checkout-wrapper + .wcpay-express-checkout-divider,
html body:not(#a):not(#b):not(#c) .wcpay-express-checkout-divider{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ====================================================================
   HAVIL’OR : LE BLOC DES CERTIFICATIONS REDEVIENT LISIBLE
   ====================================================================
   Contraste mesure : 1,00:1. « Certifie Bio & Vegan », « Conformite
   COSMOS / ECOCERT » et les six « x » de la liste etaient blancs sur
   blanc. Les icones que JP cherchait sont ces « x » : ils etaient la,
   simplement invisibles. Le bloc a ete concu sur un fond fonce. */
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc p,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc li,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc div,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc span{
  color: #6B5328 !important;
}
/* le bloc se resserre : 330 px pour six lignes de 22 px */
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* ====================================================================
   HAVIL’OR : LE BLOC NEWSLETTER EQUILIBRE SES MARGES
   ====================================================================
   Mesure a 375 px : padding-top 52 px, padding-bottom 48 px, et le bas
   du bloc a 1533 px tombe exactement sur le haut du footer. Trop d'air
   au-dessus, rien en dessous : les blocs de reassurance en fin de bloc
   se faisaient couper par le footer. */
html body:not(#a):not(#b):not(#c):not(#d) .vt-section-newsletter{
  padding-top: 28px !important;
  padding-bottom: 56px !important;
}
/* une separation nette entre la fin du contenu et le footer */
html body:not(#a):not(#b):not(#c):not(#d) .vt-section-newsletter + footer,
html body:not(#a):not(#b):not(#c):not(#d) .vt-section-newsletter ~ footer{
  margin-top: 0 !important;
}


/* ====================================================================
   HAVIL’OR : LE VIDE AVANT LES LOGOS DE CERTIFICATION
   ====================================================================
   Mesure a 375 px : le texte « Aucun produit n'est teste... » finit a
   2338 px, le premier logo commence a 2509. 171 px de vide. Le bloc
   .custom-guarantee-text fait 150 px de haut pour un contenu plus
   court : c'est lui qui traine cet air. */
html body:not(#a):not(#b):not(#c) .custom-guarantee-text{
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* le formulaire ne touche plus les bords de l'ecran : le bloc a un
   fond beige qui va bord a bord, mais son contenu doit garder la
   meme gouttiere de 16 px que le reste du site. */
html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form,
html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form input,
html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form button{
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form{
  padding-left: 16px !important;
  padding-right: 16px !important;
  max-width: 100% !important;
}


/* ====================================================================
   HAVIL’OR : LE BADGE DE REMISE SE LIT
   ====================================================================
   Mesure : le « % » de .onsale-after est en position absolue a x=42,
   la ou se peint le « 1 » de « 14 ». Il le recouvre, et le badge se
   lit « -%4 » au lieu de « -14 % ». Meme cause que le « € » qui
   chevauchait le prix sur Glowly : un caractere sorti du flux. */
html body:not(#a):not(#b):not(#c):not(#d) .badge.onsale .onsale-after,
html body:not(#a):not(#b):not(#c):not(#d) .badge.onsale .onsale-before{
  position: static !important;
  display: inline !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
}
/* le badge prend la largeur de son contenu, sans le comprimer */
html body:not(#a):not(#b):not(#c):not(#d) .badge.onsale.perc{
  width: auto !important;
  min-width: 0 !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}


/* ====================================================================
   HAVIL’OR : LE FOOTER GARDE SES DISTANCES
   ====================================================================
   Demande de JP, repetee : le contenu ne doit plus toucher le footer.
   Plutot que de corriger bloc par bloc, la marge est posee sur le
   footer lui-meme : elle vaut alors pour toutes les pages.

   Et le bloc de rassurance avait 22 px d'air au-dessus contre 4 en
   dessous ; l'equilibre est inverse. */
html body:not(#a):not(#b):not(#c):not(#d) footer.site-footer,
html body:not(#a):not(#b):not(#c):not(#d) footer#colophon{
  margin-top: 0 !important;
  border-top: 48px solid #fcf8f1 !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .vt-rassurance{
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}


/* ====================================================================
   HAVIL’OR : LA CROIX DE SUPPRESSION REDEVIENT ATTEIGNABLE
   ====================================================================
   Mesure a 375 px : le titre va de 117 a 341 px, la croix de 319 a
   341. Ils se recouvrent sur 22 px et le titre intercepte le clic.
   La croix etait donc presente mais inutilisable. */
html body.woocommerce-cart:not(#a):not(#b):not(#c) .cart_item .product-name,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .cart_item .product-name a{
  padding-right: 38px !important;
  box-sizing: border-box !important;
}
html body.woocommerce-cart:not(#a):not(#b):not(#c) .cart_item a.remove,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .cart_item .remove{
  position: relative !important;
  z-index: 5 !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 18px !important;
  text-align: center !important;
  color: #6B5328 !important;
  pointer-events: auto !important;
}


/* ====================================================================
   HAVIL’OR : LA CONTENANCE SOUS LE PRIX
   ====================================================================
   « 50 ml », discret, aligne a gauche comme le prix. */
html body:not(#a):not(#b):not(#c) .vt-contenance{
  display: block !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  color: #6b6f78 !important;
  text-align: left !important;
  margin: 2px 0 8px !important;
}


/* ====================================================================
   HAVIL’OR : LE LOGO SANS CADRE AU TAP
   ====================================================================
   style.css pose a:focus-visible { outline: 2px solid } ; sur iOS le
   tap donne le focus au lien du logo et dessine un cadre. Retire sur
   ce seul lien, les autres gardent leur contour clavier. */
html body:not(#a):not(#b):not(#c) #header .logolink:focus,
html body:not(#a):not(#b):not(#c) #header .logolink:focus-visible,
html body:not(#a):not(#b):not(#c) #header .logolink:active{
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}


/* ====================================================================
   HAVIL’OR : LE MONTANT RESTE DANS LE PANNEAU DU PANIER
   ====================================================================
   Mesure : panneau large de 297 px, montant a x=291 et son « € » a
   x=317, donc hors cadre ; un second montant a x=441. Le panneau
   copie le tableau du panier, dimensionne pour la pleine page. */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu{
  overflow-x: hidden !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu table,
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .shop_table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  display: block !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu thead{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu tbody,
html body:not(#a):not(#b):not(#c) .vt-panier-contenu tr{
  display: block !important;
  width: 100% !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu td{
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* le prix se detache, aligne a droite, entier */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu td.product-subtotal{
  text-align: right !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .woocommerce-Price-amount,
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .woocommerce-Price-amount bdi{
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .woocommerce-Price-currencySymbol{
  display: inline !important;
  position: static !important;
  margin-left: 2px !important;
}


/* ====================================================================
   HAVIL’OR : LE PANNEAU SE LIT ET SE MANIPULE
   ====================================================================
   Mesures dans le panneau de 294 px : croix a 0x0, bouton de mise a
   jour beige sur blanc, lignes de 229 px pour une image de 60. */

/* la croix de suppression redevient tapable */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu a.remove,
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #6B5328 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  float: right !important;
}

/* le bouton de mise a jour se voit */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu button[name="update_cart"],
html body:not(#a):not(#b):not(#c) .vt-panier-contenu [name="update_cart"]{
  color: #6B5328 !important;
  text-decoration: underline !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

/* les articles se resserrent : plus de vide de 170 px sous chaque image */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu tr{
  padding: 10px 0 !important;
  border-bottom: 1px solid #ece7de !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu td{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  min-height: 0 !important;
  height: auto !important;
}
html body:not(#a):not(#b):not(#c) .vt-panier-contenu td.product-thumbnail img{
  width: 60px !important;
  height: auto !important;
}


/* ====================================================================
   HAVIL’OR : LE PARENT DE LA CROIX N'EST PLUS MASQUE
   ====================================================================
   La croix calculait bien 32 px de large, mais son rectangle faisait
   0x0 : son conteneur .product-actions.product-remove etait en
   display:none. Un enfant d'un parent masque ne se peint jamais. */
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .product-actions,
html body:not(#a):not(#b):not(#c) .vt-panier-contenu .product-remove{
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 32px !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: right !important;
}


/* ====================================================================
   HAVIL’OR : LES 8 LOGOS EN GRILLE 4 + 4
   ====================================================================
   Rangee flex de 521 px dans 340 : elle defilait, premier logo coupe.
   Grille de 4 colonnes : 4 x 72 + 3 x 12 = 324 px, plus de defilement. */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  justify-items: center !important;
  align-items: center !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-snap-type: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > li{
  flex: none !important;
  width: 100% !important;
  max-width: 72px !important;
  margin: 0 !important;
  list-style: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > li img,
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > li svg{
  width: 100% !important;
  max-width: 72px !important;
  height: auto !important;
  display: block !important;
}


/* ====================================================================
   HAVIL’OR : LE VIDE AU-DESSUS DES LOGOS DE CERTIFICATION
   ====================================================================
   167 px entre « Non teste sur les animaux » et les logos, dont 40 px
   de mentions blanches sur blanc et 30 px de marge. Les logos
   touchaient le titre suivant. */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions *{
  color: #6B5328 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  text-align: center !important;
}
html body:not(#a):not(#b):not(#c) section.vt-certifs{
  padding-top: 4px !important;
  margin-top: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  padding-bottom: 6px !important;
  margin-bottom: 0 !important;
}
/* les logos respirent avant « Nos formulations excluent » */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  margin-bottom: 24px !important;
}


/* ====================================================================
   HAVIL’OR : LE BANDEAU SE LIT PARTOUT
   ====================================================================
   style.css pose `body:not(.home) span:not([class*="icon"])` en
   #22252B !important : sur toutes les pages sauf l'accueil, le texte
   du bandeau (un span) passait gris fonce sur bleu marine. Seuls
   « 10 % » et « BIENVENUE10 » restaient lisibles. */
html body:not(#a):not(#b):not(#c) .vt-bandeau .vt-bandeau-txt,
html body:not(#a):not(#b):not(#c) .vt-bandeau .vt-bandeau-txt span{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) .vt-bandeau .vt-bandeau-txt strong{
  color: #EDE0CE !important;
}


/* ====================================================================
   HAVIL’OR : LE PARRAINAGE SE LIT (portee : elements du parrainage seuls)
   ====================================================================
   La regle balayante « body:not(.home) .wpb_text_column :not(.vt-hero) »
   (0,4,2) passait le ticket et ses boutons en gris sur bleu marine.
   Quatre identifiants (4,x,x), et uniquement les classes vt-coupon-* et
   vt-par-cta : rien d'autre sur le site n'est touche. */
html body:not(#a):not(#b):not(#c):not(#d) .vt-coupon-gauche,
html body:not(#a):not(#b):not(#c):not(#d) .vt-coupon-gauche *,
html body:not(#a):not(#b):not(#c):not(#d) .vt-coupon-remise,
html body:not(#a):not(#b):not(#c):not(#d) button.vt-coupon-copier,
html body:not(#a):not(#b):not(#c):not(#d) a.vt-par-cta,
html body:not(#a):not(#b):not(#c):not(#d) a.vt-par-cta *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .vt-coupon-note{
  color: rgba(255,255,255,.75) !important;
}


/* ====================================================================
   HAVIL’OR : HERO EN FUTURA PARTOUT, TUILES ALIGNEES
   ====================================================================
   Aucun fichier Futura n'est charge : « futura » ne marchait que sur
   les appareils qui l'ont en systeme (iPhone). Jost, deja charge, est
   le clone web de Futura : il prend le relais partout ailleurs. */
html body.home:not(#a):not(#b):not(#c) rs-layer#slider-1-slide-1-layer-0{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-weight: 600 !important;
}
/* la colonne « Cremes » avait 78 px de padding haut, les deux autres 35 */
html body.home:not(#a):not(#b):not(#c) .vc_custom_1789808601201{
  padding-top: 35px !important;
}


/* ====================================================================
   HAVIL’OR : GALERIE FIXE ET CHAMP E-MAIL BORNE
   ====================================================================
   #wrapper en overflow:hidden neutralisait le sticky de la galerie
   (946 px de vide dessous). overflow:clip coupe pareil sans devenir
   un conteneur de defilement. */
html body.single-product:not(#a):not(#b) div#wrapper{
  overflow: clip !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
@media (min-width: 992px){
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery.col-lg-7{
    position: sticky !important;
    top: 110px !important;
    align-self: flex-start !important;
  }
}
/* le formulaire de la lettre : 460 px centre, gouttiere seulement sur mobile */
html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form{
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 600px){
  html body:not(#a):not(#b):not(#c) .vt-section-newsletter .vt-news-form{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ====================================================================
   HAVIL’OR : BANDEAU DE TITRE DES CATEGORIES, RESSERRE
   ====================================================================
   275 px pour un titre de 48 : trois paddings empiles (34+28, 34+30,
   51+50). Ramene a 28 px au-dessus et au-dessous, grille a 44 px. */
html body.woocommerce-shop:not(#a):not(#b):not(#c) .hero-header .regular-title,
html body.tax-product_cat:not(#a):not(#b):not(#c) .hero-header .regular-title{
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
html body.woocommerce-shop:not(#a):not(#b):not(#c) .hero-header header.woocommerce-products-header,
html body.tax-product_cat:not(#a):not(#b):not(#c) .hero-header header.woocommerce-products-header,
html body.woocommerce-shop:not(#a):not(#b):not(#c) .hero-header h1.et-shop-title,
html body.tax-product_cat:not(#a):not(#b):not(#c) .hero-header h1.et-shop-title{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body.woocommerce-shop:not(#a):not(#b):not(#c) .hero-header,
html body.tax-product_cat:not(#a):not(#b):not(#c) .hero-header{
  margin-bottom: 44px !important;
}


/* ====================================================================
   HAVIL’OR : PHOTO PRODUIT PLEIN CADRE (ordinateur)
   ====================================================================
   Galerie de 611 px dans une colonne de 701, image en contain de 520 :
   90 px vides a gauche et des bandes blanches. Plein cadre. */
@media (min-width: 992px){
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery.col-lg-7 .woocommerce-product-gallery{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery.col-lg-7 .woocommerce-product-gallery__image img,
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery.col-lg-7 .woocommerce-product-gallery__image a img{
    width: 100% !important;
    height: min(780px, calc(100vh - 140px)) !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* ====================================================================
   HAVIL’OR : PANNEAU PANIER DU THEME (#side-cart), « € » ET CROIX
   ====================================================================
   Le « € » y etait blanc sur blanc ; la croix, grise en 18 px,
   passait inapercue. Portee : #side-cart seul. */
html body:not(#a):not(#b) #side-cart .woocommerce-Price-amount,
html body:not(#a):not(#b) #side-cart .woocommerce-Price-amount bdi,
html body:not(#a):not(#b) #side-cart .woocommerce-Price-currencySymbol{
  color: #6B5328 !important;
}
html body:not(#a):not(#b) #side-cart .woocommerce-Price-currencySymbol{
  display: inline !important;
  position: static !important;
  margin-left: 2px !important;
}
html body:not(#a):not(#b) #side-cart a.remove_from_cart_button{
  width: 30px !important;
  height: 30px !important;
  font-size: 24px !important;
  line-height: 30px !important;
  color: #6B5328 !important;
  opacity: 1 !important;
  justify-content: center !important;
  align-items: center !important;
}
html body:not(#a):not(#b) #side-cart a.remove_from_cart_button:hover{
  color: #b3261e !important;
}

/* ==========================================================================
   BANDEAU DE TITRE DES PAGES, RESSERRE (28/09)
   JP, sur « Conseil personnalise » puis « Parrainage » : « toujours tres vide
   en haut et en bas, diminuer la hauteur des titres ; le bas ne doit pas etre
   colle, margin bottom ». Le bandeau faisait 303 px pour un titre de 35 px :
   trois paddings empiles (.regular-title 34, header 34 + 30, h1 51 + 50).
   Meme reglage que les categories. Limite aux pages du theme avec titre
   (body.page.page-header-regular), jamais l'accueil ni les produits.
   ========================================================================== */
html body.page.page-header-regular:not(.home):not(#a):not(#b):not(#c):not(#d) .page-padding > .regular-title {
	padding-top: 28px !important;
	padding-bottom: 28px !important;
}
html body.page.page-header-regular:not(.home):not(#a):not(#b):not(#c):not(#d) .regular-title > header.page-header.entry-header {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}
html body.page.page-header-regular:not(.home):not(#a):not(#b):not(#c):not(#d) .regular-title h1.page-title {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}
/* le contenu ne colle plus a la newsletter */
html body.page.page-header-regular:not(.home):not(#a):not(#b):not(#c):not(#d) .page-padding {
	padding-bottom: 56px !important;
}

/* ==========================================================================
   GALERIE MOBILE SANS VIDE SOUS LA PHOTO (28/09)
   JP : « probleme d'espace vide sur la version mobile ». style.css impose
   .flex-viewport{height:auto !important} ; le conteneur des photos ne fait
   que 4 photos de large, les 8 photos passent sur 3 rangees et le cadre
   mesurait 1385 px pour une photo de 494 px. On garde les photos sur une
   seule rangee : le cadre reprend la hauteur de la photo affichee.
   Fiches produit, sous 992 px seulement.
   ========================================================================== */
@media (max-width: 991px) {
	html body.single-product:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: flex-start !important;
	}
	html body.single-product:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		flex: 0 0 auto !important;
	}
}

/* ==========================================================================
   LOGOS DE CERTIFICATION : 4 + 4 SUR MOBILE SEULEMENT (28/09)
   JP : « les logos en mode carrousel, ce que tu as fait c'est uniquement
   sur mobile la presentation ». La grille 4 + 4 du matin s'appliquait a
   toutes les largeurs. A partir de 768 px, les 8 logos repassent sur une
   seule ligne, en carrousel horizontal. Le mobile garde le 4 + 4.
   ========================================================================== */
@media (min-width: 768px) {
	html body:not(#a):not(#b):not(#c):not(#d):not(#e) ul.vt-certifs-pictos {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: safe center !important;
		gap: 40px !important;
		overflow-x: auto !important;
		scroll-snap-type: x mandatory;
		grid-template-columns: none !important;
		max-width: 100% !important;
		scrollbar-width: none;
	}
	html body:not(#a):not(#b):not(#c):not(#d):not(#e) ul.vt-certifs-pictos::-webkit-scrollbar {
		display: none;
	}
	html body:not(#a):not(#b):not(#c):not(#d):not(#e) ul.vt-certifs-pictos > li {
		flex: 0 0 auto !important;
		max-width: none !important;
		scroll-snap-align: center;
	}
}
/* suite : chaque logo garde sa taille (la grille du matin imposait width 100 %),
   ecart d'origine de 26 px entre les logos */
@media (min-width: 768px) {
	html body:not(#a):not(#b):not(#c):not(#d):not(#e) ul.vt-certifs-pictos { gap: 26px !important; }
	html body:not(#a):not(#b):not(#c):not(#d):not(#e) ul.vt-certifs-pictos > li { width: auto !important; }
}

/* ==========================================================================
   LE DEFILEMENT REVIENT A LA FENETRE (28/09)
   JP sur iPhone : « le menu ne s'ouvre pas, ca rame, les photos produit
   zooment au lieu d'ouvrir la fiche ». core.css fixe html{height:100%} et
   six regles mettent overflow-x:hidden sur html ET body : body devenait une
   boite de defilement haute de 812 px. Sur iPhone, un toucher pendant
   l'elan ne fait qu'arreter ce defilement interne, ou part en zoom.
   overflow-x:clip coupe toujours le debordement lateral sans creer de
   boite de defilement : la page defile de nouveau dans la fenetre.
   ========================================================================== */
html:not(#a):not(#b),
html:not(#a):not(#b) body:not(#a):not(#b) {
	overflow-x: clip !important;
	overflow-y: visible !important;
}
html:not(#a):not(#b) body:not(#a):not(#b) {
	height: auto !important;
}

/* le bouton du menu mobile ne faisait que 24 x 29 px : zone tactile de 44 px */
html body:not(#a):not(#b):not(#c) .header-mobile .hamburger-menu button.mobile-toggle {
	min-width: 44px !important;
	min-height: 44px !important;
	margin: -8px 0 -8px -10px !important;
	padding: 0 10px !important;
	justify-content: flex-start !important;
	touch-action: manipulation;
}

/* ==========================================================================
   GALERIE FIXE : LE SCRIPT DU THEME NE S'EN MELE PLUS (29/09)
   JP (video) : en defilant, la photo produit saute et disparait alors que
   la colonne de droite continue. Depuis que la fenetre defile de nouveau
   (bloc « LE DEFILEMENT REVIENT A LA FENETRE »), le sticky-kit de Goya se
   declenche : il passe .product-gallery-inner en position absolute,
   bottom 0, dans une colonne reduite a 1 px. La galerie fixe est deja
   assuree en CSS (bloc « GALERIE FIXE ») : on annule le style pose par
   ce script (inline sans !important).
   ========================================================================== */
@media (min-width: 992px) {
	html body.single-product:not(#a):not(#b):not(#c) .product-gallery.col-lg-7 > .product-gallery-inner {
		position: static !important;
		top: auto !important;
		bottom: auto !important;
		width: auto !important;
	}
}

/* ==========================================================================
   PARRAINAGE : LA BANDE PHOTOS A UNE TAILLE (29/09)
   JP : « les photos ici ne s'affichent pas, le deroule des photos ». Les
   vignettes n'avaient aucune largeur : 0 x 15 px sur mobile, taille reelle
   (1000 px de haut) sur ordinateur. Format portrait 4:5, 200 a 280 px.
   ========================================================================== */
html body:not(#a):not(#b):not(#c) .vt-par-rail {
	height: auto !important;
	padding: 8px 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-par-piste {
	height: auto !important;
	align-items: stretch !important;
}
html body:not(#a):not(#b):not(#c) .vt-par-vignette {
	width: clamp(200px, 22vw, 280px) !important;
	height: auto !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	border-radius: 14px !important;
}
html body:not(#a):not(#b):not(#c) .vt-par-vignette img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}

/* ==========================================================================
   ENGAGEMENTS : LE CONTENU S'AFFICHE SANS ATTENDRE UN SCRIPT (29/09)
   JP : « Engagement ne s'ouvre pas ». La section est a opacite 0 tant qu'un
   script ne lui ajoute pas la classe .visible ; si le script tarde, la page
   reste blanche. Toujours visible, sans le fondu.
   ========================================================================== */
html body:not(#a):not(#b):not(#c) #section-engagements-nature-01 {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   COFFRETS : PLUS DE BADGE DE POURCENTAGE (29/09)
   JP : « enlever les % sur les 3 coffrets, 4 % ca parait rien du tout ».
   Fiche produit (body.postid-*) et vignettes (li.post-*) des coffrets
   134039, 134049, 134070 seulement.
   ========================================================================== */
html body:not(#a):not(#b):not(#c).postid-134039 .badge.onsale.perc,
html body:not(#a):not(#b):not(#c).postid-134049 .badge.onsale.perc,
html body:not(#a):not(#b):not(#c).postid-134070 .badge.onsale.perc,
html body:not(#a):not(#b):not(#c) li.post-134039 .badge.onsale.perc,
html body:not(#a):not(#b):not(#c) li.post-134049 .badge.onsale.perc,
html body:not(#a):not(#b):not(#c) li.post-134070 .badge.onsale.perc {
	display: none !important;
}

/* coffrets : la description s'affiche sous le prix ; l'onglet du bas la
   repetait mot pour mot (JP : « description en doublon, garder celle du dessus ») */
html body:not(#a):not(#b):not(#c).postid-134039 .woocommerce-tabs li.description_tab,
html body:not(#a):not(#b):not(#c).postid-134049 .woocommerce-tabs li.description_tab,
html body:not(#a):not(#b):not(#c).postid-134070 .woocommerce-tabs li.description_tab,
html body:not(#a):not(#b):not(#c).postid-134039 .woocommerce-Tabs-panel--description,
html body:not(#a):not(#b):not(#c).postid-134049 .woocommerce-Tabs-panel--description,
html body:not(#a):not(#b):not(#c).postid-134070 .woocommerce-Tabs-panel--description {
	display: none !important;
}

/* coffrets : paragraphes aeres (JP : « plus aere comme avant, trop colle ») */
html body:not(#a):not(#b):not(#c).postid-134039 .woocommerce-product-details__long-description-as-short p,
html body:not(#a):not(#b):not(#c).postid-134049 .woocommerce-product-details__long-description-as-short p,
html body:not(#a):not(#b):not(#c).postid-134070 .woocommerce-product-details__long-description-as-short p {
	margin: 0 0 14px !important;
}

/* ==========================================================================
   VIGNETTES DE LA GALERIE : TOUTES VISIBLES SUR MOBILE (30/09)
   JP (capture coffret nuit) : la 6e vignette etait coupee au bord de
   l'ecran. 6 vignettes de 70 px + 5 ecarts de 8 px = 460 px pour 375 px.
   Sous 992 px, les vignettes se partagent la largeur (70 px au plus),
   carrees, image entiere.
   ========================================================================== */
@media (max-width: 991px) {
	html body.single-product:not(#a):not(#b):not(#c) ol.flex-control-thumbs {
		overflow-x: visible !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
	}
	html body.single-product:not(#a):not(#b):not(#c) ol.flex-control-thumbs > li {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		max-width: 70px !important;
		width: auto !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}
	html body.single-product:not(#a):not(#b):not(#c) ol.flex-control-thumbs > li img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* coffrets : plus de prix barre gris, seulement le prix et « Vous economisez »
   (la cliente, 30/09). Fiche produit et vignettes des 3 coffrets. */
html body:not(#a):not(#b):not(#c).postid-134039 .summary .price del,
html body:not(#a):not(#b):not(#c).postid-134049 .summary .price del,
html body:not(#a):not(#b):not(#c).postid-134070 .summary .price del,
html body:not(#a):not(#b):not(#c) li.post-134039 .price del,
html body:not(#a):not(#b):not(#c) li.post-134049 .price del,
html body:not(#a):not(#b):not(#c) li.post-134070 .price del {
	display: none !important;
}

/* fiches produit : la pastille flottante « Diagnostic peau » recouvrait le
   bouton « Faire un diagnostic » du bloc de questions produit, texte coupe
   (la cliente, 30/09). Le bloc offre deja le diagnostic : pastille masquee
   sur les fiches produit seulement. */
html body.single-product:not(#a):not(#b):not(#c) #lystes-widget-btn {
	display: none !important;
}

/* ===== LOGO TEXTE LISIBLE + FENETRE DE BIENVENUE HIERARCHISEE (01/10/2026, JP) =====
 * 1. Le nom de la marque (logo texte) etait force en blanc par le theme alors que
 *    l'en-tete est blanc : blanc sur blanc. Il prend la couleur de la marque.
 * 2. Fenetre de bienvenue : les regles globales du theme (labels en capitales grasses,
 *    champs) ecrasaient ses styles ; le consentement etait plus visible que le titre.
 *    Hierarchie : titre 22 > offre 15 > champ 15 > bouton 13 > consentement 12. */
html body:not(#a):not(#b):not(#c):not(#d) header.site-header .logolink .site-title { color: #6B5328 !important; }

html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue { padding: 30px 28px 26px !important; background: #FBF8F3 !important; text-align: left !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue h4 {
  font-family: futura, "Futura PT", Jost, sans-serif !important; font-size: 22px !important; font-weight: 400 !important;
  line-height: 1.25 !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  color: #6B5328 !important; margin: 0 32px 10px 0 !important; text-align: left !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p {
  font-size: 15px !important; font-weight: 300 !important; line-height: 1.5 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #22252B !important; margin: 0 0 18px !important; text-align: left !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p strong { font-weight: 600 !important; letter-spacing: .04em !important; color: #6B5328 !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue input[type="email"] {
  width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 0 14px !important; margin: 0 0 14px !important;
  font-size: 15px !important; font-weight: 300 !important; letter-spacing: 0 !important; text-transform: none !important;
  background: #fff !important; border: 1px solid #E3DACB !important; border-radius: 0 !important; color: #22252B !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label {
  display: flex !important; align-items: flex-start !important; gap: 10px !important; margin: 0 0 18px !important;
  font-size: 12px !important; font-weight: 300 !important; line-height: 1.45 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: #6B6F76 !important; text-align: left !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"] { flex: 0 0 16px !important; width: 16px !important; height: 16px !important; min-height: 0 !important; margin: 1px 0 0 !important; padding: 0 !important; accent-color: #6B5328; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue button[type="submit"] {
  width: 100% !important; height: 48px !important; padding: 0 16px !important; border: 0 !important; border-radius: 0 !important;
  background: #6B5328 !important; color: #fff !important; font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 48px !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue .vt-bienvenue-fermer { top: 12px !important; right: 14px !important; font-size: 26px !important; line-height: 1 !important; color: #6B5328 !important; background: none !important; padding: 0 !important; }

/* ===== FENETRE DE BIENVENUE, MISE EN PAGE V2 (01/10/2026, JP) =====
 * Centree, une seule police (Futura legere). Titre 20 > offre sur UNE ligne (13)
 * > champ > bouton > consentement discret (11). */
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue,
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue * { font-family: futura, "Futura PT", Jost, sans-serif !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue { padding: 34px 28px 24px !important; text-align: center !important; max-width: 440px !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue h4 { font-size: 20px !important; font-weight: 400 !important; letter-spacing: .1em !important; line-height: 1.3 !important; text-align: center !important; margin: 0 0 12px !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p { text-align: center !important; white-space: nowrap !important; font-size: clamp(9.5px, 2.4vw, 12px) !important; font-weight: 300 !important; line-height: 1.4 !important; margin: 0 0 22px !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p strong { font-weight: 500 !important; letter-spacing: .04em !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue form { display: flex !important; flex-direction: column !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue input[type="email"] { order: 1 !important; text-align: center !important; font-size: 14px !important; margin: 0 0 12px !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue button[type="submit"] { order: 2 !important; font-size: 12px !important; letter-spacing: .18em !important; margin: 0 0 14px !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label { order: 3 !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin: 0 !important; font-size: 11px !important; font-weight: 300 !important; line-height: 1.4 !important; color: #8A8E94 !important; text-align: left !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label * { font-size: 11px !important; font-weight: 300 !important; text-transform: none !important; letter-spacing: 0 !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"] { flex: 0 0 14px !important; width: 14px !important; height: 14px !important; margin: 0 !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue .vt-bienvenue-merci { white-space: normal !important; font-size: 15px !important; margin: 10px 0 0 !important; }
@media (max-width: 480px) {
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue { padding: 30px 16px 20px !important; }
}
@media (max-width: 480px) {
  /* iPhone : la phrase d'offre tient sur une ligne a 9,5 px ; le consentement passe dessous pour garder la hierarchie */
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label,
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label * { font-size: 9px !important; }
}
@media (min-width: 481px) {
  /* ordinateur : consentement sur une seule ligne (01/10, JP) */
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label { white-space: nowrap !important; }
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label,
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label * { font-size: 9.2px !important; }
}

/* ===== LOGO TEXTE CENTRE VERTICALEMENT SUR MOBILE (01/10/2026, JP) =====
 * Le titre gardait un padding-top de 9 px prevu pour le logo image de Valthea :
 * 4 px trop bas dans l'en-tete. Consentement ordinateur : 1 px de debord, gap reduit. */
html body:not(#a):not(#b):not(#c):not(#d) .header-mobile h1.site-title { padding: 0 !important; margin: 0 !important; line-height: 18px !important; }
@media (min-width: 481px) { html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label { gap: 6px !important; } }

/* ===== MENU MOBILE : 3 TRAITS NOIRS IDENTIQUES (01/10/2026, JP) =====
 * Traits de 1 px poses a une position fractionnaire (59,09 px) : l'anticrenelage
 * les eclaircissait inegalement. Noir plein, rendu net, epaisseur 1,5 px. */
html body:not(#a):not(#b):not(#c):not(#d) .hamburger-menu svg.icon-hamburger rect { fill: #000 !important; height: 1.5px !important; shape-rendering: crispEdges !important; }
html body:not(#a):not(#b):not(#c):not(#d) .hamburger-menu svg.icon-hamburger { shape-rendering: crispEdges !important; }

/* ===== FENETRE DE BIENVENUE : OFFRE LISIBLE, JAMAIS COLLEE AUX BORDS (01/10/2026, JP) =====
 * Retour a la ligne autorise plutot qu'une phrase minuscule qui touche les bords. */
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p { white-space: normal !important; font-size: 14px !important; line-height: 1.5 !important; padding: 0 8px !important; text-wrap: balance; }
@media (max-width: 480px) {
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue { padding: 30px 22px 20px !important; }
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue p { font-size: 13px !important; padding: 0 4px !important; }
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label,
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label * { font-size: 10px !important; }
}

/* ===== VIDEO D'ACCUEIL EN SHORTCODE [vt_hero] (01/10/2026, JP) =====
 * Reprend les mesures du slider « homelynk » : ordinateur plein cadre, texte a
 * 58 px du bord, titre 44 px ; mobile 16 px de marge, 500 px de haut, titre 23 px. */
.vt-hero { position: relative; width: 100%; height: calc(100vh - 33px); min-height: 560px; max-height: 900px; overflow: hidden; background: #1a1a1a; }
.vt-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-hero-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 70%); pointer-events: none; }
.vt-hero-texte { position: absolute; left: 58px; bottom: 158px; max-width: 560px; color: #fff; }
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-titre { font-family: futura, "Futura PT", Jost, sans-serif !important; font-size: 44px !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: #fff !important; margin: 0 0 14px !important; text-align: left !important; }
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-sous { font-family: futura, "Futura PT", Jost, sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: #fff !important; margin: 0 0 22px !important; text-align: left !important; }
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-bouton { display: inline-block !important; font-family: futura, "Futura PT", Jost, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #6B5328 !important; background: #EDE0CE !important; padding: 14px 26px !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; transition: background .2s; }
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-bouton:hover { background: #fff !important; }
@media (max-width: 767px) {
  .vt-hero { width: auto; margin: 0 16px; height: 500px; min-height: 0; }
  .vt-hero-texte { left: 22px; right: 22px; bottom: 44px; }
  html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-titre { font-size: 23px !important; line-height: 1.18 !important; margin: 0 0 12px !important; }
  html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-sous { font-size: 10px !important; letter-spacing: .2em !important; margin: 0 0 18px !important; }
  html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-bouton { font-size: 11px !important; padding: 12px 22px !important; }
}
@media (prefers-reduced-motion: reduce) { .vt-hero-video { display: none; } .vt-hero { background: #1a1a1a center/cover no-repeat; } }

/* ===== COMPTEUR DU PANIER TOUJOURS LISIBLE (01/10/2026, JP) =====
 * Dans l'en-tete collant, la pastille etait blanche avec un chiffre creme : invisible. */
html body:not(#a):not(#b):not(#c):not(#d) .minicart-counter:not(.et-count-zero) { background: #6B5328 !important; color: #fff !important; }
@media (min-width: 768px) {
  /* la colonne WPBakery decalait la video de 15 px a gauche : pleine largeur exacte */
  .vt-hero { width: 100%; margin-left: 15px; }
}

/* ===== FENETRE DE BIENVENUE : CASE A COCHER VISIBLE (01/10/2026, JP) =====
 * Le bord de la case etait blanc sur le fond creme. Case dessinee : bord fonce, coche blanche. */
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"] {
  -webkit-appearance: none !important; appearance: none !important; display: inline-block !important; position: relative !important;
  width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 0 !important;
  border: 1px solid #6B5328 !important; border-radius: 0 !important; background: #fff !important; cursor: pointer !important; opacity: 1 !important; visibility: visible !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"]:checked { background: #6B5328 !important; }
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"]:checked::after {
  content: "" !important; position: absolute !important; left: 4px !important; top: 1px !important; width: 4px !important; height: 8px !important;
  border: solid #fff !important; border-width: 0 1.5px 1.5px 0 !important; transform: rotate(45deg) !important;
}
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label input[type="checkbox"]:focus-visible { outline: 1px solid #6B5328 !important; outline-offset: 2px !important; }

/* ===== VIDEO D'ACCUEIL : TITRE AUX MESURES DE VALTHEA (01/10/2026, JP) =====
 * Mesure sur valtheaparis.fr : 27 px, graisse 300, interligne 32 px, sur ordinateur
 * comme sur mobile (j'avais repris 44 px / 600, taille du calque et non du texte). */
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-titre { font-size: 27px !important; font-weight: 300 !important; line-height: 32px !important; letter-spacing: 0 !important; }
@media (max-width: 767px) {
  html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-titre { font-size: 27px !important; line-height: 32px !important; letter-spacing: .06em !important; }
}
/* hero-titre-famille : meme pile de polices que le slider de Valthea */
html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-titre, html body:not(#a):not(#b):not(#c):not(#d) .vt-hero .vt-hero-sous { font-family: futura, Welcomeweb-Bold, sans-serif !important; }

/* ===== FENETRE DE BIENVENUE : CONSENTEMENT COURT, MARGES A GAUCHE ET A DROITE (01/10/2026, JP) ===== */
html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label { margin: 0 18px !important; justify-content: center !important; }
@media (min-width: 481px) {
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label,
  html body:not(#a):not(#b):not(#c):not(#d) #vt-bienvenue label * { font-size: 10.5px !important; }
}

/* ===== PANIER ET COMMANDE (01/10/2026, cliente Valthea via JP) =====
 * 1. bouton « ESSAYER » du widget sur les vignettes produit : retire ;
 * 2. champ code promo : texte en 16 px (lisible, et iPhone ne zoome plus) ;
 * 3. remise du code promo : le montant etait une pastille foncee illisible ;
 * 4. ligne du panier : le « € » passait sous la croix de suppression ;
 * 5. selecteur de quantite : le « + » debordait du cadre. */
html body:not(#a):not(#b):not(#c):not(#d) .lystes-archive-tryon-btn { display: none !important; }

html body:not(#a):not(#b):not(#c):not(#d) .checkout_coupon input.input-text,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-form-coupon input.input-text,
html body:not(#a):not(#b):not(#c):not(#d) .coupon input#coupon_code,
html body:not(#a):not(#b):not(#c):not(#d) input[name="coupon_code"] { font-size: 16px !important; color: #22252B !important; letter-spacing: .02em !important; }

html body:not(#a):not(#b):not(#c):not(#d) tr.cart-discount td,
html body:not(#a):not(#b):not(#c):not(#d) tr.cart-discount td * { background: transparent !important; color: #22252B !important; border-radius: 0 !important; box-shadow: none !important; }
html body:not(#a):not(#b):not(#c):not(#d) tr.cart-discount td a.woocommerce-remove-coupon { color: #6B6F76 !important; margin-left: 8px !important; }

@media (max-width: 767px) {
  html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form tr.cart_item .product-subtotal { padding-right: 34px !important; }
}

html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity {
  display: inline-flex !important; align-items: center !important; justify-content: space-between !important;
  width: 104px !important; height: 36px !important; padding: 0 !important; border: 1px solid #DCD7CE !important; box-sizing: border-box !important; position: relative !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity .minus,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity .plus {
  position: static !important; flex: 0 0 34px !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; cursor: pointer !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity .minus svg,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity .plus svg { width: 14px !important; height: 14px !important; }
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-cart-form .quantity input.qty {
  flex: 1 1 auto !important; width: 34px !important; min-width: 0 !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; text-align: center !important; font-size: 15px !important; background: transparent !important;
}

/* ===== FICHE PRODUIT ORDINATEUR : PHOTO ENTIERE + BLOCS SOUS LA GALERIE (01/10/2026) ===== */
@media (min-width: 992px) {
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image,
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image a { height: min(640px, calc(100vh - 220px)) !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #F1F1F1 !important; overflow: hidden !important; }
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image img { width: auto !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: contain !important; margin: 0 auto !important; }
  html body.single-product:not(#a):not(#b):not(#c) .vt-sous-galerie { margin-top: 36px !important; padding-right: 30px !important; }
  html body.single-product:not(#a):not(#b):not(#c) .vt-sous-galerie > * { max-width: 560px !important; }
}

/* ===== FICHE PRODUIT ORDINATEUR : PHOTO PLEINE LARGEUR, HAUTEUR NATURELLE (01/10/2026, JP) =====
 * JP : la photo reste pleine largeur, on augmente la hauteur au lieu de la rogner.
 * Remplace la photo « contenue » du bloc precedent. */
@media (min-width: 992px) {
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image,
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image a { height: auto !important; display: block !important; background: none !important; overflow: visible !important; }
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .woocommerce-product-gallery__image img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: initial !important; margin: 0 !important; }
  html body.single-product:not(#a):not(#b):not(#c) .product-gallery .flex-viewport { height: auto !important; }
}

/* ===== FICHE PRODUIT ORDINATEUR : PHOTO PLEINE LARGEUR, HAUTEUR NATURELLE BIS (01/10/2026, JP) =====
 * JP : la photo reste pleine largeur, on augmente la hauteur au lieu de la rogner.
 * Remplace la photo « contenue » du bloc precedent. */
@media (min-width: 992px) {
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image a { height: auto !important; display: block !important; background: none !important; overflow: visible !important; }
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: initial !important; margin: 0 !important; }
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .flex-viewport { height: auto !important; }
}

/* ===== FICHE PRODUIT ORDINATEUR : CONTENEURS DE LA PHOTO SANS PLAFOND 780 PX (01/10/2026, JP) ===== */
@media (min-width: 992px) {
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__wrapper,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .flex-viewport { height: auto !important; max-height: none !important; }
}
@media (min-width: 992px) { /* colonne galerie sans plafond (01/10) */ html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 { height: auto !important; max-height: none !important; } }

/* ===== FICHE PRODUIT : PHOTO PLEINE (COVER), ROGNEE PAR LE HAUT SEULEMENT (01/10/2026, JP) =====
 * Remplace les deux essais precedents (contain, puis hauteur naturelle). Le cadre
 * garde sa hauteur d'origine ; la photo le remplit ; le bas (texte du flacon) reste visible. */
@media (min-width: 992px) {
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .flex-viewport,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image a { height: min(780px, calc(100vh - 140px)) !important; max-height: none !important; display: block !important; overflow: hidden !important; }
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__wrapper,
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery { height: auto !important; max-height: none !important; }
  html body.single-product:not(#a):not(#b):not(#c):not(#d) .product-gallery.col-lg-7 .woocommerce-product-gallery__image img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: 50% 100% !important; }
}