/* kb-dialogues.css — fenêtres de dialogue et sélecteurs « Ketchup moutarde »
   (components/shared/dialogues.js). Port de docs/v4/handoff-marque-dialogues/screens/styles/bundle.css :
   classes préfixées kbd-, jetons de tokens.css (danger des dialogues = rouge de marque). */
.kbd { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
.kbd-scrim { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; transition: opacity 200ms linear; }
.kbd-sheet {
  position: relative; box-sizing: border-box; width: 100%; max-width: var(--size-sheet-max);
  max-height: calc(100% - 48px); overflow: auto; overscroll-behavior: contain;
  background: var(--color-surface); color: var(--ink);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-sheet);
  padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
.kbd--ouvert .kbd-scrim { opacity: 1; }
.kbd--ouvert .kbd-sheet { transform: none; }
.kbd--sortie .kbd-scrim { opacity: 0; }
.kbd--sortie .kbd-sheet { transform: translateY(100%); transition-duration: 220ms; transition-timing-function: cubic-bezier(.4,0,1,1); }
@media (prefers-reduced-motion: reduce) {
  .kbd-sheet { transform: none; opacity: 0; transition: opacity 120ms linear; }
  .kbd--ouvert .kbd-sheet { opacity: 1; }
  .kbd--sortie .kbd-sheet { transform: none; opacity: 0; }
}
.kbd-handle { width: var(--size-handle-w); height: 4px; border-radius: var(--radius-pill); background: var(--color-line-strong); margin: var(--space-2) auto 0; position: relative; touch-action: none; }
.kbd-handle::before { content: ""; position: absolute; inset: -12px -24px; } /* zone de prise 84 × 28 */
.kbd-head { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-5); touch-action: none; }
.kbd-head-ico { flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-surface-2); color: var(--ink); }
.kbd-head-ico--danger { background: var(--color-danger-tint); color: var(--color-brand-text); }
.kbd-head-ico--action { background: var(--color-raspberry); color: var(--color-on-raspberry); }
.kbd-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.kbd-body { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
.kbd-body--q { color: var(--ink); font-weight: 500; }
.kbd-content:empty { display: none; }
.kbd-content { margin-top: var(--space-4); }
.kbd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.kbd-actions--seul, .kbd-actions--pile { grid-template-columns: 1fr; }
.kbd-actions [hidden] { display: none; }

.kbd-btn { min-height: var(--size-button); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); font: 600 16px/20px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; }
.kbd-btn--principal { background: var(--color-raspberry); color: var(--color-on-raspberry); }
.kbd-btn--secondaire { background: var(--color-surface-2); color: var(--ink); }
.kbd-btn--danger { background: var(--color-primary); color: var(--color-on-primary); }
.kbd-btn--contour { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--color-line-strong); }
.kbd-btn:disabled { opacity: .45; cursor: not-allowed; }
.kbd-btn--compact { min-height: 36px; padding: 0 14px; font-size: 15px; position: relative; }
.kbd-btn--compact::before { content: ""; position: absolute; inset: -4px -2px; }
.kbd-btn:focus-visible, .kbd-icon-btn:focus-visible, .kbd-option:focus-visible, .kbd-day:focus-visible, .kbd-chip:focus-visible, .kbd-slot:focus-visible, .kbd-source:focus-visible, .kbd-link:focus-visible, .kbd-wheel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kbd-icon-btn { width: var(--size-touch); height: var(--size-touch); border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.kbd-icon-btn:disabled { opacity: .35; }
.kbd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Saisie */
.kbd-label { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--space-2); }
.kbd-input { box-sizing: border-box; width: 100%; height: var(--size-button); padding: 0 14px; border-radius: var(--radius-md); border: 1.5px solid var(--color-line-strong); background: var(--color-surface); color: var(--ink); font: 400 16px/22px var(--font-body); }
.kbd-input:focus, .kbd-input.kbd-focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.kbd-aide { margin: var(--space-2) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.kbd-aide--err { color: var(--color-brand-text); font-weight: 500; }

/* Avertissement régime */
.kbd-regime { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kbd-regime-ligne { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.kbd-avatar { flex: none; width: 32px; height: 32px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-surface); color: var(--ink); font-weight: 600; font-size: 14px; }
.kbd-regime-txt { display: grid; gap: 2px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.kbd-regime-txt b { color: var(--ink); font-weight: 600; font-size: 15px; }

/* Liste de choix */
.kbd-sheet--liste { display: flex; flex-direction: column; }
.kbd-sheet--liste .kbd-content { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.kbd-search { position: sticky; top: 0; display: flex; align-items: center; gap: var(--space-2); height: var(--size-touch); padding: 0 12px; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--ink-3); margin-bottom: var(--space-2); }
.kbd-search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font: 400 16px/22px var(--font-body); outline: none; }
.kbd-search:focus-within { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.kbd-options { display: flex; flex-direction: column; overflow: auto; margin: 0 calc(-1 * var(--space-5)); }
.kbd-option { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-row); padding: 6px var(--space-5); border: 0; background: transparent; color: var(--ink); text-align: left; font: 500 16px/22px var(--font-body); cursor: pointer; border-top: 1px solid var(--line); }
.kbd-option:first-child { border-top: 0; }
.kbd-option[aria-checked="true"] { font-weight: 600; }
.kbd-option-txt { flex: 1; display: grid; }
.kbd-option-d { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-3); }
.kbd-option-check { color: var(--color-brand-text); display: grid; }
.kbd-radio { flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px var(--color-line-strong); display: grid; place-items: center; }
.kbd-option[aria-checked="true"] .kbd-radio { box-shadow: inset 0 0 0 2px var(--color-primary); }
.kbd-option[aria-checked="true"] .kbd-radio::after { content: ""; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--color-primary); }
.kbd-vide { margin: var(--space-6) var(--space-5); color: var(--ink-3); font-size: 15px; text-align: center; }

