/* ============================================================
   Muslim Alim — Design System 2026
   Tous les tokens et classes du shell sont prefixes --ma- / .ma-
   pour ne JAMAIS entrer en collision avec les <style> des pages
   (101 pages redefinissent body, 97 .container, 94 .header).
   Aucune fonctionnalite existante n'est retiree.
   ============================================================ */

:root{
  /* Fonds */
  --ma-bg:#0a0e0c;
  --ma-bg-2:#0f1512;
  --ma-surface:#141b18;
  --ma-surface-2:#1a2320;
  --ma-elev:#1f2a26;

  /* Accents */
  --ma-emerald:#10b981;
  --ma-emerald-bright:#34d399;
  --ma-emerald-deep:#047857;
  --ma-gold:#d4af37;
  --ma-gold-bright:#f0cf6b;
  --ma-teal:#06b6d4;

  /* Texte */
  --ma-text:#eef5f1;
  --ma-text-2:#9fb3aa;
  --ma-text-3:#6b8078;

  /* Lignes */
  --ma-line:rgba(255,255,255,.08);
  --ma-line-2:rgba(255,255,255,.14);
  --ma-glow:rgba(16,185,129,.25);

  /* Rayons */
  --ma-r-sm:10px;
  --ma-r:16px;
  --ma-r-lg:22px;
  --ma-r-xl:28px;

  /* Ombres */
  --ma-sh-1:0 1px 2px rgba(0,0,0,.4);
  --ma-sh-2:0 6px 20px rgba(0,0,0,.45);
  --ma-sh-3:0 18px 50px rgba(0,0,0,.55);
  --ma-sh-glow:0 0 0 1px rgba(16,185,129,.22),0 12px 38px rgba(16,185,129,.16);

  /* Gabarit */
  --ma-nav-h:66px;
  --ma-banner-h:42px;
  --ma-aside-w:326px;
  --ma-max:100%;          /* pleine largeur d'ecran */
  --ma-gap:26px;

  /* Mouvement */
  --ma-ease:cubic-bezier(.22,1,.36,1);
  --ma-fast:.18s var(--ma-ease);
  --ma-mid:.32s var(--ma-ease);

  /* Degrades signature */
  --ma-grad-emerald:linear-gradient(135deg,#34d399 0%,#10b981 45%,#047857 100%);
  --ma-grad-gold:linear-gradient(135deg,#f0cf6b 0%,#d4af37 50%,#a67c00 100%);
  --ma-grad-night:linear-gradient(160deg,#141b18 0%,#0f1512 60%,#0a0e0c 100%);

  /* Compat : anciens tokens du shell conserves */
  --bg-primary:#0a0e0c;
  --bg-secondary:#0f1512;
  --bg-card:#141b18;
  --bg-header:#0a0e0c;
  --accent-green:#10b981;
  --accent-cyan:#06b6d4;
  --accent-orange:#ff6d00;
  --accent-gold:#d4af37;
  --text-primary:#eef5f1;
  --text-secondary:#9fb3aa;
  --border-color:rgba(255,255,255,.08);
  --navbar-height:66px;
  --banner-height:42px;
  --right-sidebar-width:320px;
}

/* Le shell ne style JAMAIS body : les pages le redefinissent.
   On pose seulement un fond de secours derriere tout. */
html{ background:var(--ma-bg); }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Voile decoratif : arabesque geometrique tres discrete */
.ma-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(16,185,129,.10), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(212,175,55,.07), transparent 60%),
    var(--ma-bg);
}
.ma-canvas::after{
  content:""; position:absolute; inset:0; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 2 46 12 36 22 26 12z' fill='none' stroke='%2310b981' stroke-width='1'/%3E%3Cpath d='M36 50 46 60 36 70 26 60z' fill='none' stroke='%2310b981' stroke-width='1'/%3E%3Cpath d='M2 36 12 26 22 36 12 46z' fill='none' stroke='%23d4af37' stroke-width='1'/%3E%3Cpath d='M50 36 60 26 70 36 60 46z' fill='none' stroke='%23d4af37' stroke-width='1'/%3E%3C/svg%3E");
}

/* Accessibilite : lien d'evitement */
.ma-skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ma-emerald); color:#04140e; font-weight:800;
  padding:12px 20px; border-radius:0 0 var(--ma-r-sm) 0; text-decoration:none;
}
.ma-skip:focus{ left:0; }
.ma-nav a:focus-visible,.ma-aside a:focus-visible,.ma-foot a:focus-visible,
.ma-btn:focus-visible,.ma-faq__q:focus-visible,.ma-burger:focus-visible{
  outline:2px solid var(--ma-emerald-bright); outline-offset:3px; border-radius:6px;
}

/* ============================================================
   1. BANDEAU APP  (fonctionnalite existante — conservee)
   ============================================================ */
.app-banner{
  display:flex; align-items:center; justify-content:center; gap:14px;
  height:var(--ma-banner-h); padding:0 16px;
  background:var(--ma-grad-emerald); color:#04140e;
  font-size:.86rem; font-weight:700; text-decoration:none;
  position:relative; overflow:hidden;
}
.app-banner::after{
  content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:ma-sheen 5.5s var(--ma-ease) infinite;
}
@keyframes ma-sheen{0%,72%{left:-60%}100%{left:130%}}
.app-banner img{ width:24px;height:24px;border-radius:7px;flex-shrink:0; }
.app-banner strong{ font-weight:800; letter-spacing:-.01em; }
.app-banner .store-badges{ display:flex; gap:7px; }
.app-banner .badge{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(4,20,14,.22); padding:3px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700;
}

/* ============================================================
   2. PUBLICITE HEADER  (AdSense — emplacement demande)
   ============================================================ */
.ma-ad{ width:100%; display:block; }
.ma-ad--header{
  background:var(--ma-bg-2);
  border-bottom:1px solid var(--ma-line);
  padding:10px 16px; text-align:center;
  min-height:60px;
}
.ma-ad__inner{ max-width:970px; margin:0 auto; }
.ma-ad__label{
  display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ma-text-3); margin-bottom:6px; font-weight:700;
}
.ma-ad--sidebar{ padding:4px 0; }
.ma-ad--infeed{ margin:34px 0; padding:14px 0; border-block:1px solid var(--ma-line); }

/* ============================================================
   3. NAVBAR + MENU HORIZONTAL A SOUS-MENUS
   ============================================================ */
.ma-nav{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:16px;
  height:var(--ma-nav-h); padding:0 clamp(8px,0.7vw,14px);
  background:rgba(10,14,12,.82);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--ma-line);
  box-shadow:var(--ma-sh-1);
}
.ma-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--ma-emerald),var(--ma-gold),transparent);
  opacity:.5;
}

.ma-burger{
  display:none; width:44px; height:44px; flex-shrink:0;
  align-items:center; justify-content:center;
  background:var(--ma-surface); color:var(--ma-text);
  border:1px solid var(--ma-line); border-radius:12px;
  font-size:1.1rem; cursor:pointer; transition:var(--ma-fast);
}
.ma-burger:hover{ background:var(--ma-elev); border-color:var(--ma-line-2); }

.ma-logo{
  display:flex; align-items:center; gap:11px; flex-shrink:0;
  text-decoration:none; color:var(--ma-text);
}
.ma-logo img{
  width:38px; height:38px; border-radius:11px;
  box-shadow:0 0 0 1px var(--ma-line-2),0 4px 14px rgba(0,0,0,.4);
}
.ma-logo__txt{ display:flex; flex-direction:column; line-height:1.12; }
.ma-logo__name{
  font-size:1.02rem; font-weight:800; letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--ma-text) 10%,var(--ma-gold-bright) 55%,var(--ma-emerald-bright) 95%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.ma-logo__sub{
  font-size:.6rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ma-text-3); font-weight:700; white-space:nowrap;
}

