/* ==========================================================================
   جماعة مراكش — انتخابات 2026 — نسخة الهاتف/اللوحي (mobile app)
   ========================================================================== */

:root{
  /* PAM palette — white and #01017d with its variants, nothing else.
     --pam-900 is the party blue itself; the rest of the ramp is the same
     hue lightened or darkened. --accent-* is the one brighter variant,
     used for actions and highlights so they read against the deep blue. */
  --pam-950:#01013f;
  --pam-900:#01017d;   /* PAM blue */
  --pam-800:#0b0b90;
  --pam-700:#1c1caa;
  --pam-600:#3232c6;
  --pam-500:#4f4fdd;

  --accent-700:#1f45db;
  --accent-600:#2f5cff;
  --accent-500:#5b83ff;
  --accent-100:#e4ebff;

  --paper-50:#f7f8ff;
  --paper-100:#eef0fb;
  --line:#dcdff4;
  --surface:#ffffff;

  --ink-900:#0a0a2e;
  --ink-700:#2f2f57;
  --ink-500:#61618a;
  --ink-300:#8b8bb0;

  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;

  --ff-head:'Cairo', 'Tajawal', system-ui, sans-serif;
  --ff-body:'Tajawal', 'Cairo', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
html.no-scroll,html.no-scroll body{ overflow:hidden; height:100%; }
body{
  font-family:var(--ff-body);
  background:var(--paper-100);
  color:var(--ink-900);
  -webkit-tap-highlight-color:transparent;
  min-height:100dvh; min-height:100vh;
  padding-bottom:80px; /* clears the fixed tab bar */
}
h1,h2,h3,h4{ font-family:var(--ff-head); margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
.ic{ width:1em; height:1em; display:inline-block; }

/* ==========================================================================
   SHARED COMPONENTS (same visual language as the desktop site)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:100px; padding:14px 22px; font-size:14px; font-weight:800;
  border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent-600); color:#fff; box-shadow:0 10px 24px rgba(47,92,255,.28); }
.btn-ghost{ background:#fff; color:var(--ink-900); border-color:var(--line); }
.btn-ico{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center; flex-shrink:0;
}
.btn-ico .ic{ width:14px; height:14px; }
.btn-ghost .btn-ico{ background:var(--paper-100); color:var(--ink-900); }
.btn-ico-play .ic{ width:16px; height:16px; }

.filter-chip{
  border:1.5px solid var(--line); background:#fff; color:var(--ink-700);
  font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:100px;
  white-space:nowrap; transition:all .15s ease;
}
.filter-chip.is-active{ background:var(--pam-800); border-color:var(--pam-800); color:#fff; }

.axis-tab{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line);
  border-radius:14px; padding:10px 16px; font-size:12.5px; font-weight:700; color:var(--ink-700);
  white-space:nowrap;
}
.axis-tab em{ font-style:normal; font-family:var(--ff-head); font-weight:900; color:var(--line); font-size:15px; }
.axis-tab.is-active{ background:var(--pam-800); border-color:var(--pam-800); color:#fff; }
.axis-tab.is-active em{ color:rgba(255,255,255,.45); }

.link-btn{
  background:none; border:none; color:var(--accent-600); font-weight:800; font-size:13.5px;
  padding:0 20px 30px; display:block;
}

@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.about-pane{ display:none; animation:fadeUp .35s ease; background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 10px 26px rgba(10,10,60,.05); }
.about-pane.is-active{ display:block; }
.about-pane-badge{ display:inline-block; background:var(--accent-100); color:var(--accent-700); font-weight:800; font-size:12px; padding:5px 14px; border-radius:100px; margin-bottom:14px; }
.about-pane h3{ font-size:19px; font-weight:800; color:var(--pam-800); margin-bottom:14px; }
.about-pane p{ font-size:14px; line-height:1.95; color:var(--ink-700); margin-bottom:14px; }
.about-pane p:last-child{ margin-bottom:0; }

.tl-dot{ display:none; }
.tl-card{ background:#fff; border-radius:16px; padding:16px; box-shadow:0 8px 22px rgba(10,10,60,.06); }
.tl-year{ font-size:11px; font-weight:800; color:var(--accent-600); text-transform:uppercase; letter-spacing:.04em; }
.tl-card h4{ font-size:15px; font-weight:800; color:var(--ink-900); margin:8px 0 8px; line-height:1.4; }
.tl-card p{ font-size:13px; color:var(--ink-500); line-height:1.7; }
.tl-item.is-hidden{ display:none; }

/* frameless: a divider between paragraphs, no card box */
.vision-card{ padding:22px 0; border-bottom:1px solid rgba(255,255,255,.1); scroll-margin-top:16px; }
.vision-card:first-child{ padding-top:0; }
.vision-card:last-child{ border-bottom:none; }
.vision-card.is-hidden{ display:none; }
.vision-card .vq{ width:22px; height:22px; color:var(--accent-500); opacity:.8; margin-bottom:12px; }
.vision-card h3{ color:#fff; font-size:17px; font-weight:800; margin-bottom:10px; }
.vision-card p{ color:rgba(255,255,255,.72); font-size:14px; line-height:1.95; }

.m-vision-stack{ gap:0; }
/* horizontal jump-nav — tap a theme to scroll straight to its paragraph.
   Stays pinned under the header while the paragraphs scroll underneath. */
.m-vision-nav{
  position:sticky; top:66px; z-index:4; display:flex; gap:8px; overflow-x:auto;
  padding:10px 20px; margin:0 -20px 8px; background:var(--pam-950); scrollbar-width:none;
}
.m-vision-nav::-webkit-scrollbar{ display:none; }
.m-vision-nav-item{
  flex:0 0 auto; padding:9px 14px; border-radius:100px; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.75);
  white-space:nowrap; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.m-vision-nav-item.is-active{ background:var(--accent-600); border-color:var(--accent-600); color:#fff; }

.axis-pane{ display:none; animation:fadeUp .35s ease; }
.axis-pane.is-active{ display:block; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.stat-card-accent{ background:var(--pam-800); border-color:var(--pam-800); }
.stat-card-accent .stat-num,.stat-card-accent .stat-label{ color:#fff; }
.stat-num{
  font-family:var(--ff-head); font-weight:900; font-size:22px; color:var(--pam-800);
  direction:ltr; unicode-bidi:isolate; text-align:right; /* keeps the +/- sign on the left */
}
.stat-label{ font-size:12px; color:var(--ink-500); line-height:1.6; }
.axis-note{ margin-top:16px; font-size:12.5px; color:var(--ink-500); background:var(--paper-100); border-radius:12px; padding:14px 16px; line-height:1.8; }

.reforms{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:18px; }
.reform-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.reform-badge{ display:inline-block; background:var(--accent-100); color:var(--accent-700); font-weight:800; font-size:12px; padding:5px 12px; border-radius:100px; margin-bottom:10px; }
.reform-card p{ font-size:13px; color:var(--ink-700); line-height:1.8; }

.platform-table{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; font-size:12px; }
.pt-row{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; padding:11px 14px; font-size:11.5px; }
.pt-row:not(:last-child){ border-bottom:1px solid var(--paper-100); }
.pt-head{ background:var(--paper-100); font-weight:800; color:var(--ink-900); }
.pt-row span:nth-child(2){ color:var(--pam-700); font-weight:600; text-align:center; }
.pt-row span{ min-width:0; overflow-wrap:anywhere; }
.pt-row a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(1,1,125,.28); }

/* ==========================================================================
   AGENDA / الأجندة — أجندة الالتزامات
   ========================================================================== */
.pledge-banner{
  position:relative; overflow:hidden;
  margin:16px 20px 4px; padding:22px 20px;
  background:var(--pam-900); border-radius:20px;
}
.pledge-banner::after{
  content:""; position:absolute; inset-inline-start:-70px; top:-90px;
  width:240px; height:240px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(47,92,255,.32), transparent 70%);
}
.pledge-banner-head{ position:relative; z-index:1; margin-bottom:20px; }
.pledge-tag{
  display:inline-block; margin-bottom:10px; padding:5px 12px; border-radius:100px;
  font-size:11px; font-weight:800; color:var(--accent-100); background:rgba(47,92,255,.28);
}
.pledge-slogan{ font-family:var(--ff-head); font-weight:900; color:#fff; font-size:19px; line-height:1.55; }
.pledge-kpis{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.pledge-kpi{ display:flex; flex-direction:column; gap:3px; }
.pledge-kpi-num{
  font-family:var(--ff-head); font-weight:900; font-size:23px; color:#fff;
  direction:ltr; unicode-bidi:isolate; text-align:right;
}
.pledge-kpi-num-sm{ font-size:17px; white-space:nowrap; }
.pledge-kpi-lbl{ font-size:11px; line-height:1.6; color:rgba(255,255,255,.66); }

.charter-body{ padding:0 20px 30px; }
.charter-pane{ display:none; animation:fadeUp .35s ease; }
.charter-pane.is-active{ display:block; }

.charter-head{
  margin-bottom:14px; padding:16px 18px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
}
.charter-lede{ font-size:13px; line-height:1.9; color:var(--ink-700); }
.charter-budget{
  display:inline-flex; flex-direction:column; gap:2px; text-align:center; margin-top:12px;
  padding:9px 16px; border-radius:12px; background:var(--paper-100);
  font-size:11px; color:var(--ink-500);
}
.charter-budget em{ font-style:normal; font-family:var(--ff-head); font-weight:900; font-size:15px; color:var(--pam-800); }

.pledge-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.pledge-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.pledge-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px; margin-bottom:10px;
  background:var(--pam-800); color:#fff;
  font-family:var(--ff-head); font-weight:900; font-size:13.5px;
  direction:ltr; unicode-bidi:isolate;
}
.pledge-card h3{ font-size:15px; font-weight:800; line-height:1.6; color:var(--ink-900); margin-bottom:10px; }
.pledge-list{ display:flex; flex-direction:column; gap:8px; }
.pledge-list li{
  position:relative; padding-inline-start:15px;
  font-size:12.5px; line-height:1.85; color:var(--ink-500);
}
.pledge-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--accent-500);
}

.charter-block{ margin-top:14px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.charter-block-title{ font-size:14px; font-weight:800; color:var(--ink-900); margin-bottom:14px; }
.charter-block-title small{ font-weight:600; font-size:11px; color:var(--ink-300); }

.cond-list{ list-style:none; padding:0; display:grid; grid-template-columns:1fr; gap:10px; counter-reset:cond; }
.cond-list li{
  counter-increment:cond; position:relative; padding-inline-start:30px;
  font-size:12.5px; line-height:1.8; color:var(--ink-700);
}
.cond-list li::before{
  content:counter(cond); position:absolute; inset-inline-start:0; top:1px;
  width:21px; height:21px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-100); color:var(--pam-700);
  font-family:var(--ff-head); font-weight:900; font-size:10.5px;
}

.fin-bars{ display:flex; flex-direction:column; gap:14px; }
.fin-row-head{ display:flex; align-items:baseline; gap:9px; margin-bottom:6px; }
.fin-name{ font-size:12.5px; font-weight:700; color:var(--ink-900); }
.fin-val{ font-family:var(--ff-head); font-weight:900; font-size:14px; color:var(--pam-800); direction:ltr; unicode-bidi:isolate; }
.fin-track{ height:12px; border-radius:4px; background:var(--paper-100); }
/* under dir=rtl the bar is anchored to the right baseline and grows leftwards */
.fin-fill{ height:100%; background:var(--pam-800); border-radius:4px 0 0 4px; }

.fin-res{ display:grid; grid-template-columns:1fr; gap:10px; }
.fin-res-card{ background:var(--paper-50); border:1px solid var(--line); border-radius:14px; padding:15px 16px; }
.fin-res-num{
  display:block; font-family:var(--ff-head); font-weight:900; font-size:23px; color:var(--pam-800);
  direction:ltr; unicode-bidi:isolate; text-align:right;
}
.fin-res-unit{ display:block; font-size:11px; font-weight:700; color:var(--ink-300); margin-bottom:7px; }
.fin-res-card p{ font-size:12.2px; line-height:1.8; color:var(--ink-500); }
.charter-pane .axis-note{ margin-top:14px; }

.program-card{ background:var(--paper-50); border:1px solid var(--line); border-radius:20px; padding:22px; }
.program-card.is-hidden{ display:none; }
.pc-num{ font-family:var(--ff-head); font-weight:900; font-size:20px; color:var(--accent-600); opacity:.55; }
.program-card h3{ font-size:16px; font-weight:800; color:var(--pam-800); margin:10px 0 10px; }
.program-card p{ font-size:13px; color:var(--ink-500); line-height:1.85; }

.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:18px; }
.modal.is-open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,4,28,.6); backdrop-filter:blur(3px); }
.modal-panel{
  position:relative; background:#fff; border-radius:22px; max-width:560px; width:100%;
  max-height:82vh; overflow-y:auto; padding:28px 22px; box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.modal-close{
  position:absolute; z-index:2; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  background:var(--paper-100); border:none; color:var(--ink-700); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.modal-close .ic{ width:16px; height:16px; }
.modal-body h3{ font-size:18px; font-weight:800; color:var(--pam-800); margin-bottom:16px; }
.modal-body p{ font-size:13.5px; line-height:1.95; color:var(--ink-700); margin-bottom:12px; }

/* ==========================================================================
   TOP BAR — language switch, floating over the hero
   ========================================================================== */
.m-topbar{
  position:absolute; top:16px; left:20px; right:20px; z-index:5; direction:ltr;
  display:flex; align-items:center; justify-content:space-between;
}
.m-icon-btn{
  width:44px; height:44px; border-radius:50%; background:#fff; border:none; color:var(--ink-900);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(10,10,60,.12);
  flex-shrink:0;
}
.m-icon-btn .ic{ width:24px; height:24px; }

.m-lang-pill{
  position:relative; display:flex; align-items:center; background:#fff; border-radius:100px;
  padding:4px; box-shadow:0 8px 18px rgba(10,10,60,.12); width:126px; height:44px; direction:ltr;
}
.m-lang-opt{
  position:relative; z-index:1; flex:1; height:100%; border:none; background:none; border-radius:100px;
  font-size:12px; font-weight:800; color:var(--ink-500); transition:color .2s ease;
}
.m-lang-opt.is-active{ color:#fff; }
.m-lang-opt:disabled{ color:var(--ink-300); cursor:not-allowed; }
.m-lang-thumb{
  position:absolute; top:4px; left:4px; width:calc((100% - 8px) / 3); height:calc(100% - 8px);
  background:var(--accent-600); border-radius:100px; transition:transform .25s ease; z-index:0;
}
.m-lang-pill[data-lang-pill="fr"] .m-lang-thumb{ transform:translateX(100%); }
.m-lang-pill[data-lang-pill="en"] .m-lang-thumb{ transform:translateX(200%); }
[dir="ltr"] .m-topbar,
[dir="ltr"] .m-lang-pill{ flex-direction:row-reverse; }
[dir="ltr"] .m-lang-pill[data-lang-pill="ar"] .m-lang-thumb{ transform:translateX(200%); }
[dir="ltr"] .m-lang-pill[data-lang-pill="fr"] .m-lang-thumb{ transform:translateX(100%); }
[dir="ltr"] .m-lang-pill[data-lang-pill="en"] .m-lang-thumb{ transform:translateX(0); }

/* ==========================================================================
   HOME — hero carousel
   ========================================================================== */
.m-hero2{
  position:relative; overflow:hidden; padding:70px 20px 20px;  /* clears the floating topbar */
  background-color:rgba(1,1,125,.16);
  background-image:url('../assets/img/pano-banner-pattern.png');
  background-repeat:repeat; background-size:460px auto;
}
.m-hero2::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, var(--paper-50) 0%, rgba(255,255,255,0) 55%);
}
.m-hero2-media{ position:relative; display:flex; justify-content:center; height:clamp(210px,58vw,270px); margin:14px 0 0; }
.m-hero2-portrait{
  position:relative; z-index:1; height:100%; width:auto; object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 14px 26px rgba(1,1,60,.3));
}
[dir="ltr"] .m-hero2-portrait{ transform:scaleX(-1); }
.m-hero2-id{ position:relative; z-index:1; text-align:center; }
.m-hero2-id h1{ font-size:22px; font-weight:900; color:var(--pam-900); margin-bottom:6px; }
/* the same lead-in and slogan the desktop hero carries, scaled for a phone */
.m-hero2-lead{ font-size:13px; font-weight:800; color:var(--ink-700); letter-spacing:.02em; }
.m-hero2-slogan{
  margin-top:2px; font-family:var(--ff-head); font-weight:900;
  font-size:17px; line-height:1.35; color:var(--accent-600);
}

