/* =========================================================
   High Santé — feuille de style
   Police : Cairo (latin + arabe)
   Stratégie couleur : Turquoise (#4DA4AB) professionnel/médical — le vert reste un accent
   ponctuel plutôt que la couleur dominante, pour ne pas doubler le vert déjà présent
   dans le logo et donner à la marque un ancrage plus "santé clinique".
   Répartition cible : 60% blanc, 20% turquoise, 10% turquoise clair (accent), 5% vert, 5% gris.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-alt:#EAF7F7;
  --ink:#263238;
  --ink-soft:#55666E;
  --ink-faint:#93A6AC;

  /* Turquoise = couleur principale (menu, titres importants, boutons principaux). */
  --primary:#4DA4AB;
  --primary-dark:#3A7B80;
  --primary-tint:#EAF7F7;

  /* Turquoise = couleur secondaire (icônes, liens, détails, survol des boutons). */
  --accent:#27AEB2;
  --accent-dark:#1B8286;
  --accent-tint:#EAF7F7;

  --border:#CFE7E8;
  --border-soft:#EAF7F7;

  /* Vert = accent ponctuel (petits détails, éléments liés à la santé/au bien-être) —
     volontairement pas la couleur dominante, voir note de stratégie couleur ci-dessus. */
  --success:#65B947;
  --error:#B3261E;
  --white:#FFFFFF;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(38,50,56,.06);
  --shadow-md:0 8px 24px -8px rgba(38,50,56,.18);
  --shadow-lg:0 20px 48px -16px rgba(38,50,56,.28);

  --container:1240px;
  --font:'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:hidden ici est une sécurité globale : sans elle, le moindre élément qui
   déborde légèrement de sa colonne (badge flottant, cercle décoratif, bandeau...) élargit
   <body> au-delà de 100% de la largeur d'écran. Les navigateurs mobiles compensent alors
   en réduisant le zoom pour que tout tienne à l'écran — d'où l'effet "dézoomé" avec une
   bande blanche vide sur le côté (l'espace de défilement horizontal en trop). */
/* overflow-x:clip (pas hidden) : hidden transforme html/body en conteneur de défilement,
   ce qui cassait le position:sticky de .site-header (l'en-tête défilait avec la page au
   lieu de rester fixé en haut). clip supprime le débordement horizontal sans créer ce
   conteneur de défilement — même effet visuel, sticky fonctionne à nouveau. */
html{ scroll-behavior:smooth; overflow-x:clip; max-width:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  max-width:100%;
  transition:opacity .15s ease;
}
/* Adoucit la navigation entre pages (site multi-pages classique, pas de SPA) : sans ça,
   chaque clic sur un lien interne fait disparaître la page d'un coup avant que la suivante
   apparaisse brutalement. Le fondu de sortie est déclenché en JS (voir js/layout.js) juste
   avant de naviguer. Pas de fondu d'entrée sur la nouvelle page : un essai avec une
   animation sur <main> seul donnait un effet de scintillement — le header/footer
   apparaissaient instantanément pendant que le contenu principal restait terne puis
   s'éclaircissait pendant ~300ms de plus, un décalage à deux vitesses plus gênant que le
   changement brutal d'origine. La page d'arrivée s'affiche donc normalement, à pleine
   opacité dès le rendu — seule la sortie est animée. */
body.hs-leaving{ opacity:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

.icon{ width:20px; height:20px; flex:none; }

/* Focus visibility (accessibilité) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--accent-dark);
  outline-offset:2px;
  border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Layout helpers ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.section-head-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.92rem; color:var(--primary-dark); flex:none; white-space:nowrap; }
.section-head-link .icon{ width:16px; height:16px; }
.section-head-link:hover{ color:var(--accent); }
body.is-rtl .section-head-link .icon{ transform:scaleX(-1); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent-dark); text-transform:uppercase;
  margin-bottom:12px;
}
.h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:800; line-height:1.12; letter-spacing:-.01em; }
.h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:800; line-height:1.2; letter-spacing:-.01em; }
.h3{ font-size:1.2rem; font-weight:700; }
.lead{ font-size:1.1rem; color:var(--ink-soft); margin-top:14px; }
.muted{ color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  font-weight:700; font-size:.98rem; transition:transform .15s ease-out, background .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--primary); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.btn-ghost{ background:var(--primary-tint); color:var(--primary-dark); }
.btn-ghost:hover{ background:var(--border); }
/* Vert WhatsApp de la marque plutôt que la palette du site : exception volontaire, un CTA
   WhatsApp se reconnaît instantanément à cette couleur — reste isolé à ce bouton précis. */
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1FB959; }
.btn-whatsapp .icon{ width:19px; height:19px; }
.btn-whatsapp-icon{ width:22px; height:22px; flex:none; }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 30px; font-size:1.02rem; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Topbar ---------- */
.topbar{ background:var(--primary-dark); color:#D0E2F1; font-size:.82rem; direction:ltr; }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:38px; gap:16px; }
/* Un seul message affiché à la fois, en fondu enchaîné (voir rotateTopbarMessages() dans
   layout.js) plutôt que 3 messages serrés côte à côte — chacun a toute la largeur disponible,
   sur ordinateur comme sur mobile, sans avoir à en masquer pour tenir sur une seule ligne. */
.topbar-msgs{ position:relative; height:16px; min-width:0; flex:1; overflow:hidden; }
/* Au repos (avant sa première apparition, ou entre deux passages), un message attend juste en
   dessous — "is-active" le fait glisser en place, "is-leaving" (ajoutée/retirée par
   rotateTopbarMessages() dans js/layout.js) le fait ressortir par le haut : ce sont deux états
   distincts avec des translateY opposés, sinon le message qui part et celui qui arrive
   glisseraient dans le même sens au lieu de se croiser verticalement comme sur
   palmarosashop.com. */
.topbar-msg{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
  opacity:0; transform:translateY(65%); white-space:nowrap; pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
  font-size:.92rem; font-weight:700; color:#fff; letter-spacing:.01em;
}
.topbar-msg.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.topbar-msg.is-leaving{ opacity:0; transform:translateY(-65%); }
.topbar-msg .icon{ width:17px;height:17px; flex:none; }
.topbar-msg span[data-i18n]{ unicode-bidi:plaintext; }
@media (prefers-reduced-motion: reduce){
  .topbar-msg{ transition:none; }
}
/* Seul lien cliquable des trois (les deux autres sont de simples messages) : passe au blanc
   plein et souligné au survol pour se distinguer, plutôt que de rester visuellement identique
   à du texte non interactif. */
.topbar-whatsapp{ color:inherit; }
.topbar-whatsapp:hover{ opacity:1; text-decoration:underline; }
.lang-switch{ display:flex; gap:4px; background:rgba(255,255,255,.1); border-radius:999px; padding:2px; flex:none; }
.lang-switch button{ border:none; background:transparent; color:#D0E2F1; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.lang-switch button.is-active{ background:var(--accent-dark); color:#fff; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.28rem; color:var(--primary-dark); flex:none; }
.logo-badge{ width:44px; height:44px; border-radius:12px; background:#fff; padding:5px; display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; box-shadow:0 0 0 1px var(--border); }
.logo-badge img{ width:100%; height:100%; object-fit:contain; border-radius:6px; }
.footer-brand .logo-badge{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.logo-sub{ display:block; font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-dark); }

/* Bloc "Besoin d'aide ? / téléphone" du header (remplace l'ancien numéro dans la topbar). */
.header-help{ display:flex; align-items:center; gap:10px; color:var(--ink); flex:none; white-space:nowrap; }
.header-help:hover .header-help-phone{ color:var(--primary); }
.header-help-icon{ width:40px; height:40px; border-radius:999px; background:var(--primary-tint); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.header-help-icon .icon{ width:18px; height:18px; }
/* Photo fournie par l'utilisateur (img/telefono-sonando.png, PNG noir plein avec une marge
   interne déjà présente dans le fichier) plutôt qu'une icône SVG recréée à la main — un peu
   plus grande que .icon ci-dessus pour compenser cette marge et garder un poids visuel
   comparable dans le même cercle de 40px. */
.header-help-icon-img{ width:23px; height:23px; object-fit:contain; }
.header-help-label{ display:block; font-size:.72rem; color:var(--ink-soft); }
/* Même garde bidi que .wave-marquee-phone : sans elle, le numéro s'affiche à l'envers dès
   que le document passe en dir="rtl" (arabe). */
.header-help-phone{ display:block; font-weight:800; font-size:.9rem; direction:ltr; unicode-bidi:isolate; transition:color .15s; }

/* ---------- Nav (catégories + liens secondaires) ---------- */
/* Rangée dédiée sous l'en-tête plutôt que mêlée au logo/recherche/actions : la liste de
   catégories peut être longue (contrairement à l'ancien menu déroulant "Catégorie"), elle a
   besoin de sa propre largeur pleine page et défile horizontalement au besoin. */
.main-nav{
  display:flex; align-items:center; gap:2px; max-width:var(--container); margin:0 auto;
  padding:10px 24px; border-top:1px solid var(--border-soft);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.main-nav::-webkit-scrollbar{ display:none; }
/* Sélecteur Particulier/Professionnel (locamed.ma) : pilule à deux boutons dans un fond neutre,
   le bouton actif se détache en blanc avec une ombre légère — même logique qu'un interrupteur
   segmenté classique plutôt qu'un simple lien parmi d'autres. */
.audience-switch-wrap{ position:relative; flex:none; }
.audience-switch{ display:flex; align-items:center; gap:2px; background:var(--surface-alt); border-radius:999px; padding:3px; flex:none; }
.audience-btn{ display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:none; background:transparent; font-family:inherit; font-size:.82rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s; }
.audience-btn .icon{ width:16px; height:16px; flex:none; }
.audience-btn:hover{ color:var(--primary-dark); }
.audience-btn.is-active{ background:#fff; color:var(--primary-dark); box-shadow:0 1px 3px rgba(20,45,50,.16); }
/* Menu déroulant de catégories du profil actif (locamed.ma) : ouvert au clic sur un bouton
   du sélecteur — voir openAudienceMenu()/closeAudienceMenu() dans js/layout.js. Ajouté à
   <body> (pas imbriqué dans #mainNav) et positionné en JS via getBoundingClientRect() du
   sélecteur : .main-nav a "overflow-x:auto" pour le défilement horizontal des pilules, ce qui
   force aussi overflow-y à "auto" et aurait rogné un enfant positionné en absolute dépassant
   verticalement. Même carte blanche à bordure fine + ombre que .header-search-results, pour
   rester cohérent avec l'unique autre menu flottant du site plutôt que d'inventer un nouveau
   style de carte. */
.audience-menu{
  position:fixed; min-width:230px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); padding:8px; z-index:90;
}
.audience-menu[hidden]{ display:none; }
.audience-menu-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--ink); white-space:nowrap; }
.audience-menu-item:hover{ background:var(--surface-alt); color:var(--primary-dark); }
.audience-menu-item-icon{ width:32px; height:32px; border-radius:9px; background:var(--primary-tint); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.audience-menu-item-icon .icon{ width:17px; height:17px; }
.audience-menu-empty{ display:flex; align-items:flex-start; gap:10px; padding:14px 12px; font-size:.85rem; line-height:1.5; color:var(--ink-soft); max-width:250px; white-space:normal; }
.audience-menu-empty .icon{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--ink-faint); }
.category-nav-link{ flex:none; padding:8px 14px; border-radius:999px; font-size:.85rem; font-weight:700; color:var(--ink); white-space:nowrap; transition:background .15s, color .15s; }
.category-nav-link:hover{ background:var(--surface-alt); color:var(--primary-dark); }
/* Masqué sur ordinateur : ces catégories (tout sauf "Promotions") vivent désormais dans le menu
   déroulant du sélecteur Particulier/Professionnel plutôt que dupliquées ici. Réaffiché sur
   mobile par la règle .category-nav-link{ display:flex } du menu plein écran plus bas (plus
   spécifique par ordre de cascade que cette règle, pas par sélecteur). */
.category-nav-link-catonly{ display:none; }
/* Rouge (même teinte que l'icône "Promotions" de la grille catégories, #D93B3B) plutôt que la
   couleur d'accent du site : ressort davantage dans une rangée où tout le reste est neutre. */
.category-nav-link.is-promo{ color:#D93B3B; }
.category-nav-link.is-promo:hover{ background:#FBE7E7; }
.category-nav-sep{ flex:none; width:1px; height:18px; background:var(--border); margin:0 10px; }
/* Même poids/taille/couleur que les liens catégories (.category-nav-link) : avant, ces liens
   secondaires étaient plus fins et plus clairs, ce qui les faisait paraître moins importants
   dans la même rangée. Le state actif ne change que la couleur (jamais le font-weight), pour
   qu'aucun lien ne change de largeur — donc de position dans la rangée — au clic. */
.category-nav-link-secondary.is-active{ color:var(--primary-dark); }
/* Icône, flèche et étiquettes de section : uniquement pour le menu plein écran mobile (voir
   plus bas) — cachés par défaut pour ne pas alourdir la rangée de pilules sur ordinateur. */
.category-nav-icon, .category-nav-chevron, .category-nav-label{ display:none; }

.header-search{ position:relative; display:flex; align-items:center; gap:8px; background:var(--surface-alt); border:1px solid var(--border); border-radius:999px; padding:10px 18px; flex:1; max-width:520px; }
.header-search input{ border:none; background:transparent; outline:none; width:100%; font-size:.9rem; color:var(--ink); }
.header-search .icon{ width:17px; height:17px; color:var(--ink-faint); flex:none; }

.header-search-results{ position:absolute; top:100%; inset-inline-start:0; inset-inline-end:0; margin-top:10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:8px; display:none; flex-direction:column; gap:2px; max-height:70vh; overflow-y:auto; z-index:80; min-width:320px; }
.header-search-results.is-open{ display:flex; }
.header-search-item{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; }
.header-search-item:hover{ background:var(--surface-alt); }
.header-search-thumb{ width:44px; height:44px; flex:none; border-radius:8px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.header-search-thumb img{ width:100%; height:100%; object-fit:cover; }
.header-search-thumb .icon{ width:24px; height:24px; color:var(--accent); }
.header-search-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.header-search-name{ font-size:.87rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-search-price{ font-size:.8rem; font-weight:700; color:var(--primary-dark); }
.header-search-empty{ padding:16px 10px; text-align:center; font-size:.85rem; color:var(--ink-faint); }
.header-search-viewall{ margin-top:4px; padding:10px 12px 4px; border-top:1px solid var(--border-soft); text-align:center; font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; color:var(--primary-dark); }
.header-search-viewall:hover{ color:var(--primary); }

.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.icon-btn{ position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:transparent; border:none; color:var(--ink); }
.icon-btn:hover{ color:var(--primary); }
.icon-btn .icon{ width:21px; height:21px; }
.cart-count{ position:absolute; top:-2px; inset-inline-end:-2px; background:var(--primary-dark); color:#fff; font-size:.64rem; font-weight:800; min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg); }
.nav-toggle{ display:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--primary-dark); color:#D0E2F1; padding:64px 0 28px; margin-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand .logo{ color:#fff; margin-bottom:14px; }
.footer-brand p{ color:#B0CFE8; font-size:.92rem; line-height:1.7; max-width:280px; }
/* Titre de colonne = bouton d'accordéon sur mobile (voir media query plus bas), mais
   garde exactement l'apparence d'un simple titre h4 en desktop : pas de curseur pointeur,
   chevron caché, contenu toujours visible quel que soit l'état .is-open. */
.footer-col-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; padding:0; margin-bottom:18px;
  color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-align:start; cursor:default; font-family:inherit;
}
.footer-col-chevron{ display:none; }
.footer-col-body{ display:block; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:#B0CFE8; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; color:#B0CFE8; font-size:.92rem; margin-bottom:12px; }
.footer-contact .icon{ width:17px; height:17px; margin-top:2px; color:#57C5DB; flex:none; }
/* Photo (img/telefono-sonando.png, noire) plutôt qu'une icône SVG : sans le filtre, un PNG
   noir plein serait quasi invisible sur le fond sombre du footer — brightness(0) invert(1)
   la rend blanche tout en gardant la silhouette (transparence) intacte, opacity pour rester
   au même poids visuel que les icônes SVG voisines (.icon, teinte cyan claire, pas blanc pur). */
.footer-contact-img{ width:17px; height:17px; margin-top:2px; flex:none; filter:brightness(0) invert(1); opacity:.85; }
/* Même correctif bidi que .topbar-phone (voir plus haut) : un numéro affiché tel quel en
   arabe sans ces deux propriétés se retrouve avec ses groupes de chiffres ré-ordonnés. */
.tel-ltr{ direction:ltr; unicode-bidi:isolate; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.82rem; color:#B0CFE8; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social .icon{ width:16px; height:16px; }
/* Logo WhatsApp en couleur (déjà un badge complet, pas besoin de filtre) ; l'icône téléphone
   (même photo noire que .footer-contact-img ci-dessus) passe en blanc pour la même raison. */
.footer-social-img{ width:18px; height:18px; object-fit:contain; }
.footer-phone-img{ filter:brightness(0) invert(1); opacity:.85; }

/* ---------- Hero ---------- */
.hero{ padding:56px 0 76px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:44px; padding-top:32px; border-top:1px solid var(--border); }
.hero-stat-value{ font-size:1.7rem; font-weight:900; color:var(--ink); }
.hero-stat-label{ font-size:.82rem; font-weight:700; color:var(--ink); margin-top:2px; }

/* Badge pilule au-dessus du titre (photo produit + preuve sociale flottante juste en dessous
   remplacent l'ancienne illustration SVG décorative). */
.hero-badge{
  display:inline-flex; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:999px; padding:7px 16px; font-size:.76rem; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--primary-dark); box-shadow:var(--shadow-sm); margin-bottom:18px;
}

.hero-visual{ position:relative; z-index:1; padding-bottom:32px; }
.hero-photo{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--primary-tint); display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); z-index:1;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
/* Repli quand le produit vedette n'a pas de photo (renderHeroBestseller() dans index.html) :
   avant, seul le <span> englobant faisait 96px — le <svg class="icon"> à l'intérieur gardait
   sa taille par défaut de 20px (règle globale .icon), donc une icône minuscule perdue dans une
   grande case vide. Badge circulaire + icône bien plus grande pour que ce repli ait l'air
   volontaire plutôt que cassé. */
.hero-photo-icon{
  width:168px; height:168px; border-radius:50%; background:rgba(255,255,255,.65);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -14px rgba(20,45,50,.22);
}
.hero-photo-icon .icon{ width:78px; height:78px; color:var(--accent); }
/* Carte "N°1 des ventes" qui chevauche le coin bas de la photo (comme sur la référence) —
   vrai produit vedette (voir renderHeroBestseller() dans index.html), pas un texte figé. */
.hero-card{
  position:absolute; inset-inline-start:-18px; bottom:0; z-index:2;
  display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 22px; box-shadow:var(--shadow-lg); max-width:230px; color:var(--ink);
  transition:box-shadow .2s, transform .2s;
}
.hero-card:hover{ box-shadow:var(--shadow-lg), 0 0 0 1px var(--primary); transform:translateY(-2px); }
.hero-card-badge{ display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--accent-dark); margin-bottom:6px; }
.hero-card-name{ font-size:.94rem; font-weight:800; line-height:1.3; margin-bottom:6px; }
.hero-card-price{ font-size:1.1rem; font-weight:900; color:var(--primary-dark); }
.hero-shape{ position:absolute; inset-inline-end:-120px; top:-80px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent-tint), transparent 70%); z-index:0; }

/* ---------- Wave marquee banner ---------- */
.wave-marquee{ position:relative; height:78px; overflow:hidden; margin-bottom:20px; }
.wave-marquee-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wave-marquee-track{
  position:absolute; left:0; top:0; height:100%; width:max-content;
  display:flex; align-items:center; direction:ltr;
  animation:wave-marquee-scroll 26s linear infinite;
  will-change:transform;
}
body.is-rtl .wave-marquee-track{ animation-direction:reverse; }
.wave-marquee-set{ display:flex; align-items:center; flex:none; padding-inline-end:0; }
.wave-marquee-item{
  display:inline-flex; align-items:center; gap:36px;
  font-weight:800; font-size:1.12rem; color:#fff; letter-spacing:.01em;
  padding-inline-end:36px; white-space:nowrap;
}
.wave-marquee-item .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); flex:none; }
.wave-marquee-phone{ direction:ltr; unicode-bidi:isolate; }
@keyframes wave-marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (max-width:640px){
  .wave-marquee{ height:60px; }
  .wave-marquee-item{ font-size:.92rem; gap:24px; padding-inline-end:24px; }
}

/* ---------- Trust bar ---------- */
/* Cartes flottantes sur fond blanc (référence fournie par l'utilisateur) : icône ronde,
   carte sans bordure visible (juste une ombre légère) pour se détacher du fond. */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-item{
  background:var(--surface); display:flex; align-items:center; gap:16px; padding:22px 24px;
  border-radius:var(--radius-md); box-shadow:0 1px 3px rgba(20,45,50,.08);
}
.trust-icon{ width:52px; height:52px; border-radius:50%; background:var(--primary-tint); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:none; }
/* Bloc titre+texte séparé de l'icône (flex:1, pas juste 2 enfants flex de plus côte à côte
   comme l'icône) : sans ça, le <h3> et le <p> devenaient chacun un item flex à part entière,
   affichés en 2 colonnes étroites l'une à côté de l'autre au lieu du titre au-dessus du texte. */
.trust-body{ flex:1; min-width:0; }
.trust-item h3{ font-size:.98rem; margin-bottom:3px; }
.trust-item p{ font-size:.85rem; color:var(--ink-soft); line-height:1.4; margin:0; }
.trust-whatsapp{ display:inline-block; font-size:.82rem; font-weight:700; color:var(--success); margin-top:4px; }
.trust-whatsapp:hover{ text-decoration:underline; }

/* ---------- Produits en vidéo ---------- */
.video-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); transition:box-shadow .2s, transform .2s; }
.video-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
/* Cadre haut et étroit (format "reel") : les vidéos viennent de réseaux sociaux tournées en
   vertical, comme sur locamed.ma — pas le format 3/4 utilisé pour les photos produit ailleurs. */
.video-card-media{ position:relative; display:block; aspect-ratio:9/16; background:var(--primary-tint); }
.video-card-media img{ width:100%; height:100%; object-fit:cover; }
.video-card-media .icon{ width:56px; height:56px; color:var(--accent); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
/* Vidéo hébergée sur le site (uploadée depuis l'admin) : <video> natif, pas d'iframe d'une
   plateforme externe — donc pas d'interface Instagram/TikTok (profil, commentaires...) par-dessus,
   contrairement à leurs widgets d'intégration officiels. Pas de contrôles natifs (pas de bouton
   de téléchargement) : lecture automatique coupée au survol (ordinateur) ou à l'affichage à
   l'écran (mobile) — voir renderHomeVideos(). Juste deux petits boutons discrets dans le coin
   (lecture/pause, son), comme sur locamed.ma — pas de grand voile sombre par-dessus la photo. */
.video-card-media.has-video{ background:var(--ink); }
.video-card-media.has-video video{ width:100%; height:100%; object-fit:cover; }
.video-card-controls{ position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.vc-ctrl{ width:34px; height:34px; border:none; border-radius:50%; background:rgba(20,30,30,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:background .2s; }
.vc-ctrl:hover{ background:rgba(20,30,30,.75); }
.vc-ctrl-icon{ width:16px; height:16px; color:#fff; }
.video-card-body{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px 16px; color:var(--ink); }
.video-card-body:hover .video-card-name{ color:var(--primary-dark); }
.video-card-thumb{ flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--primary-tint);
  display:flex; align-items:center; justify-content:center; }
.video-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.video-card-thumb .icon{ width:26px; height:26px; color:var(--accent); }
.video-card-info{ flex:1; min-width:0; padding-top:2px; }
.video-card-name{ font-weight:600; font-size:.92rem; line-height:1.4; margin-bottom:10px; }
.video-card-price{ font-weight:800; font-size:1.1rem; color:var(--primary-dark); }

/* ---------- Bons plans du mois : carrousel à flèches ---------- */
/* Piste en défilement horizontal masqué (comme .filter-pills/.cart-reco-strip) : les flèches
   sont le contrôle principal sur ordinateur, mais le glissé tactile marche toujours sur mobile.
   Les flèches se superposent au bord de la piste (voir .deals-arrow plus bas) plutôt que
   d'occuper leur propre colonne dans la marge — sur mobile surtout, réserver une colonne
   entière à chaque flèche mangeait une bonne partie de la largeur déjà limitée. */
.deals-carousel{ position:relative; }
.deals-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 6px;
}
.deals-track::-webkit-scrollbar{ display:none; }
/* Fond dégradé dans la couleur de marque (pas juste un cercle blanc avec bordure fine) et
   ombre teintée plutôt que grise : signe visuel "boutique premium" repris de la référence,
   dans la palette petrol/turquoise du site plutôt que copié tel quel. */
/* top est un pixel fixe (pas 50%) : centré sur la photo carrée (même hauteur que la largeur de
   .deal-card) et non sur toute la carte photo+texte, sinon la flèche tombe trop bas, entre les
   deux. 122px = padding-top de la piste (2px) + moitié de la photo à 240px de large sur
   ordinateur ; recalculé en 92px pour la carte à 180px sur mobile (voir plus bas). */
.deals-arrow{
  position:absolute; top:122px; transform:translateY(-50%); z-index:2;
  flex:none; width:40px; height:40px; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 18px -6px rgba(58,123,128,.55);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.deals-arrow-prev{ inset-inline-start:8px; }
.deals-arrow-next{ inset-inline-end:8px; }
/* translateY(-50%) centre verticalement la flèche (position:absolute + top:50%) — le hover/actif
   doit composer avec ce même décalage de base, pas le remplacer, sinon la flèche saute hors
   de son centrage vertical au survol. */
.deals-arrow:hover{ background:linear-gradient(135deg, var(--accent), var(--primary-dark)); transform:translateY(calc(-50% - 2px)); box-shadow:0 12px 22px -6px rgba(58,123,128,.65); }
.deals-arrow:active{ transform:translateY(-50%) scale(.94); box-shadow:0 4px 10px -4px rgba(58,123,128,.5); }
/* Flèche grisée et inerte en bout de course (voir syncDealsArrows() dans index.html) — détail
   d'interaction attendu d'un vrai carrousel produit, pas juste deux boutons toujours actifs. */
.deals-arrow:disabled{ background:var(--ink-faint); box-shadow:none; opacity:.45; cursor:default; transform:translateY(-50%); }
.deals-arrow .icon{ width:19px; height:19px; }
.deals-arrow-prev .icon{ transform:scaleX(-1); }
body.is-rtl .deals-arrow-prev .icon{ transform:scaleX(1); }
body.is-rtl .deals-arrow-next .icon{ transform:scaleX(-1); }

.deal-card{
  flex:0 0 240px; scroll-snap-align:start; position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.deal-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.deal-card-media{ position:relative; display:block; aspect-ratio:1/1; background:var(--primary-tint); }
.deal-card-media img{ width:100%; height:100%; object-fit:contain; }
.deal-card-media .icon{ width:56px; height:56px; color:var(--accent); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
/* Pastille "-X%" en médaillon rouge par-dessus la photo (façon étiquette promo), plutôt qu'une
   simple puce discrète à côté du prix — c'est elle qui doit sauter aux yeux dans ce carrousel. */
.deal-card-discount{
  position:absolute; top:10px; inset-inline-end:10px; width:44px; height:44px; border-radius:50%;
  background:#D93B3B; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.74rem; font-weight:800; line-height:1.1; text-align:center; transform:rotate(-10deg);
  box-shadow:0 4px 10px -2px rgba(0,0,0,.4); z-index:1;
}
/* Le cœur descend en bas de la photo : la pastille de réduction prend maintenant le coin
   supérieur, les deux se chevaucheraient sinon. */
.deal-card-wish{
  position:absolute; bottom:10px; inset-inline-end:10px; width:30px; height:30px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--ink-soft); display:flex; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); z-index:1;
}
.deal-card-wish .icon{ width:15px; height:15px; }
.deal-card-wish.is-active{ color:var(--error); }
.deal-card-wish.is-active .icon{ fill:var(--error); }
.deal-card-body{ display:block; padding:14px 16px 16px; color:var(--ink); }
.deal-card-body:hover .deal-card-name{ color:var(--primary-dark); }
.deal-card-name{
  font-weight:700; font-size:.9rem; line-height:1.35; margin-bottom:10px; min-height:2.4em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.deal-card-price-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.deal-card-old{ font-size:.78rem; color:var(--ink-faint); text-decoration:line-through; flex-basis:100%; }
.deal-card-current{ font-weight:900; font-size:1rem; color:#000; }

/* ---------- Categories ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(7,1fr); justify-items:center; gap:30px 12px; }
.cat-card{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:110px; text-align:center; flex:none; }
.cat-icon{
  width:84px; height:84px; border-radius:50%; flex:none;
  background:var(--primary-tint); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px var(--border) inset;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-icon .icon{ width:32px; height:32px; }
.cat-card:hover .cat-icon{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--border) inset, var(--shadow-md); }
.cat-card.is-promo .cat-icon{ background:#D93B3B; color:#fff; box-shadow:none; }
.cat-label{ font-size:.84rem; font-weight:600; color:var(--ink); line-height:1.3; }

@media (max-width:1080px){
  .cat-grid{ grid-template-columns:repeat(5,1fr); gap:26px 10px; }
}
@media (max-width:860px){
  .cat-grid{
    display:flex; overflow-x:auto; overflow-y:hidden; justify-content:flex-start;
    gap:20px; padding-bottom:6px; margin:0 -24px; padding-inline:24px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cat-grid::-webkit-scrollbar{ display:none; }
  .cat-card{ width:76px; max-width:none; flex:none; scroll-snap-align:start; }
  .cat-icon{ width:68px; height:68px; }
  .cat-icon .icon{ width:27px; height:27px; }
  .cat-label{ font-size:.78rem; }
}

/* ---------- Chargement fluide : le temps que le catalogue réel arrive (window.hsCatalogReady),
   les grilles restent vides plutôt que d'afficher puis corriger des données obsolètes (voir
   js/products.js). Un shimmer occupe l'espace le temps du chargement pour éviter un vide brut
   et un saut de mise en page une fois le contenu injecté. */
@keyframes hs-shimmer{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } }
.product-grid:empty, .cat-grid:empty{
  min-height:220px; border-radius:10px;
  background:linear-gradient(90deg, var(--surface-alt) 25%, var(--border-soft) 37%, var(--surface-alt) 63%);
  background-size:800px 100%; animation:hs-shimmer 1.4s ease-in-out infinite;
}

/* ---------- Product cards / grid ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s; }
.product-wish-remove{ position:absolute; top:12px; inset-inline-end:12px; z-index:2; width:30px; height:30px; border-radius:50%; background:#fff; border:none; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); box-shadow:0 1px 5px rgba(0,0,0,.18); cursor:pointer; transition:color .15s, transform .15s; }
.product-wish-remove:hover{ color:var(--danger,#dc3545); transform:scale(1.08); }
.product-wish-remove .icon{ width:15px; height:15px; }
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.product-media{ aspect-ratio:1/1; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.product-media .icon{ width:64px; height:64px; color:var(--accent); stroke-width:1.3; }
.product-media.has-photo{ background:#fff; }
.product-media img{ width:100%; height:100%; object-fit:contain; }
.product-badge{ position:absolute; top:12px; inset-inline-start:12px; background:var(--accent-dark); color:#fff; font-size:.7rem; font-weight:800; padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.product-badge.is-outofstock{ background:var(--error); }
.product-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.product-name{ font-size:1.02rem; font-weight:700; line-height:1.35; }
.product-name a{ color:var(--ink); }
.product-short{ font-size:.85rem; color:var(--ink-soft); line-height:1.5; flex:1; }
.product-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:10px; }
.product-price{ display:flex; align-items:baseline; gap:8px; }
.price-current{ font-weight:900; font-size:1.12rem; color:#000; }
.price-old{ font-size:.82rem; color:var(--ink-faint); text-decoration:line-through; }
.add-btn{ width:42px; height:42px; border-radius:999px; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; border:none; transition:background .2s, transform .15s; }
.add-btn:hover{ background:var(--accent); }
.add-btn.is-added{ background:var(--success); }
.add-btn:disabled{ background:var(--ink-faint); cursor:not-allowed; }
.add-btn:disabled:hover{ background:var(--ink-faint); }
.add-btn .icon{ width:19px; height:19px; }

.section-cta-row{ display:flex; justify-content:center; margin-top:44px; }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }
.blog-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow .2s, transform .2s; color:var(--ink); }
.blog-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.blog-card-media{ aspect-ratio:16/10; background:var(--accent-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.blog-card-media .icon{ width:48px; height:48px; color:var(--accent); stroke-width:1.3; }
.blog-card-media.has-photo{ background:#fff; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; }
.blog-card-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card-cat{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); }
.blog-card-title{ font-size:1.08rem; font-weight:800; line-height:1.35; }
.blog-card-excerpt{ font-size:.87rem; color:var(--ink-soft); line-height:1.55; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:12px; border-top:1px solid var(--border-soft); font-size:.78rem; }
.blog-card-date{ color:var(--ink-faint); }
.blog-card-read{ font-weight:800; color:var(--primary-dark); text-transform:uppercase; letter-spacing:.03em; font-size:.74rem; }

.article-hero{ width:100%; aspect-ratio:21/9; border-radius:var(--radius-lg); background:var(--accent-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:28px; }
.article-hero .icon{ width:64px; height:64px; color:var(--accent); stroke-width:1.2; }
.article-hero.has-photo{ background:#fff; }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-meta{ display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:.82rem; }
.article-meta .blog-card-cat{ font-size:.74rem; }
.article-meta-date{ color:var(--ink-faint); }
.article-title{ font-size:clamp(1.6rem,3.2vw,2.3rem); font-weight:800; line-height:1.25; margin-bottom:24px; max-width:760px; }
.article-body{ max-width:760px; font-size:1.02rem; line-height:1.85; color:var(--ink); }
.article-body p{ margin-bottom:22px; }
.article-body p:last-child{ margin-bottom:0; }
.article-body h2{ font-size:1.28rem; font-weight:800; line-height:1.35; margin:36px 0 16px; color:var(--ink); }
.article-body h2:first-child{ margin-top:0; }
.article-faq{ max-width:760px; margin-top:40px; }
.article-faq h2{ font-size:1.15rem; font-weight:800; margin-bottom:14px; }
.article-faq-item{ border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:10px; }
.article-faq-item summary{ font-weight:700; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.article-faq-item summary::-webkit-details-marker{ display:none; }
.article-faq-item summary::after{ content:"+"; font-size:1.3rem; font-weight:400; color:var(--ink-faint); flex:none; }
.article-faq-item[open] summary::after{ content:"–"; }
.article-faq-item p{ margin:12px 0 0; color:var(--ink-soft); line-height:1.7; font-size:.94rem; }
.article-cta{ max-width:760px; margin-top:40px; padding:28px; background:var(--primary-tint); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.article-cta p{ font-weight:700; color:var(--primary-dark); margin:0; font-size:1rem; }
.article-related{ margin-top:56px; }
.article-related h2{ font-size:1.3rem; font-weight:800; margin-bottom:20px; }
.article-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .article-related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .blog-grid{ grid-template-columns:1fr; }
  .article-related-grid{ grid-template-columns:1fr; }
  .article-hero{ aspect-ratio:16/10; }
  .article-cta{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Testimonials ---------- */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* Même langage que le reste du site (bordure fine + coins à 10-14px, pas de grande carte
   flottante à ombre permanente) — juste un fin trait de couleur en haut pour signaler "avis
   client" d'un coup d'œil, et l'ombre n'apparaît qu'au survol comme les autres cartes. */
.tst-card{
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-top:3px solid var(--primary); border-radius:var(--radius-md); padding:26px 26px 24px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.tst-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tst-stars-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.tst-stars{ display:flex; gap:2px; font-size:.95rem; letter-spacing:1px; }
/* Étoiles pleines et dorées (pas de simples contours) : c'est la convention universellement
   reconnue pour une note, plus lisible en un coup d'œil qu'un contour fin de la couleur du
   texte environnant. */
.stars .icon{ fill:#F5A623; color:#F5A623; }
.tst-stars .icon{ width:14px; height:14px; }
.tst-rating{ font-size:.78rem; font-weight:800; color:var(--ink-soft); }
.tst-text{ font-size:.95rem; line-height:1.7; color:var(--ink); margin-bottom:20px; }
.tst-name{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }
.tst-head{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--border-soft); }
.avatar-circle{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.85rem; flex:none; letter-spacing:.02em;
}

/* ---------- Bundles ---------- */
.bundle-card{ position:relative; }
.bundle-card .product-media{ background:var(--accent-tint); }
.bundle-card .product-media .icon{ color:var(--accent-dark); }
/* Réserve toujours 2 lignes pour le nom du pack : certains titres tiennent sur une
   ligne, d'autres sur deux, ce qui décalait le badge "Vous économisez" d'une carte
   à l'autre. Hauteur fixe = badges alignés quel que soit le nombre de lignes réel. */
.bundle-card .product-name{ min-height:calc(1.35em * 2); }
.bundle-includes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.bundle-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-alt); border:1px solid var(--border); border-radius:999px; padding-block:6px; padding-inline:6px 12px; font-size:.82rem; color:var(--ink-soft); }
.bundle-chip .chip-icon{ width:24px; height:24px; border-radius:50%; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.bundle-chip .chip-icon .icon{ width:13px; height:13px; }
.bundle-chip-more{ padding-inline:12px; font-weight:700; color:var(--primary-dark); }
/* Résumé compact ("N produits inclus") affiché à la place des puces sur mobile/tablette
   — voir le breakpoint 1080px plus bas, qui bascule laquelle des deux versions est visible. */
.bundle-includes-summary{ display:none; align-items:center; gap:8px; font-size:.83rem; font-weight:600; color:var(--ink-soft); margin-top:2px; }
.bundle-includes-summary .icon{ width:16px; height:16px; color:var(--accent); flex:none; }
.bundle-savings{ display:inline-flex; align-items:center; gap:6px; background:var(--primary-tint); color:var(--primary-dark); font-weight:700; font-size:.85rem; padding:8px 14px; border-radius:999px; margin-top:6px; }
.bundle-savings .icon{ width:15px; height:15px; }
.bundle-includes-block{ margin-bottom:24px; }
.bundle-includes-block .bundle-chip{ padding-inline:6px 14px; }
.bundle-includes-block .bundle-chip:hover{ border-color:var(--accent); color:var(--accent-dark); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:.85rem; color:var(--ink-soft); padding:22px 0; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .icon{ width:13px; height:13px; }
.breadcrumb .current{ color:var(--ink); font-weight:600; }

/* ---------- Page header (shop, about, contact) ---------- */
.page-head{ padding:16px 0 44px; border-bottom:1px solid var(--border); margin-bottom:44px; }

/* ---------- Shop filters ---------- */
.shop-layout{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; justify-content:space-between; margin-bottom:32px; }
.filter-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-pill{ padding:10px 18px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); font-size:.87rem; font-weight:600; color:var(--ink-soft); }
.filter-pill.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.shop-tools{ display:flex; align-items:center; gap:12px; font-size:.87rem; }
.shop-tools select{ border:1.5px solid var(--border); border-radius:999px; padding:9px 14px; background:var(--surface); color:var(--ink); }
.shop-count{ color:var(--ink-soft); margin-bottom:20px; font-size:.9rem; }
.shop-search-banner{ display:flex; align-items:center; gap:14px; background:var(--primary-tint); border-radius:var(--radius-md); padding:12px 18px; margin-bottom:18px; font-size:.9rem; color:var(--primary-dark); font-weight:600; }
.shop-search-banner button{ background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.shop-search-banner button:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Product detail ---------- */
.pd-reference{ display:inline-block; background:var(--primary-tint); color:var(--primary-dark); font-weight:700; font-size:.78rem; padding:4px 10px; border-radius:6px; margin:6px 0 10px; }
.pd-trustline{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:14px; }
.pd-trustline-item{ display:inline-flex; align-items:center; gap:5px; }
.pd-trustline-item .icon{ width:14px; height:14px; color:var(--success); flex:none; }
.pd-trustline-sep{ color:var(--border); }
.pd-instock{ display:inline-flex; align-items:center; gap:7px; color:var(--success); font-weight:700; font-size:.88rem; margin-bottom:26px; }
.pd-instock .icon{ width:16px; height:16px; }

/* ---------- Quantity tiers: "Achetez plus, économisez plus" ---------- */
.qty-tiers{ margin-bottom:22px; }
.qty-tiers-title{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:.92rem; color:var(--ink); margin-bottom:12px; }
.qty-tiers-title .icon{ width:17px; height:17px; color:var(--accent); flex:none; }
.tier-options{ display:flex; flex-direction:column; gap:10px; }
.tier-option{
  position:relative; display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--border); background:var(--surface); border-radius:var(--radius-sm);
  padding:13px 16px; cursor:pointer; transition:border-color .15s, background .15s;
}
.tier-option:hover{ border-color:var(--accent); }
.tier-option.is-selected{ border-color:var(--primary); background:var(--primary-tint); box-shadow:0 0 0 1px var(--primary) inset; }
.tier-radio{ position:absolute; opacity:0; pointer-events:none; }
.tier-radio-dot{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--border-soft); background:var(--surface);
  flex:none; position:relative; transition:border-color .15s;
}
.tier-option.is-selected .tier-radio-dot{ border-color:var(--primary); }
.tier-option.is-selected .tier-radio-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--primary);
}
.tier-info{ flex:1; min-width:0; }
.tier-name-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.tier-name{ font-weight:800; font-size:.95rem; color:var(--ink); }
.tier-ribbon{
  display:inline-flex; align-items:center; gap:3px;
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; color:#fff; background:var(--accent-dark);
}
.tier-ribbon .icon{ width:10px; height:10px; flex:none; }
.tier-ribbon.best{ background:var(--primary-dark); }
.tier-save{ display:block; font-size:.8rem; font-weight:700; color:var(--success); margin-top:3px; }
.tier-price{ text-align:end; flex:none; }
.tier-price-current{ display:block; font-weight:900; font-size:1.05rem; color:#000; }
.tier-price-old{ display:block; font-size:.78rem; color:var(--ink-faint); text-decoration:line-through; }

/* ---------- Quick COD order form (product page) ---------- */
.quick-order{ border:1.5px solid var(--primary); background:var(--primary-tint); border-radius:var(--radius-md); overflow:hidden; margin-bottom:26px; }
.quick-order-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:transparent; border:none; text-align:start; }
.quick-order-toggle .qo-label{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--primary-dark); font-size:.95rem; }
.quick-order-toggle .qo-label .icon{ width:19px; height:19px; }
.quick-order-toggle .qo-chevron{ width:16px; height:16px; color:var(--primary-dark); transition:transform .2s; flex:none; }
.quick-order.is-open .qo-chevron{ transform:rotate(90deg); }
body.is-rtl .quick-order.is-open .qo-chevron{ transform:rotate(-90deg); }
.pd-desc{ margin-top:52px; border-top:1px solid var(--border); padding-top:36px; }
.pd-desc h2{ margin-bottom:14px; }
.pd-desc p{ color:var(--ink-soft); line-height:1.8; }
.pd-related{ margin-top:64px; }

/* ---------- Cart ---------- */
.cart-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:40px; align-items:flex-start; }
.cart-table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.cart-mobile-list{ display:none; } /* visible uniquement sur mobile, voir la media query plus bas */
/* Les recommandations sont un 3e item de la grille (toujours pleine largeur, sous le
   tableau + résumé) — voir la media query mobile plus bas pour l'ordre d'affichage,
   qui les place avant le résumé/bouton de commande sur petit écran.
   min-width:0 est essentiel : un item de grille avec overflow:visible (par défaut) hérite
   sinon de la taille min-content de son contenu — ici la bande de recommandations, dont
   les 4 cartes mises bout à bout dépassent largement un écran de téléphone. Cette taille
   minimale remontait à toute la piste de la grille et forçait TOUTE la page (résumé,
   prix…) à déborder horizontalement sur mobile. */
.cart-reco{ grid-column:1 / -1; min-width:0; }
.cart-table thead th{ text-align:start; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:16px 20px; border-bottom:1px solid var(--border); font-weight:700; }
.cart-table tbody td{ padding:18px 20px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.cart-table tbody tr:last-child td{ border-bottom:none; }
/* Stepper +/- classique en pastille, avec un bouton papelera séparé toujours visible
   à côté (option retenue après comparatif de 3 maquettes) — réutilisé dans le panier
   (desktop + mobile) et le tiroir. */
.qty-remove-row{ display:flex; align-items:center; gap:12px; }
.qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--border); border-radius:999px; overflow:hidden; flex:none; }
.qty-stepper button{ width:34px; height:34px; background:var(--surface-alt); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.qty-stepper button .icon{ width:13px; height:13px; }
.qty-stepper span{ width:30px; text-align:center; font-weight:700; font-size:.85rem; }
.line-trash-btn{ width:34px; height:34px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--error); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .15s; }
.line-trash-btn:hover{ background:var(--surface-alt); }
.line-trash-btn .icon{ width:14px; height:14px; }
.cart-prod{ display:flex; align-items:center; gap:18px; }
.cart-prod-media{ width:88px; height:88px; border-radius:14px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.cart-prod-media.has-photo{ background:#fff; border:1px solid var(--border); }
.cart-prod-media .icon{ width:40px; height:40px; color:var(--accent); }
.cart-prod-media img{ width:100%; height:100%; object-fit:contain; }
.cart-prod-info{ flex:1; min-width:0; }
.cart-prod-name{ display:block; font-weight:700; font-size:1.05rem; line-height:1.35; }
.cart-prod-name:hover{ color:var(--primary-dark); }
.cart-prod-cat{ font-size:.83rem; color:var(--ink-faint); margin-top:4px; }
.cart-line-total{ font-weight:700; }
.cart-summary{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; position:sticky; top:100px; }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; font-size:.92rem; color:var(--ink-soft); }
.summary-row.total{ border-top:1px solid var(--border); margin-top:8px; padding-top:16px; font-size:1.1rem; font-weight:800; color:var(--ink); }
.summary-row .free{ color:var(--success); font-weight:700; }
.cart-empty{ text-align:center; padding:80px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.cart-empty-icon{ display:flex; justify-content:center; }
.cart-empty-icon .icon{ width:56px; height:56px; color:var(--ink-faint); }

/* Recommandations en bas du panier, style "cart upsell" Shopify : rangée de vignettes
   carrées qui défile horizontalement, bouton "+" flottant sur l'image (pas de liste ni
   de grande product-card) — look reconnaissable des widgets "You may also like". */
.cart-reco-strip{ display:flex; gap:16px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.cart-reco-strip::-webkit-scrollbar{ display:none; }
.cart-reco-card{ display:block; flex:0 0 132px; }
.cart-reco-card:hover .cart-reco-card-name{ color:var(--primary-dark); }
.cart-reco-card-media{ position:relative; width:132px; height:132px; border-radius:var(--radius-md); background:var(--primary-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-reco-card-media.has-photo{ background:#fff; border:1px solid var(--border); }
/* Sélecteur d'enfant direct (>) important ici : l'icône de secours (catégorie) est un
   enfant direct de cette div, alors que l'icône du bouton "+" est nichée plus profond
   (dans le <button>). Sans le >, cette règle repeignait aussi l'icône du bouton dans le
   même bleu que son propre fond — un cercle plein sans "+" visible dessus. */
.cart-reco-card-media > .icon{ width:44px; height:44px; color:var(--accent); }
.cart-reco-card-media img{ width:100%; height:100%; object-fit:contain; }
.cart-reco-card-add{ position:absolute; bottom:8px; inset-inline-end:8px; width:30px; height:30px; box-shadow:var(--shadow-sm); }
.cart-reco-card-add .icon{ width:15px; height:15px; color:#fff; }
.cart-reco-card-name{
  font-size:.83rem; font-weight:600; margin-top:10px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cart-reco-card-price{ font-size:.83rem; font-weight:800; color:var(--ink); margin-top:4px; }

/* ---------- Ligne d'article panier — réutilisée telle quelle par panier.html (sa propre liste
   de lignes) et par le récapitulatif du modal de commande juste en dessous (.cd-modal-lines).
   ---------- */
.cd-line{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border-soft); }
.cd-line:last-child{ border-bottom:none; }
.cd-line-media{ width:78px; height:78px; border-radius:12px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.cd-line-media.has-photo{ background:#fff; border:1px solid var(--border); }
.cd-line-media .icon{ width:34px; height:34px; color:var(--accent); }
.cd-line-media img{ width:100%; height:100%; object-fit:contain; }
.cd-line-info{ flex:1; min-width:0; }
.cd-line-name{ display:block; font-weight:700; font-size:.94rem; line-height:1.35; margin-bottom:4px; }
.cd-line-name:hover{ color:var(--primary-dark); }
.cd-line-price{ font-size:.85rem; color:var(--ink-faint); margin-bottom:10px; }
.cd-line-controls{ display:flex; align-items:center; gap:10px; }
.cd-line-controls .qty-remove-row{ gap:9px; }
.cd-line-controls .qty-stepper button{ width:28px; height:28px; }
.cd-line-controls .qty-stepper button .icon{ width:11px; height:11px; }
.cd-line-controls .qty-stepper span{ width:26px; font-size:.8rem; }
.cd-line-controls .line-trash-btn{ width:28px; height:28px; }
.cd-line-controls .line-trash-btn .icon{ width:12px; height:12px; }
.cd-line-total{ font-weight:800; font-size:.84rem; flex:none; white-space:nowrap; }
.cd-modal-lines{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; max-height:260px; overflow-y:auto; }

/* ---------- Popup d'abandon de panier (offre de dernière chance) ---------- */
.cd-exit-overlay{ position:fixed; inset:0; background:rgba(15,30,45,.6); display:none; align-items:center; justify-content:center; z-index:400; padding:20px; }
.cd-exit-overlay.is-open{ display:flex; }
.cd-exit-card{ background:#fff; border-radius:var(--radius-lg); max-width:380px; width:100%; padding:38px 28px 28px; text-align:center; position:relative; box-shadow:var(--shadow-md); }
.cd-exit-close{ position:absolute; top:14px; inset-inline-end:14px; background:none; border:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); cursor:pointer; }
.cd-exit-close .icon{ width:16px; height:16px; }
.cd-exit-emoji{ width:72px; height:72px; border-radius:50%; background:var(--primary-tint); color:var(--primary-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:44px; line-height:1; }
.cd-exit-emoji .icon{ width:24px; height:24px; }
.cd-exit-card h3{ font-size:1.3rem; font-weight:800; margin-bottom:10px; }
.cd-exit-card p{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin-bottom:20px; }
.cd-exit-badge{ display:inline-block; background:var(--accent-tint); color:var(--accent-dark); font-weight:800; font-size:1.7rem; padding:8px 24px; border-radius:999px; margin-bottom:24px; }
.cd-exit-cta{ display:block; width:100%; background:var(--primary-dark); color:#fff; border:none; border-radius:999px; padding:15px; font-weight:800; font-size:.88rem; margin-bottom:12px; cursor:pointer; }
.cd-exit-cta:hover{ background:var(--primary); }
.cd-exit-dismiss{ display:block; width:100%; background:none; border:none; color:var(--ink-soft); font-size:.85rem; font-weight:600; text-decoration:underline; cursor:pointer; padding:6px; }

/* ---------- Toast "Ajouté au panier" (notification légère, pas de tiroir latéral) ---------- */
/* Position par défaut dans le coin (repli si l'icône panier est introuvable) — mais
   positionnée dynamiquement juste sous l'icône panier du header par JS (voir
   positionToastNearCartIcon dans cart-drawer.js), avec un transform-origin réglé au même
   endroit pour que l'ouverture donne l'impression que la notification "sort" de l'icône. */
.cart-toast{
  position:fixed; top:16px; inset-inline-end:16px; width:440px; max-width:calc(100vw - 24px);
  background:#fff; border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow-lg);
  z-index:260; overflow:hidden;
  transform-origin:top center;
  opacity:0; visibility:hidden; transform:scale(.4) translateY(-8px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .24s;
}
.cart-toast.is-open{ opacity:1; visibility:visible; transform:scale(1) translateY(0); transition-delay:0s; }
/* Bandeau teinté + icône panier à droite, panier compact avec bouton inline à côté du
   produit (pas empilé en dessous) — reprend la structure du popover d'Atida Mifarma. */
.cart-toast-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:13px; padding-inline:18px; background:var(--primary-tint); color:var(--primary-dark); font-weight:800; font-size:.85rem; }
.cart-toast-head-icon{ width:20px; height:20px; flex:none; opacity:.85; }
.cart-toast-body{ display:flex; align-items:center; gap:14px; padding:16px 18px; }
.cart-toast-media{ width:52px; height:52px; border-radius:10px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.cart-toast-media.has-photo{ background:#fff; border:1px solid var(--border); }
.cart-toast-media img{ width:100%; height:100%; object-fit:contain; }
.cart-toast-media .icon{ width:24px; height:24px; color:var(--accent); }
.cart-toast-info{ flex:1; min-width:0; }
.cart-toast-name{ font-weight:700; font-size:.86rem; line-height:1.3; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-toast-price{ font-size:.8rem; color:var(--ink-soft); font-weight:600; }
/* Bouton neutre (noir/blanc), pas coloré en vert de marque — fidèle au bouton "Ver Cesta"
   de la référence, qui reste sobre pendant que la couleur reste réservée au bandeau. */
.cart-toast-viewcart{ flex:none; background:#fff; border:1.5px solid var(--ink); color:var(--ink); border-radius:999px; padding:10px 18px; font-weight:800; font-size:.8rem; cursor:pointer; white-space:nowrap; }
.cart-toast-viewcart:hover{ background:var(--surface-alt); }
@media (max-width:480px){
  .cart-toast{ top:12px; inset-inline-end:12px; }
  .cart-toast-body{ flex-wrap:wrap; }
  .cart-toast-viewcart{ flex:1 1 100%; text-align:center; }
}

/* ---------- Modal "Commande avec paiement à la livraison" (fiche produit + panier global) ---------- */
.pd2-modal-overlay{ position:fixed; inset:0; background:rgba(15,30,45,.55); display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:200; }
.pd2-modal-overlay.is-open{ display:flex; }
.pd2-modal{ background:#fff; border-radius:var(--radius-md); width:100%; max-width:920px; overflow:hidden; }
.pd2-modal-header{ display:flex; align-items:center; gap:12px; padding:18px 24px; border-bottom:1px solid var(--border); }
.pd2-modal-header .icon{ width:20px; height:20px; color:var(--ink); flex:none; }
.pd2-modal-header h2{ flex:1; font-size:.95rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; margin:0; }
.pd2-modal-close{ background:none; border:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none; cursor:pointer; }
.pd2-modal-close .icon{ width:18px; height:18px; }
.pd2-modal-body{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; padding:26px 24px 30px; }
.pd2-modal-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.pd2-modal-field label{ display:block; font-size:.85rem; font-weight:700; margin-bottom:7px; color:var(--ink); }
.pd2-modal-field .req{ color:var(--error); }
.pd2-modal-input-wrap{ position:relative; }
.pd2-modal-input-wrap .icon{ position:absolute; top:50%; inset-inline-start:14px; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-faint); }
.pd2-modal-input-wrap input, .pd2-modal-input-wrap select{ width:100%; padding:13px 14px 13px 40px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); color:var(--ink); font:inherit; }
body.is-rtl .pd2-modal-input-wrap input, body.is-rtl .pd2-modal-input-wrap select{ padding:13px 40px 13px 14px; }
body.is-rtl .pd2-modal-input-wrap .icon{ inset-inline-start:auto; inset-inline-end:14px; }
.pd2-modal-input-wrap input:focus, .pd2-modal-input-wrap select:focus{ border-color:var(--primary); background:#fff; }
.pd2-modal-input-wrap input.has-error, .pd2-modal-input-wrap select.has-error{ border-color:var(--error); }
.pd2-modal-textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-alt); color:var(--ink); resize:vertical; font:inherit; }
.pd2-modal-textarea:focus{ border-color:var(--primary); background:#fff; }
.pd2-modal-body > div > .pd2-modal-field{ margin-bottom:16px; }
.pd2-modal-field-error{ color:var(--error); font-size:.8rem; margin-top:6px; display:none; }
.pd2-modal-field-error.show{ display:block; }
.pd2-modal-delivery-title{ font-size:.9rem; font-weight:800; margin:20px 0 10px; }
.pd2-modal-delivery-option{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--primary); background:var(--primary-tint); border-radius:var(--radius-sm); padding:14px 16px; }
.pd2-modal-delivery-option input{ accent-color:var(--primary); width:17px; height:17px; flex:none; }
.pd2-modal-delivery-option span{ flex:1; font-size:.88rem; font-weight:600; }
.pd2-modal-delivery-price{ font-weight:800; flex:none !important; }

.pd2-modal-summary-box{ background:var(--surface-alt); border-radius:var(--radius-sm); padding:18px; margin-bottom:18px; }
.pd2-modal-summary-row{ display:flex; align-items:baseline; justify-content:space-between; padding:9px 0; font-size:.9rem; color:var(--ink-soft); }
.pd2-modal-summary-row.total{ border-top:1px solid var(--border); margin-top:4px; padding-top:13px; font-weight:800; color:var(--ink); font-size:1rem; }
.pd2-modal-summary-row.discount span:last-child{ color:var(--success); font-weight:700; }
.pd2-modal-discount{ display:flex; gap:10px; margin-top:14px; }
.pd2-modal-discount input{ flex:1; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
.pd2-modal-discount button{ background:var(--ink); color:#fff; border:none; border-radius:var(--radius-sm); padding:0 18px; font-weight:700; font-size:.85rem; flex:none; cursor:pointer; }
.pd2-modal-cta{ display:block; width:100%; background:var(--ink); color:#fff; border:none; border-radius:var(--radius-sm); padding:15px; font-weight:800; font-size:.92rem; margin-bottom:18px; cursor:pointer; }
.pd2-modal-cta:hover{ background:var(--accent); }
.pd2-modal-line{ display:flex; align-items:center; gap:14px; border:1px solid var(--border); background:var(--surface-alt); border-radius:var(--radius-sm); padding:14px; margin-bottom:16px; }
.pd2-modal-line-media{ width:72px; height:72px; border-radius:8px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.pd2-modal-line-media .icon{ width:32px; height:32px; color:var(--accent); }
.pd2-modal-line-media img{ width:100%; height:100%; object-fit:contain; }
.pd2-modal-line-info{ flex:1; min-width:0; }
.pd2-modal-line-name{ font-size:.83rem; font-weight:700; margin-bottom:2px; line-height:1.3; }
.pd2-modal-line-price{ font-size:.83rem; color:var(--ink-soft); }
.pd2-modal-line-qty{ font-size:.8rem; font-weight:700; color:var(--ink-soft); background:#fff; border:1px solid var(--border); border-radius:999px; padding:4px 10px; flex:none; }

@media (max-width:760px){
  /* Bottom-sheet compact plutôt qu'un formulaire plein écran : ne prend que la place nécessaire */
  .pd2-modal-overlay{ padding:0; align-items:flex-end; background:rgba(15,30,45,.7); }
  /* Un petit espace fixe (pas un pourcentage) : juste de quoi voir les coins arrondis,
     sans laisser un grand pan de la page derrière visible au-dessus du formulaire. */
  .pd2-modal{ max-width:none; width:100%; height:calc(100% - 28px); max-height:calc(100% - 28px); border-radius:20px 20px 0 0; overflow-y:auto; }
  .pd2-modal-header{ padding:14px 18px; position:sticky; top:0; background:#fff; z-index:1; }
  .pd2-modal-header h2{ font-size:.78rem; }
  .pd2-modal-body{ grid-template-columns:1fr; gap:22px; padding:18px 18px 26px; }
  .pd2-modal-form-row{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- Forms ---------- */
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:.87rem; font-weight:700; margin-bottom:7px; color:var(--ink); }
.form-group .req{ color:var(--accent-dark); }
.form-control{ width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); transition:border-color .15s; }
.form-control:focus{ border-color:var(--primary); }
.form-control.has-error{ border-color:var(--error); }
.field-error{ color:var(--error); font-size:.8rem; margin-top:6px; display:none; }
.field-error.show{ display:block; }
textarea.form-control{ resize:vertical; min-height:96px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---------- Checkout ---------- */
.checkout-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:flex-start; }
.checkout-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; margin-bottom:24px; }
.checkout-card h2{ font-size:1.15rem; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.checkout-card h2 .icon{ width:20px; height:20px; color:var(--accent); }
.payment-option{ display:flex; align-items:flex-start; gap:14px; border:1.5px solid var(--primary); background:var(--primary-tint); border-radius:var(--radius-md); padding:18px; }
.payment-option .icon{ width:24px; height:24px; color:var(--accent-dark); margin-top:2px; flex:none; }
.payment-option b{ display:block; margin-bottom:4px; }
.payment-option p{ font-size:.85rem; color:var(--ink-soft); }
.summary-mini-item{ display:flex; justify-content:space-between; gap:10px; font-size:.87rem; padding:8px 0; color:var(--ink-soft); }
.summary-mini-item b{ color:var(--ink); font-weight:600; }
.disclaimer{ font-size:.78rem; color:var(--ink-faint); margin-top:14px; line-height:1.6; }

/* ---------- Confirmation ---------- */
.confirm-box{ max-width:560px; margin:60px auto; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:56px 40px; }
.confirm-icon{ width:84px; height:84px; border-radius:50%; background:var(--primary-tint); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; }
.confirm-icon .icon{ width:40px; height:40px; }
.confirm-number{ display:inline-block; background:var(--surface-alt); border:1px dashed var(--border); border-radius:999px; padding:10px 22px; font-weight:800; letter-spacing:.03em; margin:20px 0 30px; color:var(--primary-dark); }
.confirm-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- About / values ---------- */
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-visual{ background:var(--primary); border-radius:var(--radius-lg); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.about-visual .icon{ width:120px; height:120px; color:#fff; opacity:.9; }
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px; }
.value-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; }
.value-icon{ width:48px; height:48px; border-radius:12px; background:var(--accent-tint); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* ---------- Contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:flex-start; }
.contact-info-card{ background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:32px; }
.contact-info-card h3{ color:#fff; margin-bottom:20px; }
.contact-info-card ul{ display:flex; flex-direction:column; gap:18px; }
.contact-info-card li{ display:flex; align-items:flex-start; gap:12px; font-size:.92rem; color:#F1F5F9; }
.contact-info-card .icon{ width:19px; height:19px; color:#96DBE9; margin-top:2px; flex:none; }
.contact-info-card b{ display:block; color:#fff; margin-bottom:2px; }

/* ---------- Badges / misc ---------- */
.form-success{ display:none; align-items:center; gap:10px; background:var(--primary-tint); color:var(--primary-dark); padding:16px 18px; border-radius:var(--radius-sm); margin-top:18px; font-weight:600; font-size:.9rem; }
.form-success.show{ display:flex; }
.form-success .icon{ width:18px; height:18px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  /* Icône au-dessus du texte (pas à côté) dès qu'on passe à 2 colonnes : une cellule deux fois
     plus étroite qu'en rangée de 4 n'a plus la place pour icône + texte côte à côte sans que
     le texte se retrouve compressé sur une colonne très étroite. align-items repasse à
     flex-start (au lieu du center hérité, pensé pour la rangée) pour garder l'icône et le
     texte alignés à gauche une fois empilés, pas centrés. */
  .trust-item{ flex-direction:column; align-items:flex-start; }
  /* Tablette et mobile : la liste détaillée des articles inclus dans un pack prend trop
     de place — remplacée par un résumé compact sur une ligne. */
  .bundle-includes{ display:none; }
  .bundle-includes-summary{ display:flex; }
  .tst-grid{ grid-template-columns:1fr; }
  .about-hero{ grid-template-columns:1fr; }
  .cart-layout, .checkout-layout, .contact-layout{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  /* Le résumé n'est plus à côté du tableau une fois la mise en page empilée :
     un position:sticky resterait collé en haut de l'écran pendant le défilement. */
  .cart-summary{ position:static; top:auto; }
  /* Une fois le panier empilé sur une colonne, les recommandations passent avant le
     résumé/bouton "Passer la commande" — on incite à compléter le panier avant de
     pousser vers le paiement, plutôt qu'après (où elles seraient ignorées). */
  .cart-table, .cart-mobile-list{ order:1; }
  .cart-reco{ order:2; }
  .cart-summary{ order:3; }
}
/* Recherche en-tête cachée sur mobile (place limitée) — une icône loupe dédiée dans les
   icônes d'en-tête ouvre un bandeau de recherche plein largeur à la place, voir plus bas. */
.mobile-search-toggle{ display:none; }
.mobile-search-bar{ display:none; background:var(--surface); border-bottom:1px solid var(--border); }
.mobile-search-bar.is-open{ display:block; }
.mobile-search-bar-inner{ display:flex; align-items:center; gap:8px; padding:12px 24px; }
.mobile-search-bar .mobile-search{ width:100%; max-width:none; flex:1; }
.mobile-search-close{ flex:none; }
@media (max-width: 860px){
  .header-search:not(.mobile-search){ display:none; }
  .mobile-search-toggle{ display:flex; }
  .main-nav{ position:fixed; inset-inline-start:0; top:116px; width:100%; height:calc(100% - 116px); background:var(--bg); flex-direction:column; align-items:flex-start; padding:28px 24px; gap:6px; transform:translateX(-105%); transition:transform .25s ease; z-index:40; overflow-y:auto; }
  body.is-rtl .main-nav{ transform:translateX(105%); }
  body.is-rtl .main-nav.is-open,
  .main-nav.is-open{ transform:translateX(0); }
  /* Dans le menu plein écran, .main-nav redevient une liste verticale : catégories puis
     liens secondaires sous leur propre étiquette de section, chaque lien avec une icône,
     son nom et une flèche — un vrai menu d'app mobile plutôt qu'une simple liste de texte.
     La puce verticale utilisée en ligne sur ordinateur (.category-nav-sep) devient un trait
     horizontal espacé entre les deux groupes. */
  .main-nav{ max-width:none; margin:0; padding:12px 18px 28px; border-top:none; overflow-x:visible; gap:2px; }
  .audience-switch-wrap{ width:100%; }
  .audience-switch{ width:100%; padding:4px; }
  .audience-btn{ flex:1; justify-content:center; padding:10px 12px; font-size:.85rem; }
  /* Le menu déroulant est réservé à l'ordinateur (js/layout.js ne l'ouvre jamais sur mobile) :
     la liste de catégories du menu plein écran, toujours visible juste en dessous, joue déjà
     ce rôle ici. */
  .audience-menu{ display:none; }
  .category-nav-label{
    display:block; width:100%; font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; color:var(--ink-faint); padding:16px 10px 6px;
  }
  .category-nav-link{
    display:flex; align-items:center; gap:12px; width:100%; padding:12px 10px; border-radius:12px;
  }
  /* La pilule "Promotions" dédiée de la rangée d'ordinateur (voir promoPillHTML dans
     js/layout.js) fait doublon ici : "Promotions" réapparaît normalement dans la liste de
     catégories du menu plein écran juste en dessous (si son audience le permet), comme
     n'importe quelle autre catégorie. */
  .category-nav-link-promopill{ display:none; }
  .category-nav-link:active, .category-nav-link:hover{ background:var(--surface-alt); }
  .category-nav-link.is-promo:hover{ background:#FBE7E7; }
  .category-nav-icon{
    display:flex; align-items:center; justify-content:center; flex:none;
    width:34px; height:34px; border-radius:10px; background:var(--primary-tint); color:var(--primary-dark);
  }
  .category-nav-icon .icon{ width:18px; height:18px; }
  .category-nav-link.is-promo .category-nav-icon{ background:#FBE7E7; color:#D93B3B; }
  .category-nav-text{ flex:1; min-width:0; font-size:.95rem; }
  .category-nav-chevron{ display:flex; flex:none; color:var(--ink-faint); }
  .category-nav-chevron .icon{ width:16px; height:16px; }
  body.is-rtl .category-nav-chevron .icon{ transform:scaleX(-1); }
  .category-nav-link-secondary .category-nav-icon{ background:var(--surface-alt); color:var(--ink-soft); }
  .category-nav-link-secondary.is-active .category-nav-icon{ background:var(--primary-tint); color:var(--primary-dark); }
  .category-nav-sep{ display:block; width:100%; height:1px; margin:10px 0; background:var(--border); }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
}
@media (max-width: 640px){
  .section{ padding:52px 0; }
  /* Le texte plus grand/gras demandé pour la topbar (voir .topbar-msg plus haut) déborde sur
     les boutons FR/AR à cette largeur — plusieurs messages font plus de 390px de large une
     fois agrandis. Légèrement réduit ici seulement ; reste grand sur ordinateur/tablette. */
  .topbar-msg{ font-size:.76rem; }
  .topbar-msg .icon{ width:14px; height:14px; }
  /* Les libellés actuels ("Voir les meilleures ventes" / "Commander sur WhatsApp") sont trop
     longs pour tenir côte à côte sur une seule ligne à cette largeur, même réduits — un pill
     entièrement arrondi avec du texte sur 2-3 lignes a l'air cassé. Empilés en pleine largeur,
     chacun garde son texte sur une seule ligne. */
  .hero-actions{ flex-direction:column; gap:10px; }
  .hero-actions .btn{ width:100%; text-align:center; white-space:nowrap; }
  /* Les 3 stats (10 000+ / 12 / 4.8/5) se répartissaient en flex avec un grand gap fixe :
     les 2 premières tenaient sur la ligne, la 3e était rejetée seule sur la ligne
     suivante avec un espacement incohérent. Une grille à 3 colonnes égales les garde
     toujours sur une seule ligne, comme en desktop. */
  .hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  /* Les filtres de catégorie passent en bandeau défilant horizontalement plutôt que de
     s'empiler en grille à 2 colonnes déséquilibrée (même traitement que .cat-grid).
     flex:1 1 100% force les pastilles sur leur propre ligne pleine largeur dans
     .shop-layout (qui reste en flex-wrap:wrap), ce qui repousse naturellement le tri
     ("Trier par") sur la ligne suivante. */
  .filter-pills{
    flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -24px; padding:2px 24px 6px;
    scroll-snap-type:x proximity;
  }
  .filter-pills::-webkit-scrollbar{ display:none; }
  .filter-pill{ flex:none; white-space:nowrap; scroll-snap-align:start; }
  .trust-grid, .product-grid{ grid-template-columns:1fr 1fr; align-items:stretch; }
  /* La carte vidéo est haute (format 9/16) et son pied (miniature + nom + prix) a besoin de
     plus de largeur que les 2 colonnes du product-grid classique — sinon le nom du produit
     passe sur 2-3 lignes et désaligne le prix d'une carte à l'autre. Repli sur un défilement
     horizontal façon "stories" (même principe que .filter-pills/.cart-reco-strip), chaque
     carte gardant une largeur confortable et un aperçu de la suivante. */
  #homeVideoGrid.product-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x proximity;
    gap:14px; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #homeVideoGrid.product-grid::-webkit-scrollbar{ display:none; }
  #homeVideoGrid.product-grid .video-card{ flex:0 0 64%; max-width:240px; scroll-snap-align:start; }
  /* Avis clients : 3 cartes empilées en pleine largeur (une sous l'autre) rendaient la section
     très longue à faire défiler sur mobile. Même défilement horizontal type "stories" que la
     grille vidéo ci-dessus — chaque carte garde une largeur confortable et un aperçu de la
     suivante, comme .deals-track. */
  .tst-grid{
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x proximity;
    gap:14px; padding-bottom:4px; margin:0 -24px; padding-inline:24px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tst-grid::-webkit-scrollbar{ display:none; }
  .tst-card{ flex:0 0 84%; max-width:320px; scroll-snap-align:start; }
  /* Bons plans du mois : la carte à largeur fixe (240px) prenait plus de la moitié de l'écran
     sur mobile, écrasant l'aperçu de la carte suivante — resserrée à une largeur plus confortable.
     Flèches un peu plus petites pour rester discrètes en médaillon sur des cartes déjà étroites
     (elles se superposent au bord de la piste, voir .deals-arrow plus haut — plus de colonne
     dédiée à réclamer sur un écran déjà limité). */
  .deal-card{ flex-basis:180px; max-width:180px; }
  .deals-arrow{ top:92px; width:34px; height:34px; }
  .deals-arrow .icon{ width:15px; height:15px; }
  /* La description courte alourdit les cartes en 2 colonnes sur mobile — masquée pour
     garder des fiches produit compactes (nom + prix suffisent en aperçu). Sans elle, le
     footer (prix + bouton) suivait directement le nom : deux cartes côte à côte avec des
     noms de longueurs différentes (1 vs 2 lignes) désalignaient le prix entre elles.
     margin-top:auto le rescolle en bas de chaque carte, peu importe la longueur du nom. */
  .product-short{ display:none; }
  .product-footer{ margin-top:auto; }
  .values-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .header-help{ display:none; }
  /* Option 2 : grid compact à 2 colonnes — tout reste visible (pas de pli/dépli), mais
     Navigation/Aide/Contact se répartissent sur 2 colonnes au lieu d'empiler chaque
     section en pleine largeur, ce qui réduit la hauteur sans rien cacher. Les boutons
     .footer-col-toggle redeviennent de simples titres non cliquables, comme en desktop. */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .footer-brand{ grid-column:1 / -1; margin-bottom:8px; }
  .footer-col-toggle{ cursor:default; }
  .footer-col-chevron{ display:none; }
  .footer-col-body{ display:block; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  /* Sur mobile, le tableau cède la place à une liste de cartes compactes (même style
     que le tiroir panier) — plus lisible qu'un tableau reconverti en blocs empilés. */
  .cart-table{ display:none; }
  .cart-mobile-list{ display:flex; flex-direction:column; gap:12px; }
  .cart-mobile-list .cd-line{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
  /* La bande défile horizontalement quelle que soit la taille d'écran — juste des cartes
     un peu plus petites sur mobile pour en laisser entrevoir plus à la fois. */
  .cart-reco-strip{ gap:10px; }
  .cart-reco-card{ flex-basis:108px; }
  .cart-reco-card-media{ width:108px; height:108px; }
}
@media (max-width: 460px){
  /* Les 4 cartes "Pourquoi choisir High Santé" retombaient à 1 colonne sur très petit
     écran : chaque carte prenait toute la largeur et il fallait beaucoup scroller pour
     les voir toutes. Gardées à 2 colonnes, comme les fiches produit juste en dessous. */
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-item{ padding:16px 14px; gap:10px; }
  .trust-icon{ width:34px; height:34px; }
  .trust-item h3{ font-size:.86rem; }
  .trust-item p{ font-size:.78rem; }
  /* Les fiches produit restent sur 2 colonnes même sur les très petits écrans (demande
     explicite), avec un peu moins de marge intérieure pour rester lisibles. */
  .product-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .product-body{ padding:12px 12px 14px; gap:6px; }
  .product-name{ font-size:.88rem; }
  .price-current{ font-size:.98rem; }
  .add-btn{ width:36px; height:36px; }
  /* Le badge "Vous économisez" gardait sa taille desktop et paraissait disproportionné
     à côté du reste de la carte, déjà réduit pour le format 2 colonnes. */
  .bundle-savings{ padding:5px 10px; font-size:.72rem; gap:4px; margin-top:4px; }
  .bundle-savings .icon{ width:12px; height:12px; }
  .bundle-includes-summary{ font-size:.72rem; gap:5px; }
  .bundle-includes-summary .icon{ width:13px; height:13px; }
  /* Encore un cran plus compact sur très petit écran — la bande de recommandations ne
     doit pas dominer visuellement une page déjà étroite. */
  .cart-reco-card{ flex-basis:92px; }
  .cart-reco-card-media{ width:92px; height:92px; }
  .cart-reco-card-add{ width:26px; height:26px; bottom:6px; }
  .cart-reco-card-add .icon{ width:13px; height:13px; }
  .cart-reco-card-name{ font-size:.78rem; margin-top:8px; }
  .cart-reco-card-price{ font-size:.78rem; }
}
@media (max-width: 480px){
  /* Sur téléphone, logo + 5 icônes d'action (recherche, favoris, compte, panier, menu)
     dépassaient la largeur de l'écran : le bouton menu (le dernier de la liste, donc
     celui qui dépassait le plus) se retrouvait poussé hors champ — invisible, impossible
     à toucher, et le menu de navigation principal devenait totalement inaccessible sur
     mobile (aucun autre moyen d'atteindre "Catégorie" ou "Suivi commande"). Tout est
     réduit ici pour que l'ensemble tienne sur les écrans les plus étroits (~360-390px). */
  .header-inner{ gap:12px; }
  .logo{ gap:6px; font-size:1.05rem; }
  .logo-badge{ width:38px; height:38px; }
  .header-actions{ gap:4px; }
  .icon-btn{ width:32px; height:32px; }
  .icon-btn .icon{ width:18px; height:18px; }
}
@media (max-width: 520px){
  /* Le bloc prix passait à la ligne (flex-wrap) en dessous du nom/badge, ce qui doublait
     la hauteur de chaque carte. On garde le prix aligné à droite sur la même ligne que le
     nom, comme sur desktop, avec des tailles/marges réduites pour que ça tienne. */
  .tier-option{ gap:10px; padding:11px 14px; }
  .tier-radio-dot{ width:18px; height:18px; }
  .tier-name{ font-size:.86rem; }
  .tier-ribbon{ font-size:.6rem; padding:3px 7px; }
  .tier-save{ font-size:.74rem; margin-top:2px; }
  .tier-price-current{ font-size:.92rem; }
  .tier-price-old{ font-size:.72rem; }
}

/* ---------- RTL fine-tuning ---------- */
body.is-rtl .breadcrumb .icon{ transform:scaleX(-1); }