/* Portail Raphiverse — mise en page propre à l'app.
   Couleurs, typo, rayons, ombres, boutons, badges, alertes et états viennent de /rv/raphiverse.css
   (jetons --rv-* et composants .rv-*). Ici: uniquement la composition et deux dimensions locales. */

:root {
  --portal-icon: 2.75rem;      /* diamètre d'une « planète » (pastille d'icône) */
  --portal-measure: 68ch;      /* largeur de lecture des annonces */
}

.portal { min-height: 100vh; position: relative; overflow-x: hidden; }
.portal > * { position: relative; z-index: 1; }
.portal > .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, var(--rv-ink-950) 20%, transparent 95%);
  mask-image: linear-gradient(to bottom, var(--rv-ink-950) 20%, transparent 95%); }

.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 1rem; height: 1rem; }

.skip { position: absolute; left: var(--rv-space-3); top: -4rem; z-index: 10; }
.skip:focus { top: var(--rv-space-3); }

/* Barre du haut */
.portal-top { background: transparent; border-bottom: 0; padding-inline: 0; }
.portal-top .rv-brand { font-size: var(--rv-text-lg); }
.portal-top .rv-mark { height: 2.5rem; width: 2.5rem; }
.portal-top__actions { display: flex; align-items: center; gap: var(--rv-space-3); flex-wrap: wrap; justify-content: flex-end; }
.portal-top form { margin: 0; }
.who { color: var(--rv-text-muted); font-size: var(--rv-text-sm); font-weight: 600; max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main.rv-container { display: grid; gap: var(--rv-space-7); padding-block: var(--rv-space-3) var(--rv-space-7); }

/* Bandeaux (alertes) */
.notices { display: grid; gap: var(--rv-space-3); }
.rv-alert { display: flex; gap: var(--rv-space-3); align-items: flex-start; }
.rv-alert .ico { margin-top: .15rem; color: var(--rv-status); }
.rv-alert p { margin: 0; }
.rv-alert a { font-weight: 700; }

/* Héros: texte à gauche, système orbital à droite */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: var(--rv-space-6); }
.hero .rv-h1 { max-width: 16ch; }
.hero__lead { font-size: var(--rv-text-lg); color: var(--rv-text-muted); max-width: 40ch; margin: 0 0 var(--rv-space-5); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-space-4); }
.hero .rv-btn { min-height: 3rem; padding-inline: var(--rv-space-5); font-size: var(--rv-text-md); }

.live { display: inline-flex; align-items: center; gap: var(--rv-space-2); color: var(--rv-text-muted);
  font-size: var(--rv-text-sm); font-weight: 600; margin: 0; min-height: 2rem; }
.live .rv-dot { color: var(--rv-text-faint); }
.live .rv-dot.on { color: var(--rv-ok); }
.live.is-error .rv-dot { color: var(--rv-warn); }
.live .rv-skeleton { width: 13rem; height: 1rem; }
.live .rv-btn { min-height: 2rem; padding-inline: var(--rv-space-3); font-size: var(--rv-text-xs); }

.system { margin: 0; justify-self: center; width: min(100%, 30rem); }
.system svg { display: block; width: 100%; height: auto; overflow: visible; }
.system .ring { fill: none; stroke: var(--rv-border); stroke-width: 1.5; }
.system .ring--ink { stroke: color-mix(in srgb, var(--rv-text) 30%, transparent); }
.system .world-dot { fill: var(--rv-text); }
.system .world-dot--accent { fill: var(--rv-orange-500); }
.system image { filter: none; }

/* Barre d'état */
.statusbar { display: flex; align-items: center; gap: var(--rv-space-4); flex-wrap: wrap;
  padding: var(--rv-space-4) var(--rv-space-5); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-lg);
  background: var(--rv-bg-raised); }
.statusbar .ico { color: var(--rv-info); width: 1.5rem; height: 1.5rem; }
.statusbar__text { flex: 1 1 18rem; min-width: 0; }
.statusbar__text h2 { font-size: var(--rv-text-md); font-weight: 700; margin: 0; }
.statusbar__text p { margin: 0; color: var(--rv-text-muted); font-size: var(--rv-text-sm); }

/* Annonce (aperçu) */
.notice-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-5); flex-wrap: wrap;
  padding: var(--rv-space-5); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-lg); background: var(--rv-surface); }
