/* Composants — classes HTML natives, pensées pour ERB + Stimulus. Aucune dépendance JS. */

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--tap); padding: 0 var(--space-6);
  font: var(--weight-bold) var(--text-body)/1.2 var(--font-sans);
  border-radius: var(--radius-lg); border: var(--border-w) solid transparent;
  cursor: pointer; text-decoration: none; text-align: center; text-wrap: balance;
  color: var(--color-ink); background: var(--color-paper-raised); border-color: var(--color-ink);
  transition: background-color .1s;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { background: #F0E8DA; transform: translateY(1px); }
.btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); min-height: var(--tap-lg); font-size: var(--text-lg); }
.btn--primary:active { background: var(--color-accent-press); border-color: var(--color-accent-press); }
.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:active { background: var(--color-danger-soft); }
.btn--danger-solid { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn--danger-solid:active { background: var(--color-danger-press); }
.btn--quiet { border-color: var(--color-line-strong); background: transparent; font-weight: var(--weight-semibold); }
.btn--link { border: none; background: none; color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; padding: 0 var(--space-2); justify-content: flex-start; }
.btn--link:active { background: none; color: var(--color-accent-press); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); border-color: var(--color-disabled-bg); cursor: not-allowed; transform: none; }
.btn.is-busy { background: var(--color-accent-press); border-color: var(--color-accent-press); color: #fff; cursor: progress; }
.btn.is-busy::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; animation: btn-spin 1s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn svg { width: 26px; height: 26px; flex: none; }

/* ---------- Page ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-8) var(--page-pad) calc(var(--nav-h) + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-8); }
.page-header { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.page-header h1 { text-wrap: balance; }
.btn-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-5) 0 var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-line-strong); background: var(--color-paper-raised); color: var(--color-ink); font: var(--weight-bold) var(--text-body)/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.btn-back::before { content: ""; width: 12px; height: 12px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.btn-back:active { background: #F0E8DA; }

/* ---------- Navigation basse ---------- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h); background: var(--color-paper-raised); border-top: var(--border-w) solid var(--color-line); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); z-index: 10; }
.nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-lg); color: var(--color-ink); text-decoration: none; font: var(--weight-semibold) 19px/1.1 var(--font-sans); text-align: center; padding: 0 var(--space-2); text-wrap: balance; }
.nav__item svg { width: 28px; height: 28px; stroke-width: 2.25; }
.nav__item.is-active { background: var(--color-accent); color: #fff; font-weight: var(--weight-bold); }
.nav__item:active:not(.is-active) { background: var(--color-accent-soft); }
.nav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 600px) { .nav__item { font-size: 16px; gap: 6px; } .nav__item svg { width: 24px; height: 24px; } }

/* ---------- Champs ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-weight: var(--weight-bold); font-size: var(--text-body); }
.field__label small { font-weight: var(--weight-regular); color: var(--text-secondary); }
.field__hint { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-danger-text); line-height: 1.45; }
.field__error::before { content: ""; flex: none; margin-top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--color-danger); }
.input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 0 var(--space-5); font: var(--weight-regular) var(--text-lg)/1.3 var(--font-sans); color: var(--color-ink); background: var(--surface-field); border: var(--border-w) solid var(--border-field); border-radius: var(--radius-lg); appearance: none; -webkit-appearance: none; }
.textarea { padding: var(--space-4) var(--space-5); min-height: 140px; resize: vertical; }
.select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'><path d='M2 2l9 9 9-9' fill='none' stroke='%231F1A15' stroke-width='3'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-5) center; padding-right: 60px; }
.input::placeholder { color: var(--color-ink-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: var(--focus-ring); }
.field.has-error .input, .field.has-error .select { border-color: var(--color-danger); border-width: 3px; }

/* Recherche géante */
.search { display: flex; flex-direction: column; gap: var(--space-3); }
.search__row { display: flex; gap: var(--space-3); }
.search__row .input { min-height: var(--tap-lg); font-size: var(--text-lg); }
.search__row .btn--primary { padding: 0 var(--space-8); }
@media (max-width: 600px) { .search__row { flex-direction: column; } }

/* ---------- Fil d'emplacement ---------- */
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--color-ink); }
.trail__part { background: var(--color-wood); padding: 10px 12px; border-radius: var(--radius-sm); }
.trail__sep { color: var(--color-ink-soft); font-weight: var(--weight-bold); }
.trail--large { font-size: var(--text-body); }
.trail--large .trail__part { padding: 14px 16px; }
.trail--unknown .trail__part { background: var(--color-warn-soft); color: var(--color-warn-text); }

