:root { 
      /* Palette Pro SaaS (Slate) */
      --bg-app: #0f172a;       /* Fond principal très sombre */
      --bg-sidebar: #1e293b;   /* Sidebar légèrement plus claire */
      --bg-panel: #334155;     /* Fond des inputs */
      
      --border-subtle: #334155;
      --border-focus: #3b82f6;

      --text-main: #f8fafc;
      --text-secondary: #94a3b8;
      
      --primary: #3b82f6;      /* Bleu standard professionnel */
      --primary-hover: #2563eb;
      
      --success: #10b981;
      --danger: #ef4444;

      --radius: 6px; 
    }

    body { 
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-app);
      color: var(--text-main); 
      margin: 0; padding: 0; 
      height: 100vh; 
      display: flex; 
      overflow: hidden; 
    }

    /* --- SCROLLBAR --- */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-app); }
    ::-webkit-scrollbar-thumb { background: var(--bg-panel); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

    /* --- SIDEBAR --- */
    .sidebar {
      width: 320px; 
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-subtle);
      padding: 0; 
      display: flex; flex-direction: column;
      z-index: 10; 
      overflow-y: auto;
      box-shadow: 4px 0 24px rgba(0,0,0,0.2);
      flex-shrink: 0;
    }

    .sidebar-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border-subtle);
      background: var(--bg-sidebar);
      position: sticky; top: 0; z-index: 20;
    }

    .app-title {
      margin: 0; 
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      display: flex; align-items: center; gap: 10px;
    }

    .sidebar-content {
      padding: 24px;
      display: flex; flex-direction: column; gap: 24px;
      flex: 1; 
    }

    /* --- SIDEBAR FOOTER --- */
    .sidebar-footer {
      padding: 15px 24px;
      border-top: 1px solid var(--border-subtle);
      text-align: center;
      font-size: 0.75rem;
      color: var(--text-secondary);
      background: var(--bg-sidebar);
      margin-top: auto; 
    }

    /* --- ONGLETS --- */
    .tabs-nav {
      display: flex;
      background: #0f172a;
      padding: 3px;
      border-radius: var(--radius);
      border: 1px solid var(--border-subtle);
    }
    .tab-btn {
      flex: 1; 
      padding: 8px; 
      background: transparent; 
      border: none;
      color: var(--text-secondary); 
      cursor: pointer; 
      font-weight: 500;
      font-size: 0.85rem;
      border-radius: 4px; 
      transition: all 0.15s ease;
    }
    .tab-btn:hover { color: #fff; }
    .tab-btn.active { 
      background: var(--bg-panel);
      color: #fff; 
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }

    .tab-content { display: none; flex-direction: column; gap: 20px; height: 100%; }
    .tab-content.active { display: flex; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    /* --- FORMULAIRES --- */
    .control-group { display: flex; flex-direction: column; gap: 6px; }
    
    .range-header { display: flex; justify-content: space-between; align-items: center; }
    .range-header label, .control-group label { 
      font-weight: 500; font-size: 0.8rem; color: var(--text-secondary); 
    }
    .range-value { 
      font-size: 0.75rem; color: var(--text-main); font-family: monospace; 
      background: var(--bg-app); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--border-subtle);
    }

    /* Inputs Pro */
    input[type="text"], select { 
      padding: 10px 12px; 
      border-radius: var(--radius); 
      border: 1px solid var(--border-subtle); 
      background: var(--bg-app); 
      color: #fff; 
      outline: none; 
      font-size: 0.9rem;
      font-family: inherit;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    input[type="text"]:focus, select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
    }

    /* Sliders */
    input[type="range"] {
      -webkit-appearance: none; width: 100%; background: transparent; cursor: pointer; margin: 8px 0;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      width: 100%; height: 4px; background: var(--bg-panel); border-radius: 2px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%;
      background: var(--primary); margin-top: -6px; border: 2px solid var(--bg-sidebar);
      transition: transform 0.1s;
    }
    
    /* Checkbox & Radio */
    .checkbox-wrapper { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.85rem; user-select: none; color: var(--text-main); }
    .checkbox-wrapper input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
    
    .radio-group { display: flex; gap: 1px; background: var(--border-subtle); padding: 1px; border-radius: var(--radius); overflow: hidden; }
    .radio-option { flex: 1; position: relative; background: var(--bg-sidebar); }
    .radio-option input { position: absolute; opacity: 0; cursor: pointer; height: 100%; width: 100%; z-index: 2; margin: 0; }
    .radio-option span { 
      display: block; text-align: center; padding: 8px; 
      font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: 0.2s; color: var(--text-secondary);
    }
    .radio-option input:checked + span { background: var(--primary); color: #fff; }

    .divider { border: 0; border-top: 1px solid var(--border-subtle); width: 100%; margin: 5px 0; }

    /* --- BOUTONS --- */
    .actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
    button.action-btn { 
      padding: 10px; border-radius: var(--radius); border: 1px solid transparent; 
      font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.15s;
      display: flex; justify-content: center; align-items: center; gap: 8px;
    }
    
    .btn-print { background: var(--text-main); color: var(--bg-app); border: 1px solid var(--text-main); }
    .btn-print:hover { background: #e2e8f0; }

    .btn-download { background: transparent; color: var(--text-main); border: 1px solid var(--border-subtle); }
    .btn-download:hover { border-color: var(--text-secondary); background: var(--bg-panel); }

    /* Utils btns */
    #regenerateBatchBtn { background: var(--primary); color: white; }
    #regenerateBatchBtn:hover { background: var(--primary-hover); }
    
    #clearDataBtn { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: transparent; }
    #clearDataBtn:hover { background: rgba(239, 68, 68, 0.2); }

    /* --- IMPORT EXCEL --- */
    .drop-zone {
      border: 1px dashed var(--border-subtle);
      background: var(--bg-app);
      border-radius: var(--radius);
      padding: 30px 20px;
      text-align: center;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }
    .drop-zone:hover { border-color: var(--primary); color: var(--primary); background: rgba(59, 130, 246, 0.05); }
    
    .status-card {
        background: #064e3b; 
        border: 1px solid #059669;
        border-radius: var(--radius);
        padding: 12px;
        margin-top: 10px;
        display: none; 
    }

    /* --- PREVIEW ZONE --- */
    .main-content {
      flex: 1; 
      background: #020617; 
      background-image: radial-gradient(#1e293b 1px, transparent 1px);
      background-size: 20px 20px;
      display: flex; flex-direction: column; 
      position: relative;
      overflow: hidden; /* Important pour le scroll interne */
    }

    .toolbar-preview {
      position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px);
      padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-subtle);
      display: flex; align-items: center; gap: 15px; z-index: 50;
      color: white; font-size: 0.8rem;
    }
    
    /* Scroll wrapper pour centrer la feuille scalée */
    .preview-scroll-wrapper {
      width: 100%; height: 100%;
      overflow: auto;
      display: flex; justify-content: center; align-items: flex-start;
      padding: 80px 40px; /* Padding pour ne pas coller aux bords */
      box-sizing: border-box;
    }
    
    .sheet-transform-layer {
      transform-origin: top center;
      transition: transform 0.2s ease-out;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

    .sheet {
      background: white; color: black;
      display: flex; flex-direction: column; 
      /* Alignement FIXE pour éviter que le centrage ne bouge quand on ajoute du contenu */
      align-items: center; justify-content: flex-start; 
      position: relative; 
      box-sizing: border-box;
      padding: 10mm; /* Marge interne standard */
      
      /* DIMENSIONS FIXES STRICTES (Blockage) */
      overflow: hidden;
    }
    
    #canvas-target { 
      display: flex; justify-content: center; align-items: center; width: 100%; flex: 1; 
      /* On s'assure que le contenu peut scroller si besoin à l'intérieur mais pas casser la page */
    }
    #canvas-target.grid-mode { flex-wrap: wrap; align-content: flex-start; gap: 15px; }
    .barcode-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px; }
    
    #title-display { 
      font-family: 'Arial', sans-serif; font-weight: bold; text-align: center; 
      width: 100%; word-wrap: break-word; color: #000;
      margin-bottom: 20px; /* Espace stable sous le titre */
      line-height: 1.2;
    }
    
    /* Dimensions Papier Strictes */
    /* On utilise HEIGHT et pas MIN-HEIGHT pour bloquer le format */
    .sheet.a4.portrait  { width: 210mm; height: 297mm; } 
    .sheet.a4.landscape { width: 297mm; height: 210mm; }
    .sheet.a3.portrait  { width: 297mm; height: 420mm; }
    .sheet.a3.landscape { width: 420mm; height: 297mm; }
    
    #barcode-wrapper { width: 100%; display: flex; justify-content: center; height: 100%; }

    /* --- IMPRESSION (CORRECTIF MAJEUR) --- */
    @media print {
      /* Force l'imprimante à ne pas mettre de marge (le CSS gère tout) */
      @page { margin: 0; }
      
      body { 
          background: white; 
          height: auto; 
          overflow: visible;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
      }
      
      .sidebar, .help-btn, .toolbar-preview, .sidebar-footer { display: none !important; }
      
      /* Reset total des conteneurs de layout */
      .main-content, .preview-scroll-wrapper, .sheet-transform-layer { 
        position: static !important; 
        width: auto !important; 
        height: auto !important; 
        padding: 0 !important; 
        margin: 0 !important; 
        background: transparent !important; 
        display: block !important; 
        overflow: visible !important;
        transform: none !important; /* CRUCIAL: Annule le zoom écran */
        box-shadow: none !important;
        border: none !important;
      }

      .sheet { 
        /* On ne force PAS width:100% ici, on garde les dimensions mm définies par les classes (.a4, etc)
           Cela garantit que le layout flexbox interne a exactement le même espace qu'à l'écran. */
        margin: 0 !important; 
        page-break-after: always; 
        box-shadow: none !important; 
        border: none !important;
        overflow: hidden !important; /* On garde le blocage demandé */
      }
      
      /* Sécurité pour le layout grille en impression */
      #canvas-target.grid-mode { 
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
      }
      
      .barcode-item { break-inside: avoid; }
    }
