/* =====================================================================
   Fiches de consultation : fiche client (/clients/{id}) et fiche intervention
   (/interventions/{id}). Une seule grammaire fx-* pour les deux : en-tete, cartes,
   chiffres, listes, puces de statut, pagination, cibles tactiles. Les jetons vivent
   sous .fx-page, jamais sur :root (trois pages redeclaraient les memes variables).
   Le rouge reste reserve a la marque et aux actions principales.
   ===================================================================== */

.fx-page {
    --fx-rouge: #C61E26;
    --fx-rouge-pale: #fdecec;
    --fx-encre: #111827;
    --fx-texte: #374151;
    --fx-muet: #6b7280;
    --fx-ligne: #e5e7eb;
    --fx-fond: #f6f7f9;
    --fx-carte: #ffffff;
    --fx-ok: #15803d;      --fx-ok-pale: #ecfdf3;
    --fx-live: #1d4ed8;    --fx-live-pale: #e8efff;
    --fx-warn: #b45309;    --fx-warn-pale: #fdf0d9;
    --fx-off: #6b7280;     --fx-off-pale: #eef0f3;
    --fx-rayon: 14px;
    color: var(--fx-texte);
    padding: 0 0 2rem;
}

/* ---------- Etats pleine page ---------- */
.fx-etat { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 3rem 1rem; text-align: center; color: var(--fx-muet); }
.fx-etat i { font-size: 2rem; color: var(--fx-rouge); }
.fx-etat h2 { font-size: 1.1rem; color: var(--fx-encre); margin: 0; }

/* ---------- En-tete ---------- */
.fx-header { background: var(--fx-carte); border: 1px solid var(--fx-ligne); border-left: 4px solid var(--fx-rouge); border-radius: var(--fx-rayon); padding: .9rem 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.fx-header__ligne { display: flex; align-items: flex-start; gap: .75rem; }
.fx-retour { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--fx-ligne); background: #fff; color: var(--fx-texte); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; }
.fx-retour:hover { border-color: #cbd2dd; background: var(--fx-fond); }
.fx-header__titres { flex: 1; min-width: 0; }
.fx-header__sur { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.fx-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px; background: var(--fx-rouge-pale); color: var(--fx-rouge); }
.fx-header h1 { font-size: 1.25rem; font-weight: 700; color: var(--fx-encre); margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
.fx-header__sous { margin: .2rem 0 0; font-size: .82rem; color: var(--fx-muet); display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.fx-header__sous a { color: var(--fx-rouge); text-decoration: none; font-weight: 600; }
.fx-header__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ---------- Boutons ---------- */
.fx-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem .95rem; border-radius: 10px; border: 1px solid var(--fx-rouge); background: var(--fx-rouge); color: #fff; font-size: .86rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fx-btn:hover { filter: brightness(.95); color: #fff; }
.fx-btn--ghost { background: #fff; color: var(--fx-rouge); }
.fx-btn--ghost:hover { background: var(--fx-rouge-pale); color: var(--fx-rouge); }
.fx-btn--neutre { background: #fff; color: var(--fx-texte); border-color: var(--fx-ligne); }
.fx-btn--neutre:hover { background: var(--fx-fond); color: var(--fx-texte); }
.fx-btn--sm { min-height: 36px; padding: .35rem .7rem; font-size: .8rem; border-radius: 8px; }
.fx-btn:disabled { opacity: .55; cursor: default; filter: none; }
.fx-btn--icone { padding: .35rem .6rem; }

/* ---------- Chiffres ---------- */
.fx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.fx-stat { background: var(--fx-carte); border: 1px solid var(--fx-ligne); border-radius: var(--fx-rayon); padding: .8rem .9rem; min-width: 0; }
.fx-stat__valeur { font-size: 1.35rem; font-weight: 800; color: var(--fx-encre); line-height: 1.1; overflow-wrap: anywhere; }
.fx-stat__libelle { font-size: .74rem; color: var(--fx-muet); margin-top: .2rem; }
.fx-stat__detail { font-size: .76rem; color: var(--fx-texte); margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }

/* ---------- Cartes ---------- */
.fx-card { background: var(--fx-carte); border: 1px solid var(--fx-ligne); border-radius: var(--fx-rayon); margin-bottom: 1rem; overflow: hidden; }
.fx-card__head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--fx-ligne); }
.fx-card__head i { color: var(--fx-rouge); font-size: 1rem; }
.fx-card__head h2 { font-size: .95rem; font-weight: 700; color: var(--fx-encre); margin: 0; flex: 1; }
.fx-card__head .fx-compteur { font-size: .74rem; font-weight: 700; color: var(--fx-muet); background: var(--fx-fond); border-radius: 999px; padding: .15rem .55rem; }
.fx-card__body { padding: .9rem 1rem; }
.fx-card__body--plat { padding: 0; }
.fx-card--repliable .fx-card__head { cursor: pointer; user-select: none; }
.fx-card--repliable .fx-card__head .fx-chevron { color: var(--fx-muet); transition: transform .2s; }
.fx-card--ouverte .fx-card__head .fx-chevron { transform: rotate(180deg); }
.fx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fx-grid2 > .fx-card { margin-bottom: 0; }
.fx-grid2 + .fx-card { margin-top: 1rem; }

/* ---------- Definitions ---------- */
.fx-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin: 0; }
.fx-dl > div { min-width: 0; }
.fx-dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); font-weight: 700; }
.fx-dl dd { margin: .1rem 0 0; font-size: .9rem; color: var(--fx-encre); overflow-wrap: anywhere; }
.fx-dl dd a { color: var(--fx-rouge); text-decoration: none; font-weight: 600; }
/* Texte brut d'un système tiers (connecteur X3) sous la phrase en français : pour l'informatique. */
.fx-detail-technique { display: block; margin-top: .25rem; font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: var(--fx-muet); overflow-wrap: anywhere; }
.fx-dl .fx-dl--large { grid-column: 1 / -1; }
.fx-texte { white-space: pre-line; font-size: .9rem; color: var(--fx-encre); margin: 0; }
.fx-sous-titre { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); font-weight: 700; margin: 1rem 0 .3rem; }
.fx-vide { color: var(--fx-muet); font-size: .88rem; margin: 0; }
.fx-avert { display: flex; gap: .5rem; align-items: flex-start; background: var(--fx-warn-pale); color: var(--fx-warn); border-radius: 10px; padding: .6rem .8rem; font-size: .84rem; margin: 0 0 .8rem; }
.fx-erreur { display: flex; gap: .5rem; align-items: flex-start; background: var(--fx-rouge-pale); color: var(--fx-rouge); border-radius: 10px; padding: .6rem .8rem; font-size: .84rem; margin: 0 0 .8rem; }

