/* Kione V4 — charte commune et adaptations des maquettes. */
:root  {
  --ink:#172c61;
  --muted:#586789;
  --blue:#6750e8;
  --blue-dark:#4932bd;
  --paper:#f3f3ff;
  --line:#e2e5f7;
  --pastel-blue:#e8f2ff;
  --pastel-purple:#eeeaff;
  --pastel-pink:#ffe9ef;
  --pastel-yellow:#fff3c8;
  --pastel-green:#e7f5df;
  --radius:24px;
  --radius-small:14px;
  --space:24px;
  --page-width:1680px;
  --shadow:0 8px 25px #28356809;
  --motion:160ms;
}

body {
  background:linear-gradient(135deg,#e3edff 0,#f6efff 45%,#edf3ff 100%);
  min-height:100vh
}

button,.button {
  border-radius:18px;
  transition:background var(--motion),border-color var(--motion);
  min-height:46px
}

button.primary,.button.primary {
  background:linear-gradient(110deg,#8162fb,#5440d9);
  border-color:transparent
}

h1,h2,h3 {
  letter-spacing:-.035em;
  line-height:1.22
}

h2 {
  font-size:1.3rem
}

h3 {
  font-size:1rem
}

p {
  line-height:1.5
}

.layout {
  display:block;
  max-width:var(--page-width);
  margin:auto;
  padding:16px 22px 0;
  min-height:100vh
}

.main-column {
  min-width:0
}

.content {
  padding:24px 0;
  max-width:none;
  margin:0;
  min-height:65vh
}

.topbar {
  position:sticky;
  top:12px;
  z-index:30;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fffffff5;
  border:1px solid #fff;
  border-radius:25px;
  padding:12px 20px;
  margin:0;
  min-height:76px;
  box-shadow:var(--shadow)
}

.brand {
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.075em;
  color:#253779;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0
}

.brand-dot {
  color:#f19243
}

.brand-image {
  display:block;
  width:145px;
  height:42px
}

.brand-image img,.brand-image video {
  height:100%;
  width:100%;
  object-fit:contain
}

.sidebar {
  display:block;
  position:static;
  width:auto;
  min-width:0;
  height:auto;
  overflow:visible;
  transform:none;
  border:none;
  background:none;
  padding:0;
  flex:1;
  box-shadow:none
}

.nav {
  display:flex;
  justify-content:center;
  gap:3px;
  margin:0;
  padding:0
}

.nav a {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--ink);
  font-size:.74rem;
  font-weight:700;
  border-radius:14px;
  padding:8px 10px;
  min-height:54px;
  white-space:nowrap;
  text-decoration:none
}

.nav a.active {
  background:var(--pastel-purple);
  color:#543cdd
}

.nav a:hover {
  background:#f3f0ff
}

.system-icon {
  width:23px;
  height:23px;
  flex-shrink:0;
  vertical-align:middle
}

.custom-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  flex-shrink:0
}

.custom-icon img,.custom-icon video {
  width:100%;
  height:100%;
  object-fit:contain
}

.mobile-adult {
  display:none
}

.search {
  width:150px;
  min-width:0;
  max-width:none;
  margin:0;
  background:#f6f7ff;
  border-radius:18px;
  display:flex
}

.search input {
  width:100%;
  padding:10px;
  border:none;
  background:none;
  min-width:0
}

.search button {
  padding:7px
}

.profile-button {
  border:none;
  border-radius:24px;
  background:#f0f1ff;
  padding:6px 10px;
  max-width:160px
}

.profile-button .avatar {
  width:36px;
  height:36px;
  min-width:36px;
  font-size:1rem
}

.profile-name {
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.8rem
}

.notification-button {
  padding:6px;
  position:relative;
  min-width:35px
}

.mobile-menu {
  display:none
}

.footer {
  margin:12px -22px 0;
  border:0;
  border-radius:28px 28px 0 0;
  background:#233660;
  color:white;
  padding:28px 34px;
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:space-between;
  font-size:.85rem
}

.footer .brand,.footer a,.footer button {
  color:#fff
}

.footer button {
  font-size:.85rem;
  min-height:40px;
  padding:6px
}

.footer .row {
  gap:16px
}

.bottomnav {
  display:none
}

.panel {
  border:1px solid #fff;
  border-radius:var(--radius);
  padding:22px;
  background:#fffffff5;
  box-shadow:var(--shadow);
  min-width:0
}

.section-title {
  margin:0 0 18px;
  gap:12px;
  align-items:center
}

.section-title h2 {
  margin:0
}

.section-title a {
  font-size:.77rem;
  white-space:normal;
  text-align:right;
  text-decoration:none
}

.intro {
  margin:8px 0 24px
}

.intro h1 {
  font-size:2rem
}

.intro p {
  margin-bottom:0
}

.visual-slot {
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-width:0;
  background:#e9ecf7;
  aspect-ratio:4/3;
  border:1px solid #dce1f1;
  border-radius:16px;
  color:#637194
}

.visual-slot>img,.visual-slot>video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0
}

.empty-visual {
  font-size:.78rem;
  line-height:1.3;
  text-align:center;
  padding:15px;
  border:1px dashed #b9c4dc;
  border-radius:10px;
  max-width:90%
}

