/* components.css — composants d'interface. Classes en kebab-case, préfixe par composant. Tokens seulement. */

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--h-bouton);
  padding: 0 var(--e-5);
  border-radius: var(--r-m);
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
  font-variation-settings: "opsz" var(--o-corps-fort);
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--d-1) var(--entree);
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  background: var(--accent);
  color: var(--sur-accent);
}

.btn--primary .icon {
  stroke: var(--sur-accent);
}

.btn--secondary {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--bordure);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  min-height: var(--h-cible);
  padding: 0 var(--e-3);
}

.btn--block {
  width: 100%;
}

.btn--small {
  min-height: var(--h-cible);
  padding: 0 var(--e-4);
  font-size: var(--t-corps);
  font-weight: var(--p-corps-fort);
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-cible);
  height: var(--h-cible);
  border-radius: var(--r-rond);
  color: var(--texte);
}

.icon-btn--accent {
  color: var(--accent);
}

.icon-btn:active {
  transform: scale(0.92);
}

.link {
  color: var(--accent);
  font-weight: var(--p-corps-fort);
  min-height: var(--h-cible);
  display: inline-flex;
  align-items: center;
}

/* ---------- En-tête d'écran ---------- */

.topbar {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5) 0 var(--e-3);
  min-height: 72px;
}

.topbar__back {
  margin-left: calc(var(--e-3) * -1);
  margin-top: -2px;
}

.topbar__titles {
  flex: 1;
  min-width: 0;
}

.topbar__title {
  font-size: var(--t-titre);
  font-weight: var(--p-titre);
  line-height: var(--i-titre);
  letter-spacing: var(--s-titre);
  font-variation-settings: "opsz" var(--o-titre);
}

.topbar__subtitle {
  margin-top: var(--e-1);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.topbar__actions {
  display: flex;
  gap: var(--e-1);
  margin-right: calc(var(--e-3) * -1);
}

.topbar__mascot {
  width: 40px;
  height: 40px;
  flex: none;
}

/* ---------- Nav basse ---------- */

.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--bordure);
  /* pas de view-transition-name : voir la note de styles/motion.css */
}

.nav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--h-nav);
  color: var(--texte-2);
  text-decoration: none;
}

.nav__item:hover {
  text-decoration: none;
}

.nav__item .icon {
  width: 24px;
  height: 24px;
  transition: transform 180ms var(--ressort-vif);
}

.nav__item:active .icon {
  transform: translateY(-2px);
}

.nav__label {
  font-size: var(--t-legende);
  font-weight: var(--p-legende);
  line-height: 1;
}

.nav__item[aria-current="page"] {
  color: var(--texte);
}

.nav__icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav__bar {
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 2px;
  border-radius: var(--r-rond);
  background: transparent;
}

.nav__item[aria-current="page"] .nav__bar {
  background: var(--texte);
}

.nav__item--primary {
  color: var(--sur-accent);
}

.nav__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--d-plus);
  height: var(--d-plus);
  margin-top: -24px;
  border-radius: var(--r-rond);
  background: var(--accent);
  box-shadow: var(--ombre-3);
  transition: transform var(--d-1) var(--entree);
}

.nav__plus .icon {
  width: 28px;
  height: 28px;
  stroke: var(--sur-accent);
}

.nav__item--primary:active .nav__plus {
  transform: scale(0.94);
}

@media (min-width: 1024px) {
  .nav {
    top: 0;
    right: auto;
    width: var(--l-nav-bureau);
    bottom: 0;
    height: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 88px repeat(4, 72px);
    align-content: start;
    padding-top: var(--e-4);
    border-top: 0;
    border-right: 1px solid var(--bordure);
  }

  .nav__item {
    height: 72px;
  }

  .nav__item--primary {
    order: -1;
    height: 88px;
  }

  .nav__plus {
    margin-top: 0;
  }

}

/* ---------- Bandeaux (hors ligne, nouvelle version) ---------- */

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-cible);
  padding: var(--e-2) var(--marge-ecran);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  font-size: var(--t-secondaire);
  color: var(--texte-2);
}

.banner__action {
  color: var(--accent);
  font-weight: var(--p-corps-fort);
  min-height: var(--h-cible);
  padding: 0 var(--e-2);
}

/* ---------- Champs ---------- */

.field {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--h-champ);
  padding: 0 var(--e-3);
  background: var(--surface-elevee);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  color: var(--texte);
}

.field:focus-within {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 0.5px var(--accent);
}

.field .icon {
  width: 20px;
  height: 20px;
  color: var(--texte-2);
}

.field__input {
  flex: 1;
  min-width: 0;
  height: calc(var(--h-champ) - 2px);
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--t-corps);
}

.field__input::placeholder {
  color: var(--texte-2);
  opacity: 1;
}

.field__input:focus {
  outline: none;
}

.field--number .field__input {
  text-align: right;
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
}

.field__unit {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.label {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-secondaire);
  color: var(--texte-2);
}

.form-row {
  margin-top: var(--e-4);
}

select.field__input {
  appearance: none;
  -webkit-appearance: none;
}

/* Boutons radio en segments (Sexe, But, Thème…) */
.segments {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.segment {
  flex: 1;
  min-height: var(--h-cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--texte);
  font-size: var(--t-corps);
  white-space: nowrap;
}

.segment[aria-pressed="true"],
.segment--active {
  border-color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--texte);
  font-weight: var(--p-corps-fort);
}

/* ---------- Chips et onglets ---------- */

.chips {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--marge-ecran) * -1);
  padding: 0 var(--marge-ecran);
}

.chips--scroll::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 36px;
  padding: 0 var(--e-3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--texte);
  font-size: var(--t-secondaire);
  font-weight: var(--p-corps-fort);
  white-space: nowrap;
}

.chip[aria-pressed="true"],
.chip--active {
  background: var(--texte);
  color: var(--fond);
  border-color: var(--texte);
}

.tabs {
  display: flex;
  gap: var(--e-5);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--bordure);
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  flex: none;
  min-height: var(--h-cible);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-corps-fort);
  white-space: nowrap;
}

.tab[aria-selected="true"] {
  color: var(--texte);
}

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--texte);
}

/* ---------- Badge « tombana » (estimation) ---------- */

/* Pas de boîte, pas de pilule : le mot, souligné d'un pointillé (« à peu près », comme sur une note de marché). */
.badge {
  display: inline-block;
  color: var(--texte-2);
  font-size: var(--t-legende);
  font-weight: var(--p-legende);
  line-height: 1;
  vertical-align: baseline;
  margin-left: 6px;
  text-decoration: underline dotted;
  text-decoration-color: var(--texte-2);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  padding: 8px 0; /* zone tactile */
  margin-top: -8px;
  margin-bottom: -8px;
}

/* ---------- Points de macros ---------- */

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-rond);
  margin-right: 3px;
  vertical-align: middle;
}

.dot--l {
  width: 8px;
  height: 8px;
  margin-right: 5px;
}

.dot--p,
.c-p {
  background: var(--proteines);
}

.dot--c,
.c-c {
  background: var(--glucides);
}

.dot--f,
.c-f {
  background: var(--lipides);
}

/* ---------- Ligne de journal (entry-row) et gestes ---------- */

.swipe-row {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.swipe-row__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-5);
  font-weight: var(--p-corps-fort);
  opacity: 0;
}

.swipe-row__bg--left {
  justify-content: flex-end;
  background: var(--texte);
  color: var(--fond);
}

.swipe-row__bg--right {
  justify-content: flex-start;
  background: var(--succes);
  color: var(--sur-succes);
}

.swipe-row--left .swipe-row__bg--left,
.swipe-row--right .swipe-row__bg--right {
  opacity: 1;
}

.swipe-row__content {
  position: relative;
  background: var(--fond);
  will-change: transform;
}

.swipe-row--pressed .swipe-row__content {
  z-index: var(--z-ligne-soulevee);
  background: var(--surface-elevee);
  box-shadow: var(--ombre-2);
  border: var(--bord-eleve);
  border-radius: var(--r-m);
  transform: scale(1.02);
}

.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--e-3);
  min-height: var(--h-ligne);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--bordure);
  align-items: baseline;
}

.entry-row__name {
  grid-column: 1;
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
  font-variation-settings: "opsz" var(--o-corps-fort);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-row__kcal {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
  text-align: right;
}

.entry-row__sub {
  grid-column: 1;
  grid-row: 2;
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-row__macros {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: var(--e-2);
  justify-content: flex-end;
  font-size: var(--t-chiffre-s);
  font-weight: var(--p-chiffre-s);
  font-variant-numeric: var(--chiffres);
  white-space: nowrap;
}

/* Repas */
.meal {
  margin-top: var(--e-8);
}

.meal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-cible);
}

