/* /css/moi.css — Profil (Moi) page
   Design: Serif | Tokens: theme.css | Mobile-first 360px
   Pattern: Stack Overflow metric dominance + Duolingo streak calendar
   Gold fill: .moi-level-badge (one gold fill per screen) */

.moi-page *, .moi-page *::before, .moi-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.moi-page { background: var(--ardoise); color: var(--craie); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100dvh; }

.moi-shell { padding-top: 72px; min-height: 100dvh; max-width: 640px; margin: 0 auto; padding-inline: var(--space-4, 16px); padding-bottom: calc(var(--space-9, 48px) + 20px); }
.moi-main { display: flex; flex-direction: column; gap: var(--space-5, 20px); padding-top: var(--space-5, 20px); }

.moi-surface { background: var(--ardoise-2); border: 1px solid rgba(232,245,232,.08); border-radius: var(--radius-md, 14px); padding: var(--space-5, 20px); }
.moi-label { font-family: var(--font-head); font-size: var(--text-base, 14px); font-weight: 500; color: var(--craie); margin-bottom: var(--space-4, 16px); letter-spacing: -0.01em; }

/* 1. PROFILE HERO */
.moi-profile { background: var(--ardoise-2); border: 1px solid rgba(232,245,232,.08); border-radius: var(--radius-md, 14px); padding: var(--space-6, 24px); text-align: center; }
.moi-profile-top { display: flex; flex-direction: column; align-items: center; gap: var(--space-4, 16px); margin-bottom: var(--space-5, 20px); }
.moi-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--ardoise-3); border: 2px solid rgba(232,245,232,.12); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 26px; font-weight: 500; color: var(--craie); flex-shrink: 0; transition: border-color 0.2s; }
.moi-avatar:hover { border-color: var(--craie-doree); }
.moi-profile-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.moi-profile-name { font-family: var(--font-head); font-size: var(--text-xl, 19px); font-weight: 500; color: var(--craie); }
.moi-profile-handle { font-size: var(--text-xs, 11px); color: rgba(232,245,232,.35); }
.moi-level-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(217,168,87,.08); border: 1px solid rgba(217,168,87,.25); color: var(--craie-doree); font-size: var(--text-xs, 11px); font-weight: 500; padding: 5px 12px; border-radius: var(--radius-pill, 999px); margin-top: 6px; }
.moi-level-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--craie-doree); display: inline-block; animation: moiPulse 2s ease-in-out infinite; }
@keyframes moiPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@media (prefers-reduced-motion:reduce){ .moi-level-badge::before{animation:none;} }
.moi-profile-actions { display: flex; justify-content: center; }
.moi-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(232,245,232,.12); border-radius: var(--radius-sm, 8px); padding: 10px 18px; font-family: var(--font-body); font-size: var(--text-sm, 12.5px); font-weight: 500; color: rgba(232,245,232,.6); text-decoration: none; cursor: pointer; transition: all .2s; min-height: 44px; }
.moi-btn:hover { border-color: rgba(217,168,87,.25); color: var(--craie); }
.moi-btn:focus-visible { outline: 2px solid var(--craie-doree); outline-offset: 2px; }

/* 2. STATS SUMMARY */
.moi-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.moi-stat { background: var(--ardoise-2); border: 1px solid rgba(232,245,232,.08); border-radius: var(--radius-sm, 8px); padding: 14px 12px; text-align: center; }
.moi-stat-val { font-family: var(--font-head); font-size: var(--text-2xl, 22px); font-weight: 500; line-height: 1; }
.moi-stat-val--streak { color: var(--orange-alerte); }
.moi-stat-val--xp { color: var(--craie-doree); }
.moi-stat-val--lessons { color: var(--bleu-info); }
.moi-stat-label { font-size: 10px; color: rgba(232,245,232,.35); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; }

/* 3. BADGES */
.moi-badges-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.moi-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--ardoise-2); border: 1px solid rgba(232,245,232,.08); border-radius: var(--radius-sm, 8px); text-align: center; transition: transform .2s, border-color .2s; }
.moi-badge:hover { transform: translateY(-2px); border-color: rgba(232,245,232,.15); }
.moi-badge-icon { font-size: 28px; line-height: 1; }
.moi-badge-icon.locked { filter: grayscale(1); opacity: .3; }
.moi-badge-name { font-size: var(--text-xs, 11px); font-weight: 400; color: rgba(232,245,232,.6); line-height: 1.2; }
@media (prefers-reduced-motion:reduce){ .moi-badge{transition:none;} }

/* 4. STREAK CALENDAR */
.moi-calendar-head { margin-bottom: var(--space-3, 12px); }
.moi-calendar-title { font-family: var(--font-head); font-size: var(--text-base, 14px); font-weight: 500; color: var(--craie); }
.moi-calendar-sub { font-size: var(--text-xs, 11px); color: rgba(232,245,232,.35); margin-top: 2px; }
.moi-calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.moi-calendar-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.moi-calendar-day-label { font-size: var(--text-xs, 11px); color: rgba(232,245,232,.35); text-transform: uppercase; }
.moi-calendar-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs, 11px); color: rgba(232,245,232,.35); background: rgba(232,245,232,.04); border: 1px solid rgba(232,245,232,.06); transition: background .2s, border-color .2s; }
.moi-calendar-dot.today { border-color: var(--craie-doree); color: var(--craie-doree); background: rgba(217,168,87,.08); }
.moi-calendar-dot.active { background: var(--craie-doree); border-color: var(--craie-doree); color: var(--ardoise); font-weight: 500; }

/* 5. SETTINGS ROW */
.moi-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); padding: 14px 18px; border-radius: var(--radius-sm, 8px); transition: background 0.15s; cursor: pointer; min-height: 44px; }
.moi-row:hover { background: rgba(232,245,232,.02); }
.moi-row-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.moi-row-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.moi-row-info { min-width: 0; }
.moi-row-name { font-size: var(--text-base, 14px); font-weight: 500; color: var(--craie); }
.moi-row-desc { font-size: var(--text-xs, 11px); color: rgba(232,245,232,.35); margin-top: 2px; }

/* Skeleton */
.moi-skeleton { background: rgba(232,245,232,.06); border-radius: 4px; animation: moiSkeletonPulse 1.5s ease-in-out infinite; }
@keyframes moiSkeletonPulse { 0%,100%{opacity:.4} 50%{opacity:.15} }
@media (prefers-reduced-motion:reduce){ .moi-skeleton{animation:none;} }

/* Enter animations */
.moi-enter { opacity: 0; transform: translateY(12px); animation: moiEnter .4s ease forwards; animation-delay: var(--moi-enter-delay, 0ms); }
@keyframes moiEnter { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion:reduce){ .moi-enter{animation:none;opacity:1;transform:none;} }

/* RTL */
[dir="rtl"] .moi-profile-name, [dir="rtl"] .moi-label, [dir="rtl"] .moi-row-name { font-family: var(--fa); }
[dir="rtl"] .moi-calendar-day-label { font-family: var(--fa); }

/* Responsive */
@media (max-width: 400px) {
  .moi-calendar-dot { width: 30px; height: 30px; font-size: 10px; }
  .moi-avatar { width: 64px; height: 64px; font-size: 22px; }
}
@media (min-width: 1024px) {
  .moi-shell { padding-top: var(--space-7, 32px); }
}