/* ==========================================================================
   HOME — sections grid: a rounded sheet tucked just under the CTA row, so
   the two CTA buttons visually mark the seam between the hero and the
   blocks below instead of floating loose inside either one
   ========================================================================== */
.m-content{
  position:relative; z-index:2; background:var(--paper-50);
  padding:22px 20px 8px;
}

.m-discover-title{ font-size:12.5px; font-weight:800; color:var(--ink-500); letter-spacing:.02em; margin:0 2px 10px; }

.m-nav-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:22px; }
.m-nav-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  width:100%; background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.7); border-radius:24px; padding:20px 18px;
  box-shadow:0 10px 26px rgba(10,10,60,.08);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.m-nav-card-icon{
  width:46px; height:46px; border-radius:15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,1,125,.1); color:var(--pam-800);
}
.m-nav-card-icon .ic{ width:24px; height:24px; }
.m-nav-card-text{ display:flex; flex-direction:column; gap:4px; width:100%; text-align:right; }
.m-nav-card-text strong{ font-size:16px; font-weight:800; color:var(--ink-900); }
.m-nav-card-text small{ font-size:12px; font-weight:600; color:var(--ink-500); line-height:1.45; }
.m-nav-card:active{ transform:scale(.95); background:rgba(255,255,255,.8); box-shadow:0 4px 14px rgba(10,10,60,.1); }
.m-nav-card-wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px; }
.m-nav-card-wide .m-nav-card-text{ width:auto; flex:1; }

