/* ============================================================
   WIIN — shared stylesheet (all pages link this file)
   Layout inspired by exploreloop.com, recoloured to green.
   Logical properties only — the site flips to RTL for Arabic.
   ============================================================ */

/* ============================== TOKENS ============================== */
:root{
  --green:#49A839;
  --green-deep:#2F7A24;
  --green-dark:#1C4A16;
  --green-wash:#F2F8F0;
  --green-line:#DCEAD6;
  --yellow:#F2B705;

  --ink:#111A0E;
  --ink-2:#3B4636;
  --ink-3:#6B7566;
  --white:#FFFFFF;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);

  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
  --hdr-h:74px;

  --z-sticky:100; --z-backdrop:200; --z-modal:210; --z-lang:120;
}
html[lang="ar"]{ --font-display:"IBM Plex Sans Arabic",sans-serif; --font-body:"IBM Plex Sans Arabic",sans-serif; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-block-start:var(--hdr-h);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.02;letter-spacing:-.03em;text-wrap:balance;margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.35}
p{text-wrap:pretty;margin:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
::selection{background:var(--green);color:var(--white)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{scroll-margin-top:calc(var(--hdr-h) + 12px)}
.sect{padding-block:clamp(64px,9vw,128px)}
.sect-tight{padding-block:clamp(48px,6vw,88px)}

.h2{font-size:clamp(2rem,5.2vw,3.5rem)}
.lede{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--ink-2);max-width:62ch}
.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:700;margin-bottom:14px}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none}

/* ============================== REVEAL ============================== */
html.js [data-rv]{opacity:0;transform:translateY(22px)}
html.js [data-rv].in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  html.js [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================== HEADER (always white) ============================== */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-sticky);
  min-height:var(--hdr-h);
  display:flex;align-items:center;gap:20px;
  padding:10px var(--pad);
  background:var(--white);box-shadow:0 1px 0 var(--green-line);
}
.hdr-logo{height:36px;width:auto}
.nav{display:flex;gap:2px;margin-inline-start:auto;align-items:center}
.nav a{
  position:relative;padding:9px 13px;border-radius:999px;font-size:.93rem;font-weight:600;
  color:var(--ink-2);transition:color .2s var(--ease-out),background .2s var(--ease-out);white-space:nowrap;
}
.nav a:hover{background:var(--green-wash);color:var(--green-deep)}
.nav a.active{color:var(--green-deep);background:var(--green-wash)}

.nav a.nav-cta{
  display:inline-flex;align-items:center;gap:8px;margin-inline-start:6px;
  background:var(--green);color:var(--white);border-radius:999px;padding:10px 18px;
  font-size:.9rem;font-weight:700;border:0;white-space:nowrap;
  transition:transform .14s var(--ease-out),background .2s var(--ease-out);
}
.nav a.nav-cta:hover{background:var(--green-deep);color:var(--white)}
.nav a.nav-cta span{color:var(--white)}
.nav-cta:active{transform:scale(.97)}
.nav-cta svg{width:15px;height:15px;flex:none}

.lang{position:relative;z-index:var(--z-lang);margin-inline-start:4px}
.lang-btn{
  display:flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--green-line);
  color:var(--ink);border-radius:999px;padding:8px 13px;font-size:.84rem;font-weight:700;letter-spacing:.02em;
  transition:border-color .2s,background .2s,transform .12s var(--ease-out);
}
.lang-btn:active{transform:scale(.97)}
.lang-btn:hover{background:var(--green-wash);border-color:var(--green)}
.lang-btn svg{width:11px;height:11px;transition:transform .2s var(--ease-out)}
.lang.open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;min-width:150px;
  background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:6px;box-shadow:0 12px 32px rgba(17,26,14,.14);
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;
  transition:opacity .16s var(--ease-out),transform .16s var(--ease-out);
}
html[dir="rtl"] .lang-menu{transform-origin:top left;inset-inline-end:auto;inset-inline-start:0}
.lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu button{
  display:flex;width:100%;gap:10px;align-items:center;background:none;border:0;
  padding:9px 12px;border-radius:var(--r-sm);font-size:.92rem;text-align:start;transition:background .15s;
}
.lang-menu button:hover{background:var(--green-wash)}
.lang-menu button[aria-current="true"]{color:var(--green-deep);font-weight:600}
.lang-menu .tick{width:14px;color:var(--green);opacity:0}
.lang-menu button[aria-current="true"] .tick{opacity:1}

.burger{display:none;background:none;border:0;padding:8px;color:var(--ink);margin-inline-start:auto;order:3}
.burger span{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s}
.burger span+span{margin-top:6px}
body.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:1180px){
  .burger{display:block}
  .lang{order:2;margin-inline-start:auto}
  .nav{
    position:fixed;inset-block-start:0;inset-inline:0;padding:88px var(--pad) 32px;
    flex-direction:column;align-items:stretch;gap:2px;background:var(--white);
    transform:translateY(-102%);transition:transform .42s var(--ease-io);z-index:-1;
    box-shadow:0 20px 40px rgba(17,26,14,.12);
  }
  body.menu-open .nav{transform:none}
  .nav a{color:var(--ink);font-size:1.12rem;font-family:var(--font-display);font-weight:600;padding:14px 12px;border-radius:var(--r-sm)}
  .nav a.nav-cta{justify-content:center;margin-inline-start:0;margin-top:12px;padding:15px;font-size:1rem;color:var(--white)}
}

