@import url("./typography-trial.css") layer(typography-trial);

/* =====================================================================
   Doudapp — composants v2 (système de design « Doudapp Dense » v2), fichier « ui.css ».
   Fichier unique des composants : chargé par le Budget (en dernier), la coque et Suivi voitures
   (à la place de l'ancien shared/components.css, fusionné en fin de fichier).
   Un élément = un composant = un rendu, pour toutes les applications (Budget, Suivi voitures, en-tête).
   Les écrans assemblent ces composants ; ils ne les redessinent pas.
   Chargé après les styles historiques ; mobile-layout.css assemble ensuite la disposition du Budget.
   Les états et surfaces des contrôles restent définis ici.
   ===================================================================== */

/* ---------- Jetons de taille (tokens.json « size », « spacing ») ---------- */
html[data-design='doudapp'] {
  --control-height: 32px;
  --control-height-sm: 28px;
  --control-height-touch: 44px;
  --check-size: 20px;
  --check-border: 2px;
  --check-radius: 4px;
  --check-hit: 28px;
  --title-size: 22px;
  --title-height: 56px;
  --row-height: 32px;
  --row-height-roomy: 40px;
  --head-height: 30px;
  --bar-height: 36px;
  --panel-head-height: 44px;
  --pad-cell: 10px;
  --pad-control: 12px;
  --pad-card: 12px;
  --icon-picker-height: 168px;
  --sheet-grab-width: 44px;
  --sheet-grab-height: 5px;
  --sheet-grab-radius: 3px;
  --sheet-grab-top: 8px;
  --gap-s: 6px;
  --gap-m: 8px;
  --gap-l: 14px;
  --toast-success: #2f7d32;
  --toast-error: #b3261e;
  --toast-info: #6b5a1e;
}
html[data-design='doudapp']:not([data-theme='dark']) {
  --success-bg: #e6f4e3;
  --deferred-bg: #fbe9d6;
}
html[data-design='doudapp'][data-theme='dark'] {
  --success-bg: #2b3827;
  --deferred-bg: #3f2e20;
}

/* ---------- Bouton ---------- */
html[data-design='doudapp'] body .btn {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--text);
  font: 600 13px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] body .btn:where(:not(:disabled):not([aria-disabled='true'])):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] body .btn:where(:not(:disabled):not([aria-disabled='true'])):active { background: var(--pressed); }
html[data-design='doudapp'] body .btn:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
html[data-design='doudapp'] body .btn:is(:disabled, [aria-disabled='true']) { opacity: 0.5; cursor: default; }
html[data-design='doudapp'] body .btn .icon { font-size: 18px; }
html[data-design='doudapp'] body .btn.primary { background: var(--accent); border-color: var(--accent-line); color: var(--on-accent); }
@media (hover: hover) {
html[data-design='doudapp'] body .btn.primary:where(:not(:disabled):not([aria-disabled='true'])):hover { background: var(--accent-hover); }
}
html[data-design='doudapp'] body .btn.primary:where(:not(:disabled):not([aria-disabled='true'])):active { background: var(--accent-pressed); }
html[data-design='doudapp'] body .btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
@media (hover: hover) {
html[data-design='doudapp'] body .btn.ghost:where(:not(:disabled):not([aria-disabled='true'])):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] body .btn.danger { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-accent); }
@media (hover: hover) {
html[data-design='doudapp'] body .btn.danger:where(:not(:disabled):not([aria-disabled='true'])):hover { background: var(--danger-solid-hover); }
}
html[data-design='doudapp'] body .btn.sm { height: var(--control-height-sm); padding: 0 10px; font-size: 12px; }
html[data-design='doudapp'] body .btn.icon-only { width: var(--control-height); padding: 0; }
html[data-design='doudapp'] body .btn.sm.icon-only { width: var(--control-height-sm); }

/* Surface commune aux listes de choix, menus d'actions et menus de navigation. */
html[data-design='doudapp'] :is(.choice-menu, .topbar-menu),
html[data-design='doudapp'] #dropdown-menu {
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}

/* ---------- Option de menu : coque et menus Budget ----------
   Les confirmations et les commandes internes des tris gardent leurs composants. */
html[data-design='doudapp'] .menu-item,
html[data-design='doudapp'] #dropdown-menu > .menu-item {
  width: 100%;
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  gap: var(--gap-m, 8px);
  padding: 4px var(--pad-control);
  background: transparent;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] .menu-item:where(:not(:disabled):not([aria-disabled='true'])):hover,
html[data-design='doudapp'] #dropdown-menu > .menu-item:where(:not(:disabled):not([aria-disabled='true'])):hover {
  background: var(--hover-button);
}
}
html[data-design='doudapp'] .menu-item:where(:not(:disabled):not([aria-disabled='true'])):active,
html[data-design='doudapp'] #dropdown-menu > .menu-item:where(:not(:disabled):not([aria-disabled='true'])):active {
  background: var(--pressed-button);
}
html[data-design='doudapp'] .menu-item:focus-visible,
html[data-design='doudapp'] #dropdown-menu > .menu-item:focus-visible {
  outline: 2px solid var(--field-focus);
  outline-offset: -2px;
}

html[data-design='doudapp'] .menu-item[role='option'][aria-selected='true'],
html[data-design='doudapp'] #dropdown-menu > .menu-item[aria-checked='true'] {
  background: var(--selection-background);
  color: var(--selection-text);
  font-weight: 600;
  --icon-fill: 1;
}

html[data-design='doudapp'] .menu-item:is(:disabled, [aria-disabled='true']) { opacity: 0.5; cursor: default; }

/* =====================================================================
   Fenêtre de saisie (opération, virement, différé, prévision, enveloppe) — même contenu partout :
   type, résumé repliable (date, mois, compte), montant en grand, intitulé, catégorie en pastilles,
   pointage, affectation aux enveloppes ; pied Annuler / Enregistrer et nouveau / Enregistrer.
   Grand écran : fenêtre centrée d'une colonne. Téléphone : feuille qui monte du bas.
   ===================================================================== */
html[data-design='doudapp'] #editor-dialog {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: min(860px, calc(100dvh - 48px)) !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-dialog) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
html[data-design='doudapp'] #editor-dialog[open] { display: flex; }
html[data-design='doudapp'] #editor-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: inherit;
  min-height: 0;
}
html[data-design='doudapp'] #editor-dialog .dialog-heading {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 10px 16px !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-design='doudapp'] #editor-dialog .dialog-heading h2 {
  flex: 1;
  margin: 0;
  font: 700 18px/1.2 var(--font) !important;
  letter-spacing: 0;
  color: var(--text);
}
html[data-design='doudapp'] #editor-dialog #editor-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] #editor-dialog #editor-close:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex !important;
  flex-direction: column;
  gap: var(--gap-l);
  padding: 16px !important;
  background: var(--paper);
}
/* Une seule colonne partout : les grilles internes empilent les champs. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) :is(.edit-grid, .editor-main, .editor-stack, [id='acct-slot']) {
  display: flex !important;
  flex-direction: column;
  gap: var(--gap-l);
  margin: 0;
  padding: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [hidden] { display: none !important; }
/* Le contenu défile : aucun bloc ne se tasse. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) > *,
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) :is(.edit-grid, .editor-main, .accordion-body) > * { flex: none; }

/* Champ (composant Field) dans la fenêtre : libellé au-dessus, boîte de 32 px (44 px sur téléphone). */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .edit-field:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .edit-field > span:first-child,
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) legend {
  display: block;
  margin: 0;
  padding: 0;
  font: 400 12px var(--font);
  color: var(--muted);
  text-align: left;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields, .sheet-form) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, .choice-trigger, textarea):not(:where(.stepper > input, .stepper-value > input)) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  margin: 0;
  padding: 0 var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background-color: var(--field);
  color: var(--text);
  font: 400 13px var(--font);
  text-align: left;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .choice-trigger { display: flex; align-items: center; gap: 8px; cursor: pointer; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .choice-trigger > span:not(.icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) :is(input, select, .choice-trigger):focus { outline: 0; border-color: var(--blue); box-shadow: var(--shadow-focus); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) input::-webkit-date-and-time-value { text-align: left; }

/* Sélecteur segmenté : adaptations des formulaires au composant partagé ci-dessous. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .seg-field { gap: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .segmented {
  display: flex;
  width: 100%;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .segmented > button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  height: auto;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [data-kind-field] .segmented > button { min-height: 38px; }

/* Résumé repliable (composant Collapsible) : « Dépense · octobre 2026 — 19 octobre 2026 · Commun », état à droite. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--hover-control);
  overflow: hidden;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-head {
  transition: background-color .15s, box-shadow .15s;
  width: 100%;
  min-height: 52px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-summary { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-summary strong { font: 600 14px var(--font); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-summary small { font: 400 12px var(--font); color: var(--muted); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-badge {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: 600 12px var(--font);
  color: var(--text-secondary);
  white-space: nowrap;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-chevron { font-size: 22px; color: var(--muted); transition: transform 0.15s; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion.is-open .accordion-chevron { transform: rotate(180deg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-body { padding: 4px 12px 12px; border-top: 1px solid var(--border); background: inherit; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-body:not([hidden]) { display: flex !important; flex-direction: column; gap: var(--gap-l); padding-top: 12px; }

/* Montant en grand, centré, couleur du type. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field { align-items: center; gap: 2px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field > span:first-child { text-align: center; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input {
  height: 56px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 700 36px/1 var(--font) !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input::-webkit-outer-spin-button,
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input::placeholder { color: var(--border); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  text-align: left !important;
  width: auto;
  min-width: 4ch;
  max-width: 100%;
  padding: 0 !important;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 2px 14px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field);
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Le grand montant garde un contour plein, accentué au focus. */
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-row:hover { border-style: solid; }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-row:focus-within { border-style: solid; border-color: var(--blue); box-shadow: var(--shadow-focus); }
/* Opération pointée : le fond du montant se colore comme dans le tableau. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='expense'][aria-checked='true']) .amount-row { background: var(--danger-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='income'][aria-checked='true']) .amount-row { background: var(--success-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='deferred'][aria-checked='true']) .amount-row { background: var(--deferred-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-sign { font: 700 36px/1 var(--font); margin-right: 2px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] :is([data-seg-value='expense'], [data-seg-value='deferred'])[aria-checked='true']) .amount-sign::before { content: '−'; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='income'][aria-checked='true']) .amount-sign::before { content: '+'; }
/* Virement : signe et couleur selon le compte affiché (« − » s'il en part, « + » s'il y arrive). */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='out']:has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) .amount-sign::before { content: '−'; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='in']:has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) .amount-sign::before { content: '+'; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='out']:has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) :is(.amount-sign, .amount-field input) { color: var(--red); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='in']:has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) :is(.amount-sign, .amount-field input) { color: var(--green); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='expense'][aria-checked='true']) .amount-sign { color: var(--red); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='deferred'][aria-checked='true']) .amount-sign { color: var(--olive); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='income'][aria-checked='true']) .amount-sign { color: var(--green); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field input:placeholder-shown ~ *,
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-row:has(input:placeholder-shown) .amount-sign { color: var(--border) !important; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='expense'][aria-checked='true']) .amount-field input { color: var(--red); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='deferred'][aria-checked='true']) .amount-field input { color: var(--olive); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-seg='opKind'] [data-seg-value='income'][aria-checked='true']) .amount-field input { color: var(--green); }

/* Catégorie en pastilles : la liste déroulante reste dans le formulaire, cachée. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .has-chips > :is(select, .choice-picker) { display: none !important; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .cat-chips { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
/* Pastille de choix (composant Chip) : un seul rendu pour le choix unique (.cat-chip, bouton)
   et les choix multiples (.chip-check, case à cocher). Le :is(:is(#editor-fields, .page-editor-fields), body) donne le même poids
   partout (fenêtre de saisie comprise), pour que l'ancien style d'un écran ne reprenne pas la main. */
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip, .chip-check) {
  margin: 0 !important;
  position: relative;
  height: 32px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--field);
  color: var(--text);
  font: 400 13px var(--font);
  white-space: nowrap;
  cursor: pointer;
}
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .chip-check input { position: absolute; opacity: 0; pointer-events: none; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip, .chip-check) .icon { font-size: 16px; color: var(--muted); }
@media (hover: hover) {
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip, .chip-check):where(:not(:disabled):not([aria-disabled='true']):not(:has(input:disabled))):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip.on, .chip-check:has(input:checked)) { border-color: var(--selection-border); background: var(--selection-background); font-weight: 600; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip.on, .chip-check:has(input:checked)) .icon { color: var(--selection-border); }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip, .chip-check):has(:focus-visible) { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .cat-chip:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .cat-chip.more { color: var(--text-secondary); font-weight: 600; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip:disabled, .cat-chip[aria-disabled='true'], .chip-check:has(input:disabled)) { opacity: 0.5; cursor: default; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .chip-check.is-taken { background: var(--hover-control); color: var(--muted); border-style: dashed; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .chip-check.is-taken .taken-info { font-size: 15px; color: var(--muted); }

/* Interrupteur (composant Switch) dans une ligne : « Pointée — Déjà passée sur le compte ». */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .switch-field:not([hidden]) {
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .switch-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .switch-text b { font: 600 13px var(--font); color: var(--text); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .switch-text small { font: 400 12px var(--font); color: var(--muted); }
/* Champ d'ajout rapide (composant QuickAdd) : une ligne pleine largeur en tête d'un bloc, validée par Entrée (boîte de réception).
   <label class="quick-add"><span class="icon">add</span><input type="text" placeholder="…"></label> */
html[data-design='doudapp'] .quick-add {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-height);
  margin: var(--pad-cell);
  padding: 0 var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--field);
  cursor: text;
}
@media (hover: hover) {
html[data-design='doudapp'] .quick-add:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .quick-add:focus-within { border-color: var(--blue); background: var(--field); box-shadow: var(--shadow-focus); }
html[data-design='doudapp'] .quick-add > .icon { flex: none; font-size: 18px; color: var(--muted); }
html[data-design='doudapp'] .quick-add > input:not([type='checkbox']):not([type='radio']) {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text);
  font: 400 13px var(--font);
  outline: 0;
}
html[data-design='doudapp'] .quick-add > input::placeholder { color: var(--muted); }

/* Sélecteur segmenté : surface et états communs aux pages et aux formulaires. */
html[data-design='doudapp'] body .segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field);
}
html[data-design='doudapp'] body .segmented > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: calc(var(--control-height) - 8px);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: 600 13px var(--font);
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] body .segmented > button:where(:not(:disabled):not([aria-disabled='true'])):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] body .segmented > button[aria-checked='true'] {
  background: var(--selection-background);
  color: var(--selection-text);
}
html[data-design='doudapp'] body .segmented > button .icon { font-size: 17px; }
html[data-design='doudapp'] body .segmented > button:is(:disabled, [aria-disabled='true']) { opacity: 0.5; cursor: default; }
html[data-design='doudapp'] body .segmented > button[hidden] { display: none; }
/* Variante légère : mêmes choix et mêmes états, sans cadre autour du groupe. */
html[data-design='doudapp'] body .segmented.segmented-plain {
  --selection-background: var(--pressed-button);
  border: 0;
  background: transparent;
}
html[data-design='doudapp'] body .segmented > button:focus-visible {
  outline: 2px solid var(--field-focus);
  outline-offset: -2px;
}

/* Zone de texte dans une fenêtre de saisie (les champs de 32 px ne conviennent pas au texte long). */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) textarea { height: auto; min-height: 84px; padding: 8px var(--pad-control); line-height: 1.5; resize: vertical; }
/* Fenêtre large (assistant de création de recette). */
html[data-design='doudapp'] #editor-dialog[data-wide='true'] { width: min(960px, calc(100vw - 32px)) !important; }
/* Photo (composants Thumb et HeroPhoto) : miniature de liste 48 px, photo de lecture pleine largeur. */
html[data-design='doudapp'] .thumb { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-s); background: var(--hover-control); color: var(--muted); object-fit: cover; vertical-align: middle; }
html[data-design='doudapp'] .hero-photo { display: block; width: 100%; max-height: 320px; border-radius: var(--radius); object-fit: cover; }
html[data-design='doudapp'] .photo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html[data-design='doudapp'] .photo-row .hero-photo { max-height: 160px; width: auto; max-width: 100%; }
/* Ingrédient lié dans le texte d'une étape (Mention) : en gras, quantité au survol ou au focus. */
html[data-design='doudapp'] .mention { font-weight: 700; color: var(--blue); border-bottom: 1px dotted var(--blue); cursor: help; }

html[data-design='doudapp'] .data-table tr.is-done strong { text-decoration: line-through; color: var(--muted); font-weight: 400; }

/* Page qui défile (Recettes, Courses) : c'est la page qui défile, pas chaque tableau. Les écrans du Budget gardent leur
   mise en page à tableaux défilants. À poser sur <body class="page-flow">. */
html[data-design='doudapp'] body.page-flow .workspace { overflow-y: auto; overflow-x: hidden; }
html[data-design='doudapp'] body.page-flow :is(.operations-panel, .operations-frame, .table-scroll) { flex: none; min-height: 0; overflow: visible; }

/* Liste d'éléments (composant ItemList) : lignes de 52 px minimum, texte à gauche, information à droite, un seul geste par ligne.
   <div class="item-list"><div class="item-group">Rayon</div><button class="item-row"><span class="item-main"><strong>Farine</strong><small>800 g</small></span><span class="item-aside">2,40 €</span></button></div> */
html[data-design='doudapp'] .item-list { display: flex; flex-direction: column; }
html[data-design='doudapp'] .item-group { padding: 8px var(--pad-cell); background: var(--hover-surface); border-bottom: 1px solid var(--border); color: var(--text-secondary); font: 600 12px var(--font); }
html[data-design='doudapp'] .item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 8px var(--pad-cell);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 14px var(--font);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(.item-row:hover, .item-row.is-active) { background: var(--hover-control); }
}
html[data-design='doudapp'] .item-row:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; }
html[data-design='doudapp'] .item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-design='doudapp'] .item-main > strong { font: 600 14px var(--font); overflow-wrap: anywhere; }
html[data-design='doudapp'] .item-main > small { color: var(--muted); font: 400 12px var(--font); }
html[data-design='doudapp'] .item-aside { flex: none; max-width: 45%; text-align: right; color: var(--text-secondary); font: 500 13px var(--font); }
html[data-design='doudapp'] .item-aside > small { display: block; color: var(--muted); font: 400 12px var(--font); }
html[data-design='doudapp'] .item-row.is-done .item-main > strong { text-decoration: line-through; color: var(--muted); font-weight: 400; }
html[data-design='doudapp'] .item-row.is-done { background: transparent; }
html[data-design='doudapp'] .item-empty { padding: 20px var(--pad-cell); color: var(--muted); text-align: center; }
/* Barre de progression (composant Progress) : « 3 / 12 achetés ». */
html[data-design='doudapp'] .progress { height: 8px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
html[data-design='doudapp'] .progress > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width 0.2s; }
/* Ligne de réglage d'une page : puces d'état et sélecteur côte à côte, qui passent à la ligne. */
html[data-design='doudapp'] .summary-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: var(--pad-cell); }
html[data-design='doudapp'] .summary-bar > .progress { flex: 1; min-width: 80px; }
html[data-design='doudapp'] .summary-bar .account-filter select { min-width: min(260px, 100%); }
html[data-design='doudapp'] .item-row > .row-actions { flex: none; }
html[data-design='doudapp'] .item-row > .icon { flex: none; color: var(--muted); }

/* Formulaire allégé (assistant de recette) : sections séparées par un filet, champs courts côte à côte (passent à la ligne sur téléphone). */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .form-section { display: flex; flex-direction: column; gap: var(--gap-l); padding-top: 14px; border-top: 1px solid var(--border); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .form-section > h3 { margin: 0; font: 600 14px var(--font); color: var(--text); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap-l); }
/* Le créateur de recette est plus large que les autres fenêtres larges : colonne de gauche de 380 px. */
html[data-design='doudapp'] #editor-dialog[data-wide='true']:has(.recipe-editor) { width: min(1240px, calc(100vw - 32px)) !important; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--gap-l); align-items: start; }
/* Colonne de droite : les onglets et leur contenu sont dans un cadre. */
/* Colonne de droite : les onglets au-dessus, et le cadre est autour du seul contenu de l'onglet. L'onglet actif est relié au cadre :
   il recouvre le filet du haut du cadre (sa bordure du bas a la couleur du fond), sans espace entre les deux. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor > .recipe-editor-steps { gap: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .forecast-tabs { gap: 4px; border-bottom: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .forecast-tabs .forecast-tab {
  position: relative; z-index: 1; margin: 0 0 -1px; border: 1px solid transparent !important;
  border-radius: var(--radius-s) var(--radius-s) 0 0 !important; background: transparent !important;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .forecast-tabs .forecast-tab.active {
  border-color: var(--border) !important; border-bottom-color: var(--paper) !important; border-top: 2px solid var(--accent) !important; background: var(--paper) !important;
}
/* Photo de la recette plus basse, pour que toute la colonne de gauche tienne sans défiler. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-main .photo-box { aspect-ratio: 16 / 6; }
/* Grand écran : la fenêtre a une hauteur fixe, et chaque colonne défile seule (barre de défilement par bloc, pas sur toute la fenêtre).
   La colonne de droite (le cadre des onglets) prend toute la hauteur disponible. */
@media (min-width: 1001px) {
  html[data-design='doudapp'] #editor-dialog[data-wide='true']:has(.recipe-editor) { height: min(860px, calc(100dvh - 48px)) !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has(.recipe-editor) { overflow: hidden; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor > * { align-self: start; max-height: 100%; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-main { overflow-y: auto; }
  /* Colonne de droite : les onglets restent en place, seul leur contenu défile (barre de défilement à l'intérieur du cadre). */
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps { overflow: hidden; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .forecast-tabs { flex: none; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .form-section { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: var(--gap-l); border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor > .recipe-editor-steps { align-self: stretch; }
}
/* Étapes (maquette) : carte en pointillés, « Étape N » à gauche et « + Ajouter photo » à droite, bouton « + Ajouter une étape » centré. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-head > strong { font: 700 14px var(--font); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-head-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-add { display: flex; justify-content: center; }
html[data-design='doudapp'] .forecast-tab .tab-warn { display: inline-flex; vertical-align: middle; }
html[data-design='doudapp'] .forecast-tab .tab-warn .icon { font-size: 16px; color: var(--red); }
/* Tableau des ingrédients : quantité et unité étroites, la place va à l'ingrédient. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table { table-layout: fixed; width: 100%; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table :is(th, td):nth-child(1) { width: 104px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table :is(th, td):nth-child(2) { width: 132px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table :is(th, td):nth-child(4) { width: 48px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table :is(input, select) { width: 100%; min-width: 0; }
/* Recherche d'ingrédient : la liste de résultats flotte sous le champ au lieu de pousser le tableau. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-search { position: relative; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-search :is(#ing-results, .ing-results):not(:empty) {
  position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-menu);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) :is(.recipe-editor-main, .recipe-editor-steps) { display: flex; flex-direction: column; gap: var(--gap-l); min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps > .form-section { padding: var(--gap-l); border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); }
/* Le coin haut-gauche du cadre n'est carré que si le premier onglet est actif (il s'y raccorde) ; sinon, tous les coins sont arrondis. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor-steps:has(> .forecast-tabs > .forecast-tab:first-child.active) > .form-section { border-top-left-radius: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .photo-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--muted);
  font: 600 13px var(--font);
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .photo-box:hover { border-style: solid; background: var(--hover-control); }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .photo-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .photo-box .icon { font-size: 28px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-card { display: flex; flex-direction: column; gap: var(--account-grid-gap); padding: var(--pad-card); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--paper); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--account-grid-gap); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-head > b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 13px var(--font); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .step-head > input { flex: 1; min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .tag-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-design='doudapp'] .chip .tag-x { margin-left: 4px; padding: 0 2px; border: 0; background: transparent; color: var(--muted); font: 700 14px var(--font); cursor: pointer; }
@media (hover: hover) {
html[data-design='doudapp'] .chip .tag-x:hover { color: var(--text); }
}
@media (max-width: 1000px) { html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recipe-editor { grid-template-columns: minmax(0, 1fr); } }


/* Pile de blocs : plusieurs blocs (bandeau, tableaux) l'un sous l'autre avec l'espacement standard (Aujourd'hui). */
html[data-design='doudapp'] .panel-stack { display: flex; flex-direction: column; gap: var(--account-grid-gap, 8px); }
html[data-design='doudapp'] .panel-stack > .operations-panel { min-height: 0; flex: none; }
/* Commande réservée au grand écran : sur téléphone, elle est dans le menu « … ». */
@media (max-width: 700px) { html[data-design='doudapp'] .hide-phone { display: none !important; } }

/* Groupe repliable (composant GroupHead) : une ligne de 36 px dans un tableau, titre 14/600, compteur à droite, chevron.
   <tr class="group-head"><td colspan="n"><button type="button" aria-expanded="true"><span class="icon group-chevron">expand_more</span>
   <span class="icon">home</span><span>Maison</span><span class="group-count">3</span></button></td></tr>
   (Le groupe des opérations du Budget garde son style, .group-row.) */
html[data-design='doudapp'] .data-table .group-head > td {
  height: 36px;
  padding: 0;
  background: var(--hover-surface);
  border-bottom: 1px solid var(--border);
}
html[data-design='doudapp'] .data-table .group-head button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 var(--pad-cell);
  border: 0;
  background: transparent;
  color: var(--text);
  font: 600 14px var(--font);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] .data-table .group-head button:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .data-table .group-head button:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -2px; }
html[data-design='doudapp'] .data-table .group-head .icon { font-size: 18px; color: var(--muted); }
html[data-design='doudapp'] .data-table .group-head .group-chevron { transition: transform 0.15s; }
html[data-design='doudapp'] .data-table .group-head button[aria-expanded='false'] .group-chevron { transform: rotate(-90deg); }
html[data-design='doudapp'] .data-table .group-head .group-count { margin-left: auto; font: 400 12px var(--font); color: var(--muted); }
html[data-design='doudapp'] .data-table tr[hidden] { display: none; }

/* Ligne à étiquettes et actions repliables (liste de tâches) : sur téléphone, les étiquettes passent sous l'intitulé
   (.inline-tags, à côté de .tags-col sur grand écran) et les actions se regroupent dans le bouton « … » (.more-btn). */
html[data-design='doudapp'] .data-table .inline-tags,
html[data-design='doudapp'] .row-actions .more-btn { display: none; }
@media (max-width: 700px) {
  html[data-design='doudapp'] .data-table .tags-col { display: none; }
  html[data-design='doudapp'] .data-table .inline-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  html[data-design='doudapp'] .data-table td.wrap { white-space: normal; min-width: 0; }
  html[data-design='doudapp'] .row-actions:has(.more-btn) .row-action:not(.more-btn) { display: none; }
  html[data-design='doudapp'] .row-actions .more-btn { display: inline-flex; }
  html[data-design='doudapp'] .account-heading.filter-bar { height: auto; flex-wrap: wrap; padding-block: 6px; }
  html[data-design='doudapp'] .account-heading.filter-bar .account-filter { flex: 1 1 100%; }
}

/* Intitulé en grand (composant TitleField) : champ principal des fenêtres sans montant, pleine largeur, aligné à gauche. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field { align-items: stretch; gap: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field > span:first-child { text-align: left; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field input:not([type='checkbox']):not([type='radio']):not([type='hidden']) {
  height: var(--title-height);
  padding: 0 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--field);
  font: 600 var(--title-size)/1.2 var(--font);
  text-align: left;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field input::placeholder { color: var(--border); font-weight: 400; }
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field input:hover { border-style: solid; }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .title-field input:focus { border-style: solid; border-color: var(--blue); box-shadow: var(--shadow-focus); }

/* Case à cocher (composant Check) : carrée, pour ne pas la confondre avec un bouton radio ni avec l'interrupteur.
   <label class="check"><input type="checkbox"><span><span class="icon">check</span></span></label> */
html[data-design='doudapp'] .check { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--check-hit); height: var(--check-hit); margin: 0; cursor: pointer; }
html[data-design='doudapp'] .check > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-design='doudapp'] .check > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--check-size);
  height: var(--check-size);
  box-sizing: border-box;
  border: var(--check-border) solid var(--muted);
  border-radius: var(--check-radius);
  background: var(--field);
  color: var(--on-accent);
  transition: background 0.12s, border-color 0.12s;
}
html[data-design='doudapp'] .check > span .icon { font-size: 16px; opacity: 0; transition: opacity 0.12s; }
@media (hover: hover) {
html[data-design='doudapp'] .check:where(:not(:has(> input:disabled))):hover > span { border-color: var(--accent); background: var(--hover-control); }
}
html[data-design='doudapp'] .check > input:checked + span { background: var(--accent); border-color: var(--accent); }
html[data-design='doudapp'] .check > input:checked + span .icon { opacity: 1; }
@media (hover: hover) {
html[data-design='doudapp'] .check > input:checked:where(:not(:disabled)):hover + span { background: var(--accent-hover); }
}
html[data-design='doudapp'] .check > input:focus-visible + span { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
html[data-design='doudapp'] .check > input:disabled { cursor: default; }
html[data-design='doudapp'] .check > input:disabled + span { opacity: 0.5; border-color: var(--border); }
/* Interrupteur (composant Switch) : un seul rendu, deux écritures possibles :
   <button class="switch-btn" role="switch" aria-checked="…"> ou <label class="switch"><input type="checkbox"><span></span></label>. */
html[data-design='doudapp'] :is(.switch-btn, .switch > span) {
  position: relative;
  flex: none;
  display: block;
  width: 44px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, var(--paper));
  cursor: pointer;
  transition: background 0.15s;
}
html[data-design='doudapp'] .switch { position: relative; flex: none; display: inline-block; width: 44px; height: 26px; margin: 0; }
html[data-design='doudapp'] .switch > span { position: absolute; inset: 0; width: auto; height: auto; }
html[data-design='doudapp'] .switch > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
html[data-design='doudapp'] :is(.switch-btn, .switch > span)::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #0003;
  transition: transform 0.15s;
}
html[data-design='doudapp'] :is(.switch-btn[aria-checked='true'], .switch > input:checked + span) { background: var(--accent); }
html[data-design='doudapp'] :is(.switch-btn[aria-checked='true'], .switch > input:checked + span)::after { transform: translateX(18px); }
html[data-design='doudapp'] :is(.switch-btn:focus-visible, .switch > input:focus-visible + span) { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
html[data-design='doudapp'] :is(.switch-btn:disabled, .switch > input:disabled + span) { opacity: 0.5; cursor: default; }
html[data-design='doudapp'] .switch > input:disabled { cursor: default; }

/* Virement : compte débiteur, flèche, compte créditeur, empilés. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts:not([hidden]) { display: flex !important; flex-direction: column; gap: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts > :not(.transfer-arrow),
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-from > .edit-field { width: 100%; margin: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts .transfer-arrow { align-self: center; transform: rotate(90deg); color: var(--muted); font-size: 20px; }

/* Affectation aux enveloppes. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-editor:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}
/* Dans son accordéon, l'affectation n'a plus besoin de filet ni de marge haute. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion .allocation-editor:not([hidden]) { padding-top: 0; border-top: 0; margin-top: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .alloc-title { font: 600 14px var(--font); color: var(--text); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .auto-budget:not([hidden]) { display: flex !important; flex-direction: column; gap: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) :is(.auto-budget-hint, .alloc-note) { margin: 0; font: 400 12px/1.4 var(--font); color: var(--muted); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .alloc-manual:not([hidden]) { display: flex !important; flex-direction: column; gap: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .alloc-box { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: transparent; text-align: left; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .alloc-box .alloc-empty { margin: 0; font-size: 12px; color: var(--muted); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) #allocation-rows { display: flex; flex-direction: column; gap: 8px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > .choice-picker { flex: 1 1 100%; min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > input { flex: 1 1 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > button {
  flex: none;
  width: var(--control-height);
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > button:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) #add-allocation {
  align-self: flex-start;
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--text);
  font: 600 13px var(--font);
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) #add-allocation:hover { background: var(--hover-control); }
}

/* Pied : [Supprimer] … Annuler · Enregistrer et nouveau · Enregistrer. */
html[data-design='doudapp'] #editor-dialog .dialog-actions {
  position: relative;
  flex: none;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 12px 16px !important;
  border-top: 1px solid var(--border);
  background: var(--paper);
}
html[data-design='doudapp'] #editor-dialog .dialog-actions > button {
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s) !important;
  background: var(--paper);
  color: var(--text);
  font: 600 13px var(--font);
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] #editor-dialog .dialog-actions > button:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] #editor-dialog .dialog-actions > button[hidden] { display: none !important; }
html[data-design='doudapp'] #editor-dialog .dialog-actions > .save-button:not(#save-and-new) {
  order: 3;
  border-color: var(--accent-line);
  background: var(--accent);
  color: var(--on-accent);
}
@media (hover: hover) {
html[data-design='doudapp'] #editor-dialog .dialog-actions > .save-button:not(#save-and-new):hover { background: var(--accent-hover); }
}
html[data-design='doudapp'] #editor-dialog .dialog-actions > #save-and-new { order: 2; }
html[data-design='doudapp'] #editor-dialog .dialog-actions > #editor-cancel { order: 1; display: inline-flex !important; }
html[data-design='doudapp'] #editor-dialog .dialog-actions > #editor-delete {
  order: 0;
  margin-right: auto;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--red) !important;
}
@media (hover: hover) {
html[data-design='doudapp'] #editor-dialog .dialog-actions > #editor-delete:hover { background: var(--danger-bg); }
}

