/* ==========================================================================
   FabGes — Design system maison
   ========================================================================== */

:root {
    /* Neutrals (teinte bleu-gris, plus premium qu'un gris pur) */
    --gray-25:  #fcfcfd;
    --gray-50:  #f8f9fc;
    --gray-100: #f0f2f7;
    --gray-200: #e4e7ec;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;

    /* Accent — indigo profond */
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;

    /* États */
    --success: #12b76a;
    --success-bg: #ecfdf3;
    --warning: #f79009;
    --warning-bg: #fffaeb;
    --danger:  #f04438;
    --danger-bg: #fef3f2;
    --info: #4f46e5;
    --info-bg: #eef2ff;

    --color-bg: var(--gray-50);
    --color-surface: #ffffff;
    --color-border: var(--gray-200);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-600);
    --color-text-subtle: var(--gray-500);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 4px 8px -4px rgba(16, 24, 40, 0.06);
    --shadow-focus: 0 0 0 4px var(--primary-100);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -0.015em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* ==========================================================================
   Authentification
   ========================================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.16), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(79, 70, 229, 0.12), transparent 45%),
        var(--gray-900);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.25rem 2rem;
}

.auth-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-md);
}

.auth-card h1 { font-size: 1.375rem; margin-bottom: 0.25rem; }
.auth-subtitle { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1.75rem; }

.auth-form { display: flex; flex-direction: column; gap: 0.35rem; }
.auth-form .btn { margin-top: 1.5rem; width: 100%; }

.field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0.9rem 0 0.4rem;
}
.field-label:first-child { margin-top: 0; }

/* ==========================================================================
   Champs de formulaire
   ========================================================================== */

.input, select.input, textarea.input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input::placeholder { color: var(--color-text-subtle); }
.input:hover { border-color: var(--gray-300); }
.input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: var(--shadow-focus);
}
.input:disabled {
    background: var(--gray-100);
    color: var(--color-text-subtle);
    cursor: not-allowed;
    border-color: var(--color-border);
}
textarea.input { resize: vertical; min-height: 96px; }

select.input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

.field-hint { font-size: 0.8125rem; color: var(--color-text-subtle); margin-top: 0.35rem; }

.alert {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.alert-error { background: var(--danger-bg); color: #b42318; }
.alert-success { background: var(--success-bg); color: #067647; }
.alert-warning { background: var(--warning-bg); color: var(--warning); }

/* --- Mise en évidence : action attendue (admin ou opérateur), bandeau/carte/champs/lignes --- */
.alert-attention {
    border: 1.5px solid var(--warning);
    animation: attentionGlow 2s ease-in-out infinite;
}
.card-attention {
    border: 1.5px solid var(--warning);
    animation: attentionGlow 2s ease-in-out infinite;
}
/* Champs à vérifier/corriger dans une carte mise en évidence (ex: formulaire de renvoi). */
.card-attention .input {
    border-color: var(--warning);
    animation: attentionGlow 2s ease-in-out infinite;
}
@keyframes attentionGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 144, 9, 0.32); }
    50%      { box-shadow: 0 0 0 7px rgba(247, 144, 9, 0); }
}

/* Ligne de tableau concernée par une action en attente (admin ou opérateur selon la page) :
   vrai clignotement (bascule nette, pas un fondu) pour que ça saute aux yeux dans le tableau. */
@keyframes rowBlink {
    0%, 49%   { background: #fde68a; }
    50%, 100% { background: var(--color-surface); }
}
.table tbody tr.is-action-needed {
    animation: rowBlink 1s steps(1, end) infinite;
    border-left: 4px solid var(--warning);
}
.table tbody tr.is-action-needed:hover { animation-play-state: paused; background: #fde68a; }

/* --- Groupe de choix en pilules (remplace les champs texte libre) --- */

.pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pill-option {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    user-select: none;
}
.pill-option:hover { border-color: var(--gray-300); background: var(--gray-50); }
.pill-group input[type="radio"]:checked + .pill-option {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.pill-group input[type="radio"]:focus-visible + .pill-option { box-shadow: var(--shadow-focus); }

/* ==========================================================================
   Boutons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s var(--ease);
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primary {
    background: var(--primary-600);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--primary-700); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
    background: var(--color-surface);
    color: var(--gray-700);
    border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }

/* Action opérateur "Traitement terminé" : verte, bien distincte des actions admin. */
.btn-success {
    background: var(--success);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-success:hover { background: #0e9f5e; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-success:disabled { background: var(--gray-300); cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost { background: transparent; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-700); }

.btn-block { width: 100%; }

/* ==========================================================================
   Application — coquille (sidebar desktop / bottom nav mobile)
   ========================================================================== */

.app-shell { min-height: 100vh; }

.app-nav {
    background: var(--gray-900);
    color: #fff;
}

.app-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(16,24,40,0.18);
}

.app-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}
.app-nav-brand .auth-mark { margin-bottom: 0; width: 30px; height: 30px; font-size: 0.8rem; }
.app-nav-brand-text { display: none; }

.app-nav-links { display: flex; align-items: center; gap: 0.2rem; flex: 1; overflow-x: auto; }
.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s var(--ease);
    white-space: nowrap;
    flex-shrink: 0;
}
.app-nav-link span { display: none; }

.app-nav-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.app-nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.app-nav-link.active { color: #fff; background: var(--primary-600); }

.app-nav-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--gray-300);
    background: transparent;
    transition: all 0.15s var(--ease);
    text-decoration: none;
}
.bell-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.bell-btn svg { width: 20px; height: 20px; }
.bell-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--gray-900);
}
.bell-badge[hidden] { display: none; }

/* Clignotement + anneau de pulsation, mais uniquement quand une notification
   NON LUE attend réellement une action (pas pour un simple message informatif). */
.bell-badge.has-action {
    animation: badgeBlink 1s steps(1, end) infinite;
}
@keyframes badgeBlink {
    0%, 49%   { background: var(--danger); color: #fff; }
    50%, 100% { background: #fff; color: var(--danger); }
}
.bell-badge.has-action::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--danger);
    animation: bellPing 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes bellPing {
    0%   { transform: scale(1); opacity: 0.7; }
    75%, 100% { transform: scale(2.2); opacity: 0; }
}

.app-nav-user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0.5rem;
}
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.app-nav-user-info { display: none; }
.app-nav-user-name { font-size: 0.85rem; font-weight: 600; color: #fff; white-space: nowrap; }
.app-nav-user-role { font-size: 0.75rem; color: var(--gray-400); }

.app-main { padding: 1.5rem 1.25rem 3rem; max-width: 900px; margin: 0 auto; }
.app-main-wide { max-width: 1400px; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.375rem; }
.page-header p { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 0.2rem; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 650;
    font-size: 0.95rem;
}
.card-header svg { width: 19px; height: 19px; color: var(--primary-600); }
.card-body { padding: 1.5rem 1.4rem; }

/* Mobile (<900px) : barre horizontale réduite à la marque + au bouton menu.
   Le menu complet (liens, cloche, utilisateur) vit dans le tiroir off-canvas. */
.app-nav-links,
.app-nav-user { display: none; }

.hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
}
.hamburger-btn svg { width: 22px; height: 22px; }
.hamburger-btn:hover { background: rgba(255,255,255,0.08); }

.drawer-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
    z-index: 40;
}
.drawer-toggle-input:checked ~ .drawer-backdrop { opacity: 1; pointer-events: auto; }

.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    max-width: 82vw;
    background: var(--gray-900);
    color: #fff;
    z-index: 50;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease);
    box-shadow: var(--shadow-lg);
}
.drawer-toggle-input:checked ~ .offcanvas { transform: translateX(0); }

.offcanvas-right {
    left: auto;
    right: 0;
    width: 360px;
    transform: translateX(100%);
    background: var(--color-surface);
    color: var(--color-text);
    border-left: 1px solid var(--color-border);
}
.offcanvas-right .offcanvas-header { border-bottom-color: var(--color-border); }
.offcanvas-right .hamburger-btn { color: var(--gray-500); }
.offcanvas-right .hamburger-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.drawer-toggle-input:checked ~ .offcanvas-right { transform: translateX(0); }

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.offcanvas-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    flex: 1;
    overflow-y: auto;
}
.offcanvas-links .app-nav-link { justify-content: flex-start; }
.offcanvas-links .app-nav-link span { display: inline; }
.offcanvas-links .nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
}
.offcanvas-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.offcanvas-user-info { flex: 1; min-width: 0; }

@media (min-width: 900px) {
    .app-nav-links, .app-nav-user { display: flex; }
    .app-nav-user-info { display: block; }
    .nav-only { display: none; }
    .app-main { padding: 2.5rem 2rem 3rem; }
    .app-nav-links { overflow: visible; }

    /* Libellés visibles à côté des icônes, icônes réduites pour laisser la place au texte */
    .app-nav-links .app-nav-link span { display: inline; }
    .app-nav-links .app-nav-link svg { width: 16px; height: 16px; }
    .app-nav-links .app-nav-link { gap: 0.45rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; }

    /* Menu desktop : texte blanc au repos, inversion (fond blanc / texte noir) au survol */
    .app-nav-links .app-nav-link { color: #fff; }
    .app-nav-links .app-nav-link:hover { background: #fff; color: var(--gray-900); }
    .app-nav-links .app-nav-link.active:hover { background: var(--primary-700); color: #fff; }
}
/* ==========================================================================
   Stepper (assistant "Nouvelle requête")
   ========================================================================== */

.stepper {
    display: flex;
    align-items: center;
    padding: 1.4rem 1.4rem 1.6rem;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
.step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    background: var(--gray-100);
    color: var(--gray-400);
    border: 2px solid transparent;
    transition: all 0.2s var(--ease);
}
.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-subtle);
    white-space: nowrap;
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    margin: 0 0.5rem;
    position: relative;
    top: -18px;
    transition: background 0.25s var(--ease);
}
.step.is-active .step-circle { background: var(--primary-600); color: #fff; box-shadow: var(--shadow-focus); }
.step.is-active .step-label { color: var(--primary-600); }
.step.is-done .step-circle { background: var(--success); color: #fff; }
.step.is-done .step-label { color: var(--gray-700); }
.step.is-done + .step-line { background: var(--success); }

.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: fadeSlideIn 0.25s var(--ease); }
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1.1rem 1.4rem;
    border-top: 1px solid var(--color-border);
}
.wizard-actions-right { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.next-hint { flex-basis: 100%; text-align: right; margin: 0; }
.next-hint:empty { display: none; }

@media (max-width: 520px) {
    .wizard-actions { flex-direction: column; padding: 1rem; }
    .wizard-actions > span { display: none; }
    .wizard-actions-right { flex-direction: column-reverse; width: 100%; }
    .wizard-actions-right .btn,
    .wizard-actions > [data-action="prev"] { width: 100%; }
    .btn { padding: 0.65rem 0.9rem; font-size: 0.875rem; }
}

.field-group { margin-bottom: 1.15rem; }
.field-group:last-child { margin-bottom: 0; }
.field-row { display: flex; gap: 1rem; }
.field-row .field-group { flex: 1; }

/* Résumé du dossier (rappel affiché aux étapes suivantes) */
.context-recap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--primary-50);
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
}
.context-recap .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--primary-700);
    font-weight: 600;
}
.context-recap .tag::after { content: '›'; color: var(--primary-300, var(--primary-500)); font-weight: 400; margin-left: 0.45rem; }
.context-recap .tag:last-child::after { content: ''; }

/* Badges de statut */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 650;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

/* Confirmation d'envoi */
.wizard-success { text-align: center; padding: 2.5rem 1.4rem; }
.wizard-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}
.wizard-success-icon svg { width: 28px; height: 28px; }
.wizard-success h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.wizard-success p { color: var(--color-text-muted); font-size: 0.9rem; }
.wizard-success .btn { margin-top: 1.5rem; }

/* Autocomplete fournisseur */
.autocomplete-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 220px;
    overflow-y: auto;
    z-index: 10;
}
.autocomplete-item {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.autocomplete-item:hover { background: var(--primary-50); }

/* ==========================================================================
   Filtres & tableaux
   ========================================================================== */

.filter-toolbar { border-bottom: 1px solid var(--color-border); }

.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 1rem 1.4rem;
    width: calc(100% - 2.8rem);
}
.filter-toggle-btn svg { width: 17px; height: 17px; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1.1rem 1.4rem;
}
.filter-bar .input { width: auto; min-width: 150px; flex: 1; }

@media (max-width: 899px) {
    .filter-toggle-btn { display: inline-flex; }
    .filter-bar { display: none; padding-top: 0; }
    .filter-bar.is-open { display: flex; }
}

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; table-layout: fixed; }
.table th {
    text-align: left;
    padding: 0.7rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-subtle);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table td {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    overflow-wrap: break-word;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--gray-25); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--primary-50); }
.table tbody tr.is-clickable:hover .dossier-link { color: var(--primary-700); }

/* Requêtes non traitées : fond légèrement teinté pour un repérage immédiat */
.table tbody tr.is-untreated { background: #fffbeb; }
.table tbody tr.is-untreated:hover { background: #fef3c7; }
@media (max-width: 899px) {
    .table tbody tr.is-untreated { background: #fffbeb; border-color: #fde68a; }
}

.table-delete-cell { text-align: center; }
.table-subtext { font-size: 0.75rem; color: var(--color-text-subtle); margin-top: 0.15rem; }
.table-desc { white-space: normal; }
.table-empty { padding: 2.5rem 1.4rem; text-align: center; color: var(--color-text-subtle); font-size: 0.9rem; }

.input-sm { padding: 0.4rem 0.6rem; font-size: 0.8rem; min-width: 0; width: 100%; border-radius: var(--radius-sm); }

/* En dessous de 900px : la table se transforme en liste de cartes empilées
   (une ligne = un bloc, libellé + valeur) pour bannir tout scroll horizontal. */
@media (max-width: 899px) {
    .table-wrap { overflow-x: hidden; }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table thead { display: none; }
    .table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin: 0 1rem 0.75rem;
        width: auto;
        overflow: hidden;
    }
    .table tbody tr:last-child { margin-bottom: 1rem; }
    .table td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
        border-bottom: 1px dashed var(--color-border);
    }
    .table td:last-child { border-bottom: none; }
    .table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        font-size: 0.7rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-subtle);
    }
    .table-desc { text-align: right; }
    .input-sm { width: auto; }
}

@media (max-width: 480px) {
    .filter-bar .input { width: 100%; flex: none; }
}

/* ==========================================================================
   Notifications
   ========================================================================== */

.notif-item {
    display: flex;
    gap: 0.85rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s var(--ease);
}
.notif-item:last-child { border-bottom: none; }
a.notif-item:hover { background: var(--gray-25); }
.notif-item .notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.4rem;
    flex-shrink: 0;
    background: transparent;
}
.notif-item.is-unread .notif-dot { background: var(--primary-600); }
.notif-item.is-unread { background: var(--primary-50); }

/* Notification non lue qui attend une action : pastille clignotante rouge, plus
   pressante que le simple point bleu "non lu". */
.notif-item.is-action-needed .notif-dot {
    width: 10px;
    height: 10px;
    background: var(--danger);
    animation: badgeBlink 1s steps(1, end) infinite;
}
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 650; font-size: 0.9rem; }
.notif-message { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.notif-time { font-size: 0.78rem; color: var(--color-text-subtle); margin-top: 0.4rem; }

/* ==========================================================================
   Détail requête / chiffrage
   ========================================================================== */

.dossier-link { color: var(--gray-900); font-weight: 650; transition: color 0.15s var(--ease); }

#detail-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.header-cost-card {
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md);
    text-align: right;
    flex-shrink: 0;
}
.header-cost-card.is-positive { background: var(--success-bg); }
.header-cost-card.is-negative { background: var(--danger-bg); }
.header-cost-label { font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-subtle); }
.header-cost-value { font-size: 1.2rem; font-weight: 700; margin-top: 0.15rem; }
.header-cost-card.is-positive .header-cost-value { color: var(--success); }
.header-cost-card.is-negative .header-cost-value { color: var(--danger); }

/* --- Page de détail requête : 3 colonnes (résumé fixe / traitement / fil) --- */

.requete-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1.25fr) 300px;
    gap: 1.25rem;
    align-items: start;
}
.requete-col-sidebar, .requete-col-timeline { position: sticky; top: 5.5rem; }

/* --- Carte Résumé : mise en relief (embossée) pour bien la démarquer des autres --- */
.card-embossed {
    background: linear-gradient(160deg, #ffffff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-200);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 0 rgba(16, 24, 40, 0.03),
        0 10px 20px -8px rgba(16, 24, 40, 0.14),
        0 22px 36px -16px rgba(16, 24, 40, 0.16);
}
.card-embossed .card-header {
    background: linear-gradient(180deg, var(--gray-50), rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--gray-200);
}

.summary-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; }
.summary-list > div { display: flex; flex-direction: column; gap: 0.2rem; }
.summary-list dt { font-size: 0.7rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary-700); }
.summary-list dd { margin: 0; font-size: 0.9rem; }
.summary-description { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }
.summary-description p { font-size: 0.875rem; line-height: 1.55; }

#traitement-card { transition: opacity 0.2s var(--ease); }
#traitement-card.is-fading { opacity: 0.4; }

.stepper-compact { padding: 0.25rem 0 1.4rem; }
.stepper-compact .step-label { font-size: 0.7rem; }
/* Traitement d'une requête : l'étape en cours est orange (ce qui est en train de se
   faire), les étapes franchies restent vertes. */
.stepper-compact .step.is-active .step-circle { background: var(--warning); color: #fff; box-shadow: 0 0 0 4px #fef0c7; }
.stepper-compact .step.is-active .step-label { color: #b54708; }

.traitement-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.traitement-description {
    margin: 0 0 0.9rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--color-text);
}

/* Fin de traitement signalée par l'opérateur : bandeau coloré, l'admin doit trancher. */
.traitement-fin {
    display: flex;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid #fec84b;
    border-left-width: 5px;
    border-radius: var(--radius-md);
    background: #fffaeb;
    color: #7a2e0e;
    font-size: 0.9rem;
    line-height: 1.55;
}
.traitement-fin svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.1rem; color: #dc6803; }
.traitement-fin strong { font-weight: 700; color: #7a2e0e; }
.traitement-fin a { font-weight: 700; color: var(--primary-700); text-decoration: underline; }
.chiffrage-show { display: inline-block; font-size: 0.875rem; font-weight: 600; }
.chiffrage-show[hidden] { display: none; }

.traitement-justificatif {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0.55rem 0.75rem;
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.traitement-justificatif svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-subtle); }
.traitement-justificatif a { font-weight: 600; }

/* --- Question « La requête est-elle conforme ? » (statut Reçue) : vrais radios HTML --- */
.conformite-check { margin-top: 0.5rem; }

/* Zone « Traitement terminé » (opérateur) : justificatif facultatif avant confirmation.
   .terminer-zone n'a pas de display: déclaré, donc [hidden] fonctionne nativement ;
   seule .terminer-file-row (jamais togglée par [hidden]) a besoin de flex. */
.terminer-zone { margin-top: 0.9rem; }
.terminer-file-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; margin-top: 0.4rem; }
.radio-group { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 0.9rem; }
.radio-group-inline { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.radio-option { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--color-text); cursor: pointer; }
.radio-option input[type="radio"] { width: 17px; height: 17px; accent-color: var(--primary-600); cursor: pointer; flex-shrink: 0; }

/* --- Rattacher un mouvement : bloc incrusté entre le stepper et les actions --- */
.chiffrage-inline {
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.8rem 0.9rem;
    margin: 0.9rem 0;
}
/* Mouvement financier : question + 3 radios toujours visibles, zone de saisie du choix coché en dessous. */
.chiffrage-question { margin: 0 0 0.55rem; }
#chiffrage-type-picker { margin-bottom: 0.4rem; }
.chiffrage-panel {
    margin-top: 0.6rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.chiffrage-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.65rem; }
.chiffrage-source-label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); }
.chiffrage-source .pill-option { padding: 0.35rem 0.85rem; font-size: 0.8125rem; }
.chiffrage-prefill-hint { margin: 0.55rem 0 0; }
.chiffrage-btn { padding: 0.5rem 0.95rem; font-size: 0.8125rem; }
/* display:flex l'emporterait sur la règle UA [hidden] { display:none } sans ceci
   (une déclaration auteur bat toujours une déclaration user-agent). */
.chiffrage-line[hidden], .chiffrage-submit-row[hidden] { display: none; }

