/* 言葉の間 — 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 }