/* Confirmation héritée des fenêtres ; les confirmations structurées reprennent le menu du Budget. */
html[data-design='doudapp'] :is(#editor-delete-popover, #recipe-editor-delete-popover) {
  box-sizing: border-box;
  left: var(--pad-card);
  width: max-content;
  min-width: min(260px, calc(100% - 2 * var(--pad-card)));
  max-width: min(320px, calc(100% - 2 * var(--pad-card)));
  padding: var(--pad-card);
  gap: var(--gap-m, 8px);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
html[data-design='doudapp'] :is(#editor-delete-popover, #recipe-editor-delete-popover) > span {
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
html[data-design='doudapp'] :is(#dropdown-menu.confirm-menu, :is(#editor-delete-popover, #recipe-editor-delete-popover).confirm-menu) {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}
html[data-design='doudapp'] :is(#editor-delete-popover, #recipe-editor-delete-popover).confirm-menu {
  display: block;
  padding: 0;
  min-width: min(250px, calc(100% - 2 * var(--pad-card)));
  max-width: min(310px, calc(100% - 2 * var(--pad-card)));
}
@layer typography-trial.original-important {
  html[data-design='doudapp'] :is(#editor-delete-popover, #recipe-editor-delete-popover).confirm-menu .confirm-actions button {
    font-weight: 500 !important;
  }
}
@media (max-width: 700px) {
  html[data-design='doudapp'] :is(#editor-delete-popover, #recipe-editor-delete-popover).confirm-menu button {
    min-height: var(--control-height-touch);
  }
}

/* ---------- Téléphone : la fenêtre devient une feuille qui monte du bas ---------- */
@media (max-width: 700px) {
  /* Budget et coque ; pas encore Suivi voitures (repéré par .fuel-workspace), qui les recevra lors de sa migration. */
  html[data-design='doudapp']:not(:has(.fuel-workspace)) {
    --control-height: var(--control-height-touch);
    --check-hit: var(--control-height-touch);
    --title-size: 20px;
    --title-height: 52px;
    /* Les écrans téléphone ont leurs propres cartes : on garde les hauteurs de tableau d'origine. */
    --row-height: 28px;
    --head-height: 24px;
    --bar-height: 30px;
  }
  html[data-design='doudapp'] #editor-dialog {
    position: fixed;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 36px) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }
  html[data-design='doudapp'] #editor-dialog .dialog-heading { position: relative; padding: 28px 16px 10px !important; }
  html[data-design='doudapp'] #editor-dialog .dialog-heading::before {
    content: '';
    position: absolute;
    top: var(--sheet-grab-top);
    left: 50%;
    width: var(--sheet-grab-width);
    height: var(--sheet-grab-height);
    transform: translateX(-50%);
    border-radius: var(--sheet-grab-radius);
    background: var(--border);
  }
  html[data-design='doudapp'] #editor-dialog #editor-close { display: none !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) { padding-bottom: 20px !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .segmented > button { min-height: 40px; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [data-kind-field] .segmented > button { min-height: 48px; flex-direction: column; gap: 2px; font-size: 12px; }
  html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) :is(.cat-chip, .chip-check) { height: 38px; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) #add-allocation { align-self: stretch; justify-content: center; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions { padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions > button { flex: 1 1 0; height: 48px; font-size: 14px; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions > #editor-delete { flex: 0 0 auto; margin-right: 0; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions > #save-and-new { flex-basis: auto; order: 2; height: 48px; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions > #editor-cancel { display: none !important; }
}

/* Choix multiples en pastilles (catégories liées à une enveloppe, comptes d'un livret, mois d'une prévision). */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) fieldset:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) fieldset > legend { margin-bottom: 6px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .auto-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .taken-legend { flex-basis: 100%; display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font: 400 12px var(--font); color: var(--muted); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .taken-legend .icon { font-size: 15px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .auto-categories-note,
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-help { margin: 0; font: 400 12px/1.4 var(--font); color: var(--muted); }

/* =====================================================================
   Écrans Budget (grand écran) : les éléments existants prennent le rendu des composants.
   Une seule définition par composant ; les sélecteurs listent les éléments qui l'utilisent.
   ===================================================================== */
@media (min-width: 701px) {
  /* --- Bloc (Panel) : groupes de réglages (Catégories, Comptes). --- */
  html[data-design='doudapp'] #config-body .account-group {
    margin: 0 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
  }
  html[data-design='doudapp'] #config-body .account-group-heading {
    height: auto;
    min-height: var(--panel-head-height);
    display: flex;
    align-items: center;
    gap: var(--gap-s, 6px);
    padding: 0 var(--pad-card);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--paper);
  }
  html[data-design='doudapp'] #config-body .account-group-heading h3 {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: 600 16px/1.2 var(--font);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
  }
  html[data-design='doudapp'] #config-body .account-group-heading > .btn { margin-left: auto; }

  /* --- Groupe repliable (Collapsible) : groupes du Prévisionnel. --- */
  html[data-design='doudapp'] body .forecast-group-heading {
    width: 100%;
    height: auto;
    min-height: var(--bar-height);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--pad-cell);
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--hover-control);
    color: var(--text);
    font: 600 14px var(--font);
  }
  @media (hover: hover) {
html[data-design='doudapp'] .forecast-group-heading:hover { background: var(--pressed); }
}
  html[data-design='doudapp'] .forecast-group-heading h4 { margin: 0; font: 600 14px var(--font); }
  html[data-design='doudapp'] .forecast-group-heading .forecast-group-count { font-weight: 400; color: var(--muted); background: transparent; }
  html[data-design='doudapp'] .forecast-group-heading .forecast-group-sum { margin-left: auto; }

  /* --- Tableau (DataTable) : marges de cellule identiques partout. --- */
  html[data-design='doudapp'] :is(.forecast-table, .accounts-table) :is(th, td) {
    padding-left: var(--pad-cell);
    padding-right: var(--pad-cell);
  }
  html[data-design='doudapp'] :is(.forecast-table, .accounts-table) th {
    font: 500 12px var(--font);
    color: var(--text-secondary);
    background: var(--hover-control);
  }
  html[data-design='doudapp'] :is(.forecast-table, .accounts-table) :is(th, td) {
    border-right: 1px solid var(--border);
  }
  html[data-design='doudapp'] :is(.forecast-table, .accounts-table) :is(th, td):last-child { border-right: 0; }
  html[data-design='doudapp'] .accounts-table td { height: var(--row-height-roomy) !important; }
  html[data-design='doudapp'] .months-table tr.is-current > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
  html[data-design='doudapp'] .months-page .forecast-table-scroll {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
  }
  /* Bouton de ligne (row-action) : icône seule, sans cadre, toute la cellule. */
  html[data-design='doudapp'] :is(.months-go, .action-cell, .account-table-action) .row-action {
    width: 100%;
    min-width: 36px;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary);
  }
  @media (hover: hover) {
html[data-design='doudapp'] :is(.months-go, .action-cell, .account-table-action) .row-action:hover { background: var(--hover-button) !important; }
}
  html[data-design='doudapp'] :is(.months-go, .action-cell, .account-table-action) { padding: 0 !important; width: 1%; }

  /* --- Champ (Field) : filtres et recherches des écrans. --- */
  html[data-design='doudapp'] :is(#months-account, #account-filter, #category-search),
  html[data-design='doudapp'] .operations-toolbar .search {
    height: var(--control-height-sm);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-s);
    background-color: var(--field) !important;
    font: 400 13px var(--font);
  }
  html[data-design='doudapp'] #months-account { height: var(--control-height); padding: 0 var(--pad-control); }
  html[data-design='doudapp'] .category-search {
    height: var(--control-height);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    background: var(--field);
  }
  html[data-design='doudapp'] .category-search #category-search { height: auto; border: 0 !important; background: transparent !important; }
  html[data-design='doudapp'] .operations-toolbar .search { display: flex; align-items: center; gap: 4px; padding: 0 8px; align-self: center; margin: 0 6px 0 auto; }
  html[data-design='doudapp'] .operations-toolbar .search input { height: auto; border: 0; background: transparent; }

  /* --- Onglets (Tabs) : comptes du Prévisionnel. --- */
  html[data-design='doudapp'] .forecast-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }
  html[data-design='doudapp'] .forecast-tabs .forecast-tab {
    height: var(--control-height);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 -1px;
    padding: 0 12px;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary);
    font: 600 13px var(--font);
  }
  @media (hover: hover) {
html[data-design='doudapp'] .forecast-tabs .forecast-tab:hover { color: var(--text); background: var(--hover-control) !important; }
}
  html[data-design='doudapp'] .forecast-tabs .forecast-tab.active { color: var(--text); border-bottom-color: var(--accent) !important; }
  html[data-design='doudapp'] .forecast-tabs .forecast-tab-count { padding: 1px 7px; border-radius: 999px; background: var(--hover-control); color: var(--text-secondary); font: 600 11px var(--font); }
  html[data-design='doudapp'] .forecast-tabs .forecast-tab.active .forecast-tab-count { background: var(--accent); color: var(--on-accent); }

  /* --- Actions du Prévisionnel : boutons standard alignés. --- */
  html[data-design='doudapp'] .forecast-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  html[data-design='doudapp'] .forecast-actions > .forecast-apply { margin-left: auto; }
  html[data-design='doudapp'] .forecast-actions-all > .forecast-apply { margin-left: 0; }

  /* --- Bouton discret : Stats du mois. --- */
  html[data-design='doudapp'] .stats-toggle {
    height: var(--control-height-sm);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--text-secondary);
    font: 600 13px var(--font);
  }
  @media (hover: hover) {
html[data-design='doudapp'] .stats-toggle:hover { background: var(--hover-control); }
}
}

