/* ===================================================================
   Le-Coran.com — CSS index Juz/Hizb
   =================================================================== */

/* -------------------------------------------------------------------
   Pages outils : Juz/Hizb, recherche, apprentissage
   ------------------------------------------------------------------- */
.lc-tool-page,
.lc-juz-page {
  background: #fff;
}
.lc-tool-page .lc-tool-wrap,
.lc-juz-page .lc-hero-text,
.lc-juz-page .lc-juz-overview,
.lc-juz-page .lc-juz-prevnext,
.lc-juz-page .lc-juz-layout {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.lc-tool-hero,
.lc-juz-hero {
  padding: 28px 0 10px;
}
.lc-tool-hero h1,
.lc-juz-hero h1 {
  margin: 0 0 10px;
  display: block;
}
.lc-tool-hero h1 .lc-hero-icon,
.lc-juz-hero h1 .lc-hero-icon {
  margin-right: 12px;
  vertical-align: -0.06em;
}
.lc-tool-hero h1 .lc-h1-sub,
.lc-juz-hero h1 .lc-h1-sub {
  display: inline;
  margin-left: 6px;
}
.lc-tool-hero p,
.lc-juz-hero p {
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: center;
  color: var(--lc-ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}
.lc-tool-grid,
.lc-juz-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 22px;
}
.lc-tool-card,
.lc-juz-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r);
  background: var(--lc-surface);
  color: var(--lc-ink);
  text-decoration: none;
  box-shadow: var(--lc-shadow-sm);
}
.lc-tool-card:hover,
.lc-juz-stat:hover {
  color: var(--lc-ink);
  border-color: rgba(42,127,98,.28);
  box-shadow: var(--lc-shadow);
}
.lc-tool-card span:first-child,
.lc-juz-stat span {
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lc-green-tint);
  color: var(--lc-green-d);
  font-weight: 800;
  font-size: 1.18rem;
}
.lc-tool-card strong,
.lc-juz-stat strong {
  font-size: 1.05rem;
  line-height: 1.2;
}
.lc-tool-card small,
.lc-juz-stat small {
  color: var(--lc-ink-soft);
  font-size: .88rem;
}
/* Cartes overview (30 Juz / 60 Hizb / Audio) : contenu centré comme les feature cards */
.lc-juz-stat {
  grid-template-columns: none;
  grid-template-rows: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  row-gap: 4px;
  padding: 18px 16px;
}
.lc-juz-stat span {
  grid-row: auto;
  margin-bottom: 4px;
}
.lc-tool-panel {
  margin-top: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-sm);
}
.lc-search-form {
  position: relative;
}
.lc-search-form input[type="text"] {
  width: 100% !important;
  height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-pill);
  background: var(--lc-surface-2);
  color: var(--lc-ink);
  font-size: 1rem;
  box-shadow: none;
}
.lc-search-form::before {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 19px;
  top: 18px;
  color: var(--lc-green);
  z-index: 1;
}
.lc-tool-page .presentation,
.lc-juz-page .presentation {
  width: 100%;
  max-width: none;
  margin: 28px 0 0;
  padding: clamp(28px, 4vw, 56px) !important;
  columns: 2;
  column-gap: 56px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-sm);
  color: var(--lc-ink-soft);
}
.lc-tool-page .zone_titre > h1,
.lc-juz-page .zone_titre > h1 {
  width: min(var(--lc-maxw), calc(100% - 36px));
  margin: 28px auto 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.lc-tool-page .zone_titre > h1::before,
.lc-juz-page .zone_titre > h1::before {
  content: "\f02d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--lc-green);
  font-size: .82em;
}
.lc-tool-page .order:not(.lc-tool-wrap),
.lc-tool-page > .col-md-12,
.lc-tool-page > .col-lg-12,
.lc-tool-page .lc-blog-shell,
.lc-tool-page .contact-page,
.lc-tool-page .about-page,
.lc-tool-page #mentions_legales + .col-md-12 {
  width: min(var(--lc-maxw), calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;
}
.lc-tool-page .order {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.lc-tool-page .order::before,
.lc-tool-page .order::after {
  content: none;
}
.lc-tool-page .download-panel,
.lc-tool-page #droite {
  min-width: 0;
}
.lc-tool-page .download-panel {
  display: grid;
  gap: 12px;
}
.lc-tool-page .download-card {
  border-radius: var(--lc-r);
  border: 1px solid var(--lc-line);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-sm);
}
.lc-tool-page .download-section-title {
  margin: 10px 0 0;
  color: var(--lc-ink);
  font-weight: 800;
}
.lc-tool-page .contact-shell,
.lc-tool-page .about-wrap,
.lc-tool-page .lc-blog-wrap {
  width: min(var(--lc-maxw), calc(100% - 36px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.lc-tool-page .qz-intro,
.lc-tool-page .qz-grid,
.lc-tool-page .qz-seo-text,
.lc-tool-page .qz-login-prompt,
.lc-tool-page .qz-meta-bar,
.lc-tool-page .qz-quiz-header,
.lc-tool-page .qz-results,
.lc-tool-page .question {
  max-width: none;
}
.lc-tool-page .qz-intro,
.lc-tool-page .qz-seo-text,
.lc-tool-page .qz-login-prompt {
  border-radius: var(--lc-r);
}
.lc-tool-page .table,
.lc-tool-page .recuperer_code,
.lc-tool-page input,
.lc-tool-page textarea,
.lc-tool-page select {
  max-width: 100%;
}
.lc-tool-page .presentation h2,
.lc-juz-page .presentation h2 {
  column-span: all;
  color: var(--lc-ink);
}
.lc-tool-page .presentation p,
.lc-tool-page .presentation ul,
.lc-tool-page .presentation blockquote,
.lc-juz-page .presentation p,
.lc-juz-page .presentation ul,
.lc-juz-page .presentation blockquote {
  break-inside: avoid;
}
.lc-tool-page .order,
.lc-juz-page .order {
  width: 100%;
}
.lc-juz-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
}
.lc-juz-prevnext .btn {
  border-radius: var(--lc-pill);
  border: 0;
  padding: 10px 16px;
  font-weight: 800;
  box-shadow: none;
}
.lc-juz-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.lc-juz-layout::before,
.lc-juz-layout::after {
  content: none;
}
.lc-juz-page #gauche,
.lc-juz-page #centre,
.lc-juz-page #droite,
.lc-juz-page .presentation,
.lc-tool-page #droite,
.lc-tool-page .presentation {
  min-width: 0;
}
.lc-juz-page #gauche {
  background: var(--lc-surface);
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r);
  box-shadow: var(--lc-shadow-sm);
  padding: 16px;
}
.lc-juz-page #centre {
  flex: 1 1 auto;
  min-width: 0;
}
.lc-juz-list {
  display: grid;
  gap: 16px;
  width: 100%;
}
.lc-juz-card {
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r);
  background: var(--lc-surface);
  box-shadow: var(--lc-shadow-sm);
  overflow: hidden;
}
.lc-juz-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-surface-2);
}
.lc-juz-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--lc-green-d);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.lc-juz-card h2 {
  margin: 0;
  font-size: 1.3rem;
}
.lc-juz-lang-links,
.lc-hizb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lc-juz-lang-links a,
.lc-hizb-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: var(--lc-pill);
  background: var(--lc-green-tint);
  color: var(--lc-green-d);
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
}
.lc-juz-lang-links a:hover,
.lc-hizb-actions a:hover {
  background: var(--lc-green);
  color: #fff;
}
.lc-hizb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.lc-hizb-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--lc-line);
  border-radius: var(--lc-r-sm);
  background: #fff;
}
.lc-hizb-main {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lc-ink);
  text-decoration: none;
}
.lc-hizb-main span {
  color: var(--lc-ink-soft);
  font-weight: 700;
}
.lc-hizb-main strong {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lc-orange-tint);
  color: var(--lc-orange);
  font-size: 1rem;
}
.lc-hizb-range {
  color: var(--lc-ink-soft);
  font-size: .84rem;
}
.lc-jzc[hidden] {
  display: none !important;
}
.lc-juz-page .audio_gauche audio,
.lc-juz-page #audioPlayer,
.lc-juz-page #audioPlayer_arabe {
  width: 100%;
}
.lc-juz-page .audio_gauche.bismillah {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--lc-r-sm);
  background: var(--lc-surface-2);
}
.lc-juz-page .listetitre,
.lc-juz-page .listefermer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 14px 0 0;
  padding: 8px 12px;
  border-radius: var(--lc-pill);
  background: var(--lc-green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.lc-juz-page .transition_sourate {
  margin: 18px 0 10px;
  padding: 12px 14px;
  border-radius: var(--lc-r-sm);
  background: var(--lc-surface-2);
  color: var(--lc-ink);
}
.lc-juz-page #div_des_versets {
  display: grid;
  gap: 10px;
}
.lc-juz-page .verset {
  border-radius: var(--lc-r-sm);
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--lc-line);
  line-height: 1.8;
}
.lc-juz-page .verset_arabe,
.lc-juz-page .verset_en_arabe {
  font-family: var(--lc-arab);
  font-size: 1.35rem;
  line-height: 2.1;
}
.lc-juz-page .num_verset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--lc-green-tint);
  color: var(--lc-green-d);
  font-weight: 800;
}

