*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: 400 16px/1.6 var(--font-body); min-height: 100vh;
  background: radial-gradient(1100px 560px at 85% -10%, rgba(212, 48, 111, .2), transparent 60%),
              radial-gradient(900px 520px at -10% 25%, rgba(241, 195, 205, .08), transparent 60%), var(--bg);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: .01em; }
h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
h2 { font-size: 1.55rem; margin-top: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 .8rem; max-width: 68ch; }
a { color: var(--rose); }
.muted { color: var(--muted); } .small { font-size: .86rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; z-index: 99; background: var(--gold); color: #000; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.icon { width: 22px; height: 22px; flex: none; }

/* Mise en page : tabbar sur mobile, barre latérale sur ordinateur (mêmes 4 espaces) */
.shell { min-height: 100vh; }
.sidebar { display: none; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: env(safe-area-inset-top) 16px 0; background: rgba(11, 7, 9, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar__brand { font-family: var(--font-title); letter-spacing: .28em; color: var(--rose); margin-right: auto; font-size: .95rem; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); color: var(--text); text-decoration: none; }
.back[hidden] { display: none; }
#view { padding: 20px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; outline: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(14, 8, 11, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabbar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tabbar-h); color: var(--muted); text-decoration: none; font-size: .72rem; }
.tabbar__link[aria-current='page'] { color: var(--rose); }
.tabbar__link[aria-current='page'] .icon { color: var(--gold); }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 260px 1fr; }
  .sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 28px 18px; border-right: 1px solid var(--line); background: rgba(11, 7, 9, .6); }
  .brand { font-family: var(--font-title); font-size: 1.6rem; letter-spacing: .3em; color: var(--rose); margin: 0 0 28px 10px; }
  .nav { display: flex; flex-direction: column; gap: 4px; }
  .nav__link { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 14px; border-radius: 14px; color: var(--muted); text-decoration: none; }
  .nav__link:hover { background: var(--card); color: var(--text); }
  .nav__link[aria-current='page'] { background: var(--card2); color: var(--rose); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .sidebar__foot { margin-top: auto; font-size: .85rem; color: var(--gold); padding-left: 10px; }
  .tabbar { display: none; }
  .topbar { padding-left: 32px; } .topbar__brand { display: none; } .topbar .badge { margin-left: auto; }
  #view { max-width: 1020px; padding: 32px 40px 60px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Règle fiable : un élément portant l'attribut hidden n'est JAMAIS affiché, même si une classe lui donne un display. */
[hidden] { display: none !important; }