/* Aplomb — components. Tokens only; each block names its template in templates/cotton/. */

/* Icons (cotton/icon.html) */
.icon { flex: none; }

/* Buttons: primary, secondary, destructive (design-system § 6) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--control-height); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--foret-700); border-radius: var(--r-card);
  font: 500 var(--fs-small)/var(--lh-small) var(--font-ui); text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--foret-700); color: var(--sur-foret); }
.btn--secondary { background: var(--surface); color: var(--foret-700); }
.btn--destructive { background: var(--surface); color: var(--alert); border-color: var(--alert); }
.btn--destructive-filled { background: var(--alert); color: var(--surface); border-color: var(--alert); }
.btn--icon { min-width: var(--control-height); padding: var(--sp-2); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; border-color: var(--bordure); color: var(--beton-500); background: var(--sable-200); }
.field-screen .btn { min-height: var(--touch-min); }

/* Menus built on <details> (top bar project switcher and user menu) */
.menu { position: relative; }
.menu__trigger {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--control-height); padding: var(--sp-2) var(--sp-3);
  border: var(--hairline); border-radius: var(--r-card); color: var(--nuit);
  font-size: var(--fs-small); cursor: pointer; list-style: none; max-width: 100%;
}
.menu__trigger::-webkit-details-marker { display: none; }
.menu__list {
  box-shadow: var(--ombre-flottante);
  position: absolute; top: calc(100% + var(--sp-1)); left: 0; z-index: var(--z-dialog);
  min-width: 16rem; padding: var(--sp-2) 0; margin: 0; list-style: none;
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card);
}
.menu--end .menu__list { left: auto; right: 0; }
.menu__item {
  display: block; width: 100%; padding: var(--sp-2) var(--sp-4); border: 0; background: none;
  color: var(--nuit); font-size: var(--fs-small); text-align: left; text-decoration: none; cursor: pointer;
}
.menu__item:hover, .menu__item[aria-current="true"] { background: var(--foret-100); color: var(--foret-700); }
.menu__meta { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-micro); color: var(--beton-500); border-bottom: var(--hairline); }

/* Brand (cotton/brand/) */
.brand-mark { flex: none; }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--nuit); }
.wordmark__by { align-self: flex-end; }
.wordmark__name { font: 600 var(--fs-h2)/1 var(--font-display); letter-spacing: 0; }
.wordmark__by { font: 400 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--beton-500); }

/* Toasts (cotton/toasts.html) */
.toasts {
  position: fixed; z-index: var(--z-toast); right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.field-screen .toasts { bottom: calc(var(--actionbar-height) + var(--sp-2)); }
.toast {
  box-shadow: var(--ombre-flottante);
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: var(--hairline); border-left-width: 3px; border-radius: var(--r-card);
  background: var(--surface); color: var(--nuit); font-size: var(--fs-small); pointer-events: auto;
}
.toast__text { flex: 1; }
.toast__close { border: 0; background: none; padding: 0; color: var(--beton-700); cursor: pointer; }
.toast--ok { border-left-color: var(--ok); } .toast--ok .icon { color: var(--ok); }
.toast--watch { border-left-color: var(--watch); } .toast--watch .icon { color: var(--watch); }
.toast--alert { border-left-color: var(--alert); } .toast--alert .icon { color: var(--alert); }
.toast--info { border-left-color: var(--info); } .toast--info .icon { color: var(--info); }
.toast--muted { border-left-color: var(--beton-500); }
@media (min-width: 600px) { .toasts { left: auto; width: 24rem; } }

/* Cartouche (cotton/cartouche.html): title block of a construction drawing */
.cartouche {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--foret-700); border-radius: var(--r-card); overflow: hidden;
  background: var(--surface);
}
/* The one place the Ndop lattice appears: behind the project's own cell, in laterite at a tenth
   of its strength. It never runs under a figure — only under the name and the address. */
