/* ============================================================
   Khayroukoum — Design system & page d'accueil (refonte 2026)
   Concept : « Manuscrit & Lumière » — parchemin, émeraude, or.
   ============================================================ */

:root{
  --kh-emerald:#157a3c;  --kh-emerald-dk:#0e5629;  --kh-ink-green:#0b2a1a;
  --kh-gold:#c2922f;     --kh-gold-dk:#a2751a;
  --kh-sage:#e4efdd;     --kh-sage-2:#d0e3c5;
  --kh-parch:#f7f5ef;    --kh-parch-2:#efeadd;
  --kh-ink:#16221b;      --kh-muted:#5b6b60;
  --kh-white:#ffffff;    --kh-line:#e5e2d6;
  --kh-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --kh-sans:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kh-ar:'Amiri', 'Fraunces', serif;
  --kh-wrap:1160px;
  --kh-radius:16px;
  --kh-shadow:0 18px 50px -24px rgba(11,42,26,.35);
  --kh-shadow-sm:0 6px 20px -12px rgba(11,42,26,.30);
  --kh-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c2922f' d='M12 0l2.4 6.5L21 4l-2.5 6.5L24 12l-5.5 1.5L21 20l-6.6-2.5L12 24l-2.4-6.5L3 20l2.5-6.5L0 12l5.5-1.5L3 4l6.6 2.5z'/%3E%3C/svg%3E");
}

/* Accessibilité : titre lisible par lecteur d'écran uniquement */
.kh-sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Typographie globale (surcharge douce de Divi) ---------- */
#page-container, body.et-db #et-boc, body{ font-family:var(--kh-sans); }
#page-container h1, #page-container h2, #page-container h3,
#page-container h4, #page-container h5, #page-container h6{
  font-family:var(--kh-serif); font-weight:600; letter-spacing:-.01em; color:var(--kh-ink);
}
.kh-home{ color:var(--kh-ink); font-size:17px; line-height:1.7; overflow:clip; }
.kh-home em{ font-style:italic; }
.kh-wrap{ max-width:var(--kh-wrap); margin-inline:auto; padding-inline:24px; }
.kh-center{ text-align:center; margin-top:38px; }

