/* ==========================================================================
   Nahla DZ  ·  Miel de montagne (Chlef & Tissemsilt)
   Direction : clair & aéré, vert montagne + mauve fleurs + or miel minimal.
   Propriétés logiques -> RTL (arabe) & LTR (fr/en). v8.
   ========================================================================== */

:root{
  --white:#FFFFFF; --snow:#F7F9F5; --mist:#EDF2EC; --mist-2:#E2EAE0;
  --pine:#1E3B2C; --green:#2F6047; --green-lite:#5C8A6E; --sage:#8AA894;
  --mauve:#8C6DA8; --mauve-lite:#CBB6DE;
  --honey:#E3A317; --honey-deep:#C1870C;
  --red:#C1272D;
  --ink:#1B2A20; --ink-2:#2A3E31;
  --ink-70:rgba(27,42,32,.72); --ink-55:rgba(27,42,32,.55); --ink-40:rgba(27,42,32,.40);
  --cream-70:rgba(247,249,245,.78); --cream-45:rgba(247,249,245,.5);
  --line:rgba(30,59,44,.12); --line-2:rgba(30,59,44,.08);

  --f-ar-display:"Cairo","Tajawal",system-ui,sans-serif;
  --f-ar-body:"Tajawal","Cairo",system-ui,sans-serif;
  --f-lat-display:"Sora",system-ui,sans-serif;
  --f-lat-body:"Inter",system-ui,-apple-system,sans-serif;
  --f-display:var(--f-ar-display); --f-body:var(--f-ar-body);

  --radius:14px; --radius-lg:22px; --radius-xl:30px;
  --shadow-sm:0 6px 20px -12px rgba(27,42,32,.25);
  --shadow:0 20px 50px -30px rgba(27,42,32,.35);
  --shadow-lg:0 30px 70px -36px rgba(27,42,32,.4);
  --maxw:1200px; --sp:clamp(2.6rem,5.2vw,4.6rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[lang="fr"],html[lang="en"]{ --f-display:var(--f-lat-display); --f-body:var(--f-lat-body); }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ margin:0; font-family:var(--f-body); background:var(--white); color:var(--ink);
  line-height:1.6; font-size:16px; overflow-x:clip; max-width:100%; }
img,svg,video{ max-width:100%; }
.hero-inner>*,.story-grid>*,.logi-grid>*,.contact-grid>*,.terroir-grid>*,.product-body,.trust-item{ min-width:0; }
img{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.15; margin:0; letter-spacing:-.01em; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ letter-spacing:normal; }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.wrap{ width:min(var(--maxw),92vw); margin-inline:auto; }
.eyebrow{ font-family:var(--f-lat-body); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:.72rem; color:var(--green); display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow::before{ content:""; width:22px;height:2px; background:var(--mauve); border-radius:2px; }
html[lang="ar"] .eyebrow{ letter-spacing:normal; text-transform:none; font-family:var(--f-ar-body); font-size:.95rem; }

/* ---- Emplacements photo (remplacés par tes fichiers) -------------------- */
.photo{ position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--mist),var(--mist-2)); display:grid; place-items:center; }
.photo>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.photo .ph-in{ position:relative; z-index:1; text-align:center; color:var(--sage); padding:1rem; pointer-events:none; }
.photo .ph-in svg{ width:32px;height:32px; opacity:.7; }
.photo .ph-in span{ display:block; font-size:.72rem; margin-top:.45rem; color:var(--ink-40); letter-spacing:.02em; }