.cartouche__cell--title {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(45deg, var(--motif) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, var(--motif) 0 1px, transparent 1px 16px);
}
.cartouche__cell { padding: var(--sp-2) var(--sp-3); border-right: var(--hairline); border-bottom: var(--hairline); min-width: 0; }
.cartouche__cell--title { grid-column: 1 / -1; }
.cartouche__label { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--beton-500); }
.cartouche-value { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; overflow-wrap: anywhere; }
.cartouche__project { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.cartouche__location { font-size: var(--fs-small); color: var(--beton-700); }
.cartouche__cell--as-of { border-left: var(--sp-1) solid var(--jaune); }
.cartouche__as-of {
  display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  text-decoration: underline dotted var(--beton-500); text-underline-offset: var(--sp-1);
}
.cartouche__picker { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.cartouche__historic { margin-top: var(--sp-1); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--nuit); }
.cartouche.is-historic .cartouche__cell--as-of { background: var(--jaune-50); }
@media (min-width: 1024px) {
  .cartouche { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cartouche__cell--title { grid-column: span 3; }
  .cartouche__cell:nth-child(3), .cartouche__cell:last-child { border-right: 0; }
  .cartouche__cell:nth-last-child(-n + 5) { border-bottom: 0; }
}

/* KPI card (cotton/kpi_card.html) */
.kpi-card {
  box-shadow: var(--ombre-carte);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--surface); border: var(--hairline);
  border-left: 3px solid var(--bordure); border-radius: var(--r-card);
}
.kpi-card--ok    { border-left-color: var(--ok); }
.kpi-card--watch { border-left-color: var(--watch); }
.kpi-card--alert { border-left-color: var(--alert); }
.kpi-card--info  { border-left-color: var(--foret-700); }
.kpi-card--muted { border-left-color: var(--bordure); }
.kpi-card__title { font: 400 var(--fs-small)/var(--lh-small) var(--font-ui); color: var(--beton-700); }
.kpi-card__figure { font-size: var(--fs-kpi); line-height: var(--lh-kpi); font-weight: 600; }
.kpi-card__comparison { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-700); }
.kpi-card__link { margin-top: auto; font-size: var(--fs-small); }

/* Summary card (cotton/summary_card.html): 3px encre-700 left edge */
.summary-card {
  box-shadow: var(--ombre-carte);
  padding: var(--sp-4) var(--sp-6); background: var(--surface);
  border: var(--hairline); border-left: 3px solid var(--foret-700); border-radius: var(--r-card);
}
.summary-card__title { margin-bottom: var(--sp-3); }
.summary-card__list { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 75ch; }

/* Objective list (cotton/objective_list.html) */
.objective-list { display: flex; flex-direction: column; }
.objective-list__item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding-block: var(--sp-2); border-bottom: var(--hairline);
}
.objective-list__task { color: var(--nuit); }
.objective-list__qty { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); color: var(--nuit); white-space: nowrap; }
.objective-list__empty { color: var(--beton-500); }

/* Empty state (cotton/empty_state.html) */
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-6); border: 1px dashed var(--bordure); border-radius: var(--r-card);
}
.empty-state__corps { display: flex; flex-direction: column; gap: var(--sp-2); }
.empty-state__title { font-weight: 600; color: var(--nuit); }
.empty-state__action { margin-top: var(--sp-2); }

/* The two states that are good news rather than a gap: a picture, then the words beside it. */
.empty-state--illustree {
  flex-direction: row; align-items: center; gap: var(--sp-6);
  border-style: solid; background: var(--surface); box-shadow: var(--ombre-carte);
}
.empty-state__photo { flex: none; width: 10rem; }
@media (max-width: 599px) {
  .empty-state--illustree { flex-direction: column; align-items: flex-start; }
  .empty-state__photo { width: 100%; }
}

/* Form fields (cotton/field/*.html). The .field look itself lives in tokens.css. */
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-field__label { font: 500 var(--fs-small)/var(--lh-small) var(--font-ui); color: var(--nuit); }
.form-field__required { color: var(--alert); }
.form-field__help { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--beton-700); }
.form-field__error {
  display: flex; align-items: center; gap: var(--sp-1);
  font: 500 var(--fs-small)/var(--lh-small) var(--font-ui); color: var(--alert);
}
.form-field .field { width: 100%; border-radius: var(--r-field); }
.form-field.is-invalid .field { border-color: var(--alert); border-left: var(--input-edge); }
.field-readonly { padding-block: var(--sp-2); color: var(--nuit); }
.field-unit { display: flex; align-items: center; gap: var(--sp-2); }
.form-field .field-unit .field { flex: 1; width: auto; min-width: 0; }
.field-unit__unit { color: var(--beton-700); }
select.field { appearance: auto; }
.field-screen .field { min-height: var(--touch-min); font-size: var(--fs-body); }

/* Zebra rows: only on the long report tables, where the eye needs the help (design-system § 2). */
.data-table--zebra tbody tr:nth-child(even) > * { background: var(--sable-200); }
.data-table--zebra tbody tr.is-as-of > * { background: var(--jaune-50); }

/* Data table (cotton/data_table.html) */
.table-scroll {  /* positioned: hidden labels stay inside */
  position: relative; overflow: auto; background: var(--surface);
  border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--ombre-carte);
}
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.data-table caption { padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: 600; color: var(--nuit); }
.data-table th, .data-table td { height: var(--control-height); padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: var(--hairline); }
.data-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--sable-200);
  font-weight: 600; color: var(--nuit); white-space: nowrap;
}
.data-table td { color: var(--beton-700); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tr.is-as-of > * { background: var(--jaune-50); color: var(--nuit); }
.field-screen .data-table th, .field-screen .data-table td { height: var(--touch-min); }

/* Chart frame (cotton/chart.html) */
.chart {
  margin: 0; padding: var(--sp-4); background: var(--surface);
  border: var(--hairline); border-radius: var(--r-card); box-shadow: var(--ombre-carte);
}
.chart__title { margin-bottom: var(--sp-2); }
.chart__interpretation { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--beton-700); }
.chart__data { margin-top: var(--sp-3); }
.chart__data summary { cursor: pointer; color: var(--foret-700); font-size: var(--fs-small); }
.chart__data .table-scroll { margin-top: var(--sp-2); }

/* Pointage (cotton/pointage_team.html) */
.pointage-team { display: flex; flex-direction: column; gap: var(--sp-2); }
.pointage-team__band {
  margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-card);
  background: var(--nuit); color: var(--sur-foret); font: 600 var(--fs-small)/var(--lh-small) var(--font-ui);
}
.pointage-grid th[scope="row"] { font-weight: 500; color: var(--nuit); white-space: nowrap; }
.pointage-grid__function { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--beton-500); }
.pointage-grid__day { text-align: center; }
.pointage-grid__cell { width: var(--sp-12); text-align: center; border-left: var(--hairline); }
.pointage-grid__cell .icon { display: inline-block; color: var(--ok); }
.pointage-grid__cell.is-absent { background: var(--alert-bg); }
.pointage-team__all { align-self: flex-start; }
.pointage-list { display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.pointage-list li + li { border-top: var(--hairline); }
.pointage-list__row {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--sp-3);
  align-items: center; min-height: var(--touch-min); padding: var(--sp-3) var(--sp-4); cursor: pointer;
}
.pointage-list__row input { grid-row: span 2; width: var(--sp-6); height: var(--sp-6); accent-color: var(--ok); }
.pointage-list__name { color: var(--nuit); font-weight: 500; }
.pointage-list__function { font-size: var(--fs-micro); color: var(--beton-500); }
.pointage-list__row:has(input:checked) { background: var(--ok-bg); }

/* Confirm dialog (cotton/confirm_dialog.html) */
.dialog {
  box-shadow: var(--ombre-flottante);
  width: min(100% - 2 * var(--sp-4), 32rem); padding: var(--sp-6);
  border: var(--hairline); border-radius: var(--r-card); background: var(--surface); color: var(--beton-700);
}
.dialog::backdrop { background: var(--scrim); }
.dialog__title { margin-bottom: var(--sp-2); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-6); }

/* QR code for the authenticator app: always dark modules on a light ground, in both themes,
   with existing token pairs (text on surface; on-encre on encre-900). */