/* ---------- Dos de livre (couverture absente) ---------- */
.spine { flex: none; width: 56px; height: 120px; border-radius: 3px; background: var(--color-spine-1); color: #F3E6CF; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 16px/1 var(--font-serif); letter-spacing: .04em; text-transform: uppercase; overflow: hidden; padding: 8px 0; }
.spine--2 { background: var(--color-spine-2); } .spine--3 { background: var(--color-spine-3); } .spine--4 { background: var(--color-spine-4); } .spine--5 { background: var(--color-spine-5); } .spine--6 { background: var(--color-spine-6); }
.spine--sm { width: 40px; height: 84px; font-size: 13px; }
.cover { flex: none; width: 84px; height: 120px; border-radius: 3px; object-fit: cover; background: var(--color-wood); }

/* ---------- Carte livre ---------- */
.book-card { display: flex; gap: var(--space-5); background: var(--surface-card); border-left: 10px solid var(--color-accent); border-radius: 4px; padding: var(--space-5); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.book-card:active { background: #F6F0E4; }
.book-card__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.book-card__title { font: 600 var(--text-h3)/1.2 var(--font-serif); color: var(--color-ink); }
.book-card__author { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.3; }
.book-card .trail { margin-top: var(--space-2); }
.book-card__aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex: none; }
.book-card--compact { padding: var(--space-4); gap: var(--space-4); border-left-width: 6px; }
.book-card--compact .book-card__title { font-size: 21px; }
.book-card--compact .book-card__author { font-size: var(--text-sm); }
.book-card--gone { border-left-color: var(--color-danger); }
.book-card--gone .book-card__title { color: var(--color-ink-soft); }

/* ---------- Badges de statut : mot + forme ---------- */
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--radius-pill); font: var(--weight-bold) var(--text-xs)/1 var(--font-sans); white-space: nowrap; }
.badge::before { content: ""; width: 14px; height: 14px; flex: none; }
.badge--ok { background: var(--color-ok-soft); color: var(--color-ok-text); }
.badge--ok::before { border-radius: 50%; background: var(--color-ok); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-warn-text); }
.badge--warn::before { width: 16px; background: var(--color-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.badge--known { background: var(--color-known-soft); color: var(--color-known); }
.badge--known::before { width: 13px; height: 13px; background: var(--color-known); }
.badge--gone { background: var(--color-danger-soft); color: var(--color-danger-text); }
.badge--gone::before { border-radius: 50%; border: 3px solid var(--color-danger); width: 10px; height: 10px; }
.badge--pending { background: var(--color-wood); color: var(--color-ink); }
.badge--pending::before { border-radius: 50%; border: 3px dashed var(--color-ink-soft); width: 10px; height: 10px; }

/* ---------- Sélecteur d'emplacement (grands boutons carrés) ---------- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.picker__option { min-height: 112px; padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--surface-card); border: var(--border-w) solid var(--color-line-strong); border-radius: var(--radius-xl); font: var(--weight-bold) var(--text-lg)/1.2 var(--font-sans); color: var(--color-ink); cursor: pointer; text-align: left; text-wrap: balance; }
.picker__option small { font: var(--weight-regular) var(--text-sm)/1.3 var(--font-sans); color: var(--text-secondary); }
.picker__option:active { background: var(--color-accent-soft); }
.picker__option.is-selected { border: 4px solid var(--color-accent); background: var(--color-accent-soft); padding: calc(var(--space-4) - 2px); }
.picker__option.is-selected::after { content: "Choisi"; font: var(--weight-bold) 15px/1 var(--font-sans); color: var(--color-accent); text-transform: uppercase; letter-spacing: .06em; }
.picker__option.is-suggested small::after { content: " · la dernière fois"; }
.picker__option--alt { border-style: dashed; background: transparent; font-weight: var(--weight-semibold); }

/* ---------- Zone photo ---------- */
.photo-zone { display: flex; flex-direction: column; gap: var(--space-4); }
.photo-zone__frame { aspect-ratio: 4/3; border-radius: var(--radius-xl); background: var(--color-wood); border: var(--border-w) dashed var(--color-line-strong); display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-6); color: var(--text-secondary); font-size: var(--text-body); overflow: hidden; }
.photo-zone__frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-zone__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.photo-zone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ---------- Ligne de livre détecté ---------- */
.detected { display: flex; flex-direction: column; gap: var(--space-3); }
.detected-row { display: grid; grid-template-columns: var(--tap) 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); background: var(--surface-card); border: var(--border-w) solid var(--color-line); border-radius: var(--radius-xl); }
.detected-row__check { width: var(--tap); height: var(--tap); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-ink); background: #fff; display: flex; align-items: center; justify-content: center; }
.detected-row__check.is-checked { background: var(--color-ok); border-color: var(--color-ok); }
.detected-row__check.is-checked::after { content: ""; width: 14px; height: 24px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg) translate(-2px,-3px); }
.detected-row__title { font: 600 22px/1.25 var(--font-serif); }
.detected-row__author { color: var(--text-secondary); font-size: var(--text-sm); }
.detected-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detected-row--unsure { border: 3px solid var(--color-warn); background: var(--color-warn-soft); grid-template-columns: 1fr; }
.detected-row--known { background: var(--color-known-soft); border-color: var(--color-known-soft); }
.detected-row--known .detected-row__title { color: var(--color-ink-soft); }
.choice3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.choice3 .btn { min-height: 64px; background: #fff; }
.choice3 .btn--yes { color: var(--color-ok-text); border-color: var(--color-ok); }
.choice3 .btn--no { color: var(--color-danger); border-color: var(--color-danger); }
.choice2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }

/* Barre d'action fixe en bas d'une liste longue */
.action-bar { position: sticky; bottom: calc(var(--nav-h) + var(--space-3)); padding: var(--space-3); background: var(--color-paper); border-top: var(--border-w) solid var(--color-line); }

/* ---------- Attente, vide ---------- */
.waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-6); padding: var(--space-16) var(--space-6); min-height: 60vh; }
.waiting__dots { display: flex; gap: 12px; }
.waiting__dots i { width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); animation: dot 1.4s ease-in-out infinite; }
.waiting__dots i:nth-child(2) { animation-delay: .2s; } .waiting__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.waiting h2 { font-size: var(--text-h1); text-wrap: balance; }
.waiting p { color: var(--text-secondary); max-width: 32ch; text-wrap: pretty; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); padding: var(--space-8); background: var(--surface-card); border: var(--border-w) dashed var(--color-line-strong); border-radius: var(--radius-xl); }
.empty p { font-size: var(--text-lg); text-wrap: pretty; }

/* ---------- Message (toast) avec Annuler ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--space-4)); transform: translateX(-50%); width: min(720px, calc(100% - 2 * var(--page-pad))); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-ink); color: var(--color-ink-on-dark); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); font: var(--weight-semibold) var(--text-body)/1.3 var(--font-sans); z-index: 20; animation: toast-in .25s ease-out; }
.toast .btn { background: var(--color-ink-on-dark); color: var(--color-ink); border-color: var(--color-ink-on-dark); }
.toast--static { position: static; transform: none; width: auto; animation: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Boîte de confirmation : deux boutons, jamais plus ---------- */
.confirm { width: min(560px, calc(100% - 2 * var(--page-pad))); background: var(--surface-card); border: 3px solid var(--color-ink); border-radius: var(--radius-xl); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.confirm h2 { font-size: var(--text-h1); text-wrap: balance; }
.confirm p { font-size: var(--text-lg); color: var(--text-secondary); text-wrap: pretty; }
.confirm__actions { display: flex; flex-direction: column; gap: var(--space-3); }
.confirm__actions .btn { min-height: var(--tap-lg); font-size: var(--text-lg); }
.scrim { position: fixed; inset: 0; background: rgba(31,26,21,.55); display: flex; align-items: center; justify-content: center; z-index: 30; }

/* ---------- Bandeau ---------- */
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); font-weight: var(--weight-bold); }
.banner--gone { background: var(--color-danger-soft); color: var(--color-danger-text); border: var(--border-w) solid var(--color-danger); }
.banner--pending { background: var(--color-wood); color: var(--color-ink); }

