/* ============================================================
   UbDesigner — Marketing v3 (FIX-MK photoreal + émotion)
   Couche additive chargée APRÈS marketing-v2.css.
   Injecte : médias photoréalistes, hero cinématique,
   micro-animations émotionnelles, hover cinématiques.
   Réutilise les tokens de tokens.css / design-tokens.css.
   ============================================================ */

/* ============================================================
   0 · Primitives de mouvement (émotion)
   ============================================================ */
@keyframes ubv-kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-1.5%, -2%); }
}
@keyframes ubv-float {
  0%, 100% { transform: translateY(0) rotate(-.15deg); }
  50%      { transform: translateY(-14px) rotate(.15deg); }
}
@keyframes ubv-glow-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.06); }
}
@keyframes ubv-shimmer {
  0%   { background-position: -140% 0; }
  100% { background-position: 240% 0; }
}
@keyframes ubv-scan {
  0%   { transform: translateY(-110%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}
@keyframes ubv-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ubv-particle {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-120px) scale(.3); opacity: 0; }
}

/* Reveal enrichi + stagger (le .reveal/.is-in existe déjà via _chrome.js) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(1){ transition-delay:.04s } .stagger.is-in > *:nth-child(2){ transition-delay:.12s }
.stagger.is-in > *:nth-child(3){ transition-delay:.20s } .stagger.is-in > *:nth-child(4){ transition-delay:.28s }
.stagger.is-in > *:nth-child(5){ transition-delay:.36s } .stagger.is-in > *:nth-child(6){ transition-delay:.44s }
.stagger.is-in > *:nth-child(7){ transition-delay:.52s } .stagger.is-in > *:nth-child(8){ transition-delay:.60s }
.stagger.is-in > *:nth-child(9){ transition-delay:.68s } .stagger.is-in > *:nth-child(10){ transition-delay:.76s }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .ubv-media img, .ken-burns { animation: none !important; }
}

/* ============================================================
   1 · HERO cinématique (dark, photoréaliste)
   ============================================================ */
.hero.hero-cine {
  background: #05070E;
  color: #fff;
  padding: 148px 0 96px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hero.hero-cine .bg-axo-large,
.hero.hero-cine .parallax-grid { opacity: .35; }

/* média plein cadre en fond du hero (vidéo ou image) */
.hero-cine .hero-bg-media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.hero-cine .hero-bg-media img,
.hero-cine .hero-bg-media video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 45%;
  opacity: .28;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.08);
  animation: ubv-kenburns 26s ease-in-out infinite alternate;
}
.hero-cine .hero-bg-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(255,107,44,.18), transparent 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(123,91,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(5,7,14,.72) 0%, rgba(5,7,14,.62) 45%, #05070E 100%);
}

.hero-cine h1 { color: #fff; letter-spacing: -.03em; }
.hero-cine h1 em { color: var(--accent); font-style: normal; position: relative; }
.hero-cine h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
  background: var(--accent); opacity: .18; border-radius: 3px; transform: skewX(-12deg);
}
.hero-cine .lede { color: rgba(255,255,255,.72); }
.hero-cine .eyebrow { color: #fff; }
.hero-cine .eyebrow .eb-bar { background: var(--accent); }
.hero-cine .hero-meta-item .num { color: #fff; }
.hero-cine .hero-meta-item .lbl { color: rgba(255,255,255,.55); }
.hero-cine .hero-meta { border-top-color: rgba(255,255,255,.12); }

/* trust row sous les CTA */
.hero-trust {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; color: rgba(255,255,255,.6);
  font-family: var(--font-mono); font-size: 12px;
}
.hero-trust .stars { color: var(--accent); letter-spacing: 2px; }
.hero-trust .sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }
.hero-avatars { display: flex; }
.hero-avatars img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 2px solid #05070E; margin-left: -9px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hero-avatars img:first-child { margin-left: 0; }

/* cadre média principal du hero (l'image glow) */
.hero-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,107,44,.08);
  animation: ubv-float 7s ease-in-out infinite;
  will-change: transform;
}
.hero-visual::before { /* halo orange derrière le cadre */
  content: ''; position: absolute; inset: -30% -20% auto auto; width: 60%; height: 70%;
  background: radial-gradient(circle, rgba(255,107,44,.5), transparent 70%);
  filter: blur(40px); z-index: 0; animation: ubv-glow-pulse 5s ease-in-out infinite;
}
.hero-visual img {
  display: block; width: 100%; height: auto; position: relative; z-index: 1;
  transform: scale(1.02); transition: transform 1.2s var(--ease);
}
.hero-visual:hover img { transform: scale(1.05); }
.hero-visual .hv-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,107,44,.14), transparent);
  animation: ubv-scan 6s ease-in-out infinite;
}
.hero-visual .hv-badge {
  position: absolute; z-index: 3; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(5,7,14,.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 7px 13px; font-family: var(--font-mono); font-size: 11px; color: #fff;
}
.hero-visual .hv-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 8px #16A34A; animation: pulse 2.4s ease-in-out infinite; }
.hero-visual .hv-chip {
  position: absolute; z-index: 3; right: 16px; top: 16px;
  background: rgba(255,107,44,.16); border: 1px solid rgba(255,107,44,.4);
  color: #FFCBB0; border-radius: 999px; padding: 6px 12px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
}

/* ============================================================
   2 · Bandeau média-preuve (photos réelles en marquee)
   ============================================================ */
.proof-strip { background: #070912; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.proof-track { display: flex; gap: 16px; width: max-content; animation: ubmarquee 42s linear infinite; }
.proof-track:hover { animation-play-state: paused; }
@keyframes ubmarquee { to { transform: translateX(-50%); } }
.proof-shot {
  width: 190px; height: 120px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.08); position: relative;
}
.proof-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proof-shot:hover img { transform: scale(1.08); }
.proof-shot .tag {
  position: absolute; left: 8px; bottom: 8px; font-family: var(--font-mono); font-size: 10px;
  color: #fff; background: rgba(0,0,0,.5); border-radius: 6px; padding: 3px 7px; backdrop-filter: blur(4px);
}

/* ============================================================
   3 · WORKFLOW — carte avec média réel
   ============================================================ */
.step-card { overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.step-card .step-media {
  margin: -24px -24px 18px; height: 176px; overflow: hidden; position: relative;
  border-bottom: 1px solid var(--border-subtle);
}
.step-card .step-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.step-card:hover .step-media img { transform: scale(1.08); }
.step-card .step-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11,21,48,.5));
}
.step-card .step-media .sm-n {
  position: absolute; z-index: 2; left: 12px; top: 12px;
  font-family: var(--font-mono); font-size: 11px; color: #fff;
  background: rgba(5,7,14,.6); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(6px);
}
.step-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--accent); }