.qr { display: inline-block; padding: var(--sp-4); color: var(--nuit); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); }
.qr svg { width: 12rem; height: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qr { color: var(--sur-foret); background: var(--nuit); }
}
:root[data-theme="dark"] .qr { color: var(--sur-foret); background: var(--nuit); }
.secret-key { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; overflow-wrap: anywhere; }

.form-field__check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-height); }

/* Wizard steps: « 1. Identité  2. Dates … », the current one underlined in ink. */
.steps { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.steps__item { padding-block: var(--sp-2); color: var(--beton-500); border-bottom: 2px solid transparent; }
.steps__item.is-current { color: var(--nuit); font-weight: 600; border-bottom-color: var(--foret-700); }

/* Notices: one sentence of warning or information, always with an icon and words. */
.notice { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); }
.notice--watch { background: var(--watch-bg); color: var(--watch); }
.notice--info { background: var(--info-bg); color: var(--info); }
.notice--alert { background: var(--alert-bg); color: var(--alert); }
.notice--ok { background: var(--ok-bg); color: var(--ok); }
fieldset.form-field { border: 0; margin: 0; padding: 0; }

/* Facts: a compact list of label / figure pairs (import report counts). */
.facts { display: grid; gap: var(--sp-2) var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: var(--sp-2); border-bottom: var(--hairline); padding-block: var(--sp-1); }
.facts dd { margin: 0; color: var(--nuit); }

/* Tabs inside a section (Paramètres: Général, Jours fériés, Lots et équipes, Listes). */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-4); border-bottom: var(--hairline); }
.tabs__item { padding-block: var(--sp-2); color: var(--beton-700); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs__item[aria-current="page"] { color: var(--nuit); font-weight: 600; border-bottom-color: var(--foret-700); }

/* Editable lists (lots, teams, reference lists): one row = one small form. */
.item-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; }
.item-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); }
.item-row__position { min-width: 2ch; padding-top: var(--sp-2); color: var(--beton-500); text-align: right; }
.item-row__form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); flex: 1; }
.item-row__form .form-field { flex: 1 1 12rem; }
.item-row--new { align-items: flex-end; padding-top: var(--sp-2); border-top: var(--hairline); }
.item-row--new .form-field { flex: 1 1 12rem; }
.grid-table__cell { text-align: center; }
.grid-table input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
.muted { color: var(--beton-500); font-weight: 400; }

/* Personnel: one block per team opened by the dark team band (design-system § 6, pointage grid). */
.team-block { display: flex; flex-direction: column; gap: var(--sp-3); }
.team-block__band { margin: 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-h3); background: var(--nuit); color: var(--sur-foret); border-radius: var(--r-card); }

/* Planning table: inputs (balise edge) beside computed columns (plain text), first column sticky. */
.planning-table { min-width: max-content; }
.planning-table__group { text-align: left; }
.planning-table__group--computed { color: var(--beton-700); }
.planning-table__input { padding: var(--sp-1); }
.planning-table__input .field { min-width: 7rem; }
.planning-table__input input[name$="-code"] { min-width: 4.5rem; width: 4.5rem; }
.planning-table__input input[name$="-designation"] { min-width: 16rem; }
.planning-table__sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.planning-table thead .planning-table__sticky { z-index: 2; background: var(--sable-200); }  /* corner above the other headers */
.planning-table .computed { color: var(--nuit); }
.planning-table__new td { border-top: 2px solid var(--bordure); }
.row-status { min-width: 10rem; font-size: var(--fs-small); }
.row-status__ok { color: var(--ok); }

/* Budget grid: compact FCFA inputs, overheads row set apart, totals as plain text. */
.budget-cell .field { min-width: 8.5rem; text-align: right; }
.budget-cell { padding: var(--sp-1); }
.budget-table__overheads th, .budget-table__overheads td { border-top: 2px solid var(--bordure); }
.data-table tfoot th, .data-table tfoot td { font-weight: 600; color: var(--nuit); }

