/* =========================================================
   eBooxly — Theme CSS (RTL)
   Palette & Typo unifiées • Composants réutilisables
   ========================================================= */

/* ---------- Variables globales ---------- */
:root {
  --font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;

  --color-bg: #f5f7fa;
  --color-text: #1f2937;        /* gris foncé lisible */
  --color-muted: #64748b;       /* gris moyen */
  --color-soft: #94a3b8;        /* gris doux */

  --color-primary: #2fae6b;     /* vert identitaire */
  --color-primary-600: #27995d;
  --color-primary-100: #ecfdf5;

  --color-accent: #0d6efd;      /* bleu pour liens/cta secondaires */
  --color-accent-100: #e7f1ff;

  --color-amber: #ffbf00;       /* ambre pour accents & bordures nav */

  --color-card: #ffffff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.08);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --max-container: 780px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  direction: rtl;
  margin: 0;
  padding: 0;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  width: 100%;
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 24px 20px;
}

/* ---------- Titres ---------- */
h1, h2 {
  text-align: center;
  color: #2d3748;
  margin: 1rem 0;
}
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }

/* =========================================================
   Navigation & Breadcrumb
   ========================================================= */

/* Barre de nav (si tu gardes du style inline dans le HTML ça marche aussi) */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffcc; backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--color-amber);
  box-shadow: var(--shadow-md);
  padding: .75rem 1rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.nav .brand {
  display: flex; align-items: center; gap: .6rem; color: var(--color-text);
}
.nav .brand-badge {
  background: var(--color-primary);
  color: #fff; padding: .35rem .6rem; border-radius: .75rem; font-size: 1.65rem; line-height: 1;
}
.nav .brand-name { font-weight: 800; font-size: 1.2rem; }
.nav a { text-decoration: none; }
.nav .menu { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.nav .menu a {
  font-weight: 600; color: var(--color-text);
  padding: .35rem .6rem; border-radius: var(--radius-sm);
}
.nav .menu a.active { color: var(--color-accent); font-weight: 700; }
.nav .menu a.cta {
  color: var(--color-primary); font-weight: 800; border:1px solid #a7f3d0;
  background: var(--color-primary-100); border-radius: .6rem; padding: .35rem .7rem;
}

/* Breadcrumb */
.breadcrumb {
  margin: 16px 0 24px;
  font-family: var(--font-family);
}
.breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
}
.breadcrumb li {
  display: flex; align-items: center; gap: .5rem;
}
.breadcrumb a {
  color: var(--color-accent); font-weight: 600;
  padding: .25rem .5rem; border-radius: var(--radius-sm);
}
.breadcrumb .sep { color: #9aa3af; }
.breadcrumb .current {
  color: var(--color-text); font-weight: 700;
  padding: .25rem .5rem; border-radius: var(--radius-sm); background: #f3f4f6;
}

/* =========================================================
   Composants: boutons, cartes, tags
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 10px 16px; font-weight: 700;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 8px 20px rgba(47,174,107,.25);
}
.btn-primary:hover { background: var(--color-primary-600); }

.btn-outline {
  background: #fff; color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-img { width: 100%; display: block; }
.card-body { padding: 10px; }
.card-title { font-weight: 800; font-size: .98rem; color: var(--color-text); }
.card-sub { font-size: .9rem; color: var(--color-muted); margin-top: 2px; }
.meta { display:flex; gap:6px; flex-wrap:wrap; margin-top: 6px; }
.tag {
  display:inline-block; background:#f3f4f6; color:#334155;
  padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600;
}

/* Pager (home) */
.pager { display:flex; align-items:center; justify-content:center; gap: 10px; margin: 16px 0; }
.pager button {
  border: 1px solid #e5e7eb; background:#fff; border-radius: 10px; padding: 8px 12px; cursor:pointer;
}
.pager button[disabled] { opacity:.5; cursor:not-allowed; }
.page-ind { color: var(--color-muted); }

/* =========================================================
   Sections existantes — harmonisées
   ========================================================= */

/* Auteurs par lettre */
.letters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 15px; margin: 20px 0;
}
.letter-item {
  background: #fff; color: var(--color-primary);
  border-radius: 50%; width: 50px; height: 50px;
  font-weight: 800; font-size: 18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 3px 8px rgba(0, 128, 0, 0.15);
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.letter-item:hover {
  background: #39822c; color: #fff; transform: translateY(-2px);
}

/* Liste des auteurs */
.authors {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 15px;
}
.author-item-rect {
  background: #fff;                        /* Fond blanc propre */
  padding: 12px 18px;                       /* Espacement interne (un peu plus large qu'avant) */
  border-radius: 8px;                       /* Coins arrondis modérés */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);    /* Ombre légère pour le relief */
  color: #3aa662;                           /* Vert identitaire */
  font-weight: bold;                        /* Texte en gras */
  font-size: 1rem;                          /* Taille lisible même sur mobile */
  text-decoration: none;                    /* Pas de soulignement */
  min-width: 120px;                         /* Largeur minimale pour plus d’homogénéité */
  text-align: center;                       /* Centre le texte dans le bloc */
  transition: background 0.3s ease,         /* Animation douce au survol */
              color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.15s ease;
}

