/**
 * Performance Afrique — pa-animations.css
 * UX/UI Moderne · Animations · Responsive · Interactions
 */

/* ================================================================
   1. VARIABLES ANIMATIONS
   ================================================================ */
:root {
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-in:    cubic-bezier(.4,0,1,1);
  --ease-back:  cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   .18s;
  --dur-mid:    .32s;
  --dur-slow:   .55s;
  --dur-xslow:  .85s;
}

/* ================================================================
   2. PAGE TRANSITIONS — Fade-in au chargement
   ================================================================ */
@keyframes pa-page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: pa-page-in var(--dur-slow) var(--ease-out) both;
}

/* ================================================================
   3. SCROLL REVEAL — Apparition au défilement
   ================================================================ */
.pa-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.pa-reveal.pa-revealed {
  opacity: 1;
  transform: translateY(0);
}
.pa-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.pa-reveal-left.pa-revealed { opacity: 1; transform: translateX(0); }

.pa-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.pa-reveal-right.pa-revealed { opacity: 1; transform: translateX(0); }

.pa-reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-back);
}
.pa-reveal-scale.pa-revealed { opacity: 1; transform: scale(1); }

/* Délais en cascade pour grilles */
.pa-reveal:nth-child(1)  { transition-delay: .05s; }
.pa-reveal:nth-child(2)  { transition-delay: .10s; }
.pa-reveal:nth-child(3)  { transition-delay: .15s; }
.pa-reveal:nth-child(4)  { transition-delay: .20s; }
.pa-reveal:nth-child(5)  { transition-delay: .25s; }
.pa-reveal:nth-child(6)  { transition-delay: .30s; }

/* ================================================================
   4. CARTES — Hover effects enrichis
   ================================================================ */
.pa-fcard, .pa-cert-card, .pa-cab-card, .pa-actu-card, .pa-cv-card, .pa-plan-card,
.pa-step-card, .pa-contact-card, .pa-company-card {
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) ease !important;
}
.pa-fcard:hover, .pa-cert-card:hover, .pa-actu-card:hover,
.pa-cv-card:hover, .pa-step-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(28,35,64,.13) !important;
}
.pa-emp-card {
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) ease !important;
}
.pa-emp-card:hover {
  transform: translateX(6px) !important;
  box-shadow: -4px 8px 32px rgba(184,149,42,.15) !important;
}
.pa-cab-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 56px rgba(28,35,64,.16) !important;
}

/* Image zoom sur hover */
.pa-fcard-thumb img,
.pa-cab-head img,
.pa-actu-thumb img {
  transition: transform .6s var(--ease-out);
  overflow: hidden;
}
.pa-fcard:hover .pa-fcard-thumb img,
.pa-cab-card:hover .pa-cab-head img,
.pa-actu-card:hover .pa-actu-thumb img {
  transform: scale(1.06);
}

/* ================================================================
   5. BOUTONS — Micro-interactions
   ================================================================ */
.pa-btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-mid) ease,
              filter var(--dur-fast) ease !important;
}
.pa-btn:active { transform: scale(.97) !important; }
.pa-btn-gold:hover { filter: brightness(1.08); }

/* Ripple effect */
.pa-btn .pa-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: pa-ripple .55s linear;
  pointer-events: none;
}
@keyframes pa-ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ================================================================
   6. NAVIGATION — Effets hover menu
   ================================================================ */
.pa-nav-link {
  position: relative;
  transition: color var(--dur-mid) ease,
              background var(--dur-mid) ease !important;
}
.pa-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--dur-mid) var(--ease-out);
  transform-origin: left;
}
.pa-nav-link:hover::after,
.pa-nav-link.pa-active::after { transform: scaleX(1); }

/* Dropdown avec animation */
.pa-dropdown {
  transition: opacity var(--dur-mid) ease,
              transform var(--dur-mid) var(--ease-out) !important;
}

/* ================================================================
   7. HERO SLIDER — Transitions et éléments animés
   ================================================================ */
.pa-hero-slide {
  transition: opacity var(--dur-xslow) ease !important;
}
.pa-hero-overlay > * {
  animation: pa-hero-content-in var(--dur-slow) var(--ease-out) both;
}
.pa-hero-title    { animation-delay: .1s; }
.pa-hero-desc     { animation-delay: .2s; }
.pa-hero-ctas     { animation-delay: .3s; }
.pa-hero-stats    { animation-delay: .4s; }
.pa-hero-eyebrow  { animation-delay: .05s; }