/* ============================== BUTTONS ============================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:.98rem;border:1.5px solid transparent;
  transition:transform .14s var(--ease-out),background .2s var(--ease-out),color .2s,border-color .2s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--green);color:var(--white);box-shadow:0 3px 10px rgba(73,168,57,.22)}
.btn-primary:hover{background:var(--green-deep);box-shadow:0 6px 16px rgba(73,168,57,.28)}
.btn-primary:active{box-shadow:0 2px 6px rgba(73,168,57,.24)}
.btn-ghost{border-color:var(--green-line);color:var(--green-deep);background:var(--white)}
.btn-ghost:hover{background:var(--green-wash);border-color:var(--green)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--green-deep)}
.btn .ar{transition:transform .2s var(--ease-out)}
.btn:hover .ar{transform:translateX(3px)}
html[dir="rtl"] .btn .ar{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .ar{transform:scaleX(-1) translateX(3px)}

/* ============================== HOME HERO (exploreloop split, white bg) ============================== */
.hero{position:relative;background:var(--white);overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(20px,4vw,52px);align-items:stretch;
  min-height:min(70svh,560px);padding-block:clamp(14px,2.4vw,32px) clamp(6px,1.2vw,14px);
}
.hero-copy{align-self:center}
@media(max-width:860px){
  /* compact so the images sit higher and a strip of the logo slider
     is already visible in the first viewport */
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:clamp(8px,2.5vw,14px);padding-block:clamp(8px,2.5vw,14px) 0}
  .hero-copy{max-width:none;text-align:center;margin-inline:auto}
  .hero h1{font-size:clamp(2rem,6.4vw,2.5rem)}
  .hero-sub{margin-inline:auto;margin-top:9px}
  .hero-cta{justify-content:center;margin-top:14px}
  .hero-meta{justify-content:center;text-align:center}
  .hero-meta div{align-items:center}
  .hero-copy .hero-meta{display:none}   /* stats move below the ribbon on mobile */
}
/* mobile-only stats band, rendered under the logo ribbon */
.hero-stats-m{display:none}
@media(max-width:860px){
  .hero-stats-m{display:block;background:var(--white);padding-block:clamp(22px,6vw,34px)}
  /* 2×2 grid so column 1 (Partenaires actifs / Familles actives) lines up */
  .hero-stats-m .hero-meta{
    display:grid;grid-template-columns:1fr 1fr;justify-items:center;
    border-top:0;margin-top:0;padding-top:0;gap:clamp(22px,6vw,32px) clamp(16px,6vw,36px);
  }
  .hero-stats-m .hero-meta div{align-items:center;text-align:center}
}
.hero-copy{max-width:38rem}
.hero h1{color:var(--green);font-size:clamp(2.05rem,3.15vw,2.5rem)}
html[lang="ar"] .hero h1{max-width:16ch}
.hero-sub{color:var(--ink-2);margin-top:20px;max-width:44ch;font-size:clamp(1rem,1.5vw,1.16rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,44px);margin-top:clamp(18px,3vw,30px);
  padding-top:16px;border-top:1px solid var(--green-line);
}
.hero-meta div{color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hero-meta .stat-ic{width:22px;height:22px;color:var(--green);margin-bottom:6px}
.hero-meta b{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;color:var(--green-deep);line-height:1}
.hero-meta span{font-size:.86rem;color:var(--ink-3)}
/* ---------- right column: floating bottle stage ---------- */
/* copy sits above the circle so the (enlarged) circle can pass behind the
   hero buttons without covering them */
.hero-copy{position:relative;z-index:2}
.hero-stage{position:relative;z-index:1;align-self:center;aspect-ratio:1;width:100%;max-width:640px;margin-inline:auto;overflow:visible}
.hero-circle{
  position:absolute;inset-block-start:49%;inset-inline-start:30%;transform:translate(-50%,-50%);
  width:min(122%,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 56% 44%, var(--white) 0%, var(--green-wash) 52%, var(--green-line) 100%);
  box-shadow:inset 0 0 0 1px var(--green-line), 0 50px 90px -55px rgba(31,74,22,.5);
}
html[dir="rtl"] .hero-circle{transform:translate(50%,-50%)}
.b-wrap{position:absolute;will-change:transform;transform:rotate(var(--rot,0deg))}
.b-wrap img{width:100%;height:auto;filter:drop-shadow(0 26px 32px rgba(24,54,16,.24))}
.b-bottle img{animation:bob 6s var(--ease-io) infinite}
/* bottles are bottom-anchored so they share a baseline, sit close together
   and read as "standing" inside the circle */
.b-center{--rot:0deg;  width:73%;inset-block-end:16%;inset-inline-start:50%;margin-inline-start:-36.5%;z-index:3}
.b-left  {--rot:-10deg;width:57%;inset-block-end:10%;inset-inline-start:-5%;z-index:2}
.b-right {--rot:9deg;  width:48%;inset-block-end:12%;inset-inline-end:-4%;z-index:2}
.b-left  img{animation-delay:-2s}
.b-right img{animation-delay:-4s}
.b-hand img{filter:blur(2px) drop-shadow(0 12px 18px rgba(24,54,16,.16));opacity:.85;animation:bob 8s var(--ease-io) infinite}
.b-hand-l{--rot:0deg; width:54%;inset-block-end:-1%;inset-inline-start:-14%;z-index:4}
.b-hand-r{--rot:0deg; width:46%;inset-block-end:3%;inset-inline-end:-11%;z-index:4}
.b-hand-r img{transform:scaleX(-1);animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:860px){
  /* compact stage pulled up under the CTA, so both the bottles and the
     ribbon sit high in the first screen. Fixed (not aspect-ratio) height
     to stay short. The circle re-centres in the stage (LTR + RTL). */
  .hero-stage{aspect-ratio:auto;height:clamp(196px,50vw,244px);max-width:460px;width:100%;margin-inline:auto;margin-block-start:-6px}
  .hero-circle{width:min(82%,300px);inset-block-start:42%;inset-inline-start:50%}
  .b-center{width:53%;inset-block-end:8%;margin-inline-start:-26.5%}
  .b-left{width:44%;inset-block-end:3%}
  .b-right{width:37%;inset-block-end:5%}
  .b-hand-l{width:43%;inset-block-end:-3%}
  .b-hand-r{width:37%;inset-block-end:1%}
}

/* ---------- eco/partners block: the old hero slider, now framed ---------- */
.block-slider .bs-link{position:absolute;inset:0;display:block;z-index:1}
.block-slider figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s var(--ease-out)}
.block-slider figure.on{opacity:1}
.block-slider figure img{width:100%;height:100%;object-fit:cover}
.block-slider::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,26,14,0) 55%,rgba(17,26,14,.28));
}
.block-slider .hero-dots{z-index:4}
.hero-dots{position:absolute;inset-block-end:clamp(14px,2vw,22px);inset-inline-end:clamp(16px,3vw,28px);display:flex;gap:8px;z-index:2}
.hero-dots button{width:26px;height:4px;border:0;border-radius:999px;background:rgba(255,255,255,.55);padding:0;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:background .3s,width .3s var(--ease-out)}
.hero-dots button[aria-current="true"]{background:var(--white);width:44px}

