:root {
    --app-width: 720px;

    --bg: #f5f5f3;
    --surface: #ffffff;
    --surface-alt: #fafaf9;

    --text: #111111;
    --text-soft: #747474;

    --border: #e5e5e5;

    --primary: #111111;
    --primary-contrast: #ffffff;

    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;

    --shadow: 0 8px 24px rgba(17, 17, 17, 0.06);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
}

* {
    box-sizing: border-box;
}

/* Respect de l’attribut HTML hidden */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(245, 245, 243, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(229, 229, 229, 0.9);
}

.app-header-inner {
    max-width: var(--app-width);
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 1rem) var(--space-4) 1rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--primary);
    color: var(--primary-contrast);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow);
}

.app-brand-icon svg {
    width: 26px;
    height: 26px;
}

.app-brand-content {
    display: flex;
    flex-direction: column;
}

.app-brand-title {
    font-weight: 700;
    font-size: 1.05rem;
}

.app-brand-subtitle {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.app-main {
    width: 100%;
    max-width: var(--app-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.hero-card,
.feature-card,
.account-card,
.cta-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.hero-card {
    padding: var(--space-6);
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
}

.hero-card h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.1;
}

.hero-text {
    margin: 0 auto var(--space-5);
    max-width: 38rem;
    color: var(--text-soft);
    font-size: 1rem;
}

.hero-actions,
.cta-actions {
    display: grid;
    gap: var(--space-3);
}

.primary-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: 0.95rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--primary-contrast);
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.primary-action:hover {
    transform: translateY(-1px);
}

.primary-action:active {
    transform: translateY(0);
}

.primary-action.small {
    min-height: 52px;
}

.action-icon {
    font-size: 1.2rem;
}

.hero-note {
    margin-top: var(--space-4);
    color: var(--text-soft);
    font-size: 0.92rem;
}

.section-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.section-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.section-heading h2 {
    margin: 0;
    font-size: 1.5rem;
}

.features-grid {
    display: grid;
    gap: var(--space-4);
}

.feature-card {
    padding: var(--space-5);
}

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 1.35rem;
    margin-bottom: var(--space-3);
}

.feature-card h3 {
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
}

.feature-card p {
    margin: 0;
    color: var(--text-soft);
}

.account-card,
.cta-card {
    padding: var(--space-5);
}

.account-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.account-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.account-header h2,
.cta-card h2 {
    margin: 0 0 var(--space-1);
    font-size: 1.35rem;
}

.account-header p,
.cta-card p {
    margin: 0;
    color: var(--text-soft);
}

.account-list {
    margin: 0 0 var(--space-4);
    padding-left: 1.1rem;
    display: grid;
    gap: var(--space-2);
}