/* ---- Header ------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--white) 88%,transparent);
  backdrop-filter:saturate(1.3) blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:1.1rem; padding-block:.6rem; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand .logo{ width:70px;height:70px; flex:0 0 auto; }
.brand .brand-txt b{ font-family:var(--f-display); font-size:1.28rem; font-weight:700; color:var(--pine); display:block; line-height:1; }
.brand .brand-txt span{ display:block; font-family:var(--f-lat-body); font-weight:600; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-55); margin-top:.2rem; }
html[lang="ar"] .brand .brand-txt span{ letter-spacing:normal; text-transform:none; font-size:.76rem; font-family:var(--f-ar-body); }

.nav-links{ display:flex; gap:1.2rem; margin-inline-start:auto; align-items:center; }
.nav-links a{ font-weight:600; font-size:.92rem; color:var(--ink-70); transition:color .2s; }
.nav-links a:hover{ color:var(--green); }
.lang-switch{ display:flex; gap:.15rem; background:var(--mist); border-radius:999px; padding:.2rem; }
.lang-switch a{ font-size:.74rem; font-weight:700; padding:.26rem .6rem; border-radius:999px; color:var(--ink-55); }
.lang-switch a[aria-current="true"]{ background:var(--green); color:#fff; }
.nav-cta{ display:inline-flex; align-items:center; gap:.45rem; background:var(--honey); color:#3A2A05;
  padding:.56rem 1.1rem; border-radius:999px; font-weight:700; font-size:.88rem; transition:transform .2s var(--ease),background .2s,color .2s; }
.nav-cta:hover{ transform:translateY(-2px); background:var(--honey-deep); color:#fff; }
.nav-toggle{ display:none; }

/* ---- Buttons ------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem;
  border-radius:999px; font-weight:700; font-size:.95rem; font-family:var(--f-body);
  transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s; white-space:nowrap; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:0 12px 26px -14px rgba(47,96,71,.9); }
.btn-primary:hover{ transform:translateY(-2px); background:var(--pine); }
.btn-ghost{ background:transparent; color:var(--pine); border:1.5px solid var(--line); }
.btn-ghost:hover{ background:var(--mist); border-color:var(--green); color:var(--green); }
.btn-honey{ background:var(--honey); color:#3A2A05; box-shadow:0 12px 26px -14px rgba(227,163,23,.9); }
.btn-honey:hover{ transform:translateY(-2px); background:var(--honey-deep); color:#fff; }
.btn-light{ background:#fff; color:var(--pine); }
.btn-light:hover{ transform:translateY(-2px); }
.btn-block{ width:100%; }

/* ---- Hero --------------------------------------------------------------- */
.hero{ position:relative; background:
  radial-gradient(60% 60% at 88% 8%,rgba(140,109,168,.10),transparent 60%),
  radial-gradient(50% 60% at 4% 100%,rgba(47,96,71,.08),transparent 60%),
  var(--snow); overflow:hidden; }
.hero-inner{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center; padding-block:clamp(2.2rem,4.4vw,4rem); }
.hero-badge{ display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line);
  color:var(--green); padding:.4rem .9rem; border-radius:999px; font-weight:700; font-size:.78rem; box-shadow:var(--shadow-sm); }
.hero-badge b{ color:var(--mauve); }
.hero h1{ font-size:clamp(2.1rem,4.8vw,3.6rem); margin-block:1rem .6rem; color:var(--pine); }
.hero h1 .accent{ color:var(--green); }
.hero .lede{ font-size:clamp(1rem,1.25vw,1.14rem); color:var(--ink-70); max-width:46ch; }
.hero-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.hero-proof{ display:flex; gap:1.8rem; margin-top:1.8rem; flex-wrap:wrap; }
.hero-proof div{ display:flex; flex-direction:column; }
.hero-proof b{ font-family:var(--f-display); font-size:1.6rem; color:var(--green); line-height:1; }
.hero-proof span{ font-size:.78rem; color:var(--ink-55); margin-top:.25rem; }
.hero-visual{ position:relative; }
.hero-photo{ aspect-ratio:4/5; box-shadow:var(--shadow-lg); }
.hero-visual .float-badge{ position:absolute; inset-block-end:-14px; inset-inline-start:-14px; z-index:5;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:.7rem 1rem;
  display:flex; align-items:center; gap:.6rem; }
.hero-visual .float-badge .logo{ width:34px;height:34px; }
.hero-visual .float-badge b{ font-family:var(--f-display); color:var(--pine); font-size:.95rem; display:block; line-height:1.1; }
.hero-visual .float-badge span{ font-size:.72rem; color:var(--ink-55); }

