/* =====================================================================
   ma-shell.css — Gabarit Muslim Alim (refonte du 26/09/2026)
   ---------------------------------------------------------------------
   Remplace design-2026.css, style-new.css et ma-lang.css.
   Ne contient aucune couleur brute : tout vient de ma-ds.css.

   Regles heritees de l'ancien gabarit, toujours valables :
   - tout est prefixe .ma- : 93 pages finissent par un bloc
     « OVERRIDE LAYOUT » qui masque .header, .sidebar, #overlay,
     .bottom-nav et .hamburger-btn ;
   - les pages redefinissent body, *, .container et :root : le shell
     prend le dessus par specificite (html body, .main-content X),
     jamais en modifiant les pages ;
   - proprietes logiques partout (margin-inline, inset-inline-end...) :
     en arabe (dir=rtl) la mise en page se retourne toute seule ;
   - aucune barre de navigation horizontale collante (regle du site) :
     seule la colonne laterale, verticale, reste visible au defilement.
   ===================================================================== */

/* =========================== 0. BASE =========================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--ma-bg);
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:var(--ma-s-6);
}
/* Les pages imposent body{background:#121212 !important; font-family:Arial...} :
   « html body » (0,0,2) passe devant leur « body » (0,0,1). */
html body{
  margin:0 !important; padding:0 !important;
  max-width:none !important; width:auto !important; min-height:100vh;
  background:var(--ma-bg) !important;
  color:var(--ma-text) !important;
  font-family:var(--ma-font-body) !important;
  font-size:var(--ma-fs-base);
  line-height:var(--ma-lh-body);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{ background:var(--ma-tint-2); color:var(--ma-text); }

/* Fond : voile tres leger et motif geometrique (etoiles a 8 branches) */
.ma-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 8% -10%, var(--ma-tint), transparent 65%),
    var(--ma-bg);
}
.ma-canvas::after{
  content:""; position:absolute; inset:0; opacity:var(--ma-pattern-op);
  background-color:var(--ma-pattern-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M48 20 68 48 48 76 28 48z'/%3E%3Cpath d='M20 48 48 28 76 48 48 68z'/%3E%3Cpath d='M28.2 28.2h39.6v39.6H28.2z'/%3E%3Cpath d='M48 0v20M48 76v20M0 48h20M76 48h20'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M48 20 68 48 48 76 28 48z'/%3E%3Cpath d='M20 48 48 28 76 48 48 68z'/%3E%3Cpath d='M28.2 28.2h39.6v39.6H28.2z'/%3E%3Cpath d='M48 0v20M48 76v20M0 48h20M76 48h20'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/96px 96px repeat;
}

/* Font Awesome est charge sans bloquer l'affichage : on reserve la
   place des icones pour qu'elles n'entrainent aucun decalage (CLS). */
.fa,.fas,.far,.fab{ display:inline-block; min-width:1em; line-height:1; }

/* ======================= 1. ACCESSIBILITE ======================= */
.ma-skip{
  position:absolute; inset-inline-start:var(--ma-s-4); inset-block-start:-100px; z-index:9999;
  background:var(--ma-accent); color:var(--ma-on-accent); font-weight:700;
  padding:var(--ma-s-3) var(--ma-s-5); border-radius:var(--ma-r-sm); text-decoration:none;
  transition:inset-block-start var(--ma-fast);
}
.ma-skip:focus{ inset-block-start:var(--ma-s-4); }
:where(.ma-nav,.sidebar-left,.sidebar-right,.site-footer,.ma-appcta,.mh-hero,.ma-rel,.ma-faq,.ma-crumb,.ma-pager) :focus-visible,
.ma-theme:focus-visible,.ma-burger:focus-visible,#scrollTopBtn:focus-visible,.ma-drawer-close:focus-visible{
  outline:2px solid var(--ma-ring); outline-offset:3px; border-radius:var(--ma-r-xs);
}
.main-content :focus-visible{ outline:2px solid var(--ma-ring); outline-offset:2px; }
.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;
}

/* ================= 2. BANNIERE DE MARQUE + BANDEAU APP ================= */
.ma-header-banner{
  display:block; width:100%; line-height:0;
  background:var(--ma-n-975); border-block-end:1px solid var(--ma-line);
}
/* 1300x400 : bornee a 1600px, jamais recadree (titre en haut, boutons en bas) */
.ma-header-banner img{ display:block; width:100%; height:auto; max-width:1600px; margin-inline:auto; }

.app-banner{
  position:relative; display:flex; align-items:center; justify-content:center; gap:var(--ma-s-3);
  min-height:40px; padding:var(--ma-s-2) var(--ma-s-4);
  background:var(--ma-green-950); color:var(--ma-green-100);
  font-size:var(--ma-fs-sm); font-weight:600; text-decoration:none; letter-spacing:.01em;
  border-block-end:1px solid color-mix(in oklch, var(--ma-brand) 30%, transparent);
  transition:background var(--ma-mid);
}
.app-banner:hover{ background:var(--ma-green-900); }
.app-banner img{ width:22px; height:22px; border-radius:6px; flex-shrink:0; }
.app-banner strong{ font-weight:700; }
.app-banner .store-badges{ display:flex; gap:var(--ma-s-2); }
.app-banner .badge{
  display:inline-flex; align-items:center; gap:6px; padding:2px 10px;
  border-radius:var(--ma-r-pill); border:1px solid color-mix(in oklch, var(--ma-brand) 45%, transparent);
  color:var(--ma-green-200); font-size:var(--ma-fs-xs); font-weight:600;
}

/* ============================ 3. NAVIGATION ============================ */
/* Barre horizontale : elle defile avec la page (jamais collante). */
.ma-nav{
  position:relative; z-index:var(--ma-z-nav);
  display:flex; align-items:center; gap:var(--ma-s-4);
  min-height:var(--ma-nav-h); padding-inline:var(--ma-gutter);
  max-width:var(--ma-max); margin-inline:auto;
}
.ma-nav-shell{
  /* backdrop-filter cree un contexte d'empilement : sans position/z-index,
     les sous-menus passaient SOUS la pub du haut (iframe AdSense). */
  position:relative; z-index:1000;
  background:var(--ma-glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border-block-end:1px solid var(--ma-line);
}

.ma-logo{ display:flex; align-items:center; gap:var(--ma-s-3); flex-shrink:0; text-decoration:none; color:var(--ma-text); }
.ma-logo img{ width:40px; height:40px; border-radius:12px; box-shadow:0 0 0 1px var(--ma-line-2); }
.ma-logo__txt{ display:flex; flex-direction:column; line-height:1.1; }
.ma-logo__name{ font-family:var(--ma-font-display); font-size:1.18rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; color:var(--ma-text); }
.ma-logo__sub{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ma-text-3); font-weight:600; white-space:nowrap; }

.ma-menu{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; justify-content:center; }
.ma-menu__item{ position:relative; }
.ma-menu__link{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  padding:10px 12px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none;
  font-size:var(--ma-fs-sm); font-weight:600; white-space:nowrap;
  transition:color var(--ma-fast), background var(--ma-fast);
}
.ma-menu__link i:first-child{ font-size:.85em; color:var(--ma-accent-strong); opacity:.85; }
.ma-menu__link::after{
  content:""; position:absolute; inset-inline:12px; inset-block-end:5px; height:2px; border-radius:2px;
  background:var(--ma-accent); transform:scaleX(0); transform-origin:var(--ma-origin-start,left);
  transition:transform var(--ma-mid);
}
.ma-menu__link:hover,.ma-menu__item:focus-within>.ma-menu__link{ color:var(--ma-text); background:var(--ma-tint); }
.ma-menu__link:hover::after,.ma-menu__link.is-active::after{ transform:scaleX(1); }
.ma-menu__link.is-active{ color:var(--ma-text); }
.ma-menu__caret{ font-size:.6rem!important; opacity:.6; transition:transform var(--ma-mid); }
.ma-menu__item:hover .ma-menu__caret,.ma-menu__item.is-open .ma-menu__caret{ transform:rotate(180deg); }

.ma-sub{
  position:absolute; inset-block-start:calc(100% + 10px); inset-inline-start:0; z-index:var(--ma-z-sub);
  min-width:264px; padding:var(--ma-s-2);
  background:var(--ma-surface); border:1px solid var(--ma-line-2); border-radius:var(--ma-r);
  box-shadow:var(--ma-sh-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--ma-mid), transform var(--ma-mid), visibility var(--ma-mid);
}
.ma-sub::before{ content:""; position:absolute; inset-inline:0; inset-block-start:-12px; height:12px; }
.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:none; }
.ma-sub a{
  display:flex; align-items:center; gap:var(--ma-s-3);
  padding:9px 12px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-sm); font-weight:500;
  transition:background var(--ma-fast), color var(--ma-fast), padding var(--ma-fast);
}
.ma-sub a i{ width:18px; font-size:.85rem; color:var(--ma-accent-strong); flex-shrink:0; text-align:center; }
.ma-sub a:hover{ background:var(--ma-tint); color:var(--ma-text); padding-inline-start:16px; }

.ma-nav__tools{ display:flex; align-items:center; gap:var(--ma-s-2); flex-shrink:0; }
.ma-search{
  display:flex; align-items:center; gap:var(--ma-s-2);
  background:var(--ma-surface); border:1px solid var(--ma-line);
  border-radius:var(--ma-r-pill); padding:8px 14px; width:200px;
  transition:border-color var(--ma-fast), box-shadow var(--ma-fast), width var(--ma-mid);
}
.ma-search:focus-within{ border-color:var(--ma-ring); box-shadow:0 0 0 4px var(--ma-tint); width:240px; }
.ma-search i{ color:var(--ma-text-3); font-size:.85rem; }
.ma-search input{ flex:1; min-width:0; background:none; border:0; outline:0; color:var(--ma-text); font:inherit; font-size:var(--ma-fs-sm); }
.ma-search input::placeholder{ color:var(--ma-text-3); }

