/* ================================================== */
/* ACCUEIL-MOBILE.CSS — Responsive Accueil             */
/* ================================================== */

/* Section historique mobile : cachée par défaut, révélée seulement en mobile */
.mobile-history-section { display: none; }

/* Styles des cartes .mobile-history-* — TOUJOURS actifs (hors media query),
   contrairement à .mobile-history-section (display) qui bascule selon le
   breakpoint plus bas. Avant, ces styles n'existaient que dans
   @media (max-width:500px) and (pointer:coarse) : sur les téléphones en
   paysage (largeur souvent >500px, ou coincée dans la fourchette 769-1024px
   ciblée par erreur par le media query "tablette" plus bas), la section
   devenait visible via display:block mais sans AUCUN style de carte —
   d'où l'impression d'avoir "perdu tous ses styles". */
  .mobile-history-cards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    padding-right: 24px; /* laisser voir le bord de la carte suivante */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-history-cards::-webkit-scrollbar {
    display: none;
  }

  /* Carte horizontale : cover à gauche, infos à droite — comme l'illustration */
  .mobile-history-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--panel-light, #fff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e8e4de);
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    /* Prend ~80% de la largeur visible, la carte suivante dépasse */
    min-width: calc(85vw - 24px);
    max-width: calc(85vw - 24px);
    flex-shrink: 0;
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .mobile-history-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  }

  /* Cover petite et carrée à gauche */
  .mobile-history-cover {
    width: 60px;
    min-width: 60px;
    /* 90px = 60 * 3/2, ratio 2:3 exact — voir Accueil-style.css */
    height: 90px;
    object-fit: cover;
    border-radius: var(--cover-radius, 4px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.14);
    flex-shrink: 0;
  }

  .mobile-history-card:active .mobile-history-cover {
    will-change: transform;
  }

  /* Bloc info à droite */
  .mobile-history-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-history-book-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #222);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin-bottom: 1px;
  }

  .mobile-history-author {
    font-size: 11px;
    color: var(--muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
  }

  .mobile-history-chapter {
    font-size: 10px;
    color: var(--muted, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    margin-bottom: 4px;
  }

  /* Barre de progression */
  .mobile-history-progress {
    margin-bottom: 4px;
  }

  .mobile-history-progress-track {
    width: 100%;
    height: 5px;
    background: var(--border-color, #e8e4de);
    border-radius: 3px;
    overflow: hidden;
  }

  .mobile-history-progress-fill {
    height: 100%;
    background: var(--accent, #3c8c6c);
    border-radius: 3px;
    transition: width 0.4s ease;
  }

  /* Ligne stats : "45% complete   Page 78 of 120" */
  .mobile-history-stats {
    font-size: 10px;
    color: var(--muted, #888);
    margin-top: 1px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
  }


/* ===========================
   MOBILE — max 768px
   =========================== */
@media (max-width: 500px) and (pointer: coarse) {

  /* --- BANNER CAROUSEL --- */
  .home-banner {
    border-radius: 0;
    margin: 0 -12px 12px; /* Pleine largeur en compensant le padding de main */
    width: calc(100% + 24px);
  }

  /* Fixer la hauteur des slides pour qu'elle ne change pas selon la largeur de main */
  .home-banner-slide {
    height: 120px;
    min-height: 120px;
    max-height: 120px;
    padding: 10px 16px 20px;
  }

  /* Sur mobile : une seule arabesque centrée par slide, pas de coin opposé */
  .home-banner-slide::before {
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
  }
  .home-banner-slide::after {
    display: none;
  }

  /* Slide dernier ouvrage : masquer la description et le bouton découvrir en mobile */
  .banner-latest-book-slide .banner-latest-desc,
  .banner-latest-book-slide .banner-latest-link {
    display: none;
  }

  /* Masquer le slide "Reprendre la lecture" en mobile (doublon avec historique en dessous) */
  .banner-history-slide {
    display: none !important;
  }

  .banner-hero-slide {
    padding: 10px 16px 10px;
    justify-content: flex-start;
  }

  .banner-hero-title {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    /* Tronquer si trop long */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .banner-hero-lead {
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .banner-hero-cta {
    padding: 6px 14px;
    font-size: 11px;
  }

  /* --- BANNER COMPACTE MOBILE : 1 seul élément par slide --- */

  .banner-section-header {
    margin-bottom: 6px;
  }

  .banner-section-title {
    font-size: 12px;
  }

  /* --- RÉFÉRENCE DU JOUR : compacte pour tenir dans 120px --- */
  .banner-daily-ref-slide .banner-section-header {
    margin-bottom: 4px;
  }

  .banner-daily-ref-content {
    gap: 3px;
  }

  /* Masquer le nom arabe de la sourate (trop grand, pas indispensable) */
  .banner-daily-ref-sourate-arabic {
    display: none;
  }

  .banner-daily-ref-sourate-latin,
  .banner-daily-ref-reference {
    font-size: 9px;
  }

  .banner-daily-ref-arabic {
    font-size: 0.9rem;
    line-height: 1.6;
    -webkit-line-clamp: 2;
  }

  .banner-daily-ref-translation {
    font-size: 10px;
    line-height: 1.35;
    -webkit-line-clamp: 1;
  }

  .banner-daily-note-content {
    justify-content: flex-start;
    gap: 4px;
  }

  .banner-daily-note-quote {
    font-size: 13px;
    line-height: 1.25;
    padding: 0 8px;
  }

  .banner-daily-note-source {
    font-size: 10px;
  }

  /* Dernier livre : cover plus petite, layout compact */
  .banner-latest-book-content {
    gap: 10px;
    align-items: flex-start;
  }

  .banner-latest-cover {
    width: 52px;
    /* 78px = 52 * 3/2, ratio 2:3 exact — voir Accueil-style.css */
    height: 78px;
  }

  .banner-latest-title {
    font-size: 13px;
    -webkit-line-clamp: 1;
    margin-bottom: 2px;
  }

  .banner-latest-author {
    font-size: 11px;
  }

  .banner-latest-category {
    font-size: 10px;
  }

  /* Prochainement : même layout compact que Nouveauté */
  .banner-coming-soon-content {
    gap: 10px;
    align-items: flex-start;
  }

  .banner-coming-soon-cover-wrap {
    width: 52px;
    /* 78px = 52 * 3/2, ratio 2:3 exact — voir Accueil-style.css */
    height: 78px;
    flex-shrink: 0;
  }

  .banner-coming-soon-title {
    font-size: 13px;
    -webkit-line-clamp: 1;
    margin-bottom: 2px;
  }

  .banner-coming-soon-author {
    font-size: 11px;
  }

  .banner-coming-soon-badge {
    font-size: 9px;
  }

  .banner-history-books,
  .banner-notes-list,
  .banner-bio-list {
    flex-direction: row;
    gap: 0;
    overflow: hidden;
    max-height: 60px;
  }

  /* Carte unique : prend toute la largeur, layout horizontal compact */
  .banner-book-card {
    flex: none;
    width: 100%;
    padding: 6px 10px;
    gap: 10px;
    align-items: flex-start;
  }

  .banner-book-cover {
    width: 40px;
    min-width: 40px;
    /* 60px = 40 * 3/2, ratio 2:3 exact — voir Accueil-style.css */
    height: 60px;
  }

  .banner-book-title {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .banner-book-author {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .banner-book-chapter {
    display: none;
  }

  .banner-note-card {
    flex: none;
    width: 100%;
    padding: 6px 10px;
    gap: 4px;
  }

  .banner-note-text {
    font-size: 11px;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .banner-note-date {
    display: none;
  }

  .banner-bio-card {
    flex: 0 1 auto;
    margin: 0 auto;
    padding: 6px 10px;
    gap: 10px;
    align-items: flex-start;
  }

  .banner-bio-avatar {
    /* width: 34px; */
    /* height: 34px; */
    min-width: 34px;
    min-height: 34px;
  }

  .banner-bio-name {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .banner-bio-dates {
    font-size: 10px;
  }

  .banner-bio-excerpt {
    display: none;
  }

  .banner-bio-tags {
    display: none;
  }

  /* --- SECTION HISTORIQUE MOBILE (Continue Reading) --- */
  .mobile-history-section {
    display: block;
    margin: 4px 0 8px;
  }

  /* Flèches du banner : toujours visibles sur mobile (pas de hover) */
  .home-banner-arrow {
    opacity: 1;
    pointer-events: auto;
    width: 28px;
    height: 28px;
  }

  .home-banner-arrow-left {
    left: 6px;
  }

  .home-banner-arrow-right {
    right: 6px;
  }

  /* Indicateurs */
  .home-banner-indicators {
    bottom: 2px;
    gap: 5px;
    padding: 4px 0 2px;
  }

  .home-banner-dot {
    width: 6px;
    height: 6px;
  }

  .home-banner-dot.active {
    width: 16px;
  }

  /* --- SECTION TITLE --- */
  .accueil-section-title h2 {
    font-size: 1.3rem;
    margin: 4px 0 0;
    padding-bottom: 4px;
  }

  /* --- CAROUSEL DE LIVRES --- */
  .carousel-wrap {
    min-height: 220px;
    gap: 12px;
    padding: 15px 8px 4px;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel-wrap::-webkit-scrollbar {
    display: none;
  }

  .book {
    width: 120px;
    scroll-snap-align: start;
    margin: 0;
  }

  .book img {
    border-radius: var(--cover-radius, 4px);
  }

  /* Pas d'overlay description sur mobile */
  .book-hover-overlay {
    display: none !important;
  }

  .book-title {
    font-size: 11px;
    margin-top: 8px;
  }

  .book-title small {
    font-size: 9px;
  }

  /* H1 */
  h1 {
    font-size: 24px;
    max-width: 100%;
  }

  p.lead {
    max-width: 100%;
    font-size: 13px;
  }

  /* Boutons primaires */
  .start-button,
  .resume-button {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 20px;
  }

  /* Modal résumés */
  .resumes-modal-content {
    width: 95vw;
    max-height: 85vh;
  }

  .resumes-modal-header {
    padding: 16px;
  }

  .resumes-list {
    padding: 12px;
  }

  .resume-item {
    flex-direction: column;
    gap: 10px;
  }

  .resume-actions {
    flex-direction: row;
    width: 100%;
  }

  .resume-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ===========================
   GRAND MOBILE — min 501px
   =========================== */
@media (min-width: 501px) and (max-width: 768px) and (pointer: coarse) {

  .home-banner-slide {
    height: 155px;
    min-height: 155px;
    max-height: 155px;
  }

  .home-banner {
    margin-bottom: 20px;
  }

  /* Section historique visible aussi sur les grands mobiles */
  .mobile-history-section {
    display: block;
    margin: 12px 0 20px;
  }

  .accueil-section-title {
    margin: 8px 0 4px;
  }
}

/* ===========================
   PAYSAGE MOBILE
   =========================== */
@media (pointer: coarse) and (max-height: 600px) and (orientation: landscape) {

  /* En paysage, main a padding-left:0 mais padding-right:12px (commun-mobile).
     Le margin: 0 -12px de .home-banner compenserait trop à gauche → décalage.
     On rétablit la symétrie : marges nulles, pleine largeur. */
  .home-banner {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  /* Section historique : jusqu'ici jamais explicitement affichée en paysage
     (elle ne l'était que par accident sur les téléphones dont la largeur
     tombait dans la fourchette du media query "tablette" plus bas, sans ses
     styles de carte puisqu'ils étaient encore gated à ce moment-là). */
  .mobile-history-section {
    display: block;
    margin: 4px 0 8px;
  }

  /* Masquer le slide "Reprendre la lecture" en paysage aussi (doublon avec
     la section historique ci-dessus) — cf. même règle en portrait. */
  .banner-history-slide {
    display: none !important;
  }

  /* La largeur par défaut (85vw, cf. règle de base) suppose un écran étroit
     en portrait — en paysage, 85vw d'un téléphone est bien trop large (une
     carte occupe presque tout l'écran). Réduite pour en laisser apparaître
     au moins deux à la fois. */
  .mobile-history-card {
    min-width: calc(48vw - 20px);
    max-width: calc(48vw - 20px);
  }

  /* Carte bio : mêmes adaptations qu'en portrait mobile (médaillon étiré
     avec garde-fous, carte centrée à sa largeur de contenu) — la hauteur
     réduite en paysage (max-height:600px) fait sortir beaucoup de téléphones
     de la fourchette max-width:768px / 500px+coarse ci-dessus. Contrairement
     au portrait, la largeur disponible permet de garder génération/lieu
     (comme en desktop) ; seuls dates et extrait restent masqués. */
  .banner-bio-body {
    display: flex;
  }

  .banner-bio-dates,
  .banner-bio-excerpt {
    display: none;
  }

  .banner-bio-header {
    align-items: stretch;
    width: 100%;
    height: 100%;
  }

  .banner-bio-avatar {
    width: auto;
    height: auto;
    min-width: 34px;
    min-height: 34px;
    max-height: 70px;
    max-width: 70px;
    aspect-ratio: 1 / 1;
  }

  .banner-bio-card {
    flex: 0 1 auto;
    margin: 0 auto;
    padding: 6px 10px;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ===========================
   PETIT MOBILE — max 480px
   =========================== */
@media (max-width: 480px) {
  .home-banner {
      margin: auto;
      width: 100%;
  }

  .banner-hero-slide {
    padding: 20px 16px;
  }

  .banner-hero-title {
    font-size: 16px;
  }

  .banner-hero-lead {
    font-size: 11px;
  }

  .book {
    width: 100px;
  }

  h1 {
    font-size: 22px;
  }
}

/* ===========================
   TRÈS PETIT MOBILE — max 360px
   =========================== */
@media (max-width: 360px) {

  .banner-hero-title {
    font-size: 15px;
  }

  .book {
    width: 90px;
  }

  .book-cover {
    width: 130px;
  }

  .book-detail-right .title {
    font-size: 1.15em;
  }

  .action-item {
    width: 90px;
    height: 90px;
  }
}

/* ===========================
   TABLETTE — 769px à 1024px
   =========================== */
@media (min-width: 769px) and (max-width: 1024px) {

  .home-banner-slide {
    min-height: 190px;
  }

  /* .banner-section-header garde son margin-bottom:2px desktop (Accueil-style.css)
     alors que la slide est agrandie à 190px ci-dessus : le bloc titre+couverture,
     en flex-direction:column sans justify-content (donc flex-start), se tasse en
     haut avec la couverture collée au titre. Un peu plus d'air ici seulement,
     comme le fait déjà le palier mobile (margin-bottom:6px, plus haut dans ce
     fichier) qui n'avait jamais été répliqué pour la tablette. */
  .banner-section-header {
    margin-bottom: 6px;
  }

  .home-banner {
    margin-bottom: 28px;
  }

  .mobile-history-section {
    display: block;
    margin: 16px 0 26px;
  }

  .accueil-section-title {
    margin: 12px 0 6px;
  }

  .banner-hero-title {
    font-size: 20px;
  }

  .carousel-wrap {
    gap: 16px;
    padding: 8px 12px 16px;
  }

  .book {
    width: 130px;
  }

  .book-detail {
    padding: 32px 24px;
    margin: 20px 0;
    min-height: auto;
  }

  .book-detail-top {
    gap: 30px;
  }

  .book-cover {
    width: 200px;
    height: auto;
    aspect-ratio: 2/3;
  }

  .book-detail-right .title {
    font-size: 1.8em;
  }

  .book-detail-main {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .buttons-grid-new {
    gap: 12px;
  }

  .action-item {
    width: 160px;
    height: 160px;
  }
}