/* 源氏の間 — interface.
   Même socle que 千, 仮名, 篆, 粋, 色 et 字 : le papier domine, hiérarchie par
   l'espacement, aucune couleur qui ne soit fonctionnelle, angles vifs.
   À gauche le dictionnaire (ou une figure seule), à droite ce qu'on veut dire. */

:root {
  --papier: #f6f3ec;
  --encre: #161310;
  --discret: #8b8378;
  --trait: rgba(22, 19, 16, 0.12);
  --fond-panneau: #fbf9f4;
  --shu: #8a1f14;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100% }

body {
  background: var(--papier);
  color: var(--encre);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Songti SC', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

#scene { display: grid; grid-template-columns: 1fr 300px; height: 100vh; overflow: hidden }
#scene > * { min-height: 0; min-width: 0 }

#stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 2rem 2rem 1rem }
.vue { flex: 1 1 auto; min-height: 0; overflow: auto }
.vue > * { max-width: 72rem; margin: 0 auto }

/* ---- le dictionnaire : une case par figure ---- */
.filtre { font-size: 0.74rem; letter-spacing: 0.08em; color: var(--discret); padding-bottom: 0.9rem }
.filtre b { font-weight: 400; color: var(--encre) }
.filtre button { font: inherit; background: none; border: 0; border-bottom: 1px solid var(--trait);
  color: var(--discret); cursor: pointer; margin-left: 0.6rem }
.filtre button:hover { color: var(--encre); border-color: var(--encre) }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 1px;
  background: var(--trait); border: 1px solid var(--trait) }
.case-zu { background: var(--papier); border: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; padding: 0.9rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem;
  transition: background 0.15s }
.case-zu:hover { background: var(--fond-panneau) }
.case-zu svg { width: 3.4rem; height: 3.4rem; align-self: center; margin-bottom: 0.35rem }
.case-zu .nom { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--discret) }
.case-zu .nom b { font-weight: 400; color: var(--encre); font-size: 0.86rem; letter-spacing: 0.1em }
.case-zu .dit { font-size: 0.86rem; line-height: 1.55 }
.case-zu.hors svg { opacity: 0.25 }
.vide { color: var(--discret); font-size: 0.86rem; letter-spacing: 0.1em; padding: 2rem 0 }

/* ---- une figure seule ---- */
.feuille { display: grid; grid-template-columns: minmax(12rem, 20rem) auto minmax(16rem, 28rem); gap: 2.6rem;
  align-items: start; justify-content: center; padding-top: 0.4rem; min-height: 100% }
.feuille .grand { width: 100%; aspect-ratio: 1; background: var(--fond-panneau); border: 1px solid var(--trait) }
.feuille .grand svg { width: 100%; height: 100% }
.tete-zu { display: flex; align-items: flex-start; gap: 1.1rem }
.numero { font-size: 4.2rem; line-height: 0.74; margin-top: 0.1rem; letter-spacing: -0.02em; font-variant-numeric: lining-nums }
.titre-zu { font-size: 0.74rem; letter-spacing: 0.12em; color: var(--discret); line-height: 1.6 }
.titre-zu b { display: block; font-weight: 400; color: var(--encre); font-size: 1.6rem; letter-spacing: 0.2em; line-height: 1.3 }
.titre-zu .trad { color: var(--encre) }
.hors-jeu { font-size: 0.68rem; color: var(--discret); padding-top: 0.5rem }
.dit-grand { font-size: 1.7rem; line-height: 1.45; letter-spacing: 0.04em; padding: 1rem 0 0.8rem;
  border-bottom: 1px solid var(--encre) }
