/*
 * Kit d'interface « Harissa » : vitrine, espace établissement, super admin (SPEC §19).
 * Règles : écrit pour 360 px, @media en min-width uniquement (600 / 960 px), propriétés logiques uniquement (RTL).
 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 16px;
  line-height: 24px;
}

[dir="rtl"] body, body[dir="rtl"] { line-height: 28px; }

h1, h2, h3, p { margin-block: 0; }
h1 { font-size: 32px; line-height: 38px; font-weight: 800; }
h2 { font-size: 24px; line-height: 30px; font-weight: 800; }
h3 { font-size: 20px; line-height: 26px; font-weight: 600; }
a { color: var(--ui-text); }
img, svg { max-inline-size: 100%; }

:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }

.ui-muted { color: var(--ui-text-muted); }
.ui-small { font-size: 14px; line-height: 20px; }
.ui-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Mise en page ---------- */
.ui-page { min-block-size: 100dvh; display: flex; flex-direction: column; }
.ui-main { flex-grow: 1; padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-10); display: flex; flex-direction: column; gap: var(--ui-space-4); inline-size: 100%; margin-inline: auto; }
.ui-main--narrow { max-inline-size: 480px; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-stack--tight { gap: var(--ui-space-2); }
.ui-row { display: flex; align-items: center; gap: var(--ui-space-3); }
.ui-row--between { justify-content: space-between; }

.ui-header {
  min-block-size: 56px; display: flex; align-items: center; gap: var(--ui-space-2);
  padding-inline: var(--ui-space-4); background: var(--ui-surface); border-block-end: 1px solid var(--ui-border);
}
.ui-header h1 { font-size: 18px; line-height: 24px; font-weight: 600; flex-grow: 1; margin: 0; }

.ui-brand { display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); gap: var(--ui-space-2); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; direction: ltr; }
.ui-brand b { color: var(--ui-action); font-weight: 800; }
.ui-brand svg { inline-size: 32px; block-size: 32px; flex-shrink: 0; }
.ui-brand--compact { min-inline-size: var(--ui-touch-min); justify-content: center; }
.ui-brand--compact span { display: none; }
.ui-header-start { display: flex; align-items: center; gap: var(--ui-space-1); min-inline-size: 0; max-inline-size: 70%; }
/* Bandeau « Modifications non publiées · Publier » sous l'en-tête (D-213). */
.ui-publishbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-4); background: var(--ui-warning-soft); color: var(--ui-warning);
  font-size: 15px; line-height: 22px; font-weight: 600; border-block-end: 1px solid var(--ui-border);
}

/* ---------- Boutons ---------- */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
  min-block-size: var(--ui-control); padding-inline: var(--ui-space-5); border: 1.5px solid transparent;
  border-radius: var(--ui-radius-button); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--ui-action); color: var(--ui-on-action);
}
.ui-btn:hover { background: var(--ui-action-press); }
.ui-btn--secondary { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-text); }
.ui-btn--secondary:hover { background: var(--ui-neutral-100); }
.ui-btn--ghost { background: transparent; color: var(--ui-text); text-decoration: underline; }
.ui-btn--ghost:hover { background: var(--ui-neutral-100); }
.ui-btn--danger { background: var(--ui-surface); color: var(--ui-error); border-color: var(--ui-error); }
.ui-btn--block { inline-size: 100%; }
.ui-btn[disabled], .ui-btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.ui-btn--google { background: #fff; color: #1F1F1F; border: 1px solid #747775; font-weight: 500; }
.ui-btn--google:hover { background: #F8F8F8; }

/* ---------- Champs ---------- */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field label, .ui-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.ui-input, .ui-select, .ui-textarea {
  inline-size: 100%; min-block-size: var(--ui-control); padding-inline: 14px; border: 1.5px solid var(--ui-border-input);
  border-radius: var(--ui-radius-input); background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 16px;
}
.ui-textarea { padding-block: 12px; min-block-size: 96px; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--ui-text); box-shadow: 0 0 0 4px var(--ui-harissa-200); }
.ui-input[aria-invalid="true"] { border-color: var(--ui-error); }
/* Mot de passe avec bouton « œil » (D-206). */
.ui-password { position: relative; }
.ui-password .ui-input { padding-inline-end: 52px; }
.ui-password__toggle {
  position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 48px; min-block-size: 48px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none;
  color: var(--ui-text-muted); border-radius: var(--ui-radius-input); cursor: pointer;
}
.ui-password__toggle:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: -2px; }
.ui-password__toggle[aria-pressed="true"] .ui-password__show, .ui-password__toggle[aria-pressed="false"] .ui-password__hide { display: none; }
.ui-hint { font-size: 13px; line-height: 18px; color: var(--ui-text-muted); }
.ui-error { font-size: 14px; line-height: 20px; color: var(--ui-error); display: flex; gap: 6px; align-items: flex-start; }
.ui-error::before { content: "⚠"; }
.ui-check { display: flex; align-items: center; gap: var(--ui-space-3); min-block-size: var(--ui-touch-min); }
.ui-check input { inline-size: 22px; block-size: 22px; accent-color: var(--ui-action); }

