/* Fractality product UI — la coquille.
   Extraite du prototype Athéna validé (action/athena-ui-prototype/dist/index.html).
   Aucun langage visuel nouveau : ce fichier ne fait que sortir de la page unique
   le rail, l'espace de travail et la barre haute, pour que tout écran du produit
   porte la même coquille. */


html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--fr-color-ink);
  font-family: var(--fr-font-sans);
  background: var(--fr-color-stage);
  overflow: hidden;
}

.fr-stage {
  width: 100vw;
  height: 100dvh;
  position: relative;
  isolation: isolate;
}

.fr-app {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: grid;
  grid-template-columns: var(--fr-size-rail) 1fr;
  overflow: hidden;
  background: var(--fr-app-background);
  backdrop-filter: blur(34px) saturate(118%);
  -webkit-backdrop-filter: blur(34px) saturate(118%);
}

/* ── Rail ──────────────────────────────────────────────────────────── */

.fr-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 20px;
}

.fr-rail-group { display: grid; gap: 16px; margin-top: 28px; }
.fr-rail-spacer { flex: 1; }

/* L'écran courant : surface tenue, pas de couleur d'accent ajoutée. */
.fr-icon-button[aria-current="page"] {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--fr-shadow-primary);
}
.fr-icon-button[aria-current="page"] img { opacity: 0.88; }

html[data-theme="dark"] .fr-icon-button[aria-current="page"] {
  background: rgba(220, 229, 243, 0.105);
}

/* ── Espace de travail ─────────────────────────────────────────────── */

.fr-workspace {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 14px 14px 14px 0;
  overflow: hidden;
  border: 1px solid var(--fr-workspace-border);
  border-radius: var(--fr-radius-workspace);
  background: var(--fr-workspace-background);
  box-shadow: var(--fr-shadow-workspace);
}

.fr-topbar {
  flex: none;
  height: 76px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--fr-space-2);
  padding: 0 var(--fr-space-7);
  position: relative;
  z-index: 2;
}

/* Titre d'écran : occupe la place de la date du flux, mêmes filets. */
.fr-topbar .fr-day {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(var(--fr-size-content), calc(100% - 150px));
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Corps défilant d'un écran secondaire. */
.fr-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px var(--fr-space-7) 48px;
}

.fr-sheet-inner {
  width: min(var(--fr-size-content), 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--fr-space-8);
}

@media (max-width: 680px) {
  .fr-app { grid-template-columns: var(--fr-size-rail-mobile) 1fr; }
  .fr-workspace { margin: 8px 8px 8px 0; border-radius: var(--fr-radius-workspace-mobile); }
  .fr-rail { padding: 16px 0 14px; }
  .fr-rail-group { gap: 12px; }
  .fr-topbar { height: 64px; padding: 0 var(--fr-space-4); }
  .fr-sheet { padding: 4px var(--fr-space-4) 36px; }
}