@keyframes pa-hero-content-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Points slider animés */
.pa-s-dot {
  transition: all var(--dur-mid) var(--ease-out) !important;
}

/* ================================================================
   8. TICKER — Animation améliorée
   ================================================================ */
.pa-ticker-inner {
  animation: pa-ticker-run 55s linear infinite;
}
.pa-ticker-inner:hover { animation-play-state: paused; }

.pa-ticker-item {
  transition: color var(--dur-mid) ease;
}
.pa-ticker-item:hover {
  color: var(--gold-light) !important;
  cursor: pointer;
}

/* ================================================================
   9. FORMULAIRES — Focus animations
   ================================================================ */
.pa-fi {
  transition: border-color var(--dur-mid) ease,
              box-shadow var(--dur-mid) ease,
              background var(--dur-mid) ease !important;
}
.pa-fi:focus {
  animation: pa-field-pop var(--dur-mid) var(--ease-back) both;
}
@keyframes pa-field-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.008); }
  100% { transform: scale(1); }
}

/* Label flottant effect */
.pa-fg {
  position: relative;
}
.pa-fl {
  transition: color var(--dur-mid) ease;
}
.pa-fg:focus-within .pa-fl {
  color: var(--gold) !important;
}
.pa-fg:focus-within .pa-fi {
  border-color: var(--gold) !important;
}

/* ================================================================
   10. COMPTEURS — Animation chiffres
   ================================================================ */
.pa-counter {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-back);
}
.pa-counter.counting {
  animation: pa-count-bounce .25s var(--ease-back) infinite alternate;
}
@keyframes pa-count-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

/* ================================================================
   11. CARROUSEL — Container et contrôles
   ================================================================ */
.pa-carousel {
  position: relative;
  overflow: hidden;
}
.pa-carousel-track {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.pa-carousel-slide {
  flex: 0 0 auto;
}
.pa-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-soft);
  box-shadow: 0 4px 16px rgba(28,35,64,.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--navy);
  transition: all var(--dur-mid) var(--ease-out);
  z-index: 10;
}
.pa-carousel-btn:hover {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(184,149,42,.25);
}
.pa-carousel-prev { left: -22px; }
.pa-carousel-next { right: -22px; }
.pa-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.pa-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  cursor: pointer;
  transition: all var(--dur-mid) var(--ease-out);
  border: none;
}
.pa-carousel-dot.on {
  background: var(--gold);
  width: 24px;
}

/* ================================================================
   12. NOTIFICATIONS / TOASTS — Animations enrichies
   ================================================================ */