.media-fallback {
  display:grid;
  place-items:center;
  background:#e9ecf7;
  color:#536080;
  min-height:80px;
  padding:15px;
  width:100%
}

.home-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:35px;
  align-items:stretch;
  padding:22px 34px 34px;
  min-height:370px
}

.hero-copy {
  padding:20px 0;
  align-self:center
}

.hero-copy h1 {
  font-size:clamp(2.1rem,3.1vw,3.3rem);
  max-width:560px;
  letter-spacing:-.06em;
  margin:0 0 18px;
  color:#182b60
}

.hero-copy>p:not(.eyebrow) {
  font-size:1.05rem;
  max-width:540px
}

.hero-copy .eyebrow {
  color:#7060b8
}

.hero-copy .row {
  margin-top:22px
}

.hero-visual {
  aspect-ratio:16/10;
  border-radius:27px;
  background:#e7e7f4;
  min-height:270px
}

.home-modules {
  background:#ffffff75;
  padding:20px;
  border-radius:28px
}

.category-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:20px
}

.category-card {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  border-radius:20px;
  padding:18px;
  gap:8px;
  text-decoration:none;
  color:var(--ink);
  min-height:170px
}

.category-card h2 {
  font-size:1.4rem;
  margin-bottom:9px
}

.category-card p {
  font-size:.9rem;
  margin-bottom:14px
}

.category-card .button {
  font-size:.75rem;
  padding:7px 12px;
  min-height:34px
}

.category-manga {
  background:var(--pastel-pink)
}

.category-bd {
  background:#dcefff
}

.category-jeunesse {
  background:#eaf3cc
}

.category-visual {
  aspect-ratio:3/4;
  max-height:175px;
  background:#ffffff65;
  border-color:#ffffff
}

.home-middle {
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);
  gap:18px;
  margin-bottom:18px
}

.home-lower {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:16px
}

.home-lower .panel {
  padding:18px
}

.home-lower h2 {
  font-size:1rem
}

.home-lower .section-title {
  align-items:start
}

.home-lower .section-title a {
  font-size:.7rem
}

.library-teaser {
  aspect-ratio:2/1
}

.home-library {
  position:relative
}

.home-library p {
  font-size:.8rem
}

.home-library>.button {
  margin-top:12px
}