.phrase { font-size: 0.95rem; line-height: 1.9; padding: 0.9rem 0 0.4rem }
.etiquettes { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem 0 0.2rem }
.etiquette { font: inherit; font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.2rem 0.5rem;
  background: none; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.etiquette:hover { border-color: var(--encre) }
.etiquette.info { cursor: default; color: var(--discret) }
.etiquette.info:hover { border-color: var(--trait) }
.bloc-texte { padding-top: 1.3rem }
.bloc-texte h3 { font-weight: 400; font-size: 0.64rem; letter-spacing: 0.22em; color: var(--discret);
  padding-bottom: 0.4rem }
.bloc-texte p { font-size: 0.84rem; line-height: 1.95 }
.waka { display: flex; flex-direction: row-reverse; gap: 1.2rem; align-items: flex-start; padding-top: 0.2rem }
/* deux colonnes, jamais coupées, alignées en haut */
.waka-orig, .waka-yomi { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 0.35em }
.waka-orig span, .waka-yomi span { writing-mode: vertical-rl; white-space: nowrap; letter-spacing: 0.12em; line-height: 1.3 }
.waka-yomi { color: var(--discret) }
.waka-trad { font-size: 0.84rem; line-height: 1.95 }

/* ---- le panneau ---- */
#panel { background: var(--fond-panneau); border-left: 1px solid var(--trait);
  overflow-y: auto; padding: 1.4rem 1.2rem 3rem }

.marque { padding-bottom: 1.4rem; border-bottom: 1px solid var(--trait); margin-bottom: 1.2rem }
.marque-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem }
.marque-kanji { font-size: 1.24rem; font-weight: 400; letter-spacing: 0.14em }
.marque-nom { font-size: 0.66rem; letter-spacing: 0.22em; color: var(--discret) }
.langues { display: flex; gap: 0.45rem }
.lang-opt { font: inherit; font-size: 0.68rem; letter-spacing: 0.1em; background: none; border: 0;
  color: var(--discret); cursor: pointer; padding: 0.1rem 0 }
.lang-opt.actif { color: var(--encre); border-bottom: 1px solid var(--encre) }

.bloc { display: flex; gap: 0.5rem; margin-bottom: 1.2rem }
.action { flex: 1 1 auto; font: inherit; font-size: 0.78rem; letter-spacing: 0.1em;
  padding: 0.55rem 0.4rem; background: var(--fond-panneau); border: 1px solid var(--trait);
  color: var(--encre); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s }
.action:hover { background: var(--encre); color: var(--papier); border-color: var(--encre) }
.action.majeure { background: var(--encre); color: var(--papier); border-color: var(--encre) }
.action.majeure:hover { background: var(--shu); border-color: var(--shu) }

.section { margin-bottom: 1.5rem }
.section-tete { display: flex; align-items: center; gap: 0.55rem; font-weight: 400;
  padding-bottom: 0.45rem; border-bottom: 1px solid var(--encre); margin-bottom: 0.9rem }
.sec-num { background: var(--encre); color: var(--papier); font-size: 0.62rem;
  letter-spacing: 0.06em; padding: 0.1rem 0.42rem; line-height: 1.5 }
.sec-titre { color: var(--encre); font-size: 0.74rem; letter-spacing: 0.22em }

/* l'arbre des intentions : les branches d'abord, en grand ; une branche ouverte montre ses mots */
.arbre { display: flex; flex-direction: column }
.branche-nom { display: flex; justify-content: space-between; align-items: baseline; width: 100%; font: inherit;
  font-size: 0.92rem; letter-spacing: 0.1em; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--trait); color: var(--encre); padding: 0.5rem 0.1rem; cursor: pointer }