.meal__title {
  font-size: var(--t-sous-titre);
  font-weight: var(--p-sous-titre);
  letter-spacing: var(--s-sous-titre);
  font-variation-settings: "opsz" var(--o-sous-titre);
}

.meal__total {
  font-size: var(--t-chiffre-l);
  font-weight: var(--p-chiffre-l);
  font-variant-numeric: var(--chiffres);
}

.meal__total--empty {
  color: var(--texte-2);
  font-weight: var(--p-corps);
}

.meal__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-cible);
  color: var(--texte-2);
  border-top: 1px solid var(--bordure);
}

.meal--drop .meal__head {
  background: var(--surface-elevee);
  outline: 1px solid var(--accent);
  border-radius: var(--r-s);
  padding: 0 var(--e-2);
}

/* ---------- Lignes de liste génériques (réglages, résultats) ---------- */

.list {
  border-top: 1px solid var(--bordure);
}

.list-row {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--h-ligne);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  color: var(--texte);
}

.list-row__main {
  flex: 1;
  min-width: 0;
}

.list-row__title {
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__sub {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__value {
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
  white-space: nowrap;
  text-align: right;
}

.list-row__value .unit {
  margin-left: 0.15em;
}

.list-row--selected {
  background: var(--surface);
  margin: 0 calc(var(--marge-ecran) * -1);
  padding-left: var(--marge-ecran);
  padding-right: var(--marge-ecran);
}

/* Bascule (switch) */
.switch {
  position: relative;
  width: 48px;
  height: 28px;
  flex: none;
  border-radius: var(--r-rond);
  background: var(--bordure);
  transition: background var(--d-2) var(--sortie);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-rond);
  background: var(--surface-elevee);
  transition: transform var(--d-2) var(--ressort-vif);
}

.switch[aria-checked="true"] {
  background: var(--texte);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* ---------- Ligne de jours ---------- */

.daystrip {
  display: flex;
  height: var(--h-jours);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(var(--marge-ecran) * -1);
  padding: 0 calc(var(--marge-ecran) - 3px);
  gap: 0;
}

.daystrip::-webkit-scrollbar {
  display: none;
}

.daystrip__day {
  position: relative;
  flex: none;
  width: 50px;
  height: var(--h-jours);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  scroll-snap-align: center;
  color: var(--texte);
  border-radius: var(--r-s);
}

.daystrip__wd {
  font-size: var(--t-legende);
  font-weight: var(--p-legende);
  color: var(--texte-2);
  text-transform: none;
}

.daystrip__num {
  font-size: var(--t-corps);
  font-weight: var(--p-corps);
  line-height: 1.2;
}

.daystrip__day--today .daystrip__num {
  color: var(--accent);
}

.daystrip__day--current .daystrip__num {
  font-weight: var(--p-corps-fort);
  color: var(--texte);
}

.daystrip__day--current::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 24px;
  height: 2px;
  background: var(--texte);
  border-radius: var(--r-rond);
}

.daystrip__day--future {
  color: var(--texte-2);
  pointer-events: none;
}

.daystrip__day--future .daystrip__num {
  color: var(--texte-2);
}

/* mini-rebord : un petit arc sous le quantième, plein si journal rempli */
.daystrip__dot {
  width: 18px;
  height: 9px;
  border: 2px solid var(--bordure);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.daystrip__day--filled .daystrip__dot {
  border-color: var(--texte);
}

/* ---------- Lovia (hero) ---------- */

.lovia {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--e-6) auto var(--e-8);
  /* pas de view-transition-name : voir la note de styles/motion.css */
}

.lovia__wrap {
  position: relative;
  width: var(--d-lovia);
  height: var(--d-lovia);
}

.lovia__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lovia__track {
  fill: none;
  stroke: var(--bordure);
}

.lovia__track--macro {
  stroke: var(--piste-macro);
}

.lovia__arc {
  fill: none;
}

.lovia__arc--kcal {
  stroke: var(--texte);
  stroke-linecap: butt;
}

.lovia__arc--over {
  stroke: var(--alerte);
  stroke-linecap: butt;
}

.lovia__arc--p {
  stroke: var(--proteines);
  stroke-linecap: round;
}

.lovia__arc--c {
  stroke: var(--glucides);
  stroke-linecap: round;
}

.lovia__arc--f {
  stroke: var(--lipides);
  stroke-linecap: round;
}

.lovia__arc--alert {
  stroke: var(--alerte);
}

.lovia__disc {
  fill: var(--lovia-disque);
}

.lovia__rice {
  fill: var(--riz);
}

.lovia__check {
  fill: none;
  stroke: var(--succes);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lovia__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  padding: 0 54px;
  text-align: center;
}

.lovia__tap {
  position: absolute;
  inset: 54px;
  border-radius: var(--r-rond);
}

.lovia__hero {
  font-size: var(--t-hero);
  font-weight: var(--p-hero);
  line-height: var(--i-hero);
  letter-spacing: var(--s-hero);
  font-variation-settings: "opsz" var(--o-hero);
  font-variant-numeric: var(--chiffres);
  color: var(--texte);
}

.lovia--reached .lovia__hero {
  color: var(--succes);
}

.lovia--over .lovia__hero {
  color: var(--alerte);
}

.lovia__sub {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  line-height: var(--i-secondaire);
}

.lovia__sub--alert {
  color: var(--alerte);
}

.lovia__sub a {
  font-weight: var(--p-corps-fort);
}

.lovia__labels {
  display: flex;
  justify-content: center;
  gap: var(--e-6);
  margin-top: var(--e-4);
}

.lovia__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: var(--h-cible);
  padding: 0 var(--e-2);
  color: var(--texte);
  border-radius: var(--r-s);
}

.lovia__label-value {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
}

.lovia__label-name {
  font-size: var(--t-legende);
  font-weight: var(--p-legende);
  color: var(--texte-2);
}

.lovia__label .unit {
  margin-left: 0.2em;
}

/* ---------- Eau (gobelets) ---------- */

.water {
  position: relative;
}








/* ---------- NumberFlow ---------- */

.numflow {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: var(--chiffres);
  white-space: nowrap;
}

.numflow__col {
  display: inline-block;
  position: relative;
  height: 1em;
  line-height: 1em;
  overflow: hidden;
  vertical-align: baseline;
}

.numflow__stack {
  display: flex;
  flex-direction: column;
  transition: transform var(--d-7) var(--ressort-doux);
  will-change: transform;
}

.numflow__digit {
  display: block;
  height: 1em;
  line-height: 1em;
}

.numflow__sep {
  display: inline-block;
  line-height: 1em;
}

.numflow__suffix {
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
  color: var(--texte-2);
  margin-left: 0.25em;
}

/* ---------- Feuille du bas ---------- */

.sheet-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-veil {
  position: absolute;
  inset: 0;
  background: var(--voile);
  opacity: 0;
  transition: opacity var(--d-6) var(--sortie);
}

.sheet-root--open .sheet-veil {
  opacity: 1;
}

.sheet-root--closing .sheet-veil {
  opacity: 0;
  transition-duration: 240ms;
  transition-timing-function: var(--entree);
}

.sheet {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  display: flex;
  flex-direction: column;
  background: var(--surface-elevee);
  border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: var(--ombre-2);
  border-top: var(--bord-eleve);
  transform: translateY(100%);
  transition: transform var(--d-6) var(--ressort-sheet);
  will-change: transform;
  outline: none;
}

.sheet-root--open .sheet {
  transform: translateY(0);
}

.sheet-root--closing .sheet {
  transform: translateY(100%);
  transition: transform 240ms var(--entree);
}

.sheet--low {
  height: 42dvh;
}

.sheet--half {
  height: 72dvh;
}

.sheet--full {
  height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
}

.sheet--auto {
  max-height: 88dvh;
}

.sheet__handle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin-bottom: -24px;
  flex: none;
  touch-action: none;
  cursor: grab;
}

.sheet__handle span {
  width: 36px;
  height: 4px;
  border-radius: var(--r-rond);
  background: var(--bordure);
  margin-top: -20px;
}

.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--marge-ecran) 0;
  flex: none;
  touch-action: none;
}

.sheet__title {
  font-size: var(--t-sous-titre);
  font-weight: var(--p-sous-titre);
  letter-spacing: var(--s-sous-titre);
  font-variation-settings: "opsz" var(--o-sous-titre);
}

.sheet__close {
  margin-right: calc(var(--e-3) * -1);
}

.sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-3) var(--marge-ecran) calc(var(--e-6) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.sheet__footer {
  flex: none;
  padding: var(--e-3) var(--marge-ecran) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  background: var(--surface-elevee);
  border-top: 1px solid var(--bordure);
}

@media (min-width: 640px) {
  .sheet {
    width: min(100%, var(--l-sheet));
    border-radius: var(--r-l) var(--r-l) 0 0;
  }
}

/* ---------- Toast ---------- */

.toast-host {
  position: fixed;
  left: var(--e-5);
  right: var(--e-5);
  bottom: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px) + var(--e-3));
  z-index: var(--z-toast);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: 480px;
  min-height: var(--h-bouton);
  padding: 0 var(--e-2) 0 var(--e-4);
  background: var(--surface-elevee);
  border: var(--bord-eleve);
  border-radius: var(--r-l);
  box-shadow: var(--ombre-2);
  color: var(--texte);
  pointer-events: auto;
  overflow: hidden;
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform var(--d-4) var(--ressort-doux),
    opacity var(--d-4) var(--sortie);
}

.toast--in {
  transform: translateY(0);
  opacity: 1;
}

.toast--out {
  transform: translateY(120%);
  opacity: 0;
  transition-duration: 180ms;
  transition-timing-function: var(--entree);
}

.toast__text {
  flex: 1;
  font-size: var(--t-corps);
}

.toast__action {
  min-height: var(--h-cible);
  padding: 0 var(--e-3);
  color: var(--accent);
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
}

.toast__timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bordure);
  transform-origin: left center;
  transform: scaleX(1);
  transition-property: transform;
  transition-timing-function: linear;
}

.toast__timer--run {
  transform: scaleX(0);
}

@media (min-width: 1024px) {
  .toast-host {
    left: calc(var(--l-nav-bureau) + var(--e-5));
    bottom: var(--e-5);
  }
}

/* ---------- États vides ---------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-6) 0;
}

.empty--compact {
  flex-direction: row;
  align-items: center;
  padding: var(--e-2) 0;
  gap: var(--e-3);
}

.empty__icon {
  color: var(--texte-2);
}

.empty__text {
  color: var(--texte-2);
  font-size: var(--t-corps);
  max-width: 36ch;
}

.empty__text strong {
  color: var(--texte);
  font-weight: var(--p-corps-fort);
}

.empty--error .empty__icon {
  color: var(--alerte);
}

/* ---------- Mascotte Maky (traits 2 px) ---------- */

.maky {
  width: 40px;
  height: 40px;
}

.maky__head {
  fill: var(--surface-elevee);
  stroke: var(--texte);
  stroke-width: 2;
}

.maky__ear,
.maky__stroke {
  fill: var(--surface-elevee);
  stroke: var(--texte);
  stroke-width: 2;
  stroke-linejoin: round;
}

.maky__ring {
  fill: var(--texte);
}

.maky__eye {
  fill: var(--surface-elevee);
}

.maky__eye-line {
  fill: none;
  stroke: var(--surface-elevee);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.maky__line {
  fill: none;
  stroke: var(--texte);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.maky__mouth-open,
.maky__nose {
  fill: var(--texte);
}

.maky__grain {
  fill: var(--surface-elevee);
  stroke: var(--texte);
  stroke-width: 1;
}

.maky__tail {
  stroke: var(--texte);
}

.maky__tail-rings {
  stroke: var(--fond);
}

/* ---------- Graphiques ---------- */

.chart {
  display: block;
  width: 100%;
  overflow: visible;
}

.chart__grid {
  stroke: var(--bordure);
  stroke-width: 1;
}

.chart__target {
  stroke: var(--texte-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart__line {
  stroke: var(--texte);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart__line--dashed {
  stroke-dasharray: 2 4;
  stroke: var(--texte-2);
}

.chart__line--p {
  stroke: var(--proteines);
}

.chart__line--c {
  stroke: var(--glucides);
}

.chart__line--f {
  stroke: var(--lipides);
}

.chart__line--muted {
  stroke: var(--texte-2);
  stroke-width: 1.5;
}

.chart__area {
  fill: var(--texte);
  opacity: 0.06;
}

.chart__dot {
  fill: var(--texte-2);
}

.chart__dot--raw {
  fill: var(--texte-2);
}

.chart__bar {
  fill: var(--texte);
}

.chart__bar--over {
  fill: var(--alerte);
}

.chart__bar--empty {
  fill: var(--bordure);
}

.chart__bar--cost {
  fill: var(--texte-2);
}

.chart__label {
  fill: var(--texte-2);
  font-size: 11px;
  font-family: var(--police);
}

.chart__track {
  stroke: var(--bordure);
}

.chart__slice--p {
  stroke: var(--proteines);
}

.chart__slice--c {
  stroke: var(--glucides);
}

.chart__slice--f {
  stroke: var(--lipides);
}

/* Barre empilée des macros (rapports) */
.stackbar {
  display: flex;
  height: 6px;
  border-radius: var(--r-rond);
  overflow: hidden;
  background: var(--bordure);
}

.stackbar__part {
  height: 100%;
}

/* ---------- Écran de chargement (sans animation) ---------- */

.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  gap: var(--e-3);
  color: var(--texte-2);
}

.boot__name {
  font-size: var(--t-titre);
  font-weight: var(--p-titre);
  letter-spacing: var(--s-titre);
  color: var(--texte);
}

/* ---------- Divers ---------- */

.kv {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--bordure);
  min-height: var(--h-cible);
  align-items: center;
}

.kv__k {
  color: var(--texte);
}

.kv__v {
  font-variant-numeric: var(--chiffres);
  text-align: right;
  white-space: nowrap;
}

.kv__v--alert {
  color: var(--alerte);
}

.note {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  max-width: 60ch;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* ---------- Onboarding ---------- */

.onboarding {
  padding-top: var(--e-12);
  max-width: 480px;
}

.onboarding__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.onboarding__icon {
  border-radius: 22px;
}

.onboarding__points li {
  min-height: var(--h-cible);
}

@media (min-width: 1024px) {
  .daystrip,
  .chips--scroll {
    margin: 0;
    padding: 0;
  }
}



/* ---------- Recherche, fiche aliment, mes aliments (phase 1) ---------- */

/* Écrans de détail : une colonne, jamais plus large que la colonne unique. */
@media (min-width: 1024px) {
  .screen--narrow {
    max-width: var(--l-droite);
  }
}

/* Repas cible sous « Ajouter » : le Sakay dit « tape ici », aucun chevron. */
.search-meal {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-cible);
  margin-top: calc(var(--e-1) - 12px);
  margin-bottom: -12px;
  color: var(--accent);
  font-size: var(--t-secondaire);
  font-weight: var(--p-corps-fort);
}

.search-tools {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.search-field {
  height: var(--h-champ);
  padding-right: var(--e-1);
}

/* Un seul bouton d'effacement : le nôtre (44 px), jamais la croix native du navigateur. */
.search-field input[type="search"]::-webkit-search-cancel-button,
.search-field input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-field__clear {
  margin-right: calc(var(--e-1) * -1);
  color: var(--texte-2);
}

.search-describe {
  padding: 0 var(--e-2);
}

.search-tabs {
  gap: var(--e-4);
  margin: var(--e-4) calc(var(--marge-ecran) * -1) 0;
  padding: 0 var(--marge-ecran);
}

@media (min-width: 1024px) {
  .search-tabs {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
}

.search-results {
  border-top: 0;
  margin-top: 0;
}

.search-scope {
  padding: var(--e-3) 0 var(--e-1);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.search-foot {
  margin-top: var(--e-3);
  font-size: var(--t-secondaire);
}

.search-empty {
  padding-top: var(--e-8);
}

.search-create {
  margin-left: calc(var(--e-3) * -1);
}

/* Lien dans une phrase (« Essaie « ravitoto » ») : verbe seul en accent, sans flèche. */
.link-inline {
  color: var(--accent);
  font-weight: var(--p-corps-fort);
  padding: 8px 0;
  margin: -8px 0;
}

/* Résultat de recherche : 56 px, nom + nom MG, kcal de la portion par défaut, bouton + 44 px. */
.result-row {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--h-ligne);
  border-bottom: 1px solid var(--bordure);
}

.result-row--selected {
  background: var(--surface);
  margin: 0 calc(var(--marge-ecran) * -1);
  padding: 0 var(--marge-ecran);
}

.result-row__main {
  flex: 1;
  min-width: 0;
  padding: var(--e-2) 0;
  cursor: pointer;
  border-radius: var(--r-s);
}

.result-row__name {
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
  font-variation-settings: "opsz" var(--o-corps-fort);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row__sub {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row__kcal {
  flex: none;
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
  white-space: nowrap;
  text-align: right;
}

.result-row__kcal .unit {
  margin-left: 0.15em;
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
}

.result-row__add {
  flex: none;
  margin-right: calc(var(--e-2) * -1);
}

.result-row__add--on {
  color: var(--accent);
}

.result-row__add--on .icon {
  stroke-width: 2.5;
}

/* Quantité inline, sous le résultat tapé. */
.result-row__qty {
  padding: var(--e-3) 0 var(--e-4);
  border-bottom: 1px solid var(--bordure);
}

.result-row__qty-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e-3);
}

/* ---------- Sélecteur de portion ---------- */

.portion-picker__chips {
  padding-bottom: 2px;
}

.portion-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-3);
}

.portion-picker__grams {
  width: 128px;
  flex: none;
}

.portion-picker__kcal {
  font-size: var(--t-chiffre);
  font-weight: var(--p-chiffre);
  font-variant-numeric: var(--chiffres);
}

.portion-picker--compact .portion-picker__row {
  justify-content: flex-start;
}

/* ---------- Bouton principal collé au bas ---------- */

.action-bar {
  position: fixed;
  left: var(--marge-ecran);
  right: var(--marge-ecran);
  bottom: calc(var(--h-nav) + env(safe-area-inset-bottom, 0px) + var(--e-3));
  z-index: var(--z-bandeau);
}

.action-bar .btn {
  box-shadow: var(--ombre-3);
}

.screen--with-action {
  padding-bottom: calc(var(--h-bouton) + var(--e-6));
}

@media (min-width: 640px) {
  .action-bar {
    left: 50%;
    right: auto;
    width: min(var(--l-colonne), calc(100% - 2 * var(--marge-ecran)));
    transform: translateX(-50%);
  }
}

@media (min-width: 1024px) {
  .action-bar {
    position: sticky;
    left: auto;
    right: auto;
    bottom: var(--e-5);
    width: auto;
    transform: none;
    margin-top: var(--e-6);
  }

  .action-bar .btn {
    box-shadow: none;
  }

  .screen--with-action {
    padding-bottom: 0;
  }
}

/* ---------- Fiche aliment ---------- */

.food-subtitle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--e-1);
}

.food-fav--on {
  color: var(--accent);
}

.food-fav--on .icon {
  fill: var(--accent);
}

.food-portion {
  margin-top: var(--e-2);
}

.food-macros {
  margin-top: var(--e-6);
}

.food-macros__kcal {
  font-size: var(--t-chiffre-l);
  font-weight: var(--p-chiffre-l);
  line-height: var(--i-chiffre-l);
  letter-spacing: var(--s-chiffre-l);
}

.food-macros__kcal .numflow__suffix {
  font-size: var(--t-corps);
}

.food-macros__for {
  margin-top: var(--e-1);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.food-macros__row {
  display: flex;
  gap: var(--e-6);
  margin-top: var(--e-4);
}

.food-macro {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0;
  align-items: center;
}

.food-macro__value {
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
}

.food-macro__label {
  grid-column: 2;
  color: var(--texte-2);
  font-size: var(--t-legende);
}

.food-group {
  margin-top: var(--e-6);
}

.food-group .section__title {
  min-height: var(--h-cible);
  display: flex;
  align-items: center;
}

.nutrient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 52px;
  column-gap: var(--e-3);
  align-items: center;
  min-height: var(--h-cible);
  border-top: 1px solid var(--bordure);
}

.nutrient-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nutrient-row__value {
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
  white-space: nowrap;
  text-align: right;
}

.nutrient-row__value .unit {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
}

.nutrient-row__pct {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-variant-numeric: var(--chiffres);
  text-align: right;
  white-space: nowrap;
}

.nutrient-row__pct--alert {
  color: var(--alerte);
  font-weight: var(--p-corps-fort);
}

.food-estimate__text {
  margin-top: var(--e-2);
  color: var(--texte-2);
}

.food-source {
  margin-top: var(--e-6);
}

.field-error {
  margin-top: var(--e-1);
  color: var(--alerte);
  font-size: var(--t-secondaire);
}

.field--error {
  border-color: var(--alerte);
}

/* ---------- Mes aliments ---------- */

.my-foods__actions {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}

.my-foods__list .list-row {
  padding-right: 0;
}

.list-row__tap {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: var(--e-2) 0;
  color: var(--texte);
}

.my-foods__portion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  column-gap: var(--e-3);
}

.my-foods__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--e-3);
}

.my-foods__form .label .field {
  margin-top: var(--e-2);
}

.my-foods__form-actions {
  margin-top: var(--e-6);
  display: grid;
  gap: var(--e-2);
}

.my-foods__textarea-field {
  align-items: stretch;
  height: auto;
  padding: var(--e-2) var(--e-3);
}

.my-foods__textarea {
  height: auto;
  resize: vertical;
  line-height: var(--i-corps);
  font-family: inherit;
}

/* ---------- Journal (phase suivante) : lignes à gestes, repas, ligne de jours, feuille de recherche, colonne droite ---------- */

/* Ligne de journal : nom (malgache d'abord), kcal, glose · portion · prix, points P · G · L */
.entry-row {
  cursor: pointer;
  border-radius: 0;
}

.entry-row__name {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.entry-row__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-row__macro {
  display: inline-flex;
  align-items: center;
}

.swipe-row__bg span {
  font-weight: var(--p-corps-fort);
}

.swipe-row--leaving {
  pointer-events: none;
}

/* En-tête de repas : titre, ⋯ (44 px, encre secondaire), sous-total qui roule */
.meal__head {
  align-items: center;
}

.meal__title {
  flex: 1;
  min-width: 0;
}

.meal__more {
  flex: none;
  color: var(--texte-2);
  margin-right: var(--e-1);
}

.meal__total {
  flex: none;
}

/* Repas habituel : une ligne, verbe seul en Sakay */
.meal__usual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-cible);
  border-top: 1px solid var(--bordure);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.meal__usual-add {
  flex: none;
}

/* Ligne de jours : mini-rebord (arc 18 × 10, 2 px), rempli comme le rebord calories du jour */
.daystrip__arc {
  display: block;
  width: 18px;
  height: 10px;
  overflow: visible;
}

.daystrip__arc path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: butt;
}

.daystrip__arc-track {
  stroke: var(--bordure);
}

.daystrip__arc-fill {
  stroke: var(--texte);
  transition: stroke-dashoffset var(--d-6) var(--ressort-doux);
}

.daystrip__arc--over .daystrip__arc-fill {
  stroke: var(--alerte);
}

.daystrip__arc--hidden,
.daystrip__day--future .daystrip__arc {
  visibility: hidden;
}

.daystrip__day--future {
  cursor: default;
}

/* Lovia : changement de jour, anneaux et riz vers les valeurs du jour cible (§ 6 #18) */
.lovia--day .lovia__arc,
.lovia--day .lovia__arc--fade,
.lovia--day .lovia__rice {
  transition-duration: var(--d-6);
}

/* Chip de portion sélectionnée : Sakay = sélection (bordure + texte), jamais d'aplat Kafe */
.chip[aria-pressed="true"],
.chip--active {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 0.5px var(--accent);
}

/* Dégagement en fin de rangée de chips : on voit qu'il y a une suite */
.chips__end {
  flex: none;
  width: var(--e-8);
  height: 1px;
}

/* Colonne % AJR : le chiffre en encre, « % » seul en secondaire (comme la colonne kcal) */
.nutrient-row__pct {
  color: var(--texte);
  font-size: var(--t-chiffre-s);
  font-weight: var(--p-chiffre-s);
}

.nutrient-row__pct .unit {
  font-size: var(--t-chiffre-s);
  font-weight: var(--p-secondaire);
  color: var(--texte-2);
}

.nutrient-row__pct--alert,
.nutrient-row__pct--alert .unit {
  color: var(--alerte);
}

/* Feuille de recherche : « Ajouter » + repas cible dans l'en-tête de la feuille, à côté du × */
.sheet__titles {
  flex: 1;
  min-width: 0;
}

.search-head {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-head__title {
  font-size: var(--t-sous-titre);
  font-weight: var(--p-sous-titre);
  line-height: var(--i-sous-titre);
  letter-spacing: var(--s-sous-titre);
  font-variation-settings: "opsz" var(--o-sous-titre);
}

.search-head .search-meal {
  margin: 0;
  min-height: var(--e-6);
  justify-content: flex-start;
}

.flow__head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.flow__head--food .topbar__back {
  margin: 0 0 0 calc(var(--e-2) * -1);
}

.sheet--search .sheet__header {
  align-items: flex-start;
  padding-top: var(--e-2);
}

.sheet--search .sheet__body {
  padding-top: var(--e-2);
}

.search-screen--embedded .search-tools {
  margin-top: var(--e-2);
}

.search-screen--embedded .search-tabs,
.search-screen--embedded .chips--scroll,
.food-screen--embedded .chips--scroll {
  margin-left: calc(var(--marge-ecran) * -1);
  margin-right: calc(var(--marge-ecran) * -1);
  padding-left: var(--marge-ecran);
  padding-right: var(--marge-ecran);
}

/* Bouton principal collé au bas DANS la feuille (au-dessus de la liste qui défile) */
.search-screen--embedded .action-bar,
.food-screen--embedded .action-bar {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 0;
  width: auto;
  transform: none;
  margin: var(--e-4) 0 0;
  padding: var(--e-2) 0;
  background: var(--surface-elevee);
}

.search-screen--embedded .action-bar .btn,
.food-screen--embedded .action-bar .btn {
  box-shadow: var(--ombre-3);
}

.search-screen--embedded.screen--with-action,
.food-screen--embedded.screen--with-action {
  padding-bottom: 0;
}

.food-screen--embedded .topbar {
  padding-top: 0;
  min-height: 0;
}

.food-screen--embedded .topbar__actions {
  margin-right: 0;
}

/* Fiche dans une feuille : le titre reste court (une ligne, deux au plus) */
.food-screen--embedded .topbar__title {
  font-size: var(--t-sous-titre);
  line-height: var(--i-sous-titre);
}

/* Lien « Fiche » à côté d'« Ajouter » dans la quantité inline */
.result-row__qty-actions {
  justify-content: space-between;
  align-items: center;
}

.result-row__detail {
  font-size: var(--t-secondaire);
}

/* Colonne droite d'Aujourd'hui (bureau) : recherche au repos = champ + onglets, puis Rano / Lanja / Vidiny */
.aside-search-host {
  display: none;
}

@media (min-width: 1024px) {
  .aside-search-host {
    display: block;
  }

  .screen__aside {
    max-height: calc(100dvh - var(--e-12));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .aside-search {
    padding-bottom: var(--e-4);
    border-bottom: 1px solid var(--bordure);
  }

  .aside-search__head {
    display: flex;
    align-items: center;
    min-height: var(--h-cible);
  }

  .aside-search .search-tabs {
    margin: var(--e-4) 0 0;
    padding: 0;
  }

  .aside-search .search-results {
    max-height: 56dvh;
    overflow-y: auto;
  }

  .aside-search .action-bar,
  .aside-search .food-screen--embedded .action-bar {
    background: var(--fond);
  }

  .aside-search .food-screen--embedded {
    padding-top: var(--e-2);
  }

  .aside-search + .body-lines .section {
    margin-top: var(--e-6);
  }
}

/* Feuille d'édition d'une ligne */
.entry-sheet__gloss {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  margin-top: calc(var(--e-2) * -1);
  margin-bottom: var(--e-3);
}

.entry-sheet__meals .segment {
  flex: 1 1 40%;
}

.entry-sheet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: var(--e-3);
}

.entry-sheet__actions {
  margin-top: var(--e-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

/* Déplacer vers : le repas courant, coché, ne se choisit pas */
.move-list .list-row[disabled] {
  color: var(--texte-2);
  cursor: default;
}

.meal-menu__confirm .list-row__title {
  white-space: normal;
}

/* ---------- Formulaires (onboarding, Moi, Réglages) : champs, segments empilés, bascules, lignes d'action ---------- */

.form-row__hint {
  margin-top: var(--e-1);
}

.field--disabled {
  opacity: 0.5;
}

.field--disabled .field__input {
  cursor: not-allowed;
}

/* Segments empilés (activité) : libellé et sous-titre, une option par ligne, alignés à gauche */
.segments--stack {
  flex-direction: column;
  gap: var(--e-2);
}

.segments--stack .segment {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-4);
  text-align: left;
  white-space: normal;
}

.segment__hint {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
  line-height: var(--i-secondaire);
}

/* Ligne à bascule : toute la ligne est tapable, l'aide passe sur deux lignes si besoin */
.list-row--toggle {
  cursor: pointer;
}

.list-row__sub--wrap {
  white-space: normal;
}

/* Ligne d'action (bouton ou lien) : même rendu qu'une ligne de liste, sans chevron décoratif */
.list-row--action {
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  text-decoration: none;
}

.list-row--action:hover {
  text-decoration: none;
}

.list-row--action:active {
  background: var(--surface);
}

.list-row--alert .list-row__title {
  color: var(--alerte);
}

.list-row__icon {
  display: inline-flex;
  color: var(--texte-2);
}

/* Bouton d'alerte (Tout effacer) : Sakay maina en contour, jamais un aplat rouge de plus */
.btn--alert {
  background: transparent;
  color: var(--alerte);
  border: 1px solid var(--alerte);
}

/* ---------- Onboarding : barre de progression, titres, points, actions ---------- */

.onboarding {
  padding-top: var(--e-4);
}

.onboarding__bar {
  display: flex;
  align-items: center;
  min-height: var(--h-cible);
}

.onboarding__back {
  margin-left: calc(var(--e-3) * -1);
}

.onboarding__step {
  margin-left: auto;
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-variant-numeric: var(--chiffres);
}

.onboarding__title {
  margin-top: var(--e-6);
}

.onboarding__text {
  margin-top: var(--e-3);
  color: var(--texte-2);
  max-width: 40ch;
}

.onboarding__points {
  margin-top: var(--e-8);
}

.onboarding__points li {
  align-items: flex-start;
}

.onboarding__points .empty__icon {
  display: inline-flex;
  margin-top: var(--e-1);
}

.onboarding__form .profile-form,
.onboarding__form .targets-panel {
  margin-top: var(--e-4);
}

.onboarding__actions {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-10);
}

/* ---------- Profil : formulaire, panneau d'objectifs, écran Moi ---------- */

.profile-form__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--e-3);
}

.targets-panel {
  margin-top: var(--e-4);
}

.targets__tdee {
  max-width: 40ch;
}

.targets__kcal {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-top: var(--e-6);
}

.targets__num {
  font-size: var(--t-chiffre-l);
  font-weight: var(--p-chiffre-l);
  line-height: var(--i-chiffre-l);
  letter-spacing: var(--s-chiffre-l);
  font-variation-settings: "opsz" var(--o-chiffre-l);
}

.targets__unit {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.targets__details > .note {
  margin-top: var(--e-2);
}

.targets__warning {
  margin-top: var(--e-4);
}

.targets__warning-text {
  color: var(--alerte);
  max-width: 48ch;
}

.targets__warning-actions {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.targets__macros-label {
  margin-top: var(--e-8);
}

.macro-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-4);
}

.macro-row__value {
  display: flex;
  align-items: baseline;
  gap: var(--e-1);
  font-size: var(--t-corps-fort);
  font-weight: var(--p-chiffre-l);
  line-height: var(--i-corps-fort);
}

.macro-row__value .dot {
  align-self: center;
}

.macro-row__value .unit {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
}

.macro-row__name {
  margin-top: var(--e-1);
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

.targets__custom {
  margin-top: var(--e-2);
}

.targets__custom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--e-3);
}

.targets__custom .note {
  margin-top: var(--e-3);
}

.targets__water {
  margin-top: var(--e-6);
}

/* Écran Moi : la cible est un bouton posé à plat (tap = modifier), pas une carte */
.targets {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
}

.profile-targets .targets__kcal {
  margin-top: var(--e-2);
}

.profile-targets .note {
  margin-top: var(--e-3);
}

.profile-targets .note + .note {
  margin-top: var(--e-1);
}

.profile-targets__edit {
  margin-right: calc(var(--e-3) * -1);
}

.profile-editor__title {
  margin-top: var(--e-8);
}

/* ---------- Réglages ---------- */

.settings__section .list {
  margin-top: var(--e-2);
}

.settings__section > .note {
  margin-top: var(--e-2);
}

.settings__calibrate {
  margin-top: var(--e-3);
}

.settings__wipe {
  margin-top: var(--e-4);
}

.settings__foot {
  margin-top: var(--e-6);
}

.settings__ai-details {
  margin-top: var(--e-2);
}

.settings__ai-details .note,
.settings__calibrate-sheet .form-row,
.settings__wipe-sheet .form-row {
  margin-top: var(--e-4);
}

/* ---------- Journal : la semaine (sept jours) et le jour ---------- */

/* Téléphone : une vue à la fois, choisie par le segment en tête. */
.journal__views {
  margin-top: var(--e-4);
}

@media (max-width: 1023px) {
  .journal[data-view="week"] .journal__day-col,
  .journal[data-view="day"] .journal__week-col {
    display: none;
  }
}

/* Bureau : la semaine à gauche, le jour à droite, sous un en-tête qui traverse les deux colonnes —
   le segment n'a alors plus rien à choisir. */
@media (min-width: 1024px) {
  .journal > .topbar {
    grid-column: 1 / -1;
  }

  .journal__views {
    display: none;
  }
}

/* Navigation ‹ › (semaine ou jour) : le titre au centre, les flèches en encre secondaire. */
.journal-nav {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--h-cible);
  margin-top: var(--e-6);
}

.journal-nav .icon-btn {
  flex: none;
  color: var(--texte-2);
}

.journal-nav .icon-btn[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.journal-nav__label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: var(--t-sous-titre);
  font-weight: var(--p-sous-titre);
  line-height: var(--i-sous-titre);
  letter-spacing: var(--s-sous-titre);
  font-variation-settings: "opsz" var(--o-sous-titre);
}

/* Les sept jours : point d'état, jour en toutes lettres, kcal et cible à droite. */
.journal-days {
  margin-top: var(--e-3);
}

.journal-day-row__mark {
  display: inline-flex;
  justify-content: center;
  flex: none;
  width: 8px;
}

.journal-day-row__mark .dot {
  margin-right: 0;
}

.dot--succes {
  background: var(--succes);
}

.dot--alerte {
  background: var(--alerte);
}

.journal-day-row[aria-current] .list-row__title {
  color: var(--accent);
}

.journal-day-row--future .list-row__title,
.journal-day-row__value--empty {
  color: var(--texte-2);
  font-weight: var(--p-corps);
}

/* Totaux de la semaine, puis la copie d'une journée : verbe seul, aligné sur la marge d'écran. */
.journal-week__copy {
  margin: var(--e-4) 0 0 calc(var(--e-3) * -1);
}

/* Jour : l'invitation d'une journée vide, puis les repas. */
.journal-day__empty {
  margin-top: var(--e-2);
}

.journal-meal__actions {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: none;
}

.journal-meal__actions .btn:last-child {
  margin-right: calc(var(--e-3) * -1);
}

/* Journal, correctifs de mise en page (téléphone 390 px) : une invitation ou un repas vide qui porte deux verbes
   ne doit jamais écraser sa phrase en colonne d'un mot — l'action passe à la ligne, alignée à droite. */
.journal-day__empty .empty--compact,
.journal-week__foot .empty--compact,
.journal .meal__empty {
  flex-wrap: wrap;
  row-gap: var(--e-2);
}

.journal-day__empty .empty--compact .btn,
.journal-week__foot .empty--compact .btn,
.journal .journal-meal__actions {
  margin-left: auto;
}

.journal-day__empty .empty--compact .btn,
.journal-week__foot .empty--compact .btn {
  margin-right: calc(var(--e-3) * -1);
}

/* ---------- Le corps de la journée : Rano, Fifadian-kanina, Lanja, Exercices, Vidiny ----------
   DESIGN.md § 4 (pas de carte : des lignes de section délimitées par l'espace), § 7.6 (gobelets),
   § 8.1 (croquis d'Aujourd'hui). Une seule surface soulevée à la fois : ces blocs restent à plat. */

.body-block > .line {
  border-top: 1px solid var(--bordure);
}

.body-block > .line--first {
  border-top: 0;
}

.line--action {
  width: 100%;
  color: var(--texte);
}

.line__main {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  flex: 1;
  min-width: 0;
  text-align: left;
}

.line__sub {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line__spark {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--texte-2);
}

.line__spark .chart {
  width: 72px;
  height: 24px;
}

.line__spark .chart__line {
  stroke: var(--texte-2);
  stroke-width: 1.5;
}

.line__verb {
  flex: none;
}

/* Rano : une rangée de vera en contour. L'eau n'est jamais bleue (§ 10, cliché n° 8). */
.water {
  --vera-l: 28px;
  --vera-h: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-3);
}

.water__cups {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  /* 8 vera et 7 intervalles de 8 px au repos ; les intervalles se resserrent sur un écran étroit. */
  max-width: calc(var(--vera-l) * 8 + var(--e-2) * 7);
  gap: var(--e-1);
  padding: var(--e-1) 0;
  touch-action: none;
  cursor: pointer;
}

.water__cups:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-s);
}

.water__cup {
  display: block;
  flex: none;
  width: var(--vera-l);
  height: var(--vera-h);
}

.water__cup-glass {
  display: block;
  width: var(--vera-l);
  height: var(--vera-h);
}

.water__cup-outline {
  fill: none;
  stroke: var(--texte-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.water__cup--full .water__cup-outline {
  stroke: var(--texte);
}

.water__cup-level {
  fill: var(--texte);
  transform: translateY(36px);
  transition: transform var(--d-2) var(--sortie);
}

.water--dragging .water__cup-level {
  transition: none;
}

.water__add {
  flex: none;
  margin-right: calc(var(--e-3) * -1);
}

.water__total {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: var(--t-chiffre);
  font-weight: var(--p-chiffre);
}

.water__target {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
}

.water__total--reached > .water__now,
.water__total--reached > .unit {
  color: var(--succes);
}

.water-containers .form-row {
  margin-top: var(--e-5);
}

.water-containers__add {
  margin-top: var(--e-4);
}

/* Fifadian-kanina : une barre fine, remplie par transform (aucune boucle, elle suit le temps réel). */
.fast-bar {
  height: 3px;
  margin-top: calc(var(--e-1) * -1);
  border-radius: var(--r-rond);
  background: var(--piste-macro);
  overflow: hidden;
}

.fast-bar__fill {
  display: block;
  height: 100%;
  background: var(--texte);
  transform-origin: left center;
  transform: scaleX(0);
}

.fast-bar--reached .fast-bar__fill {
  background: var(--succes);
}

.fast-sheet__actions,
.weight-sheet__actions {
  margin-top: var(--e-6);
}

/* Exercices : le choix de l'activité, puis durée et dépense côte à côte. */
.ex-sheet__note {
  margin-bottom: var(--e-3);
}

.activities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
}

.activity {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--h-cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
  color: var(--texte);
  font-size: var(--t-secondaire);
  text-align: left;
}

.activity[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.activity .icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.activity__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-sheet__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--e-3);
}

.ex-sheet__add {
  margin-top: var(--e-5);
}

.ex-list {
  margin-top: var(--e-6);
}

.ex-list__title {
  font-size: var(--t-secondaire);
  color: var(--texte-2);
  margin-bottom: var(--e-1);
}

.ex-list__empty {
  margin: 0;
}

.ex-swipe .swipe-row__content {
  background: var(--surface-elevee);
}

.ex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--h-cible);
  border-top: 1px solid var(--bordure);
}

.ex-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-row__value {
  flex: none;
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

/* La liste du jour passe avant le choix d'activité : elle garde son air au-dessus des dix-huit boutons. */
.ex-sheet .ex-list {
  margin-top: var(--e-4);
}

.ex-sheet .activities {
  margin-top: var(--e-6);
}

/* Un vrai blanc entre la rangée de vera et la première ligne de corps (croquis § 8.1). */
.body-block > .line--first {
  margin-top: var(--e-5);
}

/* La barre du jeûne ne doit pas se confondre avec le séparateur de la ligne suivante. */
.fast-bar {
  margin-bottom: var(--e-3);
}

/* ---------- Décrire (saisie libre) ---------- */

/* Le champ de phrase respire : c'est le seul objet de l'écran, il occupe quatre lignes. */
.field--area {
  align-items: stretch;
  padding: var(--e-3);
}

.describe__text {
  height: auto;
  min-height: calc(var(--h-champ) * 2);
  resize: vertical;
  line-height: var(--i-corps);
  font-family: inherit;
}

.describe__hint {
  margin-top: var(--e-2);
}

.describe__go {
  margin-top: var(--e-4);
}

.describe__photo-row {
  display: flex;
  margin-top: var(--e-3);
}

.describe__photo-note {
  margin-top: var(--e-2);
}

.describe__status {
  margin-top: var(--e-4);
  font-size: var(--t-secondaire);
  color: var(--texte-2);
}

.describe__status--alert {
  color: var(--alerte);
}

/* Titre de l'étape de confirmation : une phrase, pas une bannière. */
.describe__lead {
  margin: var(--e-2) 0 var(--e-4);
  font-size: var(--t-corps);
  color: var(--texte-2);
}

.describe__again {
  display: inline-block;
  margin-top: var(--e-5);
}

/* ---------- Confirmation avant écriture ---------- */

.confirm__note {
  margin-bottom: var(--e-4);
  font-size: var(--t-secondaire);
  color: var(--alerte);
}

.confirm-row {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--h-ligne);
  border-bottom: 1px solid var(--bordure);
}

/* Décoché : la ligne reste lisible, elle recule d'un pas. */
.confirm-row--off .confirm-row__title,
.confirm-row--off .confirm-row__kcal {
  color: var(--texte-2);
}

.confirm-row__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--h-cible);
  height: var(--h-cible);
  margin-left: calc(var(--e-2) * -1);
  border-radius: var(--r-rond);
  color: var(--texte-2);
}

.confirm-row__check--on {
  color: var(--accent);
}

.confirm-row__check--on .icon {
  stroke-width: 2.5;
}

.confirm-row__check--none {
  color: var(--texte-2);
}

.confirm-row__main {
  flex: 1;
  min-width: 0;
  padding: var(--e-2) 0;
  cursor: pointer;
  border-radius: var(--r-s);
}

.confirm-row--unknown .confirm-row__main {
  cursor: default;
}

.confirm-row__name {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  min-width: 0;
}

.confirm-row__title {
  font-size: var(--t-corps-fort);
  font-weight: var(--p-corps-fort);
  font-variation-settings: "opsz" var(--o-corps-fort);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-row__sub {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confirm-row__kcal {
  flex: none;
  font-variant-numeric: var(--chiffres);
  font-weight: var(--p-chiffre);
  white-space: nowrap;
  text-align: right;
}

.confirm-row__kcal .unit {
  margin-left: 0.15em;
  color: var(--texte-2);
  font-size: var(--t-secondaire);
  font-weight: var(--p-secondaire);
}

.confirm-row__create {
  flex: none;
}

.confirm-row__qty {
  padding: var(--e-3) 0 var(--e-4);
  border-bottom: 1px solid var(--bordure);
}

/* ---------- Code-barres ---------- */

.barcode__meal {
  color: var(--texte-2);
}

/* Viseur : une fenêtre sur le monde, pas une carte — un seul filet, aucune ombre. */
.barcode__frame {
  position: relative;
  margin-top: var(--e-4);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
}

.barcode__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La cible dit où viser : c'est la zone active, donc Sakay. */
.barcode__target {
  position: absolute;
  inset: 22% 12%;
  border: 2px solid var(--accent);
  border-radius: var(--r-s);
}

.barcode__status {
  margin-top: var(--e-4);
  font-size: var(--t-corps);
}

.barcode__result:not(:empty) {
  margin-top: var(--e-4);
}

.barcode__actions {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.barcode__manual {
  margin-top: var(--e-8);
}

.barcode__manual-row {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-2);
}

.barcode__manual-row .field__input {
  font-variant-numeric: var(--chiffres);
}

/* ---------- Assistant IA (Réglages) ---------- */

.field__eye {
  flex: none;
  margin-right: calc(var(--e-2) * -1);
  color: var(--texte-2);
}

.settings__ai-models {
  margin-top: var(--e-2);
  margin-bottom: var(--e-4);
}

.settings__ai-verify {
  margin-bottom: var(--e-2);
}

.settings__ai-verdict {
  margin-bottom: var(--e-4);
}

.settings__ai-verdict--ok {
  color: var(--succes);
}

.settings__ai-verdict--alert {
  color: var(--alerte);
}

/* ---------- Rapports (DESIGN.md § 8.4) ----------
   Des sections délimitées par l'espace et un titre, jamais des cartes (§ 4, § 10 cliché n° 1).
   Les graphiques sont déjà tracés à l'ouverture : rien n'y bouge (§ 6). */

.reports__periods {
  margin-top: var(--e-4);
}

.reports__content {
  padding-bottom: var(--e-6);
}

.reports__avg {
  color: var(--texte);
}

.reports__in-target,
.reports__macro-target,
.reports__weight-change,
.reports__cost-note,
.reports__score-parts {
  margin-top: var(--e-1);
}

.report__chart {
  margin-top: var(--e-4);
}

/* Macros : une seule barre empilée de 6 px, trois parts, aucun dégradé (§ 10 cliché n° 4). */
.reports__stackbar {
  margin-top: var(--e-2);
}

.stackbar__part--p {
  background: var(--proteines);
}

.stackbar__part--c {
  background: var(--glucides);
}

.stackbar__part--f {
  background: var(--lipides);
}

.reports__macro-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-3);
}

.reports__macro {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-1);
}

.reports__macro-pct {
  font-weight: var(--p-chiffre);
  color: var(--texte);
}

.reports__macro-label {
  color: var(--texte-2);
  font-size: var(--t-secondaire);
}

/* Lanja : les pesées brutes sont des points, la tendance est le seul trait. */
.chart__line--points {
  stroke: none;
}

.reports__lines {
  margin-top: var(--e-8);
}

.reports__deficits,
.reports__cost-chart {
  margin-top: var(--e-3);
}

.reports__cost-chart .chart--bar {
  margin-bottom: calc(var(--e-2) * -1);
}

.reports__score {
  font-size: var(--t-chiffre-l);
}

.reports__exports {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-8);
}

.reports__exports .btn {
  flex: 1 1 auto;
  min-width: 88px;
}

/* ---------- Le fun : série, badges, astuce (MISSION.md § Fun, DESIGN.md § 7.9) ---------- */

.fun-block {
  margin-top: var(--e-8);
}

.streak__flame {
  display: inline-flex;
  flex: none;
  color: var(--texte-2);
}

.streak--alive .streak__flame {
  color: var(--accent);
}

.streak__value .unit {
  margin-left: 0.15em;
}

/* La feuille des douze badges : gagnés en encre, à gagner en texte secondaire avec leur progression. */
.badges__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--e-3) var(--e-2);
  margin-top: var(--e-3);
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--h-cible);
  padding: var(--e-2) var(--e-1);
  text-align: center;
  color: var(--texte-2);
}

.badge-item--earned {
  color: var(--texte);
}

.badge-item__icon {
  display: inline-flex;
}

.badge-item__name {
  font-size: var(--t-legende);
  font-weight: var(--p-legende);
  line-height: var(--i-legende);
}

.badge-item__state {
  font-size: var(--t-chiffre-s);
  color: var(--texte-2);
}

.badge-item--earned .badge-item__state {
  color: var(--succes);
}

.badge-sheet__desc,
.streak-sheet__rule,
.tip-sheet__text {
  font-size: var(--t-corps);
  line-height: var(--i-corps);
}

.badge-sheet__state,
.streak-sheet .note {
  margin-top: var(--e-3);
}

/* Maky porte l'astuce du jour : la mascotte devient une cible tactile de 44 px. */
.topbar__mascot--tappable {
  cursor: pointer;
  min-width: var(--h-cible);
  min-height: var(--h-cible);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Tatitra : l'aperçu de la carte partageable ---------- */

.tatitra__canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--r-m);
}

.tatitra__note {
  margin: var(--e-3) 0 var(--e-4);
}

/* La période active suit la règle des chips : Sakay = « action : bouton +, lien, sélection, focus » (§ 2).
   Une sélection est du Sakay, jamais un aplat d'encre — c'est le même geste que choisir une portion. */

/* Les barres d'Ariary accompagnent la courbe des calories : elles ne doivent pas la dominer. */
.reports__cost-chart .chart--bar .chart__bar {
  fill: var(--texte-2);
}

/* Le badge d'estimation ne se coupe jamais en deux : c'est le nom qui cède, avec ses points de suite. */
.confirm-row__name .badge {
  flex: none;
  white-space: nowrap;
}

/* Le Sakay ne dit qu'« action » (§ 2) : la flamme de la série reste de l'encre, seulement plus vive
   quand la série est vivante. Et un badge gagné se lit à son encre, pas à une couleur d'état (§ 10 n° 6). */
.streak--alive .streak__flame {
  color: var(--texte);
}

.badge-item--earned .badge-item__state {
  color: var(--texte-2);
}

/* ---------- Écran de démarrage Vakana Studio (vendor/vakana-intro.js) ---------- */

/* Couche pleine page posée avant l'amorçage et retirée par `onComplete` (src/app.js) : elle porte
   le canvas du composant, qui se retire seul. Le fond est la nacre du studio — c'est l'identité de
   Vakana, pas une couleur de l'app : elle vit ici, en variable locale, et nulle part ailleurs. */
.intro-studio {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--intro-nacre);
}

/* ---------- Lovia : l'assiette d'abord, les anneaux ensuite (verdict du juge, 2026-09-08) ----------
   Les pistes vides étaient dessinées au même poids que les arcs remplis : quatre bandes grises
   concentriques, l'objet lisait « tableau de bord » et non « assiette ». Les trois arcs de macros n'ont
   plus de piste du tout — ils portent déjà leurs chiffres nommés en dessous — et le rebord des calories
   garde la sienne, très atténuée, juste pour situer le tour de l'assiette. */