/* Contrôle avant démarrage: one line per check, state pill first. */
.checklist { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; }
.checklist__item { display: grid; grid-template-columns: 8rem 1fr auto; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--sp-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); }
.checklist__item > .pill { justify-self: start; }
.checklist__title { margin: 0; font-size: var(--fs-h3); font-family: var(--font-ui); }
.checklist__text { display: flex; flex-direction: column; gap: var(--sp-1); }
.lead { font-size: var(--fs-h3); color: var(--nuit); }
@media (max-width: 600px) { .checklist__item { grid-template-columns: 1fr; } }

/* Field screens (phase 9): sync indicator, home cards, today's entries, conflicts. */
.sync-status { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small); color: var(--ok); background: var(--ok-bg); text-decoration: none; }
.sync-status[data-state="watch"] { color: var(--watch); background: var(--watch-bg); }
.sync-status[data-state="alert"] { color: var(--alert); background: var(--alert-bg); font-weight: 600; }
.sync-status[data-state="muted"] { color: var(--beton-700); background: var(--sable-200); }
.sync-status:not(.is-link) { pointer-events: none; }
.sync-status__dot { width: var(--sp-2); height: var(--sp-2); border-radius: 999px; background: currentColor; }
.field-cards { display: grid; gap: var(--sp-3); margin: 0; padding: 0; }
.field-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); min-height: calc(2 * var(--touch-min));
  padding: var(--sp-4); background: var(--surface); border: var(--hairline); border-left: 4px solid var(--foret-700);
  border-radius: var(--r-card); color: var(--nuit); text-decoration: none; }
.field-card.is-unavailable { border-left-color: var(--bordure); color: var(--beton-700); }
.field-card__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; }
.today { display: flex; flex-direction: column; gap: var(--sp-2); }
.today__list { display: flex; flex-direction: column; margin: 0; padding: 0; border: var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.today__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3); }
.today__item + .today__item { border-top: var(--hairline); }
.today__meta { font-size: var(--fs-micro); color: var(--beton-500); }
.form-status { min-height: 1.5em; font-size: var(--fs-small); }
.form-status[data-state="ok"] { color: var(--ok); }
.form-status[data-state="watch"] { color: var(--watch); }
.form-status[data-state="alert"] { color: var(--alert); }
.conflict { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface);
  border: var(--hairline); border-left: 4px solid var(--alert); border-radius: var(--r-card); }
.conflict__title { font-weight: 600; color: var(--nuit); }

/* Project hub: one card per area (Chaque jour, Préparation). */
.hub { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.hub__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-card); }
.hub__card li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.segmented { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.segmented__item { flex: none; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--sp-4);
  border: 1px solid var(--foret-700); border-radius: var(--r-card); color: var(--foret-700); text-decoration: none; }
.segmented__item[aria-current="page"] { background: var(--foret-700); color: var(--sur-foret); }
.segmented__choice { gap: var(--sp-2); cursor: pointer; }
.segmented__choice:has(input:checked) { background: var(--foret-700); color: var(--sur-foret); }
.segmented__choice input { accent-color: var(--sur-foret); }

/* ------------------------------------------------------------------------- */
/* Reports (phase 10): suivi du jour, semaine, mois, présence, indicateurs    */
/* ------------------------------------------------------------------------- */

