/* 
 * Styles pour la page de lecture - Black Orion Theme
 * Version améliorée avec design responsive et optimisations visuelles
 */

:root {
    --reader-max-width: 1200px;
    --reader-padding-desktop: var(--spacing-lg);
    --reader-padding-mobile: var(--spacing-sm);
}

a.reader-nav-button:hover,
a.reader-nav-button:focus {
    background: #ffd700;           /* fond jaune gold au hover */
    color: #222;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

a.reader-action-button:hover,
a.reader-action-button:focus {
    background: #ffd700;         /* jaune gold au hover */
    color: #222;                 /* icône sombre */
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

/* Structure principale */
.black-orion-reading-page {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.reader-container {
    max-width: var(--reader-max-width);
    margin: 0 auto;
    padding: var(--reader-padding-desktop);
    position: relative;
    z-index: 2;
}

.reader-title {
    font-family: var(--font-secondary);
    color: var(--color-accent);
    margin-bottom: var(--spacing-lg) !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25em;
    margin-bottom: 2.5rem;
}

.manga-title-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition-normal);
    font-family: var(--font-secondary);
    font-weight: 700;
    font-size: 2.3rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s;
    max-width: 95vw;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 0 0.25em;
}

.manga-title-link:hover {
    color: var(--color-accent-light);
    text-decoration: underline;
}

.chapter-name {
  display: block;
  color: var(--color-white);
  font-size: 1.15rem;
  font-family: var(--font-primary);
  font-weight: 500;
  margin-top: 0.35em;
  opacity: 0.95;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.chapter-separator {
    margin: 0 var(--spacing-sm);
}

/* Styles communs pour les deux modes de lecture */
.black-orion-reading-paged, 
.black-orion-reading-list {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

/* Animation de chargement */
.reading-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reading-content.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Barre de navigation */
.reader-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    margin-bottom: inherit !important;
}

.reader-nav-button {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-accent-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
}

.reader-nav-button:hover:not(.disabled) {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.reader-nav-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.reader-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.reader-action-button {
    width: 71px !important;
    height: 40px;
    background: var(--color-accent-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    border: none;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader-action-button:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.reader-action-button.favorite.active {
    background: var(--color-danger);
}

.reader-action-button.cancel {
    background: var(--color-danger);
}

.reader-action-button.cancel:hover {
    background: #c0392b;
}

.reader-chapter-select {
    background: var(--color-accent-dark);
    border: none;
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    min-width: 100px !important;
    cursor: pointer;
    font-weight: 500;
    margin-left: var(--spacing-lg); /* espace entre les actions et le select */
}

.reader-chapter-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* Mode liste - Images sans bordures */
.black-orion-reading-list .image-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.black-orion-reading-list .page-container {
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.black-orion-reading-list .page-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* Mode paged */
.black-orion-reading-paged .page-container {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.black-orion-reading-paged .page-container img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-small);
}

/* Navigation sur l'image */
.image-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 10;
}

.image-nav-area {
    flex: 1;
    height: 100%;
    cursor: pointer;
}

.image-nav-area.prev {
    cursor: w-resize;
}

.image-nav-area.next {
    cursor: e-resize;
}

.image-nav-area[data-disabled="true"] {
    cursor: not-allowed;
}

.page-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--overlay-light);
    border-radius: var(--border-radius-md);
}

.page-counter {
    color: var(--color-white);
    font-weight: 600;
}

.page-nav-button {
    width: 40px;
    height: 40px;
    background: var(--color-accent-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition-normal);
}

.page-nav-button:hover:not(.disabled) {
    background: var(--color-accent);
    transform: translateY(-2px);
}

.page-nav-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Barre de navigation du bas */
.bottom-reader-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    margin-top: 0;
}

/* Commentaires */
.project-comments-container {
    max-width:960px !important;
}

.comments-title {
    font-family: var(--font-secondary);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

/* Popup d'alerte personnalisé */
.black-orion-popup {
    background-color: var(--color-black) !important;
    border: 2px solid var(--color-accent) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    color: var(--color-white) !important;
    padding: var(--spacing-lg) !important;
    max-width: 500px !important;
}

.black-orion-popup-title {
    color: var(--color-accent) !important;
    font-family: var(--font-secondary) !important;
    font-size: 1.5rem !important;
    margin-bottom: var(--spacing-md) !important;
}

.black-orion-popup-content {
    color: var(--color-white) !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.black-orion-popup-content p {
    margin-bottom: var(--spacing-sm) !important;
}

.black-orion-popup-content strong {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
}

.swal2-popup.black-orion-popup .swal2-styled {
    margin: var(--spacing-sm) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    border-radius: var(--border-radius-md) !important;
    transition: var(--transition-normal) !important;
}

.swal2-popup.black-orion-popup .reader-action-button {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    width: auto !important;
    height: auto !important;
}

.swal2-popup.black-orion-popup .reader-action-button:hover {
    background-color: var(--color-accent-light) !important;
    transform: translateY(-2px) !important;
}

.swal2-popup.black-orion-popup .reader-action-button.cancel {
    background-color: var(--overlay-light) !important;
    color: var(--color-white) !important;
}

.swal2-popup.black-orion-popup .reader-action-button.cancel:hover {
    background-color: var(--color-danger) !important;
}

/* Styles pour les barres de navigation */
.reader-navigation, .bottom-reader-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--overlay-light);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.reader-navigation .reader-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}
.reader-nav-button {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-accent-dark);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-size: 0.9em;
}
.reader-nav-button.disabled {
    background: #555;
    cursor: not-allowed;
}
.reader-nav-button .nav-text {
    margin: 0 var(--spacing-xs);
}
.reader-action-button {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.1em;
    cursor: pointer;
    padding: var(--spacing-xs);
}
.reader-chapter-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-accent-dark);
    color: #000; /* Texte noir */
    border: 1px solid #555;
    border-radius: var(--border-radius-md);
    font-size: 0.9em;
    max-width: 200px;
}
.reader-chapter-select option {
    color: #000; /* Texte noir pour les options */
}