/* Date */
.kbd-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kbd-chip { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 0; background: var(--color-surface-2); color: var(--ink); font: 600 14px/18px var(--font-body); cursor: pointer; position: relative; }
.kbd-chip::before { content: ""; position: absolute; inset: -4px 0; }
.kbd-chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.kbd-month { display: flex; align-items: center; justify-content: space-between; margin: var(--space-3) -10px var(--space-1); }
.kbd-month-title { font-size: 16px; line-height: 22px; font-weight: 600; }
.kbd-cal { display: grid; gap: 2px; }
.kbd-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; }
.kbd-cal-dow { font-size: 13px; line-height: 28px; font-weight: 600; color: var(--ink-3); }
.kbd-day { width: var(--size-touch); height: var(--size-touch); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 500 16px/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.kbd-day--auj { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.kbd-day[aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; box-shadow: none; }
.kbd-day:disabled { color: var(--ink-3); opacity: .5; cursor: default; }

/* Heure */
.kbd-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.kbd-slot { min-height: var(--size-button); border: 0; border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--ink); font: 600 16px/20px var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; }
.kbd-slot[aria-checked="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.kbd-link { margin-top: var(--space-3); min-height: var(--size-touch); padding: 0; border: 0; background: none; color: var(--ink); font: 600 15px/20px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kbd-wheels[hidden] { display: none; }
.kbd-wheels { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-3); height: 176px; margin-top: var(--space-2); }
.kbd-wheels::before { content: ""; position: absolute; left: 0; right: 0; top: 66px; height: 44px; border-radius: var(--radius-md); background: var(--color-surface-2); }
.kbd-wheel { position: relative; width: 72px; height: 176px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 66px 0; box-sizing: border-box; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.kbd-wheel::-webkit-scrollbar { display: none; }
.kbd-wheel-item { height: 44px; display: grid; place-items: center; scroll-snap-align: center; font: 500 22px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.kbd-wheel-item[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.kbd-wheel-sep { position: relative; font-size: 20px; font-weight: 600; }

/* Photo */
.kbd-sources { display: grid; gap: var(--space-2); }
.kbd-source { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--ink); font: 600 16px/20px var(--font-body); text-align: left; cursor: pointer; }
.kbd-source-ico { width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--color-surface); }

/* Bandeau nouvelle version */
.kbd-banner { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: flex; align-items: center; gap: var(--space-2); padding: 8px 4px 8px 14px; border-radius: var(--radius-md); background: var(--color-inverse); color: var(--color-on-inverse); box-shadow: var(--shadow-banner); font: 500 15px/20px var(--font-body); animation: kb-banner-in 280ms cubic-bezier(.2,.8,.2,1); max-width: calc(var(--size-sheet-max) - 24px); margin: 0 auto; }
.kbd-banner-txt { flex: 1; min-width: 0; }
.kbd-banner-ico { display: grid; }
.kbd-banner-x { color: inherit; }
.kbd-banner--sortie { opacity: 0; transform: translateY(12px); transition: opacity 200ms, transform 200ms; }
@keyframes kb-banner-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .kbd-banner { animation: none; } }


/* Sélecteur déclencheur (remplace l'apparence d'un <select> / d'un champ date) */
.kbd-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--size-touch); padding: 0 14px; border-radius: var(--radius-field, 10px); border: 1.5px solid var(--line); background: var(--color-surface); color: var(--ink); font: 500 16px/22px var(--font-body); text-align: left; cursor: pointer; }
.kbd-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kbd-trigger[disabled] { opacity: .5; cursor: not-allowed; }
.kbd-trigger__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbd-trigger__val--vide { color: var(--ink-3); }
.kbd-trigger__chev { flex: none; display: grid; color: var(--ink-3); }

/* Les styles globaux des champs ne s'appliquent pas aux champs des feuilles. */
.kbd .kbd-search-input, .kbd .kbd-search-input:focus { -webkit-appearance: none; appearance: none; border: 0; box-shadow: none; outline: none; background: transparent; padding: 0; min-height: 0; border-radius: 0; }
.kbd textarea.kbd-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
.kbd-banner[hidden] { display: none; }

/* Zones d'ajout de photo devenues des boutons (elles étaient des <label> avec un input caché). */
button.kc-capture, button.rf-drop { width: 100%; font: inherit; }
button.cooking-photo__picker { width: 100%; }
button.kc-capture:focus-visible, button.rf-drop:focus-visible, button.cooking-photo__picker:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }