/* ══════════ 1. HERO PREMIUM « LE RIDEAU » ══════════ */

.ml-hero-premium {
  position: relative;
  overflow: hidden;
  /* padding: 72px 0 64px; */
  isolation: isolate;
}
.ml-hero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ml-gold), transparent);
  opacity: .5;
  animation: mlLineIn 1s ease both;
}
@keyframes mlLineIn {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: .5; }
}
.ml-hero-arc {
  position: absolute;
  top: -30%;
  right: -18%;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  border: 1px solid rgba(124, 128, 252, 0.14);
  box-shadow: inset 0 0 120px rgba(124, 128, 252, 0.10);
  pointer-events: none;
  z-index: -1;
  animation: mlArcIn 1.4s ease both;
}
@keyframes mlArcIn {
  from { opacity: 0; transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}
.ml-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
}

/* Pastille éditoriale */
.ml-eyebrow--new {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ml-gold);
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;
  animation: mlFadeUp .6s ease both;
}
.ml-eyebrow-bar {
  width: 38px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ml-gold), transparent);
}

/* Titre éditorial Cormorant */
.ml-hero-title--new {
  /* font-family: var(--ml-font-display); */
  font-size: clamp(40px, 6.5vw, 72px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--ml-text);
  margin: 0 0 24px;
  animation: mlFadeUp .6s .08s ease both;
}
.ml-hero-title--new em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(100deg, var(--ml-gold), var(--ml-gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ml-hero-sub--new {
  color: var(--ml-text-dim);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 0 34px;
  animation: mlFadeUp .6s .16s ease both;
}

/* CTA deux lignes */
.ml-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: mlFadeUp .6s .24s ease both;
}
.ml-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  /* font-family: var(--ml-font-body); */
  font-weight: 600;
  font-size: 15px;
  border-radius: 100px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.ml-hero-cta--main {
  padding: 16px 30px;
  background: linear-gradient(120deg, var(--ml-gold), var(--ml-gold-dim));
  color: var(--ml-on-accent);
  /* box-shadow: 0 10px 32px rgba(124, 128, 252, 0.35); */
}
.ml-hero-cta--main:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 10px rgba(124, 128, 252, 0.5);
  color: var(--ml-on-accent);
}
.ml-hero-cta-kicker {
  display: block;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: .85;
  font-weight: 600;
  line-height: 1;
}
.ml-hero-cta--ghost {
  padding: 14px 24px;
  border: 1px solid var(--ml-border);
  color: var(--ml-text);
  background: var(--ml-surface-2);
}
.ml-hero-cta--ghost:hover {
  border-color: var(--ml-gold);
  color: var(--ml-gold);
  transform: translateY(-3px);
}

/* Réassurance fine */
.ml-hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: mlFadeUp .6s .32s ease both;
}
.ml-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ml-text-dim);
  font-size: 13px;
  font-weight: 500;
}
.ml-hero-meta-item i { color: var(--ml-gold); font-size: 15px; }

/* Cartes flottantes du parcours */
.ml-showcase {
  position: relative;
  height: 420px;
  animation: mlFadeUp .8s .2s ease both;
}
.ml-showcase-card {
  position: absolute;
  width: 210px;
  height: 236px;
  border-radius: 20px;
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 1px 10px rgba(13, 13, 18, 0.05);
  transition: transform .3s ease;
}
.ml-showcase-card i {
  font-size: 44px;
  color: var(--ml-gold);
  line-height: 1;
}
.ml-showcase-card small {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--ml-text);
}
.ml-showcase-card--1 {
  left: 0; top: 64px;
  transform: rotate(-6deg);
  animation: mlFloatCard1 6s ease-in-out infinite;
  border-color: var(--ml-card-guide);
}
.ml-showcase-card--2 {
  left: 50%; top: 0;
  transform: translateX(-50%);
  z-index: 2;
  border-color: rgba(124, 128, 252, 0.5);
  box-shadow: 0 1px 10px rgba(124, 128, 252, 0.05);
  animation: mlFloatCard2 6s ease-in-out infinite;
}
.ml-showcase-card--3 {
  right: 0; top: 64px;
  transform: rotate(6deg);
  animation: mlFloatCard3 6s ease-in-out infinite;
  border-color: var(--ml-card-guide);
}
@keyframes mlFloatCard1 {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(-6deg) translateY(-12px); }
}
@keyframes mlFloatCard2 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-14px); }
}
@keyframes mlFloatCard3 {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-12px); }
}
.ml-showcase-glow {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 300px;
  height: 300px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 128, 252, 0.28), rgba(124, 128, 252, 0) 65%);
  filter: blur(24px);
  z-index: 1;
  pointer-events: none;
  animation: mlGlowPulse 5s ease-in-out infinite;
}
@keyframes mlGlowPulse {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}
@keyframes mlFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════ 2. ZONE D'IMPORT « VITRINE » ══════════ */

