/* =========================================================================
   EPICVIEW — Carte de visite digitale (carte-visite.css)
   S'appuie sur home.css + linktree.css (.lt-wrap, .lt-cta, .lt-sep, .lt-links,
   .lt-link, .lt-share, .lt-toast, --lt-gap) + orbital.css.
   Spécifique à cette page : carte-logo pleine largeur, avatar, nom, poste,
   boutons "ajouter aux contacts".
   ========================================================================= */

.ev-cv { padding-top: clamp(1.4rem, 4vw, 2.2rem); }

/* ---------- Carte-logo (pleine largeur du conteneur, arrondie) ---------- */
.cv-card {
  position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 260px;
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(164,0,0,.35), transparent 60%),
    linear-gradient(155deg, #17171b, #08080a);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  opacity: 0; animation: ltIn .6s var(--ev-ease) forwards; animation-delay: .02s;
}
.cv-card__logo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}

/* ---------- Avatar (chevauche la bordure basse de la carte) ---------- */
.cv-avatar-row { position: relative; display: flex; justify-content: center; }
.cv-avatar {
  position: relative; margin-top: -46px; z-index: 3;
  width: 92px; height: 92px; border-radius: 50%;
  border: 4px solid var(--ev-bg);
  background: linear-gradient(150deg, var(--ev-red-lite), var(--ev-red));
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  overflow: hidden;
  opacity: 0; animation: ltIn .6s var(--ev-ease) forwards; animation-delay: .08s;
}
.cv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* repli si la photo n'est pas encore disponible : initiales */
.cv-avatar__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ev-font); font-weight: 800; font-size: 1.6rem; color: #fff;
}

/* ---------- Nom & poste ---------- */
.cv-identity { text-align: center; margin-top: .9rem; }
.cv-name {
  font-family: var(--ev-font); font-weight: 800; font-size: clamp(1.2rem, 4vw, 1.5rem);
  letter-spacing: -.01em; color: #fff;
  opacity: 0; animation: ltIn .6s var(--ev-ease) forwards; animation-delay: .12s;
}
.cv-title {
  font-family: var(--ev-font); font-size: clamp(.88rem, 2.8vw, .98rem); color: var(--ev-red-lite);
  font-weight: 600; margin-top: .3rem;
  opacity: 0; animation: ltIn .6s var(--ev-ease) forwards; animation-delay: .16s;
}

/* ---------- Bouton "Télécharger le contact" (.vcf universel) ---------- */
.cv-contact-row {
  display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.3rem; margin-bottom: var(--lt-gap);
}
.cv-contact-btn {
  flex: 1 1 0; min-width: 160px; max-width: 230px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ev-font); font-weight: 600; font-size: .92rem;
  padding: .8rem 1.1rem; border-radius: 100px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.22);
  transition: transform .3s var(--ev-ease), box-shadow .3s var(--ev-ease), background .3s var(--ev-ease), border-color .3s var(--ev-ease);
  opacity: 0; animation: ltIn .6s var(--ev-ease) forwards;
}
.cv-contact-btn:hover { border-color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); }
.cv-contact-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cv-contact-btn--wide {
  flex: 0 1 auto; max-width: 320px; padding: .9rem 1.6rem; font-size: .98rem;
  background: linear-gradient(100deg, var(--ev-red-lite), var(--ev-red));
  color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(164,0,0,.35);
}
.cv-contact-btn--wide:hover { box-shadow: 0 16px 36px rgba(164,0,0,.5); border-color: transparent; background: linear-gradient(100deg, var(--ev-red-lite), var(--ev-red)); }

/* ---------- Icônes de contact (variantes de .lt-link__icon) ---------- */
.lt-link__icon--tel { background: linear-gradient(150deg, #4ade80, #16a34a); }
.lt-link__icon--mail { background: linear-gradient(150deg, var(--ev-red-lite), var(--ev-red)); }
.lt-link__icon--in { background: #0a66c2; }
.lt-link__icon--epicview { background: #0b0b0d; overflow: hidden; }
.lt-link__icon--epicview img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .cv-card, .cv-avatar, .cv-name, .cv-title, .cv-contact-btn { animation: none; opacity: 1; }
}