/* ---------- Eyebrow + motif étoile ---------- */
.kh-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 16px;
  font-family:var(--kh-sans); font-weight:700; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--kh-gold-dk);
}
.kh-eyebrow--light{ color:#e9d8ab; }
.kh-star{ width:15px; height:15px; background:var(--kh-star) center/contain no-repeat; flex:0 0 auto; }

/* ---------- Section headers ---------- */
.kh-sec-head{ max-width:660px; margin:0 auto 46px; text-align:center; }
.kh-sec-head .kh-eyebrow{ justify-content:center; }
.kh-sec-head h2{ font-size:clamp(28px,4vw,42px); line-height:1.12; margin:0 0 14px; text-wrap:balance; }
.kh-sec-sub{ color:var(--kh-muted); font-size:18px; margin:0; }

/* ---------- Boutons ---------- */
.kh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:999px; font-family:var(--kh-sans); font-weight:600;
  font-size:16px; line-height:1; text-decoration:none; cursor:pointer; border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.kh-btn--gold{ background:linear-gradient(135deg,var(--kh-gold),var(--kh-gold-dk)); color:#fff; box-shadow:0 12px 26px -12px rgba(162,117,26,.7); }
.kh-btn--gold:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(162,117,26,.8); color:#fff; }
.kh-btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(3px); }
.kh-btn--ghost:hover{ background:#fff; color:var(--kh-emerald-dk); transform:translateY(-2px); }
.kh-btn--outline{ background:transparent; color:var(--kh-emerald-dk); border-color:var(--kh-sage-2); }
.kh-btn--outline:hover{ background:var(--kh-emerald); color:#fff; border-color:var(--kh-emerald); transform:translateY(-2px); }

.kh-link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--kh-emerald-dk); text-decoration:none; border-bottom:2px solid var(--kh-sage-2); padding-bottom:2px; transition:gap .18s ease, border-color .18s; }
.kh-link:hover{ gap:12px; border-color:var(--kh-gold); color:var(--kh-emerald-dk); }

/* ============================================================
   HERO
   ============================================================ */
.kh-hero{ position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.kh-hero__media{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; transform:scale(1.03); }
.kh-hero__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 15% 0%, transparent 40%, rgba(11,42,26,.35)); }
.kh-hero__inner{ max-width:var(--kh-wrap); margin-inline:auto; padding:132px 24px 108px; }
@media(min-width:900px){ .kh-hero__inner{ max-width:760px; margin-left:max(24px,calc((100% - var(--kh-wrap))/2)); } }
.kh-hero__title{ font-size:clamp(40px,7vw,74px); line-height:1.03; margin:0 0 22px; color:#fff; text-wrap:balance; letter-spacing:-.02em; }
.kh-hero__title em{ color:#f0dca8; }
.kh-hero__lead{ font-size:clamp(17px,2.3vw,21px); line-height:1.6; max-width:60ch; color:rgba(255,255,255,.92); margin:0 0 34px; }
.kh-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }
.kh-hero__trust{ list-style:none; margin:0; padding:26px 0 0; border-top:1px solid rgba(255,255,255,.22); display:flex; flex-wrap:wrap; gap:14px 40px; }
.kh-hero__trust li{ font-size:15px; color:rgba(255,255,255,.82); }
.kh-hero__trust strong{ color:#fff; font-weight:700; }

/* ============================================================
   MISSION + HADITH
   ============================================================ */
.kh-mission{ background:var(--kh-parch); padding:clamp(64px,9vw,116px) 0; }
.kh-mission__grid{ display:grid; gap:54px; align-items:center; }
@media(min-width:920px){ .kh-mission__grid{ grid-template-columns:1.05fr .95fr; gap:72px; } }
.kh-mission__text h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.15; margin:0 0 20px; }
.kh-mission__text p{ color:var(--kh-muted); margin:0 0 18px; }
.kh-mission__text .kh-link{ margin-top:8px; }

.kh-hadith{ position:relative; margin:0; padding:52px 44px; border-radius:var(--kh-radius);
  background:linear-gradient(150deg,var(--kh-emerald),var(--kh-ink-green)); color:#fff; box-shadow:var(--kh-shadow); overflow:hidden; }
.kh-hadith::before{ content:""; position:absolute; inset:0; background:var(--kh-star) -30px -30px/150px no-repeat; opacity:.10; }
.kh-hadith__ar{ font-family:var(--kh-ar); font-size:clamp(30px,5vw,44px); line-height:1.7; text-align:center; margin:0 0 22px; color:#fbeecb; }
.kh-hadith__fr{ text-align:center; font-family:var(--kh-serif); font-style:italic; font-size:18px; line-height:1.55; color:rgba(255,255,255,.94); }
.kh-hadith__fr span{ display:block; margin-top:12px; font-family:var(--kh-sans); font-style:normal; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#e9d8ab; }

/* ============================================================
   COURS
   ============================================================ */
.kh-courses{ background:var(--kh-white); padding:clamp(64px,9vw,116px) 0; }
.kh-cards{ display:grid; gap:22px; }
.kh-cards--3{ grid-template-columns:1fr; }
@media(min-width:640px){ .kh-cards--3{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .kh-cards--3{ grid-template-columns:1fr 1fr 1fr; } }
.kh-course{ display:block; padding:34px 30px; border:1px solid var(--kh-line); border-radius:var(--kh-radius);
  background:var(--kh-parch); text-decoration:none; color:var(--kh-ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s; }
.kh-course:hover{ transform:translateY(-4px); box-shadow:var(--kh-shadow-sm); border-color:var(--kh-sage-2); }
.kh-course__glyph{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin-bottom:20px;
  border-radius:14px; background:var(--kh-sage); color:var(--kh-emerald-dk); font-family:var(--kh-ar); font-size:24px; }
.kh-course__title{ font-size:21px; margin:0 0 8px; }
.kh-course__desc{ color:var(--kh-muted); font-size:15.5px; margin:0 0 18px; }
.kh-course__more{ font-weight:600; font-size:14.5px; color:var(--kh-emerald-dk); }
.kh-course:hover .kh-course__more{ color:var(--kh-gold-dk); }

/* ============================================================
   MOSQUÉES
   ============================================================ */
.kh-mosques{ background:var(--kh-emerald-dk); color:#fff; padding:clamp(64px,9vw,112px) 0;
  background-image:linear-gradient(160deg,var(--kh-emerald),var(--kh-ink-green)); }
.kh-mosques__grid{ display:grid; gap:44px; }
@media(min-width:920px){ .kh-mosques__grid{ grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; } }
.kh-mosques__intro h2{ color:#fff; font-size:clamp(26px,3.6vw,40px); line-height:1.13; margin:0 0 16px; }
.kh-mosques__intro p{ color:rgba(255,255,255,.82); margin:0; }
.kh-mosques__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(min-width:560px){ .kh-mosques__list{ grid-template-columns:1fr 1fr 1fr; } }
.kh-mosques__list a{ display:flex; align-items:center; gap:11px; padding:16px 16px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; text-decoration:none;
  font-weight:500; font-size:15px; transition:background .18s, transform .18s, border-color .18s; }
.kh-mosques__list a:hover{ background:rgba(255,255,255,.14); border-color:rgba(240,220,168,.5); transform:translateY(-2px); }
.kh-dome{ width:16px; height:16px; flex:0 0 auto; border-radius:50% 50% 0 0; background:#f0dca8; position:relative; }
.kh-dome::after{ content:""; position:absolute; left:50%; top:-6px; width:2px; height:6px; background:#f0dca8; transform:translateX(-50%); }

/* Variante « page » (fond clair) — page « Nos mosquées » */
.kh-mosques__list--page{ max-width:860px; margin:26px 0 0; grid-template-columns:1fr 1fr; }
@media(min-width:700px){ .kh-mosques__list--page{ grid-template-columns:1fr 1fr 1fr; } }
.kh-mosques__list--page a{ background:var(--kh-parch); border-color:var(--kh-line); color:var(--kh-ink); font-size:15.5px; }
.kh-mosques__list--page a:hover{ background:var(--kh-sage); border-color:var(--kh-sage-2); color:var(--kh-emerald-dk); }
.kh-mosques__list--page .kh-dome,
.kh-mosques__list--page .kh-dome::after{ background:var(--kh-emerald); }

/* ============================================================
   CAMPAGNES (harmonisation avec le plugin)
   ============================================================ */
.kh-campaigns{ background:var(--kh-parch); padding:clamp(64px,9vw,116px) 0; }
.kh-campaigns .umm-proj-wrapper{ margin-top:4px; }

/* ============================================================
   CTA
   ============================================================ */
.kh-cta{ background:var(--kh-white); padding:clamp(56px,8vw,96px) 0; }
.kh-cta__inner{ position:relative; overflow:hidden; text-align:center; padding:clamp(44px,6vw,72px) 32px;
  border-radius:24px; background:linear-gradient(135deg,var(--kh-gold),#8a6412); color:#fff; box-shadow:var(--kh-shadow); }
.kh-cta__inner::before{ content:""; position:absolute; inset:0; background:var(--kh-star) right -40px bottom -40px/220px no-repeat; opacity:.12; }
.kh-cta__inner h2{ color:#fff; font-size:clamp(26px,4vw,40px); margin:0 0 14px; line-height:1.12; }
.kh-cta__inner p{ color:rgba(255,255,255,.92); max-width:52ch; margin:0 auto 28px; font-size:18px; }
.kh-cta__inner .kh-btn--gold{ background:#fff; color:var(--kh-emerald-dk); box-shadow:0 14px 30px -14px rgba(0,0,0,.4); }
.kh-cta__inner .kh-btn--gold:hover{ background:var(--kh-ink-green); color:#fff; }

/* ============================================================
   RESSOURCES
   ============================================================ */
.kh-res{ background:var(--kh-parch); padding:clamp(64px,9vw,112px) 0; }
.kh-res__grid{ display:grid; gap:44px; align-items:center; }
@media(min-width:920px){ .kh-res__grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.kh-res__grid h2{ font-size:clamp(24px,3.2vw,34px); margin:0 0 16px; line-height:1.16; }
.kh-res__grid > div > p{ color:var(--kh-muted); margin:0 0 18px; }
.kh-res__cards{ display:grid; gap:16px; }
.kh-res__card{ display:flex; gap:18px; align-items:flex-start; padding:24px; border-radius:14px;
  background:var(--kh-white); border:1px solid var(--kh-line); text-decoration:none; color:var(--kh-ink);
  transition:transform .18s, box-shadow .18s; }
.kh-res__card:hover{ transform:translateY(-3px); box-shadow:var(--kh-shadow-sm); }
.kh-res__ico{ font-size:26px; line-height:1; }
.kh-res__card strong{ display:block; font-family:var(--kh-serif); font-size:18px; margin-bottom:4px; }
.kh-res__card span span, .kh-res__card > span:last-child{ color:var(--kh-muted); font-size:15px; }
.kh-res__card > span{ display:flex; flex-direction:column; }

/* ============================================================
   HEADER Divi — nettoyage + bouton don
   ============================================================ */
#main-header{ box-shadow:0 2px 20px -14px rgba(11,42,26,.4); }
#top-menu li a{ font-family:var(--kh-sans); font-weight:600; letter-spacing:.01em; }
#top-menu li.kh-donate-item a,
#top-menu li a.kh-donate-link{
  color:#fff !important; background:linear-gradient(135deg,var(--kh-gold),var(--kh-gold-dk));
  padding:11px 22px !important; border-radius:999px; opacity:1 !important; transition:transform .18s, box-shadow .18s;
}
#top-menu li.kh-donate-item a:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -12px rgba(162,117,26,.8); }
#top-menu li.kh-donate-item a::after{ display:none !important; }

/* ============================================================
   FOOTER Divi — teinte de marque
   ============================================================ */
#main-footer{ background:var(--kh-ink-green); }
#footer-widgets .footer-widget h4.title{ font-family:var(--kh-serif); color:#f0dca8; }
#footer-bottom{ background:rgba(0,0,0,.25); }

/* ============================================================
   Animations douces (reveal) — respecte prefers-reduced-motion
   ============================================================ */
/* Sans JS (ou avant kh-js) : tout est visible. Avec JS : révélation au scroll. */
.kh-js .kh-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.kh-js .kh-reveal.kh-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .kh-js .kh-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .kh-btn, .kh-course, .kh-res__card, .kh-mosques__list a{ transition:none !important; }
}

/* ============================================================
   Responsive fine-tuning
   ============================================================ */
@media(max-width:560px){
  .kh-hero__inner{ padding:104px 22px 76px; }
  .kh-hadith{ padding:40px 26px; }
  .kh-mosques__list{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PAGE D'ACCUEIL — construite avec le Divi Builder.
   Styles rattachés aux "module_class" des modules Divi, afin que
   la mise en page reste entièrement éditable dans le Builder.
   ============================================================ */

/* ---------- Hero ---------- */
.kh-hero-section .kh-hero-text,
.kh-hero-section .kh-hero-text p,
.kh-hero-section .kh-hero-text h1{ color:#fff; }
.kh-hero-section .kh-hero-text h1{
  font-family:var(--kh-serif); font-weight:600; font-size:clamp(38px,6.5vw,68px);
  line-height:1.05; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance; }
.kh-hero-section .kh-hero-text h1 em{ color:#f0dca8; font-style:italic; }
.kh-hero-section .kh-hero__lead{ font-size:clamp(17px,2.2vw,20px); line-height:1.6; max-width:60ch; color:rgba(255,255,255,.92); }
.kh-hero-trust ul{ list-style:none; margin:0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.22);
  display:flex; flex-wrap:wrap; gap:12px 38px; }
.kh-hero-trust li{ color:rgba(255,255,255,.82); font-size:15px; padding:0; }
.kh-hero-trust strong{ color:#fff; font-weight:700; }

/* ---------- Titres de section ---------- */
.kh-sec-head{ max-width:660px; margin-left:auto!important; margin-right:auto!important; }
.kh-sec-head h2{ font-size:clamp(27px,4vw,40px); line-height:1.13; margin:0 0 12px; }
.kh-sec-head .kh-eyebrow{ justify-content:center; }

/* ---------- Mission et hadith ---------- */
.kh-mission-section h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.15; margin:0 0 18px; }
.kh-hadith-box{ box-shadow:var(--kh-shadow); }
.kh-hadith-box p{ color:#fff; }
.kh-hadith-box .kh-hadith__ar{
  font-family:var(--kh-ar); font-size:clamp(28px,4.4vw,42px); line-height:1.75;
  text-align:center; color:#fbeecb; margin:0 0 18px; }
.kh-hadith-box .kh-hadith__fr{
  font-family:var(--kh-serif); font-style:italic; font-size:18px; line-height:1.55;
  text-align:center; color:rgba(255,255,255,.95); margin:0 0 10px; }
.kh-hadith-box .kh-hadith__src{
  text-align:center; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#e9d8ab; margin:0; }

/* ---------- Cartes de cours (module Blurb) ---------- */
.kh-course-blurb{ border:1px solid var(--kh-line); transition:transform .2s ease, box-shadow .2s ease; height:100%; }
.kh-course-blurb:hover{ transform:translateY(-4px); box-shadow:var(--kh-shadow-sm); }
.kh-course-blurb .et_pb_module_header,
.kh-course-blurb .et_pb_module_header a{
  font-family:var(--kh-serif)!important; font-size:21px!important; font-weight:600!important;
  color:var(--kh-ink)!important; padding-bottom:8px!important; }
.kh-course-blurb:hover .et_pb_module_header a{ color:var(--kh-emerald-dk)!important; }
.kh-course-blurb .et_pb_blurb_description{ color:var(--kh-muted); font-size:15.5px; line-height:1.6; }

/* ---------- Reseau de mosquees ---------- */
.kh-mosques-section h2,
.kh-mosques-section p{ color:#fff; }
.kh-mosques-section h2{ font-size:clamp(26px,3.6vw,40px); line-height:1.13; margin:0 0 14px; }
.kh-mosques-section p{ color:rgba(255,255,255,.82); }
.kh-mosques-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:1fr 1fr; }
@media(min-width:768px){ .kh-mosques-list ul{ grid-template-columns:1fr 1fr 1fr; } }
.kh-mosques-list li{ padding:0; }
.kh-mosques-list a{ display:block; padding:15px 16px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#fff!important; text-decoration:none; font-size:15px; font-weight:500;
  transition:background .18s, transform .18s, border-color .18s; }
.kh-mosques-list a:hover{ background:rgba(255,255,255,.14); border-color:rgba(240,220,168,.5); transform:translateY(-2px); }

/* ---------- Appel au don ---------- */
.kh-cta-section .et_pb_row{ box-shadow:var(--kh-shadow); }
.kh-cta-text h2{ color:#fff; font-size:clamp(26px,4vw,40px); line-height:1.12; margin:0 0 12px; }
.kh-cta-text p{ color:rgba(255,255,255,.94); font-size:18px; max-width:52ch; margin:0 auto; }

/* ---------- Ressources ---------- */
.kh-res-section h2{ font-size:clamp(24px,3.2vw,34px); line-height:1.16; margin:0 0 14px; }
.kh-res-blurb{ border:1px solid var(--kh-line); transition:transform .18s, box-shadow .18s; }
.kh-res-blurb:hover{ transform:translateY(-3px); box-shadow:var(--kh-shadow-sm); }
.kh-res-blurb .et_pb_module_header,
.kh-res-blurb .et_pb_module_header a{
  font-family:var(--kh-serif)!important; font-size:18px!important; color:var(--kh-ink)!important; }
.kh-res-blurb .et_pb_blurb_description{ color:var(--kh-muted); font-size:15px; }

/* ---------- Boutons Divi ---------- */
.et_pb_button{ transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.kh-btn-gold.et_pb_button:hover{ transform:translateY(-2px); }

/* ---------- Cartes de campagnes dans une section Divi ---------- */
.kh-campaigns-section .umm-proj-wrapper{ margin-top:6px; }