/* ============================================================
   DraftIA — Application-specific styles.
   Extras that build on tokens.css. Do not duplicate token
   primitives here — only patterns that are project-specific
   (queue panes, timeline scaffolding, etc.).
   ============================================================ */

@import url("tokens-YKs39U-.css");

/* ------------- Generic utilities not in tokens ------------- */

a { color: inherit; }

.flex-1 { flex: 1; }
.gap-sm { gap: 6px; }
.gap-md { gap: 12px; }
.gap-lg { gap: 20px; }

.mt-sm { margin-top: 6px; }
.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 24px; }

/* ------------- Toast (used after queue actions) ------------- */

.toast-stack {
  /* The stack spans a corner of the page : only the toasts take clicks. */
  pointer-events: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
}
.toast {
  pointer-events: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--acc-teal);
  border-radius: var(--r);
  padding: 10px 14px;
  box-shadow: var(--sh-3);
  font-size: var(--fs-md);
  color: var(--fg-1);
  min-width: 240px;
  max-width: 360px;
}
.toast[data-controller] { cursor: pointer; }
.toast.error { border-left-color: var(--acc-rose); }
.toast.amber { border-left-color: var(--acc-amber); }

/* A disabled button must look it — and not light up on hover. Lives here,
   not in tokens.css : that file is a verbatim copy of the design handoff. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ------------- « À valider » — the person's own version ------------- */
/* The text area of « Modifier » (queue/_suggestion.html.twig, _fact.html.twig).
   The list and detail of the old queue, which the Knowledge Base used until
   lot 5 of the design board (2026-10-13), went with it. */

.queue-edit-area {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--bg-2);
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.55;
  resize: vertical;
}

/* ------------- Base de connaissance — formulaires d'un fait ------------- */

/* Question and information textareas of « Nouveau fait » and of the fact
   detail. Paired with .input (tokens.css) for the themed background, text,
   border and focus ring : their old inline styles set no background, so the
   browser's white stayed in dark mode. */
.kb-fact-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: var(--fs-base);
  line-height: 1.5;
  resize: vertical;
}

/* ------------- Ce que DraftIA apprend (leçons tirées des réponses envoyées) ------------- */

.lessons-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
}
.lessons-intro {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: 1.55;
}
.lessons-intro p { margin: 0 0 6px; }
.lessons-intro p:last-child { margin: 0; }
.lessons-intro b { color: var(--fg-0); font-weight: 500; }
.lessons-section-sub {
  margin-left: 6px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0;
}

.lesson-list {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.lesson-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.lesson-row:last-child { border-bottom: 0; }
/* Seen 3 times or more : the repetition that makes a rule. */
.lesson-row.is-recurrent { border-left: 3px solid var(--acc-teal); padding-left: 13px; }
.lesson-body { flex: 1; min-width: 0; }
.lesson-question {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  margin-bottom: 2px;
}
.lesson-text {
  font-size: var(--fs-md);
  color: var(--fg-0);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.lesson-seen-in {
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.lesson-seen-in a { color: var(--fg-2); font-family: var(--font-mono); }
.lesson-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}
.lesson-count { font-family: var(--font-mono); color: var(--fg-1); }
/* Where the lesson stands (lot 2) : observed → proposed → applied | dismissed. */
.lesson-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg-2);
  white-space: nowrap;
}
.lesson-status a { color: inherit; text-decoration: underline; }
.lesson-status.is-confirmed { border-color: var(--acc-teal); color: var(--acc-teal); }
.lesson-status.is-proposed { border-color: var(--acc-amber); color: var(--acc-amber); background: var(--acc-amber-soft); }
.lesson-status.is-applied { border-color: var(--acc-teal); color: var(--acc-teal); background: var(--acc-teal-soft); }
.lesson-status.is-dismissed { color: var(--fg-3); border-style: dashed; }
@media (max-width: 720px) {
  .lesson-row { flex-direction: column; }
  .lesson-meta { align-items: flex-start; text-align: left; }
}

/* ------------- Timeline (Écran 02) ------------- */

.timeline-chart {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}
.timeline-chart svg { width: 100%; height: auto; display: block; }

.swimlane-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  fill: var(--fg-3);
}

.swimlane-bar {
  rx: 3;
  ry: 3;
}

.event-dot { cursor: pointer; transition: r 0.12s; }
.event-dot:hover { r: 7; }

/* ------------- Réglages (since 2026-10-13) ------------- */
/* The Réglages page of one box as the design board validated by Kurukha
   draws it, on a computer (cf. DECISIONS.md 2026-10-12 « Planche de
   design : les choix de Kurukha », lot 2) : sections under a short title,
   rows in cards, the mode first. The phone's variant is under « Phone and
   tablet » (« Réglages ») : one card for the mode, overlines for titles.
   It replaced the mode's big card, its two compact cards and the
   confirmation modal, and the « Activé / Désactiver » cards. */

.settings-sub { margin: 4px 0 24px; }
.settings-page {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.settings-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-section-title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}

/* A card of rows : a title and a sentence on the left, its control on the
   right, a thin line between two rows. */
.settings-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.settings-card > * + * { border-top: 1px solid var(--border-soft); }
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 14px 18px;
}
.settings-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-title { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.settings-row-desc { font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
.settings-row-mono { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
/* « Langue des brouillons » (2026-10-24) : the two choices and the button,
   on one line when there is room, wrapped on a phone. */
.settings-row-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: var(--fs-base);
  color: var(--fg-2);
}
.settings-row-fields .select { max-width: 100%; }
.settings-row-control { flex-shrink: 0; align-self: center; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* « En savoir plus » : the sentence and the two words are the summary of
   the explanation folded under them. */
.settings-more > summary {
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.settings-more > summary::-webkit-details-marker { display: none; }
.settings-more > summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
.settings-more-link {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.settings-more[open] .settings-more-link { color: var(--fg-2); }
.settings-more-body {
  margin-top: 8px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--fg-2);
}
.settings-more-body p { margin: 0 0 6px; }
.settings-more-body p:last-child { margin-bottom: 0; }
@media (hover: hover) {
  .settings-more > summary:hover .settings-more-link { color: var(--fg-1); }
}

/* A row that folds : the connection, the categories on a phone, the box
   switched off. Its summary is the row, a chevron turning down when open. */
.settings-fold-row > summary { list-style: none; }
.settings-fold-row > summary::-webkit-details-marker { display: none; }
.settings-fold-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
}
.settings-fold-summary > .icon { flex-shrink: 0; color: var(--fg-3); transition: transform 0.15s ease; }
.settings-fold-row[open] > .settings-fold-summary > .icon { transform: rotate(90deg); }
.settings-fold-summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
.settings-fold-content { padding: 0 18px 16px; }
.settings-fold-action { margin: 12px 0 0; }
.settings-fold-count { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--fg-2); }
/* The categories : their chips on a computer, folded on a phone. */
.settings-categories-fold { display: none; }

/* A switch : the option's submit button (_switch.html.twig). A 44 px
   target, its 40 × 24 track lined up with the title. Off, a grey track ;
   on, the teal of « active » ; the knob in the card's colour. While Turbo
   posts (the form is aria-busy), the knob already goes where it was sent. */
.settings-switch-row .switch { margin: -11px -4px -11px 0; }
.switch {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.switch-track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--fg-3);
  transition: background 0.15s ease;
}
.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.switch[aria-checked="true"] .switch-track,
.settings-switch-row[aria-busy="true"] .switch[aria-checked="false"] .switch-track { background: var(--acc-teal); }
.switch[aria-checked="true"] .switch-knob,
.settings-switch-row[aria-busy="true"] .switch[aria-checked="false"] .switch-knob { transform: translateX(16px); }
.settings-switch-row[aria-busy="true"] .switch[aria-checked="true"] .switch-track { background: var(--fg-3); }
.settings-switch-row[aria-busy="true"] .switch[aria-checked="true"] .switch-knob { transform: none; }
.switch:focus-visible { outline: none; }
.switch:focus-visible .switch-track { outline: 2px solid var(--acc-violet); outline-offset: 2px; }

/* The mode's block : a Turbo frame (_mode.html.twig) — the three choices,
   then the thresholds or the confirmation, then « En savoir plus ». */
turbo-frame.mode-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mode-off-note {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--fg-2);
}
.mode-off-note a { color: var(--acc-violet); font-weight: 500; }
.mode-choices-form { margin: 0; }
.mode-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
/* A choice : a button, no link — no underlined line (Kurukha, 2026-10-07). */
.mode-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  box-shadow: var(--sh-1);
  color: var(--fg-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mode-choice-head { display: flex; align-items: center; gap: 10px; }
.mode-choice-dot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
}
.mode-choice-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mode-choice-name { font-size: 15px; font-weight: 600; color: var(--fg-0); }
.mode-choice-tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--acc-violet); }
.mode-choice-sentence { font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
/* The mode in force : a light ground. The one chosen — the same, or the
   one waiting for « Confirmer » — : the dot and the edge in the accent. */
.mode-choice.is-current { background: linear-gradient(var(--acc-violet-soft), var(--acc-violet-soft)) var(--bg-1); }
.mode-choice[aria-checked="true"] { border-color: var(--acc-violet); box-shadow: 0 0 0 1px var(--acc-violet); }
.mode-choice[aria-checked="true"] .mode-choice-dot { border-color: var(--acc-violet); }
.mode-choice[aria-checked="true"] .mode-choice-dot::after { background: var(--acc-violet); }
.mode-choice:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
turbo-frame.mode-block[aria-busy="true"] .mode-choice { cursor: progress; }
@media (hover: hover) {
  .mode-choice:not([aria-checked="true"]):hover { border-color: var(--border-strong); }
}

/* The Hybrid thresholds (_thresholds.html.twig) : the two sliders side by
   side, the sentence that tells them under them. */
.mode-thresholds {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.threshold-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}
.threshold-slider { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.threshold-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.threshold-slider-head label { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.threshold-slider-value { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--acc-violet); white-space: nowrap; }
.threshold-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--acc-violet); cursor: pointer; }
.threshold-slider-ends { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); color: var(--fg-2); }
.threshold-slider-ends > span:last-child { text-align: right; }
.threshold-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--acc-violet-soft);
}
.threshold-summary p { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--fg-0); }
.threshold-summary b { font-weight: 600; }
.threshold-summary .threshold-summary-count { font-size: var(--fs-base); color: var(--fg-2); }
.threshold-saved { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-base); color: var(--fg-2); }
.threshold-saved .icon { color: var(--acc-teal); }
/* A save that failed, in its place (threshold-slider_controller.js). */
.threshold-failed { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-base); color: var(--acc-rose); }
.threshold-saved[hidden],
.threshold-failed[hidden] { display: none; }

/* « En savoir plus » on the mode in force (_mode_more.html.twig). */
.mode-more > summary { display: inline-flex; align-items: center; min-height: 28px; }
.mode-more-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.mode-more-h { margin: 0 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-1); }
.mode-pros, .mode-cons {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.mode-pros li, .mode-cons li { margin: 4px 0; }
.mode-pros li::marker { color: var(--acc-teal); }
.mode-cons li::marker { color: var(--acc-amber); }

/* The confirmation of a mode, in place (_mode_confirm.html.twig) : on an
   amber ground, what the switch would validate first. */
.mode-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--acc-amber) 45%, var(--border));
  border-radius: var(--r-lg);
  background: linear-gradient(var(--acc-amber-soft), var(--acc-amber-soft)) var(--bg-1);
}
.mode-confirm-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg-0); }
.mode-confirm-text { display: flex; flex-direction: column; gap: 6px; }
.mode-confirm-count { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-0); }
.mode-confirm-count b { font-weight: 600; }
.mode-confirm-notes { margin: 0; padding-left: 18px; font-size: var(--fs-base); line-height: 1.5; color: var(--fg-1); }
.mode-confirm-notes li + li { margin-top: 2px; }
.mode-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.mode-confirm-actions > form { margin: 0; display: flex; }

/* « Zone sensible » (_danger_zone.html.twig) : the row, then what switching
   the box off — or on — implies, unfolded in place. */
.settings-zone-title { color: var(--acc-rose); }
.settings-zone-fold.is-on-switch .settings-zone-title { color: var(--fg-0); }
.settings-zone-button { flex-shrink: 0; color: var(--acc-rose); border-color: var(--acc-rose); background: transparent; }
.settings-zone-fold.is-on-switch .settings-zone-button { color: var(--acc-teal); border-color: var(--acc-teal); }
.settings-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 18px 16px;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--acc-rose-soft);
}
.settings-zone-fold.is-on-switch .settings-confirm { background: var(--acc-teal-soft); }
.settings-confirm p { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); }
.settings-confirm .settings-confirm-title { font-weight: 600; color: var(--fg-0); }
.settings-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; }

/* « Comment DraftIA travaille » (_how_it_works.html.twig) : three cards on
   a computer, an icon and one line each ; a list of rows on a phone. */
.how-it-works-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.how-it-works-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  box-shadow: var(--sh-1);
  color: var(--fg-1);
  text-decoration: none;
}
.how-it-works-icon { display: flex; padding-top: 2px; color: var(--acc-violet); }
.how-it-works-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.how-it-works-label { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.how-it-works-desc { font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
/* The chevron is the phone's. */
.how-it-works-row > .icon { display: none; }
.how-it-works-row:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
@media (hover: hover) {
  .how-it-works-row:hover { border-color: var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .switch-track,
  .switch-knob,
  .settings-fold-summary > .icon { transition: none; }
}

/* ------------- Settings tech grid ------------- */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) {
  .tech-grid { grid-template-columns: minmax(0, 1fr); }
}

.setting-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  align-items: center;
}
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row .setting-label { color: var(--fg-3); }
.setting-row .setting-value { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--fs-xs); }

.operator-details-body > .tech-grid { margin-top: 8px; }

/* ------------- Empty state ------------- */

.empty-state {
  padding: 36px 28px;
  text-align: center;
  color: var(--fg-3);
}
.empty-state .empty-title {
  font-size: var(--fs-md);
  color: var(--fg-1);
  margin-bottom: 6px;
  font-weight: 500;
}

/* ------------- Stat card — three periods at once (Activité en direct) ------------- */
/* Since 2026-10-07 each KPI of the live activity shows its last 24 h, 3 days
   and 7 days together (DECISIONS.md « Activité en direct : plus de
   sélecteurs, les trois périodes d'un coup ») : the 24 h figure is the card's
   value, its period muted ahead of the delta ; the two others sit at the
   card's foot, quieter. Here, not in tokens.css : that file is the design's
   verbatim copy. */
.stat .delta .period { color: var(--fg-3); white-space: nowrap; }

/* The cards of a row share its height ; the periods go to the foot of each,
   so they line up from one card to the next, chips or not above them. */
.stat.has-periods { display: flex; flex-direction: column; }
.stat .periods { margin-top: auto; padding-top: 12px; }
.stat .periods dl {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--fs-sm);
}
.stat .periods dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.stat .periods dt { color: var(--fg-3); white-space: nowrap; }
.stat .periods dd {
  margin: 0;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* ------------- Health card ------------- */

.health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.health-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
}
.health-row .label { color: var(--fg-2); }
.health-row .value { margin-left: auto; font-family: var(--font-mono); color: var(--fg-1); font-size: var(--fs-xs); }