/* Bouton de theme : soleil / lune dessines en SVG */
.ma-theme,.ma-burger,.ma-drawer-close{
  display:inline-grid; place-items:center; width:42px; height:42px; flex-shrink:0;
  background:var(--ma-surface); color:var(--ma-text);
  border:1px solid var(--ma-line); border-radius:var(--ma-r-sm); cursor:pointer;
  transition:background var(--ma-fast), border-color var(--ma-fast), transform var(--ma-fast);
}
.ma-theme:hover,.ma-burger:hover,.ma-drawer-close:hover{ background:var(--ma-tint); border-color:var(--ma-line-2); }
.ma-theme:active,.ma-burger:active{ transform:scale(.94); }
.ma-theme svg{ width:19px; height:19px; grid-area:1/1; transition:transform var(--ma-d-slow) var(--ma-ease), opacity var(--ma-d) var(--ma-ease); }
.ma-theme .ma-i-sun{ opacity:0; transform:rotate(-90deg) scale(.6); }
:root[data-theme="light"] .ma-theme .ma-i-sun{ opacity:1; transform:none; }
:root[data-theme="light"] .ma-theme .ma-i-moon{ opacity:0; transform:rotate(90deg) scale(.6); }

/* Burger : trois traits qui deviennent une croix */
.ma-burger{ display:none; }
.ma-burger__lines{ position:relative; width:18px; height:12px; }
.ma-burger__lines span{
  position:absolute; inset-inline-start:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--ma-mid), opacity var(--ma-fast), inset-block-start var(--ma-mid);
}
.ma-burger__lines span:nth-child(1){ inset-block-start:0; }
.ma-burger__lines span:nth-child(2){ inset-block-start:5px; }
.ma-burger__lines span:nth-child(3){ inset-block-start:10px; }
.ma-burger[aria-expanded="true"] .ma-burger__lines span:nth-child(1){ inset-block-start:5px; transform:rotate(45deg); }
.ma-burger[aria-expanded="true"] .ma-burger__lines span:nth-child(2){ opacity:0; }
.ma-burger[aria-expanded="true"] .ma-burger__lines span:nth-child(3){ inset-block-start:5px; transform:rotate(-45deg); }

/* Selecteur de langue */
.ma-lang{ position:relative; flex:0 0 auto; }
.ma-lang__btn{
  display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 12px;
  border:1px solid var(--ma-line); border-radius:var(--ma-r-sm);
  background:var(--ma-surface); color:var(--ma-text);
  font:inherit; font-size:var(--ma-fs-sm); font-weight:600; line-height:1; cursor:pointer;
  transition:background var(--ma-fast), border-color var(--ma-fast);
}
.ma-lang__btn:hover,.ma-lang.is-open .ma-lang__btn{ background:var(--ma-tint); border-color:var(--ma-line-2); }
.ma-lang__btn .fa-chevron-down{ font-size:.65em; transition:transform var(--ma-mid); }
.ma-lang.is-open .ma-lang__btn .fa-chevron-down{ transform:rotate(180deg); }
.ma-lang__code{ letter-spacing:.04em; }
.ma-lang__panel{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:var(--ma-z-sub);
  min-width:190px; padding:6px;
  background:var(--ma-surface); border:1px solid var(--ma-line-2); border-radius:var(--ma-r);
  box-shadow:var(--ma-sh-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--ma-mid), transform var(--ma-mid), visibility var(--ma-mid);
}
.ma-lang:hover .ma-lang__panel,.ma-lang.is-open .ma-lang__panel{ opacity:1; visibility:visible; transform:none; }
.ma-lang__panel a{
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--ma-r-sm);
  color:var(--ma-text); font-size:var(--ma-fs-sm); text-decoration:none;
}
.ma-lang__panel a:hover{ background:var(--ma-tint); }
.ma-lang__panel a[aria-current="true"]{ background:var(--ma-tint-2); font-weight:700; }
.ma-flag{ width:21px; height:15px; flex:0 0 auto; border-radius:2.5px; box-shadow:0 0 0 1px oklch(0 0 0 / .25) inset; }

/* ========================== 4. PUBLICITE ========================== */
.ma-ad{ width:100%; display:block; position:relative; z-index:1; }
.ma-ad__inner{ max-width:970px; margin-inline:auto; }
.ma-ad__label{
  display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ma-text-3); margin-block-end:6px; font-weight:600;
}
.ma-ad--header{ padding:var(--ma-s-3) var(--ma-gutter); text-align:center; }
/* Place reservee a la banniere du haut : sans elle, la page entiere
   descendait a l'arrivee de la pub (CLS mesure a 0,34 sur mobile). */
.ma-ad--header .ma-ad__inner{ min-height:122px; }
.ma-ad--sidebar{ padding:4px 0; }
/* Blocs carres de la colonne : place reservee (pas de saut a l'arrivee de la pub) */
.sidebar-right .ma-ad--sidebar .ma-ad__inner{ min-height:270px; }
.ma-ad--infeed{ margin-block:var(--ma-s-10); padding-block:var(--ma-s-4); border-block:1px solid var(--ma-line); }

/* ==================== 5. TIROIR DE NAVIGATION (mobile) ==================== */
/* .ma-overlay et non .overlay/#overlay : masques par les pages. */
.ma-overlay{
  position:fixed; inset:0; z-index:var(--ma-z-overlay);
  background:color-mix(in oklch, var(--ma-n-975) 55%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity var(--ma-mid), visibility var(--ma-mid);
}
.ma-overlay.active{ opacity:1; visibility:visible; }
.sidebar-left{
  position:fixed; inset-block:0; inset-inline-start:0; z-index:var(--ma-z-drawer);
  width:min(360px,88vw); display:flex; flex-direction:column;
  background:var(--ma-surface); border-inline-end:1px solid var(--ma-line-2);
  box-shadow:var(--ma-sh-3);
  transform:translateX(-104%); visibility:hidden;
  transition:transform var(--ma-d-slow) var(--ma-ease), visibility var(--ma-d-slow);
  overscroll-behavior:contain;
}
[dir="rtl"] .sidebar-left{ transform:translateX(104%); }
.sidebar-left.active{ transform:none; visibility:visible; }
.sidebar-left-header{
  position:relative; padding:var(--ma-s-6) var(--ma-s-5) var(--ma-s-4);
  border-block-end:1px solid var(--ma-line);
}
.sidebar-left-header h2{
  font-family:var(--ma-font-display); font-size:1.35rem; font-weight:600; color:var(--ma-text);
  margin:0 0 4px; letter-spacing:-.01em;
}
.sidebar-left-header p{ font-size:var(--ma-fs-sm); color:var(--ma-text-2); margin:0; }
.ma-drawer-close{ position:absolute; inset-block-start:var(--ma-s-4); inset-inline-end:var(--ma-s-4); }
.ma-drawer-search{ padding:var(--ma-s-4) var(--ma-s-5) 0; }
.ma-drawer-search .ma-search,.ma-drawer-search .ma-search:focus-within{ width:100%; }
.sidebar-menu{ list-style:none; margin:0; padding:var(--ma-s-3) var(--ma-s-3) var(--ma-s-10); overflow-y:auto; flex:1; }
.sidebar-menu li{ margin:0; }
.sidebar-menu a{
  display:flex; align-items:center; gap:var(--ma-s-3);
  padding:11px 12px; border-radius:var(--ma-r-sm);
  color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-base); font-weight:500;
  transition:background var(--ma-fast), color var(--ma-fast);
}
.sidebar-menu a i{ width:20px; color:var(--ma-accent-strong); font-size:.92rem; flex-shrink:0; text-align:center; }
.sidebar-menu a:hover{ background:var(--ma-tint); color:var(--ma-text); }
.sidebar-menu a.active{ background:var(--ma-tint-2); color:var(--ma-text); font-weight:700; box-shadow:inset 3px 0 0 var(--ma-accent); }
[dir="rtl"] .sidebar-menu a.active{ box-shadow:inset -3px 0 0 var(--ma-accent); }
.sidebar-divider{ height:1px; background:var(--ma-line); margin:var(--ma-s-3) var(--ma-s-3); }
html.ma-drawer-open{ overflow:hidden; }

/* ======================== 6. GRILLE DE PAGE ======================== */
/* Contenu a gauche, colonne a droite (inline-end : a gauche en arabe).
   !important : style-new.css et certaines pages imposaient display:flex. */
.page-wrapper{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--ma-aside-w) !important;
  gap:var(--ma-gap);
  max-width:var(--ma-max); margin-inline:auto;
  padding:var(--ma-s-8) var(--ma-gutter) var(--ma-s-12);
  align-items:start;
}
/* Le contenu n'est PAS une carte : ce sont ses blocs qui le sont.
   (Pas de cartes imbriquees.) */
.main-content{
  min-width:0; position:relative;
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; overflow:visible !important;
  color:var(--ma-text);
  width:auto !important; max-width:none !important;
}
/* Typographie commune du contenu, en specificite basse (:where) pour que
   les polices propres aux pages (arabe, citations...) restent prioritaires. */
.main-content :where(p,li,td,th,dd,dt,label,summary,blockquote,figcaption,input,select,textarea,button){ font-family:var(--ma-font-body); }
.main-content :where(h1,h2,h3,h4){ font-family:var(--ma-font-display); font-weight:600; letter-spacing:-.012em; line-height:var(--ma-lh-snug); text-wrap:balance; }
.main-content :where(p,li){ text-wrap:pretty; }

