/* ══════════════════════════════════════════════════════════
   app.css — حساب الحريف «المساعد متاعك» : styles propres à /app (préfixe a2-), utilisés par app.js.
   Dépend de ui.css (tokens + composants). Aucune couleur en dur : tout passe par les tokens.
   ══════════════════════════════════════════════════════════ */
/* ── Assistant (wizard) : mise en page + jauge ── */
.wiz { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
.wiz-aside { position: sticky; top: var(--space-4); }
.wiz-aside .kv { grid-template-columns: auto 1fr; font-size: var(--fs-sm); }
.gauge { position: relative; height: 10px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--warn), var(--ok) 45%, var(--ok) 60%, var(--info)); }
/* app.js positionne le curseur avec style.right (physique) : la transition couvre inset (right + inset-inline-*) */
.gauge i { position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); transform: translateX(50%); transition: inset var(--dur-2) var(--ease); }
.wiz-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-4); position: sticky; bottom: 0; background: var(--bg); padding: var(--space-3) 0; z-index: var(--z-raised); }
@media (max-width: 1100px) { .wiz { grid-template-columns: minmax(0, 1fr); } .wiz-aside { display: none; } }
@media (max-width: 960px) { .wiz-foot { bottom: calc(var(--tabbar-h) + var(--space-4)); } .first-on-mobile { order: -1; } }

body[data-view] { --a2-grad: var(--grad); }
.a2-banner { margin: var(--space-3) var(--space-4) 0; }
.a2-logo { background: var(--logo-grad); color: var(--grad-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 30%, transparent); }
.a2 .brand > span:last-child { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.a2-brand-sub { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.a2-mbrand { font-size: var(--fs-md); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-newbtn { margin-bottom: var(--space-3); }
body[data-view] .badge.brand { display: inline-flex; padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: 600; gap: var(--space-1); }
.a2-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.a2-link { color: inherit; } .a2-link:hover { text-decoration: none; border-color: var(--brand); }
.a2-sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.a2-sec-h h2 { margin: 0; font-size: var(--fs-lg); display: flex; gap: var(--space-2); align-items: center; }
.a2-sec-h h2 .ico { color: var(--accent-text); }
.a2-noscroll { overflow: hidden; }

/* Avatar de l'assistant */
.a2-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--grad-ink); background: var(--a2-grad);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 30%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--white) 25%, transparent); }
.a2-av .ico { width: 18px; height: 18px; stroke-width: 2.1; }
.a2-av.lg { width: 56px; height: 56px; } .a2-av.lg .ico { width: 28px; height: 28px; }

/* ── Accueil ── */

/* ── Accueil (refonte « commerçant débutant ») : une colonne sur téléphone, deux sur ordinateur ── */
.a2-hello { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.a2-hello p { margin-top: var(--space-1); }
.a2-h2t { font-size: var(--fs-lg); margin: 0 0 var(--space-3); }
/* Accueil « simple » : une colonne centrée, UNE grande carte d'action, 3 tuiles, puis le reste */
.a2-home { display: flex; flex-direction: column; gap: var(--space-4); max-width: 980px; margin-inline: auto; }
.a2-home .a2-hello { margin-bottom: 0; }
/* Tuiles raccourcis : grosses cibles, une icône, deux mots */
/* « ابدا في 3 خطوات » : titres seuls, l'étape suivante mise en avant */
.a2-hnote { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--info-soft, var(--surface-2));
  color: var(--ink); font-size: var(--fs-sm); border: 1px solid var(--line); }
.a2-hnote:hover { text-decoration: none; border-color: var(--brand); }
.a2-hnote > .ico:first-child { color: var(--brand); flex: none; }
.a2-hnote.warn { background: var(--warn-soft); }
.a2-hnote.warn > .ico:first-child { color: var(--warn); }
.a2-hnote > .ico:last-child { color: var(--muted); flex: none; }
.a2-hnew { min-height: 56px; font-size: var(--fs-lg); justify-content: center; }
.a2-hnew .ico { width: 22px; height: 22px; }
.a2-hclist { display: grid; }
.a2-cmini { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: var(--ink); border-bottom: 1px solid var(--line); }
.a2-cmini:last-child { border-bottom: 0; padding-bottom: 0; }
.a2-cmini:first-child { padding-top: 0; }
.a2-cmini:hover { text-decoration: none; }
.a2-cmini:hover b { color: var(--brand); }
.a2-cmini-r { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex: none; text-align: end; }
.a2-hcamps .empty { padding: var(--space-4) 0; }
.a2-steps-card .card-h { flex-wrap: wrap; gap: var(--space-2); }
.a2-steps-card .card-h .btn { white-space: nowrap; }
/* États vides (espace client) : pastille ronde de couleur de marque, ton amical */
.a2 .empty .ei { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.a2 .empty h3 { font-size: var(--fs-lg); }

.a2-coach-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.a2-coach-grid.one { grid-template-columns: minmax(0, 1fr); }
.a2-coach { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-4); box-shadow: var(--shadow);
  border-inline-start: 4px solid var(--info); display: flex; flex-direction: column; gap: var(--space-2); }
.a2-coach.ok { border-inline-start-color: var(--ok); } .a2-coach.warn { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.a2-coach p { margin: 0; line-height: 1.6; }
.a2-coach .btn { align-self: flex-start; }
.a2-coach-h { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.a2-coach-h a { margin-inline-start: auto; }
.a2-coach-ic { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--info-soft); color: var(--info); }
.a2-coach.ok .a2-coach-ic { background: var(--ok-soft); color: var(--ok); } .a2-coach.warn .a2-coach-ic { background: var(--warn-soft); color: var(--warn); }
.a2-coach-ic .ico { width: 16px; height: 16px; }

.a2-wallet { background: var(--a2-grad); color: var(--grad-ink); border: 0; position: relative; overflow: hidden; }
.a2-wallet::after { content: ""; position: absolute; inset-inline-start: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--white) 10%, transparent); pointer-events: none; }
.a2-wallet .l { color: var(--grad-ink-2); font-size: var(--fs-sm); display: inline-flex; gap: var(--space-2); align-items: center; }
.a2-wallet .v { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.2; margin-top: var(--space-2); direction: ltr; text-align: left; display: block; }
html[dir="rtl"] .a2-wallet .v { text-align: right; }   /* chiffre aligné sur le bord de départ de la page */
.a2-wallet .btn { background: color-mix(in srgb, var(--white) 20%, transparent); color: var(--grad-ink); } .a2-wallet .btn:hover { background: color-mix(in srgb, var(--white) 30%, transparent); }
.a2-wl { color: var(--grad-ink-2); font-size: var(--fs-sm); }

.a2-guard { border-inline-start: 4px solid var(--muted); }
.a2-guard.on { border-inline-start-color: var(--brand); } .a2-guard.alarm { border-inline-start-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 60%, var(--surface)); }
.a2-guard-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.a2-guard.alarm .a2-guard-ic { background: var(--warn-soft); color: var(--warn); }
.a2-guard-ic .ico { width: 24px; height: 24px; }
.a2-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: a2pulse 2s infinite; }
.a2-guard.alarm .a2-pulse { background: var(--warn); } .a2-guard.off .a2-pulse { background: var(--muted); animation: none; }
@keyframes a2pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }


.a2-notifs a { display: flex; gap: var(--space-3); align-items: flex-start; color: inherit; padding: var(--space-3) 0; border-bottom: 1px dashed var(--line); }
.a2-notifs a:last-child { border-bottom: 0; } .a2-notifs a:hover { text-decoration: none; color: var(--brand); }
.a2-notifs small { display: block; }
.a2-notifs a.new { font-weight: 600; }
.a2-ndot { width: 8px; height: 8px; border-radius: 50%; margin-top: var(--space-2); flex: none; background: transparent; }
.a2-notifs a.new .a2-ndot { background: var(--brand-fill); }

.a2-clist { display: grid; gap: var(--space-3); }
.a2-clist.grid2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@media (max-width: 420px) { .a2-clist.grid2 { grid-template-columns: minmax(0, 1fr); } }
.a2-crow { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); min-width: 0; }
.a2-crow:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.a2-cic { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.a2-cic.lg { width: 56px; height: 56px; border-radius: var(--r-lg); } .a2-cic.lg .ico { width: 28px; height: 28px; }
.a2-crow-s { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-2); font-size: var(--fs-sm); }

/* ── Constructeur conversationnel ── */
.a2-cb { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: var(--space-5); align-items: start; max-width: 1180px; }
.a2-cb-main { min-width: 0; }
.a2-cb-h { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.a2-cb-h b, .a2-cb-h small { display: block; line-height: 1.3; } .a2-cb-h small { color: var(--muted); font-size: var(--fs-sm); }
.a2-prog { width: 110px; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; flex: none; }
.a2-prog i { display: block; height: 100%; background: var(--a2-grad); border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease); }
.a2-chat { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-6); }
.a2-chat.solo { max-width: 680px; margin: var(--space-3) auto; }
.a2-step { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 90px; }
.a2-msg { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 100%; }
.a2-msg .a2-bub { max-width: min(560px, 100%); padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); line-height: 1.7; font-size: var(--fs-md); }
.a2-msg.bot .a2-bub { background: var(--surface); border: 1px solid var(--line); border-end-start-radius: var(--r-sm); box-shadow: var(--shadow); }
.a2-txt small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--space-1); }
.a2-msg.user { justify-content: flex-end; }
.a2-msg.user .a2-bub { font: inherit; text-align: start; cursor: pointer; background: var(--brand-fill); color: var(--brand-ink); border: 0; border-end-end-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: var(--space-1); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 25%, transparent); transition: transform var(--dur-1) var(--ease), filter var(--dur-1) var(--ease); }
.a2-msg.user .a2-bub:hover { filter: brightness(1.07); } .a2-msg.user .a2-bub:active { transform: scale(.99); }
.a2-msg.user .a2-bub .ico { vertical-align: -0.2em; }
.a2-ans { display: block; } .a2-ans > .ico { margin-inline-end: var(--space-1); }
.a2-edit { font-size: var(--fs-xs); display: inline-flex; gap: var(--space-1); align-items: center; }
.a2-edit .ico { width: 13px; height: 13px; }
.a2-need { font-weight: 600; }
.a2-ans-ad { display: flex; gap: var(--space-3); align-items: center; }
.a2-ans-ad img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.a2-panel { margin-inline-start: var(--space-7); padding: var(--space-4); border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 10%, transparent); min-width: 0; }
.a2-step.cur .a2-msg.bot .a2-bub { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.a2-next { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.a2-next .btn { min-width: 140px; }
.a2-dots3a { display: none; gap: var(--space-1); padding: var(--space-1) 0; }
.a2-dots3a i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: a2blink 1s infinite; }
.a2-dots3a i:nth-child(2) { animation-delay: .15s; } .a2-dots3a i:nth-child(3) { animation-delay: .3s; }
@keyframes a2blink { 50% { opacity: .3; transform: translateY(-2px); } }
.a2-msg.in { animation: a2pop var(--dur-3) var(--ease) both; }
.a2-msg.in .a2-dots3a { display: flex; animation: a2gone 0s .55s forwards; }
.a2-msg.in .a2-txt { animation: a2show var(--dur-3) .55s both; }
.a2-panel.in { animation: a2pop var(--dur-3) .7s both; }
@keyframes a2pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes a2gone { to { display: none; } }
@keyframes a2show { from { opacity: 0; max-height: 0; overflow: hidden; } to { opacity: 1; max-height: 600px; } }
@media (prefers-reduced-motion: reduce) { .a2-msg.in, .a2-panel.in, .a2-msg.in .a2-txt { animation: none; } .a2-msg.in .a2-dots3a { display: none; } }

.a2-pick { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.a2-goals { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.a2-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .a2-two { grid-template-columns: minmax(0, 1fr); } }
.a2-est { display: inline-block; margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 2px var(--space-2); border-radius: var(--r-pill); }
.choice.on .a2-est { background: var(--surface); }
.a2-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-1); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: var(--space-4); }
.a2-seg button { font: inherit; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r-md); padding: var(--space-3) var(--space-3); cursor: pointer; display: flex; gap: var(--space-3); align-items: center; text-align: start; min-width: 0; }
.a2-seg button b, .a2-seg button small { display: block; } .a2-seg button small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.a2-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.a2-seg button.on .ico { color: var(--brand); }
.a2-seg.sm { display: inline-flex; grid-template-columns: none; padding: var(--space-1); margin: 0; border-radius: var(--r-pill); flex-wrap: wrap; }
.a2-seg.sm button { padding: var(--space-2) var(--space-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; gap: var(--space-2); }
.a2-mini-guide { background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); }
.a2-mini-guide ol { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); } .a2-mini-guide li { margin: 2px 0; }
.a2-drop { padding: var(--space-4); }
.a2-drop img { max-height: 200px; }

.a2-ai { border-radius: var(--r-lg); }
.a2-aibtn { width: 100%; font: inherit; color: var(--ink); cursor: pointer; display: flex; gap: var(--space-3); align-items: center; text-align: start; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--a2-grad) border-box; transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.a2-aibtn:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 18%, transparent); }
.a2-aibtn > .ico { width: 36px; height: 36px; padding: var(--space-2); border-radius: var(--r-md); background: var(--a2-grad); color: var(--grad-ink); }
.a2-aibtn b, .a2-aibtn small { display: block; } .a2-aibtn small { color: var(--muted); }
.a2-ai.open { padding: var(--space-4); border: 1.5px solid transparent; background: linear-gradient(color-mix(in srgb, var(--brand-soft) 45%, var(--surface)), color-mix(in srgb, var(--brand-soft) 45%, var(--surface))) padding-box, var(--a2-grad) border-box; }
.a2-ai-h { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .a2-ai-h .btn { margin-inline-start: auto; } .a2-ai-h > .ico { color: var(--brand); }
.a2-ai-skel { display: grid; gap: var(--space-2); } .a2-ai-skel .skel { height: 70px; }
.a2-vars { display: grid; gap: var(--space-3); }
.a2-var { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-3) var(--space-4); }
.a2-var p { white-space: pre-wrap; margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-md); }

.a2-pol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.a2-pol li { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.a2-pol li .ico { color: var(--warn); margin-top: var(--space-1); }
.a2-pol li.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .a2-pol li.bad .ico, .a2-pol li.bad b { color: var(--bad); }
.a2-pol li.warn b { color: var(--warn); }
.a2-hl { background: color-mix(in srgb, currentColor 12%, transparent); border-radius: var(--r-xs); padding: 0 var(--space-1); }
.a2-pol-ok { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); color: var(--ok); }

.a2-custom { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.a2-dial { text-align: center; }
.a2-stepper { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-1) 0 var(--space-2); }
.a2-stepper .btn.icon { width: 48px; height: 48px; border-radius: 50%; font-size: var(--fs-2xl); font-weight: 500; }
.a2-stepper b { font-size: var(--fs-3xl); line-height: 1.1; color: var(--brand); } .a2-stepper small { display: block; color: var(--muted); }
.a2-stepper > div { min-width: 110px; text-align: center; }
.a2-big { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; }
.a2-bsum .card { padding: var(--space-4); }
.a2-balline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--ok-soft); }
.a2-balline > .ico { color: var(--ok); } .a2-balline.bad { background: var(--bad-soft); } .a2-balline.bad > .ico { color: var(--bad); }
.a2-note { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-2); margin: var(--space-3) 0 0; } .a2-note .ico { color: var(--brand); margin-top: var(--space-1); }

.a2-review { display: grid; gap: var(--space-4); }
.a2-recap { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.a2-recap li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.a2-recap li:last-child { border-bottom: 0; } .a2-recap b { overflow-wrap: anywhere; }
.a2-editlink { font: inherit; font-size: var(--fs-sm); color: var(--brand); background: var(--brand-soft); border: 0; border-radius: var(--r-pill); padding: var(--space-1) var(--space-3); cursor: pointer; }
@media (max-width: 420px) { .a2-recap li { grid-template-columns: minmax(0, 1fr) auto; } .a2-recap li > span { grid-column: 1 / -1; font-size: var(--fs-sm); } }
.a2-expect { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--brand-soft); }
.a2-expect .ico { color: var(--brand); margin-top: var(--space-1); }
.a2-send { font-size: var(--fs-lg); }
.a2-hide-sm { margin-inline-start: var(--space-1); }
@media (max-width: 560px) { .a2-hide-sm { display: none; } .a2-prog { width: 70px; } }

/* Aperçu (téléphone) */
.a2-side { position: sticky; top: var(--space-4); display: grid; gap: var(--space-4); justify-items: center; max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 var(--space-1) var(--space-2); }
.a2-side > div { width: 100%; }
.a2-side-h, .a2-peek, .a2-sheet-bg { display: none; }
/* Maquette de téléphone : reprend les tokens (clair/sombre suivent automatiquement) ; le cadre reste sombre */
.a2-phone { --fb-bg: var(--bg); --fb-card: var(--surface); --fb-ink: var(--ink); --fb-mut: var(--muted); --fb-line: var(--surface-3); --fb-btn: var(--surface-3);
  width: 300px; max-width: 100%; margin: 0 auto; border-radius: var(--r-xl); padding: var(--space-3); background: var(--ink-fixed); box-shadow: var(--sh-3), inset 0 0 0 2px color-mix(in srgb, var(--white) 12%, var(--ink-fixed));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, var(--font); }
