@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Share+Tech+Mono&family=Space+Grotesk:wght@500;700&family=Poppins:wght@500;700&family=Playfair+Display:wght@600;700&family=Sora:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Righteous&family=Orbitron:wght@500;700;900&family=Caveat:wght@600;700&family=Press+Start+2P&family=Bebas+Neue&family=Permanent+Marker&display=swap');

/* Dissuasion complémentaire à protect.js : empêche la sélection de texte et
   le glisser-déposer d'images par défaut. Réactivé explicitement pour les
   champs de formulaire (sinon impossible de saisir/corriger du texte). */
html, body{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"]{
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
img{
  -webkit-user-drag: none;
  user-drag: none;
}

:root{
  --bg: #0A0714;
  --surface: rgba(255,255,255,0.04);
  --surface-solid: #170F26;
  --line: rgba(255,255,255,0.09);
  --text: #F5F5F8;
  --muted: #86869C;
  --accent: #A855F7;
  --accent-2: #7C3AED;
  --avatar-accent: #A855F7;
  --avatar-accent-2: #7C3AED;
  --name-color: #A855F7;
  --badge-color-a: #C084FC;
  --badge-color-b: #6D28D9;
  --profile-font: 'Bangers', cursive;
  --bio-font: 'Sora', sans-serif;
  --entry-font: 'Share Tech Mono', monospace;
  --danger: #FF5C7A;
  --green: #3BA55D;
  --green-glow: #57F287;

  /* ---- Editor "chrome" brand system (guns.lol-inspired, tool UI only —
     never used for the user's own page theme, which stays on --accent /
     --avatar-accent / --name-color etc. above so custom pages are untouched) ---- */
  --br-1: #C084FC;     /* lavande  */
  --br-2: #A855F7;     /* violet   */
  --br-3: #7C3AED;     /* pourpre  */
  --br-grad: linear-gradient(115deg, var(--br-1), var(--br-2) 55%, var(--br-3));
  --br-grad-soft: linear-gradient(115deg, rgba(192,132,252,.16), rgba(168,85,247,.16) 55%, rgba(124,58,237,.16));
  --glass: rgba(255,255,255,.045);
  --glass-hover: rgba(255,255,255,.075);
  --glass-strong: rgba(20,20,26,.65);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --shadow-sm: 0 6px 18px -8px rgba(0,0,0,.45);
  --shadow-md: 0 16px 40px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.65);
  --head-font: 'Space Grotesk', 'Sora', sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; color-scheme: dark; }
body{ background: var(--bg); color: var(--text); font-family:'Sora',sans-serif; min-height:100vh; overflow-x:hidden; }
button{ font-family:inherit; }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* Dissuasion basique : empêche la sélection de texte et le glisser-déposer
   d'images partout, SAUF dans les champs de formulaire (sinon impossible
   d'y saisir/sélectionner du texte). Ne bloque pas un utilisateur motivé
   (DevTools, désactivation de JS, etc.) — voir protect.js. */
body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, [contenteditable="true"]{ -webkit-user-select:text; -moz-user-select:text; user-select:text; -webkit-touch-callout:default; }
img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
img.upload-preview-sm, img.badge-img{ pointer-events:auto; }

.icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; flex-shrink:0; }
.icon.filled{ fill:currentColor; }

/* petit lien vers l'accueil, réutilisé sur toutes les pages */
.top-brand{ position:fixed; top:22px; left:26px; display:flex; align-items:center; gap:10px; text-decoration:none; z-index:20; }
.top-brand .mark{ width:32px; height:32px; border-radius:10px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#0A0714; flex-shrink:0; }
.top-brand .lbl{ font-weight:800; font-size:14.5px; color:var(--text); letter-spacing:-.01em; }
.mark img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

#particleLayer{ position:fixed; inset:0; pointer-events:none; z-index:9998; overflow:hidden; }
.particle{ position:absolute; border-radius:50%; pointer-events:none; animation: floatUp .9s ease-out forwards; }
@keyframes floatUp{ 0%{ transform: translate(0,0) scale(1); opacity:.9; } 100%{ transform: translate(var(--dx), -46px) scale(0); opacity:0; } }

/* Styles de particules alternatifs (Premium, voir onglet Design > Particules
   et spawnParticle() dans site-helpers.js). "Dots" (ci-dessus, .particle)
   reste le style par défaut/gratuit. */
.particle-snow{ position:absolute; border-radius:50%; pointer-events:none; animation: floatDown 1.7s ease-in forwards; }
@keyframes floatDown{ 0%{ transform: translate(0,0) scale(1); opacity:.9; } 100%{ transform: translate(var(--dx), 64px) scale(.5); opacity:0; } }

.particle-star{ position:absolute; pointer-events:none; border-radius:2px; animation: shootStar .7s ease-out forwards; }
@keyframes shootStar{ 0%{ transform: translate(0,0) rotate(35deg) scaleX(1); opacity:1; } 100%{ transform: translate(var(--dx), var(--dy)) rotate(35deg) scaleX(.2); opacity:0; } }

.particle-bubble{ position:absolute; border-radius:50%; pointer-events:none; animation: floatBubble 1.5s ease-out forwards; }
@keyframes floatBubble{ 0%{ transform: translate(0,0) scale(.6); opacity:.85; } 70%{ opacity:.6; } 100%{ transform: translate(var(--dx), -54px) scale(1.35); opacity:0; } }

.particle-confetti{ position:absolute; border-radius:1px; pointer-events:none; animation: confettiFall 1.3s cubic-bezier(.25,.75,.5,1) forwards; }
@keyframes confettiFall{ 0%{ transform: translate(0,0) rotate(0deg); opacity:1; } 100%{ transform: translate(var(--dx), 70px) rotate(var(--rot)); opacity:0; } }

.particle-heart{ position:absolute; pointer-events:none; line-height:1; animation: heartFloat 1.4s ease-out forwards; }
@keyframes heartFloat{ 0%{ transform: translate(0,0) scale(.7); opacity:.95; } 40%{ transform: translate(calc(var(--dx) * .5), -22px) scale(1.15); } 100%{ transform: translate(var(--dx), -58px) scale(.9); opacity:0; } }

#pageTransition{ position:fixed; inset:0; z-index:99999; background: var(--bg); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; transition: opacity .25s ease; }
#pageTransition.active{ opacity:1; visibility:visible; pointer-events:all; }
#pageTransition .loader{ width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color: var(--accent); animation: spinLoader .7s linear infinite; }
@keyframes spinLoader{ to{ transform: rotate(360deg); } }

/* ---- Global scrollbar + subtle grain, shared across every page ---- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--br-1), var(--br-2)); border-radius:10px; border:2px solid var(--bg); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--br-2), var(--br-3)); background-clip:padding-box; }
*{ scrollbar-width: thin; scrollbar-color: var(--br-2) transparent; }

body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}