/* ============================== PAGE HERO (interior pages) ============================== */
.page-hero{
  position:relative;
  background:linear-gradient(180deg,var(--green-wash) 0%,var(--white) 100%);
  border-block-end:1px solid var(--green-line);
  padding-block:clamp(48px,8vw,86px) clamp(40px,6vw,64px);overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset-block-start:-120px;inset-inline-end:-120px;
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(73,168,57,.16),transparent 70%);pointer-events:none;
}
.page-hero h1{color:var(--green);font-size:clamp(2.2rem,5.6vw,3.9rem);max-width:18ch}
.page-hero p{color:var(--ink-2);margin-top:16px;max-width:60ch;font-size:clamp(1rem,1.6vw,1.18rem)}
.crumb{font-size:.86rem;color:var(--ink-3);margin-bottom:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--green-deep);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.6}

/* ============================== HOME BLOCKS (alternating) ============================== */
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.block.rev .block-media{order:-1}
@media(max-width:860px){.block{grid-template-columns:1fr}.block.rev .block-media{order:0}}
.block-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4;
  background:var(--green-wash);border:1px solid var(--green-line);
}
.block-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.block h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.block p{margin-top:16px;color:var(--ink-2)}
.block .btn{margin-top:26px}
/* fallback illustration when no photo is supplied */
.block-media.illus{display:grid;place-items:center}
.block-media.illus svg{width:44%;height:auto;color:var(--green);opacity:.9}

/* ============================== MARQUEE ============================== */
.ribbon{background:var(--green-wash);border-block:1px solid var(--green-line);padding-block:26px;overflow:hidden}
.ribbon-label{
  text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px;font-weight:600;
}
html[lang="ar"] .ribbon-label{letter-spacing:0;text-transform:none}
/* will-change promotes the track to its own layer. Without it some mobile
   browsers repaint the strip on the main thread and drop the animation when
   the page is busy, which reads as "the slider isn't moving". */
.track{display:flex;width:max-content;animation:slide 18s linear infinite;will-change:transform}
/* Pause-on-hover is for pointer devices ONLY. Touch browsers apply :hover on
   tap and leave it stuck on the last-touched element, so on a phone one tap or
   scroll over the ribbon froze the marquee permanently. Gate every hover rule
   in this block behind an actual hover-capable pointer. */
@media (hover:hover) and (pointer:fine){
  .ribbon:hover .track{animation-play-state:paused}
}
@keyframes slide{to{transform:translateX(-50%)}}
html[dir="rtl"] .track{animation-name:slideR}
@keyframes slideR{to{transform:translateX(50%)}}

/* Reduced motion: SLOW the marquee, don't stop it.

   The global block at the top of this file collapses every animation to 0.01ms.
   For a marquee that means it freezes on whatever slice happened to be on
   screen, which is indistinguishable from a broken slider — and it fires far
   more often than you would expect, because Android Battery Saver forces
   prefers-reduced-motion in Chrome. Reported from the field as "the logo slider
   isn't moving on my phone" while it ran fine on another handset.

   The previous fallback (a swipeable strip) was correct but still looked
   frozen, so it did not solve the perception problem. A logo ribbon drifting
   slowly is about the gentlest motion on the page — nothing zooms, flashes or
   parallaxes — so it keeps moving here, at less than half speed.

   ⚠️ The !important is required, not stylistic: the global rule is
   `*{animation-duration:.01ms!important}`, so only another !important can win.
   `.track` (0,1,0) also outranks `*` (0,0,0). Drop either and the marquee
   silently freezes again for every reduced-motion user. */