/* Colonne laterale collante. Si elle est plus haute que l'ecran,
   ma-shell.js calcule --ma-aside-top (negatif) : elle defile jusqu'a
   son dernier bloc puis s'arrete, sans jamais cacher de contenu. */
.sidebar-right{
  position:sticky !important; inset-block-start:var(--ma-aside-top,var(--ma-s-6));
  display:flex !important; flex-direction:column; gap:var(--ma-s-5);
  width:auto !important; padding:0 !important; border:0 !important; background:none !important;
  max-height:none; overflow:visible;
}
.sidebar-right > *{ flex:0 0 auto; }

/* =========================== 7. FIL D'ARIANE =========================== */
.ma-crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px;
  font-size:var(--ma-fs-sm); color:var(--ma-text-3); margin-block-end:var(--ma-s-6);
}
.ma-crumb a{ color:var(--ma-text-2); text-decoration:none; border-radius:var(--ma-r-xs); transition:color var(--ma-fast); }
.ma-crumb a:hover{ color:var(--ma-link); }
.ma-crumb__sep{ opacity:.5; font-size:.8em; }
[dir="rtl"] .ma-crumb__sep{ display:inline-block; transform:scaleX(-1); }
.ma-crumb [aria-current]{ color:var(--ma-text); font-weight:600; }

/* ======================== 8. TYPOGRAPHIE DU CONTENU ======================== */
.main-content > h1,.ma-h1{
  font-family:var(--ma-font-display); font-size:var(--ma-fs-2xl); line-height:var(--ma-lh-tight);
  font-weight:600; letter-spacing:-.02em; color:var(--ma-text); margin:0 0 var(--ma-s-5);
}
.main-content > h2,.ma-h2{
  font-size:var(--ma-fs-xl); color:var(--ma-text); margin:var(--ma-s-12) 0 var(--ma-s-4);
}
.main-content > h3,.ma-h3{ font-size:var(--ma-fs-lg); color:var(--ma-text); margin:var(--ma-s-8) 0 var(--ma-s-3); }
.ma-lead{
  font-size:var(--ma-fs-md); line-height:1.7; color:var(--ma-text-2); max-width:var(--ma-measure);
  margin:0 0 var(--ma-s-8);
}
.ma-prose{ color:var(--ma-text-2); line-height:var(--ma-lh-body); max-width:var(--ma-measure); }
.ma-prose p{ margin:0 0 1.1em; }
.ma-prose strong,.ma-prose b{ color:var(--ma-text); font-weight:700; }
.ma-prose a{ color:var(--ma-link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.ma-prose a:hover{ color:var(--ma-link-hover); }
.ma-prose :where(ul,ol){ margin:0 0 1.2em; padding-inline-start:1.4em; }
.ma-prose li{ margin-block-end:.5em; }
.ma-prose li::marker{ color:var(--ma-accent); }
.ma-prose blockquote{
  margin:var(--ma-s-6) 0; padding:var(--ma-s-5) var(--ma-s-6);
  border-inline-start:3px solid var(--ma-accent); background:var(--ma-surface-2);
  border-radius:0 var(--ma-r) var(--ma-r) 0; color:var(--ma-text);
}

/* ============================ 9. COLONNE : BLOCS ============================ */
.widget{
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important; border-radius:var(--ma-r-lg) !important;
  overflow:hidden; box-shadow:var(--ma-sh-1);
}
.widget-title{
  display:flex; align-items:center; gap:10px;
  padding:var(--ma-s-4) var(--ma-s-5) var(--ma-s-2);
  font-family:var(--ma-font-display) !important; font-size:1.06rem !important; font-weight:600 !important;
  letter-spacing:-.005em !important; text-transform:none !important;
  color:var(--ma-text) !important; background:none !important; border:0 !important;
}
.widget-title i{ color:var(--ma-accent-strong); font-size:.92rem; }
.widget-title.gold i{ color:var(--ma-gilt); }
.widget-body{ padding:var(--ma-s-3) var(--ma-s-5) var(--ma-s-5); }
.widget-body p{ color:var(--ma-text-2); font-size:var(--ma-fs-sm); line-height:1.6; }

.ma-wlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ma-wlist li{ border-block-start:1px solid var(--ma-line); }
.ma-wlist li:first-child{ border-block-start:0; }
.ma-wlist a{
  display:flex; align-items:center; gap:10px; padding:10px 2px;
  color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-sm); font-weight:500; line-height:1.35;
  transition:color var(--ma-fast), padding var(--ma-fast);
}
.ma-wlist a i{ width:14px; color:var(--ma-accent-strong); font-size:.8rem; flex-shrink:0; transition:transform var(--ma-fast); }
[dir="rtl"] .ma-wlist .fa-angle-right{ transform:scaleX(-1); }
.ma-wlist a:hover{ color:var(--ma-text); padding-inline-start:6px; }

/* Horaires de priere du jour */
.ma-pray{ padding:var(--ma-s-5); }
.ma-pray__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--ma-s-3); margin-block-end:var(--ma-s-3); }
.ma-pray__city{ font-family:var(--ma-font-display); font-size:1.12rem; font-weight:600; color:var(--ma-text); margin:0; }
.ma-pray__date{ font-size:var(--ma-fs-xs); color:var(--ma-text-3); }
.ma-pray__next{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ma-s-3);
  padding:var(--ma-s-3) var(--ma-s-4); margin-block-end:var(--ma-s-3);
  border-radius:var(--ma-r); background:var(--ma-tint); border:1px solid var(--ma-tint-2);
}
.ma-pray__next-l{ font-size:var(--ma-fs-xs); color:var(--ma-text-2); text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.ma-pray__next-n{ font-family:var(--ma-font-display); font-size:1.15rem; font-weight:600; color:var(--ma-text); }
.ma-pray__cd{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ma-accent-strong); font-size:var(--ma-fs-sm); }
.ma-pray__list{ list-style:none; margin:0; padding:0; }
.ma-pray__list li{
  display:flex; justify-content:space-between; padding:7px 2px;
  font-size:var(--ma-fs-sm); color:var(--ma-text-2); border-block-start:1px solid var(--ma-line);
}
.ma-pray__list li:first-child{ border-block-start:0; }
.ma-pray__list li.is-next{ color:var(--ma-text); font-weight:700; }
.ma-pray__list time{ font-variant-numeric:tabular-nums; direction:ltr; }
.ma-pray__foot{ display:flex; gap:var(--ma-s-2); margin-block-start:var(--ma-s-3); flex-wrap:wrap; }
.ma-pray__btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--ma-r-pill);
  font:inherit; font-size:var(--ma-fs-xs); font-weight:600; cursor:pointer; text-decoration:none;
  color:var(--ma-text-2); background:none; border:1px solid var(--ma-line-2);
  transition:color var(--ma-fast), border-color var(--ma-fast), background var(--ma-fast);
}
.ma-pray__btn:hover{ color:var(--ma-text); border-color:var(--ma-ring); background:var(--ma-tint); }
.ma-pray__skel{ height:9.5rem; border-radius:var(--ma-r); background:linear-gradient(90deg,var(--ma-surface-2),var(--ma-elev),var(--ma-surface-2)); background-size:200% 100%; animation:ma-skel 1.4s linear infinite; }
@keyframes ma-skel{ to{ background-position:-200% 0; } }

/* Bloc applications */
.app-widget{ text-align:start; }
.ma-apps{ display:flex; flex-direction:column; gap:var(--ma-s-4); }
.ma-app{ display:grid; grid-template-columns:52px 1fr; gap:var(--ma-s-3); align-items:center; }
.ma-app img{ width:52px; height:52px; border-radius:14px; box-shadow:0 0 0 1px var(--ma-line-2); object-fit:cover; }
.ma-app__t{ font-weight:700; color:var(--ma-text); font-size:var(--ma-fs-base); margin:0; line-height:1.25; }
.ma-app__s{ font-size:var(--ma-fs-xs); color:var(--ma-text-3); margin:2px 0 0; line-height:1.4; }
.ma-app__btns{ grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:var(--ma-s-2); }

/* Boutons de store (badges maison, lisibles dans les deux themes) */
.ma-store,.store-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:10px 14px; border-radius:var(--ma-r-sm); text-decoration:none;
  font-size:var(--ma-fs-sm); font-weight:600; line-height:1.15; white-space:nowrap;
  background:var(--ma-text); color:var(--ma-bg); border:1px solid transparent;
  transition:transform var(--ma-fast), box-shadow var(--ma-fast), background var(--ma-fast);
}
.ma-store i,.store-btn i{ font-size:1.25em; }
.ma-store small{ display:block; font-size:.66em; font-weight:500; opacity:.8; letter-spacing:.02em; }
.ma-store span{ display:flex; flex-direction:column; text-align:start; }
.ma-store:hover,.store-btn:hover{ transform:translateY(-2px); box-shadow:var(--ma-sh-2); }
.ma-store--ghost,.store-btn.ios{ background:transparent; color:var(--ma-text); border-color:var(--ma-line-2); }
.ma-store--ghost:hover,.store-btn.ios:hover{ border-color:var(--ma-ring); background:var(--ma-tint); }
.store-btn{ width:100%; margin-block-end:var(--ma-s-2); }
.store-btn.android{ background:var(--ma-accent); color:var(--ma-on-accent); }

