/* ============================================================
   ECH/O — Design System Unique v3
   Identité visuelle propriétaire — aucune copie de réseau social
   Palette : bleus profonds + violets + dégradés signature
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ── 1. Tokens de design ──────────────────────────────────── */
:root {
  /* Palette principale ECH/O */
  --c-void:      #03030a;
  --c-deep:      #06060f;
  --c-surface:   #0a0a18;
  --c-card:      #0d0d1f;
  --c-elevated:  #11112a;
  --c-hover:     #141430;

  /* Bordures */
  --c-line:      rgba(100,100,200,.1);
  --c-line-mid:  rgba(120,120,220,.16);
  --c-line-hi:   rgba(140,140,255,.22);

  /* Textes */
  --c-text:      #eeeeff;
  --c-text-dim:  #9898c0;
  --c-text-mute: #4a4a78;
  --c-text-faint:#28284a;

  /* Dégradés signature */
  --grad-main:   linear-gradient(135deg, #3b5bdb 0%, #6741d9 50%, #1971c2 100%);
  --grad-vivid:  linear-gradient(135deg, #4c6ef5 0%, #7950f2 100%);
  --grad-cool:   linear-gradient(135deg, #228be6 0%, #4c6ef5 50%, #7950f2 100%);
  --grad-warm:   linear-gradient(135deg, #f06595 0%, #cc5de8 50%, #7950f2 100%);
  --grad-subtle: linear-gradient(135deg, rgba(76,110,245,.12) 0%, rgba(121,80,242,.12) 100%);
  --grad-glow:   linear-gradient(135deg, rgba(76,110,245,.25) 0%, rgba(121,80,242,.25) 100%);

  /* Couleurs sémantiques */
  --c-like:      #f06595;
  --c-repost:    #51cf66;
  --c-link:      #74c0fc;
  --c-danger:    #ff6b6b;
  --c-success:   #51cf66;
  --c-warn:      #ffd43b;
  --c-gold:      #fcc419;

  /* Ombres */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.6);
  --shadow-btn: 0 4px 20px rgba(76,110,245,.4), 0 0 0 0 rgba(76,110,245,.2);
  --shadow-btn-hover: 0 6px 28px rgba(76,110,245,.55), 0 0 0 4px rgba(76,110,245,.15);

  /* Rayons */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-full:9999px;

  /* Espacement */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Typographie */
  --font:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --nav-h:     64px;
  --sidebar-w: 256px;
  --content-w: 640px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 140ms;
  --mid:  220ms;
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--c-text);
  background-color: var(--c-void);
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: var(--nav-h);

  /* Texture grain unique */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 50% at 50% -5%, rgba(76,110,245,.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(121,80,242,.08) 0%, transparent 50%);
  background-size: 300px 300px, 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed;
}

img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font-family:inherit; font-size:inherit; color:inherit; border:none; outline:none; background:none; }
button { cursor:pointer; }
ul, ol { list-style:none; }

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(100,100,200,.2); border-radius:99px; }

::selection { background:rgba(76,110,245,.3); color:var(--c-text); }

/* ── 3. Typographie ───────────────────────────────────────── */
h1 { font-size:1.5rem;   font-weight:800; letter-spacing:-.035em; }
h2 { font-size:1.25rem;  font-weight:700; letter-spacing:-.025em; }
h3 { font-size:1rem;     font-weight:700; }
h4 { font-size:.9375rem; font-weight:600; }

.text-muted  { color:var(--c-text-dim); }
.text-faint  { color:var(--c-text-mute); }
.text-link   { color:var(--c-link); }
.text-danger { color:var(--c-danger); }
.text-sm     { font-size:.8125rem; }
.text-xs     { font-size:.75rem; }
.font-bold   { font-weight:700; }

.grad-text {
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 4. Layout SPA ────────────────────────────────────────── */
#app { display:flex; min-height:100dvh; }
#main-content { flex:1; width:100%; min-height:100dvh; max-width:100%; }

/* Sidebar cachée par défaut (mobile-first) */
#sidebar { display:none; }

.view { display:none; min-height:100dvh; animation:viewIn var(--mid) var(--ease); }
.view.active { display:block; }

@keyframes viewIn {
  from { opacity:0; transform:translateY(12px) scale(.992); filter:blur(1px); }
  to   { opacity:1; transform:translateY(0)     scale(1);   filter:blur(0);   }
}

/* View header — barre sticky glassmorphism */
.view-header {
  position: sticky; top:0; z-index:100;
  background: rgba(6,6,15,.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-md);
  display: flex; align-items:center; gap:var(--sp-md);
}

.view-title { font-size:1.0625rem; font-weight:800; letter-spacing:-.02em; }

/* ── 5. Navigation mobile ─────────────────────────────────── */
#bottom-nav {
  position: fixed; bottom:0; left:0; right:0;
  height: var(--nav-h);
  background: rgba(6,6,15,.9);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-top: 1px solid var(--c-line);
  display: flex; align-items:stretch;
  z-index:200;

  /* Ligne de lumière en haut de la nav */
  box-shadow: 0 -1px 0 var(--c-line-mid), inset 0 1px 0 rgba(100,150,255,.06);
}