/* ---------- Fenêtres de saisie : grand écran, on profite de la largeur ---------- */
@media (min-width: 701px) {
  /* Paires de champs côte à côte : date + mois, compte + mois, compte + compte créditeur, début + fin… */
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .edit-grid:not(.editor-main) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-l) 12px;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .editor-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-l) 12px;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .editor-main > * { grid-column: 1 / -1 !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .editor-main > :is(
      .edit-field:has(> input[name='startMonth']),
      .edit-field:has(> input[name='endMonth']),
      .edit-field:has(select[name='extraCurrencyName']),
      .edit-field:has(> input[name='extraCurrencyAmount'])) { grid-column: auto !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .editor-main > .edit-field:has(select[name='extraCurrencyName']) ~ .edit-field:has(> input[name='extraCurrencyAmount'][hidden]),
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .editor-main > .edit-field[hidden] + * { grid-column: auto; }
  /* Les libellés et les sélecteurs occupent des lignes distinctes :
     la flèche reste centrée même si un compte affiche plusieurs lignes. */
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts:not([hidden]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    gap: 6px 10px;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts .transfer-from {
    display: contents;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts .edit-field:not([hidden]) {
    display: grid !important;
    grid-template-rows: subgrid;
    grid-row: 1 / 3;
    margin: 0 !important;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-from > .edit-field {
    grid-column: 1;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts > .edit-field {
    grid-column: 3;
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-accounts .transfer-arrow {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch !important;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    transform: none;
    display: inline-flex;
    align-items: center;
  }
  /* Affectation : une ligne par enveloppe (enveloppe, montant, supplément, ajuster, retirer). */
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row { flex-wrap: nowrap; align-items: center; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > .choice-picker { flex: 2 1 0; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > input { flex: 1 1 0; min-width: 0; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .allocation-row > input[hidden] { display: block !important; visibility: hidden; }
}

/* ---------- Écrans (grand écran) : correctifs ---------- */
@media (min-width: 701px) {
  /* Boutons de ligne et boutons d'ordre : cellules carrées, sans arrondi. */
  html[data-design='doudapp'] :is(.config-row, .accounts-table) :is(.row-action, .category-order button, .account-table-order button) { border-radius: 0 !important; }
  /* Onglets : coins hauts arrondis, onglet choisi sur fond « paper », relié au contenu en dessous. */
  html[data-design='doudapp'] .forecast-tabs { gap: 2px; border-bottom: 0; margin-bottom: -1px; position: relative; z-index: 1; }
  html[data-design='doudapp'] .forecast-tabs .forecast-tab {
    height: 38px;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
  }
  html[data-design='doudapp'] .forecast-tabs .forecast-tab.active {
    border-color: var(--border) !important;
    background: var(--paper) !important;
    color: var(--text);
  }
  /* Contenu du Prévisionnel : une carte « paper » sous les onglets, comme les autres blocs. */
  html[data-design='doudapp'] .forecast-panels { background: transparent !important; border: 0 !important; padding: 0 !important; }
  html[data-design='doudapp'] .forecast-account .forecast-actions { border-bottom: 1px solid var(--border); background: transparent !important; }
  html[data-design='doudapp'] .forecast-account:not([hidden]) {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper) !important;
  }
  html[data-design='doudapp'] .forecast-account .forecast-group { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
}
/* Listes à choix (sélecteur avec recherche) : toute la largeur du champ. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .choice-picker { display: block; width: 100%; min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .transfer-from { min-width: 0; }

/* ---------- Comptes : poignée de glisser-déposer dans le flux, centrée verticalement ---------- */
html[data-design='doudapp'] .accounts-table td:first-child { padding-left: var(--pad-cell) !important; }
html[data-design='doudapp'] .accounts-table .account-table-name { display: flex; align-items: center; gap: 8px; }
html[data-design='doudapp'] .accounts-table td:first-child .grip {
  position: static !important;
  transform: none !important;
  flex: none;
  display: inline-flex !important;
  color: var(--muted);
  cursor: grab;
}

/* ---------- Tableau des opérations (grand écran) : boutons de ligne sur toute la hauteur de la ligne ---------- */
@media (min-width: 701px) {
  html[data-design='doudapp'] #operation-rows tr[data-transaction] > td:has(> button.row-action) {
    position: relative;
    padding: 0 !important;
  }
  html[data-design='doudapp'] #operation-rows tr[data-transaction] > td > button.row-action {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
}

/* ---------- Étiquette neutre (composant Tag) : rôle, carburant, compte lié… ----------
   Un seul rendu : pastille grise, texte 12 px en 600, icône facultative.
   Les étiquettes d'état (.badge-late / -soon / -ok / -none : bordure colorée) restent à part. */
html[data-design='doudapp'] :is(.role-badge, .chip, .account-chip) {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--hover-control);
  color: var(--text);
  font: 600 12px/1.5 var(--font);
  white-space: nowrap;
}
html[data-design='doudapp'] :is(.role-badge, .chip, .account-chip) .icon { font-size: 15px; }
html[data-design='doudapp'] .role-badge.admin { background: color-mix(in srgb, var(--blue) 14%, var(--paper)); }

/* ---------- Opération ajoutée depuis le prévisionnel : encoche discrète en haut à droite du montant ----------
   Pas de fond (le fond reste réservé au pointage) ; bulle d'aide au survol de l'encoche. */
html[data-design='doudapp'] .amount-cell.from-forecast { position: relative; }
html[data-design='doudapp'] .amount-cell .forecast-mark {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: help;
}
html[data-design='doudapp'] .amount-cell .forecast-mark::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: 0.7;
}
@media (hover: hover) {
html[data-design='doudapp'] .amount-cell .forecast-mark:hover::before { opacity: 1; width: 9px; height: 9px; }
}

/* ---------- Erreurs des fenêtres de saisie ----------
   InlineMessage : en haut de la fenêtre, pour une erreur qui ne vient pas d'un champ.
   FieldError : sous le champ concerné (bordure rouge + message).
   Enregistrer bloqué : grisé, la bulle d'aide dit ce qui manque. */
html[data-design='doudapp'] :is(#editor-error, .inline-message):empty { display: none; }
html[data-design='doudapp'] :is(#editor-error, .inline-message) {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 16px 0; padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); border-radius: var(--radius-s);
  background: var(--danger-bg); color: var(--red); font: 600 13px/1.4 var(--font);
}
html[data-design='doudapp'] :is(#editor-error, .inline-message)::before {
  content: 'error'; font-family: Material; font-weight: 400; font-size: 18px; line-height: 1; font-feature-settings: 'liga';
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .has-error :is(input:not([type=hidden]), select, .choice-trigger, .month-field-btn) {
  border-color: var(--red) !important;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .has-error .amount-row { border-color: var(--red) !important; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-error {
  display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--red); font: 600 12px/1.3 var(--font);
  flex-basis: 100%;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .amount-field .field-error { justify-content: center; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-error .icon { font-size: 15px; }
html[data-design='doudapp'] :is(#editor-form, .page-editor-actions) .save-button.is-blocked { opacity: 0.5; cursor: not-allowed; }

/* Suggestion sous un champ (composant FieldHint) : info + petit bouton, rien n'est changé sans clic. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-hint {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px;
  color: var(--text-secondary); font: 400 12px/1.3 var(--font);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-hint > .icon { font-size: 15px; color: var(--olive); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .field-hint .btn { margin-left: auto; }
/* Bulle d'aide sur plusieurs lignes (liste de ce qui manque). */
html[data-design='doudapp'] #tooltip { white-space: pre-line; }

/* Page Opérations : mois de rattachement sous la date. */
html[data-design='doudapp'] #operation-rows .op-month { display: block; color: var(--muted); font: 400 11px/1.2 var(--font); white-space: nowrap; }

/* ---------- Repère du mois affiché (composant MonthStatus) ----------
   À côté du mois, partout où on le choisit : « En cours » (vert), « Passé » (gris), « Prévision » (olive). */
html[data-design='doudapp'] .month-status {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; flex: none;
  border-radius: var(--radius-pill); font: 600 12px/1 var(--font); white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); /* filet de la couleur du texte, tracé vers l'intérieur : la taille ne change pas */
}
html[data-design='doudapp'] .month-status.is-current { background: var(--success-bg); color: var(--green); }
html[data-design='doudapp'] .month-status.is-past { background: var(--month-past-background); color: var(--month-past-color); }
html[data-design='doudapp'] .month-status.is-future { background: var(--month-future-background); color: var(--month-future-color); }
html[data-design='doudapp'] #editor-fields [data-acc-title]:has([data-operation-period]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
/* Repère du mois dans le bandeau des opérations des comptes et livrets, sur ordinateur. */
html[data-design='doudapp'] .operations-period-label { display: none; }
@media (min-width: 701px) {
  html[data-design='doudapp'] #operations-panel[data-month-period='past'] { --operations-period-background: var(--month-past-background); --operations-period-color: var(--month-past-color); }
  html[data-design='doudapp'] #operations-panel[data-month-period='future'] { --operations-period-background: var(--month-future-background); --operations-period-color: var(--month-future-color); }
  html[data-design='doudapp'] #operations-panel > .operation-heading {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
    flex: none;
  }
  html[data-design='doudapp'] #operations-panel[data-month-period] > .operation-heading {
    background: var(--operations-period-background);
    color: var(--operations-period-color);
  }
  html[data-design='doudapp'] #operations-panel #operations-title {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 4px 10px;
    padding: 0 0 0 8px;
    color: inherit;
  }
  html[data-design='doudapp'] #operations-panel[data-month-period] .operations-period-label { display: inline; font-weight: 700; }
  html[data-design='doudapp'] #operations-panel > .operation-heading > .new-operation { align-self: stretch; height: 100%; }
}
@layer typography-trial.original-important {
  html[data-design='doudapp'] #operations-title .operations-period-label { font-weight: 800 !important; }
}
/* « Ce mois-ci » de la page (téléphone) : grisé quand on y est déjà, comme dans l'en-tête. */
html[data-design='doudapp'] .month-controls [data-month='current']:disabled { opacity: 0.45; cursor: default; }

/* ---------- Sélecteur de mois (composant MonthPicker) ----------
   Le même partout : en-tête (mois affiché) et fenêtres de saisie (mois de rattachement, début, fin…).
   Année (‹ 2026 ›) puis grille de 12 mois ; mois en cours encadré, mois choisi en marron. Pas de jour. */
html[data-design='doudapp'] .ctx-year { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; }
html[data-design='doudapp'] .ctx-year strong { font: 600 13px var(--font); color: var(--text); }
html[data-design='doudapp'] .ctx-year button {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text); cursor: pointer;
}
html[data-design='doudapp'] .ctx-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html[data-design='doudapp'] .ctx-month {
  height: 32px; border: 1px solid transparent; border-radius: var(--radius-s);
  background: transparent; color: var(--text); font: 400 13px var(--font); cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(.ctx-year button, .ctx-month):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .ctx-month.now { border-color: var(--border); }
html[data-design='doudapp'] .ctx-month.selected { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
html[data-design='doudapp'] .month-pop {
  position: fixed; z-index: 1000; width: var(--month-picker-width); padding: var(--calendar-padding); margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow-menu, 0 8px 28px #0000002e); color: var(--text);
}
html[data-design='doudapp'] .month-pop .mp-clear {
  width: 100%; height: 28px; margin-top: 6px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text-secondary); font: 600 12px var(--font); cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] .month-pop .mp-clear:hover { background: var(--hover-control); }
}
/* Le champ lui-même : même rendu qu'un champ (Field), icône calendrier à droite. */
html[data-design='doudapp'] .month-field-btn {
  width: 100%; height: var(--control-height); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--field);
  color: var(--text); font: 400 13px var(--font); text-align: left; cursor: pointer;
}
html[data-design='doudapp'] .month-field-btn .icon { font-size: 18px; color: var(--muted); }
html[data-design='doudapp'] .month-field-btn .mp-empty { color: var(--muted); }
html[data-design='doudapp'] .month-field-btn:has(.month-field-status) { height: auto; min-height: var(--control-height); padding-block: 6px; }
html[data-design='doudapp'] .month-field-btn .mp-selection { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
html[data-design='doudapp'] .month-field-btn .month-field-status { height: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
@media (hover: hover) {
html[data-design='doudapp'] .month-field-btn:hover { border-color: var(--muted); }
}
html[data-design='doudapp'] .month-field-btn:focus-visible,
html[data-design='doudapp'] .month-field-btn[aria-expanded='true'] { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: -1px; border-color: var(--accent); }

/* =====================================================================
   Coque (profil, applications, administration) : même rendu que les composants.
   La coque charge ui.css en dernier, comme le Budget. Classes d'origine conservées (pas de changement de code).
   ===================================================================== */
/* Champs des formulaires d'administration. */
html[data-design='doudapp'] .admin-app-form :is(input:not([type=checkbox]):not([type=radio]), select) {
  height: var(--control-height); box-sizing: border-box; padding: 0 10px;
  border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); color: var(--text); font: 400 13px var(--font);
}
/* Administration › Applications : chaque application dans un bloc (Panel) ; pied « Valeurs d'origine » discret puis Enregistrer à droite. */
html[data-design='doudapp'] .admin-app-form {
  padding: 0 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper);
}
html[data-design='doudapp'] .admin-app-form .admin-app-preview {
  height: var(--panel-head-height); margin: 0 -12px 4px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); font: 600 16px var(--font); color: var(--text);
}
html[data-design='doudapp'] .admin-app-form .admin-app-preview .icon { font-size: 20px; }
html[data-design='doudapp'] .admin-app-form .forecast-actions > button:not(.forecast-apply) {
  order: 1; margin-left: auto; height: var(--control-height); padding: 0 var(--pad-control);
  border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: var(--text-secondary); font: 600 13px/1 var(--font);
}
@media (hover: hover) {
html[data-design='doudapp'] .admin-app-form .forecast-actions > button:not(.forecast-apply):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .admin-app-form .forecast-actions > .forecast-apply { order: 2; margin-left: 0; }
/* Administration › Utilisateurs : tableau (DataTable) aux hauteurs communes, bouton de ligne pleine hauteur. */
html[data-design='doudapp'] .admin-table th { height: var(--head-height) !important; padding-block: 0 !important; }
html[data-design='doudapp'] .admin-table td { height: var(--row-height) !important; padding-block: 0 !important; }
html[data-design='doudapp'] .admin-table td.action-cell { padding: 0 !important; }
html[data-design='doudapp'] .admin-table .row-action { width: var(--row-height); height: var(--row-height); min-height: 0 !important; border-radius: 0 !important; }

/* Administration sur téléphone : mêmes onglets que sur grand écran, contenu dans une carte « paper ». */
@media (max-width: 700px) {
  html[data-design='doudapp'] .admin-body .forecast-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 0; border: 0; margin-bottom: -1px; position: relative; z-index: 1; background: transparent; }
  html[data-design='doudapp'] .admin-body .forecast-tabs .forecast-tab {
    height: 38px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px;
    border: 1px solid transparent !important; border-bottom: 0 !important; border-radius: var(--radius) var(--radius) 0 0 !important;
    background: transparent !important; color: var(--text-secondary); font: 600 13px var(--font);
  }
  html[data-design='doudapp'] .admin-body .forecast-tabs .forecast-tab.active { border-color: var(--border) !important; background: var(--paper) !important; color: var(--text); }
  html[data-design='doudapp'] .admin-body .forecast-panels { background: transparent !important; border: 0 !important; padding: 0 !important; }
  html[data-design='doudapp'] .admin-body .forecast-account:not([hidden]) {
    display: flex; flex-direction: column; gap: 12px; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper) !important;
  }
}

/* =====================================================================
   Composants hérités de l'ancien shared/components.css (coque, Suivi voitures).
   Fusionnés ici tels quels ; ils seront repris sur les composants v2 lors de la migration
   de la coque et de Suivi voitures. Ne pas en ajouter : utiliser les composants ci-dessus.
   ===================================================================== */
/* Actions à droite d'un titre de panneau : boutons pleine hauteur, séparés par un filet. */
.panel-actions {
  display: flex;
  align-self: stretch;
}
.panel-actions > button:not(.new-operation) {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--paper);
  color: var(--text);
  font-size: 13.2px;
}
@media (hover: hover) {
.panel-actions > button:not(.new-operation):hover {
  background: var(--hover-control);
}
}
.panel-actions > button:not(.new-operation):active {
  background: color-mix(in srgb, var(--hover-control) 80%, var(--text));
}
.panel-actions .icon {
  font-size: 19px;
}
/* Groupe de boutons (choix d'une mesure…) dans un titre de panneau. */
.panel-heading .operations-toolbar {
  margin: 0;
  height: auto;
  align-self: stretch;
  border-bottom: 0;
}
.panel-heading .operations-toolbar button:last-child {
  border-right: 0;
}
.panel-heading .sc-summary {
  margin-left: auto;
}

/* Tableau de données : mêmes en-têtes, filets et hauteurs de lignes que les opérations du Budget,
   mais colonnes à largeur automatique (les largeurs fixes du Budget sont propres à ses colonnes). */
.operations-frame .data-table,
.data-table {
  table-layout: auto;
  min-width: 0;
  width: 100%;
}
.data-table :is(th, td):nth-child(n) {
  width: auto;
  padding: 0 8px;
  text-align: left;
  font-size: 13.2px;
}
.data-table :is(th, td).num:nth-child(n) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table th:nth-child(n) {
  padding: 0;
}
.data-table th:not(:has(.column-sort)):nth-child(n) {
  padding: 0 8px;
}
.data-table th.num .column-sort {
  justify-content: flex-end;
}
.data-table .column-sort {
  cursor: pointer;
  user-select: none;
}
@media (hover: hover) {
.data-table .column-sort:hover {
  color: var(--text);
}
}
.data-table td.note:nth-child(n) {
  white-space: normal;
  min-width: 240px;
  color: var(--muted);
}
.data-table :is(th, td).shrink:nth-child(n) {
  width: 1%;
  white-space: nowrap;
  padding: 0;
}
.data-table tfoot td {
  height: 34px;
  font-weight: 600;
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.data-table small {
  color: var(--muted);
  font-size: 12px;
}
.data-table small.sub {
  display: block;
  white-space: normal;
  max-width: 260px;
}
.data-table td {
  white-space: nowrap;
}
.data-table td.empty:nth-child(n) {
  height: 48px;
  color: var(--muted);
  text-align: center;
  white-space: normal;
}
.row-actions {
  display: flex;
}
.row-actions .row-action {
  width: 38px;
  height: 39px;
}
.table-more {
  padding: 8px;
  text-align: center;
  background: var(--paper);
}
.table-more button,
.cell-button {
  height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text);
  font-size: 12.8px;
  border-radius: var(--radius-s, 0);
}
@media (hover: hover) {
.table-more button:hover,
.cell-button:hover {
  background: var(--hover-control);
}
}
.cell-button .icon {
  font-size: 16px;
}
.badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: var(--radius-s, 0);
}
.badge-late { color: var(--red); }
.badge-soon { color: var(--olive); }
.badge-ok { color: var(--green); }
.badge-none { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* Panneau vide (premier lancement) : titre, texte, actions. */
.panel-empty {
  padding: 22px 18px 24px;
  text-align: center;
}
.panel-empty p {
  margin: 4px auto 14px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13.4px;
  line-height: 1.5;
}
.panel-empty .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.panel-empty .row button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--text);
  font-size: 13.2px;
  border-radius: var(--radius-s, 0);
}
@media (hover: hover) {
.panel-empty .row button:hover { background: var(--hover-control); }
}
.panel-empty .row button.primary {
  background: var(--accent);
  border-color: var(--accent-hover);
  color: #fff;
}
@media (hover: hover) {
.panel-empty .row button.primary:hover { background: var(--accent-pressed); }
}

/* Barre de filtres autonome (au-dessus des indicateurs) : même gabarit que l'en-tête de compte du Budget. */
.account-heading.filter-bar {
  height: 34px;
  align-self: flex-start;
  max-width: 100%;
}
.account-heading.filter-bar .account-filter:last-child {
  border-right: 0;
}

/* Bandeau d'alerte cliquable. */
.alert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 4px solid var(--olive);
  color: var(--text);
  font-size: 13.4px;
  border-radius: var(--radius-s, 0);
}
.alert-strip > .btn { flex: none; }
.alert-strip > span:nth-child(2) { flex: 1; }
.alert-strip .icon { font-size: 19px; color: var(--olive); }
@media (hover: hover) {
.alert-strip:hover { background: var(--hover-control); }
}
.up { color: var(--red); }
.down { color: var(--green); }

/* Les recettes assemblent les composants du Budget sans hériter
   de ses dimensions de colonnes ni de son bouton collé au bord du tableau. */
html[data-design='doudapp'] body[data-app='recipes'] .data-panel > .panel-heading {
  height: auto;
  min-height: var(--panel-head-height);
  flex-wrap: wrap;
  gap: var(--gap-s);
  padding: 0 var(--pad-card);
}
html[data-design='doudapp'] body[data-app='recipes'] .data-panel > .panel-heading h2 {
  min-width: 0;
  padding: 0;
  font: 600 1rem/1.4 var(--font);
  overflow-wrap: anywhere;
}
@layer typography-trial {
  html[data-design='doudapp'] body[data-app='recipes'] .data-panel > .panel-heading h2 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
  }
}
html[data-design='doudapp'] body[data-app='recipes'] .panel-actions {
  align-self: center;
  flex-wrap: wrap;
  gap: var(--gap-s);
  margin-left: auto;
  min-width: 0;
}
html[data-design='doudapp'] body[data-app='recipes'] .data-panel :is(.operations-frame, .table-scroll) {
  background: var(--paper);
}
html[data-design='doudapp'] body[data-app='recipes'] .data-panel .data-table :is(th, td):nth-child(n) {
  padding-inline: var(--pad-cell);
}
html[data-design='doudapp'] body[data-app='recipes'] .data-table td.wrap {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  min-width: 0;
}
html[data-design='doudapp'] body[data-app='recipes'] .data-table td:has(> .row-actions):nth-child(n) {
  padding: 0;
}
html[data-design='doudapp'] body[data-app='recipes'] .data-table .row-actions .row-action {
  width: var(--control-height);
  height: var(--control-height);
  flex: none;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  color: var(--text-secondary);
}
html[data-design='doudapp'] body[data-app='recipes'] .account-heading.filter-bar {
  align-self: stretch;
  height: auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--pad-cell);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
html[data-design='doudapp'] body[data-app='recipes'] .account-filter {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
}
html[data-design='doudapp'] body[data-app='recipes'] .account-filter select {
  height: var(--control-height);
  max-width: 100%;
  padding-inline: var(--gap-s);
}
html[data-design='doudapp'] body[data-app='recipes'] .operations-toolbar {
  height: auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--pad-cell);
}
html[data-design='doudapp'] body[data-app='recipes'] .operations-toolbar .search {
  width: min(100%, 400px);
  min-width: 0;
  max-width: 100%;
  margin: 0 0 0 auto;
  height: var(--control-height);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--field);
}
html[data-design='doudapp'] body[data-app='recipes'] .forecast-tabs {
  flex-wrap: wrap;
  margin-top: 0;
}
html[data-design='doudapp'] body[data-app='recipes'] .forecast-tabs .forecast-tab {
  height: auto;
  min-height: var(--control-height);
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  html[data-design='doudapp'] body[data-app='recipes'] .data-panel > .panel-heading { padding-block: var(--gap-s); }
  html[data-design='doudapp'] body[data-app='recipes'] .btn.sm { height: var(--control-height); }
  html[data-design='doudapp'] body[data-app='recipes'] .account-heading.filter-bar .account-filter { flex: 1 1 100%; }
  html[data-design='doudapp'] body[data-app='recipes'] .account-filter select { flex: 1; width: auto; }
  /* Ingrédient sur une ligne, quantité et unité dessous : aucun tableau plus large que la feuille. */
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table :is(thead, tbody) { display: block; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table thead { display: none; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-height);
    gap: var(--gap-s);
    padding: var(--gap-s);
    border-bottom: 1px solid var(--border);
  }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table td:nth-child(n) { width: auto; min-width: 0; height: auto !important; padding: 0; border: 0; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table td:nth-child(1) { grid-column: 1; grid-row: 2; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table td:nth-child(2) { grid-column: 2; grid-row: 2; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table td:nth-child(3) { grid-column: 1 / 3; grid-row: 1; white-space: normal; overflow-wrap: anywhere; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .ing-table .row-action { height: var(--control-height); }
}

/* Champs : états communs, y compris les recherches et les sélecteurs calendrier.
   Un champ composé porte son cadre sur le conteneur, sans doubler celui de son input. */
html[data-design='doudapp'] body :is(
  :where(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])),
  select, textarea, .choice-trigger, .month-field-btn, .search, .sheet-search, .category-search, .quick-add, .amount-row
):not(:where(.search *, .sheet-search *, .category-search *, .quick-add *, .amount-row *)) {
  background-color: var(--field-surface, var(--field)) !important;
  border-color: var(--field-border) !important;
  color: var(--text);
}
@media (hover: hover) {
html[data-design='doudapp'] body :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn, .search, .sheet-search, .category-search, .quick-add, .amount-row):not(:where(.search *, .sheet-search *, .category-search *, .quick-add *, .amount-row *)):where(:hover:not(:disabled):not([readonly]):not(:has(:disabled))) {
  background-color: var(--field-hover) !important;
  border-color: var(--field-border-hover) !important;
}
}
html[data-design='doudapp'] body :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn):not(:where(.search *, .sheet-search *, .category-search *, .quick-add *, .amount-row *)):focus,
html[data-design='doudapp'] body :is(.search, .sheet-search, .category-search, .quick-add, .amount-row):focus-within,
html[data-design='doudapp'] body :is(.choice-trigger, .month-field-btn)[aria-expanded='true'] {
  outline: 2px solid var(--field-focus) !important;
  outline-offset: -1px;
  border-color: var(--field-focus) !important;
  box-shadow: none !important;
}
html[data-design='doudapp'] body :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn):is(:disabled, [readonly]),
html[data-design='doudapp'] body :is(.search, .sheet-search, .category-search, .quick-add, .amount-row):has(:disabled, [readonly]) {
  background-color: var(--field-disabled) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  cursor: default;
  opacity: 1;
}
html[data-design='doudapp'] body :is(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-design='doudapp'] body :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn)[aria-invalid='true'],
html[data-design='doudapp'] body .has-error :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn, .amount-row) {
  border-color: var(--red) !important;
}
html[data-design='doudapp'] body :is(input:where(:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='range']):not([type='color']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset'])), select, textarea, .choice-trigger, .month-field-btn)[aria-invalid='true']:focus,
html[data-design='doudapp'] body .has-error :is(.amount-row, .search, .sheet-search, .category-search):focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 25%, transparent) !important;
}
/* Le pointage garde la couleur du montant, y compris au survol. */
html[data-design='doudapp'] .amount-row { --field-hover: color-mix(in srgb, var(--field-surface, var(--field)) 65%, var(--hover-control)); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='expense'][aria-checked='true']) .amount-row { --field-surface: var(--danger-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='income'][aria-checked='true']) .amount-row { --field-surface: var(--success-bg); }