/* ========================== 10. BOUTONS ========================== */
.ma-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:var(--ma-r-pill);
  font-size:var(--ma-fs-sm); font-weight:700; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--ma-fast), box-shadow var(--ma-fast), background var(--ma-fast), color var(--ma-fast);
}
.ma-btn i{ font-size:1.05em; }
.ma-btn--primary{ background:var(--ma-accent); color:var(--ma-on-accent); }
.ma-btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--ma-sh-accent); }
.ma-btn--ghost{ background:transparent; color:var(--ma-text); border-color:var(--ma-line-2); }
.ma-btn--ghost:hover{ background:var(--ma-tint); border-color:var(--ma-ring); transform:translateY(-2px); }
.ma-btn:active{ transform:translateY(0) scale(.98); }

/* ============================ 11. FAQ ============================ */
.ma-faq{ margin-block:var(--ma-s-section) var(--ma-s-4); }
.ma-faq__head{ margin-block-end:var(--ma-s-6); }
.ma-kicker,.ma-faq__kicker,.mh-sec__kicker{
  display:inline-flex; align-items:center; gap:10px; margin-block-end:var(--ma-s-3);
  font-size:var(--ma-fs-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ma-accent-strong);
}
.ma-kicker::before,.ma-faq__kicker::before,.mh-sec__kicker::before{
  content:""; width:8px; height:8px; transform:rotate(45deg);
  border:1.5px solid currentColor; border-radius:1px;
}
.ma-faq__title{ font-family:var(--ma-font-display); font-size:var(--ma-fs-xl); font-weight:600; letter-spacing:-.015em; color:var(--ma-text); margin:0; }
.ma-faq__list{ display:flex; flex-direction:column; border-block-start:1px solid var(--ma-line); }
.ma-faq__item{ border-block-end:1px solid var(--ma-line); }
.ma-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ma-s-4);
  padding:var(--ma-s-5) 2px; cursor:pointer; list-style:none;
  font-size:var(--ma-fs-md); font-weight:600; color:var(--ma-text); line-height:1.4;
  transition:color var(--ma-fast);
}
.ma-faq__q::-webkit-details-marker{ display:none; }
.ma-faq__q:hover{ color:var(--ma-accent-strong); }
.ma-faq__icon{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--ma-line-2); color:var(--ma-text-2); font-size:.7rem;
  transition:transform var(--ma-mid), background var(--ma-mid), color var(--ma-mid), border-color var(--ma-mid);
}
.ma-faq__item[open] .ma-faq__icon{ transform:rotate(180deg); background:var(--ma-accent); border-color:var(--ma-accent); color:var(--ma-on-accent); }
.ma-faq__a{ padding:0 2px var(--ma-s-6); color:var(--ma-text-2); line-height:var(--ma-lh-body); max-width:var(--ma-measure); }
.ma-faq__a p{ margin:0 0 .8em; }
.ma-faq__a p:last-child{ margin-block-end:0; }
.ma-faq__a strong{ color:var(--ma-text); }
.ma-faq__a a{ color:var(--ma-link); text-decoration:underline; text-underline-offset:3px; }

/* ===================== 12. ARTICLES RELATIFS + PAGINATION ===================== */
.ma-rel{ margin-block:var(--ma-s-section) 0; }
.ma-rel__head{ display:flex; align-items:end; justify-content:space-between; gap:var(--ma-s-4); flex-wrap:wrap; margin-block-end:var(--ma-s-6); }
.ma-rel__title{ font-family:var(--ma-font-display); font-size:var(--ma-fs-xl); font-weight:600; letter-spacing:-.015em; color:var(--ma-text); margin:0; padding:0; }
.ma-rel__all{ display:inline-flex; align-items:center; gap:8px; font-size:var(--ma-fs-sm); font-weight:700; color:var(--ma-link); text-decoration:none; white-space:nowrap; transition:gap var(--ma-fast), color var(--ma-fast); }
.ma-rel__all:hover{ gap:12px; color:var(--ma-link-hover); }
.ma-rel__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--ma-s-5); }

.ma-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ma-surface); border:1px solid var(--ma-line);
  border-radius:var(--ma-r-lg); overflow:hidden; text-decoration:none;
  transition:transform var(--ma-mid), border-color var(--ma-mid), box-shadow var(--ma-mid);
}
.ma-card:hover{ transform:translateY(-4px); border-color:var(--ma-ring); box-shadow:var(--ma-sh-2); }
.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 .8s var(--ma-ease); }
.ma-card:hover .ma-card__media img{ transform:scale(1.05); }
.ma-card__fallback{ width:100%; height:100%; display:grid; place-items:center; background:var(--ma-tint); color:var(--ma-accent-strong); font-size:1.8rem; }
.ma-card__tag{
  position:absolute; inset-block-start:10px; inset-inline-start:10px; z-index:2;
  padding:4px 10px; border-radius:var(--ma-r-pill);
  background:var(--ma-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ma-text); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.ma-card__body{ padding:var(--ma-s-4) var(--ma-s-5) var(--ma-s-5); display:flex; flex-direction:column; gap:6px; flex:1; }
.ma-card__title{ font-family:var(--ma-font-display); font-size:1.08rem; font-weight:600; line-height:1.3; color:var(--ma-text); margin:0; }
.ma-card__desc{
  font-size:var(--ma-fs-sm); line-height:1.55; color:var(--ma-text-2); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ma-card__go{ margin-block-start:auto; padding-block-start:var(--ma-s-2); font-size:var(--ma-fs-xs); font-weight:700; color:var(--ma-accent-strong); display:inline-flex; align-items:center; gap:6px; transition:gap var(--ma-fast); }
.ma-card:hover .ma-card__go{ gap:10px; }
[dir="rtl"] :is(.ma-card__go,.ma-rel__all,.ma-pager__dir,.mh-cat__all,.ma-link-arrow) :is(.fa-arrow-right,.fa-arrow-left){ transform:scaleX(-1); }

.ma-ilink{ color:var(--ma-link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--ma-ring); transition:color var(--ma-fast), text-decoration-color var(--ma-fast); }
.ma-ilink:hover{ color:var(--ma-link-hover); text-decoration-color:currentColor; }

.ma-pager{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ma-s-4); margin-block-start:var(--ma-s-8); }
.ma-pager a{
  display:flex; flex-direction:column; gap:4px; padding:var(--ma-s-4) var(--ma-s-5);
  border-radius:var(--ma-r-lg); border:1px solid var(--ma-line); background:var(--ma-surface);
  text-decoration:none; transition:border-color var(--ma-fast), transform var(--ma-fast);
}
.ma-pager a:hover{ border-color:var(--ma-ring); transform:translateY(-2px); }
.ma-pager__dir{ font-size:var(--ma-fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ma-text-3); }
.ma-pager__t{ font-family:var(--ma-font-display); font-size:1.02rem; font-weight:600; color:var(--ma-text); line-height:1.35; }
.ma-pager__next{ text-align:end; }

/* ===================== 13. BANDEAUX APPLICATION (fin de page) ===================== */
.ma-appcta{
  position:relative; overflow:hidden; isolation:isolate;
  max-width:var(--ma-max); margin:0 auto var(--ma-s-6);
  margin-inline:max(var(--ma-gutter), calc((100% - var(--ma-max)) / 2 + var(--ma-gutter)));
  padding:clamp(1.5rem,1rem + 2.5vw,3rem);
  background:var(--ma-surface); border:1px solid var(--ma-line); border-radius:var(--ma-r-xl);
  display:flex; align-items:center; gap:clamp(1rem,.5rem + 2vw,2.5rem); flex-wrap:wrap;
}
.ma-appcta::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:radial-gradient(600px 260px at 0% 0%, var(--ma-tint-2), transparent 70%);
}
[dir="rtl"] .ma-appcta::before{ background:radial-gradient(600px 260px at 100% 0%, var(--ma-tint-2), transparent 70%); }
.ma-appcta__icon{ width:84px; height:84px; border-radius:22px; flex-shrink:0; box-shadow:0 0 0 1px var(--ma-line-2), var(--ma-sh-2); object-fit:cover; }
.ma-appcta__txt{ flex:1; min-width:240px; }
.ma-appcta__txt h2{ font-family:var(--ma-font-display); font-size:var(--ma-fs-lg); font-weight:600; letter-spacing:-.015em; color:var(--ma-text); margin:0 0 6px; padding:0; }
.ma-appcta__txt p{ color:var(--ma-text-2); font-size:var(--ma-fs-sm); line-height:1.65; margin:0; max-width:60ch; }
.ma-appcta__txt p strong{ color:var(--ma-text); }
.ma-appcta__btns{ display:flex; gap:var(--ma-s-3); flex-wrap:wrap; }
.ma-appcta--coran{ background:var(--ma-surface-2); }
.ma-appcta--coran .ma-btn--or{ background:var(--ma-accent); color:var(--ma-on-accent); }