@media (prefers-reduced-motion:reduce){
  .track{
    animation-duration:40s!important;
    animation-iteration-count:infinite!important;
    animation-timing-function:linear!important;
  }
}
.track ul{display:flex;list-style:none;margin:0;padding:0;gap:clamp(28px,4vw,64px);padding-inline-end:clamp(28px,4vw,64px)}
.track li{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.05rem,2vw,1.5rem);
  color:var(--ink-3);white-space:nowrap;letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
.track li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.track li.has-logo::before{display:none}
.track li.has-logo img{
  height:92px;width:auto;max-width:230px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease-out),opacity .25s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .ribbon:hover .track li.has-logo img{filter:grayscale(0);opacity:1}
}
/* Touch devices get no hover, so the logos would stay permanently greyed.
   Show them at full strength instead. */
@media (hover:none),(pointer:coarse){
  .track li.has-logo img{filter:grayscale(0);opacity:.92}
}
@media(max-width:860px){
  .ribbon{padding-block:12px}
  .ribbon-label{margin-bottom:8px;font-size:.72rem}
  .track li.has-logo img{height:50px;max-width:130px}
}

/* ============================== PARTNERS ============================== */
.sect-head{display:flex;flex-wrap:wrap;gap:24px;align-items:end;justify-content:space-between;margin-bottom:clamp(36px,5vw,60px)}
.sect-head p{max-width:46ch}

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(14px,1.6vw,22px)}

/* partners page — grid of logo squares (click opens the partner modal) */
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
@media(min-width:620px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
.logo-tile{
  aspect-ratio:1;display:grid;place-items:center;padding:clamp(16px,2.4vw,30px);
  background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-md);
  cursor:pointer;isolation:isolate;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s var(--ease-out);
}
.logo-tile:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 16px 34px rgba(17,26,14,.12)}
.logo-tile:active{transform:translateY(-1px) scale(.99)}
/* every logo sits in the same optical box (consistent height, capped width)
   so the wall reads as aligned regardless of each logo's aspect ratio */
.logo-tile img{
  width:auto;height:34%;max-width:76%;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .28s var(--ease-out),opacity .28s var(--ease-out);
}
.logo-tile:hover img{filter:grayscale(0);opacity:1}
.logo-tile-name{font-family:var(--font-display);font-weight:600;color:var(--ink-2);text-align:center}
.pcard{
  position:relative;text-align:start;background:none;border:0;padding:0;overflow:hidden;
  border-radius:var(--r-md);aspect-ratio:4/5;isolation:isolate;
  transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out);
}
.pcard:nth-child(4n+1),.pcard:nth-child(4n+4){aspect-ratio:4/4.2}
.pcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(17,26,14,.18)}
.pcard:active{transform:translateY(-2px) scale(.99)}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.72);transition:filter .4s var(--ease-out)}
.pcard:hover img{filter:saturate(1.05)}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(9,18,7,.92) 12%,rgba(9,18,7,.32) 58%,rgba(73,168,57,.12) 100%);
  transition:opacity .4s var(--ease-out);
}
.pcard-body{position:relative;height:100%;display:flex;flex-direction:column;justify-content:end;padding:22px;color:var(--white)}
.pcard h3{font-size:1.28rem;letter-spacing:-.02em}
.pcard .sector{font-size:.82rem;color:rgba(255,255,255,.72);margin-top:5px}
.pcard .more{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:.85rem;font-weight:600;
  color:var(--white);opacity:.75;transition:opacity .25s,gap .25s var(--ease-out);
}
.pcard:hover .more{opacity:1;gap:12px}

/* modal */
.backdrop{
  position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(9,18,7,.62);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out);
}
.backdrop.on{opacity:1;pointer-events:auto}
.modal{
  position:fixed;z-index:var(--z-modal);inset-block-start:50%;inset-inline-start:50%;
  width:min(920px,calc(100vw - 32px));max-height:86svh;overflow:auto;overscroll-behavior:contain;
  background:var(--white);border-radius:var(--r-lg);
  transform:translate(-50%,-46%) scale(.96);opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease-out),transform .3s var(--ease-out);
}
html[dir="rtl"] .modal{transform:translate(50%,-46%) scale(.96)}
.modal.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
html[dir="rtl"] .modal.on{transform:translate(50%,-50%) scale(1)}
.modal-hero{position:relative;aspect-ratio:16/7;overflow:hidden}
.modal-hero img{width:100%;height:100%;object-fit:cover}
.modal-x{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.94);border:0;display:grid;place-items:center;color:var(--ink);
  transition:transform .14s var(--ease-out),background .2s;
}
.modal-x:hover{background:var(--white)}
.modal-x:active{transform:scale(.93)}
.modal-body{padding:clamp(24px,4vw,44px)}
.modal-body h3{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.tag{
  display:inline-block;background:var(--green-wash);color:var(--green-deep);border-radius:999px;
  padding:5px 13px;font-size:.8rem;font-weight:600;margin-bottom:14px;
}
.modal-body .desc{color:var(--ink-2);margin-top:14px;max-width:66ch}
.modal-gallery{display:flex;gap:12px;overflow-x:auto;margin-top:26px;scroll-snap-type:x mandatory}
.modal-gallery:empty{display:none}
.modal-gallery img{
  flex:none;width:min(300px,72vw);aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--r-sm);scroll-snap-align:start;
}
.modal-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:32px}
.modal-cols h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:600;font-family:var(--font-body)}
html[lang="ar"] .modal-cols h4{letter-spacing:0;text-transform:none}
.modal-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.modal-cols li{position:relative;padding-inline-start:24px;font-size:.95rem;color:var(--ink-2)}
.modal-cols li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;
  width:9px;height:9px;border-radius:3px;background:var(--green);
}
.modal-cols .num li::before{display:none}
.stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:30px;padding-top:24px;border-top:1px solid var(--green-line)}
.stats b{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--green-deep);letter-spacing:-.02em}
.stats span{font-size:.84rem;color:var(--ink-3)}

