/* ——— Aperçu responsive ——— */
/* H5 : ces règles (body.home-app) sont la couche live. Ne pas les fusionner
   dans home-page.css / lib/home-css — spécificité et plein écran en dépendent. */
body.home-app .home-preview-devices {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 0.5rem;
  padding: 3px;
  border-radius: var(--apple-radius-pill, 999px);
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
}

body.home-app .home-preview-zoom {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 0.35rem;
  padding: 2px;
  border-radius: var(--apple-radius-pill, 999px);
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  flex-shrink: 0;
  z-index: 5;
}

body.home-app .home-preview-zoom.is-open {
  z-index: 220;
}

body.home-app .home-preview-zoom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--apple-radius-pill, 999px);
  background: transparent;
  color: var(--apple-text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

body.home-app .home-preview-zoom__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--apple-text-primary, #fff);
}

body.home-app .home-preview-zoom__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

body.home-app .home-preview-zoom__btn:focus-visible,
body.home-app .home-preview-zoom__label:focus-visible,
body.home-app .home-preview-zoom__preset:focus-visible,
body.home-app .home-preview-zoom__action:focus-visible,
body.home-app .home-preview-zoom__slider:focus-visible {
  outline: 2px solid rgba(var(--okdak-accent-rgb), 0.9);
  outline-offset: 2px;
}

body.home-app .home-preview-zoom__btn svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-preview-zoom__label {
  min-width: 3.1rem;
  padding: 4px 6px;
  border: none;
  border-radius: var(--apple-radius-pill, 999px);
  background: transparent;
  color: var(--apple-text-secondary, #aaa);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.home-app .home-preview-zoom__label:hover,
body.home-app .home-preview-zoom__label.is-active,
body.home-app .home-preview-zoom.is-open .home-preview-zoom__label {
  background: rgba(var(--okdak-accent-rgb), 0.18);
  color: var(--apple-text-primary, #fff);
}

body.home-app .home-preview-zoom__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(260px, 78vw);
  max-width: min(260px, calc(100vw - 1.25rem));
  padding: 0.7rem 0.75rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(36, 36, 40, 0.98), rgba(22, 22, 26, 0.98));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 0.65rem;
  z-index: 30;
  box-sizing: border-box;
}

/* Porté sur body + fixed — au-dessus de l’iframe / chrome aperçu */
body.home-app .home-preview-zoom__panel.is-anchored {
  position: fixed !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 20150 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.home-app .home-preview-zoom__panel-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--apple-text-primary, #fff);
}

/* display:grid écrase le [hidden] natif — forcer la fermeture */
body.home-app .home-preview-zoom__panel[hidden] {
  display: none !important;
}

body.home-app .home-preview-zoom__slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.55rem;
}

body.home-app .home-preview-zoom__slider {
  width: 100%;
  accent-color: var(--okdak-accent);
  cursor: pointer;
}

body.home-app .home-preview-zoom__slider-value {
  min-width: 2.75rem;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--apple-text-primary, #fff);
}

body.home-app .home-preview-zoom__presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

body.home-app .home-preview-zoom__preset {
  padding: 6px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--apple-text-secondary, #bbb);
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

body.home-app .home-preview-zoom__preset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

body.home-app .home-preview-zoom__preset.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.28);
  border-color: rgba(var(--okdak-accent-rgb), 0.55);
  color: var(--okdak-accent);
}

body.home-app .home-preview-zoom__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

body.home-app .home-preview-zoom__action {
  padding: 5px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--apple-text-secondary, #ccc);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

body.home-app .home-preview-zoom__action:hover:not(:disabled) {
  background: rgba(var(--okdak-accent-rgb), 0.22);
  color: var(--okdak-accent);
}

body.home-app .home-preview-zoom__action:disabled {
  opacity: 0.35;
  cursor: default;
}

body.home-app .home-preview-zoom__action.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.28);
  color: var(--okdak-accent);
}

body.home-app .home-preview-zoom__hint {
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
}

body.home-app .home-preview-viewport.is-zoomed .home-device-frame__screen {
  cursor: grab;
}

body.home-app .home-preview-viewport.is-pan-ready .home-device-frame__screen,
body.home-app .home-preview-viewport.is-panning .home-device-frame__screen {
  cursor: grabbing;
}

body.home-app .home-preview-viewport.is-pan-ready .home-preview-canvas__stage iframe#preview,
body.home-app .home-preview-viewport.is-panning .home-preview-canvas,
body.home-app .home-preview-viewport.is-panning .home-preview-canvas__stage,
body.home-app .home-preview-viewport.is-panning .home-preview-canvas iframe#preview {
  pointer-events: none !important;
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom,
body.light-theme.home-app .home-preview-zoom {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom__btn,
html[data-okdak-theme="light"] body.home-app .home-preview-zoom__label,
body.light-theme.home-app .home-preview-zoom__btn,
body.light-theme.home-app .home-preview-zoom__label {
  color: #555;
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom__btn:hover:not(:disabled),
html[data-okdak-theme="light"] body.home-app .home-preview-zoom__label:hover,
html[data-okdak-theme="light"] body.home-app .home-preview-zoom__label.is-active,
html[data-okdak-theme="light"] body.home-app .home-preview-zoom.is-open .home-preview-zoom__label,
body.light-theme.home-app .home-preview-zoom__btn:hover:not(:disabled),
body.light-theme.home-app .home-preview-zoom__label:hover,
body.light-theme.home-app .home-preview-zoom__label.is-active,
body.light-theme.home-app .home-preview-zoom.is-open .home-preview-zoom__label {
  color: #111;
  background: rgba(var(--okdak-accent-rgb), 0.12);
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom__panel,
body.light-theme.home-app .home-preview-zoom__panel {
  background: linear-gradient(180deg, #fff, #f6f6f7);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom__slider-value,
html[data-okdak-theme="light"] body.home-app .home-preview-zoom__preset:hover,
body.light-theme.home-app .home-preview-zoom__slider-value,
body.light-theme.home-app .home-preview-zoom__preset:hover {
  color: #111;
}

html[data-okdak-theme="light"] body.home-app .home-preview-zoom__preset,
body.light-theme.home-app .home-preview-zoom__preset {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #555;
}

body.light-theme.home-app .home-preview-zoom__action {
  background: rgba(0, 0, 0, 0.05);
  color: #444;
}

body.light-theme.home-app .home-preview-zoom__hint {
  color: rgba(0, 0, 0, 0.45);
}

body.light-theme.home-app .home-preview-viewport.is-zoomed .home-preview-canvas {
  background-color: rgba(0, 0, 0, 0.05);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(var(--okdak-accent-rgb), 0.06), transparent 70%),
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
}

body.light-theme.home-app .home-preview-viewport.is-zoomed .home-preview-canvas__stage {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.14);
}

body.light-theme.home-app .home-preview-zoom__action.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.16);
  color: #111;
}

/* Thème clair : boutons teal pleins → texte blanc */
body.light-theme.home-app .home-preview-device.is-active,
html[data-okdak-theme="light"] body.home-app .home-preview-device.is-active,
body.light-theme.home-app .home-style-extra-apply,
html[data-okdak-theme="light"] body.home-app .home-style-extra-apply,
body.light-theme.home-app .okdak-shape-subcat.is-active,
html[data-okdak-theme="light"] body.home-app .okdak-shape-subcat.is-active,
body.light-theme.home-app .home-style-preset.is-active,
html[data-okdak-theme="light"] body.home-app .home-style-preset.is-active,
body.light-theme.home-app .home-style-radius.is-active,
html[data-okdak-theme="light"] body.home-app .home-style-radius.is-active,
body.light-theme.home-app .home-style-align.is-active,
html[data-okdak-theme="light"] body.home-app .home-style-align.is-active,
body.light-theme.home-app .home-style-toggle.is-active,
html[data-okdak-theme="light"] body.home-app .home-style-toggle.is-active,
body.light-theme.home-app .home-seo-apply,
html[data-okdak-theme="light"] body.home-app .home-seo-apply,
body.light-theme.home-app .home-edit-toolbar__insert-cta,
html[data-okdak-theme="light"] body.home-app .home-edit-toolbar__insert-cta {
  color: #fff;
}

body.light-theme.home-app .home-preview-edit-toggle.is-active,
html[data-okdak-theme="light"] body.home-app .home-preview-edit-toggle.is-active,
body.light-theme.home-app .home-visual-style-bar__extra-label,
html[data-okdak-theme="light"] body.home-app .home-visual-style-bar__extra-label,
body.light-theme.home-app .home-style-accent,
html[data-okdak-theme="light"] body.home-app .home-style-accent,
body.light-theme.home-app .home-preview-hint.is-editing,
html[data-okdak-theme="light"] body.home-app .home-preview-hint.is-editing,
body.light-theme.home-app .home-style-canvas-btn.is-active,
html[data-okdak-theme="light"] body.home-app .home-style-canvas-btn.is-active,
body.light-theme.home-app .home-canvas-insert-more > summary,
html[data-okdak-theme="light"] body.home-app .home-canvas-insert-more > summary,
body.light-theme.home-app .home-project-type-badge.is-code,
html[data-okdak-theme="light"] body.home-app .home-project-type-badge.is-code {
  color: var(--okdak-accent-muted);
}

body.home-app .home-preview-device {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: var(--apple-radius-pill, 999px);
  background: transparent;
  color: var(--apple-text-secondary, #aaa);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

body.home-app .home-preview-device svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-preview-device.is-active {
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
}

html[data-okdak-theme="light"] body.home-app .home-preview-device.is-active,
body.light-theme.home-app .home-preview-device.is-active {
  background: var(--okdak-accent-muted);
  color: #fff;
}

body.home-app .home-preview-device span {
  display: none;
}

@media (min-width: 900px) {
  body.home-app .home-preview-device span {
    display: inline;
  }
}

body.home-app .preview-section-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
}

body.home-app .home-preview-header__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

body.home-app .home-preview-header__row--title {
  justify-content: space-between;
  min-width: 0;
}

body.home-app .home-preview-header__row--title .home-preview-heading {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

body.home-app .home-preview-header__row--tools {
  justify-content: flex-end;
  min-width: 0;
}

body.home-app .home-preview-edit-toggle.is-static-unavailable {
  visibility: hidden;
  pointer-events: none;
}

body.home-studio-static .home-preview-header__row--tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

body.home-studio-static .home-preview-devices {
  justify-self: start;
  min-width: 0;
  flex-wrap: nowrap;
}

body.home-studio-static .home-preview-page-select {
  justify-self: end;
  min-width: 0;
}

body.home-studio-static .home-preview-page-select select {
  max-width: min(150px, 32vw);
}

body.home-studio-static .home-preview-fullscreen-btn {
  justify-self: end;
}

body.home-app .home-preview-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--apple-radius-pill, 999px);
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  color: var(--apple-text-secondary, #aaa);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

body.home-app .home-preview-fullscreen-btn svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-preview-fullscreen-btn span {
  display: none;
}

@media (min-width: 900px) {
  body.home-app .home-preview-fullscreen-btn span {
    display: inline;
  }
}

body.home-app .home-preview-devices,
body.home-app .home-preview-zoom,
body.home-app .home-preview-page-select,
body.home-app .home-preview-edit-toggle,
body.home-app #fullscreenBtn {
  flex-shrink: 0;
}

body.home-app .home-preview-heading {
  min-width: 0;
  flex: 1 1 140px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}

body.home-app .home-preview-heading__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apple-accent, var(--okdak-accent));
}

body.home-app .home-preview-heading__lead {
  font-size: 0.84rem;
  font-weight: 500;
  opacity: 0.78;
}

body.home-app .home-preview-viewport {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--home-preview-min-h, clamp(380px, 55vh, 680px));
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: var(--home-preview-pad-y, clamp(0.65rem, 1.6vh, 1.15rem)) var(--home-preview-pad-x, clamp(0.4rem, 1.2vw, 0.75rem)) calc(var(--home-preview-pad-y, 0.9rem) * 1.1);
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(0, 0, 0, 0.22), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(var(--okdak-accent-rgb), 0.1), transparent 72%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 24px
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.14) 100%);
  border-radius: clamp(8px, 1.2vw, 16px);
}

/* Conteneur cadre — centré (zoom = contenu seul, pas le chrome) */
body.home-app .home-device-frame-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Canvas zoom : le cadre reste fixe, seule la page grossit dans l’écran */
body.home-app .home-preview-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  transform-origin: 0 0;
  box-sizing: border-box;
}

body.home-app .home-canvas-empty {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.25rem 1rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(24, 24, 27, 0.94) 0%, rgba(9, 9, 11, 0.9) 100%);
  color: #fafafa;
  pointer-events: auto;
}

body.home-app .home-canvas-empty[hidden] {
  display: none !important;
}

body.home-app .home-canvas-empty__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--okdak-accent);
}

body.home-app .home-canvas-empty__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

body.home-app .home-canvas-empty__lead {
  margin: 0 0 0.45rem;
  max-width: 22rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #a1a1aa;
}

body.home-app .home-canvas-empty__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 22rem;
}

body.home-app .home-canvas-empty__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #18181b;
  color: #fafafa;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.home-app .home-canvas-empty__chip i,
body.home-app .home-canvas-empty__chip svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-canvas-empty__chip:hover,
body.home-app .home-canvas-empty__chip:focus-visible {
  border-color: var(--okdak-accent);
  color: var(--okdak-accent);
  outline: none;
}

html[data-okdak-theme="light"] body.home-app .home-canvas-empty,
body.light-theme.home-app .home-canvas-empty {
  background:
    linear-gradient(180deg, rgba(250, 250, 250, 0.92) 0%, rgba(244, 244, 245, 0.88) 100%);
  color: #18181b;
}

html[data-okdak-theme="light"] body.home-app .home-canvas-empty__lead,
body.light-theme.home-app .home-canvas-empty__lead {
  color: #52525b;
}

html[data-okdak-theme="light"] body.home-app .home-canvas-empty__chip,
body.light-theme.home-app .home-canvas-empty__chip {
  background: #fff;
  color: #18181b;
  border-color: rgba(9, 9, 11, 0.12);
  box-shadow: 0 4px 14px rgba(9, 9, 11, 0.08);
}

body.home-app .home-preview-viewport.is-drop-target {
  outline: 2px dashed var(--okdak-accent);
  outline-offset: -8px;
  border-radius: 16px;
}

body.home-app .home-preview-drop {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(9, 9, 11, 0.62);
  border-radius: inherit;
  pointer-events: auto;
}

body.home-app .home-preview-drop[hidden] {
  display: none !important;
}

