/* ═══════════════════════════════════════════════════════════════
   layout.css — coque applicative, navigation adaptative
   Paysage : rail vertical à gauche · Portrait : barre en bas
   ═══════════════════════════════════════════════════════════════ */

.app {
  height: 100%;
  display: grid;
  background: var(--bg);
}

/* ── Paysage (défaut) ─────────────────────────────────────────── */
.app {
  grid-template-columns: var(--nav-rail) 1fr;
  grid-template-areas: "nav main";
}

.nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  padding: calc(var(--safe-t) + var(--sp-4)) var(--sp-2) calc(var(--safe-b) + var(--sp-4)) calc(var(--safe-l) + var(--sp-2));
  background: var(--bg-deep);
  border-right: 1px solid var(--line-soft);
  z-index: 40;
}

.nav__brand {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) 0 var(--sp-5);
  color: var(--accent);
}
.nav__logo { font-size: 26px; line-height: 1; }
.nav__brandName {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  color: var(--txt-2);
}

.nav__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  min-height: var(--touch);
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-md);
  color: var(--txt-3);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), transform 120ms var(--ease);
}
.nav__btn:active { transform: scale(.94); }
.nav__btn.is-active { color: var(--txt); background: var(--surface-2); }
.nav__btn.is-active .ico { color: var(--accent); fill: var(--accent); }

.nav__btn--accent { color: var(--accent); }
.nav__btn--accent .ico { fill: var(--accent); }
.nav__btn--minor { margin-top: auto; }

.nav__spacer { flex: 1; }

.main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Portrait : la navigation passe en bas ────────────────────── */
@media (orientation: portrait) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "main" "nav";
  }
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: var(--sp-1);
    min-height: var(--nav-bar);
    padding: var(--sp-2) calc(var(--safe-r) + var(--sp-3)) calc(var(--safe-b) + var(--sp-2)) calc(var(--safe-l) + var(--sp-3));
    border-right: 0;
    border-top: 1px solid var(--line-soft);
  }
  .nav__brand { display: none; }
  .nav__spacer { display: none; }
  .nav__btn { flex: 1; max-width: 140px; }
  .nav__btn--minor { margin-top: 0; }
}

/* Petits écrans en paysage (téléphone couché) : rail resserré */
@media (orientation: landscape) and (max-height: 480px) {
  :root { --nav-rail: 92px; --touch: 48px; }
  .nav__brand { display: none; }
  .nav__btn span { display: none; }
}

/* ── Vue : en-tête + corps défilant ───────────────────────────── */

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}

.view--enter { animation: viewIn 300ms var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

.view__head {
  flex: none;
  padding: calc(var(--safe-t) + var(--sp-5)) var(--sp-6) var(--sp-3);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
}
.view__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.view__sub {
  color: var(--txt-2);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.view__headActions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.view__body {
  flex: 1;
  min-height: 0;
  padding: 0 var(--sp-6) calc(var(--safe-b) + var(--sp-7));
}

@media (max-width: 640px) {
  .view__head { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .view__body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .view__title { font-size: var(--fs-xl); }
}