html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='deferred'][aria-checked='true']) .amount-row { --field-surface: var(--deferred-bg); }
/* Le fond d'un virement pointé suit son sens, comme le signe du montant. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='out']:has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) .amount-row {
  --field-surface: var(--danger-bg);
  background: var(--danger-bg);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields)[data-transfer-dir='in']:has([data-switch='status'][aria-checked='true']):has([data-seg='opKind'] [data-seg-value='transfer'][aria-checked='true']) .amount-row {
  --field-surface: var(--success-bg);
  background: var(--success-bg);
}

/* IconPicker : grille d'icônes de hauteur fixe, avec les états des pastilles de catégorie. */
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .icon-grid {
  position: static; display: flex; flex-direction: column; gap: var(--gap-s);
  border: 0; background: transparent;
}
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .icon-grid .icon-picker-search { width: 100%; margin: 0; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .icon-grid .icon-picker-options {
  position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--control-height-touch), 1fr));
  gap: var(--gap-s); align-content: start; box-sizing: border-box;
  width: 100%; height: var(--icon-picker-height); max-height: none; padding: var(--gap-s);
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: none; background: var(--paper);
}
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .icon-grid .cat-chip {
  width: 100%; height: var(--control-height-touch); padding: 0; justify-content: center;
}
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), body) .icon-grid .cat-chip .icon { width: auto; font-size: 26px; }

/* Date complète : année, mois puis jours, dans le même calendrier que MonthPicker. */
html[data-design='doudapp'] .date-pop {
  box-sizing: border-box;
  width: min(calc(7 * var(--control-height) + 6 * var(--calendar-gap) + 2 * var(--calendar-padding) + 2px), calc(100vw - 2 * var(--calendar-padding)));
  max-height: calc(100dvh - 2 * var(--calendar-padding));
  overflow-y: auto;
}
html[data-design='doudapp'] .ctx-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--calendar-gap); }
html[data-design='doudapp'] .ctx-days .ctx-month { height: var(--control-height); padding: 0; }
html[data-design='doudapp'] .mp-weekday { text-align: center; color: var(--muted); font: 400 12px var(--font); padding-block: var(--calendar-gap); }
html[data-design='doudapp'] .mp-month-heading {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: var(--control-height); margin-bottom: var(--calendar-gap); padding: 0 var(--calendar-padding);
  border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); color: var(--text); font: 600 13px var(--font); cursor: pointer;
}
/* Calendrier des jours : flèches de mois, mois (ouvre la grille des mois) et année en liste, sur une seule ligne. */
html[data-design='doudapp'] .mp-days-head { gap: var(--calendar-gap); margin-bottom: var(--calendar-gap); padding-bottom: 0; }
html[data-design='doudapp'] .mp-days-head .mp-month-heading {
  flex: 1; width: auto; height: auto; margin-bottom: 0; justify-content: space-between;
  border: 1px solid var(--field-border); background: var(--field);
}
html[data-design='doudapp'] .mp-year-select {
  min-height: var(--control-height); padding: 0 var(--calendar-padding);
  border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); color: var(--text); font: 600 13px var(--font); cursor: pointer;
}
html[data-design='doudapp'] .month-pop :is(button, .ctx-month):focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }
html[data-design='doudapp'] .month-pop button:disabled { opacity: 0.5; cursor: default; background: transparent; }
@media (hover: hover) {
html[data-design='doudapp'] .month-pop .mp-month-heading:hover { border-color: var(--field-border-hover); }
}
@media (max-width: 700px) {
  html[data-design='doudapp'] .month-pop :is(.ctx-year button, .ctx-month, .mp-clear) { min-height: var(--control-height); }
}

/* Material Symbols Rounded : contour au repos, plein pour la sélection. */
html[data-design='doudapp'] :is(
  .nav-item.active, .forecast-tab.active, .kpi-tab.active, .topbar-tab.active,
  .cat-chip.on, .chip-check:has(input:checked), [role='radio'][aria-checked='true'],
  [role='option'][aria-selected='true'], [role='tab'][aria-selected='true'], [aria-current='page'], .m-page-ic
) .icon { --icon-fill: 1; }

/* Profil : composition des composants de fenêtre, champs et avatar existants. */
html[data-design='doudapp'] .profile-page .profile-photo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-s);
}
html[data-design='doudapp'] .profile-page #profile-error { margin-bottom: var(--gap-s); }
html[data-design='doudapp'] .profile-page .field-help { margin: 0; color: var(--muted); }
html[data-design='doudapp'] .profile-page .profile-actions { display: flex; justify-content: flex-end; gap: var(--gap-s); margin-top: var(--gap-s); }
html[data-design='doudapp'] .profile-page .segmented { margin-bottom: var(--gap-s); max-width: 100%; overflow-x: auto; }
html[data-design='doudapp'] .app-card .app-card-actions { flex-wrap: wrap; gap: var(--gap-s); }
html[data-design='doudapp'] .app-order { display: inline-flex; gap: var(--gap-s); }
html[data-design='doudapp'] .app-card .app-order .btn { width: var(--control-height); height: var(--control-height); padding: 0; }

/* Pied de modale mobile : fermeture par glissement, action principale et un complément maximum. */
html[data-design='doudapp'] .dialog-action-menu {
  position: absolute; z-index: 2; left: var(--pad-card); bottom: calc(100% + var(--gap-s));
  width: min(var(--month-picker-width), calc(100vw - 2 * var(--pad-card))); padding: var(--gap-s);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-menu);
}
html[data-design='doudapp'] .dialog-action-menu > button {
  display: flex; align-items: center; gap: var(--gap-s); width: 100%; min-height: var(--control-height-touch);
  padding: 0 var(--pad-control); border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text); text-align: left;
}
@media (hover: hover) {
html[data-design='doudapp'] .dialog-action-menu > button:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .dialog-action-menu > button:focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }
html[data-design='doudapp'] .dialog-action-menu > button.is-danger { color: var(--red); }
html[data-design='doudapp'] .dialog-action-menu > button:disabled { opacity: 0.5; }
html[data-design='doudapp'] .profile-page .profile-photo .user-avatar {
  width: var(--profile-avatar-size); height: var(--profile-avatar-size);
}
html[data-design='doudapp'] .profile-page .profile-photo .user-avatar > .icon { font-size: calc(var(--profile-avatar-size) / 2); }
@media (max-width: 700px) {
  html[data-design='doudapp'] dialog .dialog-actions > [data-dialog-cancel],
  html[data-design='doudapp'] #editor-dialog .dialog-actions > button[data-dialog-overflow] { display: none !important; }
  html[data-design='doudapp'] dialog .dialog-actions > button[data-dialog-overflow] { display: none !important; }
  html[data-design='doudapp'] #editor-dialog .dialog-actions > .dialog-more {
    flex: 0 0 var(--control-height-touch); order: 0; padding: 0;
  }
}

/* Les en-têtes repliables et la recherche sont des contrôles à part entière. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion.is-open { background: var(--selection-background); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion.is-open .accordion-head {
  background: var(--selection-background);
}
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-head:hover { background: var(--hover-button); }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-head:active { background: var(--pressed-button); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-head:focus-visible {
  outline: 2px solid var(--field-focus);
  outline-offset: -3px;
}
@media (hover: hover) {
html[data-design='doudapp'] #operations-panel .operations-toolbar .search:hover {
  background: var(--field-hover) !important;
  border-color: var(--field-border-hover) !important;
}
}
html[data-design='doudapp'] #operations-panel .operations-toolbar .search:focus-within {
  background: var(--field) !important;
  border-color: var(--field-focus) !important;
  box-shadow: none !important;
}
html[data-design='doudapp'] .menu-item[aria-checked='true'] {
  background: var(--selection-background);
  box-shadow: inset 3px 0 var(--selection-border);
  --icon-fill: 1;
}

/* Une opération pointée porte sa couleur de sens dans le résumé. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-badge[data-tone='expense'] { color: var(--red); border-color: var(--red); background: var(--danger-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-badge[data-tone='income'] { color: var(--green); border-color: var(--green); background: var(--success-bg); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .accordion-badge[data-tone='deferred'] { color: var(--olive); border-color: var(--olive); background: var(--deferred-bg); }
.forecast-template-months { display: block; color: var(--muted); font-size: .75rem; margin-top: 4px; white-space: normal; }
@media (max-width: 700px) {
  html[data-design='doudapp'] .forecast-head .forecast-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }
  html[data-design='doudapp'] .forecast-head .forecast-tab { width: auto; min-width: 0; min-height: 44px; padding: 8px 12px; white-space: normal; overflow-wrap: anywhere; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--paper); }
  html[data-design='doudapp'] .forecast-head .forecast-tab.active { color: var(--selection-text); background: var(--selection-background); border-color: var(--selection-border); }
}
.allocation-summary.allocation-overflow { color: var(--red); }

/* Chevron décoratif du select natif, sans modifier son interaction. */
/* Compteur numérique : même champ central dans une fiche et dans un formulaire.
   Reprendre la spécificité des formulaires empêche leur bordure de doubler le cadre. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields, body) .stepper > input[type='number'] {
  flex: 1 1 56px; width: 56px; min-width: 0; height: 100%; margin: 0; padding: 0;
  border: 0; border-inline: 1px solid var(--field-border); border-radius: 0;
  background: transparent; color: var(--text); text-align: center;
  font: 600 16px var(--font); font-variant-numeric: tabular-nums; appearance: textfield;
}
html[data-design='doudapp'] .stepper > input[type='number']::-webkit-inner-spin-button { appearance: none; }
html[data-design='doudapp'] .stepper:focus-within { border-color: var(--field-focus); box-shadow: var(--shadow-focus); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields, body) .stepper > input[type='number']:focus { outline: 0 !important; box-shadow: none !important; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .native-select-control { display: block; position: relative; min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .native-select-control > select { padding-right: 36px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .native-select-control > .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-secondary); pointer-events: none; }

/* Les commandes ne sélectionnent pas leur libellé au clic ou à l'appui prolongé. */
:is(button, input[type='button'], input[type='submit'], input[type='reset'], [role='button'], .btn, .nav-item, .rail-link, .menu-item, .chip-check, summary) {
  -webkit-user-select: none;
  user-select: none;
}

/* Catégories liées à l'enveloppe : icônes seules et nom au survol/focus. */
html[data-design='doudapp'] .envelope-top { align-items: center; flex-wrap: wrap; }
html[data-design='doudapp'] .envelope-heading { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
html[data-design='doudapp'] .envelope-heading > strong { min-width: 0; overflow-wrap: anywhere; }
html[data-design='doudapp'] .envelope-categories { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px; }
html[data-design='doudapp'] .envelope-category { display: inline-flex; flex: 0 0 20px; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-s); color: var(--muted); cursor: help; }
html[data-design='doudapp'] .envelope-category .icon { font-size: 16px; }
html[data-design='doudapp'] .envelope-category:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 1px; }
@media (max-width: 700px) {
  html[data-design='doudapp'] .page-header .month-controls [data-month] { display: none !important; }
  /* Mois, sur toutes les pages : un vrai champ appuyable — icône, mois, repère, puis chevron de sélection à droite. */
  html[data-design='doudapp'] .page-header #month-picker { width: 100%; min-width: 0; height: 40px; justify-content: flex-start; gap: 10px; padding: 0 12px; border: 1px solid var(--field-border) !important; border-radius: var(--radius-s) !important; background: var(--field) !important; }
  html[data-design='doudapp'] .page-header #month-picker > .icon { order: -1; color: var(--accent-text, var(--accent)); }
  html[data-design='doudapp'] .page-header #month-picker::after { content: 'unfold_more'; margin-left: auto; font-family: Material; font-size: 20px; line-height: 1; font-feature-settings: 'liga'; color: var(--muted); }
  html[data-design='doudapp'] .page-header #month-picker:active { background: var(--pressed) !important; }
  html[data-design='doudapp'] #month-picker .month-status { display: inline-flex !important; flex: none; height: 24px; padding: 0 8px; opacity: 1; }
  html[data-design='doudapp'] .m-months button.current { border: 2px solid var(--green); }
  html[data-design='doudapp'] .m-months button.current:not(.selected) { background: var(--success-bg); color: var(--green); }
  html[data-design='doudapp'] .m-months button.selected { background: var(--accent); color: var(--on-accent); }
}

/* Comptes d'un virement : type, nom, puis comptes associés du livret. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .choice-picker[data-choice-kind='account'] .choice-trigger { height: auto !important; min-height: 60px; padding: 8px 10px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .choice-picker[data-choice-kind='account'] .choice-options button { min-height: 60px; padding: 8px 10px; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; white-space: normal !important; text-align: left; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-type,
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-owners { display: block; color: var(--muted); overflow-wrap: anywhere; }
html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-name { display: block; color: var(--text); overflow-wrap: anywhere; }
@layer typography-trial {
  html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) :is(.account-choice-type, .account-choice-owners) { font-size: .75rem !important; font-weight: 500 !important; }
  html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-name { font-size: .875rem !important; font-weight: 600 !important; }
}

html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 3px 10px; min-width: 0; }

html[data-design='doudapp'] :is(:is(#editor-fields, .page-editor-fields), .inline-pick) .account-choice-line > * { min-width: 0; }

html[data-design='doudapp'] .account-choice-balance { align-self: center; margin-left: auto; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

html[data-design='doudapp'] .inline-pick[data-choice-kind='account'] .choice-options button { min-height: 60px; padding: 8px 10px; }

/* Pastille de catégorie d'article : icône sur fond teinté (teinte = jeton --tone-N, clair et sombre). */
html[data-design='doudapp'] .cat-icon {
  --h: 0; display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-s);
  background: hsl(var(--h) 45% 90%); color: hsl(var(--h) 55% 30%);
}
html[data-design='doudapp'] .cat-icon .icon { font-size: 16px; color: inherit; }
html[data-design='doudapp'][data-theme='dark'] .cat-icon { background: hsl(var(--h) 30% 24%); color: hsl(var(--h) 70% 80%); }
html[data-design='doudapp'] .cat-icon.tone-1 { --h: var(--tone-1); }
html[data-design='doudapp'] .cat-icon.tone-2 { --h: var(--tone-2); }
html[data-design='doudapp'] .cat-icon.tone-3 { --h: var(--tone-3); }
html[data-design='doudapp'] .cat-icon.tone-4 { --h: var(--tone-4); }
html[data-design='doudapp'] .cat-icon.tone-5 { --h: var(--tone-5); }
html[data-design='doudapp'] .cat-icon.tone-6 { --h: var(--tone-6); }
html[data-design='doudapp'] .cat-icon.tone-7 { --h: var(--tone-7); }
html[data-design='doudapp'] .cat-icon.tone-8 { --h: var(--tone-8); }
html[data-design='doudapp'] .cat-icon.tone-9 { --h: var(--tone-9); }
html[data-design='doudapp'] .cat-icon.tone-10 { --h: var(--tone-10); }
html[data-design='doudapp'] .cat-icon.tone-11 { --h: var(--tone-11); }
html[data-design='doudapp'] .cat-icon.tone-12 { --h: var(--tone-12); }
html[data-design='doudapp'] .cat-icon.tone-13 { --h: var(--tone-13); }
html[data-design='doudapp'] .cat-icon.tone-14 { --h: var(--tone-14); }
html[data-design='doudapp'] .cat-icon.tone-15 { --h: var(--tone-15); }
html[data-design='doudapp'] .cat-icon.tone-16 { --h: var(--tone-16); }
html[data-design='doudapp'] .cat-icon.tone-17 { --h: var(--tone-17); }
html[data-design='doudapp'] .cat-icon.tone-18 { --h: var(--tone-18); }
html[data-design='doudapp'] .cat-icon.tone-19 { --h: var(--tone-19); }
html[data-design='doudapp'] .cat-icon.tone-20 { --h: var(--tone-20); }