.ma-menu{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; }
.ma-menu__item{ position:relative; }
.ma-menu__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:11px;
  color:var(--ma-text-2); text-decoration:none;
  font-size:.875rem; font-weight:600; white-space:nowrap;
  transition:var(--ma-fast); border:1px solid transparent;
}
.ma-menu__link i:first-child{ font-size:.92rem; color:var(--ma-emerald); transition:var(--ma-fast); }
.ma-menu__link:hover{ color:var(--ma-text); background:var(--ma-surface); border-color:var(--ma-line); }
.ma-menu__link:hover i:first-child{ color:var(--ma-emerald-bright); }
.ma-menu__link.is-active{
  color:var(--ma-text); background:linear-gradient(180deg,rgba(16,185,129,.16),rgba(16,185,129,.06));
  border-color:rgba(16,185,129,.30);
}
.ma-menu__caret{ font-size:.62rem!important; color:var(--ma-text-3)!important; transition:transform var(--ma-mid); }
.ma-menu__item:hover .ma-menu__caret,
.ma-menu__item.is-open .ma-menu__caret{ transform:rotate(180deg); }

/* --- Sous-menu --- */
.ma-sub{
  position:absolute; top:calc(100% + 12px); left:0; z-index:950;
  min-width:262px; padding:9px;
  background:var(--ma-grad-night);
  border:1px solid var(--ma-line-2); border-radius:var(--ma-r);
  box-shadow:var(--ma-sh-3);
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
  transition:opacity var(--ma-mid),transform var(--ma-mid),visibility var(--ma-mid);
}
.ma-sub::before{
  content:""; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.ma-sub::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--ma-grad-emerald); border-radius:var(--ma-r) var(--ma-r) 0 0;
}
.ma-menu__item:hover .ma-sub,
.ma-menu__item:focus-within .ma-sub,
.ma-menu__item.is-open .ma-sub{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ma-sub a{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none;
  font-size:.845rem; font-weight:500;
  transition:var(--ma-fast);
}
.ma-sub a i{ width:17px; font-size:.86rem; color:var(--ma-emerald); flex-shrink:0; }
.ma-sub a:hover{ background:var(--ma-surface-2); color:var(--ma-text); transform:translateX(4px); }
.ma-sub a:hover i{ color:var(--ma-gold); }

/* --- Recherche --- */
.ma-search{
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  background:var(--ma-surface); border:1px solid var(--ma-line);
  border-radius:999px; padding:8px 15px; width:210px;
  transition:var(--ma-fast);
}
.ma-search:focus-within{
  border-color:rgba(16,185,129,.42); width:260px; box-shadow:0 0 0 4px rgba(16,185,129,.09);
}
.ma-search i{ color:var(--ma-text-3); font-size:.84rem; }
.ma-search input{
  flex:1; min-width:0; background:none; border:0; outline:0;
  color:var(--ma-text); font-size:.85rem; font-family:inherit;
}
.ma-search input::placeholder{ color:var(--ma-text-3); }

/* ============================================================
   4. GABARIT : contenu a GAUCHE + sidebar a DROITE
   ============================================================ */
.page-wrapper{
  /* !important indispensable : l'ancienne feuille style-new.css, encore
     chargee pour .seo-box / .page-title / .container, impose ici
     display:flex et masque la colonne de droite sous 768px. */
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--ma-aside-w) !important;
  gap:var(--ma-gap);
  max-width:var(--ma-max);
  margin:0 auto;
  padding:var(--ma-gap) clamp(8px,0.7vw,14px);
  align-items:start;
}
.main-content{
  min-width:0;
  background:var(--ma-surface);
  border:1px solid var(--ma-line);
  border-radius:var(--ma-r-lg);
  padding:clamp(18px,2.6vw,38px);
  box-shadow:var(--ma-sh-2);
  position:relative;
  /* Pas d'overflow:hidden ici : cela casserait les elements position:sticky
     et couperait les fenetres modales des pages. Le liseré du haut est donc
     arrondi manuellement. */
}
.main-content::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--ma-emerald),var(--ma-gold),var(--ma-teal));
  border-radius:var(--ma-r-lg) var(--ma-r-lg) 0 0;
}
.sidebar-right{
  /* Surtout PAS de hauteur plafonnee ici : en flex-column contraint, les
     widgets se compressent (flex-shrink par defaut) et les listes de liens
     deviennent illisibles. La colonne suit donc le flux normal et les
     widgets gardent leur hauteur naturelle. */
  position:static;
  display:flex !important; flex-direction:column; gap:18px;
  max-height:none; overflow:visible;
  padding-right:2px;
}
.sidebar-right > *{ flex:0 0 auto; }   /* aucun widget ne se comprime */
.sidebar-right::-webkit-scrollbar{ width:6px; }
.sidebar-right::-webkit-scrollbar-thumb{ background:var(--ma-line-2); border-radius:99px; }
.sidebar-right::-webkit-scrollbar-track{ background:transparent; }

/* ============================================================
   5. FIL D'ARIANE
   ============================================================ */
.ma-crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:.78rem; color:var(--ma-text-3); margin-bottom:18px;
}
.ma-crumb a{ color:var(--ma-text-2); text-decoration:none; transition:var(--ma-fast); }
.ma-crumb a:hover{ color:var(--ma-emerald-bright); }
.ma-crumb__sep{ opacity:.45; font-size:.66rem; }
.ma-crumb [aria-current]{ color:var(--ma-text); font-weight:600; }

/* ============================================================
   6. WIDGETS SIDEBAR
   ============================================================ */
.widget{
  background:var(--ma-grad-night);
  border:1px solid var(--ma-line);
  border-radius:var(--ma-r);
  overflow:hidden;
  box-shadow:var(--ma-sh-1);
  transition:border-color var(--ma-mid),transform var(--ma-mid),box-shadow var(--ma-mid);
}
.widget:hover{ border-color:var(--ma-line-2); transform:translateY(-2px); box-shadow:var(--ma-sh-2); }
.widget-title{
  display:flex; align-items:center; gap:9px;
  padding:13px 16px;
  font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ma-text); background:var(--ma-surface-2);
  border-bottom:1px solid var(--ma-line);
}
.widget-title i{ color:var(--ma-emerald); font-size:.9rem; }
.widget-title.gold i{ color:var(--ma-gold); }
.widget-body{ padding:16px; }
.widget-body p{ color:var(--ma-text-2); font-size:.85rem; line-height:1.65; }

/* Liste de liens de widget */
.ma-wlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ma-wlist a{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none; font-size:.85rem; font-weight:500;
  transition:var(--ma-fast);
}
.ma-wlist a i{ width:16px; color:var(--ma-emerald); font-size:.82rem; flex-shrink:0; }
.ma-wlist a:hover{ background:var(--ma-surface-2); color:var(--ma-text); transform:translateX(4px); }
.ma-wlist a:hover i{ color:var(--ma-gold); }

/* Widget app */
.app-widget{ text-align:center; }
.app-widget img{
  width:66px; height:66px; border-radius:17px; margin-bottom:11px;
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 1px var(--ma-line-2);
}
.app-widget h3{ font-size:1rem; font-weight:800; color:var(--ma-text); margin:0 0 6px; }
.app-widget p{ font-size:.81rem; color:var(--ma-text-2); line-height:1.6; margin:0 0 14px; }