/* ------------- Banner (top-of-screen alert) ------------- */

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r);
  margin-bottom: 18px;
  font-size: var(--fs-md);
  border: 1px solid;
}
.banner.error    { background: var(--acc-rose-soft);   border-color: var(--acc-rose);   color: var(--acc-rose); }
.banner.warning  { background: var(--acc-amber-soft);  border-color: var(--acc-amber);  color: var(--acc-amber); }
.banner.info     { background: var(--acc-blue-soft);   border-color: var(--acc-blue);   color: var(--acc-blue); }
.banner.success  { background: var(--acc-teal-soft);   border-color: var(--acc-teal);   color: var(--acc-teal); }
.banner-icon { display: flex; flex-shrink: 0; }
.banner-icon svg { width: 18px; height: 18px; }
.banner-msg { flex: 1; line-height: 1.5; color: var(--fg-1); }

/* ------------- Empty state card (large) ------------- */

.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 56px 24px;
  background: var(--bg-1);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  text-align: center;
}
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  color: var(--fg-3);
  margin-bottom: 8px;
}
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); letter-spacing: -0.01em; }
.empty-state-sub { margin: 0; font-size: var(--fs-md); color: var(--fg-2); max-width: 480px; line-height: 1.5; }

/* ------------- Theme toggle (segmented) ------------- */

.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 2px;
  gap: 0;
  margin: 0;
}
.theme-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  background: transparent;
  border-radius: calc(var(--r) - 2px);
  cursor: pointer;
  color: var(--fg-3);
  transition: background 0.12s, color 0.12s;
}
.theme-btn:hover { color: var(--fg-1); }
.theme-btn.on { background: var(--bg-1); color: var(--fg-0); box-shadow: var(--sh-1); }
.theme-btn svg { width: 14px; height: 14px; }

/* ------------- Sidebar — health dots per mailbox + alert count ------------- */

.health-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.health-dot.ok    { background: var(--acc-teal); }
.health-dot.warn  { background: var(--acc-amber); }
.health-dot.error { background: var(--acc-rose); animation: pulse-dot 1.4s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.nav-item .nav-count.alert {
  background: var(--acc-amber-soft);
  color: var(--acc-amber);
}

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

.onboarding-shell {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 56px 24px;
  background: var(--bg-0);
}
.onboarding-card {
  width: min(720px, 100%);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  box-shadow: var(--sh-2);
}
.onboarding-card h1 {
  margin: 0 0 4px;
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.onboarding-card .muted-sub {
  margin: 0 0 24px;
  font-size: var(--fs-md);
  color: var(--fg-2);
}

.stepper {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  align-items: center;
}
.stepper-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--fg-3);
}
.stepper-item .num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}
.stepper-item.current .num { background: var(--acc-violet); color: #fff; border-color: var(--acc-violet); }
.stepper-item.done .num    { background: var(--acc-teal);   color: #fff; border-color: var(--acc-teal); }
.stepper-item.current { color: var(--fg-0); font-weight: 500; }
.stepper-item.done    { color: var(--fg-1); }
.stepper-bar {
  flex-shrink: 0;
  height: 1px;
  width: 24px;
  background: var(--border);
}

.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboarding-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.onboarding-form .input,
.onboarding-form .select {
  font-size: var(--fs-md);
  padding: 8px 12px;
}
.onboarding-form textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-mono);
}

/* Where the pre-filled IMAP settings come from (step 1, imap-guess_controller.js) :
   discreet for a known provider or host, quieter for a guess to check, amber
   when the box cannot be connected (Proton). */
.imap-guess-hint {
  margin: 6px 0 0;
  color: var(--fg-2);
  line-height: 1.45;
}
.imap-guess-hint[data-source="convention"] { color: var(--fg-3); }
.imap-guess-hint[data-source="unsupported"] { color: var(--acc-amber); }

.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ------------- Topbar action zone ------------- */

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------- Draft detail screen ------------- */

.draft-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  .draft-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
.draft-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.draft-body {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  white-space: pre-wrap;
  line-height: 1.65;
  color: var(--fg-1);
  min-height: 320px;
}

/* ------------- Sidebar — the current mailbox, its pages, the boxes ------------- */
/* Organised around the current box since 2026-10-07 (DECISIONS.md « La barre
   latérale s'organise autour de la boîte en cours ») : its header, its pages
   with one icon each, then « Boîtes + » and the list of boxes. The « + Nouvelle
   boîte » button at the bottom is gone : the « + » next to « Boîtes » took its
   place. */

/* The header : the box every entry under it is about. */
.mailbox-head {
  margin: 0 0 6px;
  padding: 8px 10px 9px;
  /* The product's accent, so the current box reads at a glance — and the
     same tint marks it in the list below (Kurukha, 2026-10-07). */
  border: 1px solid color-mix(in srgb, var(--acc-violet) 70%, transparent);
  border-left: 3px solid var(--acc-violet);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--acc-violet) 22%, var(--bg-1));
}
.mailbox-head:not(.off) .mailbox-head-label { color: var(--acc-violet); }
/* A deactivated box keeps a neutral look : no accent on what is off. */
.mailbox-head.off { background: var(--bg-2); border-color: var(--border); }
.mailbox-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.mailbox-head-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.mailbox-head-email {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-0);
  /* A very long address wraps — before its @ when it can, cf. the <wbr> —
     rather than losing its end to an ellipsis : the domain tells boxes
     apart too. */
  overflow-wrap: anywhere;
}
.mailbox-head.off .mailbox-head-email { color: var(--fg-2); }

/* Its pages. The icon slot (16 px, slightly dimmed) is tokens.css's
   `.nav-item svg` ; the page displayed gets its icon at full strength. */
.nav-item.active .icon { opacity: 1; }

/* « Comment DraftIA travaille » (since 2026-10-09, cf. DECISIONS.md « menu de
   la boîte ») : the three pages that explain or check, under one line that
   folds. The line reads like an entry, one step quieter ; its chevron turns
   down when open, and the pages sit one step in, under it. */
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group-summary { font-size: var(--fs-sm); color: var(--fg-3); user-select: none; }
.nav-group-summary .icon { transition: transform 0.15s ease; }
.nav-group[open] > .nav-group-summary .icon { transform: rotate(90deg); }
.nav-group-summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
.nav-group-entries { padding-left: 12px; }

/* « Boîtes » and its « + » : add a box, i.e. the onboarding. */
.nav-section-boxes { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.nav-section-add {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  color: var(--fg-3);
  text-decoration: none;
}
.nav-section-add:hover { background: var(--bg-2); color: var(--fg-0); }
.nav-section-add:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 1px; }

/* The boxes : dot · address · what waits (its queue's count, « off »).
   The current box is highlighted like the page displayed. */
.mailbox-row.active { background: color-mix(in srgb, var(--acc-violet) 16%, var(--bg-1)); }
.mailbox-row-meta { display: inline-flex; align-items: center; gap: 6px; }
.mailbox-row .nav-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-radius: 999px;
  padding: 1px 6px;
  background: var(--acc-amber-soft);
  color: var(--acc-amber);
}
.mailbox-row.off {
  opacity: 0.55;
}
.mailbox-row.off .email { text-decoration: line-through; }
.mailbox-row.off .health-dot { background: var(--fg-4); }
.mode-pill.off {
  color: var(--fg-3);
  background: var(--bg-3);
}

/* Read aloud by screen readers, never shown : « 3 en attente » after a count. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------- Login page (focus mode) ------------------------- */

.login-body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  margin: 0;
  padding: 24px;
  font-family: var(--font-sans);
  color: var(--fg-0);
}

.login-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  /* DraftIA's mark, as the sidebar's (tokens.css, .brand-mark). */
  background: linear-gradient(135deg, var(--acc-violet), var(--acc-teal));
  box-shadow: 0 14px 30px -12px rgba(124, 58, 237, .7);
  color: white;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 12px;
}

.login-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--fg-0);
}

.login-subtitle {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  margin: 0;
}

.login-banner {
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: var(--fs-sm);
  margin-bottom: 18px;
  border: 1px solid;
}
.login-banner-error {
  background: var(--acc-rose-soft);
  border-color: var(--acc-rose);
  color: var(--acc-rose);
}
.login-banner-success {
  background: var(--acc-teal-soft);
  border-color: var(--acc-teal);
  color: var(--acc-teal);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  font-weight: 500;
}

.login-input {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: var(--fs-md);
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
}
.login-input:focus {
  outline: none;
  border-color: var(--acc-violet);
  box-shadow: 0 0 0 3px var(--acc-violet-soft);
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
}

.login-submit {
  margin-top: 4px;
  background: var(--acc-violet);
  color: white;
  border: none;
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-sans);
}
.login-submit:hover {
  filter: brightness(1.05);
}

.login-footer {
  margin-top: 24px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  line-height: 1.5;
}

/* ------------------------- Landing page (placeholder) ------------------------- */

.landing-body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-0);
  font-family: var(--font-sans);
}

.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-0);
}

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--acc-violet), var(--acc-teal));
  color: white;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-brand-name {
  font-weight: 600;
  font-size: 18px;
}

.landing-nav { display: flex; gap: 12px; }

.landing-hero {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 24px 48px;
  text-align: center;
}

.landing-headline {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 24px 0;
  color: var(--fg-0);
}
@media (max-width: 600px) {
  .landing-headline { font-size: 32px; }
  /* The header on a phone (since 2026-10-12) : the brand and « Se
     connecter » on one line. « Pas encore inscrit ? » steps aside — the
     hero's « Demander un accès » leads to the same page. */
  .landing-header { padding: 12px 16px; }
  .landing-nav a.muted { display: none; }
  .landing-nav .btn { white-space: nowrap; }
  .landing-hero { padding: 48px 16px 32px; }
}

.landing-subheadline {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-1);
  margin: 0 auto 24px;
  max-width: 620px;
}

.landing-tagline {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 16px 20px;
  border-left: 3px solid var(--acc-violet);
  background: var(--acc-violet-soft);
  text-align: left;
  border-radius: 8px;
}
.landing-tagline strong { color: var(--fg-0); }

.landing-cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-pillars {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.landing-pillar {
  padding: 28px 24px;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.landing-pillar-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.landing-pillar h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}
.landing-pillar p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-2);
}

.landing-footer {
  text-align: center;
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.landing-footer a { color: var(--acc-violet); }

/* ------------------------ Rules page ------------------------ */
/* Since 2026-10-09 (cf. DECISIONS.md « Inventaire de l'interface », priority
   7) : the writing instructions in the lead, six plain sentences, the rest
   folded behind « Voir le détail ». The tinted boxes use the stylesheet's
   real colour names : the --bg-amber / --accent-violet they named never
   existed, and they showed untinted (anomaly 3). */

.rules-lead { margin: 0 0 12px 0; font-size: var(--fs-md); color: var(--fg-2); }
.rules-lead a, .rules-always a, .rules-detail a, .rules-closing a { color: var(--acc-violet); }

/* « Ce que DraftIA fait toujours » : one line each, a check before it. */
.rules-always {
  list-style: none;
  margin: 0;
  padding: 6px 20px;
}
.rules-always li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fg-1);
}
.rules-always li + li { border-top: 1px solid var(--border-soft); }
.rules-always li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 10px;
  font-weight: 600;
  color: var(--acc-teal);
}
.rules-always b { color: var(--fg-0); font-weight: 600; }

/* « Voir le détail » : sections 3 to 5, folded. */
.rules-detail { margin: 24px 0 0; }
.rules-detail > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-1);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  color: var(--fg-1);
}
.rules-detail > summary::-webkit-details-marker { display: none; }
.rules-detail > summary::before { content: '▸'; color: var(--fg-3); font-size: 10px; }
.rules-detail[open] > summary::before { content: '▾'; }
.rules-detail > summary:hover { background: var(--bg-2); }
.rules-detail > summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
.rules-detail-hint { font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
.rules-detail[open] > summary { margin-bottom: 8px; }

.rules-notice {
  padding: 16px 20px;
  background: var(--acc-amber-soft);
  border-color: var(--acc-amber);
}
.rules-closing {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--acc-violet-soft);
  border-color: var(--acc-violet);
}

.rule-card {
  padding: 16px 20px;
  margin-bottom: 16px;
}

.rule-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.rule-prompt-content {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 8px 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--fg-1);
  line-height: 1.5;
  overflow-x: auto;
}

/* Inline prompt editor — matches .rule-prompt-content visually so the
   transition from view to edit is minimal (same monospace, same paddings,
   same border tokens). */
.rule-prompt-editor {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  line-height: 1.5;
  resize: vertical;
  min-height: 160px;
}
.rule-prompt-editor:focus {
  outline: 2px solid var(--acc-violet);
  outline-offset: 0;
  border-color: transparent;
}

.rule-detection-hints {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  color: var(--fg-1);
}

.rule-before, .rule-after {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  margin: 2px 0;
}
.rule-before { color: var(--fg-2); }
.rule-after { color: var(--acc-teal); }

/* ------------------------ Budget projection card ------------------------ */

.budget-card {
  padding: 16px 20px;
}

.budget-card-unlimited {
  background: var(--acc-violet-soft);
  border-color: var(--acc-violet);
}

.budget-card-safe {
  background: var(--acc-teal-soft);
  border-color: var(--acc-teal);
}

.budget-card-tight {
  background: var(--acc-amber-soft);
  border-color: var(--acc-amber);
}

.budget-card-danger {
  background: var(--acc-rose-soft);
  border-color: var(--acc-rose);
}

.budget-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.budget-card-title {
  font-weight: 600;
  font-size: var(--fs-md);
}

.budget-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.budget-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.budget-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
}

.budget-bar {
  position: relative;
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}

.budget-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--fg-2);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.budget-card-safe .budget-bar-fill {
  background: var(--acc-teal);
}

.budget-card-tight .budget-bar-fill {
  background: var(--acc-amber);
}

.budget-card-danger .budget-bar-fill {
  background: var(--acc-rose);
}

.budget-bar-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 12px;
  background: var(--fg-1);
  opacity: 0.6;
}

