/* Design system commun aux prototypes. Chaque app garde sa DA (couleur, marque, photos) ;
   cette couche unifie la finition : échelle typographique, surfaces, rayons, contrôles et états. */

.proto {
  /* neutres : contraste AA pour le texte secondaire */
  --tx: #111114; --tx2: #3a3a3f; --tx3: #6b6b71; --sep: rgba(17, 17, 20, 0.09);
  --pg: #f4f4f6; --card: #ffffff;
  --line: rgba(17, 17, 20, 0.07);
  --e1: 0 1px 2px rgba(17, 17, 20, 0.05);
  --e2: 0 1px 2px rgba(17, 17, 20, 0.05), 0 6px 16px -8px rgba(17, 17, 20, 0.12);
  --r-s: 8px; --r-m: 12px; --r-l: 16px;           /* une échelle de rayons par app */
  --ctl-h: 52px;
  --ok: #1a8a4c; --warn: #a86400; --err: #c9271c;
  --ok-bg: #e5f4ec; --warn-bg: #fff2d9; --err-bg: #fde9e7;
  --focus: #0a66d6;
}
.proto[data-brand="wafa"] { --r-s: 8px; --r-m: 12px; --r-l: 14px; }
.proto[data-brand="yakeey"], .proto[data-brand="yakeey-pro"] { --r-s: 10px; --r-m: 14px; --r-l: 18px; }
.proto[data-brand="carrefour"] { --r-s: 8px; --r-m: 12px; --r-l: 16px; }

/* ---------- échelle typographique ---------- */
.proto .p-large { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.012em; }
.proto .p-h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 8px; }
.proto .p-h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
.proto .p-sub { font-size: 15px; line-height: 21px; color: var(--tx2); margin-bottom: 20px; }
.proto .p-small { font-size: 13px; line-height: 18px; color: var(--tx3); }
.proto .p-step { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--b); margin: 18px 0 2px; }
.proto .p-section-title { margin: 26px 2px 10px; }
.proto .p-section-title b { font-size: 20px; line-height: 25px; font-weight: 700; }
.proto .p-h3 { font-size: 13px; font-weight: 600; color: var(--tx3); margin: 24px 4px 8px; }
.proto .p-row .lbl { font-size: 16px; line-height: 21px; font-weight: 500; }
.proto .p-row .hint { font-size: 13px; color: var(--tx3); }
.proto b, .proto .p-row .lbl { color: var(--tx); }
.proto .num, .proto .kpi-v, .proto .p-codes i, .proto [data-visit-count] { font-variant-numeric: tabular-nums; }

/* ---------- surfaces : fond, cartes, groupes ---------- */
.proto .p-screen { background: var(--pg); }
.proto .p-screen.white { background: #fff; }
.proto .p-card, .proto .p-group { background: var(--card); border-radius: var(--r-l); box-shadow: var(--e1), inset 0 0 0 1px var(--line); }
.proto .p-choice { border-radius: var(--r-m); box-shadow: var(--e1), inset 0 0 0 1px var(--line); }
.proto .p-choice.sel { box-shadow: inset 0 0 0 2px var(--b); }
.proto .p-banner { border-radius: var(--r-m); padding: 12px 14px; }
.proto .p-ico { border-radius: var(--r-s); }
.proto .p-ico.big { border-radius: var(--r-m); }
.proto .p-thumb { border-radius: var(--r-s); }
.proto .p-photo-card { border-radius: var(--r-l); }
.white .p-card, .white .p-group { box-shadow: inset 0 0 0 1px var(--line); }
.proto .p-foot { border-top: 1px solid var(--line); }

/* ---------- contrôles ---------- */
.proto .p-btn { height: var(--ctl-h); border-radius: var(--r-m); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; position: relative; transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, opacity 160ms ease; }
.proto .p-btn.small { height: 40px; border-radius: var(--r-s); font-size: 15px; padding: 0 14px; }
.proto .p-btn[disabled] { background: rgba(17, 17, 20, 0.06); color: rgba(17, 17, 20, 0.32) !important; box-shadow: none; }
.proto .p-btn.is-busy { pointer-events: none; color: transparent !important; }
.proto .p-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: pspin 700ms linear infinite; }
.proto .p-btn.soft.is-busy::after, .proto .p-btn.ghost.is-busy::after { border-color: rgba(17, 17, 20, 0.15); border-top-color: var(--b); }
.proto .p-chip { height: 36px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--sep); font-weight: 500; }
.proto .p-chip.sel { box-shadow: none; }
.proto .p-field { border-radius: var(--r-s); box-shadow: inset 0 0 0 1px var(--line); padding: 9px 14px 10px; }
.proto .p-field.focus { box-shadow: inset 0 0 0 2px var(--b); }
.proto .p-field.invalid { box-shadow: inset 0 0 0 2px var(--err); }
.proto .p-field .err-msg { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--err); margin-top: 4px; }
.proto .p-seg { border-radius: var(--r-s); }
.proto .p-seg button { border-radius: calc(var(--r-s) - 2px); }