/* En-têtes de groupe du Prévisionnel : suivent le thème (light.css et dark.css fixent une couleur plus spécifique). */
html[data-design='doudapp'] body .forecast-group-heading { background: var(--hover-control); }
@media (hover: hover) {
html[data-design='doudapp'] body .forecast-group-heading:hover { background: var(--pressed); }
}

/* Téléphone : pas de zoom automatique sur un champ ni au double toucher (le viewport bloque aussi le zoom au focus d'iOS). */
html { touch-action: manipulation; }

/* Mode courses (Courses, téléphone) : l'interface se limite à la liste ; le bandeau reprend le nom de la liste, l'avancement et la sortie. */
.shop-bar { display: none; }
@media (max-width: 700px) {
  html[data-design='doudapp'] .shop-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper);
  }
  html[data-design='doudapp'] .shop-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  html[data-design='doudapp'] .shop-bar-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-design='doudapp'] .shop-bar-text small { color: var(--muted); }
  html[data-design='doudapp'] .shop-bar > .progress { flex-basis: 100%; }
  html[data-design='doudapp'] body[data-focus] .m-nav { display: none !important; }
  html[data-design='doudapp'] body[data-focus] .workspace { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  html[data-design='doudapp'] body[data-focus] .sheet-backdrop { bottom: 0; }
  @layer typography-trial {
    html[data-design='doudapp'] .shop-bar-text strong { font-size: 17px !important; font-weight: 600 !important; }
    html[data-design='doudapp'] .shop-bar-text small { font-size: 13px !important; font-weight: 400 !important; }
  }
}

/* Paiement en plusieurs fois (fenêtre d'une nouvelle dépense du Budget) : l'échéancier est une liste de lignes date + montant modifiables. */
html[data-design='doudapp'] .installments { display: grid; gap: 8px; }
html[data-design='doudapp'] .installments[hidden], html[data-design='doudapp'] .installments-body[hidden] { display: none; }
html[data-design='doudapp'] .installments-body { display: grid; gap: 8px; }
html[data-design='doudapp'] .installment-rows { display: grid; gap: 6px; }
html[data-design='doudapp'] .installment-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 104px) 32px; gap: 6px 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
html[data-design='doudapp'] .installment-row:last-child { padding-bottom: 0; border-bottom: 0; }
html[data-design='doudapp'] .installment-row .inst-month { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; color: var(--muted); }
html[data-design='doudapp'] .installment-row .inst-month select { flex: 1; min-width: 0; }
html[data-design='doudapp'] .installment-row .inst-n { color: var(--muted); font-variant-numeric: tabular-nums; }
html[data-design='doudapp'] .installment-row.is-manual .inst-n { color: var(--accent-text, var(--accent)); font-weight: 600; }
html[data-design='doudapp'] .installment-total { margin: 0; color: var(--muted); }
html[data-design='doudapp'] .installment-total.is-off { color: var(--red); font-weight: 600; }
html[data-design='doudapp'] .op-plan { color: var(--accent-text, var(--accent)); }
@layer typography-trial {
  html[data-design='doudapp'] .installment-row .inst-n,
  html[data-design='doudapp'] .installment-total,
  html[data-design='doudapp'] .installment-row .inst-month > span { font-size: 13px !important; }
}
html[data-design='doudapp'] .installment-note { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--hover-surface); }
html[data-design='doudapp'] .installment-note > span:not(.icon) { flex: 1; min-width: 0; }
html[data-design='doudapp'] .installment-note > .icon { color: var(--accent-text, var(--accent)); }
html[data-design='doudapp'] .installment-row.is-locked { opacity: 0.6; }
@layer typography-trial {
  html[data-design='doudapp'] .installment-note > span:not(.icon) { font-size: 14px !important; }
}

/* Catalogue d'articles : mêmes composants pour Recettes et Courses. */
html[data-design='doudapp'] .catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-l);
  padding: var(--pad-card);
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
html[data-design='doudapp'] .catalog-toolbar .search {
  display: flex;
  flex: 1 1 220px;
  min-width: 0;
  width: auto;
  height: var(--control-height);
  margin: 0;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--field);
}
html[data-design='doudapp'] .catalog-toolbar .account-filter { min-width: 0; max-width: 100%; padding: 0; border: 0; gap: var(--gap-s); }
html[data-design='doudapp'] .catalog-toolbar .account-filter select { height: var(--control-height); max-width: 100%; padding-inline: var(--gap-s); }
html[data-design='doudapp'] .catalog-active-filters { border-bottom: 1px solid var(--border); }
html[data-design='doudapp'] .catalog-active-filters .chip { white-space: normal; overflow-wrap: anywhere; }
html[data-design='doudapp'] .catalog-active-filters > [role='status'] { margin-left: auto; color: var(--muted); }
html[data-design='doudapp'] .catalog-table td:nth-child(n) { padding-block: var(--gap-s); }
html[data-design='doudapp'] .catalog-table td:has(> .row-actions):nth-child(n) { padding: 0; }
html[data-design='doudapp'] .catalog-table td.catalog-status:nth-child(n) { padding-inline: var(--pad-cell); }
html[data-design='doudapp'] .catalog-article-name { display: flex; align-items: center; gap: var(--gap-s); }
html[data-design='doudapp'] .catalog-name-link {
  min-width: 0;
  min-height: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 600 .875rem/1.4 var(--font);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] .catalog-name-link:hover { color: var(--accent-text, var(--accent)); text-decoration: underline; }
}
html[data-design='doudapp'] .catalog-name-link:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 2px; }
html[data-design='doudapp'] .catalog-mobile-price { font-variant-numeric: tabular-nums; }
@layer typography-trial {
  html[data-design='doudapp'] .catalog-name-link { font-size: .875rem !important; font-weight: 600 !important; }
}

