/* ══ Ô'peuple — système de design ══════════════════════════════════ */
:root{
  --blue:#0A7CFF; --blue-d:#0A5BC4; --blue-t:#F2F7FF; --blue-c:#EAF3FF;
  --green:#1BA34A; --green-d:#127A38; --green-t:#E7F7EC;
  --red:#E4262C; --red-d:#B0242A; --red-t:#FDECEC;
  --amber:#F5A623; --amber-d:#8A6100; --amber-t:#FFF6E0;
  --yellow:#E8C400; --yellow-s:#F5C400;
  --purple:#7B3FE4; --magenta:#8E3BA8; --teal:#4FC3B3; --navy:#1B2A78;
  --ink:#1C1C1E; --ink-2:#3C3C43; --ink-3:#6E6E73; --ink-4:#8A8A8E; --ink-5:#9A9AA0;
  --surface:#fff; --canvas:#F5F5F7; --canvas-2:#F2F2F5; --field:#FBFBFC;
  --line:#E3E3E6; --line-2:#EDEDF0; --line-3:#E8E8EA; --line-4:#F2F2F5;
  --chev:#C9C9CE;
  --sh-card:0 1px 3px rgba(0,0,0,.05); --sh-card-2:0 1px 3px rgba(0,0,0,.06);
  --hatch:repeating-linear-gradient(135deg,#E4E7EA 0 8px,#EEF0F2 8px 16px);
  --font:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);background:#0E1114;color:#fff;overflow:hidden}
button,input,textarea{font-family:inherit}
a{color:var(--blue);text-decoration:none}
@keyframes scr{from{opacity:0}to{opacity:1}}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ══ Coque présentation (desktop) ════════════════════════════════ */
.shell{display:flex;height:100vh;height:100dvh}

.rail{width:264px;flex:none;background:#161B21;border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;padding:24px 16px;gap:20px;overflow-y:auto}
.rail img{height:26px;width:auto;display:block}
.spaces{display:flex;background:rgba(255,255,255,.06);border-radius:10px;padding:3px;gap:3px}
.spaces button{flex:1;border:0;cursor:pointer;border-radius:8px;padding:8px 4px;font-size:12px;
  font-weight:600;white-space:nowrap;background:transparent;color:rgba(255,255,255,.55)}
.spaces button[aria-pressed=true]{background:var(--blue);color:#fff}
.navlist{display:flex;flex-direction:column;gap:2px}
.navlist button{display:flex;align-items:center;gap:10px;text-align:left;border:0;cursor:pointer;
  border-radius:8px;padding:8px 10px;font-size:13px;font-weight:500;background:transparent;color:rgba(255,255,255,.55)}
.navlist button:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.navlist button[aria-current=true]{background:rgba(255,255,255,.09);color:#fff}
.navlist .dot{width:6px;height:6px;border-radius:50%;flex:none;background:rgba(255,255,255,.2)}
.navlist button[aria-current=true] .dot{background:#00B7D8}
.rail-foot{margin-top:auto;font-size:11px;line-height:1.6;color:rgba(255,255,255,.35)}

.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:16px;min-width:0}
body:not(.clean) .stage{padding:22px 20px}
.stage-title{display:flex;align-items:baseline;gap:11px;flex:none}
.stage-title b{font-size:16px;font-weight:600}
.stage-title span{font-size:12px;color:rgba(255,255,255,.38)}

/* ── Cadre iOS : taille logique fixe, mise à l'échelle pour remplir la scène ── */
.device-fit{position:relative;flex:none}
.device{width:402px;height:874px;position:absolute;top:0;left:0;transform-origin:top left;
  background:#1C1C1E;border-radius:56px;padding:11px;
  box-shadow:0 0 0 2px #2C2C2E,0 26px 60px rgba(0,0,0,.55)}
.screen{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;
  background:var(--canvas);color:var(--ink)}
.notch{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:118px;height:33px;
  background:#000;border-radius:20px;z-index:200;pointer-events:none}
.statusbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:190;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;padding:16px 32px 0;
  font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.2px}
.statusbar.on-dark{color:#fff}
.sb-right{display:flex;align-items:center;gap:5px}
.sb-bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.sb-bars i{width:3px;border-radius:1px;background:currentColor;display:block}
.sb-batt{width:24px;height:12px;border:1.4px solid currentColor;border-radius:3px;padding:1.5px;opacity:.9}
.sb-batt i{display:block;height:100%;width:78%;background:currentColor;border-radius:1px}
.homebar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:140px;height:5px;
  border-radius:3px;background:rgba(0,0,0,.28);z-index:210;pointer-events:none}

.view{position:absolute;inset:0;animation:scr .28s ease}
.view.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ══ Primitives ══════════════════════════════════════════════════ */
.pad{padding:0 18px}
.h1{font-size:24px;font-weight:700;letter-spacing:-.4px}
.h2{font-size:17px;font-weight:700}
.sub{font-size:14px;color:#7C7C82}
.muted{font-size:13.5px;color:var(--ink-3)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--ink-5)}
.section{font-size:12.5px;font-weight:700;color:var(--ink-4);letter-spacing:.4px;margin:22px 18px 9px}
.pretty{text-wrap:pretty}
.mono{font-family:var(--mono)}

.topbar{padding:0 18px;display:flex;align-items:center;gap:12px}
.back{border:0;background:none;cursor:pointer;padding:0;font-size:22px;line-height:1;color:var(--ink)}
.brand{height:26px;width:auto;display:block}

.btn{border:0;cursor:pointer;height:52px;border-radius:12px;background:var(--blue);color:#fff;
  font-size:16px;font-weight:600;width:100%;display:flex;align-items:center;justify-content:center}
.btn:active{filter:brightness(.94)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-soft{background:var(--canvas-2);color:var(--ink-2);height:48px;font-size:15px}
.btn-danger{background:var(--red);color:#fff;font-weight:700}
.btn-outline{background:var(--surface);color:var(--blue);border:1.5px solid var(--blue);height:48px;font-size:15.5px}

.field{height:52px;width:100%;border-radius:12px;border:1px solid var(--line);background:var(--field);
  padding:0 15px;font-size:15.5px;outline:none;color:var(--ink)}
.field:focus{border-color:var(--blue)}
textarea.field{height:auto;min-height:104px;padding:13px 15px;line-height:1.45;resize:none;font-size:15px}
.label{display:flex;flex-direction:column;gap:6px}
.label>span{font-size:13px;font-weight:600}

.card{background:var(--surface);border-radius:14px;padding:15px;box-shadow:var(--sh-card)}
.card-lg{border-radius:16px;padding:16px;box-shadow:var(--sh-card-2)}
.list{display:flex;flex-direction:column;gap:10px;padding:14px 16px 0}
.row{display:flex;align-items:center;gap:12px;text-align:left;border:0;background:var(--surface);
  cursor:pointer;border-radius:14px;padding:14px;box-shadow:var(--sh-card);width:100%}
.row .grow{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.chev{font-size:19px;color:var(--chev);flex:none}
.chip-sq{width:34px;height:34px;border-radius:9px;flex:none}

.badge{font-size:11px;font-weight:700;padding:4px 9px;border-radius:7px}
.pill{flex:none;white-space:nowrap;cursor:pointer;height:32px;padding:0 13px;border-radius:16px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.pill[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pills{display:flex;gap:7px;padding:14px 18px 0;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}

.seg{display:flex;background:var(--canvas-2);border-radius:11px;padding:3px;gap:3px;margin:14px 18px 0}
.seg button{flex:1;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis;border:0;cursor:pointer;
  border-radius:9px;height:36px;font-size:12.5px;font-weight:600;white-space:nowrap;background:transparent;color:var(--ink-4)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink)}

.switch{width:51px;height:31px;border-radius:16px;border:0;cursor:pointer;padding:3px;flex:none;
  display:flex;justify-content:flex-start;background:var(--line);transition:background .18s}
.switch i{width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:block;transition:transform .18s}
.switch[aria-checked=true]{background:var(--green)}
.switch[aria-checked=true] i{transform:translateX(20px)}
.switch.danger[aria-checked=true]{background:var(--red)}

.hatch{background:var(--hatch)}
.ph-tag{font:11px/1 var(--mono);color:var(--ink-3);background:rgba(255,255,255,.9);padding:5px 8px;border-radius:6px}

/* ── Barre d'onglets ── */
.tabbar{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 24px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid #EAEAEC;display:flex;z-index:60}
.tabbar button{flex:1;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:5px;padding:4px 0;color:var(--ink-5)}
.tabbar button[aria-current=true]{color:var(--blue)}
.tabbar .ic{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent}
.tabbar button[aria-current=true] .ic{background:var(--blue-c)}
.tabbar img{width:23px;height:23px;object-fit:contain;opacity:.6}
.tabbar button[aria-current=true] img{opacity:1}
.tabbar span{font-size:10.5px;font-weight:500;white-space:nowrap}

.fab{position:absolute;right:16px;bottom:104px;width:56px;height:56px;border-radius:50%;border:0;
  cursor:pointer;background:var(--purple);box-shadow:0 8px 22px rgba(123,63,228,.38);
  font-size:15px;font-weight:700;color:#fff;z-index:70}
.toast{position:absolute;left:16px;right:16px;bottom:104px;padding:13px 15px;border-radius:14px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;
  box-shadow:0 12px 28px rgba(0,0,0,.28);animation:up .28s ease;z-index:80}

iframe{border:0;display:block;background:#EDEDED}

/* ══ Mode client : uniquement le téléphone ══════════════════════ */
body.clean .rail{display:none}
body.clean .stage-title{display:none}

/* Bascule discrète vers la navigation de démo */
.ctrlbar{position:fixed;left:14px;bottom:14px;z-index:500;display:flex;gap:8px}
.presenter{display:flex;align-items:center;gap:8px;
  height:34px;padding:0 12px;border-radius:17px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.85);font-size:12px;font-weight:600;font-family:var(--font);
  opacity:.22;transition:opacity .18s,background .18s}
.presenter:hover,.presenter:focus-visible{opacity:1;background:rgba(255,255,255,.13)}
.presenter i{display:grid;grid-template-columns:repeat(2,4px);gap:2px;font-style:normal}
.presenter i b{display:block;width:4px;height:4px;border-radius:1px;background:currentColor}

/* ══ Mode application (mobile / PWA) ═════════════════════════════ */
@media (max-width:1080px){ .rail{display:none} .stage{padding:0} }
@media (max-width:900px), (display-mode:standalone){
  body{background:#fff;overflow:auto}
  .shell{display:block;height:100dvh}
  .stage{padding:0;gap:0;height:100dvh}
  .stage-title{display:none}
  .device{width:100%;height:100dvh;max-height:none;border-radius:0;padding:0;box-shadow:none;background:#fff}
  .screen{border-radius:0}
  .notch,.homebar{display:none}
  .statusbar{height:env(safe-area-inset-top,0px)}
  .ctrlbar{display:none}
  .device-fit{width:100%!important;height:100dvh!important;position:relative}
  .device{position:absolute;inset:0;width:100%;height:100%;transform:none!important}
  .tabbar{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}