/*
Theme Name: Elafya
Theme URI: https://zenmart.local
Author: Elafya
Description: Thème WordPress/WooCommerce ergonomie premium (ex-ZenMart, rebrand Elafya). Homepage mobile-first : header centré, hero réordonné, sliders tactiles scroll-snap, footer accordéon et barre CTA fixe mobile. Palette vert profond / crème / doré. Gamme produits « Kiné » conservée.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zenmart
*/

/* =====================================================================
   ZENMART — DESIGN TOKENS (passe 2 : rebrand ergonomie, vert ZenMart)
   La structure/layout vient du clone Vitazen ; seules les couleurs changent.
   ===================================================================== */
:root{
    /* Palette ZenMart */
    --zm-green:#0B3D2E;
    --zm-green-dark:#062B21;
    --zm-cream:#F6F1E7;
    --zm-beige:#E7D7BD;
    --zm-white:#FFFDF8;
    --zm-gold:#B9935A;
    --zm-gold-dark:#9d7c45;
    --zm-text:#10251E;
    --zm-muted:#66756E;
    --zm-border:#E5DED2;

    /* Remap des anciens tokens Vitazen -> ZenMart (le layout reste intact) */
    --vz-red:var(--zm-green);        /* actions primaires, topbar, prix, tabs, pagination */
    --vz-red-dark:var(--zm-green-dark);
    --vz-yellow:var(--zm-gold);      /* accents dorés (eyebrows sur fond sombre, étoiles) */
    --vz-yellow-soft:var(--zm-cream);
    --vz-dark:var(--zm-text);        /* texte fort / titres / boutons sombres */
    --vz-teal:var(--zm-green);       /* cartes vertes (ex-subscription) */
    --vz-teal-dark:var(--zm-green-dark); /* footer + sections sombres */
    --vz-teal-light:var(--zm-gold);
    --vz-cream:var(--zm-cream);
    --vz-beige:var(--zm-beige);
    --vz-gray:#F2EDE2;               /* fond image carte produit (crème chaud) */
    --vz-ink:var(--zm-text);
    --vz-ink-soft:var(--zm-muted);
    --vz-line:var(--zm-border);
    --vz-nav-h:84px;
    --vz-wrap:1280px;
}
@media(max-width:992px){ :root{ --vz-nav-h:64px; } }

html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:var(--vz-ink);background:#fff;font-size:15px;line-height:1.6}
h1,h2,h3,h4,.serif{font-family:'Playfair Display',serif;color:var(--vz-dark);line-height:1.12}
img{max-width:100%;display:block}
*{-webkit-tap-highlight-color:transparent}
a{color:inherit}

.vz-wrap{max-width:var(--vz-wrap);margin:0 auto;padding-left:24px;padding-right:24px}

/* eyebrow (red, dotted) — "SHOP OUR…" labels */
.vz-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vz-red)}
.vz-eyebrow::before{content:"";width:8px;height:8px;border-radius:9999px;background:var(--vz-red)}
.vz-sec-head{text-align:center;max-width:640px;margin:0 auto 46px}
.vz-sec-head .vz-eyebrow{margin-bottom:14px}
.vz-h2{font-size:clamp(28px,3.2vw,40px);font-weight:700}
.vz-sec-head-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:36px}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.vz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;padding:15px 30px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .25s ease;text-decoration:none;line-height:1}
.vz-btn-dark{background:var(--vz-dark);color:#fff}
.vz-btn-dark:hover{background:#000;color:#fff}
.vz-btn-red{background:var(--vz-red);color:#fff}
.vz-btn-red:hover{background:var(--vz-red-dark);color:#fff}
.vz-btn-outline{background:transparent;color:var(--vz-dark);border-color:var(--vz-dark)}
.vz-btn-outline:hover{background:var(--vz-dark);color:#fff}
.vz-btn-light{background:#fff;color:var(--vz-dark)}
.vz-btn-light:hover{background:var(--vz-yellow);color:var(--vz-dark)}
.vz-btn-block{width:100%}

/* =====================================================================
   TOP BAR (rouge) — "Order Online Call Us…"  |  Find a Store · email
   ===================================================================== */
.vz-topbar{background:var(--vz-red);color:#fff;font-size:13px}
.vz-topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px;max-width:var(--vz-wrap);margin:0 auto;padding:0 24px}
.vz-topbar a{color:#fff;text-decoration:none}
.vz-topbar .vz-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.vz-topbar .material-symbols-outlined{font-size:16px}
.vz-topbar .vz-sep{opacity:.5}
@media(max-width:992px){.vz-topbar-inner{justify-content:center}.vz-topbar .vz-hide-sm{display:none}}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.vz-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--vz-line)}
.vz-nav{display:flex;align-items:center;gap:28px;height:var(--vz-nav-h);max-width:var(--vz-wrap);margin:0 auto;padding:0 24px}
.vz-logo-img{height:46px;width:auto;object-fit:contain}
@media(max-width:992px){.vz-logo-img{height:36px}}
.vz-nav-links{display:flex;align-items:center;gap:30px;margin:0 auto}
.vz-nav-links a{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--vz-dark);text-decoration:none;transition:color .2s ease}
.vz-nav-links a:hover,.vz-nav-links a.is-active{color:var(--vz-red)}
.vz-search{display:flex;align-items:center;gap:8px;background:var(--vz-gray);border:1px solid var(--vz-line);border-radius:9999px;padding:9px 16px;min-width:210px}
.vz-search input{border:0;background:none;outline:none;font-size:13.5px;font-family:'Inter',sans-serif;width:100%;color:var(--vz-ink)}
.vz-search .material-symbols-outlined{font-size:20px;color:var(--vz-ink-soft)}
.vz-nav-actions{display:flex;align-items:center;gap:18px}
.vz-nav-actions a,.vz-nav-actions button{color:var(--vz-dark);background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;transition:color .2s ease}
.vz-nav-actions a:hover,.vz-nav-actions button:hover{color:var(--vz-red)}
.vz-nav-actions .material-symbols-outlined{font-size:24px}
.vz-cart-link{position:relative}
.vz-cart-count{position:absolute;top:-7px;right:-9px;background:var(--vz-red);color:#fff;font-size:10px;font-weight:700;line-height:1;min-width:17px;height:17px;padding:0 4px;border-radius:9999px;display:flex;align-items:center;justify-content:center}
.vz-cart-count.hidden{display:none}
.vz-burger{display:none}
@media(max-width:992px){
    .vz-nav-links,.vz-search{display:none}
    .vz-nav{gap:14px;justify-content:space-between}
    .vz-burger{display:inline-flex;order:-1}
    .vz-nav-actions{gap:14px}
}

/* mobile drawer */
.vz-drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.vz-drawer.open{visibility:visible;pointer-events:auto}
.vz-drawer-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s ease}
.vz-drawer.open .vz-drawer-scrim{opacity:1}
.vz-drawer-panel{position:absolute;top:0;left:0;height:100%;width:84%;max-width:340px;background:#fff;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:22px;box-shadow:0 0 40px rgba(0,0,0,.2)}
.vz-drawer.open .vz-drawer-panel{transform:translateX(0)}
.vz-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--vz-line)}
.vz-drawer-links{display:flex;flex-direction:column}
.vz-drawer-links a{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--vz-dark);text-decoration:none;padding:15px 4px;border-bottom:1px solid var(--vz-line)}
.vz-drawer-links a:active{color:var(--vz-red)}
.vz-drawer-search{display:flex;align-items:center;gap:8px;background:var(--vz-gray);border-radius:9999px;padding:11px 16px;margin-bottom:18px}
.vz-drawer-search input{border:0;background:none;outline:none;width:100%;font-size:14px}

/* =====================================================================
   HERO (split: image plein gauche + carte texte droite, fond moutarde)
   ===================================================================== */
.vz-hero{background:var(--vz-yellow);position:relative;overflow:hidden}
.vz-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1480px;margin:0 auto;align-items:center;min-height:520px}
.vz-hero-media{position:relative;align-self:stretch}
.vz-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.vz-hero-content{padding:64px 64px 64px 40px}
.vz-hero-card{max-width:520px}
.vz-hero-rating{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--vz-dark);margin-bottom:20px}
.vz-hero-rating .vz-stars{color:var(--vz-dark);letter-spacing:1px}
.vz-hero-title{font-size:clamp(38px,4.6vw,60px);font-weight:800;color:var(--vz-dark);margin-bottom:20px;line-height:1.05;overflow-wrap:break-word}
.vz-hero-lede{font-size:16px;line-height:1.7;color:rgba(18,18,18,.8);max-width:440px;margin-bottom:32px}
@media(max-width:992px){
    .vz-hero-grid{grid-template-columns:1fr;min-height:0}
    .vz-hero-media{height:300px}
    .vz-hero-content{padding:36px 24px 44px}
    .vz-hero-card{max-width:none}
    .vz-hero-lede{max-width:none}
}
@media(max-width:400px){
    .vz-hero-title{font-size:30px}
    .vz-hero-content{padding:30px 18px 38px}
    .vz-wrap{padding-left:18px;padding-right:18px}
}

/* benefits strip (bande sombre : NON GMO + SUGAR FREE + …) */
.vz-strip{background:var(--vz-dark);color:#fff}
.vz-strip-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 26px;max-width:var(--vz-wrap);margin:0 auto;padding:16px 24px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.vz-strip-inner .plus{color:var(--vz-yellow);font-weight:700}
@media(max-width:992px){.vz-strip-inner{font-size:11px;gap:8px 16px}}

/* =====================================================================
   CATEGORIES (Shop Our Categories — cercles image + badge rouge)
   ===================================================================== */
.vz-cats{padding:70px 0;background:#fff}
.vz-cats-rail{display:flex;align-items:flex-start;justify-content:center;gap:18px}
.vz-cats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;flex:1;max-width:1080px}
.vz-cat{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none}
.vz-cat-circle{position:relative;width:150px;height:150px;border-radius:9999px;overflow:hidden;background:var(--vz-gray);border:1px solid var(--vz-line);transition:transform .3s ease,box-shadow .3s ease}
.vz-cat:hover .vz-cat-circle{transform:translateY(-5px);box-shadow:0 18px 34px -20px rgba(0,0,0,.35)}
.vz-cat-circle img{width:100%;height:100%;object-fit:cover}
.vz-cat-badge{position:absolute;top:8px;right:8px;background:var(--vz-red);color:#fff;font-size:11px;font-weight:700;width:24px;height:24px;border-radius:9999px;display:flex;align-items:center;justify-content:center}
.vz-cat-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:600;margin-top:16px;color:var(--vz-dark)}
.vz-cat-count{font-size:12px;color:var(--vz-ink-soft);margin-top:3px}
.vz-rail-arrow{width:42px;height:42px;border-radius:9999px;border:1px solid var(--vz-line);background:#fff;color:var(--vz-red);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-top:54px}
.vz-rail-arrow:hover{background:var(--vz-red);color:#fff;border-color:var(--vz-red)}
@media(max-width:992px){
    .vz-cats{padding:48px 0}
    .vz-rail-arrow{display:none}
    .vz-cats-row{grid-template-columns:repeat(3,1fr);gap:24px 12px}
    .vz-cat-circle{width:104px;height:104px}
    .vz-cat-name{font-size:15px}
}
@media(max-width:420px){.vz-cats-row{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   FEATURE CARDS (We Provide Best Supplements — 3 cartes, bg beige)
   ===================================================================== */
.vz-features{padding:78px 0;background:var(--vz-beige)}
.vz-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vz-feature{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 14px 34px -26px rgba(0,0,0,.3)}
.vz-feature-img{aspect-ratio:16/11;overflow:hidden}
.vz-feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vz-feature:hover .vz-feature-img img{transform:scale(1.05)}
.vz-feature-body{padding:26px 24px 30px}
.vz-feature-body h3{font-size:22px;font-weight:700;margin-bottom:12px}
.vz-feature-body p{font-size:14px;line-height:1.6;color:var(--vz-ink-soft);margin-bottom:16px}
.vz-feature-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--vz-red);text-decoration:none;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:992px){.vz-features{padding:52px 0}.vz-features-grid{grid-template-columns:1fr;gap:20px}}

/* =====================================================================
   PRODUCT GRID + CARD
   ===================================================================== */
.vz-products{padding:74px 0}
.vz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.vz-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.vz-grid{grid-template-columns:repeat(3,1fr)}.vz-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.vz-grid,.vz-grid-3{grid-template-columns:repeat(2,1fr);gap:16px}}

.vz-pcard{position:relative;background:#fff;border:1px solid var(--vz-line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.vz-pcard:hover{box-shadow:0 20px 40px -24px rgba(0,0,0,.35);transform:translateY(-4px)}
.vz-pcard-media{position:relative;aspect-ratio:1/1;background:var(--vz-gray);overflow:hidden;display:flex;align-items:center;justify-content:center}
.vz-pcard-media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .45s ease}
.vz-pcard:hover .vz-pcard-media img{transform:scale(1.05)}
.vz-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:4px;line-height:1.3;background:var(--vz-dark);color:#fff}
.vz-badge-sale{background:var(--vz-red);left:auto;right:12px}
.vz-pcard-quick{position:absolute;right:12px;bottom:12px;z-index:2;width:42px;height:42px;border-radius:9999px;background:#fff;color:var(--vz-dark);box-shadow:0 6px 16px -6px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all .25s ease;border:0;cursor:pointer}
.vz-pcard:hover .vz-pcard-quick{opacity:1;transform:translateY(0)}
.vz-pcard-quick:hover{background:var(--vz-red);color:#fff}
.vz-pcard-body{padding:16px;text-align:center;display:flex;flex-direction:column;gap:7px;flex:1}
.vz-stars{color:var(--vz-red);letter-spacing:1px;font-size:13px}
.vz-pcard-title{font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;color:var(--vz-dark);text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.vz-pcard-title:hover{color:var(--vz-red)}
.vz-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:2px}
.vz-price .now{font-weight:700;font-size:16px;color:var(--vz-red)}
.vz-price .was{font-size:13px;color:var(--vz-ink-soft);text-decoration:line-through}
@media(max-width:760px){.vz-pcard-quick{opacity:1;transform:none;width:38px;height:38px}.vz-pcard-title{font-size:13px}}

/* tabs (Popular Products) */
.vz-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.vz-tab{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;border-radius:9999px;border:1px solid var(--vz-line);background:#fff;color:var(--vz-ink-soft);cursor:pointer;transition:all .2s ease}
.vz-tab.is-active,.vz-tab:hover{background:var(--vz-red);color:#fff;border-color:var(--vz-red)}
.vz-arrows{display:inline-flex;gap:8px}
.vz-arrow{width:40px;height:40px;border-radius:9999px;border:1px solid var(--vz-line);background:#fff;color:var(--vz-red);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vz-arrow:hover{background:var(--vz-red);color:#fff;border-color:var(--vz-red)}
.vz-link-all{font-weight:600;font-size:13px;color:var(--vz-red);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}

/* =====================================================================
   LATEST + SUBSCRIPTION PROMO (carte teal + image)
   ===================================================================== */
.vz-latest{padding:74px 0;background:var(--vz-cream)}
.vz-sub{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;margin-top:46px}
.vz-sub-card{background:var(--vz-teal);color:#fff;border-radius:8px;padding:42px 38px;display:flex;flex-direction:column;justify-content:center}
.vz-sub-card .vz-eyebrow{color:var(--vz-yellow)}
.vz-sub-card .vz-eyebrow::before{background:var(--vz-yellow)}
.vz-sub-card h3{color:#fff;font-size:30px;font-weight:700;margin:14px 0 18px;line-height:1.15}
.vz-sub-list{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vz-sub-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.88)}
.vz-sub-list .material-symbols-outlined{font-size:18px;color:var(--vz-yellow)}
.vz-sub-img{border-radius:8px;overflow:hidden;min-height:240px}
.vz-sub-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:992px){.vz-latest{padding:52px 0}.vz-sub{grid-template-columns:1fr}.vz-sub-list{grid-template-columns:1fr}}

/* =====================================================================
   TRUST + TESTIMONIAL (Trusted by Thousands)
   ===================================================================== */
.vz-trust{padding:78px 0;background:#fff}
.vz-trust-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.vz-testi{background:var(--vz-teal);color:#fff;border-radius:8px;padding:40px}
.vz-testi .vz-stars{color:var(--vz-yellow);font-size:16px;margin-bottom:16px;display:block}
.vz-testi p{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;line-height:1.5;color:#fff;margin-bottom:20px}
.vz-testi-by{display:flex;align-items:center;gap:12px}
.vz-testi-by .ava{width:44px;height:44px;border-radius:9999px;background:var(--vz-yellow);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--vz-dark)}
.vz-testi-by b{display:block;font-size:14px}
.vz-testi-by span{font-size:12px;color:rgba(255,255,255,.7)}
.vz-trust-items{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vz-trust-item{display:flex;flex-direction:column;gap:8px}
.vz-trust-item .material-symbols-outlined{font-size:34px;color:var(--vz-red)}
.vz-trust-item h4{font-size:18px;font-weight:700}
.vz-trust-item p{font-size:13.5px;color:var(--vz-ink-soft);line-height:1.55}
@media(max-width:992px){.vz-trust{padding:52px 0}.vz-trust-grid{grid-template-columns:1fr;gap:28px}.vz-trust-items{grid-template-columns:1fr}}

/* =====================================================================
   FAQ (You've Got Any Questions? — accordéon + image)
   ===================================================================== */
.vz-faq{padding:80px 0;background:var(--vz-cream)}
.vz-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.vz-faq-media{border-radius:8px;overflow:hidden}
.vz-faq-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.vz-acc{border-bottom:1px solid var(--vz-line)}
.vz-acc-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--vz-dark)}
.vz-acc-q .material-symbols-outlined{font-size:24px;color:var(--vz-red);transition:transform .3s ease;flex-shrink:0}
.vz-acc.open .vz-acc-q .material-symbols-outlined{transform:rotate(45deg)}
.vz-acc-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.vz-acc-a-inner{padding:0 2px 20px;font-size:14px;line-height:1.7;color:var(--vz-ink-soft)}
@media(max-width:992px){.vz-faq{padding:52px 0}.vz-faq-grid{grid-template-columns:1fr;gap:30px}.vz-faq-media{order:-1}}

/* =====================================================================
   FOOTER (dark teal-green, colonnes + paiement)
   ===================================================================== */
.vz-footer{background:var(--vz-teal-dark);color:rgba(255,255,255,.7)}
.vz-footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:40px;max-width:var(--vz-wrap);margin:0 auto;padding:64px 24px 46px}
.vz-footer-logo{height:46px;width:auto;margin-bottom:18px}
.vz-footer h5{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:22px}
.vz-footer p{font-size:14px;line-height:1.7}
.vz-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.vz-footer ul a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:color .2s ease}
.vz-footer ul a:hover{color:var(--vz-yellow)}
.vz-footer-social{display:flex;gap:12px;margin-top:18px}
.vz-footer-social a{width:38px;height:38px;border-radius:9999px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.vz-footer-social a:hover{background:var(--vz-red)}
.vz-newsletter{position:relative;margin-top:6px}
.vz-newsletter input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:13px 50px 13px 14px;color:#fff;font-size:14px}
.vz-newsletter input::placeholder{color:rgba(255,255,255,.45)}
.vz-newsletter button{position:absolute;right:5px;top:5px;bottom:5px;background:var(--vz-red);border:0;color:#fff;width:40px;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vz-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.vz-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--vz-wrap);margin:0 auto;padding:20px 24px;font-size:12.5px}
.vz-pay{display:flex;gap:8px;align-items:center}
.vz-pay span{background:#fff;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:800;color:var(--vz-dark);letter-spacing:.03em}
@media(max-width:992px){.vz-footer-top{grid-template-columns:1fr 1fr;gap:30px;padding:46px 24px 32px}.vz-footer-bottom-inner{flex-direction:column;text-align:center}}
@media(max-width:480px){.vz-footer-top{grid-template-columns:1fr}}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.vz-crumb{background:var(--vz-gray);border-bottom:1px solid var(--vz-line)}
.vz-crumb-inner,.woocommerce-breadcrumb{max-width:var(--vz-wrap);margin:0 auto;padding:14px 24px;font-size:13px;color:var(--vz-ink-soft)}
.vz-crumb a,.woocommerce-breadcrumb a{color:var(--vz-dark);text-decoration:none}
.vz-crumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--vz-red)}

/* =====================================================================
   SHOP / COLLECTION (sidebar filtres + grille + Carry Genuine + Only For You)
   ===================================================================== */
.vz-shop{padding:40px 0 76px}
.vz-shop-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start}
.vz-shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--vz-line)}
.vz-shop-count{font-size:13px;color:var(--vz-ink-soft)}
.vz-shop-sort{font-size:13px;color:var(--vz-ink-soft)}
.vz-filter{border-bottom:1px solid var(--vz-line);padding:18px 0}
.vz-filter:first-child{padding-top:0}
.vz-filter h4{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;color:var(--vz-dark)}
.vz-filter ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.vz-filter ul a,.vz-filter ul label{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--vz-ink-soft);text-decoration:none;cursor:pointer}
.vz-filter ul a:hover,.vz-filter ul a.is-active{color:var(--vz-red);font-weight:600}
.vz-filter .cnt{font-size:12px;color:var(--vz-ink-soft)}
.vz-filter .vz-check{display:flex;align-items:center;gap:9px}
.vz-filter .vz-check input{accent-color:var(--vz-red)}
.vz-price-range{display:flex;align-items:center;gap:8px}
.vz-price-range input{width:100%;border:1px solid var(--vz-line);border-radius:5px;padding:8px;font-size:13px}
.vz-shop-mobilebar{display:none}
@media(max-width:992px){
    .vz-shop-layout{grid-template-columns:1fr}
    .vz-shop-sidebar{display:none}
    .vz-shop-sidebar.open{display:block;margin-bottom:22px;border:1px solid var(--vz-line);border-radius:8px;padding:18px}
    .vz-shop-mobilebar{display:flex;gap:12px;margin-bottom:18px}
    .vz-shop-mobilebar .vz-btn{flex:1;padding:12px}
}

/* pagination */
.vz-pagination{display:flex;justify-content:center;gap:8px;margin-top:48px}
.vz-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:6px;font-size:14px;color:var(--vz-dark);text-decoration:none;border:1px solid var(--vz-line)}
.vz-pagination .page-numbers.current{background:var(--vz-red);color:#fff;border-color:var(--vz-red)}
.vz-pagination .page-numbers:hover:not(.current){background:var(--vz-gray)}

/* category cards block (Carry Genuine Products) */
.vz-catcards{padding:70px 0;background:var(--vz-gray)}
.vz-catcards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vz-catcard{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--vz-line);border-radius:6px;padding:16px;text-decoration:none;transition:box-shadow .2s ease}
.vz-catcard:hover{box-shadow:0 14px 30px -20px rgba(0,0,0,.35)}
.vz-catcard-img{width:64px;height:64px;border-radius:6px;background:var(--vz-gray);object-fit:cover;flex-shrink:0}
.vz-catcard b{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--vz-dark)}
.vz-catcard span{display:block;font-size:12px;color:var(--vz-red);margin-top:3px}
@media(max-width:992px){.vz-catcards{padding:48px 0}.vz-catcards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vz-catcards-grid{grid-template-columns:1fr}}

/* =====================================================================
   PDP (gallery main + thumbs below · buybox · why · related · faq)
   ===================================================================== */
.vz-pdp{padding:36px 0 56px}
.vz-pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.vz-gallery-main{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--vz-gray);display:flex;align-items:center;justify-content:center}
.vz-gallery-main img{width:100%;height:100%;object-fit:contain;padding:24px}
.vz-gallery-thumbs{display:flex;gap:12px;margin-top:14px;overflow-x:auto}
.vz-gallery-thumb{width:88px;height:88px;flex-shrink:0;border-radius:6px;overflow:hidden;border:2px solid var(--vz-line);cursor:pointer;background:var(--vz-gray)}
.vz-gallery-thumb.is-active{border-color:var(--vz-red)}
.vz-gallery-thumb img{width:100%;height:100%;object-fit:contain;padding:6px}

.vz-buybox .vz-pdp-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vz-ink-soft);font-weight:600}
.vz-buybox h1{font-size:clamp(26px,3.2vw,38px);font-weight:700;margin:8px 0 12px}
.vz-buybox-rating{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-size:13px;color:var(--vz-ink-soft)}
.vz-buybox-rating .vz-stars{font-size:16px}
.vz-buybox-price{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--vz-line)}
.vz-buybox-price .now{font-weight:700;font-size:28px;color:var(--vz-red)}
.vz-buybox-price .was{font-size:18px;color:var(--vz-ink-soft);text-decoration:line-through}
.vz-buybox-lede{font-size:14.5px;line-height:1.7;color:var(--vz-ink-soft);margin-bottom:22px}
.vz-buybox-stock{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--vz-teal);margin-bottom:20px}
.vz-buybox-stock .material-symbols-outlined{font-size:18px}
.vz-buybox-stock.out{color:var(--vz-red)}
.vz-pay-row{display:flex;align-items:center;gap:10px;margin:18px 0;padding:16px 0;border-top:1px solid var(--vz-line);border-bottom:1px solid var(--vz-line)}
.vz-pay-row .lbl{font-size:12px;color:var(--vz-ink-soft);font-weight:600}
.vz-pdp-meta{font-size:13px;color:var(--vz-ink-soft);display:flex;flex-direction:column;gap:6px;margin-top:8px}
.vz-pdp-meta b{font-weight:700;color:var(--vz-dark)}
@media(max-width:992px){.vz-pdp-grid{grid-template-columns:1fr;gap:28px}}

