/* Unible · la DA de l'appli : noir profond, une seule lumière (lilas), les orbes, du verre pour la navigation seulement. */
:root {
  --noir: #050507;
  --carte: #121215;
  --texte: #f2f2f7;
  --secondaire: rgba(235, 235, 245, .62);
  --tertiaire: rgba(235, 235, 245, .32);
  --lumiere: #b9a8ff;
  --lumiere-forte: #8b5cf6;
}
* { box-sizing: border-box; }
html { background: var(--noir); }
body {
  margin: 0; color: var(--texte); background: var(--noir);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
/* La lumière unique de l'écran, derrière tout. */
body::before {
  content: ""; position: fixed; inset: -20vh -20vw auto; height: 90vh; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 30%, rgba(185, 168, 255, .22), rgba(139, 92, 246, .08) 45%, transparent 75%);
}
a { color: var(--lumiere); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navigation : la seule couche en verre. */
.nav {
  position: sticky; top: 14px; z-index: 10; margin: 14px auto 0; width: min(680px, calc(100% - 28px));
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .18),
              inset 1px 0 1px rgba(255, 255, 255, .12), inset -1px 0 1px rgba(255, 255, 255, .12);
}
.nav img { width: 30px; height: 30px; }
.nav .marque { font-weight: 600; color: var(--texte); margin-right: auto; }
.nav a.lien { color: var(--secondaire); font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav a.lien:hover, .nav a.lien[aria-current] { color: var(--texte); background: rgba(255, 255, 255, .08); text-decoration: none; }

main { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 72px; }

/* Accueil */
.hero { text-align: center; padding: 28px 0 8px; }
.hero .orbe { width: 132px; height: 132px; filter: drop-shadow(0 0 36px rgba(185, 168, 255, .35)); animation: respire 6s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .hero .orbe { animation: none; } }
h1 { font-size: 34px; line-height: 41px; font-weight: 400; letter-spacing: -.02em; margin: 18px 0 8px; }
.sous-titre { color: var(--secondaire); font-size: 19px; margin: 0 auto; max-width: 30em; }
.trio { margin: 36px -20px 8px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8; }
.trio img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contenu : opaque, jamais de verre. */
.carte { background: var(--carte); border-radius: 22px; padding: 22px 24px; margin-top: 14px; }
.carte h2 { font-size: 20px; line-height: 25px; font-weight: 600; margin: 0 0 8px; }
.carte p, .carte li { color: var(--secondaire); margin: 6px 0; }
.carte ul { padding-left: 1.1em; margin: 6px 0; }
.etiquette { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lumiere); }
.date { color: var(--tertiaire); font-size: 15px; margin: 0 0 6px; }
.langue { margin-top: 36px; }

footer { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 40px; color: var(--tertiaire); font-size: 14px;
         display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: var(--secondaire); }