/* style.css : Squelette & utilitaires
   Réorganisation : variables regroupées dans :root, media queries en bas.
*/

/*======================================================================
  Variables
======================================================================*/
:root {
  --color-primary:#04a64a;
  --color-primary-rgb:4 166 74;
  --color-primary-dark:#005d32;
  --color-primary-light:#eff6ee;
  --color-bg:#ffffff;
  --color-text:#1d1f1e;
  --color-text-light:#ffffff;
  --color-border:#e9f3e9;
  --color-placeholder:#6f736f;
  --cat-sante:#ef7c00;
  --cat-micronutrition:#0075be;
  --cat-aromatherapie:#04a64a;
  --cat-phytotherapie:#a2c516;
  --cat-infusions:#8b331b;
  --cat-sante-light:#fdf2e6;
  --cat-micronutrition-light:#e9eef9;
  --cat-aromatherapie-light:#e9f3e9;
  --cat-phytotherapie-light:#f4f6e3;
  --cat-infusions-light:#f5e9e3;

  --radius-xs:3px;
  --radius-s:6px;
  --radius-m:10px;

  --shadow-sm:0 2px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.12);

  --font-size:15px;
  --font-base:Arial, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;

  --transition:150ms ease;
  --container-max:1280px;

  --space-2xs:.25rem;
  --space-xs:.5rem;
  --space-s:.75rem;
  --space-m:1rem;
  --space-l:1.5rem;
  --space-xl:2rem;
  --space-2xl:80px;

  --line-max:68ch;
}

.fav-btn .icon-heart path {
  fill: none;
  stroke: #ef7c00;
}

.fav-btn.is-active .icon-heart path {
  fill: #ef7c00;
  stroke: #ef7c00;
}

/*======================================================================
  Reset / Base
======================================================================*/
*{box-sizing:border-box;}
html{font-size:16px;}
body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--font-size);
  line-height:1.5;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{line-height:1.15;margin:0 0 var(--space-m);}