.store-btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:11px 14px; margin-bottom:8px;
  border-radius:var(--ma-r-sm); text-decoration:none;
  font-size:.85rem; font-weight:700;
  transition:var(--ma-fast);
}
.store-btn:last-child{ margin-bottom:0; }
.store-btn.android{ background:var(--ma-grad-emerald); color:#04140e; }
.store-btn.ios{ background:var(--ma-surface-2); color:var(--ma-text); border:1px solid var(--ma-line-2); }
.store-btn:hover{ transform:translateY(-2px); box-shadow:var(--ma-sh-2); filter:brightness(1.06); }

/* ============================================================
   7. TYPOGRAPHIE DU CONTENU  (portee .main-content uniquement,
      pour ne pas perturber les composants internes des pages)
   ============================================================ */
.main-content > h1,.ma-h1{
  font-size:clamp(1.65rem,3.4vw,2.5rem); line-height:1.16; font-weight:800;
  letter-spacing:-.025em; color:var(--ma-text); margin:0 0 16px;
}
.ma-h1 .ma-h1__accent,
.main-content > h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--ma-emerald-bright),var(--ma-gold-bright));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.main-content > h2,.ma-h2{
  font-size:clamp(1.28rem,2.3vw,1.72rem); line-height:1.26; font-weight:800;
  letter-spacing:-.018em; color:var(--ma-text);
  margin:38px 0 14px; padding-left:15px; position:relative;
}
.main-content > h2::before,.ma-h2::before{
  content:""; position:absolute; left:0; top:.16em; bottom:.16em; width:4px;
  background:var(--ma-grad-emerald); border-radius:99px;
}
.main-content > h3,.ma-h3{
  font-size:clamp(1.06rem,1.7vw,1.25rem); font-weight:700;
  color:var(--ma-text); margin:26px 0 10px; letter-spacing:-.012em;
}
.ma-lead{
  font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.75;
  color:var(--ma-text-2); margin:0 0 24px;
  padding:16px 20px; border-left:3px solid var(--ma-emerald);
  background:linear-gradient(90deg,rgba(16,185,129,.09),transparent);
  border-radius:0 var(--ma-r-sm) var(--ma-r-sm) 0;
}
.ma-prose{ color:var(--ma-text-2); font-size:1rem; line-height:1.8; }
.ma-prose p{ margin:0 0 18px; }
.ma-prose strong,.ma-prose b{ color:var(--ma-text); font-weight:700; }
.ma-prose em{ color:var(--ma-gold-bright); font-style:italic; }
.ma-prose a{ color:var(--ma-emerald-bright); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.ma-prose a:hover{ color:var(--ma-gold-bright); }
.ma-prose ul,.ma-prose ol{ margin:0 0 20px; padding-left:22px; }
.ma-prose li{ margin-bottom:9px; }
.ma-prose ul li::marker{ color:var(--ma-emerald); }
.ma-prose ol li::marker{ color:var(--ma-gold); font-weight:700; }
.ma-prose img{ max-width:100%; height:auto; border-radius:var(--ma-r); }
.ma-prose blockquote{
  margin:24px 0; padding:18px 22px;
  background:var(--ma-surface-2); border-left:4px solid var(--ma-gold);
  border-radius:0 var(--ma-r) var(--ma-r) 0; color:var(--ma-text);
}

/* ============================================================
   8. FAQ  (bas de page — cible les rich results Google)
   ============================================================ */
.ma-faq{
  margin:46px 0 8px; padding-top:32px;
  border-top:1px solid var(--ma-line);
}
.ma-faq__head{ margin-bottom:22px; }
.ma-faq__kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ma-gold); margin-bottom:9px;
}
.ma-faq__kicker::before{ content:""; width:22px; height:2px; background:var(--ma-gold); border-radius:99px; }
.ma-faq__title{
  font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:800; letter-spacing:-.02em;
  color:var(--ma-text); margin:0;
}
.ma-faq__list{ display:flex; flex-direction:column; gap:11px; }
.ma-faq__item{
  background:var(--ma-surface-2); border:1px solid var(--ma-line);
  border-radius:var(--ma-r); overflow:hidden;
  transition:border-color var(--ma-mid),box-shadow var(--ma-mid);
}
.ma-faq__item[open]{ border-color:rgba(16,185,129,.34); box-shadow:var(--ma-sh-glow); }
.ma-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 19px; cursor:pointer; list-style:none;
  font-size:.98rem; font-weight:700; color:var(--ma-text); line-height:1.45;
  transition:var(--ma-fast);
}
.ma-faq__q::-webkit-details-marker{ display:none; }
.ma-faq__q:hover{ background:var(--ma-elev); }
.ma-faq__icon{
  flex-shrink:0; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(16,185,129,.14); color:var(--ma-emerald-bright);
  font-size:.7rem; transition:transform var(--ma-mid),background var(--ma-mid);
}
.ma-faq__item[open] .ma-faq__icon{ transform:rotate(180deg); background:var(--ma-emerald); color:#04140e; }
.ma-faq__a{
  padding:0 19px 18px; color:var(--ma-text-2);
  font-size:.93rem; line-height:1.78;
}
.ma-faq__a p{ margin:0 0 12px; }
.ma-faq__a p:last-child{ margin-bottom:0; }
.ma-faq__a strong{ color:var(--ma-text); font-weight:700; }
.ma-faq__a a{ color:var(--ma-emerald-bright); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   9. BANDEAU APP EN FIN DE PAGE
   ============================================================ */
.ma-appcta{
  max-width:var(--ma-max); margin:0 auto var(--ma-gap);
  padding:clamp(22px,3vw,38px) clamp(16px,2vw,34px);
  background:
    radial-gradient(760px 300px at 8% 0%,rgba(16,185,129,.20),transparent 62%),
    radial-gradient(600px 280px at 96% 100%,rgba(212,175,55,.16),transparent 60%),
    var(--ma-surface);
  border:1px solid var(--ma-line-2); border-radius:var(--ma-r-xl);
  box-shadow:var(--ma-sh-2);
  display:flex; align-items:center; gap:clamp(16px,3vw,36px); flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.ma-appcta__icon{
  width:84px; height:84px; border-radius:22px; flex-shrink:0;
  box-shadow:0 12px 34px rgba(0,0,0,.5),0 0 0 1px var(--ma-line-2);
}
.ma-appcta__txt{ flex:1; min-width:230px; }
.ma-appcta__txt h2{
  font-size:clamp(1.18rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.02em;
  color:var(--ma-text); margin:0 0 8px; padding:0;
}
.ma-appcta__txt h2::before{ display:none; }
.ma-appcta__txt p{ color:var(--ma-text-2); font-size:.93rem; line-height:1.68; margin:0; }
.ma-appcta__btns{ display:flex; gap:11px; flex-wrap:wrap; }
.ma-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:var(--ma-r-sm);
  font-size:.9rem; font-weight:700; text-decoration:none;
  transition:var(--ma-fast); white-space:nowrap;
}
.ma-btn i{ font-size:1.1rem; }
.ma-btn--primary{ background:var(--ma-grad-emerald); color:#04140e; }
.ma-btn--ghost{ background:var(--ma-surface-2); color:var(--ma-text); border:1px solid var(--ma-line-2); }
.ma-btn:hover{ transform:translateY(-2px); box-shadow:var(--ma-sh-2); filter:brightness(1.07); }

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{
  background:var(--ma-bg-2);
  border-top:1px solid var(--ma-line);
  margin-top:10px;
  position:relative;
}
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--ma-emerald),var(--ma-gold),transparent);
  opacity:.65;
}
.footer-grid{
  max-width:var(--ma-max); margin:0 auto;
  padding:clamp(30px,4vw,54px) clamp(10px,1vw,20px) 26px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(22px,3vw,44px);
}
.footer-col h4{
  font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ma-text); margin:0 0 15px; padding-bottom:11px;
  border-bottom:1px solid var(--ma-line);
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:9px; }
.footer-col a{
  color:var(--ma-text-2); text-decoration:none; font-size:.87rem;
  transition:var(--ma-fast); display:inline-flex; align-items:center; gap:7px;
}
.footer-col a::before{
  content:"›"; color:var(--ma-emerald); font-weight:800;
  opacity:0; transform:translateX(-5px); transition:var(--ma-fast);
}
.footer-col a:hover{ color:var(--ma-emerald-bright); }
.footer-col a:hover::before{ opacity:1; transform:translateX(0); }
.footer-bottom{
  border-top:1px solid var(--ma-line);
  padding:20px 16px 26px; text-align:center;
  color:var(--ma-text-3); font-size:.83rem; line-height:1.7;
}
.footer-bottom a{ color:var(--ma-text-2); text-decoration:none; margin:0 9px; transition:var(--ma-fast); }
.footer-bottom a:hover{ color:var(--ma-emerald-bright); }

