/* =====================================================================
   ÉLIXIA — Parapharmacie
   Direction : apothicaire éditorial. Porcelaine + encre + un seul vert
   eucalyptus, très discret. Serif Cormorant / Amiri, sans Jost / Tajawal.
   ===================================================================== */

:root{
  --porcelain:#F4F2EC;   /* fond */
  --paper:#FFFFFF;       /* cartes */
  --ink:#1B1E1A;         /* texte principal, presque noir teinté vert */
  --ink-soft:#54574F;    /* texte secondaire */
  --stone:#8C8B81;       /* légendes */
  --line:#E3E0D5;        /* filets */
  --eucalyptus:#5C7355;  /* accent unique */
  --eucalyptus-d:#455A40;/* accent foncé (hover) */
  --eucalyptus-tint:#EAF0E6; /* fond teinté doux */
  --sand:#EFEBE0;        /* alt sections */
  --danger:#a24a3d;

  --serif:'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw:1200px;
  --gap:clamp(20px,4vw,40px);
  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(27,30,26,.05);
  --shadow-md:0 10px 28px rgba(27,30,26,.09);
  --shadow-lg:0 24px 60px rgba(27,30,26,.14);
}

/* Arabe : Amiri (titres) + Tajawal (corps) */
.lang-ar{ --serif:'Amiri', 'Times New Roman', serif; --sans:'Tajawal', system-ui, sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--porcelain); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.1; margin:0; letter-spacing:.2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,5vw,48px); }
.wrap.narrow{ max-width:760px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:500;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--eucalyptus); margin-bottom:14px;
}
.lang-ar .eyebrow{ letter-spacing:.05em; }
.eyebrow-center{ display:block; text-align:center; }

.section-head{ text-align:center; margin-bottom:clamp(28px,5vw,52px); }
.section-title{ font-size:clamp(2rem,5vw,3rem); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:500; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--ink); background:var(--ink); color:var(--porcelain);
  border-radius:var(--radius); transition:.25s cubic-bezier(.2,.8,.2,1);
  box-shadow:var(--shadow-sm);
}
.lang-ar .btn{ letter-spacing:.02em; font-size:.95rem; }
.btn-primary{ background:var(--ink); color:var(--porcelain); }
.btn-primary:hover{ background:var(--eucalyptus-d); border-color:var(--eucalyptus-d); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:var(--paper); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--porcelain); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-block{ width:100%; }
.btn-order{ padding:20px; font-size:.9rem; border-radius:var(--radius); }
.btn:active{ transform:translateY(0); }

/* ============================ SPLASH LANGUE ============================ */
.splash-body{ min-height:100vh; display:grid; place-items:center; background:radial-gradient(1200px 700px at 50% -10%, var(--eucalyptus-tint) 0%, var(--porcelain) 55%); }
.splash{ text-align:center; padding:40px 24px; max-width:520px; }
.splash-logo{ width:min(140px,38vw); height:auto; margin:0 auto; display:block; filter:drop-shadow(var(--shadow-md)); }
.splash-line{ width:56px; height:1px; background:var(--line); margin:22px auto 20px; }
.splash-title{ color:var(--stone); font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:38px; }
.splash-choices{ display:grid; gap:14px; }
.splash-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:24px; border:1px solid var(--line); background:var(--paper);
  transition:.25s cubic-bezier(.2,.8,.2,1); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.splash-btn:hover{ border-color:var(--eucalyptus); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.splash-btn-main{ font-family:var(--serif); font-size:1.7rem; }
.splash-btn-ar .splash-btn-main{ font-family:'Amiri', serif; }
.splash-btn-sub{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); }

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(244,242,236,.86);
  backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(27,30,26,.02), 0 8px 24px rgba(27,30,26,.04);
}
.wordmark{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.12em; text-transform:uppercase; text-align:center; line-height:1.05; }
.wordmark-logo{ display:flex; align-items:center; justify-content:center; }
.wordmark-logo img{ height:30px; width:auto; display:block; }
.menu-link{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.lang-ar .menu-link{ letter-spacing:.02em; font-size:.9rem; }
.header-right{ display:flex; justify-content:flex-end; }
.lang-switch{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); padding:8px 14px; border-radius:999px; transition:.2s; background:var(--paper);
}
.lang-switch:hover{ border-color:var(--ink); box-shadow:var(--shadow-sm); }