#btn-tab-tools {
    /* 1. On enlève le style "lien" */
    text-decoration: none !important;
    color: white !important;

    /* 2. On active le mode "Flexbox" pour pouvoir centrer */
    display: inline-flex !important; /* Rend le lien capable de gérer l'alignement */
    
    /* 3. On centre le texte */
    justify-content: center; /* Centre horizontalement (gauche/droite) */
    align-items: center;     /* Centre verticalement (haut/bas) */
}

.help-btn {
  /* Positionnement Fixe */
  position: fixed;
  top: 15px;      
  right: 15px;
  z-index: 1000;
  
  /* Dimensions et forme */
  width: 44px;
  height: 44px;
  border-radius: 50%; /* Rend le bouton rond */
  padding: 0;
  
  /* Centrage de l'icône et apparence */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em; /* Taille de l'icône */
  
  /* Couleurs (utilisons un gris neutre pour qu'il ne soit pas trop intrusif) */
  background-color: #e2e8f0; /* Un gris clair */
  color: #475569; /* Gris foncé pour l'icône */
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}

/* Effet au survol */
.help-btn:hover {
  background-color: #cbd5e1; /* Gris légèrement plus foncé au survol */
  color: #1e293b; /* Icône plus foncée */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px); /* Petit effet de soulèvement */
}