.ui-switch { position: relative; inline-size: 52px; block-size: 32px; flex-shrink: 0; }
.ui-switch input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ui-switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--ui-switch-off); transition: background 0.15s; pointer-events: none; }
.ui-switch span::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 4px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: #fff; transition: inset-inline-start 0.15s; }
.ui-switch input:checked + span { background: var(--ui-switch-on); }
.ui-switch input:checked + span::after { inset-inline-start: 24px; }
.ui-switch input:focus-visible + span { outline: 2px solid var(--ui-focus-ring); outline-offset: 2px; }

/* ---------- Cartes, listes, pastilles ---------- */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); padding: var(--ui-space-5); display: flex; flex-direction: column; gap: var(--ui-space-3); }
.ui-list { display: flex; flex-direction: column; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); overflow: hidden; }
.ui-list > * + * { border-block-start: 1px solid var(--ui-border); }
.ui-list-item { display: flex; align-items: center; gap: var(--ui-space-3); min-block-size: 56px; padding: var(--ui-space-2) var(--ui-space-4); color: inherit; text-decoration: none; }
.ui-list-item > :first-child { flex-grow: 1; min-inline-size: 0; }

.ui-pill {
  display: inline-flex; align-items: center; min-block-size: 26px; padding-inline: 10px; border-radius: 13px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--ui-neutral-100); color: var(--ui-text);
}
.ui-pill--ok { background: var(--ui-success-soft); color: #14562F; }
.ui-pill--warn { background: var(--ui-warning-soft); color: var(--ui-warning); }
.ui-pill--trial { background: var(--ui-saffron-500); color: var(--ui-neutral-900); }
.ui-pill--dark { background: var(--ui-sold-out); color: #fff; }

.ui-chip { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-block-size: var(--ui-touch-min); padding-inline: 14px; border-radius: 20px; border: 1px solid var(--ui-neutral-300); background: var(--ui-surface); font-size: 14px; white-space: nowrap; }
.ui-chip[aria-pressed="true"], .ui-chip--on { background: var(--ui-text); color: #fff; border-color: var(--ui-text); }

.ui-alert { display: flex; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-input); font-size: 15px; line-height: 22px; }
.ui-alert--error { background: var(--ui-error-soft); color: var(--ui-error); }
.ui-alert--ok { background: var(--ui-success-soft); color: #14562F; }
.ui-alert--info { background: var(--ui-info-soft); color: var(--ui-info); }
.ui-alert--warn { background: var(--ui-warning-soft); color: var(--ui-warning); }

.ui-divider { display: flex; align-items: center; gap: var(--ui-space-3); color: var(--ui-text-muted); font-size: 14px; }
.ui-divider::before, .ui-divider::after { content: ""; flex-grow: 1; block-size: 1px; background: var(--ui-border); }

.ui-empty { text-align: center; padding: var(--ui-space-10) var(--ui-space-5); color: var(--ui-text-muted); }
.ui-skeleton { background: var(--ui-neutral-100); border-radius: var(--ui-radius-thumb); min-block-size: 16px; animation: ui-pulse 1.4s ease-in-out infinite; }
@keyframes ui-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; } .ui-switch span, .ui-switch span::after { transition: none; } }

/* ---------- Onglets, barre d'action, navigation basse ---------- */
.ui-tabs { display: flex; padding: 4px; background: var(--ui-neutral-100); border-radius: 24px; }
.ui-tabs > * { flex: 1 1 0; min-block-size: var(--ui-touch-min); display: flex; align-items: center; justify-content: center; border-radius: 20px; color: var(--ui-text-muted); text-decoration: none; font-size: 15px; background: transparent; border: 0; font-family: inherit; }
.ui-tabs > [aria-selected="true"], .ui-tabs > [aria-current="page"] { background: var(--ui-surface); color: var(--ui-text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }

.ui-actionbar { position: sticky; inset-block-end: 0; display: flex; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); background: var(--ui-surface); border-block-start: 1px solid var(--ui-border); }
.ui-actionbar > * { flex: 1 1 0; }

.ui-bottomnav { position: sticky; inset-block-end: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); block-size: var(--ui-bottom-nav); background: var(--ui-surface); border-block-start: 1px solid var(--ui-border); }
.ui-bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--ui-text-muted); text-decoration: none; }
.ui-bottomnav a[aria-current="page"] { color: var(--ui-action); font-weight: 700; }
.ui-bottomnav svg { inline-size: 22px; block-size: 22px; }