/* Two readings side by side: what has just happened, what comes next. */
.report-split { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
.report-day { display: flex; flex-direction: column; gap: var(--sp-4); }
.report-day__figures { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.report-day__lists { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.report-split > * { min-width: 0; }   /* same reason as .dashboard-split above */
@media (min-width: 1024px) { .report-split { grid-template-columns: 2fr 1fr; } }

/* Charts shown two or three to a row. */
.chart-pair { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

/* Written-out quantities inside a table cell (objectifs du jour, travaux réalisés). */
.daily-table td { vertical-align: top; }
.daily-table th[scope="row"] { white-space: nowrap; color: var(--nuit); font-weight: 600; }
.cell-count { display: block; font-size: var(--fs-micro); color: var(--beton-500); }
.cell-list { margin: 0; padding: 0; list-style: none; min-width: 16rem; }
.cell-list li { padding-block: 2px; color: var(--beton-700); }
.cell-list .num { color: var(--nuit); font-weight: 600; white-space: nowrap; }

/* Présence du jour: one block of names per team. */
.name-lists { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.name-lists__team { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--surface); border: var(--hairline); border-radius: var(--r-card); }
.name-lists__team summary { cursor: pointer; color: var(--foret-700); font-size: var(--fs-small); }
.name-list { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); }

/* Indicateurs: one card per indicator, the red ones marked on their left edge. */
.indicator-list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin: 0; padding: 0; }
.indicator { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: var(--hairline); border-left: 3px solid var(--bordure); border-radius: var(--r-card); }
.indicator--alert { border-left-color: var(--alert); }
.indicator__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); width: 100%; }
.indicator__label { font: 400 var(--fs-small)/var(--lh-small) var(--font-ui); color: var(--beton-700); }
.indicator__value { font: 600 var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--nuit); }
.indicator__explanation { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--beton-500); }
.indicator__detail { width: 100%; }
.indicator__detail summary { cursor: pointer; color: var(--foret-700); font-size: var(--fs-small); }
.indicator__detail .table-scroll { margin-top: var(--sp-2); max-height: 24rem; }

/* The red appraisals, gathered at the top of Indicateurs. */
.alert-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; }
.alert-list__item { display: grid; grid-template-columns: minmax(12rem, auto) 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--surface); border: var(--hairline); border-left: 3px solid var(--alert); border-radius: var(--r-card); }
.alert-list__label { color: var(--nuit); }
.alert-list__value { font-weight: 600; color: var(--nuit); }
@media (max-width: 600px) { .alert-list__item { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------- */
/* Tableau de bord (phase 11)                                                 */
/* ------------------------------------------------------------------------- */

.kpi-row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.dashboard-split { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
/* A grid item keeps min-width:auto, so a wide table inside it widens the page instead of
   scrolling in its own box. On a phone that pushed the dashboard 900 px past the screen. */
.dashboard-split > * { min-width: 0; }
@media (min-width: 1024px) { .dashboard-split { grid-template-columns: 1fr 1fr; } }

/* « Actions du jour »: a short checklist, each line linking to the record. */
.actions-card { padding: var(--sp-4) var(--sp-6); background: var(--surface); border: var(--hairline); border-left: 3px solid var(--watch); border-radius: var(--r-card); }
.actions-card__title { margin-bottom: var(--sp-3); }
.actions-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; }
.actions-list__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2); border-bottom: var(--hairline); }
.actions-list__item:last-child { border-bottom: 0; }
.actions-list__item::before { content: ""; align-self: center; width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-pill); background: var(--bordure); }
.actions-list__item--alert::before { background: var(--alert); }
.actions-list__item--watch::before { background: var(--watch); }
.actions-list__text { flex: 1; min-width: 14rem; color: var(--nuit); }
.actions-list__link { font-size: var(--fs-small); white-space: nowrap; }

/* Lot colour dot in front of a lot name, so the table and the charts read as one. */
.lot-dot { display: inline-block; width: var(--sp-2); height: var(--sp-2); margin-right: var(--sp-2); border-radius: var(--r-pill); background: var(--bordure); }
.lot-dot--1 { background: var(--lot-1); } .lot-dot--2 { background: var(--lot-2); }
.lot-dot--3 { background: var(--lot-3); } .lot-dot--4 { background: var(--lot-4); }
.lot-dot--5 { background: var(--lot-5); } .lot-dot--6 { background: var(--lot-6); }
.lot-dot--7 { background: var(--lot-7); } .lot-dot--8 { background: var(--lot-8); }

.chart__lines { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; font-size: var(--fs-small); color: var(--beton-700); }

/* The two dashboard lists sit side by side: keep their first column readable and let them scroll. */
.dashboard-split .data-table th[scope="row"] { min-width: 12rem; }
.dashboard-split .data-table { min-width: max-content; }

/* Project hub: the page a user lands on, before any report. */
.project-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.project-head__eyebrow { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--beton-500); }
.project-head__meta { font-size: var(--fs-small); color: var(--beton-700); }