.nav-item {
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:var(--sp-xs);
  color:var(--c-text-mute);
  transition:color var(--fast) var(--ease);
  position:relative; border:none; background:none; cursor:pointer;
}

.nav-item svg {
  width:21px; height:21px;
  stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--fast) var(--ease);
}

.nav-item span { font-size:.5625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

.nav-item.active { color:var(--c-text); }

/* Icône active — effet glow unique */
.nav-item.active svg {
  filter: drop-shadow(0 0 6px rgba(76,110,245,.7));
  transform: scale(1.08);
}

/* Indicateur actif — point dégradé en haut */
.nav-item.active::before {
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:2px;
  background: var(--grad-vivid);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 8px rgba(76,110,245,.5);
}

.nav-badge {
  position:absolute; top:9px; right:calc(50% - 20px);
  min-width:15px; height:15px;
  background: var(--grad-warm);
  color:#fff;
  font-size:.5625rem; font-weight:800;
  border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center;
  padding:0 3px;
  border:1.5px solid var(--c-void);
  box-shadow:0 0 8px rgba(240,101,149,.5);
}

/* ── 6. Boutons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-sm);
  padding:10px var(--sp-lg);
  border-radius:var(--r-full);
  font-weight:700; font-size:.9375rem;
  cursor:pointer; transition:all var(--fast) var(--ease);
  white-space:nowrap; border:none; user-select:none;
  position:relative; overflow:hidden;
}
.btn:disabled { opacity:.35; pointer-events:none; }

/* Primaire — texture dégradée + brillance */
.btn--primary {
  background: var(--grad-cool);
  color: #fff;
  box-shadow: var(--shadow-btn);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* Effet de brillance interne */
.btn--primary::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:50%;
  background:linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0));
  border-radius:var(--r-full) var(--r-full) 0 0;
  pointer-events:none;
}
/* Effet shimmer au hover */
.btn--primary::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform .5s var(--ease);
}
.btn--primary:hover::after { transform:translateX(100%); }
.btn--primary:hover { box-shadow:var(--shadow-btn-hover); transform:translateY(-1px); }
.btn--primary:active { transform:scale(.97) translateY(0); }

/* Ghost — bordure dégradée */
.btn--ghost {
  background:transparent; color:var(--c-text);
  border:1.5px solid var(--c-line-mid);
  position:relative;
}
.btn--ghost:hover {
  border-color:transparent;
  background: var(--grad-subtle);
  color:var(--c-link);
  box-shadow:inset 0 0 0 1.5px rgba(76,110,245,.4);
}

/* Danger */
.btn--danger {
  background:transparent; color:var(--c-danger);
  border:1.5px solid rgba(255,107,107,.25);
}
.btn--danger:hover { background:rgba(255,107,107,.1); border-color:var(--c-danger); }

/* Follow */
.btn--follow {
  background: var(--c-text); color:var(--c-void);
  font-weight:800; padding:7px 18px; font-size:.875rem;
  box-shadow:0 2px 12px rgba(238,238,255,.15);
}
.btn--follow:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(238,238,255,.2); }

.btn--following {
  background:transparent; color:var(--c-text-dim);
  border:1.5px solid var(--c-line-mid); padding:7px 18px; font-size:.875rem;
}
.btn--following:hover { border-color:var(--c-danger); color:var(--c-danger); }

/* Tailles */
.btn--sm  { padding:6px var(--sp-md); font-size:.8125rem; }
.btn--xs  { padding:3px 10px; font-size:.75rem; }
.btn--full{ width:100%; }

