/* 言葉の間 — interface.
   Règle de kuma (26/10) : le regard ne doit pas sauter. On suit les principes reconnus pour une recherche :
   - une seule colonne que l'œil descend, sans ligne qui traverse l'écran (longueur de ligne de 45 à 75 signes,
     bringhurst, butterick) ;
   - le modèle « liste et fiche » : les filtres en facettes juste au-dessus des résultats, la fiche du texte choisi
     tout à côté (nielsen norman group) ;
   - chaque choix change la liste aussitôt, avec le nombre de textes (shneiderman, « dynamic queries ») ;
   - des cibles d'au moins 44 points au toucher (apple, loi de fitts), peu de choix visibles à la fois (loi de hick).
   L'ensemble reste au centre, même sur un très grand écran.
   Même socle que les autres outils : papier, encre, angles vifs ; tout se lit en taille normale (kuma, 28/09) ;
   le vermillon ne marque qu'un repère. */

:root {
  --papier: #f6f3ec;
  --encre: #161310;
  --discret: #6f685e;
  --trait: rgba(22, 19, 16, 0.14);
  --fond-panneau: #fbf9f4;
  --shu: #b8372a;
  --col: 24rem;
  --cible: 2.75rem;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { height: 100% }
body { background: var(--papier); color: var(--encre); min-height: 100%;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Songti SC', Georgia, serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100% }

.cadre { display: grid; grid-template-columns: var(--col) minmax(0, 34rem); gap: 0 2.4rem; justify-content: center;
  max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.2rem 2rem; align-items: start }

/* ---- la colonne ---- */
.colonne { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0 }
.marque-ligne { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid var(--encre) }
.marque { display: flex; align-items: center; gap: 0.5rem }
.marque-kanji { font-size: 1.2rem; font-weight: 400; letter-spacing: 0.14em; white-space: nowrap }
.colonne .shonoma-achat { display: none }
.langues { display: flex; gap: 0.2rem }
.lang-opt { font: inherit; font-size: 0.82rem; letter-spacing: 0.1em; background: none; border: 0; color: var(--discret); cursor: pointer; min-width: 2rem; min-height: 2rem }
.lang-opt.actif { color: var(--encre); text-decoration: underline; text-underline-offset: 0.25em }

.cherche { width: 100%; min-height: var(--cible); font: inherit; font-size: 1rem; padding: 0.5rem 0.65rem; background: #fff; border: 1px solid var(--encre);
  color: var(--encre); border-radius: 0; margin-top: 0.4rem }
.actions { display: flex; gap: 0.5rem }
.action { min-height: var(--cible); font: inherit; font-size: 0.92rem; letter-spacing: 0.08em; padding: 0.5rem 0.7rem; 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 }
.actions .action { flex: 1 1 0 }
.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) }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px }

/* les filtres : une ligne par filtre, le nom à gauche, la liste à droite, alignés sur une même verticale */
.filtres { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.3rem 0 }
.filtre { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: 0.6rem }
.filtre span { font-size: 0.86rem; color: var(--encre); letter-spacing: 0.04em; line-height: 1.3 }
.filtre select { width: 100%; min-height: var(--cible); font: inherit; font-size: 0.95rem; padding: 0.35rem 0.45rem; background: #fff; border: 1px solid var(--trait);
  color: var(--encre); border-radius: 0 }
.filtre select.choisi { border-color: var(--shu); box-shadow: inset 3px 0 0 var(--shu) }