.secondary-button {
    width: 100%;
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.secondary-button:hover {
    background: #f0f0ee;
}

.account-note {
    margin-top: var(--space-3);
    color: var(--text-soft);
    font-size: 0.9rem;
}

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

.app-footer {
    margin-top: auto;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    text-align: center;
    color: var(--text-soft);
    font-size: 0.9rem;
}

@media (min-width: 640px) {

    .hero-actions,
    .cta-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {

    .hero-card {
        padding: var(--space-7);
    }

    .features-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* =========================================================
   DL FACTURATION — ÉDITEUR DEVIS / FACTURE
   Complément CSS à ajouter à la fin de app-fact.css
   ========================================================= */

.editor-body {
    background: var(--bg);
}

.app-back-link {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    flex-shrink: 0;
}

.app-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-header-action {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.app-header-action svg,
.app-back-link svg {
    width: 22px;
    height: 22px;
}

.app-progress {
    max-width: var(--app-width);
    margin: 0 auto;
    padding: 0 var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.app-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.app-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #ececea;
    overflow: hidden;
}

.app-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.app-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.step-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.step-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.step-heading h1 {
    margin: 0;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
}

.step-heading p {
    margin: 0;
    color: var(--text-soft);
}

.app-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.app-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.app-card-header h2 {
    margin: 0 0 var(--space-1);
    font-size: 1.15rem;
}

.app-card-header p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.app-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fields-grid {
    display: grid;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field-full {
    grid-column: 1 / -1;
}

.field label {
    font-weight: 600;
}

.field-help {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-soft);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
    width: 100%;
    min-height: 52px;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input:focus,
textarea:focus {
    outline: 2px solid rgba(17,17,17,0.12);
    outline-offset: 1px;
    border-color: #cfcfcf;
}

.radio-grid {
    display: grid;
    gap: var(--space-3);
}

.radio-grid.two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radio-card {
    position: relative;
}

.radio-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.radio-card label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    min-height: 92px;
    justify-content: center;
}

.radio-card input:checked + label {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(17,17,17,0.08);
}

.radio-title {
    font-weight: 700;
}

.radio-desc {
    color: var(--text-soft);
    font-size: 0.9rem;
}

.alert-card {
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    font-size: 0.95rem;
}

.alert-info {
    background: #fafaf9;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

.toggle-row p {
    margin: 0.2rem 0 0;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.switch {
    position: relative;
    width: 52px;
    height: 32px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: #d6d6d6;
    border-radius: 999px;
    transition: background .2s ease;
}

.switch-slider::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.switch input:checked + .switch-slider {
    background: #111111;
}

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

.preview-inline {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    border: 1px solid var(--border);
}

.preview-inline-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
}

.preview-inline-right strong {
    white-space: nowrap;
}

.upload-placeholder {
    width: 100%;
    min-height: 120px;
    border: 1px dashed #cfcfcf;
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--text-soft);
    cursor: pointer;
}

.upload-icon {
    font-size: 1.4rem;
}

.line-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: var(--surface-alt);
	margin-bottom: 1rem;
}

.line-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.line-badge {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--border);
}

.line-total {
    display: flex;
    justify-content: flex-end;
    font-size: 1rem;
	gap: 5px;
}

.add-line-btn {
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-lg);
    border: 1px dashed #c8c8c8;
    background: var(--surface-alt);
    font-weight: 700;
    cursor: pointer;
}

.delete-line-btn {
	border: 1px solid #ef4444;
	background: #fff;
	color: #dc2626;
	padding: 0.45rem 0.85rem;
	border-radius: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.delete-line-btn:hover {
	background: #fef2f2;
	color: #b91c1c;
}

.pdf-preview-card {
    gap: var(--space-4);
	background-color: white;
}

.pdf-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.pdf-preview-header p {
    margin: 0;
}

.pdf-preview-title {
    text-align: right;
}

.pdf-preview-title span {
    display: block;
    color: var(--text-soft);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.pdf-preview-title{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:.5rem;
}

.pdf-preview-logo{
	width:150px;
	height:150px;
	object-fit:cover;
	border-radius:12px;
	*border:1px solid var(--border);
	*background:#fff;
}

/* =========================================
   MODALE DE RECADRAGE LOGO
   ========================================= */

.logo-cropper-modal[hidden]{
	display:none !important;
}

.logo-cropper-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1rem;
	background:rgba(0,0,0,.55);
	z-index:99999;
}

.logo-cropper-modal .cropper-modal-content{
	width:min(92vw,560px);
	max-height:92vh;
	overflow:auto;
	background:#fff;
	border-radius:16px;
	padding:1rem;
	display:flex;
	flex-direction:column;
	gap:1rem;
	box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.logo-cropper-modal .cropper-modal-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:.75rem;
}

.logo-cropper-modal .cropper-modal-header h3{
	margin:0;
	font-size:1.05rem;
}

.logo-cropper-modal .cropper-close{
	border:0;
	background:transparent;
	font-size:1.25rem;
	line-height:1;
	cursor:pointer;
	padding:.25rem;
}

.logo-cropper-modal .cropper-body{
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	border-radius:12px;
	background:#f3f4f6;
}

.logo-cropper-modal .cropper-body img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

.logo-cropper-modal .cropper-actions{
	display:flex;
	justify-content:flex-end;
	gap:.75rem;
	flex-wrap:wrap;
}

.pdf-preview-block {
    display: flex;
    flex-direction: column;
}

.pdf-preview-block.client {
    text-align: right;
}

.pdf-preview-block p {
    margin: 0;
}

.pdf-preview-block.objet {
	padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

/* =====================================================
   BLOC OBJET + INFORMATIONS IMPORTANTES
   ===================================================== */

.pdf-preview-block.objet{
    gap:1rem;
    padding-bottom:var(--space-3);
    border-bottom:1px solid var(--border);
}

.pdf-objet-header{
    padding-bottom:.75rem;
    border-bottom:1px solid var(--border);
}

.pdf-objet-header strong{
    font-size:1rem;
    letter-spacing:.01em;
}

.pdf-objet-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.85rem 1rem;
}

.pdf-objet-row{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    min-width:0;
}

.pdf-objet-row.full{
    grid-column:1 / -1;
}

.pdf-objet-label{
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-soft);
}

.pdf-objet-value{
    font-weight:500;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.pdf-important-block{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fafaf9;
}

.pdf-important-header{
    padding-bottom:.6rem;
    border-bottom:1px solid var(--border);
}

.pdf-important-header strong{
    font-size:.98rem;
}

.pdf-important-period{
    margin:0;
    padding:.65rem .8rem;
    border-radius:10px;
    background:#ffffff;
    border:1px dashed var(--border);
    font-weight:600;
}

.pdf-important-content{
    color:var(--text);
    line-height:1.55;
    white-space:pre-line;
    overflow-wrap:anywhere;
    word-break:break-word;
}

@media (max-width:560px){

    .pdf-objet-grid{
        grid-template-columns:1fr;
    }

}

/* =====================================================
   BLOC PAIEMENT — BASE COMMUNE
   ===================================================== */

.pdf-preview-block.paiement{
    gap:1rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:14px;
    background:#ffffff;
}

.pdf-payment-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    padding-bottom:.75rem;
    border-bottom:1px solid var(--border);
}

.pdf-payment-header strong{
    font-size:1rem;
    letter-spacing:.01em;
}

.pdf-payment-icon{
    font-size:1.1rem;
    opacity:.85;
}

.pdf-payment-list{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.pdf-payment-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
}

.pdf-payment-label{
    color:var(--text-soft);
    font-size:.92rem;
    flex-shrink:0;
}

.pdf-payment-value{
    text-align:right;
    word-break:break-word;
    font-weight:500;
}

#preview-iban,
#preview-bic{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:1rem;
}