/* Effet au survol */
.author-item-rect:hover {
  background-color: #39822c;                /* Vert plus foncé au survol */
  color: white;                              /* Texte blanc au survol */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);   /* Ombre plus marquée */
  transform: translateY(-3px);               /* Légère élévation du bloc */
}

/* Catégories */
.category-list {
  display:flex; flex-wrap:wrap; justify-content:center; gap: 15px;
  padding: 20px; margin-top: 20px;
}
.category-link {
  background: #f4f4f4; border-radius: 20px; padding: 10px 18px;
  color: #333; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.category-link:hover {
  background: #ffe9b3; color:#000; transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* Grille des livres (si utilisée) */
.book-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px; padding: 20px; justify-items: center;
}
.book-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 10px; text-align: center;
  transition: transform .15s ease;
}
.book-card:hover { transform: scale(1.03); }
.book-card img {
  max-width: 100%; height: auto; border-radius: 6px; object-fit: cover; max-height: 220px;
}
.book-title { margin-top: 10px; font-weight: 800; font-size: .95rem; color: var(--color-text); }
.book-author { font-size: .85rem; color: #666; }

/* ================================
   Section livres dans page Auteur
   ================================ */

/* Conteneur de tous les livres : carrousel horizontal */
.books {
  display: flex;                /* Met les livres côte à côte horizontalement */
  overflow-x: auto;              /* Permet le défilement horizontal si ça dépasse */
  gap: 20px;                     /* Espace entre chaque livre */
  padding: 12px 0;               /* Espace en haut et bas autour des livres */
  scroll-snap-type: x mandatory; /* Force l'alignement net lors du scroll horizontal */
}

/* Chaque bloc de livre */
.book-item {
  flex: 0 0 auto;                /* Empêche l'élément de rétrécir, taille fixe */
  scroll-snap-align: start;      /* Fait commencer chaque livre au début du viewport lors du scroll */
  background: #fff;              /* Fond blanc pour contraster avec le fond du site */
  border-radius: 12px;           /* Coins arrondis plus doux */
  width: 190px;                  /* Largeur élargie (avant c'était 130px) */
  padding: 14px;                 /* Plus d’espace intérieur pour respirer */
  text-align: center;            /* Centre le contenu à l'intérieur */
  box-shadow: 0 3px 12px rgba(0,0,0,0.08); /* Ombre douce pour donner du relief */
  text-decoration: none;         /* Supprime le soulignement des liens */
  color: #2c7a7b;                 /* Couleur du texte */
  transition: transform 0.15s ease, 
              background 0.2s ease, 
              box-shadow 0.2s ease; /* Animation douce au survol */
}

/* Effet au survol */
.book-item:hover {
  transform: translateY(-6px);   /* Légère élévation du bloc */
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* Ombre plus marquée au survol */
  background-color: #edfdfd;     /* Légère teinte bleu/vert clair au survol */
}

/* Image de couverture du livre */
.book-item img {
  width: 140px;                  /* Largeur élargie de l'image */
  height: 190px;                 /* Hauteur augmentée (avant 130px) */
  object-fit: cover;             /* Coupe/ajuste l'image pour remplir le cadre */
  border-radius: 6px;            /* Coins légèrement arrondis */
}

/* Titre du livre */
.book-item span {
  display: block;                /* Occupe toute la largeur sous l'image */
  margin-top: 10px;               /* Espace entre image et texte */
  font-size: 15px;                /* Taille du texte un peu plus grande */
  font-weight: bold;              /* Met le titre en gras */
  line-height: 1.4;               /* Un peu plus d'espace entre les lignes */
}


/* Couverture sur page livre */
.book-cover {
  display:block; margin: 20px auto; max-width: 450px; width: 100%; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Auteur header */
.author-header { text-align:center; margin: 25px 0; }
.author-header img.author-photo {
  width: 180px; height: 240px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 10px;
}

/* Lien retour — harmonisé en bouton primaire */
.back-link {
  display:block; max-width: 220px; margin: 30px auto; text-align:center;
  background: var(--color-primary); color:#fff; padding: 10px 20px; border-radius: 999px;
  transition: background .2s ease, transform .05s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px rgba(47,174,107,.2);
}
.back-link:hover { background: var(--color-primary-600); text-decoration:none; }
.back-link:active { transform: translateY(1px); }

/* Iframe chapitre */
#chapter-frame {
  width: 100%; height: 500px; border: none; margin-top: 20px; border-radius: 10px; background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Scroll to top */
#scrollTopBtn {
  display: none; position: fixed; bottom: 28px; left: 28px; z-index: 1000;
  background: var(--color-accent); color: #fff; border: none; padding: 12px 14px;
  border-radius: 999px; font-size: 18px; cursor: pointer; box-shadow: 0 8px 20px rgba(13,110,253,.25);
  transition: opacity .3s ease, transform .1s ease;
}
#scrollTopBtn:hover { transform: translateY(-1px); }

/* =========================================================
   Home: grille dynamique (JS)
   ========================================================= */
.grid { display: grid; gap: 16px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .grid-5 { grid-template-columns: repeat(2, 1fr); } }

.card.book-item { /* carte des livres sur home (liens générés JS) */
  padding: 0; border-radius: var(--radius); overflow: hidden; text-align: start; color: inherit;
}
.card.book-item:hover { text-decoration: none; }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  margin-top: 48px; background:#f8fafc; padding: 28px 12px; text-align:center;
  color:#475569; border-top:1px solid #e2e8f0;
}
.footer .links {
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-bottom: 10px;
}
.footer a { color: var(--color-accent); font-weight: 600; }
.footer a.cta { color: var(--color-primary); font-weight: 800; }