/* ========================= 14. PIED DE PAGE ========================= */
.site-footer{
  position:relative; margin-block-start:var(--ma-s-10);
  background:var(--ma-bg-2); border-block-start:1px solid var(--ma-line);
}
.site-footer::before{
  content:""; position:absolute; inset-inline:0; inset-block-start:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--ma-accent), transparent); opacity:.6;
}
.footer-grid{
  max-width:var(--ma-max); margin-inline:auto;
  padding:var(--ma-s-16) var(--ma-gutter) var(--ma-s-8);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--ma-s-8) var(--ma-s-10);
}
.footer-col :is(h4,.ma-foot-h){
  font-family:var(--ma-font-display); font-size:1.08rem; font-weight:600; letter-spacing:-.005em;
  color:var(--ma-text); margin:0 0 var(--ma-s-4);
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-block-end:var(--ma-s-2); }
.footer-col a{ color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-sm); transition:color var(--ma-fast); }
.footer-col a:hover{ color:var(--ma-link); }
.footer-col p{ color:var(--ma-text-2) !important; font-size:var(--ma-fs-sm) !important; line-height:1.65; }
.footer-col .store-btn{ max-width:260px; }
.ma-foot-coran{
  display:flex; align-items:center; gap:12px; margin-block-start:var(--ma-s-4); padding:10px 12px;
  border-radius:var(--ma-r); background:var(--ma-surface); border:1px solid var(--ma-line);
  color:var(--ma-text); text-decoration:none; max-width:320px;
  transition:border-color var(--ma-fast), transform var(--ma-fast);
}
.ma-foot-coran:hover{ border-color:var(--ma-ring); transform:translateY(-2px); }
.ma-foot-coran img{ width:46px; height:46px; border-radius:11px; flex:0 0 46px; object-fit:cover; }
.ma-foot-coran>span{ display:flex; flex-direction:column; line-height:1.3; flex:1; min-width:0; }
.ma-foot-coran__t{ font-size:var(--ma-fs-sm); }
.ma-foot-coran__s{ font-size:var(--ma-fs-xs); color:var(--ma-text-3); }
.ma-foot-coran .fa-qrcode{ font-size:1.2rem; color:var(--ma-accent-strong); }
.footer-bottom{
  max-width:var(--ma-max); margin-inline:auto;
  border-block-start:1px solid var(--ma-line);
  padding:var(--ma-s-6) var(--ma-gutter) var(--ma-s-8); text-align:center;
  color:var(--ma-text-3); font-size:var(--ma-fs-sm); line-height:1.7;
}
.footer-bottom strong{ color:var(--ma-text-2); }
.footer-bottom a{ color:var(--ma-text-2); text-decoration:none; margin:0 10px; transition:color var(--ma-fast); }
.footer-bottom a:hover{ color:var(--ma-link); }

/* ========================= 15. RETOUR EN HAUT ========================= */
#scrollTopBtn{
  position:fixed; inset-inline-end:var(--ma-s-5); inset-block-end:var(--ma-s-5); z-index:var(--ma-z-top);
  display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--ma-line-2); border-radius:50%;
  background:var(--ma-surface); color:var(--ma-text); font-size:.95rem; cursor:pointer; box-shadow:var(--ma-sh-2);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--ma-mid), transform var(--ma-mid), visibility var(--ma-mid), background var(--ma-fast);
}
#scrollTopBtn.is-visible{ opacity:1; visibility:visible; transform:none; }
#scrollTopBtn:hover{ background:var(--ma-accent); color:var(--ma-on-accent); border-color:var(--ma-accent); }

/* ============================ 16. ACCUEIL : HERO ============================ */
.mh-hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center;
  padding:clamp(2rem,1.2rem + 4vw,5rem) clamp(1.25rem,.8rem + 3vw,4rem);
  margin-block-end:var(--ma-s-section);
  border-radius:var(--ma-r-xl);
  background:var(--ma-surface); border:1px solid var(--ma-line);
}
.mh-hero__bg{ position:absolute; inset:-10% -5%; z-index:-1; pointer-events:none; color:var(--ma-pattern-ink); opacity:calc(var(--ma-pattern-op) * 1.6); }
.mh-hero__bg svg{ width:100%; height:100%; display:block; }
.mh-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(70% 90% at 0% 0%, var(--ma-tint-2), transparent 60%),
    linear-gradient(180deg, transparent 55%, var(--ma-surface) 100%);
}
[dir="rtl"] .mh-hero::after{ background:radial-gradient(70% 90% at 100% 0%, var(--ma-tint-2), transparent 60%), linear-gradient(180deg, transparent 55%, var(--ma-surface) 100%); }
.mh-hero__kicker{ margin-block-end:var(--ma-s-5); }
.mh-hero h1{
  font-family:var(--ma-font-display); font-size:var(--ma-fs-3xl); line-height:1.04; font-weight:600;
  letter-spacing:-.03em; color:var(--ma-text); margin:0 0 var(--ma-s-5); max-width:14ch; text-wrap:balance;
}
html[lang="ar"] .mh-hero h1{ letter-spacing:0; line-height:1.35; }
.mh-hero h1 span,.mh-hero h1 em{ font-style:italic; font-weight:500; color:var(--ma-accent-strong); }
html[lang="ar"] .mh-hero h1 span{ font-style:normal; }
.mh-hero__lead{ font-size:var(--ma-fs-md); line-height:1.7; color:var(--ma-text-2); max-width:54ch; margin:0 0 var(--ma-s-8); }
.mh-hero__lead strong{ color:var(--ma-text); font-weight:600; }
.mh-hero__stores{ display:flex; flex-wrap:wrap; gap:var(--ma-s-3); margin-block-end:var(--ma-s-5); }
.mh-hero__stores .ma-store{ padding:12px 20px 12px 16px; font-size:1rem; border-radius:var(--ma-r); }
.mh-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--ma-s-2) var(--ma-s-6); }
.ma-link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--ma-link); font-weight:600; text-decoration:none; font-size:var(--ma-fs-sm); transition:gap var(--ma-fast), color var(--ma-fast); }
.ma-link-arrow:hover{ gap:12px; color:var(--ma-link-hover); }

/* Medaillon : rosace geometrique + verset calligraphie */
.mh-hero__main{ min-width:0; }
.mh-seal,.mh-seal__txt{ margin:0; }
.mh-seal{ position:relative; aspect-ratio:1; width:100%; max-width:420px; justify-self:center; display:grid; place-items:center; }
.mh-seal__rose{ position:absolute; inset:0; color:var(--ma-accent); }
.mh-seal__rose svg{ width:100%; height:100%; overflow:visible; }
.mh-seal__txt{ position:relative; text-align:center; padding:0 18%; }
.mh-seal__ar{
  display:block; font-family:var(--ma-font-arabic); font-size:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);
  line-height:1.9; color:var(--ma-text); direction:rtl;
}
.mh-seal__tr{ display:block; margin-block-start:var(--ma-s-2); font-family:var(--ma-font-display); font-style:italic; font-size:var(--ma-fs-sm); color:var(--ma-text-2); line-height:1.5; }
.mh-seal__ref{ display:block; margin-block-start:6px; font-size:var(--ma-fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--ma-text-3); }

.mh-quick{
  grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0;
  margin-block-start:var(--ma-s-6); border-block-start:1px solid var(--ma-line);
}
.mh-quick a{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:var(--ma-s-5) var(--ma-s-4) var(--ma-s-2);
  color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-sm); font-weight:600;
  border-inline-start:1px solid var(--ma-line);
  transition:color var(--ma-fast), background var(--ma-fast);
}
.mh-quick a:first-child{ border-inline-start:0; }
.mh-quick a i{ font-size:1.2rem; color:var(--ma-accent-strong); transition:transform var(--ma-mid); }
.mh-quick a:hover{ color:var(--ma-text); background:var(--ma-tint); }
.mh-quick a:hover i{ transform:translateY(-3px); }

/* Sections de l'accueil */
.mh-sec{ margin-block:var(--ma-s-section) 0; }
.mh-sec__head{ margin-block-end:var(--ma-s-8); max-width:62ch; }
.mh-sec h2{ font-family:var(--ma-font-display); font-size:var(--ma-fs-xl); font-weight:600; letter-spacing:-.02em; color:var(--ma-text); margin:0 0 var(--ma-s-3); padding:0; }
.mh-sec__sub{ color:var(--ma-text-2); line-height:1.7; margin:0; }

.mh-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--ma-s-5); }
.mh-cat{
  position:relative; padding:var(--ma-s-6); border-radius:var(--ma-r-lg);
  background:var(--ma-surface); border:1px solid var(--ma-line);
  transition:border-color var(--ma-mid), box-shadow var(--ma-mid), transform var(--ma-mid);
}
.mh-cat:hover{ border-color:var(--ma-ring); box-shadow:var(--ma-sh-2); transform:translateY(-3px); }
.mh-cat__top{ display:flex; align-items:center; gap:var(--ma-s-3); margin-block-end:var(--ma-s-4); }
.mh-cat__icon{ width:44px; height:44px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; background:var(--ma-tint); color:var(--ma-accent-strong); }
.mh-cat__name{ font-family:var(--ma-font-display); font-size:1.2rem; font-weight:600; color:var(--ma-text); margin:0; }
.mh-cat__count{ font-size:var(--ma-fs-xs); color:var(--ma-text-3); font-weight:600; }
.mh-cat ul{ list-style:none; margin:0 0 var(--ma-s-4); padding:0; }
.mh-cat li{ border-block-start:1px solid var(--ma-line); }
.mh-cat li:first-child{ border-block-start:0; }
.mh-cat li a{ display:block; padding:9px 0; color:var(--ma-text-2); text-decoration:none; font-size:var(--ma-fs-sm); transition:color var(--ma-fast), padding var(--ma-fast); }
.mh-cat li a:hover{ color:var(--ma-text); padding-inline-start:6px; }
.mh-cat__all{ display:inline-flex; align-items:center; gap:7px; font-size:var(--ma-fs-sm); font-weight:700; color:var(--ma-link); text-decoration:none; transition:gap var(--ma-fast); }
.mh-cat__all:hover{ gap:11px; color:var(--ma-link-hover); }

