:root {
  --bg: #1b1540;
  --fg: #f4f4f5;
  --muted: #a3a3b3;
  --card: #15132a;
  --accent: #8b5cf6;
  --accent-2: #f472b6;
  --ring: #312e81;
}

html:not(.light) body {
  background:
    radial-gradient(900px 600px at -10% 20%, rgba(139,92,246,0.08), transparent 70%),
    radial-gradient(1000px 700px at 120% 110%, rgba(49,46,129,0.10), transparent 75%),
    var(--bg);
}

/* Mode clair quand html.light est présent */
html.light body {
  background:
    radial-gradient(1000px 600px at 50% 120%, rgba(244,114,182,0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(139,92,246,0.15), transparent 60%),
    var(--bg);
}
html.light {
  --bg: #f5f0ff;
  --fg: #0b0b0c;
  --muted: #4b5563;
  --card: #ffffff;
  --accent: #5b21b6;
  --accent-2: #db2777;
  --ring: #ddd8ff; 
}

html:not(.light) body.page-parutions {
  --card: #201c45;  
}

/* Utilisation des variables */

    * { box-sizing: border-box; }
    html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: var(--bg);  /* fallback neutre au cas où */
  color: var(--fg);
  line-height: 1.6;
}
    

    .container { max-width: 860px; margin: 0 auto; padding: 20px 20px 60px; }
    header { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 28px 0 4px; }
    .avatar {
      width: 88px; height: 88px; border-radius: 16px; overflow: hidden;
      border: 1px solid var(--ring); background: var(--card);
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    }
    .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .title { font-size: clamp(24px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; }
.card h3.title-sm {margin: 0; }
    .subtitle { color: var(--muted); font-size: clamp(14px, 2.2vw, 18px); margin-top: -6px; }

.links {
  display: flex;
  flex-wrap: wrap; gap: 16px; margin-top: 8px; align-items: center;
}

.links a {
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

.links a:hover,
.links a:focus-visible {
  color: var(--accent-2);
  text-decoration: underline;
}

.links a[aria-current="page"] {
  color: var(--accent);       /* ton violet d’accent */
  text-decoration: underline;
}

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 14px; border-radius: 999px; border: 1px solid var(--ring);
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      color: var(--fg); text-decoration: none; font-weight: 600; font-size: 14px;
      transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(139,92,246,0.28); }
    .btn--primary { border-color: rgba(139,92,246,.55); background: linear-gradient(180deg, rgba(139,92,246,.3), rgba(139,92,246,.18)); }

    section { margin-top: 28px; }
    h2 { font-size: clamp(18px, 3vw, 22px); margin: 0 0 12px; letter-spacing: .2px; }

    .grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    .card {
      position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), var(--card);
      border: 1px solid var(--ring); border-radius: 16px; padding: 14px; overflow: hidden;
    }
    .cover { width: 100%; aspect-ratio: 3/4; border-radius: 10px; background: #1c1c2e; border: 1px solid var(--ring); object-fit: cover; }
    .meta { margin-top: 10px; }
    .title-sm { font-weight: 700; letter-spacing: .2px; }
    .muted { color: var(--muted); font-size: 15px; }
    .card a { color: inherit; text-decoration: none; }
    .card a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 8px; }

    .bio { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)), var(--card); border: 1px solid var(--ring); border-radius: 16px; padding: 18px; }

    footer { margin-top: 36px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
    .social { display: flex; gap: 10px; }

    /* Impression */
    @media print {
      body { background: #fff; color: #111; }
      .btn { display: none; }
      .card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }