/* ═══════════════════════════════════════════════════════
   RELIA RECRU — Animations globales (subtiles)
   ═══════════════════════════════════════════════════════ */

/* ── 1. Scroll reveal ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Délais échelonnés pour les grilles */
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.19s; }
.reveal-delay-4 { transition-delay: 0.26s; }

/* ── 2. Cards — hover lift ───────────────────────────── */
.job-card,
.card {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.job-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(210, 35, 42, 0.10) !important;
}

/* ── 3. Boutons — hover scale + glow ────────────────── */
.btn-hero-primary,
.btn-hero-secondary {
  transition: background-color 0.2s, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.btn-hero-primary:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 18px rgba(210, 35, 42, 0.30) !important;
}
.btn-hero-secondary:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}

/* Boutons inline rouge génériques */
a[href],
button {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
a[href]:active,
button:active {
  transform: scale(0.97);
}

/* Boutons pill rouges */
a.bg-rred,
a[style*="#D2232A"],
button.bg-rred {
  transition: background-color 0.2s, transform 0.18s ease, box-shadow 0.18s ease;
}
a.bg-rred:hover,
button.bg-rred:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(210, 35, 42, 0.28);
}

/* ── 4. Stat items — hover glow ─────────────────────── */
.stat-item-custom {
  transition: transform 0.2s ease;
}
.stat-item-custom:hover {
  transform: translateY(-3px);
}

/* ── 5. Filter chips — micro bounce ─────────────────── */
.filter-chip {
  transition: background 0.15s, color 0.15s, border-color 0.15s,
              transform 0.15s ease !important;
}
.filter-chip:hover {
  transform: scale(1.05) !important;
}
.filter-chip:active {
  transform: scale(0.96) !important;
}

/* ── 6. Team cards — hover lift (already in .card) ──── */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14) !important;
}

/* ── 7. Nav links — underline slide ─────────────────── */
.nav-link-custom {
  position: relative;
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #D2232A;
  transition: width 0.22s ease;
}
.nav-link-custom:hover::after {
  width: 100%;
}

/* ── 8. Badge hero — subtle pulse ───────────────────── */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 35, 42, 0); }
  50%       { box-shadow: 0 0 0 5px rgba(210, 35, 42, 0.12); }
}
.badge-recrutement {
  animation: subtlePulse 3s ease-in-out infinite;
}

/* ── 9. Logo — hover rotate légère ──────────────────── */
header img {
  transition: transform 0.3s ease;
}
header img:hover {
  transform: scale(1.04);
}

/* ── 10. Sidebar panel — slide-in sur mobile ────────── */
#sidebarPanel, #homeSidebarPanel {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── 11. Pagination buttons ─────────────────────────── */
.pagination-btn {
  transition: background 0.15s, color 0.15s, border-color 0.15s,
              transform 0.15s ease !important;
}
.pagination-btn:not(:disabled):hover {
  transform: scale(1.12) !important;
}

/* ── 12. Input focus glow ───────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
select:focus {
  transition: box-shadow 0.2s ease;
}