:root {
    --paper: #efe9dc;
    --paper-raised: #f7f3ea;
    --ink: #211a13;
    --ink-soft: #4a4038;
    --line: rgba(33, 26, 19, 0.16);
    --line-strong: rgba(33, 26, 19, 0.32);
    --blueprint: #8b5a2b;
    --blueprint-hover: #6e4722;
    --blueprint-soft: #8b5a2b1a;
    --timber: #8b5a2b;
    --timber-soft: #8b5a2b1a;
    --ok: #3e6b3e;
    --danger: #b91c1c;
    --danger-hover: #991b1b;
    --danger-bg: #fdeeee;
    --radius-sm: 6px;
    --radius: 10px;
    --shadow-sm: 0 1px 2px rgba(33, 26, 19, 0.06);
    --shadow: 0 4px 16px rgba(33, 26, 19, 0.08);
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1b1510;
        --paper-raised: #241c15;
        --ink: #ece5d8;
        --ink-soft: #b9ab9a;
        --line: rgba(236, 229, 216, 0.14);
        --line-strong: rgba(236, 229, 216, 0.3);
        --blueprint: #d19a5c;
        --blueprint-hover: #dfb27e;
        --blueprint-soft: #d19a5c26;
        --timber: #d19a5c;
        --timber-soft: #d19a5c26;
        --ok: #7fb87f;
        --danger: #e28080;
        --danger-hover: #e89999;
        --danger-bg: #b91c1c26;
    }
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    /* 1280px = max-w-screen-xl (Tailwind/Bootstrap xxl) — standard des apps
       data-heavy ; les tableaux (Factures 9 colonnes, dashboard) gagnent en
       clarté. Les formulaires gardent leurs propres max-width (480/720px). */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--ink);
}

h1 {
    font-size: 1.7rem;
    margin: 0 0 1.25rem;
}

h2 {
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

p {
    color: var(--ink-soft);
}

a {
    color: var(--blueprint);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- Navigation --- */

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    align-items: center;
    margin: 0 -1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--paper-raised);
    border-bottom: 2px solid var(--ink);
    box-shadow: var(--shadow-sm);
}

.nav-artisan {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--blueprint);
    padding: 0.5rem 0 0;
    margin: 0 0 1.6rem;
}

nav a, nav button.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.35rem 0.1rem;
    transition: color 0.15s ease;
}

/* Lien Tutoriel sous la barre de menu : aligné sous le logo OSSAB (même
   padding horizontal que la nav), juste sous la ligne de séparation. */
.nav-sous-menu {
    display: flex;
    align-items: center;
    margin: 0 -1.5rem 0;
    padding: 0.3rem 1.5rem 0.6rem;
    background: var(--paper-raised);
}

.nav-tutoriel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--blueprint);
    text-decoration: none;
    border-bottom: 1px dashed var(--blueprint-soft, var(--blueprint));
    padding-bottom: 0.1rem;
}

.nav-tutoriel:hover {
    color: var(--blueprint-hover, var(--blueprint));
    border-bottom-style: solid;
}

nav button.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-height: 0;
    margin-top: 0;
    font-family: inherit;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

nav a:hover, nav button.nav-link:hover {
    color: var(--blueprint);
    text-decoration: none;
}

nav a.brand {
    font-family: var(--font-body);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    /* OSSAB est UN mot : aucun gap flex entre les lettres (sinon le span de la
       lettre B devient un item séparé → « OSSA B »). */
    gap: 0;
    margin-right: 0.5rem;
}

nav a.brand:hover {
    color: var(--ink);
    text-decoration: none;
}

/* Wordmark OSSAB — la lettre B porte la couleur signal (identité « Chantier »). */
nav a.brand .brand-b {
    color: #EA580C;
}

/* Pied de page — même B signal que le wordmark de la nav. */
footer .brand-b {
    color: #EA580C;
}