.budget-card-projection {
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.budget-icon {
  display: inline-block;
  margin-right: 6px;
}

/* ------------------------ Concierge agenda (admin) ------------------------ */

.agenda-bucket-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 16px 0 8px 0;
  padding: 6px 12px;
  border-radius: var(--r);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.agenda-bucket-atcap {
  background: var(--acc-rose-soft);
  color: var(--acc-rose);
  border: 1px solid var(--acc-rose);
}

.agenda-bucket-atrisk {
  background: var(--acc-rose-soft);
  color: var(--acc-rose);
  border: 1px solid var(--acc-rose);
  opacity: 0.9;
}

.agenda-bucket-watching {
  background: var(--acc-amber-soft);
  color: var(--acc-amber);
  border: 1px solid var(--acc-amber);
}

/* ------------------------ Operator view (« Détails techniques ») ------------------------ */
/* What only the operator sees — ROLE_OPERATOR, or the operator inside a
   client's account (cf. DECISIONS.md 2026-10-09 « Inventaire de l'interface :
   trop d'informations de journal pour un client », priority 1) : a folded
   block with a dashed edge, set apart from what the client sees, and the
   « Opérateur » badge, also worn by a single operator-only element (the
   month's cost bar). Tokens only : the light and dark themes alike. */
.operator-details {
  margin: 24px 0 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  background: var(--bg-1);
}
.operator-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.operator-details > summary::-webkit-details-marker { display: none; }
.operator-details > summary::before { content: '▸'; color: var(--fg-3); font-size: 10px; }
.operator-details[open] > summary::before { content: '▾'; }
.operator-details > summary:hover .operator-details-title { color: var(--fg-0); }
.operator-details > summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; border-radius: var(--r); }
/* In a narrow column (an email's page), the hint gives way first : the title
   and the badge never wrap. */
.operator-details-title { font-weight: 500; color: var(--fg-1); white-space: nowrap; }
.operator-details-hint { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); }
.operator-details > summary .operator-badge { margin-left: auto; flex-shrink: 0; }
.operator-details-body { padding: 4px 14px 14px; }
.operator-details-body > .stat-grid { margin-bottom: 12px; }

.operator-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc-violet);
  background: var(--acc-violet-soft);
  white-space: nowrap;
  vertical-align: middle;
}

/* Label / value pairs : a model, a cost, a fingerprint, a raw status. */
.operator-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
}
.operator-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.operator-facts dt { color: var(--fg-3); white-space: nowrap; }
.operator-facts dd {
  margin: 0;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-1);
  text-align: right;
  overflow-wrap: anywhere;
}

/* Raw messages — an API error, the Generator's NO_DRAFT — as they came. */
.operator-raw { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); overflow-wrap: anywhere; }
.operator-raw-block {
  margin: 6px 0 0;
  padding: 10px 12px;
  white-space: pre-wrap;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--acc-rose);
}
.operator-health { padding: 14px 16px; }
.operator-incidents { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.operator-incidents li { display: flex; align-items: baseline; gap: 10px; }
.operator-incidents li .mono { flex-shrink: 0; }

/* The sidebar's variant, in its foot : compact, on the sidebar's ground. */
.operator-details.compact { margin: 0; background: transparent; }
.operator-details.compact > summary { padding: 8px 10px; font-size: var(--fs-xs); }
.operator-details.compact .operator-details-body { padding: 0 10px 10px; }
.operator-details.compact .operator-facts { gap: 4px; font-size: var(--fs-xs); }

/* ------------------------ Sidebar — its foot (since 2026-10-09) ------------------------ */
/* Where the « health » block was (priority 2) : nothing for the client while
   all is well, an alert when he has something to do — drafts that failed,
   whose emails wait for his own reply —, the operator's details. Pushed to
   the bottom of the column, as the old block was. */
/* Who is signed in, and « Se déconnecter » (cf. DECISIONS.md 2026-10-22) :
   the very bottom of the column, under the foot when there is one. */
.sidebar-account {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-foot + .sidebar-account { margin-top: 12px; }
.sidebar-account-email,
.box-switcher-account-email {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  overflow-wrap: anywhere;
}
.sign-out { margin: 0; }

/* Inside a client's account (« Se connecter en tant que ») : whose, and the
   way back, at the top of every page — in the operator's colour. */
.impersonation-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: var(--r);
  color: var(--acc-violet);
  background: var(--acc-violet-soft);
  font-size: var(--fs-sm);
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--acc-amber);
  border-radius: var(--r);
  background: var(--acc-amber-soft);
  color: var(--acc-amber);
  font-size: var(--fs-xs);
  line-height: 1.45;
  text-decoration: none;
}
.sidebar-alert.error { border-color: var(--acc-rose); background: var(--acc-rose-soft); color: var(--acc-rose); }
.sidebar-alert:hover { background: color-mix(in srgb, currentColor 16%, var(--bg-1)); }
.sidebar-alert:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.sidebar-alert-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.sidebar-alert-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--fg-1); }
.sidebar-alert-text b { font-weight: 600; color: var(--fg-0); }
/* Which box, with several : its address, as the box list writes it. */
.sidebar-alert-box { font-family: var(--font-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------ Activité en direct — the client's summary (since 2026-10-09) ------------------------ */
/* The week's drafts, what waits on the owner, the similarity as a sentence
   (priority 3, as Kurukha amended it). Two tiles until 2026-11-03, one
   sentence beside a card since : « Les pages du client, plus vivantes », at
   the end of this file. The operator's tiles, per period, moved into
   « Détails techniques ». */
.activity-summary { margin-bottom: 24px; }
.activity-similarity { margin: 12px 2px 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); }
a.activity-waiting:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }

/* ======================== Phone and tablet (since 2026-10-12) ========================
   Nothing in this stylesheet was meant for a narrow screen, and on a phone the
   page was wider than the screen (cf. DECISIONS.md 2026-10-12 « L'interface
   devient utilisable sur téléphone »). Two breakpoints from here on :
     - under 900 px, the app shell : a bar at the top and tabs at the bottom
       take the sidebar's place ;
     - under 640 px, a phone : one column, tables as cards or scrolling in
       their own frame, nothing wider than the screen.
   tokens.css stays the design's verbatim copy : its rules are overridden
   here, never edited. */

/* ------------------------ App shell — a bar at the top, tabs at the bottom ------------------------ */
/* Under 900 px the 256 px column left too little room for the page. The
   navigation of the phone mockups validated by Kurukha takes its place (cf.
   DECISIONS.md 2026-10-12 « Planche de design : les choix de Kurukha ») ; it
   replaced the drawer of the same morning :
     - the bar at the top (_mobile_bar.html.twig) : the current box, whose
       address unfolds the box selector (box-switcher_controller.js), and its
       mode ; on a page under a tab, the way back to that tab's page ;
     - the tabs at the bottom (_tab_bar.html.twig) : the box's four pages.
   Above 900 px both bars stay hidden and the sidebar is the column it was. */
.mobile-bar,
.tab-bar { display: none; }

/* The page's grid column may shrink below its content : a wide table scrolls
   in its own frame rather than widening the whole page, on a desktop too. */
.main { min-width: 0; }

/* The page is laid out under an iPhone's notch and home indicator since the
   tab bar arrived (viewport-fit=cover, base.html.twig) : its edges keep
   clear of them with env(safe-area-inset-*), which reads 0 anywhere else —
   on a computer these are tokens.css's paddings, unchanged. */
.sidebar { padding-left: max(14px, env(safe-area-inset-left, 0px)); }
.main { padding-right: max(36px, env(safe-area-inset-right, 0px)); }

@media (max-width: 899.98px) {
  .app { display: block; }
  .sidebar { display: none; }

  /* The room the tab bar takes at the bottom : 52 px tabs, 4 px above them,
     a border, and below them an iPhone's home indicator — 4 px without one.
     The page's end, the toasts and a scroll into view keep clear of it. */
  :root { --tab-bar-height: calc(57px + max(4px, env(safe-area-inset-bottom, 0px))); }

  /* The bar at the top, 56 px as the mockups draw it. Sticky : the box and
     its selector stay one tap away down a long page. */
  .mobile-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
  }
  .mobile-bar .brand-mark {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
  }
  .mobile-bar .mode-pill { flex-shrink: 0; margin-left: auto; }

  /* The current box : its address, cut with an ellipsis rather than
     wrapped — the bar keeps one height —, and a chevron. The whole of it is
     the button, 44 px high at least, a finger's target. */
  .box-switcher-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--fg-0);
    font: inherit;
    cursor: pointer;
  }
  .box-switcher-toggle:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
  .box-switcher-current {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    font-weight: 500;
  }
  .box-switcher-toggle.off .box-switcher-current { color: var(--fg-2); }
  .box-switcher-toggle .brand-name { white-space: nowrap; }
  .box-switcher-toggle .icon { flex-shrink: 0; color: var(--fg-3); transition: transform 0.15s ease; }
  .mobile-bar.is-open .box-switcher-toggle .icon { transform: rotate(180deg); }

  /* A page under a tab : the way back to the tab's page, where the box was. */
  .mobile-bar-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    margin-left: -8px;
    padding: 0 8px 0 4px;
    border-radius: var(--r);
    font-size: 15px;
    font-weight: 500;
    color: var(--acc-violet);
    text-decoration: none;
  }
  .mobile-bar-back:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }

  /* The box selector, unfolded under the bar, over the page dimmed. While
     it is open the bar rises above the tab bar and the toasts : the dimmed
     ground covers them too, a tap on it folds the list. */
  .mobile-bar.is-open { z-index: 70; }
  .box-switcher-backdrop {
    position: fixed;
    inset: 56px 0 0;
    background: rgba(13, 17, 23, 0.55);
  }
  [data-theme="light"] .box-switcher-backdrop { background: rgba(24, 24, 27, 0.32); }
  .box-switcher {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px));
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    animation: box-switcher-in 0.16s ease-out;
  }
  .box-switcher[hidden],
  .box-switcher-backdrop[hidden] { display: none; }
  /* Open, the page behind stays put. */
  html.has-open-switcher { overflow: hidden; }

  .box-switcher-title {
    margin: 4px 10px 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .box-switcher-list { margin: 0; padding: 0; list-style: none; }
  /* A box : dot · address, and in words what the sidebar's dot and tooltip
     say (deactivated, drafts that failed) · what waits on it · a tick on
     the current one, highlighted as in the sidebar. */
  .box-switcher-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: var(--r);
    color: var(--fg-1);
    text-decoration: none;
  }
  .box-switcher-row.active { background: color-mix(in srgb, var(--acc-violet) 16%, var(--bg-1)); color: var(--fg-0); }
  .box-switcher-row.off { color: var(--fg-3); }
  .box-switcher-row.off .health-dot { background: var(--fg-4); }
  .box-switcher-row > .icon { flex-shrink: 0; color: var(--acc-violet); }
  .box-switcher-box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .box-switcher-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
  }
  .box-switcher-state { font-size: var(--fs-sm); color: var(--fg-3); }
  .box-switcher-state.warn { color: var(--acc-amber); }
  .box-switcher-state.error { color: var(--acc-rose); }
  .box-switcher-count {
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--acc-amber-soft);
    color: var(--acc-amber);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }
  /* Small amber and rose words, a shade darker on a light ground to stay
     legible — the mockups' only departure from tokens.css. */
  [data-theme="light"] .box-switcher-state.warn,
  [data-theme="light"] .box-switcher-count { color: #b45309; }
  [data-theme="light"] .box-switcher-state.error { color: #be123c; }

  .box-switcher-add {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 10px;
    border-radius: var(--r);
    font-weight: 500;
    color: var(--acc-violet);
    text-decoration: none;
  }
  .box-switcher-list + .box-switcher-add { margin-top: 6px; border-top: 1px solid var(--border-soft); border-radius: 0; }
  .box-switcher-row:focus-visible,
  .box-switcher-add:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }

  /* The theme : its switch leaves the page's head on a phone (« Shared
     pieces » below) — the mockups show none there. Each button says its
     theme, 44 px high. */
  .box-switcher-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border-soft);
  }
  .box-switcher-theme-label { font-size: var(--fs-md); color: var(--fg-1); }
  .box-switcher-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border-soft);
  }
  .box-switcher .theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: 44px;
    padding: 0 14px;
    color: var(--fg-2);
    font-family: inherit;
    font-size: var(--fs-md);
  }
  .box-switcher .theme-btn.on { color: var(--fg-0); }
  .box-switcher .theme-btn svg { width: 16px; height: 16px; }

  /* The tabs at the bottom : four, as the mockups draw them — an icon over
     a word, the page displayed (or the page above it) in the accent, the
     count of « À valider » as a badge. 52 px high, a finger's target ; the
     home indicator below them stays clear. */
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    padding: 4px max(6px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    background: var(--bg-1);
    border-top: 1px solid var(--border);
  }
  .tab-bar-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: var(--r);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.2;
    color: var(--fg-2);
    text-decoration: none;
  }
  .tab-bar-item.active { color: var(--acc-violet); }
  .tab-bar-item:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
  .tab-bar-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-bar-count {
    position: absolute;
    top: 3px;
    left: calc(50% + 5px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--acc-amber);
    color: var(--bg-0);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1;
  }
  /* White on tokens.css's light amber reads at 3:1 only : a darker amber. */
  [data-theme="light"] .tab-bar-count { background: #b45309; color: #ffffff; }

  /* A mouse on a narrow window : the row under the pointer. A finger leaves
     :hover on after a tap, hence the media query. */
  @media (hover: hover) {
    .box-switcher-row:not(.active):hover,
    .box-switcher-add:hover { background: var(--bg-2); }
    .tab-bar-item:not(.active):hover { color: var(--fg-0); }
  }

  /* An anchor (« Voir ces emails ») or a scroll into view lands under the
     sticky bar, not behind it, and above the tab bar. */
  html {
    scroll-padding-top: 68px;
    scroll-padding-bottom: calc(var(--tab-bar-height) + 8px);
  }

  .main { padding: 20px max(24px, env(safe-area-inset-right, 0px)) 72px max(24px, env(safe-area-inset-left, 0px)); }
  /* The tab bar never hides the end of the page, nor a toast ; a toast
     keeps clear of the notch too. */
  .has-tab-bar .main { padding-bottom: calc(var(--tab-bar-height) + 24px); }
  .toast-stack { right: max(24px, env(safe-area-inset-right, 0px)); }
  .has-tab-bar ~ .toast-stack { bottom: calc(var(--tab-bar-height) + 12px); }
}
/* On a tablet the list unfolds as a card under the address, not across the
   whole screen. */
@media (min-width: 640px) and (max-width: 899.98px) {
  .box-switcher {
    left: max(8px, env(safe-area-inset-left, 0px));
    right: auto;
    width: 400px;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
  }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .box-switcher { animation: none; }
  .box-switcher-toggle .icon { transition: none; }
}
@keyframes box-switcher-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .main { padding: 16px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
}

/* ------------------------ Grids — one column on a phone ------------------------ */

/* Heads made of chips, a gauge, an age and an address : they wrap rather
   than run past the card's edge. Unchanged where they fit. */
.card-head { flex-wrap: wrap; row-gap: 6px; }
.section-h { flex-wrap: wrap; gap: 4px 12px; }

@media (max-width: 1080px) {
  /* The operator's figures (« Détails techniques ») : four cards in a row
     were down to 150 px each. */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

  /* A setting's label above its value : beside a 160 px label, an address
     had no room left. */
  .setting-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .setting-row .setting-value { overflow-wrap: anywhere; }

  /* A row of buttons or chips wraps rather than overflows. */
  .row-flex { flex-wrap: wrap; }
}