.payment-link-row{
    margin-top:.25rem;
    padding-top:.75rem;
    border-top:1px dashed var(--border);
}

.pdf-payment-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.5rem .9rem;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
}

.pdf-payment-link:hover{
    text-decoration:none;
}

@media (max-width:560px){

    .pdf-payment-row{
        flex-direction:column;
        gap:.25rem;
    }

    .pdf-payment-value{
        text-align:left;
    }

    .pdf-payment-link{
        width:100%;
    }
}

.pdf-preview-lines{
	display:flex;
	flex-direction:column;
	gap:.85rem;
}

.pdf-preview-line{
	display:grid;
	grid-template-columns:minmax(0,1fr) 64px 120px;
	column-gap:1rem;
	align-items:start;
	padding-bottom:.85rem;
	border-bottom:1px solid var(--border);
}

.pdf-preview-line.head{
	padding-bottom:.5rem;
	font-size:.82rem;
	font-weight:700;
	color:var(--text-soft);
	text-transform:uppercase;
	letter-spacing:.04em;
}

.pdf-preview-line.head .qty,
.pdf-preview-line.head .price{
	text-align:right;
}

.pdf-preview-line-main{
	min-width:0;
}

.pdf-preview-line-top{
	display:flex;
	align-items:flex-start;
	gap:.5rem;
	flex-wrap:wrap;
}