/* ---------- Puces de statut ---------- */
.fx-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.fx-chip--neutre { background: var(--fx-off-pale); color: var(--fx-texte); }
.fx-chip--live { background: var(--fx-live-pale); color: var(--fx-live); }
.fx-chip--warn { background: var(--fx-warn-pale); color: var(--fx-warn); }
.fx-chip--ok { background: var(--fx-ok-pale); color: var(--fx-ok); }
.fx-chip--off { background: var(--fx-off-pale); color: var(--fx-off); text-decoration: line-through; }
.fx-chip--urgent { background: var(--fx-rouge); color: #fff; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Filtres ---------- */
.fx-filtres { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--fx-ligne); background: var(--fx-fond); }
.fx-filtre { min-height: 36px; padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--fx-ligne); background: #fff; color: var(--fx-texte); font-size: .8rem; font-weight: 600; cursor: pointer; }
.fx-filtre--actif { background: var(--fx-rouge); border-color: var(--fx-rouge); color: #fff; }

/* ---------- Listes ---------- */
.fx-liste { list-style: none; margin: 0; padding: 0; }
.fx-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--fx-ligne); }
.fx-ligne:last-child { border-bottom: none; }
.fx-ligne:hover { background: #fbfbfc; }
.fx-ligne__corps { min-width: 0; }
.fx-ligne__titre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 700; color: var(--fx-encre); font-size: .92rem; }
.fx-ligne__titre .fx-num { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--fx-rouge); }
.fx-ligne__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8rem; color: var(--fx-muet); margin-top: .2rem; }
.fx-ligne__meta i { margin-right: .25rem; }
.fx-ligne__resume { font-size: .82rem; color: var(--fx-texte); margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-ligne__actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.fx-ligne a { color: var(--fx-rouge); text-decoration: none; font-weight: 600; }

/* ---------- Contacts (cartes) ---------- */
.fx-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.fx-contact { border: 1px solid var(--fx-ligne); border-radius: 12px; padding: .7rem .8rem; display: flex; gap: .7rem; align-items: flex-start; }
.fx-contact__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--fx-rouge-pale); color: var(--fx-rouge); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-contact__corps { min-width: 0; flex: 1; }
.fx-contact__nom { font-weight: 700; color: var(--fx-encre); font-size: .9rem; overflow-wrap: anywhere; }
.fx-contact__fonction { font-size: .78rem; color: var(--fx-muet); }
.fx-contact__liens { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .35rem; }
.fx-contact__liens a { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; font-size: .8rem; color: var(--fx-rouge); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Recherche + pagination ---------- */
.fx-recherche { display: flex; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--fx-ligne); }
.fx-recherche input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--fx-ligne); border-radius: 10px; padding: .5rem .8rem; font-size: 16px; }
.fx-pager { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--fx-ligne); font-size: .8rem; color: var(--fx-muet); }
.fx-pager__btns { display: flex; gap: .4rem; }

/* ---------- Photos ---------- */
.fx-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; margin-top: .5rem; }
.fx-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--fx-fond); border: 1px solid var(--fx-ligne); cursor: zoom-in; padding: 0; }
.fx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-thumb__libelle { position: absolute; left: 0; right: 0; bottom: 0; font-size: .62rem; padding: .15rem .35rem; background: rgba(17,24,39,.65); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.fx-thumb__ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--fx-muet); font-size: 1.4rem; }
.fx-lightbox { position: fixed; inset: 0; background: rgba(17,24,39,.9); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; cursor: zoom-out; }
.fx-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 8px; }
.fx-lightbox__legende { color: #fff; font-size: .85rem; margin-top: .6rem; }

/* ---------- Praxedo (repli) ---------- */
.fx-repli summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--fx-texte); padding: .7rem 1rem; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.fx-repli summary::-webkit-details-marker { display: none; }
.fx-repli[open] summary { border-bottom: 1px solid var(--fx-ligne); }
.fx-repli__corps { padding: .7rem 1rem; }
.fx-repli__corps a { display: block; min-height: 40px; padding: .4rem 0; color: var(--fx-rouge); text-decoration: none; font-size: .86rem; overflow-wrap: anywhere; }

/* ---------- Articles ---------- */
.fx-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fx-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); padding: .45rem 1rem; border-bottom: 1px solid var(--fx-ligne); }
.fx-table td { padding: .55rem 1rem; border-bottom: 1px solid var(--fx-ligne); color: var(--fx-encre); }
.fx-table tr:last-child td { border-bottom: none; }
.fx-table .fx-qte { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Chronologie ---------- */
.fx-chrono { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fx-chrono li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .86rem; }
.fx-chrono li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fx-ok); margin-top: .35rem; }
.fx-chrono li.fx-chrono--attente::before { background: var(--fx-ligne); }
.fx-chrono li.fx-chrono--ko::before { background: var(--fx-rouge); }
.fx-chrono__quand { color: var(--fx-muet); font-size: .78rem; }

/* ---------- Spinner ---------- */
.fx-spin { width: 18px; height: 18px; border: 2px solid var(--fx-ligne); border-top-color: var(--fx-rouge); border-radius: 50%; animation: fx-rot .8s linear infinite; display: inline-block; vertical-align: middle; }
.fx-spin--centre { display: block; margin: 1.2rem auto; width: 26px; height: 26px; }
@keyframes fx-rot { to { transform: rotate(360deg); } }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
    .fx-stats { grid-template-columns: 1fr 1fr; }
    .fx-stats .fx-stat:first-child { grid-column: 1 / -1; }
    .fx-grid2 { grid-template-columns: 1fr; }
    .fx-grid2 > .fx-card { margin-bottom: 0; }
    .fx-dl { grid-template-columns: 1fr; }
    .fx-ligne { grid-template-columns: 1fr; }
    .fx-ligne__actions { justify-content: flex-start; }
    .fx-header__actions .fx-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 420px) {
    .fx-stats { grid-template-columns: 1fr; }
    .fx-contacts { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
    .fx-btn--sm { min-height: 44px; }
    .fx-filtre { min-height: 44px; }
}

/* ---------- JSON du connecteur X3 ---------- */
.fx-json { margin: .8rem 0 0; padding: .8rem; background: #111827; color: #e5e7eb; border-radius: 10px; font-family: ui-monospace, Consolas, monospace; font-size: .74rem; line-height: 1.45; max-height: 60vh; overflow: auto; white-space: pre; }

/* ---------- Suivi des interventions (liste) et traitement dans la fiche ---------- */
.fx-succes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: var(--fx-ok-pale); color: var(--fx-ok); border-radius: 10px; padding: .6rem .8rem; font-size: .84rem; margin: 0 0 .8rem; }
.fx-lien { margin-left: auto; color: inherit; font-weight: 700; text-decoration: underline; display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; }
.fx-filtre--alerte { border-color: var(--fx-rouge); color: var(--fx-rouge); }
.fx-filtre--alerte.fx-filtre--actif { color: #fff; }
.li-filtre__nb { margin-left: .3rem; font-size: .72rem; opacity: .85; }
.li-lot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem 1rem; background: var(--fx-rouge-pale); border-bottom: 1px solid var(--fx-ligne); font-size: .86rem; color: var(--fx-encre); }
.li-lot__avert { font-weight: 600; }
.li-tableau-wrap { overflow-x: auto; }
.li-tableau { width: 100%; border-collapse: collapse; font-size: .86rem; }
.li-tableau th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); padding: .5rem .7rem; border-bottom: 1px solid var(--fx-ligne); white-space: nowrap; }
.li-tri { background: none; border: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; min-height: 32px; }
.li-ligne { cursor: pointer; }
.li-ligne:hover { background: #fbfbfc; }
.li-ligne--cochee { background: var(--fx-rouge-pale); }
.li-ligne--urgent td:first-child { box-shadow: inset 4px 0 0 var(--fx-rouge); }
.li-tableau td { padding: .55rem .7rem; border-bottom: 1px solid var(--fx-ligne); color: var(--fx-encre); vertical-align: middle; }
.li-tableau td .fx-chip { margin-left: .3rem; }
.li-col-coche { width: 36px; }
.li-col-coche input { width: 20px; height: 20px; accent-color: var(--fx-rouge); cursor: pointer; }
.li-col-client { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-affect { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fi-select { flex: 1 1 240px; min-height: 44px; border: 1px solid var(--fx-ligne); border-radius: 10px; padding: .5rem .8rem; font-size: 16px; background: #fff; }
.fi-label { display: block; font-size: .78rem; font-weight: 700; color: var(--fx-muet); text-transform: uppercase; letter-spacing: .04em; margin: .6rem 0 .3rem; }
.fi-motif { width: 100%; border: 1px solid var(--fx-ligne); border-radius: 10px; padding: .6rem .8rem; font-size: 16px; margin-bottom: .6rem; }
.fi-btn-valider { background: var(--fx-ok); border-color: var(--fx-ok); }
.fx-card--decision { border-left: 4px solid var(--fx-ok); }
.fx-card--action { border-left: 4px solid var(--fx-live); }
.fi-praxedo { margin-top: .6rem; border: 1px solid var(--fx-ligne); border-radius: 10px; overflow: hidden; }
.fi-praxedo__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .8rem; background: var(--fx-fond); font-size: .82rem; font-weight: 700; }
.fi-praxedo__table th { font-family: ui-monospace, Consolas, monospace; font-size: .74rem; text-transform: none; letter-spacing: 0; width: 38%; }
@media (max-width: 767.98px) {
    .li-tableau thead { display: none; }
    .li-tableau, .li-tableau tbody, .li-tableau tr, .li-tableau td { display: block; }
    .li-ligne { border: 1px solid var(--fx-ligne); border-radius: 12px; margin: .5rem .6rem; padding: .4rem .2rem; }
    .li-ligne--urgent td:first-child { box-shadow: none; }
    .li-ligne--urgent { border-color: var(--fx-rouge); }
    .li-tableau td { border: none; padding: .25rem .6rem; display: flex; gap: .5rem; align-items: center; }
    .li-tableau td[data-label]::before { content: attr(data-label); flex: 0 0 84px; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); }
    .li-col-coche { width: auto; }
    .li-col-client { max-width: none; white-space: normal; }
}

/* ---------- Suivi des interventions : barre de criteres ---------- */
.li-criteres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--fx-ligne); align-items: end; }
.li-critere { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.li-critere label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fx-muet); font-weight: 700; }
.li-critere input, .li-critere select { min-height: 44px; border: 1px solid var(--fx-ligne); border-radius: 10px; padding: .45rem .7rem; font-size: 16px; background: #fff; width: 100%; }
.li-critere--periode { grid-column: span 2; }
.li-critere--texte { grid-column: span 2; }
.li-critere--boutons { flex-direction: row; gap: .5rem; align-items: center; }
.li-periode { display: flex; align-items: center; gap: .4rem; }
.li-periode span { color: var(--fx-muet); }
.li-raccourcis { display: flex; flex-wrap: wrap; gap: .3rem; }
.li-raccourci { min-height: 30px; padding: .1rem .6rem; border-radius: 999px; border: 1px solid var(--fx-ligne); background: #fff; color: var(--fx-texte); font-size: .74rem; font-weight: 600; cursor: pointer; }
.li-raccourci:hover { background: var(--fx-fond); }
@media (max-width: 767.98px) {
    .li-criteres { grid-template-columns: 1fr; }
    .li-critere--periode, .li-critere--texte { grid-column: auto; }
}

/* =====================================================================
   Suivi des interventions, refonte du 2026-10-09 (préfixe sv-, tokens.css)
   Pleine largeur ; en-tête, onglets soulignés, filtres sur une ligne de 40 px,
   tableau dense à lignes de 44 px sans retour à la ligne, pied de pagination.
   ===================================================================== */
.sv { font-family: var(--df-police); font-size: var(--df-taille-14); color: var(--df-texte); background: var(--df-fond-app); min-height: calc(100dvh - 56px); display: flex; flex-direction: column; }

.sv-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex: none;
    border: 0; border-radius: var(--df-rayon); background: transparent; color: var(--df-texte-second); cursor: pointer;
}
.sv-icone:hover:not(:disabled) { background: var(--df-surface-survol); color: var(--df-texte); }
.sv-icone:disabled { opacity: .45; cursor: default; }
.sv-btn {
    display: inline-flex; align-items: center; gap: var(--df-esp-2); height: 32px; padding: 0 var(--df-esp-3);
    border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface);
    color: var(--df-texte); font: inherit; font-size: var(--df-taille-13); font-weight: var(--df-graisse-forte);
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.sv-btn:hover:not(:disabled) { background: var(--df-surface-survol); color: var(--df-texte); }
.sv-btn:disabled { color: var(--df-texte-inactif); cursor: default; }
.sv-btn--primaire { background: var(--df-primaire); border-color: var(--df-primaire); color: var(--df-primaire-texte); }
.sv-btn--primaire:hover:not(:disabled) { background: var(--df-primaire-survol); color: var(--df-primaire-texte); }
.sv-icone:focus-visible, .sv-btn:focus-visible, .sv-onglet:focus-visible, .sv-filtre:focus-visible { outline: none; box-shadow: var(--df-focus); }

/* ---------- en-tête ---------- */
.sv-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--df-esp-4); height: 56px; padding: 0 var(--df-esp-6); background: var(--df-surface); }
.sv-entete__titre { display: flex; align-items: baseline; gap: var(--df-esp-3); min-width: 0; }
.sv-entete__titre h1 { margin: 0; font-size: var(--df-taille-20); font-weight: var(--df-graisse-forte); line-height: 1; }
.sv-compte { font-size: var(--df-taille-13); color: var(--df-texte-second); white-space: nowrap; }
.sv-entete__actions { display: flex; align-items: center; gap: var(--df-esp-2); }