/* ------------------------ Tables — never wider than the screen ------------------------ */
/* On a phone the tables that matter become cards (« Derniers emails ») or
   blocks (the anonymisation rules) ; the others scroll in their own frame
   (`table-scroll`), never the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  /* The header row stays for screen readers, out of sight : each cell says
     what it is on its own. */
  .recent-emails thead,
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .recent-emails,
  .recent-emails tbody,
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; }
  /* A tap leaves :hover on : no row stays tinted. */
  .recent-emails tbody tr:hover td,
  .table-stack tbody tr:hover td { background: none; }

  /* « Derniers emails » (Activité) : a card per email — what to do and
     « Détail », then when and what, then the similarity, labelled. */
  .recent-emails tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "status status detail"
      "received category detail"
      "similarity similarity detail";
    align-items: center;
    gap: 6px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .recent-emails tbody tr:last-child { border-bottom: 0; }
  .recent-emails td { padding: 0; border: 0; }
  .recent-emails .recent-status { grid-area: status; }
  .recent-emails .recent-detail { grid-area: detail; }
  .recent-emails .recent-received { grid-area: received; }
  .recent-emails .recent-category { grid-area: category; min-width: 0; }
  .recent-emails .recent-category .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .recent-emails .recent-similarity { grid-area: similarity; display: flex; align-items: center; gap: 8px; }
  .recent-emails .recent-similarity::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--fg-3); }
  .recent-emails .recent-similarity.is-empty { display: none; }

  /* The anonymisation rules (Règles, « Voir le détail ») : a block per rule. */
  .table-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td { padding: 3px 0; border: 0; }
  .table-stack .rule-before,
  .table-stack .rule-after { overflow-wrap: anywhere; }
}

/* ------------------------ Shared pieces — the top of a page, banners, toasts ------------------------ */

@media (max-width: 899.98px) {
  /* The page's head, without its breadcrumb nor its theme switch since
     2026-10-12 : the bars of the phone mockups say which box and which page
     (« App shell »), and the switch sits in the box selector. The page's own
     links stay, and wrap ; with none, the head takes no room at all. */
  .topbar .crumbs,
  .topbar .theme-toggle { display: none; }
  .topbar:not(:has(.topbar-actions a)) { display: none; }
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* A finger, not a pointer : buttons at 40 px high at least, the theme
     switch of the onboarding too. */
  .btn { min-height: 40px; }
  .theme-btn { width: 38px; height: 34px; }

  /* 16 px in a field : under that, Safari on an iPhone zooms in when the
     field takes the focus, and leaves the page zoomed — wider than the
     screen. */
  .input,
  .select,
  .onboarding-form .input,
  .onboarding-form .select,
  .login-input,
  .kb-fact-field,
  .queue-edit-area,
  .rule-prompt-editor,
  textarea,
  select { font-size: 16px; }
}

@media (max-width: 640px) {
  /* A banner's action under its message, aligned with the text, rather
     than squeezing the message into a narrow column beside it. */
  .banner { flex-wrap: wrap; align-items: flex-start; }
  .banner-msg { flex: 1 1 calc(100% - 30px); min-width: 0; }
  .banner > .btn { margin-left: 30px; }

  /* Toasts across the bottom, inside the screen : 360 px wide, they ran
     off its left edge. */
  .toast-stack { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: 12px; }
  .toast { min-width: 0; max-width: none; }

  .empty-state-card { padding: 40px 16px; }
}

/* ------------------------ Réglages ------------------------ */
/* The phone mockup of the design board (since 2026-10-13, lot 2 — cf.
   DECISIONS.md 2026-10-12 « Planche de design : les choix de Kurukha ») :
   overlines for titles, the mode in one card with a row per choice, the
   rows 52 px high. Between 640 and 900 px a tablet lays the page out as a
   computer does — its width holds the three choices side by side —, with
   a finger's targets : 44 px at least, as on a phone. */
@media (max-width: 899.98px) {
  /* The bar at the top already names the box and its state. */
  .settings-sub { display: none; }
  /* A finger, not a pointer — on a tablet too : every target of the page
     44 px high at least. « En savoir plus » : the whole sentence before it
     is the target. */
  .settings-page .btn { min-height: 44px; justify-content: center; }
  .settings-more > summary { display: block; min-height: 44px; padding: 3px 0; }
  .mode-more > summary { min-height: 44px; }
  .threshold-slider input[type="range"] { height: 44px; }
  .settings-page .operator-details > summary { min-height: 44px; }
  /* The way to « Réactiver » on a line of its own. */
  .mode-off-note { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 0; }
  .mode-off-note a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) {
  .settings-page { gap: 24px; }
  .settings-section { gap: 10px; }
  .settings-section-title {
    padding: 0 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .settings-row { min-height: 52px; padding: 12px 14px; }
  .settings-row-title { font-size: 15px; font-weight: 500; }
  /* A row with a button : the button under its text, across the row. */
  .settings-row:has(> .settings-row-control) { flex-direction: column; align-items: stretch; gap: 10px; }
  .settings-row-control { align-self: stretch; }
  .settings-row-control form { width: 100%; }
  .settings-row-control .btn { flex: 1; }
  .settings-fold-summary { padding: 12px 14px; }
  .settings-fold-content { padding: 0 14px 14px; }
  .settings-categories { display: none; }
  .settings-categories-fold { display: block; }

  /* The mode : one card, a row per choice — the dot on the left, the mode
     in force on a light ground —, then the thresholds or the confirmation,
     then « En savoir plus ». */
  turbo-frame.mode-block {
    gap: 0;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
  }
  turbo-frame.mode-block > * + * { border-top: 1px solid var(--border-soft); }
  .mode-off-note { padding: 10px 14px 0; border: 0; border-radius: 0; background: var(--bg-2); }
  .mode-choices { display: block; }
  .mode-choice {
    position: relative;
    width: 100%;
    gap: 2px;
    padding: 13px 14px 13px 46px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mode-choice + .mode-choice { border-top: 1px solid var(--border-soft); }
  .mode-choice[aria-checked="true"] { box-shadow: none; }
  .mode-choice:focus-visible { outline-offset: -2px; }
  .mode-choice-dot { position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; }
  .mode-choice-dot::after { width: 10px; height: 10px; }
  .mode-choice-tag { margin-left: 4px; }
  .mode-thresholds { gap: 14px; padding: 14px; border: 0; border-radius: 0; box-shadow: none; }
  .threshold-sliders { gap: 12px; }
  .threshold-slider { gap: 2px; }
  .mode-more > summary { display: flex; padding: 0 14px; }
  .mode-more .settings-more-body { margin: 0; padding: 0 14px 14px; }
  .mode-more-lists { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mode-confirm { padding: 14px; border: 0; border-radius: 0; }
  .mode-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mode-confirm-actions > form > .btn { flex: 1; }

  /* The box switched off or on : the row is the button, as on the mockup. */
  .settings-zone-button { display: none; }
  .settings-confirm { margin: 0 14px 14px; }
  .settings-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }

  /* « Comment DraftIA travaille » : a list, a row per page and a chevron
     (since 2026-10-12, lot 1). */
  .how-it-works-list {
    display: block;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
  }
  .how-it-works-row {
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .how-it-works-row + .how-it-works-row { border-top: 1px solid var(--border-soft); }
  .how-it-works-icon,
  .how-it-works-desc { display: none; }
  .how-it-works-label { font-size: 15px; font-weight: 500; }
  .how-it-works-row > .icon { display: block; flex-shrink: 0; color: var(--fg-3); }
  .how-it-works-row:focus-visible { outline-offset: -2px; }
}
@media (max-width: 640px) and (hover: hover) {
  .how-it-works-row:hover { background: var(--bg-2); }
}

/* ------------------------ Ce que DraftIA apprend, Règles, timeline, a draft's page ------------------------ */
/* A draft's text keeps its line breaks ; a long address or link now wraps
   too, rather than running out of its frame. */
.draft-body { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* A lesson's figures on one or two lines under it, not four. */
  .lesson-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .draft-body { padding: 14px; min-height: 0; }
  .rule-card { padding: 14px 16px; }
  .rule-card-head { flex-wrap: wrap; gap: 8px; }
  .timeline-chart-head { flex-wrap: wrap; row-gap: 2px; }
}

/* ------------------------ Onboarding and login, on a phone ------------------------ */
/* The shell's column follows the screen, not its content : the progress
   bar's three steps made it wider than a phone. Unchanged on a wide screen,
   where the card keeps its 720 px, centred. */
.onboarding-shell { grid-template-columns: minmax(0, 1fr); }
/* The proposed writing instructions, under the analysis — moved out of an
   inline style, so it can grow to 16 px on a phone (« Phone and tablet »). */
.scan-prompt-field {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, #d4d4d8);
  font-family: inherit;
  font-size: 0.9em;
  line-height: 1.5;
  box-sizing: border-box;
  resize: vertical;
}
@media (max-width: 899.98px) {
  .scan-prompt-field { font-size: 16px; }
}
/* Step 1's server and port : side by side, the server twice as wide. */
.imap-server-row { gap: 12px; }
.imap-host-field { flex: 2; }
.imap-port-field { flex: 1; }
@media (max-width: 640px) {
  .onboarding-shell { padding: 16px 12px 32px; }
  .onboarding-card { padding: 20px 16px; }
  .onboarding-card h1 { font-size: var(--fs-xl); }
  .stepper { gap: 2px; margin-bottom: 20px; }
  .stepper-item { gap: 6px; font-size: var(--fs-xs); }
  .stepper-bar { width: 10px; }
  .onboarding-nav { flex-wrap: wrap; gap: 12px; }
  .imap-host-field,
  .imap-port-field { flex: 1 1 100%; }

  .login-body { padding: 16px; }
  .login-card { padding: 28px 20px; }
}

/* ------------------------ Cockpit (/admin) ------------------------ */
/* The operator's pages : « Le cockpit », at the end of this file, since
   2026-11-03. On a phone its tables scroll in their own frame
   (`table-scroll`), at a width their columns can be read at. */
.table-scroll > .table { min-width: 600px; }

/* ======================== L'Activité sur téléphone (since 2026-10-13) ========================
   Lot 3 of the design board validated by Kurukha (cf. DECISIONS.md 2026-10-12
   « Planche de design : les choix de Kurukha ») : the Activité and an email's
   page follow the phone mockups « Tel-Activite » and « Tel-Activite-email »
   under 900 px. Kurukha validated the phone only : above 900 px the
   computer's pages are the ones they were. Each page carries both layouts ;
   these two classes say which one a block belongs to. */
@media (min-width: 900px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 899.98px) {
  .desktop-only { display: none !important; }
}

/* ------------------------ The page : a title, sections with an overline, cards ------------------------ */
.activity-phone,
.email-phone,
.emails-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
}
.activity-phone,
.email-phone { margin: 0 auto; }
.email-phone { gap: 20px; }

.phone-head { display: flex; flex-direction: column; gap: 4px; }
.email-phone .phone-head { gap: 8px; }
.phone-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.email-phone .phone-title { font-size: var(--fs-2xl); line-height: 1.2; overflow-wrap: anywhere; }
.phone-sub { margin: 0; font-size: var(--fs-md); color: var(--fg-2); }
.email-phone .phone-sub { font-size: var(--fs-base); }
/* The box's address moves to the next line whole, and breaks only when it
   is wider than the screen. */
.email-phone .phone-sub .mono { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* A deactivated box : what the computer's banner says, and the way to its
   Réglages, a finger's target. */
.phone-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 12px 14px 4px;
  border-radius: var(--r);
  background: var(--acc-blue-soft);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--fg-1);
}
.phone-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  color: var(--acc-violet);
  text-decoration: none;
}

.phone-section { display: flex; flex-direction: column; gap: 10px; }
.phone-overline {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.phone-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* « Tout voir » : small words, a finger's target all the same. */
.phone-section-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px -8px;
  padding: 0 8px;
  border-radius: var(--r);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--acc-violet);
  text-decoration: none;
}
.phone-section-link:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }

.phone-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.phone-empty { margin: 0; padding: 16px; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-2); }

/* ------------------------ « À faire » ------------------------ */
.proposals-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.to-do-card { overflow: hidden; }
.to-do-card .phone-card-head { padding: 16px 16px 12px; }
.phone-card-head { display: flex; align-items: flex-start; gap: 12px; }
.phone-card-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.phone-card-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); }
.phone-card-text { margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
.phone-card-action { width: 100%; min-height: 44px; justify-content: center; font-size: 15px; }

/* An email's outcome, a round badge in its tone (EmailOutcome::tone()) :
   neutral where nothing waits. On a light ground the teal and amber icons
   take the mockups' darker shade, legible at this size. */
.outcome-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-3);
}
.outcome-badge.teal { background: var(--acc-teal-soft); color: var(--acc-teal); }
.outcome-badge.amber { background: var(--acc-amber-soft); color: var(--acc-amber); }
.outcome-badge.rose { background: var(--acc-rose-soft); color: var(--acc-rose); }
.outcome-badge.blue { background: var(--acc-blue-soft); color: var(--acc-blue); }
.outcome-badge.violet { background: var(--acc-violet-soft); color: var(--acc-violet); }
[data-theme="light"] .outcome-badge.teal { color: #047857; }
[data-theme="light"] .outcome-badge.amber { color: #b45309; }

/* A row per email : the whole of it is the link, 52 px high at least. */
.email-list { margin: 0; padding: 0; list-style: none; }
.email-list > li + li,
.phone-card-head + .email-list > li:first-child { border-top: 1px solid var(--border-soft); }
.email-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
}
.email-row > .icon { flex-shrink: 0; color: var(--fg-3); }
.email-row:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
.email-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.email-row-title { font-size: var(--fs-md); font-weight: 500; color: var(--fg-0); overflow-wrap: anywhere; }
.email-row-when { font-weight: 400; color: var(--fg-3); }
.email-row-sub { font-size: var(--fs-base); color: var(--fg-2); }
.email-row-more .email-row-title { color: var(--acc-violet); }
.email-row-kept { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--acc-teal); white-space: nowrap; }
[data-theme="light"] .email-row-kept { color: #047857; }
@media (hover: hover) {
  .email-row:hover { background: var(--bg-2); }
}

/* « Tout est à jour » : nothing waits. */
.all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  text-align: center;
}
.all-done-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--acc-teal-soft);
  color: var(--acc-teal);
}
[data-theme="light"] .all-done-icon { color: #047857; }
.all-done-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); }
.all-done-text { margin: 0; max-width: 280px; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-2); }

/* ------------------------ « Cette semaine » ------------------------ */
.week-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.week-drafts { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: var(--fs-md); color: var(--fg-1); }
.week-figure {
  font-size: var(--fs-3xl);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  font-feature-settings: "tnum";
}
.week-similarity { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); }
.week-similarity b { font-weight: 600; color: var(--fg-0); }
.week-plan { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.week-plan-head { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--fs-base); color: var(--fg-2); }
.week-plan-count { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--fg-1); white-space: nowrap; }
.week-plan-bar { height: 6px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.week-plan-fill { display: block; height: 100%; border-radius: 999px; background: var(--acc-teal); }
.week-plan-pace { margin: 0; font-size: var(--fs-base); color: var(--fg-2); }

/* ------------------------ « Derniers emails », « Tout voir » ------------------------ */
.email-days { overflow: hidden; }
.email-day { margin: 0; padding: 10px 14px 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-3); }
.email-list + .email-day { border-top: 1px solid var(--border-soft); }

