@import url('../css dashboard/global.css');

/* ═══════════════════════════════════════════════════
   PROFILE — Styles spécifiques
═══════════════════════════════════════════════════ */

body { min-height: 100vh; }

/* Carte profil */
.profile-avatar {
    width: 100px; height: 100px;
    border-radius: 1.25rem;
    border: 4px solid white;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    overflow: hidden; position: relative;
    transition: transform .2s, box-shadow .2s;
}
.profile-avatar:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(99,102,241,.25); }
.stat-pill { transition: all .25s ease; border: 1px solid transparent; }
.stat-pill:hover { border-color: rgba(99,102,241,.2); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99,102,241,.1); }
.form-section { opacity: 0; transform: translateY(16px); animation: sectionIn .45s ease forwards; }
@keyframes sectionIn { to { opacity: 1; transform: translateY(0); } }
.profile-input:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
#bannerPreviewBox { height: 80px; border-radius: 1rem; overflow: hidden; transition: all .3s ease; }

/* Upload / Tabs */
.img-tab-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); color: #6366f1; }
.drop-zone { border: 2px dashed #e2e8f0; transition: all .2s ease; }
.drop-zone:hover, .drop-zone-hover       { border-color: #6366f1 !important; background: #eef2ff !important; }
.drop-zone-banner:hover, .drop-zone-banner-hover { border-color: #a855f7 !important; background: #faf5ff !important; }