/* Si vous préférez qu'il utilise votre couleur primaire pour être plus visible */
/* .help-btn {
    ...
    background-color: var(--color-primary, #3b82f6);
    color: white;
    ...
}

  /* ---------------------------------- */
/* Styles pour la Modale d'Aide (Help Modal) */
/* ---------------------------------- */

/* Masque et positionne la modale sur tout l'écran */
.modal-overlay {
  display: none; /* Cache la modale par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
  z-index: 2000; /* Doit être au-dessus du bouton d'aide (z-index: 1000) */
  backdrop-filter: blur(4px); /* Effet de flou moderne */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* Fait apparaître la modale */
.modal-overlay.open {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

/* Le contenu intérieur de la fenêtre */
.modal-content {
  background-color: var(--color-background, #fff); /* Fond blanc/clair */
  color: var(--color-text, #1e293b);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px; /* Largeur maximale pour les grands écrans */
  transform: translateY(-50px);
  transition: transform 0.3s ease-out;
}

.modal-overlay.open .modal-content {
  transform: translateY(0);
}

/* En-tête de la modale */
.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2em;
}

/* Bouton de fermeture (X) */
.close-btn {
  background: none;
  border: none;
  font-size: 1.8em;
  color: var(--color-text-subtle, #94a3b8);
  cursor: pointer;
  padding: 0 5px;
  transition: color 0.2s;
}

.close-btn:hover {
  color: var(--color-danger, #ef4444);
}

/* Corps de la modale */
.modal-body {
  padding: 20px;
}

.modal-body h4 {
  color: var(--color-primary, #3b82f6);
  margin-top: 15px;
  margin-bottom: 5px;
}

.modal-body ul {
    margin-left: 20px;
    padding-left: 0;
}
.modal-body li {
    margin-bottom: 8px;
    line-height: 1.4;
}  

/* Style global du footer */
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid #1e293b;
    background-color: #0f172a; /* Fond très sombre */
}

/* Texte "Créé par Micfri" en gris très clair */
.footer-author {
    color: #f1f5f9; /* Blanc cassé, très lisible */
    font-weight: 500;
}

.footer-separator {
    color: #475569;
    margin: 0 4px;
}

/* Style du lien "Signaler un bug" */
.bug-report-link {
    color: #fb7185 !important; /* Rose/Rouge vif pour le contraste */
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

/* Changement de couleur au survol pour l'interactivité */
.bug-report-link:hover {
    color: #ffffff !important;
    text-decoration: underline;
}