.branche-nom:hover { background: var(--papier) }
.branche-nom small { font-size: 0.62rem; color: var(--discret); letter-spacing: 0.06em }
.branche-nom .fl { color: var(--discret); font-size: 0.7rem; margin-left: 0.5rem }
.branche.ouverte > .branche-nom { border-bottom-color: var(--encre) }
.branche.choisie > .branche-nom { background: var(--encre); color: var(--papier) }
.branche.choisie > .branche-nom small, .branche.choisie > .branche-nom .fl { color: var(--papier); opacity: 0.7 }
.branche .mots { display: none; padding: 0.6rem 0 0.8rem 0.6rem }
.branche.ouverte .mots { display: flex }
.branche-toutes .branche-nom { font-size: 0.74rem; color: var(--discret) }
.mots { flex-wrap: wrap; gap: 0.3rem }
.mot { font: inherit; font-size: 0.74rem; padding: 0.25rem 0.5rem; background: var(--papier);
  border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.mot:hover { border-color: var(--encre) }
.mot.actif { background: var(--encre); color: var(--papier); border-color: var(--encre) }
.mot small { color: var(--discret); font-size: 0.6rem; margin-left: 0.25rem }
.mot.actif small { color: var(--papier); opacity: 0.7 }

select { width: 100%; font: inherit; font-size: 0.8rem; padding: 0.45rem 0.5rem;
  background: var(--papier); border: 1px solid var(--trait); color: var(--encre); border-radius: 0 }

.choix { display: flex; gap: 0.35rem; margin-bottom: 0.6rem }
.choix button { flex: 1 1 auto; font: inherit; font-size: 0.74rem; padding: 0.4rem 0.2rem;
  background: var(--papier); border: 1px solid var(--trait); color: var(--discret); cursor: pointer }
.choix button.actif { background: var(--encre); color: var(--papier); border-color: var(--encre) }

.glissiere { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.5rem; align-items: center;
  margin-bottom: 0.7rem; font-size: 0.72rem; color: var(--discret) }
.glissiere input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--encre) }
.glissiere .val { font-size: 0.68rem; color: var(--encre); font-variant-numeric: tabular-nums }

.version { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--discret); padding-top: 0.6rem }
.credit { font-size: 0.66rem; padding-top: 0.4rem }
.credit a { color: var(--discret) }
.credit a:hover { color: var(--encre) }

.lien-discret { font: inherit; font-size: 0.66rem; letter-spacing: 0.1em; background: none; border: 0;
  border-bottom: 1px solid var(--trait); color: var(--discret); cursor: pointer; margin-top: 0.3rem }
.lien-discret:hover { color: var(--encre); border-color: var(--encre) }
.bloc-haut { margin-top: 0.8rem }
.action:disabled { opacity: 0.35; cursor: default }
.action:disabled:hover { background: var(--fond-panneau); color: var(--encre); border-color: var(--trait) }
.note { font-size: 0.68rem; line-height: 1.7; color: var(--discret); margin-top: -0.6rem; margin-bottom: 0.4rem }
#policeNote { margin-top: 0.4rem }

.toast { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 60;
  background: var(--encre); color: var(--papier); font-size: 0.76rem; letter-spacing: 0.08em;
  padding: 0.6rem 1rem; max-width: 90vw }

@media (max-width: 1280px) and (min-width: 821px) {
  .feuille { grid-template-columns: minmax(11rem, 17rem) auto }
  .col-texte { grid-column: 1 / -1; max-width: 34rem }
}

@media (max-width: 820px) {
  /* comme ten, shiki et iki : la vue reste en haut, le panneau défile dessous ; on voit l'effet de chaque réglage sans remonter */
  #scene { display: block; height: auto; overflow: visible }
  #stage { position: sticky; top: 0; z-index: 5; height: 42vh; min-height: 15rem; padding: 0.8rem 1rem;
    background: var(--papier); border-bottom: 1px solid var(--trait) }
  .vue { height: 100%; overflow: auto }
  #panel { border-left: 0 }
  /* la fiche : le symbole en haut à gauche, le poème dessous, les mots à droite — on voit d'emblée qu'il y a du texte */
  .feuille { grid-template-columns: minmax(7rem, 38%) 1fr; gap: 0.9rem 1rem; min-height: 0; align-items: start }
  .col-zu { grid-column: 1; grid-row: 1 }
  .col-waka { grid-column: 1; grid-row: 2 }
  .col-texte { grid-column: 2; grid-row: 1 / span 2 }
  .col-waka .waka { justify-content: center; gap: 0.6rem }
  .numero { font-size: 2.6rem }
  .titre-zu b { font-size: 1.2rem }
  .dit-grand { font-size: 1.2rem; padding: 0.6rem 0 0.5rem }
  .phrase { font-size: 0.86rem; line-height: 1.8; padding-top: 0.6rem }
  /* un fondu en bas du cadre : la suite se devine */
  #stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem; pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 243, 236, 0), var(--papier)) }
  .grille { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)) }
}
}