/* Premium generated category emblems — emerald & gold */
body[data-page="piliers"]{--page-art:url('assets/premium-piliers.webp')!important}
body[data-page="hadiths"]{--page-art:url('assets/premium-hadiths.webp')!important}
body[data-page="invocations"]{--page-art:url('assets/premium-invocations.webp')!important}
body[data-page="priere"]{--page-art:url('assets/premium-priere.webp')!important}

.topic-card[href*="piliers"] .topic-icon{background-image:url('assets/premium-piliers.webp')!important}
.topic-card[href*="noms"] .topic-icon{background-image:url('assets/premium-noms.webp')!important}
.topic-card[href*="hadiths"] .topic-icon{background-image:url('assets/premium-hadiths.webp')!important}
.topic-card[href*="invocations"] .topic-icon{background-image:url('assets/premium-invocations.webp')!important}
.topic-card[href*="priere"] .topic-icon{background-image:url('assets/premium-priere.webp')!important}

body[data-page="piliers"] .hero::after,
body[data-page="hadiths"] .hero::after,
body[data-page="invocations"] .hero::after,
body[data-page="priere"] .hero::after{
  aspect-ratio:1/1!important;
  width:min(34vw,390px)!important;
  background-size:contain!important;
  filter:drop-shadow(0 26px 34px rgba(18,61,52,.22))!important;
}

@media(max-width:900px){
  body[data-page="piliers"] .hero::after,
  body[data-page="hadiths"] .hero::after,
  body[data-page="invocations"] .hero::after,
  body[data-page="priere"] .hero::after{
    width:min(78vw,340px)!important;
    margin:24px auto 0!important;
  }
}

/* Prophètes — nouveau visuel premium symbolique */
body[data-page="prophetes"]{--page-art:url('assets/prophetes-symboles-premium.webp')!important}
body[data-page="prophetes"] .hero::after{
  aspect-ratio:240/339!important;
  width:min(26vw,300px)!important;
  background-size:contain!important;
  filter:drop-shadow(0 24px 36px rgba(18,61,52,.24))!important;
}
.topic-card[href*="prophetes"] .topic-icon{
  background-image:url('assets/prophetes-symboles-premium.webp')!important;
  background-size:cover!important;
  background-position:center top!important;
}

/* Ablutions — visuel premium dans la rubrique correspondante */
body[data-page="priere"] #ablutions .container::before{
  content:"";
  display:block;
  width:100%;
  aspect-ratio:420/280;
  margin:0 0 28px;
  border-radius:26px;
  background-image:url('assets/ablutions-premium.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(185,147,82,.35);
  box-shadow:0 24px 60px rgba(18,61,52,.16);
}
@media(max-width:900px){
  body[data-page="prophetes"] .hero::after{width:min(72vw,280px)!important;margin:24px auto 0!important}
  body[data-page="priere"] #ablutions .container::before{border-radius:20px;margin-bottom:20px}
}