.a2-ph-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-5) var(--space-1); color: var(--white); font-size: var(--fs-xs); font-weight: 600; }
.a2-notch { width: 84px; height: 22px; border-radius: var(--r-md); background: var(--black); }
.a2-ph-scr { height: min(500px, calc(100vh - 150px)); min-height: 400px; overflow: hidden; border-radius: var(--r-lg); background: var(--fb-bg); color: var(--fb-ink); position: relative; font-size: var(--fs-sm); line-height: 1.45; }
.a2-fb-top { direction: ltr; font: 700 var(--fs-xl)/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.5px; color: var(--fb); padding: var(--space-4) var(--space-4) var(--space-3); background: var(--fb-card); border-bottom: 1px solid var(--fb-line); }
.a2-ig-top { direction: ltr; font: italic 600 var(--fs-xl)/1 Georgia, "Times New Roman", serif; padding: var(--space-4); background: var(--fb-card); border-bottom: 1px solid var(--fb-line); }
.a2-post { background: var(--fb-card); margin: var(--space-2) 0; }
.a2-ph-h { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-3); }
.a2-ph-h > div { flex: 1; min-width: 0; } .a2-ph-h b { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-ph-h small { color: var(--fb-mut); font-size: var(--fs-xs); display: flex; gap: var(--space-1); align-items: center; direction: ltr; justify-content: flex-end; }
.a2-ph-h small .ico { width: 11px; height: 11px; }
.a2-pa { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--grad-ink); background: var(--a2-grad); flex: none; }
.a2-pa.ring { box-shadow: 0 0 0 2px var(--fb-card), 0 0 0 4px var(--ig-pink); }
.a2-dots3 { color: var(--fb-mut); font-weight: 700; }
.a2-ph-txt { padding: 0 var(--space-3) var(--space-3); white-space: pre-wrap; word-break: break-word; max-height: 118px; overflow: hidden; }
.a2-ph-img { position: relative; aspect-ratio: 1 / 1; background: var(--fb-btn); display: grid; place-items: center; overflow: hidden; }
.a2-ph-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a2-ph-empty { display: grid; justify-items: center; gap: var(--space-1); color: var(--fb-mut); }
.a2-ph-empty .ico { width: 36px; height: 36px; }
.a2-ph-foot { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--fb-bg); }
.a2-ph-foot small { color: var(--fb-mut); font-size: var(--fs-xs); display: block; }
.a2-ph-foot b { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-ph-btn { direction: ltr; background: var(--fb-btn); color: var(--fb-ink); font-weight: 600; font-size: var(--fs-xs); padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); white-space: nowrap; }
.a2-ph-react { direction: ltr; display: flex; justify-content: space-around; padding: var(--space-2) var(--space-1); color: var(--fb-mut); font-size: var(--fs-xs); font-weight: 600; border-top: 1px solid var(--fb-line); margin: 0 var(--space-3); }
.a2-ghost { height: 120px; margin: var(--space-2) 0; background: var(--fb-card); position: relative; }
.a2-ghost::before { content: ""; position: absolute; inset: 14px 12px auto; height: 34px; background: linear-gradient(var(--fb-btn), var(--fb-btn)) 0 0 / 34px 34px no-repeat, linear-gradient(var(--fb-btn), var(--fb-btn)) 44px 6px / 45% 9px no-repeat, linear-gradient(var(--fb-btn), var(--fb-btn)) 44px 22px / 25% 7px no-repeat; border-radius: var(--r-xs); }
.a2-ghost::after { content: ""; position: absolute; inset: 62px 12px 14px; background: var(--fb-bg); border-radius: var(--r-sm); }
.a2-post-ex { display: grid; justify-items: center; gap: var(--space-2); text-align: center; padding: var(--space-5) var(--space-4); }
.a2-post-ex > .ico { width: 40px; height: 40px; color: var(--fb); }
.a2-post-ex small { color: var(--fb-mut); }
.a2-ph-url { font-size: var(--fs-xs); color: var(--fb-mut); background: var(--fb-bg); padding: var(--space-1) var(--space-2); border-radius: var(--r-sm); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2-ig { margin: 0; }
.a2-ig-cta { direction: ltr; display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3); font-weight: 600; font-size: var(--fs-xs); color: var(--ig-blue); border-bottom: 1px solid var(--fb-line); }
.a2-ig-cta .ico { width: 14px; height: 14px; transform: scaleX(-1); }
.a2-ig-act { direction: ltr; display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-1); }
.a2-ig-act .ico { width: 22px; height: 22px; }
.a2-story { position: absolute; inset: 0; background: var(--black); color: var(--white); overflow: hidden; display: grid; place-items: center; }
.a2-story img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.6); transform: scale(1.2); }
.a2-story img.fg { position: relative; width: 100%; max-height: 62%; object-fit: contain; }
.a2-st-bars { position: absolute; top: 10px; inset-inline: 10px; display: flex; gap: var(--space-1); }
.a2-st-bars i { flex: 1; height: 2.5px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--white) 45%, transparent); } .a2-st-bars i:first-child { background: var(--white); }
.a2-st-h { position: absolute; top: 22px; inset-inline: 12px; display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); }
.a2-st-h small { opacity: .8; direction: ltr; }
.a2-st-h .a2-pa { width: 28px; height: 28px; font-size: var(--fs-xs); }
.a2-st-txt { position: absolute; bottom: 86px; inset-inline: 16px; text-align: center; font-weight: 600; font-size: var(--fs-sm); text-shadow: 0 1px 6px color-mix(in srgb, var(--black) 60%, transparent); }
.a2-st-cta { direction: ltr; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; }
.a2-st-cta .ico, html[dir="ltr"] .a2-st-cta .ico { transform: rotate(90deg); width: 16px; height: 16px; }
.a2-st-cta span { background: var(--white); color: var(--ink-fixed); padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-xs); white-space: nowrap; }
.a2-places { margin: var(--space-3) auto 0; display: flex; justify-content: center; width: fit-content; }
.a2-places .ico { width: 15px; height: 15px; }
.a2-sum { padding: var(--space-4); } .a2-sum h3 { margin-bottom: var(--space-3); }
.a2-sum .kv { font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.a2-sum-est { margin-top: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--r-md); background: var(--brand-soft); }
.a2-phone.mini { width: 320px; } .a2-phone.mini .a2-ph-scr { height: auto; max-height: 560px; }

@media (max-width: 1100px) {
  .a2-cb { grid-template-columns: minmax(0, 1fr); }
  .a2-side { position: fixed; z-index: var(--z-sheet); inset-inline: 0; bottom: 0; top: auto; max-height: 90vh; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-6); background: var(--bg);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg); transform: translateY(105%); transition: transform var(--dur-2) var(--ease); visibility: hidden; }
  .a2-side.open { transform: none; visibility: visible; }
  .a2-side-h { display: flex; width: 100%; justify-content: space-between; align-items: center; position: sticky; top: -12px; background: var(--bg); padding: var(--space-2) 0; z-index: 2; }
  .a2-side-h::before { content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 42px; height: 4px; border-radius: var(--r-xs); background: var(--surface-3); }
  .a2-side.open ~ .a2-sheet-bg { display: block; position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: var(--scrim); }
  .a2-peek { display: inline-flex; position: fixed; z-index: var(--z-fixed); bottom: 20px; left: 50%; transform: translateX(-50%); align-items: center; gap: var(--space-2); font: inherit; font-weight: 600; font-size: var(--fs-sm);
    padding: var(--space-2); padding-inline-start: var(--space-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink); color: var(--bg); cursor: pointer; box-shadow: var(--shadow-lg); }
  .a2-peek > span:first-child { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--a2-grad); color: var(--grad-ink); }
  .a2-peek img { width: 100%; height: 100%; object-fit: cover; }
  .a2-peek > .ico, html[dir="ltr"] .a2-peek > .ico { width: 14px; height: 14px; transform: rotate(90deg); }
}
@media (max-width: 960px) {
  .a2-cb-h { top: 60px; }
  .a2-peek { bottom: calc(var(--tabbar-h) + var(--space-5) + env(safe-area-inset-bottom)); }
  .a2-panel { margin-inline-start: 0; padding: var(--space-4); }
  .a2-msg .a2-bub { font-size: var(--fs-md); }
  .a2-step { scroll-margin-top: 130px; }
}

/* ── Campagne : tableau de bord ── */
.a2-back { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.a2-chero { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); padding: var(--space-5) var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow);
  --tone: var(--info); background: radial-gradient(110% 160% at var(--x-start) 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 60%), var(--surface); }