/* PDP sections */
.vz-pdp-section{padding:60px 0}
.vz-why{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--vz-cream);border-radius:8px;overflow:hidden}
.vz-why-img img{width:100%;height:100%;object-fit:cover;min-height:300px}
.vz-why-body{padding:44px}
.vz-why-body h2{font-size:30px;font-weight:700;margin-bottom:20px}
.vz-why-pt{margin-bottom:18px}
.vz-why-pt h4{font-size:17px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.vz-why-pt h4 .material-symbols-outlined{color:var(--vz-red);font-size:22px}
.vz-why-pt p{font-size:14px;line-height:1.6;color:var(--vz-ink-soft)}
@media(max-width:992px){.vz-pdp-section{padding:44px 0}.vz-why{grid-template-columns:1fr}.vz-why-body{padding:30px 24px}.vz-why-img img{min-height:220px}}

/* sticky mobile add-to-cart */
.vz-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--vz-line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.4);transform:translateY(110%);transition:transform .35s ease;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.vz-sticky-atc.show{transform:translateY(0)}
.vz-sticky-atc-inner{display:flex;align-items:center;gap:12px;max-width:var(--vz-wrap);margin:0 auto}
.vz-sticky-atc img{width:46px;height:46px;border-radius:6px;object-fit:contain;background:var(--vz-gray);flex-shrink:0}
.vz-sticky-info{flex:1;min-width:0}
.vz-sticky-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vz-sticky-price{font-weight:700;color:var(--vz-red);font-size:15px}
.vz-sticky-atc .vz-btn{padding:12px 20px;white-space:nowrap}
@media(min-width:993px){.vz-sticky-atc{display:none}}

/* =====================================================================
   WOOCOMMERCE NATIVE (cart/checkout/account/notices) — recoloré Vitazen
   Business logic intacte.
   ===================================================================== */
.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.woocommerce #respond input#submit,.single_add_to_cart_button,.checkout-button,
.wc-block-components-button,.wc-proceed-to-checkout a.checkout-button,
button[name="update_cart"],button[name="apply_coupon"],
.woocommerce-form-login__submit,.woocommerce-form-register__submit{
    background-color:var(--vz-red)!important;color:#fff!important;
    padding:1rem 2rem!important;border-radius:6px!important;
    font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:.95rem!important;
    border:0!important;cursor:pointer!important;text-transform:uppercase!important;letter-spacing:.04em!important;
    transition:background-color .25s ease!important;line-height:1.2!important;
}
.woocommerce button.button:hover,.woocommerce a.button:hover,.single_add_to_cart_button:hover,
.checkout-button:hover,button[name="update_cart"]:hover{background-color:var(--vz-red-dark)!important}
.woocommerce .button.alt{background-color:var(--vz-dark)!important;color:#fff!important}
.woocommerce .button.alt:hover{background-color:#000!important}
.woocommerce .woocommerce-Price-amount{font-family:'Inter',sans-serif!important;font-weight:700;color:var(--vz-red)!important}
.woocommerce .quantity input.qty,.quantity input.qty{width:72px!important;padding:.85rem .6rem!important;border:1px solid var(--vz-line)!important;border-radius:6px!important;font-family:'Inter',sans-serif!important;background:#fff!important;color:var(--vz-ink)!important;text-align:center}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,.select2-container--default .select2-selection--single{border:1px solid var(--vz-line)!important;border-radius:6px!important;padding:.85rem 1rem!important;font-family:'Inter',sans-serif!important;background:#fff!important;color:var(--vz-ink)!important;width:100%;box-sizing:border-box;height:auto!important}
.woocommerce form .form-row label{font-family:'Inter',sans-serif!important;font-size:.72rem!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:var(--vz-ink-soft)!important;font-weight:700!important;margin-bottom:.4rem!important;display:block!important}
.woocommerce table.shop_table{border:0!important;background:transparent!important;font-family:'Inter',sans-serif!important}
.woocommerce table.shop_table th{font-size:.7rem!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:var(--vz-dark)!important;background:transparent!important;border-bottom:1px solid var(--vz-line)!important;padding:1.1rem 1rem!important}
.woocommerce table.shop_table td{border-top:1px solid var(--vz-line)!important;padding:1.3rem 1rem!important;color:var(--vz-ink)!important}
.woocommerce table.shop_table .product-name a{color:var(--vz-dark)!important;font-weight:600!important;text-decoration:none!important}
.woocommerce table.shop_table img{width:72px!important;height:72px!important;object-fit:contain!important;border-radius:6px!important;background:var(--vz-gray)}
.cart_totals,.cart-collaterals{background:var(--vz-cream);padding:2rem;border-radius:8px}
.cart_totals h2,.woocommerce-checkout h3,#order_review_heading{font-family:'Playfair Display',serif!important;color:var(--vz-dark)!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-notice{background:var(--vz-cream)!important;border-top:3px solid var(--vz-red)!important;color:var(--vz-dark)!important;padding:1rem 1.25rem!important;border-radius:6px!important;font-family:'Inter',sans-serif!important}
.woocommerce-MyAccount-navigation ul{list-style:none!important;padding:0!important;margin:0 0 2rem!important;display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--vz-line);padding-bottom:1rem!important}
.woocommerce-MyAccount-navigation ul li a{font-weight:600!important;color:var(--vz-ink-soft)!important;padding:.5rem 1rem;text-decoration:none!important}
.woocommerce-MyAccount-navigation ul li.is-active a,.woocommerce-MyAccount-navigation ul li a:hover{color:var(--vz-red)!important;border-bottom:2px solid var(--vz-red)!important}
.stock.in-stock{color:var(--vz-teal)!important;font-size:.875rem}
.stock.out-of-stock{color:var(--vz-red)!important;font-size:.875rem}
.single-product div.product .woocommerce-product-gallery{display:none!important}
.single-product div.product{overflow:visible!important}
.single-product .product_meta{display:none}
body.admin-bar .vz-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .vz-header{top:46px}}

.vz-hide{display:none!important}

/* =====================================================================
   ZENMART — PASSE 2 OVERRIDES (vert + doré, nouveaux blocs ergonomie)
   ===================================================================== */

/* Hero : crème/beige au lieu du moutarde Vitazen */
.vz-hero{background:linear-gradient(160deg,var(--zm-cream) 0%,var(--zm-beige) 100%)}
.vz-hero-rating{color:var(--zm-text)}
.vz-hero-rating .vz-stars{color:var(--zm-gold)}
.vz-hero-micro{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--zm-muted)}
.vz-hero-micro .dot{color:var(--zm-gold)}

/* Accents dorés (eyebrows, étoiles) */
.vz-eyebrow{color:var(--zm-gold-dark)}
.vz-eyebrow::before{background:var(--zm-gold)}
.vz-stars{color:var(--zm-gold)}

/* Badges : best-seller vert / promo doré */
.vz-badge{background:var(--zm-green)}
.vz-badge-sale{background:var(--zm-gold)}

/* Header CTA WhatsApp (pastille dorée) */
.zm-headcta{display:inline-flex;align-items:center;gap:8px;background:var(--zm-gold);color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:9999px;text-decoration:none;white-space:nowrap;transition:background .25s ease,transform .25s ease}
.zm-headcta:hover{background:var(--zm-gold-dark);color:#fff;transform:translateY(-1px)}
.zm-headcta .material-symbols-outlined{font-size:18px}
@media(max-width:1180px){.zm-headcta .zm-headcta-txt{display:none}.zm-headcta{padding:11px 12px}}

/* WhatsApp buttons */
.vz-btn-wa{background:var(--zm-gold);color:#fff}
.vz-btn-wa:hover{background:var(--zm-gold-dark);color:#fff}

/* Bande bénéfices (remplace la bande "NON GMO + ..." de Vitazen) */
.zm-benefits{background:var(--zm-green-dark);color:#fff}
.zm-benefits-row{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;max-width:var(--vz-wrap);margin:0 auto;padding:22px 24px}
.zm-benefit{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.zm-benefit .material-symbols-outlined{font-size:26px;color:var(--zm-gold)}
.zm-benefit span.lbl{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);line-height:1.3}
@media(max-width:992px){.zm-benefits-row{grid-template-columns:repeat(3,1fr);gap:20px 12px}}
@media(max-width:480px){.zm-benefits-row{grid-template-columns:repeat(2,1fr)}}

/* Section "Quel coussin choisir ?" (cartes besoin) */
.zm-choose{padding:74px 0;background:var(--zm-cream)}
.zm-choose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.zm-choose-card{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--zm-border);border-radius:10px;padding:28px 24px;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease}
.zm-choose-card:hover{box-shadow:0 20px 40px -26px rgba(11,61,46,.45);transform:translateY(-4px)}
.zm-choose-icon{width:54px;height:54px;border-radius:9999px;background:var(--zm-cream);display:flex;align-items:center;justify-content:center;color:var(--zm-green)}
.zm-choose-icon .material-symbols-outlined{font-size:28px}
.zm-choose-card h4{font-family:'Playfair Display',serif;font-size:19px;color:var(--zm-green);line-height:1.25}
.zm-choose-card .go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-size:13px;font-weight:600;color:var(--zm-gold-dark);text-transform:uppercase;letter-spacing:.04em}
@media(max-width:992px){.zm-choose{padding:52px 0}.zm-choose-grid{grid-template-columns:1fr 1fr;gap:14px}}
@media(max-width:480px){.zm-choose-grid{grid-template-columns:1fr}}

/* Bloc WhatsApp avant footer */
.zm-wahelp{background:var(--zm-green);color:#fff;padding:64px 0}
.zm-wahelp-inner{max-width:760px;margin:0 auto;text-align:center;padding:0 24px}
.zm-wahelp h2{color:#fff;font-size:clamp(26px,3vw,38px);margin-bottom:14px}
.zm-wahelp p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:26px}

/* PDP : badges confiance (4) + bénéfices courts + CTA WhatsApp */
.vz-buybox-wa{margin-top:12px}
.vz-trust-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px 0;margin:18px 0;border-top:1px solid var(--vz-line);border-bottom:1px solid var(--vz-line)}
.vz-trust-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}
.vz-trust-badge .material-symbols-outlined{font-size:24px;color:var(--zm-green)}
.vz-trust-badge span.t{font-size:11.5px;font-weight:600;color:var(--zm-text);line-height:1.3}
@media(max-width:480px){.vz-trust-badges{grid-template-columns:repeat(2,1fr);gap:16px}}

/* =====================================================================
   ZENMART — PASSE 3 : RAFFINEMENT PREMIUM (cohérence visuelle + anim)
   Aucun changement de structure : uniquement rendu, direction artistique,
   alignements et micro-animations.
   ===================================================================== */

/* --- Direction artistique unifiée sur TOUS les visuels placeholder ---
   Une légère désaturation + chaleur homogène réduit l'effet "images de
   sources différentes" et donne une cohérence premium. --- */
.vz-hero-media img,
.vz-cat-circle img,
.vz-feature-img img,
.vz-pcard-media img,
.vz-sub-img img,
.vz-faq-media img,
.vz-why-img img,
.vz-gallery-main img,
.vz-gallery-thumb img{
    filter:saturate(.92) contrast(1.02) brightness(1.01);
}

/* HERO : cadrage moins agressif, produit qui respire, allure "marque" */
.vz-hero-grid{align-items:center}
.vz-hero-media{position:relative;padding:44px 28px;align-self:center}
.vz-hero-media::before{content:"";position:absolute;inset:20px 6px;background:radial-gradient(120% 90% at 50% 35%,rgba(255,253,248,.9),rgba(231,215,189,.5) 70%,transparent);border-radius:24px;z-index:0}
.vz-hero-media img{position:relative;z-index:1;width:100%;height:auto;max-height:480px;aspect-ratio:5/4;object-fit:cover;object-position:center;border-radius:20px;box-shadow:0 38px 70px -38px rgba(11,61,46,.42)}
@media(max-width:992px){.vz-hero-media{padding:20px 16px 0}.vz-hero-media img{max-height:none;aspect-ratio:16/11}.vz-hero-media::before{inset:8px}}

/* CATÉGORIES : cercles homogènes (fond crème + voile vert subtil + liseré) */
.vz-cat-circle{background:var(--zm-cream);box-shadow:inset 0 0 0 1px rgba(11,61,46,.07),0 14px 30px -20px rgba(11,61,46,.4)}
.vz-cat-circle::after{content:"";position:absolute;inset:0;border-radius:9999px;background:linear-gradient(160deg,rgba(11,61,46,.05),rgba(185,147,90,.08));pointer-events:none}
.vz-cat-circle img{object-position:center}

/* 3 CARTES : même lumière / même tonalité pour une DA cohérente */
.vz-feature-img{position:relative;background:var(--zm-cream)}
.vz-feature-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,253,248,.06),rgba(11,61,46,.10));pointer-events:none}