/* ============================ HERO ============================ */
.hero{
  padding:clamp(30px,6vw,70px) 0; position:relative; overflow:hidden;
  background:radial-gradient(1100px 500px at 85% -10%, var(--eucalyptus-tint) 0%, transparent 60%);
}
.hero-inner{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; position:relative; z-index:1; }
.hero-title{ font-size:clamp(2.6rem,7vw,5rem); margin:.2em 0 .3em; }
.hero-sub{ color:var(--ink-soft); font-size:1.05rem; max-width:44ch; margin-bottom:32px; }
.hero-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero-price{ font-family:var(--serif); font-size:1.7rem; }
.hero-media{
  overflow:hidden; background:var(--sand); aspect-ratio:4/5;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.hero-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.hero-media:hover img{ transform:scale(1.03); }

/* ============================ GRILLE PRODUITS ============================ */
.products{ padding:clamp(30px,6vw,70px) 0; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,34px); }
.card{ display:block; transition:.3s cubic-bezier(.2,.8,.2,1); }
.card:hover{ transform:translateY(-4px); }
.card-media{ position:relative; overflow:hidden; background:var(--sand); aspect-ratio:4/5; margin-bottom:16px; border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:box-shadow .3s; }
.card:hover .card-media{ box-shadow:var(--shadow-md); }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.card-flag{
  position:absolute; top:12px; inset-inline-start:12px; background:var(--eucalyptus-d); color:#fff;
  font-size:.7rem; letter-spacing:.1em; padding:6px 12px; font-family:var(--sans); border-radius:999px; box-shadow:var(--shadow-sm);
}
.card-cat{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.lang-ar .card-cat{ letter-spacing:.02em; }
.card-name{ font-size:1.35rem; margin:6px 0 8px; }
.card-price{ display:flex; align-items:baseline; gap:12px; }
.price-now{ font-family:var(--serif); font-size:1.25rem; }
.price-old{ color:var(--stone); text-decoration:line-through; font-size:.95rem; }

/* ============================ TRUST ============================ */
.trust-strip{ background:transparent; padding:clamp(10px,3vw,26px) 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.trust-item{
  display:flex; align-items:center; gap:14px; padding:22px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:.25s;
}
.trust-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.trust-icon{ color:var(--eucalyptus); flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:var(--eucalyptus-tint); display:grid; place-items:center; }
.trust-icon svg{ width:24px; height:24px; }
.trust-item strong{ display:block; font-family:var(--serif); font-size:1.1rem; font-weight:500; }
.trust-item span{ font-size:.78rem; color:var(--stone); }

/* ============================ PDP ============================ */
.crumbs{ display:flex; gap:10px; align-items:center; padding:22px 0 6px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); }
.lang-ar .crumbs{ letter-spacing:.02em; font-size:.85rem; }
.crumbs a:hover{ color:var(--ink); }

.pdp-top{ padding:14px 0 clamp(30px,5vw,60px); }
.pdp-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:start; }

.gallery{ position:sticky; top:86px; }
.gallery-main{ position:relative; overflow:hidden; background:var(--sand); aspect-ratio:4/5; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pdp-flag{ font-size:.78rem; padding:8px 14px; border-radius:999px; }
.gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.thumb{ width:66px; height:82px; padding:0; border:1px solid var(--line); background:var(--sand); overflow:hidden; opacity:.75; transition:.2s; border-radius:var(--radius-sm); }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.is-active,.thumb:hover{ opacity:1; border-color:var(--eucalyptus); box-shadow:var(--shadow-sm); }

.pdp-info{ padding-top:6px; }
.pdp-title{ font-size:clamp(2rem,5vw,3.1rem); margin:6px 0 12px; }
.pdp-sub{ color:var(--ink-soft); font-size:1.05rem; margin:0 0 18px; }
.pdp-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pill{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; background:var(--eucalyptus-tint); padding:7px 14px; color:var(--eucalyptus-d); border-radius:999px; }
.lang-ar .pill{ letter-spacing:.02em; }

.pdp-price{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:22px; background:var(--paper); box-shadow:var(--shadow-sm); }
.pdp-price .price-now{ font-size:2rem; }
.price-save{ font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--eucalyptus); padding:6px 12px; border-radius:999px; }
.lang-ar .price-save{ letter-spacing:.02em; }