/* =========================================================
   Utilitaires
   ========================================================= */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 600px) {
  body { font-size: 15px; }
  .container { padding: 20px 12px; }

  h1, h2 { font-size: 20px; margin: 15px 0; text-align: center; }

  .letters { gap: 12px; justify-content: center; padding: 10px 0; }
  .letter-item { width: 42px; height: 42px; font-size: 16px; }

  .author-item-rect { font-size: 13px; padding: 6px 12px; }
  .authors { gap: 10px; margin-top: 15px; }

  .book-item { width: 120px; padding: 8px; }
  .book-item img { width: 80px; height: 110px; }
  .book-item span { font-size: 13px; }

  .author-header img.author-photo { width: 140px; height: 180px; }
  .book-cover { max-width: 95%; }

  #chapter-frame { height: 400px; }

  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }

  .nav-extra-links { display: none !important; }

  /* Menu burger si tu utilises #menu-btn / #nav-menu en JS */
  #menu-btn { display: inline-block; }
  #nav-menu { display: none; flex-direction: column; gap: 10px; margin-top: 10px; }
  #nav-menu.show { display: flex; }
}

.book-card{cursor:pointer}
  .book-card a{text-decoration:none}
  .book-card .book-title-link{color:#1f2937}
  .book-card .book-title-link:hover{text-decoration:underline}
  .author-link{color:#0d6efd;font-weight:600}
  .author-link:hover{text-decoration:underline}
  .tag-link{color:#334155;background:#f3f4f6;border-radius:999px;padding:2px 8px}
  .tag-link:hover{background:#e5e7eb;text-decoration:none}

  /* Grille 4 par ligne */
  #books.home-books{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:40px;
    justify-items:center;
  }
  #books.home-books .book-card{
    width:230px;
    min-height:300px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 6px 12px rgba(0,0,0,.1);
    padding:40px;
    text-align:center;
    transition:transform .3s ease;
    display:flex;
    flex-direction:column;
  }
  #books.home-books .book-card:hover{transform:scale(1.03)}
  #books.home-books .book-card .card-img{
    width:190px;
    height:250px;
    object-fit:cover;
    border-radius:6px;
    display: block;            /* élimine les marges parasites */
    margin-left: auto;         /* centre horizontalement */
    margin-right: auto;        /* centre horizontalement */
  }
  #books.home-books .book-card .card-title{
    margin-top:10px;font-weight:700;font-size:1rem;color:#222;
  }
  #books.home-books .book-card .card-sub{
    font-size:.9rem;color:#666;margin:4px 0 8px;
  }
  #books.home-books .book-card .meta{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:auto;
  }

  /* Pagination */
  .pagination{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:10px;
  }
  .pagination button{
    padding:6px 12px;
    border:none;
    background:#0d6efd;
    color:#fff;
    font-weight:600;
    border-radius:4px;
    cursor:pointer;
  }
  .pagination button:disabled{
    background:#ccc;
    cursor:not-allowed;
  }

  @media (max-width:1024px){
    #books.home-books{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:768px){
    #books.home-books{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:500px){
    #books.home-books{grid-template-columns:repeat(1,1fr);}
  }

  /* Centrer les livres sur la page d’accueil */
#books.home-books {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr)); /* 4 par ligne */
  gap: 20px;
  justify-content: center; /* centre les colonnes si dernière ligne incomplète */
}