/* ---- Trust strip -------------------------------------------------------- */
.trust{ background:var(--pine); color:#fff; }
.trust-inner{ display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; padding-block:1rem; }
.trust-item{ display:flex; align-items:center; gap:.55rem; justify-content:center; text-align:center; font-weight:600; font-size:.86rem; }
.trust-item svg{ width:22px;height:22px; color:var(--mauve-lite); flex:0 0 auto; }
.trust-item:not(:last-child){ border-inline-end:1px solid rgba(255,255,255,.12); }

/* ---- Sections ----------------------------------------------------------- */
section{ padding-block:var(--sp); }
.section-head{ max-width:58ch; margin-bottom:2rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin-top:.6rem; color:var(--pine); }
.section-head p{ color:var(--ink-70); margin-top:.6rem; font-size:1.05rem; }

/* ---- Story / À propos --------------------------------------------------- */
.story{ background:var(--white); }
.story-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center; }
.story-portrait{ aspect-ratio:4/5; }
.story-copy .kicker{ color:var(--mauve); font-weight:700; font-size:.9rem; }
.story-copy h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin:.4rem 0 1rem; color:var(--pine); }
.story-copy p{ color:var(--ink-70); margin:0 0 1rem; }
.story-sign{ display:flex; align-items:center; gap:.75rem; margin:1.3rem 0; padding-top:1.1rem; border-top:1px solid var(--line); }
.story-sign .mk{ width:40px;height:40px;border-radius:50%; background:var(--green); color:#fff;
  display:grid;place-items:center; font-family:var(--f-display); font-weight:700; flex:0 0 auto; }
.story-sign b{ color:var(--pine); font-size:1.05rem; }
.story-sign span{ color:var(--ink-55); font-size:.85rem; }
/* Diplômes & récompenses */
.awards{ margin-top:1.4rem; }
.awards-title{ font-family:var(--f-lat-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.7rem; color:var(--ink-55); margin-bottom:.7rem; }
html[lang="ar"] .awards-title{ letter-spacing:normal; text-transform:none; font-family:var(--f-ar-body); font-size:.9rem; }
.awards-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.award{ display:flex; align-items:center; gap:.5rem; background:var(--snow); border:1px solid var(--line);
  border-radius:999px; padding:.4rem .9rem; font-size:.82rem; font-weight:600; color:var(--ink-70); }
.award svg{ width:18px;height:18px; color:var(--honey-deep); flex:0 0 auto; }
.award-photo{ width:66px;height:66px; border-radius:12px; flex:0 0 auto; }

.story-points{ display:grid; gap:1rem; margin-top:1.2rem; }
.story-point{ display:flex; gap:.8rem; align-items:flex-start; }
.story-point .mk{ width:32px;height:32px;flex:0 0 auto; border-radius:50%; background:var(--mist);
  color:var(--green); display:grid;place-items:center; font-family:var(--f-display); font-weight:700; font-size:.9rem; }
.story-point h4{ font-size:1.02rem; color:var(--pine); }
.story-point p{ margin:.15rem 0 0; color:var(--ink-70); font-size:.92rem; }

/* ---- Terroir (vert clair) ----------------------------------------------- */
.terroir{ background:linear-gradient(180deg,var(--mist),var(--snow)); }
.terroir-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:center; }
.terroir h2{ font-size:clamp(1.7rem,3.3vw,2.5rem); margin-top:.5rem; color:var(--pine); }
.terroir .lede{ color:var(--ink-70); margin:.8rem 0 1.4rem; max-width:54ch; font-size:1.02rem; }
.terroir-pillars{ display:grid; gap:1.1rem; }
.terroir-pillar{ display:flex; gap:.85rem; align-items:flex-start; }
.terroir-pillar .pic{ width:40px;height:40px;border-radius:12px; flex:0 0 auto; background:#fff; border:1px solid var(--line);
  display:grid;place-items:center; color:var(--green); }
.terroir-pillar .pic svg{ width:22px;height:22px; }
.terroir-pillar h4{ font-size:1.06rem; color:var(--pine); }
.terroir-pillar p{ margin:.2rem 0 0; color:var(--ink-70); font-size:.92rem; }
.terroir-photo{ aspect-ratio:1/1; }
.terroir-photo .tag-origin{ position:absolute; inset-block-end:14px; inset-inline-start:14px; z-index:5;
  background:rgba(255,255,255,.94); border-radius:999px; padding:.4rem .9rem; font-weight:700; font-size:.82rem; color:var(--pine);
  display:flex; align-items:center; gap:.45rem; box-shadow:var(--shadow-sm); }
.terroir-photo .tag-origin svg{ width:16px;height:16px; color:var(--red); }

