/* Variables thème — light par défaut */
:root {
    --bg: #f0f2f5;
    --bg-elevated: #ffffff;
    --text: #1a1a2e;
    --text-muted: #666;
    --border: #e5e7eb;
    --primary: #6366f1;
    --primary-text: #ffffff;
    --link: #4f46e5;
    --success: #16a34a;
    --warning: #c2410c;
    --danger: #dc2626;
    --tile-orange: #f97316;
    --tile-green: #22c55e;
    --tile-blue: #3b82f6;
    --tile-yellow: #eab308;
    --tile-purple: #8b5cf6;
    --tile-red: #ef4444;
    --shadow: 0 1px 3px rgba(0,0,0,0.07);
    --radius: 14px;
    --font-scale: 1;
}

/* === Accessibilité (synchronisé avec saas-router) ===
   Le PWA est codé en px absolus → un simple --font-scale sur html { font-size } ne
   se voit quasi pas (rien n'hérite via em/rem). On utilise zoom : property
   widely-supported qui scale TOUT (texte + cadres + paddings) — visible
   immédiatement et sans toucher au reste du CSS. */
html.a11y-large { --font-scale: 1.18; zoom: 1.18; }
html.a11y-xlarge { --font-scale: 1.4; zoom: 1.4; }
html { font-size: 16px; }
html.a11y-hicontrast {
    --bg: #000;
    --bg-elevated: #0a0a0a;
    --text: #fff;
    --text-muted: #ccc;
    --border: #fff;
    --primary: #ffd700;
    --primary-text: #000;
}
html.a11y-reducemotion *, html.a11y-reducemotion *::before, html.a11y-reducemotion *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
}
html.a11y-hicontrast :focus, html .a11y-focus :focus {
    outline: 3px solid var(--primary) !important; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:root[data-theme="dark"] {
    --bg: #0f1014;
    --bg-elevated: #1a1d24;
    --text: #e5e7eb;
    --text-muted: #9ca3af;
    --border: #2d3139;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --link: #a5b4fc;
}

/* Liens hypertexte — lisibles en clair comme en sombre */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { filter: brightness(1.15); }
a:visited { color: var(--link); }

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';  /* variantes Inter pour lisibilité */
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.header {
    background: var(--bg-elevated);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow);
    min-height: 44px;
}

.header h1 {
    font-size: 22px; font-weight: 800; margin: 0; line-height: 1.1;
    min-width: 0;     /* permet à flex de RÉTRÉCIR ce titre quand le nom d'entreprise est long */
    flex: 1 1 auto;
    overflow: hidden;
}
.header .brand {
    display: flex; align-items: center;
    min-width: 0; flex: 1 1 auto;
}
.header .brand-logo {
    height: 28px; width: auto; display: block;
    background: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* Texte brand : taille adaptative selon la longueur du nom — la PWA injecte
   le nom de l'entreprise tenant via saas_router. Long nom = font-size réduit
   via les classes ci-dessous, posées dynamiquement par app.js. */
.header .brand-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    line-height: 1.2;
}
.header .brand-text.brand-medium { font-size: 17px; }
.header .brand-text.brand-long   { font-size: 14px; }
.header .brand-text.brand-xlong  { font-size: 12px; white-space: normal; line-height: 1.1; }

.header .actions { display: flex; gap: 8px; }

button.icon-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    color: var(--text);
    font-size: 20px;
}
button.icon-btn:active { background: var(--border); }

main { padding: 20px; max-width: 720px; margin: 0 auto; }

.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
    justify-items: center;  /* centre chaque tuile dans sa cellule */
}

/* Lien complet : bouton (icône) + caption en dessous.
   max-width permet à la tuile d'être plus compacte que la largeur de la cellule
   de grille — réduit l'espace vide global perçu par l'utilisateur. */
.tile-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    min-width: 0;
    width: 100%;
    max-width: 105px;
}

/* Icône seule posée sur le fond de page — plus de carte (fond/bordure/ombre) */
.tile-btn {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease;
    border: none;
    overflow: visible;
    /* Bouton ~13 % plus petit que le libellé : le libellé garde sa largeur
       (pas de retour à la ligne), seule l'icône rétrécit et se centre. */
    min-width: 0; max-width: 90px; margin: 0 auto;
    width: 100%;
    padding: 0;
    position: relative;
}
/* Badge numéro de l'étape du cycle (1=Clients, 2=Devis/Interventions, 3=Factures, 4=Compta) */
.tile-step-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.tile-link:active .tile-btn { transform: scale(0.96); }
.tile-btn iconify-icon {
    /* iconify-icon est dimensionné par font-size (em-based). Plus de carte : l'icône
       est une glyphe posée sur le fond. font-size plafonné à la largeur de la tuile
       (90px) pour rester dans la case ; le padding interne du glyphe fait la marge.
       ~12 % plus petit qu'avant (retrait du scale 1.15 edge-to-edge). */
    font-size: clamp(58px, 24vw, 90px);
    line-height: 1;
    display: block;
    transform: none;
    transform-origin: center;
}

/* Caption en dessous du bouton — calé sur la largeur du bouton */
.tile-caption {
    margin-top: 8px;
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.2;
    width: 100%;
    overflow-wrap: break-word;
}

/* Couleurs par tuile (icône + caption + bord du bouton) */
/* Caption : couleur OPPOSÉE au fond (max contraste, pas de contour).
   L'icône garde sa couleur pour l'identité visuelle de la tuile. */
.tile-caption { color: var(--text); }

.tile-link.t-orange .tile-btn { border-color: rgba(249,115,22,0.18); }
.tile-link.t-orange iconify-icon { color: var(--tile-orange); }

.tile-link.t-green .tile-btn { border-color: rgba(34,197,94,0.18); }
.tile-link.t-green iconify-icon { color: var(--tile-green); }

.tile-link.t-blue .tile-btn { border-color: rgba(59,130,246,0.18); }
.tile-link.t-blue iconify-icon { color: var(--tile-blue); }

.tile-link.t-yellow .tile-btn { border-color: rgba(234,179,8,0.18); }
.tile-link.t-yellow iconify-icon { color: var(--tile-yellow); }

.tile-link.t-purple .tile-btn { border-color: rgba(139,92,246,0.18); }
.tile-link.t-purple iconify-icon { color: var(--tile-purple); }

.tile-link.t-red .tile-btn { border-color: rgba(239,68,68,0.18); }
.tile-link.t-red iconify-icon { color: var(--tile-red); }

/* Adaptations device : adapter le font-size selon la taille d'écran. */
.dev-low    .tile-btn iconify-icon { font-size: clamp(56px, 22vw, 84px); transform: none; }
.dev-tablet .tile-btn iconify-icon { font-size: clamp(80px, 15vw, 123px); transform: none; }
.dev-desktop .tile-btn iconify-icon { font-size: clamp(100px, 10vw, 141px); transform: none; }
/* Libellé garde sa largeur d'origine (pas de retour à la ligne) ; seul le bouton rétrécit */
.dev-tablet .tile-link  { max-width: 140px; }
.dev-desktop .tile-link { max-width: 160px; }
.dev-tablet .tile-btn  { max-width: 123px; }
.dev-desktop .tile-btn { max-width: 141px; }

/* Header icons */
.icon-btn iconify-icon { font-size: 22px; line-height: 1; color: var(--text); display: block; }
.back-btn iconify-icon, .add-btn iconify-icon { font-size: 24px; line-height: 1; color: var(--primary); }

.greet {
    text-align: left;
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 26px;
    letter-spacing: 1.5px;
    line-height: 1.1;
    margin: 0;
    color: var(--text);  /* contraste max comme les captions */
    flex: 1 1 auto;
    min-width: 0;
    /* Sur mobile : si le nom dépasse, on tronque avec … plutôt que de casser
       la mise en page. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tablette/desktop : assez d'espace horizontal pour laisser le nom passer
   sur 2 lignes plutôt que tronquer. */
@media (min-width: 768px) {
    .greet {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 30px;
    }
}

/* Greet + météo côte à côte en haut du home (gain d'espace vertical) */
.home-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 14px;
}
.brief-weather-compact {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 12px;
}
.brief-weather-compact iconify-icon {
    font-size: 22px;
    color: var(--tile-blue);
}
.brief-weather-compact .brief-temp {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.1;
}
.brief-weather-compact .brief-summary {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.1;
}
:root[data-theme="dark"] .greet { color: var(--text); }