p{margin:0 0 var(--space-m);}
ul{margin:0;padding:0;list-style:none;}
input,button,select,textarea{font:inherit;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
[hidden]{display:none !important;}
.bg-primary a{color:#fff;}

/*======================================================================
  Layout Helpers & Utilities
======================================================================*/
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  /*padding-inline:var(--space-m);*/
}
.container-960{
  width:100%;
  max-width:960px;
  margin-inline:auto;
  /*padding-inline:var(--space-m);*/
}
.full-bleed{width:100%;}
.section{padding-block:var(--space-2xl);}
.section.no-padding{padding-block:0;}
.flex{display:flex;}
.center-y{align-items:center;}
.center-x{justify-content:center;}
.between{justify-content:space-between;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;}
.gap-xs{gap:var(--space-xs);}
.gap-s{gap:var(--space-s);}
.gap-m{gap:var(--space-m);}
.text-center{text-align:center;}
.text-on-primary{color:var(--color-text-light);}
.small{font-size:.8125rem;}
.link-underline{text-decoration:underline;text-underline-offset:2px;}
.u-mb-0{margin-bottom:0;}
.u-mb-xs{margin-bottom:var(--space-xs);}
.u-mb-s{margin-bottom:var(--space-s);}
.u-mb-m{margin-bottom:var(--space-m);}
.bg-primary{background:var(--color-primary);}
.bg-light{background:var(--color-primary-light);}
.font-normal{font-weight:400!important;}
/* Alternance sections auto (peut être retiré si besoin) */
.section:nth-of-type(even):not(.bg-primary):not(.bg-light):not(.bg-none){
  background:var(--color-primary-light);
}


/*======================================================================
  Buttons
======================================================================*/
.btn{
  --btn-bg:#f3f5f3;
  --btn-color:var(--color-text);
  --btn-border:var(--color-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5ch;
  padding:.25rem 1.5rem;;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--btn-color);
  cursor:pointer;
  transition:var(--transition);
  border-radius: 999px;
}
.btn:hover{filter:brightness(.95);}
.btn:active{transform:translateY(1px);}
.btn-primary{
  --btn-bg:var(--color-primary);
  --btn-color:#fff;
  --btn-border:var(--color-primary);
}
.btn-outline{
  --btn-bg:transparent;
  --btn-color:var(--color-primary);
  --btn-border:var(--color-primary);
}
.btn-white{
  --btn-bg:#fff;
  --btn-color:var(--color-primary);
  --btn-border:#fff;
}
.btn-slim{
  padding:.25rem 1.5rem;;
  font-size:calc(15/14 * var(--font-size));
  color:#fff;
}
.btn-large{
  padding:.5rem 1.5rem;;
  font-size:calc(15/14 * var(--font-size));
  color:#fff;
}
.btn-orange{
  --btn-bg:#ef7c00;
  --btn-border:#ef7c00;
  --btn-color:#fff;
  background:var(--btn-bg);
  border:1px solid var(--btn-border);
  color:var(--btn-color);
}
.btn-orange:hover{filter:brightness(.95);}
.btn-orange:active{transform:translateY(1px);}
.btn.no-round{border-radius:0;}
.btn.pad-side{padding-inline:var(--space-xs);}
.btn.uppercase{text-transform:uppercase;}
.btn.white{color:#fff !important;}
/*======================================================================
  Top bar
======================================================================*/
.top-bar{min-height:35px;font-size:.8125rem;}
.top-bar__msg{margin:0;font-weight:500;display:flex;}
.top-bar a{color:inherit;text-decoration:none;font-weight:600;}
.sep{opacity:.4;}

/*======================================================================
  Header / Navigation / Drawer
======================================================================*/
.site-header{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  position:relative;
  z-index:10;
}

/* Header nav items (buttons and anchors share the same class) */
.nav-list .nav-root{font-weight:600; position:relative; background:none; border:0; cursor:pointer; padding:.25rem .75rem; color:inherit; text-decoration:none}
.nav-list .nav-root::after{content:""; position:absolute; left:0; right:0; bottom: calc(-2px - var(--underline-shift, 0px)); height:3px; background: var(--color-primary);}
.nav-list .nav-root.produits{background:var(--color-primary);color:#fff!important;border-radius:0;padding:5px 1em;}

/* Fixed header behavior */
.top-bar.is-fixed{position:fixed;top:0;left:0;right:0;z-index:1100}
.site-header.is-fixed{position:fixed;left:0;right:0;z-index:1099;top:var(--fixed-header-top, 35px)}
body.has-fixed-header{padding-top:var(--fixed-header-offset, 120px)}

.icon-btn{position:relative; display:inline-flex; align-items:center; justify-content:center}
.cart-badge{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ef7c00; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px #fff}

/* Force header inline SVG icons (loupe, panier, compte) to primary green when using stroke="currentColor" */
.search-bar__icon, .user-icons .icon-btn { color: var(--color-primary); }

/*======================================================================
  Toast notifications
======================================================================*/
.toast-wrap{position:fixed;top:8px;right:max(8px, calc((100vw - var(--container-max)) / 2));z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:300px;max-width:420px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:var(--shadow-md);padding:10px 12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-8px);animation:toast-in .2s ease forwards}
.toast + .toast{animation-delay:.05s}
.toast-head{display:flex;align-items:center;gap:10px}
.toast-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:800;color:#fff}
.toast-icon.add{background: var(--color-primary)}
.toast-icon.fav{background: #ef7c00}
.toast-icon.remove{background: #e9e9e9;color:#666}
.toast-title.add{color: var(--color-primary)}
.toast-title.fav{color: #ef7c00}
.toast-title.remove{color: #9d9d9c}
.toast-close{margin-left:auto;background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:#666}
.toast-body{display:flex;align-items:center;gap:10px;}
.toast-thumb{width:48px;height:48px;overflow:hidden;flex:0 0 auto;background:#f3f4f6;border:1px solid #eef0f2;display:flex;align-items:center;justify-content:center}
.toast-name{margin:0;font-size:14px;font-weight:700;}
.toast-thumb img{width:100%;height:100%;object-fit:cover}
.toast-content{flex:1 1 auto}
.toast-title{margin:0 0 2px 0;font-size:.93rem}
.toast-sub{margin:0;color:#475569;font-size:.875rem;line-height:1.3}
.toast-close{background:transparent;border:0;color:#64748b;cursor:pointer;line-height:1;padding:4px;flex:0 0 auto}
.toast-close:hover{color:#111827}

/*======================================================================
  Utilities (spacing, sizing, typography, display)
  Note: additive only; do not remove existing utilities.
======================================================================*/
/* Spacing */
.pt-0{padding-top:0 !important}
.pb-0{padding-bottom:0 !important}
.p-12{padding:12px !important}
.px-12{padding-left:12px !important; padding-right:12px !important}
.py-8{padding-top:8px !important; padding-bottom:8px !important}
.mt-s{margin-top:var(--space-s) !important}
.mt-m{margin-top:var(--space-m) !important}
.mt-24{margin-top:24px !important}
.mb-8{margin-bottom:8px !important}
.mb-12{margin-bottom:var(--font-size) !important}
.m-0{margin:0 !important}
.my-6{margin-top:6px !important; margin-bottom:6px !important}
.ml-auto{margin-left:auto !important}
/* Gaps */
.gap-10{gap:10px !important}
/* Display helpers */
.flex{display:flex !important}
.center-y{align-items:center !important}
.between{justify-content:space-between !important}
/* Typography */
.fs-13{font-size:13px !important}
.fs-90{font-size:.9rem !important}
.fw-800{font-weight:800 !important}
.text-555{color:#555 !important}
/* Sizing / color */
.min-h-250{min-height:250px !important}
.bg-danger{background:#FF4456 !important; color:#fff}

/*======================================================================
  Header small tweaks
======================================================================*/
.user-icons{display:flex;gap:14px;align-items:center;padding-top:.25rem}
.user-icons .icon-btn svg{display:block}
.nav-list .nav-root.nav-root--connected{color:var(--color-primary)}


/* fiche produit styles are now in assets/css/fiche_produit.css */

/*======================================================================
  Slider widget generic (moved from inline styles in pages)
======================================================================*/
.slider-widget .dyn-slider-viewport{overflow:hidden;position:relative}
.slider-widget .dyn-slider-track{display:flex;gap:1rem;transition:transform .4s}
.slider-widget .dyn-nav{background:#fff;border:1px solid #e2e8f0;padding:.4rem .6rem;border-radius:4px;margin:.5rem .25rem;font-size:14px;cursor:pointer}
.slider-widget .dyn-dots{display:flex;gap:.35rem;margin-top:.5rem}
.slider-widget .dyn-dots button{width:8px;height:8px;border-radius:50%;background:#cbd5e1;border:0}
.slider-widget .dyn-dots button.is-active{background:#FF4456}
.p-badge{display:inline-block;background:#FF4456;color:#fff;padding:2px 6px;border-radius:12px;font-size:12px;margin-top:4px}
@keyframes toast-in{to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}
.header-grid{
  display:flex;
  align-items:center;
  gap:var(--space-xl);
  min-height:100px;
  position:relative;
}
.logo{
  flex:0 0 auto;
  font-size:1.4rem;
  font-weight:700;
  color:var(--color-primary);
  text-decoration:none;
  display:inline-block;
  position:absolute;
  top:0;
}
.logo img{width:100px;height:auto;display:block;}
.nav-middle{
  flex:0 1 auto;
  width:auto;
  min-width:0;
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-s);
  margin-left:150px;
  height: auto;
  justify-content: center;
}
.search-bar{
  --icon-size:16px;
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  padding:.25rem 0 .35rem;
  margin:0;
  width:100%;
  max-width:100%;
  border:0;
  border-bottom:2px solid var(--color-primary);
  border-radius:0;
  background:transparent;
  color:var(--color-primary);
  font-size:var(--font-size);
  line-height:1.2;
}
.search-bar__icon{
  display:inline-flex;
  width:var(--icon-size);
  height:var(--icon-size);
  flex:0 0 var(--icon-size);
  color:var(--color-primary);
}
.search-bar input{
  flex:1;
  min-width:0;
  border:0;
  padding:0;
  font:inherit;
  background:transparent;
  color:var(--color-text);
  outline:0;
}
.search-bar input::placeholder{
  color:var(--color-placeholder);
  opacity:1;
  font-size:var(--font-size);
}
.search-bar button{display:none;}

.nav-list{
  display:flex;
  gap:var(--space-m);
  font-weight:500;
  flex-wrap:nowrap;
}
.nav-list a{
  text-decoration:none;
  color:var(--color-text);
  position:relative;
  padding:.25rem 0;
}
.nav-list a:after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:2px;
  width:0;
  background:var(--color-primary);
  transition:width var(--transition);
}
.nav-list a:hover:after{width:100%;}
.header-cta{
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
  text-align:right;
}
.header-cta p{
  display:inline-flex;
  color:var(--color-primary); 
  font-weight:bold;
}
.header-cta .btn{white-space:nowrap;}
.nav-toggle{
  display:none;
  position:absolute;
  right:var(--space-m);
  top:50%;
  translate:0 -50%;
  background:var(--color-primary);
  color:#fff;
  border:0;
  padding:.55rem .9rem;
  border-radius:var(--radius-s);
  cursor:pointer;
}
.drawer{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  padding:var(--space-m);
  display:grid;
  gap:var(--space-m);
}

/* Header popin (connected only) */
.header-popin{ position:fixed; z-index:1200; top:calc(var(--fixed-header-offset, 120px)); /* right set dynamically via JS to align with .container .header-grid */ }
.header-popin-tab{ border:none; background:#fff; padding:0 8px; width:auto; height:20px; display:flex; align-items:center; justify-content:center; border-radius:0 0 10px 10px; box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; gap:4px; }
.header-popin-tab img{ display:block; width:15px; height:7px; }
.header-popin-box{ width:320px; /* auto height */ background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18); border-radius:0 0 5px 5px; overflow:hidden; position:absolute; right:0; }
.header-popin[aria-expanded="true"] .header-popin-tab{ display:none; }
.header-popin .popin-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px 6px; }
.header-popin .popin-greet{ margin:0; font-weight:normal; font-family:Arial, sans-serif; font-size:14px; }
.header-popin .popin-close{ background:none; border:none; padding:4px; cursor:pointer; }
.header-popin .popin-body{ padding:10px 12px; }
.header-popin .popin-row{ display:flex; align-items:center; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.header-popin .popin-progress{ --p:0%; background:#f2f2f2; height:8px; border-radius:4px; overflow:hidden; position:relative; }
.header-popin .popin-progress > span{ display:block; height:100%; width:var(--p); background:#2a7d2e; }
.header-popin .popin-cart-btn{ display:inline-flex; align-items:center; gap:5px; margin:8px 0 15px 0; padding:5px 10px; background:#fff; color:var(--color-primary); font-family:Arial, sans-serif; font-size:14px; font-weight:bold; border:2px solid var(--color-primary); border-radius:50px; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease; float:right; }
.header-popin .popin-cart-btn:hover span{ text-decoration:underline; }
.popin-reload-btn{ display:flex; width:100%; align-items:center; gap:5px; background:var(--color-primary); color:#fff; text-decoration:none; font-weight:bold; font-family:Arial, sans-serif; font-size:14px; padding:5px 10px; border-radius:50px; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:background .15s ease, color .15s ease, border-color .15s ease; border:2px solid var(--color-primary); }
.popin-reload-btn img{ width:20px; height:20px; display:block; }
.popin-reload-btn:hover span{ text-decoration:underline; }
.header-popin .popin-labels{ margin-top:6px; }
.header-popin .popin-franco{ color:var(--color-primary); font-weight:bold; font-family:Arial, sans-serif; font-size:14px; }
.header-popin .popin-franco sup{ font-size:.8em; line-height:0; }
.header-popin .popin-total{ display:flex; align-items:baseline; gap:8px; }
.header-popin .popin-total-text{ font-family:Arial, sans-serif; font-weight:normal; color:#111; font-size:14px; }
.header-popin .popin-total-value{ font-family:Arial, sans-serif; font-weight:bold; color:#111; font-size:20px; }
.header-popin .popin-total-value .pt-sup{ font-size:.6em; line-height:0; }
.drawer .nav-list.vertical{
  flex-direction:column;
  gap:var(--space-s);
}
.drawer{display:none;}
.drawer.is-open{display:grid;}

/*======================================================================
  Hero
======================================================================*/
.hero{
  background: url('../img/banner_bg.png') center/cover no-repeat;
  position: relative;
  min-height:720px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero__track{ position:relative; width:100%; height:100%; display:block; }

.hero__slide{ display:none; /* was display:grid */
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:center;
  gap:var(--space-2xl);
  animation:fade .6s;
}
.hero__slide.is-active{ display:grid; }
@keyframes fade{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.hero__content{max-width:480px;}
.hero__media .media-placeholder{
  background:#dfeee3;
  aspect-ratio:4/3;
  border-radius:var(--radius-m);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:var(--color-primary);
  font-size:1.2rem;
}
.hero__nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  background:rgba(var(--color-primary-rgb)/0.9);
  color:#fff;
  border:0;
  width:46px;
  height:46px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.hero__nav--prev{left:clamp(0px,(100vw - var(--container-max))/2 - 60px,40px);}
.hero__nav--next{right:clamp(0px,(100vw - var(--container-max))/2 - 60px,40px);}
.hero__dots{
  position:absolute;
  bottom:var(--space-l);
  left:50%;
  translate:-50% 0;
  display:flex;
  gap:.5rem;
}
.hero__dots button{
  width:12px;height:12px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.5);
  cursor:pointer;
  transition:var(--transition);
}
.hero__dots button.is-active,
.hero__dots button:hover{background:#fff;scale:1.15;}
.hero__grid{ display:flex; align-items:center; gap:24px; }
.hero__col--visual{ flex:0 0 75%; }
.hero__col--cta{ flex:0 0 25%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.hero__visual{
  max-width: 100%;
  height: auto;
  display: block;
}
.hero__headline{
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  margin: 0;
  color: var(--color-text, #0A4327);
}
@media (max-width: 900px){
  .hero__grid{ flex-direction: column; align-items: stretch; }
  .hero__col--visual, .hero__col--cta{ flex: 1 1 100%; }
  .hero__slide{ padding: 24px 0; }
}
/*======================================================================
  Categories (petits blocs)
======================================================================*/
.cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}
.cat-block{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  line-height:1;
  font-size:1rem;
  background:#ccc;
  transition:var(--transition);
}
.cat-block:hover{filter:brightness(.95);}
.cat--sante{background:#ef7c00;}
.cat--micro{background:#0075be;}
.cat--aroma{background:#04a64a;}
.cat--phyto{background:#a2c516;}
.cat--infusions{background:#8b331b;}

/*======================================================================
  USP (valeurs)
======================================================================*/
.usp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-m);
  margin:0;
}
.usp-item{
  text-align:center;
  padding:80px 1rem;
  font-size:calc(25/14 * var(--font-size));
  font-weight:600;
  line-height:1.2;
  color:var(--color-primary);
}

/*======================================================================
  Solutions (produits / sliders)
======================================================================*/
.solutions-title{
  color:var(--color-primary);
  font-size:calc(35/14 * var(--font-size));
  margin:var(--space-l) auto;
  line-height:1.15;
}
.ps-tabs{
  display:flex;
  justify-content:center;
  gap:var(--space-xl);
  margin:0 0 var(--space-l);
}
.ps-tab{
  background:none;
  border:0;
  padding:.4rem .75rem;
  font:600 calc(16/14 * var(--font-size)) var(--font-base);
  cursor:pointer;
  position:relative;
  color:var(--color-text);
}
.ps-tab:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:3px;
  background:var(--color-primary);
  scale:0 1;
  transform-origin:left;
  transition:scale var(--transition);
}
.ps-tab.is-active,
.ps-tab:focus-visible{color:var(--color-primary);}
.ps-tab.is-active:after{scale:1 1;}
.products-slider{
  position:relative;
  max-width:960px;
  margin:0 auto var(--space-xl);
}
.products-slider[hidden]{display:none;}
.ps-viewport{overflow:hidden;width:100%;}
.ps-track{
  display:flex;
  transition:transform 400ms ease;
  width:100%;
}
.ps-page{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-m);
  padding:var(--space-s) 0;
}
.product-card{
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:var(--space-m) var(--space-s);
  text-align:center;
  font-size:calc(13/14 * var(--font-size));
  gap:var(--space-s);
}
.product-card .p-thumb{
  width:100%;
  aspect-ratio:1/1;
  background:#f2f5f2;
  border-radius:var(--radius-xs);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:var(--color-primary);
  font-size:.85rem;
}
.product-card .p-title{
  margin:0;
  font-size:calc(14/14 * var(--font-size));
  line-height:1.25;
  font-weight:600;
}
.ps-nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:rgba(var(--color-primary-rgb)/0.9);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:var(--shadow-sm);
}
.ps-prev{left:-60px;}
.ps-next{right:-60px;}
.ps-more-wrap{text-align:center;}

/*======================================================================
  Catégories pleine largeur (carrés images)
======================================================================*/
.cat-wide-section{padding:0;overflow:hidden;}
.cat-wide-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  width:100%;
  margin-inline:0;
  background:white;
}
.cat-wide-item{
  position:relative;
  aspect-ratio:1/1;
  display:block;
  background:#ccc;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  isolation:isolate;
}
.cat-wide-item:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
  z-index:0;
}
.cat-wide-item.cat--sante:after{background:url('/images/front/Sante_et_bien_etre_visuel-e5918a.png') var(--cat-sante-light) no-repeat;background-size:contain;}
.cat-wide-item.cat--micro:after{background:url('/images/front/Micronutrition_visuel-c5ff5c.png') var(--cat-micronutrition-light) no-repeat;background-size:contain;}
.cat-wide-item.cat--aroma:after{background:url('/images/front/Aromathe-rapie_visuel-a19f70.png') var(--cat-aromatherapie-light) no-repeat;background-size:contain;}
.cat-wide-item.cat--phyto:after{background:url('/images/front/Phytotherapie_visuel-db781b.png') var(--cat-phytotherapie-light) no-repeat;background-size:contain;}
.cat-wide-item.cat--infusions:after{background:url('/images/front/Infusions_et_thes_visuel-copie-1cdaa0.png') var(--cat-infusions-light) no-repeat;background-size:contain;}
.cat-wide-label{
  position:absolute;
  left:50%;
  bottom:25px;
  transform:translateX(-50%);
  display:inline-block;
  background:var(--cat-color);
  color:#fff;
  font-weight:600;
  font-size:calc(15/14 * var(--font-size));
  line-height:1;
  padding:.85rem 1.4rem;
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
  z-index:1;
  transition:filter var(--transition);
}
.cat-wide-item:hover .cat-wide-label{filter:brightness(.95);}

/*======================================================================
  Needs (icônes)
======================================================================*/
.needs-grid{
  --cols:4;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--space-xl) var(--space-l);
  padding:var(--space-l) 0 0;
  margin:0;
  list-style:none;
}
.need-item{text-align:center;}
.need-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-s);
  height:100%;
  outline:0;
  padding:.25rem;
  border-radius:var(--radius-s);
  transition:all var(--transition);
}
.need-link:focus-visible{background:var(--color-primary-light);}
.need-icon{
  width:70px;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:600;
  color:var(--color-primary);
  background:linear-gradient(135deg,#ffffff,#f3f7f3);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}
.need-text{
  color:var(--color-primary-dark);
  margin:0;
  font-size:calc(16/14 * var(--font-size));
  font-weight:600;
  line-height:1.15;
  text-transform:none;
}
.need-text .alt-line{display:unset;font-weight:inherit;}

.need-link:hover .need-text{
  text-decoration:underline;
}

/*======================================================================
  Section Avantages (ancienne .pharma-adv / nouvelle renommée)
======================================================================*/
.pharma-adv-section{
  background:var(--color-primary-light);
  padding:80px 0;
}
.pharma-adv-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-xl) var(--space-l);
  margin:0 0 60px;
  text-align:center;
}
.pharma-adv-item img{
  width:100%;
  height:auto;
  display:block;
  margin:0 auto var(--space-m);
}
.adv-text{
  color:var(--color-primary-dark);
  margin:0;
  font-size:calc(25/14 * var(--font-size));
  font-weight:600;
  line-height:1.15;
}
.adv-actions{
  display:flex;
  justify-content:center;
  gap:var(--space-l);
  flex-wrap:wrap;
}

/* Nouvelle version renommée (éviter bloqueurs) */
.pharma-benefits-section{
  background:var(--color-primary-light);
  padding:80px 0;
}
.pharma-benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-xl) var(--space-l);
  margin:60px 0;
  text-align:center;
}
.pharma-benefits-grid .pharma-benefit{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-m);
}
.pharma-benefit img{
  height:auto;
  display:block;
  margin:0 auto var(--space-m);
}
.ph-benefit-text{
  color:var(--color-primary-dark);
  margin:auto 0 0 0;
  font-size:calc(25/14 * var(--font-size));
  font-weight:600;
  line-height:1.15;
}
.ph-benefit-actions{
  display:flex;
  justify-content:center;
  gap:var(--space-l);
  flex-wrap:wrap;
}
.ph-benefit-actions .btn{border-radius:2rem;}
/* Fallback si ancien markup */
html body .adv-text{display:block !important;}

/*======================================================================
  Proximité officine
======================================================================*/
.near-office-section{background:#fff;}
.near-office-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-2xl) var(--space-xl);
  align-items:start;
  margin-top:var(--space-xl);
}
.near-office-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:520px;
  margin-inline:auto;
  gap:var(--space-m);
}

.near-office-heading{
  margin:0;
  font-size:calc(30/14 * var(--font-size));
  line-height:1.15;
  color:var(--color-primary-dark);
  font-weight:700;
}
.near-office-sub{
  margin:0;
  font-size:calc(25/14 * var(--font-size));
  line-height:1.2;
  font-weight:600;
  color:var(--color-primary);
}
.near-office-text{
  margin:0;
  font-size:var(--font-size);
  line-height:1.45;
  color:var(--color-text);
  max-width:46ch;
}

/*======================================================================
  Full CTA Section
======================================================================*/
.full-cta-section{
  background:var(--color-primary)!important;
  padding:40px 0;
  color:#fff;
}
.full-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-xl);
  flex-wrap:wrap;
}
.full-cta-left{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--space-l);
  flex:1 1 520px;
}
.full-cta-lead{
  margin:0;
  font-size:calc(20/14 * var(--font-size));
  font-weight:600;
  line-height:1.25;
}
.full-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:.25rem 1.5rem;
  border:2px solid #fff;
  background:#fff;
  color:var(--color-primary);
  font-weight:600;
  font-size:calc(15/14 * var(--font-size));
  text-decoration:none;
  border-radius:999px;
  transition:var(--transition);
}
.full-cta-btn:hover{
  background:var(--color-primary);
  color:#fff;
}
.full-cta-right{
  display:flex;
  align-items:center;
  gap:var(--space-m);
  flex:0 0 auto;
}
.full-cta-follow{
  font-size:calc(14/14 * var(--font-size));
  font-weight:600;
  letter-spacing:.5px;
}
.full-cta-socials{
  display:flex;
  gap:var(--space-s);
}
.full-cta-social{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px white solid;
  color:var(--color-primary);
  text-decoration:none;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.full-cta-social:hover{
  background:var(--color-primary);
  color:#fff;
}

/*======================================================================
  Footer
======================================================================*/
.site-footer{
  background:#fff;
  border-top:1px solid var(--color-border);
}

/* Partenaires */
.partners-slider{
  position:relative;
  max-width:1280px;
  margin:0 auto;
}
.partners-viewport{overflow:hidden;width:100%;}
.partners-track{
  display:flex;
  transition:transform 450ms ease;
  width:100%;
}
.partners-page{
  flex:0 0 100%;
  padding:var(--space-l) 0;
}
.partners-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 colonnes */
  gap:var(--space-l) var(--space-xl);
  align-items:center;
}
.partner-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.5rem .75rem;
  height:140px;                /* cellule fixe compacte */
  overflow:hidden;
  transition:box-shadow var(--transition),border-color var(--transition);
  text-decoration:none;
}
.partner-item img{
  max-width:100%;
  max-height:115px;            /* contrainte hauteur logo */
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
.partners-nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:rgba(var(--color-primary-rgb)/0.9);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:var(--shadow-sm);
}
.partners-prev{left:-56px;}
.partners-next{right:-56px;}
.partners-dots{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:var(--space-m);
}
.partners-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:0;
  background:#c8d8c8;
  cursor:pointer;
  transition:background var(--transition),scale var(--transition);
}
.partners-dot.is-active,
.partners-dot:hover{
  background:var(--color-primary);
  scale:1.2;
}

/* Blog */
.blog-slider{
  position:relative;
  max-width:960px;
  margin:0 auto var(--space-2xl);
}
.blog-viewport{overflow:hidden;width:100%;}
.blog-track{
  display:flex;
  transition:transform 450ms ease;
  width:100%;
}
.blog-page{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
  gap:var(--space-xl);
  padding:var(--space-m) 0;
}
.blog-card{
  width:100%;
  max-width:225px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--space-s);
  font-size:var(--font-size);
}
.blog-img-wrap{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  background:#f2f5f2;
  border-radius:var(--radius-s);
  overflow:hidden;
}
.blog-img-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:scale 400ms ease;
}
.blog-img-wrap:hover img{scale:1.05;}
.blog-meta{
  margin:0;
  font-size:calc(12/14 * var(--font-size));
  font-weight:600;
  color:var(--color-primary);
}
.blog-title{
  font-size:calc(20/14 * var(--font-size));
  line-height:1.15;
  margin:.2rem 0;
}
.blog-title-link{
  color:var(--color-text);
  text-decoration:none;
}
.blog-title-link:hover{color:var(--color-primary);}
.blog-excerpt{
  margin:0;
  font-size:calc(12/14 * var(--font-size));
  line-height:1.35;
  color:var(--color-text);
  display:-webkit-box;
  line-clamp:2;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  max-width:100%;
}
.blog-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem 1.15rem;
  font-size:calc(13/14 * var(--font-size));
  font-weight:600;
  text-decoration:none;
  color:var(--color-primary);
  background:#fff;
  border:1px solid var(--color-primary);
  border-radius:999px;
  transition:var(--transition);
}
.blog-more:hover{
  background:var(--color-primary);
  color:#fff;
}
.blog-nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:rgba(var(--color-primary-rgb)/0.9);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:var(--shadow-sm);
}
.blog-prev{left:-56px;}
.blog-next{right:-56px;}
.blog-dots{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin:var(--space-m) 0 calc(var(--space-m) * 2 ) 0;
}
.blog-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  border:0;
  background:#c8d8c8;
  cursor:pointer;
  transition:background var(--transition),scale var(--transition);
}
.blog-dot.is-active,
.blog-dot:hover{
  background:var(--color-primary);
  scale:1.2;
}
.blog-all-wrap{
  text-align:center;
}
.blog-quote-block{
  margin:calc( var(--space-xl) * 2) auto 0;
  text-align:center;
}
.blog-quote{
  margin:0 0 var(--space-s);
  font-size:calc(30/14 * var(--font-size));
  line-height:1.25;
  font-weight:600;
  color:var(--color-primary);
  font-style:normal;
}
.blog-quote-source{
  font-size:calc(18/14 * var(--font-size));
  color:var(--color-primary);
  font-weight:500;
  margin:0;
}

/* --- Univers Page Helpers --- */
.univers-page .section { padding: 50px 0; }
.cat-sante, .cat--sante, .univers-page.cat-sante { --cat-color:var(--cat-sante); }
.cat-micro, .cat--micro, .univers-page.cat-micro { --cat-color:var(--cat-micronutrition); }
.cat-aroma, .cat--aroma, .univers-page.cat-aroma { --cat-color:var(--cat-aromatherapie); }
.cat-phyto, .cat--phyto, .univers-page.cat-phyto { --cat-color:var(--cat-phytotherapie); }
.cat-infusions, .cat--infusions, .univers-page.cat-infusions { --cat-color:var(--cat-infusions); }

.uv-breadcrumb { font-size:12px; margin-bottom:calc(18/14 * var(--font-size)); display:flex; flex-wrap:wrap; gap:4px; }
.uv-breadcrumb a { text-decoration:none; color:#444; }
.uv-bc-sep { color:#999; }
.uv-h1 { font-size:35px; line-height:1.15; text-align:center; font-weight:700; margin:0; color:#111; }
.uv-h1-sub { font-size:25px; line-height:1.25; text-align:center; margin:10px auto 0; max-width:820px; color:#111; font-weight:400; }

.univers-page .section:nth-of-type(even):not(.bg-primary):not(.bg-light){ background:#fff; }
.uv-cat-band { padding:0 0 0 0; background:#e9f3e9; }
.cat-sante .uv-cat-band{ padding:0 0 0 0; background:var(--cat-sante-light)!important; }
.cat-micro .uv-cat-band{ padding:0 0 0 0; background:var(--cat-micronutrition-light)!important; }
.cat-aroma .uv-cat-band{ padding:0 0 0 0; background:var(--cat-aromatherapie-light)!important; }
.cat-phyto .uv-cat-band{ padding:0 0 0 0; background:var(--cat-phytotherapie-light)!important; }
.cat-infusions .uv-cat-band{ padding:0 0 0 0; background:var(--cat-infusions-light)!important; }


.uv-intro-flex { display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.uv-intro-text { flex:1 1 380px; }
.uv-intro-media { flex:1 1 360px; max-width:520px; }
.uv-intro-h2 { font-size:35px;color:var(--cat-color,#005d32); margin:0 0 14px; line-height:1.15; font-weight:700; }
.uv-intro-sub { font-size:14px; line-height:1.4; margin:0 0 18px; color:#222; }
.uv-btn { display:inline-block; font-size:13px; padding:10px 20px; border-radius:999px; font-weight:600; text-decoration:none; transition:.25s; }
.uv-btn-cat { background:var(--cat-color,#005d32); color:#fff; }
.uv-btn-cat:hover { background:#fff; color:var(--cat-color,#005d32); box-shadow:0 0 0 1px var(--cat-color,#005d32) inset; }

.uv-ratio { position:relative; padding-top:60%; overflow:hidden; background:#ddd; margin:0; }
.uv-ratio img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.uv-ratio-sm { position:relative; padding-top:66%; overflow:hidden; margin:0; }
.uv-ratio-sm img { position:absolute; inset:0; object-fit:cover; }

.uv-feature-col { display:flex; gap:50px; align-items:center; flex-wrap:wrap; }
.v-align-top{ align-items: baseline;}
.uv-feature-text { flex:1 1 380px; }
.uv-feature-media { flex:1 1 320px; }
.bloc-vert{
  text-align:center;
  padding:1rem;
  background:var(--color-border);
}

.default-page section h2:not(.blog-title) { font-size:35px; margin:0 0 var(--font-size); font-weight:700; color:var(--color-primary,#005d32); }
.default-page section h3:not(.blog-title) { font-size:25px; margin:0 0 var(--font-size); font-weight:700; color:var(--color-primary,#005d32); }
.default-page section h4:not(.blog-title) { font-size:20px; margin:0 0 var(--font-size); font-weight:700; color:var(--color-primary,#005d32); }

.univers-page section h2 { font-size:35px; margin:0 0 var(--font-size); font-weight:700; color:var(--cat-color,#005d32); }
.univers-page section h3 { font-size:25px; margin:0 0 var(--font-size); font-weight:700; color:var(--cat-color,#005d32); }
.univers-page section p { margin:0; font-size:14px; }
.univers-page section.uv-feature p{ margin:0 0 1rem 0;}
.uv-feature.uv-invert .uv-feature-flex { flex-direction:row-reverse; }

/* align for two-column uv-feature grid */
.uv-feature--align-left { text-align: left;  justify-content:flex-start;}
.uv-feature--align-right { text-align: right; justify-content:flex-end; }

/* ensure image block behaves correctly */
.uv-feature--align-left img { display:inline-block; max-width:100%; height:auto; }
.uv-feature--align-right img { display:inline-block; max-width:100%; height:auto; }

/* optional: align inner text blocks if needed */
.uv-feature--align-left .uv-feature-text-inner { text-align:left;  justify-content:flex-start; }
.uv-feature--align-right .uv-feature-text-inner { text-align:right; justify-content:flex-end; }

.uv-testimony-section{
  padding:60px 0;
  background:var(--color-primary-light);
}
.univers-page.cat-sante .uv-testimony-section,
section.cat-sante-light
{background:var(--cat-sante-light);}
.univers-page.cat-micro .uv-testimony-section,
section.cat-micronutrition-light{background:var(--cat-micronutrition-light);}
.univers-page.cat-aroma .uv-testimony-section,
section.cat-aromatherapie-light{background:var(--cat-aromatherapie-light);}
.univers-page.cat-phyto .uv-testimony-section,
section.cat-phytotherapie-light{background:var(--cat-phytotherapie-light);}
.univers-page.cat-infusions .uv-testimony-section,
section.cat-infusions-light{background:var(--cat-infusions-light);}
/* Listing produits styles moved to assets/css/produits.css */
/* Responsive */
@media (max-width:900px){
  .uv-testimony-grid{gap:40px;}
  .uv-testimony-author{font-size:20px;}
}
@media (max-width:640px){
  .uv-testimony-grid{flex-direction:column;align-items:flex-start;}
  .uv-testimony-media{max-width:220px;}
  .uv-testimony-author{font-size:19px;}
  .uv-testimony-sub{font-size:13.5px;}
}
@media (max-width:480px){
  .uv-testimony-section{padding:44px 0;}
  .uv-testimony-author{font-size:18px;}
  .uv-testimony-sub{font-size:13px;}
}

@media (max-width:820px){
  .uv-intro-h2 { font-size:30px; }
  .uv-h1 { font-size:30px; }
  .uv-h1-sub { font-size:21px; }
  .uv-feature-h3 { font-size:22px; }
}

@media (max-width:600px){
  .uv-intro-flex { gap:24px; }
  .uv-feature-flex { gap:32px; }
  .uv-h1 { font-size:28px; }
  .uv-h1-sub { font-size:20px; }
}

/* Responsive blog */
@media (max-width:1100px){
  .blog-prev{left:0;}
  .blog-next{right:0;}
}
@media (max-width:820px){
  .blog-page{gap:var(--space-l);}
}
@media (max-width:680px){
  .blog-page{
    flex-wrap:wrap;
  }
  .blog-card{
    max-width:calc(50% - var(--space-l));
  }
}
@media (max-width:520px){
  .blog-card{
    max-width:100%;
  }
}

/* Responsive partenaires */
@media (max-width:1100px){
  .partners-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:1000px){
  .partners-grid{gap:var(--space-m) var(--space-l);}
}
@media (max-width:800px){
  .partners-prev{left:0;}
  .partners-next{right:0;}
  .partners-grid{grid-template-columns:repeat(2,1fr);}
  .partner-item{height:130px;}
}
@media (max-width:580px){
  .partners-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .partners-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-m);}
  .partner-item{height:120px;padding:.4rem .5rem;}
  .partner-item img{max-height:105px;}
}
@media (max-width:400px){
  .partners-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-m) var(--space-s);}
  .partner-item{aspect-ratio:3/2;padding:.5rem;}
}

/*======================================================================
  Media Queries (max-width) - ordre décroissant
======================================================================*/
@media (max-width:1200px){
  .ps-prev{left:0;}
  .ps-next{right:0;}
  .footer-nav-grid{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .cat-wide-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
}

@media (max-width:1000px){
  .usp-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}

@media (max-width:960px){
  .nav-middle{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-cta{display:none;}
  #drawer .search-bar{width:100%;}
  .header-grid{grid-template-columns:auto auto 1fr;min-height:80px;}
}

@media (max-width:900px){
  .needs-grid{--cols:3;}
  .pharma-adv-grid{grid-template-columns:repeat(2,1fr);}
  .pharma-benefits-grid{grid-template-columns:repeat(2,1fr);}
  .ph-benefit-text,
  .adv-text{font-size:calc(22/14 * var(--font-size));}
  .near-office-grid{grid-template-columns:1fr;}
  .near-office-heading{font-size:calc(28/14 * var(--font-size));}
  .near-office-sub{font-size:calc(23/14 * var(--font-size));}
  .footer-nav-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:800px){
  .ps-page{grid-template-columns:repeat(2,1fr);}
  .full-cta-left{flex-direction:column;align-items:flex-start;gap:var(--space-m);}
  .full-cta-lead{font-size:calc(20/14 * var(--font-size));}
  .full-cta-right{width:100%;justify-content:flex-start;flex-wrap:wrap;}
}

@media (max-width:700px){
  .footer-nav-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  .needs-grid{--cols:2;gap:var(--space-l) var(--space-m);}
  .need-icon{width:60px;}
  .need-text{font-size:calc(15/14 * var(--font-size));}
}

@media (max-width:600px){
  .hero{min-height:560px;}
  .nav-list{gap:var(--space-m);}
  .section{padding-block:var(--space-xl);}
  .hero__nav--prev{left:10px;}
  .hero__nav--next{right:10px;}
  .usp-item{padding:40px 1rem;}
  .cat-wide-label{font-size:calc(14/14 * var(--font-size));padding:.7rem 1.1rem;bottom:18px;}
}

@media (max-width:520px){
  .pharma-adv-grid{grid-template-columns:1fr;}
  .pharma-adv-item img{width:70px;}
  .adv-text{font-size:calc(20/14 * var(--font-size));}

  .pharma-benefits-grid{grid-template-columns:1fr;}
  .pharma-benefit img{width:70px;}
  .ph-benefit-text{font-size:calc(20/14 * var(--font-size));}

  .ps-page{grid-template-columns:1fr;}
  .ps-prev,.ps-next{top:auto;bottom:-52px;translate:0 0;}
  .ps-prev{left:calc(50% - 50px);}
  .ps-next{right:calc(50% - 50px);}
  .products-slider{padding-bottom:70px;}

  .near-office-img{max-width:100%;aspect-ratio:16/10;}
  .near-office-heading{font-size:calc(26/14 * var(--font-size));}
  .near-office-sub{font-size:calc(21/14 * var(--font-size));}
}

@media (max-width:480px){
  .footer-nav-grid{grid-template-columns:1fr;}
  .footer-legal{flex-direction:column;align-items:flex-start;}
}

@media (max-width:400px){
  .needs-grid{--cols:1;}
}

/*======================================================================
  Footer Navigation
======================================================================*/
.footer-nav-section{
  padding:var(--space-2xl) 0;
}
.footer-nav-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--space-xl) var(--space-l);
  align-items:start;
}
.f-col-title{
  margin:0 0 var(--space-s);
  font-size:calc(14/14 * var(--font-size));
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--color-primary-dark);
  font-weight:700;
}
.f-links{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
}
.f-links a{
  text-decoration:none;
  font-size:calc(12/14 * var(--font-size));
  line-height:1.25;
  color:var(--color-primary-dark);
  transition:color var(--transition);
}
.f-links a:hover{color:var(--color-primary);}
.f-brand .f-logo img{display:block;width:70px;height:auto;}
.f-brand-text{
  font-size:calc(14/14 * var(--font-size));
  color:var(--color-primary);
  font-weight:600;
  line-height:1.3;
  max-width:18ch;
  margin:.75rem 0 0;
}
.f-subhead{
  margin:var(--space-m) 0 var(--space-s);
  font-size:calc(12/14 * var(--font-size));
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--color-primary-dark);
}
.f-contact{
  position:relative;
  font-size:calc(14/14 * var(--font-size));
  color:var(--color-primary);
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.f-contact-bar{
  width:48px;
  height:4px;
  background:var(--color-primary);
  border-radius:2px;
  margin:0 0 .9rem;
  display:inline-block;
}
.f-contact-line{
  margin:0;
  font-size:calc(14/14 * var(--font-size));
  line-height:1.25;
  color:var(--color-primary);
  font-weight:600;
}

.footer-bottom{
  background:#fff;
  border-top:1px solid var(--color-border);
  padding:1.2rem 0;
  font-size:calc(12/14 * var(--font-size));
}
.footer-bottom-inner{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-m);
  justify-content:center;
  align-items:center;
}
.footer-legal{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
}
.footer-legal li{
  padding:0 1rem;
  border-right: 1px solid #000;
}
.footer-legal a{
  text-decoration:none;
  color:var(--color-text);
  font-size:calc(12/14 * var(--font-size));
}
.footer-legal a:hover{color:var(--color-primary);}

/* Mega panels */
.mega-panels{
  position:absolute;
  top:100%;
  left:0;
  width:100vw;
  pointer-events:none;
  z-index:40;
}
.mega-panel{
  position:relative;
  width:100%;
  background:var(--color-primary-light);
  padding:0 0 44px;
  border-bottom:1px solid var(--color-border);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  pointer-events:auto;
  animation:megaFade .25s;
  max-height:260px;
  overflow:hidden;
}
@keyframes megaFade{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0;}}
.mega-panel-inner{
  padding-top:30px;
  display:flex;
  gap:60px;
  align-items:stretch;
  padding-left:var(--mega-left, 0);
  padding-right:clamp(24px,6vw,120px);
  box-sizing:border-box;
  max-height:260px;
  padding:20px clamp(24px,5vw,100px) 24px;
  gap:48px;
}
.mega-left{
  flex:1 1 auto;
  display:flex;
  max-height:100%;
  overflow:hidden;
}
.mega-right{
  flex:0 0 225px;
  max-width:225px;
  display:flex;
  align-items:stretch;
  max-height:100%;
}
.mega-right .mega-article{height:100%;}
.mega-links-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  max-width:620px;
  gap:40px 50px;
  display:flex;
  gap:48px;
  max-width:100%;
}
.mega-cols{
  display:flex;
  gap:48px;
  max-width:100%;
}
.mega-col{
  flex:1 1 0;
  min-width:180px;
  max-width:240px;
  display:flex;
  flex-direction:column;
}
.mega-group-title,
.mega-subhead{
  margin:0 0 .6rem;
  font-size:calc(13/14 * var(--font-size));
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--color-primary-dark);
}

.mega-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.35rem;
}
.mega-links a{
  text-decoration:none;
  font-size:calc(13/14 * var(--font-size));
  line-height:1.25;
  color:var(--color-primary-dark);
  position:relative;
  padding:.15rem 0;
  font-weight: bold;
}
.mega-links a:hover{color:var(--color-primary);}
.mega-article{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-m);
  display:flex;
  flex-direction:column;
  position:relative;
  text-decoration:none;
  color:inherit;
  width:100%;
}
.mega-article img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:4/3;
  display:block;
  transition:scale 400ms ease;
}
.mega-article:hover img{scale:1.05;}
.mega-article-label{
  color:var(--color-primary-dark);
  font-size:calc(12/14 * var(--font-size));
  padding: .75rem 0;
  font-weight:600;
  line-height:1;
}
.mega-multicol{
  columns:3 180px;           /* max 3 colonnes */
  column-gap:40px;
  max-height:calc(260px - 48px); /* (panel height - approx headings / padding) */
  overflow:hidden;
}
.mega-multicol > li{
  break-inside:avoid;
  padding:0;
  margin:0 0 .35rem;
}

@media (max-width:1100px){
  .mega-panel{max-height:none;}
  .mega-panel-inner{flex-direction:column;max-height:none;height:auto;}
  .mega-left{max-height:none;overflow:visible;}
  .mega-multicol{columns:2 160px;max-height:none;}
}
@media (max-width:680px){
  .mega-links-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 32px;}
  .mega-panel-inner{padding-left:var(--space-m)!important;}
  .mega-multicol{columns:1;}
}
.nav-list button.nav-root{
  position:relative;
  background:none;
  border:0;
  padding:.25rem 0;
  font:600 0.95rem/1 var(--font-base);
  cursor:pointer;
  color:var(--color-text);
}
.nav-list button.nav-root::after{
  content:"";
  position:absolute;
  left:0;
  bottom:calc(var(--underline-shift,0px) * -1); /* aligne sur bas .header-grid */
  height:3px;
  width:100%;
  background:var(--color-primary);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
  will-change:transform;
}
.nav-list button.nav-root:hover::after,
.nav-list button.nav-root.is-active::after{
  transform:scaleX(1);
}

/* Mega panels reprise (viewport left:0) */
.mega-panels{
  position:absolute; /* hors header, placé après calcul JS */
  left:0;
  top:0;
  width:100vw;
  pointer-events:none;
  z-index:60;
}
.mega-panels.is-active{pointer-events:auto;}
.mega-panel{
  background:var(--color-primary-light);
  width:100%;
  border-bottom:1px solid var(--color-border);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  animation:megaFade .25s;
}
.mega-panel-inner{
  display:flex;
  gap:60px;
  padding:34px clamp(24px,5vw,120px) 48px;
  padding-left:calc(var(--mega-left, 0) + 0px); /* alignement côté nav */
  padding-right:calc(var(--mega-right, 0) + 0px); /* alignement côté nav */
  box-sizing:border-box;
}
.mega-panel-inner{
  /* Remplacé: on aligne l’enveloppe sur le header, puis on décale le contenu gauche sur nav-middle */
  margin-left: var(--mega-container-left,0);
  margin-right: var(--mega-container-right,0);
  width: calc(100vw - var(--mega-container-left,0) - var(--mega-container-right,0));
  padding-left: calc(var(--mega-offset-left,0) + 0px);
  padding-right: 0; /* déjà aligné à droite du header */
}
@media (max-width:1100px){
  .mega-panel-inner{flex-direction:column;gap:40px;}
}
@media (max-width:680px){
  .mega-panel-inner{padding-left:var(--space-m)!important;padding-right:var(--space-m);}
}

/* === FIX multi‑colonnes mega menu (Besoins) ===
   Le problème venait de:
   1) .mega-links { display:grid } empêchant le layout multi-colonnes
   2) overflow:hidden + max-height coupant les colonnes
*/
.mega-links.mega-multicol{
  display:block !important;          /* annule le grid */
  -webkit-columns:3 180px;
          columns:3 180px;           /* jusqu'à 3 colonnes de min 180px */
  -webkit-column-gap:40px;
          column-gap:40px;
  column-fill:auto;                  /* remplit colonne puis passe à la suivante */
  height:calc(260px - 80px);         /* 260px moins padding interne approx */
  overflow:visible;                  /* ne pas masquer les autres colonnes */
  padding-right:4px;
}
.mega-links.mega-multicol > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

/* Panel hauteur fixe */
.mega-panel{
  height:260px;
  max-height:260px;
}
.mega-panel-inner{
  height:100%;
  max-height:100%;
}
.mega-left{overflow:visible;}

/* Option: si trop de contenu crée un scroll vertical, décommenter:
.mega-links.mega-multicol{overflow:auto;}
*/

/* Responsive (réduire colonnes sur petits écrans) */
@media (max-width:900px){
  .mega-links.mega-multicol{
    -webkit-columns:2 160px;
            columns:2 160px;
    height:auto;
  }
}
@media (max-width:600px){
  .mega-links.mega-multicol{
    -webkit-columns:1;
            columns:1;
  }
}

    .fp-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
    @media(max-width:980px){.fp-wrapper{grid-template-columns:1fr;}}
    .fp-gallery{display:flex;flex-direction:column;gap:14px;}
    .fp-main{position:relative;width:100%;aspect-ratio:1/1;background:#f2f5f2;border:1px solid #e2e8e2;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
    .fp-main img{width:100%;height:100%;object-fit:cover;}
    .fp-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
    .fp-thumbs button{background:#fff;border:2px solid #e2e8e2;padding:0;border-radius:8px;cursor:pointer;width:72px;height:72px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .2s;}
    .fp-thumbs button.is-active{border-color:var(--color-primary);}
    .fp-thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
    .fp-nav{position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;}
    .fp-nav.prev{left:10px;}
    .fp-nav.next{right:10px;}
  .fp-info h2{font-size:35px;margin:0 0 var(--font-size);line-height:1.15;}
  .fp-indications{margin:0 0 var(--font-size);font-size:20px;color:var(--color-primary-dark);font-weight:600;display:flex;flex-wrap:wrap;gap:0px;flex-direction:column;}
    .fp-short{font-size:12px;line-height:1;margin:0;}
    .fp-labels{display:flex;gap:8px;margin:16px 0;}
    .fp-label{background:var(--color-primary);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;letter-spacing:.5px;}
    .fp-label.promo{background:#ef7c00;}
    .fp-price-block{display:flex;align-items:flex-end;gap:14px;}
    .fp-price{font-size:2.4rem;font-weight:700;color:var(--color-primary);display:flex;align-items:flex-start;gap:2px;line-height:1;}
    .fp-old-price{font-size:1rem;color:#999;text-decoration:line-through;font-weight:600;}
    .fp-reduc{color:#ef7c00;font-weight:700;font-size:.95rem;}
    .fp-buy-row{display:flex;align-items:center;gap:20px;margin:0 0 30px;flex-wrap:wrap;}
    .fp-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;background:#fff;border:2px solid var(--color-primary);padding:6px 14px;border-radius:999px;line-height:1;color:var(--color-primary);transition:background .2s;}
    .fp-back:hover{background:var(--color-primary);color:white;}
    .fp-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
    .fp-add{--btn-bg:var(--color-primary);--btn-color:#fff;--btn-border:var(--color-primary);padding:.8rem 1.6rem;border-radius:999px;font-size:15px;}
    .fp-tabs{margin:60px auto;}
    .fp-tablist{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 0 30px;padding:0;}
    .fp-tablist button{background:none;border:0;padding:0 0 10px;font:600 15px var(--font-base);cursor:pointer;position:relative;color:#444;}
    .fp-tablist button:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--color-primary);scale:0 1;transform-origin:left;transition:scale .25s;}
    .fp-tablist button.is-active{color:var(--color-primary);}
    .fp-tablist button.is-active:after{scale:1 1;}
    .fp-tabpanel{display:none;animation:fade .4s;}
    .fp-tabpanel.is-active{display:block;}
    @keyframes fade{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
    .fp-tabpanel h4{margin:0 0 10px;font-size:18px;}
    .fp-mea{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;}
    .fp-mea-item{text-align:center;max-width:300px;display:flex;flex-direction:column;gap:var(--font-size);}
    .fp-mea-item img{object-fit:contain;margin:0 auto;}
    .fp-mea-item p{margin:0;font-weight:600;font-size:calc(25/14 * var(--font-size));color:var(--color-primary);line-height:1.25;}
    .fp-related{margin:40px 0 0;}
    .fp-related h3{font-size:28px;margin:0 0 24px;text-align:center;color:var(--color-primary);}
    .fp-related .ps-viewport{overflow:hidden;}
    .fp-related .ps-track{display:flex;transition:transform .45s; width:100%;}
    .fp-related .ps-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
    @media(max-width:960px){.fp-related .ps-page{grid-template-columns:repeat(3,1fr);} }
    @media(max-width:720px){.fp-related .ps-page{grid-template-columns:repeat(2,1fr);} }
    @media(max-width:520px){.fp-related .ps-page{grid-template-columns:1fr;} }
    .fp-related .ps-nav{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;border:0;background:rgba(var(--color-primary-rgb)/0.9);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:var(--shadow-sm);}
    .fp-related .ps-prev{left:-56px;}
    .fp-related .ps-next{right:-56px;}
    @media(max-width:1220px){.fp-related .ps-prev{left:0}.fp-related .ps-next{right:0}}
    .fp-short ul, .fp-tabpanel ul{padding-left:20px;list-style:disc;}
  .fp-rupture{color:#FF4456;font-weight:700;margin-top:var(--font-size);}