.chiffrage-line { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.chiffrage-line .input-sm { min-width: 0; }
.chiffrage-line input[type="text"].input-sm,
.chiffrage-line input[type="number"].input-sm { flex: 1 1 90px; }
.chiffrage-line input[type="date"].input-sm { flex: 0 1 128px; }
.chiffrage-line input[type="file"].input-sm { flex: 1 1 130px; padding: 0.3rem 0.5rem; font-size: 0.75rem; }
.chiffrage-line select.input-sm { flex: 1 1 120px; }
.chiffrage-line .link-btn { font-size: 0.75rem; white-space: nowrap; }

.chiffrage-submit-row { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; }

/* Bouton icône discret : valider (✓ vert) / annuler (✕ rouge) une saisie, plutôt
   qu'un gros bouton primaire qui laisse croire à une validation de la requête. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn-success { color: var(--success); }
.icon-btn-success:hover { background: var(--success-bg); border-color: var(--success); }
.icon-btn-danger { color: var(--danger); }
.icon-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn:disabled:hover { background: var(--color-surface); border-color: var(--color-border); }

/* Rappel qu'un ou plusieurs mouvements financiers existent déjà sur cette requête. */
/* Mouvements déjà enregistrés sur la requête : une ligne par mouvement */
.mouvements-recap { margin-bottom: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); overflow: hidden; }
.mouvements-recap[hidden] { display: none; }
.mouvements-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.8rem;
    background: var(--success-bg);
    color: #067647;
    font-size: 0.8125rem;
    font-weight: 600;
}
.mouvements-head strong { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mouvements-list { list-style: none; margin: 0; padding: 0; }
.mouvement-item {
    display: grid;
    /* Ligne 1 : date, voie, montant, boutons. Ligne 2 : le commentaire et le document, sur toute la largeur. */
    grid-template-columns: 76px minmax(0, 1fr) auto auto;
    gap: 0.3rem 0.8rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--gray-100);
    font-size: 0.8375rem;
    line-height: 1.45;
}
.mouvement-date { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.mouvement-type { font-weight: 650; color: var(--gray-800); }
.mouvement-detail { grid-column: 1 / -1; order: 5; color: var(--color-text-muted); min-width: 0; overflow-wrap: break-word; }
.mouvement-detail:empty { display: none; }
.mouvement-detail .doc-link { margin-left: 0.5rem; }
.mouvement-montant { font-weight: 700; color: var(--gray-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Corriger / supprimer un mouvement (admin, tant que la requête accepte des mouvements) */
.mouvement-actions { display: inline-flex; gap: 0.3rem; justify-self: end; }
.mouvement-btn { width: 28px; height: 28px; color: var(--gray-500); }
.mouvement-btn svg { width: 14px; height: 14px; }
.mouvement-btn:hover { color: var(--primary-700); border-color: var(--primary-100); background: var(--primary-50); }
.mouvement-btn.icon-btn-danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
/* En correction : l'intitulé, puis les champs sur toute la largeur, puis les boutons. */
.mouvement-item--edit { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; background: var(--primary-50); }
.mouvement-edit-fields { display: flex; flex-wrap: wrap; gap: 0.45rem; min-width: 0; }
.mouvement-edit-fields .input-sm { width: auto; flex: 1 1 110px; }
.mouvement-edit-fields input[type="date"] { flex: 0 1 150px; }
.mouvement-edit-fields input[type="number"] { flex: 0 1 140px; }
.mouvement-edit-fields select { flex: 0 1 120px; }
.mouvement-edit-fields input[type="text"] { flex: 1 1 180px; }
.mouvement-error { grid-column: 1 / -1; margin: 0.2rem 0 0; }
@media (max-width: 560px) {
    .mouvement-item { grid-template-columns: minmax(0, 1fr) auto; }
    .mouvement-item .mouvement-actions { grid-column: 1 / -1; justify-self: start; }
    .mouvement-item--edit { grid-template-columns: minmax(0, 1fr); }
    .mouvement-item--edit .mouvement-actions { justify-self: start; }
}

/* Lien vers un document joint (devis, justificatif) : même rendu partout */
.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-link:hover { background: var(--primary-100); }
.doc-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.summary-docs dd { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.timeline-doc { margin-top: 0.35rem; }

/* --- Fil de traitement (timeline verticale) --- */

.timeline { position: relative; }
.timeline-item { position: relative; display: flex; gap: 0.85rem; padding-bottom: 1.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -4px;
    width: 2px;
    background: var(--color-border);
}
.timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.timeline-dot svg { width: 15px; height: 15px; }
.timeline-item.evt-creation .timeline-dot { background: var(--info-bg); color: var(--info); }
.timeline-item.evt-statut .timeline-dot { background: var(--primary-50); color: var(--primary-600); }
.timeline-item.evt-cout .timeline-dot { background: var(--success-bg); color: var(--success); }
.timeline-item.evt-commentaire .timeline-dot { background: var(--warning-bg); color: var(--warning); }
.timeline-item.evt-modification .timeline-dot { background: var(--danger-bg); color: #b42318; }
/* Événement qui change le statut : la pastille du statut suit le titre, et le point prend sa couleur. */
.timeline-title .badge { margin-left: 0.45rem; vertical-align: 1px; }
/* Statut déjà franchi : vert et barré (« c'est fait »). Le statut courant reste lisible. */
.badge-fait { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.8; }
/* … et toute la ligne est barrée, pas seulement la pastille. */
.timeline-item.is-fait .timeline-title { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--gray-500); }
.timeline-item.is-fait .timeline-detail { text-decoration: line-through; color: var(--color-text-subtle); }
.timeline-item.tl-success .timeline-dot { background: var(--success-bg); color: var(--success); }
.timeline-item.tl-warning .timeline-dot { background: var(--warning-bg); color: var(--warning); }
.timeline-item.tl-danger .timeline-dot { background: var(--danger-bg); color: #b42318; }
.timeline-item.tl-info .timeline-dot { background: var(--info-bg); color: var(--info); }
.timeline-content { flex: 1; min-width: 0; padding-top: 0.3rem; }
.timeline-title { font-size: 0.85rem; font-weight: 650; }
.timeline-detail { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.timeline-meta { font-size: 0.72rem; color: var(--color-text-subtle); margin-top: 0.3rem; }

/* Fil d'Ariane : hiérarchie Client › Projet › Dossier bien visible en haut des pages de détail */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
}
.breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.2rem 0.1rem;
}
.breadcrumb a:hover { color: var(--primary-600); }
.breadcrumb .crumb-sep { color: var(--gray-300); font-weight: 400; }
.breadcrumb .crumb-current { color: var(--primary-700); font-weight: 700; }

@media (max-width: 1180px) {
    .requete-layout { grid-template-columns: 1fr; }
    .requete-col-sidebar, .requete-col-timeline { position: static; }
}

/* ==========================================================================
   Modale (confirmation d'abandon, etc.)
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem;
    max-width: 400px;
    width: 100%;
}
.modal-box h2 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.modal-box p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; }
/* Modale large à contenu défilant (fil de traitement en grand) */
.modal-box-wide { max-width: 680px; max-height: 86vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-border); }
.modal-box .modal-head h2 { margin: 0; }
.modal-scroll { padding: 1.4rem; overflow-y: auto; }

/* Fil de traitement : hauteur limitée dans la carte, bouton pour l'agrandir */
.timeline-scroll { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
.timeline-count { padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--gray-100); color: var(--gray-600); font-size: 0.72rem; font-weight: 650; }
.timeline-count:empty { display: none; }
.timeline-expand { margin-left: auto; width: 30px; height: 30px; color: var(--gray-500); }
.timeline-expand:hover { color: var(--primary-700); border-color: var(--primary-100); background: var(--primary-50); }
.timeline-expand[hidden] { display: none; }
.card-header .timeline-expand svg { width: 15px; height: 15px; color: inherit; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ==========================================================================
   Portefeuilles clients / fiche client / dashboard
   ========================================================================== */

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.client-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: all 0.15s var(--ease);
}
.client-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-200, var(--primary-100)); }
.client-card-avatar {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
}
.client-card-avatar svg { width: 22px; height: 22px; }
.client-card-logo {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border);
}
.client-card-name { font-weight: 700; font-size: 1.02rem; color: var(--gray-900); }
.client-card-hint { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-top: 0.2rem; }
.client-card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--color-bg);
}
.client-card-badge--static { position: static; box-shadow: none; flex-shrink: 0; }

.badge-legend {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 1.1rem;
}
.client-card-edit {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s var(--ease);
}
.client-card-edit svg { width: 15px; height: 15px; }
.client-card:hover .client-card-edit { opacity: 1; }
.client-card-edit:hover { background: var(--primary-100); color: var(--primary-700); }

.year-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.year-tab {
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--gray-600);
    cursor: pointer;
}
.year-tab.is-active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Variante compacte : attire l'œil sans concurrencer le tableau (élément principal) */
.kpi-row-compact {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0;
}
.kpi-tile-compact {
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--color-border);
    background: var(--gray-25);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: none;
}
.kpi-tile-compact::before { display: none; }
.kpi-tile-compact:hover { border-color: var(--primary-300, var(--primary-500)); background: var(--color-surface); transform: none; box-shadow: var(--shadow-xs); }
.kpi-tile-compact .kpi-label { font-size: 0.68rem; }
.kpi-tile-compact .kpi-value { font-size: 1.15rem; margin-top: 0.15rem; }
.kpi-tile-compact.is-active { border-color: var(--primary-600); background: var(--primary-50); }
.kpi-tile-compact.is-active .kpi-value { color: var(--primary-700); }

.requetes-traitees-kpi {
    padding: 0.5rem 0.9rem;
    border: 1.5px solid var(--color-border);
    background: var(--gray-25);
    border-radius: var(--radius-md);
}
.requetes-traitees-kpi .kpi-label { font-size: 0.68rem; }
.requetes-traitees-kpi .kpi-value { font-size: 1.1rem; margin-top: 0.1rem; }
.kpi-tile {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
    cursor: pointer;
}
.kpi-tile::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 35%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s var(--ease);
    pointer-events: none;
}
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-tile:hover::before { left: 130%; }