/* Centre d'alertes (phase 14): one line per alert, unread marked on its left edge. */
.alert-feed { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; }
.alert-feed__item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: var(--hairline); border-left: 3px solid var(--bordure); border-radius: var(--r-card); }
.alert-feed__item--alert { border-left-color: var(--alert); }
.alert-feed__item--watch { border-left-color: var(--watch); }
.alert-feed__item.is-unread { background: var(--foret-100); }
.alert-feed__text { flex: 1; min-width: 18rem; display: flex; flex-direction: column; gap: var(--sp-1); }
.alert-feed__title { margin: 0; font: 600 var(--fs-h3)/var(--lh-h3) var(--font-ui); }

/* Aide (phase 17): the user guide, rendered from docs/guide/ beside its own table of contents. */
.help { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start; }
.help__nav { background: var(--surface); border: var(--hairline); border-radius: var(--r-card); padding: var(--sp-3); }
/* A table of contents, so no icons — a chevron that leans in instead, drawn after the title so
   it follows a line that wraps. */
.sidenav__link--chevron { justify-content: space-between; }
.sidenav__link--chevron::after {
  content: ""; flex: none; width: 6px; height: 6px;
  border: 1.75px solid currentColor; border-width: 1.75px 1.75px 0 0;
  transform: rotate(45deg); opacity: 0;
  transition: opacity var(--duration), transform var(--duration);
}
a.sidenav__link--chevron:hover::after { opacity: 0.6; transform: rotate(45deg) translate(2px, -2px); }
.sidenav__link--chevron.is-active::after { opacity: 1; }
.help__body { background: var(--surface); border: var(--hairline); border-radius: var(--r-card); padding: var(--sp-6); }
@media (min-width: 1024px) { .help { grid-template-columns: 16rem 1fr; } }

/* Prose: the only place in the product where a block of text runs long. */
.prose { max-width: 75ch; color: var(--beton-700); }
.prose h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); margin-bottom: var(--sp-4); }
.prose h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); margin: var(--sp-6) 0 var(--sp-2); }
.prose h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: var(--sp-4) 0 var(--sp-2); }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: var(--sp-3); }
.prose ul, .prose ol { padding-left: var(--sp-6); }
.prose li { margin-bottom: var(--sp-1); }
.prose code { font-size: var(--fs-small); background: var(--sable-200); padding: 1px var(--sp-1); border-radius: var(--r-field); }
.prose blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--foret-700); background: var(--sable-200); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: var(--hairline); vertical-align: top; }
.prose thead th { background: var(--sable-200); color: var(--nuit); }
.prose strong { color: var(--nuit); }

/* Visite guidée (phase 17): one step at a time, on the project's home page. */
.tour { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6);
  background: var(--surface); border: var(--hairline); border-left: 3px solid var(--jaune);
  border-radius: var(--r-card); }
.tour__count { font: 500 var(--fs-micro)/var(--lh-micro) var(--font-ui); color: var(--beton-500); }
.tour__title { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.tour__body { max-width: 75ch; }

/* ------------------------------------------------------------------------- */
/* Photographs and the Ndop lattice                                           */
/* ------------------------------------------------------------------------- */

/* The lattice: interlocking diamonds, the geometry of Ndop cloth reduced to two crossing sets
   of lines. Drawn in --motif, which is laterite at a tenth of its strength, so it stays a
   texture and never competes with a figure. */
.motif-ndop {
  background-image:
    repeating-linear-gradient(45deg, var(--motif) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, var(--motif) 0 1px, transparent 1px 16px);
}

.photo { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--sable-200); }
.photo::before { content: ""; display: block; padding-top: calc(100% / (var(--photo-ratio))); }
.photo > img, .photo > .photo__attente { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo > img { object-fit: cover; }

/* What stands there until the photograph is supplied: the site drawn on the lattice. */
.photo__attente {
  display: grid;
  color: var(--foret-700);
  background-color: var(--sable-200);
  background-image:
    repeating-linear-gradient(45deg, var(--motif) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, var(--motif) 0 1px, transparent 1px 16px);
}
.photo__attente > .illustration { width: 100%; height: 100%; align-self: end; justify-self: center; }

/* The veil darkens a photograph so words can be written on it. It is for a photograph only:
   over the pale stand-in it produced a mid sage where white text fell to 3.98:1. */
.photo--voilee:has(img)::after {
  content: ""; position: absolute; inset: 0; background: var(--voile);
}
.photo--voilee > img { filter: saturate(0.9); }

/* So the stand-in carries the dark panel itself, and draws the site quietly behind the words. */
.photo--voilee > .photo__attente {
  background-color: var(--foret-800);
  color: var(--sur-foret);
}
.photo--voilee > .photo__attente > .illustration { opacity: 0.42; }

/* Initials, when a member has no photograph. */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--control-height); height: var(--control-height); border-radius: var(--r-pill);
  background: var(--foret-100); color: var(--foret-700);
  font: 600 var(--fs-small)/1 var(--font-display); letter-spacing: 0.02em;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-micro); }