/* 1) Titre au-dessus, chapitre en dessous, centré, sans tiret */

  .chapter-separator {
    display: none;           /* on cache le tiret */
  }
  
  .reader-title .manga-title-link,
  .reader-title .chapter-separator,
  .reader-title .chapter-name {
    margin: 0;
    padding: 0;
  }

/* — Enlever l’écart sous la barre de nav en mode paged — */
.black-orion-reading-paged .reader-navigation {
    margin-bottom: 0 !important;
  }
  
  .black-orion-reading-paged .page-container {
    /* on garde les paddings latéraux et bas, on supprime seulement le padding‑top */
    padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md) !important;
  }

  .bottom-reader-navigation {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* plus besoin de justify-content: space-between */
  padding: var(--spacing-md);
  background: var(--overlay-light);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

/* pousse le bouton “Chapitre précédent” tout à gauche */
.bottom-reader-navigation .reader-nav-button.prev:not(.page-nav) {
  margin-right: auto;
}
/* pousse le bouton “Chapitre suivant” tout à droite */
.bottom-reader-navigation .reader-nav-button.next:not(.page-nav) {
  margin-left: auto;
}

/* Les flèches de page restent groupées au centre */
.reader-nav-button.page-nav {
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--color-accent-dark);
  color: var(--color-white);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  transition: background .2s, transform .2s;
}
.reader-nav-button.page-nav:hover:not(.disabled) {
  background: var(--color-accent);
  transform: translateY(-2px);
}

/* Fais en sorte que .page-counter prenne toute la place centrale */
.bottom-reader-navigation .page-counter {
    align-self: center;
    text-align: center;
    margin: 0;      /* plus de décalage */
    color: var(--color-white);
    font-weight: 600;
  }

/* Media queries pour responsivité */
@media (max-width: 768px) {
    .reader-navigation, .bottom-reader-navigation {
        flex-direction: row; /* Garder une ligne */
        flex-wrap: nowrap;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
    }
    .reader-nav-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8em;
    }
    .reader-nav-button .nav-text {
        font-size: 0.8em;
    }
    .reader-actions {
        flex: 1;
        gap: var(--spacing-xs);
    }
    .reader-action-button {
        font-size: 0.9em;
        padding: 3px;
        width: inherit !important;
    }
    .reader-chapter-select {
        padding: var(--spacing-xs);
        font-size: 0.8em;
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .reader-nav-button .nav-text {
        display: none; /* Masquer le texte, garder les icônes */
    }
    .reader-navigation,
    .bottom-reader-navigation {
      flex-direction: row !important;  /* toujours en ligne */
      flex-wrap: nowrap !important;    /* pas de retour à la ligne */
      justify-content: space-between;  /* répartit bien les boutons */
      align-items: center;             /* centre verticalement */
    }
  
    /* libère la largeur fixe pour les boutons/sélecteurs */
    .reader-nav-button,
    .reader-chapter-select {
      width: inherit !important;
      text-align: center;
    }

    .reader-action-button {
        font-size: 0.8em;
        padding: 2px;
    }
    .reader-chapter-select {
        max-width: 100px;
        font-size: 0.75em;
    }
      .reader-title {
    margin-bottom: 1rem;
    }
    .manga-title-link {
        font-size: 1.05rem;
        padding: 0;
    }
    .chapter-name {
        font-size: 0.92rem;
    }
}

/* Responsive */
/* Pleine largeur sur tablette et mobile */
@media (max-width: 1024px) {
    .reader-container {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: inherit !important;
    }
  }

@media (max-width: 800px) {
  .reader-title {
    margin-bottom: 1.3rem;
    gap: 0.15em;
  }
  .manga-title-link {
    font-size: 1.5rem;
    max-width: 98vw;
  }
  .chapter-name {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

    .reader-navigation,
    .bottom-reader-navigation {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .reader-nav-button {
        font-size: 0.9rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .reader-actions {
        flex: 1;
        justify-content:center;
    }
    
    .reader-chapter-select {
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .reader-container {
        padding: 0;
    }
    
    .black-orion-reading-paged, 
    .black-orion-reading-list {
        border-radius: 0;
    }
    
    .reader-navigation,
    .bottom-reader-navigation {
        border-radius: 0;
        flex-direction: column;
        align-items: stretch;
    }
    
    .reader-actions {
        width: 100%;
    }
    
    .reader-nav-button, 
    .reader-chapter-select {
        width: 100%;
        text-align: center;
    }
    
    .black-orion-reading-paged .page-container {
        padding: var(--spacing-xs);
    }
    
    .page-navigation {
        width: 100%;
    }
}