:root {
  --paper-bg: #ffffff;
  --syl-a: #1e40af; /* bleu sombre */
  --syl-b: #0f766e; /* teal (évite rouge/vert pur) */
  --conf-color: #b45309; /* ambre */
  --lh-multiplier: 1.6;
}

body { font-family: 'Outfit', sans-serif; background-color: #f8fafc; color: #0f172a; }

/* Font families */
.font-arial { font-family: Arial, sans-serif; }
.font-verdana { font-family: Verdana, sans-serif; }
.font-comic { font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; }
.font-dys { font-family: 'OpenDyslexic', sans-serif; }
.font-lexend { font-family: 'Lexend', sans-serif; }
.font-atkinson { font-family: 'Atkinson Hyperlegible', sans-serif; }

/* Sliders */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #3b82f6; margin-top: -6px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.1s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #e2e8f0; border-radius: 2px; }

/* A4 page */
.a4-page {
  width: 210mm; min-height: 297mm;
  background: var(--paper-bg); padding: 20mm;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
  margin: 0 auto; color: #000;
  overflow-wrap: break-word;
  text-align: justify;
}

/* Ruler effect (paragraph level) */
.ruler-effect p {
  background-image: linear-gradient(to bottom, transparent 50%, rgba(148,163,184,0.16) 50%);
  background-size: 100% calc(2em * var(--lh-multiplier, 1.6));
  background-attachment: local;
  background-position: 0 0.2em;
}

/* Syllable styling */
.syl-a { color: var(--syl-a); }
.syl-b { color: var(--syl-b); }
.syl-ua { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--syl-a); text-underline-offset: 0.18em; }
.syl-ub { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--syl-b); text-underline-offset: 0.18em; }
.syl-sep { opacity: .75; }

.conf-letter { font-weight: 900; color: var(--conf-color); }

/* Karaoke */
.karaoke-word { transition: background-color .12s ease; border-radius: 2px; padding: 0 1px; }
.karaoke-active { background-color: #fef08a; }

/* Reading window */
.reading-window {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,0.35);
}

/* Drag and drop */
.drag-active { border-color: #3b82f6 !important; background-color: #eff6ff !important; }

/* Print Footer (Hidden by default) */
#print-credit { display: none; }

/* Print */
@media print {
  body { background: white; }
  #sidebar, header, footer, .no-print { display: none !important; }
  #preview-container { width: 100%; padding: 0; margin: 0; height: auto; overflow: visible; }
  .a4-page { box-shadow: none; margin: 0; width: 100%; padding: 0; min-height: auto; }
  .reading-window { display:none !important; }
  
  /* Afficher le crédit uniquement à l'impression */
  #print-credit { 
    display: block !important; 
    margin-top: 30px; 
    text-align: center; 
    font-size: 10px; 
    color: #94a3b8; 
    font-family: sans-serif;
    page-break-inside: avoid;
  }
}