/* ============================================
   VARIABLES CSS & THÈME
   ============================================ */
:root {
  /* Interface utilisateur (dark mode) */
  --ui-bg-primary: #0B1120;
  --ui-bg-secondary: #1A1F35;
  --ui-bg-elevated: rgba(255, 255, 255, 0.06);
  
  --ui-border: rgba(255, 255, 255, 0.12);
  --ui-border-focus: rgba(255, 255, 255, 0.30);
  
  --ui-text-primary: #EAF0FF;
  --ui-text-secondary: rgba(234, 240, 255, 0.72);
  --ui-text-muted: rgba(234, 240, 255, 0.50);
  
  --ui-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --ui-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --ui-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.45);
  
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  
  /* Couleurs d'accentuation */
  --accent-primary: #FF6600;
  --accent-secondary: #6D28D9;
  
  /* Document (contrat) — THÈME MODERNE */
  --doc-bg: #FFFFFF;
  --doc-bg-secondary: #F8FAFC;
  --doc-text: #0F172A;
  --doc-text-secondary: #475569;
  --doc-text-muted: #64748B;
  --doc-border: rgba(15, 23, 42, 0.10);
  --doc-accent: #3B82F6;
  
  /* Typographie */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-doc: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-doc-headings: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Entreprises (valeurs par défaut, modifiables via JS) */
  --entreprise-a-primary: #FF6600;
  --entreprise-a-secondary: #003366;
  --entreprise-b-primary: #6D28D9;
  --entreprise-b-secondary: #111827;
}

/* Import Google Fonts - Inter (modern professional font) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html, body {
  height: 100%;
}

body {
  font-family: var(--font-ui);
  color: var(--ui-text-primary);
  background: 
    radial-gradient(900px 700px at 10% 10%, rgba(255, 102, 0, 0.14), transparent 60%),
    radial-gradient(900px 700px at 85% 15%, rgba(109, 40, 217, 0.16), transparent 60%),
    linear-gradient(180deg, #070A14, var(--ui-bg-primary));
  line-height: 1.6;
  overflow-x: hidden;
}

/* ============================================
   BARRE DE NAVIGATION
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}

.navbar__container {
  max-width: 100%;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.navbar__logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.95), rgba(109, 40, 217, 0.70));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.30);
  flex-shrink: 0;
}

.navbar__text {
  min-width: 0;
}

.navbar__title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin: 0;
  color: var(--ui-text-primary);
}

.navbar__subtitle {
  font-size: 13px;
  color: var(--ui-text-secondary);
  margin: 2px 0 0 0;
}

.navbar__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================
   BOUTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

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

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

.btn--primary {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.95), rgba(255, 102, 0, 0.75));
  color: #0B1120;
  box-shadow: var(--ui-shadow-sm);
}

.btn--primary:hover {
  background: linear-gradient(135deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0.85));
}

.btn--secondary {
  background: var(--ui-bg-elevated);
  border-color: var(--ui-border);
  color: var(--ui-text-primary);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--ui-border-focus);
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.app-container {
  display: grid;
  grid-template-columns: 540px 1fr;
  min-height: calc(100vh - 80px);
}

@media (max-width: 1200px) {
  .app-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SIDEBAR (FORMULAIRE)
   ============================================ */
.sidebar {
  border-right: 1px solid var(--ui-border);
  background: rgba(11, 17, 32, 0.40);
  overflow: hidden;
}

.sidebar__scroll {
  height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 18px;
}

/* Scrollbar personnalisée */
.sidebar__scroll::-webkit-scrollbar {
  width: 8px;
}

.sidebar__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar__scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.sidebar__scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   SECTIONS DU FORMULAIRE
   ============================================ */
.form-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--ui-shadow-md);
}

.form-section--help {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.08), rgba(109, 40, 217, 0.06));
  border-color: rgba(255, 102, 0, 0.25);
}

.form-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ui-border);
}

.form-section__header i {
  font-size: 18px;
  color: var(--accent-primary);
}

.form-section__header h2 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin: 0;
  color: var(--ui-text-primary);
}

.form-section__header--entreprise-a i {
  color: var(--entreprise-a-primary);
}

