/* ZonePara — feuille de style principale
   Extraite de la maquette validee. Tokens en haut, blocs ensuite. */
/* ============================================================
   TOKENS — vert officine / blanc clinique / corail (promo)
   Le lavande est réservé au rayon compléments alimentaires.
   ============================================================ */
:root{
  --vert:#0E8A63;        /* action principale */
  --vert-d:#0A6B4D;      /* barres sombres, footer */
  --vert-l:#E6F4EE;
  --nuit:#0E2A22;
  --corail:#E2543F;      /* promotions et urgence, jamais ailleurs */
  --corail-l:#FDEDEA;
  --lavande:#6E5AC9;     /* compléments alimentaires */
  --lavande-l:#EFECFB;
  --encre:#12241F;
  --gris:#6B7C76;
  --ligne:#E2E9E6;
  --fond:#F6F8F7;
  --r:14px;
  --shadow:0 1px 2px rgba(14,42,34,.06), 0 8px 24px rgba(14,42,34,.06);
  /* motif croix de pharmacie, utilisé en fond des zones sombres */
  --croix:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M14 8h3v5h5v3h-5v5h-3v-5H9v-3h5z' fill='%23ffffff' opacity='.09'/%3E%3C/svg%3E");
}

*{ -webkit-tap-highlight-color:transparent }
body{
  font-family:"Public Sans", system-ui, sans-serif;
  background:var(--fond); color:var(--encre);
  font-size:15px; padding-bottom:64px;
}
h1,h2,h3,h4,.font-display{ font-family:"Bricolage Grotesque", system-ui, sans-serif; font-weight:600; letter-spacing:-.015em }
a{ text-decoration:none; color:inherit }
:focus-visible{ outline:2px solid var(--vert); outline-offset:2px; border-radius:4px }
html[dir="rtl"] body{ font-family:"Noto Kufi Arabic", system-ui, sans-serif }

.container-xxl{ max-width:1320px }
.section{ padding:22px 0 }
@media (min-width:992px){ .section{ padding:30px 0 } }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px }
.section-head h2{ font-size:1.15rem; margin:0 }
.section-head .more{ font-size:.85rem; color:var(--vert); font-weight:600; white-space:nowrap }
.eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gris); font-weight:600 }