/* ---------- Tableau dense (administration, famille) ---------- */
.table-dense { width: 100%; border-collapse: collapse; font-size: 17px; background: var(--surface-card); border: var(--border-w) solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.table-dense th, .table-dense td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.table-dense th { font-weight: var(--weight-bold); background: var(--color-wood); }
.table-dense tr:last-child td { border-bottom: none; }
.table-dense .btn { min-height: 44px; padding: 0 var(--space-4); font-size: 16px; border-radius: var(--radius-sm); }
.table-dense td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Les composants rendus en <a> ne ressemblent pas à des liens */
.book-card, .btn, .btn-back, .nav__item, .picker__option { text-decoration: none; }
.book-card { font-weight: var(--weight-regular); }
.book-card__author { font-weight: var(--weight-regular); }
.picker__option small { text-decoration: none; }

/* ---------- Utilitaires de mise en page ---------- */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ======================================================================
   Ajouts de l'application (styles locaux du prototype ui_kits/app/index.html
   et états nécessaires aux contrôleurs Stimulus). Même vocabulaire de tokens.
   ====================================================================== */
/* Accueil : contenu centré verticalement dans l'écran, au-dessus de la nav basse. */
.page--centered { box-sizing: border-box; min-height: 100dvh; justify-content: center; }
.home-title { font-size: var(--text-display); line-height: 1.15; text-wrap: balance; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; font-size: var(--text-body); }
.meta dt { color: var(--text-secondary); }
.meta dd { margin: 0; font-weight: 600; }
.steps { font-size: var(--text-sm); font-weight: 700; color: var(--text-label); letter-spacing: .04em; }
.scan-photo { display: flex; gap: var(--space-3); overflow-x: auto; }
.scan-photo img { height: 180px; border-radius: var(--radius-xl); flex: none; }
.subtitle { color: var(--text-secondary); font-size: var(--text-lg); }
.book-author { font-size: var(--text-h3); color: var(--text-secondary); }
.divider { border-top: var(--border-w) solid var(--color-line); padding-top: var(--space-6); }
.stack--sm { gap: var(--space-3); }
.summary.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.photo-zone__frame.has-photos { display: flex; gap: var(--space-2); padding: 0; border-style: solid; }
.photo-zone__frame.has-photos img { width: auto; flex: 1; min-width: 0; }
.detected-row__check.is-off { opacity: .5; }
.detected-row__title.is-struck { text-decoration: line-through; color: var(--text-secondary); }
.detected-row__where { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.detected-row__edit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-2); }
.detected-row__edit .input { font-size: var(--text-body); }
.detected-row__note { font-size: var(--text-sm); color: var(--color-warn-text); }
.detected-row--elsewhere { border: 3px solid var(--color-known); background: var(--color-known-soft); grid-template-columns: 1fr; }
/* Champs à width: 100% : la marge intérieure et la bordure restent dans la largeur, sinon ils débordent de leur colonne. */
.input, .select, .textarea { box-sizing: border-box; }
/* Titre de page avec une action discrète alignée à droite (« Gérer la maison »). */
.page-header__top { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.field__group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field__group > .field { min-width: 0; }
.form-errors { padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--color-danger-soft); color: var(--color-danger-text); font-weight: var(--weight-bold); }
.spine { font-size: 15px; }
.login { max-width: 560px; }
@media (max-width: 600px) {
  .detected-row__edit, .field__group { grid-template-columns: 1fr; }
}
/* L'attribut hidden l'emporte toujours sur les display des composants (Stimulus s'en sert). */
[hidden] { display: none !important; }