/* ---------- onglets ---------- */
.sv-onglets { display: flex; gap: var(--df-esp-1); padding: 0 var(--df-esp-6); background: var(--df-surface); border-bottom: 1px solid var(--df-bordure); overflow-x: auto; }
.sv-onglet {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--df-esp-3);
    border: 0; background: transparent; color: var(--df-texte-second); font: inherit; font-size: var(--df-taille-14);
    white-space: nowrap; cursor: pointer; box-shadow: inset 0 -2px 0 transparent;
}
.sv-onglet:hover { color: var(--df-texte); }
.sv-onglet--actif { color: var(--df-texte); font-weight: var(--df-graisse-forte); box-shadow: inset 0 -2px 0 var(--df-rouge); }
.sv-onglet__nb { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--df-surface-survol); color: var(--df-texte-second); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.sv-onglet__nb--alerte { background: var(--df-rouge); color: #FFFFFF; }

/* ---------- filtres ---------- */
.sv-filtres { position: relative; display: flex; align-items: center; gap: var(--df-esp-2); min-height: 40px; padding: var(--df-esp-2) var(--df-esp-6); flex-wrap: wrap; background: var(--df-surface); border-bottom: 1px solid var(--df-bordure); }
.sv-recherche { display: flex; align-items: center; gap: var(--df-esp-2); width: 300px; height: 32px; margin: 0; padding: 0 var(--df-esp-2); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface); }
.sv-recherche:focus-within { border-color: var(--df-primaire); box-shadow: 0 0 0 1px var(--df-primaire); }
.sv-recherche i { color: var(--df-texte-second); font-size: 14px; }
.sv-recherche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--df-taille-13); color: var(--df-texte); }
.sv-deroulant { position: relative; z-index: 6; }
.sv-filtre {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--df-esp-2) 0 var(--df-esp-3);
    border: 1px dashed var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface);
    color: var(--df-texte-second); font: inherit; font-size: var(--df-taille-13); white-space: nowrap; cursor: pointer;
}
.sv-filtre:hover { color: var(--df-texte); background: var(--df-surface-survol); }
.sv-filtre--actif { border-style: solid; color: var(--df-texte); font-weight: var(--df-graisse-forte); }
.sv-chevron { font-size: 10px; }
.sv-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 7; min-width: 220px; max-height: 320px; overflow-y: auto;
    display: flex; flex-direction: column; padding: var(--df-esp-1);
    background: var(--df-surface); border: 1px solid var(--df-bordure); border-radius: var(--df-rayon-panneau); box-shadow: var(--df-ombre-popover);
}
.sv-menu__item { display: flex; align-items: center; min-height: 32px; padding: 0 var(--df-esp-2); border: 0; border-radius: var(--df-rayon); background: transparent; color: var(--df-texte); font: inherit; font-size: var(--df-taille-14); text-align: left; white-space: nowrap; cursor: pointer; }
.sv-menu__item:hover { background: var(--df-surface-survol); }
.sv-menu__item--actif { font-weight: var(--df-graisse-forte); background: var(--df-surface-survol); }
.sv-menu__sep { height: 1px; margin: var(--df-esp-1) 0; background: var(--df-bordure); }
.sv-menu__perso { display: flex; flex-direction: column; gap: var(--df-esp-1); padding: var(--df-esp-1) var(--df-esp-2) var(--df-esp-2); font-size: var(--df-taille-12); color: var(--df-texte-second); }
.sv-menu__dates { display: flex; align-items: center; gap: var(--df-esp-1); }
.sv-menu__dates input { height: 32px; padding: 0 var(--df-esp-1); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); font: inherit; font-size: var(--df-taille-13); color: var(--df-texte); }
.sv-voile { position: fixed; inset: 0; z-index: 5; }
.sv-chips { display: flex; align-items: center; gap: var(--df-esp-2); flex-wrap: wrap; }
.sv-chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 var(--df-esp-2); border-radius: var(--df-rayon); background: var(--df-surface-survol); font-size: var(--df-taille-12); color: var(--df-texte); white-space: nowrap; }
.sv-chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--df-texte-second); cursor: pointer; }
.sv-chip button:hover { background: var(--df-bordure); color: var(--df-texte); }
.sv-lien { border: 0; background: transparent; padding: 0 var(--df-esp-1); color: var(--df-texte-second); font: inherit; font-size: var(--df-taille-12); text-decoration: underline; cursor: pointer; }
.sv-lien:hover { color: var(--df-texte); }

/* ---------- messages, lot ---------- */
.sv-message { display: flex; align-items: center; gap: var(--df-esp-2); padding: var(--df-esp-2) var(--df-esp-6); font-size: var(--df-taille-13); border-bottom: 1px solid var(--df-bordure); }
.sv-message span { flex: 1; min-width: 0; }
.sv-message--succes { background: var(--df-succes-pale); color: var(--df-succes); }
.sv-message--erreur { background: var(--df-rouge-pale); color: var(--df-rouge-fonce); }
.sv-lot { display: flex; align-items: center; gap: var(--df-esp-3); flex-wrap: wrap; padding: var(--df-esp-2) var(--df-esp-6); background: var(--df-surface-survol); border-bottom: 1px solid var(--df-bordure); font-size: var(--df-taille-13); }
.sv-lot__avert { color: var(--df-alerte); font-weight: var(--df-graisse-forte); }

