/* =====================================================================
   modern.css — Couche de modernisation UI (Phase 8)
   ADDITIVE : à charger APRÈS style.css (et premium.css). N'écrase pas la
   structure ; ajoute des touches contemporaines (IG / Tinder) + a11y.
   Inclure dans header.php :
     <link rel="stylesheet" href="css/modern.css">
   ===================================================================== */

/* ---------- Cartes profil : survol moderne + zoom photo ---------- */
.profile-card {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}
.profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(26,107,74,.16);
}
.profile-card-img { overflow: hidden; }
.profile-card-img img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.profile-card:hover .profile-card-img img { transform: scale(1.06); }
/* léger dégradé bas de photo (lisibilité, style app) */
.profile-card-img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent);
  pointer-events: none;
}

/* ---------- Apparition douce des cartes ---------- */
@keyframes mk-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.profiles-grid .profile-card,
.testimonials-grid .testimonial-card,
.cm .post { animation: mk-fade-up .4s ease both; }

/* ---------- Boutons : état pressé + finition ---------- */
.btn-primary, .btn-outline, .btn-filter, .pack-btn, .btn-submit {
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
}
.btn-primary:active, .btn-outline:active, .btn-filter:active,
.pack-btn:active, .btn-submit:active { transform: translateY(1px) scale(.99); }

/* ---------- Champs : anneau de focus moderne ---------- */
.filter-control:focus, .form-control:focus, .auth-input:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(26,107,74,.18);
}

/* ---------- Accessibilité : focus clavier visible ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Barre de défilement moderne ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--emerald-light) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--emerald-light); border-radius: 20px; border: 3px solid var(--bg-page); }
*::-webkit-scrollbar-thumb:hover { background: var(--emerald); }

/* ---------- En-tête : ombre douce quand on scrolle (déjà glassy) ---------- */
nav { box-shadow: 0 2px 20px rgba(0,0,0,.05); }

/* ---------- Tags / badges : arrondi plein, look pilule ---------- */
.tag { border-radius: 20px; }

/* ---------- Liens de menu : soulignement animé (desktop) ---------- */
@media (min-width: 769px) {
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: var(--emerald); transition: width .2s ease;
  }
  .nav-links a:hover::after { width: 100%; }
}

/* ---------- Confort mobile ---------- */
@media (max-width: 480px) {
  .section-title { font-size: 1.5rem; }
  .profiles-grid { gap: .9rem; }
  .btn-primary, .btn-outline { border-radius: 12px; }
}

/* ---------- Respect des préférences de mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .profile-card:hover { transform: none; }
  .profile-card:hover .profile-card-img img { transform: none; }
}