.mh-stats{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-block-start:var(--ma-s-10);
  border-block:1px solid var(--ma-line);
}
.mh-stat{ padding:var(--ma-s-6) var(--ma-s-4); border-inline-start:1px solid var(--ma-line); }
.mh-stat:first-child{ border-inline-start:0; }
.mh-stat__n{ display:block; font-family:var(--ma-font-display); font-size:var(--ma-fs-2xl); font-weight:500; line-height:1; color:var(--ma-text); font-variant-numeric:lining-nums; }
.mh-stat__l{ display:block; margin-block-start:var(--ma-s-2); font-size:var(--ma-fs-xs); color:var(--ma-text-3); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.ma-home-legacy{ margin-block-start:var(--ma-s-8); }

/* ======================= 17. HARMONISATION DES PAGES =======================
   Les 93 pages ont chacune leur propre <style>. Cette couche habille
   leurs composants avec le design system : « .main-content X » passe
   devant leurs regles simples ; !important seulement la ou elles en
   mettent aussi. Rien n'est masque : c'est purement visuel.
   =========================================================================== */
.main-content .container,
.main-content .box,
.main-content .section,
.main-content .content{
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-lg) !important;
  padding:clamp(1rem,.7rem + 1.4vw,2rem) !important;
  margin:0 0 var(--ma-s-6) !important;
  box-shadow:none !important;
  color:var(--ma-text-2);
  max-width:100% !important; width:auto !important;
}
/* Pas de cartes imbriquees : un bloc dans un bloc devient une simple zone */
.main-content :is(.container,.box,.section,.content) :is(.container,.box,.section,.content){
  background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important;
}
.main-content .subsection{
  background:transparent !important; border:0 !important;
  border-inline-start:2px solid var(--ma-accent) !important;
  border-radius:0 !important; padding:var(--ma-s-1) 0 var(--ma-s-1) var(--ma-s-5) !important; margin:0 0 var(--ma-s-5) !important;
}
.main-content .subsection h3{ color:var(--ma-text) !important; border:0 !important; padding:0 !important; }
.main-content :is(.container,.section,.box,.content) > *:last-child{ margin-block-end:0; }

/* Titres internes */
.main-content .page-title-container{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  padding:0 !important; margin:0 0 var(--ma-s-8) !important; text-align:start !important; box-shadow:none !important;
}
.main-content .page-title,
.main-content h1.page-title{
  font-family:var(--ma-font-display) !important;
  font-size:var(--ma-fs-2xl) !important; font-weight:600 !important;
  letter-spacing:-.02em !important; line-height:var(--ma-lh-tight) !important;
  margin:0 0 var(--ma-s-3) !important; text-align:start !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
  color:var(--ma-text) !important; text-shadow:none !important;
}
.main-content p.page-title{
  font-family:var(--ma-font-body) !important; font-size:var(--ma-fs-md) !important; font-weight:400 !important;
  line-height:1.6 !important; letter-spacing:0 !important; color:var(--ma-text-2) !important; max-width:var(--ma-measure);
}
.main-content h1:not(.mh-hero h1){ background:none; -webkit-text-fill-color:currentColor; }
.main-content .section h2,
.main-content .section-title,
.main-content .dashboard-title{
  font-family:var(--ma-font-display) !important;
  font-size:var(--ma-fs-lg) !important; font-weight:600 !important; color:var(--ma-text) !important;
  letter-spacing:-.012em; margin:0 0 var(--ma-s-4) !important; padding:0 !important;
  background:none !important; border:0 !important; -webkit-text-fill-color:currentColor !important;
}
.main-content .dashboard-subtitle{ color:var(--ma-text-3) !important; font-size:var(--ma-fs-sm) !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-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-lg) !important;
  box-shadow:none !important;
  transition:transform var(--ma-mid), border-color var(--ma-mid), box-shadow var(--ma-mid);
  overflow:hidden;
}
.main-content :is(.card,.category-card,.section-card,.dashboard-item):hover{
  transform:translateY(-3px); border-color:var(--ma-ring) !important; box-shadow:var(--ma-sh-2) !important;
}
.main-content .card-icon,.main-content .icon{ color:var(--ma-accent-strong) !important; transition:transform var(--ma-mid); }
.main-content .card:hover :is(.card-icon,.icon){ transform:translateY(-2px); }
.main-content :is(.cards-row,.square-shortcuts-row){ gap:var(--ma-s-4) !important; }

/* Hadiths et douas : filet vertical, pas d'encadre colore */
.main-content .hadith,
.main-content .hadith-card,
.main-content .doua-card{
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-inline-start:3px solid var(--ma-accent) !important;
  border-radius:var(--ma-r) !important;
  padding:clamp(1rem,.8rem + 1vw,1.5rem) !important;
  margin:0 0 var(--ma-s-4) !important;
}
.main-content :is(.hadith-number,.num){
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px; padding:0 9px;
  border-radius:var(--ma-r-pill) !important;
  background:var(--ma-tint) !important; color:var(--ma-accent-strong) !important;
  font-weight:700 !important; font-size:var(--ma-fs-xs) !important;
}
.main-content :is(.hadith-text,.hadith-translation,.translation,.traduction){
  color:var(--ma-text) !important; font-size:var(--ma-fs-base) !important; line-height:var(--ma-lh-body) !important;
}
.main-content :is(.hadith-source,.reference,.doua-source){
  color:var(--ma-text-3) !important; font-size:var(--ma-fs-xs) !important; font-weight:600 !important;
  font-style:normal !important; letter-spacing:.02em; border-color:var(--ma-line) !important;
}
.main-content .doua-title{ color:var(--ma-text) !important; font-family:var(--ma-font-display); font-weight:600 !important; font-size:var(--ma-fs-md) !important; }

/* Texte arabe (versets, douas) : Amiri, grand et aere */
.main-content :is(.arabic,.arabe,.arabic-text,.doua-arabic,.ayah,.hadith-arabic){
  font-family:var(--ma-font-arabic) !important;
  font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem) !important;
  line-height:2.1 !important; color:var(--ma-text) !important;
  direction:rtl; text-align:right;
}
.main-content :is(.phonetic,.phonetique){ color:var(--ma-text-3) !important; font-style:italic !important; font-size:var(--ma-fs-sm) !important; }

/* Bloc SEO de bas de page */
.main-content .seo-box{
  background:transparent !important; border:0 !important; border-block-start:1px solid var(--ma-line) !important;
  border-radius:0 !important; padding:var(--ma-s-10) 0 0 !important; margin-block-start:var(--ma-s-12) !important;
  color:var(--ma-text-2) !important; line-height:var(--ma-lh-body) !important; font-size:var(--ma-fs-base) !important;
  max-width:var(--ma-measure);
}
.main-content .seo-box :is(h2,h3){ font-family:var(--ma-font-display) !important; color:var(--ma-text) !important; letter-spacing:-.012em; font-size:var(--ma-fs-lg) !important; font-weight:600 !important; margin:0 0 var(--ma-s-4) !important; background:none !important; padding:0 !important; }
.main-content .seo-box p{ margin:0 0 1em !important; }
.main-content .seo-box strong{ color:var(--ma-text) !important; }
.main-content .seo-box a{ color:var(--ma-link) !important; text-decoration:underline; text-underline-offset:3px; }

/* Notes et encadres d'information */
.main-content :is(.note,.info,.etape){
  background:var(--ma-tint) !important;
  border:0 !important; border-inline-start:3px solid var(--ma-accent) !important;
  border-radius:var(--ma-r-sm) !important;
  padding:var(--ma-s-4) var(--ma-s-5) !important; margin:var(--ma-s-5) 0 !important;
  color:var(--ma-text-2) !important;
}
.main-content :is(.note,.info,.etape) :is(h3,h4,strong){ color:var(--ma-text) !important; }
.main-content :is(.note,.info,.etape) :is(p,ul,li){ color:var(--ma-text-2) !important; }

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

/* Tableaux */
.main-content table{ width:100%; border-collapse:collapse; background:var(--ma-surface); border-radius:var(--ma-r); overflow:hidden; margin-block-end:var(--ma-s-5); font-variant-numeric:tabular-nums; }
.main-content table th{ background:var(--ma-surface-2); color:var(--ma-text); font-size:var(--ma-fs-sm); font-weight:700; padding:12px 14px; text-align:start; border-block-end:1px solid var(--ma-line-2); }
.main-content table td{ padding:11px 14px; color:var(--ma-text-2); border-block-end:1px solid var(--ma-line); font-size:var(--ma-fs-sm); }
.main-content table tr:last-child td{ border-block-end:0; }
.main-content table tr:hover td{ background:var(--ma-tint); color:var(--ma-text); }

/* Liens du contenu */
.main-content a:not(.ma-card):not(.ma-btn):not(.ma-ilink):not(.store-btn):not(.ma-store):not(.mh-cat__all):not(.ma-rel__all):not(.ma-link-arrow){
  color:var(--ma-link); text-underline-offset:3px; text-decoration-thickness:1px;
}
.main-content a:not(.ma-card):not(.ma-btn):not(.store-btn):not(.ma-store):hover{ color:var(--ma-link-hover); }
.main-content hr{ border:0; height:1px; background:var(--ma-line); margin:var(--ma-s-8) 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); }

/* Blocs herites restes clairs ou tres colores */
.main-content :is(.square-shortcut-item,.store-link,.android-link,.ios-link,.site-link-box,.verse-header,.surah-info){
  background:var(--ma-surface) !important;
  border:1px solid var(--ma-line) !important;
  border-radius:var(--ma-r-lg) !important;
  color:var(--ma-text) !important; box-shadow:none !important;
  transition:transform var(--ma-mid), border-color var(--ma-mid), box-shadow var(--ma-mid);
}
.main-content :is(.square-shortcut-item,.store-link,.site-link-box):hover{ transform:translateY(-3px); border-color:var(--ma-ring) !important; box-shadow:var(--ma-sh-2) !important; }
.main-content :is(.square-shortcut-item,.store-link,.site-link-box) *{ color:var(--ma-text) !important; }
.main-content :is(.square-shortcut-icon,.store-platform){ color:var(--ma-accent-strong) !important; }
.main-content .store-name{ color:var(--ma-text) !important; font-weight:700; }