/* ============================== MAP ============================== */
.map-sect{background:linear-gradient(165deg,var(--green) 0%,var(--green-deep) 100%)}
.map-sect .sect-head h2{color:var(--white)}
.map-sect .sect-head .lede{color:rgba(255,255,255,.9)}
.map-sect .map-side .btn-ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:var(--white)}
.map-sect .map-side .btn-ghost:hover{background:rgba(255,255,255,.24);border-color:var(--white)}
.map-shell{display:grid;grid-template-columns:320px 1fr;gap:clamp(16px,2vw,28px);align-items:stretch}
@media(max-width:900px){.map-shell{grid-template-columns:1fr}}
.map-side{display:flex;flex-direction:column;gap:14px}
.city-switch{display:flex;flex-wrap:wrap;background:var(--white);border:1px solid var(--green-line);border-radius:999px;padding:4px;gap:4px}
.city-switch button{
  flex:1 1 auto;border:0;background:none;padding:11px 8px;border-radius:999px;font-weight:600;font-size:.92rem;
  color:var(--ink-3);transition:background .22s var(--ease-out),color .22s;
}
.city-switch button[aria-pressed="true"]{background:var(--green);color:var(--white)}
.legend{background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-md);padding:20px}
.legend h3{font-size:1.05rem;margin-bottom:14px}
.legend ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.legend li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink-2)}
.legend .dot{width:14px;height:14px;border-radius:50%;flex:none;margin-top:5px;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.legend .dot.g{background:var(--green)}
.legend .dot.y{background:var(--yellow)}
.legend .count{margin-inline-start:auto;font-weight:600;color:var(--ink)}
.map-note{font-size:.82rem;color:var(--ink-3);line-height:1.5}
#mapCanvas{min-height:clamp(380px,54vh,560px);border-radius:var(--r-md);border:1px solid var(--green-line);z-index:1}
.leaflet-container{font-family:var(--font-body);border-radius:var(--r-md)}
.pin{display:grid;place-items:center;border-radius:50%;border:3px solid var(--white);box-shadow:0 3px 10px rgba(0,0,0,.3);color:var(--white)}
.pin svg{width:15px;height:15px}
.pin.g{background:var(--green)}
.pin.y{background:var(--yellow);color:#4A3800}
.pop b{font-family:var(--font-display);font-size:1rem;display:block;margin-bottom:3px}
.pop small{color:var(--ink-3)}

/* ============================== SERVICES ============================== */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
@media(max-width:880px){.svc{grid-template-columns:1fr}}
.svc-panel{
  border:1px solid var(--green-line);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  display:flex;flex-direction:column;transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.svc-panel:hover{border-color:var(--green)}
.svc-panel.b2b{background:var(--ink);color:var(--white);border-color:var(--ink)}
.svc-panel.b2b:hover{border-color:var(--green)}
.svc-kind{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--green);margin-bottom:16px}
html[lang="ar"] .svc-kind{letter-spacing:0;text-transform:none}
.svc-panel h3{font-size:clamp(1.5rem,3vw,2.1rem)}
.svc-panel > p{margin-top:14px;color:var(--ink-2);max-width:44ch}
.svc-panel.b2b > p{color:rgba(255,255,255,.72)}
.svc-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px;border-top:1px solid var(--green-line)}
.svc-panel.b2b .svc-list{border-color:rgba(255,255,255,.16)}
.svc-list li{
  display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--green-line);
}
.svc-panel.b2b .svc-list li{border-color:rgba(255,255,255,.16)}
.svc-list svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--green)}
.svc-list strong{display:block;font-weight:600;font-size:1rem}
.svc-list span{font-size:.9rem;color:var(--ink-3)}
.svc-panel.b2b .svc-list span{color:rgba(255,255,255,.6)}
.svc-panel .btn{margin-top:auto;align-self:flex-start;margin-top:34px}

/* ============================== PRODUCTS ============================== */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,30px)}
.prod-card{
  border:1px solid var(--green-line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  display:flex;flex-direction:column;text-align:start;font:inherit;color:inherit;cursor:pointer;
  width:100%;padding:0;appearance:none;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(17,26,14,.12);border-color:var(--green)}
/* height comes from the ::before padding-hack (not aspect-ratio) so the
   image box never collapses on older mobile browsers — that was the
   "only title + details show, no picture" bug */
.prod-figure{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--green-wash),var(--green-line));
}
.prod-figure::before{content:"";display:block;padding-top:126%}
.prod-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(14px,3vw,26px)}
.prod-figure .bag{position:absolute;inset:0;margin:auto;width:46%;height:auto;color:var(--green);filter:drop-shadow(0 12px 20px rgba(31,74,22,.18))}
.prod-badge{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  background:var(--white);color:var(--green-deep);border-radius:999px;padding:5px 12px;
  font-size:.76rem;font-weight:700;box-shadow:0 4px 12px rgba(17,26,14,.12);
}
.prod-body{padding:clamp(20px,2.5vw,28px);display:flex;flex-direction:column;flex:1}
.prod-body h3{font-size:1.4rem;letter-spacing:-.02em}
.prod-desc{margin-top:10px;color:var(--ink-2);font-size:.95rem}
.prod-specs{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--green-line);display:grid;gap:12px}
.prod-specs li{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:.95rem}
.prod-specs .k{display:flex;align-items:center;gap:9px;color:var(--ink-3)}
.prod-specs .k svg{width:18px;height:18px;color:var(--green);flex:none}
.prod-specs .v{font-weight:700;color:var(--ink);font-family:var(--font-display);letter-spacing:-.01em}
.prod-cta{margin-top:22px}
.prod-cta .btn{width:100%;justify-content:center}
/* "Voir les détails" affordance on the clickable card */
.prod-more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;color:var(--green-deep);font-weight:600;font-size:.92rem}
.prod-more .ar{transition:transform .2s var(--ease-out)}
.prod-card:hover .prod-more .ar{transform:translateX(3px)}
html[dir="rtl"] .prod-more .ar{transform:scaleX(-1)}
html[dir="rtl"] .prod-card:hover .prod-more .ar{transform:scaleX(-1) translateX(3px)}