/* ============================================================
   11. ARTICLES RELATIFS  (maillage interne)
   ============================================================ */
.ma-rel{ margin:46px 0 8px; padding-top:32px; border-top:1px solid var(--ma-line); }
.ma-rel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.ma-rel__title{
  font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:800; letter-spacing:-.02em;
  color:var(--ma-text); margin:0; padding:0;
}
.ma-rel__title::before{ display:none; }
.ma-rel__all{ font-size:.85rem; font-weight:700; color:var(--ma-emerald-bright); text-decoration:none; white-space:nowrap; }
.ma-rel__all:hover{ color:var(--ma-gold-bright); }
.ma-rel__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:15px; }

.ma-card{
  display:flex; flex-direction:column;
  background:var(--ma-surface-2); border:1px solid var(--ma-line);
  border-radius:var(--ma-r); overflow:hidden; text-decoration:none;
  transition:transform var(--ma-mid),border-color var(--ma-mid),box-shadow var(--ma-mid);
  position:relative;
}
.ma-card:hover{ transform:translateY(-4px); border-color:rgba(16,185,129,.38); box-shadow:var(--ma-sh-glow); }
.ma-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ma-elev); }
.ma-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ma-ease); }
.ma-card:hover .ma-card__media img{ transform:scale(1.07); }
.ma-card__fallback{
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--ma-grad-night); color:var(--ma-emerald); font-size:1.9rem; opacity:.55;
}
.ma-card__tag{
  position:absolute; top:9px; left:9px; z-index:2;
  padding:4px 10px; border-radius:999px;
  background:rgba(10,14,12,.82); backdrop-filter:blur(8px);
  color:var(--ma-emerald-bright); font-size:.65rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid rgba(16,185,129,.28);
}
.ma-card__body{ padding:13px 15px 15px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ma-card__title{
  font-size:.93rem; font-weight:700; line-height:1.4; color:var(--ma-text);
  margin:0; letter-spacing:-.01em;
}
.ma-card:hover .ma-card__title{ color:var(--ma-emerald-bright); }
.ma-card__desc{
  font-size:.79rem; line-height:1.55; color:var(--ma-text-3); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ma-card__go{
  margin-top:auto; padding-top:9px;
  font-size:.75rem; font-weight:700; color:var(--ma-text-3);
  display:inline-flex; align-items:center; gap:6px; transition:var(--ma-fast);
}
.ma-card:hover .ma-card__go{ color:var(--ma-gold); gap:10px; }

/* Lien contextuel auto-genere dans le texte */
.ma-ilink{
  color:var(--ma-emerald-bright); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(16,185,129,.42); transition:var(--ma-fast);
}
.ma-ilink:hover{ color:var(--ma-gold-bright); text-decoration-color:var(--ma-gold-bright); }

/* Navigation precedent / suivant */
.ma-pager{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:26px; }
.ma-pager a{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 17px; border-radius:var(--ma-r);
  background:var(--ma-surface-2); border:1px solid var(--ma-line);
  text-decoration:none; transition:var(--ma-fast);
}
.ma-pager a:hover{ border-color:rgba(16,185,129,.34); transform:translateY(-2px); }
.ma-pager__dir{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ma-text-3); }
.ma-pager__t{ font-size:.89rem; font-weight:700; color:var(--ma-text); line-height:1.4; }
.ma-pager__next{ text-align:right; }

/* ============================================================
   12. SIDEBAR MOBILE (tiroir gauche)
   Le voile s'appelle .ma-overlay et NON .overlay : 93 pages
   contiennent une regle « #overlay { display:none !important } »
   qui rendrait le voile invisible et empecherait la fermeture
   au clic en dehors du menu.
   ============================================================ */
.ma-overlay{
  position:fixed; inset:0; z-index:940;
  background:rgba(0,0,0,.66); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:var(--ma-mid);
}
.ma-overlay.active{ opacity:1; visibility:visible; }
.sidebar-left{
  position:fixed; top:0; left:0; bottom:0; z-index:960;
  width:min(310px,86vw); overflow-y:auto; overscroll-behavior:contain;
  background:var(--ma-grad-night); border-right:1px solid var(--ma-line-2);
  transform:translateX(-102%); transition:transform var(--ma-mid);
  box-shadow:var(--ma-sh-3);
}
.sidebar-left.active{ transform:translateX(0); }
.sidebar-left-header{
  padding:22px 20px; border-bottom:1px solid var(--ma-line);
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(212,175,55,.07));
  position:sticky; top:0; z-index:2; backdrop-filter:blur(12px);
}
.sidebar-left-header h2{
  font-size:1.02rem; font-weight:800; color:var(--ma-text); margin:0 0 5px; letter-spacing:-.01em;
}
.sidebar-left-header p{ font-size:.76rem; color:var(--ma-text-2); margin:0; }
.sidebar-menu{ list-style:none; margin:0; padding:11px 10px 30px; }
.sidebar-menu li{ margin-bottom:1px; }
.sidebar-menu a{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none; font-size:.88rem; font-weight:500;
  transition:var(--ma-fast);
}
.sidebar-menu a i{ width:18px; color:var(--ma-emerald); font-size:.9rem; flex-shrink:0; }
.sidebar-menu a:hover{ background:var(--ma-surface-2); color:var(--ma-text); transform:translateX(4px); }
.sidebar-menu a.active{
  background:linear-gradient(90deg,rgba(16,185,129,.18),transparent);
  color:var(--ma-text); font-weight:700;
  box-shadow:inset 3px 0 0 var(--ma-emerald);
}
.sidebar-divider{ height:1px; background:var(--ma-line); margin:11px 13px; }

/* ============================================================
   13. BOUTON RETOUR EN HAUT
      (la navigation basse mobile a ete retiree : un seul menu,
       horizontal sur ordinateur, en tiroir sur mobile)
   ============================================================ */
#scrollTopBtn{
  display:none; position:fixed; right:18px; bottom:18px; z-index:920;
  width:46px; height:46px; border:0; border-radius:50%;
  background:var(--ma-grad-emerald); color:#04140e;
  font-size:1rem; cursor:pointer; box-shadow:var(--ma-sh-2);
  transition:var(--ma-fast);
}
#scrollTopBtn:hover{ transform:translateY(-3px) scale(1.06); }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* Grands ecrans : sidebar un peu plus etroite */
@media (max-width:1400px){
  :root{ --ma-aside-w:300px; --ma-gap:18px; }
  .ma-menu__link{ padding:9px 10px; font-size:.84rem; }
  .ma-search{ width:180px; }
}