.a2-chero.ok { --tone: var(--ok); } .a2-chero.warn, .a2-chero.guard { --tone: var(--warn); } .a2-chero.bad { --tone: var(--bad); }
.a2-chero-t { display: flex; gap: var(--space-4); align-items: center; }
.a2-chero h1 { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); margin: 0; }
.a2-chero-sub { color: var(--muted); }
.a2-chero-s { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; margin-top: var(--space-4); }
.a2-status { display: flex; gap: var(--space-3); align-items: flex-start; flex: 1 1 320px; }
.a2-status p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); }
.a2-sic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--info-soft); color: var(--info); }
.a2-sic.ok { background: var(--ok-soft); color: var(--ok); } .a2-sic.warn { background: var(--warn-soft); color: var(--warn); } .a2-sic.bad { background: var(--bad-soft); color: var(--bad); }
.a2-gchip { display: inline-flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand); font-size: var(--fs-sm); }
.a2-gchip b { font-weight: 700; } .a2-gchip span:not(.a2-pulse) { color: var(--ink); }
.a2-chero-a { margin-top: var(--space-4); }
.a2-guardbox { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); border-radius: var(--r); background: var(--warn-soft); border: 1.5px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.a2-guardbox > .row > .ico { width: 34px; height: 34px; color: var(--warn); flex: none; }
.a2-guardbox h3 { margin: 0 0 var(--space-1); }
.a2-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-4); }
@media (max-width: 860px) { .a2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .a2-kpis { grid-template-columns: minmax(0, 1fr); } }
.a2-kpi { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.a2-kpi-h { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.a2-kpi-h .ic { width: 30px; height: 30px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.a2-kpi-h .ic .ico { width: 16px; height: 16px; }
.a2-kpi-v { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.a2-kpi-v small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.a2-kpi-v.sm { font-size: var(--fs-xl); }
.a2-kpi.ring .row { flex-wrap: wrap !important; } .a2-kpi-v.sm { white-space: nowrap; }
@media (max-width: 560px) { .a2-ring { width: 60px; height: 60px; } .a2-kpi { padding: var(--space-4); } .a2-kpi-v { font-size: var(--fs-xl); } .a2-kpi.hero .a2-kpi-v { font-size: var(--fs-2xl); } }
.a2-kpi-help { margin: auto 0 0; padding-top: var(--space-2); border-top: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.a2-kpi.hero { background: var(--a2-grad); color: var(--grad-ink); border: 0; }
.a2-kpi.hero .a2-kpi-h, .a2-kpi.hero .a2-kpi-help, .a2-kpi.hero .a2-kpi-v small { color: var(--grad-ink-2); }
.a2-kpi.hero .a2-kpi-h .ic { background: color-mix(in srgb, var(--white) 20%, transparent); color: var(--grad-ink); }
.a2-kpi.hero .a2-kpi-v { font-size: var(--fs-3xl); }
.a2-kpi.hero .a2-kpi-help { border-top-color: color-mix(in srgb, var(--white) 30%, transparent); }
.a2-verdict { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
.a2-verdict b { font-size: var(--fs-md); } .a2-verdict small { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45; }
.a2-verdict.ok { background: var(--ok-soft); } .a2-verdict.ok b { color: var(--ok); }
.a2-verdict.info { background: var(--info-soft); } .a2-verdict.info b { color: var(--info); }
.a2-verdict.warn { background: var(--warn-soft); } .a2-verdict.warn b { color: var(--warn); }
.a2-ring { width: 76px; height: 76px; flex: none; }
.a2-ring .bg { fill: none; stroke: var(--surface-3); stroke-width: 8; }
.a2-ring .fg { fill: none; stroke: var(--brand); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray var(--dur-3) var(--ease); }
.a2-ring text { fill: var(--ink); font: 700 var(--fs-sm) var(--font); }

.a2-chartcard { margin-bottom: var(--space-4); }
.a2-chartcard .card-h { flex-wrap: wrap; }
.a2-chart { position: relative; direction: ltr; overflow: hidden; touch-action: pan-y; cursor: crosshair; border-radius: var(--r-md); outline-offset: 4px; }
.a2-chart svg { display: block; }
.a2-chart .g { stroke: var(--line); stroke-dasharray: 3 4; }
.a2-chart .yl, .a2-chart .xl { fill: var(--muted); font: 500 var(--fs-xs) var(--font); }
.a2-chart .s0 { stop-color: var(--brand); stop-opacity: .32; } .a2-chart .s1 { stop-color: var(--brand); stop-opacity: 0; }
.a2-chart .line { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.a2-chart .pt { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.a2-chart .cbar { fill: color-mix(in srgb, var(--brand) 70%, transparent); } .a2-chart .cbar.best { fill: var(--accent); }
.a2-chart .bestm circle { fill: none; stroke: var(--accent-text); stroke-width: 2.5; }
.a2-chart .bestm text { fill: var(--accent-text); font: 700 var(--fs-xs) var(--font); }
.a2-chart .guide { stroke: var(--ink); stroke-opacity: .25; stroke-dasharray: 4 3; }
.a2-chart .hov { fill: var(--brand); stroke: var(--surface); stroke-width: 3; }
.a2-tip { position: absolute; top: 4px; z-index: 2; display: grid; gap: 2px; min-width: 150px; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--ink); color: var(--bg);
  font-size: var(--fs-sm); box-shadow: var(--shadow-lg); pointer-events: none; direction: rtl; }
.a2-tip b { font-weight: 700; }
.a2-tip[hidden] { display: none; }
.a2-bestday { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--accent-soft); font-size: var(--fs-sm); }
.a2-bestday > .ico { color: var(--accent-text); margin-top: var(--space-1); }
.a2-chart-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--r-md); }
.a2-chart-empty .ico { width: 30px; height: 30px; } .a2-chart-empty p { margin: 0; }
.a2-wait { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); } .a2-wait > .ico { width: 28px; height: 28px; color: var(--brand); flex: none; }
.a2-cgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
@media (max-width: 860px) { .a2-cgrid { grid-template-columns: minmax(0, 1fr); } }

.a2-cmp { margin-bottom: var(--space-1); }
.a2-cmp.empty-ish { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface-2); box-shadow: none; border-style: dashed; }
.a2-cmp.empty-ish > .ico { width: 28px; height: 28px; color: var(--brand); flex: none; }
.a2-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.a2-rank a { display: flex; gap: var(--space-3); align-items: center; color: inherit; padding: var(--space-3) var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
.a2-rank a:hover { text-decoration: none; background: var(--brand-soft); }
.a2-rank li:first-child a { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.a2-rk { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface); flex: none; }
.a2-rk.gold { background: var(--accent); font-size: var(--fs-md); }
.a2-rbar { height: 7px; border-radius: var(--r-pill); background: var(--surface-3); margin: var(--space-2) 0 var(--space-1); overflow: hidden; }
.a2-rbar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--a2-grad); }

/* ── Portefeuille ── */
.a2-wal { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 960px) { .a2-wal { grid-template-columns: minmax(0, 1fr); } }
.a2-tiers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a2-tier { display: grid; padding: var(--space-2) var(--space-4); border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface-2); transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.a2-tier small { color: var(--muted); font-size: var(--fs-xs); } .a2-tier b { font-size: var(--fs-md); }
.a2-tier.on { border-color: var(--brand); background: var(--brand-soft); } .a2-tier.on b { color: var(--brand); }
.a2-gift { display: flex; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.a2-gift > .ico { color: var(--accent-text); margin-top: var(--space-1); }
.a2-hint { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--r-md); background: var(--info-soft); font-size: var(--fs-sm); }
.a2-hint > .ico { color: var(--info); } .a2-hint span { flex: 1; }
.a2-methods { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* ── Calculateur de budget (#/calc) : le simulateur de l'accueil, dans l'espace client ── */
.a2-calc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 960px) { .a2-calc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .a2-calc-range { font-size: var(--fs-2xl); } }
.a2-calc-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.a2-calc-tot { font-size: var(--fs-lg); }   /* le dinar d'abord : le total en dinars est le gros chiffre */
.a2-calc-goals { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.a2-calc-range { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin-top: var(--space-1); font-size: var(--fs-3xl); font-weight: 800; line-height: var(--lh-tight); color: var(--brand-2); }
.a2-calc-meter { position: relative; height: 8px; margin-top: var(--space-3); border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.a2-calc-meter i { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--s, 0%); width: var(--w, 3%); border-radius: var(--r-pill); background: var(--grad); transition: inset var(--dur-2) var(--ease), width var(--dur-2) var(--ease); }
.a2-calc-note { display: flex; gap: var(--space-2); align-items: flex-start; } .a2-calc-note > .ico { flex: none; margin-top: 2px; }
.a2-calc-gift { display: flex; gap: var(--space-2); align-items: center; color: var(--accent-text); font-weight: 600; }
.a2-total { font-size: var(--fs-lg); color: var(--brand); }
.a2-hist { display: grid; }
.a2-hrow { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px dashed var(--line); }
.a2-hrow:last-child { border-bottom: 0; }
.a2-hic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.a2-hic.ok { background: var(--ok-soft); color: var(--ok); } .a2-hic .ico { width: 17px; height: 17px; }

/* ── Parrainage ── */
.a2-refhero { border-radius: var(--r-lg); padding: var(--space-5); color: var(--grad-ink); position: relative; overflow: hidden;
  background: radial-gradient(80% 120% at var(--x-end) 0%, color-mix(in srgb, var(--white) 12%, transparent), transparent 60%), var(--grad); box-shadow: var(--shadow); }
.a2-refhero-t { display: flex; gap: var(--space-4); align-items: flex-start; }
.a2-refhero h2 { font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-2xl)); margin: 0 0 var(--space-2); }
.a2-refhero p { margin: 0; color: var(--grad-ink-2); }
/* Les mêmes montants en dollars, en petit sous la phrase (lisibles sur le dégradé : couleur du texte, pas « muted ») */
.a2-refhero .a2-ref-usd { display: block; margin-top: var(--space-2); color: inherit; opacity: .85; white-space: normal; }
.a2-gifts { width: 60px; height: 60px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--white) 20%, transparent); display: grid; place-items: center; flex: none; }
.a2-gifts .ico { width: 30px; height: 30px; }
.a2-code { margin: var(--space-4) 0 var(--space-3); display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.a2-code small { color: var(--grad-ink-2); } .a2-code b { font: 700 var(--fs-2xl)/1 ui-monospace, monospace; letter-spacing: .12em; background: color-mix(in srgb, var(--white) 18%, transparent); padding: var(--space-2) var(--space-4); border-radius: var(--r-md); }
.a2-reflink { background: color-mix(in srgb, var(--white) 92%, transparent); color: var(--ink-fixed); }
.a2-refbtns { margin-top: var(--space-3); }
.a2-refhero .btn:not(.a2-wa) { background: color-mix(in srgb, var(--white) 20%, transparent); color: var(--grad-ink); }
.a2-wa { background: var(--wa) !important; color: var(--wa-ink) !important; }
.a2-refhero .a2-reflink .btn { background: var(--brand-solid); color: var(--solid-ink); }
.a2-3 { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .a2-3 .card { padding: var(--space-3); } .a2-3 .stat .v { font-size: var(--fs-lg); } .a2-3 .stat .ic { width: 30px; height: 30px; } .a2-3 .stat .l { font-size: var(--fs-xs); line-height: 1.4; } }

/* ── Rapport ── */
.a2-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 960px; }
.a2-report > *, .a2-chartcard { min-width: 0; }
.a2-rep-h { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.a2-rep-h h1 { font-size: var(--fs-xl); margin: 2px 0; } .a2-rep-h small { color: var(--muted); }
.a2-rep-h .logo { width: 48px; height: 48px; border-radius: var(--r-lg); }
.a2-rep-tot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.a2-rep-tot > div { display: grid; gap: 2px; align-content: start; padding: var(--space-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.a2-rep-tot > div:first-child { background: var(--a2-grad); color: var(--grad-ink); border: 0; } .a2-rep-tot > div:first-child small { color: var(--grad-ink-2); }
.a2-rep-tot small { color: var(--muted); } .a2-rep-tot b { font-size: var(--fs-xl); overflow-wrap: anywhere; }
.a2-rep-tot .badge { justify-self: start; }
@media (max-width: 860px) { .a2-rep-tot { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .a2-rep-tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a2-best, .a2-glos, .a2-advl { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.a2-best { counter-reset: b; } .a2-best li { display: grid; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
.a2-glos li { font-size: var(--fs-sm); color: var(--ink-2); } .a2-glos b { color: var(--ink); }
.a2-advl li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-3); border-radius: var(--r-md); background: var(--info-soft); }
.a2-advl li.good { background: var(--ok-soft); } .a2-advl li.warn { background: var(--warn-soft); }
.a2-advl .ico { margin-top: var(--space-1); }
.a2-rep-f { text-align: center; padding: var(--space-2); }

/* ── Divers ── */
.a2-done .a2-panel { position: relative; overflow: hidden; }
.a2-confetti { position: absolute; inset: 0; pointer-events: none; }
.a2-confetti i { position: absolute; top: -12px; inset-inline-start: calc(var(--i) * 7.2%); width: 8px; height: 12px; border-radius: var(--r-xs); opacity: 0;
  background: hsl(calc(var(--i) * 47), 80%, 58%); animation: a2fall 1.6s calc(var(--i) * .06s) ease-in both; }
@keyframes a2fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(320px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .a2-confetti { display: none; } }
.a2-tabbar a.fab span:first-child { background: var(--a2-grad); color: var(--grad-ink); }
.a2-acc .logo { width: 40px; height: 40px; }

@media print {
  .a2-peek, .a2-side, .a2-back, .ch-fab { display: none !important; }
  .a2-rep-h, .a2-rep-tot > div { box-shadow: none !important; break-inside: avoid; }
  .a2-rep-tot > div:first-child, .a2-kpi.hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Correctifs WS-bugbash-ui ── */
/* Squelettes et écran d'erreur du démarrage (remplacent des style="…" en ligne) */
.a2-skel-t { height: 40px; width: 40%; margin-bottom: var(--space-4); }
.a2-skel-lg { height: 180px; }
.a2-boot { padding-top: var(--space-7); }
.a2-mt { margin-top: var(--space-4); }
/* Salutation de l'accueil devenue <h1> (titre de la vue, reçoit le focus) : même aspect qu'avant */
h1.a2-hi { margin: 0; }
/* Titre focalisé par le routeur (tabindex=-1) : pas d'anneau au clic, anneau au clavier seulement */
.view-in [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Mobile : un champ focalisé ne se cache ni sous la barre du bas ni sous la bulle du chat,
   et le dernier bouton d'une page reste au-dessus de la bulle « اسأل المساعد » */
@media (max-width: 960px) {
  html { scroll-padding-bottom: calc(var(--tabbar-h) + 72px + env(safe-area-inset-bottom)); }
  body:has(.ch-fab) .main { padding-bottom: calc(var(--tabbar-h) + 72px + var(--space-7) + env(safe-area-inset-bottom)); }
}
/* ── /app v2 ── */

/* ═════════════════════════════════════════════════
   WS-app-mobile — l'espace client « comme une application » sur téléphone (≤ 768 px),
   dans le navigateur (aucune installation). Bureau (> 768 px) : barre latérale.
   ═════════════════════════════════════════════════ */
.shell.a2 { min-height: 100vh; min-height: 100dvh; }
.shell.a2 .side { height: 100vh; height: 100dvh; }
.a2-col { min-width: 0; }
.a2-fab, .a2-ptr { display: none; }
/* Aide : carte WhatsApp du support (le seul contact WhatsApp permanent de l'application) */
.a2-helpwa { display: flex; align-items: center; gap: var(--space-4); border: 2px solid color-mix(in srgb, var(--wa) 55%, var(--line)); background: color-mix(in srgb, var(--wa) 8%, var(--surface)); color: var(--ink); }
.a2-helpwa:hover { text-decoration: none; border-color: var(--wa); }
.a2-helpwa .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a2-helpwa b { font-size: var(--fs-lg); }
.a2-helpwa-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: var(--wa-ink); flex: none; }
.a2-helpwa-ic .ico { width: 28px; height: 28px; }
@media (max-width: 560px) { .a2-helpwa { flex-wrap: wrap; } .a2-helpwa .btn { flex: 1 1 100%; justify-content: center; } }
.a2 a, .a2 button, .a2-tabbar a, .a2-fab, .a2-more a { -webkit-tap-highlight-color: transparent; }
.a2-more-head { display: none; }   /* en-tête de la feuille « المزيد » : téléphone seulement (voir ≤ 768 px) */

/* Tablette / petit portable (769–960 px) : la barre latérale reste (ui.css la cache à 960 px pour l'admin) */
@media (min-width: 769px) and (max-width: 960px) {
  .shell.a2 { grid-template-columns: 232px minmax(0, 1fr); }
  .shell.a2 .side { display: flex; }
  .shell.a2 .mobile-top, .a2-tabbar { display: none; }
  .shell.a2 .main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .shell.a2 .top .actions { display: flex; }
  .shell.a2 .top h1 { font-size: var(--fs-xl); }
}

/* Transitions d'écran : fondu (+ léger glissement sur téléphone, le sens suit la langue) ; « backwards » seulement :
   aucune transformation ne reste après l'animation (les éléments fixes de l'écran restent fixes) */
.view-in.a2-in { animation: a2-in var(--dur-2) var(--ease) backwards; }
.view-in.a2-in-back { animation: a2-in var(--dur-2) var(--ease) backwards; }
@keyframes a2-in { from { opacity: 0; } }

/* Squelettes par écran */
.a2-sk-hero { height: 150px; margin-bottom: var(--space-4); border-radius: var(--r-lg); }
.a2-sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.a2-sk-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a2-sk-rows { display: grid; gap: var(--space-3); }
.a2-sk-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.a2-sk-ic { width: 42px; height: 42px; flex: none; }

/* Retour haptique visuel : état pressé sur écran tactile */
@media (hover: none) {
  .a2 .btn:active, .a2-fab:active, dialog.modal .btn:active, .a2 .card.interactive:active, .a2-crow:active, .a2 .choice:active, .a2-tpl:active,
  .a2-tabbar a:active, .a2-more .nav a:active { transform: scale(.97); transition-duration: var(--dur-1); }
  .a2 .chip:active { transform: scale(.94); }
}

@media (max-width: 768px) {
  body[data-view] { overscroll-behavior-y: contain; }
  /* En-tête compact : logo + solde + cloche sur les onglets ; ← titre de l'écran sur les écrans secondaires */
  .shell.a2 .a2-mtop { gap: var(--space-2); min-height: 56px; padding: calc(var(--space-2) + env(safe-area-inset-top)) var(--space-3) var(--space-2); }
  .a2-mt-back, .a2-mt-title { display: none; }
  .a2-mt-brand { flex: 1; min-width: 0; }
  body.a2-sub .a2-mt-back { display: inline-flex; flex: none; margin-inline-start: calc(-1 * var(--space-2)); }
  body.a2-sub .a2-mt-brand { display: none; }
  body.a2-sub .a2-mt-title { display: block; flex: 1; font-weight: 700; font-size: var(--fs-md); }
  .a2-mtop .bell .n { top: 2px; inset-inline-end: 2px; }
  /* Sur un écran secondaire, le retour est dans l'en-tête : le lien « ← حملاتي » du contenu disparaît */
  body.a2-sub .view-in > .a2-back { display: none; }
  .shell.a2 .main { padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + 96px + env(safe-area-inset-bottom)); }
  /* le glissement d'entrée ne doit jamais créer de défilement horizontal (clip : pas de conteneur de défilement, sticky intact) */
  .shell.a2 .main { overflow-x: clip; }
  .view-in.a2-in { animation-name: a2-slide; }
  .view-in.a2-in-back { animation-name: a2-slide-back; }
  @keyframes a2-slide { from { opacity: 0; transform: translateX(calc(-18px * var(--dir))); } }
  @keyframes a2-slide-back { from { opacity: 0; transform: translateX(calc(18px * var(--dir))); } }

  /* Barre d'onglets : 4 ou 5 entrées, onglet actif = pastille derrière l'icône, zone de sécurité iOS */
  .a2-tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: 0; box-shadow: 0 -4px 16px color-mix(in srgb, var(--ink) 6%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
  .a2-tabbar.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .a2-tabbar a { justify-content: center; gap: var(--space-1); padding-inline: 1px; letter-spacing: var(--track-tight); }
  .a2-tabbar a .ico { box-sizing: border-box; width: 52px; height: 28px; padding: var(--space-1) var(--space-4); border-radius: var(--r-pill);
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
  .a2-tabbar a.on .ico, .a2-tabbar a[aria-current="page"] .ico { background: var(--brand-soft); color: var(--brand); }

  /* « + » au centre de la barre : rond, relevé au-dessus de la barre, sur tous les écrans */
  .a2-tabbar a.a2-tabnew { justify-content: flex-end; color: var(--brand); font-weight: 700; overflow: visible; }
  .a2-tabbar a.a2-tabnew span:first-child { width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: var(--brand-fill); color: var(--brand-ink);
    display: grid; place-items: center; border: 3px solid var(--surface); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-fill) 35%, transparent); }
  .a2-tabbar a.a2-tabnew .ico { width: 26px; height: 26px; padding: 0; border-radius: 0; background: none; color: inherit; stroke-width: 2.6; }
  .a2-tabbar a.a2-tabnew::before { display: none; }

  /* Bouton d'action principal flottant (« حملة جديدة ») : accueil et liste des campagnes seulement */
  body.a2-fabon .a2-fab { display: inline-flex; }
  .a2-fab { inset-inline-end: var(--space-4); padding: 0 var(--space-5) 0 var(--space-4); font-size: var(--fs-md); transition: transform var(--dur-1) var(--ease); }
  .a2-fab .ico { width: 22px; height: 22px; }

  /* Tirer pour rafraîchir */
  .a2-ptr { display: grid; place-items: center; position: fixed; z-index: var(--z-sticky); top: calc(56px + env(safe-area-inset-top)); left: 50%;
    width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--brand); box-shadow: var(--sh-2);
    transform: translate(-50%, calc(var(--pull, 0px) - 56px)); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease); }
  .a2-ptr.on, .a2-ptr.spin { opacity: 1; }
  .a2-ptr.spin { transform: translate(-50%, var(--space-3)); }
  .a2-ptr .ico { width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease); }
  .a2-ptr.go .ico { transform: rotate(180deg); }
  .a2-ptr.spin .ico { animation: spin .8s linear infinite; }

  /* Fenêtres = feuilles qui montent du bas (ui.css le fait sous 560 px ; ici jusqu'à 768 px) */
  dialog.modal, dialog.modal.wide { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh;
    animation-name: sheet-in; padding-bottom: env(safe-area-inset-bottom); }
  dialog.modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); margin: var(--space-2) auto 0; }
  dialog.modal .mf .btn { flex: 1; }

  /* « المزيد » : feuille basse en grille d'icônes (au lieu du tiroir latéral) */
  /* Toujours une bande de fond visible au-dessus (on peut taper dehors pour fermer), même sur un petit téléphone */
  .a2-more .panel { top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: min(86dvh, calc(100dvh - 72px)); border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); animation: sheet-in var(--dur-3) var(--ease); }
  /* En-tête collant : poignée (glisser vers le bas ou taper = fermer) + bouton « سكّر » toujours visible */
  .a2-more-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    margin: 0 calc(-1 * var(--space-4)) var(--space-2); padding: var(--space-2) var(--space-4); background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .a2-more-grab { flex: 1; align-self: stretch; display: grid; place-items: center; min-height: 32px; cursor: grab; }
  .a2-more-grab::before { content: ""; width: 44px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); }
  .a2-more-x { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line);
    border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
  .a2-more-x .ico { width: 18px; height: 18px; }
  .a2-more .panel > .brand { display: none; }
  .a2-more .nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .a2-more .nav a { flex-direction: column; justify-content: center; gap: var(--space-1); min-height: 80px; padding: var(--space-2); text-align: center;
    font-size: var(--fs-xs); line-height: 1.3; background: var(--surface-2); border-radius: var(--r-md); color: var(--ink); }
  .a2-more .nav a .ico { width: 24px; height: 24px; color: var(--brand); }
  .a2-more .nav a small { display: none; }
  .a2-more .nav .sep { grid-column: 1 / -1; padding: var(--space-2) 0 0; }
  .a2-more .nav .sep:empty { display: none; }

  /* Formulaires : une colonne, texte 16 px (pas de zoom automatique sur iOS) */
  #root .input, dialog .input, #root select, #root textarea { font-size: max(16px, 1em); }
}

/* « row nowrap » = ligne flex sans retour des BLOCS ; le texte des enfants, lui, passe à la ligne
   (l'utilitaire .nowrap pose aussi white-space: nowrap, hérité → débordement à 360 px) */
.row.nowrap { white-space: normal; }
/* Valeurs dynamiques posées par state.js (data-pct → --w) : barres de progression, classements */
[data-pct] { width: var(--w, 0%); }
/* Titre focalisé par le routeur : lu par les lecteurs d'écran, sans cadre visible */
.view-in h1[tabindex="-1"]:focus, .view-in h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }
.a2-show-m { display: none; }
@media (max-width: 768px) { .a2-show-m { display: block; } .a2-hide-m { display: none !important; } }

