/* ============================================================
   PHARMASPEED — Design System : tokens, reset, typographie, anims
   ============================================================ */

:root {
  /* ---- Bleu médical (accent principal) ---- */
  --blue-50:  #eef4ff;
  --blue-100: #dbe7ff;
  --blue-200: #bcd0ff;
  --blue-300: #8eb1ff;
  --blue-400: #5e87fb;
  --blue-500: #2563eb;   /* primaire */
  --blue-600: #1d4fd0;
  --blue-700: #1a40a8;
  --blue-800: #1b3a8a;
  --blue-900: #1a3270;

  /* accent dynamique (peut être surchargé par Tweaks) */
  --accent:        var(--green-500);
  --accent-strong: var(--green-600);
  --accent-soft:   var(--green-50);
  --accent-ring:   color-mix(in srgb, var(--accent) 35%, transparent);

  /* ---- Vert (naturel / bio) issu du logo ---- */
  --green-500: #46b32a;
  --green-600: #379121;
  --green-50:  #eef9e9;

  /* ---- Magenta (promo / vente flash) issu du logo ---- */
  --promo-500: #e6298a;
  --promo-600: #c91874;
  --promo-50:  #fdeaf4;

  /* ---- Étoiles / notes ---- */
  --star: #f6a623;

  /* ---- Neutres cool (clinique) ---- */
  --ink-900: #0d1623;
  --ink-800: #16233a;
  --ink-700: #2a3b56;
  --ink-600: #455067;
  --ink-500: #69748a;
  --ink-400: #97a1b3;
  --ink-300: #c6cdda;
  --line:    #e4e9f2;
  --line-soft:#eef1f7;
  --surface:  #ffffff;
  --surface-2:#f6f8fc;
  --surface-3:#eef2f9;
  --bg:       #f3f6fb;

  /* ---- Typo ---- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Rayons ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Ombres ---- */
  --sh-xs: 0 1px 2px rgba(16,30,54,.06);
  --sh-sm: 0 2px 8px rgba(16,30,54,.07);
  --sh-md: 0 8px 24px rgba(16,30,54,.09);
  --sh-lg: 0 18px 48px rgba(16,30,54,.14);
  --sh-accent: 0 10px 26px color-mix(in srgb, var(--accent) 30%, transparent);

  /* ---- Layout ---- */
  --maxw: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 132px;

  /* densité grille produits (Tweaks) */
  --card-min: 230px;
}

* { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink-800);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* garde-fou : les icônes SVG inline sans dimension explicite restent petites */
svg:not([width]):not([height]) { width: 1.2em; height: 1.2em; flex-shrink: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; }

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ---- Typographie ---- */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; color: var(--ink-900); letter-spacing: -.01em; }
.serif { font-family: var(--font-display); }
.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}

/* ---- Layout helpers ---- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 6vw, 88px); }
.section-tight { padding-block: clamp(32px, 4vw, 56px); }
.row { display: flex; align-items: center; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stack { display: flex; flex-direction: column; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.section-head p { color: var(--ink-500); margin-top: 6px; max-width: 52ch; }
.section-link { font-weight: 700; font-size: 15px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.section-link svg { transition: transform .25s ease; }
.section-link:hover svg { transform: translateX(4px); }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; padding: 5px 10px; border-radius: var(--r-pill); letter-spacing: .01em; }
.badge-promo { background: var(--promo-500); color: #fff; }
.badge-new   { background: var(--accent); color: #fff; }
.badge-bio   { background: var(--green-50); color: var(--green-600); }
.badge-stock { background: var(--surface-3); color: var(--ink-600); }
.badge-flash { background: linear-gradient(100deg, var(--promo-600), var(--promo-500)); color:#fff; }

/* ---- Animations : scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }
.reveal-d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes pulse-ring { 0%{ box-shadow: 0 0 0 0 var(--accent-ring);} 70%{ box-shadow: 0 0 0 12px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { 0%{ transform: scale(.6); opacity:0;} 60%{ transform: scale(1.15);} 100%{ transform: scale(1); opacity:1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }

/* utilitaire skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--surface-3); }
.skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.4s infinite; }

/* scrollbar discret */
.hscroll { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 99px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }

.muted { color: var(--ink-500); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }