/* =============================================================================
   Snipr · bibliothèque de composants Prisme
   Ne lit que les tokens (tokens.css). Variantes en --modificateur, états en .is-état
   ou en attributs ARIA (aria-pressed, aria-selected, aria-current, aria-invalid).
   Démonstration : public/design/components.html
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Icônes
   --------------------------------------------------------------------------- */
.icon { width: var(--icon); height: var(--icon); flex: none; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------------------------------------------------------------------------
   Boutons — une seule action pleine (--primary) par zone
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-5);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--weight-bold) var(--text-md)/1 var(--font-ui);
  white-space: nowrap; user-select: none; cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active:not(:disabled):not(.is-loading) { transform: scale(var(--press-scale)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn .icon { width: var(--icon); height: var(--icon); }

.btn--primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); }
.btn--primary:hover { --btn-bg: var(--brand-hover); }
.btn--primary:active { --btn-bg: var(--brand-press); }
.btn--secondary { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-text); }
.btn--secondary:hover { --btn-bd: var(--brand-text); }
.btn--ghost { --btn-bg: transparent; --btn-bd: var(--line-field); }
.btn--ghost:hover { --btn-bg: var(--surface-2); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--text-muted); }
.btn--quiet:hover { --btn-fg: var(--text); --btn-bg: var(--surface-2); }
.btn--attention { --btn-bg: transparent; --btn-fg: var(--alert); --btn-bd: var(--alert); }
.btn--attention:hover { --btn-bg: var(--alert-soft); }
.btn--danger { --btn-bg: var(--loss); --btn-fg: var(--on-loss); }
.btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--loss); --btn-bd: var(--line-field); }
.btn--danger-ghost:hover { --btn-bd: var(--loss); --btn-bg: var(--loss-soft); }

.btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--sm::after { content: ""; position: absolute; inset: calc((var(--control-h-sm) - var(--tap)) / 2) 0; } /* zone tactile 44 px */
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--icon.btn--sm { width: var(--control-h-sm); }
.btn--icon.btn--sm::after { inset: calc((var(--control-h-sm) - var(--tap)) / 2); }
.btn--icon[aria-pressed="true"] { --btn-fg: var(--brand-text); --btn-bd: var(--brand-text); --btn-bg: var(--brand-soft); }

/* États d'une action asynchrone : repos → chargement → succès | erreur */
.btn__label { display: inline-flex; align-items: center; gap: var(--space-2); }
/* le libellé ne glisse qu'en entrant dans un état, jamais à l'affichage d'un bouton au repos */
:is(.is-loading, .is-done, .is-error) > .btn__label { animation: btn-swap var(--dur-std) var(--ease-out) both; }
@keyframes btn-swap { from { opacity: 0; transform: translateY(calc(var(--enter-distance) / 2)); } }
.btn.is-loading { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-text); --btn-bd: transparent; cursor: progress; }
.btn.is-done { --btn-bg: var(--gain); --btn-fg: var(--on-gain); --btn-bd: transparent; }
.btn.is-error { --btn-bg: transparent; --btn-fg: var(--loss); --btn-bd: var(--loss); }
.btn.is-simulated { --btn-bg: var(--info-soft); --btn-fg: var(--info); --btn-bd: transparent; cursor: default; }

.spinner {
  width: var(--icon-sm); height: var(--icon-sm); flex: none; border-radius: var(--radius-full);
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin calc(var(--dur-loop) / 2) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Badges — plein (--solid) pour un verdict, teinté pour un statut
   --------------------------------------------------------------------------- */
.badge {
  --b-bg: var(--neutral-soft);
  --b-fg: var(--neutral);
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--badge-h); padding: 0 var(--space-2);
  border-radius: var(--radius-full); background: var(--b-bg); color: var(--b-fg);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); white-space: nowrap;
}
.badge .icon { width: var(--icon-sm); height: var(--icon-sm); }
.badge--gain { --b-bg: var(--gain-soft); --b-fg: var(--gain); }
.badge--loss { --b-bg: var(--loss-soft); --b-fg: var(--loss); }
.badge--alert { --b-bg: var(--alert-soft); --b-fg: var(--alert); }
.badge--info { --b-bg: var(--info-soft); --b-fg: var(--info); }
.badge--brand { --b-bg: var(--brand-soft); --b-fg: var(--brand-text); }
.badge--solid.badge--gain { --b-bg: var(--gain); --b-fg: var(--on-gain); }
.badge--solid.badge--loss { --b-bg: var(--loss); --b-fg: var(--on-loss); }
.badge--solid.badge--alert { --b-bg: var(--alert); --b-fg: var(--on-alert); }
.badge--solid.badge--info { --b-bg: var(--info); --b-fg: var(--on-info); }
.badge--solid.badge--brand { --b-bg: var(--brand); --b-fg: var(--on-brand); }
.badge--solid.badge--neutral { --b-bg: var(--surface-inverse); --b-fg: var(--text-inverse); }
.badge__dot { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: currentColor; flex: none; }
/* « Analyse… » se lit en texte : pas de pulsation (des centaines de badges battaient ensemble) */
.badge.is-pending { opacity: .85; }
@keyframes breathe { 50% { opacity: .5; } }

/* Compteur rond (onglets, puces) */
.count {
  display: inline-grid; place-items: center; min-width: var(--icon); height: var(--icon); padding: 0 var(--space-1);
  border-radius: var(--radius-full); background: var(--alert); color: var(--on-alert);
  font: var(--weight-heavy) var(--text-xs)/1 var(--font-ui); font-variant-numeric: var(--numeric);
}

.count--gain { background: var(--gain); color: var(--on-gain); }