@media (max-width: 820px) {
  .lc-tool-grid,
  .lc-juz-overview {
    grid-template-columns: 1fr;
  }
  .lc-tool-page .presentation,
  .lc-juz-page .presentation {
    columns: 1;
  }
  .lc-juz-layout {
    display: grid;
  }
  .lc-juz-page #gauche,
  .lc-juz-page #centre,
  .lc-juz-page #droite {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .lc-juz-page #gauche {
    padding: 14px;
  }
  .lc-juz-card-head {
    display: grid;
  }
  .lc-hizb-grid {
    grid-template-columns: 1fr;
  }
  .lc-tool-page .order {
    display: grid;
    gap: 16px;
  }
  .lc-tool-page .presentation,
  .lc-tool-page #droite,
  .lc-tool-page .download-panel {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===================================================================
   23. Fond motif islamique discret (hero)
   =================================================================== */
.page_index .zone_titre,
.lc-tool-page .zone_titre,
.lc-juz-page .zone_titre {
  background-image: url(/img/v2/pattern-faint.png);
  background-repeat: repeat;
  background-size: 300px auto;
  background-position: top center;
}
/* ===================================================================
   27. Page Juz & Hizb : grille des 30 Juz
   =================================================================== */
.lc-juz-index { margin: 0 0 10px; }
.lc-juz-index-head { margin: 6px 0 20px; }
.lc-juz-index-head h2 { font-family: var(--lc-serif); font-size: 1.6rem; color: var(--lc-ink); margin: 0 0 4px; }
.lc-juz-index-head h2 i { color: var(--lc-green); margin-right: 6px; }
.lc-juz-index-head p { color: var(--lc-ink-soft); margin: 0; }
.lc-juz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lc-juz-card { display: flex; flex-direction: column; background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: var(--lc-r); box-shadow: var(--lc-shadow-sm); overflow: hidden; transition: transform var(--lc-trans), box-shadow var(--lc-trans), border-color var(--lc-trans); }
.lc-juz-card:hover { transform: translateY(-2px); box-shadow: var(--lc-shadow); border-color: var(--lc-green); }
.lc-juz-card-main { display: flex; align-items: center; gap: 13px; padding: 15px 16px; text-decoration: none; color: var(--lc-ink); flex: 1 1 auto; }
.lc-juz-card-num { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--lc-green-tint); color: var(--lc-green); font-weight: 800; font-size: 1.05rem; display: grid; place-items: center; }
.lc-juz-card-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lc-juz-card-head b { font-size: 1.02rem; color: var(--lc-ink); }
.lc-juz-card-head small { color: var(--lc-ink-soft); font-size: .79rem; margin-top: 1px; overflow-wrap: anywhere; }
.lc-juz-card-go { flex: 0 0 auto; color: var(--lc-green); opacity: .55; transition: transform var(--lc-trans), opacity var(--lc-trans); }
/* tactile : flèche pleinement visible d'emblée (pas de survol pour la révéler) */
.lc-juz-card-go { opacity: .85; }
@media (hover: hover) {
  .lc-juz-card-go { opacity: .55; }
  .lc-juz-card:hover .lc-juz-card-go { opacity: 1; transform: translateX(3px); }
}
.lc-juz-card-hizb { display: flex; border-top: 1px solid var(--lc-line); }
.lc-juz-card-hizb a { flex: 1 1 0; text-align: center; padding: 9px 6px; font-size: .82rem; font-weight: 700; color: var(--lc-green); text-decoration: none; transition: background var(--lc-trans); }
.lc-juz-card-hizb a:first-child { border-right: 1px solid var(--lc-line); }
.lc-juz-card-hizb a:hover { background: var(--lc-green-tint); }
/* SEO Juz pleine largeur (au lieu de col-md-4 étroit) */
.lc-juz-page .lc-juz-seo { width: 100% !important; max-width: none !important; margin-top: 26px; }
@media (max-width: 1050px) { .lc-juz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .lc-juz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .lc-juz-grid { grid-template-columns: 1fr; } }