/* home products showcase */
.home-prod-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.home-prod-cta{display:flex;justify-content:center;margin-top:clamp(30px,4vw,48px)}

/* product detail modal */
.prod-modal{width:min(900px,calc(100vw - 32px))}
.prod-modal-grid{display:grid;grid-template-columns:1fr 1.1fr}
@media(max-width:720px){.prod-modal-grid{grid-template-columns:1fr}}
.prod-modal-fig{
  position:relative;display:grid;place-items:center;min-height:clamp(240px,38vw,360px);overflow:hidden;
  background:linear-gradient(150deg,var(--green-wash),var(--green-line));
}
.prod-modal-fig img{width:100%;height:100%;max-height:440px;object-fit:contain;padding:clamp(22px,4vw,44px)}
.prod-modal-fig .bag{width:44%;height:auto;color:var(--green);filter:drop-shadow(0 12px 20px rgba(31,74,22,.18))}
.prod-dim{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--ink-2);font-size:.98rem}
.prod-dim svg{width:20px;height:20px;color:var(--green);flex:none}
.prod-dim b{color:var(--ink);font-weight:600}
.prod-places{flex-flow:row wrap;display:flex;gap:8px}
.prod-places li{padding:6px 12px;background:var(--green-wash);border:1px solid var(--green-line);border-radius:999px;color:var(--green-deep);font-size:.86rem}
.prod-places li::before{display:none}
.prod-modal-cta{margin-top:30px}
/* mobile: two products per row (home showcase + products page) */
@media(max-width:680px){.prod-grid{grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,20px)}}
@media(max-width:560px){
  #homeProdGrid .prod-card:nth-child(3){display:none}   /* home shows a clean row of 2 + "discover more" */
  .prod-body{padding:13px}
  .prod-card h3{font-size:1.02rem;line-height:1.16}
  .prod-desc{font-size:.83rem}
  .prod-more{font-size:.82rem;padding-top:12px}
  .prod-badge{font-size:.66rem;padding:4px 9px}
}

/* ---------- order page (commande.html) ---------- */
.order-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,52px);align-items:start}
@media(max-width:820px){.order-grid{grid-template-columns:1fr;gap:clamp(22px,5vw,32px)}}
.order-product{
  border:1px solid var(--green-line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);
  position:sticky;inset-block-start:calc(var(--hdr-h) + 16px);
}
@media(max-width:820px){.order-product{position:static}}
.order-fig::before{padding-top:82%}
.order-product-body{padding:clamp(18px,2.4vw,26px)}
.order-product-body h2{font-size:1.35rem;letter-spacing:-.02em;margin-top:10px}
.order-product-body p{margin-top:10px;color:var(--ink-2);font-size:.94rem}
.order-change{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--green-deep);font-weight:600;font-size:.9rem}
.order-change .ar{transition:transform .2s var(--ease-out)}
html[dir="rtl"] .order-change .ar{transform:scaleX(-1)}
#orderForm button[type="submit"]{margin-top:8px}

/* ============================== ABOUT ============================== */
.about-lead{max-width:70ch;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink-2);line-height:1.55}
.about-lead strong{color:var(--green-deep)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(36px,5vw,56px)}
.value{border:1px solid var(--green-line);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);background:var(--white);transition:border-color .3s,transform .3s var(--ease-out)}
.value:hover{border-color:var(--green);transform:translateY(-4px)}
.value .ic{width:52px;height:52px;border-radius:14px;background:var(--green-wash);display:grid;place-items:center;color:var(--green-deep);margin-bottom:18px}
.value .ic svg{width:26px;height:26px}
.value h3{font-size:1.25rem}
.value p{margin-top:10px;color:var(--ink-2);font-size:.96rem}
.about-timeline{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;gap:0}
.about-timeline li{position:relative;padding-inline-start:34px;padding-block:18px;border-inline-start:2px solid var(--green-line)}
.about-timeline li::before{content:"";position:absolute;inset-inline-start:-9px;inset-block-start:24px;width:16px;height:16px;border-radius:50%;background:var(--green);border:3px solid var(--white);box-shadow:0 0 0 2px var(--green-line)}
.about-timeline b{font-family:var(--font-display);color:var(--green-deep);display:block;font-size:1.1rem}
.about-timeline span{color:var(--ink-2);font-size:.96rem}