body.home-app .home-preview-drop__card {
  max-width: 18rem;
  padding: 1.05rem 1.25rem 1.15rem;
  border-radius: 16px;
  border: 2px dashed var(--okdak-accent);
  background: rgba(16, 16, 20, 0.94);
  color: #fafafa;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

body.home-app .home-preview-drop__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

body.home-app .home-preview-drop__lead {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(250, 250, 250, 0.78);
}

html[data-okdak-theme="light"] body.home-app .home-preview-drop,
body.light-theme.home-app .home-preview-drop {
  background: rgba(255, 255, 255, 0.72);
}

html[data-okdak-theme="light"] body.home-app .home-preview-drop__card,
body.light-theme.home-app .home-preview-drop__card {
  background: #fff;
  color: #18181b;
  box-shadow: 0 16px 40px rgba(9, 9, 11, 0.12);
}

html[data-okdak-theme="light"] body.home-app .home-preview-drop__lead,
body.light-theme.home-app .home-preview-drop__lead {
  color: #52525b;
}

body.home-app .home-preview-viewport.is-drop-target .home-canvas-empty {
  background: rgba(var(--okdak-accent-rgb), 0.12);
}

body.home-canvas-is-empty .home-canvas-insert-bar,
body.home-app .home-canvas-insert-bar.is-empty-canvas {
  opacity: 1 !important;
  border-color: rgba(var(--okdak-accent-rgb), 0.45);
  box-shadow: 0 4px 22px rgba(var(--okdak-accent-rgb), 0.22);
}

body.home-app .home-preview-viewport.is-zoomed .home-canvas-empty {
  display: none !important;
}

body.home-app .home-preview-canvas__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

body.home-app .home-preview-viewport.is-zoomed .home-device-frame__screen {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

body.home-app .home-preview-viewport.is-zoomed .home-device-frame__screen::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.home-app .home-preview-viewport.is-zoomed .home-device-frame__screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

body.home-app .home-preview-viewport.is-zoomed .home-preview-canvas {
  position: relative;
  inset: auto;
  box-sizing: content-box;
  width: calc(100% * var(--home-preview-zoom, 1));
  height: calc(100% * var(--home-preview-zoom, 1));
  padding: var(--home-preview-canvas-pad, 120px);
  background-color: rgba(0, 0, 0, 0.28);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(var(--okdak-accent-rgb), 0.08), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  background-position: center;
}

/* Stage = taille du projet uniquement (clip le scale pour ne pas manger le fond) */
body.home-app .home-preview-viewport.is-zoomed .home-preview-canvas__stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

body.home-app .home-preview-canvas__stage iframe#preview,
body.home-app .home-preview-canvas iframe#preview,
body.home-app .home-preview-viewport .home-device-frame__screen .home-preview-canvas iframe#preview,
body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__screen .home-preview-canvas iframe#preview,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__screen .home-preview-canvas iframe#preview,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__screen .home-preview-canvas iframe#preview,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__screen .home-preview-canvas iframe#preview {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--home-device-vw, 100%) !important;
  height: var(--home-device-vh, 100%) !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: scale(calc(var(--home-device-fit, 1) * var(--home-preview-zoom, 1)));
  transform-origin: 0 0;
  border: none !important;
  border-radius: inherit;
  background: #fff;
  display: block;
  z-index: 1;
}

body.home-app .home-device-frame {
  position: relative;
  margin: 0 auto;
  border: none;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transform-style: preserve-3d;
  transition:
    width 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
    filter 0.35s ease;
}

body.home-app .home-device-frame.is-switching {
  animation: home-device-pop 0.42s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes home-device-pop {
  0% { transform: scale(0.97) translateY(4px); filter: brightness(0.92); }
  55% { transform: scale(1.01) translateY(-2px); filter: brightness(1.04); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

body.home-app .home-device-frame__chrome,
body.home-app .home-device-frame__footer,
body.home-app .home-device-frame__ground,
body.home-app .home-device-frame__bezel,
body.home-app .home-device-frame__side,
body.home-app .home-device-frame__lip,
body.home-app .home-device-frame__antenna,
body.home-app .home-device-frame__mesh,
body.home-app .home-device-frame__speakers,
body.home-app .home-device-frame__keys,
body.home-app .home-device-frame__bottom-speak {
  pointer-events: none;
}

body.home-app .home-device-frame__bezel,
body.home-app .home-device-frame__side,
body.home-app .home-device-frame__glass,
body.home-app .home-device-frame__desktop-cam,
body.home-app .home-device-frame__nav,
body.home-app .home-device-frame__reload,
body.home-app .home-device-frame__stand-hinge,
body.home-app .home-device-frame__band,
body.home-app .home-device-frame__watch-chrome,
body.home-app .home-device-frame__btn--crown,
body.home-app .home-device-frame__btn--watch-side,
body.home-app .home-device-frame__btn--watch-speak,
body.home-app .home-device-frame__lip,
body.home-app .home-device-frame__antenna,
body.home-app .home-device-frame__mesh,
body.home-app .home-device-frame__speakers,
body.home-app .home-device-frame__keys,
body.home-app .home-device-frame__bottom-speak {
  display: none;
}

body.home-app .home-device-frame__screen {
  position: relative;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

body.home-app .home-device-frame__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 12%,
    transparent 34%
  );
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

body.home-app .home-device-frame__glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 16%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0%, transparent 10%, transparent 90%, rgba(0, 0, 0, 0.06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

body.home-app .home-device-frame__screen iframe#preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: none;
  border-radius: 0;
  background: #fff;
  position: relative;
  z-index: 1;
}

body.home-app .home-device-frame__ground {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 72%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42) 0%, transparent 72%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Chrome masqué par défaut */
body.home-app .home-device-frame__browser,
body.home-app .home-device-frame__desktop-chin,
body.home-app .home-device-frame__status,
body.home-app .home-device-frame__tablet-chrome,
body.home-app .home-device-frame__home-indicator,
body.home-app .home-device-frame__tablet-home,
body.home-app .home-device-frame__stand {
  display: none;
}

/* Icônes barre de statut */
body.home-app .home-device-frame__status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.home-app .home-device-frame__icon-signal {
  width: 15px;
  height: 10px;
  background:
    linear-gradient(to top, currentColor, currentColor) 0 100% / 2.5px 38% no-repeat,
    linear-gradient(to top, currentColor, currentColor) 4px 100% / 2.5px 55% no-repeat,
    linear-gradient(to top, currentColor, currentColor) 8px 100% / 2.5px 75% no-repeat,
    linear-gradient(to top, currentColor, currentColor) 12px 100% / 2.5px 100% no-repeat;
  opacity: 0.95;
}

body.home-app .home-device-frame__icon-wifi {
  width: 13px;
  height: 10px;
  background:
    radial-gradient(circle at 50% 100%, currentColor 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 50% 100%, transparent 3.5px, currentColor 3.6px 4.5px, transparent 4.6px),
    radial-gradient(circle at 50% 100%, transparent 6.5px, currentColor 6.6px 7.5px, transparent 7.6px);
  opacity: 0.92;
}

body.home-app .home-device-frame__icon-battery {
  width: 20px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 2.5px;
  position: relative;
  opacity: 0.92;
  box-sizing: border-box;
}

body.home-app .home-device-frame__icon-battery::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.5px;
  bottom: 1.5px;
  width: 68%;
  border-radius: 1px;
  background: currentColor;
}

body.home-app .home-device-frame__icon-battery::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 50%;
  width: 2px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

/* ——— PC (MacBook Space Black) ——— */
body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame {
  --lid-metal:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 22%),
    linear-gradient(165deg, #5a5a62 0%, #3c3c42 38%, #2a2a30 72%, #1c1c20 100%);
  width: var(--home-frame-desktop-w, 100%);
  max-width: min(1080px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding: 8px 9px 0;
  border-radius: 14px 14px 0 0;
  background: var(--lid-metal);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 28px 56px rgba(0, 0, 0, 0.42),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  border-radius: 14px 14px 0 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
  opacity: 0.7;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__bezel {
  display: none;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-cam {
  display: block;
  position: relative;
  z-index: 2;
  width: auto;
  height: auto;
  margin: 0;
  padding: 7px 0 4px;
  border-radius: 6px 6px 0 0;
  background: #0a0a0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-cam::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 72px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #050506;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-cam::after {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #4a6a9a 0%, #142038 42%, #05060a 70%, #000 100%);
  box-shadow:
    0 0 0 1.5px #121214,
    0 0 0 2.5px #050506,
    inset 0 0 2px rgba(120, 180, 255, 0.35);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__browser {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  padding: 7px 10px 6px;
  margin: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, #ececef 0%, #d8d8de 100%);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) inset;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__screen {
  position: relative;
  z-index: 2;
  width: auto;
  margin: 0;
  aspect-ratio: 16 / 10;
  min-height: 0 !important;
  height: auto;
  max-height: var(--home-screen-desktop-max-h, min(70dvh, 860px));
  border-radius: 0;
  box-shadow: none;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__screen iframe#preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

body.home-app .home-device-frame__traffic {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 2px;
}

body.home-app .home-device-frame__traffic span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

body.home-app .home-device-frame__traffic span:nth-child(2) { background: #febc2e; }
body.home-app .home-device-frame__traffic span:nth-child(3) { background: #28c840; }

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__nav {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

body.home-app .home-device-frame__nav-btn {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.045);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
}

body.home-app .home-device-frame__nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-left: 1.6px solid #6e6e73;
  border-bottom: 1.6px solid #6e6e73;
  transform: rotate(45deg);
  box-sizing: border-box;
}

body.home-app .home-device-frame__nav-btn:last-child::before {
  transform: rotate(-135deg);
}

body.home-app .home-device-frame__address-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f5 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

body.home-app .home-device-frame__lock {
  flex-shrink: 0;
  color: #86868b;
  opacity: 0.95;
}

body.home-app .home-device-frame__address {
  min-width: 0;
  color: #1d1d1f;
  font-size: 0.72rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__reload {
  display: block;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border: 1.6px solid #8e8e93;
  border-radius: 50%;
  border-right-color: transparent;
  opacity: 0.75;
  margin-left: auto;
  transform: rotate(-40deg);
}

body.home-app .home-device-frame__browser-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

body.home-app .home-device-frame__browser-action {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  position: relative;
  background: transparent;
  border: none;
}

body.home-app .home-device-frame__browser-action--share::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 3px;
  width: 5px;
  height: 5px;
  border-left: 1.4px solid #6e6e73;
  border-top: 1.4px solid #6e6e73;
  transform: translateX(-50%) rotate(45deg);
}

body.home-app .home-device-frame__browser-action--share::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 1.4px;
  height: 8px;
  background: #6e6e73;
  transform: translateX(-50%);
  border-radius: 1px;
}

body.home-app .home-device-frame__browser-action--tabs::before {
  content: '';
  position: absolute;
  inset: 4px 3px;
  border: 1.4px solid #6e6e73;
  border-radius: 2px;
}

body.home-app .home-device-frame__browser-action--plus::before,
body.home-app .home-device-frame__browser-action--plus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #6e6e73;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

body.home-app .home-device-frame__browser-action--plus::before {
  width: 10px;
  height: 1.5px;
}

body.home-app .home-device-frame__browser-action--plus::after {
  width: 1.5px;
  height: 10px;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__glass {
  display: block;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-chin {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  height: 10px;
  margin: 0;
  border-radius: 0 0 6px 6px;
  background: #0a0a0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.home-app .home-device-frame__desktop-logo {
  display: none;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand {
  display: block;
  position: relative;
  z-index: 2;
  width: calc(100% + 22px);
  margin: 0 -11px;
  padding: 0 18px 14px;
  border-radius: 0 0 16px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 28%),
    linear-gradient(180deg, #3e3e44 0%, #2c2c32 48%, #232328 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 14px 28px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 0, 0, 0.38);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-neck {
  display: none;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-hinge {
  display: block;
  height: 7px;
  margin: 0 -10px 8px;
  border-radius: 0 0 4px 4px;
  background:
    linear-gradient(180deg, #1a1a1e 0%, #4a4a52 45%, #2e2e34 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 3px rgba(0, 0, 0, 0.35);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__speakers {
  display: block;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 16px;
  height: 38px;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__speakers span {
  position: absolute;
  top: 0;
  width: 11%;
  height: 100%;
  border-radius: 3px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0.55px, transparent 0.7px);
  background-size: 3px 3px;
  opacity: 0.7;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__speakers span:first-child {
  left: 0;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__speakers span:last-child {
  right: 0;
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__keys {
  display: block;
  height: 40px;
  margin: 2px 14% 10px;
  border-radius: 5px;
  background-color: #1f1f24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13'%3E%3Crect x='1' y='1.15' width='14' height='10.4' rx='2' fill='%23585860' stroke='%23383840' stroke-width='0.6'/%3E%3Cpath d='M2.2 2.15h11.6' stroke='%23fff' stroke-opacity='0.16' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 16px 13px;
  background-repeat: repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.28);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-base {
  width: 34%;
  max-width: 168px;
  height: 28px;
  margin: 0 auto;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #4a4a52 0%, #323238 55%, #2a2a30 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__ground {
  opacity: 1;
  width: 78%;
  bottom: -16px;
  height: 22px;
  filter: blur(8px);
}

html[data-okdak-theme="light"] body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame,
body.light-theme.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame {
  --lid-metal:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 24%),
    linear-gradient(165deg, #d8d8de 0%, #b8b8c0 40%, #9a9aa2 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 24px 48px rgba(0, 0, 0, 0.18);
}

html[data-okdak-theme="light"] body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand,
body.light-theme.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 30%),
    linear-gradient(180deg, #c8c8d0 0%, #aeaeb6 48%, #9898a0 100%);
}

html[data-okdak-theme="light"] body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-hinge,
body.light-theme.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-hinge {
  background: linear-gradient(180deg, #8a8a92 0%, #c0c0c8 45%, #9a9aa2 100%);
}

html[data-okdak-theme="light"] body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__keys,
body.light-theme.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__keys {
  background-color: #d0d0d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13'%3E%3Crect x='1' y='1.15' width='14' height='10.4' rx='2' fill='%23f4f4f7' stroke='%23b0b0b8' stroke-width='0.6'/%3E%3Cpath d='M2.2 2.15h11.6' stroke='%23fff' stroke-opacity='0.9' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-okdak-theme="light"] body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-base,
body.light-theme.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand-base {
  background: linear-gradient(180deg, #d4d4da 0%, #b8b8c0 100%);
}

/* ——— Handsets (mobile / tablette) — refonte flex : écran = contenu du bezel ——— */
/* Principe : le padding du cadre = épaisseur bezel ; seul __screen est in-flow (flex:1) ;
   chrome/footer/boutons en overlay. Pas de position:absolute sur __screen. */

body.home-app .home-preview-viewport[data-device="mobile"],
body.home-app .home-preview-viewport[data-device="tablet"] {
  align-items: center;
  justify-content: center;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame-stage,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

/* Shared: hide desktop chrome bits on handsets */
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__desktop-cam,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__browser,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__desktop-chin,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__stand,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__desktop-cam,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__browser,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__desktop-chin,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__stand,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__status,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__tablet-chrome,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__tablet-home {
  display: none !important;
}

/* Bezel décoratif désactivé : le padding + fond du frame font office de coque */
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__bezel,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__bezel {
  display: none !important;
}

/* ——— Smartphone (titanium, Dynamic Island) ——— */
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame {
  --bezel: 11px;
  --r-outer: 46px;
  --r-screen: 38px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(400px, calc(100% - 0.5rem), calc(88dvh * 9 / 19.5));
  max-width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  max-height: min(88dvh, 860px);
  padding: var(--bezel);
  margin: 0 auto;
  border-radius: var(--r-outer);
  overflow: visible;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34) 0%, transparent 26%),
    linear-gradient(165deg, #8d867c 0%, #5c574e 32%, #3a372f 64%, #1c1b18 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.32) inset,
    -1px 0 0 rgba(255, 255, 255, 0.1) inset,
    1px 0 0 rgba(0, 0, 0, 0.28) inset,
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 30px 60px rgba(0, 0, 0, 0.48);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 8;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(0, 0, 0, 0.28);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-outer) - 4px);
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 1.25px rgba(0, 0, 0, 0.55);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__antenna {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 7;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42) 0,
    rgba(0, 0, 0, 0.42) var(--bezel),
    transparent var(--bezel),
    transparent calc(100% - var(--bezel)),
    rgba(0, 0, 0, 0.42) calc(100% - var(--bezel)),
    rgba(0, 0, 0, 0.42) 100%
  );
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__antenna--n { top: 11%; }
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__antenna--s { bottom: 11%; }

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__side {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__side--left {
  left: -3px;
  top: 18%;
  gap: 10px;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__side--right {
  right: -3px;
  top: 26%;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn {
  display: block;
  background: linear-gradient(180deg, #c4bdb0 0%, #8a8378 38%, #4a463e 100%);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.28);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--crown,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--watch-side,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--watch-speak,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--crown,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--watch-side,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--watch-speak,
body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__btn--watch-speak,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__band,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__band,
body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__band,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__watch-chrome,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__watch-chrome,
body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__watch-chrome {
  display: none !important;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--silent {
  width: 4px;
  height: 18px;
  margin-bottom: 6px;
  border-radius: 2px 1px 1px 2px;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--vol-up,
body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--vol-down {
  width: 4px;
  height: 38px;
  border-radius: 2px 1px 1px 2px;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__btn--power {
  width: 4px;
  height: 72px;
  border-radius: 1px 2px 2px 1px;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__chrome {
  position: absolute;
  inset: var(--bezel) var(--bezel) auto;
  height: 50px;
  z-index: 5;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent);
  border-radius: var(--r-screen) var(--r-screen) 0 0;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__time {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.74rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__status-icons {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  gap: 6px;
}

body.home-app .home-device-frame__island {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 118px;
  height: 32px;
  padding: 0 11px 0 14px;
  border-radius: 20px;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 3px #050506,
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.home-app .home-device-frame__island-speaker {
  display: block;
  flex: 1;
  height: 5px;
  max-width: 48px;
  margin-right: auto;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #1a1a1e 0 1px, #0c0c0e 1px 2px);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

body.home-app .home-device-frame__island-cam {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a5a88, #0a1220 55%, #000 80%);
  box-shadow:
    0 0 0 1.5px #111,
    inset 0 0 2px rgba(120, 180, 255, 0.45);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__screen {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0;
  align-self: stretch;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--r-screen);
  overflow: hidden;
  background: #fff;
  z-index: 1;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__screen iframe#preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: inherit;
  background: #fff;
  display: block;
  z-index: 1;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__glass {
  display: block;
  border-radius: inherit;
  z-index: 3;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__glare {
  border-radius: inherit;
  z-index: 2;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__footer {
  position: absolute;
  left: var(--bezel);
  right: var(--bezel);
  bottom: var(--bezel);
  height: 26px;
  z-index: 5;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__home-indicator {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 34%;
  max-width: 118px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: #3a3a3c;
  opacity: 0.55;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__bottom-speak {
  display: block;
  position: absolute;
  left: 18%;
  bottom: -7px;
  width: 22%;
  height: 3px;
  border-radius: 2px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0.6px, transparent 0.75px);
  background-size: 3px 3px;
  opacity: 0.7;
}

body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame__ground {
  display: none;
}

/* ——— Tablette (iPad Pro) ——— */
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame {
  --bezel-x: 16px;
  --bezel-y: 16px;
  --r-outer: 28px;
  --r-screen: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(440px, calc(100% - 1rem), calc(78dvh * 3 / 4));
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: min(78dvh, 680px);
  padding: var(--bezel-y) var(--bezel-x);
  margin: 0 auto;
  border-radius: var(--r-outer);
  overflow: visible;
  gap: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, transparent 28%),
    linear-gradient(165deg, #7a7a80 0%, #4a4a50 38%, #2a2a2e 72%, #161618 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 30px 56px rgba(0, 0, 0, 0.42);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.22);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--r-outer) - 6px);
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 1.2px rgba(0, 0, 0, 0.5);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__side {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__side--left {
  left: -3px;
  top: 28%;
  gap: 10px;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__side--right {
  right: -3px;
  top: 26%;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--vol-up,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--vol-down {
  display: block;
  width: 4px;
  height: 36px;
  border-radius: 2px 1px 1px 2px;
  background: linear-gradient(180deg, #9a9aa0, #4a4a50);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--power {
  display: block;
  width: 4px;
  height: 48px;
  border-radius: 1px 2px 2px 1px;
  background: linear-gradient(180deg, #9a9aa0, #4a4a50);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__btn--silent {
  display: none;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__chrome {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  pointer-events: none;
  height: auto;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__tablet-chrome {
  display: block;
  height: 100%;
  margin: 0;
}

body.home-app .home-device-frame__tablet-cam {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a1a1e, #050508);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(255, 255, 255, 0.06);
}

body.home-app .home-device-frame__tablet-cam-lens {
  display: block;
  position: absolute;
  inset: 1.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a6a98, #000 80%);
}

body.home-app .home-device-frame__tablet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: var(--bezel-y);
  left: var(--bezel-x);
  right: var(--bezel-x);
  padding: 6px 14px 0;
  min-height: 22px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent);
  border-radius: var(--r-screen) var(--r-screen) 0 0;
}

body.home-app .home-device-frame__tablet-bar .home-device-frame__time {
  position: static;
  transform: none;
  font-size: 0.68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__screen {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0;
  align-self: stretch;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--r-screen);
  overflow: hidden;
  background: #fff;
  z-index: 1;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__screen iframe#preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: inherit;
  background: #fff;
  display: block;
  z-index: 1;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__glass {
  display: block;
  border-radius: inherit;
  z-index: 3;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__footer {
  position: absolute;
  left: var(--bezel-x);
  right: var(--bezel-x);
  bottom: var(--bezel-y);
  height: 22px;
  margin: 0;
  padding: 0;
  z-index: 5;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__tablet-home,
body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__home-indicator {
  display: block;
  width: 28%;
  max-width: 110px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: #3a3a3c;
  opacity: 0.5;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__home-indicator {
  display: none;
}

body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame__ground {
  display: none;
}

/* ——— Apple Watch / mini site app ——— */
body.home-app .home-preview-viewport[data-device="watch"] {
  align-items: center;
  justify-content: center;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 6.5rem 0 7rem;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__desktop-cam,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__browser,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__desktop-chin,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__stand,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__status,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__tablet-chrome,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__home-indicator,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__tablet-home,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__bezel,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--power,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--silent,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--vol-up,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--vol-down {
  display: none !important;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame {
  --bezel: 13px;
  --r-outer: 48px;
  --r-screen: 34px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(228px, calc(100% - 2.5rem), calc(62dvh * 0.84));
  max-width: 100%;
  height: auto;
  aspect-ratio: 0.84 / 1;
  max-height: min(62dvh, 420px);
  padding: var(--bezel);
  margin: 0 auto;
  border-radius: var(--r-outer);
  overflow: visible;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28) 0%, transparent 30%),
    linear-gradient(165deg, #6a6a70 0%, #3a3a40 40%, #1a1a1e 74%, #0a0a0c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 0 0 1.5px rgba(0, 0, 0, 0.62),
    0 22px 48px rgba(0, 0, 0, 0.48);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 8;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 1px 0 0 rgba(255, 255, 255, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.3);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--r-outer) - 6px);
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 1.4px rgba(0, 0, 0, 0.55);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band {
  display: block;
  position: absolute;
  left: 17%;
  right: 17%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.5) 1.05px, transparent 1.2px),
    linear-gradient(90deg, #2c2c32, #3a3a40 18%, #2a2a30 82%, #1c1c20);
  background-size: 8px 9px, 100% 100%;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--top {
  top: -86px;
  height: 92px;
  border-radius: 12px 12px 4px 4px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--bottom {
  bottom: -86px;
  height: 92px;
  border-radius: 4px 4px 12px 12px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--top::after,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--bottom::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 70px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), transparent 40%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--top::after {
  top: -48px;
  border-radius: 10px 10px 0 0;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__band--bottom::after {
  bottom: -48px;
  border-radius: 0 0 10px 10px;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__side--left {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -5px;
  top: 32%;
  z-index: 6;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--watch-speak {
  display: block;
  width: 5px;
  height: 28px;
  border-radius: 2px 0 0 2px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.55) 0.7px, transparent 0.85px);
  background-size: 3px 3.5px;
  background-color: #3a3a40;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__side--right {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -8px;
  top: 24%;
  gap: 16px;
  z-index: 6;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--crown {
  display: block;
  position: relative;
  width: 12px;
  height: 36px;
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(90deg, #2a2a2e 0%, #8a8a92 32%, #d0d0d6 52%, #6a6a72 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    3px 0 6px rgba(0, 0, 0, 0.28);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--crown::after {
  content: '';
  position: absolute;
  inset: 5px 2px;
  border-radius: 0 5px 5px 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0 1.5px,
    transparent 1.5px 3px
  );
  opacity: 0.7;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__btn--watch-side {
  display: block;
  width: 7px;
  height: 24px;
  margin-top: 2px;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, #2a2a2e, #6a6a72 55%, #3a3a40);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.45);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__chrome {
  position: absolute;
  inset: var(--bezel) var(--bezel) auto;
  height: 28px;
  z-index: 5;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__watch-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  height: 100%;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__watch-time {
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__watch-pill {
  font-size: 0.5rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__screen {
  position: relative !important;
  inset: auto !important;
  flex: 1 1 0;
  align-self: stretch;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--r-screen);
  overflow: hidden;
  background: #000;
  z-index: 1;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__screen iframe#preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: inherit;
  background: #000;
  display: block;
  z-index: 1;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__glass {
  display: block;
  border-radius: inherit;
  z-index: 3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, transparent 40%, transparent 100%);
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__glare {
  border-radius: inherit;
  z-index: 2;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__footer,
body.home-app .home-preview-viewport[data-device="watch"] .home-device-frame__ground {
  display: none !important;
}

body.home-app .home-preview-viewport[data-device="watch"] .home-preview-canvas,
body.home-app .home-preview-viewport[data-device="watch"] .home-preview-canvas__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}

/* Plein écran aperçu — canvas max + chrome flottant pour édition directe */
body.home-app .home-site-preview.home-preview-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10060;
  margin: 0;
  border-radius: 0;
  max-height: none;
  overflow: hidden;
  background: #0a0a0b;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Header → barre flottante haute (édition + devices), titre/export masqués */
body.home-app .home-site-preview.home-preview-fullscreen .preview-section-header {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  pointer-events: none;
}

body.home-app .home-site-preview.home-preview-fullscreen .preview-section-header > * {
  pointer-events: auto;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-header__row--title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-heading,
body.home-app .home-site-preview.home-preview-fullscreen .home-export-bar,
body.home-app .home-site-preview.home-preview-fullscreen #homePreviewPhoneBtn,
body.home-app .home-site-preview.home-preview-fullscreen #fullscreenBtn {
  display: none !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-toggle {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 6px 10px;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-toggle span {
  display: inline !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-header__row--tools {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-right: 5.5rem; /* place pour le bouton Fermer */
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 14, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-devices {
  gap: 2px;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-device span {
  display: none;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-page-select {
  max-width: 9rem;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-page-select select {
  font-size: 0.7rem;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Hint flottant (édition active, rien de sélectionné) */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  flex-shrink: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
}

/* Dock plein écran : verre sur le chrome, insert masqué quand le menu style est ouvert
   (évite insert + contrôles empilés / chevauchements) */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar.is-visible),
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) {
  padding: 8px 8px max(10px, env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(18, 18, 22, 0.55) !important;
  backdrop-filter: blur(30px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.45) !important;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.22);
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  max-height: min(46vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar.is-visible) .home-canvas-insert-bar,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-canvas-insert-bar {
  display: none;
}

/* Contraste fort des contrôles sur le verre */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-canvas-insert-btn,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-preset,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-align,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-toggle,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-pad,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-radius,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-layer,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-layer-move,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-canvas-btn,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-nudge-btn,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-overlay-toggle,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-clear,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-duplicate,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-upload,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-extra-apply,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-accent,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .okdak-shape-subcat,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-canvas-insert-more > summary,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-close {
  background: rgba(8, 8, 12, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__target,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-layer-label,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-canvas-label,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-pad-label,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__extra-label,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__advanced > summary,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-stamp-explorer__head strong,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-stamp-explorer__hint {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__select,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__url,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-stamp-explorer__search {
  background: rgba(8, 8, 12, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__layers,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-visual-style-bar__canvas {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-delete {
  background: rgba(185, 28, 28, 0.88) !important;
  border-color: rgba(254, 202, 202, 0.45) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-duplicate,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-overlay-toggle.is-active {
  background: rgba(22, 163, 74, 0.85) !important;
  border-color: rgba(187, 247, 208, 0.45) !important;
  color: #fff !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-upload,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-chrome:has(.home-visual-style-bar:not([hidden])) .home-style-extra-apply {
  background: rgba(14, 165, 233, 0.88) !important;
  border-color: rgba(186, 230, 253, 0.5) !important;
  color: #fff !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-hint {
  display: none !important;
}

body.home-app .home-site-preview.home-preview-fullscreen.home-preview-fullscreen--editing:not(:has(.home-visual-style-bar.is-visible)) .home-preview-hint {
  display: block !important;
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  max-width: min(92vw, 34rem);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 14, 0.82);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-height: min(46vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  padding: 8px 10px 4px;
  /* Transparent : le verre est sur le chrome parent */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar__primary,
body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar__advanced-body {
  flex-wrap: wrap;
  overflow: visible;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-stamp-explorer__grid {
  max-height: min(28vh, 260px);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(4.5rem, calc(env(safe-area-inset-top) + 3.5rem)) 1rem max(5rem, calc(env(safe-area-inset-bottom) + 4rem)) !important;
  background:
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(var(--okdak-accent-rgb), 0.12), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 0, 0, 0.5), transparent 65%),
    #0a0a0b;
  box-shadow: none;
  overflow: auto;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-device-frame-stage {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop plein écran = canvas bord à bord */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] {
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
  background: #0a0a0b;
  overflow: hidden;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame-stage {
  flex: 1;
  height: 100%;
  width: 100%;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  background: #0a0a0b !important;
  aspect-ratio: auto !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame::before,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame::after {
  display: none !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__chrome,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__footer,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__ground,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__glare,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__bezel,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__side,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__glass,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__lip,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__antenna,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__mesh,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__speakers,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__keys,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__bottom-speak {
  display: none !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__screen {
  position: relative !important;
  inset: auto !important;
  flex: 1;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  aspect-ratio: auto !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="desktop"] .home-device-frame__screen iframe#preview {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--home-device-vw, 100%) !important;
  height: var(--home-device-vh, 100%) !important;
  min-height: 0 !important;
  transform: scale(calc(var(--home-device-fit, 1) * var(--home-preview-zoom, 1)));
  transform-origin: 0 0;
  border-radius: 0;
}

/* Mobile / tablette plein écran = gros device centré (même logique flex) */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="mobile"],
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="tablet"] {
  align-items: center !important;
  justify-content: center !important;
  padding: max(4.5rem, env(safe-area-inset-top)) 1rem max(4rem, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 255, 255, 0.05), transparent 70%),
    #0a0a0b !important;
  overflow: auto;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="mobile"] .home-device-frame-stage,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="tablet"] .home-device-frame-stage {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="mobile"] .home-device-frame {
  width: min(440px, 90vw, calc((100dvh - 7rem) * 9 / 19.5)) !important;
  max-width: min(440px, 90vw) !important;
  max-height: calc(100dvh - 7rem) !important;
  --bezel: 14px;
  --r-outer: 48px;
  --r-screen: 38px;
  flex: none !important;
  margin: 0 auto !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="tablet"] .home-device-frame {
  width: min(520px, 88vw, calc((100dvh - 9rem) * 3 / 4)) !important;
  max-width: min(520px, 88vw) !important;
  max-height: calc(100dvh - 9rem) !important;
  --bezel-x: 16px;
  --bezel-y: 16px;
  --r-outer: 28px;
  flex: none !important;
  margin: 0 auto !important;
}

/* Screen reste en flex relative — pas d’absolute inset en FS */
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="mobile"] .home-device-frame__screen,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="tablet"] .home-device-frame__screen {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="mobile"] .home-device-frame__screen iframe#preview,
body.home-app .home-site-preview.home-preview-fullscreen .home-preview-viewport[data-device="tablet"] .home-device-frame__screen iframe#preview {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--home-device-vw, 100%) !important;
  height: var(--home-device-vh, 100%) !important;
  min-height: 0 !important;
  transform: scale(calc(var(--home-device-fit, 1) * var(--home-preview-zoom, 1)));
  transform-origin: 0 0;
}

/* Dock bas en overlay sur l’aperçu (pas de bande noire opaque derrière) */
body.home-app .home-site-preview.home-preview-fullscreen:has(.home-visual-style-bar.is-visible) .home-preview-viewport {
  padding-bottom: 0 !important;
}

body.home-app .home-site-preview.home-preview-fullscreen:has(.home-visual-style-bar.is-visible) .home-preview-viewport[data-device="desktop"] {
  padding-bottom: 0 !important;
}

body.home-app.home-preview-fullscreen-open {
  overflow: hidden;
}

body.home-app .home-site-preview.home-preview-fullscreen #exitFullscreenBtn,
body.home-app.home-preview-fullscreen-open .home-preview-exit-fs:not([hidden]) {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 10061;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--apple-radius-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Jamais visible hors plein écran (display:flex écrasait [hidden]) */
body.home-app .home-preview-exit-fs[hidden],
body.home-app #exitFullscreenBtn[hidden],
body.home-app:not(.home-preview-fullscreen-open) .home-preview-exit-fs {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 960px) {
  body.home-app .home-site-preview.home-preview-fullscreen .home-preview-header__row--tools {
    margin-right: 0;
    order: 3;
    width: 100%;
    justify-content: center;
  }

  body.home-app .home-site-preview.home-preview-fullscreen .home-preview-edit-toggle span {
    display: none !important;
  }

  body.home-app .home-site-preview.home-preview-fullscreen:has(.home-visual-style-bar.is-visible) .home-preview-viewport {
    padding-bottom: 0 !important;
  }

  body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar:not([hidden]) {
    max-height: min(42vh, 360px);
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Écrans courts : fullscreen garde un dock éditable, pas la barre 4.5rem */
@media (max-height: 480px) {
  body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar.is-visible,
  body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar:not([hidden]) {
    position: relative !important;
    max-height: min(50vh, 280px) !important;
    overflow: auto !important;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
  }
}

body.home-app .home-preview-exit-fs svg {
  width: 16px;
  height: 16px;
}

body.home-app .home-preview-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--apple-radius-pill, 999px);
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  color: var(--apple-text-secondary, #aaa);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.home-app .home-preview-edit-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apple-text-tertiary, #666);
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

body.home-app .home-preview-edit-toggle.is-active .home-preview-edit-toggle__dot {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.55);
}

body.home-app .home-preview-edit-toggle svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-preview-edit-toggle.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.18);
  border-color: rgba(var(--okdak-accent-rgb), 0.45);
  color: #99f6e4;
  box-shadow: 0 0 0 1px rgba(var(--okdak-accent-rgb), 0.15);
}

body.home-app .home-preview-edit-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.home-app .home-preview-edit-toggle span {
  display: none;
}

@media (min-width: 900px) {
  body.home-app .home-preview-edit-toggle span {
    display: inline;
  }
}

body.home-app .home-module-preview.home-module-preview--editable [data-okdak-editing="true"] {
  outline: 2px dashed var(--okdak-accent) !important;
  outline-offset: 3px;
  background: rgba(var(--okdak-accent-rgb), 0.06) !important;
}

body.home-app .home-module-preview.home-module-preview--editable {
  cursor: text;
}

body.home-app .home-module-preview.home-module-preview--editable h1:hover,
body.home-app .home-module-preview.home-module-preview--editable h2:hover,
body.home-app .home-module-preview.home-module-preview--editable h3:hover,
body.home-app .home-module-preview.home-module-preview--editable p:hover,
body.home-app .home-module-preview.home-module-preview--editable a:hover,
body.home-app .home-module-preview.home-module-preview--editable li:hover,
body.home-app .home-module-preview.home-module-preview--editable span:hover {
  outline: 1px dashed rgba(var(--okdak-accent-rgb), 0.45);
  outline-offset: 2px;
}

body.home-app .home-module-preview.home-module-preview--editable img:hover {
  outline: 1px dashed rgba(251, 146, 60, 0.75);
  outline-offset: 2px;
  cursor: pointer;
}

body.home-app .home-theme-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0.75rem;
}

body.home-app .home-theme-pick {
  flex: 1 1 calc(50% - 6px);
  min-width: 4.5rem;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  color: var(--apple-text);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

body.home-app .home-theme-pick:hover {
  border-color: rgba(var(--okdak-accent-rgb), 0.45);
  background: rgba(var(--okdak-accent-rgb), 0.12);
}

body.home-app .home-theme-pick.is-active {
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  background: rgba(var(--okdak-accent-rgb), 0.2);
  box-shadow: inset 0 0 0 1px rgba(var(--okdak-accent-rgb), 0.35);
}

body.home-app .home-appearance-panel__body input[type="color"] {
  width: 100%;
  height: 36px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--apple-border);
  background: transparent;
  cursor: pointer;
}

body.home-app .home-preview-edit-chrome {
  position: relative;
  z-index: 12;
  /* pas d’isolation:isolate — elle créait un contexte qui piégeait les menus */
  flex-shrink: 0;
  overflow: visible;
}

body.home-app .home-canvas-insert-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 0.45rem;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 22, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  /* overflow-y:hidden coupait le panneau « + » — on scroll horizontalement via le track interne */
  overflow: visible;
  max-width: 100%;
  pointer-events: auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}

body.home-app .home-canvas-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-canvas-insert-bar__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: 100%;
  min-width: 0;
  flex: 1;
}

body.home-app .home-canvas-insert-bar[hidden] {
  display: none !important;
}

body.home-app .home-canvas-insert-bar__label {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f4f4f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  padding: 0 6px 0 4px;
  white-space: nowrap;
}

body.home-app .home-canvas-insert-btn i,
body.home-app .home-canvas-insert-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 1;
  color: #fff;
}

body.home-app .home-canvas-insert-btn:hover {
  background: rgba(var(--okdak-accent-rgb), 0.55);
  border-color: rgba(153, 246, 228, 0.7);
  color: #ffffff;
}

body.home-app .home-canvas-insert-btn--media {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(154, 52, 18, 0.75);
  color: #fff;
}

body.home-app .home-canvas-insert-btn--media:hover {
  background: rgba(234, 88, 12, 0.85);
  border-color: rgba(253, 186, 116, 0.7);
}

@media (max-width: 520px) {
  body.home-app .home-canvas-insert-btn span {
    display: none;
  }

  body.home-app .home-canvas-insert-btn {
    padding: 0 8px;
    min-width: 30px;
    justify-content: center;
  }

  body.home-app .home-canvas-insert-bar__label {
    display: none;
  }
}

body.home-app .home-site-preview.home-preview-fullscreen .home-canvas-insert-bar {
  margin: 0 0 6px;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  pointer-events: auto;
}

body.home-app .home-preview-edit-chrome .home-preview-hint {
  margin-top: 0.45rem;
  margin-bottom: 0.5rem;
}

body.home-app .home-preview-edit-chrome .home-visual-style-bar {
  margin-bottom: 0;
}

/* Barre compacte : une rangée scrollable, options avancées repliées */
body.home-app .home-visual-style-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 0.4rem;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(18, 18, 22, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  position: relative;
  z-index: 13;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
  max-width: 100%;
  min-width: 0;
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.home-app .home-visual-style-bar[hidden] {
  display: none !important;
}

/* ——— DOCK ÉDITION DIRECTE (cœur OkDak) ——— */
body.home-app .home-studio-preview-column .home-site-preview {
  position: relative;
}

body.home-app .home-visual-style-bar__media {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

body.home-app .home-visual-style-bar__media[hidden] {
  display: none !important;
}

/* Overlay bas : SEULEMENT le menu style — la barre d’insertion reste en haut
   (éviter insert + style empilés en bas = chevauchements). */
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) {
  isolation: isolate;
  position: relative;
}

/* Chrome en flux : insert bar au-dessus du viewport, pas dans le dock */
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock .home-preview-edit-chrome,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-preview-edit-chrome {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 18;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  max-height: none;
  overflow: visible;
  color: inherit;
  text-shadow: none;
  pointer-events: auto;
}

body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock .home-canvas-insert-bar,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-canvas-insert-bar {
  margin: 0 0 0.45rem;
  /* garde le verre propre en haut — ne pas hériter du dock */
  background: rgba(18, 18, 22, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.16);
}

/* Dock verre = menu de personnalisation uniquement */
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock .home-visual-style-bar.is-visible,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-visual-style-bar.is-visible {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin: 0;
  max-height: min(38vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: none;
  background: rgba(18, 18, 22, 0.58) !important;
  backdrop-filter: blur(28px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.45) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
  color: #f8fafc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock .home-preview-viewport,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-preview-viewport {
  min-height: var(--home-preview-min-h, min(48dvh, 480px));
  flex: 1 1 auto;
  padding-bottom: calc(min(38vh, 340px) + 0.35rem) !important;
}

body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-stamp-explorer__grid {
  max-height: min(16vh, 130px);
}

body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-visual-style-bar__primary,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-visual-style-bar__advanced-body {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Wrap : ne pas pousser Dupliquer avec margin-left:auto (chevauche/étire la rangée) */
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-duplicate {
  margin-left: 0;
}

body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-close {
  margin-left: auto;
}

/* Mobile onglet Aperçu : chrome / insert restent en haut ; bottom sheet = style bar fixed */

body.home-app .home-preview-edit-chrome:has(.home-visual-style-bar.is-visible) .home-preview-hint {
  display: none;
}

body.home-app .home-visual-style-bar__primary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 1px;
}

body.home-app .home-visual-style-bar__layers {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}

body.home-app .home-style-layer-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f4f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  padding: 0 4px 0 6px;
  white-space: nowrap;
}

body.home-app .home-style-layer,
body.home-app .home-style-layer-move {
  min-width: 1.7rem;
  height: 26px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 8, 12, 0.45);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-layer:hover,
body.home-app .home-style-layer-move:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.home-app .home-style-layer.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.35);
  border-color: rgba(var(--okdak-accent-rgb), 0.55);
  color: #f4f4f5;
}

body.home-app .home-style-layer[data-layer="fond"].is-active {
  background: rgba(100, 116, 139, 0.45);
  border-color: rgba(148, 163, 184, 0.5);
  color: #e2e8f0;
}

body.home-app .home-style-layer-move {
  opacity: 0.85;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 6px 6px 0;
}

body.home-app .home-style-overlay-toggle {
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--apple-text, #e2e8f0);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

body.home-app .home-style-overlay-toggle.is-active {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.55);
  color: #86efac;
}

body.home-app .home-style-nudge {
  display: inline-grid;
  grid-template-columns: repeat(4, 1.55rem);
  gap: 1px;
  margin-left: 2px;
}

body.home-app .home-style-nudge-btn {
  height: 26px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--apple-text, #e2e8f0);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

body.home-app .home-style-nudge-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.home-app .home-visual-style-bar__canvas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.12);
}

body.home-app .home-style-canvas-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f4f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  padding: 0 4px 0 6px;
  white-space: nowrap;
}

body.home-app .home-style-canvas-btn {
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 8, 12, 0.55);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-canvas-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

body.home-app .home-style-canvas-btn.is-active {
  background: rgba(var(--okdak-accent-deep-rgb), 0.28);
  border-color: rgba(var(--okdak-accent-rgb), 0.5);
  color: #99f6e4;
}

body.home-app .home-style-canvas-lock.is-active {
  background: rgba(251, 146, 60, 0.3);
  border-color: rgba(251, 146, 60, 0.55);
  color: #fdba74;
}

@media (max-width: 720px) {
  body.home-app .home-style-canvas-label {
    display: none;
  }

  body.home-app .home-style-canvas-btn[data-canvas-align="v"],
  body.home-app .home-style-canvas-btn[data-canvas-shadow="hard"] {
    display: none;
  }
}

@media (max-width: 720px) {
  body.home-app .home-style-layer-label {
    display: none;
  }

  body.home-app .home-style-layer[data-layer="devant"] {
    display: none;
  }

  body.home-app .home-style-nudge {
    grid-template-columns: repeat(2, 1.55rem);
  }
}

body.home-app .home-visual-style-bar__advanced {
  flex: 0 0 auto;
  margin: 0;
  min-width: 0;
}

body.home-app .home-visual-style-bar__advanced > summary {
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 800;
  color: #f4f4f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  padding: 2px 0;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}

body.home-app .home-visual-style-bar__advanced > summary::-webkit-details-marker {
  display: none;
}

body.home-app .home-visual-style-bar__advanced > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
}

body.home-app .home-visual-style-bar__advanced[open] > summary::before {
  transform: rotate(90deg);
}

body.home-app .home-visual-style-bar__advanced-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid rgba(var(--okdak-accent-rgb), 0.2);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

body.home-app .home-visual-style-bar__extra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: min(100%, 16rem);
  max-width: 100%;
}

body.home-app .home-visual-style-bar__extra-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #99f6e4;
  min-width: 2.25rem;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__url {
  flex: 1;
  min-width: 5rem;
  max-width: 12rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--apple-text);
  font-size: 0.7rem;
}

body.home-app .home-style-extra-apply {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--apple-blue-deep, var(--okdak-accent-deep));
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__spacing {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

body.home-app .home-style-pad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-pad-label {
  font-size: 0.62rem;
  color: var(--apple-text-secondary);
  padding: 0 1px;
  white-space: nowrap;
}

body.home-app .home-visual-style-bar--image .home-style-toggle,
body.home-app .home-visual-style-bar--image .home-style-align,
body.home-app .home-visual-style-bar--image .home-visual-style-bar__select,
body.home-app .home-visual-style-bar--image .home-visual-style-bar__presets,
body.home-app .home-visual-style-bar--image #homeStyleAccent,
body.home-app .home-visual-style-bar--stamp .home-style-toggle,
body.home-app .home-visual-style-bar--stamp .home-style-align,
body.home-app .home-visual-style-bar--stamp .home-visual-style-bar__select,
body.home-app .home-visual-style-bar--stamp .home-visual-style-bar__presets,
body.home-app .home-visual-style-bar--stamp #homeStyleAccent,
body.home-app .home-visual-style-bar--stamp #homeStyleBgColor,
body.home-app .home-visual-style-bar--stamp .home-visual-style-bar__field,
body.home-app .home-visual-style-bar--shape .home-style-toggle,
body.home-app .home-visual-style-bar--shape .home-style-align,
body.home-app .home-visual-style-bar--shape .home-visual-style-bar__select,
body.home-app .home-visual-style-bar--shape .home-visual-style-bar__presets,
body.home-app .home-visual-style-bar--shape #homeStyleAccent,
body.home-app .home-visual-style-bar--shape #homeStyleBgColor,
body.home-app .home-visual-style-bar--shape .home-visual-style-bar__field,
body.home-app .home-visual-style-bar--decor .home-style-toggle,
body.home-app .home-visual-style-bar--decor .home-style-align,
body.home-app .home-visual-style-bar--decor .home-visual-style-bar__select,
body.home-app .home-visual-style-bar--decor .home-visual-style-bar__presets,
body.home-app .home-visual-style-bar--decor #homeStyleAccent,
body.home-app .home-visual-style-bar--decor #homeStyleBgColor,
body.home-app .home-visual-style-bar--decor .home-visual-style-bar__field {
  display: none;
}

body.home-app .home-stamp-explorer {
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.55rem 0.35rem 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 8px 8px;
  background: transparent;
}

body.home-app .home-stamp-explorer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

body.home-app .home-stamp-explorer__head strong {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

body.home-app .home-stamp-explorer__search {
  flex: 1 1 140px;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--apple-text);
  font-size: 0.75rem;
}

body.home-app .home-stamp-explorer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.45rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.15rem;
}

body.home-app .home-stamp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.45rem 0.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: center;
  color: var(--apple-text);
  transition: border-color 0.15s, background 0.15s;
}

body.home-app .home-stamp-card:hover,
body.home-app .home-stamp-card.is-selected {
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  background: color-mix(in srgb, var(--apple-blue-deep, var(--okdak-accent-deep)) 8%, transparent);
}

body.home-app .home-stamp-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  width: 100%;
}

body.home-app .home-stamp-card__visual .doc-stamp__svg {
  max-width: 72px;
  height: auto;
  transform: none;
}

body.home-app .home-stamp-card__label {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

body.home-app .home-stamp-card__meta {
  font-size: 0.55rem;
  color: var(--apple-text-secondary);
}

body.home-app .home-stamp-explorer__hint,
body.home-app .home-stamp-explorer__empty {
  margin: 0.4rem 0 0;
  font-size: 0.65rem;
  color: var(--apple-text-secondary);
  line-height: 1.35;
}

body.home-app .okdak-block-card__visual--stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  background: #f8fafc;
}

body.home-app .okdak-block-card__visual--stamp .doc-stamp__svg {
  max-width: 96px;
  height: auto;
}

body.home-app .okdak-block-card--stamp .okdak-block-card__desc {
  text-transform: capitalize;
}

body.home-app .home-shape-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin: 0.35rem 0 0.55rem;
  font-size: 0.68rem;
  color: var(--apple-text-secondary);
}

body.home-app .home-shape-style-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body.home-app .home-shape-style-row select,
body.home-app .home-shape-style-row input[type="color"] {
  border: 1px solid var(--apple-border);
  border-radius: 6px;
  background: var(--apple-fill-tertiary);
  color: var(--apple-text);
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
}

body.home-app .okdak-shape-subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  grid-column: 1 / -1;
  margin-bottom: 0.35rem;
}

body.home-app .okdak-shape-subcat {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .okdak-shape-subcat.is-active {
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
}

body.home-app .okdak-shape-subcat span {
  opacity: 0.75;
  font-weight: 500;
  margin-left: 0.2rem;
}

body.home-app .okdak-shape-grid {
  display: contents;
}

body.home-app .okdak-block-card__visual--shape {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  background: #f8fafc;
  color: #18181b;
}

body.home-app .okdak-block-card__visual--shape .okdak-shape__svg {
  width: 40px;
  height: 40px;
}

body.home-app .okdak-block-card--shape.is-featured {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--apple-blue-deep, var(--okdak-accent-deep)) 35%, transparent);
}

body.home-app .okdak-shape-more {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  width: 100%;
  border: 1px dashed var(--apple-border);
  background: var(--apple-fill-tertiary);
  color: var(--apple-text);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

body.home-app .okdak-shape-more:hover {
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: var(--apple-blue-deep, var(--okdak-accent-deep));
}

body.home-app .home-shape-size-chips {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}

body.home-app .home-shape-size-chips button {
  min-width: 1.85rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--apple-border);
  border-radius: 6px;
  background: var(--apple-fill-tertiary);
  color: var(--apple-text);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

body.home-app .home-shape-card.is-featured .home-stamp-card__label::after {
  content: " ★";
  opacity: 0.55;
  font-size: 0.65em;
}

body.home-app .home-visual-style-bar__presets {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

body.home-app .home-style-preset {
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-preset.is-active {
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
}

body.home-app .home-style-accent {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--apple-blue-deep, var(--okdak-accent-deep));
  background: transparent;
  color: #99f6e4;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__select--font {
  max-width: 5.5rem;
}

body.home-app .home-visual-style-bar__radius {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

body.home-app .home-style-radius {
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 0.62rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-radius.is-active {
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
}

body.home-app .home-style-delete {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

body.home-app .home-style-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-close:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Preview normal : wrap + menu compact + contraste */
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-visual-style-bar__primary,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-visual-style-bar__advanced-body {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* compact-open obsolète : le dock overlay gère max-height via le chrome */
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar--compact-open.is-visible {
  max-height: none;
}

body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-preset,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-align,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-toggle,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-pad,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-radius,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-layer,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-canvas-btn,
body.home-app:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible .home-style-nudge-btn {
  background: rgba(8, 8, 12, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

@media (pointer: coarse) {
  body.home-app .home-style-preset,
  body.home-app .home-style-align,
  body.home-app .home-style-toggle,
  body.home-app .home-style-pad,
  body.home-app .home-style-radius,
  body.home-app .home-style-layer,
  body.home-app .home-style-layer-move,
  body.home-app .home-style-canvas-btn,
  body.home-app .home-style-nudge-btn,
  body.home-app .home-style-close,
  body.home-app .home-canvas-insert-btn {
    min-height: 40px;
    min-width: 40px;
  }

  body.home-app .home-style-overlay-toggle,
  body.home-app .home-style-delete,
  body.home-app .home-style-duplicate,
  body.home-app .home-style-upload,
  body.home-app .home-style-clear {
    min-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

body.home-app .home-style-duplicate {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.14);
  color: #6ee7b7;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

body.home-app .home-style-upload {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--apple-border);
  background: var(--apple-fill-tertiary);
  color: var(--apple-text);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

body.home-app .home-style-upload:disabled {
  opacity: 0.55;
  cursor: wait;
}

body.home-app .home-visual-style-bar__target {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  min-width: 0;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__field {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__field input[type="color"] {
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
}

body.home-app .home-visual-style-bar__field svg {
  width: 12px;
  height: 12px;
  opacity: 0.8;
  flex-shrink: 0;
}

body.home-app .home-visual-style-bar__select {
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: var(--apple-text);
  font-size: 0.68rem;
  flex-shrink: 0;
  max-width: 5.75rem;
}

body.home-app .home-visual-style-bar__align {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}

body.home-app .home-style-align,
body.home-app .home-style-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 8, 12, 0.72);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

body.home-app .home-style-align svg {
  width: 13px;
  height: 13px;
}

body.home-app .home-style-align.is-active,
body.home-app .home-style-toggle.is-active {
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  border-color: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
}

body.home-app .home-visual-style-bar .home-style-clear {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--apple-border);
  background: transparent;
  color: var(--apple-text-secondary);
  font-size: 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

body.home-app .home-code-appearance-hint {
  margin-bottom: 0.75rem;
}

body.home-app .home-preview-viewport[data-device="desktop"] {
  padding-bottom: 1.5rem;
}

body.home-app .home-preview-viewport[data-visual-edit="on"] {
  box-shadow: inset 0 0 0 1px rgba(var(--okdak-accent-rgb), 0.25);
}

body.home-app .home-preview-hint.is-editing {
  color: #99f6e4;
  border-left: 3px solid rgba(var(--okdak-accent-rgb), 0.55);
  padding-left: 0.65rem;
}

body.home-app .okdak-block-card--asset .okdak-block-card__visual--shape {
  background: #f8fafc;
  color: #18181b;
}

/* ——— Menu Déco (assets) ——— */
body.home-app .okdak-block-cat--media {
  border-color: rgba(var(--okdak-accent-rgb), 0.22);
}

body.home-app .okdak-asset-menu {
  display: contents;
}

body.home-app .okdak-asset-menu__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.15rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--okdak-accent-rgb), 0.22);
  background: linear-gradient(135deg, rgba(var(--okdak-accent-rgb), 0.12), rgba(24, 24, 27, 0.35));
}

body.home-app .okdak-asset-menu__head strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--okdak-accent-soft);
}

body.home-app .okdak-asset-menu__head span {
  font-size: 0.7rem;
  color: var(--apple-text-secondary, #a1a1aa);
}

body.home-app .okdak-asset-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.45rem;
}

body.home-app .okdak-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--apple-text-secondary, #d4d4d8);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

body.home-app .okdak-asset-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

body.home-app .okdak-asset-chip__count {
  opacity: 0.55;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

body.home-app .okdak-asset-chip:hover {
  border-color: rgba(var(--okdak-accent-rgb), 0.4);
  color: #fff;
}

body.home-app .okdak-asset-chip.is-active {
  background: rgba(var(--okdak-accent-rgb), 0.22);
  border-color: rgba(var(--okdak-accent-rgb), 0.55);
  color: #f4f4f5;
}

body.home-app .okdak-asset-chip.is-active .okdak-asset-chip__count {
  opacity: 0.8;
}

body.home-app .okdak-asset-chips--compact .okdak-asset-chip {
  padding: 0.28rem 0.5rem;
  font-size: 0.65rem;
}

body.home-app .okdak-asset-chips--compact .okdak-asset-chip__count {
  display: none;
}

body.home-app .okdak-asset-grid {
  display: contents;
}

body.home-app .okdak-block-card__visual--asset {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 0.65rem;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--okdak-accent-rgb), 0.12), transparent 55%),
    linear-gradient(160deg, #1a1a1e, #0f1115);
  color: #e2e8f0;
}

body.home-app .okdak-block-card__visual--asset .okdak-decor__svg {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
}

body.home-app .okdak-block-card--asset.is-featured {
  box-shadow: inset 0 0 0 1px rgba(var(--okdak-accent-rgb), 0.35);
}

body.home-app .okdak-asset-tag {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.home-app .home-decor-explorer .okdak-asset-chips {
  margin-bottom: 0.5rem;
}

body.home-app .okdak-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 0.55rem;
  grid-column: 1 / -1;
}

body.home-app .okdak-block-card__visual--photo {
  display: block;
  min-height: 88px;
  max-height: 110px;
  overflow: hidden;
  background: #09090b;
  padding: 0;
}

body.home-app .okdak-block-card__visual--photo img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

body.home-app .okdak-photo-banks .okdak-photo-bank {
  text-decoration: none;
  opacity: 0.9;
}

body.home-app .okdak-photo-hint,
body.home-app .okdak-photo-loading,
body.home-app .okdak-photo-empty {
  grid-column: 1 / -1;
  margin: 0.15rem 0 0.35rem;
  font-size: 0.72rem;
  color: var(--apple-text-secondary, #a1a1aa);
}

body.home-app .home-stock-card__visual {
  min-height: 72px;
  padding: 0;
  overflow: hidden;
}

body.home-app .home-stock-card__visual img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

body.home-app .home-stock-themes {
  margin-bottom: 0.45rem;
}

body.home-app .home-preview-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--apple-border);
  background: var(--apple-fill-tertiary);
  font-size: 0.68rem;
  font-family: inherit;
}

body.home-app .home-visual-style-bar__alt {
  max-width: 7rem;
}

@media (max-width: 960px) {
  /* Onglet Aperçu mobile : bottom sheet viewport */
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 42;
    margin: 0;
    border-radius: 12px 12px 0 0;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px));
    max-height: min(22vh, 180px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
    background: rgba(18, 18, 22, 0.62) !important;
    backdrop-filter: blur(28px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: none;
    color: #f8fafc;
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible:has(.home-visual-style-bar__advanced[open]),
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar--has-media.is-visible {
    max-height: min(40vh, 340px);
  }

  /* Colonne étroite : le dock est sur la style bar, pas sur tout le chrome */
  body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-visual-style-bar.is-visible {
    max-height: min(38vh, 320px);
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar.is-visible) .home-preview-viewport {
    padding-bottom: calc(min(22vh, 180px) + 0.5rem);
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar--has-media.is-visible) .home-preview-viewport,
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar.is-visible .home-visual-style-bar__advanced[open]) .home-preview-viewport {
    padding-bottom: calc(min(40vh, 340px) + 0.5rem);
  }

  body.home-app .home-visual-style-bar__target {
    max-width: 3.5rem;
  }

  body.home-app .home-style-delete {
    margin-left: 0;
  }

  body.home-app .home-style-preset[data-preset="subtitle"] {
    font-size: 0;
  }

  body.home-app .home-style-preset[data-preset="subtitle"]::after {
    content: 'Sous';
    font-size: 0.62rem;
    font-weight: 600;
  }

  /* Plein écran : dock bas (pas la barre fixed mobile classique) */
  body.home-app .home-site-preview.home-preview-fullscreen .home-visual-style-bar.is-visible,
  body.home-app.home-preview-fullscreen-open .home-site-preview.home-preview-fullscreen .home-visual-style-bar.is-visible {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-height: min(42vh, 360px) !important;
    border-radius: 12px !important;
    margin: 0 !important;
    padding: 8px 10px 4px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-app .home-site-preview.home-preview-fullscreen:has(.home-visual-style-bar.is-visible) .home-preview-viewport {
    padding-bottom: 0 !important;
  }
}

/* ——— CodeMirror ——— */
body.home-app .code-container {
  position: relative;
}

body.home-app .code-container .CodeMirror {
  min-height: clamp(200px, 32vh, 360px);
  height: auto !important;
  font-size: 0.875rem;
  line-height: 1.45;
  border-radius: 10px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
}

body.home-app .code-container .CodeMirror-scroll {
  min-height: clamp(200px, 32vh, 360px);
  max-height: min(70dvh, 640px);
}

@media (max-width: 768px) {
  body.home-app .code-container .CodeMirror {
    min-height: 240px;
    font-size: 0.8rem;
  }

  body.home-app .code-container .CodeMirror-scroll {
    min-height: 240px;
    max-height: min(50dvh, 420px);
  }

  body.home-app .home-preview-viewport {
    min-height: var(--home-preview-min-h, clamp(320px, 50dvh, 520px));
    padding: var(--home-preview-pad-y, 0.55rem) var(--home-preview-pad-x, 0.35rem) calc(var(--home-preview-pad-y, 0.55rem) * 1.15);
  }

  body.home-app .home-preview-viewport[data-device='desktop'] .home-device-frame__screen {
    min-height: 0 !important;
    max-height: var(--home-screen-desktop-max-h, min(58dvh, 520px));
  }

  body.home-app .home-preview-viewport[data-device='desktop'] .home-device-frame {
    width: 100%;
    max-width: 100%;
  }

  body.home-app .home-preview-viewport[data-device='mobile'] .home-device-frame {
    width: min(360px, calc(100% - 0.5rem), calc(82dvh * 9 / 19.5));
  }

  body.home-app .home-preview-viewport[data-device='tablet'] .home-device-frame {
    width: min(400px, calc(100% - 0.5rem), calc(76dvh * 3 / 4));
  }
}

body.home-app .code-container .CodeMirror-wrap {
  margin-bottom: 0;
}

body.home-app .code-container textarea.code-editor.cm-bound {
  display: none !important;
}

body.home-app .code-container pre#highlighted-code {
  display: none;
}

/* ——— Snapshots ——— */
body.home-app .home-snapshots-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

body.home-app .home-snapshot-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--apple-border);
  background: var(--apple-fill-tertiary);
  color: var(--apple-text);
  font-size: 0.8125rem;
  cursor: pointer;
}

body.home-app .home-snapshot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.home-app .home-snapshot-btn svg {
  width: 14px;
  height: 14px;
}

body.home-app .home-snapshot-select {
  min-width: 140px;
  max-width: 200px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--apple-border);
  background: var(--apple-bg-elevated, #1c1c1e);
  color: var(--apple-text);
  font-size: 0.8125rem;
}

body.home-app .home-autosave-status {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  color: var(--apple-text-secondary, #888);
  margin-top: 4px;
  min-height: 1rem;
}

/* ——— SEO panel ——— */
body.home-app .home-seo-panel {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  overflow: visible;
}

body.home-app .home-editor-pane--sources {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(calc(100dvh - 8.5rem), 52rem);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
  scrollbar-gutter: stable;
}

body.home-app .home-seo-panel__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

body.home-app .home-seo-panel__summary::-webkit-details-marker {
  display: none;
}

body.home-app .home-seo-panel__summary svg {
  width: 16px;
  height: 16px;
  color: var(--apple-blue, var(--okdak-accent));
}

body.home-app .home-seo-panel__body {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

body.home-app .home-seo-panel__body label {
  font-size: 0.8125rem;
  color: var(--apple-text-secondary);
  margin-bottom: -0.25rem;
}

body.home-app .home-seo-panel__body input,
body.home-app .home-seo-panel__body textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--apple-border);
  background: rgba(0, 0, 0, 0.2);
  color: var(--apple-text);
  font-size: 0.875rem;
}

body.home-app .home-seo-apply {
  margin-top: 0.25rem;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--apple-blue-deep, var(--okdak-accent-deep));
  color: #09090b;
  font-weight: 500;
  cursor: pointer;
}

body.home-app .home-seo-hint {
  font-size: 0.75rem;
  color: var(--apple-text-secondary);
  margin: 0;
}

body.home-app .home-seo-hint.is-warn {
  color: #ff9f0a;
}

body.home-app .home-seo-divider {
  border: none;
  border-top: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  margin: 1rem 0 0.75rem;
}

body.home-app .home-seo-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--apple-text-secondary);
  margin: 0.75rem 0 0.35rem;
  cursor: pointer;
}

body.home-app .home-seo-toggle input {
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  max-width: 1.15rem !important;
  margin-top: 0.15rem;
  padding: 0 !important;
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  accent-color: var(--apple-blue, var(--okdak-accent-deep));
}

body.home-app .home-seo-file-editor {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.45;
  min-height: 5rem;
  resize: vertical;
}

body.home-app .home-seo-file-editor:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.home-app .home-seo-icon-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

body.home-app .home-seo-icon-row input {
  flex: 1;
  min-width: 0;
}

body.home-app .home-seo-icon-upload {
  flex-shrink: 0;
  white-space: nowrap;
}

body.home-app .home-seo-icon-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.06);
  margin-top: 6px;
}

.home-section-subheading {
  font-size: 0.9rem;
  margin: 1rem 0 0.5rem;
  opacity: 0.85;
}

.home-template-pro-label {
  font-size: 0.7rem;
  background: #ffd54f;
  color: #18181b;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.35rem;
}

.home-template-picks--free {
  margin-bottom: 0.5rem;
}

.home-template-pick--free {
  border-color: rgba(var(--okdak-accent-rgb), 0.35);
}

/* ——— Onboarding mobile (Play Store / TWA) ——— */
body.home-app.home-mobile-onboarding .home-tour__card--mobile {
  width: calc(100% - 24px) !important;
  max-width: 420px;
  left: 12px !important;
  right: 12px;
  border-radius: 16px;
}

body.home-app.home-mobile-onboarding .home-tour__card--mobile .home-tour__actions {
  flex-wrap: wrap;
  gap: 8px;
}

body.home-app.home-mobile-onboarding .home-onboarding__card {
  max-height: min(88vh, 640px);
  overflow-y: auto;
}

body.home-app.home-mobile-onboarding #homePublishSticky {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ——— Viewports courts (≤480px) : frame plat UNIQUEMENT en desktop ——— */
@media (max-height: 480px) {
  body.home-app .home-preview-viewport[data-device="desktop"] {
    min-height: 0 !important;
    max-height: none !important;
    padding: 0.2rem !important;
    align-items: stretch;
    justify-content: stretch;
    perspective: none;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
  }

  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame.is-switching {
    animation: none;
  }

  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 !important;
    border-radius: 8px !important;
    background: #0c0c0e !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-cam,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__browser,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__desktop-chin,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__stand,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__ground,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__bezel,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__side,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__status,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__tablet-chrome,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__tablet-home,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__home-indicator,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__glare,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__glass,
  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__footer {
    display: none !important;
  }

  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__screen {
    position: relative !important;
    flex: 1 1 auto;
    width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  body.home-app .home-preview-viewport[data-device="desktop"] .home-device-frame__screen iframe#preview {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--home-device-vw, 100%) !important;
    height: var(--home-device-vh, 100%) !important;
    min-height: 0 !important;
    transform: scale(calc(var(--home-device-fit, 1) * var(--home-preview-zoom, 1)));
    transform-origin: 0 0;
    border: 0;
  }

  /* Handsets en viewport court : juste un peu plus petits, cadre conservé */
  body.home-app .home-preview-viewport[data-device="mobile"] .home-device-frame {
    width: min(300px, calc(100% - 0.5rem), calc(78dvh * 9 / 19.5)) !important;
  }

  body.home-app .home-preview-viewport[data-device="tablet"] .home-device-frame {
    width: min(280px, calc(100% - 0.5rem), calc(70dvh * 3 / 4)) !important;
  }

  /* Viewports courts : garder le bottom sheet fixed, hauteur un peu plus basse */
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible {
    max-height: min(20vh, 150px);
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar.is-visible:has(.home-visual-style-bar__advanced[open]),
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open) .home-visual-style-bar--has-media.is-visible {
    max-height: min(36vh, 280px);
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar.is-visible) .home-preview-viewport {
    padding-bottom: calc(min(20vh, 150px) + 0.5rem);
  }

  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar--has-media.is-visible) .home-preview-viewport,
  body.home-app.home-studio-mobile-preview:not(.home-preview-fullscreen-open):has(.home-visual-style-bar.is-visible .home-visual-style-bar__advanced[open]) .home-preview-viewport {
    padding-bottom: calc(min(36vh, 280px) + 0.5rem);
  }
}

/* ——— Brand Kit / Médiathèque / Multi-pages ——— */
body.home-app .home-brand-logo-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

body.home-app .home-brand-logo-controls {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

body.home-app .home-brand-logo-controls input[type="url"],
body.home-app .home-brand-logo-controls input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(255,255,255,.15));
  background: var(--apple-fill-tertiary, rgba(255,255,255,.06));
  color: inherit;
  font-size: 0.8rem;
}

body.home-app .home-brand-logo-preview {
  margin-top: 0.35rem;
}

body.home-app .home-brand-favicon-row {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.home-app .home-brand-favicon-hint {
  font-weight: 500;
  opacity: 0.65;
  font-size: 0.78em;
}

body.home-app .home-brand-favicon-lead {
  margin: 0.35rem 0 0;
}

body.home-app .home-brand-favicon-preview {
  margin-top: 0.45rem;
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.home-app .home-seo-goto-appearance {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--apple-accent, var(--okdak-accent));
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

body.home-app .home-seo-goto-appearance:hover {
  filter: brightness(1.08);
}

body.home-app .home-brand-logo-preview img {
  margin-top: 0.25rem;
  padding: 0.4rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

body.home-app .home-project-media__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.45rem;
  margin-top: 0.65rem;
}

body.home-app .home-project-media__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  color: inherit;
  text-align: left;
}

body.home-app .home-project-media__item:hover {
  border-color: rgba(var(--okdak-accent-rgb), 0.55);
}

body.home-app .home-project-media__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

body.home-app .home-project-media__name {
  font-size: 0.65rem;
  padding: 0 0.3rem 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.75;
}

body.home-app .home-code-pages {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

body.home-app .home-code-pages[hidden] {
  display: none !important;
}

body.home-app .home-code-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

body.home-app .home-code-page-btn i,
body.home-app .home-code-page-btn svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  display: block;
}

body.home-app .home-code-page-btn:hover {
  background: rgba(var(--okdak-accent-rgb), 0.35);
}

body.home-app .home-code-page-btn:focus-visible {
  outline: 2px solid rgba(var(--okdak-accent-rgb), 0.85);
  outline-offset: 2px;
}

body.home-app .home-code-page-btn--delete:hover {
  background: rgba(248, 113, 113, 0.28);
  border-color: rgba(248, 113, 113, 0.45);
}

/* ——— Boutique Studio ——— */
body.home-app .home-shop-products {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.75rem 0;
  max-height: 320px;
  overflow: auto;
}

body.home-app .home-shop-product {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
  padding: 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

body.home-app .home-shop-product__main {
  display: grid;
  gap: 0.35rem;
}

body.home-app .home-shop-product__main input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.8rem;
}

body.home-app .home-shop-product__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

body.home-app .home-shop-product__active {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.9;
}

body.home-app .home-shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

body.home-app .home-shop-product__row2 {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 0.35rem;
}

body.home-app .home-shop-low-stock {
  font-size: 0.72rem;
  color: #fbbf24;
  font-weight: 600;
}

body.home-app .home-shop-subtitle {
  margin: 1rem 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

body.home-app .home-shop-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}

body.home-app .home-shop-connect {
  margin: 0.65rem 0;
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

body.home-app .home-shop-connect input[type='password'],
body.home-app .home-shop-connect input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.8rem;
  margin: 0.25rem 0 0.55rem;
}

body.home-app .home-shop-connect-alt {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.9;
}

body.home-app .home-shop-connect-alt summary {
  cursor: pointer;
  margin-bottom: 0.4rem;
}

body.home-app #homeShopConnectStatus[data-state='ok'] { color: #86efac; }
body.home-app #homeShopConnectStatus[data-state='pending'] { color: #fde68a; }

body.home-app .home-shop-promos,
body.home-app .home-shop-orders {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
  max-height: 280px;
  overflow: auto;
}

body.home-app .home-shop-promo {
  display: grid;
  grid-template-columns: 1fr auto 4rem auto;
  gap: 0.35rem;
  align-items: center;
}

body.home-app .home-shop-promo input,
body.home-app .home-shop-promo select {
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.8rem;
}

body.home-app .home-shop-order {
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
}

body.home-app .home-shop-order header {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

body.home-app .home-shop-order__status {
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

body.home-app .home-shop-order__status[data-status='paid'] { color: #86efac; }
body.home-app .home-shop-order__status[data-status='fulfilled'] { color: #93c5fd; }
body.home-app .home-shop-order__status[data-status='pending'] { color: #fde68a; }

body.home-app .home-shop-order__meta,
body.home-app .home-shop-order__items,
body.home-app .home-shop-order__addr {
  margin: 0.15rem 0;
  opacity: 0.85;
}

body.home-app .home-shop-order__actions {
  margin-top: 0.45rem;
}

body.home-app .home-shop-analytics {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
}

body.home-app .home-shop-plan-gate {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}

body.home-app .home-shop-enable {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

body.home-app .home-shop-enable input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

body.home-app .home-shop-enable span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

body.home-app .home-shop-enable strong {
  font-size: 0.92rem;
  font-weight: 600;
}

body.home-app .home-shop-enable small {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.35;
}

body.home-app .home-shop-payments {
  margin: 0.5rem 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

body.home-app .home-shop-payments[data-state='ok'] {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
}

body.home-app .home-shop-payments[data-state='pending'] {
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}

body.home-app .home-shop-payments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

body.home-app .home-shop-payments__title {
  font-size: 0.85rem;
  font-weight: 700;
}

body.home-app .home-shop-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(161, 161, 170, 0.2);
  color: #d4d4d8;
}

body.home-app .home-shop-pill[data-state='ok'] {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

body.home-app .home-shop-pill[data-state='pending'] {
  background: rgba(251, 191, 36, 0.2);
  color: #fde68a;
}

body.home-app .home-shop-pill[data-state='off'] {
  background: rgba(161, 161, 170, 0.18);
  color: #a1a1aa;
}

body.home-app .home-shop-ready-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.78rem;
  color: #86efac;
}

body.home-app #homeShopConnectStatus[data-state='ok'] {
  color: #86efac;
}

body.home-app #homeShopConnectStatus[data-state='pending'] {
  color: #fde68a;
}

body.home-app .home-shop-order__total {
  margin: 0.25rem 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
}

body.home-app .home-shop-order__status[data-status='paid'],
body.home-app .home-shop-order__status[data-status='fulfilled'] {
  font-weight: 700;
}

body.home-app #homeShopTaxRate {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

/* —— Wizard boutique + presets —— */
body.home-app .home-shop-wizard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.home-app .home-shop-wizard__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
}

body.home-app .home-shop-wizard__step {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 8px;
  padding: 0.45rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.7;
}

body.home-app .home-shop-wizard__step[data-active='1'] {
  opacity: 1;
  border-color: rgba(99, 91, 255, 0.55);
  background: rgba(99, 91, 255, 0.12);
}

body.home-app .home-shop-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

body.home-app .home-shop-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

body.home-app .home-shop-preset[data-active='1'],
body.home-app .home-shop-preset[aria-selected='true'] {
  border-color: rgba(99, 91, 255, 0.55);
  background: rgba(99, 91, 255, 0.1);
}

body.home-app .home-shop-preset__swatch {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  margin-bottom: 0.2rem;
}

body.home-app .home-shop-preset__swatch[data-style='classic'] {
  background: linear-gradient(135deg, #fff 40%, #e5e7eb 40%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.home-app .home-shop-preset__swatch[data-style='photo'] {
  background: linear-gradient(180deg, #94a3b8 45%, #1e293b 45%);
}

body.home-app .home-shop-preset__swatch[data-style='minimal'] {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.35);
}

body.home-app .home-shop-preset__swatch[data-style='dark'] {
  background: linear-gradient(135deg, #111, #333);
}

body.home-app .home-shop-preset__label {
  font-size: 0.8rem;
  font-weight: 700;
}

body.home-app .home-shop-preset__hint {
  font-size: 0.68rem;
  opacity: 0.65;
}

body.home-app .home-shop-style-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
}

body.home-app .home-shop-style-row input,
body.home-app .home-shop-style-row select,
body.home-app #homeShopWizardTitle,
body.home-app #homeShopWizardCols,
body.home-app #homeShopSectionTitle,
body.home-app #homeShopGridCols {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 0.8rem;
}

body.home-app .home-shop-pay-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

body.home-app .home-shop-pay-choice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

body.home-app .home-shop-pay-choice:has(input:checked) {
  border-color: rgba(99, 91, 255, 0.5);
  background: rgba(99, 91, 255, 0.1);
}

body.home-app .home-shop-pay-choice strong {
  display: block;
  font-size: 0.85rem;
}

body.home-app .home-shop-pay-choice small {
  display: block;
  opacity: 0.7;
  font-size: 0.72rem;
  line-height: 1.35;
  margin-top: 0.15rem;
}

body.home-app .home-shop-more {
  margin: 0.75rem 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.home-app .home-shop-more summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.8rem;
}

body.home-app .home-shop-restart {
  margin-top: 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

body.home-app .home-shop-restart:hover {
  opacity: 0.9;
}

body.home-app .home-shop-payments--collapsed .home-shop-actions,
body.home-app .home-shop-payments--collapsed #homeShopFeeHint,
body.home-app .home-shop-payments--collapsed #homeShopConnectStatus,
body.home-app .home-shop-payments--collapsed #homeShopStripeReadyHint {
  display: none;
}

body.home-app .home-shop-product__imgcol {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body.home-app .home-shop-product__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  display: block;
}

body.home-app .home-shop-product__thumb--empty {
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

body.home-app .home-shop-product__pick {
  font-size: 0.65rem !important;
  padding: 0.25rem 0.35rem !important;
  line-height: 1.2;
}

body.home-app .home-shop-product__advanced {
  margin-top: 0.35rem;
}

body.home-app .home-shop-product__advanced summary {
  font-size: 0.72rem;
  opacity: 0.7;
  cursor: pointer;
}

body.home-app .home-shop-media-picker {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

body.home-app .home-shop-media-picker[hidden] {
  display: none !important;
}

body.home-app .home-shop-media-picker__panel {
  width: min(420px, 100%);
  max-height: min(70vh, 520px);
  overflow: auto;
  background: #1a1a1f;
  color: #f5f5f5;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem;
}

body.home-app .home-shop-media-picker__panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

body.home-app .home-shop-media-picker__panel header button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}

body.home-app .home-shop-media-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

body.home-app .home-shop-media-picker__item {
  border: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #111;
  aspect-ratio: 1;
}

body.home-app .home-shop-media-picker__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ——— Calm edit UX: puissance intacte, surface plus simple ——— */
body.home-app .home-phase-hero--calm {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.55rem;
  align-items: center;
}

body.home-app .home-phase-hero--calm .home-phase-title {
  margin: 0;
  font-size: 1.05rem;
}

body.home-app .home-module-studio__head--calm {
  margin-bottom: 0.45rem;
  gap: 0.5rem;
}

body.home-app .home-module-studio__head--calm .home-section-heading {
  margin: 0;
  font-size: 1rem;
}

body.home-app .home-module-flow--calm[hidden] {
  display: none !important;
}

body.home-app .home-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.35rem;
}

body.home-app .home-sources-head .home-pane-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--apple-accent, var(--okdak-accent));
  opacity: 1;
}

body.home-app .home-sources-lead {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.78;
}

body.home-app .home-sources-close {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

body.home-app .home-sources-close:hover,
body.home-app .home-sources-close:focus-visible {
  border-color: color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 45%, transparent);
  outline: none;
}

body.home-app .home-editor-pane--sources > .home-seo-panel {
  margin: 0 0 0.55rem;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--apple-fill-tertiary, rgba(255, 255, 255, 0.06)) 100%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  flex: 0 0 auto;
  min-height: 0;
}

body.home-app .home-editor-pane--sources > .home-seo-panel:last-of-type {
  margin-bottom: 0;
}

body.home-app .home-editor-pane--sources .home-seo-panel__summary {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--apple-bg, #0c0c0e) 88%, transparent);
  border-radius: 12px 12px 0 0;
}

html[data-okdak-theme="light"] body.home-app .home-editor-pane--sources .home-seo-panel__summary,
body.light-theme.home-app .home-editor-pane--sources .home-seo-panel__summary {
  background: color-mix(in srgb, #f6f4ef 94%, transparent);
}

body.home-app .home-editor-pane--sources .home-seo-panel__summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.15s ease;
}

body.home-app .home-editor-pane--sources > .home-seo-panel[open] > .home-seo-panel__summary::after {
  transform: rotate(-135deg);
  margin-top: 0.2rem;
}

body.home-app .home-editor-pane--sources .home-seo-panel__body {
  margin: 0;
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--apple-border, rgba(255, 255, 255, 0.08));
}

body.home-app .home-editor-pane--sources > .home-seo-panel[open] > .home-seo-panel__body {
  max-height: min(58dvh, 30rem);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 1rem;
}

body.home-app .home-preview-hint--calm {
  margin: 0.35rem 0 0.4rem;
  font-size: 0.78rem;
  opacity: 0.78;
}

body.home-app .home-preview-more-tools {
  position: relative;
  z-index: 80;
  flex-shrink: 0;
}

body.home-app .home-preview-more-tools > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 45%, transparent);
  background: color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 16%, transparent);
  color: #fdba74;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
}

body.home-app .home-preview-more-tools > summary i,
body.home-app .home-preview-more-tools > summary svg {
  width: 0.95rem;
  height: 0.95rem;
}

body.home-app .home-preview-more-tools > summary::-webkit-details-marker {
  display: none;
}

body.home-app .home-preview-more-tools[open] > summary {
  border-color: color-mix(in srgb, var(--apple-blue, var(--okdak-accent)) 55%, transparent);
  background: color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 28%, transparent);
}

body.home-app .home-preview-more-tools__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 90;
  margin: 0;
  padding: 0.55rem;
  min-width: 14rem;
  max-width: min(92vw, 18rem);
  border-radius: 12px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.14));
  background: rgba(18, 18, 22, 0.94);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

body.home-app .home-preview-more-tools:not([open]) > .home-preview-more-tools__panel {
  display: none;
}

body.home-app .home-preview-more-tools__cat {
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
}

body.home-app .home-preview-more-tools__cat:first-child {
  margin-top: 0;
}

body.home-app .home-preview-more-tools__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.home-app .home-preview-more-tools__item:hover,
body.home-app .home-preview-more-tools__item:focus-visible {
  background: rgba(var(--okdak-accent-rgb), 0.14);
  outline: none;
}

body.home-app .home-preview-more-tools__item i,
body.home-app .home-preview-more-tools__item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.9;
}

body.home-app .home-preview-more-tools .home-export-bar {
  position: static;
  right: auto;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.home-app .home-preview-more-tools .home-export-menu__trigger {
  width: 100%;
  justify-content: flex-start;
  min-height: 2.35rem;
}

/* Portail body : toujours au-dessus de l’iframe / overflow */
body.home-app .home-preview-more-tools__panel.is-flyout-open,
body.home-app .home-export-bar.is-flyout-open,
body.home-app .home-canvas-insert-more__panel.is-flyout-open {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  z-index: 20150 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0.65rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  background: rgba(18, 18, 22, 0.72) !important;
  backdrop-filter: blur(28px) saturate(1.45) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.45) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
  transform: translateZ(0);
  isolation: isolate;
}

/* Panneau zoom : même palier que les flyouts (au-dessus sticky preview / iframe) */
body.home-app .home-preview-zoom__panel.is-anchored,
body.home-app #homePreviewZoomPanel.is-anchored {
  display: grid !important;
  position: fixed !important;
  z-index: 20150 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  right: auto !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

body.home-app .home-canvas-insert-more__panel.is-flyout-open {
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
}

/* Mobile : une seule source de vérité pour le bottom sheet (au-dessus de la style bar) */
@media (max-width: 960px) {
  body.home-app:has(.home-visual-style-bar.is-visible) {
    --home-mobile-stylebar-h: min(22vh, 180px);
  }

  body.home-app:has(.home-visual-style-bar--has-media.is-visible),
  body.home-app:has(.home-visual-style-bar.is-visible .home-visual-style-bar__advanced[open]) {
    --home-mobile-stylebar-h: min(40vh, 340px);
  }

  @media (max-height: 480px) {
    body.home-app:has(.home-visual-style-bar.is-visible) {
      --home-mobile-stylebar-h: min(20vh, 150px);
    }

    body.home-app:has(.home-visual-style-bar--has-media.is-visible),
    body.home-app:has(.home-visual-style-bar.is-visible .home-visual-style-bar__advanced[open]) {
      --home-mobile-stylebar-h: min(36vh, 280px);
    }
  }

  /* Hors onglet Aperçu mobile : pas de réserve bas (dock overlay colonne) */
  body.home-app:not(.home-studio-mobile-preview):has(.home-visual-style-bar.is-visible) {
    --home-mobile-stylebar-h: 0px;
  }

  body.home-app .home-preview-more-tools__panel.is-flyout-open,
  body.home-app .home-export-bar.is-flyout-open,
  body.home-app .home-canvas-insert-more__panel.is-flyout-open {
    left: var(--home-flyout-inset, 0.65rem) !important;
    right: var(--home-flyout-inset, 0.65rem) !important;
    top: auto !important;
    bottom: calc(var(--home-mobile-stylebar-h, 0px) + 0.85rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

body.home-app .home-canvas-insert-more {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 120;
  flex-shrink: 0;
}

body.home-app .home-canvas-insert-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--okdak-accent-rgb), 0.45);
  background: rgba(var(--okdak-accent-rgb), 0.16);
  color: #99f6e4;
  opacity: 1;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.home-app .home-canvas-insert-more > summary::-webkit-details-marker {
  display: none;
}

body.home-app .home-canvas-insert-more__panel {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 200;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.55rem;
  min-width: min(18rem, 88vw);
  max-width: min(28rem, 92vw);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(18, 18, 22, 0.72);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  color: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
}

body.home-app .home-canvas-insert-more[open] > .home-canvas-insert-more__panel {
  display: flex;
}

@media (max-width: 960px) {
  body.home-studio-step-edit .home-preview-edit-chrome .home-canvas-insert-bar {
    opacity: 1;
  }

  body.home-app.home-studio-mobile-preview .home-preview-more-tools > summary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    min-width: 2.1rem;
    padding: 0.3rem 0.45rem;
    font-weight: 750;
    font-size: 0.72rem;
    border: 1px solid rgba(var(--okdak-accent-rgb), 0.45);
    background: rgba(var(--okdak-accent-rgb), 0.16);
    color: #fdba74;
  }

  body.home-app.home-studio-mobile-preview .home-preview-header__row--tools {
    flex-wrap: nowrap;
    row-gap: 0;
  }

  body.home-app.home-studio-mobile-preview .home-preview-more-tools {
    margin-left: auto;
  }
}

body.home-app .home-preview-header__row--tools {
  gap: 0.35rem;
  position: relative;
  z-index: 70;
  overflow: visible;
  flex-wrap: wrap;
  align-items: center;
}

/* Évite Accueil / devices qui passent par-dessus la barre d’insertion */
body.home-app .home-studio-preview-column .preview-section-header {
  margin-bottom: 0.15rem;
}

body.home-app .home-studio-preview-column .home-preview-edit-chrome {
  gap: 0.25rem;
  margin-top: 0;
  position: relative;
  z-index: 60;
  overflow: visible;
}

/* Dock style ouvert : chrome reste en flux (pas containing block) — sinon le menu
   se positionne sous Accueil/insert et les chevauche */
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview.home-site-preview--style-dock .home-preview-edit-chrome,
body.home-app:not(.home-studio-mobile-preview):not(.home-preview-fullscreen-open) .home-studio-preview-column .home-site-preview:has(.home-visual-style-bar.is-visible) .home-preview-edit-chrome {
  position: static !important;
  z-index: 18;
}

/* L’iframe ne doit pas passer devant Plus / insert */
body.home-app .home-studio-preview-column .home-preview-viewport {
  position: relative;
  z-index: 1;
}

body.home-app .home-studio-preview-column .preview-section-header {
  position: relative;
  z-index: 65;
  overflow: visible;
}

/* ——— Calm edit v2: focus blocs + aperçu ——— */
body.home-studio-step-edit .home-todaylist,
body.home-studio-step-edit .home-project-shell__kicker,
body.home-studio-step-edit .home-project-shell__meta,
body.home-studio-step-edit #homeNavGuideBtn,
body.home-studio-step-edit #homeIntroReopen,
body.home-studio-step-edit .home-studio-nav .okdak-help {
  display: none !important;
}

body.home-studio-step-edit .home-project-shell {
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.4rem;
}

body.home-studio-step-edit .home-project-shell__name {
  font-size: 0.95rem;
  padding: 0.2rem 0.35rem;
}

body.home-studio-step-edit .home-studio-nav {
  margin-bottom: 0.35rem;
  /* sticky + fond : voir bloc Calm edit v3 plus bas */
}

body.home-studio-step-edit .home-studio-nav__btn {
  padding: 0.4rem 0.55rem;
  min-height: 2.2rem;
}

body.home-studio-step-edit .home-studio-nav__num {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.75rem;
}

body.home-studio-step-edit .home-studio-nav__label {
  font-size: 0.82rem;
}

body.home-studio-step-edit .home-edit-subnav {
  margin-bottom: 0.45rem;
  /* sticky + fond : voir bloc Calm edit v3 plus bas */
}

body.home-studio-step-edit .home-shell-btn span {
  font-size: 0.78rem;
}

body.home-app .home-edit-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0.35rem 0 0.75rem;
  padding: 0.45rem 0 0.35rem;
  min-height: 0;
  position: static;
  z-index: 1;
}

body.home-app .home-edit-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}

body.home-app .home-edit-toolbar__actions .home-onboarding-reopen {
  margin-left: auto;
}

body.home-app .home-edit-toolbar__insert-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  border: 0;
  background: color-mix(in srgb, var(--apple-blue, var(--okdak-accent)) 88%, #000);
  color: #09090b;
  cursor: pointer;
  white-space: nowrap;
}

body.home-app .home-edit-toolbar__insert-cta:hover {
  filter: brightness(1.08);
}

body.home-app .home-edit-toolbar__insert-cta[hidden] {
  display: none !important;
}

body.home-app .home-edit-toolbar__insert-cta i,
body.home-app .home-edit-toolbar__insert-cta svg {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

body.home-app .home-edit-toolbar__more {
  position: relative;
  margin-left: auto;
}

body.home-app .home-edit-toolbar__more-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: inherit;
  cursor: pointer;
}

body.home-app .home-edit-toolbar__more-summary::-webkit-details-marker {
  display: none;
}

body.home-app .home-edit-toolbar__more-summary:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.home-app .home-edit-toolbar__more-summary i,
body.home-app .home-edit-toolbar__more-summary svg {
  width: 1rem;
  height: 1rem;
}

body.home-app .home-edit-toolbar__more-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 40;
  min-width: 11rem;
  padding: 0.3rem;
  border-radius: 10px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.14));
  background: var(--apple-bg, #09090b);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

body.light-theme .home-edit-toolbar__more-menu,
html[data-okdak-theme="light"] .home-edit-toolbar__more-menu {
  background: var(--apple-bg, #f4f5f7);
  box-shadow: 0 10px 24px rgba(9, 9, 11, 0.12);
}

body.home-app .home-edit-toolbar__more-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

body.home-app .home-edit-toolbar__more-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

body.home-app .home-edit-toolbar__more-item i,
body.home-app .home-edit-toolbar__more-item svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

body.home-app .home-edit-toolbar__back {
  display: none;
}

body.home-app .home-sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.14));
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

body.home-app .home-sources-toggle i,
body.home-app .home-sources-toggle svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

body.home-app .home-sources-toggle.is-active,
body.home-app .home-sources-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--apple-blue, var(--okdak-accent)) 50%, transparent);
  background: color-mix(in srgb, var(--apple-blue, var(--okdak-accent)) 10%, transparent);
}

/* Status : ligne dédiée sous les actions — plus de collision */
body.home-app .home-edit-toolbar__status,
body.home-app .home-project-status.home-edit-toolbar__status {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  white-space: normal !important;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
}

body.home-app .home-editor-workbench.is-sources-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.home-app .home-editor-workbench.is-sources-collapsed .home-editor-pane--sources,
body.home-app .home-editor-pane--sources[hidden] {
  display: none !important;
}

body.home-app .home-editor-workbench.is-sources-open {
  grid-template-columns: minmax(min(240px, 100%), 300px) minmax(0, 1fr);
}

body.home-app .home-media-card--compact {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  box-shadow: none;
}

body.home-app .home-media-card--compact .drop-zone {
  min-height: 4.5rem;
  padding: 0.55rem;
}

body.home-app .home-module-studio__head--calm:has(> div:only-child) {
  margin-bottom: 0.35rem;
}

/* Plus d’air pour le canvas réel — desktop only (évite 2 colonnes sur téléphone) */
@media (min-width: 961px) {
  body.home-studio-step-edit .home-studio-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(min(360px, 100%), 46vw);
    gap: 0.85rem;
  }
}

body.home-studio-step-edit .home-preview-edit-chrome {
  margin-top: 0.25rem;
}

body.home-studio-step-edit .home-canvas-insert-bar {
  gap: 0.25rem;
  padding: 0.3rem;
}

body.home-studio-step-edit .home-canvas-insert-btn span {
  font-size: 0.7rem;
}

body.home-studio-step-edit .preview-section-header {
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

/* Eyebrows legacy masqués ; ceux des panneaux structurés restent visibles */
body.home-studio-step-edit .home-editor-pane > .home-pane-eyebrow,
body.home-studio-step-edit .home-studio-edit-column > .home-pane-eyebrow {
  display: none;
}

body.home-studio-step-edit .home-sources-head .home-pane-eyebrow,
body.home-studio-step-edit .home-quick-start__head .home-pane-eyebrow,
body.home-studio-step-edit .home-module-draft__head .home-pane-eyebrow,
body.home-studio-step-edit .home-preview-heading__eyebrow,
body.home-studio-step-publish .home-publish-head__title {
  display: inline-flex;
}

@media (min-width: 961px) and (max-width: 1100px) {
  body.home-studio-step-edit .home-studio-layout {
    grid-template-columns: minmax(0, 1fr) minmax(min(300px, 100%), 42%);
  }
}

@media (max-width: 960px) {
  body.home-studio-step-edit .home-studio-layout {
    grid-template-columns: 1fr !important;
  }

  body.home-app .home-edit-toolbar__status,
  body.home-app .home-project-status.home-edit-toolbar__status {
    max-width: 100%;
    margin: 0 !important;
    white-space: normal !important;
  }

  body.home-app .home-edit-toolbar__insert-cta span {
    display: inline;
  }
}

/* ——— Calm edit v3: nav 1-2-3 visible partout (mobile + PC) ——— */
/* Ancien masquage desktop retiré — la nav reste le fil d’Ariane du studio */

/* Sticky Publier visible en Éditer (CTA activation) — plus masqué */

/* ——— Chrome studio : UN seul sticky glass ——— */
.home-studio-chrome {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.15rem;
  position: sticky;
  top: var(--home-sticky-shell-top, 4.35rem);
  z-index: 45;
  padding: 0.2rem 0 0.55rem;
  isolation: isolate;
  background-color: var(--okdak-surface-bg, rgba(24, 24, 27, 0.62));
  background-image: var(--apple-glass);
  border-bottom: 1px solid var(--okdak-surface-border, var(--apple-border, rgba(255, 255, 255, 0.1)));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: var(--okdak-surface-filter, blur(22px) saturate(155%));
  backdrop-filter: var(--okdak-surface-filter, blur(22px) saturate(155%));
}

body.light-theme .home-studio-chrome,
html[data-okdak-theme="light"] .home-studio-chrome {
  background-color: var(--okdak-surface-bg, rgba(244, 244, 245, 0.62));
  box-shadow: 0 6px 16px rgba(9, 9, 11, 0.08);
}

.home-studio-chrome .home-project-shell,
.home-studio-chrome .home-studio-nav,
.home-studio-chrome .home-edit-subnav {
  position: static !important;
  top: auto !important;
  margin-bottom: 0 !important;
  /* Pas de second blur : le chrome sticky porte déjà le verre */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-studio-chrome .home-project-shell.glass-liquid,
.home-studio-chrome .home-project-shell {
  background: var(--apple-glass-liquid, var(--apple-glass));
  box-shadow: var(--apple-shadow-card, none);
}

body.light-theme .home-studio-chrome .home-project-shell,
html[data-okdak-theme="light"] .home-studio-chrome .home-project-shell {
  background: var(--apple-glass-liquid, var(--apple-glass));
}

@media (prefers-reduced-transparency: reduce) {
  .home-studio-chrome {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--apple-bg, #09090b);
  }

  body.light-theme .home-studio-chrome,
  html[data-okdak-theme="light"] .home-studio-chrome {
    background: var(--apple-bg, #f4f5f7);
  }
}

/* Liquid glass : jamais sur le chrome sticky (sinon couches fantômes) */
html[data-okdak-liquid-scope="home"].okdak-liquid-glass-on .home-studio-chrome .home-project-shell.okdak-lg > .okdak-lg__frost,
html[data-okdak-liquid-scope="home"].okdak-liquid-glass-on .home-studio-chrome .home-project-shell.okdak-lg > .okdak-lg__shine,
html[data-okdak-liquid-scope="home"].okdak-liquid-glass-on .home-studio-chrome .okdak-lg__frost,
html[data-okdak-liquid-scope="home"].okdak-liquid-glass-on .home-studio-chrome .okdak-lg__shine {
  display: none !important;
}

.home-studio-chrome .home-edit-subnav[hidden] {
  display: none !important;
}

body.home-studio-step-edit .home-studio-chrome {
  gap: 0.25rem;
}

/* Annule l’ancien sticky empilé (shell / nav / subnav) */
body.home-studio-step-edit .home-project-shell,
body.home-studio-step-edit .home-studio-nav,
body.home-studio-step-edit .home-edit-subnav,
body.home-studio-step-start .home-studio-nav,
body.home-studio-step-intent .home-studio-nav,
body.home-app .home-edit-subnav {
  position: static !important;
  top: auto !important;
}

/* Aperçu NON sticky en Composer — sinon chrome + preview se chevauchent au scroll */
body.home-studio-step-edit .home-studio-preview-column {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  align-self: start;
}

body.home-studio-step-edit .home-project-shell {
  padding: 0.35rem 0.65rem;
  gap: 0.5rem;
  z-index: auto;
}

body.home-studio-step-edit .home-studio-nav {
  padding: 0.2rem;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
  body.home-studio-step-edit .home-studio-nav {
    background: var(--okdak-surface-bg, rgba(20, 18, 16, 0.72));
    border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.12));
    padding: 0.3rem;
    gap: 0.25rem;
  }
}

body.home-studio-step-edit .home-edit-subnav {
  padding: 0.15rem;
  background: rgba(255, 255, 255, 0.04);
}

body.home-studio-step-edit .home-edit-subnav__btn {
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
  gap: 0.3rem;
  min-height: 2rem;
}

body.home-studio-step-edit .home-edit-subnav__btn svg,
body.home-studio-step-edit .home-edit-subnav__btn i {
  width: 0.95rem;
  height: 0.95rem;
}

body.home-studio-step-edit .home-edit-toolbar {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.home-app .home-edit-toolbar__collab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--apple-border, rgba(0, 0, 0, 0.12));
  background: transparent;
  color: inherit;
  cursor: pointer;
  position: static !important;
  z-index: auto !important;
}

body.home-app .home-edit-toolbar__collab .home-edit-toolbar__collab-label {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Ancien bouton collab toolbar : désormais dans le menu ⋯ */
body.home-app .home-edit-toolbar__actions > .home-edit-toolbar__collab {
  display: none;
}

body.home-app .home-edit-toolbar__collab.is-active,
body.home-app .home-publish-sticky__btn--collab.is-active {
  border-color: color-mix(in srgb, #22c55e 55%, transparent);
  background: color-mix(in srgb, #22c55e 14%, transparent);
  color: #86efac;
}

body.home-app .home-edit-toolbar__collab svg,
body.home-app .home-edit-toolbar__collab i {
  width: 0.95rem;
  height: 0.95rem;
}

body.home-app .home-edit-toolbar--code .home-code-desk-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}

body.home-app .home-module-draft.is-idle {
  display: none !important;
}

body.home-app .home-module-draft:not(.is-idle) {
  margin-top: 0.75rem;
}

body.home-app .home-module-draft__tag,
body.home-app .home-module-draft__head .lucide {
  display: none;
}

body.home-studio-step-edit .home-module-studio.custom-section,
body.home-studio-step-edit .custom-section.home-module-studio {
  padding: 0.65rem 0.75rem 0.85rem;
  margin-top: 0;
  box-shadow: none;
}

body.home-studio-step-edit .okdak-block-library__head {
  margin-bottom: 0.4rem;
}

body.home-studio-step-edit .module-controls-actions {
  gap: 0.4rem;
  margin-top: 0.55rem;
}

body.home-studio-step-edit .home-module-draft__actions.module-controls-actions {
  margin-top: 0.85rem;
  gap: 0.55rem;
}

body.home-studio-step-edit .home-module-draft__actions .home-btn-module--primary {
  min-height: 3rem;
  padding: 0.55rem 0.85rem;
  font-size: inherit;
}

body.home-studio-step-edit .home-btn-module--primary {
  min-height: 2.25rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
}

body.home-studio-step-edit .home-site-preview.preview-section {
  padding: 0.65rem 0.75rem 0.7rem;
}

body.home-studio-step-edit .home-preview-heading {
  font-size: 0.9rem;
  gap: 0.35rem;
}

body.home-studio-step-edit .home-preview-badge {
  font-size: 0.65rem;
}

/* Insert bar : lisible au repos, encore plus nette au focus/survol */
body.home-studio-step-edit .home-preview-edit-chrome .home-canvas-insert-bar {
  opacity: 0.9;
  transition: opacity 0.18s ease;
}

body.home-studio-step-edit .home-canvas-insert-more > summary {
  opacity: 1;
}

body.home-studio-step-edit .home-site-preview:hover .home-canvas-insert-bar,
body.home-studio-step-edit .home-site-preview:focus-within .home-canvas-insert-bar,
body.home-studio-step-edit .home-canvas-insert-bar:focus-within,
body.home-studio-step-edit .home-visual-style-bar.is-visible ~ .home-canvas-insert-bar,
body.home-studio-step-edit .home-preview-edit-chrome:has(.home-visual-style-bar.is-visible) .home-canvas-insert-bar {
  opacity: 1;
}

body.home-studio-step-edit .home-preview-edit-toggle span {
  display: none;
}

body.home-studio-step-edit .home-preview-more-tools > summary {
  padding: 0.3rem 0.45rem;
}

@media (max-width: 960px) {
  body.home-studio-step-edit .home-preview-edit-toggle span {
    display: inline;
  }

  body.home-studio-step-edit .home-preview-edit-chrome .home-canvas-insert-bar {
    opacity: 1;
  }

  /* Mobile: stack, pas de sticky empilé */
  body.home-studio-step-edit .home-studio-layout {
    grid-template-columns: 1fr !important;
    gap: 0.55rem;
  }

  body.home-app .home-editor-workbench.is-sources-open {
    grid-template-columns: 1fr !important;
  }

  body.home-app .home-editor-workbench.is-sources-open .home-editor-pane--sources {
    display: flex !important;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.85rem 0.9rem;
    max-height: min(72dvh, 36rem);
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 28%, transparent);
    background: color-mix(in srgb, var(--apple-bg, #0c0c0e) 92%, transparent);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  body.home-app .home-editor-pane--sources > .home-seo-panel[open] > .home-seo-panel__body {
    max-height: min(52dvh, 26rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html[data-okdak-theme="light"] body.home-app .home-editor-workbench.is-sources-open .home-editor-pane--sources,
  body.light-theme.home-app .home-editor-workbench.is-sources-open .home-editor-pane--sources {
    background: color-mix(in srgb, #f6f4ef 96%, transparent);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  }

  /* Mobile : chrome en flux — un seul sticky (onglets Blocs/Aperçu) sous la barre app.
     Sticky chrome + tabs (top: shell+chrome-h) créait une barre mid-écran qui recouvrait devices/insert. */
  body.home-studio-step-edit .home-studio-chrome {
    position: static !important;
    top: auto !important;
    z-index: 45;
  }

  body.home-studio-step-edit .home-studio-nav {
    display: flex !important;
    grid-template-columns: none !important;
    padding: 0;
    gap: 0.12rem;
    width: auto;
  }

  body.home-studio-step-edit .home-project-shell,
  body.home-studio-step-edit .home-edit-subnav,
  body.home-studio-step-edit .home-studio-nav {
    position: static !important;
    top: auto !important;
    backdrop-filter: none !important;
  }

  /* Exception : collab live a besoin d’un contexte de positionnement propre */
  body.home-studio-step-edit .home-edit-subnav.is-collab-live {
    position: relative;
  }

  body.home-studio-step-edit .home-edit-subnav.is-collab-live .home-collab-live-wrap {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }

  /* Toolbar en flux — JAMAIS sticky (sinon chevauche chrome + status) */
  body.home-studio-step-edit .home-edit-toolbar {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.4rem 0 0.25rem;
    margin: 0.25rem 0 0.55rem;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.home-studio-step-edit .home-edit-toolbar__status,
  body.home-studio-step-edit .home-project-status.home-edit-toolbar__status {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    white-space: normal !important;
    line-height: 1.35;
  }

  body.home-studio-step-edit .home-studio-mobile-tabs {
    position: sticky !important;
    top: var(--home-sticky-shell-top, 4.35rem);
    z-index: 70;
    background: rgba(12, 12, 14, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.light-theme.home-studio-step-edit .home-studio-mobile-tabs,
  html[data-okdak-theme="light"] body.home-studio-step-edit .home-studio-mobile-tabs {
    background: rgba(246, 244, 239, 0.96);
  }

  /* En Aperçu : Composer/Code/Projets/IA masqués, badge collab conservé */
  body.home-app.home-studio-mobile-preview .home-edit-subnav:not(.is-collab-live) {
    display: none !important;
  }

  body.home-app.home-studio-mobile-preview .home-edit-subnav.is-collab-live {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 0.4rem;
    padding: 0;
    border: none;
    background: transparent;
    position: relative;
  }

  body.home-app.home-studio-mobile-preview .home-edit-subnav.is-collab-live .home-edit-subnav__btn {
    display: none !important;
  }

  body.home-app.home-studio-mobile-preview .home-edit-subnav.is-collab-live .home-collab-live-wrap {
    display: flex !important;
    position: static !important;
    transform: none !important;
    flex: 1 1 100%;
    margin: 0;
  }

  body.home-app.home-studio-mobile-preview .home-edit-subnav.is-collab-live .home-collab-live-badge {
    width: 100%;
    justify-content: center;
  }

  body.home-app.home-studio-mobile-preview .home-studio-mobile-tabs {
    position: sticky !important;
    top: var(--home-sticky-shell-top, 4.35rem);
    z-index: 70;
    margin-bottom: 0.25rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }

  /* Devices + insert restent sous les onglets en flux (plus de chevauchement sticky) */
  body.home-app.home-studio-mobile-preview .home-studio-preview-column .preview-section-header,
  body.home-app.home-studio-mobile-preview .home-studio-preview-column .home-preview-edit-chrome {
    position: relative;
    z-index: 1;
  }

  body.home-app.home-studio-mobile-preview .home-preview-devices {
    flex-wrap: nowrap;
    gap: 0.2rem;
  }

  body.home-app.home-studio-mobile-preview .home-preview-edit-toggle {
    min-height: 2.35rem;
    padding: 0.35rem 0.55rem;
  }

  body.home-app.home-studio-mobile-preview .home-preview-more-tools,
  body.home-app.home-studio-mobile-preview .home-canvas-insert-more {
    z-index: 85;
  }

  body.home-app.home-studio-mobile-preview .home-edit-toolbar {
    display: none;
  }

  /* Apparence : via bouton toolbar (plus d’onglet Style dans la barre) */
  body.home-app .home-shell-btn--mobile-edit-tools {
    display: none !important;
  }

  body.home-studio-step-edit .home-canvas-insert-more__panel {
    left: auto;
    right: 0;
    max-width: min(92vw, 22rem);
  }

  body.home-studio-step-edit .home-preview-more-tools .home-export-bar {
    right: 0;
    left: auto;
    min-width: 10rem;
  }
}

/* ——— Éditeur plus lisible (2026-08-17) ——— */
body.home-app .home-edit-howto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 35%, transparent);
  background: color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 12%, transparent);
  color: var(--apple-text, inherit);
  font-size: 0.82rem;
  line-height: 1.4;
}

body.home-app .home-edit-howto[hidden] {
  display: none !important;
}

body.home-app .home-edit-howto strong {
  font-weight: 750;
}

body.home-app .home-edit-howto em {
  font-style: normal;
  font-weight: 700;
  color: var(--apple-accent, var(--okdak-accent));
}

body.home-app .home-edit-howto__close {
  margin-left: auto;
  min-height: 2rem;
  min-width: 2.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--apple-border, rgba(255, 255, 255, 0.18));
  background: var(--apple-fill-tertiary, rgba(255, 255, 255, 0.08));
  color: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

body.home-app .home-edit-howto__close:hover,
body.home-app .home-edit-howto__close:focus-visible {
  outline: 2px solid var(--apple-accent, var(--okdak-accent));
  outline-offset: 2px;
}

body.home-app .home-preview-hint--calm {
  opacity: 1;
  font-size: 0.84rem;
  font-weight: 550;
  color: var(--apple-text, inherit);
}

body.home-app .home-preview-hint:not(.is-editing):not(.is-disabled) {
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 40%, transparent);
  background: color-mix(in srgb, var(--apple-accent, var(--okdak-accent)) 8%, transparent);
}

body.home-app .home-canvas-empty__chip {
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.86rem;
}

body.home-app .home-canvas-insert-btn {
  min-height: 2.25rem;
  height: auto;
  padding: 0.35rem 0.7rem;
}

body.home-app .home-canvas-insert-bar__label {
  font-size: 0.68rem;
  color: #f8fafc;
}

/* max-width : Playwright / émulation desktop ne matchent pas pointer:coarse */
@media (pointer: coarse), (max-width: 960px) {
  /* Navigation / actions clés : 44px. Outils d’aperçu : compacts (cf. règles plus bas). */
  body.home-app .home-edit-toolbar__back,
  body.home-app .home-sources-toggle,
  body.home-app .home-studio-mobile-tabs__btn,
  body.home-app .home-shell-more__item {
    min-height: 2.75rem;
  }

  body.home-app .home-project-shell__name,
  body.home-app #homeProjectSwitcher {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.35rem;
  }

  body.home-app .home-preview-edit-toggle,
  body.home-app .home-studio-nav__btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.45rem 0.7rem;
  }

  body.home-app .home-shell-more__item {
    width: 100%;
    justify-content: flex-start;
    padding: 0.7rem 0.9rem;
  }

  /* Style bar / docks en bottom sheet utilisable au pouce */
  body.home-app.home-studio-mobile-preview .home-visual-style-bar.is-visible {
    max-height: min(48dvh, 420px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  body.home-app .home-edit-howto {
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
    padding: 0.45rem 0.55rem;
    gap: 0.35rem 0.5rem;
  }

  body.home-app .home-preview-heading {
    font-size: 0.92rem;
  }

  /* Moins de pile de cartes en onglet Blocs — garder le CTA « Tout voir » lisible */
  body.home-app.home-studio-step-edit:not(.home-studio-mobile-preview) .home-first-site-banner {
    margin-bottom: 0.45rem;
    padding: 0.7rem 0.75rem;
  }

  /* First-site : howto redondant avec la carte « Ton premier site » */
  body.home-app.home-first-site-mode.home-studio-mobile-edit .home-edit-howto {
    display: none !important;
  }

  /* Succès visible → masquer le parcours (messages contradictoires) + status */
  body.home-app.home-studio-mobile-edit:has(#homeSuccessBanner:not([hidden])) #homeSiteJourney {
    display: none !important;
  }

  body.home-app.home-studio-mobile-edit:has(#homeSuccessBanner:not([hidden])) .home-project-status.home-edit-toolbar__status {
    display: none;
  }

  body.home-app.home-studio-mobile-edit .home-success-banner:not([hidden]) {
    margin: 0.35rem 0 0.5rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
  }

  /* Double « Blocs » : masquer le bouton subnav, garder Code seul */
  body.home-app.home-studio-step-edit #homeEditNavVisual {
    display: none !important;
  }

  body.home-app.home-studio-mobile-edit .home-edit-subnav:not(.is-collab-live) {
    margin: 0.15rem 0 0.25rem;
    padding: 0.15rem;
    gap: 0.15rem;
    width: fit-content;
  }

  body.home-app.home-studio-mobile-edit .home-edit-subnav:not(.is-collab-live) .home-edit-subnav__btn {
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
  }

  body.home-app.home-studio-mobile-edit .home-project-status.home-edit-toolbar__status {
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.35rem;
  }

  body.home-app.home-studio-mobile-edit .home-studio-mobile-tabs {
    padding: 0.25rem;
    margin-bottom: 0.3rem;
  }

  body.home-app.home-studio-mobile-edit .home-studio-mobile-tabs__btn {
    min-height: 2.35rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.82rem;
  }

  /* En aperçu mobile : maximiser le canvas */
  body.home-app.home-studio-mobile-preview .home-preview-header__row--tools {
    max-height: 2.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-app .home-start-card,
  body.home-app .home-intent-card,
  body.home-app .home-canvas-empty__chip {
    transition: none;
  }
}

/* ——— SaaS chrome 2026-08-31 : une barre, un parcours, pas de verre empilé ——— */
body.home-app .home-studio-chrome {
  display: flex !important;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem 0.55rem;
  border-radius: 16px;
  border: 1px solid var(--okdak-surface-border, var(--apple-border, rgba(255, 255, 255, 0.12)));
  background-color: var(--okdak-surface-bg, rgba(24, 24, 27, 0.72));
  background-image: var(--apple-glass);
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}

body.home-app .home-studio-chrome:has(details[open]) {
  z-index: 90;
}

/* Menu « Partagé · en direct » : le panneau est dans le chrome (backdrop-filter).
   L’aperçu et les onglets mobiles (z-index 60–120) passaient devant. */
body.home-app .home-studio-chrome:has(#homeCollabPanel:not([hidden])) {
  position: relative !important;
  z-index: 160 !important;
  overflow: visible !important;
}

body.home-app .home-studio-steprow:has(#homeCollabPanel:not([hidden])),
body.home-app .home-edit-subnav.is-collab-live:has(#homeCollabPanel:not([hidden])) {
  position: relative !important;
  z-index: 2;
  overflow: visible !important;
}

body.home-studio-step-edit .home-edit-subnav.is-collab-live .home-collab-live-wrap:has(#homeCollabPanel:not([hidden])),
body.home-app.home-studio-mobile-preview .home-edit-subnav.is-collab-live .home-collab-live-wrap:has(#homeCollabPanel:not([hidden])) {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

body.home-app #homeCollabPanel:not([hidden]) {
  z-index: 4;
}

body.light-theme .home-studio-chrome,
html[data-okdak-theme="light"] .home-studio-chrome {
  background-color: var(--okdak-surface-bg, rgba(246, 244, 239, 0.82));
  box-shadow: none;
}

body.home-app .home-studio-topbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  width: 100%;
}

body.home-app .home-studio-steprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-width: 0;
}

body.home-app .home-studio-chrome .home-project-shell,
body.home-app .home-studio-chrome .home-project-shell.glass-liquid,
body.home-app .home-studio-chrome .home-studio-nav,
body.home-app .home-studio-chrome .home-edit-subnav {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
}

body.home-app .home-studio-chrome .home-project-shell {
  padding: 0 !important;
}

body.home-app .home-project-shell {
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

body.home-app .home-project-shell__kicker,
body.home-app .home-project-shell__meta {
  display: none !important;
}

body.home-app .home-project-shell__name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  min-width: 0;
}

body.home-app .home-project-shell__name #homeProjectName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(16rem, 42vw);
}

body.home-app .home-project-shell__name i,
body.home-app .home-project-shell__name svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

body.home-app .home-studio-nav,
body.home-app .home-studio-chrome .home-studio-nav {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  width: fit-content !important;
  max-width: 100%;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.2rem !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.home-app .home-studio-nav__btn {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  gap: 0.4rem;
  border-radius: 10px;
  font-size: 0.85rem;
  opacity: 1;
  color: var(--apple-text, inherit);
  width: auto !important;
  flex-direction: row !important;
}

body.home-app .home-studio-nav__num {
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.7rem;
  line-height: 1.3rem;
  border-radius: 999px;
}

body.home-app .home-studio-nav__label {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

body.home-app .home-project-type-badge {
  font-size: 0.62rem;
  padding: 0.12rem 0.38rem;
  margin-left: 0.2rem;
}

body.home-app .home-project-shell__actions {
  display: flex !important;
  justify-content: flex-end;
  margin-left: auto;
  gap: 0.4rem;
  min-width: 0;
  flex: 0 0 auto;
}

body.home-app .home-shell-btn--primary {
  padding: 0.45rem 0.95rem;
}

body.home-app .home-shell-btn--primary span {
  display: inline !important;
}

body.home-app .home-edit-subnav {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  gap: 0.15rem;
  margin: 0 !important;
  padding: 0.2rem !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.home-app .home-edit-subnav[hidden] {
  display: none !important;
}

body.home-app .home-edit-subnav__btn {
  min-height: 2rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--apple-text, inherit);
}

body.home-studio-step-intent #studioPanelIntent {
  max-width: 40rem;
  margin-inline: auto;
  padding-top: 0.35rem;
}

body.home-app .home-intent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.65rem;
}

body.home-app .home-intent-card--featured {
  grid-column: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-height: 8rem;
}

body.home-app .home-intent-card,
body.home-app .home-intent-card strong,
body.home-app .home-start-card,
body.home-app .home-start-card strong,
body.home-app .home-start-title,
body.home-app .home-template-pick {
  color: var(--apple-text, inherit);
}

body.home-app .home-start-hero {
  margin: 0 0 1rem;
}

body.home-app .home-start-title {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
}

body.home-app .home-start-lead {
  margin: 0;
  max-width: 42ch;
  font-size: 0.92rem;
  opacity: 0.82;
}

body.home-app .home-start-gallery {
  margin: 0 0 1rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

body.home-app .home-start-gallery .home-section-heading {
  margin-bottom: 0.2rem;
}

body.home-app .home-template-picks--featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.7rem;
}

body.home-app .home-template-picks--featured .home-template-pick {
  display: flex;
  align-items: center;
  border-radius: 12px;
  min-height: 3.1rem;
  justify-content: flex-start;
  padding: 0.8rem 0.95rem;
  font-weight: 650;
  font-size: 0.9rem;
}

body.home-app .home-start-aside {
  grid-template-columns: minmax(0, 1.2fr) minmax(min(12rem, 100%), 0.8fr);
  margin: 0 0 1rem;
}

body.home-app .home-start-more {
  margin: 0 0 0.75rem;
}

body.home-app .home-start-more-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
  cursor: pointer;
}

@media (min-width: 961px) {
  body.home-studio-step-edit .home-publish-sticky {
    display: none !important;
  }
}

@media (max-width: 960px) {
  body.home-app .home-studio-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
  }

  body.home-app .home-project-shell {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.home-app .home-studio-nav {
    display: flex !important;
    grid-template-columns: none !important;
    width: fit-content !important;
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 0.15rem;
    margin-top: 0 !important;
  }

  body.home-app .home-studio-nav__btn {
    width: auto !important;
    min-width: 0;
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    border-radius: 10px;
  }

  body.home-app .home-studio-nav__copy {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }

  body.home-app .home-studio-nav__label {
    font-size: 0.78rem;
    line-height: 1.15;
  }

  body.home-app .home-project-shell__actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  body.home-app .home-start-aside {
    grid-template-columns: 1fr;
  }

  body.home-app .home-template-picks--featured {
    grid-template-columns: 1fr 1fr;
  }

  body.home-studio-step-intent #studioPanelIntent {
    padding-top: 0.15rem;
  }
}

@media (max-width: 480px) {
  body.home-app .home-template-picks--featured {
    grid-template-columns: 1fr;
  }

  body.home-app .home-intent-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-app .home-intent-card,
  body.home-app .home-intent-card--featured {
    min-height: 0;
    padding: 0.85rem 0.9rem;
  }
}

/* PDF : masquer tout le parcours Démarrer (titres, galerie, IA, dossier, autres) */
body.home-studio-intent-pdf #studioPanelStart .home-start-hero,
body.home-studio-intent-pdf #studioPanelStart #homeStartTemplatePanel,
body.home-studio-intent-pdf #studioPanelStart .home-start-gallery,
body.home-studio-intent-pdf #studioPanelStart .home-start-zip-block,
body.home-studio-intent-pdf #studioPanelStart .home-start-aside,
body.home-studio-intent-pdf #studioPanelStart .home-start-more,
body.home-studio-intent-pdf #studioPanelStart #homeStartClonePanel,
body.home-studio-intent-pdf #studioPanelStart #homeIntentChangeBtn {
  display: none !important;
}

body.home-studio-intent-pdf #studioNavStart {
  display: none !important;
}

@media (max-width: 960px) {
  body.home-studio-intent-pdf .home-studio-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ZIP mis en avant + prompts Cursor */
.home-start-zip-block:has([data-start="zip"][hidden]) {
  display: none !important;
}

body.home-app .home-start-zip-block {
  margin: 0 0 1rem;
}

body.home-app .home-start-zip-block .home-section-heading {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

body.home-app .home-start-card--zip {
  width: 100%;
  min-height: 0;
  padding: 0.95rem 1.1rem 0.9rem;
  border-color: rgba(var(--okdak-accent-rgb), 0.5);
  background: linear-gradient(155deg, rgba(var(--okdak-accent-rgb), 0.2), rgba(255, 255, 255, 0.04) 55%);
}

body.home-app .home-start-card--zip.is-drop,
body.home-app .home-start-zip-block.is-drop .home-start-card--zip {
  border-color: rgba(var(--okdak-accent-rgb), 0.85);
  box-shadow: 0 0 0 2px rgba(var(--okdak-accent-rgb), 0.35);
}

body.home-app .home-start-card--zip strong {
  padding-right: 2.5rem;
  font-size: 1rem;
}

body.home-app .home-zip-prompts {
  margin-top: 0.55rem;
}

body.home-app .home-zip-prompts__label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.72;
}

body.home-app .home-zip-prompts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

body.home-app .home-prompt-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed var(--apple-border, rgba(255, 255, 255, 0.18));
  background: rgba(255, 255, 255, 0.05);
  color: var(--apple-text, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

body.home-app .home-prompt-chip:hover {
  border-style: solid;
  border-color: rgba(var(--okdak-accent-rgb), 0.55);
  background: rgba(var(--okdak-accent-rgb), 0.12);
}

/* ——— Studio outils : groupes Format / Zoom / Page / Outils ——— */
body.home-app .home-preview-toolgroup {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0.15rem 0.2rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

body.home-app .home-preview-toolgroup__label {
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.5;
  padding-inline: 0.2rem;
  white-space: nowrap;
}

body.home-app .home-preview-toolgroup--pages:not(:has(.home-preview-page-select:not([hidden]))) {
  display: none;
}

body.home-app .home-preview-header__row--tools {
  gap: 0.4rem;
  align-items: center;
}

body.home-app .home-preview-devices {
  margin-left: 0;
  margin-right: 0;
}

body.home-app .home-canvas-insert-more__cat {
  flex: 1 0 100%;
  margin: 0.35rem 0 0.1rem;
  padding: 0 0.15rem;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  color: #f8fafc;
}

body.home-app .home-canvas-insert-more__cat:first-child {
  margin-top: 0;
}

@media (max-width: 960px) {
  /* Labels de groupe masqués — les icônes + Outils suffisent */
  body.home-app .home-preview-toolgroup__label {
    display: none;
  }

  /* Zoom compact : seulement le % (ouvre le panneau) */
  body.home-app .home-preview-zoom__btn {
    display: none !important;
  }

  body.home-app .home-preview-zoom__label,
  body.home-app #homePreviewZoomLabel {
    min-width: 2.75rem !important;
    min-height: 2.1rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.35rem 0.55rem !important;
    font-size: 0.75rem !important;
  }

  /* Devices / insert : compacts, pas des pavés 44×44 */
  body.home-app .home-preview-device {
    min-width: 2.1rem !important;
    min-height: 2.1rem !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    padding: 0.3rem !important;
  }

  body.home-app .home-canvas-insert-btn {
    min-height: 2.15rem !important;
    min-width: 0 !important;
    height: 2.15rem !important;
    padding: 0.3rem 0.55rem !important;
    font-size: 0.72rem !important;
  }

  body.home-app .home-canvas-insert-more > summary {
    min-height: 2.15rem !important;
    min-width: 2.15rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  body.home-app .home-code-page-btn,
  body.home-app #codePageAddBtn,
  body.home-app #codePageDeleteBtn {
    width: 2.1rem !important;
    height: 2.1rem !important;
    min-width: 2.1rem !important;
    min-height: 2.1rem !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  body.home-app .home-code-page-btn i,
  body.home-app .home-code-page-btn svg,
  body.home-app #codePageAddBtn i,
  body.home-app #codePageAddBtn svg,
  body.home-app #codePageDeleteBtn i,
  body.home-app #codePageDeleteBtn svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  body.home-app .home-preview-more-tools > summary {
    min-height: 2.1rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
  }

  body.home-app .home-preview-more-tools > summary span {
    display: none;
  }

  body.home-app.home-studio-mobile-preview .home-preview-header__row--tools {
    gap: 0.25rem;
  }

  body.home-app.home-studio-mobile-preview .home-preview-toolgroup {
    padding: 0.1rem;
  }
}

/* Aperçu du fichier (PDF / PNG) à la taille de page choisie */
.okdak-export-preview {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 8, 10, 0.72);
}

.okdak-export-preview__dialog {
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: min(92dvh, 920px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #161618;
  color: #f5f5f7;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
  outline: none;
}

.okdak-export-preview__head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.35rem 1.15rem;
}

.okdak-export-preview__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.okdak-export-preview__head p {
  margin: 0.3rem 0 0;
  max-width: 42rem;
  color: rgba(245, 245, 247, 0.72);
  font-size: 0.82rem;
  line-height: 1.4;
}

.okdak-export-preview__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.okdak-export-preview__formats {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1.15rem 0.2rem;
}

.okdak-export-preview__format {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 245, 247, 0.82);
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.okdak-export-preview__format.is-active {
  background: #f5f5f7;
  color: #161618;
  border-color: #f5f5f7;
}

.okdak-export-preview__meta {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.35rem 1.15rem 0.55rem;
  color: rgba(245, 245, 247, 0.55);
  font-size: 0.75rem;
}

.okdak-export-preview__stage {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 1rem;
  overflow: auto;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    #0c0c0e;
  padding: 1rem 0.75rem 1.25rem;
}

.okdak-export-preview__spacer {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.okdak-export-preview__sheet {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.okdak-export-preview__frame {
  display: block;
  border: 0;
  background: #fff;
  pointer-events: none;
}

.okdak-export-preview__breaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.okdak-export-preview__break {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed #c73e1a;
}

.okdak-export-preview__break::after {
  content: attr(data-label);
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #c73e1a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.okdak-export-preview__foot {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
}