/* nom arabe du Juz sur la carte */
.lc-juz-card-ar { flex: 0 0 auto; font-family: 'Amiri', serif; font-size: 1.45rem; color: var(--lc-green); line-height: 1; padding-left: 4px; }

/* Juz : filtres de grille + cartes features */
.lc-juz-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.lc-juz-filter { border: 1px solid var(--lc-line); background: var(--lc-surface); color: var(--lc-ink-soft); font-weight: 700; font-size: .85rem; padding: 8px 17px; border-radius: 99px; cursor: pointer; transition: background var(--lc-trans), color var(--lc-trans), border-color var(--lc-trans); }
.lc-juz-filter:hover { border-color: var(--lc-green); color: var(--lc-green); }
.lc-juz-filter.is-active { background: var(--lc-footer-bg); color: #fff; border-color: transparent; }
.lc-juz-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; margin: 28px 0 0; }
.lc-juz-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 20px 22px; background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: var(--lc-r); box-shadow: var(--lc-shadow-sm); }
.lc-juz-feature-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--lc-green-tint); color: var(--lc-green); display: grid; place-items: center; font-size: 1.2rem; margin: 0 auto 8px; }
.lc-juz-feature b { color: var(--lc-ink); font-size: 1.05rem; }
.lc-juz-feature small { color: var(--lc-ink-soft); font-size: .86rem; line-height: 1.45; }

