/* ============================================================
   PHARMACIE RHAZLAOUI — v6 « Relief et mouvement » (2026-09-17)
   Couche chargée APRÈS v4-alpham.css.

   Références étudiées avant de coder (règle R7, 9 sites ouverts) :
     — Lusion, L.I.S.A. (Locomotive) : UN objet 3D dans un cadre
       arrondi, texte HTML à côté, matière métal + envmap.
     — Apple AirPods Pro : scroll-driven CSS natif, une idée par
       section, le mouvement est le produit, jamais un décor.
     — Pharma GDD : bande de preuves sous le hero (conservée).
   Refusé : slider de bannières (5 paras sur 5), WebGL plein écran,
   particules abstraites, scroll détourné, assets > 1 Mo.

   Ici : le monogramme PR de l'enseigne, extrudé en or ALPHAM,
   dans un cadre vert profond posé sur la photo réelle. Entrées
   du hero une seule fois. Révélations au scroll en CSS natif,
   dégradation = état final.
   ============================================================ */

:root {
  --v6-ease-out: cubic-bezier(.2, .7, .2, 1);
  --v6-ease-pop: cubic-bezier(.2, .8, .2, 1);
  --v6-frame: #0C2B21;
  --v6-frame-hi: #17493A;
  --v6-gold: #E8C77E;
}

/* ── Emblème 3D : cadre posé sur la photo ───────────────── */
.v2-hero-media { position: relative; overflow: visible !important; }

.v6-emblem {
  position: absolute; left: -34px; top: -34px; z-index: 3;
  width: 224px; height: 224px;
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 28% 18%, var(--v6-frame-hi) 0%, var(--v6-frame) 58%, #08201A 100%);
  border: 1px solid rgba(232, 199, 126, .34);
  box-shadow:
    0 34px 60px -22px rgba(0, 0, 0, .6),
    0 2px 0 rgba(255, 255, 255, .04) inset;
}
/* Reflet doré fixe dans le coin : matière du cadre, pas une animation. */
.v6-emblem::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 78% 88%, rgba(232, 199, 126, .18), transparent 70%);
}
.v6-emblem canvas {
  position: absolute; inset: 0; display: block;
  width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity .6s ease;
}
.v6-emblem.is-ready canvas { opacity: 1; }
/* Repli sans WebGL, et état de chargement : le même monogramme en or plat. */
.v6-emblem-fallback {
  position: absolute; inset: 16% 16% 22%;
  transition: opacity .6s ease;
}
.v6-emblem.is-ready .v6-emblem-fallback { opacity: 0; }
.v6-emblem-label {
  position: absolute; left: 0; right: 0; bottom: 13px; z-index: 2;
  text-align: center;
  font-family: var(--v3-sans); font-weight: 600; font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(232, 199, 126, .82);
}

/* ── Entrées du hero : une fois, en cascade, 560 ms ─────── */
@keyframes v6-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v6-photo {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes v6-pop {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .v2-eyebrow,
  .v2-hero h1,
  .v2-lede,
  .v2-hero-actions,
  .v2-addr { animation: v6-rise .56s var(--v6-ease-out) both; }
  /* v2.css pose animation:none !important sur le statut (pulse v1). */
  .v2-status.pharma-status { animation: v6-rise .56s var(--v6-ease-out) .24s both !important; }
  .v2-hero h1        { animation-delay: .08s; }
  .v2-lede           { animation-delay: .16s; }
  .v2-hero-actions   { animation-delay: .30s; }
  .v2-addr           { animation-delay: .36s; }
  .v2-hero-media img { animation: v6-photo 1s var(--v6-ease-out) both; }
  .v2-hero-caption   { animation: v6-rise .56s var(--v6-ease-out) .5s both; }
  .v6-emblem         { animation: v6-pop .7s var(--v6-ease-pop) .55s both; }
}

/* ── Révélations au scroll : CSS natif, zéro JS ─────────── */
@keyframes v6-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes v6-rise-sm {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Le filet doré sous chaque titre se trace en entrant dans l'écran. */
    .section-title h2::after {
      transform-origin: left center;
      animation: v6-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 70%;
    }
    .v2-proof-item {
      animation: v6-rise-sm linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .v2-proof-item:nth-child(2) { animation-range: entry 5% entry 45%; }
    .v2-proof-item:nth-child(3) { animation-range: entry 10% entry 50%; }
    .v2-proof-item:nth-child(4) { animation-range: entry 15% entry 55%; }
    .v3-quote-photo {
      animation: v6-pop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }
    .v3-quote blockquote,
    .v3-sig {
      animation: v6-rise-sm linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 55%;
    }
  }
}

/* ── Cartes : inclinaison au survol (modern-3d.css gère le reflet) ── */
.catalogue-card, .marque-badge, .product-card {
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .3s ease;
  will-change: transform;
}
.marque-badge.tilting {
  box-shadow: 0 18px 36px -14px rgba(12, 43, 33, .35);
}

/* ── Boutons : retour tactile 120 ms ────────────────────── */
.v2-cta { transition: background .15s ease, transform .12s var(--v6-ease-out); }
.v2-cta:active { transform: scale(.98); }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  #hero.v2-hero { padding-top: 3.25rem !important; }
  .v6-emblem {
    left: auto; right: -10px; top: -22px;
    width: 138px; height: 138px; border-radius: 20px;
  }
  .v6-emblem-label { font-size: .5rem; bottom: 8px; letter-spacing: .18em; }
}
@media (max-width: 640px) {
  .v6-emblem { width: 120px; height: 120px; right: -6px; top: -18px; }
}

/* ── Mouvement réduit : tout reste lisible, rien ne bouge ── */
@media (prefers-reduced-motion: reduce) {
  .v6-emblem canvas { opacity: 1; }
  .catalogue-card, .marque-badge, .product-card { transition: none; }
}