/* Le menu horizontal ne tient plus : bascule en tiroir */
@media (max-width:1150px){
  .ma-burger{ display:inline-flex; }
  .ma-menu{ display:none; }
  .ma-nav{ gap:12px; }
  .ma-logo{ margin-right:auto; }
  .ma-search{ width:200px; }
}

/* La colonne de droite ne passe sous le contenu qu'en dessous de 900px */
@media (max-width:900px){
  .page-wrapper{ grid-template-columns:minmax(0,1fr) !important; }
  .sidebar-right{
    position:static; max-height:none; overflow:visible;
    display:grid !important; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px;
  }
  .main-content{ border-radius:var(--ma-r); }
}

/* Mobile */
@media (max-width:768px){
  :root{ --ma-nav-h:58px; --ma-gap:14px; }
  .app-banner{ font-size:.76rem; gap:9px; padding:0 11px; }
  .app-banner .store-badges{ display:none; }
  .ma-logo img{ width:33px; height:33px; }
  .ma-logo__name{ font-size:.94rem; }
  .ma-logo__sub{ display:none; }
  .ma-search{ display:none; }
  .ma-search--mobile{ display:flex; width:100%; margin:0 0 16px; }
  .ma-nav{ padding:0 11px; }
  .page-wrapper{ padding:12px 8px 18px; }
  .main-content{ padding:17px 14px; border-radius:var(--ma-r); }
  #scrollTopBtn{ bottom:16px; right:13px; width:42px; height:42px; }
  .ma-ad--header{ padding:8px 10px; min-height:0; }
  .ma-appcta{ flex-direction:column; text-align:center; border-radius:var(--ma-r-lg); }
  .ma-appcta__btns{ justify-content:center; width:100%; }
  .ma-btn{ flex:1; justify-content:center; }
  .ma-rel__grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; }
  .ma-pager{ grid-template-columns:1fr; }
  .footer-grid{ padding-inline:14px; }
  .main-content > h2,.ma-h2{ margin-top:30px; }
}

@media (max-width:480px){
  .ma-rel__grid{ grid-template-columns:1fr 1fr; }
  .ma-card__body{ padding:10px 11px 12px; }
  .ma-card__title{ font-size:.85rem; }
  .ma-card__desc{ display:none; }
  .ma-faq__q{ padding:13px 14px; font-size:.91rem; }
  .ma-faq__a{ padding:0 14px 15px; font-size:.88rem; }
  .app-banner strong{ font-size:.74rem; }
  .sidebar-right{ grid-template-columns:1fr; }
}

/* Impression */
@media print{
  .app-banner,.ma-nav,.sidebar-left,.sidebar-right,.ma-overlay,
  #scrollTopBtn,.ma-ad,.ma-appcta,.site-footer{ display:none!important; }
  .page-wrapper{ display:block; padding:0; }
  .main-content{ border:0; box-shadow:none; padding:0; background:#fff; color:#000; }
  .ma-faq__item{ break-inside:avoid; }
}

/* Utilitaires */
.ma-visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   15. HARMONISATION DU CONTENU EXISTANT
   ------------------------------------------------------------
   Les 93 pages ont chacune leur propre <style>. Cette couche
   rehabille leurs composants avec le nouveau langage visuel.
   Tout est porte par « .main-content X » (specificite 0,0,2,0)
   pour passer devant les regles simples des pages, avec
   !important uniquement la ou les pages en utilisent aussi.
   AUCUN element n'est masque : c'est purement visuel.
   ============================================================ */

/* --- Conteneurs generiques --- */
.main-content .container,
.main-content .box,
.main-content .section,
.main-content .subsection,
.main-content .content{
  background:var(--ma-surface-2) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r) !important;
  padding:clamp(14px,2vw,22px) !important;
  margin:0 0 18px !important;
  box-shadow:var(--ma-sh-1);
  color:var(--ma-text-2);
  max-width:100% !important;
}
.main-content .subsection{
  background:var(--ma-surface) !important;
  border-left:3px solid var(--ma-emerald) !important;
}
.main-content .container > *:last-child,
.main-content .section > *:last-child,
.main-content .box > *:last-child{ margin-bottom:0; }

/* --- Titres internes des pages --- */
.main-content .page-title-container{
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(212,175,55,.07)) !important;
  border:1px solid var(--ma-line-2) !important;
  border-radius:var(--ma-r-lg) !important;
  padding:clamp(18px,2.6vw,30px) !important;
  margin-bottom:24px !important;
  text-align:center;
}
.main-content .page-title{
  font-size:clamp(1.5rem,3vw,2.2rem) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
  line-height:1.18 !important;
  margin:0 0 8px !important;
  background:linear-gradient(100deg,var(--ma-emerald-bright),var(--ma-gold-bright)) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:var(--ma-emerald-bright) !important;
}
.main-content .section-title,
.main-content .dashboard-title{
  font-size:clamp(1.1rem,2vw,1.45rem) !important;
  font-weight:800 !important; color:var(--ma-text) !important;
  letter-spacing:-.018em; margin:0 0 12px !important;
  padding-left:14px; position:relative;
}
.main-content .section-title::before,
.main-content .dashboard-title::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
  background:var(--ma-grad-emerald); border-radius:99px;
}
.main-content .dashboard-subtitle{ color:var(--ma-text-3) !important; font-size:.86rem !important; }

/* --- Cartes et tuiles --- */
.main-content .card,
.main-content .category-card,
.main-content .section-card,
.main-content .dashboard-item,
.main-content .suggestion-card{
  background:var(--ma-grad-night) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r) !important;
  box-shadow:var(--ma-sh-1);
  transition:transform var(--ma-mid),border-color var(--ma-mid),box-shadow var(--ma-mid);
  overflow:hidden;
}
.main-content .card:hover,
.main-content .category-card:hover,
.main-content .section-card:hover,
.main-content .dashboard-item:hover{
  transform:translateY(-4px);
  border-color:rgba(16,185,129,.34) !important;
  box-shadow:var(--ma-sh-glow);
}
.main-content .card-icon,
.main-content .icon{
  color:var(--ma-emerald) !important;
  transition:transform var(--ma-mid),color var(--ma-mid);
}
.main-content .card:hover .card-icon,
.main-content .card:hover .icon{ transform:scale(1.12) rotate(-6deg); color:var(--ma-gold) !important; }
.main-content .cards-row,
.main-content .square-shortcuts-row{ gap:14px !important; }

/* --- Hadiths et douas --- */
.main-content .hadith,
.main-content .hadith-card,
.main-content .doua-card{
  background:var(--ma-surface-2) !important;
  border:1px solid var(--ma-line) !important;
  border-left:3px solid var(--ma-gold) !important;
  border-radius:0 var(--ma-r) var(--ma-r) 0 !important;
  padding:clamp(14px,2vw,20px) !important;
  margin-bottom:14px !important;
}
.main-content .hadith-number,
.main-content .num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 9px;
  border-radius:999px !important;
  background:rgba(16,185,129,.15) !important;
  color:var(--ma-emerald-bright) !important;
  font-weight:800 !important; font-size:.82rem !important;
}
.main-content .hadith-text,
.main-content .hadith-translation,
.main-content .translation,
.main-content .traduction{
  color:var(--ma-text) !important;
  font-size:1rem !important; line-height:1.78 !important;
}
.main-content .hadith-source,
.main-content .reference,
.main-content .doua-source{
  color:var(--ma-gold) !important;
  font-size:.8rem !important; font-weight:700 !important;
  font-style:normal !important;
}
.main-content .doua-title{
  color:var(--ma-text) !important; font-weight:800 !important;
  font-size:1.02rem !important;
}