.kpi-tile--revenue { background: linear-gradient(160deg, #f0fdf6 0%, var(--color-surface) 65%); border-color: #bdf0d2; }
.kpi-tile--expense { background: linear-gradient(160deg, #fef3f2 0%, var(--color-surface) 65%); border-color: #fdd2ce; }
.kpi-tile--benefit { background: linear-gradient(160deg, #ecfeff 0%, var(--color-surface) 65%); border-color: #a9eef7; }
.kpi-tile--margin  { background: linear-gradient(160deg, #f5f3ff 0%, var(--color-surface) 65%); border-color: #ddd5fc; }
.kpi-tile--budget  { background: linear-gradient(160deg, #fffbeb 0%, var(--color-surface) 65%); border-color: #fde5a8; cursor: default; }
.kpi-tile--budget:hover { transform: none; box-shadow: var(--shadow-xs); }

.kpi-label { font-size: 0.75rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-subtle); }
.kpi-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.35rem; }
.kpi-value.is-positive, .kpi-value .is-positive { color: var(--success); }
.kpi-value.is-negative, .kpi-value .is-negative { color: var(--danger); }
.kpi-tile { text-decoration: none; color: inherit; display: block; }

.kpi-tile-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--primary-600);
    margin-top: 0.7rem;
    opacity: 0.75;
    transition: all 0.15s var(--ease);
}
.kpi-tile-hint svg { width: 13px; height: 13px; transition: transform 0.15s var(--ease); }
a.kpi-tile:hover .kpi-tile-hint { opacity: 1; }
a.kpi-tile:hover .kpi-tile-hint svg { transform: translateX(2px); }

/* Bloc Projets : panneau "incrusté" avec profondeur */
.inset-panel {
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: inset 0 1px 3px rgba(16, 24, 40, 0.06), var(--shadow-xs);
}
.inset-panel-header { margin-bottom: 1rem; }
.inset-panel-header h2 { font-size: 1.05rem; font-weight: 700; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.project-card {
    display: block;
    padding: 1.2rem 1.3rem;
    background: var(--color-surface);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(16,24,40,0.04) inset, var(--shadow-sm);
    transition: all 0.15s var(--ease);
}
.project-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, var(--shadow-md); transform: translateY(-2px); border-color: var(--primary-200, var(--primary-100)); }
.project-card-name { font-weight: 700; font-size: 1rem; color: var(--gray-900); letter-spacing: -0.01em; }
.project-card-hint { font-size: 0.8rem; font-weight: 600; color: var(--primary-600); margin-top: 0.45rem; }

/* --- Page projet : barre latérale des projets du même client --- */

.projet-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.projet-sidebar { width: 250px; flex-shrink: 0; position: sticky; top: 5.5rem; }
.projet-main { flex: 1; min-width: 0; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.15s var(--ease);
}
.sidebar-link:hover { background: var(--gray-50); color: var(--gray-900); }
.sidebar-link.is-active { background: var(--primary-50); color: var(--primary-700); }
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }

.client-side-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.5rem;
    text-decoration: none;
    color: var(--gray-700);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s var(--ease);
}
.client-side-link:last-child { border-bottom: none; }
.client-side-link:hover { background: var(--gray-50); }
.client-side-link.is-active { background: var(--primary-50); color: var(--primary-700); }
.client-side-logo, .client-side-avatar { width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }
.client-side-logo { object-fit: cover; }
.client-side-avatar { background: var(--gray-100); color: var(--gray-400); display: flex; align-items: center; justify-content: center; }
.client-side-avatar svg { width: 16px; height: 16px; }
.client-side-name { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }

@media (max-width: 900px) {
    .projet-layout { flex-direction: column; }
    .projet-sidebar { width: 100%; position: static; }
}

/* --- Onglets (effet relief / embossé) --- */

.tabs-nav {
    display: flex;
    gap: 0.4rem;
    padding: 0 0.25rem;
}
.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--gray-100);
    color: var(--gray-500);
    font-weight: 650;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.05);
    transform: translateY(3px);
    transition: all 0.2s var(--ease);
    position: relative;
    z-index: 1;
}
.tab-btn svg { width: 16px; height: 16px; }
.tab-btn:hover { color: var(--gray-800); background: var(--gray-50); }
.tab-btn.is-active {
    background: var(--color-surface);
    color: var(--primary-700);
    transform: translateY(0);
    box-shadow: 0 -3px 10px rgba(16, 24, 40, 0.07);
    z-index: 2;
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeSlideIn 0.25s var(--ease); }
.card-tab { border-top-left-radius: 0; margin-bottom: 1.25rem; }

/* --- Sous-onglets KPI (INCOME / EXPENSES / BENEFITS / MARGING) --- */

.kpi-subtabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 1rem;
}
.kpi-subtabs-bar[hidden] { display: none; }
.kpi-subtabs-bar-left { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.kpi-top-name { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.subtabs-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.subtab-btn {
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--gray-600);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all 0.15s var(--ease);
}
.subtab-btn:hover { border-color: var(--primary-300, var(--primary-500)); color: var(--gray-900); }
.subtab-btn.is-active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; box-shadow: var(--shadow-sm); }

.recap-table { font-size: 0.82rem; table-layout: auto; }
.recap-table th { text-align: right; white-space: nowrap; padding: 0.6rem 0.7rem; }
.recap-table th:first-child { text-align: left; }
.recap-label { text-align: left; font-weight: 600; color: var(--gray-800); white-space: nowrap; }
.recap-cell { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-700); padding: 0.55rem 0.7rem; }
.recap-total-row { background: var(--gray-50); font-weight: 700; }
.recap-total-row .recap-label, .recap-total-row .recap-cell { color: var(--gray-900); }
.recap-total-cell { border-left: 1px solid var(--color-border); }

.viz-root {
    color-scheme: light;
    --surface-1: #fcfcfb;
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --grid-line: var(--gray-200);
}
.chart-card { margin-bottom: 1.5rem; }

.chart-subsection { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.chart-subsection-header { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 0.95rem; color: var(--gray-800); margin-bottom: 1rem; }
.chart-subsection-header svg { width: 19px; height: 19px; color: var(--primary-600); }
.chart-legend { display: flex; gap: 1.1rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.chart-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--gray-900);
    color: #fff;
    font-size: 0.78rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transform: translate(-50%, -100%);
    white-space: nowrap;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.1s var(--ease);
}
.chart-tooltip.is-visible { opacity: 1; }

.locked-hint {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--gray-50);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
}
.locked-hint svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-subtle); }
.locked-hint[hidden] { display: none; }


.link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 650;
    color: var(--primary-600);
    cursor: pointer;
    font-family: inherit;
}
.link-btn:hover { color: var(--primary-700); text-decoration: underline; }

/* Fil d'Ariane : hiérarchie Client › Projet › Dossier bien visible en haut des pages de détail */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.1rem;
}
.breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.2rem 0.1rem;
}
.breadcrumb a:hover { color: var(--primary-600); }
.breadcrumb .crumb-sep { color: var(--gray-300); font-weight: 400; }
.breadcrumb .crumb-current { color: var(--primary-700); font-weight: 700; }

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

/* ==========================================================================
   Fiche projet — volet des requêtes du dossier sélectionné (colonnes triables).
   Préfixe rq- : propre à projet-detail.php.
   ========================================================================== */

.rq-title { font-size: 0.95rem; font-weight: 650; }
.rq-count {
    margin-left: auto;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
}
.rq-count:empty { display: none; }

/* Bouton compact (tri de la colonne Dossiers) */
.rq-btn { padding: 0.5rem 0.85rem; font-size: 0.8125rem; }