/* CARTES PRODUITS : "studio" homogène (fond, cadrage, densité identiques) */
.vz-pcard-media{background:radial-gradient(120% 100% at 50% 38%,#fffdf8 0%,#f3ebdb 100%)}
.vz-pcard-media img{object-fit:cover;object-position:center;padding:0}
.vz-pcard{box-shadow:0 1px 0 rgba(11,61,46,.03)}
.vz-pcard:hover{box-shadow:0 22px 44px -26px rgba(11,61,46,.5)}

/* GALERIE PDP : produit cadré proprement sur fond studio */
.vz-gallery-main{background:radial-gradient(120% 100% at 50% 38%,#fffdf8,#f1e9d9)}
.vz-gallery-main img{object-fit:cover;padding:0}
.vz-gallery-thumb img{object-fit:cover;padding:0}

/* BADGES CONFIANCE PDP : icônes en pastille, alignement net */
.vz-trust-badges{align-items:start}
.vz-trust-badge{gap:9px}
.vz-trust-badge .material-symbols-outlined{background:var(--zm-cream);width:44px;height:44px;border-radius:9999px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(11,61,46,.07)}

/* "POURQUOI CHOISIR" : alignement propre + icônes cohérentes + texte resserré */
.vz-why-pt{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;align-items:start;margin-bottom:20px}
.vz-why-pt h4{grid-column:2;margin:0 0 2px;font-size:16px;display:block}
.vz-why-pt .vz-why-ic{grid-row:1 / span 2;grid-column:1;width:40px;height:40px;border-radius:9999px;background:var(--zm-cream);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(11,61,46,.07)}
.vz-why-pt .vz-why-ic .material-symbols-outlined{font-size:22px;color:var(--zm-green)}
.vz-why-pt p{grid-column:2;font-size:13.5px;line-height:1.55;margin:0}

/* PDP : bloc "Idéal pour" (puces) */
.zm-idealfor{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.zm-idealfor .chip{display:inline-flex;align-items:center;gap:6px;background:var(--zm-cream);border:1px solid var(--zm-border);color:var(--zm-text);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9999px}
.zm-idealfor .chip .material-symbols-outlined{font-size:16px;color:var(--zm-gold-dark)}

/* PDP : mini-bloc specs (dimensions / matière / entretien / usage) */
.zm-specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--zm-border);border:1px solid var(--zm-border);border-radius:10px;overflow:hidden;margin:0 0 22px}
.zm-spec{background:#fff;padding:14px 16px;display:flex;gap:11px;align-items:flex-start}
.zm-spec .material-symbols-outlined{font-size:20px;color:var(--zm-green);margin-top:1px}
.zm-spec .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--zm-gold-dark);font-weight:700}
.zm-spec .v{font-size:13.5px;color:var(--zm-text);line-height:1.4}
@media(max-width:480px){.zm-specs{grid-template-columns:1fr}}

/* --- TOP BAR : micro-animations discrètes & premium ---
   L'icône camion reste FIXE dans son espace (jamais de chevauchement avec le
   texte). Seuls : des lignes de vitesse derrière l'icône + une micro-vibration
   (<= 1px). Le texte ne bouge jamais. --- */
.vz-topbar .vz-anim-truck{position:relative;display:inline-block;width:1.15em;text-align:center;overflow:visible}
.vz-topbar .vz-anim-truck::before{content:"";position:absolute;right:100%;top:50%;width:9px;height:8px;margin-right:1px;transform:translateY(-50%);opacity:0;
    background:
        linear-gradient(currentColor,currentColor) 100% 1px / 6px 1.4px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 4px / 9px 1.4px no-repeat,
        linear-gradient(currentColor,currentColor) 100% 7px / 4px 1.4px no-repeat;}
@media (prefers-reduced-motion: no-preference){
    .vz-topbar .vz-anim-truck{animation:zmTruckVib 1.6s ease-in-out infinite}
    @keyframes zmTruckVib{0%,100%{transform:translateY(0)}25%{transform:translateY(-.6px)}50%{transform:translateY(.4px)}75%{transform:translateY(-.4px)}}
    .vz-topbar .vz-anim-truck::before{animation:zmSpeed 1.5s linear infinite}
    @keyframes zmSpeed{0%{opacity:0;transform:translateY(-50%) translateX(3px)}35%{opacity:.55}100%{opacity:0;transform:translateY(-50%) translateX(-4px)}}
    .vz-topbar .vz-anim-pulse{display:inline-block;animation:zmPulse 3.6s ease-in-out infinite}
    @keyframes zmPulse{0%,100%{opacity:.82}50%{opacity:1}}
}

/* =====================================================================
   ZENMART — PASSE 4 : UI CLEAN (sobre, éditorial, anti AI-slop / Lovable)
   Boutons plats · pas de glow/gradient/shine · ombres remplacées par des
   bordures discrètes · hover sobre (≤2px, 180–250ms) · top bar figée.
   ===================================================================== */

/* Transitions sobres et ciblées (jamais "all") */
.vz-btn,.zm-headcta,.vz-pcard,.vz-feature,.zm-choose-card,.vz-catcard,
.vz-cat-circle,.vz-pcard-quick,.vz-acc-q,.vz-nav-links a,.vz-link-all,.vz-feature-link{
    transition:background-color .2s ease,border-color .2s ease,color .2s ease!important;
}

/* --- BOUTONS : plats, sans ombre, sans transform, hover sobre --- */
.vz-btn{border-width:1.5px;border-radius:6px;box-shadow:none!important;letter-spacing:.01em}
.vz-btn-red{background:var(--zm-green);color:#fff;border-color:var(--zm-green)}
.vz-btn-red:hover{background:var(--zm-green-dark);border-color:var(--zm-green-dark);color:#fff;transform:none}
.vz-btn-outline{background:transparent;color:var(--zm-green);border-color:var(--zm-green)}
.vz-btn-outline:hover{background:var(--zm-cream);color:var(--zm-green);transform:none}
.vz-btn-dark{background:var(--zm-green-dark);color:#fff;border-color:var(--zm-green-dark)}
.vz-btn-dark:hover{background:#04201a;color:#fff;transform:none}
.vz-btn-light{background:var(--zm-cream);color:var(--zm-green);border-color:var(--zm-border)}
.vz-btn-light:hover{background:#efe7d7;color:var(--zm-green);transform:none}
.vz-btn-wa{background:var(--zm-gold);color:#fff;border-color:var(--zm-gold)}
.vz-btn-wa:hover{background:var(--zm-gold-dark);border-color:var(--zm-gold-dark);color:#fff;transform:none}

/* WooCommerce natif : pas d'ombre ni de "scale" au hover */
.woocommerce button.button,.woocommerce a.button,.woocommerce input.button,
.single_add_to_cart_button,.checkout-button,.wc-proceed-to-checkout a.checkout-button,
.woocommerce #respond input#submit,.woocommerce-form-login__submit,
.woocommerce-form-register__submit,.wc-block-components-button{
    box-shadow:none!important;border-radius:6px!important;letter-spacing:.02em!important;
}
.woocommerce button.button:hover,.woocommerce a.button:hover,.single_add_to_cart_button:hover,
.checkout-button:hover,button[name="update_cart"]:hover{transform:none!important;background-color:var(--zm-green-dark)!important}

/* Header CTA : pas de lift */
.zm-headcta{box-shadow:none}
.zm-headcta:hover{background:var(--zm-gold-dark);transform:none}

/* --- OMBRES : bordures discrètes à la place des ombres fortes --- */
.vz-pcard{box-shadow:none!important;border:1px solid var(--zm-border);border-radius:8px}
.vz-pcard:hover{box-shadow:none!important;transform:none;border-color:rgba(11,61,46,.35)}
.vz-feature{box-shadow:none!important;border:1px solid var(--zm-border);border-radius:8px}
.vz-feature:hover{box-shadow:none!important;transform:none;border-color:rgba(11,61,46,.35)}
.zm-choose-card{box-shadow:none!important;border:1px solid var(--zm-border);border-radius:8px}
.zm-choose-card:hover{box-shadow:none!important;transform:none;border-color:rgba(11,61,46,.35)}
.vz-catcard{box-shadow:none!important}
.vz-catcard:hover{box-shadow:none!important;border-color:rgba(11,61,46,.35)}
.vz-cat-circle{box-shadow:inset 0 0 0 1px rgba(11,61,46,.08)!important}
.vz-cat:hover .vz-cat-circle{transform:none;box-shadow:inset 0 0 0 1px rgba(11,61,46,.18)!important}
.vz-gallery-main{box-shadow:none!important;border:1px solid var(--zm-border)}
.vz-gallery-thumb{box-shadow:none}

/* --- GRADIENTS artificiels -> fonds plats crème --- */
.vz-hero{background:var(--zm-cream)}
.vz-hero-media::before{display:none!important}
.vz-hero-media img{border-radius:10px;box-shadow:none!important}
.vz-pcard-media{background:#f3ece0}
.vz-gallery-main{background:#f3ece0}
.vz-feature-img::after{display:none!important}
.vz-cat-circle::after{display:none!important}

/* Rayons contrôlés (moins "SaaS IA") */
.zm-specs{border-radius:8px}
.zm-idealfor .chip{border-radius:6px}
.vz-feature-img{border-radius:0}

/* Quick-add flottant : sobre (bordure, pas d'ombre) */
.vz-pcard-quick{box-shadow:none!important;background:#fff;color:var(--zm-green);border:1px solid var(--zm-border)}
.vz-pcard-quick:hover{background:var(--zm-green);color:#fff;border-color:var(--zm-green)}

/* --- ANIMATIONS gadget supprimées --- */
.vz-topbar .vz-anim-truck,.vz-topbar .vz-anim-pulse{animation:none!important;transform:none!important}
.vz-topbar .vz-anim-truck::before{display:none!important;content:none!important}
.vz-topbar .vz-anim-truck{width:auto}

/* =====================================================================
   ZENMART — PASSE 5 : nettoyage micro-labels + MOBILE Vitazen-level
   ===================================================================== */

/* --- Micro-labels décoratifs supprimés (on garde uniquement les vrais titres) --- */
.vz-eyebrow{display:none!important}
.vz-sec-head{margin-bottom:38px}
.vz-sec-head .vz-h2,.vz-sec-head-row .vz-h2{margin-top:0}

/* --- TOP BAR mobile : compacte, jamais de débordement --- */
@media(max-width:680px){
    .vz-topbar-inner{justify-content:center;gap:8px;padding:0 14px;height:36px;font-size:11.5px}
    .vz-topbar .material-symbols-outlined{font-size:14px}
    .vz-topbar .vz-item:last-child{display:none} /* on ne garde que la ligne livraison (WhatsApp dispo ailleurs) */
}

/* --- HEADER mobile : déclutter (WhatsApp via top bar + menu + sticky PDP) --- */
@media(max-width:992px){
    .zm-headcta{display:none}
    .vz-nav{gap:12px}
    .vz-nav-actions{gap:16px}
}

/* --- HERO mobile : moins haut, image respirante --- */
@media(max-width:992px){
    .vz-hero-grid{min-height:0}
    .vz-hero-media{padding:18px 16px 0}
    .vz-hero-media img{aspect-ratio:16/10;max-height:300px;border-radius:10px}
    .vz-hero-content{padding:30px 20px 40px}
    .vz-hero-title{font-size:clamp(28px,7vw,36px)}
    .vz-hero-lede{font-size:15px}
}

/* --- CATÉGORIES mobile : scroll horizontal (logique Vitazen) --- */
@media(max-width:992px){
    .vz-cats-rail{display:block}
    .vz-cats-row{display:flex!important;grid-template-columns:none!important;max-width:none;
        overflow-x:auto;gap:14px;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .vz-cats-row::-webkit-scrollbar{height:0}
    .vz-cat{flex:0 0 auto;width:104px;scroll-snap-align:start}
    .vz-cat-circle{width:100px;height:100px}
    .vz-cat-name{font-size:14px;margin-top:10px}
}

/* --- En-têtes de section avec lien/tabs : empilage propre sur mobile --- */
@media(max-width:680px){
    .vz-sec-head-row{flex-direction:column;align-items:flex-start;gap:14px}
    .vz-tabs{justify-content:flex-start;flex-wrap:wrap}
    .vz-arrows{display:none}
}

/* --- Sections moins hautes sur mobile (pas d'espace vide inutile) --- */
@media(max-width:680px){
    .vz-products,.vz-cats,.vz-features,.vz-latest,.vz-trust,.zm-choose,.vz-shop{padding-top:42px;padding-bottom:42px}
    .vz-faq{padding:42px 0}
    .zm-wahelp{padding:46px 0}
    .vz-sec-head{margin-bottom:28px}
    .vz-pdp-section{padding:40px 0}
}

/* --- FAQ mobile : image sous l'accordéon, hauteur maîtrisée --- */
@media(max-width:992px){
    .vz-faq-media{order:2;max-width:none}
    .vz-faq-media img{aspect-ratio:16/10;max-height:240px}
}

/* --- Bloc WhatsApp compact --- */
@media(max-width:680px){
    .zm-wahelp-inner h2{font-size:24px}
    .zm-wahelp-inner p{font-size:14.5px}
}

/* =====================================================================
   PDP MOBILE
   ===================================================================== */
@media(max-width:992px){
    .vz-pdp{padding:24px 0 48px}
    .vz-pdp-grid{gap:24px}
    /* galerie : image propre + miniatures scrollables */
    .vz-gallery-main{border-radius:10px}
    .vz-gallery-thumbs{gap:10px;padding-bottom:4px;scroll-snap-type:x mandatory}
    .vz-gallery-thumb{width:64px;height:64px;scroll-snap-align:start}
    /* qty + ajouter au panier ergonomiques */
    .vz-atc-native form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
    .vz-atc-native .quantity{flex:0 0 auto}
    .vz-atc-native .single_add_to_cart_button,.vz-atc-native button.button{flex:1 1 auto;min-width:58%}
    /* titres PDP resserrés */
    .vz-buybox h1{font-size:clamp(24px,6vw,30px)}
    .vz-why-body{padding:28px 22px}
    .vz-why-body h2{font-size:24px}
}
/* badges confiance : grille 2 colonnes propre sur mobile */
@media(max-width:560px){
    .vz-trust-badges{grid-template-columns:repeat(2,1fr);gap:14px}
    .zm-specs{grid-template-columns:1fr}
    .zm-idealfor .chip{font-size:12px;padding:6px 11px}
}

/* --- Garde-fou anti-overflow horizontal global --- */
.vz-wrap,.zm-benefits-row,.vz-hero-grid,.vz-footer-top,.vz-footer-bottom-inner{max-width:100%}
img,video{max-width:100%}

/* =====================================================================
   ZENMART — PASSE 6 : passe finale UI (anti AI-slop + mobile premium)
   Boutons : un bouton = une action réelle. Cartes cliquables en entier.
   Aucun effet décoratif ajouté ; uniquement nettoyage + densité mobile.
   ===================================================================== */

/* --- Garde-fous : micro-CTA / flèches décoratifs neutralisés partout
   (même si un markup en cache en contient encore). --- */
.vz-pcard-quick,.vz-pcard-quick-form,.vz-feature-link,.zm-choose-card .go{display:none!important}

/* --- Anti-overflow horizontal : les enfants de grille/flex doivent pouvoir
   rétrécir sous la largeur intrinsèque de leurs images (min-width:auto par
   défaut = débordement à droite sous ~420px). Correctif standard. --- */
.vz-hero-grid>*,.vz-grid>*,.vz-grid-3>*,.vz-features-grid>*,.vz-cats-row>*,
.vz-trust-grid>*,.vz-trust-items>*,.vz-footer-top>*,.vz-pdp-grid>*,
.zm-choose-grid>*,.zm-benefits-row>*,.vz-hero-content,.vz-sec-head,.vz-sec-head-row{min-width:0}
.vz-hero-title,.vz-h2,.vz-feature-body h3,.vz-pcard-title,.vz-acc-q,.zm-wahelp h2{overflow-wrap:anywhere}

/* --- Cartes "usage" : toute la carte est cliquable (plus de "Découvrir +") --- */
a.vz-feature{display:block;text-decoration:none;color:inherit}
a.vz-feature .vz-feature-body p{margin-bottom:0}

/* --- Cartes produit : toute la carte cliquable, média net --- */
.vz-pcard-media{cursor:pointer}

/* =========================== MOBILE ================================= */
@media(max-width:760px){
    /* Produits : 2 colonnes lisibles, image plus grande, titre/prix clairs */
    .vz-grid,.vz-grid-3{grid-template-columns:repeat(2,1fr);gap:14px}
    .vz-pcard-media{aspect-ratio:1/1}
    .vz-pcard-body{padding:12px 12px 14px}
    .vz-pcard-title{font-size:13.5px;line-height:1.35;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
    .vz-price .now{font-size:15px}
    .vz-price .was{font-size:12.5px}

    /* Hero : un seul CTA, pleine largeur, lisible */
    .vz-hero-ctas{width:100%}
    .vz-hero-ctas .vz-btn{width:100%;justify-content:center}
    .vz-hero-micro{margin-top:18px;font-size:12.5px}

    /* Cartes usage : compactes */
    .vz-feature-body{padding:18px 18px 20px}
    .vz-feature-body h3{font-size:18px;margin-bottom:8px}
    .vz-feature-body p{font-size:13.5px}

    /* Avis : section resserrée (1 avis fort + preuves courtes) */
    .vz-trust-grid{gap:20px}
    .vz-testi{padding:26px 22px}
    .vz-trust-items{gap:14px}
    .vz-trust-item p{font-size:13px}
}

/* --- FOOTER mobile : compact, colonnes empilées proprement --- */
@media(max-width:680px){
    .vz-footer-top{grid-template-columns:1fr 1fr!important;gap:22px 24px;padding:38px 22px 26px}
    .vz-footer-top>div:first-child{grid-column:1 / -1}
    .vz-footer-top h5{margin-bottom:10px}
    .vz-footer-top ul li{margin-bottom:7px}
    .vz-footer-top .vz-btn{padding:12px 18px;font-size:13.5px}
}
@media(max-width:430px){
    .vz-footer-top{grid-template-columns:1fr!important}
}

/* --- PDP mobile : sticky add-to-cart compact, WhatsApp jamais surdimensionné --- */
@media(max-width:560px){
    .vz-sticky-atc .vz-sticky-title{font-size:13px}
    .vz-sticky-atc .vz-btn{padding:11px 18px;font-size:13.5px}
    .vz-buybox-wa .vz-btn{padding:13px 18px}
}

/* =====================================================================
   ELAFYA — PASSE 7 : mobile-first premium (rebrand + refonte homepage)
   Header centré [Menu] ELAFYA [Panier] · hero réordonné · sliders scroll-snap
   · Pourquoi Elafya · footer accordéon · barre CTA fixe mobile.
   ===================================================================== */

/* --- WORDMARK ELAFYA (logo texte temporaire) --- */
.vz-brand{display:inline-flex;align-items:center;text-decoration:none}
.vz-wordmark{font-family:'Playfair Display',serif;font-weight:700;font-size:27px;line-height:1;letter-spacing:.005em;color:var(--zm-green);white-space:nowrap}
.vz-wordmark-sm{font-size:22px}
.vz-wordmark-light{color:#fff;display:inline-block;margin-bottom:16px}

/* --- HEADER : zones tactiles 44px, actions sobres --- */
.vz-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:none;color:var(--zm-text);cursor:pointer}
.vz-nav-actions a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.vz-cart-link{min-width:44px;min-height:44px}
.vz-drawer-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--zm-text)}
.vz-drawer-x .material-symbols-outlined{font-size:28px}
.vz-drawer-account{display:flex;align-items:center;gap:10px;margin-top:6px;color:var(--zm-green)!important;font-weight:600}
.vz-drawer-account .material-symbols-outlined{font-size:22px}

/* Header mobile : grille 3 zones -> logo parfaitement centré */
@media(max-width:992px){
    .vz-nav{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;justify-content:initial}
    .vz-nav-links,.vz-search{display:none}
    .vz-burger{display:inline-flex;justify-self:start}
    .vz-brand{justify-self:center}
    .vz-nav-actions{justify-self:end;gap:2px}
    .vz-nav-actions .vz-acct-link{display:none}   /* mobile = [Menu] ELAFYA [Panier] */
    .vz-wordmark{font-size:23px}
    .zm-headcta{display:none}
}

/* --- HERO : eyebrow pill · dual CTA · 3 preuves opérationnelles --- */
.vz-hero-eyebrow{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--zm-gold-dark);background:var(--zm-white);border:1px solid var(--zm-border);padding:7px 14px;border-radius:9999px;margin-bottom:18px}
.vz-hero-title{font-size:clamp(38px,4.6vw,58px)}
.vz-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.vz-hero-proofs{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px}
.vz-hero-proofs li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--zm-text)}
.vz-hero-proofs .material-symbols-outlined{font-size:19px;color:var(--zm-green)}
@media(max-width:760px){
    .vz-hero-title{font-size:clamp(31px,8.4vw,40px)}
    .vz-hero-eyebrow{margin-bottom:14px}
    .vz-hero-ctas{flex-direction:column}
    .vz-hero-ctas .vz-btn{width:100%}
    .vz-hero-proofs{gap:9px 18px;margin-top:20px}
    .vz-hero-proofs li{font-size:13px}
    .vz-hero-content{padding:26px 18px 34px}
}

/* --- BÉNÉFICES : carrousel tactile mobile (une carte + amorce visible) --- */
.zm-benefits-row{grid-template-columns:repeat(4,1fr)}
@media(max-width:992px){.zm-benefits-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){
    .zm-benefits-row{display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;
        padding:18px 16px;scroll-snap-type:x mandatory;scroll-padding-left:16px;-webkit-overflow-scrolling:touch}
    .zm-benefits-row::-webkit-scrollbar{height:0}
    .zm-benefit{flex:0 0 46%;scroll-snap-align:start;background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 12px}
}

/* --- NAVIGATION PAR BESOIN : slider ~2,5-3 visibles, 1re carte alignée marge --- */
@media(max-width:992px){
    .vz-cats-row{scroll-padding-left:0}
    .vz-cat{width:108px}
    .vz-cat-circle{width:104px;height:104px}
    .vz-cat-name{font-size:14px;line-height:1.25}
}

/* --- PRODUITS ESSENTIELS : slider mobile ~1,4 carte visible --- */
@media(max-width:760px){
    .vz-grid--slider{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;
        scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
    .vz-grid--slider::-webkit-scrollbar{height:0}
    .vz-grid--slider>*{flex:0 0 72%;scroll-snap-align:start}
}

/* --- POURQUOI ELAFYA : réassurance factuelle (remplace les avis) --- */
.zm-whyfya{padding:74px 0;background:#fff}
.zm-whyfya-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start}
.zm-whyfya-intro h2{margin:0 0 14px}
.zm-whyfya-intro p{font-size:15px;line-height:1.7;color:var(--zm-muted);max-width:360px}
.zm-whyfya-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.zm-whyfya-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.zm-whyfya-ic{width:44px;height:44px;border-radius:9999px;background:var(--zm-cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(11,61,46,.07)}
.zm-whyfya-ic .material-symbols-outlined{font-size:22px;color:var(--zm-green)}
.zm-whyfya-list h4{font-size:15.5px;font-weight:700;margin:1px 0 4px;color:var(--zm-text)}
.zm-whyfya-list p{font-size:13.5px;line-height:1.55;color:var(--zm-muted);margin:0}
@media(min-width:993px){.zm-whyfya-list li:last-child{grid-column:1 / -1}}
@media(max-width:992px){.zm-whyfya{padding:52px 0}.zm-whyfya-grid{grid-template-columns:1fr;gap:26px}.zm-whyfya-list{grid-template-columns:1fr;gap:18px}}
@media(max-width:680px){.zm-whyfya{padding:42px 0}}

/* --- FOOTER ACCORDÉON (<details> natif accessible) --- */
.vz-footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}
.vz-footer-brand p{font-size:14px;line-height:1.7;margin-top:4px}
.vz-facc{border:0;min-width:0}
.vz-facc>summary{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:20px;list-style:none;cursor:default}
.vz-facc>summary::-webkit-details-marker{display:none}
.vz-facc>summary::marker{content:""}
.vz-facc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.vz-facc ul a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:color .2s ease}
.vz-facc ul a:hover{color:var(--zm-gold)}
@media(min-width:993px){.vz-facc>*:not(summary){display:block!important}}
@media(max-width:992px){
    .vz-footer-top{grid-template-columns:1fr;gap:0;padding:34px 20px 18px}
    .vz-footer-brand{margin-bottom:12px}
    .vz-facc{border-top:1px solid rgba(255,255,255,.12)}
    .vz-facc>summary{display:flex;align-items:center;justify-content:space-between;margin:0;padding:15px 2px;min-height:52px;cursor:pointer}
    .vz-facc>summary::after{content:"add";font-family:'Material Symbols Outlined';font-size:22px;line-height:1;color:var(--zm-gold);opacity:.9}
    .vz-facc[open]>summary::after{content:"remove"}
    .vz-facc ul,.vz-facc .vz-facc-body{padding:0 2px 18px}
}

/* --- BARRE CTA FIXE MOBILE --- */
.zm-fixedcta{display:none}
@media(max-width:760px){
    .zm-fixedcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:65;
        background:rgba(255,253,248,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
        border-top:1px solid var(--zm-border);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
    .zm-fixedcta .vz-btn{flex:1;padding:13px 12px;font-size:14px}
    body.zm-has-fixedcta{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
/* la barre fixe ne doit jamais recouvrir le sticky ATC du PDP */
.vz-sticky-atc{z-index:70}

/* --- Garde-fou anti-overflow : sliders confinés, enfants compressibles --- */
.zm-benefits-row,.vz-grid--slider,.vz-cats-row{max-width:100%}
.zm-whyfya-grid>*,.zm-whyfya-list>*,.vz-footer-top>*{min-width:0}

/* =====================================================================
   ELAFYA — PASSE 8 : DIRECTION ARTISTIQUE V2 (homepage éditoriale)
   ---------------------------------------------------------------------
   Cette couche ne rafistole pas la v1 : elle recompose la homepage avec un
   préfixe dédié (.el-*) pour repartir d'une cascade propre. Les blocs .vz-*
   / .zm-* restent en place pour boutique + fiche produit.
   Principes : rythme de fonds (ivoire → vert → blanc → sable → blanc →
   vert profond → ivoire → sable → vert très sombre), largeurs et grilles
   volontairement différentes d'une section à l'autre, aucun élément
   décoratif sans fonction, rayons courts, filets plutôt que cartes.
   ===================================================================== */

:root{
    /* — Palette — */
    --el-green:#0E3B2E;          /* vert profond : marque, actions, sections fortes */
    --el-green-deep:#06241B;     /* footer */
    --el-ivory:#F7F3EA;          /* hero, FAQ, barre utilitaire */
    --el-sand:#EBDFC9;           /* produits, CTA final */
    --el-paper:#FFFDF9;          /* header, cartes */
    --el-studio:#F2EADB;         /* fond image produit */
    --el-gold:#A8813F;           /* accent (liens, flèches) — contrasté sur clair */
    --el-gold-btn:#B9935A;       /* bouton WhatsApp */
    --el-ink:#14211C;
    --el-muted:#5C6B64;
    --el-line:#E3DACA;
    --el-hair:rgba(255,255,255,.16);   /* filets sur fond sombre */

    /* — Échelle typographique — */
    --el-h1:clamp(36px,4.35vw,64px);
    --el-h2:clamp(28px,3vw,44px);
    --el-h3:clamp(18px,1.5vw,22px);
    --el-body:clamp(15px,1.05vw,16px);

    /* — Espacement (8 · 12 · 16 · 24 · 32 · 48 · 64 · 96) — */
    --el-1:8px;  --el-2:12px; --el-3:16px; --el-4:24px;
    --el-5:32px; --el-6:48px; --el-7:64px; --el-8:96px;

    --el-gut:24px;               /* gouttière de page */
    --vz-nav-h:72px;
}
@media(max-width:900px){ :root{ --el-gut:20px; --vz-nav-h:60px; } }
@media(max-width:380px){ :root{ --el-gut:18px; } }

/* Le thème historique n'a pas de reset box-sizing global (le poser ici casserait
   boutique/fiche produit). On le pose donc sur le périmètre de la homepage v2 et
   sur les composants partagés que cette passe redimensionne. */
.el-wrap,.el-util-in,.el-hero-grid,.el-hero-media,.el-hero-body,.el-hero-inner,
.el-assur-in,.el-assur-i,.el-needs-row,.el-need,.el-need-img,
.el-shelf-grid,.el-pcard,.el-pcard-media,.el-pcard-body,
.el-guide-grid,.el-guide-aside,.el-guide-fig,.el-guide-cards,.el-guide-card,
.el-why-grid,.el-why-list,.el-why-item,.el-faq-grid,.el-faq-aside,.el-acc,.el-acc-q,
.el-cta-in,.vz-btn,.vz-search,.vz-nav,.zm-fixedcta{box-sizing:border-box}

.el-wrap{max-width:1280px;margin:0 auto;padding:0 var(--el-gut)}
.el-wrap--tight{max-width:1120px}

/* Titres de section : alignements volontairement différents selon la section */
.el-head{margin-bottom:var(--el-6)}
.el-head h2{font-size:var(--el-h2);font-weight:600;color:var(--el-green);letter-spacing:-.012em;line-height:1.08}
.el-head p{margin-top:14px;font-size:var(--el-body);line-height:1.7;color:var(--el-muted);max-width:600px}
.el-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--el-4);margin-bottom:44px}
.el-head-row h2{font-size:var(--el-h2);font-weight:600;color:var(--el-green);letter-spacing:-.012em;line-height:1.08}
.el-more{font-size:14px;font-weight:600;color:var(--el-gold);text-decoration:none;
    border-bottom:1px solid rgba(168,129,63,.45);padding-bottom:3px;white-space:nowrap;flex-shrink:0}
.el-more:hover{color:var(--el-green);border-bottom-color:var(--el-green)}
@media(max-width:900px){
    .el-head{margin-bottom:var(--el-5)}
    .el-head-row{margin-bottom:var(--el-4);align-items:baseline}
    .el-more{font-size:13.5px}
}
@media(max-width:520px){
    .el-head-row{flex-direction:column;align-items:flex-start;gap:var(--el-2)}
}

/* Rails tactiles (mobile uniquement) : marges négatives + padding identique à la
   gouttière = 1re carte alignée sur le texte, dernière carte qui se termine
   exactement sur la marge (jamais de vide final). Voir .el-needs-row /
   .el-shelf-grid dans leurs media queries respectives. */

/* =========================== 1 · BARRE UTILITAIRE =================== */
.el-util{background:var(--el-ivory);border-bottom:1px solid var(--el-line)}
.el-util-in{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);height:32px;
    display:flex;align-items:center;justify-content:center;
    font-size:12.5px;font-weight:500;color:var(--el-green);letter-spacing:.005em}
.el-util-i{padding:0 22px;text-decoration:none;color:inherit;white-space:nowrap;line-height:1}
.el-util-i + .el-util-i{border-left:1px solid var(--el-line)}
.el-util a.el-util-i:hover{color:var(--el-gold)}
@media(max-width:900px){
    .el-util-in{height:30px;font-size:12px;padding:0 14px}
    .el-util-i{padding:0}
    .el-util-i + .el-util-i{border-left:0}
    .el-util-i + .el-util-i::before{content:"·";margin:0 9px;opacity:.55}
    .el-util-wa{display:none}     /* WhatsApp reste dans le menu + les CTA */
}

/* =========================== 2 · HEADER ============================= */
.vz-header{background:var(--el-paper);border-bottom:1px solid var(--el-line);box-shadow:none}
.vz-nav{height:var(--vz-nav-h);max-width:1280px;padding:0 var(--el-gut);gap:var(--el-5)}
.vz-wordmark{font-family:'Playfair Display',serif;font-weight:600;font-size:30px;
    letter-spacing:-.004em;color:var(--el-green)}
.vz-nav-links{gap:26px}
.vz-nav-links a{font-size:12.5px;font-weight:600;letter-spacing:.07em;color:var(--el-ink)}
.vz-nav-links a:hover{color:var(--el-green)}
.vz-search{background:var(--el-ivory);border:1px solid var(--el-line);border-radius:6px;
    padding:9px 13px;min-width:0;width:198px;flex-shrink:0}
.vz-search input{font-size:13px}
.vz-search .material-symbols-outlined{font-size:19px;color:var(--el-muted)}
.vz-nav-actions{gap:var(--el-1)}
.vz-nav-actions a{color:var(--el-ink)}
.vz-nav-actions a:hover{color:var(--el-green)}
.vz-nav-actions .material-symbols-outlined{font-size:23px}
/* Compteur panier : ancré sur l'icône (et non sur la zone tactile de 44 px),
   avec un liseré couleur header pour le détacher proprement du sac. */
.vz-cart-link{position:relative}
.vz-cart-count{position:absolute;top:6px;right:4px;min-width:17px;height:17px;padding:0 4px;
    background:var(--el-green);color:#fff;font-size:9.5px;font-weight:700;line-height:1;
    border:1.5px solid var(--el-paper);border-radius:9999px;
    display:flex;align-items:center;justify-content:center;box-sizing:border-box}
/* Entre 901 et 1180 px la barre se comprime : on resserre puis on retire la
   recherche (accessible dans le drawer) plutôt que de laisser le panier sortir. */
@media(max-width:1180px){
    .vz-nav{gap:22px}
    .vz-nav-links{gap:18px}
    .vz-nav-links a{font-size:12px;letter-spacing:.05em}
    .vz-search{width:158px}
}
@media(max-width:1060px){ .vz-search{display:none} }
@media(max-width:900px){
    .vz-nav{grid-template-columns:44px 1fr 44px;gap:var(--el-1);padding:0 max(10px,calc(var(--el-gut) - 10px))}
    .vz-wordmark{font-size:26px}
    .vz-burger{color:var(--el-ink)}
}

/* =========================== 3 · HERO ÉDITORIAL ===================== */
.el-hero{background:var(--el-ivory)}
.el-hero-grid{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);align-items:stretch}
.el-hero-media{position:relative;overflow:hidden;min-height:600px}
/* image en absolu : c'est la colonne de contenu (ou le min-height) qui pilote la
   hauteur du hero — jamais le ratio intrinsèque de la photo. */
.el-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center 52%;filter:saturate(.94) contrast(1.02)}
.el-hero-body{display:flex;flex-direction:column;justify-content:center;
    padding:var(--el-7) clamp(24px,4.6vw,88px) var(--el-7) clamp(32px,4vw,64px)}
.el-hero-inner{max-width:520px}
.el-hero h1{font-family:'Playfair Display',serif;font-size:var(--el-h1);font-weight:600;
    line-height:1.045;letter-spacing:-.018em;color:var(--el-green);margin:0}
.el-hero-lede{margin:20px 0 0;font-size:16.5px;line-height:1.65;color:var(--el-muted);max-width:428px}
.el-hero-ctas{display:flex;align-items:center;gap:14px;margin-top:var(--el-5)}
.el-hero-proofs{list-style:none;margin:34px 0 0;padding:var(--el-4) 0 0;border-top:1px solid var(--el-line);
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.el-hero-proofs li{font-size:14px;font-weight:500;color:var(--el-ink);padding:0 16px;line-height:1.4}
.el-hero-proofs li:first-child{padding-left:0}
.el-hero-proofs li + li{border-left:1px solid var(--el-line)}
/* Deux preuves, sur une seule ligne, à toutes les largeurs : un 3e item retombe
   seul et casse la ligne. Le support WhatsApp est déjà dans la barre utilitaire,
   le menu et la barre CTA fixe. */
.el-hero-proofs li:nth-child(n+3){display:none}

@media(max-width:900px){
    .el-hero-grid{grid-template-columns:1fr}
    .el-hero-media{min-height:0;aspect-ratio:5/4}   /* image plein bord, sous le header */
    .el-hero-media img{object-position:center 46%}
    .el-hero-body{padding:28px var(--el-gut) 36px}
    .el-hero-inner{max-width:none}
    .el-hero h1{line-height:1.06;letter-spacing:-.016em}
    .el-hero-lede{margin-top:14px;font-size:15.5px;line-height:1.6;max-width:none}
    .el-hero-ctas{display:block;margin-top:var(--el-4)}
    .el-hero-ctas .vz-btn{width:100%;padding:16px 22px;font-size:15px}
    /* deux preuves sur UNE ligne : le support WhatsApp reste dans le menu et
       dans la barre CTA fixe — jamais un 3e item qui retombe seul. */
    .el-hero-proofs{margin-top:var(--el-4);padding-top:var(--el-3);gap:0}
    .el-hero-proofs li{font-size:13.5px}
}
/* Tablette : en 5/4 la photo occuperait tout le premier écran — on l'aplatit. */
@media(min-width:601px) and (max-width:900px){
    .el-hero-media{aspect-ratio:16/10}
    .el-hero-body{padding:32px var(--el-gut) 40px}
}
/* Sous 1150 px, la colonne de contenu est trop juste pour deux libellés sur une
   ligne : deux colonnes fixes. Le libellé peut passer sur deux lignes mais ne
   sort jamais de la marge, et aucun filet ne se retrouve orphelin. */
@media(max-width:1150px){
    .el-hero-proofs{display:grid;grid-template-columns:1fr 1fr;align-items:start}
    .el-hero-proofs li{white-space:normal;line-height:1.35;padding:0 10px}
    .el-hero-proofs li:first-child{padding-left:0}
}
@media(max-width:400px){
    .el-hero-media{aspect-ratio:4/3}
}

/* CTA secondaire : bouton sobre sur desktop, lien fléché sur mobile
   (on n'empile jamais deux gros boutons identiques). */
.el-cta2{display:inline-flex;align-items:center;gap:8px}
.el-hero-ctas .vz-btn{white-space:nowrap}
/* 901–1150 px : la colonne de contenu ne tient pas deux boutons sans casser leur
   libellé — le secondaire adopte le même traitement fléché que sur mobile. */
@media(max-width:1150px){
    .el-hero-ctas{display:block}
    .el-hero-ctas .vz-btn-red{width:auto}
    .el-hero-proofs li{padding:0 12px;font-size:13.5px}
    .el-hero-ctas .el-cta2{width:auto;display:inline-flex;margin-top:18px;padding:0 0 3px;
        border:0;border-bottom:1px solid rgba(14,59,46,.35);border-radius:0;
        background:none;color:var(--el-green);font-size:14.5px;font-weight:600}
    .el-hero-ctas .el-cta2:hover{background:none;border-bottom-color:var(--el-green)}
    .el-cta2 .material-symbols-outlined{font-size:18px}
}
/* Au-delà de 1150 px les deux CTA tiennent côte à côte : pas de flèche. */
@media(min-width:1151px){ .el-cta2 .material-symbols-outlined{display:none} }

/* =========================== 4 · RÉASSURANCES ======================= */
.el-assur{background:var(--el-green)}
.el-assur-in{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);
    display:grid;grid-template-columns:repeat(4,1fr)}
.el-assur-i{padding:30px 30px 32px;display:flex;flex-direction:column;gap:7px}
.el-assur-i:first-child{padding-left:0}
.el-assur-i:last-child{padding-right:0}
.el-assur-i + .el-assur-i{border-left:1px solid var(--el-hair)}
.el-assur-t{font-family:'Playfair Display',serif;font-size:19px;font-weight:500;color:#fff;line-height:1.2}
.el-assur-d{font-size:13.5px;line-height:1.55;color:rgba(247,243,234,.72)}
@media(max-width:900px){
    .el-assur-in{grid-template-columns:1fr 1fr;padding:0 var(--el-gut)}
    .el-assur-i{padding:18px 16px 20px;gap:5px}
    .el-assur-i:first-child,.el-assur-i:last-child{padding-left:16px;padding-right:16px}
    .el-assur-i:nth-child(odd){padding-left:0}
    .el-assur-i:nth-child(even){padding-right:0}
    .el-assur-i + .el-assur-i{border-left:0}
    .el-assur-i:nth-child(even){border-left:1px solid var(--el-hair)}
    .el-assur-i:nth-child(n+3){border-top:1px solid var(--el-hair)}
    .el-assur-t{font-size:16px}
    .el-assur-d{font-size:13px;line-height:1.5}
}

/* =========================== 5 · TROUVEZ VOTRE CONFORT ============== */
.el-needs{background:#fff;padding:88px 0 72px}
.el-needs-row{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.el-need{display:block;text-decoration:none}
.el-need-img{display:block;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:var(--el-ivory);
    border:1px solid var(--el-line)}
.el-need-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02);
    transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.el-need:hover .el-need-img img{transform:scale(1.035)}
.el-need-name{display:block;margin-top:var(--el-2);font-family:'Playfair Display',serif;
    font-size:17px;font-weight:500;line-height:1.25;color:var(--el-green);min-height:2.5em}
.el-need:hover .el-need-name{color:var(--el-gold)}
@media(max-width:900px){
    .el-needs{padding:52px 0}
    /* rail : ~2,7 vignettes visibles, snap franc, pas de barre de défilement */
    .el-needs-row{display:flex;grid-template-columns:none;gap:var(--el-2);
        overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;
        margin-left:calc(-1 * var(--el-gut));margin-right:calc(-1 * var(--el-gut));
        padding-left:var(--el-gut);padding-right:var(--el-gut);scroll-padding-left:var(--el-gut)}
    .el-needs-row::-webkit-scrollbar{display:none}
    .el-need{flex:0 0 clamp(112px,30vw,190px);scroll-snap-align:start}
    .el-need-name{font-size:15px;margin-top:10px;min-height:2.6em}
}

/* =========================== 6 · PRODUITS ESSENTIELS =============== */
.el-shelf{background:var(--el-sand);padding:var(--el-8) 0}
.el-shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.el-pcard{display:flex;flex-direction:column;background:var(--el-paper);
    border:1px solid var(--el-line);border-radius:6px;overflow:hidden;text-decoration:none;
    transition:border-color .2s ease}
.el-pcard:hover{border-color:rgba(14,59,46,.38)}
.el-pcard-media{display:block;position:relative;aspect-ratio:1/1;background:var(--el-studio);overflow:hidden}
.el-pcard-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02);
    transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.el-pcard:hover .el-pcard-media img{transform:scale(1.035)}
.el-tag{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:6px 9px;border-radius:3px;
    background:var(--el-green);color:#fff}
.el-tag--sale{left:auto;right:12px;background:var(--el-gold)}
.el-pcard-body{flex:1;display:flex;flex-direction:column;padding:16px 16px 18px}
.el-pcard-title{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--el-ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.el-price{display:flex;align-items:baseline;gap:9px;margin-top:var(--el-2)}
.el-price .now{font-size:17px;font-weight:700;color:var(--el-green);letter-spacing:-.01em}
.el-price .was{font-size:13px;color:var(--el-muted);text-decoration:line-through}
@media(max-width:900px){
    .el-shelf{padding:56px 0}
    .el-shelf-grid{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media(max-width:700px){
    .el-shelf-grid{display:flex;grid-template-columns:none;gap:14px;
        overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;
        margin-left:calc(-1 * var(--el-gut));margin-right:calc(-1 * var(--el-gut));
        padding-left:var(--el-gut);padding-right:var(--el-gut);scroll-padding-left:var(--el-gut)}
    .el-shelf-grid::-webkit-scrollbar{display:none}
    /* 83vw plafonné : ~1,15 carte visible, l'amorce suivante est franche */
    .el-shelf-grid>*{flex:0 0 min(83vw,340px);scroll-snap-align:start}
    .el-pcard-title{font-size:14.5px}
    .el-price .now{font-size:17.5px}
}

/* =========================== 7 · GUIDE DE CHOIX ==================== */
.el-guide{background:#fff;padding:var(--el-8) 0}
.el-guide-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);
    gap:var(--el-7);align-items:start}
.el-guide-aside h2{font-size:var(--el-h2);font-weight:600;color:var(--el-green);
    letter-spacing:-.012em;line-height:1.08;margin:0}
.el-guide-aside p{margin:var(--el-3) 0 0;font-size:var(--el-body);line-height:1.7;color:var(--el-muted)}
.el-guide-fig{margin-top:var(--el-5);border-radius:6px;overflow:hidden;aspect-ratio:4/3;
    border:1px solid var(--el-line)}
.el-guide-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}
.el-guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--el-3)}
/* Icône en haut, intitulé calé en bas, flèche sur sa ligne : la carte est pleine
   du haut au bas, sans réserve vide au centre. */
.el-guide-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;
    gap:var(--el-2);min-height:150px;padding:20px;background:var(--el-ivory);
    border:1px solid var(--el-line);border-radius:6px;text-decoration:none;
    transition:border-color .2s ease,background-color .2s ease}
.el-guide-card:hover{border-color:rgba(14,59,46,.38);background:#fff}
.el-guide-card .material-symbols-outlined{font-size:26px;color:var(--el-green);line-height:1}
.el-guide-card h3{font-family:'Playfair Display',serif;font-size:19px;font-weight:500;
    line-height:1.22;color:var(--el-green);margin:auto 30px 0 0}
@media(max-width:900px){
    .el-guide{padding:52px 0}
    .el-guide-grid{grid-template-columns:1fr;gap:var(--el-5)}
    .el-guide-fig{display:none}          /* mobile : pas d'image, on reste compact */
    .el-guide-aside p{margin-top:var(--el-2);font-size:15px}
    .el-guide-cards{gap:var(--el-2)}
    .el-guide-card{min-height:0;height:132px;padding:15px 14px;gap:var(--el-1)}
    .el-guide-card .material-symbols-outlined{font-size:23px}
    .el-guide-card h3{font-size:16px;line-height:1.24;margin:auto 26px 0 0}
}
@media(max-width:360px){
    .el-guide-card{height:138px;padding:14px 12px}
    .el-guide-card h3{font-size:15px}
}

/* =========================== 8 · POURQUOI ELAFYA ==================== */
/* Rupture visuelle principale de la page : pleine largeur, vert profond,
   uniquement des filets — aucune carte, aucune pastille d'icône. */
.el-why{background:var(--el-green);color:#fff;padding:96px 0 88px}
.el-why-grid{display:grid;grid-template-columns:minmax(0,4.7fr) minmax(0,7.3fr);gap:var(--el-7);align-items:start}
.el-why h2{font-family:'Playfair Display',serif;font-size:var(--el-h2);font-weight:500;
    line-height:1.08;letter-spacing:-.012em;color:#fff;margin:0}
.el-why-lede{margin:var(--el-3) 0 0;font-size:var(--el-body);line-height:1.72;
    color:rgba(247,243,234,.72);max-width:370px}
.el-why-list{display:grid;grid-template-columns:1fr 1fr}
.el-why-item{padding:22px 30px 24px 0;border-top:1px solid var(--el-hair)}
.el-why-item:nth-child(even){padding-left:30px;padding-right:0;border-left:1px solid var(--el-hair)}
.el-why-item:nth-child(1),.el-why-item:nth-child(2){border-top:0;padding-top:0}
.el-why-item:last-child{grid-column:1 / -1;border-left:0;padding-left:0;padding-right:0}
.el-why-item h3{font-family:'Inter',sans-serif;font-size:17px;font-weight:600;
    line-height:1.3;color:#fff;margin:0;letter-spacing:.004em}
.el-why-item p{margin:8px 0 0;font-size:14px;line-height:1.62;color:rgba(247,243,234,.68)}
@media(max-width:900px){
    .el-why{padding:60px 0}
    .el-why-grid{grid-template-columns:1fr;gap:var(--el-5)}
    .el-why-lede{max-width:none;font-size:15px}
    .el-why-list{grid-template-columns:1fr}
    .el-why-item,.el-why-item:nth-child(even),.el-why-item:last-child{
        padding:17px 0;border-left:0;border-top:1px solid var(--el-hair)}
    .el-why-item:first-child{border-top:0;padding-top:0}
    .el-why-item h3{font-size:16px}
    .el-why-item p{margin-top:6px;font-size:13.5px}
}

/* =========================== 9 · FAQ =============================== */
/* Deux colonnes équilibrées SANS image (l'image du hero n'est jamais répétée). */
.el-faq{background:var(--el-ivory);padding:88px 0}
.el-faq-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);
    gap:var(--el-7);align-items:start}
.el-faq-aside h2{font-size:var(--el-h2);font-weight:600;color:var(--el-green);
    letter-spacing:-.012em;line-height:1.08;margin:0}
.el-faq-aside p{margin:var(--el-3) 0 var(--el-4);font-size:var(--el-body);line-height:1.7;
    color:var(--el-muted);max-width:320px}
.el-faq-wa{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
    color:var(--el-green);text-decoration:none;border-bottom:1px solid rgba(14,59,46,.35);padding-bottom:3px}
.el-faq-wa:hover{color:var(--el-gold);border-bottom-color:var(--el-gold)}
.el-faq-wa .material-symbols-outlined{font-size:19px}
.el-acc{border-top:1px solid var(--el-line)}
.el-acc:last-child{border-bottom:1px solid var(--el-line)}
.el-acc-q{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;
    gap:20px;padding:18px 2px;background:none;border:0;cursor:pointer;text-align:left;
    font-family:'Inter',sans-serif;font-size:16px;font-weight:600;line-height:1.4;color:var(--el-ink)}
.el-acc-q:hover{color:var(--el-green)}
.el-acc-q .material-symbols-outlined{flex-shrink:0;font-size:22px;color:var(--el-green);
    transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.el-acc.open .el-acc-q .material-symbols-outlined{transform:rotate(45deg)}
.el-acc-a{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1)}
.el-acc-a-in{padding:0 2px 20px;font-size:14.5px;line-height:1.72;color:var(--el-muted);max-width:66ch}
@media(max-width:900px){
    .el-faq{padding:52px 0}
    .el-faq-grid{grid-template-columns:1fr;gap:var(--el-4)}
    .el-faq-aside p{max-width:none;margin-bottom:var(--el-3);font-size:15px}
    .el-acc-q{min-height:54px;padding:16px 2px;font-size:15.5px}
    .el-acc-a-in{font-size:14.5px;padding-bottom:18px}
}

/* =========================== 10 · CTA FINAL ======================== */
.el-cta{background:var(--el-sand);padding:72px 0}
.el-cta-in{max-width:660px;margin:0 auto;padding:0 var(--el-gut);text-align:center}
.el-cta h2{font-family:'Playfair Display',serif;font-size:clamp(26px,2.5vw,36px);font-weight:600;
    line-height:1.12;letter-spacing:-.012em;color:var(--el-green);margin:0}
.el-cta p{margin:var(--el-3) auto var(--el-5);font-size:var(--el-body);line-height:1.7;
    color:#4C5B54;max-width:470px}
.el-cta .vz-btn{min-width:250px}
@media(max-width:900px){
    .el-cta{padding:48px 0}
    .el-cta p{margin-bottom:var(--el-4);font-size:15px}
    .el-cta .vz-btn{width:100%;max-width:340px;padding:16px 22px;font-size:15px}
}

/* =========================== 11 · FOOTER =========================== */
.vz-footer{background:var(--el-green-deep);color:rgba(247,243,234,.66)}
.vz-footer-top{grid-template-columns:1.7fr 1fr 1fr 1fr 1.25fr;gap:40px;
    max-width:1280px;padding:56px var(--el-gut) 36px}
.vz-wordmark-light{font-size:30px;color:#fff;margin-bottom:14px}
.vz-footer-brand p{font-size:13.5px;line-height:1.7;color:rgba(247,243,234,.58);max-width:300px}
.vz-facc>summary{font-size:12px;letter-spacing:.12em;color:#fff;margin-bottom:16px}
.vz-facc ul{gap:10px}
.vz-facc ul a{font-size:13.5px;color:rgba(247,243,234,.66)}
.vz-facc ul a:hover{color:var(--el-gold-btn)}
.vz-facc .vz-facc-body p{font-size:13.5px;line-height:1.7;color:rgba(247,243,234,.58)}
.vz-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.vz-footer-bottom-inner{max-width:1280px;padding:16px var(--el-gut);font-size:12px}
@media(max-width:900px){
    .vz-footer-top{grid-template-columns:1fr!important;gap:0;padding:28px var(--el-gut) 6px}
    .vz-footer-brand{margin-bottom:20px}
    .vz-wordmark-light{font-size:26px;margin-bottom:10px}
    .vz-footer-brand p{font-size:13px;max-width:none}
    .vz-facc{border-top:1px solid rgba(255,255,255,.11)}
    .vz-facc>summary{min-height:50px;padding:13px 2px;margin:0;font-size:12.5px}
    .vz-facc>summary::after{color:rgba(247,243,234,.6)}
    .vz-facc ul,.vz-facc .vz-facc-body{padding:0 2px 16px}
    .vz-footer-bottom-inner{flex-direction:column;gap:6px;text-align:center;padding:14px var(--el-gut);font-size:12px}
}

/* =========================== 12 · BOUTONS ========================== */
.vz-btn{border-radius:6px;border-width:1px;font-size:14.5px;font-weight:600;padding:15px 26px;
    letter-spacing:.005em}
.vz-btn-red{background:var(--el-green);border-color:var(--el-green);color:#fff}
.vz-btn-red:hover{background:#0A2E23;border-color:#0A2E23}
.vz-btn-outline{background:transparent;border-color:rgba(14,59,46,.45);color:var(--el-green)}
.vz-btn-outline:hover{background:transparent;border-color:var(--el-green)}
.vz-btn-wa{background:var(--el-gold-btn);border-color:var(--el-gold-btn);color:#fff}
.vz-btn-wa:hover{background:#A07F49;border-color:#A07F49}

/* =========================== 13 · BARRE CTA FIXE =================== */
@media(max-width:900px){
    .zm-fixedcta{display:flex;gap:10px;align-items:stretch;
        background:var(--el-paper);backdrop-filter:none;-webkit-backdrop-filter:none;
        border-top:1px solid var(--el-line);
        padding:9px var(--el-gut) calc(9px + env(safe-area-inset-bottom))}
    .zm-fixedcta .vz-btn{flex:1 1 0;min-height:48px;padding:13px 10px;font-size:14.5px;border-radius:6px}
    .zm-fixedcta .vz-btn-red{flex-grow:1.35}
    .zm-fixedcta .vz-btn-wa .material-symbols-outlined{font-size:19px}
    body.zm-has-fixedcta{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media(min-width:901px){ .zm-fixedcta{display:none} }

/* =========================== 14 · ANIMATIONS ======================= */
/* Apparition discrète, jamais permanente : 14px de translation, 550ms.
   Le gating .el-js évite tout contenu masqué si le JS ne tourne pas. */
html.el-js .el-rise{opacity:0;transform:translateY(14px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
html.el-js .el-rise.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
    html.el-js .el-rise{opacity:1!important;transform:none!important;transition:none!important}
    .el-need-img img,.el-pcard-media img{transition:none!important}
}

/* =========================== 15 · GARDE-FOUS ======================= */
.el-hero-grid>*,.el-assur-in>*,.el-needs-row>*,.el-shelf-grid>*,.el-guide-grid>*,
.el-guide-cards>*,.el-why-grid>*,.el-why-list>*,.el-faq-grid>*{min-width:0}
.el-hero h1,.el-head h2,.el-head-row h2,.el-guide-aside h2,.el-why h2,.el-faq-aside h2,
.el-cta h2,.el-pcard-title,.el-acc-q,.el-need-name{overflow-wrap:break-word}

/* =====================================================================
   ELAFYA — PASSE 9 : FINITION V3
   Rééquilibrage chromatique (le beige redevient un accent), hover de texte,
   footer repris, densité et finitions mobile.
   ===================================================================== */

/* ---------------------------------------------------------------------
   9.1 · MOINS DE BEIGE
   Avant : ivoire, sable, ivoire, sable sur quatre sections — le beige
   dominait. Il ne reste que sur les produits, où il sert de socle chaud.
   FAQ et CTA final passent en blanc cassé / ivoire très léger, ce qui
   ouvre la fin de page et renforce le contraste du footer sombre.
   --------------------------------------------------------------------- */
:root{
    --el-ivory:#F8F5EE;      /* hero — légèrement éclairci */
    --el-offwhite:#FBFAF6;   /* FAQ */
    --el-shell:#F6F2E9;      /* CTA final — ivoire très léger */
    --el-sand:#E9DECB;       /* produits, seule section beige */
}
.el-faq{background:var(--el-offwhite)}
.el-cta{background:var(--el-shell)}

/* ---------------------------------------------------------------------
   9.2 · HOVER DE TEXTE (glissement vertical masqué)
   Repris de l'intention Valeorix/Pulsor, pas de leur code : ces projets
   n'utilisent que l'atténuation des voisins et des micro-décalages de
   flèche. Ici, deux copies du libellé empilées dans un masque de la
   hauteur d'une ligne : aucun décalage de layout, aucune hauteur qui
   bouge, aucune cassure de grille.
   Structure construite en JS (voir zenmart.js) pour rester compatible
   avec les libellés générés par wp_nav_menu.
   --------------------------------------------------------------------- */
.el-tlink{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap}
.el-tlink-in{display:block;position:relative;
    transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.el-tlink-in>span{display:block}
.el-tlink-in>span+span{position:absolute;top:100%;left:0;width:100%}
@media(hover:hover){
    a:hover>.el-tlink>.el-tlink-in,
    a:focus-visible>.el-tlink>.el-tlink-in,
    a.el-tlink:hover>.el-tlink-in,
    a.el-tlink:focus-visible>.el-tlink-in{transform:translateY(-100%)}
    /* Atténuation des liens voisins — c'est le seul comportement de hover
       réellement présent dans Valeorix V2, et il vaut d'être repris. */
    .vz-nav-links:hover a{color:rgba(20,33,28,.42)}
    .vz-nav-links a:hover,.vz-nav-links a:focus-visible{color:var(--el-green)}
}
/* Pas de hover simulé au doigt : on retire le masque et la copie. */
@media(hover:none){
    .el-tlink{overflow:visible;white-space:normal}
    .el-tlink-in>span+span{display:none}
}
@media(prefers-reduced-motion:reduce){
    .el-tlink-in{transition:none}
    a:hover>.el-tlink>.el-tlink-in,a.el-tlink:hover>.el-tlink-in{transform:none}
}

/* ---------------------------------------------------------------------
   9.3 · HEADER
   --------------------------------------------------------------------- */
.vz-nav-links a{position:relative;padding:4px 0;transition:color .22s ease}
.vz-wordmark{font-size:31px;letter-spacing:-.008em}
.vz-search{background:#fff}
.vz-search:focus-within{border-color:rgba(14,59,46,.45)}
.el-util{background:var(--el-offwhite)}
.el-util-in{font-weight:500;letter-spacing:.012em}
@media(max-width:900px){
    .vz-wordmark{font-size:26px}
    .el-util-in{letter-spacing:.006em}
}

/* ---------------------------------------------------------------------
   9.4 · HERO — respiration et poids des CTA
   --------------------------------------------------------------------- */
.el-hero-lede{color:#55635C;max-width:436px}
.el-hero-ctas .vz-btn-red{padding:16px 30px}
.el-hero-proofs{border-top-color:rgba(14,59,46,.14)}
.el-hero-proofs li{color:#3A4A43;font-weight:500}
.el-hero-proofs li + li{border-left-color:rgba(14,59,46,.14)}
@media(max-width:900px){
    .el-hero-body{padding:30px var(--el-gut) 34px}
    .el-hero-ctas .vz-btn{padding:17px 22px}
}

/* ---------------------------------------------------------------------
   9.5 · CATÉGORIES — intro plus tenue, vignettes homogènes
   --------------------------------------------------------------------- */
.el-needs .el-head{max-width:640px}
.el-needs .el-head p{margin-top:12px;color:#5A6862}
.el-need-img{border-color:rgba(14,59,46,.10);background:#F4F0E7}
.el-need-name{font-size:16.5px;color:var(--el-green);transition:color .22s ease}
@media(max-width:900px){
    .el-need-name{font-size:14.5px;letter-spacing:.002em}
}

/* ---------------------------------------------------------------------
   9.6 · PRODUITS — contraste et respiration sur le socle beige
   --------------------------------------------------------------------- */
.el-shelf{padding:92px 0}
.el-pcard{background:#FFFDF9;border-color:rgba(14,59,46,.12)}
.el-pcard-media{background:#F5EFE4}
.el-pcard-title{color:#182620}
.el-shelf .el-head-row{margin-bottom:40px}
.el-shelf .el-more{color:#8F6D2F;border-bottom-color:rgba(143,109,47,.5)}
.el-shelf .el-more:hover{color:var(--el-green);border-bottom-color:var(--el-green)}
@media(max-width:900px){
    .el-shelf{padding:54px 0}
    .el-pcard-body{padding:15px 15px 17px}
}

/* ---------------------------------------------------------------------
   9.7 · GUIDE — moins « quatre cartes auto-générées »
   L'icône disparaît au profit d'un indice de rang discret : la carte se
   lit comme une entrée de sommaire, pas comme une tuile de template.
   --------------------------------------------------------------------- */
/* La flèche est désormais le composant .el-arw (passe 10) : aucun symbole
   Material ne subsiste dans la carte. */
.el-guide-card .material-symbols-outlined{display:none}
.el-guide-card{background:#FCFAF5;border-color:rgba(14,59,46,.13);min-height:132px;
    justify-content:flex-end;padding:22px}
.el-guide-card::before{content:attr(data-usage);position:absolute;top:20px;left:22px;
    font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;
    color:rgba(14,59,46,.36)}
.el-guide-card h3{margin:0 34px 0 0;font-size:20px}
.el-guide-card p{margin:9px 34px 0 0;font-size:13.5px;line-height:1.55;color:#63706A}
.el-guide-card:hover{background:#fff;border-color:rgba(14,59,46,.4)}
.el-guide-card:hover h3{color:var(--el-green)}
.el-guide-aside p{color:#5A6862;max-width:400px}
/* Équilibre des deux colonnes : en 4/3 l'image faisait descendre la colonne
   gauche ~230 px plus bas que la grille de droite. Bandeau large + cartes plus
   hautes : les deux colonnes se terminent au même niveau. */
@media(min-width:901px){
    .el-guide-fig{aspect-ratio:21/9}
    .el-guide-card{min-height:185px}
}
@media(max-width:900px){
    /* mobile : grille 2×2 compacte — la phrase d'appui reste au desktop */
    .el-guide-card{height:auto;min-height:118px;padding:16px 15px}
    .el-guide-card::before{top:15px;left:15px;font-size:10.5px}
    .el-guide-card h3{font-size:16.5px;margin-right:26px}
    .el-guide-card p{display:none}
}
@media(max-width:360px){
    .el-guide-card{min-height:124px}
    .el-guide-card h3{font-size:15.5px}
}

/* ---------------------------------------------------------------------
   9.8 · POURQUOI ELAFYA — plus éditorial, moins « grille standard »
   --------------------------------------------------------------------- */
.el-why{padding:100px 0 92px}
.el-why h2{font-size:clamp(28px,3.1vw,46px)}
.el-why-lede{color:rgba(247,243,234,.78);max-width:360px}
.el-why-item h3{font-size:17.5px;letter-spacing:.002em}
.el-why-item p{color:rgba(247,243,234,.62);font-size:14.2px;max-width:44ch}
.el-why-item{padding:24px 34px 26px 0}
.el-why-item:nth-child(even){padding-left:34px}
.el-why-item:last-child{padding-top:24px;padding-right:0}
.el-why-item:last-child p{max-width:72ch}
@media(max-width:900px){
    .el-why{padding:58px 0}
    .el-why h2{font-size:29px}
    .el-why-item,.el-why-item:nth-child(even),.el-why-item:last-child{padding:16px 0}
    .el-why-item h3{font-size:16px}
    .el-why-item p{font-size:13.6px;max-width:none}
}

/* ---------------------------------------------------------------------
   9.9 · FAQ — hiérarchie et lisibilité des lignes
   --------------------------------------------------------------------- */
.el-faq{padding:92px 0}
.el-acc{border-top-color:rgba(14,59,46,.13)}
.el-acc:last-child{border-bottom-color:rgba(14,59,46,.13)}
.el-acc-q{color:#182620;transition:color .2s ease}
.el-acc.open .el-acc-q{color:var(--el-green)}
.el-acc-a-in{color:#5A6862}
.el-faq-aside p{color:#5A6862}
@media(max-width:900px){
    .el-faq{padding:50px 0}
    .el-acc-q{font-size:15.5px;padding:17px 2px}
}

/* ---------------------------------------------------------------------
   9.10 · CTA FINAL — ne doit pas faiblir entre la FAQ et le footer
   --------------------------------------------------------------------- */
.el-cta{padding:80px 0;border-top:1px solid rgba(14,59,46,.09)}
.el-cta h2{font-size:clamp(27px,2.6vw,38px)}
.el-cta p{color:#55635C;max-width:450px}
.el-cta .vz-btn{padding:17px 34px}
@media(max-width:900px){
    .el-cta{padding:52px 0}
    .el-cta h2{font-size:27px}
}

/* ---------------------------------------------------------------------
   9.11 · FOOTER — reprise sérieuse
   Intitulés de colonne atténués + filet, liens plus lumineux : la
   hiérarchie s'inverse par rapport à la v2 (titres blancs / liens ternes),
   ce qui rend le bloc à la fois plus dense et plus lisible.
   --------------------------------------------------------------------- */
.vz-footer-top{grid-template-columns:1.9fr 1fr 1fr 1fr 1.3fr;gap:48px;
    padding:64px var(--el-gut) 40px}
.vz-wordmark-light{font-size:34px;margin-bottom:16px}
.vz-footer-brand p{font-size:13.5px;line-height:1.75;color:rgba(247,243,234,.58);max-width:296px}
.vz-facc>summary{font-size:11.5px;font-weight:700;letter-spacing:.14em;
    color:rgba(247,243,234,.5);padding-bottom:13px;margin-bottom:17px;
    border-bottom:1px solid rgba(255,255,255,.11)}
.vz-facc ul{gap:11px}
.vz-facc ul a{font-size:13.5px;color:rgba(247,243,234,.8)}
.vz-facc ul a:hover{color:#fff}
.vz-facc .vz-facc-body p{color:rgba(247,243,234,.58)}
.vz-footer-social a{width:36px;height:36px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);border-radius:6px}
.vz-footer-social a:hover{background:rgba(255,255,255,.12)}
.vz-footer-bottom-inner{padding:18px var(--el-gut);font-size:12px;
    color:rgba(247,243,234,.5)}
@media(max-width:900px){
    /* gap:0 — les accordéons sont déjà séparés par leur propre filet ; le gap
       desktop de 48 px creusait 192 px de vide dans le footer mobile. */
    .vz-footer-top{padding:32px var(--el-gut) 8px;gap:0}
    .vz-wordmark-light{font-size:29px;margin-bottom:12px}
    .vz-footer-brand{margin-bottom:22px}
    .vz-footer-brand p{font-size:13px;max-width:none}
    .vz-facc>summary{border-bottom:0;padding:0;margin:0;min-height:52px;
        font-size:12px;letter-spacing:.13em;color:rgba(247,243,234,.92)}
    .vz-facc ul a{font-size:14px}
    .vz-footer-bottom-inner{padding:16px var(--el-gut);font-size:12px}
}

/* ---------------------------------------------------------------------
   9.12 · BARRE CTA FIXE — cohérence avec le footer
   --------------------------------------------------------------------- */
@media(max-width:900px){
    .zm-fixedcta{background:#FFFDF9;border-top-color:rgba(14,59,46,.14);
        box-shadow:0 -1px 0 rgba(14,59,46,.04)}
    .zm-fixedcta .vz-btn{font-size:14.5px;letter-spacing:.004em}
}

/* =====================================================================
   ELAFYA — PASSE 10 : IDENTITÉ + SYSTÈME DE MOTION
   ---------------------------------------------------------------------
   Quatre ajouts, aucun remplacement de structure :
     10.1  tokens de motion (une seule courbe, trois durées)
     10.2  logo Elafya (lock-up + marque, deux tonalités)
     10.3  iconographie : WhatsApp officiel + flèche réutilisable
     10.4  boutons, cartes, accordéons, header collant
   Règle transverse : rien ne se déplace de plus de 4 px, aucune animation
   ne modifie la boîte d'un élément (donc aucun layout shift), et tout est
   neutralisé sous prefers-reduced-motion (10.12).
   ===================================================================== */

:root{
    --el-ease:cubic-bezier(.22,.61,.36,1);      /* déplacements courts */
    --el-ease-out:cubic-bezier(.16,1,.3,1);     /* apparitions, flèches */
    --el-t-fast:.22s;
    --el-t-mid:.36s;
    --el-t-rise:.62s;
}

/* ---------------------------------------------------------------------
   10.1 · REVEAL ÉDITORIAL
   16 px, 620 ms, une seule fois au premier passage. Le gate .el-js
   garantit que sans JS aucun contenu n'est masqué.
   --------------------------------------------------------------------- */
html.el-js .el-rise{opacity:0;transform:translateY(16px);
    transition:opacity var(--el-t-rise) var(--el-ease-out),
               transform var(--el-t-rise) var(--el-ease-out)}
html.el-js .el-rise.is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   10.2 · LOGO
   Lock-up (lotus + ELAFYA) au header et au footer. Hauteur pilotée par le
   CSS, largeur automatique : le fichier est servi à 1200 px de large,
   soit environ 4× la taille d'affichage — net en écran haute densité.
   --------------------------------------------------------------------- */
/* .vz-nav est un flex : sans flex:0 0 auto, la marque se comprime et le
   lock-up s'écrase (le <img> n'a pas de largeur intrinsèque en CSS). */
.vz-brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.el-logo{display:block;width:auto;height:34px;flex:0 0 auto;max-width:none;
    transition:transform var(--el-t-mid) var(--el-ease)}
.el-logo-sm{height:26px}
.el-logo-footer{height:44px;margin-bottom:18px}
@media(max-width:900px){
    .el-logo{height:27px}
    .el-logo-footer{height:36px;margin-bottom:14px}
}
@media(max-width:360px){ .el-logo{height:24px} }

/* ---------------------------------------------------------------------
   10.3 · WHATSAPP — pictogramme officiel
   SVG inline en currentColor : il prend la couleur du bouton qui le porte
   et suit sa taille sans jamais se déformer.
   --------------------------------------------------------------------- */
.el-ico-wa{flex:0 0 auto;width:18px;height:18px;display:block}
.vz-btn .el-ico-wa{width:19px;height:19px}
.zm-fixedcta .el-ico-wa{width:18px;height:18px}
.el-util-wa{display:inline-flex;align-items:center;gap:7px}
.el-util-wa .el-ico-wa{width:13px;height:13px}
.vz-footer-social .el-ico-wa{width:17px;height:17px}
.el-faq-wa .el-ico-wa{width:17px;height:17px}

/* ---------------------------------------------------------------------
   10.4 · FLÈCHE — composant réutilisable
   Deux copies dans un masque large d'une flèche. Au repos on montre la
   seconde ; au survol la piste glisse vers la droite : la flèche visible
   sort par la droite pendant que la suivante entre par la gauche.
   La boîte a une largeur fixe : aucun mot ne se décale.
   --------------------------------------------------------------------- */
.el-arw{display:inline-block;flex:0 0 auto;width:20px;height:12px;
    overflow:hidden;vertical-align:middle;color:inherit}
.el-arw-in{display:flex;width:200%;height:100%;transform:translateX(-50%);
    transition:transform .42s var(--el-ease-out)}
.el-arw-in svg{flex:0 0 50%;width:50%;height:100%;display:block}
@media(hover:hover){
    a:hover .el-arw-in,a:focus-visible .el-arw-in,
    button:hover .el-arw-in,button:focus-visible .el-arw-in{transform:translateX(0)}
}
.el-arw--link{width:18px;height:11px}

/* ---------------------------------------------------------------------
   10.5 · BOUTONS — micro-interaction
   Variation de fond + 1 px de montée au survol, retour au sol au clic.
   Aucun grossissement : la boîte ne change jamais de taille.
   --------------------------------------------------------------------- */
.vz-btn{position:relative;
    transition:background-color var(--el-t-fast) ease,
               border-color var(--el-t-fast) ease,
               color var(--el-t-fast) ease,
               transform var(--el-t-fast) var(--el-ease),
               box-shadow var(--el-t-mid) var(--el-ease)}
.el-btn-label{display:inline-block}
@media(hover:hover){
    .vz-btn:hover{transform:translateY(-1px)}
    .vz-btn-red:hover{box-shadow:0 10px 22px -16px rgba(14,59,46,.85)}
    .vz-btn-wa:hover{box-shadow:0 10px 22px -16px rgba(160,127,73,.9)}
    .vz-btn-outline:hover{background:rgba(14,59,46,.045)}
}
.vz-btn:active{transform:translateY(0) scale(.995);
    transition-duration:.09s;box-shadow:none}
.vz-btn:focus-visible{outline:2px solid var(--el-green);outline-offset:3px}
.zm-fixedcta .vz-btn:hover{transform:none}

/* ---------------------------------------------------------------------
   10.6 · LIENS FLÉCHÉS SECONDAIRES
   Le filet passe en pseudo-élément : il ne bouge plus quand le libellé
   glisse verticalement (hover de texte de la passe 9).
   --------------------------------------------------------------------- */
.el-more,.el-faq-wa,.el-cta2{display:inline-flex;align-items:center;gap:9px}
.el-more{position:relative;border-bottom:0;padding-bottom:4px}
.el-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:currentColor;opacity:.42;transition:opacity var(--el-t-fast) ease}
.el-more:hover::after,.el-more:focus-visible::after{opacity:.9}

/* ---------------------------------------------------------------------
   10.7 · CARTES PRODUIT — montée discrète, zoom image très léger
   --------------------------------------------------------------------- */
.el-pcard{transition:border-color var(--el-t-fast) ease,
    transform var(--el-t-mid) var(--el-ease),
    box-shadow var(--el-t-mid) var(--el-ease)}
.el-pcard-media img,.el-need-img img{transition:transform .55s var(--el-ease)}
.el-need-img{transition:border-color var(--el-t-fast) ease}
@media(hover:hover){
    .el-pcard:hover{transform:translateY(-3px);
        box-shadow:0 16px 32px -24px rgba(14,59,46,.55)}
    .el-need:hover .el-need-img img{transform:scale(1.04)}
    .el-need:hover .el-need-img{border-color:rgba(14,59,46,.26)}
}

/* ---------------------------------------------------------------------
   10.8 · CARTES DU GUIDE — flèche unifiée, hover plus tenu
   La flèche Material est remplacée par le composant .el-arw : même
   mouvement que sur les boutons.
   --------------------------------------------------------------------- */
.el-guide-card{transition:border-color var(--el-t-fast) ease,
    background-color var(--el-t-fast) ease,
    transform var(--el-t-mid) var(--el-ease),
    box-shadow var(--el-t-mid) var(--el-ease)}
.el-guide-card .el-arw{position:absolute;right:22px;bottom:23px;color:var(--el-gold)}
.el-guide-card h3{transition:color var(--el-t-fast) ease}
@media(hover:hover){
    .el-guide-card:hover{transform:translateY(-2px);
        box-shadow:0 14px 30px -24px rgba(14,59,46,.5)}
    .el-guide-card:hover .el-arw{color:var(--el-green)}
}
@media(max-width:900px){ .el-guide-card .el-arw{right:15px;bottom:16px} }

/* ---------------------------------------------------------------------
   10.9 · ACCORDÉONS — ouverture/fermeture posée
   --------------------------------------------------------------------- */
.el-acc-a{transition:max-height .38s var(--el-ease)}
.el-acc-q .material-symbols-outlined{transition:transform .34s var(--el-ease),
    color var(--el-t-fast) ease}

/* ---------------------------------------------------------------------
   10.10 · HEADER COLLANT — compaction sans layout shift
   La hauteur du header ne change pas : la réduire ferait remonter la page
   de 12 px au premier défilement. C'est le logo qui se resserre, et une
   ombre courte qui détache la barre du contenu.
   --------------------------------------------------------------------- */
.vz-header{transition:box-shadow var(--el-t-mid) ease,
    border-color var(--el-t-mid) ease}
html.el-scrolled .vz-header{border-bottom-color:transparent;
    box-shadow:0 1px 0 rgba(14,59,46,.07),0 12px 28px -26px rgba(14,59,46,.75)}
html.el-scrolled .el-logo{transform:scale(.9);transform-origin:left center}
@media(max-width:900px){
    html.el-scrolled .el-logo{transform:scale(.94);transform-origin:center}
}

/* ---------------------------------------------------------------------
   10.11 · HOVER DE TEXTE — alignement avec les liens fléchés
   --------------------------------------------------------------------- */
.el-more .el-tlink,.el-cta2 .el-tlink,.el-faq-wa .el-tlink{vertical-align:middle}

/* ---------------------------------------------------------------------
   10.12 · MOUVEMENT RÉDUIT — un seul point de neutralisation
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
    html.el-js .el-rise{opacity:1!important;transform:none!important;transition:none!important}
    .el-arw-in,.el-logo,.vz-btn,.el-pcard,.el-guide-card,
    .el-pcard-media img,.el-need-img img,.el-acc-a,
    .el-acc-q .material-symbols-outlined,.el-tlink-in{transition:none!important}
    .vz-btn:hover,.el-pcard:hover,.el-guide-card:hover,
    html.el-scrolled .el-logo{transform:none!important}
    a:hover .el-arw-in,a:focus-visible .el-arw-in,
    button:hover .el-arw-in{transform:translateX(-50%)!important}
}

/* ---------------------------------------------------------------------
   10.13 · HOVER DE TEXTE — portée descendante
   Le libellé d'un bouton est encapsulé dans .el-btn-label : la règle de la
   passe 9 (enfant direct de <a>) ne l'atteignait plus.
   --------------------------------------------------------------------- */
@media(hover:hover){
    a:hover .el-tlink>.el-tlink-in,
    a:focus-visible .el-tlink>.el-tlink-in,
    button:hover .el-tlink>.el-tlink-in,
    button:focus-visible .el-tlink>.el-tlink-in{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){
    a:hover .el-tlink>.el-tlink-in,
    button:hover .el-tlink>.el-tlink-in{transform:none!important}
}

/* =====================================================================
   10.14 · FOOTER — reprise complète
   ---------------------------------------------------------------------
   Trois strates de valeur, de la plus claire à la plus sombre :
     bandeau de réassurance (vert profond) → colonnes (vert très sombre)
     → barre légale (filet).
   La marque gagne en présence : logo ivoire à 44 px, phrase de marque,
   réseaux. Les intitulés de colonne restent atténués, les liens clairs :
   la hiérarchie se lit sans avoir à grossir quoi que ce soit.
   ===================================================================== */

/* Bandeau de réassurance — dernière preuve avant le pied de page */
.el-fassur{background:var(--el-green);border-bottom:1px solid rgba(255,255,255,.09)}
.el-fassur-in{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);
    display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.el-fassur-i{display:flex;align-items:center;justify-content:center;
    min-height:58px;padding:14px 18px;text-align:center;
    font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.35;
    color:rgba(247,243,234,.92)}
.el-fassur-i + .el-fassur-i{border-left:1px solid rgba(255,255,255,.11)}
@media(max-width:760px){
    .el-fassur-in{grid-template-columns:1fr 1fr}
    .el-fassur-i{min-height:52px;padding:12px 10px;font-size:12.5px}
    .el-fassur-i:nth-child(odd){border-left:0}
    .el-fassur-i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.11)}
}
@media(max-width:360px){ .el-fassur-i{font-size:12px;padding:11px 6px} }

/* Colonnes */
.vz-footer-top{padding:64px var(--el-gut) 44px}
.vz-footer-brand p{font-size:13.5px;line-height:1.75;color:rgba(247,243,234,.6);max-width:300px}
.vz-footer-social{margin-top:22px}
.vz-footer-social a{display:inline-flex;align-items:center;justify-content:center;
    color:rgba(247,243,234,.85);text-decoration:none;
    transition:background-color var(--el-t-fast) ease,color var(--el-t-fast) ease,
               border-color var(--el-t-fast) ease}
.vz-footer-social a:hover{color:#fff;border-color:rgba(255,255,255,.22)}
.vz-footer-social .material-symbols-outlined{font-size:18px}

.vz-facc ul a{display:inline-block;transition:color var(--el-t-fast) ease}
.vz-facc--contact .vz-facc-body p{font-size:13.5px;line-height:1.72;
    color:rgba(247,243,234,.6);margin:0 0 16px}
.vz-facc--contact .vz-btn{padding:13px 18px;font-size:13.5px}
.el-fcontact{list-style:none;margin:16px 0 0;padding:0;display:flex;
    flex-direction:column;gap:7px}
.el-fcontact li{font-size:12.5px;line-height:1.5;color:rgba(247,243,234,.5)}

/* Barre légale */
.vz-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;
    gap:14px 28px;flex-wrap:wrap;padding:18px var(--el-gut);
    font-size:12px;color:rgba(247,243,234,.5)}
.el-flegal{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.el-flegal a{color:rgba(247,243,234,.5);text-decoration:none;
    transition:color var(--el-t-fast) ease}
.el-flegal a:hover{color:rgba(247,243,234,.85)}

@media(max-width:900px){
    .vz-footer-top{padding:30px var(--el-gut) 8px;gap:0}
    .vz-footer-brand{margin-bottom:24px}
    .vz-footer-brand p{font-size:13px;max-width:none}
    .vz-footer-social{margin-top:18px}
    /* Accordéons : le sommaire est la zone tactile, le filet marque la limite */
    .vz-facc{border-top:1px solid rgba(255,255,255,.11)}
    .vz-facc>summary{min-height:54px;display:flex;align-items:center;
        justify-content:space-between;padding:0;margin:0;border-bottom:0;
        font-size:12.5px;font-weight:700;letter-spacing:.13em;
        color:rgba(247,243,234,.94);cursor:pointer;list-style:none}
    .vz-facc>summary::-webkit-details-marker{display:none}
    .vz-facc>summary::after{content:"add";font-family:'Material Symbols Outlined';
        font-size:20px;font-weight:400;letter-spacing:normal;
        color:rgba(247,243,234,.55);
        transition:transform var(--el-t-mid) var(--el-ease)}
    .vz-facc[open]>summary::after{transform:rotate(45deg)}
    .vz-facc ul,.vz-facc .vz-facc-body{padding:0 0 20px}
    .vz-facc ul{gap:13px}
    .vz-facc ul a{font-size:14px;padding:2px 0}
    .vz-facc--contact .vz-facc-body p{margin-bottom:14px}
    .el-fcontact{margin-top:14px}
    /* Le dernier accordéon ferme la série : un filet sous lui évite que la
       barre légale semble collée au contenu. */
    .vz-facc:last-of-type{border-bottom:1px solid rgba(255,255,255,.11)}
    .vz-footer-bottom-inner{flex-direction:column;align-items:center;
        text-align:center;gap:12px;padding:20px var(--el-gut)}
    .el-flegal{justify-content:center;gap:8px 18px}
}

/* =====================================================================
   ELAFYA — PASSE 11 : FICHE PRODUIT MAÎTRE (.elp-*)
   ---------------------------------------------------------------------
   Préfixe dédié, comme la homepage en passe 8 : la fiche produit ne
   dépend plus de la couche .vz-pdp héritée du clone Vitazen (laissée en
   place pour ne rien casser ailleurs, mais plus utilisée par le template).
   Elle réutilise en revanche les composants transverses de la marque :
   .vz-btn, .el-acc, .el-pcard, .el-arw, .el-rise.

   Rythme des fonds — un fond ne se répète jamais deux sections de suite :
     fil d'Ariane .... offwhite
     bloc achat ...... blanc
     réassurances .... vert profond      (rupture, même langage que la home)
     bénéfices ....... blanc
     usages .......... sable             (unique section beige)
     caractéristiques  blanc
     comment choisir . ivoire
     FAQ ............. blanc
     produits liés ... offwhite
   ===================================================================== */

.elp-wrap{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);box-sizing:border-box}
.elp-wrap--tight{max-width:940px}
.elp-sec{padding:84px 0}
.elp-sec--slim{padding:64px 0}
.elp-head{margin-bottom:var(--el-6)}
.elp-head h2{font-size:var(--el-h2);font-weight:600;color:var(--el-green);
    letter-spacing:-.012em;line-height:1.08;margin:0}
.elp-head p{margin:14px 0 0;font-size:var(--el-body);line-height:1.7;
    color:#5A6862;max-width:600px}
.elp-sec>*,.elp-wrap>*{min-width:0}
@media(max-width:900px){
    .elp-sec{padding:52px 0}
    .elp-sec--slim{padding:42px 0}
    .elp-head{margin-bottom:var(--el-4)}
    .elp-head p{margin-top:10px;font-size:15px}
}

/* --------------------------------------------------------------- 1 · FIL D'ARIANE */
.elp-crumb{background:var(--el-offwhite);border-bottom:1px solid rgba(14,59,46,.08)}
.elp-crumb-in{max-width:1280px;margin:0 auto;padding:13px var(--el-gut);
    font-size:12.5px;color:#6B7873;
    white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.elp-crumb-in::-webkit-scrollbar{display:none}
.elp-crumb a{color:#3F4E48;text-decoration:none;transition:color var(--el-t-fast) ease}
.elp-crumb a:hover{color:var(--el-green)}
.elp-crumb .sep{opacity:.4;padding:0 8px}

/* --------------------------------------------------------------- 2 · BLOC ACHAT */
.elp-buy{background:#fff;padding:44px 0 76px}
.elp-buy-grid{display:grid;grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr);
    gap:var(--el-7);align-items:start}

/* Galerie : colonne de miniatures à gauche sur desktop, rail sous l'image en dessous */
.elp-gal{display:flex;gap:14px;align-items:flex-start}
.elp-gal-main{flex:1;position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
    background:var(--el-studio);border:1px solid rgba(14,59,46,.10)}
.elp-gal-main img{width:100%;height:100%;object-fit:cover;
    filter:saturate(.95) contrast(1.02);
    animation:elp-fade .45s var(--el-ease-out)}
@keyframes elp-fade{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
.elp-gal-thumbs{order:-1;display:flex;flex-direction:column;gap:10px;flex:0 0 76px}
.elp-thumb{width:76px;height:76px;padding:0;flex:0 0 auto;cursor:pointer;
    border:1px solid rgba(14,59,46,.12);border-radius:6px;overflow:hidden;
    background:var(--el-studio);
    transition:border-color var(--el-t-fast) ease,transform var(--el-t-fast) var(--el-ease)}
.elp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.elp-thumb.is-active{border-color:var(--el-green)}
.elp-thumb:focus-visible{outline:2px solid var(--el-green);outline-offset:2px}
@media(hover:hover){
    .elp-thumb:hover{border-color:rgba(14,59,46,.45);transform:translateY(-2px)}
}
.elp-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:10.5px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:7px 10px;
    border-radius:3px;background:var(--el-green);color:#fff}
.elp-tag--sale{left:auto;right:14px;background:var(--el-gold)}

/* Buybox */
.elp-box{min-width:0}
.elp-box-cat{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:rgba(14,59,46,.5)}
.elp-box h1{font-family:'Playfair Display',serif;font-size:clamp(27px,2.9vw,40px);
    font-weight:600;line-height:1.1;letter-spacing:-.014em;color:var(--el-green);
    margin:12px 0 0;overflow-wrap:break-word}
.elp-box-lede{margin:14px 0 0;font-size:15.5px;line-height:1.65;color:#55635C;max-width:44ch}
.elp-box-rating{display:flex;align-items:center;gap:9px;margin-top:14px;
    font-size:13px;color:#5A6862}
.elp-box-rating .stars{color:var(--el-gold);letter-spacing:1.5px;font-size:14px}

.elp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;
    margin:22px 0 0;padding:20px 0;border-top:1px solid rgba(14,59,46,.12);
    border-bottom:1px solid rgba(14,59,46,.12)}
.elp-price .now{font-size:30px;font-weight:700;letter-spacing:-.015em;color:var(--el-green)}
.elp-price .now .woocommerce-Price-amount{color:var(--el-green)!important;font-weight:700}
.elp-price .was{font-size:17px;color:#7B8883;text-decoration:line-through}
.elp-price .was .woocommerce-Price-amount{color:#7B8883!important;font-weight:500}
.elp-price .off{font-size:11.5px;font-weight:700;letter-spacing:.05em;line-height:1;
    padding:6px 9px;border-radius:3px;background:var(--el-gold);color:#fff}

.elp-stock{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
    font-size:13.5px;font-weight:600;color:var(--el-green)}
.elp-stock .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.elp-stock.is-out{color:#9A5B3B}

/* Formulaire WooCommerce natif — habillage seulement, aucune modification du DOM */
.elp-atc{margin-top:20px}
.elp-atc form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0}
.elp-atc .quantity{flex:0 0 auto}
.elp-atc .quantity input.qty{width:88px!important;height:100%;min-height:54px;
    padding:.7rem .5rem!important;border:1px solid rgba(14,59,46,.22)!important;
    border-radius:6px!important;font-weight:600;font-size:15px}
.elp-atc .single_add_to_cart_button{flex:1 1 220px;min-height:54px;
    background-color:var(--el-green)!important;border:1px solid var(--el-green)!important;
    border-radius:6px!important;padding:16px 26px!important;
    font-size:14.5px!important;font-weight:600!important;letter-spacing:.02em!important;
    text-transform:none!important;
    transition:background-color var(--el-t-fast) ease,transform var(--el-t-fast) var(--el-ease),
               box-shadow var(--el-t-mid) var(--el-ease)!important}
@media(hover:hover){
    .elp-atc .single_add_to_cart_button:hover{background-color:#0A2E23!important;
        transform:translateY(-1px);box-shadow:0 10px 22px -16px rgba(14,59,46,.85)}
}
.elp-atc .single_add_to_cart_button:active{transform:translateY(0) scale(.995);box-shadow:none}
.elp-atc .single_add_to_cart_button:focus-visible{outline:2px solid var(--el-green)!important;
    outline-offset:3px}
/* Sélecteurs de variation : une ligne par attribut, jamais de tableau qui déborde */
.elp-atc table.variations{width:100%;border:0;margin:0 0 6px}
.elp-atc table.variations,.elp-atc table.variations tbody,
.elp-atc table.variations tr,.elp-atc table.variations td{display:block;width:100%;
    border:0!important;padding:0!important;background:none!important}
.elp-atc table.variations tr + tr{margin-top:14px}
.elp-atc table.variations td.label label{font-size:11.5px!important;font-weight:700!important;
    letter-spacing:.1em!important;text-transform:uppercase!important;
    color:rgba(14,59,46,.55)!important;margin-bottom:8px!important;display:block}
.elp-atc table.variations td.value select{width:100%;min-height:50px;
    border:1px solid rgba(14,59,46,.22)!important;border-radius:6px!important;
    padding:.7rem 1rem!important;background:#fff!important;font-size:14.5px}
.elp-atc .reset_variations{display:inline-block;margin-top:8px;font-size:12.5px;color:#6B7873}
.elp-atc .woocommerce-variation-price{margin:14px 0 4px}
.elp-atc .woocommerce-variation-price .price{font-size:22px;font-weight:700;color:var(--el-green)}

.elp-wa{margin-top:12px}
.elp-wa .vz-btn{width:100%;min-height:52px}

/* Réassurances courtes de la buybox */
.elp-box-assur{list-style:none;margin:22px 0 0;padding:20px 0 0;
    border-top:1px solid rgba(14,59,46,.12);
    display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.elp-box-assur li{display:flex;align-items:flex-start;gap:9px;
    font-size:13px;line-height:1.45;color:#3A4A43;font-weight:500}
.elp-box-assur .material-symbols-outlined{font-size:18px;color:var(--el-green);flex:0 0 auto}
.elp-box-meta{margin-top:18px;font-size:12.5px;color:#7B8883}

@media(max-width:1060px){ .elp-buy-grid{gap:var(--el-6)} }
@media(max-width:900px){
    .elp-buy{padding:24px 0 44px}
    .elp-buy-grid{grid-template-columns:1fr;gap:26px}
    /* rail horizontal de miniatures sous l'image, aligné sur la gouttière */
    .elp-gal{flex-direction:column;gap:10px}
    .elp-gal-thumbs{order:1;flex-direction:row;flex:0 0 auto;width:100%;
        overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
        scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .elp-gal-thumbs::-webkit-scrollbar{display:none}
    .elp-thumb{width:64px;height:64px;scroll-snap-align:start}
    .elp-box h1{margin-top:9px}
    .elp-box-lede{font-size:15px;max-width:none}
    .elp-price{margin-top:18px;padding:16px 0}
    .elp-price .now{font-size:27px}
    .elp-atc form.cart{gap:10px}
    .elp-atc .quantity input.qty{width:78px!important;min-height:52px}
    .elp-atc .single_add_to_cart_button{flex:1 1 160px;min-height:52px;padding:15px 18px!important}
    .elp-box-assur{grid-template-columns:1fr 1fr;gap:11px 14px;margin-top:20px;padding-top:18px}
    .elp-box-assur li{font-size:12.5px}
}
@media(max-width:380px){
    .elp-box-assur{grid-template-columns:1fr}
    .elp-atc .quantity input.qty{width:72px!important}
}

/* --------------------------------------------------------------- 3 · RÉASSURANCES */
.elp-assur{background:var(--el-green)}
.elp-assur-in{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);
    display:grid;grid-template-columns:repeat(4,1fr)}
.elp-assur-i{padding:28px 28px 30px;display:flex;flex-direction:column;gap:7px;
    box-sizing:border-box}
.elp-assur-i:first-child{padding-left:0}
.elp-assur-i:last-child{padding-right:0}
.elp-assur-i + .elp-assur-i{border-left:1px solid var(--el-hair)}
.elp-assur-t{font-family:'Playfair Display',serif;font-size:18px;font-weight:500;
    color:#fff;line-height:1.22}
.elp-assur-d{font-size:13px;line-height:1.55;color:rgba(247,243,234,.7)}
@media(max-width:900px){
    .elp-assur-in{grid-template-columns:1fr 1fr}
    .elp-assur-i{padding:18px 16px 20px;gap:5px}
    .elp-assur-i:nth-child(odd){padding-left:0}
    .elp-assur-i:nth-child(even){padding-right:0}
    .elp-assur-i + .elp-assur-i{border-left:0}
    .elp-assur-i:nth-child(even){border-left:1px solid var(--el-hair)}
    .elp-assur-i:nth-child(n+3){border-top:1px solid var(--el-hair)}
    .elp-assur-t{font-size:15.5px}
    .elp-assur-d{font-size:12.5px}
}

/* --------------------------------------------------------------- 4 · BÉNÉFICES */
.elp-benefits{background:#fff}
.elp-ben-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);
    gap:var(--el-7);align-items:start}
.elp-ben-fig{border-radius:8px;overflow:hidden;aspect-ratio:1/1;
    border:1px solid rgba(14,59,46,.10);background:var(--el-studio)}
/* La colonne de gauche (titre + visuel) est plus haute que les quatre
   bénéfices : on centre la liste au lieu de la caler en haut, sinon le bas
   de la colonne de droite reste vide. */
.elp-ben-list{align-self:center}
.elp-ben-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02)}
/* Une seule colonne : quatre bénéfices empilés équilibrent la hauteur de la
   figure de gauche. En deux colonnes, la liste s'arrêtait à mi-image et
   laissait une zone morte sur la droite. */
.elp-ben-list{display:grid;grid-template-columns:1fr;gap:0}
.elp-ben-item{padding:22px 0 24px;border-top:1px solid rgba(14,59,46,.12)}
.elp-ben-item:first-child{border-top:0;padding-top:0}
.elp-ben-item h3{font-family:'Inter',sans-serif;font-size:17px;font-weight:600;
    line-height:1.3;color:var(--el-green);margin:0}
.elp-ben-item p{margin:8px 0 0;font-size:14px;line-height:1.62;color:#5A6862}
@media(max-width:900px){
    .elp-ben-grid{grid-template-columns:1fr;gap:var(--el-4)}
    .elp-ben-fig{aspect-ratio:16/10}
    .elp-ben-list{align-self:stretch}
    .elp-ben-item{padding:17px 0}
    .elp-ben-item h3{font-size:16px}
    .elp-ben-item p{margin-top:6px;font-size:13.5px}
}

/* --------------------------------------------------------------- 5 · USAGES */
.elp-uses{background:var(--el-sand)}
.elp-uses-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.elp-use{display:flex;flex-direction:column;background:#FFFDF9;
    border:1px solid rgba(14,59,46,.12);border-radius:8px;overflow:hidden;
    text-decoration:none;
    transition:border-color var(--el-t-fast) ease,transform var(--el-t-mid) var(--el-ease),
               box-shadow var(--el-t-mid) var(--el-ease)}
.elp-use-img{aspect-ratio:4/3;overflow:hidden;background:var(--el-studio)}
.elp-use-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);
    transition:transform .55s var(--el-ease)}
.elp-use-body{padding:17px 18px 20px}
.elp-use-body h3{font-family:'Playfair Display',serif;font-size:18px;font-weight:500;
    line-height:1.24;color:var(--el-green);margin:0}
.elp-use-body p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#63706A}
@media(hover:hover){
    .elp-use:hover{border-color:rgba(14,59,46,.4);transform:translateY(-3px);
        box-shadow:0 16px 32px -24px rgba(14,59,46,.5)}
    .elp-use:hover .elp-use-img img{transform:scale(1.04)}
}
@media(max-width:900px){
    .elp-uses-row{grid-template-columns:1fr 1fr;gap:12px}
    .elp-use-body{padding:14px 14px 16px}
    .elp-use-body h3{font-size:16px}
    .elp-use-body p{margin-top:6px;font-size:12.8px;line-height:1.5}
}
@media(max-width:360px){ .elp-use-body h3{font-size:15px} }

/* --------------------------------------------------------------- 6 · CARACTÉRISTIQUES */
.elp-specs{background:#fff}
.elp-specs-grid{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);
    gap:var(--el-7);align-items:start}
.elp-spec-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--el-6)}
.elp-spec{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
    padding:15px 0;border-bottom:1px solid rgba(14,59,46,.11)}
.elp-spec .k{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:rgba(14,59,46,.55);flex:0 0 auto}
.elp-spec .v{font-size:14px;line-height:1.5;color:#25342E;text-align:right}
@media(max-width:900px){
    .elp-specs-grid{grid-template-columns:1fr;gap:var(--el-4)}
    .elp-spec-list{grid-template-columns:1fr}
    .elp-spec{padding:13px 0;gap:14px}
    .elp-spec .k{font-size:11.5px}
    .elp-spec .v{font-size:13.5px}
}

/* --------------------------------------------------------------- 7 · COMMENT CHOISIR */
.elp-fit{background:var(--el-ivory)}
.elp-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--el-4)}
.elp-fit-card{background:#FFFDF9;border:1px solid rgba(14,59,46,.13);border-radius:8px;
    padding:28px 28px 30px;box-sizing:border-box}
.elp-fit-card h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:500;
    line-height:1.25;color:var(--el-green);margin:0 0 16px}
.elp-fit-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.elp-fit-card li{display:flex;align-items:flex-start;gap:10px;
    font-size:14px;line-height:1.55;color:#4A5852}
.elp-fit-card .material-symbols-outlined{font-size:19px;flex:0 0 auto;margin-top:1px}
.elp-fit-card--yes .material-symbols-outlined{color:var(--el-green)}
.elp-fit-card--no{background:transparent}
.elp-fit-card--no .material-symbols-outlined{color:rgba(14,59,46,.35)}
.elp-fit-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;
    padding-top:18px;border-top:1px solid rgba(14,59,46,.12)}
.elp-link{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
    color:var(--el-green);text-decoration:none}
.elp-link:hover{color:var(--el-gold)}
@media(max-width:760px){
    .elp-fit-grid{grid-template-columns:1fr;gap:14px}
    .elp-fit-card{padding:20px 18px 22px}
    .elp-fit-card h3{font-size:18px;margin-bottom:13px}
    .elp-fit-card li{font-size:13.5px}
}

/* --------------------------------------------------------------- 8 · FAQ PRODUIT */
.elp-faq{background:#fff}
.elp-faq-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);
    gap:var(--el-7);align-items:start}
.elp-faq-aside p{margin:var(--el-3) 0 var(--el-4);font-size:var(--el-body);
    line-height:1.7;color:#5A6862;max-width:320px}
@media(max-width:900px){
    .elp-faq-grid{grid-template-columns:1fr;gap:var(--el-4)}
    .elp-faq-aside p{max-width:none;margin-bottom:var(--el-3);font-size:15px}
}

/* --------------------------------------------------------------- 9 · PRODUITS LIÉS */
.elp-related{background:var(--el-offwhite)}
.elp-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
/* Deux colonnes plutôt que trois : avec quatre produits liés, une grille de
   trois laisse la quatrième carte seule sur sa ligne. */
@media(max-width:900px){ .elp-related-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media(max-width:700px){
    .elp-related-grid{display:flex;grid-template-columns:none;gap:14px;
        overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;scrollbar-width:none;
        margin-left:calc(-1 * var(--el-gut));margin-right:calc(-1 * var(--el-gut));
        padding-left:var(--el-gut);padding-right:var(--el-gut);
        scroll-padding-left:var(--el-gut)}
    .elp-related-grid::-webkit-scrollbar{display:none}
    .elp-related-grid>*{flex:0 0 min(72vw,300px);scroll-snap-align:start}
}

/* --------------------------------------------------------------- 10 · STICKY MOBILE */
.elp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:#FFFDF9;border-top:1px solid rgba(14,59,46,.14);
    box-shadow:0 -10px 26px -22px rgba(14,59,46,.85);
    transform:translateY(110%);transition:transform .38s var(--el-ease);
    padding:9px var(--el-gut) calc(9px + env(safe-area-inset-bottom))}
.elp-sticky.show{transform:translateY(0)}
.elp-sticky-in{display:flex;align-items:center;gap:12px;max-width:1280px;margin:0 auto}
.elp-sticky img{width:46px;height:46px;flex:0 0 auto;border-radius:6px;object-fit:cover;
    background:var(--el-studio);border:1px solid rgba(14,59,46,.1)}
.elp-sticky-info{flex:1;min-width:0}
.elp-sticky-title{font-size:12.5px;font-weight:600;color:#25342E;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.elp-sticky-price{font-size:15px;font-weight:700;color:var(--el-green);line-height:1.3}
.elp-sticky-price .woocommerce-Price-amount{color:var(--el-green)!important}
.elp-sticky-price del{display:none}
.elp-sticky .vz-btn{flex:0 0 auto;min-height:46px;padding:13px 20px;font-size:14px;
    white-space:nowrap}
.elp-sticky .vz-btn:hover{transform:none}
@media(min-width:901px){ .elp-sticky{display:none} }
@media(max-width:360px){
    .elp-sticky img{display:none}
    .elp-sticky .vz-btn{padding:13px 16px}
}
/* La PDP n'affiche pas la barre CTA fixe globale : pas de double barre. */
body.single-product .zm-fixedcta{display:none!important}

/* --------------------------------------------------------------- ANIMATIONS PDP */
@media(prefers-reduced-motion:reduce){
    .elp-gal-main img{animation:none!important}
    .elp-thumb,.elp-use,.elp-use-img img,.elp-sticky{transition:none!important}
    .elp-thumb:hover,.elp-use:hover{transform:none!important}
    .elp-use:hover .elp-use-img img{transform:none!important}
}

/* --------------------------------------------------------------- GARDE-FOUS */
.elp-buy-grid>*,.elp-ben-grid>*,.elp-uses-row>*,.elp-specs-grid>*,
.elp-fit-grid>*,.elp-faq-grid>*,.elp-related-grid>*,.elp-assur-in>*{min-width:0}
.elp-box h1,.elp-head h2,.elp-use-body h3,.elp-fit-card h3,
.elp-ben-item h3,.elp-spec .v{overflow-wrap:break-word}

/* =====================================================================
   ELAFYA — PASSE 12 : LEVÉE DE DEUX CONFLITS DE CASCADE
   ---------------------------------------------------------------------
   Deux règles antérieures neutralisaient les micro-interactions ajoutées
   en passe 10. Rien n'est supprimé : on rétablit simplement la priorité
   là où elle avait été perdue.

   12.1  Cartes révélées au scroll
         `html.el-js .el-rise.is-in{transform:none}` (0-3-1) l'emportait sur
         `.el-pcard:hover` (0-2-0) : les cartes qui sont AUSSI des éléments
         révélés ne se soulevaient jamais. On repasse au-dessus.

   12.2  Bouton « Ajouter au panier » natif
         La passe 3 avait aplati tous les boutons WooCommerce avec
         `transform:none!important`. Le CTA principal de la fiche produit
         doit retrouver sa montée d'un pixel — uniquement lui, la règle
         générale reste en place pour le panier et la commande.
   ===================================================================== */

@media(hover:hover){
    html.el-js .el-pcard.el-rise.is-in:hover{transform:translateY(-3px)}
    html.el-js .el-guide-card.el-rise.is-in:hover{transform:translateY(-2px)}
    html.el-js .elp-use.el-rise.is-in:hover{transform:translateY(-3px)}

    .elp-atc .single_add_to_cart_button:hover{transform:translateY(-1px)!important}
}
.elp-atc .single_add_to_cart_button:active{
    transform:translateY(0) scale(.995)!important;transition-duration:.09s!important}

@media(prefers-reduced-motion:reduce){
    html.el-js .el-pcard.el-rise.is-in:hover,
    html.el-js .el-guide-card.el-rise.is-in:hover,
    html.el-js .elp-use.el-rise.is-in:hover{transform:none!important}
    .elp-atc .single_add_to_cart_button:hover,
    .elp-atc .single_add_to_cart_button:active{transform:none!important}
}

/* =====================================================================
   ELAFYA — PASSE 13 : LOGO ORIGINAL · HEADER · SECTION ÉDITORIALE
   ---------------------------------------------------------------------
   Correction de direction artistique. Trois chantiers :
     1. le logo redevient le FICHIER ORIGINAL, plus grand et non transformé ;
     2. le header perd son champ de recherche permanent (icône + panneau),
        ce qui rend sa place à la marque et desserre la navigation ;
     3. la bande verte en quatre rectangles égaux est supprimée au profit
        d'une section éditoriale asymétrique.
   Cette couche est posée en fin de fichier : elle prévaut sur les passes
   8 à 12 sans les réécrire.
   ===================================================================== */

/* ---------------------------------------------------------------------
   13.1 · LOGO — cadrage du fichier original
   Le fichier source (1536 × 1024) porte le lock-up dans une boîte de
   976 × 204 px à partir de (257, 353) : près des deux tiers de l'image
   sont de la marge transparente. Servi en object-fit:contain, le lock-up
   ne ferait que 40 px de large dans une boîte de 42 px de haut — c'est
   exactement ce qui rendait le logo insignifiant.

   On garde donc le fichier INTACT et c'est la mise en page qui écarte la
   marge : conteneur overflow:hidden + image décalée. Aucun pixel n'est
   modifié, aucun filtre n'est appliqué, le rapport d'aspect du lock-up
   (4,784:1) est strictement conservé — donc aucune déformation.

   Une seule variable pilote tout : --el-logo-w = largeur VISUELLE du
   lock-up. Les facteurs viennent de la géométrie ci-dessus :
     hauteur    = w × 204/976  = w × 0.209016
     img width  = w × 1536/976 = w × 1.573770
     décalage x = -w × 257/976 = -w × 0.263320
     décalage y = -w × 353/976 = -w × 0.361683
   --------------------------------------------------------------------- */
.vz-brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.el-logo{--el-logo-w:160px;
    display:block;position:relative;overflow:hidden;flex:0 0 auto;
    width:var(--el-logo-w);
    height:calc(var(--el-logo-w) * 0.209016);
    transition:none}
.el-logo .el-logo-img{position:absolute;display:block;max-width:none;
    width:calc(var(--el-logo-w) * 1.573770);height:auto;
    left:calc(var(--el-logo-w) * -0.263320);
    top:calc(var(--el-logo-w) * -0.361683)}

/* Déclinaisons de taille — jamais en dessous du seuil de lisibilité. */
.el-logo-sm{--el-logo-w:132px}                     /* en-tête du drawer */
.el-logo-footer{--el-logo-w:150px}
@media(max-width:1179px){ .el-logo{--el-logo-w:146px} }
@media(max-width:900px){
    .el-logo{--el-logo-w:124px}                    /* cible mobile 115–135 px */
    .el-logo-sm{--el-logo-w:118px}
    .el-logo-footer{--el-logo-w:138px}
}
@media(max-width:360px){ .el-logo{--el-logo-w:116px} }

/* Le header collant ne rétrécit plus la marque : c'était l'une des causes
   du « logo trop petit ». Seule l'ombre marque le défilement. */
html.el-scrolled .el-logo{transform:none}

/* ---------------------------------------------------------------------
   13.2 · HEADER — [LOGO] [NAV CENTRÉE] [ACTIONS]
   Grille à trois colonnes : les colonnes latérales partagent la place
   restante à parts égales, donc la navigation est centrée sur la PAGE et
   non sur l'espace résiduel. Le logo occupe une colonne pleine à gauche.
   --------------------------------------------------------------------- */
:root{ --vz-nav-h:76px; }                          /* cible desktop 72–80 px */
@media(max-width:1179px){ :root{ --vz-nav-h:68px; } }
@media(max-width:900px){  :root{ --vz-nav-h:62px; } }   /* cible mobile 60–66 px */

.vz-header{position:sticky;top:0;z-index:60;background:var(--el-paper);
    border-bottom:1px solid var(--el-line)}
.vz-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:var(--el-4);height:var(--vz-nav-h);max-width:1280px;margin:0 auto;
    padding:0 var(--el-gut)}
.vz-nav>.vz-brand{justify-self:start}
.vz-nav>.vz-nav-actions{justify-self:end}

/* Navigation : espacement franc, filet animé au survol. L'animation
   verticale du libellé (.el-tlink) est construite par zenmart.js. */
.vz-nav-links{display:flex;align-items:center;justify-content:center;
    gap:clamp(16px,1.9vw,30px);margin:0}
.vz-nav-links a{position:relative;font-family:'Inter',sans-serif;
    font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    color:var(--el-ink);text-decoration:none;white-space:nowrap;
    padding:6px 0;transition:color var(--el-t-fast) ease}
.vz-nav-links a:hover,.vz-nav-links a.is-active{color:var(--el-green)}
.vz-nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--el-green);transform:scaleX(0);transform-origin:left center;
    transition:transform .32s var(--el-ease-out)}
.vz-nav-links a:hover::after,.vz-nav-links a:focus-visible::after{transform:scaleX(1)}
.vz-nav-links a:focus-visible{outline:2px solid var(--el-green);outline-offset:4px}

.vz-nav-actions{display:flex;align-items:center;gap:2px}
.vz-nav-actions a,.vz-nav-actions button{min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;padding:0;cursor:pointer;color:var(--el-ink);
    transition:color var(--el-t-fast) ease}
.vz-nav-actions a:hover,.vz-nav-actions button:hover{color:var(--el-green)}
.vz-nav-actions a:focus-visible,.vz-nav-actions button:focus-visible{
    outline:2px solid var(--el-green);outline-offset:-4px;border-radius:6px}
.vz-nav-actions .material-symbols-outlined{font-size:22px}

/* Le champ de recherche permanent est retiré du header à toutes les
   largeurs : c'est lui qui prenait la place de la marque. */
.vz-header .vz-search{display:none!important}

/* Sous 1180 px les huit liens ne tiennent plus sans se tasser : on bascule
   sur le menu tablette (drawer) PLUTÔT que de réduire le logo. */
@media(max-width:1179px){
    .vz-nav{grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);gap:var(--el-2)}
    .vz-nav-links{display:none}
    .vz-burger{display:inline-flex;justify-self:start;width:44px;height:44px;
        align-items:center;justify-content:center;border:0;background:none;
        color:var(--el-ink);cursor:pointer}
    .vz-burger:focus-visible{outline:2px solid var(--el-green);outline-offset:-4px;border-radius:6px}
    .vz-nav>.vz-brand{justify-self:center}
}
@media(min-width:1180px){ .vz-burger{display:none} }

/* Mobile : menu à gauche, logo exactement centré, panier à droite.
   Le compte et la recherche vivent dans le drawer. */
@media(max-width:900px){
    .vz-nav{padding:0 max(10px,calc(var(--el-gut) - 10px))}
    .vz-nav-actions .vz-acct-link,
    .vz-nav-actions .el-srch-btn{display:none}
    .vz-nav-actions .material-symbols-outlined{font-size:23px}
}

/* ---------------------------------------------------------------------
   13.3 · PANNEAU DE RECHERCHE
   Déplié sous la barre, sur toute la largeur du conteneur. Fermé, il porte
   hidden : ni visible, ni focusable, ni lu.
   --------------------------------------------------------------------- */
.el-srch{background:var(--el-paper);border-top:1px solid var(--el-line);
    overflow:hidden;max-height:0;opacity:0;
    transition:max-height .26s var(--el-ease-out),opacity .2s ease}
.el-srch.is-open{max-height:180px;opacity:1}
.el-srch[hidden]{display:none}
.el-srch-in{position:relative;max-width:1280px;margin:0 auto;
    padding:18px var(--el-gut) 22px;display:block;box-sizing:border-box}
.el-srch-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--el-muted);margin-bottom:10px}
.el-srch-field{display:flex;align-items:center;gap:12px;
    border-bottom:1.5px solid rgba(14,59,46,.28);padding-bottom:10px;
    max-width:720px;box-sizing:border-box}
.el-srch-field .material-symbols-outlined{font-size:22px;color:var(--el-green);flex:0 0 auto}
.el-srch-field input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
    font-family:'Inter',sans-serif;font-size:16px;color:var(--el-ink)}
.el-srch-field input::placeholder{color:#93A099}
.el-srch-go{flex:0 0 auto;background:var(--el-green);border:0;border-radius:6px;
    color:#fff;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;
    padding:10px 18px;cursor:pointer;transition:background-color var(--el-t-fast) ease}
.el-srch-go:hover{background:#0A2E23}
.el-srch-go:focus-visible,.el-srch-field input:focus-visible{
    outline:2px solid var(--el-green);outline-offset:3px}
.el-srch-x{position:absolute;top:14px;right:var(--el-gut);width:40px;height:40px;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;cursor:pointer;color:var(--el-muted)}
.el-srch-x:hover{color:var(--el-green)}
.el-srch-x:focus-visible{outline:2px solid var(--el-green);outline-offset:-3px;border-radius:6px}
@media(max-width:900px){
    .el-srch-in{padding:14px var(--el-gut) 18px}
    .el-srch-field input{font-size:16px}       /* 16px : pas de zoom iOS */
    .el-srch-go{padding:10px 14px;font-size:13px}
    .el-srch-x{top:9px;right:10px}
}
@media(prefers-reduced-motion:reduce){
    .el-srch{transition:none}
    .vz-nav-links a::after{transition:none}
}

/* ---------------------------------------------------------------------
   13.4 · SECTION ÉDITORIALE APRÈS LE HERO
   Remplace la bande verte en quatre rectangles égaux. Aucun fond vert,
   aucune carte, aucune icône décorative : une grille asymétrique
   (introduction 37 % / bénéfices 63 %) et des filets fins.
   --------------------------------------------------------------------- */
.el-edito{background:var(--el-paper);border-bottom:1px solid var(--el-line);
    padding:var(--el-8) 0 calc(var(--el-8) - 8px)}
.el-edito-grid{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);
    gap:clamp(40px,6vw,104px);align-items:start;
    max-width:1280px;margin:0 auto;padding:0 var(--el-gut);box-sizing:border-box}
.el-edito-aside h2{font-family:'Playfair Display',serif;font-size:var(--el-h2);
    font-weight:600;line-height:1.06;letter-spacing:-.014em;color:var(--el-green);margin:0}
.el-edito-aside p{margin:var(--el-3) 0 0;font-size:var(--el-body);line-height:1.75;
    color:var(--el-muted);max-width:330px}

/* Chaque bénéfice : intitulé et explication sur une ligne éditoriale,
   séparés par un filet. Pas de boîte, pas de fond, pas de rayon. */
.el-edito-list{display:block}
.el-edito-i{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
    gap:clamp(20px,3vw,48px);align-items:baseline;
    padding:26px 0 28px;border-top:1px solid var(--el-line)}
.el-edito-i:first-child{border-top:0;padding-top:4px}
.el-edito-i:last-child{padding-bottom:4px}
.el-edito-t{font-family:'Playfair Display',serif;font-size:clamp(19px,1.6vw,23px);
    font-weight:500;line-height:1.22;color:var(--el-green);margin:0}
.el-edito-d{font-size:var(--el-body);line-height:1.72;color:var(--el-muted);margin:0}

@media(max-width:1024px){
    .el-edito{padding:var(--el-7) 0}
    .el-edito-grid{grid-template-columns:1fr;gap:var(--el-5)}
    .el-edito-aside p{max-width:520px}
}
/* Mobile : titre + introduction, puis les trois bénéfices en liste
   verticale séparée par des filets. Aucune carte, aucune grille 2 × 2. */
@media(max-width:720px){
    .el-edito{padding:52px 0 48px}
    .el-edito-grid{gap:var(--el-4)}
    .el-edito-aside p{margin-top:12px;font-size:15px;max-width:none}
    .el-edito-i{grid-template-columns:1fr;gap:7px;padding:20px 0 22px;align-items:start}
    .el-edito-i:first-child{padding-top:2px}
    .el-edito-t{font-size:18px}
    .el-edito-d{font-size:14.5px;line-height:1.65}
}

/* ---------------------------------------------------------------------
   13.5 · FOOTER — plaque ivoire pour le logo
   Le wordmark du fichier original est mesuré à 2,03:1 sur le vert profond :
   il n'est pas lisible. Plutôt que d'en repeindre une version claire, le
   logo intact est posé sur une petite plaque ivoire sobre (option
   prioritaire du cahier des charges). Pas de capsule, rayon court.
   --------------------------------------------------------------------- */
.el-logo-plate{display:inline-block;background:var(--el-ivory);
    padding:12px 18px;border-radius:4px;margin-bottom:18px;line-height:0}
.el-logo-plate .el-logo{--el-logo-w:150px}
@media(max-width:900px){
    .el-logo-plate{padding:10px 14px;margin-bottom:14px}
    .el-logo-plate .el-logo{--el-logo-w:138px}
}

/* ---------------------------------------------------------------------
   13.6 · GARDE-FOUS
   --------------------------------------------------------------------- */
.el-edito-grid>*,.el-edito-i>*{min-width:0}
.el-edito-aside h2,.el-edito-t,.el-edito-d{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
    .el-logo,.el-srch-go{transition:none!important}
}

/* ---------------------------------------------------------------------
   13.7 · BARRE UTILITAIRE — correction de cascade
   La passe 8 masquait le lien WhatsApp sous 900 px, mais la passe 10 a
   redéclaré `.el-util-wa{display:inline-flex}` PLUS BAS dans le fichier :
   la règle mobile était donc écrasée et les trois messages restaient
   affichés, tronqués des deux côtés. On rétablit la règle ici, en fin de
   cascade, avec la même intention : deux messages sur mobile, jamais trois.
   --------------------------------------------------------------------- */
@media(max-width:900px){
    .el-util-wa{display:none!important}
    /* le séparateur « · » ne doit pas apparaître devant un item masqué */
    .el-util-i + .el-util-i.el-util-wa::before{content:none}
}
/* Desktop : hauteur de filet conforme (28–32 px), séparateurs discrets. */
.el-util-in{height:30px}
@media(max-width:900px){ .el-util-in{height:30px} }

/* ---------------------------------------------------------------------
   13.8 · HIÉRARCHIE DU HEADER
   Le logo original est une marque pastel (lotus #BCCDBB). Face à huit
   liens en gras noir capitales, il perdait le premier rang même agrandi.
   On n'y touche pas : c'est la NAVIGATION qui redescend d'un cran
   (graisse et valeur), pour que la marque mène la composition.
   Contraste des liens conservé bien au-dessus de AA.
   --------------------------------------------------------------------- */
.vz-nav-links a{font-weight:500;color:#41504A;letter-spacing:.055em}
.vz-nav-links a:hover,.vz-nav-links a:focus-visible,
.vz-nav-links a.is-active{color:var(--el-green)}
.vz-nav-actions a,.vz-nav-actions button{color:#41504A}

/* ---------------------------------------------------------------------
   13.9 · SECTION ÉDITORIALE — respiration finale
   Le bas de section était plus lourd que le haut : on l'égalise.
   --------------------------------------------------------------------- */
.el-edito{padding:calc(var(--el-8) - 8px) 0 calc(var(--el-8) - 16px)}
@media(max-width:1024px){ .el-edito{padding:var(--el-7) 0 calc(var(--el-7) - 8px)} }
@media(max-width:720px){  .el-edito{padding:52px 0 44px} }

/* =====================================================================
   ELAFYA — PASSE 13 (suite) : FICHE PRODUIT RECOMPOSÉE
   ---------------------------------------------------------------------
   La passe 11 empilait dix sections pleine largeur. Trois motifs la
   faisaient basculer dans la colonne de rectangles :
     · une bande verte à quatre blocs titre+description — le motif
       exactement refusé en revue sur la homepage ;
     · quatre cartes d'usage strictement identiques ;
     · deux sections beige consécutives (usages, puis « fait pour vous »).
   Sept sections désormais, un seul fond beige, et plus aucune rangée de
   cartes égales.

   Rythme des fonds :
     fil d'Ariane .... offwhite
     bloc achat ...... blanc
     réassurances .... ivoire      (filet compact, plus de bande verte)
     éditorial ....... blanc       (bénéfices + usages réunis)
     caractéristiques  sable       (UNIQUE section beige, + adéquation)
     FAQ ............. blanc
     produits liés ... offwhite
   ===================================================================== */

/* --------------------------------------------------------------- 3 · RÉASSURANCES COMPACTES */
/* Un filet, pas une bande : quatre libellés courts sur une ligne. */
.elp-assur{background:var(--el-ivory);border-top:1px solid var(--el-line);
    border-bottom:1px solid var(--el-line)}
.elp-assur-in{max-width:1280px;margin:0 auto;padding:0 var(--el-gut);
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
    min-height:46px;
    font-size:13px;font-weight:500;color:var(--el-green);letter-spacing:.005em}
.elp-assur-i{padding:8px 24px;line-height:1.3;white-space:nowrap}
.elp-assur-i + .elp-assur-i{border-left:1px solid var(--el-line)}
@media(max-width:900px){
    .elp-assur-in{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
        scrollbar-width:none;-webkit-overflow-scrolling:touch;
        min-height:42px;font-size:12.5px}
    .elp-assur-in::-webkit-scrollbar{display:none}
    .elp-assur-i{padding:8px 14px}
    .elp-assur-i:first-child{padding-left:0}
}

/* --------------------------------------------------------------- 4 · ÉDITORIAL (bénéfices + usages) */
.elp-story{background:#fff}

/* Bande d'usages : séparée des bénéfices par un filet, pas par une
   nouvelle section pleine largeur. */
.elp-uses-band{margin-top:var(--el-8);padding-top:var(--el-6);
    border-top:1px solid rgba(14,59,46,.12)}
.elp-uses-head{display:flex;align-items:baseline;gap:var(--el-4);
    flex-wrap:wrap;margin-bottom:var(--el-5)}
.elp-uses-head h3{font-family:'Playfair Display',serif;
    font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.12;
    letter-spacing:-.012em;color:var(--el-green);margin:0}
.elp-uses-head p{margin:0;font-size:var(--el-body);line-height:1.6;color:#5A6862}

/* Cinq colonnes, la vignette de tête en occupe deux : la rangée cesse
   d'être une grille de cartes identiques. Pas de carte, pas de bordure —
   image + légende, comme une planche éditoriale. */
.elp-uses-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--el-3);
    align-items:start}
.elp-use{display:block;margin:0;background:none;border:0;border-radius:0;
    box-shadow:none;overflow:visible}
.elp-use--lead{grid-column:span 2}
.elp-use-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;
    background:var(--el-studio)}
.elp-use--lead .elp-use-img{aspect-ratio:16/11}
.elp-use-img img{width:100%;height:100%;object-fit:cover;
    filter:saturate(.95) contrast(1.02);transition:transform .55s var(--el-ease)}
.elp-use-body{display:block;padding:14px 0 0}
.elp-use-body h4{font-family:'Playfair Display',serif;font-size:17px;font-weight:500;
    line-height:1.24;color:var(--el-green);margin:0}
.elp-use--lead .elp-use-body h4{font-size:20px}
.elp-use-body p{margin:7px 0 0;font-size:13.5px;line-height:1.58;color:#63706A}
@media(hover:hover){
    .elp-use:hover{transform:none;box-shadow:none;border-color:transparent}
    .elp-use:hover .elp-use-img img{transform:scale(1.035)}
}
@media(max-width:900px){
    .elp-uses-band{margin-top:var(--el-6);padding-top:var(--el-5)}
    .elp-uses-head{gap:var(--el-2);margin-bottom:var(--el-4)}
    .elp-uses-head p{font-size:14.5px}
    /* Mobile : la vignette de tête prend la largeur, les trois autres
       suivent sur une ligne. Toujours pas quatre cartes égales. */
    .elp-uses-row{grid-template-columns:repeat(3,1fr);gap:var(--el-2)}
    .elp-use--lead{grid-column:1 / -1}
    .elp-use--lead .elp-use-img{aspect-ratio:16/9}
    .elp-use-body{padding-top:10px}
    .elp-use-body h4{font-size:14.5px}
    .elp-use--lead .elp-use-body h4{font-size:18px}
    .elp-use-body p{margin-top:5px;font-size:12.5px;line-height:1.5}
    /* les trois vignettes secondaires : légende courte, pas de pavé */
    .elp-use:not(.elp-use--lead) .elp-use-body p{display:none}
}
@media(max-width:380px){
    .elp-use-body h4{font-size:13.5px}
}

/* --------------------------------------------------------------- 5 · CARACTÉRISTIQUES + ADÉQUATION */
.elp-specs{background:var(--el-sand)}      /* unique section beige de la page */

/* Le bloc « fait pour vous ? » : deux colonnes de TEXTE séparées par un
   filet vertical — plus de cartes claires posées sur du beige. */
.elp-fit-band{margin-top:var(--el-8);padding-top:var(--el-6);
    border-top:1px solid rgba(14,59,46,.16)}
.elp-fit-band--solo{margin-top:0;padding-top:0;border-top:0}
.elp-fit-head{margin-bottom:var(--el-5);max-width:640px}
.elp-fit-head h3{font-family:'Playfair Display',serif;
    font-size:clamp(22px,2.1vw,30px);font-weight:500;line-height:1.12;
    letter-spacing:-.012em;color:var(--el-green);margin:0}
.elp-fit-head p{margin:12px 0 0;font-size:var(--el-body);line-height:1.7;color:#5A6862}
.elp-fit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(28px,4vw,64px)}
.elp-fit-col{background:none;border:0;border-radius:0;padding:0;box-sizing:border-box}
.elp-fit-col--no{padding-left:clamp(28px,4vw,64px);
    border-left:1px solid rgba(14,59,46,.16)}
.elp-fit-col h4{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:rgba(14,59,46,.62);
    margin:0 0 16px}
.elp-fit-col ul{list-style:none;margin:0;padding:0;display:flex;
    flex-direction:column;gap:12px}
.elp-fit-col li{display:flex;align-items:flex-start;gap:10px;
    font-size:14.5px;line-height:1.58;color:#3D4B45}
.elp-fit-col .material-symbols-outlined{font-size:19px;flex:0 0 auto;margin-top:1px}
.elp-fit-col--yes .material-symbols-outlined{color:var(--el-green)}
.elp-fit-col--no .material-symbols-outlined{color:rgba(14,59,46,.34)}
.elp-fit-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:20px;
    padding-top:18px;border-top:1px solid rgba(14,59,46,.16)}
@media(max-width:760px){
    .elp-fit-band{margin-top:var(--el-6);padding-top:var(--el-5)}
    .elp-fit-head{margin-bottom:var(--el-4)}
    .elp-fit-head p{font-size:14.5px}
    .elp-fit-grid{grid-template-columns:1fr;gap:var(--el-4)}
    .elp-fit-col--no{padding-left:0;padding-top:var(--el-4);
        border-left:0;border-top:1px solid rgba(14,59,46,.16)}
    .elp-fit-col li{font-size:14px}
}

/* --------------------------------------------------------------- GARDE-FOUS PDP */
.elp-uses-row>*,.elp-fit-grid>*{min-width:0}
.elp-uses-head h3,.elp-fit-head h3,.elp-use-body h4{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
    .elp-use-img img{transition:none!important}
    .elp-use:hover .elp-use-img img{transform:none!important}
}

/* ---------------------------------------------------------------------
   13.10 · BANDE D'USAGES — l'asymétrie passe par la LARGEUR, pas la hauteur
   Avec des rapports d'aspect différents (16/11 pour la tête, 4/3 pour les
   autres), la vignette de tête devenait deux fois plus haute : sa légende
   tombait 160 px sous celle des voisines et la rangée paraissait décalée
   par accident. Toutes les images partagent désormais la MÊME hauteur ;
   seule la largeur varie (2 colonnes sur 5). Les légendes s'alignent, et
   la rangée reste franchement asymétrique.
   --------------------------------------------------------------------- */
.elp-use-img{aspect-ratio:auto;height:clamp(158px,15.2vw,216px)}
.elp-use--lead .elp-use-img{aspect-ratio:auto;height:clamp(158px,15.2vw,216px)}
@media(max-width:900px){
    /* La tête garde sa pleine largeur au-dessus des trois autres : elle
       peut donc être plus haute sans désaligner quoi que ce soit. */
    .elp-use--lead .elp-use-img{height:clamp(170px,42vw,240px)}
    .elp-use:not(.elp-use--lead) .elp-use-img{height:clamp(96px,24vw,140px)}
    .elp-use--lead{margin-bottom:var(--el-2)}
}

/* ---------------------------------------------------------------------
   13.11 · RÉASSURANCES PDP — compression et doublon mobile
   Deux défauts relevés en revue de captures :

   a) Les libellés se chevauchaient. `white-space:nowrap` empêche la coupe
      du texte, mais un item flex se contracte quand même SOUS la largeur
      de son contenu sans `flex:0 0 auto` : les quatre libellés se
      superposaient dans la largeur disponible.

   b) Sur mobile, cette bande répétait mot pour mot la liste
      `.elp-box-assur` affichée quelques pixels plus haut, juste sous le
      bouton d'ajout au panier. Deux fois la même information, et une
      bande pleine largeur de plus dans le défilement.

   Correction : items non compressibles, et bande masquée sous 900 px —
   l'information reste portée par la buybox, à un endroit plus fort.
   Sur desktop la bande garde son rôle : séparer le bloc achat de la
   section éditoriale.
   --------------------------------------------------------------------- */
.elp-assur-i{flex:0 0 auto}
@media(max-width:900px){
    .elp-assur{display:none}
}

/* ---------------------------------------------------------------------
   13.12 · HEADER — centrage RÉEL de la navigation
   La grille `1fr auto 1fr` ne centrait pas vraiment. Quand la colonne
   centrale réclame beaucoup de place, les deux colonnes latérales
   retombent sur leur contenu minimum — 160 px à gauche (le logo) contre
   136 px à droite (les trois icônes). Côtés inégaux : la navigation se
   retrouvait décalée de ~29 px vers la gauche, ce qui se voit sur une
   barre aussi dépouillée.

   La navigation est donc sortie du flux et centrée sur la page. Le logo
   et les actions restent aux extrémités : leurs largeurs n'influencent
   plus la position de la navigation, quelle que soit la longueur des
   libellés (menu WordPress personnalisé compris).
   --------------------------------------------------------------------- */
@media(min-width:1280px){
    .vz-nav{display:flex;position:relative;align-items:center;
        justify-content:space-between;gap:var(--el-4)}
    .vz-nav-links{position:absolute;left:50%;top:50%;
        transform:translate(-50%,-50%);margin:0;
        gap:clamp(15px,1.75vw,28px);white-space:nowrap}
}

/* Sous 1280 px, les huit libellés ne laissent plus de marge franche entre
   le logo et le premier lien : on bascule sur le menu tablette plutôt que
   de tasser la barre ou de rapetisser la marque. */
@media(max-width:1279px){
    .vz-nav{display:grid;
        grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
        gap:var(--el-2)}
    .vz-nav-links{display:none}
    .vz-burger{display:inline-flex;justify-self:start;width:44px;height:44px;
        align-items:center;justify-content:center;border:0;background:none;
        color:#41504A;cursor:pointer}
    .vz-nav>.vz-brand{justify-self:center}
    :root{ --vz-nav-h:68px; }
}
@media(min-width:1280px){ .vz-burger{display:none} }
@media(max-width:900px){ :root{ --vz-nav-h:62px; } }

/* Le logo garde sa taille pleine jusqu'au basculement. */
@media(max-width:1279px){ .el-logo{--el-logo-w:146px} }
@media(max-width:900px){  .el-logo{--el-logo-w:124px} }
@media(max-width:360px){  .el-logo{--el-logo-w:116px} }

/* =====================================================================
   ELAFYA — PASSE 14 : FAVICON · FOOTER · NOTES PRODUIT
   ---------------------------------------------------------------------
   Correction ciblée. La homepage n'est pas retouchée : cette couche ne
   concerne que la ligne de réassurance, le pied de page, les réseaux
   sociaux et le bloc note des cartes produit. Posée en fin de fichier,
   elle prévaut sur les passes 8 à 13 sans les réécrire.

     14.1  Réassurance — ligne fine (fin des quatre cellules égales)
     14.2  Footer desktop — composition asymétrique
     14.3  Logo du footer — panneau ivoire au ras du lock-up
     14.4  Réseaux sociaux — glyphes de marque, boîte unique
     14.5  Notes et étoiles — habillage du gabarit WooCommerce
     14.6  Footer mobile — accordéons compacts
     14.7  Garde-fous
   ===================================================================== */

/* ---------------------------------------------------------------------
   14.1 · RÉASSURANCE — une ligne, trois éléments
   La passe 11 posait quatre cellules de 58 px de haut réparties en
   `repeat(4,1fr)` : quatre rectangles identiques, exactement le motif
   refusé en revue. On repasse en flux : une ligne fine centrée, filets
   verticaux discrets, aucune boîte. Le quatrième élément (« Assistance
   WhatsApp ») est retiré du balisage — il vit dans la colonne assistance.

   NOTE DE CASCADE — la règle historique `.vz-footer ul` (0,1,1) impose
   `flex-direction:column` et `gap:12px` à TOUTE liste du pied de page. Les
   sélecteurs de cette passe sont donc préfixés par `.vz-footer` : sans cela
   la ligne de réassurance et la rangée sociale se remettent en colonne.
   --------------------------------------------------------------------- */
.el-fassur{background:var(--el-green);border-bottom:1px solid rgba(255,255,255,.08)}
.vz-footer .el-fassur-in{display:flex;flex-flow:row wrap;
    align-items:center;justify-content:center;
    list-style:none;gap:0;max-width:1280px;margin:0 auto;
    padding:0 var(--el-gut);box-sizing:border-box;
    font-size:12.5px;font-weight:500;letter-spacing:.005em;line-height:1.35;
    color:rgba(247,243,234,.78)}
.vz-footer .el-fassur-in li{position:relative;margin:0;
    padding:12px clamp(16px,2.4vw,32px)}
/* Séparateur : un filet court centré sur la ligne, jamais un bord de cellule
   sur toute la hauteur de la bande. */
.vz-footer .el-fassur-in li + li::before{content:"";position:absolute;
    left:0;top:50%;transform:translateY(-50%);
    width:1px;height:12px;background:rgba(255,255,255,.22)}

/* ---------------------------------------------------------------------
   14.2 · FOOTER DESKTOP — composition asymétrique
   Cinq colonnes volontairement inégales : marque 32 %, trois colonnes de
   navigation étroites à 15 %, assistance à 23 %. La colonne assistance
   est donc une fois et demie plus large qu'une colonne de liens, ce qui
   casse la lecture en peigne des cinq colonnes presque égales.
   --------------------------------------------------------------------- */
.vz-footer-top{display:grid;
    grid-template-columns:minmax(0,32fr) minmax(0,15fr) minmax(0,15fr)
                          minmax(0,15fr) minmax(0,23fr);
    gap:clamp(26px,3.2vw,54px);align-items:start;
    max-width:1280px;margin:0 auto;box-sizing:border-box;
    padding:clamp(46px,4.4vw,64px) var(--el-gut) clamp(28px,2.8vw,40px)}

/* Entre 901 et 1100 px les cinq colonnes se tassent : la marque prend la
   première ligne entière, la navigation et l'assistance la seconde. La
   hiérarchie des largeurs est conservée. */
@media(min-width:901px) and (max-width:1100px){
    .vz-footer-top{grid-template-columns:minmax(0,15fr) minmax(0,15fr)
                                         minmax(0,15fr) minmax(0,23fr);
        gap:34px clamp(22px,2.8vw,38px)}
    .vz-footer-brand{grid-column:1 / -1;max-width:560px}
}

.vz-footer .el-fbaseline{margin:0;font-size:13.5px;line-height:1.7;
    color:rgba(247,243,234,.62);max-width:292px}

.vz-footer .vz-facc--contact .vz-facc-body p{margin:0 0 16px;
    font-size:13.5px;line-height:1.7;color:rgba(247,243,234,.62)}
.vz-facc--contact .vz-btn{padding:13px 16px;font-size:13.5px}

/* ---------------------------------------------------------------------
   14.3 · LOGO DU FOOTER — panneau ivoire, pas une carte
   La passe 13 posait 12/18 px de marge intérieure et un rayon de 4 px :
   le lock-up flottait au milieu d'un rectangle blanc. Le panneau est
   ramené au ras du lock-up. Aucune bordure, aucune ombre, aucun rayon
   marqué — il se lit comme une réserve claire, pas comme une carte.
   Le fichier de marque, lui, n'est pas transformé.
   --------------------------------------------------------------------- */
.el-logo-plate{display:inline-block;background:rgba(247,243,234,.93);
    padding:6px 9px;border:0;border-radius:2px;box-shadow:none;
    margin:0 0 18px;line-height:0}
/* `.el-logo-footer` porte encore une marge basse de 18 px héritée de la
   passe 10 : dans un inline-block elle s'ajoute à la hauteur du panneau et
   décentrait le lock-up. Elle est neutralisée ici, la marge est portée par
   le panneau lui-même. */
.el-logo-plate .el-logo{--el-logo-w:156px;margin:0}

/* ---------------------------------------------------------------------
   14.4 · RÉSEAUX SOCIAUX — même boîte, même graisse
   Les anciens pictogrammes venaient de Material Symbols et ne
   correspondaient pas aux marques (pouce levé, appareil photo). Ce sont
   désormais les glyphes officiels, tous en aplat, tous dans une boîte de
   40 px. Survol sobre, focus visible, ouverture externe sécurisée.
   --------------------------------------------------------------------- */
.vz-footer .el-socials{display:flex;flex-flow:row nowrap;align-items:center;
    gap:4px;list-style:none;margin:20px 0 0;padding:0}
.vz-footer .el-socials li{margin:0}
.vz-footer .el-socials .el-soc{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border-radius:8px;text-decoration:none;font-size:0;
    color:rgba(247,243,234,.76);background:transparent;
    transition:color var(--el-t-fast) ease,background-color var(--el-t-fast) ease}
.vz-footer .el-socials .el-soc .el-soc-ico{display:block;width:19px;height:19px}
.vz-footer .el-socials .el-soc:hover{color:#fff;background:rgba(255,255,255,.09)}
.vz-footer .el-socials .el-soc:focus-visible{
    outline:2px solid rgba(247,243,234,.9);outline-offset:2px}

/* ---------------------------------------------------------------------
   14.5 · NOTES ET ÉTOILES
   Le balisage vient de wc_get_rating_html() : c'est WooCommerce qui
   calcule le taux de remplissage (demi-étoiles comprises) et rédige
   l'aria-label. Cette feuille ne fait que l'habiller, et sans dépendre de
   la police « star » de WooCommerce : le caractère ★ est repris
   directement, ce qui donne le même rendu partout.

   Géométrie : la pseudo-boîte ::before est dans le flux et dimensionne le
   conteneur (width:max-content). Le <span> de remplissage, en pourcentage
   de ce conteneur, tombe donc exactement sur la bonne fraction d'étoile.
   Le texte accessible de WooCommerce est repoussé hors de la boîte de
   1 em (padding-top) : lu par les lecteurs d'écran, jamais affiché.

   Or discret, jamais de jaune vif. Aucune étoile n'est dessinée quand le
   produit n'a pas d'avis : c'est un libellé texte qui prend la place.
   --------------------------------------------------------------------- */
.el-rate{display:flex;align-items:center;gap:7px;margin-top:9px;
    min-height:17px;font-size:12.5px;line-height:1.25;
    color:var(--el-muted);white-space:nowrap}
.el-rate--void{display:block}
.el-rate--new{font-size:10.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:#78877F}

.el-rate .star-rating{position:relative;display:inline-block;flex:0 0 auto;
    width:max-content;height:1em;overflow:hidden;
    font-family:'Inter',sans-serif;font-size:14px;line-height:1;
    letter-spacing:.06em;color:#DCD2C0}
.el-rate .star-rating::before{content:"\2605\2605\2605\2605\2605";
    display:block;position:static;float:none;color:inherit;margin-right:-.06em}
/* Le <span> de remplissage contient AUSSI le texte accessible de WooCommerce
   (« Noté 5 sur 5 basé sur 1 notation client »). Le repousser par un
   padding-top ne suffisait pas : selon la boîte héritée, sa première lettre
   se peignait par-dessus la première étoile. On le sort par la gauche —
   il reste lu par les lecteurs d'écran, mais ne se peint plus jamais.
   Le ::before, hors flux, remet son propre text-indent à zéro. */
.el-rate .star-rating > span{position:absolute;left:0;top:0;height:100%;
    overflow:hidden;float:none;white-space:nowrap;
    text-indent:-9999px;padding-top:1.7em;color:#B0873C}
.el-rate .star-rating > span::before{content:"\2605\2605\2605\2605\2605";
    position:absolute;left:0;top:0;letter-spacing:.06em;text-indent:0}
.el-rate-avg{font-weight:700;color:var(--el-ink)}
.el-rate-count{color:var(--el-muted)}

/* Carte produit : la note s'intercale entre le nom et le prix, et les prix
   sont alignés au même fond de carte sur toute la ligne. */
.el-pcard-body .el-rate{margin-top:8px}
.el-pcard-body .el-price{margin-top:auto;padding-top:10px}
.vz-pcard-body .el-rate{margin-top:8px}

@media(max-width:900px){
    .el-rate{font-size:12px;gap:6px;margin-top:7px}
    .el-rate .star-rating{font-size:13px}
    .el-pcard-body .el-price{padding-top:8px}
}

/* ---------------------------------------------------------------------
   14.6 · FOOTER MOBILE — accordéons compacts
   Ordre imposé par le balisage : marque, présentation, réseaux, Boutique,
   Usages, Aide, assistance, ligne légale. Zones tactiles à 48 px minimum,
   filets fins, aucun vide, aucun grand aplat clair.
   --------------------------------------------------------------------- */
@media(max-width:900px){
    .vz-footer .el-fassur-in{padding:5px var(--el-gut);font-size:12px}
    .vz-footer .el-fassur-in li{padding:5px 13px}
    /* Deux lignes exactement : deux éléments, puis le troisième centré. */
    .vz-footer .el-fassur-in li:nth-child(3){flex-basis:100%;
        padding-top:1px;text-align:center}
    .vz-footer .el-fassur-in li:nth-child(3)::before{content:none}

    /* Le `gap` de la grille desktop ne doit PAS survivre en pile mobile :
       26 px entre chaque accordéon rouvraient exactement les vides que
       la revue reprochait au pied de page. */
    .vz-footer-top{gap:0;padding:26px var(--el-gut) 4px}
    .vz-footer-brand{margin-bottom:10px}
    .el-logo-plate{padding:5px 8px;margin-bottom:14px}
    .el-logo-plate .el-logo{--el-logo-w:136px;margin:0}
    .vz-footer .el-fbaseline{font-size:13px;line-height:1.65;max-width:none}
    .vz-footer .el-socials{margin-top:14px;gap:2px}
    .vz-footer .el-socials .el-soc{width:44px;height:44px}

    .vz-facc{border-top:1px solid rgba(255,255,255,.11)}
    .vz-facc > summary{min-height:48px;padding:0;margin:0;
        font-size:12.5px;letter-spacing:.12em}
    .vz-facc ul,.vz-facc .vz-facc-body{padding:0 0 16px}
    .vz-facc ul{gap:11px}
    .vz-facc ul a{font-size:14px;padding:1px 0}
    .vz-facc--contact .vz-facc-body p{margin-bottom:12px;font-size:13px}
    .vz-facc:last-of-type{border-bottom:1px solid rgba(255,255,255,.11)}

    .vz-footer-bottom-inner{padding:16px var(--el-gut)}
}
@media(max-width:380px){
    .vz-footer .el-fassur-in li{padding:5px 9px;font-size:11.5px}
}

/* ---------------------------------------------------------------------
   14.7 · GARDE-FOUS
   --------------------------------------------------------------------- */
.vz-footer-top > *{min-width:0}
.el-fbaseline,.vz-facc ul a,.vz-facc--contact .vz-facc-body p,
.vz-footer .el-fassur-in li{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
    .vz-footer .el-socials .el-soc{transition:none!important}
}

/* =====================================================================
   ELAFYA — PASSE 15 : INTÉGRATION, LIVRAISON/RETOURS, TYPOGRAPHIE
   ---------------------------------------------------------------------
     15.1  Grille des pages de liste (boutique)
     15.2  Résumé livraison — fiche produit et tunnel
     15.3  Pages Livraison / Retours et échanges
     15.4  Typographie — variables globales
     15.5  Typographie — la serif redevient une exception
     15.6  Typographie — hiérarchie non uniforme
     15.7  Garde-fous
   ===================================================================== */

/* ---------------------------------------------------------------------
   15.1 · GRILLE DES PAGES DE LISTE
   La boutique utilise désormais la MÊME carte que la homepage
   (.el-pcard). Seule la grille diffère : trois colonnes, jamais de rail
   horizontal — sur une page de catalogue, on veut voir l'offre, pas la
   faire défiler.
   --------------------------------------------------------------------- */
.el-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.el-pgrid>*{min-width:0}
@media(max-width:1024px){ .el-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} }
@media(max-width:560px){  .el-pgrid{gap:12px} }

/* ---------------------------------------------------------------------
   15.2 · RÉSUMÉ LIVRAISON — fiche produit et tunnel
   Une liste de faits courts, sans icône décorative et sans encadré. Le
   contenu vient de WooCommerce (cf. elafya_delivery_summary).
   --------------------------------------------------------------------- */
.elp-deliv{margin-top:var(--el-4);padding-top:var(--el-3);
    border-top:1px solid var(--el-line)}
.el-deliv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.el-deliv li{position:relative;padding-left:16px;
    font-family:var(--el-font-sans);font-size:14px;line-height:1.5;color:var(--el-muted)}
.el-deliv li::before{content:"";position:absolute;left:0;top:.62em;
    width:5px;height:1px;background:var(--el-gold)}
.el-deliv-more{display:inline-block;margin-top:12px;
    font-family:var(--el-font-sans);font-size:13.5px;font-weight:600;
    color:var(--el-gold);text-decoration:none;
    border-bottom:1px solid rgba(168,129,63,.4);padding-bottom:2px}
.el-deliv-more:hover{color:var(--el-green);border-bottom-color:var(--el-green)}
.el-deliv-more:focus-visible{outline:2px solid var(--el-green);outline-offset:3px}

/* Accordéon « Livraison et retours » de la fiche produit */
.elp-acc-deliv{margin-top:var(--el-4);border-top:1px solid var(--el-line);
    border-bottom:1px solid var(--el-line)}
.elp-acc-deliv .el-acc-a-in p{margin:0 0 10px;font-size:14px;line-height:1.65}
.elp-acc-deliv .el-acc-a-in p:last-child{margin-bottom:0}
.elp-acc-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.elp-acc-links a{font-size:13.5px;font-weight:600;color:var(--el-gold);text-decoration:none;
    border-bottom:1px solid rgba(168,129,63,.4);padding-bottom:2px}
.elp-acc-links a:hover{color:var(--el-green);border-bottom-color:var(--el-green)}

/* Tunnel de commande : note discrète, jamais un second montant */
.el-checkout-note td{padding:14px 0 4px!important;border-top:1px solid var(--el-line)!important}
.el-checkout-note .el-deliv li{font-size:13px}

/* ---------------------------------------------------------------------
   15.3 · PAGES LIVRAISON / RETOURS
   Colonne de lecture étroite, pas de carte, pas de fond alterné : une
   page de conditions se lit, elle ne se vend pas.
   --------------------------------------------------------------------- */
.el-legal{background:var(--el-paper);padding:var(--el-7) 0 var(--el-8)}
.el-legal-head{max-width:62ch;margin-bottom:var(--el-6)}
.el-legal-head h1{font-family:var(--el-font-serif);font-size:var(--el-fs-h2);
    font-weight:600;line-height:1.08;letter-spacing:-.012em;color:var(--el-green);margin:0}
.el-legal-head p{margin:14px 0 0;font-family:var(--el-font-sans);
    font-size:var(--el-fs-body);line-height:1.7;color:var(--el-muted)}
.el-legal-intro{max-width:66ch;margin-bottom:var(--el-5);
    font-size:var(--el-fs-body);line-height:1.75;color:var(--el-muted)}
.el-legal-sec{max-width:66ch;padding:var(--el-4) 0;border-top:1px solid var(--el-line)}
.el-legal-sec h2{font-family:var(--el-font-sans);font-size:var(--el-fs-h3);
    font-weight:600;line-height:1.3;letter-spacing:0;color:var(--el-ink);margin:0 0 10px}
.el-legal-sec p{margin:0 0 10px;font-size:var(--el-fs-body);line-height:1.75;color:var(--el-muted)}
.el-legal-sec p:last-child{margin-bottom:0}
.el-legal-sec strong{color:var(--el-ink);font-weight:600}
.el-legal-list{margin:0 0 10px;padding-left:18px}
.el-legal-list li{font-size:var(--el-fs-body);line-height:1.7;color:var(--el-muted);margin-bottom:5px}
.el-legal-cta{margin-top:var(--el-6);padding-top:var(--el-4);border-top:1px solid var(--el-line);
    max-width:66ch}
.el-legal-cta p{margin:0 0 14px;font-size:var(--el-fs-body);color:var(--el-ink);font-weight:600}
.el-legal-more{margin-top:var(--el-5)}
.el-legal-more a{font-size:14px;font-weight:600;color:var(--el-gold);text-decoration:none;
    border-bottom:1px solid rgba(168,129,63,.4);padding-bottom:2px}
@media(max-width:720px){
    .el-legal{padding:var(--el-6) 0 var(--el-7)}
    .el-legal-head{margin-bottom:var(--el-5)}
    .el-legal-sec{padding:20px 0}
}

/* =====================================================================
   15.4 · TYPOGRAPHIE — VARIABLES GLOBALES
   ---------------------------------------------------------------------
   Les tailles étaient recopiées à la main d'un composant à l'autre
   (19px ici, 18px là, 20px ailleurs) : d'où une échelle floue et des
   valeurs arbitraires. Une seule échelle, déclarée ici.
   ===================================================================== */
:root{
    --el-font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
    --el-font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

    /* Desktop : H1 58-68 · H2 36-44 · H3 22-28 · corps 15-17 */
    --el-fs-h1:clamp(36px,4.1vw,64px);
    --el-fs-h2:clamp(28px,2.7vw,42px);
    --el-fs-h2-alt:clamp(26px,2.2vw,36px);   /* sections secondaires */
    --el-fs-h3:clamp(19px,1.5vw,26px);
    --el-fs-h4:clamp(17px,1.15vw,20px);
    --el-fs-body:clamp(15px,1.05vw,17px);
    --el-fs-nav:13.5px;
    --el-fs-btn:14.5px;
    --el-fs-micro:12.5px;
}
@media(max-width:720px){
    :root{
        --el-fs-h1:clamp(36px,8.6vw,42px);
        --el-fs-h2:clamp(28px,6.4vw,32px);
        --el-fs-h2-alt:clamp(24px,5.6vw,28px);
        --el-fs-h3:clamp(19px,4.6vw,23px);
        --el-fs-body:clamp(15px,3.9vw,16px);
        --el-fs-micro:12.5px;
    }
}

/* =====================================================================
   15.5 · LA SERIF REDEVIENT UNE EXCEPTION
   ---------------------------------------------------------------------
   La règle fondatrice `h1,h2,h3,h4{font-family:'Playfair Display'}`
   mettait la serif sur TOUS les niveaux de titre, jusqu'aux h3 de
   vignettes de 150 px. Résultat : une page où tout se ressemble, la
   signature la plus reconnaissable d'un gabarit généré.

   La serif est réservée à ce qui porte la voix éditoriale :
     · H1 (hero, fiche produit, pages de conditions) ;
     · H2 de section ;
     · citations.
   Tout le reste — navigation, boutons, noms de produits, prix, cartes,
   FAQ, réassurances, footer, microtextes — passe en sans-serif.
   ===================================================================== */
h3,h4,h5,h6{font-family:var(--el-font-sans);letter-spacing:0}
h1,h2{font-family:var(--el-font-serif)}
body{font-family:var(--el-font-sans)}

/* Petites cartes et vignettes : plus jamais de serif décorative. */
.el-guide-card h3,
.el-need-name,
.el-assur-t,
.el-edito-t,
.elp-assur-t,
.elp-use-body h3,
.elp-use-body h4,
.elp-fit-card h3,
.elp-fit-col h4,
.zm-choose-card h4,
.vz-cat-name,
.el-pcard-title,
.vz-pcard-title{font-family:var(--el-font-sans)!important}

/* « Quel coussin choisir ? » — titre principal en serif, intitulés des
   choix en sans-serif medium, descriptions en sans-serif normale. */
.el-guide-card h3{font-weight:500;font-size:var(--el-fs-h4);line-height:1.3;letter-spacing:0}
.el-guide-card p{font-family:var(--el-font-sans);font-weight:400}

/* Bénéfices éditoriaux : intitulé fonctionnel, donc sans-serif medium.
   Le contraste avec le H2 serif de la section fait le travail. */
.el-edito-t{font-weight:600;font-size:clamp(17px,1.35vw,20px);line-height:1.3;
    letter-spacing:0;color:var(--el-ink)}

/* Vignettes de catégorie et libellés de réassurance */
.el-need-name{font-weight:600;font-size:14.5px;letter-spacing:0}
.el-assur-t,.elp-assur-t{font-weight:600;letter-spacing:0}

/* Fiche produit : les titres de blocs descendent en sans-serif. */
.elp-use-body h3,.elp-use-body h4,.elp-fit-card h3,.elp-fit-col h4{
    font-weight:600;letter-spacing:0}

/* Carte produit : commerciale, pas éditoriale. */
.el-pcard-title{font-weight:600;font-size:14.5px;letter-spacing:0;line-height:1.4}
.el-price .now{font-family:var(--el-font-sans);font-weight:700;letter-spacing:-.01em}
.el-price .was{font-family:var(--el-font-sans)}

/* Navigation, boutons, FAQ, microtextes */
.vz-nav-links a{font-size:var(--el-fs-nav)}
.vz-btn,.el-btn-label{font-family:var(--el-font-sans);font-size:var(--el-fs-btn);font-weight:600}
.el-acc-q{font-family:var(--el-font-sans);font-weight:600;letter-spacing:0}
.el-acc-a-in{font-family:var(--el-font-sans)}

/* Footer : wordmark distinct, titres de colonnes lisibles.
   L'ancien réglage (11,5 px, 700, +0,14 em, capitales) tombait exactement
   dans le « texte minuscule et trop espacé » relevé en revue. */
.vz-facc>summary{font-family:var(--el-font-sans);font-size:13.5px;font-weight:600;
    letter-spacing:.01em;text-transform:none;color:#fff}
.vz-facc ul a{font-family:var(--el-font-sans);font-weight:400}
.vz-footer .el-fassur-in{font-family:var(--el-font-sans);font-weight:500;letter-spacing:0}
.vz-footer-bottom-inner{font-family:var(--el-font-sans);font-size:var(--el-fs-micro)}
@media(max-width:900px){
    .vz-facc>summary{font-size:13.5px;letter-spacing:.01em;text-transform:none}
}

/* =====================================================================
   15.6 · HIÉRARCHIE NON UNIFORME
   ---------------------------------------------------------------------
   Toutes les sections partageaient exactement `var(--el-h2)`, toutes
   les colonnes éditoriales faisaient la même largeur, et les titres
   tombaient systématiquement sur deux lignes. On casse la régularité :
   les sections de tête gardent le grand H2, les sections de service
   descendent d'un cran.
   ===================================================================== */
.el-hero h1{font-size:var(--el-fs-h1);letter-spacing:-.02em;line-height:1.04}
.el-edito-aside h2,.el-why h2{font-size:var(--el-fs-h2)}
.el-head-row h2,.el-guide-aside h2{font-size:var(--el-fs-h2-alt)}
.el-faq-aside h2,.el-cta h2{font-size:clamp(24px,2vw,32px)}
.el-head h2{font-size:var(--el-fs-h2-alt)}
.elp-box h1{font-size:clamp(26px,2.6vw,38px)}

/* Aucun letter-spacing positif sur les titres : le seul réglage admis est
   la correction optique négative des grandes tailles. */
h1,h2{letter-spacing:-.014em}
.el-hero h1{letter-spacing:-.02em}

/* Le corps de texte ne descend jamais sous le seuil de lisibilité et
   n'utilise plus de gris trop clair. */
.el-hero-lede,.el-head p,.el-guide-aside p,.el-faq-aside p{font-size:var(--el-fs-body)}
.el-acc-a-in{font-size:15px;line-height:1.72}
.el-legal-sec p,.el-legal-list li{color:#54635C}

/* ---------------------------------------------------------------------
   15.7 · GARDE-FOUS
   --------------------------------------------------------------------- */
.el-legal-sec,.el-legal-head,.el-legal-intro{overflow-wrap:break-word}
.el-deliv li,.elp-acc-links a{overflow-wrap:break-word}
@media(prefers-reduced-motion:reduce){
    .el-deliv-more,.elp-acc-links a{transition:none!important}
}

/* ---------------------------------------------------------------------
   15.8 · PAGES WOOCOMMERCE GÉNÉRIQUES (panier, commande, compte)
   L'ancien habillage posait une grosse carte blanche bordée au milieu de
   la page, avec un sur-titre « ZenMart » resté de l'avant-rebrand.
   --------------------------------------------------------------------- */
.el-wcpage{background:var(--el-paper);padding:var(--el-6) 0 var(--el-8)}
.el-wcpage-title{font-family:var(--el-font-serif);font-size:var(--el-fs-h2-alt);
    font-weight:600;line-height:1.1;letter-spacing:-.012em;color:var(--el-green);
    margin:0 0 var(--el-5)}
.el-wcpage-body{max-width:100%}
.el-wcpage-body .woocommerce{font-family:var(--el-font-sans)}
@media(max-width:720px){ .el-wcpage{padding:var(--el-5) 0 var(--el-7)} }

/* Le résumé de commande hérite de la typographie du thème. */
.el-checkout-note .el-deliv{margin-top:4px}

/* ---------------------------------------------------------------------
   15.9 · GABARIT DE PAGE
   Le thème n'avait pas de page.php : panier, commande et pages de contenu
   retombaient sur index.php et sortaient vides.
   --------------------------------------------------------------------- */
.el-page{background:var(--el-paper);padding:var(--el-6) 0 var(--el-8)}
.el-page-head h1{font-family:var(--el-font-serif);font-size:var(--el-fs-h2-alt);
    font-weight:600;line-height:1.1;letter-spacing:-.012em;color:var(--el-green);
    margin:0 0 var(--el-5)}
.el-page-body{font-family:var(--el-font-sans);font-size:var(--el-fs-body);
    line-height:1.75;color:var(--el-muted)}
.el-page-body h2{font-size:var(--el-fs-h3);color:var(--el-ink);margin:var(--el-5) 0 10px}
.el-page-body h3{font-size:var(--el-fs-h4);color:var(--el-ink);margin:var(--el-4) 0 8px}
.el-page-body p{margin:0 0 12px}
.el-page-body a{color:var(--el-gold)}
.el-page--wc .el-page-body{color:var(--el-ink)}
@media(max-width:720px){ .el-page{padding:var(--el-5) 0 var(--el-7)} }