/* « Tout voir » : the box's address moves to the next line whole. */
.emails-sub-box { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* ------------------------ An email's page ------------------------ */
/* The outcome's chip, in its tone, above the title. */
.outcome-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.outcome-chip.teal { background: var(--acc-teal-soft); color: var(--acc-teal); }
.outcome-chip.amber { background: var(--acc-amber-soft); color: var(--acc-amber); }
.outcome-chip.rose { background: var(--acc-rose-soft); color: var(--acc-rose); }
.outcome-chip.blue { background: var(--acc-blue-soft); color: var(--acc-blue); }
[data-theme="light"] .outcome-chip.teal { color: #047857; }
[data-theme="light"] .outcome-chip.amber { color: #b45309; }

.email-explanation { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.email-explanation > .icon { flex-shrink: 0; margin-top: 1px; color: var(--fg-3); }
.email-explanation.teal > .icon { color: var(--acc-teal); }
.email-explanation.amber > .icon { color: var(--acc-amber); }
.email-explanation.rose > .icon { color: var(--acc-rose); }
.email-explanation.blue > .icon { color: var(--acc-blue); }
[data-theme="light"] .email-explanation.teal > .icon { color: #047857; }
[data-theme="light"] .email-explanation.amber > .icon { color: #b45309; }
.email-explanation p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-1); }
.email-explanation b { font-weight: 600; color: var(--fg-0); }

/* « La question qui manquait » : on a phone a card of its own, the button
   across it ; on a computer under the empty state of « Brouillon généré ». */
.missing-question { display: flex; flex-direction: column; gap: 12px; }
.email-phone .missing-question { padding: 16px; }
.missing-question-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-0);
  overflow-wrap: anywhere;
}
.missing-question-note { margin: 0; font-size: var(--fs-base); color: var(--fg-2); }
.missing-question-action { align-self: flex-start; min-height: 40px; justify-content: center; }
.email-phone .missing-question-action { align-self: stretch; min-height: 44px; font-size: 15px; }
.email-phone .missing-question-after { text-align: center; }
.draft-missing-question {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}

/* « Et maintenant » : numbered steps. */
.email-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: email-step; }
.email-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); counter-increment: email-step; }
.email-steps li::before {
  content: counter(email-step);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--fg-1);
}

/* « Détails », folded : a 48 px line that unfolds. */
.email-details { padding: 0 16px; }
.email-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
  list-style: none;
}
.email-details > summary::-webkit-details-marker { display: none; }
.email-details > summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; border-radius: var(--r-sm); }
.email-details > summary .icon { color: var(--fg-3); transition: transform 0.15s ease; }
.email-details[open] > summary .icon { transform: rotate(180deg); }
.email-details-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 14px; list-style: none; font-size: var(--fs-base); color: var(--fg-2); }

/* « C'est fait » : not in the mockups, so discreet — a plain button, a line
   under it. On a computer, at the foot of « Brouillon généré ». */
.email-done { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.email-done-button { justify-content: center; min-height: 44px; }
.email-done-hint { margin: 0; font-size: var(--fs-sm); color: var(--fg-3); text-align: center; }
.email-done-note { margin: 0; font-size: var(--fs-base); color: var(--fg-3); }
.draft-done { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.draft-done .email-done { flex-direction: row; align-items: center; gap: 12px; }
.draft-done .email-done-button { min-height: 0; }
.draft-done .email-done-hint { text-align: left; }

/* The operator's details, a finger's target too. */
@media (max-width: 899.98px) {
  .email-phone .operator-details > summary,
  .activity-phone ~ .operator-details > summary { min-height: 44px; }
  .email-phone .operator-details { margin-top: 0; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
  .email-details > summary .icon { transition: none; }
}

/* ------------------------ The Knowledge Base's form, from an email ------------------------ */
/* « Depuis l'email du 12 octobre à 08:42, resté sans brouillon. La question
   est déjà remplie. » — the mockup « Tel-Base-ajout » ; the rest of the form
   is lot 5's. As wide as the form below it. */
.kb-from-email {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto 16px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--acc-violet-soft);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--fg-1);
}
.kb-from-email > .icon { flex-shrink: 0; margin-top: 1px; color: var(--acc-violet); }

/* ======================== « À valider » — avant / après, phrase par phrase (since 2026-10-13) ========================
   Lot 4 of the design board validated by Kurukha (cf. DECISIONS.md 2026-10-12
   « Planche de design : les choix de Kurukha ») : what a retouch changes in
   the voice prompt, sentence by sentence (SentenceDiff,
   queue/_sentence_diff.html.twig), and an information updated, before and
   after (queue/_information_diff.html.twig).
   The views are radio buttons : visually hidden but focusable, the label of
   the one checked lit, its panel shown — no JavaScript. On a computer two
   views, « Changements » and « Texte complet », the table in two aligned
   columns ; on a phone three, « Changements », « Avant », « Après », each
   pair one under the other. The radios of the other layout are display:none,
   out of the keyboard's way. */
.sdiff { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sdiff-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sdiff-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.sdiff-views {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
}
.sdiff-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  user-select: none;
}
.sdiff-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.sdiff-radio-changes:checked ~ .sdiff-bar .sdiff-view-changes,
.sdiff-radio-before:checked ~ .sdiff-bar .sdiff-view-before,
.sdiff-radio-after:checked ~ .sdiff-bar .sdiff-view-after,
.sdiff-radio-full:checked ~ .sdiff-bar .sdiff-view-full {
  background: var(--bg-1);
  color: var(--fg-0);
  box-shadow: var(--sh-1);
}
.sdiff-radio-changes:focus-visible ~ .sdiff-bar .sdiff-view-changes,
.sdiff-radio-before:focus-visible ~ .sdiff-bar .sdiff-view-before,
.sdiff-radio-after:focus-visible ~ .sdiff-bar .sdiff-view-after,
.sdiff-radio-full:focus-visible ~ .sdiff-bar .sdiff-view-full { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
.sdiff-hint { font-size: var(--fs-sm); color: var(--fg-3); }

.sdiff-panel { display: none; }
.sdiff-radio-changes:checked ~ .sdiff-changes { display: block; }
.sdiff-radio-before:checked ~ .sdiff-full,
.sdiff-radio-after:checked ~ .sdiff-full,
.sdiff-radio-full:checked ~ .sdiff-full { display: grid; }
.sdiff-radio-before:checked ~ .sdiff-full .sdiff-full-after,
.sdiff-radio-after:checked ~ .sdiff-full .sdiff-full-before { display: none; }

/* « Changements » : a head « Avant | Après », a row per change. */
.sdiff-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-1);
}
.sdiff-head,
.sdiff-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sdiff-head { background: var(--bg-2); }
.sdiff-head > span { padding: 8px 14px; }
.sdiff-tag,
.sdiff-head > span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sdiff-tag-before { color: var(--acc-rose); }
.sdiff-tag-after { color: var(--acc-teal); }
.sdiff-row { border-top: 1px solid var(--border-soft); }
.sdiff-cell { min-width: 0; padding: 12px 14px; }
.sdiff-cell + .sdiff-cell { border-left: 1px solid var(--border-soft); }
/* The head says which side : the tag of a cell is the phone's. */
.sdiff-cell .sdiff-tag { display: none; }
.sdiff-text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}
.sdiff-none { font-size: var(--fs-sm); font-style: italic; color: var(--fg-3); }
.sdiff-del,
.sdiff-add {
  padding: 0 2px;
  border-radius: 3px;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sdiff-del { background: var(--acc-rose-soft); color: var(--acc-rose); }
.sdiff-add { background: var(--acc-teal-soft); color: var(--acc-teal); }
.sdiff-empty { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border-soft); font-size: var(--fs-md); color: var(--fg-2); }
.sdiff-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-2);
  font-size: var(--fs-base);
  color: var(--fg-2);
}
.sdiff-to-full,
.sdiff-to-after { font-weight: 500; color: var(--acc-violet); cursor: pointer; }
.sdiff-to-after { display: none; }

/* The full text : both sides on a computer, one on a phone. Its paragraphs
   and line breaks as written. */
.sdiff-full { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sdiff-radio-before:checked ~ .sdiff-full,
.sdiff-radio-after:checked ~ .sdiff-full { grid-template-columns: minmax(0, 1fr); }
.sdiff-full-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-1);
}
.sdiff-full-text { white-space: pre-line; }

/* An information updated : what DraftIA says today, what the replies say. */
.info-diff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
}
.info-diff-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; }
.info-diff-col + .info-diff-col { border-left: 1px solid var(--border-soft); }
.info-diff-text { font-size: 15px; white-space: pre-line; }
.info-diff-before .sdiff-del { text-decoration: line-through; }
.info-diff-after .sdiff-add { font-weight: 600; }

/* Small rose and teal words, a shade darker on a light ground to stay
   legible — the mockups' own shades. */
[data-theme="light"] .sdiff-tag-before,
[data-theme="light"] .sdiff-del { color: #be123c; }
[data-theme="light"] .sdiff-tag-after,
[data-theme="light"] .sdiff-add { color: #047857; }

@media (min-width: 900px) {
  .sdiff-radio-before,
  .sdiff-radio-after,
  .sdiff-view-before,
  .sdiff-view-after { display: none; }
}
@media (max-width: 899.98px) {
  .sdiff-radio-full,
  .sdiff-view-full,
  .sdiff-hint { display: none; }
  /* Three views across the width, a finger's target each. */
  .sdiff-views {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 3px;
    border-radius: 10px;
  }
  .sdiff-view { min-height: 44px; border-radius: 7px; font-size: var(--fs-md); }
  /* A pair one under the other, each side tagged ; a sentence removed or
     added alone shows alone. */
  .sdiff-head { display: none; }
  .sdiff-head + .sdiff-row { border-top: 0; }
  .sdiff-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
  .sdiff-cell { display: flex; flex-direction: column; gap: 4px; padding: 0; }
  .sdiff-cell + .sdiff-cell { border-left: 0; }
  .sdiff-cell.is-empty { display: none; }
  .sdiff-cell .sdiff-tag { display: block; }
  .sdiff-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 46px; padding-top: 0; padding-bottom: 0; }
  .sdiff-to-full { display: none; }
  .sdiff-to-after { display: inline-flex; align-items: center; min-height: 44px; }
  .sdiff-full { grid-template-columns: minmax(0, 1fr); }
  .info-diff { grid-template-columns: minmax(0, 1fr); }
  .info-diff-col + .info-diff-col { border-left: 0; border-top: 1px solid var(--border-soft); }
}

/* ======================== « Annuler » après une décision (since 2026-10-13) ========================
   The bar that offers to take back the decision just taken in « À valider »
   (queue/_undo_bar.html.twig, undo-bar_controller.js) : a snackbar, dark on
   the light theme and light on the dark one, at the bottom of the screen —
   above the tabs on a phone. */
.undo-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 6px 6px 6px 16px;
  border-radius: var(--r-lg);
  background: var(--fg-0);
  color: var(--bg-0);
  box-shadow: var(--sh-3);
  transform: translateX(-50%);
  animation: undo-bar-in 0.18s ease-out;
}
.undo-bar-text { margin: 0; font-size: var(--fs-md); line-height: 1.4; }
.undo-bar-form { flex-shrink: 0; margin: 0; }
.undo-bar-button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: #6d28d9;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
[data-theme="light"] .undo-bar-button { color: #c4b5fd; }
.undo-bar-button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@media (hover: hover) {
  .undo-bar-button:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
}
@keyframes undo-bar-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .undo-bar { animation: none; }
}
@media (max-width: 899.98px) {
  .undo-bar {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--tab-bar-height, 0px) + 12px);
    width: auto;
    max-width: none;
    transform: none;
    animation: none;
  }
}

/* ======================== « À valider » (since 2026-10-13) ========================
   Lot 4 of the design board validated by Kurukha (cf. DECISIONS.md 2026-10-12
   « Planche de design : les choix de Kurukha ») — queue/index.html.twig :
     - on a computer, « Bureau-Valider-propose » : two columns, the list on
       the left, the proposal on the right in a card whose foot holds the
       actions and their shortcuts ;
     - under 900 px, « Tel-Valider-* » : the list as cards with « Commencer
       par la première » fixed above the tabs ; a proposal opened takes the
       screen, its bar at the top (« ‹ À valider », « 1 sur 4 »), its actions
       fixed above the tabs. `.review.is-open` says one was opened. */
.review { display: flex; flex-direction: column; gap: 22px; max-width: 1180px; }
.review-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.review-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); }
.review-sub { margin: 0; font-size: var(--fs-md); color: var(--fg-2); }
.review-keys { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; font-size: var(--fs-sm); color: var(--fg-3); }
.review-keys kbd { margin-left: 6px; }
.review kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1;
  color: var(--fg-2);
}

.review-columns {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.review-empty { grid-column: 1 / -1; }

/* The list : a line per proposal on a computer, a card on a phone. */
.review-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.review-card.is-current { background: var(--bg-1); border-color: var(--acc-violet); box-shadow: 0 0 0 1px var(--acc-violet); }
.review-card:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
@media (hover: hover) {
  .review-card:not(.is-current):hover { background: var(--bg-2); }
}
.review-card-type { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; }
.review-card-type > .icon { flex: none; }
.review-card-type.is-retouch,
.proposal-type.is-retouch { color: var(--acc-violet); }
.review-card-type.is-info,
.proposal-type.is-info { color: var(--acc-teal); }
.review-card-age { margin-left: auto; padding-left: 8px; font-weight: 400; color: var(--fg-3); white-space: nowrap; }
.review-card-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--fg-0); overflow-wrap: anywhere; }
/* The sentence is the phone's : the computer's list stays short. */
.review-card-text {
  display: none;
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.review-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; font-size: var(--fs-sm); color: var(--fg-2); }
.review-card-state { display: inline-flex; align-items: center; gap: 6px; color: var(--acc-blue); }
.review-card-confidence { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.review-card-elsewhere { font-size: var(--fs-sm); color: var(--fg-3); }
.confidence-bar {
  display: inline-block;
  flex: none;
  width: 32px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-3);
}
.confidence-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--acc-teal); }
.review-start { display: none; }