/* Loading */
.btn.loading .btn-text { opacity:0; }
.btn.loading::after {
  content:''; position:absolute;
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── 7. Inputs & Formulaires ──────────────────────────────── */
.input-group { display:flex; flex-direction:column; gap:var(--sp-xs); margin-bottom:var(--sp-md); }

.input-label {
  font-size:.6875rem; font-weight:700;
  color:var(--c-text-mute); text-transform:uppercase; letter-spacing:.08em;
}

.input-field {
  width:100%; padding:11px var(--sp-md);
  background:var(--c-elevated);
  border:1.5px solid var(--c-line);
  border-radius:var(--r-sm);
  color:var(--c-text); font-size:.9375rem;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.input-field::placeholder { color:var(--c-text-mute); }
.input-field:focus {
  border-color:rgba(76,110,245,.6);
  box-shadow:0 0 0 3px rgba(76,110,245,.18), 0 0 16px rgba(76,110,245,.12);
  outline:none;
}
.input-field.error { border-color:var(--c-danger); }

textarea.input-field { resize:vertical; min-height:100px; }

.input-prefix {
  display:flex; align-items:center;
  background:var(--c-elevated);
  border:1.5px solid var(--c-line); border-radius:var(--r-sm); overflow:hidden;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.input-prefix:focus-within {
  border-color:rgba(76,110,245,.6);
  box-shadow:0 0 0 3px rgba(76,110,245,.18);
}
.input-prefix-symbol { padding:11px var(--sp-sm) 11px var(--sp-md); color:var(--c-text-mute); font-weight:700; user-select:none; }
.input-prefix .input-field { border:none; box-shadow:none; padding-left:0; background:transparent; }
.input-prefix .input-field:focus { box-shadow:none; }

.char-counter { font-size:.75rem; color:var(--c-text-mute); text-align:right; }
.char-counter.warn { color:var(--c-warn); }
.char-counter.over { color:var(--c-danger); }

/* ── 8. Cartes d'Ondes ────────────────────────────────────── */
.post-card {
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-md);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 var(--sp-sm);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
  position: relative;
}

.post-card:hover {
  background: var(--c-hover);
}

/* Fil de discussion */
.post-card--thread::before {
  content:'';
  position:absolute;
  left:calc(var(--sp-md) + 22px);
  top:62px; bottom:-1px;
  width:2px;
  background:linear-gradient(to bottom, var(--c-line-mid), transparent);
}

/* Repost */
.post-card--repost {
  border-left:2px solid rgba(76,110,245,.3);
}

/* Avatar */
.post-avatar {
  width:44px; height:44px; border-radius:var(--r-full);
  object-fit:cover; background:var(--c-elevated);
  flex-shrink:0; cursor:pointer;
  border:2px solid var(--c-line);
  transition:border-color var(--fast), box-shadow var(--fast);
}
.post-avatar:hover { border-color:rgba(76,110,245,.5); box-shadow:0 0 0 3px rgba(76,110,245,.12); }

.post-avatar-placeholder {
  width:44px; height:44px; border-radius:var(--r-full);
  background:var(--grad-vivid);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; color:#fff;
  cursor:pointer; flex-shrink:0;
  border:2px solid rgba(76,110,245,.25);
  box-shadow:0 0 12px rgba(76,110,245,.2);
}

.post-body { min-width:0; }

.post-header {
  display:flex; align-items:center; gap:5px;
  flex-wrap:wrap; margin-bottom:4px;
}

.post-username {
  font-weight:700; font-size:.9375rem; cursor:pointer;
  transition:color var(--fast);
}
.post-username:hover { color:var(--c-link); }

.post-handle { color:var(--c-text-mute); font-size:.8125rem; }
.post-dot    { color:var(--c-text-faint); font-size:.75rem; }
.post-time   { color:var(--c-text-faint); font-size:.8125rem; margin-left:auto; }

.post-content {
  font-size:.9375rem; line-height:1.65;
  white-space:pre-wrap; word-break:break-word;
  color:var(--c-text); margin-bottom:var(--sp-sm);
}
.post-content a         { color:var(--c-link); }
.post-content .hashtag,
.post-content .mention  { color:var(--c-link); cursor:pointer; font-weight:500; }

/* Média */
.post-media {
  width:100%; border-radius:var(--r-md); overflow:hidden;
  margin-bottom:var(--sp-sm);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
}
.post-media img   { width:100%; max-height:480px; object-fit:cover; }
.post-media video { width:100%; max-height:400px; }

/* ── Actions sur les ondes ────────────────────────────────── */
.post-actions {
  display:flex; align-items:center;
  gap:2px; margin-top:6px;
}

.post-action {
  display:flex; align-items:center; gap:4px;
  padding:6px 8px; border-radius:var(--r-xs);
  color:var(--c-text-mute); font-size:.8125rem; font-weight:600;
  transition:all var(--fast) var(--ease);
  cursor:pointer; border:none; background:none;
}

.post-action svg {
  width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  transition:transform var(--fast);
}

.post-action--reply:hover   { color:#74c0fc; background:rgba(116,192,252,.1); }
.post-action--reply:hover svg { transform:scale(1.15); }

.post-action--repost:hover  { color:var(--c-repost); background:rgba(81,207,102,.1); }
.post-action--repost:hover svg { transform:rotate(15deg) scale(1.1); }
.post-action--repost.active { color:var(--c-repost); }

.post-action--like:hover    { color:var(--c-like); background:rgba(240,101,149,.1); }
.post-action--like:hover svg{ transform:scale(1.2); }
.post-action--like.active   { color:var(--c-like); }
.post-action--like.active svg { fill:var(--c-like); stroke:var(--c-like); }

.post-action--share:hover   { color:var(--c-link); background:rgba(116,192,252,.1); }
.post-action--share         { margin-left:auto; }

.post-action--bookmark:hover     { color:var(--c-gold); background:rgba(252,196,25,.1); }
.post-action--bookmark.active    { color:var(--c-gold); }
.post-action--bookmark.active svg{ fill:var(--c-gold); stroke:var(--c-gold); }

.post-action--menu:hover    { color:var(--c-text-dim); background:var(--c-elevated); }

/* Compteur d'ondes (vues) */
.wave-count {
  display:flex; align-items:center; gap:4px;
  font-size:.8125rem; color:var(--c-text-faint); padding:6px 6px;
}
.wave-count svg {
  width:14px; height:14px;
  stroke:var(--c-text-faint); fill:none;
  stroke-width:1.5; stroke-linecap:round;
}

/* Badge slot invisible */
.badge-slot { display:inline-block; width:0; height:0; overflow:hidden; }

/* ── 9. Badges de vérification ────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; flex-shrink:0; vertical-align:middle;
}
.badge[data-tip] { cursor:help; position:relative; }
.badge[data-tip]::after {
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--c-card); border:1px solid var(--c-line-mid);
  color:var(--c-text); font-size:.6875rem; white-space:nowrap;
  padding:4px 10px; border-radius:var(--r-xs); pointer-events:none;
  opacity:0; transition:opacity var(--fast); z-index:50;
  box-shadow:var(--shadow-md);
}
.badge[data-tip]:hover::after { opacity:1; }

/* ── 10. Home Feed ────────────────────────────────────────── */
#view-home .view-header { flex-direction:column; align-items:stretch; padding:0; gap:0; }

.home-header-top {
  padding:var(--sp-md) var(--sp-md) var(--sp-sm);
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo visible uniquement sur mobile (la sidebar le cache sur desktop) */
.home-logo {
  font-size:1.125rem; font-weight:900; letter-spacing:-.05em;
  background:var(--grad-vivid);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Sur desktop, le logo est dans la sidebar — on cache celui du header */
@media (min-width:768px) {
  .home-logo { display:none; }
}

/* Onglets */
.tabs { display:flex; border-bottom:1px solid var(--c-line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }

.tab {
  flex:1; min-width:max-content;
  padding:var(--sp-sm) var(--sp-lg);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-text-mute); text-align:center; cursor:pointer;
  transition:color var(--fast); position:relative; white-space:nowrap;
  background:none; border:none;
}
.tab.active { color:var(--c-text); }
.tab.active::after {
  content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px;
  background:var(--grad-vivid);
  border-radius:var(--r-full) var(--r-full) 0 0;
  box-shadow:0 0 8px rgba(76,110,245,.5);
}

/* FAB */
.fab {
  position:fixed;
  bottom:calc(var(--nav-h) + var(--sp-lg));
  right:var(--sp-lg);
  width:52px; height:52px;
  border-radius:var(--r-full);
  background: var(--grad-cool);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-btn);
  cursor:pointer; z-index:150;
  transition:transform var(--fast), box-shadow var(--fast);
  border:none;

  /* Bordure brillante */
  outline:1.5px solid rgba(255,255,255,.12);
  outline-offset:1px;
}
.fab:hover { transform:translateY(-3px) scale(1.06); box-shadow:var(--shadow-btn-hover); }
.fab:active { transform:scale(.94); }
.fab svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* Feed states */
.feed-empty {
  padding:var(--sp-xl) var(--sp-md); text-align:center;
  color:var(--c-text-mute); font-size:.9375rem;
}
.feed-loading { padding:var(--sp-xl); display:flex; justify-content:center; }

.spinner {
  width:26px; height:26px;
  border:2.5px solid var(--c-line-mid);
  border-top-color:rgba(76,110,245,.8);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* Skeleton */
.skeleton {
  background:linear-gradient(90deg, var(--c-elevated) 25%, var(--c-hover) 50%, var(--c-elevated) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-xs); color:transparent;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-post { padding:var(--sp-md); display:grid; grid-template-columns:44px 1fr; gap:var(--sp-sm); border-bottom:1px solid var(--c-line); }
.skeleton-avatar { width:44px; height:44px; border-radius:50%; }
.skeleton-line { height:12px; border-radius:99px; margin-bottom:var(--sp-sm); }
.skeleton-line--short { width:35%; }
.skeleton-line--med   { width:65%; }
.skeleton-line--full  { width:100%; }

/* ── 11. Profil ───────────────────────────────────────────── */
.profile-banner {
  width:100%; height:160px;
  background:var(--grad-cool);
  object-fit:cover;
}

.profile-info { padding:var(--sp-md); padding-top:0; position:relative; }

.profile-avatar-wrap { position:relative; margin-top:-46px; margin-bottom:var(--sp-sm); display:inline-block; }

.profile-avatar {
  width:84px; height:84px; border-radius:var(--r-full);
  border:3px solid var(--c-void); object-fit:cover;
  background:var(--c-elevated);
  box-shadow:0 0 0 1.5px var(--c-line-mid), 0 0 20px rgba(76,110,245,.2);
}
.profile-avatar-placeholder {
  width:84px; height:84px; border-radius:var(--r-full);
  border:3px solid var(--c-void);
  background:var(--grad-vivid);
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; font-weight:800; color:#fff;
  box-shadow:0 0 0 1.5px var(--c-line-mid), 0 0 20px rgba(76,110,245,.25);
}

.profile-follow-btn-wrap { position:absolute; top:var(--sp-md); right:var(--sp-md); display:flex; gap:var(--sp-sm); align-items:center; }

.profile-name-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.profile-name { font-size:1.125rem; font-weight:900; letter-spacing:-.03em; }
.profile-handle { font-size:.875rem; color:var(--c-text-mute); margin-top:2px; margin-bottom:var(--sp-sm); }
.profile-bio { font-size:.9375rem; line-height:1.65; margin-bottom:var(--sp-md); white-space:pre-wrap; }

.profile-stats { display:flex; gap:var(--sp-lg); margin-bottom:var(--sp-md); }
.profile-stat { display:flex; gap:4px; font-size:.875rem; cursor:pointer; transition:color var(--fast); }
.profile-stat:hover .profile-stat-count { color:var(--c-link); }
.profile-stat-count { font-weight:800; letter-spacing:-.02em; }
.profile-stat-label { color:var(--c-text-mute); }

.profile-tabs { border-top:1px solid var(--c-line); }

/* ── 12. Explorer ─────────────────────────────────────────── */
.explore-search-wrap {
  padding:var(--sp-md);
  position:sticky; top:0;
  background:rgba(6,6,15,.88);
  backdrop-filter:blur(24px) saturate(180%);
  z-index:100; border-bottom:1px solid var(--c-line);
}

.search-input-wrap { position:relative; display:flex; align-items:center; }
.search-icon { position:absolute; left:var(--sp-md); width:16px; height:16px; stroke:var(--c-text-mute); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.search-input {
  width:100%; padding:10px var(--sp-md) 10px 42px;
  background:var(--c-elevated);
  border:1.5px solid var(--c-line);
  border-radius:var(--r-full);
  color:var(--c-text); font-size:.9375rem;
  transition:border-color var(--fast), box-shadow var(--fast);
}
.search-input::placeholder { color:var(--c-text-mute); }
.search-input:focus { border-color:rgba(76,110,245,.5); box-shadow:0 0 0 3px rgba(76,110,245,.14); outline:none; }

.explore-section { padding:var(--sp-md); border-bottom:1px solid var(--c-line); }
.explore-section-title { font-size:1rem; font-weight:800; letter-spacing:-.02em; margin-bottom:var(--sp-md); }

.trend-item { padding:10px 0; border-bottom:1px solid var(--c-line); cursor:pointer; transition:background var(--fast); }
.trend-item:last-child { border-bottom:none; }
.trend-item:hover { background:var(--c-hover); margin:0 calc(-1*var(--sp-md)); padding:10px var(--sp-md); border-radius:var(--r-sm); }
.trend-label { font-size:.6875rem; color:var(--c-text-mute); text-transform:uppercase; letter-spacing:.06em; }
.trend-tag   { font-weight:700; font-size:.9375rem; background:var(--grad-vivid); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.trend-count { font-size:.8125rem; color:var(--c-text-mute); margin-top:2px; }

.interest-tags { display:flex; flex-wrap:wrap; gap:var(--sp-sm); }
.interest-tag {
  padding:7px var(--sp-md);
  background:var(--c-elevated); border:1.5px solid var(--c-line-mid);
  border-radius:var(--r-full); font-size:.8125rem; font-weight:600;
  cursor:pointer; transition:all var(--fast);
  color:var(--c-text-dim);
}
.interest-tag:hover, .interest-tag.active {
  background:var(--grad-subtle);
  border-color:rgba(76,110,245,.4);
  color:var(--c-link);
  box-shadow:0 0 0 1px rgba(76,110,245,.3), 0 4px 12px rgba(76,110,245,.2);
}

.suggested-user { display:flex; align-items:center; gap:var(--sp-md); padding:10px 0; cursor:pointer; }
.suggested-user-info { flex:1; min-width:0; }
.suggested-user-name { font-weight:700; font-size:.9375rem; display:flex; align-items:center; gap:4px; }
.suggested-user-handle { font-size:.8125rem; color:var(--c-text-mute); }
.suggested-avatar { width:44px; height:44px; border-radius:var(--r-full); object-fit:cover; background:var(--c-elevated); flex-shrink:0; border:1.5px solid var(--c-line); }

/* ── 13. Messages DMs ─────────────────────────────────────── */
.dm-item { display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-md); border-bottom:1px solid var(--c-line); cursor:pointer; transition:background var(--fast); }
.dm-item:hover, .dm-item.active { background:var(--c-hover); }

.dm-avatar { width:48px; height:48px; border-radius:var(--r-full); object-fit:cover; background:var(--c-elevated); flex-shrink:0; border:1.5px solid var(--c-line); }
.dm-info { flex:1; min-width:0; }
.dm-header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:2px; }
.dm-name    { font-weight:700; font-size:.9375rem; }
.dm-time    { font-size:.75rem; color:var(--c-text-mute); }
.dm-preview { font-size:.875rem; color:var(--c-text-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-unread-badge { width:8px; height:8px; border-radius:50%; background:var(--grad-vivid); flex-shrink:0; box-shadow:0 0 6px rgba(76,110,245,.5); }

.dm-thread { display:none; flex-direction:column; height:100dvh; overflow:hidden; }
.dm-thread.active { display:flex; }
.dm-thread-header { padding:var(--sp-md); border-bottom:1px solid var(--c-line); display:flex; align-items:center; gap:var(--sp-md); background:rgba(6,6,15,.9); flex-shrink:0; backdrop-filter:blur(20px); }

.dm-messages { flex:1; overflow-y:auto; padding:var(--sp-md); display:flex; flex-direction:column; gap:var(--sp-sm); }

.dm-message { max-width:78%; padding:10px var(--sp-md); font-size:.9375rem; line-height:1.5; word-break:break-word; border-radius:var(--r-md); }
.dm-message--in  { background:var(--c-elevated); border:1px solid var(--c-line); border-bottom-left-radius:4px; align-self:flex-start; }
.dm-message--out { background:var(--grad-vivid); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; box-shadow:0 4px 16px rgba(76,110,245,.35), 0 0 0 1px rgba(255,255,255,.08) inset; }

.dm-compose { padding:var(--sp-sm) var(--sp-md); border-top:1px solid var(--c-line); display:flex; gap:var(--sp-sm); align-items:flex-end; flex-shrink:0; background:var(--c-deep); }
.dm-input { flex:1; padding:10px var(--sp-md); background:var(--c-elevated); border:1.5px solid var(--c-line); border-radius:var(--r-full); color:var(--c-text); font-size:.9375rem; resize:none; max-height:120px; overflow-y:auto; transition:border-color var(--fast); }
.dm-input:focus { border-color:rgba(76,110,245,.5); outline:none; }
.dm-input::placeholder { color:var(--c-text-mute); }
.dm-send-btn { width:40px; height:40px; border-radius:var(--r-full); background:var(--grad-vivid); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 14px rgba(76,110,245,.4); transition:transform var(--fast), box-shadow var(--fast); }
.dm-send-btn:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(76,110,245,.55); }
.dm-send-btn svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── 14. Paramètres ───────────────────────────────────────── */
.settings-section { border-bottom:1px solid var(--c-line); padding:var(--sp-xs) 0; }
.settings-section-title { padding:var(--sp-sm) var(--sp-md); font-size:.6875rem; font-weight:700; color:var(--c-text-mute); text-transform:uppercase; letter-spacing:.1em; }

.settings-item { display:flex; align-items:center; gap:var(--sp-md); padding:var(--sp-md); cursor:pointer; transition:background var(--fast); }
.settings-item:hover { background:var(--c-hover); }

.settings-item-icon {
  width:40px; height:40px; border-radius:var(--r-sm);
  background:var(--grad-subtle); border:1px solid var(--c-line-mid);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  /* Texture brillante interne */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.settings-item-icon svg { width:17px; height:17px; stroke:var(--c-link); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.settings-item-info { flex:1; }
.settings-item-label { font-weight:600; font-size:.9375rem; }
.settings-item-desc  { font-size:.8125rem; color:var(--c-text-mute); margin-top:1px; }
.settings-item-arrow { width:14px; height:14px; stroke:var(--c-text-mute); fill:none; stroke-width:2; }

.settings-item--danger .settings-item-label { color:var(--c-danger); }
.settings-item--danger .settings-item-icon { background:rgba(255,107,107,.08); border-color:rgba(255,107,107,.2); }
.settings-item--danger .settings-item-icon svg { stroke:var(--c-danger); }

/* Toggle */
.toggle { position:relative; width:44px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--c-elevated); border:1.5px solid var(--c-line-mid); border-radius:var(--r-full); cursor:pointer; transition:all var(--fast); }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--c-text-mute); top:2px; left:2px; transition:transform var(--fast), background var(--fast); }
.toggle input:checked + .toggle-slider { background:var(--grad-vivid); border-color:transparent; box-shadow:0 0 10px rgba(76,110,245,.35); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); background:#fff; }
.toggle-wrap { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-md); }

/* ── 15. Modales & Overlay ────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(3,3,10,.8); backdrop-filter:blur(10px); z-index:300; align-items:flex-end; justify-content:center; }
.modal-overlay.active { display:flex; }

.modal {
  width:100%; max-width:560px;
  background:var(--c-card);
  border-top:1px solid var(--c-line-mid);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--sp-lg);
  animation:slideUp 230ms var(--ease);
  max-height:92dvh; overflow-y:auto;
  /* Bordure lumineuse */
  box-shadow:0 -1px 0 rgba(76,110,245,.15), inset 0 1px 0 rgba(255,255,255,.04);
}

@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

.modal-handle { width:32px; height:3px; background:var(--c-line-mid); border-radius:99px; margin:0 auto var(--sp-md); }
.modal-title { font-size:1.0625rem; font-weight:800; margin-bottom:var(--sp-lg); text-align:center; }

/* Composer */
.compose-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-md); }
.compose-body { display:flex; gap:var(--sp-sm); }
.compose-textarea { flex:1; background:none; border:none; color:var(--c-text); font-size:1rem; line-height:1.65; resize:none; min-height:80px; max-height:300px; }
.compose-textarea::placeholder { color:var(--c-text-mute); }
.compose-textarea:focus { outline:none; }
.compose-footer { display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-md); padding-top:var(--sp-md); border-top:1px solid var(--c-line); }
.compose-tools { display:flex; gap:4px; }
.compose-tool { width:35px; height:35px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--c-link); transition:background var(--fast); }
.compose-tool:hover { background:rgba(116,192,252,.12); }
.compose-tool svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* Toast */
.toast-container { position:fixed; bottom:calc(var(--nav-h) + var(--sp-md)); left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:var(--sp-sm); align-items:center; pointer-events:none; }