nav .tagline {
    font-size: 0.85rem;
    color: var(--muted, #6b6b6b);
    border-left: 1px solid var(--muted, #6b6b6b);
    padding-left: 0.6rem;
}

nav a.nav-logout {
    margin-left: auto;
}

nav a.active, nav button.nav-link.active {
    color: var(--blueprint);
    font-weight: 700;
    border-bottom: 2px solid var(--blueprint);
}

/* --- Cards / sections --- */

section, .card {
    background: var(--paper-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

/* --- Forms --- */

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

form.form-wide {
    max-width: 720px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

label.checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 500;
}

label.checkbox input {
    margin-top: 0.2rem;
    width: auto;
}

fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.1rem 1.3rem;
    background: var(--paper);
}

fieldset fieldset {
    background: var(--paper-raised);
}

/* --- Sous-sections repliables (accordéons natifs, zéro JS) --- */
/* Regroupent les champs par objectif utilisateur (pattern apps data-heavy :
   l'essentiel toujours visible, les options secondaires dépliées à la demande). */

details.zone-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    padding: 0.4rem 0.9rem 0.9rem;
}

/* Dashboard : groupes de devis par client — un accordéon par client. */
.devis-par-client {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

details.zone-section > summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blueprint);
    padding: 0.35rem 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

details.zone-section > summary::-webkit-details-marker {
    display: none;
}

details.zone-section > summary::before {
    content: "▸";
    transition: transform 0.15s ease;
    font-size: 0.8rem;
}

details.zone-section[open] > summary::before {
    transform: rotate(90deg);
}

details.zone-section > summary:hover {
    color: var(--blueprint-strong, var(--blueprint));
}

details.zone-section > summary .section-tag {
    font-family: var(--font-sans, inherit);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    color: var(--timber);
}

details.zone-section .section-body {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 0.6rem;
    margin-top: 0.3rem;
    border-top: 1px dashed var(--line);
}

/* --- Import plan de masse (DXF) --- */

.import-plan {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    padding: 0.7rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* Dans l'accordéon optionnel, le cadre du .zone-section suffit — on neutralise
   le double cadre (border + padding) du bloc interne. */
.import-plan-details > .import-plan {
    border: none;
    border-radius: 0;
    padding: 0.6rem 0 0.2rem;
    background: none;
}

.import-plan .import-alerte {
    color: #8a6d1a;
    background: #fdf6e3;
    border: 1px solid #e8d9a0;
    border-radius: var(--radius);
    padding: 0.45rem 0.6rem;
    margin: 0;
}

.import-plan .import-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.import-succes {
    color: var(--timber);
    font-weight: 600;
    margin: 0;
}

.import-erreur {
    color: var(--danger, #c62828);
    margin: 0;
}

.import-ok {
    color: var(--timber);
    margin: 0;
}

/* --- Suivi des factures --- */

.table-factures {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.table-factures th, .table-factures td {
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}

.table-factures th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #666);
}

.table-factures .montant {
    text-align: right;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge-ok { background: #e8f5e9; color: #1b5e20; }
.badge-warning { background: #fdf6e3; color: #8a6d1a; }
.badge-danger { background: #fdecea; color: #c62828; }

.facture-impayee td { background: #fdf9f7; }
.facture-partielle td { background: #fefbf3; }

.facture-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.facture-actions .inline-form {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.facture-actions input[type="number"] {
    width: 7rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.facture-actions select {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* --- Signature électronique --- */

.dropdown-label {
    display: block;
    padding: 0.4rem 0.9rem 0.1rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft, #666);
    border-top: 1px solid var(--line);
    margin-top: 0.3rem;
}

.lien-signature {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

.lien-signature input {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
}

.muted {
    color: var(--ink-soft, #666);
    font-size: 0.9rem;
}

.signature-recap {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.signature-recap td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}

.signature-recap td:first-child {
    color: var(--ink-soft, #666);
    width: 40%;
}

.auth-card .signature-legale {
    font-size: 0.85rem;
    color: var(--ink-soft, #666);
    background: var(--paper-raised);
    border-left: 3px solid var(--timber);
    padding: 0.6rem 0.8rem;
    margin: 1rem 0;
    text-align: left;
}

.signature-preuve {
    font-size: 0.8rem;
    color: var(--ink-soft, #666);
    margin: 0.5rem 0 0;
    text-align: left;
}

.signature-preuve a {
    color: var(--accent, #EA580C);
    font-weight: 600;
}

.signature-preuve-warn {
    color: #b45309;
}

fieldset.form-fields-wrapper {
    border: none;
    padding: 0;
    background: none;
}

fieldset.form-fields-wrapper:disabled {
    opacity: 0.7;
}

fieldset.form-fields-wrapper:disabled input,
fieldset.form-fields-wrapper:disabled select {
    cursor: not-allowed;
}

legend {
    padding: 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--timber);
}

input, select, textarea {
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

input:hover, select:hover, textarea:hover {
    border-color: var(--blueprint);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blueprint);
    box-shadow: 0 0 0 3px var(--blueprint-soft);
}

input::placeholder, textarea::placeholder {
    color: var(--ink-soft);
    opacity: 0.7;
    font-weight: 400;
}

input:disabled, select:disabled, textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--paper);
}

input[type="checkbox"], input[type="radio"] {
    min-height: 0;
    padding: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--blueprint);
    border: none;
    box-shadow: none;
}

/* Visible keyboard focus on every interactive element */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--blueprint);
    outline-offset: 2px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--blueprint);
    box-shadow: 0 0 0 3px var(--blueprint-soft);
}

/* --- Buttons --- */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1.3;
    margin-top: 0.15rem;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    touch-action: manipulation;
    width: fit-content;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:hover, .btn:hover {
    border-color: var(--ink-soft);
    text-decoration: none;
}

button:active, .btn:active {
    transform: translateY(1px);
}

button[type="submit"], .btn-primary {
    color: var(--paper);
    background: var(--blueprint);
    border-color: var(--blueprint);
}

button[type="submit"]:hover, .btn-primary:hover {
    background: var(--blueprint-hover);
    border-color: var(--blueprint-hover);
}

.btn-danger {
    color: var(--danger);
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-danger:hover {
    color: var(--paper);
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-sm {
    min-height: 36px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
}

button:disabled, .btn:disabled {
    cursor: not-allowed;
    color: var(--ink-soft);
    background: var(--paper);
    border-color: var(--line);
}

button:disabled:hover, .btn:disabled:hover {
    color: var(--ink-soft);
    background: var(--paper);
    border-color: var(--line);
}

/* Inline update forms embedded in table cells */
.inline-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    max-width: none;
}

.inline-form input {
    width: 6rem;
}

.inline-form button {
    margin-top: 0;
}


body.page-fit footer {
    flex-shrink: 0;
}

/* --- Tables --- */

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

table.table-wrap-text {
    table-layout: fixed;
}

table.table-wrap-text th,
table.table-wrap-text td {
    white-space: normal;
    word-break: break-word;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}

th, td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    background: var(--paper);
}

td {
    font-variant-numeric: tabular-nums;
}

tbody tr:hover {
    background: var(--paper);
}

td:last-child {
    white-space: normal;
}

.truncate {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    white-space: normal;
}

[x-cloak] {
    display: none !important;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: fixed;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    background: var(--paper-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 0.35rem;
    /* Menu Actions long (devis) : scrollable si trop haut pour l'écran — le
       chevron .dropdown-more (sticky en bas) signale les actions restantes. */
    max-height: min(420px, 60vh);
    overflow-y: auto;
}

.dropdown-more {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    text-align: center;
    padding: 0.15rem 0 0.3rem;
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--paper-raised) 55%);
}

.dropdown-menu a,
.dropdown-menu .dropdown-action {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 0.85rem;
    white-space: nowrap;
}

.dropdown-menu .dropdown-action {
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu .dropdown-action:hover {
    background: var(--paper);
    color: var(--blueprint);
    text-decoration: none;
}

.dropdown-menu .dropdown-action-danger {
    color: var(--danger);
}

.dropdown-menu .dropdown-action-danger:hover {
    background: var(--danger-bg);
    color: var(--danger-hover);
}

/* --- Lists (client list on dashboard) --- */

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

ul li .actions {
    margin-left: auto;
}

/* --- Badges / status --- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
}

.badge-warning {
    color: var(--timber);
    background: var(--timber-soft);
}

/* --- Pré-vérification structurelle (Eurocode 5, indicative) --- */

.structure-verdict {
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--timber-soft);
    border-radius: 6px;
    background: var(--surface-soft, rgba(255, 255, 255, 0.03));
    font-size: 0.85rem;
}

.structure-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.structure-max {
    color: var(--timber);
    margin-bottom: 0.25rem;
}

.structure-verdict ul {
    margin: 0.25rem 0;
    padding-left: 1.1rem;
}

.structure-verdict li {
    margin: 0.15rem 0;
}

.structure-verdict small {
    color: var(--timber);
}

.structure-avertissement {
    margin-top: 0.4rem;
    font-style: italic;
    color: var(--timber);
    font-size: 0.78rem;
}

.ok {
    color: var(--ok);
}

.error {
    color: var(--danger);
    font-weight: 600;
}

.error:empty {
    display: none;
}

/* --- Auth pages (login / register) --- */

.auth-page {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--paper-raised);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

.auth-card form {
    max-width: none;
}

/* Variante large : page publique de signature de devis (récapitulatif + mention
   légale + formulaire) — 380px (login) est trop étroit pour ce contenu. */
.auth-card-large {
    max-width: 900px;
}

.auth-card p {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-size: 0.88rem;
    text-align: center;
}

/* Widget Cloudflare Turnstile (« Je ne suis pas un robot ») dans les
   formulaires login / register — centré, espacé du reste du formulaire. */
.turnstile-wrap {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0 0.3rem;
}

.turnstile-wrap .cf-turnstile {
    transform: scale(0.92);
    transform-origin: center;
}

/* --- Footer --- */

footer {
    margin: 2rem -1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--line);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-soft);
}

/* --- HTMX loading feedback --- */

.htmx-request,
.htmx-request * {
    cursor: progress;
}

button.htmx-request,
.btn.htmx-request {
    opacity: 0.6;
    pointer-events: none;
}

/* --- Motion & responsive --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

@media (max-width: 640px) {
    body {
        padding: 0 1rem 2.5rem;
    }

    nav {
        margin: 0 -1rem 0;
        padding: 0.85rem 1rem;
    }

    .nav-artisan {
        margin-bottom: 1.2rem;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.05rem;
    }

    section, .card {
        padding: 1.1rem;
    }

    fieldset {
        padding: 0.9rem 0.9rem 1.1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }

    /* Le lien de signature (URL longue en monospace) passe en colonne sur mobile. */
    .lien-signature {
        flex-direction: column;
    }

    .lien-signature .btn-primary {
        width: 100%;
    }

    form, form.form-wide {
        max-width: none;
    }

    footer {
        margin: 2rem -1rem 0;
        padding: 1.1rem 1rem;
    }
}

/* --- Pilotage (P0, 2026-08-05) : bande KPI + badge neutre + liste À traiter --- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
    margin: 0.9rem 0 1.4rem;
}

.kpi-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kpi-value {
    font-family: var(--font-mono);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}

.kpi-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blueprint);
}

.kpi-note {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.kpi-alert {
    color: var(--danger);
    font-weight: 600;
}

.badge-neutral {
    background: var(--line);
    color: var(--ink-soft);
}

ul.a-traiter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

ul.a-traiter li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    font-size: 0.88rem;
}

ul.a-traiter li a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
}

ul.a-traiter li a:hover {
    color: var(--blueprint);
    text-decoration: underline;
}

/* Badges pastel clairs (#e8f5e9 / #fdecea) écrasés en mode sombre */
@media (prefers-color-scheme: dark) {
    .badge-ok { background: #2f4a2f; color: #9ccc9c; }
    .badge-danger { background: #5c2b2b; color: #f0a8a8; }
    .badge-neutral { background: rgba(236, 229, 216, 0.12); color: #b9ab9a; }
}

/* --- Récap devis live (P1, 2026-08-05) : estimation sticky inspirée du
   « SmartChiffrage » d'ArtisanSmart (coût → marge → HT → TVA → TTC) --- */

.recap-live {
    position: sticky;
    top: 0.6rem;
    z-index: 5;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--timber);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.55rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    margin: 0.6rem 0;
}

.recap-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blueprint);
}

.recap-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 1.2rem;
}

.recap-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    color: var(--ink-soft);
}

.recap-m {
    font-family: var(--font-mono);
    color: var(--ink);
    white-space: nowrap;
}

.recap-sous-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    color: var(--ink);
    border-top: 1px dashed var(--line);
    padding-top: 0.25rem;
    margin-top: 0.1rem;
}

.recap-marge {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin: 0.15rem 0;
    white-space: nowrap;
}

.recap-marge input {
    width: 4.5rem;
    flex-shrink: 0;
    padding: 0.2rem 0.35rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper-raised);
    color: var(--ink);
    font-family: var(--font-mono);
    text-align: right;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.recap-marge input:hover {
    border-color: var(--blueprint);
}

.recap-marge input:focus {
    outline: none;
    border-color: var(--blueprint);
    box-shadow: 0 0 0 3px var(--blueprint-soft);
}

.recap-marge-val {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--timber);
    white-space: nowrap;
}

.recap-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.recap-grand-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--blueprint);
    border-top: 1px solid var(--line-strong);
    padding-top: 0.25rem;
}

.recap-note {
    color: var(--ink-soft);
    font-size: 0.7rem;
}

@media (max-width: 640px) {
    .recap-live {
        position: static;
    }
    .recap-grille {
        grid-template-columns: 1fr;
    }
}

/* --- P2/P3 (2026-08-05) : finitions (empty states, tableaux sticky) + nav mobile --- */

.nav-burger {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 1.15rem;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    align-items: center;
}

/* En-têtes de tableaux collants dans les conteneurs à défilement horizontal */
.table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ink-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.empty-state .btn-primary {
    margin-top: 0.4rem;
}

/* Touch targets ≥ 40px sur les liens de nav (usage mobile « chantier ») */
nav a, nav button.nav-link, .nav-burger {
    min-height: 40px;
}

@media (max-width: 640px) {
    .nav-burger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding-top: 0.6rem;
        margin-top: 0.4rem;
        border-top: 1px dashed var(--line);
    }

    .nav-links.open {
        display: flex;
    }

    nav a.nav-logout {
        margin-left: 0;
    }

    .tagline {
        display: none;
    }
}

/* --- Factures refonte (2026-08-05) : toolbar + encaissement en accordéon --- */

.page-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.6rem 0 0.9rem;
}