.companion-card {
  background:linear-gradient(125deg,#edf7ff,#e0eaff);
  border:1px solid #d4e3ff;
  border-radius:22px;
  padding:20px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:16px;
  min-width:0
}

.companion-card h2 {
  font-size:1.2rem;
  margin-bottom:10px
}

.companion-card p {
  font-size:.86rem;
  margin-bottom:14px
}

.companion-visual {
  aspect-ratio:1;
  background:#edf1fc
}

.companion-card.compact {
  max-width:450px;
  margin:auto;
  box-shadow:var(--shadow)
}

.companion-card.compact h2 {
  font-size:1.1rem
}

.mini-books {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.mini-book {
  min-width:0;
  text-decoration:none;
  color:var(--ink);
  display:block
}

.mini-book .cover {
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  min-height:0;
  border-radius:10px;
  margin-bottom:9px
}

.mini-book strong {
  font-size:.78rem;
  line-height:1.3;
  display:block;
  margin-bottom:6px
}

.mini-book .small {
  font-size:.67rem;
  display:block
}

.mini-book .type-cover {
  padding:8px;
  gap:3px
}

.mini-book .type-cover span {
  font-size:.6rem
}

.mini-book .type-cover strong {
  font-size:.78rem
}

.horizontal-books {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.mini-book.horizontal {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:10px;
  align-items:center
}

.mini-book.horizontal .cover {
  margin:0
}

.mini-book.horizontal .type-cover strong {
  font-size:.6rem
}

.mini-book.horizontal .type-cover span {
  display:none
}

.reading-progress {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
  color:#566791;
  font-size:.66rem
}

.reading-progress progress {
  height:7px;
  width:100%;
  flex:1;
  min-width:0;
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:#eaecf7;
  accent-color:#52bfa1
}

.reading-progress progress::-webkit-progress-bar {
  background:#eaecf7
}

.reading-progress progress::-webkit-progress-value {
  background:#52bfa1;
  border-radius:10px
}

.reading-progress progress::-moz-progress-bar {
  background:#52bfa1
}

.empty-copy {
  padding:18px 0;
  color:var(--muted);
  font-size:.9rem;
  margin:0;
  line-height:1.65
}

.author-mini-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:15px
}

.author-mini-list a {
  flex:1;
  min-width:62px;
  max-width:120px;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  font-size:.73rem
}

.portrait-slot {
  aspect-ratio:1;
  border-radius:50%;
  margin-bottom:10px
}

.portrait-slot .empty-visual {
  font-size:.62rem;
  border:0;
  padding:5px
}

.event-mini {
  display:flex;
  gap:12px;
  text-decoration:none;
  color:var(--ink);
  align-items:center;
  margin:14px 0;
  font-size:.8rem
}

.event-mini time {
  display:grid;
  min-width:43px;
  text-align:center;
  color:#7b4dca;
  background:var(--pastel-purple);
  padding:4px;
  border-radius:9px;
  font-size:.62rem;
  text-transform:uppercase
}

.event-mini b {
  font-size:1.25rem;
  line-height:1.15
}

.event-mini strong,.event-mini small {
  display:block
}

.library-layout {
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 310px;
  gap:18px;
  align-items:stretch
}

.library-menu h1 {
  font-size:1.2rem;
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px
}

.library-menu {
  padding:22px 16px
}

.library-menu>a,.collection-link {
  display:flex;
  gap:12px;
  align-items:center;
  min-height:48px;
  text-decoration:none;
  color:var(--ink);
  font-size:.87rem;
  border-radius:13px;
  padding:8px 10px
}

.library-menu>a.active {
  background:#e6e8ff;
  color:#4f38d8
}

.library-menu>a span:last-child {
  margin-left:auto
}

.library-menu h2 {
  font-size:.98rem
}

.library-menu hr {
  border:0;
  border-top:1px solid var(--line);
  margin:22px 0
}

.collection-link {
  background:none;
  border:0;
  width:100%;
  justify-content:flex-start;
  overflow-wrap:anywhere
}

.library-menu>.small {
  margin-top:20px
}

.library-scene {
  border-radius:24px;
  position:relative;
  min-width:0;
  overflow:hidden;
  min-height:585px;
  border:1px solid #d7ddf0
}

.scene-background {
  position:absolute;
  inset:0
}

.scene-background>img,.scene-background>video {
  width:100%;
  height:100%;
  object-fit:cover
}

.neutral-scene {
  background:linear-gradient(#e8eafa,#e0e5f4);
  display:flex;
  align-items:center;
  justify-content:center
}

.neutral-scene>span {
  position:absolute;
  bottom:14px;
  left:14px;
  font-size:.7rem;
  color:#72819c
}

.scene-content {
  position:relative;
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:100%;
  gap:20px
}

.scene-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  z-index:2
}

.scene-toolbar label {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:.75rem;
  font-weight:700;
  background:#ffffffeb;
  padding:7px 10px;
  border-radius:15px
}

.scene-toolbar select {
  max-width:180px;
  min-height:35px;
  border:0;
  background:transparent;
  font-size:.75rem
}

.scene-toolbar button {
  font-size:.78rem;
  min-height:40px;
  padding:8px 12px
}

.scene-shelves {
  margin-top:12px;
  position:relative;
  z-index:1
}

.scene-shelves .shelf {
  min-height:130px;
  margin:0 8px 18px;
  border-bottom:9px solid #c8bed6;
  padding:0 10px 8px;
  background:#ffffff20;
  border-radius:10px 10px 3px 3px;
  box-shadow:0 9px 15px #32305b09
}

.scene-shelves .shelf-item {
  width:75px;
  min-width:75px
}

.scene-shelves .cover {
  height:100px;
  width:75px
}

.scene-shelves .book-name {
  display:none
}

.scene-shelves .type-cover {
  padding:8px
}

.scene-shelves .type-cover strong {
  font-size:.68rem
}

.scene-shelves .type-cover span {
  font-size:.5rem
}

.shelf-empty {
  font-size:.78rem;
  color:#637092;
  margin:auto;
  max-width:85%;
  text-align:center
}

.scene-actions {
  align-self:center;
  margin-top:auto;
  position:relative;
  z-index:3
}

.scene-actions .button {
  font-size:.8rem
}

.scene-objects {
  position:absolute;
  inset:170px 10px 55px;
  pointer-events:none
}

.placed-object {
  pointer-events:auto;
  position:absolute;
  border:0;
  background:none;
  display:block;
  padding:0;
  min-height:0;
  transform:translate(-50%,-50%);
  z-index:4
}

.placed-object .visual-slot {
  aspect-ratio:1;
  background:transparent;
  border:0
}

.placed-object img {
  object-fit:contain
}

.placed-object>span {
  background:#ffffffe8;
  font-size:.62rem;
  display:block;
  border-radius:5px;
  padding:2px;
  overflow-wrap:anywhere
}

.object-drawer {
  background:#fffffff5;
  border-radius:24px;
  border:1px solid #fff;
  padding:20px;
  min-width:0;
  box-shadow:var(--shadow)
}

.object-drawer>summary {
  font-size:1.15rem;
  font-weight:800;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
  min-height:44px;
  margin-bottom:10px
}

.object-tabs {
  display:flex;
  gap:4px;
  background:#f1f1ff;
  border-radius:25px;
  padding:4px;
  margin-bottom:15px
}

.object-tabs button {
  padding:6px 10px;
  border:0;
  flex:1;
  font-size:.75rem;
  background:transparent;
  min-height:38px
}

.object-tabs button[aria-pressed=true] {
  background:var(--blue);
  color:white
}

.object-categories {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:12px;
  margin-bottom:12px
}

.object-categories button {
  font-size:.67rem;
  min-height:40px;
  padding:7px 9px;
  flex-shrink:0
}

.object-categories button[aria-pressed=true] {
  border-color:#8470ee;
  background:var(--pastel-purple)
}

.object-gallery {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px 10px;
  max-height:470px;
  overflow-y:auto
}

.object-gallery .empty-copy {
  grid-column:1/-1
}

.object-gallery h3 {
  font-size:.67rem;
  margin:8px 0;
  text-align:center;
  min-height:28px
}

.object-picture {
  aspect-ratio:1;
  background:#edf0ff
}

.object-gallery button {
  padding:5px 7px;
  font-size:.68rem;
  width:100%;
  min-height:38px
}

.object-picture .empty-visual {
  font-size:.6rem;
  padding:6px;
  border:0
}

.theme-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.theme-list button {
  display:block;
  padding:8px;
  font-size:.75rem
}

.theme-list button[aria-pressed=true] {
  border-color:var(--blue)
}

.theme-preview {
  aspect-ratio:1.4;
  margin-bottom:8px
}

.theme-preview .empty-visual {
  border:0;
  font-size:.65rem;
  padding:5px
}

.library-bottom {
  display:grid;
  grid-template-columns:1fr 1.8fr 1.1fr;
  gap:18px;
  margin-top:18px
}

.reading-total {
  display:block;
  font-size:1.5rem;
  margin:20px 0 10px
}

.library-bottom .mini-books {
  grid-template-columns:repeat(5,minmax(0,1fr))
}

.mission-stack {
  display:grid;
  gap:12px
}

.mission-card {
  background:#ffffffed;
  border-radius:22px;
  padding:18px;
  border:1px solid #fff
}

.mission-card h3 {
  margin:0;
  font-size:1rem
}

.mission-card p {
  font-size:.8rem;
  margin:8px 0
}

.mission-card .button {
  font-size:.75rem
}

.badge-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px
}

.badge-card {
  text-align:center;
  padding:12px;
  background:#f5f5fd;
  border-radius:15px
}

.badge-picture {
  width:90px;
  max-width:100%;
  margin:0 auto 12px;
  aspect-ratio:1
}

.badge-card.earned {
  background:#ecf8ef
}

.badge-card p {
  font-size:.8rem
}

.profile-layout {
  display:grid;
  gap:20px;
  max-width:1080px;
  margin:auto
}

.profile-hero {
  display:flex;
  position:relative;
  overflow:hidden;
  gap:28px;
  align-items:center;
  padding:28px
}

.profile-hero>.avatar {
  width:120px;
  height:120px;
  min-width:120px;
  font-size:3rem;
  border:6px solid #e6eeff
}

.profile-hero h2 {
  margin-bottom:12px
}

.profile-decoration {
  width:150px;
  margin-left:auto;
  aspect-ratio:1;
  background:#eef2ff;
  flex-shrink:0
}

.profile-layout .mini-books {
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.profile-layout .grid-2 {
  gap:20px
}

.profile-shortcuts {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}

.profile-shortcuts>.panel {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  font-size:.85rem;
  min-height:110px
}

.profile-shortcuts .system-icon {
  width:32px;
  height:32px;
  color:var(--blue)
}

.custom-sections {
  display:grid;
  gap:20px
}

.custom-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center
}

.custom-section:not(:has(.section-visual)) {
  display:block
}

.section-visual {
  aspect-ratio:4/3
}

.dialog {
  border:1px solid #dfdff6;
  border-radius:25px;
  box-shadow:0 20px 90px #26345a30
}

.dialog-head {
  background:#f2f3ff;
  border-radius:20px;
  padding:14px;
  margin:-8px -8px 20px
}

.dialog-head h2 {
  font-size:1.2rem
}

.book-grid {
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))
}