/* ---- Products ----------------------------------------------------------- */
.products{ background:var(--white); }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.product{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s; }
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.product-photo{ aspect-ratio:4/3; border-radius:0; }
.product-photo .mini-emblem{ position:absolute; inset-block-start:10px; inset-inline-start:10px; z-index:4;
  width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.9); display:grid;place-items:center; box-shadow:var(--shadow-sm); }
.product-photo .mini-emblem svg{ width:22px;height:22px; color:var(--green); }
.product-badge{ position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:4;
  background:var(--mauve); color:#fff; font-size:.68rem; font-weight:700; padding:.28rem .6rem; border-radius:999px; }
.product-badge.wax{ background:var(--honey); color:#3A2A05; }
.product-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.product-body h3{ font-size:1.25rem; color:var(--pine); }
.product-sub{ display:block; font-size:.78rem; color:var(--ink-55); margin-top:.15rem; }
.product-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.6rem 0 .7rem; }
.tag{ font-size:.68rem; font-weight:700; color:var(--mauve); background:rgba(140,109,168,.1); padding:.16rem .55rem; border-radius:999px; }
.product-body>p{ color:var(--ink-70); font-size:.9rem; margin:0 0 1rem; }
.price-block{ margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line); }
.price-main{ display:flex; align-items:baseline; gap:.4rem; }
.price{ font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:var(--honey-deep); }
.price small{ font-size:.78rem; font-weight:600; color:var(--ink-55); font-family:var(--f-body); }
.price-alt{ font-size:.8rem; color:var(--ink-55); margin-top:.2rem; }
.product .btn{ margin-top:1rem; }

/* ---- Gallery ------------------------------------------------------------ */
.gallery{ background:var(--snow); }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:1rem; }
.gallery-grid .photo{ border-radius:var(--radius); height:100%; }
.gallery-grid .g-tall{ grid-row:span 2; }
.gallery-grid .g-wide{ grid-column:span 2; }

/* ---- Benefits ----------------------------------------------------------- */
.benefits{ background:var(--white); }
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.benefit{ background:var(--snow); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.3rem;
  transition:transform .25s,box-shadow .25s; }
.benefit:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.benefit .ic{ width:44px;height:44px;border-radius:12px; background:rgba(47,96,71,.1); display:grid;place-items:center; color:var(--green); }
.benefit .ic svg{ width:24px;height:24px; }
.benefit h4{ font-size:1.02rem; margin:.7rem 0 .25rem; color:var(--pine); }
.benefit p{ font-size:.85rem; color:var(--ink-70); margin:0; }

/* ---- Wholesale (bande verte) -------------------------------------------- */
.wholesale{ background:var(--white); }
.wholesale .panel{ background:linear-gradient(135deg,var(--green),var(--pine)); color:#fff; border-radius:var(--radius-xl);
  padding:clamp(1.8rem,3.5vw,2.8rem); display:grid; grid-template-columns:1.5fr .5fr; gap:1.6rem; align-items:center;
  position:relative; overflow:hidden; box-shadow:var(--shadow); }
.wholesale .panel::after{ content:""; position:absolute; inset-block:0; inset-inline-end:-30px; width:220px; opacity:.16;
  background:radial-gradient(circle at 70% 50%,var(--mauve-lite),transparent 60%); }
.wholesale .panel>*{ position:relative; z-index:2; }
.wholesale h2{ font-size:clamp(1.5rem,2.8vw,2.1rem); color:#fff; }
.wholesale p{ opacity:.9; margin:.6rem 0 0; font-size:.98rem; }

/* ---- Logistics ---------------------------------------------------------- */
.logistics{ background:var(--snow); }
.logi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.logi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.7rem; box-shadow:var(--shadow-sm); }
.logi-card .top{ display:flex; align-items:center; gap:.7rem; }
.logi-card .top .ic{ width:40px;height:40px;border-radius:12px; background:rgba(47,96,71,.1); display:grid;place-items:center; color:var(--green); }
.logi-card .top .ic svg{ width:22px;height:22px; }
.logi-card h3{ font-size:1.25rem; color:var(--pine); }
.logi-list{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.6rem; }
.logi-list li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink-70); font-size:.92rem; }
.logi-list li svg{ width:18px;height:18px; color:var(--green); flex:0 0 auto; margin-top:.15rem; }
.pay-badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.pay-badge{ font-size:.78rem; font-weight:700; background:var(--snow); border:1px solid var(--line); border-radius:999px; padding:.42rem .8rem; color:var(--ink-70); }
.pay-badge.soon{ opacity:.6; }
.logi-highlight{ margin-top:1.1rem; padding:.9rem 1rem; border-radius:var(--radius); background:rgba(140,109,168,.1);
  border:1px solid rgba(140,109,168,.25); font-size:.9rem; color:var(--ink-70); display:flex; gap:.6rem; align-items:flex-start; }