/* ============================== BLOG ============================== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(20px,2.6vw,32px)}
.blog-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(17,26,14,.12);border-color:var(--green)}
.blog-cover{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.blog-cover svg{width:32%;height:auto;color:rgba(255,255,255,.92);filter:drop-shadow(0 6px 12px rgba(0,0,0,.18))}
.blog-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 120% at 82% 0%,rgba(255,255,255,.22),transparent 58%)}
.blog-cat{position:absolute;inset-block-end:12px;inset-inline-start:12px;z-index:1;background:rgba(255,255,255,.94);color:var(--green-deep);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
html[lang="ar"] .blog-cat{letter-spacing:0;text-transform:none}
.blog-cbody{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2.4vw,26px);flex:1}
.blog-meta{font-size:.8rem;color:var(--ink-3)}
.blog-card h3{font-size:1.24rem;color:var(--ink);line-height:1.22}
.blog-excerpt{color:var(--ink-2);font-size:.95rem;flex:1}
.blog-link{display:inline-flex;align-items:center;gap:7px;color:var(--green-deep);font-weight:600;font-size:.92rem;margin-top:6px}
.blog-link .ar{transition:transform .2s var(--ease-out)}
.blog-card:hover .blog-link .ar{transform:translateX(3px)}
html[dir="rtl"] .blog-link .ar{transform:scaleX(-1)}
html[dir="rtl"] .blog-card:hover .blog-link .ar{transform:scaleX(-1) translateX(3px)}

/* category covers (cards + article) — kept in the brand green family */
.cat-waste{background:linear-gradient(140deg,var(--green) 0%,var(--green-deep) 100%)}
.cat-eco{background:linear-gradient(140deg,var(--green-deep) 0%,var(--green-dark) 100%)}
.cat-startup{background:linear-gradient(140deg,var(--green-dark) 0%,var(--green-deep) 55%,var(--green) 100%)}
.cat-recycling{background:linear-gradient(140deg,var(--green) 0%,var(--green-dark) 100%)}

/* ---------- single article ---------- */
.art-hero h1{max-width:24ch}
.blog-cat.solo{position:static;display:inline-flex;margin-bottom:16px;color:var(--white)}
.art-meta{color:var(--ink-3);margin-top:16px;font-size:.92rem}
.art-wrap{padding-block:clamp(30px,5vw,52px)}
.art-lead{font-family:var(--font-display);font-weight:600;font-size:clamp(1.14rem,2vw,1.5rem);line-height:1.5;color:var(--ink);max-width:65ch}
html[lang="ar"] .art-lead{line-height:1.7}
.art-cover{aspect-ratio:21/9;border-radius:var(--r-lg);display:grid;place-items:center;margin-block:clamp(26px,4vw,44px);overflow:hidden;position:relative}
.art-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 84% 0%,rgba(255,255,255,.2),transparent 58%)}
.art-cover svg{width:110px;max-width:24%;height:auto;color:rgba(255,255,255,.94);filter:drop-shadow(0 8px 16px rgba(0,0,0,.2))}
/* admin-supplied blog/article images fill the cover; the category chip stays on top */
.blog-cover .blog-img,.art-cover .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.blog-cover.has-img svg,.art-cover.has-img svg{display:none}
.blog-cover.has-img::before,.art-cover.has-img::before{display:none}
.art-body{max-width:70ch}
.art-body p{margin-top:20px;color:var(--ink-2);font-size:1.06rem;line-height:1.75}
.art-body p:first-child{margin-top:0}
.art-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(36px,5vw,52px)}
.blog-more-sect{background:var(--green-wash);border-block-start:1px solid var(--green-line)}
.blog-grid-more{margin-top:clamp(24px,3vw,40px)}

/* ============================== APP ============================== */
.app-sect{background:var(--green);color:var(--white);overflow:hidden;position:relative}
.app-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:900px){
  /* single column, and re-order so the store buttons sit UNDER the mockup.
     display:contents promotes the copy's children into the flex flow so the
     nested .stores can be ordered past the image without moving it in the DOM. */
  .app-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(22px,5vw,32px)}
  .app-grid>div:first-child{display:contents}
  .app-sect .lede{margin-inline:auto}
  .app-feat{justify-content:center}
  .app-shot{order:1;width:100%}
  .stores{order:2;width:100%;flex-wrap:nowrap;justify-content:center;gap:10px;margin-top:0}
  .store{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px}
}
.app-sect h2{color:var(--white)}
.app-sect .lede{color:rgba(255,255,255,.92)}
.app-feat{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.app-feat span{
  border:1px solid rgba(255,255,255,.38);border-radius:999px;padding:8px 16px;font-size:.86rem;font-weight:500;
}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.store{
  display:flex;align-items:center;gap:12px;background:var(--white);color:var(--ink);
  border-radius:14px;padding:11px 22px 11px 18px;
  transition:transform .16s var(--ease-out),box-shadow .25s var(--ease-out);
}
.store:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.store:active{transform:translateY(0) scale(.98)}
.store svg{width:26px;height:26px;flex:none}
.store small{display:block;font-size:.7rem;color:var(--ink-3);line-height:1.2}
.store b{font-family:var(--font-display);font-size:1.06rem;letter-spacing:-.02em}
.app-shot{position:relative;display:grid;place-items:center}
.app-shot picture{display:contents}
.app-shot::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
}
/* aspect-ratio reserves the box from the FIRST layout, before the file arrives.
   Without it width:auto + height:auto on an unloaded image is a 0x0 element,
   which both collapses the section and (with loading="lazy", now removed) makes
   the image unloadable — it can never be near the viewport if it has no box. */