.toast {
  background:var(--c-elevated);
  border:1px solid var(--c-line-mid);
  color:var(--c-text); padding:9px var(--sp-lg);
  border-radius:var(--r-full); font-size:.875rem; font-weight:600;
  box-shadow:var(--shadow-lg); white-space:nowrap;
  animation:toastIn 250ms var(--ease), toastOut 250ms var(--ease) 2.5s forwards;
  backdrop-filter:blur(16px);
}
.toast--success { border-color:rgba(81,207,102,.3); color:var(--c-success); }
.toast--error   { border-color:rgba(255,107,107,.3); color:var(--c-danger); }

@keyframes toastIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { to{opacity:0;transform:translateY(-6px)} }

/* Alerts */
.alert { padding:var(--sp-sm) var(--sp-md); border-radius:var(--r-sm); font-size:.875rem; margin-bottom:var(--sp-md); border:1px solid transparent; }
.alert--error   { background:rgba(255,107,107,.07); border-color:rgba(255,107,107,.2); color:var(--c-danger); }
.alert--success { background:rgba(81,207,102,.07);  border-color:rgba(81,207,102,.2);  color:var(--c-success); }
.alert--info    { background:var(--grad-subtle);     border-color:var(--c-line-mid);    color:var(--c-link); }

/* ── 16. Pages Auth ───────────────────────────────────────── */
.auth-page {
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:var(--sp-lg);
  background:radial-gradient(ellipse 80% 60% at 50% -5%, rgba(76,110,245,.2) 0%, transparent 65%);
}