.plier-filtres { display: none; align-items: center; justify-content: space-between; width: 100%; min-height: var(--cible); font: inherit; font-size: 0.92rem;
  padding: 0.4rem 0.6rem; background: #fff; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.plier-filtres b { font-weight: 400; color: var(--shu) }
.modes { display: flex; border-bottom: 1px solid var(--encre); margin-top: 0.4rem }
.modes button { flex: 1 1 0; min-height: var(--cible); font: inherit; font-size: 0.92rem; padding: 0.4rem 0.6rem; background: none; border: 0; color: var(--discret);
  cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px }
.modes button.actif { color: var(--encre); border-bottom-color: var(--encre) }

/* ---- la liste : une seule colonne, les textes l'un sous l'autre ---- */
.tete-liste { font-size: 0.95rem; padding: 0.2rem 0 0.4rem }
.liste { display: flex; flex-direction: column; border-top: 1px solid var(--trait) }
.carte { background: none; border: 0; border-bottom: 1px solid var(--trait); font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: 0.6rem 0.5rem 0.55rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; min-height: var(--cible) }
.carte:hover { background: var(--fond-panneau) }
.carte.actif { background: #fff; box-shadow: inset 3px 0 0 var(--shu) }
.carte .t { font-size: 1.3rem; letter-spacing: 0.08em; line-height: 1.35; overflow-wrap: anywhere }
.carte .t.long { font-size: 1rem; line-height: 1.6 }
.carte .y { font-size: 0.86rem; line-height: 1.5 }
.carte .m { font-size: 0.88rem; line-height: 1.5 }
.carte .g { font-size: 0.78rem; color: var(--shu); letter-spacing: 0.06em }
.plus { display: block; width: 100%; min-height: var(--cible); margin: 0.8rem 0; font: inherit; font-size: 0.92rem; padding: 0.55rem; background: var(--fond-panneau);
  border: 1px solid var(--encre); color: var(--encre); cursor: pointer }
.plus:hover { background: var(--encre); color: var(--papier) }
.vide { font-size: 0.95rem; line-height: 1.8; padding: 1rem 0 }

/* ---- l'arborescence ---- */
.arbre { font-size: 0.98rem; border-top: 1px solid var(--trait) }
.noeud { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; min-height: var(--cible); font: inherit; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--trait); color: var(--encre); padding: 0.55rem 0.2rem; cursor: pointer }
.noeud:hover { background: var(--fond-panneau) }
.noeud .signe { width: 1.1rem; flex: none; text-align: center; color: var(--shu); font-family: Georgia, serif }
.noeud .nb { margin-left: auto; font-size: 0.84rem; font-variant-numeric: tabular-nums }
.noeud.feuille .t { font-size: 1.1rem; letter-spacing: 0.06em }
.noeud.feuille .y { font-size: 0.84rem }
.noeud.feuille.actif { background: #fff; box-shadow: inset 3px 0 0 var(--shu) }
.branches { padding-left: 0.9rem; border-left: 1px solid var(--trait); margin-left: 0.55rem }

/* ---- la fiche : à côté de la colonne, elle reste à hauteur des yeux ---- */
.fiche-zone { position: sticky; top: 1.2rem; max-height: calc(100vh - 2.4rem); overflow: auto; padding-top: 2.6rem; min-width: 0 }
.fiche-vide { font-size: 0.95rem; line-height: 1.8; border-left: 1px solid var(--trait); padding-left: 1.2rem; max-width: 22rem }
.fermer-fiche { display: none }
.fiche { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: start }
.grand { writing-mode: vertical-rl; font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: 0.16em; line-height: 1.25;
  max-height: 70vh; padding: 1rem 0.8rem; background: #fff; border: 1px solid var(--trait) }
.grand.long { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.6 }
.grand.horizontal { writing-mode: horizontal-tb; max-height: none }
.yomi { font-size: 1.05rem; line-height: 1.8; letter-spacing: 0.06em; padding-bottom: 0.8rem; border-bottom: 1px solid var(--encre) }
.sens { font-size: 1rem; line-height: 1.85; padding: 0.8rem 0 0.3rem; max-width: 34em }
.sens.manque { font-size: 0.92rem }
.bloc-texte { padding-top: 1rem }
.bloc-texte h3 { font-weight: 400; font-size: 0.84rem; letter-spacing: 0.12em; color: var(--shu); padding-bottom: 0.3rem }
.bloc-texte p { font-size: 0.92rem; line-height: 1.8 }
.bloc-texte a { color: var(--encre) }
.bloc-texte select { width: 100%; min-height: var(--cible); font: inherit; font-size: 0.95rem; padding: 0.4rem 0.45rem; background: #fff; border: 1px solid var(--trait); border-radius: 0 }
.etiquettes { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.6rem }
.etiquette { font: inherit; font-size: 0.86rem; min-height: 2.2rem; padding: 0.3rem 0.6rem; background: none; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.etiquette:hover { border-color: var(--encre) }
.note { font-size: 0.9rem; line-height: 1.7; margin-top: 0.6rem }
.envois { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.2rem }
a.action { display: flex; align-items: center; text-decoration: none; line-height: 1.45 }
.envois .action { text-align: left; justify-content: flex-start }

.pied-outil { max-width: 62rem; margin: 0 auto; font-size: 0.82rem; padding: 0.8rem 1.2rem 1.4rem; color: var(--encre) }
.pied-outil a { color: var(--encre) }
#version { color: var(--discret) }
.toast { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 60; background: var(--encre); color: var(--papier);
  font-size: 0.88rem; letter-spacing: 0.08em; padding: 0.6rem 1rem; max-width: 90vw }

@media (max-width: 900px) {
  /* téléphone et petite tablette : la colonne seule ; la fiche monte du bas de l'écran */
  .cadre { display: block; padding: 0.8rem 0.9rem 2rem }
  .fiche-zone { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 82svh; z-index: 40; background: var(--fond-panneau);
    border-top: 1px solid var(--encre); box-shadow: 0 -18px 40px -24px rgba(22, 19, 16, 0.7);
    padding: 0.8rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform 0.25s }
  .fiche-zone.ouverte { transform: none }
  .fiche-vide { display: none }
  /* sur téléphone, les filtres se replient derrière un seul bouton : la liste reste à portée de pouce */
  .plier-filtres { display: flex }
  .filtres { display: none }
  .filtres.ouverts { display: flex }
  .fermer-fiche { display: block; margin-left: auto; margin-bottom: 0.6rem; min-height: var(--cible); font: inherit; font-size: 0.92rem; padding: 0.35rem 0.9rem;
    background: var(--papier); border: 1px solid var(--encre); color: var(--encre) }
  .fiche { gap: 0.9rem }
  .grand { font-size: 2rem; max-height: 46svh; padding: 0.6rem 0.45rem }
  .grand.long { font-size: 1.15rem }
}
@media (prefers-reduced-motion: reduce) { .fiche-zone { transition: none } }

/* ---- les quatre façons de flâner ---- */
/* le jeu a besoin d'un peu plus de place : la colonne s'élargit, la fiche reste à côté */
.cadre.en-jeu { grid-template-columns: minmax(0, 36rem) minmax(0, 24rem); max-width: 64rem }
.jeux-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0.4rem 0 0.2rem }
.jeux-choix button { min-height: var(--cible); font: inherit; font-size: 0.9rem; padding: 0.35rem 0.4rem; background: #fff; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.jeux-choix button.actif { background: var(--encre); color: var(--papier); border-color: var(--encre) }
.jeu-aide { font-size: 0.9rem; line-height: 1.6; padding: 0.4rem 0 0.6rem }

/* de caractère en caractère */
.piste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding-bottom: 0.5rem }
.piste button { min-width: var(--cible); min-height: var(--cible); font: inherit; font-size: 1.15rem; background: #fff; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.piste button.actif { border-color: var(--shu); color: var(--shu) }
.piste .fleche { color: var(--discret) }
.piste .relancer { margin-left: auto; font-family: Georgia, serif }
.centre { display: flex; align-items: baseline; gap: 1rem; padding: 0.4rem 0 0.8rem; border-bottom: 1px solid var(--encre) }
.centre-car { font-size: 4.2rem; line-height: 1; color: var(--shu) }
.centre-nb { font-size: 0.95rem }
.chemin { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--trait); padding: 0.25rem 0 }
.chemin.actif { box-shadow: inset 3px 0 0 var(--shu); background: #fff }
.chemin-t { display: flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0 }
.chemin-t .car { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; min-height: var(--cible); font: inherit; font-size: 1.35rem;
  background: none; border: 0; color: var(--encre); padding: 0 0.1rem }
.chemin-t button.car { cursor: pointer; text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 0.3em }
.chemin-t button.car:hover { color: var(--shu); text-decoration-color: var(--shu) }
.chemin-t .ici { color: var(--shu) }
.chemin-voir { flex: none; min-height: var(--cible); font: inherit; font-size: 0.86rem; background: none; border: 0; color: var(--encre); cursor: pointer; padding: 0 0.4rem; text-align: right; max-width: 11rem }

/* la roue de l'année */
.roue { display: block; width: min(100%, 24rem); margin: 0 auto; touch-action: none; cursor: grab; user-select: none }
.roue-bord { fill: none; stroke: var(--encre); stroke-width: 1 }
.roue-trait { stroke: var(--trait); stroke-width: 1 }
.roue-nom { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: 14px; fill: var(--encre); cursor: pointer }
.roue-nom.actif { fill: var(--shu); font-size: 17px }
.roue-repere { fill: var(--shu) }
.roue-nav { display: grid; grid-template-columns: var(--cible) 1fr var(--cible); gap: 0.5rem; align-items: center; padding: 0.6rem 0 0.8rem; border-bottom: 1px solid var(--encre) }
.roue-nav .action { font-size: 1.3rem; padding: 0 }
.roue-titre { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; font-size: 0.9rem }
.roue-titre b { font-weight: 400; font-size: 1.8rem; letter-spacing: 0.2em; color: var(--shu) }

/* les mots qui tombent */
.champ { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--trait) }
.goutte { position: absolute; transform: translate(-50%, 0); writing-mode: vertical-rl; font: inherit; letter-spacing: 0.14em; line-height: 1.2;
  background: rgba(255, 255, 255, 0.82); border: 0; color: var(--encre); cursor: pointer; padding: 0.2rem; white-space: nowrap }
.goutte:hover, .goutte.actif { color: var(--shu) }

/* le jardin des longueurs */
.marche { border-bottom: 1px solid var(--trait); padding: 0.3rem 0 0.5rem }
.marche-nom { display: flex; align-items: baseline; gap: 0.6rem; width: 100%; min-height: var(--cible); font: inherit; font-size: 0.92rem; background: none; border: 0; color: var(--encre); cursor: pointer; padding: 0.2rem 0; text-align: left }
.marche-nom .pierres { color: var(--shu); letter-spacing: 0.1em; font-family: Georgia, serif }
.marche-nom .nb { margin-left: auto; font-size: 0.84rem }
.marche-textes { display: flex; flex-wrap: wrap; gap: 0.35rem }
.pas { min-height: var(--cible); font: inherit; font-size: 1.15rem; letter-spacing: 0.06em; padding: 0.3rem 0.6rem; background: #fff; border: 1px solid var(--trait); color: var(--encre); cursor: pointer }
.pas:hover, .pas.actif { border-color: var(--shu); color: var(--shu) }
@media (max-width: 900px) { .champ { height: 60svh !important } .centre-car { font-size: 3.4rem } }
.grand.attend { opacity: 0.45; transition: opacity 0.2s }
.etat-police:empty { display: none }
/* en jeu, les filtres se replient derrière un seul bouton (divulgation progressive) : le jeu monte à hauteur des yeux */
.en-jeu .plier-filtres { display: flex }
.en-jeu .filtres { display: none }
.en-jeu .filtres.ouverts { display: flex }
/* l'arborescence : chaque niveau a sa propre apparence, pour savoir où l'on est en dépliant (kuma, 26/10)
   niveau 1 (genre) : grand, filet d'encre ; niveau 2 (nombre de caractères) : moyen, repère vermillon ;
   niveau 3 (rangée de la lecture) : plus petit, en retrait ; les textes : en grand, comme sur le papier */
.noeud.n0 { font-size: 1.12rem; letter-spacing: 0.12em; border-bottom: 1px solid var(--encre); padding: 0.65rem 0.2rem }
.noeud.n0 .signe { font-size: 1.15rem }
.noeud.n0.ouvert { background: var(--fond-panneau) }
.noeud.n1 { font-size: 0.98rem; letter-spacing: 0.06em }
.noeud.n1 .signe { width: auto; padding: 0 0.35rem 0 0.1rem; color: var(--papier); background: var(--shu); font-size: 0.8rem; line-height: 1.5 }
.noeud.n2 { font-size: 0.9rem }
.noeud.n2 .signe { color: var(--encre) }
.branches.b0 { border-left: 2px solid var(--encre); margin-left: 0.5rem; padding-left: 0.9rem }
.branches.b1 { border-left: 1px solid var(--shu); margin-left: 0.4rem; padding-left: 0.9rem }
.branches.b2 { border-left: 1px dotted var(--encre); margin-left: 0.4rem; padding-left: 0.8rem }
.noeud.feuille .t { font-size: 1.2rem }
/* la fiche : la police en haut ; les envois vers les autres outils en liens discrets, précédés d'un ▸ */
.police-haut { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.3rem 0.7rem; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--trait) }
.police-haut span { font-size: 0.86rem; color: var(--shu); letter-spacing: 0.1em }
.police-haut select { width: 100%; min-height: var(--cible); font: inherit; font-size: 0.95rem; padding: 0.35rem 0.45rem; background: #fff; border: 1px solid var(--trait); border-radius: 0 }
.police-haut .etat-police { grid-column: 1 / -1; margin: 0 }
.envois { gap: 0 }
.envoi { display: flex; align-items: center; gap: 0.5rem; min-height: 2.6rem; font: inherit; font-size: 0.9rem; line-height: 1.4; text-align: left; text-decoration: none;
  color: var(--encre); background: none; border: 0; border-bottom: 1px solid var(--trait); padding: 0.3rem 0.1rem; cursor: pointer }
.envoi .fl { color: var(--shu); font-size: 0.8rem }
.envoi:hover { color: var(--shu) }
.envoi.copier { padding-left: 1.3rem }

/* ---- la barre du haut, commune aux deux ambiances ---- */
.barre { display: flex; align-items: center; gap: 1rem; max-width: 62rem; margin: 0 auto; padding: 0.9rem 1.2rem 0.6rem; border-bottom: 1px solid var(--encre) }
.barre .marque { flex: 1 1 0 }
.barre .langues { flex: 1 1 0; justify-content: flex-end }
.barre .shonoma-achat { display: none }
.ambiance { display: flex; border: 1px solid var(--encre) }
.ambiance button { min-height: 2.4rem; font: inherit; font-size: 0.92rem; padding: 0.3rem 1rem; background: #fff; border: 0; color: var(--encre); cursor: pointer; letter-spacing: 0.08em }
.ambiance button.actif { background: var(--encre); color: var(--papier) }
body.ambiance-joie .cadre { display: none }
body.ambiance-majime .joie { display: none }
body.ambiance-joie .pied-outil { max-width: 46rem }

/* ---- l'ambiance joyeuse : un seul geste à la fois, et tout répond ---- */
.joie { max-width: 46rem; margin: 0 auto; padding: 1rem 1.2rem 2rem }
.joie-scene { display: flex; align-items: flex-end; gap: 0.6rem; min-height: 9rem }
.joie-chien { width: 8.5rem; flex: none }
.joie-chien img { width: 100%; height: auto; display: block; mix-blend-mode: multiply }
.joie-chien.saute { animation: saute 0.5s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes saute { 0% { transform: translateY(0) } 35% { transform: translateY(-14px) rotate(-3deg) } 70% { transform: translateY(2px) } 100% { transform: none } }
.joie-bulle { position: relative; align-self: center; font-size: 1.5rem; line-height: 1.4; padding: 0.7rem 1.1rem; background: #fff; border: 2px solid var(--encre); border-radius: 1.2rem; margin-bottom: 2.4rem }
.joie-bulle::before { content: ""; position: absolute; left: -14px; bottom: 14px; border: 8px solid transparent; border-right: 14px solid var(--encre) }

.joie-ordres { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.8rem; margin-top: 0.8rem }
.num { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none; background: var(--shu); color: #fff; font-size: 0.95rem; font-family: Georgia, serif }
.joie-de { display: flex; align-items: center; gap: 0.6rem; min-height: 4rem; font: inherit; font-size: 1.1rem; padding: 0.5rem 1.1rem 0.5rem 0.6rem; background: var(--encre); color: var(--papier);
  border: 0; cursor: pointer; box-shadow: 0 6px 0 var(--shu); transition: transform 0.1s, box-shadow 0.1s; animation: invite 2.6s ease-in-out infinite }
.joie-de:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--shu) }
.joie-de .pips { font-size: 2.2rem; line-height: 1 }
.joie-de.roule .pips { display: inline-block; animation: roule 0.45s ease-out }
@keyframes roule { 0% { transform: rotate(0) scale(1) } 50% { transform: rotate(270deg) scale(1.25) } 100% { transform: rotate(360deg) scale(1) } }
@keyframes invite { 0%, 85%, 100% { transform: none } 90% { transform: rotate(-4deg) } 95% { transform: rotate(4deg) } }
.joie-ou { font-size: 0.95rem }
.joie-champ { display: flex; align-items: center; gap: 0.5rem; min-width: 0 }
.joie-champ .fleche { color: var(--shu); font-size: 1.3rem }
.joie-champ input { flex: 1 1 auto; min-width: 0; min-height: 3.2rem; font: inherit; font-size: 1.25rem; padding: 0.4rem 0.7rem; background: #fff;
  border: 2px dashed var(--shu); border-radius: 0; color: var(--encre) }
.joie-champ input:focus { border-style: solid; outline: none }
.joie-aide { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; min-height: 1.4em }

.joie-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.8rem; perspective: 1200px }
.jcarte { aspect-ratio: 5 / 7; cursor: pointer; animation: tombe 0.5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 55ms) }
@keyframes tombe { from { opacity: 0; transform: translateY(-40px) rotate(calc((var(--i) - 4.5) * 3deg)) } to { opacity: 1; transform: none } }
.jcarte:hover .jcarte-in { transform: translateY(-4px) rotate(-1deg) }
.jcarte-in { position: relative; width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d }
.jcarte.retournee { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 22rem; cursor: default }
.jcarte.retournee .jcarte-in { transform: rotateY(180deg) }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fffdf8; border: 2px solid var(--encre); box-shadow: 0 8px 18px -12px rgba(22, 19, 16, 0.6) }
.recto { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.6rem }
.cachet { position: absolute; top: 0.45rem; right: 0.45rem; writing-mode: vertical-rl; font-size: 0.8rem; letter-spacing: 0.1em; color: #fff; background: var(--shu); padding: 0.3rem 0.15rem }
.c-t { writing-mode: vertical-rl; font-size: 2.2rem; letter-spacing: 0.12em; line-height: 1.2; max-height: 78%; overflow: hidden }
.c-t.long { font-size: 1.4rem }
.c-guide { position: absolute; left: 0.3rem; bottom: 0.3rem; width: 2.8rem; height: 2.8rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--trait); background: #fff }
.verso { transform: rotateY(180deg); padding: 0.9rem 1rem; overflow: auto; display: flex; flex-direction: column; gap: 0.35rem }
.v-tete { display: flex; align-items: center; gap: 0.6rem }
.v-tete img { width: 3.6rem; height: 3.6rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--trait); flex: none }
.v-bulle { font-size: 0.95rem; line-height: 1.5; background: var(--papier); border-radius: 0.8rem; padding: 0.4rem 0.7rem }
.v-t { font-size: 2rem; letter-spacing: 0.1em; margin-top: 0.3rem }
.v-y { font-size: 1rem }
.v-m { font-size: 1rem; line-height: 1.7 }
.v-actions { display: flex; flex-direction: column; gap: 0.3rem; margin-top: auto; padding-top: 0.5rem }
.v-ecrire { display: flex; align-items: center; justify-content: center; min-height: var(--cible); font-size: 1.05rem; text-decoration: none; background: var(--shu); color: #fff; box-shadow: 0 4px 0 #7a1f15 }
.v-ecrire:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a1f15 }
.v-lien { display: flex; align-items: center; min-height: 2.4rem; font: inherit; font-size: 0.92rem; text-decoration: none; color: var(--encre); background: none; border: 0; border-bottom: 1px solid var(--trait); cursor: pointer; text-align: left; padding: 0 }
.joie-vide { display: flex; align-items: center; gap: 1rem; grid-column: 1 / -1; font-size: 1.3rem }
.joie-vide img { width: 7rem; mix-blend-mode: multiply }

@media (max-width: 700px) {
  .barre { padding: 0.6rem 0.8rem; gap: 0.5rem }
  .barre .marque-kanji { font-size: 1rem }
  .ambiance button { padding: 0.3rem 0.6rem; font-size: 0.86rem }
  .joie { padding: 0.6rem 0.8rem 2rem }
  .joie-chien { width: 6rem }
  .joie-bulle { font-size: 1.15rem; margin-bottom: 1.6rem }
  .joie-ordres { grid-template-columns: 1fr; gap: 0.6rem }
  .joie-ou { text-align: center }
  .joie-cartes { grid-template-columns: repeat(2, 1fr) }
  .jcarte.retournee { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) {
  .joie-chien.saute, .joie-de, .joie-de.roule .pips, .jcarte { animation: none }
  .jcarte-in { transition: none }
}
.v-t.long { font-size: 1.25rem; line-height: 1.7 }
@media (max-width: 700px) {
  .barre { flex-wrap: wrap }
  .barre .marque { order: 1 }
  .barre .langues { order: 2 }
  .ambiance { order: 3; flex: 1 1 100% }
  .ambiance button { flex: 1 1 0 }
}
.jcarte.retournee { min-height: 26rem }

/* ---- l'ambiance joyeuse, sur le modèle du nouveau 篆の間 (26/10) :
   des étapes encadrées et numérotées, des flèches entre elles, ▶ devant le champ, un petit dé carré,
   et les réglages fins repliés dans un cadre en pointillés ---- */
.joie { max-width: 40rem }
.joie-scene { min-height: 0; align-items: center; margin-bottom: 0.6rem }
.joie-chien { width: 4.6rem }
.joie-chien img { mix-blend-mode: normal }
.joie-bulle { font-size: 1.1rem; margin-bottom: 0; padding: 0.45rem 0.9rem; border-width: 1.5px }
.jetape { border: 2px solid var(--encre); background: #fff; padding: 0.85rem 0.9rem 0.9rem }
.jetape-tete { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem }
.jetape-num { flex: none; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--shu); color: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1 }
.jetape-titre { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.08em }
.jfleche { text-align: center; color: var(--shu); font-size: 1.6rem; line-height: 1; margin: 0.3rem 0; font-weight: 700 }
.joie-ligne { display: flex; align-items: center; gap: 0.6rem }
.joie-ligne + .joie-ligne { margin-top: 0.6rem }
.fleche-champ { flex: none; font-size: 1.4rem; line-height: 1; font-weight: 700 }
.joie-input { flex: 1 1 auto; min-width: 0; min-height: 3.2rem; font: inherit; font-size: 1.3rem; text-align: center; padding: 0.4rem 0.7rem; background: #fff; border: 2px solid var(--encre); border-radius: 0; color: var(--encre) }
.joie-input:focus { outline: 2px solid var(--shu); outline-offset: 2px }
.joie-de { width: 3rem; height: 3rem; min-height: 0; padding: 0; justify-content: center; background: #fff; color: var(--encre); border: 2px solid var(--encre); box-shadow: none; animation: none }
.joie-de:hover { background: var(--encre); color: var(--papier) }
.joie-de:active { transform: translateY(1px); box-shadow: none }
.joie-de .pips { font-size: 1.5rem }
.joie-ligne-de .joie-de { animation: invite 3.2s ease-in-out infinite }
.joie-de-txt { font: inherit; font-size: 1rem; background: none; border: 0; border-bottom: 1px solid var(--encre); color: var(--encre); cursor: pointer; padding: 0.2rem 0 }
.joie-attente { font-size: 0.95rem; line-height: 1.7 }
.jaffiner { border: 2px dashed var(--encre); background: #fff; padding: 0 0.9rem }
.jaffiner > summary { display: flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; list-style: none; padding: 0.7rem 0 }
.jaffiner > summary::-webkit-details-marker { display: none }
.jaffiner > summary::after { content: "＋"; margin-left: auto; color: var(--shu) }
.jaffiner[open] > summary { border-bottom: 2px solid var(--encre); margin-bottom: 0.6rem }
.jaffiner[open] > summary::after { content: "−" }
.jaffiner-corps { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.8rem }
.jregistres { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.2rem 0.6rem }
.jreg { display: flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; font-size: 0.95rem; cursor: pointer }
.jreg input { width: 1.15rem; height: 1.15rem; accent-color: var(--shu) }
.e3-t { font-size: 1.9rem; letter-spacing: 0.1em; margin-bottom: 0.6rem }
.e3-liens { display: flex; flex-direction: column; margin-top: 0.5rem }
.joie-cartes { grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); gap: 0.6rem }
.c-t { font-size: 1.9rem }
.jcarte.retournee { min-height: 20rem }
.joie-cartes .joie-attente, .joie-cartes .joie-vide { grid-column: 1 / -1 }
.recto { overflow: hidden }
.c-t.tres-long { font-size: 1rem; line-height: 1.35 }
.etiquette.info { cursor: default; display: inline-flex; align-items: center }

/* ---- l'ambiance joyeuse, architecture du nouveau 篆の間 (26/10) :
   à gauche la scène (en haut la carte choisie en grand, en bas les cartes tirées), à droite le panneau d'étapes ---- */
body.ambiance-joie .barre { max-width: none }
body.ambiance-joie .pied-outil { display: none }
.joie { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; height: calc(100vh - 4.1rem); height: calc(100svh - 4.1rem) }
.joie-scene2 { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; min-height: 0 }
.joie-detail { overflow: auto; padding: 1.4rem 2rem 1rem; display: flex; align-items: center; justify-content: center }
.joie-cartes { overflow: auto; padding: 0.9rem 2rem 1.2rem; border-top: 1px solid var(--trait); background: var(--fond-panneau);
  display: grid; grid-template-columns: repeat(5, minmax(0, 8.5rem)); justify-content: center; align-content: start; gap: 0.8rem; perspective: none }
.joie-panneau { border-left: 1px solid var(--trait); background: var(--fond-panneau); overflow: auto; padding: 1rem 1rem 2rem; display: flex; flex-direction: column }

.d-accueil { display: flex; align-items: center; gap: 0.8rem }
.d-accueil .joie-chien { width: 6rem }
.d-accueil .joie-bulle { font-size: 1.3rem }
.d-fiche { display: grid; grid-template-columns: auto minmax(0, 30rem); gap: 1.8rem; align-items: start; max-height: 100% }
.d-t { writing-mode: vertical-rl; font-size: clamp(2.4rem, 5vh, 3.8rem); letter-spacing: 0.16em; line-height: 1.25; max-height: 40vh; padding: 0.9rem 0.8rem; background: #fff; border: 2px solid var(--encre) }
.d-t.long { font-size: clamp(1.2rem, 2.4vh, 1.7rem); line-height: 1.6 }
.d-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0 }
.d-y { font-size: 1.05rem; letter-spacing: 0.06em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--encre) }
.d-m { font-size: 1.02rem; line-height: 1.75 }
.d-m.manque { font-size: 0.92rem }
.d-src { font-size: 0.88rem; color: var(--encre) }
.d-envois { display: flex; flex-direction: column; margin-top: 0.4rem }
.d-envois .v-ecrire { margin-bottom: 0.3rem }

.jcarte { aspect-ratio: 5 / 7; position: relative; display: flex; align-items: center; justify-content: center; padding: 0.5rem; font: inherit; color: inherit;
  background: #fffdf8; border: 2px solid var(--encre); box-shadow: 0 8px 18px -12px rgba(22, 19, 16, 0.6); cursor: pointer; overflow: hidden; transition: transform 0.15s }
.jcarte:hover { transform: translateY(-4px) rotate(-1deg) }
.jcarte.choisie { outline: 3px solid var(--shu); outline-offset: 2px; transform: translateY(-4px) }
.jcarte .c-t { font-size: 1.7rem }
.jcarte .c-t.long { font-size: 1.15rem }
.jcarte .c-t.tres-long { font-size: 0.85rem }
.jcarte .c-guide { width: 2.2rem; height: 2.2rem }

.joie-panneau .jetape { padding: 0.75rem 0.8rem 0.8rem }
.jclasse { display: flex; flex-direction: column; gap: 0.3rem }
.jclasse .filtre { grid-template-columns: 6.6rem minmax(0, 1fr) }
.jclasse .joie-ligne { margin-top: 0.4rem }
.jraz { align-self: flex-start; margin-top: 0.3rem; font: inherit; font-size: 0.86rem; background: none; border: 0; border-bottom: 1px solid var(--trait); color: var(--encre); cursor: pointer; padding: 0.2rem 0 }
.joie-panneau .joie-input { font-size: 1.15rem; min-height: 2.9rem }

@media (max-width: 900px) {
  /* téléphone : la carte choisie, puis les cartes tirées (à faire défiler de côté), puis le panneau */
  .joie { display: block; height: auto }
  .joie-scene2 { display: block }
  .joie-detail { padding: 0.9rem 0.9rem 0.6rem; min-height: 12rem }
  .d-fiche { grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem }
  .d-t { font-size: 2.2rem; max-height: 46svh }
  .joie-cartes { display: flex; overflow-x: auto; padding: 0.8rem; gap: 0.6rem }
  .joie-cartes .jcarte { flex: 0 0 6.4rem }
  .joie-panneau { border-left: 0; border-top: 1px solid var(--encre) }
}

/* ---- 26/10, retours de kuma : le panneau collé à la scène (comme dans 篆の間), la fiche sans répliques,
   le classement sous la lecture, l'ouverture dans un autre outil par une liste, trois aperçus ---- */
.joie { grid-template-columns: minmax(0, 46rem) 21rem; justify-content: center }
.joie-panneau { border-right: 1px solid var(--trait) }
.joie-detail { align-items: flex-start }
.d-etiq { padding-top: 0.2rem }
.d-src a { color: var(--encre) }
.d-lib { font-size: 0.84rem; color: var(--shu); letter-spacing: 0.1em }
.d-ouvrir { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem }
.d-ouvrir-ligne { display: flex; gap: 0.5rem }
.d-outil { flex: 1 1 auto; min-width: 0; min-height: var(--cible); font: inherit; font-size: 0.95rem; padding: 0.35rem 0.45rem; background: #fff; border: 2px solid var(--encre); border-radius: 0 }
.d-aller { flex: none; display: flex; align-items: center; min-height: var(--cible); padding: 0 1rem; background: var(--shu); color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.06em }
.d-aller:hover { background: #8a1f14 }
.d-apercus { margin-top: 0.8rem }
.d-ap-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem }
.joie-de.petit { width: 2.4rem; height: 2.4rem }
.joie-de.petit .pips { font-size: 1.2rem }
.d-ap-ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: end }
.d-ap { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-decoration: none; color: var(--encre); font-size: 0.86rem }
.d-ap canvas { width: 100%; height: auto; max-height: 9rem; object-fit: contain; border: 1px solid var(--trait); background: #fff; transition: transform 0.15s }
.d-ap:hover canvas { transform: translateY(-3px) }
.d-ap:first-child canvas { background: none; border-color: transparent }
/* douze aperçus : un rang par outil, trois versions */
.d-ap-rang { margin-bottom: 0.6rem }
.d-ap-titre { display: block; font-size: 0.86rem; margin-bottom: 0.25rem }
.d-ap-ligne { grid-template-columns: repeat(3, minmax(0, 7rem)); justify-content: start }
.d-ap canvas { max-height: 8rem }
.d-ap-rang:first-of-type .d-ap canvas, .d-ap-rang:nth-of-type(2) .d-ap canvas { }
.d-apercus .d-ap-rang:nth-child(2) canvas { background: none; border-color: transparent }
.d-ap:first-child canvas { background: #fff; border-color: var(--trait) }
.d-apercus .d-ap-rang:nth-child(2) .d-ap canvas { background: none; border-color: transparent }

/* ---- une seule interface (26/10) : en-tête aligné sur le bloc, menu général comme dans 篆の間,
   trois étapes dans le panneau et son pied de page, résultats au-dessus des cartes ---- */
.barre { max-width: 67rem !important; margin: 0 auto; justify-content: flex-start; gap: 0.8rem }
.barre .marque { flex: 0 0 auto }
.barre .langues { flex: 0 0 auto; margin-left: auto }
.outils-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.4rem; font: inherit; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--encre);
  background: #fff; border: 1px solid var(--encre); padding: 0.3rem 0.8rem; cursor: pointer }
.outils-btn:hover { background: var(--encre); color: var(--papier) }
.outils-btn .fleche-menu { color: var(--shu); font-size: 0.75rem }
.outils-btn:hover .fleche-menu { color: var(--papier) }
.joie-panneau .panel-footer { margin-top: auto; padding-top: 1.2rem; font-size: 0.8rem; letter-spacing: 0.06em; line-height: 1.7; color: var(--encre) }
.joie-panneau .panel-footer a { color: var(--encre) }
.joie-bas { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--trait); background: var(--fond-panneau) }
.joie-bas .joie-cartes { border-top: 0; flex: 1 1 auto }
.joie-resultats { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.6rem 2rem 0 }
.joie-resultats:empty { display: none }
.r-nb { font-size: 0.95rem; margin-right: auto }
.r-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; font: inherit; font-size: 0.9rem; padding: 0.2rem 0.8rem; background: #fff; border: 1px solid var(--encre); color: var(--encre); cursor: pointer }
.r-btn:hover, .r-btn.actif { background: var(--encre); color: var(--papier) }
.joie-cartes.en-texte { display: flex; flex-direction: column; gap: 0; align-content: stretch }
.r-ligne { display: flex; align-items: baseline; gap: 0.8rem; width: 100%; min-height: 2.6rem; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--trait); color: var(--encre); padding: 0.4rem 0.3rem; cursor: pointer }
.r-ligne:hover { background: #fff }
.r-t { font-size: 1.15rem; letter-spacing: 0.06em }
.r-y { font-size: 0.86rem }
.r-g { margin-left: auto; font-size: 0.8rem; color: var(--shu) }
.jetape-tete .jraz { margin: 0 0 0 auto; align-self: center; border: 1px solid var(--trait); padding: 0.2rem 0.6rem; min-height: 2.2rem }
.jou { text-align: center; font-size: 0.9rem; margin: 0.5rem 0 }
.joie-de.de-tout { width: 100%; height: auto; min-height: 3rem; gap: 0.6rem; font: inherit; font-size: 1rem; background: var(--encre); color: var(--papier); border-color: var(--encre) }
.joie-de.de-tout:hover { background: var(--shu); border-color: var(--shu) }
.joie-de.de-tout .pips { font-size: 1.4rem }
@media (max-width: 700px) {
  .barre .marque { order: 1 }
  .outils-btn { order: 2 }
  .barre .langues { order: 3; margin-left: auto }
  .barre .marque-kanji { font-size: 1rem }
}

/* ---- trois colonnes (26/10, kuma) : à gauche toutes les réponses qui défilent, au centre la fiche et ses vignettes,
   à droite le panneau ; plus de cartes, qui cachaient les vignettes ---- */
.barre { max-width: 77rem !important }
.joie { grid-template-columns: 15rem minmax(0, 40rem) 21rem }
.joie-scene2 { grid-template-rows: minmax(0, 1fr) }
.joie-detail { align-items: flex-start; justify-content: flex-start; padding: 1.2rem 1.6rem 1.6rem }
.joie-liste { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--trait); border-right: 1px solid var(--trait); background: var(--fond-panneau) }
.l-tete { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--encre) }
.l-tete .r-nb { margin-right: auto }
.l-corps { flex: 1 1 auto; overflow: auto; min-height: 0 }
.l-corps .r-ligne { padding: 0.45rem 0.8rem; min-height: 2.6rem; align-items: center }
.l-corps .r-ligne.actif { background: #fff; box-shadow: inset 3px 0 0 var(--shu) }
.l-corps .r-t { font-size: 1.12rem; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; line-height: 1.4 }
.l-corps .r-g { flex: none; font-size: 0.74rem }
.l-fin { text-align: center; padding: 0.8rem; color: var(--discret) }
.joie-liste .joie-vide { padding: 1rem; flex-direction: column; font-size: 1rem }
.joie-liste .joie-vide img { width: 5rem }
@media (max-width: 1100px) and (min-width: 901px) {
  .joie { grid-template-columns: 13rem minmax(0, 1fr) 19rem }
}
@media (max-width: 900px) {
  .joie { display: flex; flex-direction: column }
  .joie-scene2 { order: 1 }
  .joie-liste { order: 2; max-height: 45svh; border: 0; border-top: 1px solid var(--encre) }
  .joie-panneau { order: 3 }
}
/* pas de défilement de côté dans le panneau (kuma, 26/10) : les listes longues se tiennent dans leur colonne */
.joie-panneau { overflow-x: hidden }
.joie-panneau .jfiltre select, .joie-panneau .joie-input { min-width: 0; max-width: 100% }
.joie-panneau .jetape { min-width: 0 }
/* 点, le chien de l'accueil : la queue remue, il se tourne vers le pointeur */
.joie-chien .fig { position: relative; display: block; transition: transform 0.2s }
.joie-chien .fig img { display: block; width: 100%; height: auto }
.joie-chien .fig .queue { position: absolute; left: 0; top: 0; height: 100%; width: auto; transform-origin: 86% 88.5%; animation: remue 0.55s ease-in-out infinite alternate }
@keyframes remue { from { transform: rotate(-7deg) } to { transform: rotate(9deg) } }
.joie-chien .fig.droite { transform: scaleX(-1) }
.joie-chien .fig.hop { animation: hop 0.45s cubic-bezier(.3, 1.6, .5, 1) }
.joie-chien .fig.droite.hop { animation: hopd 0.45s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes hop { 40% { transform: translateY(-10px) } }
@keyframes hopd { 0%, 100% { transform: scaleX(-1) } 40% { transform: scaleX(-1) translateY(-10px) } }
.p-chien { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem }
.p-chien .joie-chien { width: 4.2rem; flex: none }
.p-chien .joie-bulle { font-size: 1rem; margin: 0; padding: 0.35rem 0.8rem }
@media (prefers-reduced-motion: reduce) { .joie-chien .fig .queue, .joie-chien .fig.hop { animation: none } }
.joie-panneau > * { flex-shrink: 0 }
.p-chien .joie-chien { width: 3.6rem }
.p-chien { min-height: 0 !important }

/* 26/10 : la liste des réponses entre la fiche et le panneau, en mincho lisible ; le classement en petit au-dessus des vignettes */
.joie { grid-template-columns: minmax(0, 40rem) 15rem 21rem }
.joie-scene2 { order: 1 }
.joie-liste { order: 2 }
.joie-panneau { order: 3 }
.l-corps .r-t { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Songti SC', Georgia, serif; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--encre) }
.d-ap-tete { align-items: flex-start; gap: 0.6rem; margin: 0.9rem 0 0.5rem }
.d-ap-tete .d-etiq { flex: 1 1 auto; padding-top: 0; gap: 0.3rem }
.d-ap-tete .etiquette { font-size: 0.74rem; min-height: 1.7rem; padding: 0.12rem 0.45rem }
@media (max-width: 1100px) and (min-width: 901px) { .joie { grid-template-columns: minmax(0, 1fr) 13rem 19rem } }
/* la colonne des résultats : un en-tête comme les étapes du panneau (filet noir, carré vermillon, flèche) */
.joie-liste .l-tete { margin: 0.6rem 0.6rem 0; border: 2px solid var(--encre); background: #fff; padding: 0.6rem 0.7rem; gap: 0.6rem }
.l-titre { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; min-width: 0 }
.l-titre .r-nb { margin: 0; font-size: 0.86rem }
.joie-liste .l-corps { margin-top: 0.4rem; border-top: 1px solid var(--trait) }
/* 点 au bas du panneau */
.p-bas { width: 3.4rem; margin: 1.4rem auto 0; flex-shrink: 0 }
.joie-panneau .panel-footer { margin-top: 0.4rem }
.joie-panneau .jetape:last-of-type { margin-bottom: auto }
/* les autres outils de shonoma, en petites vignettes */
.d-autres { margin-top: 1.4rem; padding-top: 0.8rem; border-top: 1px solid var(--trait) }
.d-autres-ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 7rem)); gap: 0.6rem }
.d-autre { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; text-decoration: none; color: var(--encre) }
.d-autre img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--trait); background: #fff; transition: transform 0.15s }
.d-autre:hover img { transform: translateY(-3px) }
.d-autre-nom { font-size: 0.86rem }
.d-autre-r { font-size: 0.72rem; color: var(--discret); letter-spacing: 0.08em }
.joie-chien a.fig { cursor: pointer }

/* ---- この言葉で作る (05/11, kuma : la porte d'entrée ; trois exemples vraiment différents par module) ----
   sous la fiche, sur toute la largeur : une carte par module, cernée d'encre, un verbe pour titre ; trois exemples nommés,
   de même hauteur ; en tête, le chemin 禅語の間 → 軸の間 → 床の間 */
.joie-detail { flex-direction: column; align-items: stretch; gap: 1.4rem }
.d-fiche { grid-template-columns: auto minmax(0, 1fr) }
.d-etiq .etiquette { font-size: 0.8rem }
.cree { display: flex; flex-direction: column; gap: 0.9rem }
.cree-titre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--encre); padding-bottom: 0.4rem }
.cree-titre h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.14em; color: var(--shu) }
.cree-titre .joie-de { display: inline-flex; align-items: center; gap: 0.4rem; width: auto; padding: 0 0.7rem; min-height: 2.4rem }
.cree-titre .de-mot { font-size: 0.9rem }
.cree-carte { border: 2px solid var(--encre); background: #fff; padding: 0.7rem 0.9rem 0.9rem }
.cree-tete { display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none; color: var(--encre); margin-bottom: 0.6rem }
.cree-verbe { font-size: 1.08rem; font-weight: 700; letter-spacing: 0.06em }
.cree-mod { font-size: 0.9rem }
.cree-ouvrir { margin-left: auto; color: var(--shu); font-size: 0.9rem; white-space: nowrap }
.cree-tete:hover .cree-ouvrir { text-decoration: underline }
.cree-ligne { display: flex; align-items: flex-end; gap: 0.9rem; flex-wrap: wrap }
.cree-ex { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-decoration: none; color: var(--encre); max-width: 100% }
.cree-ex canvas { display: block; max-width: 100%; height: auto; transition: transform 0.15s; box-shadow: 0 1px 4px rgba(22, 19, 16, 0.18) }
.cree-ex:hover canvas { transform: translateY(-3px) }
.cree-leg { font-size: 0.86rem; line-height: 1.35; text-align: center; max-width: 100% }
.cree-carte.cree-chemin { border-width: 3px }
.cree-carte.cree-chemin .cree-ligne { align-items: center; flex-wrap: nowrap }
.cree-fleche { flex: none; color: var(--shu); font-size: 1.3rem; padding-bottom: 1.6rem }
.cree-carte.cree-chemin .cree-ligne { gap: 0.6rem; justify-content: space-between }
.d-autres { margin-top: 0.4rem }
@media (max-width: 900px) {
  .cree-carte.cree-chemin .cree-ligne { flex-wrap: wrap }
}
@media (max-width: 560px) {
  .cree-fleche, .cree-carte.cree-chemin .cree-mod { display: none }
  .cree-tete { flex-wrap: wrap }
}

/* ---- le meuble (05/11, kuma : « trop de choses, on se sent tout de suite dépassé ») : une seule colonne, des tiroirs fermés,
   numérotés dans l'ordre où l'on crée ; puis de petites commodes, une par famille de modules ---- */
body.ambiance-joie .barre { max-width: 56rem !important }
.joie { display: block; max-width: 56rem; height: auto; margin: 0 auto; padding: 1rem 16px 3rem }
.meuble { border: 3px solid var(--encre); background: var(--fond-panneau); padding: 0.9rem 0.9rem 1rem; margin-bottom: 1.8rem }
.meuble-titre { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; color: var(--shu) }
.tiroir { border: 2px solid var(--encre); background: #fff; margin-top: 0.6rem }
.tiroir > summary { list-style: none; display: flex; align-items: center; gap: 0.7rem; min-height: 3.3rem; padding: 0.4rem 0.8rem; cursor: pointer; user-select: none }
.tiroir > summary::-webkit-details-marker { display: none }
.tiroir > summary:hover .tiroir-titre { text-decoration: underline; text-decoration-color: var(--shu); text-underline-offset: 0.25em }
.tiroir > summary .jetape-num { flex: none }
.tiroir-titre { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em }
.tiroir-mod { font-size: 0.88rem; color: var(--discret) }
.tiroir-signe { flex: none; margin-left: auto; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--shu); border-bottom: 2px solid var(--shu); transform: rotate(45deg); transition: transform 0.15s; margin-right: 0.2rem }
.tiroir[open] > summary .tiroir-signe { transform: rotate(-135deg) }
.tiroir-corps { padding: 0.3rem 0.9rem 1rem }
.tiroir-corps:empty { padding: 0 }
.tiroir-corps .cree-ligne { margin-top: 0.2rem }
.tiroir-pied { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap }
.tiroir-pied .joie-de { display: inline-flex; width: auto; gap: 0.4rem; padding: 0 0.7rem; min-height: 2.4rem }
.tiroir-pied .de-mot { font-size: 0.9rem }
.tiroir-aller { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 1rem; background: var(--shu); color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.06em }
.tiroir-aller:hover { background: #8a1f14 }

/* le tiroir 1 : la recherche, la fiche, les sous-tiroirs, trois tokonoma */
.tiroir.premier { border-width: 3px }
.j1-cherche .joie-ligne { gap: 0.5rem }
.j1-cherche .joie-input { font-size: 1.2rem; min-height: 3rem }
.j1-cherche .de-tout { flex: none; width: auto; min-height: 3rem; padding: 0 0.9rem; gap: 0.4rem }
.j1-cherche .de-tout .de-mot { font-size: 0.95rem; white-space: nowrap }
.tiroir .joie-detail { display: block; overflow: visible; padding: 1rem 0 0.4rem }
.tiroir .d-fiche { grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem }
.tiroir .d-t { max-height: 22rem }
.sous-tiroirs { margin-top: 0.4rem }
.tiroir.sous { border: 1px solid var(--trait); margin-top: 0.4rem; background: var(--fond-panneau) }
.tiroir.sous > summary { min-height: 2.7rem; padding: 0.3rem 0.8rem }
.tiroir.sous .tiroir-titre { font-size: 0.98rem; font-weight: 400 }
.tiroir.sous .tiroir-signe { width: 0.5rem; height: 0.5rem }
.tiroir.sous.actif .tiroir-titre::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.5rem; vertical-align: middle; background: var(--shu); border-radius: 50% }
.t-liste-nb { font-size: 0.86rem; color: var(--discret) }
.tiroir .joie-liste { display: block; border: 0; background: #fff }
.tiroir .joie-liste .l-tete { margin: 0 0 0.4rem; border: 0; background: none; padding: 0; justify-content: flex-end }
.tiroir .joie-liste .l-tete .joie-de { display: inline-flex; width: auto; gap: 0.4rem; padding: 0 0.7rem }
.tiroir .joie-liste .l-corps { max-height: 22rem; margin: 0; border-top: 1px solid var(--trait) }
.j1-etiq { margin-bottom: 0.6rem }
.j1-etiq:empty { display: none }
.j1-tokos { margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--trait) }
.j1-tokos-titre { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em }

/* la seconde boîte : « chaque module s'utilise aussi tout seul » ; une commode par famille */
.commodes-msg { margin: 0.3rem 0 0.4rem; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; text-align: center; color: var(--encre) }
.commode { margin-top: 1rem }
.commode h3 { margin: 0 0 0.1rem; font-size: 1rem; letter-spacing: 0.14em; color: var(--shu) }
.commode-asobi { padding-top: 0.9rem; border-top: 2px dashed var(--trait) }
.tiroir.module > summary { min-height: 3rem }
.tiroir-img { flex: none; width: 2.3rem; height: 2.3rem; object-fit: cover; border: 1px solid var(--trait) }
.mod-desc { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap }
.mod-desc p { flex: 1 1 16rem; margin: 0; font-size: 1rem; line-height: 1.7 }
.p-bas { margin: 0.4rem auto 0 }
.meuble-tout > .panel-footer { text-align: center; font-size: 0.8rem; letter-spacing: 0.06em; line-height: 1.7; margin-top: 0.4rem }
.meuble-tout > .panel-footer a { color: var(--encre) }
@media (max-width: 560px) {
  .joie { padding: 0.6rem 10px 2rem }
  .meuble { padding: 0.6rem 0.55rem 0.8rem; border-width: 2px }
  .tiroir-corps { padding: 0.2rem 0.6rem 0.8rem }
  .tiroir > summary { gap: 0.5rem; padding: 0.4rem 0.6rem; flex-wrap: wrap }
  .tiroir-mod { flex-basis: 100%; order: 5; padding-left: 2.6rem; margin-top: -0.3rem }
  .tiroir.module .tiroir-mod { padding-left: 3rem }
  .j1-cherche .de-tout .de-mot { display: none }
  .commodes-msg { font-size: 1.2rem }
  .tiroir-aller { margin-left: 0 }
  .cree-ligne { gap: 0.6rem }
}
/* téléphone : trois exemples côte à côte, chacun à sa largeur relative */
@media (max-width: 560px) {
  .tiroir-corps .cree-ligne { flex-wrap: nowrap; gap: 0.45rem; align-items: flex-end }
  .tiroir-corps .cree-ex { flex: var(--w) 1 0; width: auto !important; min-width: 0 }
  .tiroir-corps .cree-ex canvas { width: 100% !important }
  .tiroir-corps .cree-leg { font-size: 0.74rem }
}
/* téléphone : le numéro (ou l'image) à gauche, le titre et le nom du module l'un sous l'autre, la flèche à droite */
@media (max-width: 560px) {
  .tiroir > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.55rem; row-gap: 0.1rem; align-items: center }
  .tiroir > summary .jetape-num, .tiroir > summary .tiroir-img { grid-column: 1; grid-row: 1 / span 2 }
  .tiroir-titre { grid-column: 2; line-height: 1.4 }
  .tiroir-mod, .t-liste-nb { grid-column: 2; padding-left: 0 !important; margin-top: 0 }
  .tiroir-signe { grid-column: 3; grid-row: 1 / span 2 }
}

/* ---- 05/11 (soir), kuma : « for dummies » ; le champ en haut comme sur l'accueil, trois tokonoma dessous,
   de gros numéros reliés par des flèches, un seul tiroir ouvert, une icône qui tourne tant qu'un exemple n'est pas prêt ---- */
.entree { padding: 0.6rem 0 1.6rem }
.entree-titre { display: block; margin: 0.4rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.16em; color: var(--shu) }
.entree-ligne { display: flex; gap: 0.6rem; align-items: stretch }
.entree-champ { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0 0.9rem; background: #fff; border: 3px solid var(--encre) }
.entree-champ:focus-within { border-color: var(--shu) }
.entree-champ .loupe { flex: none; display: flex }
.entree-champ svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round }
.entree .joie-input { flex: 1 1 auto; min-width: 0; min-height: 4.4rem; padding: 0.2rem 0; border: 0; background: none; font-size: 2.2rem; text-align: left; letter-spacing: 0.08em }
.entree .joie-input:focus { outline: none }
.entree .de-tout { flex: none; width: auto; height: auto; min-height: 4.4rem; padding: 0 1.2rem; gap: 0.5rem }
.entree .de-tout .pips { font-size: 1.8rem }
.entree .de-tout .de-mot { font-size: 1rem; white-space: nowrap }
.entree-sens { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0.7rem 0 0; font-size: 1rem; line-height: 1.7 }
.entree-sens:empty { display: none }
.s-y { letter-spacing: 0.08em }
.s-src { font-size: 0.88rem; color: var(--discret) }
.s-src a { color: inherit }
.entree-forme { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.8rem }
.entree-forme .filtre { grid-template-columns: auto minmax(0, 17rem); gap: 0.6rem }
.entree-forme select { min-width: 0; max-width: 100% }
.entree-tokos-titre { margin: 1.4rem 0 0.6rem; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.12em }
.entree-tokos .cree-ligne, .tiroir-corps .cree-ligne { align-items: flex-start }
.entree-tokos .cree-ligne { justify-content: space-between }

/* les gros numéros, les flèches */
.tiroir { margin-top: 0 }
.tiroir > summary .jetape-num { width: 3.6rem; height: 3.6rem; font-size: 2.3rem }
.tiroir:not(.sous):not(.module) > summary { min-height: 4.6rem; gap: 0.9rem }
.tiroir:not(.sous):not(.module) .tiroir-titre { font-size: 1.25rem }
.tiroir-fleche { margin: 0.15rem 0; text-align: center; font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: var(--shu) }
.meuble-titre { margin-bottom: 0.7rem }
.j1-sous-titre { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.4rem 0 0.4rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em }
.tiroir .joie-liste .l-corps { max-height: 16rem }
.sous-tiroirs { margin-top: 0.8rem }

/* les commodes : une boîte par famille */
.commode { margin-top: 1.1rem; padding: 0.7rem 0.8rem 0.8rem; border: 2px solid var(--encre); background: var(--papier) }
.commode h3 { margin: 0 0 0.3rem; font-size: 1.05rem }
.commode .tiroir { margin-top: 0.5rem }
.commode-asobi { border-top: 2px solid var(--encre); padding-top: 0.7rem }
.tiroir.module .tiroir-titre { font-size: 1.05rem }

/* l'attente : une icône qui tourne, sur chaque exemple pas encore dessiné, et dans un tiroir encore vide */
@keyframes tourne { to { transform: rotate(360deg) } }
.cree-ex.charge { position: relative }
.cree-ex.charge::after, .attente-ronde::after { content: ""; position: absolute; left: 50%; top: 42%; width: 1.7rem; height: 1.7rem; margin: -0.85rem 0 0 -0.85rem;
  border: 3px solid rgba(184, 55, 42, 0.22); border-top-color: var(--shu); border-radius: 50%; animation: tourne 0.8s linear infinite }
.attente-ronde { position: relative; height: 8rem }
@media (prefers-reduced-motion: reduce) { .cree-ex.charge::after, .attente-ronde::after { animation-duration: 2.4s } }

@media (max-width: 560px) {
  .entree .joie-input { font-size: 1.6rem; min-height: 3.6rem }
  .entree .de-tout { min-height: 3.6rem; padding: 0 0.8rem }
  .entree .de-tout .de-mot { display: none }
  .entree-champ { padding: 0 0.6rem; gap: 0.4rem }
  .entree-champ svg { width: 1.3rem; height: 1.3rem }
  .entree-forme .filtre { grid-template-columns: 5.6rem minmax(0, 1fr); width: 100% }
  .entree-tokos .cree-ligne { flex-wrap: nowrap; gap: 0.45rem }
  .entree-tokos .cree-ex { flex: var(--w) 1 0; width: auto !important; min-width: 0 }
  .entree-tokos .cree-ex canvas { width: 100% !important }
  .entree-tokos .cree-leg { font-size: 0.74rem }
  .tiroir > summary .jetape-num { width: 2.9rem; height: 2.9rem; font-size: 1.9rem }
  .tiroir:not(.sous):not(.module) .tiroir-titre { font-size: 1.1rem }
  .commode { padding: 0.6rem 0.5rem 0.7rem }
}
.entree .joie-input::-webkit-search-cancel-button, .entree .joie-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none }

/* ---- 05/11 (nuit), kuma : « rendre belle et ludique cette page », en gardant la structure ---- */
/* les exemples à gauche ; à droite, le dé au-dessus du bouton rouge, posés sur la ligne de base des exemples */
.ex-bloc { display: flex; align-items: flex-end; gap: 1rem }
.ex-bloc .cree-ligne { flex: 1 1 auto; min-width: 0; margin-top: 0 }
/* les trois exemples restent sur une ligne et rétrécissent ensemble, quelle que soit la largeur des boutons de la langue (kuma, 06/11) */
.ex-bloc .cree-ligne { flex-wrap: nowrap }
.ex-bloc .cree-ex { flex: 0 1 auto }
.ex-bloc .tiroir-pied { flex: none; flex-direction: column; align-items: stretch; gap: 0.5rem; margin: 0 }
.ex-bloc .tiroir-pied .joie-de { justify-content: center }
.ex-bloc .tiroir-aller { margin-left: 0; justify-content: center; white-space: nowrap }
.cree-leg:empty { display: none }
.mod-desc + .ex-bloc { margin-top: 0.8rem }
.entree-tokos { margin-top: 1.3rem }

/* le fond : le texte en caractères immenses, coupés par les bords, gris presque transparent ; un second, vermillon, plus bas à gauche */
body.ambiance-joie { position: relative; overflow-x: hidden }
.fond-texte { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; z-index: 0 }
body.ambiance-majime .fond-texte { display: none }
.fond-texte span { position: absolute; writing-mode: vertical-rl; white-space: nowrap; line-height: 1; transition: opacity 0.4s }
.fond-texte span:first-child { right: -0.36em; top: -0.08em; font-size: clamp(17rem, 44vw, 50rem); color: rgba(22, 19, 16, 0.055) }
.fond-texte span:last-child { left: -0.52em; top: 115vh; font-size: clamp(13rem, 32vw, 36rem); color: rgba(184, 55, 42, 0.05) }
body.ambiance-joie .barre, body.ambiance-joie .joie { position: relative; z-index: 1 }
/* les boîtes laissent passer le fond */
.meuble { background: rgba(251, 249, 244, 0.72) }
.tiroir { background: rgba(255, 255, 255, 0.86) }
.tiroir.sous { background: rgba(251, 249, 244, 0.8) }
.commode { background: rgba(246, 243, 236, 0.6) }
.entree-champ { background: rgba(255, 255, 255, 0.9) }

/* 点, à gauche du champ */
.entree-chien { flex: none; width: 4.4rem; align-self: flex-end; margin-right: -0.2rem }
.entree-chien .fig img { mix-blend-mode: multiply }

@media (max-width: 560px) {
  .ex-bloc { flex-direction: column; align-items: stretch; gap: 0.7rem }
  .ex-bloc .tiroir-pied { flex-direction: row; justify-content: flex-end }
  .entree-chien { width: 2.9rem; margin-right: -0.3rem }
  .fond-texte span:first-child { right: -0.42em }
  .fond-texte span:last-child { top: 95vh }
}
.entree-ligne { align-items: flex-end }
.entree-champ { min-height: 4.4rem; align-self: stretch }
.entree-ligne .entree-champ, .entree-ligne .de-tout { height: 4.4rem; align-self: flex-end }
.entree-chien { width: 3.3rem }
@media (max-width: 560px) { .entree-ligne .entree-champ, .entree-ligne .de-tout { height: 3.6rem } .entree-chien { width: 2.5rem } }
.entree-chien { width: auto; height: 4.4rem }
.entree-chien .fig { height: 100% }
.entree-chien .fig img:first-child { width: auto; height: 100% }
@media (max-width: 560px) { .entree-chien { height: 3.6rem } }
/* l'image de 点 a beaucoup de ciel au-dessus de lui : elle dépasse vers le haut, la ligne garde la hauteur du champ */
.entree-chien { position: relative; width: 3.1rem; height: 4.4rem; overflow: visible }
.entree-chien .fig { position: absolute; left: 0; bottom: 0; height: 9.3rem }
.entree-chien .fig img:first-child { height: 100%; width: auto }
@media (max-width: 560px) {
  .entree-champ { min-height: 0 }
  .entree .joie-input { min-height: 0; height: 100% }
  .entree-chien { width: 2.5rem; height: 3.6rem }
  .entree-chien .fig { height: 7.4rem }
}

/* ---- le haut en grille (kuma, 05/11) : 点 | le champ | la police au-dessus du dé ;
   le titre rouge et 説明 alignés sur le champ ---- */
.entree { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 15rem; column-gap: 1.3rem; row-gap: 0.55rem; align-items: end }
.entree-ligne { display: contents }
.entree-titre { grid-column: 2; grid-row: 1; margin: 0; align-self: end }
.entree-forme { grid-column: 3; grid-row: 1; margin: 0 }
.entree-forme .filtre { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; width: 100% }
.entree-forme .filtre > span { font-size: 0.82rem; letter-spacing: 0.1em }
.entree-forme select { width: 100%; min-height: 2.6rem; border: 2px solid var(--encre); background: #fff; font-size: 0.9rem }
.entree-chien { grid-column: 1; grid-row: 2 }
.entree-champ { grid-column: 2; grid-row: 2 }
.entree .de-tout { grid-column: 3; grid-row: 2; width: 100%; justify-content: center }
.entree-sens { grid-column: 2 / 4; grid-row: 3; margin: 0.15rem 0 0; align-items: baseline }
.s-lib { flex: none; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; color: var(--shu); padding: 0.05rem 0.45rem; border: 1px solid var(--shu) }
.entree-tokos { grid-column: 1 / -1; grid-row: 4; margin-top: 0.9rem }
@media (max-width: 560px) {
  .entree { grid-template-columns: 2.5rem minmax(0, 1fr) 3.6rem; column-gap: 0.75rem }
  .entree-titre { grid-column: 2 / 4 }
  .entree-forme { grid-column: 2 / 4; grid-row: 4 }
  .entree-forme .filtre { flex-direction: row; align-items: center; gap: 0.6rem }
  .entree-forme .filtre > span { flex: none }
  .entree-tokos { grid-row: 5 }
}
/* le macaron du manga, dans l'en-tête */
.barre .macaron { flex: none; margin: -0.6rem 0 -0.9rem auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--shu); color: #fff; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; letter-spacing: 0.06em; transform: rotate(-8deg);
  box-shadow: 0 6px 14px -8px rgba(22, 19, 16, 0.6); transition: transform 0.3s; position: relative; z-index: 2 }
.barre .macaron:hover { transform: rotate(-8deg) scale(1.08) }
.barre .macaron span { font-size: 0.66rem }
.barre .macaron b { font-weight: 400; font-size: 1.05rem }
.barre .macaron ~ .langues { margin-left: 0.6rem }
@media (max-width: 700px) { .barre .macaron { order: 2; margin: -0.4rem 0 -0.4rem auto; width: 3.1rem; height: 3.1rem } .barre .macaron b { font-size: 0.95rem } }