/* ---------- Bottom sheet (<dialog>) et toasts ---------- */
dialog.ui-sheet {
  inline-size: 100%; max-inline-size: 100%; margin: auto 0 0; padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-6);
  border: 0; border-start-start-radius: var(--ui-radius-sheet); border-start-end-radius: var(--ui-radius-sheet);
  background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-sheet); max-block-size: 90dvh; overflow: auto;
}
dialog.ui-sheet::backdrop { background: rgb(0 0 0 / 0.45); }

.ui-toasts { position: fixed; inset-inline: var(--ui-space-4); inset-block-end: calc(var(--ui-bottom-nav) + var(--ui-space-3)); z-index: 50; display: flex; flex-direction: column; gap: var(--ui-space-2); pointer-events: none; }
.ui-toast { padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--ui-radius-input); background: var(--ui-neutral-900); color: #fff; font-size: 15px; pointer-events: auto; }

/* ---------- Tableau → cartes sous 600 px (super admin) ---------- */
.ui-table { inline-size: 100%; border-collapse: collapse; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); overflow: hidden; }
.ui-table th, .ui-table td { padding: var(--ui-space-3) var(--ui-space-4); text-align: start; border-block-end: 1px solid var(--ui-border); font-size: 15px; }
.ui-table th { background: var(--ui-neutral-100); color: var(--ui-text-muted); font-size: 13px; font-weight: 700; }
.ui-table-wrap { overflow-x: auto; }

/* La barre latérale n'existe qu'à partir de 960 px (en dessous : navigation basse) */
.ui-sidebar { display: none; }

/* ---------- Tablette et ordinateur ---------- */
@media (min-width: 600px) {
  .ui-main { padding-inline: var(--ui-space-8); }
  .ui-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-4); }
  dialog.ui-sheet { max-inline-size: 520px; margin: auto; border-radius: var(--ui-radius-sheet); }
}
@media (min-width: 960px) {
  .ui-main { max-inline-size: 960px; }
  .ui-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-block-size: 100dvh; }
  .ui-sidebar { display: flex; position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--ui-space-5) var(--ui-space-3); background: var(--ui-surface); border-inline-end: 1px solid var(--ui-border); display: flex; flex-direction: column; gap: 2px; }
  .ui-sidebar a { display: flex; align-items: center; gap: var(--ui-space-3); min-block-size: 44px; padding-inline: var(--ui-space-3); border-radius: 12px; color: var(--ui-text-muted); text-decoration: none; font-size: 15px; }
  .ui-sidebar a[aria-current="page"] { background: var(--ui-neutral-100); color: var(--ui-text); font-weight: 700; }
  .ui-sidebar a:not(.ui-brand) svg { inline-size: 22px; block-size: 22px; flex-shrink: 0; }
  .ui-sidebar .ui-brand { margin-block-end: var(--ui-space-3); }
  .ui-shell .ui-header .ui-brand { display: none; }
  .ui-sidebar-sep { border: 0; border-block-start: 1px solid var(--ui-border); margin: var(--ui-space-2) var(--ui-space-3); }
  .ui-bottomnav { display: none; }
  .ui-toasts { inset-block-end: var(--ui-space-4); }
}

