* {
  box-sizing: border-box;
}

:root {
  /* Bulles de tooltip : z-index maximal pratique pour dominer les modales (400), menus (200), barre (100), etc. */
  --obviouslead-tooltip-z: 2147483647;
  /* Typo principale (site + titres) — polices via <link> dans le HTML (évite @import bloquant). */
  --flow-ui-font: "Plus Jakarta Sans", "Manrope", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  /* Page lead publiée : surchargé via components/lead-typography.js depuis leadPage.appearance.typography */
  --flow-lead-font: var(--flow-ui-font);
  /* Bordures communes : radios façon shadcn, checkbox modal, etc. (navbar clair #e5e7eb) */
  --obviouslead-control-border: #e5e7eb;
  --obviouslead-control-border-width: 1px;
  /* Champs texte / select (hors pastille radio 16px) */
  --obviouslead-input-border-width: 1.5px;
  /* Boutons primaires (`.ui-button`, `button`, `.btn`) + triggers type combobox (`ObviousleadDashStatsCombobox`). */
  --obviouslead-button-border-radius: 999px;
  /* Tokens thème clair en tête de fichier : évite le flash sombre pendant le parse progressif de styles.css */
  --flow-bg: #f0f1f2;
  /* Largeur réservée par `scrollbar-gutter: stable` sur html (pleine largeur + navbar). */
  --layout-viewport-gutter: calc(100vw - 100%);
  --layout-full-bleed-edge: clamp(24px, 6vw, 80px);
  --flow-surface-1: #ffffff;
  --flow-surface-2: #dce0e9;
  --flow-surface-3: #e4e7ec;
  --obviouslead-chrome-accent: #15171c;
  --flow-text: #717a8d;
  --flow-muted: #667085;
  --flow-accent: #29303e;
  --flow-accent-overlay: color-mix(in srgb, var(--flow-accent) 82%, #000000);
  --flow-on-accent: #ffffff;
  --flow-manual-booking-type-active-text: var(--flow-on-accent);
  /* Calendrier RDV : ±35 % vs `--flow-bg` (surchargé par page lead / aperçu). */
  --flow-manual-booking-card-bg: var(--flow-surface-1);
  --flow-accent-ghost-border: color-mix(in srgb, var(--flow-accent) 26%, var(--flow-surface-3));
  --flow-accent-ghost-text: color-mix(in srgb, var(--flow-accent) 42%, var(--flow-muted));
  --flow-accent-ghost-border-hover: color-mix(in srgb, var(--flow-accent) 40%, var(--flow-surface-3));
  --flow-accent-ghost-text-hover: color-mix(in srgb, var(--flow-accent) 72%, var(--flow-text));
  --flow-danger: #e85d4a;
  --flow-danger-border: color-mix(in srgb, var(--flow-danger) 76%, #000000);
  --flow-danger-hover: color-mix(in srgb, var(--flow-danger) 86%, #000000);
  /* Engagement intent : cold → warm → hot (calendrier, badges, follow-ups). */
  --flow-heat-cold: #7ea4e2;
  --flow-heat-cold-hover: #2563eb;
  --flow-heat-cold-focus: #60a5fa;
  --flow-heat-warm: #da894f;
  --flow-heat-warm-hover: #ea580c;
  --flow-heat-warm-focus: #fb923c;
  --flow-heat-hot: var(--flow-danger);
  --flow-heat-hot-hover: var(--flow-danger-hover);
  --flow-heat-hot-focus: var(--flow-danger);
  --flow-heat-initialized: color-mix(in srgb, var(--flow-muted) 55%, #64748b);
  --flow-heat-initialized-hover: color-mix(in srgb, var(--flow-muted) 35%, #475569);
  --flow-heat-initialized-focus: color-mix(in srgb, var(--flow-muted) 50%, #94a3b8);
  --flow-heat-fg: #ffffff;
  --flow-heat-hot-fg: var(--flow-on-accent);
  /* Puces signal follow-ups (statut pipeline — pas l’engagement heat). */
  --flow-followup-signal-in_progress: #9ca3af;
  --flow-followup-signal-on_hold: #7ea4e2;
  --flow-followup-signal-converted: #65c88a;
  --flow-followup-signal-declined: #ef4444;
  --flow-followup-signal-abandoned: #9ca3af;
  --obviouslead-ui-modal-card-max-height: min(80dvh, 768px);
}

/* Évite le va-et-vient largeur / scrollbar (surtout avec max-width en 100vw + tableau scroll horizontal). */
html {
  scrollbar-gutter: stable;
  /* 100vw vs barre de défilement verticale : évite le scroll horizontal (ex. home-dark-band en pleine largeur). */
  overflow-x: clip;
}

/* Page lead : défilement principal dans `#lead-form` ; barre `html` masquée pour éviter un second rail visible. */
html:has(body.campaign-page) {
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html:has(body.campaign-page)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Dashboard : pas de gouttière réservée tant que le document ne défile pas (contenu court, ex. peu de relances). */
html:has(main.dashboard-page) {
  scrollbar-gutter: auto;
}

/* Portail fixed dans body (ui-tooltip.js) — non rogné par overflow des modales / scroll */
.obviouslead-tooltip-portal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--obviouslead-tooltip-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: min(460px, calc(100vw - 24px));
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}

.obviouslead-tooltip-portal.is-visible {
  opacity: 1;
  visibility: visible;
}

.obviouslead-tooltip-portal--below {
  flex-direction: column-reverse;
}

.obviouslead-tooltip-portal__bubble {
  box-sizing: border-box;
  width: auto;
  max-width: min(460px, calc(100vw - 24px));
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  background: var(--flow-surface-1);
  color: var(--flow-text);
  border: 1px solid var(--flow-surface-3);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

.obviouslead-tooltip-portal__arrow {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  margin-top: -5px;
  margin-bottom: -5px;
  background: var(--flow-surface-1);
  border-right: 1px solid var(--flow-surface-3);
  border-bottom: 1px solid var(--flow-surface-3);
  rotate: 45deg;
}

.obviouslead-tooltip-portal--below .obviouslead-tooltip-portal__arrow {
  margin-top: -5px;
  margin-bottom: -5px;
}

.js-obviouslead-tooltip-flyout .ui-tooltip-host[data-tooltip]::after,
.js-obviouslead-tooltip-flyout .ui-tooltip-host[data-tooltip]::before {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--flow-ui-font);
  background: var(--flow-bg);
  color: var(--flow-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--flow-ui-font);
}

/* Marges des titres : reset global ; les zones (modales, cartes marketing, etc.) ajoutent leur espacement */
h3 {
  margin-block: 0;
}

body.campaign-page {
  font-family: var(--flow-lead-font);
}

body.campaign-page h1,
body.campaign-page h2,
body.campaign-page h3,
body.campaign-page h4,
body.campaign-page h5,
body.campaign-page h6 {
  font-family: var(--flow-lead-font);
}

body.campaign-page input,
body.campaign-page textarea,
body.campaign-page select,
body.campaign-page button,
body.campaign-page .btn,
body.campaign-page .ui-button,
body.campaign-page .ui-sub-button,
body.campaign-page .dash-stats-combobox-trigger {
  font-family: var(--flow-lead-font);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-brand-logo {
  height: 24px;
  width: auto;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow: visible;
}

.nav-auth-guest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Evite le flash des blocs auth/nav dynamiques avant hydratation JS */
.nav-auth-guest,
.nav-auth-user,
.nav-dash-wrap,
.nav-tarifs-main-wrap {
  opacity: 0;
  pointer-events: none;
}

html.nav-hydrated .nav-auth-guest:not(.hidden),
html.nav-hydrated .nav-auth-user:not(.hidden),
html.nav-hydrated .nav-dash-wrap:not(.hidden),
html.nav-hydrated .nav-tarifs-main-wrap:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.nav-links a {
  color: var(--flow-text);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--flow-accent);
}

.btn-nav {
  background: #3b82f6;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 6px;
}

.btn-nav:hover {
  background: #2563eb;
}

.container,
.ui-container.ui-container--flow {
  max-width: 1120px;
  margin: 30px auto 16px;
  padding: 0 24px 24px;
}

.ui-container {
  max-width: 1120px;
  margin: 30px auto 16px;
  padding: 0 24px 24px;
}

.card {
  background: transparent;
  border: 0;
  border-radius: 22px;
  padding: 22px;
  margin-top: 18px;
}

.muted {
  color: var(--flow-muted);
}

.row {
  display: flex;
  align-items: center;
}

.between {
  justify-content: space-between;
}

.stack {
  display: flex;
  flex-direction: column;
}

.gap {
  gap: 10px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contrôles de formulaire : typo + gabarit communs ; couleurs = variables `:root` (accent = --flow-accent). */
input,
textarea,
select,
button,
.btn {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--flow-ui-font);
}

input,
textarea,
select {
  border: 1px solid color-mix(in srgb, var(--flow-accent) 18%, var(--flow-surface-3));
  background: var(--flow-surface-1);
  color: var(--flow-text);
}

button,
.btn {
  cursor: pointer;
  border: 1px solid var(--flow-accent-overlay);
  background: var(--flow-accent);
  color: var(--flow-on-accent);
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.ui-input {
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

textarea.ui-textarea.ui-input {
  transition: none;
}

.ui-input:focus:not(textarea):not(.dash-stats-combobox-trigger):not([type="color"]):not([type="file"]) {
  outline: none !important;
  border-color: var(--flow-accent);
  box-shadow: none !important;
}

.ui-input:disabled,
.ui-input[readonly],
.ui-textarea:disabled {
  opacity: 0.72;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
}

/* Racine Field du textarea (vanilla, même rôle que Field + Textarea shadcn) */
.ui-textarea-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ui-textarea-field > .ui-textarea {
  flex: 1;
  min-width: 0;
}

/* Styles détaillés du contrôle : bloc « port shadcn » en fin de fichier (textarea.ui-textarea.ui-input) */

.ui-button {
  transition: background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.ui-button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.ui-button--muted {
  background: transparent !important;
  border-color: var(--flow-accent-ghost-border) !important;
  color: var(--flow-accent-ghost-text) !important;
}

.ui-button--muted:hover {
  border-color: var(--flow-accent-ghost-border-hover) !important;
  color: var(--flow-accent-ghost-text-hover) !important;
}

/* Enregistrement manuel (réglages, etc.) — CTA accent */
.ui-button--save,
.settings-btn-save {
  background: var(--flow-accent) !important;
  border: 1px solid var(--flow-accent-overlay) !important;
  color: #fff !important;
}

.ui-button--save:hover,
.settings-btn-save:hover {
  filter: brightness(1.06);
}

.ui-sub-button {
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--flow-accent-ghost-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-accent) 12%, var(--flow-surface-2));
  color: var(--flow-accent-ghost-text);
  font-size: 12px;
  cursor: pointer;
}

.ui-sub-button:hover {
  background: color-mix(in srgb, var(--flow-accent) 18%, var(--flow-surface-2));
  color: var(--flow-accent-ghost-text-hover);
}

.q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #283445;
  border-radius: 8px;
}

.campaign-item {
  background: #11161d;
  border: 1px solid #293343;
  border-radius: 10px;
  padding: 12px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 53px);
}

.builder-split {
  height: calc(100vh - 53px);
}

.builder-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

.builder-page > .glow-menu {
  flex-shrink: 0;
}

/* Conservé pour `.video-frame-reference-overlay-spinner` (cercle sur l’étape Reference). */
@keyframes builder-edit-entry-gate-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------------------------------- */
/* Obviouslead — activity indicator : fond accent, logo + texte, centré dans le parent */
/* Le parent doit être positionné (relative / absolute / fixed).               */
/* -------------------------------------------------------------------------- */
obviouslead-activity-indicator.obviouslead-activity-indicator {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  background: var(--campaign-video-lead-accent, var(--flow-accent, #6366f1));
}

obviouslead-activity-indicator.obviouslead-activity-indicator--active {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  min-height: 0;
  box-sizing: border-box;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__status-wrap {
  max-width: min(92%, 36rem);
  text-align: center;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__status-wrap.hidden {
  display: none !important;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__status-line {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--campaign-video-lead-on-accent, var(--flow-on-accent, #ffffff));
}

/* Points animés : même idée que le toast, sans translateY (évite le saut). */
obviouslead-activity-indicator .obviouslead-activity-indicator__ellipsis-run {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__ellipsis-run span {
  display: inline-block;
  min-width: 0.12em;
  text-align: center;
  animation: obviouslead-activity-status-ellipsis 1.05s ease-in-out infinite;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__ellipsis-run span:nth-child(2) {
  animation-delay: 0.18s;
}

obviouslead-activity-indicator .obviouslead-activity-indicator__ellipsis-run span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes obviouslead-activity-status-ellipsis {
  0%,
  100% {
    opacity: 0.12;
  }
  40% {
    opacity: 1;
  }
}

obviouslead-activity-indicator .obviouslead-activity-indicator__logo {
  display: block;
  width: min(160px, 42vw);
  height: auto;
  object-fit: contain;
}

@keyframes obviouslead-activity-logo-opacity-pulse {
  0%,
  100% {
    opacity: 0.38;
  }

  50% {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------- */
/* Obviouslead — splash de chargement plein viewport (logo, volet disparition ↑) */
/* Script : `/components/page-load-splash.js` ajouté en tête du `<body>`.   */
/* -------------------------------------------------------------------------- */
#obviouslead-page-splash.obviouslead-page-splash {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
}

#obviouslead-page-splash .obviouslead-page-splash__volet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  background: var(--campaign-video-lead-accent, var(--flow-accent, #6366f1));
}

#obviouslead-page-splash .obviouslead-page-splash__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(220px, 56vw);
}

/* Même pattern que `.builder-upload-progress__bar` (shadcn / translateX). */
#obviouslead-page-splash .obviouslead-page-splash__bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--campaign-video-lead-on-accent, var(--flow-on-accent, #ffffff)) 28%,
    transparent
  );
  overflow: hidden;
}

#obviouslead-page-splash .obviouslead-page-splash__bar-indicator {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--campaign-video-lead-on-accent, var(--flow-on-accent, #ffffff));
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

#obviouslead-page-splash:not(.obviouslead-page-splash--leaving) .obviouslead-page-splash__logo {
  display: block;
  width: min(160px, 42vw);
  height: auto;
  object-fit: contain;
  animation: obviouslead-activity-logo-opacity-pulse 1.4s ease-in-out infinite;
}

#obviouslead-page-splash.obviouslead-page-splash--leaving {
  pointer-events: none;
}

#obviouslead-page-splash.obviouslead-page-splash--leaving .obviouslead-page-splash__logo {
  animation: none;
  opacity: 0.85;
}

#obviouslead-page-splash.obviouslead-page-splash--leaving .obviouslead-page-splash__volet {
  animation: obviouslead-page-splash-volet-out 0.46s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes obviouslead-page-splash-volet-out {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -22vh, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #obviouslead-page-splash:not(.obviouslead-page-splash--leaving) .obviouslead-page-splash__logo {
    animation: none;
    opacity: 1;
  }

  #obviouslead-page-splash .obviouslead-page-splash__bar-indicator {
    transition: none;
  }

  #obviouslead-page-splash.obviouslead-page-splash--leaving .obviouslead-page-splash__volet {
    animation-name: obviouslead-page-splash-volet-out-rm;
    animation-duration: 0.28s;
  }
}

@keyframes obviouslead-page-splash-volet-out-rm {
  to {
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Obviouslead — toasts (API `window.ObviousleadToast`, script `obviouslead-toast.js`)    */
/* Bas / centré, style Sonner-like, petite coche avant le titre.               */
/* -------------------------------------------------------------------------- */
#obviouslead-toast-host.obviouslead-toast-host {
  --obviouslead-toast-bg: #09090b;
  --obviouslead-toast-border: #27272a;
  --obviouslead-toast-shadow: 0 10px 38px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --obviouslead-toast-title: #fafafa;
  --obviouslead-toast-muted: #a1a1aa;
  --obviouslead-toast-check: #86efac;
  --obviouslead-toast-success-border: #3f3f46;
  --obviouslead-toast-info-border: #1e3a5f;
  --obviouslead-toast-warning-border: #422006;
  position: fixed;
  z-index: 500;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  top: auto;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100vw;
  padding-inline: 16px;
  box-sizing: border-box;
  pointer-events: none;
}

#obviouslead-toast-host .obviouslead-toast__item {
  pointer-events: auto;
  position: relative;
  display: block;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  min-width: min(200px, 100%);
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--obviouslead-toast-border);
  background: var(--obviouslead-toast-bg);
  box-shadow: var(--obviouslead-toast-shadow);
  color: var(--obviouslead-toast-title);
  text-align: center;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.21, 1.02, 0.43, 0.98);
}

#obviouslead-toast-host .obviouslead-toast__item--show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#obviouslead-toast-host .obviouslead-toast__item--leave {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}

#obviouslead-toast-host .obviouslead-toast__item--default {
  border-color: var(--obviouslead-toast-border);
}

#obviouslead-toast-host .obviouslead-toast__item--success {
  border-color: var(--obviouslead-toast-success-border);
}

#obviouslead-toast-host .obviouslead-toast__item--error {
  border-color: var(--flow-accent-overlay);
  background: var(--flow-accent);
}

#obviouslead-toast-host .obviouslead-toast__item--info {
  border-color: var(--obviouslead-toast-info-border);
}

#obviouslead-toast-host .obviouslead-toast__item--warning {
  border-color: var(--obviouslead-toast-warning-border);
}

/* Même bordure qu’en succès : évite le bleu « info » pendant Saving → Saved. */
#obviouslead-toast-host .obviouslead-toast__item--loading {
  border-color: var(--obviouslead-toast-success-border);
}

#obviouslead-toast-host .obviouslead-toast__item--loading .obviouslead-toast__icon {
  color: var(--obviouslead-toast-muted);
}

#obviouslead-toast-host .obviouslead-toast__spinner {
  display: block;
  animation: obviouslead-toast-spin 0.75s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes obviouslead-toast-spin {
  to {
    transform: rotate(360deg);
  }
}

#obviouslead-toast-host .obviouslead-toast__ellipsis-run span {
  display: inline-block;
  min-width: 0.12em;
  text-align: center;
  animation: obviouslead-toast-ellipsis 1.05s ease-in-out infinite;
}

#obviouslead-toast-host .obviouslead-toast__ellipsis-run span:nth-child(2) {
  animation-delay: 0.18s;
}

#obviouslead-toast-host .obviouslead-toast__ellipsis-run span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes obviouslead-toast-ellipsis {
  0%,
  100% {
    opacity: 0.12;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

#obviouslead-toast-host .obviouslead-toast__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.22s ease;
}

#obviouslead-toast-host .obviouslead-toast__body.obviouslead-toast__body--fade-out {
  opacity: 0;
}

#obviouslead-toast-host .obviouslead-toast__row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: left;
}

#obviouslead-toast-host .obviouslead-toast__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--obviouslead-toast-check);
}

#obviouslead-toast-host .obviouslead-toast__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

#obviouslead-toast-host .obviouslead-toast__item--error .obviouslead-toast__icon {
  color: var(--flow-on-accent);
}

#obviouslead-toast-host .obviouslead-toast__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--obviouslead-toast-title);
}

#obviouslead-toast-host .obviouslead-toast__description {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--obviouslead-toast-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #obviouslead-toast-host .obviouslead-toast__item {
    transition: opacity 0.12s ease;
  }

  #obviouslead-toast-host .obviouslead-toast__item--show,
  #obviouslead-toast-host .obviouslead-toast__item--leave {
    transform: none;
  }

  #obviouslead-toast-host .obviouslead-toast__spinner {
    animation: none;
    opacity: 0.88;
  }

  #obviouslead-toast-host .obviouslead-toast__ellipsis-run span {
    animation: none;
    opacity: 0.7;
  }

  #sim-status .obviouslead-toast__ellipsis-run span {
    animation: none;
    opacity: 0.7;
  }

  obviouslead-activity-indicator .obviouslead-activity-indicator__ellipsis-run span {
    animation: none;
    opacity: 0.7;
  }

  #obviouslead-toast-host .obviouslead-toast__body {
    transition: none;
  }
}

/* Évite double rail : `html { scrollbar-gutter: stable }` + scroll sur `#config-editor`. */
html:has(body.builder-page) {
  scrollbar-gutter: auto;
}

.builder-page .builder-split {
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.video-pane,
.form-pane {
  padding: 16px;
}

.video-pane {
  padding: 0;
  border-right: 1px solid #2a3342;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  height: 100%;
}

/* Grille `main.builder-split` : sans ça, min-height:auto laisse le panneau grandir avec le contenu → pas de scroll. */
.builder-page main.builder-split > .video-pane,
.builder-page main.builder-split > .form-pane {
  min-height: 0;
}

/* Colonne réglages : scroll sur toute la section (marges incluses), pas seulement sur #config-editor / #campaign-form. */
.builder-page main.builder-split > .form-pane {
  padding: 16px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Colonne réglages : fond opaque = même apparence avec ou sans voile d’entrée (évite de voir le `body`). */
.builder-page main.builder-split > .form-pane#builder-config-pane {
  background: var(--flow-bg);
}

/* Même logique que la page lead : vidéo à droite (réglage Video / simulation). */
.builder-page main.builder-split.builder-split--video-right > .video-pane {
  grid-column: 2;
  border-right: none;
  border-left: 1px solid #2a3342;
}

.builder-page main.builder-split.builder-split--video-right > .form-pane#builder-config-pane {
  grid-column: 1;
}

#config-simulation.builder-config-simulation--appearance {
  background: var(--flow-surface-1, var(--flow-bg));
  color: var(--flow-text);
  font-family: var(--flow-lead-font, ui-sans-serif, system-ui, sans-serif);
  /* Comme `.builder-appearance-lead-sim` / `:root` page lead : survol RDV (`--flow-accent-overlay`) doit dériver du `--flow-accent` posé sur ce scope, pas seulement du thème builder global. */
  --flow-accent-overlay: color-mix(in srgb, var(--flow-accent) 82%, #000000);
  --flow-on-accent: #ffffff;
  --flow-manual-booking-type-active-text: var(--flow-on-accent);
}

/* Simulation : même pile lead que l’aperçu Appearance (`#builder-appearance-lead-sim`) et `body.campaign-page` (champs + combobox mois / année / heure + RDV). */
#config-simulation.builder-config-simulation--appearance input,
#config-simulation.builder-config-simulation--appearance textarea,
#config-simulation.builder-config-simulation--appearance select,
#config-simulation.builder-config-simulation--appearance button,
#config-simulation.builder-config-simulation--appearance .btn,
#config-simulation.builder-config-simulation--appearance .ui-button,
#config-simulation.builder-config-simulation--appearance .ui-sub-button,
#config-simulation.builder-config-simulation--appearance .dash-stats-combobox-trigger,
#config-simulation.builder-config-simulation--appearance .dash-stats-combobox-option {
  font-family: var(--flow-lead-font);
}

.builder-page main.builder-split > .form-pane::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.builder-page main.builder-split > .form-pane::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* Annule le `padding-right` / `margin-right` de `.ui-scroll-surface` (barre fine) : le builder masque la barre sur le port. */
.builder-page main.builder-split > .form-pane.ui-scroll-surface {
  padding-right: 16px !important;
  margin-right: 0 !important;
}

.builder-video-pane-default {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Même idée que l’aperçu Appearance : pas de frame « pleine » avant l’intro au changement d’onglet. */
#builder-video-pane-default.builder-video-pane-default--hold-first-paint {
  opacity: 0;
  pointer-events: none;
}

.builder-split--appearance-preview #builder-video-pane-default {
  display: none !important;
}

/* Une seule ligne de séparation : sur `#builder-appearance-lead-sim` (pleine hauteur), pas en plus du `border-right` de `.video-pane`. */
.builder-split--appearance-preview > .video-pane {
  border-right: none !important;
}

.builder-appearance-lead-sim {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  align-items: stretch;
  /* Accent éventuellement défini inline : overlay dérivé sans 2e variable JS. */
  --flow-accent-overlay: color-mix(in srgb, var(--flow-accent) 82%, #000000);
}

.builder-split--appearance-preview #builder-appearance-lead-sim {
  display: flex;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  flex-direction: column;
  /* Le scroll est sur `.builder-appearance-lead-sim-scroll` (hauteur bornée par la flex chain). */
  overflow: hidden;
  /* Séparation nette avec la colonne réglages (#config-editor / `section.form-pane`). */
  border-right: 1px solid var(--flow-surface-3);
  box-sizing: border-box;
}

.builder-appearance-lead-sim-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 12px;
  border-radius: 12px;
  border: 1px solid var(--flow-surface-3);
  background: var(--flow-surface-1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Aperçu Appearance : même emprise que la zone vidéo (plein panneau gauche, sans cadre réduit). */
.builder-split--appearance-preview .builder-appearance-lead-sim-scroll {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  align-items: stretch;
}

/* Même idée que `.form-pane` : pas de rail gris quand le contenu tient (molette / tactile restent possibles). */
.builder-split--appearance-preview .builder-appearance-lead-sim-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Masque le panneau jusqu’au rendu + intro (évite flash avant l’anim). */
.builder-appearance-lead-sim-pane.builder-appearance-lead-sim-pane--hold-first-paint {
  opacity: 0;
  pointer-events: none;
}

.builder-appearance-lead-sim-pane.campaign-form-pane {
  border-radius: 12px;
  overflow: visible;
  font-family: var(--flow-lead-font, ui-sans-serif, system-ui, sans-serif);
  width: min(560px, 100%);
  margin-inline: auto;
  align-self: center;
}

.builder-split--appearance-preview .builder-appearance-lead-sim-pane.campaign-form-pane {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  align-self: stretch;
  border-radius: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: clamp(32px, 6vh, 72px) 16px;
}

/* One at a time : panneau ≥ hauteur du port scroll → centrage vertical possible ; grandit si le RDV déborde. */
.builder-split--appearance-preview
  .builder-appearance-lead-sim-pane.campaign-form-pane:not(
    :has(#builder-appearance-lead-sim-form.campaign-form-content--stacked)
  ) {
  flex: 1 0 auto;
  min-height: 100%;
}

/* Stacked : centrage vertical uniquement via le padding du formulaire (comme `#lead-form`), pas le panneau. */
.builder-split--appearance-preview
  .builder-appearance-lead-sim-pane.campaign-form-pane:has(#builder-appearance-lead-sim-form.campaign-form-content--stacked) {
  flex: 0 0 auto;
  min-height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

.builder-appearance-lead-sim-pane.campaign-form-pane h2 {
  font-family: var(--flow-lead-font, ui-sans-serif, system-ui, sans-serif);
}

/* Aperçu Appearance : boutons / champs = même `--flow-lead-font` que le volet (token posé sur l’hôte). */
#builder-appearance-lead-sim input,
#builder-appearance-lead-sim textarea,
#builder-appearance-lead-sim select,
#builder-appearance-lead-sim button,
#builder-appearance-lead-sim .btn,
#builder-appearance-lead-sim .ui-button,
#builder-appearance-lead-sim .ui-sub-button,
#builder-appearance-lead-sim .dash-stats-combobox-trigger {
  font-family: var(--flow-lead-font);
}

.builder-appearance-preview-empty {
  margin: 0;
  padding: 8px 0;
  text-align: center;
}

/* Aperçu Appearance sans question / RDV : fond = `--flow-accent` (tokens campagne / aperçu sur `#builder-appearance-lead-sim`).
   `!important` : sinon `.campaign-form-pane` dans le bloc « Final palette enforcement » impose
   `background: var(--flow-surface-1) !important` (couleur page lead) et masque le contraste avec le panneau réglages. */
.builder-split--appearance-preview .builder-appearance-lead-sim-scroll:has(.builder-appearance-lead-sim-pane--preview-empty) {
  background: var(--flow-accent) !important;
  align-items: stretch;
}

.builder-split--appearance-preview
  .builder-appearance-lead-sim-pane.builder-appearance-lead-sim-pane--preview-empty.campaign-form-pane {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--flow-accent) !important;
}

.builder-split--appearance-preview .builder-appearance-lead-sim-pane--preview-empty #builder-appearance-lead-sim-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.builder-split--appearance-preview .builder-appearance-lead-sim-pane--preview-empty .builder-appearance-preview-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(200px, 36vh);
  padding: 16px 12px;
  box-sizing: border-box;
  margin: 0;
}

.builder-split--appearance-preview .builder-appearance-lead-sim-pane--preview-empty .builder-appearance-preview-empty {
  color: var(--flow-text);
  max-width: 22rem;
  line-height: 1.5;
  font-size: 14px;
}

#builder-page-appearance .builder-appearance-save-row {
  width: min(100%, 520px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  justify-content: center;
  align-items: center;
}

#builder-page-appearance .builder-appearance-save-row .upload-cta {
  margin-top: 0;
}

#builder-page-video .builder-video-save-row {
  width: min(100%, 520px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 16px;
  padding-top: 0;
  justify-content: center;
  align-items: center;
}

#builder-page-video .builder-video-save-row .upload-cta {
  margin-top: 0;
}

.form-pane {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-frame {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.campaign-video-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  container-type: size;
  container-name: campaign-video;
}

.campaign-video-pan-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  /* Pendant le boot Mux le player est en `opacity:0` : évite le flash gris / clair (`--flow-surface-2` du `.video-frame`) entre indicateur et vidéo. */
  background-color: #000;
}

/* Fin de lecture : bouton pour relancer depuis le début */
.campaign-video-replay-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4cqw, 24px);
  box-sizing: border-box;
  background: color-mix(in srgb, #000000 42%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.campaign-video-replay-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.campaign-video-replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(0.875rem, 2.2cqw, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--campaign-video-lead-on-accent, var(--flow-on-accent, #ffffff));
  background: var(--campaign-video-lead-accent, var(--flow-accent, #6366f1));
  box-shadow:
    0 1px 2px rgb(0 0 0 / 12%),
    0 8px 28px rgb(0 0 0 / 22%);
}

.campaign-video-replay-btn:hover {
  filter: brightness(1.06);
}

.campaign-video-replay-btn:focus-visible {
  outline: 2px solid var(--campaign-video-lead-on-accent, #ffffff);
  outline-offset: 3px;
}

.campaign-video-replay-btn svg {
  flex-shrink: 0;
}

.campaign-video-replay-btn__label {
  white-space: nowrap;
}

.campaign-video-pan-wrap.campaign-video-pan-wrap--replay-on {
  z-index: 5;
}

/* Lead + builder : même activity indicator plein cadre vidéo (au-dessus timeline / overlay ref). */
body.campaign-page .video-frame > .obviouslead-activity-host--video-frame,
body.builder-page .video-frame > .obviouslead-activity-host--video-frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: 0;
}

body.campaign-page .video-frame > .obviouslead-activity-host--video-frame:not(:defined),
body.builder-page .video-frame > .obviouslead-activity-host--video-frame:not(:defined) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 30;
  box-sizing: border-box;
  pointer-events: none;
  background: var(--campaign-video-lead-accent, var(--flow-accent, #6366f1));
}

/*
 * Avant `applyLeadPageThemeFromCampaign` : le volet vidéo n’hérite pas de l’accent marketing `:root`
 * (sinon indicateur / timeline / Mux voient site → lead). Accent neutre « chrome vidéo » jusqu’à
 * `body.campaign-lead-theme-ready` (classe posée en JS dès les tokens lead sont appliqués).
 */
body.campaign-page:not(.campaign-lead-theme-ready) .campaign-split > .video-pane {
  --flow-accent: #2a303c;
  --flow-accent-overlay: color-mix(in srgb, #2a303c 82%, #000000);
  --flow-on-accent: #ffffff;
}

/*
 * Indicateur vidéo : masqué jusqu’à `campaign-video-lead-chrome-ready` (posé après `syncCampaignVideoChromeLeadAccent`).
 * Sinon 1er frame = `--flow-accent` neutre sur le volet puis `--campaign-video-lead-accent` → flash deux tons.
 */
body.campaign-page:not(.campaign-video-lead-chrome-ready) .video-frame > .obviouslead-activity-host--video-frame {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Masque logo surimpression + timeline tant que la vidéo Mux n’est pas prête (classe retirée par campaign.js). */
body.campaign-page.campaign-mux-booting .video-frame-brand-mark,
body.campaign-page.campaign-mux-booting .timeline-track {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Logo marque / logo lead en surimpression sur la vidéo — cadre carré (−10 % vs taille de référence), sans ombre */
.video-frame-brand-mark {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  width: clamp(calc(84px * 0.9), calc(24cqw * 0.9), calc(140px * 0.9));
  height: clamp(calc(84px * 0.9), calc(24cqw * 0.9), calc(140px * 0.9));
  overflow: hidden;
}

/* Défaut si aucune classe pos (ex. avant exécution JS) */
.video-frame-brand-mark:not([class*="video-frame-brand-mark--pos-"]) {
  top: 4%;
  right: 5%;
}

.video-frame-brand-mark--pos-tl {
  top: 4%;
  left: 5%;
  right: auto;
  bottom: auto;
  transform: none;
}

.video-frame-brand-mark--pos-tr {
  top: 4%;
  right: 5%;
  left: auto;
  bottom: auto;
  transform: none;
}

.video-frame-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.94;
}

/* Builder : même « cover » que la page lead — 16∶9 remplit la hauteur du panneau (pas de letterbox dans le cadre) */
.builder-page .video-frame > .builder-video-dock {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  flex: unset;
  min-height: 0;
  container-type: size;
  container-name: builder-video;
}

/* Lecteur Mux au-dessus du fond placeholder (thumbnail) : le faux cadre reste pour la toolbar / piste mock. */
body.builder-page.builder-mux-preview-active .video-frame > .builder-video-dock {
  z-index: 5;
}

body.builder-page.builder-mux-preview-active .video-placeholder {
  pointer-events: none;
}

body.builder-page.builder-mux-preview-active .video-placeholder-art {
  opacity: 0;
  visibility: hidden;
}

.campaign-page .video-frame {
  display: flex;
  flex-direction: column;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: radial-gradient(circle at 30% 20%, #1f2e44 0%, #0c1119 45%, #080c12 100%);
  z-index: 4;
}

/* Aplat couleur accent par défaut ; un `background-image` inline (thumbnail Mux) peut être posé par
 * `renderAll()` une fois la vidéo prête, et passe au-dessus de la couleur d'accent. */
.video-placeholder-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--flow-accent);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Couvre tout le .video-frame (y compris toolbar + timeline), au-dessus des z-index 4–7 */
.video-frame-reference-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: rgba(6, 9, 14, 0.55);
  backdrop-filter: blur(1px);
  pointer-events: none;
}

.video-placeholder-loading-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #e8eef8;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  max-width: 20rem;
  line-height: 1.4;
}

.video-frame-reference-overlay-spinner {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--flow-accent);
  animation: builder-edit-entry-gate-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-frame-reference-overlay-spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.45);
  }
}

.placeholder-center {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  width: min(90%, 440px);
  color: #edf3ff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.placeholder-center strong {
  font-size: 28px;
  letter-spacing: 0.3px;
}

.placeholder-center span {
  font-size: 14px;
  color: #c8d7f3;
}

.placeholder-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  border: 1px solid #2f3b4b;
  background: rgba(8, 14, 24, 0.82);
  color: #d8e3f5;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}

.video-placeholder-track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 70px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-surface-2) 85%, #ffffff);
  border: 1px solid var(--flow-surface-3);
  box-shadow: none;
  z-index: 5;
}

.timeline-track {
  background: color-mix(in srgb, var(--flow-surface-2) 85%, #ffffff) !important;
  border: 1px solid var(--flow-surface-3) !important;
  box-shadow: none !important;
  height: 12px;
}

.mock-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--flow-accent) !important;
  border: 1px solid var(--flow-surface-3) !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0;
}

.mock-marker iconify-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: var(--flow-accent) !important;
}

.mock-marker.question {
  background: #ffffff !important;
}

.mock-marker.info {
  background: #ffffff !important;
}

.mock-marker.booking {
  background: #ffffff !important;
}

video {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 0;
  object-fit: cover;
}

#builder-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.obviouslead-video-player,
mux-player.obviouslead-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
}

/* Mux Player (hors dashboard) : uniquement le bouton lecture central + tap sur la vidéo (gesture layer).
 * Le player des modales dashboard (`.dash-lead-modal-mux-player`) est exclu : Gerwig utilise
 * `breakpoints="sm:470"` — sous 470px la barre du bas ignore les variables *sans* préfixe de section
 * (`--play-button`, etc.) ; il faut cibler `--bottom-*` (voir bloc dédié plus bas). */
mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player) {
  --seek-backward-button: none;
  --seek-forward-button: none;
  --mute-button: none;
  --captions-button: none;
  --airplay-button: none;
  --pip-button: none;
  --fullscreen-button: none;
  --cast-button: none;
  --playback-rate-button: none;
  --volume-range: none;
  --time-range: none;
  --time-display: none;
  --duration-display: none;
  --rendition-menu-button: none;
  --live-button: none;
  --loading-indicator: none;
  --dialog: none;
  --secondary-color: transparent;
}

mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player)::part(top),
mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player)::part(bottom) {
  display: none !important;
}

/* Dashboard : masquer la barre du haut (titre) ; la barre du bas est gérée par le bloc suivant. */
mux-player.dash-lead-modal-mux-player::part(top) {
  display: none !important;
}

/*
 * Thème Gerwig (défaut Mux 3) : en vue étroite (<470px), le bouton centre devient carré — forcer le disque.
 * Obviouslead (hors modale dashboard) : accent au repos, fond transparent au survol.
 */
mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player) {
  --media-control-border-radius: 50%;
}

mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player)::part(center play button),
mux-player.obviouslead-video-player:not(.dash-lead-modal-mux-player)::part(center play button pre-play) {
  --media-control-background: var(
    --media-accent-color,
    var(--campaign-video-lead-accent, var(--flow-accent, #eac218))
  ) !important;
  --media-control-hover-background: transparent !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  transition: background 0.4s;
}

/* Modale lead / Statistics : pas de disque sous le bouton lecture — uniquement la flèche, lisible sur la vidéo. */
mux-player.dash-lead-modal-mux-player::part(center play button),
mux-player.dash-lead-modal-mux-player::part(center play button pre-play) {
  --media-control-background: transparent !important;
  --media-control-hover-background: transparent !important;
  --media-icon-color: #fff !important;
  color: #fff !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/*
 * Dashboard (modale lead + panneau stats) : uniquement le bouton plein écran en bas à droite.
 *
 * Gerwig (mux-player 3.x) calcule pour chaque contrôle un `--media-<kind>-button-display` à partir
 * de variables publiques (`--<kind>-button` ou `--<section>-<kind>-button`). Pour rendre la barre
 * vraiment invisible peu importe le breakpoint Gerwig (`breakpointsm` à 470 px), on attaque deux
 * niveaux :
 *   1. Variables internes `--media-*-display: none !important` pour les contrôles qui n'existent
 *      qu'en `bottom` (mute, volume, time, captions, airplay, pip, cast, vitesse, sous-titres…).
 *   2. `--bottom-play-button: none` pour ne masquer **que** le bouton lecture du bas en gardant
 *      le bouton lecture central intact (sinon `--play-button` global le masquerait aussi).
 */
mux-player.dash-lead-modal-mux-player {
  --dialog: none;
  --loading-indicator: none;
  --secondary-color: transparent;
  --controls-backdrop-color: transparent;
  --media-control-bar-background: transparent;

  /* Variables publiques pour le bas (uniquement, pour préserver le centre). */
  --bottom-play-button: none;
  --bottom-seek-backward-button: none;
  --bottom-seek-forward-button: none;
  --bottom-time-display: none;
  --bottom-duration-display: none;
  --bottom-mute-button: none;
  --bottom-volume-range: none;
  --bottom-time-range: none;
  --bottom-rendition-menu-button: none;
  --bottom-playback-rate-menu-button: none;
  --bottom-audio-track-menu-button: none;
  --bottom-captions-menu-button: none;
  --bottom-airplay-button: none;
  --bottom-cast-button: none;
  --bottom-pip-button: none;
  --bottom-live-button: none;
  --bottom-title-display: none;

  /* Verrou global pour les contrôles qui n'existent qu'en `bottom` (zéro impact sur le centre).
   * `!important` pour battre toute déclaration locale dans le shadow DOM du thème. */
  --media-live-button-display: none !important;
  --media-seek-backward-button-display: none !important;
  --media-seek-forward-button-display: none !important;
  --media-mute-button-display: none !important;
  --media-volume-range-display: none !important;
  --media-time-range-display: none !important;
  --media-time-display-display: none !important;
  --media-duration-display-display: none !important;
  --media-title-display-display: none !important;
  --media-captions-button-display: none !important;
  --media-captions-menu-button-display: none !important;
  --media-airplay-button-display: none !important;
  --media-pip-button-display: none !important;
  --media-cast-button-display: none !important;
  --media-playback-rate-button-display: none !important;
  --media-playback-rate-menu-button-display: none !important;
  --media-rendition-menu-button-display: none !important;
  --media-audio-track-menu-button-display: none !important;
}

mux-player.dash-lead-modal-mux-player::part(bottom) {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 8px;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
  pointer-events: none;
}

mux-player.dash-lead-modal-mux-player::part(fullscreen-button),
mux-player.dash-lead-modal-mux-player::part(fullscreen button) {
  pointer-events: auto !important;
}

.obviouslead-video-player:not(.hidden),
mux-player.obviouslead-video-player:not(.hidden) {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.obviouslead-video-player:not(.hidden).video-reveal-in,
mux-player.obviouslead-video-player:not(.hidden).video-reveal-in {
  opacity: 1;
  pointer-events: auto;
}

/* Dashboard : modale lead + panneau Statistics — pas d’animation `video-reveal-in` (cf. campaign.js / app.js). */
mux-player.dash-lead-modal-mux-player:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

/* Spécificité > règle globale `mux-player.obviouslead-video-player` (évite zone grise cliquable sans image). */
#dash-lead-modal mux-player.obviouslead-video-player:not(.hidden),
#dash-stats-detail mux-player.obviouslead-video-player:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .obviouslead-video-player:not(.hidden),
  mux-player.obviouslead-video-player:not(.hidden) {
    transition: none;
  }
}

.obviouslead-video-player iframe,
.obviouslead-video-player > div {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/*
 * Hôte mux : pas de !important ici — sinon il écrase le mode `fit-contain` (min + ratio) et le pan JS en `fit-cover`.
 * Les iframes / div internes gardent 100% !important pour éviter la zone grise cliquable sans image.
 */
mux-player.obviouslead-video-player {
  width: 100%;
  height: 100%;
  border: none;
}

/*
 * Toute la vidéo visible (sans recadrage) : boîte mux au ratio réel, inscrite dans le shell.
 * `--obviouslead-contain-ar` = largeur÷hauteur du fichier (posé en JS depuis `videoAspectRatio` / Mux).
 */
.campaign-video-shell--fit-contain {
  background: #000;
}

.campaign-video-shell--fit-contain .campaign-video-pan-wrap .obviouslead-video-player,
.campaign-video-shell--fit-contain .campaign-video-pan-wrap mux-player.obviouslead-video-player {
  position: absolute;
  inset: unset;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  box-sizing: border-box;
  width: min(100cqw, calc(100cqh * var(--obviouslead-contain-ar, 1.777777778))) !important;
  height: min(100cqh, calc(100cqw / var(--obviouslead-contain-ar, 1.777777778))) !important;
  max-width: 100cqw !important;
  max-height: 100cqh !important;
  aspect-ratio: var(--obviouslead-contain-ar, 1.777777778);
}

.campaign-video-shell--fit-contain .campaign-video-pan-wrap .obviouslead-video-player iframe,
.campaign-video-shell--fit-contain .campaign-video-pan-wrap .obviouslead-video-player > div,
.campaign-video-shell--fit-contain .campaign-video-pan-wrap mux-player.obviouslead-video-player {
  border-radius: 0;
}

/*
 * Fill + pan : le lecteur remplit le cadre ; le panoramique se fait sur le média (`object-position`, JS),
 * pas par `transform` sur l’hôte — ainsi le bouton play reste centré dans le shell.
 */
.campaign-video-shell--fit-cover .campaign-video-pan-wrap .obviouslead-video-player,
.campaign-video-shell--fit-cover .campaign-video-pan-wrap mux-player.obviouslead-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --media-object-fit: cover;
  --media-object-position: var(--obviouslead-video-object-position, center);
}

/* Même remplissage du média en mode « toute la vidéo » : la boîte suit déjà le ratio fichier. */
.campaign-video-shell--fit-contain .campaign-video-pan-wrap mux-player.obviouslead-video-player {
  --media-object-fit: cover;
  --media-object-position: center;
}

/* Renfort : variables parfois non appliquées au <video> imbriqué — `::part(video)` (mux-player 3.x). */
.campaign-video-shell--fit-cover .campaign-video-pan-wrap mux-player.obviouslead-video-player::part(video) {
  object-fit: cover !important;
  object-position: var(--obviouslead-video-object-position, center) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Mode « toute la vidéo » : le média reste entièrement visible même si le ratio hôte diffère légèrement. */
.campaign-video-shell--fit-contain .campaign-video-pan-wrap mux-player.obviouslead-video-player::part(video) {
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.video-toolbar {
  position: absolute;
  left: 50%;
  bottom: 98px;
  z-index: 7;
  justify-content: flex-end;
  transform: translateX(-50%);
}

.video-placeholder-toolbar {
  position: absolute;
  left: 50%;
  bottom: 98px;
  z-index: 6;
  transform: translateX(-50%);
}

.video-placeholder-icon-btn {
  cursor: default !important;
}

.video-toolbar button {
  background: rgba(43, 118, 255, 0.9);
  border-color: rgba(43, 118, 255, 0.95);
  backdrop-filter: blur(4px);
}

.video-toolbar .video-toolbar-icon-btn,
.video-toolbar .video-toolbar-icon-btn.ui-button,
.video-placeholder-toolbar .video-toolbar-icon-btn,
.video-placeholder-toolbar .video-toolbar-icon-btn.ui-button {
  position: relative;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 1px solid var(--flow-surface-3) !important;
  box-shadow: none !important;
  color: var(--flow-accent) !important;
  backdrop-filter: none !important;
}

.video-toolbar .video-toolbar-icon-btn iconify-icon,
.video-placeholder-toolbar .video-toolbar-icon-btn iconify-icon {
  width: 34px;
  height: 34px;
  font-size: 34px !important;
  color: var(--flow-accent) !important;
}

.video-toolbar .video-toolbar-icon-btn:hover,
.video-toolbar .video-toolbar-icon-btn.ui-button:hover,
.video-placeholder-toolbar .video-toolbar-icon-btn:hover,
.video-placeholder-toolbar .video-toolbar-icon-btn.ui-button:hover {
  background: #ffffff !important;
  color: var(--flow-accent-overlay) !important;
  transform: translateY(-1px) !important;
}

.video-toolbar .video-toolbar-icon-btn:hover iconify-icon,
.video-toolbar .video-toolbar-icon-btn.ui-button:hover iconify-icon,
.video-placeholder-toolbar .video-toolbar-icon-btn:hover iconify-icon,
.video-placeholder-toolbar .video-toolbar-icon-btn.ui-button:hover iconify-icon {
  color: var(--flow-accent-overlay) !important;
}

/* Unified tooltips: `data-tooltip="…"` + `.ui-tooltip-host` (ObviousleadUiTooltip.refresh). Same bubble as legacy video toolbar. */
.ui-tooltip-host[data-tooltip] {
  position: relative;
}

.ui-tooltip-host[data-tooltip]::after {
  content: attr(data-tooltip);
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  max-width: min(460px, calc(100vw - 20px));
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  background: var(--flow-surface-1);
  color: var(--flow-text);
  border: 1px solid var(--flow-surface-3);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: var(--obviouslead-tooltip-z);
}

.ui-tooltip-host[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  width: 8px;
  height: 8px;
  background: var(--flow-surface-1);
  border-right: 1px solid var(--flow-surface-3);
  border-bottom: 1px solid var(--flow-surface-3);
  rotate: 45deg;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: calc(var(--obviouslead-tooltip-z) - 1);
}

.ui-tooltip-host[data-tooltip]:hover::after,
.ui-tooltip-host[data-tooltip]:hover::before,
.ui-tooltip-host[data-tooltip]:focus-visible::after,
.ui-tooltip-host[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Ancrer la bulle sur toute la carte (pas sur le mot court) → lignes longues, pas une colonne étroite */
.dash-lead-modal-item .ui-tooltip-host[data-tooltip] {
  position: static;
  display: inline-block;
  vertical-align: baseline;
}

#dash-lead-modal .dash-lead-modal-item .ui-tooltip-host[data-tooltip]::after,
#dash-stats-detail .dash-lead-modal-item .ui-tooltip-host[data-tooltip]::after {
  width: min(460px, calc(100vw - 24px));
  max-width: min(460px, calc(100vw - 24px));
}

.video-toolbar.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.mode-toggle-btn {
  background: transparent;
  border-color: #2f3b4b;
  color: #c8d2e3;
}

.mode-toggle-btn.is-active {
  background: var(--flow-accent);
  border-color: var(--flow-accent-overlay);
  color: var(--flow-on-accent);
}

/* Bouton Calendly désactivé : `data-tooltip` sur le wrapper (ObviousleadUiTooltip — le disabled ne reçoit pas le survol). */
.modal-booking-calendly-wrap {
  display: inline-flex;
  vertical-align: middle;
}

.modal-booking-calendly-wrap .mode-toggle-btn:disabled {
  pointer-events: none;
}

.inline-booking-picker {
  width: 100%;
}

.manual-booking-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.manual-booking-left {
  min-height: 100%;
}

.creator-photo-pane {
  border: 1px solid #2f3b4b;
  border-radius: 10px;
  overflow: hidden;
  background: #0f141c;
}

.creator-photo-fill {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  background: linear-gradient(135deg, #273244 0%, #131a24 100%);
  background-size: cover;
  background-position: center;
}

.creator-photo-fill-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  place-items: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.creator-photo-fill--empty .creator-photo-fill-placeholder {
  display: block;
}

.creator-photo-fill--empty .creator-photo-fill-placeholder[hidden] {
  display: none !important;
}

.creator-photo-fill-placeholder iconify-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  margin: 0;
  line-height: 1;
  width: 4.5rem;
  height: 4.5rem;
  font-size: 4.5rem;
  color: color-mix(in srgb, var(--flow-muted, #9ba8bc) 72%, transparent);
  opacity: 0.92;
  --iconify-icon-width: 1em;
  --iconify-icon-height: 1em;
}

.settings-page .settings-preview-frame--booking .manual-booking-left.creator-photo-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.settings-page .settings-preview-frame--booking .creator-photo-fill {
  flex: 1 1 auto;
  height: 100%;
  min-height: 160px;
}

.settings-page .creator-photo-fill--empty .creator-photo-fill-placeholder iconify-icon {
  width: 5.5rem;
  height: 5.5rem;
  font-size: 5.5rem;
}

.settings-preview-frame--header
  .settings-preview-lead-hero-photo-fill.creator-photo-fill--empty
  .creator-photo-fill-placeholder
  iconify-icon {
  width: 6.5rem;
  height: 6.5rem;
  font-size: 6.5rem;
}

.manual-booking-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-booking-calendar-wrap {
  position: relative;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #131a24;
  /* Évite que mois + année passent à la ligne / chevauchent les jours quand la colonne est trop étroite. */
  min-width: min(100%, 288px);
  --mb-cal-gap: 3px;
  --mb-cal-inset-x: 10px;
  --mb-cal-inset-y: 8px;
  --mb-cal-cell: calc((100% - 6 * var(--mb-cal-gap)) / 7);
}

/* Voile chargement créneaux occupés (API calendar-busy) — style proche toast « Saving… ». */
.manual-booking-schedule-veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.manual-booking-schedule-veil.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.manual-booking-schedule-veil__card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--obviouslead-control-border, #e2e8f0);
  background: var(--obviouslead-toast-bg, #09090b);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: var(--obviouslead-toast-title, #fafafa);
}

.manual-booking-calendar-wrap > .manual-booking-schedule-veil[data-obviouslead-tz-feedback-veil="1"] {
  z-index: 9;
}

.manual-booking-schedule-veil__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: inherit;
}

.manual-booking-schedule-veil .obviouslead-toast__ellipsis-run span {
  display: inline-block;
  min-width: 0.12em;
  text-align: center;
  animation: obviouslead-toast-ellipsis 1.05s ease-in-out infinite;
}

.manual-booking-schedule-veil .obviouslead-toast__ellipsis-run span:nth-child(2) {
  animation-delay: 0.18s;
}

.manual-booking-schedule-veil .obviouslead-toast__ellipsis-run span:nth-child(3) {
  animation-delay: 0.36s;
}

.manual-booking-controls {
  border: 1px solid #2f3b4b;
  border-radius: 10px;
  background: #0f141c;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-side-title {
  margin: 0;
  font-size: 12px;
}

.booking-type-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.booking-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

.booking-physical-inline {
  width: 100%;
}

.booking-visio-link {
  display: inline;
  font-size: 12px;
  color: #8fb4ff;
  text-decoration: underline;
}

.booking-visio-line {
  margin: 0;
  font-size: 12px;
  color: #c8d2e3;
  text-align: center;
}

.booking-detail-cell {
  grid-column: 1 / -1;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-detail-cell.has-input {
  justify-content: stretch;
}


.booking-type-btn {
  width: 100%;
  background: transparent;
  border-color: var(--flow-accent);
  color: var(--flow-text);
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.25;
  padding: 8px 8px;
}

.booking-type-btn.is-active {
  background: var(--flow-accent);
  border-color: var(--flow-accent-overlay);
  color: var(--flow-on-accent);
}

.booking-time-select {
  width: 100%;
}

.manual-booking-time-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-booking-time-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

.manual-booking-time-control {
  width: 100%;
  min-width: 0;
}

.manual-booking-tz-control {
  width: 100%;
  min-width: 0;
}

.manual-booking-tz-control .dash-stats-combobox,
.manual-booking-tz-control .dash-stats-combobox-trigger {
  width: 100%;
  max-width: 100%;
}

.manual-booking-tz-control .dash-stats-combobox-trigger {
  justify-content: space-between;
}

.booking-timezone-select.booking-timezone-select--fallback {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.manual-booking-tz-readonly {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.manual-booking-time-control .dash-stats-combobox {
  width: 100%;
  max-width: 100%;
}

.manual-booking-time-control .dash-stats-combobox-trigger {
  width: 100%;
  justify-content: space-between;
}

.manual-booking-time-format-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 4px 10px;
  margin: 0 0 2px;
  min-height: 0;
  border-bottom: 1px solid var(--flow-surface-3);
}

.manual-booking-time-format-toolbar-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--flow-text);
  min-width: 0;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
}

.manual-booking-time-format-toolbar-tag:not(.is-selected) {
  font-weight: 500;
  color: var(--flow-muted);
  opacity: 0.88;
}

/* Switch compact (le `dash-ui-switch` global 44×26 est trop massif dans le flyout). */
.manual-booking-time-format-toolbar button.dash-ui-switch.manual-booking-time-format-switch {
  width: 30px;
  height: 17px;
  min-width: 30px;
  min-height: 17px;
}

.manual-booking-time-format-toolbar button.dash-ui-switch.manual-booking-time-format-switch .dash-ui-switch-thumb {
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
}

.manual-booking-time-format-toolbar button.dash-ui-switch.manual-booking-time-format-switch[aria-checked="true"] .dash-ui-switch-thumb {
  transform: translateX(13px);
}

.manual-booking-time-format-toolbar button.dash-ui-switch.manual-booking-time-format-switch:focus-visible {
  outline-width: 1.5px;
  outline-offset: 1px;
}

.booking-time-select.booking-time-select--fallback {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.booking-time-select.booking-time-select--sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 460px) {
  .manual-booking-time-row {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  .manual-booking-time-control {
    flex: 1 1 0;
    min-width: 0;
  }

  .manual-booking-tz-control {
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
  }
}

.manual-booking-root {
  display: flex;
  flex-direction: column;
  /* Espace bouton « Book meeting » / « Back to questions » → calendrier (évite le collage). */
  gap: 18px;
}

.booking-toggle-btn {
  align-self: center;
}

.booking-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.booking-panel.is-open {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
}

form.rdv-focus-mode .field {
  display: none;
}

form.rdv-focus-mode .field.is-rdv-focus {
  display: flex;
}

/* One-at-a-time : après « Back to questions », plusieurs `.field` restent dans le DOM ; en réouvrant
   le RDV, recentrer la scène (sinon `:has(> .field:nth-child(2))` garde `justify-content: flex-start`). */
#lead-form:not(.campaign-form-content--stacked).rdv-focus-mode .lead-sequential-stage,
#sim-form:not(.campaign-form-content--stacked).rdv-focus-mode .lead-sequential-stage {
  justify-content: center !important;
  align-items: center !important;
}

/* Sortie RDV : pendant la préparation, les autres questions restent cachées (pas de flash). */
form.rdv-exit-animating.rdv-exit-prep.rdv-focus-mode .field.field-appear:not(.is-rdv-focus) {
  display: none !important;
}

/* Sortie RDV : tous les blocs visibles pour le fondu (évite le flash display:none). */
form.rdv-exit-animating .field.field-appear {
  display: flex !important;
}

/* Pas d’animation max-height du calendrier pendant le fondu (évite le bouton qui glisse vers le bas). */
form.rdv-exit-animating .manual-booking-root .booking-panel {
  max-height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  margin: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.32s cubic-bezier(0.33, 1, 0.44, 1), max-height 0s linear !important;
}

/* Sortie RDV : fondu du toggle « Book meeting » + conteneur (pas seulement le panneau). */
form.rdv-exit-animating .manual-booking-root.manual-booking-root--exit-fade,
form.rdv-exit-animating .field.field--rdv-exit-fade {
  opacity: 0 !important;
  transform: translateY(8px);
  pointer-events: none !important;
  transition:
    opacity 0.36s cubic-bezier(0.33, 1, 0.44, 1),
    transform 0.36s cubic-bezier(0.33, 1, 0.44, 1) !important;
}

/* Toute la sortie RDV : aucun CTA résiduel (toggle, Confirm/Decline, types RDV). */
form.rdv-exit-animating .booking-toggle-btn,
form.rdv-exit-animating .manual-booking-root .booking-type-btn,
form.rdv-exit-animating #submit-section,
form.rdv-exit-animating #sim-submit-section,
form.rdv-exit-animating #builder-appearance-preview-submit {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

form.rdv-exit-animating.rdv-exit-prep .field.is-rdv-focus.field-appear:not(.visible) {
  opacity: 0 !important;
}

form.rdv-exit-animating.campaign-form-content--stacked .field.field-appear.field-appear--stack-in,
form.rdv-exit-animating .field.field-appear {
  transition:
    opacity 0.36s cubic-bezier(0.33, 1, 0.44, 1),
    transform 0.36s cubic-bezier(0.33, 1, 0.44, 1);
}

form.rdv-exit-animating .field.field-appear:not(.visible) {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* Questions hors RDV : opacité 0 sans transition à l’ouverture de la pile (évite un flash). */
form.rdv-exit-animating .field.field-appear:not(.visible):not(.is-rdv-focus) {
  transition: none !important;
}

form.rdv-exit-animating .field.field-appear.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  form.rdv-exit-animating .field.field-appear {
    transition: none !important;
  }
}

.flatpickr-calendar {
  background: #131a24 !important;
  border: 1px solid #2f3b4b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  color: #f2f2f2 !important;
}

.manual-booking-calendar-wrap .flatpickr-calendar {
  border: none !important;
  box-shadow: none !important;
}

.manual-booking-calendar-wrap .flatpickr-calendar.inline {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.manual-booking-calendar-wrap .flatpickr-months .flatpickr-month {
  border: none !important;
  box-shadow: none !important;
  /* Flatpickr fixe souvent une hauteur ~28px : sans ça les bords pill mois/année sont rognés. */
  height: auto !important;
  min-height: 44px !important;
  overflow: visible !important;
  margin-bottom: 10px !important;
}

.manual-booking-calendar-wrap .flatpickr-months {
  overflow: visible !important;
}

.manual-booking-calendar-wrap .flatpickr-innerContainer {
  padding: 4px var(--mb-cal-inset-x) var(--mb-cal-inset-y) !important;
  box-sizing: border-box !important;
}

.manual-booking-calendar-wrap .flatpickr-rContainer,
.manual-booking-calendar-wrap .flatpickr-days {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.manual-booking-calendar-wrap .flatpickr-days {
  padding-bottom: 0 !important;
}

/* Desktop / colonne split (~250px) : flex Flatpickr natif (7 jours/ligne). */
.manual-booking-calendar-wrap .flatpickr-dayContainer,
.manual-booking-calendar-wrap .dayContainer {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 6px !important;
  box-sizing: border-box !important;
  justify-content: space-around !important;
}

.manual-booking-calendar-wrap .flatpickr-day {
  flex: 1 0 14.2857143% !important;
  max-width: min(var(--mb-cal-cell, 2.25rem), 2.25rem) !important;
  width: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 36px !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border-radius: 50% !important;
}

/* Mobile + Settings : colonne large → grille 7 cols (flex-wrap + max-width casse l’alignement). */
@media (max-width: 900px) {
  .manual-booking-calendar-wrap .flatpickr-weekdays {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 4px !important;
    padding: 4px 0 0 !important;
    box-sizing: border-box !important;
    gap: var(--mb-cal-gap) !important;
  }

  .manual-booking-calendar-wrap .flatpickr-weekdaycontainer {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: var(--mb-cal-gap) !important;
  }

  .manual-booking-calendar-wrap .flatpickr-weekday {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .manual-booking-calendar-wrap .flatpickr-dayContainer,
  .manual-booking-calendar-wrap .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: var(--mb-cal-gap) !important;
    justify-items: center !important;
    align-content: start !important;
    justify-content: stretch !important;
  }

  .manual-booking-calendar-wrap .flatpickr-day {
    flex: none !important;
    width: min(100%, var(--mb-cal-cell, 2.25rem), 2.25rem) !important;
    max-width: min(var(--mb-cal-cell, 2.25rem), 2.25rem) !important;
  }
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekdays {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-top: 4px !important;
  padding: 4px 0 0 !important;
  box-sizing: border-box !important;
  gap: var(--mb-cal-gap) !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekdaycontainer {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  gap: var(--mb-cal-gap) !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekday {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-dayContainer,
.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--mb-cal-gap) !important;
  justify-items: center !important;
  align-content: start !important;
  justify-content: stretch !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-day {
  flex: none !important;
  width: min(100%, var(--mb-cal-cell, 2.25rem), 2.25rem) !important;
  max-width: min(var(--mb-cal-cell, 2.25rem), 2.25rem) !important;
}

/* Jours non sélectionnables (weekdays hors dispo, minDate, etc.) */
.manual-booking-calendar-wrap .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  background: transparent !important;
  border-color: var(--flow-accent) !important;
  border-style: solid !important;
  border-width: 1px !important;
  color: inherit !important;
  box-shadow: none !important;
}

.manual-booking-calendar-wrap .flatpickr-day.flatpickr-disabled,
.manual-booking-calendar-wrap .flatpickr-day.flatpickr-disabled:hover {
  opacity: 0.35 !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Mois : `ObviousleadDashStatsCombobox` + année sur une ligne (manual-booking-panel.js). */
.manual-booking-calendar-wrap .flatpickr-current-month {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  position: relative;
  overflow: visible !important;
  padding-bottom: 10px;
}

.manual-booking-fp-month-year-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px 10px;
  width: 100%;
  overflow: visible !important;
}

.manual-booking-fp-month-combobox {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

.manual-booking-fp-month-combobox .dash-stats-combobox {
  width: auto;
  max-width: 100%;
}

.manual-booking-fp-year-combobox {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
}

.manual-booking-fp-year-combobox .dash-stats-combobox {
  width: auto;
  max-width: 100%;
}

/* Champ année natif Flatpickr : conservé pour la synchro, hors écran (année = combobox). */
.manual-booking-calendar-wrap .numInputWrapper.manual-booking-fp-year-native--obviouslead-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.flatpickr-year-input--obviouslead-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.flatpickr-monthDropdown-months.flatpickr-monthDropdown-months--obviouslead-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-weekday,
.flatpickr-day,
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  color: #f2f2f2 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #c8d2e3 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: none !important;
}

.flatpickr-day {
  border-color: transparent !important;
}

.flatpickr-day.today {
  border-color: var(--flow-accent) !important;
}

.flatpickr-day:hover,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--flow-accent) !important;
  border-color: var(--flow-accent-overlay) !important;
  color: var(--flow-on-accent) !important;
}

.flatpickr-day.inRange {
  background: color-mix(in srgb, var(--flow-accent) 28%, transparent) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 28%, transparent) !important;
}

@media (max-width: 900px) {
  .manual-booking-layout {
    grid-template-columns: 1fr;
  }

  .creator-photo-fill {
    min-height: 180px;
  }
}

/* Final palette enforcement: white / light beige / one accent */
.card,
.campaign-form-pane,
.campaign-header,
.submit-section,
.final-confirmation-card,
.modal-card,
.manual-booking-calendar-wrap,
.manual-booking-controls,
.creator-photo-pane,
.settings-preview-frame,
.settings-mock-cal-wrap,
.settings-mock-controls,
.flatpickr-calendar,
.nav-user-menu:not(.nav-user-menu--glow),
.dash-lead-card,
.dash-lead-kpi,
.option-tag,
.choice-line,
.field,
.calendly-shell {
  background: var(--flow-surface-1) !important;
  color: var(--flow-text) !important;
}

.nav-user-menu:not(.nav-user-menu--glow) a {
  color: var(--flow-text) !important;
  background: transparent !important;
}

.nav-user-menu:not(.nav-user-menu--glow) a:hover {
  background: var(--flow-surface-2) !important;
  color: var(--flow-accent) !important;
}

/* Sign out : seulement le texte en danger (pas une surface bouton danger). */
.nav-user-menu:not(.nav-user-menu--glow) button.nav-user-logout,
.nav-user-menu:not(.nav-user-menu--glow) button.nav-user-logout.ui-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--flow-danger) !important;
  font-weight: 600;
}

.nav-user-menu:not(.nav-user-menu--glow) button.nav-user-logout:hover,
.nav-user-menu:not(.nav-user-menu--glow) button.nav-user-logout.ui-button:hover:not(:disabled) {
  background: var(--flow-surface-2) !important;
  color: var(--flow-danger-hover) !important;
  border: 0 !important;
  transform: none !important;
}

/* `.video-placeholder-art` est volontairement exclu : c'est un aplat accent (voir règle dédiée). */
.video-pane,
.video-frame,
.video-placeholder,
.campaign-page,
.profile-no-video,
.creator-photo,
.creator-photo-fill {
  background-color: var(--flow-surface-2) !important;
}

#config-placeholder,
.placeholder-card {
  background: transparent !important;
}

.flatpickr-day.today {
  border-color: var(--flow-accent) !important;
}

.video-pane {
  border-right-color: var(--flow-surface-3) !important;
}

@media (max-width: 900px) {
  .video-pane {
    border-bottom-color: var(--flow-surface-3) !important;
  }
}

/* === Global graphic refactor: flat, borderless (except navbar) === */
.site-footer {
  margin-top: 56px;
  padding: 0 24px 42px;
  background: transparent;
}

.site-footer-inner {
  max-width: min(1440px, calc(100vw - 28px));
  margin: 0 auto;
}

.site-footer-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 42px);
  border-radius: clamp(26px, 3.2vw, 40px);
  border: 1px solid color-mix(in srgb, var(--flow-on-accent) 12%, transparent);
  color: var(--flow-on-accent);
  background:
    radial-gradient(
      1200px 600px at 18% -22%,
      color-mix(in srgb, var(--flow-on-accent) 10%, transparent),
      transparent 60%
    ),
    radial-gradient(
      1200px 600px at 82% 126%,
      color-mix(in srgb, var(--flow-on-accent) 8%, transparent),
      transparent 60%
    ),
    color-mix(in srgb, var(--flow-accent) 86%, #04070d 14%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  animation: site-footer-panel-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.site-footer-panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--flow-on-accent) 20%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.13;
}

.site-footer-panel-content {
  position: relative;
  z-index: 1;
}

.site-footer-panel-content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer-panel.is-revealed .site-footer-panel-content > * {
  opacity: 1;
  transform: translateY(0);
}

.site-footer-panel-content > :nth-child(1) {
  transition-delay: 0ms;
}

.site-footer-panel-content > :nth-child(2) {
  transition-delay: 80ms;
}

.site-footer-panel-content > :nth-child(3) {
  transition-delay: 160ms;
}

.site-footer-panel-content > :nth-child(4) {
  transition-delay: 240ms;
}

.site-footer-panel-content > :nth-child(5) {
  transition-delay: 320ms;
}

.site-footer-panel-content > :nth-child(6) {
  transition-delay: 400ms;
}

.site-footer-title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(36px, 5.4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 650;
}

.site-footer-title span {
  display: block;
}

.site-footer-title .is-muted {
  color: var(--flow-on-accent);
}

@media (max-width: 960px) {
  .site-footer-title {
    max-width: 16ch;
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.02;
  }
}

.site-footer-top-grid {
  margin-top: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.site-footer-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--flow-on-accent) 60%, transparent);
}

.site-footer-link-xl {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  font-weight: 560;
  letter-spacing: -0.02em;
}

.site-footer-link-xl:hover {
  color: color-mix(in srgb, var(--flow-on-accent) 88%, transparent);
}

.site-footer-link-xl iconify-icon {
  font-size: 20px;
  opacity: 0.84;
}

.site-footer-pill-link,
.site-footer-icon-pill {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--flow-on-accent) 18%, transparent);
  color: color-mix(in srgb, var(--flow-accent) 86%, #000);
  background: color-mix(in srgb, var(--flow-on-accent) 92%, transparent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 560;
  transition: background-color 140ms ease, transform 140ms ease;
}

.site-footer-pill-link:hover,
.site-footer-icon-pill:hover {
  transform: translateY(-1px);
  background: var(--flow-on-accent);
}

.site-footer-pill-link iconify-icon,
.site-footer-icon-pill iconify-icon {
  font-size: 18px;
}

.site-footer-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.site-footer-top-grid > :last-child {
  text-align: right;
}

.site-footer-social-row > a {
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity 0.42s cubic-bezier(0.2, 0.9, 0.3, 1),
              transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.site-footer-panel.is-revealed .site-footer-social-row > a {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-footer-social-row > a:nth-child(1) {
  transition-delay: 200ms;
}

.site-footer-social-row > a:nth-child(2) {
  transition-delay: 260ms;
}

.site-footer-social-row > a:nth-child(3) {
  transition-delay: 320ms;
}

.site-footer-social-row > a:nth-child(4) {
  transition-delay: 380ms;
}

.site-footer-icon-pill {
  width: 46px;
  padding: 0;
}

.site-footer-divider {
  margin-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid color-mix(in srgb, var(--flow-on-accent) 14%, transparent);
}

.site-footer-bottom-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.site-footer-bottom-grid > :last-child {
  text-align: right;
}

.site-footer-links-grid,
.site-footer-links-col {
  margin-top: 10px;
  display: grid;
  gap: 8px 14px;
}

.site-footer-bottom-grid > :last-child .site-footer-links-col {
  justify-items: end;
}

.site-footer-links-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer-links-grid a,
.site-footer-links-col a {
  font-size: 14px;
  font-weight: 560;
  color: color-mix(in srgb, var(--flow-on-accent) 92%, transparent);
  text-decoration: none;
  border-radius: 8px;
  padding: 2px 6px;
  margin-left: -6px;
  width: fit-content;
  transition: color 140ms ease, background-color 140ms ease;
}

.site-footer-links-col a {
  margin-left: 0;
  margin-right: -6px;
}

.site-footer-links-grid a:hover,
.site-footer-links-col a:hover {
  color: var(--flow-on-accent);
  background: color-mix(in srgb, var(--flow-on-accent) 14%, transparent);
  text-decoration: underline;
}

.site-footer-meta {
  margin: 48px 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: color-mix(in srgb, var(--flow-on-accent) 74%, transparent);
}

.site-footer-brand {
  font-weight: 650;
  color: color-mix(in srgb, var(--flow-on-accent) 94%, transparent);
}

.site-footer-logo-wrap {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.site-footer-logo {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  opacity: 0.94;
}

@keyframes site-footer-panel-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes site-footer-item-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes site-footer-social-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-panel,
  .site-footer-panel-content > *,
  .site-footer-social-row > a {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 980px) {
  .site-footer-top-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-bottom-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-footer-link-xl {
    font-size: clamp(20px, 8vw, 28px);
  }

  .site-footer-links-grid {
    grid-template-columns: 1fr;
  }
}

/* Borderless rule across UI (navbar excluded) */
:where(
    .card,
    .q-row,
    .campaign-item,
    .video-pane,
    .creator-photo-pane,
    .manual-booking-calendar-wrap,
    .manual-booking-controls,
    .flatpickr-calendar,
    .modal-card,
    .choice-line,
    .field,
    .calendly-shell,
    .settings-preview-frame,
    .settings-mock-cal-wrap,
    .settings-mock-controls,
    .settings-social-fieldset,
    .final-confirmation-card,
    .timeline-track,
    .video-toolbar button,
    .ui-button,
    .ui-sub-button,
    .ui-input,
    input,
    textarea,
    select,
    button,
    .btn
  ):not(.navbar):not(.navbar *) {
  border: 0 !important;
  box-shadow: none !important;
}

a {
  color: var(--flow-accent);
}

a:hover {
  color: var(--flow-accent-overlay);
}

/* Buttons */
.ui-button,
button,
.btn {
  background: var(--flow-accent);
  color: var(--flow-on-accent);
  border-radius: var(--obviouslead-button-border-radius);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, background-color 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  text-decoration: none;
}

.ui-button:hover:not(:disabled),
button:hover:not(:disabled),
.btn:hover:not(:disabled) {
  background: var(--flow-accent-overlay);
  transform: translateY(-1px);
}

.ui-button--nav {
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.1;
}

.nav-auth-guest .btn-nav.ui-button--nav {
  margin-left: 2px;
}

.ui-button--muted,
.settings-btn-muted {
  background: var(--flow-surface-2) !important;
  color: var(--flow-text) !important;
}

.ui-button--danger,
.settings-btn-danger {
  background: var(--flow-danger) !important;
  border: 1px solid var(--flow-danger-border) !important;
  color: var(--flow-on-accent) !important;
}

.ui-button--danger:hover,
.settings-btn-danger:hover {
  background: var(--flow-danger-hover) !important;
  border-color: var(--flow-danger-hover) !important;
  color: var(--flow-on-accent) !important;
}

.ui-sub-button {
  background: var(--flow-surface-2);
  color: var(--flow-text);
  border-radius: 999px;
  padding: 6px 12px;
}

.ui-sub-button:hover {
  background: var(--flow-surface-3);
}

.ui-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  text-decoration: none;
  background: color-mix(in srgb, var(--flow-accent) 14%, var(--flow-surface-1)) !important;
  color: var(--flow-text) !important;
}

.ui-tag:hover {
  background: color-mix(in srgb, var(--flow-accent) 24%, var(--flow-surface-1)) !important;
  color: var(--flow-text) !important;
}

.ui-tag button {
  background: transparent;
  border: 0;
  padding: 0;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

/* Inputs — hors `color` / `file` (pastille native + règles builder dédiées). */
.ui-input,
input:not([type="color"]):not([type="file"]),
textarea,
select {
  background: var(--flow-surface-1);
  color: var(--flow-text);
  border-radius: 14px;
  border: 1px solid #e5e7eb !important;
}

.ui-input:focus,
input:not([type="color"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 38%, transparent);
  outline-offset: 1px;
}

/* Remove gradients and decorative depth */
.video-placeholder,
.profile-no-video,
.campaign-page,
.timeline-progress,
.placeholder-line,
.placeholder-block,
.placeholder-btn,
#submit-lead,
#builder-appearance-preview-submit-lead,
#submit-lead:hover:not(:disabled),
#builder-appearance-preview-submit-lead:hover:not(:disabled) {
  background-image: none !important;
}

.video-placeholder,
.profile-no-video,
.campaign-page {
  background-color: var(--flow-surface-2) !important;
}

/* Override de sécurité : seule la couleur de fond est forcée à l'accent, le `background-image` inline
 * (thumbnail Mux posée par `renderAll()` à l'étape Reference) reste actif. */
.video-placeholder-art {
  background-color: var(--flow-accent) !important;
}

/* Les previews photo utilisent background-image inline: on ne l'écrase jamais. */
.creator-photo,
.creator-photo-fill {
  background-size: cover;
  background-repeat: no-repeat;
}

.timeline-progress {
  background: var(--flow-accent) !important;
}

/* Page lead : primaire = fond accent + texte ; secondaire = comme booking-type inactif (fond transparent + bordure). */
#submit-lead,
#builder-appearance-preview-submit-lead {
  background: var(--flow-accent) !important;
  color: var(--flow-on-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}

#submit-lead:hover:not(:disabled),
#builder-appearance-preview-submit-lead:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  color: var(--flow-on-accent) !important;
}

#reject-lead,
#builder-appearance-preview-reject-lead {
  background: transparent !important;
  color: var(--flow-text) !important;
  border: 1px solid color-mix(in srgb, var(--flow-accent) 42%, var(--flow-surface-3, #e4e7ec)) !important;
  box-shadow: none !important;
}

#reject-lead:hover:not(:disabled),
#builder-appearance-preview-reject-lead:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-accent) 14%, transparent) !important;
  color: var(--flow-text) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 55%, var(--flow-surface-3, #e4e7ec)) !important;
}

.nav-user-menu:not(.nav-user-menu--glow) {
  background: #ffffff;
}

.settings-danger-zone {
  background: transparent;
}

.q-row {
  display: block;
  padding: 0;
  background: transparent;
}

.dash-lead-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.dash-lead-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-lead-date {
  font-size: 14px;
  letter-spacing: 0.01em;
}

.dash-lead-status {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--flow-surface-2);
  color: var(--flow-text);
}

.dash-lead-status.is-ok {
  background: var(--flow-surface-2);
  color: var(--flow-text);
}

.dash-lead-status.is-pending {
  background: var(--flow-surface-2);
  color: var(--flow-text);
}

.dash-lead-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dash-lead-kpi {
  background: var(--flow-surface-2);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.dash-lead-kpi-label {
  font-size: 11px;
  color: #9ba8bc;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-lead-kpi strong {
  font-size: 18px;
  line-height: 1;
}

.dash-lead-line {
  margin: 0;
  font-size: 13px;
}

.dash-lead-note {
  margin: 0;
  font-size: 13px;
}

.dash-lead-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.dash-lead-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--flow-accent);
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.16s ease;
}

/* Palette clamp: blanc + beige clair + accent unique */
.mode-toggle-btn.is-active,
.booking-type-btn.is-active,
.flatpickr-day:hover,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--flow-accent) !important;
  color: #ffffff !important;
}

.nav-user-avatar:not(.has-photo) {
  background: var(--flow-surface-2) !important;
  color: var(--flow-accent) !important;
}

.nav-user-avatar.has-photo {
  background-color: transparent !important;
}

.flatpickr-day.inRange,
.video-toolbar button,
.option-tag {
  background: color-mix(in srgb, var(--flow-accent) 14%, var(--flow-surface-1)) !important;
  color: var(--flow-text) !important;
}

.dash-lead-link:hover {
  background: var(--flow-accent-overlay);
  transform: translateY(-1px);
}

.dash-skeleton-card {
  gap: 14px;
}

.dash-lead-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

/* Vue Leads paginée : au plus 5 × 3 tuiles par page (voir LEADS_GRID_PAGE_SIZE dans dashboard.js). */
.dash-lead-tiles.dash-lead-tiles--leads-paged {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  grid-auto-rows: var(--dash-leads-shell-min-h, 200px);
  min-height: calc(3 * var(--dash-leads-shell-min-h, 200px) + 2 * 10px);
}

.dash-lead-tiles.dash-lead-tiles--leads-paged > .dash-lead-tile-shell {
  min-height: var(--dash-leads-shell-min-h, 200px);
  max-height: var(--dash-leads-shell-min-h, 200px);
  box-sizing: border-box;
  overflow: hidden;
  /* Ligne méta = hauteur intrinsèque, vignette = 124px fixe (comme `.dash-lead-tile-media`).
     Sans ça, deux lignes `auto` dans une boîte 200px s’étirent au hasard (bouton vs div placeholder). */
  grid-template-rows: auto 124px;
  align-content: start;
}

/* Placeholders statiques (pas d’animation) pour compléter la grille jusqu’à 15 cellules. */
.dash-lead-tile-shell--placeholder {
  pointer-events: none;
}

/* Aligné sur `.dash-lead-tile-meta` (gap 2px) + hauteurs proches du titre/date réels et du squelette `.dash-skeleton-line--tile-*`. */
.dash-lead-tile-meta--placeholder {
  gap: 2px;
}

.dash-lead-tile-placeholder-line {
  display: block;
  border-radius: 6px;
  background: var(--flow-surface-3);
}

.dash-lead-tile-placeholder-line--title {
  height: 19px;
  min-height: 19px;
  width: 72%;
  margin: 0 auto;
}

.dash-lead-tile-placeholder-line--date {
  height: 14px;
  min-height: 14px;
  width: 52%;
  margin: 0 auto;
}

.dash-lead-tile.dash-lead-tile--placeholder {
  cursor: default;
  pointer-events: none;
}

.dash-lead-tile.dash-lead-tile--placeholder:disabled {
  opacity: 1;
}

.dash-lead-tile.dash-lead-tile--placeholder:hover {
  transform: none;
  background: transparent;
}

.dash-lead-tile-media.dash-lead-tile-media--placeholder {
  border-radius: 14px;
  border: none;
  box-shadow: none;
  background-color: var(--flow-surface-3) !important;
  background-image: none !important;
}

@media (max-width: 1100px) {
  .dash-lead-tiles.dash-lead-tiles--leads-paged {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .dash-lead-tiles.dash-lead-tiles--leads-paged {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dash-lead-tiles.dash-lead-tiles--leads-paged {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dash-lead-tile-shell {
  display: grid;
  gap: 8px;
}

/* Parité avec `<button.dash-lead-tile>` : même boîte pour les placeholders (évite 1px de décalage). */
.dash-lead-tile-shell .dash-lead-tile.dash-lead-tile--placeholder {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.dash-leads-grid-host {
  width: 100%;
  min-height: 0;
  /* Hauteur minimale d’une carte (tuile + méta) — grille 5×3 + pagination alignées. */
  --dash-leads-shell-min-h: 200px;
}

/* Grille + pagination : bloc flexible ; hauteur réservée seulement si pagination visible. */
.dash-leads-grid-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.dash-leads-grid-page-wrap--has-pagination {
  min-height: calc(
    3 * var(--dash-leads-shell-min-h) + 2 * 10px + 14px + var(--dash-leads-pagination-slot, 44px)
  );
}

.dash-leads-grid-page-wrap > .dash-lead-tiles.dash-lead-tiles--leads-paged {
  flex: 0 0 auto;
}

/* Bandeau : filtres 2×2 à gauche, texte à droite — même hauteur de ligne (stretch). */
.dash-leads-grid-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 20px 28px;
  align-items: stretch;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: none;
}

.dash-leads-grid-toolbar-row .dash-stats-list-toolbar.dash-leads-grid-toolbar {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.dash-leads-grid-intro {
  min-width: 0;
  padding: 2px 0 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* Résumé : deux colonnes (chiffre → légende), séparateur fin — hauteur = cellule grille (alignée sur la barre filtres). */
.dash-leads-grid-intro-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--flow-surface-2);
  border: none;
  flex: 1;
  min-height: 0;
}

.dash-leads-grid-intro-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  text-align: center;
}

.dash-leads-grid-intro-value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--flow-text);
}

.dash-leads-grid-intro-caption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flow-muted);
}

.dash-leads-grid-intro-divider {
  width: 1px;
  margin: 6px 0;
  align-self: stretch;
  background: color-mix(in srgb, var(--flow-muted) 22%, transparent);
}

/* Squelette vue Leads : même mise en page que la barre d’outils réelle (grille 2×2). */
.dash-stats-list-toolbar.dash-leads-grid-toolbar.dash-leads-grid-toolbar--skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  flex-direction: unset;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.dash-leads-grid-toolbar-row--skeleton {
  align-items: stretch;
}

.dash-leads-grid-intro--skeleton {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.dash-leads-grid-intro-stats--skeleton {
  flex: 1;
  min-height: 0;
}

.dash-leads-grid-intro-stat-skel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.dash-leads-grid-intro-stat-skel-value {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 8px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-leads-grid-intro-stat-skel-caption {
  display: block;
  width: 72px;
  height: 10px;
  border-radius: 999px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-leads-grid-toolbar {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .dash-leads-grid-toolbar-row {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }

  .dash-leads-grid-intro {
    padding-top: 0;
    order: -1;
    height: auto;
  }

  .dash-leads-grid-intro-stats {
    flex: 0 0 auto;
  }

  .dash-leads-grid-toolbar-row--skeleton .dash-leads-grid-intro--skeleton {
    order: -1;
  }
}

.dash-leads-grid-filter-empty {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--flow-muted) 35%, transparent);
  text-align: center;
}

.dash-lead-tile {
  /* Hauteur = vignette uniquement (évite une bande surface-1/2 sous la vidéo). */
  min-height: 124px;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 14px;
  background: transparent;
  color: var(--flow-text);
  padding: 0;
  border: none !important;
  outline: none;
  box-shadow: none;
  overflow: hidden;
  display: block;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease;
}

.dash-lead-tile:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.dash-lead-tile:hover {
  transform: translateY(-2px);
  background: transparent;
  box-shadow: none;
}

/* Annule les styles globaux `button` / `button:hover` / `button.ui-button:hover` (bordure + fond accent au survol). */
button.dash-lead-tile,
button.dash-lead-tile.ui-button {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  color: var(--flow-text) !important;
  padding: 0 !important;
  font-weight: inherit;
  letter-spacing: normal;
}

button.dash-lead-tile:hover:not(:disabled),
button.dash-lead-tile.ui-button:hover:not(:disabled) {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: translateY(-2px);
  color: var(--flow-text) !important;
}

.dash-lead-tile-meta {
  display: grid;
  gap: 2px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.dash-lead-tile-name {
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.dash-lead-tile-date {
  font-size: 12px;
  color: var(--flow-muted);
  width: 100%;
  text-align: center;
}

.dash-lead-tile-media {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 124px;
  min-height: 124px;
  border-radius: 14px;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: var(--flow-surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dash-lead-tile-media > .dash-lead-tile-expiry.ui-tooltip-host[data-tooltip] {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 12px);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--flow-on-accent);
  background: var(--flow-danger);
  border: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--flow-danger) 48%, transparent);
  pointer-events: auto;
  cursor: help;
}

.dash-lead-tile-media > .dash-lead-tile-expiry.ui-tooltip-host[data-tooltip] iconify-icon {
  flex-shrink: 0;
  opacity: 1;
}

.dash-lead-tile-expiry-date {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-lead-tile-media.is-empty {
  background-image: none !important;
  background-color: transparent !important;
}

.dash-lead-tile-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  vertical-align: top;
  border: none;
  outline: none;
  box-shadow: none;
  /* Même fond que `.dash-lead-tile-media` : pas de contraste / halo au letterboxing. */
  background-color: transparent;
}

/* Liste Statistics / grille : priorité sur tout reste de surface-2 (cadre gris clair). */
.dash-stats-list-pane .dash-lead-tile-media.is-empty,
.dash-stats-sidebar .dash-lead-tile-media.is-empty {
  background-image: none !important;
  background-color: transparent !important;
}

.dash-skeleton-tile {
  min-height: 181px;
  border-radius: 14px;
  background: transparent;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 124px;
  gap: 8px;
}

.dash-skeleton-tile-media {
  border-radius: 14px;
  border: none;
  outline: none;
  box-shadow: none;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  height: 124px;
  min-height: 124px;
}

.dash-skeleton-line--tile-title {
  min-height: 19px;
  width: 68%;
  justify-self: center;
}

.dash-skeleton-line--tile-date {
  min-height: 14px;
  width: 54%;
  justify-self: center;
}

.ui-table--skeleton .dash-skeleton-line {
  display: inline-block;
  min-height: 12px;
  background: var(--flow-surface-3);
  border-radius: 999px;
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-skeleton-line--table-lead {
  width: 120px;
}

.dash-skeleton-line--table-status {
  width: 94px;
}

.dash-skeleton-line--table-engagement {
  width: 72px;
}

.dash-skeleton-line--table-date {
  width: 100px;
}

.dash-skeleton-line--table-action {
  width: 54px;
}

.dash-skeleton-signal {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-skeleton-preview {
  display: inline-block;
  width: 64px;
  height: 36px;
  border-radius: 8px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-lead-modal-card {
  max-width: 760px;
  padding: 50px !important;
}

#dash-lead-modal .dash-lead-modal-card {
  display: flex;
  flex-direction: column;
  position: relative;
  /* Hauteur limitée pour favoriser le scroll interne + fade bas lisible. */
  max-height: var(--obviouslead-ui-modal-card-max-height);
  width: min(560px, calc(100vw - 32px));
  overflow: hidden;
  box-sizing: border-box;
}

@keyframes dash-lead-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dash-lead-modal-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entrée : classe posée par lead-tile.js à chaque renderModalContent (rejoue l’animation). */
#dash-lead-modal.dash-lead-modal--enter:not(.hidden) {
  animation: dash-lead-modal-backdrop-in 0.24s ease-out both;
}

#dash-lead-modal.dash-lead-modal--enter:not(.hidden) .dash-lead-modal-card {
  animation: dash-lead-modal-card-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.03s;
}

/* Builder / autres `.modal` décorés : `ObviousleadUiModal.restartEnter` — mêmes keyframes que la modale lead. */
.modal.ui-modal.ui-modal--enter:not(.hidden) {
  animation: dash-lead-modal-backdrop-in 0.24s ease-out both;
}

.modal.ui-modal.ui-modal--enter:not(.hidden) .modal-card {
  animation: dash-lead-modal-card-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.03s;
}

@media (prefers-reduced-motion: reduce) {
  #dash-lead-modal.dash-lead-modal--enter:not(.hidden),
  #dash-lead-modal.dash-lead-modal--enter:not(.hidden) .dash-lead-modal-card,
  .dash-stats-modal-card.dash-stats-detail--enter,
  .modal.ui-modal.ui-modal--enter:not(.hidden),
  .modal.ui-modal.ui-modal--enter:not(.hidden) .modal-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Statistics : carte détail sans scroll interne — la page défile si le contenu est long. */
.dash-stats-modal-card.modal-card {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: none;
  min-width: 0;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}

/* Entrée carte Statistics : mêmes keyframes que la modale lead (dashboard.js pose dash-stats-detail--enter). */
.dash-stats-modal-card.dash-stats-detail--enter {
  animation: dash-lead-modal-card-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.03s;
}

/* Surface de défilement réutilisable (modale lead, panneau builder #config-editor, etc.) */
.ui-scroll-surface {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 14px;
  margin-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(118, 130, 152, 0) transparent;
}

.ui-scroll-surface.is-scrollbar-visible {
  scrollbar-color: rgba(118, 130, 152, 0.5) transparent;
}

.ui-scroll-surface::-webkit-scrollbar {
  width: 10px;
}

.ui-scroll-surface::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.ui-scroll-surface::-webkit-scrollbar-thumb {
  background-color: rgba(118, 130, 152, 0);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.45s ease-in-out;
}

.ui-scroll-surface.is-scrollbar-visible::-webkit-scrollbar-thumb {
  background-color: rgba(118, 130, 152, 0.45);
  border: 2px solid transparent;
  background-clip: padding-box;
}

#dash-lead-modal .dash-lead-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Modale lead : scroll conservé (overflow-y auto), barre invisible — pas de gutter réservé. */
#dash-lead-modal .dash-lead-modal-body.ui-scroll-surface {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 0;
  margin-right: 0;
}

#dash-lead-modal .dash-lead-modal-body.ui-scroll-surface::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*
 * Fade bas : mask-image atténue le contenu (lisible en thème clair — pas un gradient « couleur carte »).
 * Classe posée par lead-tile.js quand il y a overflow et jusqu’au premier scroll/wheel.
 */
#dash-lead-modal .dash-lead-modal-body.ui-scroll-surface.dash-lead-modal-body--fade-edge {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 72px), transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#dash-stats-detail.dash-lead-modal-body {
  flex: 0 1 auto;
  min-height: auto;
  overflow: visible;
  overflow-x: hidden;
  padding-right: 0;
  margin-right: 0;
}

#dash-lead-modal .dash-lead-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.dash-lead-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

/* Follow-up / reached-out : même zone cliquable 32×32 que les autres modales (flex ne doit pas comprimer). */
.dash-followup-modal-close.dash-lead-modal-close {
  flex-shrink: 0;
  min-width: 32px;
  min-height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dash-lead-modal-grid-host,
.dash-lead-modal-channel-section {
  position: relative;
}

#dash-lead-modal .dash-lead-modal-grid-host.is-resetting .dash-lead-modal-grid,
#dash-stats-detail .dash-lead-modal-grid-host.is-resetting .dash-lead-modal-grid,
#dash-lead-modal .dash-lead-modal-channel-section.is-resetting .dash-channel-compact-list,
#dash-stats-detail .dash-lead-modal-channel-section.is-resetting .dash-channel-compact-list {
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.22s ease, filter 0.22s ease;
}

/* Reset stats : voile + spinner (sans composant JS). */
#dash-lead-modal .dash-lead-modal-grid-host.is-resetting::before,
#dash-stats-detail .dash-lead-modal-grid-host.is-resetting::before,
#dash-lead-modal .dash-lead-modal-channel-section.is-resetting::before,
#dash-stats-detail .dash-lead-modal-channel-section.is-resetting::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(10, 13, 18, 0.5);
  z-index: 3;
  pointer-events: none;
}

#dash-lead-modal .dash-lead-modal-grid-host.is-resetting::after,
#dash-stats-detail .dash-lead-modal-grid-host.is-resetting::after,
#dash-lead-modal .dash-lead-modal-channel-section.is-resetting::after,
#dash-stats-detail .dash-lead-modal-channel-section.is-resetting::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  z-index: 4;
  border-radius: 50%;
  border: 2px solid rgba(226, 232, 240, 0.35);
  border-top-color: #e2e8f0;
  animation: settings-spin 0.7s linear infinite;
  pointer-events: none;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  #dash-lead-modal .dash-lead-modal-grid-host.is-resetting::after,
  #dash-stats-detail .dash-lead-modal-grid-host.is-resetting::after,
  #dash-lead-modal .dash-lead-modal-channel-section.is-resetting::after,
  #dash-stats-detail .dash-lead-modal-channel-section.is-resetting::after {
    animation: none;
  }
}

.dash-lead-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Date de création : au-dessus du média, texte centré, sans tuile grille (évite le crop en colonnes étroites). */
.dash-lead-modal-created-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  margin-bottom: 12px;
}

.dash-lead-modal-created-line-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-muted);
}

.dash-lead-modal-created-line-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--flow-text);
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.dash-lead-modal-booking-line {
  margin-top: -4px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.dash-lead-modal-booking-detail {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--flow-text);
}

.dash-lead-modal-booking-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--flow-muted);
}

.dash-lead-modal-booking-icon iconify-icon {
  display: block;
  --iconify-icon-color: currentColor;
}

.dash-lead-modal-booking-detail-text {
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}

.dash-lead-modal-booking-link {
  color: var(--flow-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.dash-lead-modal-booking-link:hover {
  color: color-mix(in srgb, var(--flow-accent) 82%, var(--flow-text));
}

/* Titre du lead sous le média (même centrage que la date de création). */
.dash-lead-modal-title-line {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  margin: 6px 0 16px;
}

.dash-lead-modal-title-line-text {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--flow-text);
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.dash-lead-modal-channel-section {
  margin: 16px 0 12px;
  padding-top: 4px;
  text-align: center;
}

.dash-lead-modal-channel-title {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 0 8px;
  opacity: 0.85;
  text-align: center;
}

/* Grille 3×2 : une carte par canal (même gabarit `.dash-lead-modal-item` que Opens / Category). */
.dash-channel-compact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: initial;
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible;
}

.dash-channel-cell {
  text-align: center;
  justify-items: center;
}

.dash-channel-cell strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--flow-text);
}

@media (max-width: 520px) {
  .dash-channel-compact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Action texte : pas de bordure ni fond pill (surcharge des styles globaux `button` / `.ui-button`). */
.dash-channel-compact-list button.dash-channel-copy {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 2px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--flow-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  text-decoration: none;
}

.dash-channel-compact-list button.dash-channel-copy:hover:not(:disabled) {
  color: var(--flow-accent-overlay) !important;
  text-decoration: none;
  background: color-mix(in srgb, var(--flow-accent) 10%, transparent) !important;
  transform: none !important;
}

.dash-channel-compact-list button.dash-channel-copy:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.share-links-host {
  min-width: 0;
}

/* Share modal : espacement vertical régulier ; tailles intrinsèques (pas de hauteur forcée ni rangées étirées). */
#share-modal .modal-card.stack.gap {
  gap: 16px !important;
  align-items: stretch;
}

#share-modal .modal-card.stack.gap > h3 {
  margin: 0 !important;
}

#share-modal .share-modal-intro {
  margin: 0;
  text-align: center;
  line-height: 1.45;
  max-width: 36rem;
  align-self: center;
}

/* Outil « Links » : même modale que après enregistrement, sans lien d’explication. */
#share-modal.share-modal--links-only .modal-card.stack.gap > h3,
#share-modal.share-modal--links-only .share-modal-intro {
  display: none !important;
}

#share-modal .modal-card > .ui-modal-actions {
  margin-top: 2px;
}

.dash-channel-no-url {
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dash-lead-modal-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin-bottom: 12px;
  background-color: var(--flow-surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dash-lead-modal-media.is-empty {
  background-image: none !important;
}

.dash-lead-modal-media--embed .dash-lead-modal-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.dash-lead-modal-media--mux .dash-lead-modal-mux-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.dash-lead-modal-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}

/* Lead modal: Status + Favorite — même mise en colonne (label puis contrôle) */
.dash-lead-modal-meta-row {
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 20px 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
  justify-items: center;
  background: transparent;
}

.dash-lead-modal-meta-row--with-favorite {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 20px;
  justify-items: center;
}

@media (max-width: 640px) {
  /*
   * Decision / Engagement / Favorite : 3 colonnes, libellés sur une ligne (pas de coupure « ENGAGEMEN/T »).
   */
  .dash-lead-modal-meta-row--with-favorite {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
    column-gap: 6px;
    justify-items: stretch;
    align-items: stretch;
    padding: 12px 6px;
    overflow: visible;
  }

  .dash-lead-modal-meta-divider {
    display: none;
  }

  .dash-lead-modal-meta-row--with-favorite .dash-lead-modal-meta-slot:nth-child(3),
  .dash-lead-modal-meta-row--with-favorite .dash-lead-modal-meta-slot:nth-child(5) {
    border-left: 1px solid var(--flow-surface-3);
    padding-left: 4px;
    box-sizing: border-box;
  }

  .dash-lead-modal-meta-slot {
    max-width: none;
    min-width: 0;
    width: 100%;
    gap: 6px;
    overflow: visible;
    padding-inline: 1px;
  }

  .dash-lead-modal-meta-slot-label {
    font-size: 8px;
    letter-spacing: 0.02em;
    line-height: 1.15;
    max-width: 100%;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
    text-align: center;
  }

  .dash-lead-modal-decision-badge,
  .dash-lead-modal-heat-badge {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    text-align: center;
  }

  button.dash-lead-favorite-switch.dash-ui-switch {
    width: 36px;
    height: 20px;
    align-self: center;
    flex-shrink: 0;
  }

  button.dash-lead-favorite-switch.dash-ui-switch .dash-ui-switch-thumb {
    width: 14px;
    height: 14px;
  }

  button.dash-lead-favorite-switch.dash-ui-switch[aria-checked="true"] .dash-ui-switch-thumb {
    transform: translateX(16px);
  }
}

.dash-lead-modal-meta-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
  width: 100%;
  max-width: 220px;
}

.dash-lead-modal-meta-slot-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flow-muted);
}

.dash-lead-modal-meta-slot-label[data-tooltip] {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--flow-muted) 55%, transparent);
  text-underline-offset: 3px;
}

.dash-lead-modal-meta-divider {
  width: 1px;
  align-self: stretch;
  min-height: 52px;
  margin: 4px 0;
  background: var(--flow-surface-3);
  justify-self: center;
}

/* Radix Switch–like toggle (sans React) — voir ui.shadcn.com/docs/components/switch */
button.dash-ui-switch {
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--flow-surface-3);
  cursor: pointer;
  /* Annule `button:hover { transform: translateY(-1px) }` (styles globaux boutons). */
  transform: none;
  transition: background-color 0.2s ease;
}

button.dash-ui-switch:hover:not(:disabled):not([data-busy="1"]) {
  background: color-mix(in srgb, var(--flow-surface-3) 82%, var(--flow-text));
  transform: none;
}

button.dash-ui-switch[aria-checked="true"] {
  background: var(--flow-accent);
}

button.dash-ui-switch[aria-checked="true"]:hover:not(:disabled):not([data-busy="1"]) {
  background: var(--flow-accent-overlay);
  transform: none;
}

button.dash-ui-switch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 45%, transparent);
  outline-offset: 2px;
}

button.dash-ui-switch:disabled,
button.dash-ui-switch[data-busy="1"] {
  opacity: 0.65;
  cursor: wait;
}

.dash-ui-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(18 26 51 / 0.12);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

button.dash-ui-switch[aria-checked="true"] .dash-ui-switch-thumb {
  transform: translateX(18px);
}

.dash-lead-modal-decision-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.dash-lead-modal-decision-badge.is-pending {
  background: color-mix(in srgb, #f59e0b 20%, #ffffff);
  color: #92400e;
}

.dash-lead-modal-decision-badge.is-accepted {
  background: color-mix(in srgb, #22c55e 18%, #ffffff);
  color: #166534;
}

.dash-lead-modal-decision-badge.is-refused,
.dash-lead-modal-decision-badge.is-declined {
  background: color-mix(in srgb, #ef4444 18%, #ffffff);
  color: #991b1b;
}

/* Intent (calendar rules) : même échelle aplats que les pills du calendrier */
.dash-lead-modal-heat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--flow-heat-fg);
}

.dash-lead-modal-heat-badge.is-cold {
  background: var(--flow-heat-cold);
  color: var(--flow-heat-fg);
}

.dash-lead-modal-heat-badge.is-warm {
  background: var(--flow-heat-warm);
  color: var(--flow-heat-fg);
}

.dash-lead-modal-heat-badge.is-hot {
  background: var(--flow-heat-hot);
  color: var(--flow-heat-hot-fg);
}

.dash-lead-modal-heat-badge.is-initialized {
  background: var(--flow-heat-initialized);
  color: var(--flow-heat-fg);
}

.dash-lead-modal-item {
  position: relative;
  background: var(--flow-surface-2);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.dash-lead-modal-item span {
  font-size: 12px;
  color: var(--flow-muted);
}

/* Garantit que les valeurs (date, compteurs, etc.) ne se cassent jamais sur deux lignes
 * dans une tuile `.dash-lead-modal-item`. */
.dash-lead-modal-item > strong {
  white-space: nowrap;
}

.dash-lead-modal-item--watch-viz {
  grid-column: 1 / -1;
}

.dash-watch-viz {
  width: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dash-watch-peak-pct {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--flow-accent);
  margin-bottom: 6px;
  line-height: 1.15;
}

.dash-watch-highest-peak {
  text-align: center;
  font-size: 11px;
  color: var(--flow-muted);
  margin-top: 10px;
  line-height: 1.35;
}

.dash-watch-highest-peak .dash-watch-meta-k {
  opacity: 0.78;
  margin-right: 6px;
}

.dash-watch-viz-svg {
  width: 100%;
  height: auto;
  max-height: 56px;
  display: block;
  overflow: visible;
  color: var(--flow-accent);
}

.dash-watch-area {
  fill: color-mix(in srgb, var(--flow-accent) 22%, var(--flow-surface-1));
  stroke: none;
}

.dash-watch-axis-base {
  stroke: var(--flow-surface-3);
  stroke-width: 2;
  stroke-linecap: round;
}

.dash-watch-axis-dash {
  stroke: var(--flow-muted);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 10;
  opacity: 0.75;
}

.dash-watch-solid-curve {
  fill: none;
  stroke: var(--flow-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-watch-mark {
  stroke: var(--flow-surface-1);
  stroke-width: 1.5;
}

.dash-watch-mark-start,
.dash-watch-mark-end {
  fill: color-mix(in srgb, var(--flow-muted) 70%, var(--flow-text));
}

.dash-watch-mark-peak {
  fill: var(--flow-accent);
}

.dash-lead-modal-actions {
  /* Même ordre de grandeur que `.dash-lead-modal-meta-row` (air autour du bloc). */
  margin-top: 20px;
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.dash-lead-modal-public-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  text-decoration: none;
}

/* Ne pas utiliser `font: inherit` : ça annule font-weight / letter-spacing des boutons globaux. */
button.dash-lead-modal-public-link {
  border: none;
  cursor: pointer;
}

.dash-lead-delete-modal-card {
  max-width: 460px;
}

.dash-lead-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

.dash-lead-delete-actions button {
  flex-shrink: 0;
}

.dash-skeleton-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dash-skeleton-kpi,
.dash-skeleton-line {
  background: var(--flow-surface-3);
  border-radius: 10px;
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-skeleton-kpi {
  min-height: 56px;
}

.dash-skeleton-line {
  min-height: 14px;
}

.dash-skeleton-line--title {
  width: 34%;
}

.dash-skeleton-line--foot {
  width: 24%;
}

@keyframes dash-skeleton-pulse {
  0%,
  100% {
    opacity: 0.52;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .dash-lead-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-lead-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-skeleton-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.modal {
  /* fixed = couvre tout le viewport (absolute sur body laissait une bande non assombrie si le body est court). */
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 13, 0.6);
  /* Au-dessus de la navbar (z-index: 100) et du menu utilisateur (200). */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.ui-modal {
  backdrop-filter: blur(2px);
}

.modal-card {
  width: min(560px, 100%);
  background: #131a24;
  border: 1px solid #2f3b4b;
  border-radius: 12px;
  padding: 12px;
}

.ui-modal-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  padding: 50px !important;
  gap: 12px !important;
}

.modal-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.modal-card h3 {
  text-align: center;
  margin-bottom: 20px;
}

#builder-no-meeting-modal .builder-no-meeting-modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

#builder-no-meeting-modal .builder-no-meeting-modal__head h3 {
  margin: 0;
  text-align: center;
}

/* Même picto que le bouton « Add meeting » de la timeline builder. */
#builder-no-meeting-modal .builder-no-meeting-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--flow-surface-3);
  color: var(--flow-accent);
  box-sizing: border-box;
}

#builder-no-meeting-modal .builder-no-meeting-modal__icon iconify-icon {
  width: 34px;
  height: 34px;
  font-size: 34px;
  color: var(--flow-accent);
}

.nav-signup-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 50px !important;
}

.nav-signup-title {
  margin: 0;
  text-align: center;
}

.nav-signup-card .nav-su-status {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0 2px 0;
  width: auto;
  align-self: stretch;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--flow-danger);
  opacity: 0;
  overflow: hidden;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.34s ease;
}

.nav-signup-card .nav-su-status.is-visible {
  grid-template-rows: 1fr;
  margin: 0 2px 14px;
  opacity: 1;
}

.nav-signup-card .nav-su-status-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nav-signup-card .nav-su-status {
    transition: none;
  }
}

/* Signup + login : une marge entre chaque bloc (champ ou CTA), pas de gap flex. */
.nav-signup-card #nav-signup-form,
.nav-signup-card #nav-login-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  margin: 0;
  width: 100%;
}

.nav-signup-card .nav-auth-field,
.nav-signup-card #nav-signup-form > #nav-su-submit,
.nav-signup-card #nav-login-form > #nav-li-submit {
  margin: 0 2px 18px;
  align-self: stretch;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}

.nav-signup-card .nav-auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-signup-card .nav-auth-field > input:not([type="checkbox"]):not([type="radio"]),
.nav-signup-card .nav-auth-field .nav-su-password-wrap {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.nav-signup-card .nav-auth-field > .nav-su-inline-error {
  margin: 0;
}

.nav-signup-card .nav-auth-field > .nav-su-inline-error:empty {
  display: none;
  min-height: 0;
}

/* Builder modal spacing parity */
#question-modal .modal-card,
#info-modal .modal-card,
#booking-modal .modal-card {
  padding: 50px !important;
  gap: 12px !important;
}

#question-modal .modal-card h3,
#info-modal .modal-card h3,
#booking-modal .modal-card h3 {
  margin: 0 0 12px !important;
  text-align: center;
}

#question-modal .modal-card label,
#info-modal .modal-card label,
#booking-modal .modal-card label {
  gap: 8px;
}

#question-modal .modal-card .row.gap,
#info-modal .modal-card .row.gap,
#booking-modal .modal-card .row.gap {
  margin-top: 4px;
}

/* Calendly : désactivé tant que l’intégration n’est pas prête (infobulle native `title`). */
#booking-modal #modal-booking-mode-calendly:disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
  background: #e5e7eb !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  transform: none !important;
}

#booking-modal #modal-booking-mode-calendly:disabled:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
  transform: none !important;
}

/* Modal builder : fuseau prospecteur (même combobox que la campagne RDV manuel). */
#booking-modal .modal-booking-owner-tz-block {
  margin-top: 2px;
}
#booking-modal .modal-booking-owner-tz-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#booking-modal .modal-booking-owner-tz-root .manual-booking-tz-control,
#booking-modal .modal-booking-owner-tz-root .dash-stats-combobox {
  width: 100%;
  max-width: 100%;
}

/* RDV manuel : un seul scope `.manual-booking-root` (page lead, sim builder, aperçu appearance, paramètres — voir manual-booking-panel.js). */
.manual-booking-root {
  --flow-mb-text: var(--flow-manual-booking-text, var(--flow-text));
}

.manual-booking-root .booking-toggle-btn.ui-button {
  background: var(--flow-accent) !important;
  color: var(--flow-on-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.manual-booking-root .booking-toggle-btn.ui-button:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  color: var(--flow-on-accent) !important;
}

/* Bordure = accent lead (`--flow-accent`, ex. panneau Appearance / page publiée) — plus de gris figé #2f3b4b. */
.manual-booking-root .booking-type-btn.ui-button:not(.is-active) {
  background: transparent !important;
  color: var(--flow-mb-text) !important;
  border: 1px solid var(--flow-accent) !important;
  box-shadow: none !important;
}

.manual-booking-root .booking-type-btn.ui-button:not(.is-active):hover:not(:disabled) {
  background: transparent !important;
  color: var(--flow-mb-text) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 82%, #000000) !important;
}

.manual-booking-root .booking-type-btn.ui-button.is-active {
  background: var(--flow-accent) !important;
  border-color: var(--flow-accent-overlay) !important;
  color: var(--flow-mb-text) !important;
}

.manual-booking-root .booking-type-btn.ui-button.is-active:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  border-color: var(--flow-accent-overlay) !important;
  color: var(--flow-mb-text) !important;
}

/* Triggers combobox mois / année / heure : fond = accent, libellé = calendar text (`--flow-mb-text`), chevron = text color lead. */
.manual-booking-root .dash-stats-combobox-trigger {
  background: var(--flow-accent) !important;
  color: var(--flow-mb-text) !important;
  border-radius: var(--obviouslead-button-border-radius) !important;
  transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.manual-booking-root .dash-stats-combobox-trigger .dash-stats-combobox-chevron {
  color: var(--flow-text) !important;
  opacity: 0.85;
}

.manual-booking-root .dash-stats-combobox-trigger:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  color: var(--flow-mb-text) !important;
  transform: none !important;
}

.manual-booking-root .dash-stats-combobox-trigger:hover:not(:disabled) .dash-stats-combobox-chevron {
  color: var(--flow-text) !important;
}

.manual-booking-root .dash-stats-combobox-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 38%, transparent) !important;
  outline-offset: 1px;
}

.manual-booking-root .booking-detail-cell {
  color: var(--flow-mb-text) !important;
}

.manual-booking-root .booking-visio-line:not(.muted) {
  color: var(--flow-mb-text) !important;
}

.manual-booking-root a.booking-visio-link {
  color: var(--flow-mb-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.manual-booking-root a.booking-visio-link:hover {
  color: var(--flow-accent) !important;
}

.manual-booking-root .manual-booking-layout {
  color: var(--flow-mb-text);
}

.manual-booking-root .manual-booking-time-format-toolbar-tag {
  color: var(--flow-mb-text);
}

.manual-booking-root .manual-booking-time-format-toolbar-tag:not(.is-selected) {
  color: color-mix(in srgb, var(--flow-mb-text) 58%, var(--flow-muted, #64748b));
}

.manual-booking-root .manual-booking-tz-readonly {
  color: var(--flow-mb-text);
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-calendar,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-calendar.inline {
  background: var(--flow-manual-booking-card-bg, var(--flow-surface-1)) !important;
  color: var(--flow-mb-text) !important;
  border: none !important;
  box-shadow: none !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-months,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-month,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-innerContainer,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-rContainer,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-weekdays,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-days,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-current-month {
  background: var(--flow-manual-booking-card-bg, var(--flow-surface-1)) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-months .flatpickr-month,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-current-month,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-current-month .flatpickr-monthDropdown-months,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-current-month input.cur-year,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-weekday,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-time input,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-time .flatpickr-am-pm {
  color: var(--flow-mb-text) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.prevMonthDay,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.nextMonthDay {
  color: color-mix(in srgb, var(--flow-mb-text) 38%, var(--flow-muted, #667085)) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-months .flatpickr-prev-month,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-months .flatpickr-next-month {
  fill: var(--flow-mb-text) !important;
  color: var(--flow-mb-text) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
  background: transparent !important;
  border-color: var(--flow-accent) !important;
  border-style: solid !important;
  border-width: 1px !important;
  color: var(--flow-mb-text) !important;
  box-shadow: none !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day:hover,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.selected,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.startRange,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.endRange {
  background: var(--flow-accent) !important;
  border-color: var(--flow-accent) !important;
  color: var(--flow-on-accent) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.inRange {
  background: color-mix(in srgb, var(--flow-accent) 26%, transparent) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 32%, transparent) !important;
  color: var(--flow-mb-text) !important;
}

.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.flatpickr-disabled,
.manual-booking-root .manual-booking-calendar-wrap .flatpickr-day.flatpickr-disabled:hover {
  opacity: 0.35 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--flow-mb-text) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Même gabarit que la maquette RDV (`.booking-type-btn`) malgré `button.ui-button` global (padding / graisse). */
.manual-booking-root .manual-booking-controls .booking-type-btn.ui-button {
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 8px 8px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}

/* Cartes date + heure : `--flow-manual-booking-card-bg` (blanc si fond page par défaut, sinon dérivé de `pageBackground`). */
.manual-booking-root .manual-booking-calendar-wrap {
  background: var(--flow-manual-booking-card-bg, var(--flow-surface-1)) !important;
  border: none !important;
  border-radius: 10px;
  box-shadow: none !important;
}

/* Fond page lead par défaut (`#f8fafc`) : bordure légère sur les cartes (calendrier + contrôles). */
.manual-booking-root.manual-booking-root--default-page-bg .manual-booking-calendar-wrap,
.manual-booking-root.manual-booking-root--default-page-bg .manual-booking-controls {
  border: 1px solid var(--flow-surface-3, #e4e7ec) !important;
}

/* Par défaut : libellés des pilules accent (mois / année / heure / fuseau) + type RDV actif en blanc. */
.manual-booking-root.manual-booking-root--default-page-bg .dash-stats-combobox-trigger,
.manual-booking-root.manual-booking-root--default-page-bg .dash-stats-combobox-trigger:hover:not(:disabled) {
  color: var(--flow-on-accent, #ffffff) !important;
}

.manual-booking-root.manual-booking-root--default-page-bg .dash-stats-combobox-trigger .dash-stats-combobox-chevron,
.manual-booking-root.manual-booking-root--default-page-bg
  .dash-stats-combobox-trigger:hover:not(:disabled)
  .dash-stats-combobox-chevron {
  color: var(--flow-on-accent, #ffffff) !important;
  opacity: 0.92;
}

.manual-booking-root.manual-booking-root--default-page-bg .booking-type-btn.ui-button.is-active,
.manual-booking-root.manual-booking-root--default-page-bg .booking-type-btn.ui-button.is-active:hover:not(:disabled) {
  color: var(--flow-on-accent, #ffffff) !important;
  border: 1px solid var(--flow-accent-overlay) !important;
}

.manual-booking-root.manual-booking-root--default-page-bg .booking-type-btn.ui-button:not(.is-active),
.manual-booking-root.manual-booking-root--default-page-bg .booking-type-btn.ui-button:not(.is-active):hover:not(:disabled) {
  color: var(--flow-accent) !important;
  border: 1px solid var(--flow-accent) !important;
}

/* Par défaut : contour sur les pilules accent (combobox + type RDV actif), comme les cartes. */
.manual-booking-root.manual-booking-root--default-page-bg .dash-stats-combobox-trigger,
.manual-booking-root.manual-booking-root--default-page-bg .dash-stats-combobox-trigger:hover:not(:disabled) {
  border: 1px solid var(--flow-accent-overlay) !important;
}

/* Voile discret sur tout le calendrier (mois + jours) quand heure / mois / année est ouvert — pas le fuseau au trigger. */
.manual-booking-root .booking-panel.is-open .manual-booking-calendar-wrap.manual-booking-calendar-wrap--days-veil-subtle {
  position: relative;
}

.manual-booking-root .booking-panel.is-open .manual-booking-calendar-wrap.manual-booking-calendar-wrap--days-veil-subtle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
  .manual-booking-root .booking-panel.is-open .manual-booking-calendar-wrap.manual-booking-calendar-wrap--days-veil-subtle::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 23, 42, 0.1);
  }
}

.manual-booking-root .manual-booking-controls {
  background: var(--flow-manual-booking-card-bg, var(--flow-surface-1)) !important;
  border: none !important;
  border-radius: 10px;
  box-shadow: none !important;
}

/* Modal question : pied — case à gauche, Save / Cancel à droite */
#question-modal .ui-modal-question-footer {
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}

#question-modal .ui-modal-question-footer .row.gap {
  margin-top: 0;
}

.modal-card.ui-modal-card .ui-modal-question-footer .ui-modal-actions {
  justify-content: flex-end;
}

/* Checkbox façon shadcn/ui (vanilla) — @see https://ui.shadcn.com/docs/components/radix/checkbox */
#question-modal label#modal-question-required-wrap.obviouslead-checkbox-line,
label.obviouslead-checkbox-line {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  width: auto;
  max-width: 100%;
  position: relative;
}

#question-modal label#modal-question-required-wrap.obviouslead-checkbox-line {
  margin: 0;
}

.obviouslead-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.obviouslead-checkbox-indicator {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: var(--obviouslead-control-border-width) solid var(--obviouslead-control-border);
  background: var(--flow-surface-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.obviouslead-checkbox-input:focus-visible + .obviouslead-checkbox-indicator {
  box-shadow: 0 0 0 2px var(--flow-surface-1), 0 0 0 4px var(--flow-accent);
}

.obviouslead-checkbox-input:checked + .obviouslead-checkbox-indicator {
  background: var(--flow-accent);
  border-color: var(--flow-accent);
}

.obviouslead-checkbox-input:checked + .obviouslead-checkbox-indicator::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 0;
  box-sizing: border-box;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  /* L + rotate : le centre optique est légèrement au-dessus du centre géométrique du boîte flex. */
  transform: translateY(-1.5px) rotate(45deg);
  flex-shrink: 0;
}

.obviouslead-checkbox-label {
  font-size: 14px;
  line-height: 1.3;
  color: inherit;
}

/* Placeholders des champs `.ui-input` : même corps / interligne que `.obviouslead-checkbox-label`. */
input.ui-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])::placeholder,
textarea.ui-input::placeholder {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--flow-muted) 88%, var(--flow-text));
  opacity: 1;
}

/* Même épaisseur / couleur de bordure que radio + checkbox (champs texte / select du modal question) */
#question-modal .modal-card input.ui-input:not([type="checkbox"]):not([type="radio"]),
#question-modal .modal-card select.ui-input {
  border: var(--obviouslead-control-border-width) solid var(--obviouslead-control-border) !important;
}

/* Combobox « Type » : même trigger que dashboard (`.dash-stats-combobox-trigger` — pas de surcharge locale) */
#question-modal #modal-question-type-combobox-root .dash-stats-combobox {
  width: 100%;
}

.nav-su-password-wrap {
  position: relative;
  display: block;
}

.nav-su-password-wrap #nav-su-password {
  padding-right: 44px;
}

.nav-su-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 0 !important;
  background: transparent !important;
  color: var(--flow-text) !important;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: none !important;
}

.nav-su-eye iconify-icon {
  font-size: 18px;
  display: block;
}

.nav-su-eye:hover,
.nav-su-eye:focus,
.nav-su-eye:active {
  transform: translateY(-50%) !important;
}

.nav-su-rules {
  margin: 0 2px 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.nav-li-forgot {
  align-self: center;
  margin: 0 2px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--flow-muted);
  text-decoration: none;
}

.nav-li-forgot:hover {
  color: var(--flow-accent);
}

.nav-login-switch {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.nav-login-switch a {
  color: var(--flow-accent);
  text-decoration: none;
}

.nav-login-switch a:hover {
  color: var(--flow-accent-overlay);
}

.nav-su-inline-error {
  margin: -6px 2px 0;
  min-height: 16px;
  font-size: 12px;
  color: #dc2626;
}

.nav-su-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}

.nav-su-rule-icon {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  font-weight: 700;
}

.nav-su-rule-icon iconify-icon {
  width: 14px;
  height: 14px;
}

.nav-su-rules li.is-invalid {
  color: var(--flow-muted);
}

.nav-su-rules li.is-valid {
  color: #16a34a;
  opacity: 1;
}

.nav-su-rules li.just-validated {
  animation: nav-su-rule-pop 0.22s ease-out;
}

@keyframes nav-su-rule-pop {
  0% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

/* No input ring policy */
.ui-input:focus:not(.dash-stats-combobox-trigger),
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
}

#config-editor {
  position: relative;
  flex: 1;
  min-height: 0;
  justify-content: flex-start;
}

/* Scroll port : `section.form-pane#builder-config-pane` — #config-editor ne scroll plus seul.
   `min-height: 100%` : contenu court = même hauteur que la colonne (placeholder centré comme avant). */
body.builder-page #config-editor {
  flex: 1 1 auto;
  min-height: 100%;
  overflow: visible;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
 * Le centrage vertical du placeholder (Upload video → Reference step) doit s'appliquer
 * AUSSI quand `.has-video` est posée (étape Reference après upload). On se base donc sur
 * « le placeholder est-il l'écran actif » via `:has(#config-placeholder.is-visible)`,
 * pas sur `.has-video`. Le scroll naturel reste actif quand la timeline / appearance / video
 * est visible (= placeholder masqué).
 */

/* Étape placeholder active (upload OU reference) : on neutralise la chaîne `flex: 1` pour que
 * `#config-placeholder` prenne la hauteur de son contenu — `justify-content: center` sur
 * `#config-editor` peut alors centrer le bloc verticalement dans la colonne. */
body.builder-page #config-editor:has(#config-placeholder.is-visible) {
  justify-content: center;
}

body.builder-page #builder-config-pane #config-editor:has(#config-placeholder.is-visible) .config-editor-main-crossfade {
  flex: 0 1 auto;
  min-height: auto;
  grid-template-rows: auto;
}

body.builder-page #builder-config-pane #config-editor:has(#config-placeholder.is-visible) #config-placeholder.placeholder-card {
  flex: 0 1 auto;
  min-height: auto;
}

body.builder-page
  #builder-config-pane
  #config-editor:has(#config-placeholder.is-visible)
  #config-placeholder.placeholder-card
  .config-placeholder-crossfade {
  flex: 0 1 auto;
  min-height: auto;
  grid-template-rows: auto;
}

body.builder-page #builder-config-pane #config-editor:has(#config-placeholder.is-visible) .config-editor-main-pane {
  align-self: center;
  min-height: auto;
}

/* Hors placeholder (= timeline / appearance / video visibles) : chaîne flex « grandit »
 * pour que la molette scroll #builder-config-pane et pas seulement une sous-carte. */
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) .config-editor-main-crossfade {
  flex: 0 1 auto;
  min-height: auto;
  grid-template-rows: auto;
}

body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) .config-editor-main-pane {
  min-height: auto;
}

body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #config-timeline-section.timeline-editor-card,
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #campaign-form,
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #campaign-form #builder-customize-pages,
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) .builder-customize-page:not(.hidden),
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #lead-video-wrap,
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #lead-appearance-wrap,
body.builder-page #builder-config-pane #config-editor.has-video:not(:has(#config-placeholder.is-visible)) #timeline-list-wrap {
  flex: 0 1 auto;
  min-height: auto;
}

/*
 * Onglet Appearance actif : on force la chaîne flex `.config-editor-main-crossfade` → `#builder-page-appearance`
 * en `flex: 1 1 auto` / `min-height: 0`, INDÉPENDAMMENT du mode preview ou du nombre de markers timeline.
 * On inclut `.has-video` ET `:not(:has(#config-placeholder.is-visible))` pour avoir AU MOINS la même
 * spécificité que la règle « has-video » plus haut (4732+) — puis `!important` pour terminer toute
 * dispute de cascade (sans ça, `flex: 0 1 auto` gagne et `#builder-page-appearance` n'a aucune hauteur
 * résiduelle à centrer, donc le contenu colle au top).
 */
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  .config-editor-main-crossfade,
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #config-timeline-section.timeline-editor-card,
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #campaign-form,
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #campaign-form
  #builder-customize-pages,
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #builder-page-appearance.builder-customize-page:not(.hidden) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* `#campaign-form` (élément <form>) : on force `display: flex; flex-direction: column` au cas où la
 * classe `.stack` du HTML serait override ailleurs ; sans flex column, la chaîne ne propage pas la hauteur. */
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #campaign-form {
  display: flex !important;
  flex-direction: column !important;
}

/* Filet de sécurité : si pour une raison la chaîne flex ne propage pas tout, `#builder-page-appearance`
 * occupe au moins toute la hauteur de son parent, et CENTRE son contenu (override le `justify-content: flex-start`
 * que `.stack` n'impose pas mais que la règle « has-video » pourrait laisser comme défaut implicite). */
body.builder-page
  #builder-config-pane
  #config-editor.has-video:not(:has(#config-placeholder.is-visible)):has(#builder-page-appearance:not(.hidden))
  #builder-page-appearance.builder-customize-page:not(.hidden) {
  min-height: 100% !important;
  justify-content: center !important;
}

.config-editor-main-crossfade {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  width: 100%;
  align-self: stretch;
}

.config-editor-main-pane {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 0;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
}

.config-editor-main-pane.is-visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .config-editor-main-pane {
    transition: none;
  }
}

.builder-customize-item-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-customize-item {
  padding: 12px 14px;
}

.builder-customize-item-head {
  margin-bottom: 6px;
}

.builder-customize-item-title {
  font-weight: 600;
  font-size: 14px;
}

.builder-customize-item-body {
  font-size: 13px;
  line-height: 1.45;
}

.timeline-editor-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: transparent !important;
  border: 0 !important;
  padding: 0;
}

#config-timeline-section.timeline-editor-card,
#config-timeline-section.timeline-editor-card #campaign-form {
  background: transparent !important;
  box-shadow: none !important;
}

#campaign-form {
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#campaign-form label,
#campaign-form #builder-customize-pages,
#campaign-form #timeline-list-wrap,
#campaign-form > .row.between,
#campaign-form .builder-customize-toolbar {
  width: min(100%, 520px);
  margin-inline: auto;
}

.builder-customize-toolbar {
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  background: transparent !important;
  border: none;
  box-shadow: none;
}

#campaign-form #builder-customize-pages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Scroll unique sur `#config-editor.ui-scroll-surface` (évite double barre avec ce bloc). */
  overflow-x: hidden;
  overflow-y: visible;
}

.builder-customize-page:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Onglet Appearance : centre le bloc réglages sur l’axe vertical quand la colonne est plus haute que le contenu (ex. aperçu côte à côte). */
#builder-page-appearance:not(.hidden) {
  justify-content: center;
}

#lead-appearance-wrap,
#lead-video-wrap {
  text-align: start;
}

/* Espace carte → actions : léger (évite cumul avec marges sur les rangées Save). */
#lead-appearance-wrap.stack.gap,
#lead-video-wrap.stack.gap {
  gap: 12px;
}

.builder-video-reframe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* États : `.builder-video-reframe--enter-prepare` (frame avant l'apparition) puis
   * `.builder-video-reframe--enter` (animation in), inverse pour la sortie.
   * `.hidden` reste sur `display:none` pour retirer du flux. */
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.builder-video-reframe.builder-video-reframe--enter-prepare,
.builder-video-reframe.builder-video-reframe--leave {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .builder-video-reframe {
    transition: none;
  }
  .builder-video-reframe.builder-video-reframe--enter-prepare,
  .builder-video-reframe.builder-video-reframe--leave {
    transform: none;
  }
}

/* Indication « glisser pour recadrer » : voile + icône, masqués au survol / focus clavier. */
.builder-video-reframe-stage-hint {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.builder-video-reframe-stage-hint__veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
}

.builder-video-reframe-stage-hint__icon-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: #1e293b;
}

.builder-video-reframe-stage:hover .builder-video-reframe-stage-hint,
.builder-video-reframe-stage:focus-within .builder-video-reframe-stage-hint {
  opacity: 0;
  visibility: hidden;
}

.builder-video-reframe-stage {
  position: relative;
  width: 100%;
  min-height: 160px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--flow-surface-3);
  background: #0a0e14;
  cursor: grab;
  touch-action: none;
  outline: none;
  /* `cqw` pour la taille du logo (même logique que `.campaign-video-shell`). */
  container-type: size;
  container-name: builder-reframe;
  /* aspect-ratio défini en JS depuis .builder-split .video-pane .video-frame */
}

.builder-video-reframe-stage.builder-video-reframe-stage--pan-axis-x {
  cursor: ew-resize;
}

.builder-video-reframe-stage.builder-video-reframe-stage--pan-axis-y {
  cursor: ns-resize;
}

.builder-video-reframe-stage:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.builder-video-reframe-stage:active {
  cursor: grabbing;
}

.builder-video-reframe-stage.builder-video-reframe-stage--pan-axis-x:active {
  cursor: ew-resize;
}

.builder-video-reframe-stage.builder-video-reframe-stage--pan-axis-y:active {
  cursor: ns-resize;
}

.builder-video-reframe-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Titres section « Customize » (Timeline / Appearance / Video) — typo alignée */
#builder-customize-pages h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--flow-text);
  line-height: 1.35;
}

.builder-behavior-reference-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: start;
  width: min(100%, 520px);
  margin-inline: auto;
}

.builder-behavior-reference-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--flow-text);
  line-height: 1.35;
}

.builder-reference-step {
  text-align: start;
}

/* Hauteur stable entre les deux panneaux crossfade (upload ↔ Reference) pour limiter le décalage au fondu */
.config-placeholder-crossfade > .builder-reference-step {
  min-height: 200px;
}

/* Deux colonnes : upload fichier | webcam — lignes alignées (subgrid) entre les cartes. */
.builder-upload-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:
    auto
    minmax(2.75rem, auto)
    minmax(3.25rem, auto)
    auto
    minmax(3.25rem, auto);
  column-gap: 16px;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

.builder-upload-choices.hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .builder-upload-choices {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 16px;
  }

  .builder-upload-choices .builder-upload-dropzone {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/*
 * Dropzone d'upload vidéo : 5 lignes (icône, titre, hint, bouton, limites) alignées entre les deux colonnes.
 */
.builder-upload-dropzone {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  align-items: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 28px 20px;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--flow-accent) 45%, transparent);
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@supports not (grid-template-rows: subgrid) {
  .builder-upload-choices {
    grid-template-rows: none;
    row-gap: 16px;
  }

  .builder-upload-dropzone {
    display: grid;
    grid-template-rows: none;
    grid-row: auto;
    grid-template-rows:
      auto
      minmax(2.75rem, auto)
      minmax(3.25rem, auto)
      auto
      minmax(3.25rem, auto);
    gap: 0;
  }
}

.builder-upload-dropzone__row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.builder-upload-dropzone__row--icon {
  min-height: 62px;
}

.builder-upload-dropzone__row--title,
.builder-upload-dropzone__row--hint,
.builder-upload-dropzone__row--limits {
  align-items: flex-start;
}

.builder-upload-dropzone__row--title {
  min-height: 2.75rem;
}

.builder-upload-dropzone__row--hint {
  min-height: 3.25rem;
}

.builder-upload-dropzone__row--action {
  min-height: 48px;
  padding-top: 0;
  align-items: flex-start;
  align-self: start;
  justify-content: center;
}

.builder-upload-dropzone__row--limits {
  min-height: 3.25rem;
  align-items: flex-start;
}

.builder-upload-dropzone:hover,
.builder-upload-dropzone:focus-visible,
.builder-upload-dropzone.is-dragover {
  border-color: var(--flow-accent);
}

.builder-upload-dropzone:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent) 35%, transparent);
}

.builder-upload-dropzone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  color: var(--flow-muted);
}

.builder-upload-dropzone__icon iconify-icon {
  display: block;
}

.builder-upload-dropzone__title {
  margin: 0;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  color: var(--flow-text);
  line-height: 1.35;
}

.builder-upload-dropzone__hint {
  margin: 0;
  width: 100%;
  font-size: 0.9rem;
  color: var(--flow-muted);
  line-height: 1.35;
}

.builder-upload-dropzone__row--action > button {
  margin: 0;
}

/* Mention des limites (taille + format) : petite ligne discrète sous le bouton. */
.builder-upload-dropzone__limits {
  margin: 0;
  width: 100%;
  font-size: 0.78rem;
  color: var(--flow-muted);
  line-height: 1.3;
  opacity: 0.85;
}

.builder-video-record-pane {
  width: 100%;
  box-sizing: border-box;
  gap: 16px;
}

.builder-video-record-pane.hidden {
  display: none !important;
}

/* Même proportions que `.video-placeholder-art` dans le volet vidéo builder (≈ 720×738). */
.builder-video-record-preview-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 720 / 738;
  margin-inline: auto;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--flow-accent);
  border: 1px solid color-mix(in srgb, var(--flow-text) 12%, transparent);
}

.builder-video-record-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #111;
}

.builder-video-record-status {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.builder-video-record-status.hidden {
  display: none !important;
}

.builder-video-record-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: builder-video-record-pulse 1.2s ease-in-out infinite;
}

@keyframes builder-video-record-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.builder-video-record-error {
  margin: 0;
  font-size: 0.88rem;
  color: #b91c1c;
  line-height: 1.4;
}

.builder-video-record-error.hidden {
  display: none !important;
}

.builder-video-record-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Annule le `margin-top: 12px` global de `.upload-cta` (sinon Start/Use décalés vs Cancel). */
.builder-video-record-actions > button,
.builder-video-record-actions > .upload-cta {
  margin: 0 !important;
  flex: 0 0 auto;
  align-self: center;
  min-height: 40px;
  box-sizing: border-box;
}

.builder-video-record-actions .hidden {
  display: none !important;
}

/* Bascule formulaire ↔ progression dans le pane d'upload : un seul des deux panneaux visible à la fois. */
#builder-video-upload-pane.is-progressing .builder-upload-form {
  display: none;
}

.builder-upload-progress {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: stretch;
  text-align: start;
}

/* Sécurité : l'attribut HTML `hidden` doit l'emporter sur tout `display: flex` hérité. */
.builder-upload-progress[hidden] {
  display: none !important;
}

.builder-upload-progress__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--flow-text);
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre de progression façon shadcn (`@/components/ui/progress`) : piste fine + indicateur translaté.
 * Voir https://ui.shadcn.com/docs/components/progress — Radix `Progress.Indicator` avec `translateX(-(100-value)%)`. */
.builder-upload-progress__bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-accent) 20%, transparent);
  overflow: hidden;
}

.builder-upload-progress__bar-indicator {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--flow-accent);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.builder-upload-progress__steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.builder-upload-progress__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 4px;
}

.builder-upload-progress__actions .upload-cta {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}

.builder-upload-progress__step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--flow-text);
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  animation: builder-upload-step-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger l\u00e9ger \u00e0 l'apparition : les 3 \u00e9tapes seed\u00e9es se r\u00e9v\u00e8lent rapidement les unes apr\u00e8s les autres. */
.builder-upload-progress__step:nth-child(1) { animation-delay: 0ms; }
.builder-upload-progress__step:nth-child(2) { animation-delay: 70ms; }
.builder-upload-progress__step:nth-child(3) { animation-delay: 140ms; }
.builder-upload-progress__step:nth-child(4) { animation-delay: 210ms; }

.builder-upload-progress__step-dot {
  display: inline-flex;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-danger, #c44) 40%, transparent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-danger, #c44) 45%, transparent);
  animation: builder-upload-step-pulse 1.4s ease-in-out infinite;
}

/* \u00c9tape \u00ab \u00e0 venir \u00bb : puce muet\u00e9e, sans pulse, label l\u00e9g\u00e8rement att\u00e9nu\u00e9 (pattern \u00ab requirements \u00bb). */
.builder-upload-progress__step--pending {
  color: var(--flow-muted);
  opacity: 0.6;
}

.builder-upload-progress__step--pending .builder-upload-progress__step-dot {
  background: color-mix(in srgb, var(--flow-muted) 35%, transparent);
  box-shadow: none;
  animation: none;
}

.builder-upload-progress__step--done {
  color: var(--flow-text);
  opacity: 1;
}

/* \u00c9tape valid\u00e9e : puce verte fixe (signal positif, ind\u00e9pendant de l'accent color du th\u00e8me). */
.builder-upload-progress__step--done .builder-upload-progress__step-dot {
  background: var(--flow-success, #22c55e);
  box-shadow: none;
  animation: none;
}

.builder-upload-progress__step--error {
  color: var(--flow-danger, #c44);
  opacity: 1;
}

.builder-upload-progress__step--error .builder-upload-progress__step-dot {
  background: var(--flow-danger, #c44);
  animation: none;
}

@keyframes builder-upload-step-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes builder-upload-step-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-danger, #c44) 45%, transparent);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--flow-danger, #c44) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-upload-progress__step {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .builder-upload-progress__step-dot {
    animation: none;
  }
  .builder-upload-progress__bar-indicator {
    transition: none;
  }
}

.config-placeholder-crossfade {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  min-height: inherit;
  place-items: center;
}

.config-placeholder-pane {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  justify-self: center;
  align-self: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 0;
}

.config-placeholder-pane.is-visible {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .config-placeholder-pane {
    transition: none;
  }
}

.builder-settings-card {
  text-align: start;
}

/* Builder customize : pas de surface « carte » claire (override final palette sur `.card`). */
#lead-appearance-wrap .builder-settings-card.card,
#lead-video-wrap .builder-settings-card.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Espacement vertical entre chaque ligne de paramètre (défaut `.gap` = 10px trop serré ici). */
#lead-appearance-wrap .builder-settings-card.stack.gap,
#lead-video-wrap .builder-settings-card.stack.gap {
  gap: 25px;
}

/* Évite qu’une ligne (switch / combobox) rétrécisse sous contrainte flex et chevauche la suivante. */
#lead-appearance-wrap .builder-settings-card.stack.gap > *,
#lead-video-wrap .builder-settings-card.stack.gap > * {
  flex-shrink: 0;
}

#lead-appearance-wrap label.builder-color-field,
#lead-video-wrap label.builder-color-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  width: 100%;
  box-sizing: border-box;
}

.builder-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.builder-setting-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--flow-text);
  flex: 1;
  line-height: 1.35;
}

.builder-setting-label--block {
  flex: unset;
  margin-bottom: 2px;
}

#lead-appearance-wrap label.builder-setting-row .dash-ui-switch,
#lead-video-wrap label.builder-setting-row .dash-ui-switch {
  flex-shrink: 0;
}

.builder-appearance-logo-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.builder-appearance-logo-block > .builder-setting-label--block {
  display: block;
  width: 100%;
  text-align: center;
}

.builder-appearance-logo-block > p:not(.builder-logo-status) {
  width: 100%;
  text-align: center;
}

.builder-logo-preview-row {
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.builder-logo-preview {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  border: 1px dashed var(--flow-surface-3);
  background: var(--flow-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.builder-logo-preview:hover,
.builder-logo-preview:focus-visible {
  border-color: var(--flow-accent);
  outline: none;
}

.builder-logo-preview:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent) 40%, transparent);
}

.builder-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.builder-logo-placeholder {
  padding: 10px;
  text-align: center;
}

.builder-logo-actions .settings-btn-muted {
  align-self: flex-start;
}

.builder-logo-status.builder-logo-status--error {
  color: #c44;
}

/* Builder : swatch bouton + popup ObviousleadColorPicker (remplace <input type="color">). */
#campaign-form .builder-color-picker-trigger.builder-color-input {
  width: 52px;
  height: 36px;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  border: none !important;
  box-shadow: none !important;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--flow-surface-3, #e2e8f0);
}

#campaign-form .builder-color-picker-trigger.builder-color-input--near-white {
  border: 1px solid color-mix(in srgb, var(--flow-text, #0f172a) 32%, var(--flow-surface-3, #cbd5e1)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flow-text, #0f172a) 8%, transparent) !important;
}

#campaign-form .builder-color-picker-trigger.builder-color-input:focus,
#campaign-form .builder-color-picker-trigger.builder-color-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 38%, transparent);
  outline-offset: 2px;
}

.obviouslead-color-picker-popover {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
}

.obviouslead-color-picker-popover.hidden {
  display: none !important;
}

.obviouslead-color-picker-dialog {
  background: var(--flow-surface-1, #ffffff);
  color: var(--flow-text);
  border: 1px solid var(--flow-surface-3, #e4e7ec);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.obviouslead-color-picker-sl-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--flow-surface-3, #e4e7ec);
  touch-action: none;
}

.obviouslead-color-picker-sl {
  position: absolute;
  inset: 0;
}

.obviouslead-color-picker-sl-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.obviouslead-color-picker-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.obviouslead-color-picker-row-label {
  font-weight: 600;
  color: var(--flow-muted);
}

.obviouslead-color-picker-hue-wrap {
  position: relative;
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  /* Dégradé réutilisé sur la piste du range (Chrome ne laisse pas toujours voir un calque sous l’input). */
  --obviouslead-hue-spectrum: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffff00 16.66%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.66%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
}

.obviouslead-color-picker-hue {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  accent-color: transparent;
}

.obviouslead-color-picker-hue:focus {
  outline: none;
}

.obviouslead-color-picker-hue:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent, #2b76ff) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.obviouslead-color-picker-hue::-webkit-slider-runnable-track {
  height: 12px;
  background: var(--obviouslead-hue-spectrum);
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--flow-text, #0f172a) 14%, transparent);
  box-sizing: border-box;
}

.obviouslead-color-picker-hue::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
}

.obviouslead-color-picker-hue::-moz-range-track {
  height: 12px;
  background: var(--obviouslead-hue-spectrum);
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--flow-text, #0f172a) 14%, transparent);
  box-sizing: border-box;
}

.obviouslead-color-picker-hue::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
}

.obviouslead-color-picker-hex-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  min-width: 0;
}

.obviouslead-color-picker-hex {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  height: 36px;
  padding: 8px 10px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--flow-surface-3, #e4e7ec);
  background: var(--flow-surface-2, #f8fafc);
  color: var(--flow-text);
}

.obviouslead-color-picker-hex:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--flow-accent, #2b76ff) 55%, var(--flow-surface-3, #e4e7ec));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--flow-accent, #2b76ff) 22%, transparent);
}

.obviouslead-color-picker-done {
  flex-shrink: 0;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--flow-accent, #2b76ff);
  color: var(--flow-on-accent, #fff);
  cursor: pointer;
  font-weight: 600;
}

.obviouslead-color-picker-done:hover {
  filter: brightness(1.05);
}

#lead-appearance-wrap .builder-settings-card > .builder-color-field {
  width: 100%;
}

.builder-color-input-with-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
}

#lead-appearance-wrap .builder-appearance-color-undo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--flow-surface-3);
  background: transparent !important;
  /* Bat `button.ui-button { color: var(--flow-on-accent) !important }` (icône sinon blanche sur fond clair). */
  color: var(--flow-accent) !important;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

#lead-appearance-wrap .builder-appearance-color-undo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-accent) 14%, transparent) !important;
  color: var(--flow-accent) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 24%, var(--flow-surface-3));
}

#lead-appearance-wrap .builder-appearance-color-undo:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

#lead-appearance-wrap .builder-appearance-color-undo:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: var(--flow-surface-3);
  background: transparent !important;
  color: color-mix(in srgb, var(--flow-accent) 42%, var(--flow-muted)) !important;
}

#lead-appearance-wrap .builder-appearance-color-undo iconify-icon {
  display: block;
  color: inherit;
  --iconify-icon-color: currentColor;
}

.builder-appearance-select-field {
  width: 100%;
  align-items: center;
}

/* Combobox (ObviousleadUiCombobox / même module que Statistics) */
.builder-settings-combobox-mount {
  flex: 0 1 auto;
  min-width: 160px;
  max-width: min(100%, 280px);
}

/* Aperçu Appearance : scroll sur `.builder-appearance-lead-sim-scroll` ; form = même logique que `#lead-form` (safe center si le bloc tient). */
.builder-split--appearance-preview #builder-appearance-lead-sim-form.campaign-form-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  overflow: visible;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.builder-split--appearance-preview
  #builder-appearance-lead-sim-form.campaign-form-content--stacked {
  flex: 0 0 auto;
  min-height: auto;
  overflow-y: visible;
}

@supports (justify-content: safe center) {
  .builder-split--appearance-preview
    #builder-appearance-lead-sim-form.campaign-form-content:not(.campaign-form-content--stacked) {
    justify-content: safe center;
  }
}

/* One at a time : scène centrée dans le form (comme page lead) ; scroll sur l’ancêtre `.builder-appearance-lead-sim-scroll`. */
.builder-split--appearance-preview
  #builder-appearance-lead-sim-form.campaign-form-content:not(.campaign-form-content--stacked)
  .lead-sequential-stage {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.builder-split--appearance-preview
  #builder-appearance-lead-sim-form:not(.campaign-form-content--stacked)
  .lead-sequential-stage
  > .field.field-appear {
  flex: 0 0 auto;
  max-height: none;
}

/* One at a time : scène centrée (page lead + simulation ; aperçu Appearance = scroll sur le panneau). */
#lead-form:not(.campaign-form-content--stacked),
#sim-form:not(.campaign-form-content--stacked) {
  align-items: center;
  justify-content: center;
}

.lead-sequential-stage,
.builder-appearance-sequential-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  align-self: stretch;
}

.lead-sequential-stage > .field.field-appear,
.builder-appearance-sequential-stage > .field.field-appear {
  width: min(560px, 100%);
  margin: 0;
}

/* One-at-a-time : après sortie RDV (« Back to questions »), pile verticale centrée comme en stacked. */
#lead-form:not(.campaign-form-content--stacked) .lead-sequential-stage:has(> .field:nth-child(2)),
#sim-form:not(.campaign-form-content--stacked) .lead-sequential-stage:has(> .field:nth-child(2)) {
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  overflow-y: auto;
}

/* Aperçu Appearance : un seul port de scroll (le panneau), pas de scroll imbriqué sur la scène. */
.builder-split--appearance-preview
  #builder-appearance-lead-sim-form:not(.campaign-form-content--stacked)
  .lead-sequential-stage:has(> .field:nth-child(2)) {
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  overflow: visible;
}

#lead-form:not(.campaign-form-content--stacked) .lead-sequential-stage:has(> .field:nth-child(2)) > .field.field-appear,
#sim-form:not(.campaign-form-content--stacked) .lead-sequential-stage:has(> .field:nth-child(2)) > .field.field-appear,
#builder-appearance-lead-sim-form:not(.campaign-form-content--stacked)
  .lead-sequential-stage:has(> .field:nth-child(2))
  > .field.field-appear {
  align-self: center;
  width: min(560px, 100%);
}

/* RDV manuel : calendrier toujours déplié (sans bouton « Book meeting »). */
.manual-booking-root--calendar-only .booking-panel {
  max-height: none;
  opacity: 1;
  transform: none;
  overflow: visible;
}

/* Aperçu Appearance one-at-a-time : le panneau calendrier ne doit pas clipper (max-height 1200px de `.booking-panel.is-open`). */
.builder-split--appearance-preview .manual-booking-root--calendar-only .booking-panel.is-open {
  max-height: none;
}

.builder-reference-prospect-field .builder-settings-combobox-mount {
  max-width: 100%;
  width: 100%;
}

.builder-reference-prospect-field .dash-stats-combobox {
  width: 100%;
}

/* Rangée « Prospect type » + bouton Continue côte à côte (aligné en bas, équilibre du regard). */
.builder-reference-prospect-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
}

.builder-reference-prospect-row__field {
  flex: 1 1 auto;
  min-width: 0;
}

.builder-reference-prospect-row__cta {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
  /* Aligner la hauteur du bouton sur le trigger combobox (38 px) plutôt que sur le CTA upload (34 px). */
  min-height: 38px;
}

.builder-reference-prospect-row__cta:disabled,
.builder-reference-prospect-row__cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 720px) {
  .builder-reference-prospect-row {
    flex-direction: column;
    align-items: stretch;
  }
  .builder-reference-prospect-row__cta {
    width: 100%;
  }
}

.builder-reference-prospect-other-wrap {
  margin-top: 4px;
}

@keyframes builderProspectOtherReveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes builderProspectOtherHide {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

#builder-prospect-type-other-wrap:not(.hidden) {
  animation: builderProspectOtherReveal 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #builder-prospect-type-other-wrap:not(.hidden) {
    animation: none;
  }
}

.builder-reference-prospect-other-wrap .ui-input {
  width: 100%;
  box-sizing: border-box;
}

.builder-prospect-other-hint-panel {
  margin: 8px 0 0;
}

#builder-prospect-type-other-hint-panel:not(.hidden):not(.builder-prospect-other-hint-panel--leave) {
  animation: builderProspectOtherReveal 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#builder-prospect-type-other-hint-panel.builder-prospect-other-hint-panel--leave:not(.hidden) {
  animation: builderProspectOtherHide 0.34s cubic-bezier(0.55, 0, 1, 0.45) both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #builder-prospect-type-other-hint-panel:not(.hidden):not(.builder-prospect-other-hint-panel--leave) {
    animation: none;
  }

  #builder-prospect-type-other-hint-panel.builder-prospect-other-hint-panel--leave:not(.hidden) {
    animation: none;
    opacity: 0;
  }
}

.builder-prospect-other-hint--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.builder-prospect-other-hint-lead {
  flex: 0 1 auto;
  max-width: 100%;
  color: var(--flow-text);
}

.builder-prospect-other-hint-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 0 1 auto;
}

.builder-prospect-other-hint--info .builder-prospect-other-hint-lead {
  color: var(--flow-muted);
}

.builder-prospect-other-hint--warn .builder-prospect-other-hint-lead {
  color: var(--flow-accent-overlay);
  font-weight: 600;
}

/* Même pattern que timeline : lien .option-tag + ui-tag.js — pas de <button> (styles globaux boutons). */
#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag {
  cursor: pointer;
  user-select: none;
}

/* Pastille en mode « danger » (rouge plein) avec texte blanc gras : signal fort pour suggérer
 * à l'utilisateur le type prospect le plus proche de sa saisie libre. Override des !important
 * de `.ui-tag` via une spécificité plus haute + `!important`. */
#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag,
#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag.ui-tag {
  background: var(--flow-danger) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag:hover,
#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag.ui-tag:hover {
  background: var(--flow-danger-hover, var(--flow-danger)) !important;
  color: #fff !important;
}

#builder-prospect-type-other-hint-actions a.builder-prospect-other-pick.option-tag:focus-visible {
  outline: 2px solid var(--flow-danger);
  outline-offset: 2px;
}

.builder-required-mark {
  color: var(--flow-danger);
  font-weight: 700;
}

@keyframes builder-field-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-7px);
  }
  30% {
    transform: translateX(7px);
  }
  45% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
}

.builder-field-shake {
  animation: builder-field-shake 0.48s ease-in-out both;
}

@media (prefers-reduced-motion: reduce) {
  .builder-field-shake {
    animation: none;
  }
}

.builder-settings-card .dash-stats-combobox {
  width: 100%;
}

/* Onglets customize : même `button.ui-button` que Reset (plein accent actif, `ui-button--muted` inactifs — cf. app.js). */
.builder-customize-toolbar .builder-customize-btn.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@keyframes builder-customize-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.builder-customize-page.builder-customize-page--anim-in {
  animation: builder-customize-page-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .builder-customize-page.builder-customize-page--anim-in {
    animation: none;
  }
}

@keyframes builder-left-pane-preview-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aperçu Appearance : opacité seule (pas de translateY) pour ne pas faire varier la hauteur scroll / la scrollbar. */
@keyframes builder-appearance-lead-sim-pane-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.builder-split--appearance-preview .builder-appearance-lead-sim-pane.builder-appearance-lead-sim-pane--anim-in {
  animation: builder-appearance-lead-sim-pane-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#builder-video-pane-default.builder-video-pane-default--anim-in {
  animation: builder-left-pane-preview-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .builder-split--appearance-preview .builder-appearance-lead-sim-pane.builder-appearance-lead-sim-pane--anim-in,
  #builder-video-pane-default.builder-video-pane-default--anim-in {
    animation: none;
  }
}

@keyframes builder-config-editor-tab-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#config-editor.builder-config-editor--tab-intro {
  animation: builder-config-editor-tab-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #config-editor.builder-config-editor--tab-intro {
    animation: none;
  }
}

#config-editor.has-video #config-placeholder.placeholder-card {
  flex-shrink: 0;
}

#timeline-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
  overflow: visible;
}

/* Liste timeline vide : message centré dans la zone sous la barre d’outils */
#timeline-list-wrap #questions.timeline-questions--empty {
  flex: 1;
  min-height: min(240px, 38vh);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 12px;
  box-sizing: border-box;
}

#timeline-list-wrap #questions.timeline-questions--empty .timeline-empty-state {
  margin: 0;
  max-width: 22rem;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

/* Référence (#title) au-dessus de la barre « Timeline items » : plus d’air qu’entre les autres blocs */
#timeline-list-wrap > .builder-behavior-reference-label + .timeline-page-toolbar {
  margin-top: 14px;
}

.timeline-page-toolbar {
  align-items: center;
  width: min(100%, 520px);
  margin-inline: auto;
}

.timeline-page-actions {
  justify-content: center;
  width: 100%;
}

.timeline-page-toolbar__title {
  margin: 0;
  text-align: center;
  width: 100%;
}

.option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

/* Paquets `.ui-option-tags` (`ui-option-tags.js`) : pastilles grises dès rendu (avant/après décor `ui-tag`) */
.ui-option-tags .option-tag {
  background: var(--flow-surface-2) !important;
  color: var(--flow-muted) !important;
}

.ui-option-tags .option-tag:hover {
  background: var(--flow-surface-3) !important;
  color: var(--flow-text) !important;
}

.ui-option-tags .modal-info-tags__icon {
  flex-shrink: 0;
  display: block;
  color: inherit;
  --iconify-icon-color: currentColor;
}

.ui-option-tags svg.modal-info-tags__icon {
  overflow: visible;
}

.option-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

/* Liens info reconnus : icône seule, sans pastille (surcharge .option-tag + .ui-tag) */
a.option-tag.option-tag--social-logo.ui-tag,
a.option-tag.option-tag--social-logo {
  padding: 0;
  min-width: 0;
  min-height: 24px;
  border-radius: 0;
  justify-content: center;
  line-height: 0;
  background: transparent !important;
  color: var(--flow-accent) !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
}

a.option-tag.option-tag--social-logo.ui-tag:hover,
a.option-tag.option-tag--social-logo:hover {
  background: transparent !important;
  opacity: 0.88;
}

a.option-tag.option-tag--social-logo .option-tag__brand-icon,
a.option-tag.option-tag--social-logo iconify-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
  --iconify-icon-color: currentColor;
}

a.option-tag.option-tag--social-logo svg.option-tag__brand-icon {
  overflow: visible;
}

/* Infobulle portail : le survol doit cibler l’ancre (iconify / SVG ne captent pas la souris). */
a.option-tag.option-tag--social-logo > * {
  pointer-events: none;
}

.option-tag button {
  background: transparent;
  border: 0;
  padding: 0;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
}

.timeline-track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 58px;
  height: 10px;
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.68);
  border: 1px solid rgba(88, 107, 133, 0.5);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
}

.timeline-markers {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.timeline-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--flow-accent), var(--flow-accent-overlay));
  z-index: 2;
}

.timeline-playhead {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--flow-accent);
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--flow-accent) 32%, transparent);
}

.timeline-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: var(--flow-accent);
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
  padding: 0 !important;
  line-height: 1 !important;
}

.timeline-marker iconify-icon,
.timeline-marker .iconify {
  pointer-events: none;
  width: 19.2px !important;
  height: 19.2px !important;
  font-size: 19.2px !important;
  color: var(--flow-accent) !important;
  display: block;
  line-height: 1;
}

.timeline-marker.question {
  background: #ffffff;
}

.timeline-marker.booking {
  background: #ffffff;
}

.timeline-marker.info {
  background: #ffffff;
}

.home-intro-masonry-video-frame .timeline-marker.info,
.home-intro-masonry-item-frame .timeline-marker.info,
.pricing-compare-card-video-frame .timeline-marker.info,
.home-hero-video-frame .timeline-marker.info {
  color: var(--flow-accent);
}

.timeline-marker.blink,
.timeline-marker.campaign-timeline-emphasis {
  animation: marker-blink 0.55s ease-out;
}

@keyframes marker-blink {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: none;
  }
  45%,
  55% {
    transform: translate(-50%, -50%) scale(1.25);
    box-shadow: 0 0 10px 3px
      color-mix(in srgb, var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 52%, transparent);
  }
}

/* Flash lecture vidéo : colonne titre + pastilles uniquement (pas icône / traits / actions).
   Halo `box-shadow` : zone rouge un peu plus large que la boîte, sans marge/padding (pas de saut de layout). */
#questions .q-row .q-row-main.blink {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  animation: q-row-main-blink 0.6s ease-out;
}

.q-row-kind-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  margin-right: 10px;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--flow-surface-3) !important;
  box-shadow: none !important;
  vertical-align: middle;
  padding: 0 !important;
  line-height: 1 !important;
}

.q-row-kind-icon iconify-icon {
  width: 34px !important;
  height: 34px !important;
  font-size: 34px !important;
  color: var(--flow-accent) !important;
  display: block;
  line-height: 1;
}

.q-row strong {
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}

/* Timeline list rows: two-column layout with right icon actions */
#questions {
  display: grid;
  --q-row-connector-gap: 58px;
  --q-row-connector-h: 50px;
  gap: var(--q-row-connector-gap);
}

#questions .q-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 12px;
  position: relative;
}

#questions .q-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  /* Centre le segment dans l’espace entre deux lignes (= `gap` de la grille). */
  top: calc(100% + (var(--q-row-connector-gap) - var(--q-row-connector-h)) / 2);
  width: 2px;
  height: var(--q-row-connector-h);
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--flow-danger) 78%, transparent) 0 5px,
    transparent 5px 10px
  );
  background-size: 2px 10px;
  animation: q-row-divider-dash 1.1s linear infinite;
  pointer-events: none;
  opacity: 0.95;
}

#questions .q-row .q-row-col--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#questions .q-row .q-row-main {
  min-width: 0;
  text-align: left;
  display: grid;
  gap: 6px;
}

@keyframes q-row-divider-dash {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 10px;
  }
}

#questions .q-row .q-row-title {
  text-align: left;
}

#questions .q-row .q-row-meta {
  justify-content: flex-start;
}

#questions .q-row .q-row-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
}

#questions .q-row .q-row-action-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--flow-surface-3) !important;
  color: var(--flow-accent) !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#questions .q-row .q-row-action-btn iconify-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  display: block;
  line-height: 1;
  color: var(--flow-accent) !important;
}

#questions .q-row .q-row-action-btn:hover {
  color: var(--flow-accent-overlay) !important;
  transform: translateY(-1px) !important;
}

#questions .q-row .q-row-action-btn.delete {
  color: var(--flow-danger) !important;
}

#questions .q-row .q-row-action-btn.delete iconify-icon {
  color: var(--flow-danger) !important;
}

#questions .q-row .q-row-action-btn.delete:hover {
  color: var(--flow-danger-hover) !important;
}

#questions .q-row .q-row-action-btn.delete:hover iconify-icon {
  color: var(--flow-danger-hover) !important;
}

#questions.builder-edit-loading {
  display: grid;
}

/* Édition `?editLeadId=` : masquer le vrai chrome le temps du skeleton (doublon avec #builder-edit-hydrate-chrome). */
#campaign-form.builder-edit-hydrating
  #timeline-list-wrap
  > .builder-behavior-reference-label:not(.builder-edit-sk-reference),
#campaign-form.builder-edit-hydrating #timeline-list-wrap > .timeline-page-toolbar:not(.builder-edit-sk-toolbar) {
  display: none !important;
}

.builder-edit-hydrate-chrome {
  display: grid;
  gap: 0;
  width: min(100%, 520px);
  margin-inline: auto;
}

.builder-edit-hydrate-chrome .builder-edit-sk-toolbar {
  margin-top: 14px;
  align-items: center;
}

.builder-edit-hydrate-chrome
  .builder-edit-sk-toolbar
  .builder-edit-sk-line--section-title {
  margin-inline: auto;
}

.builder-edit-sk-shimmer,
.builder-edit-sk-line,
.builder-edit-sk-pill,
.builder-edit-sk-action,
.builder-edit-sk-input,
.builder-edit-sk-btn {
  display: block;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--flow-surface-2) 88%, #ffffff) 0%,
    color-mix(in srgb, var(--flow-surface-3) 86%, #ffffff) 50%,
    color-mix(in srgb, var(--flow-surface-2) 88%, #ffffff) 100%
  );
  background-size: 200% 100%;
  animation: builder-edit-skeleton-pulse 1.05s ease-in-out infinite;
}

.builder-edit-sk-shimmer {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 999px !important;
  border: 1px solid var(--flow-surface-3) !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.builder-edit-sk-line--label {
  width: 7.5rem;
  height: 1.125rem;
  border-radius: 6px;
}

.builder-edit-sk-input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
}

.builder-edit-sk-line--section-title {
  width: 9.5rem;
  height: 1.25rem;
  border-radius: 6px;
  flex: 1 1 auto;
  min-width: 6rem;
}

.builder-edit-sk-btn {
  width: 5.5rem;
  height: 36px;
  border-radius: 999px;
  flex-shrink: 0;
}

.builder-edit-sk-line--title {
  width: 42%;
  height: 14px;
}

.builder-edit-sk-pill {
  width: 4.5rem;
  height: 28px;
  border-radius: 999px;
}

.builder-edit-sk-pill--short {
  width: 3rem;
}

.builder-edit-sk-action {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

#questions .q-row.builder-edit-sk-qrow {
  pointer-events: none;
}

#questions .q-row.builder-edit-sk-qrow .q-row-kind-icon.builder-edit-sk-shimmer iconify-icon {
  display: none;
}

@keyframes builder-edit-skeleton-pulse {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-edit-sk-shimmer,
  .builder-edit-sk-line,
  .builder-edit-sk-pill,
  .builder-edit-sk-action,
  .builder-edit-sk-input,
  .builder-edit-sk-btn {
    animation: none;
  }
}

/* Même composant `obviouslead-activity-indicator` que la page lead (voir app.js `setBuilderEditLeadHydrationActivity`). */
.video-frame.builder-edit-hydrating > *:not(.obviouslead-activity-host--video-frame) {
  opacity: 0 !important;
  pointer-events: none !important;
}

@keyframes q-row-main-blink {
  0%,
  100% {
    background: transparent;
    box-shadow: none;
  }
  50% {
    background: color-mix(in srgb, var(--flow-danger) 34%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--flow-danger) 45%, transparent),
      0 0 0 10px color-mix(in srgb, var(--flow-danger) 16%, transparent),
      0 8px 28px 2px color-mix(in srgb, var(--flow-danger) 32%, transparent);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #283445;
  border-radius: 8px;
}

.field a {
  color: #8fb4ff;
  text-decoration: none;
  font-weight: 600;
}

.field a:hover {
  text-decoration: underline;
}

.calendly-embed {
  width: 100%;
  min-width: 320px;
  height: 720px;
  border: 0;
  display: block;
  background: #0f141c;
  overflow: hidden;
}

.calendly-shell {
  width: 100%;
  border: 1px solid #2f3b4b;
  border-radius: 8px;
  overflow: hidden;
  background: #131a24;
}

.booking-field {
  width: min(760px, 100%);
}

#modal-info-url {
  flex: 1;
}

.info-tags-row {
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Timeline builder : hôte `option-tags` sans marge verticale type modale */
.q-row-meta.info-tags-row.option-tags {
  margin-top: 6px;
  margin-bottom: 0;
}

.choice-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Choix natifs (checkbox / radio hors ligne façon shadcn) : bordure et cases liées à l’accent configuré. */
#lead-form .choice-group > .choice-line,
#sim-form .choice-group > .choice-line {
  border-color: color-mix(in srgb, var(--flow-accent) 38%, var(--flow-surface-3, #e4e7ec)) !important;
}

#lead-form .choice-group input[type="checkbox"],
#lead-form .choice-group input[type="radio"],
#sim-form .choice-group input[type="checkbox"],
#sim-form .choice-group input[type="radio"] {
  accent-color: var(--flow-accent);
}

.choice-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid #2f3b4b;
  border-radius: 999px;
  background: #101823;
}

/* Radio façon shadcn/ui (composition item + libellé) — lead #lead-form + sim builder #sim-form */
#lead-form .campaign-radio-group,
#sim-form .campaign-radio-group {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

#lead-form .campaign-radio-group .campaign-radio-line,
#sim-form .campaign-radio-group .campaign-radio-line {
  position: relative;
  gap: 10px;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

#lead-form .campaign-radio-group .campaign-radio-line:hover,
#sim-form .campaign-radio-group .campaign-radio-line:hover {
  background: color-mix(in srgb, var(--flow-text) 6%, transparent);
}

#lead-form .campaign-radio-input,
#sim-form .campaign-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#lead-form .campaign-radio-input:focus-visible + .campaign-radio-indicator,
#sim-form .campaign-radio-input:focus-visible + .campaign-radio-indicator {
  box-shadow: 0 0 0 2px var(--flow-surface-1), 0 0 0 4px var(--flow-accent);
}

/* Bordure = `--obviouslead-control-border` (même token que checkbox modal, etc.) */
#lead-form .campaign-radio-indicator,
#sim-form .campaign-radio-indicator {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: var(--obviouslead-control-border-width) solid var(--obviouslead-control-border);
  background: transparent;
  position: relative;
}

#lead-form .campaign-radio-input:checked + .campaign-radio-indicator,
#sim-form .campaign-radio-input:checked + .campaign-radio-indicator {
  border-color: var(--flow-accent);
}

#lead-form .campaign-radio-input:checked + .campaign-radio-indicator::after,
#sim-form .campaign-radio-input:checked + .campaign-radio-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: var(--flow-accent);
}

#lead-form .campaign-radio-label,
#sim-form .campaign-radio-label {
  font-size: 14px;
  line-height: 1.3;
  color: inherit;
}

/* Checkbox façon shadcn/ui dans `.choice-group` (multi-choix) — lead + sim builder.
 * Même conteneur visuel que `.campaign-radio-line` ; indicateur carré coché en accent. */
#lead-form .choice-group .campaign-checkbox-line,
#sim-form .choice-group .campaign-checkbox-line {
  position: relative;
  gap: 10px;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

#lead-form .choice-group .campaign-checkbox-line:hover,
#sim-form .choice-group .campaign-checkbox-line:hover {
  background: color-mix(in srgb, var(--flow-text) 6%, transparent);
}

#lead-form .campaign-checkbox-input,
#sim-form .campaign-checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#lead-form .campaign-checkbox-input:focus-visible + .campaign-checkbox-indicator,
#sim-form .campaign-checkbox-input:focus-visible + .campaign-checkbox-indicator {
  box-shadow: 0 0 0 2px var(--flow-surface-1), 0 0 0 4px var(--flow-accent);
}

#lead-form .campaign-checkbox-indicator,
#sim-form .campaign-checkbox-indicator {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: var(--obviouslead-control-border-width) solid var(--obviouslead-control-border);
  background: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#lead-form .campaign-checkbox-input:checked + .campaign-checkbox-indicator,
#sim-form .campaign-checkbox-input:checked + .campaign-checkbox-indicator {
  background: var(--flow-accent);
  border-color: var(--flow-accent);
}

#lead-form .campaign-checkbox-input:checked + .campaign-checkbox-indicator::after,
#sim-form .campaign-checkbox-input:checked + .campaign-checkbox-indicator::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  box-sizing: border-box;
  border: solid var(--flow-on-accent, #fff);
  border-width: 0 2px 2px 0;
  transform: translateY(-1.5px) rotate(45deg);
  flex-shrink: 0;
}

#lead-form .campaign-checkbox-label,
#sim-form .campaign-checkbox-label {
  font-size: 14px;
  line-height: 1.3;
  color: inherit;
}

.placeholder-card {
  position: relative;
  min-height: 280px;
  background: transparent;
  border: 0;
  padding: 0;
}

/* La carte remplit le volet ; la crossfade aussi */
#config-placeholder.placeholder-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.placeholder-card .config-placeholder-crossfade {
  flex: 1;
  min-height: 280px;
  width: 100%;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0.3;
}

.placeholder-line {
  height: 14px;
  background: linear-gradient(90deg, #2a3342 25%, #3a4555 50%, #2a3342 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  width: 100%;
}

.placeholder-line.title {
  height: 20px;
  width: 60%;
}

.placeholder-line.short {
  width: 40%;
}

.placeholder-block {
  height: 80px;
  background: linear-gradient(90deg, #2a3342 25%, #3a4555 50%, #2a3342 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.placeholder-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.placeholder-btn {
  height: 38px;
  width: 120px;
  background: linear-gradient(90deg, #2a3342 25%, #3a4555 50%, #2a3342 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.upload-cta {
  margin-top: 12px;
}

.hidden {
  display: none !important;
}

@keyframes settings-spin {
  to {
    transform: rotate(360deg);
  }
}

.nav-auth-user {
  display: flex;
  align-items: center;
  overflow: visible;
}

.nav-user-wrap {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.nav-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--flow-surface-2);
  color: var(--flow-accent);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.nav-user-avatar.has-photo {
  background-color: #21262f;
  color: transparent;
  font-size: 0;
}

.nav-user-avatar.has-photo:hover {
  filter: brightness(1.08);
}

.nav-user-avatar:hover:not(.has-photo) {
  background: var(--flow-surface-2);
  color: var(--flow-accent);
}

.nav-user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #181c23;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 350;
}

.nav-user-menu a,
.nav-user-menu button.nav-user-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.nav-user-menu a {
  border: none;
  background: transparent;
  color: #e5e7eb;
}

.nav-user-menu a:hover {
  background: #262d38;
  color: #fff;
}

.settings-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  align-items: baseline;
}

.settings-dl dt {
  margin: 0;
  color: #9ba8bc;
  font-size: 14px;
}

.settings-dl dd {
  margin: 0;
  font-size: 15px;
}

.settings-page.stack.gap {
  gap: 20px;
  max-width: min(1120px, 100%);
  padding-bottom: 5rem;
}

/* Bio à gauche, photo à droite : même hauteur de ligne ; la pile gauche s’étire et `space-between` répartit l’espace libre entre les 3 cartes (sans changer leur contenu). */
.settings-profile-bio-split {
  display: grid;
  grid-template-columns: minmax(min(100%, 280px), 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
  min-width: 0;
}

.settings-profile-bio-split > .settings-profile-bio-split-left,
.settings-profile-bio-split > .settings-section {
  min-width: 0;
}

.settings-profile-bio-split > #settings-profile-photo {
  align-self: stretch;
  min-height: 0;
}

.settings-profile-bio-split-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .settings-profile-bio-split {
    grid-template-columns: 1fr;
  }

  .settings-profile-bio-split-left {
    align-self: stretch;
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
  }

  .settings-profile-bio-split > #settings-profile-photo {
    align-self: stretch;
  }
}

/* Colonne gauche : formulaires alignés depuis le haut dans chaque carte ; espacement vertical entre les 3 sections = `space-between` sur la colonne étirée (desktop). */
.settings-profile-bio-split-left .settings-section form {
  justify-content: flex-start;
  min-height: 0;
  gap: 10px;
}

/* Paragraphes de feedback vides (aria-live) : hors flux → plus de « trou » sous Save (flex gap). */
.settings-profile-bio-split-left .settings-section form > p.muted:empty {
  display: none;
}

/* Follow-up : « Days until… » + input sur une ligne, centrage vertical relatif. */
#settings-followup-form > label:first-of-type {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Disponibilité : chip jour — label + checkbox alignés au milieu vertical. */
label.settings-weekday-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.settings-section h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.settings-section-subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--flow-text, #15171c);
}

.settings-email-change-form {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--flow-surface-3, #e4e7ec);
}

/* Account (bento) : espacement interne + carte gauche = hauteur colonne Security / Delete */
.settings-section-pair-grid--bento > .settings-section:first-child.stack.gap {
  gap: 22px;
}

.settings-section-pair-grid--bento > .settings-section:first-child .settings-account-email-summary {
  gap: 10px;
}

.settings-section-pair-grid--bento > .settings-section:first-child .settings-email-change-form {
  padding-top: 20px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

@media (min-width: 900px) {
  .settings-section-pair-grid--bento > .settings-section:first-child.stack.gap {
    gap: 20px;
  }

  .settings-section-pair-grid--bento #settings-email-change-form {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-evenly;
    align-content: stretch;
    min-height: 0;
    height: 100%;
    gap: 0;
  }
}

.settings-section-pair-grid--bento #settings-email-change-form {
  gap: 18px;
}

.settings-section-pair-grid--bento #settings-email-change-form > label {
  gap: 8px;
}

/* Récap e-mail (Account) : texte centré horizontalement dans la carte. */
.settings-account-email-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.settings-account-email-summary .settings-account-email-value,
.settings-account-email-summary .settings-account-email-note {
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* Paires Account + Security : cartes même hauteur (sauf variante `--bento`, hauteur au contenu). Formulaires en grille stricte. */
.settings-section-pair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

/* Bento : pas de margin-top global `.card` (sinon Account décalé de 18px vs la colonne droite). */
.settings-section-pair-grid--bento > .card,
.settings-section-pair-grid--bento > .settings-section-pair-bento-col > .card {
  margin-top: 0;
}

/* Bento : mobile = hauteur au contenu ; desktop = colonnes même hauteur (Account = Security + Delete). */
.settings-section-pair-grid.settings-section-pair-grid--bento {
  align-items: start;
}

@media (min-width: 900px) {
  .settings-section-pair-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .settings-section-pair-grid.settings-section-pair-grid--bento {
    align-items: stretch;
  }
}

.settings-section-pair-grid > .settings-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.settings-section-pair-grid.settings-section-pair-grid--bento > .settings-section:first-child {
  height: auto;
  align-self: start;
  width: 100%;
  min-width: 0;
}

@media (min-width: 900px) {
  .settings-section-pair-grid.settings-section-pair-grid--bento > .settings-section:first-child {
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }
}

/* Bento : Account (gauche) | colonne droite Security + Delete empilés, même largeur que l’ancienne grille 2 col. */
.settings-section-pair-grid--bento > .settings-section-pair-bento-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: start;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .settings-section-pair-grid--bento > .settings-section-pair-bento-col {
    gap: 24px;
    align-self: stretch;
    height: 100%;
    min-height: 0;
  }
}

.settings-section-pair-grid--bento > .settings-section-pair-bento-col > .settings-section {
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  margin-top: 0;
  flex: 0 0 auto;
}

.settings-section-pair-grid--bento > .settings-section-pair-bento-col > .settings-section.stack.gap {
  gap: 20px;
}

.settings-section-pair-grid--bento #settings-password-form,
.settings-section-pair-grid--bento #settings-delete-account-form {
  gap: 18px;
}

.settings-section-pair-grid .settings-section form > p.muted:empty {
  display: none;
}

.settings-section-pair-grid .settings-dl {
  align-items: center;
}

/* Grille dédiée (ids > règle globale `form { display:flex }`) : libellé au-dessus, champ pleine largeur, pas de CTA éjecté en bas. */
#settings-email-change-form,
#settings-password-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

#settings-password-form > label,
#settings-password-form > button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Security / Delete / changement d’e-mail (Account) : titre + message danger à droite */
.settings-password-section-head,
.settings-delete-section-head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.settings-password-section-head h2,
.settings-delete-section-head h2,
.settings-password-section-head .settings-section-subtitle {
  margin: 0;
  flex-shrink: 0;
}

.settings-password-inline-msg {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--flow-danger);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
}

.settings-password-inline-msg.is-visible {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0s;
}

#settings-email-change-form > label,
#settings-password-form label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text, #15171c);
}

#settings-email-change-form > label .muted,
#settings-password-form label .muted {
  font-weight: 500;
}

#settings-password-form label .settings-password-label-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#settings-password-form label .settings-password-label-row > span:first-child {
  min-width: 0;
}

#settings-password-form label .settings-password-label-row .muted {
  flex-shrink: 0;
  text-align: right;
}

#settings-password-form .settings-password-field-wrap {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

#settings-password-form .settings-password-field-wrap input {
  padding-right: 44px;
}

#settings-email-change-form > label input,
#settings-password-form label input {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#settings-email-change-submit,
#settings-password-submit {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
}

#settings-delete-account-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

#settings-delete-account-form > .settings-delete-confirm-label {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

#settings-delete-account-form .settings-delete-confirm-label input {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#settings-delete-account-form button[type="submit"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
}

/* Ancrage (#settings-followup-schedule) : décalage sous la navbar sticky */
#settings-followup-schedule {
  scroll-margin-top: 80px;
}

@keyframes settings-bio-section-highlight {
  0%,
  100% {
    background-color: var(--flow-surface-1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-accent) 0%, transparent);
    outline-color: transparent;
  }
  45% {
    background-color: color-mix(in srgb, var(--flow-accent) 10%, var(--flow-surface-1));
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--flow-accent) 48%, transparent),
      0 0 0 14px color-mix(in srgb, var(--flow-accent) 16%, transparent);
    outline-color: color-mix(in srgb, var(--flow-accent) 72%, transparent);
  }
}

.settings-page #settings-bio-section {
  scroll-margin-top: 80px;
  background: var(--flow-surface-1);
  border: 1px solid color-mix(in srgb, var(--flow-surface-3) 88%, transparent);
  border-radius: 16px;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    outline-color 0.35s ease;
}

#settings-bio-section.is-section-highlighted {
  position: relative;
  z-index: 2;
  outline: 2px solid transparent;
  outline-offset: 3px;
  animation: settings-bio-section-highlight 1.15s cubic-bezier(0.22, 1, 0.36, 1) 2;
}

.settings-page #settings-preview-add-bio {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #settings-bio-section.is-section-highlighted {
    animation: none;
    background-color: color-mix(in srgb, var(--flow-accent) 10%, var(--flow-surface-1));
    outline: 2px solid color-mix(in srgb, var(--flow-accent) 72%, transparent);
    outline-offset: 3px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--flow-accent) 48%, transparent),
      0 0 0 8px color-mix(in srgb, var(--flow-accent) 14%, transparent);
  }
}

#settings-bio-section.stack.gap {
  gap: 18px;
}

#settings-bio-section > p.muted {
  margin: 0;
  line-height: 1.55;
}

#settings-profile-form {
  gap: 20px !important;
}

#settings-bio-section .settings-bio-meta {
  margin: 0;
}

#settings-bio-section .settings-bio-meta.settings-bio-meta--near-limit {
  color: var(--flow-danger) !important;
}

#settings-bio-section .settings-btn-save {
  margin-top: 6px;
}

#settings-followup-schedule.stack.gap {
  gap: 18px;
}

#settings-followup-schedule > p.muted {
  margin: 0;
  line-height: 1.55;
}

#settings-followup-form {
  gap: 20px !important;
}

#settings-followup-form > label:first-of-type {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

#settings-followup-form .settings-followup-weekdays-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#settings-followup-schedule .settings-btn-save {
  margin-top: 6px;
}

#settings-booking-availability-section {
  scroll-margin-top: 80px;
}

#settings-booking-availability-section.stack.gap {
  gap: 18px;
}

#settings-booking-availability-section > p.muted {
  margin: 0;
  line-height: 1.55;
}

#settings-booking-availability-form {
  gap: 22px !important;
}

#settings-booking-availability-form .settings-availability-fieldset.stack.gap {
  gap: 14px;
}

#settings-booking-availability-section .settings-availability-legend {
  margin-bottom: 12px;
}

#settings-booking-availability-section .settings-weekday-grid {
  gap: 12px 16px;
}

#settings-booking-availability-section .settings-availability-hours-row {
  gap: 16px 18px;
  row-gap: 20px;
}

#settings-booking-availability-section .settings-availability-time-field.stack.gap {
  gap: 10px;
}

#settings-booking-availability-section .settings-btn-save {
  margin-top: 6px;
}

.settings-availability-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.settings-availability-legend,
.settings-preview-label {
  padding: 0;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

/* Libellés des deux aperçus (hero + RDV) : centrés sur la colonne */
.settings-photo-preview-grid .settings-preview-label {
  text-align: center;
  width: 100%;
  margin-bottom: 12px;
}

.settings-weekday-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
}

.settings-weekday-grid .obviouslead-checkbox-line {
  margin: 0;
}

.settings-weekday-grid .obviouslead-checkbox-label {
  font-size: 14px;
}

.settings-availability-hours-label {
  margin: 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}

.settings-availability-hours-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.settings-availability-time-field {
  min-width: 0;
}

.settings-availability-time-heading {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

.settings-availability-combobox-mount .dash-stats-combobox {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.settings-availability-combobox-mount .dash-stats-combobox-trigger {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: space-between;
}

.settings-availability-combobox-mount .dash-stats-combobox-listbox {
  max-height: min(55vh, 320px);
}

.settings-code {
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #12171f;
  border: 1px solid #262d38;
}

.settings-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.settings-dl-account {
  grid-template-columns: minmax(7.5rem, 32%) minmax(0, 1fr);
}

.small-print {
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.settings-bio-meta {
  margin: -6px 0 0;
  font-size: 13px;
}

.settings-photo-preview-grid {
  display: grid;
  /* Une colonne : le panneau RDV (photo + flatpickr) profite de la largeur du main settings (~1120px max). */
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* Skeleton : même gabarit que la carte réelle (titre → toolbar → grille d’aperçus). Masqué via `.hidden` + fillForm `finally`. */
.settings-profile-photo-skeleton {
  width: 100%;
  min-width: 0;
  gap: 10px;
}

.settings-profile-photo-skeleton .dash-skeleton-line {
  display: block;
}

.settings-profile-photo-skeleton-heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}

.settings-profile-photo-skeleton-title-line {
  width: 48%;
  max-width: 220px;
  min-height: 18px;
}

.settings-profile-photo-skeleton-btn {
  display: inline-block;
  min-height: 38px;
  width: min(190px, 48%);
  border-radius: var(--obviouslead-button-border-radius, 999px);
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  flex-shrink: 0;
}

.settings-profile-photo-skeleton-btn--muted {
  width: min(160px, 44%);
  opacity: 0.88;
}

.settings-profile-photo-skeleton-hint-line {
  width: 92%;
  max-width: 460px;
  min-height: 13px;
}

.settings-profile-photo-skeleton-preview-caption {
  width: min(260px, 72%);
  min-height: 11px;
  margin: 0 0 8px;
}

.settings-profile-photo-skeleton-hero-photo {
  display: block;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  aspect-ratio: 260 / 446;
  min-height: 140px;
  max-height: min(400px, 52vh);
  border-radius: 0;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  box-sizing: border-box;
}

.settings-profile-photo-skeleton-hero-title {
  min-height: 20px;
  width: min(200px, 70%);
  margin: 0;
}

.settings-profile-photo-skeleton-hero-line {
  min-height: 12px;
  width: 94%;
  margin: 0;
}

.settings-profile-photo-skeleton-hero-line--short {
  width: 64%;
}

.settings-profile-photo-skeleton-booking {
  min-height: min(240px, 38vh);
  width: 100%;
  border-radius: 8px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.settings-photo-preview-col {
  min-width: 0;
}

.settings-preview-frame {
  border: 1px solid #262d38;
  border-radius: 10px;
  padding: 12px;
  background: #12171f;
}

/* Même disposition que #campaign-lead-hero (campaign-form-pane--lead-empty). */
.settings-preview-frame--header .settings-preview-lead-hero.manual-booking-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.settings-preview-frame--header .settings-preview-lead-hero-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: center;
}

.settings-preview-frame--header .settings-preview-lead-hero-photo-pane {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  max-height: min(446px, 58vh);
  border: 1px solid var(--flow-surface-3, #2a3342);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--flow-surface-2, #f1f5f9) 90%, var(--flow-text) 5%);
}

/* Réserve la hauteur 260×446 : le fill est en absolute et ne participe pas au flux */
.settings-preview-frame--header .settings-preview-lead-hero-photo-pane::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 260 / 446;
  pointer-events: none;
}

.settings-preview-frame--header .settings-preview-lead-hero-photo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  max-height: none;
  aspect-ratio: unset;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.settings-preview-frame--header .settings-preview-lead-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.settings-preview-frame--header .settings-preview-lead-hero-bio-col {
  display: block;
  width: 100%;
  min-width: 0;
}

.settings-preview-frame--header .settings-preview-lead-hero-name {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--flow-text);
  text-align: left;
  width: 100%;
}

.settings-preview-frame--header .settings-preview-lead-hero-bio {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--flow-text) 82%, var(--flow-muted) 18%);
  text-align: left;
  width: 100%;
}

@media (max-width: 640px) {
  .settings-preview-frame--header .settings-preview-lead-hero.manual-booking-layout {
    grid-template-columns: 1fr;
  }

  .settings-preview-frame--header .settings-preview-lead-hero-photo-pane {
    max-height: min(380px, 50vh);
  }

  .settings-preview-frame--header .settings-preview-lead-hero-text-col {
    align-items: flex-start;
  }
}

.settings-preview-frame--booking .settings-preview-booking-pane {
  min-height: 0;
}

.settings-preview-frame--booking {
  width: 100%;
  min-width: 0;
}

#settings-manual-booking-mount {
  width: 100%;
  min-width: 0;
}

.settings-preview-manual-layout {
  display: grid;
  width: 100%;
  min-width: 0;
  /* Moins de largeur fixée sur la photo → plus d’espace pour le calendrier dans l’aperçu settings. */
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 640px) {
  .settings-preview-manual-layout {
    grid-template-columns: 1fr;
  }

  .settings-preview-frame--booking .settings-preview-manual-layout .creator-photo-fill {
    min-height: 180px;
  }
}

.settings-preview-frame--booking .creator-photo-fill {
  min-height: 160px;
  border-radius: 8px;
}

.settings-mock-cal-wrap {
  border: 1px solid #2f3b4b;
  border-radius: 10px;
  overflow: hidden;
  background: #131a24;
}

.settings-mock-cal {
  padding: 8px 8px 6px;
}

.settings-mock-cal-month {
  font-size: 12px;
  text-align: center;
  margin: 0 0 8px;
  color: #c8d2e3;
}

.settings-mock-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-size: 9px;
  color: #9ba8bc;
  text-align: center;
  margin-bottom: 4px;
}

.settings-mock-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.settings-mock-day {
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
  color: #e5e7eb;
}

.settings-mock-day.is-muted {
  visibility: hidden;
}

.settings-mock-controls {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #2f3b4b;
  border-radius: 10px;
  background: #0f141c;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Aperçu paramètres : contrôles inactifs mais rendu identique au lead (pas de grisage natif `disabled`). */
.settings-mock-controls .dash-stats-combobox-trigger:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

.settings-mock-controls .booking-type-btn.ui-button:disabled {
  opacity: 1 !important;
  cursor: default !important;
}

.settings-mock-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #9ba8bc;
}

.settings-mock-select {
  padding: 6px 8px;
  font-size: 12px;
  opacity: 0.85;
}

.settings-mock-types .booking-type-btn {
  font-size: 11px;
  padding: 8px 6px;
}

.settings-fake-visio-link {
  cursor: default;
}

.settings-photo-pan-surface {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.settings-photo-pan-surface.is-dragging {
  cursor: grabbing;
}

.settings-photo-actions {
  margin-top: 4px;
}

/* Photo de profil : boutons + consigne cadrage, centrés ; plus d’air sous la barre avant les aperçus */
.settings-photo-toolbar {
  align-items: center;
  text-align: center;
  padding-bottom: 24px;
  margin-bottom: 8px;
}

.settings-photo-toolbar .settings-inline-actions {
  justify-content: center;
}

.settings-photo-drag-hint {
  max-width: 42em;
}

.settings-btn-muted {
  background: transparent !important;
  border-color: #3d4b5f !important;
  color: #9ba8bc !important;
}

.settings-btn-muted:hover {
  border-color: #5a6b82 !important;
  color: #e5e7eb !important;
}

.settings-btn-save {
  background: var(--flow-accent) !important;
  border: 1px solid var(--flow-accent-overlay) !important;
  color: #fff !important;
}

.settings-btn-save:hover {
  filter: brightness(1.06);
}

.settings-danger-zone {
  border-color: #5c2d2d;
}

.campaign-page {
  background: linear-gradient(135deg, #0a0e14 0%, #101820 100%);
  min-height: 100vh;
}

/* Avant `init()` (fetch JSON) : masque la coquille lead pour éviter un flash si 404 / erreur. */
body.campaign-page--shell-pending main.campaign-split {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Lead supprimé ou slug inconnu (404) : plein écran, textes alignés page lead publique */
body.campaign-page--not-found {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 48px);
}

body.campaign-page--not-found .campaign-not-found {
  width: 100%;
  max-width: 440px;
}

body.campaign-page--not-found .campaign-not-found__inner {
  text-align: center;
  color: var(--flow-text);
}

body.campaign-page--not-found .campaign-not-found__brand {
  margin: 0 auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.campaign-page--not-found .campaign-not-found__logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: min(180px, 70vw);
  object-fit: contain;
}

body.campaign-page--not-found .campaign-not-found__title {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 650;
  line-height: 1.2;
  color: var(--flow-accent);
}

body.campaign-page--not-found .campaign-not-found__text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--flow-muted);
}

body.campaign-page--not-found .campaign-not-found__text code {
  font-size: 0.9em;
  padding: 0.12em 0.35em;
  border-radius: 6px;
  background: var(--flow-surface-3);
  color: var(--flow-accent);
}

body.campaign-page--not-found .campaign-not-found__actions {
  margin: 24px 0 0;
}

body.campaign-page--not-found a.campaign-not-found__home.ui-button {
  min-width: 10.5rem;
}

body.campaign-page--not-found a.campaign-not-found__home.ui-button:hover {
  color: var(--flow-on-accent);
}

/*
 * Page lead : flex au lieu de grid seule pour éviter les bugs de placement
 * (grid-column explicite pouvant créer une 2ᵉ ligne → panneau réduit en bas).
 */
main.split.campaign-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 100vh;
  height: 100vh;
  box-sizing: border-box;
}

main.split.campaign-split > .video-pane,
main.split.campaign-split > .form-pane {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
}

main.split.campaign-split.campaign-split--video-right {
  flex-direction: row-reverse;
}

main.split.campaign-split .video-pane {
  border-right: 1px solid var(--flow-surface-3, #2a3342);
  border-left: none;
}

main.split.campaign-split.campaign-split--video-right .video-pane {
  border-right: none;
  border-left: 1px solid var(--flow-surface-3, #2a3342);
}

.campaign-form-pane {
  position: relative;
  background: var(--flow-surface-1);
  display: flex;
  flex-direction: column;
  /* Un seul scroll sur `#lead-form` : évite une 2e barre sur le volet quand une question apparaît. */
  overflow: hidden;
  min-height: 0;
}

body.campaign-page--lead-outro main.split.campaign-split {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  height: auto !important;
  min-height: 100vh;
  max-height: none !important;
  overflow: visible !important;
}

body.campaign-page--lead-outro main.split.campaign-split > .video-pane {
  display: none !important;
}

body.campaign-page--lead-outro main.split.campaign-split > .form-pane,
body.campaign-page--lead-outro main.split.campaign-split > .form-pane.campaign-form-pane {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  height: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  border-radius: 0 !important;
  max-height: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.campaign-page--lead-outro main.split.campaign-split .form-pane.campaign-form-pane::before {
  display: none !important;
}

body.campaign-page--lead-outro .campaign-form-pane {
  justify-content: center;
  align-items: center;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 4vw, 40px);
  overflow-y: auto;
  background: var(--flow-surface-1) !important;
}

.campaign-lead-outro {
  width: 100%;
  max-width: min(960px, 100%);
  margin-inline: auto;
  text-align: center;
}

.campaign-lead-outro-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .campaign-lead-outro-columns {
    grid-template-columns: 1fr;
  }
}

.campaign-lead-outro-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.campaign-lead-outro-col--right .campaign-lead-outro-lead {
  margin-top: 0;
}

.campaign-lead-outro-brand {
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.campaign-lead-outro-logo {
  display: block;
  width: auto;
  height: 36px;
  max-width: min(168px, 60vw);
  object-fit: contain;
}

.campaign-lead-outro-title {
  margin: 0 0 16px;
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--flow-text);
}

.campaign-lead-outro-title-sub {
  display: block;
  margin-top: 0.2em;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--flow-text);
}

.campaign-lead-outro-appointment {
  margin: 8px 0 0;
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.campaign-lead-outro-appointment-intro {
  margin: 0 0 10px;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--flow-text);
}

.campaign-lead-outro-appointment-datetime {
  margin: 0 0 12px;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--flow-danger);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}

.campaign-lead-outro-appointment-datetime-date,
.campaign-lead-outro-appointment-datetime-time {
  display: block;
  text-align: center;
}

.campaign-lead-outro-appointment-detail {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(0.95rem, 2.1vw, 1rem);
  line-height: 1.4;
  color: var(--flow-text);
}

.campaign-lead-outro-appointment-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--flow-muted);
}

.campaign-lead-outro-appointment-icon iconify-icon {
  display: block;
  --iconify-icon-color: currentColor;
}

.campaign-lead-outro-appointment-detail-text {
  text-align: center;
  word-break: break-word;
}

a.campaign-lead-outro-appointment-visio-link {
  font-weight: 600;
  color: var(--flow-accent) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.campaign-lead-outro-appointment-visio-link:hover {
  color: var(--flow-accent-overlay) !important;
}

.campaign-lead-outro-lead {
  margin: 0 0 24px;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--flow-text);
}

.campaign-lead-outro-body {
  margin: 0 0 28px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--flow-muted);
}

a.campaign-lead-outro-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  background: var(--flow-accent);
  color: #fff !important;
  border: 0;
  box-shadow: none;
  transition: background-color 0.18s ease, transform 0.16s ease;
}

a.campaign-lead-outro-cta:hover {
  background: var(--flow-accent-overlay);
  transform: translateY(-1px);
}

.campaign-header {
  position: relative;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--flow-surface-3);
}

/* Avant la 1ère question / RDV / lien : bloc créateur centré dans le volet formulaire. */
/*
 * Fond : pas de transition `background-color` depuis `--flow-surface-1` global (#fff) → couleur lead
 * (flash blanc perceptible avant le JSON). Même défaut que `getPublicCampaignLeadPageDefaults().appearance.pageBackground`
 * jusqu’à `campaign-lead-theme-ready`, puis `var(--flow-surface-1)` aligné sur l’API (comme l’activity indicator : couleur cible, pas de fondu depuis une teinte fausse).
 */
body.campaign-page:not(.campaign-lead-theme-ready) .campaign-form-pane.campaign-form-pane--lead-empty {
  background-color: #f8fafc;
  transition: none;
}

.campaign-form-pane.campaign-form-pane--lead-empty {
  justify-content: center;
  align-items: center;
  /* Aucun scroll / rail dans le volet tant que le formulaire est vide. */
  overflow: hidden;
  scrollbar-gutter: auto;
  background-color: var(--flow-surface-1);
  transition: none;
}

/* Le formulaire est hors layout tant qu’il n’y a pas de champs (sinon `scrollbar-gutter: stable` + overflow laissent une bande). */
.campaign-form-pane.campaign-form-pane--lead-empty #lead-form.campaign-form-content {
  display: none !important;
  flex: unset !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  scrollbar-gutter: unset !important;
  pointer-events: none !important;
}

.campaign-form-pane.campaign-form-pane--lead-empty .campaign-header {
  /* Annule le bloc « Final palette enforcement » (.campaign-header { background … !important }) : sinon un rectangle gris au centre pendant le chargement. */
  background: transparent !important;
  border-bottom: none;
  padding: clamp(20px, 4vh, 32px) 20px;
  text-align: left;
  width: 100%;
  max-width: min(844px, 100%);
  box-sizing: border-box;
  opacity: 1;
  transition: opacity var(--campaign-header-fade-duration, 0.28s) cubic-bezier(0.33, 0.86, 0.22, 1);
}

.campaign-form-pane.campaign-form-pane--lead-empty .campaign-header.campaign-header--fading-out {
  opacity: 0;
}

/* Page lead (#lead-form) : en-tête créateur uniquement avant la 1ère interaction ; masqué pendant questions / envoi. */
body.campaign-page:has(#lead-form) .campaign-form-pane:not(.campaign-form-pane--lead-empty) .campaign-header {
  display: none !important;
}

/* Empilement hero / squelette (même cellule grille — le squelette masque le trou tant que le hero est [hidden]). */
.campaign-form-pane--lead-empty .campaign-lead-hero-stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  min-width: 0;
  align-self: center;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-stack > .campaign-lead-hero,
.campaign-form-pane--lead-empty .campaign-lead-hero-stack > .campaign-lead-hero-skeleton {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  min-width: 0;
}

.campaign-lead-hero-skeleton.hidden {
  display: none !important;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton.manual-booking-layout {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-photo {
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  aspect-ratio: 260 / 446;
  min-height: 160px;
  max-height: min(446px, 58vh);
  border-radius: 10px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-line {
  height: 14px;
  border-radius: 8px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-line--title {
  width: min(220px, 46%);
}

.campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-line--short {
  width: min(320px, 88%);
}

@media (prefers-reduced-motion: reduce) {
  .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-photo,
  .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-line {
    animation: none;
    opacity: 0.72;
  }
}

/* Hero : fondu après le volet (le hero reste [hidden] jusqu’à la fin du fondu du fond). */
.campaign-lead-hero {
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.48s cubic-bezier(0.33, 0.86, 0.22, 1);
}

.campaign-lead-hero.campaign-lead-hero--visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .campaign-lead-hero {
    transition: none;
  }

  .campaign-lead-hero.campaign-lead-hero--visible {
    opacity: 1;
  }
}

.campaign-form-pane--lead-empty .campaign-lead-hero.manual-booking-layout {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.campaign-form-pane--lead-empty .campaign-lead-hero:has(.campaign-lead-hero-bio-col.hidden) {
  grid-template-columns: minmax(200px, 260px);
  justify-content: center;
  margin-inline: auto;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: center;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-photo-pane {
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  border: 1px solid var(--flow-surface-3, #2a3342);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--flow-surface-2, #f1f5f9) 90%, var(--flow-text) 5%);
}

/* Même proportion que l’aperçu RDV settings (~260×446), échelle avec la colonne. */
.campaign-form-pane--lead-empty .campaign-lead-hero-photo-fill {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 260 / 446;
  min-height: 160px;
  max-height: min(446px, 58vh);
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  text-align: left;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-bio-col {
  display: block;
  width: 100%;
  min-width: 0;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-name {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--flow-text);
  text-align: left;
  width: 100%;
}

.campaign-form-pane--lead-empty .campaign-lead-hero-bio {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  /* Même base que le nom (`--flow-text`) : la couleur « Text » du lead pilote bien la bio (pas seulement `--flow-muted`). */
  color: color-mix(in srgb, var(--flow-text) 82%, var(--flow-muted) 18%);
  text-align: left;
  width: 100%;
}

@media (max-width: 640px) {
  .campaign-form-pane--lead-empty .campaign-lead-hero.manual-booking-layout,
  .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton.manual-booking-layout {
    grid-template-columns: 1fr;
  }

  .campaign-form-pane--lead-empty .campaign-lead-hero-photo-fill,
  .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-photo {
    min-height: 140px;
    max-height: min(380px, 50vh);
  }

  .campaign-form-pane--lead-empty .campaign-lead-hero-text-col {
    align-items: flex-start;
  }
}

/* Logo uploadé affiché uniquement en surimpression vidéo — élément historique gardé masqué */
.campaign-lead-logo.hidden {
  display: none !important;
}

.campaign-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.creator-info {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.creator-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3342 0%, #1d2633 100%);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

/* Chargement photo (Settings) — voile + cercle CSS */
.settings-page .creator-photo.settings-photo-preview--loading,
.settings-page .creator-photo-fill.settings-photo-preview--loading,
.settings-page .nav-user-avatar.settings-photo-preview--loading {
  position: relative;
}

.settings-page .creator-photo.settings-photo-preview--loading::before,
.settings-page .creator-photo-fill.settings-photo-preview--loading::before,
.settings-page .nav-user-avatar.settings-photo-preview--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 20, 28, 0.42);
  z-index: 1;
}

.settings-page .creator-photo.settings-photo-preview--loading::after,
.settings-page .creator-photo-fill.settings-photo-preview--loading::after,
.settings-page .nav-user-avatar.settings-photo-preview--loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 2;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--flow-muted) 45%, transparent);
  border-top-color: var(--flow-accent);
  animation: settings-spin 0.65s linear infinite;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .settings-page .creator-photo.settings-photo-preview--loading::after,
  .settings-page .creator-photo-fill.settings-photo-preview--loading::after,
  .settings-page .nav-user-avatar.settings-photo-preview--loading::after {
    animation: none;
  }
}

.creator-text {
  flex: 1;
  min-width: 0;
}

.creator-bio {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--flow-muted);
  line-height: 1.4;
}

.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
}

.profile-links .profile-link {
  font-size: 13px;
  color: #8fb4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-links .profile-link:hover {
  color: #bcd4ff;
}

.settings-social-fieldset {
  border: 1px solid #262d38;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin: 0;
}

.settings-social-fieldset legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

.settings-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 14px;
}

.profile-no-video {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a2332 0%, #0f151d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.campaign-form-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Page lead publique (#lead-form) : barre invisible ; `safe center` centre le bloc quand il tient dans le port,
 * et repasse en alignement haut si débordement (évite le bas rogné avec `justify-content: center` seul).
 */
body.campaign-page #lead-form.campaign-form-content {
  justify-content: flex-start;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Stacked : padding vertical géré en JS (`applyStackVerticalAnchor`) — pas de surcharge CSS. */
body.campaign-page
  #lead-form.campaign-form-content:not(.campaign-form-content--stacked):has(#submit-section.visible) {
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

@supports (justify-content: safe center) {
  body.campaign-page #lead-form.campaign-form-content {
    justify-content: safe center;
  }

  body.campaign-page--mobile-lead #lead-form.campaign-form-content {
    justify-content: flex-start;
  }
}

body.campaign-page #lead-form.campaign-form-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

body.campaign-page #lead-form.campaign-form-content::-webkit-scrollbar-thumb,
body.campaign-page #lead-form.campaign-form-content::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Placeholder : ~50 % de la couleur du texte (lead). */
body.campaign-page #lead-form input.ui-input::placeholder,
body.campaign-page #lead-form textarea.ui-input::placeholder,
#builder-appearance-lead-sim-form input.ui-input::placeholder,
#builder-appearance-lead-sim-form textarea.ui-input::placeholder {
  color: var(--flow-text);
  opacity: 0.5;
}

@supports (color: color-mix(in srgb, white 50%, black)) {
  body.campaign-page #lead-form input.ui-input::placeholder,
  body.campaign-page #lead-form textarea.ui-input::placeholder,
  #builder-appearance-lead-sim-form input.ui-input::placeholder,
  #builder-appearance-lead-sim-form textarea.ui-input::placeholder {
    color: color-mix(in srgb, var(--flow-text) 50%, transparent);
    opacity: 1;
  }
}

.campaign-form-content .field {
  width: min(560px, 100%);
}

/** questionLayout stacked : pile centrée (ressorts) ; scroll / barre masquée hérités de `body.campaign-page #lead-form`. */
.campaign-form-content.campaign-form-content--stacked {
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.campaign-form-content.campaign-form-content--stacked > .campaign-stack-spacer {
  flex: 1 1 0;
  min-height: 0;
  transition: flex-grow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pendant l’empilement animé : pas de ressorts flex (évite le saut de la 1ʳᵉ question). */
.campaign-form-content.campaign-form-content--stacked.lead-question-layout--stack-reveal > .campaign-stack-spacer {
  flex: 0 0 0;
  min-height: 0;
  overflow: hidden;
}

.campaign-form-content.campaign-form-content--stacked.lead-question-layout--stack-reveal.lead-question-layout--stack-reveal--pad-anim {
  transition:
    padding-top 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.campaign-form-content.campaign-form-content--stacked > .campaign-stack-cluster {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  transition: gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stacked : fondu + léger slide sur le nouveau bloc seulement (pas de translateY sur toute la pile). */
.campaign-form-content.campaign-form-content--stacked .field.field-appear.field-appear--stack-in {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.42s ease-out,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.campaign-form-content.campaign-form-content--stacked .field.field-appear.field-appear--stack-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .campaign-form-content.campaign-form-content--stacked .field.field-appear.field-appear--stack-in {
    transform: none;
    transition: opacity 0.2s ease-out;
  }
}

.campaign-stack-cluster > .field {
  align-self: center;
  width: min(560px, 100%);
}

#sim-form {
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sim-form .field,
#lead-form .field,
#builder-appearance-lead-sim-form .field {
  width: min(560px, 100%);
}

#sim-form .field-text-row,
#lead-form .field-text-row,
#builder-appearance-lead-sim-form .field-text-row {
  width: 100%;
  min-width: 0;
}

#sim-form .field-text-row > input,
#lead-form .field-text-row > input,
#builder-appearance-lead-sim-form .field-text-row > input {
  width: 100%;
  box-sizing: border-box;
}

#sim-form .sim-enter-validate-hint,
#lead-form .sim-enter-validate-hint,
#builder-appearance-lead-sim-form .sim-enter-validate-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  width: 100%;
}

#sim-form .sim-enter-validate-hint__icon,
#lead-form .sim-enter-validate-hint__icon,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__icon {
  flex-shrink: 0;
  line-height: 0;
  display: flex;
  align-items: center;
}

#sim-form .sim-enter-validate-hint__svg,
#lead-form .sim-enter-validate-hint__svg,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__svg {
  width: 38px;
  height: 38px;
  display: block;
}

#sim-form .sim-enter-validate-hint__text,
#lead-form .sim-enter-validate-hint__text,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--flow-text);
  line-height: 1.3;
  text-align: left;
}

/* Page lead mobile portrait : OK tactile ; hint Entrée masqué. */
#lead-form .lead-mobile-ok-btn {
  display: none;
  width: 100%;
  margin-top: 14px;
  min-height: 44px;
  box-sizing: border-box;
}

body.campaign-page--mobile-lead #lead-form .lead-mobile-ok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.campaign-page--mobile-lead #lead-form .sim-enter-validate-hint {
  display: none !important;
}

/* Hero home mobile portrait : OK tactile ; hint Entrée masqué. */
.home-hero-lead--mobile-lead #lead-form .lead-mobile-ok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-hero-lead--mobile-lead #lead-form .sim-enter-validate-hint {
  display: none !important;
}

.home-hero-lead--mobile-lead #lead-form .lead-mobile-ok-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

body.campaign-page--mobile-lead #lead-form .lead-mobile-ok-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Picto Entrée : touche = accent, flèche (+ glyphes « enter ») = couleur texte lead. */
#sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-body,
#lead-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-body,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-body,
#builder-appearance-lead-sim .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-body {
  fill: var(--flow-accent) !important;
}

#sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-arrow,
#lead-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-arrow,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-arrow,
#builder-appearance-lead-sim .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-arrow,
#sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-glyphs,
#lead-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-glyphs,
#builder-appearance-lead-sim-form .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-glyphs,
#builder-appearance-lead-sim .sim-enter-validate-hint__svg .sim-enter-validate-hint__key-glyphs {
  fill: var(--flow-text) !important;
}

#sim-form.sim-form--stacked {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 8px 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sim-form.sim-form--stacked::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Hors révélation animée seulement (sinon écrase `.lead-question-layout--stack-reveal` → saut). */
#sim-form.sim-form--stacked:not(.lead-question-layout--stack-reveal) > .campaign-stack-spacer {
  flex: 1 1 0;
  min-height: 0;
}

#sim-form.sim-form--stacked.campaign-form-content--stacked.lead-question-layout--stack-reveal
  > .campaign-stack-spacer {
  flex: 0 0 0;
  min-height: 0;
  overflow: hidden;
}

#sim-form.sim-form--stacked > .sim-stack-cluster {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

#sim-form.sim-form--stacked .sim-stack-cluster > .field,
#sim-form.sim-form--stacked .campaign-stack-cluster > .field {
  align-self: stretch;
  width: 100%;
  max-width: min(560px, 100%);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Formulaire scrollable ; barre retour puis #sim-status en pied (fixes). */
#config-simulation {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

#config-simulation > .config-simulation-toolbar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

#config-simulation > .config-simulation-form-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Stacked : scroll sur `#sim-form` (padding + scroll même nœud), pas le wrapper. */
#config-simulation > .config-simulation-form-scroll:has(#sim-form.campaign-form-content--stacked) {
  overflow: hidden;
}

#config-simulation > .config-simulation-form-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#config-simulation > #sim-status {
  flex-shrink: 0;
}

.field-appear {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

/* Builder — one at a time : même rythme que l’intro Appearance (720ms). */
#config-simulation #sim-form:not(.campaign-form-content--stacked) .lead-sequential-stage > .field.field-appear,
.builder-split--appearance-preview
  #builder-appearance-lead-sim-form:not(.campaign-form-content--stacked)
  .lead-sequential-stage
  > .field.field-appear {
  transition:
    opacity 0.72s ease-out,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.field-appear.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Aperçu builder : mises à jour appearance sans rejouer le fondu des champs (intro seulement si `playQuestionLayoutIntro`). */
#builder-appearance-lead-sim-form.builder-appearance-lead-sim-form--static-fields .field.field-appear,
#builder-appearance-lead-sim-form.builder-appearance-lead-sim-form--static-fields .field.field-appear.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Intro stacked Appearance : transitions plus lentes (aperçu uniquement). */
.builder-split--appearance-preview
  #builder-appearance-lead-sim-form.builder-appearance-lead-sim-form--stack-intro.campaign-form-content--stacked
  .field.field-appear.field-appear--stack-in {
  transition:
    opacity 0.62s ease-out,
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.builder-split--appearance-preview
  #builder-appearance-lead-sim-form.builder-appearance-lead-sim-form--stack-intro.campaign-form-content--stacked.lead-question-layout--stack-reveal.lead-question-layout--stack-reveal--pad-anim {
  transition:
    padding-top 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom 0.68s cubic-bezier(0.22, 1, 0.36, 1);
}

/* RDV : pas de transition de padding (recalcul brutal quand le calendrier prend sa hauteur). */
.builder-split--appearance-preview
  #builder-appearance-lead-sim-form.campaign-form-content--stacked.lead-question-layout--stack-reveal:has(
    .field.field-appear--stack-in.visible .manual-booking-root
  ) {
  transition: none !important;
}

.field.blink {
  animation: field-blink 0.6s ease-out;
}

/* Page lead : halo accent (couleur lead ou `--flow-accent`) sur le bloc ET le marqueur timeline. */
#lead-form .field.field-appear.blink,
#lead-form .field.field-appear.campaign-timeline-emphasis,
#campaign-stack-cluster .field.blink,
#campaign-stack-cluster .field.campaign-timeline-emphasis {
  position: relative;
  z-index: 1;
  animation: campaign-field-emphasis 0.8s ease-out;
}

/* Flash JS au clic marqueur : voile accent par-dessus toute la question (label, inputs, radios, liens). */
#lead-form .field.campaign-field-flash-active,
#campaign-stack-cluster .field.campaign-field-flash-active {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

#lead-form .field.campaign-field-flash-active::before,
#campaign-stack-cluster .field.campaign-field-flash-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  background: var(--campaign-field-flash-bg, var(--flow-accent, #2b76ff));
  opacity: 0;
  animation: campaign-field-flash-overlay 1.8s ease-in-out forwards;
}

@keyframes campaign-field-flash-overlay {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  65% {
    opacity: 0.42;
  }
  30%,
  80% {
    opacity: 0;
  }
}

@keyframes campaign-field-emphasis {
  0%,
  100% {
    border-color: #283445;
    box-shadow: none;
    background-color: #131a24;
  }
  50% {
    border-color: color-mix(
      in srgb,
      var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 62%,
      #283445
    );
    background-color: color-mix(
      in srgb,
      var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 22%,
      #131a24
    );
    box-shadow:
      0 0 0 1px
        color-mix(in srgb, var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 48%, transparent),
      0 0 0 12px
        color-mix(in srgb, var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 18%, transparent),
      0 8px 30px 2px
        color-mix(in srgb, var(--campaign-timeline-emphasis-color, var(--flow-accent, #2b76ff)) 34%, transparent);
  }
}

.field.missing-required {
  border-color: #ff7b7b;
  box-shadow: 0 0 0 2px rgba(255, 123, 123, 0.25);
  animation: missing-required-pulse 0.8s ease-out;
}

@keyframes missing-required-pulse {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-1px); }
  60% { transform: translateY(1px); }
}

@keyframes field-blink {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: rgba(43, 118, 255, 0.15); box-shadow: 0 0 0 3px rgba(43, 118, 255, 0.3); }
}

.submit-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border: 0;
  box-shadow: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

body.campaign-page #lead-form > #submit-section {
  flex-shrink: 0;
  width: 100%;
  max-width: min(560px, 100%);
  align-self: center;
  box-sizing: border-box;
}

.submit-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stacked : réserver la place du bandeau avant le fondu (évite le saut à l’apparition finale). */
body.campaign-page #lead-form.campaign-form-content--stacked > #submit-section.submit-section--layout-prep {
  visibility: hidden;
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
}

.submit-section-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: stretch;
  justify-content: center;
}

#submit-lead,
#builder-appearance-preview-submit-lead {
  flex: 1 1 160px;
  font-weight: 600;
  padding: 12px 16px;
}

#submit-lead:disabled,
#builder-appearance-preview-submit-lead:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#reject-lead,
#builder-appearance-preview-reject-lead {
  flex: 1 1 160px;
}

#reject-lead:disabled,
#builder-appearance-preview-reject-lead:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.confirm-meeting-status {
  margin: -4px 0 0;
  min-height: 1.2em;
  font-size: 13px;
}

.confirm-meeting-status:empty {
  display: none;
}

@keyframes confirm-meeting-status-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Campaign confirm / decline modals: horizontal centering (flex stack — pas de grid, sinon le contenu du formulaire se casse). */
#confirm-meeting-modal .modal-card.stack {
  align-items: center;
  text-align: center;
}

/* Zone formulaire + overlay chargement : le chargement est en absolute pour ne pas perturber gap / centrage du stack. */
#confirm-meeting-modal .confirm-meeting-modal__stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#confirm-meeting-modal .confirm-meeting-modal__form-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Avant : h3 / p / input étaient enfants directs de `.modal-card.stack.gap` → gap appliqué entre eux.
     Depuis le wrapper `__stage`, il faut le même espacement ici (aligné sur `.ui-modal-card` → 12px). */
  gap: 12px;
  transition: opacity 0.22s ease;
}

#confirm-meeting-modal .confirm-meeting-modal__form-panel--fading-out {
  opacity: 0;
  pointer-events: none;
}

#confirm-meeting-modal .confirm-meeting-modal__loading-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.25rem 0;
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}

#confirm-meeting-modal .confirm-meeting-modal__loading-panel--visible {
  opacity: 1;
}

#confirm-meeting-modal .confirm-meeting-modal__loading-line.muted {
  margin: 0;
  max-width: 22rem;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--flow-text) !important;
}

/* Même points animés que `ObviousleadToast` — repère `#confirm-meeting-modal` (pas `#obviouslead-toast-host`). */
#confirm-meeting-modal .obviouslead-toast__ellipsis-run {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
}

#confirm-meeting-modal .obviouslead-toast__ellipsis-run span {
  display: inline-block;
  min-width: 0.12em;
  text-align: center;
  animation: obviouslead-toast-ellipsis 1.05s ease-in-out infinite;
}

#confirm-meeting-modal .obviouslead-toast__ellipsis-run span:nth-child(2) {
  animation-delay: 0.18s;
}

#confirm-meeting-modal .obviouslead-toast__ellipsis-run span:nth-child(3) {
  animation-delay: 0.36s;
}

#reject-modal .modal-card.stack {
  align-items: center;
  text-align: center;
}

#confirm-meeting-modal .confirm-meeting-modal__form-panel > p.muted:first-of-type,
#reject-modal .modal-card > p.muted:first-of-type {
  width: 100%;
  max-width: 22rem;
  margin: 0;
}

/* Above borderless :where(...) so textarea matches email field (grey border). */
#confirm-meeting-modal .modal-card #lead-email,
#reject-modal .modal-card #reject-reason {
  width: 100%;
  max-width: min(100%, 22rem);
  box-sizing: border-box;
  border: 1.5px solid #e5e7eb !important;
  background: var(--flow-surface-1) !important;
}

#confirm-meeting-modal .modal-card .confirm-meeting-status {
  width: 100%;
  max-width: min(100%, 22rem);
}

#reject-modal .modal-card label {
  width: 100%;
  max-width: min(100%, 22rem);
  align-items: center;
  text-align: center;
}

#reject-modal .modal-card textarea {
  text-align: left;
}

#confirm-meeting-modal .confirm-meeting-modal__form-panel > .row.gap,
#reject-modal .modal-card > .row.gap {
  justify-content: center;
  flex-wrap: wrap;
}

.submit-status-line {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 0;
}

.submit-status-line:empty {
  display: none;
}

.submit-status-line.submit-status-line--error {
  color: var(--flow-danger) !important;
}

.submit-status-line.submit-status-line--pending {
  color: var(--flow-muted) !important;
}

.final-confirmation-card {
  margin: auto;
  width: min(640px, 100%);
  border: 1px solid #2f3b4b;
  border-radius: 12px;
  background: #131a24;
  padding: 22px;
  text-align: center;
}

.final-confirmation-card h2 {
  margin: 0 0 8px;
}

.final-confirmation-card p {
  margin: 6px 0;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .q-row {
    grid-template-columns: 1fr;
  }

  .submit-section-inner {
    flex-direction: column;
  }

  #submit-lead,
  #reject-lead,
  #builder-appearance-preview-submit-lead,
  #builder-appearance-preview-reject-lead {
    flex: 1 1 auto;
    width: 100%;
  }

  .calendly-embed {
    height: 700px;
  }

  /* Mobile paysage : split 50/50 comme desktop (pas de colonne empilée). */
  @media (orientation: landscape) {
    main.split.campaign-split {
      flex-direction: row;
      align-items: stretch;
      height: 100vh;
      min-height: 100vh;
      max-height: none;
      overflow: visible;
    }

    main.split.campaign-split.campaign-split--video-right {
      flex-direction: row-reverse;
    }

    main.split.campaign-split > .video-pane,
    main.split.campaign-split > .form-pane {
      flex: 1 1 50%;
      min-width: 0;
      min-height: 0;
    }

    main.split.campaign-split .video-pane {
      flex: 1 1 50%;
      width: auto;
      height: auto;
      aspect-ratio: auto;
      max-height: none;
      min-height: 0;
      border-right: 1px solid var(--flow-surface-3, #2a3342);
      border-left: none;
      border-bottom: none;
    }

    main.split.campaign-split.campaign-split--video-right .video-pane {
      border-right: none;
      border-left: 1px solid var(--flow-surface-3, #2a3342);
    }

    main.split.campaign-split .form-pane {
      flex: 1 1 50%;
      overflow: hidden;
    }
  }

  /* Mobile portrait : vidéo plein écran + volet questions en overlay bas. */
  @media (orientation: portrait) {
    body.campaign-page main.split.campaign-split {
      position: relative;
      display: block;
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
    }

    body.campaign-page main.split.campaign-split .video-pane {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      max-height: none;
      min-height: 0;
      aspect-ratio: unset;
      flex: none;
      border: none;
    }

    body.campaign-page main.split.campaign-split .video-frame {
      height: 100%;
      min-height: 0;
      flex: 1 1 auto;
    }

    body.campaign-page main.split.campaign-split .campaign-video-shell {
      flex: 1 1 auto;
      min-height: 0;
    }

    body.campaign-page main.split.campaign-split .form-pane.campaign-form-pane {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      flex: none;
      width: 100%;
      min-height: 0;
      max-height: min(56dvh, 64%);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 20px 20px 0 0;
      border-top: 1px solid color-mix(in srgb, var(--flow-surface-3, #2a3342) 42%, transparent);
      box-shadow: 0 -10px 36px rgba(15, 20, 28, 0.22);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      box-sizing: border-box;
      transform: translateY(100%);
      visibility: hidden;
      pointer-events: none;
      transition:
        transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0.34s;
    }

    /* Volet questions : frost léger (pas sur l’intro hero `--lead-empty`). */
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      main.split.campaign-split
      .form-pane.campaign-form-pane:not(.campaign-form-pane--lead-empty) {
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
      background: color-mix(in srgb, var(--flow-surface-1) 80%, transparent) !important;
      -webkit-backdrop-filter: blur(10px) saturate(1.08);
      backdrop-filter: blur(10px) saturate(1.08);
    }

    @supports (color: color-mix(in srgb, white 50%, black)) {
      body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
        main.split.campaign-split
        .form-pane.campaign-form-pane:not(.campaign-form-pane--lead-empty) {
        background: color-mix(in srgb, var(--flow-surface-1) 78%, transparent) !important;
      }
    }

    @media (prefers-reduced-transparency: reduce) {
      body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
        main.split.campaign-split
        .form-pane.campaign-form-pane:not(.campaign-form-pane--lead-empty) {
        background: var(--flow-surface-1) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }

    /*
     * Contenu du volet : retirer les fonds opaques (palette enforcement) pour que le frost
     * du panneau et des libellés/questions soit homogène (`--flow-surface-1` utilisateur).
     */
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form.campaign-form-content,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .lead-sequential-stage,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .campaign-stack-cluster,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .campaign-stack-spacer,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .submit-section {
      background: transparent !important;
    }

    /* Questions : un seul frost (volet parent) — pas de carte ni blur sur chaque `.field`. */
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .field:not(:has(.manual-booking-root, .booking-field)) {
      background: transparent !important;
      border: none;
      box-shadow: none;
      padding: 6px 0 14px;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .field:not(:has(.manual-booking-root, .booking-field))
      > span:first-child {
      color: var(--flow-text);
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      input.ui-input,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      textarea.ui-input,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      select.ui-input {
      background: transparent !important;
      border-color: color-mix(in srgb, var(--flow-surface-3, #e5e7eb) 65%, transparent) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .choice-line {
      background: transparent !important;
      border-color: color-mix(in srgb, var(--flow-accent) 32%, var(--flow-surface-3, #e4e7ec)) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .campaign-radio-group
      .campaign-radio-line:hover,
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .choice-group
      .campaign-checkbox-line:hover {
      background: color-mix(in srgb, var(--flow-text) 6%, transparent);
    }

    /* RDV (toggle ou calendrier) : pas de carte sur `.field` — cartes sur calendrier + contrôles (composant global). */
    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      .campaign-form-pane
      #lead-form
      .field:has(.manual-booking-root, .booking-field) {
      background: transparent !important;
      border: none;
      box-shadow: none;
      padding: 6px 0 10px;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    /*
     * RDV ouvert : volet à hauteur de contenu (max 88dvh), colonne naturelle, Confirm/Decline
     * juste sous le calendrier ; photo masquée pour libérer la place.
     */
    /* Volet RDV : hauteur au contenu (plafond 88dvh), pas de bande vide sous Confirm/Decline. */
    body.campaign-page--mobile-lead-rdv-open main.split.campaign-split .form-pane.campaign-form-pane {
      height: auto;
      max-height: min(88dvh, 94%);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      justify-content: flex-start;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.campaign-form-content.rdv-focus-mode {
      flex: 0 1 auto;
      height: auto;
      max-height: none;
      overflow-y: visible;
      justify-content: flex-start !important;
      gap: 10px;
      min-height: 0;
      align-self: stretch;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      scroll-padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    body.campaign-page--mobile-lead-rdv-open
      #lead-form.campaign-form-content.rdv-focus-mode:has(#submit-section.visible) {
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      scroll-padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* Stacked RDV : pas de ressorts flex haut/bas (évite le vide sous le bandeau submit). */
    body.campaign-page--mobile-lead-rdv-open
      #lead-form.campaign-form-content--stacked.rdv-focus-mode
      > .campaign-stack-spacer {
      flex: 0 0 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      overflow: hidden;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.campaign-form-content--stacked.rdv-focus-mode {
      padding-top: 16px !important;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .lead-sequential-stage {
      flex: 0 1 auto !important;
      justify-content: flex-start !important;
      align-items: stretch !important;
      align-self: stretch;
      min-height: 0;
      max-height: none;
      overflow: visible;
    }

    body.campaign-page--mobile-lead-rdv-open
      #lead-form:not(.campaign-form-content--stacked).rdv-focus-mode
      .lead-sequential-stage {
      justify-content: flex-start !important;
      align-items: stretch !important;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .field.is-rdv-focus {
      width: 100%;
      max-width: none;
      margin: 0;
      background: transparent !important;
      border: none;
      padding: 6px 0 10px;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-left {
      display: none;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-root,
    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .booking-panel.is-open {
      background: transparent !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-root {
      gap: 12px;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .booking-panel.is-open {
      max-height: none;
      overflow: visible;
    }

    /* Deux cartes séparées (calendrier + contrôles), aligné sur `.manual-booking-root` global. */
    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-right {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0;
      border: none;
      background: transparent !important;
      box-shadow: none;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap,
    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-controls {
      background: var(--flow-manual-booking-card-bg, var(--flow-surface-1)) !important;
      border: none !important;
      border-radius: 10px;
      box-shadow: none !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    body.campaign-page--mobile-lead-rdv-open
      #lead-form.rdv-focus-mode
      .manual-booking-root.manual-booking-root--default-page-bg
      .manual-booking-calendar-wrap,
    body.campaign-page--mobile-lead-rdv-open
      #lead-form.rdv-focus-mode
      .manual-booking-root.manual-booking-root--default-page-bg
      .manual-booking-controls {
      border: 1px solid color-mix(in srgb, var(--flow-surface-3, #e4e7ec) 70%, transparent) !important;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-time-row {
      flex-direction: row;
      align-items: stretch;
      gap: 10px;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-time-control,
    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode .manual-booking-tz-control {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      max-width: none;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode > #submit-section.visible {
      position: relative;
      flex-shrink: 0;
      width: 100%;
      max-width: none;
      margin-top: 8px;
      padding: 0;
      border-top: none;
      background: transparent !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }

    body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode > #submit-section.visible .submit-section-inner {
      width: 100%;
    }

    body.campaign-page--mobile-lead-rdv-open
      #lead-form.rdv-focus-mode.campaign-form-content--stacked
      > #submit-section.visible {
      position: relative;
      flex-shrink: 0;
      width: 100%;
      max-width: none;
      margin-top: 8px;
      padding: 0;
      border-top: none;
      background: transparent !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
    }

    body.campaign-page--mobile-lead-rdv-open
      #lead-form.rdv-focus-mode.campaign-form-content--stacked
      #campaign-stack-cluster
      .field.is-rdv-focus {
      width: 100%;
      max-width: none;
    }

    @media (prefers-reduced-transparency: reduce) {
      body.campaign-page--mobile-lead-rdv-open #lead-form.rdv-focus-mode > #submit-section.visible,
      body.campaign-page--mobile-lead-rdv-open
        #lead-form.rdv-focus-mode.campaign-form-content--stacked
        > #submit-section.visible {
        background: transparent !important;
      }
    }

    /* Lecture : vidéo plein écran, volet fermé. */
    body.campaign-page--mobile-lead-immersive main.split.campaign-split .video-pane {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      max-height: none;
      min-height: 0;
      flex: none;
    }

    body.campaign-page--mobile-lead-immersive main.split.campaign-split .form-pane.campaign-form-pane {
      transform: translateY(100%);
      visibility: hidden;
      pointer-events: none;
    }

    body.campaign-page main.split.campaign-split .form-pane.campaign-form-pane::before {
      content: "";
      display: block;
      width: 40px;
      height: 4px;
      margin: 10px auto 6px;
      flex-shrink: 0;
      border-radius: 999px;
      background: color-mix(in srgb, var(--flow-text) 24%, transparent);
    }

    body.campaign-page .campaign-form-pane .campaign-header {
      flex-shrink: 0;
    }

    /* Intro hero : bottom-sheet — overflow hidden pour que le radius clippe (pas la vidéo dans les coins). */
    body.campaign-page .campaign-form-pane.campaign-form-pane--lead-empty {
      height: auto;
      justify-content: flex-start;
      align-items: stretch;
      overflow: hidden;
      border-radius: 20px 20px 0 0;
      border-top: 1px solid color-mix(in srgb, var(--flow-surface-3, #2a3342) 42%, transparent);
      box-shadow: 0 -10px 36px rgba(15, 20, 28, 0.22);
      background: var(--flow-surface-1) !important;
      background-clip: border-box;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      isolation: isolate;
    }

    body.campaign-page .campaign-form-pane.campaign-form-pane--lead-empty .campaign-header {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      main.split.campaign-split
      .form-pane.campaign-form-pane.campaign-form-pane--lead-empty {
      max-height: min(44dvh, 48%);
      z-index: 2;
      padding-top: 20px;
      overflow: hidden;
      transform: translateY(-20px);
      box-shadow:
        0 -10px 36px rgba(15, 20, 28, 0.22),
        0 0 0 1px var(--flow-surface-1);
    }

    body.campaign-page--mobile-lead-intro-split .campaign-form-pane.campaign-form-pane--lead-empty {
      max-height: none;
    }

    body.campaign-page--mobile-lead-drawer-open:not(.campaign-page--mobile-lead-intro-split)
      main.split.campaign-split
      .form-pane.campaign-form-pane.campaign-form-pane--lead-empty {
      background: var(--flow-surface-1) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    body.campaign-page .campaign-form-pane.campaign-form-pane--lead-empty .campaign-header {
      max-width: none;
      width: 100%;
      padding: 4px 16px 12px;
    }

    /* Hero intro : avatar compact + bio, bloc centré verticalement dans le volet. */
    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero.manual-booking-layout,
    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton.manual-booking-layout {
      grid-template-columns: minmax(72px, 92px) minmax(0, 1fr);
      gap: 8px 10px;
      align-items: center;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-photo-pane {
      align-self: center;
    }

    body.campaign-page--mobile-lead-intro-split .campaign-form-pane--lead-empty .campaign-lead-hero-text-col,
    body.campaign-page--mobile-lead-intro-split .campaign-form-pane--lead-empty .campaign-lead-hero-bio-col {
      min-height: 0;
      overflow: visible;
    }

    body.campaign-page--mobile-lead-intro-split .campaign-form-pane--lead-empty .campaign-lead-hero-bio {
      overflow: visible;
      display: block;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero:has(.campaign-lead-hero-bio-col.hidden) {
      grid-template-columns: minmax(76px, 100px);
      justify-content: start;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-photo-pane {
      max-width: 100px;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-photo-fill,
    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-skeleton-photo {
      aspect-ratio: 1 / 1;
      min-height: 0;
      max-height: 92px;
      width: 100%;
    }

    body.campaign-page--mobile-lead-intro-split .campaign-form-pane--lead-empty .campaign-lead-hero-photo-pane {
      max-width: 92px;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-name {
      font-size: 1rem;
      line-height: 1.2;
    }

    body.campaign-page .campaign-form-pane--lead-empty .campaign-lead-hero-bio {
      font-size: 0.875rem;
      line-height: 1.45;
    }

    body.campaign-page #lead-form.campaign-form-content {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      justify-content: flex-start;
      padding: 0 16px max(12px, env(safe-area-inset-bottom, 0px));
    }

    body.campaign-page
      #lead-form.campaign-form-content:not(.campaign-form-content--stacked):has(#submit-section.visible) {
      padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    }

    /*
     * Intro photo + bio : colonne 100dvh — vidéo ~2/3, hero ~1/3 (flex 2:1, pas un cap 33dvh qui rogne la bio).
     */
    body.campaign-page--mobile-lead-intro-split main.split.campaign-split {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      min-height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
    }

    body.campaign-page--mobile-lead-intro-split main.split.campaign-split .video-pane {
      position: relative;
      inset: auto;
      z-index: 0;
      flex: 2 1 0;
      width: 100%;
      height: auto;
      min-height: 0;
      max-height: none;
      aspect-ratio: unset;
      overflow: hidden;
    }

    body.campaign-page--mobile-lead-intro-split main.split.campaign-split .video-frame,
    body.campaign-page--mobile-lead-intro-split main.split.campaign-split .campaign-video-shell {
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }

    body.campaign-page--mobile-lead-intro-split:not(.campaign-page--mobile-lead-immersive)
      main.split.campaign-split
      .form-pane.campaign-form-pane.campaign-form-pane--lead-empty {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      z-index: 2;
      flex: 1 1 0;
      width: 100%;
      max-height: none;
      min-height: 0;
      height: auto;
      margin-top: -20px;
      padding-top: 20px;
      border-radius: 20px 20px 0 0;
      border-top: 1px solid color-mix(in srgb, var(--flow-surface-3, #2a3342) 42%, transparent);
      box-shadow:
        0 -10px 36px rgba(15, 20, 28, 0.22),
        0 0 0 1px var(--flow-surface-1);
      background: var(--flow-surface-1) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      overflow: hidden;
      transform: none;
      visibility: visible;
      pointer-events: auto;
    }

    body.campaign-page--mobile-lead-immersive.campaign-page--mobile-lead-intro-split
      main.split.campaign-split
      .video-pane {
      position: absolute;
      inset: 0;
      flex: none;
      max-height: none;
      min-height: 0;
      height: 100%;
    }

    body.campaign-page--mobile-lead-immersive.campaign-page--mobile-lead-intro-split
      main.split.campaign-split {
      display: block;
    }

    body.campaign-page--mobile-lead-intro-split
      main.split.campaign-split
      .form-pane.campaign-form-pane:not(.campaign-form-pane--lead-empty)::before {
      display: none;
    }

    body.campaign-page--mobile-lead-intro-split
      main.split.campaign-split
      .form-pane.campaign-form-pane.campaign-form-pane--lead-empty::before {
      display: block;
    }

    /* Outro : annuler le layout « volet » mobile (position absolute + max-height partielle). */
    body.campaign-page--lead-outro main.split.campaign-split {
      display: flex !important;
      flex-direction: column !important;
      position: static !important;
      height: auto !important;
      min-height: 100dvh !important;
      max-height: none !important;
      overflow: visible !important;
    }

    body.campaign-page--lead-outro main.split.campaign-split > .video-pane {
      display: none !important;
      position: static !important;
      height: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    body.campaign-page--lead-outro main.split.campaign-split > .form-pane.campaign-form-pane {
      position: static !important;
      inset: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: none !important;
      visibility: visible !important;
      pointer-events: auto !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      max-height: none !important;
      min-height: 100dvh !important;
      height: auto !important;
      overflow-y: auto !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
      background: var(--flow-surface-1) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    body.campaign-page--lead-outro main.split.campaign-split .form-pane.campaign-form-pane::before {
      display: none !important;
    }

    body.campaign-page--lead-outro .campaign-lead-outro {
      width: 100%;
      max-width: min(960px, 100%);
      padding-bottom: 8px;
    }

    body.campaign-page--lead-outro .campaign-lead-outro-columns {
      gap: clamp(20px, 5vw, 32px);
    }
  }
}

/* Contrast guardrail: keep text readable after theme tweaks */
.muted {
  color: #475467 !important;
}

a {
  color: var(--flow-accent);
}

a:hover {
  color: var(--flow-accent-overlay);
}

a.ui-button,
a.ui-button:visited,
button.ui-button {
  color: var(--flow-on-accent) !important;
}

/* Bat `button.ui-button` (texte on-accent) : variantes muted = texte lisible sur fond surface. */
button.ui-button.ui-button--muted,
a.ui-button.ui-button--muted {
  color: var(--flow-text) !important;
}

/* Après guardrail `.muted` / `button.ui-button` : modales campagne — primaire = #submit-lead ; annuler = contour comme #reject-lead / booking-type inactif. */
#confirm-meeting-modal .modal-card .muted,
#reject-modal .modal-card .muted {
  color: var(--flow-text) !important;
}

/* Bat la règle ci-dessus : `.muted` dans la modale ne doit pas forcer `flow-text` sur le message d’erreur e-mail. */
#confirm-meeting-modal .modal-card .confirm-meeting-status.confirm-meeting-status--error {
  color: var(--flow-danger) !important;
  font-weight: 600;
  animation: confirm-meeting-status-fade-in 0.24s ease;
}

@media (prefers-reduced-motion: reduce) {
  #confirm-meeting-modal .modal-card .confirm-meeting-status.confirm-meeting-status--error {
    animation: none;
  }
}

#confirm-meeting-confirm,
#reject-confirm {
  background: var(--flow-accent) !important;
  color: var(--flow-on-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
}

#confirm-meeting-confirm:hover:not(:disabled),
#reject-confirm:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  color: var(--flow-on-accent) !important;
}

#confirm-meeting-cancel,
#reject-cancel {
  background: transparent !important;
  color: var(--flow-text) !important;
  border: 1px solid color-mix(in srgb, var(--flow-accent) 42%, var(--flow-surface-3, #e4e7ec)) !important;
  box-shadow: none !important;
}

#confirm-meeting-cancel:hover:not(:disabled),
#reject-cancel:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-accent) 14%, transparent) !important;
  color: var(--flow-text) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 55%, var(--flow-surface-3, #e4e7ec)) !important;
}

/* Navbar links: align with site text + accent hover */
.nav-links a:not(.ui-button):not(.btn-nav) {
  color: var(--flow-text) !important;
}

.nav-links a:not(.ui-button):not(.btn-nav):hover {
  color: var(--flow-accent) !important;
}

/* Décalage sous la navbar sticky (~padding + ligne + bordure). Aligner avec `.dashboard-side` top. */
:root {
  --dashboard-sidebar-sticky-top: 64px;
}

.dashboard-page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  align-content: start;
  padding-top: 0;
  /* Pas de min-height : sinon le <main> reste « très haut » avec du vide en bas quand le contenu est court (Statistics, etc.). Le calendrier utilise `.dashboard-main--calendar` pour remplir la vue. */
  min-height: 0;
}

/* Home / Favorites / Follow-ups / Statistics : conteneur plus large que le défaut global (1120px).
   100% plutôt que 100vw : la largeur utile suit la présence de la scrollbar verticale (évite oscillation). */
main.dashboard-page.container.ui-container.ui-container--flow {
  max-width: min(1440px, 100%);
  box-sizing: border-box;
  /* Remplace la marge/padding bas globaux du `.container`. */
  margin-block-end: 0;
  padding-block-end: 0;
}

/* Pas d’overflow hidden/auto sur cette colonne : ça crée un scrollport et casse position:sticky (voir menu ci‑dessous). */
.dashboard-side {
  align-self: stretch;
  min-height: 0;
  padding: 20px 14px 20px 6px;
  border-right: 1px solid var(--flow-surface-3);
  background: var(--flow-bg);
}

/* Sticky sur le nav : le aside reste étiré en hauteur (trait vertical pleine grille), le menu suit le scroll viewport. */
.dashboard-menu {
  position: sticky;
  top: var(--dashboard-sidebar-sticky-top);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.dashboard-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--flow-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  width: 100%;
}

.dashboard-menu-link:hover {
  background: var(--flow-surface-2);
  color: var(--flow-accent);
}

.dashboard-menu-link.is-active {
  background: var(--flow-surface-2);
  color: var(--flow-accent);
  font-weight: 700;
}

.dashboard-menu-link.is-active .dashboard-menu-icon {
  opacity: 1;
}

.dashboard-menu-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.dashboard-menu-text {
  min-width: 0;
}

.dashboard-menu-followup-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Badge « relances dues » — menu + navbar (fond = `--flow-danger`, pas hex fixe). */
.dash-followup-due-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--flow-danger);
  color: var(--flow-on-accent);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Chiffre dans le menu latéral : grille + line-height 0 (métriques de police vs pastille 20px). */
.dash-followup-due-badge--sidebar,
.dash-followup-due-badge--onhold-sidebar {
  display: inline-grid;
  place-items: center;
  line-height: 0;
  min-height: 20px;
}

.dash-followup-due-badge.hidden {
  display: none !important;
}

.dash-followup-due-badge--onhold-sidebar {
  background: var(--flow-followup-signal-on_hold);
  color: var(--flow-on-accent);
}

.nav-dash-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}

/* Navbar : pastille à droite du libellé (pas au-dessus de la dernière lettre). */
.dash-followup-due-badge--nav {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 5px;
  transform: translateY(calc(-50% - 3px));
  right: auto;
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  line-height: 0;
  flex-shrink: 0;
  pointer-events: none;
  background: var(--flow-danger);
}

.dashboard-menu-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  opacity: 0.55;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.dashboard-menu-icon iconify-icon {
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  display: block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.dashboard-main {
  min-width: 0;
  padding-top: 12px;
  padding-left: 22px;
}

/* Zone principale dashboard : sans le margin-top global des `.card` (sinon section décalée vs aside) ; padding bas minimal. */
.dashboard-page > .dashboard-main.card {
  margin-top: 0;
  padding-top: 12px;
  padding-right: 22px;
  padding-bottom: 6px;
  padding-left: 22px;
}

.dashboard-main h3 {
  margin: 0;
}

.dashboard-page .dashboard-side,
.dashboard-page .dashboard-main,
.dashboard-page .card {
  background: transparent !important;
}

.dashboard-main.is-empty-state {
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dashboard-main.is-empty-state h3,
.dashboard-main.is-empty-state #dash-lead-list {
  display: none !important;
}

#dash-empty-view {
  font-size: 18px;
  color: var(--flow-muted);
  margin: 0;
}

/* Accueil dashboard : calendrier RDV (grille mensuelle plein espace) */
.dashboard-main--calendar {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 90px);
}

.dashboard-main--calendar #dash-lead-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-rdv-calendar {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
}

.dash-rdv-calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
}

.dash-rdv-calendar-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  justify-self: start;
  min-width: 0;
}

.dash-rdv-calendar-toolbar-center {
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.dash-rdv-calendar-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dash-rdv-cal-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-rdv-cal-filter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--flow-muted);
}

/* Filtres calendrier : `ObviousleadDashStatsCombobox` (trigger `.dash-stats-combobox-trigger`), pas `<select>`. */
.dash-rdv-cal-filter-combobox {
  min-width: 160px;
  max-width: 220px;
}

.dash-rdv-cal-combobox.dash-stats-combobox {
  width: 100%;
}

.dash-rdv-cal-combobox .dash-stats-combobox-trigger {
  min-height: 39px;
  font-size: 13px;
}

.dash-rdv-calendar-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
  justify-self: end;
  min-width: 0;
}

/* Today + mois préc./suiv. : `.ui-button` global ; on verrouille l’accent pour éviter toute dérive dans le calendrier. */
.dash-rdv-calendar-toolbar-right .dash-rdv-cal-btn.ui-button {
  background: var(--flow-accent);
  color: var(--flow-on-accent);
}

.dash-rdv-calendar-toolbar-right .dash-rdv-cal-btn.ui-button:hover:not(:disabled) {
  background: var(--flow-accent-overlay);
  color: var(--flow-on-accent);
}

/* Icône seule — même `.dashboard-menu-icon` (24×24) que le menu Calendar dans la sidebar.
   États inversés vs. avant : accent par défaut (comme l’ancien survol), assombrissement au survol. */
.dash-rdv-cal-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: transparent !important;
  color: var(--flow-accent);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  font-weight: inherit;
  letter-spacing: normal;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.dash-rdv-cal-settings-btn .dashboard-menu-icon {
  opacity: 1;
}

/* Exclu de ui-button.js : le survol vient de `button:hover` global, pas de `.ui-button:hover`. */
button.dash-rdv-cal-settings-btn:hover:not(:disabled),
button.dash-rdv-cal-settings-btn:focus-visible:not(:disabled) {
  background: transparent !important;
  background-color: transparent !important;
  transform: none;
  color: var(--flow-text);
}

.dash-rdv-cal-settings-btn:hover .dashboard-menu-icon,
.dash-rdv-cal-settings-btn:focus-visible .dashboard-menu-icon {
  opacity: 0.55;
}

.dash-calendar-settings-card {
  max-width: min(720px, calc(100vw - 32px));
}

.dash-calendar-settings-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}

.dash-calendar-settings-fieldset {
  margin: 0;
  min-width: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--flow-border, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-calendar-settings-legend {
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--flow-text);
}

@media (max-width: 560px) {
  .dash-calendar-settings-columns {
    grid-template-columns: 1fr;
  }
}

/* Mois préc./suiv. : contenu = SVG (dashboard.js) pour centrage V fiable. */
.dash-rdv-cal-btn.dash-rdv-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  min-width: 40px;
  height: 36px;
  padding: 0;
  line-height: 0;
}

.dash-rdv-cal-btn.dash-rdv-cal-nav .dash-rdv-cal-nav-svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.dash-rdv-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--flow-muted);
  padding: 0 2px;
}

.dash-rdv-calendar-weekday {
  padding: 4px 0;
}

.dash-rdv-calendar-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--rdv-rows, 5), minmax(108px, 1fr));
  gap: 1px;
  background: var(--flow-surface-3);
  border: 1px solid var(--flow-surface-3);
  border-radius: 12px;
  overflow: hidden;
  min-height: min(62vh, 720px);
}

.dash-rdv-day {
  background: var(--flow-surface-1);
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.dash-rdv-day--other-month .dash-rdv-day-num {
  color: var(--flow-muted);
  opacity: 0.6;
}

.dash-rdv-day--today .dash-rdv-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--flow-accent);
  color: var(--flow-on-accent);
}

.dash-rdv-day-num {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4px;
}

.dash-rdv-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Même gabarit que `.ui-button` / `button` global : pilule, padding, hover ; seules les couleurs varient par heat. */
.dash-rdv-pill {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  background: var(--flow-accent);
  color: var(--flow-on-accent);
  transition: transform 0.16s ease, background-color 0.2s ease, opacity 0.2s ease;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Intent : cold → warm → initialized → hot (`--flow-heat-*` = badges modale + tableau). */
.dash-rdv-pill--heat-cold {
  background: var(--flow-heat-cold);
  color: var(--flow-heat-fg);
}

.dash-rdv-pill--heat-warm {
  background: var(--flow-heat-warm);
  color: var(--flow-heat-fg);
}

.dash-rdv-pill--heat-hot {
  background: var(--flow-heat-hot);
  color: var(--flow-heat-hot-fg);
}

.dash-rdv-pill--heat-initialized {
  background: var(--flow-heat-initialized);
  color: var(--flow-heat-fg);
}

.dash-rdv-pill:hover:not(:disabled) {
  transform: translateY(-1px);
}

.dash-rdv-pill--heat-cold:hover:not(:disabled) {
  background: var(--flow-heat-cold-hover);
}

.dash-rdv-pill--heat-warm:hover:not(:disabled) {
  background: var(--flow-heat-warm-hover);
}

.dash-rdv-pill--heat-hot:hover:not(:disabled) {
  background: var(--flow-heat-hot-hover);
}

.dash-rdv-pill--heat-initialized:hover:not(:disabled) {
  background: var(--flow-heat-initialized-hover);
}

.dash-rdv-pill:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.dash-rdv-pill--heat-cold:focus-visible {
  outline-color: var(--flow-heat-cold-focus);
}

.dash-rdv-pill--heat-warm:focus-visible {
  outline-color: var(--flow-heat-warm-focus);
}

.dash-rdv-pill--heat-hot:focus-visible {
  outline-color: var(--flow-heat-hot-focus);
}

.dash-rdv-pill--heat-initialized:focus-visible {
  outline-color: var(--flow-heat-initialized-focus);
}

.dash-rdv-pill-text {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calendrier dashboard : pilules empilées (heure / nom / type), comme l’aperçu home. */
.dash-rdv-calendar .dash-rdv-pill {
  height: auto;
  align-items: stretch;
  border-radius: 10px;
  padding: 7px 8px;
}

.dash-rdv-calendar .dash-rdv-pill-text.home-cal-pill-text {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.25;
  font-size: 11px;
  text-align: center;
}

.dash-rdv-calendar .home-cal-pill-line--time {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.92;
}

.dash-rdv-calendar .home-cal-pill-line--name {
  font-weight: 700;
  word-break: break-word;
}

.dash-rdv-calendar .home-cal-pill-line--mod {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
}

.dash-rdv-calendar .dash-rdv-day-events {
  overflow-x: visible;
}

.dash-rdv-calendar .dash-rdv-calendar-grid {
  grid-template-rows: repeat(var(--rdv-rows, 5), minmax(116px, auto));
}

/* Hérite de `.dash-rdv-calendar-grid` (mêmes lignes `--rdv-rows`, minmax 108px, bordures). */
.dash-rdv-calendar-grid--skeleton {
  flex: 1;
}

.dash-rdv-day--skeleton {
  background: var(--flow-surface-1);
}

.dash-rdv-day--skeleton .dash-rdv-day-num {
  align-self: flex-end;
  display: block;
  width: 22px;
  height: 12px;
  border-radius: 4px;
  background: var(--flow-surface-3);
  opacity: 0.7;
}

/* Même gabarit que `.dash-rdv-pill` : pilule pleine largeur, chargement uniquement. */
.dash-rdv-pill-skel {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  border-radius: 999px;
  min-height: 34px;
  padding: 8px 14px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  flex-shrink: 0;
}

.dash-rdv-calendar--skeleton .dash-rdv-calendar-toolbar-right {
  align-items: center;
}

.dash-rdv-calendar--skeleton .dash-rdv-cal-toolbar-skel {
  flex-shrink: 0;
}

/* Filtres : même boîte que `ObviousleadDashStatsCombobox` (trigger réel), contenu masqué + pulse. */
.dash-rdv-cal-filter-skel.dash-stats-combobox-trigger {
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite !important;
  cursor: default !important;
  /* Surcharge le trigger « primaire » global : squelette = surface neutre, pas CTA accent. */
  background: var(--flow-surface-3) !important;
  color: var(--flow-muted) !important;
  border: none !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  transform: none !important;
}

.dash-rdv-cal-filter-skel .dash-stats-combobox-value,
.dash-rdv-cal-filter-skel .dash-stats-combobox-chevron {
  opacity: 0;
}

.dash-rdv-calendar-title--skeleton {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1.65em;
}

.dash-rdv-calendar-title-skeleton-block.dash-skeleton-line--cal-title {
  width: min(240px, 55vw);
  height: 0.82em;
  min-height: 22px;
  max-width: 100%;
}

/* Today / mois préc.–suiv. : mêmes boutons que la vue chargée, fond pulse à la place de l’accent. */
.dash-rdv-calendar--skeleton button.dash-rdv-cal-toolbar-skel.dash-rdv-cal-btn {
  background: var(--flow-surface-3) !important;
  color: transparent !important;
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  pointer-events: none;
}

.dash-rdv-calendar--skeleton .dash-rdv-cal-settings-btn.dash-rdv-cal-toolbar-skel {
  background: var(--flow-surface-3) !important;
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  pointer-events: none;
}

.dash-rdv-calendar--skeleton .dash-rdv-cal-settings-btn.dash-rdv-cal-toolbar-skel .dashboard-menu-icon {
  opacity: 0;
}

/*
 * Statistics — la liste ne doit pas allonger la page : min-height:0 + scroll dans nav.
 * La ligne de grille prend la hauteur du détail (carte) ; la sidebar s’étire à cette hauteur sans dépasser le viewport.
 */
.dash-stats-split {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, auto);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

#dash-lead-list.dash-stats-split {
  min-height: 0;
}

.dash-stats-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Indispensable : sinon la grille utilise la hauteur « naturelle » de la liste (milliers de px). */
  min-height: 0;
  align-self: stretch;
  padding: 12px 12px 10px;
  border: none;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
  /* Hauteur desktop : pilotée par JS depuis la carte détail (`setupStatsSplitHeightSync`). */
}

.dash-stats-list-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--flow-muted) 14%, transparent);
}

/* Vue Leads : 4 filtres en grille 2×2 (même classes `.dash-stats-list-toolbar` + `.dash-leads-grid-toolbar`). */
.dash-stats-list-toolbar.dash-leads-grid-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: stretch;
  flex-direction: unset;
}

/* Vue Statistics (split) : date / décision / engagement / tri en 2×2, recherche pleine largeur en dessous. */
.dash-stats-list-toolbar.dash-stats-split-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: stretch;
  flex-direction: unset;
  border-bottom: none;
  margin-bottom: 10px;
  padding-bottom: 0;
}

.dash-stats-list-toolbar.dash-stats-split-toolbar .dash-stats-lead-search {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .dash-stats-list-toolbar.dash-leads-grid-toolbar {
    grid-template-columns: 1fr;
  }

  .dash-stats-list-toolbar.dash-stats-split-toolbar {
    grid-template-columns: 1fr;
  }

  .dash-stats-list-toolbar.dash-leads-grid-toolbar.dash-leads-grid-toolbar--skeleton {
    grid-template-columns: 1fr;
  }

  .dash-stats-list-toolbar--skeleton.dash-stats-split-toolbar {
    grid-template-columns: 1fr;
  }
}

.dash-stats-list-toolbar--skeleton {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--flow-muted) 14%, transparent);
}

/* Squelette Statistics (split) : même grille 2×2 que la barre chargée. */
.dash-stats-list-toolbar--skeleton.dash-stats-split-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: stretch;
  flex-direction: unset;
  border-bottom: none;
  margin-bottom: 10px;
  padding-bottom: 0;
}

.dash-stats-list-toolbar--skeleton.dash-stats-split-toolbar .dash-stats-toolbar-skeleton-field--search {
  grid-column: 1 / -1;
}

.dash-stats-toolbar-skeleton-field {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: 12px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

/* Même hauteur que `.dash-stats-lead-search` (rangée recherche en bas — Statistics split). */
.dash-stats-toolbar-skeleton-field--search {
  min-height: 38px;
}

.dash-stats-list-row-skeleton {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 108px);
  gap: 10px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Aligné sur `.dash-stats-list-pane .dash-lead-tile-shell… .dash-lead-tile-meta` */
.dash-stats-list-row-skeleton-meta {
  display: grid;
  gap: 6px;
  justify-items: start;
  align-content: start;
  padding-top: 2px;
  min-width: 0;
}

.dash-stats-list-row-skeleton-line {
  display: block;
  border-radius: 6px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-stats-list-row-skeleton-line--title {
  height: 14px;
  width: 88%;
  max-width: 200px;
}

.dash-stats-list-row-skeleton-line--date {
  height: 12px;
  width: 70%;
  max-width: 160px;
}

/* Même hauteur que `.dash-stats-sidebar .dash-stats-sidebar-tile-btn .dash-lead-tile-media` */
.dash-stats-list-row-skeleton-media {
  display: block;
  height: 88px;
  min-height: 88px;
  border-radius: 10px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

/* Follow-ups : emplacement réservé sous le tableau quand la pagination est présente */
.ui-pagination.ui-pagination--skeleton {
  pointer-events: none;
}

.ui-pagination.ui-pagination--skeleton .dash-skeleton-pagination-chip {
  display: inline-block;
  border-radius: 999px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
  vertical-align: middle;
}

.ui-pagination.ui-pagination--skeleton .dash-skeleton-pagination-chip--wide {
  height: 34px;
  width: 76px;
}

.ui-pagination.ui-pagination--skeleton .dash-skeleton-pagination-chip--num {
  height: 34px;
  width: 34px;
}

.dash-stats-lead-search {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 8px 10px;
  min-height: 38px;
}

/* Combobox (Statistics toolbar) — pattern type liste / shadcn sans React */
.dash-stats-combobox {
  position: relative;
  width: 100%;
}

/* Largeur au contenu : pas d'étirement du libellé (flex) ni du trigger — ex. mois / année calendrier RDV. */
.dash-stats-combobox--hug {
  width: fit-content;
  max-width: 100%;
}

.dash-stats-combobox--hug .dash-stats-combobox-trigger {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 8px;
}

.dash-stats-combobox--hug .dash-stats-combobox-value {
  flex: 0 1 auto;
  min-width: 0;
}

/* Déclencheur `ObviousleadDashStatsCombobox` : même lecture couleur que `.ui-button` (composant unique partout). */
.dash-stats-combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--flow-accent) !important;
  color: var(--flow-on-accent) !important;
  border: none !important;
  border-radius: var(--obviouslead-button-border-radius) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.16s ease;
}

.dash-stats-combobox-trigger:hover:not(:disabled) {
  background: var(--flow-accent-overlay) !important;
  color: var(--flow-on-accent) !important;
  transform: translateY(-1px) !important;
}

.dash-stats-combobox-trigger:focus {
  outline: none !important;
}

.dash-stats-combobox-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 38%, transparent) !important;
  outline-offset: 1px;
}

.dash-stats-combobox-trigger:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none !important;
}

.dash-stats-combobox-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.dash-stats-combobox-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: transform 0.18s ease;
}

.dash-stats-combobox-chevron::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 3px;
}

.dash-stats-combobox.is-open .dash-stats-combobox-chevron {
  transform: rotate(180deg);
}

.dash-stats-combobox-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--flow-surface-3);
  background: var(--flow-surface-1);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  box-sizing: border-box;
}

/* Zone « en-tête » (ex. format 12h/24h) : marge généreuse sous le coin arrondi du panneau (sinon collage visuel au bord). */
.dash-stats-combobox-panel.dash-stats-combobox-panel--has-leading {
  padding-top: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

.dash-stats-combobox-leading {
  flex-shrink: 0;
  padding-top: 2px;
}

.dash-stats-combobox-filter {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 10px;
  margin-bottom: 6px;
  min-height: 34px;
  background: var(--flow-surface-1) !important;
  color: var(--flow-text) !important;
  border: 1px solid var(--flow-surface-3) !important;
}

.dash-stats-combobox-filter::placeholder {
  font-size: 12px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--flow-muted) 88%, var(--flow-text));
  opacity: 1;
}

.dash-stats-combobox-listbox {
  max-height: min(65vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--flow-muted) 50%, transparent) transparent;
  padding: 2px 2px 8px;
  box-sizing: border-box;
}

.dash-stats-combobox-listbox::-webkit-scrollbar {
  width: 8px;
}

.dash-stats-combobox-listbox::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--flow-muted) 45%, transparent);
  border-radius: 6px;
}

.dash-stats-combobox-listbox::-webkit-scrollbar-track {
  background: transparent;
}

.dash-stats-combobox-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent !important;
  color: var(--flow-muted) !important;
  font: inherit;
  font-size: 13px;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-stats-combobox-option:hover,
.dash-stats-combobox-option:focus-visible {
  outline: none;
  background: var(--flow-surface-2) !important;
  color: var(--flow-text) !important;
  transform: none !important;
}

.dash-stats-combobox-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--flow-surface-3) 26%, var(--flow-surface-2) 74%) !important;
  color: var(--flow-text) !important;
  font-weight: 600 !important;
}

.dash-stats-combobox-option--disabled {
  cursor: not-allowed !important;
  opacity: 0.42 !important;
  pointer-events: none !important;
}

.dash-stats-combobox-option--disabled:hover,
.dash-stats-combobox-option--disabled:focus-visible {
  background: transparent !important;
  color: var(--flow-muted) !important;
}

.dash-stats-combobox-empty {
  padding: 12px 8px;
  font-size: 12px;
  text-align: center;
}

.dash-stats-lead-search::placeholder {
  font-size: 13px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--flow-muted) 85%, var(--flow-text));
  opacity: 1;
}

.dash-stats-list-pane {
  /* basis 0 : la liste ne impose plus la hauteur du flex parent (sidebar). */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 6px 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--flow-muted) 35%, transparent) transparent;
}

.dash-stats-list-pane::-webkit-scrollbar {
  width: 8px;
}

.dash-stats-list-pane::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-muted) 45%, transparent);
}

.dash-stats-list-empty,
.dash-stats-detail-placeholder {
  margin: 0;
  padding: 16px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.dash-stats-detail-placeholder {
  padding: 28px 16px;
}

.dash-stats-detail-skeleton {
  display: grid;
  gap: 14px;
  padding: 4px 0 12px;
}

.dash-stats-detail-skeleton-media {
  display: block;
  height: 140px;
  border-radius: 12px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-stats-detail-skeleton-line {
  display: block;
  height: 14px;
  border-radius: 8px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-stats-detail-skeleton-line--short {
  width: 42%;
}

.dash-stats-detail-skeleton-line--medium {
  width: 72%;
}

.dash-stats-detail-skeleton-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dash-stats-detail-skeleton-chip {
  height: 52px;
  border-radius: 10px;
  background: var(--flow-surface-3);
  animation: dash-skeleton-pulse 1.05s ease-in-out infinite;
}

.dash-stats-detail-skeleton-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

/* Liste Statistics : meta à gauche + vignette à droite (comme le skeleton). Pas de min-height:0 sur la ligne : ça faisait rétrécir les flex items et chevaucher le texte. */
.dash-stats-list-pane .dash-lead-tile-shell.dash-stats-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 108px);
  gap: 10px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
}

.dash-stats-list-pane .dash-lead-tile-shell.dash-stats-list-row .dash-lead-tile-meta {
  justify-items: start;
  align-content: start;
  text-align: left;
  gap: 6px;
  padding-top: 2px;
  min-width: 0;
}

.dash-stats-list-pane .dash-lead-tile-name {
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
  word-break: break-word;
}

.dash-stats-list-pane .dash-lead-tile-date {
  text-align: left;
  line-height: 1.35;
}

.dash-stats-sidebar .dash-stats-sidebar-tile-btn.dash-lead-tile {
  transition: transform 0.16s ease;
  min-height: 0;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  border: none !important;
  box-shadow: none;
  overflow: hidden;
}

.dash-stats-sidebar .dash-stats-sidebar-tile-btn.dash-lead-tile:hover {
  transform: translateY(-2px);
  background: transparent;
  box-shadow: none;
}

.dash-stats-sidebar .dash-stats-sidebar-tile-btn .dash-lead-tile-media {
  height: 88px;
  min-height: 88px;
  border-radius: 10px;
}

.dash-stats-list-fallback {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--flow-surface-3);
  background: var(--flow-surface-2);
  font: inherit;
  cursor: pointer;
}

.dash-stats-detail-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.dash-lead-modal-actions--compact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .dash-stats-split {
    grid-template-columns: 1fr;
  }

  .dash-stats-sidebar {
    padding: 10px;
    max-height: min(52dvh, calc(100dvh - 200px));
  }

  .dash-stats-list-pane {
    flex: none;
    max-height: min(40dvh, calc(100dvh - 260px));
  }
}

.dash-table-host {
  width: 100%;
  display: grid;
  gap: 16px;
}

.dash-followups-list-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* Entrée en cascade : tuiles (Home, Favoris), tableau Relances, liste Statistiques.
   Pas de translateY : le déplacement peint hors du flux et fait varier la hauteur de scroll. */
.dash-stack-enter {
  --dash-stack-stagger: 0;
  opacity: 0;
  animation: dash-stack-enter 0.48s ease forwards;
  animation-delay: calc(72ms + var(--dash-stack-stagger) * 46ms);
}

@keyframes dash-stack-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-stack-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.dash-followups-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.dash-followups-stat {
  border-radius: 10px;
  background: var(--flow-surface-2);
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.dash-followups-stat span {
  font-size: 11px;
  color: var(--flow-muted);
}

.dash-followups-stat strong {
  font-size: 22px;
  line-height: 1;
}

.dash-followups-stat:hover {
  background: color-mix(in srgb, var(--flow-surface-3) 20%, var(--flow-surface-2) 80%);
}

.dash-followups-stat:focus-visible {
  background: color-mix(in srgb, var(--flow-surface-3) 20%, var(--flow-surface-2) 80%);
}

.dash-followups-summary--skeleton .dash-followups-stat {
  background: var(--flow-surface-2);
}

.dash-skeleton-line--kpi-label {
  display: block;
  width: 68%;
  min-height: 11px;
}

.dash-skeleton-line--kpi-value {
  display: block;
  width: 28%;
  min-height: 20px;
}

.ui-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ui-table-empty-cell {
  text-align: center !important;
  vertical-align: middle;
  padding: 40px 14px;
}

/* Hauteur min. seulement au chargement (squelette) : avec peu de lignes, le tableau ne doit pas « forcer » une zone vide type faux rail. */
#dash-lead-list .ui-table-wrap:has(.ui-table--skeleton) {
  min-height: 360px;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  min-width: 640px;
}

.ui-table caption {
  text-align: left;
  color: var(--flow-muted);
  font-size: 12px;
  margin-top: 8px;
}

.ui-table th,
.ui-table td {
  padding: 14px 14px;
  text-align: left;
  border-bottom: 1px solid var(--flow-surface-3);
}

.ui-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-muted);
  white-space: nowrap;
}

.ui-table tbody td {
  font-size: 15px;
  color: var(--flow-text);
}

.ui-table tfoot td {
  font-size: 13px;
  font-weight: 700;
  border-bottom: 0;
}

.ui-table .text-right {
  text-align: right;
}

.ui-table .text-center {
  text-align: center;
}

/* Tableau Follow-ups : colonnes Lead, Status, Reached out, Next follow-up */
#dash-lead-list .ui-table th.text-center,
#dash-lead-list .ui-table td.text-center,
#home-followups-demo .ui-table th.text-center,
#home-followups-demo .ui-table td.text-center {
  vertical-align: middle;
}

#dash-lead-list .ui-table td.text-center .dash-lead-status-cell,
#home-followups-demo .ui-table td.text-center .dash-lead-status-cell {
  justify-content: center;
}

#dash-lead-list .ui-table td.text-center .dash-reached-out-cell,
#home-followups-demo .ui-table td.text-center .dash-reached-out-cell {
  justify-content: center;
}

#dash-lead-list .ui-table td.text-center .dash-reached-out-static,
#home-followups-demo .ui-table td.text-center .dash-reached-out-static {
  display: inline-block;
  text-align: center;
}

/* En-tête avec infobulle : même lecture que `.dash-reached-out-days-hint` (souligné pointillé). */
#dash-lead-list .ui-table thead th[data-tooltip],
#home-followups-demo .ui-table thead th[data-tooltip] {
  text-decoration: underline dotted color-mix(in srgb, var(--flow-muted) 55%, transparent);
  text-underline-offset: 3px;
}

#dash-lead-list .ui-table thead th[data-tooltip] {
  cursor: help;
}

#home-followups-demo .ui-table thead th[data-tooltip] {
  cursor: default;
}

/* Follow-ups : engagement (Hot / Initialized / Warm / Cold) — même code couleur que la modale lead */
#dash-lead-list .ui-table .dash-followups-heat-badge,
#home-followups-demo .ui-table .dash-followups-heat-badge {
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* Engagement : infobulle au survol du libellé Hot/Initialized/Warm/Cold (seuils = Calendar intent settings) */
#dash-lead-list .ui-table .dash-followups-heat-badge .dash-followups-qual-label[data-tooltip],
#home-followups-demo .ui-table .dash-followups-heat-badge .dash-followups-qual-label[data-tooltip] {
  text-decoration: underline dotted rgba(255, 255, 255, 0.58);
  text-underline-offset: 3px;
}

#dash-lead-list .ui-table .dash-followups-heat-badge .dash-followups-qual-label[data-tooltip] {
  cursor: help;
}

#home-followups-demo .ui-table .dash-followups-heat-badge .dash-followups-qual-label[data-tooltip] {
  cursor: default;
}

/* Lignes statut Abandoned : voile + gris + italique */
#dash-lead-list .ui-table tbody tr.dash-followup-row--abandoned td {
  position: relative;
  color: var(--flow-muted);
  font-style: italic;
  filter: grayscale(1);
}

/* Boutons / combobox : héritent souvent font-style: normal depuis ui-button */
#dash-lead-list .ui-table tbody tr.dash-followup-row--abandoned td :where(button, .dash-stats-combobox-trigger) {
  font-style: italic;
  color: var(--flow-muted);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--abandoned td .dash-stats-combobox-trigger {
  background: var(--flow-surface-2) !important;
  border: none !important;
  color: var(--flow-muted) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  transform: none !important;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--abandoned td .dash-stats-combobox-trigger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-surface-3) 20%, var(--flow-surface-2) 80%) !important;
  color: color-mix(in srgb, var(--flow-muted) 88%, var(--flow-text) 12%) !important;
  transform: none !important;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--abandoned td::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Même teinte que le fond page (section dashboard en transparent sur body) */
  background: color-mix(in srgb, var(--flow-bg) 50%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* Declined : même traitement que abandoned + texte rouge partout */
#dash-lead-list .ui-table tbody tr.dash-followup-row--declined td {
  position: relative;
  color: #b42318;
  font-style: italic;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--declined td :where(button, .dash-stats-combobox-trigger) {
  font-style: italic;
  color: #b42318;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--declined td .dash-stats-combobox-trigger {
  background: color-mix(in srgb, #b42318 12%, var(--flow-surface-2)) !important;
  border: 1px solid color-mix(in srgb, #b42318 35%, var(--flow-surface-3)) !important;
  color: #b42318 !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  transform: none !important;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--declined td .dash-stats-combobox-trigger:hover:not(:disabled) {
  background: color-mix(in srgb, #b42318 18%, var(--flow-surface-2)) !important;
  color: #b42318 !important;
  transform: none !important;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--declined td::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--flow-bg) 50%, transparent);
  pointer-events: none;
  z-index: 1;
}

.ui-table-preview-cell {
  width: 88px;
}

.ui-table-signal-cell {
  width: 28px;
  border-bottom: 0 !important;
  overflow: visible;
}

.ui-table th:first-child,
.ui-table td.ui-table-signal-cell,
.ui-table--skeleton td:first-child {
  border-bottom: 0 !important;
}

.dash-followup-signal {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-surface-3) 86%, #ffffff);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-in_progress .dash-followup-signal,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-in_progress .dash-followup-signal {
  background: var(--flow-followup-signal-in_progress);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-in_progress .dash-followup-signal.is-due,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-in_progress .dash-followup-signal.is-due {
  background: var(--flow-danger);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal {
  background: var(--flow-followup-signal-on_hold);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-converted .dash-followup-signal,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-converted .dash-followup-signal {
  background: var(--flow-followup-signal-converted);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-declined .dash-followup-signal,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-declined .dash-followup-signal {
  background: var(--flow-followup-signal-declined);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-abandoned .dash-followup-signal,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-abandoned .dash-followup-signal {
  background: var(--flow-followup-signal-abandoned);
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-saving {
  pointer-events: none;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-saving td:not(.ui-table-signal-cell) {
  opacity: 0.48;
  transition: opacity 0.15s ease;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-saving td.ui-table-signal-cell {
  position: relative;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-saving td.ui-table-signal-cell::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid color-mix(in srgb, var(--flow-muted) 45%, transparent);
  border-top-color: var(--flow-accent);
  border-radius: 50%;
  box-sizing: border-box;
  animation: settings-spin 0.65s linear infinite;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  #dash-lead-list .ui-table tbody tr.dash-followup-row--status-saving td.ui-table-signal-cell::after {
    animation: none;
    border-top-color: var(--flow-accent);
  }
}

@keyframes dash-followup-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  100% {
    transform: scale(2.35);
    opacity: 0;
  }
}

.dash-followup-signal.is-due {
  position: relative;
  z-index: 1;
  background: var(--flow-danger);
  box-shadow: none;
}

.dash-followup-signal.is-due::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--flow-danger);
  box-sizing: border-box;
  pointer-events: none;
  animation: dash-followup-ring 1.35s ease-out infinite;
}

/* On hold : point bleu fixe même si relance « due » (pas d’animation). */
#dash-lead-list .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due {
  background: var(--flow-followup-signal-on_hold) !important;
  box-shadow: none;
}

#dash-lead-list .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due::after,
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .dash-followup-signal.is-due::after {
    display: none;
  }

  .dash-followup-signal.is-due {
    background: var(--flow-danger);
    box-shadow: none;
  }

  #dash-lead-list .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due,
  #home-followups-demo .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due {
    background: var(--flow-followup-signal-on_hold) !important;
    box-shadow: none;
  }
}

.ui-table-preview-thumb {
  display: inline-block;
  width: 64px;
  height: 36px;
  border-radius: 8px;
  background: var(--flow-surface-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ui-table-preview-thumb.is-empty {
  background-image: none !important;
}

.ui-table-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ui-table-preview-button:hover .ui-table-preview-thumb {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.dash-lead-status-cell {
  display: inline-flex;
}

.dash-followups-lead-status-combobox {
  min-width: 168px;
}

#dash-followup-log-modal .dash-followup-drawer-form .dash-followups-lead-status-wrap {
  width: 100%;
}

#dash-followup-log-modal .dash-followup-drawer-form .dash-followups-lead-status-combobox {
  width: 100%;
  min-width: 0;
}

#dash-followup-log-modal .dash-followup-drawer-form .dash-stats-combobox-trigger {
  width: 100%;
  justify-content: space-between;
}

/* Statut pipeline : même surface grise que les tuiles KPI (pas de fond vert / jaune par statut). */

.dash-reached-out-cell {
  display: inline-flex;
  align-items: center;
}

.dash-reached-out-cell--readonly {
  justify-content: center;
  width: 100%;
}

.dash-reached-out-static {
  font-variant-numeric: tabular-nums;
  color: var(--flow-text);
  line-height: 1.35;
}

/* Infobulle « jours » (suivi reached-out). */
.dash-reached-out-days-hint {
  cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--flow-muted) 55%, transparent);
  text-underline-offset: 3px;
}

/* Libellé date + icône crayon (édition) */
.dash-date-trigger-label {
  font-variant-numeric: tabular-nums;
}

.dash-date-trigger-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.72;
}

.dash-date-trigger-icon iconify-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
}

/* Clic sans style « bouton » : date = texte de tableau ; vide = lien souligné (exclu de ui-button.js). */
.dash-reached-out-trigger {
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--flow-text);
  background: none !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: none;
  box-shadow: none;
}

.dash-reached-out-trigger--plain {
  font-weight: inherit;
}

.dash-reached-out-trigger--empty {
  color: var(--flow-accent);
}

.dash-reached-out-trigger--empty .dash-date-trigger-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Annule le style global button:hover (fond pill + translateY) : survol = soulignement uniquement */
.dash-reached-out-trigger:hover:not(:disabled) {
  background: none !important;
  transform: none !important;
  color: var(--flow-accent-overlay);
}

.dash-reached-out-trigger:hover:not(:disabled) .dash-date-trigger-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dash-reached-out-trigger--empty:hover:not(:disabled) {
  color: var(--flow-accent-overlay);
}

.dash-reached-out-trigger:hover:not(:disabled) .dash-date-trigger-icon {
  opacity: 1;
}

.dash-reached-out-trigger:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.dash-nextfollowup-readonly {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--flow-text);
}

.dash-nextfollowup-readonly.is-due {
  color: var(--flow-danger);
  font-weight: 600;
}

.dash-nextfollowup-readonly.is-due .dash-nextfollowup-trigger .dash-date-trigger-label {
  color: var(--flow-danger);
  font-weight: 600;
}

.dash-nextfollowup-readonly.is-due .dash-nextfollowup-trigger:hover:not(:disabled) {
  color: var(--flow-danger-hover);
}

.dash-nextfollowup-readonly.is-due .dash-nextfollowup-trigger:focus-visible {
  outline-color: var(--flow-danger);
}

/* Date « next follow-up » due : clic → drawer « Record follow-up » (pas le style pill global). */
.dash-nextfollowup-trigger {
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: none !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: center;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: inherit;
  transition: none;
  box-shadow: none;
}

.dash-nextfollowup-trigger:hover:not(:disabled) {
  background: none !important;
  transform: none !important;
  color: var(--flow-accent-overlay);
}

.dash-nextfollowup-trigger:hover:not(:disabled) .dash-date-trigger-label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dash-nextfollowup-trigger:hover:not(:disabled) .dash-date-trigger-icon {
  opacity: 1;
}

.dash-nextfollowup-trigger:focus-visible {
  outline: 2px solid var(--flow-accent);
  outline-offset: 2px;
}

.dash-followup-modal-helper {
  margin: -4px 0 6px;
  font-size: 12px;
}

.dash-followup-modal-helper--configured {
  margin: 14px 12px 18px;
  padding: 14px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.dash-followup-modal-helper--configured .dash-followup-modal-helper-line {
  display: block;
}

.dash-followup-modal-helper--configured .dash-followup-modal-helper-line--action {
  margin-top: 10px;
}

/*
 * Icône seule : accent uniquement si `scratchNote` rempli sur le lead ;
 * sinon même lecture que les icônes de menu inactives (`.dashboard-menu-icon`, opacity 0,55).
 */
button.dash-log-followup-btn {
  min-width: 32px;
  width: 32px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  border-radius: 10px;
  box-shadow: none !important;
  color: var(--flow-text) !important;
  transform: none !important;
  font-weight: 500;
}

button.dash-log-followup-btn:not(.dash-log-followup-btn--has-note) iconify-icon {
  opacity: 0.55;
}

button.dash-log-followup-btn.dash-log-followup-btn--has-note {
  color: var(--flow-accent) !important;
}

button.dash-log-followup-btn.dash-log-followup-btn--has-note iconify-icon {
  opacity: 1;
}

button.dash-log-followup-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--flow-accent) 12%, transparent) !important;
  color: var(--flow-accent-overlay) !important;
  transform: none !important;
}

button.dash-log-followup-btn:not(.dash-log-followup-btn--has-note):hover:not(:disabled) iconify-icon {
  opacity: 1;
}

button.dash-log-followup-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--flow-accent) 45%, transparent);
  outline-offset: 2px;
}

.dash-log-followup-btn iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  display: block;
  color: inherit;
}

#dash-followup-schedule-modal .dash-followup-modal-card {
  max-width: 420px;
  width: calc(100vw - 32px);
}

/*
 * Follow-up log : aligné sur shadcn Drawer direction="right" + scrollable content + DrawerFooter
 * (voir https://ui.shadcn.com/docs/components/radix/drawer#examples ).
 */
#dash-followup-log-modal.dash-followup-drawer-overlay {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  padding-right: env(safe-area-inset-right, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  overscroll-behavior: contain;
}

#dash-followup-log-modal.dash-followup-drawer-overlay.dash-followup-drawer-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  #dash-followup-log-modal.dash-followup-drawer-overlay,
  #dash-followup-log-modal .dash-followup-drawer-card {
    transition-duration: 0.01ms !important;
  }
}

#dash-followup-log-modal .dash-followup-drawer-card.ui-modal-card {
  padding: 0 !important;
  gap: 0 !important;
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.45);
}

#dash-followup-log-modal .dash-followup-drawer-card {
  width: min(400px, 100vw);
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px 0 0 12px;
  margin: 0;
  overflow: hidden;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

#dash-followup-log-modal.dash-followup-drawer-overlay--open .dash-followup-drawer-card {
  transform: translate3d(0, 0, 0);
}

#dash-followup-log-modal .dash-followup-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--flow-surface-3, #2f3b4b);
}

#dash-followup-log-modal .dash-followup-drawer-header .dash-followup-modal-close.dash-lead-modal-close {
  align-self: flex-start;
}

#dash-followup-log-modal .dash-followup-drawer-header-text {
  min-width: 0;
}

#dash-followup-log-modal .dash-followup-drawer-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  text-align: left;
}

#dash-followup-log-modal .dash-followup-drawer-description {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
}

#dash-followup-log-modal .dash-followup-drawer-scroll {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Équivalent « no-scrollbar » de l’exemple shadcn (scroll sans barre visible). */
#dash-followup-log-modal .dash-followup-drawer-scroll.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#dash-followup-log-modal .dash-followup-drawer-scroll.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Mode bloc-notes : centre verticalement le contenu dans la hauteur du drawer */
#dash-followup-log-modal #dash-followup-log-scroll:has(.dash-followup-scratch-editor) {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: 0;
}

#dash-followup-log-modal #dash-followup-log-scroll:has(.dash-followup-scratch-editor) .dash-followup-scratch-editor {
  width: 100%;
  flex: 0 1 auto;
}

#dash-followup-log-modal .dash-followup-scratch-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Bouton Save sous la textarea (scroll), pas dans le footer du drawer */
#dash-followup-log-modal .dash-followup-scratch-save-actions {
  align-self: stretch;
}

#dash-followup-log-modal .dash-followup-scratch-preview-actions {
  align-self: stretch;
}

#dash-followup-log-modal .dash-followup-scratch-preview-body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  color: var(--flow-text);
  max-height: min(52vh, 380px);
  overflow-y: auto;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px dashed var(--flow-surface-3, #2f3b4b);
}

#dash-followup-log-modal textarea.dash-followup-scratch-textarea,
#dash-followup-log-modal .dash-followup-scratch-textarea-wrap textarea {
  min-height: min(52vh, 380px);
  resize: vertical;
}

/* Message vide / erreur seule : centré H + V dans la zone scroll */
#dash-followup-log-modal #dash-followup-log-scroll:has(> .dash-followup-history-empty:only-child),
#dash-followup-log-modal #dash-followup-log-scroll:has(> .dash-followup-history-error:only-child) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#dash-followup-log-modal #dash-followup-log-scroll > .dash-followup-history-empty:only-child,
#dash-followup-log-modal #dash-followup-log-scroll > .dash-followup-history-error:only-child {
  margin: 0;
  max-width: min(320px, 100%);
}

#dash-followup-log-modal .dash-followup-drawer-footer {
  position: relative;
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid var(--flow-surface-3, #2f3b4b);
  border-bottom: none;
  background: color-mix(in srgb, var(--flow-surface-1, #131a24) 96%, #ffffff);
}

#dash-followup-log-modal #dash-followup-log-footer:empty {
  display: none;
}

#dash-followup-log-modal .dash-followup-drawer-footer-saving {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 2px;
  background: color-mix(in srgb, var(--flow-surface-1, #131a24) 82%, transparent);
  backdrop-filter: blur(3px);
}

#dash-followup-log-modal .dash-followup-drawer-footer-saving.is-visible {
  display: flex;
}

#dash-followup-log-modal .dash-followup-drawer-footer-saving-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--flow-surface-2, #1a2230);
  border: 1px solid var(--flow-surface-3, #2f3b4b);
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text);
}

/* Pastilles voile centrées : sans anneau animé (voile seul). */
#dash-followup-log-modal .dash-followup-veil-chip--minimal {
  gap: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
}

#dash-followup-log-modal .dash-followup-drawer-footer-actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 380px) {
  #dash-followup-log-modal .dash-followup-drawer-footer-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Skeleton drawer : ouverture immédiate pendant chargement API */
#dash-followup-log-modal .dash-followup-drawer-skeleton-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 70%, transparent);
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-line {
  display: block;
  border-radius: 8px;
  background: color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 78%, var(--flow-surface-1, #131a24));
  opacity: 0.9;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-line--meta {
  height: 14px;
  width: 42%;
  max-width: 160px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-line--tag {
  height: 22px;
  width: 38%;
  max-width: 140px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-line--note {
  height: 36px;
  width: 100%;
}

#dash-followup-log-modal .dash-followup-drawer-footer-skeleton {
  pointer-events: none;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-label {
  display: block;
  height: 11px;
  width: 28%;
  max-width: 72px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 78%, var(--flow-surface-1, #131a24));
  opacity: 0.9;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-input,
#dash-followup-log-modal .dash-followup-drawer-skeleton-textarea {
  display: block;
  width: 100%;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 78%, var(--flow-surface-1, #131a24));
  opacity: 0.9;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-input {
  height: 38px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-input--short {
  width: 72%;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-textarea {
  height: 72px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 4px;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-btn {
  display: inline-block;
  height: 38px;
  width: 124px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 78%, var(--flow-surface-1, #131a24));
  opacity: 0.9;
}

#dash-followup-log-modal .dash-followup-drawer-skeleton-btn--muted {
  width: 88px;
  opacity: 0.85;
}

#dash-followup-log-modal .dash-followup-history-heading {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#dash-followup-log-modal .dash-followup-history-heading--enter {
  opacity: 0;
  animation: dash-followup-stack-heading-enter 0.38s ease forwards;
}

@keyframes dash-followup-stack-heading-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#dash-followup-log-modal .dash-followup-history-item--enter {
  --dash-followup-stagger: 0;
  opacity: 0;
  animation: dash-followup-stack-item-enter 0.48s ease forwards;
  animation-delay: calc(56ms + var(--dash-followup-stagger) * 52ms);
}

@keyframes dash-followup-stack-item-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dash-followup-log-modal .dash-followup-history-heading--enter,
  #dash-followup-log-modal .dash-followup-history-item--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

#dash-followup-log-modal .dash-followup-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#dash-followup-log-modal .dash-followup-history-item {
  position: relative;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--flow-surface-3, #2f3b4b) 80%, transparent);
}

#dash-followup-log-modal .dash-followup-history-item-deleting {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--flow-surface-1, #131a24) 82%, transparent);
  backdrop-filter: blur(3px);
}

#dash-followup-log-modal .dash-followup-history-item-deleting.is-visible {
  display: flex;
}

#dash-followup-log-modal .dash-followup-history-item-deleting-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--flow-surface-2, #1a2230);
  border: 1px solid var(--flow-surface-3, #2f3b4b);
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text);
}

#dash-followup-log-modal .dash-followup-history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#dash-followup-log-modal .dash-followup-history-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

#dash-followup-log-modal .dash-followup-history-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

#dash-followup-log-modal .dash-followup-history-status-at-save--legacy {
  font-style: italic;
  font-weight: 500;
}

#dash-followup-log-modal .dash-followup-history-meta time {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--flow-text);
}

#dash-followup-log-modal .dash-followup-history-anchor-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-accent) 24%, transparent);
  color: var(--flow-text);
  white-space: nowrap;
}

#dash-followup-log-modal .dash-followup-history-channel {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flow-surface-2, #1a2230);
  color: var(--flow-muted);
}

#dash-followup-log-modal .dash-followup-history-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

#dash-followup-log-modal .dash-followup-history-note--none {
  font-size: 13px;
  font-style: italic;
}

#dash-followup-log-modal .dash-followup-history-empty:not(:only-child),
#dash-followup-log-modal .dash-followup-history-loading {
  margin: 8px 0 0;
  font-size: 14px;
}

#dash-followup-log-modal .dash-followup-history-empty:only-child {
  font-size: 14px;
}

#dash-followup-log-modal .dash-followup-history-error {
  margin: 8px 0 0;
  font-size: 14px;
  color: #c9a8a4;
}

#dash-followup-log-modal .dash-followup-history-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#dash-followup-log-modal .dash-followup-history-edit-btn,
#dash-followup-log-modal .dash-followup-history-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--flow-surface-3, #2f3b4b);
  background: var(--flow-surface-2, #1a2230);
  color: var(--flow-muted);
  cursor: pointer;
}

#dash-followup-log-modal .dash-followup-history-delete-btn:hover {
  color: #c9a8a4;
  border-color: color-mix(in srgb, #c9a8a4 40%, var(--flow-surface-3));
}

#dash-followup-log-modal .dash-followup-history-edit-panel {
  position: relative;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dash-followup-log-modal .dash-followup-history-edit-saving {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--flow-surface-1, #131a24) 82%, transparent);
  backdrop-filter: blur(3px);
}

#dash-followup-log-modal .dash-followup-history-edit-saving.is-visible {
  display: flex;
}

#dash-followup-log-modal .dash-followup-history-edit-saving-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--flow-surface-2, #1a2230);
  border: 1px solid var(--flow-surface-3, #2f3b4b);
  font-size: 14px;
  font-weight: 600;
  color: var(--flow-text);
}

#dash-followup-log-modal .dash-followup-history-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#dash-followup-log-modal .dash-followup-history-status-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flow-accent);
  color: var(--flow-on-accent);
}

.dash-followup-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dash-followup-modal-head h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.dash-followup-modal-head .dash-lead-modal-close {
  flex-shrink: 0;
}

.dash-followup-modal-body {
  display: grid;
  gap: 12px;
}

.dash-followup-modal-field {
  display: grid;
  gap: 6px;
}

.dash-followup-modal-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--flow-muted);
}

.dash-followup-checkbox-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
}

.dash-followup-checkbox-line input {
  margin-top: 4px;
  flex-shrink: 0;
}

.dash-followup-modal-helper a.dash-inline-settings-link,
.dash-followup-modal-helper a {
  color: var(--flow-accent);
  text-decoration: underline;
}

.dash-followup-modal-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-followup-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

.dash-followup-modal-actions.row.gap {
  justify-content: center;
}

/* Boutons d’action principaux des modales ui-modal-card : centrés */
.modal-card.ui-modal-card form > button[type="submit"]:last-of-type,
.modal-card.ui-modal-card form > .dash-followup-modal-actions {
  align-self: center;
}

/* Auth navbar : marges CTA (pas de recentrage étroit — voir .nav-signup-card #nav-su-submit). */
.modal-card.nav-signup-card.ui-modal-card form#nav-signup-form > button#nav-su-submit[type="submit"],
.modal-card.nav-signup-card.ui-modal-card form#nav-login-form > button#nav-li-submit[type="submit"] {
  align-self: stretch;
}

/* Rangée d’actions principale (Save / Cancel, etc.) : toujours centrée dans ui-modal-card */
.modal-card.ui-modal-card > .ui-modal-actions {
  justify-content: center;
}

.modal-card.ui-modal-card form > .row.gap:last-child {
  justify-content: center;
}

.ui-pagination {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* Dashboard list : pagination centrée, air sous la barre (direct ou dans `.dash-leads-grid-page-wrap`). */
#dash-lead-list nav.ui-pagination {
  justify-content: center;
  margin-bottom: 20px;
}

/* Vue Leads : pagination toujours sur la même ligne, même hauteur de barre. */
#dash-lead-list.dash-leads-grid-host > .dash-leads-grid-page-wrap > nav.ui-pagination {
  flex-shrink: 0;
  margin-top: 0;
  min-height: var(--dash-leads-pagination-slot, 44px);
  align-items: center;
}

#dash-lead-list.dash-leads-grid-host > .dash-leads-grid-page-wrap > nav.ui-pagination .ui-pagination-content {
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Vue calendrier RDV : air sous la grille (aligné sur la pagination). */
#dash-lead-list > .dash-rdv-calendar-grid {
  margin-bottom: 20px;
}

.ui-pagination-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Pagination : mêmes boutons que le dashboard (`ui-button` ajouté par components/ui-button.js) */
nav.ui-pagination button.ui-pagination-link.is-active {
  background: var(--flow-accent);
  color: #ffffff;
}

nav.ui-pagination button.ui-pagination-link.is-active:hover:not(:disabled) {
  background: var(--flow-accent-overlay);
  color: #ffffff;
}

.ui-pagination-ellipsis {
  width: 28px;
  text-align: center;
  color: var(--flow-muted);
}

@media (max-width: 900px) {
  .dashboard-page {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: auto;
  }

  .dashboard-side {
    min-height: auto;
    border-right: 0;
    padding: 0;
    background: transparent;
  }

  .dashboard-menu {
    position: static;
    z-index: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dash-followups-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dash-lead-list .dash-followups-list-toolbar {
    grid-template-columns: 1fr;
  }

  .dashboard-main--calendar {
    padding-left: 0;
    min-height: auto;
  }

  .dash-rdv-calendar-grid {
    grid-template-rows: repeat(var(--rdv-rows, 5), minmax(72px, auto));
    min-height: 360px;
  }

  .dash-rdv-calendar-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .dash-rdv-calendar-toolbar-center {
    text-align: center;
    order: -1;
  }

  .dash-rdv-calendar-toolbar-right {
    justify-content: flex-end;
  }
}

/* Homepage airy structure */
.home-layout {
  --home-layout-gap: 58px;
  --home-band-pad-block: clamp(96px, 12vw, 140px);
  --home-band-pad-block-end: clamp(56px, 7vw, 88px);
  display: grid;
  gap: var(--home-layout-gap);
  padding-top: 34px;
  padding-bottom: 0;
  margin-block-end: 0;
}

main.container.home-layout {
  padding-bottom: 0;
}

main.home-layout + .site-footer {
  margin-top: 0;
}

/* Bandes pleine largeur : empilées sans double gap (who, stats, why, follow-ups, meetings, pricing). */
.home-intro-band,
.home-mid-cta-band,
.home-dark-band,
.home-intro-why-band,
.home-calendar-section,
.home-followups-band,
.home-layout > .pricing-compare {
  margin-inline: calc(50% - 50vw);
  padding-block: var(--home-band-pad-block);
  padding-inline: calc(50vw - 50% + var(--layout-full-bleed-edge));
  box-sizing: border-box;
}

/* Sections intro/stats/why : même largeur utile que le container principal (évite la compression). */
.home-intro-band,
.home-mid-cta-band,
.home-dark-band,
.home-intro-why-band {
  padding-inline: calc(50vw - 50%);
}

.home-layout > .home-hero + .home-intro-band,
.home-layout > .home-intro-band + .home-mid-cta-band,
.home-layout > .home-mid-cta-band + .home-intro-why-band,
.home-layout > .home-intro-why-band + .home-dark-band,
.home-layout > .home-dark-band + .home-calendar-section,
.home-layout > .home-calendar-section + .home-followups-band,
.home-layout > .home-followups-band + .pricing-compare {
  margin-block-start: calc(-1 * var(--home-layout-gap));
}

/* Pricing : dernière bande — moins de marge basse (footer juste après) et haute (suite de meetings). */
.home-layout > .pricing-compare {
  padding-block-start: var(--home-band-pad-block-end);
  padding-block-end: var(--home-band-pad-block-end);
}

.home-hero {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  align-content: start;
  gap: clamp(24px, 4vw, 40px);
  box-sizing: border-box;
  background: var(--flow-bg);
}

.home-intro-lead {
  margin: 0 0 6px;
  max-width: 42ch;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--flow-text);
  text-align: center;
}

.home-intro-copy h1 {
  margin: 0;
  font-size: clamp(40px, 6.2vw, 66px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--flow-text);
  text-align: center;
  white-space: nowrap;
}

@keyframes home-hero-lead-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aperçu page lead : pleine largeur du container, split 50/50 comme campaign */
.home-hero-lead.split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: clamp(380px, 52vw, 620px);
  height: clamp(380px, 52vw, 620px);
  box-sizing: border-box;
  border: none;
  outline: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--flow-surface-1, #f8fafc);
  box-shadow: none;
  filter: drop-shadow(0 14px 32px rgba(15, 20, 28, 0.28));
  opacity: 0;
  transform: translateY(28px);
  animation: home-hero-lead-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.14s;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-lead.split {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }
}

.home-hero-lead.split > .video-pane,
.home-hero-lead.split > .form-pane.home-hero-form-pane {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
}

/* Home uniquement : panneau droit plus large pour le calendrier RDV (split ~40 % / ~60 %). */
.home-hero-lead.split > .video-pane {
  flex: 2 1 40%;
}

.home-hero-lead.split > .form-pane.home-hero-form-pane {
  flex: 3 1 60%;
}

.home-hero-lead .video-pane {
  padding: 0;
  border: none !important;
  border-right: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent !important;
  background-color: transparent !important;
}

.home-hero-lead .video-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

.home-hero-video-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
}

.home-hero-video {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  max-width: none;
  max-height: none;
  display: block;
  object-fit: cover;
  background: transparent !important;
  z-index: 1;
  opacity: 1;
  will-change: opacity;
}

/* Vignette en attente de lecture (fallback gradient + capture frame vidéo quand dispo). */
.video-start-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  background:
    radial-gradient(120% 100% at 10% 15%, color-mix(in srgb, var(--flow-accent) 34%, transparent), transparent 70%),
    linear-gradient(145deg, color-mix(in srgb, var(--flow-accent) 38%, #0f131b), #1a2230 56%, #131924);
  transition:
    opacity 0.28s ease-out,
    visibility 0s linear 0.28s;
}

.video-start-poster--captured {
  background-size: cover;
  background-position: center;
}

.video-start-poster--hidden {
  opacity: 0;
  visibility: hidden;
}

.video-start-poster__logo {
  width: clamp(64px, 18vw, 120px);
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.9;
}

.home-hero-video-accent-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flow-accent, #6366f1);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.35s ease-out;
}

.home-hero-outro-logo-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
}

.home-hero-outro-logo-wrap:not([hidden]) {
  display: flex;
}

.home-hero-outro-brand {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 18px);
  min-height: 0;
  padding: clamp(20px, 4vw, 32px);
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

.home-hero-outro-brand[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-video-accent-overlay {
    transition: none;
  }
}

.home-hero-outro-logo {
  width: clamp(96px, 22vw, 168px);
  height: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.home-hero-outro-brand-name {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--flow-text);
}

.home-hero-outro-tagline {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(0.9rem, 1.35vw, 1.05rem);
  line-height: 1.45;
}

.home-hero-outro-cta-block {
  margin-top: clamp(8px, 1.5vw, 14px);
}

.home-hero-outro-cta {
  flex-shrink: 0;
  margin-top: 0;
  padding: 14px 28px;
  min-height: 52px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.15;
}

.home-hero-video-accent-overlay--outro {
  opacity: 1 !important;
  pointer-events: none;
}

.home-hero-video-accent-overlay--interactive {
  pointer-events: auto;
}

.home-hero-video-frame--fading .home-hero-video {
  filter: brightness(0.92);
}

/* Redémarrage boucle : vidéo masquée, fond = accent (pas le noir du cadre). */
.home-hero-video-frame--restart-pending {
  background: var(--flow-accent, #29303e);
}

.home-hero-video-frame--restart-pending .home-hero-video {
  opacity: 0 !important;
  filter: none !important;
}

/* Opacité piste / marqueurs : synchronisée avec la vidéo dans home-hero-video.js (pas de calque fixe ici). */
.home-hero-video-frame--outro .timeline-markers {
  pointer-events: none;
}

.home-hero-lead .video-frame .home-hero-timeline-track {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 32px;
  height: 10px;
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.68) !important;
  border: 1px solid rgba(88, 107, 133, 0.5) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
  z-index: 2;
  cursor: pointer;
}

.home-hero-video-frame .timeline-progress {
  background: var(--flow-accent) !important;
}

/* Lecteur HTML5 : seeks / retour boucle — pas d’animation sur la tête (évite un « défilement » résiduel). */
.home-hero-video-frame .timeline-playhead,
.home-hero-video-frame .timeline-progress {
  transition: none;
}

.home-hero-video-frame .timeline-marker {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
}

.home-hero-video-frame .timeline-marker iconify-icon,
.home-hero-video-frame .timeline-marker .iconify {
  width: 15px !important;
  height: 15px !important;
  font-size: 15px !important;
}

.home-hero-video-frame button.timeline-marker {
  padding: 0 !important;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* Home hero only: when hovering the video, disable clicks on timeline markers (prevents flicker from ui-button hover/translate). */
.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers button.timeline-marker,
.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers .timeline-marker.ui-button {
  pointer-events: none !important;
  cursor: default !important;
  transform: none !important;
  transition: none !important;
}

.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers button.timeline-marker:hover,
.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers button.timeline-marker:active,
.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers button.timeline-marker:focus,
.home-hero-video-frame.home-hero-video-frame--video-hover #home-hero-timeline-markers button.timeline-marker:focus-visible {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.home-hero-video-frame .timeline-marker.blink {
  animation: marker-blink 0.55s ease-out;
}

.home-hero-lead .home-hero-form-pane,
.home-hero-lead .form-pane.home-hero-form-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  /* Même fond que la page lead par défaut (`pageBackground` #f8fafc), pas le blanc `--flow-surface-1`. */
  background: #f8fafc !important;
  overflow: hidden;
}

.home-hero-lead #lead-form {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Scroll uniquement pendant le RDV : évite une barre résiduelle après la boucle (pool + calendrier). */
.home-hero-lead #lead-form.rdv-focus-mode {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pool hors écran mais dimensionné : flatpickr + styles RDV pré-calculés (pas `hidden`). */
.home-hero-lead #home-hero-field-pool.home-hero-field-pool {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  contain: layout paint;
  z-index: 0;
}

.home-hero-lead #lead-form.rdv-focus-mode #home-hero-field-pool.home-hero-field-pool {
  visibility: visible;
}

.home-hero-lead #home-hero-sequential-stage {
  position: relative;
  z-index: 1;
}

.home-hero-form-intro-logo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: clamp(20px, 4vw, 32px);
  box-sizing: border-box;
  pointer-events: none;
}

.home-hero-form-intro-logo[hidden] {
  display: none !important;
}

.home-hero-form-intro-logo__img {
  width: clamp(96px, 22vw, 168px);
  height: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.home-hero-form-pane--outro .home-hero-form-intro-logo {
  display: none !important;
}

.home-hero-form-pane--outro #lead-form {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.home-hero-form-pane--outro .home-hero-outro-brand:not([hidden]) {
  display: flex;
  pointer-events: auto;
}

.home-hero-form-pane--outro .home-hero-outro-cta {
  pointer-events: auto;
}

/* Questions : pas de carte blanche (règle globale `.field { background: surface-1 }`). Fond = panneau #f8fafc. */
.home-hero-lead #lead-form .field,
.home-hero-lead #home-hero-sequential-stage > .field.field-appear {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Entrée / sortie : toggle `.visible` — questions, calendrier et outro (même courbe / durée). */
.home-hero-lead #home-hero-sequential-stage > .field.field-appear,
.home-hero-lead .home-hero-form-intro-logo.field-appear,
.home-hero-lead .home-hero-outro-logo-wrap.field-appear,
.home-hero-lead .home-hero-outro-brand.field-appear {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-hero-lead #home-hero-sequential-stage > .field.field-appear.visible,
.home-hero-lead .home-hero-form-intro-logo.field-appear.visible,
.home-hero-lead .home-hero-outro-logo-wrap.field-appear.visible,
.home-hero-lead .home-hero-outro-brand.field-appear.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Le mode RDV ne doit pas couper le fondu sur la scène hero (un seul champ à la fois). */
.home-hero-lead #lead-form.rdv-focus-mode #home-hero-sequential-stage > .field.field-appear {
  display: flex !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-lead #home-hero-sequential-stage > .field.field-appear,
  .home-hero-lead .home-hero-form-intro-logo.field-appear,
  .home-hero-lead .home-hero-outro-logo-wrap.field-appear,
  .home-hero-lead .home-hero-outro-brand.field-appear {
    transform: none;
    transition: opacity 0.2s ease-out;
  }
}

/* Radio / checkbox : surcharge « Final palette enforcement » sur `.choice-line`. */
.home-hero-lead #lead-form .choice-line,
.home-hero-lead #lead-form .choice-group > .choice-line,
.home-hero-lead #lead-form .campaign-radio-group .campaign-radio-line,
.home-hero-lead #lead-form .choice-group .campaign-checkbox-line {
  background: transparent !important;
  border-color: transparent !important;
}

.home-hero-lead #lead-form .campaign-radio-group .campaign-radio-line:hover,
.home-hero-lead #lead-form .choice-group .campaign-checkbox-line:hover {
  background: color-mix(in srgb, var(--flow-text) 6%, transparent) !important;
}

.home-hero-lead #lead-form .field.field-appear.blink {
  position: relative;
  z-index: 1;
  animation: campaign-field-emphasis 0.8s ease-out;
}

.home-hero-lead #lead-form .field[data-item-id="home-demo-booking"] {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.home-hero-lead #lead-form .manual-booking-root {
  width: 100%;
}

/* Scène : pas d’opacity/transition sur le panel — le fondu vient du `.field.field-appear` parent. */
.home-hero-lead #home-hero-sequential-stage .manual-booking-root--calendar-only .booking-panel,
.home-hero-lead #home-hero-sequential-stage .manual-booking-root--calendar-only .booking-panel.is-open {
  max-height: none !important;
  transform: none !important;
  overflow: visible !important;
  transition: none !important;
}

/* Pool (pré-montage) : pas d’anim max-height/opacity du panel au chargement. */
.home-hero-lead #home-hero-field-pool .manual-booking-root--calendar-only .booking-panel,
.home-hero-lead #home-hero-field-pool .manual-booking-root--calendar-only .booking-panel.is-open {
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

/* Home : même entrée/sortie que les questions — animation principale sur `.field.field-appear`. */
.home-hero-lead #lead-form.rdv-focus-mode .lead-sequential-stage {
  justify-content: center;
  align-items: stretch;
}

.home-hero-lead-below {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 14px;
  box-sizing: border-box;
}

/* Pile CTA home : note centrée sous le bouton (toutes sections). */
.home-hero-outro-cta-block,
.home-hero-lead-below-actions,
.home-lead-stats-cta-actions,
.home-used-by-cta-actions,
.home-calendar-cta-actions,
.home-followups-intro-cta-actions,
.pricing-compare-col-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.home-hero-outro-cta-note,
.home-hero-lead-below-note,
.home-lead-stats-cta-note,
.home-used-by-cta-note,
.home-calendar-cta-note,
.home-followups-intro-cta-note,
.pricing-compare-col-cta-actions .pricing-compare-cta-note {
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

@keyframes home-cta-pulse {
  0% {
    background-color: var(--flow-accent);
    border-color: color-mix(in srgb, var(--flow-accent) 72%, #000000);
  }

  100% {
    background-color: var(--flow-danger);
    border-color: var(--flow-danger-border);
  }
}

/* Start for free : pulse accent → danger (taille standard). */
a.home-cta-pulse.ui-button,
a.home-cta-pulse.pricing-compare-cta,
a.home-hero-lead-below-cta.home-cta-pulse,
a.home-hero-outro-cta.home-cta-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.16s ease, opacity 0.2s ease;
}

a.home-cta-pulse.ui-button:not(.home-cta-pulse--on-dark),
a.home-cta-pulse.pricing-compare-cta:not(.home-cta-pulse--on-dark),
a.home-hero-lead-below-cta.home-cta-pulse:not(.home-cta-pulse--on-dark),
a.home-hero-outro-cta.home-cta-pulse:not(.home-cta-pulse--on-dark) {
  border: 1px solid color-mix(in srgb, var(--flow-accent) 72%, #000000);
  animation: home-cta-pulse 2.6s ease-in-out infinite alternate;
}

.home-cta-pulse-label {
  display: block;
  line-height: 1;
}

/* Même échelle que le hero : icône ≈ taille du texte (pas 14px fixe). */
a.home-cta-pulse iconify-icon {
  flex-shrink: 0;
  display: block;
  width: 1.1em;
  height: 1.1em;
  font-size: 1.1em;
  line-height: 1;
}

/* Octicon arrow-up-right : glyphe un peu haut dans la viewBox → léger décalage bas. */
a.home-cta-pulse.ui-button:not(.home-hero-outro-cta) iconify-icon,
a.home-cta-pulse.pricing-compare-cta iconify-icon {
  transform: translateY(1px);
}

/* Bande sombre : fond blanc → danger ; texte accent → blanc (custom property typée = interpolation + lisibilité). */
@property --home-cta-on-dark-fg {
  syntax: "<color>";
  inherits: false;
  initial-value: #29303e;
}

@keyframes home-cta-pulse-on-dark {
  0% {
    background-color: #ffffff;
    border-color: #ffffff;
    --home-cta-on-dark-fg: var(--flow-accent);
  }

  100% {
    background-color: var(--flow-danger);
    border-color: var(--flow-danger-border);
    --home-cta-on-dark-fg: #ffffff;
  }
}

a.home-cta-pulse.home-cta-pulse--on-dark.ui-button,
a.home-cta-pulse.home-cta-pulse--on-dark.ui-button:visited {
  --home-cta-on-dark-fg: var(--flow-accent);
  animation: home-cta-pulse-on-dark 2.6s ease-in-out infinite alternate;
  border: 1px solid #ffffff;
  color: var(--home-cta-on-dark-fg) !important;
}

a.home-cta-pulse.home-cta-pulse--on-dark.ui-button:hover {
  animation: none;
  --home-cta-on-dark-fg: var(--flow-accent);
  background: #ffffff !important;
  border-color: #ffffff;
  color: var(--home-cta-on-dark-fg) !important;
}

a.home-cta-pulse.ui-button:hover,
a.home-hero-lead-below-cta.ui-button:hover {
  animation: none;
  background: var(--flow-accent-overlay) !important;
  border-color: color-mix(in srgb, var(--flow-accent) 72%, #000000);
}

@media (prefers-reduced-motion: reduce) {
  a.home-cta-pulse.ui-button {
    animation: none;
    background: var(--flow-accent) !important;
    border-color: color-mix(in srgb, var(--flow-accent) 72%, #000000);
  }

  a.home-cta-pulse.home-cta-pulse--on-dark.ui-button {
    animation: none;
    --home-cta-on-dark-fg: var(--flow-accent);
    background: #ffffff !important;
    border-color: #ffffff;
    color: var(--home-cta-on-dark-fg) !important;
  }
}

.home-hero-cta {
  justify-self: start;
}

/* Outro 5 s : split 40/60 — gauche accent, droite logo + accroche + CTA. */
.home-hero-lead--outro > .video-pane {
  border: none !important;
}

/* Sous le hero : section « Who is it for? » (même respiration que `.home-calendar-section`). */
.home-intro-band {
  position: relative;
  z-index: 1;
  background: var(--flow-bg);
  scroll-margin-top: 72px;
}

.home-mid-cta-band {
  background: var(--flow-bg);
  padding-block: clamp(20px, 3.2vw, 32px);
}

.home-mid-cta-layout {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.home-mid-cta-layout .home-used-by-cta-actions > a.home-cta-pulse.ui-button {
  padding: 14px 28px;
  min-height: 52px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.15;
}

.home-lead-stats-cta-actions > a.home-cta-pulse.ui-button,
.home-calendar-cta-actions > a.home-cta-pulse.ui-button,
.home-followups-intro-cta-actions > a.home-cta-pulse.ui-button,
.pricing-compare-col-cta-actions > a.home-cta-pulse.ui-button {
  min-width: 185px;
  min-height: 52px;
  padding: 14px 28px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.15;
}

.home-intro-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  min-width: 0;
}

/* Hero : accroche + aperçu lead (vidéo / formulaire). */
.home-intro-copy {
  display: grid;
  gap: clamp(8px, 1.2vw, 12px);
  align-content: start;
  justify-items: center;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding-top: clamp(30px, 4.8vw, 48px);
  padding-bottom: clamp(14px, 2.2vw, 22px);
  text-align: center;
}

.home-intro-copy .home-used-by-cta {
  margin-top: clamp(10px, 1.8vw, 18px);
}

.home-intro-band .home-used-by-section--intro {
  padding: 0;
  margin-inline: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  background: transparent;
}

.home-intro-band .home-used-by-layout {
  align-items: center;
}

.home-intro-why-band {
  background: var(--flow-bg);
  padding-block: clamp(56px, 8vw, 88px);
}

.home-intro-why-band .home-intro-why-split {
  max-width: 1120px;
  margin: 0 auto;
}

.home-intro-why-split {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: start;
  gap: clamp(28px, 4vw, 40px);
}

.home-intro-why-copy {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
  align-self: center;
}

.home-intro-why-copy .pricing-compare-eyebrow {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  margin-bottom: 4px;
}

.home-intro-why-title {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--flow-text);
  max-width: 15ch;
}

.home-intro-why-text {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--flow-muted);
}

/* Recalage vertical du masonry dans la bande "why" (évite l'effet trop bas). */
.home-intro-why-band .home-intro-masonry-stack {
  margin-top: 0;
}

.home-intro-why-band .home-intro-masonry .item-wrapper--man3 {
  top: 12%;
}

.home-intro-why-band .home-intro-masonry .item-wrapper--woman1 {
  top: 30%;
}

.home-intro-why-band .home-intro-masonry .item-wrapper--woman2 {
  top: 0;
}

@media (min-width: 900px) {
  .home-intro-why-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 56px);
    align-items: center;
  }

  .home-intro-masonry-host {
    grid-column: 1;
    grid-row: 1;
    justify-self: stretch;
    align-self: center;
    width: 100%;
  }

  .home-intro-why-copy {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    align-self: center;
    max-width: none;
  }
}

.home-dark-band {
  background: var(--flow-accent);
}

.home-used-by-section {
  background: var(--flow-bg);
}

.home-used-by-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
}

.home-used-by-copy {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
}

.home-used-by-copy .pricing-compare-eyebrow {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  margin-bottom: 4px;
}

.home-used-by-copy h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--flow-text);
}

.home-used-by-desc {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--flow-muted);
}

.home-used-by-cta {
  margin-top: 6px;
}

.home-used-by-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}


.home-used-by-item {
  min-width: 0;
}

@keyframes home-used-by-item-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.home-used-by-grid[data-used-by-reveal-ready="1"] .home-used-by-item:not(.home-used-by-item--in-view) {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}

.home-used-by-grid[data-used-by-reveal-ready="1"] .home-used-by-item.home-used-by-item--in-view {
  animation: home-used-by-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--home-used-by-stagger, 0) * 70ms);
}

.home-used-by-card {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: transparent;
}

.home-used-by-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-used-by-label {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.4vw, 18px);
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--flow-surface-1);
  border: 1px solid color-mix(in srgb, var(--obviouslead-control-border) 88%, transparent);
  box-shadow: 0 4px 18px color-mix(in srgb, #000000 10%, transparent);
  color: var(--flow-text);
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .home-used-by-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-used-by-copy {
    text-align: center;
    justify-items: center;
  }

  .home-used-by-copy .pricing-compare-eyebrow {
    justify-self: center;
  }

  .home-used-by-copy h2 {
    max-width: 18ch;
  }

  .home-used-by-desc {
    max-width: 46ch;
  }

}

@media (max-width: 520px) {
  .home-used-by-grid {
    gap: 10px;
  }

  .home-used-by-label {
    padding: 6px 12px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-used-by-grid[data-used-by-reveal-ready="1"] .home-used-by-item:not(.home-used-by-item--in-view),
  .home-used-by-grid[data-used-by-reveal-ready="1"] .home-used-by-item.home-used-by-item--in-view {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.home-lead-stats-showcase {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.home-lead-stats-copy {
  display: grid;
  gap: 14px;
  align-content: center;
  min-width: 0;
}

.home-lead-stats-copy .pricing-compare-eyebrow {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--flow-on-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--flow-on-accent) 24%, transparent);
  color: color-mix(in srgb, var(--flow-on-accent) 72%, transparent);
}

.home-lead-stats-copy h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--flow-on-accent);
}

.home-lead-stats-desc {
  margin: 0;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--flow-on-accent) 72%, transparent);
}

/* CTA taille standard `.ui-button` (pas le hero agrandi). */
.home-lead-stats-cta {
  margin-top: 6px;
}

.home-lead-stats-cta-note {
  color: color-mix(in srgb, var(--flow-on-accent) 72%, transparent);
}

.home-lead-stats-showcase:not(:has(.home-lead-stats-demo--in-view)) .home-lead-stats-copy {
  opacity: 0;
  transform: translateY(12px);
}

.home-lead-stats-showcase:has(.home-lead-stats-demo--in-view) .home-lead-stats-copy {
  animation: home-stats-demo-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.16s;
}

@media (max-width: 960px) {
  .home-lead-stats-showcase {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
  }

  .home-lead-stats-copy {
    text-align: center;
    justify-items: center;
    width: 100%;
  }

  .home-lead-stats-demo-card.modal-card {
    width: min(560px, 100%);
  }

  /* Démo home : pas le padding modale dashboard (50px) — sinon meta / tuiles collées en mobile. */
  .home-lead-stats-demo-card.modal-card.dash-lead-modal-card.ui-modal-card {
    padding: clamp(18px, 4.2vw, 28px) !important;
    gap: 10px !important;
    box-sizing: border-box;
  }

  .home-lead-stats-copy .pricing-compare-eyebrow {
    justify-self: center;
  }

  .home-lead-stats-copy h2 {
    max-width: 18ch;
  }

  .home-lead-stats-desc {
    max-width: 46ch;
  }

  .home-lead-stats-demo-card .dash-lead-modal-meta-row--with-favorite {
    margin-bottom: 16px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-title-line-text {
    font-size: clamp(15px, 4.2vw, 18px);
  }
}

@media (max-width: 640px) {
  .home-lead-stats-demo-card.modal-card.dash-lead-modal-card.ui-modal-card {
    padding: clamp(16px, 4vw, 22px) !important;
  }

  .home-lead-stats-demo-card .dash-lead-modal-meta-row--with-favorite {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    padding: 14px 12px;
    margin-bottom: 16px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-meta-row--with-favorite .dash-lead-modal-meta-slot:nth-child(3),
  .home-lead-stats-demo-card .dash-lead-modal-meta-row--with-favorite .dash-lead-modal-meta-slot:nth-child(5) {
    padding-left: 10px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-meta-slot {
    gap: 8px;
    padding-inline: 4px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-meta-slot-label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }

  .home-lead-stats-demo-card .dash-lead-modal-decision-badge,
  .home-lead-stats-demo-card .dash-lead-modal-heat-badge {
    padding: 4px 8px;
    font-size: 10px;
    max-width: 100%;
  }

  .home-lead-stats-demo-card button.dash-lead-favorite-switch.dash-ui-switch {
    width: 34px;
    height: 20px;
  }

  .home-lead-stats-demo-card button.dash-lead-favorite-switch.dash-ui-switch .dash-ui-switch-thumb {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
  }

  .home-lead-stats-demo-card button.dash-lead-favorite-switch.dash-ui-switch[aria-checked="true"] .dash-ui-switch-thumb {
    transform: translateX(14px);
  }

  .home-lead-stats-demo-card .dash-lead-modal-created-line {
    padding-inline: 4px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-title-line {
    padding-inline: 8px;
    margin-bottom: 14px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-grid-host {
    padding-inline: 2px;
  }

  .home-lead-stats-demo-card .dash-lead-modal-channel-section {
    padding-inline: 4px;
  }
}

.home-lead-stats-demo-card.modal-card {
  width: min(560px, 100%);
  background: var(--flow-surface-1) !important;
  border: 1px solid color-mix(in srgb, var(--obviouslead-control-border) 88%, transparent) !important;
  color: var(--flow-text);
  box-shadow: none;
}

.home-lead-stats-demo-body {
  pointer-events: none;
}

/* Démo stats home : carte + cascade au scroll (classe `.home-lead-stats-demo--in-view` via IO). */
@keyframes home-stats-demo-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-stats-channel-title-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 0.85;
    transform: translateY(0);
  }
}

.home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view {
  animation: dash-lead-modal-card-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.05s;
}

.home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) .home-lead-stats-demo-body
  :is(
    > .dash-lead-modal-created-line,
    > .dash-lead-modal-media,
    > .dash-lead-modal-title-line,
    .dash-lead-modal-meta-row .dash-lead-modal-meta-slot,
    .dash-lead-modal-grid .dash-lead-modal-item,
    .dash-channel-compact-list .dash-channel-cell
  ) {
  opacity: 0;
}

.home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) .home-lead-stats-channel-title {
  opacity: 0;
  transform: translateY(10px);
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-demo-body
  :is(
    > .dash-lead-modal-created-line,
    > .dash-lead-modal-media,
    > .dash-lead-modal-title-line,
    .dash-lead-modal-meta-row .dash-lead-modal-meta-slot,
    .dash-lead-modal-grid .dash-lead-modal-item,
    .dash-channel-compact-list .dash-channel-cell
  ) {
  animation: home-stats-demo-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-channel-title {
  animation: home-stats-channel-title-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-demo-body > .dash-lead-modal-created-line {
  animation-delay: 0.12s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-demo-body > .dash-lead-modal-media {
  animation-delay: 0.18s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-demo-body > .dash-lead-modal-title-line {
  animation-delay: 0.24s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-meta-row
  .dash-lead-modal-meta-slot:nth-child(1) {
  animation-delay: 0.3s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-meta-row
  .dash-lead-modal-meta-slot:nth-child(3) {
  animation-delay: 0.36s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-meta-row
  .dash-lead-modal-meta-slot:nth-child(5) {
  animation-delay: 0.42s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-grid
  .dash-lead-modal-item:nth-child(1) {
  animation-delay: 0.48s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-grid
  .dash-lead-modal-item:nth-child(2) {
  animation-delay: 0.54s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-grid
  .dash-lead-modal-item:nth-child(3) {
  animation-delay: 0.6s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-grid
  .dash-lead-modal-item:nth-child(4) {
  animation-delay: 0.66s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-lead-modal-grid
  .dash-lead-modal-item:nth-child(5) {
  animation-delay: 0.72s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-channel-title {
  animation-delay: 0.8s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(1) {
  animation-delay: 0.86s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(2) {
  animation-delay: 0.91s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(3) {
  animation-delay: 0.96s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(4) {
  animation-delay: 1.01s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(5) {
  animation-delay: 1.06s;
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view
  .home-lead-stats-demo-body
  .dash-channel-compact-list
  .dash-channel-cell:nth-child(6) {
  animation-delay: 1.11s;
}

@media (prefers-reduced-motion: reduce) {
  .home-lead-stats-showcase:not(:has(.home-lead-stats-demo--in-view)) .home-lead-stats-copy,
  .home-lead-stats-showcase:has(.home-lead-stats-demo--in-view) .home-lead-stats-copy {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view),
  .home-lead-stats-demo-card.home-lead-stats-demo--in-view {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) .home-lead-stats-demo-body
    :is(
      > .dash-lead-modal-created-line,
      > .dash-lead-modal-media,
      > .dash-lead-modal-title-line,
      .dash-lead-modal-meta-row .dash-lead-modal-meta-slot,
      .dash-lead-modal-grid .dash-lead-modal-item,
      .dash-channel-compact-list .dash-channel-cell
    ),
  .home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-demo-body
    :is(
      > .dash-lead-modal-created-line,
      > .dash-lead-modal-media,
      > .dash-lead-modal-title-line,
      .dash-lead-modal-meta-row .dash-lead-modal-meta-slot,
      .dash-lead-modal-grid .dash-lead-modal-item,
      .dash-channel-compact-list .dash-channel-cell
    ),
  .home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) .home-lead-stats-channel-title,
  .home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-lead-stats-channel-title {
    animation: none !important;
    opacity: 0.85 !important;
    transform: none !important;
  }

  .home-lead-stats-demo-card .home-watch-progress-line {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .home-lead-stats-demo-card .dash-watch-peak-pct {
    opacity: 1 !important;
  }
}

/* Home stats demo : remplissage courbe = même gabarit SVG que `renderWatchPeakVizMarkup` (lead-tile). */
.home-lead-stats-demo-card {
  --home-watch-anim-duration: 2s;
  --home-watch-anim-delay: 0.62s;
  --home-watch-track-length: 288;
}

@keyframes home-watch-line-fill {
  to {
    stroke-dashoffset: 0;
  }
}

.home-lead-stats-demo-card:not(.home-lead-stats-demo--in-view) .home-watch-progress-line {
  stroke-dasharray: var(--home-watch-track-length);
  stroke-dashoffset: var(--home-watch-track-length);
}

.home-lead-stats-demo-card.home-lead-stats-demo--in-view .home-watch-progress-line {
  stroke-dasharray: var(--home-watch-track-length);
  stroke-dashoffset: var(--home-watch-track-length);
  animation: home-watch-line-fill var(--home-watch-anim-duration) cubic-bezier(0.33, 1, 0.42, 1) forwards;
  animation-delay: var(--home-watch-anim-delay);
}

.home-lead-stats-demo-card .home-stat-count {
  font-variant-numeric: tabular-nums;
}

.home-lead-stats-demo-card .dash-watch-peak-pct.home-stat-count {
  min-height: 1.35em;
}

.home-lead-stats-demo-body button.dash-lead-favorite-switch[aria-checked="true"]:disabled {
  opacity: 1;
  background: var(--flow-accent);
}

.home-lead-stats-demo-media .home-lead-stats-demo-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.home-lead-stats-demo-media .video-start-poster {
  z-index: 0;
}

.home-lead-stats-demo-logo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flow-surface-2);
  opacity: 0;
  pointer-events: none;
}

.home-lead-stats-demo-logo-overlay:not([hidden]) {
  display: flex;
}

.home-lead-stats-demo-logo {
  width: clamp(72px, 20vw, 112px);
  height: auto;
  display: block;
  object-fit: contain;
}

.dash-lead-modal-media--preview {
  pointer-events: none;
}

.home-lead-stats-demo-media.dash-lead-modal-media--preview {
  background-image: none;
}

.dash-lead-modal-media-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #000000 16%, transparent);
}

.dash-lead-modal-media-preview-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, #ffffff 88%, transparent);
  border: 2px solid color-mix(in srgb, #ffffff 70%, transparent);
  position: relative;
}

.dash-lead-modal-media-preview-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--obviouslead-chrome-accent);
}

.home-dark-cards {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-dark-card {
  background: var(--obviouslead-chrome-accent);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 210px;
}

.home-dark-card h3 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.02;
  max-width: 12ch;
}

.home-dark-eyebrow {
  margin: 0;
  color: #c9c9d1;
  font-size: 12px;
}

.home-dark-cta {
  align-self: end;
  justify-self: start;
}

a.ui-button.home-dark-cta--inverse,
a.ui-button.home-dark-cta--inverse:visited {
  background: #ffffff !important;
  color: var(--flow-accent) !important;
}

a.ui-button.home-dark-cta--inverse:hover {
  background: color-mix(in srgb, #ffffff 86%, var(--flow-accent) 14%) !important;
  color: var(--flow-accent-overlay) !important;
}

@media (max-width: 900px) {
  .home-layout {
    --home-layout-gap: 38px;
  }

  .home-hero {
    grid-template-columns: 1fr;
  }

  .home-intro-copy h1 {
    font-size: clamp(32px, 7.5vw, 40px);
  }

  .home-dark-cards {
    grid-template-columns: 1fr;
  }
}

/*
 * Hero lead preview mobile : même gabarit que la page lead portrait
 * (vidéo plein cadre + volet bas à hauteur fixe, scroll interne).
 */
@media (max-width: 900px) and (orientation: portrait) {
  .home-hero-lead.split {
    --home-hero-mobile-h: min(580px, 78dvh);
    --home-hero-drawer-h: min(320px, 54%);
    position: relative;
    display: block;
    width: 100%;
    height: var(--home-hero-mobile-h);
    min-height: var(--home-hero-mobile-h);
    max-height: var(--home-hero-mobile-h);
    overflow: hidden;
    flex-direction: unset;
  }

  .home-hero-lead.split > .video-pane,
  .home-hero-lead.split > .form-pane.home-hero-form-pane {
    flex: none;
  }

  .home-hero-lead .video-pane {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: unset;
    border: none !important;
  }

  .home-hero-lead .video-frame,
  .home-hero-lead .home-hero-video-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
  }

  .home-hero-lead .form-pane.home-hero-form-pane {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: var(--home-hero-drawer-h);
    min-height: var(--home-hero-drawer-h);
    max-height: var(--home-hero-drawer-h);
    flex: none;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--flow-surface-3, #2a3342) 42%, transparent);
    box-shadow: 0 -10px 36px rgba(15, 20, 28, 0.22);
    box-sizing: border-box;
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* 1re question (playhead sur marqueur) ou outro : volet visible. */
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open .form-pane.home-hero-form-pane,
  .home-hero-lead .form-pane.home-hero-form-pane.home-hero-form-pane--outro {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* RDV : volet plus haut — calendrier non rogné, scroll sur #lead-form. */
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open:has(#lead-form.rdv-focus-mode) {
    --home-hero-drawer-h: min(500px, min(72dvh, 78%));
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open:has(#lead-form.rdv-focus-mode) .form-pane.home-hero-form-pane {
    contain: none;
    overflow: hidden;
  }

  /* Mobile : jamais de logo d’intro (questions dès le 1er marqueur). */
  .home-hero-lead--mobile-lead .home-hero-form-intro-logo {
    display: none !important;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open .form-pane.home-hero-form-pane:not(.home-hero-form-pane--outro) {
    background: color-mix(in srgb, var(--flow-surface-1) 80%, transparent) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    backdrop-filter: blur(10px) saturate(1.08);
  }

  @supports (color: color-mix(in srgb, white 50%, black)) {
    .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open
      .form-pane.home-hero-form-pane:not(.home-hero-form-pane--outro) {
      background: color-mix(in srgb, var(--flow-surface-1) 78%, transparent) !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open
      .form-pane.home-hero-form-pane:not(.home-hero-form-pane--outro) {
      background: var(--flow-surface-1) !important;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  .home-hero-lead--mobile-lead .form-pane.home-hero-form-pane::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 10px auto 6px;
    flex-shrink: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--flow-text) 24%, transparent);
  }

  .home-hero-lead .form-pane.home-hero-form-pane.home-hero-form-pane--outro {
    background: var(--flow-surface-1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden;
  }

  .home-hero-form-pane--outro .home-hero-outro-brand:not([hidden]) {
    display: flex;
    pointer-events: auto;
  }

  .home-hero-lead #lead-form {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    justify-content: flex-start !important;
  }

  .home-hero-lead #home-hero-sequential-stage {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .home-hero-lead #lead-form:not(.rdv-focus-mode) #home-hero-sequential-stage {
    justify-content: safe center !important;
  }

  .home-hero-lead #lead-form.rdv-focus-mode #home-hero-sequential-stage {
    justify-content: flex-start !important;
  }

  /* RDV : scroll interne du volet (questions = pas de barre). */
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode #home-hero-sequential-stage {
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: min-content;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .field[data-item-id="home-demo-booking"] {
    flex: 0 0 auto;
    min-height: auto;
    align-self: stretch;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-root,
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .booking-panel.is-open {
    max-height: none !important;
    overflow: visible !important;
  }

  .home-hero-lead #lead-form .field[data-item-id="home-demo-booking"] .manual-booking-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .home-hero-lead #lead-form .field[data-item-id="home-demo-booking"] .manual-booking-left {
    display: none;
  }

  .home-hero-lead #lead-form .field[data-item-id="home-demo-booking"] .manual-booking-right {
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

.home-hero-lead #lead-form .manual-booking-calendar-wrap {
  min-width: 0;
  width: 100%;
  overflow: visible;
  --mb-cal-gap: 2px;
  --mb-cal-inset-x: 6px;
  --mb-cal-inset-y: 6px;
}

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap {
    overflow: visible;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap .flatpickr-calendar.inline,
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap .flatpickr-months,
  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap .flatpickr-innerContainer {
    overflow: visible !important;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap .flatpickr-months .flatpickr-month {
    min-height: 44px !important;
    overflow: visible !important;
  }

  .home-hero-lead--mobile-lead.home-hero-lead--mobile-questions-open #lead-form.rdv-focus-mode .manual-booking-calendar-wrap .flatpickr-current-month {
    min-height: 40px !important;
    overflow: visible !important;
  }

  .home-hero-lead #lead-form .manual-booking-controls {
    padding: 8px;
  }

  .home-hero-lead #lead-form .manual-booking-time-row {
    flex-direction: column;
    gap: 8px;
  }

  .home-hero-lead #lead-form .manual-booking-time-control,
  .home-hero-lead #lead-form .manual-booking-tz-control {
    width: 100%;
    max-width: none;
  }

  .home-hero-lead #lead-form .manual-booking-calendar-wrap .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100%;
  }

  .home-hero-lead #lead-form .manual-booking-calendar-wrap .flatpickr-day {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .home-hero-lead #lead-form .manual-booking-calendar-wrap .flatpickr-weekday {
    font-size: 10px !important;
  }

  .home-hero-lead #lead-form .field {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .home-hero-lead.split {
    flex-direction: row;
    height: min(420px, 88dvh);
    min-height: min(420px, 88dvh);
    max-height: min(420px, 88dvh);
    overflow: hidden;
  }

  .home-hero-lead .video-pane {
    flex: 1 1 42%;
    width: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: unset;
  }

  .home-hero-lead .form-pane.home-hero-form-pane {
    flex: 1 1 58%;
    width: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    contain: layout style;
  }

  .home-hero-lead #lead-form {
    height: 100%;
    min-height: 0;
    overflow-y: hidden;
  }

  .home-hero-lead #lead-form.rdv-focus-mode {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Settings contrast fixes (final override) */
.settings-page .settings-btn-muted {
  background: var(--flow-surface-2) !important;
  color: var(--flow-text) !important;
  opacity: 1 !important;
}

.settings-page .settings-btn-muted:hover {
  background: var(--flow-surface-3) !important;
  color: var(--flow-text) !important;
}

.settings-page .settings-btn-save,
.settings-page .settings-btn-save.ui-button {
  background: var(--flow-accent) !important;
  border: 1px solid var(--flow-accent-overlay) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.settings-page .settings-btn-save:disabled,
.settings-page .settings-btn-save.ui-button:disabled {
  opacity: 0.62 !important;
  cursor: not-allowed;
  filter: none !important;
}

.settings-page .settings-btn-save:hover:not(:disabled) {
  filter: brightness(1.06);
}

.settings-page #settings-preview-add-bio {
  background: var(--flow-surface-2) !important;
  color: var(--flow-text) !important;
  opacity: 1 !important;
}

.settings-page #settings-preview-add-bio:hover {
  background: var(--flow-surface-3) !important;
  color: var(--flow-text) !important;
}

.settings-page .settings-preview-booking-right,
.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap,
.settings-page .settings-preview-booking-right .manual-booking-controls,
.settings-page .settings-preview-booking-right .flatpickr-calendar.inline {
  background: var(--flow-surface-1) !important;
  color: var(--flow-text) !important;
}

.settings-page .settings-preview-booking-right .flatpickr-current-month .flatpickr-monthDropdown-months,
.settings-page .settings-preview-booking-right .flatpickr-current-month input.cur-year,
.settings-page .settings-preview-booking-right .flatpickr-weekday,
.settings-page .settings-preview-booking-right .flatpickr-day,
.settings-page .settings-preview-booking-right .booking-side-title,
.settings-page .settings-preview-booking-right .booking-visio-line,
.settings-page .settings-preview-booking-right .booking-visio-link {
  color: var(--flow-text) !important;
}

.settings-page .settings-preview-booking-right .flatpickr-day.selected,
.settings-page .settings-preview-booking-right .flatpickr-day.startRange,
.settings-page .settings-preview-booking-right .flatpickr-day.endRange,
.settings-page .settings-preview-booking-right .flatpickr-day:hover,
.settings-page .settings-preview-booking-right .booking-type-btn.is-active {
  background: var(--flow-accent) !important;
  color: var(--flow-manual-booking-type-active-text, #fff) !important;
}

.settings-page .settings-preview-booking-right .flatpickr-day.today {
  border-color: var(--flow-accent) !important;
}

.settings-page .settings-preview-booking-right .flatpickr-day.prevMonthDay,
.settings-page .settings-preview-booking-right .flatpickr-day.nextMonthDay {
  color: color-mix(in srgb, var(--flow-text) 38%, var(--flow-muted, #667085)) !important;
}

.settings-page .settings-preview-booking-right .flatpickr-day.flatpickr-disabled,
.settings-page .settings-preview-booking-right .flatpickr-day.flatpickr-disabled:hover {
  opacity: 0.35 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--flow-text) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Settings preview calendar only: force 7-column grid + stable height (avoid flex-wrap overflow on wide preview). */
.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-innerContainer {
  display: block !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-days {
  display: block !important;
  height: auto !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekdays {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: var(--mb-cal-gap, 3px) !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekdaycontainer {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: var(--mb-cal-gap, 3px) !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-weekday {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-dayContainer,
.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: var(--mb-cal-gap, 3px) !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-items: center !important;
  align-content: start !important;
}

.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-day {
  flex: none !important;
  width: 100% !important;
}

/* Aperçu Settings : pastilles plus compactes. */
.settings-page .settings-preview-booking-right .manual-booking-calendar-wrap.settings-mock-cal-wrap .flatpickr-day {
  max-width: 2.125rem !important;
  max-height: 2.125rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

/* Builder simulation: no background on revealed fields */
#sim-form .field {
  background: transparent !important;
}

#sim-status {
  min-height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--flow-text);
}

/* Même points animés que `ObviousleadToast` (`loadingDots`) — pas d’animation ::after / steps. */
#sim-status.is-loading {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0;
}

#sim-status .obviouslead-toast__ellipsis-run {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
}

#sim-status .obviouslead-toast__ellipsis-run span {
  display: inline-block;
  min-width: 0.12em;
  text-align: center;
  animation: obviouslead-toast-ellipsis 1.05s ease-in-out infinite;
}

#sim-status .obviouslead-toast__ellipsis-run span:nth-child(2) {
  animation-delay: 0.18s;
}

#sim-status .obviouslead-toast__ellipsis-run span:nth-child(3) {
  animation-delay: 0.36s;
}

/* Final input border override (couleur = `--obviouslead-control-border`) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea:not(.ui-textarea),
select,
.ui-input:not(textarea):not(.dash-stats-combobox-trigger):not([type="color"]):not([type="file"]) {
  border: var(--obviouslead-input-border-width) solid var(--obviouslead-control-border) !important;
  background: var(--flow-surface-1) !important;
}

/*
 * Textarea — port shadcn/ui (Radix). Bordure stable : pas d’accent au focus/survol/sélection texte.
 * @see https://ui.shadcn.com/docs/components/radix/textarea
 */
textarea.ui-textarea.ui-input {
  border: 1px solid var(--flow-surface-3, #e5e7eb) !important;
  background: var(--flow-surface-1) !important;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 5rem;
  resize: vertical;
  cursor: text;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: normal;
  border-radius: 0.375rem !important;
  padding: 0.5rem 0.75rem;
  color: var(--flow-text);
  box-shadow: none !important;
}

/* Lead + aperçu builder : la règle shadcn ci‑dessus impose une pile système — on réaligne sur `--flow-lead-font`. */
body.campaign-page textarea.ui-textarea.ui-input,
#builder-appearance-lead-sim textarea.ui-textarea.ui-input,
#config-simulation.builder-config-simulation--appearance textarea.ui-textarea.ui-input {
  font-family: var(--flow-lead-font);
}

textarea.ui-textarea.ui-input::placeholder {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-style: normal;
  font-weight: 400;
  color: color-mix(in srgb, var(--flow-muted) 90%, var(--flow-text));
  opacity: 1;
}

textarea.ui-textarea.ui-input:hover:not(:disabled) {
  border-color: var(--flow-surface-3, #e5e7eb) !important;
}

textarea.ui-textarea.ui-input:focus,
textarea.ui-textarea.ui-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--flow-surface-3, #e5e7eb) !important;
}

textarea.ui-textarea.ui-input::selection {
  background: color-mix(in srgb, var(--flow-text) 10%, var(--flow-surface-2));
  color: var(--flow-text);
}

textarea.ui-textarea.ui-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

textarea.ui-textarea.ui-input[aria-invalid="true"],
textarea.ui-textarea.ui-input[aria-invalid="true"]:focus {
  border-color: var(--flow-surface-3, #e5e7eb) !important;
}

/* --- Scroll reveal (global) : fondu + léger slide au scroll pour les blocs <main> --- */
.scroll-reveal {
  transition:
    opacity 0.55s ease-out,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal.scroll-reveal--pending {
  opacity: 0;
  transform: translateY(14px);
}

.scroll-reveal.scroll-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.scroll-reveal--pending {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.home-calendar-section {
  background: var(--flow-bg);
}

.home-calendar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: stretch;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.home-calendar-showcase.card {
  margin-top: 0;
  width: 100%;
  min-width: 0;
  padding: 18px 22px 22px;
  background: var(--flow-surface-1) !important;
  border: 1px solid color-mix(in srgb, var(--flow-surface-3) 88%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, #000000 6%, transparent);
  overflow: visible;
}

.home-calendar-demo {
  min-width: 0;
}

.home-calendar-demo .dash-rdv-pill,
.home-calendar-demo .dash-rdv-cal-btn:not(.dash-stats-combobox-trigger) {
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}

.home-calendar-demo .dash-rdv-calendar-toolbar-right .dash-rdv-cal-btn.ui-button:disabled {
  opacity: 0.5;
  background: color-mix(in srgb, var(--flow-accent) 40%, var(--flow-surface-3));
  color: color-mix(in srgb, var(--flow-muted) 88%, var(--flow-text));
  border: 1px solid var(--flow-surface-3);
  box-shadow: none;
}

.home-calendar-demo .dash-rdv-pill:hover:not(:disabled) {
  transform: none;
}

.home-calendar-demo .dash-rdv-pill {
  height: auto;
  align-items: stretch;
  border-radius: 10px;
  padding: 7px 8px;
}

.home-calendar-demo .dash-rdv-pill-text.home-cal-pill-text {
  display: grid;
  gap: 3px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.25;
  font-size: 11px;
  text-align: center;
}

.home-calendar-demo .home-cal-pill-line--time {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.92;
}

.home-calendar-demo .home-cal-pill-line--name {
  font-weight: 700;
  word-break: break-word;
}

.home-calendar-demo .home-cal-pill-line--mod {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
}

.home-calendar-demo .dash-rdv-day-events {
  overflow-x: visible;
}

.home-calendar-showcase .dash-rdv-calendar-grid,
.home-followups-showcase .dash-rdv-calendar-grid {
  min-height: min(48vh, 600px);
  grid-template-rows: repeat(var(--rdv-rows, 5), minmax(116px, auto));
}

.home-calendar-demo .dash-rdv-day {
  min-height: 116px;
  padding: 6px 6px 8px;
}

.home-calendar-demo .dash-rdv-pill-text.home-cal-pill-text {
  font-size: 11px;
  line-height: 1.3;
  gap: 2px;
}

/* Home calendrier démo : apparition au scroll (toolbar → jours → pilules). */
@keyframes home-cal-block-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-cal-pill-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-calendar-toolbar,
.home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-calendar-weekdays {
  opacity: 0;
}

.home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-day {
  opacity: 0;
}

.home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-pill {
  opacity: 0;
}

.home-calendar-demo:not(.home-calendar-demo--in-view) .home-cal-agenda-item {
  opacity: 0;
}

.home-calendar-demo.home-calendar-demo--in-view .dash-rdv-calendar-toolbar {
  animation: home-cal-block-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.04s;
}

.home-calendar-demo.home-calendar-demo--in-view .dash-rdv-calendar-weekdays {
  animation: home-cal-block-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.home-calendar-demo.home-calendar-demo--in-view .dash-rdv-day {
  animation: home-cal-block-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.14s + var(--home-cal-stagger, 0) * 22ms);
}

.home-calendar-demo.home-calendar-demo--in-view .dash-rdv-pill {
  animation: home-cal-pill-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.2s + var(--home-cal-stagger, 0) * 22ms);
}

.home-calendar-demo.home-calendar-demo--in-view .home-cal-agenda-item {
  animation: home-cal-pill-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.18s + var(--home-cal-stagger, 0) * 40ms);
}

.home-calendar-copy:not(.home-calendar-copy--in-view) {
  opacity: 0;
}

.home-calendar-copy.home-calendar-copy--in-view {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-calendar-toolbar,
  .home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-calendar-weekdays,
  .home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-day,
  .home-calendar-demo:not(.home-calendar-demo--in-view) .dash-rdv-pill,
  .home-calendar-demo:not(.home-calendar-demo--in-view) .home-cal-agenda-item,
  .home-calendar-copy:not(.home-calendar-copy--in-view),
  .home-calendar-copy.home-calendar-copy--in-view,
  .home-calendar-demo.home-calendar-demo--in-view .dash-rdv-calendar-toolbar,
  .home-calendar-demo.home-calendar-demo--in-view .dash-rdv-calendar-weekdays,
  .home-calendar-demo.home-calendar-demo--in-view .dash-rdv-day,
  .home-calendar-demo.home-calendar-demo--in-view .dash-rdv-pill,
  .home-calendar-demo.home-calendar-demo--in-view .home-cal-agenda-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Texte follow-ups home : même gabarit titre que `.home-followups-intro h2` (bande meetings). */
.home-calendar-copy {
  display: grid;
  gap: clamp(14px, 2.5vw, 18px);
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: min(48rem, 100%);
  margin-inline: auto;
  min-width: 0;
  padding: 4px 0 0;
  text-align: center;
}

.home-calendar-copy .pricing-compare-eyebrow {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 4px;
  justify-self: center;
}

.home-calendar-copy h2,
.home-followups-intro h2 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(36px, 5.4vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--flow-text);
}

.home-calendar-copy-desc {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--flow-muted);
}

/* CTA taille standard `.ui-button`, centré comme le bloc copy. */
.home-calendar-cta {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  width: 100%;
  justify-self: center;
}

.home-calendar-cta-note {
  color: var(--flow-muted);
}

@media (max-width: 960px) {
  .home-calendar-copy h2,
  .home-followups-intro h2 {
    max-width: 16ch;
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.02;
  }

  .home-calendar-copy-desc {
    max-width: 42ch;
  }
}

@media (max-width: 900px) {
  .home-layout {
    --home-band-pad-block: clamp(80px, 16vw, 104px);
    --home-band-pad-block-end: clamp(44px, 10vw, 64px);
  }

  .home-intro-band,
  .home-mid-cta-band,
  .home-dark-band,
  .home-intro-why-band,
  .home-calendar-section,
  .home-followups-band,
  .home-layout > .pricing-compare {
    padding-block: var(--home-band-pad-block);
    padding-inline: calc(50vw - 50% + clamp(16px, 4vw, 24px));
  }

  .home-intro-band,
  .home-mid-cta-band,
  .home-dark-band,
  .home-intro-why-band {
    padding-inline: calc(50vw - 50% + clamp(12px, 3vw, 20px));
  }

  .home-mid-cta-band {
    padding-block: clamp(14px, 5vw, 22px);
  }

  .home-intro-why-band {
    padding-block: clamp(44px, 10vw, 64px);
  }

  .home-layout > .pricing-compare {
    padding-block-start: var(--home-band-pad-block-end);
    padding-block-end: var(--home-band-pad-block-end);
  }

  .home-calendar-showcase.card {
    padding: 14px 12px 16px;
  }

  .home-calendar-showcase .dash-rdv-calendar-grid,
  .home-followups-showcase .dash-rdv-calendar-grid {
    min-height: 360px;
    grid-template-rows: repeat(var(--rdv-rows, 5), minmax(112px, auto));
  }

  .home-calendar-demo .dash-rdv-day {
    min-height: 112px;
  }

  /* Home calendrier meetings : grille mois illisible en portrait → liste agenda. */
  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-weekdays,
  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-grid {
    display: none;
  }

  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-toolbar-center {
    order: -1;
    justify-self: center;
    text-align: center;
    width: 100%;
  }

  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-toolbar-left {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-followups-showcase .home-calendar-demo .dash-rdv-calendar-toolbar-right {
    width: 100%;
    justify-content: center;
    align-self: center;
  }

  .home-followups-showcase .home-calendar-demo .dash-rdv-cal-filter-combobox {
    min-width: 0;
    max-width: none;
  }

  .home-followups-showcase .home-cal-mobile-agenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
  }

  .home-followups-showcase .home-cal-agenda-item {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
    cursor: default;
    box-sizing: border-box;
  }

  .home-followups-showcase .home-cal-agenda-date {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    opacity: 0.92;
  }

  .home-followups-showcase .home-cal-agenda-body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .home-followups-showcase .home-cal-agenda-time {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
  }

  .home-followups-showcase .home-cal-agenda-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    word-break: normal;
  }

  .home-followups-showcase .home-cal-agenda-mod {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
  }

  .home-followups-showcase .home-cal-agenda-empty {
    margin: 8px 0 0;
    text-align: center;
    font-size: 14px;
  }
}

/* Agenda home : masquée sur desktop uniquement (grille mois visible). */
@media (min-width: 901px) {
  .home-followups-showcase .home-cal-mobile-agenda {
    display: none;
  }
}

/* --- Home : bande meetings (~10 % plus sombre que `--flow-bg`) ---
   Fond plein en haut ; en bas seulement : bande → `--flow-bg` (section pricing). */
/* Pleine largeur : marge 50vw + padding-inline compense `scrollbar-gutter: stable`. */
.home-followups-band {
  --home-followups-band-bg: color-mix(in srgb, var(--flow-bg) 90%, #000000);
  background: linear-gradient(
    180deg,
    var(--home-followups-band-bg) 0%,
    var(--home-followups-band-bg) 78%,
    var(--flow-bg) 100%
  );
}

.home-followups-layout {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Intro : titre à gauche, paragraphe à droite (structure type « Who we are »). */
.home-followups-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-width: 0;
}

.home-followups-intro-head {
  display: grid;
  gap: clamp(16px, 2.5vw, 22px);
  align-content: start;
  min-width: 0;
}

.home-followups-intro-head .pricing-compare-eyebrow {
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

.home-followups-intro-accent {
  color: color-mix(in srgb, var(--flow-muted) 82%, var(--flow-text));
}

.home-followups-intro-cta {
  margin-top: clamp(4px, 1vw, 8px);
}

.home-followups-intro-cta-note {
  color: var(--flow-muted);
}

.home-followups-intro-desc {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--flow-muted);
}

.home-followups-intro:not(.home-followups-intro--in-view) {
  opacity: 0;
}

.home-followups-intro.home-followups-intro--in-view {
  opacity: 1;
}

@media (max-width: 960px) {
  .home-followups-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }

  .home-followups-intro-desc {
    align-self: start;
    max-width: 48ch;
  }
}

.home-followups-showcase.card {
  margin-top: 0;
  padding: 16px 20px 18px;
  background: var(--flow-surface-1) !important;
  border: 1px solid color-mix(in srgb, var(--flow-surface-3) 88%, transparent);
  border-radius: 16px;
  box-shadow: 0 1px 2px color-mix(in srgb, #000000 6%, transparent);
  overflow: visible;
  min-width: 0;
}

/* Home follow-ups démo : fondu seul (pas de translateY — évite rail scroll qui clignote). */
@keyframes home-followups-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.home-followups-showcase:not(:has(.home-calendar-demo--in-view)) {
  opacity: 0;
}

.home-followups-showcase:has(.home-calendar-demo--in-view) {
  animation: home-followups-fade-in 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-followups-demo:not(.home-followups-demo--in-view) .dash-followups-stat,
.home-followups-demo:not(.home-followups-demo--in-view) .dash-followups-list-toolbar,
.home-followups-demo:not(.home-followups-demo--in-view) .ui-table-wrap {
  opacity: 0;
}

.home-followups-demo:not(.home-followups-demo--in-view) .ui-table tbody tr {
  opacity: 0;
}

.home-followups-demo.home-followups-demo--in-view .dash-followups-stat {
  animation: home-followups-fade-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.08s + var(--home-fu-stagger, 0) * 45ms);
}

.home-followups-demo.home-followups-demo--in-view .dash-followups-list-toolbar {
  animation: home-followups-fade-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.18s;
}

.home-followups-demo.home-followups-demo--in-view .ui-table-wrap {
  animation: home-followups-fade-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.24s;
}

.home-followups-demo.home-followups-demo--in-view .ui-table tbody tr {
  animation: home-followups-fade-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.3s + var(--home-fu-stagger, 0) * 55ms);
}

@media (prefers-reduced-motion: reduce) {
  .home-followups-showcase:not(:has(.home-calendar-demo--in-view)),
  .home-followups-showcase:has(.home-calendar-demo--in-view) {
    animation: none !important;
    opacity: 1 !important;
  }

  .home-followups-intro:not(.home-followups-intro--in-view),
  .home-followups-intro.home-followups-intro--in-view {
    animation: none !important;
    opacity: 1 !important;
  }

  .home-followups-demo:not(.home-followups-demo--in-view) .dash-followups-stat,
  .home-followups-demo:not(.home-followups-demo--in-view) .dash-followups-list-toolbar,
  .home-followups-demo:not(.home-followups-demo--in-view) .ui-table-wrap,
  .home-followups-demo:not(.home-followups-demo--in-view) .ui-table tbody tr,
  .home-followups-demo.home-followups-demo--in-view .dash-followups-stat,
  .home-followups-demo.home-followups-demo--in-view .dash-followups-list-toolbar,
  .home-followups-demo.home-followups-demo--in-view .ui-table-wrap,
  .home-followups-demo.home-followups-demo--in-view .ui-table tbody tr {
    animation: none !important;
    opacity: 1 !important;
  }
}

.home-followups-demo-host {
  pointer-events: none;
  user-select: none;
  gap: 12px;
  min-width: 0;
}

.home-followups-demo-host .dash-followups-stat {
  padding: 8px 10px;
  cursor: default;
}

.home-followups-demo-host .dash-followups-stat:hover,
.home-followups-demo-host .dash-followups-stat:focus-visible {
  background: var(--flow-surface-2);
}

.home-followups-demo-host .dash-followups-stat strong {
  font-size: 18px;
}

.home-followups-demo-host .dash-followups-list-toolbar {
  margin-top: 14px;
}

/* Desktop : pas de rail interne ; mobile (≤900px) = scroll horizontal sur `.ui-table-wrap`. */
#home-followups-demo .ui-table-wrap {
  overflow-x: clip;
  max-width: 100%;
}

#home-followups-demo .ui-table tbody tr:last-child td {
  border-bottom: none;
}

.home-followups-demo-host .dash-stats-combobox-trigger:disabled {
  opacity: 1;
  cursor: default;
}

.home-followups-demo-host .dash-nextfollowup-trigger:disabled {
  opacity: 1;
  cursor: default;
}

.home-followups-demo-host .ui-table-preview-button:disabled,
.home-followups-demo-host .ui-table-preview-button.ui-button:disabled {
  opacity: 1;
  cursor: default;
  background: transparent !important;
  border: none !important;
}

/* Home démo : relance due = même pulse que le dashboard ; on hold = puce bleue fixe. */
#home-followups-demo .ui-table tbody tr.dash-followup-row--status-on_hold .dash-followup-signal.is-due {
  animation: none !important;
  background: var(--flow-followup-signal-on_hold) !important;
  box-shadow: none;
  transform: none;
}

@media (max-width: 900px) {
  .home-calendar-showcase.card,
  .home-followups-showcase.card {
    padding: 12px 10px 14px;
    overflow-x: visible;
    overflow-y: visible;
  }

  .home-followups-demo-host .dash-followups-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .home-followups-demo-host .dash-followups-stat {
    min-width: 0;
    overflow: visible;
    padding: 8px 8px;
  }

  .home-followups-demo-host .dash-followups-stat span {
    display: block;
    font-size: clamp(9px, 2.4vw, 11px);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    hyphens: auto;
    overflow: visible;
    text-overflow: unset;
  }

  .home-followups-demo-host .dash-followups-stat strong {
    font-size: clamp(14px, 4vw, 18px);
  }

  /* Filtres : 3 boutons alignés sur une ligne, largeur égale. */
  .home-calendar-showcase .home-followups-demo-host .dash-followups-list-toolbar,
  #home-followups-demo .dash-followups-list-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .home-calendar-showcase .dash-followups-list-toolbar > .dash-stats-combobox,
  .home-calendar-showcase .dash-followups-list-toolbar > .home-followups-demo-combobox,
  #home-followups-demo .dash-followups-list-toolbar > .dash-stats-combobox,
  #home-followups-demo .dash-followups-list-toolbar > .home-followups-demo-combobox {
    flex: 1 1 0;
    min-width: 0;
  }

  .home-calendar-showcase .dash-followups-list-toolbar .dash-stats-combobox,
  #home-followups-demo .dash-followups-list-toolbar .dash-stats-combobox {
    min-width: 0;
    width: 100%;
  }

  .home-calendar-showcase .dash-followups-list-toolbar .dash-stats-combobox-trigger,
  #home-followups-demo .dash-followups-list-toolbar .dash-stats-combobox-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .home-calendar-showcase .dash-followups-list-toolbar .dash-stats-combobox-value,
  #home-followups-demo .dash-followups-list-toolbar .dash-stats-combobox-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .home-calendar-showcase .dash-followups-list-toolbar .dash-stats-combobox-chevron,
  #home-followups-demo .dash-followups-list-toolbar .dash-stats-combobox-chevron {
    flex-shrink: 0;
  }

  /* Tableau follow-ups home : scroll horizontal (pointer-events réactivés sur la zone scrollable). */
  .home-calendar-showcase #home-followups-demo.dash-table-host {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #home-followups-demo .ui-table-wrap {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: scroll;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: auto;
    touch-action: pan-x pan-y;
    pointer-events: auto;
    scrollbar-gutter: stable both-edges;
  }

  #home-followups-demo .ui-table {
    width: max-content;
    min-width: 720px;
    table-layout: auto;
  }

  #home-followups-demo .ui-table th,
  #home-followups-demo .ui-table td {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
  }

  #home-followups-demo .ui-table thead th {
    white-space: nowrap;
  }

  #home-followups-demo .dash-followups-lead-status-combobox {
    min-width: 168px;
    width: auto;
    max-width: none;
  }

  #home-followups-demo .dash-lead-status-cell {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  #home-followups-demo .dash-followups-lead-status-combobox .dash-stats-combobox-trigger {
    min-width: 168px;
    width: auto;
    max-width: none;
  }

  #home-followups-demo .dash-followups-lead-status-combobox .dash-stats-combobox-value {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
  }

  #home-followups-demo .dash-nextfollowup-trigger {
    min-width: 0;
    width: auto;
    max-width: none;
  }

  #home-followups-demo .dash-date-trigger-label {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
  }

  #home-followups-demo .dash-followups-heat-badge .dash-followups-qual-label {
    white-space: nowrap;
  }

}

/* --- Home : pricing (bande pleine largeur, gabarit layout identique aux autres bandes) --- */
.home-layout > .pricing-compare {
  scroll-margin-top: 80px;
  background: var(--flow-bg);
}

.pricing-compare-layout {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.pricing-compare-eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--flow-surface-1);
  border: 1px solid var(--obviouslead-control-border);
  color: var(--flow-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pricing-compare-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
}

.pricing-compare-header .pricing-compare-eyebrow {
  margin: 0 0 20px;
}

.pricing-compare-header-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.pricing-compare-header-logo {
  display: block;
  width: auto;
  height: clamp(52px, 9vw, 80px);
  object-fit: contain;
}

.pricing-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  align-items: stretch;
  column-gap: clamp(20px, 4vw, 40px);
  row-gap: 0;
  text-align: left;
}

.pricing-compare-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  min-height: 0;
  min-width: 0;
}

.pricing-compare-col > .pricing-compare-card {
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

.pricing-compare-col > .pricing-compare-col-cta-actions {
  justify-self: center;
}

.pricing-compare-col-cta-actions {
  min-height: 35px;
  padding-top: clamp(16px, 2.5vw, 24px);
}

.pricing-compare-col-cta-actions .pricing-compare-plan-price {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--flow-text-strong);
  text-align: center;
}

.pricing-compare-col-cta-actions .pricing-compare-cta.ui-button,
.pricing-compare-col-cta-actions a.pricing-compare-cta.ui-button {
  align-self: center;
  margin-top: 0;
}

.pricing-compare-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--flow-surface-1);
  border: 1px solid var(--obviouslead-control-border);
  border-radius: 16px;
  padding: 28px 26px 24px;
}

/* Free tier : split type hero — texte à gauche, aperçu vidéo à droite */
.pricing-compare-card--split {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  min-height: clamp(300px, 38vw, 380px);
  border: none;
  outline: none;
  box-shadow: 0 16px 40px -26px rgba(15, 20, 28, 0.2);
}

.pricing-compare-card--split .pricing-compare-card-copy {
  flex: 3 1 55%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  padding: 28px 26px;
  box-sizing: border-box;
}

.pricing-compare-card--split .pricing-compare-card-video-pane {
  flex: 2 1 45%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border: none !important;
  background: transparent;
  overflow: hidden;
}

/* Pro : vidéo à gauche, contenu à droite */
.pricing-compare-card--split-reverse .pricing-compare-card-video-pane {
  border: none !important;
}

.pricing-compare-card--split-reverse.pricing-compare-card--highlight .pricing-compare-card-video-pane {
  border: none !important;
}

.pricing-compare-card-video-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.pricing-compare-card-video {
  position: absolute;
  inset: -8px;
  z-index: 1;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  max-width: none;
  max-height: none;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: transparent !important;
  transform: none !important;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.22s ease-out;
}

.pricing-compare-card-video-frame .video-start-poster {
  z-index: 2;
}

.pricing-compare-card-outro-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--flow-surface-2);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.pricing-compare-card-outro-overlay:not([hidden]) {
  display: flex;
}

.pricing-compare-card-outro-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.pricing-compare-card-outro-logo {
  width: clamp(52px, 22vw, 80px);
  height: auto;
  display: block;
  object-fit: contain;
}

/* Timeline placeholder (style hero, taille réduite pour les cartes pricing). */
.pricing-compare-card-video-frame .pricing-compare-timeline-track {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(6, 9, 14, 0.68) !important;
  border: 1px solid rgba(88, 107, 133, 0.5) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  z-index: 4;
  pointer-events: none;
  cursor: default;
}

.pricing-compare-card-video-frame .pricing-compare-timeline-progress {
  background: var(--flow-accent) !important;
  transition: none;
}

.pricing-compare-card-video-frame .pricing-compare-timeline-playhead {
  width: 10px;
  height: 10px;
  border-width: 2px;
  transition: none;
}

.pricing-compare-card-video-frame .timeline-marker {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  pointer-events: none;
  cursor: default;
}

.pricing-compare-card-video-frame .timeline-marker iconify-icon,
.pricing-compare-card-video-frame .timeline-marker .iconify {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
}

@supports (grid-template-rows: subgrid) {
  .pricing-compare-card--split {
    min-height: 0;
  }
}

@supports not (grid-template-rows: subgrid) {
  .pricing-compare-grid {
    grid-template-rows: none;
  }

  .pricing-compare-col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .pricing-compare-col > .pricing-compare-card {
    flex: 1 1 auto;
  }
}

/* femalevid : bande sombre en haut du fichier — recadrage vertical */
#home-pricing .pricing-compare-card-video:not(.pricing-compare-card-video--shift-left) {
  object-position: center 40%;
}

/* malevid : cadrage horizontal (pas de scale : évite le trait noir aux coins) */
.pricing-compare-card-video--shift-left {
  object-position: 54% 46%;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-compare-card-video {
    opacity: 1;
    will-change: auto;
    transition: none;
  }
}

.pricing-compare-card--highlight {
  border: none;
}

.pricing-compare-card--highlight.pricing-compare-card--split {
  background: var(--flow-surface-1);
}

.pricing-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 0 0 auto;
}

.pricing-compare-card--split .pricing-compare-list {
  flex: 0 1 auto;
  width: 100%;
}

.pricing-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--obviouslead-chrome-accent);
}

.pricing-compare-list--muted li {
  color: var(--flow-muted);
}

.pricing-compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pricing-compare-icon--no {
  background: var(--flow-surface-2);
  color: var(--flow-surface-1);
}

.pricing-compare-icon--yes {
  background: var(--obviouslead-chrome-accent);
  color: var(--flow-on-accent);
}

.pricing-compare-plan-note {
  margin: 0;
  font-size: 13px;
}

.pricing-compare-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  width: 100%;
}

.pricing-compare-cta-block .pricing-compare-cta-note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.pricing-compare-cta.ui-button,
a.pricing-compare-cta.ui-button {
  align-self: center;
  margin-top: auto;
}

.pricing-compare-cta-block .pricing-compare-cta.ui-button,
.pricing-compare-cta-block a.pricing-compare-cta.ui-button {
  margin-top: 0;
}

.pricing-compare-cta--primary.ui-button,
a.pricing-compare-cta--primary.ui-button {
  background: var(--obviouslead-chrome-accent);
  border-color: var(--obviouslead-chrome-accent);
  color: var(--flow-on-accent);
}

.pricing-compare-cta--primary.ui-button:hover,
a.pricing-compare-cta--primary.ui-button:hover {
  background: color-mix(in srgb, var(--obviouslead-chrome-accent) 88%, #000000);
  border-color: color-mix(in srgb, var(--obviouslead-chrome-accent) 88%, #000000);
}

@media (min-width: 901px) {
  .pricing-compare-col:nth-child(1) {
    grid-column: 1;
  }

  .pricing-compare-col:nth-child(2) {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .pricing-compare-layout {
    min-width: 0;
  }

  .pricing-compare-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: clamp(28px, 6vw, 40px);
    width: 100%;
    min-width: 0;
  }

  .pricing-compare-col {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: none;
    width: 100%;
    min-width: 0;
  }

  .pricing-compare-col:nth-child(1),
  .pricing-compare-col:nth-child(2) {
    grid-column: 1;
  }

  .pricing-compare-col > .pricing-compare-card {
    flex: none;
    width: 100%;
    height: auto;
    min-height: clamp(280px, 72vw, 360px);
  }

  .pricing-compare-col-cta-actions {
    width: 100%;
    justify-self: stretch;
  }

  .pricing-compare-card--split {
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: clamp(280px, 72vw, 360px);
  }

  .pricing-compare-card--split .pricing-compare-card-copy {
    flex: none;
    height: auto;
    padding: 22px 20px;
  }

  .pricing-compare-card--split .pricing-compare-card-video-pane {
    flex: none;
    width: 100%;
    height: auto;
    border: none !important;
    min-height: clamp(200px, 52vw, 280px);
  }

  .pricing-compare-card--split-reverse .pricing-compare-card-video-pane {
    border: none !important;
  }

  .pricing-compare-card-video-frame {
    min-height: clamp(200px, 52vw, 280px);
  }

  .pricing-compare-list li {
    font-size: 14px;
  }
}