/* 
 * Sabily212 PDF Viewer - Styles CSS
 * Charte graphique Sabily212 + scroll snap robuste
 */

:root {
  --c-primary: #C75032;
  --c-primary-strong: #8C1C13;
  --c-accent: #E63946;
  --c-text: #262626;
  --c-text-muted: #595959;
  --c-bg: #FAF9F7;
  --c-surface: #EAE7E2;
  --c-surface-2: #F0F0F1;
  --c-border: #D9C7B6;
  --c-success-bg: #D9C7B6;
  --c-error-bg: #E63946;
  --c-white: #FFFFFF;
  --ff-heading: "Montserrat", system-ui, sans-serif;
  --ff-body: "Open Sans", system-ui, sans-serif;
}

/* =============== Container principal =============== */
.sabily-pdf-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* le scroll est dans .sabily-pdf-viewer */
  border: 2px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(199, 80, 50, 0.1);
  margin: 20px 0;
  font-family: var(--ff-body);
  animation: fadeInUp 0.5s ease-out;
}

/* =============== En-tête =============== */
.sabily-pdf-header {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-strong));
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.sabily-pdf-title {
  color: var(--c-white);
  font-family: var(--ff-heading);
  font-size: 1.2em;
  margin: 0;
  font-weight: 600;
}

/* =============== Contrôles =============== */
.sabily-pdf-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sabily-page-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
  font-size: 0.95em;
  font-weight: 600;
}

.sabily-page-info--left { order: -1; }

/* Champ "Page" dans le header */
.sabily-pdf-header .sabily-page-input {
  /* variables lues par certains thèmes */
  --theme-form-field-background-initial-color: var(--c-surface);
  --theme-form-field-border-initial-color: var(--c-border);
  --theme-form-text-initial-color: var(--c-text);

  width: 62px;
  height: 28px;
  text-align: right;
  padding: 3px 8px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font: 600 14px var(--ff-body);
  color: var(--c-text);
  background-color: var(--c-surface);
  outline: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* retirer les flèches du type=number */
.sabily-pdf-header .sabily-page-input::-webkit-outer-spin-button,
.sabily-pdf-header .sabily-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sabily-pdf-header .sabily-page-input[type=number] { -moz-appearance: textfield; }

/* Hover / Focus : fond blanc, bord accent, texte sombre */
.sabily-pdf-header .sabily-page-input:hover,
.sabily-pdf-header .sabily-page-input:focus {
  background-color: var(--c-white);
  border-color: var(--c-primary);
  color: var(--c-text);
  box-shadow: 0 0 0 2px rgba(199,80,50,0.25);
}

.sabily-page-sep,
.sabily-page-total {
  color: #fff;
  opacity: .95;
  font-weight: 700;
}

/* Bouton restant */
.sabily-btn {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-family: var(--ff-body);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
.sabily-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.sabily-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-surface);
}
.sabily-btn-secondary:hover {
  background: var(--c-surface);
  color: var(--c-primary-strong);
}

/* =============== Viewer (le seul qui scrolle) =============== */
.sabily-pdf-viewer {
  flex: 1 1 auto;
  position: relative;
  background: var(--c-surface-2);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 200px;
  padding: 10px;
  scroll-behavior: smooth;
  overscroll-behavior: contain; /* évite les rebonds qui scrollent la page */
  -webkit-overflow-scrolling: touch;

  /* Snap page par page */
  scroll-snap-type: y mandatory;
  scroll-padding-top: 10px; /* = padding ci-dessus */
}

/* =============== Pages =============== */
.sabily-pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sabily-pdf-page {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid var(--c-border);
  transition: transform 0.2s ease;
  flex-shrink: 0;

  scroll-snap-align: start;
  scroll-snap-stop: always;

  width: 100%;
  display: block;          /* ✅ pas de centrage vertical: supprime les grands blancs haut/bas */
  box-sizing: border-box;  /* bordure incluse dans la largeur */
}

.sabily-pdf-page:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Canvas fluide (une seule règle, pas de doublon) */
.sabily-pdf-viewer canvas {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.sabily-page-navigation {
  color: var(--c-surface);
}

/* =============== Loading / Erreur =============== */
.sabily-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--c-text-muted);
}
.sabily-spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--c-surface);
  border-top: 4px solid var(--c-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.sabily-error {
  background: var(--c-error-bg);
  color: var(--c-white);
  padding: 15px 20px;
  border-radius: 8px;
  margin: 10px 0;
  font-weight: 500;
  text-align: center;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =============== Safeguards & Responsive =============== */

/* Empêche les débordements en flex */
.sabily-pdf-container,
.sabily-pdf-header,
.sabily-pdf-controls,
.sabily-pdf-viewer,
.sabily-pages-container,
.sabily-pdf-page {
  min-width: 0;
}

/* PC et grands écrans */
@media (min-width: 1025px) {
  .sabily-pdf-container {
    height: 80vh !important; /* plus grand espace dispo */
  }

  .sabily-pdf-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .sabily-pdf-controls {
    justify-content: flex-end;
    gap: 12px;
  }

  .sabily-btn {
    padding: 12px 16px;
    font-size: 1em;
    min-width: 120px; /* boutons bien lisibles */
  }

  .sabily-pages-container {
    gap: 12px;
  }

  .sabily-page-input {
    width: 70px;
  }
}

/* Tablette et petits écrans */
@media (max-width: 768px) {
  .sabily-pdf-container { height: 80vh !important; }

  .sabily-pdf-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .sabily-pdf-controls { justify-content: center; gap: 8px; }
  .sabily-btn { padding: 10px 8px; font-size: 0.85em; }
}

/* Téléphones */
@media (max-width: 480px) {
  .sabily-pdf-container { height: 80vh !important; }

  .sabily-pdf-header { padding: 12px; }
  .sabily-page-input { width: 54px; }
  .sabily-pages-container { gap: 8px; }
  .sabily-btn { flex: 1; min-width: auto; }
}