/* ---------- tableau ---------- */
.sv-tableau-zone { flex: 1; overflow-x: auto; background: var(--df-surface); }
.sv-etat { display: flex; flex-direction: column; align-items: center; gap: var(--df-esp-2); padding: var(--df-esp-10) var(--df-esp-4); color: var(--df-texte-second); font-size: var(--df-taille-13); }
.sv-etat i { font-size: 20px; color: var(--df-texte-inactif); }
.sv-etat--erreur { color: var(--df-rouge-fonce); }
.sv-tableau { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--df-taille-13); }
.sv-tableau th {
    position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 var(--df-esp-3);
    background: var(--df-surface); border-bottom: 1px solid var(--df-bordure);
    font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); color: var(--df-texte-second); text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
/* En-têtes triables (2026-10-28) : le libellé est un bouton, l'icône dit le sens. */
.sv-tri {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; margin: 0 -6px; padding: 0 6px;
    border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.sv-tri:hover { background: var(--df-surface-survol); color: var(--df-texte); }
.sv-tri .bi { font-size: 11px; opacity: .45; }
.sv-tri--actif { color: var(--df-texte); }
.sv-tri--actif .bi { opacity: 1; color: var(--df-primaire); }
.sv-tableau td {
    height: 44px; padding: 0 var(--df-esp-3); border-bottom: 1px solid var(--df-bordure);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; vertical-align: middle;
}
.sv-ligne { cursor: pointer; }
.sv-ligne:hover td { background: #F9FAFB; }
.sv-ligne--cochee td { background: var(--df-surface-survol); }
.sv-ligne--urgent td:first-child { box-shadow: inset 3px 0 0 var(--df-rouge); }
.sv-col-coche { width: 40px; max-width: 40px; text-align: center; }
.sv-col-coche input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--df-primaire); }
.sv-col-num { max-width: none !important; overflow: visible !important; }
.sv-num { font-size: var(--df-taille-13); font-weight: var(--df-graisse-forte); color: var(--df-texte); }
.sv-drapeau { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: var(--df-graisse-forte); }
.sv-drapeau--urgent { background: var(--df-rouge-pale); color: var(--df-rouge-fonce); }
.sv-drapeau--corriger { background: var(--df-alerte-pale); color: #92400E; }
.sv-col-client { max-width: 320px !important; }
.sv-code { margin-right: 6px; font-size: var(--df-taille-12); color: var(--df-texte-second); }

/* ---------- pied ---------- */
.sv-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--df-esp-3); height: 48px; padding: 0 var(--df-esp-6); background: var(--df-surface); border-top: 1px solid var(--df-bordure); font-size: var(--df-taille-13); color: var(--df-texte-second); }
.sv-pied__droite { display: flex; align-items: center; gap: var(--df-esp-2); }
.sv-par-page { display: inline-flex; align-items: center; gap: var(--df-esp-2); margin: 0 var(--df-esp-3) 0 0; }
.sv-par-page select { height: 28px; padding: 0 var(--df-esp-1); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface); font: inherit; font-size: var(--df-taille-13); color: var(--df-texte); }
.sv-page { white-space: nowrap; }

@media (max-width: 900px) {
    .sv-entete, .sv-onglets, .sv-filtres, .sv-message, .sv-lot, .sv-pied { padding-left: var(--df-esp-3); padding-right: var(--df-esp-3); }
    .sv-recherche { width: 100%; }
    .sv-entete { height: auto; padding-top: var(--df-esp-2); padding-bottom: var(--df-esp-2); flex-wrap: wrap; }
}

/* =====================================================================
   Fiche intervention, refonte du 2026-10-09 (préfixe fi2-, tokens.css)
   Pleine largeur : en-tête collant sous le header, bandeaux d'alerte, deux
   colonnes (contenu, puis colonne latérale de 360 px collante). Labels en
   12 px gris sans majuscules, valeurs en 14 px, icônes de titres en gris.
   ===================================================================== */
.fi2 { font-family: var(--df-police); font-size: var(--df-taille-14); color: var(--df-texte); background: var(--df-fond-app); min-height: calc(100dvh - 56px); }
.fi2-etat { display: flex; flex-direction: column; align-items: center; gap: var(--df-esp-2); padding: var(--df-esp-10) var(--df-esp-4); color: var(--df-texte-second); }