.logi-highlight svg{ width:20px;height:20px; color:var(--mauve); flex:0 0 auto; }
.logi-highlight b{ color:var(--pine); }

/* ---- Steps -------------------------------------------------------------- */
.steps{ background:var(--white); }
.step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.step{ background:var(--snow); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; }
.step .num{ width:40px;height:40px;border-radius:50%; background:var(--green); color:#fff; display:grid;place-items:center;
  font-family:var(--f-display); font-weight:700; }
.step h4{ font-size:1.1rem; margin:.7rem 0 .3rem; color:var(--pine); }
.step p{ color:var(--ink-70); margin:0; font-size:.92rem; }

/* ---- Contact ------------------------------------------------------------ */
.contact{ background:var(--snow); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:2rem; align-items:start; }
.contact-intro h2{ font-size:clamp(1.6rem,3vw,2.3rem); color:var(--pine); }
.contact-intro p{ color:var(--ink-70); margin:.7rem 0 0; }
.contact-alt{ display:grid; gap:.55rem; margin-top:1.2rem; }
.contact-alt a{ display:inline-flex; align-items:center; gap:.6rem; color:var(--ink-70); font-weight:600; font-size:.95rem; }
.contact-alt a:hover{ color:var(--green); }
.contact-alt svg{ width:20px;height:20px;color:var(--green);flex:0 0 auto; }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.7rem; box-shadow:var(--shadow-sm); }
.form-note{ margin-top:.9rem; padding:.75rem .95rem; border-radius:12px; font-size:.9rem; display:none; }
.form-note.ok{ display:block; background:rgba(47,96,71,.1); color:var(--green); border:1px solid rgba(47,96,71,.3); }
.form-note.err{ display:block; background:rgba(193,39,45,.08); color:var(--red); border:1px solid rgba(193,39,45,.3); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer{ background:var(--pine); color:#fff; padding-block:2.8rem 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:1.8rem; }
.footer-grid .brand .brand-txt b{ color:#fff; }
.footer-grid .brand .brand-txt span{ color:var(--cream-70); }
.footer-grid>div>p{ color:var(--cream-70); font-size:.9rem; max-width:34ch; margin-top:1rem; }
.footer-col h4{ color:var(--mauve-lite); font-size:.95rem; margin-bottom:.7rem; }
.footer-col a,.footer-col li{ display:flex; align-items:center; gap:.55rem; color:var(--cream-70); font-size:.9rem; padding-block:.3rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col a:hover{ color:#fff; }
.footer-col svg{ width:17px;height:17px;color:var(--mauve-lite);flex:0 0 auto; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); margin-top:2rem; padding-top:1.2rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--cream-45); font-size:.82rem; }

/* ---- Flottant WhatsApp -------------------------------------------------- */
.wa-float{ position:fixed; inset-block-end:18px; inset-inline-end:18px; z-index:60; width:52px;height:52px;border-radius:50%;
  background:#25D366; display:grid;place-items:center; box-shadow:0 12px 28px -10px rgba(37,211,102,.7); transition:transform .2s; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:27px;height:27px;color:#fff; }

/* ---- Modale ------------------------------------------------------------- */
.modal-overlay{ position:fixed; inset:0; z-index:100; background:rgba(20,30,24,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:1.2rem; }
.modal-overlay.open{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius-lg); width:min(500px,100%); max-height:92vh; overflow:auto;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5); animation:pop .3s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.modal-head{ background:linear-gradient(135deg,var(--green),var(--pine)); color:#fff; padding:1.2rem 1.4rem; position:relative; }
.modal-head h3{ color:#fff; font-size:1.25rem; }
.modal-head p{ color:var(--cream-70); margin:.25rem 0 0; font-size:.86rem; }
.modal-close{ position:absolute; inset-block-start:.85rem; inset-inline-end:.85rem; width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; font-size:1.15rem; display:grid;place-items:center; }
.modal-body{ padding:1.3rem 1.4rem 1.5rem; }
.field{ margin-bottom:.85rem; }
.field label{ display:block; font-weight:700; font-size:.86rem; margin-bottom:.35rem; }
.field input,.field select,.field textarea{ width:100%; padding:.66rem .85rem; border-radius:12px; border:1px solid var(--line);
  background:var(--snow); font-family:inherit; font-size:.95rem; color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--green); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.order-summary{ background:var(--mist); border-radius:12px; padding:.75rem .9rem; margin:.3rem 0 1rem;
  font-size:.88rem; display:flex; justify-content:space-between; align-items:center; }
.order-summary b{ color:var(--honey-deep); font-family:var(--f-display); font-size:1.1rem; }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ max-width:420px; margin-inline:auto; }
  .hero-copy{ text-align:center; } .hero-copy .lede{ margin-inline:auto; }
  .hero-actions,.hero-proof{ justify-content:center; }
  .story-grid,.logi-grid,.wholesale .panel,.contact-grid,.terroir-grid{ grid-template-columns:1fr; }
  .story-portrait,.terroir-photo{ max-width:460px; margin-inline:auto; width:100%; }
  .product-grid,.step-grid{ grid-template-columns:1fr 1fr; }
  .benefit-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-inner{ grid-template-columns:1fr 1fr 1fr; gap:.9rem; }
  .trust-item{ border:0 !important; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  :root{ --sp:2.4rem; }
  .wrap{ width:min(var(--maxw),94vw); }
  .nav{ gap:.45rem; }
  .brand .brand-txt{ display:none; }
  .lang-switch{ margin-inline-start:auto; }
  .lang-switch a{ padding:.22rem .5rem; font-size:.72rem; }
  .nav-cta{ padding:.5rem .8rem; font-size:.8rem; }
  .nav-cta svg{ display:none; }
  .nav-links{ position:fixed; inset-block-start:60px; inset-inline:0; margin-inline-start:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:.6rem 6vw 1.2rem; box-shadow:var(--shadow);
    transform:translateY(-160%); transition:transform .3s var(--ease); border-bottom:1px solid var(--line);
    max-height:calc(100vh - 60px); overflow:auto; }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding-block:.7rem; width:100%; border-bottom:1px solid var(--line-2); font-size:1rem; }
  .nav-toggle{ display:grid; place-items:center; width:40px;height:40px; border-radius:12px; background:var(--mist); }
  .nav-toggle svg{ width:22px;height:22px; }
  .hero h1{ font-size:clamp(1.9rem,8vw,2.5rem); }
  .product-grid,.step-grid,.benefit-grid{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr 1fr; gap:.6rem; } .benefit{ padding:.9rem; }
  .benefit .ic{ width:36px;height:36px; } .benefit h4{ font-size:.92rem; } .benefit p{ font-size:.78rem; }
  .gallery-grid{ grid-auto-rows:140px; }
  .btn{ white-space:normal; }
  .trust-inner{ grid-template-columns:1fr 1fr; gap:.7rem .9rem; }
  .trust-item{ justify-content:flex-start; font-size:.82rem; }
  .section-head{ margin-bottom:1.5rem; }
  .field input,.field select,.field textarea{ font-size:16px; }
  .field-row{ grid-template-columns:1fr; }
  .modal-overlay{ align-items:flex-end; padding:0; }
  .modal{ width:100%; max-width:none; border-radius:16px 16px 0 0; animation:sheet .3s var(--ease); }
  .footer-bottom{ flex-direction:column; gap:.4rem; }
  .wa-float{ width:50px;height:50px; inset-block-end:14px; inset-inline-end:14px; }
}
@keyframes sheet{ from{ transform:translateY(100%) } to{ transform:none } }
@media (max-width:400px){ .hero-actions{ flex-direction:column; } .hero-actions .btn{ width:100%; }
  .gallery-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---- Correctifs icônes logistique ---- */
.logi-list li::before{ content:""; width:6px;height:6px;border-radius:50%; background:var(--green); flex:0 0 auto; margin-top:.55rem; }
.logi-card .top>svg{ width:26px;height:26px; color:var(--green); flex:0 0 auto; }