/* Maddlink — views in front of the living map: the profile (fiche) and the content pages. Desktop: a wide panel at
   the left with the map alive at the right; phone: full screen (EXPERIENCE §9). */

.view { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: var(--view-w, max(var(--list-w), min(760px, 62vw))); pointer-events: none; }
/* the directory behind a view goes quiet (inert, hidden from the eye and from assistive technologies) */
.panel--explore { transition: opacity 0.45s var(--ease-out), visibility 0s linear 0s; }
.has-view .panel--explore { opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-in), visibility 0s linear 0.4s; }
.view:empty { display: none; }
.view > * { pointer-events: auto; }

/* ---------------------------------------------------------------- content pages */
.page { position: absolute; inset: 0; background: var(--paper); box-shadow: 1px 0 0 var(--line), 12px 0 32px -16px rgba(0, 0, 0, 0.14); }
.page-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.page-inner { container-type: inline-size; padding: clamp(36px, 7vh, 72px) clamp(20px, 4vw, 56px) 0; min-height: 100%; }
.page-hero { margin-bottom: clamp(36px, 7vh, 72px); }
.page-kicker { margin-bottom: 20px; }
.page-title { font-size: var(--step-5); line-height: 1; max-width: 16ch; }
.page--charter .page-title { font-size: var(--step-4); max-width: 18ch; }
.page-lede { margin-top: 20px; color: var(--ink-soft); font-size: var(--step-2); line-height: 1.4; max-width: 34ch; }
.page-cta { margin-top: 32px; }
.page-sections { display: grid; gap: clamp(28px, 5vh, 48px); }
.page-section { position: relative; padding: 26px 0 0 0; border-top: 1px solid var(--line); }
.section-index { display: block; color: var(--ink); font-weight: 700; font-size: var(--step--1); letter-spacing: 0.08em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.section-title { font-size: var(--step-3); max-width: 22ch; margin-bottom: 12px; }
.page-section p { color: var(--ink-soft); font-size: var(--step-1); max-width: 54ch; }

/* charter: an immersive chapter, not a grid of cards (design direction) */
.charter-rules { display: grid; gap: 0; margin-bottom: clamp(40px, 8vh, 80px); counter-reset: rule; }
.charter-rule { position: relative; display: grid; grid-template-columns: 56px 1fr; align-items: start; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.charter-rule:last-child { border-bottom: 1px solid var(--line); }
.rule-orb { position: absolute; left: 16px; top: 34px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cyan-deep); }
.rule-index { grid-column: 1; width: 56px; padding-top: 4px; text-align: center; color: var(--ink); font-weight: 750; font-size: 13px; position: relative; top: 6px; opacity: 0; }
.rule-text { grid-column: 2; font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--step-3); line-height: 1.12; max-width: 22ch; }
.charter-rule:first-child .rule-text { color: var(--ink); }
.charter-block { margin-top: clamp(40px, 8vh, 80px); }
.block-title { font-size: var(--step-3); max-width: 24ch; margin-bottom: 22px; }
.ranking-path { position: relative; display: grid; gap: 24px; padding-left: 4px; }
.ranking-path::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--cyan-deep), var(--arc-rest)); border-radius: 2px; }
.ranking-step { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
.step-dot { grid-row: span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-left: 2px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--cyan-deep); color: var(--ink); font-weight: 750; font-size: 14px; font-variant-numeric: tabular-nums; }
.ranking-step h3 { font-size: var(--step-1); margin: 6px 0 6px; }
.ranking-step p { color: var(--ink-soft); max-width: 58ch; }
.charter-list { display: grid; gap: 14px; }
.charter-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--ink-soft); font-size: var(--step-1); max-width: 60ch; }
.charter-list .icon { color: var(--cyan-deep); width: 22px; height: 22px; margin-top: 3px; }

