/* Liseuses (Gastronomy, édition B2B) — même interface que le site immersive.paris
 * Chargée après reader.css et brand.css : en-tête et navigation du site,
 * couleurs du site (fond, texte, lignes), boutons en pilule, panneaux arrondis.
 * La couleur d'accent reste celle de chaque ouvrage (--brand-violet dans brand.css).
 */
:root { --bg: #0a0a0a; --fg: #f5f1ea; --muted: #8a847b; --line: #2a2724; --site-accent: #ED5028; }
body, .landing, .reader { background: #0a0a0a; color: var(--fg); }
.ambient { background: radial-gradient(ellipse at 76% 52%, rgba(var(--violet-rgb), 0.16), transparent 48%); }

/* ─── En-tête du site ─────────────────────────────────────── */
.landing-header.site-bar {
  height: auto; min-height: 74px; padding: 14px 32px; gap: 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, #0a0a0a 85%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.site-logo { font-family: 'Karla', Arial, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); text-decoration: none; display: flex; align-items: baseline; }
.site-logo .a, .site-logo .p { color: var(--site-accent); }
.site-logo .a { margin-right: 4px; }
.site-logo sup { font-size: 9px; opacity: 0.6; margin-left: 1px; }
.site-nav { display: flex; gap: 30px; }
.site-nav a { position: relative; font-family: 'Karla', Arial, sans-serif; font-size: 13px; letter-spacing: 0.02em; color: var(--fg); opacity: 0.6; text-decoration: none; padding: 6px 0; transition: opacity 0.2s; }
.site-nav a:hover, .site-nav a.on { opacity: 1; }
.site-nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px; background: var(--site-accent); }
.site-bar .landing-header-actions { justify-self: end; }

/* ─── Formes du site : pilules et panneaux arrondis ───────── */
.primary, .secondary { border-radius: 999px !important; }
.primary { box-shadow: 0 10px 30px -18px var(--brand-violet); }
dialog { border-radius: 16px; border-color: var(--line); background: #141414; }
.navigator { border-radius: 16px 0 0 16px; }
.access-dialog { border-radius: 18px; }
.access-form input, #search-input { border-radius: 999px !important; }
.toast { border-radius: 999px; }
.thumb img { border-radius: 6px; }

/* ─── Sommaire visible sur l'accueil (édition B2B) ────────── */
.landing-parts { list-style: none; margin: 22px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 560px; }
.landing-parts button { display: inline-flex; align-items: baseline; gap: 8px; font: inherit; font-size: 12.5px; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.landing-parts button span { font-size: 10px; letter-spacing: 0.08em; color: var(--brand-violet); font-variant-numeric: tabular-nums; }
.landing-parts button:hover { border-color: var(--brand-violet); background: rgba(var(--violet-rgb), 0.08); }
.edition-note a { color: var(--accent); }

/* Miniatures réservées : floutées, avec un cadenas */
.thumb.is-locked { position: relative; }
.thumb.is-locked::after { content: '🔒'; position: absolute; top: 8px; right: 8px; font-size: 12px; filter: grayscale(1); opacity: 0.8; }

/* ─── Mobile : même en-tête que le site ───────────────────── */
@media (max-width: 900px) {
  .landing-header.site-bar { grid-template-columns: 1fr auto; padding: 12px 16px 0; gap: 0; }
  .site-bar .site-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .site-nav a { text-align: center; font-size: 12px; padding: 14px 2px 13px; white-space: nowrap; }
  .site-nav a.on::after { bottom: 0; }
  .site-bar .publication { display: none; }
}

/* ─── Panneaux : palette neutre du site, accent de l'ouvrage ─ */
dialog::backdrop { background: rgba(10,10,10,0.72); }
.panel-tabs button { color: var(--muted); }
.panel-tabs button[aria-selected=true] { color: var(--fg); border-color: var(--brand-violet); }
.panel-content { scrollbar-color: #3a3632 transparent; }
.toc-item { border-bottom-color: var(--line); }
.toc-item .toc-number { color: var(--brand-violet); }
.toc-item .toc-title { color: #d9d3ca; font-size: 13px; }
.toc-item .toc-note { color: var(--muted); }
.toc-item .toc-arrow { color: var(--brand-violet); }
.toc-item.current .toc-number { color: var(--accent); }
.panel-footer, .thumb, .search-status, .zoom-hint, .text-disclaimer { color: var(--muted); }
.thumb img { background: #1a1917; }
.thumb.current img { border-color: var(--brand-violet); box-shadow: 0 0 0 2px rgba(var(--violet-rgb), 0.18); }
.thumb:hover img { border-color: #4a4540; }
#search-input { background: #141414; color: var(--fg); border-color: var(--line); padding-left: 18px; }
#search-input::placeholder { color: var(--muted); }
.search-result strong { color: var(--brand-violet); }
.search-result p, .page-text { color: #d9d3ca; }
.search-result mark { background: rgba(var(--violet-rgb), 0.45); }
.zoom-dialog { background: #0a0a0a; }
.zoom-percent, .text-controls button { color: var(--fg); }
.text-controls button { border-radius: 999px; }
.text-controls button[aria-pressed=true] { background: rgba(var(--violet-rgb), 0.25); }
.toast { background: #1a1917; border-color: var(--line); color: var(--fg); }
.intro-details { color: var(--muted); }
.intro-details span+span::before { color: var(--line); }
.landing-footer { border-top-color: var(--line); }
.sound-button { color: var(--muted); }
.edition-number { -webkit-text-stroke-color: rgba(var(--violet-rgb), 0.22); }

/* L'accueil défile quand le contenu dépasse (sommaire visible sur petit écran) */
.landing { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.landing-main { flex: 1 0 auto; }
.landing-header, .landing-footer { flex-shrink: 0; }
@media (max-width: 760px) { .landing-main { padding-top: 12px; padding-bottom: 24px; } }
.landing { height: 100%; min-height: 0 !important; }

/* Barre de lecture : champ de page et compteur aux couleurs du site */
.page-navigation input { background: #141414; border-color: var(--line); border-radius: 999px; color: var(--fg); width: 44px; }
#page-range, .page-total { color: var(--muted); }
.page-navigation input:focus { border-color: var(--brand-violet); }

/* Mac à écran bas : l'accueil de la liseuse tient sans défiler */
@media (max-height: 800px) and (min-width: 761px) {
  .landing-header.site-bar { min-height: 62px; padding-top: 10px; padding-bottom: 10px; }
  .site-nav a.on::after { bottom: -14px; }
  .landing-parts { margin-top: 14px; }
  .intro-details { margin-top: 16px; }
  .landing-footer { height: 52px; }
}