/* ── Accueil v3 ── */
.a2-spark { width: 88px; height: 34px; flex: none; align-self: center; overflow: visible; }
.a2-spark .ln { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.a2-spark .ar { fill: color-mix(in srgb, var(--brand) 14%, transparent); }
.a2-spark .pt { fill: var(--brand); }
@media (max-width: 768px) {
  .a2-crow .a2-spark { width: 64px; }
  .a2-wallet .row .btn { flex: 1 1 auto; }
  .a2-wallet .v { font-size: var(--fs-2xl); }
}
.a2-crow-s .a2-spark { margin-inline-start: auto; }
.a2-rank { grid-template-columns: minmax(0, 1fr); } .a2-rank .grow { min-width: 0; }
.a2-cmp .card-h { flex-wrap: wrap; }
.a2-tabn { font-size: var(--fs-xs); opacity: .8; }

.a2-two.a2-keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a2-logo-sm { width: 30px; height: 30px; }

/* ── Portefeuille : étapes d'un dépôt (مبعوث ← يتثبّت ← مقبول) ── */
.a2-hist { grid-template-columns: minmax(0, 1fr); }
.a2-dep { align-items: flex-start; }
.a2-dep .badge { flex: none; }
.a2-depsteps { margin-top: var(--space-2); gap: var(--space-1); max-width: 360px; }
.a2-depsteps li { font-size: var(--fs-xs); gap: var(--space-1); }
.a2-depsteps li::before { width: 20px; height: 20px; border-width: 1.5px; }
.a2-depsteps li:not(:last-child)::after { min-width: var(--space-2); }
.a2-depsteps li.cur::before { box-shadow: none; }
.a2-depsteps li.no { color: var(--bad); }
.a2-depsteps li.no::before { content: "✕"; background: var(--bad-soft); color: var(--bad); }
@media (max-width: 560px) {
  .a2-depsteps li:not(.cur):not([aria-current="step"]) span { display: inline; }
  .a2-depsteps li:not(.cur):not([aria-current="step"]) { flex: 1; }
}
.a2-wal .chips .chip { min-height: 40px; min-width: 56px; justify-content: center; }

/* ── Fiche campagne (téléphone) ── */
@media (max-width: 768px) {
  .a2-chero { padding: var(--space-4); }
  .a2-chero-a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .a2-chero-a .btn { width: 100%; }
  .a2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .a2-kpis .a2-kpi.hero { grid-column: 1 / -1; }
  .a2-kpis .a2-kpi:not(.hero) .a2-kpi-help { display: none; }
  .a2-kpi.ring .a2-ring { width: 52px; height: 52px; }
  .a2-cgrid { gap: var(--space-3); }
}

/* ── Assistant de campagne v3 : étapes, un écran par étape ── */
.a2-wz { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; max-width: 1180px; }
.a2-wz-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.a2-wz > * { min-width: 0; }
.a2-wz-h { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.a2-wz-count { color: var(--brand); }
.a2-wz-steps li { gap: var(--space-1); }
.a2-stp { font: inherit; color: inherit; background: none; border: 0; padding: var(--space-1) 0; min-height: 32px; cursor: pointer; min-width: 0; display: inline-flex; }
.a2-stp:disabled { cursor: default; }
.a2-stp:not(:disabled):hover span { text-decoration: underline; }
.a2-wz-bar { margin-top: 0; }
.a2-wz-card { padding: var(--space-5); }
.a2-wz-card.in { animation: a2pop var(--dur-3) var(--ease) backwards; }
.a2-wz-q { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.a2-wz-t { font-size: var(--fs-xl); margin: 0 0 var(--space-1); }
.a2-wz-q .a2-txt { color: var(--ink-2); line-height: var(--lh-normal); }
.a2-wz-foot { display: flex; gap: var(--space-2); align-items: center; }
.a2-wz-foot .btn.primary { min-height: 52px; font-size: var(--fs-md); }
.a2-wz-foot .btn.ghost { min-height: 52px; }
.a2-wz-eye { display: none; }
.a2-wz-gate { max-width: 680px; margin: 0 auto; }
.a2-acc1 { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
.a2-acc1 .ci { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; }
/* Modèles par activité */
.a2-tpls { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.a2-tpl { font: inherit; color: var(--ink); text-align: start; cursor: pointer; display: grid; gap: var(--space-1); align-content: start; padding: var(--space-3);
  border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); min-height: 44px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.a2-tpl:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--sh-1); }
.a2-tpl.on { border-color: var(--brand); background: var(--brand-soft); }
.a2-tpl b { font-size: var(--fs-sm); line-height: var(--lh-tight); }
.a2-tpl small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a2-tpl-ic { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.a2-tpl.on .a2-tpl-ic { background: var(--brand-fill); color: var(--brand-ink); }
.a2-tpl-sk { height: 112px; }
/* Ce que le modèle remplit (objectif · public · budget), visible avant le clic */
.a2-tpl-sum { display: flex; flex-wrap: wrap; gap: 2px var(--space-2); margin-top: var(--space-1); padding-top: var(--space-1); border-top: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--ink); line-height: 1.5; }
.a2-tpl-sum > span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Après le clic : « عمّرنالك … باقي عليك … » + retour aux modèles */
.a2-tpl-done { flex-wrap: wrap; margin-bottom: var(--space-3); }
.a2-tpl-done > div { flex: 1 1 calc(100% - 40px); }
.a2-tpl-done .btn { flex: none; margin-inline-start: auto; }
/* Estimation d'audience */
.a2-estbox { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--ok-soft); }
.a2-estbox > .ico { flex: none; margin-top: 2px; color: var(--ok); }
.a2-estbox.warn { background: var(--warn-soft); } .a2-estbox.warn > .ico, .a2-estbox.warn small { color: var(--warn); }
.a2-estbox.soft { background: var(--surface-2); }
.a2-gauge { margin: var(--space-3) var(--space-1) var(--space-2); }
.a2-gauge i { width: 20px !important; transform: none; inset-inline-start: calc(var(--w, 50%) - 10px); transition: inset-inline-start var(--dur-2) var(--ease); }
/* « ضيّق » (orange) au bord de départ, « واسع » au bord de fin, dans les deux sens d'écriture */
html[dir="rtl"] .a2-gauge { background: linear-gradient(270deg, var(--warn), var(--ok) 45%, var(--ok) 60%, var(--info)); }
/* Intérêts : autocomplétion + puces */
.a2-ac .input-group .addon .ico { width: 18px; height: 18px; }
.a2-ac-list { position: absolute; z-index: var(--z-dropdown); inset-inline: 0; top: calc(100% + var(--space-1)); margin: 0; padding: var(--space-1); list-style: none;
  max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.a2-ac-o { display: flex; gap: var(--space-2); align-items: center; min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); cursor: pointer; }
.a2-ac-o:hover, .a2-ac-o[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); }
.a2-ac-o.add { color: var(--brand); font-weight: 600; }
.a2-ichip { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline-end: var(--space-1); }
.a2-ix { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; cursor: pointer; }
.a2-ix .ico { width: 14px; height: 14px; }
.a2-regions { max-height: 188px; overflow-y: auto; padding: 2px; }
/* Budget */
/* Le dinar en grand (ce que le client lit), le champ en dollars plus petit dessous (ce que Meta reçoit) */
.a2-stepper .a2-dial-dt { display: block; font-size: var(--fs-2xl); margin-bottom: var(--space-1); }
.a2-dial-g { width: 116px; margin: 0 auto var(--space-1); }
.a2-dial-g .input { font-size: var(--fs-lg); font-weight: 700; text-align: center; color: var(--ink); padding-inline: var(--space-2); }
.a2-dial-usd { margin: 0 0 var(--space-2); text-align: center; }
.a2-stepper .a2-usd { display: block; }
.a2-note.justify-center { justify-content: center; }
.a2-paybox { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--r-md); background: var(--brand-soft); }
.a2-notes { min-height: 70px; }
/* Aperçus : onglets Facebook / Instagram / Story / Reels */
.a2-side .a2-places { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); width: 100%; margin: 0 0 var(--space-3); overflow: visible; }
.a2-side .a2-places button { display: flex; align-items: center; flex-direction: column; gap: 2px; padding: var(--space-1); font-size: var(--fs-xs); min-width: 0; justify-content: center; }
.a2-places .ico { width: 16px; height: 16px; }
.a2-side { overflow-x: hidden; }
.a2-reels .a2-st-h { top: auto; bottom: 130px; }
.a2-reels .a2-st-txt { bottom: 100px; text-align: start; }
.a2-reels .a2-st-cta { bottom: 40px; }
.a2-rl-act { position: absolute; inset-inline-end: 12px; bottom: 150px; display: grid; gap: var(--space-4); }
.a2-rl-act .ico { width: 22px; height: 22px; }
/* Fin */
.a2-wz-done { max-width: 620px; margin: 0 auto; }
.a2-done-card { position: relative; overflow: hidden; padding: var(--space-6) var(--space-5); }
.a2-done-ic { width: 64px; height: 64px; margin: 0 auto var(--space-3); border-radius: 50%; display: grid; place-items: center; background: var(--a2-grad); color: var(--grad-ink); }
.a2-done-ic .ico { width: 30px; height: 30px; }
@media (max-width: 1100px) {
  .a2-wz { grid-template-columns: minmax(0, 1fr); }
  .a2-wz-eye { display: inline-flex; flex: none; }
}
@media (max-width: 768px) {
  /* Parcours plein écran : la barre d'onglets laisse la place au pied « رجوع / كمّل » */
  body[data-view="new"] .a2-tabbar { display: none; }
  body[data-view="new"] .shell.a2 .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .a2-wz { gap: var(--space-3); }
  .a2-wz-h { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: var(--z-raised); padding: var(--space-2) var(--space-3); gap: var(--space-2);
    border-radius: 0 0 var(--r-md) var(--r-md); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; border-inline: 0; border-top: 0; }
  .a2-wz-steps { display: none; }
  .a2-wz-card { padding: var(--space-4); border-radius: var(--r-md); }
  .a2-wz-card .a2-av { display: none; }
  .a2-wz-t { font-size: var(--fs-lg); }
  .a2-wz-foot { position: fixed; z-index: var(--z-fixed); inset-inline: 0; bottom: 0; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px color-mix(in srgb, var(--ink) 6%, transparent); }
  .a2-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* L'estimation reste visible au-dessus du pied pendant qu'on règle le ciblage */
  #a2_est { position: sticky; z-index: var(--z-raised); bottom: calc(80px + env(safe-area-inset-bottom)); }
  #a2_est .a2-estbox { box-shadow: var(--sh-2); }
  #a2_est .a2-estbox.soft { background: var(--surface-2); }
  .a2-paybox .a2-big { font-size: var(--fs-xl); }
}

/* ── « اربط بفيسبوك » (app/page-link.js fbChooser / fbFlow) : un gros bouton bleu, puis une carte par page ── */
.fb-start, .fb-res { text-align: center; }
.fb-btn { width: 100%; justify-content: center; min-height: 56px; font-size: var(--fs-lg); font-weight: 700; background: var(--fb); border-color: var(--fb); color: var(--solid-ink); }
.fb-btn:hover, .fb-btn:focus-visible { background: color-mix(in srgb, var(--fb) 88%, var(--ink)); color: var(--solid-ink); }
.fb-btn.busy { opacity: .75; pointer-events: none; }
.fb-btn .ico { width: 24px; height: 24px; }
.fb-other { background: none; border: 0; padding: var(--space-2); color: var(--muted); font: inherit; font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; justify-self: center; }
.fb-pages { display: grid; gap: var(--space-2); text-align: start; }
.fb-page { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.fb-page:hover:not([disabled]), .fb-page:focus-visible { border-color: var(--fb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb) 25%, transparent); }
.fb-page[disabled] { opacity: .6; cursor: not-allowed; }
.fb-page.busy { border-color: var(--fb); }
.fb-pic { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.fb-pic-0 { display: grid; place-items: center; color: var(--fb); }
.fb-done .fb-ok { width: 64px; height: 64px; margin-inline: auto; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft, var(--surface-2)); color: var(--ok, var(--fb)); font-size: 34px; font-weight: 700; }
.fb-res .alert { text-align: start; }
.fb-stuck { padding: var(--space-3); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface-2); }