/* Intérêt d'une annonce en ligne : favoris et vues, avec l'élan du jour (« +2 aujourd'hui ») */
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--badge-h); }
.reach__item {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--badge-h); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); font-variant-numeric: var(--numeric); white-space: nowrap;
}
.reach__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-muted); }
.reach__item--fav .icon { color: var(--brand-text); }
.reach__delta { color: var(--gain); font-weight: var(--weight-bold); font-variant-numeric: var(--numeric); }
.reach__item.is-unknown { color: var(--text-muted); cursor: help; }
button.reach__item::after { content: ""; position: absolute; inset: calc((var(--badge-h) - var(--tap)) / 2) 0; } /* zone tactile 44 px */
.reach__item.is-bump { animation: reach-bump var(--dur-slow) var(--ease-pop); }
.reach__item.is-bump .icon { animation: reach-beat var(--dur-slow) var(--ease-pop); }
@keyframes reach-bump { 40% { background: var(--brand-soft); } }
@keyframes reach-beat { 40% { transform: scale(var(--pop-scale)); } }
.reach.is-loading .reach__item { width: var(--space-12); }
.reach.is-stale .reach__item { color: var(--text-muted); }
.reach.is-stale .reach__item .icon { color: var(--alert); }
.reach__note { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); }
.reach__note .icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.reach.is-alert .reach__note { color: var(--alert); }
.reach.is-error .reach__note { color: var(--loss); }

/* Touche de raccourci clavier (ordinateur uniquement : inutile au pouce) */
.kbd {
  display: inline-grid; place-items: center; min-width: var(--icon); height: var(--icon); padding: 0 var(--space-1);
  border-radius: var(--space-1); border: 1px solid var(--line-field); background: var(--surface); color: var(--text-muted);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); font-variant-numeric: var(--numeric); white-space: nowrap;
}
@media (hover: none), (max-width: 1023px) { .kbd { display: none; } }

/* ---------------------------------------------------------------------------
   Puces de filtre — sélection exclusive ou multiple
   --------------------------------------------------------------------------- */
.chips {
  display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding-block: var(--space-1);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  --chip-tag: transparent;
  position: relative; flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-sm); padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-muted);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-ui); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-std) var(--ease-out), color var(--dur-std) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip::after { content: ""; position: absolute; inset: calc((var(--control-h-sm) - var(--tap)) / 2) 0; }
.chip:hover { color: var(--text); border-color: var(--line-field); }
.chip:active { transform: scale(var(--press-scale)); }
/* puce active : l'accent or, en contour (pas de bloc plein : le choix se lit sans crier) */
.chip[aria-pressed="true"], .chip.is-selected { background: var(--accent-soft); color: var(--accent); border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.chip__dot { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--chip-tag); flex: none; }
.chip__count { font-variant-numeric: var(--numeric); color: var(--text-muted); font-weight: var(--weight-bold); }
.chip[aria-pressed="true"] .chip__count, .chip.is-selected .chip__count { color: var(--accent); }
.chip.is-empty:not([aria-pressed="true"]) { opacity: var(--opacity-disabled); }

/* ---------------------------------------------------------------------------
   Contrôle segmenté (onglets internes : période, filtres de stock)
   --------------------------------------------------------------------------- */
.segmented {
  --seg-x: 0px; --seg-w: 0px;
  position: relative; display: inline-flex; padding: var(--space-1);
  background: var(--surface-2); border-radius: var(--radius-sm); isolation: isolate;
}
.segmented__thumb {
  position: absolute; z-index: -1; top: var(--space-1); bottom: var(--space-1); left: 0;
  width: var(--seg-w); transform: translateX(var(--seg-x));
  background: var(--surface); border-radius: var(--radius-xs); box-shadow: var(--elev-1);
  transition: transform var(--dur-std) var(--ease-out), width var(--dur-std) var(--ease-out);
}
.segmented.is-instant .segmented__thumb { transition: none; }
.segmented button::after { content: ""; position: absolute; inset: calc((var(--control-h-sm) - var(--tap)) / 2) 0; }
.segmented button {
  position: relative; min-height: var(--control-h-sm); padding: 0 var(--space-4); border: 0; background: transparent; border-radius: var(--radius-xs);
  color: var(--text-muted); font: var(--weight-bold) var(--text-sm)/1 var(--font-ui); white-space: nowrap;
  transition: color var(--dur-std) var(--ease-out);
}
.segmented button[aria-selected="true"] { color: var(--text); }
.segmented--block { display: flex; }
.segmented--block button { flex: 1; }

/* ---------------------------------------------------------------------------
   Barre du haut et indicateur en direct
   --------------------------------------------------------------------------- */
.appbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3);
  min-height: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
}
/* Marque : tuile en dégradé violet → rose et S blanc à traînées (symbole #logo du sprite) */
.logo-mark { display: block; flex: none; width: var(--control-h-sm); height: var(--control-h-sm); }
/* Logo : la marque suivie du mot SNIPR (symbole #wordmark, dessin fixe : la largeur suit la hauteur) */
.wordmark { display: block; flex: none; height: var(--wordmark-h); width: calc(var(--wordmark-h) * var(--wordmark-ratio)); overflow: visible; }
.appbar__brand { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); flex: none; border-radius: var(--radius-sm); }
.appbar__title {
  font: var(--weight-heavy) var(--text-lg)/var(--leading-lg) var(--font-display);
  font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.appbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.live { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font: var(--weight-medium) var(--text-xs)/1 var(--font-ui); white-space: nowrap; }
.live__dot { position: relative; width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--text-muted); flex: none; }
.live.is-on .live__dot { background: var(--gain); }
.live.is-on .live__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gain);
  animation: live-ping var(--dur-loop) var(--ease-out) infinite;
}
.live.is-off .live__dot { background: var(--loss); }
.live.is-connecting .live__dot { background: var(--alert); animation: breathe var(--dur-loop) ease-in-out infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---------------------------------------------------------------------------
   Barre d'onglets (navigation principale, au pouce)
   --------------------------------------------------------------------------- */
.tabbar {
  position: fixed; z-index: var(--z-nav);
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-1);
  max-width: var(--toast-max); margin-inline: auto; padding: var(--space-1);
  background: var(--surface-inverse); border-radius: var(--radius-full); box-shadow: var(--elev-2);
}
.tabbar__item {
  position: relative; min-height: calc(var(--tabbar-h) - var(--space-2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border: 0; border-radius: var(--radius-full); background: transparent;
  color: var(--text-inverse-muted); font: var(--weight-bold) var(--text-xs)/1 var(--font-ui);
  transition: background-color var(--dur-std) var(--ease-out), color var(--dur-std) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tabbar__item:hover { color: var(--text-inverse); }
.tabbar__item:active { transform: scale(var(--press-scale)); }
.tabbar__item[aria-current="page"] { background: var(--brand); color: var(--on-brand); }
.tabbar__item .count { position: absolute; top: var(--space-1); left: calc(50% + var(--space-2)); }
/* espace réservé en bas de page pour ne rien cacher derrière la barre */
.has-tabbar { padding-bottom: calc(var(--tabbar-h) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------------------
   Cartes et chiffres
   --------------------------------------------------------------------------- */
/* une carte posée n'a pas d'ombre : le blanc sur le fond suffit (l'ombre est réservée à ce qui flotte) */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4); }
/* carte posée sur une surface blanche (dans une feuille) : un contour remplace le contraste de fond */
.card--flat { border: 1px solid var(--line); }

.amount {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--weight-heavy);
  font-variant-numeric: var(--numeric); letter-spacing: var(--tracking-display); white-space: nowrap;
  font-size: var(--text-lg); line-height: var(--leading-lg);
}
.amount--xl { font-size: var(--text-xl); line-height: var(--leading-xl); }
.amount--2xl { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
.amount--gain { color: var(--gain); }
.amount--loss { color: var(--loss); }
.amount--alert { color: var(--alert); }

/* Indicateur chiffré */
.stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* libellé d'un chiffre : casse de phrase, plus petit et plus clair que le chiffre, jamais en capitales */
.stat__label { font: var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-ui); color: var(--text-muted); }
.stat__sub { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); }
.stat__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
/* chiffre héros : pas de boîte, il est posé sur la page et rien autour ne lui dispute l'attention */
.stat--hero {
  padding: var(--space-6) 0;
}

/* Jauge de vitesse de revente : neutre, ambre quand c'est lent */
.meter { display: block; width: var(--space-6); height: var(--space-1); border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; flex: none; }
.meter::after { content: ""; display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--value, 0)); background: var(--text-muted); border-radius: inherit; }
.meter.is-slow::after { background: var(--alert); }
.speed { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); white-space: nowrap; }

/* Barre de progression (quota, envoi) */
.progress { display: flex; flex-direction: column; gap: var(--space-2); }
.progress__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.progress__head span { color: var(--text-muted); font-variant-numeric: var(--numeric); }
.progress__track { height: var(--space-2); border-radius: var(--radius-full); background: var(--surface-2); overflow: hidden; }
.progress__fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--value, 0)); background: var(--brand); border-radius: inherit; transition: transform var(--dur-std) var(--ease-out); }
.progress.is-full .progress__fill { background: var(--alert); }

/* ---------------------------------------------------------------------------
   Carte d'évaluation d'annonce (composant clé)
   --------------------------------------------------------------------------- */
.eval {
  position: relative; display: grid; grid-template-columns: var(--thumb-lg) minmax(0, 1fr); gap: var(--space-3);
  padding: var(--space-4); background: var(--surface); border-radius: var(--radius-md);
}
.eval__photo {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2) var(--img, none) center / cover no-repeat;
}
.eval__photo img { width: 100%; height: 100%; object-fit: cover; }
.eval__fresh, .eval__auto {
  position: absolute; top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--icon); padding: 0 var(--space-2); border-radius: var(--radius-full);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); font-variant-numeric: var(--numeric);
}
.eval__fresh { left: var(--space-2); background: var(--surface); color: var(--text); }
/* âge de l'annonce, et en grille le verdict à côté ; la place du bouton autobuy reste libre à droite */
.eval__chips { position: absolute; top: var(--space-2); left: var(--space-2); right: calc(var(--space-2) * 2 + var(--icon)); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.eval__chips .eval__fresh { position: static; }
.eval__chips .badge { display: none; } /* cartes : le verdict est dans le corps */
.eval__fresh.is-new { background: var(--surface-inverse); color: var(--text-inverse); }
.eval__auto { right: var(--space-2); padding: 0; width: var(--icon); justify-content: center; background: var(--brand); color: var(--on-brand); }
.eval__auto .icon { width: var(--icon-sm); height: var(--icon-sm); }
.eval__fresh:empty, .eval__price:empty { display: none; }
.eval__price { /* coût total de l'achat, comme une étiquette sur la photo */
  position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center;
  min-height: var(--icon); padding: 0 var(--space-2); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text); font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); font-variant-numeric: var(--numeric);
}
.eval__tag { display: inline-block; width: var(--dot); height: var(--dot); margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--eval-tag, var(--text-muted)); vertical-align: baseline; }
.eval__path { display: flex; align-items: baseline; gap: var(--space-2); }
.eval__path > span:first-child { min-width: 0; }
.eval__favs { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); white-space: nowrap; }
.eval__favs .icon { width: var(--icon-sm); height: var(--icon-sm); }
.eval__why:empty, .eval__mult:empty, .speed:has(> span:empty) { display: none; }
.eval__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.eval__meta { font: var(--weight-regular) var(--text-sm)/var(--leading-sm) var(--font-ui); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval__title { font: var(--weight-medium) var(--text-md)/var(--leading-md) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval__verdict { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.eval__seller { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: var(--numeric); }
.eval__seller.is-alert { color: var(--alert); font-weight: var(--weight-medium); }
.eval__seller:empty { display: none; }
.eval__profit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-top: var(--space-1); }
.eval__profit small { font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); color: var(--text-muted); }
.eval__mult { margin-left: auto; font: var(--weight-bold) var(--text-sm)/1 var(--font-ui); font-variant-numeric: var(--numeric); color: var(--text-muted); white-space: nowrap; }
.eval__path { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); font-variant-numeric: var(--numeric); }
.eval__path b { color: var(--text); font-weight: var(--weight-bold); }
.eval__why { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); }
.eval__why.is-alert { color: var(--alert); font-weight: var(--weight-medium); }
.eval__why.is-ok { color: var(--gain); font-weight: var(--weight-medium); }
.eval__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
.eval__actions .btn--primary, .eval__actions .btn--attention, .eval__actions .btn--quiet, .eval__actions .btn.is-loading, .eval__actions .btn.is-done, .eval__actions .btn.is-error, .eval__actions .btn.is-simulated { flex: 1; }
.eval__msg {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3); border-radius: var(--radius-sm); background: var(--loss-soft); color: var(--loss);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}
.eval__msg a { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text); font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 2px; }