.book-card {
  border-radius:20px;
  background:#fff;
  padding:14px
}

.book-card .cover {
  height:auto;
  aspect-ratio:3/4
}

.book-card .actions {
  gap:6px
}

.book-card .actions button {
  font-size:.73rem
}

.book-card h3 {
  font-size:1rem
}

.cover {
  box-shadow:0 6px 12px #23315112
}

.type-cover {
  background:#edf0f8;
  color:#5c6b8f
}

.type-cover strong {
  color:var(--ink)
}

@media(min-width:1500px) {
  .home-hero {
    min-height:405px
  }
  .library-layout {
    grid-template-columns:245px minmax(0,1fr) 340px
  }
}

@media(max-width:1250px) {
  .topbar {
    gap:9px;
    padding:10px 14px
  }
  .brand {
    font-size:1.65rem
  }
  .nav a {
    font-size:.66rem;
    padding:8px 7px
  }
  .profile-name {
    display:none
  }
  .search {
    width:125px
  }
  .home-lower {
    grid-template-columns:1.35fr 1fr 1fr
  }
  .home-lower>.panel:last-child {
    grid-column:1/-1
  }
  .home-lower>.panel:last-child .event-mini {
    display:inline-flex;
    min-width:220px;
    margin-right:20px
  }
  .library-layout {
    grid-template-columns:190px minmax(0,1fr) 260px;
    gap:12px
  }
  .object-drawer {
    padding:14px
  }
  .object-gallery {
    grid-template-columns:1fr 1fr
  }
  .library-menu {
    padding:18px 10px
  }
  .library-menu h1 {
    font-size:1.04rem
  }
  .library-menu>a {
    font-size:.76rem
  }
  .library-bottom {
    grid-template-columns:1fr 2fr
  }
  .mission-stack {
    grid-column:1/-1;
    grid-template-columns:1fr 1fr
  }
  .horizontal-books {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:1020px) {
  .topbar {
    flex-wrap:wrap;
    top:5px;
    padding:10px 16px;
    gap:12px
  }
  .topbar>.brand {
    margin-right:auto
  }
  .sidebar {
    order:10;
    flex-basis:100%;
    width:100%
  }
  .nav {
    justify-content:space-between
  }
  .nav a {
    font-size:.73rem;
    padding:7px 10px;
    flex:1
  }
  .nav .system-icon {
    width:21px;
    height:21px
  }
  .search {
    width:220px
  }
  .profile-name {
    display:block
  }
  .home-hero {
    padding:20px 10px;
    gap:24px;
    min-height:300px
  }
  .hero-copy h1 {
    font-size:2.35rem
  }
  .hero-visual {
    min-height:220px
  }
  .home-modules {
    padding:15px
  }
  .category-card {
    padding:15px;
    grid-template-columns:1fr .7fr;
    gap:6px
  }
  .category-card h2 {
    font-size:1.12rem
  }
  .category-card p {
    font-size:.78rem
  }
  .home-middle {
    grid-template-columns:1.6fr 1fr
  }
  .home-lower {
    grid-template-columns:1fr 1fr
  }
  .home-lower>.panel:last-child {
    grid-column:auto
  }
  .library-layout {
    grid-template-columns:180px minmax(0,1fr)
  }
  .object-drawer {
    grid-column:1/-1
  }
  .object-gallery {
    grid-template-columns:repeat(6,minmax(0,1fr));
    max-height:none
  }
  .theme-list {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .library-scene {
    min-height:560px
  }
  .companion-card.compact {
    max-width:390px
  }
  .footer {
    flex-wrap:wrap
  }
  .footer>.row {
    width:100%;
    justify-content:center
  }
}

@media(max-width:700px) {
  .layout {
    padding:8px 12px 0
  }
  .content {
    padding:16px 0;
    min-height:70vh
  }
  .topbar {
    top:6px;
    border-radius:20px;
    padding:10px 12px;
    gap:9px;
    min-height:65px
  }
  .topbar .brand {
    font-size:1.7rem;
    order:0
  }
  .mobile-menu {
    display:inline-flex;
    order:4;
    min-width:40px;
    min-height:40px;
    padding:7px;
    background:#eeedff
  }
  .search {
    display:none
  }
  .profile-name {
    display:none
  }
  .profile-button {
    order:2;
    padding:4px;
    max-width:50px
  }
  .notification-button {
    order:1;
    min-height:38px
  }
  .sidebar {
    display:none;
    order:10;
    padding:12px 0 3px;
    max-height:70vh;
    overflow-y:auto
  }
  .sidebar.open {
    display:block;
    position:static;
    transform:none;
    width:100%;
    height:auto;
    box-shadow:none;
    background:none
  }
  .nav {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }
  .nav a {
    font-size:.78rem;
    min-height:68px;
    white-space:normal;
    text-align:center
  }
  .mobile-adult {
    display:flex;
    width:100%;
    margin-top:15px
  }
  .home-hero {
    grid-template-columns:1fr;
    gap:14px;
    padding:14px 5px 20px
  }
  .hero-copy {
    padding:0
  }
  .hero-copy h1 {
    font-size:2.05rem;
    max-width:100%;
    margin-bottom:14px
  }
  .hero-copy .eyebrow {
    font-size:.7rem;
    margin-bottom:12px
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:.93rem
  }
  .hero-copy .row {
    gap:8px
  }
  .hero-copy .button {
    padding:10px 12px;
    font-size:.78rem;
    min-height:44px
  }
  .hero-visual {
    min-height:0;
    aspect-ratio:2.5;
    max-height:190px
  }
  .home-modules {
    padding:10px;
    border-radius:22px
  }
  .category-grid {
    grid-template-columns:1fr;
    gap:12px
  }
  .category-card {
    grid-template-columns:1.3fr 1fr;
    min-height:140px;
    padding:16px
  }
  .category-card h2 {
    font-size:1.3rem
  }
  .category-card p {
    font-size:.8rem
  }
  .category-visual {
    aspect-ratio:1.2;
    max-height:125px
  }
  .home-middle {
    grid-template-columns:1fr
  }
  .home-lower {
    grid-template-columns:1fr
  }
  .home-lower>.panel:last-child {
    grid-column:auto
  }
  .home-lower h2 {
    font-size:1.15rem
  }
  .home-lower .mini-books {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .home-library .library-teaser {
    aspect-ratio:2.2
  }
  .home-lower>.panel:last-child .event-mini {
    min-width:0;
    display:flex;
    margin:15px 0
  }
  .panel {
    padding:18px
  }
  .section-title h2 {
    font-size:1.15rem
  }
  .section-title a {
    font-size:.7rem
  }
  .companion-card {
    padding:18px;
    grid-template-columns:.65fr 1.35fr
  }
  .companion-card p {
    font-size:.83rem
  }
  .companion-visual {
    max-height:150px
  }
  .horizontal-books {
    grid-template-columns:1fr 1fr;
    gap:20px 12px
  }
  .mini-book.horizontal {
    grid-template-columns:47px minmax(0,1fr);
    gap:8px
  }
  .mini-book strong {
    font-size:.73rem
  }
  .library-layout {
    grid-template-columns:1fr;
    gap:14px
  }
  .library-menu {
    padding:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center
  }
  .library-menu h1 {
    width:100%;
    font-size:1.2rem;
    margin:0 0 8px
  }
  .library-menu>a {
    flex:1 1 130px;
    min-height:46px;
    padding:8px;
    background:#f6f6ff;
    font-size:.79rem
  }
  .library-menu>a .system-icon {
    width:20px;
    height:20px
  }
  .library-menu hr {
    display:none
  }
  .library-menu>.row {
    flex-basis:100%;
    margin-top:6px
  }
  .library-menu .collection-link {
    width:auto;
    max-width:100%;
    font-size:.8rem
  }
  .library-menu>.small {
    margin:0;
    flex-basis:100%
  }
  .library-scene {
    min-height:560px
  }
  .scene-toolbar {
    flex-wrap:wrap
  }
  .scene-toolbar label {
    flex:1;
    min-width:0;
    max-width:100%;
    padding:7px
  }
  .scene-toolbar select {
    min-width:0;
    max-width:160px
  }
  .scene-content {
    padding:13px
  }
  .companion-card.compact {
    width:100%;
    padding:14px;
    gap:12px;
    grid-template-columns:85px 1fr
  }
  .companion-card.compact h2 {
    font-size:1rem
  }
  .companion-card.compact p {
    font-size:.78rem;
    margin-bottom:8px
  }
  .companion-card.compact .button {
    font-size:.71rem;
    padding:8px
  }
  .object-drawer {
    grid-column:auto;
    padding:18px
  }
  .object-gallery {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .object-gallery button {
    min-height:44px
  }
  .object-gallery h3 {
    font-size:.75rem
  }
  .object-tabs button {
    min-height:44px
  }
  .object-categories button {
    min-height:44px
  }
  .library-bottom {
    grid-template-columns:1fr;
    gap:14px
  }
  .library-bottom .mini-books {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .mission-stack {
    grid-template-columns:1fr;
    grid-column:auto
  }
  .library-bottom>.panel:first-child .reading-total {
    margin-top:10px;
    font-size:1.3rem
  }
  .profile-hero {
    padding:20px;
    gap:16px;
    flex-wrap:wrap
  }
  .profile-hero>.avatar {
    width:75px;
    height:75px;
    min-width:75px;
    font-size:2rem;
    border-width:4px
  }
  .profile-hero>div {
    flex:1;
    min-width:160px
  }
  .profile-hero h2 {
    font-size:1.7rem
  }
  .profile-hero .eyebrow {
    font-size:.65rem
  }
  .profile-hero .row {
    gap:8px
  }
  .profile-hero button {
    font-size:.77rem
  }
  .profile-decoration {
    display:none
  }
  .profile-layout .grid-2 {
    grid-template-columns:1fr
  }
  .profile-layout .mini-books {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .profile-shortcuts {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .profile-shortcuts>.panel {
    font-size:.82rem;
    padding:16px;
    min-height:100px
  }
  .custom-section {
    grid-template-columns:1fr
  }
  .footer {
    margin:12px -12px 0;
    padding:25px 20px 100px;
    gap:15px;
    font-size:.75rem
  }
  .footer>.row {
    justify-content:flex-start;
    gap:8px 16px
  }
  .footer button {
    font-size:.75rem;
    padding:5px
  }
  .footer .brand {
    font-size:1.6rem
  }
  .bottomnav {
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:40;
    background:#fffffff7;
    border:1px solid #e1e3f4;
    border-radius:19px 19px 0 0;
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
    gap:2px;
    justify-content:space-around
  }
  .bottomnav a {
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    text-decoration:none;
    min-height:51px;
    padding:4px;
    font-size:.6rem;
    flex:1;
    border-radius:12px
  }
  .bottomnav a span {
    display:inline-flex;
    font-size:inherit
  }
  .bottomnav a.active {
    color:#593cdc;
    background:#eeebff
  }
  .bottomnav .system-icon,.bottomnav .custom-icon {
    width:21px;
    height:21px
  }
  .book-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }
  .book-card {
    padding:10px
  }
  .book-card h3 {
    font-size:.88rem
  }
  .book-card .meta {
    font-size:.72rem
  }
  .book-card .actions {
    flex-direction:column
  }
  .book-card .button,.book-card button {
    width:100%;
    min-height:44px;
    font-size:.75rem
  }
  .intro h1 {
    font-size:1.7rem
  }
  .badge-grid {
    grid-template-columns:1fr 1fr
  }
  .dialog {
    max-height:90dvh;
    width:calc(100% - 24px);
    padding:18px
  }
  .dialog-head {
    margin:0 0 18px;
    padding:10px
  }
  .dialog-head h2 {
    font-size:1.05rem
  }
}

@media(max-width:360px) {
  .layout {
    padding:7px 9px 0
  }
  .topbar {
    gap:5px;
    padding:9px
  }
  .hero-copy h1 {
    font-size:1.85rem
  }
  .hero-copy .button {
    width:100%
  }
  .mini-book.horizontal {
    grid-template-columns:40px minmax(0,1fr);
    gap:6px
  }
  .mini-book.horizontal strong {
    font-size:.66rem
  }
  .category-card {
    padding:13px;
    grid-template-columns:1.2fr .8fr
  }
  .category-card h2 {
    font-size:1.18rem
  }
  .companion-card.compact {
    grid-template-columns:65px 1fr
  }
  .theme-list {
    grid-template-columns:1fr 1fr
  }
  .footer {
    margin-left:-9px;
    margin-right:-9px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}

/* Lecteur : panneau de sommaire, image de lecture et commandes tactiles. */
.reader {
  z-index:80;
  background:#e6eaf7;
  display:flex;
  flex-direction:column;
  border:10px solid #1c2440;
  border-radius:25px;
  inset:20px 24px;
  overflow:hidden;
  height:auto
}

.reader[hidden] {
  display:none
}

.reader-head {
  background:#fff;
  padding:12px 18px;
  display:flex;
  gap:15px;
  align-items:center;
  min-height:72px
}

.reader-title {
  flex:1;
  min-width:0
}

.reader-title h2 {
  font-size:1rem;
  margin:0 0 4px
}

.reader-title p {
  font-size:.75rem;
  margin:0;
  color:var(--muted)
}

.reader-top-progress {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:.75rem;
  min-width:160px
}

.reader-top-progress progress {
  width:110px;
  accent-color:var(--blue);
  height:7px
}

.reader-head button {
  font-size:.78rem;
  min-height:42px
}

.reader-body {
  flex:1;
  min-height:0;
  display:flex;
  position:relative
}

.reader-contents {
  background:#fff;
  width:210px;
  min-width:210px;
  overflow-y:auto;
  padding:20px 15px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line)
}

.reader-contents[hidden] {
  display:none
}

.reader-cover {
  width:105px;
  margin:auto auto 15px
}

.reader-cover .cover {
  height:140px;
  width:105px
}

.reader-contents>button {
  width:100%;
  font-size:.77rem;
  margin-bottom:8px;
  display:block;
  text-align:left;
  border:0;
  min-height:44px;
  padding:10px
}

.reader-contents>button small {
  display:block;
  color:var(--muted);
  font-weight:400
}

.reader-contents>button.active {
  background:var(--pastel-purple);
  color:var(--blue)
}

.reader-contents h3 {
  font-size:.85rem;
  margin:20px 0 10px
}

.reader-viewport {
  flex:1;
  min-width:0;
  min-height:0;
  padding:20px;
  overflow:auto;
  display:block;
  scrollbar-gutter:stable;
  background:#e8edf7
}

.reader-viewport .page-group {
  width:calc(100% * var(--reader-zoom,1));
  max-width:none;
  min-width:0;
  gap:14px;
  align-items:flex-start;
  justify-content:center;
  margin:0 auto 18px;
  display:flex
}

.reader-viewport .page-group.double {
  display:grid;
  grid-template-columns:1fr 1fr
}

.reader-page {
  margin:0;
  min-width:0;
  max-width:100%;
  width:100%;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 4px 18px #17234013
}

.reader-page img,.reader-page video {
  width:100%;
  height:auto;
  max-width:100%;
  display:block
}

.reader-page .text-page {
  min-height:65vh;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:pre-wrap;
  background:#fffdf4;
  font-size:clamp(1rem,1.4vw,1.4rem);
  padding:35px;
  line-height:1.85
}

.reader-page .page-no {
  font-size:.67rem;
  background:#fff;
  padding:7px;
  text-align:center
}

.reader-foot {
  background:#fff;
  padding:10px 15px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  border-top:1px solid var(--line);
  z-index:2
}

.reader-foot button {
  min-height:42px;
  padding:9px 12px;
  font-size:.76rem
}

.reader-foot select {
  min-height:42px;
  font-size:.76rem;
  border:1px solid var(--line);
  border-radius:15px;
  padding:7px;
  max-width:170px;
  background:#f8f7ff
}

.reader-mode-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.7rem
}

.reader-number {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:.73rem
}

.reader-number input {
  width:57px;
  min-height:40px;
  padding:7px
}

.reader-foot input[type=range] {
  flex:1;
  min-width:70px;
  max-width:200px;
  accent-color:var(--blue)
}

.reader.focus .reader-head,.reader.focus .reader-contents {
  display:none
}

.reader.focus .reader-foot>*:not(#reader-focus):not(#reader-next):not(#reader-prev) {
  display:none
}

.dialog-backdrop {
  z-index:110
}

.toast {
  z-index:130
}

@media(max-width:900px) {
  .reader {
    inset:8px;
    border-width:5px;
    border-radius:18px
  }
  .reader-head {
    padding:10px;
    gap:10px;
    min-height:65px
  }
  .reader-top-progress {
    min-width:0
  }
  .reader-top-progress progress {
    width:75px
  }
  .reader-contents {
    position:absolute;
    inset:0 auto 0 0;
    z-index:5;
    box-shadow:10px 0 30px #15243e30;
    width:250px;
    max-width:85%;
    min-width:0
  }
  .reader-foot {
    gap:6px;
    padding:9px
  }
  .reader-viewport {
    padding:12px
  }
  .reader-head #reader-cache {
    font-size:.65rem;
    max-width:80px;
    padding:7px
  }
  .reader-page .text-page {
    padding:24px;
    font-size:1.15rem
  }
}

@media(max-width:550px) {
  .reader {
    inset:0;
    border:0;
    border-radius:0;
    height:100dvh
  }
  .reader-head {
    flex-wrap:wrap;
    padding:9px 12px;
    gap:8px
  }
  .reader-head #reader-close {
    min-width:42px;
    padding:8px;
    font-size:.73rem
  }
  .reader-head #reader-cache {
    display:none
  }
  .reader-title h2 {
    font-size:.84rem
  }
  .reader-title p {
    font-size:.63rem
  }
  .reader-top-progress {
    order:4;
    width:100%;
    min-height:12px;
    gap:10px
  }
  .reader-top-progress progress {
    flex:1;
    width:100%;
    height:5px
  }
  .reader-top-progress span {
    font-size:.65rem
  }
  .reader-head #reader-favorite {
    padding:7px;
    min-height:38px;
    min-width:38px
  }
  .reader-head #reader-favorite .system-icon {
    width:20px;
    height:20px
  }
  .reader-viewport {
    padding:8px
  }
  .reader-viewport .page-group {
    gap:5px
  }
  .reader-page .text-page {
    font-size:1.07rem;
    padding:22px 16px;
    min-height:67vh
  }
  .reader-viewport .page-group.double .text-page {
    font-size:.88rem;
    padding:16px 10px
  }
  .reader-foot {
    justify-content:center;
    gap:5px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom))
  }
  .reader-foot button {
    min-height:44px;
    min-width:44px;
    padding:7px 9px;
    font-size:.68rem
  }
  .reader-foot #reader-direction {
    max-width:130px;
    min-height:44px;
    font-size:.68rem
  }
  .reader-mode-label {
    font-size:0;
    gap:0
  }
  .reader-mode-label select {
    max-width:145px;
    min-height:44px;
    font-size:.7rem
  }
  .reader-number {
    font-size:0;
    gap:0
  }
  .reader-number input {
    width:47px;
    font-size:.8rem;
    min-height:44px
  }
  .reader-foot #reader-range {
    width:100%;
    max-width:none;
    order:20;
    flex-basis:100%;
    height:15px;
    margin-top:5px
  }
  .reader-foot #reader-zoom-value {
    font-size:.62rem
  }
  .reader-foot #reader-focus {
    font-size:.63rem
  }
  .reader-contents {
    width:225px
  }
}