#pa-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.pa-toast {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .875rem;
  box-shadow: 0 8px 32px rgba(28,35,64,.14);
  animation: pa-toast-in .35s var(--ease-back) both;
  position: relative;
  overflow: hidden;
}
.pa-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
}
.pa-toast.ok::before    { background: #16a34a; }
.pa-toast.info::before  { background: #2563eb; }
.pa-toast.warn::before  { background: #d97706; }
.pa-toast.error::before { background: #dc2626; }

.pa-toast-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  animation: pa-toast-icon-pop .4s var(--ease-back) .1s both;
}
@keyframes pa-toast-icon-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.pa-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 12px 12px;
  animation: pa-toast-progress 4.2s linear forwards;
}
.pa-toast.ok    .pa-toast-progress { background: #16a34a; }
.pa-toast.info  .pa-toast-progress { background: #2563eb; }
.pa-toast.warn  .pa-toast-progress { background: #d97706; }
.pa-toast.error .pa-toast-progress { background: #dc2626; }

@keyframes pa-toast-in {
  from { opacity: 0; transform: translateX(60px) scale(.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pa-toast-out {
  to { opacity: 0; transform: translateX(60px) scale(.9); max-height: 0; padding: 0; margin: 0; }
}
@keyframes pa-toast-progress {
  from { width: 100%; }
  to   { width: 0%; }
}
.pa-toast.removing {
  animation: pa-toast-out .3s ease forwards;
}

/* ================================================================
   13. MODAL — Animation améliorée
   ================================================================ */
.pa-overlay {
  transition: opacity var(--dur-mid) ease !important;
  backdrop-filter: blur(8px) !important;
}
.pa-modal {
  animation: pa-modal-in var(--dur-mid) var(--ease-back) both;
}
.pa-overlay:not(.open) .pa-modal {
  animation: pa-modal-out var(--dur-mid) ease both;
}
@keyframes pa-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pa-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(16px) scale(.96); }
}

/* ================================================================
   14. LOADING — Skeleton screens
   ================================================================ */
.pa-skeleton {
  background: linear-gradient(90deg, var(--cream) 25%, var(--warm-gray) 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: pa-skeleton-wave 1.5s infinite;
  border-radius: var(--r);
}
@keyframes pa-skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.pa-skeleton-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r2);
  padding: 20px;
  overflow: hidden;
}
.pa-skeleton-line {
  height: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.pa-skeleton-line.w-full  { width: 100%; }
.pa-skeleton-line.w-3-4   { width: 75%; }
.pa-skeleton-line.w-1-2   { width: 50%; }
.pa-skeleton-line.w-1-4   { width: 25%; }
.pa-skeleton-thumb {
  height: 160px;
  border-radius: var(--r);
  margin-bottom: 16px;
}

/* ================================================================
   15. FILTRE TABS — Animation indicator
   ================================================================ */
.pa-tab-bar {
  position: relative;
}
.pa-tab-indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: left var(--dur-mid) var(--ease-out),
              width var(--dur-mid) var(--ease-out);
}
.pa-tab-btn {
  transition: color var(--dur-mid) ease !important;
}
.pa-filter-btn {
  transition: all var(--dur-mid) var(--ease-out) !important;
}
.pa-filter-btn:hover:not(.on) {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ================================================================
   16. PROGRESS BAR — Multi-step forms
   ================================================================ */
.pa-progress-bar {
  height: 6px;
  background: var(--cream);
  border-radius: 3px;
  overflow: visible !important;
  position: relative;
}
.pa-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .55s var(--ease-out);
  position: relative;
}
.pa-progress-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px var(--gold-glow);
  transition: all .55s var(--ease-out);
}

/* ================================================================
   17. STAT CARDS — Hover glow
   ================================================================ */
.pa-dash-stat {
  transition: all var(--dur-mid) var(--ease-out) !important;
}
.pa-dash-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(184,149,42,.14) !important;
  border-color: var(--gold) !important;
}

/* ================================================================
   18. DRAG & DROP — Zone dépôt
   ================================================================ */
.pa-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--r2);
  padding: 32px;
  text-align: center;
  transition: all var(--dur-mid) var(--ease-out);
  cursor: pointer;
  background: var(--off-white);
}
.pa-dropzone:hover,
.pa-dropzone.dragover {
  border-color: var(--gold);
  background: var(--gold-glow);
}
.pa-dropzone.dragover {
  transform: scale(1.02);
  box-shadow: 0 0 0 4px var(--gold-glow);
}
.pa-dropzone-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  transition: transform var(--dur-mid) var(--ease-back);
}
.pa-dropzone:hover .pa-dropzone-icon { transform: translateY(-4px) scale(1.1); }

/* ================================================================
   19. BADGES & STATUTS — Pulse animation
   ================================================================ */
.pa-badge-pulse {
  position: relative;
}
.pa-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: currentColor;
  opacity: .2;
  animation: pa-pulse 2s ease infinite;
}
@keyframes pa-pulse {
  0%, 100% { transform: scale(1); opacity: .2; }
  50%       { transform: scale(1.3); opacity: 0; }
}

/* Notification dot */
.pa-notif-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #dc2626;
  border-radius: 50%;
  border: 2px solid var(--white);
  animation: pa-pulse 1.8s ease infinite;
}

/* ================================================================
   20. HEADER SCROLL — Transition sticky
   ================================================================ */
#pa-header {
  transition: box-shadow .3s ease, background .3s ease, height .3s ease !important;
}
#pa-header.scrolled {
  height: 60px;
}
#pa-header.scrolled .pa-logo img {
  height: 40px;
  transition: height .3s ease;
}

/* ================================================================
   21. FOOTER — Partners scroll animation
   ================================================================ */
.pa-partners-track {
  animation: pa-scroll 32s linear infinite;
  transition: animation-play-state .3s;
}
.pa-partners-wrap:hover .pa-partners-track {
  animation-play-state: paused;
}
.pa-partner-chip {
  transition: all var(--dur-mid) var(--ease-out) !important;
}
.pa-partner-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(184,149,42,.18);
}

/* ================================================================
   22. SEARCH BAR — Expansion animation
   ================================================================ */
.pa-search-bar {
  transition: box-shadow var(--dur-mid) ease !important;
}
.pa-search-bar:focus-within {
  box-shadow: 0 8px 32px rgba(184,149,42,.16) !important;
  border-color: var(--border) !important;
}

/* ================================================================
   23. SECTION HEADERS — Reveal avec line
   ================================================================ */
