/* ══════════════════════════════════════════
   P-DDRCS — Styles Custom
   Complément à Tailwind CSS CDN
   ══════════════════════════════════════════ */

/* --- Barre tricolore RDC --- */
.drc-bar {
  background: linear-gradient(
    to right,
    #003DA5 0%, #003DA5 33.33%,
    #F7D417 33.33%, #F7D417 36.66%,
    #CE1126 36.66%, #CE1126 100%
  );
}

/* --- Glassmorphisme --- */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card-dark {
  background: rgba(0, 35, 102, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-nav {
  background: rgba(0, 35, 102, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Section pattern hero --- */
.section-pattern {
  background:
    linear-gradient(135deg, rgba(0, 35, 102, 0.95), rgba(0, 61, 165, 0.85)),
    url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* --- Footer title underline --- */
.footer-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #CE1126;
  margin-top: 8px;
  border-radius: 2px;
}

/* --- Scroll animations --- */
.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-in-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Delays cascade --- */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --- Animation Polaroid Stack --- */
#polaroid-stack > div {
  position: absolute;
  inset: 0;
  background: white;
  padding: 12px;
  padding-bottom: 48px; /* Espace pour la légende */
  border-radius: 0.75rem; /* rounded-xl */
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(20px);
  transform-origin: center bottom;
  border: 1px solid rgba(0,0,0,0.05);
}

/* Carte du dessus (1ère visible) */
#polaroid-stack > div:nth-last-child(1) {
  opacity: 1;
  visibility: visible;
  transform: rotate(-2deg) scale(1) translateY(0);
  z-index: 30;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Carte du milieu (2ème visible) */
#polaroid-stack > div:nth-last-child(2) {
  opacity: 0.85;
  visibility: visible;
  transform: rotate(4deg) scale(0.95) translateY(-15px) translateX(15px);
  z-index: 20;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  filter: grayscale(20%);
}

/* Carte du fond (3ème visible) */
#polaroid-stack > div:nth-last-child(3) {
  opacity: 0.6;
  visibility: visible;
  transform: rotate(-5deg) scale(0.9) translateY(-30px) translateX(-10px);
  z-index: 10;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  filter: grayscale(50%);
}

/* Animation d'évacuation de la carte */
#polaroid-stack > div.slide-out {
  transform: translateX(120%) translateY(-20%) rotate(25deg) scale(1.05) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: 40 !important;
}