/* Champs de formulaire */
.main-content :is(select,input[type="text"],input[type="search"],input[type="number"],input[type="email"],textarea){
  background:var(--ma-surface) !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:var(--ma-fs-base);
}
.main-content :is(select,input,textarea):focus{ outline:none !important; border-color:var(--ma-ring) !important; box-shadow:0 0 0 4px var(--ma-tint) !important; }
.main-content select option{ background:var(--ma-surface); color:var(--ma-text); }

/* ===================== 18. ACCUEIL : WIDGETS D'ORIGINE ===================== */
.ma-home-legacy{ display:block; background:transparent !important; max-width:100% !important; padding:0 !important; color:var(--ma-text-2) !important; }
.ma-home-legacy > br{ display:none; }
.ma-home-legacy #location{ text-align:start; font-family:var(--ma-font-display); font-size:var(--ma-fs-lg); font-weight:600; color:var(--ma-text); margin-block-end:var(--ma-s-4); }
.ma-home-legacy .date-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--ma-s-3); margin-block-end:var(--ma-s-5); }
.ma-home-legacy .date-box > div{ display:flex; align-items:center; gap:10px; padding:var(--ma-s-3) var(--ma-s-4); border-radius:var(--ma-r); background:var(--ma-surface-2); border:1px solid var(--ma-line); color:var(--ma-text); font-size:var(--ma-fs-sm); font-weight:600; }
.ma-home-legacy .date-box i{ color:var(--ma-accent-strong); }
.ma-home-legacy .square-shortcuts-container{ margin:var(--ma-s-5) 0; }
.ma-home-legacy .square-shortcuts-row{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--ma-s-3) !important; }
.ma-home-legacy .square-shortcut-item{ display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:var(--ma-s-4) !important; text-decoration:none; text-align:start; min-height:auto !important; width:auto !important; }
.ma-home-legacy .square-shortcut-icon{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--ma-tint) !important; font-size:1.05rem; }
.ma-home-legacy .square-shortcut-label{ font-size:var(--ma-fs-sm); font-weight:700; }
.ma-home-legacy .cards-row{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--ma-s-3) !important; margin-block-end:var(--ma-s-3); }
.ma-home-legacy .large-card,
.ma-home-legacy .large-card[style]{
  display:flex !important; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  padding:var(--ma-s-5) var(--ma-s-4) !important; border-radius:var(--ma-r-lg) !important;
  background:var(--ma-surface) !important; border:1px solid var(--ma-line) !important;
  color:var(--ma-text) !important; text-decoration:none; text-align:start; box-shadow:none !important;
  transition:transform var(--ma-mid), border-color var(--ma-mid), box-shadow var(--ma-mid);
}
.ma-home-legacy .large-card:hover,.ma-home-legacy .large-card[style]:hover{ transform:translateY(-3px); border-color:var(--ma-ring) !important; box-shadow:var(--ma-sh-2) !important; }
/* Les icones portaient chacune leur couleur (bleu, rouge, violet...) :
   une seule couleur dominante, le vert de marque. */
.ma-home-legacy .card-icon,.ma-home-legacy .card-icon[style]{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--ma-tint) !important; font-size:1.1rem; border:0; }
.ma-home-legacy .card-icon i,.ma-home-legacy .card-icon i[style]{ color:var(--ma-accent-strong) !important; }
.ma-home-legacy .card-label{ font-size:var(--ma-fs-sm); font-weight:700; line-height:1.35; color:var(--ma-text) !important; white-space:normal; }
.ma-home-legacy .title{ font-family:var(--ma-font-display) !important; font-size:var(--ma-fs-lg) !important; font-weight:600 !important; color:var(--ma-text) !important; margin:0 0 var(--ma-s-4) !important; text-align:start; }
.ma-home-legacy .description{ color:var(--ma-text-2) !important; font-size:var(--ma-fs-sm); line-height:1.7; }
.ma-home-legacy .progress-bar{ height:6px !important; border-radius:99px !important; background:var(--ma-elev) !important; overflow:hidden; margin:var(--ma-s-3) 0 6px; }
.ma-home-legacy .progress{ height:100%; border-radius:99px !important; background:var(--ma-accent) !important; }
.ma-home-legacy .time-display{ display:flex; justify-content:space-between; color:var(--ma-text-3) !important; font-size:var(--ma-fs-xs); font-weight:600; font-variant-numeric:tabular-nums; }
.ma-home-legacy :is(.surah-info,.verse-header){ display:flex; align-items:center; justify-content:space-between; gap:var(--ma-s-3); flex-wrap:wrap; padding:var(--ma-s-3) var(--ma-s-4) !important; margin-block-end:var(--ma-s-3); }
.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:var(--ma-r-pill) !important;
  background:var(--ma-tint) !important; color:var(--ma-accent-strong) !important; font-weight:700 !important; font-size:var(--ma-fs-xs) !important;
}
.ma-home-legacy .verses-container{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:9px; margin-block-start:10px; }
.ma-home-legacy :is(.store-icon,.icon-container),.ma-home-legacy .icon-container[style]{ width:48px; height:48px; flex-shrink:0; border-radius:13px; display:grid !important; place-items:center; background:var(--ma-tint) !important; color:var(--ma-accent-strong) !important; font-size:1.2rem; }
.ma-home-legacy .icon-container i{ color:var(--ma-accent-strong) !important; }
.ma-home-legacy .store-platform{ font-size:var(--ma-fs-xs) !important; color:var(--ma-text-3) !important; }
.ma-home-legacy .store-name{ font-size:var(--ma-fs-base) !important; font-weight:700 !important; }
.ma-home-legacy .suggestion-card{ padding:var(--ma-s-5) !important; }
.ma-home-legacy .rating-container{ display:flex; flex-direction:column; gap:10px; text-align:start; }
.ma-home-legacy .rating-container h2{ font-family:var(--ma-font-display); font-weight:600; color:var(--ma-text); font-size:var(--ma-fs-lg); }
.ma-home-legacy .store-link .store-text{ display:flex; flex-direction:column; gap:2px; }
.ma-home-legacy .douas-loading{ color:var(--ma-text-3) !important; text-align:center; padding:var(--ma-s-5); }
.ma-home-legacy iframe{ max-width:100%; border-radius:var(--ma-r); border:1px solid var(--ma-line); }
.ma-home-legacy #hadithCard{
  position:relative; overflow:hidden;
  background:var(--ma-surface) !important; border:1px solid var(--ma-line) !important;
  border-inline-start:3px solid var(--ma-accent) !important; border-radius:var(--ma-r-lg) !important;
  padding:clamp(1.25rem,1rem + 1.5vw,2.25rem) !important; margin-block-end:var(--ma-s-6);
}
.ma-home-legacy #hadithCard::after{
  content:"\201C"; position:absolute; inset-block-start:-30px; inset-inline-end:16px;
  font-family:var(--ma-font-display); font-size:10rem; line-height:1; color:var(--ma-accent); opacity:.12; pointer-events:none;
}
.ma-home-legacy #hadithCard .verse-header{
  display:flex !important; background:transparent !important; border:0 !important; padding:0 !important; margin:0 0 var(--ma-s-4) !important;
  font-size:var(--ma-fs-xs) !important; font-weight:700 !important; letter-spacing:.16em; text-transform:uppercase; color:var(--ma-accent-strong) !important;
}
.ma-home-legacy #hadithCard .hadith-content{ background:transparent !important; color:var(--ma-text) !important; font-family:var(--ma-font-display); font-size:var(--ma-fs-md) !important; line-height:1.65 !important; margin:0 0 var(--ma-s-4) !important; padding:0 !important; max-width:60ch; }
.ma-home-legacy #hadithCard .logo{ color:var(--ma-text-3) !important; font-size:var(--ma-fs-xs) !important; letter-spacing:.08em; margin-block-end:var(--ma-s-4) !important; }
.ma-home-legacy #hadithCard :is(.hadith-source,[class*="source"]){ display:inline-block; padding-block-start:var(--ma-s-3); margin-block-end:6px; border-block-start:1px solid var(--ma-line); color:var(--ma-text-3) !important; font-weight:600 !important; font-size:var(--ma-fs-xs) !important; }
.ma-home-legacy .share-button,.ma-home-legacy #hadithCard .share-button{
  display:inline-flex !important; align-items:center; gap:9px;
  background:var(--ma-accent) !important; color:var(--ma-on-accent) !important; border:0 !important;
  padding:11px 22px !important; border-radius:var(--ma-r-pill) !important; font-weight:700 !important; cursor:pointer;
}
.ma-home-legacy .douas-content{ background:var(--ma-surface) !important; border:1px solid var(--ma-line) !important; border-radius:var(--ma-r-lg) !important; }
.ma-home-legacy .douas-header-btn{ background:var(--ma-surface-2) !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:var(--ma-tint) !important; color:var(--ma-accent-strong) !important; border-radius:var(--ma-r-sm) var(--ma-r-sm) 0 0 !important; }
.ma-home-legacy .doua-mini-btn{ background:var(--ma-surface-2) !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-accent) !important; color:var(--ma-on-accent) !important; border-radius:var(--ma-r-pill) !important; font-weight:700 !important; }
.ma-home-legacy button:not(.share-button):not(.doua-mini-btn):not(.douas-header-btn){
  background:var(--ma-accent) !important; color:var(--ma-on-accent) !important;
  border:0 !important; border-radius:var(--ma-r-pill) !important; padding:11px 22px !important; font-weight:700 !important; cursor:pointer;
}
.ma-home-legacy :is(a u,u){ text-decoration:none; }
.ma-home-legacy .site-link-box,.ma-home-legacy .site-link-box[style]{
  position:relative; display:flex !important; align-items:center; gap:var(--ma-s-4);
  padding:var(--ma-s-5) 56px var(--ma-s-5) var(--ma-s-5) !important;
  background:var(--ma-surface) !important; border:1px solid var(--ma-line) !important; border-radius:var(--ma-r-lg) !important;
  margin-block-end:var(--ma-s-4);
}
[dir="rtl"] .ma-home-legacy .site-link-box{ padding:var(--ma-s-5) var(--ma-s-5) var(--ma-s-5) 56px !important; }
.ma-home-legacy .site-link-box::after{
  content:"\f061"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:absolute; inset-inline-end:22px; top:50%; transform:translateY(-50%);
  color:var(--ma-text-3); font-size:.9rem; transition:transform var(--ma-mid), color var(--ma-mid);
}
[dir="rtl"] .ma-home-legacy .site-link-box::after{ content:"\f060"; }
.ma-home-legacy .site-link-box:hover::after{ color:var(--ma-accent-strong); transform:translateY(-50%) translateX(4px); }
[dir="rtl"] .ma-home-legacy .site-link-box:hover::after{ transform:translateY(-50%) translateX(-4px); }
.ma-home-legacy .site-link-box :is(a,u,b,strong){ text-decoration:none !important; }
.ma-home-legacy .site-link-box a{ color:var(--ma-text) !important; font-family:var(--ma-font-display); font-size:var(--ma-fs-md) !important; font-weight:600 !important; line-height:1.3; }
.ma-home-legacy .store-stars{ margin-inline-start:auto; white-space:nowrap; font-size:1rem; letter-spacing:2px; line-height:1; }