/* legal pages: label / value rows, « à recevoir » visible */
.page-items { display: grid; gap: 0; max-width: 720px; }
.page-item { display: grid; grid-template-columns: minmax(160px, 0.8fr) 1.4fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.page-item:last-child { border-bottom: 1px solid var(--line); }
.page-item dt { font-weight: 700; }
.page-item dd { color: var(--ink-soft); }
@container (max-width: 520px) { .page-item { grid-template-columns: 1fr; gap: 6px; } }

/* new arrivals: a feed */
.arrivals { display: grid; gap: 10px; max-width: 720px; }
.arrival { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.arrival time { color: var(--ink-muted); font-size: var(--step--1); font-weight: 600; }
.arrival-link { display: flex; align-items: center; gap: 14px; border-radius: var(--r-md); padding: 6px; margin: -6px; transition: background-color 0.3s; }
.arrival-link:hover { background: var(--card); }
.arrival-portrait { width: 52px; height: 52px; }
.arrival-id { display: grid; }
.arrival-name { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--step-1); }
.arrival-trade { color: var(--ink-soft); font-size: var(--step--1); }

/* the opening of the next page */
.next-band {
  display: grid; gap: 12px; margin-top: clamp(48px, 9vh, 96px); padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--line);
  position: relative;
}
.next-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--step-4); line-height: 1.02; max-width: 16ch; transition: color 0.4s; }
.next-band:hover .next-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.next-band .pill { justify-self: start; }
.next-arrow { position: absolute; right: 0; bottom: clamp(28px, 5vh, 48px); width: 36px; height: 36px; color: var(--cyan-deep); transition: transform 0.5s var(--ease-out); }
.next-band:hover .next-arrow { transform: translateX(6px); }

.page--short .page-inner { display: flex; flex-direction: column; }
.lost-orbs { position: relative; height: 120px; margin-top: 28px; max-width: 360px; }
.lost-orbs i { position: absolute; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink-muted); animation: drift 7s ease-in-out infinite alternate; }
.lost-orbs i:nth-child(1) { left: 6%; top: 60%; }
.lost-orbs i:nth-child(2) { left: 46%; top: 12%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan-glow); animation-duration: 9s; }
.lost-orbs i:nth-child(3) { left: 82%; top: 68%; animation-duration: 8s; }
@keyframes drift { to { transform: translate(14px, -12px); } }

/* ---------------------------------------------------------------- tiers */
@media (max-width: 1127px) { .view { --view-w: 100%; } }
/* tablets (and phones held sideways): the view stops above the floating mode dock, which stays in sight on the map,
   so that nothing of a profile or a page ever sits under it; a sheet of the profile covers the dock */
@media (max-width: 1127px) {
  .view { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .view > .profile, .view > .page { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .has-sheet main { z-index: calc(var(--z-header) + 1); }
}
/* a phone held sideways (short screen): the dock steps aside while a view is open, the view gets the height */
@media (max-width: 1127px) and (max-height: 500px) {
  .has-view .modes--header { transform: translate(-50%, calc(100% + 24px)); transition: transform 0.5s var(--ease-out); }
  .has-view .view { bottom: 0; }
}
@media (max-width: 767px) {
  /* phone: a profile is the whole screen (EXPERIENCE §9) — above the header and its dock, which come back on close.
     A content page keeps them around it, as on a tablet: they are its way out (it has no close button of its own). */
  body[data-page="pro"].has-view main { z-index: calc(var(--z-header) + 1); }
  .view[data-view="pro"] { position: fixed; inset: 0; bottom: 0; z-index: calc(var(--z-header) + 1); }
  .view > .profile { border-radius: 0; }
  /* the prototype keeps saying it is one, over the profile too (RULES n°3): under the profile's row of buttons, which
     it would touch at the top (the heart starts at 280 px on a 390 px screen) */
  body[data-page="pro"].has-view .proto-pill { z-index: calc(var(--z-header) + 2); top: 70px; }
  .page-inner { padding: 72px 18px 0; }
  .page-title { font-size: var(--step-4); }
}
/* a profile in front of the network: it steps back (the profile is the page now) */
.panel--network { transition: opacity 0.45s var(--ease-out), visibility 0s linear 0s; }
.has-view .panel--network { opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease-in), visibility 0s linear 0.35s; }