/* ============================================================
   LAAS FMS / TMS — thème produit (chrome header + sidebar)
   Charte directeur : teal #0f766e (actions) / #0d9488 (anneaux, soft).
   Patterns ClickUp (densité, rail blanc, drawers) — PAS la couleur ClickUp.
   ============================================================ */

:root {
    /* Accent produit — blanc sur #0f766e = 5,47:1 (AA).
       --ftms-accent (#0d9488) = anneaux / soft / rails uniquement.
       Actions remplies et CTA = #0f766e (via hover + cta-grad).        */
    --ftms-accent: #0d9488;
    --ftms-accent-hover: #0f766e;
    --ftms-accent-soft: rgba(15, 118, 110, 0.10);
    --ftms-accent-text: #0f766e;
    --ftms-cta-grad: linear-gradient(135deg, #0f766e 0%, #115e59 100%);

    /* Chrome clair : blanc, bordures très douces (façon ClickUp 3.0) */
    --ftms-chrome: #ffffff;
    --ftms-chrome-2: #f3f4f6;
    --ftms-chrome-text: #1e293b;
    --ftms-chrome-muted: #6b7280;
    --ftms-chrome-border: #e8eaed;

    /* Rail : BLANC, plus la plaque sombre — c'est le geste ClickUp */
    --ftms-side: #ffffff;
    --ftms-side-2: #f3f4f6;
    --ftms-side-text: #374151;
    --ftms-side-muted: #9ca3af;
    --ftms-side-brand: #1f2937;

    /* Fond de page : gris à peine teinté, les cartes blanches ressortent */
    --ftms-page: #fafbfc;

    /* ── Échelles structurelles ───────────────────────────────
       Ajoutées 2026-07-29. Voir claudeFolder/FMS/03_DESIGN_SYSTEM.md.
       Toute nouvelle mise en forme FTMS s'exprime avec ces variables
       plutôt qu'avec de nouvelles classes Tailwind : ce fichier est un
       asset STATIQUE (aucun build), alors qu'une nouvelle utilitaire
       Tailwind dans un Blade impose `npm run build` côté Admin.       */

    /* Rayons — doux, jamais en gélule (sauf chips/pastilles) */
    --ftms-r-xs: 4px;
    --ftms-r-sm: 6px;
    --ftms-r-md: 8px;
    --ftms-r-lg: 12px;
    --ftms-r-xl: 16px;
    --ftms-r-full: 9999px;

    /* Élévation — la profondeur est réservée aux surfaces flottantes,
       pas distribuée sur chaque carte (outil dense = à plat).          */
    --ftms-e-0: none;
    --ftms-e-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ftms-e-2: 0 2px 8px rgba(15, 23, 42, 0.08);
    --ftms-e-3: 0 8px 24px rgba(15, 23, 42, 0.12);  /* popover, menu */
    --ftms-e-4: 0 16px 48px rgba(15, 23, 42, 0.18); /* tiroir, modale */

    /* Espacement — base 4px */
    --ftms-s-1: 4px;
    --ftms-s-2: 8px;
    --ftms-s-3: 12px;
    --ftms-s-4: 16px;
    --ftms-s-5: 24px;
    --ftms-s-6: 32px;

    /* Typographie — Inter est déjà chargée par le layout */
    --ftms-t-caption: 11px;
    --ftms-t-cell: 13px;
    --ftms-t-body: 14px;
    --ftms-t-title: 18px;
    --ftms-t-page: 22px;
    --ftms-t-kpi: 30px;

    /* Densité — commutable par l'utilisateur (« Densité tableaux ») :
       body.is-compact abaisse la hauteur de ligne des grilles.         */
    --ftms-row-h: 48px;
    --ftms-cell-px: 14px;

    /* Géométrie du chrome — dual-rail ClickUp 4.0 */
    --ftms-gnav-w: 56px;
    --ftms-context-w: 248px;
    --ftms-shell-w: calc(var(--ftms-gnav-w) + var(--ftms-context-w));
    --ftms-rail-w: var(--ftms-shell-w);          /* alias rétrocompat */
    --ftms-rail-w-collapsed: var(--ftms-gnav-w); /* repli = gnav seul */
    --ftms-header-h: 56px;
    --ftms-footer-h: 28px;
    --ftms-drawer-w: 600px; /* 2 colonnes de formulaire CRUD à l'aise */

    /* Global Nav (graphite) + Context (blanc) */
    --ftms-gnav: #1e1f21;
    --ftms-gnav-2: #2a2b2e;
    --ftms-gnav-text: #c9cbd1;
    --ftms-gnav-muted: #7d828a;
    --ftms-context: #ffffff;
    --ftms-context-2: #f3f4f6;
    --ftms-context-text: #1f2937;   /* libellés du rail : contraste renforcé */
    --ftms-context-muted: #6b7280;

    /* Mouvement — un outil d'exploitation est rapide AVANT d'être joli
       (NFR-002 : écrans courants < 3 s).                               */
    --ftms-dur-1: 120ms; /* survol, focus */
    --ftms-dur-2: 180ms; /* menu, toast */
    --ftms-dur-3: 240ms; /* tiroir, modale */
    --ftms-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Densité compacte : une seule variable pilote toutes les grilles. */
body.is-compact {
    --ftms-row-h: 40px;
    --ftms-cell-px: 10px;
}

/* Respect de la préférence système : on coupe les transitions plutôt
   que de les raccourcir — aucune animation n'est porteuse de sens ici. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ftms-dur-1: 0ms;
        --ftms-dur-2: 0ms;
        --ftms-dur-3: 0ms;
    }
}

html.dark {
    --ftms-accent: #2dd4bf;
    --ftms-accent-hover: #14b8a6;
    --ftms-accent-soft: rgba(45, 212, 191, 0.16);
    --ftms-accent-text: #5eead4;
    --ftms-cta-grad: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);

    --ftms-chrome: #1e1f21;
    --ftms-chrome-2: #2a2b2e;
    --ftms-chrome-text: #e6e7e9;
    --ftms-chrome-muted: #9aa0a6;
    --ftms-chrome-border: #3a3b3e;

    --ftms-side: #1e1f21;
    --ftms-side-2: #2a2b2e;
    --ftms-side-text: #c9cbd1;
    --ftms-side-muted: #7d828a;
    --ftms-side-brand: #ffffff;

    --ftms-page: #161718;

    /* Élévation en sombre : une ombre noire se voit mal sur fond sombre.
       On la renforce ET on ajoute un liseré clair, qui fait le vrai
       travail de séparation. Choisi, pas inversé.                      */
    --ftms-e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ftms-e-2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --ftms-e-3: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(148, 163, 184, 0.12);
    --ftms-e-4: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(148, 163, 184, 0.14);
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── Header product chrome ───────────────────────────────── */
header.sticky.top-0 {
    background: var(--ftms-chrome) !important;
    border-bottom-color: var(--ftms-chrome-border) !important;
    color: var(--ftms-chrome-text);
}

header.sticky.top-0 .quick-access-bar {
    border-left-color: var(--ftms-chrome-border) !important;
}

/* Survol neutre des boutons d'entête. `:not(.ftms-cta)` est indispensable :
   sans lui, ce `!important` écrasait le dégradé du CTA « + Nouveau » par
   --ftms-chrome-2 (#f3f4f6), donnant du texte blanc sur fond blanc. */
header.sticky.top-0 button:not(.ftms-cta):hover,
header.sticky.top-0 .quick-access-btn:hover {
    background: var(--ftms-chrome-2) !important;
}

header.sticky.top-0 svg {
    color: var(--ftms-chrome-muted);
}

header.sticky.top-0 #ftms-search-input {
    background: var(--ftms-chrome-2) !important;
    border-color: var(--ftms-chrome-border) !important;
    color: var(--ftms-chrome-text) !important;
}

header.sticky.top-0 #ftms-search-input:focus {
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft);
    background: var(--ftms-chrome) !important;
}

/* Cloche : dropdown COMPACT (audit notifications 2026-08-13). Le panneau est
   position:fixed ancré par top/right SANS width : en shrink-to-fit il prenait
   la largeur max-content du plus long message (récap d'échéances de 300-600
   caractères) et s'étalait jusqu'à 100vw-80px. Le seul garde-fou vivait dans
   un @media ≤768px (mobile bord-à-bord, qui garde ses !important). */
header.sticky.top-0 #notification-dropdown-menu,
#notification-dropdown-menu {
    width: 23rem;
    max-width: calc(100vw - 96px);
    max-height: calc(100vh - var(--ftms-header-h, 56px) - 24px);
    overflow-y: auto;
}

/* La colonne texte d'un item est un enfant flex : sans min-width:0 elle
   réclame sa largeur max-content et gonfle le panneau. Corps clampé à
   3 lignes — le récap d'échéances reste lisible, jamais un pavé. */
#notification-dropdown-menu .ftms-notif-texte {
    min-width: 0;
    overflow-wrap: anywhere;
}

#notification-dropdown-menu .ftms-notif-texte p:nth-child(2) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Écran « Toutes les notifications » : même clamp (2 lignes en liste). */
.ftms-notif-liste-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Domain nav (FMS / TMS) */
.ftms-domain-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: min(52vw, 720px);
    scrollbar-width: none;
}

.ftms-domain-nav::-webkit-scrollbar {
    display: none;
}

.ftms-domain-group {
    position: relative;
    flex-shrink: 0;
}

.ftms-domain-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ftms-chrome-text);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ftms-domain-trigger:hover,
.ftms-domain-group:hover > .ftms-domain-trigger,
.ftms-domain-group.is-open > .ftms-domain-trigger {
    background: var(--ftms-chrome-2);
    border-color: var(--ftms-chrome-border);
}

.ftms-domain-trigger.is-active {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--ftms-accent);
}

.ftms-domain-trigger .ftms-domain-icon {
    width: 1rem;
    height: 1rem;
    color: var(--ftms-accent);
}

/* Sidebar domain filter: hide non-active product sections */
.youtube-sidebar .ftms-side-block.is-domain-hidden {
    display: none !important;
}

/* Active-parent sub-menu pills (right of header, before bell) */
.ftms-active-pills {
    display: none;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    max-width: min(34vw, 460px);
    scrollbar-width: none;
    margin-right: 0.25rem;
}

.ftms-active-pills.is-visible {
    display: flex;
}

.ftms-active-pills::-webkit-scrollbar {
    display: none;
}

.ftms-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ftms-chrome-muted);
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ftms-pill:hover {
    background: var(--ftms-chrome-2);
    color: var(--ftms-chrome-text);
}

.ftms-pill.is-active {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
}

.ftms-domain-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.4rem;
    border-radius: 0.75rem;
    background: var(--ftms-chrome);
    border: 1px solid var(--ftms-chrome-border);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
    z-index: 10040;
}

.ftms-domain-group:hover > .ftms-domain-menu,
.ftms-domain-group.is-open > .ftms-domain-menu {
    display: block;
    animation: ftms-fade-in .14s ease;
}

@keyframes ftms-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.ftms-domain-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--ftms-chrome-text);
    text-decoration: none;
    transition: background .12s ease;
}

.ftms-domain-menu a:hover {
    background: var(--ftms-chrome-2);
}

.ftms-domain-menu a.is-active {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
}

.ftms-ops-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--ftms-accent-text);
    transition: background .12s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.ftms-ops-chip:hover,
.ftms-ops-chip.is-active {
    background: var(--ftms-accent-soft);
}

.ftms-ops-chip span {
    font-size: 9px;
    font-weight: 600;
    margin-top: 2px;
    color: inherit;
}

.ftms-ops-chip svg {
    width: 1rem;
    height: 1rem;
    color: var(--ftms-accent) !important;
}

.ftms-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: var(--ftms-chrome-muted);
    transition: background .15s ease, color .15s ease;
}

.ftms-theme-toggle:hover {
    background: var(--ftms-chrome-2);
    color: var(--ftms-accent-text);
}

.ftms-theme-toggle .icon-sun,
html:not(.dark) .icon-sun { display: none; }
.ftms-theme-toggle .icon-moon,
html:not(.dark) .icon-moon { display: block; }
html.dark .ftms-theme-toggle .icon-sun,
html.dark .icon-sun { display: block; }
html.dark .ftms-theme-toggle .icon-moon,
html.dark .icon-moon { display: none; }

/* ── Sidebar (same tokens as header) ─────────────────────── */
.youtube-sidebar {
    background: var(--ftms-side) !important;
    border-color: var(--ftms-side-2) !important;
}

.youtube-sidebar > div:first-child {
    background: var(--ftms-side) !important;
    border-color: var(--ftms-side-2) !important;
}

.youtube-sidebar > div:first-child a img {
    display: none !important;
}

.youtube-sidebar > div:first-child a::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--ftms-accent);
    margin-right: 10px;
    box-shadow: 0 0 0 4px var(--ftms-accent-soft);
}

.youtube-sidebar > div:first-child a::after {
    content: 'Nexus';
    font-weight: 800;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--ftms-side-brand);
}

.youtube-sidebar > div:first-child button:hover {
    background: var(--ftms-side-2) !important;
}


.youtube-sidebar nav::-webkit-scrollbar {
    width: 6px;
}

.youtube-sidebar nav::-webkit-scrollbar-thumb {
    background: var(--ftms-side-2);
    border-radius: 9999px;
}

/* ── Accent on primary blues → teal produit ──────────────── */
.ftms-app .bg-blue-600,
.ftms-app button.bg-blue-600,
.ftms-app a.bg-blue-600 {
    background-color: #0f766e !important; /* AA blanc */
}
.ftms-app .hover\:bg-blue-700:hover,
.ftms-app button.hover\:bg-blue-700:hover,
.ftms-app a.hover\:bg-blue-700:hover,
.ftms-app .bg-blue-700 {
    background-color: #115e59 !important;
}

.ftms-app .text-blue-600 {
    color: var(--ftms-accent-text) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-2:focus {
    --tw-ring-color: var(--ftms-accent-soft) !important;
}

/* Fleet modal polish */
#ftms-fleet-modal {
    transition: opacity .15s ease;
}

#ftms-fleet-modal > div {
    animation: ftms-fade-in .16s ease;
}

/* ============================================================
   Datagrid complements
   ============================================================ */

.ftms-dg-table {
    overflow-x: auto;
    overflow-y: visible;
}

.ftms-dg-table .ftms-dg-row:last-child {
    border-bottom-left-radius: calc(0.5rem - 1px);
    border-bottom-right-radius: calc(0.5rem - 1px);
}

/* Pas de zébrage sous .ftms-app (charte densité ClickUp-like). */
.ftms-app :where(.ftms-dg-row:nth-child(even)) {
    background-color: transparent;
}

.ftms-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 18px;
    white-space: nowrap;
}

.ftms-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.65;
}