/* ------------------------------------------------------------------------- */
/* The maître d'ouvrage's header: the works first, the figures after          */
/* ------------------------------------------------------------------------- */

.moa-hero {
  position: relative; display: grid; align-items: end; min-height: 14rem;
  border-radius: var(--r-card); overflow: hidden;
  background: var(--foret-800); color: var(--sur-foret);
  box-shadow: var(--ombre-carte);
}
.photo.moa-hero__photo { position: absolute; inset: 0; border-radius: 0; }
.photo.moa-hero__photo::before { display: none; }
.moa-hero__texte {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6);
  text-shadow: var(--ombre-texte);
}
.moa-hero__eyebrow { font-size: var(--fs-small); line-height: var(--lh-small); opacity: 0.9; }
.moa-hero__titre { font: 600 var(--fs-h1)/var(--lh-h1) var(--font-display); color: var(--sur-foret); max-width: 26ch; }
.moa-hero__phrase { font-size: var(--fs-h3); line-height: var(--lh-h3); max-width: 60ch; }
.moa-hero__note { font-size: var(--fs-small); line-height: var(--lh-small); opacity: 0.85; max-width: 60ch; }

/* ------------------------------------------------------------------------- */
/* « Mes chantiers »: one card per site                                       */
/* ------------------------------------------------------------------------- */

.chantiers__compte { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-500); }
.chantiers {
  display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.chantier {
  display: grid; gap: var(--sp-1); height: 100%; padding: var(--sp-4);
  background: var(--surface); border: var(--hairline); border-left: 3px solid var(--bordure);
  border-radius: var(--r-card); box-shadow: var(--ombre-carte);
  color: var(--beton-700); text-decoration: none;
  transition: box-shadow var(--duration), border-color var(--duration);
}
.chantier:hover { box-shadow: var(--ombre-flottante); }
.chantier--ok    { border-left-color: var(--ok); }
.chantier--watch { border-left-color: var(--watch); }
.chantier--alert { border-left-color: var(--alert); }
.chantier--info  { border-left-color: var(--foret-700); }
.chantier--muted { border-left-color: var(--bordure); }

.chantier__nom { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); color: var(--nuit); }
.chantier__lieu { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-500); }
.chantier__avancement {
  margin-top: var(--sp-2);
  font: 600 var(--fs-kpi)/var(--lh-kpi) var(--font-display); color: var(--nuit);
  font-variant-numeric: tabular-nums;
}
.chantier__avancement--vide { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--beton-500); }
.chantier__prevu { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-700); }
.chantier__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.chantier__retards { font-size: var(--fs-small); color: var(--alert); }
.chantier__arret { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--beton-500); }

/* The last card of the grid is the way to add another site. */
.chantier--nouveau {
  place-content: center; justify-items: center; text-align: center; gap: var(--sp-2);
  border: 1px dashed var(--beton-500); border-left: 1px dashed var(--beton-500);
  background: transparent; box-shadow: none; min-height: 11rem;
}
.chantier--nouveau:hover { background: var(--surface); box-shadow: var(--ombre-carte); }
.chantier__plus { font: 400 var(--fs-kpi)/1 var(--font-display); color: var(--foret-700); }
.chantier--nouveau .chantier__nom { color: var(--foret-700); }