/* The proposal : a card on a computer. */
.review-detail { min-width: 0; }
.review-placeholder { padding: 32px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); text-align: center; }
.review-placeholder-text { margin: 0; font-size: var(--fs-md); color: var(--fg-3); }
.proposal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  box-shadow: var(--sh-1);
}
.proposal-head { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 6px; }
.proposal-type { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.proposal-meta { font-weight: 400; color: var(--fg-3); }
.proposal-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); overflow-wrap: anywhere; }
.proposal-question { margin: 0; font-size: var(--fs-md); color: var(--fg-2); overflow-wrap: anywhere; }
.proposal-note { margin: 4px 0 0; padding: 8px 12px; border-radius: var(--r); background: var(--acc-amber-soft); font-size: var(--fs-base); line-height: 1.45; color: var(--fg-1); }
.proposal-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 24px 4px; }
.proposal-overline { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.proposal-text { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--fg-1); overflow-wrap: anywhere; }
.proposal-information { font-size: 15px; white-space: pre-line; }
.proposal-small { margin: 0; font-size: var(--fs-sm); color: var(--fg-3); }
.proposal-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proposal-reason { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-2); }
.proposal-reason-text { font-size: var(--fs-md); color: var(--fg-0); overflow-wrap: anywhere; }
.proposal-reason-count { font-size: var(--fs-sm); color: var(--fg-2); white-space: nowrap; }
.proposal-confidence { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
.proposal-confidence .confidence-bar { width: 48px; }
.proposal-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); }
.proposal-section.proposal-box { margin: 12px 24px 0; }
.proposal-current > summary { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-md); font-weight: 500; color: var(--fg-1); cursor: pointer; }
.proposal-current-text {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: var(--fs-md);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.proposal-accept { margin: 2px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-1); }
.proposal-accept b { font-weight: 600; color: var(--fg-0); }

/* « En savoir plus » : a discreet link on a computer, a card on a phone. */
.proposal-more { margin: 12px 24px 0; }
.proposal-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  list-style: none;
  font-size: var(--fs-base);
  color: var(--fg-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.proposal-more > summary::-webkit-details-marker { display: none; }
.proposal-more > summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; border-radius: var(--r-sm); }
.proposal-more-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; font-size: var(--fs-base); line-height: 1.5; color: var(--fg-2); }
.proposal-more-body p { margin: 0; }
.proposal-more-body a { color: var(--acc-violet); }

/* The person's own version : unfolded by « Modifier » only. */
.proposal-edit { margin: 16px 24px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-2); }
.proposal-edit:not([open]) { display: none; }
.proposal-edit-summary { list-style: none; font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.proposal-edit-summary::-webkit-details-marker { display: none; }
.proposal-edit-label { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--fg-2); }
.proposal-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.proposal-edit-actions .btn { min-height: 40px; }

/* The actions : the card's foot on a computer, with the shortcuts. */
.proposal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.proposal-actions-note { flex: 1 1 220px; margin: 0; font-size: var(--fs-sm); color: var(--fg-3); }
.proposal-buttons { display: flex; gap: 8px; margin-left: auto; }
.proposal-button-form { display: flex; margin: 0; }
.proposal-button { justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; white-space: nowrap; }
.proposal-button > .icon { display: none; }
.btn.primary.proposal-button kbd { border-color: transparent; background: color-mix(in srgb, var(--bg-0) 18%, transparent); color: var(--bg-0); }

/* Small teal words, a shade darker on a light ground to stay legible — the
   mockups' own shade. */
[data-theme="light"] .review-card-type.is-info,
[data-theme="light"] .proposal-type.is-info { color: #047857; }

@media (min-width: 900px) {
  .review-bar { display: none; }
}

/* ------------------------ « À valider » on a phone or a tablet ------------------------ */
@media (max-width: 899.98px) {
  .review { gap: 16px; max-width: 720px; margin: 0 auto; }
  .review-keys { display: none; }
  .review-columns { display: block; }
  /* The list, or one proposal : never both. */
  .review:not(.is-open) .review-detail,
  .review.is-open .review-head,
  .review.is-open .review-list { display: none; }

  .review-list { gap: 12px; }
  .review-card { gap: 5px; padding: 14px 16px; border-color: var(--border); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
  .review-card.is-current { border-color: var(--border); box-shadow: var(--sh-1); }
  .review-card-title { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
  .review-card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .review-card-foot { margin-top: 3px; }

  /* What stays at the bottom, above the tabs : « Commencer par la
     première », or the actions of the proposal open. The page keeps clear
     of it, and so do the toasts and the bar « Annuler ». */
  .review-start,
  .proposal-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tab-bar-height, 0px);
    z-index: 30;
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--border);
  }
  .review-start { display: block; background: var(--bg-0); }
  .review-start-button { width: 100%; min-height: 48px; justify-content: center; font-size: 15px; }
  .review-empty .btn { min-height: 44px; }
  .review.has-bottom-bar { padding-bottom: 76px; }
  body:has(.review.has-bottom-bar) .toast-stack { bottom: calc(var(--tab-bar-height, 0px) + 84px); }
  .review.has-bottom-bar .undo-bar { bottom: calc(var(--tab-bar-height, 0px) + 80px); }

  /* The proposal : the screen itself, its parts as cards. */
  .proposal { gap: 18px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .proposal-head { padding: 0; }
  .proposal-meta { display: none; }
  .proposal-section { padding: 0; }
  .proposal-section.proposal-box { margin: 0; padding: 14px; }
  .proposal-box { box-shadow: var(--sh-1); }
  .proposal-reasons { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
  .proposal-reason { flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; }
  .proposal-reason + .proposal-reason { border-top: 1px solid var(--border-soft); }
  .proposal-reason-count { flex: none; margin-left: auto; }
  .proposal-more { margin: 0; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
  .proposal-more > summary { display: flex; justify-content: space-between; min-height: 48px; font-size: var(--fs-md); font-weight: 500; color: var(--fg-1); text-decoration: none; }
  .proposal-more > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border-right: 1.5px solid var(--fg-3);
    border-bottom: 1.5px solid var(--fg-3);
    transform: translateY(-2px) rotate(45deg);
  }
  .proposal-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .proposal-more-body { padding: 0 0 14px; }
  /* Its links, a finger's target each. */
  .proposal-more-link,
  .proposal-drafts a { display: inline-flex; align-items: center; min-height: 44px; }
  .proposal-drafts a { min-width: 44px; padding: 0 4px; }
  .proposal-edit { margin: 0; }
  .proposal-edit-summary { display: flex; align-items: center; min-height: 44px; }
  .proposal-edit-actions .btn { min-height: 44px; }

  .proposal-actions { background: var(--bg-1); }
  .proposal-actions-note { display: none; }
  .proposal-buttons { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; width: 100%; margin: 0; }
  .proposal-button-form > .proposal-button { flex: 1; }
  .proposal-button { min-height: 48px; padding: 0 10px; gap: 6px; font-size: 15px; }
  .proposal-button > .icon { display: inline-block; width: 16px; height: 16px; }
  .proposal-button kbd { display: none; }

  /* The bar at the top of a proposal open. */
  .review-bar { gap: 4px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .review-bar .mobile-bar-back { margin-left: 0; padding: 0 8px; }
  .review-bar-nav { display: flex; align-items: center; margin-left: auto; }
  .review-bar-position { padding: 0 6px; font-size: var(--fs-base); color: var(--fg-2); white-space: nowrap; }
  .review-bar-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); color: var(--fg-1); }
  .review-bar-arrow:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: -2px; }
}

/* ======================== Base de connaissance (since 2026-10-13) ========================
   Lot 5 of the design board validated by Kurukha (cf. DECISIONS.md 2026-10-12
   « Planche de design : les choix de Kurukha ») — kb/index.html.twig :
     - on a computer, « Bureau-Base-propose » : two columns, the list on the
       left as a FAQ, the fact on the right in a card whose foot holds the
       actions ; « Actives / Retirées » and the search above them ;
     - under 900 px, « Tel-Base-* » : the list as a card, « Ajouter »
       floating above the tabs ; a fact opened takes the screen, its main
       button fixed above the tabs. `.kb.is-open` says one was opened.
   The new-information form (kb/new.html.twig) follows « Tel-Base-ajout ». */
.kb { display: flex; flex-direction: column; gap: 20px; max-width: 1180px; }
.kb-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 16px; }
.kb-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-title { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); }
.kb-sub { margin: 0; font-size: var(--fs-md); color: var(--fg-2); }
.kb-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kb-add { gap: 8px; }
.kb-head-actions .btn { min-height: 40px; }

/* The search, the two views, what waits in « À valider ». */
.kb-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kb-search { position: relative; flex: 1 1 300px; max-width: 440px; margin: 0; }
.kb-search > .icon { position: absolute; top: 50%; left: 12px; color: var(--fg-3); transform: translateY(-50%); pointer-events: none; }
.kb-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-1);
  color: var(--fg-0);
  font: inherit;
  font-size: var(--fs-md);
  outline: none;
}
.kb-search-input:focus { border-color: var(--acc-violet); box-shadow: 0 0 0 3px var(--acc-violet-soft); }
.kb-segments { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); }
.kb-segment { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 6px; font-size: var(--fs-base); font-weight: 500; color: var(--fg-2); text-decoration: none; }
.kb-segment.is-on { background: var(--bg-1); color: var(--fg-0); box-shadow: var(--sh-1); }
.kb-segment:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 1px; }
.kb-segment-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3); }
.kb-awaiting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-left: auto;
  padding: 0 12px;
  border-radius: var(--r);
  background: var(--acc-amber-soft);
  font-size: var(--fs-base);
  color: var(--fg-1);
  text-decoration: none;
}
.kb-awaiting > .icon { flex: none; color: var(--acc-amber); }
.kb-awaiting-link { font-weight: 600; color: var(--acc-amber); }
.kb-awaiting:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }

/* The two columns. */
.kb-columns { display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.kb-empty { grid-column: 1 / -1; padding: 32px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); text-align: center; }
.kb-empty-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-empty-text { margin: 6px 0 0; font-size: var(--fs-base); line-height: 1.5; color: var(--fg-2); }
.kb-no-match { padding: 20px 16px; text-align: center; }

/* The list : a FAQ. A row, group or message the search leaves out is
   `hidden` — the attribute must win over their display. */
.kb-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kb-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-group[hidden],
.kb-item[hidden],
.kb-no-match[hidden] { display: none; }
.kb-group-title { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 0 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.kb-group-count { font-family: var(--font-mono); letter-spacing: 0; }
.kb-group-text { margin: 0 0 4px; padding: 0 4px; font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-2); }
/* What waits to be decided here : on an amber ground, above the rest. */
.kb-group.is-waiting { padding: 12px 6px 6px; border-radius: var(--r-lg); background: var(--acc-amber-soft); }
.kb-group.is-waiting .kb-group-title { color: var(--acc-amber); }
.kb-rows { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.kb-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.kb-row.is-current { background: var(--bg-1); border-color: var(--acc-violet); box-shadow: 0 0 0 1px var(--acc-violet); }
.kb-row:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
@media (hover: hover) {
  .kb-row:not(.is-current):hover { background: var(--bg-2); }
}
.kb-row-question { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-row-information {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}
.kb-row-origin { font-size: var(--fs-sm); color: var(--fg-3); }

/* The fact : a card on a computer. */
.kb-detail { min-width: 0; }
.kb-placeholder { padding: 32px 24px; border: 1px dashed var(--border); border-radius: var(--r-lg); text-align: center; }
.kb-placeholder-text { margin: 0; font-size: var(--fs-md); color: var(--fg-3); }
.kb-fact { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
.kb-fact-body { display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; }
.kb-fact-head { display: flex; flex-direction: column; gap: 8px; }
.kb-fact-title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-fact-state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-base); color: var(--fg-2); }
.kb-fact-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.kb-fact-state.is-accepted .kb-fact-dot { background: var(--acc-teal); }
.kb-fact-state.is-pending .kb-fact-dot { background: var(--acc-amber); }
.kb-fact-state.is-rejected .kb-fact-dot { background: var(--acc-rose); }
.kb-fact-update {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--acc-amber-soft);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--fg-1);
  text-decoration: none;
}
.kb-fact-update:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
.kb-fact-update-text { flex: 1; min-width: 0; }
.kb-fact-update-change { display: block; font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-fact-update-link { flex: none; font-weight: 600; color: var(--acc-amber); }
.kb-fact-form,
.kb-new-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.kb-field { display: flex; flex-direction: column; gap: 6px; }
.kb-label { font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.kb-hint { margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); overflow-wrap: anywhere; }
.kb-fact-field { padding: 10px 12px; background: var(--bg-1); border-color: var(--border-strong); }
.kb-tips { padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r); }
.kb-tips-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
}
.kb-tips-summary::-webkit-details-marker { display: none; }
.kb-tips-summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  transform: translateY(-2px) rotate(45deg);
}
.kb-tips[open] > .kb-tips-summary::after { transform: translateY(2px) rotate(-135deg); }
.kb-tips-summary:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; border-radius: var(--r-sm); }
.kb-tips-body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; font-size: var(--fs-base); line-height: 1.5; color: var(--fg-2); }
.kb-tips-body p { margin: 0; }
/* The details of the owner's replies, waiting for a choice (2026-10-17). */
.kb-own { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--acc-amber) 45%, var(--border)); border-radius: var(--r); background: var(--acc-amber-soft); }
.kb-own-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); }
.kb-own-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.kb-own-item { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.kb-own-what,
.kb-own-where { margin: 0; font-size: var(--fs-base); color: var(--fg-2); }
.kb-own-value { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-own-where code { overflow-wrap: anywhere; }
.kb-own-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kb-own-action { margin: 0; }
/* « Vos données » (since 2026-10-18) : the facts that give a detail, a value
   forgotten, the choices made. */
.kb-data-facts { margin: 0; padding-left: 18px; font-size: var(--fs-base); color: var(--fg-2); overflow-wrap: anywhere; }
.kb-data-facts li + li { margin-top: 2px; }
.kb-data-facts a { color: var(--fg-1); }
.kb-data-forgotten { font-weight: 500; font-style: italic; color: var(--fg-2); }
.kb-data-chosen { display: flex; flex-direction: column; gap: 10px; }
.kb-own-title .kb-group-count,
.kb-map-subject-title .kb-group-count { margin-left: 4px; font-weight: 500; color: var(--fg-3); }
.review-card-own { font-size: var(--fs-xs); font-weight: 600; color: var(--acc-amber); }
.kb-row-own { color: var(--acc-amber); }
.kb-fact-origin { margin: 0; font-size: var(--fs-sm); color: var(--fg-3); }
.kb-fact-note { margin: -12px 0 0; font-size: var(--fs-sm); color: var(--fg-3); overflow-wrap: anywhere; }

/* The actions : the card's foot on a computer. */
.kb-fact-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--bg-2); }
.kb-fact-secondary { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 20px; min-width: 0; }
.kb-fact-action { display: flex; flex-direction: column; margin: 0; }
.kb-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--fg-2);
  text-align: left;
  cursor: pointer;
}
.kb-link.is-danger { color: var(--acc-rose); }
.kb-link:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; border-radius: var(--r-sm); }
@media (hover: hover) {
  .kb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.kb-fact-hint { margin: 0; font-size: var(--fs-sm); color: var(--fg-3); }
.kb-fact-save { margin-left: auto; }
.kb-save { min-height: 40px; }

/* The new-information form. */
.kb-new { display: flex; flex-direction: column; gap: 16px; max-width: 800px; margin: 0 auto; }
.kb-new .kb-from-email { margin: 0; }
.kb-new-card { padding: 22px 24px; }
.kb-new-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.kb-new-actions .btn { min-height: 40px; }

/* Small amber and rose words, a shade darker on a light ground to stay
   legible — the mockups' own shades. */
[data-theme="light"] .kb-awaiting-link,
[data-theme="light"] .kb-awaiting > .icon,
[data-theme="light"] .kb-row-own,
[data-theme="light"] .review-card-own,
[data-theme="light"] .kb-fact-update-link,
[data-theme="light"] .kb-group.is-waiting .kb-group-title { color: #b45309; }
[data-theme="light"] .kb-link.is-danger { color: #be123c; }

@media (min-width: 900px) {
  .kb-bar,
  .kb-fab { display: none; }
}

/* ------------------------ Base de connaissance on a phone or a tablet ------------------------ */
@media (max-width: 899.98px) {
  .kb,
  .kb-new { gap: 14px; max-width: 720px; margin: 0 auto; }
  .kb-title { font-size: 24px; line-height: 1.15; }
  .kb-columns { display: block; }
  /* The list, or one fact : never both. */
  .kb:not(.is-open) .kb-detail,
  .kb.is-open .kb-head,
  .kb.is-open .kb-toolbar,
  .kb.is-open .kb-list { display: none; }

  .kb-toolbar { flex-direction: column; align-items: stretch; gap: 14px; }
  .kb-search { flex: none; max-width: none; }
  .kb-search-input { height: 44px; border-radius: 10px; font-size: 16px; }
  .kb-awaiting { min-height: 48px; margin-left: 0; padding: 0 14px; border-radius: 10px; font-size: var(--fs-md); }
  .kb-awaiting-text { flex: 1; min-width: 0; }

  /* The list : one card, a row per information, 44 px at least. */
  .kb-list { gap: 14px; }
  .kb-group.is-waiting { padding: 0; background: transparent; }
  .kb-group-title,
  .kb-group-text { padding: 0 2px; }
  .kb-rows { gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
  .kb-group.is-waiting .kb-rows { border-color: color-mix(in srgb, var(--acc-amber) 45%, var(--border)); }
  .kb-item + .kb-item { border-top: 1px solid var(--border-soft); }
  .kb-row,
  .kb-row.is-current { min-height: 44px; box-sizing: border-box; padding: 13px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .kb-row-question { font-size: 15px; }
  .kb-row-information { font-size: var(--fs-md); }
  .kb-retired-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; font-size: var(--fs-md); color: var(--fg-2); text-decoration: none; }
  .kb-retired-link > .icon { flex: none; }
  .kb-empty .kb-retired-link { margin-top: 12px; }

  /* « Ajouter », floating above the tabs ; the page's end scrolls clear of
     it, and so do the toasts. */
  .kb-fab {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--tab-bar-height, 0px) + 16px);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px 0 16px;
    border-radius: 999px;
    background: var(--fg-0);
    color: var(--bg-0);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sh-3);
  }
  .kb-fab:focus-visible { outline: 2px solid var(--acc-violet); outline-offset: 2px; }
  .kb.has-fab { padding-bottom: 72px; }
  .kb.has-save-bar { padding-bottom: 76px; }
  body:has(.kb.has-fab) .toast-stack,
  body:has(.kb.has-save-bar) .toast-stack { bottom: calc(var(--tab-bar-height, 0px) + 84px); }

  /* The fact : the screen itself. */
  .kb-fact { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .kb-fact-body { padding: 0; }
  .kb-fact-update { min-height: 48px; border-radius: 10px; }
  .kb-fact-field { padding: 12px; border-radius: 10px; }
  .kb-tips { border-radius: var(--r-lg); background: var(--bg-1); box-shadow: var(--sh-1); }
  .kb-tips-summary { min-height: 48px; }
  .kb-fact-foot { display: block; margin-top: 18px; padding: 0; border: 0; background: transparent; }
  .kb-fact-secondary { flex-direction: column; align-items: stretch; gap: 0; padding-top: 6px; border-top: 1px solid var(--border); }
  .kb-link { min-height: 44px; font-size: 15px; }
  .kb-own-actions .btn { min-height: 44px; font-size: 15px; }
  .kb-fact-hint { margin: -6px 0 6px; font-size: var(--fs-base); color: var(--fg-2); }
  /* Its main button, fixed above the tabs. */
  .kb-fact-save {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tab-bar-height, 0px);
    z-index: 30;
    margin: 0;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--border);
    background: var(--bg-1);
  }
  .kb-save { width: 100%; min-height: 48px; justify-content: center; font-size: 15px; }

  /* The bar at the top of a fact, or of the retired ones. */
  .kb-bar { padding-left: max(8px, env(safe-area-inset-left, 0px)); }
  .kb-bar .mobile-bar-back { margin-left: 0; padding: 0 8px; }

  /* The form : no card on a phone ; its two buttons share the width, 44 px high. */
  .kb-new-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .kb-new-actions .btn { flex: 1; min-height: 44px; justify-content: center; }
}