.pdp-benefits-quick{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:10px; }
.pdp-benefits-quick li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); }
.check{ color:var(--eucalyptus); font-weight:600; flex:0 0 auto; }

/* ---- Formulaire commande ---- */
.order-form{ background:var(--paper); border:1px solid var(--line); padding:clamp(22px,4vw,32px); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.order-title{ font-size:1.5rem; margin-bottom:4px; }
.order-sub{ color:var(--stone); font-size:.9rem; margin:0 0 20px; }

.qty-offers{ display:grid; gap:10px; margin-bottom:22px; }
.offer{ cursor:pointer; }
.offer input{ position:absolute; opacity:0; }
.offer-box{
  position:relative; display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--line); padding:14px 16px; transition:.2s; background:var(--porcelain);
  border-radius:var(--radius);
}
.offer-qty{ font-family:var(--serif); font-size:1.15rem; }
.offer-price{ margin-inline-start:auto; font-family:var(--serif); font-size:1.15rem; }
.offer-tag{
  position:absolute; top:-10px; inset-inline-end:14px; background:var(--eucalyptus); color:#fff;
  font-family:var(--sans); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px;
  border-radius:999px; box-shadow:var(--shadow-sm);
}
.lang-ar .offer-tag{ letter-spacing:.02em; }
.offer-tag-best{ background:var(--ink); }
.offer input:checked + .offer-box{ border-color:var(--eucalyptus); background:var(--eucalyptus-tint); box-shadow:var(--shadow-sm); }

.field{ margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.lang-ar .field label{ letter-spacing:.02em; font-size:.85rem; }
.field input,.field select{
  width:100%; padding:14px 14px; border:1px solid var(--line); background:var(--porcelain);
  font-family:var(--sans); font-size:1rem; color:var(--ink); border-radius:var(--radius); transition:.2s;
}
.field input:focus,.field select:focus{ outline:none; border-color:var(--eucalyptus); box-shadow:0 0 0 3px rgba(92,115,85,.12); }
.field.error input,.field.error select{ border-color:var(--danger); }

.order-summary{ margin:20px 0 18px; padding-top:16px; border-top:1px dashed var(--line); }
.sum-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:.95rem; color:var(--ink-soft); }
.sum-total{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); border-top:1px solid var(--line); margin-top:8px; padding-top:14px; }
.order-cod-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; font-size:.78rem; color:var(--eucalyptus); }

/* ---- Sections éditoriales ---- */
.pdp-section{ padding:clamp(40px,7vw,84px) 0; }
.section-alt{ background:var(--sand); }
.rich{ font-size:1.08rem; color:var(--ink-soft); line-height:1.85; }
.rich br{ content:""; }

.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:14px; }
.benefit{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-sm); transition:.25s; }
.benefit:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.benefit-num{ font-family:var(--serif); font-size:1.6rem; color:var(--eucalyptus); display:block; margin-bottom:8px; }
.benefit p{ margin:0; color:var(--ink-soft); }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,30px); margin-top:14px; }
.review{ margin:0; background:var(--paper); border:1px solid var(--line); padding:26px; border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:.25s; }
.review:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stars{ color:var(--eucalyptus); letter-spacing:3px; margin-bottom:12px; }
.review blockquote{ margin:0 0 14px; font-family:var(--serif); font-size:1.2rem; line-height:1.5; }
.review figcaption{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.lang-ar .review figcaption{ letter-spacing:.02em; }

/* ---- Barre mobile ---- */
.mobile-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:45; display:none;
  align-items:center; gap:14px; padding:12px 18px;
  background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(27,30,26,.08);
}
.mobile-bar-price{ font-family:var(--serif); font-size:1.4rem; }
.mobile-bar .btn{ margin-inline-start:auto; padding:14px 22px; }

