/* ═══════════════════════════════════════════════════════
   DEVISVOX - CSS GLOBAL & MOBILE-FIRST
   SESSION 2/20 - Design System + Styles Mobile
   ═══════════════════════════════════════════════════════ */

:root {
    /* COULEURS - LIGHT MODE (défaut) */
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;

    /* COULEURS ACCENT */
    --accent-orange: #FF6B00;
    --accent-blue: #1E3A5F;
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-danger: #EF4444;

    /* BORDURES & OMBRES */
    --border-color: #E0E0E0;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

    /* TYPOGRAPHIE */
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* TAILLES POLICE MOBILE */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;

    /* ESPACEMENTS */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* HAUTEURS FIXES */
    --header-height: 60px;
    --bottom-nav-height: 70px;
    --sidebar-width: 0px; /* Mobile = pas de sidebar */
    --footer-height: 54px;

    /* TRANSITIONS */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ═══════════════════════════════════════════════════════
   RESET CSS BASIQUE
   ═══════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════
   LOADER DÉMARRAGE
   ═══════════════════════════════════════════════════════ */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity var(--transition-slow);
}

.loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader p {
    margin-top: var(--spacing-lg);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
}

/* ═══════════════════════════════════════════════════════
   HEADER MOBILE
   ═══════════════════════════════════════════════════════ */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    z-index: 100;
}

.header-container {
    height: 100%;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-lg);
    color: var(--accent-orange);
    margin: 0;
}

/* Navigation desktop cachée sur mobile */
.nav-desktop {
    display: none;
}

/* Bouton hamburger mobile */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--spacing-sm);
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition-fast);
}

.hamburger:active span {
    background-color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR (cachée mobile)
   ═══════════════════════════════════════════════════════ */

#sidebar {
    display: none; /* Visible uniquement bureau - SESSION 3 */
}

/* ═══════════════════════════════════════════════════════
   CONTENU PRINCIPAL MOBILE
   ═══════════════════════════════════════════════════════ */

.main-content {
    margin-top: var(--header-height);
    margin-bottom: 0;
    min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - var(--footer-height));
    padding: var(--spacing-lg) var(--spacing-md) calc(var(--bottom-nav-height) + var(--footer-height) + var(--spacing-md));
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.container h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.container p {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.placeholder-box {
    background-color: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    text-align: center;
}

.placeholder-box p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.placeholder-box p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION BOTTOM MOBILE
   ═══════════════════════════════════════════════════════ */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bottom-nav-height);
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    padding: 0 var(--spacing-sm);
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs);
    transition: var(--transition-fast);
    min-width: 60px;
}

.bottom-nav-link .icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.bottom-nav-link.active {
    color: var(--accent-orange);
}

.bottom-nav-link:active {
    transform: scale(0.95);
    background-color: var(--bg-primary);
}

/* Bouton micro central (plus grand) */
.bottom-nav-micro {
    position: relative;
}

.bottom-nav-micro .icon-large {
    font-size: 28px;
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
    transition: var(--transition-fast);
}

.bottom-nav-micro:active .icon-large {
    transform: scale(0.95);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════
   MENU MOBILE (panneau hamburger)
   ═══════════════════════════════════════════════════════ */

#menu-mobile {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    background: var(--bg-secondary);
    z-index: 90;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg) 0;
    overflow-y: auto;
}

#menu-mobile.ouvert {
    transform: translateX(0);
}

#menu-mobile .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    transition: background var(--transition-fast), color var(--transition-fast);
}

#menu-mobile .sidebar-link:hover,
#menu-mobile .sidebar-link.active {
    background: #FFF3EB;
    color: var(--accent-orange);
}

#menu-mobile .sidebar-link .icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Animation hamburger → croix */
.hamburger.ouvert span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.ouvert span:nth-child(2) {
    opacity: 0;
}
.hamburger.ouvert span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Overlay sombre derrière le menu */
#overlay-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.40);
    z-index: 89;
}

#overlay-menu.visible {
    display: block;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */

.footer {
    position: fixed;
    bottom: var(--bottom-nav-height);
    left: 0;
    right: 0;
    z-index: 99;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 10px var(--spacing-md);
    height: var(--footer-height);
    box-sizing: border-box;
}

.footer-container {
    text-align: center;
}

.footer-container p {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-links a {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: underline;
}

.footer-links a:active {
    color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════
   CLASSES UTILITAIRES
   ═══════════════════════════════════════════════════════ */

.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* ═══════════════════════════════════════════════════════
   CLASSES RESPONSIVE (mobile-only / desktop-only)
   ═══════════════════════════════════════════════════════ */

/* Masquer sur mobile, visible sur bureau */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* Masquer sur bureau, visible sur mobile */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   BOUTON MICRO BUREAU (SIDEBAR)
   SESSION 4/20
   ═══════════════════════════════════════════════════════ */

.micro-desktop {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.micro-desktop-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
}

.micro-desktop-btn .icon {
    font-size: 24px;
}

.micro-desktop-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.micro-desktop-btn:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════
   MODAL VOCAL
   SESSION 4/20
   ═══════════════════════════════════════════════════════ */

.vocal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vocal-modal.hidden {
    display: none;
}

.vocal-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.vocal-modal-content {
    position: relative;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    max-height: 90vh;
    overflow: hidden;
    z-index: 10000;
    display: flex;
    flex-direction: column;
}

.vocal-modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md);
}

.vocal-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.vocal-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0 var(--spacing-xl) var(--spacing-lg);
}

.vocal-modal-header h2 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin: 0;
}

.btn-close-modal {
    display: none !important; /* masqué par défaut sur toutes les modals */
}

/* Croix fermeture modal vocal */
#vocal-modal .btn-close-modal,
#btn-close-vocal {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    height: 32px;
    border-radius: 16px;
    background: #FFFFFF;
    color: #555555;
    border: 2px solid #E0E0E0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1;
}

#vocal-modal .btn-close-modal:hover,
#btn-close-vocal:hover {
    background: #F44336;
    color: #FFFFFF;
    border-color: #F44336;
}

/* ═══════════════════════════════════════════════════════
   BOUTON MICRO CENTRAL MODAL
   ═══════════════════════════════════════════════════════ */

.vocal-micro-container {
    text-align: center;
    margin: var(--spacing-xxl) 0;
}

.btn-micro-record {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-fast);
}

.btn-micro-record:hover {
    transform: scale(1.05);
}

.btn-micro-record:active {
    transform: scale(0.95);
}

.btn-micro-record:disabled {
    background: var(--bg-secondary);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.45;
    transform: none !important;
    animation: none !important;
}

/* Animation pulse pendant enregistrement */
.btn-micro-record.recording {
    background: var(--accent-danger);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
    }
}

.vocal-status {
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
}

.vocal-status.listening {
    color: var(--accent-danger);
}

/* ═══════════════════════════════════════════════════════
   TRANSCRIPTION
   ═══════════════════════════════════════════════════════ */

.vocal-transcript-container {
    margin: var(--spacing-xl) 0;
}

.vocal-transcript {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    min-height: 120px;
    font-size: var(--font-size-md);
    line-height: 1.8;
    color: var(--text-primary);
}