.form-section__header--entreprise-b i {
  color: var(--entreprise-b-primary);
}

/* ============================================
   GRILLE DE FORMULAIRE
   ============================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.form-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-text-secondary);
}

.form-field label i {
  font-size: 12px;
  opacity: 0.7;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: rgba(12, 18, 36, 0.60);
  color: var(--ui-text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ui-text-muted);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--ui-border-focus);
  background: rgba(12, 18, 36, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.form-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-field small {
  font-size: 11px;
  color: var(--ui-text-muted);
  margin-top: -2px;
}

/* ============================================
   AIDE À L'EXPORT
   ============================================ */
.help-content {
  font-size: 13px;
  color: var(--ui-text-secondary);
  line-height: 1.6;
}

.help-content strong {
  color: var(--ui-text-primary);
}

.help-content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.help-content ul {
  margin: 4px 0;
  padding-left: 20px;
}

.help-content li {
  margin: 4px 0;
}

.help-content code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--accent-primary);
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.help-note {
  margin-top: 10px;
  padding: 10px;
  border-left: 3px solid var(--accent-primary);
  background: rgba(255, 102, 0, 0.08);
  border-radius: 4px;
}

.help-note i {
  color: var(--accent-primary);
  margin-right: 6px;
}

/* ============================================
   ZONE D'APERÇU
   ============================================ */
.preview-zone {
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.15);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-elevated);
  font-weight: 700;
  font-size: 13px;
}

.preview-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-text-secondary);
  font-size: 12px;
}

.preview-hint i {
  color: var(--accent-secondary);
}

/* ============================================
   CONTENEUR DOCUMENT
   ============================================ */
.document-container {
  background: var(--doc-bg);
  border-radius: 14px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

/* ============================================
   DOCUMENT (CONTRAT) — STYLE MODERNE
   ============================================ */
.document {
  font-family: var(--font-doc);
  font-size: 10pt;
  line-height: 1.7;
  color: var(--doc-text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.page {
  padding: 24mm 20mm;
  max-width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  page-break-after: always;
  break-after: page;
  background: var(--doc-bg);
}

.page:last-child {
  page-break-after: auto;
  break-after: auto;
  min-height: auto;
}

/* ============================================
   PAGE DE COUVERTURE — ULTRA-MODERNE
   ============================================ */
.cover-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 257mm;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(139, 92, 246, 0.02));
  position: relative;
}

/* Badge moderne en haut */
.cover-badge {
  position: absolute;
  top: 20mm;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--entreprise-a-primary), var(--entreprise-b-primary));
  color: #fff;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cover-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15mm;
  width: 100%;
  max-width: 170mm;
  margin-bottom: 25mm;
}

.cover-card {
  border: 1.5px solid var(--doc-border);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.90));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  min-height: 45mm;
  position: relative;
  overflow: hidden;
}

.cover-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--card-color), transparent);
}

.cover-card--entreprise-a {
  --card-color: var(--entreprise-a-primary);
}

.cover-card--entreprise-b {
  --card-color: var(--entreprise-b-primary);
}

.cover-logo {
  width: 100%;
  max-width: 55mm;
  height: auto;
  max-height: 20mm;
  object-fit: contain;
  margin-bottom: 10px;
}