/* ---------- boutons ---------- */
.fi2-btn {
    display: inline-flex; align-items: center; gap: var(--df-esp-2); height: 32px; padding: 0 var(--df-esp-3);
    border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface);
    color: var(--df-texte); font: inherit; font-size: var(--df-taille-13); font-weight: var(--df-graisse-forte);
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.fi2-btn:hover:not(:disabled) { background: var(--df-surface-survol); color: var(--df-texte); }
.fi2-btn:disabled { color: var(--df-texte-inactif); cursor: default; }
.fi2-btn--primaire { background: var(--df-primaire); border-color: var(--df-primaire); color: var(--df-primaire-texte); }
.fi2-btn--primaire:hover:not(:disabled) { background: var(--df-primaire-survol); color: var(--df-primaire-texte); }
.fi2-btn--primaire:disabled { background: #9CA3AF; border-color: #9CA3AF; color: #FFFFFF; }
.fi2-btn--danger { background: var(--df-rouge); border-color: var(--df-rouge); color: #FFFFFF; }
.fi2-btn--danger:hover:not(:disabled) { background: var(--df-rouge-fonce); color: #FFFFFF; }
.fi2-btn--icone { width: 32px; padding: 0; justify-content: center; }
.fi2-btn--petit { height: 28px; padding: 0 var(--df-esp-2); font-size: var(--df-taille-12); }
.fi2-btn:focus-visible, .fi2-retour:focus-visible, .fi2-menu__item:focus-visible { outline: none; box-shadow: var(--df-focus); }

/* ---------- en-tête collant ---------- */
.fi2-entete {
    position: sticky; top: 56px; z-index: 20;
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--df-esp-4);
    padding: var(--df-esp-3) var(--df-esp-6); background: var(--df-surface); border-bottom: 1px solid var(--df-bordure);
}
.fi2-entete__infos { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fi2-entete__ligne1 { display: flex; align-items: center; gap: var(--df-esp-2); flex-wrap: wrap; }
.fi2-retour { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: -6px; padding: 0; border: 0; border-radius: var(--df-rayon); background: transparent; color: var(--df-texte-second); cursor: pointer; }
.fi2-retour:hover { background: var(--df-surface-survol); color: var(--df-texte); }
.fi2-numero { font-size: var(--df-taille-13); color: var(--df-texte-second); font-weight: var(--df-graisse-forte); }
.fi2-urgent { padding: 1px 6px; border-radius: 4px; background: var(--df-rouge-pale); color: var(--df-rouge-fonce); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); }
.fi2-titre { margin: 2px 0 0; font-size: var(--df-taille-20); font-weight: var(--df-graisse-forte); line-height: 1.25; text-wrap: balance; }
.fi2-titre__code { margin-left: var(--df-esp-2); font-size: var(--df-taille-13); font-weight: var(--df-graisse-normale); color: var(--df-texte-second); }
.fi2-entete__meta { margin: 0; font-size: var(--df-taille-13); color: var(--df-texte-second); }
.fi2-entete__meta a { color: var(--df-texte-second); }
.fi2-entete__actions { display: flex; align-items: center; gap: var(--df-esp-2); flex: none; }
.fi2-menu { position: relative; }
.fi2-voile { position: fixed; inset: 0; z-index: 30; }
.fi2-menu__liste {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 31; min-width: 260px; padding: var(--df-esp-1);
    display: flex; flex-direction: column; background: var(--df-surface); border: 1px solid var(--df-bordure);
    border-radius: var(--df-rayon-panneau); box-shadow: var(--df-ombre-popover);
}
.fi2-menu__item { display: flex; align-items: center; gap: var(--df-esp-2); min-height: 32px; padding: 0 var(--df-esp-2); border: 0; border-radius: var(--df-rayon); background: transparent; color: var(--df-texte); font: inherit; font-size: var(--df-taille-14); text-align: left; cursor: pointer; }
.fi2-menu__item i { color: var(--df-texte-second); font-size: 16px; }
.fi2-menu__item:hover:not(:disabled) { background: var(--df-surface-survol); }
.fi2-menu__item:disabled { color: var(--df-texte-inactif); cursor: default; }
.fi2-menu__section { padding: var(--df-esp-2) var(--df-esp-2) var(--df-esp-1); margin-top: var(--df-esp-1); border-top: 1px solid var(--df-bordure); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); color: var(--df-texte-second); }
.fi2-menu__section:first-child { border-top: 0; margin-top: 0; }

/* ---------- bandeaux d'alerte, pleine largeur ---------- */
.fi2-bandeau { display: flex; align-items: flex-start; gap: var(--df-esp-3); padding: var(--df-esp-3) var(--df-esp-6); border-bottom: 1px solid var(--df-bordure); font-size: var(--df-taille-13); }
.fi2-bandeau > i { font-size: 16px; line-height: 1.2; }
.fi2-bandeau__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: var(--df-interligne); }
.fi2-bandeau__texte strong { font-size: var(--df-taille-14); }
.fi2-bandeau--erreur { background: var(--df-rouge-pale); color: var(--df-rouge-fonce); }
.fi2-bandeau--alerte { background: var(--df-alerte-pale); color: #78350F; }
.fi2-bandeau--succes { background: var(--df-succes-pale); color: var(--df-succes); }
.fi2-bandeau--interne { margin: 0 0 var(--df-esp-3); padding: var(--df-esp-2) var(--df-esp-3); border: 0; border-radius: var(--df-rayon); }

/* ---------- colonnes ---------- */
.fi2-colonnes { display: flex; align-items: flex-start; gap: var(--df-esp-4); padding: var(--df-esp-4) var(--df-esp-6) var(--df-esp-10); }
.fi2-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--df-esp-4); }
.fi2-laterale { width: 360px; flex: none; position: sticky; top: calc(56px + 96px); display: flex; flex-direction: column; gap: var(--df-esp-4); max-height: calc(100dvh - 56px - 112px); overflow-y: auto; }

/* ---------- cartes : bord fin, sans liseré coloré ni ombre ---------- */
.fi2-carte { padding: var(--df-esp-4); background: var(--df-surface); border: 1px solid var(--df-bordure); border-radius: var(--df-rayon-panneau); }
.fi2-carte__titre { display: flex; align-items: center; gap: var(--df-esp-2); margin: 0 0 var(--df-esp-3); font-size: var(--df-taille-16); font-weight: var(--df-graisse-forte); }
.fi2-carte__titre > i { color: var(--df-texte-second); font-size: 16px; }
.fi2-carte__fermer { margin-left: auto; }
.fi2-compteur { padding: 0 6px; border-radius: 999px; background: var(--df-surface-survol); color: var(--df-texte-second); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); font-variant-numeric: tabular-nums; }
.fi2-note { margin: 0; font-size: var(--df-taille-13); color: var(--df-texte-second); line-height: var(--df-interligne); }
.fi2-note--erreur { color: var(--df-rouge-fonce); }
.fi2-sous-titre { margin: var(--df-esp-4) 0 var(--df-esp-2); font-size: var(--df-taille-14); font-weight: var(--df-graisse-forte); }