/* Liste à recherche (Tom Select, contrôleur combobox) : le wrapper reprend la classe .select du champ d'origine. */
.ts-wrapper.select { position: relative; padding: 0; display: flex; }
.ts-wrapper.focus { box-shadow: var(--focus-ring); }
.ts-control { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: calc(var(--tap) - 2 * var(--border-w)); padding: 0 60px 0 var(--space-5); cursor: text; }
.ts-control input { flex: 1 1 auto; min-width: 4em; border: 0; padding: 0; background: none; font: inherit; color: var(--color-ink); }
.ts-control input:focus { outline: none; }
.ts-control input::placeholder { color: var(--color-ink-muted); }
.ts-wrapper.input-active .ts-control .item { display: none; }
.ts-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.ts-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: var(--space-2); background: var(--surface-field); border: var(--border-w) solid var(--border-field); border-radius: var(--radius-lg); overflow: hidden; }
.ts-dropdown-content { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.ts-dropdown .option, .ts-dropdown .no-results { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-5); font-size: var(--text-lg); cursor: pointer; }
.ts-dropdown .option + .option { border-top: 1px solid var(--color-line); }
.ts-dropdown .option.active { background: var(--color-accent-soft); }
.ts-dropdown .option.selected { font-weight: var(--weight-bold); }
.ts-dropdown .no-results { cursor: default; color: var(--color-ink-soft); }
.ts-dropdown .highlight { text-decoration: underline; }

/* Nav à 5 entrées : sur téléphone, les mots longs (« Photographier ») se coupent proprement. */
@media (max-width: 600px) { .nav { padding-inline: var(--space-2); gap: var(--space-1); } .nav__item { padding: 0 var(--space-1); hyphens: auto; } }

/* Chemin de la section La maison : étiquettes bois cliquables + consigne. */
.trail--house a.trail__part { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink); text-decoration: none; }
.trail--house a.trail__part:active { background: var(--color-wood-deep); }
.trail--house a.trail__part:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.trail__hint { font: var(--weight-regular) var(--text-lg)/1.3 var(--font-sans); color: var(--text-secondary); }

/* États vides : message sans bordure pointillée, sur toutes les pages. */
.empty { border: 0; }

/* Carte « + Ajouter … » en fin de liste : pointillés, mot en terre cuite. */
.picker__option--add { color: var(--color-accent); }

/* Les éléments à width: 100 % comptent marge intérieure et bordure dans leur largeur,
   sinon ils débordent de leur conteneur (champs du panneau latéral notamment). */
.input, .select, .textarea, .btn, .panel { box-sizing: border-box; }

/* Panneau latéral d'ajout, calé à droite sur le voile. */
.scrim--panel { justify-content: flex-end; align-items: stretch; }
.panel { width: min(520px, 100%); height: 100%; overflow-y: auto; background: var(--color-paper-raised); border-left: 3px solid var(--color-ink); padding: var(--space-8) var(--page-pad); display: flex; flex-direction: column; gap: var(--space-6); }
.panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.panel__header h2 { font-size: var(--text-h1); text-wrap: balance; }