details.encaisser {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
    padding: 0.15rem 0.45rem;
}

details.encaisser summary {
    cursor: pointer;
    list-style: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blueprint);
    padding: 0.2rem 0;
    user-select: none;
}

details.encaisser summary::-webkit-details-marker {
    display: none;
}

details.encaisser .inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    padding: 0.35rem 0 0.25rem;
    border-top: 1px dashed var(--line);
    margin-top: 0.25rem;
}

/* --- Aide contextuelle : pastilles « ? » avec conseil au survol (2026-08-10) --- */

.aide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background: var(--blueprint);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    position: relative;
    user-select: none;
}

.aide .bulle {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.55rem);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    max-width: 70vw;
    padding: 0.55rem 0.7rem;
    background: var(--paper-raised);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    z-index: 120;
    white-space: normal;
    cursor: default;
}

.aide .bulle::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--line-strong);
}

.aide:hover .bulle,
.aide:focus .bulle,
.aide:focus-within .bulle {
    display: block;
}

.aide:focus {
    outline: 2px solid var(--blueprint);
    outline-offset: 2px;
}

/* Lien discret vers le tutoriel (bandeau / en-tête de page). */
.tutoriel-lien {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--blueprint);
    text-decoration: none;
    border-bottom: 1px dotted var(--blueprint);
    white-space: nowrap;
}