/* Final premium banner system — same emerald/gold art direction */
body[data-page="piliers"] .hero,
body[data-page="hadiths"] .hero,
body[data-page="invocations"] .hero,
body[data-page="priere"] .hero,
body[data-page="prophetes"] .hero{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  min-height:clamp(360px,48vw,560px);
  display:flex;
  align-items:center;
}
body[data-page="piliers"] .hero{background-image:linear-gradient(90deg,rgba(6,35,29,.92) 0%,rgba(6,35,29,.76) 44%,rgba(6,35,29,.22) 100%),url('assets/banner-piliers.webp')!important}
body[data-page="hadiths"] .hero{background-image:linear-gradient(90deg,rgba(6,35,29,.92) 0%,rgba(6,35,29,.76) 44%,rgba(6,35,29,.22) 100%),url('assets/banner-hadiths.webp')!important}
body[data-page="invocations"] .hero{background-image:linear-gradient(90deg,rgba(6,35,29,.92) 0%,rgba(6,35,29,.76) 44%,rgba(6,35,29,.22) 100%),url('assets/banner-invocations.webp')!important}
body[data-page="priere"] .hero{background-image:linear-gradient(90deg,rgba(6,35,29,.92) 0%,rgba(6,35,29,.76) 44%,rgba(6,35,29,.22) 100%),url('assets/banner-priere.webp')!important}
body[data-page="prophetes"] .hero{background-image:linear-gradient(90deg,rgba(6,35,29,.92) 0%,rgba(6,35,29,.76) 44%,rgba(6,35,29,.22) 100%),url('assets/banner-prophetes.webp')!important}
body[data-page="piliers"] .hero::after,
body[data-page="hadiths"] .hero::after,
body[data-page="invocations"] .hero::after,
body[data-page="priere"] .hero::after,
body[data-page="prophetes"] .hero::after{display:none!important}
body[data-page="piliers"] .hero h1,
body[data-page="hadiths"] .hero h1,
body[data-page="invocations"] .hero h1,
body[data-page="priere"] .hero h1,
body[data-page="prophetes"] .hero h1{color:#fff7df!important;text-shadow:0 3px 28px rgba(0,0,0,.35)}
body[data-page="piliers"] .hero p,
body[data-page="hadiths"] .hero p,
body[data-page="invocations"] .hero p,
body[data-page="priere"] .hero p,
body[data-page="prophetes"] .hero p{color:#f5ead0!important;text-shadow:0 2px 18px rgba(0,0,0,.35)}
body[data-page="piliers"] .hero .tag,
body[data-page="hadiths"] .hero .tag,
body[data-page="invocations"] .hero .tag,
body[data-page="priere"] .hero .tag,
body[data-page="prophetes"] .hero .tag,
body[data-page="piliers"] .hero .eyebrow,
body[data-page="hadiths"] .hero .eyebrow,
body[data-page="invocations"] .hero .eyebrow,
body[data-page="priere"] .hero .eyebrow,
body[data-page="prophetes"] .hero .eyebrow{background:rgba(8,45,37,.64)!important;color:#f7d98d!important;border-color:rgba(247,217,141,.42)!important;backdrop-filter:blur(8px)}

/* 99 noms lives on the homepage: add its own full-width visual banner */
body[data-page="home"] #noms{position:relative;overflow:hidden}
body[data-page="home"] #noms::before{
  content:"";
  display:block;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto 34px;
  aspect-ratio:16/6;
  border-radius:28px;
  background-image:url('assets/banner-99noms.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(185,147,82,.34);
  box-shadow:0 26px 70px rgba(18,61,52,.18);
}
@media(max-width:900px){
  body[data-page="piliers"] .hero,
  body[data-page="hadiths"] .hero,
  body[data-page="invocations"] .hero,
  body[data-page="priere"] .hero,
  body[data-page="prophetes"] .hero{
    min-height:430px;
    background-position:center!important;
  }
  body[data-page="piliers"] .hero,
  body[data-page="hadiths"] .hero,
  body[data-page="invocations"] .hero,
  body[data-page="priere"] .hero,
  body[data-page="prophetes"] .hero{
    background-blend-mode:normal!important;
  }
  body[data-page="home"] #noms::before{width:min(100% - 22px,1180px);aspect-ratio:16/9;border-radius:20px;margin-bottom:24px}
}
@media(max-width:640px){
  body[data-page="piliers"] .hero,
  body[data-page="hadiths"] .hero,
  body[data-page="invocations"] .hero,
  body[data-page="priere"] .hero,
  body[data-page="prophetes"] .hero{
    min-height:390px;
    background-position:62% center!important;
  }
  body[data-page="piliers"] .hero .container,
  body[data-page="hadiths"] .hero .container,
  body[data-page="invocations"] .hero .container,
  body[data-page="priere"] .hero .container,
  body[data-page="prophetes"] .hero .container{padding-top:18px;padding-bottom:18px}
}

/* Homepage rubric cards — show the same premium banners directly on the first page */
body[data-page="home"] #rubriques .topic-card{
  min-height:330px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  padding:24px!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-color:rgba(185,147,82,.38)!important;
  box-shadow:0 22px 54px rgba(18,61,52,.16)!important;
}
body[data-page="home"] #rubriques .topic-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  height:auto!important;
  background:linear-gradient(180deg,rgba(5,31,26,.06) 20%,rgba(5,31,26,.72) 70%,rgba(5,31,26,.94) 100%)!important;
  z-index:0!important;
}
body[data-page="home"] #rubriques .topic-card>*{position:relative;z-index:1}
body[data-page="home"] #rubriques .topic-card .topic-icon{display:none!important}
body[data-page="home"] #rubriques .topic-card .topic-label{color:#f1cf7a!important;text-shadow:0 2px 12px rgba(0,0,0,.42)}
body[data-page="home"] #rubriques .topic-card h3{color:#fff8e8!important;text-shadow:0 3px 18px rgba(0,0,0,.5);font-size:clamp(27px,3vw,38px)!important}
body[data-page="home"] #rubriques .topic-card p{color:#f6ecda!important;text-shadow:0 2px 14px rgba(0,0,0,.46);font-size:16px!important}
body[data-page="home"] #rubriques .topic-card::after{color:#f0cf7a!important;z-index:2!important}
body[data-page="home"] #rubriques .topic-card[href*="prophetes"]{background-image:url('assets/banner-prophetes.webp')!important}
body[data-page="home"] #rubriques .topic-card[href*="piliers"]{background-image:url('assets/banner-piliers.webp')!important}
body[data-page="home"] #rubriques .topic-card[href*="noms"]{background-image:url('assets/banner-99noms.webp')!important}
body[data-page="home"] #rubriques .topic-card[href*="hadiths"]{background-image:url('assets/banner-hadiths.webp')!important}
body[data-page="home"] #rubriques .topic-card[href*="invocations"]{background-image:url('assets/banner-invocations.webp')!important}
body[data-page="home"] #rubriques .topic-card[href*="priere"]{background-image:url('assets/banner-priere.webp')!important}
@media(max-width:640px){
  body[data-page="home"] #rubriques .topic-card{min-height:285px!important;border-radius:24px!important;padding:20px!important}
  body[data-page="home"] #rubriques .topic-card h3{font-size:30px!important}
}