/* ---------- Progression (inscription) ---------- */
.ui-progress { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.ui-progress-bars { display: flex; gap: 6px; }
.ui-progress-bars span { flex: 1 1 0; block-size: 4px; border-radius: 2px; background: var(--ui-border); }
.ui-progress-bars .is-done { background: var(--ui-action); }

/* ---------- Écrans de l'espace ---------- */
.ui-fab { position: fixed; inset-inline-end: var(--ui-space-4); inset-block-end: calc(var(--ui-bottom-nav) + var(--ui-space-4)); z-index: 15; display: inline-flex; align-items: center; gap: var(--ui-space-2); min-block-size: 52px; padding-inline: var(--ui-space-5); border-radius: 26px; background: var(--ui-action); color: var(--ui-on-action); font-weight: 600; text-decoration: none; box-shadow: var(--ui-shadow-fab); }
.ui-thumb { inline-size: 56px; block-size: 56px; flex-shrink: 0; border-radius: var(--ui-radius-thumb); background: var(--ui-neutral-100); object-fit: cover; }
.ui-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--ui-neutral-400); }
.ui-item { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); }
.ui-item > a { flex-grow: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--ui-space-3); color: inherit; text-decoration: none; min-block-size: var(--ui-touch-min); }
.ui-item.is-sold-out .ui-item-name { color: var(--ui-text-muted); }
.ui-item-name { font-weight: 600; overflow-wrap: anywhere; }
.ui-item-sub { font-size: 14px; color: var(--ui-text-muted); }
.ui-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-neutral-100); }
.ui-section-head h2 { font-size: 18px; line-height: 24px; }
.ui-chips { display: flex; gap: var(--ui-space-2); overflow-x: auto; padding-block-end: var(--ui-space-1); scrollbar-width: none; }
.ui-chips > * { flex-shrink: 0; }
.ui-tab-dot { display: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ui-saffron-500); margin-inline-start: 6px; }
.has-missing .ui-tab-dot { display: inline-block; }
.ui-photo { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-2); align-items: flex-start; }
.ui-photo img { inline-size: 100%; max-block-size: 220px; object-fit: cover; border-radius: var(--ui-radius-card); background: var(--ui-neutral-100); }
.ui-photo--logo img, .ui-photo--favicon img { inline-size: 96px; block-size: 96px; object-fit: contain; padding: var(--ui-space-2); border: 1px solid var(--ui-border); }
.ui-photo--favicon img { inline-size: 64px; block-size: 64px; }
.ui-photo--item img { inline-size: auto; max-inline-size: min(100%, 320px); block-size: auto; max-block-size: 240px; object-fit: contain; }
.ui-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ui-space-3); }
.ui-hours-row { display: grid; grid-template-columns: 1fr; gap: var(--ui-space-2); padding-block: var(--ui-space-2); border-block-end: 1px solid var(--ui-border); }
.ui-hours-row .ui-row { flex-wrap: wrap; }
.ui-hours-row input[type=time] { max-inline-size: 140px; }
.ui-variant { display: grid; grid-template-columns: 1fr; gap: var(--ui-space-2); padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-input); }
.ui-radio-card { display: flex; gap: var(--ui-space-3); align-items: flex-start; padding: var(--ui-space-4); border: 1.5px solid var(--ui-border-input); border-radius: var(--ui-radius-card); background: var(--ui-surface); }
.ui-radio-card:has(input:checked) { border-color: var(--ui-text); box-shadow: 0 0 0 3px var(--ui-harissa-200); }
.ui-radio-card input { inline-size: 22px; block-size: 22px; margin-block-start: 2px; accent-color: var(--ui-action); }
.ui-url-prefix { direction: ltr; color: var(--ui-text-muted); font-size: 14px; overflow-wrap: anywhere; }
.ui-reorder-row { display: flex; align-items: center; gap: var(--ui-space-2); min-block-size: 56px; padding: var(--ui-space-2) var(--ui-space-3); background: var(--ui-surface); }
.ui-reorder-row [data-handle] { cursor: grab; touch-action: none; inline-size: var(--ui-touch-min); block-size: var(--ui-touch-min); display: flex; align-items: center; justify-content: center; color: var(--ui-text-muted); }
.ui-iconbtn { inline-size: var(--ui-touch-min); block-size: var(--ui-touch-min); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 50%; color: var(--ui-text); font-size: 18px; cursor: pointer; }
.ui-iconbtn:disabled { opacity: 0.3; cursor: default; }
.ui-iconbtn:hover:not(:disabled) { background: var(--ui-neutral-100); }
progress.ui-progressbar { inline-size: 100%; block-size: 6px; accent-color: var(--ui-action); }
[hidden] { display: none !important; }
.ui-tabs > [role=tab] .ui-tab-label { display: inline-flex; align-items: center; }