.app-shot img{position:relative;max-height:560px;width:auto;height:auto;aspect-ratio:1100/1315;filter:drop-shadow(0 30px 60px rgba(0,0,0,.28));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:900px){
  .app-shot img{max-height:none;max-width:min(92%,400px);height:auto;width:auto;margin-inline:auto}
}

/* ============================== FORM ============================== */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px)}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}}
.field{display:grid;gap:7px;margin-bottom:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
label{font-size:.87rem;font-weight:600;color:var(--ink-2)}
input,select,textarea{
  font:inherit;font-size:.98rem;color:var(--ink);background:var(--white);
  border:1.5px solid var(--green-line);border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px rgba(73,168,57,.14)}
textarea{resize:vertical;min-height:130px}
.form-ok{
  display:none;margin-top:16px;background:var(--green-wash);border:1px solid var(--green);
  color:var(--green-dark);border-radius:var(--r-sm);padding:14px 16px;font-size:.94rem;
}
.form-ok.on{display:block}
.contact-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.contact-list li{display:flex;gap:14px}
.contact-list svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:3px}
.contact-list a{color:var(--ink-2);transition:color .2s}
.contact-list a:hover{color:var(--green-deep)}
.contact-list b{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px;font-weight:600}
html[lang="ar"] .contact-list b{letter-spacing:0;text-transform:none}

/* ============================== FOOTER ============================== */
footer{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(52px,7vw,80px) 32px}
.f-top{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;align-items:start}
footer img{height:36px;width:auto}
.f-tag{margin-top:16px;max-width:34ch;font-size:.94rem}
.f-nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.f-nav a{font-size:.94rem;transition:color .2s}
.f-nav a:hover{color:var(--white)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;transition:background .22s var(--ease-out),transform .16s var(--ease-out),border-color .22s;
}
.socials a:hover{background:var(--green);border-color:var(--green);color:var(--white);transform:translateY(-2px)}
.socials svg{width:18px;height:18px}
.f-bot{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem;
}
.f-bot a{transition:color .2s}
.f-bot a:hover{color:var(--white)}
/* Build stamp. Deliberately legible rather than hidden: when someone reports
   "I still see the old site", this is the one thing they can read back that
   settles it. Kept quiet enough not to read as content. */
.f-build{opacity:.45;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ============================== PLASTIC PRICE ============================== */
:root{ --pc-buy:#2A6FDB; --pc-sell:#49A839; }
.price-sect{padding-block:clamp(40px,6vw,80px)}
.price-controls{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-bottom:clamp(22px,3vw,34px)}
.price-group{display:flex;flex-direction:column;gap:10px}
.price-group-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green-deep)}
html[lang="ar"] .price-group-label{letter-spacing:0;text-transform:none}
.chips{display:inline-flex;flex-wrap:wrap;background:var(--white);border:1px solid var(--green-line);border-radius:999px;padding:4px;gap:4px}
.chips button{
  border:0;background:none;padding:10px 18px;border-radius:999px;font-weight:600;font-size:.9rem;
  color:var(--ink-3);cursor:pointer;transition:background .2s var(--ease-out),color .2s;white-space:nowrap;
}
.chips button:hover{color:var(--green-deep)}
.chips button[aria-pressed="true"]{background:var(--green);color:var(--white)}

.price-latest{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;
}
.price-latest .price-updated{grid-column:1 / -1}
@media(max-width:560px){.price-latest{grid-template-columns:1fr}}
.price-card{
  background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-md);
  padding:18px 20px;display:flex;flex-direction:column;gap:8px;
}
.price-card.buy{border-inline-start:4px solid var(--pc-buy)}
.price-card.sell{border-inline-start:4px solid var(--pc-sell)}
.price-card-k{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-2);font-weight:600}
.price-card-v{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;color:var(--ink);line-height:1}
.price-card-v em{font-size:.9rem;font-weight:600;font-style:normal;color:var(--ink-3)}
.pc-dot{width:12px;height:12px;border-radius:50%;flex:none}
.pc-dot.buy{background:var(--pc-buy)}
.pc-dot.sell{background:var(--pc-sell)}
.price-updated{font-size:.86rem;color:var(--ink-3);margin-top:4px}

.price-chart-shell{
  background:var(--white);border:1px solid var(--green-line);border-radius:var(--r-lg);
  padding:clamp(14px,2.4vw,26px);
}
.price-chart{direction:ltr;width:100%;overflow-x:auto}
.pc-svg{width:100%;height:auto;display:block;min-height:240px}
.pc-grid{stroke:var(--green-line);stroke-width:1;stroke-dasharray:3 4}
.pc-ylab,.pc-xlab{fill:var(--ink-3);font-family:var(--font-body);font-size:12px}
.pc-line{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.pc-line.buy{stroke:var(--pc-buy)} .pc-line.sell{stroke:var(--pc-sell)}
.pc-dot-svg{stroke:var(--white);stroke-width:1.5}
.pc-dot-svg.buy{fill:var(--pc-buy)} .pc-dot-svg.sell{fill:var(--pc-sell)}
.price-empty{
  min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-3);text-align:center;padding:24px;
}
.price-empty svg{width:40px;height:40px;opacity:.5}
.price-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.price-legend span{display:inline-flex;align-items:center;gap:8px}
.price-caption{
  margin-top:22px;text-align:center;font-size:.88rem;color:var(--ink-3);font-style:italic;
}