.ftms-badge--teal    { background: var(--ftms-accent-soft); color: var(--ftms-accent-text); }
.ftms-badge--success { background: #ecfdf5; color: #047857; }
.ftms-badge--warning { background: #fef3c7; color: #b45309; }
.ftms-badge--danger  { background: #fee2e2; color: #b91c1c; }
.ftms-badge--info    { background: #e0f2fe; color: #0369a1; }
.ftms-badge--neutral { background: #f1f5f9; color: #475569; }

div[class*="z-[10003]"][style*="350px"] {
    border-radius: 14px;
    box-shadow: -16px 0 48px rgba(2, 6, 23, 0.18);
}

div[class*="z-[10003]"][style*="350px"] .text-xl.font-semibold {
    font-size: 1rem;
    letter-spacing: 0.01em;
}

div[class*="z-[10003]"][style*="350px"] input:focus,
div[class*="z-[10003]"][style*="350px"] select:focus,
div[class*="z-[10003]"][style*="350px"] textarea:focus {
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft);
    outline: none;
}

div[class*="z-[10003]"][style*="350px"] .cursor-pointer.rounded-md.border:hover {
    border-color: var(--ftms-accent) !important;
    color: var(--ftms-accent);
}

div[class*="z-[10003]"][style*="350px"] .bg-gray-600 {
    background-color: var(--ftms-side-2) !important;
    border-radius: 8px;
    font-size: 12px;
}

div[class*="z-[10003]"][style*="350px"] .primary-button {
    background: var(--ftms-accent) !important;
    border-color: var(--ftms-accent) !important;
    border-radius: 8px;
}

div[class*="z-[10003]"][style*="350px"] .primary-button:hover {
    background: var(--ftms-accent-hover) !important;
    border-color: var(--ftms-accent-hover) !important;
}

.ftms-dg-massaction > div > div {
    background: var(--ftms-side) !important;
    border: 1px solid var(--ftms-side-2);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
    padding: 8px 14px;
}

.ftms-dg-massaction .text-gray-800,
.ftms-dg-massaction p {
    color: var(--ftms-chrome-text) !important;
}

.ftms-dg-massaction .icon-cross-large {
    color: var(--ftms-chrome-muted);
}

.ftms-dg-massaction .icon-cross-large:hover {
    background: var(--ftms-side-2) !important;
    color: var(--ftms-chrome-text);
}

/* ============================================================
   Composants produit FMS — ajoutés 2026-07-29
   Portés par .ftms-app (crochet de spécificité sur <body>) afin de
   remplacer progressivement les surcharges !important du thème.
   Charte : claudeFolder/FMS/03_DESIGN_SYSTEM.md
   ============================================================ */

/* ── Chip de statut ───────────────────────────────────────────
   RÈGLE ABSOLUE (cahier des charges §14.1, workflow §13.1) :
   « Ne jamais utiliser la couleur seule pour porter une information. »
   Le chip porte TOUJOURS pictogramme + libellé ; la couleur ne fait que
   renforcer. Lu en niveaux de gris, il reste compréhensible.          */
.ftms-app .ftms-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ftms-s-1);
    padding: 2px var(--ftms-s-2);
    border: 1px solid transparent;
    border-radius: var(--ftms-r-full);
    font-size: var(--ftms-t-caption);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.ftms-app .ftms-chip__icon {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.ftms-app .ftms-chip--neutre    { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
/* nominal = teal, termine = emerald : les pas suivent StatusTone::color()
   (teal / amber / red / violet / emerald). Nominal était en violet, donc
   indistinguable de en_cours — « En service » et « En atelier » portaient
   exactement la même pastille. */
.ftms-app .ftms-chip--nominal   { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
.ftms-app .ftms-chip--attention { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ftms-app .ftms-chip--bloquant  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ftms-app .ftms-chip--en_cours  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.ftms-app .ftms-chip--termine   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

/* Sombre : pas une inversion — chaque pas est choisi contre le fond sombre. */
html.dark .ftms-app .ftms-chip--neutre    { background: #1e293b; color: #cbd5e1; border-color: #475569; }
html.dark .ftms-app .ftms-chip--nominal   { background: #042f2e; color: #5eead4; border-color: #115e59; }
html.dark .ftms-app .ftms-chip--attention { background: #451a03; color: #fcd34d; border-color: #92400e; }
html.dark .ftms-app .ftms-chip--bloquant  { background: #450a0a; color: #fca5a5; border-color: #991b1b; }
html.dark .ftms-app .ftms-chip--en_cours  { background: #2e1065; color: #c4b5fd; border-color: #5b21b6; }
html.dark .ftms-app .ftms-chip--termine   { background: #022c22; color: #6ee7b7; border-color: #065f46; }

/* ── Tuile KPI ────────────────────────────────────────────────
   Remplace la soupe de classes ($card / $statLabel / $statValue) et
   surtout les tuiles différenciées PAR LA COULEUR SEULE du tableau de
   bord Direction. Chiffres en chasse tabulaire pour que les colonnes
   s'alignent. Formule + heure de rafraîchissement exigées par le
   cadrage §15.1 (chaque KPI porte sa source et sa fraîcheur).         */
.ftms-app .ftms-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ftms-s-1);
    padding: var(--ftms-s-4);
    background: #fff;
    border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-lg);
    box-shadow: var(--ftms-e-0);
    transition: box-shadow var(--ftms-dur-1) var(--ftms-ease),
                border-color var(--ftms-dur-1) var(--ftms-ease);
}

html.dark .ftms-app .ftms-tile { background: #0f172a; border-color: #1e293b; }

.ftms-app a.ftms-tile:hover { box-shadow: var(--ftms-e-2); border-color: var(--ftms-accent); }

.ftms-app .ftms-tile__head {
    display: flex;
    align-items: center;
    gap: var(--ftms-s-1);
    font-size: var(--ftms-t-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ftms-chrome-muted);
}

.ftms-app .ftms-tile__value {
    font-size: var(--ftms-t-kpi);
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--ftms-chrome-text);
}

.ftms-app .ftms-tile__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--ftms-s-1);
    font-size: var(--ftms-t-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ftms-app .ftms-tile__delta--up   { color: #6d28d9; }
.ftms-app .ftms-tile__delta--down { color: #b91c1c; }
.ftms-app .ftms-tile__delta--flat { color: var(--ftms-chrome-muted); }
html.dark .ftms-app .ftms-tile__delta--up   { color: #a78bfa; }
html.dark .ftms-app .ftms-tile__delta--down { color: #fca5a5; }

.ftms-app .ftms-tile__foot {
    font-size: var(--ftms-t-caption);
    color: var(--ftms-chrome-muted);
}

/* Filet d'accent : décoratif, jamais porteur d'information seule. */
.ftms-app .ftms-tile__rule {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    border-top-left-radius: var(--ftms-r-lg);
    border-top-right-radius: var(--ftms-r-lg);
    background: var(--ftms-accent);
}

.ftms-app .ftms-chip--sm {
    padding: 1px var(--ftms-s-1);
    font-size: 10px;
}

.ftms-app .ftms-chip--sm .ftms-chip__icon { font-size: 10px; }

/* Tonalité d'une tuile : colore le filet d'accent uniquement. Le sens est
   déjà porté par le pictogramme et le libellé (jamais la couleur seule). */
.ftms-app .ftms-tile--neutre    .ftms-tile__rule { background: #94a3b8; }
.ftms-app .ftms-tile--nominal   .ftms-tile__rule { background: var(--ftms-accent); }
.ftms-app .ftms-tile--attention .ftms-tile__rule { background: #d97706; }
.ftms-app .ftms-tile--bloquant  .ftms-tile__rule { background: #dc2626; }
.ftms-app .ftms-tile--en_cours  .ftms-tile__rule { background: #6d28d9; }
.ftms-app .ftms-tile--termine   .ftms-tile__rule { background: #4f46e5; }

/* Pictogramme SVG en ligne (<x-ftms::glyph>). Hérite de currentColor, donc
   de la couleur du chip / de la tuile, et s'aligne optiquement sur le texte. */
.ftms-app .ftms-glyph {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* ============================================================
   SÉVÉRITÉ — famille transverse (toast, bandeau, cloche, ligne)
   Déclarée en clair ET en sombre : sans le pendant sombre, un toast
   clair s'afficherait à côté d'un chip sombre sur la même page.
   Le RANG ne repose jamais sur la teinte : forme + épaisseur du filet
   + casse du libellé le portent (cf. 03_DESIGN_SYSTEM §3).
   ============================================================ */
:root {
    --ftms-sev-info-fg: #0369a1;      --ftms-sev-info-bg: #f0f9ff;      --ftms-sev-info-bd: #bae6fd;
    --ftms-sev-succes-fg: #6d28d9;    --ftms-sev-succes-bg: #f3e8ff;    --ftms-sev-succes-bd: #ddd6fe;
    --ftms-sev-attention-fg: #b45309; --ftms-sev-attention-bg: #fffbeb; --ftms-sev-attention-bd: #fde68a;
    --ftms-sev-expire-fg: #b91c1c;    --ftms-sev-expire-bg: #fef2f2;    --ftms-sev-expire-bd: #fecaca;
    --ftms-sev-bloquant-fg: #b91c1c;  --ftms-sev-bloquant-bg: #fef2f2;  --ftms-sev-bloquant-bd: #fecaca;
    /* L'ÉPAISSEUR encode le rang. Trois valeurs DISTINCTES : sans cela
       « attention » et « expiré » ne se distinguaient que par la teinte,
       sur la paire chaude justement confondue en deutéranopie. */
    --ftms-sev-rail-1: 2px; --ftms-sev-rail-2: 4px; --ftms-sev-rail-3: 6px;
    --ftms-toast-w: 400px;
}

html.dark {
    --ftms-sev-info-fg: #7dd3fc;      --ftms-sev-info-bg: #082f49;      --ftms-sev-info-bd: #075985;
    --ftms-sev-succes-fg: #c4b5fd;    --ftms-sev-succes-bg: #2e1065;    --ftms-sev-succes-bd: #5b21b6;
    --ftms-sev-attention-fg: #fcd34d; --ftms-sev-attention-bg: #451a03; --ftms-sev-attention-bd: #92400e;
    --ftms-sev-expire-fg: #fca5a5;    --ftms-sev-expire-bg: #450a0a;    --ftms-sev-expire-bd: #991b1b;
    --ftms-sev-bloquant-fg: #fca5a5;  --ftms-sev-bloquant-bg: #450a0a;  --ftms-sev-bloquant-bd: #991b1b;
}

/* ── Toasts ───────────────────────────────────────────────────
   Bas-DROITE : le rail de navigation occupe 248px à gauche, et le
   bas-centre masque les premières colonnes d'une grille défilée
   horizontalement. Les actions de ligne sont à droite : le toast
   apparaît là où l'on vient de cliquer.                          */
.ftms-toasts {
    position: fixed;
    right: var(--ftms-s-5);
    bottom: calc(var(--ftms-footer-h) + var(--ftms-s-3));
    z-index: 10060;
    display: flex;
    flex-direction: column-reverse; /* le plus récent près du coin */
    gap: var(--ftms-s-2);
    width: var(--ftms-toast-w);
    max-width: calc(100vw - 2 * var(--ftms-s-4));
    pointer-events: none;
}

.ftms-toast {
    pointer-events: auto;
    position: relative;
    display: flex;
    gap: var(--ftms-s-3);
    padding: var(--ftms-s-3) var(--ftms-s-4);
    padding-left: calc(var(--ftms-s-4) + var(--ftms-sev-rail-1));
    background: #fff;
    border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-lg);
    box-shadow: var(--ftms-e-3);
    overflow: hidden;
    animation: ftms-toast-in var(--ftms-dur-2) var(--ftms-ease);
}

html.dark .ftms-toast { background: #1e293b; border-color: #334155; }

@keyframes ftms-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.ftms-toast.is-leaving {
    animation: ftms-toast-out var(--ftms-dur-1) var(--ftms-ease) forwards;
}

@keyframes ftms-toast-out {
    to { opacity: 0; transform: translateY(4px); }
}

/* Filet de sévérité : son ÉPAISSEUR encode le rang, pas sa teinte. */
.ftms-toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--ftms-sev-rail-1);
    background: var(--ftms-toast-fg, var(--ftms-accent));
}

.ftms-toast--expire::before   { width: var(--ftms-sev-rail-2); }
.ftms-toast--bloquant::before { width: var(--ftms-sev-rail-3); }

.ftms-toast--info     { --ftms-toast-fg: var(--ftms-sev-info-fg); }
.ftms-toast--succes   { --ftms-toast-fg: var(--ftms-sev-succes-fg); }
.ftms-toast--attention{ --ftms-toast-fg: var(--ftms-sev-attention-fg); }
.ftms-toast--expire   { --ftms-toast-fg: var(--ftms-sev-expire-fg); }
.ftms-toast--bloquant { --ftms-toast-fg: var(--ftms-sev-bloquant-fg); }

.ftms-toast__glyph { color: var(--ftms-toast-fg); flex-shrink: 0; margin-top: 1px; }
.ftms-toast__body  { flex: 1; min-width: 0; }
.ftms-toast__title { font-size: var(--ftms-t-body); font-weight: 600; color: var(--ftms-chrome-text); }
.ftms-toast__msg   { font-size: var(--ftms-t-cell); color: var(--ftms-chrome-text); word-wrap: break-word; }
.ftms-toast__detail{ margin-top: 2px; font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }

.ftms-toast__actions { display: flex; align-items: center; gap: var(--ftms-s-3); margin-top: var(--ftms-s-2); }

/* « Annuler » est un LIBELLÉ, jamais une icône : une flèche de retour
   est ambiguë et l'action est destructrice à l'envers. */
.ftms-toast__undo {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: var(--ftms-t-cell); font-weight: 600;
    color: var(--ftms-toast-fg); text-decoration: underline;
}

.ftms-toast__link { font-size: var(--ftms-t-cell); font-weight: 600; color: var(--ftms-toast-fg); }

.ftms-toast__close {
    background: none; border: none; cursor: pointer; padding: 2px;
    color: var(--ftms-chrome-muted); font-size: 16px; line-height: 1; align-self: flex-start;
}

.ftms-toast__close:hover { color: var(--ftms-chrome-text); }

/* Jauge du délai restant : rend la fenêtre d'annulation VISIBLE. */
.ftms-toast__timer {
    position: absolute; left: 0; bottom: 0; height: 2px;
    background: var(--ftms-toast-fg); opacity: .5;
    animation: ftms-toast-timer linear forwards;
}

@keyframes ftms-toast-timer { from { width: 100%; } to { width: 0; } }

.ftms-toast:hover .ftms-toast__timer,
.ftms-toast:focus-within .ftms-toast__timer { animation-play-state: paused; }

.ftms-toasts__more {
    pointer-events: auto;
    text-align: center; font-size: var(--ftms-t-caption); font-weight: 600;
    color: var(--ftms-chrome-muted); background: var(--ftms-chrome);
    border: 1px solid var(--ftms-chrome-border); border-radius: var(--ftms-r-full);
    padding: 2px var(--ftms-s-3); cursor: pointer;
}

@media (max-width: 768px) {
    /* Au-dessus de la pile flash Vue (souvent bottom-edge) pour éviter la collision. */
    .ftms-toasts {
        right: 12px; left: 12px; width: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        z-index: 10050;
    }
    .ftms-toast { min-height: 48px; }
}

/* Pile flash Vue masquée sous .ftms-app : Ftms.toast absorbe add-flash. */
.ftms-app .flash-toast-stack {
    display: none !important;
}

/* ── Bandeau (condition de l'objet affiché, pas résultat d'une action) ── */
.ftms-app .ftms-alert {
    display: flex; gap: var(--ftms-s-3);
    padding: var(--ftms-s-3) var(--ftms-s-4);
    border: 1px solid; border-left-width: var(--ftms-sev-rail-1);
    border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-body);
}

.ftms-app .ftms-alert--info      { background: var(--ftms-sev-info-bg);      border-color: var(--ftms-sev-info-bd);      color: var(--ftms-sev-info-fg); }
.ftms-app .ftms-alert--succes    { background: var(--ftms-sev-succes-bg);    border-color: var(--ftms-sev-succes-bd);    color: var(--ftms-sev-succes-fg); }
.ftms-app .ftms-alert--attention { background: var(--ftms-sev-attention-bg); border-color: var(--ftms-sev-attention-bd); color: var(--ftms-sev-attention-fg); }
.ftms-app .ftms-alert--expire    { background: var(--ftms-sev-expire-bg);    border-color: var(--ftms-sev-expire-bd);    color: var(--ftms-sev-expire-fg);   border-left-width: var(--ftms-sev-rail-2); }
.ftms-app .ftms-alert--bloquant  { background: var(--ftms-sev-bloquant-bg);  border-color: var(--ftms-sev-bloquant-bd);  color: var(--ftms-sev-bloquant-fg); border-left-width: var(--ftms-sev-rail-3); }

.ftms-app .ftms-alert__title { font-weight: 700; }
.ftms-app .ftms-alert--bloquant .ftms-alert__title { text-transform: uppercase; letter-spacing: .04em; }
.ftms-app .ftms-alert__actions { display: flex; flex-wrap: wrap; gap: var(--ftms-s-3); margin-top: var(--ftms-s-2); }
.ftms-app .ftms-alert__actions a { font-weight: 600; text-decoration: underline; }

/* ── État vide — trois espèces, les confondre est le bug classique ───── */
.ftms-app .ftms-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--ftms-s-2);
    padding: var(--ftms-s-6) var(--ftms-s-4); text-align: center;
    color: var(--ftms-chrome-muted);
}

.ftms-app .ftms-empty__title { font-size: var(--ftms-t-body); font-weight: 600; color: var(--ftms-chrome-text); }
.ftms-app .ftms-empty__hint  { font-size: var(--ftms-t-cell); max-width: 40ch; }
.ftms-app .ftms-empty__glyph { color: var(--ftms-chrome-muted); }
/* « sain » : vide ET c'est la bonne nouvelle. Dans un cockpit d'alertes,
   zéro est un KPI, pas un trou. */
.ftms-app .ftms-empty--sain .ftms-empty__glyph { color: var(--ftms-sev-succes-fg); }
.ftms-app .ftms-empty__filters { display: flex; flex-wrap: wrap; gap: var(--ftms-s-1); justify-content: center; }

/* ── Squelette de chargement ─────────────────────────────────────────── */
.ftms-app .ftms-skel {
    height: var(--ftms-row-h);
    border-radius: var(--ftms-r-sm);
    background: linear-gradient(90deg, var(--ftms-chrome-2) 25%, var(--ftms-chrome) 37%, var(--ftms-chrome-2) 63%);
    background-size: 400% 100%;
    animation: ftms-shimmer 1.4s linear infinite;
}

@keyframes ftms-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Mouvement réduit : bloc plat, PAS un miroitement plus rapide. */
@media (prefers-reduced-motion: reduce) {
    .ftms-app .ftms-skel { animation: none; background: var(--ftms-chrome-2); }
    .ftms-toast { animation: none; }
    .ftms-toast__timer { animation: none; width: 0; }
}

/* ── Barre d'état (pied de page) — n'existait pas ────────────────────── */
.ftms-app .ftms-statusbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    height: var(--ftms-footer-h);
    display: flex; align-items: center; gap: var(--ftms-s-4);
    padding: 0 var(--ftms-s-4);
    background: var(--ftms-chrome); border-top: 1px solid var(--ftms-chrome-border);
    font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted);
}

.ftms-app .ftms-statusbar__sep { margin-inline: var(--ftms-s-2); opacity: .5; }
.ftms-app .ftms-statusbar__spacer { flex: 1; }

/* ── Grille : densité, survol, sélection ──────────────────────────────
   ⚠️ Le datagrid ne rend PAS de <table> : ce sont des <div> en CSS grid
   (.ftms-dg-table > .ftms-dg-head + .ftms-dg-row). Toute règle visant
   table/thead/tbody/tr est du CODE MORT — c'était le cas de la première
   version de ce bloc. Cibler les classes réelles.                        */
.ftms-app .ftms-dg-row {
    min-height: var(--ftms-row-h);
    font-size: var(--ftms-t-cell);
    font-variant-numeric: tabular-nums;
}

.ftms-app .ftms-dg-head {
    font-size: var(--ftms-t-caption);
    letter-spacing: .03em;
}

/* Survol : on renforce la teinte Tailwind existante avec le jeton produit. */
.ftms-app .ftms-dg-row:hover { background: var(--ftms-accent-soft); }

.ftms-app .ftms-dg-row.is-selected {
    background: var(--ftms-accent-soft);
    box-shadow: inset 3px 0 0 var(--ftms-accent);
}

/* Cellules de grille : hiérarchie interne (identifiant fort, complément
   discret) — évite les colonnes de texte gris uniforme. */
.ftms-app .ftms-cell-strong { font-weight: 600; color: var(--ftms-chrome-text); }
.ftms-app .ftms-cell-sub { margin-left: 6px; font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }
.ftms-app .ftms-cell-muted { color: var(--ftms-chrome-muted); }

/* Actions de ligne — toujours visibles, couleurs sémantiques au repos
   (gris muet = icônes « mortes » ; on colore pour la lisibilité).
   Alignées à GAUCHE depuis le passage des actions en tête de ligne
   (tâche CEO 2026-08-18) : la colonne d'actions précède les données. */
.ftms-app .ftms-row-actions {
    opacity: 1;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    min-width: 0;
    width: 100%;
}
.ftms-app .ftms-row-actions > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: var(--ftms-r-sm) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: background var(--ftms-dur-1) var(--ftms-ease),
                color var(--ftms-dur-1) var(--ftms-ease),
                filter var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-row-actions > span::before {
    /* icomoon : recentrer le glyphe dans le hit-target 30×30 */
    line-height: 1 !important;
}
/* Couleurs d'action UNIFIÉES sur le design produit (demande CEO) :
   base grise neutre, survol accent teal, survol ROUGE réservé aux actions
   destructrices. L'ancien schéma pastel par action (œil teal doux, éditer
   ambre, supprimer rouge doux…) est remplacé — une grille = une seule
   famille de pastilles, la couleur ne porte plus quatre significations. */
.ftms-app .ftms-row-actions > span,
.ftms-app .ftms-row-actions > a {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.ftms-app .ftms-row-actions > span:hover,
.ftms-app .ftms-row-actions > a:hover {
    background: var(--ftms-accent, #0f766e) !important;
    color: #ffffff !important;
}
.ftms-app .ftms-row-actions > span.icon-delete:hover,
.ftms-app .ftms-row-actions > .ftms-dg-action--danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}
html.dark .ftms-app .ftms-row-actions > span,
html.dark .ftms-app .ftms-row-actions > a {
    background: #1f2937 !important;
    color: #9ca3af !important;
}
html.dark .ftms-app .ftms-row-actions > span:hover,
html.dark .ftms-app .ftms-row-actions > a:hover {
    background: var(--ftms-accent, #0f766e) !important;
    color: #ffffff !important;
}
html.dark .ftms-app .ftms-row-actions > span.icon-delete:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* ── Barre d'actions groupées (les 33 grilles n'en avaient AUCUNE) ───── */
.ftms-app .ftms-bulkbar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--ftms-footer-h) + var(--ftms-s-4));
    z-index: 10040;
    display: none; align-items: center; gap: var(--ftms-s-3);
    padding: var(--ftms-s-2) var(--ftms-s-4);
    background: var(--ftms-chrome-text); color: #fff;
    border-radius: var(--ftms-r-full); box-shadow: var(--ftms-e-4);
    font-size: var(--ftms-t-cell);
}

.ftms-app .ftms-bulkbar.is-visible { display: flex; }
.ftms-app .ftms-bulkbar__count { font-weight: 700; }
.ftms-app .ftms-bulkbar button {
    background: rgba(255,255,255,.14); border: none; color: #fff; cursor: pointer;
    border-radius: var(--ftms-r-full); padding: 4px var(--ftms-s-3); font-size: var(--ftms-t-cell); font-weight: 600;
}
.ftms-app .ftms-bulkbar button:hover { background: rgba(255,255,255,.26); }

/* ── Tiroir latéral : le geste « ClickUp » — la liste reste vivante ──── */
.ftms-drawer-overlay {
    position: fixed; inset: 0; z-index: 10045;
    background: rgba(15,23,42,.35);
    opacity: 0; visibility: hidden;
    pointer-events: none; /* sinon opacity:0 bloque TOUTE la page après fermeture */
    transition: opacity var(--ftms-dur-3) var(--ftms-ease),
                visibility var(--ftms-dur-3) var(--ftms-ease);
}
.ftms-drawer-overlay.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
}

.ftms-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 10046;
    width: min(var(--ftms-drawer-w), 100vw);
    display: flex; flex-direction: column;
    background: #fff; box-shadow: var(--ftms-e-4);
    transform: translateX(100%);
    pointer-events: none;
    transition: transform var(--ftms-dur-3) var(--ftms-ease);
}
html.dark .ftms-drawer { background: #0f172a; }
.ftms-drawer.is-open { transform: none; pointer-events: auto; }

.ftms-drawer__head {
    display: flex; align-items: center; gap: var(--ftms-s-3);
    padding: var(--ftms-s-4);
    border-bottom: 1px solid var(--ftms-chrome-border);
}
.ftms-drawer__title { flex: 1; font-size: var(--ftms-t-title); font-weight: 700; color: var(--ftms-chrome-text); }
.ftms-drawer__body { flex: 1; overflow: auto; padding: var(--ftms-s-4); }
.ftms-drawer__close { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--ftms-chrome-muted); }

@media (max-width: 768px) {
    /* Sur tablette le tiroir devient une feuille pleine hauteur. */
    .ftms-drawer { width: 100vw; }
}

/* ── Palette de commandes (⌘K) ───────────────────────────────────────── */
.ftms-palette-overlay {
    position: fixed; inset: 0; z-index: 10070;
    background: rgba(15,23,42,.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 12vh var(--ftms-s-4) var(--ftms-s-4);
}

.ftms-palette {
    width: min(640px, 100%);
    background: #fff; border-radius: var(--ftms-r-xl); box-shadow: var(--ftms-e-4);
    overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
html.dark .ftms-palette { background: #1e293b; }

.ftms-palette__input {
    width: 100%; border: none; outline: none;
    padding: var(--ftms-s-4); font-size: var(--ftms-t-title);
    background: transparent; color: var(--ftms-chrome-text);
    border-bottom: 1px solid var(--ftms-chrome-border);
}

.ftms-palette__results { overflow: auto; padding: var(--ftms-s-2); }
.ftms-palette__group {
    padding: var(--ftms-s-2) var(--ftms-s-3) var(--ftms-s-1);
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ftms-chrome-muted);
}
.ftms-palette__item {
    display: flex; align-items: center; gap: var(--ftms-s-3);
    padding: var(--ftms-s-2) var(--ftms-s-3);
    border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-body); color: var(--ftms-chrome-text);
    cursor: pointer; text-decoration: none;
}
.ftms-palette__item:hover,
.ftms-palette__item.is-active { background: var(--ftms-accent-soft); color: var(--ftms-accent-text); }
.ftms-palette__hint { margin-left: auto; font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }
.ftms-palette__empty { padding: var(--ftms-s-5); text-align: center; color: var(--ftms-chrome-muted); font-size: var(--ftms-t-cell); }

/* ── Recherche avancée : modale en fondu (bouton à droite du champ) ────
   Le fondu a besoin d'un état de départ : l'overlay naît à opacity 0 et
   la classe .is-in arrive à la frame suivante (voir openAdvancedSearch). */
.ftms-adv-overlay {
    position: fixed; inset: 0; z-index: 10075;
    background: rgba(15, 23, 42, .45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 10vh var(--ftms-s-4) var(--ftms-s-4);
    opacity: 0;
    transition: opacity 200ms var(--ftms-ease);
}
.ftms-adv-overlay.is-in { opacity: 1; }
/* L'attribut hidden doit gagner sur le display:flex de la classe (les
   popups CRUD réutilisent cet habillage avec un nœud pré-rendu masqué). */
.ftms-adv-overlay[hidden] { display: none; }

.ftms-adv {
    width: min(720px, 100%);
    display: flex; flex-direction: column; max-height: 78vh;
    background: #fff; border-radius: var(--ftms-r-xl); box-shadow: var(--ftms-e-4);
    overflow: hidden;
    transform: translateY(-8px) scale(.985);
    transition: transform 200ms var(--ftms-ease);
}
.ftms-adv-overlay.is-in .ftms-adv { transform: none; }
html.dark .ftms-adv { background: #1e293b; }

.ftms-adv__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--ftms-s-4);
    border-bottom: 1px solid var(--ftms-chrome-border);
}
.ftms-adv__title { margin: 0; font-size: var(--ftms-t-title); font-weight: 700; color: var(--ftms-chrome-text); }
.ftms-adv__close {
    border: 0; background: none; cursor: pointer; line-height: 1;
    font-size: 22px; color: var(--ftms-chrome-muted);
}
.ftms-adv__close:hover { color: var(--ftms-chrome-text); }

.ftms-adv__form {
    display: grid; gap: var(--ftms-s-3);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--ftms-s-4);
    border-bottom: 1px solid var(--ftms-chrome-border);
}
.ftms-adv__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ftms-adv__field--wide { grid-column: 1 / -1; }
.ftms-adv__label {
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ftms-chrome-muted);
}
.ftms-adv__input {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--ftms-chrome-border); border-radius: var(--ftms-r-md);
    background: var(--ftms-chrome); color: var(--ftms-chrome-text);
    font-size: var(--ftms-t-body); font-family: inherit;
}
.ftms-adv__input:focus {
    outline: none;
    border-color: var(--ftms-accent);
    box-shadow: 0 0 0 3px var(--ftms-accent-soft);
}
.ftms-adv__input:disabled { opacity: .55; cursor: not-allowed; }

.ftms-adv__actions {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ftms-s-3);
}
.ftms-adv__reset {
    border: 0; background: none; cursor: pointer;
    font-size: var(--ftms-t-body); font-weight: 600; color: var(--ftms-chrome-muted);
}
.ftms-adv__reset:hover { color: var(--ftms-accent-text); }

.ftms-adv__results { overflow: auto; padding: var(--ftms-s-2); }
.ftms-adv__group {
    padding: var(--ftms-s-3) var(--ftms-s-3) var(--ftms-s-1);
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ftms-chrome-muted);
}
.ftms-adv__item {
    display: flex; align-items: baseline; gap: var(--ftms-s-3);
    padding: var(--ftms-s-2) var(--ftms-s-3);
    border-radius: var(--ftms-r-md);
    color: var(--ftms-chrome-text); text-decoration: none;
}
.ftms-adv__item:hover { background: var(--ftms-accent-soft); color: var(--ftms-accent-text); }
.ftms-adv__item-title { font-size: var(--ftms-t-body); font-weight: 600; }
.ftms-adv__item-sub {
    margin-left: auto; text-align: right;
    font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted);
}
.ftms-adv__empty { padding: var(--ftms-s-5); text-align: center; color: var(--ftms-chrome-muted); font-size: var(--ftms-t-cell); }

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

/* ══ Kit formulaire produit (tiroir + popups CRUD flotte) ══════════════
   Les formulaires FTMS étaient des <label> Tailwind bruts, tous différents.
   Un seul vocabulaire : .ftms-form (grille), .ftms-form__section (titre de
   groupe), .ftms-field/.ftms-label/.ftms-input, .ftms-form__foot (actions).
   Réutilisé par : véhicules, groupes, pages « resource » génériques.        */
.ftms-form { display: grid; gap: var(--ftms-s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ftms-form__section {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: var(--ftms-s-3);
    margin-top: var(--ftms-s-2);
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ftms-accent-text);
}
.ftms-form__section:first-child { margin-top: 0; }
.ftms-form__section::after { content: ""; flex: 1; border-top: 1px solid var(--ftms-chrome-border); }

.ftms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ftms-field--wide { grid-column: 1 / -1; }
.ftms-label {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    color: var(--ftms-chrome-text);
}
.ftms-label b { color: var(--ftms-accent-text); font-weight: 700; }

.ftms-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1; border-radius: var(--ftms-r-md);
    background: var(--ftms-chrome); color: var(--ftms-chrome-text);
    font-size: 15px; font-family: inherit; line-height: 1.35;
    transition: border-color var(--ftms-dur-1) var(--ftms-ease), box-shadow var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-input:focus {
    outline: none;
    border-color: var(--ftms-accent);
    box-shadow: 0 0 0 3px var(--ftms-accent-soft);
}
.ftms-input:disabled { opacity: .55; cursor: not-allowed; }
textarea.ftms-input { resize: vertical; min-height: 88px; }

/* Alias de sûreté — pages legacy qui utilisaient encore .ftms-select. */
.ftms-select {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1; border-radius: var(--ftms-r-md);
    background: var(--ftms-chrome); color: var(--ftms-chrome-text);
    font-size: 15px; font-family: inherit; line-height: 1.35;
    transition: border-color var(--ftms-dur-1) var(--ftms-ease), box-shadow var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-select:focus {
    outline: none;
    border-color: var(--ftms-accent);
    box-shadow: 0 0 0 3px var(--ftms-accent-soft);
}

/* Date / datetime / time — zone cliquable pleine largeur, hauteur kit. */
.ftms-input[type="date"],
.ftms-input[type="datetime-local"],
.ftms-input[type="time"],
.ftms-select[type="date"] {
    display: block;
    min-height: 42px;
    height: 42px;
    padding-block: 0;
    line-height: 42px;
    color-scheme: light;
}
.ftms-input[type="date"]::-webkit-calendar-picker-indicator,
.ftms-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.ftms-input[type="time"]::-webkit-calendar-picker-indicator,
.ftms-select[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .65;
    width: 1.1em;
    height: 1.1em;
    margin-inline-end: 2px;
}
.ftms-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.ftms-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.ftms-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.ftms-select[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Rangée de filtres (dashboard / reporting / catalogue). */
.ftms-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.ftms-filterbar--inline {
    align-items: center;
}
.ftms-filterbar--form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    align-items: end;
    gap: 12px 14px;
}
.ftms-filterbar > .ftms-field {
    min-width: 160px;
    flex: 1 1 160px;
    max-width: 280px;
}
.ftms-filterbar--inline > .ftms-field {
    min-width: 120px;
    max-width: 160px;
    flex: 0 1 140px;
}
.ftms-filterbar--form > .ftms-field,
.ftms-filterbar--form > [data-jour-semaine],
.ftms-filterbar--form > [data-jour-mois] {
    min-width: 0;
    max-width: none;
    flex: none;
}
.ftms-filterbar--form > .ftms-field--wide {
    grid-column: 1 / -1;
}
.ftms-filterbar--form > .ftms-switch {
    grid-column: 1 / -1;
}
.ftms-filterbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 42px;
}
.ftms-filterbar__reset {
    align-self: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--ftms-accent-text, #0f766e);
    text-decoration: none;
}
.ftms-filterbar__reset:hover { text-decoration: underline; }
.ftms-filterbar [hidden] { display: none !important; }

/* Interrupteur (checkbox habillée) — « Véhicule affrété », etc. */
.ftms-switch {
    display: flex; align-items: center; gap: var(--ftms-s-2);
    min-height: 42px;
    padding: 10px 14px;
    border: 1px solid #cbd5e1; border-radius: var(--ftms-r-md);
    background: var(--ftms-chrome);
    font-size: 15px; font-weight: 500; color: var(--ftms-chrome-text);
    cursor: pointer; user-select: none;
}
.ftms-switch input { accent-color: var(--ftms-accent); width: 15px; height: 15px; }

.ftms-form__foot {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ftms-s-3);
    margin-top: var(--ftms-s-2); padding-top: var(--ftms-s-3);
    border-top: 1px solid var(--ftms-chrome-border);
}
.ftms-btn-ghost {
    border: 0; background: none; cursor: pointer;
    padding: 7px 10px; border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-body); font-weight: 600; color: var(--ftms-chrome-muted);
}
.ftms-btn-ghost:hover { color: var(--ftms-chrome-text); background: var(--ftms-chrome-2); }

@media (max-width: 560px) {
    .ftms-form { grid-template-columns: 1fr; }
}

/* ══ En-tête de page : les onglets font partie de la carte ═════════════
   Les onglets de domaine flottaient entre l'en-tête et les KPI, comme un
   troisième bloc sans propriétaire. Ils sont désormais soudés au bas de
   la carte : marges négatives pour rejoindre les bords (la carte porte
   px-4 py-3 = 16/12 px), filet de séparation, coins bas repris.

   Pas de `position: sticky` ici : le gabarit admin pose `overflow-x: hidden`
   sur html ET body, ce qui neutralise sticky pour leurs descendants. La
   règle donnait un en-tête « collant » qui ne collait jamais.            */
/* En-tête de page + fil d'Ariane (kit produit). */
.ftms-app .ftms-page-header {
    border: 1px solid var(--ftms-chrome-border, #e2e8f0);
    border-radius: var(--ftms-r-lg, 12px);
    background: var(--ftms-chrome, #fff);
    padding: 12px 16px;
}
.ftms-app .ftms-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ftms-chrome-muted, #94a3b8);
}
.ftms-app .ftms-breadcrumb__sep {
    color: var(--ftms-chrome-line, #cbd5e1);
    user-select: none;
}
.ftms-app .ftms-breadcrumb__link {
    color: var(--ftms-chrome-muted, #64748b);
    text-decoration: none;
    font-weight: 500;
}
.ftms-app .ftms-breadcrumb__link:hover {
    color: var(--ftms-accent-text, #0f766e);
    text-decoration: underline;
}
.ftms-app .ftms-breadcrumb__current {
    color: var(--ftms-chrome-text, #334155);
    font-weight: 600;
}
.ftms-app .ftms-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ftms-app .ftms-page-header__title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.ftms-app .ftms-page-header__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ftms-chrome-text, #0f172a);
}
/* Flèche de retour à la liste, à gauche du titre. Cible tactile de 32 px
   (le chevron seul ne se clique pas) ; `flex: none` pour qu'elle ne se
   comprime jamais quand les badges de l'en-tête passent à la ligne. */
.ftms-app .ftms-page-header__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ftms-r-md, 8px);
    border: 1px solid var(--ftms-chrome-border, #e2e8f0);
    color: var(--ftms-chrome-muted, #64748b);
    text-decoration: none;
    transition: color var(--ftms-dur-1, .15s) ease,
                background-color var(--ftms-dur-1, .15s) ease,
                border-color var(--ftms-dur-1, .15s) ease;
}
.ftms-app .ftms-page-header__back:hover {
    color: var(--ftms-accent, #0d9488);
    background: var(--ftms-chrome-2);
    border-color: var(--ftms-accent, #0d9488);
}
.ftms-app .ftms-page-header__back svg {
    width: 18px;
    height: 18px;
}
.ftms-app .ftms-page-header__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.ftms-app .ftms-page-header__metas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--ftms-chrome-muted, #64748b);
}
.ftms-app .ftms-page-header__meta-label {
    font-size: 12px;
    color: var(--ftms-chrome-muted, #94a3b8);
}
.ftms-app .ftms-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ftms-app .ftms-page-header__tabs {
    margin: 12px -16px -12px;
    padding: 8px 16px;
    border-top: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome-2);
    border-radius: 0 0 calc(var(--ftms-r-lg) - 1px) calc(var(--ftms-r-lg) - 1px);
    overflow-x: auto;
}
/* Dans la carte, les pilules posent déjà sur un fond gris : on retire le
   leur pour éviter le gris sur gris. */
.ftms-app .ftms-page-header__tabs .ftms-pilltabs {
    padding: 0;
    background: transparent;
    gap: 2px;
}

/* ══ Ligne de création inline (véhicules) ══════════════════════════════
   Jumeau produit de la bande « Excel » de la grille TMS : aperçu de la
   future ligne + bande de cases-étapes + popover épinglé sous la case.
   La version TMS est violette (Nexus) ; ici tout passe par les jetons
   produit (teal), pour ne pas rouvrir deux identités visuelles.        */
.ftms-app .ftms-ic {
    position: relative;
    margin-bottom: var(--ftms-s-4);
    /* Même recette que .ftms-tile : hairline neutre + élévation discrète.
       L'ancien « 2px teal + halo teal » criait plus fort que le CTA de la
       page et sortait la bande de la charte (outil dense = à plat). */
    border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-lg);
    background: var(--ftms-chrome);
    box-shadow: var(--ftms-e-2);
    overflow: hidden;
}
/* Filet d'accent en tête — l'idiome des tuiles KPI de la page (.ftms-tile__rule).
   C'est lui qui porte « saisie en cours », pas une bordure épaisse. */
.ftms-app .ftms-ic::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--ftms-cta-grad);
}
html.dark .ftms-app .ftms-ic { background: #0f172a; border-color: #1e293b; }

/* Aperçu : 7 colonnes = les 7 colonnes visibles de la grille. */
.ftms-app .ftms-ic__preview-head,
.ftms-app .ftms-ic__preview-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ftms-s-2);
    padding: var(--ftms-s-2) var(--ftms-s-4);
    align-items: center;
}
.ftms-app .ftms-ic__preview-head {
    padding-top: calc(var(--ftms-s-2) + 3px); /* place pour le filet d'accent */
    background: var(--ftms-chrome-2);
    border-bottom: 1px solid var(--ftms-chrome-border);
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--ftms-chrome-muted);
}
html.dark .ftms-app .ftms-ic__preview-head { background: #1e293b; border-bottom-color: #334155; }
/* Aperçu de la future ligne : surface NEUTRE, pour qu'elle se lise comme une
   ligne de la grille. Le lavis teal précédent donnait un faux air d'erreur
   ou de sélection sur une ligne encore vide. */
.ftms-app .ftms-ic__preview-row {
    min-height: 46px;
    background: var(--ftms-chrome);
    font-size: var(--ftms-t-body); font-weight: 600;
    color: var(--ftms-chrome-text);
}
html.dark .ftms-app .ftms-ic__preview-row { background: #0f172a; }
.ftms-app .ftms-ic__preview-row > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ftms-app .ftms-ic__preview-row > span.is-empty {
    font-weight: 400; font-style: italic; color: var(--ftms-chrome-muted);
}

/* Bande de cases — une case par étape. */
.ftms-app .ftms-ic__strip {
    display: flex; align-items: stretch;
    border-top: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome);
    overflow-x: auto;
}
/* Une case = un onglet (role="tablist"). Repère d'état = filet BAS, comme les
   onglets de domaine en haut de page — pas un anneau arrondi flottant. */
.ftms-app .ftms-ic__cell {
    position: relative;
    flex: 1 1 0; min-width: 132px;
    padding: var(--ftms-s-3);
    border: 0;
    border-right: 1px solid var(--ftms-chrome-border);   /* hairline, plus de pointillés */
    border-bottom: 2px solid transparent;                /* réservé : pas de saut au clic */
    background: transparent; cursor: pointer; text-align: left;
    transition: background var(--ftms-dur-1) var(--ftms-ease),
                border-color var(--ftms-dur-1) var(--ftms-ease);
}
html.dark .ftms-app .ftms-ic__cell { border-right-color: #334155; }
.ftms-app .ftms-ic__cell:last-child { border-right: 0; }
.ftms-app .ftms-ic__cell:hover { background: var(--ftms-chrome-2); }
html.dark .ftms-app .ftms-ic__cell:hover { background: #1e293b; }
.ftms-app .ftms-ic__cell:focus-visible {
    outline: 2px solid var(--ftms-accent); outline-offset: -2px;
}
.ftms-app .ftms-ic__cell.is-active {
    background: var(--ftms-accent-soft);
    border-bottom-color: var(--ftms-accent);
}
.ftms-app .ftms-ic__cell.is-active .ftms-ic__cell-label { color: var(--ftms-accent-text); }

/* Étape requise encore vide : ce n'est PAS une erreur (l'opérateur vient
   d'ouvrir la bande), donc pastille « attention » discrète — ton des tuiles
   --attention — au lieu du soulignement rouge d'erreur. */
.ftms-app .ftms-ic__cell.is-missing .ftms-ic__cell-label::after {
    content: '';
    display: inline-block; width: 5px; height: 5px; margin-left: 5px;
    border-radius: var(--ftms-r-full); background: #d97706;
    vertical-align: middle;
}
.ftms-app .ftms-ic__cell-label {
    display: block; margin-bottom: 3px;
    font-size: var(--ftms-t-caption); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    /* Neutre par défaut : 6 libellés teal d'affilée saturaient la bande.
       Le teal ne marque plus que l'étape ACTIVE. */
    color: var(--ftms-chrome-muted);
}
.ftms-app .ftms-ic__cell-value {
    display: block; font-size: var(--ftms-t-cell); font-weight: 600;
    color: var(--ftms-chrome-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ftms-app .ftms-ic__cell-value.is-empty {
    font-weight: 400; font-style: italic; color: var(--ftms-chrome-muted);
}

.ftms-app .ftms-ic__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ftms-s-2);
    padding: var(--ftms-s-2) var(--ftms-s-3);
    border-top: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome-2);
}
.ftms-app .ftms-ic__hint {
    margin-right: auto;
    font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted);
}
.ftms-app .ftms-ic__hint.is-ready { color: var(--ftms-accent-text); font-weight: 600; }

/* Enregistrer = LE CTA produit (même recette que .ftms-cta). L'ancien vert
   #16a34a était la seule touche verte de l'application et cassait l'identité
   teal ; l'état désactivé en `opacity:.5` sur un dégradé rendait délavé. */
.ftms-app .ftms-ic__save {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 var(--ftms-s-3);
    border: 0; border-radius: var(--ftms-r-md);
    background: var(--ftms-cta-grad); color: #fff;
    font-size: var(--ftms-t-body); font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 118, 110, .3);
    cursor: pointer;
    transition: filter var(--ftms-dur-1) var(--ftms-ease),
                box-shadow var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-ic__save:hover:not(:disabled) {
    filter: brightness(1.08);
    box-shadow: 0 3px 10px rgba(15, 118, 110, .35);
}
/* Désactivé : reste visiblement un BOUTON (bordure + surface), pas un texte
   qui se fond dans le pied de bande. */
.ftms-app .ftms-ic__save:disabled {
    background: var(--ftms-chrome); color: var(--ftms-chrome-muted);
    border: 1px solid var(--ftms-chrome-border);
    box-shadow: none; cursor: not-allowed;
}
html.dark .ftms-app .ftms-ic__save:disabled { background: #1e293b; color: #64748b; border-color: #334155; }

/* Annuler = bouton fantôme TEXTE : largeur au contenu (l'ancien 34px fixe
   était pensé pour un glyphe « × » et écrasait le libellé « Annuler »). */
.ftms-app .ftms-ic__cancel {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 var(--ftms-s-3); border-radius: var(--ftms-r-md);
    border: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome); color: var(--ftms-chrome-muted);
    font-size: var(--ftms-t-body); font-weight: 500;
    cursor: pointer;
    transition: background var(--ftms-dur-1) var(--ftms-ease),
                color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-ic__cancel:hover {
    background: var(--ftms-chrome-2); color: var(--ftms-chrome-text);
}
html.dark .ftms-app .ftms-ic__cancel { background: transparent; border-color: #334155; }
html.dark .ftms-app .ftms-ic__cancel:hover { background: #1e293b; color: #e2e8f0; }
.ftms-app .ftms-ic__save:focus-visible,
.ftms-app .ftms-ic__cancel:focus-visible {
    outline: 2px solid var(--ftms-accent); outline-offset: 2px;
}

/* Popover épinglé — position posée en JS (ancrage sous la case). */
/* Surface flottante : --ftms-e-3 est LE jeton prévu pour les popovers.
   L'ancienne bordure 2px teal + ombre teintée faisait doublon avec la
   bande et alourdissait l'ensemble. */
.ftms-ic-pop {
    position: fixed; z-index: 10080;
    display: flex; flex-direction: column;
    background: var(--ftms-chrome);
    border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-lg);
    box-shadow: var(--ftms-e-3);
}
html.dark .ftms-ic-pop { background: #0f172a; border-color: #334155; }
.ftms-ic-pop[hidden] { display: none; }
.ftms-ic-pop__head {
    display: flex; align-items: center; gap: var(--ftms-s-2);
    padding: var(--ftms-s-3);
    border-bottom: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome);
    border-radius: calc(var(--ftms-r-lg) - 1px) calc(var(--ftms-r-lg) - 1px) 0 0;
}
html.dark .ftms-ic-pop__head { background: #0f172a; border-bottom-color: #334155; }
/* Compteur d'étape : la seule pastille pleine du popover — c'est le repère
   de progression, donc il garde l'accent. */
.ftms-ic-pop__step {
    flex-shrink: 0; padding: 2px 8px; border-radius: var(--ftms-r-full);
    background: var(--ftms-accent-soft); color: var(--ftms-accent-text);
    font-size: 11px; font-weight: 800; letter-spacing: .03em;
}
.ftms-ic-pop__title {
    flex: 1; font-size: 16px; font-weight: 600;
    letter-spacing: 0;
    color: var(--ftms-chrome-text);
}
html.dark .ftms-ic-pop__title { color: #e2e8f0; }
.ftms-ic-pop__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--ftms-r-sm);
    border: 0; background: none; cursor: pointer; line-height: 1;
    font-size: 20px; color: var(--ftms-chrome-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease),
                color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-ic-pop__close:hover { background: var(--ftms-chrome-2); color: var(--ftms-chrome-text); }
html.dark .ftms-ic-pop__close:hover { background: #1e293b; color: #e2e8f0; }
.ftms-ic-pop__body { overflow-y: auto; padding: var(--ftms-s-5); }
.ftms-ic-pop .ftms-form { gap: 14px; }
/* `.ftms-form` pose display:grid — une classe l'emporte sur la règle UA
   `[hidden] {display:none}`, donc sans ceci les 6 panneaux s'affichaient
   tous à la fois et l'étape ne voulait plus rien dire. */
.ftms-ic-pop .ftms-ic-panel[hidden] { display: none; }
.ftms-ic-pop__foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ftms-s-2);
    padding: var(--ftms-s-3);
    border-top: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome-2);
    border-radius: 0 0 calc(var(--ftms-r-lg) - 1px) calc(var(--ftms-r-lg) - 1px);
}
html.dark .ftms-ic-pop__foot { background: #1e293b; border-top-color: #334155; }

/* Saisie en cours : simple retrait visuel, la grille RESTE consultable
   (demande utilisateur 2026-08-16 : vérifier l'existant est LE besoin du
   moment de la saisie). Vestige par identifiant conservé pour l'écran
   véhicules — la règle générique par attribut vit plus bas. */
body.is-ftms-inline-create #ftms-fleet-vehicles-datagrid {
    opacity: .88;
    transition: opacity var(--ftms-dur-2) var(--ftms-ease);
}

/* ══ Contrôle segmenté (filtres de liste, façon ClickUp) ═══════════════ */
.ftms-seg {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border-radius: var(--ftms-r-lg);
    background: var(--ftms-chrome-2);
}
.ftms-seg__btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 12px; border-radius: calc(var(--ftms-r-lg) - 3px);
    font-size: var(--ftms-t-cell); font-weight: 600; color: var(--ftms-chrome-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-seg__btn:hover { color: var(--ftms-chrome-text); }
.ftms-seg__btn.is-active {
    background: var(--ftms-chrome); color: var(--ftms-accent-text);
    box-shadow: var(--ftms-e-1);
}
/* Variante fiche véhicule (onglets de catégorie en édition) : la barre doit
   pouvoir REPLIER ses segments — tiroir 600 px et petits écrans. */
.ftms-seg--fiche { flex-wrap: wrap; align-self: flex-start; }

/* ── Compteur (cloche) : un NOMBRE, jamais une pastille nue ──────────── */
.ftms-app .ftms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1;
    background: var(--ftms-sev-attention-fg); color: #fff;
}
.ftms-app .ftms-count--bloquant { background: var(--ftms-sev-bloquant-fg); }

/* ── Focus visible : une seule règle, partout ────────────────────────── */
.ftms-app :focus-visible {
    outline: 2px solid var(--ftms-accent);
    outline-offset: 2px;
    border-radius: var(--ftms-r-xs);
}

/* Correctif : le spinner injecté par ftms.js code en dur une bordure BLANCHE,
   invisible sur un bouton secondaire clair. On suit la couleur du texte. */
.ftms-app .ftms-loading::after {
    border-color: color-mix(in srgb, currentColor 30%, transparent) !important;
    border-top-color: currentColor !important;
}

/* La barre d'état est fixée : on réserve sa hauteur pour ne pas masquer
   la dernière ligne d'une grille. */
.ftms-app { padding-bottom: var(--ftms-footer-h); }

/* ████████████████████████████████████████████████████████████████████████
   REFONTE PRODUIT — 2026-07-29
   Objectif : que l'application RESSEMBLE au produit dès l'ouverture, sans
   réécrire les Blade ni imposer de build. On restyle le balisage EXISTANT.

   Le geste structurant : gnav icônes TOUJOURS ancré (décale le contenu).
   Le panneau contexte (libellés) est un OVERLAY façon YouTube — il flotte
   au-dessus du contenu, il ne le pousse PAS. Sous 1024px : tiroir mobile.
   ████████████████████████████████████████████████████████████████████████ */

/* ── Dual-rail shell (Global Nav + Context) ─────────────────────────── */
.ftms-app .ftms-dual-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    height: 100vh;
    pointer-events: none;
}

.ftms-app .ftms-gnav,
.ftms-app .ftms-context {
    pointer-events: auto;
}

.ftms-app .ftms-gnav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--ftms-gnav-w);
    flex-shrink: 0;
    height: 100vh;
    padding: 10px 0 12px;
    background: var(--ftms-gnav);
    border-right: 1px solid var(--ftms-gnav-2);
    color: var(--ftms-gnav-text);
    z-index: 1001;
}

.ftms-app .ftms-gnav__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    width: 100%;
    padding-top: 4px;
}

/* Burger en tête du rail — un peu plus détaché des tuiles FMS/TMS. */
.ftms-app .ftms-gnav__nav > .ftms-gnav__burger {
    margin-bottom: 6px;
}

.ftms-app .ftms-gnav__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: auto;
}

