/* ============================================================
   PHARMACIE RHAZLAOUI — v3 « Éditorial vert » (2026-08-12)
   Couche de direction artistique. Chargée APRÈS style.css,
   modern-3d.css et v2.css : elle a le dernier mot.

   Direction choisie par Bounna le 2026-08-12 (maquette B).
   Références étudiées avant de coder (règle R7) :
     — Parapharmacie Lafayette (FR) : bande de réassurance chiffrée
     — Atida / Santédiscount (FR)   : hiérarchie des rayons
     — La Maison Para (Casablanca)  : WhatsApp + retrait, prix en MAD
     — BeautyMall.ma                : mur de marques
     — Daway.ma                     : mise en avant du service pharmacien
   Repris : la bande de réassurance, le mur de marques, la parole
   du pharmacien mise au centre.
   Refusé : carrousel de bannières promo, pastilles de remise
   criardes, blog d'appoint, prix inventés.

   Le vert porte la marque, l'or porte l'action, le crème porte
   la lecture. Une seule police à empattements pour les titres.
   ============================================================ */

:root {
  --v3-green:     #123D2E;
  --v3-green-d:   #0C2B21;
  --v3-cream:     #FAF6EF;
  --v3-paper:     #FFFFFF;
  --v3-ink:       #16241E;
  --v3-ink-2:     #5F6F68;
  --v3-line:      #E6DFD2;
  --v3-gold:      #B98A2E;
  --v3-gold-lt:   #E8C77E;
  --v3-serif:     'Fraunces', Georgia, 'Times New Roman', serif;
  --v3-sans:      'Inter', 'Instrument Sans', system-ui, sans-serif;
}

/* ── Canvas ─────────────────────────────────────────────── */
body {
  background: var(--v3-cream) !important;
  color: var(--v3-ink) !important;
  font-family: var(--v3-sans) !important;
}