.pdf-preview-line-label{
	font-weight:600;
	line-height:1.35;
	word-break:break-word;
	overflow-wrap:anywhere;
}

.pdf-preview-line-description{
	margin:.45rem 0 0;
	padding-left:.75rem;
	color:var(--text-muted);
	font-size:.92rem;
	line-height:1.45;
	word-break: break-word;
	overflow-wrap:anywhere;
}

.pdf-preview-line-qty,
.pdf-preview-line-price{
	text-align:right;
	white-space:nowrap;
}

.pdf-preview-line-price strong{
	font-weight:700;
}

.pdf-preview-line-badge{
	display:inline-flex;
	align-items:center;
	padding:.15rem .55rem;
	border-radius:999px;
	font-size:.72rem;
	font-weight:600;
	line-height:1;
	border:1px solid transparent;
	white-space:nowrap;
}

.pdf-preview-line-badge.taxed{
	background:#eff6ff;
	color:#1d4ed8;
	border-color:#bfdbfe;
}

.pdf-preview-line-badge.exempt{
	background:#f3f4f6;
	color:#374151;
	border-color:#e5e7eb;
}

@media (max-width:640px){

	.pdf-preview-line{
		grid-template-columns:1fr;
		row-gap:.4rem;
	}

	.pdf-preview-line.head{
		display:none;
	}

	.pdf-preview-line-qty::before{
		content:'Qté : ';
		font-weight:600;
	}

	.pdf-preview-line-price::before{
		content:'Prix HT : ';
		font-weight:600;
	}

	.pdf-preview-line-qty,
	.pdf-preview-line-price{
		text-align:left;
	}

}

.pdf-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 1.15rem;
}

.pdf-preview-total-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.pdf-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdf-total-row.total {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 1.08rem;
}

.pdf-total-note {
    margin: 0.4rem 0 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.4;
}

.pdf-total-row.total-ht {
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
    margin-top: 0.35rem;
}

.pdf-total-row.discount span,
.pdf-total-row.discount strong {
    color: #b42318;
}

.summary-card {
    gap: var(--space-3);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-row.total {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: 1.1rem;
}

.signature-box {
    min-height: 140px;
    border: 1px dashed #cfcfcf;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2);
}

.signature-line {
    height: 1px;
    background: #bdbdbd;
}

.signature-box p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
}

.pdf-preview-validity{
    margin-top:1.25rem;
    font-size:.95rem;
}

.pdf-preview-signature{
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--border);
}

.pdf-signature-title{
    margin:0 0 1rem;
    font-weight:600;
}