.cover-logo-placeholder {
  width: 55mm;
  height: 20mm;
  border: 2px dashed rgba(15, 23, 42, 0.20);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9pt;
  color: var(--doc-text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.cover-card p {
  margin: 0 0 6px 0;
  font-size: 9.5pt;
  line-height: 1.6;
  color: var(--doc-text-secondary);
}

.cover-card p:last-child {
  margin: 0;
}

.cover-card strong {
  font-weight: 700;
  color: var(--doc-text);
}

.cover-main {
  text-align: center;
  margin: 0 0 25mm 0;
  max-width: 160mm;
}

.cover-title {
  font-family: var(--font-doc-headings);
  font-size: 32pt;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin: 0 0 6mm 0;
  line-height: 1.1;
  
  /* Gradient pour l'affichage à l'écran */
  background: linear-gradient(135deg, var(--entreprise-a-primary), var(--entreprise-b-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pour le PDF : utiliser une couleur solide */
@media print {
  .cover-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    
    /* Couleur violette (mélange des deux couleurs) */
    color: #8B5CF6 !important;
  }
}

.cover-subtitle {
  font-size: 13pt;
  color: var(--doc-text-secondary);
  margin: 0 0 12mm 0;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.cover-divider {
  width: 60mm;
  height: 4px;
  background: linear-gradient(90deg, var(--entreprise-a-primary), var(--entreprise-b-primary));
  margin: 0 auto 12mm auto;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
}

.cover-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm 8mm;
  max-width: 150mm;
  margin: 0 auto;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(139, 92, 246, 0.03));
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.cover-meta-item {
  text-align: center;
}

.cover-meta-label {
  font-size: 8.5pt;
  color: var(--doc-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
}

.cover-meta-value {
  font-size: 11pt;
  font-weight: 700;
  color: var(--doc-text);
}

/* ============================================
   EN-TÊTE CONTRAT (PAGES INTERNES) — ÉPURÉ
   ============================================ */
.document-header {
  margin-bottom: 10mm;
  padding-bottom: 6mm;
  border-bottom: 3px solid transparent;
  background: linear-gradient(90deg, var(--entreprise-a-primary), var(--entreprise-b-primary)) left bottom / 100% 3px no-repeat;
}

.document-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2mm;
}

.document-header__title {
  font-family: var(--font-doc-headings);
  font-size: 16pt;
  font-weight: 900;
  margin: 0;
  color: var(--doc-text);
  letter-spacing: -0.3px;
}

.document-header__ref {
  font-size: 9pt;
  color: var(--doc-text-muted);
  text-align: right;
  margin: 0;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
}

/* ============================================
   SECTION PARTIES — DESIGN CARTE MODERNE
   ============================================ */
.parties-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
  margin: 10mm 0;
}

.partie-card {
  border: 1.5px solid var(--doc-border);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
}

.partie-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--card-accent), transparent);
}

.partie-card--entreprise-a {
  --card-accent: var(--entreprise-a-primary);
}

.partie-card--entreprise-b {
  --card-accent: var(--entreprise-b-primary);
}

.partie-card__header {
  padding: 14px 16px;
  font-weight: 800;
  font-size: 11pt;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.04));
  border-bottom: 1px solid rgba(59, 130, 246, 0.12);
  color: var(--doc-text);
  letter-spacing: 0.3px;
}

.partie-card__body {
  padding: 14px 16px;
  font-size: 9.5pt;
  line-height: 1.7;
}

.partie-card__body p {
  margin: 0 0 8px 0;
  color: var(--doc-text-secondary);
}

.partie-card__body p:last-child {
  margin: 0;
}

.partie-card__body strong {
  font-weight: 700;
  color: var(--doc-text);
}

/* ============================================
   ARTICLES — STYLE MINIMALISTE MODERNE
   ============================================ */
.article {
  margin: 0 0 8mm 0;
  page-break-inside: avoid;
  break-inside: avoid;
}

.article__title {
  font-family: var(--font-doc-headings);
  font-size: 12pt;
  font-weight: 800;
  margin: 0 0 3mm 0;
  color: var(--doc-text);
  letter-spacing: 0.2px;
  padding-left: 14px;
  border-left: 4px solid;
  border-image: linear-gradient(180deg, var(--entreprise-a-primary), var(--entreprise-b-primary)) 1;
}

.article__content {
  font-size: 10pt;
  line-height: 1.75;
  text-align: justify;
  color: var(--doc-text-secondary);
}

.article__content p {
  margin: 0 0 2mm 0;
}

.article__content p:last-child {
  margin: 0;
}

.article__content strong {
  font-weight: 700;
  color: var(--doc-text);
}

.article__list {
  margin: 3mm 0 3mm 10mm;
  padding: 0;
  list-style-type: none;
}

.article__list li {
  margin: 0 0 2mm 0;
  padding-left: 20px;
  position: relative;
  color: var(--doc-text-secondary);
}

.article__list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--entreprise-a-primary);
  font-weight: 900;
}