.tutoriel-lien:hover {
    color: var(--blueprint-hover, var(--blueprint));
    border-bottom-style: solid;
}

/* Lien vers le tutoriel sous les formulaires de connexion / inscription. */
.tuto-lien-connexion {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--line);
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.tuto-lien-connexion a {
    color: var(--blueprint);
    font-weight: 600;
    text-decoration: none;
}

.tuto-lien-connexion a:hover {
    text-decoration: underline;
}

/* --- Tutoriel : page publique pas-à-pas (2026-08-10) --- */

.tuto-page {
    max-width: 1150px;
    margin: 0 auto;
}

.tuto-entete {
    margin-bottom: 1.2rem;
}

.tuto-entete .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blueprint);
}

.tuto-entete h1 {
    font-family: var(--font-display);
    margin: 0.3rem 0 0.4rem;
}

.tuto-entete p {
    color: var(--ink-soft);
    max-width: 70ch;
}

.tuto-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}

.tuto-sommaire {
    position: sticky;
    top: 1rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.5rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.tuto-sommaire .tuto-sommaire-titre {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 0 0.6rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.4rem;
}

.tuto-sommaire ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tuto-sommaire li a {
    display: block;
    padding: 0.28rem 0.6rem;
    border-radius: 4px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.86rem;
    line-height: 1.3;
}

.tuto-sommaire li a:hover,
.tuto-sommaire li a.actif {
    background: var(--blueprint-soft, rgba(62, 123, 250, 0.08));
    color: var(--blueprint);
}

.tuto-sommaire li .tuto-sommaire-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--blueprint);
    margin-right: 0.3rem;
}