/* ===== Carte des sujets (kb/map.html.twig, since 2026-11-01) =====
   The map of topics of a box's base : subjects › aspects, the facts in force
   on each with their case, « Sans sujet », the collisions to settle. Each
   change is a small form folded in a <details> — no JavaScript. */
.kb-map-status { margin: 0; padding: 10px 14px; border-radius: var(--r); font-size: var(--fs-base); line-height: 1.45; }
.kb-map-status.is-proposed { background: var(--acc-amber-soft); color: var(--fg-0); }
.kb-map-status.is-validated { background: var(--acc-teal-soft); color: var(--fg-0); }
.kb-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kb-map-actions form { margin: 0; }
.kb-map-counts { margin: 0; font-size: var(--fs-sm); color: var(--fg-2); font-family: var(--font-mono); overflow-wrap: anywhere; }
.kb-map-subject { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1); }
.kb-map-subject-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-map-aspect { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; border-left: 2px solid var(--border-soft); }
.kb-map-aspect-title { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--fg-1); overflow-wrap: anywhere; }
.kb-map-proposed { font-size: var(--fs-xs); font-weight: 500; color: var(--acc-amber); }
.kb-map-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-map-fact { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-2); }
.kb-map-question { font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-map-case { align-self: flex-start; padding: 1px 8px; border-radius: var(--r-sm); background: var(--acc-violet-soft); font-size: var(--fs-sm); color: var(--fg-1); overflow-wrap: anywhere; }
.kb-map-information { margin: 0; font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); overflow-wrap: anywhere; white-space: pre-line; }
.kb-map-more > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--fg-2); }
.kb-map-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; }
.kb-map-form .btn { align-self: flex-start; }
.kb-map-collisions { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--acc-amber); border-radius: var(--r-lg); }
.kb-map-collision { display: flex; flex-direction: column; gap: 8px; }
.kb-map-collision-where { margin: 0; font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.kb-map-fact form { margin: 0; }
/* A collision's answers (kb/_map_collision.html.twig, since 2026-11-03) :
   four buttons alike — the three folded ones' summaries look like « Garder
   celle-ci », so that it is never the only answer that shows. An answer
   opened takes the whole width. */
.kb-map-collision-answers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.kb-map-collision-answers > details[open] { flex-basis: 100%; }
.kb-map-collision-answers summary.btn { list-style: none; color: var(--fg-1); font-size: inherit; }
.kb-map-collision-answers summary.btn::-webkit-details-marker { display: none; }
.kb-map-collision-answers details[open] > summary.btn { background: var(--bg-hover); border-color: var(--border-strong); }

/* ======================== Effets (since 2026-11-03) ========================
   « Un peu triste, sans vie » (Kurukha, cf. DECISIONS.md 2026-11-03 « Une
   admin plus vivante ») : the effects of the design board's second row, all
   of them kept, the relief included. CSS only, no JavaScript : colour blobs
   drifting behind a page's top, frosted glass, gradient titles, figures and
   buttons, bars that grow in, cards that rise and tilt towards the pointer,
   a border whose colours turn, charts laid in perspective. Their colours are
   tokens.css's --fx-*, one set per theme. Everything that moves stops for a
   person whose computer asks for less motion (end of this section). */

/* The blobs : a layer behind the top of the page, faded out downwards. Its
   parent is `position: relative` and `isolation: isolate`, so that the layer
   sits under the page's content and above its ground. */
.fx-aurora {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.fx-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--fx-blob-o);
  animation: fx-drift 22s ease-in-out infinite alternate;
}
.fx-blob.b1 { width: 640px; height: 640px; left: -160px; top: -300px; background: var(--fx-blob-1); }
.fx-blob.b2 { width: 540px; height: 540px; right: -120px; top: -160px; background: var(--fx-blob-2); animation-duration: 27s; animation-delay: -7s; }
.fx-blob.b3 { width: 480px; height: 480px; left: 36%; top: 140px; background: var(--fx-blob-3); animation-duration: 32s; animation-delay: -13s; }
@keyframes fx-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, 40px) scale(1.15); }
  100% { transform: translate(-50px, -30px) scale(.9); }
}

/* Frosted glass : the blobs show through, blurred. An effect is put on a
   card that has its own ground and border, written further down : these
   few declarations win (`!important`), as a utility class does. */
.fx-glass {
  background: var(--fx-glass) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-color: var(--fx-glass-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--sh-2);
}

/* Gradient text : a title, a big figure. */
.fx-gt, .fx-gt-amber {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fx-gt { background-image: var(--fx-gt); }
.fx-gt-amber { background-image: var(--fx-gt-amber); }

/* The page's main action : a gradient, lifted on hover, a light sweeping
   across it now and then (`fx-shine`). */
.btn.fx-btn, .fx-btn {
  background: var(--fx-btn) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 26px -10px rgba(124, 58, 237, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.fx-btn:hover, a.fx-btn:hover {
  background: var(--fx-btn);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(124, 58, 237, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fx-shine { position: relative; overflow: hidden; }
.fx-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: fx-shine 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes fx-shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }

/* Arrivals : a card rises, a chart stands up, a bar grows, a square pops.
   `--i` staggers them ; `backwards` gives the element back to its hover
   once the animation is over (`both` would freeze its transform). */
.fx-rise { animation: fx-rise .45s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes fx-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-tiltin { animation: fx-tiltin .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: 80ms; }
@keyframes fx-tiltin {
  from { transform: perspective(1200px) rotateX(26deg) translateY(40px); opacity: 0; }
  to { transform: perspective(1200px) rotateX(0) translateY(0); opacity: 1; }
}
.fx-grow { transform-origin: bottom; animation: fx-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes fx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.fx-pop { animation: fx-pop .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 9ms); }
@keyframes fx-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* « En direct » : a dot that beats. */
.fx-pulse { animation: fx-pulse 2.2s ease-out infinite; }
@keyframes fx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* A card tilts towards the pointer — only where there is one. */
@media (hover: hover) {
  .fx-tilt { transform: perspective(900px) rotateX(0) rotateY(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; }
  .fx-tilt:hover { transform: perspective(900px) rotateX(5deg) rotateY(-7deg) translateY(-6px); box-shadow: var(--fx-lift-shadow); }
}

/* What waits : a border whose colours turn. Without @property (an old
   browser) the border stays, still. */
@property --fx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx-ring {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    conic-gradient(from var(--fx-ang), #a78bfa, #34d399, #fbbf24, #fb7185, #a78bfa) border-box !important;
  animation: fx-spin 8s linear infinite;
}
@keyframes fx-spin { to { --fx-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .fx-blob, .fx-shine::after, .fx-rise, .fx-tiltin, .fx-grow, .fx-pop, .fx-pulse, .fx-ring { animation: none !important; }
  .fx-tilt, .fx-btn { transition: none; }
  .fx-tilt:hover, .fx-btn:hover { transform: none; }
}

/* ------------------------ Le rythme — a bar per day ------------------------ */
/* components/_rhythm_chart.html.twig : the emails of each day, stacked by
   what DraftIA made of them (EmailRhythm). A bar's height is its day against
   the busiest one ; its parts share it by flex-grow, so no pixel is computed
   in the template. Laid back in perspective, glowing (the relief). */
.rhythm { padding: 22px 24px 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-1); min-width: 0; }
.rhythm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.rhythm-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); }
.rhythm-head span { font-size: var(--fs-base); color: var(--fg-3); }
.rhythm-plot {
  display: grid;
  grid-template-columns: repeat(var(--days, 14), minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  height: 180px;
  margin-top: 18px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  transform: perspective(900px) rotateX(18deg);
  transform-origin: 50% 100%;
}
.rhythm-bar {
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  border-radius: 5px 5px 2px 2px;
  overflow: hidden;
  filter: var(--fx-bar-glow);
  /* The side of the bar, in relief. */
  box-shadow: 6px -4px 0 var(--fx-bar-side);
}
.rhythm-bar.is-empty { box-shadow: none; }
.rhythm-bar.is-before { opacity: .45; }
.rhythm-seg { flex: var(--n) 0 0; min-height: 2px; }
.rhythm-seg.is-draft { background: var(--fx-g-violet); }
.rhythm-seg.is-pending { background: var(--fx-g-blue); }
.rhythm-seg.is-owner { background: var(--fx-g-amber); }
.rhythm-seg.is-incident { background: var(--fx-g-rose); }
.rhythm-seg.is-none { background: var(--fx-bar-none); }
.rhythm-days { display: grid; grid-template-columns: repeat(var(--days, 14), minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.rhythm-days span { text-align: center; font-size: var(--fs-xs); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rhythm-days span.is-today { color: var(--acc-violet); font-weight: 600; }
.rhythm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: var(--fs-base); color: var(--fg-2); }
.rhythm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rhythm-legend b { color: var(--fg-0); }
.rhythm-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.rhythm-key.is-draft { background: var(--acc-violet); }
.rhythm-key.is-pending { background: var(--acc-blue); }
.rhythm-key.is-owner { background: var(--acc-amber); }
.rhythm-key.is-incident { background: var(--acc-rose); }
.rhythm-key.is-none { background: var(--fx-bar-none); }
@media (max-width: 640px) {
  .rhythm { padding: 16px; }
  .rhythm-plot { height: 120px; gap: 4px; }
  .rhythm-days { gap: 4px; }
  /* Every other day's name : fourteen do not fit a phone's width. The
     first one names its month : it may run over the next column. */
  .rhythm-days span:nth-child(even):not(.is-today) { visibility: hidden; }
  .rhythm-days span:first-child { overflow: visible; text-align: left; }
}

/* ======================== Le cockpit (/admin, since 2026-11-03) ========================
   Four pages, one question each — Aujourd'hui, Brouillons, Comptes, Journal —
   in place of the eight blocks of equal weight that were piled on one
   (DECISIONS.md 2026-11-03). Out of base.html.twig like the page it replaces
   (admin/_layout.html.twig). On a phone the four tabs go to the bottom of the
   screen, as on the client's pages. */
.cockpit-body { position: relative; isolation: isolate; min-height: 100vh; background: var(--bg-0); overflow-x: hidden; }
.cockpit-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); }
.cockpit-head-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.cockpit-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--fg-0); }
.cockpit-brand .brand-mark { width: 30px; height: 30px; font-size: 14px; }
.cockpit-brand-name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.cockpit-brand-name b { color: var(--acc-violet); font-weight: 600; }
.cockpit-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc-violet);
  background: var(--acc-violet-soft);
  padding: 3px 8px;
  border-radius: 999px;
}
.cockpit-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 0 1 auto; }
.cockpit-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.cockpit-tab:hover { background: var(--bg-2); color: var(--fg-0); }
.cockpit-tab[aria-current="page"] { background: var(--acc-violet-soft); color: var(--acc-violet); font-weight: 600; }
.cockpit-tab .icon { opacity: .85; }
.cockpit-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-left: auto; }
/* A narrower computer : « N boîtes en direct » gives way first. */
@media (max-width: 1240px) { .cockpit-live { display: none; } }
.cockpit-live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--fg-3); }
.cockpit-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc-teal); }
.cockpit-live-dot.is-off { background: var(--fg-4); }
.cockpit-head-end a { padding: 11px 4px; color: var(--fg-1); text-decoration: none; font-size: var(--fs-md); }
.cockpit-head-end a:hover { color: var(--acc-violet); }
.cockpit-head-end form { margin: 0; }
.cockpit-avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
}