/* ── Assistant « ربط الصفحة » (app/page-link.js) ── */
.pl-stepper { margin-bottom: var(--space-4); }
.pl-vids { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pl-vids .btn { flex: 1 1 auto; }
/* Mini-parcours dans Facebook : une puce numérotée par menu (français · arabe), à la suite */
.pl-path { list-style: none; margin: var(--space-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pl-path li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; padding-block: 4px; padding-inline: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.pl-path .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fill); color: var(--brand-ink); font-size: var(--fs-xs); }
.pl-fb { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.pl-fb bdi { overflow-wrap: anywhere; }
.pl-fb bdi.muted { font-weight: 500; }
.pl-acc .copybox { border: 2px solid var(--brand); }
.pl-nav { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.pl-nav-r { display: flex; justify-content: flex-end; gap: var(--space-3); }
.pl-nav-r [data-prev] { margin-inline-end: auto; }
.pl-wa-btn { width: 100%; justify-content: center; }
.pl-auto { margin: 0; }
.pl-wrap { white-space: normal; overflow-wrap: anywhere; }
/* Lien de page (#/pages) : aide permanente sous la case du lien */
.a2-url-hint { overflow-wrap: anywhere; }
/* Capture du compte de la plateforme (réglée par l'admin) sous le nom à copier */
.pl-shot { margin: var(--space-3) 0 0; }
.pl-shot a { display: block; width: fit-content; max-width: 100%; }
.pl-shot img { display: block; max-width: 100%; max-height: 220px; width: auto; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); }
.pl-shot figcaption { margin-top: var(--space-2); }
/* « صفحاتي » : « اربط صفحة » répété sous l'en-tête sur téléphone (.top .actions masqué ≤ 768 px) */
.pl-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pl-cta:empty { display: none; }
.pl-add-m { display: none; }
@media (max-width: 768px) { .pl-add-m { display: inline-flex; } }
@media (max-width: 560px) {
  .pl-cta > .btn { flex: 1 1 100%; justify-content: center; }
  .pl-nav-r .btn { flex: 1; }
  .pl-nav { position: sticky; bottom: 0; background: var(--surface); padding-block: var(--space-3); border-top: 1px solid var(--line); z-index: 1; }
  .pl-nav .pl-wa-btn { min-height: 40px; }
}

/* ── « اربط صفحتك » final (ws/final-linking) : vidéo en tête, 3 étapes + dessins CSS des écrans Facebook ── */
.pl-hero { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px; padding: var(--space-2) var(--space-3); border: 2px solid var(--brand); border-radius: var(--r-lg); background: var(--brand-soft); color: var(--ink); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.pl-hero:hover, .pl-hero:focus-visible { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.pl-hero b { font-size: var(--fs-lg); color: var(--brand); }
.pl-hero-img { position: relative; flex: none; width: 54px; height: 96px; border-radius: var(--r-sm); overflow: hidden; background: #000; display: grid; place-items: center; }
.pl-hero-img img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pl-hero-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.pl-hero-play .ico, .pl-hero-0 .ico { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.pl-hero-0 { color: #fff; background: var(--brand-fill); height: 56px; }
.pl-alts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: center; }
.pl-alt { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 var(--space-2); background: none; border: 0; color: var(--brand); font: inherit; font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; }
.pl-alt .ico { width: 16px; height: 16px; }
.pl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pl-st { display: grid; grid-template-columns: auto minmax(0, 1fr) 132px; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pl-st-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fill); color: var(--brand-ink); font-weight: 700; }
.pl-st-b { min-width: 0; display: grid; gap: 4px; line-height: 1.5; }
.pl-st-b bdi { overflow-wrap: anywhere; }
.pl-st-a { margin-top: 2px; }
.pl-st-a .btn { min-height: 40px; }
.pl-mock { display: grid; gap: 4px; padding: 6px; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 14px; background: var(--surface-2); font-size: 11px; line-height: 1.25; direction: ltr; text-align: left; color: var(--ink); overflow: hidden; }
.pl-mk-bar { display: flex; align-items: center; gap: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.pl-mk-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 20px; padding: 2px 5px; border-radius: 6px; background: var(--surface); white-space: nowrap; overflow: hidden; }
.pl-mk-row.on { outline: 2px solid var(--brand); background: var(--brand-soft); font-weight: 700; }
.pl-mk-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-weight: 700; }
.pl-mk-btn.on { background: #1877f2; color: #fff; }
.pl-mk-btn.wide { display: flex; min-height: 22px; }
.pl-mk-search { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; }
.pl-mk-search .ico { width: 12px; height: 12px; }
.pl-mk-caret { width: 1px; height: 12px; background: var(--ink); animation: pl-blink 1s steps(1) infinite; }
.pl-mk-av { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #1877f2; color: #fff; font-size: 10px; font-weight: 700; }
.pl-mk-row b { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pl-mk-ok { color: var(--ok); font-weight: 700; }
.pl-mk-sw { flex: none; width: 24px; height: 14px; border-radius: 999px; background: var(--line); position: relative; }
.pl-mk-sw.on { background: #1877f2; }
.pl-mk-sw.on::after { content: ''; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pl-mk-sw:not(.on)::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
label.f > span.pl-url-row, .pl-url-row { display: flex; gap: 8px; align-items: stretch; font-weight: 400; margin: 0; }
.pl-how-l bdi, .a2-url-hint bdi { white-space: nowrap; }
.pl-url-row .input { flex: 1; min-width: 0; }
.pl-paste { flex: none; min-height: 44px; white-space: nowrap; }
.pl-how { margin-top: 6px; }
.pl-how > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--brand, #1877f2); }
.pl-how-l { margin: 4px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.6; }
.pl-mk-tap { position: absolute; right: 4px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); animation: pl-tap 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes pl-tap { 0%, 100% { transform: scale(.8); opacity: .9; } 50% { transform: scale(1.15); opacity: .5; } }
@keyframes pl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pl-mk-tap, .pl-mk-caret { animation: none; } }
.pl-sent { min-height: 52px; font-size: var(--fs-lg); font-weight: 700; }
.pl-help1 { line-height: 1.5; }
.pl-badge { white-space: nowrap; }
.a2-refused > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
@media (max-width: 560px) {
  .pl-st { grid-template-columns: auto minmax(0, 1fr); }
  .pl-st .pl-mock { grid-column: 2; max-width: 220px; }
  .pl-nav-r .pl-sent { flex: 2; }
}


/* ── « اربط صفحتك » : étape 2 obligatoire (ws/page-link-step2) — barre de progression, cases « عملتها »,
   « بعثت الدعوة » inactif, confirmation dessinée ── */
.pl-stp { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--space-2); counter-reset: none; }
.pl-stp-i { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: var(--space-2) 4px; border-radius: var(--r-md); text-align: center; font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.pl-stp-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--surface); border: 2px solid var(--line); color: var(--ink); }
.pl-stp-t { min-width: 0; overflow-wrap: anywhere; }
.pl-stp-i.now { color: var(--ink); font-weight: 700; border-color: var(--brand); background: var(--brand-soft); }
.pl-stp-i.now .pl-stp-n { background: var(--brand-fill); color: var(--brand-ink); border-color: var(--brand); }
.pl-stp-i.past .pl-stp-n { background: var(--ok, #16a34a); border-color: var(--ok, #16a34a); color: #fff; }
.pl-stp-i.key { border-width: 2px; }
.pl-stp-tag { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--warn, #d97706); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.pl-stp-i.past .pl-stp-tag { display: none; }
.pl-st .pl-chk { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 52px; padding: var(--space-2) var(--space-3); border: 2px dashed var(--brand); border-radius: var(--r-md); background: var(--surface); color: var(--brand); font: inherit; font-weight: 700; font-size: var(--fs-md, 1rem); cursor: pointer; }
.pl-chk-box { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 2px solid currentColor; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.pl-st .pl-chk.on { border-style: solid; border-color: var(--ok, #16a34a); background: var(--ok-soft, #e9f9ef); color: var(--ok, #15803d); }
.pl-st .pl-chk.on .pl-chk-box { background: var(--ok, #16a34a); border-color: var(--ok, #16a34a); color: #fff; }
.pl-st.done { border-color: var(--ok, #16a34a); }
.pl-st.done .pl-st-n { background: var(--ok, #16a34a); color: #fff; }
.pl-st.need { outline: 3px solid var(--warn, #d97706); outline-offset: 2px; animation: pl-need .6s ease-in-out 2; }
@keyframes pl-need { 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .pl-st.need { animation: none; } }
.pl-sent.off { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }
.pl-sent-hint { color: var(--warn-ink, var(--muted)); font-weight: 600; text-align: center; min-height: 1.2em; }
.pl-sent-hint:empty { display: none; }
.pl-relink p { line-height: 1.5; }
.pl-mock-big { max-width: 340px; width: 100%; margin-inline: auto; font-size: 13px; gap: 6px; padding: 10px; }
.pl-mk-sec { font-weight: 700; font-size: 11px; color: var(--muted); padding: 2px 5px; }
.pl-mk-person { min-height: 44px; justify-content: flex-start; gap: 8px; }
.pl-mock-big .pl-mk-av { width: 30px; height: 30px; font-size: 14px; }
/* Vraie photo du profil de la plateforme (platform_fb_image) dans les dessins et la carte « الحساب اللي باش تزيدو » */
.pl-av-img { object-fit: cover; padding: 0; background: var(--surface-2); }
.pl-acc2 { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); background: var(--surface); border: 2px solid #1877f2; }
.pl-acc2-ph { flex: none; display: block; border-radius: 50%; }
.pl-acc2-av { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #1877f2; color: #fff; font-size: 24px; font-weight: 700; border: 2px solid var(--surface); box-shadow: 0 0 0 2px #1877f2; }
.pl-acc2-b { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pl-acc2-b b { font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pl-acc2-go { flex: none; min-height: 40px; }
@media (max-width: 420px) { .pl-acc2 { flex-wrap: wrap; } .pl-acc2-go { width: 100%; justify-content: center; } }
.pl-mk-who { flex: 1; min-width: 0; display: grid; }
.pl-mk-who b, .pl-mk-who small { overflow: hidden; text-overflow: ellipsis; }
.pl-mk-who small { font-weight: 500; color: var(--muted); }
.pl-mk-pend { flex: none; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 700; font-size: 11px; }
.pl-cf-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.pl-cf-l li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.pl-cf-l .ico { flex: none; color: var(--ok, #16a34a); }
.pl-relink-btn { min-height: 48px; }
@media (max-width: 560px) {
  .pl-stp { gap: 4px; }
  .pl-stp-i { font-size: var(--fs-xs); padding: 6px 2px; }
  .pl-nav-r [data-back-steps] { flex: 1; }
  .pl-nav-r [data-confirm] { flex: 1.4; }
}
/* Bandeau « الخطوة الثانية من 3 » : couleur, pastille, barre de progression, avertissement + réassurance */
.pl-s2 { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-lg); background: var(--brand-soft); border: 2px solid var(--brand); border-inline-start-width: 8px; }
.pl-s2-h { display: flex; align-items: center; gap: var(--space-3); }
.pl-s2-n { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-fill); color: var(--brand-ink); font-size: 22px; font-weight: 800; }
.pl-s2-k { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }
.pl-s2-t { font-size: var(--fs-lg); line-height: 1.3; }
.pl-s2-p { display: flex; align-items: center; gap: var(--space-2); }
.pl-s2-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--surface); overflow: hidden; border: 1px solid var(--line); }
.pl-s2-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--ok, #16a34a); border-radius: inherit; transition: width .3s; }
.pl-s2-c { flex: none; font-size: var(--fs-sm); }
.pl-s2-w, .pl-s2-r { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; }
.pl-s2-w { color: var(--warn-ink, var(--ink)); }
.pl-s2-w .ico { flex: none; color: var(--warn); }
.pl-s2-r { color: var(--muted); }
.pl-s2-r .ico { flex: none; color: var(--ok, #16a34a); }
.pl-resume { border: 2px solid var(--brand); background: var(--brand-soft); }
.pl-resume .row { gap: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .pl-s2-bar i { transition: none; } }
/* ── Vidéo « كيفاش تعمل إعلان » (app/video.js) ── */
.a2-howto video { display: block; width: 100%; max-height: 70vh; border-radius: var(--r-md); background: #000; aspect-ratio: 9 / 16; object-fit: contain; }
dialog.modal .a2-howto video { max-height: 62vh; }
@media (max-width: 560px) { .a2-howto-btn span { display: none; } }
/* ── Liens « 🎬 شوف كيفاش » vers les vidéos tutoriels (app/guide.js) : discrets, cible tactile ≥ 40 px ── */
.guide-link { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 40px; padding: 0 var(--space-2); margin: 0; background: none; border: 0; color: var(--brand); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.guide-link:hover, .guide-link:focus-visible { text-decoration-thickness: 2px; }
.guide-link[hidden] { display: none; }
.a2-refhero .guide-link { color: #fff; }   /* sur le bandeau bleu de « جيب صاحبك » */

/* ── Nouvelle pub avec vidéo (wizard) ── */
.a2-seg-sm { margin-bottom: var(--space-2); }
.a2-drop video, .a2-ph-img video, .a2-story video.fg { display: block; max-height: 220px; max-width: 100%; border-radius: var(--r-md); background: #000; }
.a2-ph-img video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
.a2-story video.fg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: cover; }
.a2-upl { display: grid; gap: var(--space-2); justify-items: center; width: 100%; }
.a2-upl .skel { width: 60%; }

/* ── Avant lancement : correctifs d'affichage ── */
/* Unité traduite en minuscule (« message ») : majuscule initiale en tête de tuile / de ligne */
.a2-cap { display: inline-block; } .a2-cap::first-letter, .a2-rep-tot small.a2-cap::first-letter { text-transform: uppercase; }
/* En-tête de l'assistant : la ligne passe dessous si elle manque de place ; colonne étroite (panneau d'aperçu à côté) → icône seule */
.a2-wz-hrow { gap: var(--space-2); min-width: 0; }
.a2-wz-hrow > * { min-width: 0; }
@media (min-width: 1101px) and (max-width: 1400px) { .a2-wz-h .a2-wz-lbl { display: none; } }
/* Onglets sur téléphone : ils passent à la ligne au lieu d'être coupés sans indice */
@media (max-width: 560px) { .tabs:not(.a2-places) { flex-wrap: wrap; overflow-x: visible; } }

/* « علاش تزيدنا؟ » — 3 raisons courtes (assistant de liaison + صفحاتي) */
.pl-why { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft, color-mix(in srgb, var(--brand, #5b5bf7) 10%, transparent)); }
.pl-why-t { display: flex; align-items: center; gap: 6px; }
.pl-why-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-why-l li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; line-height: 1.5; }
.pl-why-l li svg { flex: none; margin-top: 3px; color: var(--brand, currentColor); }

/* ══ Client « simple » (ws/client-simple) : moins de texte, gros choix, détails repliables ══ */
/* « تفاصيل » repliables : le secondaire derrière un clic, jamais une cible < 44 px */
.a2-more-d { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 0 var(--space-4); }
.a2-more-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 48px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); }
.a2-more-d > summary::-webkit-details-marker { display: none; }
.a2-more-d > summary .ico { width: 18px; height: 18px; color: var(--brand); flex: none; }
.a2-more-d > summary::after { content: "+"; margin-inline-start: auto; font-size: var(--fs-lg); line-height: 1; color: var(--muted); }
.a2-more-d[open] > summary::after { content: "−"; }
.a2-more-d[open] { padding-bottom: var(--space-3); }
.a2-more-d .a2-note { margin: var(--space-2) 0 0; }
.a2-guide-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.a2-guide-d > summary::-webkit-details-marker { display: none; }
.a2-guide-d > summary h2 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.a2-guide-d > summary h2 .ico { color: var(--brand); }
.a2-guide-d > summary::after { content: "+"; font-size: var(--fs-xl); line-height: 1; color: var(--muted); }
.a2-guide-d[open] > summary::after { content: "−"; }
.a2-more-ol { margin: 0; padding-inline-start: var(--space-5); font-size: var(--fs-sm); line-height: 1.8; }
/* Assistant : progression bien visible, titres plus gros, choix en grosses cartes */
.a2-wz-bar.bar.sm { height: 8px; }
.a2-wz-bar > i { background: var(--a2-grad, var(--brand-fill)); }
.a2-wz-q .a2-txt { font-size: var(--fs-md); }
.a2 .a2-wz .choice { padding: var(--space-4); border-radius: var(--r-lg); min-height: 72px; align-items: center; }
.a2 .a2-wz .choice .ci { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--brand-soft); }
.a2 .a2-wz .choice .ci .ico { width: 24px; height: 24px; }
.a2 .a2-wz .choice b { font-size: var(--fs-md); }
.a2-tpls { gap: var(--space-3); }
.a2-tpl { padding: var(--space-4) var(--space-3); border-radius: var(--r-lg); gap: var(--space-2); }
.a2-tpl b { font-size: var(--fs-md); }
.a2-tpl small { -webkit-line-clamp: 1; line-clamp: 1; }
.a2-tpl-ic { width: 44px; height: 44px; }
.a2-tpl-ic .ico { width: 24px; height: 24px; }
.a2-seg button { min-height: 64px; }
/* Objectifs : description en 2 lignes max (le détail complet reste lisible au survol / dans l'aperçu) */
.a2-goals .choice small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a2-goals .choice .a2-est { margin-top: var(--space-2); }
@media (max-width: 768px) {
  .a2-wz-count { font-size: var(--fs-md); }
  .a2-wz-t { font-size: var(--fs-xl); }
}

/* ══════════════════════════════════════════════════════════════════════
   Identité Sponsi de l'espace client (ws/client-identity) — « bleu franc + soleil »
   · Couleurs : le bleu de la marque, À PLAT (aucun dégradé) + UN accent chaud « soleil »
     (--sun) réservé aux repères : élément actif, « + » de recharge, étape en cours, meilleur jour.
     Pas de violet : --info passe au bleu-vert, --accent (rose Instagram) devient le soleil.
   · Surfaces blanches, bordures douces, ombres presque nulles (plat et aéré) ; sombre équivalent.
   · Signatures : solde en petite pastille (en-tête), élément actif = point soleil (pas de pastille
     pleine), accueil = guide « الخطوة الجاية », l'assistant = bulle de discussion, résultats en phrases.
   Ces jetons ne concernent QUE /app : app.css n'est chargé que par public/app/index.html
   (l'admin et le site gardent ceux de ui.css).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--if-light, #f6f7f9) var(--if-dark, #0f1216);
  --surface: var(--if-light, #ffffff) var(--if-dark, #171b21);
  --surface-2: var(--if-light, #f1f3f6) var(--if-dark, #1f242b);
  --surface-3: var(--if-light, #e4e8ee) var(--if-dark, #2b313a);
  --ink: var(--if-light, #14171c) var(--if-dark, #e9ecf1);
  --ink-2: var(--if-light, #434a55) var(--if-dark, #b9bfc9);
  --muted: var(--if-light, #5f6672) var(--if-dark, #9ca3ae);
  --line: var(--if-light, #e3e6eb) var(--if-dark, #2a3039);
  --brand-soft: var(--if-light, #eaf2ff) var(--if-dark, #14263f);

  /* Soleil : remplissage (texte --sun-ink), texte/icône --sun-text (≥ 4.5:1), fond doux --sun-soft */
  --sun: #ffb321;
  --sun-ink: #2b1d00;
  --sun-text: var(--if-light, #8a5300) var(--if-dark, #ffc451);
  --sun-soft: var(--if-light, #fff4da) var(--if-dark, #2e2512);
  --accent: var(--sun); --accent-ink: var(--sun-ink); --accent-text: var(--sun-text); --accent-soft: var(--sun-soft); --accent-hi: var(--sun);
  --info: var(--if-light, #0b6b88) var(--if-dark, #5ec4de);
  --info-soft: var(--if-light, #e7f4f8) var(--if-dark, #10303a);

  /* À plat : les anciens dégradés deviennent des aplats (même syntaxe « image », utilisable partout) */
  --grad: linear-gradient(var(--brand-fill), var(--brand-fill));
  --a2-grad: var(--grad);
  --social-grad: linear-gradient(var(--brand-fill), var(--brand-fill));
  --shop-grad: linear-gradient(var(--if-light, #0b6b88) var(--if-dark, #11708c), var(--if-light, #0b6b88) var(--if-dark, #11708c));

  --sh-1: var(--if-light, 0 1px 2px rgba(16, 24, 40, .04)) var(--if-dark, 0 0 0 1px rgba(255, 255, 255, .02));
  --sh-2: var(--if-light, 0 6px 20px rgba(16, 24, 40, .08)) var(--if-dark, 0 10px 28px rgba(0, 0, 0, .45));
  --r-lg: 18px;
}
body[data-view] { --a2-grad: var(--grad); }

/* ── Coque : barre latérale ── */
.shell.a2 .side { background: var(--surface); padding: var(--space-4) var(--space-3); gap: 2px; }
.shell.a2 .side > .brand { padding: var(--space-1) var(--space-2) var(--space-3); }
.a2-logo { box-shadow: none; }
.a2-plus { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--sun); color: var(--sun-ink); flex: none; }
.a2-plus .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.a2-newbtn { margin: 0 0 var(--space-3); min-height: 48px; border-radius: var(--r-md); box-shadow: none; gap: var(--space-2); }
.shell.a2 .nav a { position: relative; color: var(--ink-2); border-radius: var(--r-md); }
.shell.a2 .nav a .ico { color: var(--muted); }
.shell.a2 .nav a:hover .ico { color: var(--ink); }
/* Élément actif : texte foncé + icône bleue + point soleil (pas de pastille pleine) */
.shell.a2 .nav a.on, .shell.a2 .nav a[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 700; }
.shell.a2 .nav a.on .ico, .shell.a2 .nav a[aria-current="page"] .ico { color: var(--brand); }
.shell.a2 .nav a.on::before, .shell.a2 .nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sun); }
.shell.a2 .cm-navsub, .a2-more .cm-navsub { color: var(--muted); font-weight: 500; }

/* ── Coque : en-tête (ordinateur) — l'assistant à gauche, solde + cloche à droite ── */
.a2-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); position: sticky; top: 0; z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-5); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.a2-ask { flex: 1; max-width: 440px; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-1) var(--space-1);
  padding-inline-end: var(--space-4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.a2-ask:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--ink-2); }
.a2-ask-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le dinar d'abord : « ≈ 25$ », le petit chiffre secondaire sous ou à côté du montant en dinars */
.a2-usd { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); white-space: nowrap; }
.a2-amt { white-space: nowrap; }
/* Solde = pastille : dinars en gras, ≈ dollars en petit, « + » soleil */
.a2-balchip-v { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.a2-balchip-usd { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); }
.a2-balchip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-1) var(--space-1); padding-inline-start: var(--space-3);
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 700; white-space: nowrap; }
.a2-balchip:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.a2-balchip > .ico { color: var(--brand); }
.a2-balchip .a2-plus { width: 32px; height: 32px; }
.a2-topbar .bell { border-radius: 50%; background: var(--surface); border-color: var(--line); }
@media (min-width: 769px) {
  /* Une seule cloche (celle de l'en-tête) sur ordinateur */
  .shell.a2 .main [data-bell] { display: none; }
  .shell.a2 .main { padding-top: var(--space-5); }
}
@media (max-width: 768px) { .a2-topbar { display: none; } }

/* Assistant (avatar) : rond bleu à plat + point soleil */
.a2-av { background: var(--brand-fill); box-shadow: none; position: relative; color: var(--brand-ink); }
.a2-av::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 30%; height: 30%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--surface); }
.a2-av.sm { width: 32px; height: 32px; } .a2-av.sm .ico { width: 16px; height: 16px; }

/* ── Coque : téléphone ── */
@media (max-width: 768px) {
  .shell.a2 .a2-mtop { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; }
  .a2-mtop .a2-balchip { min-height: 44px; padding-inline-start: var(--space-3); font-size: var(--fs-sm); background: var(--surface-2); border-color: transparent; }
  .a2-mtop .a2-balchip .a2-plus { width: 28px; height: 28px; }
  /* Téléphone : le dollar SOUS le dinar (deux lignes serrées dans la pastille) */
  .a2-mtop .a2-balchip-v { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .a2-mtop .a2-balchip-usd { font-size: 12px; line-height: 1.1; }   /* audit D9 : 11 px était illisible */
  /* Écran secondaire : le titre de la page d'abord. La pastille (dinars + WhatsApp à côté) l'écrasait jusqu'à 0 px
     (QA du 2026-10-11) → sans le « + » (la pastille entière mène à « الفلوس ») et plus serrée. */
  body.a2-sub .a2-mtop .a2-balchip .a2-plus { display: none; }
  body.a2-sub .a2-mtop .a2-balchip { padding-inline: var(--space-2); }
  /* Audit D9 : sur un écran secondaire (aide, réglages, fiche…), les dinars seuls sur une ligne (le « ≈ $ » reste sur les
     écrans principaux : accueil, حملات, المحفظة) —
     le titre de l'écran garde sa place */
  body.a2-sub .a2-mtop .a2-balchip-usd { display: none; }
  body.a2-sub .a2-mtop .a2-balchip-v { flex-direction: row; align-items: baseline; }
  body.a2-sub .a2-mt-title { min-width: 40px; }
  /* Barre du bas : onglet actif = trait soleil en haut + icône/texte bleus (pas de pastille derrière l'icône) */
  .a2-tabbar { background: var(--surface); backdrop-filter: none; border-top: 1px solid var(--line); box-shadow: none; }
  .a2-tabbar a { position: relative; color: var(--muted); }
  .a2-tabbar a .ico { width: 24px; height: 24px; padding: 0; border-radius: 0; }
  .a2-tabbar a.on .ico, .a2-tabbar a[aria-current="page"] .ico { background: none; color: var(--brand); }
  .a2-tabbar a.on, .a2-tabbar a[aria-current="page"] { color: var(--brand); }
  .a2-tabbar a.on::before, .a2-tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--sun); }
  .a2-fab { background: var(--brand-fill); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-fill) 30%, transparent); }
  .a2-more .nav a { background: var(--surface); border: 1px solid var(--line); }
  .a2-more .nav a.on::before, .a2-more .nav a[aria-current="page"]::before { inset-inline-start: auto; inset-inline-end: var(--space-2); top: var(--space-3); margin: 0; width: 8px; height: 8px; }
}

/* ── Éléments communs ── */
.card, .a2-crow, .a2-coach { box-shadow: none; }
.a2 .top h1 { letter-spacing: var(--track-tight); }
.btn.primary { box-shadow: none; }
/* Onglets « pilule » : actif = bleu doux bordé, pas de noir plein */
.tabs button, .tabs [role="tab"], .shell.a2 .cm-tabs a { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); min-height: 40px; }
.shell.a2 .cm-tabs a { display: inline-flex; align-items: center; }
.tabs button.on, .tabs [role="tab"][aria-selected="true"], .shell.a2 .cm-tabs a.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); }
.a2-seg button.on .ico { color: var(--brand); }
/* Icônes de rubrique sans carré coloré : l'icône seule, en bleu */
.a2-kpi-h .ic, body[data-view] .stat .ic { background: none; width: auto; height: auto; border-radius: 0; color: var(--brand); }
.a2-kpi-h .ic .ico { width: 18px; height: 18px; }
/* Étapes du parcours : l'étape en cours en soleil */
.stepper li.cur::before, .stepper li[aria-current="step"]::before { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); box-shadow: none; }
.stepper li.cur, .stepper li[aria-current="step"] { color: var(--ink); }
.a2 .empty .ei { background: var(--brand-soft); }

/* ── Accueil : guide « الخطوة الجاية » ── */
.a2-home { max-width: 1040px; gap: var(--space-4); }
.a2-hello { align-items: flex-start; margin: 0; }
h1.a2-hi { font-size: var(--fs-xl); letter-spacing: var(--track-tight); }
.a2-hline { color: var(--ink-2); margin-top: var(--space-1); }
.a2-hline b { color: var(--brand); font-size: var(--fs-lg); }
.a2-hgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.a2-hmain, .a2-hside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 960px) { .a2-hgrid { display: flex; flex-direction: column; gap: var(--space-4); } }

.a2-nextc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); }
/* Soleil levant (décor plat, coin de départ) */
.a2-nextc::before { content: ""; position: absolute; top: -56px; inset-inline-start: -56px; width: 128px; height: 128px; border-radius: 50%; background: var(--sun-soft); pointer-events: none; }
.a2-nextc > * { position: relative; }
/* Titre réservé aux lecteurs d'écran (h1.sr de #/new, audit D5) : hors du flux, sinon la règle ci-dessus le remet en place
   avec ses marges et l'écart du flex (bande vide au-dessus de « أنشئ حملتك في 3 خطوات ») */
.a2-nextc > .sr { position: absolute; margin: 0; }
.a2-nextc-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; }
.a2-kicker { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--sun-text); }
.a2-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.a2-howto-btn { border-radius: var(--r-pill); }
/* Chemin à 3 points */
.a2-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a2-path li { position: relative; display: flex; justify-content: center; min-width: 0; }
.a2-path li + li::before { content: ""; position: absolute; top: 17px; inset-inline-end: calc(50% + 22px); width: calc(100% - 44px); height: 2px; border-radius: var(--r-pill); background: var(--surface-3); }
.a2-path li.done + li::before { background: var(--ok); }
.a2-path-a { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); min-height: 44px; min-width: 64px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
a.a2-path-a:hover { text-decoration: none; color: var(--ink); }
.a2-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: var(--surface-2); color: var(--muted); border: 2px solid var(--surface-3); }
.a2-dot .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.a2-path li.done .a2-dot { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--solid-ink); }
.a2-path li.done .a2-path-a { color: var(--ok); }
.a2-path li.next .a2-dot { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); box-shadow: 0 0 0 4px var(--sun-soft); }
.a2-path li.next .a2-path-a { color: var(--ink); }
/* Les 3 étapes en liste numérotée (accueil) : faite = compacte et verte, suivante = mise en avant, à venir = visible */
.a2-vsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* Premier passage (home.js onboardBar / onboardHelp) : « الخطوة X من 3 » + barre, et l'aide humaine sous les étapes */
.a2-onb { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.a2-onb-t { font-size: var(--fs-sm); color: var(--ink-2); }
.a2-onb-t b { color: var(--ink); }
.a2-onb-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.a2-onb-bar i { display: block; height: 100%; width: max(var(--w, 0%), 6%); border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--ok)); }
.a2-onb-help { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--r);
  border: 1.5px solid color-mix(in srgb, #25d366 55%, var(--line)); background: color-mix(in srgb, #25d366 9%, var(--surface)); color: var(--ink); font-size: var(--fs-sm); }
.a2-onb-help:hover { text-decoration: none; border-color: #25d366; }
.a2-onb-help > .ico:first-child { flex: none; width: 28px; height: 28px; color: #1a9e4b; }
.a2-onb-help > span { flex: 1; min-width: 0; }
.a2-onb-help > .ico:last-child { flex: none; color: var(--muted); }
.a2-vsteps li { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); border: 1.5px solid var(--surface-3); background: var(--surface); }
.a2-vsteps li + li::before { content: ""; position: absolute; top: calc(-1 * var(--space-3) - 1.5px); inset-inline-start: calc(var(--space-3) + 17px); width: 2px; height: var(--space-3); background: var(--surface-3); }
.a2-vsteps li.done + li::before { background: var(--ok); }
.a2-vsteps li.done { align-items: center; padding-block: var(--space-2); border-color: transparent; background: var(--ok-soft, var(--surface-2)); }
.a2-vsteps li.done .a2-dot { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--solid-ink); }
.a2-vsteps li.wait { border-style: dashed; background: color-mix(in srgb, var(--sun) 9%, var(--surface)); }
.a2-vsteps li.wait .a2-dot { background: var(--sun-soft); border-color: var(--sun); color: var(--sun-text); }
.a2-vsteps li.next { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.a2-vsteps li.next .a2-dot { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); }
.a2-vsteps .a2-dot { flex: none; }
.a2-vstep-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.a2-vstep-t { margin: 0; font-size: var(--fs-lg); }
.a2-vsteps li.done .a2-vstep-b { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-2); }
.a2-vsteps li.done .a2-vstep-t { font-size: var(--fs-md, 1rem); }
.a2-vstep-b p { color: var(--ink-2); font-size: var(--fs-sm); }
.a2-vstep-ok { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ok); font-weight: 700; white-space: nowrap; }
.a2-vstep-ok .ico { width: 16px; height: 16px; }
.a2-vstep-go { min-height: 48px; justify-content: center; }
.a2-bud-hint { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--sun-soft); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.a2-bud-hint .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sun-text); }
.a2-bud-more { margin-top: var(--space-3); min-height: 48px; justify-content: center; }
.a2-bud-edit { display: flex; margin-top: var(--space-1); min-height: 44px; align-items: center; font-weight: 700; }
.a2-wz-page { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-weight: 600; }
.a2-wz-page > .ico { width: 18px; height: 18px; }
.a2-wz-gate .a2-nextc { max-width: 560px; margin-inline: auto; }
.a2-vsteps li.next .a2-vstep-go { min-height: 56px; }
.a2-nextc-b { display: flex; align-items: center; gap: var(--space-3); }
.a2-nextc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.a2-nextc-ic .ico { width: 26px; height: 26px; }
.a2-nextc-t { margin: 0 0 2px; font-size: var(--fs-xl); }
.a2-nextc-b p { color: var(--ink-2); }
.a2-nextc .a2-hnew { min-height: 56px; border-radius: var(--r-md); }
.a2-alts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-5); margin-top: calc(-1 * var(--space-2)); }
.a2-alt { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.a2-alt .ico { width: 16px; height: 16px; }
/* Campagnes : chaque ligne dit son résultat en une phrase */
.a2-sec-h { margin-bottom: var(--space-2); }
.a2-seeall { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; }
.a2-hclist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 var(--space-4); }
.a2-hclist .a2-cmini, .a2-hclist .a2-cmini:first-child, .a2-hclist .a2-cmini:last-child { padding: var(--space-3) 0; min-height: 68px; }
.a2-cmini .a2-cic { border-radius: 50%; }
.a2-cmini-s { font-size: var(--fs-sm); color: var(--ink-2); margin: 1px 0; }
.a2-cmini-s b { color: var(--brand); }
/* Solde (accueil) : une bande, pas une grande carte */
.a2-wstrip { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.a2-wstrip:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.a2-wstrip-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.a2-wstrip .grow { display: grid; line-height: 1.3; }
.a2-wstrip small { color: var(--muted); font-size: var(--fs-xs); }
.a2-wstrip b { font-size: var(--fs-xl); justify-self: start; }
.a2-wstrip-go { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--r-pill); background: var(--sun); color: var(--sun-ink); font-weight: 700; font-size: var(--fs-sm); flex: none; }
.a2-wstrip-go .ico { width: 16px; height: 16px; stroke-width: 2.4; }
/* L'assistant : une bulle de discussion */
.a2-askc { display: flex; align-items: flex-end; gap: var(--space-3); color: var(--ink); }
.a2-askc:hover { text-decoration: none; }
.a2-askc .a2-av { width: 40px; height: 40px; }
.a2-askc-b { flex: 1; min-width: 0; display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); border-end-start-radius: var(--r-xs);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.a2-askc:hover .a2-askc-b { border-color: var(--brand); }
.a2-askc-b span { color: var(--ink-2); font-size: var(--fs-sm); }
/* Raccourcis en pastilles */
.a2-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a2-quick a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; }
.a2-quick a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.a2-quick a > .ico { color: var(--brand); width: 18px; height: 18px; }
.a2-qok { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.a2-qok .ico { width: 12px; height: 12px; stroke-width: 3; }
.a2-hnote { border-radius: var(--r-md); background: var(--surface); }
.a2-hnote.warn { background: var(--warn-soft); }
.a2-h2t { font-size: var(--fs-lg); }
@media (max-width: 400px) {
  .a2-nextc { padding: var(--space-4); }
  .a2-wstrip { padding: var(--space-3); }
  .a2-wstrip-go { padding: 0 var(--space-3); }
}

/* ── Assistant de campagne : progression en points (fait = bleu, en cours = soleil) ── */
.a2-wzdots { display: flex; gap: 6px; }
.a2-wzdots i { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--surface-3); transition: background var(--dur-2) var(--ease); }
.a2-wzdots i.done { background: var(--brand-fill); }
.a2-wzdots i.cur { background: var(--sun); }
.a2-wz-h { box-shadow: none; }
.a2-wz-count { color: var(--ink); }
.a2 .a2-wz .choice .ci { border-radius: 50%; }
.a2-tpl-ic { border-radius: 50%; }
.a2-tpl.on .a2-tpl-ic { background: var(--brand-fill); }
.a2-tpl-sum .ico { width: 14px; height: 14px; color: var(--muted); }