.tuto-contenu {
    min-width: 0;
}

.tuto-article {
    scroll-margin-top: 1.2rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}

.tuto-article .tuto-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blueprint);
}

.tuto-article h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0.15rem 0 0.5rem;
}

.tuto-article h3 {
    font-size: 0.98rem;
    margin: 1rem 0 0.35rem;
}

.tuto-article p,
.tuto-article li {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ink);
}

.tuto-article ul,
.tuto-article ol {
    margin: 0.4rem 0 0.8rem;
    padding-left: 1.3rem;
}

.tuto-article li {
    margin-bottom: 0.3rem;
}

.tuto-article code {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
}

.tuto-article .tuto-astuce {
    background: var(--timber-soft, rgba(180, 120, 40, 0.1));
    border-left: 3px solid var(--timber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.55rem 0.8rem;
    margin: 0.7rem 0;
    font-size: 0.85rem;
}

.tuto-article .tuto-astuce strong {
    color: var(--timber);
}

.tuto-article .tuto-alerte {
    background: var(--danger-bg, rgba(200, 60, 40, 0.08));
    border-left: 3px solid var(--danger);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.55rem 0.8rem;
    margin: 0.7rem 0;
    font-size: 0.85rem;
}

.tuto-article .tuto-alerte strong {
    color: var(--danger);
}

.tuto-nav {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--line);
    font-size: 0.88rem;
}

