<template>
  <div class="app-layout grid grid-cols-1 min-h-dvh">
    <LayoutTheHeader />
    <main class="app-main">
      <slot />

      <!-- 益 Yì (Increase, #42) — sceau hexagramme (traits épais, coins nets, ~carré) -->
      <svg class="app-seal" viewBox="0 0 112 105" fill="currentColor" aria-hidden="true">
        <!-- Line 6 (top) — yang -->
        <rect x="6" y="6" width="100" height="8"/>
        <!-- Line 5 — yang -->
        <rect x="6" y="23" width="100" height="8"/>
        <!-- Line 4 — yin -->
        <rect x="6" y="40" width="42" height="8"/>
        <rect x="64" y="40" width="42" height="8"/>
        <!-- Line 3 — yin -->
        <rect x="6" y="57" width="42" height="8"/>
        <rect x="64" y="57" width="42" height="8"/>
        <!-- Line 2 — yin -->
        <rect x="6" y="74" width="42" height="8"/>
        <rect x="64" y="74" width="42" height="8"/>
        <!-- Line 1 (bottom) — yang -->
        <rect x="6" y="91" width="100" height="8"/>
      </svg>
    </main>
    <LayoutTheFooter />
  </div>
</template>

<script setup lang="ts">
useScrollTracking()
</script>

<style scoped>
.app-layout {
  grid-template-rows: auto 1fr auto;
}

/* === Seal — 益 Yì (Increase) === */
.app-seal {
  display: block;
  width: 44px;
  margin: 2rem 1.5rem 1rem auto;
  color: hsl(var(--color-accent));
  opacity: 0.28;
  filter: drop-shadow(1px 1px 0.5px rgba(0,0,0,0.25))
          drop-shadow(-0.5px -0.5px 0.5px rgba(255,255,255,0.15));
}
</style>