/* En-têtes triables */
.rq-table th[data-sort] { padding: 0; }
.th-sort {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: none;
    background: none;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.th-sort:hover { color: var(--gray-800); background: var(--gray-50); }
.th-sort:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.th-sort::after {
    content: '';
    flex-shrink: 0;
    border: 4px solid transparent;
    border-top-color: currentColor;
    transform: translateY(2px);
    opacity: 0.3;
}
.rq-table th[aria-sort="ascending"] .th-sort,
.rq-table th[aria-sort="descending"] .th-sort { color: var(--primary-700); }
.rq-table th[aria-sort="ascending"] .th-sort::after { opacity: 1; transform: translateY(-2px) rotate(180deg); }
.rq-table th[aria-sort="descending"] .th-sort::after { opacity: 1; }

.rq-cell-date span { white-space: nowrap; }
.rq-table .table-delete-cell { padding-left: 0; padding-right: 0.5rem; }

/* --- Fiche projet : vue en colonnes façon Finder (projets | dossiers | requêtes) --- */

/* Trois volets côte à côte : la page s'autorise plus de largeur que les autres écrans larges. */
.app-main-projet { max-width: 1720px; }

.finder {
    display: grid;
    grid-template-columns: 190px 215px minmax(0, 1fr);
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.finder-pane { min-width: 0; }
.finder-pane + .finder-pane { border-left: 1px solid var(--color-border); }
.finder-pane-side { background: var(--gray-25); }
.finder-pane-projets { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.finder .card-header { min-height: 3.65rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.finder-pane-side .card-header { padding-left: 1rem; padding-right: 0.8rem; white-space: nowrap; }

/* Les deux volets de navigation restent visibles pendant qu'on fait défiler le tableau,
   et leur liste défile indépendamment, comme les colonnes du Finder. */
.finder-pane-inner {
    position: sticky;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 6.5rem);
}
.finder-tools {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}
.finder-tools .input-sm { flex: 1; padding: 0.45rem 0.6rem; }
.finder-sort { flex-shrink: 0; padding: 0.4rem 0.55rem; font-size: 0.75rem; white-space: nowrap; }
.finder-list { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem; overflow-y: auto; }

.finder-item {
    width: 100%;
    border: none;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0.5rem 0.65rem;
}
.finder-list .sidebar-link { flex-shrink: 0; }
.finder-list .sidebar-link:hover { background: var(--gray-100); }
.finder-list .sidebar-link.is-active {
    background: var(--primary-50);
    color: var(--primary-700);
    box-shadow: inset 3px 0 0 var(--primary-600);
}
.finder-item:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.finder-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-item-label mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.finder-item.is-active .finder-item-label mark { background: #fde68a; }
.finder-item-count { font-size: 0.72rem; font-weight: 650; color: var(--color-text-subtle); }
.finder-item.is-active .finder-item-count { color: var(--primary-700); }
.finder-item-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.finder-empty { padding: 1rem 0.65rem; font-size: 0.8125rem; color: var(--color-text-subtle); }

/* --- Volet du dossier : deux niveaux nettement séparés ---------------------- */

.rq-level-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.rq-level-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-700);
}
.rq-level-title svg { width: 17px; height: 17px; color: var(--primary-600); }
.rq-level-sub { font-size: 0.8125rem; color: var(--color-text-subtle); }
/* Une période est choisie : on la met en évidence. */
.rq-level-sub.is-active { padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); background: var(--primary-50); color: var(--primary-700); font-size: 0.875rem; }
.rq-level-sub.is-active strong { font-weight: 700; color: var(--primary-700); }
.rq-kpi-note strong { font-weight: 700; color: var(--gray-800); }
.mg-period strong { font-weight: 700; color: var(--gray-900); }
.rq-level-action { margin-left: auto; }
/* .btn impose display:inline-flex, qui l'emporterait sur l'attribut hidden. */
.rq-btn[hidden] { display: none; }

/* Niveau 1 — chiffres clés : plaque en relief (dégradé métal clair, arête lumineuse en
   haut, ombre portée profonde), dans l'esprit du plateau au dos d'un iPhone Pro. */
.rq-keyfigures {
    margin: 1.4rem 1.4rem 2.4rem;
    padding: 1.2rem 1.3rem 1.4rem;
    border-radius: 24px;
    border: 1px solid #c8cedb;
    background: linear-gradient(145deg, #ffffff 0%, #f1f3f9 45%, #e1e5ef 100%);
    box-shadow:
        inset 0 2px 0 #ffffff,
        inset 0 -3px 0 rgba(16, 24, 40, 0.09),
        inset 1px 0 0 rgba(255, 255, 255, 0.85),
        0 2px 2px rgba(16, 24, 40, 0.10),
        0 10px 14px -4px rgba(16, 24, 40, 0.14),
        0 30px 48px -16px rgba(16, 24, 40, 0.40);
}

.rq-period-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 0.9rem;
}
.rq-presets {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: rgba(16, 24, 40, 0.07);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.12);
}
.rq-preset {
    padding: 0.4rem 0.9rem;
    border: none;
    border-radius: var(--radius-pill);
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.rq-preset:hover { color: var(--gray-900); }
/* Raccourci entièrement antérieur à l'ouverture du dossier : sans objet. */
.rq-preset:disabled { color: var(--gray-400); cursor: not-allowed; text-decoration: line-through; }
.rq-preset.is-active { background: #fff; color: var(--primary-700); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.18); }
.rq-preset:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.rq-period-custom { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 600; color: var(--gray-600); }
.rq-period-custom .input-sm { width: 140px; padding: 0.42rem 0.55rem; }

/* 3 tuiles pour un dossier, 4 pour le projet : les colonnes se répartissent toutes seules. */
.rq-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; margin-top: 1.1rem; }
/* Tuiles « en creux » dans la plaque, comme des éléments encastrés. */
.rq-kpi-tile {
    position: relative;
    padding: 0.95rem 1rem 0.9rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dfe3ec;
    box-shadow: inset 0 2px 5px rgba(16, 24, 40, 0.09), 0 1px 0 #fff;
    min-width: 0;
}
.rq-kpi-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
}
.rq-kpi-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); }
.rq-kpi-tile--expense .rq-kpi-label::before { background: var(--danger); }
.rq-kpi-tile--planned .rq-kpi-label::before { background: #06aed4; }
.rq-kpi-tile--benefit .rq-kpi-label::before { background: var(--success); }
.rq-kpi-tile--split .rq-kpi-label::before { background: var(--warning); }
.rq-kpi-sub .is-negative { color: #b42318; font-weight: 600; }
.rq-kpi-sub .is-positive { color: #067647; font-weight: 600; }
/* Répartition du décaissé : une ligne par voie (caisse, appro, fournisseurs, autre). */
.rq-kpi-split { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.55rem; }
.rq-kpi-split-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.rq-kpi-split-row strong { color: var(--gray-900); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rq-kpi-tile--margin .rq-kpi-label::before { background: var(--primary-500); }
.rq-kpi-value {
    margin-top: 0.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Les montants du projet se comptent en centaines de millions : corps réduit pour qu'ils tiennent en entier. */
#projet-kpis .rq-kpi-value { font-size: 1.15rem; }
.rq-kpi-value .is-positive { color: #067647; }
.rq-kpi-value .is-negative { color: #b42318; }
.rq-kpi-muted { color: var(--gray-400); }
.rq-kpi-sub { margin-top: 0.15rem; font-size: 0.75rem; color: var(--color-text-subtle); }
.rq-kpi-note { margin-top: 0.8rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.rq-kpi-note:empty { display: none; }
/* Dépenses du dossier hors de la période choisie : à ne pas confondre avec « rien de dépensé ». */
.rq-kpi-note--alerte { padding: 0.7rem 0.9rem; border: 1px solid #fec84b; border-left-width: 4px; border-radius: var(--radius-sm); background: #fffaeb; color: #7a2e0e; line-height: 1.5; }
.rq-kpi-note--alerte strong { color: #7a2e0e; }
.rq-kpi-note--alerte .link-btn { font-weight: 700; }

/* --- Fenêtre « Sales et Cost du projet » -------------------------------------
   Grande fenêtre en trois temps : les 4 chiffres, le détail en deux colonnes
   (Sales | Cost), puis le calcul de la marge. Préfixe mg-. */
.mg-modal { max-width: 1040px; max-height: 92vh; border-radius: 22px; }
.mg-head { padding: 1.3rem 1.75rem; gap: 1.25rem; background: linear-gradient(180deg, var(--gray-50), #fff); }
.mg-head-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mg-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-600); }
.modal-box .mg-head h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.mg-period {
    margin-left: auto;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}
.mg-body { padding: 1.6rem 1.75rem 1.75rem; background: var(--gray-50); }

/* 1. Les quatre chiffres */
.mg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mg-stat {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem 1.2rem 1.05rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}
.mg-stat-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-subtle); }
.mg-stat-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); }
.mg-stat--sales .mg-stat-label::before { background: #06aed4; }
.mg-stat--cost .mg-stat-label::before { background: var(--danger); }
.mg-stat--benefit .mg-stat-label::before { background: var(--success); }
.mg-stat--margin .mg-stat-label::before { background: var(--primary-500); }
.mg-stat-value { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--gray-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-stat-value small { margin-left: 0.35rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.03em; color: var(--color-text-subtle); }
.mg-stat.is-positive .mg-stat-value { color: #067647; }
.mg-stat.is-negative .mg-stat-value { color: #b42318; }
.mg-stat-sub { font-size: 0.8rem; line-height: 1.35; color: var(--color-text-muted); }
/* La marge est le résultat : tuile mise en avant. */
.mg-stat--margin { background: linear-gradient(150deg, var(--primary-50), #fff 70%); border-color: var(--primary-100); }
.mg-stat--margin .mg-stat-value { font-size: 1.7rem; }

/* 2. Le détail, Sales et Cost côte à côte */
.mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; align-items: stretch; }
.mg-card {
    --mg-accent: var(--gray-500);
    --mg-accent-soft: var(--gray-100);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 24px -14px rgba(16, 24, 40, 0.18);
    overflow: hidden;
}
.mg-card--sales { --mg-accent: #0891b2; --mg-accent-soft: #ecfeff; }
.mg-card--cost { --mg-accent: #e11d48; --mg-accent-soft: #fff1f2; }

.mg-card-head { display: flex; align-items: center; gap: 0.9rem; padding: 1.25rem 1.4rem 1.1rem; }
.mg-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--mg-accent-soft);
    color: var(--mg-accent);
    flex-shrink: 0;
}
.mg-card-icon svg { width: 22px; height: 22px; }
.mg-card-titles { min-width: 0; }
.mg-card-head h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.modal-box .mg-card-head p { margin-top: 0.15rem; font-size: 0.8125rem; line-height: 1.35; color: var(--color-text-subtle); }

/* Un poste : rang, libellé et montant sur une ligne, puis la barre et sa part */
.mg-rows { list-style: none; margin: 0; padding: 0 1.4rem; flex: 1; }
.mg-row { display: flex; gap: 0.85rem; padding: 1rem 0; border-top: 1px solid var(--gray-100); }
.mg-row-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 0.05rem;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.mg-row:first-child .mg-row-rank { background: var(--mg-accent); color: #fff; }
.mg-row-main { flex: 1; min-width: 0; }
.mg-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mg-row-label { font-size: 0.925rem; font-weight: 600; line-height: 1.4; color: var(--gray-800); }
.mg-row-amount { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--gray-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mg-card small { margin-left: 0.3rem; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.03em; color: var(--color-text-subtle); }
.mg-row-meter { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
.mg-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--gray-100); overflow: hidden; }
.mg-bar span { display: block; height: 100%; border-radius: 4px; background: var(--mg-accent); }
.mg-row-part { width: 52px; text-align: right; font-size: 0.8rem; font-weight: 650; color: var(--gray-600); font-variant-numeric: tabular-nums; }

/* Postes sans montant : une seule ligne discrète, pour ne pas encombrer */
.modal-box .mg-empty-list { margin: 0; padding: 0.85rem 1.4rem 1rem; border-top: 1px solid var(--gray-100); font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-subtle); }
.mg-empty-list span { display: block; margin-bottom: 0.15rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); }
.modal-box .mg-none { padding: 1rem 1.4rem; color: var(--color-text-subtle); }

/* Pied de carte : la déduction éventuelle, puis le total */
.mg-card-foot { margin-top: auto; padding: 1rem 1.4rem 1.2rem; background: var(--mg-accent-soft); border-top: 1px solid var(--color-border); }
.mg-foot-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.mg-foot-line + .mg-foot-line { margin-top: 0.3rem; }
.mg-foot-line--moins { color: #b42318; font-weight: 600; }
.mg-foot-line--moins small { color: #b42318; }
.mg-foot-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mg-foot-line + .mg-foot-total { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed rgba(16, 24, 40, 0.18); }
.mg-foot-total span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-700); }
.mg-foot-total strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--mg-accent); font-variant-numeric: tabular-nums; }
.mg-foot-total strong small { color: var(--mg-accent); opacity: 0.8; }

/* 3. Le calcul */
.mg-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-top: 1.25rem;
    padding: 1.05rem 1.35rem;
    border-radius: 16px;
    background: var(--gray-900);
    color: #fff;
}
.mg-formula-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.mg-formula-calc { font-size: 0.95rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.9); }
.mg-formula strong { margin-left: auto; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.mg-formula strong.is-positive { color: #6ce9a6; }
.mg-formula strong.is-negative { color: #fda29b; }

@media (max-width: 900px) {
    .mg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mg-grid { grid-template-columns: minmax(0, 1fr); }
    .mg-head { padding: 1.1rem 1.1rem; flex-wrap: wrap; }
    .mg-period { margin-left: 0; order: 3; }
    .mg-body { padding: 1.1rem; }
    .mg-formula strong { margin-left: 0; }
}
@media (max-width: 480px) {
    .mg-row-top { flex-direction: column; gap: 0.15rem; }
    .mg-card-head, .mg-rows, .mg-card-foot { padding-left: 1rem; padding-right: 1rem; }
}

/* Niveau 2 — liste des requêtes *//* Niveau 2 — liste des requêtes */
.rq-list { border-top: 1px solid var(--color-border); }
.rq-list .rq-level-head { padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border); background: var(--gray-25); }
.rq-list .rq-count { margin-left: 0; }
.rq-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.8125rem;
    font-weight: 600;
}
.rq-hint svg { width: 15px; height: 15px; }

/* --- Détail d'une requête dans le volet (remplace la liste) ------------------ */

.rq-crumbs { font-size: 0.875rem; font-weight: 600; }
.rq-crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font: inherit;
    color: var(--primary-700);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.rq-crumb-back:hover { background: var(--primary-50); border-color: var(--primary-100); }
.rq-crumb-back:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.rq-crumb-back svg { width: 15px; height: 15px; }
.rq-crumbs .crumb-sep { color: var(--gray-300); }
.rq-crumb-current { color: var(--gray-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; }

/* Bandeau : état + essentiel de la requête */
.rq-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--color-border);
}
.rq-detail-main { flex: 1 1 320px; min-width: 0; }
.rq-detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rq-detail-tag {
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.75rem;
    font-weight: 650;
}
.rq-detail-title { margin-top: 0.6rem; font-size: 1.15rem; line-height: 1.35; overflow-wrap: anywhere; }
.rq-detail-meta { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--color-text-subtle); }
.rq-detail-meta span + span::before { content: ' à '; }
.rq-detail-figures { display: flex; gap: 0.7rem; }
.rq-detail-figure {
    min-width: 150px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--gray-25);
}
.rq-detail-amount { margin-top: 0.25rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rq-detail-loading { color: var(--color-text-subtle); font-size: 0.9rem; }

/* Deux zones : à gauche ce que l'on fait (traitement, note), à droite ce que l'on
   consulte (résumé puis fil). Remplace les 3 colonnes de la page requête complète. */
.rq-detail { padding: 1.3rem 1.4rem 1.5rem; }
.rq-detail .requete-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "center side" "center timeline";
}
.rq-detail .requete-col-center { grid-area: center; }
.rq-detail .requete-col-sidebar { grid-area: side; position: static; }
.rq-detail .requete-col-timeline { grid-area: timeline; position: static; }
/* Client, projet et dossier sont déjà donnés par la page : le résumé ne garde que le reste, sur deux colonnes. */
.rq-detail .summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.rq-detail .summary-list > div:nth-child(-n+3) { display: none; }
.rq-detail .summary-list > .summary-docs { grid-column: 1 / -1; }
.rq-detail .summary-description { display: none; }
/* Pas de note de suivi dans la vue intégrée (requete-detail.js rend la carte visible : on la masque ici). */
.rq-detail #commentaire-card { display: none; }
.rq-detail-amount.is-negative { color: #b42318; }
.rq-detail-amount.is-positive { color: #067647; }

@media (max-width: 1320px) {
    .rq-detail .requete-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "center" "side" "timeline"; }
}
@media (max-width: 899px) {
    .rq-detail { padding: 1rem; }
    .rq-detail-header { padding: 1rem; }
    .rq-detail-figure { min-width: 0; flex: 1; }
    .rq-detail-figures { flex: 1 1 100%; }
}


@media (max-width: 899px) {
    .rq-keyfigures { margin: 1rem 1rem 1.5rem; padding: 1rem; border-radius: 20px; }
    .rq-period-custom .input-sm { width: auto; flex: 1 1 120px; }
    .rq-period-custom { flex: 1 1 100%; }
    .rq-list .rq-level-head { padding: 0.9rem 1rem; }
    .rq-hint { margin-left: 0; }
}

/* Consigne affichée tant qu'aucun dossier n'est choisi */
.rq-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 460px;
    padding: 3rem 1.5rem;
    text-align: center;
}
.rq-placeholder[hidden] { display: none; }
/* Sous les chiffres clés du projet, la consigne n'a plus à remplir tout le volet. */
.rq-keyfigures + .rq-placeholder { min-height: 0; padding-top: 1rem; padding-bottom: 2.5rem; }
.rq-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 0.4rem;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary-600);
}
.rq-placeholder-icon svg { width: 34px; height: 34px; }
.rq-placeholder-title { font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015em; color: var(--gray-900); }
.rq-placeholder-hint { max-width: 440px; font-size: 0.95rem; color: var(--color-text-muted); }

.rq-open-dossier { font-size: 0.8125rem; font-weight: 600; color: var(--primary-600); text-decoration: none; white-space: nowrap; }
.rq-open-dossier:hover { text-decoration: underline; }
.rq-open-dossier[hidden] { display: none; }

/* Le tableau partage la largeur avec deux volets : cellules resserrées, et en dessous
   d'une largeur lisible il défile horizontalement dans son volet plutôt que de s'écraser. */
@media (min-width: 900px) {
    .rq-table { min-width: 700px; }
    .rq-table td { padding-left: 0.6rem; padding-right: 0.6rem; }
    .rq-table .th-sort { padding-left: 0.6rem; padding-right: 0.6rem; }
    .rq-table td:first-child, .rq-table th:first-child .th-sort { padding-left: 1.4rem; }
    .rq-table .table-delete-cell { padding-left: 0; padding-right: 0.4rem; }
}

@media (max-width: 899px) {
    .finder { grid-template-columns: minmax(0, 1fr); }
    .finder-pane + .finder-pane { border-left: none; border-top: 1px solid var(--color-border); }
    .finder-pane-projets { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .finder-pane-inner { position: static; max-height: none; }
    .finder-pane-dossiers .finder-list { max-height: 260px; }
    .rq-placeholder { min-height: 260px; padding: 2rem 1.25rem; }
    .rq-table { margin-top: 1rem; }
    .rq-placeholder-title { font-size: 1.15rem; }
}

/* ==========================================================================
   Espace opérateur — « Mon espace » (mes-requetes.php). Préfixe op-.
   Pensé d'abord pour le téléphone : une colonne, cartes, gros boutons.
   ========================================================================== */

.op-main { max-width: 960px; }

.op-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.4rem; }
.op-hero h1 { font-size: 1.5rem; }
.op-hero p { margin-top: 0.2rem; color: var(--color-text-muted); font-size: 0.95rem; }
.op-new-btn { padding: 0.85rem 1.4rem; font-size: 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.op-flash { margin-bottom: 1.25rem; }

.op-section { margin-bottom: 1.75rem; }
.op-section-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.op-section-head h2 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-700); }
.op-section-action { margin-left: auto; }
.op-count {
    min-width: 1.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.op-count:empty { display: none; }
.op-count--todo { background: var(--warning); color: #fff; }
.op-count--news { background: var(--primary-600); color: #fff; }

/* Cartes de requêtes */
.op-cards { display: flex; flex-direction: column; gap: 0.7rem; }
.op-card {
    display: block;
    width: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.op-card:hover { border-color: var(--primary-500); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.op-card:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
/* À faire : liseré orange, l'œil y va d'abord */
.op-card--todo { border-left: 4px solid var(--warning); background: linear-gradient(90deg, #fffaeb 0%, #fff 22%); }
.op-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.op-card-amount { font-weight: 700; font-size: 0.95rem; color: var(--gray-900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-card-title {
    margin-top: 0.55rem;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.op-card-motif { margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--danger-bg); color: #912018; font-size: 0.875rem; line-height: 1.45; }
.op-card-meta { margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-subtle); }
.op-card-cta { margin-top: 0.75rem; font-size: 0.9rem; font-weight: 700; color: var(--primary-700); }
.op-empty { padding: 1.1rem 1.2rem; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.5; }

/* Nouveautés (notifications non lues) */
.op-news { display: flex; flex-direction: column; border: 1px solid var(--primary-100); border-radius: var(--radius-md); background: var(--primary-50); overflow: hidden; }
.op-news-item {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-top: 1px solid var(--primary-100);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.op-news-item:first-child { border-top: none; }
.op-news-item:hover { background: rgba(255, 255, 255, 0.65); }
.op-news-item:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.op-news-dot { width: 9px; height: 9px; margin-top: 0.4rem; border-radius: 50%; background: var(--primary-600); flex-shrink: 0; }
.op-news-item.is-action .op-news-dot { background: var(--warning); }
.op-news-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.op-news-title { font-weight: 650; font-size: 0.925rem; color: var(--gray-900); }
.op-news-message { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); overflow-wrap: anywhere; }
.op-news-time { font-size: 0.78rem; color: var(--color-text-subtle); }
.op-news-more { display: block; margin: 0.6rem 0 0 auto; }
.op-news-more[hidden] { display: none; }

/* Terminées : repliées */
.op-done > summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 0; }
.op-done > summary::-webkit-details-marker { display: none; }
.op-done-toggle { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--primary-700); }
.op-done[open] > summary { margin-bottom: 0.75rem; }
.op-done[open] .op-done-toggle { font-size: 0; }
.op-done[open] .op-done-toggle::after { content: 'Masquer'; font-size: 0.8125rem; }
.op-done-search { margin-bottom: 0.75rem; }
.op-more { width: 100%; margin-top: 0.75rem; }

/* Fil d'Ariane des vues « requête » et « nouvelle requête » */
.op-crumbs { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; }
.op-crumbs .crumb-sep { color: var(--gray-300); }

/* Une requête : l'état et la consigne, puis une seule colonne */
.op-detail-head { padding: 1.2rem 1.3rem; margin-bottom: 1.25rem; }
.op-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.op-detail-title { margin-top: 0.65rem; font-size: 1.2rem; line-height: 1.35; overflow-wrap: anywhere; }
.op-attente { margin-top: 0.9rem; padding: 0.8rem 1rem; border-radius: var(--radius-md); font-size: 0.925rem; font-weight: 600; line-height: 1.45; }
.op-attente--action { background: var(--warning-bg); color: #93370d; border: 1px solid #fedf89; }
.op-attente--attente { background: var(--info-bg); color: var(--primary-700); }
.op-attente--fini { background: var(--gray-100); color: var(--gray-700); }

.op-detail .requete-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center" "side" "timeline"; }
.op-detail .requete-col-center { grid-area: center; }
.op-detail .requete-col-sidebar { grid-area: side; position: static; }
.op-detail .requete-col-timeline { grid-area: timeline; position: static; }
/* Le résumé sur deux colonnes ; la description est déjà en titre. */
.op-detail .summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.op-detail .summary-list > .summary-docs { grid-column: 1 / -1; }
.op-detail .summary-description { display: none; }
/* Client, projet et dossier sont déjà dans l'en-tête de la requête. */
.op-detail .summary-list > div:nth-child(-n+3) { display: none; }
.op-detail .btn { min-height: 46px; }
/* .btn impose display:inline-flex, qui l'emportait sur l'attribut hidden : le bouton
   « Traitement terminé » restait affiché après avoir ouvert la zone de confirmation. */
.op-detail .btn[hidden] { display: none; }
/* La consigne est déjà donnée, en clair, dans l'en-tête de la requête. */
.op-detail .traitement-description { display: none; }

/* Nouvelle requête */
.op-form .card-body { padding: 1.6rem 1.75rem 1.4rem; }
/* Étapes : les pastilles sont cliquables (revenir en arrière, ou avancer si l'étape est complète). */
.op-stepper { padding: 1.3rem 1.75rem 1.2rem; border-bottom: 1px solid var(--color-border); background: var(--gray-25); }
.op-stepper .step { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
.op-stepper .step:focus-visible .step-circle { box-shadow: var(--shadow-focus); }
.op-step[hidden] { display: none; }
.op-step { min-height: 190px; }
.op-recap-hint { margin: 0 0 1rem; }
.op-recap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; margin: 0; }
.op-recap > div { padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-100); min-width: 0; }
.op-recap > div:nth-child(7) { grid-column: 1 / -1; }
.op-recap dt { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.op-recap dd { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--gray-900); overflow-wrap: anywhere; }
.op-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.op-form-row .field-group, .op-form-row .field-group:last-child { margin-bottom: 1.15rem; }
.op-form .input { padding: 0.75rem 0.9rem; font-size: 1rem; }
.op-form #n-error { margin: 1rem 0 0; }
.op-form-actions { display: flex; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.75rem; border-top: 1px solid var(--color-border); background: var(--gray-25); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.op-form-actions .btn { min-height: 46px; min-width: 130px; justify-content: center; }

@media (max-width: 640px) {
    .op-hero h1 { font-size: 1.3rem; }
    .op-new-btn { width: 100%; justify-content: center; }
    .op-form-row { grid-template-columns: minmax(0, 1fr); }
    .op-form .card-body { padding: 1.25rem 1.1rem; }
    .op-stepper { padding: 1.1rem 0.9rem 1rem; }
    .op-stepper .step-label { font-size: 0.68rem; }
    .op-stepper .step-line { margin: 0 0.25rem; }
    .op-step { min-height: 0; }
    .op-recap { grid-template-columns: minmax(0, 1fr); }
    .op-form-actions { padding: 1rem 1.1rem; }
    /* Étapes : sur un écran étroit, seul le libellé de l'étape en cours est écrit. */
    .op-detail .step-label { display: none; }
    .op-detail .step.is-active .step-label { display: block; }
    .op-form-actions .btn { flex: 1; min-width: 0; }
}

/* ---------- Appros ---------- */
.appro-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.appro-totaux > div { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.appro-totaux span { font-size: 0.78rem; color: var(--color-text-muted); }
.appro-totaux strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.appro-bar { height: 7px; border-radius: 4px; background: var(--color-border); overflow: hidden; margin: 0.15rem 0 0.3rem; min-width: 120px; }
.appro-bar i { display: block; height: 100%; background: #12b76a; transition: width 0.3s var(--ease); }
.appro-bar.is-warn i { background: var(--warning); }
.appro-bar.is-high i { background: var(--danger); }
/* Pourcentage utilisé : gros, gras, en couleur */
.appro-pct { font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.appro-pct.is-ok { color: #067647; }
.appro-pct.is-warn { color: #b54708; }
.appro-pct.is-high { color: #b42318; }
.appro-clos-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
#appros-table td.num, #appros-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Titre du bloc « Projets <client> (n) » de la fiche client : plus grand, bien gras */
#project-panel-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }

/* Dossiers en cours (au moins une requête pas terminée) : surbrillance clignotante douce dans la
   fiche projet. Le dossier ouvert (bleu) et « réduire les animations » restent calmes. */
.finder-item.is-en-cours:not(.is-active) {
    background: var(--warning-bg);
    box-shadow: inset 3px 0 0 var(--warning);
    animation: dossier-en-cours 1.8s ease-in-out infinite;
}
@keyframes dossier-en-cours {
    0%, 100% { background-color: var(--warning-bg); box-shadow: inset 3px 0 0 var(--warning); }
    50%      { background-color: #fde2a8; box-shadow: inset 5px 0 0 var(--warning), 0 0 0 2px rgba(247, 144, 9, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .finder-item.is-en-cours:not(.is-active) { animation: none; }
}

/* Titre « Vous consultez le Dossier DC-xxxx » de la fiche projet : un peu plus grand, bien gras */
.rq-title.rq-title--dossier { font-size: 1.15rem; font-weight: 800; }

/* Un bouton placé dans un en-tête de carte garde la couleur de SON texte : sinon l'icône (« + »)
   hérite de l'indigo des icônes d'en-tête et disparaît sur le bouton indigo. */
.card-header .btn svg { color: inherit; width: 18px; height: 18px; }

/* Page Appros : titres triables (mêmes flèches que le tableau des requêtes) + ligne de filtres */
#appros-table th[aria-sort="ascending"] .th-sort,
#appros-table th[aria-sort="descending"] .th-sort { color: var(--primary-700); }
#appros-table th[aria-sort="ascending"] .th-sort::after { opacity: 1; transform: translateY(-2px) rotate(180deg); }
#appros-table th[aria-sort="descending"] .th-sort::after { opacity: 1; }
#appros-table th.num .th-sort { margin-left: auto; }
#appros-table .appro-filtres th { padding: 0.35rem 0.5rem; background: var(--gray-50); text-transform: none; }
#appros-table .appro-filtres .input-sm { width: 100%; min-width: 80px; font-weight: 400; }

/* Appro clos (clôturé ou période passée) : ligne figée — pas de survol, pas de curseur « main » */
.table tbody tr.is-locked { cursor: default; color: var(--color-text-subtle); }
.table tbody tr.is-locked:hover { background: transparent; }
.table tbody tr.is-locked strong { font-weight: 600; }

/* Ligne du titre « Traitement de la requête » : fond chaud très léger tant que la requête est
   ouverte (ni clôturée ni annulée) ; elle redevient blanche une fois la requête terminée. */
#traitement-card.is-ouverte .card-header {
    background: #fff6e0;
    background: color-mix(in srgb, var(--warning-bg) 85%, var(--color-surface));
    border-bottom-color: color-mix(in srgb, var(--warning) 25%, var(--color-border));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Le choix de l'appro n'apparaît que si la nature de la sortie est « Appro » : sans ces règles, les
   display: flex / block de .chiffrage-source et .input l'emportaient sur l'attribut [hidden]. */
.chiffrage-source[hidden], .input[hidden] { display: none; }

/* « NN % restant » après l'appro, sur un mouvement financier : pastille colorée bien visible */
.appro-reste { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.appro-reste.is-ok { background: #d1fadf; color: #067647; }
.appro-reste.is-warn { background: #fef0c7; color: #b54708; }
.appro-reste.is-high { background: #fee4e2; color: #b42318; }

/* « (NN % utilisé) » après le montant Appro, dans la carte Répartition du dossier */
.appro-pct-inline { font-weight: 800; white-space: nowrap; }
.appro-pct-inline.is-ok { color: #067647; }
.appro-pct-inline.is-warn { color: #b54708; }
.appro-pct-inline.is-high { color: #b42318; }

/* Un bouton (<label class="btn">) masqué par l'attribut [hidden] : sans cette règle son display l'emporte et il reste visible. */
.btn[hidden] { display: none; }

/* Ligne « Requêtes du dossier » (liste) et son fil d'Ariane « Requêtes du dossier › Requête — … » (détail) :
   fond indigo très léger, pour la détacher du contenu en dessous. */
.rq-list .rq-level-head {
    background: var(--primary-50);
    border-bottom-color: color-mix(in srgb, var(--primary-500) 22%, var(--color-border));
}

/* Bouton « Voir le détail Sales / Cost » : bien visible, en couleur légère (indigo doux) */
#marge-detail-btn {
    background: var(--primary-50);
    color: var(--primary-700);
    border: 1.5px solid var(--primary-100);
    font-weight: 700;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.12);
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
#marge-detail-btn:hover { background: var(--primary-100); border-color: var(--primary-500); box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2); }
#marge-detail-btn::after { content: ' →'; }

/* Projection sous le choix de l'appro (flux financier) : « Il restera NN % de l'appro… » bien visible et colorée */
.appro-projection { margin: 0.45rem 0 0; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); border-left: 4px solid var(--gray-300); background: var(--gray-50); font-size: 0.9rem; font-weight: 700; line-height: 1.4; }
.appro-projection[hidden] { display: none; }
.appro-projection.is-ok { background: #ecfdf3; border-left-color: #12b76a; color: #067647; }
.appro-projection.is-warn { background: #fffaeb; border-left-color: var(--warning); color: #b54708; }
.appro-projection.is-high { background: #fef3f2; border-left-color: var(--danger); color: #b42318; }
.appro-projection.is-over { background: #b42318; border-left-color: #7a271a; color: #fff; }

/* ==========================================================================
   Traitement de la requête — relief (embossé) et saisie du flux financier
   ========================================================================== */

/* La carte de traitement ressort de la page : dégradé, liseré clair en haut, ombres portées superposées. */
#traitement-card.card-traitement {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #ffffff 0%, var(--gray-50) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(16, 24, 40, 0.04),
        0 1px 0 rgba(16, 24, 40, 0.05),
        0 12px 24px -8px rgba(16, 24, 40, 0.18),
        0 30px 48px -18px rgba(16, 24, 40, 0.22);
}

/* À l'intérieur, le bloc « mouvement financier » est « en creux » et le formulaire qu'il contient « en relief » :
   on lit tout de suite où l'on saisit. L'espacement est plus généreux. */
.chiffrage-inline {
    padding: 1.15rem 1.25rem;
    margin: 1.25rem 0;
    background: var(--gray-50);
    box-shadow: inset 0 2px 6px rgba(16, 24, 40, 0.07), inset 0 0 0 1px rgba(16, 24, 40, 0.02);
}
.chiffrage-panel.fin-form {
    margin-top: 1rem;
    padding: 1.2rem 1.25rem 1.3rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 16px -10px rgba(16, 24, 40, 0.18);
}

/* Champs : une étiquette au-dessus de chacun, courts sur une ligne, commentaire en pleine largeur. */
.fin-section { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.1rem; }
.fin-section[hidden] { display: none; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.05rem 1.15rem; }
.fin-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fin-field--full { grid-column: 1 / -1; }
.fin-label { font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-700); }
.fin-opt { margin-left: 0.4rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-text-subtle); }
.fin-inline { display: flex; align-items: center; gap: 0.75rem; }
.fin-inline .input { flex: 1; min-width: 0; }
.fin-form .input { width: 100%; }
.fin-form .pill-group { margin: 0; }
.chiffrage-submit-row { margin-top: 1.1rem; }

/* N° de pièce affiché devant le commentaire d'un mouvement */
.mouvement-ref { display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); background: var(--primary-50); color: var(--primary-700); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   Mon espace (opérateur) : trois colonnes plutôt qu'un fil vertical
   À faire | Nouveautés | En attente de l'administrateur — « Terminées » reste en dessous, repliée.
   ========================================================================== */
.op-main { max-width: 1240px; }
/* Le détail d'une requête et l'assistant d'envoi gardent la largeur d'une seule colonne de lecture. */
#op-detail, #op-new { max-width: 960px; margin-inline: auto; }

.op-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.75rem; }
.op-col {
    margin-bottom: 0;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px -12px rgba(16, 24, 40, 0.18);
    min-width: 0;
}
.op-col--todo { border-top-color: var(--warning); }
.op-col--news { border-top-color: var(--primary-500); }
.op-col--wait { border-top-color: var(--gray-400); }
.op-col .op-section-head { flex-wrap: wrap; }
.op-col .op-empty { padding: 0.9rem 1rem; }
.op-col .op-card { padding: 0.9rem 1rem; }
.op-col .op-news { background: var(--color-surface); }
/* Écrans moyens : deux colonnes ; téléphone : une seule, dans le même ordre. */
@media (max-width: 1100px) { .op-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-col--wait { grid-column: 1 / -1; } }
@media (max-width: 720px) { .op-board { grid-template-columns: minmax(0, 1fr); } .op-col--wait { grid-column: auto; } }
.op-section-action[hidden], .op-news-more[hidden] { display: none; }

/* Page Appros : les appros ACTIFS (en cours) ressortent en surbrillance ; ceux à venir ont un liseré discret */
#appros-table tbody tr.is-en-cours { background: #ecfdf3; box-shadow: inset 5px 0 0 #12b76a; }
#appros-table tbody tr.is-en-cours:hover { background: #d1fadf; }
#appros-table tbody tr.is-en-cours td { border-bottom-color: #abefc6; }
#appros-table tbody tr.is-a-venir { box-shadow: inset 5px 0 0 var(--primary-500); }


/* --- Colonne « Requêtes du dossier » (4e volet du Finder) ------------------- */

.finder-pane-requetes .finder-list { gap: 3px; }
.finder-item--requete { align-items: flex-start; gap: 0.45rem; padding: 0.5rem 0.6rem; }
.finder-item--requete .finder-item-label { display: flex; flex-direction: column; gap: 0.12rem; white-space: normal; }
.rq-item-desc { font-size: 0.8rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rq-item-meta { font-size: 0.7rem; color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder-item--requete.is-active .rq-item-meta { color: var(--primary-700); opacity: 0.75; }
.rq-item-badge { flex-shrink: 0; font-size: 0.65rem; padding: 0.1rem 0.4rem; margin-top: 0.1rem; }

.finder-item--requete .finder-item-dot { margin-top: 0.4rem; }
.rq-placeholder--inline { padding: 2rem 1rem; }
.rq-crumb-delete { margin-left: auto; flex-shrink: 0; }

/* Largeurs du Finder — une seule cascade, du plus large au plus étroit, pour que l'ordre des
   règles suffise à décider. Les colonnes de navigation gagnent quelques pixels, le volet de
   droite les cède : il reste de loin le plus large. */
.finder { grid-template-columns: 272px 192px 372px minmax(0, 1fr); }

@media (max-width: 1440px) { .finder { grid-template-columns: 244px 176px 332px minmax(0, 1fr); } }
@media (max-width: 1280px) { .finder { grid-template-columns: 214px 164px 296px minmax(0, 1fr); } }

/* Tablette : les trois colonnes de navigation se partagent une ligne, le volet passe dessous. */
@media (max-width: 1060px) {
    .finder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .finder-pane-main { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--color-border); }
    .finder-pane-requetes .finder-list { max-height: 320px; }
}

/* Téléphone : tout s'empile. Reprend la règle à 899px définie plus haut, qui est antérieure. */
@media (max-width: 899px) {
    .finder { grid-template-columns: minmax(0, 1fr); }
    .finder-pane-main { grid-column: auto; }
    .finder-pane + .finder-pane { border-left: none; border-top: 1px solid var(--color-border); }
    .finder-pane-requetes .finder-list { max-height: 300px; }
}

/* --- Fiche requête intégrée : un seul fil de lecture ------------------------
   Résumé → chiffres de la requête → Traitement → Historique. Le bandeau des chiffres est un
   enfant direct de .rq-detail alors que les trois autres blocs viennent du partiel partagé :
   « display: contents » sur la grille les remet tous au même niveau, et « order » décide. */
.rq-detail { display: flex; flex-direction: column; gap: 1rem; }
.rq-detail .requete-layout { display: contents; }
.rq-detail .requete-col-sidebar { order: 1; }
.rq-detail .rq-detail-header   { order: 2; }
.rq-detail .requete-col-center { order: 3; }
.rq-detail .requete-col-timeline { order: 4; }
/* Le bandeau n'est plus en tête de fiche : il devient une bande de chiffres, sans trait de séparation. */
.rq-detail .rq-detail-header { padding: 0; border-bottom: 0; align-items: center; }
.rq-detail .rq-detail-figures { flex: 1; flex-wrap: wrap; }

/* Le résumé redevient une bande horizontale : il sert à situer, pas à occuper la hauteur. */
.rq-detail .summary-list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* --- Historique repliable (volet intégré) ----------------------------------- */
.card-header.timeline-toggle { cursor: pointer; user-select: none; }
.card-header.timeline-toggle:hover { background: var(--gray-50); }
.card-header.timeline-toggle:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.timeline-hint {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary-700);
    white-space: nowrap;
}

/* --- En-tête du volet : titre sur deux lignes + corbeille ------------------- */

/* « Vous consultez la requête » reste l'intitulé, le nom de la requête passe dessous. */
.rq-title-nom {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.rq-title.rq-title--requete {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-subtle);
}

/* Poubelle : rouge et épaisse, sans fond, sans bordure, sans aucune nuance de bleu. */
.btn-corbeille,
.icon-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    box-shadow: none;
}
.btn-corbeille {
    margin-left: auto;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
}
.btn-corbeille svg, .icon-btn-danger svg { stroke-width: 3; }
.btn-corbeille svg { width: 1.3rem; height: 1.3rem; }
.btn-corbeille:hover, .icon-btn-danger:hover,
.mouvement-btn.icon-btn-danger:hover { background: none; border: 0; color: #b42318; }
.btn-corbeille:focus-visible, .icon-btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.btn-corbeille:disabled { opacity: 0.5; cursor: default; }

/* --- Résumé : tout ce que l'opérateur a saisi, en lecture facile ------------ */
.rq-detail .summary-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.5rem; }
.rq-detail .summary-list dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.rq-detail .summary-list dd { margin: 0.2rem 0 0; font-size: 0.9rem; line-height: 1.4; }

/* --- Traitement : l'état de la requête ouvre la carte ----------------------- */
.traitement-etat {
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-600);
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: 0.875rem;
    line-height: 1.45;
}
.traitement-etat[hidden] { display: none; }

/* Bénéfice et marge négatifs, dans les chiffres clés d'un dossier comme d'un projet. */
.rq-kpi-tile--benefit.is-negatif .rq-kpi-value,
.rq-kpi-tile--margin.is-negatif .rq-kpi-value { color: var(--danger); }

/* --- En-tête de la fiche projet : le client devant, le projet dessous ------- */
.projet-entete { display: flex; align-items: center; gap: 0.9rem; }
.projet-entete-logo {
    width: 52px; height: 52px; border-radius: var(--radius-md);
    object-fit: cover; flex-shrink: 0; border: 1px solid var(--color-border);
}
.projet-entete-texte { min-width: 0; }
.projet-entete-client {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    text-decoration: none;
    line-height: 1.2;
}
.projet-entete-client:hover { color: var(--primary-600); }
.projet-entete-nom {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--color-text);
}

/* Accès à la liste des clients depuis le fil d'Ariane. */
.crumb-tous { margin-left: auto; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

/* Chiffrage d'une requête : prestation du catalogue + quantité, ou montant libre. */
.rentab--edit { display: block; }
.rentab-ligne-edit { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.rentab-ligne-edit[hidden] { display: none; }
.rentab-ligne-edit .rentab-label { flex: 0 0 11rem; font-size: 0.8rem; color: var(--color-text-muted); }
.rentab-ligne-edit .input { flex: 1; min-width: 0; }
.rentab-ligne-edit input[readonly] { background: var(--gray-50); color: var(--color-text-muted); }
.rentab-aide { margin: 0.1rem 0 0.7rem 11.6rem; font-size: 0.78rem; color: var(--primary-700); }
.rentab-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.rentab-qte { font-weight: 500; color: var(--color-text-muted); }
@media (max-width: 620px) {
    .rentab-ligne-edit { flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .rentab-ligne-edit .rentab-label { flex: none; }
    .rentab-aide { margin-left: 0; }
}

/* Catalogue des prestations */
#prestations-table td.num, #prestations-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
#prestations-table tr.is-inactive td { opacity: 0.55; }

/* Les trois chiffres d'une requête (Demandé · Déboursé · Gagné) prennent toute la largeur
   de leur conteneur et se partagent l'espace à parts égales. */
.rq-detail .rq-detail-header { display: block; }
.rq-detail .rq-detail-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}
.rq-detail .rq-detail-figure {
    min-width: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}
.rq-detail .rq-detail-amount { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rq-detail .rq-detail-amount.is-positive { color: var(--success); }
.rq-detail .rq-detail-amount.is-negative { color: var(--danger); }
@media (max-width: 620px) { .rq-detail .rq-detail-figures { grid-template-columns: 1fr; } }

/* « hidden » doit l'emporter sur le display des boutons d'en-tête : la corbeille ne doit
   apparaître que sur une requête. */
.btn-corbeille[hidden], .finder-pane-main .card-header [hidden] { display: none !important; }

/* En-tête du volet de droite : le titre garde sa place, les boutons passent dessous si besoin. */
.finder-pane-main > .card-header { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.finder-pane-main > .card-header .rq-title { flex: 1 1 230px; min-width: 0; }
.finder-pane-main > .card-header .btn,
.finder-pane-main > .card-header .btn-corbeille { margin-left: 0; }

/* Part de chaque voie de sortie dans la répartition du déboursé. */
.rq-split-pct { font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--color-text-subtle); margin-left: 0.25rem; }

/* La recherche des Dossiers gardait trop peu de largeur à côté de ses deux boutons. */
.finder-pane-dossiers .finder-tools { flex-wrap: wrap; }
.finder-pane-dossiers .finder-tools .input-sm { flex: 1 1 100%; }

/* Ligne de mouvement cliquable : un clic ouvre la correction rapide du montant réel. */
.mouvement-item.is-cliquable { cursor: pointer; }
.mouvement-item.is-cliquable:hover { background: var(--gray-50); }
.mvt-modal-contexte { margin: 0 0 1rem; font-size: 0.85rem; color: var(--color-text-muted); }
#mvt-modal .field-group { margin-bottom: 0.9rem; }
#mvt-modal .link-btn { margin-top: 0.4rem; font-size: 0.8125rem; }

/* Chiffres clés (projet et dossier) : deux colonnes, donc quatre tuiles sur deux lignes.
   Le volet de droite est plus étroit qu'avant : trois ou quatre tuiles côte à côte s'y écrasent. */
.finder .rq-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .finder .rq-kpi-grid { grid-template-columns: minmax(0, 1fr); } }

/* Ligne d'appro de la répartition : cliquable, elle ouvre le détail de l'appro. */
.rq-kpi-split-row--clic {
    width: 100%; background: none; border: 0; padding: 0.15rem 0.3rem; margin: 0 -0.3rem;
    font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.rq-kpi-split-row--clic:hover { background: var(--primary-50); }
.rq-kpi-split-row--clic:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.rq-split-detail { font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--primary-700); margin-left: 0.3rem; }

/* Modale de détail d'un appro */
.apm-box { max-width: 460px; }
.apm-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.apm-tete h2 { margin: 0; }
.apm-sous { margin: 0 0 0.35rem; color: var(--color-text-muted); font-size: 0.875rem; }
.apm-periode { margin: 0 0 1.1rem; font-size: 0.85rem; color: var(--color-text-muted); }
.apm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.apm-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--gray-50); }
.apm-stat span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.apm-stat strong { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.apm-stat--is-ok strong { color: var(--success); }
.apm-stat--is-bas strong { color: #b54708; }
.apm-stat--is-depasse strong { color: var(--danger); }
.apm-jauge { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; margin: 0.9rem 0 0.5rem; }
.apm-jauge span { display: block; height: 100%; border-radius: 999px; background: var(--success); }
.apm-jauge--is-bas span { background: #f79009; }
.apm-jauge--is-depasse span { background: var(--danger); }
.apm-note { margin: 0; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 520px) { .apm-stats { grid-template-columns: 1fr; } }

/* Un bouton qui est un lien ne se souligne pas. */
a.btn { text-decoration: none; }
.rq-split-detail { white-space: nowrap; font-size: 0.95rem; line-height: 1; }
.apm-stat strong { font-size: 0.92rem; }

/* Modale « Appros du DC » : liste des appros + ajout sur place */
.dcap-box { max-width: 640px; }
.dcap-sous-titre { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; }
.dcap-table-wrap { overflow-x: auto; }
.dcap-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.dcap-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.dcap-table td { padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.dcap-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcap-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
.dcap-form label { display: block; font-size: 0.78rem; margin-bottom: 0.25rem; color: var(--color-text-muted); }
.dcap-descr { grid-column: 1 / -1; }
.dcap-actions { grid-column: 1 / -1; margin-top: 0.2rem; }
@media (max-width: 520px) { .dcap-form { grid-template-columns: 1fr; } }

.dcap-synthese { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--color-text-muted); margin: 0.1rem 0 0; }
.dcap-synthese strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
#dc-appros-synthese .apm-jauge { margin: 0.5rem 0 0.9rem; }

/* Colonne « Projets du client » : le nom complet du projet, à la ligne s'il est long, jamais tronqué. */
.finder-item--projet { align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0.65rem; margin-bottom: 0.2rem; }
.finder-item--projet svg { margin-top: 0.1rem; flex-shrink: 0; }
.finder-item--projet .finder-item-label { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.35; }