/* ============================================================
   WEBMOTION.CSS — Système d'animations Saphir Développement
   Toutes les animations CSS de la plateforme
   ============================================================ */

/* ── SCROLL REVEAL ────────────────────────────────────────── */
[data-motion] {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
}
[data-motion="fade-up"]    { transform: translateY(40px); }
[data-motion="fade-down"]  { transform: translateY(-40px); }
[data-motion="fade-in"]    { transform: none; }
[data-motion="slide-left"] { transform: translateX(-60px); }
[data-motion="slide-right"]{ transform: translateX(60px); }
[data-motion="zoom-in"]    { transform: scale(0.8); }
[data-motion="zoom-out"]   { transform: scale(1.1); }
[data-motion="flip-x"]     { transform: rotateX(90deg); transform-origin: top; }

[data-motion].wm-visible {
  opacity: 1;
  transform: none !important;
}

/* Délais stagger */
[data-delay="0"]   { transition-delay: 0s; }
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ── PAGE TRANSITION ──────────────────────────────────────── */
.wm-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--gradient-saphir);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.wm-page-overlay.entering {
  clip-path: circle(150% at 50% 50%);
}
.wm-page-overlay.leaving {
  clip-path: circle(0% at 50% 50%);
}

/* ── CARD HOVER 3D ────────────────────────────────────────── */
.wm-card-3d {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.wm-card-3d:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10,33,89,0.14);
}

/* ── SHIMMER SKELETON ─────────────────────────────────────── */
@keyframes wm-shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}
.wm-skeleton {
  background: linear-gradient(90deg,
    #e8edf4 25%,
    #d0d8e8 50%,
    #e8edf4 75%
  );
  background-size: 1000px 100%;
  animation: wm-shimmer 1.8s infinite linear;
  border-radius: var(--radius-sm);
}
.wm-skeleton-line  { height: 14px; margin-bottom: 10px; }
.wm-skeleton-title { height: 22px; margin-bottom: 16px; width: 60%; }
.wm-skeleton-btn   { height: 42px; width: 140px; border-radius: 999px; }

/* ── SPINNER SAPHIR ───────────────────────────────────────── */
@keyframes wm-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.wm-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--saphir-glace);
  border-top-color: var(--saphir-royal);
  border-radius: 50%;
  animation: wm-spin 0.9s linear infinite;
  margin: 0 auto;
}
.wm-spinner-sm { width: 22px; height: 22px; border-width: 3px; }
.wm-spinner-lg { width: 64px; height: 64px; border-width: 5px; }

/* Overlay chargement */
.wm-loading-overlay {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(10,33,89,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.wm-loading-overlay.active { opacity: 1; pointer-events: all; }
.wm-loading-overlay p { color: var(--blanc-pur); font-weight: 500; }

/* ── PULSE BADGE ──────────────────────────────────────────── */
@keyframes wm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,59,142,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(13,59,142,0); }
}
.wm-badge-actif { animation: wm-pulse 2s infinite; }

@keyframes wm-pulse-or {
  0%, 100% { box-shadow: 0 0 0 0 rgba(166,58,44,0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(166,58,44,0); }
}
.wm-badge-or-pulse { animation: wm-pulse-or 2s infinite; }

/* ── PARTICULES CANVAS ────────────────────────────────────── */
#wm-particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── BARRE DE PROGRESSION WIZARD ─────────────────────────── */
.wm-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.wm-progress-fill {
  height: 100%;
  background: var(--gradient-saphir);
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.wm-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 12px;
  height: 12px;
  background: var(--saphir-royal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(37,83,138,0.3);
}

/* ── WIZARD ÉTAPES ────────────────────────────────────────── */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  position: relative;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.wizard-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gris-leger);
  border: 3px solid var(--gris-moyen);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gris-fonce);
  transition: var(--transition-ressort);
  position: relative;
  z-index: 2;
}
.wizard-step.active .wizard-step-num {
  background: var(--gradient-saphir);
  border-color: var(--saphir-royal);
  color: var(--blanc-pur);
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(13,59,142,0.35);
}
.wizard-step.done .wizard-step-num {
  background: var(--succes);
  border-color: var(--succes);
  color: var(--blanc-pur);
}
.wizard-step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gris-moyen);
  margin-top: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.wizard-step.active .wizard-step-label { color: var(--saphir-royal); }
.wizard-step.done  .wizard-step-label  { color: var(--succes); }

.wizard-line {
  flex: 1;
  height: 3px;
  background: var(--gris-leger);
  position: relative;
  top: -11px;
  transition: background 0.5s;
  min-width: 40px;
}
.wizard-line.done { background: var(--succes); }

/* ── UPLOAD ZONE ──────────────────────────────────────────── */
.upload-zone {
  border: 2.5px dashed var(--saphir-clair);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  background: var(--saphir-glace);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--saphir-royal);
  background: rgba(37,83,138,0.06);
  transform: scale(1.005);
}
.upload-zone.uploaded {
  border-color: var(--succes);
  background: #E8F5E9;
}
.upload-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.upload-zone p { color: var(--texte-secondaire); font-size: 0.85rem; margin: 0; }

/* Barre de progression upload */
.upload-progress-wrap {
  margin-top: 0.75rem;
  background: var(--gris-leger);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
  display: none;
}
.upload-progress-fill {
  height: 100%;
  background: var(--gradient-saphir);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 0.3s ease;
}
.upload-percent {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--saphir-royal);
  text-align: right;
  margin-top: 0.2rem;
}

/* ── PDF PREVIEW ──────────────────────────────────────────── */
.pdf-preview {
  display: none;
  margin-top: 0.75rem;
  border: 2px solid var(--gris-leger);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}
.pdf-preview canvas { width: 100% !important; height: auto !important; display: block; }
.pdf-preview-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(10,33,89,0.7));
  color: var(--blanc-pur);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ── TYPEWRITER ───────────────────────────────────────────── */
.wm-typewriter::after {
  content: '|';
  animation: wm-blink 0.8s infinite;
}
@keyframes wm-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── COUNTER ANIMÉ ────────────────────────────────────────── */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ── ONDULATION BOUTON ────────────────────────────────────── */
.wm-ripple {
  position: relative;
  overflow: hidden;
}
.wm-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: wm-ripple-anim 0.6s linear;
  pointer-events: none;
}
@keyframes wm-ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── CONFETTI (page confirmation) ────────────────────────── */
#wm-confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* ── TOOLTIP ──────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--saphir-nuit);
  color: var(--blanc-pur);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── ACCORDION ────────────────────────────────────────────── */
.wm-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.wm-accordion-content.open { max-height: 2000px; }

/* ── TAB TRANSITIONS ──────────────────────────────────────── */
.wm-tab-content {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s, transform 0.3s;
  display: none;
}
.wm-tab-content.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* ── STATUT TIMELINE ──────────────────────────────────────── */
/* La timeline de suivi de candidature (.timeline-item, .timeline-point,
   .timeline-body...) est définie dans saphir-theme.css pour correspondre
   au balisage réel utilisé par confirmation.php et mon-dossier.php ;
   l'animation d'apparition en cascade est appliquée ici. */
.timeline-item {
  animation: wm-timeline-in 0.35s ease forwards;
  opacity: 0;
}
.timeline-item:nth-child(1) { animation-delay: 0.05s; }
.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.15s; }
.timeline-item:nth-child(4) { animation-delay: 0.2s; }
.timeline-item:nth-child(5) { animation-delay: 0.25s; }
.timeline-item:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes wm-timeline-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}