@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@600;700&family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap");

:root{
  color-scheme:light;
  --ink:#0E0E10;
  --paper:#F2EDE1;
  --soft:#E6E1D4;
  --surface:#FFF9F0;
  --surface-2:#F7F1E4;
  --surface-3:#EFE7D9;
  --line:rgba(14,14,16,.10);
  --line-strong:rgba(14,14,16,.18);
  --text:var(--ink);
  --muted:rgba(14,14,16,.64);
  --muted-2:rgba(14,14,16,.46);
  --lime:#CEFF1A;
  --green:#1a8a3a;
  --orange:#FF8C42;
  --danger:#D14A5A;
  --warning:#B88412;
  --success:#177245;
  --shadow:0 20px 56px rgba(14,14,16,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#0E0E10;
    --soft:#18181B;
    --surface:#17171A;
    --surface-2:#1F1F23;
    --surface-3:#26262B;
    --line:rgba(242,237,225,.10);
    --line-strong:rgba(242,237,225,.18);
    --text:#F2EDE1;
    --muted:rgba(242,237,225,.74);
    --muted-2:rgba(242,237,225,.48);
    --green:#97EDBE;
    --orange:#FFB37A;
    --danger:#FF7B86;
    --warning:#FFD16B;
    --success:#97EDBE;
    --shadow:0 28px 72px rgba(0,0,0,.40);
  }
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(206,255,26,.14), transparent 58%),
    radial-gradient(700px 420px at 100% 0%, rgba(14,14,16,.08), transparent 60%),
    var(--paper);
  color:var(--text);
  font-family:"Manrope",ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  body{
    background:
      radial-gradient(900px 520px at 0% 0%, rgba(206,255,26,.10), transparent 58%),
      radial-gradient(700px 420px at 100% 0%, rgba(242,237,225,.06), transparent 60%),
      var(--paper);
  }
}
::selection{background:rgba(206,255,26,.45);color:var(--ink)}
a{color:var(--text);text-decoration:none}
.link{color:var(--text);opacity:.76}
.container{max-width:960px;margin:0 auto;padding:16px}
.header,.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 16px;
  background:rgba(255,249,240,.84);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  backdrop-filter:blur(14px);
  z-index:20;
}
@media (prefers-color-scheme:dark){
  .header,.topbar{background:rgba(14,14,16,.84)}
}
.logo{
  display:inline-flex;
  align-items:flex-end;
  color:var(--text);
  font-family:"Unbounded",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.06em;
  text-transform:lowercase;
  line-height:1;
}
.logo::after{
  content:"";
  width:.12em;
  height:.12em;
  margin-left:.08em;
  margin-bottom:.09em;
  border-radius:2px;
  background:var(--lime);
}
.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(14,14,16,.04);
  font-size:11px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
@media (prefers-color-scheme:dark){
  .badge{background:rgba(242,237,225,.05)}
}
.h1{margin:12px 0 2px 0;font-family:"Unbounded",ui-sans-serif,sans-serif;letter-spacing:-.05em;text-transform:lowercase}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input,select,textarea{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:14px;
  color:var(--text);
  padding:12px 14px;
  flex:1;
  min-width:220px;
  font:inherit;
  accent-color:var(--lime);
}
.btn{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:14px;
  color:var(--text);
  padding:12px 16px;
  cursor:pointer;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.btn-primary{
  background:var(--lime);
  color:var(--ink);
  border-color:rgba(14,14,16,.10);
}
.btn-accent{background:var(--soft);border-color:var(--line)}
.small{color:var(--muted);font-size:12px}
.qr{width:280px;height:280px;image-rendering:pixelated}
.qr-frame{
  display:inline-block;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--lime),var(--paper),var(--soft));
  background-size:200% 100%;
  animation:barber 4s ease infinite;
}
@keyframes barber{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left}

.soki-layout-dock{
  max-width:1220px;
  margin:22px auto 0;
  padding:0 16px 20px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.soki-layout-pencil{
  position:static;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:var(--lime);
  color:#0E0E10;
  box-shadow:0 12px 28px rgba(14,14,16,.14);
  font-family:"Unbounded",ui-sans-serif,sans-serif;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.soki-layout-pencil.active{
  background:#0E0E10;
  color:var(--lime);
}
.soki-layout-toolbar{
  position:static;
  transform:none;
  display:flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 42px rgba(14,14,16,.14);
}
.soki-layout-toolbar[hidden]{display:none!important}
.soki-layout-toolbar span{
  padding:0 8px;
  color:var(--muted);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
}
.soki-layout-toolbar button,
.soki-layout-controls button{
  min-height:30px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--surface-2);
  color:var(--text);
  padding:6px 10px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.soki-layout-controls{
  position:absolute;
  top:10px;
  right:10px;
  z-index:30;
  display:none;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:min(100%,320px);
}
body.soki-layout-editing [data-soki-layout-id]{
  outline:1px dashed color-mix(in srgb,var(--lime) 70%,var(--line));
  outline-offset:4px;
}
body.soki-layout-editing [data-soki-layout-id].soki-layout-draggable{
  cursor:grab;
}
body.soki-layout-editing [data-soki-layout-id].soki-layout-dragging{
  opacity:.52;
  cursor:grabbing;
}
body.soki-layout-editing [data-soki-layout-id].soki-layout-drop-target{
  outline-style:solid;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--lime) 34%,transparent);
}
.soki-layout-drag-handle{
  background:var(--lime)!important;
  color:#0E0E10!important;
}
body.soki-layout-editing .soki-layout-controls{display:flex}
.soki-layout-hidden{display:none!important}
body.soki-layout-editing .soki-layout-hidden{
  display:block!important;
  opacity:.42;
  filter:grayscale(.45);
}
body.soki-layout-editing .soki-layout-hidden::after{
  content:"encart masqué";
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:rgba(14,14,16,.52);
  color:#F2EDE1;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:none;
}
@media(max-width:720px){
  .soki-layout-dock{justify-content:center;padding-bottom:16px}
  .soki-layout-pencil{width:42px;height:42px;font-size:20px}
  .soki-layout-toolbar{
    transform:none;
    max-width:none;
    overflow:auto;
    justify-content:flex-start;
  }
  .soki-layout-toolbar span{display:none}
  .soki-layout-controls{left:10px;right:10px;justify-content:center}
}
@media print{
  .soki-layout-dock,
  .soki-layout-pencil,
  .soki-layout-toolbar,
  .soki-layout-controls{display:none!important}
}