/* --- Texte arabe : lisibilite --- */
.main-content .arabic,
.main-content .arabe,
.main-content .arabic-text,
.main-content .doua-arabic{
  font-size:clamp(1.35rem,2.6vw,1.75rem) !important;
  line-height:2.1 !important;
  color:var(--ma-emerald-bright) !important;
  direction:rtl; text-align:right;
  font-family:'Traditional Arabic','Amiri','Scheherazade New',serif;
}
.main-content .phonetic,
.main-content .phonetique{
  color:var(--ma-text-3) !important;
  font-style:italic !important; font-size:.9rem !important;
}

/* --- Bloc SEO de bas de page --- */
.main-content .seo-box{
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-lg) !important;
  padding:clamp(18px,2.6vw,30px) !important;
  margin-top:34px !important;
  color:var(--ma-text-2) !important;
  line-height:1.8 !important;
}
.main-content .seo-box h2,
.main-content .seo-box h3{ color:var(--ma-text) !important; letter-spacing:-.018em; }
.main-content .seo-box strong{ color:var(--ma-text) !important; }
.main-content .seo-box a{ color:var(--ma-emerald-bright) !important; text-underline-offset:3px; }

/* --- Notes et encadres d'information --- */
.main-content .note,
.main-content .info,
.main-content .etape{
  background:linear-gradient(90deg,rgba(16,185,129,.10),transparent) !important;
  border-left:3px solid var(--ma-emerald) !important;
  border-radius:0 var(--ma-r-sm) var(--ma-r-sm) 0 !important;
  padding:13px 17px !important;
  color:var(--ma-text-2) !important;
}

/* --- Boutons du contenu --- */
.main-content .audio-btn,
.main-content button:not(.ma-burger):not(#scrollTopBtn),
.main-content .btn{
  border-radius:var(--ma-r-sm) !important;
  font-weight:700;
  transition:transform var(--ma-fast),filter var(--ma-fast),box-shadow var(--ma-fast);
}
.main-content .audio-btn:hover,
.main-content button:not(.ma-burger):not(#scrollTopBtn):hover,
.main-content .btn:hover{ transform:translateY(-2px); filter:brightness(1.08); box-shadow:var(--ma-sh-2); }

/* --- Tableaux --- */
.main-content table{
  width:100%; border-collapse:collapse;
  background:var(--ma-surface-2); border-radius:var(--ma-r); overflow:hidden;
  margin-bottom:18px;
}
.main-content table th{
  background:var(--ma-elev); color:var(--ma-text);
  font-size:.82rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:12px 14px; text-align:left; border-bottom:1px solid var(--ma-line-2);
}
.main-content table td{
  padding:11px 14px; color:var(--ma-text-2);
  border-bottom:1px solid var(--ma-line); font-size:.92rem;
}
.main-content table tr:last-child td{ border-bottom:0; }
.main-content table tr:hover td{ background:rgba(255,255,255,.028); color:var(--ma-text); }

/* --- Liens et separateurs du contenu --- */
.main-content a:not(.ma-card):not(.ma-btn):not(.ma-ilink):not(.store-btn):not(.mh-cat__all):not(.ma-rel__all){
  color:var(--ma-emerald-bright);
  text-underline-offset:3px;
}
.main-content a:not(.ma-card):not(.ma-btn):not(.store-btn):hover{ color:var(--ma-gold-bright); }
.main-content hr{ border:0; height:1px; background:var(--ma-line); margin:26px 0; }

/* --- Images du contenu --- */
.main-content img{ max-width:100%; height:auto; }
.main-content .position-img{ border-radius:var(--ma-r) !important; border:1px solid var(--ma-line); }

/* --- Page d'accueil : les widgets d'origine --- */
.ma-home-legacy{
  background:transparent !important;
  max-width:100% !important;
  padding:0 !important;
  color:var(--ma-text-2) !important;
}
.ma-home-legacy .container{ margin-bottom:18px !important; }

/* ============================================================
   16. BANDEAU APP FIXE + DERNIERS BLOCS CLAIRS
   ============================================================ */

/* Le bandeau de telechargement reste visible en haut, le menu se colle
   juste en dessous. */
.app-banner{
  position:sticky; top:0; z-index:910;
}
.ma-nav{ top:var(--ma-banner-h); }

/* Blocs herites restes en clair (fond blanc ou pastel) : on les repasse
   dans la palette sombre. Purement visuel, rien n'est masque. */
.main-content .square-shortcut-item,
.main-content .store-link,
.main-content .android-link,
.main-content .ios-link,
.main-content .site-link-box,
.main-content .suggestion-card,
.main-content .verse-header,
.main-content .surah-info{
  background:var(--ma-surface-2) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r) !important;
  color:var(--ma-text) !important;
  box-shadow:var(--ma-sh-1) !important;
  transition:transform var(--ma-mid),border-color var(--ma-mid),box-shadow var(--ma-mid);
}
.main-content .square-shortcut-item:hover,
.main-content .store-link:hover,
.main-content .site-link-box:hover{
  transform:translateY(-3px);
  border-color:rgba(16,185,129,.34) !important;
  box-shadow:var(--ma-sh-glow) !important;
}
.main-content .square-shortcut-item *,
.main-content .store-link *,
.main-content .site-link-box *{ color:var(--ma-text) !important; }
.main-content .square-shortcut-icon,
.main-content .store-platform{ color:var(--ma-emerald-bright) !important; }
.main-content .store-name{ color:var(--ma-text) !important; font-weight:700; }

/* Champs de formulaire du contenu (selecteur de sourate, recherches...) */
.main-content select,
.main-content input[type="text"],
.main-content input[type="search"],
.main-content input[type="number"],
.main-content textarea{
  background:var(--ma-surface-2) !important;
  color:var(--ma-text) !important;
  border:1px solid var(--ma-line-2) !important;
  border-radius:var(--ma-r-sm) !important;
  padding:11px 14px !important;
  font-family:inherit; font-size:.95rem;
}
.main-content select:focus,
.main-content input:focus,
.main-content textarea:focus{
  outline:none !important;
  border-color:rgba(16,185,129,.5) !important;
  box-shadow:0 0 0 4px rgba(16,185,129,.10) !important;
}
.main-content select option{ background:var(--ma-surface-2); color:var(--ma-text); }

/* ============================================================
   17. WIDGETS DE LA PAGE D'ACCUEIL
   L'ancien CSS de l'accueil (1339 lignes) a ete retire : ces
   regles rehabillent ses widgets avec le design actuel, sans
   toucher au HTML ni au JavaScript qui les animent.
   ============================================================ */

.ma-home-legacy{ display:block; }
/* Ne PAS masquer les <br> : certains libelles de cartes s'en servent
   pour passer a la ligne (« Dernier<br>Sermon »). */

/* --- Bloc horaires de priere --- */
.ma-home-legacy #location{
  text-align:center; font-size:1.05rem; font-weight:800; color:var(--ma-text);
  margin-bottom:14px;
}
.ma-home-legacy .date-box{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;
  margin-bottom:18px;
}
.ma-home-legacy .date-box > div{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 16px; border-radius:var(--ma-r-sm);
  background:var(--ma-elev); border:1px solid var(--ma-line);
  color:var(--ma-text); font-size:.92rem; font-weight:600;
}
.ma-home-legacy .date-box i{ color:var(--ma-emerald); }