.tuto-nav a {
    color: var(--blueprint);
    text-decoration: none;
    font-weight: 600;
}

.tuto-nav a:hover {
    text-decoration: underline;
}

.tuto-nav .tuto-nav-vide {
    visibility: hidden;
}

@media (max-width: 860px) {
    .tuto-layout {
        grid-template-columns: 1fr;
    }
    .tuto-sommaire {
        position: static;
        max-height: none;
    }
    .tuto-sommaire ol {
        columns: 2;
        column-gap: 0.8rem;
    }
}

@media (max-width: 560px) {
    .tuto-sommaire ol {
        columns: 1;
    }
    .tuto-nav {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* --- Choix du tarif (variante A, 2026-08-10) --- */

.rassurance-bandeau {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 1.4rem;
}

.rassurance-bandeau b {
    color: var(--ink);
}

.facturation {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.facturation-label {
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 600;
}

.facturation-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--paper-raised);
}

.billing-btn {
    border: none;
    background: transparent;
    padding: 0.5rem 1.1rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink-soft);
}

.billing-btn.actif {
    background: var(--ink);
    color: var(--paper);
}

.billing-btn .badge-offert {
    display: inline-block;
    background: #EA580C;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.12rem 0.35rem;
    border-radius: 3px;
    margin-left: 0.3rem;
    vertical-align: 1px;
}

.tarifs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    align-items: stretch;
}

.palier {
    background: var(--paper-raised);
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}

.palier.reco {
    border-color: #EA580C;
    box-shadow: 0 14px 40px rgba(25, 25, 25, 0.08);
}

.palier .reco-tag {
    position: absolute;
    top: -0.7rem;
    right: 1rem;
    background: #EA580C;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.18rem 0.55rem;
    border-radius: 3px;
}

.palier .nom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
}

.palier .public {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 0.15rem 0 0.6rem;
}

.palier .prix {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.palier .prix small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.palier .billing-note {
    font-size: 0.78rem;
    color: var(--ok);
    font-weight: 600;
    margin: 0.1rem 0 0.2rem;
}

.palier .sep {
    border: none;
    border-top: 1px dashed var(--line);
    margin: 0.8rem 0;
}

.palier ul {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.palier li {
    font-size: 0.85rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.palier li::before {
    content: "✓";
    color: var(--ok);
    font-weight: 700;
    flex: 0 0 auto;
}

.palier li.titre {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.palier li.titre::before {
    content: "";
}

.palier .cta {
    display: block;
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    width: 100%;
}

.palier .cta:hover {
    background: #EA580C;
    color: #fff;
}

.palier.reco .cta {
    background: #EA580C;
    color: #fff;
}

.palier.reco .cta:hover {
    background: #C2410C;
}

.faq {
    margin-top: 1.6rem;
}

.faq h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 0.7rem;
}

.faq details.faq-item {
    border: 1px solid var(--line);
    background: var(--paper-raised);
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "▾";
    color: #EA580C;
    margin-left: 0.5rem;
}

.faq p {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.plus-tard {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.plus-tard a {
    color: var(--ink-soft);
    text-decoration: underline dotted;
}

@media (max-width: 860px) {
    .tarifs {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}