/* ============================================================
   style.css — Thème et styles de l'application
   Modifiez ce fichier pour personnaliser l'apparence.
   Variables disponibles dans :root pour personnalisation rapide.
   ============================================================ */

/* ---- PALETTE & TOKENS ---- */
:root {
  /* Couleurs principales */
  --blue-dark:    #2f3b8f;
  --blue-mid:     #4a5bbf;
  --blue-light:   #eef0fb;
  --blue-ultra:   #f5f6fd;
  --black:        #111111;
  --grey-text:    #444444;
  --grey-border:  #d8dce8;
  --white:        #ffffff;

  /* Couleur accent (boutons, liens actifs) */
  --accent:       var(--blue-dark);
  --accent-hover: var(--blue-mid);

  /* Panneau formulaire */
  --panel-bg:         #1c2340;
  --panel-text:       #c8ceea;
  --panel-input-bg:   #252d52;
  --panel-input-border: #2d3a6a;
  --panel-section-bg: #161c38;
  --panel-border:     #2d3660;
  --panel-label:      #7a85b5;
  --panel-title:      var(--blue-mid);

  /* Fond app */
  --app-bg: #e8eaf0;

  /* Document A4 */
  --doc-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --doc-size-base:  8.5pt;
  --doc-size-sm:    7pt;
  --doc-size-xs:    6pt;
  --doc-size-title: 10pt;
  --doc-lh: 1.55;

  /* Espacement éditorial (aussi actif en print via mm) */
  --space-category-before:   6mm;
  --space-category-after:    6mm;
  --space-title-to-desc:     4mm;
  --space-between-sections:  16mm;
  --space-before-footer:     16mm;
  --slash-col: 7mm;

  /* Marges par bloc */
  --gap-after-header:  8mm;
  --gap-offer:         0mm;
  --gap-services:      6mm;
  --gap-totals:       12mm;
  --gap-conditions:    9mm;
  --gap-payment:       9mm;
  --gap-signature:     4mm;

  /* ---- DASHBOARD ---- */
  --dash-bg:         #f0f2f8;
  --dash-card:       #ffffff;
  --dash-card-hover: #f5f6fd;
  --dash-header-bg:  #1c2340;
  --dash-header-txt: #ffffff;
  --dash-badge-draft:#4a5bbf;
  --dash-badge-sent: #2a9d4e;
  --dash-btn-new:    #2f3b8f;
  --dash-btn-new-h:  #4a5bbf;
  --dash-tbl-head:   #eef0fb;

  /* ---- LOGIN ---- */
  --login-bg:        #1c2340;
  --login-card:      #252d52;
  --login-input-bg:  #1a2044;
  --login-input-bdr: #3a4478;
  --login-btn:       #2f3b8f;
  --login-btn-h:     #4a5bbf;
  --login-txt:       #c8ceea;
  --login-label:     #8896d8;
}

/* ============================================================
   ZONES VISUELLES DASHBOARD & LOGIN
   (ne pas modifier la structure HTML, seulement les couleurs)
   ============================================================ */