/* Mini-guide du flow de travail (home) */
.flow-guide {
    margin: 18px 0 0;
    padding: 14px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.flow-guide-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
    text-align: center;
}
.flow-steps {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    overflow-x: auto;
}
.flow-step {
    flex: 1 1 auto;
    min-width: 0;
}
.flow-step a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text);
    padding: 6px 4px;
    border-radius: 10px;
    transition: background 0.15s;
    position: relative;
}
.flow-step a:hover, .flow-step a:active { background: var(--bg); }
.flow-step iconify-icon { font-size: 26px; line-height: 1; }
.flow-step-num {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-step-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.flow-step-label small {
    font-size: 9px;
    font-weight: 400;
    text-transform: none;
    color: var(--text-muted);
}
.flow-arrow {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}

/* Setup screen */
.setup {
    max-width: 400px;
    margin: 60px auto;
    background: var(--bg-elevated);
    padding: 32px 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.setup h2 { margin-bottom: 16px; }
.setup label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.setup input {
    width: 100%; padding: 14px 14px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg); color: var(--text);
    font-family: monospace; font-size: 16px; /* 16px évite zoom auto iOS */
    min-height: 48px;
}
.setup button {
    margin-top: 16px; width: 100%; padding: 14px; border: none;
    border-radius: 8px; background: var(--primary); color: var(--primary-text);
    font-weight: 700; cursor: pointer; font-size: 16px;
    min-height: 48px;
}

/* Smart Picker */
.picker { position: relative; }
.picker-wrap { position: relative; }
.picker-input {
    width: 100%; padding: 14px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg); color: var(--text); font-size: 16px;
    min-height: 48px;
}
.picker-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 8px; margin-top: 4px; max-height: 240px; overflow-y: auto;
    box-shadow: var(--shadow); z-index: 10;
}
.picker-result {
    padding: 14px; cursor: pointer; border-bottom: 1px solid var(--border);
    font-size: 15px; min-height: 44px;
}
.picker-result:last-child { border-bottom: none; }
.picker-result:hover { background: var(--bg); }
.picker-create {
    padding: 10px 12px; cursor: pointer; color: var(--primary);
    font-weight: 600; font-size: 14px; text-align: center;
}
.picker-create:hover { background: var(--bg); }

.hidden { display: none !important; }

.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--text); color: var(--bg);
    padding: 12px 20px; border-radius: 24px; font-size: 14px;
    box-shadow: var(--shadow); z-index: 1000;
}

/* === Écrans entités (toolbar + list + form + detail) === */

.screen-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -20px -20px 16px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.screen-toolbar > .back-btn { flex: 0 0 auto; }
/* Le bouton + Nouveau (add-btn) est poussé à l'extrême droite */
.screen-toolbar > .add-btn { margin-left: auto; }
.screen-toolbar h2 {
    /* Titre parfaitement centré dans la barre, indépendant des boutons */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    pointer-events: none;
}
.back-btn, .add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    border-radius: 8px;
}
.back-btn:active, .add-btn:active { background: var(--bg); }

/* Variante tuile : icône en haut + texte « Nouveau » en bas (toolbar listes) */
.add-btn-tile {
    width: auto;
    height: auto;
    flex-direction: column;
    gap: 0;
    padding: 4px 8px;
}
.add-btn-tile iconify-icon { font-size: 26px; line-height: 1; }
.add-btn-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    color: var(--primary);
}

/* Bandeau filtre client actif (depuis fiche client) */
.active-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.32);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.active-filter-bar:hover { background: rgba(99, 102, 241, 0.20); }
.active-filter-bar iconify-icon { font-size: 18px; color: var(--primary); }
.active-filter-label {
    flex: 1; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.active-filter-clear { font-size: 16px !important; color: var(--text-muted) !important; }

.searchbar {
    margin-bottom: 12px;
}
.searchbar input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-elevated); color: var(--text);
    font-size: 16px; min-height: 48px;
    -webkit-appearance: none;
}

.list {
    list-style: none; padding: 0; margin: 0;
    background: var(--bg-elevated); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}

/* View modes (tabs) — Factures Récent/Impayées */
.view-modes {
    display: flex; gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.view-mode-btn {
    flex: 1; min-width: 110px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all 0.15s;
    min-height: 44px;
    white-space: nowrap;
}
.view-mode-btn iconify-icon { font-size: 18px; line-height: 1; }
.view-mode-btn.active {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
.view-mode-btn.active iconify-icon { color: var(--primary-text); }

/* Liste groupée par client */
.grouped-list { display: flex; flex-direction: column; gap: 16px; }
.group { display: flex; flex-direction: column; }
.group-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    font-size: 14px; font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.group-icon { font-size: 16px; color: var(--primary); }
.group-count { color: var(--text-muted); font-weight: 500; font-size: 12px; }
.group-list { margin: 0; }
.list-item {
    padding: 14px 16px; border-bottom: 1px solid var(--border);
    cursor: pointer; min-height: 60px;
}
.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--bg); }
/* Recherche globale (home) */
.home-search {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 16px; padding: 8px 12px;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
}
.home-search input {
    flex: 1; border: none; background: transparent; outline: 0;
    font-size: 16px; color: var(--text); padding: 6px 0;
    min-height: 32px;
}
.global-search-results { margin-top: 8px; }
.global-search-group { margin-bottom: 18px; }
.global-search-header {
    display: flex; gap: 8px; align-items: baseline;
    padding: 10px 12px; background: rgba(99,102,241,.08);
    border-radius: 8px 8px 0 0; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.4px; color: var(--primary);
}
.global-search-count { font-weight: 500; color: var(--text-muted); font-size: 12px; }

.list-item-name { font-weight: 600; font-size: 15px; }
.list-item-sub { color: var(--text-muted); font-size: 13px; margin-top: 4px; }
.list-item-note {
    color: var(--text-muted); font-size: 12px; margin-top: 4px;
    font-style: italic; line-height: 1.4;
    border-left: 2px solid var(--primary); padding-left: 8px; opacity: .85;
}

.loading, .empty, .error {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted); font-size: 14px;
}
.error { color: var(--danger); }

.form {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.form label { display: block; font-size: 13px; color: var(--text-muted); margin: 12px 0 6px; }
.form label:first-child { margin-top: 0; }
.form input, .form textarea, .form select {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text);
    font-size: 16px; min-height: 48px;
    -webkit-appearance: none;
}
.form textarea { min-height: 80px; max-height: 60vh; line-height: 1.45; resize: none; overflow: hidden; }
.form button {
    margin-top: 20px; width: 100%; padding: 14px;
    border: none; border-radius: 10px;
    background: var(--primary); color: var(--primary-text);
    font-weight: 700; font-size: 16px; cursor: pointer;
    min-height: 52px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.form button:disabled { opacity: 0.6; cursor: wait; }
.form button iconify-icon { font-size: 22px; color: var(--primary-text); line-height: 1; }

.setup button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 10px; min-height: 52px;
}
.setup button iconify-icon { font-size: 22px; color: var(--primary-text); line-height: 1; }