/* --- Raccourcis carres --- */
.ma-home-legacy .square-shortcuts-container{ margin:18px 0; }
.ma-home-legacy .square-shortcuts-row{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px !important;
}
.ma-home-legacy .square-shortcut-item{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:18px 10px !important; text-decoration:none; text-align:center;
  min-height:auto !important; width:auto !important;
}
.ma-home-legacy .square-shortcut-icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(16,185,129,.14) !important; font-size:1.2rem;
  border:1px solid rgba(16,185,129,.24);
}
.ma-home-legacy .square-shortcut-label{ font-size:.84rem; font-weight:700; }

/* --- Rangees de cartes --- */
.ma-home-legacy .cards-row{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px !important; margin-bottom:12px;
}
.ma-home-legacy .large-card{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:20px 12px !important; border-radius:var(--ma-r) !important;
  background:var(--ma-grad-night) !important; border:1px solid var(--ma-line) !important;
  color:var(--ma-text) !important; text-decoration:none; text-align:center;
  box-shadow:var(--ma-sh-1);
  transition:transform var(--ma-mid),border-color var(--ma-mid),box-shadow var(--ma-mid);
}
.ma-home-legacy .large-card:hover{
  transform:translateY(-4px);
  border-color:rgba(16,185,129,.34) !important; box-shadow:var(--ma-sh-glow);
}
.ma-home-legacy .card-icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(16,185,129,.13) !important; color:var(--ma-emerald-bright) !important;
  font-size:1.25rem; border:1px solid rgba(16,185,129,.22);
  transition:transform var(--ma-mid),color var(--ma-mid);
}
.ma-home-legacy .large-card:hover .card-icon{ transform:rotate(-8deg) scale(1.08); color:var(--ma-gold) !important; }
.ma-home-legacy .card-label{ font-size:.85rem; font-weight:700; line-height:1.35; color:var(--ma-text) !important; }

/* --- Titres et textes internes --- */
.ma-home-legacy .title{
  font-size:clamp(1.15rem,2.2vw,1.5rem) !important; font-weight:800 !important;
  color:var(--ma-text) !important; margin:0 0 12px !important; text-align:center;
  letter-spacing:-.02em;
}
.ma-home-legacy .description{ color:var(--ma-text-2) !important; font-size:.92rem; line-height:1.7; }

/* --- Lecteur de Coran --- */
.ma-home-legacy .progress-bar{
  height:6px !important; border-radius:99px !important;
  background:var(--ma-elev) !important; overflow:hidden; margin:12px 0 6px;
}
.ma-home-legacy .progress{
  height:100%; border-radius:99px !important;
  background:var(--ma-grad-emerald) !important;
}
.ma-home-legacy .time-display{
  display:flex; justify-content:space-between;
  color:var(--ma-text-3) !important; font-size:.78rem; font-weight:700;
}

/* --- Sourate du jour / versets --- */
.ma-home-legacy .surah-info,
.ma-home-legacy .verse-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 16px !important; margin-bottom:12px;
}
.ma-home-legacy .verse-number{
  display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 9px;
  border-radius:999px; background:rgba(212,175,55,.15);
  color:var(--ma-gold-bright); font-weight:800; font-size:.8rem;
}
/* Les numeros de versets s'alignent sur une ligne, et reviennent a la
   ligne si besoin. En colonne, ils s'empilaient un par ligne. */
.ma-home-legacy .verses-container{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:10px;
}

/* --- Liens vers les autres sites / stores --- */
.ma-home-legacy .site-link-box,
.ma-home-legacy .store-link{
  display:flex !important; align-items:center; gap:14px;
  padding:14px 18px !important; text-decoration:none;
}
.ma-home-legacy .store-icon,
.ma-home-legacy .icon-container{
  width:44px; height:44px; flex-shrink:0; border-radius:13px;
  display:grid !important; place-items:center;
  background:rgba(16,185,129,.13) !important; color:var(--ma-emerald-bright) !important;
  font-size:1.2rem;
}
.ma-home-legacy .store-platform{ font-size:.72rem !important; color:var(--ma-text-3) !important; }
.ma-home-legacy .store-name{ font-size:.98rem !important; font-weight:800 !important; }

/* --- Divers --- */
.ma-home-legacy .suggestion-card{ padding:18px !important; }
.ma-home-legacy .rating-container{ text-align:center; }
.ma-home-legacy .share-button{
  background:var(--ma-grad-emerald) !important; color:#04140e !important;
  border:0 !important; padding:11px 20px !important; border-radius:var(--ma-r-sm) !important;
  font-weight:800 !important; cursor:pointer;
}
.ma-home-legacy .douas-loading{ color:var(--ma-text-3) !important; text-align:center; padding:18px; }
.ma-home-legacy iframe{ max-width:100%; border-radius:var(--ma-r); border:1px solid var(--ma-line); }

/* ============================================================
   18. DERNIERS BLOCS HERITES DE L'ACCUEIL
   ============================================================ */

/* Numero de verset : etiquette compacte, pas une barre pleine largeur */
.ma-home-legacy .verse-number{
  display:inline-grid !important; width:fit-content !important;
  justify-self:start !important; place-items:center;
  min-width:32px; height:28px; padding:0 11px !important;
  border-radius:999px !important;
  background:rgba(212,175,55,.15) !important; color:var(--ma-gold-bright) !important;
  font-weight:800 !important; font-size:.8rem !important;
}

/* Bloc hadith du jour */
.ma-home-legacy #hadithCard{
  background:var(--ma-surface-2) !important;
  border:1px solid var(--ma-line) !important;
  border-left:3px solid var(--ma-gold) !important;
  border-radius:0 var(--ma-r) var(--ma-r) 0 !important;
  padding:18px !important;
}
.ma-home-legacy .hadith-content{
  background:transparent !important;
  color:var(--ma-text) !important;
  font-size:1.02rem !important; line-height:1.78 !important;
  padding:0 !important;
}
.ma-home-legacy #hadithCard .logo{ color:var(--ma-text-3) !important; font-size:.8rem; }

/* Widget douas */
.ma-home-legacy .douas-content{
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r) !important;
}
.ma-home-legacy .douas-header-btn{
  background:var(--ma-elev) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-sm) !important;
  color:var(--ma-text) !important;
}
.ma-home-legacy .doua-mini-header{
  background:rgba(16,185,129,.14) !important;
  color:var(--ma-emerald-bright) !important;
  border-radius:var(--ma-r-sm) var(--ma-r-sm) 0 0 !important;
}
.ma-home-legacy .doua-mini-btn{
  background:var(--ma-elev) !important; color:var(--ma-text) !important;
  border:1px solid var(--ma-line) !important; border-radius:var(--ma-r-sm) !important;
}
.ma-home-legacy .douas-voir-tout{
  background:var(--ma-grad-emerald) !important; color:#04140e !important;
  border-radius:var(--ma-r-sm) !important; font-weight:800 !important;
}

/* Boutons sans classe (lecteur de Coran) */
.ma-home-legacy button:not(.share-button):not(.doua-mini-btn){
  background:var(--ma-grad-emerald) !important;
  color:#04140e !important;
  border:0 !important; border-radius:var(--ma-r-sm) !important;
  padding:11px 20px !important; font-weight:800 !important; cursor:pointer;
}
.ma-home-legacy .share-button{
  background:var(--ma-grad-emerald) !important; color:#04140e !important;
}