/* ============================ MERCI ============================ */
.thanks{ padding:clamp(50px,10vw,120px) 0; }
.thanks-inner{ max-width:560px; margin-inline:auto; text-align:center; }
.thanks-check{ color:var(--eucalyptus); width:70px; margin:0 auto 24px; }
.thanks-title{ font-size:clamp(2rem,6vw,3rem); margin-bottom:14px; }
.thanks-sub{ color:var(--ink-soft); margin-bottom:30px; }
.thanks-ref{ display:inline-flex; flex-direction:column; gap:2px; padding:16px 40px; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:26px; background:var(--paper); box-shadow:var(--shadow-sm); }
.thanks-ref span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.thanks-ref strong{ font-family:var(--serif); font-size:1.6rem; }
.thanks-recap{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:30px; text-align:start; box-shadow:var(--shadow-sm); }
.thanks-recap > div{ display:flex; justify-content:space-between; padding:6px 0; }
.thanks-total{ border-top:1px solid var(--line); margin-top:8px; padding-top:14px !important; font-family:var(--serif); font-size:1.3rem; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--ink); color:var(--porcelain); margin-top:auto; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-block:48px; }
.footer-brand-top{ display:flex; align-items:center; gap:12px; }
.footer-logo-icon{ width:26px; height:26px; object-fit:contain; }
.footer-wordmark{ color:var(--porcelain); text-align:start; font-size:1.6rem; }
.footer-tagline{ color:#b9bcae; max-width:36ch; margin:12px 0 0; font-size:.95rem; }
.footer-phone a{ color:var(--porcelain); }
.footer-copy{ align-self:flex-end; font-size:.76rem; letter-spacing:.1em; color:#9a9d8f; }
.lang-ar .footer-copy{ letter-spacing:.02em; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:900px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .benefits-grid,.reviews-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; aspect-ratio:1/1; }
  .pdp-grid{ grid-template-columns:1fr; }
  .gallery{ position:static; }
  .mobile-bar{ display:flex; }
  body.has-mobile-bar{ padding-bottom:76px; }
}
@media (max-width:560px){
  .product-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .benefits-grid,.reviews-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .header-inner{ grid-template-columns:auto 1fr auto; }
  .menu-link{ display:none; }
  .wordmark{ text-align:start; }
}

/* Accessibilité */
:focus-visible{ outline:2px solid var(--eucalyptus); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================ VISUELS LANDING EMPILÉS ============================ */
.landing-stack{ max-width:720px; margin-inline:auto; padding:0 0 clamp(30px,5vw,60px); }
.landing-stack img{ width:100%; height:auto; display:block; margin:0 auto 14px; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.landing-stack-cta{ position:sticky; bottom:0; display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px; background:linear-gradient(to top, var(--porcelain) 70%, transparent); }
.landing-stack-cta .btn{ min-width:min(420px,90%); }
.landing-stack-price{ font-family:var(--serif); font-size:1.3rem; }
.landing-stack-price .price-old{ font-size:.9rem; }

/* ============================ WHATSAPP ============================ */
.btn-whatsapp{ background:#25D366; border-color:#25D366; color:#fff; margin-top:10px; box-shadow:0 8px 20px rgba(37,211,102,.25); }
.btn-whatsapp:hover{ background:#1da851; border-color:#1da851; }
.wa-float{
  position:fixed; inset-inline-end:18px; bottom:18px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(37,211,102,.35); transition:.2s;
}
.wa-float:hover{ transform:translateY(-3px) scale(1.04); }
@media (max-width:768px){ .wa-float{ bottom:86px; } } /* au-dessus de la barre commander mobile */

/* ============================ NAV COMPLÈTE ============================ */
.header-inner{ display:flex; align-items:center; gap:22px; height:70px; }
.header-inner .wordmark{ text-align:start; flex:0 0 auto; }
.main-nav{ display:flex; align-items:center; gap:22px; margin-inline:auto; }
.main-nav > a, .nav-drop-top{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; transition:.2s; }
.lang-ar .main-nav > a, .lang-ar .nav-drop-top{ letter-spacing:.02em; font-size:.95rem; }
.main-nav > a:hover, .nav-drop-top:hover{ color:var(--ink); }
.header-right{ flex:0 0 auto; margin-inline-start:0; }

.nav-drop{ position:relative; }
.nav-drop-menu{
  position:absolute; top:100%; inset-inline-start:50%; transform:translateX(-50%) translateY(8px);
  background:var(--paper); border:1px solid var(--line); min-width:220px; padding:8px;
  display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:.18s; box-shadow:var(--shadow-lg); z-index:50;
  border-radius:var(--radius);
}
.lang-ar .nav-drop-menu{ transform:translateX(50%) translateY(8px); }
.nav-drop:hover .nav-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.lang-ar .nav-drop:hover .nav-drop-menu{ transform:translateX(50%) translateY(0); }
.nav-drop-menu a{ padding:10px 14px; font-size:.85rem; color:var(--ink-soft); border-radius:var(--radius-sm); }
.nav-drop-menu a:hover{ background:var(--eucalyptus-tint); color:var(--ink); }

.burger{ display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; flex:0 0 auto; }
.burger span{ height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

@media (max-width:820px){
  .burger{ display:flex; order:-1; }
  .header-inner{ gap:14px; }
  .header-inner .wordmark{ margin-inline:auto; text-align:center; font-size:1.05rem; }
  .main-nav{
    position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); margin:0; padding:8px 0;
    max-height:0; overflow:hidden; transition:max-height .28s ease; box-shadow:var(--shadow-md);
  }
  .nav-toggle:checked ~ .main-nav{ max-height:80vh; }
  .main-nav > a, .nav-drop-top{ padding:14px 24px; border-top:1px solid var(--line); }
  .nav-drop-menu{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; background:var(--sand); min-width:0; padding:0; border-radius:0; }
  .lang-ar .nav-drop-menu{ transform:none; }
  .nav-drop-menu a{ padding:12px 40px; border-radius:0; }
}

/* ============================ SECTION CATÉGORIES ============================ */
.cat-section{ padding:clamp(30px,6vw,70px) 0; }
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2.5vw,26px); }
.cat-card{ display:block; border:1px solid var(--line); background:var(--paper); transition:.3s cubic-bezier(.2,.8,.2,1); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.cat-card:hover{ transform:translateY(-5px); border-color:var(--eucalyptus); box-shadow:var(--shadow-md); }
.cat-card-media{ aspect-ratio:1/1; overflow:hidden; background:var(--sand); }
.cat-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.cat-card:hover .cat-card-media img{ transform:scale(1.06); }
.cat-card-body{ padding:16px 18px; text-align:center; }
.cat-card-body h3{ font-size:1.25rem; margin-bottom:6px; }
.cat-card-link{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--eucalyptus); }
.lang-ar .cat-card-link{ letter-spacing:.02em; }
.cat-hero{ padding:clamp(28px,5vw,56px) 0 6px; }

/* ============================ À PROPOS (teaser) ============================ */
.about-teaser{ padding:clamp(40px,7vw,84px) 0; }
.about-teaser-text{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.5; color:var(--ink); margin:10px 0 26px; }

/* ============================ FOOTER (colonnes) ============================ */
.footer-inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; align-items:start; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col-title{ font-family:var(--serif); font-size:1.05rem; color:var(--porcelain); margin-bottom:4px; }
.footer-col a{ color:#b9bcae; font-size:.9rem; transition:.2s; }
.footer-col a:hover{ color:var(--porcelain); }
.footer-info-line{ color:#b9bcae; font-size:.88rem; line-height:1.6; }
.footer-copy{ border-top:1px solid #33362f; padding-block:20px; font-size:.76rem; letter-spacing:.08em; color:#9a9d8f; }
.lang-ar .footer-copy{ letter-spacing:.02em; }
@media (max-width:900px){ .footer-inner{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:460px){ .cat-grid{ grid-template-columns:1fr 1fr; } }

/* ============================ RÉSEAUX SOCIAUX ============================ */
.social-row{ display:flex; gap:10px; margin-top:14px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:var(--porcelain); transition:.2s;
}
.social-row a:hover{ background:var(--eucalyptus); transform:translateY(-2px); }
.social-row-center{ justify-content:center; }
.social-row-center a{ background:var(--eucalyptus-tint); color:var(--eucalyptus-d); }
.social-row-center a:hover{ background:var(--eucalyptus); color:#fff; }

/* ============================ LOCALISATION ============================ */
.location-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,26px); margin-top:32px; }
.location-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; text-align:center; box-shadow:var(--shadow-sm); transition:.25s;
}
.location-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.location-icon{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%; background:var(--eucalyptus-tint);
  color:var(--eucalyptus); display:grid; place-items:center;
}
.location-icon svg{ width:26px; height:26px; }
.location-card h3{ font-family:var(--serif); font-size:1.25rem; margin-bottom:8px; }
.location-card p{ color:var(--ink-soft); margin:0 0 14px; line-height:1.6; }
.location-card a.btn{ margin-top:4px; }
.btn-sm-pad{ padding:11px 20px; font-size:.75rem; }
@media (max-width:768px){ .location-grid{ grid-template-columns:1fr; } }