/* tradeportpilot.com — l'application connectée aux couleurs du site public et de la page de connexion (2026-10-23).
   Fond bleu nuit, surfaces vitrées, filets clairs, accent bleu pétrole, mêmes boutons que l'accueil. Chargé en
   dernier, actif seulement quand une personne connectée travaille (body.is-app) : l'accueil public et la page de
   connexion gardent leur feuille. Presque tout passe par les variables : elles sont redéfinies ici ; les rares fonds
   écrits en dur ailleurs (menu, bandeau, avatar) sont repris un à un plus bas. Les états gardent toujours leur texte. */

body.is-app {
  color-scheme: dark;

  /* fond et surfaces */
  --bg: #0a182b;
  --surface: #0f2239;
  --surface-2: #0c1d32;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  /* textes : « navy » sert aux titres dans les feuilles de base, il devient le blanc des titres */
  --ink: #e6edf6;
  --ink-soft: #c9d5e5;
  --muted: #9aabc1;
  --navy: #f3f7fc;
  --navy-700: #c9d5e5;
  --navy-soft: rgba(255, 255, 255, 0.06);
  --navy-50: rgba(255, 255, 255, 0.045);
  --navy-100: rgba(255, 255, 255, 0.07);
  --navy-200: rgba(255, 255, 255, 0.22);

  /* accent : le pétrole clair de l'accueil pour les textes et les liens ; les boutons gardent le pétrole profond */
  --petrol: #3fa8b1;
  --petrol-700: #8fd3d8;
  --petrol-300: #5fb7be;
  --petrol-100: rgba(95, 183, 190, 0.16);
  --petrol-50: rgba(95, 183, 190, 0.08);
  --primary: #5fb7be;
  --primary-hover: #8fd3d8;
  --primary-ink: #04202a;
  --primary-soft: rgba(95, 183, 190, 0.16);

  /* états : teintes lisibles sur fond sombre, fonds translucides */
  --ok: #6fd6a0;
  --ok-soft: rgba(111, 214, 160, 0.12);
  --warn: #f2c06b;
  --warn-soft: rgba(242, 192, 107, 0.12);
  --bad: #ff9a90;
  --bad-soft: rgba(255, 154, 144, 0.12);
  --info: #93bdf6;
  --info-soft: rgba(147, 189, 246, 0.12);
  --progress: #bba9ff;
  --progress-soft: rgba(187, 169, 255, 0.13);
  --neutral: #c3cddb;
  --neutral-soft: rgba(255, 255, 255, 0.07);
  --demo: #f2cf7a;
  --demo-soft: rgba(226, 179, 60, 0.12);
  --demo-line: #c99a2e;

  /* ombres et anneau de focus */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 36px -14px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 10px 20px -6px rgba(0, 0, 0, 0.45), 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  --ring: 0 0 0 4px rgba(95, 183, 190, 0.3);

  background:
    radial-gradient(60% 40% at 100% 0%, rgba(95, 183, 190, 0.1), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(30, 60, 102, 0.35), transparent 70%),
    #0a182b;
  background-attachment: fixed;
  color: var(--ink);
}

/* --- menu latéral et barre du haut : plus sombres que la page, séparés par un filet ------------------- */