/* app-style action row: one prominent pill + one round icon button, side by side.
   Lives right under the portrait now, so it needs to sit above the hero's
   fade-to-paper overlay like the rest of the hero content does. */
.m-cta-row{ position:relative; z-index:3; display:flex; align-items:center; gap:12px; margin-top:0; }
.m-cta{
  flex:1; height:56px; display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:100px; padding:0 22px; font-size:15px; font-weight:800; border:none;
  background:linear-gradient(135deg, var(--accent-500), var(--accent-700)); color:#fff;
  box-shadow:0 10px 22px rgba(47,92,255,.3);
}
.m-cta:active{ transform:scale(.97); }
.m-cta .ic{ width:15px; height:15px; }

/* ==========================================================================
   CARDS — every rubrique/tool opens as a sheet over the home page,
   closable via the close button, backdrop tap, or Escape.
   ========================================================================== */
.m-card-backdrop{
  position:fixed; inset:0; z-index:29; background:rgba(5,5,32,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.m-card-backdrop.is-open{ opacity:1; pointer-events:auto; }

.m-card-screen{
  position:fixed; inset:28px 0 0; z-index:30;
  background:var(--paper-50); border-radius:26px 26px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.22);
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:90px;
  transform:translateY(100%); visibility:hidden;
  transition:transform .32s cubic-bezier(.32,.72,0,1), visibility 0s linear .32s;
}
.m-card-screen.is-active{ transform:translateY(0); visibility:visible; transition:transform .32s cubic-bezier(.32,.72,0,1); }
.m-card-screen.m-card-flex{ display:flex; flex-direction:column; }
.m-card-screen.m-fullscreen-card{ z-index:45; padding-bottom:0; }

.m-header{
  position:sticky; top:0; z-index:5; background:var(--paper-50);
  padding:16px 20px; box-shadow:0 2px 10px rgba(10,10,60,.05);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.m-header h2{ font-size:17px; font-weight:800; color:var(--ink-900); }
.m-close{
  width:34px; height:34px; border-radius:50%; background:var(--paper-100); border:none;
  color:var(--ink-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.m-close .ic{ width:15px; height:15px; }
.m-close-floating{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); left:16px; z-index:3;
  width:44px; height:44px; background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px);
}
.m-close-floating .ic{ width:19px; height:19px; }
.m-header-dark{ background:var(--pam-950); }
.m-header-dark h2{ color:#fff; }
.m-header-dark .m-close{ background:rgba(255,255,255,.1); color:#fff; }

.m-page-desc{ padding:16px 20px 4px; color:var(--ink-500); font-size:13.5px; line-height:1.75; }
.m-page-desc-dark{ color:rgba(255,255,255,.7); }

.m-screen-dark{ background:linear-gradient(180deg, var(--pam-950), var(--pam-800) 60%); }
.m-screen-dark .m-page-desc{ color:rgba(255,255,255,.75); }
.m-screen-dark .link-btn{ color:var(--accent-500); }

.m-chip-row{ display:flex; gap:8px; overflow-x:auto; padding:16px 20px; scrollbar-width:none; }
.m-chip-row::-webkit-scrollbar{ display:none; }
.m-chip-row .filter-chip,.m-chip-row .axis-tab{ flex:0 0 auto; }
#mVisionFilters .filter-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.75); }
#mVisionFilters .filter-chip.is-active{ background:var(--accent-600); border-color:var(--accent-600); color:#fff; }

#mAxisBody{ padding:0 20px 30px; }
#mAxisBody .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; }
#mAxisBody .axis-note{ margin:14px 0 0; }
#mAxisBody .reforms{ grid-template-columns:1fr; }
#mAxisBody .platform-table{ font-size:12px; overflow-x:auto; }

.m-stack{ display:flex; flex-direction:column; gap:12px; padding:0 20px 30px; }

.m-about-head{ text-align:center; padding:22px 20px 6px; }
.m-about-avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; object-position:center 12%; box-shadow:0 10px 22px rgba(1,1,90,.22); margin-bottom:12px; }
.m-about-head h3{ font-size:19px; font-weight:800; color:var(--ink-900); margin-bottom:8px; }
#mAboutFactsRow{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 20px 4px; }
#mAboutFactsRow li{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 14px; font-size:12px; font-weight:600; color:var(--ink-700); }
#mAboutFactsRow .ic{ width:13px; height:13px; color:var(--accent-600); flex-shrink:0; }
#mAboutContent{ padding:6px 20px 30px; }

.m-empty{ text-align:center; padding:60px 30px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.m-empty-ico{ width:58px; height:58px; border-radius:50%; background:var(--paper-100); color:var(--pam-700); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.m-empty-ico .ic{ width:26px; height:26px; }
.m-empty h3{ font-size:17px; font-weight:800; color:var(--ink-900); }
.m-empty p{ font-size:13.5px; color:var(--ink-500); line-height:1.75; max-width:320px; }
.m-screen-dark .m-empty h3{ color:#fff; }
.m-screen-dark .m-empty p{ color:rgba(255,255,255,.7); }
.m-screen-dark .m-empty-ico{ background:rgba(255,255,255,.1); color:#fff; }
.m-assistant-empty{ flex:1; justify-content:center; }


/* ==========================================================================
   VIDEO CARD — full-bleed player, no popup
   ========================================================================== */
.m-video-card{ inset:0; border-radius:0; background:#000; justify-content:center; }
.m-video-card video{ width:100%; height:100%; object-fit:contain; background:#000; }

/* ==========================================================================
   BOTTOM TAB BAR — with a raised center button for the AI assistant
   ========================================================================== */
.m-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:flex; align-items:flex-end; background:#fff; box-shadow:0 -4px 18px rgba(10,10,60,.08);
  padding:8px 4px calc(6px + env(safe-area-inset-bottom));
}
.m-tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; padding:6px 2px; color:var(--ink-300); font-size:10.5px; font-weight:700;
}
.m-tab .ic{ width:20px; height:20px; }
.m-tab.is-active{ color:var(--accent-600); }

/* raised center button for the AI voice assistant — same visual weight
   as the site's primary CTA, not a plain tab icon */
.m-tab-ai{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--ink-500); }
.m-tab-ai-btn{
  position:absolute; top:-28px; width:56px; height:56px; border-radius:50%; border:3px solid #fff;
  background:linear-gradient(135deg, var(--accent-500), var(--accent-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px rgba(47,92,255,.4);
  overflow: hidden;
}
.m-tab-ai-btn .ic{ width:23px; height:23px; }
.m-tab-ai-btn--image{
  padding: 0;
  background: #fff;
  border: 3px solid #fff;
}
.m-tab-ai-btn--image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.m-tab-ai span{ margin-top:32px; }

/* ==========================================================================
   TABLET — a little more breathing room, cards spread into more columns
   ========================================================================== */
@media (min-width:620px){
  .m-topbar,.m-hero2,.m-content,.m-page-desc,.m-chip-row,#mAxisBody,.m-stack,#mAboutContent,.m-about-head,#mAboutFactsRow{
    max-width:640px; margin-left:auto; margin-right:auto;
  }
  .m-header,.m-tabbar{ padding-left:calc(50% - 320px); padding-right:calc(50% - 320px); }
  #mAxisBody .stat-grid{ grid-template-columns:repeat(3,1fr); }
  .m-hero2-media{ height:290px; }

  .m-card-screen{ left:50%; right:auto; width:100%; max-width:680px; margin-left:-340px; }
}

/* ==========================================================================
   LTR LAYER — French / English (see the desktop sheet for the rationale)
   ========================================================================== */
[dir="ltr"]{ --ff-body:'Inter', 'Cairo', system-ui, sans-serif; }
[dir="ltr"] .stat-num,
[dir="ltr"] .pledge-kpi-num,
[dir="ltr"] .fin-res-num{ text-align:left; }
[dir="ltr"] .fin-fill{ border-radius:0 4px 4px 0; }
[dir="ltr"] .m-nav-card-text{ text-align:left; }
[dir="ltr"] .modal-close{ left:auto; right:14px; }

/* Direction-bearing glyphs: the sprite draws them pointing the RTL way
   ("forward" = leftwards), so LTR mirrors them. The play triangle is not
   directional in that sense and must keep its orientation. */
[dir="ltr"] .btn-ico:not(.btn-ico-play) .ic,
[dir="ltr"] .m-cta .ic,
[dir="ltr"] .m-list-chev,
[dir="ltr"] .m-back .ic{ transform:scaleX(-1); }
.m-volunteer-frame{display:block;width:100%;height:calc(100dvh - 58px);min-height:480px;border:0;background:var(--paper-50)}
#m-volunteer{overflow:hidden;background:var(--paper-50)}


.axis-priority{
  margin-top:14px; padding:18px; border-radius:16px;
  background:var(--pam-900); color:#fff;
}
.axis-priority-tag{
  display:inline-block; margin-bottom:9px; padding:5px 12px; border-radius:100px;
  background:rgba(255,255,255,.14); color:var(--accent-100);
  font-size:11px; font-weight:800;
}
.axis-priority h4{ font-size:15.5px; font-weight:800; color:#fff; line-height:1.5; }
.axis-priority p{ margin-top:8px; font-size:12.5px; line-height:1.9; color:rgba(255,255,255,.74); }

/* ==========================================================================
   SPLIT / حصيلة مراكش / لقاءات تواصلية — one column throughout
   ========================================================================== */
.split-nav{
  display:flex; gap:4px; margin:14px 20px 16px; padding:5px;
  background:var(--paper-100); border:1px solid var(--line); border-radius:100px;
}
.split-btn{
  flex:1; border:none; background:none; border-radius:100px; padding:10px 12px;
  font-family:var(--ff-head); font-size:12.5px; font-weight:800; color:var(--ink-500);
  transition:background .18s ease, color .18s ease;
}
.split-btn.is-active{ background:var(--pam-900); color:#fff; }

.split-pane{ display:none; animation:fadeUp .35s ease; }
.split-pane.is-active{ display:block; }
.split-head{ padding:0 20px 14px; }
.split-title{ font-size:16.5px; font-weight:800; color:var(--ink-900); line-height:1.4; }
.split-desc{ margin-top:6px; font-size:12.5px; line-height:1.8; color:var(--ink-500); }

.mrk-wrap{ padding:0 20px 30px; }
.mrk-lede{
  padding:15px 16px; margin-bottom:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  border-inline-start:3px solid var(--accent-600);
  font-size:13px; line-height:1.9; color:var(--ink-700);
}
.mrk-kpis{ margin-bottom:14px; }
.mrk-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.mrk-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px;
}
.mrk-card h4{
  position:relative; display:inline-block; margin-bottom:9px; padding:5px 12px; border-radius:100px;
  background:var(--accent-100); color:var(--pam-800); font-size:12px; font-weight:800;
}
.mrk-card p{ position:relative; font-size:12.5px; line-height:1.9; color:var(--ink-500); }
.mrk-note{
  margin-top:14px; text-align:center;
  font-family:var(--ff-head); font-weight:900; font-size:14px; color:var(--accent-600);
}

.cal-wrap{ padding:0 20px 30px; }
.cal-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.cal-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 10px 26px rgba(10,10,60,.05);
}
.cal-date{
  align-self:flex-start; font-size:11.5px; font-weight:800; color:var(--pam-800);
  background:var(--paper-100); border-radius:100px; padding:6px 13px;
}
.cal-num{
  font-family:var(--ff-head); font-weight:900; font-size:44px; line-height:1;
  color:var(--pam-900); opacity:.10; margin:16px 0 0;
  direction:ltr; unicode-bidi:isolate;
}
.cal-card h3{ margin-top:12px; font-size:17px; font-weight:800; color:var(--ink-900); line-height:1.45; }
.cal-card p{ margin-top:9px; font-size:12.5px; line-height:1.85; color:var(--ink-500); }

.cal-card-accent{ background:var(--pam-900); border-color:var(--pam-900); }
.cal-card-accent .cal-date{ background:rgba(255,255,255,.14); color:#fff; }
.cal-card-accent .cal-num{ color:#fff; opacity:.20; }
.cal-card-accent h3{ color:#fff; }
.cal-card-accent p{ color:rgba(255,255,255,.72); }

/* Keep the supplied group composition large enough despite its transparent canvas. */
.m-hero2-candidates-portrait{
  height:180%; max-width:none;
  transform:translateY(-24%);
  filter:drop-shadow(0 12px 24px rgba(1,1,60,.22));
}
[dir="ltr"] .m-hero2-candidates-portrait{ transform:translateY(-24%); }
/* Team — vertical constellation */
.m-team-page{ position:relative; min-height:calc(100vh - 64px); padding:18px 22px 110px; overflow:hidden; background:#f7f3ed; }
.m-team-page::before{ content:"FZM"; position:absolute; top:160px; left:-35px; color:rgba(64,23,33,.035); font:900 110px/1 sans-serif; transform:rotate(-90deg); }
.m-team-intro{ position:relative; padding:12px 0 26px; border-bottom:1px solid rgba(111,73,38,.18); }
.m-team-intro>span{ color:#9b733a; font-size:10px; font-weight:800; }.m-team-intro h3{ margin:5px 0 6px; color:#35151f; font-size:27px; line-height:1.35; }.m-team-intro p{ color:#7a6d6f; font-size:12px; }
.m-team-lead,.m-team-member{ position:relative; display:grid; grid-template-columns:106px 1fr; align-items:center; min-height:142px; padding:18px 0; background:transparent; border:0; border-bottom:1px solid rgba(111,73,38,.18); border-radius:0; box-shadow:none; overflow:visible; }
.m-team-lead::before,.m-team-member::before{ content:""; position:absolute; right:51px; bottom:-4px; z-index:2; width:7px; height:7px; border-radius:50%; background:#b89557; box-shadow:0 0 0 5px #f7f3ed; }
.m-team-pending,.m-team-member img{ grid-column:1; grid-row:1; width:92px; height:92px; min-height:0; margin:0; border:1px solid #b89557; border-radius:50%; object-fit:cover; object-position:center 18%; background:#4c1824; box-shadow:0 8px 22px rgba(53,21,31,.16); }
.m-team-pending{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }.m-team-pending strong{ width:auto; height:auto; display:block; background:none; color:#f4e6cb; font-size:20px; }.m-team-pending small{ color:rgba(255,255,255,.5); font-size:8px; }
.m-team-lead>div:last-child,.m-team-member>div{ grid-column:2; grid-row:1; padding:0 14px; }
.m-team-lead span,.m-team-member span{ color:#9b733a; font-size:9px; font-weight:800; }.m-team-lead h3,.m-team-member h3{ margin:5px 0 2px; color:#35151f; font-size:18px; line-height:1.45; }.m-team-lead p,.m-team-member p{ color:#7a6d6f; font-size:11px; }
.m-team-list{ position:relative; display:grid; gap:0; margin:0; }.m-team-list::before{ content:""; position:absolute; top:0; bottom:70px; right:54px; width:1px; background:linear-gradient(#b89557,rgba(184,149,87,.12)); }
.m-team-member>b{ position:absolute; left:2px; top:50%; transform:translateY(-50%); color:rgba(53,21,31,.08); font-size:29px; }

/* Team — clean FZM mobile cards */
.m-team-page{ padding:18px 18px 110px; background:var(--paper-100); }
.m-team-page::before,.m-team-lead::before,.m-team-member::before,.m-team-list::before{ display:none; }
.m-team-intro{ padding:12px 2px 20px; border:0; }
.m-team-intro>span{ color:var(--accent-600); }.m-team-intro h3{ color:var(--pam-900); }.m-team-intro p{ color:var(--ink-500); }
.m-team-lead,.m-team-member{ display:grid; grid-template-columns:94px 1fr; min-height:122px; margin-bottom:11px; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(26,30,78,.05); }
.m-team-lead{ border-top:4px solid var(--accent-600); }
.m-team-pending,.m-team-member img{ width:82px; height:82px; margin:0; border:1px solid rgba(47,92,255,.2); background:linear-gradient(145deg,var(--pam-900),var(--accent-600)); box-shadow:none; }
.m-team-pending strong{ color:#fff; }.m-team-pending small{ color:rgba(255,255,255,.7); }
.m-team-lead>div:last-child,.m-team-member>div{ padding:0 12px; }
.m-team-lead span,.m-team-member span{ color:var(--accent-600); }.m-team-lead h3,.m-team-member h3{ color:var(--pam-900); }.m-team-lead p,.m-team-member p{ color:var(--ink-500); }
.m-team-list{ gap:0; }.m-team-member>b{ color:rgba(47,92,255,.09); }

/* Stronger visual hierarchy for وكيلة اللائحة. */
.m-team-lead{ position:relative; min-height:188px; grid-template-columns:120px 1fr; padding:20px; overflow:hidden; border:0; border-radius:24px 7px 24px 24px; color:#fff; background:linear-gradient(135deg,var(--pam-950),var(--accent-600)); box-shadow:0 16px 34px rgba(25,28,116,.2); }
.m-team-lead::after{ content:"01"; position:absolute; left:12px; bottom:-9px; color:rgba(255,255,255,.08); font-size:72px; font-weight:900; }
.m-team-lead .m-team-pending{ width:106px; height:106px; padding:4px; border:1px solid rgba(255,255,255,.5); background:radial-gradient(circle at 35% 25%,#6079ff,var(--pam-900) 70%); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.m-team-lead>div:last-child{ position:relative; z-index:1; padding-right:14px; }
.m-team-lead span{ color:#fff; }.m-team-lead h3{ color:#fff; font-size:21px; }.m-team-lead p{ color:rgba(255,255,255,.7); }

/* Independent FZM mobile treatment. */
.m-team-lead{ min-height:170px; grid-template-columns:112px 1fr; padding:18px; overflow:visible; border:1px solid rgba(28,35,122,.12); border-right:6px solid var(--accent-600); border-radius:7px 20px 20px 7px; color:var(--ink-900); background:linear-gradient(110deg,#fff,#f3f5ff); box-shadow:0 12px 28px rgba(25,30,91,.09); }
.m-team-lead::after{ display:none; }
.m-team-lead .m-team-pending{ width:98px; height:98px; border:1px solid rgba(47,92,255,.24); background:linear-gradient(145deg,#edf0ff,#dfe5ff); box-shadow:none; }
.m-team-lead .m-team-pending strong{ color:var(--pam-900); }.m-team-lead .m-team-pending small{ color:var(--ink-500); }
.m-team-lead span{ color:var(--accent-600); }.m-team-lead h3{ color:var(--pam-900); }.m-team-lead p{ color:var(--ink-500); }

/* Portrait institutionnel — mobile motion. */
.m-team-lead{ min-height:188px; grid-template-columns:122px 1fr; padding:22px 18px; border-right:0; border-radius:22px; background:linear-gradient(105deg,#fff 0%,#fff 56%,#eef1ff 100%); box-shadow:0 14px 32px rgba(25,30,91,.11); }
.m-team-lead::before{ content:""; display:block; position:absolute; top:18px; right:0; bottom:18px; width:4px; border-radius:4px 0 0 4px; background:var(--accent-600); }
.m-team-lead .m-team-pending{ width:108px; height:108px; }
.m-screen.is-active .m-team-intro{ animation:mTeamUp .45s ease both; }.m-screen.is-active .m-team-lead{ animation:mTeamUp .6s .08s ease both; }.m-screen.is-active .m-team-member{ animation:mTeamUp .55s .18s ease both; }.m-screen.is-active .m-team-member:last-child{ animation-delay:.26s; }
@keyframes mTeamUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .m-screen.is-active .m-team-intro,.m-screen.is-active .m-team-lead,.m-screen.is-active .m-team-member{ animation:none; } }