/* ── Campagne : en-tête à plat (trait de couleur du statut), chiffre principal sur fond bleu doux ── */
.a2-chero { background: var(--surface); border-inline-start: 5px solid var(--tone); box-shadow: none; }
.a2-kpi.hero { background: var(--brand-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.a2-kpi.hero .a2-kpi-h, .a2-kpi.hero .a2-kpi-help, .a2-kpi.hero .a2-kpi-v small { color: var(--ink-2); }
.a2-kpi.hero .a2-kpi-h .ic { background: none; color: var(--brand); }
.a2-kpi.hero .a2-kpi-v { color: var(--brand); }
.a2-kpi.hero .a2-kpi-help { border-top-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.a2-rank li:first-child a { background: var(--sun-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sun) 70%, transparent); }
.a2-rk.gold { background: var(--sun); color: var(--sun-ink); }
.a2-rep-tot > div:first-child { background: var(--brand-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.a2-rep-tot > div:first-child small { color: var(--ink-2); } .a2-rep-tot > div:first-child b { color: var(--brand); }

/* ── Portefeuille : solde sur carte claire, « اشحن » soleil ── */
.a2-wallet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.a2-wallet::after { display: none; }
/* Graphique « نهار بنهار » : barres bleues à plat, le meilleur jour en soleil */
.a2-chart .cbar { fill: color-mix(in srgb, var(--brand) 78%, transparent); }
.a2-chart .cbar.best { fill: var(--sun); }
.a2-chart .bestm text { fill: var(--sun-text); }
.a2-wallet .l, .a2-wl { color: var(--muted); }
.a2-wallet .l .ico { color: var(--brand); }
.a2-wallet .v { color: var(--ink); }
.a2-wallet .btn { background: var(--surface-2); color: var(--ink); min-height: 44px; }
.a2-wallet .btn:hover { background: var(--surface-3); }
.a2-wallet .btn:first-child { background: var(--sun); color: var(--sun-ink); font-weight: 700; }
.a2-wallet .btn:first-child:hover { background: color-mix(in srgb, var(--sun) 88%, var(--black)); }
.a2-tier.on { border-color: var(--brand); }
.a2-gift { background: var(--sun-soft); border-color: color-mix(in srgb, var(--sun) 70%, transparent); }

/* ── Divers : cartes « marque » et parrainage à plat ── */
.a2-refhero { background: var(--brand-fill); }
.a2-done-ic { background: var(--ok-solid); }
.a2-aibtn { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.a2-ai.open { background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
/* Petites bascules (graphique « نهار بنهار ») : pastilles séparées, pas de grand fond gris */
.a2-seg.sm { background: none; padding: 0; gap: var(--space-2); }
.a2-seg.sm button { min-height: 40px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.a2-seg.sm button.on { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); box-shadow: none; }
@media (min-width: 769px) { .a2-wzdots { display: none; } }   /* ordinateur : la barre d'étapes nommées suffit */
/* « صفحات ما نقبلوهاش » (ربط صفحة) : note compacte, lisible sur téléphone */
.a2-refused { border: 1px solid var(--line, #e5e7eb); border-inline-start: 4px solid var(--bad, #dc2626); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.a2-refused ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; line-height: 1.5; }
.a2-refused li .muted { font-size: .82rem; }

/* Aide paiement WhatsApp (الفلوس) */
.a2-paywa { align-items: center; flex-wrap: wrap; }

/* ══ « شكون شاف إعلانك؟ » (app/insights.js) : ventilations Meta en barres SVG simples ══
   Le meilleur segment (âge, gouvernorat, placement, heures) passe en « soleil ». */
.ins { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); min-width: 0; }
.ins .a2-sec-h { margin: 0; }
.ins-hero { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--sun-soft); border: 1px solid color-mix(in srgb, var(--sun) 45%, transparent); }
.ins-hero-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--sun-ink); }
.ins-hero small { display: block; color: var(--sun-text); font-weight: 600; }
.ins-hero b { display: block; font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; }
.ins-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ins-card { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.ins-card h3 { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.ins-card h3 .ico { color: var(--brand); }
.ins-bar { display: block; width: 100%; height: 8px; }
html[dir="rtl"] .ins-bar, html[dir="rtl"] .ins-stack { transform: scaleX(-1); }
.ins-bar .bg, .ins-stack .bg { fill: var(--surface-3); }
.ins-bar .fg { fill: var(--brand); }
.ins-bar.reach .fg { fill: color-mix(in srgb, var(--brand) 38%, var(--surface-3)); }
.ins-bar.best .fg { fill: var(--sun); }
.ins-gender { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-g { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.ins-g.best { background: var(--sun-soft); }
.ins-big { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.ins-g.best .ins-big { color: var(--sun-text); }
.ins-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2); align-items: center; }
.ins-row > :first-child { grid-column: 1 / -1; }
.ins-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.ins-list li { border-radius: var(--r-sm); padding: 5px 8px; min-width: 0; }
.ins-list li.best { background: var(--sun-soft); }
.ins-list li.best .ins-lab, .ins-list li.best b { color: var(--sun-text); }
.ins-ages li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; gap: var(--space-2); align-items: center; }
.ins-ages li > :last-child { text-align: end; }
.ins-lab { font-weight: 600; }
.ins-pair { display: grid; gap: 3px; }
.ins-rows li { display: grid; gap: 4px; }
.ins-rows li.rest b { color: var(--muted); font-weight: 500; }
.ins-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.ins-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.ins-dot.reach { background: color-mix(in srgb, var(--brand) 38%, var(--surface-3)); }
.ins-stack { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; }
.ins-stack .seg.phone { fill: var(--brand); }
.ins-stack .seg.tablet { fill: color-mix(in srgb, var(--brand) 50%, var(--surface-3)); }
.ins-stack .seg.desktop { fill: var(--sun); }
.ins-stack .seg.other { fill: var(--muted); }
.ins-dev { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.ins-dev li { display: inline-flex; align-items: center; gap: 6px; }
.ins-dev li .ico { width: 18px; height: 18px; color: var(--brand); }
.ins-dev li.desktop .ico { color: var(--sun-text); }
.ins-hours svg { display: block; width: 100%; height: auto; }
.ins-hours rect.b { fill: color-mix(in srgb, var(--brand) 55%, var(--surface-3)); }
.ins-hours rect.best { fill: var(--sun); }
.ins-hours .axis { stroke: var(--line); }
.ins-hours text { fill: var(--muted); font-size: 8px; }
.ins-tip { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.ins-tip .ico, .ins-next .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--sun-text); }
.ins-next { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--brand-soft); font-weight: 600; }
.ins-empty { display: flex; gap: var(--space-3); align-items: flex-start; }
.ins-empty > .ico { flex: none; width: 24px; height: 24px; color: var(--muted); margin-top: 2px; }
@media print {
  .ins-bar, .ins-stack, .ins-hours, .ins-hero, .ins-g, .ins-list li, .ins-next { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-card { break-inside: avoid; }
}
/* ── Assistant : choisir le post de sa page (post existant) ───────────────
   Liste à une colonne sur téléphone (vignette + 1re ligne + date + réactions), deux colonnes dès 640 px.
   Choisi = bord bleu + pastille soleil cochée ; non boostable = grisé avec une raison, pas cliquable. */
.a2-pp { display: grid; gap: var(--space-3); }
.a2-pp-t { font-size: var(--fs-md); }
.a2-pp-tabs { margin-bottom: 0; }
.a2-pp-tabs .ico { width: 16px; height: 16px; vertical-align: -3px; }
.a2-pp-list { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .a2-pp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a2-pp-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-3); align-items: center; width: 100%; min-height: 92px;
  padding: var(--space-2); font: inherit; color: var(--ink); text-align: start; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
@media (hover: hover) { .a2-pp-card:hover:not(:disabled):not(.on) { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); } }
.a2-pp-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.a2-pp-card.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 1.5px var(--brand); }
.a2-pp-card.off { cursor: not-allowed; opacity: .55; filter: grayscale(.8); }
.a2-pp-card.sk { cursor: default; }
.a2-pp-th { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); color: var(--muted); }
.a2-pp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a2-pp-th > .ico { width: 26px; height: 26px; }
.a2-pp-badge { position: absolute; inset-inline-start: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .66); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; }
.a2-pp-badge .ico { width: 10px; height: 10px; }
.a2-pp-ok { position: absolute; top: 4px; inset-inline-end: 4px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sun); color: var(--sun-ink); box-shadow: 0 0 0 2px var(--surface); }
.a2-pp-ok .ico { width: 15px; height: 15px; stroke-width: 3; }
.a2-pp-card.on .a2-pp-ok { display: grid; }
.a2-pp-b { display: grid; gap: var(--space-1); min-width: 0; }
.a2-pp-txt { font-weight: 600; font-size: var(--fs-sm); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.a2-pp-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: var(--fs-xs); }
.a2-pp-meta .ico { width: 12px; height: 12px; vertical-align: -2px; }
.a2-pp-why { color: var(--ink-2); font-size: var(--fs-xs); }
/* Contrôle du post choisi (« يمشي ولا لا ؟ ») : sous la carte choisie, sur toute la largeur de la grille */
.a2-pchk-slot { grid-column: 1 / -1; } .a2-pchk-slot:empty { display: none; }
.a2-pchk { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--r-md); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.a2-pchk.busy { background: var(--info-soft); color: var(--ink-2); }
.a2-pchk.ok { background: var(--ok-soft); color: var(--ok); } .a2-pchk.ok span { color: var(--ink); }
.a2-pchk.bad { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); } .a2-pchk.bad b { color: var(--bad); }
.a2-pp-sk2 { width: 60%; }
.a2-pp-link { justify-self: center; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-3); font: inherit; font-size: var(--fs-sm);
  color: var(--brand); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.a2-pp-link .ico { width: 16px; height: 16px; }