.notice-panel__body { flex: 1 1 22rem; }
.notice-panel h2, .notice-panel h3 { margin: 0 0 var(--rv-space-2); }
.notice-panel h3 { font-size: var(--rv-text-lg); letter-spacing: -.01em; }
.notice-panel p { margin: 0 0 var(--rv-space-2); color: var(--rv-text-muted); }
.meta { color: var(--rv-text-faint); font-size: var(--rv-text-sm); font-weight: 600; }
.more-link { margin: var(--rv-space-3) 0 0; font-size: var(--rv-text-sm); }

/* Royaumes: titre à gauche, liste de mondes à droite */
.realm { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--rv-space-6); align-items: start; }
.realm__head { position: sticky; top: var(--rv-space-5); display: grid; gap: var(--rv-space-3); }
.realm__head .rv-h2 { margin: 0; }
.realm__head p { margin: 0; color: var(--rv-text-muted); font-size: var(--rv-text-sm); }
.realm__rings { width: 4.5rem; height: 4.5rem; }
.realm__rings circle { fill: none; stroke: var(--rv-border); stroke-width: 1.5; }
.realm__rings .core { fill: var(--rv-text-muted); stroke: none; }
.realm__rings .spot { fill: var(--rv-orange-500); stroke: none; }

.worlds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rv-border); }
.worlds > li { border-bottom: 1px solid var(--rv-border); }
.world__link { display: grid; grid-template-columns: var(--portal-icon) minmax(0, 1fr) auto; align-items: center; gap: var(--rv-space-4);
  width: 100%; padding: var(--rv-space-4) var(--rv-space-3); color: var(--rv-text); text-decoration: none; text-align: left;
  background: transparent; border: 0; font: inherit; cursor: pointer; border-radius: var(--rv-radius-md);
  transition: background var(--rv-dur) var(--rv-ease); }
.world__link:hover { background: var(--rv-surface); }
.world__link:focus-visible { outline: 0; box-shadow: var(--rv-focus-ring); }
.world__icon { width: var(--portal-icon); height: var(--portal-icon); border-radius: 50%; display: grid; place-items: center;
  background: var(--rv-surface); border: 1px solid var(--rv-border); color: var(--rv-text); }
.world__link:hover .world__icon { border-color: var(--rv-orange-500); }
.world__link h3, .world__name { display: block; margin: 0; font-size: var(--rv-text-md); font-weight: 700; letter-spacing: -.01em; }
.world__body { display: block; min-width: 0; }
.world__desc { display: block; margin: var(--rv-space-1) 0 0; color: var(--rv-text-muted); font-size: var(--rv-text-sm); }
.world__tag { margin-top: var(--rv-space-2); }
.world__go { color: var(--rv-text-faint); }
.world__link:hover .world__go { color: var(--rv-link); }

footer.portal-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rv-space-3);
  padding-block: var(--rv-space-5) var(--rv-space-6); border-top: 1px solid var(--rv-border);
  color: var(--rv-text-muted); font-size: var(--rv-text-sm); }
footer.portal-foot p { margin: 0; }

/* Connexion et page d'erreur: même composition que le héros */
.solo { min-height: calc(100vh - 6rem); align-content: center; }

/* Pages de lecture (annonces) */
.read { width: min(100% - 2rem, var(--portal-measure)); margin-inline: auto; display: grid; gap: var(--rv-space-6); }
.read h1 { margin: 0; }
.read h2 { margin: var(--rv-space-6) 0 var(--rv-space-3); }
.read p { margin: 0 0 var(--rv-space-4); }
.read .lead { font-size: var(--rv-text-lg); color: var(--rv-text-muted); }
.read__head { display: grid; gap: var(--rv-space-3); }
.read__head p { margin: 0; }
.read figure { margin: var(--rv-space-5) 0; }
.read video { width: 100%; border-radius: var(--rv-radius-md); border: 1px solid var(--rv-border); background: var(--rv-ink-950); }
.read figcaption { color: var(--rv-text-muted); font-size: var(--rv-text-sm); margin-top: var(--rv-space-2); }
.read-foot { display: flex; flex-wrap: wrap; gap: var(--rv-space-4); padding-top: var(--rv-space-5); border-top: 1px solid var(--rv-border);
  font-size: var(--rv-text-sm); }
.read-foot a { display: inline-flex; align-items: center; gap: var(--rv-space-2); }
.section-block { display: grid; gap: var(--rv-space-4); }
.section-block > .rv-h2 { margin: 0; }
.rv-empty > .ico { width: 2rem; height: 2rem; color: var(--rv-text-faint); }
.rv-empty p { margin: 0; max-width: 46ch; }