/* Compacte : « À vérifier » et « Passer » — pas d'action pleine */
.eval--compact { grid-template-columns: var(--thumb-md) minmax(0, 1fr) auto; align-items: center; padding: var(--space-3); gap: var(--space-3); }
.eval--compact .eval__actions { grid-column: auto; }
.eval--compact .eval__actions .btn { flex: none; }
.eval--compact .eval__title { font-size: var(--text-sm); line-height: var(--leading-sm); }
.eval--compact .eval__profit { margin-top: 0; }
.eval--compact .eval__meta, .eval--compact .eval__path, .eval--compact .speed, .eval--compact .eval__seller,
.eval--compact .eval__fresh, .eval--compact .eval__auto, .eval--compact .eval__price, .eval--compact .eval__open,
.eval--compact .eval__mult, .eval--pass .eval__verdict { display: none; }
.eval--compact .eval__msg { grid-column: 1 / -1; }
.eval--pass { box-shadow: none; background: transparent; border: 1px solid var(--line); }
.eval--pass .eval__title { color: var(--text-muted); }
.eval--pass .eval__why { font-size: var(--text-xs); line-height: var(--leading-xs); }

/* En cours d'analyse */
.eval.is-pending .eval__profit, .eval.is-pending .eval__path { display: none; }

/* Succès : un halo qui s'éloigne (transform + opacity uniquement) */
.eval::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--gain); opacity: 0;
}
.eval.is-won::after { animation: halo var(--dur-slow) var(--ease-out); }
@keyframes halo { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.04); } }

/* Entrée en cascade (le parent pose --i sur chaque enfant) */
.enter { animation: enter var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes enter { from { opacity: 0; transform: translateY(var(--enter-distance)) scale(.98); } }

/* ---------------------------------------------------------------------------
   Lignes de liste (monitors, achats, stock)
   --------------------------------------------------------------------------- */
.list { display: flex; flex-direction: column; gap: var(--space-2); }
.row {
  --row-tag: transparent;
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--tap); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface);
}
.row--interactive { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.row--interactive:hover { background: var(--surface-2); }
.row.is-selected { background: var(--brand-soft); }
.row.is-muted .row__title { color: var(--text-muted); }
.row__thumb { width: var(--thumb-sm); aspect-ratio: 3 / 4; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-2); }
.row__tag { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); background: var(--row-tag); }
.row__main { display: flex; flex-direction: column; min-width: 0; }
.row__title { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: var(--numeric); }
.row__meta.is-error { color: var(--loss); }
.row__end { display: flex; align-items: center; gap: var(--space-2); }

/* Détail d'un calcul (fenêtre d'achat, vente) */
.lines { display: grid; grid-template-columns: minmax(45%, 1fr) minmax(0, auto); gap: var(--space-2) var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.lines dt { color: var(--text); }
.lines dd { text-align: right; font-weight: var(--weight-bold); font-variant-numeric: var(--numeric); overflow-wrap: anywhere; text-wrap: balance; }
.lines__sep { grid-column: 1 / -1; height: 1px; background: var(--line); }
.lines__total { font-size: var(--text-md); }
/* d'où vient le chiffre : sous sa ligne, sur toute la largeur */
/* taille du texte courant secondaire (lisible sur mobile), en retrait gris : rattachée à sa ligne, détachée de la suivante */
.lines .lines__note { grid-column: 1 / -1; margin: calc(-1 * var(--space-1)) 0 var(--space-2); text-align: left; font-weight: var(--weight-regular); color: var(--text-muted); text-wrap: pretty; }
.lines dd.is-gain { color: var(--gain); }
.lines dd.is-loss { color: var(--loss); }

/* ---------------------------------------------------------------------------
   Champs
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { font: var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-ui); }
.field__label small { color: var(--text-muted); font-weight: var(--weight-regular); }
.field__control { position: relative; display: flex; align-items: center; }
.field__hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); }
.field__error { display: none; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--loss); font-weight: var(--weight-medium); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid .field__hint { display: none; }

.input {
  width: 100%; min-width: 0; min-height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid var(--line-field); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font: var(--weight-regular) var(--text-md)/var(--leading-md) var(--font-ui);
  outline: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea.input { padding-block: var(--space-3); resize: vertical; min-height: calc(var(--control-h) * 3); }
.input::placeholder { color: var(--text-muted); }
.input:hover { border-color: var(--text-muted); }
.input:focus-visible, .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input:disabled { background: var(--surface-2); opacity: var(--opacity-disabled); cursor: not-allowed; }
.input[aria-invalid="true"], .field.is-invalid .input { border-color: var(--loss); box-shadow: 0 0 0 3px var(--loss-soft); }
.input--num { font-variant-numeric: var(--numeric); }
.field__control--prefix .input { padding-left: calc(var(--space-4) + var(--icon) + var(--space-2)); }
.field__control--suffix .input { padding-right: calc(var(--space-4) + var(--icon) + var(--space-2)); }
.field__prefix, .field__suffix { position: absolute; color: var(--text-muted); pointer-events: none; display: grid; place-items: center; width: var(--icon); }
.field__prefix { left: var(--space-4); }
.field__suffix { right: var(--space-4); font-weight: var(--weight-bold); }
select.input { padding-right: calc(var(--space-4) + var(--icon) + var(--space-2)); cursor: pointer; }
.field__control--select::after {
  content: ""; position: absolute; right: var(--space-4); width: var(--icon-sm); height: var(--icon-sm); pointer-events: none;
  background: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Interrupteur */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switch__track {
  position: relative; flex: none; width: var(--switch-w); height: var(--switch-h); border-radius: var(--radius-full);
  background: var(--line-field); transition: background-color var(--dur-std) var(--ease-out);
}
.switch__track::after {
  content: ""; position: absolute; top: var(--space-1); left: var(--space-1);
  width: calc(var(--switch-h) - var(--space-2)); height: calc(var(--switch-h) - var(--space-2));
  border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--elev-1);
  transition: transform var(--dur-std) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: var(--opacity-disabled); }
.switch__text { display: flex; flex-direction: column; font-weight: var(--weight-medium); }
.switch__text small { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); font-weight: var(--weight-regular); }

/* Pastilles de repère (couleur d'un monitor) */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--swatch); transition: transform var(--dur-fast) var(--ease-out); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); transform: scale(1.08); }
.swatch input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; }

/* ---------------------------------------------------------------------------
   Feuille / modale — feuille du bas sur mobile, fenêtre centrée sur bureau
   --------------------------------------------------------------------------- */
.sheet {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0;
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--surface); color: var(--text); box-shadow: var(--elev-3); overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-sheet) var(--ease-out); }
.sheet.is-closing { animation: sheet-out var(--dur-fast) var(--ease-out) forwards; }
.sheet::backdrop { background: var(--scrim); }
.sheet[open]::backdrop { animation: fade-in var(--dur-sheet) var(--ease-out); }
.sheet.is-closing::backdrop { animation: fade-out var(--dur-fast) var(--ease-out) forwards; }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.sheet__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sheet__head { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); }
.sheet__head::before { /* poignée */
  content: ""; position: absolute; top: var(--space-2); left: 50%; width: var(--space-10); height: var(--space-1);
  transform: translateX(-50%); border-radius: var(--radius-full); background: var(--line-field);
}
.sheet__title { flex: 1; margin: 0; font: var(--weight-heavy) var(--text-lg)/var(--leading-lg) var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); }
.sheet__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-5) var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
.sheet__body > * { flex-shrink: 0; } /* le corps défile : ses blocs gardent leur hauteur */
.sheet__foot {
  display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--surface);
}
.sheet__foot .btn { flex: 1; }
/* clavier sorti (iPhone, ui.js) : la feuille se pose au-dessus et tient dans ce qui reste visible */
.has-kb .sheet[open] { margin-bottom: var(--kb); max-height: calc(var(--vvh) * .92); }
.has-kb .sheet__foot { padding-bottom: var(--space-3); } /* le clavier couvre déjà la barre d'accueil */
@media (min-width: 768px) {
  .sheet { max-width: var(--sheet-max); max-height: 86dvh; margin: auto; border-radius: var(--radius-lg); }
  .sheet__head::before { display: none; }
  .sheet__foot { justify-content: flex-end; padding-bottom: var(--space-5); }
  .sheet__foot .btn { flex: none; }
  .sheet--wide { max-width: var(--sheet-max-wide); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(var(--enter-distance)) scale(.97); } }
  @keyframes sheet-out { to { opacity: 0; transform: scale(.97); } }
}

/* ---------------------------------------------------------------------------
   Toasts — au-dessus de la barre d'onglets
   --------------------------------------------------------------------------- */
.toasts {
  position: fixed; z-index: var(--z-toast); left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--space-2);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); pointer-events: none;
}
.toast {
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3); width: 100%; max-width: var(--toast-max);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); min-height: var(--control-h);
  background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-lg); box-shadow: var(--elev-3);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  animation: toast-in var(--dur-slow) var(--ease-out);
}
.toast.is-leaving { animation: toast-out var(--dur-fast) var(--ease-out) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--enter-distance)) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(calc(var(--enter-distance) / 2)); } }
.toast__icon { width: var(--icon); height: var(--icon); flex: none; color: var(--toast-accent, var(--text-inverse)); }
.toast__msg { flex: 1; min-width: 0; }
.toast__msg b { font-weight: var(--weight-bold); }
.toast__action {
  position: relative; flex: none; min-height: var(--control-h-sm); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-inverse) 14%, transparent); color: var(--text-inverse);
  font: var(--weight-bold) var(--text-sm)/1 var(--font-ui);
  display: inline-flex; align-items: center; white-space: nowrap;
}
.toast__action::after { content: ""; position: absolute; inset: calc((var(--control-h-sm) - var(--tap)) / 2) 0; }
.toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: var(--space-1); background: var(--toast-accent, var(--text-inverse)); transform-origin: left; animation: toast-timer var(--toast-life, var(--dur-undo)) linear forwards; opacity: .7; }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast--ok { --toast-accent: var(--brand-on-inverse); }
.toast--gain { --toast-accent: var(--gain-on-inverse); }
.toast--error { --toast-accent: var(--loss-on-inverse); }
.toast--alert { --toast-accent: var(--alert-on-inverse); }
.toast--info { --toast-accent: var(--info-on-inverse); }
.toast__msg b { color: var(--toast-accent); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .toasts { left: auto; right: var(--space-6); bottom: var(--space-6); align-items: flex-end; }
}

/* ---------------------------------------------------------------------------
   Menu « … » (popover natif) : options secondaires d'un écran, flotte au-dessus du contenu
   --------------------------------------------------------------------------- */
.menu {
  width: min(calc(var(--toast-max) - var(--space-12)), calc(100vw - var(--gutter) * 2)); padding: var(--space-3) var(--space-4);
  border: 0; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--elev-3);
  transform-origin: top right;
}
.menu:popover-open { display: flex; flex-direction: column; gap: var(--space-2); animation: menu-in var(--dur-std) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: scale(.96); } }

