/* Cairo (arabe) — bundlé localement, pas de Google Fonts (privacy/KSA) */
  @font-face{ font-family:'Cairo'; src:url('fonts/cairo/Cairo-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
  @font-face{ font-family:'Cairo'; src:url('fonts/cairo/Cairo-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
  @font-face{ font-family:'Cairo'; src:url('fonts/cairo/Cairo-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
  @font-face{ font-family:'Cairo'; src:url('fonts/cairo/Cairo-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
  /* Police marocaine officielle (maghrébine) — déposer le .ttf à fonts/maghribi/Maghribi.ttf ; tant qu'absent, fallback Cairo */
  @font-face{ font-family:'Maghribi'; src:url('fonts/maghribi/Maghribi.ttf') format('truetype'); font-display:swap; }
  /* Tout le texte ARABE en Cairo … */
  html[lang="ar"] *{ font-family:'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
  /* … SAUF le sous-titre (premier texte) en police marocaine officielle */
  html[lang="ar"] #sub{ font-family:'Maghribi', 'Cairo', sans-serif; }
  *{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent;
     font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
  body{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
        background:linear-gradient(160deg,#0b1220 0%,#0f172a 55%,#111c33 100%); color:#fff; padding:40px 20px 30px; }
  .langsw{ position:fixed; top:14px; inset-inline-end:14px; display:flex; gap:4px; z-index:10;
           background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:4px; }
  .langsw button{ border:0; background:transparent; color:#fff; font-weight:700; font-size:13px;
                  padding:6px 11px; border-radius:999px; cursor:pointer; opacity:.6; }
  .langsw button.on{ background:rgba(255,255,255,.92); color:#111; opacity:1; }
  .wrap{ width:100%; max-width:520px; }
  .logo{ display:block; height:34px; margin:6px auto 18px; opacity:.95; }
  h1{ font-size:25px; font-weight:800; text-align:center; letter-spacing:-.5px; }
  .sub{ text-align:center; opacity:.65; font-size:14px; margin:7px 0 22px; }
  .eyebrow{ font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
            opacity:.5; margin:18px 4px 10px; }
  .card{ background:rgba(255,255,255,.05); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
         border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:20px; margin:12px 0;
         box-shadow:0 18px 50px rgba(0,0,0,.4); }
  .head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
  .ic{ width:60px; height:60px; border-radius:16px; flex:0 0 60px; display:flex; align-items:center; justify-content:center;
       background:rgba(255,255,255,.08); overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.3); }
  .ic img{ width:100%; height:100%; object-fit:contain; }
  .head .meta{ flex:1; min-width:0; }
  .name{ font-weight:800; font-size:19px; }
  .ar-name{ font-weight:600; font-size:14px; opacity:.7; margin-inline-start:6px; }
  .desc{ font-size:13.5px; opacity:.72; margin-top:3px; line-height:1.45; }
  .badges{ display:flex; gap:10px; flex-wrap:wrap; }
  .store{ flex:1 1 0; min-width:140px; display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
          padding:11px 14px; border-radius:14px; background:#000; border:1px solid rgba(255,255,255,.16);
          transition:transform .15s ease, border-color .15s; }
  .store:hover{ border-color:rgba(255,255,255,.4); }
  .store:active{ transform:scale(.97); }
  .store svg{ width:24px; height:24px; flex:0 0 24px; }
  .store .l1{ display:block; font-size:9px; opacity:.7; letter-spacing:.3px; line-height:1.1; text-transform:uppercase; }
  .store .l2{ display:block; font-size:15px; font-weight:700; line-height:1.15; }
  .store.soon{ background:rgba(255,255,255,.05); border-style:dashed; opacity:.6; cursor:default; }
  .store.soon:hover{ border-color:rgba(255,255,255,.16); }
  .gold{ border-inline-start:4px solid #e9c45f; }
  .emerald{ border-inline-start:4px solid #14b8a0; }
  .kanari{ border-inline-start:4px solid #3B82F6; }
  .pill{ display:inline-block; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px;
         background:rgba(59,130,246,.16); color:#93c5fd; border:1px solid rgba(59,130,246,.4); }
  .beta{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:18px;
         padding:14px; border-radius:16px; text-decoration:none; color:#cbd5e1; font-weight:700; font-size:14px;
         background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.2); transition:background .15s; }
  .beta:hover{ background:rgba(255,255,255,.08); color:#fff; }
  [dir="rtl"] .beta .a{ transform:scaleX(-1); }
  .foot{ text-align:center; margin-top:22px; font-size:12px; opacity:.5; }
  .foot a{ color:inherit; text-decoration:underline; }

/* classes issues des attributs style= retirés le 2026-10-22 */
.dm-scroll-offset{scroll-margin-top:16px}