/* Guide Emby (fenêtre) */
.modal { display: none; overflow-y: auto; z-index: 20; }
.modal.open { display: grid; }
.guide-dialog { width: min(100%, 40rem); max-height: calc(100vh - 2rem); overflow-y: auto; gap: var(--rv-space-5); align-self: start; margin-block: auto; }
.guide-dialog__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rv-space-4); }
.guide-dialog__head .rv-h2 { margin: 0; }
.guide-dialog p { margin: 0; }
.guide-dialog .close { padding: 0; width: 2.5rem; flex: none; }
.guide-intro { color: var(--rv-text-muted); }
.pdf-link { display: inline-flex; align-items: center; gap: var(--rv-space-2); margin-top: var(--rv-space-3); font-weight: 700; }
.step { display: grid; gap: var(--rv-space-3); padding-top: var(--rv-space-5); border-top: 1px solid var(--rv-border); }
.step-head { display: flex; align-items: center; gap: var(--rv-space-3); }
.step-head h3 { margin: 0; font-size: var(--rv-text-md); font-weight: 700; }
.num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rv-orange-500); color: var(--rv-text); font-weight: 700; font-size: var(--rv-text-sm); }
.step-body { display: grid; gap: var(--rv-space-3); }
.step-body img { display: block; width: 100%; height: auto; border-radius: var(--rv-radius-md); border: 1px solid var(--rv-border); }
.address-box { padding: var(--rv-space-3) var(--rv-space-4); border: 1px dashed var(--rv-border); border-radius: var(--rv-radius-sm);
  font-family: var(--rv-font-mono); text-align: center; word-break: break-all; background: var(--rv-bg); }
.success { display: grid; justify-items: start; gap: var(--rv-space-2); }
.success .ico { color: var(--rv-ok); width: 2rem; height: 2rem; }
.success h3 { margin: 0; }
.help { display: grid; gap: var(--rv-space-2); padding-top: var(--rv-space-5); border-top: 1px solid var(--rv-border); justify-items: start; }
.help .rv-btn { margin-top: var(--rv-space-2); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--rv-space-5); }
  .hero .system { order: -1; width: min(70%, 18rem); justify-self: start; }
  .realm { grid-template-columns: 1fr; gap: var(--rv-space-4); }
  .realm__head { position: static; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--rv-space-4); }
  .realm__rings { grid-row: span 2; }
}
@media (max-width: 560px) {
  .hero .rv-h1, .read h1.rv-h1 { font-size: var(--rv-text-xl); }
  .portal-top { padding-block: var(--rv-space-3); }
  .who { display: none; }
}

.final-img { display: block; width: 100%; height: auto; border-radius: var(--rv-radius-md); border: 1px solid var(--rv-border); }
.hero .rv-alert { margin-bottom: var(--rv-space-5); }
.rv-btn.copied { border-color: var(--rv-ok); }

/* .rv-body a (design system) colore tous les liens; les boutons et lignes-liens gardent leur couleur propre. */
.rv-body a.rv-btn { color: var(--rv-text); }
.rv-body a.rv-btn--primary { color: var(--rv-on-accent); }
.rv-body a.world__link { color: var(--rv-text); }
.rv-body a.rv-brand { color: var(--rv-text); }
.rv-btn[hidden] { display: none; }
.read { padding-top: var(--rv-space-4); }
.portal > .rv-overlay { position: fixed; }

/* Mondes en orbite (mouvement lent; fixes si l'on préfère moins de mouvement) */
.system .orbiter { animation: orbit var(--t) linear infinite; animation-delay: var(--d); }
.system .orbiter--a { offset-path: path("M 312 200 A 112 46 0 1 1 88 200 A 112 46 0 1 1 312 200"); }
.system .orbiter--b { offset-path: path("M 360 200 A 160 68 0 1 0 40 200 A 160 68 0 1 0 360 200"); }
.system .orbiter--c { offset-path: path("M 392 200 A 192 82 0 1 1 8 200 A 192 82 0 1 1 392 200"); }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@supports not (offset-path: path("M0 0")) { .system .orbiter { display: none; } }
@media (prefers-reduced-motion: reduce) { .system .orbiter { animation: none; } }

/* Entrée du héros */
.hero > div > * { animation: rv-rise .7s var(--rv-ease) both; }
.hero > div > :nth-child(2) { animation-delay: .09s; } .hero > div > :nth-child(3) { animation-delay: .18s; } .hero > div > :nth-child(4) { animation-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .hero > div > * { animation: none; } }

/* Ciel vivant (p5): décor derrière le héros, concentré autour de la planète */
.hero { position: relative; isolation: isolate; }
.hero__sky { position: absolute; inset: -2rem -1rem; z-index: -1; pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 90% at 72% 50%, var(--rv-text) 25%, transparent 78%); }