/* ====================== BARRE SYSTÈME ====================== */
.topbar{ background:var(--vert-d); color:#CFE5DC; font-size:.78rem }
.topbar .in{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:36px }
.topbar a{ color:#CFE5DC; display:inline-flex; align-items:center; gap:6px }
.topbar a:hover{ color:#fff }
.topbar .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45 }

/* sélecteur de langue : un seul composant, réutilisé en haut de page
   (fond vert) et dans le menu mobile (fond clair) */
.lang{ display:inline-flex; gap:2px; background:rgba(255,255,255,.14); border-radius:999px; padding:3px }
.lang button,.lang a{ text-decoration:none; display:inline-block;  border:0; background:transparent; color:#DDEEE7; font-size:.72rem; font-weight:600; padding:3px 11px; border-radius:999px }
.lang button.active,.lang a.active{ background:#fff; color:var(--vert-d) }
.lang.on-light{ background:var(--vert-l) }
.lang.on-light button,.lang.on-light a{ color:var(--vert-d) }
.lang.on-light button.active,.lang.on-light a.active{ background:var(--vert); color:#fff }

/* ====================== EN-TÊTE ======================
   Une seule rangée à toutes les tailles : menu, logo, recherche, actions.
   Les écarts sont pilotés par gap, plus par des colonnes de grille. */
.header{ background:#fff; border-bottom:1px solid var(--ligne); position:sticky; top:0; z-index:1030 }
.hdr{ display:flex; align-items:center; gap:10px; min-height:58px }
@media (min-width:992px){ .hdr{ gap:24px; min-height:74px } }

.brand{ flex:none; display:flex; align-items:center; gap:9px; font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.25rem; color:var(--nuit) }
.brand .mark{ width:34px; height:34px; flex:none; display:block }
.brand .pa{ color:var(--vert); margin-inline-start:.18em }
.oc-top .brand .pa, footer .brand .pa{ color:#8FE0C2 }
.brand .word{ display:none }                       /* sous 400 px, le sigle suffit */
@media (min-width:400px){ .brand .word{ display:inline } }

.burger{ flex:none; width:40px; height:40px; border:0; border-radius:11px; background:transparent; color:var(--nuit); font-size:1.35rem; display:grid; place-items:center }
.burger:hover{ background:var(--vert-l); color:var(--vert-d) }

/* champ de recherche : bordure discrète au repos, anneau vert au focus */
.search{ flex:1 1 auto; min-width:0; max-width:640px; display:flex; align-items:center;
  background:#fff; border:1.5px solid var(--ligne); border-radius:999px; padding:3px;
  transition:border-color .15s ease, box-shadow .15s ease }
.search:focus-within{ border-color:var(--vert); box-shadow:0 0 0 3px rgba(14,138,99,.12) }
.search select{ border:0; background:transparent; font-size:.82rem; color:var(--gris); padding-inline:12px; max-width:150px; border-inline-end:1px solid var(--ligne) }
.search input{ border:0; flex:1; min-width:0; background:transparent; padding:7px 12px; font-size:.9rem }
.search input:focus,.search select:focus{ outline:0 }
.search button{ flex:none; width:34px; height:34px; border:0; border-radius:50%; background:var(--vert); color:#fff; display:grid; place-items:center; font-size:.95rem }
.search button:hover{ background:var(--vert-d) }
@media (min-width:992px){ .search{ margin-inline:auto } .search button{ width:38px; height:38px } }

.hdr-actions{ flex:none; display:flex; align-items:center; gap:2px; margin-inline-start:auto }
/* mobile : icônes seules, sans libellé, zone tactile de 40 px */
.icon-btn{ position:relative; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  color:var(--nuit); font-size:1.25rem; flex:none }
.icon-btn:hover{ background:var(--vert-l); color:var(--vert-d) }
.icon-btn .badge{ position:absolute; top:2px; inset-inline-end:2px; background:var(--corail); font-size:.58rem; padding:.2em .4em }
.icon-link{ display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
  padding:6px 10px; border-radius:11px; color:var(--nuit); font-size:.68rem; font-weight:500; line-height:1.1 }
.icon-link i{ font-size:1.2rem }
.icon-link:hover{ background:var(--vert-l); color:var(--vert-d) }
.icon-link .badge{ position:absolute; top:1px; inset-inline-end:4px; background:var(--corail); font-size:.6rem; padding:.2em .42em }

/* ====================== NAV RAYONS ====================== */
.catbar{ background:#fff; border-bottom:1px solid var(--ligne); position:relative; z-index:1020 }
/* La rangée ne rogne rien (le mega-menu doit pouvoir en sortir) ;
   seul le sous-bloc .scroller défile horizontalement. */
.catbar .catrow{ display:flex; align-items:center; gap:6px; padding:6px 0 }
.catbar .scroller{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none }
.catbar .scroller::-webkit-scrollbar{ display:none }
.catbar a{ white-space:nowrap; padding:8px 13px; border-radius:9px; font-size:.88rem; color:#35504A; font-weight:500 }
.catbar a:hover{ background:var(--vert-l); color:var(--vert-d) }
.catbar .all{ border:0; white-space:nowrap; padding:8px 13px; border-radius:9px; font-size:.88rem; background:var(--vert); color:#fff; font-weight:600; margin-inline-end:6px }
.catbar .all:hover{ background:var(--vert-d); color:#fff }
.catbar a.complement{ color:var(--lavande); font-weight:600 }
.catbar a.complement:hover{ background:var(--lavande-l) }

/* ====================== MENU MOBILE (offcanvas) ====================== */
.oc{ width:86%; max-width:330px }
.oc-top{ background:var(--vert-d); color:#fff; padding:16px; display:flex; align-items:center; justify-content:space-between }
.oc-top .brand{ color:#fff; font-size:1.15rem }
.oc-top .brand .word{ display:inline }
.oc-body{ padding:4px 16px 28px; overflow-y:auto }
.oc-title{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gris); font-weight:600; margin:18px 0 4px }
.oc-link{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--ligne); color:var(--encre); font-size:.93rem }
.oc-link > i:first-child{ width:22px; text-align:center; color:var(--vert-d); font-size:1.05rem }
.oc-link:hover{ color:var(--vert-d) }
.oc-link.lav > i:first-child{ color:var(--lavande) }
.oc-link .chev{ margin-inline-start:auto; color:#BCCBC5; font-size:.8rem }
html[dir="rtl"] .oc-link .chev{ transform:scaleX(-1) }

/* ====================== VISUELS PLACEHOLDER ====================== */
.thumb{ aspect-ratio:1/1; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:2rem; background:linear-gradient(135deg,#A9BEB7,#7E9790) }
.t1{ background:linear-gradient(135deg,#5FD3B2,#0E8A63) }
.t2{ background:linear-gradient(135deg,#FFB199,var(--corail)) }
.t3{ background:linear-gradient(135deg,#9AD7E8,#3D7F9B) }
.t4{ background:linear-gradient(135deg,#A492E8,#5A46B0) }
.t5{ background:linear-gradient(135deg,#F7D08A,#D98A17) }
.t6{ background:linear-gradient(135deg,#C7E5A0,#5B9E3E) }

/* ====================== HERO / CARROUSEL ======================
   Le ratio est verrouillé sur le conteneur : la photo est RECADRÉE
   (cover) et jamais étirée, quelle que soit la taille du fichier.
   Deux variables par slide :
     --photo        : image desktop, 1200 × 620 px
     --photo-mobile : image mobile facultative, 800 × 600 px
     --focus        : point de recadrage, ex. « center top » ou « 30% 50% »
   ============================================================ */
.hero-slider .carousel,
.hero-slider .carousel-inner{ border-radius:var(--r); overflow:hidden }

/* Le cadre : ratio imposé, hauteur réduite par rapport à la version
   précédente. Les slides ne contiennent QUE la photo — tout le texte
   promotionnel est incrusté dans l'image par le graphiste.
   position:relative explicite, pour ne pas dépendre de Bootstrap.
   ATTENTION : ne jamais renommer .hero-panel en .slide — Bootstrap
   utilise déjà .slide sur l'élément .carousel. */
.hero-slider .carousel-item{ position:relative; aspect-ratio:16/10; min-height:170px }
@media (min-width:576px){ .hero-slider .carousel-item{ aspect-ratio:16/9 } }
@media (min-width:992px){ .hero-slider .carousel-item{ aspect-ratio:1200/500; min-height:0 } }

.hero-panel{ position:absolute; inset:0; display:block; overflow:hidden }
.hero-panel::before{                             /* la photo, recadrée jamais étirée */
  content:""; position:absolute; inset:0;
  background-image:var(--photo, none);
  background-size:cover;
  background-position:var(--focus, center);
  background-repeat:no-repeat;
}
/* voile discret en bas, uniquement pour détacher les puces de navigation */
.hero-panel::after{
  content:""; position:absolute; inset:auto 0 0 0; height:64px;
  background:linear-gradient(to top, rgba(10,30,24,.42), rgba(10,30,24,0));
}
/* sur téléphone, on sert la version portrait si elle existe */
@media (max-width:575.98px){
  .hero-panel::before{ background-image:var(--photo-mobile, var(--photo, none)) }
}

/* dégradés de secours, visibles tant que la photo n'est pas déposée */
.s1{ background:radial-gradient(120% 130% at 100% 0%, #17B287, var(--vert) 45%, var(--nuit)) }
.s2{ background:linear-gradient(135deg,#5FD3B2,#0A6B4D) }
.s3{ background:linear-gradient(135deg,#A492E8,#3B2C86) }
.s4{ background:linear-gradient(135deg,#9AD7E8,#2F6E8A) }
.s5{ background:linear-gradient(135deg,#F7D08A,#C97A0E) }

/* puces de navigation : zone tactile de 44 px de haut */
.hero-slider .carousel-indicators{ margin-bottom:10px }
.hero-slider .carousel-indicators [data-bs-target]{
  width:26px; height:4px; border-radius:2px; border:0; opacity:.45;
  margin-inline:4px; background-clip:padding-box; border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.hero-slider .carousel-indicators .active{ opacity:1; background-color:#fff }
/* flèches masquées sur mobile : on y navigue au doigt */
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{ width:8%; opacity:0; transition:opacity .2s }
.hero-slider:hover .carousel-control-prev,
.hero-slider:hover .carousel-control-next{ opacity:.85 }
@media (max-width:991.98px){
  .hero-slider .carousel-control-prev,
  .hero-slider .carousel-control-next{ display:none }
}
/* Cartes latérales : elles se partagent exactement la hauteur du carrousel
   (grille à lignes égales), plus de grands vides blancs */
.side-stack{ display:grid; gap:12px; height:100% }
@media (min-width:576px) and (max-width:991.98px){ .side-stack{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:992px){ .side-stack{ grid-auto-rows:1fr } }

.hero-side{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r); box-shadow:var(--shadow);
  padding:14px; display:flex; align-items:center; gap:12px; transition:border-color .15s ease, transform .15s ease }
.hero-side:hover{ border-color:var(--vert); transform:translateY(-2px) }
.hero-side .ic{ flex:none; width:50px; height:50px; border-radius:13px; display:grid; place-items:center; color:#fff; font-size:1.3rem }
.hero-side .tt{ font-family:"Bricolage Grotesque"; font-weight:600; font-size:.98rem; line-height:1.2; color:var(--encre) }
.hero-side .st{ font-size:.78rem; color:var(--gris); margin-top:2px }
.hero-side .go{ margin-inline-start:auto; color:#C2D0CA; font-size:.9rem; flex:none }
html[dir="rtl"] .hero-side .go{ transform:scaleX(-1) }

/* mega-menu des rayons (PC) */
.mega{ width:min(880px, calc(100vw - 48px)); padding:20px 22px; border:1px solid var(--ligne);
  border-radius:16px; box-shadow:0 18px 44px rgba(14,42,34,.16); margin-top:6px }
.mega .col-r{ margin-bottom:14px }
.mega .mt{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--vert-d);
  font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:7px }
.mega .mt i{ font-size:.95rem }
.mega .mt.lav{ color:var(--lavande) }
.mega a{ display:block; padding:3px 0; font-size:.85rem; color:#4A625B }
.mega a:hover{ color:var(--vert); padding-inline-start:4px; transition:padding .12s ease }
.mega .foot{ border-top:1px solid var(--ligne); margin-top:6px; padding-top:12px;
  display:flex; flex-wrap:wrap; gap:18px; font-size:.84rem; font-weight:600 }
.mega .foot a{ color:var(--vert-d); display:inline-flex; align-items:center; gap:6px; padding:0 }
.btn-vert{ background:var(--vert); border-color:var(--vert); color:#fff; font-weight:600 }
.btn-vert:hover{ background:var(--vert-d); border-color:var(--vert-d); color:#fff }
.btn-blanc{ background:#fff; color:var(--nuit); font-weight:600 }
.btn-blanc:hover{ background:var(--vert-l); color:var(--nuit) }

/* ====================== RÉASSURANCE ====================== */
.trust{ background:#fff; border-radius:var(--r); box-shadow:var(--shadow) }
.trust .col{ border-top:1px solid var(--ligne) }
.trust .col:nth-child(-n+2){ border-top:0 }
@media (min-width:992px){
  .trust .col{ border-top:0; border-inline-start:1px solid var(--ligne) }
  .trust .col:first-child{ border-inline-start:0 }
}
.trust .item{ display:flex; gap:10px; align-items:center; padding:14px }
.trust .item i{ font-size:1.4rem; color:var(--vert) }
.trust .item strong{ display:block; font-size:.86rem }
.trust .item span{ font-size:.78rem; color:var(--gris) }

/* ====================== ACHAT PAR BESOIN (signature) ====================== */
/* la pilule ne tenait pas deux lignes proprement : passage en carte */
.need{ display:flex; align-items:center; gap:12px; padding:12px; height:100%; box-shadow:var(--shadow) }
.need .ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--vert-l); color:var(--vert-d); font-size:1.15rem; flex:none }
.need .tx{ font-size:.88rem; font-weight:600; line-height:1.25; min-width:0 }
.need .sub{ display:block; font-size:.75rem; font-weight:400; color:var(--gris); margin-top:1px }

/* ====================== SOCLE COMMUN DES CARTES ======================
   Une seule règle d'état pour toutes les cartes du site : même bordure,
   même survol, même focus clavier. Avant, chaque bloc avait le sien. */
.card-p,.cat-tile,.shop-card,.need,.brand-tile,.hero-side{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r);
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease }
.card-p:hover,.cat-tile:hover,.shop-card:hover,.need:hover,.brand-tile:hover,.hero-side:hover{
  border-color:var(--vert); transform:translateY(-2px); box-shadow:0 10px 26px rgba(14,42,34,.10) }
.card-p:focus-within{ border-color:var(--vert) }

/* ====================== CARTE PRODUIT ====================== */
.card-p{ position:relative; overflow:hidden; box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column }
.card-p .media{ position:relative; padding:10px }
.card-p .flag{ position:absolute; top:16px; inset-inline-start:16px; z-index:2; font-size:.68rem; font-weight:600; padding:3px 8px; border-radius:6px; background:var(--corail); color:#fff }
.card-p .flag.complement{ background:var(--lavande) }
.card-p .fav{ position:absolute; top:14px; inset-inline-end:14px; z-index:3; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--nuit); border:0 }
.card-p .body{ padding:0 12px 12px; display:flex; flex-direction:column; gap:5px; flex:1 }
.card-p .marque{ font-size:.72rem; font-weight:600; color:var(--vert-d); text-transform:uppercase; letter-spacing:.04em }
/* hauteur de 2 lignes réservée : les prix et les stocks restent alignés
   d'une carte à l'autre même quand le titre tient sur une seule ligne */
.card-p .title{ font-size:.87rem; line-height:1.35; min-height:2.7em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card-p .title a{ color:inherit }
.card-p .title a::after{ content:""; position:absolute; inset:0; z-index:1 }  /* toute la carte devient cliquable */
/* quand vous brancherez les vraies photos : contain et non cover,
   sinon un flacon haut se retrouve rogné en haut et en bas */
.card-p .media img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; border-radius:10px }
/* la contenance : information non négociable en parapharmacie */
.card-p .contenance{ font-size:.75rem; color:var(--gris) }
.price{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.05rem }
.price small{ font-size:.7rem; font-weight:600 }
.price.promo{ color:var(--corail) }
.price-old{ font-size:.78rem; color:var(--gris); text-decoration:line-through }
.stock{ font-size:.74rem; color:#1B7A4B; font-weight:500 }
.stock.bas{ color:var(--corail) }

/* pied de carte : officine à gauche, ajout au panier à droite */
.p-foot{ display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:2px }
.add{ position:relative; z-index:2; margin-inline-start:auto; flex:none; width:32px; height:32px;
  border:0; border-radius:50%; background:var(--vert-l); color:var(--vert-d);
  display:grid; place-items:center; font-size:.95rem }
.add:hover{ background:var(--vert); color:#fff }

/* la puce officine : le marqueur du multiboutique */
.shop-chip{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:#35504A; background:#F1F5F3; border-radius:999px; padding:3px 9px 3px 3px; min-width:0; max-width:100% }
html[dir="rtl"] .shop-chip{ padding:3px 3px 3px 9px }
.shop-chip .av{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.6rem; font-weight:700; background:var(--vert-d); flex:none }
.shop-chip .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.shop-chip .bi-patch-check-fill{ color:var(--vert); font-size:.72rem }

/* ====================== OFFRES ====================== */
.deals{ background:linear-gradient(135deg,var(--corail-l),#fff); border:1px solid #F7DAD4; border-radius:var(--r); padding:16px }
.countdown{ display:inline-flex; gap:4px; align-items:center; font-family:"Bricolage Grotesque"; font-weight:700 }
.countdown span{ background:var(--nuit); color:#fff; border-radius:6px; padding:2px 7px; font-size:.85rem; font-variant-numeric:tabular-nums }

/* ====================== RAYONS ====================== */
.cat-tile{ padding:14px 8px; text-align:center; box-shadow:var(--shadow); height:100%; min-height:94px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px }
.cat-tile i{ font-size:1.5rem; color:var(--vert-d) }
.cat-tile div{ font-size:.8rem; margin-top:6px; font-weight:500 }

/* ====================== MARQUES ====================== */
.brand-tile{ height:64px; border-radius:12px; padding-inline:10px; text-align:center; display:grid; place-items:center;
  font-family:"Bricolage Grotesque"; font-weight:600; color:#4A625B; font-size:.88rem }
.brand-tile:hover{ color:var(--vert-d) }

/* ====================== COMPLÉMENTS (lavande) ====================== */
.complements{ border-radius:var(--r); padding:22px; color:#fff; background:var(--croix), radial-gradient(110% 120% at 0% 0%, #8E7BEE 0%, var(--lavande) 45%, #2E2266 100%) }
.complements .tag{ background:rgba(255,255,255,.16); border-radius:999px; padding:3px 10px; font-size:.72rem; font-weight:600 }
.c-card{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px; height:100% }
.c-card .v{ font-family:"Bricolage Grotesque"; font-weight:600 }
.c-card .k{ font-size:.78rem; opacity:.8 }

/* ====================== CONSEIL PHARMACIEN ====================== */
.advice{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:22px; box-shadow:var(--shadow) }
.advice .ring{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:var(--vert-l); color:var(--vert-d); font-size:1.5rem }

/* ====================== OFFICINES ====================== */
.shop-card{ box-shadow:var(--shadow); padding:16px 12px; text-align:center; height:100% }
.shop-card .logo{ width:52px; height:52px; border-radius:14px; margin:0 auto 8px; display:grid; place-items:center; color:#fff; font-family:"Bricolage Grotesque"; font-weight:700; background:var(--vert-d) }
.shop-card .meta{ font-size:.75rem; color:var(--gris) }

/* ====================== DEVENIR PARTENAIRE ====================== */
.seller{ background:var(--croix), var(--nuit); color:#fff; border-radius:var(--r); padding:24px }
.seller ul{ list-style:none; padding:0; margin:0; font-size:.88rem; color:#C3D8D1 }
.seller li i{ color:#4FD3A5 }

/* ====================== PIED DE PAGE ====================== */
footer{ background:var(--nuit); color:#A9C2BA; margin-top:26px; padding:30px 0 20px }
footer h5{ color:#fff; font-size:.92rem; margin-bottom:12px }
footer a{ color:#A9C2BA; font-size:.86rem; display:block; padding:3px 0 }
footer a:hover{ color:#fff }
.pay-badge{ background:#fff; color:var(--nuit); border-radius:6px; padding:5px 9px; font-size:.72rem; font-weight:600 }
.legal{ background:rgba(255,255,255,.06); border-radius:10px; padding:12px 14px; font-size:.78rem; color:#C3D8D1 }

/* ====================== BARRE MOBILE ====================== */
.tabbar{ position:fixed; bottom:0; inset-inline:0; background:#fff; border-top:1px solid var(--ligne); display:flex; z-index:1040 }
.tabbar a{ flex:1; text-align:center; padding:8px 0 6px; font-size:.66rem; color:var(--gris) }
.tabbar a i{ display:block; font-size:1.2rem }
.tabbar a.active{ color:var(--vert-d) }
@media (min-width:992px){ .tabbar{ display:none } body{ padding-bottom:0 } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important } }

/* ---- ajouts cote application ---- */
.alert{ border-radius:var(--r) }
.card-p .media img{ display:block }
.meta{ font-size:.75rem; color:var(--gris) }

/* =====================================================================
   PAGES DE LISTE ET FICHE PRODUIT
   ===================================================================== */

/* fil d'Ariane */
.ariane{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:.82rem; color:var(--gris); margin-bottom:14px }
.ariane a{ color:var(--gris) }
.ariane a:hover{ color:var(--vert-d) }
.ariane i{ font-size:.7rem; opacity:.6 }
.ariane span{ color:var(--encre); font-weight:500 }
html[dir="rtl"] .ariane i{ transform:scaleX(-1) }

/* sous-rayons et filtres rapides */
.sous-rayons{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-bottom:14px }
.sous-rayons::-webkit-scrollbar{ display:none }
.sous-rayons a{ white-space:nowrap; background:#fff; border:1px solid var(--ligne); border-radius:999px;
  padding:7px 14px; font-size:.85rem; color:#35504A }
.sous-rayons a:hover{ border-color:var(--vert); color:var(--vert-d) }
.sous-rayons a.on{ background:var(--vert); border-color:var(--vert); color:#fff; font-weight:600 }

/* barre de tri */
.barre-tri{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:8px 12px; margin-bottom:14px }
.barre-tri .nb{ font-size:.85rem; color:var(--gris); font-weight:500 }
.barre-tri .tris{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none }
.barre-tri .tris::-webkit-scrollbar{ display:none }
.barre-tri .tris a{ white-space:nowrap; padding:5px 11px; border-radius:8px; font-size:.83rem; color:#4A625B }
.barre-tri .tris a:hover{ background:var(--vert-l); color:var(--vert-d) }
.barre-tri .tris a.on{ background:var(--vert-l); color:var(--vert-d); font-weight:600 }

/* panneau de filtres */
.filtres{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:16px }
.filtres .f-bloc{ padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--ligne) }
.filtres .f-titre{ font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--vert-d); font-weight:700; margin-bottom:8px }
.filtres .f-ligne{ display:flex; align-items:center; gap:8px; font-size:.86rem; padding:3px 0; cursor:pointer }
.filtres .f-ligne input{ accent-color:var(--vert) }

/* pagination */
.pagin{ display:flex; justify-content:center; gap:4px; margin-top:22px }
.pagin a{ min-width:38px; height:38px; display:grid; place-items:center; background:#fff;
  border:1px solid var(--ligne); border-radius:10px; font-size:.88rem; font-weight:500; color:#35504A }
.pagin a:hover{ border-color:var(--vert); color:var(--vert-d) }
.pagin a.on{ background:var(--vert); border-color:var(--vert); color:#fff }
html[dir="rtl"] .pagin i{ transform:scaleX(-1) }

/* galerie produit */
.galerie .g-principale{ position:relative; background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:18px }
.galerie .g-principale img{ width:100%; aspect-ratio:1/1; object-fit:contain }
.galerie .g-principale .flag{ position:absolute; top:14px; inset-inline-start:14px; background:var(--corail);
  color:#fff; font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:7px }
.galerie .g-vignettes{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; scrollbar-width:none }
.galerie .g-vignettes::-webkit-scrollbar{ display:none }
.galerie .g-vignettes button{ flex:none; width:64px; height:64px; padding:6px; background:#fff;
  border:1px solid var(--ligne); border-radius:10px }
.galerie .g-vignettes button.on{ border-color:var(--vert) }
.galerie .g-vignettes img{ width:100%; height:100%; object-fit:contain }

/* fiche produit */
.fiche h1{ font-size:1.45rem; line-height:1.25; margin:2px 0 6px }
.fiche .marque{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--vert-d) }
.fiche .vendeur{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--vert-l); border-radius:12px; padding:10px 12px }
.fiche .vendeur .shop-chip{ background:#fff }
.fiche .atouts{ display:flex; flex-wrap:wrap; gap:14px; font-size:.82rem; color:var(--gris) }
.fiche .atouts i{ color:var(--vert) }
.etiquette{ display:inline-block; background:#fff; border:1px solid var(--ligne); border-radius:999px;
  padding:5px 12px; font-size:.82rem; margin:0 6px 6px 0; color:#35504A }
.etiquette:hover{ border-color:var(--vert); color:var(--vert-d) }
.nav-tabs .nav-link{ color:#4A625B; font-size:.9rem; border:0; border-bottom:2px solid transparent }
.nav-tabs .nav-link.active{ color:var(--vert-d); font-weight:600; border-bottom-color:var(--vert); background:transparent }

/* en-tete de boutique */
.entete-boutique{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:18px; box-shadow:var(--shadow) }
.entete-boutique .logo{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:var(--vert-d); color:#fff; font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.3rem; flex:none }
.entete-boutique h1{ font-size:1.25rem; margin:0 0 2px }
.badge-verif{ background:var(--vert-l); color:var(--vert-d); border-radius:999px; padding:7px 14px; font-size:.82rem; font-weight:600 }

/* formulaires */
.form-control:focus{ border-color:var(--vert); box-shadow:0 0 0 3px rgba(14,138,99,.12) }
.form-label{ font-size:.84rem; font-weight:600; color:#35504A; margin-bottom:4px }

/* =====================================================================
   PANIER, COMMANDE ET SUIVI
   ===================================================================== */
.ligne-panier{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--ligne); flex-wrap:wrap }
.ligne-panier:last-child{ border-bottom:0 }
.ligne-panier img{ width:56px; height:56px; object-fit:contain; background:#fff; border-radius:8px; flex:none }
.recap{ position:sticky; top:96px }

.mode-paiement{ display:flex; align-items:center; gap:12px; padding:12px; margin-bottom:8px; cursor:pointer;
  background:#fff; border:1px solid var(--ligne); border-radius:12px; transition:border-color .15s ease }
.mode-paiement:hover{ border-color:var(--vert) }
.mode-paiement:has(input:checked){ border-color:var(--vert); background:var(--vert-l) }
.mode-paiement input{ accent-color:var(--vert); flex:none }
.mode-paiement > i{ font-size:1.3rem; color:var(--vert-d); flex:none }

/* etat d'une sous-commande */
.etat{ font-size:.75rem; font-weight:600; padding:4px 11px; border-radius:999px; background:#F1F5F3; color:#35504A }
.etat-nouveau{ background:var(--vert-l); color:var(--vert-d) }
.etat-confirmee{ background:#E7F0FB; color:#2A5D9F }
.etat-preparation{ background:#FDF3E2; color:#9A6510 }
.etat-expediee{ background:#EDE9FB; color:var(--lavande) }
.etat-livree{ background:#E3F5EA; color:#1B7A4B }
.etat-annulee{ background:var(--corail-l); color:var(--corail) }

/* frise des etapes */
.etapes{ display:flex; gap:4px; margin:10px 0 12px; flex-wrap:wrap }
.etapes span{ flex:1; min-width:70px; text-align:center; font-size:.7rem; color:var(--gris);
  padding-top:12px; position:relative }
.etapes span::before{ content:""; position:absolute; top:0; inset-inline:0; height:4px; border-radius:2px; background:var(--ligne) }
.etapes span.on{ color:var(--vert-d); font-weight:600 }
.etapes span.on::before{ background:var(--vert) }

/* =====================================================================
   ESPACE VENDEUR
   ===================================================================== */
.menu-vendeur{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:8px; box-shadow:var(--shadow) }
.menu-vendeur a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  font-size:.9rem; color:#35504A }
.menu-vendeur a:hover{ background:var(--vert-l); color:var(--vert-d) }
.menu-vendeur a.on{ background:var(--vert); color:#fff; font-weight:600 }
.menu-vendeur a.on i{ color:#fff }
.menu-vendeur i{ width:20px; text-align:center; color:var(--vert-d) }

.kpi{ background:#fff; border:1px solid var(--ligne); border-radius:var(--r); padding:14px; height:100%; box-shadow:var(--shadow) }
.kpi .k{ display:block; font-size:.75rem; color:var(--gris); font-weight:500 }
.kpi .v{ display:block; font-family:"Bricolage Grotesque"; font-weight:700; font-size:1.7rem; line-height:1.2; margin-top:2px }

/* réponse du pharmacien */
.reponse-pharma{ background:var(--vert-l); border-inline-start:3px solid var(--vert); border-radius:0 10px 10px 0;
  padding:10px 12px; margin-top:8px; font-size:.88rem }
.reponse-pharma .meta i{ color:var(--vert) }
.fav-form{ position:absolute; top:14px; inset-inline-end:14px; z-index:3; margin:0 }
.fav-form .fav{ position:static }
.card-p .fav.on{ color:var(--corail) }

/* pages éditoriales */
.page-texte h1{ font-size:1.5rem; margin:0 0 8px }
.page-texte .chapo{ font-size:1rem; color:var(--vert-d); font-weight:500; margin-bottom:20px }
.page-texte h2{ font-size:1.02rem; margin:22px 0 6px; color:var(--vert-d) }
.page-texte p{ font-size:.93rem; line-height:1.65; margin:0 0 10px }

/* lignes de formulaire en back-office */
.ligne-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.ligne-form .form-control{ flex:1 1 140px; min-width:0 }
.ic-besoin{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--vert-l); color:var(--vert-d); flex:none }

/* galerie côté officine */
.galerie-admin{ display:flex; gap:10px; flex-wrap:wrap }
.vignette-admin{ position:relative; width:104px; height:104px; border:1px solid var(--ligne);
  border-radius:10px; background:#fff; padding:6px }
.vignette-admin img{ width:100%; height:100%; object-fit:contain }
.vignette-admin .actions{ position:absolute; inset:auto 0 0 0; display:flex; justify-content:center; gap:4px;
  background:rgba(255,255,255,.94); border-radius:0 0 9px 9px; padding:3px }
.vignette-admin .actions button{ border:0; background:transparent; color:var(--gris); font-size:.9rem; padding:2px 6px }
.vignette-admin .actions button:hover{ color:var(--vert-d) }

/* barre de progression des statistiques */
.barre{ height:8px; background:var(--ligne); border-radius:4px; overflow:hidden; margin-top:3px }
.barre span{ display:block; height:100%; background:var(--vert); border-radius:4px }

/* tableau des notifications */
.table-notif{ width:100%; border-collapse:collapse; font-size:.86rem }
.table-notif th{ text-align:start; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gris); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--ligne) }
.table-notif td{ padding:8px; border-bottom:1px solid var(--ligne); vertical-align:top }