.vocal-transcript-placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}
.vocal-conseil-bubble {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    margin: 8px 0 0 0;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    line-height: 1.5;
}
body.dark-mode .vocal-conseil-bubble {
    background: rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════
   BOUTONS ACTIONS VOCAL
   ═══════════════════════════════════════════════════════ */

.vocal-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 64px;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-vocal-primary,
.btn-vocal-secondary {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    transition: var(--transition-fast);
    min-width: 150px;
}

.btn-vocal-primary {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-vocal-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-vocal-secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-vocal-secondary:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE MODAL
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .vocal-modal-content {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .vocal-modal-header {
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    }

    .vocal-modal-body {
        padding: 0 var(--spacing-md) var(--spacing-md);
    }

    .vocal-actions {
        padding: 0 var(--spacing-md);
        flex-wrap: wrap;
        min-height: 56px;
        gap: var(--spacing-sm);
    }

    .btn-micro-record {
        width: 100px;
        height: 100px;
        font-size: 42px;
    }

    .vocal-actions {
        flex-direction: column;
    }

    .btn-vocal-primary,
    .btn-vocal-secondary {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════
   TRANSCRIPTION VOCALE - SESSION 5
   ═══════════════════════════════════════════════════════ */

/* Texte final confirmé : noir et gras */
.final-transcript {
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

/* Texte intermédiaire en cours de reconnaissance : gris italique */
.interim-transcript {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   ERREURS VOCALES - SESSION 5
   ═══════════════════════════════════════════════════════ */

.vocal-error {
    background-color: #FEE2E2;
    border: 2px solid var(--accent-danger);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    color: var(--accent-danger);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    text-align: center;
    line-height: 1.6;
}

.vocal-error.hidden {
    display: none;
}

.mic-help-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0;
    font-weight: normal;
    text-align: left;
}

/* ═══════════════════════════════════════════════════════
   RÉSULTAT PARSÉ IA - SESSION 6
   ═══════════════════════════════════════════════════════ */

.parsed-result-container {
    margin-top: var(--spacing-xl);
}

.parsed-result {
    background-color: var(--bg-card);
    border: 2px solid var(--accent-success);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
}

.parsed-result h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-lg);
    color: var(--accent-success);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.result-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.result-section:last-of-type {
    border-bottom: none;
}

.result-section h4 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.result-section p {
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0;
}

.result-section ul {
    list-style: none;
    padding: 0;
}

.result-section li {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.result-totaux {
    background-color: var(--bg-primary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
}

.total-ttc {
    font-size: var(--font-size-lg);
    color: var(--accent-orange);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 2px solid var(--accent-orange);
}

.parsed-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.parsed-actions button {
    flex: 1;
}

/* Aperçu résultat redessiné */
.parsed-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.parsed-result-header h3 { margin-bottom: 0; text-align: left; }

.result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

@media (max-width: 500px) { .result-grid { grid-template-columns: 1fr; } }

.result-detail {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    margin: 2px 0;
}

.result-mat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-mat-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.mat-line-label  { flex: 1; font-weight: var(--font-weight-bold); color: var(--text-primary); }
.mat-line-detail { color: var(--text-secondary); font-size: var(--font-size-xs); }
.mat-line-total  { color: var(--accent-orange); font-weight: var(--font-weight-bold); margin-left: auto; }

.totaux-apercu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.totaux-ligne {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: 3px 0;
}

.totaux-ht {
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 4px;
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.totaux-ttc {
    border-top: 2px solid var(--accent-orange);
    padding-top: 8px;
    margin-top: 4px;
    color: var(--accent-orange);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

/* Loader parsing IA */
.parsing-loader {
    text-align: center;
    padding: var(--spacing-xxl) 0;
}

.parsing-loader .spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--spacing-md);
}

.parsing-loader p {
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
}

.parsing-loader.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   FORMULAIRE MANUEL - SESSION 7
   ═══════════════════════════════════════════════════════ */

.manual-form-container {
    display: none;
}

.manual-form {
    padding: var(--spacing-sm) var(--spacing-md);
}

.manual-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0 var(--spacing-xl);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.form-header h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin: 0;
}

.btn-icon {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-icon:hover {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
}

.form-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
}

.form-section h4 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.form-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.form-group-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.form-group-inline label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-input,
.form-select,
.form-textarea {
    flex: 1;
    min-width: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    font-family: var(--font-main);
    background-color: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.form-input-small,
.form-select-small {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background-color: var(--bg-secondary);
}

.mat-quantite { width: 90px; min-width: 90px; }
.mat-unite    { width: 120px; min-width: 120px; }

.form-input-tiny,
.form-select-tiny {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background-color: var(--bg-secondary);
}

.form-textarea {
    resize: vertical;
}

/* Lignes matériaux */
.materiau-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    padding: 4px var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    flex-wrap: wrap;
}

.mat-designation {
    flex: 2;
    min-width: 120px;
}

.mat-total {
    min-width: 75px;
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
    text-align: right;
    white-space: nowrap;
}

.btn-remove-mat {
    padding: var(--spacing-xs);
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.btn-remove-mat:hover {
    opacity: 1;
}

.btn-add {
    width: 100%;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-add:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* Section totaux */
.form-totaux {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 2px solid var(--accent-orange);
    width: fit-content;
    min-width: 320px;
    margin-left: auto;
}

.totaux-grid {
    display: grid;
    grid-template-columns: max-content auto;
    gap: var(--spacing-sm) var(--spacing-md);
    align-items: center;
}

.totaux-grid > span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.totaux-grid > strong {
    text-align: right;
    color: var(--text-primary);
    white-space: nowrap;
}

.totaux-grid > div {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.total-ttc-label {
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-black) !important;
    color: var(--accent-orange) !important;
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--accent-orange);
    margin-top: var(--spacing-xs);
}

.total-ttc-value {
    font-size: var(--font-size-md);
    color: var(--accent-orange);
    text-align: right;
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--accent-orange);
    margin-top: var(--spacing-xs);
}

/* Actions formulaire */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

/* Responsive mobile formulaire */
@media (max-width: 768px) {
    .materiau-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mat-designation,
    .form-input-small,
    .form-select-small {
        width: 100%;
    }

    .mat-total {
        text-align: left;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-header {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════
   PAGES & NAVIGATION - SESSION 8
   ═══════════════════════════════════════════════════════ */

.page-content { width: 100%; }
.page-content.hidden { display: none; }

.container-full {
    max-width: 100%;
    width: 100%;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.page-header h2 { margin: 0; }

.page-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    font-family: var(--font-main);
    min-width: 180px;
    transition: border-color var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.btn-primary,
.btn-secondary {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════
   STATISTIQUES
   ═══════════════════════════════════════════════════════ */

.stats-bar {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.stat-label { color: var(--text-secondary); font-size: var(--font-size-sm); }

.stat-value {
    font-size: var(--font-size-xl);
    color: var(--accent-orange);
    font-family: var(--font-heading);
}

/* ═══════════════════════════════════════════════════════
   TABLEAU CATALOGUE
   ═══════════════════════════════════════════════════════ */

.table-container {
    overflow-x: auto;
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.catalogue-table {
    width: 100%;
    border-collapse: collapse;
}

.catalogue-table thead {
    background-color: var(--bg-primary);
    position: sticky;
    top: 0;
}

.catalogue-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.catalogue-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.catalogue-table tbody tr:hover { background-color: var(--bg-primary); }

/* Cellule éditable : curseur + hover orange */
.catalogue-table .editable {
    cursor: pointer;
}

.catalogue-table .editable:hover {
    background-color: #FFF5EB;
    outline: 1px solid var(--accent-orange);
}

.catalogue-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.catalogue-table .actions,
.catalogue-table th:last-child { text-align: center; }

/* Devis & Factures — espacement uniforme + montants alignés à gauche */
.devis-table th,
.factures-table th,
.devis-table td,
.factures-table td {
    padding: var(--spacing-sm) var(--spacing-md);
}

.devis-table .num,
.factures-table .num {
    text-align: left;
}

.devis-table .actions,
.devis-table th:last-child { text-align: right; white-space: nowrap; }

.btn-action {
    padding: var(--spacing-xs);
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.btn-action:hover { opacity: 1; }

.btn-action-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    vertical-align: middle;
}

.inline-edit-input {
    width: 100%;
    padding: 2px 6px;
    border: 2px solid var(--accent-orange);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background: white;
}

/* ═══════════════════════════════════════════════════════
   MODAL GÉNÉRIQUE
   ═══════════════════════════════════════════════════════ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal.hidden { display: none; }

.modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    position: relative;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    max-width: 560px;
    width: 92%;
    max-height: 92vh;
    overflow-y: auto;
    z-index: 9001;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.modal-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
    justify-content: flex-end;
}

.modal-actions button { flex: 0 0 auto; }

@media (max-width: 768px) {
    .page-header    { flex-direction: column; align-items: flex-start; }
    .page-actions   { width: 100%; }
    .search-input   { width: 100%; }
    .form-row-2     { grid-template-columns: 1fr; }
    .modal-actions  { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   FILTRES CATÉGORIES - SESSION 9
   ═══════════════════════════════════════════════════════ */

.category-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    padding: var(--spacing-md);
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
}

.category-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.category-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: translateY(-2px);
}

.category-btn.active {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    border-color: var(--accent-orange);
}

.cat-del-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    background: rgba(0,0,0,0.15);
    color: inherit;
    cursor: pointer;
    vertical-align: middle;
}
.cat-del-btn:hover {
    background: rgba(0,0,0,0.35);
}

/* ─── Pagination ─── */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: var(--spacing-md) 0;
    flex-wrap: wrap;
}
.pgn-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pgn-btn:hover:not(:disabled) {
    background: var(--background-color);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}
.pgn-btn.pgn-active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
    font-weight: var(--font-weight-bold);
    pointer-events: none;
}
.pgn-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.pgn-ellipsis {
    min-width: 24px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
}

.category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   TRI COLONNES - SESSION 9
   ═══════════════════════════════════════════════════════ */

.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.sortable:hover {
    background-color: var(--bg-primary);
}

.sort-icon {
    font-size: 12px;
    opacity: 0.5;
    margin-left: 4px;
}

.sortable.sort-asc .sort-icon::after {
    content: ' ▲';
    opacity: 1;
}

.sortable.sort-desc .sort-icon::after {
    content: ' ▼';
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE CATÉGORIES - SESSION 9
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .category-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-md);
    }

    .category-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ═══════════════════════════════════════════════════════
   CALCULATEUR / DEVIS - SESSION 10
   ═══════════════════════════════════════════════════════ */

.calc-section {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.calc-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header h3 { margin: 0; }

.btn-primary-small {
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-primary-small:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Articles devis */

.devis-articles-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.devis-articles-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-primary);
    padding: 4px var(--spacing-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-color);
}
.article-col-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.devis-article-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--spacing-md);
    border-top: 1px solid var(--border-color);
    flex-wrap: nowrap;
    transition: background-color var(--transition-fast);
}

.devis-article-row:hover { background-color: var(--bg-primary); }

.article-col {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.article-designation { font-weight: var(--font-weight-bold); }

.input-quantite,
.input-prix {
    flex: 0 0 auto;
    width: 52px;
    padding: 5px 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    text-align: right;
    transition: border-color var(--transition-fast);
}
.input-prix { width: 65px; }

.input-quantite:focus,
.input-prix:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.unite { color: var(--text-tertiary); font-size: var(--font-size-sm); white-space: nowrap; width: 50px; flex-shrink: 0; }

.art-sep { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; width: 16px; flex-shrink: 0; text-align: center; }

.art-total-span {
    flex: 0 0 80px;
    text-align: right;
    font-weight: var(--font-weight-bold);
    font-size: 13px;
    color: var(--accent-orange);
    white-space: nowrap;
}

.art-type-select {
    flex: 0 0 90px;
    width: 90px;
    font-size: 10px;
    padding: 3px 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    max-width: 90px;
    min-width: 60px;
    font-family: var(--font-main);
    cursor: pointer;
}

.art-type-select:focus {
    outline: none;
    border-color: var(--accent-orange);
}

.btn-remove {
    padding: var(--spacing-xs);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.btn-remove:hover { opacity: 1; }

.empty-devis {
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Modal sélection catalogue */

.modal-large { max-width: 800px; }

.catalogue-selector-search { margin-bottom: var(--spacing-lg); }

.category-filters-mini {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.category-btn-mini {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.category-btn-mini:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.category-btn-mini.active {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
}

.catalogue-selector-list {
    max-height: 400px;
    overflow-y: auto;
    display: grid;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.article-selector-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.article-selector-card:hover {
    border-color: var(--accent-orange);
    box-shadow: var(--shadow-sm);
}

.article-info { flex: 1; }

.article-name {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
}

.article-meta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    font-size: var(--font-size-sm);
}

.category-badge-mini {
    padding: 2px 8px;
    border-radius: 8px;
    color: white;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

.article-price { color: var(--text-secondary); }

.btn-add-article {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--accent-success);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-add-article:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Totaux calculateur */

.calc-totaux {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 2px solid var(--accent-orange);
}

.totaux-grid-calc {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-sm) var(--spacing-lg);
    align-items: center;
}

.totaux-input-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.totaux-split-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding-left: var(--spacing-md);
}

.totaux-split-row strong {
    color: var(--text-primary);
    white-space: nowrap;
}

/* Responsive calculateur */

@media (max-width: 768px) {
    .devis-articles-header { display: none; }

    .devis-article-row { gap: 4px; padding: 6px var(--spacing-sm); }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .btn-primary-small { width: 100%; text-align: center; }
}

/* ═══════════════════════════════════════════════════════
   MODAL EMAIL - SESSION 12
   ═══════════════════════════════════════════════════════ */

.email-textarea {
    width: 100%;
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-main);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.email-config-info {
    background-color: #FFF3CD;
    border: 1px solid #FFC107;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.email-config-info strong { color: #856404; display: block; margin-bottom: var(--spacing-xs); }
.email-config-info p { color: #664D03; margin: var(--spacing-xs) 0 0 0; }
.email-config-info code {
    background-color: rgba(0,0,0,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: monospace;
}

.email-pdf-info {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.email-status {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.email-status-info    { background-color: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.email-status-success { background-color: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.email-status-error   { background-color: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.email-status-warning { background-color: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

.email-alternatives {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.email-alternatives p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.email-alt-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-alt-whatsapp,
.btn-alt-sms {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
}

.btn-alt-whatsapp {
    background-color: #25D366;
    color: white;
}

.btn-alt-whatsapp:hover { background-color: #1EBE5A; transform: translateY(-1px); }

.btn-alt-sms {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-alt-sms:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

/* Success modal actions (session 11 update) */
.success-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════
   MODAL SUCCÈS PDF - SESSION 11
   ═══════════════════════════════════════════════════════ */

.success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.success-modal-content {
    position: relative;
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xxl);
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    z-index: 10001;
}

.success-modal-content h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    color: var(--accent-success);
    margin-bottom: var(--spacing-md);
}

.success-icon {
    font-size: 56px;
    margin-bottom: var(--spacing-md);
}

.success-message {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    line-height: 1.8;
}

.success-modal-content .btn-primary {
    min-width: 120px;
    padding: var(--spacing-md) var(--spacing-xl);
}

/* ═══════════════════════════════════════════════════════
   SIGNATURE ÉLECTRONIQUE - SESSION 13
   ═══════════════════════════════════════════════════════ */

.modal-signature { max-width: 680px; }

.signature-instructions {
    background-color: #E3F2FD;
    border-left: 4px solid #2196F3;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius-sm);
}

.signature-instructions p {
    margin: 0;
    color: #1565C0;
    font-size: var(--font-size-sm);
}

.signature-tip {
    margin-top: var(--spacing-xs) !important;
    opacity: 0.8;
}

.signature-container {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: #fff;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.06);
}

.signature-canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
}

.signature-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-tertiary);
    font-size: var(--font-size-xl);
    pointer-events: none;
    user-select: none;
    gap: var(--spacing-sm);
}

.signature-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.signature-legal {
    padding: var(--spacing-md);
    background-color: #FFF5EB;
    border-radius: var(--border-radius-sm);
    text-align: center;
    border: 1px solid #FFE0C0;
}

.signature-legal small {
    color: var(--text-secondary);
    line-height: 1.6;
}

.signature-legal strong { color: var(--accent-orange); }

@media (max-width: 768px) {
    .modal-signature { max-width: 95%; }

    .signature-actions {
        flex-direction: column;
    }

    .signature-actions button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   CLIENTS CRM - SESSION 17
   ═══════════════════════════════════════════════════════ */

/* Statuts clients (distinct des statuts factures) */
.statut-client-actif {
    background-color: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.statut-client-inactif {
    background-color: #F3F4F6;
    color: #6B7280;
    border: 1px solid #D1D5DB;
}

/* Grille clients */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.client-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
    border: 2px solid transparent;
}

.client-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-orange);
}

.client-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.client-avatar {
    font-size: 36px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border-radius: 50%;
    flex-shrink: 0;
}

.client-info { flex: 1; min-width: 0; }

.client-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-type {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.client-statut { align-self: flex-start; }

.client-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.client-stat { text-align: center; }

.client-stat .stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
}

.client-stat .stat-value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
}

.client-actions { display: flex; gap: var(--spacing-sm); }

.btn-client-action {
    flex: 1;
    padding: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}

.btn-client-action:hover {
    background-color: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-tertiary);
}

.empty-state p { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); }
.empty-state small { font-size: var(--font-size-sm); }

/* Modal détail client */
.client-detail-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.client-detail-section:last-of-type { border-bottom: none; }

.client-detail-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.client-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.detail-item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: baseline;
}

.detail-item.detail-full { grid-column: span 2; }

.detail-label {
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    min-width: 90px;
    flex-shrink: 0;
}

.detail-value {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.stats-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.stat-mini {
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    text-align: center;
    border-left: 3px solid var(--accent-orange);
}

.stat-mini-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    margin-bottom: 4px;
}

.stat-mini-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
    color: var(--accent-orange);
    font-family: var(--font-heading);
}

/* Historique factures dans modal */
.factures-history {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.facture-history-item {
    display: grid;
    grid-template-columns: 120px 90px 1fr 100px 80px;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-fast);
}

.facture-history-item:last-child { border-bottom: none; }
.facture-history-item:hover { background-color: var(--bg-primary); }

.facture-history-numero { font-weight: var(--font-weight-bold); color: var(--text-primary); }
.facture-history-date   { color: var(--text-secondary); }
.facture-history-travaux { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facture-history-montant { font-weight: var(--font-weight-bold); color: var(--accent-orange); text-align: right; }
.facture-history-statut  { text-align: center; }

@media (max-width: 768px) {
    .clients-grid { grid-template-columns: 1fr; }
    .client-detail-grid { grid-template-columns: 1fr; }
    .detail-item.detail-full { grid-column: span 1; }
    .stats-mini-grid { grid-template-columns: repeat(2, 1fr); }
    .facture-history-item { grid-template-columns: 1fr 1fr; gap: var(--spacing-xs); }
    .facture-history-travaux { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════
   RAPPORT FISCAL - SESSION 16
   ═══════════════════════════════════════════════════════ */

.rapport-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background-color: var(--bg-primary);
    border-left: 3px solid var(--accent-orange);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD - SESSION 15
   ═══════════════════════════════════════════════════════ */

.input-date {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background-color: var(--bg-secondary);
    transition: border-color var(--transition-fast);
}

.input-date:focus {
    outline: none;
    border-color: var(--accent-orange);
}

/* Grille KPI */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.kpi-card {
    background: linear-gradient(135deg, #FFFFFF, #F8F8F8);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    border-left: 4px solid var(--border-color);
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.kpi-card.kpi-primary {
    border-left-color: var(--accent-orange);
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
}

.kpi-card.kpi-success {
    border-left-color: var(--accent-success);
    background: linear-gradient(135deg, #E8F5E9, #FFFFFF);
}

.kpi-card.kpi-warning {
    border-left-color: #F59E0B;
    background: linear-gradient(135deg, #FFFBEB, #FFFFFF);
}

.kpi-icon { font-size: 30px; }

.kpi-info { flex: 1; min-width: 0; }

.kpi-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    font-family: var(--font-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grille graphiques */

.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.chart-container {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    height: 360px;
    overflow: hidden;
}

.chart-container.chart-large {
    grid-column: span 2;
    height: 320px;
}

.chart-container canvas {
    max-height: 290px;
}

/* Top clients */

.top-client-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    background-color: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border-left: 4px solid var(--accent-orange);
    transition: transform var(--transition-fast);
}

.top-client-item:hover { transform: translateX(4px); }

.top-client-rank {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
    color: var(--accent-orange);
    min-width: 36px;
    font-family: var(--font-heading);
}

.top-client-name {
    flex: 1;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-client-ca {
    font-weight: var(--font-weight-bold);
    color: var(--accent-success);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .charts-grid { grid-template-columns: 1fr; }
    .chart-container.chart-large { grid-column: span 1; }
}

@media (max-width: 768px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .chart-container,
    .chart-container.chart-large { height: 280px; }
    .chart-container canvas { max-height: 240px; }
}

/* ═══════════════════════════════════════════════════════
   FACTURATION - SESSION 14
   ═══════════════════════════════════════════════════════ */

.factures-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--border-color);
    transition: transform var(--transition-fast);
}

.stat-card:hover { transform: translateY(-2px); }

.stat-card-success { border-left-color: var(--accent-success); }
.stat-card-warning { border-left-color: #F59E0B; }
.stat-card-danger  { border-left-color: var(--accent-danger); }

/* ─── Factures : bandeau header + couleurs stat-cards ── */
#factures-page .page-header {
    background: linear-gradient(135deg, rgba(255,107,0,0.06) 0%, rgba(255,107,0,0.02) 100%);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid rgba(255,107,0,0.12);
}
#factures-page .stat-card-success {
    background-color: #f0fdf4;
    border-left-color: #16a34a;
}
#factures-page .stat-card-success .stat-card-value,
#factures-page .stat-card-success .stat-card-icon { color: #16a34a; }
#factures-page .stat-card-warning {
    background-color: #fffbeb;
    border-left-color: #d97706;
}
#factures-page .stat-card-warning .stat-card-value,
#factures-page .stat-card-warning .stat-card-icon { color: #d97706; }
#factures-page .stat-card-danger {
    background-color: #fef2f2;
    border-left-color: #dc2626;
}
#factures-page .stat-card-danger .stat-card-value,
#factures-page .stat-card-danger .stat-card-icon { color: #dc2626; }

.stat-card-icon {
    font-size: 24px;
    margin-bottom: var(--spacing-xs);
}

.stat-card-value {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xxl);
    color: var(--accent-orange);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-card-value-sm {
    font-size: var(--font-size-lg);
}

.stat-card-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filtres factures */

.factures-filters {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.factures-filters-row {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: white;
    border-color: var(--accent-orange);
}

/* Badges statut */

.statut-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.statut-en_attente {
    background-color: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
}

.statut-paye {
    background-color: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.statut-retard {
    background-color: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Table factures */

.factures-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.factures-table .actions,
.factures-table th:last-child { text-align: center; white-space: nowrap; }

@media (max-width: 768px) {
    .factures-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .factures-filters { flex-wrap: wrap; }

    .filter-btn { flex: 1; text-align: center; min-width: 110px; }
}

/* ═══════════════════════════════════════════════════════
   PERSONNALISATION & DARK MODE - SESSION 18
   ═══════════════════════════════════════════════════════ */

/* ── Toggle dark mode ── */

.dark-mode-toggle-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: var(--spacing-lg);
}

.dark-mode-switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
    cursor: pointer;
}

.dark-mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.dark-mode-slider {
    position: absolute;
    inset: 0;
    background-color: #CBD5E1;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    transition: background-color 0.35s;
    overflow: hidden;
}

.dark-mode-slider::before {
    content: '';
    position: absolute;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.35s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    z-index: 2;
}

.dark-mode-switch input:checked + .dark-mode-slider {
    background-color: #334155;
}

.dark-mode-switch input:checked + .dark-mode-slider::before {
    transform: translateX(32px);
}

.dark-mode-icon {
    font-size: 13px;
    z-index: 1;
    line-height: 1;
    user-select: none;
}

/* ── Modal onboarding ── */

.modal-onboarding {
    z-index: 10001;
    align-items: flex-start;
    padding-top: 40px;
}

.modal-onboarding-content {
    max-width: 680px;
    max-height: 88vh;
    overflow-y: auto;
}

.onboarding-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--border-color);
}

.onboarding-logo {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-black);
    color: var(--accent-orange);
    margin-bottom: var(--spacing-sm);
}

.onboarding-header h2 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.onboarding-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
}

.onboarding-step { margin-bottom: var(--spacing-lg); }

.onboarding-step h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.step-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.optional {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-tertiary);
}

/* ── Grille métiers ── */

.metiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--spacing-md);
}

.metier-card {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                border-color var(--transition-fast), background-color var(--transition-fast);
    user-select: none;
}

.metier-card:hover {
    border-color: var(--accent-orange);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.metier-card.selected {
    border-color: var(--accent-orange);
    background: linear-gradient(135deg, rgba(255,107,0,0.08), rgba(255,107,0,0.02));
    box-shadow: 0 0 0 3px rgba(255,107,0,0.2), var(--shadow-md);
}

.metier-icone {
    font-size: 40px;
    margin-bottom: var(--spacing-sm);
    line-height: 1;
}

.metier-nom {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.onboarding-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* ── Dark mode theme ── */

body.dark-mode {
    --bg-primary:    #111827;
    --bg-secondary:  #1F2937;
    --bg-card:       #1F2937;
    --text-primary:  #F9FAFB;
    --text-secondary:#9CA3AF;
    --text-tertiary: #6B7280;
    --border-color:  #374151;
    color-scheme: dark;
}

body.dark-mode #header,
body.dark-mode #sidebar,
body.dark-mode #menu-mobile {
    background-color: #111827;
    border-color: #374151;
}

body.dark-mode #bottom-nav {
    background-color: #111827;
    border-top-color: #374151;
}

body.dark-mode .modal-content,
body.dark-mode .success-modal-content {
    background-color: #1F2937;
}

body.dark-mode .modal-overlay,
body.dark-mode .success-modal-overlay {
    background-color: rgba(0,0,0,0.7);
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea,
body.dark-mode .search-input,
body.dark-mode .input-date,
body.dark-mode select {
    background-color: #111827;
    border-color: #374151;
    color: #F9FAFB;
}

body.dark-mode .btn-secondary {
    background-color: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

body.dark-mode .btn-secondary:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

body.dark-mode .table-container,
body.dark-mode .catalogue-table thead { background-color: #111827; }

body.dark-mode .catalogue-table tbody tr:hover,
body.dark-mode .devis-article-row:hover { background-color: #374151; }

body.dark-mode .catalogue-table td,
body.dark-mode .catalogue-table th { border-color: #374151; }

body.dark-mode .kpi-card,
body.dark-mode .stat-card,
body.dark-mode .client-card,
body.dark-mode .chart-container,
body.dark-mode .calc-section,
body.dark-mode .category-filters {
    background: #1F2937;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════
   BLOC 3 - AMÉLIORATIONS UX
   ═══════════════════════════════════════════════════════ */

/* --- Notification toast --- */
.notification {
    position: fixed;
    top: -120px;
    right: 20px;
    min-width: 280px;
    max-width: 380px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    z-index: 10500;
    transition: top 0.3s ease;
}
.notification.show { top: 80px; }
.notification-success { border-left: 4px solid var(--accent-success); }
.notification-info    { border-left: 4px solid #2196F3; }
.notification-warning { border-left: 4px solid var(--accent-warning); }
.notification-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 14px;
}
.notification-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* --- Modal transformation devis→facture --- */
.modal-transformation { z-index: 10200; }
.modal-transformation-content {
    max-width: 480px;
    text-align: center;
}
.transformation-header { margin-bottom: 20px; }
.transformation-icon {
    font-size: 56px;
    margin-bottom: 12px;
    animation: scaleIn 0.3s ease;
}
@keyframes scaleIn {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.transformation-header h2 {
    margin: 0;
    color: var(--accent-success);
    font-size: 26px;
}
.transformation-body { margin-bottom: 28px; }
.transformation-message {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.transformation-question {
    font-size: 17px;
    font-weight: bold;
    color: var(--accent-orange);
}
.transformation-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}
.btn-large {
    flex: 1;
    padding: 14px;
    font-size: 15px;
    font-weight: bold;
}
.btn-transformation {
    background: linear-gradient(135deg, #4CAF50, #45A049);
    animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 4px 12px rgba(76,175,80,0.3); }
    50%       { box-shadow: 0 4px 20px rgba(76,175,80,0.6); }
}
.transformation-note {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
    margin: 0;
}
.modal-transformation.show .modal-content { animation: scaleIn 0.25s ease; }

/* --- Multi-métiers onboarding (toggle cards) --- */
.metier-card {
    position: relative;
    cursor: pointer;
    transition: var(--transition-fast);
}
.metier-card.selected {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 2px solid var(--accent-orange) !important;
    box-shadow: var(--shadow-md);
}
.metier-card.selected::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--accent-orange);
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
}

/* --- Champ "autre métier" --- */
.autre-metier-container {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 2px dashed var(--border-color);
}
.autre-metier-container.hidden { display: none; }
.autre-metier-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-primary);
    font-size: 14px;
}

/* --- Paramètres complets --- */
.settings-modal-content {
    max-height: 90vh;
    overflow-y: auto;
}
.settings-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
}
.settings-section h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: var(--text-primary);
}
.settings-description {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.metiers-grid-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.metier-tag {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition-fast);
    user-select: none;
}
.metier-tag:hover {
    border-color: var(--accent-orange);
}
.metier-tag.selected {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
    font-weight: bold;
}
.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
}
.settings-option-desc {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* --- Toggle switch --- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    transition: .3s;
    border-radius: 26px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    transition: .3s;
    border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent-orange); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

/* --- Upload logo --- */
.logo-upload-container {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    background: var(--bg-secondary);
}
.logo-preview {
    width: 120px;
    height: 120px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-placeholder  { font-size: 13px; color: var(--text-tertiary); text-align: center; }
.logo-upload-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.logo-upload-hint {
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 0;
}

/* --- Color picker --- */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-picker-input {
    width: 52px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    padding: 2px;
    background: none;
}
.color-picker-value {
    font-family: monospace;
    font-size: 13px;
    color: var(--text-secondary);
}
.form-hint {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
}

/* --- Envoi multi-canaux --- */
.modal-envoi-content {
    max-width: 380px;
}
.modal-envoi-content h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
}
.envoi-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.envoi-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
    width: 100%;
}
.envoi-option:hover {
    border-color: var(--accent-orange);
    background: #FFF5EB;
    transform: translateX(3px);
}
.envoi-icon { font-size: 28px; flex-shrink: 0; }
.envoi-label { font-weight: bold; color: var(--text-primary); font-size: 15px; }
.envoi-desc  { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* --- Dark mode adaptations bloc 3 --- */
body.dark-mode .notification {
    background: #1F2937;
    color: #F9FAFB;
}
body.dark-mode .notification-content strong { color: #F9FAFB; }
body.dark-mode .notification-content p      { color: #9CA3AF; }

/* ═══════════════════════════════════════════════════════
   PARAMÈTRES — PAGE SIDEBAR (BLOC 4)
   ═══════════════════════════════════════════════════════ */

.modal-settings { z-index: 10000; }

.modal-settings-content {
    position: relative;
    max-width: 960px;
    width: 92vw;
    height: 82vh;
    max-height: 780px;
    display: flex;
    padding: 0;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
}

.btn-close-settings {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.btn-close-settings:hover {
    background: #F44336;
    color: #ffffff;
    border-color: #F44336;
}

/* ── Catalogue en mode modale plein écran ── */
#catalogue-gestion-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99998;
}

.catalogue-modal-mode {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80vw !important;
    height: 75vh !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    background: var(--bg-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
    padding: 24px !important;
    display: block !important;
}

.btn-retour-catalogue {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.btn-retour-catalogue:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ── Catalogue drawer — groupes par type ── */
.dv-cat-group { border-bottom: 1px solid var(--border-color); }
.dv-cat-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.dv-cat-group-header:hover { background: var(--bg-primary); }
.dv-cat-group-label { flex: 1; font-weight: var(--font-weight-bold); font-size: var(--font-size-md); }
.dv-cat-group-count {
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
}
.dv-cat-group-toggle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-orange);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    flex-shrink: 0;
}
.dv-cat-group-items { display: none; }
.dv-cat-group-items.open { display: block; }

/* ── Storage Manager UI ── */
.dv-storage-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99990;
    background: #FF8C00;
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dv-storage-banner a  { color: #fff; text-decoration: underline; }
.dv-storage-banner button {
    margin-left: auto;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.dv-storage-indicator { padding: 4px 0; }
.dv-si-bar-wrap {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.dv-si-bar { height: 100%; border-radius: 4px; transition: width 0.4s; }
.dv-si-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.dv-si-alert {
    font-size: 12px;
    margin: 4px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
}
.dv-si-alert.warning { background: #FFF3E0; color: #E65100; }
.dv-si-alert.blocked { background: #FFEBEE; color: #C62828; }

/* Sidebar */
.settings-sidebar {
    width: 220px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.settings-header {
    padding: 22px 18px 18px;
    border-bottom: 1px solid var(--border-color);
}
.settings-header h2 {
    margin: 0;
    font-size: 18px;
    font-family: var(--font-heading);
}
.settings-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-fast);
    border-left: 3px solid transparent;
}
.settings-nav-item:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.settings-nav-item.active {
    background: var(--bg-primary);
    color: var(--accent-orange);
    border-left-color: var(--accent-orange);
    font-weight: 600;
}
.settings-nav-icon { font-size: 18px; }

/* Body */
.settings-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-sections {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
}
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.section-header { margin-bottom: 24px; }
.section-header h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-family: var(--font-heading);
}
.section-description { margin: 0; color: var(--text-secondary); font-size: 14px; }
.settings-form { max-width: 560px; }

/* Cards */
.settings-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}
.settings-card h4 { margin: 0 0 14px; font-size: 15px; }

/* Métiers grid */
.metiers-grid-settings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
.metier-checkbox-card {
    position: relative;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 8px;
    cursor: pointer;
    text-align: center;
    transition: var(--transition-fast);
    user-select: none;
}
.metier-checkbox-card:hover { border-color: var(--accent-orange); transform: translateY(-2px); }
.metier-checkbox-card.selected {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border-color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(255,107,0,0.15);
}
.metier-checkbox-input { position: absolute; opacity: 0; pointer-events: none; }
.metier-checkbox-content .metier-icone { font-size: 28px; margin-bottom: 6px; }
.metier-checkbox-content .metier-nom   { font-size: 12px; font-weight: 500; }

/* Logo upload */
.logo-upload-zone { text-align: center; }
.logo-preview-large {
    width: 180px;
    height: 180px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.logo-preview-large img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-placeholder-large { text-align: center; padding: 16px; }
.placeholder-icon  { font-size: 40px; opacity: 0.3; margin-bottom: 8px; }
.placeholder-text  { color: var(--text-tertiary); font-size: 13px; }
.upload-hint       { font-size: 11px; color: var(--text-tertiary); margin: 8px 0 0; }

/* Colors */
.colors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.color-selector label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; }
.color-input-group { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.color-input {
    width: 50px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    padding: 2px;
}
.color-text-input {
    flex: 1;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.color-hint { font-size: 11px; color: var(--text-tertiary); margin: 0; }

/* Signature */
.signature-canvas-settings {
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: #fff;
    cursor: crosshair;
    display: block;
}
.signature-actions { display: flex; gap: 10px; margin-top: 14px; }
.signature-hint { margin: 12px 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }

/* Apparence */
.settings-option-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.option-content { display: flex; align-items: center; gap: 14px; flex: 1; }
.option-icon    { font-size: 30px; }
.option-info strong { display: block; margin-bottom: 3px; }
.option-info p  { margin: 0; font-size: 13px; color: var(--text-secondary); }

.toggle-switch-large {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 30px;
    flex-shrink: 0;
}
.toggle-switch-large input { opacity: 0; width: 0; height: 0; }
.toggle-slider-large {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    transition: .35s;
    border-radius: 30px;
}
.toggle-slider-large:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background: #fff;
    transition: .35s;
    border-radius: 50%;
}
.toggle-switch-large input:checked + .toggle-slider-large { background: var(--accent-orange); }
.toggle-switch-large input:checked + .toggle-slider-large:before { transform: translateX(28px); }

/* Données zone dangereuse */
.settings-card-warning {
    border: 2px solid #EF4444;
    background: #FFF5F5;
}
.settings-card-warning h4 { color: #DC2626; }
.danger-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.btn-danger {
    background: #EF4444;
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}
.btn-danger:hover { background: #DC2626; transform: translateY(-1px); }
.btn-danger-outline {
    background: transparent;
    color: #EF4444;
    border: 2px solid #EF4444;
    padding: 11px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}
.btn-danger-outline:hover { background: #EF4444; color: #fff; }

/* Footer */
.settings-footer {
    padding: 16px 32px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .modal-settings-content {
        flex-direction: column;
        width: 98vw;
        height: 96vh;
        max-height: none;
    }
    .settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .settings-nav {
        display: flex;
        overflow-x: auto;
        padding: 6px 8px;
        gap: 4px;
    }
    .settings-nav-item {
        flex-direction: column;
        min-width: 70px;
        text-align: center;
        padding: 8px;
        border-left: none;
        border-bottom: 3px solid transparent;
        gap: 4px;
    }
    .settings-nav-item.active { border-left: none; border-bottom-color: var(--accent-orange); }
    .settings-nav-text { font-size: 10px; }
    .settings-sections { padding: 16px; }
    .settings-footer   { padding: 12px 16px; }
    .colors-grid       { grid-template-columns: 1fr; }
    .metiers-grid-settings { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* Dark mode */
body.dark-mode .settings-sidebar  { background: #1F2937; border-color: #374151; }
body.dark-mode .settings-header   { border-color: #374151; }
body.dark-mode .settings-footer   { background: #1F2937; border-color: #374151; }
body.dark-mode .settings-card     { background: #1F2937; border-color: #374151; }
body.dark-mode .settings-option-card { background: #1F2937; border-color: #374151; }
body.dark-mode .settings-card-warning { background: #3D1515; border-color: #DC2626; }
body.dark-mode .metier-checkbox-card  { background: #374151; border-color: #4B5563; }
body.dark-mode .metier-checkbox-card.selected { background: #3D2D1A; }
body.dark-mode .logo-preview-large   { background: #111827; border-color: #374151; }
body.dark-mode .color-text-input      { background: #374151; color: #F9FAFB; border-color: #4B5563; }
body.dark-mode .signature-canvas-settings { background: #fff; }
body.dark-mode .settings-nav-item.active { background: #374151; }
body.dark-mode .settings-nav-item:hover  { background: #374151; }
body.dark-mode .metier-tag          { background: #374151; border-color: #4B5563; color: #F9FAFB; }
body.dark-mode .metier-tag.selected { background: var(--accent-orange); border-color: var(--accent-orange); color: #fff; }
body.dark-mode .metier-tag:hover    { border-color: var(--accent-orange); }
body.dark-mode .settings-option     { background: #374151; }
body.dark-mode .logo-upload-container { background: #374151; border-color: #4B5563; }
body.dark-mode .logo-preview        { background: #1F2937; border-color: #4B5563; }
body.dark-mode .envoi-option        { background: #374151; border-color: #4B5563; }
body.dark-mode .envoi-option:hover  { background: #4B5563; border-color: var(--accent-orange); }
body.dark-mode .autre-metier-container { background: #374151; border-color: #4B5563; }
body.dark-mode .modal-transformation-content { background: #1F2937; }

body.dark-mode .kpi-card.kpi-primary { background: linear-gradient(135deg, #2D1F12, #1F2937); }
body.dark-mode .kpi-card.kpi-success { background: linear-gradient(135deg, #122D1A, #1F2937); }
body.dark-mode .kpi-card.kpi-warning { background: linear-gradient(135deg, #2D2212, #1F2937); }

body.dark-mode .article-selector-card,
body.dark-mode .metier-card,
body.dark-mode .client-card,
body.dark-mode .stat-mini { background-color: #111827; }

body.dark-mode .signature-container { background-color: #fff; }

body.dark-mode .stats-bar { background-color: #1F2937; }

body.dark-mode .nav-link,
body.dark-mode .sidebar-link,
body.dark-mode .bottom-nav-link { color: #9CA3AF; }

body.dark-mode .nav-link.active,
body.dark-mode .sidebar-link.active,
body.dark-mode .bottom-nav-link.active { color: var(--accent-orange); }

/* ═══════════════════════════════════════════════════════
   DASHBOARD FILTRES (#2) + RENTABILITÉ (#3) - BLOC 4
   ═══════════════════════════════════════════════════════ */

.dashboard-filters {
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.filters-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.filters-row + .filters-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.filters-toggle-row { align-items: center; gap: 20px; }
.filter-group { flex: 1; min-width: 140px; }
.filter-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.filter-select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.filter-select:focus { outline: none; border-color: var(--accent-orange); }
.btn-reset-filters { white-space: nowrap; align-self: flex-end; padding: 9px 16px; }
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 500;
}
.filter-checkbox input { cursor: pointer; accent-color: var(--accent-orange); }

.rentabilite-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-md);
    padding: 24px;
    margin-top: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.rentabilite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.rentabilite-header h3 { margin: 0; font-size: 18px; }
.rentabilite-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.rentabilite-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}
.rentabilite-kpi:hover { border-color: var(--accent-orange); transform: translateY(-2px); }
.rent-kpi-icon  { font-size: 28px; }
.rent-kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.rent-kpi-value { font-size: 22px; font-weight: bold; color: var(--accent-orange); }

.suggestions-container {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 2px solid var(--accent-orange);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin-bottom: 28px;
}
.suggestions-container.hidden { display: none; }
.suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.suggestions-header h4 { margin: 0; font-size: 16px; }
.btn-icon {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
    padding: 4px;
}
.btn-icon:hover { opacity: 1; }
.suggestion-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid var(--accent-orange);
}
.suggestion-card.suggestion-haute   { border-left-color: var(--accent-danger); }
.suggestion-card.suggestion-moyenne { border-left-color: var(--accent-warning); }
.suggestion-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.suggestion-icone { font-size: 22px; }
.suggestion-titre { flex: 1; font-weight: bold; font-size: 15px; }
.suggestion-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}
.badge-haute     { background: #FFEBEE; color: #C62828; }
.badge-moyenne   { background: #FFF3E0; color: #E65100; }
.badge-success   { background: #D1FAE5; color: #065F46; border-radius: 20px; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-info      { background: #DBEAFE; color: #1E40AF; border-radius: 20px; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-secondary { background: #F3F4F6; color: #6B7280; border-radius: 20px; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-danger    { background: #FEE2E2; color: #991B1B; border-radius: 20px; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-warning   { background: #FEF3C7; color: #92400E; border-radius: 20px; padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }

body.dark-mode .badge-success   { background: #064E3B; color: #6EE7B7; }
body.dark-mode .badge-info      { background: #1E3A5F; color: #93C5FD; }
body.dark-mode .badge-secondary { background: #374151; color: #D1D5DB; }
body.dark-mode .badge-danger    { background: #4A1A1A; color: #F87171; }
body.dark-mode .badge-warning   { background: #3D2A0A; color: #FBB040; }
.suggestion-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px;
}
.suggestion-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.suggestion-impact { font-size: 12px; color: var(--text-tertiary); }
.btn-suggestion {
    background: var(--accent-orange);
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-suggestion:hover { opacity: 0.9; transform: translateY(-1px); }
.loading { text-align: center; padding: 32px; color: var(--text-secondary); font-size: 15px; }
.no-suggestions { text-align: center; padding: 32px; }
.no-suggestions-icon { font-size: 48px; margin-bottom: 12px; }
.no-suggestions-hint { color: var(--text-tertiary); font-size: 13px; margin: 4px 0 0; }

.top-chantiers { margin-bottom: 28px; }
.top-chantiers h4, .analyse-travaux h4 { margin: 0 0 14px; font-size: 15px; }
.chantiers-list { display: flex; flex-direction: column; gap: 10px; }
.chantier-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    padding: 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: var(--transition-fast);
}
.chantier-item:hover { border-color: var(--accent-orange); transform: translateX(3px); }
.chantier-rank   { font-size: 20px; font-weight: bold; color: var(--accent-orange); min-width: 36px; }
.chantier-info   { flex: 1; }
.chantier-client { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.chantier-type   { font-size: 12px; color: var(--text-secondary); }
.chantier-montant{ font-size: 16px; font-weight: bold; color: var(--accent-orange); }

body.dark-mode .dashboard-filters    { background: #1F2937; border-color: #374151; }
body.dark-mode .filters-row + .filters-row { border-color: #374151; }
body.dark-mode .filter-select        { background: #374151; color: #F9FAFB; border-color: #4B5563; }
body.dark-mode .rentabilite-section  { background: #1F2937; border-color: #374151; }
body.dark-mode .rentabilite-kpi      { background: #374151; border-color: #4B5563; }
body.dark-mode .suggestions-container{ background: linear-gradient(135deg, #2D1F12, #1F2937); }
body.dark-mode .suggestion-card      { background: #374151; }
body.dark-mode .chantier-item        { background: #374151; border-color: #4B5563; }
body.dark-mode .badge-haute          { background: #4A1A1A; color: #F87171; }
body.dark-mode .badge-moyenne        { background: #3D2A0A; color: #FBB040; }

@media (max-width: 768px) {
    .filters-row { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; min-width: unset; }
    .btn-reset-filters { width: 100%; }
    .filters-toggle-row { flex-direction: row; flex-wrap: wrap; gap: 12px; }
    .rentabilite-kpis { grid-template-columns: 1fr 1fr; }
    .suggestion-footer { flex-direction: column; align-items: flex-start; }
    .btn-suggestion { width: 100%; text-align: center; }
}

/* Lisibilité liens actifs sidebar en dark mode */
body.dark-mode .sidebar-link.active,
body.dark-mode #menu-mobile .sidebar-link.active {
    color: #FFFFFF !important;
    background-color: var(--accent-orange) !important;
}

body.dark-mode .sidebar-link.active span,
body.dark-mode #menu-mobile .sidebar-link.active span {
    color: #FFFFFF !important;
}

body.dark-mode .sidebar-link.active .icon,
body.dark-mode #menu-mobile .sidebar-link.active .icon { opacity: 1; }

body.dark-mode .bottom-nav-link.active {
    color: var(--accent-orange) !important;
    background-color: rgba(255, 107, 0, 0.12) !important;
}

body.dark-mode .nav-link.active {
    color: #FFFFFF !important;
    background-color: var(--accent-orange) !important;
}

body.dark-mode .rh-tab-btn.active {
    color: var(--accent-orange) !important;
    border-bottom-color: var(--accent-orange) !important;
}

body.dark-mode .filter-btn.active,
body.dark-mode .facture-type-btn.active {
    background-color: var(--accent-orange) !important;
    color: #FFFFFF !important;
    border-color: var(--accent-orange) !important;
}

/* ═══════════════════════════════════════════════════════
   CRM OPTIMISÉ (#14) + DEVIS MULTI-SECTIONS (#10) - BLOC 4
   ═══════════════════════════════════════════════════════ */

/* --- CRM Actions Bar --- */
.crm-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.crm-search { flex: 1; min-width: 220px; }
.search-input-advanced {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    transition: var(--transition-fast);
    box-sizing: border-box;
}
.search-input-advanced:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(255,107,0,0.12); }
.crm-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.crm-filter-select {
    padding: 9px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.crm-filter-select:focus { outline: none; border-color: var(--accent-orange); }
.btn-crm-reset {
    padding: 9px 12px;
    font-size: 16px;
    line-height: 1;
    border-radius: var(--border-radius-sm);
    min-width: 38px;
}
.crm-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ia-crm {
    background: linear-gradient(135deg, var(--accent-orange), #e55a00);
    box-shadow: 0 2px 8px rgba(255,107,0,0.3);
}
.btn-ia-crm:hover { opacity: 0.92; transform: translateY(-1px); }

/* --- CRM Suggestions IA --- */
.crm-suggestions-wrapper {
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 2px solid var(--accent-orange);
    border-radius: var(--border-radius-md);
    padding: 20px;
    margin-bottom: 20px;
    animation: fadeInDown 0.3s ease;
}
.crm-suggestions-wrapper.hidden { display: none; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.crm-suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,107,0,0.2);
}
.crm-suggestions-title { display: flex; align-items: center; gap: 10px; }
.crm-suggestions-title h4 { margin: 0; font-size: 16px; }
.crm-suggestions-content { display: flex; flex-direction: column; gap: 12px; }
.crm-suggestion-item {
    display: flex;
    gap: 14px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    padding: 14px 16px;
    border-left: 4px solid var(--accent-orange);
    transition: var(--transition-fast);
}
.crm-suggestion-item.urgente { border-left-color: #EF4444; }
.crm-suggestion-item:hover { transform: translateX(3px); }
.crm-suggestion-icon { font-size: 26px; flex-shrink: 0; }
.crm-suggestion-body { flex: 1; }
.crm-suggestion-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.crm-suggestion-header-row strong { font-size: 14px; }
.crm-suggestion-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.5; }
.crm-suggestion-impact { font-size: 12px; font-weight: 600; color: var(--accent-orange); margin-bottom: 10px; }
.crm-suggestion-actions { display: flex; gap: 8px; }

/* --- Devis Multi-sections --- */
.calculateur-sections { display: flex; flex-direction: column; gap: 14px; }
.sections-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
    text-align: center;
    padding: 12px;
    border: 1.5px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
}
.devis-section {
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--transition-fast);
}
.devis-section:hover { border-color: var(--accent-orange); }
.section-header-edit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}
.section-title-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 4px 6px;
    border-radius: 4px;
    transition: var(--transition-fast);
}
.section-title-input:focus { outline: none; background: var(--bg-primary); border: 1px solid var(--accent-orange); }
.section-articles { padding: 10px 14px 14px; }
.section-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-tertiary);
    font-size: 13px;
    font-style: italic;
}
.ligne-devis {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.ligne-devis:last-child { border-bottom: none; }
.ligne-designation { flex: 2; min-width: 140px; font-size: 14px; }
.ligne-total { font-weight: 600; color: var(--text-primary); min-width: 70px; text-align: right; font-size: 14px; }
.sections-mode-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #FFF5EB, #FFFFFF);
    border: 1.5px solid var(--accent-orange);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    color: var(--accent-orange);
    font-weight: 500;
    gap: 12px;
    flex-wrap: wrap;
}
.btn-secondary-small {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
    color: var(--text-primary);
}
.btn-secondary-small:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: var(--bg-primary); }

/* Dark mode CRM + sections */
body.dark-mode .crm-actions-bar      { background: #1F2937; border-color: #374151; }
body.dark-mode .search-input-advanced { background: #374151; color: #F9FAFB; border-color: #4B5563; }
body.dark-mode .crm-filter-select    { background: #374151; color: #F9FAFB; border-color: #4B5563; }
body.dark-mode .crm-suggestions-wrapper { background: linear-gradient(135deg, #2D1F12, #1F2937); }
body.dark-mode .crm-suggestion-item  { background: #374151; }
body.dark-mode .devis-section        { background: #1F2937; border-color: #374151; }
body.dark-mode .section-header-edit  { background: #111827; border-color: #374151; }
body.dark-mode .section-title-input  { color: #F9FAFB; }
body.dark-mode .section-title-input:focus { background: #374151; }
body.dark-mode .ligne-devis          { border-color: #374151; }
body.dark-mode .sections-mode-notice { background: linear-gradient(135deg, #2D1F12, #1F2937); }
body.dark-mode .btn-secondary-small  { background: #374151; border-color: #4B5563; color: #F9FAFB; }
body.dark-mode .btn-secondary-small:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
body.dark-mode .sections-hint        { border-color: #374151; }

/* Responsive CRM + sections */
@media (max-width: 768px) {
    .crm-actions-bar  { flex-direction: column; align-items: stretch; }
    .crm-search       { width: 100%; }
    .crm-filters      { width: 100%; }
    .crm-filter-select { flex: 1; min-width: 110px; }
    .crm-buttons      { width: 100%; }
    .crm-buttons button { flex: 1; }
    .ligne-devis      { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .ligne-designation { width: 100%; flex: unset; }
    .sections-mode-notice { flex-direction: column; align-items: flex-start; }
}

body.dark-mode .factures-history { border-color: #374151; }
body.dark-mode .facture-history-item { border-color: #374151; }
body.dark-mode .facture-history-item:hover { background-color: #111827; }

@media (max-width: 768px) {
    .dark-mode-toggle-container { margin-right: var(--spacing-sm); }
    .metiers-grid { grid-template-columns: repeat(3, 1fr); }
    .modal-onboarding { padding-top: 10px; }
    .modal-onboarding-content { max-height: 95vh; }
}

/* ═══════════════════════════════════════════════════════
   PWA - SESSION 19
   ═══════════════════════════════════════════════════════ */

/* Barre hors ligne */

.offline-bar {
    position: fixed;
    top: -56px;
    left: 0;
    right: 0;
    background-color: #F59E0B;
    color: #fff;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 10002;
    transition: top 0.35s ease;
}

.offline-bar.show { top: 0; }

/* Bannière installation */

.install-banner {
    position: fixed;
    bottom: -140px;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: #fff;
    padding: var(--spacing-md) var(--spacing-xl);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: bottom 0.35s ease;
}

.install-banner.show { bottom: 0; }

.install-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 900px;
    margin: 0 auto;
}

.install-icon { font-size: 40px; flex-shrink: 0; }

.install-text { flex: 1; }

.install-text strong {
    display: block;
    font-size: var(--font-size-lg);
    margin-bottom: 2px;
}

.install-text p {
    margin: 0;
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

.install-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.btn-dismiss {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-dismiss:hover { background: rgba(255,255,255,0.4); }

.btn-install {
    padding: var(--spacing-sm) var(--spacing-xl);
    background: #fff;
    color: var(--accent-orange);
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn-install:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Notification mise à jour */

.update-notification {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1D4ED8;
    color: #fff;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 10001;
    transition: top 0.35s ease;
    white-space: nowrap;
}

.update-notification.show { top: var(--spacing-lg); }

.update-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.btn-update {
    padding: var(--spacing-xs) var(--spacing-md);
    background: #fff;
    color: #1D4ED8;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.btn-update:hover { transform: scale(1.05); }

.btn-dismiss-update {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mode standalone */

/* body.standalone-mode #footer — footer visible en mode PWA */

@media (max-width: 768px) {
    .install-content { flex-wrap: wrap; }
    .install-icon { font-size: 28px; }
    .install-text { flex: 1 1 auto; }
    .install-actions { margin-left: auto; }
    .update-notification {
        width: 92%;
        white-space: normal;
        text-align: center;
    }
    .update-content { flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════
   LÉGAL & RGPD - SESSION 20
   ═══════════════════════════════════════════════════════ */

/* ─── Footer légal ─── */

.footer-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    height: 100%;
    padding: 0 var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.footer-legal-links {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal-links a {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover { color: var(--accent-orange); }

.footer-copyright {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ─── Bannière cookies ─── */

.cookie-banner {
    position: fixed;
    bottom: -200px;
    left: 0;
    right: 0;
    background-color: var(--bg-secondary);
    border-top: 3px solid var(--accent-orange);
    padding: var(--spacing-lg) var(--spacing-xl);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 10003;
    transition: bottom 0.4s ease;
}

.cookie-banner.show { bottom: 0; }

.cookie-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.cookie-text { flex: 1; }

.cookie-text strong {
    display: block;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.cookie-text p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.cookie-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn-cookie-settings {
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}

.btn-cookie-settings:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

.btn-cookie-refuse {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}

.btn-cookie-refuse:hover { background: #FEE2E2; border-color: var(--accent-danger); color: var(--accent-danger); }

.btn-cookie-accept {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #fff;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    font-family: inherit;
}

.btn-cookie-accept:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ─── Paramètres cookies (toggles) ─── */

.cookie-settings {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--spacing-lg);
}

.cookie-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--border-color);
}

.cookie-setting-item:last-child { border-bottom: none; }

.cookie-setting-info { flex: 1; }

.cookie-setting-info strong {
    display: block;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.cookie-setting-info p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Toggle switch */

.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: #CBD5E1;
    border-radius: 28px;
    transition: background-color 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #fff;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cookie-toggle input:checked + .toggle-slider { background-color: var(--accent-orange); }
.cookie-toggle input:checked + .toggle-slider::before { transform: translateX(24px); }

.cookie-toggle-disabled { opacity: 0.5; cursor: not-allowed; }
.cookie-toggle-disabled .toggle-slider { background-color: var(--accent-success); }
.cookie-toggle-disabled .toggle-slider::before { transform: translateX(24px); }

/* ─── Modal légal ─── */

.modal-legal {
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
}

.legal-content {
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.8;
}

.legal-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.legal-section:last-child { border-bottom: none; margin-bottom: 0; }

.legal-section h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.legal-section p { margin-bottom: var(--spacing-sm); }
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a { color: var(--accent-orange); text-decoration: underline; }
.legal-section a:hover { opacity: 0.8; }

.legal-list {
    margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-sm);
}

/* ─── Lien supprimer données (sidebar) ─── */

.sidebar-link-danger {
    color: var(--accent-danger) !important;
    opacity: 0.8;
}

.sidebar-link-danger:hover { opacity: 1; background-color: #FEE2E2 !important; }

/* ─── Dark mode overrides ─── */

body.dark-mode .cookie-banner {
    background-color: #1F2937;
    border-top-color: var(--accent-orange);
}

body.dark-mode .footer-legal { background-color: #111827; }

body.dark-mode .btn-cookie-settings { border-color: #374151; color: #9CA3AF; }
body.dark-mode .btn-cookie-refuse   { background-color: #374151; border-color: #4B5563; color: #F9FAFB; }

body.dark-mode .modal-legal,
body.dark-mode #cookie-settings-modal .modal-content { background-color: #1F2937; }

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .cookie-actions {
        width: 100%;
        justify-content: stretch;
    }

    .btn-cookie-settings,
    .btn-cookie-refuse,
    .btn-cookie-accept { flex: 1; text-align: center; }

    .footer-legal-links { gap: var(--spacing-md); }

    .modal-legal { max-height: 92vh; }

    .cookie-setting-item { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
    .cookie-toggle { align-self: flex-end; }
}

/* ─── Logo DevisVox ─── */

.logo-img {
    height: 38px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .logo-img { height: 30px; }
}

body.dark-mode .logo-img {
    filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════
   PAGE DEVIS — LISTE & DÉTAIL
   ═══════════════════════════════════════════════════════ */

/* ─── Stats ─── */

.devis-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.devis-stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.devis-stat-value {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
}

.devis-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.devis-stat-success .devis-stat-value { color: #10B981; }
.devis-stat-warning .devis-stat-value { color: #F59E0B; }
.devis-stat-info    .devis-stat-value { color: var(--accent-orange); }

.card-amount {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--accent-orange);
    margin-top: 4px;
}

.devis-stat-success .card-amount { color: #10B981; }
.devis-stat-warning .card-amount { color: #F59E0B; }

/* ─── Filtres ─── */

.devis-filters-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.devis-filters-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

/* ─── Grille de cards ─── */

.devis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.devis-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.devis-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-orange);
}

.devis-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.devis-card-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-del-devis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.btn-del-devis:hover {
    background: #FEE2E2;
    color: #DC2626;
}

.devis-numero {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-family: monospace;
}

/* ═══════════════════════════════════════════════════════
   PAIEMENT QR - BLOC 5 PARTIE 3
   ═══════════════════════════════════════════════════════ */

.payment-method-config {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.method-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.method-logo {
    height: 40px;
    display: flex;
    align-items: center;
}

.montant-a-payer {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    font-size: var(--font-size-lg);
    margin-bottom: 8px;
}

.paiement-methods {
    display: grid;
    gap: 12px;
    margin: 20px 0;
}

.payment-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
    width: 100%;
}

.payment-method-btn:hover {
    border-color: var(--accent-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.method-icon {
    font-size: 40px;
}

.method-name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.method-desc {
    font-size: 13px;
    color: var(--text-tertiary);
}

.qr-display {
    text-align: center;
    padding: 16px;
}

.qr-info {
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.qr-code-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.qr-instructions {
    color: var(--text-secondary);
    margin-top: 12px;
    font-size: 14px;
}

.paiement-status {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-weight: var(--font-weight-bold);
}

/* ═══════════════════════════════════════════════════════
   MODE SUISSE - BLOC 5 PARTIE 3
   ═══════════════════════════════════════════════════════ */

.suisse-config {
    padding: 8px 0;
}

.config-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.option-info strong {
    display: block;
    margin-bottom: 4px;
}

.option-info p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.tva-suisse-info {
    padding: 8px 0;
}

.tva-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}

.tva-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.tva-table td:nth-child(2) {
    text-align: center;
    color: var(--accent-orange);
}

/* ═══════════════════════════════════════════════════════
   CATALOGUE IA - BLOC 5 PARTIE 3
   ═══════════════════════════════════════════════════════ */

.ia-suggestions {
    background: linear-gradient(135deg, #E3F2FD, #FFFFFF);
    border: 2px solid #2196F3;
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
}

.ia-suggestions.hidden {
    display: none;
}

.suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.suggestions-header h4 {
    margin: 0;
}

.loading-ia {
    font-size: 13px;
    color: var(--text-secondary);
}

.prix-suggestion-card {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.prix-range {
    margin-bottom: 12px;
}

.prix-label {
    font-weight: var(--font-weight-bold);
    margin-bottom: 8px;
    font-size: 14px;
}

.prix-values {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
}

.prix-min  { color: #4CAF50; font-weight: var(--font-weight-bold); }
.prix-max  { color: #F44336; font-weight: var(--font-weight-bold); }
.prix-separator { color: var(--text-tertiary); }

.btn-use-price {
    width: 100%;
    background: var(--accent-orange);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-bottom: 8px;
}

.btn-use-price:hover { transform: translateY(-2px); }

.prix-source {
    font-size: 12px;
    color: var(--text-tertiary);
}

.liens-achat {
    margin-top: 20px;
}

.liens-achat.hidden { display: none; }

.fournisseurs-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.fournisseur-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.fournisseur-link:hover {
    background: var(--accent-orange);
    color: white;
    border-color: var(--accent-orange);
    transform: translateX(4px);
}

.fournisseur-logo { font-size: 20px; }
.fournisseur-nom  { flex: 1; font-weight: var(--font-weight-bold); font-size: 14px; }
.fournisseur-action { font-size: 16px; }

/* ═══════════════════════════════════════════════════════
   SETTINGS CARD (intégrations)
   ═══════════════════════════════════════════════════════ */

.settings-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.settings-card h4 {
    margin: 0 0 8px 0;
}

/* FIN STYLES BLOC 5 PARTIE 3 */

/* ═══════════════════════════════════════════════════════
   CORRECTIONS BUGS + AMÉLIORATIONS
   ═══════════════════════════════════════════════════════ */

/* Signature succès */
.success-icon-large {
    font-size: 64px;
    text-align: center;
    color: #4CAF50;
    margin: 16px 0;
}

.signature-success { text-align: center; padding: 16px 0; }
.success-message   { font-size: 18px; font-weight: var(--font-weight-bold); margin: 8px 0; }

/* Boutons devis liste */
.btn-warning-sm {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid #FFB74D;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-warning-sm:hover { background: #E65100; color: white; }

.btn-danger-sm {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.btn-danger-sm:hover { background: #EF4444; color: white; border-color: #EF4444; }

/* Onglets factures clients/fournisseurs */
.factures-type-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.facture-type-btn {
    padding: 8px 20px;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.facture-type-btn.active {
    border-color: var(--accent-orange);
    background: var(--accent-orange);
    color: white;
}

/* Travaux supplémentaires */
.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Météo agenda */
.event-meteo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    flex-wrap: wrap;
}

.meteo-alerte {
    color: #E53935;
    font-weight: bold;
}

/* Planification auto */
.creneaux-suggestions {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.creneau-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.creneau-card:hover {
    border-color: var(--accent-orange);
    background: rgba(255, 107, 0, 0.05);
    transform: translateX(4px);
}

.creneau-date { font-weight: bold; }
.creneau-duree { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* Stock */
.stock-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stock-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.stock-stat-warning { border-color: #FFB74D; background: #FFF3E0; }
.stock-stat-value { font-size: 28px; font-weight: var(--font-weight-bold); }
.stock-stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.stock-alerte-row { background: rgba(255,107,0,0.05); }
.text-danger { color: #E53935; font-weight: bold; }

/* Satisfaction */
.satisfaction-stats {
    display: flex;
    gap: 24px;
    background: var(--bg-secondary);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.sat-stat { font-size: 15px; }

.stars-rating {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.star {
    font-size: 40px;
    color: #DDD;
    cursor: pointer;
    transition: var(--transition-fast);
}

.star.active, .star:hover { color: #FFB300; }

.avis-recents { margin-top: 20px; }

.avis-item {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.avis-item p { font-style: italic; color: var(--text-secondary); font-size: 13px; margin-top: 4px; }

/* Traduction vocale */
.langues-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.langue-btn {
    padding: 10px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition-fast);
    text-align: center;
}

.langue-btn.active, .langue-btn:hover {
    border-color: var(--accent-orange);
    background: rgba(255,107,0,0.1);
}

.traduction-zone { margin-top: 16px; }
.traduction-langue-active {
    background: var(--accent-orange);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 16px;
    font-size: 14px;
}

.btn-micro-traduction {
    width: 100%;
    padding: 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-bottom: 16px;
}

.btn-micro-traduction.listening {
    background: #FFEBEE;
    border-color: #E53935;
    color: #E53935;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.traduction-textes {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 16px;
}

.traduction-fleche {
    font-size: 24px;
    display: flex;
    align-items: center;
    padding-top: 28px;
    color: var(--accent-orange);
}

.texte-box {
    min-height: 80px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
}

/* FIN STYLES CORRECTIONS + AMÉLIORATIONS */

.devis-statut {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    padding: 2px 8px;
    border-radius: 999px;
}

.statut-success { background: #D1FAE5; color: #065F46; }
.statut-warning { background: #FEF3C7; color: #92400E; }
.statut-error   { background: #FEE2E2; color: #991B1B; }

.devis-card-body { flex: 1; }

.devis-client {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.devis-travaux {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.devis-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.devis-montant {
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
}

.devis-date { color: var(--text-tertiary); }

.devis-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.btn-action-devis {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.btn-action-devis:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

.btn-success-sm {
    background: #D1FAE5;
    border-color: #10B981;
    color: #065F46;
}

.btn-success-sm:hover { background: #A7F3D0; border-color: #059669; color: #065F46; }

.btn-success {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: #10B981;
    border: none;
    border-radius: var(--border-radius-sm);
    color: #fff;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.btn-success:hover { background: #059669; }

.devis-facture-badge {
    font-size: var(--font-size-xs);
    color: #10B981;
    font-weight: var(--font-weight-bold);
    font-family: monospace;
}

/* ─── Empty state ─── */

.devis-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

/* ─── Modal détail devis ─── */

.modal-large {
    max-width: 560px;
    width: 95%;
}

.devis-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.detail-row {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.detail-row strong { color: var(--text-primary); }

.devis-historique { margin-top: var(--spacing-md); }

.devis-historique h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.historique-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-xs);
}

.historique-item:last-child { border-bottom: none; }

.historique-date {
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 80px;
}

.historique-details { color: var(--text-secondary); }

.modal-footer {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

/* ─── Dark mode ─── */

body.dark-mode .devis-card       { background: #1F2937; border-color: #374151; }
body.dark-mode .devis-card:hover { border-color: var(--accent-orange); }
body.dark-mode .devis-stat-card  { background: #1F2937; border-color: #374151; }
body.dark-mode .statut-success   { background: #064E3B; color: #6EE7B7; }
body.dark-mode .statut-warning   { background: #451A03; color: #FCD34D; }
body.dark-mode .statut-error     { background: #450A0A; color: #FCA5A5; }
body.dark-mode .btn-success-sm   { background: #064E3B; border-color: #10B981; color: #6EE7B7; }
body.dark-mode .btn-action-devis { background: #374151; border-color: #4B5563; color: #F9FAFB; }
body.dark-mode .devis-card-actions { border-color: #374151; }
body.dark-mode .historique-item  { border-color: #374151; }
body.dark-mode .devis-detail-content { border-color: #374151; }

/* ─── Responsive ─── */

@media (max-width: 768px) {
    .devis-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .devis-grid       { grid-template-columns: 1fr; }
    .modal-large      { max-width: 100%; }
    .modal-footer     { justify-content: stretch; }
    .modal-footer button { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   ASSISTANT IA GEMINI - BLOC 5 PARTIE 2
   ═══════════════════════════════════════════════════════ */

.modal-assistant-content {
    max-width: 700px;
    height: 80vh;
    max-height: 800px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-assistant .modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color var(--transition-fast);
}

.btn-icon:hover { background: var(--surface-hover); }

.assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background: var(--surface-bg);
}

.message {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    align-items: flex-start;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.message-user .message-avatar { background: #2196F3; }

.message-content {
    flex: 1;
    background: var(--surface-card);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.message-content strong {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-orange);
    font-size: var(--font-size-sm);
}

.message-user .message-content strong { color: #2196F3; }

.message-content p { margin: 0; line-height: 1.6; font-size: var(--font-size-sm); }
.message-content ul { margin: var(--spacing-xs) 0; padding-left: var(--spacing-lg); font-size: var(--font-size-sm); }

.message-time {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 6px;
}

.message-image {
    max-width: 100%;
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-xs) 0;
}

.typing-indicator { display: flex; gap: 4px; padding: 4px 0; }

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange);
    animation: typing 1.4s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-8px); }
}

.assistant-input-zone {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    background: var(--surface-card);
    flex-shrink: 0;
    align-items: center;
}

.assistant-input {
    flex: 1;
    padding: 10px var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: 24px;
    font-size: var(--font-size-sm);
    background: var(--surface-bg);
    color: var(--text-primary);
    font-family: inherit;
}

.assistant-input:focus { outline: none; border-color: var(--accent-orange); }

.btn-attach,
.btn-voice,
.btn-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-bg);
    cursor: pointer;
    font-size: 16px;
    transition: transform var(--transition-fast), background-color var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-send {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
}

.btn-attach:hover, .btn-voice:hover { background: var(--surface-hover); }
.btn-send:hover  { transform: scale(1.1); }

.btn-voice.listening {
    background: #F44336;
    border-color: #F44336;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Config Gemini */
.config-content { padding: var(--spacing-md) 0; }

.info-box {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
}

.info-box ol { margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg); }
.info-note { margin: var(--spacing-sm) 0 0; font-weight: var(--font-weight-bold); color: #1D4ED8; }

.test-result {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.test-result.hidden { display: none; }
.test-success { background: #D1FAE5; color: #065F46; }
.test-error   { background: #FEE2E2; color: #991B1B; }

/* Dark mode assistant */
body.dark-mode .message-content    { background: #1F2937; }
body.dark-mode .assistant-messages { background: #111827; }
body.dark-mode .assistant-input    { background: #1F2937; border-color: #374151; color: #F9FAFB; }
body.dark-mode .info-box           { background: #1E3A5F; border-color: #1D4ED8; }

@media (max-width: 768px) {
    .modal-assistant-content { height: 95vh; max-height: unset; }
}

/* ═══════════════════════════════════════════════════════
   TIMBRAGE TEMPS - BLOC 5 PARTIE 2
   ═══════════════════════════════════════════════════════ */

.chrono-actif {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    color: #fff;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.chrono-actif.hidden { display: none; }

.chrono-info { margin-bottom: var(--spacing-sm); }

.chrono-type { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }

.chrono-nom { font-size: var(--font-size-sm); opacity: 0.9; margin-top: 4px; }

.chrono-time {
    font-size: 48px;
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-md) 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.timbrage-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.btn-action-large {
    background: var(--surface-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl) var(--spacing-md);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: inherit;
}

.btn-action-large:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.btn-chantier:hover     { border-color: var(--accent-orange); }
.btn-deplacement:hover  { border-color: #2196F3; }
.btn-pause:hover        { border-color: #4CAF50; }

.action-icon  { font-size: 40px; }
.action-label { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); color: var(--text-primary); }

.timbrage-today,
.timbrage-history { margin-top: var(--spacing-xl); }

.timbrage-today h4,
.timbrage-history h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.today-total {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    text-align: center;
    margin-top: var(--spacing-md);
    font-size: var(--font-size-md);
}

.history-filters {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.timbrage-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xs);
}

.timbrage-icon { font-size: 20px; flex-shrink: 0; }
.timbrage-info { flex: 1; }
.timbrage-info strong { display: block; font-size: var(--font-size-sm); color: var(--text-primary); }
.timbrage-info span  { font-size: var(--font-size-xs); color: var(--text-tertiary); }
.timbrage-duree { font-weight: var(--font-weight-bold); color: var(--accent-orange); font-size: var(--font-size-sm); }

.day-group { margin-bottom: var(--spacing-lg); }

.day-header {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: var(--spacing-xs) 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
    text-transform: capitalize;
}

.empty-text { text-align: center; color: var(--text-tertiary); padding: var(--spacing-lg) 0; font-size: var(--font-size-sm); }

/* Dark mode timbrage */
body.dark-mode .btn-action-large { background: #1F2937; border-color: #374151; }
body.dark-mode .timbrage-item   { background: #1F2937; border-color: #374151; }
body.dark-mode .today-total     { background: #1F2937; border-color: #374151; }

@media (max-width: 600px) {
    .timbrage-actions { grid-template-columns: 1fr; }
    .chrono-time { font-size: 36px; }
}

/* ═══════════════════════════════════════════════════════
   AGENDA / PLANNING - BLOC 5 PARTIE 2
   ═══════════════════════════════════════════════════════ */

.modal-agenda-content {
    max-width: 1100px;
    width: 96vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.modal-agenda .modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.month-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    min-width: 160px;
    text-align: center;
    text-transform: capitalize;
}

.agenda-view {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: min-content;
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
}

.calendar-day-header {
    background: var(--surface-bg);
    padding: var(--spacing-sm);
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1;
}

.calendar-day {
    min-height: 80px;
    padding: var(--spacing-xs);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

.calendar-day:hover       { background: var(--surface-hover); }
.calendar-day.empty       { background: var(--surface-bg); cursor: default; }
.calendar-day.empty:hover { background: var(--surface-bg); }

.calendar-day.today {
    background: #FFF7ED;
    border: 2px solid var(--accent-orange);
}

.day-number {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    margin-bottom: 4px;
    color: var(--text-primary);
}

.calendar-day.today .day-number { color: var(--accent-orange); }

.day-events { display: flex; gap: 3px; flex-wrap: wrap; }

.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.event-more { font-size: 10px; color: var(--text-tertiary); }

.events-sidebar {
    padding: var(--spacing-md);
    overflow-y: auto;
    background: var(--surface-bg);
}

.events-sidebar h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-item {
    background: var(--surface-card);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
}

.event-date {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 55px;
    text-transform: capitalize;
}

.event-info { flex: 1; }
.event-info strong { font-size: var(--font-size-xs); color: var(--text-primary); display: block; }

.event-client,
.event-time { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* Modal day / event card */
.day-events-list { padding: var(--spacing-sm) 0; }

.event-card {
    background: var(--surface-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.event-card h4 { margin: 0 0 var(--spacing-xs); color: var(--text-primary); }
.event-card p  { font-size: var(--font-size-sm); color: var(--text-secondary); margin: 2px 0; }
.event-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }

/* Color picker agenda */
.color-picker-agenda {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.color-picker-agenda label {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.color-picker-agenda span {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-sm);
    border: 3px solid transparent;
    transition: border-color var(--transition-fast);
}

.color-picker-agenda input { display: none; }

.color-picker-agenda input:checked + span { border-color: var(--text-primary); }

/* Dark mode agenda */
body.dark-mode .calendar-day      { background: #1F2937; border-color: #374151; }
body.dark-mode .calendar-day:hover { background: #374151; }
body.dark-mode .calendar-day.empty { background: #111827; }
body.dark-mode .calendar-day.today { background: #2D1B09; border-color: var(--accent-orange); }
body.dark-mode .calendar-day-header { background: #111827; border-color: #374151; }
body.dark-mode .events-sidebar    { background: #111827; }
body.dark-mode .event-item        { background: #1F2937; }
body.dark-mode .event-card        { background: #1F2937; }

@media (max-width: 900px) {
    .agenda-view                { grid-template-columns: 1fr; }
    .events-sidebar             { max-height: 250px; border-right: none; border-top: 1px solid var(--border-color); }
    .calendar-day               { min-height: 60px; }
}

@media (max-width: 600px) {
    .modal-agenda-content       { height: 100vh; max-height: 100vh; border-radius: 0; }
    .calendar-day-header        { font-size: 10px; padding: 4px 2px; }
    .calendar-day               { min-height: 48px; padding: 2px; }
    .day-number                 { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════
   ANIMATION CHECKMARK SIGNATURE
   ═══════════════════════════════════════════════════════ */

.success-icon-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-success);
    color: #fff;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: pop-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pop-in {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.18); }
    100% { transform: scale(1); opacity: 1; }
}

.signature-success {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.success-message {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   RAPPORTS D'INTERVENTION
   ═══════════════════════════════════════════════════════ */

.modal-rapport-content {
    max-width: 900px;
    max-height: 92vh;
    overflow-y: auto;
}

.modal-rapport-view {
    max-width: 780px;
}

.rapport-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

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

.rapport-form-col { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.rapport-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-xs);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent-orange);
}

.materiau-rapport-ligne {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.materiaux-rapport-list { display: flex; flex-direction: column; }

.rapport-view-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 700px) {
    .rapport-view-grid { grid-template-columns: 1fr; }
}

.rapport-info-bloc,
.rapport-detail-bloc { display: flex; flex-direction: column; gap: 0; }

.rapport-info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    gap: var(--spacing-sm);
}

.rapport-info-row span { color: var(--text-secondary); flex-shrink: 0; }
.rapport-info-row strong { text-align: right; }

.rapport-text {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    margin: 0;
}

.rapport-observations { border-color: var(--accent-warning); background: #FFFBEB; }

.rapport-mat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-sm);
}

.rapport-mat-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════
   MODULE RH
   ═══════════════════════════════════════════════════════ */

.rh-tabs {
    display: flex;
    gap: var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.rh-tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.rh-tab-btn:hover { color: var(--accent-orange); }

.rh-tab-btn.active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

.rh-tab-content { padding: 0; }

.employes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.employe-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.employe-card:hover { box-shadow: var(--shadow-md); }

.employe-inactif { opacity: 0.55; }

.employe-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.employe-info { flex: 1; min-width: 0; }

.employe-nom {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: 2px;
}

.employe-role {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 6px;
}

.employe-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.badge-contrat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.employe-stats {
    display: flex;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.employe-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.employe-stat span {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--accent-orange);
}

.employe-stat small { font-size: 10px; color: var(--text-tertiary); }

.employe-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.fiche-employe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 600px) {
    .employes-grid       { grid-template-columns: 1fr; }
    .fiche-employe-grid  { grid-template-columns: 1fr; }
    .employe-card        { flex-wrap: wrap; }
}

.fiche-section { display: flex; flex-direction: column; gap: 0; }

.rh-presences-filters {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

/* Dark mode RH */
body.dark-mode .employe-card { background: #1F2937; border-color: #374151; }
body.dark-mode .rapport-text { background: #1F2937; border-color: #374151; }
body.dark-mode .rapport-info-row { border-color: #374151; }
body.dark-mode .rapport-mat-list li { border-color: #374151; }

/* ═══════════════════════════════════════════════════════
   DEVIS VOCAL — APERÇU ÉDITABLE INLINE (dv-*)
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   COMPOSANT VÉRIFICATION DEVIS VOCAL
   ══════════════════════════════════════════════════════════ */

.dv-editable {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Zone scrollable */
.dv-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ── Grille 2 colonnes — section client ── */
.dv-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm) var(--spacing-md);
}

/* ── Barre de totaux fixe ── */
.dv-footer-bar {
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-top: 2px solid var(--accent-orange);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    z-index: 10;
}

.dv-footer-top {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 14px var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.dv-marge-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.dv-marge-control input {
    width: 56px;
    min-height: 32px;
}

/* Chips scrollables (horizontal sur mobile) */
.dv-chips-scroll {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dv-chips-scroll::-webkit-scrollbar { display: none; }

.dv-total-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 88px;
    padding: 2px 4px;
}
.dv-chip-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 2px;
}
.dv-total-chip strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.dv-chip-ht  { border-left: 2px solid var(--border-color); padding-left: var(--spacing-md); }
.dv-chip-ht strong  { font-size: 16px; color: var(--accent-orange); }
.dv-chip-ttc { border-left: 2px solid var(--accent-orange); padding-left: var(--spacing-md); }
.dv-chip-ttc strong { font-size: 19px; font-weight: 800; color: var(--accent-orange); }

/* Ligne actions */
.dv-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: 10px var(--spacing-lg);
}

.dv-btn-enregistrer {
    padding: 12px 28px !important;
    font-size: var(--font-size-base) !important;
    font-weight: 700 !important;
    min-height: 44px;
}

/* ── Bouton Ajouter ligne ── */
.dv-btn-ajouter-ligne {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-sm);
    padding: 8px 16px;
    min-height: 40px;
    border: 1.5px dashed var(--accent-orange);
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--accent-orange);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.dv-btn-ajouter-ligne:hover { background: rgba(255,107,0,0.07); }

/* ── Validation champs client ── */
.dv-input.dv-valid   { border-color: #4CAF50; }
.dv-input.dv-invalid { border-color: #F44336; background: rgba(244,67,54,0.04); }

/* ── Table : font, zebra, hover, type column ── */
.dv-table { font-size: 14px; }
.dv-designation { font-weight: var(--font-weight-bold); }
.dv-th-type { width: 110px; }

.dv-ligne:nth-child(even) { background: var(--bg-primary); }
.dv-ligne:hover            { background: rgba(255,107,0,0.06) !important; }
.dv-ligne-total            { font-weight: 700; }

/* ── Selects compacts (Type + TVA) ── */
.dv-select-sm {
    padding: 4px 6px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    min-height: 30px;
}
.dv-select-sm:focus { outline: none; border-color: var(--accent-orange); }

/* ── Barre d'actions sous le tableau ── */
.dv-ligne-actions-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ── Bouton catalogue ── */
.dv-btn-catalogue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    min-height: 40px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.dv-btn-catalogue:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255,107,0,0.05); }

/* ── Cellule actions + boutons ▲▼🗑️ ── */
.dv-td-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* ── Toggle Forfait / Temps réel ── */
.dv-toggle-group {
    display: flex;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}
.dv-toggle-btn {
    flex: 1;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.dv-toggle-btn + .dv-toggle-btn { border-left: 1px solid var(--border-color); }
.dv-toggle-btn.dv-toggle-active  { background: var(--accent-orange); color: #fff; font-weight: 600; }
.dv-toggle-btn:not(.dv-toggle-active):hover { background: rgba(255,107,0,0.08); color: var(--accent-orange); }

/* ── Description détaillée sous la désignation ── */
.dv-description {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 3px 6px;
    font-size: 11px;
    color: var(--text-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    background: transparent;
    resize: vertical;
    min-height: 22px;
    line-height: 1.4;
    box-sizing: border-box;
}
.dv-description:focus {
    outline: none;
    border-color: var(--accent-orange);
    border-style: solid;
    color: var(--text-primary);
}
.dv-description::placeholder { font-style: italic; opacity: 0.6; }

/* ── Drag-and-drop lignes ── */
.dv-ligne[draggable="true"] { cursor: grab; user-select: none; }
.dv-ligne[draggable="true"] input,
.dv-ligne[draggable="true"] select { cursor: auto; user-select: text; }
.dv-ligne[draggable="true"] button { cursor: pointer; }

.dv-ligne.dv-dragging {
    opacity: 0.4;
    cursor: grabbing;
    background: var(--bg-secondary, #f5f5f5) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    outline: 2px dashed var(--accent-orange);
    outline-offset: -2px;
}

.dv-ligne.dv-drop-before { box-shadow: inset 0  3px 0 var(--accent-orange); }
.dv-ligne.dv-drop-after  { box-shadow: inset 0 -3px 0 var(--accent-orange); }

/* ── Drawer catalogue ── */
.dv-catalogue-drawer {
    position: fixed;
    inset: 0;
    z-index: 10002;
    pointer-events: none;
}
.dv-catalogue-drawer.open { pointer-events: all; }

.dv-catalogue-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    transition: opacity 0.25s;
}
.dv-catalogue-drawer.open .dv-catalogue-overlay { opacity: 1; }

.dv-catalogue-panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 400px;
    max-width: 92vw;
    background: var(--bg-secondary);
    box-shadow: -6px 0 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
}
.dv-catalogue-drawer.open .dv-catalogue-panel { transform: translateX(0); }

.dv-catalogue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color);
}
.dv-catalogue-header h3 { margin: 0; font-size: var(--font-size-lg); }

.dv-catalogue-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dv-catalogue-close:hover { background: #F44336; color: #fff; border-color: #F44336; }

.dv-catalogue-back {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.dv-catalogue-back:hover { background: var(--bg-secondary); color: var(--text-primary); }

.dv-catalogue-search { padding: 12px 16px; }
.dv-catalogue-search .dv-input { width: 100%; box-sizing: border-box; }

.dv-catalogue-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.dv-catalogue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--border-color);
}
.dv-catalogue-item:hover { background: rgba(255,107,0,0.07); }

.dv-catalogue-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dv-catalogue-item-nom  { font-weight: 600; font-size: var(--font-size-sm); }
.dv-catalogue-item-detail { font-size: 11px; color: var(--text-secondary); }
.dv-catalogue-item-add { font-size: 18px; flex-shrink: 0; margin-left: 8px; }

.dv-catalogue-empty { padding: 24px 16px; text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); }

.dv-catalogue-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}
.dv-catalogue-gerer { width: 100%; justify-content: center; }

/* ── Gestion catalogue (modal) ── */
.dv-gestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}

/* ══ MOBILE ══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dv-body { padding: var(--spacing-sm); }

    /* Grille 1 colonne sur mobile */
    .dv-grid-2 { grid-template-columns: 1fr; }

    /* Hauteur minimale 44px sur tous les champs */
    .dv-input, .dv-select, .dv-input-sm, .dv-select-sm, .dv-input-param {
        min-height: 44px;
    }

    /* Boutons pleine largeur */
    .dv-footer-actions {
        flex-direction: column;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .dv-footer-actions button { width: 100%; min-height: 44px; justify-content: center; }

    /* Table → cartes empilées */
    .dv-table thead { display: none; }
    .dv-table,
    .dv-table tbody,
    .dv-ligne,
    .dv-ligne td { display: block; width: 100%; }

    .dv-ligne {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-sm);
        padding: 10px;
        margin-bottom: 8px;
        background: var(--bg-secondary) !important;
    }
    .dv-ligne td {
        display: flex;
        align-items: center;
        padding: 4px 0;
        gap: 8px;
    }
    .dv-ligne td::before {
        content: attr(data-label);
        font-size: 11px;
        color: var(--text-secondary);
        font-weight: 600;
        min-width: 72px;
        flex-shrink: 0;
    }
    .dv-ligne td:last-child { justify-content: flex-end; }
    .dv-ligne td:last-child::before { display: none; }

    .dv-table-wrapper { border: none; }

    .dv-footer-top {
        flex-wrap: wrap;
        padding: 10px var(--spacing-md);
        gap: var(--spacing-md);
    }
    .dv-chips-scroll { gap: 14px; padding-bottom: 4px; }

    .dv-btn-ajouter-ligne,
    .dv-btn-catalogue { width: 100%; justify-content: center; }

    /* Bottom sheet catalogue */
    .dv-catalogue-panel {
        right: 0;
        left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 90%;
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
    }
    .dv-catalogue-drawer.open .dv-catalogue-panel { transform: translateY(0); }

    .dv-td-actions { gap: 6px; }
}

.dv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--accent-orange);
}

.dv-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    color: var(--accent-orange);
}

.dv-btn-close {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.dv-btn-close:hover {
    background: #FEE2E2;
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

.dv-section {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.dv-section:last-of-type { border-bottom: none; }

.dv-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-sm);
}

.dv-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

@media (max-width: 500px) {
    .dv-row-2 { grid-template-columns: 1fr; }
}

.dv-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dv-field-full {
    grid-column: 1 / -1;
}

.form-label-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.form-label-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-orange);
    cursor: pointer;
}

.dv-field label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dv-input,
.dv-select {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background: transparent;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.dv-input:focus,
.dv-select:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.dv-input-sm {
    width: 100%;
    padding: 5px 7px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background: transparent;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
    text-align: right;
}

.dv-input-sm:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.1);
}

/* Table des lignes */

.dv-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

.dv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 460px;
}

.dv-table thead tr {
    background: var(--bg-primary);
}

.dv-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.dv-th-num { width: 80px; text-align: right; }
.dv-th-del { width: 36px; }
.dv-table td:first-child,
.dv-table th:first-child { min-width: 260px; }

.dv-ligne {
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-fast);
}

.dv-ligne:last-child { border-bottom: none; }

.dv-ligne:hover { background: var(--bg-primary); }

.dv-ligne td {
    padding: 6px 8px;
    vertical-align: middle;
}

.dv-cell-total {
    text-align: right;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    width: 100px;
    min-width: 100px;
}

.dv-ligne-total {
    color: var(--accent-orange);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

/* Ligne vide de la MO (séparateur visuel) */
.dv-ligne-mo-sep td {
    background: var(--bg-primary);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-top: 2px solid var(--border-color);
}

/* Paramètres marge / TVA */

.dv-params-row {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: var(--spacing-sm);
}

.dv-param-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.dv-param-item label {
    color: var(--text-secondary);
    white-space: nowrap;
    font-size: var(--font-size-sm);
}

.dv-input-param {
    width: 70px;
    padding: 5px 7px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-main);
    background: transparent;
    color: var(--text-primary);
    text-align: right;
    transition: border-color var(--transition-fast);
}

.dv-input-param:focus {
    outline: none;
    border-color: var(--accent-orange);
}

/* Totaux */

.dv-totaux {
    margin-left: auto;
    min-width: 280px;
    max-width: 340px;
    margin-top: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.dv-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--border-color);
    gap: var(--spacing-sm);
}

.dv-total-row:last-child { border-bottom: none; }

.dv-total-row span:first-child { color: var(--text-secondary); }
.dv-total-row span:last-child  { font-weight: var(--font-weight-bold); color: var(--text-primary); }

.dv-total-ht {
    border-top: 2px solid var(--border-color);
    background: var(--bg-primary);
    font-weight: var(--font-weight-bold);
}

.dv-total-ht span { color: var(--text-primary) !important; }

.dv-total-ttc {
    background: var(--accent-orange);
    border-top: none;
}

.dv-total-ttc span:first-child {
    color: rgba(255,255,255,0.85) !important;
    font-weight: var(--font-weight-bold);
}

.dv-total-ttc span:last-child {
    color: #fff !important;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black) !important;
}

/* Boutons action */

.dv-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    flex-wrap: wrap;
}

.dv-btn-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.5;
    padding: 4px;
    border-radius: 4px;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
    line-height: 1;
    display: block;
    width: 28px;
    text-align: center;
}

.dv-btn-del:hover {
    opacity: 1;
    background: #FEE2E2;
}

.dv-travaux-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.dv-travaux-row .dv-input {
    flex: 1;
}

.dv-btn-add {
    background: var(--bg-primary);
    border: 1.5px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-main);
    white-space: nowrap;
    flex-shrink: 0;
}

.dv-btn-add:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: #FFF5EB;
}

/* Dark mode */
body.dark-mode .dv-input,
body.dark-mode .dv-input-sm,
body.dark-mode .dv-select,
body.dark-mode .dv-input-param {
    background: #374151;
    border-color: #4B5563;
    color: #F9FAFB;
}

body.dark-mode .dv-input:focus,
body.dark-mode .dv-input-sm:focus,
body.dark-mode .dv-select:focus,
body.dark-mode .dv-input-param:focus {
    border-color: var(--accent-orange);
    background: #374151;
}

body.dark-mode .dv-table-wrapper { border-color: #374151; }
body.dark-mode .dv-table thead tr { background: #111827; }
body.dark-mode .dv-table thead th { border-color: #374151; }
body.dark-mode .dv-ligne:hover { background: #374151; }
body.dark-mode .dv-ligne { border-color: #374151; }
body.dark-mode .dv-totaux { border-color: #374151; }
body.dark-mode .dv-total-row { border-color: #374151; }
body.dark-mode .dv-total-ht { background: #111827; border-color: #374151; }
body.dark-mode .dv-btn-add { background: #374151; border-color: #4B5563; color: #9CA3AF; }
body.dark-mode .dv-btn-add:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: #2D1B09; }
body.dark-mode .dv-section { border-color: #374151; }
body.dark-mode .dv-header { border-color: var(--accent-orange); }
body.dark-mode .dv-ligne-mo-sep td { background: #111827; border-color: #374151; }

/* ─── Section Main-d'œuvre aperçu vocal ─── */

.dv-mo-form,
.dv-mo-inline-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dv-mo-preview-val {
    font-size: .95rem;
    font-weight: 700;
    color: var(--accent-orange);
    line-height: 44px;
    white-space: nowrap;
}

.dv-mo-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.dv-mo-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dv-mo-form-field label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.dv-mo-preview {
    font-size: .95rem;
    color: var(--accent-orange);
    padding-bottom: 4px;
}

.dv-mo-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

#dv-mo-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}

.dv-mo-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-orange);
    border-radius: var(--border-radius-sm);
    padding: 8px 10px;
}

.dv-mo-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dv-mo-card-designation {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary);
}

.dv-mo-card-detail {
    font-size: .8rem;
    color: var(--text-secondary);
}

.dv-mo-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #FFF5EB;
    border-radius: var(--border-radius-sm);
    font-size: .9rem;
    margin-top: 4px;
    border: 1px solid #FFDCC0;
}

.dv-mo-total-bar strong {
    color: var(--accent-orange);
    font-size: 1rem;
}

body.dark-mode .dv-mo-form      { background: #1F2937; border-color: #374151; }
body.dark-mode .dv-mo-card      { background: #1F2937; border-color: #374151; }
body.dark-mode .dv-mo-total-bar { background: #2D1B09; border-color: #7C3A1A; }

/* ─── Adresse client : code postal + ville côte à côte ─── */

.form-row-cp-ville {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-cp {
    flex: 0 0 90px;
    width: 90px;
}

.input-ville {
    flex: 1;
}

/* ─── Filtres période devis ─── */

.filtres-periode {
    display: flex;
    gap: 4px;
    align-items: center;
}

.btn-periode-devis {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-main);
    white-space: nowrap;
}

.btn-periode-devis:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.btn-periode-devis.active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #FFFFFF;
    font-weight: 600;
}

body.dark-mode .btn-periode-devis        { background: #1F2937; border-color: #374151; color: #9CA3AF; }
body.dark-mode .btn-periode-devis:hover  { border-color: var(--accent-orange); color: var(--accent-orange); }
body.dark-mode .btn-periode-devis.active { background: var(--accent-orange); color: #FFF; border-color: var(--accent-orange); }

/* ─── Message vide sections Articles / MO (partagé tous modes) ─── */

.section-empty-msg {
    text-align: center;
    padding: 14px var(--spacing-md);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-style: italic;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    margin: 2px 0 4px;
}

/* ─── Main-d'œuvre multi-lignes (partagé toutes sections) ─── */

.mo-lines-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
    min-height: 0;
}

.mo-line {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 6px 8px;
    flex-wrap: nowrap;
}

.mo-line .mo-designation { flex: 2; min-width: 0; }
.mo-line .mo-heures { flex: 0 0 62px; min-width: 0; width: 62px; }
#manual-mo-list .mo-heures { flex: 0 0 78px; width: 78px; max-width: none; }
.mo-line .mo-taux   { flex: 0 0 80px; min-width: 0; width: 80px; }
.mo-sep                  { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.mo-total-span           { flex: 0 0 92px; text-align: right; font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; }

.devis-add-btn-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* ─── Barre d'action fixe universelle (tous types de devis) ─── */
.dab {
    position: fixed;
    bottom: var(--bottom-nav-height);
    left: var(--sidebar-width);
    right: 0;
    min-height: 64px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-md);
    z-index: 200;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}

.dab-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dab-btn,
.vocal-actions button {
    height: 44px;
    min-height: 44px;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    padding: 0 var(--spacing-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.dab-outline,
.vocal-actions .dab-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.dab-outline:hover,
.vocal-actions .dab-outline:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.dab-primary,
.vocal-actions .dab-primary {
    background: linear-gradient(135deg, var(--accent-orange), #FF8533);
    border: none;
    color: white;
    box-shadow: var(--shadow-sm);
    padding: 0 var(--spacing-xl);
}

.dab-primary:hover,
.vocal-actions .dab-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Espace réservé en bas des pages avec .dab */
.dab-page-spacer {
    height: 80px;
}

.mo-total-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 8px 4px 2px;
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.mo-total-bar strong { color: var(--accent-orange); font-size: 15px; }

body.dark-mode .mo-line     { background: #1F2937; border-color: #374151; }
body.dark-mode .mo-total-bar { border-color: #374151; }
body.dark-mode .art-type-select { background: #374151; border-color: #4B5563; color: #D1D5DB; }

/* ─── Saisie manuelle : types de travaux détaillés ─── */

.btn-add-travaux-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
    padding: 6px 14px;
    background: var(--bg-primary);
    border: 1.5px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: var(--font-main);
}

.btn-add-travaux-detail:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: #FFF5EB;
}

.travaux-detail-form {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.travaux-types-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.travaux-type-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-orange);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
}

.travaux-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.travaux-card-type {
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.travaux-card-desc {
    margin: 6px 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

.btn-del-travaux {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background 0.15s;
}

.btn-del-travaux:hover {
    background: #FFE5E5;
}

body.dark-mode .btn-add-travaux-detail { background: #374151; border-color: #4B5563; color: #9CA3AF; }
body.dark-mode .btn-add-travaux-detail:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: #2D1B09; }
body.dark-mode .travaux-detail-form { background: #1F2937; border-color: #374151; }
body.dark-mode .travaux-type-card { background: #1F2937; border-color: #374151; }
body.dark-mode .btn-del-travaux:hover { background: #3B1111; }

/* ─── Widget multi-types de travaux ─── */
.travaux-widget { position: relative; }
.travaux-tags-container {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    min-height: 38px; padding: 6px 8px;
    border: 1px solid var(--border-color); border-radius: 6px;
    background: var(--bg-primary);
}
.tr-placeholder { color: var(--text-tertiary); font-size: 0.875rem; }
.tr-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #FFF3E0; border: 1px solid var(--accent-orange);
    color: var(--accent-orange); border-radius: 20px;
    padding: 3px 10px 3px 12px; font-size: 0.82rem; font-weight: 500;
}
.tr-tag-del {
    background: none; border: none; cursor: pointer;
    color: var(--accent-orange); font-size: 0.78rem;
    padding: 0 0 0 2px; line-height: 1; opacity: 0.7;
}
.tr-tag-del:hover { opacity: 1; }
.btn-add-travaux {
    margin-top: 6px; display: inline-block;
    background: none; border: 1px dashed var(--accent-orange);
    color: var(--accent-orange); border-radius: 6px;
    padding: 5px 12px; cursor: pointer; font-size: 0.85rem;
    transition: background 0.15s;
}
.btn-add-travaux:hover { background: #FFF3E0; }
.travaux-popup {
    display: none; position: absolute; z-index: 200;
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 12px; min-width: 300px; top: calc(100% + 2px); left: 0;
    max-height: 320px; overflow-y: auto;
}
.travaux-popup.visible { display: block; }
.travaux-popup-types { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tr-popup-item {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 20px; padding: 5px 12px; cursor: pointer;
    font-size: 0.82rem; transition: all 0.15s; color: var(--text-primary);
}
.tr-popup-item:hover { background: #FFF3E0; border-color: var(--accent-orange); color: var(--accent-orange); }
.travaux-popup-custom { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.travaux-popup-custom .dv-input,
.travaux-popup-custom .form-input { flex: 1; min-width: 0; }
.btn-close-popup {
    display: block; width: 100%;
    background: none; border: 1px solid var(--border-color);
    border-radius: 6px; padding: 6px; cursor: pointer;
    color: var(--text-secondary); font-size: 0.82rem;
}
.btn-close-popup:hover { background: var(--bg-secondary); }
body.dark-mode .tr-tag { background: #2D1B09; border-color: var(--accent-orange); }
body.dark-mode .travaux-popup { background: #1F2937; border-color: #374151; }
body.dark-mode .tr-popup-item { background: #374151; border-color: #4B5563; color: #E5E7EB; }
body.dark-mode .tr-popup-item:hover { background: #2D1B09; border-color: var(--accent-orange); color: var(--accent-orange); }

/* ─── Bouton "← Retour" global ─── */
.btn-retour {
    background: none;
    border: 1px solid #ccc;
    color: #666;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-retour:hover {
    background: #f0f0f0;
    color: #333;
    border-color: #aaa;
}
body.dark-mode .btn-retour { border-color: #4B5563; color: #9CA3AF; }
body.dark-mode .btn-retour:hover { background: #374151; color: #E5E7EB; border-color: #6B7280; }

/* ═══════════════════════════════════════════════════════
   CARTE ENTREPRISE — NOUVEAU DEVIS
   ═══════════════════════════════════════════════════════ */

.nd-ent-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-orange);
    border-radius: var(--border-radius-md);
    padding: 10px 14px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    min-height: 54px;
}
.nd-ent-logo-wrap {
    flex-shrink: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nd-ent-logo-img {
    max-height: 40px;
    max-width: 48px;
    object-fit: contain;
    border-radius: 4px;
}
.nd-ent-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.nd-ent-details strong {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nd-ent-details span {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nd-ent-edit {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-orange);
    cursor: pointer;
    background: rgba(255,107,0,0.08);
    border: 1px solid var(--accent-orange);
    border-radius: var(--border-radius-sm);
    padding: 5px 10px;
    transition: background 0.15s;
    font-family: var(--font-main);
    white-space: nowrap;
}
.nd-ent-edit:hover { background: rgba(255,107,0,0.18); }
.nd-ent-card.nd-ent-empty .nd-ent-details strong { color: var(--text-secondary); font-style: italic; }
body.dark-mode .nd-ent-card { background: #1F2937; border-color: #374151; border-left-color: var(--accent-orange); }

@media (max-width: 480px) {
    .nd-ent-card { flex-wrap: wrap; }
    .nd-ent-logo-wrap { width: 36px; }
    .nd-ent-details { min-width: calc(100% - 100px); }
}

/* Badge TVA auto dans le récapitulatif */
.calc-auto-tva-badge {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(255,107,0,0.12);
    border: 1px solid var(--accent-orange);
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-orange);
    margin-right: 4px;
    letter-spacing: 0.2px;
}
body.dark-mode .calc-auto-tva-badge { background: rgba(255,107,0,0.2); }

/* ═══════════════════════════════════════════════════════
   NOUVEAU DEVIS — UX AMÉLIORÉE (nd-)
   ═══════════════════════════════════════════════════════ */

/* Barre de progression */
.nd-progress-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.nd-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}
.nd-progress-pct {
    font-weight: 700;
    color: var(--accent-orange);
    font-size: var(--font-size-md);
}
.nd-progress-track {
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 99px;
    overflow: hidden;
}
.nd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-orange), #ffb347);
    border-radius: 99px;
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
    width: 0%;
}

/* Override section pour les sections nd- */
.calc-section.nd-section {
    padding: 20px 20px 16px;
}
.nd-section-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Grille 2 colonnes aérée */
.nd-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 0;
}

/* Champ avec label */
.nd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nd-field-gap {
    margin-top: 14px;
}
.nd-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
.nd-required { color: var(--accent-orange); }

/* Inputs avec feedback visuel */
.nd-input { transition: border-color 0.18s, box-shadow 0.18s; }
.nd-input.nd-valid {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.13);
}
.nd-input.nd-invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.13);
}

/* Boutons de choix visuels */
.nd-choice-group {
    display: flex;
    gap: 7px;
}
.nd-choice-btn {
    flex: 1;
    min-height: 44px;
    padding: 7px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-main);
    line-height: 1.2;
}
.nd-choice-btn:hover:not(.nd-active) {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background: rgba(255,107,0,0.06);
}
.nd-choice-btn.nd-active {
    border-color: var(--accent-orange);
    background: rgba(255,107,0,0.13);
    color: var(--accent-orange);
    font-weight: 700;
}

/* Groupe colonne (nature chantier 3 options) */
.nd-choice-col {
    flex-direction: column;
    gap: 5px;
}
.nd-choice-col .nd-choice-btn {
    flex: none;
    min-height: 38px;
    text-align: left;
    padding-left: 12px;
}

/* État replié : seule l'option active est visible */
.nd-choice-col.nd-collapsed .nd-choice-btn:not(.nd-active) {
    display: none;
}
.nd-choice-col.nd-collapsed .nd-choice-btn.nd-active {
    position: relative;
    padding-right: 32px;
    min-height: 44px;
    cursor: pointer;
}
.nd-choice-col.nd-collapsed .nd-choice-btn.nd-active::after {
    content: '▾';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.75;
    pointer-events: none;
}

/* Date de rédaction : même hauteur et style que le bouton nature replié */
#input-date-redaction-calc {
    height: 44px;
    min-height: 44px;
    padding: 7px 10px;
    box-sizing: border-box;
}

/* Dark mode */
body.dark-mode .nd-progress-wrap  { background: #1F2937; border-color: #374151; }
body.dark-mode .nd-progress-track { background: #374151; }
body.dark-mode .nd-choice-btn     { background: #374151; border-color: #4B5563; color: #9CA3AF; }
body.dark-mode .nd-choice-btn.nd-active { background: rgba(255,107,0,0.18); border-color: var(--accent-orange); color: var(--accent-orange); }
body.dark-mode .nd-choice-btn:hover:not(.nd-active) { background: rgba(255,107,0,0.08); }

/* Mobile */
@media (max-width: 640px) {
    .nd-grid-2 { grid-template-columns: 1fr; }
    .nd-choice-col { flex-direction: row; flex-wrap: wrap; }
    .nd-choice-col .nd-choice-btn { flex: 1 1 calc(33% - 7px); text-align: center; padding-left: 7px; }
    .calc-section.nd-section { padding: 14px 12px 12px; }
    .nd-choice-btn { min-height: 44px; }
}

/* Panneau catalogue — formulaire vocal manuel */
#manual-catalogue-panel {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10200;
}
.mcp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
}
.mcp-panel {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    width: 92vw;
    max-width: 600px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,.3);
    z-index: 1;
    overflow: hidden;
}
.mcp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mcp-header h3 { margin: 0; font-size: 1rem; }
.mcp-search {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.mcp-search .search-input { width: 100%; box-sizing: border-box; }
.mcp-filters {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    scrollbar-width: none;
}
.mcp-filters::-webkit-scrollbar { display: none; }
.mcp-filter-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.mcp-filter-btn:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.mcp-filter-btn.mcp-filter-active {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #fff;
    font-weight: 600;
}
.mcp-list { flex: 1; overflow-y: auto; }
.mcp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.12s;
}
.mcp-item:last-child { border-bottom: none; }
.mcp-item:hover,
.mcp-item:active { background: rgba(255,107,0,.07); }
.mcp-item-info { flex: 1; min-width: 0; }
.mcp-item-name {
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}
.mcp-item-meta {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    font-size: .75rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.mcp-price { color: var(--accent-orange); font-weight: 600; }
.mcp-add-icon { font-size: 1rem; opacity: .5; flex-shrink: 0; }
.mcp-item:hover .mcp-add-icon { opacity: 1; }
.mcp-empty { text-align: center; padding: 32px; color: var(--text-tertiary); }

/* Formulaire partagé dans la modal vocale */
.manual-form-container .calc-section.nd-section,
.parsed-result-container .calc-section.nd-section {
    margin-bottom: 12px;
}
.manual-form-container,
.parsed-result-container {
    flex: 1;
    overflow-y: auto;
}

/* ── Badge de mode de création ── */
.mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-primary, #ff6b00);
    color: #fff;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.nd-tva-reduite-block {
    margin: 12px 0;
    padding: 12px 14px;
    border: 2px solid var(--color-primary, #ff6b00);
    border-radius: 8px;
    background: rgba(255, 107, 0, 0.06);
}

.nd-tva-reduite-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--color-text);
}

.nd-tva-reduite-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #ff6b00);
    cursor: pointer;
}

/* ─── En-tête de groupe catégorie (formulaires devis) ─── */
.dv-cat-header {
    background: var(--bg-secondary, #f5f5f5);
    color: var(--color-primary, #FF6B00);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    margin: 10px 0 4px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* ─── Récapitulatif devis classique (cr-) ─── */
.cr-recap {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
    margin-top: 4px;
}
.cr-group {
    border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.cr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    gap: 8px;
    min-height: 38px;
}
.cr-label {
    color: var(--text-secondary, #555);
    font-size: 13px;
    flex: 1;
}
.cr-label.cr-sub {
    font-size: 12px;
    color: var(--text-muted, #888);
}
.cr-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #222);
    text-align: right;
    white-space: nowrap;
}
.cr-value.cr-sub {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-secondary, #666);
}
.cr-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cr-pct {
    font-size: 13px;
    color: var(--text-secondary, #666);
}
.cr-eq {
    font-size: 13px;
    color: var(--text-secondary, #666);
    white-space: nowrap;
}
.cr-eq strong {
    color: var(--text-primary, #222);
    font-size: 13px;
    font-weight: 600;
}
.cr-ht {
    background: var(--bg-secondary, #f2f2f2);
}
.cr-ht .cr-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #333);
}
.cr-ht .cr-value {
    font-size: 15px;
    color: var(--text-primary, #333);
}
.cr-sub-row {
    background: var(--bg-secondary, #f9f9f9);
    padding-top: 6px;
    padding-bottom: 6px;
}
.cr-split {
    background: var(--bg-secondary, #f5f5f5);
    padding-top: 5px;
    padding-bottom: 5px;
}
.cr-payant {
    background: rgba(255, 107, 0, 0.06);
    border-top: 1px dashed var(--color-primary, #FF6B00);
}
.cr-payant .cr-label {
    color: var(--color-primary, #FF6B00);
    font-weight: 500;
}
.cr-ttc {
    background: var(--color-primary, #FF6B00);
}
.cr-ttc .cr-label {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}
.cr-ttc .cr-value {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}
body.dark-mode .cr-recap {
    border-color: var(--border-color);
    background: var(--bg-card);
}
body.dark-mode .cr-group {
    border-color: var(--border-color);
}
body.dark-mode .cr-ht,
body.dark-mode .cr-sub-row,
body.dark-mode .cr-split {
    background: var(--bg-secondary);
}

/* ── Catalogue inline (fenêtre modification devis) ── */
.ed-catalogue-panel {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
    background: var(--bg-card);
}

.ed-cat-toolbar {
    padding: 10px 12px 6px;
    border-bottom: 1px solid var(--border-color);
}
.ed-cat-toolbar .dv-input { width: 100%; }

.ed-cat-familles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.ed-cat-fam-btn {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.15s, color 0.15s;
}
.ed-cat-fam-btn.active,
.ed-cat-fam-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.ed-cat-items {
    max-height: 220px;
    overflow-y: auto;
}
.ed-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.12s;
}
.ed-cat-item:hover { background: rgba(255,107,0,0.07); }
.ed-cat-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ed-cat-item-nom  { font-weight: 600; font-size: var(--font-size-sm); }
.ed-cat-item-detail { font-size: 11px; color: var(--text-secondary); }
.ed-cat-item-add  { font-size: 17px; flex-shrink: 0; margin-left: 8px; }
.ed-cat-empty     { padding: 20px; text-align: center; color: var(--text-secondary); font-size: var(--font-size-sm); }

/* ─── Sélecteur de devise (en-tête nouveau-devis) ─── */
.nd-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.nd-devise-select {
    padding: 5px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 80px;
}
.nd-devise-select:focus { outline: none; border-color: var(--accent-orange); }

/* ─── Bloc entreprise dans le modal de facture ─── */
.ef-ent-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-orange);
    margin-bottom: 4px;
}
.ef-ent-details strong { font-size: 13px; color: var(--text-primary); display: block; }
.ef-ent-details span   { font-size: 11px; color: var(--text-secondary); display: block; line-height: 1.5; }

/* ─── En-tête modal facture avec sélecteur devise ─── */
.ef-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ef-devise-select {
    padding: 4px 8px;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 76px;
}
.ef-devise-select:focus { outline: none; border-color: var(--accent-orange); }

body.dark-mode .nd-devise-select,
body.dark-mode .ef-devise-select {
    background: #374151;
    border-color: #4B5563;
    color: #f9fafb;
}

.nd-reste-row {
    border-top: 2px solid var(--accent-orange);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    font-size: var(--font-size-md) !important;
    font-weight: var(--font-weight-black) !important;
    color: var(--accent-orange) !important;
}
.nd-reste-row span,
.nd-reste-row strong {
    color: var(--accent-orange) !important;
    font-weight: var(--font-weight-black) !important;
    font-size: var(--font-size-md) !important;
}

/* ─── Section Déplacement (partagée nouveau-devis / modif) ─── */

.depl-lines-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.depl-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    flex-wrap: wrap;
}

.depl-line .depl-designation { flex: 2; min-width: 120px; }
.depl-line .depl-quantite,
.depl-line .depl-pu          { flex: 0 0 70px; }
.depl-line .depl-unite       { flex: 0 0 60px; }
.depl-line .depl-tva-select  { flex-shrink: 0; }
.depl-total                  { flex: 0 0 92px; text-align: right; font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; }

body.dark-mode .depl-line     { background: #1F2937; border-color: #374151; }

/* ── Désignation article éditable dans la grille ── */
.article-designation {
    flex-direction: column;
    align-items: stretch;
}
.art-designation-input {
    flex: 2;
    min-width: 0;
    width: auto;
    font-weight: var(--font-weight-normal);
    padding: 4px 6px;
    font-size: var(--font-size-sm);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    box-sizing: border-box;
}
.art-designation-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

/* Modal catalogue au-dessus du modal vocal */
#catalogue-selector-modal { z-index: 10001; }
#catalogue-selector-modal .modal-content { z-index: 10002; }

/* ── En-têtes colonnes articles (formulaires vocaux) ── */
.nd-mat-header {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 3px 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.nd-mat-header > .mhdr-cat   { width: 80px; flex-shrink: 0; }
.nd-mat-header > .mhdr-desig { flex: 2; min-width: 120px; }
.nd-mat-header > .mhdr-qty   { width: 80px; flex-shrink: 0; text-align: right; }
.nd-mat-header > .mhdr-unite { width: 80px; flex-shrink: 0; }
.nd-mat-header > .mhdr-prix  { width: 80px; flex-shrink: 0; text-align: right; }
.nd-mat-header > .mhdr-tva   { width: 80px; flex-shrink: 0; }
.nd-mat-header > .mhdr-total { width: 85px; flex-shrink: 0; text-align: right; white-space: nowrap; }
.nd-mat-header > .mhdr-del   { width: 30px; flex-shrink: 0; }
@media (max-width: 768px) {
    .nd-mat-header { display: none; }
}

/* ─── Visionneuse PDF ─── */
.pdf-viewer-content {
    position: fixed;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    width: 94vw;
    max-width: 900px;
    height: 94vh;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10010;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdf-viewer-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    gap: var(--spacing-md);
}

.pdf-viewer-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.pdf-viewer-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.pdf-viewer-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #e5e7eb;
}

#pdf-viewer-modal .modal-overlay {
    z-index: 10009;
}

/* ─── Statuts devis colorés ─── */
.statut-dv-signe    { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.statut-dv-brouillon{ background: #FEF9C3; color: #854D0E; border: 1px solid #FDE68A; }
.statut-dv-envoye   { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.statut-dv-refuse   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.statut-dv-expire   { background: #EDE9FE; color: #5B21B6; border: 1px solid #DDD6FE; }

body.dark-mode .statut-dv-signe    { background: #064E3B; color: #6EE7B7; border-color: #065F46; }
body.dark-mode .statut-dv-brouillon{ background: #451A03; color: #FCD34D; border-color: #92400E; }
body.dark-mode .statut-dv-envoye   { background: #1E3A5F; color: #93C5FD; border-color: #1E40AF; }
body.dark-mode .statut-dv-refuse   { background: #450A0A; color: #FCA5A5; border-color: #991B1B; }
body.dark-mode .statut-dv-expire   { background: #2E1065; color: #C4B5FD; border-color: #5B21B6; }

/* Bouton Faire signer — marron clair */
.btn-signer { color: #92400E !important; }
body.dark-mode .btn-signer { color: #D97706 !important; }

/* Lien numéro de facture dans colonne Facture */
.devis-facture-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--accent-orange);
    background: rgba(255,107,0,0.08);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
.devis-facture-link:hover {
    background: rgba(255,107,0,0.18);
    text-decoration: underline;
}

/* Badge "Signé" cliquable pour annuler la signature */
.dv-badge-annulable {
    cursor: pointer;
    transition: opacity 0.15s, filter 0.15s;
}
.dv-badge-annulable:hover {
    opacity: 0.75;
    filter: brightness(0.9);
    text-decoration: line-through;
}

/* ─── Barre de recherche devis / factures ─── */
.list-search-input {
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1.5px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    transition: border-color var(--transition-fast);
}
.list-search-input:focus {
    outline: none;
    border-color: var(--accent-orange);
}
.list-search-input::placeholder {
    color: var(--text-tertiary);
}

/* ─── Modal paiement validation ─── */
.mp-label {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 0.95rem;
}
.mp-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.mp-choice-btn {
    padding: 14px 10px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
}
.mp-choice-btn:hover {
    border-color: var(--accent-orange);
}
.mp-choice-btn.mp-active {
    border-color: var(--accent-orange);
    background: rgba(255,107,0,0.08);
    color: var(--accent-orange);
    font-weight: 600;
}
.mp-error {
    color: var(--accent-danger);
    font-size: 0.88rem;
    margin-top: 4px;
}
.mp-error.hidden { display: none; }
#mp-valider-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Devis manuel : dimensions réduites quantité / unité ── */
#materiaux-list .mat-quantite { width: 65px; min-width: 65px; }
#materiaux-list .mat-unite    { width: 90px; min-width: 0; }

/* ── Devis micro : dimensions réduites quantité / unité ── */
#dv-articles-list .mat-quantite { width: 65px; min-width: 65px; }
#dv-articles-list .mat-unite    { width: 90px; min-width: 0; }

.nature-chantier-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ── Objectifs KPI ── */
.kpi-obj-bar {
    margin-top: 6px;
}
.kpi-obj-bar:empty { display: none; }
.kpi-obj-progress-wrap {
    background: var(--border-color);
    border-radius: 4px;
    height: 5px;
    overflow: hidden;
    margin-bottom: 3px;
}
.kpi-obj-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--primary-color);
    transition: width 0.4s ease;
}
.kpi-obj-progress-fill.obj-ok  { background: #22c55e; }
.kpi-obj-progress-fill.obj-warn { background: #f59e0b; }
.kpi-obj-progress-fill.obj-bad  { background: #ef4444; }
.kpi-obj-text {
    font-size: 10px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}
/* Modal objectifs */
.obj-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-top: 8px;
}
.obj-modal-grid label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.obj-modal-grid input {
    width: 100%;
    box-sizing: border-box;
}
.obj-modal-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.obj-modal-section h4 {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 8px;
}

/* ── KPI couleurs performance ── */
.kpi-val-good { color: #22c55e !important; font-weight: 700; }
.kpi-val-warn { color: #f59e0b !important; font-weight: 700; }
.kpi-val-bad  { color: #ef4444 !important; font-weight: 700; }

/* ── Synthèse auto dashboard ── */
.dashboard-synthese {
    background: var(--bg-card);
    border-left: 4px solid var(--primary-color);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dashboard-synthese.synthese-good { border-left-color: #22c55e; }
.dashboard-synthese.synthese-warn { border-left-color: #f59e0b; }
.dashboard-synthese.synthese-bad  { border-left-color: #ef4444; }

/* ── Actions rapides ── */
.actions-rapides {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.actions-rapides h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.actions-rapides-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-action-rapide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.55;
}
.action-badge {
    background: var(--border-color);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
}
.action-badge.badge-alert { background: #ef4444; color: #fff; }
.actions-rapides-note { font-size: 11px; color: var(--text-secondary); margin: 8px 0 0; font-style: italic; }

/* ── Graphique CA vs Objectifs : contrôles ── */
.ca-obj-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.ca-obj-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.ca-obj-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ca-obj-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.ca-obj-check {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}
.ca-obj-check input[type="checkbox"] { cursor: pointer; }

/* ── Objectifs : champ date échéance ── */
.obj-date-wrap  { margin-top: 5px; }
.obj-date-label { font-size: 10px; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.obj-date-input { font-size: 11px !important; padding: 3px 6px !important; height: auto !important; }
.obj-deadline   { font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.obj-deadline.past-due { color: #ef4444; font-weight: 600; }
.obj-deadline.soon     { color: #f59e0b; font-weight: 600; }

/* ── Objectifs IA result box ── */
.obj-ia-loading {
    text-align: center;
    padding: 12px;
    color: var(--text-secondary);
    font-size: 13px;
}
.obj-ia-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 280px;
    overflow-y: auto;
}
.obj-ia-box ul { margin: 4px 0 4px 16px; padding: 0; }
.obj-ia-box li { margin-bottom: 3px; }
.obj-ia-box strong { color: var(--primary-color); }
.obj-ia-error { border-color: var(--danger-color); color: var(--danger-color); background: #fff5f5; }

/* ─── Nav dynamique (nav.js) ──────────────────────────── */
.sidebar-link.nav-plus-toggle,
.bottom-nav-link.nav-more-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}
.nav-label { flex: 1; min-width: 0; }
.nav-plus-arrow { font-size: 10px; opacity: 0.6; margin-left: 4px; flex-shrink: 0; }
.nav-plus-items { border-left: 2px solid var(--border-color, #eee); margin-left: 12px; }

/* Item Devis vocal — mis en avant comme CTA */
[data-nav-key="vocal"].sidebar-link {
    background: var(--accent-orange, #ff6b00);
    color: #fff !important;
    border-radius: var(--border-radius-sm);
    margin-bottom: 4px;
}
[data-nav-key="vocal"].sidebar-link:hover {
    background: #e55f00;
    color: #fff !important;
    transform: translateX(4px);
}
[data-nav-key="vocal"].sidebar-link .nav-drag-handle { color: rgba(255,255,255,0.5); }
#menu-mobile [data-nav-key="vocal"].sidebar-link {
    background: var(--accent-orange, #ff6b00);
    color: #fff !important;
}
#menu-mobile [data-nav-key="vocal"].sidebar-link:hover { background: #e55f00; }

/* Poignée de glissement */
.nav-drag-handle {
    margin-left: 4px;
    opacity: 0;
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
    transition: opacity 0.15s;
    color: var(--text-tertiary, #aaa);
}
.sidebar-link:hover .nav-drag-handle,
#menu-mobile .sidebar-link:hover .nav-drag-handle { opacity: 0.5; }

/* États drag */
.nav-dragging { opacity: 0.35 !important; }
.nav-drag-over {
    border-top: 2px solid var(--accent-orange, #ff6b00) !important;
    background: rgba(255,107,0,0.06) !important;
}

/* Fantôme mobile (touch drag) */
.nav-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.88;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    font-size: var(--font-size-md, 14px);
    font-weight: var(--font-weight-bold, 600);
}

/* ─── Page Authentification ─── */
.auth-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}
.auth-fullscreen.hidden { display: none !important; }
.auth-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.auth-brand { text-align: center; }
.auth-brand-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.auth-brand-name { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 0; }
.auth-brand-tagline { color: var(--text-secondary); font-size: var(--font-size-sm); margin: 4px 0 0; }
.auth-card {
    width: 100%;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color);
    padding: 28px 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.auth-tabs-bar {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 24px;
}
.auth-tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 10px 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.auth-tab-btn.active { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form .form-input { width: 100%; box-sizing: border-box; }
.btn-auth-submit { width: 100%; margin-top: 4px; font-size: var(--font-size-md); padding: 12px; }
.btn-auth-link {
    background: none; border: none; color: var(--text-secondary);
    font-size: var(--font-size-sm); cursor: pointer; padding: 4px 0;
    text-decoration: underline; text-underline-offset: 2px;
}
.btn-auth-link:hover { color: var(--accent-orange); }
.auth-reset-info {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 4px;
    line-height: 1.5;
}
.auth-message { font-size: var(--font-size-sm); border-radius: 8px; padding: 10px 14px; margin-top: 8px; }
.auth-message.hidden { display: none; }
.auth-msg-error   { background: rgba(239,68,68,.1);  color: #ef4444; }
.auth-msg-success { background: rgba(34,197,94,.1);  color: #16a34a; }

/* ─── Sidebar : footer logout ─── */
.nav-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.nav-logout-btn { opacity: .75; }
.nav-logout-btn:hover { opacity: 1; color: #ef4444; }

/* ─── Catalogue deux niveaux ─── */
.catalogue-section {
    margin-bottom: 28px;
}
.catalogue-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: 2px solid var(--border-color);
}
.catalogue-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}
.catalogue-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cat-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.cat-level-perso {
    background: rgba(var(--accent-orange-rgb, 255, 107, 0), 0.12);
    color: var(--accent-orange);
    border: 1px solid rgba(var(--accent-orange-rgb, 255, 107, 0), 0.3);
}
.cat-level-global {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.cat-badge-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg-tertiary, var(--bg-secondary));
    color: var(--text-secondary);
    font-size: 11px;
    border: 1px solid var(--border-color);
}
.cat-empty-msg {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 24px 16px;
    font-style: italic;
}
.catalogue-section .data-table {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   PLANNING & DISPONIBILITÉS — AGENDA
   ═══════════════════════════════════════════════════════ */

/* Modal principale */
.modal-agenda-content {
    max-width: 1100px;
    width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* Layout 2 colonnes : grille + sidebar */
.agenda-view {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    padding: 12px 0 4px;
}

/* ── Vue mensuelle ── */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.calendar-day-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.calendar-day {
    min-height: 74px;
    padding: 5px 4px 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
    background: var(--bg-primary);
}
.calendar-day:hover { background: var(--bg-secondary); }
.calendar-day.today  { background: #FFF7ED; border-color: var(--accent-orange, #FF6B00); }
.calendar-day.empty  { background: transparent; border-color: transparent; cursor: default; }
.day-number {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.calendar-day.today .day-number { color: var(--accent-orange, #FF6B00); }
.day-events { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 3px; }
.event-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.event-more { font-size: 10px; color: var(--text-tertiary); }

/* Barres d'absence horizontales (vue mensuelle et hebdomadaire) */
.day-conges { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.agenda-conge-bar {
    display: block;
    width: 100%;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    box-sizing: border-box;
}

/* Sidebar commune */
.events-sidebar {
    border-left: 1px solid var(--border-color);
    padding-left: 14px;
    overflow-y: auto;
    max-height: 520px;
}
.events-sidebar h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.event-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    font-size: 13px;
}
.event-date  { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.event-info  { flex: 1; min-width: 0; }
.event-client, .event-time { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px; }

/* Légende */
.agenda-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Vue hebdomadaire ── */
.agenda-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.agenda-week-col {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-primary);
    transition: background .15s;
    min-height: 120px;
}
.agenda-week-col:hover       { background: var(--bg-secondary); }
.agenda-week-col.today        { border-color: var(--accent-orange, #FF6B00); background: #FFF7ED; }
.agenda-week-col.weekend      { background: var(--bg-secondary); opacity: .85; }
.week-day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 4px 5px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.week-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .5px; }
.week-day-num  { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.week-day-num.today-num { color: var(--accent-orange, #FF6B00); }
.week-events-body { padding: 5px 4px; display: flex; flex-direction: column; gap: 4px; }
.week-event {
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
}
/* .week-conge-pill remplacé par .agenda-conge-bar */
.week-empty-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 8px 0;
}

/* Disponibilités sidebar */
.dispo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: var(--bg-secondary);
    font-size: 12px;
}
.dispo-initials {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.dispo-nom    { flex: 1; font-weight: 500; color: var(--text-primary); }
.dispo-status { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; white-space: nowrap; }
.dispo-status.present { background: #E8F5E9; color: #2E7D32; }
.dispo-status.absent  { background: #FFEBEE; color: #C62828; }

/* Détail jour */
.day-events-list { padding: 0 2px; }
.event-card {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg-secondary);
    margin-bottom: 10px;
}
.event-card h4   { margin: 0 0 6px; font-size: 15px; }
.event-card p    { margin: 3px 0; font-size: 13px; color: var(--text-secondary); }
.event-actions   { display: flex; gap: 8px; margin-top: 10px; }
.empty-text      { font-size: 13px; color: var(--text-tertiary); padding: 8px 0; }

/* Sélecteur couleur */
.color-picker-agenda { display: flex; gap: 10px; flex-wrap: wrap; }
.color-picker-agenda label { cursor: pointer; }
.color-picker-agenda input[type="radio"] { display: none; }
.color-picker-agenda span {
    display: block;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: border-color .15s;
}
.color-picker-agenda input[type="radio"]:checked + span { border-color: var(--text-primary); }

/* ── Responsive mobile ── */
@media (max-width: 768px) {
    .agenda-view {
        grid-template-columns: 1fr;
    }
    .events-sidebar {
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-left: 0;
        padding-top: 12px;
        max-height: none;
    }
    .agenda-week-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    .week-day-num  { font-size: 13px; }
    .week-event    { font-size: 10px; padding: 3px 4px; }
    .agenda-week-col { min-height: 90px; }
    .modal-agenda-content { max-height: 95vh; }
}

/* ── Fiche de paie ── */
.fp-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

/* ── RH Notes ─────────────────────────────────────────── */
.rh-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.rh-note-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rh-note-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
}

.rh-note-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-orange);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.rh-note-textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 10px;
}

.rh-note-textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
}

/* ── RH Filter bar ────────────────────────────────────── */
.rh-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* ── Gestion d'équipe — sous-onglets principaux ──────── */
.equipe-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.equipe-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.equipe-tab-btn:hover { color: var(--text-primary); }

.equipe-tab-btn.active {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

/* ── Bloc "Bientôt disponible" ────────────────────────── */
.equipe-coming-soon {
    margin-top: 24px;
    padding: 20px 22px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
}

.equipe-coming-soon-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
}

.equipe-coming-soon-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ── Badge générique ──────────────────────────────────── */
.badge-soon {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ── RH Aperçu employé (live preview formulaire) ─────── */
.emp-apercu-zone {
    margin-bottom: 16px;
    min-height: 0;
    transition: min-height 0.15s;
}

.emp-apercu-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
}

.emp-apercu-infos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.emp-apercu-nom {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-apercu-role {
    font-size: 13px;
    color: var(--text-secondary);
}

.emp-apercu-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── RH PayFit block ──────────────────────────────────── */
.rh-payfit-block {
    margin-bottom: 16px;
}

.rh-payfit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--border-radius-md);
    border: 2px solid var(--accent-orange);
    background: transparent;
    color: var(--accent-orange);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.rh-payfit-btn:hover:not(:disabled) {
    background: var(--accent-orange);
    color: white;
}

.rh-payfit-disabled {
    border-color: var(--border-color);
    color: var(--text-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

.rh-payfit-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   ASSISTANT IA — page styles
   ═══════════════════════════════════════════════════════ */
.ia-unified {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ia-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.ia-advice-placeholder {
    text-align: center;
    padding: 12px 0;
    color: var(--text-secondary);
}
.ia-advice-placeholder-icon { font-size: 28px; margin-bottom: 8px; }

.ia-advice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.ia-advice-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ia-advice-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.ia-advice-card p { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; }

.ia-typing {
    display: flex;
    gap: 6px;
    padding: 16px 0;
    justify-content: center;
}
.ia-typing span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: typing-bounce 1.2s infinite ease-in-out;
}
.ia-typing span:nth-child(2) { animation-delay: 0.2s; }
.ia-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

.ia-error-text { color: var(--danger-color); padding: 12px 0; margin: 0; }

.ia-advice-zone {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.ia-messages {
    flex: 1;
    min-height: 260px;
    max-height: 420px;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ia-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ia-msg-user { flex-direction: row-reverse; }

.ia-msg-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ia-msg-body {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    max-width: 80%;
}
.ia-msg-user .ia-msg-body {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.ia-msg-body strong { display: block; font-size: 11px; margin-bottom: 4px; opacity: 0.7; }
.ia-msg-body p { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; }
.ia-msg-time { font-size: 10px; opacity: 0.5; margin-top: 4px; display: block; text-align: right; }
.ia-msg-img  { max-width: 200px; border-radius: var(--radius-sm); margin-top: 6px; display: block; }

.ia-chat-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}
.ia-chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    outline: none;
}
.ia-chat-input:focus { border-color: var(--primary-color); }
.ia-voice-btn.listening { color: var(--danger-color); }

/* ── Stock badges (catalogue) ─────────────────────────── */
.stock-badge-ok   { font-size: 12px; color: var(--success-color, #2d7a4f); font-weight: 600; }
.stock-badge-low  { font-size: 12px; color: var(--danger-color, #c0392b);  font-weight: 600; }
.stock-badge-none { font-size: 12px; color: var(--text-tertiary); }
.editable-stock   { cursor: pointer; min-width: 70px; }
.editable-stock:hover { background: var(--bg-secondary); }

/* ── Satisfaction dans fiche client ───────────────────── */
.sat-client-avg {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #f59e0b;
    padding: 8px 0 12px;
}
.sat-client-avg strong { font-size: 14px; color: var(--text-primary); }
.avis-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
}
.avis-stars  { color: #f59e0b; letter-spacing: 2px; }
.avis-date   { font-size: 11px; color: var(--text-secondary); }
.avis-comment { width: 100%; margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); font-style: italic; }

/* ── Catalogue sources panel ─────────────────────────── */
.cat-sources-wrap   { margin: 12px 0 16px; }
.cat-sources-title  { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.cat-sources-list   { display: flex; flex-direction: column; gap: 6px; }
.cat-source-item    { display: flex; align-items: center; justify-content: space-between;
                      background: var(--bg-secondary); border-radius: 8px; padding: 10px 14px;
                      transition: opacity .2s; }
.cat-source-off     { opacity: 0.45; }
.cat-source-info    { display: flex; flex-direction: column; gap: 2px; }
.cat-source-info strong { font-size: 14px; color: var(--text-primary); }
.cat-source-info span   { font-size: 12px; color: var(--text-secondary); }
.cat-source-btns    { display: flex; align-items: center; gap: 10px; }
.toggle-sm          { transform: scale(0.85); transform-origin: right center; }
.cat-global-desc    { font-size: 13px; color: var(--text-secondary); line-height: 1.6;
                      margin: -4px 0 16px; }

/* ── Badge Resend (satisfaction config) ───────────────── */
.sat-resend-badge {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 4px;
}
.sat-resend-ok   { background: #d1fae5; color: #065f46; }
.sat-resend-soon { background: #fef3c7; color: #92400e; }

/* ── Parseur CSV intelligent — modal mapping ─────────── */
.csv-map-content {
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.csv-map-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 2px 0 0;
    font-weight: 400;
}
.csv-map-body       { padding: 0 20px 4px; }
.csv-map-hint       { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.csv-map-fields     { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.csv-map-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.csv-map-row.csv-map-required { border-left: 3px solid var(--accent-orange); }
.csv-map-label       { display: flex; flex-direction: column; gap: 2px; }
.csv-map-label > span { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.csv-map-label small  { font-size: 11px; color: var(--text-tertiary); }
.csv-map-req-badge   { font-size: 10px; font-weight: 700; background: #fff3e0; color: var(--accent-orange); border-radius: 4px; padding: 1px 5px; }
.csv-map-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.csv-map-select:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 0 0 2px rgba(255,107,0,.15); }
.csv-map-preview      { background: var(--bg-primary); border-radius: 8px; padding: 12px; border: 1px solid var(--border-color); overflow-x: auto; }
.csv-map-preview-title{ font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.csv-map-table        { width: 100%; border-collapse: collapse; font-size: 12px; }
.csv-map-table th     { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.csv-map-table td     { padding: 5px 8px; border-bottom: 1px solid var(--border-color); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csv-map-empty        { color: var(--text-tertiary); }
.csv-map-no-preview   { font-size: 12px; color: var(--text-tertiary); text-align: center; padding: 8px 0; }

.btn-charger-plus {
    display: block;
    margin: var(--spacing-md) auto;
    padding: 10px 28px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-charger-plus:hover {
    background: var(--hover-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ─── Paramètres et Planning en pleine page ─── */
#parametres-page .modal-settings-content {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
}

#planning-page .modal-agenda-content {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   FIN CSS - DEVISVOX COMPLET
   ═══════════════════════════════════════════════════════ */