/* ============================================================
   Klarrro — chrome du site vitrine (header + footer)
   Ces regles vivaient uniquement en inline dans index.html, si
   bien que toute autre page reprenant le markup du header se
   retrouvait avec une nav non stylee (cas de agenda.html).
   Complete index.css (nav-links, nav-right, footer, .r-grr).
   ============================================================ */

/* Reset des liens, comme dans le critical CSS d'index.html : tout le
   chrome (logo, nav, footer) suppose des <a> sans soulignement. */
a { color: inherit; text-decoration: none; }

/* ══ HEADER ══════════════════════════════════════════════════ */
/* color-mix plutot qu'un rgba(9,9,14,...) fige : le header suit
   le theme clair sans override dedie. */
.sticky-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.topbar {
  background: linear-gradient(90deg,
    rgba(224,82,122,.14) 0%,
    color-mix(in srgb, var(--bg) 97%, transparent) 42%,
    color-mix(in srgb, var(--bg) 97%, transparent) 58%,
    rgba(248,191,69,.10) 100%);
  border-bottom: 1px solid rgba(224,82,122,.15);
  padding: .45rem 1rem;
}
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: .55rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.topbar-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 700; color: var(--green); letter-spacing: .5px; text-transform: uppercase; }
.topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.topbar-sep { color: var(--muted); font-size: .62rem; }
.topbar-msg { font-size: .72rem; color: var(--muted2); }
.topbar-badge { font-size: .62rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--accent-light); border: 1px solid rgba(224,82,122,.35); border-radius: 99px; padding: .12rem .5rem; }

nav.pnav {
  position: relative;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: .7rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Logo : Kla + rrr roses animes + o. Le O n'est jamais rose. */
.nb { display: flex; align-items: center; gap: .55rem; }
.nb .ni {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 4px 14px rgba(224,82,122,.4);
}
.nb .ni img { width: 20px; height: 20px; object-fit: contain; }
.nb .nn { font-family: 'Playfair Display', Georgia, serif; font-size: 1.28rem; font-weight: 800; letter-spacing: -.5px; color: var(--text); }
.nb .nn .r-grr { color: var(--accent-light); }

/* Page courante : index.css ne definit d'etat actif que pour pro.css (gold). */
.nav-links a.active,
.nav-mobile-menu a.active { color: var(--accent-light); font-weight: 700; }

/* Mobile-first : la nav complete apparait en >=768px via index.css */
.nav-links, .nav-right { display: none; }

.nav-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: none; border-radius: 10px; cursor: pointer;
}
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Bouton de fermeture du menu mobile (index.css stylise les <a> du menu,
   pas la croix, qui heriterait de la bordure des liens). */
.nav-mobile-menu .mm-close {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 99px;
  background: rgba(127,127,160,.12);
  color: var(--text); cursor: pointer;
}
.nav-mobile-menu .mm-close svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .nav-burger span { transition: none; }
}

/* ══ FOOTER ══════════════════════════════════════════════════
   index.css couvre .footer/.footer-links/.footer-copy ; le slogan
   n'existait qu'en inline dans index.html. */
.footer-slogan {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 1.15rem; line-height: 1.25;
  letter-spacing: .2px; text-align: center;
  color: var(--text);
  margin: .1rem auto 1rem;
}
.footer-slogan .sl-acc { color: var(--accent-light); }
.footer-brand-icon svg { width: 20px; height: 20px; display: block; }
.footer-copy a { color: var(--accent-light); }
.footer-copy a:hover { text-decoration: underline; }