/* ---------- Personnalisateur ---------- */
.ui-chip[aria-selected="true"] { background: var(--ui-text); color: #fff; border-color: var(--ui-text); }
.ui-tabs > [aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-text); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.ap-main { max-inline-size: none; padding-inline: 0; padding-block-start: 0; }
.ap-bar { position: sticky; inset-block-start: 0; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-4); background: var(--ui-surface); border-block-end: 1px solid var(--ui-border); }
.ap-bar h1 { flex: 1 1 auto; font-size: 18px; line-height: 24px; }
.ap-stage { display: flex; flex-direction: column; }
.ap-preview { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-neutral-100); }
.ap-preview-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ui-space-2); }
.ap-preview-tools .ui-tabs > * { min-inline-size: 64px; padding-inline: var(--ui-space-3); }
.ap-phone { --w: 360px; inline-size: min(100%, var(--w)); block-size: 56dvh; border: 8px solid var(--ui-neutral-900); border-radius: 32px; overflow: hidden; background: #fff; }
.ap-phone iframe { inline-size: 100%; block-size: 100%; border: 0; }
.ap-panel { padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-4); }
/* Écran QR : aperçu de marque ou nu selon la case « QR de marque » (D-218), sans JS. */
.qr-preview { background: #fff; padding: 12px; border: 1px solid var(--ui-border); border-radius: 12px; }
.qr-preview--plain, body:has([data-qr-brand]:not(:checked)) .qr-preview--brand { display: none; }
body:has([data-qr-brand]:not(:checked)) .qr-preview--plain { display: block; }
.ap-tabs { padding-block-end: var(--ui-space-2); }
.ap-section { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ap-h { font-size: 17px; line-height: 22px; }
.ap-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
.ap-theme { position: relative; display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-2); border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); cursor: pointer; }
.ap-theme:has(input:checked) { border-color: var(--ui-text); box-shadow: 0 0 0 3px var(--ui-harissa-200); }
.ap-theme input { position: absolute; opacity: 0; pointer-events: none; }
.ap-theme img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--ui-radius-thumb); background: var(--ui-neutral-100); }
.ap-theme span { display: flex; flex-direction: column; gap: 2px; }
.ap-presets { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.ap-preset { position: relative; display: flex; flex-direction: column; gap: 6px; min-inline-size: 104px; padding: var(--ui-space-3); border: 1.5px solid var(--ui-border); border-radius: var(--ui-radius-input); background: var(--ui-surface); cursor: pointer; }
.ap-preset:has(input:checked) { border-color: var(--ui-action); box-shadow: 0 0 0 3px var(--ui-harissa-100); }
.ap-preset input { position: absolute; opacity: 0; pointer-events: none; }
.ap-swatches { display: flex; gap: 4px; }
.ap-swatches i { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.15); }
.ap-color { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-2) var(--ui-space-4); }
.ap-color + .ap-color { border-block-start: 1px solid var(--ui-border); }
.ap-color-pick input { appearance: none; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--ui-border-input); border-radius: 50%; background: none; cursor: pointer; }
.ap-color-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.ap-color-pick input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ap-color-pick input::-moz-color-swatch { border: 0; border-radius: 50%; }
.ap-dot { display: none; }
.ap-color-text { display: flex; flex-direction: column; min-inline-size: 0; }
.ap-warn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; }
@media (min-width: 960px) {
  .ap-stage { display: grid; grid-template-columns: 440px minmax(0, 1fr); align-items: start; min-block-size: calc(100dvh - 130px); }
  .ap-panel { order: 1; border-inline-end: 1px solid var(--ui-border); }
  .ap-preview { order: 2; position: sticky; inset-block-start: 64px; min-block-size: calc(100dvh - 64px); justify-content: center; }
  .ap-phone { block-size: min(80dvh, 780px); }
}

/* ---------- Histogramme et grille de chiffres ---------- */
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
.ui-grid-2 .ui-card { padding: var(--ui-space-4); gap: 2px; }
.ui-bars { margin: 0; }
.ui-bars-plot { display: flex; align-items: flex-end; gap: 2px; block-size: 120px; border-block-end: 1px solid var(--ui-border); }
.ui-bar { flex: 1 1 0; min-inline-size: 2px; block-size: max(var(--h), 2px); background: var(--ui-action); border-start-start-radius: 3px; border-start-end-radius: 3px; }
.ui-bars-axis { display: flex; justify-content: space-between; margin-block-start: var(--ui-space-1); }

/* Bouton qui se présente comme un lien (déconnexion en POST). */
.ui-logout { margin: 0; display: contents; }
.ui-linkbtn { font: inherit; color: inherit; cursor: pointer; }
.ui-linkbtn:not(.ui-btn):not(.ui-list-item) { background: transparent; border: 0; text-align: start; padding-inline: var(--ui-space-3); min-block-size: 44px; border-radius: 12px; display: flex; align-items: center; inline-size: 100%; color: var(--ui-text-muted); }
.ui-linkbtn.ui-list-item { background: transparent; border: 0; text-align: start; inline-size: 100%; }
.ui-linkbtn.ui-list-item:hover, .ui-linkbtn:not(.ui-btn):hover { background: var(--ui-neutral-100); }