/* ===================================================================
   27b. Grille Juz — classes isolées lc-jzc (évite collision .lc-juz-card de codex)
   =================================================================== */
.lc-jzc { display: flex; flex-direction: column; background: var(--lc-surface); border: 1px solid var(--lc-line); border-radius: var(--lc-r); box-shadow: var(--lc-shadow-sm); overflow: hidden; transition: transform var(--lc-trans), box-shadow var(--lc-trans), border-color var(--lc-trans); }
.lc-jzc:hover { transform: translateY(-2px); box-shadow: var(--lc-shadow); border-color: var(--lc-green); }
.lc-jzc-main { display: flex; align-items: center; gap: 13px; padding: 15px 16px; text-decoration: none; color: var(--lc-ink); background: transparent; flex: 1 1 auto; }
.lc-jzc-num { flex: 0 0 auto; width: 58px; height: 42px; border-radius: 12px; background: var(--lc-green-tint); color: var(--lc-green); font-weight: 800; font-size: .95rem; line-height: 1; white-space: nowrap; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.lc-jzc-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; background: transparent; border: 0; padding: 0; }
.lc-jzc-head b { font-size: 1.02rem; color: var(--lc-ink); }
.lc-jzc-head small { color: var(--lc-ink-soft); font-size: .79rem; margin-top: 1px; overflow-wrap: anywhere; }
.lc-jzc-ar { flex: 0 0 auto; font-family: 'Amiri', serif; font-size: 1.45rem; color: var(--lc-green); line-height: 1; padding-left: 4px; }
.lc-jzc-hizb { display: flex; border-top: 1px solid var(--lc-line); }
.lc-jzc-hizb a { flex: 1 1 0; text-align: center; padding: 9px 6px; font-size: .82rem; font-weight: 700; color: var(--lc-green); text-decoration: none; transition: background var(--lc-trans); }
.lc-jzc-hizb a:first-child { border-right: 1px solid var(--lc-line); }
.lc-jzc-hizb a:hover { background: var(--lc-green-tint); }

