/* ─────────────────────────────────────────────
   CSS partagé par les 4 pages du module Réseau
   (reseau.html, reseau-profil.html,
   reseau-notifications.html, reseau-chat.html) —
   extrait de ce qui était dupliqué à l'identique
   dans chacune (coquille de page, switcher de
   compte, cadre d'avatar, panneaux latéraux, chrome
   de modale). Voir assets/js/reseau-shared.js pour
   le JS correspondant et pour l'explication de
   cette exception à la convention "page autonome"
   du reste du site.

   À charger dans <head>, après le lien Google Fonts
   et AVANT le <style> propre de chaque page (pour
   que les variantes de taille d'avatar par page,
   ex. .rp-comment .rp-avatar, restent lisibles dans
   l'ordre — même si leur spécificité suffirait de
   toute façon à l'emporter sur la règle de base
   .rp-avatar ci-dessous). */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
body{
  background:#000; color:#e7e9ea; font-family:'Aldrich',sans-serif;
  min-height:100vh;
}

/* margin-top négatif : annule body{padding-top:4.5rem} (réservé au
   hamburger + bouton Réseau fixes en haut à gauche, voir sidebar.css)
   spécifiquement pour cette colonne — elle est bien plus à droite que ces
   boutons, elle n'a jamais besoin de ce dégagement. Sans ça il y avait un
   vide inutile en haut de la colonne centrale. */
.rp-app{
  width:100%; max-width:600px; margin:-4.5rem auto 0;
  border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08);
  min-height:100vh;
}
body{ padding-top:4.5rem; }

/* Hauteur fixe (référence : Accueil, ~3.25rem) partagée par toutes les
   pages du Réseau — la barre du haut ne doit jamais changer de taille en
   changeant de page. */