.pa-divider {
  transform-origin: left;
  animation: pa-divider-in .6s var(--ease-out) .2s both;
}
@keyframes pa-divider-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ================================================================
   24. RESPONSIVE — Breakpoints complets
   ================================================================ */
@media (max-width: 1280px) {
  .pa-container { padding: 0 24px; }
}

@media (max-width: 1024px) {
  .pa-g4 { grid-template-columns: repeat(2,1fr); }
  .pa-g3 { grid-template-columns: repeat(2,1fr); }
  .pa-dash-layout { grid-template-columns: 1fr; }
  .pa-hero-title { font-size: clamp(1.6rem,5vw,2.8rem); }
  .pa-carousel-prev { left: 0; }
  .pa-carousel-next { right: 0; }
}

@media (max-width: 768px) {
  .pa-section { padding: 48px 0; }
  .pa-section-title { font-size: clamp(1.4rem,5vw,2rem); }
  #pa-hero { min-height: 500px; }
  .pa-hero-slide.active { min-height: 500px; }
  .pa-hero-overlay { padding: 52px 0; }
  .pa-hero-stats { gap: 20px; }
  .pa-hs-num { font-size: 1.5rem; }
  .pa-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pa-flex-between { flex-direction: column; align-items: flex-start; }
  .pa-modal { padding: 24px 18px; }
  .pa-op-grid { grid-template-columns: repeat(2,1fr); }
  #pa-toast { bottom: 16px; right: 16px; left: 16px; max-width: none; }
}

@media (max-width: 600px) {
  .pa-container, .pa-container-sm { padding: 0 14px; }
  .pa-g2, .pa-g3, .pa-g4 { grid-template-columns: 1fr; }
  .pa-section { padding: 36px 0; }
  .pa-form-card { padding: 20px 16px; }
  .pa-fg2 { grid-template-columns: 1fr; }
  .pa-hero-ctas { flex-direction: column; }
  .pa-hero-ctas .pa-btn { width: 100%; justify-content: center; }
  .pa-tab-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pa-tab-bar::-webkit-scrollbar { display: none; }
  .pa-tab-btn { flex-shrink: 0; }
  .pa-slider-prev, .pa-slider-next { display: none; }
  .pa-emp-card { flex-direction: column; align-items: flex-start; }
  .pa-emp-card > div:last-child { width: 100%; }
  .pa-emp-card > div:last-child .pa-btn { width: 100%; justify-content: center; }
  .pa-header-inner { height: 60px; }
  .pa-logo img { height: 40px !important; }
  .pa-price-badge { font-size: .95rem; padding: 8px 16px; }
  .pa-dash-stat .val { font-size: 1.6rem; }
}

@media (max-width: 420px) {
  .pa-section-title { font-size: 1.3rem; }
  .pa-btn-xl { padding: 12px 22px; font-size: .95rem; }
  .pa-footer-grid { grid-template-columns: 1fr; }
  .pa-hero-stats { flex-direction: column; gap: 12px; }
  .pa-op-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
}

/* ================================================================
   25. TOUCH DEVICES — Optimisations
   ================================================================ */
@media (hover: none) {
  .pa-fcard:hover,
  .pa-cert-card:hover,
  .pa-cab-card:hover,
  .pa-actu-card:hover { transform: none !important; }

  .pa-btn:hover { filter: none; }
  .pa-nav-link::after { display: none; }
}

/* ================================================================
   26. PRINT — Masquer éléments non imprimables
   ================================================================ */
@media print {
  #pa-ticker, #pa-header, #pa-footer,
  .pa-slider-prev, .pa-slider-next, .pa-slider-dots,
  .pa-btn, .pa-ad-bar, #pa-toast { display: none !important; }
  .pa-reveal { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   27. REDUCED MOTION — Accessibilité
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pa-ticker-inner { animation: none; }
  .pa-partners-track { animation: none; }
  body { animation: none; }
}

/* ================================================================
   28. DARK MODE SUPPORT (optionnel — si activé)
   ================================================================ */
@media (prefers-color-scheme: dark) {
  /* Conserver la palette PA — ne pas altérer les couleurs de marque */
  .pa-skeleton {
    background: linear-gradient(90deg, #1a2340 25%, #243058 50%, #1a2340 75%);
    background-size: 200% 100%;
  }
}

/* ================================================================
   29. FOCUS VISIBLE — Accessibilité clavier
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ================================================================
   30. SCROLL SMOOTH GLOBAL
   ================================================================ */
html { scroll-behavior: smooth; }

/* Scroll indicator en haut de page */
.pa-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 9999;
  transition: width .1s linear;
}