/* Largeur de navigation indépendante de la croissance du champ de recherche. */
@media(min-width:1251px) {
  .topbar>.brand {
    flex-shrink:0
  }
  .topbar .sidebar {
    flex:1 1 auto;
    min-width:max-content
  }
  .topbar .nav a {
    padding:8px 7px;
    font-size:.7rem
  }
  .topbar .search {
    flex:0 0 130px;
    width:130px
  }
  .topbar .profile-button {
    flex-shrink:0
  }
}

@media(min-width:701px) and (max-width:1250px) {
  .topbar {
    flex-wrap:wrap
  }
  .topbar>.brand {
    margin-right:auto
  }
  .topbar .sidebar {
    order:10;
    flex:1 0 100%;
    min-width:0;
    width:100%
  }
  .topbar .nav {
    justify-content:space-between
  }
  .topbar .nav a {
    flex:1
  }
  .topbar .search {
    flex:0 0 190px;
    width:190px
  }
}

.hero-grow {
  color:#6948da
}

.hero-dream {
  color:#d23b83
}

.hero-explore {
  color:#c06413
}

.section-editor {
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  margin:20px 0
}

.reader-help-portrait {
  width:110px;
  aspect-ratio:1;
  margin:0 auto 18px
}

.author-picture {
  width:100px;
  height:100px;
  object-fit:cover;
  border-radius:50%;
  margin-bottom:18px
}

.page-introduction {
  padding:12px 18px;
  background:#ffffffa0;
  border-radius:16px
}

.reader-viewport .page-group.double.rtl {
  direction:rtl
}

.reader-viewport .page-group.double.rtl>.reader-page {
  direction:ltr
}

@media(min-width:701px) {
  .topbar .sidebar {
    min-width:0
  }
  .topbar .nav {
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:thin
  }
  .topbar .nav a {
    flex-shrink:0
  }
}

.event-image {
  aspect-ratio:2.5;
  max-height:250px;
  border-radius:15px;
  overflow:hidden;
  margin-bottom:15px
}

.event-image img,.event-image video {
  width:100%;
  height:100%;
  object-fit:cover
}