.auth-logo {
  font-size:2.5rem; font-weight:900; letter-spacing:-.06em; margin-bottom:var(--sp-xl);
  background:var(--grad-vivid);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.auth-card {
  width:100%; max-width:400px;
  background:var(--c-card);
  border:1px solid var(--c-line-mid);
  border-radius:var(--r-xl); padding:var(--sp-xl);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.04);
}

.auth-title    { font-size:1.375rem; font-weight:900; margin-bottom:var(--sp-xs); letter-spacing:-.03em; }
.auth-subtitle { font-size:.9rem; color:var(--c-text-mute); margin-bottom:var(--sp-xl); }
.auth-footer   { text-align:center; margin-top:var(--sp-lg); font-size:.875rem; color:var(--c-text-mute); }
.auth-footer a { background:var(--grad-vivid); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700; }

/* ── 17. Pages légales ────────────────────────────────────── */
.legal-page { padding:var(--sp-md); max-width:700px; margin:0 auto; }
.legal-page h1 { font-size:1.375rem; margin-bottom:var(--sp-xs); }
.legal-date { font-size:.8125rem; color:var(--c-text-mute); margin-bottom:var(--sp-xl); }
.legal-page h2 { font-size:1rem; margin-top:var(--sp-xl); margin-bottom:var(--sp-sm); }
.legal-page p  { font-size:.9375rem; line-height:1.75; color:var(--c-text-dim); margin-bottom:var(--sp-md); }
.legal-page ul { list-style:disc; padding-left:var(--sp-lg); margin-bottom:var(--sp-md); }
.legal-page li { font-size:.9375rem; line-height:1.75; color:var(--c-text-dim); margin-bottom:var(--sp-xs); }
.legal-page a  { color:var(--c-link); }