/* Juz : panneau Reprendre / dernière section */
.lc-jz-resume { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; background: var(--lc-surface-2); border: 1px solid var(--lc-line); border-left: 4px solid var(--lc-green); border-radius: var(--lc-r); padding: 20px 26px; margin: 4px 0 26px; box-shadow: var(--lc-shadow-sm); }
.lc-jz-resume-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--lc-green-d); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; }
.lc-jz-resume-info h2 { font-family: var(--lc-serif); font-size: 1.5rem; color: var(--lc-ink); margin: 7px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.lc-jz-resume-ar { font-family: 'Amiri', serif; color: var(--lc-green); font-size: 1.3rem; }
.lc-jz-resume-info p { margin: 0; color: var(--lc-ink-soft); font-size: .92rem; }
.lc-jz-resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lc-jz-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lc-green); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: var(--lc-pill); text-decoration: none; transition: filter var(--lc-trans), border-color var(--lc-trans), color var(--lc-trans); white-space: nowrap; }
.lc-jz-btn:hover { filter: brightness(.93); color: #fff; }
.lc-jz-btn--ghost { background: transparent; color: var(--lc-ink); border: 1.5px solid var(--lc-line); }
.lc-jz-btn--ghost:hover { border-color: var(--lc-green); color: var(--lc-green); filter: none; }
@media (max-width: 640px){ .lc-jz-resume-actions { width: 100%; } .lc-jz-btn { flex: 1 1 auto; justify-content: center; } }

body.lc-juz-page:not(.lc-juz-reading) .lc-juz-layout {
  display: block;
  max-width: min(var(--lc-maxw), calc(100% - 64px));
  margin-left: auto;
  margin-right: auto;
}

body.lc-juz-page:not(.lc-juz-reading) .lc-juz-index,
body.lc-juz-page:not(.lc-juz-reading) .lc-juz-seo {
  max-width: none !important;
  width: 100% !important;
}

@media (max-width: 760px) {
  body.lc-juz-page:not(.lc-juz-reading) .lc-juz-layout {
    max-width: calc(100% - 24px);
  }
}

/* Tablette/mobile : les 3 cartes stats (Juz/Hizb/Audio) en rangée compacte */
@media (max-width: 820px) {
  .lc-juz-overview { grid-template-columns: repeat(3, 1fr) !important; gap: 10px; }
  .lc-juz-stat { padding: 14px 8px; }
  .lc-juz-stat span { width: 40px; height: 40px; font-size: 1rem; }
  .lc-juz-stat small { font-size: .74rem; }
}