/*
  site.css — Elmont Drugs And Surgicals · direction "Med-Tech Bento / Glass Trust".
  Archétype : pharmacie clinique moderne. Palette indigo → violet (couleurs d'origine
  de la marque Elmont). Signature : grille bento asymétrique + cartes givrées + dégradé
  bleu→violet courant dans le hero et les accents. Fonts Lexend / Source Sans 3.

  Tout le design vit ICI : variables Bootstrap (--bs-*), styles sur classes/ids Bootstrap
  EXISTANTS et pseudo-éléments. AUCUNE classe custom dans le balisage. Versionné via ?v=.
*/

:root {
  --bs-primary: #2A39C7;
  --bs-primary-rgb: 42, 57, 199;
  --bs-secondary: #8B14A6;
  --bs-secondary-rgb: 139, 20, 166;
  --bs-link-color: #2A39C7;
  --bs-link-color-rgb: 42, 57, 199;
  --bs-link-hover-color: #1d2aa0;
  --bs-border-radius: .9rem;
  --bs-border-radius-lg: 1.5rem;
  --bs-border-radius-xl: 2rem;
  --bs-body-bg: #F5F6FC;
  --bs-body-color: #20264A;
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-emphasis-color: #14173A;

  --el-indigo: #2A39C7;
  --el-indigo-deep: #1E2A9E;
  --el-violet: #8B14A6;
  --el-violet-bright: #A11BC0;
  --el-ink: #14173A;
  --el-mist: #EEF0FB;
  --el-grad: linear-gradient(135deg, #2447D9 0%, #5C2FCF 48%, #9B1FB0 100%);
}

/* ── Base & atmosphere ─────────────────────────────────────────────── */
body {
  color: #20264A;
  background-color: #F5F6FC;
  background-image:
    radial-gradient(circle at 12% -5%, rgba(42, 57, 199, .08), transparent 42%),
    radial-gradient(circle at 92% 4%, rgba(139, 20, 166, .07), transparent 46%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .display-1, .display-2, .display-3, .display-5, .display-6 {
  font-family: "Lexend", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--el-ink);
}
.display-3 { font-weight: 800; line-height: 1.04; }
.lead { font-weight: 400; }
.text-white h1, .text-white h2, .text-white h3, #home h1 { color: #fff; }

/* Selection + focus consistent with the brand. */
::selection { background: rgba(139, 20, 166, .18); }
:focus-visible { outline: 3px solid rgba(42, 57, 199, .45); outline-offset: 2px; }

/* ── Color utilities mapped to the palette ─────────────────────────── */
.text-primary { color: var(--el-indigo) !important; }
.text-secondary { color: var(--el-violet) !important; }
.bg-primary { background-color: var(--el-indigo) !important; }
.bg-light { background-color: #ECEEFA !important; }
.bg-dark { background-color: var(--el-ink) !important; }
.badge.text-bg-light { background-color: #fff !important; color: var(--el-indigo) !important; border: 1px solid rgba(42,57,199,.18); }
.link-light:hover { color: #fff !important; }
.navbar-brand strong { color: var(--el-indigo); }

/* ── Buttons : pill, gradient lift, clear states ───────────────────── */
.btn { --bs-btn-border-radius: 50rem; font-weight: 600; }
.btn-lg { --bs-btn-border-radius: 50rem; }
.btn-primary {
  --bs-btn-bg: var(--el-indigo);
  --bs-btn-border-color: var(--el-indigo);
  --bs-btn-hover-bg: var(--el-indigo-deep);
  --bs-btn-hover-border-color: var(--el-indigo-deep);
  --bs-btn-active-bg: var(--el-indigo-deep);
  background-image: var(--el-grad);
  border: none;
  box-shadow: 0 .5rem 1.1rem rgba(42, 57, 199, .28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 .8rem 1.6rem rgba(91, 31, 176, .34);
  filter: saturate(1.08);
}
.btn-outline-primary {
  --bs-btn-color: var(--el-indigo);
  --bs-btn-border-color: rgba(42, 57, 199, .55);
  --bs-btn-hover-bg: var(--el-indigo);
  --bs-btn-hover-border-color: var(--el-indigo);
  --bs-btn-active-bg: var(--el-indigo-deep);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.2rem rgba(42, 57, 199, .2); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-hover-bg: #fff; --bs-btn-color: var(--el-indigo); --bs-btn-hover-color: var(--el-indigo-deep); transition: transform .2s ease, box-shadow .2s ease; }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(20, 23, 58, .18); }
.btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.6); transition: transform .2s ease; }
.btn-outline-light:hover { transform: translateY(-2px); }

/* ── Navbar : frosted glass + animated underline ───────────────────── */
.navbar.sticky-top {
  background-color: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(42, 57, 199, .1) !important;
}
.navbar .navbar-brand { font-size: 1.35rem; font-weight: 800; }
.navbar .nav-link { font-weight: 600; color: #2c3160; position: relative; }
.navbar .nav-link::after {
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .35rem;
  height: 2px; background: var(--el-grad); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }
.navbar .nav-link:hover { color: var(--el-indigo); }
.dropdown-menu { border: 1px solid rgba(42,57,199,.12); border-radius: var(--bs-border-radius); box-shadow: 0 1rem 2.5rem rgba(20, 23, 58, .14); }
.dropdown-item:active { background-color: var(--el-indigo); }

/* ── HERO : blue→violet mesh + soft halos ──────────────────────────── */
#home {
  position: relative;
  background:
    radial-gradient(60% 90% at 88% 8%, rgba(161, 27, 192, .55), transparent 60%),
    radial-gradient(70% 80% at 6% 100%, rgba(36, 71, 217, .55), transparent 55%),
    linear-gradient(135deg, #2447D9 0%, #4d2cd0 50%, #8B14A6 100%);
  overflow: hidden;
}
#home::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
}
#home .container { position: relative; z-index: 1; }
#home .badge.text-bg-light { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(4px); }
/* Hero glass image card lifts above the gradient. */
#home .card {
  border-radius: var(--bs-border-radius-xl);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1.8rem 3.4rem rgba(20, 23, 58, .34);
}
#home .card img { border-top-left-radius: var(--bs-border-radius-xl); border-top-right-radius: var(--bs-border-radius-xl); }

/* ── Cards : layered depth, gradient accent bar, hover lift ────────── */
.card {
  border-radius: var(--bs-border-radius-lg);
  background: #fff;
  box-shadow: 0 .35rem 1rem rgba(20, 23, 58, .06), 0 .12rem .35rem rgba(20, 23, 58, .05);
  transition: box-shadow .28s ease, transform .28s ease;
}
.card.shadow-sm:hover, .card.shadow-lg:hover { transform: translateY(-4px); box-shadow: 0 1.1rem 2.6rem rgba(42, 57, 199, .18); }
.card .rounded-circle.bg-primary { background-image: var(--el-grad); background-color: transparent !important; box-shadow: 0 .5rem 1rem rgba(91, 31, 176, .3); }

/* ── SERVICES : asymmetric BENTO grid (the signature) ──────────────── */
#services .row { position: relative; }
#services .card { position: relative; overflow: hidden; }
/* Gradient accent bar across the top of every bento card. */
#services .card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--el-grad);
}
#services .card.bg-primary { background-image: var(--el-grad); background-color: transparent !important; }
#services .card.bg-primary::before { background: rgba(255,255,255,.45); }

@media (min-width: 992px) {
  #services .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 1.5rem;
  }
  #services .row > [class*="col"] { width: auto; max-width: none; flex: none; padding: 0; }
  /* Feature card spans 2×2; CTA card spans 2 wide on the bottom row. */
  #services .row > [class*="col"]:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  #services .row > [class*="col"]:nth-child(4) { grid-column: span 2; }
  #services .row > [class*="col"]:nth-child(1) .card { justify-content: center; }
  #services .row > [class*="col"]:nth-child(1) h3 { font-size: 1.9rem; }
  #services .row > [class*="col"]:nth-child(1) .rounded-circle { width: 3.75rem !important; height: 3.75rem !important; }
}

/* ── Section label flourish : gradient underline on the kicker ─────── */
section > .container > .text-center > .text-uppercase,
section > .container > .d-flex .text-uppercase {
  display: inline-block; position: relative; padding-bottom: .45rem;
}
section > .container > .text-center > .text-uppercase::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 2.4rem; height: 3px; border-radius: 3px; background: var(--el-grad);
}

/* ── Lists / forms / map ───────────────────────────────────────────── */
.list-group-item { border-color: rgba(42, 57, 199, .12); }
.form-control { border-radius: var(--bs-border-radius); border: 1.5px solid rgba(42, 57, 199, .18); background-color: #fff; }
.form-control:focus { border-color: var(--el-indigo); box-shadow: 0 0 0 .25rem rgba(42, 57, 199, .15); }
#contactus .card { border-radius: var(--bs-border-radius-xl); }
.card iframe { display: block; }

/* Shop quick-links : turn the light buttons into soft tiles. */
.btn-light.border {
  --bs-btn-bg: #fff; border-color: rgba(42, 57, 199, .14) !important;
  border-radius: var(--bs-border-radius) !important;
  box-shadow: 0 .25rem .7rem rgba(20, 23, 58, .05);
}
.btn-light.border:hover { border-color: var(--el-indigo) !important; color: var(--el-indigo); transform: translateY(-2px); }

/* ── Footer ────────────────────────────────────────────────────────── */
footer.bg-dark { background-image: linear-gradient(180deg, #14173A 0%, #0f1230 100%); }
footer .text-primary { color: #8ea2ff !important; }
footer h2, footer h3 { color: #fff; }

/* ── SEO block : high in DOM, rendered last (order-last). ───────────── */
main.d-flex > section { order: 0; }

/* ── Motion : staggered reveal on load (CSS only). ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  main > section, main > article { animation: elRise .6s ease both; }
  main > section:nth-of-type(2) { animation-delay: .05s; }
  main > section:nth-of-type(3) { animation-delay: .1s; }
  main > section:nth-of-type(4) { animation-delay: .15s; }
  main > section:nth-of-type(5) { animation-delay: .2s; }
  main > section:nth-of-type(6) { animation-delay: .25s; }
  #services .card, #home .card { animation: elPop .5s ease both; }
}
@keyframes elRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes elPop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ── Responsive polish ─────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .display-3 { font-size: 2.5rem; }
  #home .card img { max-height: 320px; }
}