/* ===========================================================================
   chachi — thème sobre synthwave (dérivé de quark2), assorti à chachitech.fr.
   Même identité : violet-nuit, accent violet, Space Grotesk + Major Mono Display.
   Sobre : pas de grille animée, pas de scanlines, glows minimaux, dégradés retenus.
   Tout passe par les variables CSS de quark2 (Pico) -> aucun !important, aucun
   template touché à part le logo.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Palette forcée en sombre quel que soit le mode (l'identité est dark-only).
   On cible aussi [data-theme="dark"] car quark2 y met une spécificité plus forte. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --q2-bg: #0b0716;          /* fond : violet-nuit */
  --q2-bg-elev: #150e2b;     /* surfaces / cartes */
  --q2-bg-muted: #1d1440;    /* creux / hover */
  --q2-bg-inverse: #f3effb;

  --q2-text: #e8e2f6;        /* texte lavande clair */
  --q2-text-strong: #ffffff;
  --q2-text-muted: #9d92c4;  /* texte discret */
  --q2-text-inverse: #12091f;

  --q2-border-ring: rgba(163, 112, 255, 0.16);   /* bordures teintées violet */
  --q2-border-strong: rgba(163, 112, 255, 0.28);
  --q2-divider: rgba(255, 255, 255, 0.08);

  --q2-nav-bg: rgba(11, 7, 22, 0.72);            /* nav en verre sombre */
  --q2-nav-border: rgba(163, 112, 255, 0.14);

  /* ombres adoucies (sobre) */
  --q2-shadow-card: rgba(0,0,0,0.5) 0 6px 20px -12px, rgba(163,112,255,0.10) 0 0 0 1px;
  --q2-shadow-raised: rgba(0,0,0,0.55) 0 12px 30px -14px, rgba(163,112,255,0.12) 0 0 0 1px;
  --q2-shadow-dropdown: rgba(0,0,0,0.6) 0 16px 32px -12px, rgba(163,112,255,0.12) 0 0 0 1px;

  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-muted-color: var(--q2-text-muted);
  --pico-card-background-color: var(--q2-bg-elev);

  /* polices, comme chachitech.fr */
  --pico-font-family-sans-serif: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --pico-font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Ciel synthwave STATIQUE et discret (aucune animation, aucun scanline) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% -8%, rgba(163, 112, 255, 0.14), transparent 60%),
    radial-gradient(55% 45% at 92% 4%, rgba(77, 212, 255, 0.07), transparent 60%);
}

body { font-family: var(--pico-font-family-sans-serif); }

/* Titres sobres : Space Grotesk, pleine couleur, pas de dégradé ni de glow */
h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--q2-text-strong);
  letter-spacing: -0.01em;
  font-weight: 600;
}

/* Signature discrète : le titre de l'article en Major Mono Display */
article h1,
.content > h1:first-child {
  font-family: 'Major Mono Display', monospace;
  font-weight: 400;
  letter-spacing: 0;
}

/* Marque / logo texte (rendu par notre logo.html.twig) */
.brand-text {
  font-family: 'Major Mono Display', monospace;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--q2-text-strong);
}
.brand-text:hover { color: var(--q2-accent, #a370ff); }

/* Liens : accent violet (injecté via accent-color), survol sobre */
a { text-underline-offset: 2px; }
a:hover { color: var(--q2-text-strong); }

/* Surfaces arrondies et discrètes */
article, .card, .content {
  border-radius: 16px;
}
.content img, article img { border-radius: 12px; }

/* Code : sombre, bordure violette discrète */
pre {
  background: #120a26;
  border: 1px solid var(--q2-border-ring);
  border-radius: 12px;
}
:not(pre) > code {
  background: #1a1136;
  color: #d9c7ff;
  border-radius: 6px;
  padding: 0.1em 0.4em;
}

/* Filets / séparateurs discrets */
hr { border-color: var(--q2-divider); }

/* ---- Bannière profil (en-tête du blog) ---- */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1.5rem 0 2.75rem;
  flex-wrap: wrap;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--q2-border-strong);
  flex-shrink: 0;
}
.profile-meta { display: flex; flex-direction: column; gap: 0.55rem; }
.profile-tagline {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--q2-text-strong);
  margin: 0;
}
.profile-socials { display: flex; gap: 1rem; font-size: 1.4rem; }
.profile-socials a { color: var(--q2-text-muted); line-height: 1; text-decoration: none; border-bottom: 0; }
.profile-socials a:hover { color: var(--q2-accent, #a370ff); }
/* icône SVG (Printables) alignée sur les icônes FontAwesome */
.profile-socials a svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }