/* VRAQUE, d'après le prototype de mai 2026 (Figma, P4).
 *
 * Fond presque noir, panneaux et cartes en gris chauds, caramel pour les
 * actions et les prix. Le thème est ce bloc de variables et rien d'autre : un
 * groupe change ses couleurs ici sans toucher au reste (docs/04, point 3).
 *
 * Polices libres (SIL OFL), servies par l'instance : Lexend Exa, grotesque
 * large, remplace Stinger du prototype ; Hanken Grotesk pour le texte. */

@font-face {
  font-family: "Lexend Exa";
  src: url("../fonts/LexendExa.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Ce qui ne change pas d'un mode d'affichage à l'autre */
  --display: "Lexend Exa", "Arial Black", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --radius-small: 14px;
  --tap: 48px;
  /* La grille des largeurs : toute page en prend une, rien d'autre.
     étroite (une colonne, le défaut), texte (lecture et formulaires), page
     (listes, catalogues), large (tableaux, tableaux de bord), boutique. */
  --w-narrow: 34rem;
  --w-text: 48rem;
  --w-page: 60rem;
  --w-wide: 76rem;
  --w-shop: 92rem;
  --column: var(--w-narrow);
  --sidebar: 15.5rem;
  --deep: #45170a; /* la barre du total */
  --accent-ink: #2b130a;
  --tile-ink: #231c19;
  --terracotta: #c8643c; /* le point de ce qui n'a pas été vu */
}

/* Le mode sombre, celui du prototype. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151312;
  --panel: #1d1b1a;
  --card: #2a2726;
  --card-hover: #332f2d;
  --line: #3a3532;
  --text: #f4f0ec;
  --text-soft: #c9c0b9;
  --muted: #8f8680;
  --accent: #a36f4d; /* caramel : actions, prix */
  --tile: #a99189; /* catégorie choisie */
  --ok: #2fba55;
  --hot: #ec5530; /* le total à payer */
  --decline: #c4574a; /* décliner, refuser : un contour bourgogne */
  --pre: #6f9be6; /* la précommande */
  --thumb: linear-gradient(145deg, #3b3532, #2f2a28);
}

/* Le mode clair, mêmes rôles. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f1ec;
  --panel: #ffffff;
  --card: #f3eee8;
  --card-hover: #ece5dd;
  --line: #e1d7cd;
  --text: #1c1917;
  --text-soft: #4c4540;
  --muted: #7d736c;
  --accent: #a36f4d;
  --tile: #dac8bf;
  --ok: #1d9142;
  --hot: #cf3d1b;
  --decline: #8e2b25;
  --pre: #2f5fc4;
  --thumb: linear-gradient(145deg, #e9e1d8, #ddd3c8);
}

/* Sans choix explicite, le mode de l'appareil. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f5f1ec;
    --panel: #ffffff;
    --card: #f3eee8;
    --card-hover: #ece5dd;
    --line: #e1d7cd;
    --text: #1c1917;
    --text-soft: #4c4540;
    --muted: #7d736c;
    --tile: #dac8bf;
    --ok: #1d9142;
    --hot: #cf3d1b;
    --decline: #8e2b25;
    --pre: #2f5fc4;
    --thumb: linear-gradient(145deg, #e9e1d8, #ddd3c8);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 1.1rem 7rem;
}

/* -- Titres ---------------------------------------------------------------- */

.title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 2.2rem 0 1rem;
}

.headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 7vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 1rem 0 1.4rem;
}

.headline span {
  display: block;
  color: var(--accent);
}

.overline {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -- En-tête ------------------------------------------------------------------ */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 0.4rem;
}

.round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-soft);
  text-decoration: none;
  border: 0;
}

.round svg {
  width: 20px;
  height: 20px;
}

.group-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-align: center;
  margin: 1.2rem 0 1.6rem;
}

/* -- La commande en cours ------------------------------------------------------- */

.current {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1.1rem;
}

.current .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  white-space: nowrap;
}

.badge.ok {
  background: rgba(47, 186, 85, 0.15);
  border-color: transparent;
  color: var(--ok);
}

.badge.pre {
  border-color: var(--pre);
  color: var(--pre);
}

.current .when {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0.5rem 0 0.2rem;
}

.current .day {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.current .sum {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--accent);
  white-space: nowrap;
}

.current p {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  color: var(--muted);
}

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

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 54px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.08);
}

/* La flèche dit « mène ailleurs » : seulement sur un lien, jamais sur un
   bouton qui enregistre ou bascule. */
a.button::after {
  content: "→";
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.1rem;
}

.button.plain::after {
  content: none;
}

.button.outline {
  background: transparent;
  border: 1.5px solid var(--hot);
  color: var(--hot);
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

/* « ghost » est l'ancien nom du bouton secondaire : il se dessine comme
   « alt » (contour caramel, même police, même casse). */
.button.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
}

.button.ghost:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  filter: none;
}

.button.outline::after,
.button.ghost::after {
  content: none;
}

.stack {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

/* -- Rayons ------------------------------------------------------------------------ */

.aisles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.3rem;
  margin: 1.6rem 0 0;
  background: var(--panel);
  border-radius: 999px;
}

.aisle {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.aisle[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.aisle.pre::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--pre);
  vertical-align: 0.08em;
}

/* -- Catégories ----------------------------------------------------------------------- */

.tiles {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  margin: 0 -1.1rem;
  padding: 0 1.1rem 0.3rem;
  scrollbar-width: none;
}

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

.tile {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.35rem;
  width: 6.4rem;
  height: 7.4rem;
  padding: 0.5rem;
  border: 1.5px solid var(--tile);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.tile b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  text-transform: none;
}

.tile.on {
  background: var(--tile);
  color: var(--tile-ink);
}

/* -- Listes ---------------------------------------------------------------------------- */

.list {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
  margin-bottom: 0.9rem;
  scroll-margin-top: 1rem;
}

.list > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 0.2rem;
  cursor: pointer;
  list-style: none;
}

.list > summary::-webkit-details-marker {
  display: none;
}

.list > summary::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.list[open] > summary::before {
  transform: rotate(45deg);
}

.list > summary h2 {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border: 1.5px solid var(--muted);
  border-radius: 999px;
  color: var(--text-soft);
  white-space: nowrap;
}

/* -- La carte produit ------------------------------------------------------------------------ */

.item {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.9rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--card);
  border-radius: var(--radius);
}

.thumb {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: var(--radius-small);
  background: var(--thumb);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--tile);
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item h3 {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}

.item .from {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.item .from .tag {
  color: var(--text-soft);
}

.from .supplier-link {
  display: inline;
  color: var(--text-soft);
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.from .supplier-link:hover {
  color: var(--accent);
}

.item .buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.item .price {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--accent);
  white-space: nowrap;
}

.item .price small {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0;
}

.item .note,
.item .container {
  grid-column: 2;
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.item .note {
  color: var(--hot);
  font-weight: 600;
}

.item .error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--hot);
}

/* -- Le compteur rond ---------------------------------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font: 700 1.2rem/1 var(--body);
  cursor: pointer;
}

.stepper button.minus {
  background: var(--tile);
}

.stepper button:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: default;
}

.stepper output {
  min-width: 1.8ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
}

.stepper.add button {
  width: auto;
  height: 34px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.74rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}


/* -- Le seuil d'une précommande --------------------------------------------------------------------- */

.threshold {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.threshold .bar {
  height: 4px;
  margin-top: 0.35rem;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.threshold .bar i {
  display: block;
  height: 100%;
  background: var(--pre);
  transition: width 0.3s ease;
}

/* -- La barre du total et les onglets ------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.dock > div {
  max-width: var(--column);
  margin: 0 auto;
}

.totalbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 1.1rem;
  padding: 0.75rem 0.8rem 0.75rem 1.4rem;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--deep);
}

.totalbar .sum {
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: -0.04em;
  color: var(--accent);
}

.totalbar .button {
  width: auto;
  min-height: 42px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), 1fr);
  gap: 0.4rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--panel);
  border-radius: var(--radius) var(--radius) 0 0;
}

.tabs a,
.tabs button {
  display: grid;
  place-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.3rem;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text-soft);
  font: 500 0.66rem var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.tabs svg {
  width: 24px;
  height: 24px;
}

.tabs [aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* -- Récapitulatif et confirmation --------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}

.panel > h2,
.panel > .panel-head > h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0.2rem 0.2rem 0.9rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--card);
  border-radius: var(--radius-small);
}

.line b {
  font-weight: 600;
}

.line small {
  grid-column: 1;
  font-size: 0.76rem;
  color: var(--accent);
}

.line .n {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
}

.line.deposit {
  background: transparent;
  border: 1px dashed var(--line);
}

.line.deposit b {
  font-weight: 500;
  color: var(--text-soft);
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.3rem 1.1rem;
  background: var(--panel);
  border-radius: var(--radius);
}

.total span {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.total strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  color: var(--hot);
}

.fees {
  margin: 0.4rem 0.3rem 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.facts {
  margin: 0;
  padding: 0.3rem 1.1rem;
  background: var(--panel);
  border-radius: var(--radius);
}

.facts div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.facts div:last-child {
  border-bottom: 0;
}

.facts dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.facts dd.hot {
  color: var(--hot);
}

.facts dd.ok {
  color: var(--ok);
  text-transform: uppercase;
  font-weight: 800;
}

.check {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 2rem auto 0;
  border-radius: 50%;
  background: var(--panel);
}

.check i {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  font-style: normal;
  font-weight: 900;
}

.center {
  text-align: center;
}

.thanks {
  margin: -0.8rem 0 1.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}

/* -- Connexion -------------------------------------------------------------------------------------- */

.logo {
  display: block;
  width: min(15rem, 70%);
  margin: 3.5rem auto 2.5rem;
  color: var(--text);
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.field {
  display: block;
  margin: 1.2rem 0;
}

.field span {
  display: block;
  margin: 0 0 0.45rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.field input {
  width: 100%;
  min-height: 52px;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.field input::placeholder {
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.messages {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.messages li {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-small);
  background: rgba(47, 186, 85, 0.14);
  color: var(--text);
  margin-bottom: 0.4rem;
}

.messages li.error {
  background: rgba(236, 85, 48, 0.16);
}

.muted {
  color: var(--muted);
}

.hint {
  font-size: 0.88rem;
  color: var(--muted);
}

.link {
  color: var(--text-soft);
}

/* -- Historique (organisateurs) ----------------------------------------------------------------------- */

main > h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.04em;
  margin: 1.4rem 0 1rem;
}

main > h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 2rem 0 0.6rem;
}

main > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

main > table th,
main > table td {
  padding: 0.5rem 0.4rem 0.5rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

main > table th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

td.n,
th.n {
  text-align: right;
  white-space: nowrap;
}

tr.boundary td {
  border-top: 2px solid var(--accent);
}

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 1rem 0;
}

.figures div {
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.figures strong {
  display: block;
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  text-transform: none;
  color: var(--text);
}

.unknown {
  color: var(--hot);
}

@keyframes bump {
  50% {
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* L'historique, sur grand écran, a besoin de place. */
@media (min-width: 720px) {
  .wide {
    --column: 64rem;
  }
}


/* -- La charpente : barre latérale à partir de la tablette, onglets en bas sur
 *    téléphone. Les trois espaces la partagent. -------------------------------- */

.shell {
  min-height: 100vh;
}

.sidebar {
  display: none;
}

.content {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 1.1rem 8rem;
}

.content.wide {
  --column: var(--w-wide);
}

.content.page {
  --column: var(--w-page);
}

.pagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0.2rem;
}

.pagehead .title {
  margin: 0.6rem 0 0.4rem;
}

.switch {
  display: flex;
  gap: 0.3rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.switch a {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-soft);
}

.switch a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text-soft);
  cursor: pointer;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar) 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100vh;
    padding: 1.4rem 1rem;
    background: var(--panel);
    border-right: 1px solid var(--line);
  }

  .sidebar .brand {
    display: block;
    width: 6.5rem;
    color: var(--text);
    margin: 0 0.4rem 0.6rem;
  }

  .sidebar .brand svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .sidebar .group {
    margin: 0 0.4rem 1.2rem;
    font-size: 0.82rem;
    color: var(--text-soft);
  }

  .sidebar .space-label {
    margin: 0.4rem 0.4rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .sidebar a.nav,
  .sidebar button.nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--text-soft);
    font: 500 0.95rem var(--body);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
  }

  .sidebar a.nav:hover,
  .sidebar button.nav:hover {
    background: var(--card);
  }

  .sidebar a.nav[aria-current="page"] {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  .sidebar svg {
    flex: none;
    width: 20px;
    height: 20px;
  }

  .sidebar .bottom {
    margin-top: auto;
    display: grid;
    gap: 0.3rem;
  }

  .content {
    padding: 0 2rem 3rem;
    margin: 0;
    max-width: none;
  }

  .content > .inner {
    max-width: var(--column);
    margin: 0 auto;
  }

  .content.wide > .inner {
    max-width: var(--w-wide);
  }

  .content.page > .inner {
    max-width: var(--w-page);
  }

  .dock .tabs {
    display: none;
  }

  .dock {
    left: var(--sidebar);
  }
}

/* -- Grilles et tableaux, pour l'organisation et le bureau ---------------------- */

.grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .grid.two {
    grid-template-columns: 1fr 1fr;
  }
  .grid.three {
    grid-template-columns: repeat(3, 1fr);
  }
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th,
.table td {
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.table td.n,
.table th.n {
  text-align: right;
  white-space: nowrap;
}

.table tr:hover td {
  background: var(--card);
}

.table a {
  text-decoration: none;
  font-weight: 600;
}

/* Sur téléphone, chaque ligne de tableau devient une carte. */
@media (max-width: 699px) {
  .table thead {
    display: none;
  }
  .table tr {
    display: block;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.6rem;
    border-radius: var(--radius-small);
    background: var(--card);
  }
  .table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 1rem;
    min-width: 0;
    padding: 0.25rem 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .table td:empty {
    display: none;
  }
  .table td[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .table tr:hover td {
    background: transparent;
  }

  /* Un tableau de deux ou trois colonnes courtes reste un tableau. */
  .table.keep tr {
    display: table-row;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
  }
  .table.keep td,
  .table.keep th {
    display: table-cell;
    padding: 0.4rem 0.4rem;
    border-bottom: 1px solid var(--line);
  }
}

.stat {
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.stat span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat strong {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.todo {
  list-style: none;
  margin: 0;
  padding: 0;
}

.todo li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.todo li.done {
  opacity: 0.55;
}

.button.small {
  width: auto;
  min-height: 38px;
  padding: 0 1rem;
  font-size: 0.7rem;
}

.inline-form {
  display: inline;
}

input.price,
input.qty,
select.input,
input.input,
textarea.input {
  min-height: 42px;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

input.price,
input.qty {
  width: 6.5rem;
  text-align: right;
}

.progress {
  height: 6px;
  border-radius: 6px;
  background: var(--line);
  overflow: hidden;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

@media (min-width: 900px) {
  .mobile-only {
    display: none !important;
  }
}

.current-order {
  margin: 0.8rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.current-order .when {
  margin: 0.3rem 0 0;
}

.add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0;
}

.add-row .input {
  flex: 1 1 14rem;
}

.thumbcell {
  width: 52px;
}

.thumbcell img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-size: 0.95rem;
}

.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="file"] {
  width: 100%;
}

/* -- La boutique sur grand écran : familles, produits, panier ---------------- */

.shop-families,
.basket-panel {
  display: none;
}

@media (min-width: 1150px) {
  .content.shopwide > .inner {
    max-width: var(--w-shop);
  }

  .shop-layout {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 20rem;
    gap: 2rem;
    align-items: start;
  }

  .shop-families,
  .basket-panel {
    display: block;
    position: sticky;
    top: 1.2rem;
    max-height: calc(100vh - 2.4rem);
    overflow-y: auto;
  }

  .shop-families {
    padding-top: 1.4rem;
  }

  .shop-families a {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.92rem;
    color: var(--text-soft);
  }

  .shop-families a span {
    color: var(--muted);
    font-size: 0.8rem;
  }

  .shop-families a:hover {
    background: var(--panel);
  }

  .shop-families a.on {
    color: var(--accent);
    font-weight: 700;
  }

  .shop-main .group-name {
    text-align: left;
  }

  .shop-main .tiles,
  .shop-main .title:first-of-type {
    display: none;
  }


  .basket-panel {
    margin-top: 1.4rem;
    padding: 1.2rem;
    border-radius: var(--radius);
    background: var(--panel);
  }

  .basket-panel .button {
    margin-top: 1rem;
  }

  .content.shopwide ~ .dock .totalbar,
  body:has(.shopwide) .dock .totalbar {
    display: none;
  }
}

.panel-kind {
  margin: 1rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.mini {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
}

.mini b {
  white-space: nowrap;
  font-weight: 600;
}

.mini.deposit {
  color: var(--muted);
  font-size: 0.82rem;
}

.mini.total-mini {
  margin-top: 0.6rem;
  border-bottom: 0;
  font-family: var(--display);
  font-size: 1.05rem;
}

.mini.total-mini b {
  color: var(--hot);
}

.stat strong.small {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* -- Les pages hors session : connexion, lien envoyé ------------------------ */

.public {
  position: relative;
  display: grid;
  /* Centrage vertical seulement : avec place-items, la colonne prendrait la
     largeur de la plus longue phrase et déborderait d'un écran de 390 px. */
  align-content: center;
  min-height: 100vh;
  min-height: 100svh; /* la barre d'adresse mobile n'est pas comptée */
  padding: 2.5rem 1.4rem calc(2.5rem + env(safe-area-inset-bottom));
}

.public-toggle {
  position: absolute;
  top: calc(1rem + env(safe-area-inset-top));
  right: 1rem;
}

.public-panel {
  width: 100%;
  max-width: 23rem;
  margin-inline: auto;
}

.public-panel .logo {
  width: min(12.5rem, 62%);
  margin: 0 auto 2.6rem;
}

.public-panel .headline {
  margin: 0 0 2.2rem;
}

.public-panel .field {
  margin: 0 0 1.4rem;
}

.public-panel form {
  margin-bottom: 1.8rem;
}

.public-panel .hint {
  margin: 0 0 0.8rem;
  line-height: 1.55;
}

/* -- Les téléphones étroits (390 px) ----------------------------------------- */

/* Les onglets se partagent la largeur, jamais plus : un libellé long
   (« Tableau de bord ») s'abrège plutôt que de pousser les autres hors champ. */
.tabs {
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.tabs a,
.tabs button {
  min-width: 0;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

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

/* Un menu déroulant ne prend pas la largeur de sa plus longue option. */
.add-row select.input,
.add-row input.input {
  min-width: 0;
  max-width: 100%;
}

.pagehead {
  flex-wrap: wrap;
}

/* Une adresse courriel ou un nom long se coupe plutôt que de déborder. */
.headline,
.headline span,
.line b {
  overflow-wrap: anywhere;
}

/* Les tableaux de l'historique défilent dans leur cadre sur téléphone. */
@media (max-width: 699px) {
  main > table {
    display: block;
    overflow-x: auto;
  }
}

/* La carte produit : la colonne du texte peut rétrécir, et le prix passe sous
   le nom plutôt que de pousser le compteur hors de l'écran. */
.item {
  grid-template-columns: 4.6rem minmax(0, 1fr);
}

.item .buy {
  flex-wrap: wrap;
  row-gap: 0.4rem;
}

.devbox {
  margin: 0 0 2rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-small);
}

.devbox .hint {
  margin: 0.3rem 0 0.9rem;
}

/* -- Boutique : rayons, étiquettes, affichage -------------------------------- */

.shop-head .headline {
  margin: 0.2rem 0 0.4rem;
}

.shop-head .hint {
  margin: 0 0 1.2rem;
}

.sections {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin: 0 -1.1rem;
  padding: 0 1.1rem 0.2rem;
  scrollbar-width: none;
}

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

.sections a {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.sections a small {
  font-weight: 500;
  color: var(--muted);
}

.sections a.on {
  box-shadow: inset 0 0 0 1.5px var(--tile);
}

.sections a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.sections a[aria-current="page"] small {
  color: var(--accent-ink);
  opacity: 0.7;
}

.toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.9rem 0 1.2rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip small {
  color: var(--muted);
  font-weight: 500;
}

.chip.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.viewswitch {
  flex: none;
  display: flex;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--panel);
}

.viewswitch a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border-radius: 999px;
  color: var(--muted);
}

.viewswitch a[aria-current="page"] {
  background: var(--card);
  color: var(--text);
}

.tile svg {
  width: 28px;
  height: 28px;
}

.tile {
  font-size: 0.72rem;
  gap: 0.55rem;
}

.list > summary svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.shop-families a {
  align-items: center;
  gap: 0.55rem;
}

.shop-families a svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.shop-families a .fam-name {
  flex: 1;
  color: inherit;
  font-size: inherit;
}

/* -- La carte produit, en grille ou en liste ------------------------------------ */

.items.grille {
  display: grid;
  /* Une colonne au téléphone : une carte seule ne laisse pas de vide à côté. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7rem;
  padding-bottom: 0.7rem;
}

@media (min-width: 640px) {
  .items.grille {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  }
}

.items.grille .item {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.items.grille .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.items.grille .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem 0.8rem 0.85rem;
}

.items.grille .buy {
  padding-top: 0.6rem;
}

/* Les cartes d'une rangée ont la même hauteur : l'espace en trop va au-dessus
   des notes, pas entre le nom et le prix. */
.items.grille .quick-notes {
  margin-top: auto;
  padding-top: 0.4rem;
}

.items.liste .item {
  grid-template-columns: 4.2rem minmax(0, 1fr);
}

.items.liste .thumb {
  width: 4.2rem;
  height: 4.2rem;
}

.item.chosen {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.item h3 .variant {
  font-weight: 500;
  color: var(--text-soft);
}

.item .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
}

.item .tags span {
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--panel);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.pre-badge {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--pre);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.item .with {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 0.76rem;
  color: var(--text-soft);
}

.item .with .jar {
  flex: none;
  color: var(--accent);
}

.item .with b {
  font-weight: 700;
}

.item .note.pre {
  color: var(--pre);
  font-weight: 500;
}

.item .note,
.item .error,
.item .threshold {
  margin-top: 0.4rem;
}

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0 0.8rem;
}

/* Une grille continue : les familles sont des titres qui courent sur toute la
   largeur, les produits se suivent sans trou. */
.items {
  display: grid;
  gap: 0.7rem;
}

.items.liste {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .items.liste {
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  }
}

.items > .item {
  margin: 0;
}

.fam-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem 0 0.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  scroll-margin-top: 1rem;
}

.fam-head:first-child {
  margin-top: 0.4rem;
}

.fam-head svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.fam-head span {
  flex: 1;
}

.fam-head small {
  font-family: var(--body);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.item .kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
}

.item .kicker .fam {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.item .kicker .pre-badge {
  margin: 0;
}

.tile.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.shop-families a[aria-current="page"] {
  background: var(--card);
  color: var(--text);
  font-weight: 700;
}

/* -- Le tri de la boutique ----------------------------------------------------------- */

.sorter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: -0.4rem 0 1rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.sorter label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sorter label > span {
  color: var(--muted);
  white-space: nowrap;
}

.sorter select {
  min-width: 0;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 600 0.85rem var(--body);
}

.sorter .sens {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 0.85rem var(--body);
  cursor: pointer;
}

.sorter .sorter-check input {
  accent-color: var(--accent);
}

.compare {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-soft);
}

/* -- L'index qui suit la lecture ----------------------------------------------------- */

.index-strip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin: 0 -1.1rem 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--bg);
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.index-strip::-webkit-scrollbar {
  display: none;
}

.index-strip a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.index-strip a svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.index-strip a.on {
  border-color: var(--tile);
}

.index-strip a.here,
.index-strip a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.index-strip a.here svg,
.index-strip a[aria-current="page"] svg {
  color: var(--accent-ink);
}

.shop-families {
  scroll-behavior: smooth;
}

.shop-families a.here {
  background: var(--card);
  color: var(--text);
  font-weight: 700;
}

.shop-families a.here svg {
  color: var(--accent);
}

@media (min-width: 1150px) {
  .shop-main .index-strip {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
}

/* Un titre de groupe : famille ou fournisseur, avec la fiche du fournisseur. */
header.fam-head {
  display: block;
  scroll-margin-top: 3.6rem;
}

header.fam-head h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font: inherit;
}

@media (min-width: 1150px) {
  header.fam-head {
    scroll-margin-top: 1rem;
  }
}

.supplier-about {
  max-width: 44rem;
  margin-top: 0.6rem;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--text-soft);
}

.supplier-about p {
  margin: 0 0 0.35rem;
}

.supplier-about .place {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.supplier-about a {
  color: var(--accent);
}

/* -- La liste compacte : une ligne de la hauteur de l'image -------------------------- */

.items.liste,
.items.liste.liste {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
}

.items.liste .item.line {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 0.8rem;
  padding: 0.35rem 0.6rem 0.35rem 0.35rem;
  margin: 0;
  border-radius: var(--radius-small);
}

.items.liste .item.line .thumb {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 10px;
}

.line-main {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.line-name,
.line-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.line-name {
  font-size: 0.98rem;
  font-weight: 600;
}

.line-name .variant {
  font-weight: 500;
  color: var(--text-soft);
}

.line-meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.line-meta .m ~ .m::before {
  content: "·";
  margin: 0 0.35rem;
}

/* Qui le fait : la marque et le fournisseur, à part des caractéristiques. */
.line-meta .who {
  margin-left: 0.55rem;
  font-style: italic;
  color: var(--text-soft);
}

.line-meta .who:first-child {
  margin-left: 0;
}

.line-meta .who .by::before {
  content: ", ";
}

/* Les étiquettes : l'icône, puis le libellé, que l'écran étroit abrège. */
.line-meta .tg {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.5rem;
  vertical-align: -1px;
}

.line-meta .tg svg {
  width: 12px;
  height: 12px;
  color: var(--accent);
}

@media (max-width: 560px) {
  .line-meta .tg .tl {
    display: none;
  }

  .line-meta .tg {
    margin-left: 0.3rem;
  }
}

.item .tags svg,
.line-more .tags svg {
  width: 13px;
  height: 13px;
  margin-right: 0.25rem;
  vertical-align: -2px;
  color: var(--accent);
}

.line-meta .jarmark svg {
  width: 13px;
  height: 13px;
  margin: 0 0.1rem 0 0.3rem;
  vertical-align: -2px;
  color: var(--accent);
}

.pre-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--pre);
  vertical-align: 0.1em;
}

.line-price {
  text-align: right;
}

.line-price .price {
  font-family: var(--display);
  font-size: 0.98rem;
  letter-spacing: -0.03em;
  color: var(--accent);
  white-space: nowrap;
}

.line-more {
  grid-column: 2 / -1;
  padding: 0.2rem 0 0.5rem;
}

.line-more .from {
  margin: 0;
}

.item.line.open {
  background: var(--card-hover);
}

.item.line .error {
  grid-column: 2 / -1;
}

.stepper.compact button {
  width: 32px;
  height: 32px;
}

.stepper.compact.add button {
  width: 32px;
  padding: 0;
  border-radius: 50%;
  font: 700 1.2rem/1 var(--body);
}

/* Sur un téléphone, le prix passe sous le compteur pour laisser le nom lisible. */
@media (max-width: 520px) {
  .items.liste .item.line {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0 0.6rem;
  }

  .items.liste .item.line .thumb {
    width: 3rem;
    height: 3rem;
  }

  .line-price {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 0.15rem;
  }

  .item.line > .stepper {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-self: end;
    padding-bottom: 0.1rem;
  }

  .item.line {
    min-height: 4.2rem;
  }
}

/* -- Les images : la photo entière, cadrée sur son sujet, sur la couleur de son fond -- */

.thumb.framed img {
  object-fit: contain;
}

/* -- La barre latérale : le logo en pleine largeur, le groupe en évidence ------------- */

@media (min-width: 900px) {
  .sidebar .brand {
    width: auto;
    margin: 0 0.4rem 0.9rem;
  }

  .sidebar .group {
    margin: 0 0.4rem 1.1rem;
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .sidebar .switch {
    margin-bottom: 0.6rem;
  }

  .sidebar .switch + .space-label {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
}

.phase {
  margin: 1.2rem 0;
  padding: 0.4rem 1rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}

.phase legend {
  padding: 0 0.4rem;
  font-weight: 700;
}

/* Hors vrac après sa clôture : visible, mais plus commandable. */
.item.closed .thumb img {
  opacity: 0.55;
}

.closed-qty {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.item .note.closed {
  color: var(--muted);
  font-weight: 500;
}

/* Un sous-type dans une famille : Vert, Noir, Tisane ; Chèvre, Vache. */
.sub-head {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* == Mouvement ======================================================================
   Peu, et toujours au service de la lecture : une page qui se pose, une ligne
   qui s'ouvre, un panier qui réagit. Rien quand l'appareil demande moins de
   mouvement. */

@view-transition {
  navigation: auto;
}

.sidebar {
  view-transition-name: sidebar;
}

.dock {
  view-transition-name: dock;
}

::view-transition-old(root) {
  animation: 160ms ease-in both fade-out;
}

::view-transition-new(root) {
  animation: 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both rise-in;
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  to {
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.reveal {
  animation: rise-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(min(var(--i, 0), 8) * 45ms);
}

/* Les produits arrivent en cascade, les premiers seulement. */
.items > .item {
  animation: rise-in 380ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.items > .item:nth-child(-n + 16) {
  animation-delay: calc(var(--n, 0) * 30ms);
}

.items > .item.bump {
  animation: none;
}


.item.chosen {
  transition: box-shadow 200ms ease;
}

.stepper button {
  transition: transform 120ms ease, background-color 160ms ease;
}

.stepper button:active:not(:disabled) {
  transform: scale(0.9);
}

.pulse {
  animation: pop 300ms ease, glow 600ms ease-out;
}

.button,
.chip,
.sections a,
.index-strip a,
.shop-families a,
.thread-row,
.space-card,
.talk-row {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease,
    transform 160ms ease;
}

.space-card:hover,
.thread-row:hover {
  transform: translateY(-2px);
}

/* Une ligne de la liste s'ouvre en glissant. */
.line-more {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows 240ms cubic-bezier(0.2, 0.7, 0.2, 1), padding 240ms ease;
}

.line-more > div {
  min-height: 0;
  overflow: hidden;
}

.item.line.open .line-more {
  grid-template-rows: 1fr;
  padding: 0.2rem 0 0.5rem;
}

.item.line {
  transition: background-color 200ms ease;
}

.nav-badge {
  animation: pop 400ms 300ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* == Le badge des non-lus =========================================================== */

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--hot);
  color: #fff;
  font: 700 0.68rem/1 var(--body);
  letter-spacing: 0;
}

.tabs .tab-icon {
  position: relative;
  display: grid;
  place-items: center;
}

.tabs .nav-badge {
  position: absolute;
  top: -6px;
  right: -12px;
  min-width: 1.05rem;
  height: 1.05rem;
  font-size: 0.6rem;
}

.tabs[style*="--n: 5"] a,
.tabs[style*="--n: 6"] a {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
}

/* == L'accueil du membre =========================================================== */

.hello .headline {
  margin: 0.2rem 0 1.2rem;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
}

.home-grid {
  display: grid;
  gap: 1rem;
}

.home-main,
.home-side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

@media (min-width: 1000px) {
  .home-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
    gap: 1.4rem;
  }
}

.timeline-card,
.order-card,
.announce-card,
.balance-card,
.talk-card,
.last-card {
  display: block;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.timeline-day {
  margin: 0.3rem 0 0.1rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: -0.02em;
}

.timeline-head .hint {
  margin: 0;
}

@property --fill {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@keyframes fill {
  from {
    --fill: 0%;
  }
}

.timeline {
  --fill: var(--progress);
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 1.3rem 0 0;
  padding: 0 0 0 1.6rem;
  list-style: none;
}

/* Le rail : vertical sur téléphone, horizontal dès qu'il y a la place. */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.4rem;
  width: 3px;
  border-radius: 3px;
}

.timeline::before {
  bottom: 0.4rem;
  background: var(--line);
}

.timeline::after {
  height: calc((100% - 0.8rem) * var(--fill) / 100%);
  background: var(--accent);
}

.step {
  position: relative;
  display: grid;
  gap: 0.1rem;
}

.step-dot {
  position: absolute;
  left: -1.6rem;
  top: 0.2rem;
  z-index: 1;
  width: 0.95rem;
  height: 0.95rem;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}

.step.done .step-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.step.now .step-dot {
  border-color: var(--accent);
  animation: glow 1.6s ease-out infinite;
}

.step b {
  font-size: 0.98rem;
}

.step.done b,
.step.done .step-dates {
  color: var(--muted);
}

.step.now b {
  color: var(--accent);
}

.step-dates {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}

.step-note {
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 700px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 1.6rem 0 0;
  }

  .timeline::before,
  .timeline::after {
    left: 0.4rem;
    right: auto;
    top: 0.42rem;
    width: auto;
    height: 3px;
  }

  .timeline::before {
    right: 0.4rem;
    bottom: auto;
  }

  .timeline::after {
    width: calc((100% - 0.8rem) * var(--fill) / 100%);
    height: 3px;
  }

  .step-dot {
    left: 0;
    top: -1.6rem;
  }

  .step {
    padding-right: 0.6rem;
  }
}

.order-card .head,
.talk-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.order-card p {
  margin: 0.3rem 0 0.9rem;
  color: var(--text-soft);
}

.order-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.order-sum strong {
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--accent);
}

.stack.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.stack.row .button {
  flex: 1 1 12rem;
}

.announce-card {
  display: grid;
  gap: 0.35rem;
  border: 2.5px dashed var(--accent);
  background: transparent;
}

.announce-card:hover {
  background: var(--card);
}

.announce-card b {
  font-size: 1.1rem;
}

.announce-body {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.balance-card {
  display: grid;
  gap: 0.3rem;
}

.balance-card strong {
  font-family: var(--display);
  font-size: 1.7rem;
}

.balance-card a,
.talk-card .head a {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.talk-row {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: var(--radius-small);
  color: inherit;
  text-decoration: none;
}

.talk-row:hover {
  background: var(--card);
}

.talk-row b {
  font-weight: 600;
  font-size: 0.95rem;
}

.talk-row span {
  font-size: 0.78rem;
  color: var(--muted);
}

.talk-row.unread b::after,
.thread-row .dot {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--hot);
  vertical-align: 0.15em;
}

.last-card p {
  margin: 0.4rem 0 0.2rem;
}

/* == Les discussions =============================================================== */

.page-intro .headline {
  margin: 0.2rem 0 0.4rem;
}

.page-intro .hint {
  margin: 0 0 1.2rem;
}

.crumbs {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.crumbs a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.disc-layout {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 1000px) {
  .disc-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.spaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.8rem;
}

.space-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.space-card:hover {
  background: var(--card);
}

.space-name {
  font-family: var(--display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.space-name .badge {
  font-family: var(--body);
  vertical-align: 0.15em;
}

.space-desc {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.space-meta {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.unread-count {
  color: var(--hot);
}

.recent .overline {
  margin: 0 0 0.6rem;
}

.threads,
.recent {
  display: grid;
  gap: 0.5rem;
}

.thread-row {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 2rem 0.85rem 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.thread-row:hover {
  background: var(--card);
}

.thread-title {
  font-weight: 600;
}

.thread-row.unread .thread-title {
  font-weight: 800;
}

.thread-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.thread-row .dot {
  position: absolute;
  top: 50%;
  right: 1rem;
  margin: -0.25rem 0 0;
}

.flag {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.05rem 0.45rem;
  border-radius: 6px;
  background: var(--card);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 0.12em;
}

.new-thread {
  margin-bottom: 1rem;
  max-width: 44rem;
}

.new-thread:not([open]) {
  padding: 0;
  background: none;
  border: 0;
}

.new-thread .button {
  display: inline-flex;
  width: auto;
}

.new-thread .field {
  margin: 0;
}

.new-thread .stack {
  gap: 0.7rem;
}

.new-thread > summary {
  list-style: none;
  cursor: pointer;
}

.new-thread > summary::-webkit-details-marker {
  display: none;
}

.new-thread[open] > summary {
  margin-bottom: 0.8rem;
}

.thread-headline {
  font-size: clamp(1.4rem, 5vw, 2rem);
}

.mod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.4rem 0 1.2rem;
}

.mod-actions .chip {
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.posts {
  display: grid;
  gap: 0.9rem;
  max-width: 48rem;
  margin-bottom: 1rem;
}

.post {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  transition: opacity 250ms ease, transform 250ms ease;
}

.post.htmx-swapping {
  opacity: 0;
  transform: translateX(-12px);
}

.post.arriving {
  animation: rise-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: hsl(var(--hue) 38% 42%);
  color: #fff;
  font-family: var(--display);
  font-size: 0.95rem;
}

.bubble {
  padding: 0.7rem 0.95rem 0.8rem;
  border-radius: 4px var(--radius-small) var(--radius-small) var(--radius-small);
  background: var(--panel);
}

.post.mine .bubble {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

.bubble header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}

.bubble time {
  font-size: 0.75rem;
  color: var(--muted);
}

.bubble form {
  margin-left: auto;
}

.post-hide {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease;
}

.post:hover .post-hide,
.post-hide:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .post-hide {
    opacity: 0.6;
  }
}

.post-body {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.post-body a {
  color: var(--accent);
}

.reply {
  position: sticky;
  bottom: 0.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
  max-width: 48rem;
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.18);
}

.reply textarea {
  min-height: 2.8rem;
  max-height: 14rem;
  resize: none;
}

.reply .send {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: transform 120ms ease;
}

.reply .send:active {
  transform: scale(0.9) rotate(-8deg);
}

.reply .error {
  grid-column: 1 / -1;
  margin: 0;
}

.reply .error:empty {
  display: none;
}

@media (max-width: 899px) {
  .reply {
    bottom: calc(5.4rem + env(safe-area-inset-bottom));
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.item .talk-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* == Bandeau, groupe ================================================================ */

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  margin: 0.6rem 0 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--hot) 16%, var(--panel));
  border: 1.5px solid var(--hot);
  color: var(--text);
  text-decoration: none;
}

.banner span {
  margin-left: auto;
  font-weight: 700;
  color: var(--hot);
}

.hot {
  color: var(--hot);
}

.flag.hot {
  background: var(--hot);
  color: #fff;
}

.hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.8rem;
}

.hub-tile {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-height: 9rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.hub-tile:hover {
  background: var(--card);
  transform: translateY(-2px);
}

.hub-tile svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
}

.hub-tile b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
}

.hub-tile span {
  font-size: 0.82rem;
  color: var(--text-soft);
}

/* == Bénévolat ======================================================================= */

.my-tasks {
  margin-bottom: 1.2rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: transparent;
  border: 2.5px dashed var(--ok);
}

.my-tasks ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.vol-day {
  margin-bottom: 1.4rem;
}

.vol-timeline {
  position: relative;
  display: grid;
  gap: 0.9rem;
  margin: 0.8rem 0 0;
  padding: 0 0 0 1.7rem;
  list-style: none;
}

.vol-timeline::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 3px;
  border-radius: 3px;
  background: var(--line);
}

.vol-task {
  position: relative;
}

.vol-dot {
  position: absolute;
  left: -1.7rem;
  top: 1.1rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
}

.vol-task.complete .vol-dot {
  border-color: var(--ok);
  background: var(--ok);
}

.vol-task.lead .vol-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.vol-task.open .vol-dot {
  border-color: var(--accent);
}

.vol-task.past {
  opacity: 0.55;
}

.vol-card {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.vol-card h3 {
  margin: 0.15rem 0 0;
  font-size: 1.08rem;
}

.vol-card .hint {
  margin: 0.2rem 0 0;
}

.vol-when {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.people {
  display: grid;
  gap: 0.35rem;
}

.people p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.people .role {
  min-width: 7.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.person {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 600;
}

.person.confirmed {
  background: color-mix(in srgb, var(--ok) 22%, var(--card));
}

.person.applied {
  border: 1.5px dashed var(--line);
  background: transparent;
}

.person small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--muted);
}

.person.missing {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}

.vol-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vol-actions .chip {
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.vol-form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
}

.vol-form .wide {
  grid-column: 1 / -1;
}

.vol-form .field {
  margin: 0;
}

.vol-form-actions {
  grid-column: 1 / -1;
}

.vol-plan .vol-signups {
  margin: 0.8rem 0;
}

.panel.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border: 1.5px solid var(--accent);
}

.panel.notice p {
  margin: 0;
}

/* == Sondages ======================================================================== */

.poll-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.poll-card {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.poll-card:hover {
  background: var(--card);
  transform: translateY(-2px);
}

.poll-card.urgent {
  box-shadow: inset 0 0 0 1.5px var(--hot);
}

.poll-card b {
  font-size: 1.05rem;
}

.poll-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.poll-form fieldset {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.poll-form legend {
  margin-bottom: 0.6rem;
}

.poll-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.poll-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.poll-option input {
  accent-color: var(--accent);
  width: 1.15rem;
  height: 1.15rem;
}

.poll-results {
  display: grid;
  gap: 0.8rem;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 0.8rem;
}

.bar-row.mine .bar-label {
  font-weight: 700;
}

.bar-n {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.bar-row .bar {
  grid-column: 1 / -1;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
}

.bar-row .bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--accent);
}

@keyframes grow {
  from {
    width: 0;
  }
}

.poll-comment {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-small);
  color: var(--text-soft);
}

/* == Calendrier ====================================================================== */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cal-layout {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 1200px) {
  .cal-layout {
    grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.cal {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.cal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
}

.cal-head .chip {
  font-size: 1rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal-dow {
  padding: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 6.4rem;
  padding: 0.35rem;
  border-radius: 8px;
  background: var(--card);
  min-width: 0;
}

.cal-day.out {
  opacity: 0.4;
}

.cal-day.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-num {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-soft);
}

.cal-full {
  display: none;
}

.ev {
  display: block;
  overflow: hidden;
  padding: 0.15rem 0.35rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
}

/* Un évènement se reconnaît à sa pastille de couleur. */
.ev::before,
.ev-line > :first-child::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--dot, var(--muted));
  vertical-align: 0.08em;
}

.legend .ev {
  display: inline-block;
  font-size: 0.75rem;
}

.ev small {
  font-weight: 500;
  color: var(--text-soft);
}

.ev.orders,
.ev-line.orders {
  --dot: var(--pre);
}

.ev.distribution,
.ev-line.distribution {
  --dot: var(--accent);
}

.ev.distribution {
  background: color-mix(in srgb, var(--accent) 30%, var(--panel));
}

.ev.volunteer,
.ev-line.volunteer {
  --dot: var(--ok);
}

.ev.poll,
.ev-line.poll {
  --dot: var(--hot);
}

.ev.tentative,
.ev-line.tentative {
  background: transparent;
  outline: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -1.5px;
  color: var(--text-soft);
}

.agenda {
  display: grid;
  gap: 1rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.agenda-day {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.agenda ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  background: var(--panel);
  font-size: 0.88rem;
}

.ev-line a {
  color: inherit;
  text-decoration: none;
}

.ev-line span {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.ev-line small {
  grid-column: 1 / -1;
  color: var(--muted);
}

/* Sur téléphone, la grille devient une liste des jours qui ont quelque chose. */
@media (max-width: 699px) {
  .cal-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cal-dow,
  .cal-day.empty,
  .cal-day.out {
    display: none;
  }

  .cal-day {
    min-height: 0;
  }

  .cal-full {
    display: inline;
    font-weight: 600;
  }

  .cal-n {
    display: none;
  }

  .ev {
    font-size: 0.8rem;
    white-space: normal;
  }
}


/* == La photo en grand, l'illustration ============================================== */

button.thumb {
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

.thumb.art {
  background: #f4f0ec;
}

.thumb.art img {
  object-fit: cover;
}

.imageswitch a {
  width: auto;
  padding: 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.lightbox {
  max-width: min(92vw, 44rem);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.7);
  backdrop-filter: blur(3px);
}

.lightbox[open] {
  animation: rise-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lightbox img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #fff;
}

.lightbox p {
  margin: 0;
  padding: 0.8rem 1.1rem 1rem;
  font-weight: 600;
}

.lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}


.item .note.weight {
  color: var(--text-soft);
  font-weight: 500;
}


/* Les classeurs d'avant VRAQUE, liés depuis l'historique. */
.files {
  white-space: nowrap;
}

.file {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-soft);
  text-decoration: none;
}

.file:hover span {
  text-decoration: underline;
}

.file.rival {
  opacity: 0.7;
}

.credit {
  color: var(--ok);
  font-weight: 600;
}


/* -- Les champs : jamais plus larges que leur case ----------------------------------- */

.vol-form .input,
.vol-form select,
.field .input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.add-task > summary {
  list-style: none;
  cursor: pointer;
}

.add-task > summary::-webkit-details-marker {
  display: none;
}

.add-task > summary h2::after {
  content: " +";
  color: var(--accent);
}

.add-task[open] > summary h2::after {
  content: " −";
}

.count-line b {
  font-size: 0.9rem;
}

/* -- Les menus déroulants, à l'image de l'interface ------------------------------------
   Le champ fermé est dessiné partout ; la liste ouverte l'est aussi là où le
   navigateur le permet (appearance: base-select), sinon elle reste celle du
   système. */

select,
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a36f4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  color: var(--text);
  font: 500 0.95rem var(--body);
  cursor: pointer;
  transition: border-color 160ms ease;
}

select:hover,
select:focus-visible {
  border-color: var(--accent);
  outline: none;
}

@supports (appearance: base-select) {
  select,
  select.input,
  ::picker(select) {
    appearance: base-select;
  }

  select::picker-icon {
    display: none;
  }

  ::picker(select) {
    margin-top: 0.3rem;
    padding: 0.35rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 14px 40px rgb(0 0 0 / 0.35);
  }

  select option {
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    font: 500 0.95rem var(--body);
  }

  select option:hover,
  select option:focus-visible {
    background: var(--card);
  }

  select option:checked {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
  }

  select option::checkmark {
    display: none;
  }
}


.todo-more {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.todo-more summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.todo-more ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

/* -- La distribution en cours --------------------------------------------------------- */

.current-dist .cd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.current-dist .headline {
  margin: 0.2rem 0 0;
}

.cd-phases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.cd-phases li {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-small);
  background: transparent;
  border: 2px dashed var(--line);
}

.cd-phases li.now {
  border: 2.5px dashed var(--accent);
}

.cd-phases li.done {
  opacity: 0.7;
}

.cd-phases span,
.cd-phases small {
  font-size: 0.85rem;
  color: var(--text-soft);
}

.cd-phases em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.grid.four {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
}

.phase-chip {
  display: inline-block;
  margin: 0.1rem 0.3rem 0.1rem 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--card);
  font-size: 0.78rem;
  color: var(--text-soft);
}

.phase-chip.open {
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  color: var(--text);
}

.table tr.product-row td {
  padding-top: 1rem;
  background: var(--panel);
}

/* -- Les réglages ------------------------------------------------------------------------ */

.settings-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0;
  background: var(--bg);
}

.settings-nav a {
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.settings-nav a:hover {
  border-color: var(--accent);
  color: var(--text);
}

.panel[id] {
  scroll-margin-top: 4rem;
}

.settings-form fieldset {
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
}

.settings-form legend {
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.settings-form .row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.6rem 0.9rem;
  align-items: end;
}

.settings-form .row > .wide,
.settings-form .row > .table,
.settings-form .row > .check-row {
  grid-column: 1 / -1;
}

.settings-form .field {
  margin: 0;
}

.table.compact td {
  padding: 0.35rem 0.5rem;
}

.qty.wide-time {
  width: 7.5rem;
}

.inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.inline-row .input,
.inline-row select {
  width: auto;
  min-width: 0;
  flex: 1 1 8rem;
  padding: 0.45rem 0.6rem;
}

.inline-row input[type="date"],
.inline-row input[type="time"] {
  flex: 0 1 9.5rem;
}

.inline-row.add {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.settings-table tr.cancelled {
  opacity: 0.55;
}

.settings-table td {
  padding: 0;
  border: 0;
}

.type-row {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(5, minmax(5rem, 1fr)) auto;
  gap: 0.5rem 0.8rem;
  align-items: end;
  margin: 0 0 0.8rem;
  padding: 0.9rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.type-row.archived {
  opacity: 0.55;
}

.type-row .field {
  margin: 0;
}

.type-row .wide {
  grid-column: 1 / -2;
}

.type-row .checks-col {
  display: grid;
  gap: 0.1rem;
}

.type-row .type-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .type-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-row .name,
  .type-row .wide,
  .type-row .checks-col,
  .type-row .type-actions {
    grid-column: 1 / -1;
  }
}

.access-row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr 2fr auto;
  gap: 0.6rem 1rem;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.access-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
}

.access-group .overline {
  width: 100%;
}

@media (max-width: 900px) {
  .access-row {
    grid-template-columns: 1fr;
  }
}

/* Les cases à cocher : à la taille du texte, alignées sur la première ligne. */
.check-row {
  align-items: center;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--accent);
}

.settings-form .field select,
.type-row select {
  width: 100%;
  padding: 0.55rem 2.2rem 0.55rem 0.7rem;
}

/* -- La fiche produit -------------------------------------------------------------------- */

.product-top {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1000px) {
  .product-top {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.4fr);
    align-items: start;
  }
}

.product-photo .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 0.8rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.7rem 0.9rem;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.form-grid .field,
.variant-fields .field {
  margin: 0;
}

.form-grid select,
.variant-fields select {
  width: 100%;
}

.chip-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.chip-checks legend,
.cert-edit legend {
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.chip-checks .field {
  flex-basis: 100%;
  margin-top: 0.4rem;
}

.chip-check {
  position: relative;
  cursor: pointer;
}

.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip-check span {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.chip-check input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Le contour de focus se dessine en dedans : la pastille choisie garde la
   hauteur des autres. */
.chip-check input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: -4px;
}

.variant-card {
  margin: 0 0 0.9rem;
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.variant-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.variant-card .variant-price {
  margin-left: auto;
  font-family: var(--display);
  color: var(--accent);
}

.variant-card.new > summary {
  cursor: pointer;
  list-style: none;
}

.variant-card.new[open] > summary {
  margin-bottom: 0.8rem;
}

.variant-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
}

.variant-fields .pair {
  display: flex;
  gap: 0.3rem;
}

.variant-fields .pair .input {
  flex: 1;
  min-width: 0;
}

.variant-fields .pair select {
  width: 4.5rem;
}

.variant-fields .weigh-toggle {
  align-self: center;
}

.variant-fields .weigh-only {
  display: none;
}

.variant-fields.weighed .weigh-only {
  display: grid;
}

.variant-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.variant-foot .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.periods summary,
.archived-list summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
}

.periods .table {
  margin-top: 0.5rem;
}

.periods tr.future td {
  color: var(--pre);
}

.archived-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.save-bar {
  position: sticky;
  bottom: 0.8rem;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 899px) {
  .save-bar {
    bottom: calc(5.6rem + env(safe-area-inset-bottom));
  }
}

.save-bar .button {
  width: auto;
  min-width: 16rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.variant-fields .input,
.form-grid .input {
  font-size: 0.95rem;
}

/* -- Le catalogue : tri, cases, modification groupée ------------------------------------- */

.sort-link {
  color: inherit;
  text-decoration: none;
}

.sort-link.on {
  color: var(--accent);
}

.bulk-bar {
  position: sticky;
  top: 0.6rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  border: 1.5px solid var(--line);
  opacity: 0.6;
  transition: opacity 160ms ease, border-color 160ms ease;
}

.bulk-bar.active {
  opacity: 1;
  border-color: var(--accent);
}

.bulk-bar select,
.bulk-bar .input {
  width: auto;
  min-width: 12rem;
  padding: 0.45rem 2.2rem 0.45rem 0.7rem;
}

.bulk-bar .hint {
  flex-basis: 100%;
  margin: 0;
}

.catalogue-table input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

.filters select {
  width: auto;
}

.member-day {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.member-day > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.member-day .table {
  margin-top: 0.6rem;
}

.member-day caption {
  text-align: left;
  padding: 0.3rem 0;
}

/* -- Le créateur de sondage et les questions ------------------------------------------- */

.builder {
  display: grid;
  gap: 1.2rem;
}

@media (min-width: 1100px) {
  .builder {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}

.builder-preview {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.preview-card {
  margin-top: 0.6rem;
  padding: 1.2rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.q-card {
  display: grid;
  gap: 0.6rem;
}

.q-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.q-num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.q-head select {
  width: auto;
  padding: 0.4rem 2.2rem 0.4rem 0.7rem;
}

.q-tools {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.q-tools .chip,
.q-options .chip,
.add-kinds .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.q-options {
  display: grid;
  gap: 0.4rem;
}

.q-option {
  display: flex;
  gap: 0.4rem;
}

.q-option .input {
  flex: 1;
}

.q-cond {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.q-cond .overline {
  grid-column: 1 / -1;
}

.q-cond select {
  width: 100%;
}

.add-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.poll-q {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.2rem;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.poll-q legend {
  margin-bottom: 0.5rem;
  font-size: 1.02rem;
}

.poll-q[hidden] {
  display: none;
}

.scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.scale small {
  color: var(--muted);
}

.scale-cell input {
  position: absolute;
  opacity: 0;
}

.scale-cell span {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-weight: 700;
  cursor: pointer;
}

.scale-cell input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rank-row select {
  width: 4.5rem;
  padding: 0.35rem 1.8rem 0.35rem 0.6rem;
}

.result-q {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.result-q h3 {
  margin: 0;
  font-size: 1rem;
}

.scale-bars {
  display: flex;
  align-items: end;
  gap: 0.5rem;
  height: 8rem;
}

.scale-bar {
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  flex: 1;
  height: 100%;
  max-width: 3.5rem;
}

.scale-bar i {
  align-self: end;
  width: 100%;
  height: var(--h);
  min-height: 2px;
  border-radius: 6px 6px 0 0;
  background: var(--accent);
  animation: rise-in 600ms ease both;
}

.scale-bar span {
  font-weight: 700;
}

.scale-bar small {
  color: var(--muted);
}

.row-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.row-actions .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.save-bar {
  gap: 0.6rem;
}

.save-bar .button.ghost {
  background: var(--panel);
}

.q-card .field {
  margin: 0;
}

/* == Le comptoir ============================================================================
   Une tablette sur la table de distribution : gros, lisible, un geste par touche. */

.content.counter-mode > .inner {
  max-width: none;
}

.counter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0.6rem 0 1rem;
}

.counter-title {
  margin: 0.1rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.counter-stats {
  margin: 0;
  color: var(--text-soft);
}

.counter-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .counter-layout {
    grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
    align-items: start;
  }

  .queue {
    position: sticky;
    top: 0.8rem;
    max-height: calc(100vh - 1.6rem);
    display: flex;
    flex-direction: column;
  }

  .queue-list {
    overflow-y: auto;
  }
}

.queue .input {
  width: 100%;
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

.queue-list {
  display: grid;
  gap: 0.3rem;
}

.q-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 0.6rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.q-row:hover,
.q-row.current {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.q-row[hidden] {
  display: none;
}

.q-dot {
  grid-row: span 2;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
}

.q-row.handed_over .q-dot {
  background: var(--pre);
}

.q-row.settled {
  opacity: 0.6;
}

.q-row.settled .q-dot {
  background: var(--ok);
}

.q-name {
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.q-due {
  font-family: var(--display);
  color: var(--accent);
}

.q-state {
  grid-column: 2 / -1;
  color: var(--muted);
}

.counter-panel {
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.counter-panel.empty {
  display: grid;
  place-items: center;
  min-height: 20rem;
}

.cp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.cp-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
}

.cp-lines {
  width: 100%;
  border-collapse: collapse;
}

.cp-lines td {
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.cp-name b {
  font-size: 1.05rem;
}

.cp-qty {
  white-space: nowrap;
}

.cp-qty form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

.cp-qty .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.cp-amount {
  font-family: var(--display);
  font-size: 1.05rem;
  white-space: nowrap;
}

.stepper.big button {
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
}

.stepper.big output {
  min-width: 2.2ch;
  font-size: 1.2rem;
}

.weigh-form .input {
  width: 6rem;
  padding: 0.5rem;
  text-align: right;
  font-size: 1.05rem;
}

.tag-mini {
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: var(--pre);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cp-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.8rem 0 1.2rem;
}

.cp-add select {
  flex: 1 1 16rem;
  width: auto;
}

.cp-add .input {
  width: 4.5rem;
}

.cp-containers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0 1.2rem;
}

.cp-container {
  display: grid;
  gap: 0.3rem;
  padding: 0.8rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.cp-container.dim {
  opacity: 0.5;
}

.cp-totals {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 1rem;
}

.cp-totals div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-soft);
}

.cp-totals dd {
  margin: 0;
  font-family: var(--display);
}

.cp-totals .due {
  padding-top: 0.6rem;
  border-top: 2px solid var(--line);
  font-size: 1.6rem;
  color: var(--text);
}

.cp-totals .due dd {
  color: var(--hot);
}

.methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.method input {
  position: absolute;
  opacity: 0;
}

.method span {
  display: grid;
  place-items: center;
  min-height: 3.2rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.method input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.pay-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.pay-row .field {
  margin: 0;
}

.pay-row .price {
  font-size: 1.3rem;
}

.cp-pay .button {
  width: 100%;
  min-height: 3.4rem;
}

.cp-later {
  margin-top: 0.6rem;
  text-align: center;
}

.cp-done {
  padding: 1rem;
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--ok) 18%, var(--panel));
  text-align: center;
  font-weight: 700;
}


/* Le comptoir est un mode à part : sans barre latérale, toute la largeur. */
@media (min-width: 900px) {
  .shell:has(.counter-mode) {
    grid-template-columns: 1fr;
  }

  .shell:has(.counter-mode) .sidebar {
    display: none;
  }
}

/* Dans la barre latérale : un espace par ligne, sur toute la largeur. */
.sidebar .switch {
  flex-direction: column;
  gap: 0.3rem;
  border-radius: var(--radius-small);
}

.sidebar .switch a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: calc(var(--radius-small) - 0.2rem);
  text-align: center;
}

.sidebar .switch a:not([aria-current]):hover {
  color: var(--text);
  background: var(--card);
}

@media (min-width: 900px) {
  .sidebar .group {
    text-align: center;
    font-size: 1.45rem;
    line-height: 1.15;
    text-wrap: balance;
  }
}

.role-pill {
  display: inline-block;
  white-space: nowrap;
  padding: 0.08rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* == Le bandeau de page ====================================================================
   En tête de chaque page : le titre de la section, en grand, et ses options.
   Sur ordinateur, sa hauteur répond au logo de la barre latérale, et une
   ligne les sépare tous deux du contenu ; il reste fixe en haut, et se resserre
   dès qu'on fait défiler. */

:root {
  --band-h: 10.6rem;
  --band-compact: 4.6rem;
  --stick: 0px; /* la hauteur à laisser libre sous le bandeau */
}

.band {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin: 0 -1.1rem 1.2rem;
  padding: 1rem 1.1rem 0.9rem;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
  transition: min-height 220ms ease, padding 220ms ease;
}

.band-text {
  min-width: 0;
}

.band-kicker,
.band-kicker a {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.band-kicker a:hover {
  color: var(--accent);
}

.band-kicker .crumbs {
  margin: 0;
}

.band-title {
  margin: 0.25rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  transition: font-size 220ms ease;
}

.band-hint {
  max-width: 52rem;
  margin-top: 0.4rem;
  overflow: hidden;
  max-height: 16rem;
  transition: max-height 220ms ease, opacity 220ms ease, margin 220ms ease;
}

.band-hint .hint {
  margin: 0;
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.band-actions .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.band.compact .band-hint {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

.band.compact .band-title {
  font-size: 1.5rem;
}

@media (min-width: 900px) {
  .band {
    min-height: var(--band-h);
    margin: 0 -2rem 1.6rem;
    padding: 1.4rem 2rem 1.1rem;
  }

  .band.compact {
    min-height: var(--band-compact);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }


  body:has(.band) {
    --stick: var(--band-compact);
  }

}

/* Ce qui colle en haut se range sous le bandeau resserré. */
.index-strip,
.settings-nav {
  top: var(--stick);
}

.bulk-bar {
  top: calc(var(--stick) + 0.6rem);
}

.builder-preview {
  top: calc(var(--stick) + 1rem);
}

@media (min-width: 1150px) {
  .shop-families,
  .basket-panel {
    top: calc(var(--stick) + 1.2rem);
    max-height: calc(100vh - var(--stick) - 2.4rem);
  }
}

/* L'ancien titre de page ne sert plus là où le bandeau le remplace. */
.shop-head.band .hint {
  margin: 0.4rem 0 0;
}


/* Les espaces de discussion : une ligne pleine chacun, avec sa grande icône. */
.spaces {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.space-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.space-row:hover {
  background: var(--card);
  transform: translateX(4px);
}

.space-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border: 2.5px dashed var(--accent);
  border-radius: 50%;
  color: var(--accent);
}

.space-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

.space-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.space-text .space-name {
  font-family: var(--display);
  font-size: 1.2rem;
}

/* Le dernier fil : le titre se coupe s'il le faut, la date reste lisible. */
.space-last {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.space-last > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.space-last > time {
  flex: none;
}

.space-last > time::before {
  content: "· ";
}

.space-count {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.space-count b {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--text);
}

.space-count em {
  font-style: normal;
  font-weight: 700;
  color: var(--hot);
}

@media (max-width: 520px) {
  .space-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .space-count {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    gap: 0.5rem;
  }

  .space-icon {
    width: 3rem;
    height: 3rem;
  }
}


/* L'ancien bouton « pill-btn » : le même que « button small » (plein) et
   « button small alt » (contour). */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.pill-btn.filled {
  background: var(--accent);
  color: var(--accent-ink);
}

.pill-btn.outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
}

.pill-btn.outline:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}


/* L'urgence : rouge, et en tête. */
.sev-pill {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 2px solid var(--line);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-soft);
  vertical-align: 0.1em;
}

.sev-pill.sev-urgent {
  border-color: var(--hot);
  background: var(--hot);
  color: #fff;
}

.sev-pill.sev-open {
  border: 2px dashed var(--accent);
  color: var(--accent);
}

.sev-pill.sev-lead {
  border-color: var(--pre);
  color: var(--pre);
}

.sev-pill.sev-complete {
  border-color: var(--ok);
  color: var(--ok);
}

.vol-task.sev-urgent .vol-card {
  border: 2.5px dashed var(--hot);
}

.vol-task.sev-urgent .vol-dot {
  border-color: var(--hot);
  background: var(--hot);
}

.urgent-card,
.urgent-dialog {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 1rem 1.2rem;
  border: 2.5px dashed var(--hot);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--hot) 10%, var(--bg));
  color: var(--text);
}

.urgent-head {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hot);
}

.urgent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid color-mix(in srgb, var(--hot) 30%, transparent);
  color: inherit;
  text-decoration: none;
}

.urgent-row span {
  grid-column: 1;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.urgent-row em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-weight: 700;
  color: var(--hot);
}

.urgent-dialog {
  max-width: min(92vw, 30rem);
}

.urgent-dialog::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.urgent-dialog[open] {
  animation: rise-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Le point de la ligne de temps, centré sur la hauteur de sa tâche. */
.vol-dot {
  top: 50%;
  transform: translateY(-50%);
}

/* -- Les fiches de protocole ------------------------------------------------------------ */

.prose {
  max-width: 50rem;
  line-height: 1.6;
}

.prose h2 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.3rem;
}

.prose h3 {
  margin: 1.2rem 0 0.4rem;
  font-size: 1.05rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
}

.prose li {
  margin: 0.2rem 0;
}

.prose li::marker {
  color: var(--accent);
}

.prose table {
  border-collapse: collapse;
}

.prose td,
.prose th {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
}

.notice-dashed {
  border: 2.5px dashed var(--accent);
  background: transparent;
}

.proposal {
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}

.proposal summary {
  cursor: pointer;
}

.proposal-body {
  max-height: 24rem;
  overflow: auto;
  padding: 0.8rem;
  border-radius: var(--radius-small);
  background: var(--card);
  white-space: pre-wrap;
  font: 0.85rem/1.5 ui-monospace, monospace;
}

.md-editor {
  font: 0.9rem/1.55 ui-monospace, "SF Mono", monospace;
  resize: vertical;
}

.protocol-general {
  margin-top: 1.5rem;
}

.protocol-general summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.protocol-general a {
  display: inline-block;
  margin: 0.5rem 0.6rem 0 0;
  color: var(--accent);
}

.protocol-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}


/* -- Mon compte, profils ----------------------------------------------------------------- */

/* Mon compte : des panneaux en maçonnerie, sans trou. */
.account-grid {
  columns: 2 24rem;
  column-gap: 1rem;
  margin-top: 1rem;
}

.account-grid > * {
  break-inside: avoid;
  margin: 0 0 1rem;
}

.privacy select {
  width: 100%;
}

.order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 1rem;
  padding: 0.7rem 0.8rem;
  margin: 0 -0.8rem;
  border-radius: var(--radius-small);
  color: inherit;
  text-decoration: none;
}

a.order-row:hover {
  background: var(--card);
}

.order-row span {
  grid-column: 1;
  font-size: 0.82rem;
  color: var(--muted);
}

.order-row strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--display);
  color: var(--accent);
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.seg input {
  position: absolute;
  opacity: 0;
}

.seg span {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.seg input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.seg input:focus-visible + span {
  outline: 2px solid var(--accent);
}

.privacy td:first-child {
  white-space: nowrap;
  padding-right: 1rem;
}

.profile-list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
}

.profile-list dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-list dd {
  margin: 0.15rem 0 0;
}

ul.plain {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
}

.bubble .author {
  color: inherit;
  text-decoration: none;
}

.bubble .author:hover b {
  text-decoration: underline;
}

/* -- L'accueil en panneaux ------------------------------------------------------------- */

.home-tools {
  display: flex;
  justify-content: flex-end;
  margin: -0.4rem 0 0.6rem;
}

.home-tools .chip,
.panel-tools .chip,
.arrange-bar .chip {
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

/* L'accueil en deux colonnes, 2/3 et 1/3, chacune empilée à sa hauteur
   (maçonnerie) ; chaque panneau se met en page selon la largeur de sa
   colonne (requêtes de conteneur). Sur téléphone, une colonne, dans l'ordre
   choisi. */
.home-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.home-col {
  display: contents;
}

.home-col > .home-panel {
  order: var(--i);
}

.home-panel {
  container-type: inline-size;
  min-width: 0;
}

@media (min-width: 1000px) {
  .home-panels {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }

  .home-col {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
  }

  .home-col > .home-panel {
    order: 0;
  }

  .arrange-bar {
    grid-column: 1 / -1;
  }
}

.home-panel > section,
.home-panel > a {
  box-sizing: border-box;
}

.panel-tools,
.arrange-bar,
.hidden-note {
  display: none;
}

.home-panel.is-hidden {
  display: none;
}

.arranging .home-panel.is-hidden {
  display: block;
  opacity: 0.5;
}

.arranging .panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius-small);
}

.arranging .hidden-note {
  display: block;
}

.arranging .home-panel {
  cursor: grab;
}

.arranging .home-panel.dragging {
  opacity: 0.4;
}

.panel-tools .grip {
  font-size: 1.1rem;
  color: var(--accent);
}

.panel-tools .panel-name {
  margin-right: auto;
  font-weight: 700;
}

.arranging .arrange-bar {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  grid-column: 1 / -1;
}

.group-card {
  display: grid;
  gap: 0.5rem;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.group-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
}

.group-card p {
  margin: 0;
  color: var(--text-soft);
}

.group-facts {
  display: grid;
  gap: 0.45rem;
  margin: 0.3rem 0;
}

.group-facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.group-facts dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}

.group-facts a,
.group-card .more {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.88rem;
}

/* -- Les fiches de préférences d'achat --------------------------------------------------- */

.habit-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.habit-label {
  font-weight: 600;
}

.habit-scales {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
}

@media (max-width: 760px) {
  .habit-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .habit-scales {
    justify-items: start;
  }
}



.row-edit summary {
  list-style: none;
  cursor: pointer;
  background: transparent;
  font-size: 0.8rem;
}

.row-edit[open] form {
  margin-top: 0.5rem;
}

/* Sur téléphone, les espaces se rangent deux par ligne. */
.switch.mobile-only {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius-small);
}

.switch.mobile-only a {
  padding: 0.55rem 0.4rem;
  border-radius: calc(var(--radius-small) - 0.2rem);
  text-align: center;
}

/* Le bandeau et sa ligne vont d'un bord à l'autre de la zone de page, au-delà
   de la colonne centrée ; .content coupe ce qui dépasse, sans gêner l'adhérence. */
.content {
  overflow-x: clip;
}

.band {
  border-bottom: 0;
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax);
}

.band::after {
  content: "";
  position: absolute;
  left: -100vmax;
  right: -100vmax;
  bottom: 0;
  height: 1.5px;
  background: var(--line);
}

/* Le bénévolat récurrent. */
.vol-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
}

.vol-offer .check-row {
  font-size: 0.86rem;
  color: var(--text-soft);
}

.reconfirm-ask {
  flex-basis: 100%;
  margin: 0;
}

.person .recur {
  color: var(--accent);
  font-weight: 700;
}

.my-tasks form.inline {
  display: inline;
  margin-left: 0.3rem;
}

.my-tasks .overline + ul {
  margin-top: 0.4rem;
}

.recurring-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 1.2rem;
}

/* == Le sommaire de la distribution en cours ==============================================
   Sous le bandeau, sur chaque page des espaces Membre et Gestionnaire : des
   cases côte à côte, séparées d'un pointillé, et la ligne du temps dessous. */
.dist-summary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  margin: -0.4rem 0 1.4rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  overflow: hidden;
}

.ds-cell {
  display: grid;
  align-content: start;
  gap: 0.1rem;
  padding: 0.8rem 1rem 1rem;
  color: inherit;
  text-decoration: none;
  border-right: 1.5px dotted var(--line);
  min-width: 0;
}

.ds-cell:last-child {
  border-right: 0;
}

a.ds-cell:hover {
  background: var(--card);
}

.ds-k {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ds-cell b {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-cell > span:last-child {
  font-size: 0.8rem;
  color: var(--text-soft);
}

.ds-day b {
  color: var(--accent);
}

.ds-urgent {
  color: var(--danger, #e8553a);
}

.ds-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line);
}

.ds-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  background: var(--accent);
}

@media (max-width: 899px) {
  .dist-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-cell {
    border-right: 0;
    border-bottom: 1.5px dotted var(--line);
  }
}

/* == Le petit « i » : l'explication au survol ou au toucher ================================ */
.info {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.2rem;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: italic 700 0.7rem/1 Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: 0.1em;
  cursor: help;
}

.info:hover,
.info:focus-visible {
  color: var(--accent);
}

.info::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  width: max-content;
  max-width: 17rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-small);
  background: var(--text);
  color: var(--bg);
  font: 500 0.8rem/1.4 var(--body);
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.3rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.info:hover::after,
.info:focus::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* == La fiche d'une tâche, côté gestion ==================================================== */
.vol-plan {
  display: grid;
  gap: 1.1rem;
}

.vp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding-bottom: 0.9rem;
  border-bottom: 1.5px dotted var(--line);
}

.vp-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.vp-sev {
  margin-left: auto;
}

/* L'encadré d'une tâche urgente : le pointillé rouge, comme chez les membres. */
.vol-plan.is-urgent {
  box-shadow: inset 0 0 0 2.5px transparent;
  border: 2.5px dashed var(--hot);
  background: color-mix(in srgb, var(--hot) 6%, var(--panel));
}

.vp-grid {
  display: grid;
  gap: 1.4rem 2.2rem;
}

@media (min-width: 1100px) {
  .vp-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .vp-team {
    padding-left: 2.2rem;
    border-left: 1.5px dotted var(--line);
  }
}

.vp-sub {
  margin: 0 0 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.vp-form,
.vp-team {
  display: grid;
  align-content: start;
  gap: 0.8rem;
}

.vp-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.6rem 0.8rem;
  align-items: end;
}

.vp-check {
  align-self: center;
  padding-top: 1rem;
}

.vp-more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
}

.vp-more summary::-webkit-details-marker {
  display: none;
}

/* Le + et le − sont dessinés, pas écrits : un caractère ne tombe jamais
   au centre exact du cercle. */
.vp-more summary::before {
  content: "";
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  border: 1.5px dashed var(--line);
  border-radius: 50%;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 0.6rem 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 0.6rem no-repeat;
}

.vp-more[open] summary::before {
  background: linear-gradient(var(--accent), var(--accent)) center / 0.6rem 2px no-repeat;
}

.vp-more .vp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: center;
}

.vp-more .vp-row select {
  flex: 1 1 100%;
}

/* Dans les fiches condensées, les champs se serrent : la grille fait l'espace. */
.vp-form .field {
  margin: 0;
}

.vp-more[open] summary {
  margin-bottom: 0.5rem;
}

.vp-actions {
  display: flex;
}

.vp-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.vp-assign {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.8rem;
  border-top: 1.5px dotted var(--line);
}

.vp-assign .vp-label,
.vp-assign select[name="membre"] {
  grid-column: 1 / -1;
}

.vp-attendance {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1.5px dotted var(--line);
}

.vp-present {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.vp-present .input {
  flex: 0 0 6rem;
}

.vp-cancel {
  display: flex;
  justify-content: flex-end;
}

.link-danger {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-danger:hover {
  color: var(--danger, #e8553a);
}


/* == Les boutons d'action, tous du même format =============================================
   Un <button class="chip"> n'a plus le fond gris du navigateur. « Décliner »,
   « refuser », « annuler » : le même bouton que l'action principale, vide, au
   contour bourgogne. L'enveloppe dit qu'un courriel part. */
button.chip {
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

button.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* Une puce choisie (fond --text) garde son texte --bg au survol : sinon le
   texte prend la couleur du fond. */
button.chip.on:hover {
  color: var(--bg);
}

.button.decline {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--decline);
  color: var(--decline);
}

.button.decline::after {
  content: none;
}

.button.decline:hover {
  background: color-mix(in srgb, var(--decline) 14%, transparent);
  filter: none;
}

.button .mail-ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.button.mail::after {
  content: none;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.pair .button {
  width: 100%;
}

/* La mise en place, condensée ; « Modifier » ouvre le formulaire. */
.vp-setup {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.vp-facts {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.vp-facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
}

.vp-facts dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.vp-facts dd {
  margin: 0;
  font-size: 0.92rem;
}

.vp-edit > summary {
  list-style: none;
  justify-self: start;
  display: inline-flex;
}

.vp-edit > summary::-webkit-details-marker {
  display: none;
}

.vp-edit[open] > summary {
  margin-bottom: 0.9rem;
}

.vp-edit .vp-form {
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--bg);
}

/* Une personne de l'équipe, et ses boutons de réponse. */
.vp-person {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.vp-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
}

.vp-who .muted {
  font-size: 0.84rem;
}

.vp-note {
  flex-basis: 100%;
}

.vp-assign {
  grid-template-columns: minmax(0, 1fr);
}

.vp-assign .vp-row {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: center;
}

.vp-cancel > summary {
  justify-self: end;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  list-style: none;
}

.vp-cancel > summary::-webkit-details-marker {
  display: none;
}

.vp-cancel {
  display: grid;
}

.vp-cancel form {
  display: grid;
  gap: 0.5rem;
  justify-items: end;
  margin-top: 0.6rem;
}

.vp-cancel .input {
  width: 100%;
}

.protocol-admin {
  display: grid;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.protocol-admin li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.protocol-admin li .button {
  margin-left: auto;
}

.supplier-card {
  display: grid;
  gap: 0.9rem;
}

.supplier-card .vp-head small {
  margin-left: auto;
}

.band-actions .chip.on {
  background: var(--text);
  color: var(--bg);
}

/* Le bandeau qui se resserre ne doit pas faire corriger le défilement par le
   navigateur : c'est ce qui le faisait battre. */
body:has(.band) {
  overflow-anchor: none;
}

/* Les tâches, côté gestion : une ligne chacune, ouverte au besoin. */
details.vol-plan {
  gap: 0;
}

details.vol-plan[open] {
  gap: 1.1rem;
}

details.vol-plan > summary {
  list-style: none;
  cursor: pointer;
  padding-bottom: 0;
  border-bottom: 0;
}

details.vol-plan > summary::-webkit-details-marker {
  display: none;
}

details.vol-plan[open] > summary {
  padding-bottom: 0.9rem;
  border-bottom: 1.5px dotted var(--line);
}

.vp-date {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.vp-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.vp-chevron {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.4rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-0.15rem);
  transition: transform 160ms ease;
}

details.vol-plan[open] .vp-chevron {
  transform: rotate(225deg) translateY(-0.1rem);
}

details.vol-plan:not([open]) {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

details.vol-plan > summary:hover .vp-title {
  color: var(--accent);
}

details.vol-plan:not([open]) .vp-title {
  font-size: 1.05rem;
}

details.vol-plan {
  scroll-margin-top: calc(var(--stick) + 1rem);
}


.add-task > summary h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* Une tâche complétée : en retrait, sans encadré d'urgence. */
details.vol-plan.is-done:not([open]) {
  opacity: 0.62;
}

details.vol-plan.is-done:not([open]):hover {
  opacity: 1;
}

details.vol-plan.is-done .vp-title {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--muted);
}

.vp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.vp-foot > form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
}

.vp-foot .vp-cancel {
  margin-left: auto;
}

/* Le mot joint à un courriel : une vraie boîte, qui grandit avec le texte. */
.message-box {
  width: 100%;
  min-height: 5.2rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-small);
  line-height: 1.45;
  resize: vertical;
}

/* « Lui écrire » décoché : pas de courriel, donc ni boîte ni enveloppe. */
.vp-assign:not(:has(input[name="avertir"]:checked)) .message-box,
.vp-assign:not(:has(input[name="avertir"]:checked)) .mail-ico {
  display: none;
}

/* La barre de mise en forme de l'éditeur de fiches. */
.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.md-toolbar button {
  min-width: 2.4rem;
  padding: 0.35rem 0.7rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: 600 0.8rem/1 var(--body);
  cursor: pointer;
}

.md-toolbar button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.retire-protocol {
  margin-top: 2rem;
}

/* Un menu à cocher : une ligne qui résume, une liste qui s'ouvre dessous. */
.multi-pick {
  position: relative;
}

.multi-pick > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
}

.multi-pick > summary::-webkit-details-marker {
  display: none;
}

.multi-pick > summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-0.15rem);
}

.multi-pick > summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-menu {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 20rem;
  overflow: auto;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.multi-menu .field {
  margin: 0.4rem 0 0;
}

.other-pick select,
.other-pick .input {
  width: 100%;
}

.other-pick .input {
  margin-top: 0.4rem;
}

.field .multi-pick > summary span {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.field .multi-pick > summary {
  min-height: 2.6rem;
}

.multi-pick > summary {
  min-height: 42px;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--bg);
}

.multi-pick > summary:hover,
.multi-pick[open] > summary {
  border-color: var(--accent);
}

.multi-menu .check-row {
  margin: 0;
  padding: 0.3rem 0;
}

.other-pick select {
  min-height: 42px;
}

.multi-menu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.multi-menu > * {
  flex: none;
}

.multi-menu input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  padding: 0;
}

/* == Préférences d'achat : des barres à crans ===============================================
   Chaque échelle est une barre ; on choisit un cran, la barre se remplit
   jusqu'à lui. Le cran de gauche est le plus faible. */
.habit-scales {
  display: grid;
  gap: 0.35rem;
  justify-items: stretch;
}

.fader {
  display: grid;
  grid-template-columns: 5.6rem 15rem 12.5rem 1.6rem;
  align-items: center;
  gap: 0.8rem;
}

.fader-name {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.fader-track {
  --fader: 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.8rem;
}

.fader-track::before,
.fader-track::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0.7rem;
  right: 0.7rem;
  height: 4px;
  border-radius: 2px;
}

.fader-track::before {
  background: var(--line);
}

.fader-track::after {
  background: var(--accent);
  transform: scaleX(var(--fader));
  transform-origin: left center;
  transition: transform 180ms ease;
}

.fader-none {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fader-stop {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 100%;
  cursor: pointer;
}

.fader-stop input {
  position: absolute;
  opacity: 0;
}

.fader-stop::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.fader-stop:hover::before {
  border-color: var(--accent);
}

.fader-stop:has(~ .fader-stop input:checked)::before {
  border-color: var(--accent);
  background: var(--accent);
}

.fader-stop:has(input:checked)::before {
  width: 1.2rem;
  height: 1.2rem;
  border-color: var(--accent);
  background: var(--text);
}

.fader-stop:has(input:focus-visible)::before {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fader-value {
  font-size: 0.86rem;
  color: var(--text-soft);
}

.fader.set .fader-value {
  color: var(--text);
  font-weight: 600;
}

.fader-clear {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  visibility: hidden;
}

.fader.set .fader-clear {
  visibility: visible;
}

.fader-clear:hover {
  color: var(--decline);
}

@media (max-width: 1100px) {
  .fader {
    grid-template-columns: 4.6rem minmax(0, 1fr) 1.6rem;
  }

  .fader-value {
    grid-column: 2;
    grid-row: 2;
    margin-top: -0.3rem;
    font-size: 0.8rem;
  }
}

/* La répartition des réponses, dans la synthèse : une barre empilée. */
.spread-bar {
  display: flex;
  min-width: 10rem;
  height: 1.3rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
}

.spread-bar span {
  display: grid;
  place-items: center;
  min-width: 1.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) var(--mix, 100%), var(--line));
}

.spread-bar .lvl-0 { --mix: 30%; }
.spread-bar .lvl-1 { --mix: 45%; }
.spread-bar .lvl-2 { --mix: 60%; }
.spread-bar .lvl-3 { --mix: 75%; }
.spread-bar .lvl-4 { --mix: 88%; }
.spread-bar .lvl-5 { --mix: 100%; }

/* == Le point de ce qui n'a pas été vu =====================================================
   Un petit point terracotta au coin de la boîte ; il s'en va au clic. */
[data-unseen] {
  position: relative;
}

[data-unseen]::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  right: 0.55rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--terracotta, #c8643c);
  box-shadow: 0 0 0 3px var(--panel);
  pointer-events: none;
  animation: unseen-in 420ms ease both;
}

@keyframes unseen-in {
  from { transform: scale(0); }
  60% { transform: scale(1.3); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-unseen]::after {
    animation: none;
  }
}

/* == La vitrine publique ===================================================================
   Une page éditoriale, hors de la charpente de l'application : de grands
   titres numérotés, le prochain rendez-vous comme un billet. */
.vitrine {
  --vt-width: 72rem;
  counter-reset: vt-section;
  min-height: 100vh;
  padding: 0 clamp(1.1rem, 4vw, 3rem) 4rem;
}

.vt-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  max-width: var(--vt-width);
  margin: 0 auto;
  padding: 0.9rem 0;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line);
}

.vt-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.95rem;
  text-decoration: none;
}

.vt-logo {
  display: block;
  width: 3rem;
  color: var(--text);
}

.vt-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.vt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  margin-left: auto;
}

.vt-nav a {
  color: var(--text-soft);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.vt-nav a:hover {
  color: var(--accent);
}

.vt-top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vt-hero,
.vt-section,
.vt-join,
.vt-foot {
  max-width: var(--vt-width);
  margin: 0 auto;
}

.vt-hero {
  padding: clamp(3rem, 10vw, 7rem) 0 3rem;
}

.vt-kicker {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.vt-title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8.5vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.vt-lede {
  max-width: 38rem;
  margin: 1.6rem 0 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-soft);
}

.vt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}

.vt-actions .button {
  width: auto;
}

.vt-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  margin: 3.5rem 0 0;
  border-top: 1.5px solid var(--line);
}

.vt-figures > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.2rem;
  padding: 1.1rem 1.2rem 0 0;
}

.vt-figures dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.vt-figures dt {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.vt-section {
  padding: 3.5rem 0 1rem;
  border-top: 1.5px solid var(--line);
}

.vt-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.vt-num::before {
  /* Les sections se numérotent seules : 01, 02… selon celles montrées. */
  counter-increment: vt-section;
  content: counter(vt-section, decimal-leading-zero);
}

.vt-num {
  font-family: var(--display);
  font-size: 0.9rem;
  color: var(--accent);
}

.vt-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  text-transform: none;
}

.vt-note {
  max-width: 44rem;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Le billet du prochain rendez-vous. */
.vt-ticket {
  display: grid;
  gap: 1.5rem 2.5rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .vt-ticket {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.4fr);
    align-items: center;
  }
}

.vt-when {
  display: grid;
  gap: 0.3rem;
}

.vt-day {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--accent);
}

.vt-hours {
  font-size: 1.1rem;
  font-weight: 600;
}

.vt-place {
  color: var(--text-soft);
  text-underline-offset: 0.2em;
}

.vt-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-step {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-small);
  background: var(--panel);
}

.vt-step span {
  font-size: 0.86rem;
}

.vt-step small {
  color: var(--muted);
}

.vt-step.now {
  background: var(--accent);
  color: var(--accent-ink);
}

.vt-step.now small {
  color: var(--accent-ink);
  font-weight: 700;
}

.vt-step.done {
  opacity: 0.55;
}

/* Comment ça marche : quatre temps. */
.vt-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-how li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.vt-how-n {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px dashed var(--accent);
  border-radius: 50%;
  font-family: var(--display);
  color: var(--accent);
}

.vt-how h3 {
  margin: 0.3rem 0 0;
  font-size: 1.1rem;
}

.vt-how p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Les rayons : de grands nombres. */
.vt-shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.8rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.vt-shelves li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
}

.vt-shelves b {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
}

.vt-shelves span {
  color: var(--text-soft);
  text-transform: capitalize;
}

.vt-suppliers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.vt-supplier {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-small);
  background: var(--panel);
}

.vt-supplier h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
}

.vt-supplier p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.5;
  font-size: 0.92rem;
}

.vt-supplier .vt-meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.vt-supplier a {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.vt-tasks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px dotted var(--line);
}

.vt-tasks li {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.vt-tasks span {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.vt-faq {
  display: grid;
  max-width: 50rem;
}

.vt-faq details {
  border-bottom: 1.5px dotted var(--line);
}

.vt-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}

.vt-faq summary::-webkit-details-marker {
  display: none;
}

.vt-faq summary::after {
  content: "+";
  color: var(--accent);
  font-family: var(--display);
}

.vt-faq details[open] summary::after {
  content: "−";
}

.vt-faq .prose {
  padding: 0 0 1.2rem;
  color: var(--text-soft);
}

.vt-join {
  margin-top: 3.5rem;
  padding: clamp(1.6rem, 5vw, 3rem);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
}

.vt-join h2 {
  margin: 0 0 0.8rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-transform: none;
}

.vt-join p,
.vt-join .prose {
  max-width: 40rem;
  line-height: 1.55;
}

.vt-join .button {
  background: var(--accent-ink);
  color: var(--accent);
}

.vt-join .button.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent-ink);
  color: var(--accent-ink);
}

.vt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.vt-foot a {
  color: var(--text-soft);
}

@media (max-width: 760px) {
  .vt-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .vt-top-actions {
    margin-left: auto;
  }
}

.vt-nav a {
  white-space: nowrap;
}

/* La bulle de commentaire d'une ligne des préférences d'achat. */
.habit-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease, color 140ms ease, border-color 140ms ease;
}

.comment-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}

.habit-row:hover .comment-toggle,
.comment-toggle:focus-visible {
  opacity: 1;
}

.comment-toggle:hover {
  color: var(--accent);
  border-color: var(--line);
}

.habit-row.has-comment .comment-toggle {
  opacity: 1;
  color: var(--accent);
}

.habit-row.has-comment .comment-toggle svg {
  fill: color-mix(in srgb, var(--accent) 30%, transparent);
}

.habit-comment {
  grid-column: 1 / -1;
  min-height: 3.2rem;
}

.habit-old-note {
  margin-top: 0.8rem;
}

/* L'annonce de l'accueil : tout se range en haut, rien ne s'étire. */
.announce-card {
  align-content: start;
  gap: 0.6rem;
  padding: 1.3rem 1.4rem;
}

.announce-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.announce-card .announce-title {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.announce-body {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 48rem;
}

.announce-more {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
}

/* == Les statuts : une pastille, une couleur par sens =====================================
   now : en cours ; ok : fait, confirmé ; wait : à venir, à confirmer ;
   warn : attention ; off : retiré, annulé. */
.pill-status {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.62rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.pill-status.now {
  background: var(--accent);
  color: var(--accent-ink);
}

.pill-status.ok {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
}

.pill-status.wait {
  border-color: var(--accent);
  color: var(--accent);
}

.pill-status.warn {
  background: color-mix(in srgb, var(--hot) 16%, transparent);
  color: var(--hot);
}

.pill-status.off {
  border-color: var(--line);
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

/* Les anciennes pastilles suivent le même code : ce qui attend, en contour
   caramel ; ce qui est fait, en vert. Plus de gris. */
.badge {
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

.badge.ok {
  border-color: transparent;
}

/* Le bénévolat urgent de l'accueil : on s'y propose sans changer de page. */
.urgent-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.75rem 0;
}

.urgent-title {
  color: inherit;
  text-decoration: none;
}

.urgent-title:hover b {
  color: var(--accent);
}

.urgent-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.urgent-actions .pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.urgent-actions .button {
  width: auto;
}

@media (min-width: 900px) {
  .urgent-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .urgent-row em {
    grid-column: 2;
  }

  .urgent-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0 0 0 1rem;
  }
}

/* La seconde action d'une paire : le même bouton, vide, au contour caramel. */
.button.alt {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
}

.button.alt::after {
  content: none;
}

.button.alt:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  filter: none;
}

/* Le logo du groupe ; VRAQUE ne signe qu'en bas : « Propulsé par ». */
.vt-group-logo {
  display: block;
  max-height: 2.6rem;
  width: auto;
}

.powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: var(--vt-width, 72rem);
  margin: 2rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.powered-logo {
  display: inline-block;
  width: 2.4rem;
  color: var(--text-soft);
}

.powered-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Le formulaire d'adhésion. */
.join-hero {
  padding-bottom: 1.5rem;
}

.join-form {
  display: grid;
  gap: 1.2rem;
  max-width: var(--vt-width);
  margin: 0 auto;
}

.join-form > * {
  max-width: 52rem;
}

.join-hero .vt-title {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.join-how {
  max-width: 44rem;
  margin-top: 1rem;
  color: var(--text-soft);
}

.vt-top-actions:only-child,
.vt-brand + .vt-top-actions {
  margin-left: auto;
}

.join-form .button {
  justify-self: start;
  width: auto;
}

.join-trap {
  position: absolute;
  left: -9999px;
}

.join-rules {
  padding: 1.2rem 1.4rem;
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius);
}

.join-rules h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: none;
}

.vt-rules {
  max-width: 48rem;
}

.logo-field img {
  display: block;
  max-height: 4rem;
  width: auto;
  margin: 0.2rem 0 0.4rem;
  padding: 0.5rem;
  border-radius: var(--radius-small);
  background: var(--bg);
}

/* Les demandes d'adhésion, en tête de la page des membres. */
.applicants {
  display: grid;
  gap: 0.6rem;
  border: 2.5px dashed var(--accent);
}

.applicants h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.applicant {
  padding: 0.8rem 0;
  border-top: 1.5px dotted var(--line);
}

.applicant > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.applicant > summary::-webkit-details-marker {
  display: none;
}

.applicant[open] > summary {
  margin-bottom: 0.8rem;
}

.applicant-actions {
  display: grid;
  gap: 1.2rem 2rem;
  margin-top: 1rem;
}

@media (min-width: 1100px) {
  .applicant-actions {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

.sidebar .brand.group-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.sender-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 1rem;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1.5px dotted var(--line);
}

.sender-row .field {
  flex: 1 1 18rem;
  margin: 0;
}

.sender-row > span {
  padding-bottom: 0.6rem;
}

/* La règle d'attribution. */
.method-choices {
  display: grid;
  gap: 0.6rem;
}

.method-choice {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  cursor: pointer;
}

.method-choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.method-choice input {
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.method-choice span {
  display: grid;
  gap: 0.2rem;
}

.method-choice small {
  color: var(--text-soft);
  line-height: 1.45;
}

.tie-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem 0.8rem;
}

/* L'attribution d'un cycle : une ligne par offre, ouverte au besoin. */
details.alloc-row > summary {
  list-style: none;
  cursor: pointer;
}

details.alloc-row > summary::-webkit-details-marker {
  display: none;
}

details.alloc-row[open] .vp-chevron {
  transform: rotate(225deg) translateY(-0.1rem);
}

details.alloc-row:not([open]) .vp-title {
  font-size: 1.05rem;
}

.alloc-supply {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.alloc-supply .input {
  width: 6rem;
}

details.alloc-row.cut {
  border: 2px dashed color-mix(in srgb, var(--hot) 60%, transparent);
}

.alloc-row tr.short td:last-child b {
  color: var(--hot);
}

.save-bar.pair {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.save-bar.pair .button {
  width: auto;
}

/* Les raccourcis clavier : les lettres dans la barre, si la personne le veut. */
.key-hint {
  display: none;
  margin-left: auto;
  padding: 0.05rem 0.4rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font: 600 0.66rem/1.4 var(--body);
  color: var(--muted);
}

@media (pointer: fine) and (min-width: 900px) {
  body[data-shortcut-hints] .sidebar .key-hint {
    display: inline-block;
  }

  body[data-shortcut-hints] .sidebar .switch .key-hint {
    margin-left: 0.5rem;
  }
}

.keys-dialog {
  max-width: min(92vw, 28rem);
  padding: 1.6rem;
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.keys-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.keys-dialog h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
}

.keys-list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.keys-list > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.8rem;
}

.keys-list dd {
  margin: 0;
  color: var(--text-soft);
}

kbd {
  padding: 0.05rem 0.4rem;
  border: 1.5px solid var(--line);
  border-bottom-width: 2.5px;
  border-radius: 6px;
  font: 600 0.8rem/1.4 var(--body);
}

[aria-current="page"] > .key-hint {
  border-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
  color: var(--accent-ink);
}

/* Les questions du formulaire d'adhésion. */
.join-q {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0 0;
  border: 0;
  border-top: 1.5px dotted var(--line);
}

.join-q legend {
  padding: 0;
  font-weight: 700;
  font-size: 1rem;
}

.join-q .hint {
  margin: 0;
}

.join-head {
  margin: 0.4rem 0 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.join-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.join-other {
  max-width: 28rem;
}

.join-q.kind-consent {
  padding-top: 0.6rem;
}

.join-q .consent {
  align-items: flex-start;
  margin: 0;
  line-height: 1.45;
}

.join-q .consent input {
  margin-top: 0.2rem;
}

/* Le champ de fichier, habillé : un bouton et le nom du fichier choisi. */
.file-pick {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  max-width: 100%;
}

.file-pick .button {
  width: auto;
}

.file-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--muted);
}

.file-pick.chosen .file-name {
  color: var(--text);
  font-weight: 600;
}

.field .file-pick,
.field .file-name {
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}

.field .file-pick {
  display: inline-flex;
}

.field .file-name {
  display: inline;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
}

.field .file-pick.chosen .file-name {
  color: var(--text);
  font-weight: 600;
}

.key-hint {
  flex: none;
  white-space: nowrap;
}

/* L'éditeur Markdown commun : les onglets, la barre, l'aperçu. */
.md-box {
  display: grid;
  gap: 0.4rem;
}

.md-box .md-toolbar {
  margin: 0;
  align-items: center;
}

.md-tabs {
  display: inline-flex;
  margin-right: 0.4rem;
  padding: 0.15rem;
  border-radius: 999px;
  background: var(--bg);
}

.md-tabs button {
  min-width: 0;
  border: 0;
}

.md-tabs button.on {
  background: var(--accent);
  color: var(--accent-ink);
}

.md-box.previewing .md-toolbar > button {
  visibility: hidden;
}

.md-preview {
  min-height: 5.2rem;
  padding: 0.8rem 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-small);
}

.field .md-box span,
.field .md-preview span {
  display: inline;
  margin: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

/* L'icône de coche, en SVG. */
.check-ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.12em;
}

.sev-pill .check-ico {
  margin-right: 0.3rem;
}

.check .check-ico {
  width: 1.4em;
  height: 1.4em;
}

/* « Marquer comme complétée » : un bouton du même format, au contour vert. */
.button.done {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--ok);
  color: var(--ok);
}

.button.done::after {
  content: none;
}

.button.done:hover {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  filter: none;
}

/* Ajouter : une ligne de la même taille que les autres, au contour, le + en avant. */
details.add-task {
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--line);
}

details.add-task:hover,
details.add-task[open] {
  border-color: var(--accent);
}

details.add-task > summary.add-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  font-size: 1.05rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

details.add-task > summary::-webkit-details-marker {
  display: none;
}

details.add-task[open] > summary.add-line {
  border-bottom: 1.5px dotted var(--line);
}

details.add-task > form {
  padding: 1rem 1.2rem 1.2rem;
}

.add-plus {
  position: relative;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

.add-plus::before,
.add-plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform 160ms ease;
}

.add-plus::before {
  width: 100%;
  height: 3px;
}

.add-plus::after {
  width: 3px;
  height: 100%;
}

details[open] > summary .add-plus::after {
  transform: scaleY(0);
}

/* Les menus déroulants : le texte décollé du bord. */
select,
select.input {
  padding-left: 0.95rem;
}

.new-type {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.oneoff {
  display: grid;
  gap: 0.7rem;
  margin: 2rem 0;
}

/* Le comptoir, sur tous les écrans. */
.counter-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}

.ok-text {
  color: var(--ok);
}

.counter-stats form {
  display: inline;
}

.counter-layout > * {
  min-width: 0;
}

.cp-back {
  display: none;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Sous 900 px : la file, ou la fiche d'un membre, une à la fois. */
@media (max-width: 899px) {
  .counter-layout:has(.counter-panel:not(.empty)) .queue {
    display: none;
  }

  .counter-layout:not(:has(.counter-panel:not(.empty))) .counter-panel {
    display: none;
  }

  .cp-back {
    display: inline-block;
  }

  .counter-head .stack.row {
    width: 100%;
  }

  .counter-head .stack.row .button {
    flex: 1 1 10rem;
  }

  /* Une ligne d'article : le nom en haut, les gestes et le montant dessous. */
  .cp-lines,
  .cp-lines tbody,
  .cp-lines tr {
    display: block;
  }

  .cp-lines tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 0.8rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
  }

  .cp-lines td {
    display: block;
    padding: 0;
    border: 0;
  }

  .cp-lines .cp-name {
    grid-column: 1 / -1;
  }

  .cp-lines .cp-qty {
    flex-wrap: wrap;
  }

  .cp-add {
    flex-wrap: wrap;
  }

  .cp-add select {
    flex: 1 1 100%;
  }

  .cp-containers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ajouter un article au comptoir : chercher, ou parcourir. */
.cp-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pick-search {
  position: relative;
  flex: 1 1 18rem;
}

.pick-search .input {
  width: 100%;
}

.pick-list {
  position: absolute;
  z-index: 15;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  max-height: 22rem;
  overflow: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--card);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pick-list button,
.browse-grid button {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pick-list button span,
.browse-grid button span {
  margin-left: auto;
  color: var(--accent);
  font-weight: 700;
}

.pick-list button:hover,
.browse-grid button:hover {
  background: var(--bg);
}

.cp-add .input[name="quantite"] {
  width: 4.5rem;
}

.cp-add .button {
  width: auto;
}

.browse-dialog {
  width: min(94vw, 52rem);
  max-height: 86vh;
  padding: 1.2rem;
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.browse-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.browse-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.browse-dialog h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
}

.browse-dialog > .input {
  width: 100%;
  margin-bottom: 0.6rem;
}

.browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.browse-grid button {
  flex-direction: column;
  align-items: flex-start;
  background: var(--card);
}

.browse-grid button span {
  margin-left: 0;
}

.browse-grid [hidden],
.pick-list [hidden] {
  display: none;
}

.till-left > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.till-left > summary::-webkit-details-marker {
  display: none;
}

.till-left p {
  margin: 0.8rem 0 0;
  line-height: 1.7;
}

.till-left a {
  color: var(--text);
}

/* La commande en direct, sur le téléphone du membre. */
.live-card {
  max-width: 36rem;
  margin: 2rem auto 0;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.live-title {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
}

.live-lines {
  display: grid;
  gap: 0;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.live-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.live-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ok);
  font-weight: 700;
}

.live-qr {
  display: grid;
  place-items: center;
  margin: 1rem 0;
}

.live-qr svg {
  width: min(70vw, 16rem);
  height: auto;
  border-radius: 12px;
}

.live-link {
  text-align: center;
  word-break: break-all;
}

/* Les comparaisons de prix. */
.price-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem 1.2rem;
  align-items: center;
  padding: 0.8rem 0;
  border-top: 1.5px dotted var(--line);
}

.price-check img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 10px;
}

.price-check-text {
  display: grid;
  gap: 0.3rem;
}

.prices-table details.obs summary {
  cursor: pointer;
  font-size: 0.8rem;
}

.prices-table details.obs ul {
  margin: 0.3rem 0 0;
  padding-left: 1rem;
  font-size: 0.8rem;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.plain-list {
  margin: 0;
  padding-left: 1rem;
  line-height: 1.8;
}

.saving-pill {
  margin-left: 0.4rem;
}

.line-price .saving,
.buy .saving {
  display: block;
  color: var(--ok);
  font-size: 0.72rem;
  font-weight: 700;
}

.saving-note {
  border: 2px dashed var(--ok);
  background: transparent;
}

.saving-note b {
  color: var(--ok);
}

/* La centrale d'achat. */
.order-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.order-line-row:hover {
  background: var(--card);
}

.po-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.po-steps li {
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.po-steps li.now {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.supplier-block .table td:first-child {
  width: 2rem;
}

.budget-row {
  align-items: end;
}

.pill-status.low {
  border-color: var(--line);
  color: var(--text-soft);
}

/* « Plus », sur téléphone : le reste de l'espace. */
.tab-more {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: 700 0.6rem/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.tab-more.current {
  color: var(--accent);
}

.dock-more {
  width: min(92vw, 24rem);
  margin: auto auto 1rem;
  padding: 1.2rem;
  border: 2.5px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.dock-more::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.dock-more nav {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.6rem;
}

.dock-more nav a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-small);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.dock-more nav a svg {
  width: 1.3rem;
  height: 1.3rem;
}

.dock-more nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Mes avis : les pastilles d'un produit, côte à côte. */
.feedback-row .vp-sev {
  display: flex;
  gap: 0.3rem;
}

/* Bénévolat : les rôles tenus, mois par mois. */
.role-history > summary {
  cursor: pointer;
  list-style: none;
}

.role-history > summary h2 {
  display: inline;
  margin: 0;
}

.role-history > summary::after {
  content: " +";
  color: var(--muted);
  font-weight: 700;
}

.role-history[open] > summary::after {
  content: " −";
}

.table-scroll {
  overflow-x: auto;
}

.role-history td {
  font-size: 0.86rem;
  vertical-align: top;
}

/* La vitrine en images : le bandeau, une photo par section, la galerie. */
.vt-figure {
  margin: 0 0 1.6rem;
}

.vt-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--card);
}

.vt-figure.wide {
  margin: 2.6rem 0 0;
}

.vt-figure.wide img {
  aspect-ratio: 21 / 9;
}

.vt-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.vt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.vt-gallery .vt-figure {
  margin: 0;
}

.vt-gallery .vt-figure img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-small);
}

@media (max-width: 640px) {
  .vt-figure.wide img {
    aspect-ratio: 4 / 3;
  }
}

/* Réglages : les images de la vitrine et les palettes. */
.image-row > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.image-row > summary img {
  width: 4.5rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 8px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.swatches legend {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
}

.swatch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.swatch:has(input:checked) {
  border-color: var(--text);
}

.swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.swatch-chips {
  display: flex;
}

.swatch-chips i {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -0.3rem;
  border: 2px solid var(--panel);
  border-radius: 50%;
}

.swatch-chips i:first-child {
  margin-left: 0;
}

/* Le paiement en ligne : la page en direct et les réglages. */
.live-pay {
  margin: 1.2rem 0 0.4rem;
}

.live-pay .button {
  width: 100%;
}

.live-message {
  margin: 1rem auto 0;
  max-width: 34rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.live-message.error {
  color: var(--hot);
}

.pay-facts {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.pay-facts div {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.pay-facts dt {
  min-width: 8rem;
  color: var(--muted);
}

.pay-facts dd {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}

/* Réglages › Catalogue : les sources ouvertes de prix. */
.open-source {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.open-source .hint {
  margin: 0.2rem 0 0;
}

/* L'annonce de l'accueil garde sa hauteur, même à côté d'un panneau plus long. */
.home-panel[data-key="announcement"] {
  align-self: start;
}

.home-panel > a.announce-card {
  height: auto;
}

/* La boutique fermée : un message au centre de la page. */
.shop-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.9rem;
  min-height: calc(100vh - 8rem);
  min-height: calc(100dvh - 8rem);
  text-align: center;
}

.shop-empty .headline {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1.1;
}

.shop-empty p {
  max-width: 32rem;
  margin: 0;
  color: var(--text-soft);
}

/* Le récapitulatif : changer la quantité tant que la phase est ouverte. */
.line-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  grid-column: 1 / -1;
}

.line-step span {
  min-width: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.line-closed {
  grid-column: 1 / -1;
}

.shop-layout:has(.shop-empty) {
  display: block;
}

.shop-empty .button {
  justify-self: center;
  width: auto;
}

/* La prochaine ouverture : deux cases, quand et pour quelle distribution. */
.reopen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem;
  width: min(100%, 34rem);
  margin: 0.4rem 0 0.6rem;
  text-align: left;
}

.reopen > div {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
}

.reopen dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reopen dd {
  margin: 0.3rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.reopen dd small {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 400;
}

/* Le règlement : les engagements acceptés, cochés. */
.consents {
  display: grid;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.consents li {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 0.7rem;
  line-height: 1.5;
}

.consents svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: var(--ok);
}

.rules-part .group-facts dd {
  line-height: 1.5;
}

/* Accueil : la dernière distribution, comparée à la commande en cours. */
.last-card {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.last-card p {
  margin: 0;
}

.last-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.last-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.05rem;
}

.last-total {
  font-weight: 700;
}

.last-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.last-stats > div {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.last-stats dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.last-stats dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
}

.last-stats .down {
  color: var(--ok);
}

.last-stats .up {
  color: var(--hot);
}

/* Les fiches des aliments : trois scores et la valeur nutritive. */
.food-facts {
  display: grid;
  gap: 1rem;
}

.score-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
}

.score-chip {
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.score-chip > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  list-style: none;
  cursor: pointer;
}

.score-chip > summary::-webkit-details-marker {
  display: none;
}

.score-chip[data-empty] > summary {
  cursor: default;
}

.score-chip .chev {
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.score-chip[open] .chev {
  transform: rotate(-135deg);
}

.score-calc {
  margin: 0.8rem 0 0.4rem;
  font-size: 0.82rem;
}

.score-calc tr.plus td:last-child {
  color: var(--ok);
}

.score-calc tr.here {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.score-chip .hint {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
}

.score-chip b {
  display: block;
  font-size: 0.9rem;
}

.score-chip small {
  color: var(--muted);
}

.score-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  color: #fff;
  background: var(--line);
}

.score-letter.s-a { background: #1d8a46; }
.score-letter.s-b { background: #6aa84f; }
.score-letter.s-c { background: #c9a227; color: #231c19; }
.score-letter.s-d { background: #d9772f; }
.score-letter.s-e { background: #c4423a; }

.nutrition {
  max-width: 24rem;
}

.nutrition caption {
  text-align: left;
  font-size: 0.8rem;
  color: var(--muted);
  padding-bottom: 0.3rem;
}

.nutrition th,
.nutrition td {
  padding: 0.3rem 0.5rem;
}

.nutrition th {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  text-align: left;
}

/* « dont saturés », « dont sucres » : en retrait, sans filet au-dessus. */
.nutrition tr.sub th,
.nutrition tr.sub td {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
}

.nutrition tr.sub th {
  padding-left: 1.4rem;
}

.nutrition tr:has(+ tr.sub) th,
.nutrition tr:has(+ tr.sub) td {
  border-bottom-color: transparent;
}

.food-table td:nth-child(4) {
  white-space: nowrap;
}

.score-letter.mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.25rem;
  font-size: 0.78rem;
}

.ok-text {
  color: var(--ok);
}

/* Accueil : les articles de la commande, et les sous-panneaux du groupe. */
.order-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.25rem 1.4rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0 0;
  border-top: 1.5px dotted var(--line);
  list-style: none;
  font-size: 0.88rem;
}

.order-items li {
  display: grid;
  grid-template-columns: 1fr auto 4.6rem;
  gap: 0.6rem;
  padding: 0.2rem 0;
}

.order-items li > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.group-card .sub-panel {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.sub-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.group-card .sub-panel .group-facts {
  margin: 0;
}

.sub-links {
  gap: 0.5rem;
}

.group-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* Le panneau du groupe se met en page selon sa colonne : côte à côte dans
   la colonne large (2/3), l'un sous l'autre dans l'étroite (1/3). */
.group-card .sub-panels {
  display: grid;
  gap: 0;
}

@container (min-width: 560px) {
  .group-card .sub-panels {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }

  .group-card .group-actions {
    max-width: 26rem;
  }
}

.next-days {
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-days li + li {
  margin-top: 0.15rem;
}

/* « Plus de détails » : le contour, en texte mince, à côté du bouton plein. */
.group-actions .button {
  white-space: nowrap;
}

.group-actions .button.alt {
  font-weight: 500;
}

.group-actions .button {
  width: 100%;
  justify-content: center;
}

/* Le sommaire de la distribution déborde la colonne étroite des pages, pour
   garder ses cases sur une ligne ; il suit la largeur des pages larges. */
@media (min-width: 900px) {
  .dist-summary {
    --w: min(76rem, calc(100vw - var(--sidebar) - 4rem));
    width: var(--w);
    margin-left: calc((100% - var(--w)) / 2);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

  .ds-cell b {
    white-space: nowrap;
  }
}

/* Réglages › Calendrier : une règle par moment. */
.phase-rules {
  display: grid;
  gap: 0.2rem;
  grid-column: 1 / -1;
  width: 100%;
}

.phase-rule select,
.phase-rule .qty {
  width: auto;
  min-width: 0;
}

.phase-rule .qty {
  width: 4.5rem;
}

.phase-rule .wide-time {
  width: 7.5rem;
}

.phase-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.phase-name {
  flex: 0 0 15rem;
  font-weight: 700;
}

.phase-rule [hidden] {
  display: none;
}

.phase-list {
  display: grid;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

.phase-list .muted {
  display: block;
  font-size: 0.86rem;
}

/* Mon compte : les commandes d'avant, repliées ; les préférences d'achat. */
.more-orders > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  color: var(--accent);
  font-weight: 700;
}

.habit-summary {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.habit-summary li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  font-size: 0.9rem;
}

.habit-summary span {
  color: var(--text-soft);
}

/* Les trois scores, une ligne chacun ; le détail en couleurs. */
.score-lines {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.tone-good { color: var(--ok); font-weight: 700; }
.tone-mid { color: #c9a227; font-weight: 700; }
.tone-bad { color: var(--hot); font-weight: 700; }
.tone-none { color: var(--muted); }

.nowrap {
  white-space: nowrap;
}

/* Les avis : cinq étoiles, choisies de droite à gauche. */
.stars-pick {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.15rem;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}

.stars-pick legend {
  float: left;
  margin-right: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-soft);
}

.stars-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.stars-pick label {
  font-size: 1.6rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
}

.stars-pick input:checked ~ label,
.stars-pick label:hover,
.stars-pick label:hover ~ label {
  color: var(--accent);
}

.stars-pick input:focus-visible + label {
  outline: 2px solid var(--accent);
  border-radius: 4px;
}

.stars-read i {
  font-style: normal;
  color: var(--line);
}

.stars-read i.on {
  color: var(--accent);
}

/* Qui voit quoi : chaque cercle avec son icône. */
.level-pick summary span,
.level-option span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.level-pick svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--accent);
}

.level-option {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.level-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.level-option:has(input:checked) {
  background: var(--accent);
  color: var(--accent-ink);
}

.level-option:has(input:checked) svg {
  color: var(--accent-ink);
}

.level-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
}

.deposit-rows td {
  color: var(--text-soft);
  border-top: 1.5px dotted var(--line);
}

/* La barre : le point des sections qui ont du nouveau ; le bas, séparé. */
.sidebar .nav.has-news {
  position: relative;
}

.nav-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--terracotta);
  flex: none;
}

.nav-dot + .key-hint {
  margin-left: 0.5rem;
}

.sidebar .bottom {
  padding-top: 0.8rem;
  border-top: 1.5px solid var(--line);
}

.notice-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: start;
  gap: 0.15rem 0.8rem;
  padding: 0.75rem 0.4rem;
  border-bottom: 1.5px dotted var(--line);
  color: inherit;
  text-decoration: none;
}

.notice-row:hover {
  background: var(--card);
}

.notice-kind {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* La photo de profil. */
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: var(--card);
  color: var(--accent);
  font-weight: 700;
}

.avatar.large {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.6rem;
}

.photo-field {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.field-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.notice-item:last-of-type,
.notice-item:has(+ .more-button),
.notice-item:has(+ .notice-item[hidden]) {
  border-bottom: 0;
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
}

.notice-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.notice-body {
  display: grid;
  gap: 0.15rem;
}

.more-button {
  margin-top: 0.8rem;
}

.notice-item[hidden] {
  display: none;
}

/* Une nouveauté : le lien, puis le bouton pour l'archiver (ou la remettre). */
.notice-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1.5px dotted var(--line);
}

.notice-item .notice-row {
  border-bottom: 0;
}

.notice-item .notice-row[data-unseen]::after {
  right: 0;
}

.notice-archive {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.notice-archive:hover,
.notice-archive:focus-visible {
  background: var(--card);
  color: var(--accent);
}

.notice-archived {
  margin-top: 1rem;
}

.notice-archived > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-soft);
}

.notice-archived > summary::-webkit-details-marker {
  display: none;
}

.notice-archived .chev {
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.notice-archived[open] .chev {
  transform: rotate(-135deg);
}

.notice-archived[open] > summary {
  margin-bottom: 0.4rem;
}

.notice-archived .notice-row {
  opacity: 0.75;
}

/* Commandes personnalisées. */
.supplier-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem 1.4rem;
}

.supplier-link {
  display: grid;
  gap: 0.15rem;
}

.special-item > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.special-row,
.proposal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.special-row:last-child,
.proposal-row:last-child {
  border-bottom: 0;
}

.special-row.manage,
.proposal-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 720px) {
  .special-row,
  .special-row.manage,
  .proposal-row {
    grid-template-columns: 1fr;
  }
}

/* La barre du bas de page (issues 113 et 115) : la version de VRAQUE en
   service, le fil des versions, une idée, un problème. Mince, fixée au bas de
   la fenêtre d'un bord à l'autre sur grand écran ; sous le contenu sur
   téléphone, où la barre d'onglets occupe le bas. */
.site-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  margin-top: 2.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1;
}

.site-foot .foot-name {
  margin-right: 0.5rem;
}

.site-foot b {
  color: var(--text-soft);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.site-foot a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border-radius: 6px;
  color: var(--muted);
}

.site-foot a:hover {
  color: var(--accent);
  background: var(--card);
}

.site-foot svg {
  width: 15px;
  height: 15px;
}

.public .site-foot {
  justify-content: center;
  border-top: 0;
}

@media (min-width: 900px) {
  :root {
    --foot: 26px;
  }

  .shell .site-foot {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: var(--foot);
    margin: 0;
    padding: 0 1rem;
    background: var(--bg);
  }

  .shell .sidebar {
    height: calc(100vh - var(--foot));
  }

  .shell .content {
    padding-bottom: calc(3rem + var(--foot));
  }

  .shell ~ .dock {
    bottom: var(--foot);
  }
}

.version {
  border-bottom: 1.5px dotted var(--line);
}

.version:last-child {
  border-bottom: 0;
}

.version > summary {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
}

.version > summary::-webkit-details-marker {
  display: none;
}

.version-number {
  flex: none;
  min-width: 2.6rem;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 700;
}

.version-title {
  flex: 1;
  font-weight: 700;
}

.version > summary small {
  flex: none;
}

.version ul {
  margin: 0 0 1rem;
  padding-left: 4.6rem;
  color: var(--text-soft);
}

.feedback-row {
  padding: 0.75rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.feedback-row:last-child {
  border-bottom: 0;
}

div.feedback-row,
.feedback-row > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
}

.feedback-row > summary {
  cursor: pointer;
  list-style: none;
}

.feedback-row > summary::-webkit-details-marker {
  display: none;
}

.feedback-body {
  padding-top: 0.6rem;
}

/* La provenance d'un produit (issue 114) : un ingrédient par ligne, son nom,
   ses lieux, sa portée, sa part. */
.ingredient-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 11rem 4.5rem auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.ingredient-row.add {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.paste-list {
  margin: 0.6rem 0;
}

.paste-list summary {
  cursor: pointer;
  font-weight: 600;
}

.origin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.origin-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1.5px dotted var(--line);
}

.origin-list li:last-child {
  border-bottom: 0;
}

@media (max-width: 720px) {
  .ingredient-row,
  .ingredient-row.add {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Les catalogues des fournisseurs dans Requêtes (issue 115) : un onglet par
   fournisseur, ses catégories à ouvrir, les articles chargés à l'ouverture. */
.catalogues {
  min-width: 0;
}

.supplier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.supplier-tabs a {
  flex: none;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}

.supplier-tabs a small {
  margin-left: 0.3rem;
  color: var(--muted);
  font-weight: 500;
}

.supplier-tabs a:hover {
  border-color: var(--accent);
}

.supplier-tabs a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.supplier-tabs a[aria-current="page"] small {
  color: var(--accent-ink);
}

.supplier-line {
  margin: 0.8rem 0 0.4rem;
}

.catalogue-category {
  border-bottom: 1.5px dotted var(--line);
}

.catalogue-category:last-of-type {
  border-bottom: 0;
}

.catalogue-category > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.catalogue-category > summary::-webkit-details-marker {
  display: none;
}

.catalogue-category > summary::before {
  content: "+";
  margin-right: 0.6rem;
  color: var(--accent);
}

.catalogue-category[open] > summary::before {
  content: "−";
}

.catalogue-category > summary span {
  flex: 1;
}

.catalogue-items {
  padding: 0 0 0.8rem 1.2rem;
}

.catalogue-sub {
  margin: 0.9rem 0 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.catalogue-items .special-item,
.catalogues > .special-item {
  display: block;
  border-bottom: 1px dotted var(--line);
}

.vp-edit.special-item > summary {
  display: flex;
  justify-self: stretch;
  width: 100%;
  align-items: center;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
}

.special-item > summary::-webkit-details-marker {
  display: none;
}

.special-item > summary > span:first-child {
  flex: 1;
  min-width: 0;
}

.special-item > summary > .n {
  flex: none;
  text-align: right;
}

@media (max-width: 720px) {
  .supplier-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -1rem;
    padding-right: 1rem;
    scrollbar-width: none;
  }

  .catalogues .market-search {
    flex-wrap: wrap;
  }

  .catalogues .market-search input[type="search"] {
    flex: 1 1 100%;
  }
}

/* Mon implication (Bénévolat) : le score, les heures, les tâches. */
.involvement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.6rem;
  margin: 0 0 0.6rem;
}

.involvement > div {
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.involvement dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.involvement dt small {
  display: block;
  font-size: 0.68rem;
  opacity: 0.8;
}

.involvement dd {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
}

.volunteer-score b {
  font-family: var(--display);
  font-size: 1.2rem;
}

/* Bénévolat, côté membre : une ligne par tâche (quand, quoi, l'équipe, la
   fiche), les boutons à droite ; la ligne s'ouvre pour le détail. */
.vol-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.4rem 1rem;
  padding: 0.75rem 1rem;
}

.vol-more > summary {
  display: grid;
  gap: 0.15rem;
  cursor: pointer;
  list-style: none;
}

.vol-more > summary::-webkit-details-marker {
  display: none;
}

.vol-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.vol-line .vol-when {
  margin: 0;
}

.vol-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.vol-name::before {
  content: "+";
  color: var(--accent);
  font-weight: 700;
}

.vol-more[open] .vol-name::before {
  content: "−";
}

.vol-count {
  margin-left: 0.2rem;
}

.protocol-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--accent);
}

.protocol-icon:hover {
  background: var(--card);
}

.protocol-icon svg {
  width: 17px;
  height: 17px;
}

.vol-body {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.7rem;
}

.vol-card > .vol-actions {
  justify-content: flex-end;
  align-self: center;
}


.vol-card > .vol-actions .vol-offer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
}

@media (max-width: 720px) {
  .vol-card {
    grid-template-columns: 1fr;
  }

  .vol-card > .vol-actions,
  .vol-card > .vol-actions .vol-offer {
    justify-content: flex-start;
  }
}

/* Requêtes : les filtres de la recherche, et les mots trouvés surlignés. */
.market-search {
  flex-wrap: wrap;
}

.search-filters {
  flex: 1 1 100%;
}

.search-filters > summary {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

mark {
  padding: 0 0.1em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  color: inherit;
}

/* La ligne de temps de l'accueil défile d'un mois à l'autre : la
   distribution précédente, la prochaine (au centre au départ), la suivante,
   séparées d'un pointillé. */
.timeline-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
  margin-top: 0.6rem;
  padding-bottom: 0.4rem;
  outline: none;
}

.timeline-scroll::-webkit-scrollbar {
  height: 6px;
}

.timeline-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.timeline-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.timeline-month {
  position: relative;
  min-width: 0;
  padding: 0.2rem 0 0.6rem;
  border-radius: 0;
}

/* Entre deux distributions, un pointillé droit, sur toute la hauteur. */
.timeline-month + .timeline-month::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-left: 3px dashed var(--line);
}

.timeline-month-name {
  padding: 0 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline-month:first-child .timeline-month-name {
  padding-left: 0;
}

/* Les tâches de bénévolat : sous l'étape sur téléphone. */
.step-tasks {
  display: grid;
  gap: 0.1rem;
  order: 5;
}

.step-task {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  color: var(--text-soft);
  text-decoration: none;
}

.step-task i {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--ok, #2fba55);
  vertical-align: 0.05rem;
}

.step-task.planned {
  color: var(--muted);
}

.step-task.planned i {
  background: transparent;
  border: 1px dashed var(--muted);
}

.step-task.more {
  color: var(--muted);
}

/* Grand écran : chaque étape a la même largeur, d'une distribution à
   l'autre ; le point au centre de sa colonne ; les tâches au-dessus de la
   ligne. Le pointillé tombe ainsi à mi-chemin entre deux distributions. */
@media (min-width: 700px) {
  .timeline-scroll {
    --col: 11rem;
    --track: 3.6rem;
    grid-auto-columns: max-content;
  }

  .timeline-scroll .timeline-month {
    padding: 0.2rem 0 0.6rem;
  }

  .timeline-scroll .timeline-month-name {
    max-width: calc(var(--col) * var(--n));
    padding: 0 0.8rem;
  }

  .timeline-scroll .timeline {
    gap: 0;
    grid-auto-columns: var(--col);
    width: calc(var(--col) * var(--n));
    margin-top: 0.6rem;
    padding: calc(var(--track) + 1.4rem) 0 0;
    animation: none;
  }

  .timeline-scroll .step {
    padding: 0 0.7rem;
    text-align: center;
    justify-items: center;
  }

  .timeline-scroll .step-dot {
    left: 50%;
    top: calc(-1.4rem + 0.0rem);
    transform: translateX(-50%);
  }

  .timeline-scroll .step-tasks {
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: calc(100% + 1.6rem);
    height: var(--track);
    align-content: end;
    text-align: center;
  }

  /* Le rail et l'avancée, à la hauteur des points. */
  .timeline-scroll .timeline::before,
  .timeline-scroll .timeline::after {
    top: calc(var(--track) + 1.4rem - 1.4rem + 0.42rem);
    height: 3px;
  }

  .timeline-scroll .timeline::before {
    left: 0;
    right: 0;
    width: auto;
  }

  .timeline-scroll .timeline-month:first-child .timeline::before {
    left: calc(var(--col) / 2);
  }

  .timeline-scroll .timeline-month:last-child .timeline::before {
    right: calc(var(--col) / 2);
  }

  .timeline-scroll .timeline::after {
    left: 0;
    width: min(100%, calc(var(--col) * (var(--pos) + 0.5)));
  }

  .timeline-scroll .timeline-month:first-child .timeline::after {
    left: calc(var(--col) / 2);
    width: min(calc(100% - var(--col) / 2), calc(var(--col) * var(--pos)));
  }

  .timeline-scroll .timeline-month.past .timeline::after {
    width: 100%;
  }

  .timeline-scroll .timeline-month:first-child.past .timeline::after {
    width: calc(100% - var(--col) / 2);
  }

  .timeline-scroll .timeline-month.future .timeline::after {
    width: 0;
  }
}

.timeline-month:not(.current) {
  opacity: 0.72;
}

.timeline-month-name {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.timeline-month.current .timeline-month-name {
  color: var(--accent);
}

.timeline-month .timeline {
  margin-top: 0.9rem;
}

.timeline-card {
  position: relative;
}

.timeline-nav {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  display: flex;
  gap: 0.3rem;
}

.timeline-nav .chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.timeline-nav .chip:disabled {
  opacity: 0.3;
  cursor: default;
}

/* La prochaine distribution, en panneau à part. */
.next-card {
  display: grid;
  gap: 0.25rem;
  padding: 1.2rem;
  border-radius: var(--radius);
  background: var(--panel);
}

.next-card p {
  margin: 0;
}

.next-where {
  color: var(--text-soft);
  font-size: 0.9rem;
}

.next-phase {
  margin-top: 0.4rem !important;
  font-size: 0.9rem;
}

.next-phase b {
  color: var(--accent);
}

.next-card .more {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* Le calendrier, semaine par semaine (issue de la ligne de cycles) : les
   phases de commande en barres qui traversent les jours, une voie par
   barre qui se chevauche ; les jours s'écrivent sous les barres. La fin de
   semaine, locaux fermés, en plus sombre. La colonne « À venir » se cache. */
.cal-dows,
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.cal-weeks {
  display: grid;
  gap: 3px;
}

.cal-week {
  grid-template-rows: 1.7rem repeat(var(--lanes), 1.45rem) minmax(2.4rem, auto);
  min-height: 6.4rem;
}

.cal-week > .cal-day {
  grid-row: 1 / -1;
  min-height: 0;
}

.cal-week .cal-events {
  display: grid;
  gap: 3px;
  margin-top: calc(var(--lanes) * 1.45rem + 0.25rem);
  min-width: 0;
}

.cal-day.weekend {
  background: repeating-linear-gradient(135deg, transparent 0 6px,
    color-mix(in srgb, var(--line) 35%, transparent) 6px 7px),
    color-mix(in srgb, var(--card) 45%, var(--bg));
}

.cal-dow.weekend {
  opacity: 0.6;
}

.cal-bar {
  z-index: 1;
  align-self: center;
  overflow: hidden;
  height: 1.25rem;
  margin: 0;
  padding: 0 0.5rem;
  background: color-mix(in srgb, var(--pre) 30%, var(--card));
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.cal-bar.orders {
  background: color-mix(in srgb, var(--accent) 38%, var(--card));
}

.cal-bar.late {
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
}

.cal-bar.starts {
  margin-left: 4px;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.cal-bar.ends {
  margin-right: 4px;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.cal-head h2 .cal-title {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px dotted var(--line);
}

.cal-head h2 .cal-title:hover {
  color: var(--accent);
}

.cal-head-end {
  display: flex;
  gap: 0.4rem;
}

.cal-head .chip.off,
.pick.off {
  opacity: 0.3;
  cursor: not-allowed;
}

.cal-side-toggle {
  background: transparent;
  font: inherit;
  font-size: 0.8rem !important;
  cursor: pointer;
}

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

@media (min-width: 1200px) {
  .cal-layout.no-side {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cal-layout.no-side .coming {
  display: none;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.pick-grid.months {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pick {
  display: grid;
  place-items: center;
  min-height: 4rem;
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

a.pick:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.pick.current {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
}

@media (max-width: 699px) {
  .cal-dows {
    display: none;
  }

  .cal-week {
    display: block;
    min-height: 0;
  }

  .cal-week > .cal-day.empty,
  .cal-week > .cal-day.out {
    display: none;
  }

  .cal-week .cal-events {
    margin-top: 0.2rem;
  }

  .cal-bar {
    display: block;
    margin: 0 0 3px;
    border-radius: 999px;
  }

  .pick-grid.months {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.legend-bar {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pre) 30%, var(--card));
  font-size: 0.72rem;
  font-weight: 700;
}

.legend-bar.orders {
  background: color-mix(in srgb, var(--accent) 38%, var(--card));
}

/* Les demandes d'adhésion : repliées ; le formulaire rempli, puis la décision. */
.applicants > .applicants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.applicants > .applicants-head::-webkit-details-marker {
  display: none;
}

.applicants > .applicants-head h2 {
  margin: 0;
}

.applicants[open] > .applicants-head {
  margin-bottom: 0.8rem;
}

.application-answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.5rem 1.2rem;
  margin: 0 0 1rem;
}

.application-answers > div {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.application-answers dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.application-answers dd {
  margin: 0.2rem 0 0;
}

/* La barre latérale défile si sa liste dépasse la hauteur de la fenêtre. */
@media (min-width: 900px) {
  .sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}

/* Les tableaux triables et le choix des colonnes. */
table[data-sortable] th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

table[data-sortable] th[data-sort-key]:hover {
  color: var(--accent);
}

table[data-sortable] th[aria-sort] {
  color: var(--accent);
}

table[data-sortable] th[aria-sort="ascending"]::after {
  content: " ↑";
}

table[data-sortable] th[aria-sort="descending"]::after {
  content: " ↓";
}

.table [hidden] {
  display: none !important;
}

.table-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0.8rem 0 0.3rem;
}

.column-picker {
  position: relative;
}

.column-picker > summary {
  list-style: none;
  cursor: pointer;
}

.column-picker > summary::-webkit-details-marker {
  display: none;
}

.column-picker-list {
  position: absolute;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 0.2rem;
  min-width: 12rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--panel);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.table [data-col="telephone"],
.table [data-col="adhesion"],
.table [data-col="solde"] {
  white-space: nowrap;
}

/* La colonne du contenu peut rétrécir sous la largeur d'un tableau : c'est
   le tableau qui défile, pas la page. */
@media (min-width: 900px) {
  .shell {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }
}

.content {
  min-width: 0;
}

/* Tableau de bord : l'état à côté du titre ; les cases À faire ; la
   dernière distribution en chiffres ; le journal des gestionnaires. */
.stat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stat-head > span:first-child {
  display: inline;
}

.stat-head .pill-status {
  display: inline-block;
  width: auto;
  letter-spacing: 0;
  text-transform: none;
}

.todo li {
  justify-content: flex-start;
}

.todo li > span {
  flex: 1;
}

.todo li.is-done {
  opacity: 0.55;
}

.todo li.is-done > span {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}

.todo-by {
  display: block;
  text-decoration: none;
}

.todo-check {
  display: contents;
}

.check-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
}

.check-box:hover {
  border-color: var(--accent);
}

.check-box.on {
  border-color: var(--ok);
  background: var(--ok);
}

.check-box svg {
  width: 16px;
  height: 16px;
}

.last-day {
  margin: 0.2rem 0 0.8rem;
}

.last-figures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.last-figures > div {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.last-figures dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.last-figures dd {
  margin: 0.2rem 0 0.1rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
}

.last-figures small {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.top-products {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.top-products li span:last-child {
  float: right;
  font-variant-numeric: tabular-nums;
}

.journal-panel {
  margin-top: 1.2rem;
}

.journal {
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.journal li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--line);
}

.journal li:last-child {
  border-bottom: 0;
}

.journal time {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .journal li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .journal li span {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.journal li.hint {
  display: block;
}

/* Les filtres de colonne, comme dans un tableur. */
table[data-filterable] th {
  position: relative;
}

.col-filter {
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.col-filter:hover,
th.filtered .col-filter {
  background: var(--accent);
  color: var(--accent-ink);
}

.col-filter-pop {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 0.5rem;
  width: 17rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--panel);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.4);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: default;
}

.col-filter-list {
  display: grid;
  gap: 1px;
  max-height: 18rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.col-filter-pop .input {
  min-height: 2.4rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.col-filter-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  line-height: 1.3;
  cursor: pointer;
}

.col-filter-row:hover {
  background: var(--card);
}

.col-filter-row:first-child {
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  font-weight: 700;
}

.col-filter-row input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}

.col-filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col-filter-row small {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.table-count {
  align-self: center;
  font-size: 0.85rem;
}

/* Le tableau de données réutilisable (templates/_datatable.html). */
.datatable-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0.4rem;
}

.datatable-tools .input[type="search"] {
  flex: 1 1 16rem;
}

.column-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
}

.column-pick .chip {
  padding: 0.05rem 0.45rem;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.column-picker-list {
  min-width: 15rem;
}

.column-picker-list .hint {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
}

table[data-columns] th[draggable="true"] {
  cursor: grab;
}

/* Dans la boutique, le sommaire reste dans la colonne du catalogue (entre
   l'index des familles et le panier) : pas de débord calculé sur la page. */
@media (min-width: 900px) {
  .shop-layout .dist-summary {
    width: auto;
    margin-left: 0;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .shop-layout .ds-cell b {
    white-space: normal;
  }
}

/* L'icône d'avertissement, à la place d'un émoji (aucun émoji sur le site). */
.warn-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.12em;
}

/* La révision d'une demande : une ligne par question, la réponse à côté. */
.answers {
  display: grid;
  margin: 0 0 1rem;
  border-top: 1px dotted var(--line);
}

.answers > div {
  display: grid;
  grid-template-columns: minmax(10rem, 22rem) minmax(0, 1fr);
  gap: 0.2rem 1.2rem;
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--line);
}

.answers dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.answers dd {
  margin: 0;
}

.answers ul {
  margin: 0;
  padding-left: 1.1rem;
}

.answers details summary {
  cursor: pointer;
  color: var(--accent);
}

.refuse-reasons {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 0.6rem;
  padding: 0;
  border: 0;
}

.refuse-reasons legend {
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .answers > div {
    grid-template-columns: 1fr;
  }
}

/* La Communauté : les onglets Discussions et Recettes ; les recettes. */
.community-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--line);
}

.community-tabs a {
  padding: 0.6rem 1rem;
  border-bottom: 3px solid transparent;
  color: var(--text-soft);
  font-weight: 700;
  text-decoration: none;
}

.community-tabs a[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.recipes-layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1000px) {
  .recipes-layout {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.recipe-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0.8rem;
}

.recipe-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.recipe-card:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.recipe-card img,
.recipe-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--card);
}

.recipe-text {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.85rem 0.85rem;
}

.product-pick {
  display: grid;
  gap: 0.6rem;
  max-height: 26rem;
  overflow-y: auto;
  margin-bottom: 0.7rem;
  padding-right: 0.3rem;
}

.pick-family[hidden] {
  display: none;
}

.pick-family h4 {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.product-pick .chip-check span {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  border-width: 1px;
}

.pick-filter {
  width: 100%;
}

.recipe-finder .wide-button {
  display: flex;
  width: 100%;
  justify-content: center;
}

.pick-clear {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}

.recipe-detail {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1000px) {
  .recipe-detail {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.recipe-photo {
  display: block;
  width: 100%;
  max-height: 22rem;
  object-fit: cover;
  margin-bottom: 1rem;
  border-radius: var(--radius-small);
}

.pick-filter {
  margin-bottom: 0.5rem;
}

.product-pick label[hidden] {
  display: none;
}

.recipe-finder .pair {
  flex-wrap: wrap;
}

/* Le graphique des prix d'un produit. */
.price-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.4rem 0;
}

.price-chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}

.price-chart .axis {
  fill: var(--muted);
  font: 500 11px var(--body);
}

.price-chart .ours {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}

.price-chart .ours-dot {
  fill: var(--accent);
}

.price-chart .market {
  fill: var(--pre);
  opacity: 0.75;
}

.price-chart .market-line {
  fill: none;
  stroke: var(--pre);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.chart-legend .key {
  display: inline-block;
  width: 1.4rem;
  height: 0;
  margin-left: 0.6rem;
  border-top: 3px solid var(--accent);
}

.chart-legend .key:first-child {
  margin-left: 0;
}

.chart-legend .key.market {
  width: 0.6rem;
  height: 0.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--pre);
}

.chart-legend .key.market-line {
  border-top: 2px dashed var(--pre);
}

/* Les fournisseurs, côté membres. */
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
}

.supplier-tile {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.supplier-tile:hover {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.supplier-tile .pill-status {
  justify-self: start;
}

.supplier-layout {
  display: grid;
  gap: 1rem;
}

.price-rows td.n {
  width: 7rem;
  white-space: nowrap;
}

/* La fiche produit : deux colonnes sur grand écran. */
.sheet-grid {
  display: grid;
  gap: 0 1.2rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .sheet-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.sheet-col > .panel {
  margin-bottom: 1.2rem;
}

.sheet-grid .nutrition {
  max-width: none;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.82rem;
}

.seg label {
  cursor: pointer;
}

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg span {
  display: block;
  padding: 0.3rem 0.8rem;
  color: var(--muted);
}

.seg input:checked + span {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
}

.seg input:focus-visible + span {
  outline: 2px solid var(--accent);
}

/* Les quatre vues (aux 100 g ou au format, graphique ou tableau) occupent la
   même case : la plus haute fixe la hauteur, changer d'onglet ne bouge rien. */
.chart-stack {
  display: grid;
}

.chart-stack > .chart-view {
  grid-area: 1 / 1;
  visibility: hidden;
}

.chart-stack > .chart-view.view-table {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
}

.chart-view .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Une seule vue visible : la base (aux 100 g ou le format) et l'affichage
   (graphique ou tableau) choisis. */
.price-panel:not(:has(input[value="format"]:checked)):not(:has(input[value="tableau"]:checked))
  .base-per100.view-graph,
.price-panel:has(input[value="format"]:checked):not(:has(input[value="tableau"]:checked))
  .base-format.view-graph,
.price-panel:not(:has(input[value="format"]:checked)):has(input[value="tableau"]:checked)
  .base-per100.view-table,
.price-panel:has(input[value="format"]:checked):has(input[value="tableau"]:checked)
  .base-format.view-table {
  visibility: visible;
}

.chart-view .table-wrap table {
  width: 100%;
}

.toolbar .chip svg {
  width: 13px;
  height: 13px;
  margin-right: 0.3rem;
  vertical-align: -2px;
}

/* Le titre d'une famille : un bouton qui la replie. */
.fam-head h2 {
  flex: 1;
  margin: 0;
  font: inherit;
}

.fam-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.fam-toggle .fam-chosen {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.fam-toggle .fam-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.fam-head.folded .fam-chevron {
  transform: rotate(-90deg);
}

.items > [hidden] {
  display: none !important;
}

/* Le panneau du groupe : quatre chiffres, puis les faits en lignes. */
.group-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin: 0.7rem 0 0.2rem;
  padding: 0;
  list-style: none;
}

.group-stats li {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.group-stats b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
}

.group-stats b small {
  font-size: 0.9rem;
  color: var(--muted);
}

.group-stats span {
  font-size: 0.78rem;
  color: var(--muted);
}

.group-rows {
  display: grid;
  margin: 0.4rem 0 0;
}

.group-rows > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.group-rows > div:last-child {
  border-bottom: 0;
}

.group-rows dt {
  font-size: 0.82rem;
  color: var(--muted);
}

.group-rows dd {
  margin: 0;
  font-size: 0.9rem;
}

.group-rows .next-days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}

.group-rows .next-days li + li {
  margin-top: 0;
}

.group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
}

.group-links a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* Une tâche récurrente (l'icône des deux flèches) ou ponctuelle. */
.task-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.task-kind svg {
  width: 14px;
  height: 14px;
}

.task-kind.recurring {
  color: var(--accent);
}

.task-kind.oneoff {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Changer de page sans éclair blanc (issue 134) : le navigateur fond l'une
   dans l'autre ; après un enregistrement sur place, rien ne rejoue son
   entrée. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}

html.swapped .reveal,
html.swapped .items > .item,
html.swapped .timeline,
html.swapped .scale-bar i {
  animation: none;
}

html.is-saving {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.messages.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(32rem, calc(100vw - 2rem));
  margin: 0;
  transform: translateX(-50%);
  animation: rise-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.messages.toast li {
  background: var(--card);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.messages.toast li.success::before,
.messages.toast li.info::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--ok, #2fba55);
}

.messages.toast li.error::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: #ec5530;
}

.messages.toast.leaving {
  opacity: 0;
  transition: opacity 400ms ease;
}

@media (min-width: 900px) {
  .messages.toast {
    bottom: 2.5rem;
  }
}

/* La liste de prix : les montants serrés à droite, le nom prend le reste. */
.price-rows td.n {
  width: 1%;
  white-space: nowrap;
  padding-left: 0.8rem;
}

/* Les rapports d'une distribution : quatre chiffres en tête. */
.report-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.report-totals > div {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
}

.report-totals dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.report-totals dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-size: 1.35rem;
}

/* Un groupe de champs ne déborde pas de son panneau (min-width: min-content
   par défaut). */
fieldset {
  min-width: 0;
}

.prepare-many {
  display: grid;
  gap: 0.7rem;
}

.prepare-many p {
  margin: 0;
}

/* Les fenêtres d'une phase : autant de colonnes que la largeur en permet. */
.phase .grid.two,
.phase .grid.three {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

.phase input[type="datetime-local"] {
  min-width: 0;
  width: 100%;
}

/* Un champ de fichier ne déborde pas sur téléphone. */
input[type="file"] {
  max-width: 100%;
}

/* Les onglets (Communauté, rapports) défilent s'ils sont trop nombreux. */
.community-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.community-tabs a {
  flex: none;
}

.file-native {
  left: 0;
  top: 0;
}

.home-panel,
.group-card {
  min-width: 0;
}

.group-card {
  overflow-wrap: anywhere;
}

/* Les plus petits téléphones : le prix d'une ligne se serre. */
@media (max-width: 380px) {
  .item.line .line-price .price {
    font-size: 0.9rem;
  }

  .item.line .line-price .compare {
    font-size: 0.68rem;
  }

  .group-stats {
    grid-template-columns: 1fr 1fr;
  }
}

.recipe-why {
  color: var(--text-soft);
  font-size: 0.95rem;
}


/* Le bandeau de résumé sur téléphone : le mot entier, en plus petit, plutôt
   que « Précomman… ». */
@media (max-width: 520px) {
  .ds-cell b {
    font-size: 0.86rem;
    overflow-wrap: anywhere;
  }
}

/* Le pied de page est fixé au bas de l'écran (grand écran) : ce qui colle au
   bas (barre d'enregistrement) se tient au-dessus, et le contenu finit plus
   haut. */
@media (min-width: 900px) {
  .save-bar {
    bottom: calc(var(--foot, 26px) + 0.8rem);
  }

  .shell .content > .inner {
    padding-bottom: calc(var(--foot, 26px) + 1.5rem);
  }
}

/* La galerie d'un produit : la première image est la couverture. */
.gallery-edit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.6rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

.gallery-item {
  position: relative;
  display: grid;
  gap: 0.3rem;
  cursor: grab;
}

.gallery-item.dragging {
  opacity: 0.4;
}

.gallery-item .thumb {
  width: 100%;
  aspect-ratio: 1;
}

.gallery-cover {
  display: none;
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.66rem;
  font-weight: 700;
}

.gallery-item:first-child .gallery-cover {
  display: inline-block;
}

.gallery-item:first-child .thumb {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.gallery-tools {
  display: flex;
  justify-content: center;
  gap: 0.2rem;
}

.gallery-tools .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  background: transparent;
  cursor: pointer;
}

.gallery-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.2rem;
  padding: 1.1rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-small);
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-soft);
  cursor: pointer;
}

.gallery-drop.over {
  border-color: var(--accent);
  color: var(--text);
}

.gallery-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.sheet-gallery {
  display: grid;
  gap: 0.6rem;
}

.sheet-cover {
  width: 100%;
  max-height: 22rem;
  object-fit: contain;
  border-radius: var(--radius-small);
  background: var(--card);
}

.sheet-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sheet-thumbs button {
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
}

.sheet-thumbs button[aria-current] {
  border-color: var(--accent);
}

.sheet-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* == L'accueil en tuiles (#138) =============================================================
   Une grille comme l'écran d'un téléphone : une grosse icône, un titre, une
   donnée ; tout le reste est à un clic. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

@media (min-width: 760px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-height: 11.5rem;
  padding: 1.2rem 1.2rem 1.1rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.home-tile:hover,
.home-tile:focus-visible {
  transform: translateY(-2px);
  background: var(--card);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.25);
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: auto;
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.tile-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

.tile-title {
  margin-top: 1rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.tile-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.tile-detail {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  color: var(--muted);
}

.home-tile.tone-on .tile-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.home-tile.tone-on .tile-value {
  color: var(--accent);
}

.home-tile.tone-warn .tile-value {
  color: #e0a43a;
}

.home-tile.tone-good .tile-value {
  color: var(--ok, #2fba55);
}

.tile-badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--terracotta, #c8643c);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
}

.tile-eye,
.tiles .arrange-bar {
  display: none;
}

.home-tile.is-hidden {
  display: none;
}

/* Personnaliser : les tuiles tremblent un peu, se glissent, se cachent. */
.tiles.arranging .home-tile {
  display: flex;
  cursor: grab;
  animation: tile-wiggle 260ms ease-in-out infinite alternate;
}

.tiles.arranging .home-tile:nth-child(2n) {
  animation-delay: -130ms;
}

.tiles.arranging .home-tile.is-hidden {
  opacity: 0.35;
  outline: 2px dashed var(--line);
  outline-offset: -2px;
}

.tiles.arranging .home-tile.dragging {
  opacity: 0.5;
}

.tiles.arranging .tile-eye {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
}

.tiles.arranging .home-tile.is-hidden .tile-eye {
  color: var(--muted);
}

.tiles.arranging .tile-eye svg {
  width: 1.1rem;
  height: 1.1rem;
}

.tiles.arranging .arrange-bar {
  position: sticky;
  bottom: calc(var(--foot, 0px) + 0.8rem);
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-small);
  background: var(--card);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
}

.tiles.arranging .arrange-bar .hint {
  margin-right: auto;
}

.tiles.arranging .arrange-bar .button {
  width: auto;
}

@keyframes tile-wiggle {
  from {
    transform: rotate(-0.6deg);
  }
  to {
    transform: rotate(0.6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tiles.arranging .home-tile {
    animation: none;
  }
}

@media (max-width: 560px) {
  .tiles {
    gap: 0.6rem;
  }

  .home-tile {
    min-height: 9.5rem;
    padding: 0.95rem;
  }

  .tile-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
  }

  .tile-icon svg {
    width: 1.75rem;
    height: 1.75rem;
  }

  .tile-title {
    margin-top: 0.75rem;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }

  .tile-value {
    font-size: 0.86rem;
  }
}

/* Les colonnes de la boutique collent sous le bandeau, pas dessous. */
@media (min-width: 1100px) {
  .shop-families,
  .basket-panel {
    top: calc(var(--band-now, 0px) + 1rem);
    max-height: calc(100vh - var(--band-now, 0px) - var(--foot, 0px) - 2rem);
  }
}

/* La colonne des familles : un peu d'air sous son titre ; plusieurs familles
   se cochent. */
.shop-families > .overline {
  display: block;
  margin-bottom: 0.7rem;
}

.shop-families .fam-check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-right: 0.15rem;
  border: 1.5px solid var(--line);
  border-radius: 4px;
}

.shop-families .fam-pick.selected {
  background: var(--card);
  color: var(--text);
}

.shop-families .fam-pick.selected .fam-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.shop-families .fam-check svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* « Ma commande » s'aligne sur le haut de la colonne du milieu, sous le
   bandeau. */
@media (min-width: 1100px) {
  .shop-layout > .basket-panel {
    top: calc(var(--band-now, 0px) + 1.25rem);
  }
}

@media (min-width: 1150px) {
  .shop-families {
    top: calc(var(--band-now, 0px) + 1.25rem);
    padding-top: 0.3rem;
  }
}

/* La coche : blanche sur la case pleine, bien lisible. */
.shop-families .fam-pick .fam-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: #fff;
  stroke: #fff;
  opacity: 1;
}

/* Précommande : au moins, au plus. */
.qty-range {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
}

.qty-range .stepper {
  position: relative;
}

.range-label {
  margin-right: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.stepper.range-max {
  opacity: 0.92;
}

/* Une étiquette certifiée : un petit sceau. */
.seal {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.15rem;
  vertical-align: -0.12rem;
  color: var(--ok, #2fba55);
}

.line-meta .tg.certified .tl {
  color: var(--text-soft);
}

.cert-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.cert-list .seal {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
}

.cert-edit {
  display: grid;
  gap: 0.6rem;
  margin: 0.8rem 0;
  padding: 0;
  border: 0;
}

.cert-rows {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert-rows li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.cert-rows small {
  margin-left: 0.4rem;
}

.cert-new {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem 0.8rem;
  align-items: end;
}

.warn-text {
  color: #e0a43a;
}

/* Un champ qui dépend d'une action reste caché tant que l'action n'est pas choisie. */
[data-for][hidden] {
  display: none !important;
}

/* Les notes d'un coup d'oeil, sur la carte d'un produit. */
.quick-notes {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.quick-notes .qn-scores,
.quick-notes .qn-opinions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  background: var(--card);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.78rem;
}

.quick-notes a:hover {
  color: var(--text);
}

.quick-notes .qn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.quick-notes .score-letter.mini {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  font-size: 0.68rem;
}

.quick-notes .qn-local svg {
  color: var(--accent);
}

.qn-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.qn-icon.star {
  fill: #e0a43a;
}

.qn-count {
  margin-left: auto;
  color: var(--muted);
}


/* Les avis d'un produit : le résumé à gauche, mon avis à droite. */
.reviews-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.rs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin: 0 0 0.6rem;
}

.rs-score b {
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--text);
}

.rs-score small {
  color: var(--muted);
}

.rs-criteria li {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr 2.2rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0;
  font-size: 0.88rem;
}

.rs-bar {
  height: 0.45rem;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) calc(var(--v) * 20%), var(--line) 0);
}

.rs-criteria b {
  text-align: right;
}

.rs-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.8rem;
}

.rs-flags li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--text-soft);
  font-size: 0.85rem;
}

.crit-grid {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.crit-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.crit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0.6rem;
}

.crit-row .stars-pick {
  margin: 0;
}

.crit-label,
.crit-pick legend {
  float: left;
  width: 11rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.crit-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.crit-pick label {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
}

.crit-pick input:checked + label {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.crit-pick input:focus-visible + label {
  outline: 2px solid var(--accent);
}

.feedback-form .field {
  display: grid;
  gap: 0.25rem;
  margin: 0 0 0.6rem;
}

.qn-opinions .qn-summary {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.qn-opinions .qn-invite {
  flex-basis: 100%;
  color: var(--accent);
  font-weight: 600;
}

.private-note {
  color: var(--pre);
}

@media (max-width: 40rem) {
  .crit-label,
  .crit-pick legend {
    width: 100%;
    margin-bottom: 0.3rem;
  }

  .crit-pick label {
    width: 2.6rem;
    height: 2.4rem;
  }
}

/* Le stock bas : un badge sur la carte, la part estimée sous le prix. */
.low-badge {
  display: inline-block;
  margin: 0 0 0.35rem 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--hot);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.line-name .low-badge {
  margin: 0 0 0 0.3rem;
}

.stock-note {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.stock-note p {
  margin: 0 0 0.2rem;
}

.stock-note.short {
  color: var(--hot);
}

.qn-demand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0 0.55rem;
  color: var(--text-soft);
  font-size: 0.78rem;
}

.popular-badge {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text);
  font-weight: 700;
}

.qn-scores .has-pop {
  cursor: help;
}

.qn-scores .has-pop:focus-visible {
  outline: 2px solid var(--accent);
  border-radius: 6px;
}

.qn-more {
  margin-left: auto;
  color: var(--muted);
  text-decoration: none;
}

/* Le détail d'une lettre : au survol, au toucher, au clavier. Dans la couche
   du dessus (popover), pour ne pas être coupé par la carte. */
.pop[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(19rem, calc(100vw - 1.5rem));
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text-soft);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  font-size: 0.8rem;
  line-height: 1.4;
}

.pop:popover-open {
  display: grid;
  gap: 0.35rem;
}

.pop > b {
  color: var(--text);
  font-size: 0.86rem;
}

.pop-part {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.6rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
}

.pop-part small {
  grid-column: 1 / -1;
}

.score-row {
  align-items: start;
}

.score-calc th {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-soft);
}

.score-calc thead th {
  font-size: 0.72rem;
  color: var(--muted);
}

.score-calc tfoot th {
  font-weight: 700;
  color: var(--text);
}

/* L'éditeur : le titre du champ et « Écrire / Aperçu » sur une ligne. */
.md-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}

.md-head .md-tabs {
  margin-right: 0;
}

.md-toolbar button[data-md] {
  display: inline-grid;
  place-items: center;
}

.md-toolbar button[data-md] svg {
  display: block;
}

/* Le formulaire d'une recette : les ingrédients en lignes, les photos. */
.recipe-lines,
.recipe-images {
  margin: 0;
  padding: 0;
  border: 0;
}

.recipe-lines legend,
.recipe-images legend {
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.rl-head,
.rl-row {
  display: grid;
  grid-template-columns: 5rem 8rem minmax(10rem, 2.4fr) 6.5rem minmax(10rem, 1.6fr) 2.2rem;
  gap: 0.4rem;
  align-items: center;
}

.rl-head {
  padding: 0 0.1rem 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.rl-row {
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
}

.rl-row select,
.rl-row .input {
  width: 100%;
  min-width: 0;
}

.rl-name {
  display: grid;
  gap: 0.25rem;
}

.rl-alt {
  font-size: 0.85rem;
}

.rl-remove {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.rl-remove:hover {
  border-color: var(--decline);
  color: var(--decline);
}

.ri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.ri-item {
  position: relative;
  display: grid;
  gap: 0.3rem;
  font-size: 0.8rem;
}

.ri-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.ri-item:has(input[name="retirer-image"]:checked) img {
  opacity: 0.35;
}

.ri-cover {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

@media (max-width: 40rem) {
  .rl-head {
    display: none;
  }

  .rl-row {
    grid-template-columns: 4.5rem 1fr 2.2rem;
  }

  .rl-row [data-line-name],
  .rl-row [data-line-product] {
    grid-column: 1 / 3;
  }

  .rl-row .rl-alt {
    grid-column: 1 / 2;
  }
}

/* Une recette : les photos en carrousel, les ingrédients à cocher. */
@media (min-width: 1000px) {
  .recipe-detail {
    grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr);
  }
}

.carousel {
  position: relative;
  margin-bottom: 1rem;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-small);
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 30rem;
  object-fit: cover;
  scroll-snap-align: start;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-top: -1.2rem;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  cursor: pointer;
}

.carousel-nav.prev {
  left: 0.6rem;
}

.carousel-nav.next {
  right: 0.6rem;
}

.carousel-dots {
  position: absolute;
  bottom: 0.6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.carousel-dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.5);
}

.carousel-dots span.on {
  background: #fff;
}

.ing-list {
  margin: 0 0 1rem;
}

.ing {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}

.ing-have input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.ing-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
}

.ing-product {
  color: var(--accent);
  font-weight: 600;
}

.ing-price {
  color: var(--text-soft);
}

.ing.have .ing-text {
  color: var(--muted);
  text-decoration: line-through;
}

.ing.have .ing-product,
.ing.unavailable .ing-product {
  color: var(--muted);
}

.recipe-ingredients .wide-button {
  width: 100%;
  margin-bottom: 1.2rem;
}

.recipe-ingredients [data-missing-button]:disabled {
  opacity: 0.45;
}

/* Les recettes : les filtres du choix d'articles, au moins un ou tous,
   chercher ailleurs, mes recettes. */
.pick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: 600 0.78rem/1 var(--body);
  cursor: pointer;
}

.tag-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.mode-seg {
  margin: 0.8rem 0 0.6rem;
}

.search-elsewhere {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.search-links .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  text-decoration: none;
}

.recipe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
}

.recipe-tabs .chip {
  text-decoration: none;
}

.recipe-tabs .chip:not(.on) {
  color: var(--text-soft);
}

.range-steps {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}

.range-steps .stepper {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* La case de la distribution : la date mène à l'accueil ; le lieu, sur sa
   ligne, ouvre une carte ; « Ajouter à mon agenda » donne un fichier .ics. */
.ds-day .ds-main {
  display: grid;
  gap: 0.1rem;
  color: inherit;
  text-decoration: none;
}

.ds-day .ds-place,
.ds-day .ds-ics {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.25rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.ds-day .ds-place svg,
.ds-day .ds-ics svg {
  flex: none;
  margin-top: 0.15em;
}

.ds-day .ds-place:hover,
.ds-day .ds-ics:hover {
  color: var(--accent);
}

/* L'économie sous le prix, sur sa ligne. */
.item .price .saving {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ok);
}

.quick-notes .sheet-button {
  width: 100%;
  margin-top: 0.2rem;
  justify-content: center;
  font-weight: 600;
}

/* Les avis d'un produit, dans une fenêtre, sans quitter la boutique. */
.reviews-dialog {
  width: min(36rem, calc(100vw - 2rem));
  max-height: min(80vh, 44rem);
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.reviews-dialog::backdrop {
  background: rgb(0 0 0 / 0.55);
}

.reviews-dialog .rd-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.reviews-dialog .rd-close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.chart-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.reviews-panel .pair,
.reviews-dialog .pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Les jours de distribution se voient d'un coup d'oeil : un contour caramel
   pâle, le fond de la case comme les autres. Une date à confirmer : plus pâle. */
.cal-day:has(.ev.distribution:not(.tentative)) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
}

.cal-day:has(.ev.distribution:not(.tentative)) .cal-num {
  color: var(--text);
}

.cal-day:has(.ev.distribution:not(.tentative)) .ev.distribution {
  background: var(--accent);
  color: var(--accent-ink);
}

.cal-day:has(.ev.distribution.tentative) {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 25%, transparent);
  background-image: none;
}

/* Le jour visé par un lien (#j2026-11-03) se repère. */
.cal-day:target {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
}

/* Les jours fériés : la case teintée de bleu. */
.ev.holiday,
.ev-line.holiday {
  --dot: var(--pre);
}

.ev.holiday {
  background: transparent;
  color: var(--text-soft);
}

.cal-day:has(.ev.holiday) {
  background: color-mix(in srgb, var(--pre) 14%, var(--card));
}

/* Un sondage se lit sur une colonne : pas besoin de toute la largeur. */
.poll-desc,
.poll-form,
.poll-done,
.poll-results {
  max-width: var(--w-text);
}

.poll-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.poll-done p {
  margin: 0;
}

/* La page d'une distribution : quand et où, les commandes, le bénévolat. */
.dist-page {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}

/* Deux colonnes indépendantes : quand et où, puis les commandes, à gauche ;
   le bénévolat à droite. Aucune ne laisse de trou sous l'autre. */
.dist-col {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.dist-col > .panel,
.dist-page > .panel {
  margin: 0;
}

.dist-when {
  font-size: 1.1rem;
}

.dist-phases li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.dist-task {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.dist-task p {
  margin: 0.2rem 0;
}

.dist-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dist-people .person {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--card);
  font-size: 0.85rem;
}

.dist-people .person.ok {
  background: color-mix(in srgb, var(--ok) 22%, var(--card));
}

.dist-people .person.wait {
  border: 1px dashed var(--line);
  background: transparent;
}

.dist-phases {
  list-style: none;
  padding: 0;
}

.dist-phases small {
  line-height: 1.4;
}

/* Requêtes : la recherche avancée, compacte, dans son propre encadré. */
.market-search .search-filters {
  flex-basis: 100%;
}

.search-filters > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}

.search-filters > summary::-webkit-details-marker {
  display: none;
}

/* « Demander un article qui n'est pas dans les catalogues » : à l'écart, et
   les champs alignés par le bas même quand un libellé passe sur deux lignes. */
.ask-unlisted {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ask-unlisted .form-grid {
  align-items: end;
}

.market-search > .input[type="search"] {
  flex: 1 1 18rem;
}

.stepper output,
.range-steps output {
  cursor: text;
}

.qty-type {
  width: 3rem;
  padding: 0.15rem 0.2rem;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: center;
}

.proposal-supplier {
  margin: 1.2rem 0 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

/* Les formats d'un produit : des options sur une seule carte. */
.option-group {
  display: contents;
}

.option-group > .item[hidden] {
  display: none;
}

.option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.2rem;
}

.option-chip {
  padding: 0.25rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: 600 0.78rem/1.2 var(--body);
  cursor: pointer;
}

.option-chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.option-chip.in-basket:not(.on) {
  border-color: var(--accent);
  color: var(--text);
}

/* Un score à trois chiffres (100) : un peu plus petit, pour tenir dans le rond. */
.score-letter.three {
  font-size: 0.82em;
  letter-spacing: -0.04em;
}

/* Les scores d'une commande en blocs : quatre de front sur grand écran. */
.order-scores .score-lines {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  align-items: stretch;
}

.order-scores .score-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}

.order-scores .score-chip small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

/* Le « i » près d'un bord : la bulle s'ouvre dessous, ou s'aligne sur le bord,
   pour rester dans l'écran (le script choisit la classe). */
.info.below::after {
  top: calc(100% + 0.5rem);
  bottom: auto;
  transform: translate(-50%, -0.3rem);
}

.info.edge-left::after {
  left: -0.3rem;
  transform: translate(0, 0.3rem);
}

.info.edge-right::after {
  left: auto;
  right: -0.3rem;
  transform: translate(0, 0.3rem);
}

.info.edge-left:hover::after,
.info.edge-left:focus::after,
.info.edge-right:hover::after,
.info.edge-right:focus::after {
  transform: translate(0, 0);
}

.info.below:hover::after,
.info.below:focus::after {
  transform: translate(-50%, 0);
}

/* Une distribution repliée, au bénévolat. */
.vol-day > [hidden] {
  display: none !important;
}

.vol-day .fam-head .fam-toggle {
  width: 100%;
}

/* Gestionnaire › Distributions : les panneaux des distributions, à choisir. */
.dist-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 1fr);
  gap: 0.7rem;
  margin: 0 0 1.2rem;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.3rem;
}

.dist-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--panel);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.82rem;
}

.dist-card b {
  color: var(--text);
  font-size: 1rem;
}

.dist-card .dc-when {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dist-card.current {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

.dist-card.current .dc-when {
  color: var(--accent);
}

.dist-card.past {
  opacity: 0.75;
}

.dist-card.future {
  border-style: dashed;
}

.dist-card:hover {
  border-color: var(--accent);
}

.pick-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
}

.pick-group-by {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.pick-group-by select {
  height: 2rem;
  padding: 0 1.8rem 0 0.6rem;
  font-size: 0.82rem;
  border-radius: 8px;
}

.pick-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem;
  border-radius: 10px;
  background: var(--card);
  font-size: 0.8rem;
}

.pick-chosen .chip {
  font-size: 0.78rem;
  cursor: pointer;
}

.recipe-tabs .share-recipe {
  margin-left: auto;
}

.pick-chosen[hidden] {
  display: none;
}

.pick-group-by select {
  line-height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}

.order-numbers summary {
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
}

.order-lines tfoot th,
.order-lines tfoot td {
  font-weight: 700;
  color: var(--text);
  border-top: 1.5px solid var(--line);
}

.review-link {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Une lettre du tableau des scores : son calcul au survol. */
.datatable .has-pop {
  cursor: help;
  font-weight: 700;
}

.datatable .has-pop.tone-good { color: var(--ok); }
.datatable .has-pop.tone-mid { color: #c9a227; }
.datatable .has-pop.tone-bad { color: var(--hot); }

.datatable .col-name {
  min-width: 13rem;
}

.sheet-recipe-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.sheet-talk {
  margin: 0.4rem 0 0;
}

/* Qui fait le produit : distributeur, marque, provenance, chacun nommé. */
.sheet-who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0.3rem 0 0;
}

.sheet-who .who-item {
  display: grid;
  gap: 0.05rem;
}

.sheet-who small {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sheet-who a,
.sheet-who .who-item > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.sheet-who a {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.sheet-who svg {
  color: var(--accent);
}

.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.counter-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.8rem;
}

.counter-day-pick select {
  margin-top: 0.2rem;
  padding: 0.2rem 2rem 0.2rem 0;
  border: 0;
  background-color: transparent;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.counter-panel.empty {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  min-height: 14rem;
  text-align: center;
}

.counter-panel.empty .hint {
  max-width: 32rem;
}

.counter-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title actions" "stats actions";
  align-items: end;
  gap: 0.3rem 1.2rem;
}

.counter-head > div:first-child {
  grid-area: title;
}

.counter-head .counter-stats {
  grid-area: stats;
  justify-self: start;
}

.counter-head > .stack.row {
  grid-area: actions;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-self: start;
}

.counter-head > .stack.row {
  margin-top: 0;
  flex-wrap: nowrap;
}

.counter-head > .stack.row .button {
  width: auto;
}

.counter-head > .stack.row .button {
  white-space: nowrap;
}

/* Réglages › Score déchets : les résines, en grille */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2, 0.4rem) var(--space-4, 1rem);
}

/* Le + et le − du compteur : en SVG, centrés au pixel (le glyphe de la
   police ne l'est pas). */
.step-glyph {
  width: 52%;
  height: 52%;
  display: block;
}

/* Le panier : les deux compteurs d'une précommande (minimum, maximum). */
.line-steps {
  display: grid;
  gap: 0.35rem;
  grid-column: 1 / -1;
}

.line-steps .range-label {
  min-width: 4.6rem;
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
}

.line-step .chip:has(.step-glyph) {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
}

.basket-name {
  color: inherit;
  text-decoration: none;
}

.basket-name:hover,
.basket-name:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Calendrier, la liste : un bloc par cycle, deux fonds en alternance. */
.agenda-cycle {
  margin: 0.6rem 0 0;
  padding: 0.8rem 0.8rem 1rem;
  border-radius: 12px;
}

.agenda-cycle.shade-0 {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.agenda-cycle.shade-1 {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.agenda-cycle .agenda {
  margin-top: 0.3rem;
}

.agenda-cycle-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.agenda-dist {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

/* La grille : « Distribution » en blanc à côté du numéro du jour. */
.cal-dist {
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* « Ajouter » : la pression se voit tout de suite, la réponse suit. */
.stepper button.busy {
  opacity: 0.6;
  transform: scale(0.92);
}

/* Réglages › Accès : les membres en essai, une ligne chacun. */
.pilot-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
}

.pilot-list li:last-child {
  border-bottom: 0;
}

/* Un champ à suggestions (datalist) : le même chevron que les listes, au lieu
   du triangle du système. */
input.input[list] {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a36f4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
}

input.input[list]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* == Modifier par étapes (docs/17, § 2.2) =================================================
   Une vue d'ensemble : une ligne repliée par section, son résumé, « Modifier » ;
   une section ouverte à la fois (details[name]). */
.steps {
  display: grid;
  gap: 0.6rem;
  max-width: var(--w-page);
}

.steps > form {
  display: grid;
  gap: 0.6rem;
}

.step {
  border-radius: var(--radius);
  background: var(--panel);
}

.step > summary {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  list-style: none;
  cursor: pointer;
}

.step > summary::-webkit-details-marker {
  display: none;
}

.step-title {
  font-weight: 700;
}

.step-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.step-cover {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}

.step-edit {
  padding: 0.3rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.step > summary:hover .step-edit {
  border-color: var(--accent);
  color: var(--text);
}

.step[open] > summary {
  border-bottom: 1px solid var(--line);
}

.step[open] .step-edit {
  visibility: hidden;
}

.step-body {
  padding: 1.1rem 1.2rem 1.3rem;
}

.step-note {
  display: flex;
  justify-content: flex-end;
  margin: -0.4rem 0 0.4rem;
}

/* L'enregistrement n'apparaît qu'avec une section ouverte. */
.product-form:not(:has(.step[open])) .save-bar {
  display: none;
}

/* Un format : replié aussi, son prix en tête. */
.variant-card > summary.variant-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
}

.variant-card > summary.variant-head::-webkit-details-marker {
  display: none;
}

.variant-card[open] > summary.variant-head {
  margin-bottom: 0.8rem;
}

@media (max-width: 699px) {
  .step > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.8rem;
  }

  .step-summary {
    grid-column: 1;
    grid-row: 2;
  }

  .step-edit {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* == Fork A: comptoir, historique, centrale, aliments == */
/* Données des aliments : l'enregistrement n'apparaît qu'avec une case cochée. */
.food-form:not(:has(input[name^="ok-"]:checked)) .save-bar {
  display: none;
}

/* == Espace membre : boutique, compte, fiche, recettes (audit d'octobre) == */
/* Détail d'une commande : l'état de chaque panier, en pastilles ; les totaux
   alignés sur les cellules du tableau ; un total réglé n'est pas une alerte. */
.order-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0;
  color: var(--text-soft);
}

.order-status span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.order-totals {
  padding: 0 0.5rem;
}

.cp-totals.order-totals .due dd {
  color: var(--text);
}

/* Les tuiles agrandies (2 × 1, 1 × 2, 2 × 2) : quelques lignes de plus. */
.tiles {
  grid-auto-flow: row dense;
}

.home-tile.size-2x1,
.home-tile.size-2x2 {
  grid-column: span 2;
}

.home-tile.size-1x2,
.home-tile.size-2x2 {
  grid-row: span 2;
}

.tile-more {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.85rem;
}

.tile-more li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  min-width: 0;
}

.tile-more span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tile-more small {
  flex: none;
  color: var(--muted);
}

.tile-size {
  display: none;
}

.tiles.arranging .tile-size {
  position: absolute;
  top: 0.8rem;
  right: 3.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.9rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 0.75rem;
  cursor: pointer;
}

.tile-size svg {
  width: 0.95rem;
  height: 0.95rem;
}

.tiles.arranging .home-tile.is-hidden .tile-size {
  display: none;
}

/* Comptoir : la file reste lisible une fois réglée ; « À payer » à zéro n'alarme pas. */
.q-row.settled {
  opacity: 1;
}

.q-row.settled .q-name,
.q-row.settled .q-due {
  color: var(--text-soft);
}

.cp-totals .due.none dd {
  color: var(--text);
}

/* Caisse du soir : la ligne du total, à la taille du texte. */
.till-total th {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

@media (max-width: 699px) {
  .counter-day-pick select {
    font-size: 1.25rem;
  }

  .counter-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "stats" "actions";
  }

  .counter-head > .stack.row {
    flex-wrap: wrap;
  }
}

/* == Fork B: pages du gestionnaire =========================================================
   Catalogue, distributions, membre, tableau de bord, journal, rapports. */
.check-all {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.datatable td.check-col input[type="checkbox"],
.check-all input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
}

.datatable th[data-col="cocher"],
.datatable th[data-col="image"] {
  width: 2.5rem;
}

.datatable th[data-col="cocher"] .col-filter,
.datatable th[data-col="image"] .col-filter {
  display: none;
}

.till-save {
  margin-top: 1rem;
}

/* Fiche produit : la flèche d'un score ne se tasse pas ; la légende du
   graphique garde chaque clé avec son libellé ; les boutons des recettes
   de même largeur. */
.food-facts .score-chip .chev {
  flex: none;
}

.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.chart-legend .legend-item .key {
  margin-left: 0;
}

.chart-legend {
  gap: 0.3rem 1rem;
}

.sheet-recipe-actions .button {
  flex: 1 1 12rem;
}

/* Distributions : une phase et son statut vont ensemble ; la pastille garde sa taille. */
.phase-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.1rem 0.9rem 0.1rem 0;
  white-space: nowrap;
}

.phase-pair .phase-chip {
  margin: 0;
}

.cd-phases li > .pill-status {
  justify-self: start;
  margin-top: 0.3rem;
}

.dist-strip {
  grid-auto-columns: minmax(9.5rem, 1fr);
}

.dist-card span {
  white-space: nowrap;
}

.dist-list-title {
  margin: 1.6rem 0 0.6rem;
}

.reviews-panel .pair .button {
  flex: 1 1 10rem;
  width: auto;
}

/* == Réglages : sections repliées et lignes condensées (docs/17, § 2.2) ===================
   Chaque élément d'une liste (type de tâche, date, contenant, personne…) :
   une ligne repliée, son nom, son résumé, « Modifier » ; une ouverte à la fois. */
.settings-steps .step-body > .hint:first-child {
  margin-top: 0;
}

.set-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.6rem 0 0.4rem;
}

.set-rows {
  display: grid;
  margin: 0 0 0.8rem;
}

.set-row {
  border-bottom: 1px solid var(--line);
}

.set-row:first-child {
  border-top: 1px solid var(--line);
}

.set-row.archived > summary {
  opacity: 0.55;
}

.set-row > summary {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.6rem 0.2rem;
  list-style: none;
  cursor: pointer;
}

.set-row > summary::-webkit-details-marker {
  display: none;
}

.set-row-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.set-row-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.88rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.set-row-edit {
  padding: 0.25rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text-soft);
}

.set-row > summary:hover .set-row-edit {
  border-color: var(--accent);
  color: var(--text);
}

.set-row[open] .set-row-edit {
  visibility: hidden;
}

.set-row > form,
.set-row > .vp-form {
  margin: 0 0 0.9rem;
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--bg);
}

.set-row > form.type-row {
  background: var(--bg);
}

.set-row .access-group {
  align-items: center;
}

.set-row .access-group .vp-sub {
  width: 100%;
}

/* Les nombres : un champ court, pas toute la largeur. */
.set-numbers {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.set-numbers .input.qty,
.set-rank .input.qty,
.set-price .input {
  max-width: 8rem;
}

.set-date .input {
  max-width: 12rem;
}

.vp-row.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.set-add {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 0.8rem;
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line);
}

.set-after {
  margin-top: 1rem;
}

.settings-steps .tie-levels {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.settings-steps .tie-levels select {
  width: 100%;
  min-width: 0;
}

.settings-steps .vp-more {
  margin-top: 0.8rem;
}

.set-add > .field:first-child {
  flex: 1 1 16rem;
}

@media (max-width: 699px) {
  .set-row > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .set-row-meta {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
  }

  .set-row-edit {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* Une ligne condensée (vp-edit) : un espace entre ses parts, et le retour à la ligne. */
.vp-edit > summary {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}

/* == Composants partagés, mis d'accord (audit du 12 octobre) ================================
   Boutons, menus déroulants, champs d'heure, pastilles de statut, sommaire de
   la distribution, compteur rond : une règle chacun, valable partout. */

/* Le bouton : la police d'affichage en capitales, quelle que soit la taille.
   Une puce employée comme bouton d'action dans un bandeau se dessine comme
   « button small alt ». */
.band-actions > button.chip:not(.cal-side-toggle) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 1rem;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.band-actions > button.chip:not(.cal-side-toggle):hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Un petit bouton ne s'étire pas sur toute la largeur d'une grille. */
.button.small {
  justify-self: start;
}

/* Un seul menu déroulant : la hauteur et l'arrondi d'un champ (.input). Le
   titre-menu du comptoir garde son dessin. */
select:not(.counter-day-pick select) {
  min-height: 42px;
  border-radius: 10px;
  align-items: center;
}

/* Les champs d'heure : « 09:00 » se lit en entier. */
input[type="time"] {
  min-width: 7.5rem;
}

input.qty[type="time"] {
  width: auto;
}

/* Les pastilles de statut gardent la largeur de leur mot, même dans une
   grille ; « retiré », « inactif » : en gris, sans rature. */
.pill-status,
.badge {
  justify-self: start;
  align-self: start;
  width: fit-content;
}

.pill-status.off {
  text-decoration: none;
}

/* Le compteur rond : le « moins » a la même couleur partout ; désactivé, il
   pâlit sans changer de teinte. */
.stepper button.minus:disabled {
  background: var(--tile);
  color: var(--bg);
  opacity: 0.35;
}

/* Le sommaire de la distribution : aucun mot coupé par « … ». Les cases
   passent à la ligne, et les traits qui les séparent ne laissent pas de case
   vide : chaque case trace son bord gauche et son bord haut, et ceux de la
   première colonne et de la première ligne sortent du cadre. */
.dist-summary,
.shop-layout .dist-summary {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.dist-summary .ds-cell {
  border: 0;
  border-left: 1.5px dotted var(--line);
  border-top: 1.5px dotted var(--line);
  margin: -1.5px 0 0 -1.5px;
}

.dist-summary .ds-cell b {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: break-word;
}

@media (min-width: 900px) {
  .dist-summary {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }
}

/* == Communauté, bénévolat, calendrier, sondages (audit du 12 octobre) ====================== */

/* Le calendrier : les flèches et « Liste », de la même hauteur. */
.cal-head .chip,
.cal-head .cal-side-toggle {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  height: 2.4rem;
  min-width: 2.4rem;
  padding: 0 0.85rem;
  line-height: 1;
}

.cal-head .chip:not(.cal-side-toggle) {
  padding: 0;
}

/* Dans la grille, la case brune suffit à marquer la distribution ; le mot
   ne s'y coupe plus. Une pastille d'évènement tient sur deux lignes, sans
   l'heure. */
@media (min-width: 700px) {
  .cal-week .cal-dist {
    display: none;
  }

  .cal-week .ev {
    max-height: calc(2.5em + 0.3rem);
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .cal-week .ev > small {
    display: none;
  }
}

.cal-legend > * {
  white-space: nowrap;
}

/* Sur téléphone, le mois ne se montre qu'une fois : en liste. */
@media (max-width: 699px) {
  .cal .cal-dows,
  .cal .cal-weeks,
  .cal .cal-legend,
  .cal-head .cal-side-toggle {
    display: none;
  }

  .cal-head {
    margin-bottom: 0;
  }

  .cal-layout.no-side .coming {
    display: block;
  }

  .cal-week .cal-num {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .cal-num .cal-dist {
    order: 2;
    margin-left: 0.5rem;
  }
}

/* Sondages : une ligne par sondage, le titre, sa pastille, sa date. */
.poll-rows {
  display: grid;
  gap: 0.4rem;
  max-width: var(--w-text);
  margin-bottom: 1.2rem;
}

.poll-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.8rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-small);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.poll-row:hover {
  background: var(--card);
}

.poll-row-pills {
  display: flex;
  gap: 0.3rem;
}

.poll-row-when {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 700px) {
  .poll-row {
    grid-template-columns: minmax(0, 1fr) auto 16rem;
  }

  .poll-row-when {
    grid-column: auto;
    text-align: right;
  }
}

.band-hint .poll-desc {
  margin-top: 0.4rem;
}

/* Communauté sur téléphone : le nombre de fils, sur la ligne de l'espace,
   à la taille du texte. */
@media (max-width: 520px) {
  .space-count {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
  }

  .space-count b {
    font-size: 0.95rem;
  }
}

/* Gestionnaire › une distribution : une ligne repliée par phase. */
.dist-steps {
  max-width: none;
}

.stat .stat-period {
  font-size: 1rem;
}

.stat-action {
  margin-top: 0.6rem;
}

.offerings-form {
  margin-top: 1rem;
}

.offerings-save {
  margin-top: 0.8rem;
}

/* Trésorerie et Historique : les mêmes tuiles de chiffres (.stat), la période dessous. */
.stat-tiles {
  margin-bottom: 1rem;
}

.stat-tiles .stat .hint {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.stat-tiles .stat span .info {
  vertical-align: middle;
}

td.nowrap {
  white-space: nowrap;
}

.history-note {
  display: block;
  min-width: 16rem;
  max-width: 26rem;
  font-size: 0.85rem;
}

@media (min-width: 901px) {
  .set-row > form.type-row {
    grid-template-columns:
      minmax(10rem, 2fr) minmax(4.5rem, 0.7fr) minmax(7.5rem, 1fr) minmax(7.5rem, 1fr)
      minmax(5rem, 0.8fr) minmax(5rem, 0.8fr) minmax(11rem, 1.4fr);
  }
}

@media (min-width: 700px) {
  .cal-week .ev {
    padding: 0.15rem 0.3rem;
  }

  .cal-week .ev::before {
    margin-right: 0.22rem;
  }
}

/* Gestionnaire › un membre : les faits d'abord, puis une ligne par partie. */
.member-facts {
  margin-bottom: 1rem;
}

.stat .stat-contact {
  display: block;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.stat .stat-contact a {
  color: inherit;
}

.member-steps {
  max-width: none;
}

.member-cancelled {
  margin: 0 0 0.8rem;
}

.member-baseline {
  align-items: end;
  margin-bottom: 0.8rem;
}

.set-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

/* Trésorerie : l'export, ses deux dates nommées. */
.export-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.export-row .field {
  flex: 0 1 12rem;
}

/* Boutique : la précommande dans la palette (pastille au contour caramel,
   point caramel expliqué par une légende) ; le nom de la carte mène à la
   fiche ; en liste, l'économie sur la ligne des caractéristiques. */
.pre-badge {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent);
}

.pre-dot {
  background: var(--accent);
}

.item .note.pre {
  color: var(--text-soft);
}

.pre-legend {
  display: flex;
  align-items: center;
  margin: 0 0 0.6rem;
}

.items.grille h3 .card-title {
  color: inherit;
  text-decoration: none;
}

.items.grille h3 .card-title:hover,
.items.grille h3 .card-title:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.line-meta .m.saving {
  color: var(--ok);
  font-weight: 700;
}

.item .note.weight .info {
  vertical-align: -2px;
}

/* Tableau de bord : les titres sur deux lignes ne décalent pas les autres. */
.org-tiles .tile-title {
  display: flex;
  align-items: flex-end;
  min-height: 2.6em;
  line-height: 1.3;
}

.dash-panels {
  margin-top: 1.2rem;
}

/* Au téléphone, en liste : le prix et son prix au kilo au-dessus du compteur,
   sans chevauchement. */
@media (max-width: 520px) {
  .items.liste .item.line .thumb,
  .items.liste .item.line .line-main {
    grid-row: 1 / span 2;
  }

  .items.liste .item.line .line-price {
    grid-row: 1;
    padding-top: 0.2rem;
  }

  .items.liste .item.line > .stepper {
    grid-row: 2;
    align-self: center;
    padding: 0.2rem 0;
  }
}

/* Le journal des gestionnaires : l'action prend la place. */
.datatable td.journal-action {
  min-width: 24rem;
  white-space: normal;
}

.datatable td[data-col="date"] {
  white-space: nowrap;
}

.journal-pages {
  margin-top: 1rem;
}

/* Centrale : le menu du règlement tient sur une ligne. */
.central-groups select {
  min-width: 11.5rem;
  white-space: nowrap;
}

/* Rapports : les totaux en tuiles, comme ailleurs ; les sous-totaux à part. */
.report-stats {
  margin: 0 0 1rem;
}

.report-subtotals {
  margin-bottom: 1rem;
}

.panel > .panel-action {
  margin-top: 0.9rem;
}

/* La vitrine, « Commander en ligne » : chaque phase sur une ligne, le nom en
   gras dans la phrase, aligné sur le texte des autres étapes. */
.vt-how .phase-list {
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  line-height: 1.55;
}

.vt-how .phase-list li {
  display: block;
}

.vt-how .phase-list b {
  color: var(--text);
}

/* Le dernier fil d'un espace : le point médian suit le titre de près. */
.space-last {
  gap: 0.25rem;
}

/* Une ligne sans résumé (une question fréquente) : le nom prend la place. */
.set-row > summary:has(> .set-row-meta:empty) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.set-row-meta:empty {
  display: none;
}

.budget-row .field {
  flex: 0 1 14rem;
  margin: 0;
}

.budget-row .field .input {
  width: 100%;
}

@media (max-width: 699px) {
  .dist-steps .step-summary,
  .member-steps .step-summary {
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    white-space: normal;
  }
}

.member-facts .stat strong {
  font-size: 1.25rem;
}

.member-facts .stat .stat-contact {
  font-size: 0.85rem;
}

/* Les fournisseurs, côté membres : des tuiles de même hauteur, sans la marge
   d'un panneau, la pastille au bas. */
.supplier-grid {
  grid-auto-rows: 1fr;
}

.supplier-grid .supplier-tile {
  margin: 0;
}

.set-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 0.9rem;
  margin: 0 0 0.8rem;
}

.set-inline .field {
  margin: 0;
}

.set-inline > .check-row {
  align-self: center;
}

.price-rows td.n small {
  display: inline-block;
  min-width: 1.5rem;
  text-align: left;
}

/* Recette : au téléphone, les boutons du bandeau sur toute la largeur, de
   même taille. */
@media (max-width: 640px) {
  .recipe-actions {
    display: grid;
    width: 100%;
  }

  .recipe-actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* Les barres de défilement : fines, dans les couleurs du thème, partout. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--line)) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 45%, var(--line)) padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent) padding-box;
}

/* La période en cours, mise en valeur sans être ouverte d'office. */
.step.current {
  outline: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: -1.5px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.step.current > summary .step-title::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.15em;
}

/* Les cycles de distribution en alternance (de l'inventaire à la veille du
   suivant, ou selon le calendrier type) : deux fonds de case. */
.cal-day.shade-1 {
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

/* Les activités de bénévolat : une grosse icône, toujours la même, comme
   repère (docs/17, § 2.1 bis). */
.vol-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.vol-icon,
.vp-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.vol-icon svg,
.vp-icon svg {
  width: 2.1rem;
  height: 2.1rem;
}

.vol-icon {
  align-self: center;
}

.vol-task.past .vol-icon {
  opacity: 0.55;
}

.type-icon {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-right: 0.55rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  vertical-align: middle;
}

.type-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (max-width: 699px) {
  .vol-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vol-card .vol-actions {
    grid-column: 1 / -1;
  }

  .vol-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
}

/* Facultatif : en petit, en haut à droite, sur la ligne du libellé, en
   italique ; il ne déborde plus sur le bouton qui suit (13 octobre 2026).
   Obligatoire : un astérisque après le libellé. (12 octobre 2026) */
.field.optional,
.join-q.optional {
  position: relative;
}

/* Hors du flux : la boîte reste alignée sur ses voisines. */
.field.optional::after,
.join-q.optional::after {
  content: var(--optional-word, "facultatif");
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
  line-height: 1;
  text-align: right;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.field:has(> :is(input, select, textarea)[required]) > span:first-child::after,
.join-q.required > legend::after {
  content: " *";
  color: var(--accent);
}

[data-optional] + .optional-note,
.optional-note {
  display: block;
  text-align: right;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--muted);
}

/* La bulle structurée (vraque.js) : une ligne par partie, titres en gras. */
.info.rich::after {
  display: none;
}

.info .tip-body {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  display: grid;
  gap: 0.35rem;
  width: max-content;
  max-width: 20rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-small);
  background: var(--text);
  color: var(--bg);
  font: 500 0.8rem/1.4 var(--body);
  font-style: normal;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.3rem);
  transition: opacity 140ms ease, transform 140ms ease;
}