/* ── 18. Animations ───────────────────────────────────────── */
@keyframes fadeIn {
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

/* ── 19. Desktop Sidebar ──────────────────────────────────── */
@media (min-width:768px) {
  body { padding-bottom:0; }
  #bottom-nav { display:none; }
  #scroll-top-btn { bottom:24px !important; right:24px !important; }

  #sidebar {
    display:flex; flex-direction:column;
    width:var(--sidebar-w); height:100dvh;
    position:sticky; top:0;
    border-right:1px solid var(--c-line);
    padding:var(--sp-lg) var(--sp-md);
    gap:2px; flex-shrink:0;
    background:rgba(6,6,15,.92);
    backdrop-filter:blur(28px) saturate(180%);
  }

  .sidebar-logo {
    font-size:1.375rem; font-weight:900; letter-spacing:-.05em;
    padding:var(--sp-sm) var(--sp-sm) var(--sp-md);
    background:var(--grad-vivid);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    cursor:pointer;
  }

  .sidebar-nav-item {
    display:flex; align-items:center; gap:var(--sp-md);
    padding:10px var(--sp-md);
    border-radius:var(--r-md);
    cursor:pointer; transition:all var(--fast) var(--ease);
    color:var(--c-text-mute); font-size:.9375rem; font-weight:500;
    background:none; border:none; width:100%; text-align:left;
    position:relative;
  }
  .sidebar-nav-item:hover {
    background:var(--c-hover); color:var(--c-text);
  }
  .sidebar-nav-item.active {
    font-weight:700; color:var(--c-text);
    background:var(--grad-subtle);
    border:1px solid var(--c-line-mid);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }
  .sidebar-nav-item.active svg {
    filter:drop-shadow(0 0 4px rgba(76,110,245,.5));
  }
  .sidebar-nav-item svg {
    width:20px; height:20px; stroke:currentColor; fill:none;
    stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
    transition:filter var(--fast);
  }

  .sidebar-post-btn {
    margin-top:var(--sp-sm); width:100%;
    background:var(--grad-cool);
    color:#fff; font-weight:700;
    border-radius:var(--r-md);
    padding:11px var(--sp-md);
    box-shadow:var(--shadow-btn);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:var(--sp-sm);
    font-size:.9375rem;
    transition:all var(--fast);
    position:relative; overflow:hidden;
  }
  .sidebar-post-btn::before {
    content:''; position:absolute; top:0; left:0; right:0; height:50%;
    background:linear-gradient(to bottom, rgba(255,255,255,.1), transparent);
    border-radius:var(--r-md) var(--r-md) 0 0; pointer-events:none;
  }
  .sidebar-post-btn:hover { box-shadow:var(--shadow-btn-hover); transform:translateY(-1px); }
  .sidebar-post-btn svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.5; }

  .sidebar-spacer { flex:1; }

  .sidebar-user {
    display:flex; align-items:center; gap:var(--sp-sm);
    padding:var(--sp-sm); border-radius:var(--r-md);
    cursor:pointer; transition:background var(--fast);
  }
  .sidebar-user:hover { background:var(--c-hover); }
  .sidebar-user-avatar { width:36px; height:36px; border-radius:var(--r-full); object-fit:cover; background:var(--c-elevated); flex-shrink:0; border:1.5px solid var(--c-line); }
  .sidebar-user-name   { font-weight:700; font-size:.875rem; }
  .sidebar-user-handle { font-size:.75rem; color:var(--c-text-mute); }
  .sidebar-user-info   { min-width:0; }

  #app { max-width:1200px; margin:0 auto; }
  #main-content { max-width:var(--content-w); border-right:1px solid var(--c-line); }
  .fab { display:none; }
  .modal-overlay { align-items:center; }
  .modal { border-radius:var(--r-xl); border:1px solid var(--c-line-mid); box-shadow:var(--shadow-lg); }
  .toast-container { bottom:var(--sp-lg); }
  .profile-banner { height:220px; }
}

@media (min-width:1024px) { #app { gap:0; } }

/* ── 20. Utilitaires ──────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.divider { border:none; border-top:1px solid var(--c-line); margin:var(--sp-md) 0; }
.flex    { display:flex; }
.flex-col{ flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-sm  { gap:var(--sp-sm); }
.gap-md  { gap:var(--sp-md); }
.p-md    { padding:var(--sp-md); }
.mb-md   { margin-bottom:var(--sp-md); }
.mt-md   { margin-top:var(--sp-md); }
.w-full  { width:100%; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Popover affiliation */
.affil-popover { filter:drop-shadow(0 8px 24px rgba(0,0,0,.8)); }