/* Grille de champs : 2 colonnes, libellé 12 px gris, valeur 14 px */
.fi2-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--df-esp-3) var(--df-esp-6); margin: 0; }
.fi2-champ { min-width: 0; }
.fi2-champ--large { grid-column: 1 / -1; }
.fi2-champ dt { margin: 0 0 2px; font-size: var(--df-taille-12); font-weight: var(--df-graisse-normale); color: var(--df-texte-second); text-transform: none; letter-spacing: 0; }
.fi2-champ dd { margin: 0; font-size: var(--df-taille-14); color: var(--df-texte); overflow-wrap: anywhere; line-height: var(--df-interligne); }
.fi2-vide { color: var(--df-texte-second) !important; font-style: italic; } /* #6B7280 : contraste minimum du texte secondaire */
.fi2-texte { white-space: pre-line; }
.fi2-lien { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--df-esp-2); color: var(--df-texte); font-size: var(--df-taille-13); font-weight: var(--df-graisse-forte); text-decoration: none; white-space: nowrap; }
.fi2-lien:hover { text-decoration: underline; }
.fi2-lien i { color: var(--df-texte-second); }
.fi2-duree-nulle { color: var(--df-alerte) !important; font-weight: var(--df-graisse-forte); cursor: help; }
.fi2-signe { margin-left: var(--df-esp-1); padding: 1px 6px; border-radius: 4px; background: var(--df-surface-survol); color: var(--df-texte-second); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); }
.fi2-signe--ok { background: var(--df-succes-pale); color: #166534; }
.fi2-code { font-size: var(--df-taille-12); overflow-wrap: anywhere; }

/* Affectation, décision */
.fi2-affect { display: flex; align-items: center; gap: var(--df-esp-2); flex-wrap: wrap; margin-bottom: var(--df-esp-2); }
.fi2-select { min-width: 260px; height: 32px; padding: 0 var(--df-esp-2); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-surface); font: inherit; font-size: var(--df-taille-14); color: var(--df-texte); }
.fi2-actions { display: flex; align-items: center; gap: var(--df-esp-2); flex-wrap: wrap; margin-top: var(--df-esp-3); }
.fi2-actions--fin { justify-content: flex-end; }
.fi2-label { display: block; margin: var(--df-esp-2) 0 var(--df-esp-1); font-size: var(--df-taille-12); color: var(--df-texte-second); }
.fi2-motif { width: 100%; padding: var(--df-esp-2); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon); font: inherit; font-size: var(--df-taille-14); color: var(--df-texte); resize: vertical; }
.fi2-motif:focus { outline: none; border-color: var(--df-primaire); box-shadow: 0 0 0 1px var(--df-primaire); }

/* Modification de la demande par l'encadrement (2026-10-28) : deux colonnes, une seule sur téléphone. */
.fi2-edition { display: flex; flex-direction: column; gap: var(--df-esp-3); }
.fi2-edition__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--df-esp-4); }
.fi2-edition__champ--large { grid-column: 1 / -1; }
.fi2-edition__champ .fi2-motif { min-height: 40px; }
.fi2-edition__client { display: flex; align-items: center; gap: var(--df-esp-2); margin-bottom: var(--df-esp-1); font-size: var(--df-taille-14); }
.fi2-edition__urgent { display: flex; align-items: flex-end; padding-bottom: var(--df-esp-2); }
.fi2-edition__urgent label { display: inline-flex; align-items: center; gap: var(--df-esp-2); font-size: var(--df-taille-14); cursor: pointer; }
.fi2-edition__urgent input { width: 18px; height: 18px; accent-color: var(--df-primaire); }
.fi2-note--alerte { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--df-rayon); padding: var(--df-esp-2); }
@media (max-width: 640px) {
    .fi2-edition__grille { grid-template-columns: minmax(0, 1fr); }
    .fi2-edition__champ .fi2-motif { font-size: 16px; }
}

/* Articles : tableau sans carte imbriquée, quantité à droite */
.fi2-table { width: 100%; border-collapse: collapse; font-size: var(--df-taille-13); }
.fi2-table th { padding: 0 var(--df-esp-2) var(--df-esp-2); border-bottom: 1px solid var(--df-bordure); font-size: var(--df-taille-12); font-weight: var(--df-graisse-normale); color: var(--df-texte-second); text-align: left; text-transform: none; }
.fi2-table td { padding: var(--df-esp-2); border-bottom: 1px solid var(--df-bordure); }
.fi2-table tr:last-child td { border-bottom: 0; }
.fi2-qte { text-align: right !important; width: 80px; }
.fi2-table--codes th { width: 40%; padding: var(--df-esp-1) var(--df-esp-2); font-weight: var(--df-graisse-forte); color: var(--df-texte); border-bottom: 1px solid var(--df-bordure); }
.fi2-table--codes td { padding: var(--df-esp-1) var(--df-esp-2); }
.fi2-praxedo__etat { display: flex; align-items: center; gap: var(--df-esp-2); flex-wrap: wrap; margin-bottom: var(--df-esp-2); font-size: var(--df-taille-13); color: var(--df-texte-second); }

