/*
 * Phenix Pilot — feuille de style applicative.
 *
 * `maquette.css` est repris tel quel de la démonstration validée : il porte
 * l'identité visuelle (palette, cartes, pastilles, rail du parcours, tableaux)
 * que la consigne § 0.4 demande de conserver. Ce fichier n'ajoute que ce dont
 * l'application réelle a besoin en plus : messages système, pagination,
 * formulaires, erreurs, aperçu documentaire, checklist de clôture, impression.
 */
@import url("maquette-gR5a6f4.css");

/* --- Compléments de palette manquants dans la maquette ------------------- */
.pill.muted, .status.muted { color: var(--muted); background: var(--surface-soft); }
.status.muted i { background: currentColor; }
.pill.violet { color: var(--violet); background: var(--violet-soft); }
.status.red { color: var(--red); }
.positive { color: var(--teal); }
.muted-text { color: var(--muted); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La bannière de démonstration devient un bandeau d'environnement. */
.env-banner { height: 28px; display: grid; place-items: center; background: var(--amber); color: #fff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.env-banner.prod { display: none; }
.app-shell { min-height: 100vh; }
body.has-banner .app-shell { min-height: calc(100vh - 28px); }
body.has-banner .sidebar { height: calc(100vh - 28px); }

/* --- Messages système ---------------------------------------------------- */
.flash-stack { display: grid; gap: 10px; margin-bottom: 16px; }
.flash { padding: 13px 15px; display: grid; grid-template-columns: 26px 1fr auto; align-items: start; gap: 11px; border-radius: 11px; border: 1px solid transparent; }
.flash > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 900; font-size: 13px; }
.flash p { margin: 0; }
.flash strong { display: block; margin-bottom: 3px; }
.flash small { color: inherit; opacity: .8; }
.flash ul { margin: 6px 0 0; padding-left: 18px; }
.flash-close { border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; opacity: .55; }
.flash-close:hover { opacity: 1; }
.flash.success { color: #0d6d62; background: var(--teal-soft); border-color: rgba(15,159,143,.28); }
.flash.success > span:first-child { background: var(--teal); }
.flash.error { color: #9c2f2f; background: var(--red-soft); border-color: rgba(216,82,82,.3); }
.flash.error > span:first-child { background: var(--red); }
.flash.warning { color: #8a5a08; background: var(--amber-soft); border-color: rgba(217,139,18,.3); }
.flash.warning > span:first-child { background: var(--amber); }
.flash.info { color: #22508f; background: var(--blue-soft); border-color: rgba(52,120,246,.25); }
.flash.info > span:first-child { background: var(--blue); }
.dark-theme .flash.success { color: #7fe0d1; }
.dark-theme .flash.error { color: #ffb4b4; }
.dark-theme .flash.warning { color: #f2c879; }
.dark-theme .flash.info { color: #a7c8ff; }

/* --- Formulaires --------------------------------------------------------- */
.form-errors { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; color: #9c2f2f; background: var(--red-soft); list-style: none; }
.form-errors li + li { margin-top: 5px; }
.field-error { margin-top: 5px; color: var(--red); font-size: 11px; font-weight: 600; }
label.required > span:first-child::after, .required-mark::after { content: " *"; color: var(--red); }
.form-hint { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }
fieldset { margin: 0 0 18px; padding: 0; border: 0; }
fieldset > legend { padding: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.form-section { margin-bottom: 22px; }
.form-section + .form-section { padding-top: 20px; border-top: 1px solid var(--border); }
.input-with-unit { position: relative; }
.input-with-unit input { padding-right: 42px; }
.input-with-unit .unit { position: absolute; right: 11px; bottom: 11px; color: var(--muted); font-size: 11px; font-weight: 700; }
.button[disabled], .button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button.danger { background: var(--red); color: #fff; }
.button.ghost { background: transparent; color: var(--muted); border: 1px dashed var(--border); }
.button.small { min-height: 32px; padding: 6px 10px; font-size: 12px; }

/* --- Connexion ----------------------------------------------------------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-card { width: min(420px, 100%); padding: 30px; display: grid; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
/* Comme dans la barre latérale, le nom et la baseline s'empilent. */
.auth-brand > span:last-child { display: grid; gap: 2px; }
.auth-brand strong { font-size: 15px; }
.auth-brand small { font-size: 11px; }
.auth-card h1 { margin: 0; font-size: 21px; }
.auth-card p.lead { margin: 0; color: var(--muted); }
.auth-footer { margin-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.auth-legal { margin-top: 18px; color: var(--muted); font-size: 11px; text-align: center; }
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.checkbox-row input { width: 16px; height: 16px; }

/* --- Pagination et listes ------------------------------------------------ */
.pagination { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pagination-pages { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pagination a, .pagination span.page { min-width: 34px; height: 34px; padding: 0 9px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: var(--surface); text-decoration: none; font-weight: 700; font-size: 12px; }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination span.page.current { color: #fff; background: var(--blue); border-color: var(--blue); }
.pagination span.page.disabled { color: var(--muted); background: var(--surface-soft); }
.pagination-summary { color: var(--muted); font-size: 12px; }
.empty-state { padding: 42px 20px; display: grid; place-items: center; gap: 10px; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 16px; }
.empty-state .empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); font-size: 22px; }
tbody tr td a { color: inherit; text-decoration: none; }
tbody tr td a:hover { color: var(--blue); }
.row-link { display: block; color: inherit; text-decoration: none; }

/* --- Fiche dossier ------------------------------------------------------- */
.dossier-header { padding: 20px; display: grid; gap: 16px; margin-bottom: 16px; }
.dossier-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.dossier-header h1 { margin: 8px 0 4px; font-size: 23px; }
.dossier-header .subtitle { margin: 0; color: var(--muted); }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: var(--blue-soft); }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.progress-label strong { color: var(--blue); }

.tabs { margin-bottom: 16px; display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tabs a { padding: 11px 14px; display: inline-flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue); }
.tabs .tab-count { min-width: 20px; padding: 2px 6px; border-radius: 99px; background: var(--surface-soft); font-size: 10px; }
.tabs a.active .tab-count { color: var(--blue); background: var(--blue-soft); }

.checklist { display: grid; gap: 8px; }
.checklist-item { padding: 11px 13px; display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.checklist-item.ok { border-color: rgba(15,159,143,.35); background: var(--teal-soft); }
.checklist-item.blocked { border-color: rgba(217,139,18,.35); background: var(--amber-soft); }
.checklist-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 900; background: var(--muted); }
.checklist-item.ok .checklist-mark { background: var(--teal); }
.checklist-item.blocked .checklist-mark { background: var(--amber); }
.checklist-item > div { display: grid; gap: 3px; }
.checklist-item small { color: var(--muted); }
.checklist-item.ok small, .checklist-item.blocked small { color: inherit; opacity: .85; }

.timeline { position: relative; display: grid; gap: 0; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--border); }
.timeline-entry { position: relative; padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline-entry:last-child { border-bottom: 0; }
.timeline-entry::before { content: ""; position: absolute; left: -22px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--surface); }
.timeline-entry.minor::before { background: var(--border); }
.timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.timeline-head strong { font-size: 13px; }
.timeline-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.timeline-entry p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.timeline-diff { margin-top: 6px; display: grid; gap: 3px; font-size: 11px; }
.timeline-diff code { padding: 1px 5px; border-radius: 5px; background: var(--surface-soft); }

.calc-trace { margin-top: 12px; display: grid; gap: 8px; }
.calc-trace-item { padding: 11px 13px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-soft); font-size: 12px; }
.calc-trace-item strong { display: block; margin-bottom: 4px; }
.calc-trace-item .formula { color: var(--blue); font-weight: 700; }
.calc-trace-item dl { margin: 7px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.calc-trace-item dt { color: var(--muted); }
.calc-trace-item dd { margin: 0; font-weight: 700; }
.calc-trace-item .note { margin-top: 6px; color: var(--muted); font-style: italic; }

/* --- Validation documentaire (document à gauche, champs à droite) -------- */
.review-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 16px; align-items: start; }
.review-preview { position: sticky; top: 16px; padding: 0; overflow: hidden; }
.review-preview embed, .review-preview iframe, .review-preview img { display: block; width: 100%; height: min(76vh, 900px); border: 0; background: #f1f4f8; object-fit: contain; }
.review-preview-bar { padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); }
.review-fields { padding: 20px; display: grid; gap: 14px; }
.review-field { position: relative; display: grid; gap: 6px; }
.review-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.review-field-head label { color: var(--muted); font-size: 11px; font-weight: 700; }
.confidence-tag { font-size: 10px; font-weight: 800; }
.confidence-tag.teal { color: var(--teal); }
.confidence-tag.blue { color: var(--blue); }
.confidence-tag.amber { color: var(--amber); }
.confidence-tag.red { color: var(--red); }
.confidence-tag.muted { color: var(--muted); }
.review-field .proposed { color: var(--muted); font-size: 11px; }
.review-field .proposed b { color: var(--ink); }
.review-field.corrected input, .review-field.corrected textarea { border-color: var(--blue); background: var(--blue-soft); }
.review-note { padding: 10px 12px; border-radius: 9px; color: var(--amber); background: var(--amber-soft); font-size: 11px; }
.review-actions { position: sticky; bottom: 0; margin-top: 4px; padding: 14px 0 0; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--border); background: var(--surface); }

/* --- Aperçu e-mail ------------------------------------------------------- */
.email-preview { padding: 20px; display: grid; gap: 14px; }
.email-headers { display: grid; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.email-headers > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: baseline; font-size: 13px; }
.email-headers dt, .email-headers > div > span:first-child { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.email-body { white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.attachment-total { color: var(--muted); font-size: 11px; text-align: right; }
.attachment-total.over { color: var(--red); font-weight: 700; }

/* --- Divers -------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); }
.stat-row > div { padding: 14px; display: grid; gap: 5px; background: var(--surface-soft); }
.stat-row small { color: var(--muted); }
.stat-row strong { font-size: 17px; }
.inline-form { display: inline; }
.card-body { padding: 20px; }
.card-body > :first-child { margin-top: 0; }
.section-title { margin: 26px 0 12px; font-size: 15px; }
details.disclosure { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
details.disclosure > summary { padding: 12px 14px; cursor: pointer; font-weight: 700; background: var(--surface-soft); }
details.disclosure > div { padding: 14px; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1180px) {
  .review-layout { grid-template-columns: 1fr; }
  .review-preview { position: static; }
  .review-preview embed, .review-preview iframe, .review-preview img { height: 60vh; }
}
@media (max-width: 620px) {
  .dossier-header-top { flex-direction: column; align-items: stretch; }
  .email-headers > div { grid-template-columns: 1fr; gap: 3px; }
  .pagination { justify-content: center; }
  .review-actions { flex-direction: column-reverse; }
  .review-actions .button { width: 100%; }
}

/* --- Impression des documents générés ------------------------------------ */
@media print {
  .sidebar, .topbar, .tabs, .flash-stack, .env-banner, .review-actions,
  .button, .icon-button, .text-button, .pagination { display: none !important; }
  .app-shell { display: block; }
  .main-content { padding: 0; }
  .card { border: 0; box-shadow: none; }
  body { background: #fff; }
}

/* --- Valeurs proposées par la lecture d'un document ----------------------
 * Le devis impose de signaler les informations incertaines. Un champ prérempli
 * se distingue d'une saisie humaine, et la couleur dit à quel point la lecture
 * était sûre : plus c'est rouge, plus il faut relire.
 */
[data-propose] {
    border-color: var(--blue);
    background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
[data-propose="amber"] { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--surface)); }
[data-propose="red"]   { border-color: var(--red);   background: color-mix(in srgb, var(--red) 8%, var(--surface)); }
[data-propose="teal"]  { border-color: var(--teal);  background: color-mix(in srgb, var(--teal) 6%, var(--surface)); }
[data-propose="muted"] { border-color: var(--border); background: var(--surface-soft); }

.propose-legende {
    margin: 10px 0 0;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}
.propose-legende span { display: inline-flex; align-items: center; gap: 6px; }
.propose-legende i {
    width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid var(--blue);
    background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.propose-legende i.amber { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.propose-legende i.red { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--surface)); }

/* --- Blocs de référence : une fiche du référentiel, ou une saisie libre ---
   Le masquage est conditionne a la classe « js » : sans JavaScript, rien n'est
   masque et le formulaire reste entierement utilisable. */
.ref-bloc { display: grid; gap: 8px; align-content: start; }

.js [data-ref-etat="masque"] { display: none; }

.ref-libre {
    display: grid;
    gap: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--border);
    border-radius: 0 10px 10px 0;
    background: var(--surface-soft);
}

.ref-resume,
.ref-attelage {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.ref-attelage { color: var(--blue); }

.ref-alerte {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--amber);
}

/* Une valeur lue sur un document qui primerait sur la fiche que l'utilisateur
   vient de choisir n'est pas une nuance : c'est un conflit, et il se tranche
   ici plutot qu'apres l'enregistrement. */
.ref-alerte.conflit {
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--red);
    background: var(--red-soft);
}

.ref-alerte .text-button { padding: 0 2px; }

/* --- Les huit lignes relues avant d'imprimer la liasse --------------------
   Une liste depliable plutot qu'un tableau : le formulaire de correction doit
   tenir sur toute la largeur, ce qu'une cellule de tableau ne permet pas. Sans
   JavaScript, <details> s'ouvre quand meme — aucune ligne ne devient
   incorrigible. */
.controle { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.controle > * + * { border-top: 1px solid var(--border); }
.controle > .controle-verrou { border-top: 0; }

.controle-rang {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr) minmax(110px, auto) 78px;
    align-items: baseline;
    gap: 5px 14px;
    padding: 11px 14px;
    font-size: 13px;
}

.controle-ligne > summary { cursor: pointer; list-style: none; }
.controle-ligne > summary::-webkit-details-marker { display: none; }
.controle-ligne > summary:hover .controle-corriger { text-decoration: underline; }
.controle-ligne[open] > summary .controle-rang { background: var(--surface-soft); }

.controle-libelle { font-weight: 700; }
.controle-valeur { overflow-wrap: anywhere; }
.controle-origine { color: var(--muted); font-size: 12px; }
.controle-corriger { color: var(--blue); font-size: 12px; font-weight: 700; text-align: right; }

.controle-panneau { padding: 4px 14px 16px; background: var(--surface-soft); }
.controle-panneau .form-grid { margin-top: 4px; }

.controle-verrou {
    margin: 0;
    padding: 0 14px 11px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 860px) {
    .controle-rang { grid-template-columns: 1fr auto; }
    .controle-origine { grid-column: 1 / -1; }
}

/* --- Enchainement : ce qui vient de se passer, et la suite ---------------
   <dialog open> se rend comme un encart sans JavaScript ; le script le
   transforme en vraie modale. Rien ne devient inaccessible. */
.enchainement {
    position: relative;
    width: min(560px, 100%);
    margin: 0 0 18px;
    padding: 22px 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}

.enchainement[open] { display: block; }

/* En encart (sans JavaScript) la marge la place dans le flux ; en modale, on
   rend au navigateur son centrage. */
.enchainement:modal { margin: auto; }
.enchainement::backdrop { background: rgb(20 33 61 / 45%); }

.enchainement h2 { margin: 4px 0 8px; font-size: 20px; }
.enchainement .form-hint { margin: 0; }

.enchainement-fermer { position: absolute; top: 10px; right: 12px; }
.enchainement-fermer button {
    border: 0; background: transparent; color: var(--muted);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.enchainement-fermer button:hover { color: var(--ink); }

.enchainement-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px 14px; margin-top: 18px;
}
.enchainement-actions form { margin: 0; }

/* La confirmation d'une action irréversible : même boîte que l'enchaînement,
   mais toujours modale — elle n'est créée que par le script. */
.enchainement.confirmation { margin: auto; }

/* --- Divergences entre deux lectures ------------------------------------- */
.divergences { margin: 12px 0 0; display: grid; gap: 10px; }
.divergences dt { font-weight: 600; font-size: 13px; }
.divergences dd { margin: 2px 0 0; }
.divergences ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.divergences li {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 10px; font-size: 13px;
}
.divergences li span { color: var(--muted); }

/* --- Voile d'attente pendant la lecture d'un document --------------------
   La lecture est un POST synchrone qui peut durer une minute : sans voile, la
   page paraît morte et invite au double envoi. */
.lecture-voile {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(2px);
}
.lecture-voile-carte {
    max-width: 340px; padding: 22px 26px;
    display: grid; gap: 8px; justify-items: center; text-align: center;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow, 0 16px 42px rgba(0, 0, 0, .18));
}
.lecture-voile-carte small { color: var(--muted); }
.lecture-voile-sablier {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--ink);
    animation: lecture-voile-tour 1s linear infinite;
}
@keyframes lecture-voile-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lecture-voile-sablier { animation: none; }
}

/* --- Terrain : cibles tactiles et ordre mobile ---------------------------
   Sur tablette d'atelier, l'écran se touche debout, parfois avec des gants :
   les actions passent à 48 px de haut, le minimum industriel. Le pointeur
   « coarse » cible les écrans tactiles sans toucher au confort du poste fixe. */
@media (pointer: coarse) {
    .button,
    .text-button,
    .journey-capture-button,
    button[type="submit"],
    select,
    input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], input[type="date"], input[type="datetime-local"],
    input[type="number"] {
        min-height: 48px;
    }
    .text-button { display: inline-flex; align-items: center; padding-block: 8px; }
    .nav-item { min-height: 48px; }
    .attachment-picker > label, .checklist-item { min-height: 48px; }
}

/* Sur téléphone, l'opérateur ouvre l'app pour agir : les actions prioritaires
   passent devant les indicateurs, qui restent à un défilement de là. */
@media (max-width: 860px) {
    .dashboard-pile { display: flex; flex-direction: column; }
    .dashboard-pile > .overview-grid { order: -1; }
}

/* --- Voile de la navigation mobile ---------------------------------------
   Le panneau glissait par-dessus une page restee cliquable : on ne savait pas
   qu'on etait dans un menu, et un doigt a cote suivait un lien du fond. Le
   voile ferme le panneau et le detache visiblement de la page. Il n'existe
   qu'en dessous de 860 px, la ou le panneau devient flottant. */
.menu-voile { display: none; }

@media (max-width: 860px) {
    .menu-voile {
        display: block;
        position: fixed;
        inset: 28px 0 0;
        z-index: 19;
        background: rgba(9, 15, 28, .45);
        animation: menu-voile-entree .18s ease;
    }
    .menu-voile[hidden] { display: none; }

    /* Le fond ne defile plus derriere le panneau ouvert. */
    body.menu-ouvert { overflow: hidden; }
}

@keyframes menu-voile-entree { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .menu-voile { animation: none; }
    .sidebar { transition: none; }
}

/* --- Rail : « ou je suis » et « ou ca coince » ne sont pas la meme chose ---
   L'etape AFFICHEE est pleine et bleue (« .active », posee par le rail).
   L'etape EN COURS ailleurs dans le parcours — celle qui bloque, souvent — est
   cerclee sans etre remplie : on la repere sans la confondre avec la page
   ouverte. Les deux portaient « active » et se ressemblaient trait pour trait. */
.journey-step.en-cours { color: var(--blue); }
.journey-step.en-cours > span:first-child {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--surface);
}
.journey-step.en-cours > i { background: var(--blue); opacity: .45; }

/* Affichee ET en cours : c'est la pastille pleine qui gagne. */
.journey-step.en-cours.active > span:first-child { color: #fff; background: var(--blue); }

/* --- Debordement lateral de la page sur telephone -------------------------
   Une colonne « 1fr » vaut « minmax(auto, 1fr) » : sa largeur MINIMALE est le
   min-content de ce qu'elle contient. Un tableau de reglements large de 780 px
   elargissait donc sa colonne, puis la grille, puis la page — et c'est la PAGE
   qui defilait lateralement, alors que le tableau etait deja pose dans un
   « .table-wrap » fait pour defiler tout seul. « minmax(0, 1fr) » rend au
   conteneur le droit d'etre plus etroit que son contenu, et chaque bloc large
   redevient responsable de son propre defilement. */
@media (max-width: 860px) {
    .app-shell,
    .journey-layout,
    .journey-overview { grid-template-columns: minmax(0, 1fr); }
}

/* --- Rail des huit etapes sur telephone ----------------------------------
   Huit colonnes de 96 px font 768 px : le rail devenait un long defilement
   lateral dans lequel l'etape courante se perdait. Sur telephone, chaque etape
   se reduit a sa pastille et ne montre son libelle que si elle est en cours —
   c'est la seule qu'on ait besoin de lire. Le rail tient alors dans la largeur,
   et le script y amene l'etape courante. */
@media (max-width: 640px) {
    /* Une rangee souple plutot que huit colonnes egales : les sept etapes qu'on
       ne lit pas se reduisent a leur pastille, celle qu'on lit garde son
       libelle. Les huit tiennent alors dans la largeur d'un telephone. */
    .journey-rail {
        display: flex;
        gap: 4px;
        padding: 10px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;

        /* Sans cette ligne, la largeur minimale du contenu du rail — huit
           etapes cote a cote — force sa colonne de grille a s'elargir, et c'est
           la PAGE ENTIERE qui defile lateralement au lieu du seul rail. */
        min-width: 0;
    }
    .journey-step {
        flex: 0 0 36px;
        min-height: 52px;
        padding: 8px 2px;
        gap: 4px;
        scroll-snap-align: center;
    }
    .journey-step > span:nth-child(2) { display: none; }

    /* « active » marque aussi bien l'etape en cours que celle qu'on regarde, et
       il peut y en avoir deux. Le libelle revient a une seule : celle qui est
       affichee, marquee aria-current par le rail. */
    .journey-step[aria-current="step"] {
        flex: 1 1 auto;
        min-width: 112px;
    }
    .journey-step[aria-current="step"] > span:nth-child(2) { display: grid; }
    .journey-step[aria-current="step"] strong { font-size: 11px; line-height: 1.2; }
}

/* --- Barre de debogage Symfony -------------------------------------------
   Elle est en position fixe au ras du bas de la fenetre, au-dessus de tout.
   Les barres d'action collantes de l'application — « Valider », « Enregistrer »
   — passaient dessous : le bouton etait visible, et le clic partait dans la
   barre de debogage. On reserve sa hauteur plutot que de la masquer : en
   developpement, elle sert.

   La variable vaut zero partout ailleurs : en production, la barre n'existe pas
   et rien ne bouge. */
:root { --barre-debug: 0px; }
body:has(.sf-toolbar) { --barre-debug: 42px; }
body:has(.sf-toolbar) .review-actions { bottom: var(--barre-debug); }
body:has(.sf-toolbar) .toast { bottom: calc(24px + var(--barre-debug)); }
body:has(.sf-toolbar) .main-content { padding-bottom: calc(30px + var(--barre-debug)); }

/* --- Parcours : action suivante et capture moins envahissante ------------ */
.journey-next-action {
    margin: -2px 0 16px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
}

.journey-next-action-index {
    min-width: 62px;
    padding: 7px 9px;
    border-radius: 9px;
    color: var(--blue);
    background: var(--blue-soft);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.journey-next-action div { min-width: 0; display: grid; gap: 3px; }
.journey-next-action small { color: var(--muted); font-size: 11px; font-weight: 700; }
.journey-next-action strong { font-size: 17px; }
.journey-next-action p { margin: 0; color: var(--muted); font-size: 12px; }

.capture-disclosure { margin-bottom: 14px; }
.capture-disclosure > div { padding: 0; }
.capture-disclosure .journey-capture { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.journey-capture > form { min-width: 230px; }
.journey-capture.is-compact .journey-capture-tags,
.journey-capture.is-compact > div > small:first-of-type { display: none; }

/* --- Étape 6 : trois obligations, trois gestes --------------------------- */
.obligation-grid {
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.obligation-card {
    min-width: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    background: var(--surface-soft);
    text-decoration: none;
}

.obligation-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.obligation-card.ok { border-color: rgba(15,159,143,.35); background: var(--teal-soft); }
.obligation-card.blocked { border-color: rgba(217,139,18,.35); background: var(--amber-soft); }

.obligation-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.obligation-card.ok .obligation-number { background: var(--teal); }
.obligation-card.blocked .obligation-number { background: var(--amber); }
.obligation-copy { min-width: 0; display: grid; gap: 4px; }
.obligation-copy strong { line-height: 1.25; }
.obligation-copy small { color: inherit; opacity: .82; font-size: 11px; }
.obligation-action {
    grid-column: 2;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
}

/* --- Listes de dossiers sur mobile --------------------------------------- */
a.mini-kpi,
a.mini-kpi:visited { color: var(--ink); }

.mobile-quick-actions,
.dossier-mobile-list { display: none; }

.dossier-mobile-card {
    padding: 13px 14px;
    display: grid;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    background: var(--surface);
    text-decoration: none;
}

.dossier-mobile-card:hover { border-color: var(--blue); }
.dossier-mobile-card > strong { overflow-wrap: anywhere; font-size: 15px; }
.dossier-mobile-parties { color: var(--muted); font-size: 12px; }
.dossier-mobile-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: 9px;
    overflow: hidden;
    background: var(--border);
}

.dossier-mobile-meta > span { padding: 9px; display: grid; gap: 3px; background: var(--surface-soft); }
.dossier-mobile-meta small { color: var(--muted); font-size: 10px; }
.dossier-mobile-meta b { font-size: 12px; }
.dossier-mobile-card em {
    width: fit-content;
    padding: 4px 7px;
    border-radius: 99px;
    color: var(--red);
    background: var(--red-soft);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}
.dossier-mobile-card em.muted {
    color: var(--muted);
    background: var(--surface-soft);
}

@media (max-width: 860px) {
    .journey-next-action { grid-template-columns: auto minmax(0, 1fr); }
    .journey-next-action .button { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
    .obligation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .dossier-list-card:has(.dossier-mobile-list) {
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .dossier-list-card:has(.dossier-mobile-list) > .card-heading {
        margin-bottom: 10px;
        padding-inline: 2px;
    }
    .dossier-table-wrap { display: none; }
    .dossier-mobile-list { display: grid; gap: 10px; }
}

@media (max-width: 620px) {
    .mobile-quick-actions {
        margin: -4px 0 14px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 8px;
    }
    .mobile-quick-actions .button { display: grid; place-items: center; text-align: center; }

    .journey-next-action {
        padding: 14px;
        grid-template-columns: 1fr;
    }
    .journey-next-action-index { width: fit-content; min-width: 0; }

    .journey-capture > form {
        width: 100%;
        grid-column: 1 / -1;
        justify-items: stretch !important;
    }
    .journey-capture > form label { justify-items: stretch !important; }
    .journey-capture > form .text-button { justify-self: center; }

    .journey-controls {
        position: static;
        margin: 24px -16px -16px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--surface-soft);
        box-shadow: none;
    }
    .journey-controls > div { gap: 8px; }
    .journey-controls .text-button { text-align: center; }
}

/* --- Liens ----------------------------------------------------------------
   Un lien d'interface (bouton, onglet, ligne de tableau, navigation) n'est pas
   souligne : la mise en forme dit deja qu'il est cliquable. Le soulignement
   reste sur les liens noyes dans du texte courant, ou rien d'autre ne les
   distingue des mots voisins. */
a { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
p a:not(.button):not(.text-button),
li a:not(.button):not(.nav-item),
.form-hint a,
.flash a,
.journey-callout a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Cartes ---------------------------------------------------------------
   La maquette ne donne pas de marge interieure a « .card » : chaque gabarit
   devait la poser en style en ligne, et plusieurs l'ont oubliee (liasse,
   partenaires, expedition…), d'ou des titres colles au bord. « :where » a une
   specificite nulle : toute variante qui fixe sa propre marge (kpi-card,
   settings-nav, mini-kpi, journey-stage…) garde la sienne. */
:where(.card) { padding: 20px; }