.cockpit-main { position: relative; max-width: 1280px; margin: 0 auto; padding: 44px 32px 72px; display: flex; flex-direction: column; gap: 28px; }
.cockpit-overline { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-violet); }
.cockpit-title { margin: 10px 0 8px; padding-bottom: 4px; font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.cockpit-lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--fg-1); max-width: 760px; }
.cockpit-lead b { color: var(--fg-0); }

/* Aujourd'hui : the greeting and its sentence beside the rhythm. */
.cockpit-hero { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.cockpit-intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 0; }
.cockpit-intro .cockpit-title { font-size: 58px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; margin: 10px 0 14px; }
.cockpit-intro .cockpit-lead { font-size: 18px; max-width: 460px; }
.cockpit-hero .rhythm { flex: 2 1 560px; }
.cockpit-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cockpit-actions .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; font-size: var(--fs-md); font-weight: 600; display: inline-flex; align-items: center; }

/* The three cards : what waits, the clients, the incidents. */
.cockpit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cockpit-card {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-1);
  color: var(--fg-0);
  text-decoration: none;
}
a.cockpit-card:hover { color: var(--fg-0); }
.cockpit-card-top { display: flex; align-items: center; justify-content: space-between; }
.cockpit-card-label { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cockpit-card-label.is-amber { color: var(--acc-amber); }
.cockpit-card-label.is-teal { color: var(--acc-teal); }
.cockpit-card-label.is-rose { color: var(--acc-rose); }
.cockpit-card-arrow { color: var(--fg-3); }
.cockpit-card-figure { font-size: 56px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; margin: 8px 0 2px; font-feature-settings: "tnum"; }
.cockpit-card-figure.is-plain { font-size: 44px; font-weight: 600; color: var(--fg-0); margin-top: 10px; }
.cockpit-card-what { font-weight: 500; }
.cockpit-card-foot { margin-top: 14px; font-size: var(--fs-base); color: var(--fg-3); }
.cockpit-card-foot .mono { color: var(--fg-2); }
.cockpit-card-split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 14px 0 8px; }
.cockpit-card-split span { background: var(--acc-amber); }
.cockpit-card-split span + span { opacity: .55; }
.cockpit-card-split span + span + span { opacity: .3; }
.cockpit-card-calm { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 18px; font-weight: 600; }
.cockpit-card-calm-icon { width: 40px; height: 40px; border-radius: 999px; background: var(--acc-teal-soft); color: var(--acc-teal); display: grid; place-items: center; flex-shrink: 0; }
.cockpit-card-text { color: var(--fg-1); }

/* The month, a line of figures. */
.cockpit-month { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; padding: 16px 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cockpit-month > span { padding: 0 24px; border-left: 1px solid var(--border); color: var(--fg-1); }
.cockpit-month > span:first-child { padding: 0 24px 0 0; border-left: 0; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.cockpit-month b { font-size: 18px; color: var(--fg-0); font-feature-settings: "tnum"; }
.cockpit-month .is-down { color: var(--acc-rose); }
.cockpit-month .is-up { color: var(--acc-teal); }
.cockpit-month small { font-size: var(--fs-base); color: var(--fg-3); }
.cockpit-how { font-size: var(--fs-base); color: var(--fg-2); }
.cockpit-how summary { padding: 10px 6px; color: var(--fg-3); cursor: pointer; }
.cockpit-how p { margin: 4px 6px 8px; max-width: 860px; line-height: 1.55; }
.cockpit-month + .cockpit-how { margin-top: -16px; }

/* A section of a page : a card of glass. */
.cockpit-panel { padding: 22px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-1); min-width: 0; }
.cockpit-panel > h2 { margin: 0 0 16px; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); }
.cockpit-panel > h2 small { font-weight: 400; color: var(--fg-3); font-size: var(--fs-base); margin-left: 6px; }
.cockpit-panel .table-scroll { margin: 0 -28px -22px; border-top: 1px solid var(--border); }
.cockpit-panel .table { background: transparent; }

/* Brouillons : a square per draft, laid on a table in perspective. */
.waffle-panel { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
.waffle-side { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
/* A board about as deep as it is wide (`--cols` : 10, 16 past 100 squares),
   seen from above and from the side. */
.waffle {
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
  gap: 6px;
  width: min(100%, calc(var(--cols, 10) * 34px));
  transform: perspective(1500px) rotateX(55deg) rotateZ(-40deg);
  margin: -24px auto -12px;
}
.waffle-sq { aspect-ratio: 1; border-radius: 5px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 12px 18px rgba(0, 0, 0, .22); animation-name: fx-drop; }
@keyframes fx-drop { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
.waffle-note { margin-top: 24px; font-size: var(--fs-base); color: var(--fg-3); }
.use-as_is { background: var(--fx-use-as-is); }
.use-edited { background: var(--fx-use-edited); }
.use-rewritten { background: var(--fx-use-rewritten); }
.use-unused { background: var(--fx-use-unused); }
.use-waiting { background: repeating-linear-gradient(45deg, var(--fx-use-wait-a) 0 3px, var(--fx-use-wait-b) 3px 6px); }
.use-unmeasured { background: var(--fx-use-unmeasured); outline: 1px solid var(--border); outline-offset: -1px; }
.use-legend { flex: 1 1 260px; margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: baseline; }
.use-legend dt { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; text-align: right; font-feature-settings: "tnum"; color: var(--fg-2); }
.use-legend dt.is-teal { color: var(--acc-teal); }
.use-legend dt.is-amber { color: var(--acc-amber); }
.use-legend dt.is-rose { color: var(--acc-rose); }
.use-legend dt.is-dim { color: var(--fg-3); }
.use-legend dd { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--fg-1); }
.use-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Box by box : the same colours, as a bar. */
.use-rows { display: flex; flex-direction: column; gap: 14px; }
.use-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(120px, 170px); align-items: center; gap: 8px 16px; }
.use-row-box { font-family: var(--font-mono); font-size: var(--fs-base); overflow-wrap: anywhere; }
.use-row-box span { font-family: var(--font-sans); color: var(--fg-3); }
.use-row-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--bg-2); }
.use-row-bar > span { flex: var(--n) 0 0; }
.use-row-meta { font-size: var(--fs-base); color: var(--fg-3); text-align: right; }

/* Comptes : a card per account. */
.account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.account-card { padding: 22px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-1); display: flex; flex-direction: column; }
.account-card-head { display: flex; align-items: center; gap: 14px; }
.account-card-head > div { flex: 1; min-width: 0; }
.account-avatar { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.account-name { font-size: 18px; font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.account-name small { font-weight: 400; color: var(--fg-3); font-size: var(--fs-md); }
.account-since { font-size: var(--fs-base); color: var(--fg-3); overflow-wrap: anywhere; }
.account-role { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); background: var(--bg-2); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.account-role.is-operator { color: var(--acc-violet); background: var(--acc-violet-soft); }
.account-boxes { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-base); }
.account-boxes li { display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.account-boxes li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-teal); flex-shrink: 0; }
.account-boxes li.is-off { color: var(--fg-3); }
.account-boxes li.is-off::before { background: var(--fg-4); }
.account-figures { display: flex; border-top: 1px solid var(--border); padding-top: 14px; margin-top: auto; }
.account-figures > div { flex: 1; }
.account-figures > div + div { border-left: 1px solid var(--border); padding-left: 16px; }
.account-figures b { display: block; font-size: 22px; font-weight: 600; color: var(--fg-0); font-feature-settings: "tnum"; }
.account-figures span { font-size: var(--fs-sm); color: var(--fg-3); }
.account-open { margin-top: 16px; align-self: flex-start; }
.account-first { border: 2px dashed var(--border-strong); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 240px; }
.account-first-icon { width: 48px; height: 48px; border-radius: 999px; background: var(--acc-violet-soft); color: var(--acc-violet); display: grid; place-items: center; }
.account-first b { font-size: 17px; color: var(--fg-0); }
.account-first span { color: var(--fg-3); max-width: 300px; }

/* Journal : what changed, newest first. */
.journal { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 26px; max-width: 760px; }
.journal li { position: relative; }
.journal-dot { position: absolute; left: -31px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--acc-violet); box-shadow: 0 0 0 4px var(--bg-0), 0 0 18px var(--acc-violet); }
.journal-dot.is-teal { background: var(--acc-teal); box-shadow: 0 0 0 4px var(--bg-0), 0 0 18px var(--acc-teal); }
.journal-dot.is-rose { background: var(--acc-rose); box-shadow: 0 0 0 4px var(--bg-0), 0 0 18px var(--acc-rose); }
.journal-dot.is-blue { background: var(--acc-blue); box-shadow: 0 0 0 4px var(--bg-0), 0 0 18px var(--acc-blue); }
.journal-dot.is-quiet { left: -29px; top: 5px; width: 12px; height: 12px; background: var(--bg-1); border: 2px solid var(--border-strong); box-shadow: 0 0 0 4px var(--bg-0); }
.journal-when { font-size: var(--fs-base); color: var(--fg-3); }
.journal-what { font-size: 17px; font-weight: 600; color: var(--fg-0); overflow-wrap: anywhere; }
.journal-detail { color: var(--fg-1); overflow-wrap: anywhere; }

/* A phone : the tabs at the bottom, a smaller greeting. */
@media (max-width: 720px) {
  /* A backdrop-filter makes the head the frame of the fixed tabs inside
     it : they would stick to the head, not to the screen. Plain ground. */
  .cockpit-head.fx-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-1) !important; }
  .cockpit-head-inner { padding: 8px 16px; gap: 6px 12px; }
  .cockpit-head-end { margin-left: auto; }
  .cockpit-head-end .cockpit-live, .cockpit-head-end .cockpit-client-link,
  .cockpit-badge, .cockpit-avatar { display: none; }
  .cockpit-tabs {
    position: fixed;
    left: 12px; right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    z-index: 30;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--fx-glass-line);
    border-radius: 18px;
    background: var(--fx-glass);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: var(--sh-3);
  }
  .cockpit-tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; font-size: var(--fs-xs); border-radius: 12px; }
  .cockpit-tab[aria-current="page"] { background: var(--fx-btn); color: #fff; }
  .cockpit-tab .icon { width: 20px; height: 20px; }
  .cockpit-main { padding: 24px 16px calc(110px + env(safe-area-inset-bottom, 0px)); gap: 20px; }
  .cockpit-title { font-size: 34px; }
  .cockpit-intro .cockpit-title { font-size: 40px; }
  .cockpit-intro .cockpit-lead, .cockpit-lead { font-size: var(--fs-lg); }
  .cockpit-hero .rhythm { flex-basis: 100%; }
  .cockpit-card-figure { font-size: 44px; }
  .cockpit-month { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cockpit-month > span, .cockpit-month > span:first-child { padding: 0; border-left: 0; }
  .cockpit-panel { padding: 18px 16px; }
  .cockpit-panel .table-scroll { margin: 0 -16px -18px; }
  /* Turned, the board is wider than it is laid out : narrower on a phone,
     never past the screen's edge. */
  .waffle { width: 68%; margin: -10px auto 0; }
  .waffle-panel { overflow: hidden; }
  .use-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .use-row-meta { text-align: left; }
  .account-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ======================== Les pages du client, plus vivantes (since 2026-11-03) ========================
   The same effects as the cockpit's (« Effets ») on the pages under
   base.html.twig : the blobs behind the top of each page, the current box and
   the page shown lit by the gradient in the sidebar, and the Activité's week
   in one sentence beside what waits. */
.main { position: relative; isolation: isolate; }

/* The sidebar : the page shown, the current box. */
.nav-item.active {
  background: var(--fx-btn);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(124, 58, 237, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.nav-item.active .icon { color: #fff; }
.mailbox-head:not(.off) {
  border-color: transparent;
  border-left-color: transparent;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--acc-violet) 26%, var(--bg-1)), color-mix(in srgb, var(--acc-teal) 18%, var(--bg-1))) padding-box,
    linear-gradient(135deg, var(--acc-violet), var(--acc-teal)) border-box;
  border: 1px solid transparent;
  border-left-width: 3px;
}

/* The Activité : the week in one sentence, what waits beside it. */
.activity-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px 32px; margin: 4px 0 20px; }
.activity-hero-text { flex: 1 1 420px; min-width: 0; }
.activity-hero-title { margin: 0 0 12px; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; color: var(--fg-0); }
.activity-hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: var(--fs-md); color: var(--fg-2); }
.activity-hero-sub .activity-similarity { margin: 0; }
.activity-week-chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-base); font-weight: 600; background: var(--bg-2); color: var(--fg-2); }
.activity-week-chip.is-up { background: var(--acc-teal-soft); color: var(--acc-teal); }
.activity-waiting {
  flex: 0 1 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-1);
  color: var(--fg-0);
  text-decoration: none;
}
a.activity-waiting:hover { color: var(--fg-0); }
.activity-waiting-label { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc-amber); }
.activity-waiting.is-calm .activity-waiting-label { color: var(--acc-teal); }
.activity-waiting-figure { font-size: 52px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.05; font-feature-settings: "tnum"; }
.activity-waiting-calm { width: 40px; height: 40px; margin: 8px 0 6px; border-radius: 999px; background: var(--acc-teal-soft); color: var(--acc-teal); display: grid; place-items: center; }
.activity-waiting-text { color: var(--fg-1); }
.activity-waiting-text b { color: var(--acc-violet); font-weight: 600; white-space: nowrap; }
.activity-rhythm { margin-bottom: 16px; }
.activity-elsewhere {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 16px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--acc-amber-soft), var(--acc-rose-soft));
  color: var(--fg-1);
}
.activity-elsewhere-figure { font-size: 22px; font-weight: 700; color: var(--acc-amber); font-feature-settings: "tnum"; }
.activity-elsewhere a { color: var(--fg-0); text-decoration: none; padding: 4px 10px; border-radius: 999px; background: var(--bg-1); }
.activity-elsewhere a:hover { color: var(--acc-violet); }
@media (max-width: 1100px) {
  .activity-hero-title { font-size: 32px; }
}