/* ============================================================
   4 · AI VISION — image feature émotionnelle
   ============================================================ */
.ai-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  margin-bottom: 48px;
}
.ai-hero-media {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.ai-hero-media img { display: block; width: 100%; height: auto; transform: scale(1.03); transition: transform 1.4s var(--ease); }
.ai-hero-media:hover img { transform: scale(1.09); }
.ai-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 30% 40%, transparent, rgba(123,91,255,.14));
  mix-blend-mode: screen; pointer-events: none;
}
.ai-hero-media .hv-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(123,91,255,.16), transparent);
  animation: ubv-scan 5.5s ease-in-out infinite; pointer-events: none;
}
.ai-hero-copy h3 { font-size: clamp(24px, 3vw, 34px); color: var(--fg-1); margin-bottom: 14px; line-height: 1.1; }
.ai-hero-copy p { color: var(--fg-2); font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.ai-hero-copy strong { color: var(--color-violet); font-weight: 600; }
.ai-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ai-hero-tags span {
  font-family: var(--font-mono); font-size: 11px; color: var(--color-violet-hover);
  background: rgba(123,91,255,.10); border: 1px solid rgba(123,91,255,.30);
  border-radius: 999px; padding: 5px 11px;
}

/* ============================================================
   5 · GALERIE — vraies photos produit
   ============================================================ */
.gal-card { overflow: hidden; }
/* garde position:absolute;inset:0 hérité de v2 — remplit la carte (grid-row) */
.gal-card .gal-img.gal-photo {
  background: #0b0b10 !important; overflow: hidden;
}
.gal-card .gal-img.gal-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .6s var(--ease);
  filter: saturate(1.02);
}
.gal-card:hover .gal-img.gal-photo img { transform: scale(1.1); filter: saturate(1.12) brightness(1.05); }
.gal-card .gal-img.gal-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35));
}

/* ============================================================
   6 · TÉMOIGNAGES — portraits réels
   ============================================================ */
.testimonial { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.testimonial:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.testimonial .avatar.avatar-photo {
  padding: 0; overflow: hidden; background: none;
}
.testimonial .avatar.avatar-photo img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}

/* ============================================================
   7 · Divers polish
   ============================================================ */
.pilier { transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pilier:hover { transform: translateY(-6px); }
.ai-module { transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.ai-module:hover { transform: translateY(-5px); }

/* petites particules décoratives (hero) */
.hero-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-particles i {
  position: absolute; bottom: 10%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0; box-shadow: 0 0 8px var(--accent);
  animation: ubv-particle 7s linear infinite;
}
.hero-particles i:nth-child(1){ left: 14%; animation-delay: 0s }
.hero-particles i:nth-child(2){ left: 32%; animation-delay: 1.4s; background: var(--color-violet); box-shadow:0 0 8px var(--color-violet) }
.hero-particles i:nth-child(3){ left: 54%; animation-delay: 2.7s }
.hero-particles i:nth-child(4){ left: 71%; animation-delay: 1s; background:#7B9CFF; box-shadow:0 0 8px #7B9CFF }
.hero-particles i:nth-child(5){ left: 86%; animation-delay: 3.6s }
.hero-particles i:nth-child(6){ left: 44%; animation-delay: 4.8s; background: var(--color-violet); box-shadow:0 0 8px var(--color-violet) }

/* ============================================================
   8 · Responsive
   ============================================================ */
@media (max-width: 900px) {
  .ai-hero { grid-template-columns: 1fr; gap: 24px; }
  .ai-hero-copy { order: 2; }
  .hero.hero-cine { padding: 120px 0 72px; }
  .hero-visual { margin-top: 32px; }
  .step-card .step-media { height: 150px; }
}