.a2-pp-mini { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.a2-pp-mini img { width: 36px; height: 36px; flex: none; border-radius: var(--r-xs); object-fit: cover; }
.a2-pp-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.a2-pp-ph { display: grid; gap: var(--space-2); width: 100%; font-size: var(--fs-xs); color: var(--fb-mut); }
.a2-pp-ph img { width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); }
.a2-pp-ph span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* ── Assistant simplifié (v4) : 3 gros boutons d'objectif, liste « نشاطك », 3 budgets ── */
.a2-goals2 { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.a2-goal { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: start; cursor: pointer; }
.a2-goal b { flex: 1; min-width: 0; }
.a2-goal:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.a2-goal.on { border-color: var(--brand); background: var(--brand-soft); }
.a2-goal-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--surface-2); color: var(--brand); flex: none; }
.a2-goal.on .a2-goal-ic { background: var(--surface); }
.a2-goals2.sm .a2-goal { min-height: 56px; font-size: var(--fs-sm); }
.a2-goals2.sm .a2-goal-ic { width: 36px; height: 36px; }
.a2-goal:focus-visible, .a2-bud-b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.a2-more-goals { display: flex; margin: var(--space-3) auto 0; }
.a2-accs { flex-wrap: wrap; }
.a2-sec + .a2-sec { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.a2-sec > .a2-pp-link { display: flex; margin: var(--space-2) auto 0; }
.a2-aud-sel { min-height: 48px; font-size: var(--fs-md); }
.a2-aud-l { margin-top: var(--space-1); }
.a2-adv { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); background: var(--surface-2); }
.a2-bud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.a2-bud-b { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: var(--space-3) var(--space-1); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.a2-bud-b b { font-size: var(--fs-lg); }
.a2-bud-b small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.a2-bud-b.on { border-color: var(--brand); background: var(--brand-soft); }
.a2-bud-b.on small:first-child { color: var(--brand); font-weight: 600; }
.a2-bud-l { margin-top: var(--space-3); text-align: center; }
.a2-bud-r { margin-top: var(--space-1); text-align: center; color: var(--ink-2); }
.a2-legal { margin-top: var(--space-2); }
@media (min-width: 720px) {
  .a2-goals2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a2-goal { flex-direction: column; justify-content: center; text-align: center; min-height: 128px; }
  .a2-goal b { flex: none; }
}

/* ══ Version finale (client) : fiche campagne simple, statuts calmes, cibles tactiles ≥ 44 px ══ */
/* Statuts : badge net, point de couleur (qui « respire » quand la campagne tourne) */
.a2 .badge.a2-st { padding: 4px 10px; gap: 6px; }
.a2 .badge.a2-st .dot { width: 7px; height: 7px; }
.a2 .badge.a2-st.ok .dot { animation: a2-live 2s ease-in-out infinite; }
@keyframes a2-live { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .a2 .badge.a2-st.ok .dot { animation: none; } }
.a2-chero.info { --tone: var(--brand); }
.a2-chero.neutral { --tone: var(--line-strong); }
.a2-sic.neutral { background: var(--surface-2); color: var(--ink-2); }
.a2-chero .a2-status { margin-top: var(--space-4); align-items: center; }
.a2-chero .a2-status b { font-size: var(--fs-md); }
.a2-chero-a { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.a2-chero-a .btn { flex: 1 1 140px; }
@media (max-width: 768px) { .a2-chero-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.a2-actcol { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

/* « النتائج » : trois chiffres et une phrase */
.a2-res { margin-bottom: var(--space-4); }
.a2-res-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.a2-res-h h2 { margin: 0; font-size: var(--fs-lg); }
.a2-res-h small { display: inline-flex; gap: var(--space-1); align-items: center; }
.a2-res-h small .ico { width: 14px; height: 14px; }
.a2-res3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.a2-rt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.a2-rt b { font-size: clamp(var(--fs-lg), 5.4vw, var(--fs-2xl)); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.a2-rt small { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.35; }
.a2-rt-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--brand); margin-bottom: var(--space-1); }
.a2-rt-ic .ico { width: 18px; height: 18px; }
.a2-rt.hero { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.a2-rt.hero b { color: var(--brand); }
.a2-rt .bar { width: 80%; margin-top: var(--space-1); }
.a2-res-say { margin: var(--space-4) 0 0; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--ink); }
.a2-res .btn.block { margin-top: var(--space-4); }
.a2-res .alert { margin-bottom: var(--space-3); }
@media (max-width: 360px) { .a2-res3 { gap: 6px; } .a2-rt { padding: var(--space-2) 4px; } }

/* « فلوسك » */
.a2-money { margin-bottom: var(--space-4); }
.a2-money .a2-h2t { margin-bottom: var(--space-2); }

/* « تفاصيل أكثر » : tout le reste, replié */
.a2-more-sec { margin: var(--space-4) 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.a2-more-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); font-weight: 600; color: var(--ink); }
.a2-more-sec > summary::-webkit-details-marker { display: none; }
.a2-more-sec > summary .ico { width: 18px; height: 18px; color: var(--brand); }
.a2-more-sec > summary::after { content: "+"; margin-inline-start: auto; font-size: var(--fs-xl); line-height: 1; color: var(--muted); }
.a2-more-sec[open] > summary::after { content: "−"; }
.a2-more-sec > .stack { padding: 0 var(--space-3) var(--space-3); }
.a2-more-sec .a2-kpis { margin-bottom: 0; }

/* Liens de bas de page (une ligne = une action, 52 px) */
.a2-links { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-bottom: var(--space-4); }
.a2-lrow { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); text-align: start; cursor: pointer; width: 100%; }
.a2-lrow + .a2-lrow { border-top: 1px solid var(--line); }
.a2-lrow:hover { background: var(--surface-2); text-decoration: none; }
.a2-lrow > .ico:first-child { color: var(--brand); width: 20px; height: 20px; }
.a2-lrow > .ico:last-child { color: var(--muted); width: 16px; height: 16px; }
.a2-lrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Lien « مكتبة إعلانات Meta » dans la carte « النتائج » (IDEAS #21) : une ligne encadrée, sur toute la largeur */
.a2-res .a2-adlib { justify-self: stretch; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.a2-res .a2-adlib b { display: block; }

/* Cibles tactiles : puces et petits liens à 44 px sur écran tactile */
@media (pointer: coarse) {
  .a2 .chip { min-height: 44px; }
  .a2 .a2-pp-link, .a2 .a2-editlink, .a2 .a2-seeall, .a2 .a2-alt { min-height: 44px; display: inline-flex; align-items: center; }
}
.a2-gchip.sm { margin-top: var(--space-2); padding: 2px var(--space-2); font-size: var(--fs-xs); }
.a2-gchip.sm .ico { width: 14px; height: 14px; }

/* ── Assistant : étape 1 « شنوّة نشاطك؟ » (tuiles d'activité, un appui = suite) ── */
.a2-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 640px) { .a2-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a2-act { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-width: 0; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.a2-act b { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-tight); min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.a2-act:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.a2-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.a2-act.on { border-color: var(--brand); background: var(--brand-soft); }
.a2-act-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--brand); }
.a2-act-ic .ico { width: 18px; height: 18px; }
.a2-act.on .a2-act-ic { background: var(--brand-fill); color: var(--brand-ink); }
.a2-act-ok { display: none; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-fill); color: var(--brand-ink); place-items: center; }
.a2-act-ok .ico { width: 12px; height: 12px; stroke-width: 3; }
.a2-act.on .a2-act-ok { display: grid; }
.a2-act-sk { height: 56px; border-radius: var(--r-md); }
.a2-goalrow { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.a2-goalrow .chips { gap: var(--space-2); }
.a2-gchip2 .ico { width: 16px; height: 16px; color: var(--brand); }
.a2-gchip2.on .ico { color: inherit; }
/* « 22,5 د × 5 أيّام » : en français (« 22,5 DT × 5 jours ») la ligne passe sur deux lignes à 360 px au lieu de déborder */
.a2-bud-b .a2-bud-dt { color: var(--ink-2); white-space: normal; text-align: center; line-height: 1.3; }
.a2-bud-b .a2-bud-dt > span { white-space: nowrap; }
.a2-bud-b .a2-bud-dt .num { font-weight: 600; }
#n_review { margin-top: var(--space-5); }
.a2-wz-foot .a2-send { min-height: 52px; font-size: var(--fs-md); }

/* ── Argent : le solde d'abord, le formulaire de recharge ensuite ── */
.a2-wal-top { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.a2-wbal .v { margin-top: var(--space-1); }
.a2-verify { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.a2-ctabs { flex-wrap: nowrap !important; }

/* ── Cibles tactiles ≥ 44 px (téléphone) : interrupteurs des réglages, durées rapides de la calculette,
   suggestions de l'assistant. L'interrupteur garde son visuel 44×26, centré dans une zone de 44 px de haut. ── */
.switch { height: 44px; }
.switch span { inset: 9px 0; }
.chips .chip[data-d], .ch-sugg .chip { min-height: 44px; }
.pl-st-b p bdi { white-space: nowrap; }
.pl-how-img { display: block; width: 100%; max-width: 260px; height: auto; margin: 8px auto 2px; border-radius: 12px; border: 1px solid var(--line); }

/* ── Portefeuille simplifié : recharge en 3 étapes (téléphone d'abord) ── */
.a2-wbal-s { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.a2-wbal-s .a2-wbal-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.a2-wbal-s .v { font-size: var(--fs-2xl); margin-top: 0; display: inline-block; }
.a2-wbal-s .btn { flex: none; min-height: 44px; }
.a2-topup { padding: var(--space-4); }
.a2-tu-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.a2-tu-h h2 { margin: 0; font-size: var(--fs-xl); }
.a2-tu-h .a2-gift { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; }
.a2-step { padding-block: var(--space-4); border-top: 1px solid var(--line); display: grid; gap: var(--space-3); min-width: 0; }
.a2-step:first-of-type { border-top: 0; padding-top: var(--space-2); }
.a2-step-h { display: flex; align-items: center; gap: var(--space-2); }
.a2-step-n { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-sm); background: var(--brand-fill); color: var(--brand-ink); }
.a2-step-t { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.a2-amts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: var(--space-2); }
.a2-wal .a2-amts .chip { min-height: 48px; font-size: var(--fs-md); font-weight: 700; border-radius: var(--r-md); justify-content: center; }
.a2-topup #w_dt { min-height: 52px; font-size: var(--fs-lg); }
.a2-eq { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; margin: 0; }
.a2-eq [data-usd-eq] b { color: var(--brand); font-size: var(--fs-md); }
.a2-step .a2-hint { margin-top: 0; padding: var(--space-2) var(--space-3); }
.a2-step .a2-hint .btn { min-height: 44px; flex: none; }
/* Repli « السوم » / « التفاصيل » / « زيد رقم العملية » : discret, 44 px */
.a2-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.a2-more > summary::-webkit-details-marker { display: none; }
.a2-more > summary .ico { width: 16px; height: 16px; color: var(--brand); }
.a2-more[open] > summary { color: var(--brand); }
.a2-rates .a2-tiers { padding-bottom: var(--space-1); }
/* Moyens de paiement : grosses tuiles, icône + nom */
.a2-mtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.a2-mtile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 92px; padding: var(--space-3) var(--space-2);
  border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.a2-mtile b { font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.a2-mtile-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--brand); }
.a2-mtile-ic .ico { width: 22px; height: 22px; }
.a2-mtile:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.a2-mtile.on { border-color: var(--brand); background: var(--brand-soft); }
.a2-mtile.on .a2-mtile-ic { background: var(--brand-fill); color: var(--brand-ink); }
.a2-mtile.on::after { content: "✓"; position: absolute; top: 6px; inset-inline-start: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-fill); color: var(--brand-ink); font-size: 13px; font-weight: 800; }
.a2-paycard { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.a2-acc { padding: var(--space-1); padding-inline-start: var(--space-3); border: 2px solid var(--brand); background: var(--surface); margin-top: var(--space-1); }
.a2-acc code { font-size: var(--fs-md); font-weight: 700; }
.a2-acc .btn, .a2-exact .btn { min-height: 44px; flex: none; }
.a2-exact { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md); background: var(--surface); }
.a2-exact .a2-total { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.2; }
/* Reçu : grande zone à toucher, puis la vraie photo + « بدّل » */
.a2-rdrop { padding: var(--space-4); border-width: 2px; min-height: 120px; display: grid; place-items: center; }
.a2-rprev { display: grid; justify-items: center; gap: var(--space-1); }
.a2-rcam { font-size: 34px; line-height: 1; }
.a2-rprev b { font-size: var(--fs-md); color: var(--brand); }
.a2-rdrop.has { border-style: solid; border-color: var(--brand); }
.a2-rdrop img { max-height: 200px; max-width: 100%; margin: 0 auto var(--space-2); }
.a2-rchg { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; font-weight: 600; color: var(--brand); text-decoration: underline; }
.a2-rdrop.loading { opacity: .6; pointer-events: none; }
.a2-refd .input { margin-top: var(--space-1); }
/* Bouton « ابعث » : toujours visible ; inactif (aria-disabled) tant qu'il manque quelque chose */
.a2-sendbar { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.a2-sendbar .btn { min-height: 54px; font-size: var(--fs-lg); }
.a2-sendbar .btn.is-off { opacity: .55; box-shadow: none; }
.a2-need { text-align: center; min-height: 1em; }
.a2-need:empty { display: none; }
.a2-topup .a2-hours { margin-top: var(--space-3); }
.a2-topup .a2-paywa { margin-top: var(--space-3); }
.a2-calc-link { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding-block: var(--space-2); color: var(--ink-2); }
.a2-minline { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); margin-top: calc(-1 * var(--space-1)); }
.a2-minline b { color: var(--ink); }
.a2-minline.is-low, .a2-minline.is-low b { color: var(--bad); }
/* le champ du montant ne reste jamais caché sous la barre « ابعث » collée en bas : au focus, il remonte au-dessus */
#w_dt { scroll-margin-block: 96px 190px; }
@media (max-width: 768px) {
  .a2-sendbar { position: sticky; z-index: var(--z-raised); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-2));
    margin-inline: calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); box-shadow: 0 -6px 20px color-mix(in srgb, var(--ink) 10%, transparent); }
}


/* « اربط صفحتك » : sur téléphone étroit, les longs libellés Facebook (« Personnes avec un accès par tâche ») passent à la ligne */
@media (max-width: 420px) { .pl-st-b p bdi { white-space: normal; overflow-wrap: anywhere; } }