.pdf-signature-box{
    min-height:120px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.pdf-signature-line{
    *width:220px;
    border-bottom:1px solid #111;
    margin-bottom:.5rem;
}

.pdf-signature-box p{
    margin:0;
    font-size:.9rem;
    color:var(--text-soft);
	text-align:right;
}

.pdf-preview-footer{
    margin-top:2rem;
    padding-top:1rem;
    border-top:1px solid var(--border);
    text-align:center;
    font-size:.82rem;
	
}

.pdf-preview-footer p{
    margin:0;
}

.editor-actions {
    position: sticky;
    bottom: 0;
    background: rgba(245,245,243,0.96);
    backdrop-filter: blur(10px);
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.primary-button,
.secondary-button {
    min-height: 52px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.primary-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
}

.secondary-button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

@media (min-width: 720px) {

    .fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .editor-actions {
        position: static;
        padding-bottom: 0;
    }
}

@media (max-width: 480px) {

    .radio-grid.two-cols {
        grid-template-columns: 1fr;
    }

    .app-card {
        padding: var(--space-4);
    }

    .hero-card {
        padding: var(--space-5);
    }
}

/* Affichage multi-ligne des adresses dans l'aperçu PDF */
#preview-company-address,
#preview-client-address {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Champ TVA désactivé */
input.is-disabled {
    background: #f3f3f3;
    color: #8a8a8a;
    cursor: not-allowed;
    opacity: 0.9;
}

/* Select TVA */
.vat-select {
    width: 100%;
    min-height: 52px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    font: inherit;
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.vat-select.is-disabled,
.vat-select:disabled {
    opacity: .6;
    cursor: not-allowed;
	background: var(--surface-elevated);
}

.vat-select:focus {
	outline: 2px solid rgba(17,17,17,0.12);
    outline-offset: 1px;
    border-color: #cfcfcf;
}

/* =====================================================
   EXPORT PDF
   ===================================================== */

.pdf-preview-card {
    width: 100%;
    max-width: 794px; /* largeur approximative A4 à 96 dpi */
    margin: 0 auto;
    background: #ffffff;
}

@media print {

    body {
        background: #ffffff;
    }

    .app-header,
    .editor-actions,
    .step-heading,
    .upload-placeholder,
    .cropper-modal {
        display: none !important;
    }

    .pdf-preview-card {
        box-shadow: none;
        border: none;
        margin: 0;
        max-width: none;
    }
	
	.pdf-preview-card::before,
    .pdf-preview-card::after{
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
	}
	
}

/* =====================================================
   THÈMES PDF
   ===================================================== */

.theme-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
}

.theme-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--surface);
    cursor:pointer;
}

.theme-card input{
    position:absolute;
    inset:0;
    opacity:0;
}

.theme-card input:checked + .theme-preview{
    outline:2px solid #111;
    outline-offset:2px;
}

.theme-card strong{
    font-size:.95rem;
}

.theme-card span{
    font-size:.85rem;
    color:var(--text-soft);
}

.theme-preview{
    width:100%;
    aspect-ratio:16/10;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
}

/* Aperçus miniatures */