.ml-search-section {
  position: relative;
  padding: 24px 0 110px;
}
.ml-search-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ml-search-label {
  text-align: center;
  margin-bottom: 36px;
}
.ml-search-label-bar {
  display: block;
  width: 62px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ml-gold), var(--ml-gold-soft));
  margin: 0 auto 18px;
}
.ml-search-title {
  /* font-family: var(--ml-font-display); */
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ml-text);
  margin: 0 0 14px;
}
.ml-search-sub {
  color: var(--ml-text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.ml-upload-wrap {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.ml-upload-card {
  background: var(--ml-surface);
  border: 1px solid var(--ml-border);
  border-radius: 20px;
  padding: 24px;
  animation: mlFadeIn .45s ease both;
  animation-delay: .12s;
  overflow: hidden;
}

/* ══════════ 3. DROPZONE « CADRE DE VISEUR » ══════════ */

.ml-dropzone {
  position: relative;
  border: 1.5px dashed var(--ml-border);
  border-radius: 20px;
  padding: 84px 48px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(560px circle at 50% 30%, rgba(124, 128, 252, 0.10), transparent 70%),
    var(--bg-overlay);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease, background-color .3s ease;
  animation: mlDropzoneBreathe 3.6s ease-in-out infinite;
}

/* Respiration douce en permanence : invite au clic même sans interaction */
@keyframes mlDropzoneBreathe {
  0%, 100% {
    border-color: var(--ml-border);
    box-shadow: 0 0 0 0 rgba(124, 128, 252, 0);
  }
  50% {
    border-color: rgba(124, 128, 252, 0.45);
    box-shadow: 0 0 0 8px rgba(124, 128, 252, 0.03);
  }
}

/* Balayage lumineux discret qui traverse le cadre pour attirer l'œil */
.ml-dropzone::before {
  content: '';
  position: absolute;
  top: 0;
  left: -22%;
  width: 22%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 128, 252, 0.02) 38%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(124, 128, 252, 0.02) 62%,
    transparent 100%
  );
  filter: blur(6px);
  pointer-events: none;
  animation: mlDropzoneSheen 5s ease-in-out infinite;
}
@keyframes mlDropzoneSheen {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  45%  { opacity: 1; }
  60%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

.ml-dropzone:hover {
  border-style: solid;
  border-color: var(--ml-gold);
  background:
    radial-gradient(560px circle at 50% 30%, rgba(124, 128, 252, 0.16), transparent 70%),
    var(--bg-overlay);
  box-shadow: 0 16px 40px rgba(124, 128, 252, 0.20), inset 0 0 0 1px rgba(124, 128, 252, 0.12);
  transform: translateY(-5px) scale(1.008);
  animation-play-state: paused;
}
.ml-dropzone:active {
  transform: translateY(-2px) scale(0.995);
}
.ml-dropzone:focus-visible {
  outline: none;
  border-style: solid;
  border-color: var(--ml-gold);
  box-shadow: 0 0 0 3px rgba(124, 128, 252, 0.25);
}
.ml-dropzone.dragover {
  border-style: solid;
  border-color: var(--ml-gold);
  background:
    linear-gradient(rgba(124, 128, 252, 0.08), rgba(124, 128, 252, 0.08)),
    linear-gradient(rgba(13, 13, 18, 0.6), rgba(13, 13, 18, 0.6)),
    repeating-linear-gradient(90deg, rgba(124, 128, 252, 0.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(124, 128, 252, 0.06) 0 1px, transparent 1px 40px);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 10px 36px rgba(124, 128, 252, 0.22);
  animation-play-state: paused;
}

/* Coins de viseur aux 4 angles de la dropzone */
.ml-dropzone-corners {
  position: absolute;
  inset: 10px;
  pointer-events: none;
}
.ml-dropzone-corners span {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgba(124, 128, 252, 0.55);
  border-style: solid;
  border-width: 0;
  transition: border-color .25s ease, width .25s ease, height .25s ease;
}
.ml-dropzone-corners span:nth-child(1) { top: 0; left: 0;    border-top-width: 2px;    border-left-width: 2px; }
.ml-dropzone-corners span:nth-child(2) { top: 0; right: 0;   border-top-width: 2px;    border-right-width: 2px; }
.ml-dropzone-corners span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.ml-dropzone-corners span:nth-child(4) { bottom: 0; right: 0;border-bottom-width: 2px; border-right-width: 2px; }
.ml-dropzone:hover .ml-dropzone-corners span,
.ml-dropzone.dragover .ml-dropzone-corners span {
  border-color: var(--ml-gold);
  width: 38px;
  height: 38px;
}

.ml-dropzone-frame {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border: 1px solid rgba(124, 128, 252, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 128, 252, 0.08);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  animation: mlFrameBob 3.2s ease-in-out infinite;
}

/* Anneaux concentriques qui pulsent comme un radar, pour signaler "cliquable" */
.ml-dropzone-frame::before,
.ml-dropzone-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(124, 128, 252, 0.5);
  animation: mlFramePulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.ml-dropzone-frame::after { animation-delay: 1.4s; }
@keyframes mlFramePulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes mlFrameBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.ml-dropzone:hover .ml-dropzone-frame {
  transform: scale(1.1);
  border-color: var(--ml-gold);
  background: rgba(124, 128, 252, 0.16);
  box-shadow: 0 0 28px rgba(124, 128, 252, 0.4);
  animation-play-state: paused;
}
.ml-dropzone.dragover .ml-dropzone-frame {
  transform: scale(1.14);
  border-color: var(--ml-gold);
  background: rgba(124, 128, 252, 0.2);
}
.ml-dropzone-icon {
  font-size: 36px;
  color: var(--ml-gold);
  transition: transform .25s ease;
}
.ml-dropzone:hover .ml-dropzone-icon {
  transform: scale(1.08) rotate(-4deg);
}
.ml-dropzone-text {
  color: var(--ml-text);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  transition: color .2s ease;
}
.ml-dropzone:hover .ml-dropzone-text {
  color: var(--ml-gold);
}
.ml-dropzone-sub {
  color: var(--ml-text-dim);
  font-size: 14px;
  margin: 0 0 18px;
}
/* .ml-dropzone-sub::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--ml-gold);
  vertical-align: middle;
  opacity: .8;
  animation: mlDotBlink 1.4s ease-in-out infinite;
} */
@keyframes mlDotBlink {
  0%, 100% { opacity: .25; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
.ml-dropzone-tag {
  display: inline-block;
  border: 1px solid var(--ml-border);
  color: var(--ml-text-dim);
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--ml-surface-2);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.ml-dropzone:hover .ml-dropzone-tag {
  border-color: var(--ml-gold-dim);
  color: var(--ml-gold);
  background: rgba(124, 128, 252, 0.08);
}
.ml-dropzone-error {
  color: var(--ml-danger) !important;
  margin-top: 12px;
  font-size: 13px;
}

/* ══════════ 4. APERÇU & SCANNER ══════════ */

.ml-preview-wrapper {
  position: relative;
  width: 100%;
  max-height: 400px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ml-border);
  background: #000;
  animation: mlFadeIn .35s ease both;
}

/* Encadrement accentué subtil pendant l'analyse */
.ml-preview-wrapper.is-loading {
  border-color: var(--ml-gold-dim);
  box-shadow: 0 0 0 1px rgba(124, 128, 252, 0.2), 0 8px 24px rgba(124, 128, 252, 0.14);
  transition: border-color .4s ease, box-shadow .4s ease;
}

.ml-preview {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
  transition: filter 0.5s ease;
}

/* Effet au chargement : flou sur l'image de fond */
.ml-preview-wrapper.is-loading .ml-preview {
  filter: blur(4px) brightness(0.5);
}

/* ── Ligne de scan accentuée ──
   Va-et-vient fluide avec accélération douce aux extrémités. */
.ml-scanner-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ml-gold);
  box-shadow: 0 0 10px var(--ml-gold);
  z-index: 1;
}

/* Le balayage ne tourne que pendant l'analyse (classe is-loading + ligne visible) */
.ml-preview-wrapper.is-loading .ml-scanner-line {
  animation: mlScan 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes mlScan {
  0%   { top: 2%; }
  50%  { top: 96%; }
  100% { top: 2%; }
}

/* ── Torche de scan : faisceau conique avec point chaud ──
   Comme une lampe qui balaye l'image : la ligne reste le point chaud
   intense, et le faisceau s'élargit en descendant pour éclairer la zone analysée. */
.ml-scanner-line::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 120px; height: 120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ml-gold);
  filter: blur(6px);
  pointer-events: none;
  animation: mlTorchPulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.ml-scanner-line::after {
  content: '';
  position: absolute;
  top: 0px; left: 0; right: 0;
  height: 120px;
  background:
    linear-gradient(180deg, rgba(161, 164, 250, 0.55), rgba(124, 128, 252, 0.18) 40%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, 74% 100%, 26% 100%);
  pointer-events: none;
  animation: mlTorchFade 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Le point chaud pulse en rythme avec le va-et-vient de la torche */
@keyframes mlTorchPulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(0.9); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}

/* Le faisceau s'intensifie au centre du balayage et s'atténue aux extrémités */
@keyframes mlTorchFade {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ── Grille de scan discrète ──
   Texture de balayage très subtile, uniquement visible pendant l'analyse. */
.ml-preview-wrapper.is-loading::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(124, 128, 252, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 128, 252, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 1;
  opacity: 0;
  animation: mlGridIn .8s ease forwards;
  animation-delay: .3s;
  pointer-events: none;
}

@keyframes mlGridIn {
  to { opacity: 1; }
}

/* ── Cadre décoratif interne ──
   Un fin liseré coloré encadre l'image pendant le scan. */
.ml-preview-wrapper.is-loading::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(124, 128, 252, 0.4);
  border-radius: 10px;
  z-index: 1;
  pointer-events: none;
  animation: mlCornerIn .4s ease both;
  animation-delay: .2s;
}

@keyframes mlCornerIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ══════════ 5. OVERLAY DE CHARGEMENT ══════════ */

.ml-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 3;
  animation: mlOverlayIn .35s ease both;
  background: var(--bg-overlay);
  /* backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); */
  color: #fff;
}
@keyframes mlOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ml-loading-overlay.bg-danger {
  background: var(--bg-overlay);
}
.ml-spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--ml-gold);
  border-radius: 50%;
  animation: mlSpin .9s linear infinite;
}
@keyframes mlSpin { to { transform: rotate(360deg); } }
@keyframes mlPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ml-loading-title {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  margin: 16px 0 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  text-align: center;
  transition: opacity .25s ease;
}
.ml-loading-title.is-analyzing::after {
  content: '';
  display: inline-block;
  width: 36px;
  text-align: left;
  vertical-align: bottom;
  overflow: hidden;
  animation: mlDots 1.4s steps(4, end) infinite;
}
@keyframes mlDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}
.ml-success-icon {
  width: 52px;
  height: 52px;
  font-size: 56px;
  color: #7C80FC;
  line-height: 1;
  margin-bottom: 16px;
  animation: mlPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.ml-success-icon::before { display: block; animation: mlRing 1s ease-out both; }
@keyframes mlRing {
  0%   { transform: scale(0.8); text-shadow: 0 0 0 rgba(124, 128, 252, 0.9); }
  60%  { transform: scale(1); text-shadow: 0 0 24px rgba(124, 128, 252, 1); }
  100% { transform: scale(1); text-shadow: 0 0 8px rgba(124, 128, 252, 0.6); }
}

/* Barre de progression */
.ml-progress-wrap { width: 100%; max-width: 320px; }
.ml-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.ml-progress-bar {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--ml-gold-dim), var(--ml-gold), var(--ml-gold-soft));
  transition: width .3s ease;
  box-shadow: 0 0 8px rgba(124, 128, 252, 0.6);
}
.ml-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: mlShimmer 1.6s ease-in-out infinite;
  z-index: 1;
}
@keyframes mlShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}
.ml-progress.is-done .ml-progress-bar::after { animation: none; }
.ml-progress.is-done .ml-progress-bar {
  background: var(--ml-gold);
  box-shadow: 0 0 12px rgba(124, 128, 252, 0.8);
  transition: width .3s ease, box-shadow .5s ease, background .5s ease;
}
.ml-progress-bar.bg-danger,
.ml-progress .ml-progress-bar.bg-danger {
  background: linear-gradient(90deg, var(--ml-danger, #e74c3c), #e74c3c);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}
.ml-progress-bar.ml-success {
  background: var(--ml-success);
  box-shadow: 0 0 8px rgba(74, 222, 148, 0.45);
}
.ml-progress-bar.bg-danger::after { animation: none; }

.ml-loading-status {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ml-loading-percent {
  color: var(--ml-gold);
  font-weight: 600;
}
.ml-loading-percent.is-analyzing { animation: mlPulseText 1.8s ease-in-out infinite; }
@keyframes mlPulseText {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Bouton « Nouvelle recherche » */
.ml-btn-gold-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--ml-gold);
  background: var(--ml-gold);
  color: var(--ml-on-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-shadow: 0 2px 8px rgba(124, 128, 252, 0.3);
  animation: mlFadeIn .35s ease both;
}
.ml-btn-gold-sm:hover {
  background: var(--ml-gold-dim);
  border-color: var(--ml-gold-dim);
  box-shadow: 0 4px 14px rgba(124, 128, 252, 0.45);
  transform: translateY(-1px);
}
.ml-btn-gold-sm:active { transform: translateY(1px); }
@keyframes mlFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* ══════════ 6. UTILITAIRES ══════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.d-none { display: none !important; }

/* ══════════ 8. MOBILE ══════════ */
@media (max-width: 992px) {
  .ml-hero-line { display: none; }
  .ml-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    text-align: center;
  }
  .ml-eyebrow--new { justify-content: center; }
  .ml-hero-sub--new { margin-left: auto; margin-right: auto; }
  .ml-hero-actions { justify-content: center; }
  .ml-hero-meta { justify-content: center; }
  .ml-showcase { height: 380px; max-width: 520px; margin: 0 auto; }
  .ml-search-grid {
    align-items: center;
  }
}
@media (max-width: 576px) {
  .ml-hero-premium { padding: 48px 0 44px; }
  .ml-showcase-card { width: 150px; height: 176px; }
  .ml-showcase-card i { font-size: 34px; }
  .ml-showcase-card--1 { top: 80px; }
  .ml-showcase-card--3 { top: 80px; }
  .ml-showcase { height: 320px; }
  .ml-hero-cta--main { padding: 14px 24px; }
  .ml-upload-card { padding: 16px; }
  .ml-dropzone { padding: 56px 24px; }
  .ml-preview { height: 340px; }
}

/* ══════════ 9. ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS ══════════ */
@media (prefers-reduced-motion: reduce) {
  .ml-upload-card, .ml-preview-wrapper, .ml-loading-overlay,
  .ml-dropzone, .ml-dropzone-frame, .ml-eyebrow--new,
  .ml-hero-title--new, .ml-hero-sub--new, .ml-hero-cta,
  .ml-hero-meta, .ml-btn-gold-sm, .ml-preview,
  .ml-loading-title, .ml-search-title, .ml-search-label-bar,
  .ml-showcase, .ml-showcase-card, .ml-dropzone-corners span {
    animation: none !important;
    transition: none !important;
  }
  .ml-dropzone,
  .ml-dropzone::before,
  .ml-dropzone-frame,
  .ml-dropzone-frame::before,
  .ml-dropzone-frame::after,
  .ml-dropzone-sub::after {
    animation: none !important;
  }
  .ml-scanner-line { animation: none !important; }
  .ml-spinner { animation-duration: 3s; }
  .ml-progress-bar::after { animation: none !important; }
  .ml-loading-percent.is-analyzing { animation: none !important; }
  .ml-loading-title.is-analyzing::after { animation: none !important; }
  .ml-success-icon::before { animation: none !important; }
}