.ftms-app .ftms-gnav__btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 48px;
    min-height: 44px;
    padding: 6px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ftms-gnav-text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}

.ftms-app .ftms-gnav__btn:hover {
    background: var(--ftms-gnav-2);
    color: #fff;
}

.ftms-app .ftms-gnav__btn.is-active {
    background: rgba(13, 148, 136, 0.22);
    color: #5eead4;
}

/* Étiquette FMS / TMS : blanche, grasse, détachée de l'icône (gap du bouton).
   Elle reste blanche même hors survol — c'est le repère produit du rail. */
.ftms-app .ftms-gnav__tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    color: #ffffff;
    opacity: 1;
}

/* FMS / TMS : tuiles colorées façon ClickUp — carré arrondi plein + glyphe
   blanc, assorties aux pastilles pastel du rail contexte (bleu / ambre). */
/* Tuiles de PILIER (FMS / TMS / WMS…) : sélecteur générique — un pilier
   ajouté n'a besoin QUE de sa ligne de gradient, plus d'énumérations. */
.ftms-app .ftms-gnav__btn[data-ftms-gnav]:not([data-ftms-gnav="shared"]) svg {
    width: 28px;
    height: 28px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #fff;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18);
}
.ftms-app .ftms-gnav__btn[data-ftms-gnav="fms"] svg  { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ftms-app .ftms-gnav__btn[data-ftms-gnav="ftms"] svg { background: linear-gradient(135deg, #f59e0b, #b45309); }
.ftms-app .ftms-gnav__btn[data-ftms-gnav="wms"] svg  { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
/* Pilier Personnel (RH) — même carré coloré que les autres piliers (lot Personnel). */
.ftms-app .ftms-gnav__btn[data-ftms-gnav="personnel"] svg { background: linear-gradient(135deg, #f43f5e, #be123c); }
/* Pilier Pilotage — tour de contrôle (lot Tour de contrôle), teal produit. */
.ftms-app .ftms-gnav__btn[data-ftms-gnav="pilotage"] svg { background: linear-gradient(135deg, #14b8a6, #0f766e); }
/* Pilier Achats — carré ORANGE (demande CEO 2026-08-18) : distinct de l'ambre
   TMS et de l'émeraude FAC, même dégradé que l'entête du pilier. */
.ftms-app .ftms-gnav__btn[data-ftms-gnav="achats"] svg { background: linear-gradient(135deg, #f97316, #c2410c); }
/* Pilier Facturation — carré émeraude, même dégradé que l'entête du pilier. */
.ftms-app .ftms-gnav__btn[data-ftms-gnav="facturation"] svg { background: linear-gradient(135deg, #10b981, #047857); }
/* Pilier Documentation — carré indigo (guides du produit). */
.ftms-app .ftms-gnav__btn[data-ftms-gnav="documentation"] svg { background: linear-gradient(135deg, #6366f1, #4338ca); }

/* Burger + icône de module dans l'ENTÊTE (lot Tour de contrôle) : le burger
   a quitté la gnav — il vit à gauche du titre, suivi du carré coloré du
   pilier actif (PIL teal, FMS bleu, TMS ambre, WMS violet, RH rose). */
.ftms-app .ftms-topbar-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: none;
    background: transparent; color: #4b5563; cursor: pointer;
}
.ftms-app .ftms-topbar-burger:hover { background: #f3f4f6; color: #111827; }
html.dark .ftms-app .ftms-topbar-burger { color: #9aa0a6; }
html.dark .ftms-app .ftms-topbar-burger:hover { background: #2a2b2e; color: #f3f4f6; }
/* Flèche RETOUR de l'entête (avant le burger — demande CEO 2026-08-13) :
   même gabarit que le burger, rendue seulement quand on vient d'un autre
   écran admin. L'exception svg { color: inherit } ci-dessous la couvre. */
.ftms-app .ftms-topbar-retour {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: none;
    background: transparent; color: #4b5563; cursor: pointer;
}
.ftms-app .ftms-topbar-retour:hover { background: #f3f4f6; color: #111827; }
html.dark .ftms-app .ftms-topbar-retour { color: #9aa0a6; }
html.dark .ftms-app .ftms-topbar-retour:hover { background: #2a2b2e; color: #f3f4f6; }
.ftms-app header.sticky.top-0 .ftms-topbar-retour svg { color: inherit; }
/* Le burger prend la COULEUR DU MODULE (style inline posé par l'entête) —
   or la règle générale `header.sticky.top-0 svg { color: var(--ftms-chrome-
   muted) }` grise tous les svg de l'entête et CASSE l'héritage de
   currentColor : sans cette exception plus spécifique, le burger restait
   gris quel que soit le style du bouton (bug vécu, invisible aux tests qui
   mesuraient le bouton et pas le svg). */
.ftms-app header.sticky.top-0 .ftms-topbar-burger svg { color: inherit; }
.ftms-app .ftms-topbar-module {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
}

.ftms-app .ftms-gnav__btn[data-ftms-gnav]:not([data-ftms-gnav="shared"]):hover {
    background: var(--ftms-gnav-2);
    color: #fff;
}

.ftms-app .ftms-gnav__btn[data-ftms-gnav]:not([data-ftms-gnav="shared"]).is-active {
    background: var(--ftms-gnav-2);
    color: #fff;
}
.ftms-app .ftms-gnav__btn[data-ftms-gnav]:not([data-ftms-gnav="shared"]).is-active svg {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .45);
}

/* Le SVG inline des pastilles du rail contexte se cale au centre du carré. */
.ftms-app .ftms-ico-sq svg { display: block; flex-shrink: 0; }
.ftms-app .ftms-ico-sq i   { line-height: 1; }

.ftms-app .ftms-gnav__burger.is-active {
    background: rgba(13, 148, 136, 0.28);
    color: #5eead4;
}

.ftms-app .ftms-gnav__collapse svg {
    transition: transform var(--ftms-dur-2) var(--ftms-ease);
}

.ftms-app.is-rail-collapsed .ftms-gnav__collapse svg,
.ftms-app.is-context-collapsed .ftms-gnav__collapse svg {
    transform: rotate(180deg);
}

/* Context rail — panneau blanc en OVERLAY (ne pousse jamais le contenu) */
.ftms-app .ftms-context.youtube-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: var(--ftms-gnav-w) !important;
    transform: translateX(0) !important;
    width: var(--ftms-context-w) !important;
    height: 100vh;
    z-index: 1000;
    box-shadow: 8px 0 28px rgba(15, 23, 42, .14) !important;
    border-right: 1px solid var(--ftms-context-2);
    background: var(--ftms-context) !important;
    transition: transform var(--ftms-dur-3) var(--ftms-ease),
                opacity var(--ftms-dur-2) var(--ftms-ease);
    --ftms-side: var(--ftms-context);
    --ftms-side-2: var(--ftms-context-2);
    --ftms-side-text: var(--ftms-context-text);
    --ftms-side-muted: var(--ftms-context-muted);
    --ftms-side-brand: #111827;
}

/* Désactive l'ancien hack logo ::before/::after (texte déjà dans le markup). */
.ftms-app .ftms-context > div:first-child a::before,
.ftms-app .ftms-context > div:first-child a::after {
    content: none !important;
    display: none !important;
}

/* Mobile / tablette : gnav toujours visible ; context = tiroir overlay */
@media (max-width: 1023.98px) {
    .ftms-app .ftms-dual-rail {
        width: var(--ftms-gnav-w);
        overflow: visible;
    }

    .ftms-app .ftms-context.youtube-sidebar {
        position: fixed !important;
        top: 0;
        left: var(--ftms-gnav-w) !important;
        width: min(280px, 85vw) !important;
        transform: translateX(-110%) !important;
        box-shadow: 8px 0 24px rgba(0, 0, 0, .18) !important;
        z-index: 1000;
    }

    .ftms-app .ftms-context.youtube-sidebar.active {
        transform: translateX(0) !important;
    }

    .ftms-app .main-content-area,
    .ftms-app header.sticky.top-0 {
        margin-left: var(--ftms-gnav-w) !important;
        /* width:auto laissait le max-w-full (100 % du viewport) s'appliquer :
           marge 56px + largeur pleine = 56px de contenu coupés à droite. */
        width: calc(100% - var(--ftms-gnav-w)) !important;
        max-width: calc(100% - var(--ftms-gnav-w)) !important;
        min-width: 0;
    }

    .ftms-app .youtube-sidebar-backdrop {
        left: var(--ftms-gnav-w);
    }
}

@media (min-width: 1024px) {
    /* Le dual-rail ne réserve QUE le gnav — le contexte flotte par-dessus. */
    .ftms-app .ftms-dual-rail,
    .ftms-app.is-rail-collapsed .ftms-dual-rail,
    .ftms-app.is-context-collapsed .ftms-dual-rail,
    html.is-rail-collapsed .ftms-dual-rail {
        width: var(--ftms-gnav-w);
        overflow: visible;
    }

    /* Contenu toujours calé sur le gnav — plus de push quand le menu s'ouvre.
       width:auto laissait le max-w-full (100 % du viewport) s'appliquer :
       marge 56px + largeur pleine = 4e tuile KPI, boutons et colonne actions
       coupés à droite sur TOUTES les pages. */
    .ftms-app .main-content-area,
    .ftms-app.is-rail-collapsed .main-content-area,
    .ftms-app.is-context-collapsed .main-content-area,
    html.is-rail-collapsed .main-content-area {
        margin-left: var(--ftms-gnav-w) !important;
        width: calc(100% - var(--ftms-gnav-w)) !important;
        max-width: calc(100% - var(--ftms-gnav-w)) !important;
        min-width: 0;
    }

    .ftms-app header.sticky.top-0,
    .ftms-app.is-rail-collapsed header.sticky.top-0,
    .ftms-app.is-context-collapsed header.sticky.top-0,
    html.is-rail-collapsed header.sticky.top-0 {
        margin-left: var(--ftms-gnav-w) !important;
        padding-left: var(--ftms-s-4) !important;
    }

    /* Voile léger sur le contenu quand le panneau est ouvert (clic = ferme). */
    .ftms-app .youtube-sidebar-backdrop {
        display: block !important;
        left: var(--ftms-gnav-w);
        background: rgba(15, 23, 42, 0.28);
        z-index: 999;
    }

    .ftms-app.is-rail-collapsed .youtube-sidebar-backdrop,
    .ftms-app.is-context-collapsed .youtube-sidebar-backdrop,
    html.is-rail-collapsed .youtube-sidebar-backdrop {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .ftms-app:not(.is-rail-collapsed):not(.is-context-collapsed) .youtube-sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Repli : glisse sous le gnav (overlay, pas width:0 qui cassait le slide). */
    .ftms-app.is-rail-collapsed .ftms-context.youtube-sidebar,
    .ftms-app.is-context-collapsed .ftms-context.youtube-sidebar,
    html.is-rail-collapsed .ftms-context.youtube-sidebar {
        transform: translateX(-105%) !important;
        opacity: 0;
        pointer-events: none;
        box-shadow: none !important;
    }
}

/* Boot : tant que <body> porte `ftms-boot`, aucune transition. Tout écart
   résiduel entre l'état rendu par le serveur et l'état restauré par JS
   (accordéons depuis localStorage) est corrigé instantanément, donc invisible,
   au lieu d'être joué en animation. public/ftms.js retire la classe au 1er paint. */
.ftms-boot .ftms-context.youtube-sidebar,
.ftms-boot .main-content-area,
.ftms-boot header.sticky.top-0,
.ftms-boot .ftms-rail__sub,
.ftms-boot .ftms-dual-rail {
    transition: none !important;
}

/* Header : FMS/TMS vivent dans le gnav — on retire le strip redondant */
.ftms-app .quick-access-bar { display: none !important; }
.ftms-app .ftms-active-pills { display: none !important; }


/* ── Entête : plat, sans ombre, aligné sur la grille ─────────────────── */
.ftms-app header.sticky.top-0 {
    height: var(--ftms-header-h);
    box-shadow: none !important;
    border-bottom: 1px solid var(--ftms-chrome-border) !important;
}

/* ── Boutons : le produit est teal, pas indigo ───────────────────────── */
.ftms-app .primary-button {
    background: var(--ftms-btn-bg) !important;   /* jeton dédié : en sombre, accent-text est une LAVANDE CLAIRE illisible sous du blanc */
    background-image: none !important;
    border-color: var(--ftms-accent-text) !important;
    border-radius: var(--ftms-r-sm) !important;
    box-shadow: none !important;
    font-weight: 600;
    transform: none !important;
    transition: background var(--ftms-dur-1) var(--ftms-ease) !important;
}

.ftms-app .primary-button:hover {
    background: #115e59 !important;
    background-image: none !important;
    transform: none !important;
}

.ftms-app .secondary-button {
    border-width: 1px !important;
    border-color: var(--ftms-chrome-border) !important;
    color: var(--ftms-chrome-text) !important;
    border-radius: var(--ftms-r-sm) !important;
    font-weight: 500;
    transition: background var(--ftms-dur-1) var(--ftms-ease),
                border-color var(--ftms-dur-1) var(--ftms-ease),
                color var(--ftms-dur-1) var(--ftms-ease) !important;
}

.ftms-app .secondary-button:hover {
    background: var(--ftms-chrome-2) !important;
    border-color: var(--ftms-accent) !important;
    color: var(--ftms-accent-text) !important;
}

/* ── Grille : conteneur carte, entête discret, lignes aérées ─────────── */
/* Barre d'outils + tableau = UNE seule carte.
   Avant : la barre arrondissait ses coins hauts à 8 px (rounded-t-lg de
   Tailwind) et le tableau arrondissait SES QUATRE coins à 12 px avec sa
   propre bordure — deux cartes empilées, double filet à la jointure et
   rayons dépareillés. La barre coiffe désormais le tableau. */
.ftms-app .ftms-dg-table {
    border-top: 0 !important;
    border-radius: 0 0 var(--ftms-r-lg) var(--ftms-r-lg) !important;
    border-color: var(--ftms-chrome-border) !important;
    box-shadow: var(--ftms-e-1) !important;
}
.ftms-app .ftms-dg-table .ftms-dg-row:last-child {
    border-bottom-left-radius: calc(var(--ftms-r-lg) - 1px);
    border-bottom-right-radius: calc(var(--ftms-r-lg) - 1px);
}

.ftms-app .ftms-dg-toolbar {
    border-color: var(--ftms-chrome-border) !important;
    background: var(--ftms-chrome) !important;
    border-radius: var(--ftms-r-lg) var(--ftms-r-lg) 0 0 !important;
    box-shadow: var(--ftms-e-1);
}

.ftms-app .ftms-dg-head {
    background: var(--ftms-chrome) !important;
    color: var(--ftms-chrome-muted) !important;
    border-bottom-color: var(--ftms-chrome-border) !important;
    letter-spacing: .06em !important;
    min-height: var(--ftms-row-h) !important;
}

/* En-tête aligné sur la densité des lignes (48 px). Deux lignes de libellé
   tiennent encore ; `min-width: 0` laisse compresser les pistes. */
.ftms-app .ftms-dg-head > *,
.ftms-app .ftms-dg-row > * { min-width: 0; }
.ftms-app .ftms-dg-head {
    height: auto !important;
    min-height: 52px !important;
    align-items: center !important;
    padding-block: 10px !important;
    padding-inline: var(--ftms-cell-px) !important;
}
.ftms-app .ftms-dg-head p {
    line-height: 1.25;
    overflow: hidden;
}

/* Cellules : plus de break-words agressif (noms véhicule/chauffeur
   s'écrasaient verticalement). Ellipsis + scroll horizontal du tableau. */
.ftms-app .ftms-dg-row > p,
.ftms-app .ftms-dg-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    align-self: center !important;
    line-height: 1.35;
    padding-inline: 2px;
}
.ftms-app .ftms-dg-row > p .ftms-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    white-space: normal;
}
.ftms-app .ftms-dg-row > p .ftms-cell-strong,
.ftms-app .ftms-dg-row > p .ftms-cell-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ftms-app .ftms-dg-row > p .ftms-cell-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ftms-t-caption);
    color: var(--ftms-chrome-muted);
}
/* Badges / chips dans une cellule : ne pas forcer nowrap sur le wrapper. */
.ftms-app .ftms-dg-row > p:has(.ftms-status-chip, .ftms-chip-neutre, .ftms-badge) {
    white-space: normal;
}

.ftms-app .ftms-dg-row {
    border-bottom-color: var(--ftms-chrome-border) !important;
    min-height: var(--ftms-row-h) !important;
    padding-block: 10px !important;
    padding-inline: var(--ftms-cell-px) !important;
    align-items: center !important;
    column-gap: 12px !important;
}

.ftms-app .ftms-dg-row:hover { background: var(--ftms-accent-soft) !important; }

.ftms-app .ftms-dg-row.is-selected,
.ftms-app .ftms-dg-row:has(input[data-ftms-select]:checked) {
    background: var(--ftms-accent-soft) !important;
    box-shadow: inset 3px 0 0 var(--ftms-accent);
}

/* Masquer la barre mass-action Krayin : la barre Ftms.bulkbar la remplace. */
.ftms-app .ftms-dg-massaction { display: none !important; }

/* (bloc body.is-compact dédoublonné — la définition vit en tête de fichier) */

/* Barre d'outils de grille : alignée, sans fioriture. */
.ftms-app .toolbarLeft,
.ftms-app .toolbarRight { gap: var(--ftms-s-2) !important; }

/* ── Cartes et panneaux : un seul rayon, une seule bordure ───────────── */
.ftms-app .box-shadow,
.ftms-app [class*="rounded-lg"].border.bg-white,
.ftms-app [class*="rounded-lg"].border.dark\:bg-gray-900 {
    border-radius: var(--ftms-r-lg);
    border-color: var(--ftms-chrome-border);
    box-shadow: var(--ftms-e-1);
}

/* ── Onglets de domaine : soulignement accent, pas de bleu Krayin ────── */
.ftms-app [class*="border-teal-500"],
.ftms-app [class*="border-b-2"][class*="text-teal"] {
    border-color: var(--ftms-accent) !important;
    color: var(--ftms-accent-text) !important;
}

/* ── Champs de formulaire : cohérents avec le rail et l'accent ───────── */
.ftms-app input[type="text"],
.ftms-app input[type="search"],
.ftms-app input[type="number"],
.ftms-app input[type="date"],
.ftms-app input[type="email"],
.ftms-app select,
.ftms-app textarea {
    border-radius: var(--ftms-r-sm) !important;
    border-color: var(--ftms-chrome-border) !important;
    font-size: var(--ftms-t-body);
}

.ftms-app input:focus,
.ftms-app select:focus,
.ftms-app textarea:focus {
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft) !important;
    outline: none !important;
}

/* ── Densité générale : un outil d'exploitation respire moins ────────── */
.ftms-app .main-content-area { font-size: var(--ftms-t-body); }



/* ████ SKIN produit (densité / rail blanc façon outil SaaS) ████ */

.ftms-app { background: var(--ftms-page) !important; }
.ftms-app .main-content-area { background: var(--ftms-page); }

/* Toute action presse légèrement : le « toucher » ClickUp. */
.ftms-app button:not(:disabled):active,
.ftms-app .primary-button:active,
.ftms-app .secondary-button:active { transform: scale(.97); }

/* CTA en dégradé — les deux bornes passent AA pour du texte blanc. */
.ftms-app .ftms-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ftms-cta-grad);
    color: #fff; border: none; cursor: pointer;
    border-radius: var(--ftms-r-md);
    padding: 7px 14px; font-size: var(--ftms-t-body); font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 118, 110, .3);
    transition: filter var(--ftms-dur-1) var(--ftms-ease),
                box-shadow var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-cta:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(15, 118, 110, .35); }

/* Cartes : lift discret au survol quand elles sont cliquables. */
.ftms-app a.ftms-tile { will-change: transform; }
.ftms-app a.ftms-tile:hover { transform: translateY(-2px); box-shadow: var(--ftms-e-2); }

/* Pastilles d'icônes colorées — la signature « coloré mais blanc ». */
.ftms-app .ftms-ico-sq {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 8px; font-size: 15px;
}
.ftms-app .ftms-ico--violet,
.ftms-app .ftms-ico--teal   { background: #ccfbf1; color: #0f766e; }
.ftms-app .ftms-ico--blue   { background: #dbeafe; color: #2563eb; }
.ftms-app .ftms-ico--pink   { background: #fce7f3; color: #db2777; }
.ftms-app .ftms-ico--amber  { background: #fef3c7; color: #b45309; }
.ftms-app .ftms-ico--green  { background: #e0e7ff; color: #4338ca; }
.ftms-app .ftms-ico--gray   { background: #f3f4f6; color: #4b5563; }
/* Pas réellement violets / émeraude — `--violet` et `--green` ci-dessus sont
   respectivement du teal et de l'indigo (noms hérités). Ces deux-là existent
   pour que le carré d'une tuile corresponde à son filet de tonalité. */
.ftms-app .ftms-ico--purple  { background: #f5f3ff; color: #6d28d9; }
.ftms-app .ftms-ico--emerald { background: #ecfdf5; color: #047857; }
/* Pilier Documentation — VRAI indigo nommé (le --green ci-dessus est un indigo hérité). */
.ftms-app .ftms-ico--indigo  { background: #e0e7ff; color: #4338ca; }
/* Pilier Personnel (RH) — lot Personnel. */
.ftms-app .ftms-ico--rose    { background: #ffe4e6; color: #be123c; }
/* Pilier Achats — VRAI orange (demande CEO 2026-08-18) : distinct de l'ambre
   TMS, de l'émeraude FAC et du teal Pilotage. */
.ftms-app .ftms-ico--orange  { background: #ffedd5; color: #c2410c; }
html.dark .ftms-app .ftms-ico--violet,
html.dark .ftms-app .ftms-ico--teal   { background: #042f2e; color: #5eead4; }
html.dark .ftms-app .ftms-ico--blue   { background: #172554; color: #93c5fd; }
html.dark .ftms-app .ftms-ico--pink   { background: #500724; color: #f9a8d4; }
html.dark .ftms-app .ftms-ico--amber  { background: #451a03; color: #fcd34d; }
html.dark .ftms-app .ftms-ico--green  { background: #1e1b4b; color: #a5b4fc; }
html.dark .ftms-app .ftms-ico--gray   { background: #2a2b2e; color: #9aa0a6; }
html.dark .ftms-app .ftms-ico--purple  { background: #2e1065; color: #c4b5fd; }
html.dark .ftms-app .ftms-ico--emerald { background: #022c22; color: #6ee7b7; }
html.dark .ftms-app .ftms-ico--indigo  { background: #1e1b4b; color: #a5b4fc; }
html.dark .ftms-app .ftms-ico--rose    { background: #4c0519; color: #fda4af; }
html.dark .ftms-app .ftms-ico--orange  { background: #431407; color: #fdba74; }

/* Toasts : pilule sombre ClickUp — texte blanc, liens accentués.
   Les couleurs de sévérité passent aux pas CLAIRS (lisibles sur sombre). */
.ftms-toast,
html.dark .ftms-toast { background: #1e1f21; border-color: #3a3b3e; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.ftms-toast__title, .ftms-toast__msg { color: #f3f4f6; }
.ftms-toast__detail { color: #9aa0a6; }
.ftms-toast__close { color: #9aa0a6; }
.ftms-toast__close:hover { color: #fff; }
.ftms-toast--info      { --ftms-toast-fg: #7dd3fc; }
.ftms-toast--succes    { --ftms-toast-fg: #6ee7b7; }
.ftms-toast--attention { --ftms-toast-fg: #fcd34d; }
.ftms-toast--expire    { --ftms-toast-fg: #fca5a5; }
.ftms-toast--bloquant  { --ftms-toast-fg: #fca5a5; }

/* Modales & tiroir : rayon 16, flou d'arrière-plan, apparition en échelle. */
.ftms-app [id$="-modal"] > div,
.ftms-modal__panel,
.ftms-confirm-panel { border-radius: var(--ftms-r-xl) !important; }

.ftms-backdrop-blur { backdrop-filter: blur(4px); background: rgba(15, 18, 25, .45) !important; }

@keyframes ftms-pop-in {
    from { opacity: 0; transform: scale(.96) translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.ftms-pop-in { animation: ftms-pop-in var(--ftms-dur-2) var(--ftms-ease); }

.ftms-drawer {
    border-top-left-radius: var(--ftms-r-xl);
    border-bottom-left-radius: var(--ftms-r-xl);
    box-shadow: var(--ftms-e-4);
    transition: transform var(--ftms-dur-3) var(--ftms-ease);
}
.ftms-drawer__head {
    border-top: 3px solid var(--ftms-accent-hover);
    border-top-left-radius: var(--ftms-r-xl);
}
.ftms-drawer-overlay {
    transition: opacity var(--ftms-dur-2) var(--ftms-ease);
}

/* Onglets pilules (remplacent le soulignement Krayin) */
.ftms-app .ftms-pilltabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: none !important; padding: 4px; background: var(--ftms-chrome-2); border-radius: var(--ftms-r-lg); width: fit-content; max-width: 100%; }
.ftms-app .ftms-pilltab {
    padding: 6px 12px; border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-cell); font-weight: 600; white-space: nowrap;
    color: var(--ftms-chrome-muted); border-bottom: none !important;
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-pilltab:hover { color: var(--ftms-chrome-text); background: rgba(255,255,255,.7); }
html.dark .ftms-app .ftms-pilltab:hover { background: rgba(255,255,255,.06); }
.ftms-app .ftms-pilltab.is-active { background: var(--ftms-chrome); color: var(--ftms-accent-text); box-shadow: var(--ftms-e-1); }


/* ── Espace de travail (tête du rail) ─────────────────────────────────── */
.ftms-app .ftms-workspace__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--ftms-cta-grad);
    color: #fff; font-weight: 800; font-size: 15px;
    box-shadow: 0 1px 3px rgba(15, 118, 110, .35);
}
.ftms-app .ftms-workspace__name {
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    color: var(--ftms-side-brand);
    white-space: nowrap;
}
.ftms-app.is-rail-collapsed .ftms-rail-collapse svg { transform: rotate(180deg); }
.ftms-app .ftms-rail-collapse svg { transition: transform var(--ftms-dur-2) var(--ftms-ease); }


/* ── Entête : pilule de recherche + menu « + Nouveau » ────────────────── */
.ftms-app .ftms-search-pill { border-radius: var(--ftms-r-md) !important; }
.ftms-app .ftms-search-pill:focus {
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft) !important;
}

.ftms-app .ftms-kbd {
    padding: 2px 6px; border-radius: 5px;
    border: 1px solid var(--ftms-chrome-border);
    background: var(--ftms-chrome);
    font-family: inherit; font-size: 11px; font-weight: 600;
    color: var(--ftms-chrome-muted);
}
.ftms-app .ftms-kbd:hover { color: var(--ftms-accent-text); border-color: var(--ftms-accent); }

/* Bouton « recherche avancée », collé au bord droit du champ d'entête. */
.ftms-app .ftms-search-adv {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 0; border-radius: var(--ftms-r-sm);
    background: transparent; cursor: pointer;
    color: var(--ftms-chrome-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-search-adv:hover {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
}

.ftms-app .ftms-new-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; margin: 0 6px; border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-body); font-weight: 500;
    color: var(--ftms-chrome-text);
    transition: background var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-new-item:hover { background: var(--ftms-accent-soft); color: var(--ftms-accent-text); }

/* Avatar : anneau accent au survol (signature ClickUp) */
.ftms-app header .rounded-full img,
.ftms-app header button img.rounded-full { transition: box-shadow var(--ftms-dur-1) var(--ftms-ease); }
.ftms-app header .rounded-full:hover img,
.ftms-app header button:hover img.rounded-full { box-shadow: 0 0 0 2px var(--ftms-accent); }

/* ── Entête de grille réellement collant ──────────────────────────────
   Le markup Admin pose `overflow-hidden` (Tailwind) sur .ftms-dg-table :
   sans override, sticky n'a pas de scrollport. On force un scroll interne
   borné ; la pagination reste HORS du conteneur. Sur listes courtes,
   max-height ne change rien. */
@media (min-width: 1024px) {
    .ftms-app .ftms-dg-table {
        max-height: calc(100vh - var(--ftms-header-h) - var(--ftms-footer-h) - 220px) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }
    .ftms-app .ftms-dg-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: var(--ftms-chrome) !important;
    }
}

/* [hidden] perd face à display:grid/flex (.ftms-form, .ftms-cta, drawer). */
.ftms-app .ftms-cta[hidden],
.ftms-app .ftms-form[hidden],
.ftms-app .ftms-drawer[hidden],
.ftms-app .ftms-drawer-overlay[hidden],
.ftms-app .ftms-btn-ghost[hidden],
.ftms-app .primary-button[hidden],
.ftms-app .secondary-button[hidden],
.ftms-form[hidden],
.ftms-cta[hidden],
.ftms-drawer[hidden],
.ftms-drawer-overlay[hidden] {
    display: none !important;
}

/* CTA = aussi les <a class="primary-button"> des en-têtes TMS. */
.ftms-app a.primary-button,
.ftms-app button.primary-button {
    background: var(--ftms-cta-grad) !important;
    background-color: #0f766e !important;
    color: #fff !important;
    border-color: #0f766e !important;
}
.ftms-app a.primary-button:hover,
.ftms-app button.primary-button:hover {
    background: linear-gradient(135deg, #115e59 0%, #0f766e 100%) !important;
    filter: brightness(1.05);
}


/* ════ RAIL PRODUIT (balisage à nous — sidebar/youtube.blade.php) ════
   UNE surface (--ftms-side) du haut en bas : c'est la correction du
   « deux sidebars de couleurs différentes » (l'entête Tailwind et le
   corps jeton avaient des fonds distincts, surtout en sombre).        */
.ftms-rail {
    display: flex;
    flex-direction: column;
    background: var(--ftms-side);
    border-right: 1px solid var(--ftms-side-2);
}

.ftms-rail__head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--ftms-header-h); flex-shrink: 0;
    padding: 0 var(--ftms-s-3) 0 var(--ftms-s-4);
    border-bottom: 1px solid var(--ftms-side-2);
    background: var(--ftms-side); /* MÊME surface que le corps, à dessein */
}

.ftms-rail__iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--ftms-r-sm);
    border: none; background: none; cursor: pointer;
    color: var(--ftms-side-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-rail__iconbtn:hover { background: var(--ftms-side-2); color: var(--ftms-side-brand); }

.ftms-rail__nav { flex: 1; overflow-y: auto; padding: var(--ftms-s-2) 0 var(--ftms-s-4); }

/* Intertitre de section : petit filet accent devant le libellé — les trois
   familles (Flotte / Transport / Système) se repèrent au premier balayage. */
.ftms-rail__section {
    display: flex; align-items: center; gap: 8px;
    margin: var(--ftms-s-4) var(--ftms-s-4) var(--ftms-s-2);
    padding-top: var(--ftms-s-3);
    border-top: 1px solid var(--ftms-side-2);
    font-size: 10.5px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ftms-side-muted);
}
.ftms-rail__section::before {
    content: ""; width: 14px; height: 3px; border-radius: 2px;
    background: var(--ftms-accent);
    opacity: .8;
}
.ftms-rail__section.is-first { margin-top: var(--ftms-s-1); padding-top: 0; border-top: none; }

/* Rangée : 32px, pilule arrondie, carré pastel, chevron au survol. */
.ftms-rail__row {
    display: flex; align-items: center; gap: var(--ftms-s-3);
    width: calc(100% - 2 * var(--ftms-s-2));
    margin: 2px var(--ftms-s-2);
    padding: 5px var(--ftms-s-2) 5px var(--ftms-s-3);
    min-height: 38px;
    border: none; background: none; cursor: pointer; text-align: left;
    border-radius: var(--ftms-r-md);
    font-size: var(--ftms-t-body); font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ftms-side-text);
    position: relative;
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-rail__row:hover { background: var(--ftms-side-2); color: var(--ftms-side-brand); }

.ftms-rail__row.is-active {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
    font-weight: 700;
}
.ftms-rail__row.is-active::before {
    content: ""; position: absolute; inset-block: 5px; left: 0; width: 3px; border-radius: 0 2px 2px 0;
    background: var(--ftms-accent);
}

.ftms-rail__label {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
}

/* Chevron TOUJOURS visible (opacité douce) : invisible jusqu'au survol,
   personne ne devinait que la rangée se dépliait — les 12 domaines FMS
   restaient enterrés sous « Gestion de parc ». */
.ftms-rail__chevron {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--ftms-side-muted);
    opacity: .5;
    transition: opacity var(--ftms-dur-1) var(--ftms-ease), transform var(--ftms-dur-2) var(--ftms-ease);
}
.ftms-rail__row:hover .ftms-rail__chevron,
.ftms-rail__block.is-open .ftms-rail__chevron { opacity: 1; }
.ftms-rail__block.is-open .ftms-rail__chevron { transform: rotate(180deg); }

/* Panneau replié : forcer tous les sous-menus fermés (même si .is-open serveur). */
.ftms-app.is-rail-collapsed .ftms-rail__block.is-open .ftms-rail__sub,
.ftms-app.is-context-collapsed .ftms-rail__block.is-open .ftms-rail__sub {
    max-height: 0 !important;
}

/* Accordéon : fermé par défaut, déplié par .is-open — max-height animée. */
.ftms-rail__sub {
    max-height: 0; overflow: hidden;
    margin-left: calc(var(--ftms-s-4) + 14px);
    padding-left: var(--ftms-s-2);
    border-left: 1px solid var(--ftms-side-2);
    transition: max-height var(--ftms-dur-3) var(--ftms-ease);
}
.ftms-rail__block.is-open .ftms-rail__sub { max-height: 1200px; }

/* Sous-menus MODERNISÉS : texte lisible (couleur pleine, pas « muted »),
   icône par domaine dans un petit carré, actif = pilule accent + barre. */
.ftms-rail__subrow {
    display: flex; align-items: center; gap: 10px;
    padding: 6px var(--ftms-s-2);
    margin: 2px var(--ftms-s-2) 2px 0;
    min-height: 34px;
    border-radius: var(--ftms-r-md);
    font-size: 13px; font-weight: 500;
    letter-spacing: -.005em;
    color: var(--ftms-side-text);
    position: relative;
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-rail__subrow:hover { background: var(--ftms-side-2); color: var(--ftms-side-brand); }
.ftms-rail__subrow.is-active {
    background: var(--ftms-accent-soft);
    color: var(--ftms-accent-text);
    font-weight: 700;
}
.ftms-rail__subrow.is-active::before {
    content: ""; position: absolute; inset-block: 6px; left: -1px; width: 2px; border-radius: 2px;
    background: var(--ftms-accent);
}
.ftms-rail__subrow.is-verrouille { opacity: .55; }

.ftms-rail__sublabel {
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.25;
}

/* Carré d'icône des domaines : neutre au repos, accent quand actif. */
.ftms-rail__subico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 6px;
    background: var(--ftms-side-2);
    color: var(--ftms-side-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-rail__subrow:hover .ftms-rail__subico { color: var(--ftms-side-brand); }
.ftms-rail__subrow.is-active .ftms-rail__subico {
    background: var(--ftms-accent);
    color: #ffffff;
}
.ftms-rail__subico svg { display: block; }

/* Point hérité — encore employé par les sous-menus SANS domaine (TMS,
   Administration) : légèrement grossi pour rester perceptible. */
.ftms-rail__dot {
    width: 6px; height: 6px; border-radius: 9999px; flex-shrink: 0;
    margin-inline: 9px;
    background: var(--ftms-side-muted);
    opacity: .45;
}
.ftms-rail__subrow.is-active .ftms-rail__dot { background: var(--ftms-accent); opacity: 1; }

.ftms-rail__divider { margin: var(--ftms-s-2) var(--ftms-s-3); border: none; border-top: 1px solid var(--ftms-side-2); }

.ftms-rail__subsection {
    padding: var(--ftms-s-2) var(--ftms-s-2) 2px;
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ftms-side-muted);
}
.ftms-rail__subsection.has-rule { margin-top: var(--ftms-s-1); padding-top: var(--ftms-s-2); border-top: 1px solid var(--ftms-side-2); }

/* Panneau « Personnaliser » des dashboards de module : la garde [hidden]
   DOIT vivre ici — une balise <style> inline est supprimée par la
   compilation Vue du layout admin (piège n°1 + clonage Vue). */
.ftms-app #ftms-dash-perso-module[hidden] { display: none !important; }

/* ════ Onglets à DEUX NIVEAUX (tab_groups) — catégories + sous-barre ════
   La garde [hidden] est OBLIGATOIRE : .ftms-pilltabs porte la classe
   utilitaire `flex` (display:flex), qui battrait le [hidden] UA (piège n°1). */
.ftms-tabwrap { display: flex; flex-direction: column; gap: 8px; }
.ftms-tabwrap [hidden] { display: none !important; }

.ftms-tabcats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ftms-tabcat {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--ftms-line, #e5e7eb);
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: -.005em;
    color: var(--ftms-ink-2, #4b5563);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease), border-color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-tabcat:hover { border-color: var(--ftms-accent, #0d9488); color: var(--ftms-accent-text, #0f766e); }
.ftms-tabcat.is-active {
    background: var(--ftms-accent-text, #0f766e);
    border-color: var(--ftms-accent-text, #0f766e);
    color: #ffffff;
}

html.dark .ftms-app .ftms-tabcat { border-color: #374151; color: #d1d5db; }
html.dark .ftms-app .ftms-tabcat:hover { border-color: var(--ftms-accent, #0d9488); color: #5eead4; }
html.dark .ftms-app .ftms-tabcat.is-active { background: var(--ftms-accent-text, #0f766e); border-color: var(--ftms-accent-text, #0f766e); color: #ffffff; }

/* ════ PHASE B — Grille & filtres (skin produit, balisage existant) ════ */

/* Barre d'outils de grille : rangée 40px, contrôles pilules homogènes. */
.ftms-app .ftms-dg-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ftms-s-2);
    /* Le padding horizontal DOIT valoir celui des lignes (px-4 = 16 px) :
       à 0, la recherche et la pagination étaient décalées de 16 px vers la
       gauche par rapport à la première colonne — la barre semblait posée
       à côté de la grille plutôt que dedans. */
    padding: var(--ftms-s-3) var(--ftms-s-4);
}
.ftms-app .toolbarLeft { gap: var(--ftms-s-2) !important; }
.ftms-app .toolbarRight { gap: var(--ftms-s-2) !important; }

/* Tous les contrôles de la barre : même hauteur, même rayon, même bordure. */
.ftms-app .ftms-dg-toolbar button:not(.primary-button):not(.ftms-cta),
.ftms-app .ftms-dg-toolbar select,
.ftms-app .ftms-dg-toolbar .secondary-button {
    height: 32px;
    padding: 0 var(--ftms-s-3) !important;
    border-radius: var(--ftms-r-md) !important;
    border: 1px solid var(--ftms-chrome-border) !important;
    background: var(--ftms-chrome) !important;
    color: var(--ftms-chrome-text) !important;
    font-size: var(--ftms-t-cell) !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: border-color var(--ftms-dur-1) var(--ftms-ease),
                background var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-dg-toolbar button:not(.primary-button):hover,
.ftms-app .ftms-dg-toolbar .secondary-button:hover {
    border-color: var(--ftms-accent) !important;
    color: var(--ftms-accent-text) !important;
    background: var(--ftms-accent-soft) !important;
}

/* Recherche de grille : pilule, loupe intégrée, focus accent. */
.ftms-app .ftms-dg-toolbar input[type="search"],
.ftms-app .ftms-dg-toolbar input[type="text"] {
    height: 32px;
    border-radius: var(--ftms-r-md) !important;
    border-color: var(--ftms-chrome-border) !important;
    background: var(--ftms-chrome-2) !important;
    font-size: var(--ftms-t-cell) !important;
}
.ftms-app .ftms-dg-toolbar input:focus {
    background: var(--ftms-chrome) !important;
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft) !important;
}

/* Panneau latéral de filtres (feuille Vue 350px, hook stable du thème). */
.ftms-app div[class*="z-[10003]"][style*="350px"] {
    border-top-left-radius: var(--ftms-r-xl);
    border-bottom-left-radius: var(--ftms-r-xl);
    box-shadow: var(--ftms-e-4) !important;
}
.ftms-app div[class*="z-[10003]"][style*="350px"] input,
.ftms-app div[class*="z-[10003]"][style*="350px"] select {
    border-radius: var(--ftms-r-sm) !important;
}
.ftms-app div[class*="z-[10003]"][style*="350px"] input:focus,
.ftms-app div[class*="z-[10003]"][style*="350px"] select:focus {
    border-color: var(--ftms-accent) !important;
    box-shadow: 0 0 0 3px var(--ftms-accent-soft) !important;
}

/* Pagination : pilules, numéro courant accentué. */
.ftms-app .ftms-dg-pagination { padding: var(--ftms-s-2) 0; font-variant-numeric: tabular-nums; }
.ftms-app .ftms-dg-pagination button,
.ftms-app .ftms-dg-pagination a {
    min-width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ftms-r-sm);
    font-size: var(--ftms-t-cell);
    color: var(--ftms-chrome-muted);
    transition: background var(--ftms-dur-1) var(--ftms-ease), color var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-app .ftms-dg-pagination button:hover,
.ftms-app .ftms-dg-pagination a:hover { background: var(--ftms-accent-soft); color: var(--ftms-accent-text); }

/* Table : le conteneur carte respire, l'entête se tait, la ligne parle.
   Rayon BAS uniquement — le haut est coiffé par .ftms-dg-toolbar (cf. plus
   haut). Cette règle, plus tardive et de même spécificité, écrasait sinon
   le rayon défini là-bas et réintroduisait les coins hauts arrondis. */
.ftms-app .ftms-dg-table { border-radius: 0 0 var(--ftms-r-lg) var(--ftms-r-lg) !important; }
.ftms-app .ftms-dg-head {
    font-size: 11px !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    color: var(--ftms-chrome-muted) !important;
    background: var(--ftms-chrome) !important;
}
.ftms-app .ftms-dg-row { transition: background var(--ftms-dur-1) var(--ftms-ease); }

/* Barre d'actions de masse (Vue) : alignée sur la pilule sombre produit. */
.ftms-app .ftms-dg-massaction > div > div {
    border-radius: var(--ftms-r-full) !important;
    box-shadow: var(--ftms-e-4) !important;
}

/* ── Utilitaires maison anti-vert (remplacent les emerald des vues) ────
   Variables → clair/sombre automatiques, aucun build Tailwind requis.  */
.ftms-app .ftms-bg-accent { background: var(--ftms-btn-bg) !important; color: #fff !important; }
.ftms-app .ftms-bg-accent:hover { background: var(--ftms-btn-bg-hover) !important; }
.ftms-app .ftms-txt-accent { color: var(--ftms-accent-text) !important; }
.ftms-app .ftms-bg-accent-soft { background: var(--ftms-accent-soft) !important; }
.ftms-app .ftms-bd-accent-soft { border-color: #ddd6fe !important; }
html.dark .ftms-app .ftms-bd-accent-soft { border-color: #5b21b6 !important; }

/* ══ Assistant « Nouveau véhicule » (3 étapes) ═════════════════════════
   Réplique du parcours du prototype LAAS FMS. Tout est exprimé avec les
   jetons produit : la modale doit se lire comme le reste de la charte.  */
.ftms-vw { position: fixed; inset: 0; z-index: 10090; display: flex; align-items: center; justify-content: center; padding: var(--ftms-s-5); }
.ftms-vw[hidden] { display: none; }
.ftms-vw__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.ftms-vw__panel {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: 1040px; max-height: 92vh;
    background: var(--ftms-chrome); border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-xl); box-shadow: var(--ftms-e-4); overflow: hidden;
}
html.dark .ftms-vw__panel { background: #0f172a; border-color: #334155; }

.ftms-vw__head { display: flex; align-items: flex-start; gap: var(--ftms-s-3); padding: var(--ftms-s-4) var(--ftms-s-5); border-bottom: 1px solid var(--ftms-chrome-border); }
html.dark .ftms-vw__head { border-bottom-color: #334155; }
.ftms-vw__title { margin: 0; font-size: var(--ftms-t-title); font-weight: 700; color: var(--ftms-chrome-text); }
html.dark .ftms-vw__title { color: #f1f5f9; }
.ftms-vw__step { margin: 2px 0 0; font-size: var(--ftms-t-cell); color: var(--ftms-chrome-muted); }
.ftms-vw__x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: var(--ftms-r-sm); background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--ftms-chrome-muted); }
.ftms-vw__x:hover { background: var(--ftms-chrome-2); color: var(--ftms-chrome-text); }

.ftms-vw__body { flex: 1; overflow-y: auto; padding: var(--ftms-s-5); }
.ftms-vw__lead { border-left: 3px solid var(--ftms-accent); padding-left: var(--ftms-s-3); margin-bottom: var(--ftms-s-5); }
.ftms-vw__lead strong { display: block; font-size: var(--ftms-t-body); color: var(--ftms-chrome-text); }
html.dark .ftms-vw__lead strong { color: #f1f5f9; }
.ftms-vw__lead span { font-size: var(--ftms-t-cell); color: var(--ftms-chrome-muted); }

/* Étape 1 — familles + cartes de type */
.ftms-vw__group { display: flex; align-items: center; gap: var(--ftms-s-2); margin: var(--ftms-s-5) 0 var(--ftms-s-2); }
.ftms-vw__group:first-of-type { margin-top: 0; }
.ftms-vw__group-label { font-size: var(--ftms-t-caption); font-weight: 700; letter-spacing: .06em; color: var(--ftms-chrome-muted); }
.ftms-vw__group-rule { flex: 1; height: 1px; background: var(--ftms-chrome-border); }
.ftms-vw__group-count { font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }
.ftms-vw__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ftms-s-3); }
@media (max-width: 900px) { .ftms-vw__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ftms-vw__cards { grid-template-columns: 1fr; } }
.ftms-vw__card {
    display: flex; align-items: center; gap: var(--ftms-s-3); text-align: left;
    padding: var(--ftms-s-3); cursor: pointer;
    background: var(--ftms-chrome); border: 1px solid var(--ftms-chrome-border);
    border-radius: var(--ftms-r-lg);
    transition: border-color var(--ftms-dur-1) var(--ftms-ease), box-shadow var(--ftms-dur-1) var(--ftms-ease), background var(--ftms-dur-1) var(--ftms-ease);
}
html.dark .ftms-vw__card { background: #0f172a; border-color: #334155; }
.ftms-vw__card:hover { border-color: var(--ftms-accent); box-shadow: var(--ftms-e-2); }
.ftms-vw__card.is-picked { border-color: var(--ftms-accent); background: var(--ftms-accent-soft); box-shadow: inset 0 0 0 1px var(--ftms-accent); }
.ftms-vw__code {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: var(--ftms-r-md);
    background: var(--ftms-chrome-2); color: var(--ftms-chrome-muted);
    font-size: var(--ftms-t-cell); font-weight: 800; letter-spacing: .04em;
}
.ftms-vw__card.is-picked .ftms-vw__code { background: var(--ftms-accent); color: #fff; }
html.dark .ftms-vw__code { background: #1e293b; }
.ftms-vw__card-text { display: flex; flex-direction: column; min-width: 0; }
.ftms-vw__card-text strong { font-size: var(--ftms-t-body); font-weight: 600; color: var(--ftms-chrome-text); }
html.dark .ftms-vw__card-text strong { color: #e2e8f0; }
.ftms-vw__card-text span { font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }

/* Étapes 2 et 3 — blocs, grilles, photos */
.ftms-vw__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--ftms-s-4); align-items: start; }
@media (max-width: 900px) { .ftms-vw__cols { grid-template-columns: 1fr; } }
.ftms-vw__side { display: flex; flex-direction: column; gap: var(--ftms-s-4); }
.ftms-vw__block { border: 1px solid var(--ftms-chrome-border); border-radius: var(--ftms-r-lg); padding: var(--ftms-s-4); margin-bottom: var(--ftms-s-4); }
html.dark .ftms-vw__block { border-color: #334155; }
.ftms-vw__side .ftms-vw__block { margin-bottom: 0; }
.ftms-vw__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ftms-s-2); margin-bottom: var(--ftms-s-3); }
.ftms-vw__block-head strong { font-size: var(--ftms-t-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ftms-chrome-muted); }
.ftms-vw__block-head span { font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }
.ftms-vw__hint { margin: 0 0 var(--ftms-s-3); font-size: var(--ftms-t-cell); color: var(--ftms-chrome-muted); }
.ftms-vw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ftms-s-3); }
@media (max-width: 620px) { .ftms-vw__grid { grid-template-columns: 1fr; } }
.ftms-vw__note { display: block; margin-top: 3px; font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }

.ftms-vw__photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ftms-s-3); }
@media (max-width: 700px) { .ftms-vw__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftms-vw__photo {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 128px; padding: var(--ftms-s-3); cursor: pointer;
    border: 1.5px dashed var(--ftms-chrome-border); border-radius: var(--ftms-r-lg);
    transition: border-color var(--ftms-dur-1) var(--ftms-ease), background var(--ftms-dur-1) var(--ftms-ease);
}
.ftms-vw__photo:hover { border-color: var(--ftms-accent); background: var(--ftms-accent-soft); }
.ftms-vw__photo.is-filled { border-style: solid; border-color: var(--ftms-accent); background: var(--ftms-accent-soft); }
.ftms-vw__photo-ico { color: var(--ftms-chrome-muted); }
.ftms-vw__photo-label { font-size: var(--ftms-t-caption); font-weight: 700; letter-spacing: .06em; color: var(--ftms-chrome-muted); }
.ftms-vw__photo-cta { font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); text-align: center; word-break: break-all; }

.ftms-vw__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ftms-s-2); margin-top: var(--ftms-s-3); }
.ftms-vw__check { display: flex; align-items: center; gap: 6px; font-size: var(--ftms-t-cell); color: var(--ftms-chrome-text); cursor: pointer; }
html.dark .ftms-vw__check { color: #cbd5e1; }
.ftms-vw__check--solo { grid-column: 1 / -1; }
.ftms-vw__check input { accent-color: var(--ftms-accent); width: 15px; height: 15px; }

.ftms-vw__foot { display: flex; align-items: center; gap: var(--ftms-s-2); padding: var(--ftms-s-3) var(--ftms-s-5); border-top: 1px solid var(--ftms-chrome-border); background: var(--ftms-chrome-2); }
html.dark .ftms-vw__foot { background: #1e293b; border-top-color: #334155; }
.ftms-vw__spacer { flex: 1; }
.ftms-vw__msg { font-size: var(--ftms-t-caption); color: var(--ftms-chrome-muted); }
.ftms-vw__ghost { padding: 7px 12px; border-radius: var(--ftms-r-md); border: 1px solid var(--ftms-chrome-border); background: var(--ftms-chrome); color: var(--ftms-chrome-muted); font-size: var(--ftms-t-body); cursor: pointer; }
.ftms-vw__ghost:hover { background: var(--ftms-chrome-2); color: var(--ftms-chrome-text); }
html.dark .ftms-vw__ghost { background: transparent; border-color: #334155; }
.ftms-app .ftms-vw__foot .ftms-cta:disabled { background: var(--ftms-chrome-border); color: var(--ftms-chrome-muted); box-shadow: none; cursor: not-allowed; filter: none; }

/* `.ftms-cta` pose display:inline-flex : une classe l'emporte sur la règle UA
   `[hidden] { display: none }`, donc « Enregistrer » restait visible dès
   l'étape 1 (même piège que `.ftms-form` plus haut dans ce fichier). */
.ftms-vw [hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Couche de grille LAAS — chrome piloté par public/ftms-grid.js
   ═══════════════════════════════════════════════════════════════════════════
   Tout le style de grille vit ICI, jamais en nouvelles utilitaires Tailwind
   dans un Blade Admin : `Admin/tailwind.config.js` ne scanne pas ce fichier,
   donc aucune reconstruction n'est nécessaire après une retouche visuelle.
   Éditer → bumper le ?v= dans layouts/index.blade.php → recharger.
   ────────────────────────────────────────────────────────────────────────── */

/* Cellule à chasse fixe : plaques, VIN, kilométrages, montants, IMEI.
   Reprend la convention du prototype (JetBrains Mono) en retombant sur la
   pile monospace du système, qu'aucune police distante ne bloque. */
.ftms-app .ftms-cell-mono {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ── Entonnoir d'en-tête de colonne ─────────────────────────────────────── */
.ftms-app .ftms-dg-funnel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ftms-chrome-muted, #64748b);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.ftms-app .ftms-dg-funnel:hover { opacity: 1; background: rgba(15, 118, 110, 0.10); }

/* Filtre posé : l'entonnoir prend la teinte produit. La couleur ne porte pas
   l'information seule — le popover liste la valeur retenue. */
.ftms-app .ftms-dg-funnel--on {
    opacity: 1;
    color: #0f766e;
    background: rgba(15, 118, 110, 0.14);
}

/* ── Popovers (sélecteur de colonnes + entonnoir) ───────────────────────── */
/* Rendus dans <body> par ftms-grid.js : ils échappent ainsi au overflow:hidden
   des conteneurs de grille — même piège que les modales documenté dans
   claudeFolder/cheatsheets/BLADE_GOTCHAS.md. */
.ftms-dg-pop {
    z-index: 9999;
    min-width: 220px;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    font-size: 12px;
    color: #334155;
}

.ftms-dg-pop__titre {
    padding: 2px 6px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.ftms-dg-pop__liste { display: flex; flex-direction: column; gap: 1px; }

.ftms-dg-pop__ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
}

.ftms-dg-pop__ligne:hover { background: #f1f5f9; }

.ftms-dg-pop__label {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.ftms-dg-pop__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftms-dg-pop__fleches { display: inline-flex; gap: 2px; }

.ftms-dg-pop__fleche {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
}

.ftms-dg-pop__fleche:hover:not(:disabled) { background: #e2e8f0; color: #334155; }
.ftms-dg-pop__fleche:disabled { opacity: 0.3; cursor: default; }

.ftms-dg-pop__pied {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    text-align: right;
}

.ftms-dg-pop__reinit {
    border: 0;
    background: transparent;
    color: #0f766e;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.ftms-dg-pop__reinit:hover { text-decoration: underline; }

/* Options de l'entonnoir */
.ftms-dg-pop__option {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
}

.ftms-dg-pop__option:hover { background: #f1f5f9; }

.ftms-dg-pop__option.est-actif {
    background: rgba(15, 118, 110, 0.10);
    color: #0f766e;
    font-weight: 600;
}

.ftms-dg-pop__vide { padding: 8px; color: #94a3b8; font-style: italic; }

/* Filtre texte libre de l'entonnoir (colonnes sans options serveur). */
.ftms-dg-pop__champ {
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    color: #334155;
    background: #fff;
}
.ftms-dg-pop__champ:focus { outline: none; border-color: #0f766e; }
html.dark .ftms-dg-pop__champ { background: #0f172a; border-color: #334155; color: #e2e8f0; }

/* ── Barre d'outils « Digiparc » ────────────────────────────────────────── */
.ftms-app .ftms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ftms-app .ftms-toolbar__compte { font-size: 12px; color: var(--ftms-chrome-muted, #64748b); }
.ftms-app .ftms-toolbar__compte b { color: var(--ftms-chrome-text, #0f172a); font-weight: 600; }

.ftms-app .ftms-toolbar__actions { display: inline-flex; align-items: center; gap: 6px; }

.ftms-app .ftms-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.ftms-app .ftms-toolbar__btn:hover { border-color: #cbd5e1; color: #0f172a; background: #f8fafc; }

.ftms-app .ftms-toolbar__btn--primaire {
    border-color: #0f766e;
    background: #0f766e;
    color: #fff;
}

.ftms-app .ftms-toolbar__btn--primaire:hover { background: #115e59; border-color: #115e59; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .ftms-app .ftms-dg-funnel,
    .ftms-app .ftms-toolbar__btn { transition: none; }
}

/* Chip NEUTRE — catégories et types (« Tracteur », « Tautliner »).
   La couleur reste réservée aux statuts et sévérités : un type de véhicule
   n'est ni bon ni mauvais, il ne doit donc porter aucune teinte sémantique. */
.ftms-app .ftms-chip-neutre {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--ftms-chip, #eef2f7);
    color: #475569;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Fiche véhicule (tiroir de détail) ──────────────────────────────────── */
.ftms-fiche { display: flex; flex-direction: column; gap: 14px; }

.ftms-fiche__tete {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 1px solid #e2e8f0;
}

.ftms-fiche__onglets { display: flex; flex-wrap: wrap; gap: 14px; }
.ftms-fiche__groupe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.ftms-fiche__groupe-titre {
    margin-right: 2px;
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #94a3b8;
}

.ftms-fiche__onglet {
    padding: 4px 9px; border: 1px solid transparent; border-radius: 999px;
    background: #f1f5f9; color: #475569;
    font-size: 12px; cursor: pointer;
}
.ftms-fiche__onglet:hover { background: #e2e8f0; color: #0f172a; }
.ftms-fiche__onglet.est-actif { background: rgba(15,118,110,.12); border-color: rgba(15,118,110,.35); color: #0f766e; font-weight: 600; }

.ftms-fiche__panneau { min-height: 140px; }
.ftms-fiche__panneau[aria-busy="true"] { opacity: .5; }

/* ── Écran véhicule unifié : bascule Édition / Visualisation (2026-08-16) ──
   Deux grands onglets sous le bandeau KPI. Le garde [hidden] est SCOPÉ
   (piège n°1 : toute classe posant un display bat le [hidden] UA). */
.ftms-vues { display: flex; gap: 4px; border-bottom: 1px solid #e2e8f0; }
.ftms-vues__btn {
    appearance: none; border: 0; background: none; cursor: pointer;
    padding: 10px 18px; font-size: .95rem; font-weight: 600; color: #64748b;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ftms-vues__btn:hover { color: #0f172a; }
.ftms-vues__btn.est-actif { color: #0f766e; border-bottom-color: #0f766e; }
[data-ftms-vue-pane][hidden] { display: none !important; }

/* Visualisation : dossier en RAIL — menu vertical groupé + panneau (même
   patron que les fiches Voyage / Personnel 360°). */
.ftms-dossier { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ftms-dossier { grid-template-columns: 1fr; } }
.ftms-dossier__rail { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 14px; }
.ftms-dossier__groupe-titre {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #94a3b8; padding: 0 10px;
}
.ftms-dossier__groupe { display: flex; flex-direction: column; gap: 2px; }
.ftms-dossier__lien {
    display: block; width: 100%; text-align: left; appearance: none;
    background: none; border: 0; border-left: 2px solid transparent;
    padding: 7px 10px; font-size: .9rem; color: #475569; cursor: pointer;
    border-radius: 0 8px 8px 0;
}
.ftms-dossier__lien:hover { background: #f1f5f9; color: #0f172a; }
.ftms-dossier__lien.est-actif { background: rgba(15,118,110,.08); border-left-color: #0f766e; color: #0f766e; font-weight: 600; }
.ftms-dossier__panneau { min-height: 280px; }
/* Sections du dossier basculées par [hidden] : leurs classes posent un
   display (flex/grid) qui battrait l'attribut sans cette garde (piège n°1). */
.ftms-app .ftms-dossier__panneau [hidden] { display: none !important; }

/* ── Flyout de survol de la gnav : le listing d'un pilier sans clic ──
   Cloné depuis le bloc de menu (les lignes gardent .ftms-rail__subrow /
   __subsection, stylées par les règles du rail — variables au :root). */
.ftms-gnav-flyout {
    position: fixed; z-index: 1300;
    min-width: 236px; max-width: 320px;
    max-height: min(72vh, 560px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px;
    background: var(--ftms-side, #ffffff);
    border: 1px solid var(--ftms-chrome-border, #e8eaed);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}
.ftms-gnav-flyout__titre {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--ftms-side-muted, #9ca3af);
    padding: 6px 10px 4px;
}
.ftms-gnav-flyout .ftms-rail__subrow { display: flex; }
.dark .ftms-gnav-flyout { box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }

/* Burger du module déplacé de la barre du haut à côté du titre (2026-08-18). */
.ftms-page-header__burger { flex-shrink: 0; margin-right: 2px; }
.ftms-dossier__panneau[aria-busy="true"] { opacity: .5; }

/* ── Carte télématique : voile d'activation + recentrage (2026-08-16) ──
   Le voile transparent rend la molette à la PAGE ; un clic l'efface et
   arme le zoom molette. z-index 900 : sous les contrôles Leaflet (1000),
   les boutons +/− et Recentrer restent cliquables carte inactive. */
.ftms-carte-voile {
    position: absolute; inset: 0; z-index: 900; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
}
.ftms-carte-voile span {
    opacity: 0; transition: opacity .15s ease;
    background: rgba(15, 23, 42, .78); color: #fff;
    font-size: .85rem; padding: 8px 14px; border-radius: 999px;
    pointer-events: none;
}
.ftms-carte-voile:hover span { opacity: 1; }
a.ftms-carte-recentrer {
    display: block; width: 30px; height: 30px; line-height: 28px;
    text-align: center; font-size: 19px; text-decoration: none;
    background: #fff; color: #0f172a;
}
a.ftms-carte-recentrer:hover { background: #f1f5f9; }

/* Bande de création : action principale INCOMPLÈTE — cliquable (le clic
   ouvre l'étape fautive et nomme le champ), mais visuellement en retrait. */
.ftms-ic__save.is-incomplete { opacity: .55; }
.ftms-ic__save.is-incomplete:hover { opacity: .8; }

.ftms-fiche__vide { padding: 28px; text-align: center; color: #94a3b8; font-size: 13px; }

.ftms-fiche__bloc { margin-bottom: 14px; }
.ftms-fiche__bloc-titre {
    margin-bottom: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #64748b;
}
.ftms-fiche__note { font-size: 13px; color: #334155; white-space: pre-line; }

/* Clé/valeur en deux colonnes, comme `ficheParts` du prototype. */
.ftms-kv { display: grid; grid-template-columns: 1fr; gap: 1px; background: #f1f5f9; border-radius: 8px; overflow: hidden; }
@media (min-width: 640px) {
    .ftms-kv { grid-template-columns: 1fr 1fr; }
    /* Nombre IMPAIR de lignes : sans cela, l'emplacement resté vide expose
       le fond-joint gris du conteneur (grosse bande grise dans la fiche). */
    .ftms-kv__ligne:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.ftms-kv__ligne { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: #fff; font-size: 12.5px; }
.ftms-kv__ligne dt { color: #64748b; }
.ftms-kv__ligne dd { color: #0f172a; font-weight: 500; text-align: right; }
.ftms-kv__ligne--total { grid-column: 1 / -1; background: #f8fafc; font-weight: 700; }

.ftms-fiche__tableau { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.ftms-fiche__tableau table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ftms-fiche__tableau thead th {
    padding: 6px 10px; background: #f8fafc; text-align: left; white-space: nowrap;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b;
}
.ftms-fiche__tableau tbody td { padding: 5px 10px; border-top: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.ftms-fiche__tableau tbody tr:hover td { background: #f8fafc; }
.ftms-fiche__tableau .est-droite { text-align: right; }

/* Listes HTML hors DataGrid (TCO, échéances) — même densité que .ftms-dg-* */
.ftms-app .ftms-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ftms-t-body, 13px);
}
.ftms-app .ftms-list-table thead th {
    padding: 12px var(--ftms-cell-px);
    min-height: 52px;
    text-align: left;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ftms-chrome-muted);
    background: var(--ftms-chrome-1, #f8fafc);
    border-bottom: 1px solid var(--ftms-chrome-line, #e2e8f0);
    vertical-align: middle;
}
.ftms-app .ftms-list-table tbody td {
    padding: 10px var(--ftms-cell-px);
    min-height: var(--ftms-row-h);
    height: var(--ftms-row-h);
    color: var(--ftms-chrome-text, #0f172a);
    border-top: 1px solid var(--ftms-chrome-line-soft, #f1f5f9);
    vertical-align: middle;
    white-space: nowrap;
}
.ftms-app .ftms-list-table tbody tr:hover td {
    background: var(--ftms-chrome-1, #f8fafc);
}
body.is-compact .ftms-app .ftms-list-table thead th {
    padding-block: 8px;
}
body.is-compact .ftms-app .ftms-list-table tbody td {
    padding-block: 6px;
}
.ftms-fiche__plafond { padding: 6px 10px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #94a3b8; }

.ftms-fiche__photo { display: flex; flex-direction: column; gap: 4px; }
.ftms-fiche__photo img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; }
.ftms-fiche__photo-vide {
    display: flex; align-items: center; justify-content: center;
    height: 110px; border: 1px dashed #cbd5e1; border-radius: 8px; color: #cbd5e1;
}
.ftms-fiche__photo figcaption { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bande de création à étapes — généralisations de .ftms-ic*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① LE PIÈGE, porté au COMPOSANT. Il a mordu deux fois : `.ftms-form` pose
   display:grid et `.ftms-cta` pose display:inline-flex — une classe l'emporte
   sur la règle UA [hidden], donc tous les panneaux s'affichaient à la fois et
   l'étape ne voulait plus rien dire. Portée au composant plutôt qu'au seul
   `.ftms-ic-panel` : elle couvre aussi les classes qu'on ajoutera demain. */
.ftms-ic [hidden],
.ftms-ic-pop [hidden],
.ftms-picker__pop [hidden] { display: none !important; }

/* ② Verrou de grille par ATTRIBUT. La règle d'origine visait
   `#ftms-fleet-vehicles-datagrid` en dur : inutilisable ailleurs. */
/* Atténuation LÉGÈRE et NON bloquante (demande utilisateur 2026-08-16) :
   bande ouverte, la grille reste consultable — chercher, paginer, vérifier
   l'existant est LE besoin du moment de la saisie. L'ancien voile
   `pointer-events: none` interdisait toute vérification. */
body.is-ftms-inline-create [data-ftms-grid-lock],
body.is-ftms-inline-create .ftms-app [id$="-datagrid"] {
    opacity: .88;
    transition: opacity var(--ftms-dur-2, 160ms) var(--ftms-ease, ease);
}

/* ③ Aperçu à N colonnes — remplace le repeat(7, …) codé en dur. Le gabarit
   arrive en propriété personnalisée inline, calculée en Blade : un style
   inline n'est pas une utilitaire Tailwind, donc aucun build. */
.ftms-app .ftms-ic__preview-head,
.ftms-app .ftms-ic__preview-row {
    grid-template-columns: var(--ftms-ic-cols, repeat(7, minmax(0, 1fr)));
}

/* ④ Nouveaux états et éléments */
.ftms-app .ftms-ic__cell-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    margin-right: 5px;
    border-radius: 999px;
    background: var(--ftms-accent, #0f766e);
    color: #fff;
    font-size: 9px; font-weight: 700;
}

/* Le curseur annonce le refus AVANT le clic ; la case reste cliquable pour
   que le verrou s'explique (toast + retour à l'étape Type). */
.ftms-app .ftms-ic__cell.is-locked { opacity: .55; cursor: not-allowed; }
.ftms-app .ftms-ic__cell.is-locked .ftms-ic__cell-step { background: #94a3b8; }

/* « Manquant » et « invalide » ne sont JAMAIS de la couleur seule : filet +
   astérisque texte pour le premier, glyphe + phrase pour le second. */
.ftms-app .ftms-ic__cell.is-missing { box-shadow: inset 0 -2px 0 var(--ftms-sev-bloquant, #dc2626); }
.ftms-app .ftms-ic__cell.is-missing .ftms-ic__cell-label::after {
    content: ' *';
    color: var(--ftms-sev-bloquant, #dc2626);
    font-weight: 700;
}

.ftms-app .ftms-ic__preview-cell {
    display: flex; align-items: center;
    min-width: 0; padding: 0 6px;
    border: 0; background: transparent;
    font: inherit; text-align: left; cursor: pointer;
}
.ftms-app .ftms-ic__preview-cell:hover:not(.is-static) { background: rgba(15, 118, 110, .07); }
.ftms-app .ftms-ic__preview-cell.is-static { cursor: default; }

.ftms-ic-pop__error {
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    color: var(--ftms-sev-bloquant, #dc2626);
}

.ftms-ic-pop .ftms-input.is-invalid {
    border-color: var(--ftms-sev-bloquant, #dc2626);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}

.ftms-app .ftms-field__hint { font-size: 11px; color: var(--ftms-chrome-muted, #94a3b8); }
/* Lien d'action dans un hint (diagnostic tarifaire : « Ouvrir le contrat »). */
.ftms-app .ftms-field__hint a { color: #0f766e; font-weight: 600; text-decoration: underline; }

/* ── P&L — compte de résultat (sous-module Finance, CEO 2026-08-20) ──
   Table dense 12 mois + cumuls : 1ʳᵉ colonne sticky (le tableau défile
   horizontalement dans son conteneur, jamais la page), hiérarchie
   section > groupe > détail > résultat. */
.ftms-app .ftms-pnl { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.ftms-app .ftms-pnl th, .ftms-app .ftms-pnl td { padding: 5px 10px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(148, 163, 184, 0.15); }
.ftms-app .ftms-pnl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; background: rgba(148, 163, 184, 0.08); position: sticky; top: 0; }
.ftms-app .ftms-pnl .ftms-pnl__ligne { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 500; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.dark .ftms-app .ftms-pnl .ftms-pnl__ligne { background: #111827; }
.ftms-app .ftms-pnl thead .ftms-pnl__ligne { z-index: 2; background: #f4f6f8; }
.dark .ftms-app .ftms-pnl thead .ftms-pnl__ligne { background: #1f2937; }
.ftms-app .ftms-pnl .ftms-pnl__cumul { font-weight: 600; border-left: 2px solid rgba(15, 118, 110, 0.35); }
.ftms-app .ftms-pnl tr.ftms-pnl__section > * { font-weight: 700; background: rgba(15, 118, 110, 0.08); }
.ftms-app .ftms-pnl tr.ftms-pnl__groupe > * { font-weight: 600; background: rgba(148, 163, 184, 0.07); }
.ftms-app .ftms-pnl tr.ftms-pnl__detail .ftms-pnl__ligne { padding-left: 26px; font-weight: 400; color: #475569; }
.dark .ftms-app .ftms-pnl tr.ftms-pnl__detail .ftms-pnl__ligne { color: #94a3b8; }
.ftms-app .ftms-pnl tr.ftms-pnl__resultat > * { font-weight: 700; background: rgba(15, 118, 110, 0.14); border-top: 2px solid rgba(15, 118, 110, 0.4); }
.ftms-app .ftms-pnl .ftms-pnl__note { cursor: help; color: #94a3b8; font-weight: 400; }

/* Réservé aux lecteurs d'écran : la mention « (requis) » doit être annoncée,
   pas seulement signalée par un astérisque coloré. */
.ftms-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Sélecteur cherchable ───────────────────────────────────────────────── */
.ftms-picker { position: relative; display: block; }

/* Liste montée sur <body> : le popover d'étape a overflow-y:auto, une liste
   en flux y serait tronquée. z-index au-dessus du popover (10080). */
.ftms-picker__pop {
    z-index: 10090;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}

.ftms-picker__option {
    display: flex; flex-direction: column; gap: 1px;
    width: 100%; padding: 5px 8px;
    border: 0; border-radius: 6px; background: transparent;
    text-align: left; cursor: pointer;
}
.ftms-picker__option:hover,
.ftms-picker__option.est-actif { background: rgba(15, 118, 110, .10); }

.ftms-picker__label { font-size: 12.5px; color: #0f172a; }
.ftms-picker__sub   { font-size: 11px; color: #94a3b8; }
.ftms-picker__vide  { padding: 8px; font-size: 12px; color: #94a3b8; font-style: italic; }

/* ── Bande soudée à l'en-tête ───────────────────────────────────────────────
   Sur le motif d'origine, la ligne de création n'est pas un bloc qui flotte :
   elle prolonge l'en-tête de page, puis la grille la prolonge à son tour. Trois
   surfaces qui se lisent comme une seule colonne. Un bloc détaché au milieu de
   la page — ce qu'on avait — se lit comme un encart publicitaire.
   ────────────────────────────────────────────────────────────────────────── */
/* On s'appuie sur la classe posée sur <body> pendant la saisie plutôt que sur
   `:has(+ …)` : le résultat est identique et le support universel. */
body.is-ftms-inline-create .ftms-app .ftms-page-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    margin-bottom: 0;
}

.ftms-app .ftms-ic:not([hidden]) {
    margin-top: 0;
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* Filet d'accent : signale que la saisie est en cours, sans crier. */
    border-top: 2px solid var(--ftms-accent, #0f766e);
}

/* La grille qui suit se colle à la bande. */
.ftms-app .ftms-ic:not([hidden]) + * { margin-top: 0; }

/* ── Popover épinglé à sa case ──────────────────────────────────────────────
   Un raccord visible relie le popover à la case active : sans lui, un panneau
   flottant ne dit pas de QUELLE étape il parle. */
.ftms-ic-pop::before {
    content: "";
    position: absolute;
    top: -5px;
    left: var(--ftms-ic-arrow, 22px);
    width: 9px; height: 9px;
    transform: rotate(45deg);
    background: var(--ftms-chrome, #fff);
    border-top: 1px solid var(--ftms-chrome-border, #e2e8f0);
    border-left: 1px solid var(--ftms-chrome-border, #e2e8f0);
}

/* Popover ouvert vers le haut : le raccord passe dessous. */
.ftms-ic-pop.est-au-dessus::before {
    top: auto;
    bottom: -5px;
    transform: rotate(225deg);
}

/* Case active : elle se prolonge dans le popover — même surface, pas de
   séparation. C'est ce qui fait lire « ce panneau appartient à cette case ». */
.ftms-app .ftms-ic__cell.is-active {
    position: relative;
    z-index: 1;
}

.ftms-app .ftms-ic__cell.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--ftms-accent, #0f766e);
}

/* ── Panneau de saisie EN FLUX, dans la bande ───────────────────────────────
   Remplace le popover flottant. Celui-ci était reparenté sur <body> et
   positionné à la main : il a produit trois pannes successives (ancrage dans
   le coin, champs introuvables après déplacement, panneau invisible). En flux,
   il n'y a plus rien à positionner.
   ────────────────────────────────────────────────────────────────────────── */
.ftms-app .ftms-ic__panneau {
    display: block;
    border-top: 1px solid var(--ftms-chrome-border, #e2e8f0);
    background: var(--ftms-chrome-2, #f8fafc);
}

/* Règle EXPLICITE plutôt que de compter sur la règle UA : plusieurs classes du
   thème posent un `display` et l'emporteraient sur `[hidden]`. */
.ftms-app .ftms-ic__panneau[hidden] { display: none !important; }

.ftms-app .ftms-ic__panneau .ftms-ic-pop__head,
.ftms-app .ftms-ic__panneau .ftms-ic-pop__body,
.ftms-app .ftms-ic__panneau .ftms-ic-pop__foot {
    padding: var(--ftms-s-3, 10px) var(--ftms-s-4, 14px);
}

.ftms-app .ftms-ic__panneau .ftms-ic-pop__head {
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--ftms-chrome-border, #e2e8f0);
}

.ftms-app .ftms-ic__panneau .ftms-ic-pop__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--ftms-chrome-border, #e2e8f0);
}

/* La bande elle-même : affichage explicite, même raison que ci-dessus. */
.ftms-app .ftms-ic { display: block; }
.ftms-app .ftms-ic[hidden] { display: none !important; }

/* Le panneau flottant n'existe plus : on neutralise son ancien habillage au
   cas où une page l'aurait encore en cache. */
.ftms-app .ftms-ic__panneau { position: static !important; max-height: none !important; width: auto !important; }
.ftms-app .ftms-ic__panneau::before { content: none; }

/* ── Mise en page des champs d'une étape ────────────────────────────────────
   CORRECTIF STRUCTUREL. `.ftms-form` est une grille à 2 colonnes, mais dans la
   bande ses enfants directs sont les PANNEAUX d'étape, pas les champs : le
   panneau occupait donc une seule cellule (mi-largeur) et ses champs
   s'empilaient en flux normal, sur une colonne, laissant la moitié droite
   vide. La grille doit être portée par le PANNEAU.
   ────────────────────────────────────────────────────────────────────────── */
.ftms-app .ftms-ic__panneau .ftms-form {
    display: block;   /* simple conteneur des panneaux */
    gap: 0;
}

.ftms-app .ftms-ic-panel {
    display: grid;
    gap: 12px 18px;
    align-items: start;
    grid-template-columns: 1fr;
}

/* Densité croissante avec la largeur. Bornée à 4 colonnes : au-delà, l'œil
   perd l'association libellé → champ sur une ligne trop longue. */
@media (min-width: 640px)  { .ftms-app .ftms-ic-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ftms-app .ftms-ic-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .ftms-app .ftms-ic-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Un champ large occupe toute la ligne — notes, commentaires. */
.ftms-app .ftms-ic-panel .ftms-field--wide { grid-column: 1 / -1; }

/* Une zone de texte est toujours pleine largeur : la contraindre à une colonne
   la rend inutilisable. */
.ftms-app .ftms-ic-panel .ftms-field:has(textarea) { grid-column: 1 / -1; }

/* ── Champs step-create : lisibles (plus de densification « 34 px ») ───────
   Les opérateurs trouvaient les champs trop petits / peu visibles. Aligné
   sur le kit formulaire (.ftms-input 42 px / 15 px). */
.ftms-app .ftms-ic-panel .ftms-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ftms-chrome-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ftms-app .ftms-ic-panel .ftms-input {
    height: auto;
    min-height: 42px;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.35;
    border: 1px solid #cbd5e1;
    border-radius: var(--ftms-r-md);
}

.ftms-app .ftms-ic-panel textarea.ftms-input {
    height: auto;
    min-height: 88px;
    padding: 10px 14px;
}

/* Le sélecteur cherchable occupe la cellule entière. */
.ftms-app .ftms-ic-panel .ftms-picker { display: block; width: 100%; }

/* Case à cocher : même hauteur visuelle que les inputs. */
.ftms-app .ftms-ic-panel .ftms-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    height: auto;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #cbd5e1;
}

/* ── Chrome du panneau ─────────────────────────────────────────────────── */
.ftms-app .ftms-ic__panneau .ftms-ic-pop__head {
    font-size: 12px;
    font-weight: 600;
    color: var(--ftms-chrome-text, #0f172a);
}

.ftms-app .ftms-ic__panneau .ftms-ic-pop__step {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ftms-accent-soft, rgba(15, 118, 110, .12));
    color: var(--ftms-accent-text, #0f766e);
    font-size: 10px;
    font-weight: 700;
}

.ftms-app .ftms-ic__panneau .ftms-ic-pop__title { flex: 1; }

.ftms-app .ftms-ic__panneau .ftms-ic-pop__close {
    border: 0; background: transparent;
    color: var(--ftms-chrome-muted, #94a3b8);
    font-size: 18px; line-height: 1; cursor: pointer;
}
.ftms-app .ftms-ic__panneau .ftms-ic-pop__close:hover { color: var(--ftms-chrome-text, #0f172a); }

/* ── Étape Photos ──────────────────────────────────────────────────────────
   Quatre vues d'un véhicule. Le champ fichier natif est masqué et piloté par
   son <label> : c'est le seul moyen d'un rendu propre sans script.
   ────────────────────────────────────────────────────────────────────────── */
.ftms-app .ftms-ic-panel__intro {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ftms-chrome-muted, #64748b);
}

.ftms-app .ftms-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 104px;
    padding: 8px;
    border: 1px dashed var(--ftms-chrome-border, #cbd5e1);
    border-radius: 9px;
    background: var(--ftms-chrome, #fff);
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.ftms-app .ftms-photo:hover { border-color: var(--ftms-accent, #0f766e); background: rgba(15, 118, 110, .04); }

/* Le trait plein signale « rempli » — l'aperçu seul ne suffit pas quand
   l'image est claire ou uniforme. */
.ftms-app .ftms-photo.est-remplie {
    border-style: solid;
    border-color: var(--ftms-accent, #0f766e);
}

.ftms-app .ftms-photo.est-invalide {
    border-color: var(--ftms-sev-bloquant, #dc2626);
    background: rgba(220, 38, 38, .05);
}

.ftms-app .ftms-photo__vignette {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 6px;
    background: var(--ftms-chrome-2, #f1f5f9) center / cover no-repeat;
}

.ftms-app .ftms-photo.est-remplie .ftms-photo__vignette { background-color: transparent; }

.ftms-app .ftms-photo__cta {
    font-size: 11px;
    line-height: 1.3;
    color: var(--ftms-chrome-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ftms-app .ftms-photo.est-remplie .ftms-photo__cta { color: var(--ftms-accent-text, #0f766e); font-weight: 600; }
.ftms-app .ftms-photo.est-invalide .ftms-photo__cta { color: var(--ftms-sev-bloquant, #dc2626); font-weight: 600; }

/* Auto-enregistré (édition) : le fichier est PARTI et la fiche sauvée —
   liseré émeraude plein, distinct du simple « rempli » local. */
.ftms-app .ftms-photo.est-envoyee {
    border-style: solid;
    border-color: var(--ftms-sev-nominal, #059669);
    background: rgba(5, 150, 105, .06);
}
.ftms-app .ftms-photo.est-envoyee .ftms-photo__cta { color: var(--ftms-sev-nominal, #059669); font-weight: 600; }

/* ------------------------------------------------------------------
 * Bouton ✕ « masquer cette tuile » du tableau de bord Direction.
 *
 * Il était rendu en glyphe nu gris-clair : invisible sur les tuiles
 * graphiques. Pastille ronde bordée → cible cliquable identifiable
 * (24 px, au-dessus du seuil de confort tactile), virant au rouge au
 * survol pour signaler l'action destructive-douce (réversible via
 * Personnaliser).
 * ------------------------------------------------------------------ */
.ftms-app .ftms-tuile-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.ftms-app .ftms-tuile-x:hover,
.ftms-app .ftms-tuile-x:focus-visible {
    border-color: var(--ftms-sev-bloquant, #dc2626);
    background: #fef2f2;
    color: var(--ftms-sev-bloquant, #dc2626);
}

.ftms-app .ftms-tuile-x:focus-visible {
    outline: 2px solid var(--ftms-sev-bloquant, #dc2626);
    outline-offset: 2px;
}

.dark .ftms-app .ftms-tuile-x,
.ftms-app.dark .ftms-tuile-x {
    border-color: #374151;
    background: #111827;
    color: #9ca3af;
}

.dark .ftms-app .ftms-tuile-x:hover,
.ftms-app.dark .ftms-tuile-x:hover {
    border-color: #f87171;
    background: #7f1d1d;
    color: #fecaca;
}

/* ── Dashboard Direction : blocs métier + barre de filtre des blocs ─────────
   Sections bordées haut (accent) / bas, titre de bloc, et pilules de
   navigation « Tous les blocs / … ». La règle [hidden] est OBLIGATOIRE :
   display:flex du bloc battrait le [hidden] UA (piège n°1). */
.ftms-app .ftms-dash-bloc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.9rem 0 1.4rem;
    border-top: 3px solid var(--ftms-accent, #0f766e);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.ftms-app .ftms-dash-bloc[hidden] { display: none !important; }
.ftms-app .ftms-dash-bloc__titre { display: flex; align-items: center; gap: 0.75rem; }
.ftms-app .ftms-blocnav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ftms-app .ftms-blocnav button {
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: transparent;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
}
.ftms-app .ftms-blocnav button:hover { border-color: var(--ftms-accent, #0f766e); }
.ftms-app .ftms-blocnav button[aria-pressed="true"] {
    background: var(--ftms-accent, #0f766e);
    border-color: var(--ftms-accent, #0f766e);
    color: #ffffff;
}

/* ── Barre de filtres : liseré vert clair (aligné sur l'accent produit) ─────
   Les champs Année / Catégorie / Site / Marque… se distinguent du fond par
   une bordure teal claire ; le focus reprend l'accent plein. */
/* Les !important sont OBLIGATOIRES : la règle générique « Champs de
   formulaire » (.ftms-app input[type="text"]…) force déjà border-color en
   !important — sans eux, le liseré retombe sur --ftms-chrome-border gris. */
.ftms-app .ftms-filterbar .ftms-picker .ftms-picker__input,
.ftms-app .ftms-filterbar select,
.ftms-app .ftms-filterbar input[type="text"],
.ftms-app .ftms-filterbar input[type="search"],
.ftms-app .ftms-filterbar input[type="date"],
.ftms-app .ftms-filterbar input[type="datetime-local"],
.ftms-app .ftms-filterbar input[type="time"] {
    border: 1px solid #9ad9cc;
    border-color: #9ad9cc !important;
    border-radius: 8px;
}
.ftms-app .ftms-filterbar .ftms-picker .ftms-picker__input:focus,
.ftms-app .ftms-filterbar select:focus,
.ftms-app .ftms-filterbar input:focus {
    border-color: var(--ftms-accent, #0f766e) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

/* ── Sélecteur de colonnes : popover soigné + glisser-déposer ───────────────
   .ftms-dg-pop--cols n'était qu'un crochet JS jamais stylé ; il reçoit ici
   sa largeur propre, la poignée ≡ et les états de drag. Variante sombre du
   popover incluse (dette : il restait blanc en thème sombre). */
.ftms-dg-pop--cols { min-width: 300px; max-width: 360px; }
.ftms-dg-pop--cols .ftms-dg-pop__ligne { padding: 5px 6px; }
.ftms-dg-pop--cols .ftms-dg-pop__ligne[draggable="true"] { cursor: grab; }
.ftms-dg-pop--cols .ftms-dg-pop__ligne.est-glissee { opacity: 0.35; cursor: grabbing; }
.ftms-dg-pop--cols .ftms-dg-pop__ligne.est-survolee { box-shadow: inset 0 2px 0 var(--ftms-accent, #0f766e); }
.ftms-dg-pop__poignee {
    flex: none;
    width: 16px;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    user-select: none;
}
.ftms-dg-pop__ligne:hover .ftms-dg-pop__poignee { color: #64748b; }

html.dark .ftms-dg-pop {
    background: #111827;
    border-color: #374151;
    color: #d1d5db;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
html.dark .ftms-dg-pop__ligne:hover { background: #1f2937; }
html.dark .ftms-dg-pop__titre { color: #9ca3af; }
html.dark .ftms-dg-pop__pied { border-top-color: #1f2937; }
html.dark .ftms-dg-pop__fleche:hover:not(:disabled) { background: #374151; color: #e5e7eb; }

/* ── Boutons d'action des grilles : pastille unifiée design produit ─────────
   Remplace l'héritage disparate (œil orange, éditer vert clair, rouge…) sur
   TOUTES les grilles : base grise neutre, survol accent teal — le survol
   ROUGE est réservé aux actions destructrices (.ftms-dg-action--danger).
   Styles portés par le thème (aucune classe Tailwind → aucun build). */
.ftms-app .ftms-dg-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 1px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ftms-app .ftms-dg-action:hover {
    background: var(--ftms-accent, #0f766e);
    color: #ffffff;
}
.ftms-app .ftms-dg-action--danger:hover {
    background: #dc2626;
    color: #ffffff;
}
.ftms-app .ftms-dg-action--lg { width: 34px; height: 34px; font-size: 17px; }
html.dark .ftms-dg-action { background: #1f2937; color: #9ca3af; }
html.dark .ftms-dg-action:hover { background: var(--ftms-accent, #0f766e); color: #ffffff; }
html.dark .ftms-dg-action--danger:hover { background: #dc2626; color: #ffffff; }

/* Garde OBLIGATOIRE (piège n°1) : .ftms-field pose un display — sans cette
   règle scopée, les champs conditionnels des formulaires (documents par type)
   resteraient visibles malgré [hidden]. */
.ftms-app .ftms-form [hidden] { display: none !important; }

/* ── Recherche avancée (panneau multi-critères au-dessus d'une grille) ────── */
.ftms-app .ftms-ra {
    padding: 14px 16px;
    border: 1px solid var(--ftms-chrome-border, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Garde OBLIGATOIRE (piège n°1) : sans elle, le display:flex ci-dessus
   l'emporterait sur l'attribut [hidden] et le panneau resterait ouvert. */
.ftms-app .ftms-ra[hidden] { display: none !important; }
html.dark .ftms-ra { background: #111827; border-color: #1f2937; }

.ftms-ra__compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 9px;
    background: var(--ftms-accent, #0f766e);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.ftms-ra__compteur[hidden] { display: none !important; }

/* ── Champs à la carte + groupes (demande CEO 2026-08-18) ──────────────────
   Le wrapper .ftms-ra__champ est transparent pour la grille CSS
   (display:contents) : les champs restent des items de .ftms-filterbar--form,
   layout identique à avant. REVERS : display:contents écrase le [hidden] UA —
   la garde !important scopée ci-dessous est la SEULE chose qui masque un
   champ retiré du panneau (piège n°1, niveau champ). */
.ftms-app .ftms-ra__champ { display: contents; }
.ftms-app .ftms-ra [hidden] { display: none !important; }
/* Les overrides `--form >` (enfant direct) ne matchent plus à travers le
   wrapper : on les reprend pour ses champs. */
.ftms-app .ftms-filterbar--form .ftms-ra__champ > .ftms-field {
    min-width: 0;
    max-width: none;
    flex: none;
}

.ftms-app .ftms-ra__groupe-titre {
    margin: 2px 0 -4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ftms-accent, #0f766e);
}
html.dark .ftms-ra__groupe-titre { color: #5eead4; }

/* Popover du sélecteur de champs — même famille visuelle que .ftms-dg-pop. */
.ftms-ra-pop {
    position: fixed;
    z-index: 1200;
    min-width: 240px;
    max-width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--ftms-chrome-border, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
html.dark .ftms-ra-pop { background: #111827; border-color: #1f2937; }
.ftms-ra-pop__groupe {
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ftms-accent, #0f766e);
}
html.dark .ftms-ra-pop__groupe { color: #5eead4; }
.ftms-ra-pop__ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    cursor: pointer;
}
.ftms-ra-pop__ligne:hover { background: rgba(15, 118, 110, 0.08); }
html.dark .ftms-ra-pop__ligne { color: #e5e7eb; }
html.dark .ftms-ra-pop__ligne:hover { background: rgba(94, 234, 212, 0.12); }
.ftms-ra-pop__ligne input { accent-color: var(--ftms-accent, #0f766e); }

/* ── Bouton « Recherche avancée » : même gabarit que les champs de filtre ───
   Il vivait en 32 px à côté d'un champ de 42 px et se lisait comme une
   action secondaire alors qu'il ouvre LE panneau de recherche. Aligné sur
   .ftms-input (42 px, police 14) + identité accent ; l'état ouvert
   (is-active, posé par FtmsRechercheAvancee.basculer) passe en plein. */
.ftms-app .ftms-toolbar__btn[data-ftms-ra-bouton] {
    height: 42px;
    padding: 0 18px;
    gap: 8px;
    border: 1px solid var(--ftms-accent, #0f766e);
    border-radius: var(--ftms-r-md, 8px);
    color: var(--ftms-accent-text, #0f766e);
    font-size: 14px;
    font-weight: 600;
}
.ftms-app .ftms-toolbar__btn[data-ftms-ra-bouton]:hover {
    background: rgba(15, 118, 110, .08);
    border-color: var(--ftms-accent, #0f766e);
    color: var(--ftms-accent-text, #0f766e);
}
.ftms-app .ftms-toolbar__btn[data-ftms-ra-bouton].is-active {
    background: var(--ftms-accent, #0f766e);
    border-color: var(--ftms-accent, #0f766e);
    color: #ffffff;
}
.ftms-app .ftms-toolbar__btn[data-ftms-ra-bouton].is-active .ftms-ra__compteur {
    background: #ffffff;
    color: var(--ftms-accent, #0f766e);
}

/* ── Sélecteurs de filtre : chevron d'affordance ────────────────────────────
   Le picker (« Type : Tous les types ») ressemblait à un champ texte — rien
   n'indiquait qu'un clic déroule une liste. Chevron accent en pseudo-élément
   (pointer-events:none, le clic traverse), retourné quand la liste est
   ouverte (aria-expanded posé par ftms-picker.js). Scopé aux barres de
   filtres : les pickers de formulaire/bande gardent leur rendu actuel. */
.ftms-app .ftms-filterbar .ftms-picker::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--ftms-accent, #0f766e);
    border-bottom: 2px solid var(--ftms-accent, #0f766e);
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 120ms ease, margin-top 120ms ease;
}
.ftms-app .ftms-filterbar .ftms-picker:has(.ftms-picker__input[aria-expanded="true"])::after {
    transform: rotate(225deg);
    margin-top: -2px;
}
.ftms-app .ftms-filterbar .ftms-picker .ftms-picker__input { padding-right: 36px; }

@media (prefers-reduced-motion: reduce) {
    .ftms-app .ftms-filterbar .ftms-picker::after { transition: none; }
}

/* ── Glisser-déposer des en-têtes de colonnes (réordonnancement) ─────────── */
.ftms-app .ftms-dg-head [draggable="true"] { cursor: grab; }
.ftms-app .ftms-dg-head [draggable="true"]:active { cursor: grabbing; }

/* Pastille suivie par le curseur (dataTransfer.setDragImage) : le fantôme
   natif — capture grise translucide de la cellule — était invisible. Le nœud
   est parqué hors écran ; seul le rendu que le navigateur en capture compte. */
.ftms-dg-ghost {
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ftms-accent, #0f766e);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.45);
}

/* Colonne d'origine : estompée + contour tireté accent. */
.ftms-app .ftms-dg-head .est-glissee {
    opacity: 0.35;
    outline: 2px dashed var(--ftms-accent, #0f766e);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Cible : liseré d'insertion épais + lavis accent — l'endroit où ça tombe
   se lit sans hésiter. */
.ftms-app .ftms-dg-head .est-survolee {
    box-shadow: inset 4px 0 0 var(--ftms-accent, #0f766e);
    background: rgba(15, 118, 110, 0.10);
    border-radius: 6px;
}

/* Pendant le geste, les colonnes non concernées s'estompent : la source et
   la cible ressortent d'autant. */
.ftms-app .ftms-dg-head.est-en-glissement > div[draggable] {
    transition: opacity 0.12s ease, background-color 0.12s ease;
}
.ftms-app .ftms-dg-head.est-en-glissement > div[draggable]:not(.est-glissee):not(.est-survolee) {
    opacity: 0.55;
}

/* Flash de confirmation sur la colonne déposée. */
@keyframes ftms-depose {
    0% { background: rgba(15, 118, 110, 0.28); }
    100% { background: transparent; }
}
.ftms-app .ftms-dg-head .est-deposee {
    animation: ftms-depose 0.7s ease-out;
    border-radius: 6px;
}

html.dark .ftms-dg-head .est-glissee { outline-color: var(--ftms-accent, #14b8a6); }
html.dark .ftms-dg-head .est-survolee {
    box-shadow: inset 4px 0 0 var(--ftms-accent, #14b8a6);
    background: rgba(20, 184, 166, 0.14);
}

/* ── Fiche véhicule déclarative (création pleine page + édition) ────────────
   Cartes métier compactes générées depuis la déclaration de la bande :
   grille responsive 1 → 2 → 3 → 4 colonnes, densité relevée (34 px au lieu
   des 42 px du kit) pour tenir la fiche complète sans page interminable. */
.ftms-app .ftms-form--fiche {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ftms-app .ftms-fiche-carte {
    border: 1px solid var(--ftms-chrome-border, #e2e8f0);
    border-radius: 10px;
    background: var(--ftms-chrome, #ffffff);
    padding: 12px 14px;
}
.ftms-app .ftms-fiche-carte__titre {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ftms-accent-text, #0f766e);
}
.ftms-app .ftms-fiche-carte__titre::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--ftms-chrome-border, #e2e8f0);
}
.ftms-app .ftms-fiche-carte__grille {
    display: grid;
    gap: 8px 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .ftms-app .ftms-fiche-carte__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ftms-app .ftms-fiche-carte__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
    .ftms-app .ftms-fiche-carte__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ftms-app .ftms-fiche-carte__grille .ftms-field--wide,
.ftms-app .ftms-fiche-carte__grille .ftms-field:has(textarea) {
    grid-column: 1 / -1;
}

/* Densité : le kit (42 px / police 15) vise le tiroir 2 colonnes ; la fiche
   multi-colonnes gagne un tiers de hauteur avec 34 px / police 13.5. */
.ftms-app .ftms-form--fiche .ftms-input {
    min-height: 34px;
    padding: 4px 10px;
    font-size: 13.5px;
}
.ftms-app .ftms-form--fiche .ftms-input[type="date"],
.ftms-app .ftms-form--fiche .ftms-input[type="datetime-local"],
.ftms-app .ftms-form--fiche .ftms-input[type="time"] {
    height: 34px;
    line-height: 34px;
}
.ftms-app .ftms-form--fiche textarea.ftms-input { min-height: 60px; line-height: 1.4; }
.ftms-app .ftms-form--fiche .ftms-field { gap: 3px; }
.ftms-app .ftms-form--fiche .ftms-label { font-size: 11px; }
.ftms-app .ftms-form--fiche .ftms-switch { min-height: 34px; padding: 5px 10px; font-size: 13px; }
.ftms-app .ftms-form--fiche .ftms-photo { padding: 8px 10px; }

/* Tiroir 600 px : les media queries viewport mentiraient (écran large,
   panneau étroit) — la grille est forcée à 2 colonnes dans le tiroir. */
.ftms-app .ftms-drawer .ftms-fiche-carte__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Garde OBLIGATOIRE (piège n°1) : un champ exclu par le type doit rester
   invisible malgré tout display posé par une classe du variant. */
.ftms-app .ftms-form--fiche [hidden] { display: none !important; }

html.dark .ftms-fiche-carte { background: #111827; border-color: #1f2937; }


/* ══════════════════════════════════════════════════════════════════════════
   PILIER DOCUMENTATION — les guides « pour les nuls » (demande CEO 2026-08-13)
   Gabarit lecture + encadrés pédagogiques. Palette produit : teal concepts,
   ambre pièges, vert vérifications, indigo identité du pilier.
   ══════════════════════════════════════════════════════════════════════════ */
.ftms-app .ftms-doc { max-width: 860px; margin: 0 auto; font-size: 17px; line-height: 1.7; }
.ftms-app .ftms-doc p { max-width: 70ch; }
.ftms-app .ftms-doc-entete { padding: 6px 0 2px; }
.ftms-app .ftms-doc-entete h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 6px; }
.ftms-app .ftms-doc-accroche { font-size: 18.5px; color: #4b5563; margin: 0; }
html.dark .ftms-app .ftms-doc-accroche { color: #aebbb7; }
.ftms-app .ftms-doc-tag {
    display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px;
    border-radius: 999px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.ftms-app .ftms-doc-filrouge {
    margin: 16px 0 0; padding: 13px 16px; border-radius: 11px;
    background: #eef2ff; border: 1px solid #c7d2fe; font-size: 16px;
}
html.dark .ftms-app .ftms-doc-filrouge { background: #1e1b4b; border-color: #312e81; }

/* Sommaire */
.ftms-app .ftms-doc-sommaire { display: grid; gap: 4px; margin: 18px 0 6px; padding: 0; list-style: none; }
.ftms-app .ftms-doc-sommaire a {
    display: flex; align-items: baseline; gap: 10px; padding: 6px 10px;
    border-radius: 8px; text-decoration: none; color: inherit; font-size: 16px;
}
.ftms-app .ftms-doc-sommaire a:hover { background: #f3f4f6; }
html.dark .ftms-app .ftms-doc-sommaire a:hover { background: #2a2b2e; }
.ftms-app .ftms-doc-sommaire .num { font-weight: 800; color: #4338ca; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
html.dark .ftms-app .ftms-doc-sommaire .num { color: #a5b4fc; }

/* Chapitres */
.ftms-app .ftms-doc h2 {
    display: flex; align-items: baseline; gap: 12px; font-size: 24px; font-weight: 800;
    margin: 44px 0 10px; padding-bottom: 8px; border-bottom: 2px solid #4338ca;
    letter-spacing: -.01em;
}
html.dark .ftms-app .ftms-doc h2 { border-bottom-color: #6366f1; }
.ftms-app .ftms-doc h2 .num { color: #4338ca; font-size: 30px; font-variant-numeric: tabular-nums; }
html.dark .ftms-app .ftms-doc h2 .num { color: #a5b4fc; }
.ftms-app .ftms-doc h3 { font-size: 19px; margin: 22px 0 6px; }

/* Fil de navigation (où cliquer) */
.ftms-app .ftms-doc-chemin {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 8px 0 2px; padding: 6px 12px; border-radius: 9px;
    background: #f3f4f6; border: 1px solid #e5e7eb; font-size: 15px;
}
html.dark .ftms-app .ftms-doc-chemin { background: #1d2b28; border-color: #263733; }
.ftms-app .ftms-doc-chemin .etape { font-weight: 650; }
.ftms-app .ftms-doc-chemin .sep { color: #9ca3af; }
.ftms-app .ftms-doc-chemin .pastille {
    display: inline-flex; width: 17px; height: 17px; border-radius: 5px;
    align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 800;
}

/* Encadrés pédagogiques */
.ftms-app .ftms-doc-boite { border-radius: 11px; padding: 13px 16px; margin: 14px 0; border: 1px solid #e5e7eb; }
html.dark .ftms-app .ftms-doc-boite { border-color: #263733; }
.ftms-app .ftms-doc-boite > .titre {
    font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
.ftms-app .ftms-doc-boite p { margin: 6px 0; }
.ftms-app .ftms-doc-boite ul { margin: 6px 0; padding-left: 20px; }
.ftms-app .ftms-doc-boite--concept { background: #e6f2f0; }
.ftms-app .ftms-doc-boite--concept > .titre { color: #115e59; }
html.dark .ftms-app .ftms-doc-boite--concept { background: #12312d; }
html.dark .ftms-app .ftms-doc-boite--concept > .titre { color: #5eead4; }
.ftms-app .ftms-doc-boite--action { background: #fff; border-left: 4px solid #0f766e; }
.ftms-app .ftms-doc-boite--action > .titre { color: #115e59; }
html.dark .ftms-app .ftms-doc-boite--action { background: #17211f; border-left-color: #2dd4bf; }
html.dark .ftms-app .ftms-doc-boite--action > .titre { color: #5eead4; }
.ftms-app .ftms-doc-boite--verif { background: #e7f5ee; }
.ftms-app .ftms-doc-boite--verif > .titre { color: #047857; }
html.dark .ftms-app .ftms-doc-boite--verif { background: #0d2f22; }
html.dark .ftms-app .ftms-doc-boite--verif > .titre { color: #34d399; }
.ftms-app .ftms-doc-boite--piege { background: #fdf3e3; }
.ftms-app .ftms-doc-boite--piege > .titre { color: #b45309; }
html.dark .ftms-app .ftms-doc-boite--piege { background: #33230a; }
html.dark .ftms-app .ftms-doc-boite--piege > .titre { color: #fbbf24; }

/* Pas numérotés des encadrés Action */
.ftms-app .ftms-doc-boite--action ol { counter-reset: pas; list-style: none; padding-left: 2px; margin: 6px 0; }
.ftms-app .ftms-doc-boite--action ol li { counter-increment: pas; display: flex; gap: 9px; align-items: baseline; margin: 7px 0; }
.ftms-app .ftms-doc-boite--action ol li::before {
    content: counter(pas); flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    background: #0f766e; color: #fff; font-size: 12.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; transform: translateY(3px);
}

/* Lexique + valeurs saisies */
.ftms-app .ftms-doc-lexique { display: grid; gap: 0; margin: 14px 0; border: 1px solid #e5e7eb; border-radius: 11px; overflow: hidden; }
html.dark .ftms-app .ftms-doc-lexique { border-color: #263733; }
.ftms-app .ftms-doc-lexique > div { display: grid; grid-template-columns: 185px 1fr; gap: 12px; padding: 11px 15px; }
.ftms-app .ftms-doc-lexique > div:nth-child(even) { background: #f9fafb; }
html.dark .ftms-app .ftms-doc-lexique > div:nth-child(even) { background: #1d2b28; }
.ftms-app .ftms-doc-lexique dt { font-weight: 750; color: #115e59; }
html.dark .ftms-app .ftms-doc-lexique dt { color: #5eead4; }
.ftms-app .ftms-doc-lexique dd { margin: 0; color: #4b5563; }
html.dark .ftms-app .ftms-doc-lexique dd { color: #aebbb7; }
@media (max-width: 560px) { .ftms-app .ftms-doc-lexique > div { grid-template-columns: 1fr; gap: 2px; } }
.ftms-app .ftms-doc kbd, .ftms-app .ftms-doc-valeur {
    font-family: ui-monospace, Menlo, monospace; font-size: 15px;
    background: #f0f5f3; border: 1px solid #dbe5e2; border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
html.dark .ftms-app .ftms-doc kbd, html.dark .ftms-app .ftms-doc-valeur { background: #1b2926; border-color: #263733; }

/* Cartes de la bibliothèque */
.ftms-app .ftms-doc-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.ftms-app .ftms-doc-carte {
    display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
    border: 1px solid #e5e7eb; border-radius: 13px; background: #fff;
    text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s;
}
.ftms-app .ftms-doc-carte:hover { box-shadow: 0 6px 18px rgba(15, 118, 110, .10); transform: translateY(-1px); }
html.dark .ftms-app .ftms-doc-carte { background: #17211f; border-color: #263733; }
.ftms-app .ftms-doc-carte h3 { margin: 2px 0 0; font-size: 19px; }
.ftms-app .ftms-doc-carte p { margin: 0; font-size: 15px; color: #6b7280; }
html.dark .ftms-app .ftms-doc-carte p { color: #9aa0a6; }
.ftms-app .ftms-doc-carte .pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #6b7280; padding-top: 6px; }
.ftms-app .ftms-doc-carte .pied .cta { color: #0f766e; font-weight: 700; }
html.dark .ftms-app .ftms-doc-carte .pied .cta { color: #2dd4bf; }

/* Pied « guide suivant » */
.ftms-app .ftms-doc-suivant {
    margin-top: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-radius: 13px; background: #e6f2f0; border: 1px solid #dbe5e2;
}
html.dark .ftms-app .ftms-doc-suivant { background: #12312d; border-color: #263733; }
.ftms-app .ftms-doc table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
.ftms-app .ftms-doc .ftms-doc-tableau { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 11px; margin: 12px 0; }
html.dark .ftms-app .ftms-doc .ftms-doc-tableau { border-color: #263733; }
.ftms-app .ftms-doc th, .ftms-app .ftms-doc td { text-align: left; padding: 9px 14px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
html.dark .ftms-app .ftms-doc th, html.dark .ftms-app .ftms-doc td { border-bottom-color: #263733; }
.ftms-app .ftms-doc th { background: #f3f4f6; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #4b5563; }
html.dark .ftms-app .ftms-doc th { background: #1d2b28; color: #aebbb7; }
.ftms-app .ftms-doc tr:last-child td { border-bottom: none; }

/* ═══ Agenda de disponibilité (2026-08-16) — matrice ressources × jours ═══
   Cellules d'état compactes ; « probable » = hachures (repeating-linear-
   gradient) — jamais la couleur seule ; marqueur ↦ de libération sur le jour
   de fin (plein = fin actée, pointillé = fin prévue). */
.ftms-app .ftms-agenda-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ftms-app .ftms-agenda-table th,
.ftms-app .ftms-agenda-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: center; white-space: nowrap; vertical-align: middle; }
html.dark .ftms-app .ftms-agenda-table th,
html.dark .ftms-app .ftms-agenda-table td { border-bottom-color: #263733; }
.ftms-app .ftms-agenda-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; background: #f9fafb; }
html.dark .ftms-app .ftms-agenda-table th { color: #9aa8a4; background: #16211f; }
.ftms-app .ftms-agenda-table th.is-today,
.ftms-app .ftms-agenda-table td.is-today { background: #f0fdfa; }
html.dark .ftms-app .ftms-agenda-table th.is-today,
html.dark .ftms-app .ftms-agenda-table td.is-today { background: #113531; }
.ftms-app .ftms-agenda-th-ressource,
.ftms-app .ftms-agenda-ressource { text-align: left !important; font-weight: 600; position: sticky; left: 0; background: #fff; }
html.dark .ftms-app .ftms-agenda-ressource { background: #111827; }

.ftms-app .ftms-agenda-cell { display: inline-block; min-width: 74px; padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent; font-weight: 600; font-size: 11px; line-height: 1.5; }
.ftms-app .ftms-agenda-cell--dispo    { background: #dcfce7; border-color: #86efac; color: #166534; }
.ftms-app .ftms-agenda-cell--reserve  { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.ftms-app .ftms-agenda-cell--mission  { background: #1e40af; border-color: #1e3a8a; color: #fff; }
.ftms-app .ftms-agenda-cell--mad      { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.ftms-app .ftms-agenda-cell--conge    { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ftms-app .ftms-agenda-cell--indispo  { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; }
.ftms-app .ftms-agenda-cell--bloquant { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
/* Dispo PROBABLE : hachures teal — la texture double la couleur. */
.ftms-app .ftms-agenda-cell--dispo.is-probable {
    background: repeating-linear-gradient(135deg, #ccfbf1 0 6px, #f0fdfa 6px 12px);
    border-color: #5eead4; border-style: dashed; color: #0f766e; font-style: italic;
}
html.dark .ftms-app .ftms-agenda-cell--dispo    { background: #14532d; border-color: #166534; color: #bbf7d0; }
html.dark .ftms-app .ftms-agenda-cell--reserve  { background: #1e3a8a; border-color: #1e40af; color: #bfdbfe; }
html.dark .ftms-app .ftms-agenda-cell--mad      { background: #4c1d95; border-color: #5b21b6; color: #ddd6fe; }
html.dark .ftms-app .ftms-agenda-cell--conge    { background: #78350f; border-color: #92400e; color: #fde68a; }
html.dark .ftms-app .ftms-agenda-cell--indispo  { background: #1f2937; border-color: #374151; color: #9ca3af; }
html.dark .ftms-app .ftms-agenda-cell--bloquant { background: #7f1d1d; border-color: #991b1b; color: #fecaca; }
html.dark .ftms-app .ftms-agenda-cell--dispo.is-probable {
    background: repeating-linear-gradient(135deg, #134e4a 0 6px, #113531 6px 12px);
    border-color: #14b8a6; color: #5eead4;
}

.ftms-app .ftms-agenda-lib { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; color: #0f766e; border-bottom: 1px dashed #14b8a6; width: fit-content; margin-inline: auto; }
.ftms-app .ftms-agenda-lib.is-confirmee { border-bottom-style: solid; }
html.dark .ftms-app .ftms-agenda-lib { color: #5eead4; border-bottom-color: #2dd4bf; }

.ftms-app .ftms-agenda-legende { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 12px; color: #4b5563; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
html.dark .ftms-app .ftms-agenda-legende { color: #aebbb7; border-color: #263733; background: #111827; }
.ftms-app .ftms-agenda-legende > span { display: inline-flex; align-items: center; gap: 6px; }

/* ═══ Fil d'Ariane de l'entête (demande CEO 2026-08-17) ═══════════════════
   Pilier → Domaine → Liste parente, servi par FilArianeService ; le dernier
   maillon est le #ftms-topbar-title existant. Sur écran étroit, seuls le
   dernier lien (la liste parente) et le titre restent visibles. */
.ftms-app .ftms-topbar-ariane {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 0; white-space: nowrap;
}
.ftms-app .ftms-topbar-ariane__lien,
.ftms-app .ftms-topbar-ariane__txt {
    font-size: 12.5px; color: #6b7280; text-decoration: none;
    max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.ftms-app .ftms-topbar-ariane__lien:hover { color: #0f766e; text-decoration: underline; }
.ftms-app .ftms-topbar-ariane__sep { color: #d1d5db; font-size: 11px; user-select: none; }
@media (max-width: 900px) {
    /* Ne garder que le DERNIER lien (la liste parente) + le titre :
       le titre est un <span>, le dernier <a> est donc :last-of-type. */
    .ftms-app .ftms-topbar-ariane__lien:not(:last-of-type),
    .ftms-app .ftms-topbar-ariane__txt,
    .ftms-app .ftms-topbar-ariane__sep { display: none; }
}
html.dark .ftms-app .ftms-topbar-ariane__lien,
html.dark .ftms-app .ftms-topbar-ariane__txt { color: #9aa0a6; }
html.dark .ftms-app .ftms-topbar-ariane__lien:hover { color: #34d399; }
html.dark .ftms-app .ftms-topbar-ariane__sep { color: #3f4145; }

/* ═══ Édition d'une opération en onglets (rail .ftms-dossier) ═════════════
   Garde [hidden] scopée (piège n°1 : le form de demands/edit n'a ni
   .ftms-form ni .ftms-form--fiche) + règles dark que le bloc .ftms-dossier
   d'origine (fiche véhicule) n'avait jamais reçues. */
.ftms-app .ftms-dossier__panneau > [data-ftms-carte][hidden] { display: none !important; }
html.dark .ftms-app .ftms-dossier__groupe-titre { color: #6b7280; }
html.dark .ftms-app .ftms-dossier__lien { color: #9aa0a6; }
html.dark .ftms-app .ftms-dossier__lien:hover { background: #2a2b2e; color: #f3f4f6; }
html.dark .ftms-app .ftms-dossier__lien.est-actif {
    background: rgba(15, 118, 110, .22); color: #5eead4; border-left-color: #14b8a6;
}

/* ═══ Modale d'affectation — liste d'équipages (CEO 2026-08-17) ═══════════
   Tracteur + remorque attelée + conducteur affecté, pastille de
   disponibilité au jour de chargement (vert/orange/rouge). Le rouge est
   désactivé : la porte serveur le refuserait de toute façon. */
.ftms-app .ftms-equipages {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 320px; overflow-y: auto;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px;
}
.ftms-app .ftms-equipage {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
}
.ftms-app .ftms-equipage:hover { background: #f8fafc; }
.ftms-app .ftms-equipage:has(input:checked) {
    background: rgba(15, 118, 110, .07); border-color: #0f766e;
}
.ftms-app .ftms-equipage.is-indispo { cursor: not-allowed; opacity: .55; }
.ftms-app .ftms-equipage.is-indispo:hover { background: transparent; }
.ftms-app .ftms-equipage__pastille {
    display: inline-block; width: 10px; height: 10px; flex: none;
    border-radius: 9999px; background: #9ca3af;
}
.ftms-app .ftms-equipage__pastille--vert { background: #16a34a; }
.ftms-app .ftms-equipage__pastille--orange { background: #d97706; }
.ftms-app .ftms-equipage__pastille--rouge { background: #dc2626; }
.ftms-app .ftms-equipage__corps { display: flex; flex-direction: column; min-width: 0; }
.ftms-app .ftms-equipage__plaque { font-size: 13px; font-weight: 600; color: #111827; }
.ftms-app .ftms-equipage__etat { margin-left: 6px; font-size: 11px; font-weight: 500; color: #6b7280; }
.ftms-app .ftms-equipage__meta { font-size: 12px; color: #6b7280; }
.ftms-app .ftms-equipage__legende {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: #6b7280; margin-top: 2px;
}
.ftms-app .ftms-equipage__legende .ftms-equipage__pastille { margin-left: 10px; }
.ftms-app .ftms-equipage__legende .ftms-equipage__pastille:first-child { margin-left: 0; }
html.dark .ftms-app .ftms-equipages { border-color: #3f4145; }
html.dark .ftms-app .ftms-equipage:hover { background: #232427; }
html.dark .ftms-app .ftms-equipage:has(input:checked) {
    background: rgba(20, 184, 166, .12); border-color: #14b8a6;
}
html.dark .ftms-app .ftms-equipage__plaque { color: #f3f4f6; }
html.dark .ftms-app .ftms-equipage__etat,
html.dark .ftms-app .ftms-equipage__meta,
html.dark .ftms-app .ftms-equipage__legende { color: #9aa0a6; }
/* Récapitulatif d'équipage : hidden doit gagner contre display:flex (piège n°1). */
.ftms-app .ftms-equipage__legende[hidden] { display: none !important; }
/* Pastilles de statut dans la liste du picker (équipages mission) —
   mêmes tonalités que .ftms-equipage__pastille, option off grisée. */
.ftms-picker__pastille {
    display: inline-block; width: 10px; height: 10px; flex: none;
    border-radius: 9999px; background: #9ca3af; margin-right: 8px;
    vertical-align: baseline;
}
.ftms-picker__pastille--vert { background: #16a34a; }
.ftms-picker__pastille--orange { background: #d97706; }
.ftms-picker__pastille--rouge { background: #dc2626; }
.ftms-picker__option.is-off { opacity: .5; cursor: not-allowed; }

/* ═══ Mode FENÊTRE (UX CEO 2026-08-19) ════════════════════════════════════
   ?fenetre=1 sert la vue NUE (ni gnav, ni entête, ni rail) — consommée par
   la fenêtre superposée Ftms.fenetre (iframe isolée). L'objectif : ouvrir
   un assistant par-dessus l'écran courant sans navigation ni onglet. */
.ftms-app.is-ftms-fenetre #app > header,
.ftms-app.is-ftms-fenetre .ftms-dual-rail,
.ftms-app.is-ftms-fenetre .youtube-sidebar,
.ftms-app.is-ftms-fenetre .youtube-sidebar-backdrop { display: none !important; }
.ftms-app.is-ftms-fenetre .main-content-area { margin-left: 0 !important; min-height: 100vh; }

/* La fenêtre superposée elle-même (vit sur document.body). */
.ftms-fenetre-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(15, 23, 42, .45);
}
.ftms-fenetre-overlay[hidden] { display: none !important; }
.ftms-fenetre {
    display: flex; flex-direction: column; overflow: hidden;
    width: min(1280px, 96vw); height: min(860px, 92vh);
    background: var(--ftms-chrome, #ffffff); border-radius: 12px;
    box-shadow: 0 24px 64px rgba(2, 6, 23, .35);
}
.ftms-fenetre__barre {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; border-bottom: 1px solid var(--ftms-chrome-border, #e2e8f0);
}
.ftms-fenetre__titre { font-size: 14px; font-weight: 600; color: var(--ftms-chrome-text, #0f172a); }
.ftms-fenetre__actions { display: flex; align-items: center; gap: 10px; }
.ftms-fenetre__plein {
    font-size: 12px; font-weight: 600; color: var(--ftms-accent-text, #0f766e);
    text-decoration: none;
}
.ftms-fenetre__plein:hover { text-decoration: underline; }
.ftms-fenetre__fermer {
    border: 0; background: transparent; cursor: pointer;
    font-size: 20px; line-height: 1; color: #64748b; padding: 2px 6px;
}
.ftms-fenetre__fermer:hover { color: #0f172a; }
.ftms-fenetre__corps { flex: 1; min-height: 0; }
.ftms-fenetre__corps iframe { display: block; width: 100%; height: 100%; border: 0; background: #f8fafc; }
body.ftms-fenetre-ouverte { overflow: hidden; }
html.dark .ftms-fenetre { background: #0b1220; }
html.dark .ftms-fenetre__barre { border-color: #1f2937; }
html.dark .ftms-fenetre__titre { color: #f3f4f6; }
html.dark .ftms-fenetre__fermer:hover { color: #f3f4f6; }
html.dark .ftms-fenetre__corps iframe { background: #0b1220; }

/* Pop-up « Corriger la ligne » de l'import (UX CEO 2026-08-20) : réutilise
   la fenêtre superposée en format FORMULAIRE (hauteur au contenu). */
.ftms-fenetre--form { width: min(760px, 94vw); height: auto; max-height: 88vh; }
.ftms-fenetre__corps--form { overflow: auto; padding: 16px; }
.ftms-correction__erreur {
    margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
    font-size: 13px; color: #b91c1c; background: rgba(239, 68, 68, .08);
}
html.dark .ftms-correction__erreur { color: #fca5a5; }
.ftms-correction__grille { display: grid; gap: 10px 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ftms-correction__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bouton « Corriger » des lignes d'import en erreur (CEO 2026-08-20) :
   fond ROUGE — l'action de réparation se voit au premier coup d'œil. */
.ftms-btn-corriger {
    border: 0; cursor: pointer;
    padding: 4px 10px; border-radius: var(--ftms-r-md);
    font-size: 12px; font-weight: 600;
    background: #dc2626; color: #ffffff;
}
.ftms-btn-corriger:hover { background: #b91c1c; }
html.dark .ftms-btn-corriger { background: #b91c1c; }
html.dark .ftms-btn-corriger:hover { background: #991b1b; }

/* Étoile des requis conditionnels de la bande (piège n°1 : [hidden] doit gagner). */
.ftms-field [data-ftms-sc-star][hidden] { display: none !important; }

/* ── Champ en LECTURE seule (CEO 2026-08-22) ──
   Une valeur attribuée par le système (numéro de série, total calculé) se
   MONTRE, elle ne se saisit pas : même gabarit qu'un champ pour garder
   l'alignement de la grille, mais plat et non focusable. */
.ftms-app .ftms-input--lecture {
    display: flex; align-items: center; min-height: 38px; margin: 0;
    background: #f8fafc; border-color: transparent; color: #0f172a; font-weight: 600;
}
.dark .ftms-app .ftms-input--lecture { background: #1e293b; color: #e2e8f0; }

/* ── Lignes d'articles répétables (CEO 2026-08-22) ──
   Widget [data-ftms-lignes] : n rangées article / quantité / unité. Le
   hidden porte le JSON — sa règle [hidden] est explicite (piège n°1 : la
   grille de .ftms-form écrase la règle UA display:none). */
.ftms-app .ftms-lignes { display: flex; flex-direction: column; gap: 6px; }
.ftms-app .ftms-lignes [hidden] { display: none !important; }
.ftms-app .ftms-lignes__entete,
/* Colonnes DÉCLARÉES : la variable est posée par le widget (--ftms-l-grille),
   le repli garde la forme historique à 3 colonnes. */
.ftms-app .ftms-lignes__ligne { display: grid; grid-template-columns: var(--ftms-l-grille, minmax(0, 1fr) 110px 130px 32px); gap: 8px; align-items: center; }
.ftms-app .ftms-lignes__entete { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; }
.ftms-app .ftms-lignes__corps { display: flex; flex-direction: column; gap: 6px; }
.ftms-app .ftms-lignes__x { border: 0; background: transparent; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.ftms-app .ftms-lignes__x:hover { color: #dc2626; background: #fef2f2; }
/* Lignes FIGÉES (bon de commande émis) : lecture seule assumée, pas un bug d'affichage. */
.ftms-app .ftms-lignes--figees .ftms-input[disabled] { background: #f8fafc; color: #475569; cursor: not-allowed; opacity: 1; }
html.dark .ftms-app .ftms-lignes--figees .ftms-input[disabled] { background: #0f172a; color: #94a3b8; }
@media (max-width: 720px) {
    .ftms-app .ftms-lignes__entete { display: none; }
    .ftms-app .ftms-lignes__ligne { grid-template-columns: minmax(0, 1fr) 84px 100px 28px; gap: 4px; }
    /* Lignes chiffrées (devis) : trop de colonnes pour une rangée mobile —
       elles s'empilent deux par deux plutôt que de déborder. */
    .ftms-app .ftms-lignes--chiffrees .ftms-lignes__ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
    html.dark .ftms-app .ftms-lignes--chiffrees .ftms-lignes__ligne { border-bottom-color: #334155; }
}

/* ── Horaires d'ouverture par jour (CEO 2026-08-20, 2ᵉ itération) ──
   Widget hebdomadaire : une rangée par jour (case + 2 plages), présets. */
.ftms-app .ftms-horaires { display: flex; flex-direction: column; gap: 6px; }
.ftms-app .ftms-horaires__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.ftms-app .ftms-horaires__jour { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftms-app .ftms-horaires__nom { display: inline-flex; align-items: center; gap: 6px; width: 64px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ftms-app .ftms-horaires__plage { display: inline-flex; align-items: center; gap: 4px; }
.ftms-app .ftms-horaires__plage input[type="time"] { width: 108px; padding: 4px 6px; font-size: 12px; }
.ftms-app .ftms-horaires__plage input[type="time"]:disabled { opacity: 0.35; }
.ftms-app .ftms-horaires__tiret { color: #94a3b8; }

/* Sous-traitance (lot 3, 2026-08-23) — piège n°1 : `.ftms-form` pose
   display:grid et les blocs bascule un `grid`, donc l'UA `[hidden]` perd.
   Un <style> inline dans la vue est STRIPPÉ par la recompilation Vue de la
   page (vécu preuve-st-3) : la règle vit ICI. */
.ftms-form[hidden], .ftms-bloc-bascule[hidden], [data-confier-panneau][hidden] { display: none !important; }