.article__list li:last-child {
  margin: 0;
}

/* ============================================
   SECTION PÉRIMÈTRES — STYLE BADGE MODERNE
   ============================================ */
.perimetres-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
  margin: 10mm 0;
}

.perimetre-card {
  border: 1.5px solid var(--doc-border);
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.perimetre-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--card-accent);
}

.perimetre-card--entreprise-a {
  --card-accent: var(--entreprise-a-primary);
}

.perimetre-card--entreprise-b {
  --card-accent: var(--entreprise-b-primary);
}

.perimetre-card h4 {
  margin: 0 0 10px 0;
  font-size: 11pt;
  font-weight: 800;
  color: var(--doc-text);
  letter-spacing: 0.3px;
}

.perimetre-card ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 9.5pt;
  line-height: 1.8;
}

.perimetre-card li {
  margin: 0 0 6px 0;
  padding-left: 20px;
  position: relative;
  color: var(--doc-text-secondary);
}

.perimetre-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--card-accent);
  font-weight: 900;
  font-size: 11pt;
}

.perimetre-card li:last-child {
  margin: 0;
}

/* ============================================
   SECTION SIGNATURES — DESIGN SIGNATURE MODERNE
   ============================================ */
.signatures-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12mm;
  margin-top: 20mm;
}

.signature-card {
  border: 1.5px solid var(--doc-border);
  border-radius: 14px;
  padding: 16px;
  min-height: 40mm;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.signature-card h4 {
  margin: 0 0 4mm 0;
  font-size: 11pt;
  font-weight: 800;
  color: var(--doc-text);
  letter-spacing: 0.3px;
}

.signature-card__space {
  height: 22mm;
  border-bottom: 2px solid var(--doc-text-muted);
  margin: 4mm 0;
  position: relative;
}

.signature-card__space::after {
  content: 'Signature manuscrite';
  position: absolute;
  bottom: -18px;
  left: 0;
  font-size: 8pt;
  color: var(--doc-text-muted);
  font-style: italic;
}

.signature-card__footer {
  font-size: 8.5pt;
  color: var(--doc-text-secondary);
  text-align: center;
  margin-top: 6mm;
  line-height: 1.6;
}

/* ============================================
   IMPRESSION
   ============================================ */
@page {
  size: A4;
  margin: 0;
}

/* ============================================
   IMPRESSION
   ============================================ */
@page {
  size: A4;
  margin: 0;
}

@media print {
  html, body {
    background: #fff !important;
    margin: 0;
    padding: 0;
    width: 210mm;
    height: 297mm;
  }

  .no-print {
    display: none !important;
  }

  .app-container {
    grid-template-columns: 1fr;
  }

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

  .document-container {
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .page {
    max-width: 100%;
    padding: 20mm 18mm;
    page-break-after: always;
    break-after: page;
  }

  .page:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .article,
  .partie-card,
  .signature-card,
  .perimetre-card,
  .cover-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Forcer les couleurs et backgrounds à l'impression */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* S'assurer que les logos s'impriment */
  img, .cover-logo {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Préserver les gradients */
  .cover-title,
  .cover-divider,
  .document-header__accent {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ============================================
   OPTIMISATION PDF (html2pdf.js)
   ============================================ */
.document {
  /* Forcer la visibilité des backgrounds */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

.page {
  /* S'assurer que chaque page fait exactement 297mm de haut */
  min-height: 297mm;
  max-height: 297mm;
  box-sizing: border-box;
}

/* Forcer l'affichage des gradients dans le PDF */
[style*="gradient"],
[class*="gradient"] {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--ui-border);
  }

  .sidebar__scroll {
    height: auto;
    max-height: 60vh;
  }
}

@media (max-width: 768px) {
  .navbar__container {
    flex-direction: column;
    align-items: stretch;
  }

  .navbar__brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .navbar__actions {
    justify-content: center;
  }

  .cover-header,
  .parties-section,
  .perimetres-section,
  .signatures-section {
    grid-template-columns: 1fr;
  }

  .cover-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .preview-zone {
    padding: 10px;
  }

  .btn span {
    display: none;
  }
}