body.is-app .topbar {
  background:
    radial-gradient(120% 50% at 0% 0%, rgba(95, 183, 190, 0.14), transparent 60%),
    linear-gradient(180deg, #081426 0%, #071120 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

body.is-app .brand__mark {
  color: #142d4e;
}

body.is-app .footer {
  color: #7f91a8;
}

/* --- bandeau du pilote ----------------------------------------------------------------------------- */

body.is-app .demo-banner[data-mode="real_only"] {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #c9d5e5;
}

body.is-app .demo-banner[data-mode="real_only"] strong::before {
  background: #5fb7be;
  box-shadow: 0 0 0 3px rgba(95, 183, 190, 0.25);
}

/* --- surfaces vitrées, comme les cartes de l'accueil ------------------------------------------------- */

body.is-app .card,
body.is-app .stat,
body.is-app .offer-card,
body.is-app .table-wrap,
body.is-app .notice,
body.is-app .empty,
body.is-app .kpis > * {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: transparent;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.7);
}

body.is-app .notice--info {
  background-image: linear-gradient(160deg, rgba(147, 189, 246, 0.12), rgba(147, 189, 246, 0.05));
}

body.is-app .notice--ok {
  background-image: linear-gradient(160deg, rgba(111, 214, 160, 0.12), rgba(111, 214, 160, 0.05));
}

body.is-app .notice--warn {
  background-image: linear-gradient(160deg, rgba(242, 192, 107, 0.13), rgba(242, 192, 107, 0.05));
}

body.is-app .notice--bad {
  background-image: linear-gradient(160deg, rgba(255, 154, 144, 0.13), rgba(255, 154, 144, 0.05));
}

/* Les tableaux : en-tête discret, lignes séparées par un filet, survol en clair. */
body.is-app .table thead th {
  background: rgba(255, 255, 255, 0.04);
  color: #9fb2c9;
}

body.is-app .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Le bandeau du tableau de bord : le dégradé de l'accueil, un filet clair pour le détacher du fond. */
body.is-app .hero {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(95, 183, 190, 0.3), transparent 60%),
    radial-gradient(50% 90% at 0% 100%, rgba(30, 60, 102, 0.85), transparent 70%),
    linear-gradient(135deg, #12304f 0%, #0b1c33 100%);
}

body.is-app .hero h1,
body.is-app .page-head h1 {
  background: linear-gradient(100deg, #ffffff 0%, #e6f6f7 55%, #9fe0e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- boutons : ceux de l'accueil ---------------------------------------------------------------------- */

body.is-app .btn {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #eef4fa;
  box-shadow: none;
}

body.is-app .btn:hover {
  border-color: rgba(159, 224, 229, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body.is-app .btn--primary,
body.is-app .hero .btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, #0b838e 0%, #006d77 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(11, 131, 142, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body.is-app .btn--primary:hover,
body.is-app .hero .btn--primary:hover {
  border-color: transparent;
  background: linear-gradient(180deg, #0d93a0 0%, #007b86 100%);
  color: #ffffff;
}

body.is-app .btn--danger {
  border-color: rgba(255, 154, 144, 0.45);
  background: rgba(255, 154, 144, 0.1);
  color: #ffb3ab;
}

body.is-app .btn--ghost {
  border-color: transparent;
  background: transparent;
}

body.is-app .btn[disabled],
body.is-app .btn[disabled]:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #6f8299;
}

/* --- champs ------------------------------------------------------------------------------------------- */

body.is-app .input,
body.is-app select.input,
body.is-app textarea.input {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(4, 12, 24, 0.55);
  color: #eef4fa;
}

body.is-app .input::placeholder {
  color: #7086a0;
}

body.is-app .input:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

body.is-app .input:focus {
  border-color: #5fb7be;
}

body.is-app select.input option {
  background: #0f2239;
  color: #eef4fa;
}

/* --- fenêtres et messages ---------------------------------------------------------------------------- */

body.is-app .dialog {
  border-color: rgba(255, 255, 255, 0.14);
  background: #0f2239;
  color: var(--ink);
}

body.is-app .dialog::backdrop {
  background: rgba(3, 9, 18, 0.6);
}

body.is-app .toast {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #12304f;
}

/* Les codes et références : pastille sombre, texte pétrole clair. */
body.is-app .ref,
body.is-app code {
  border-color: rgba(95, 183, 190, 0.3);
  background: rgba(95, 183, 190, 0.1);
  color: #9fe0e5;
}

/* Les liens du contenu (pas ceux du menu ni les boutons) : pétrole clair. */
body.is-app .main a:not(.btn):not(.nav__link) {
  color: #7cc7cd;
}

body.is-app .main a:not(.btn):not(.nav__link):hover {
  color: #b3e6ea;
}

/* --- couleurs écrites en dur dans les feuilles de base (relevé du 2026-10-23) ------------------------- */

body.is-app .lead {
  color: #c9d5e5;
}

body.is-app .notice--info {
  border-color: rgba(147, 189, 246, 0.28);
  border-left-color: #93bdf6;
  color: #d6e6fb;
}

body.is-app .notice--ok {
  border-color: rgba(111, 214, 160, 0.28);
  border-left-color: #6fd6a0;
  color: #d3f3e2;
}

body.is-app .notice--warn {
  border-color: rgba(242, 192, 107, 0.3);
  border-left-color: #f2c06b;
  color: #fbe6c0;
}

body.is-app .notice--bad {
  border-color: rgba(255, 154, 144, 0.3);
  border-left-color: #ff9a90;
  color: #ffd9d4;
}

body.is-app .notice--demo,
body.is-app .notice--off {
  color: #f6e2ae;
}

body.is-app .notice--note {
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: #5fb7be;
  color: var(--ink);
}

body.is-app .scope__limit,
body.is-app .summary__list li.is-limit {
  color: #f2c06b;
}

body.is-app .details--tech,
body.is-app .pre,
body.is-app .source-text,
body.is-app .field--internal,
body.is-app .offer-preview {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(4, 12, 24, 0.45);
  color: var(--ink);
}

body.is-app .table td {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.is-app .row-local,
body.is-app .table--list tbody tr.row-local {
  background: rgba(242, 192, 107, 0.07);
}

body.is-app .row-out,
body.is-app .table--list tbody tr.row-out,
body.is-app .table--ranking tbody tr.row-out {
  background: rgba(255, 255, 255, 0.025);
}

body.is-app tr.is-flash > * {
  background: rgba(242, 192, 107, 0.22) !important;
}

body.is-app mark.span.is-active {
  color: #1d1400;
}

body.is-app .btn--danger:hover {
  border-color: rgba(255, 154, 144, 0.7);
  background: rgba(255, 154, 144, 0.16);
  color: #ffd9d4;
}

/* --- bannière principale du tableau de bord : une grande photo (port, porte-conteneurs) ----------------- */
/* L'image vit dans web/assets/img/banniere-port.png ; absente, le dégradé du dessous reste seul. Un voile bleu
   nuit garde le titre lisible à gauche ; la photo entre par un léger recul (1,8 s), sauf en mouvement réduit. */

body.is-app .hero--photo {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 34vw, 480px);
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(135deg, #12304f 0%, #0b1c33 100%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}

body.is-app .hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 20, 36, 0.92) 0%, rgba(8, 20, 36, 0.7) 34%, rgba(8, 20, 36, 0.18) 68%, rgba(8, 20, 36, 0.05) 100%),
    linear-gradient(0deg, rgba(8, 20, 36, 0.75) 0%, rgba(8, 20, 36, 0) 50%),
    url("/assets/img/banniere-port.png") 68% 55% / cover no-repeat;
  transform-origin: 70% 60%;
  animation: hero-photo-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.is-app .hero--photo::after {
  content: none;
}

body.is-app .hero--photo h1 {
  max-width: 18ch;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

body.is-app .hero--photo .hero__lead {
  max-width: 52ch;
  color: #d5e2f0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
}

@keyframes hero-photo-in {
  from {
    opacity: 0.4;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  body.is-app .hero--photo {
    min-height: 420px;
  }

  body.is-app .hero--photo::before {
    background:
      linear-gradient(0deg, rgba(8, 20, 36, 0.95) 0%, rgba(8, 20, 36, 0.7) 50%, rgba(8, 20, 36, 0.2) 100%),
      url("/assets/img/banniere-port.png") 72% 50% / cover no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-app .hero--photo::before {
    animation: none;
  }
}

/* --- invitations reçues (ADR-074) : une carte par organisation, deux réponses --------------------------- */

body.is-app .received {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 16px;
  margin-top: 14px;
}

body.is-app .received > .notice {
  grid-column: 1 / -1;
}

body.is-app .received__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: rgba(95, 183, 190, 0.28);
  background-image:
    radial-gradient(80% 120% at 100% 0%, rgba(95, 183, 190, 0.16), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
}

body.is-app .received__card h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

body.is-app .received__card .form__actions {
  margin-top: 6px;
}

/* --- espace acheteur (2026-10-24) : bannière plus basse, où en est la demande, étapes compactes, messages ------- */

/* La bannière du tableau de bord : la même photo, moitié moins haute ; le titre reste lisible. */
body.is-app .hero--photo.hero--compact {
  min-height: clamp(180px, 17vw, 240px);
  padding: clamp(20px, 3vw, 32px) clamp(22px, 3.4vw, 40px);
}

body.is-app .hero--photo.hero--compact h1 {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem);
}

body.is-app .hero--photo.hero--compact .hero__lead {
  margin-top: 6px;
}

@media (max-width: 640px) {
  body.is-app .hero--photo.hero--compact {
    min-height: 220px;
  }
}

/* L'entrée « Messages » du menu : le nombre de messages non lus. */
.nav__badge {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--petrol-300, #5fb7be);
  color: #04202a;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

/* Où en est la demande : quatre réponses, lisibles d'un coup d'œil. */
body.is-app .standing {
  border-left: 4px solid var(--line-strong);
}

body.is-app .standing--warn {
  border-left-color: var(--warn);
  background-image: linear-gradient(90deg, var(--warn-soft), transparent 55%);
}

body.is-app .standing--primary,
body.is-app .standing--info {
  border-left-color: var(--primary);
  background-image: linear-gradient(90deg, var(--primary-soft), transparent 55%);
}

body.is-app .standing--ok {
  border-left-color: var(--ok);
  background-image: linear-gradient(90deg, var(--ok-soft), transparent 55%);
}

.standing__list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.standing__row {
  display: grid;
  grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
}

.standing__row dt {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.standing__row dd {
  margin: 0;
  line-height: 1.5;
}

.standing__row dd strong {
  font-size: 1.08rem;
}

.standing__missing {
  display: grid;
  gap: 6px;
}

@media (max-width: 640px) {
  .standing__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Un terme et son explication, ouverte à la demande. */
.term {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.explain {
  display: inline-block;
  max-width: 68ch;
}

.explain > summary {
  display: inline;
  cursor: pointer;
  color: var(--primary-hover);
  font-size: 0.86rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  list-style: none;
}

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

.explain[open] > summary {
  margin-bottom: 4px;
}

.explain > p {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.dl--plain dd {
  display: grid;
  gap: 4px;
  justify-items: start;
}

.to-specify {
  color: var(--warn);
  font-weight: 700;
}

/* Les étapes, compactes : l'étape en cours ressort ; les suivantes ne montrent que leur titre. */
.steps--compact .step {
  padding-bottom: 14px;
}

.steps--compact .step--later {
  opacity: 0.62;
}

.steps--compact .step--later p {
  display: none;
}

.steps--compact .step.is-focus > div {
  padding: 10px 14px;
  border: 1px solid rgba(95, 183, 190, 0.35);
  border-radius: 12px;
  background: var(--primary-soft);
}

.steps--compact .step--todo.is-focus > div {
  border-color: rgba(242, 192, 107, 0.4);
  background: var(--warn-soft);
}

/* À traiter : une carte par chose qui attend l'acheteur. */
.attention-list {
  display: grid;
  gap: 10px;
}

.attention {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--surface-2);
}

.attention--complete,
.attention--correct,
.attention--submit,
.attention--confirm {
  border-left-color: var(--warn);
}

.attention--message {
  border-left-color: var(--info);
}

.attention--update {
  border-left-color: var(--ok);
}

.attention__body {
  min-width: 0;
}

.attention__body p {
  margin: 0;
}

.attention__what {
  font-weight: 750;
}

.attention__title {
  margin-top: 2px !important;
  color: var(--ink-soft);
}

.attention__next {
  margin-top: 4px !important;
  color: var(--muted);
  font-size: 0.92rem;
}

.attention > .btn {
  flex: none;
}

@media (max-width: 640px) {
  .attention {
    flex-direction: column;
    align-items: stretch;
  }
}

.empty-line {
  margin: 0;
  color: var(--muted);
}

.who-you {
  color: var(--warn);
  font-weight: 700;
}

.subhead {
  margin: 22px 0 8px;
  font-size: 1.05rem;
}

.waiting-list {
  display: grid;
  gap: 8px;
}

.dossier-list {
  display: grid;
  gap: 14px;
}

.dossier-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dossier-card__head .card__title {
  margin-bottom: 2px;
}

.links-list {
  display: grid;
  gap: 10px;
}

.more-actions {
  margin-top: 4px;
}

/* La conversation d'une demande : l'historique qui défile, nos messages à droite, les leurs à gauche. */
.conversation__scroll {
  position: relative;
  max-height: 440px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
  border-radius: 12px;
}

.conversation__list {
  display: grid;
  gap: 10px;
}

.msg {
  max-width: min(78%, 640px);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.msg--ours {
  justify-self: end;
  border-color: rgba(95, 183, 190, 0.3);
  background: var(--primary-soft);
}

.msg--theirs {
  justify-self: start;
}

.msg.is-unread {
  border-color: rgba(147, 189, 246, 0.55);
  box-shadow: 0 0 0 1px rgba(147, 189, 246, 0.25);
}

.msg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.86rem;
}

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

.msg__text {
  margin: 6px 0 0;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.conversation__empty {
  margin: 0;
}

.conversation__form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .msg {
    max-width: 92%;
  }
}

/* La liste des conversations. */
.thread-list {
  display: grid;
  gap: 8px;
}

.thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.thread-row.is-unread {
  border-left: 4px solid var(--info);
}

.thread-row__link {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.thread-row__link:hover .thread-row__title {
  text-decoration: underline;
}

.thread-row__title {
  font-weight: 750;
}

.thread-row__last {
  overflow: hidden;
  color: var(--ink-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-row__meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.thread-row__badges {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 640px) {
  .thread-row {
    flex-direction: column;
    align-items: stretch;
  }

  .thread-row__last {
    white-space: normal;
  }
}

.start-conversation__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.start-conversation__row .input {
  flex: 1 1 260px;
  min-width: 0;
}

/* Les listes de l'espace acheteur et des messages : sans numéro ni puce (les cartes portent déjà leur repère). */
.conversation__list,
.thread-list,
.attention-list,
.dossier-list,
.waiting-list,
.links-list,
.standing__missing {
  list-style: none;
  padding-left: 0;
}

/* Le menu de l'acheteur sur un petit écran : ses six entrées visibles d'un coup (deux rangées de trois, l'icône au-dessus
   du libellé), le nombre de messages non lus compris ; l'équipe garde sa barre qui défile. */
@media (max-width: 860px) {
  .topbar .nav.nav--buyer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .nav.nav--buyer a {
    position: relative;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    font-size: 0.78rem;
    text-align: center;
    white-space: normal;
  }

  .nav.nav--buyer a.is-active {
    box-shadow: inset 0 -2px 0 var(--petrol-300);
  }

  .nav.nav--buyer .nav__badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 26px);
    margin: 0;
    padding: 0 6px;
    font-size: 0.7rem;
  }
}

/* --- espace fournisseur et catalogue (ADR-076) : fiches produit, recherche, formulaire --------------------------- */

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  list-style: none;
  padding-left: 0;
}

.product-card__link {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}

.product-card__link:hover {
  border-color: rgba(95, 183, 190, 0.45);
}

.product-card.is-archived .product-card__link {
  border-left-color: var(--line-strong);
  opacity: 0.75;
}

.product-card__title {
  font-size: 1.05rem;
  font-weight: 750;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.product-card__supplier {
  color: var(--ink-soft);
  font-weight: 650;
}

.product-card__facts {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.product-card__date {
  color: var(--muted);
  font-size: 0.85rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 4px 0 16px;
}

.filters .input {
  flex: 1 1 220px;
  min-width: 0;
}

.filters .inline {
  white-space: nowrap;
}

.pre-line {
  margin: 0;
  white-space: pre-line;
}

.required {
  color: var(--warn);
  font-size: 0.85rem;
  font-weight: 600;
}

.price-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.price-kind legend {
  margin-bottom: 6px;
  font-weight: 650;
}

.product-form .grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0 14px;
}

/* Le menu du fournisseur (quatre entrées) sur un petit écran : une seule rangée de quatre. */
@media (max-width: 860px) {
  .topbar .nav.nav--buyer.nav--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav.nav--buyer.nav--four a {
    font-size: 0.74rem;
  }
}