/* ============================ 19. MOUVEMENT ============================ */
/* Etat initial des apparitions : pose par ma-motion.js (html.ma-motion),
   jamais en CSS seul. Sans JavaScript, ou avec « reduire les animations »,
   tout est visible d'emblee. */
html.ma-motion .ma-split-line{ padding-block-end:.08em; }
/* Avant que ma-motion.js prenne la main (au plus 2,2 s, filet en ligne
   dans header.php) : le titre et l'introduction du hero attendent. */
/* Sur ordinateur seulement : sur mobile le titre peut etre l'element le
   plus grand de l'ecran (LCP), il s'affiche donc tout de suite. */
@media (min-width:1025px){
  html.ma-pre :is(.mh-hero h1,.mh-hero__kicker,.mh-hero__lead,.mh-hero__stores,.mh-hero__cta,.mh-seal__txt,
    .main-content .page-title-container h1,.main-content > h1,.main-content h1.page-title){ opacity:0; }
}
/* Changement de theme : fondu de 0,35 s sur les couleurs seulement */
html.ma-theme-anim,html.ma-theme-anim *{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important; }
html.lenis{ scroll-behavior:auto !important; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
html.lenis,html.lenis body{ height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }

/* ============================ 20. RESPONSIVE ============================ */
@media (max-width:1400px){
  :root{ --ma-aside-w:300px; }
  .ma-menu__link{ padding:10px 9px; }
  .ma-search{ width:170px; }
  .ma-search:focus-within{ width:210px; }
}
@media (max-width:1240px){
  .ma-burger{ display:inline-grid; }
  .ma-menu{ display:none; }
  .ma-logo{ margin-inline-end:auto; }
  .mh-quick{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mh-quick a:nth-child(4){ border-inline-start:0; }
  .mh-quick a:nth-child(n+4){ border-block-start:1px solid var(--ma-line); }
}
/* La colonne passe sous le contenu */
@media (max-width:1024px){
  .page-wrapper{ grid-template-columns:minmax(0,1fr) !important; }
  .sidebar-right{ position:static !important; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--ma-s-5); }
  .mh-hero{ grid-template-columns:1fr; }
  .mh-seal{ max-width:300px; }
  .mh-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mh-stat:nth-child(4){ border-inline-start:0; }
  .mh-stat:nth-child(n+4){ border-block-start:1px solid var(--ma-line); }
}
@media (max-width:768px){
  :root{ --ma-nav-h:60px; }
  .app-banner{ font-size:var(--ma-fs-xs); gap:var(--ma-s-2); padding-inline:var(--ma-s-3); }
  .app-banner .store-badges{ display:none; }
  .ma-logo img{ width:34px; height:34px; }
  .ma-logo__sub{ display:none; }
  .ma-nav .ma-search{ display:none; }
  .ma-nav{ gap:var(--ma-s-2); }
  .ma-lang__btn{ padding:0 10px; }
  .ma-lang__code{ display:none; }
  .page-wrapper{ padding-block:var(--ma-s-5) var(--ma-s-8); }
  .ma-ad--header{ padding-block:var(--ma-s-2); }
  .ma-ad--header .ma-ad__inner{ min-height:300px; }
  .ma-appcta{ flex-direction:column; align-items:flex-start; }
  .ma-appcta__btns{ width:100%; }
  .ma-appcta__btns .ma-btn{ flex:1; }
  .ma-pager{ grid-template-columns:1fr; }
  .mh-hero{ border-radius:var(--ma-r-lg); }
  .mh-hero__stores .ma-store{ flex:1 1 180px; justify-content:center; }
  .mh-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-quick a:nth-child(odd){ border-inline-start:0; }
  .mh-quick a:nth-child(4){ border-inline-start:1px solid var(--ma-line); }
  .mh-quick a:nth-child(n+3){ border-block-start:1px solid var(--ma-line); }
  .mh-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mh-stat:nth-child(odd){ border-inline-start:0; }
  .mh-stat:nth-child(4){ border-inline-start:1px solid var(--ma-line); }
  .mh-stat:nth-child(n+3){ border-block-start:1px solid var(--ma-line); }
  #scrollTopBtn{ inset-block-end:var(--ma-s-4); inset-inline-end:var(--ma-s-4); width:44px; height:44px; }
}
@media (max-width:480px){
  .ma-rel__grid{ grid-template-columns:1fr; }
  .sidebar-right{ grid-template-columns:1fr; }
  .ma-faq__q{ font-size:var(--ma-fs-base); }
}

/* ============================ 21. IMPRESSION ============================ */
@media print{
  .ma-header-banner,.app-banner,.ma-nav-shell,.sidebar-left,.sidebar-right,.ma-overlay,#scrollTopBtn,.ma-ad,.ma-appcta,.site-footer,.ma-canvas{ display:none !important; }
  .page-wrapper{ display:block !important; padding:0; }
  html body{ background:#fff !important; color:#000 !important; }
  .ma-faq__item{ break-inside:avoid; }
}

/* ============================ 22. ARABE (RTL) ============================ */
[dir="rtl"]{ --ma-origin-start:right; }
[dir="rtl"] .main-content :where(ul,ol){ padding-inline-start:1.4em; padding-left:0; }
html[lang="ar"] .main-content :where(p,li),html[lang="ar"] .ma-faq__a{ line-height:1.95; }
[dir="rtl"] :is(code,kbd,time){ direction:ltr; unicode-bidi:embed; }
html[lang="ar"] :is(.ma-kicker,.ma-faq__kicker,.mh-sec__kicker,.ma-pager__dir,.mh-stat__l,.ma-pray__next-l,.ma-card__tag,.ma-logo__sub){ letter-spacing:0; text-transform:none; }

/* ===================== 23. PUB MOBILE FIXE EN BAS =====================
   Comme mathovore.fr et maths-pdf.fr : bandeau 320x50 colle en bas de
   l'ecran sous 1024 px, fermable. La page garde une marge en bas pour
   que rien ne soit cache dessous. */
.ma-mobile-ad{ display:none; }
@media (max-width:1023px){
  .ma-mobile-ad{
    display:flex; justify-content:center; align-items:center;
    position:fixed; inset-inline:0; inset-block-end:0; z-index:1000;
    height:62px; padding:6px 0; overflow:hidden;
    background:var(--ma-surface); border-block-start:1px solid var(--ma-line-2);
    box-shadow:0 -6px 20px -10px oklch(0 0 0 / .45);
  }
  .ma-mobile-ad .adsbygoogle{ max-height:50px !important; overflow:hidden; }
  .ma-mobile-ad__close{
    position:absolute; inset-block-start:4px; inset-inline-end:8px;
    width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
    display:grid; place-items:center; font-size:16px; line-height:1;
    background:var(--ma-text); color:var(--ma-bg);
  }
  html.ma-has-mobile-ad .site-footer{ padding-block-end:70px; }
  html.ma-has-mobile-ad #scrollTopBtn{ inset-block-end:78px; }
}

/* ===================== 24. RENDU DIFFERE HORS ECRAN =====================
   Le navigateur ne calcule ces blocs qu'a l'approche du defilement
   (gain sensible sur mobile). contain-intrinsic-size garde une hauteur
   estimee : pas de saut de la barre de defilement. */
.site-footer,.ma-appcta,.ma-rel,.ma-faq{ content-visibility:auto; contain-intrinsic-size:auto 640px; }

/* Pages dont le <body> est en flex centre (qibla-compass...) : les bandeaux
   et le pied de page, enfants directs du body, prenaient la largeur de leur
   contenu et debordaient sur mobile. Ils occupent toute la largeur. */
html body > :is(.ma-appcta,.site-footer,.page-wrapper,.ma-nav-shell,.app-banner,.ma-header-banner,.ma-ad){ align-self:stretch; max-width:100%; }
html body > .ma-appcta{ max-width:min(var(--ma-max), calc(100% - 2 * var(--ma-gutter))); }