/* Liens de notation / stores */
.ma-home-legacy .rating-container{ display:flex; flex-direction:column; gap:10px; }
.ma-home-legacy .store-link .store-text{ display:flex; flex-direction:column; gap:2px; }

/* Titres soulignes herites */
.ma-home-legacy a u,
.ma-home-legacy u{ text-decoration:none; }

/* Les cartes de l'accueil portent des couleurs de bordure en style inline
   (bleu, orange, rouge...). On les ramene a la palette du site. */
.ma-home-legacy .large-card[style]{
  border-color:var(--ma-line) !important;
  box-shadow:var(--ma-sh-1) !important;
}
.ma-home-legacy .large-card[style]:hover{
  border-color:rgba(16,185,129,.38) !important;
  box-shadow:var(--ma-sh-glow) !important;
}
.ma-home-legacy .card-label{ white-space:normal; }

/* ============================================================
   19. BANNIERE DE MARQUE DANS LE HERO
   img/Muslim-Alim-Header.jpg : minarets et coupoles.
   Affichee en silhouette (mix-blend-mode:luminosity) pour qu'elle
   prenne les teintes du site au lieu de son rose d'origine, et
   fondue par un masque degrade vers le bas du hero.
   ============================================================ */
.mh-hero__skyline{
  position:absolute; left:0; right:0; bottom:0; z-index:-1;
  height:clamp(120px,32%,210px);
  background:url('/img/Muslim-Alim-Header.jpg') center bottom / cover no-repeat;
  opacity:.42;
  mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 55%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 55%,#000 100%);
  pointer-events:none;
}
/* Voile sombre pour garder le texte parfaitement lisible par-dessus */
.mh-hero__skyline::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent,rgba(10,14,12,.55));
}
@media (max-width:768px){
  .mh-hero__skyline{ height:clamp(90px,26%,140px); opacity:.34; }
}

/* ============================================================
   20. BANNIERE DE MARQUE EN TETE DE PAGE
   Placee tout en haut, AU-DESSUS du bandeau vert et du menu.
   Pleine largeur, jamais recadree : l'image porte son titre en haut
   et ses trois boutons en bas.
   ============================================================ */
.ma-header-banner{
  display:block; width:100%; line-height:0;
  background:#0d1512;
  border-bottom:1px solid var(--ma-line);
}
/* Banniere 1300x400 (ratio 3.25) : bornee a 1600 px de large, au-dela
   elle deviendrait trop haute. La version 2x (2600 px) assure la nettete. */
.ma-header-banner img{
  display:block;
  width:100%;
  height:auto;
  max-width:1600px;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   21. HADITH DU JOUR ET LIENS PODCASTS (page d'accueil)
   ============================================================ */

/* --- Carte « Hadith du jour » --- */
.ma-home-legacy #hadithCard{
  position:relative;
  background:
    radial-gradient(520px 200px at 100% 0%, rgba(212,175,55,.10), transparent 62%),
    var(--ma-grad-night) !important;
  border:1px solid var(--ma-line) !important;
  border-left:3px solid var(--ma-gold) !important;
  border-radius:0 var(--ma-r-lg) var(--ma-r-lg) 0 !important;
  padding:24px 26px !important;
  overflow:hidden;
}
/* Grand guillemet decoratif */
.ma-home-legacy #hadithCard::after{
  content:"\201C";
  position:absolute; top:-26px; right:16px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:9rem; line-height:1; color:var(--ma-gold);
  opacity:.10; pointer-events:none;
}
.ma-home-legacy #hadithCard .verse-header{
  display:flex !important; align-items:center; gap:9px;
  background:transparent !important; border:0 !important;
  padding:0 !important; margin:0 0 16px !important;
  font-size:.70rem !important; font-weight:800 !important;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ma-gold) !important;
}
.ma-home-legacy #hadithCard .verse-header::before{
  content:"\f10d";                         /* guillemet Font Awesome */
  font-family:"Font Awesome 5 Free"; font-weight:900;
  font-size:.85rem; color:var(--ma-gold);
}
.ma-home-legacy #hadithCard .hadith-content{
  color:var(--ma-text) !important;
  font-size:clamp(1.05rem,1.9vw,1.32rem) !important;
  line-height:1.72 !important; font-weight:500;
  margin:0 0 18px !important; padding:0 !important;
  max-width:62ch;
}
.ma-home-legacy #hadithCard .logo{
  color:var(--ma-text-3) !important;
  font-size:.78rem !important; letter-spacing:.08em;
  margin-bottom:16px !important;
}
.ma-home-legacy #hadithCard .share-button{
  display:inline-flex !important; align-items:center; gap:9px;
  padding:11px 22px !important;
}

/* La source (« Rapporte par… ») posee sur une ligne doree discrete */
.ma-home-legacy #hadithCard .hadith-source,
.ma-home-legacy #hadithCard [class*="source"]{
  display:inline-block;
  padding-top:12px; margin-bottom:6px;
  border-top:1px solid var(--ma-line);
  color:var(--ma-gold) !important; font-weight:700 !important;
  font-size:.82rem !important;
}

/* --- Cartes de liens (Podcasts, autres sites) --- */
.ma-home-legacy .site-link-box{
  position:relative;
  display:flex !important; align-items:center; gap:18px;
  padding:20px 54px 20px 22px !important;
  background:var(--ma-grad-night) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-lg) !important;
  margin-bottom:14px;
  transition:transform var(--ma-mid),border-color var(--ma-mid),box-shadow var(--ma-mid);
}
.ma-home-legacy .site-link-box:hover{
  transform:translateY(-3px);
  border-color:rgba(16,185,129,.34) !important;
  box-shadow:var(--ma-sh-glow) !important;
}
/* Fleche a droite */
.ma-home-legacy .site-link-box::after{
  content:"\f061";
  font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  color:var(--ma-text-3); font-size:.9rem;
  transition:transform var(--ma-mid),color var(--ma-mid);
}
.ma-home-legacy .site-link-box:hover::after{
  color:var(--ma-gold); transform:translateY(-50%) translateX(5px);
}
.ma-home-legacy .site-link-box .icon-container{
  width:52px; height:52px; flex-shrink:0; border-radius:15px;
  display:grid !important; place-items:center; font-size:1.35rem;
  background:rgba(16,185,129,.13) !important;
  color:var(--ma-emerald-bright) !important;
  border:1px solid rgba(16,185,129,.22);
  transition:transform var(--ma-mid);
}
.ma-home-legacy .site-link-box:hover .icon-container{ transform:rotate(-8deg) scale(1.07); }
/* Plus aucun soulignement dans ces cartes */
.ma-home-legacy .site-link-box a,
.ma-home-legacy .site-link-box u,
.ma-home-legacy .site-link-box b,
.ma-home-legacy .site-link-box strong{
  text-decoration:none !important;
}
.ma-home-legacy .site-link-box a{
  color:var(--ma-text) !important;
  font-size:1.05rem !important; font-weight:800 !important;
  letter-spacing:-.015em; line-height:1.3;
}
.ma-home-legacy .site-link-box:hover a{ color:var(--ma-emerald-bright) !important; }

/* Les 5 etoiles des liens de notation (Google Play / App Store) */
.ma-home-legacy .store-stars{
  margin-left:auto;
  white-space:nowrap;
  font-size:1.05rem;
  letter-spacing:2px;
  line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}
@media (max-width:560px){
  .ma-home-legacy .store-stars{ font-size:.85rem; letter-spacing:1px; }
}