/* Fiche : titre, onglets et navigation fixes ; seul le contenu de l'étape défile. */
html[data-design='doudapp'] #editor-dialog[data-wide='true']:has(.catalog-editor) { height: min(680px, calc(100dvh - 48px)) !important; }
html[data-design='doudapp'] #editor-dialog:has(.catalog-editor) .dialog-heading h2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields):has(.catalog-editor) { overflow: hidden; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; gap: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor > .forecast-tabs { flex: none; margin-top: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor > .catalog-editor-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--gap-l);
  overflow: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor:has(.forecast-tab:first-child.active) > .catalog-editor-content { border-top-left-radius: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content > * { flex: none; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content > .btn { align-self: flex-start; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content .hint { margin: 0; color: var(--muted); line-height: 1.5; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content .hint:empty { display: none; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content .switch-field { display: flex; }
html[data-design='doudapp'] .catalog-step-nav { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: var(--gap-s); padding-top: var(--gap-m, 8px); }
html[data-design='doudapp'] .catalog-step-nav > .hint { flex: 1; margin: 0; color: var(--muted); }
html[data-design='doudapp'] .catalog-review-table td:nth-child(n) { white-space: normal; overflow-wrap: anywhere; padding: var(--gap-s) var(--pad-cell); }
html[data-design='doudapp'] .catalog-review-table td:first-child { width: 38%; color: var(--muted); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table { table-layout: fixed; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table :is(th, td):nth-child(n) { padding: var(--gap-s); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table :is(th, td):nth-child(1) { width: 28%; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table :is(th, td):nth-child(5) { width: calc(var(--control-height) + 2 * var(--gap-s)); }

@media (max-width: 700px) {
  html[data-design='doudapp'] .catalog-toolbar { gap: var(--gap-m, 8px); }
  html[data-design='doudapp'] .catalog-toolbar .search { flex-basis: 100%; }
  html[data-design='doudapp'] .catalog-toolbar .account-filter { flex: 1 1 130px; align-items: stretch; flex-direction: column; }
  html[data-design='doudapp'] .catalog-toolbar .account-filter select { width: 100%; flex: none; }
  html[data-design='doudapp'] .catalog-table .inline-tags { color: var(--text-secondary); }
  html[data-design='doudapp'] .catalog-table .badge { white-space: nowrap; }
  html[data-design='doudapp'] #editor-dialog[data-wide='true']:has(.catalog-editor) { width: 100% !important; height: calc(100dvh - 36px) !important; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor > .forecast-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-s); margin-bottom: 0; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor > .forecast-tabs .forecast-tab { min-width: 0; min-height: var(--control-height); justify-content: center; padding: var(--gap-s); white-space: normal; overflow-wrap: anywhere; text-align: center; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor > .forecast-tabs .forecast-tab:nth-child(5):last-child { grid-column: span 2; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-editor-content { padding: var(--pad-card); }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table :is(tbody, tr[data-pack]) { display: block; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table thead { display: none; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table tr[data-pack] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-s); padding-block: var(--pad-card); border-bottom: 1px solid var(--border); }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table tr[data-pack] td:nth-child(n) { min-width: 0; width: auto; height: auto !important; padding: 0; border: 0; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table tr[data-pack] td:first-child { grid-column: 1 / -1; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--gap-s); color: var(--muted); font-size: .75rem; }
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .catalog-pack-table td:last-child { align-self: end; justify-self: end; }
}

/* Recettes : les sélecteurs des filtres et des formulaires reprennent le composant Budget. */
html[data-design='doudapp'] [data-kit-picker] { display: block; min-width: 0; max-width: 100%; }
html[data-design='doudapp'] .account-filter > [data-kit-picker] { flex: 1 1 auto; }
html[data-design='doudapp'] [data-kit-picker] .choice-trigger,
html[data-design='doudapp'] [data-kit-picker] .choice-search {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  margin: 0;
  padding: 0 var(--pad-control);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--field);
  color: var(--text);
  font: 500 .875rem var(--font);
  text-align: left;
}
html[data-design='doudapp'] [data-kit-picker] .choice-trigger { gap: 8px; cursor: pointer; }
html[data-design='doudapp'] [data-kit-picker] .choice-trigger > span:not(.icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-design='doudapp'] [data-kit-picker] .choice-trigger > .icon { flex: none; color: var(--text-secondary); }
html[data-design='doudapp'] [data-kit-picker] .choice-menu { inset: auto; margin: 0; box-sizing: border-box; border-radius: var(--radius-s); color: var(--text); }
html[data-design='doudapp'] [data-kit-picker] .choice-search { flex: none; margin-bottom: 4px; }
html[data-design='doudapp'] [data-kit-picker] .choice-options button { padding: 4px 8px; min-height: var(--control-height); border-radius: var(--radius-s); white-space: normal; overflow-wrap: anywhere; }
html[data-design='doudapp'] [data-kit-picker] .choice-options button:focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }
html[data-design='doudapp'] [data-kit-picker] .choice-empty { padding: 8px; color: var(--text-secondary); }
html[data-design='doudapp'] .catalog-type { white-space: normal; overflow-wrap: anywhere; width: 24%; }
@media (max-width: 700px) {
  html[data-design='doudapp'] .catalog-table,
  html[data-design='doudapp'] .catalog-table tbody { display: block; width: 100%; }
  html[data-design='doudapp'] .catalog-table thead { display: none; }
  html[data-design='doudapp'] .catalog-table tr[data-article] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-height);
    gap: var(--gap-s);
    padding: var(--pad-cell);
    border-bottom: 1px solid var(--border);
  }
  html[data-design='doudapp'] .catalog-table tr[data-article] > td:nth-child(n) {
    min-width: 0;
    width: auto;
    height: auto !important; /* Annule la hauteur de cellule imposée par la typographie des tableaux. */
    padding: 0;
    border: 0;
    white-space: normal;
  }
  html[data-design='doudapp'] .catalog-table tr[data-article] > :is(td:first-child, .catalog-type, .catalog-status) { grid-column: 1; }
  html[data-design='doudapp'] .catalog-table tr[data-article] > td:last-child { grid-column: 2; grid-row: 1 / 4; align-self: stretch; }
  html[data-design='doudapp'] .catalog-table tr[data-article] .row-actions,
  html[data-design='doudapp'] .catalog-table tr[data-article] .row-action { height: 100%; min-height: var(--control-height); }
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [data-kit-picker].editable-choice { display: flex; gap: 4px; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [data-kit-picker].editable-choice > input { flex: 1; min-width: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) [data-kit-picker].editable-choice > .choice-trigger { flex: 0 0 var(--control-height); width: var(--control-height); justify-content: center; padding: 0; }

html[data-design='doudapp'] .catalog-type-label { display: flex; align-items: center; gap: var(--gap-s); }
html[data-design='doudapp'] .catalog-type-label > .badge { flex: none; }

/* Confirmation de fermeture : même présentation compacte que les confirmations Budget. */
html[data-design='doudapp'] :is(#editor-discard-dialog, #recipe-editor-discard-dialog) {
  position: fixed !important;
  inset: 0 !important;
  transform: none !important;
  margin: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  height: fit-content !important;
  max-height: calc(100dvh - 32px) !important;
  padding: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--paper) !important;
  color: var(--text);
  box-shadow: var(--shadow-menu);
}
html[data-design='doudapp'] :is(#editor-discard-dialog, #recipe-editor-discard-dialog)::backdrop { background: #0005; }
html[data-design='doudapp'] :is(#editor-discard-dialog, #recipe-editor-discard-dialog) .confirm-actions { padding: 12px; }

/* ----- Écran pleine page : fil d'Ariane, titre, outils, bloc de contenu qui défile (Cuisine ; à reprendre par les autres applications) ----- */
html[data-design='doudapp'] body.page-flow .workspace.is-screen { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
html.shell-navigation-active[data-design='doudapp'] body.page-flow .workspace.is-screen { margin-top: 15px; }
html[data-design='doudapp'] .workspace.is-screen > #page-error:empty { display: none; }
html[data-design='doudapp'] .workspace.is-screen > #page { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
html[data-design='doudapp'] .screen { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-height: 0; max-width: 1056px; margin-inline: auto; }
html[data-design='doudapp'] .screen.screen-wide { max-width: 1400px; }
html[data-design='doudapp'] .breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--text); font-size: 14px; font-weight: 500; line-height: 20px; }
html[data-design='doudapp'] .breadcrumb-sep { color: var(--text); }
html[data-design='doudapp'] .screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
html[data-design='doudapp'] .screen-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-width: 0; }
html[data-design='doudapp'] .screen-title h1 { margin: 0; font: 900 37px/1 'Londrina Solid', sans-serif; }
html[data-design='doudapp'] .screen-sub { color: var(--text); font-size: 14px; font-weight: 400; }
html[data-design='doudapp'] .screen-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-design='doudapp'] .screen .btn { height: 32px; padding-inline: 12px; font-size: 14px; }
html[data-design='doudapp'] .screen-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 15px; }
html[data-design='doudapp'] .screen-tools .search { flex: 0 1 348px; width: auto; min-width: 200px; height: 32px; margin: 0 0 0 auto; border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); }
html[data-design='doudapp'] .screen-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 15px; color: var(--text-secondary); font-size: 14px; }
html[data-design='doudapp'] .screen-block { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; scrollbar-gutter: stable; }
@media (max-width: 700px) {
  html[data-design='doudapp'] body.page-flow .workspace.is-screen { display: block; overflow-y: auto; }
  html[data-design='doudapp'] .screen-block { overflow: visible; }
  html[data-design='doudapp'] .screen-title h1 { font-size: 32px; }
  html[data-design='doudapp'] .screen-tools .search { flex-basis: 100%; margin: 0; }
}
/* Sélecteur de semaine de l'en-tête : calendrier du mois, semaine entière surlignée. */
html[data-design='doudapp'] .ctx-week-menu { width: 280px; padding: 8px; }
html[data-design='doudapp'] .ctx-week-nav { display: inline-flex; gap: 2px; }
html[data-design='doudapp'] .ctx-week-head, html[data-design='doudapp'] .ctx-week-row { display: grid; grid-template-columns: 28px repeat(7, 1fr); align-items: center; }
html[data-design='doudapp'] .ctx-week-head { padding-bottom: 4px; color: var(--muted); font-size: 12px; text-align: center; }
html[data-design='doudapp'] .ctx-weeknum { color: var(--muted); font-size: 12px; text-align: center; border-right: 1px solid var(--border); }
html[data-design='doudapp'] .ctx-week-head .ctx-weeknum { border-right: 0; }
html[data-design='doudapp'] .ctx-week-row { height: 32px; border-radius: var(--radius-s); }
@media (hover: hover) {
html[data-design='doudapp'] .ctx-week-row:hover { background: var(--hover-control); }
}
html[data-design='doudapp'] .ctx-week-row.selected { background: var(--accent); color: var(--on-accent); }
html[data-design='doudapp'] .ctx-week-row.selected .ctx-weeknum { color: inherit; border-right-color: transparent; }
html[data-design='doudapp'] .ctx-day { height: 32px; padding: 0; border: 0; background: transparent; color: inherit; font: 400 13px var(--font); cursor: pointer; }
html[data-design='doudapp'] .ctx-day.is-outside { opacity: 0.4; }
html[data-design='doudapp'] .ctx-week-row.selected .ctx-day { font-weight: 600; }
html[data-design='doudapp'] .ctx-day.is-today { text-decoration: underline; text-underline-offset: 3px; }
html[data-design='doudapp'] .ctx-day.is-selected { background: var(--accent); color: var(--on-accent); font-weight: 600; opacity: 1; }
html[data-design='doudapp'] .ctx-day.is-range-start { border-top-left-radius: var(--radius-s); border-bottom-left-radius: var(--radius-s); }
html[data-design='doudapp'] .ctx-day.is-range-end { border-top-right-radius: var(--radius-s); border-bottom-right-radius: var(--radius-s); }
html[data-design='doudapp'] .ctx-day:focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }
html[data-design='doudapp'] .ctx-week-row.selected .ctx-day.is-outside { opacity: 0.75; }

/* Récurrence : les deux bornes de période restent côte à côte. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recurring-date-range {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .recurring-date-range > .edit-field {
  grid-column: auto !important;
}

/* Une seule ligne flex pour joindre exactement le montant et le pointage. */
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-status {
  --pointing-height: 62px;
  --pointing-width: 62px;
  display: flex;
  justify-content: center;
  min-width: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-status > .amount-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
html[data-design='doudapp'] .operation-amount-status .amount-field > label { width: 100%; text-align: center; }
html[data-design='doudapp'] .operation-amount-control { display: inline-flex; align-items: stretch; gap: 0; max-width: 100%; height: var(--pointing-height); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-status .field-error { margin: 0; }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-status .amount-row {
  box-sizing: border-box;
  height: 100%;
  min-width: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-control:has(.operation-pointing:not([hidden])) .amount-row {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing:not([hidden]) {
  display: flex;
  align-self: stretch;
  flex: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing .switch-text {
  display: none;
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing .switch-btn {
  box-sizing: border-box;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pointing-width);
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
  color: var(--text);
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing .switch-btn::after {
  display: none;
}
@media (hover: hover) {
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing .switch-btn:hover {
  background: var(--hover-control);
}
}
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-pointing .switch-btn .icon {
  font-size: 22px;
}
@media (max-width: 700px) {
  html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields) .operation-amount-status {
    --pointing-width: 44px;
  }
}

/* =====================================================================
   Variante SoftSurfaces — Budget, mobile et ordinateur.
   Les soldes et surfaces restent légers ; boutons et tableaux desktop gardent leurs cadres.
   ===================================================================== */
html[data-design='doudapp'] body.soft-surfaces :is(
  .kpi-card, .envelope-card, .savings-chart, .month-stats
) {
  border-color: transparent !important;
  box-shadow: none;
}
html[data-design='doudapp'] body.soft-surfaces :is(.forecast-overview .stat, .month-stats .stat) {
  border-color: transparent;
}
html[data-design='doudapp'] body.soft-surfaces #editor-fields :is(.accordion, .link-field),
html[data-design='doudapp'] body.soft-surfaces #editor-fields .installments > .switch-field {
  border-color: transparent;
}
html[data-design='doudapp'] body.soft-surfaces #editor-fields .accordion-body {
  border-top-color: transparent;
}
html[data-design='doudapp'] body.soft-surfaces :is(#editor-dialog, .choice-menu, #dropdown-menu) {
  border-color: transparent !important;
}
@media (max-width: 700px) {
  html[data-design='doudapp'] body.soft-surfaces :is(
    .operations-panel, .config-panel, .forecast-account, .forecast-group, .account-group
  ) {
    border-color: transparent !important;
    box-shadow: none;
  }
  html[data-design='doudapp'] body.soft-surfaces :is(
    .account-group-heading, .forecast-group-heading, .operation-heading
  ) {
    border-color: transparent;
  }
}
/* Ligne avec image commune, utilisée par les recettes. */
html[data-design='doudapp'] .media-list-item { display: flex; align-items: center; gap: var(--gap-m); width: 100%; flex: 1; min-width: 0; min-height: var(--media-item-height, 64px); box-sizing: border-box; padding: var(--media-item-padding, var(--gap-s) var(--pad-card)); border: 0; border-radius: var(--media-item-radius, 0); background: var(--media-item-background, transparent); color: var(--text); text-align: left; cursor: pointer; }
html[data-design='doudapp'] .media-list-photo { position: relative; flex: none; align-self: center; width: var(--media-image-size, 56px); height: var(--media-image-size, 56px); }
html[data-design='doudapp'] .media-list-photo .thumb { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html[data-design='doudapp'] .media-list-body { display: grid; flex: 1; min-width: 0; gap: 2px; }
html[data-design='doudapp'] .media-list-body > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font: 600 14px/1.3 var(--font); }
html[data-design='doudapp'] .media-list-body > small { color: var(--text-secondary); font: 500 12px/1.3 var(--font); }
html[data-design='doudapp'] .media-list-item > .icon:last-child { flex: none; font-size: 20px; color: var(--muted); }
@media (hover: hover) { html[data-design='doudapp'] .media-list-item:hover { background: var(--hover-control); } }
html[data-design='doudapp'] .media-list-item:active { background: var(--pressed-button); }
html[data-design='doudapp'] .media-list-item:focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }

/* Bibliothèque : titre et liste identiques pour les recettes et les magasins. */
html[data-design='doudapp'] .library-title { margin: 0; padding: calc(var(--pad-card) + var(--gap-m)) var(--gap-m) var(--gap-s); }
html[data-design='doudapp'] .library { padding: var(--gap-s) var(--gap-m) 0; }
html[data-design='doudapp'] .library > .screen-sub { margin: 0 0 var(--gap-m); }
html[data-design='doudapp'] .library-list { display: grid; border-radius: var(--radius); background: var(--paper); overflow: hidden; }
html[data-design='doudapp'] .recipe-list-row { display: flex; align-items: center; min-width: 0; border-top: 1px solid var(--border); }
html[data-design='doudapp'] .recipe-list-row:first-child { border-top: 0; }
@media (max-width: 700px) {
  html[data-design='doudapp'] body.page-flow:has(.library-screen) .workspace { margin-top: 0; padding-top: 0; padding-inline: 0; padding-bottom: calc(var(--m-nav-h, 86px) + 24px + env(safe-area-inset-bottom)); }
  html[data-design='doudapp'] .library-screen { max-width: none; margin: 0; }
}
@layer typography-trial.original-important {
  @media (max-width: 700px) {
    html[data-design='doudapp'] .library-screen .screen-title h1:not(.icon) { font-size: 32px !important; font-weight: 900 !important; font-family: 'Londrina Solid', sans-serif !important; }
  }
}

/* Éditeur en page et photo : composants communs aux recettes et aux magasins. */
html[data-design='doudapp'] body .fixed-zone {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  gap: var(--gap-m);
  padding: var(--pad-card) var(--gap-m) var(--gap-s);
  background: color-mix(in srgb, var(--app-background) 72%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-design='doudapp'] .recipe-head { display: flex; align-items: center; gap: var(--gap-m); }
html[data-design='doudapp'] .recipe-head > div { display: grid; min-width: 0; gap: 2px; }
html[data-design='doudapp'] .recipe-head h1 { margin: 0; font: 600 18px/1.2 var(--font); overflow-wrap: anywhere; }
html[data-design='doudapp'] .recipe-head .btn { flex: none; height: var(--control-height); }
html[data-design='doudapp'] .editor-screen { display: grid; gap: var(--gap-m); }
html[data-design='doudapp'] .recipe-editor-actions .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-s); margin: 0; padding: 0; border: 0; background: transparent; }
html[data-design='doudapp'] .recipe-editor-actions .dialog-actions > button { height: var(--control-height); justify-content: center; }
html[data-design='doudapp'] .recipe-editor-actions .recipe-delete-anchor { display: none; }
html[data-design='doudapp'] .recipe-inline-editor { padding-inline: var(--gap-m); }
html[data-design='doudapp'] .recipe-inline-editor :is(#editor-fields, .page-editor-fields) { display: block !important; overflow: visible; padding: 0 !important; background: transparent; }
html[data-design='doudapp'] .recipe-editor { display: grid; gap: var(--gap-m); }
html[data-design='doudapp'] .editor-screen .photo-box .photo-drop-hint { padding: 8px 12px; text-align: center; }
html[data-design='doudapp'] .editor-screen .photo-box:has(> img) .photo-drop-hint { position: relative; margin-top: auto; width: 100%; box-sizing: border-box; background: var(--field); color: var(--text); }
html[data-design='doudapp'] .editor-screen .photo-box.is-photo-drop { border: 2px dashed var(--accent); outline: 2px solid var(--field-focus); outline-offset: 2px; background: var(--hover-control); }
html[data-design='doudapp'] .editor-screen .photo-box:disabled { cursor: wait; }
html[data-design='doudapp'] .editor-step-title { margin: 0; font: 600 18px var(--font); }
html[data-design='doudapp'] .editor-screen > .fixed-zone { gap: var(--gap-s); }
html[data-design='doudapp'] .editor-step { display: grid; gap: var(--gap-m); }
html[data-design='doudapp'] .editor-screen .recipe-eyebrow { margin: 0; color: var(--text-secondary); font-size: 12px; }
@layer typography-trial.original-important {
  @media (max-width: 700px) {
    html[data-design='doudapp'] .recipe-head h1:not(.icon) { font-size: 1.125rem !important; font-weight: 600 !important; }
  }
}

@media (max-width: 700px) {
  html[data-design='doudapp'] body.page-flow:has(.editor-screen) .workspace { margin-top: 0; padding-top: 0; padding-inline: 0; padding-bottom: 0; }
  html[data-design='doudapp'] .editor-screen { max-width: none; margin: 0; }
}

/* Organisation par cartes, lignes de types et pied d’éditeur : composants des recettes réutilisés. */
html[data-design='doudapp'] .drag-handle { flex: none; display: grid; place-items: center; width: 36px; height: 44px; margin-left: -8px; color: var(--muted); font-size: 24px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
html[data-design='doudapp'] .recipe-section { display: grid; gap: var(--gap-m); padding: var(--gap-m); scroll-margin-top: calc(var(--fixed-h, 96px) + var(--gap-m)); }
html[data-design='doudapp'] .library > .recipe-section { padding-inline: 0; }
html[data-design='doudapp'] .recipe-section > h2 { margin: var(--gap-s) 0 0; font: 600 18px var(--font); }
html[data-design='doudapp'] .recipe-section .hero-photo { width: 100%; max-height: 320px; border-radius: var(--radius); object-fit: cover; }
html[data-design='doudapp'] .ingredient-list { display: grid; border-radius: var(--radius); background: var(--paper); overflow: hidden; }
html[data-design='doudapp'] .ingredient-row { display: flex; align-items: center; gap: var(--gap-m); min-height: 44px; padding: var(--gap-s) var(--pad-card); border-top: 1px solid var(--border); }
html[data-design='doudapp'] .ingredient-row:first-child { border-top: 0; }
html[data-design='doudapp'] .ingredient-row > .ingredient-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
html[data-design='doudapp'] .step-card { display: grid; gap: var(--gap-s); padding: var(--pad-card); border-radius: var(--radius); background: var(--paper); }
html[data-design='doudapp'] .step-card > b { font-weight: 600; }
html[data-design='doudapp'] .step-card > div { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
html[data-design='doudapp'] .editor-empty { display: grid; place-content: center; justify-items: center; gap: var(--gap-s); min-height: 240px; padding: var(--pad-card); border: 1px dashed var(--field-border); border-radius: var(--radius); color: var(--text-secondary); text-align: center; }
html[data-design='doudapp'] .editor-empty > b { color: var(--text); }
html[data-design='doudapp'] .editor-empty > p { margin: 0; font-size: 13px; }
html[data-design='doudapp'] .editor-card { display: grid; gap: var(--gap-s); padding: var(--pad-card); border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--field); }
html[data-design='doudapp'] .editor-card.is-dragging { opacity: 0.6; border-color: var(--accent); }
html[data-design='doudapp'] .editor-card-head { display: flex; align-items: center; gap: var(--gap-s); }
html[data-design='doudapp'] .editor-card-head > b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
html[data-design='doudapp'] .editor-card-head .drag-handle { margin-left: 0; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; }
html[data-design='doudapp'] .editor-add { justify-self: start; }
html[data-design='doudapp'] :is(.editor-foot, .screen-foot) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; gap: var(--gap-s); padding: var(--pad-card) var(--gap-l) calc(var(--gap-l) * 2 + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--app-background) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-design='doudapp'] :is(.recipe-editor, .cook-screen) { padding-bottom: calc(var(--control-height) + 56px + var(--gap-l) * 5); }
html[data-design='doudapp'] .editor-foot-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gap-s); }
html[data-design='doudapp'] :is(.editor-foot-nav, .screen-foot) .btn { height: 56px; justify-content: center; }
html[data-design='doudapp'] .cat-chips { display: flex; flex-wrap: wrap; gap: var(--gap-s); }
html[data-design='doudapp'] body[data-page-enter] .workspace > #page:has(.editor-screen, .screen-foot) { animation: none; }

html[data-design='doudapp'] .editor-card .editor-empty { min-height: 96px; }
html[data-design='doudapp'] .ingredient-row .drag-handle { width: 28px; height: 32px; margin-left: 0; padding: 0; border: 0; background: transparent; }
html[data-design='doudapp'] .chip-check .cat-icon { width: 18px; height: 18px; background: transparent; }

/* Fiches : l’en-tête collant rejoint la coque, sans bande de contenu visible au-dessus. */
html[data-design='doudapp'] .recipe-screen > .fixed-zone { padding-top: var(--gap-s); background: var(--app-background); }
@media (max-width: 700px) {
  html[data-design='doudapp'] body.page-flow:has(.recipe-screen) .workspace { margin-top: 0; padding-top: 0; padding-inline: 0; }
}
/* Déplacement commun : aperçu sous le doigt et emplacement de dépôt dans la liste. */
html[data-design='doudapp'] .reorder-source { opacity: .25; outline: 2px dashed var(--accent); outline-offset: -2px; }
html[data-design='doudapp'] .reorder-preview { display: block; min-height: 0 !important; height: auto; max-height: none; border: 0; overflow: visible; position: fixed; z-index: 10000; margin: 0; padding: 0 !important; pointer-events: none; box-sizing: border-box; border-radius: var(--radius); box-shadow: var(--shadow-dialog); background: var(--paper); opacity: .96; will-change: transform; }
html[data-design='doudapp'] .reorder-preview > * { width: 100%; margin: 0; box-sizing: border-box; }

/* Les listes de cartes peuvent se réduire à leurs en-têtes le temps du déplacement. */
html[data-design='doudapp'] .reorder-summary { display: none; }
html[data-design='doudapp'] .reorder-compact > .editor-card { padding-block: var(--gap-s); min-height: 0; height: auto; align-self: start; gap: 0; }
html[data-design='doudapp'] .reorder-compact .editor-card-head > b { flex: none; }
html[data-design='doudapp'] .reorder-compact .reorder-summary { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

html[data-design='doudapp'] .editor-step.reorder-compact { align-content: start; grid-auto-rows: max-content; }

/* Recherche d’articles : même champ et mêmes résultats au-dessus pour recettes et réception. */
html[data-design='doudapp'] .sheet-search { display: flex; align-items: center; gap: var(--gap-s); width: 100%; height: var(--control-height); padding-inline: var(--pad-card); border: 1px solid var(--field-border); border-radius: var(--radius-s); background: var(--field); }
html[data-design='doudapp'] .sheet-search .icon { font-size: 20px; color: var(--muted); }
html[data-design='doudapp'] .sheet-search input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 16px var(--font); }
html[data-design='doudapp'] .sheet-search:focus-within { border-color: var(--field-focus); box-shadow: var(--shadow-focus); }
html[data-design='doudapp'] .ing-search { position: relative; }
html[data-design='doudapp'] .ing-search > .ing-results { position: absolute; bottom: calc(100% + var(--gap-s)); left: 0; right: 0; max-height: 40vh; overflow: auto; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-menu); }
html[data-design='doudapp'] .ing-search > .ing-results:empty { display: none; }
html[data-design='doudapp'] .screen-foot.with-navigation { bottom: calc(var(--m-nav-h, 86px) + env(safe-area-inset-bottom)); padding: var(--gap-s) var(--gap-m); }
html[data-design='doudapp'] .screen-foot.with-navigation:has(.ing-search) { bottom: calc(var(--m-nav-h, 86px) - var(--gap-xs, 4px) + env(safe-area-inset-bottom)); padding-block: var(--gap-xs, 4px); }
html[data-design='doudapp'] .screen-foot.with-navigation .sheet-search { border-radius: var(--radius-pill); }
@media (max-width: 700px) {
  html[data-design='doudapp'] body:has(:is(.screen-foot.with-navigation, .editor-foot) .ing-search input:focus) .m-nav,
  html[data-design='doudapp'] .editor-foot:has(.ing-search input:focus) .editor-foot-nav {
    display: none !important;
  }
  html[data-design='doudapp'] :is(.screen-foot.with-navigation, .editor-foot):has(.ing-search input:focus) {
    bottom: calc(var(--gap-s, 8px) + env(safe-area-inset-bottom));
    padding-bottom: 0;
    --search-shadow-tail: 0px;
  }
}
html[data-design='doudapp'] body:has(> .screen-foot.with-navigation) .library-screen .library { padding-bottom: calc(var(--m-nav-h, 86px) + 80px + env(safe-area-inset-bottom)); }
html[data-design='doudapp'] .library > .editor-empty { min-height: calc(100dvh - 300px); }
html[data-design='doudapp'] .stepper-unit { flex: none; padding-right: var(--gap-m); color: var(--muted); font-size: 13px; }