.lovia__track--macro {
  stroke: transparent;
}

.lovia__track {
  stroke: var(--nappe-creuse);
}

/* Le riz : un bord franc lisait comme un défaut de rendu. Il s'estompe vers le haut, comme un niveau. */
.lovia__rice {
  filter: blur(1.5px);
}

@media (prefers-reduced-motion: reduce) {
  .lovia__rice {
    filter: none;
  }
}

/* Bouton principal désactivé : le Sakay ne dit qu'« action » (§ 2) — un bouton qui n'agit pas n'est pas
   rouge. En aplat pâli il lisait « rose délavé » avec du blanc dessus à 2,5:1 ; il devient neutre, ce qui
   dit franchement « pas encore » au lieu d'un rouge éteint. */
.btn--primary[disabled] {
  opacity: 1;
  background: var(--surface-elevee);
  color: var(--texte-2);
  border: 1px solid var(--bordure);
}

.btn--primary[disabled] .icon {
  stroke: var(--texte-2);
}
/* ---------- Dernière passe visuelle avant mise en ligne (verdicts qa + critique, 2026-09-08) ----------
   Cinq écarts relevés sur les captures réelles : la sélection n'avait pas une seule forme, les noms
   se coupaient dans la recherche, la rangée de chips sortait de l'écran sans le dire, la courbe de
   poids ne portait aucune valeur, et quatre commandes passaient sous les 44 px. */

/* 1 — Une seule forme pour « sélectionné ». § 2 : « Sakay = action : bouton +, lien, sélection,
   focus ». Les chips et les activités suivaient déjà la règle ; les segments (Semaine/Jour du
   Journal, thème et langue des Réglages, sexe et but de Moi, repas de la feuille d'édition) disaient
   encore la sélection par un aplat d'encre doublé d'un liseré. Contour et texte en Sakay, fond
   transparent : le même geste se dessine pareil partout.
   Restent volontairement à l'encre, parce que le design system les décrit ainsi et qu'il ne s'agit
   pas d'un choix mais d'une position : l'onglet actif de la recherche (§ 7.7, trait 2 px sous le
   mot), le jour choisi de la ligne des jours (§ 7.3) et l'onglet actif de la nav basse (§ 7.4). */
.segment[aria-pressed="true"],
.segment--active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 0.5px var(--accent);
}

/* 2 — Le résultat de recherche : la sous-ligne prend toute la largeur, comme au croquis § 8.2.
   Coincée dans la colonne de gauche, à côté des kcal et du « + », elle se coupait sur « Riz gras au
   porc · lovia moyenne (250 g) ». Elle passe maintenant sous la ligne entière, au large : 306 px au
   lieu de 240 sur un écran de 390. La hauteur de ligne ne bouge quasiment pas (59 → 62 px). Le tap
   sur la sous-ligne ouvre toujours la quantité (écouteur ajouté dans src/screens/search.js). */
.result-row {
  display: grid;
  /* Les deux lignes sont déclarées explicitement : sans elles, `grid-row: 1 / -1` ne désigne aucune
     ligne de fin réelle et le « + » de 44 px se pose sur la première rangée, qu'il fait grandir
     d'autant. Et `row-gap: 0` annule le `gap` hérité de l'ancienne disposition en flex. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--e-2);
  row-gap: 0;
}

/* Le nom occupe la première ligne. Son rembourrage bas, repris par une marge négative égale, étend
   la zone tactile du bouton à 44 px sans rien déplacer : le débord tombe sur la sous-ligne, qui
   déclenche la même action. */
.result-row__main {
  grid-column: 1;
  grid-row: 1;
  padding-bottom: var(--e-4);
  margin-bottom: calc(var(--e-4) * -1);
}

/* Les kcal et le « + » restent sur la première ligne, à hauteur du nom. Le bouton fait 44 px : ses
   marges verticales négatives l'empêchent de creuser la rangée, et la sous-ligne se réserve sa
   largeur à droite pour ne jamais passer dessous. */
.result-row__kcal {
  grid-column: 2;
  grid-row: 1;
}

.result-row__add {
  grid-column: 3;
  grid-row: 1;
  margin-top: calc(var(--e-2) * -1);
  margin-bottom: calc(var(--e-2) * -1);
}

.result-row__sub {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-right: var(--h-cible);
  padding-bottom: var(--e-2);
  cursor: pointer;
}

/* Défaut antérieur à cette passe, relevé en mesurant : sur ordinateur, la colonne de droite n'a pas
   de marge d'écran pour absorber les marges négatives qui font « déborder optiquement » un bouton
   (le « + » d'un résultat, le « + 250 ml » de Rano). La colonne devenait défilable de 12 px
   (652 pour 640) et, au premier focus dans le champ de recherche, tout son contenu glissait vers la
   gauche — visible sur docs/screens/search-query-desktop.png. */
@media (min-width: 1024px) {
  .screen__aside .result-row__add,
  .screen__aside .water__add {
    margin-right: 0;
  }
}

/* 3 — La rangée de chips ne se coupe plus net au bord de l'écran : les derniers pixels s'estompent,
   ce qui dit « ça continue », et `.chips__end` garde le dégagement quand on a défilé jusqu'au bout.
   Le masque n'agit que sur l'opacité — aucune couleur n'est introduite (`currentColor` vaut l'encre
   héritée, donc un masque plein). Une rangée qui tient entièrement ne montre rien : le voile tombe
   alors sur le vide à droite de la dernière chip. */
.chips--scroll {
  -webkit-mask-image: linear-gradient(
    to right,
    currentColor calc(100% - var(--e-6)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    currentColor calc(100% - var(--e-6)),
    transparent 100%
  );
}

/* 4 — Graduations de l'axe vertical d'un graphique (Lanja : « 78,8 kg »). Chiffres tabulaires, en
   texte secondaire : l'axe situe la courbe sans jamais lui disputer le trait. */
.chart__axis {
  fill: var(--texte-2);
  font-family: var(--police);
  font-size: var(--t-legende);
  font-variant-numeric: var(--chiffres);
}

.reports__weight-legend {
  margin-bottom: var(--e-2);
}

/* 5 — Cibles tactiles : 44 px partout (§ 4), sans changer le dessin là où c'est possible.
   La chip et l'onglet grandissent vraiment (36 → 44 px de haut, 31 → 44 px de large) ; le repas
   cible et le badge d'estimation gardent leur place dans le flux grâce à des marges négatives
   égales à ce qu'ils gagnent. */
/* `flex: none` avant `min-width` : une largeur minimale explicite lève le `min-width: auto` d'un
   élément flex, qui se met alors à rétrécir sous son texte (« part familiale (180 g) » tombait de
   161 à 89 px). La chip ne rétrécit pas ; c'est la rangée qui défile. */
.chip {
  flex: none;
  min-height: var(--h-cible);
  min-width: var(--h-cible);
  justify-content: center;
}

.tab {
  min-width: var(--h-cible);
}

/* « Tous » passe de 31 à 44 px : sans compensation, la rangée déborderait de 15 px et le dernier
   onglet serait coupé au repos. L'écart entre onglets passe de 16 à 12 px sur téléphone — les cinq
   tiennent d'un bord à l'autre (388 px pour 390). La rangée reste défilable (§ 7.7). */
@media (max-width: 767px) {
  .search-tabs {
    column-gap: var(--e-3);
  }
}

/* Le repas cible sous « Ajouter » : 24 px dessinés, 44 px touchés. */
.search-head .search-meal {
  min-height: var(--h-cible);
  margin-top: calc((var(--h-cible) - var(--e-6)) / -2);
  margin-bottom: calc((var(--h-cible) - var(--e-6)) / -2);
}

/* Le badge « tombana » reste un mot souligné (§ 7.8, aucune boîte) : seule sa zone tactile grandit.
   Sa ligne fait `--e-3` de haut (interligne 1, corps `--t-legende`), d'où le calcul. La marge
   gauche tombe à 2 px : l'espace typographique qui précède désormais le mot (src/ui/badge.js)
   apporte le reste des 6 px prévus. */
.badge {
  padding-top: calc((var(--h-cible) - var(--e-3)) / 2);
  padding-bottom: calc((var(--h-cible) - var(--e-3)) / 2);
  margin-top: calc((var(--h-cible) - var(--e-3)) / -2);
  margin-bottom: calc((var(--h-cible) - var(--e-3)) / -2);
  margin-left: calc(var(--e-1) / 2);
}