/* focus clavier visible, net, au-dessus de tout */
.proto :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.proto .p-btn:focus-visible, .proto .p-choice:focus-visible, .proto .p-card:focus-visible { outline-offset: 3px; border-radius: var(--r-m); }

/* ---------- badges : jamais la couleur seule, toujours un mot ou un signe ---------- */
.proto .p-badge { height: 22px; border-radius: 11px; font-size: 12px; font-weight: 600; padding: 0 8px; }
.proto .p-badge.ok { background: var(--ok-bg); color: var(--ok); }
.proto .p-badge.warn { background: var(--warn-bg); color: var(--warn); }
.proto .p-badge.err { background: var(--err-bg); color: var(--err); }
.proto .p-badge.warn::before { content: "●"; font-size: 8px; margin-right: 2px; }
.proto .p-badge.err::before { content: "!"; font-weight: 800; margin-right: 2px; }

/* ---------- états système : vide, aucun résultat, chargement ---------- */
.p-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 36px 24px; border-radius: var(--r-l); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.p-empty .ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--pg); color: var(--tx3); margin-bottom: 6px; }
.p-empty b { font-size: 17px; }
.p-empty p { margin: 0 0 10px; font-size: 14px; line-height: 20px; color: var(--tx3); max-width: 260px; }
.p-skel { border-radius: var(--r-s); background: linear-gradient(90deg, rgba(17, 17, 20, 0.05) 0, rgba(17, 17, 20, 0.09) 50%, rgba(17, 17, 20, 0.05) 100%) 0 0 / 200% 100%; animation: pskel 1.1s linear infinite; }
@keyframes pskel { to { background-position: -200% 0; } }
.p-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.p-next li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); text-align: left; }
.p-next li:first-child { border-top: 0; }
.p-next .n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--b-soft); color: var(--b); font-variant-numeric: tabular-nums; }
.p-next b { display: block; font-size: 15px; }
.p-next span { font-size: 13px; color: var(--tx3); }
.p-check-list { list-style: none; margin: 0; padding: 0; }
.p-check-list label { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.p-check-list li:first-child label { border-top: 0; }
.p-check-list input { appearance: none; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 20, 0.25); flex: none; display: grid; place-items: center; transition: background-color 160ms, box-shadow 160ms; margin: 0; }
.p-check-list input:checked { background: var(--b); box-shadow: none; }
.p-check-list input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.p-check-list input:checked + span { color: var(--tx3); text-decoration: line-through; }

/* ---------- KPI ---------- */
.kpi-tile { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--e1), inset 0 0 0 1px var(--line); }
.kpi-tile .kpi-l { font-size: 13px; font-weight: 500; color: var(--tx3); }
.kpi-tile .kpi-v { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--tx); display: flex; align-items: baseline; gap: 6px; }
.kpi-tile .kpi-v small { font-size: 15px; font-weight: 600; color: var(--tx3); letter-spacing: 0; }
.kpi-tile .kpi-d { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); }
.kpi-tile .kpi-d.neutral { background: rgba(17, 17, 20, 0.05); color: var(--tx2); }