.info .tip-body b {
  font-weight: 800;
}

.info:hover .tip-body,
.info:focus .tip-body {
  opacity: 1;
  transform: translate(-50%, 0);
}

.info.below .tip-body {
  top: calc(100% + 0.5rem);
  bottom: auto;
}

.info.edge-left .tip-body {
  left: 0;
  transform: none;
}

.info.edge-right .tip-body {
  left: auto;
  right: 0;
  transform: none;
}

/* == Mon compte : onglets, tuiles de chiffres, détail du score (audit d'octobre) == */
/* Les tuiles côte à côte, de même hauteur, leur contenu centré verticalement. */
.account-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.account-stats .stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
  margin: 0;
}

.account-stats .stat .hint {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.account-stats .stat span .info {
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

/* La bulle du score ne prend pas le style du libellé de la tuile. */
.account-stats .stat .tip-body span {
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.community-tabs + .account-grid {
  margin-top: 0;
}

.account-orders {
  max-width: var(--w-page);
}

.score-detail > details > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
}

.score-detail > details > summary::-webkit-details-marker {
  display: none;
}

.score-detail .chev {
  margin-left: auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.score-detail > details[open] .chev {
  transform: rotate(-135deg);
}

.score-detail > details {
  margin-bottom: 0.9rem;
}

.score-tasks {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.score-tasks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

/* Profil : l'enregistrement n'apparaît qu'avec une section ouverte. */
.profile-form:not(:has(.step[open])) .save-bar {
  display: none;
}

/* Enregistrement au fil des changements : l'état, discret, dans la ligne. */
.profile-form .step > summary {
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto auto;
}

.autosave-state {
  font: 600 0.78rem/1.2 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.autosave-state.done {
  color: var(--ok);
}

.autosave-state.error {
  color: var(--decline);
}

.profile-form [data-photo-preview][hidden],
.profile-form [data-photo-empty][hidden],
.profile-form [data-photo-cover][hidden],
.profile-form [data-photo-remove][hidden] {
  display: none;
}

@media (max-width: 699px) {
  .profile-form .step > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-form .autosave-state {
    grid-column: 1;
    grid-row: 3;
  }

  .profile-form .autosave-state:empty {
    display: none;
  }
}

/* == Préférences d'achat : sections repliées, icônes (docs/17, § 2.1 bis et 2.2) ===========
   Une ligne par section, sa grosse icône, son résumé ; les raccourcis
   ouvrent la section qu'ils désignent. */
.food-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.habits-form.steps {
  max-width: none;
}

.habit-step > summary {
  grid-template-columns: auto minmax(10rem, 18rem) minmax(0, 1fr) auto;
}

.habit-scales-help {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: -0.3rem 0 0.2rem;
}

.habit-section-icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0.6rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.habit-step .step-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
}

.habit-comments::before {
  content: "· ";
}

.habit-step .step-summary b {
  color: var(--text);
}

.habit-step .habit-row:last-of-type {
  border-bottom: 0;
}

.habit-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--accent);
}

.habit-name {
  min-width: 0;
}

.habit-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.habit-nav-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

@media (max-width: 760px) {
  /* Sur téléphone, les raccourcis tiennent sur une ligne qui défile. */
  .habit-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .habit-nav a {
    white-space: nowrap;
  }

  .habit-step > summary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.2rem 0.9rem;
  }

  .habit-step .step-title {
    grid-column: 2;
    grid-row: 1;
  }

  .habit-step .step-summary {
    grid-column: 2;
    grid-row: 2;
  }

  .habit-section-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0.5rem;
  }

  .habit-step .step-edit {
    display: none;
  }
}

/* Une partie de bulle : son titre en gras sur la même ligne que le texte. */
.info .tip-body > span {
  display: block;
}

.info .tip-body b {
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* Qui voit : la liste directement sur le panneau. */
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.panel-head h2 {
  margin: 0;
}

.visibility-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.visibility-inline label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.visibility-inline select {
  min-width: 10rem;
}

.visibility-inline .autosave-state {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Un réglage oui ou non : un interrupteur plutôt qu'une case (docs/17,
   § 2.1 bis). Les listes à choix multiples (filtres, menus, tableaux,
   choix d'articles) gardent la case. */
.check-row > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 2.3rem;
  height: 1.3rem;
  margin: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.check-row > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--text);
  transition: transform 160ms ease;
}

.check-row > input[type="checkbox"]:checked {
  background: var(--accent);
}

.check-row > input[type="checkbox"]:checked::after {
  transform: translateX(1rem);
  background: var(--accent-ink, #fff);
}

.check-row > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.check-row > input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: default;
}

:is(.multi-menu, .check-menu-list, .filter-grid, .datatable, .dt-columns, .product-pick,
    .access-group, .chip-checks, .check-grid, .join-choices, .recipe-images, table)
  .check-row > input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 3px;
  background: none;
  accent-color: var(--accent);
}

:is(.multi-menu, .check-menu-list, .filter-grid, .datatable, .dt-columns, .product-pick,
    .access-group, .chip-checks, .check-grid, .join-choices, .recipe-images, table)
  .check-row > input[type="checkbox"]::after {
  content: none;
}

/* Les préférences d'achat du compte : une colonne de lecture, et la ligne
   survolée en surbrillance. */
.prefs-panel {
  max-width: var(--w-text);
}

.habit-summary {
  gap: 0;
}

.habit-summary li {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.habit-summary li:hover {
  background: var(--card);
}

/* Toute ligne de liste ou de tableau se surligne au survol. */
.table tbody tr:hover > td,
.table tbody tr:hover > th {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* Les bulles d'information du bandeau (le « i » près du titre) débordent sous
   lui : le fond pleine largeur passe par ::before plutôt que par une ombre
   coupée au clip-path, qui coupait aussi la bulle. */
.band {
  box-shadow: none;
  clip-path: none;
}

.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

/* Le profil d'un membre : la photo à côté du nom, sur une ligne. */
.profile-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.profile-title .avatar.large {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
}

.seen-as select {
  min-width: 13rem;
}

/* La confidentialité sur place : un rond à l'icône du niveau choisi. */
.vis-dot {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

.vis-dot > summary {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  list-style: none;
  cursor: pointer;
}

.vis-dot > summary::-webkit-details-marker {
  display: none;
}

.vis-dot > summary:hover,
.vis-dot[open] > summary {
  border-color: var(--accent);
}

.vis-icon {
  display: inline-grid;
  place-items: center;
}

.vis-icon svg {
  width: 1rem;
  height: 1rem;
}

.vis-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  right: 0;
  display: grid;
  gap: 0.15rem;
  min-width: 12rem;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--panel);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.3);
  font: 500 0.88rem/1.3 var(--body);
  color: var(--text);
}

.vis-head {
  padding: 0.2rem 0.45rem 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.vis-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
}

.vis-option:hover {
  background: var(--card);
}

.vis-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

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

.vis-option:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.vis-menu,
.vis-menu * {
  text-transform: none;
  letter-spacing: 0;
}

.vis-menu .vis-head {
  font-weight: 600;
}

/* Le menu d'un rond placé dans un libellé de champ (.field span) n'en prend
   pas la typographie. */
.field .vis-menu span,
.field-label .vis-menu span,
.field .vis-dot .vis-icon {
  display: inline-grid;
  margin: 0;
  font: 500 0.88rem/1.3 var(--body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}

.field .vis-menu .vis-head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.field .vis-dot .vis-icon {
  color: var(--accent);
}

/* -- Le menu à cocher réutilisable (templates/_multiselect.html) -----------
   Un libellé, un bouton de la hauteur d'un champ, un panneau : recherche,
   « Tout cocher » et « Tout décocher », une case par valeur et son compte. */
.msel {
  position: relative;
  display: grid;
  grid-template-rows: 1rem 2.5rem;
  gap: 0.4rem;
  min-width: 0;
}

.msel-label,
.adv-label {
  display: block;
  margin: 0;
  overflow: hidden;
  font: 700 0.68rem/1rem var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-soft);
}

.msel-menu {
  position: relative;
  min-width: 0;
}

.msel-button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  padding: 0 2.3rem 0 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a36f4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 0.8rem center / 1rem;
  color: var(--text);
  font: 500 0.9rem/1 var(--body);
  list-style: none;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.msel-button::-webkit-details-marker {
  display: none;
}

.msel-button:hover,
.msel-menu[open] > .msel-button {
  border-color: var(--accent);
}

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

.msel-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  gap: 0.5rem;
  box-sizing: border-box;
  width: max(100%, 21rem);
  max-width: calc(100vw - 2rem);
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
}

.msel-menu.msel-end .msel-panel {
  right: 0;
  left: auto;
}

.msel-search {
  box-sizing: border-box;
  width: 100%;
  height: 2.3rem;
  min-height: 0;
  padding: 0 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: 500 0.88rem var(--body);
}

.msel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.msel-actions .button {
  width: 100%;
  min-height: 2.1rem;
  padding: 0 0.4rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.msel-options {
  display: grid;
  gap: 1px;
  max-height: 16rem;
  overflow-y: auto;
}

.msel-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  color: var(--text);
  font: 500 0.88rem/1.3 var(--body);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.msel-option:hover {
  background: var(--card);
}

.msel-option[hidden] {
  display: none;
}

.msel-option input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.msel-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.msel-empty {
  margin: 0.2rem 0.45rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Catalogues : la recherche avancée, une grille de champs de même taille,
   libellés sur une même ligne, champs alignés. */
.search-filters .adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  align-items: start;
  gap: 0.9rem 1rem;
  margin-top: 0.7rem;
  padding: 1rem;
  border-radius: var(--radius-small);
  background: var(--card);
}

.adv-field {
  display: grid;
  grid-template-rows: 1rem 2.5rem;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}

.adv-grid select.input,
.adv-range .input {
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  min-height: 0;
  border-radius: 10px;
  font: 500 0.9rem/1 var(--body);
}

.adv-grid select.input {
  padding: 0 2.3rem 0 0.9rem;
  background-position: right 0.8rem center;
}

.adv-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
}

.adv-range .input {
  padding: 0 0.7rem;
}

@media (max-width: 640px) {
  .search-filters .adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 0.7rem;
    padding: 0.8rem;
  }

}

/* Mon compte › Scores : la période, deux dates et le bouton sur une ligne. */
.period-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.period-form .field {
  margin: 0;
}
.period-form .input {
  width: 11rem;
}
.period-save {
  margin-top: 0.75rem;
}
.score-period .hint {
  margin-top: 0.6rem;
}

/* L'album photo de la Communauté (issue 246) : des albums en cartes, les
   photos en vignettes ; un clic ouvre la photo en grand (le lightbox). */
.album-new {
  margin: 0 0 1.2rem;
}

.album-new > summary,
.album-step > summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.album-new > summary::-webkit-details-marker,
.album-step > summary::-webkit-details-marker {
  display: none;
}

.album-new:not([open]) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.album-new form {
  max-width: var(--w-narrow, 34rem);
}

.album-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.album-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.album-card:hover {
  border-color: var(--accent);
}

.album-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--line);
  color: var(--text-soft);
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-icon {
  width: 3rem;
  height: 3rem;
}

.album-card-text {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem 0.9rem;
}

.album-card-title {
  font-weight: 800;
}

.album-card-meta {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.album-head {
  margin: 0 0 1rem;
}

.album-head h2 {
  margin: 0.8rem 0 0.2rem;
}

.album-description {
  max-width: var(--w-text, 42rem);
  margin: 0.6rem 0 0;
}

.album-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
}

.album-step[open] {
  flex-basis: 100%;
}

.album-visibility {
  margin: 1.2rem 0;
  padding: 0;
  border: 0;
}

.album-visibility legend {
  margin: 0 0 0.45rem 0.2rem;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.album-visibility .seg span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.album-visibility .seg svg {
  width: 1rem;
  height: 1rem;
}

.album-step .panel {
  max-width: var(--w-narrow, 34rem);
  margin-top: 0.6rem;
}

.album-delete {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.album-grid figure {
  margin: 0;
}

.album-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  cursor: zoom-in;
}

.album-thumb:hover,
.album-thumb:focus-visible {
  border-color: var(--accent);
}

.album-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.album-grid figcaption {
  margin: 0.35rem 0.1rem 0;
  font-size: 0.85rem;
}

.album-photo-edit > summary {
  margin: 0.3rem 0.1rem 0;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.album-photo-edit .field {
  margin: 0.5rem 0;
}

.album-photo-buttons {
  display: flex;
  gap: 0.4rem;
}

.album-lightbox {
  max-width: min(94vw, 72rem);
}

.album-lightbox img {
  max-height: 82vh;
  background: #000;
}

@media (max-width: 560px) {
  .album-list {
    grid-template-columns: 1fr;
  }

  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

/* Albums photo (issue 249) : la déclaration de consentement à l'ajout, et la
   tuile de l'accueil avec les vignettes des dernières photos : en 1 × 1 et
   2 × 1, une rangée à côté de l'icône (ce qui ne tient pas est caché) ; en
   1 × 2 et 2 × 2, une grille sous le texte. */
.album-consent {
  align-items: flex-start;
  max-width: var(--w-narrow, 34rem);
  line-height: 1.4;
}

.album-consent input[type="checkbox"] {
  margin-top: 0.15rem;
}

/* « Ajouter des photos » et « Modifier l'album » restent côte à côte, le
   panneau ouvert dessous, sur toute la ligne. */
.album-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.5rem;
}

.album-actions > .album-step {
  display: contents;
}

.album-actions > .album-step > summary {
  grid-row: 1;
}

.album-actions > .album-step::details-content {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* L'approbation n'a de sens que si les membres peuvent ajouter. */
.album-adding:has([name="ajout_membres"]:not(:checked)) .album-approval {
  display: none;
}

.album-approval {
  padding-left: 1.6rem;
}

.album-waiting {
  margin: 0 0 1rem;
  color: #e0a43a;
  font-weight: 700;
}

.album-card-meta .album-waiting {
  margin: 0;
}

.album-grid figure {
  position: relative;
}

.album-pending-pill {
  background: #e0a43a;
  color: #1a1410;
}

.album-grid .album-pending-pill {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  left: 0.5rem;
}

.album-grid .is-pending .album-thumb {
  border-style: dashed;
  border-color: #e0a43a;
}

.album-grid .album-photo-buttons {
  margin-top: 0.4rem;
}

.tile-top {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: auto;
}

.tile-top .tile-icon {
  flex: none;
  margin-bottom: 0;
}

.tile-photos {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  height: 3.6rem;
  overflow: hidden;
}

.tile-photos img {
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.8rem;
  object-fit: cover;
  background: var(--card);
}

.home-tile.size-1x2 .tile-top,
.home-tile.size-2x2 .tile-top {
  display: contents;
}

.home-tile.size-1x2 .tile-top .tile-icon,
.home-tile.size-2x2 .tile-top .tile-icon {
  margin-bottom: auto;
}

.home-tile.size-1x2 .tile-photos,
.home-tile.size-2x2 .tile-photos {
  order: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  height: auto;
  margin-top: 0.7rem;
}

.home-tile.size-2x2 .tile-photos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-tile.size-1x2 .tile-photos img,
.home-tile.size-2x2 .tile-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.home-tile.size-1x2 .tile-photos img:nth-child(n + 5) {
  display: none;
}

/* == Documents des commandes fournisseurs (issue 245) ===================================== */
.po-doc-list {
  display: grid;
  gap: 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  max-width: var(--w-text);
}

.po-doc-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.4rem;
  border-bottom: 1px solid var(--line);
}

.po-doc-list li:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.po-doc-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--text-soft);
}

.po-doc-text {
  display: grid;
  min-width: 0;
}

.po-doc-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.po-doc-actions {
  display: flex;
  gap: 0.4rem;
}

.po-doc-actions form {
  margin: 0;
}

.po-doc-add {
  max-width: var(--w-text);
  border: 1.5px solid var(--line);
}

.po-doc-form {
  display: grid;
  gap: 0.8rem;
}

/* Le numéro, le montant et la date ne servent qu'à une facture. */
.po-doc-form:not(:has(select[name="sorte"] option[value="invoice"]:checked)) .po-invoice-fields {
  display: none;
}

@media (max-width: 699px) {
  .po-doc-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .po-doc-actions {
    grid-column: 1 / -1;
  }
}

/* == Factures en lot (issue 250) ========================================================== */
.batch-drop {
  display: grid;
  gap: 0.6rem;
  max-width: var(--w-text);
}

.batch-drop .hint {
  margin: 0;
}

.batch-pending {
  max-width: var(--w-text);
}

.batch-form {
  max-width: var(--w-text);
}

/* Le nom du fichier, puis la commande proposée sur toute la largeur. */
.batch-file > summary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
}

.batch-file .step-summary {
  grid-column: 1;
  grid-row: 2;
  flex-wrap: wrap;
  row-gap: 0.3rem;
  white-space: normal;
}

.batch-file .step-edit {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.batch-file > summary:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

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

.batch-order {
  overflow: hidden;
  text-overflow: ellipsis;
}

.batch-skipped {
  display: none;
}

/* Un fichier passé : la commande barrée, « Non joint ». */
.batch-file:has(input[name^="joindre-"]:not(:checked)) .batch-order {
  text-decoration: line-through;
}

.batch-file:has(input[name^="joindre-"]:not(:checked)) .batch-skipped {
  display: inline;
  font-weight: 600;
}

/* La commande changée : la raison proposée ne vaut plus. */
.batch-file.changed .batch-pill,
.batch-file:has(input[name^="joindre-"]:not(:checked)) .batch-pill {
  display: none;
}

.batch-body {
  display: grid;
  gap: 0.8rem;
}

.batch-body .hint {
  margin: 0;
}

.batch-invoice {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Le numéro, le montant et la date ne servent qu'à une facture. */
.batch-body:not(:has(select[name^="sorte-"] option[value="invoice"]:checked)) .batch-invoice {
  display: none;
}

.batch-file-actions,
.batch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.batch-actions {
  justify-content: flex-start;
  margin-top: 0.4rem;
}

/* Commande fournisseur en lecture (gestionnaires) : le cadre du formulaire
   sans bordure ni marge. */
fieldset.plain {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* == Organisation › Trésorerie (issue 255) ================================================
   Les opérations en lignes repliées (.step) ; les distributions en lignes
   repliées aux chiffres alignés, une ouverte à la fois. */
.money-steps {
  max-width: none;
  margin-bottom: 1rem;
}

.money-steps .field {
  margin: 0;
}

.money-steps .form-grid {
  align-items: end;
}

.money-steps .export-row {
  margin-top: 0;
}

.money-days {
  max-width: var(--w-text);
}

.money-day-head,
.money-day > summary {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(6.5rem, 1fr)) 1rem;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.4rem;
}

.money-day-head {
  padding-top: 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.money-day-head::after {
  content: "";
}

.money-day {
  border-bottom: 1px solid var(--line);
}

.money-day > summary {
  list-style: none;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.money-day > summary::-webkit-details-marker {
  display: none;
}

.money-day > summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  justify-self: end;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}

.money-day[open] > summary::after {
  transform: rotate(-135deg);
}

.money-day > summary:hover {
  background: var(--card);
}

.money-days .n {
  text-align: right;
}

/* Une bulle d'information dans le libellé ne décale pas le chiffre. */
.stat-tiles .stat span .info {
  margin-block: -0.3rem;
}

.money-day-body {
  padding: 0 0.4rem 0.8rem;
}

.money-day-body .hint {
  margin: 0.5rem 0 0;
}

@media (max-width: 699px) {
  .money-day-head {
    display: none;
  }

  .money-day > summary {
    grid-template-columns: minmax(0, 1fr) auto 1rem;
    gap: 0.2rem 0.8rem;
  }

  .money-day > summary > b {
    grid-column: 1 / 3;
  }

  .money-day > summary > .n {
    display: contents;
  }

  .money-day > summary > .n::before {
    content: attr(data-label);
    grid-column: 1;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .money-day > summary::after {
    grid-column: 3;
    grid-row: 1;
  }

  .money-steps .step-summary {
    white-space: normal;
  }
}

/* == Factures fournisseurs à payer (issue 257) ============================================ */
.bill-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bill-sums {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0;
}

.bill-sums dt {
  color: var(--text-soft);
  font-size: 0.85rem;
}

.bill-sums dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bill-late {
  color: var(--hot);
  font-weight: 600;
}

.bill-action {
  white-space: nowrap;
}

/* Gestionnaire › un membre (issue 254) : six faits, trois par ligne ;
   la fusion de deux fiches, l'aperçu en tableau. */
@media (min-width: 900px) {
  .grid.four.member-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.merge-pick .inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.merge-pick .field {
  margin: 0;
}

.merge-compare th[scope="row"],
.merge-compare tbody th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}

.merge-report {
  margin: 1rem 0;
}

.merge-report div {
  padding: 0.35rem 0;
}

.merge-report dt {
  font-weight: 700;
}

.merge-report dd {
  margin: 0.1rem 0 0;
}

.merge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Un interrupteur dans un champ (« Retirer le logo ») : la hauteur des
   boîtes de saisie du champ ne l'étire pas. */
.field .check-row > input[type="checkbox"] {
  width: 2.3rem;
  height: 1.3rem;
  min-height: 0;
  padding: 0;
}

/* Tuile « Albums photo » : les photos au bas de la tuile, sous le texte, à
   toutes les tailles (Vincent, 13 octobre 2026). */
.home-tile .tile-top {
  display: contents;
}

.home-tile .tile-top .tile-icon {
  margin-bottom: auto;
}

.home-tile .tile-photos {
  order: 1;
  justify-content: flex-start;
  width: 100%;
  flex: none;
  height: 3.2rem;
  margin-top: 0.7rem;
}

.home-tile .tile-photos img {
  width: 3.2rem;
  height: 3.2rem;
}

/* Les pastilles : le texte centré verticalement, même quand la rangée les
   étire (13 octobre 2026). L'espace entre une icône et son texte, que la
   boîte flexible ne garde pas, devient un écart. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

/* Le bouton ⓘ d'un grand titre : centré sur la hauteur de la ligne, à toutes
   les tailles de titre. */
.band-title:has(> .info) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.band-title > .info {
  flex: none;
  margin-left: 0;
}

/* -- Recettes : le choix d'articles (issue 261) -----------------------------
   Filtres et articles choisis en menus (le dessin de .msel), le texte, la
   liste bornée en hauteur. Rayon et provenance : des boutons radio. */
.finder-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0 0 0.6rem;
}

.finder-group-by select {
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  min-height: 0;
  font-size: 0.88rem;
}

.finder-filters {
  width: max(100%, min(21rem, calc(100vw - 4.5rem)));
  max-height: min(26rem, 70vh);
  overflow-y: auto;
}

.finder-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1px 0.3rem;
  margin: 0;
  padding: 0 0 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.finder-group legend {
  padding: 0 0.45rem 0.25rem;
  font: 700 0.68rem/1rem var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.finder-group .msel-option {
  grid-template-columns: auto 1fr;
}

.finder-group .msel-text {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.finder-group input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.finder-filters > .button {
  justify-self: start;
}

.finder .product-pick {
  max-height: 18rem;
  margin-bottom: 0.6rem;
}

.finder-chosen .msel-panel {
  width: 100%;
}

.finder-chosen.is-empty .msel-button {
  background-image: none;
  color: var(--muted);
  cursor: default;
}

.finder-chosen.is-empty .msel-button:hover {
  border-color: var(--line);
}

.finder-chosen-list {
  display: grid;
  gap: 1px;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finder-chosen-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: 500 0.88rem/1.3 var(--body);
  text-align: left;
  cursor: pointer;
}

.finder-chosen-list button:hover,
.finder-chosen-list button:focus-visible {
  background: var(--card);
  color: var(--text);
}

.finder-chosen-list svg {
  flex: none;
  color: var(--muted);
}

.finder-chosen-list button:hover svg {
  color: var(--accent);
}

.finder-chosen .msel-panel > .button {
  justify-self: start;
}

.recipe-finder .recipe-go,
.recipe-finder [data-live-off][hidden] {
  display: none;
}

.recipe-results[aria-busy="true"] .recipe-list {
  opacity: 0.6;
}

@media (max-width: 999px) {
  .recipe-finder .recipe-go:not([hidden]) {
    display: flex;
  }
}

@media (max-width: 600px) {
  .finder .product-pick {
    max-height: 14rem;
  }
}

/* == La vitrine comme site du groupe (issue 263) ======================================== */
.vt-tagline {
  max-width: 38rem;
  margin: 1.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.35;
}

.vt-tagline + .vt-lede {
  margin-top: 1rem;
}

.vt-lede.vt-saving {
  margin-top: 0.8rem;
}

.vt-member-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.vt-member-pages .button {
  width: auto;
  gap: 0.45rem;
}

.vt-member-pages svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.vt-place-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem 3rem;
  max-width: 50rem;
}

.vt-place-contact h3,
.vt-host-card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.2rem;
}

.vt-place-contact address {
  font-style: normal;
  line-height: 1.5;
}

.vt-place-contact .vt-meta {
  margin: 0.4rem 0 1rem;
  color: var(--text-soft);
}

.vt-place-contact .pair {
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
}

.vt-contacts {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-contacts li {
  display: grid;
  gap: 0.1rem;
}

.vt-contacts span {
  color: var(--text-soft);
  font-size: 0.86rem;
}

.vt-contacts a {
  color: var(--accent);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.vt-host-card {
  max-width: 40rem;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-small);
  box-shadow: inset 0 0 0 1.5px var(--accent-ink);
}

.vt-host-card .prose p:last-child {
  margin-bottom: 0;
}

.vt-contacts-edit {
  display: grid;
  gap: 0.4rem;
}

.vt-contacts-edit .vp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem;
}