.detail {
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
/* Prerequisite chosen (tiers déjà sélectionné dans formulaire) */
.prereq-chosen {
    display: flex; align-items: center; gap: 10px;
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--success);
    border-radius: 8px;
    min-height: 48px;
}
.link-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 8px; border-radius: 6px;
    color: var(--text-muted);
}
.link-btn:active { background: var(--border); }
.link-btn iconify-icon { font-size: 18px; line-height: 1; }
.link-btn-primary {
    margin-top: 10px; padding: 10px 16px;
    background: var(--primary); color: var(--primary-text);
    border: none; border-radius: 8px;
    font-weight: 700; font-size: 14px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.link-btn-primary iconify-icon { font-size: 16px; line-height: 1; color: var(--primary-text); }

.picker-create-form {
    margin-top: 8px; padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.picker-create-form label {
    display: block; font-size: 12px; color: var(--text-muted);
    margin: 8px 0 4px;
}

.detail-actions {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px;
}
/* Pattern « tuile » universel — aligné sur le menu principal (.tile-link) :
   un cadre carré porte l'icône edge-to-edge, le texte s'affiche sous la tuile,
   en dehors du cadre. Le bouton lui-même est transparent et sert juste de
   wrapper cliquable. */
.action-btn {
    flex: 1 1 calc(33.333% - 6px); min-width: 0; max-width: 100%;
    padding: 0; border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    cursor: pointer;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 6px;
    transition: transform 0.1s ease;
}
.action-btn iconify-icon {
    display: block;
    width: 56px; height: 56px;
    box-sizing: border-box;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 32px;
    line-height: 1;
    color: var(--text);
}
.action-btn span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.2;
    color: var(--text);
}
.action-btn:active iconify-icon { transform: scale(0.96); }
.action-btn:disabled { opacity: 0.5; cursor: wait; }

/* Variante 'ghost' : cadre neutre (par défaut sur action-btn — pas de tint).
   Conservée pour la sémantique, identique au style de base. */
.action-btn.ghost iconify-icon { background: var(--bg); }

/* Variantes tintées : la couleur s'applique sur l'icône dans son cadre */
.action-pdf iconify-icon    { background: rgba(59, 130, 246, 0.14); color: var(--tile-blue); border-color: rgba(59,130,246,0.25); }
.action-save iconify-icon   { background: rgba(16, 185, 129, 0.14); color: #059669;          border-color: rgba(16,185,129,0.25); }
.action-edit iconify-icon   { background: rgba(249, 115, 22, 0.14); color: var(--tile-orange); border-color: rgba(249,115,22,0.25); }
.action-delete iconify-icon { background: rgba(239, 68, 68, 0.14); color: var(--danger);    border-color: rgba(239,68,68,0.25); }

/* Tinted plus opaque en dark theme */
:root[data-theme="dark"] .action-pdf iconify-icon    { background: rgba(59, 130, 246, 0.22); }
:root[data-theme="dark"] .action-save iconify-icon   { background: rgba(16, 185, 129, 0.22); }
:root[data-theme="dark"] .action-edit iconify-icon   { background: rgba(249, 115, 22, 0.22); }
:root[data-theme="dark"] .action-delete iconify-icon { background: rgba(239, 68, 68, 0.22); }

.field { padding: 12px 0; border-bottom: 1px solid var(--border); }
.field-clickable {
    position: relative;
    cursor: pointer;
    padding-right: 32px;
    transition: background 0.15s;
    border-radius: 6px;
    margin: 0 -8px;
    padding-left: 8px;
}
.field-clickable:hover, .field-clickable:active { background: rgba(99, 102, 241, 0.08); }
.field-edit-hint {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 16px; color: var(--text-muted);
    opacity: 0.55; transition: opacity 0.15s;
}
.field-clickable:hover .field-edit-hint { opacity: 1; color: var(--primary); }

/* === Lignes devis/factures === */
.lines-section { margin-top: 20px; }
.lines-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px; padding: 0 4px;
}
.lines-header h3 { font-size: 16px; font-weight: 700; }
.add-line-btn {
    background: var(--primary); color: var(--primary-text);
    border: none; border-radius: 8px;
    padding: 8px 14px; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    min-height: 36px;
}
.add-line-btn iconify-icon { font-size: 16px; color: var(--primary-text); }
.lines-header-actions {
    display: inline-flex; flex-wrap: wrap; gap: 8px;
    justify-content: flex-end; flex: 1 1 auto;
}
.add-title-btn { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
.add-title-btn iconify-icon { color: var(--text); }

/* Lignes spéciales (titre / sous-total / texte libre) */
.line-item.line-title { background: rgba(99, 102, 241, 0.08); border-left: 3px solid var(--primary); }
.line-item.line-title .list-item-name { font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.4px; }

.line-item.line-subtotal { background: rgba(16, 185, 129, 0.08); border-left: 3px solid #10b981; }
.line-item.line-subtotal .list-item-name { font-weight: 700; font-size: 15px; }
.line-item.line-subtotal .list-item-name::before { content: 'Σ '; color: #10b981; font-weight: 800; }

.line-item.line-text { background: transparent; border-left: 3px solid var(--border); }
.line-item.line-text .list-item-name { font-weight: 400; font-style: italic; color: var(--text-muted); }

/* Bouton Valider (en haut du détail) */
/* Toutes les variantes colorées appliquent le tint sur l'iconify-icon (cadre)
   plutôt que sur le bouton, pour rester cohérent avec le pattern tile. */
.action-validate iconify-icon  { background: rgba(16, 185, 129, 0.18); color: #047857; border-color: rgba(16,185,129,0.32); }
.action-email iconify-icon     { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; border-color: rgba(59,130,246,0.32); }
.action-convert iconify-icon   { background: rgba(59, 130, 246, 0.22); color: #1d4ed8; border-color: rgba(59,130,246,0.36); }
.action-relance iconify-icon   { background: rgba(245, 158, 11, 0.22); color: #92400e; border-color: rgba(245,158,11,0.36); }
.action-accept iconify-icon    { background: rgba(16, 185, 129, 0.22); color: #047857; border-color: rgba(16,185,129,0.36); }
.action-refuse iconify-icon    { background: rgba(239, 68, 68, 0.18); color: #b91c1c; border-color: rgba(239,68,68,0.32); }
.action-abandon iconify-icon   { background: rgba(239, 68, 68, 0.18); color: #b91c1c; border-color: rgba(239,68,68,0.32); }
:root[data-theme="dark"] .action-abandon iconify-icon { background: rgba(239, 68, 68, 0.28); color: #fca5a5; }
.action-sign iconify-icon      { background: rgba(16, 185, 129, 0.18); color: #047857; border-color: rgba(16,185,129,0.32); }
:root[data-theme="dark"] .action-sign iconify-icon { background: rgba(16, 185, 129, 0.28); color: #34d399; }
.action-geoloc iconify-icon    { background: rgba(10, 77, 104, 0.18); color: #0a4d68; border-color: rgba(10,77,104,0.32); }
:root[data-theme="dark"] .action-geoloc iconify-icon { background: rgba(10, 77, 104, 0.32); color: #93c5fd; }
.action-photo iconify-icon     { background: rgba(168, 85, 247, 0.18); color: #6b21a8; border-color: rgba(168,85,247,0.32); }
:root[data-theme="dark"] .action-photo iconify-icon { background: rgba(168, 85, 247, 0.28); color: #d8b4fe; }
.action-credit-note iconify-icon { background: rgba(168, 85, 247, 0.18); color: #6b21a8; border-color: rgba(168,85,247,0.32); }
:root[data-theme="dark"] .action-credit-note iconify-icon { background: rgba(168, 85, 247, 0.28); color: #d8b4fe; }
.action-print iconify-icon       { background: rgba(107, 114, 128, 0.18); color: #4b5563; border-color: rgba(107,114,128,0.32); }
:root[data-theme="dark"] .action-print iconify-icon       { background: rgba(107, 114, 128, 0.28); color: #cbd5e1; }

:root[data-theme="dark"] .action-validate iconify-icon  { background: rgba(16, 185, 129, 0.28); color: #34d399; }
:root[data-theme="dark"] .action-email iconify-icon     { background: rgba(59, 130, 246, 0.28); color: #93c5fd; }
:root[data-theme="dark"] .action-convert iconify-icon   { background: rgba(59, 130, 246, 0.32); color: #93c5fd; }
:root[data-theme="dark"] .action-relance iconify-icon   { background: rgba(245, 158, 11, 0.32); color: #fbbf24; }
:root[data-theme="dark"] .action-accept iconify-icon    { background: rgba(16, 185, 129, 0.28); color: #34d399; }
:root[data-theme="dark"] .action-refuse iconify-icon    { background: rgba(239, 68, 68, 0.28); color: #fca5a5; }

/* Badge état devis fermé (accepté / refusé) */
.status-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 10px; font-weight: 700; font-size: 14px;
}
.status-badge iconify-icon { font-size: 20px; }
.status-accepted { background: rgba(16, 185, 129, 0.18); color: #047857; }
.status-accepted iconify-icon { color: #047857; }
.status-refused { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.status-refused iconify-icon { color: #b91c1c; }
:root[data-theme="dark"] .status-accepted { background: rgba(16, 185, 129, 0.28); color: #34d399; }
:root[data-theme="dark"] .status-accepted iconify-icon { color: #34d399; }
:root[data-theme="dark"] .status-refused { background: rgba(239, 68, 68, 0.26); color: #fca5a5; }
:root[data-theme="dark"] .status-refused iconify-icon { color: #fca5a5; }

/* Preview PDF embarquée (toggle déplier/replier) */
.doc-pdf-preview-wrap {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden; margin: 12px 0;
    box-shadow: var(--shadow);
}
.doc-pdf-preview-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 14px; background: var(--bg);
}
.doc-pdf-preview-header iconify-icon { font-size: 20px; color: var(--primary); }
.doc-pdf-preview-busy {
    font-size: 12px; color: var(--text-muted); font-weight: 400;
    margin-left: auto; margin-right: 8px;
}
.doc-pdf-preview-iframe {
    display: block; width: 100%; height: 70vh;
    border: 0; background: #fff;
}
.doc-pdf-canvas-container {
    background: #444; padding: 8px;
    max-height: 75vh; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.doc-pdf-canvas-container canvas {
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    touch-action: pinch-zoom;
}

/* ─── Vue document (devis / factures) : édition inline façon PDF éditable ─── */
.doc-page, .doc-foot {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 16px;
    margin: 12px 0;
}
.doc-head {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.doc-emitter { flex: 1 1 220px; min-width: 0; }
.doc-company { font-size: 18px; font-weight: 800; letter-spacing: 0.5px; }
.doc-emitter-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.doc-title-block { flex: 1 1 220px; min-width: 0; text-align: right; }
.doc-doctype {
    font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* Cadenas à droite du numéro de facture/devis quand le doc est verrouillé.
   Cliquable pour ouvrir l'explication + le déverrouillage. */
.doc-lock-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1px solid rgba(245,158,11,0.36);
    border-radius: 8px;
    background: rgba(245,158,11,0.18);
    color: #92400e;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}
.doc-lock-badge:hover { background: rgba(245,158,11,0.28); }
.doc-lock-badge:active { transform: scale(0.92); }
.doc-lock-badge iconify-icon { font-size: 18px; color: #92400e; }
:root[data-theme="dark"] .doc-lock-badge {
    background: rgba(245,158,11,0.28);
    border-color: rgba(245,158,11,0.5);
    color: #fbbf24;
}
:root[data-theme="dark"] .doc-lock-badge iconify-icon { color: #fbbf24; }
.doc-meta-line {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end; min-height: 32px; font-size: 14px;
}
.doc-meta-label { color: var(--text-muted); }
.doc-meta-value { font-weight: 600; }
.doc-meta-value.editable, .doc-note-content.editable {
    cursor: pointer; padding: 2px 8px; border-radius: 6px;
    transition: background 0.12s ease;
    border-bottom: 1px dashed var(--border);
}
.doc-meta-value.editable:hover, .doc-note-content.editable:hover,
.doc-meta-value.editable:active, .doc-note-content.editable:active {
    background: rgba(99, 102, 241, 0.18);
    border-bottom-color: var(--primary);
}
.doc-note-content.editable { border-bottom: none; }
.doc-meta-line input, .doc-meta-line select {
    flex: 0 1 auto; min-width: 140px; padding: 6px 10px;
    border: 1px solid var(--primary); border-radius: 6px;
    background: var(--bg); color: var(--text); font-size: 14px;
}

/* Champs toujours-visibles (always-on edit) */
.doc-input {
    flex: 0 1 auto; min-width: 0; max-width: 220px;
    padding: 8px 10px; font-size: 14px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text);
    text-align: right;
}
.doc-input:focus {
    border-color: var(--primary); outline: 0;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.doc-button-field {
    flex: 1 1 auto; min-width: 0; max-width: 280px;
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 14px; min-height: 42px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text);
    font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
}
.doc-button-field span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto;
}
.doc-button-field iconify-icon { color: var(--text-muted); font-size: 18px; flex: 0 0 auto; }
.doc-button-field:active { background: rgba(99,102,241,.08); }
.doc-button-field.doc-button-set {
    color: var(--primary); border-color: var(--primary);
    background: rgba(99,102,241,.08);
}
.doc-button-field.doc-button-set iconify-icon { color: var(--primary); }
.doc-button-field.doc-button-empty {
    color: var(--text-muted); font-weight: 500; font-style: italic;
}

.doc-textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.5;
    resize: none; overflow: hidden; min-height: 60px;
}
.doc-textarea:focus {
    border-color: var(--primary); outline: 0;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.doc-recipient {
    margin-top: 14px; padding: 12px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 8px; border-left: 3px solid var(--primary);
}
.doc-section-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--text-muted); font-weight: 700; margin-bottom: 6px;
}
.doc-recipient-name { font-size: 16px; font-weight: 700; }
.doc-tiers-fields { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(99,102,241,0.2); }
.doc-tiers-fields .doc-meta-line { margin: 4px 0; }
.doc-tiers-fields .doc-input { font-size: 13px; padding: 6px 8px; }
.doc-tiers-fields .doc-textarea { font-size: 13px; padding: 6px 8px; }

.doc-foot { margin-top: 12px; }
.doc-totals { margin-bottom: 18px; }
.doc-total-row {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px dashed var(--border);
    font-size: 14px;
}
.doc-total-row:last-child { border-bottom: none; }
.doc-total-grand { font-size: 16px; font-weight: 800; padding-top: 10px; }

.doc-payment { margin-bottom: 18px; }
.doc-payment .doc-meta-line { justify-content: flex-start; }
.doc-payment .doc-meta-label { min-width: 100px; }

.doc-note-edit { margin-top: 6px; }
.doc-note-content {
    min-height: 32px; padding: 8px 10px;
    background: var(--bg); border: 1px dashed var(--border);
    border-radius: 6px; font-size: 14px; line-height: 1.5;
}
.doc-note-edit textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--primary); border-radius: 6px;
    background: var(--bg); color: var(--text);
    font-size: 14px; line-height: 1.5; resize: none; overflow: hidden;
    min-height: 60px;
}

/* Bottom-sheet picker (mode/conditions de règlement) */
.picker-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeIn 0.18s ease;
}
.picker-sheet {
    width: 100%; max-width: 520px;
    background: var(--bg-elevated);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.3);
    max-height: 70vh; display: flex; flex-direction: column;
    animation: slideUp 0.22s ease;
}
.picker-sheet-header {
    display: flex; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.picker-sheet-title { flex: 1; font-size: 16px; font-weight: 700; }
.picker-sheet-list {
    list-style: none; margin: 0; padding: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.picker-sheet-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 15px; min-height: 48px;
}
.picker-sheet-item:hover, .picker-sheet-item:active {
    background: rgba(99, 102, 241, 0.08);
}
.picker-sheet-item.selected {
    color: var(--primary); font-weight: 700;
    background: rgba(99, 102, 241, 0.12);
}
.picker-sheet-item iconify-icon { font-size: 20px; color: var(--primary); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* Modale email */
.email-sheet { max-width: 600px; max-height: 90vh; }
.email-sheet-body {
    padding: 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
.email-section { margin-bottom: 16px; }
.email-recipient-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px; cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.email-recipient-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
.email-recipient-info { flex: 1; min-width: 0; overflow: hidden; }
.email-recipient-email { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.email-recipient-label { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.email-add-row {
    display: flex; gap: 8px; align-items: center; margin-top: 8px;
}
.email-add-row input {
    flex: 1; padding: 8px 12px; min-height: 40px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 14px;
}
.email-add-row .link-btn-primary {
    flex: 0 0 auto; padding: 8px 14px; min-height: 40px; border-radius: 8px;
    background: var(--primary); color: var(--primary-text); border: none;
    font-weight: 700; cursor: pointer;
}
.email-sheet-footer {
    display: flex; gap: 10px; padding: 12px 18px;
    border-top: 1px solid var(--border); background: var(--bg-elevated);
}
.email-sheet-footer .action-btn {
    flex: 1; min-height: 56px; padding: 10px 14px;
    flex-direction: row; gap: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.email-sheet-footer .action-btn iconify-icon {
    width: auto; height: auto; padding: 0;
    background: transparent; border: none; box-shadow: none;
    font-size: 20px;
}
.email-sheet-footer .action-btn span { text-transform: none; font-size: 14px; letter-spacing: 0; }
.email-sheet-footer .action-validate { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.email-sheet-footer .action-validate iconify-icon { color: var(--primary-text); }

/* Bloc Règlements (factures) */
.doc-payments { margin: 18px 0; }
.payments-summary {
    margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.payments-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.payments-list { list-style: none; padding: 0; margin: 0; }
.payment-item {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 14px; margin-bottom: 8px; background: var(--bg-elevated);
}
.payment-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.payment-amount { font-weight: 700; }
.payment-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.action-add-payment {
    width: 100%; margin-top: 10px;
    background: rgba(16, 185, 129, 0.18); color: #047857;
}
.action-add-payment iconify-icon { color: #047857; }
:root[data-theme="dark"] .action-add-payment { background: rgba(16, 185, 129, 0.28); color: #34d399; }
:root[data-theme="dark"] .action-add-payment iconify-icon { color: #34d399; }
.payment-sheet { max-width: 480px; max-height: 85vh; }

/* Indicateur produit lié dans le formulaire ligne */
.line-product-link {
    display: flex; align-items: center; gap: 8px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.30);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px 0;
    font-size: 12px; color: var(--text-muted);
}
.line-product-link iconify-icon { font-size: 14px; color: var(--primary); }
.line-product-link button.link-btn {
    margin-left: auto; padding: 2px 6px; color: #b91c1c;
}
.line-product-link button.link-btn iconify-icon { color: #b91c1c; font-size: 16px; }
.line-cascade-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-muted);
    margin: 6px 0 8px; cursor: pointer;
}
.line-cascade-label input[type="checkbox"] { transform: scale(1.1); }

/* Bouton Changer destinataire */
.doc-recipient-change {
    margin-left: 10px; padding: 2px 8px;
    font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--primary);
    display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
}
.doc-recipient-change iconify-icon { font-size: 14px; }
.doc-recipient-picker {
    margin-top: 8px; padding: 8px;
    background: var(--bg); border: 1px solid var(--primary); border-radius: 8px;
}
.doc-recipient-picker .picker-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-elevated); color: var(--text); font-size: 14px; margin-bottom: 6px;
}
.doc-recipient-picker .picker-results { max-height: 240px; overflow-y: auto; }
.doc-recipient-picker .picker-result {
    padding: 8px 10px; cursor: pointer; border-radius: 6px;
}
.doc-recipient-picker .picker-result:hover { background: rgba(99, 102, 241, 0.10); }
.doc-recipient-picker .picker-result .list-item-sub { font-size: 11px; color: var(--text-muted); }
.doc-recipient-picker .picker-create {
    padding: 8px 10px; cursor: pointer; color: var(--primary);
    border-top: 1px dashed var(--border); margin-top: 4px;
}

.empty .empty-msg { color: var(--text-muted); margin-bottom: 12px; font-size: 14px; }
.empty .action-btn { display: inline-flex; }

/* Bouton préchargement offline */
.preload-block { margin: 24px 12px 12px; text-align: center; }
.preload-btn {
    background: rgba(59, 130, 246, 0.18); color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.30);
    padding: 10px 18px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.preload-btn:disabled { opacity: 0.7; cursor: wait; }
.preload-btn iconify-icon { font-size: 18px; color: #1d4ed8; }
:root[data-theme="dark"] .preload-btn { background: rgba(59, 130, 246, 0.32); color: #93c5fd; }
:root[data-theme="dark"] .preload-btn iconify-icon { color: #93c5fd; }
.preload-progress {
    margin-top: 8px; height: 6px; background: var(--border);
    border-radius: 3px; overflow: hidden;
    width: 80%; max-width: 320px; display: inline-block;
}
.preload-bar { height: 100%; background: var(--primary); transition: width 0.3s ease; }
.preload-info { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Liste de destinataires email dans la modale relance */
.relance-recipients { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.relance-recipient-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); cursor: pointer; font-size: 13px;
}
.relance-recipient-row:has(input:checked) { background: rgba(99, 102, 241, 0.10); border-color: var(--primary); }
.relance-recipient-email { flex: 0 0 auto; font-weight: 600; }
.relance-recipient-label { flex: 1; color: var(--text-muted); font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relance-recipient-row .link-btn { padding: 2px 4px; }
.relance-recipient-row .link-btn iconify-icon { font-size: 14px; color: var(--text-muted); }

/* Contacts dans le bloc destinataire */
.doc-contacts { margin-top: 8px; }
.doc-contact-list { list-style: none; padding: 0; margin: 4px 0; }
.doc-contact-list li {
    padding: 4px 8px; margin-bottom: 4px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    font-size: 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.doc-contact-name { font-weight: 600; }
.doc-contact-meta { color: var(--text-muted); font-size: 11px; }
.doc-contact-form {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid var(--primary); border-radius: 8px;
    padding: 8px; margin-top: 6px;
}
.doc-contact-form .doc-input { font-size: 13px; padding: 6px 8px; }

/* Widget météo + agenda (home page) */
.home-brief {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 12px 0 16px;
}
@media (max-width: 480px) {
    .home-brief { grid-template-columns: 1fr; }
}
.brief-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}
.brief-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 700;
    margin-bottom: 6px;
}
.brief-header iconify-icon { font-size: 16px; }
.brief-line { font-size: 13px; }
.brief-temp { font-weight: 700; margin-right: 8px; }
.brief-alerts { margin: 4px 0 0; padding-left: 0; list-style: none; }
.brief-alerts li {
    font-size: 12px; color: #92400e;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 4px; padding: 2px 6px; margin-top: 3px;
}
.brief-events { margin: 0; padding-left: 0; list-style: none; }
.brief-events li {
    font-size: 12px; padding: 3px 0;
    border-bottom: 1px dashed var(--border);
    display: flex; flex-wrap: wrap; gap: 4px;
}
.brief-events li:last-child { border-bottom: none; }
.brief-event-time { font-weight: 700; flex: 0 0 auto; }
.brief-event-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brief-event-loc { font-size: 11px; color: var(--text-muted); width: 100%; }
.brief-empty { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.brief-error { color: #b91c1c; }

/* SSO Google button */
.sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px 18px; margin-bottom: 8px;
    border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px;
    border: 1px solid var(--border); background: #fff; color: #1f2937;
}
.sso-btn:disabled { opacity: 0.6; cursor: wait; }
.sso-btn:hover { background: #f3f4f6; }
:root[data-theme="dark"] .sso-btn { background: #1f2937; color: #f3f4f6; border-color: #374151; }
:root[data-theme="dark"] .sso-btn:hover { background: #374151; }
.sso-or {
    text-align: center; color: var(--text-muted);
    font-size: 12px; margin: 8px 0 12px;
}

/* Voyant état réseau + synchronisation (header) — meme taille que icon-btn */
.sync-indicator {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    cursor: default;
}
.sync-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.sync-green .sync-dot {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.sync-orange .sync-dot {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
    animation: sync-pulse 1.5s ease-in-out infinite;
}
.sync-red .sync-dot {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}
@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── Panneau Paramètres ─── */
.settings-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 20px 12px;
    overflow-y: auto;
}
.settings-panel {
    background: var(--bg-elevated);
    border-radius: 18px;
    width: 100%; max-width: 480px;
    padding: 8px 0 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 6px;
    border-bottom: 1px solid var(--border);
}
.settings-header h2 { font-size: 18px; font-weight: 700; }
.settings-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
}
.settings-section:last-child { border-bottom: none; }

/* Formulaire « Mon entreprise » : labels au-dessus, inputs pleine largeur */
.company-form label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin: 12px 0 4px;
}
.company-form > label:first-child { margin-top: 0; }
.company-form input[type="text"],
.company-form input[type="tel"],
.company-form input[type="url"],
.company-form input[type="email"],
.company-form input[type="file"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}
.company-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.settings-section h3 {
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.settings-warn {
    font-size: 12px; color: var(--warning); margin-top: 4px;
}

/* Cycle de travail dans le panneau Aide */
.help-cycle {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.help-cycle li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.help-cycle-num {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-text);
    font-weight: 800; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.help-cycle li small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* Stepper +/− pour la durée de session */
.ttl-stepper {
    display: flex; align-items: stretch; gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    max-width: 280px;
}
.ttl-stepper-btn {
    flex: 0 0 48px;
    border: none; background: var(--bg-elevated);
    border-radius: 8px;
    font-size: 22px; font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s, transform 0.1s;
}
.ttl-stepper-btn:hover { background: var(--primary); color: var(--primary-text); }
.ttl-stepper-btn:active { transform: scale(0.94); }
.ttl-stepper-value {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    color: var(--text);
    padding: 8px 12px;
}

/* Segment control 3-states (thème) — style tile : icône en haut, texte petit en dessous */
.seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 12px 6px; min-height: 64px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.seg-btn iconify-icon { font-size: 26px; line-height: 1; }
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-text);
    font-weight: 700;
}
.seg-btn.active iconify-icon { color: var(--primary-text); }

/* Variante « tile » du seg-row : icône dans un cadre carré + texte sous le
   cadre (même pattern que les tuiles du menu principal et des .action-btn).
   Utilisée pour la sélection du thème. */
.seg-row-tile .seg-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    flex-direction: column;
    gap: 6px;
    color: var(--text);
}
.seg-row-tile .seg-btn iconify-icon {
    display: block;
    width: 56px; height: 56px;
    box-sizing: border-box;
    padding: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    font-size: 32px;
    line-height: 1;
    color: var(--text);
}
.seg-row-tile .seg-btn span {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text);
}
.seg-row-tile .seg-btn.active iconify-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
}
.seg-row-tile .seg-btn.active span { color: var(--primary); font-weight: 700; }

/* Toggle row (sync auto) */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 0;
}
.toggle-row > span { display: flex; flex-direction: column; gap: 2px; }
.toggle-row strong { font-size: 14px; font-weight: 600; }
.toggle-row small { font-size: 12px; color: var(--text-muted); }
.toggle-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 44px; height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative; cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-row input[type="checkbox"]::before {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-row input[type="checkbox"]:checked { background: var(--primary); }
.toggle-row input[type="checkbox"]:checked::before { left: 22px; }

/* Grille d'actions du panneau Paramètres — réutilise .action-btn (style tile)
   mais légèrement plus petit que la fiche détail (font 11px, min-height 64px) */
.settings-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.settings-actions .action-btn {
    flex: none;
    /* Le nouveau pattern tile gère déjà min-height naturellement via iconify-icon 56px + caption */
}
.settings-actions.single { grid-template-columns: 1fr; }

/* Remise par ligne — bloc supplémentaire sous Quantité/Prix/TVA/Unité */
.line-discount {
    margin-top: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
    grid-template-columns: 1fr 1fr;  /* 2 colonnes seulement (% et XPF) */
}
.line-discount label { font-size: 11px; color: var(--text-muted); }

/* Badge verrouillé (après envoi/impression) */
.status-locked {
    background: rgba(245, 158, 11, 0.18); color: #92400e; cursor: pointer;
}
.status-locked iconify-icon { color: #92400e; }
:root[data-theme="dark"] .status-locked { background: rgba(245, 158, 11, 0.32); color: #fbbf24; }
:root[data-theme="dark"] .status-locked iconify-icon { color: #fbbf24; }

/* Variante « Verrouillé » (action-btn devenu un bouton tile-style ambre) */
.action-locked iconify-icon {
    background: rgba(245, 158, 11, 0.18);
    color: #92400e;
    border-color: rgba(245,158,11,0.32);
}
:root[data-theme="dark"] .action-locked iconify-icon {
    background: rgba(245, 158, 11, 0.32);
    color: #fbbf24;
}

/* Bouton remise globale sous les totaux */
.doc-totals-actions {
    margin-top: 8px; text-align: right;
}
.doc-totals-actions .link-btn {
    font-size: 12px; color: var(--primary);
    display: inline-flex; align-items: center; gap: 4px;
}

/* Bandeau offline — affiché quand body.net-offline (posé par device.js) */
.offline-banner {
    display: none;
    position: sticky; top: 0; z-index: 1000;
    background: #fef3c7; color: #92400e;
    padding: 8px 14px;
    font-size: 13px; font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #f59e0b;
    align-items: center; justify-content: center; gap: 8px;
}
.offline-banner iconify-icon { font-size: 18px; vertical-align: middle; }
body.net-offline .offline-banner { display: flex; }
:root[data-theme="dark"] .offline-banner {
    background: #78350f; color: #fef3c7; border-bottom-color: #f59e0b;
}

/* Mode déplacement des lignes */
.add-line-btn.reorder-active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.add-line-btn.reorder-active iconify-icon { color: var(--primary-text); }
.line-item.move-mode { background: rgba(99, 102, 241, 0.05); }
.line-item.move-selected {
    background: rgba(99, 102, 241, 0.18) !important;
    box-shadow: 0 0 0 2px var(--primary) inset;
}
.move-indicator {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; min-width: 28px; color: var(--text-muted);
}
.move-indicator iconify-icon { font-size: 22px; }
.line-item.move-selected .move-indicator { color: var(--primary); }

.line-edit-form {
    background: var(--bg-elevated); border: 2px solid var(--primary);
    border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
    box-shadow: var(--shadow);
}
.line-edit-form label { display: block; font-size: 12px; color: var(--text-muted); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.line-edit-form input, .line-edit-form textarea, .line-edit-form select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--bg); color: var(--text);
    font-size: 16px; min-height: 44px;
}
.line-edit-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    background-size: 16px; padding-right: 38px;
}
.line-edit-form textarea { min-height: 80px; max-height: 60vh; line-height: 1.45; resize: none; overflow: hidden; }
.line-type-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.line-type-selector label {
    flex: 0 0 auto;
    cursor: pointer; padding: 10px 16px;
    background: var(--bg); border: 2px solid var(--border);
    border-radius: 10px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0; text-transform: none; font-size: 13px; color: var(--text);
    font-weight: 600;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.line-type-selector label:has(input:checked) {
    border-color: var(--primary); background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}
/* Radio invisible mais cliquable au tap (display:none cassait le double-tap mobile) */
.line-type-selector input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.line-amounts {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.line-amounts > div { flex: 0 0 auto; }
/* Tailles par champ — basées sur le nombre de chiffres typique */
.line-amounts input.field-qty           { width: 5.5em; }   /* 3 chiffres + séparateur */
.line-amounts input.field-price         { width: 9em; }     /* 6 chiffres + séparateurs */
.line-amounts input.field-tva           { width: 4.5em; }   /* 2 chiffres */
.line-amounts input.field-discount-pct  { width: 5.5em; }   /* 3 chiffres */
.line-amounts input.field-discount-xpf  { width: 9em; }     /* 6 chiffres */
.line-amounts input[readonly] {
    background: rgba(127,127,127,0.08);
    color: var(--text);
    cursor: default;
    font-weight: 600;
    text-align: right;
}
.line-amounts > div.unit-cell { flex: 1 1 100%; }
.line-actions {
    display: flex; gap: 8px; margin-top: 16px;
}
/* Sous-formulaire ligne : boutons compacts (icône à côté du texte) au lieu
   du format tile vertical des actions principales. */
.line-actions .action-btn {
    flex-direction: row; min-height: 40px;
    padding: 8px 14px; gap: 8px; font-size: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.line-actions .action-btn iconify-icon {
    width: auto; height: auto;
    padding: 0; background: transparent; border: none; box-shadow: none;
    font-size: 18px;
}
.line-actions .action-btn span { text-transform: none; font-size: 14px; letter-spacing: 0; }
/* Variantes colorées : restaurer le tint sur le bouton entier */
.line-actions .action-pdf    { background: rgba(59, 130, 246, 0.14); color: var(--tile-blue); border-color: rgba(59,130,246,0.25); }
.line-actions .action-save   { background: rgba(16, 185, 129, 0.14); color: #059669;          border-color: rgba(16,185,129,0.25); }
.line-actions .action-edit   { background: rgba(249, 115, 22, 0.14); color: var(--tile-orange); border-color: rgba(249,115,22,0.25); }
.line-actions .action-delete { background: rgba(239, 68, 68, 0.14); color: var(--danger);    border-color: rgba(239,68,68,0.25); }
.line-actions .action-pdf iconify-icon, .line-actions .action-save iconify-icon, .line-actions .action-edit iconify-icon, .line-actions .action-delete iconify-icon { color: inherit; }

.action-cancel iconify-icon {
    background: rgba(107, 114, 128, 0.14);
    color: var(--text-muted);
    border-color: rgba(107,114,128,0.25);
}
.line-actions .action-cancel {
    background: rgba(107, 114, 128, 0.14);
    color: var(--text-muted);
    border-color: rgba(107,114,128,0.25);
}

.line-item { display: flex; align-items: center; gap: 8px; }
/* En mode édition, le <li> contient le formulaire bloc — on passe en
   colonne et on laisse le .line-edit-form interne dessiner sa propre bordure. */
.line-item.editing { display: block; padding: 0; background: transparent; box-shadow: none; }
.line-edit-inline { width: 100%; margin-bottom: 0; }
.line-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

.footer {
    text-align: center;
    padding: 24px 16px 32px;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 32px;
    border-top: 1px solid var(--border);
}
.field:last-child { border-bottom: none; }
.field-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.field-value { font-size: 16px; word-break: break-word; }

/* === Adaptations device === */

/* Low-tier : animations désactivées, padding réduit */
.dev-low * { transition: none !important; animation: none !important; }
.dev-low main { padding: 12px; }
.dev-low .tile { padding: 18px 12px; }

/* Mobile (< 768) : 3 colonnes tuiles (réduction taille demandée) */
.dev-mobile .tiles { grid-template-columns: 1fr 1fr 1fr; }

/* Tablet (768-1023) : 3 colonnes */
.dev-tablet .tiles { grid-template-columns: 1fr 1fr 1fr; }

/* Desktop (>= 1024) : 3 colonnes + plus de padding */
.dev-desktop .tiles { grid-template-columns: 1fr 1fr 1fr; }
.dev-desktop main { padding: 32px; max-width: 980px; }

/* No-touch : on peut rajouter hover */
.no-touch button.icon-btn:hover { background: var(--border); }
.no-touch .tile:hover { transform: translateY(-2px); }

/* === Adaptations réseau === */

/* Slow network : désactive transitions coûteuses, masque images non essentielles */
.net-slow * { transition: none !important; animation: none !important; }
.net-slow .img-decorative { display: none; }

/* Offline : badge visible en haut */
.net-offline body::before {
    content: 'Hors ligne';
    display: block;
    background: var(--danger);
    color: white;
    text-align: center;
    padding: 6px;
    font-size: 13px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* ─── Module Comptabilité — vue Banque ─── */
.bank-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}
.bank-balance { display: flex; flex-direction: column; gap: 2px; }
.bank-balance .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.bank-balance .value { font-size: 22px; font-weight: 700; }
.bank-section-title {
    font-size: 14px; font-weight: 600;
    margin: 16px 0 8px;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.bank-lines .bank-line {
    padding: 10px 12px;
    border-left: 3px solid var(--border);
    margin-bottom: 8px;
    border-radius: 8px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    display: block;
}
.bank-line-credit { border-left-color: #16a34a; }
.bank-line-debit { border-left-color: #dc2626; }
.bank-line-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-size: 13px;
}
.bank-line-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bank-line-amount {
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.bank-line-credit .bank-line-amount { color: #16a34a; }
.bank-line-debit .bank-line-amount { color: #dc2626; }
.bank-line-label {
    font-size: 13px; color: var(--text);
    margin-top: 4px; line-height: 1.3;
    word-break: break-word;
}
.bank-progress {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
}
.bank-progress p { font-size: 12px; color: var(--primary); margin-top: 6px; }
.bank-progress-bar {
    background: var(--border);
    height: 6px; border-radius: 3px; overflow: hidden;
}
.bank-progress-fill {
    background: var(--primary);
    height: 100%; transition: width 0.2s ease;
}

/* ─── Modal Rapprochement bancaire ─── */
.reconcile-list { padding: 0 4px; }
.reconcile-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "bank arrow invoice"
        "label label  label"
        "action action action"
        "feedback feedback feedback";
    gap: 6px 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.reconcile-row.rec-done   { border-color: #16a34a; background: rgba(16,185,129,0.06); }
.reconcile-row.rec-busy   { border-color: #f59e0b; }
.reconcile-row.rec-error  { border-color: #dc2626; background: rgba(239,68,68,0.06); }
.reconcile-bank-row {
    grid-area: bank;
    display: flex; flex-direction: column; gap: 2px;
}
.reconcile-date { font-size: 11px; color: var(--text-muted); }
.reconcile-amount { font-size: 16px; color: #16a34a; font-variant-numeric: tabular-nums; }
.reconcile-arrow { grid-area: arrow; align-self: center; font-size: 20px; color: var(--primary); }
.reconcile-invoice {
    grid-area: invoice;
    display: flex; flex-direction: column; gap: 2px; text-align: right;
}
.reconcile-invoice strong { font-size: 14px; }
.reconcile-invoice span { font-size: 12px; color: var(--text-muted); }
.reconcile-label {
    grid-area: label;
    font-size: 12px; color: var(--text-muted);
    word-break: break-word;
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}
.reconcile-status-badge {
    font-size: 11px; font-weight: 600;
    padding: 2px 6px; border-radius: 6px;
    align-self: flex-end;
}
.badge-full_payment   { background: rgba(16,185,129,0.14); color: #16a34a; }
.badge-partial_payment{ background: rgba(245,158,11,0.14); color: #c2410c; }
.badge-overpayment    { background: rgba(245,158,11,0.14); color: #c2410c; }
.badge-already_paid   { background: rgba(99,102,241,0.14); color: var(--primary); }
.reconcile-action { grid-area: action; margin-top: 4px; }
.reconcile-feedback { grid-area: feedback; font-size: 12px; margin-top: 4px; }
.reconcile-feedback-ok { color: #16a34a; }
.reconcile-feedback-ko { color: #dc2626; }

/* ─── Envois programmés (Paramètres) + datetime picker dans modale ─── */
.scheduled-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.scheduled-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "when btn" "label btn";
    gap: 2px 8px;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.scheduled-when { grid-area: when; font-weight: 600; color: var(--primary); }
.scheduled-label { grid-area: label; color: var(--text-muted); word-break: break-word; }
.scheduled-item .link-btn { grid-area: btn; align-self: center; }

/* Bloc programmation dans modale relance */
.schedule-row {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

/* ─── Historique CRM (timeline events) ─── */
.doc-events { margin-top: 24px; }
.event-timeline {
    display: flex; flex-direction: column;
    gap: 8px; margin-top: 8px;
}
.event-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
}
.event-icon {
    align-self: flex-start;
    font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.event-content { display: flex; flex-direction: column; gap: 2px; }
.event-date { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.event-label { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }
.event-note { font-size: 12px; color: var(--text-muted); white-space: pre-wrap; word-break: break-word; }
.event-actions { display: flex; gap: 2px; align-items: flex-start; }
.event-actions .link-btn iconify-icon { font-size: 16px; }

/* ─── Header icons compacts ─── */
button.icon-btn { padding: 8px 10px; min-width: 36px; min-height: 36px; }
.icon-btn iconify-icon { font-size: 18px; }
.sync-indicator { min-width: 36px; min-height: 36px; padding: 8px 10px; }

/* ─── Accordéons fiche détail ─── */
.acc {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.acc-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    min-height: 44px;
}
.acc-head:active { background: var(--bg); }
.acc-title {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.acc-summary {
    font-size: 13px; color: var(--text); font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.acc-chevron {
    font-size: 18px; color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.acc.open .acc-chevron { transform: rotate(180deg); }
.acc-body { padding: 6px 14px 14px; border-top: 1px solid var(--border); }

/* Doc-foot resserré */
.doc-foot { padding: 0 4px 16px; }
.doc-page { padding-bottom: 8px; }

/* ════════════════════════════════════════════════
   Adaptation responsive selon type d'appareil
   Classes posées par js/device.js :
     .dev-low / .dev-mobile / .dev-tablet / .dev-desktop
     .has-touch / .no-touch
   ════════════════════════════════════════════════ */

/* === Petits téléphones (< 380px ou dev-low) === */
html.dev-low main, html.dev-low .setup { padding: 12px 14px; }
html.dev-low .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
html.dev-low .tile-btn { min-height: 84px; }
html.dev-low .header { padding: 8px 12px; }
html.dev-low .greet { font-size: 20px; margin: 0; }
html.dev-low h2 { font-size: 17px; }
html.dev-low button, html.dev-low input { font-size: 16px; }

/* === Mobile standard (< 768px sans dev-low) === */
html.dev-mobile main { padding: 14px 16px; max-width: 100%; }
html.dev-mobile .tile-btn { min-height: 90px; }
html.dev-mobile .action-btn { min-height: 52px; }
html.dev-mobile .acc-head { padding: 12px 14px; min-height: 48px; }

/* === Tablette === */
html.dev-tablet main { padding: 22px 28px; max-width: 820px; }
html.dev-tablet .tiles { grid-template-columns: repeat(4, 1fr); gap: 14px; }
html.dev-tablet .tile-btn { min-height: 123px; }
html.dev-tablet .global-search-results { columns: 2; column-gap: 18px; }
html.dev-tablet .acc-body { padding: 12px 18px 16px; }

/* === Desktop === */
html.dev-desktop main { padding: 32px 40px; max-width: 1100px; }
html.dev-desktop .tiles { grid-template-columns: repeat(5, 1fr); gap: 16px; }
html.dev-desktop .tile-btn { min-height: 141px; }
html.dev-desktop .greet { font-size: 32px; letter-spacing: 2px; white-space: normal; overflow: visible; text-overflow: clip; }
html.dev-desktop h2 { font-size: 22px; }
html.dev-desktop .acc-body { padding: 16px 20px 20px; }
html.dev-desktop .home-search input { font-size: 16px; padding: 14px 18px; }

/* === Touch vs souris === */
/* Sur mouse-driven (no-touch), hover plus visible et boutons légèrement plus petits */
html.no-touch .tile-btn:hover { transform: translateY(-2px); }
html.no-touch .action-btn { min-height: 44px; }
html.no-touch .icon-btn { padding: 6px; }
/* Sur tactile, on garde des cibles 48px minimum (W3C WCAG) */
html.has-touch button, html.has-touch .action-btn, html.has-touch input { min-height: 48px; }
html.has-touch a.btn { padding: 14px 20px; min-height: 48px; }

/* === Orientation paysage sur petit écran (réduit padding vertical) === */
@media (max-height: 500px) and (orientation: landscape) {
    .header { padding: 6px 14px; }
    main { padding-top: 8px; padding-bottom: 8px; }
    .tile-btn { min-height: 70px; }
    .greet { display: none; } /* trop d'écran horizontal perdu */
}

/* === Très large écran (>= 1400px) === */
@media (min-width: 1400px) {
    html.dev-desktop main { max-width: 1280px; }
    html.dev-desktop .tiles { grid-template-columns: repeat(6, 1fr); }
}

/* ═══ Encaissement (tuile dédiée + vue compta liste) ═══ */
.encaiss-form { display: flex; flex-direction: column; gap: 4px; max-width: 560px; margin: 0 auto; padding: 0 4px 24px; }
.encaiss-form label { font-size: 13px; color: var(--text-muted); margin-top: 10px; margin-bottom: 2px; font-weight: 600; }
.encaiss-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.encaiss-modes button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px;
    background: var(--bg-tile); color: var(--text); border: 1.5px solid var(--border); border-radius: 12px;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; }
.encaiss-modes button:hover { border-color: var(--accent); }
.encaiss-modes button.active { background: var(--accent); color: #000; border-color: var(--accent); }
.encaiss-modes iconify-icon { font-size: 20px; }
.encaiss-source { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.encaiss-source button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px;
    background: var(--bg-tile); color: var(--text); border: 1.5px solid var(--border); border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer; position: relative; }
.encaiss-source button:hover { border-color: var(--accent); }
.encaiss-source button.active { background: var(--success-bg, #16a34a22); border-color: var(--success, #16a34a); color: var(--success, #16a34a); }
.encaiss-source iconify-icon { font-size: 22px; }
.encaiss-source .badge { background: var(--danger, #dc2626); color: #fff; border-radius: 10px; padding: 2px 8px;
    font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; }
.encaiss-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 4px;
    border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--bg-card, #0e1218); }
.encaiss-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
    background: var(--bg-tile); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .12s; }
.encaiss-item:hover { border-color: var(--accent); }
.encaiss-item.selected { background: var(--accent); color: #000; border-color: var(--accent); }
.encaiss-item-main { flex: 1; min-width: 0; }
.encaiss-item-ref { font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.encaiss-item-tier { font-size: 13px; color: var(--text-muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encaiss-item.selected .encaiss-item-tier { color: #333; }
.encaiss-item-date { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.encaiss-item.selected .encaiss-item-date { color: #555; }
.encaiss-status { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--bg); color: var(--text-muted); font-weight: 600; }
.encaiss-status.warn { background: #fbbf2420; color: #fbbf24; }
.encaiss-status.ok { background: #16a34a20; color: #16a34a; }
.encaiss-item-amount { text-align: right; min-width: 110px; }
.encaiss-amount-total { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.encaiss-amount-rest { font-size: 11px; color: var(--danger, #dc2626); margin-top: 2px; font-variant-numeric: tabular-nums; }
.encaiss-item.selected .encaiss-amount-rest { color: #7f1d1d; }
.encaiss-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; max-width: 560px; }
.encaiss-filters label { font-size: 13px; color: var(--text-muted); }
.encaiss-filters .doc-input { flex: 1; max-width: 220px; }
.encaiss-summary { font-size: 13px; color: var(--text-muted); margin: 6px 0 10px; max-width: 560px; }
.dso-stats { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; max-width: 560px; }
.dso-tile { flex: 1; min-width: 120px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.dso-tile-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.dso-tile-value { font-size: 17px; font-weight: 700; line-height: 1.2; }
.dso-tile-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.dso-tile-alert { border-color: #f59e0b; }
.dso-tile-alert .dso-tile-value { color: #b45309; }
@media (prefers-color-scheme: dark) { .dso-tile-alert .dso-tile-value { color: #fbbf24; } }
.dso-tile-ok .dso-tile-value { color: #16a34a; }
@media (prefers-color-scheme: dark) { .dso-tile-ok .dso-tile-value { color: #4ade80; } }

/* Alertes météo intégrées dans le widget compact en haut (sans bande séparée) */
.brief-weather-alerts {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--warning, #b45309);
    font-weight: 600;
    line-height: 1.25;
}
.brief-weather-alerts li {
    margin: 0;
}