/* ---------- code à usage unique ---------- */
.proto .p-codes i { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--sep); background: var(--card); }
.proto .p-codes i.cur { box-shadow: inset 0 0 0 2px var(--b); position: relative; }
.proto .p-codes i.cur::after { content: ""; position: absolute; width: 2px; height: 26px; background: var(--b); animation: pblink 1s steps(1) infinite; }
.proto .p-codes i.on { box-shadow: inset 0 0 0 1.5px var(--b); }

@media (prefers-reduced-motion: reduce) {
  .p-skel, .proto .p-btn.is-busy::after, .proto .p-codes i.cur::after { animation: none; }
}

/* ---------- mode X-ray ---------- */
.xr-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.xr-box { position: absolute; box-shadow: 0 0 0 1.5px #7b61ff, inset 0 0 0 9999px rgba(123, 97, 255, 0.08); border-radius: 2px; }
.xr-parent { position: absolute; outline: 1px dashed rgba(123, 97, 255, 0.55); }
.xr-dim { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); background: #7b61ff; color: #fff; font: 600 11px/1 -apple-system, system-ui, sans-serif; padding: 3px 5px; border-radius: 4px; white-space: nowrap; }
.xr-line { position: absolute; background: #ff2d78; }
.xr-line.h { height: 1px; } .xr-line.v { width: 1px; }
.xr-line b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #ff2d78; color: #fff; font: 600 10.5px/1 -apple-system, system-ui, sans-serif; padding: 2px 4px; border-radius: 3px; white-space: nowrap; }
.proto.xr-on { cursor: crosshair; }
.xr-host { position: relative; }
.xr-panel { position: absolute; z-index: 30; top: 56px; right: calc(100% + 20px); width: 270px; padding: 14px 16px; border-radius: 16px; background: #1c1c1e; color: #f5f5f7; font: 13px/18px -apple-system, system-ui, sans-serif; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.4); text-align: left; }
.project:nth-child(even) .xr-panel, .laptop .xr-panel { right: auto; left: calc(100% + 20px); }
.laptop .xr-panel { left: auto; right: 16px; top: 16px; }
.xr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.xr-role { font-weight: 700; font-size: 15px; }
.xr-sel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #a1a1a6; }
.xr-panel dl { margin: 0; display: grid; gap: 6px; }
.xr-panel dl div { display: flex; justify-content: space-between; gap: 12px; }
.xr-panel dt { color: #a1a1a6; }
.xr-panel dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.xr-sw { width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); display: inline-block; }
.xr-pill { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.xr-pill.ok { background: rgba(48, 209, 88, 0.2); color: #30d158; }
.xr-pill.bad { background: rgba(255, 69, 58, 0.2); color: #ff6961; }
.xr-why { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #e5e5ea; }
.xr-why b { display: block; color: #bf9bff; font-size: 11px; margin-bottom: 2px; }
.xr-empty { color: #a1a1a6; }
.stage:has(.xr-active) .callout-col, .stage:has(.xr-active) .callout-svg { opacity: 0; transition: opacity 200ms; }
.btn[data-xray] { position: relative; }
.btn[data-xray][aria-pressed="true"] { background: #7b61ff !important; color: #fff !important; }
@media (max-width: 1100px) {
  .xr-panel, .project:nth-child(even) .xr-panel, .laptop .xr-panel { position: static; width: 100%; max-width: 360px; margin-top: 12px; }
}

/* Corrigé grâce au X-ray : texte blanc sur vert Wafa à 3,2:1. Le vert des boutons fonce d'un cran (4,8:1, AA). */
.proto[data-brand="wafa"] { --b-action: #00843a; }
.proto[data-brand="wafa"] .p-btn:not(.soft):not(.ghost):not(.dark):not(.accent):not([disabled]), .proto[data-brand="wafa"] .w-cta { background: var(--b-action); }
.proto[data-brand="wafa"] .w-cta { box-shadow: 0 8px 20px -10px rgba(0, 132, 58, 0.55); }