/* Pièces jointes : une seule carte, le composant porte le titre ; zone de dépôt en pointillés */
.fi2-carte--pj .pj { padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.fi2-carte--pj .pj-head { padding: 0; margin: 0 0 var(--df-esp-3); border: 0; }
.fi2-carte--pj .pj-title { font-size: var(--df-taille-16); font-weight: var(--df-graisse-forte); color: var(--df-texte); }
.fi2-carte--pj .pj-title i { color: var(--df-texte-second); }
.fi2-carte--pj .pj-add {
    height: 28px; padding: 0 var(--df-esp-2); border: 1px solid var(--df-bordure-forte); border-radius: var(--df-rayon);
    background: var(--df-surface); color: var(--df-texte); font-size: var(--df-taille-12); font-weight: var(--df-graisse-forte); box-shadow: none;
}
.fi2-carte--pj .pj-add:hover { background: var(--df-surface-survol); }
.fi2-carte--pj .pj-vide { padding: var(--df-esp-3); border: 1px dashed var(--df-bordure-forte); border-radius: var(--df-rayon); background: var(--df-fond-app); font-size: var(--df-taille-13); color: var(--df-texte-second); font-style: normal; text-align: center; }

/* ---------- chronologie compacte (colonne latérale) ---------- */
.fi2-chrono { list-style: none; margin: 0; padding: 0; position: relative; }
.fi2-chrono::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--df-bordure); }
.fi2-chrono__item { position: relative; display: flex; gap: var(--df-esp-3); padding: 0 0 var(--df-esp-3); }
.fi2-chrono__item:last-child { padding-bottom: 0; }
.fi2-chrono__point { position: relative; z-index: 1; width: 8px; height: 8px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--df-texte-second); box-shadow: 0 0 0 2px var(--df-surface); }
.fi2-chrono__corps { min-width: 0; flex: 1; }
.fi2-chrono__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: var(--df-esp-2); font-size: var(--df-taille-13); }
.fi2-chrono__ligne strong { font-weight: var(--df-graisse-forte); }
.fi2-chrono__quand { font-size: var(--df-taille-12); color: var(--df-texte-second); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fi2-chrono__detail { margin-top: 2px; font-size: var(--df-taille-12); color: var(--df-texte-second); line-height: var(--df-interligne); overflow-wrap: anywhere; }
.fi2-chrono--creation .fi2-chrono__point { background: #374151; }
.fi2-chrono--affectation .fi2-chrono__point { background: var(--df-st-planifiee); }
.fi2-chrono--route .fi2-chrono__point, .fi2-chrono--site .fi2-chrono__point { background: var(--df-st-demarree); }
.fi2-chrono--rapport .fi2-chrono__point { background: var(--df-st-realisee); }
.fi2-chrono--renvoi .fi2-chrono__point, .fi2-chrono--correction .fi2-chrono__point { background: var(--df-st-synchronisee); }
.fi2-chrono--annulation .fi2-chrono__point { background: var(--df-st-annulee); }
.fi2-chrono--validation .fi2-chrono__point { background: var(--df-st-validee); }
.fi2-chrono--x3-ok .fi2-chrono__point { background: var(--df-succes); }
.fi2-chrono--x3-encours .fi2-chrono__point { background: var(--df-info); }
.fi2-chrono--x3-echec .fi2-chrono__point { background: var(--df-st-echec); }
.fi2-chrono--x3-echec .fi2-chrono__detail { color: var(--df-rouge-fonce); }
.fi2-chrono--attente .fi2-chrono__point { background: var(--df-surface); box-shadow: 0 0 0 2px var(--df-surface), inset 0 0 0 1.5px var(--df-bordure-forte); }
.fi2-chrono--attente .fi2-chrono__ligne strong { color: var(--df-texte-second); font-weight: var(--df-graisse-normale); }

/* ---------- contacts ---------- */
.fi2-contact { display: flex; flex-direction: column; gap: 2px; }
.fi2-contact__role { font-size: var(--df-taille-12); color: var(--df-texte-second); }
.fi2-contact__nom { font-size: var(--df-taille-14); font-weight: var(--df-graisse-forte); }
.fi2-contact .fi2-lien { margin-left: 0; }

/* ---------- modale de correction ---------- */
.fi2-modale-voile { position: fixed; inset: 0; z-index: 1100; background: rgba(17, 24, 39, .4); }
.fi2-modale {
    position: fixed; z-index: 1101; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: var(--df-esp-6); background: var(--df-surface); border-radius: var(--df-rayon-panneau); box-shadow: var(--df-ombre-popover);
}
.fi2-modale h2 { margin: 0 0 var(--df-esp-3); font-size: var(--df-taille-16); font-weight: var(--df-graisse-forte); }
.fi2-modale p { margin: 0 0 var(--df-esp-3); font-size: var(--df-taille-14); line-height: var(--df-interligne); }

/* ---------- écrans moins larges ---------- */
@media (max-width: 1100px) {
    .fi2-colonnes { flex-direction: column; }
    .fi2-laterale { width: auto; position: static; max-height: none; overflow: visible; }
}
@media (max-width: 700px) {
    .fi2-entete { position: static; flex-direction: column; padding: var(--df-esp-3) var(--df-esp-4); }
    .fi2-bandeau, .fi2-colonnes { padding-left: var(--df-esp-4); padding-right: var(--df-esp-4); }
    .fi2-grille { grid-template-columns: 1fr; }
    .fi2-select { min-width: 0; width: 100%; }
}

/* Vente comptoir sans rapport (2026-10-14) : pastille à côté du statut dans la liste, la fiche et la validation. */
.df-comptoir {
    display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .15rem .55rem; border-radius: 999px;
    background: #fdf0d9; color: #8a5a10; font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.df-comptoir .bi { font-size: .8rem; }

/* Versions envoyées à X3 (2026-10-22) : GF…, D1, D2…, la plus récente en haut. */
.fi2-versions__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--df-esp-2); }
.fi2-versions__item { border: 1px solid var(--df-bordure); border-left: 4px solid var(--df-bordure); border-radius: 8px; background: var(--df-surface); }
.fi2-versions__item--envoyee   { border-left-color: #16a34a; }
.fi2-versions__item--acceptee  { border-left-color: #2563eb; }
.fi2-versions__item--en_attente { border-left-color: #f59e0b; }
.fi2-versions__item--echec     { border-left-color: #C61E26; }
.fi2-versions__item--remplacee { opacity: .7; }
.fi2-versions__item summary { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--df-esp-2); padding: 8px 10px; cursor: pointer; list-style: none; }
.fi2-versions__item summary::-webkit-details-marker { display: none; }
.fi2-versions__numero { font-family: ui-monospace, Consolas, monospace; font-weight: 700; font-size: var(--df-taille-13); }
.fi2-versions__etat   { justify-self: end; font-size: 12px; font-weight: 600; color: var(--df-texte-second); }
.fi2-versions__date   { grid-column: 1 / -1; font-size: 12px; color: var(--df-texte-second); }
.fi2-versions__corps  { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.fi2-versions__erreur { color: #b91c1c; }
.fi2-versions__articles { margin: 0; padding-left: 18px; font-size: var(--df-taille-13); }
.fi2-versions__articles span { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--df-texte-second); }

/* Heures relevées automatiquement ou modifiées par le technicien (2026-10-26). */
.fi2-heures-origine { font-size: .82rem; color: var(--df-texte-2, #6b7280); margin-top: 2px; }
.fi2-heures-origine--modifiee { color: #b45309; font-weight: 600; }
.val-heures-modifiees { color: #b45309; font-weight: 600; }
.rap-heure__modifiee { background: #fef3c7 !important; color: #92400e !important; }

/* ---------- Échecs X3 (/admin/x3-echecs, 2026-10-29) : styles sv- plus l'erreur sur deux lignes ---------- */
.x3e-aide { margin: 0; padding: var(--df-esp-3) var(--df-esp-6); background: var(--df-surface); border-top: 1px solid var(--df-bordure); font-size: var(--df-taille-13); color: var(--df-texte-second); }
.sv-tableau td.x3e-col-erreur { max-width: 400px; min-width: 240px; white-space: normal; padding-top: 6px; padding-bottom: 6px; }
.x3e-erreur { display: block; color: var(--df-texte); line-height: 1.35; }
.x3e-technique { display: block; margin-top: 2px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--df-texte-second); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-tableau td.x3e-col-actions { max-width: none; overflow: visible; white-space: nowrap; }
.x3e-col-actions .sv-btn + .sv-btn { margin-left: var(--df-esp-2); }
/* Champ désigné par le refus X3 dans le formulaire de correction (fiche, ADMIN_IT, 2026-10-29) */
.fi2-edition__champ--x3 { padding: 6px 8px; margin: -6px -8px; border-radius: var(--df-rayon); background: var(--df-rouge-pale); box-shadow: inset 0 0 0 2px var(--df-rouge); }
.fi2-edition__champ--x3 .fi2-label::after { content: " · refusé par X3"; color: var(--df-rouge-fonce); font-weight: var(--df-graisse-forte); }