/* Budget : « أقل ميزانية … » mis en avant quand le client a tenté un montant trop bas */
.a2-min-hit { color: var(--bad); font-weight: 700; animation: a2-min-hit .5s var(--ease); }
@keyframes a2-min-hit { 30% { transform: translateX(6px); } 60% { transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .a2-min-hit { animation: none; } }

/* Fiche campagne : feuille de « وقّف » — deux choix expliqués (pause / clôture avec remboursement) */
.a2-stopsheet { gap: var(--space-3); }
.a2-stopopt { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; padding: var(--space-4); text-align: start; cursor: pointer;
  border: 1.5px solid var(--surface-3); border-radius: var(--r-md); background: var(--surface); color: var(--ink); -webkit-tap-highlight-color: transparent; }
.a2-stopopt > .ico { width: 24px; height: 24px; flex: none; margin-top: 2px; color: var(--brand); }
.a2-stopopt > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a2-stopopt b { font-size: var(--fs-lg); }
.a2-stopopt span span { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.a2-stopopt:active { transform: scale(.985); }
.a2-stopopt.danger { border-color: color-mix(in srgb, var(--bad) 55%, var(--surface-3)); }
.a2-stopopt.danger > .ico, .a2-stopopt.danger b { color: var(--bad); }
/* « المساعدة » : page Facebook / Instagram de la plateforme, sous la carte WhatsApp */
.a2-helpsoc { gap: var(--space-3); flex-wrap: wrap; }
.a2-helpsoc .btn { min-height: 48px; justify-content: center; flex: 1 1 200px; }

/* WhatsApp dans la barre du haut, à côté de la cloche : rond vert, logo blanc */
.btn.ghost.a2-watop { background: var(--wa); color: var(--wa-ink); border-color: transparent; border-radius: 50%; }
.btn.ghost.a2-watop:hover { background: var(--wa); filter: brightness(1.06); }
.a2-watop .ico { width: 22px; height: 22px; }

/* Accueil du client qui débute : bandeau « شوف الفيديو قبل ما تبدا » (ouvre la vidéo du parcours complet) */
.a2-hvid { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); margin-bottom: var(--space-4); text-align: start; cursor: pointer;
  border: 0; border-radius: var(--r-lg); color: #fff; background: linear-gradient(135deg, #0a5ce6, #062a7a); box-shadow: 0 12px 28px -14px #0a5ce6; -webkit-tap-highlight-color: transparent; }
.a2-hvid:active { transform: scale(.985); }
.a2-hvid-th { position: relative; flex: none; width: 64px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #051f5c; box-shadow: 0 0 0 2px color-mix(in srgb, #fff 35%, transparent); }
.a2-hvid-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a2-hvid-play { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, #051f5c 35%, transparent); }
.a2-hvid-play .ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #ffc93c; color: #062a7a; }
.a2-hvid-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.a2-hvid-b b { font-size: var(--fs-lg); line-height: 1.3; }
.a2-hvid-b span { font-size: var(--fs-sm); line-height: 1.5; color: color-mix(in srgb, #fff 92%, transparent); }

/* Invitation au groupe WhatsApp (accueil du client, fermable) et carte de « المساعدة » */
.a2-hgrp { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); margin-block: var(--space-4); border-radius: var(--r-lg);
  border: 1.5px solid color-mix(in srgb, var(--wa) 55%, var(--line)); background: color-mix(in srgb, var(--wa) 10%, var(--surface)); }
.a2-hgrp-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: var(--wa-ink); }
.a2-hgrp-ic .ico { width: 24px; height: 24px; }
.a2-hgrp-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.a2-hgrp-b b { font-size: var(--fs-md); line-height: 1.35; }
.a2-hgrp-b span { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.a2-hgrp-go { flex: none; min-height: 44px; padding-inline: var(--space-4); background: var(--wa); color: var(--wa-ink); font-weight: 700; border: 0; }
.a2-hgrp-x { flex: none; width: 36px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; }
.a2-hgrp-x .ico { width: 18px; height: 18px; }
.a2-helpgrp { display: flex; align-items: center; gap: var(--space-4); border: 2px solid color-mix(in srgb, var(--wa) 55%, var(--line)); background: color-mix(in srgb, var(--wa) 8%, var(--surface)); }
.a2-helpgrp:hover { text-decoration: none; border-color: var(--wa); }
.a2-helpgrp .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ══════════════════════════════════════════════════════════
   Refonte de « الفلوس / اشحن رصيدك » (page de recharge) — maquette approuvée.
   Les crochets JS (ids/classes/data-*) de wallet.js sont inchangés : seul l'habillage l'est.
   ══════════════════════════════════════════════════════════ */
/* Bandeau d'en-tête */
.wal2-hero { grid-column: 1 / -1; position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff;
  padding: var(--space-5) var(--space-4); background: linear-gradient(135deg, #0a5ce6, #062a7a); box-shadow: 0 16px 36px -18px #0a5ce6; }
.wal2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 220px at 85% -20%, rgba(255, 255, 255, .18), transparent 70%); }
.wal2-hero > * { position: relative; }
.wal2-hero h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 800; display: flex; align-items: center; gap: var(--space-2); }
.wal2-hero > p { margin: var(--space-1) 0 0; font-size: var(--fs-sm); opacity: .92; }
.wal2-trust { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.wal2-trust span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); }
.wal2-gift { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill); background: var(--sun); color: var(--sun-ink); font-size: var(--fs-sm); font-weight: 700; }
.wal2-gift .ico { width: 16px; height: 16px; }

/* Cartes d'étapes */
.wal2 [data-step] { display: grid; gap: var(--space-3); scroll-margin-top: 90px; }
/* « hidden » (étape 3 sans méthode, étape 4 sans méthode ou « الدفع في مقرّنا ») doit gagner sur le display:grid ci-dessus */
.wal2 [data-step][hidden] { display: none; }
@media (max-width: 960px) { .wal2 [data-step] { scroll-margin-top: 120px; } }
.wal2-step .a2-step-t { font-size: var(--fs-lg); }
.wal2-hnote { font-weight: 600; color: var(--muted); font-size: var(--fs-sm); margin-inline-start: var(--space-1); }

/* Étape 1 : équivalent en $ (encadré vert) + note */
.wal2-eq { margin: var(--space-2) 0 0; min-height: 40px; align-items: center; border-radius: var(--r-md);
  background: var(--ok-soft); color: var(--ok); font-weight: 700; padding: var(--space-2) var(--space-3); }
.wal2-eq:has([data-usd-eq]:empty):has([data-min-err]:empty) { display: none; }
.wal2-eq [data-usd-eq]:empty, .wal2-eq [data-min-err]:empty { display: none; }
.wal2-eq [data-usd-eq] b { color: var(--ok); font-size: var(--fs-md); }
/* Montant tapé sous le minimum : le même encadré passe au rouge (ce qui manque + bouton « اشحن 23 د »), le champ aussi */
.wal2-eq.is-err { background: var(--bad-soft); color: var(--bad); }
.wal2-minerr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; }
.wal2-minerr-t { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
/* « جهّز ردودك على الرسائل » (IDEAS #18) : trois réponses à copier */
.a2-replykit { display: grid; gap: var(--space-3); }
.a2-replykit .a2-h2t { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.a2-replykit .rk-row { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.a2-replykit .rk-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.a2-replykit .rk-h .btn { min-height: 44px; }
.a2-replykit .rk-t { background: var(--surface-2); border-radius: var(--r-md); padding: 10px 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Échéance de la hdiya du 1er rechargement (IDEAS #8) : une ligne + barre du temps restant */
.wal2-giftdl { display: grid; gap: 6px; margin-top: var(--space-2); font-size: var(--fs-xs); font-weight: 600; max-width: 320px; }
.wal2-giftbar { height: 6px; }
/* Délai habituel d'acceptation sous les étapes d'une recharge en attente (IDEAS #15) */
.wal2-eta { margin: 4px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.wal2-eta .ico { flex: none; margin-top: 3px; }
.wal2-minerr .btn { flex: none; min-height: 44px; background: var(--surface); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.wal2-minerr .btn:hover { background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.wal2 .input-group.invalid:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 20%, transparent); }
.wal2 .input-group.invalid .input:focus-visible { outline-color: var(--bad); }
.wal2-paynote { margin: 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.6; }

/* Étape 2 : cartes « gros logo » */
.wal2-methods { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wal2-m { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); text-align: start;
  min-height: 108px; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.wal2-m:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.wal2-m:active { transform: scale(.985); }
.wal2-m.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wal2-m.on::after { content: "✓"; position: absolute; top: 8px; inset-inline-start: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-fill); color: var(--brand-ink); font-size: var(--fs-xs); font-weight: 800; }
.wal2-mname { font-weight: 700; font-size: var(--fs-md); line-height: 1.25; overflow-wrap: anywhere; }
.wal2-fee { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); direction: rtl; unicode-bidi: isolate; }
.wal2-fee.free { color: var(--ok); }
.wal2-fee.warn { color: var(--sun-text); }
/* Pastille blanche : les vrais logos (carré navy BIAT, bord bleu D17…) s'alignent proprement, lisibles en sombre */
.wal2-logo { display: inline-grid; place-items: center; min-height: 44px; padding: 5px 10px; border-radius: 10px; background: #fff; }
.paylogo { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
img.paylogo { height: 34px; width: auto; max-width: 100%; object-fit: contain; }
.paylogo-generic .ico { width: 26px; height: 26px; color: #0a5ce6; }
/* Méthode « قريباً » : estompée, non choisissable */
.wal2-m.soon { opacity: .72; cursor: default; border-style: dashed; }
.wal2-m.soon:hover { border-color: var(--line); }
.wal2-m.soon .wal2-logo { filter: grayscale(.2); }
.wal2-soontag { font-size: var(--fs-xs); font-weight: 800; color: #3b2200; padding: 3px 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #ffb300, #ff8f00); }
/* Carte « الدفع في مقرّنا » : pleine largeur, accent doré, avec photo */
/* Resting : bordure NEUTRE (comme les autres tuiles) + léger fond doré + badge → « spéciale »
   sans jamais paraître déjà enfoncée. La bordure dorée n'apparaît QU'À la sélection réelle. */
.wal2-m.office { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-3);
  background: color-mix(in srgb, var(--sun-soft) 40%, var(--surface)); }
.wal2-m.office.on { border-color: var(--sun); box-shadow: none; }
.wal2-m.office.on::after { background: var(--sun); color: var(--sun-ink); }
.wal2-ophoto { flex: none; width: 150px; height: 112px; border-radius: 12px; object-fit: cover; box-shadow: var(--sh-1);
  background: linear-gradient(135deg, var(--sun), #e68a00); }
@media (max-width: 560px) { .wal2-ophoto { width: 132px; height: 100px; } }
.wal2-wa-coord { margin: 10px 0 2px; }
.wal2-office-note { font-size: var(--fs-sm); color: var(--ink-2); margin: 7px 0 0; line-height: 1.5; }
.wal2-ophoto-ph { display: grid; place-items: center; font-size: 30px; color: #fff; }
.wal2-obody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wal2-otag { align-self: flex-start; font-size: var(--fs-xs); font-weight: 800; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--sun); color: var(--sun-ink); }
.wal2-obody small { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }

/* Étape 3 : détails du paiement */
.wal2-pay { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); }
.wal2-note { margin: 0; font-size: var(--fs-sm); font-weight: 600; }
.wal2-copybox { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md);
  background: var(--surface); border: 1.5px dashed var(--brand); }
.wal2-copybox small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-bottom: 2px; }
.wal2-copybox code { display: block; direction: ltr; font-weight: 800; font-size: var(--fs-lg); letter-spacing: .5px; overflow-x: auto; white-space: nowrap; }
.wal2-cp { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3);
  border: 0; border-radius: var(--r-md); background: var(--brand-fill); color: var(--brand-ink); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.wal2-cp .ico { width: 16px; height: 16px; }
.wal2-holder { font-size: var(--fs-sm); color: var(--muted); } .wal2-holder b { color: var(--ink); }
.wal2-kv { display: grid; gap: var(--space-1); border-top: 1px dashed var(--line); padding-top: var(--space-3); }
.wal2-krow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.wal2-krow.big { margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-md); font-weight: 800; }
.wal2-tot { color: var(--brand); font-size: var(--fs-2xl); font-weight: 800; line-height: 1.15; }
.wal2-office-addr { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--line); }
.wal2-pin { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--sun); font-size: 20px; }
.wal2-office-addr b { display: block; font-size: var(--fs-md); } .wal2-office-addr span { font-size: var(--fs-sm); color: var(--muted); }

/* Étape 4 : zone de dépôt + numéro d'opération */
.wal2-drop { background: color-mix(in srgb, var(--brand-soft) 30%, var(--surface)); }
.wal2-ref { margin-top: var(--space-3); }
.wal2-reassure { text-align: center; line-height: 1.7; margin-top: var(--space-2); }

/* Carte d'aide « 💬 محتاج مساعدة؟ » : partagée (app/contact.js helpCard), voir « Carte d'aide partagée » plus bas */

/* Marques de paiement PROVISOIRES (à remplacer par /assets/pay/<key>.svg|png) */
.pmark { direction: ltr; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; }
.pmark.poste { background: #ffc600; color: #003a78; font-style: italic; font-size: 15px; padding: 6px 10px; border-radius: 8px; letter-spacing: -.3px; }
.pmark.biat { color: #c8102e; font-size: 22px; letter-spacing: .5px; }
.pmark.d17 { color: #12235f; font-size: 22px; letter-spacing: -.5px; }
.pmark.d17 i { color: #ff7a00; font-style: normal; }
.pmark.izi { background: #6a2cf5; color: #fff; font-style: italic; font-size: 17px; padding: 5px 13px; border-radius: 8px; letter-spacing: -.5px; }
.pmark.wafa { color: #ee7203; font-size: 17px; font-style: italic; letter-spacing: -.4px; } .pmark.wafa b { color: #7a4a12; font-weight: 900; }

/* Pile mobile : l'habillage « côte à côte » redevient une colonne (comme le reste de la page) */
@media (max-width: 960px) { .wal2-hero { grid-column: auto; } }

/* ══════════════════════════════════════════════════════════
   Support dans l'en-tête (« دعم ») + pied « تواصل معنا »
   (ajout agent support+footer — CSS ajouté en fin de fichier pour un merge trivial)
   ══════════════════════════════════════════════════════════ */

/* Contrôle « دعم » de la barre du haut : pastille WhatsApp verte avec libellé, jamais flottante.
   Reprend le fond vert de .a2-watop et devient une pilule (au lieu d'un rond icône). */
.btn.ghost.a2-watop.a2-support { width: auto; min-width: 0; border-radius: var(--r-pill); gap: 6px; padding-inline: var(--space-3); color: var(--wa-ink); font-weight: 700; }
.btn.ghost.a2-watop.a2-support:hover { filter: brightness(1.06); }
.a2-support .a2-support-t { font-size: var(--fs-sm); line-height: 1; }
.a2-support .ico { width: 20px; height: 20px; }
/* Barre mobile serrée : on garde l'icône verte (reconnaissable) et on cache le libellé pour ne rien bousculer.
   Sélecteur ≥ spécificité de la règle pilule ci-dessus (0,5,0) pour gagner à coup sûr sous 768 px. */
@media (max-width: 768px) {
  .a2-mtop .btn.ghost.a2-watop.a2-support { width: 44px; min-width: 44px; padding-inline: 0; border-radius: 50%; }
  .a2-mtop .a2-support .a2-support-t { display: none; }
}

/* Feuille « كيف نعاونوك؟ » (quand un groupe WhatsApp existe) : محادثة واتساب + انضمّ للمجموعة */
.a2-suppsheet { display: flex; flex-direction: column; gap: var(--space-3); }
.a2-suppopt { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.a2-suppopt:hover { text-decoration: none; border-color: var(--wa); background: color-mix(in srgb, var(--wa) 8%, var(--surface)); }
.a2-suppopt .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.a2-suppopt b { font-size: var(--fs-md); }
.a2-suppopt small { font-size: var(--fs-sm); line-height: 1.4; }
.a2-suppopt-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.a2-suppopt-ic .ico { width: 24px; height: 24px; }
.a2-suppopt-wa { background: var(--wa); color: var(--wa-ink); }
.a2-suppopt-grp { background: var(--brand-fill); }
.a2-suppopt > .ico { flex: none; width: 18px; height: 18px; color: var(--muted); }

/* Pied « تواصل معنا » : logos de marque, grandes cibles tactiles, centré, clair + sombre */
.a2-foot { margin-top: var(--space-5); text-align: center; }
.a2-foot-head { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: var(--space-4); }
.a2-foot-title { font-size: var(--fs-lg); font-weight: 800; line-height: 1.2; }
.a2-foot-sub { font-size: var(--fs-sm); color: var(--muted); }
.a2-foot-brand { margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
.a2-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-5); }
.a2-foot-link { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 56px; color: var(--ink-2); text-decoration: none; }
.a2-foot-link:hover { text-decoration: none; }
.a2-foot-ic { width: 52px; height: 52px; display: grid; place-items: center; transition: transform .12s ease; }
.a2-foot-ic svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16)); }
.a2-foot-link:hover .a2-foot-ic, .a2-foot-link:focus-visible .a2-foot-ic { transform: translateY(-2px); }
.a2-foot-cap { font-size: var(--fs-xs); font-weight: 600; }
/* Version compacte (menu) : titre discret + logos 36 px, sans carte */
.a2-foot.mini { margin-top: 0; display: grid; gap: var(--space-2); }
.a2-foot.mini .a2-foot-title { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.a2-foot.mini .a2-foot-links { gap: var(--space-2) var(--space-4); }
.a2-foot.mini .a2-foot-link { min-width: 48px; gap: 4px; }
.a2-foot.mini .a2-foot-ic { width: 36px; height: 36px; }

/* ══════════════════════════════════════════════════════════
   Carte d'aide partagée « 💬 محتاج مساعدة؟ » (app/contact.js helpCard) — née sur la page de recharge (même
   rendu), posée aussi dans صفحاتي, Sponsor جديد et le détail d'une campagne. Téléphone d'abord.
   ══════════════════════════════════════════════════════════ */
.a2-helpc h3 { margin: 0 0 2px; font-size: var(--fs-lg); font-weight: 800; }
.a2-helpc > p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.a2-helpc-vid { display: block; position: relative; aspect-ratio: 16 / 9; margin: var(--space-3) 0; border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-1); background: linear-gradient(135deg, #0a5ce6, #062a7a); }
.a2-helpc-vid img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Icônes « lecture » pleines (audit D8 : le caractère ▶ est remplacé par l'icône du jeu Sponsi) */
.a2-helpc .i-play { fill: currentColor; }
.a2-helpc-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .95); color: #e02424; font-size: 22px; padding-inline-start: 4px; }
.a2-helpc-cap { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-5) var(--space-3) var(--space-2); color: #fff; font-weight: 700;
  font-size: var(--fs-sm); background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.a2-helpc-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.a2-helpc > p + .a2-helpc-btns { margin-top: var(--space-3); }
.a2-helpc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; border-radius: var(--r-md);
  font-weight: 800; font-size: var(--fs-sm); color: #fff; }
.a2-helpc-btn:hover { text-decoration: none; filter: brightness(.96); }
.a2-helpc-btn .ico { width: 18px; height: 18px; color: #fff; }
/* Texte vert foncé sur vert WhatsApp (comme .a2-wa) : le blanc n'avait que ~2:1 de contraste */
.a2-helpc-btn.wa { background: var(--wa, #25D366); color: var(--wa-ink); }
.a2-helpc-btn.wa .ico { color: var(--wa-ink); }
.a2-helpc-btn.grp { background: var(--brand-fill); }
/* « شوف الشرح » (version compacte) : bouton clair, ▶ rouge comme la vignette */
.a2-helpc-btn.vid { background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line); }
.a2-helpc-btn.vid > span:first-child { color: #e02424; font-size: var(--fs-md); }
/* Version compacte : titre + une ligne, puis les boutons côte à côte */
.a2-helpc.compact { display: grid; gap: var(--space-3); }
.a2-helpc-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a2-helpc-h b { font-size: var(--fs-md); font-weight: 800; }
.a2-helpc-h span { font-size: var(--fs-sm); }
.a2-helpc.compact .a2-helpc-btns { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Menu (barre latérale + « المزيد ») : bloc support toujours là — gros bouton « كلّمنا على الواتساب » + logos.
   Jamais flottant : il fait partie du menu. Texte vert foncé sur vert (contraste, comme .a2-wa). */
.a2-navsupp { display: grid; gap: var(--space-3); margin-block: var(--space-2); padding-block: var(--space-3); border-block: 1px solid var(--line); }
.a2-navsupp-wa { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  background: var(--wa); color: var(--wa-ink); font-weight: 800; }
.a2-navsupp-wa:hover { text-decoration: none; filter: brightness(1.05); }
.a2-navsupp-wa > .ico { width: 26px; height: 26px; flex: none; }
.a2-navsupp-wa > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.a2-navsupp-wa small { font-size: var(--fs-xs); font-weight: 600; }
/* Le bloc est posé entre les écrans et « Français / فاتح / اخرج » (2ᵉ .nav) : rien ne bouge dans la grille de « المزيد » */
.a2-more .a2-navsupp { margin-block: var(--space-3); }

/* « 🎁 أوّل فيديو إعلان مجاني » (accueil, assistant « اربط صفحتك ») : bandeau / ligne, couleurs « ok » */
.a2-hnote.gift { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.a2-hnote.gift .a2-gift-ic { font-size: 22px; line-height: 1; flex: none; }
/* « ربط صفحتك » dans l'avis 🎁 (aucune page encore) : un bouton visible, toute la ligne reste cliquable */
.a2-hnote .a2-hnote-cta { display: flex; width: fit-content; align-items: center; min-height: 36px; margin-top: var(--space-2); padding: 0 var(--space-3); border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.pl-free { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  background: var(--ok-soft); color: var(--ink); font-size: var(--fs-sm); line-height: 1.6; }
/* « 📞 اتصلوا بي » (app/callme.js) : bouton avec l'allure de « تحتاج إلى مساعدة؟ » */
button.a2-onb-help { width: 100%; font: inherit; font-size: var(--fs-sm); text-align: start; cursor: pointer; }
.a2-callme { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.a2-callme:hover { border-color: var(--brand); }
.a2-onb-help > .a2-callme-ic { flex: none; width: 28px; text-align: center; font-size: 1.3rem; }

/* ── Lot « simplifier » (test persona du 14/10/2026, docs/USER-TEST-2026-10-14.md) ── */
/* SP9 : la question « الهدف » AVANT les tuiles d'activité (un appui sur une tuile passe à l'étape suivante) */
.a2-goalrow.a2-goal-first { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px dashed var(--line); }
.a2-acts-label { margin-bottom: var(--space-2); }
/* SP9 : rappel du public à l'étape « المنشور » */
.a2-audline { display: block; line-height: 1.6; margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.a2-audline b { color: var(--ink); font-weight: 600; }
.a2-audline > .ico { vertical-align: -3px; color: var(--brand); }
.a2-audline .a2-editlink { margin-inline-start: var(--space-2); }
/* SP25 : aperçu d'un lien collé */
.a2-ph-hint { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--fb-mut); line-height: 1.4; }
/* SP5 : « ينقصك » en dinars (même allure que l'ancien équivalent en $) */
.a2-lack { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); white-space: nowrap; }
.a2-stepper .a2-lack { display: block; }
/* SP5 : le dollar, replié — « لماذا يُذكر الدولار؟ » */
.wal2-why { margin-top: var(--space-3); font-size: var(--fs-sm); }
.wal2-why > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.wal2-why[open] { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-radius: var(--r-md); background: var(--surface-2); }
/* SP6 : paiement au siège en attente — numéro de la demande, adresse, heures */
.wal2-owait { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md); background: var(--warn-soft, var(--surface-2)); color: var(--ink); line-height: 1.5; }
.wal2-owait > .ico { flex: none; margin-top: 3px; color: var(--warn); }
/* SP6 : libellés des étapes d'un dépôt sur deux lignes au besoin (« تم الإرسـ… » coupé sur téléphone) */
.a2-depsteps li span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* SP18 : la demande qui vient d'être envoyée, mise en avant 2 s ; barre « ينقص » masquée tant que le client ne retouche rien */
.a2-dep.is-new { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-md); background: var(--brand-soft); transition: background 1s var(--ease), outline-color 1s var(--ease); }
.a2-sendbar[hidden] { display: none; }
/* SP10 : « اتصل بنا: +216 … » dans la carte d'aide */
/* SP19 : « الخطوة التالية: شحن الرصيد » (صفحاتي) */
.pl-next { margin-top: var(--space-1); }