/* --- LOGIN --- */
#loginScreen {
  background: var(--login-bg);
}
.login-card {
  background: var(--login-card);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.login-card h1 { color: var(--white); }
.login-card label { color: var(--login-label); }
.login-card input {
  background: var(--login-input-bg);
  border: 1px solid var(--login-input-bdr);
  color: var(--white);
  border-radius: 3px;
}
.login-card input:focus { border-color: var(--blue-mid); outline: none; }
.btn-login {
  background: var(--login-btn);
  color: var(--white);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.btn-login:hover { background: var(--login-btn-h); }
.login-error { color: #e06060; }

/* --- DASHBOARD --- */
#dashScreen {
  background: var(--dash-bg);
}
.dash-header {
  background: var(--dash-header-bg);
  color: var(--dash-header-txt);
}
.dash-logo-slash { color: var(--blue-mid); }
.btn-new-offer {
  background: var(--dash-btn-new);
  color: var(--white);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.btn-new-offer:hover { background: var(--dash-btn-new-h); }
.dash-table thead th { background: var(--dash-tbl-head); color: var(--blue-dark); }
.dash-table tbody tr:hover td { background: var(--dash-card-hover); cursor: pointer; }
.badge-draft {
  background: #eef0fb;
  color: var(--dash-badge-draft);
  border: 1px solid #c0c8f0;
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 600;
}
.badge-sent {
  background: #e6f7ed;
  color: var(--dash-badge-sent);
  border: 1px solid #a3dfb8;
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 600;
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 6px;
  border-radius: 3px;
  transition: background .15s;
}
.btn-icon:hover { background: rgba(0,0,0,.08); }
.btn-icon.danger:hover { background: #fde8e8; color: #c0392b; }

/* ===== STYLES ORIGINAUX DU DOCUMENT A4 ===== */

/* =========================================================
   VARIABLES GLOBALES & PALETTE
   ========================================================= */
:root {
  --blue-dark:    #2f3b8f;
  --blue-mid:     #4a5bbf;
  --blue-light:   #eef0fb;
  --blue-ultra:   #f5f6fd;
  --black:        #111111;
  --grey-text:    #444444;
  --grey-border:  #d8dce8;
  --white:        #ffffff;

  /* Espacements éditoriaux (aussi actifs en print via mm) */
  --space-category-before:    6mm;
  --space-category-after:     6mm;
  --space-title-to-desc:      4mm;
  --space-between-sections:   16mm;
  --space-before-footer:      16mm;
  /* Largeur de la colonne du slash "/" : aligne titres et descriptions */
  --slash-col: 7mm;

  /* ---- Marges réglables par grand bloc du document ----
     Ajustez ces valeurs pour contrôler la respiration verticale.
     Chaque variable = espace AU-DESSUS du bloc concerné. */
  --gap-after-header:   8mm;   /* après bloc agence/client → ligne bleue */
  --gap-offer:          0mm;   /* avant le bloc titre + intro de l'offre */
  --gap-services:       6mm;   /* avant la 1re catégorie de prestations */
  --gap-totals:        12mm;   /* avant le récapitulatif financier */
  --gap-conditions:     9mm;   /* avant les conditions générales */
  --gap-payment:        9mm;   /* avant infos paiement */
  --gap-signature:      4mm;   /* avant la signature prestataire */

  /* Typographie */
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --size-base:   8.5pt;
  --size-sm:     8pt;
  --size-xs:     6pt;
  --size-title:  10pt;
  --size-agency: 9pt;
  --lh-base: 1.55;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 11px; }
body {
  font-family: var(--font-body);
  background: #e8eaf0;
  color: var(--black);
  line-height: var(--lh-base);
}

/* =========================================================
   MISE EN PAGE ÉCRAN : SPLIT FORMULAIRE / APERÇU
   ========================================================= */
.screen-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 100vh;
  gap: 0;
}

/* ---------- PANNEAU FORMULAIRE ---------- */
.form-panel {
  background: #1c2340;
  color: #c8ceea;
  padding: 28px 22px 40px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}
.form-panel h1 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-panel h1 span.slash { color: var(--blue-mid); font-size: 20px; }
.form-section { margin-bottom: 22px; }
.form-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue-mid);
  border-bottom: 1px solid #2d3660;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.form-group { margin-bottom: 8px; }
.form-group label {
  display: block;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7a85b5;
  margin-bottom: 3px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: #252d52;
  border: 1px solid #2d3a6a;
  color: #dde3ff;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 3px;
  outline: none;
  transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--blue-mid); }
.form-group textarea { resize: vertical; min-height: 60px; line-height: 1.45; }

/* Ligne numéro d'offre + bouton générer */
.offer-number-row {
  display: flex;
  gap: 6px;
}
.offer-number-row input { flex: 1; }
.btn-gen-number {
  flex-shrink: 0;
  width: 34px;
  background: var(--blue-dark);
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, transform .3s;
}
.btn-gen-number:hover { background: var(--blue-mid); }
.btn-gen-number:active { transform: rotate(180deg); }

/* Carnet de collaborateurs */
.sig-hint {
  font-size: 9px;
  color: #6a74a0;
  margin-top: 4px;
}
.sig-preview-wrap {
  background: #252d52;
  border: 1px solid #2d3a6a;
  border-radius: 3px;
  padding: 8px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sig-preview {
  font-size: 10px;
  color: #6a74a0;
}
.sig-preview img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  /* damier discret pour visualiser la transparence */
  background-image:
    linear-gradient(45deg, #2d3a6a 25%, transparent 25%),
    linear-gradient(-45deg, #2d3a6a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2d3a6a 75%),
    linear-gradient(-45deg, transparent 75%, #2d3a6a 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.collab-add {
  background: #1a2044;
  border: 1px solid #2d3a6a;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}
.collab-add-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-mid);
  margin-bottom: 8px;
}
.btn-sig-upload-full {
  width: 100%;
  background: #252d52;
  color: #8896d8;
  border: 1px dashed #3a4478;
  border-radius: 3px;
  padding: 7px;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
}
.btn-sig-upload-full:hover { background: #2d3660; color: #aab6e8; }
.collab-add-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.btn-collab-save, .btn-collab-cancel {
  flex: 1;
  border: none;
  border-radius: 3px;
  padding: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.btn-collab-save { background: var(--blue-dark); color: #fff; }
.btn-collab-save:hover { background: var(--blue-mid); }
.btn-collab-cancel { background: #2d3a6a; color: #aab; }
.btn-collab-cancel:hover { background: #3a4478; }

/* Bloc catégorie dans le formulaire */
.category-block {
  border: 1px solid #34407a;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 14px;
  background: #161c38;
}
.category-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.category-bar-slash {
  color: var(--blue-mid);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.category-bar .cat-name {
  flex: 1;
  min-width: 0;
  background: #252d52;
  border: 1px solid #2d3a6a;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 7px 8px;
  border-radius: 3px;
  outline: none;
}
.category-bar .cat-name:focus { border-color: var(--blue-mid); }
.btn-remove-category {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: #3a1a2a;
  border: none;
  color: #e06060;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-remove-category:hover { background: #5a1a2a; }
.btn-add-service {
  font-size: 10px;
  padding: 6px;
  margin-top: 2px;
}

/* Prestation dans le formulaire (accordéon) */
.service-entry {
  background: #1a2044;
  border: 1px solid #2d3a6a;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
/* En-tête cliquable : caret + titre + prix + supprimer */
.service-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  user-select: none;
}
.service-head:hover { background: #20284e; }
.service-head-caret {
  flex-shrink: 0;
  color: var(--blue-mid);
  font-size: 11px;
  transition: transform .15s;
  transform: rotate(90deg); /* déplié = pointe vers le bas */
}
.service-entry.collapsed .service-head-caret {
  transform: rotate(0deg);  /* replié = pointe vers la droite */
}
.service-head-title {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: #dde3ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-head-price {
  flex-shrink: 0;
  font-size: 10px;
  color: #8896d8;
  font-variant-numeric: tabular-nums;
}
/* Corps dépliable */
.service-body {
  padding: 0 10px 10px;
}
.service-entry.collapsed .service-body {
  display: none;
}
.btn-remove-service {
  flex-shrink: 0;
  background: #3a1a2a;
  border: none;
  color: #e06060;
  font-size: 14px;
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.btn-remove-service:hover { background: #5a1a2a; }

/* Boutons formulaire */
.btn {
  background: #fff !important;
  border: 0 !important;
  padding: .5rem 1.25rem !important;
  color: var(--blue-dark) !important;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s ease-out;
}
.btn:hover{
  background: rgba(255,255,255,.8) !important;
}
.btn-add {
  background: #252d52;
  color: #8896d8;
  border: 1px dashed #3a4478;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.btn-add:hover { background: #2d3660; color: #aab6e8; }
.btn-update {
  background: var(--blue-dark);
  color: #fff;
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 12px;
  padding: 10px;
}
.btn-update:hover { background: var(--blue-mid); }
.btn-print {
  background: #111;
  color: #fff;
  justify-content: center;
  font-size: 12px;
  padding: 10px;
}
.btn-print:hover { background: #333; }

/* ---------- ZONE D'APERÇU ---------- */
.preview-area {
  padding: 32px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-label {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8890a8;
  margin-bottom: 18px;
  font-weight: 600;
}
.preview-pagecount {
  color: var(--blue-mid);
  font-weight: 700;
}

/* Conteneur qui porte les feuilles paginées */
.doc-stack {
  position: relative;
}

/* Pile de feuilles A4 (aperçu écran paginé) */
.pages-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.a4-sheet {
  width: 210mm;
  height: 297mm;
  background: var(--white);
  box-shadow: 0 4px 40px rgba(0,0,20,.18);
  padding: 12mm;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}
.a4-sheet .sheet-num {
  position: absolute;
  bottom: 6mm;
  left: 50%;
  font-size: var(-size-xs);
  color: var(--blue-dark);
  letter-spacing: .1em;
}

/* =========================================================
   DOCUMENT SOURCE (sert à l'impression + à la mesure)
   Caché à l'écran ; seul l'aperçu paginé est visible.
   ========================================================= */
.print-document {
  width: 210mm;
  min-height: 297mm;
  background: var(--white);
  box-shadow: 0 4px 40px rgba(0,0,20,.18);
  padding: 12mm;
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--black);
  line-height: var(--lh-base);
  position: relative;
}
/* À l'écran, on masque la source : on n'affiche que les feuilles paginées */
.preview-area .print-document {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
}

/* ---- EN-TÊTE PREMIÈRE PAGE ---- */
.first-page-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 25mm;
  margin-bottom: 10mm;
  break-inside: avoid;
  page-break-inside: avoid;
}

.page-header-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12mm;
  align-items: center;
  padding-bottom: 4mm;
  margin-bottom: 4mm;
}
.page-header-compact .phc-left {
  display: flex;
  flex-direction: column;
  gap: 2mm;
  font-size: var(--size-xs);
  color: var(--grey-text);
  line-height: 1.5;
}
.page-header-compact .phc-logo {
  width: 12mm;
  height: 12mm;
  background: url(images/hybride_design_symbole.png) no-repeat center/contain;
  flex-shrink: 0;
}
.page-header-compact .phc-right {
  text-align: right;
  font-size: var(--size-xs);
  color: var(--grey-text);
  line-height: 1.5;
}
.page-header-compact .phc-right .phc-company {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: var(--size-sm);
}

/* Colonne agence */
.agency-col {
  display: flex;
  flex-direction: column;
  gap: 5mm;
}
.agency-logo {
  width: 25mm;
  height: 30mm;
  background: url(images/hybride_design_logo.png) no-repeat;
  background-size: contain;
}
.agency-info {
  font-size: var(--size-sm);
  color: var(--grey-text);
  line-height: 1.65;
}
.agency-info strong {
  display: block;
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 3mm;
  margin-top: 3mm;
}

/* Colonne client */
.client-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: flex-start;
  margin-top: 34mm;
}
.client-block {
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
}
.client-row {
  font-size: var(--size-sm);
  color: var(--black);
  line-height: 1.5;
}
.client-row .slash {
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 12pt;
  line-height: 1;
  margin-top: .5mm;
  flex-shrink: 0;
}
.client-row .client-name-big {
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.2;
  margin-bottom: 4mm;
}
.client-row .client-text {
  font-size: var(--size-sm);
  color: var(--grey-text);
  line-height: 1.65;
}

/* Ligne de séparation */
.header-divider {
  border: none;
  border-top: 1.3px solid var(--blue-dark);
  margin: 5mm 0 7mm;
}

/* Méta offre */
.offer-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--space-title-to-desc);
}
.offer-meta-left {}
.offer-title-main {
  font-size: 12pt;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 0;
  line-height: 1.2;
}
.offer-meta-right {
  text-align: right;
  font-size: var(--size-sm);
  color: var(--grey-text);
  line-height: 1.7;
}
.offer-intro {
  font-size: var(--size-sm);
  color: var(--grey-text);
  margin-bottom: 0;
  line-height: 1.6;
  max-width: 155mm;
}
/* Bloc titre + description avec ligne bleue dessous */
.offer-intro-section {
  padding-bottom: 6mm;
  margin-top: var(--gap-offer);
  margin-bottom: var(--gap-services);
}

/* --- DRAG N DROP PRESTATIONS --- */

.service-drag-handle {
  cursor: move;
  padding: 0 6px;
  color: #999;
  user-select: none;
  touch-action: none;
}
.service-drag-handle:hover { color: #555; }

.service-entry.dragging {
  opacity: 0.4;
}
.service-entry.drag-over {
  border-top: 2px solid var(--blue-dark, #2563eb);
}

/* ---- BLOC PRESTATION ---- */
.services-list {
  margin-bottom: 0;
}
/* En-tête de catégorie (/ Design, / Webdesign) */
.category-header {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  font-size: 12pt;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--blue-light);
  margin-top: 10mm;
  margin-bottom: 5mm;
  /* slash aligné à x=0 comme les prestations ; le fond garde un peu
     d'air vertical, et déborde légèrement à gauche/droite pour la boîte */
  padding: 3mm 4mm 3mm 8mm;
  break-after: avoid;
  page-break-after: avoid;
  clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);
}
.category-header:first-child { margin-top: 0; }
.category-meta {
  margin-left: auto;            /* pousse le n° + date à droite */
  font-size: var(--size-sm);
  font-weight: 600;
  color: var(--blue-dark);
  white-space: nowrap;
  align-self: center;
}
.category-slash {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: 12pt;
  line-height: 1;
}
.offer-item {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0 8mm;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--space-category-before);
  padding-bottom: var(--space-category-after);
  padding-left: 4mm;
  border-top: 1px solid var(--grey-border);
  break-inside: avoid;
  page-break-inside: avoid;
}
.offer-item:first-child,
.offer-item-first {
  border-top: none;
  padding-top: 0;
}
.offer-item-body {
  display: flex;
  gap: 2.5mm;
}
.offer-item-maincol {
  flex: 1;
  min-width: 0;
}
.offer-item-header {
  margin-bottom: var(--space-title-to-desc);
  break-after: avoid;
  page-break-after: avoid;
}
.offer-item-slash {
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 12pt;
  line-height: 1.2;
}
.offer-item-title {
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.2;
  margin-bottom: var(--space-title-to-desc);
}
.offer-item-title sup {
  font-size: 7pt;
  vertical-align: super;
  color: var(--blue-dark);
  font-weight: 400;
  margin-left: .5mm;
}
.offer-item-desc {
  font-size: var(--size-sm);
  color: var(--grey-text);
  line-height: 1.65;
  white-space: pre-wrap;
}
.offer-item-price-col {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 1mm;
}
.offer-item-price {
  font-size: var(--size-sm);
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
  text-align: right;
}

/* ---- PIED DE DOCUMENT ---- */
.document-footer {
  margin-top: var(--space-before-footer);
  break-inside: avoid;
  page-break-inside: avoid;
}

/* Totaux */
.totals-block {
  margin-top: var(--gap-totals);   /* séparation avec la dernière prestation */
  margin-bottom: 0;
  /* Aligné sur le texte des titres de prestation (slash + gap) */
  padding-left: 6.5mm;
}
.total-row {
  display: flex;
  align-items: stretch;
  padding: 2.8mm 0;
  gap: 4mm;
}
.total-row.highlight {
  background: var(--blue-light);
  padding-left: 3mm;
  padding-right: 3mm;
  margin-left: -3mm;
  margin-right: -3mm;
}
.total-row.grand-total {
  background: var(--blue-ultra);
  padding: 3.5mm 3mm;
  margin-left: -3mm;
  margin-right: -3mm;
}
.total-slash {
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 11pt;
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
}
.total-label {
  font-size: var(--size-sm);
  color: var(--black);
  flex: 1;
  align-self: center;
}
.total-row.grand-total .total-label {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: var(--size-title);
}
.total-note {
  font-size: var(--size-sm);
  color: var(--grey-text);
  align-self: center;
  flex: 2;
  text-align: right;
  font-style: italic;
}
.admin-rate {
  font-size: var(--size-xs);
  font-weight: 400;
  color: var(--blue-mid);
}
.total-amount {
  font-size: var(--size-sm);
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
  align-self: center;
  text-align: right;
  min-width: 32mm;
}
.total-row.grand-total .total-amount {
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--blue-dark);
}

/* Conditions générales */
.conditions-block {
  margin-top: var(--gap-conditions);
  margin-bottom: 0;
  padding-top: 5mm;
  border-top: 1px solid var(--grey-border);
}
.conditions-title {
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 3mm;
}
.conditions-text {
  font-size: var(--size-xs);
  color: var(--grey-text);
  line-height: 1.55;
  white-space: pre-wrap;
}
.conditions-text strong { color: var(--black); font-weight: 700; }
.conditions-text sup { font-size: 6pt; vertical-align: super; }

/* ---- Conditions générales détaillées (fin de document, 1 page, 2 colonnes) ---- */
.cgv-full {
  margin-top: 0;
}
.cgv-header {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  font-size: 11pt;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--blue-light);
  padding: 3mm 4mm 3mm 6mm;
  margin-bottom: 4mm;
  clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);
}
/* Corps des CGV en deux colonnes, compact */
.cgv-body {
  column-count: 2;
  column-gap: 7mm;
}
.cgv-item {
  margin-bottom: 2.8mm;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.cgv-item-title {
  font-size: 6.5pt;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.8mm;
  break-after: avoid;
  page-break-after: avoid;
}
.cgv-item-body {
  font-size: 6pt;
  color: var(--grey-text);
  line-height: 1.4;
  white-space: pre-wrap;
  text-align: justify;
}

/* Pied inférieur : paiement + signature */
/* Informations de paiement (pleine largeur, à gauche) */
.payment-block {
  font-size: var(--size-xs);
  color: var(--grey-text);
  line-height: 1.65;
  margin-top: var(--gap-payment);
  margin-bottom: 0;
}
.payment-block .payment-title {
  display: flex; align-items: baseline; gap: 2mm;
  font-size: var(--size-sm); font-weight: 700; color: var(--blue-dark);
  margin-bottom: 2mm;
}
.payment-block .payment-title .slash { color: var(--blue-dark); font-size: 12pt; }
.payment-block strong { color: var(--black); }

/* Bloc signature prestataire — séparé des conditions et du paiement */
.signature-provider-block {
  display: flex;
  justify-content: flex-end;
  padding-top: 6mm;
  margin-top: var(--gap-signature);
  margin-bottom: 9mm;
  border-top: 1px solid var(--grey-border);
}
.signature-block {
  display: flex;
  flex-direction: column;
  /* Bloc aligné à droite (la zone signature ne bouge pas) */
  align-items: flex-end;
  gap: 0;
}
/* Nom + titre centrés sur la largeur de la zone signature */
.signature-name {
  font-weight: 700;
  color: var(--blue-dark);
  font-size: var(--size-title);
  line-height: 1.2;
  width: 185px;
  text-align: center;
}
.signature-title-label {
  color: var(--grey-text);
  font-size: var(--size-sm);
  width: 185px;
  text-align: center;
}
/* Zone de signature : largeur FIXE (185 px), seule la hauteur varie.
   Collée juste sous le texte, alignée à droite. */
.signature-area {
  width: 185px;
  min-height: 18mm;
  background: var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1mm;
  overflow: hidden;
}
/* Quand une signature image est chargée : fond transparent, image
   à la largeur de la zone, collée au texte du dessus. */
.signature-area.has-image {
  background: transparent;
  min-height: 0;
  height: auto;
}
.signature-area.has-image img {
  width: 185px;       /* largeur fixe de la zone signature */
  height: auto;       /* la hauteur s'ajuste, pas de déformation */
  display: block;
}

/* Ligne de signature client */
.client-signature-line {
  margin-top: 4mm;
  padding-top: 4mm;
}
.client-signature-label {
  font-size: var(--size-sm);
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 16mm;
}
.client-signature-label .slash { font-size: 12pt; margin-right: 2mm; }
.client-signature-rule {
  width: 100%;
  border: none;
  border-top: 1px dotted var(--blue-dark);
}

/* =========================================================
   RÈGLES PRINT
   ========================================================= */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html, body {
    margin: 0;
    padding: 0;
    background: white;
    font-size: 11px;
  }

  .screen-only,
  .form-panel,
  .preview-label,
  .print-document{ display: none !important; }

  #editorBar,
  #loginScreen,
  #dashScreen { display: none !important; }

  body.editor-mode .form-panel,
  body.editor-mode .preview-area {
    padding-top: 0 !important;
  }

  .screen-layout,
  .doc-stack,
  .preview-area,
  .pages-wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    grid-template-columns: none !important;
  }

  .preview-area {
    padding: 0;
    background: transparent;
  }

  .pages-wrap { gap: 0 !important; }

  .a4-sheet {
    box-shadow: none;
    margin: 0 auto;
    break-after: page;
    page-break-after: always;
  }
  .a4-sheet:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .offer-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .offer-item-header {
    break-after: avoid;
    page-break-after: avoid;
  }

  .document-footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cgv-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .cgv-item-title {
    break-after: avoid;
    page-break-after: avoid;
  }
}


/* ===== LOGIN ===== */
#loginScreen {
  position: fixed; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: var(--login-bg); z-index: 9999;
}
.login-card {
  width: 360px; padding: 40px 36px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.login-card h1 {
  font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 28px;
  display: flex; align-items: center; gap: 10px;
}
.login-card h1 .slash { color: var(--blue-mid); font-size: 22px; }
.login-card label {
  display: block; font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 3px;
}
.login-card input {
  width: 100%; font-size: 13px; padding: 8px 10px;
  margin-bottom: 14px; box-sizing: border-box;
  font-family: inherit;
}
.btn-login {
  width: 100%; padding: 10px; font-size: 13px;
  font-weight: 600; letter-spacing: .04em;
  transition: background .15s;
}
.login-error { font-size: 11px; margin-top: 10px; min-height: 16px; }

/* ===== DASHBOARD ===== */
#dashScreen {
  position: fixed; inset: 0; display: none;
  flex-direction: column; overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.dash-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px; flex-shrink: 0;
}
.dash-header h1 {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; flex: 1;
  display: flex; align-items: center; gap: 8px;
}
.dash-header h1 .dash-logo-slash { font-size: 20px; }
.dash-username {
  font-size: 11px; color: #8896d8; margin-right: 8px;
}
.btn-logout {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #c8ceea; font-size: 11px; padding: 5px 12px;
  border-radius: 3px; cursor: pointer; transition: background .15s;
}
.btn-logout:hover { background: rgba(255,255,255,.2); }
.btn-new-offer {
  font-size: 12px; font-weight: 600; padding: 8px 18px;
  transition: background .15s; letter-spacing: .04em;
}
.dash-body {
  flex: 1; overflow-y: auto; padding: 28px 32px;
}
.dash-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,20,.1);
  border-radius: 5px; overflow: hidden;
}
.dash-table thead th {
  padding: 10px 14px; text-align: left;
  font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
}
.dash-table tbody td {
  padding: 12px 14px; border-top: 1px solid #e8eaf0;
  vertical-align: middle; transition: background .1s;
}
.dash-table .col-actions { width: 120px; text-align: right; white-space: nowrap; }
.dash-table .col-date { width: 140px; color: #888; }
.dash-table .col-status { width: 90px; }
.dash-empty {
  text-align: center; padding: 60px 20px;
  color: #8896d8; font-size: 13px;
}
.dash-offer-name { font-weight: 600; color: #1c2340; }
.offer-name-input {
  background: transparent; border: 1px dashed transparent;
  font-weight: 600; color: #1c2340; font-size: 12px;
  font-family: inherit; padding: 2px 4px; border-radius: 2px;
  width: 100%; box-sizing: border-box;
  transition: border-color .15s;
}
.offer-name-input:hover { border-color: #c0c8f0; }
.offer-name-input:focus { outline: none; border-color: var(--blue-mid); background: #fff; }

/* ===== ÉDITEUR (barre du haut en mode édition) ===== */
#editorBar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px;
  background: var(--dash-header-bg); color: #fff; display: none;
  align-items: center; gap: 12px; padding: 0 18px;
  z-index: 1000; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#editorBar.visible { display: flex; }
.editor-offer-name {
  flex: 1; background: transparent; border: none;
  color: #fff; font-size: 13px; font-family: inherit;
  font-weight: 600; min-width: 0;
}
.editor-offer-name:focus { outline: 1px dashed rgba(255,255,255,.4); border-radius: 2px; }
.editor-status-select {
  background: var(--blue-dark);
  border: 0;
  padding: .5rem 1.25rem;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all .3s ease-out;
}
.save-status {
  font-size: 10px; color: #8896d8; min-width: 60px;
}

/* Décale le formulaire quand la barre éditeur est visible */
body.editor-mode .form-panel { padding-top: 56px; }
body.editor-mode .preview-area { padding-top: 56px; }