/* Compteur et formulaires de modale communs aux applications. */
/* Sélecteur de nombre de personnes : − valeur +. */
html[data-design='doudapp'] body .stepper {
  display: inline-flex;
  width: max-content;
  flex: none;
  align-items: stretch;
  height: var(--control-height);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--field);
  overflow: hidden;
}
html[data-design='doudapp'] body .stepper > button {
  display: grid;
  place-items: center;
  width: var(--control-height);
  flex: 0 0 var(--control-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
@media (hover: hover) {
html[data-design='doudapp'] body .stepper > button:where(:not(:disabled)):hover { background: var(--hover-control); }
}
html[data-design='doudapp'] body .stepper > button:where(:not(:disabled)):active { background: var(--pressed-button); }
html[data-design='doudapp'] body .stepper > button:disabled { opacity: 0.5; cursor: default; }
html[data-design='doudapp'] body .stepper > button:focus-visible { outline: 2px solid var(--field-focus); outline-offset: -2px; }
html[data-design='doudapp'] body .stepper > output {
  display: grid;
  place-items: center;
  min-width: 56px;
  border-inline: 1px solid var(--field-border);
  font: 600 16px var(--font);
  font-variant-numeric: tabular-nums;
}

html[data-design='doudapp'] body .sheet-form { display: grid; gap: var(--pad-card); padding-top: var(--gap-m); }
html[data-design='doudapp'] body .sheet-form .plan-entry-persons { width: max-content; max-width: 100%; justify-self: center; }
html[data-design='doudapp'] body .sheet-form .edit-field { display: grid; gap: var(--gap-s); }
html[data-design='doudapp'] body .sheet-form .edit-field > span:first-child { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
html[data-design='doudapp'] body .sheet-form .edit-field .stepper { justify-self: center; }
html[data-design='doudapp'] body .sheet-form .hint { margin: 0; color: var(--text-secondary); font-size: 12px; }
html[data-design='doudapp'] body .sheet-foot { display: flex; gap: var(--gap-m); width: 100%; }
html[data-design='doudapp'] body .sheet-foot .btn { flex: 1; height: 48px; justify-content: center; }
html[data-design='doudapp'] body .sheet-foot .btn.icon-only { flex: none; width: 48px; }

html[data-design='doudapp'] :is(#recipe-editor-fields, body) .sheet-search input { height: auto; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important; }

/* Quantité et unité partagent la cellule centrale du compteur. */
html[data-design='doudapp'] body .stepper > .stepper-value { display: flex; align-items: center; gap: var(--gap-xs, 4px); padding-inline: var(--gap-s); border-inline: 1px solid var(--field-border); }
html[data-design='doudapp'] :is(#editor-fields, .page-editor-fields, body) .stepper-value > input[type='number'] { width: 56px; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0 !important; outline: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; color: var(--text); text-align: center; font: 600 16px var(--font); font-variant-numeric: tabular-nums; appearance: textfield; }
html[data-design='doudapp'] .stepper-value > input::-webkit-inner-spin-button { appearance: none; }
html[data-design='doudapp'] .stepper-value > .stepper-unit { padding: 0; white-space: nowrap; }
html[data-design='doudapp'] body .stepper.stepper-fluid { width: 100%; }
html[data-design='doudapp'] body .stepper.stepper-fluid > .stepper-value { flex: 1; min-width: 0; }
html[data-design='doudapp'] body .stepper.stepper-fluid > .stepper-value > input { flex: 1; width: 100%; min-width: 0; }

/* La recherche reste dans la zone visible, y compris au-dessus du clavier. */
html[data-design='doudapp'] .ing-search > .ing-results { overscroll-behavior: contain; }

/* Le pied de recherche entre comme le contenu, sans animer son ancêtre. */
html[data-design='doudapp'] body[data-page-enter] > .screen-foot.with-navigation { animation: m-page-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-design='doudapp'] .screen-foot.with-navigation .ing-results { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-design='doudapp'] body[data-page-enter] > .screen-foot.with-navigation { animation: none; }
}

/* Titre et description restent visibles pendant le défilement de la page. */
html[data-design='doudapp'] .library-intro { flex: none; margin: 0; padding: var(--gap-s) var(--gap-m) var(--gap-m); }
html[data-design='doudapp'] .screen-foot.with-navigation { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Une recherche basse prolonge le dégradé derrière la navigation. */
@media (max-width: 1100px) {
  html[data-design='doudapp'] .screen-foot.with-navigation { --search-shadow-tail: calc(var(--m-nav-h, 86px) + env(safe-area-inset-bottom)); }
  html[data-design='doudapp'] :is(.screen-foot.with-navigation, .editor-foot):has(.ing-search)::before {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--control-height)) 0 calc(-1 * var(--search-shadow-tail, 0px));
    z-index: -1;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--app-background) 72%, transparent) 50%, color-mix(in srgb, var(--app-background) 90%, transparent));
    pointer-events: none;
  }
}
html[data-design='doudapp'] .article-search-shade { position: fixed; inset: 0; z-index: 14; background: color-mix(in srgb, var(--scrim) 50%, transparent); }
html[data-design='doudapp'] .article-search-shade[hidden] { display: none; }
html[data-design='doudapp'] body:has(.article-search-shade:not([hidden])) :is(.screen-foot.with-navigation, .editor-foot):has(.ing-search)::before {
  display: none;
}
html[data-design='doudapp'] body:has(.article-search-shade:not([hidden])) .editor-foot:has(.ing-search) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-design='doudapp'] body.page-flow .workspace:has(.library-heading) { overflow-y: auto; scrollbar-width: none; }
html[data-design='doudapp'] body.page-flow .workspace:has(.library-heading)::-webkit-scrollbar { display: none; }
html[data-design='doudapp'] body .library-heading.fixed-zone { flex: none; gap: 0; padding: 0; }

/* Listes de courses : même image carrée que les magasins, en légèrement plus grand. */
html[data-design='doudapp'] .shopping-list-item { flex: none; --media-image-size: 64px; --media-item-height: 88px; --media-item-padding: var(--pad-card); --media-item-radius: var(--radius); --media-item-background: var(--paper); }
html[data-design='doudapp'] .shopping-list-item .media-list-body > b { font-size: 16px; }
html[data-design='doudapp'] .shopping-list-item .item-aside { display: inline-flex; align-items: center; gap: var(--gap-xs, 4px); color: var(--text-secondary); font-size: 13px; }
html[data-design='doudapp'] .shopping-list-item .item-aside .icon { font-size: 18px; }
html[data-design='doudapp'] .shopping-list-item[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--field-focus); }
html[data-design='doudapp'] .list-library { display: flex; flex-direction: column; gap: var(--gap-m); min-height: calc(100dvh - 270px); }
html[data-design='doudapp'] .list-library > .item-list { display: grid; gap: var(--gap-s); }
html[data-design='doudapp'] .screen-foot .library-bottom-link { width: 100%; justify-content: space-between; border: 0; border-radius: var(--radius); background: var(--paper); color: var(--text-secondary); }
html[data-design='doudapp'] .store-choice { --media-item-height: 64px; --media-item-padding: var(--gap-m); --media-item-radius: var(--radius-s); --media-item-background: var(--paper); }
html[data-design='doudapp'] .store-choice > .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-s); }
html[data-design='doudapp'] .store-choice > .icon { flex: none; width: 44px; text-align: center; }
html[data-design='doudapp'] .list-estimates { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: var(--gap-s) var(--gap-m); padding: var(--gap-s) var(--gap-m); color: var(--text-secondary); font-size: 12px; }
html[data-design='doudapp'] .list-estimates b { color: var(--text); font-weight: 600; }
/* Bibliothèques adaptatives : composants identiques, espace réparti comme dans Ma cuisine. */
html[data-design='doudapp'] .library-desktop-actions { display: none; }
html.cuisine-compact-navigation[data-design='doudapp'] .app:has(.library-responsive) { grid-template-columns: minmax(0, 1fr) !important; }
html.cuisine-compact-navigation[data-design='doudapp'] .app:has(.library-responsive) > .sidebar { display: none !important; }
@media (min-width: 701px) {
  html[data-design='doudapp'] .workspace:has(.library-responsive) { padding-inline: 24px; }
  html[data-design='doudapp'] .library-responsive {
    max-width: 1320px;
    min-height: calc(100dvh - var(--shell-toolbar-height, 52px) - 32px);
    gap: 16px;
  }
  html[data-design='doudapp'] .library-responsive > .library-heading.fixed-zone { padding: 24px 0 16px; }
  html[data-design='doudapp']:not(.cuisine-compact-navigation) .library-desktop-actions { display: flex; justify-content: flex-end; gap: var(--gap-m); margin-top: var(--gap-m); }
  html[data-design='doudapp'] .library-responsive .library-title { padding: 0; }
  html[data-design='doudapp'] .library-responsive .library-intro { padding-inline: 0; }
  html[data-design='doudapp'] .library-responsive > .library { flex: 1; padding: 0 0 24px; min-height: 0; }
  html[data-design='doudapp'] .library-responsive .list-library > .item-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    align-items: start;
    gap: 16px;
  }
  html[data-design='doudapp'] .library-responsive .library-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-content: start;
    align-items: start;
    gap: 24px;
  }
  html[data-design='doudapp'] .library-responsive .library-columns > .recipe-section { min-width: 0; margin: 0; }
  html[data-design='doudapp'] .library-responsive .library-columns > .editor-empty { grid-column: 1 / -1; }
  html[data-design='doudapp'] .library-responsive :is(.list-estimates, .shopping-progress) { padding-inline: 0; }
  html[data-design='doudapp'] .library-responsive .recipe-head > div { flex: 1; }
  html[data-design='doudapp'] .library-responsive > .screen-foot.with-navigation {
    position: sticky;
    bottom: 0;
    padding: 12px 0;
    margin-top: auto;
  }
  html.cuisine-compact-navigation[data-design='doudapp'] .library-responsive > .screen-foot.with-navigation {
    bottom: calc(var(--m-nav-h, 86px) + env(safe-area-inset-bottom));
  }
  html[data-design='doudapp'] .library-responsive .screen-foot .library-bottom-link { width: auto; min-width: 220px; margin-left: auto; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  html[data-design='doudapp'] .workspace:has(.library-responsive) { padding-inline: 16px; }
}
html[data-design='doudapp'] .ingredient-row .item-main small .icon { font-size: 16px; vertical-align: -3px; }
html[data-design='doudapp'] .sheet-form .item-list:has(> .store-choice) { display: grid; gap: var(--gap-s); }

/* Variante de la ligne commune pendant les courses : interactions sur les contrôles seuls. */
html[data-design='doudapp'] .ingredient-row[data-shopping-row].is-done { background: var(--hover-control); }
html[data-design='doudapp'] .ingredient-row[data-shopping-row].is-done .item-main { color: var(--text-secondary); }
html[data-design='doudapp'] .ingredient-row[data-shopping-row].is-missing { background: var(--danger-bg); box-shadow: inset 3px 0 var(--red); }
html[data-design='doudapp'] .ingredient-row[data-shopping-row].is-missing > .icon,
html[data-design='doudapp'] .ingredient-row[data-shopping-row].is-missing .danger-text { color: var(--red); }
html[data-design='doudapp'] .shopping-progress { display: grid; gap: var(--gap-s); padding: var(--gap-s) var(--gap-m) var(--gap-m); color: var(--text-secondary); font-size: 13px; }
html[data-design='doudapp'] .shopping-screen > .library-heading > .btn { margin: var(--gap-m) var(--gap-m) 0; }

/* Les états vides remplissent la place jusqu’aux commandes basses. */
html[data-design='doudapp'] :is(.library, .editor-step) > .editor-empty { min-height: var(--empty-available-height, 240px); box-sizing: border-box; }
html[data-design='doudapp'] .editor-empty > .editor-add { justify-self: center; }
html[data-design='doudapp'] .shopping-progress > [role='status'] { text-align: right; }
html[data-design='doudapp'] .shopping-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 12px; padding: var(--gap-m); }
html[data-design='doudapp'] .shopping-summary > .recipe-head.library-title { padding: 0; min-width: 0; }
html[data-design='doudapp'] .shopping-summary > .shopping-progress { display: contents; }
html[data-design='doudapp'] .shopping-summary .shopping-progress > [role='status'] { white-space: nowrap; font-size: 13px; color: var(--text-secondary); }
html[data-design='doudapp'] .shopping-summary .progress { grid-column: 1 / -1; }
/* En-tête commun aux modes cuisine et courses. */
html[data-design='doudapp'] .focus-mode-heading { display: grid; gap: var(--gap-m); padding: var(--pad-card) var(--gap-m) var(--gap-s); }
html[data-design='doudapp'] body .focus-mode-heading > .btn.focus-exit { width: 100%; height: var(--control-height); min-height: var(--control-height); justify-content: center; margin: 0; }
html[data-design='doudapp'] .focus-mode-title { margin: 0; }
@media (max-width: 700px) {
  html[data-design='doudapp'] body[data-focus].focus-exit-in-shell .focus-mode-heading > .focus-exit { display: none; }
}
@layer typography-trial.original-important {
  html[data-design='doudapp'] .focus-mode-title { font: 900 32px/1.1 'Londrina Solid', sans-serif !important; }
}

/* L’état vide est déjà dimensionné jusqu’au pied : ne pas ajouter sa réserve une seconde fois. */
html[data-design='doudapp'] .recipe-editor:has(> .editor-step > .editor-empty) { padding-bottom: 0; }
html[data-design='doudapp'] body:has(> .screen-foot.with-navigation) .library-screen .library:has(> .editor-empty) { padding-bottom: 0; }

html[data-design='doudapp'] .sheet-form .edit-field[hidden] { display: none; }

/* Une note conserve son type, avec un discret crayon pour signaler l’article libre. */
html[data-design='doudapp'] .cat-icon-note { position: relative; }
html[data-design='doudapp'] .cat-icon-marker { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid var(--paper); border-radius: 50%; background: var(--text-secondary); color: var(--paper); }
html[data-design='doudapp'] .cat-icon-marker > .icon { font-size: 9px; line-height: 1; }

/* Cases, icône d’erreur et action conservent leurs emplacements pendant les courses. */
html[data-design='doudapp'] .ingredient-row[data-shopping-row] { min-height: calc(var(--control-height) + var(--gap-s) * 2); box-sizing: border-box; }
html[data-design='doudapp'] .shopping-check-slot { flex: none; width: var(--check-hit); min-height: var(--check-hit); display: grid; place-items: center; }
html[data-design='doudapp'] .shopping-check-slot .check[hidden],
html[data-design='doudapp'] [data-shopping-row] [hidden] { display: none !important; }
html[data-design='doudapp'] .shopping-row-action { flex: 0 0 calc(var(--control-height) * 2.5); display: flex; justify-content: flex-end; }
html[data-design='doudapp'] .shopping-row-action .btn { white-space: nowrap; }
html[data-design='doudapp'] .is-missing [data-shopping-error] { color: var(--red); }
html[data-design='doudapp'] [data-kit-picker] .choice-options button:has(.cat-icon),
html[data-design='doudapp'] [data-kit-picker] .choice-trigger > span:has(.cat-icon) { display: flex; align-items: center; gap: var(--gap-s); }

html[data-design='doudapp'] .library-heading .recipe-head:has(.media-list-photo) { --media-image-size: 64px; }

html[data-design='doudapp'] .library-heading .recipe-head > .media-list-photo { margin-left: auto; }

/* Les pages secondaires Budget utilisent le titre d’écran commun. */
html[data-design='doudapp'] #budget-page-title { flex: none; position: sticky; top: 0; z-index: 16; background: color-mix(in srgb, var(--app-background) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-design='doudapp'] #budget-page-title[hidden] { display: none; }
html[data-design='doudapp'] #budget-page-title:not([hidden]) ~ .page-header .page-top { display: none; }

html[data-design='doudapp'] .ing-results > .hint { margin: 0; padding: var(--pad-card); }
html[data-design='doudapp'] body:has(#budget-page-title:not([hidden])) .page-header,
html[data-design='doudapp'] body:has(#budget-page-title:not([hidden])) .operations-toolbar { top: var(--budget-page-title-height, 64px) !important; }

/* Les lignes manipulées au doigt ne sont pas des champs de texte. */
html[data-design='doudapp'] .ingredient-row,
html[data-design='doudapp'] .shopping-list-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html[data-design='doudapp'] .ingredient-row :is(input, textarea, [contenteditable='true']) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

html[data-design='doudapp'] .item-main > .item-comment { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); }

/* Un peu d'air sous le contenu et les actions de toutes les modales. */
html[data-design='doudapp'] body .m-sheet .m-panel,
html[data-design='doudapp'] body :is(#editor-dialog, #action-dialog, #release-dialog, #users-dialog, #import-dialog, dialog[open]) {
  padding-bottom: 8px !important;
}