/* ---------------------------------------------------------------------------
   Bandeaux d'état (hors ligne, quota, simulation)
   --------------------------------------------------------------------------- */
.banner {
  --bn: var(--info); --bn-soft: var(--info-soft);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--bn-soft); color: var(--text); font-size: var(--text-sm); line-height: var(--leading-sm);
}
.banner__icon { width: var(--icon); height: var(--icon); color: var(--bn); flex: none; }
.banner__msg { flex: 1; min-width: 60%; }
.banner__msg b { color: var(--bn); }
.banner--loss { --bn: var(--loss); --bn-soft: var(--loss-soft); }
.banner--alert { --bn: var(--alert); --bn-soft: var(--alert-soft); }
.banner--info { --bn: var(--info); --bn-soft: var(--info-soft); }
.banner.enter { animation-name: banner-in; }
@keyframes banner-in { from { opacity: 0; transform: translateY(calc(var(--enter-distance) * -1)); } }

/* ---------------------------------------------------------------------------
   Frise d'étapes (parcours multi-étapes : republication)
   --------------------------------------------------------------------------- */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); counter-increment: step; text-align: center; font: var(--weight-medium) var(--text-xs)/var(--leading-xs) var(--font-ui); color: var(--text-muted); }
.step::before {
  content: counter(step); position: relative; z-index: 1;
  display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text-muted); font: var(--weight-heavy) var(--text-sm)/1 var(--font-ui);
  transition: background-color var(--dur-std) var(--ease-out), color var(--dur-std) var(--ease-out), transform var(--dur-std) var(--ease-out);
}
.step + .step::after { /* trait vers l'étape précédente */
  content: ""; position: absolute; top: calc(var(--space-4) - 1px); right: 50%; width: 100%; height: 2px; background: var(--line);
}
.step.is-done::before { content: "✓"; background: var(--brand); color: var(--on-brand); }
.step.is-done + .step::after, .step.is-current::after { background: var(--brand); }
.step.is-current { color: var(--text); font-weight: var(--weight-bold); }
.step.is-current::before { background: var(--brand-soft); color: var(--brand-text); box-shadow: 0 0 0 2px var(--brand); transform: scale(1.06); }
.step.is-error::before { content: "!"; background: var(--loss); color: var(--on-loss); }

/* Frise verticale datée (suivi d'un article : acheté → reçu → … → payé) : un point par étape, la date à
   droite, le délai ou l'étape du moment dessous. Franchie : point plein ; en cours : anneau coloré par --tl. */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.timeline__step {
  position: relative; display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr) auto; column-gap: var(--space-3);
  padding-bottom: var(--space-3); font: var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-ui); color: var(--text-muted);
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step::before { /* le point */
  content: ""; width: var(--space-3); height: var(--space-3); margin: calc((var(--leading-sm) - var(--space-3)) / 2) auto 0;
  border-radius: var(--radius-full); box-shadow: inset 0 0 0 2px var(--line); background: var(--surface);
}
.timeline__step:not(:last-child)::after { /* le trait jusqu'à l'étape suivante */
  content: ""; position: absolute; left: calc(var(--space-2) - 1px); top: calc((var(--leading-sm) + var(--space-3)) / 2 + 2px); bottom: calc((var(--space-3) - var(--leading-sm)) / 2 + 2px); width: 2px; background: var(--line);
}
.timeline__label { color: inherit; }
.timeline__note { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); font-weight: var(--weight-regular); }
.timeline__date { font-size: var(--text-xs); line-height: var(--leading-sm); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.timeline__step.is-done { color: var(--text); }
.timeline__step.is-done::before { background: var(--gain); box-shadow: none; }
.timeline__step.is-done:not(:last-child)::after { background: var(--gain); opacity: .45; }
.timeline__step.is-current { --tl: var(--brand); color: var(--text); font-weight: var(--weight-bold); }
.timeline__step.is-current::before { background: var(--surface); box-shadow: inset 0 0 0 3px var(--tl); }
.timeline__step.is-current .timeline__note { color: var(--tl); font-weight: var(--weight-bold); }
.timeline__step.is-alert { --tl: var(--alert); }
.timeline__step.is-loss { --tl: var(--loss); }
.timeline__step.is-info { --tl: var(--info); }

/* ---------------------------------------------------------------------------
   Squelettes de chargement
   --------------------------------------------------------------------------- */
.skeleton { position: relative; overflow: hidden; background: var(--skeleton); border-radius: var(--radius-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: shimmer var(--dur-loop) ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--text { height: var(--space-3); border-radius: var(--radius-full); }
.skeleton--title { height: var(--space-4); border-radius: var(--radius-full); }
.skeleton--amount { height: var(--space-6); border-radius: var(--radius-full); }
.skeleton--btn { height: var(--control-h); border-radius: var(--radius-sm); }
.skeleton--photo { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------------------
   États vides
   --------------------------------------------------------------------------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); }
.empty__icon { width: var(--space-16); height: var(--space-16); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.empty__icon .icon { width: var(--space-8); height: var(--space-8); }
.empty__title { color: var(--text); font: var(--weight-heavy) var(--text-lg)/var(--leading-lg) var(--font-display); font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); text-wrap: balance; }
.empty__text { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-sm); max-width: 36ch; }
.empty .btn { margin-top: var(--space-2); }

/* ---------------------------------------------------------------------------
   Graphiques (dessinés par ui.js : barres groupées, courbe cumulée)
   --------------------------------------------------------------------------- */
.chart { position: relative; touch-action: pan-y; user-select: none; outline: none; }
.chart:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.chart svg { display: block; width: 100%; height: var(--chart-h); overflow: visible; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__zero { stroke: var(--line-field); stroke-width: 1; }
.chart__axis { fill: var(--text-muted); font: var(--weight-medium) var(--text-xs) var(--font-ui); font-variant-numeric: var(--numeric); }
.chart__bar { transform-box: fill-box; transform-origin: bottom; }
.chart__bar--in { fill: var(--chart-in); }
.chart__bar--out { fill: var(--chart-out); }
.chart.is-drawing .chart__bar { animation: bar-grow var(--dur-count) var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger) / 2); }
@keyframes bar-grow { from { transform: scaleY(0); } }
.chart__col { fill: transparent; }
.chart__col.is-active { fill: color-mix(in srgb, var(--text) 6%, transparent); }
.chart.has-active .chart__bar { opacity: .45; transition: opacity var(--dur-fast) var(--ease-out); }
.chart.has-active .chart__bar.is-active { opacity: 1; }
.chart__line { fill: none; stroke: var(--gain); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__line.is-loss { stroke: var(--loss); }
.chart__area { fill: var(--gain-soft); opacity: .8; }
.chart__area.is-loss { fill: var(--loss-soft); }
.chart.is-drawing .chart__line { stroke-dasharray: var(--len) var(--len); animation: line-draw var(--dur-count) var(--ease-out) both; }
.chart.is-drawing .chart__area { animation: fade-in var(--dur-count) var(--ease-out) both; }
@keyframes line-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.chart__cursor { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__dot { fill: var(--surface); stroke: var(--gain); stroke-width: 2.5; }
.chart__dot.is-loss { stroke: var(--loss); }
.chart__tip {
  position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: calc(var(--thumb-lg) * 1.5);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-2); align-items: center;
  padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--elev-3);
  font-size: var(--text-xs); line-height: var(--leading-xs);
  transition: transform var(--dur-fast) var(--ease-out);
}
.chart__tip b { grid-column: 1 / -1; font-size: var(--text-sm); }
.chart__tip i { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); }
.chart__tip em { font-style: normal; text-align: right; font-weight: var(--weight-bold); font-variant-numeric: var(--numeric); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i { width: var(--dot); height: var(--dot); border-radius: var(--radius-full); }
.legend i.is-in, .chart__tip i.is-in { background: var(--chart-in); }
.legend i.is-out, .chart__tip i.is-out { background: var(--chart-out); }
.legend i.is-profit, .chart__tip i.is-profit { background: var(--gain); }

/* ---------------------------------------------------------------------------
   Titres d'écran et de carte
   --------------------------------------------------------------------------- */
.screen-title {
  font: var(--weight-heavy) var(--text-xl)/var(--leading-xl) var(--font-display);
  font-stretch: var(--display-stretch); letter-spacing: var(--tracking-display); text-wrap: balance;
}
.card__title { font: var(--weight-bold) var(--text-md)/var(--leading-md) var(--font-ui); }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }

/* ---------------------------------------------------------------------------
   Tableau de données (chiffres alignés, défilement horizontal si besoin)
   --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: var(--numeric); }
.table th {
  padding: var(--space-2) var(--space-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line);
  font: var(--weight-medium) var(--text-xs)/var(--leading-xs) var(--font-ui); color: var(--text-muted);
}
.table td { padding: var(--space-2) var(--space-3); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table th:first-child, .table td:first-child { text-align: left; padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tr:last-child td { border-bottom: 0; }

/* Tableau de travail dense (ordinateur) : une ligne par élément, ligne cliquable, en-têtes triables.
   Les colonnes .opt disparaissent quand le tableau manque de place (requête de conteneur). */
.dtable-wrap { container-type: inline-size; background: var(--surface); border-radius: var(--radius-lg); }
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: var(--numeric); }
.dtable th {
  position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap;
  background: var(--surface); border-bottom: 1px solid var(--line);
  font: var(--weight-medium) var(--text-xs)/var(--leading-xs) var(--font-ui); color: var(--text-muted);
}
.dtable th:first-child { border-top-left-radius: var(--radius-lg); }
.dtable th:last-child { border-top-right-radius: var(--radius-lg); }
.dtable td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.dtable .r { text-align: right; }
/* colonne principale : prend la place restante et coupe son texte (« … ») plutôt que d'élargir le tableau */
.dtable .dtable__grow { width: 100%; max-width: 0; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable tbody tr.is-gain { background: color-mix(in srgb, var(--gain-soft) 50%, transparent); }
.dtable tbody tr.is-gain td:first-child { box-shadow: inset var(--space-1) 0 0 var(--gain); }
.dtable tbody tr.is-selected { background: var(--brand-soft); }
.dtable tbody tr.is-selected td:first-child { box-shadow: inset var(--space-1) 0 0 var(--brand); }
.dtable tbody tr.is-muted td { color: var(--text-muted); }
.dtable tbody tr.is-alert td:first-child { box-shadow: inset var(--space-1) 0 0 var(--alert); }
/* lignes sans action au clic (les actions sont dans la ligne) */
.dtable--static tbody tr { cursor: default; }
.dtable__sort {
  display: inline-flex; align-items: center; gap: var(--space-1); min-width: var(--space-6); min-height: var(--space-6); padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.dtable__sort:hover, th[aria-sort] .dtable__sort { color: var(--text); }
th[aria-sort="descending"] .dtable__sort::after { content: "↓"; }
th[aria-sort="ascending"] .dtable__sort::after { content: "↑"; }
@container (max-width: 880px) { .dtable .opt { display: none; } }

/* Repli « voir les chiffres » sous un graphique */
.disclosure > summary {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; list-style: none;
  font: var(--weight-bold) var(--text-sm)/1 var(--font-ui); color: var(--brand-text);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "▾"; transition: transform var(--dur-std) var(--ease-out); }
.disclosure[open] > summary::after { transform: rotate(180deg); }

/* Frise d'étapes cliquable : chaque libellé mène à sa section */
.step > button { border: 0; background: none; padding: 0; min-height: var(--tap); color: inherit; font: inherit; cursor: pointer; }
.step > button:hover { color: var(--text); }

/* ---------------------------------------------------------------------------
   Grille de photos (la première est la couverture)
   --------------------------------------------------------------------------- */
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--thumb-lg) - var(--space-4)), 1fr)); gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-sm); border: 1px dashed var(--line-field); background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.photo-grid.is-drag { border-color: var(--brand); background: var(--brand-soft); }
.photo-tile {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--surface); animation: enter var(--dur-std) var(--ease-out) both;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile.is-cover { box-shadow: 0 0 0 2px var(--brand); }
.photo-tile__cover {
  position: absolute; left: var(--space-1); right: var(--space-1); bottom: var(--space-1); padding: var(--space-1) 0; text-align: center;
  border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font: var(--weight-bold) var(--text-xs)/1 var(--font-ui);
}
.photo-tile__sent {
  position: absolute; top: var(--space-1); left: var(--space-1); width: var(--icon); height: var(--icon); border-radius: var(--radius-full);
  display: grid; place-items: center; background: var(--surface); color: var(--brand-text);
}
.photo-tile__sent .icon { width: var(--icon-sm); height: var(--icon-sm); }
.photo-tile__remove {
  position: absolute; top: var(--space-1); right: var(--space-1); width: var(--space-6); height: var(--space-6); border: 0; border-radius: var(--radius-full);
  display: grid; place-items: center; background: var(--surface-inverse); color: var(--text-inverse); cursor: pointer;
}
.photo-tile__remove::after { content: ""; position: absolute; inset: calc((var(--space-6) - var(--tap)) / 2); }
.photo-tile__remove .icon { width: var(--icon-sm); height: var(--icon-sm); }
.photo-add {
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  border-radius: var(--radius-sm); border: 1px dashed var(--line-field); background: var(--surface); color: var(--text-muted);
  font: var(--weight-bold) var(--text-xs)/1 var(--font-ui); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.photo-add:hover, .photo-add:focus-within { color: var(--brand-text); border-color: var(--brand); }
.photo-add:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Cartes de choix (ex. trois prix conseillés) : une seule sélectionnée
   --------------------------------------------------------------------------- */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.option {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0;
  padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  text-align: left; cursor: pointer; color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.option:hover { border-color: var(--line-field); }
.option:active { transform: scale(var(--press-scale)); }
.option[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.option__label { font: var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-ui); color: var(--text-muted); }
.option__value { font: var(--weight-heavy) var(--text-lg)/var(--leading-lg) var(--font-display); font-stretch: var(--display-stretch); font-variant-numeric: var(--numeric); white-space: nowrap; }
.option__sub { font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: var(--numeric); color: var(--text-muted); }
.option__sub.is-gain { color: var(--gain); }
.option__sub.is-loss { color: var(--loss); }
.option.is-recommended::before {
  content: "★"; position: absolute; top: var(--space-2); right: var(--space-2); color: var(--brand-text); font-size: var(--text-xs);
}

/* Réponses à une question (parcours guidé) : un toucher = une réponse ; .choices--grid pour les tailles */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.choices:empty { display: none; }
.choices--grid { grid-template-columns: repeat(auto-fill, minmax(calc(var(--tap) * 1.6), 1fr)); }
.choice {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); min-width: 0; min-height: var(--tap);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  text-align: left; cursor: pointer; color: var(--text); font: var(--weight-bold) var(--text-md)/var(--leading-md) var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.choices--grid .choice { align-items: center; padding-inline: var(--space-2); text-align: center; font-variant-numeric: var(--numeric); }
.choice:hover { border-color: var(--line-field); }
.choice:active { transform: scale(var(--press-scale)); }
.choice[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand); }
.choice__sub { font: var(--weight-regular) var(--text-xs)/var(--leading-xs) var(--font-ui); color: var(--text-muted); }
.choice--more { border-style: dashed; color: var(--brand-text); }

/* Couleurs d'un article : pastille de la vraie teinte + son nom ; --swatch accepte un dégradé (multicolore) */
.colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--space-16), 1fr)); gap: var(--space-2) var(--space-1); }
.colors.is-error .color__dot { box-shadow: inset 0 0 0 1px var(--line-field), 0 0 0 2px var(--surface), 0 0 0 3px var(--loss); }
.color {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-width: 0; min-height: var(--tap);
  padding-block: var(--space-1); cursor: pointer; text-align: center; color: var(--text-muted);
  font: var(--weight-medium) var(--text-xs)/var(--leading-xs) var(--font-ui);
}
.color input { position: absolute; opacity: 0; pointer-events: none; }
.color__name { max-width: 100%; hyphens: auto; overflow-wrap: break-word; } /* « Multi-colore », « Transpa-rence » */
.color__dot {
  width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--swatch);
  box-shadow: inset 0 0 0 1px var(--line-field); /* blanc, crème : le contour reste visible */
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.color:hover .color__dot { box-shadow: inset 0 0 0 1px var(--line-field), 0 0 0 2px var(--surface), 0 0 0 3px var(--line-field); } /* survol : un contour, pas de grossissement */
.color input:checked + .color__dot { box-shadow: inset 0 0 0 1px var(--line-field), 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); transform: scale(1.08); }
.color input:checked ~ .color__name { color: var(--text); font-weight: var(--weight-bold); }
.color input:focus-visible + .color__dot { outline: 2px solid var(--focus); outline-offset: 5px; }
.sheet__title:focus { outline: none; } /* focus posé par script à l'ouverture, pas au clavier */

/* ---------------------------------------------------------------------------
   Formulaires : grilles de champs, encadré d'options, champ compact
   --------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.form-box { display: flex; flex-direction: column; gap: var(--space-3); }
.input--sm { min-height: var(--control-h-sm); }
@media (min-width: 768px) { .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* action destructive rangée à gauche du pied de feuille */
.sheet__foot-start { margin-right: auto; }
@media (max-width: 767px) { .sheet__foot { flex-wrap: wrap; } .sheet__foot .sheet__foot-start { flex-basis: 100%; order: 3; } }