.rp-topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:0.8rem;
  height:3.25rem; box-sizing:border-box;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(10px);
  padding:0 1.2rem; border-bottom:1px solid rgba(255,255,255,0.08);
}
.rp-topbar h1{ font-family:'Audiowide',sans-serif; font-size:1.05rem; letter-spacing:0.03em; color:#f9f9f9; }

.rp-layout{
  display:flex; justify-content:center; gap:1.6rem;
  max-width:1280px; margin:0 auto; padding:0 1rem;
}
.rp-leftnav{
  width:220px; flex-shrink:0; position:sticky; top:4.5rem; align-self:flex-start;
  display:flex; flex-direction:column; gap:0.2rem; padding-top:0.5rem;
  min-height:calc(100vh - 4.5rem);
  padding-bottom:1rem;
}
.rp-nav-item{
  display:flex; align-items:center; gap:1rem; padding:0.7rem 1rem; border-radius:999px;
  color:#e7e9ea; text-decoration:none; font-family:'Aldrich',sans-serif; font-size:1rem;
  transition:background 0.15s ease;
}
.rp-nav-item svg{ width:1.4em; height:1.4em; flex-shrink:0; }
.rp-nav-item:hover{ background:rgba(255,255,255,0.08); }
.rp-nav-item.rp-active{ color:#30efc9; }
.rp-nav-item.rp-active svg{ filter:drop-shadow(0 0 6px rgba(48,239,201,0.5)); }
.rp-nav-item.rp-soon{ color:rgba(231,233,234,0.4); cursor:default; }
.rp-soon-tag{
  margin-left:auto; font-family:'Share Tech Mono',monospace; font-size:0.56rem; text-transform:uppercase;
  color:rgba(48,239,201,0.55); border:1px solid rgba(48,239,201,0.25); border-radius:999px;
  padding:0.1rem 0.4rem; white-space:nowrap;
}
.rp-nav-badge{
  margin-left:auto; width:8px; height:8px; border-radius:50%; background:#ff5c5c; flex-shrink:0;
}

.rp-account-switcher{ margin-top:auto; padding-top:0.6rem; border-top:1px solid rgba(255,255,255,0.08); position:relative; }
.rp-account-btn{
  display:flex; align-items:center; gap:0.6rem; width:100%; padding:0.5rem 0.6rem; border-radius:999px;
  background:transparent; border:none; cursor:pointer; text-align:left; color:#e7e9ea;
}
.rp-account-btn:hover{ background:rgba(255,255,255,0.08); }
.rp-account-btn .rp-avatar{ width:36px; height:36px; flex-shrink:0; }
.rp-account-info{ flex:1; min-width:0; }
.rp-account-name{ font-family:'Audiowide',sans-serif; font-size:0.78rem; color:#f0f0f0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-account-handle{ font-family:'Share Tech Mono',monospace; font-size:0.62rem; color:rgba(231,233,234,0.45); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-account-dots{ flex-shrink:0; opacity:0.55; }
.rp-account-panel{
  position:absolute; bottom:calc(100% + 0.4rem); left:0; width:250px;
  background:#15191e; border:1px solid rgba(255,255,255,0.1); border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4); padding:0.4rem; z-index:20;
  max-height:min(60vh, 420px); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(48,239,201,0.4) transparent;
}
.rp-account-panel::-webkit-scrollbar{ width:5px; }
.rp-account-panel::-webkit-scrollbar-track{ background:transparent; }
.rp-account-panel::-webkit-scrollbar-thumb{ background:rgba(48,239,201,0.4); border-radius:999px; }
.rp-account-panel::-webkit-scrollbar-thumb:hover{ background:rgba(48,239,201,0.65); }
.rp-account-row{ display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.6rem; border-radius:8px; cursor:pointer; }
.rp-account-row:hover{ background:rgba(255,255,255,0.06); }
.rp-account-row .rp-avatar{ width:32px; height:32px; flex-shrink:0; }
.rp-account-row.rp-account-active .rp-account-name{ color:#30efc9; }
.rp-account-row-add{ color:#30efc9; font-family:'Aldrich',sans-serif; font-size:0.82rem; }
.rp-account-check{ margin-left:auto; color:#30efc9; flex-shrink:0; }

/* .rp-avatar est un cadre (pas l'<img> lui-même) : object-fit:cover seul
   laisse toujours zéro marge de recadrage sur un des deux axes (celui où
   l'image "colle" exactement au cadre) — voir applyAvatarCropImg dans
   reseau-shared.js, qui calcule un cover+zoom en pixels à partir des
   dimensions réelles de l'image, seule façon de rendre le cadrage pan/zoom
   du profil visible ici. Les variantes de taille (.rp-comment .rp-avatar,
   .rp-follow-list-item .rp-avatar, etc.) restent définies dans chaque page,
   n'étant pas communes aux 4. */
.rp-avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  position:relative; overflow:hidden; display:inline-block; background:#14171b;
}
.rp-avatar img{ position:absolute; }

/* ── Gate "connecte-toi" ── */
.rp-gate{ text-align:center; padding:3rem 1.2rem; color:rgba(231,233,234,0.5); font-size:0.9rem; }
.rp-gate p{ margin-bottom:1rem; }
.auth-login-btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Audiowide',sans-serif; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  color:#0a0f16; background:#30efc9; border:none;
  padding:0.6rem 1.2rem; border-radius:999px; text-decoration:none;
  transition:box-shadow 0.2s ease;
}
.auth-login-btn:hover{ box-shadow:0 0 14px rgba(48,239,201,0.5); }

/* ── Colonne de droite (panneaux Nouvelles/Tendances/Suggestions) ── */
.rp-rightbar{
  width:300px; flex-shrink:0; position:sticky; top:4.5rem; align-self:flex-start;
  display:flex; flex-direction:column; gap:1rem; padding-top:0.5rem;
}
.rp-panel{
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:1rem 1.1rem;
}
.rp-panel h2{
  font-family:'Audiowide',sans-serif; font-size:0.88rem; letter-spacing:0.02em;
  margin-bottom:0.7rem; color:#f0f0f0;
}
.rp-panel-empty{ color:rgba(231,233,234,0.4); font-size:0.8rem; }
.rp-suggest-item{ display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0; }
.rp-suggest-item .rp-avatar{ width:34px; height:34px; }
.rp-suggest-name{ font-family:'Audiowide',sans-serif; font-size:0.78rem; color:#f0f0f0; }
.rp-suggest-tag{ font-family:'Share Tech Mono',monospace; font-size:0.6rem; color:rgba(48,239,201,0.55); text-transform:uppercase; }
.rp-suggest-info{ flex:1; min-width:0; }
.rp-suggest-view{
  flex-shrink:0; font-family:'Audiowide',sans-serif; font-size:0.62rem; text-transform:uppercase;
  color:#0a0f16; background:#e7e9ea; border-radius:999px; padding:0.35rem 0.75rem; text-decoration:none;
}
@media (max-width:1100px){ .rp-rightbar{ display:none; } }

/* ── Chrome générique de modale (le contenu/corps de chaque modale reste
   défini dans chaque page — voir reseau-shared.js, wireAccountSwitcher) ── */
.rp-modal-backdrop{
  position:fixed; inset:0; z-index:100010; background:rgba(0,0,0,0.65);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 1rem;
  overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(48,239,201,0.4) transparent;
}
.rp-modal-backdrop::-webkit-scrollbar{ width:5px; }
.rp-modal-backdrop::-webkit-scrollbar-track{ background:transparent; }
.rp-modal-backdrop::-webkit-scrollbar-thumb{ background:rgba(48,239,201,0.4); border-radius:999px; }
.rp-modal-backdrop::-webkit-scrollbar-thumb:hover{ background:rgba(48,239,201,0.65); }
.rp-modal{
  width:100%; max-width:600px; background:#000; border:1px solid rgba(255,255,255,0.15);
  border-radius:16px; overflow:hidden;
}
.rp-modal-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.8rem 1.1rem; border-bottom:1px solid rgba(255,255,255,0.1);
}
.rp-modal-header h2{ font-family:'Audiowide',sans-serif; font-size:0.95rem; color:#f9f9f9; }
.rp-modal-close{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:none; border:none; color:#e7e9ea; cursor:pointer; transition:background 0.15s ease;
}
.rp-modal-close:hover{ background:rgba(255,255,255,0.1); }
.rp-modal-close svg{ width:1.2em; height:1.2em; }
.rp-modal-save{
  font-family:'Audiowide',sans-serif; font-size:0.68rem; letter-spacing:0.03em; text-transform:uppercase;
  color:#0a0f16; background:#e7e9ea; border:none; border-radius:999px;
  padding:0.5rem 1.2rem; cursor:pointer; transition:opacity 0.15s ease;
}
.rp-modal-save:disabled{ opacity:0.5; cursor:not-allowed; }

@media (max-width:640px){ .rp-app{ border-left:none; border-right:none; } }
@media (max-width:760px){ .rp-leftnav{ display:none; } .rp-app{ margin:0 auto; } }