/* ── Bandeau de service : intégré à la bande verte ──────── */
.v2-announce {
  background: var(--v3-green) !important;
  color: #C6D8CD !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}
.v2-announce a { color: #fff !important; text-decoration: none; font-weight: 600; }

/* ── Navigation : canvas vert, pas blanc ─────────────────
   v2.css cible #navbar.v2-nav : il faut la même spécificité
   (ID + classe) pour reprendre la main, !important ne suffit pas. */
#navbar.v2-nav,
#navbar.v2-nav.scrolled {
  background: var(--v3-green) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.v2-brand-name { color: #fff !important; font-family: var(--v3-serif) !important; font-weight: 400 !important; letter-spacing: -.02em; }
.v2-brand-sub  { color: #A9C4B6 !important; letter-spacing: .2em !important; }
.v2-brand img  { background: #fff; padding: 3px; border-radius: 10px; }

.v2-search input {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
.v2-search input::placeholder { color: #9DBAAB !important; }
.v2-search i { color: #9DBAAB !important; }

.v2-icon-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}
.v2-icon-btn:hover { background: rgba(255, 255, 255, .1) !important; }

/* L'or est réservé à l'action principale. */
.v2-cta {
  background: var(--v3-gold) !important;
  color: #1A1206 !important;
  box-shadow: none !important;
}
.v2-cta:hover { background: #A87A22 !important; }
/* Le bouton secondaire vit sur le hero vert : encre claire,
   sinon il disparaît. */
.v2-cta--ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
}
.v2-cta--ghost:hover { background: rgba(255, 255, 255, .1) !important; }

/* ── Rubriques : prolongent la bande verte ─────────────── */
.v2-rayons {
  background: var(--v3-green) !important;
  border-top: 1px solid rgba(255, 255, 255, .12) !important;
  border-bottom: 0 !important;
}
.v2-rayons-in a {
  color: #DCEADF !important;
  font-weight: 500 !important;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 4px;
}
.v2-rayons-in a:hover { color: #fff !important; border-bottom-color: var(--v3-gold) !important; }
.v2-rayons-in a.is-promo { color: var(--v3-gold-lt) !important; }

/* ── Hero : pleine largeur verte ───────────────────────── */
#hero.v2-hero {
  background: var(--v3-green) !important;
  color: #fff !important;
  padding-bottom: 5.25rem !important;
}
.v2-eyebrow { color: var(--v3-gold) !important; letter-spacing: .24em !important; }
.v2-hero h1 {
  font-family: var(--v3-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 4.4vw, 3.85rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
  color: #fff !important;
}
.v2-hero h1 em { font-style: italic; color: var(--v3-gold-lt); }
.v2-lede { color: #C6D8CD !important; }
.v2-addr { color: #A9C4B6 !important; }
.v2-addr i { color: var(--v3-gold) !important; }

/* Le bloc horaires redevient lisible sur fond vert. */
.v2-status.pharma-status {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 2px !important;
  color: #fff !important;
}
.v2-status .v2-status-label { color: #fff !important; }
.v2-status .v2-status-hours { color: #A9C4B6 !important; }
.v2-status-full { color: #C6D8CD !important; border-top-color: rgba(255, 255, 255, .16) !important; }
.v2-status-full b { color: #fff !important; }

/* La photographie ne se maquille pas : angles francs, pas d'ombre portée. */
.v2-hero-media { border-radius: 2px !important; box-shadow: none !important; }
.v2-hero-media img { border-radius: 2px !important; }
.v2-hero-caption {
  background: var(--v3-cream) !important;
  color: var(--v3-ink) !important;
  border-radius: 0 !important;
  padding: 1.25rem 1.4rem !important;
}
.v2-hero-caption b { font-family: var(--v3-serif) !important; font-weight: 400 !important; font-size: 1.06rem; }
.v2-hero-caption span { color: var(--v3-ink-2) !important; }

/* ── Bande de réassurance : colonnes séparées par un filet ─ */
.v2-proof {
  background: var(--v3-cream) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--v3-line) !important;
}
.v2-proof-item { border-right: 1px solid var(--v3-line); padding-right: 1.75rem; }
.v2-proof-item:last-child { border-right: 0; padding-right: 0; }

/* Empilés sur mobile, les filets verticaux n'ont plus de sens :
   ils deviennent des séparateurs horizontaux. */
@media (max-width: 860px) {
  .v2-proof-item { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--v3-line); padding-bottom: 1rem; }
  .v2-proof-item:last-child { border-bottom: 0; padding-bottom: 0; }
}
.v2-proof-item i { color: var(--v3-green) !important; }
.v2-proof-item b { color: var(--v3-ink) !important; font-weight: 600 !important; }
.v2-proof-item span { color: var(--v3-ink-2) !important; }

/* ── Sections ──────────────────────────────────────────── */
.section      { background: var(--v3-cream) !important; }
.section-alt  { background: var(--v3-paper) !important; border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); }

.section-title h2 {
  font-family: var(--v3-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
  color: var(--v3-ink) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.section-title h2::after { background: var(--v3-gold) !important; }
.section-title p { color: var(--v3-ink-2) !important; }

/* ── Parole du pharmacien ──────────────────────────────── */
.v3-quote { background: var(--v3-green-d); color: #fff; }
.v3-quote-in {
  max-width: 1180px; margin: 0 auto;
  padding: 4.5rem 2rem;
  display: grid; grid-template-columns: 240px 1fr; gap: 3.5rem; align-items: center;
}
/* C'est l'emblème de l'officine, pas un portrait : on le contient,
   on ne le recadre pas. */
.v3-quote-photo {
  width: 220px; height: 220px; border-radius: 50%;
  object-fit: contain; padding: 34px;
  background: var(--v3-cream);
}
.v3-quote blockquote {
  font-family: var(--v3-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.34; letter-spacing: -.02em; font-weight: 400;
  margin: 0;
}
.v3-quote .v3-sig { margin-top: 1.5rem; font-size: .875rem; color: #A9C4B6; letter-spacing: .04em; }
.v3-quote .v3-sig b { display: block; color: #fff; font-size: .95rem; margin-bottom: .2rem; letter-spacing: .06em; }

@media (max-width: 860px) {
  .v3-quote-in { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.25rem; }
  .v3-quote-photo { width: 150px; height: 150px; }
}

/* ── Cartes catalogue et marques : papier, angles francs ── */
.catalogue-card,
.marque-badge,
.product-card {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.catalogue-card:hover,
.marque-badge:hover,
.product-card:hover {
  border-color: var(--v3-green) !important;
  transform: none !important;
  box-shadow: 0 10px 30px rgba(18, 61, 46, .10) !important;
}
.catalogue-card::before { background: var(--v3-gold) !important; }
.catalogue-card-img { background: #EFEAE0 !important; border-bottom: 1px solid var(--v3-line); }
.catalogue-card-body h3 { font-family: var(--v3-serif) !important; font-weight: 400 !important; letter-spacing: -.02em; }
.catalogue-card-brand { color: var(--v3-gold) !important; }
.catalogue-card-meta span { color: var(--v3-ink-2) !important; }
/* La pastille verte pleine appartient à l'ancienne direction.
   Ici, l'action secondaire est un lien souligné d'or. */
.catalogue-card .catalogue-voir-plus {
  background: none !important;
  color: var(--v3-green) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--v3-gold) !important;
  padding: 0 0 3px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .85rem !important;
}
.catalogue-card:hover .catalogue-voir-plus { box-shadow: none !important; }

.marque-badge-name  { font-family: var(--v3-serif) !important; font-weight: 400 !important; }
.marque-badge-count { color: var(--v3-ink-2) !important; }
.marque-badge-logo  { background: var(--v3-cream) !important; border: 1px solid var(--v3-line); border-radius: 2px; }

/* ── Repli quand la photo produit n'existe pas ──────────
   67 des 77 fiches pointent vers images/pro-photos/, dossier
   vide. Sans repli, le navigateur affiche une image cassée.
   On rend un monogramme à la place. */
.brand-mono {
  width: 100%; height: 100%; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  background: #EFEAE0;
}
.brand-mono span {
  font-family: var(--v3-serif);
  font-size: 2.6rem; line-height: 1;
  color: var(--v3-green); opacity: .38;
}
.marque-badge-logo .brand-mono { background: transparent; min-height: 0; }
.marque-badge-logo .brand-mono span { font-size: 1.75rem; opacity: .55; }

/* ── Prix : aucun prix n'existe en base, on ne l'invente pas ─ */
.price-empty {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 600;
  color: var(--v3-green); background: transparent;
  border: 1px solid var(--v3-green); border-radius: 999px;
  padding: .35rem .7rem;
}
.price-empty::before { content: "\f232"; font-family: "Font Awesome 6 Brands"; }

/* ── Galerie ───────────────────────────────────────────── */
.gallery-filter {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 2px !important;
  color: var(--v3-ink) !important;
}
.gallery-filter.active {
  background: var(--v3-green) !important;
  border-color: var(--v3-green) !important;
  color: #fff !important;
}
.gallery-item { border-radius: 2px !important; }
.btn-load-more {
  background: transparent !important;
  border: 1px solid var(--v3-green) !important;
  color: var(--v3-green) !important;
  border-radius: 2px !important;
}
.btn-load-more:hover { background: var(--v3-green) !important; color: #fff !important; }

/* ── Pied de page ──────────────────────────────────────── */
#footer { background: var(--v3-green) !important; color: #A9C4B6 !important; }
#footer h3, #footer h4, #footer b, #footer strong { color: #fff !important; font-family: var(--v3-serif) !important; font-weight: 400 !important; }
#footer a { color: #C6D8CD !important; }
#footer a:hover { color: #fff !important; }

/* ── Accessibilité ─────────────────────────────────────── */
/* Les cartes sont des div cliquables : sans anneau de focus,
   elles sont invisibles au clavier. */
.catalogue-card:focus-visible,
.marque-badge:focus-visible,
.product-card:focus-visible,
.gallery-item:focus-visible {
  outline: 3px solid var(--v3-gold);
  outline-offset: 3px;
}

/* Le contenu part à opacity 0 : si l'animation est désactivée
   ou le JS absent, il ne doit pas rester invisible. */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-left, .fade-in-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}