.theme-preview-classic{
    background:
        linear-gradient(180deg,#ffffff 0 22%,#ffffff 22% 100%);
}

.theme-preview-studio{
    background:
        linear-gradient(180deg,#f4ece5 0 18%,#ffffff 18% 100%);
}

.theme-preview-atelier{
    background:
        linear-gradient(180deg,#d8c3b0 0 20%,#fbf7f2 20% 100%);
}

.theme-preview-executive{
    background:
        linear-gradient(180deg,#0f172a 0 22%,#ffffff 22% 100%);
}

.theme-preview-sage{
    background:
        linear-gradient(180deg,#8aa08f 0 22%,#f7faf7 22% 100%);
}

.theme-preview-signature{
    background:
        linear-gradient(180deg,#d97706 0 22%,#fff7ed 22% 100%);
}

/* Base commune */
.pdf-preview-card{
    position:relative;
    overflow:hidden;
}

/* =========================
   THÈME STUDIO
   ========================= */

.pdf-theme-studio{
    background:#fffdfb;
    color:#1f1f1f;
}

.pdf-theme-studio .pdf-preview-header{
    border-bottom:2px solid #d6b89b;
    padding-bottom:1rem;
}

.pdf-theme-studio .pdf-preview-title span{
    color:#9a6b44;
    font-weight:700;
    letter-spacing:.12em;
}

.pdf-theme-studio .pdf-preview-title strong{
    color:#111;
}

.pdf-theme-studio .pdf-preview-block.objet,
.pdf-theme-studio .pdf-preview-total-block,
.pdf-theme-studio .pdf-preview-signature,
.pdf-theme-studio .pdf-preview-footer{
    border-color:#ead8c8;
}

.pdf-theme-studio .pdf-important-block{
    background:#fcf6f1;
    border-color:#ead8c8;
}

.pdf-theme-studio .pdf-important-header{
    border-color:#ead8c8;
}

.pdf-theme-studio .pdf-important-period{
    background:#fffdfb;
    border-color:#d6b89b;
}

.pdf-theme-studio .pdf-preview-line{
    border-color:#f0e2d6;
}

.pdf-theme-studio .pdf-signature-line{
    border-color:#9a6b44;
}

.pdf-theme-studio::before{
    content:'';
    position:absolute;
    top:-80px;
    right:-80px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(154,107,68,.06);
}

/* =====================================================
   BLOC PAIEMENT — THÈME STUDIO
   ===================================================== */

.pdf-theme-studio .pdf-preview-block.paiement{
    background:#fff7ef;
    border-color:#e4c9ae;
}

.pdf-theme-studio .pdf-payment-header{
    border-color:#e4c9ae;
}

.pdf-theme-studio .pdf-payment-link{
    border-color:#d6b89b;
    color:#7a5334;
    background:#fffdfb;
}

/* =========================
   THÈME ATELIER
   ========================= */

.pdf-theme-atelier{
    background:#fffaf5;
    color:#2f241c;
}

.pdf-theme-atelier .pdf-preview-header{
    background:#efe3d5;
    margin:-1.5rem -1.5rem 1.5rem;
    padding:1.5rem;
    border-bottom:3px solid #b88a5a;
}

.pdf-theme-atelier .pdf-preview-title span{
    color:#8b5a2b;
    font-weight:700;
}

.pdf-theme-atelier .pdf-preview-block.objet{
    background:#fcf3ea;
    border:1px solid #e6cdb3;
    border-radius:14px;
    padding:1rem;
}

.pdf-theme-atelier .pdf-important-block{
    background:#fcf3ea;
    border-color:#e6cdb3;
}

.pdf-theme-atelier .pdf-important-header{
    border-color:#e6cdb3;
}

.pdf-theme-atelier .pdf-important-period{
    background:#fffaf5;
    border-color:#d6b89b;
}

.pdf-theme-atelier .pdf-preview-total-block{
    background:#fcf3ea;
    border:1px solid #e6cdb3;
    border-radius:14px;
    padding:1rem;
}

.pdf-theme-atelier .pdf-preview-line{
    border-color:#ecd8c6;
}

.pdf-theme-atelier .pdf-signature-line{
    border-color:#8b5a2b;
    border-bottom-width:2px;
}

.pdf-theme-atelier .pdf-preview-footer{
    border-color:#d9bfa4;
}

/* =====================================================
   BLOC PAIEMENT — THÈME ATELIER
   ===================================================== */

.pdf-theme-atelier .pdf-preview-block.paiement{
    background:#fcf3ea;
    border-color:#e6cdb3;
}

.pdf-theme-atelier .pdf-payment-header{
    border-color:#e6cdb3;
}

.pdf-theme-atelier .pdf-payment-link{
    border-color:#d8b18a;
    background:#fffaf5;
    color:#8b5a2b;
}

/* =========================
   THÈME EXECUTIVE
   ========================= */

.pdf-theme-executive{
    background:#ffffff;
    color:#111827;
}

.pdf-theme-executive .pdf-preview-header{
    background:#0f172a;
    color:#fff;
    margin:-1.5rem -1.5rem 1.5rem;
    padding:1.5rem;
    border-bottom:none;
}

.pdf-theme-executive .pdf-preview-header p,
.pdf-theme-executive .pdf-preview-header span,
.pdf-theme-executive .pdf-preview-header strong{
    color:#fff;
}

.pdf-theme-executive .pdf-preview-title span{
    color:#cbd5e1;
}

.pdf-theme-executive .pdf-preview-block strong{
    color:#0f172a;
}

.pdf-theme-executive .pdf-preview-block.objet,
.pdf-theme-executive .pdf-preview-total-block,
.pdf-theme-executive .pdf-preview-signature,
.pdf-theme-executive .pdf-preview-footer{
    border-color:#cbd5e1;
}

.pdf-theme-executive .pdf-important-block{
    background:#f8fafc;
    border-color:#cbd5e1;
}

.pdf-theme-executive .pdf-important-header{
    border-color:#cbd5e1;
}

.pdf-theme-executive .pdf-important-period{
    background:#ffffff;
    border-color:#94a3b8;
}

.pdf-theme-executive .pdf-preview-line{
    border-color:#e2e8f0;
}

.pdf-theme-executive .pdf-signature-line{
    border-color:#0f172a;
    border-bottom-width:2px;
}

.pdf-theme-executive .pdf-total-row.total{
    background:#f8fafc;
    padding:.9rem 1rem;
    border-radius:10px;
}

/* =====================================================
   BLOC PAIEMENT — THÈME EXECUTIVE
   ===================================================== */

.pdf-theme-executive .pdf-preview-block.paiement{
    background:#f8fafc;
    border-color:#cbd5e1;
}

.pdf-theme-executive .pdf-payment-header{
    border-color:#cbd5e1;
}

.pdf-theme-executive .pdf-payment-link{
    border-color:#94a3b8;
    background:#ffffff;
    color:#0f172a;
}

/* =========================
   THÈME SAUGE
   ========================= */

.pdf-theme-sage{
    background:#f7faf7;
    color:#243328;
}

.pdf-theme-sage .pdf-preview-header{
    border-bottom:2px solid #a7b9a8;
    padding-bottom:1rem;
}

.pdf-theme-sage .pdf-preview-title span{
    color:#5f7563;
    font-weight:700;
}

.pdf-theme-sage .pdf-preview-block.objet{
    background:#eef5ef;
    border:1px solid #d6e3d7;
    border-radius:12px;
    padding:1rem;
}

.pdf-theme-sage .pdf-important-block{
    background:#eef5ef;
    border-color:#d6e3d7;
}

.pdf-theme-sage .pdf-important-header{
    border-color:#d6e3d7;
}

.pdf-theme-sage .pdf-important-period{
    background:#f7faf7;
    border-color:#a7b9a8;
}

.pdf-theme-sage .pdf-preview-total-block{
    background:#eef5ef;
    border:1px solid #d6e3d7;
    border-radius:12px;
    padding:1rem;
}

.pdf-theme-sage .pdf-preview-line{
    border-color:#dce8dd;
}

.pdf-theme-sage .pdf-signature-line{
    border-color:#5f7563;
}

.pdf-theme-sage .pdf-preview-footer{
    border-color:#cddbcf;
}

.pdf-theme-sage::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 20% 15%, rgba(95,117,99,.05) 0 60px, transparent 60px),
        radial-gradient(circle at 85% 75%, rgba(95,117,99,.04) 0 90px, transparent 90px);
}

/* =====================================================
   BLOC PAIEMENT — THÈME SAUGE
   ===================================================== */

.pdf-theme-sage .pdf-preview-block.paiement{
    background:#eef5ef;
    border-color:#d6e3d7;
}

.pdf-theme-sage .pdf-payment-header{
    border-color:#d6e3d7;
}

.pdf-theme-sage .pdf-payment-link{
    border-color:#b7c8b9;
    background:#f7faf7;
    color:#405544;
}

/* =========================
   THÈME SIGNATURE 
   ========================= */

.pdf-theme-signature{
    background:#fff8f1;
    color:#2b2118;
}

.pdf-theme-signature .pdf-preview-header{
    background:linear-gradient(135deg,#d97706 0%, #f59e0b 100%);
    color:#fff;
    margin:-1.5rem -1.5rem 1.5rem;
    padding:1.75rem 1.5rem;
    border-bottom:none;
    position:relative;
    overflow:hidden;
}

.pdf-theme-signature .pdf-preview-header::after{
    content:'';
    position:absolute;
    right:-40px;
    top:-40px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.pdf-theme-signature .pdf-preview-header p,
.pdf-theme-signature .pdf-preview-header span,
.pdf-theme-signature .pdf-preview-header strong{
    color:#fff;
}

.pdf-theme-signature .pdf-preview-title span{
    color:#ffedd5;
    font-weight:700;
    letter-spacing:.12em;
}

.pdf-theme-signature .pdf-preview-title strong{
    font-size:1.25rem;
}

.pdf-theme-signature .pdf-preview-block{
    position:relative;
}

.pdf-theme-signature .pdf-preview-block strong{
    color:#c2410c;
    font-size:.96rem;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.pdf-theme-signature .pdf-preview-block.objet{
    background:#fff3e6;
    border:1px solid #f5c38a;
    border-radius:14px;
    padding:1rem;
}

.pdf-theme-signature .pdf-important-block{
    background:#fff3e6;
    border:1px solid #f5c38a;
}

.pdf-theme-signature .pdf-important-header{
    border-color:#f5c38a;
}

.pdf-theme-signature .pdf-important-period{
    background:#fff8f1;
    border-color:#f0b36a;
    color:#9a3412;
}

.pdf-theme-signature .pdf-important-header strong{
    color:#c2410c;
}

.pdf-theme-signature .pdf-preview-line{
    border-color:#f3d2ad;
}

.pdf-theme-signature .pdf-preview-line.head{
    color:#9a3412;
}

.pdf-theme-signature .pdf-preview-line-badge.taxed{
    background:#ffedd5;
    color:#9a3412;
    border-color:#fdba74;
}

.pdf-theme-signature .pdf-preview-line-badge.exempt{
    background:#fff7ed;
    color:#9a3412;
    border-color:#fed7aa;
}

.pdf-theme-signature .pdf-preview-total-block{
    background:#fff3e6;
    border:2px solid #f0b36a;
    border-radius:16px;
    padding:1rem;
}

.pdf-theme-signature .pdf-total-row.total{
    margin-top:.5rem;
    padding:.9rem 1rem;
    border-top:2px solid #d97706;
    background:#ffffff;
    border-radius:12px;
    color:#9a3412;
    font-size:1.15rem;
}

.pdf-theme-signature .pdf-total-row.total strong{
    font-size:1.2rem;
}

.pdf-theme-signature .pdf-total-note{
    color:#7c2d12;
}

.pdf-theme-signature .pdf-preview-legal{
    background:#fff7ed;
    border:1px solid #fed7aa;
    border-radius:14px;
    padding:1rem;
}

.pdf-theme-signature .pdf-preview-signature{
    border-top:2px solid #f0b36a;
    padding-top:1.5rem;
}

.pdf-theme-signature .pdf-signature-title{
    color:#9a3412;
    font-size:1rem;
}

.pdf-theme-signature .pdf-signature-line{
    border-bottom:2px solid #c2410c;
}

.pdf-theme-signature .pdf-signature-box p{
    color:#7c2d12;
}

.pdf-theme-signature .pdf-preview-footer{
    border-top:2px solid #f0b36a;
    color:#9a3412;
}

.pdf-theme-signature::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 12% 10%, rgba(217,119,6,.05) 0 70px, transparent 70px),
        radial-gradient(circle at 92% 82%, rgba(245,158,11,.06) 0 90px, transparent 90px);
}

/* =====================================================
   BLOC PAIEMENT — THÈME SIGNATURE
   ===================================================== */

.pdf-theme-signature .pdf-preview-block.paiement{
    background:#fff3e6;
    border:1px solid #f5c38a;
    border-radius:14px;
}

.pdf-theme-signature .pdf-payment-header{
    border-color:#f0b36a;
}

.pdf-theme-signature .pdf-payment-header strong{
    color:#c2410c;
}

.pdf-theme-signature .pdf-payment-label{
    color:#9a3412;
}

.pdf-theme-signature .pdf-payment-link{
    border-color:#f0b36a;
    background:#ffffff;
    color:#9a3412;
}

.pdf-theme-signature .payment-link-row{
    border-color:#f0b36a;
}

/* STRUCTURE COLONNE THEME */
@media (max-width:560px){
    .theme-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}