/* ==========================================================================
   Drummondville Marine — Notifications
   Esprit Apple : police système, surfaces groupées, translucidité discrète.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Couleurs brutes */
    --lake-light: #0b63ce;  --lake-dark: #4a9dff;
    --bg-light: #f5f5f7;    --bg-dark: #000000;
    --surface-light: #ffffff; --surface-dark: #1c1c1e;
    --surface2-light: #f2f2f7; --surface2-dark: #2c2c2e;
    --text-light: #1d1d1f;  --text-dark: #f5f5f7;
    --muted-light: #6e6e73; --muted-dark: #98989d;
    --line-light: rgb(60 60 67 / .14); --line-dark: rgb(84 84 88 / .55);

    --accent: light-dark(var(--lake-light), var(--lake-dark));
    --accent-tint: light-dark(rgb(11 99 206 / .1), rgb(74 157 255 / .18));
    --accent-fill: light-dark(var(--lake-light), #0a68d6); /* fonds pleins sous texte blanc (contraste AA) */
    --on-accent: #fff;
    --bg: light-dark(var(--bg-light), var(--bg-dark));
    --surface: light-dark(var(--surface-light), var(--surface-dark));
    --surface-2: light-dark(var(--surface2-light), var(--surface2-dark));
    --surface-glass: light-dark(rgb(250 250 252 / .72), rgb(28 28 30 / .72));
    --text: light-dark(var(--text-light), var(--text-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --line: light-dark(var(--line-light), var(--line-dark));
    --green: light-dark(#1f9d55, #32d74b);
    --green-tint: light-dark(rgb(31 157 85 / .12), rgb(50 215 75 / .18));
    --amber: light-dark(#b86e00, #ffb340);
    --amber-tint: light-dark(rgb(199 119 0 / .12), rgb(255 179 64 / .18));
    --red: light-dark(#d93a2b, #ff6961);
    --red-tint: light-dark(rgb(217 58 43 / .1), rgb(255 105 97 / .18));
    --gray-tint: light-dark(rgb(120 120 128 / .12), rgb(120 120 128 / .28));
    --bubble-in: light-dark(#e9e9eb, #26262a);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --font-round: ui-rounded, "SF Pro Rounded", var(--font-display);

    --r-control: 10px;
    --r-group: 14px;
    --r-sheet: 22px;
    --shadow-float: 0 10px 40px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .08);
    --sidebar-w: 264px;
    --tabbar-h: 58px;
    --gutter: clamp(16px, 3.5vw, 40px);
    --ease: cubic-bezier(.2, .8, .2, 1);

    accent-color: var(--accent);
  }

  /* Repli pour navigateurs sans light-dark() */
  @supports not (color: light-dark(white, black)) {
    :root {
      --accent: var(--lake-light); --accent-fill: var(--lake-light); --bg: var(--bg-light); --surface: var(--surface-light);
      --surface-2: var(--surface2-light); --text: var(--text-light); --muted: var(--muted-light);
      --line: var(--line-light); --surface-glass: rgb(250 250 252 / .72); --bubble-in: #e9e9eb;
      --accent-tint: rgb(11 99 206 / .1); --green: #1f9d55; --amber: #b86e00; --red: #d93a2b;
      --green-tint: rgb(31 157 85 / .12); --amber-tint: rgb(199 119 0 / .12); --red-tint: rgb(217 58 43 / .1);
      --gray-tint: rgb(120 120 128 / .12);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --accent: var(--lake-dark); --accent-fill: #0a68d6; --bg: var(--bg-dark); --surface: var(--surface-dark);
        --surface-2: var(--surface2-dark); --text: var(--text-dark); --muted: var(--muted-dark);
        --line: var(--line-dark); --surface-glass: rgb(28 28 30 / .72); --bubble-in: #26262a;
        --accent-tint: rgb(74 157 255 / .18); --green: #32d74b; --amber: #ffb340; --red: #ff6961;
        --green-tint: rgb(50 215 75 / .18); --amber-tint: rgb(255 179 64 / .18); --red-tint: rgb(255 105 97 / .18);
        --gray-tint: rgb(120 120 128 / .28);
      }
    }
  }
}

@layer base {
  html {
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
  }
  body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.022em;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
  }
  h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
  h1 { font-size: clamp(28px, 22px + 1.6vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.028em; }
  h2 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.024em; }
  h3 { font-size: 17px; font-weight: 600; }
  p { text-wrap: pretty; }
  small, .small { font-size: 13px; letter-spacing: -.006em; }
  :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
  ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* --------------------------------------------------------------------------
   Structure : barre latérale (PC) / barre d'onglets (mobile)
   -------------------------------------------------------------------------- */
@layer layout {
  .shell { min-height: 100dvh; }

  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    inline-size: var(--sidebar-w);
    padding: 18px 12px;
    display: flex; flex-direction: column; gap: 4px;
    background: var(--surface-glass);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-inline-end: 1px solid var(--line);
    z-index: 20;
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
  .brand-mark {
    inline-size: 34px; block-size: 34px; border-radius: 9px; display: grid; place-items: center;
    background: linear-gradient(160deg, #1678e6, #0a4fa6); color: #fff;
  }
  .brand-mark svg { inline-size: 20px; block-size: 20px; }
  .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.15; letter-spacing: -.01em; }
  .brand-name span { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }

  .nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 10px; border-radius: 8px;
    font-size: 15px; font-weight: 500; color: var(--text);
  }
  .nav-link svg { inline-size: 20px; block-size: 20px; color: var(--accent); flex: none; }
  .nav-link:hover { background: var(--gray-tint); }
  .nav-link[aria-current="page"] { background: var(--accent-fill); color: var(--on-accent); }
  .nav-link[aria-current="page"] svg { color: currentColor; }
  .nav-badge {
    margin-inline-start: auto; min-inline-size: 22px; padding: 0 7px; border-radius: 99px;
    font-size: 13px; font-weight: 600; line-height: 22px; text-align: center;
    background: var(--red); color: #fff;
  }
  .nav-section { margin-block: 14px 4px; padding-inline: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
  .sidebar-foot { margin-block-start: auto; display: grid; gap: 2px; }
  .me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
  .me:hover { background: var(--gray-tint); }
  .me-name { font-size: 14px; font-weight: 500; line-height: 1.2; }
  .me-name span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }

  .main {
    margin-inline-start: var(--sidebar-w);
    padding: 28px var(--gutter) 64px;
    max-inline-size: calc(1120px + var(--sidebar-w));
  }

  .tabbar { display: none; }

  @media (width < 860px) {
    .sidebar { display: none; }
    .main { margin-inline-start: 0; padding: 12px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px); }
    .tabbar {
      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
      position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
      padding-block-end: env(safe-area-inset-bottom);
      background: var(--surface-glass);
      backdrop-filter: saturate(180%) blur(24px);
      -webkit-backdrop-filter: saturate(180%) blur(24px);
      border-block-start: 1px solid var(--line);
    }
    .tab {
      position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
      block-size: var(--tabbar-h); font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--muted);
    }
    .tab svg { inline-size: 24px; block-size: 24px; }
    .tab[aria-current="page"] { color: var(--accent); }
    .tab .nav-badge { position: absolute; inset-block-start: 5px; inset-inline-start: calc(50% + 6px); min-inline-size: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; }
  }

  /* En-tête de page : grand titre façon iOS */
  .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-block: 8px 24px; }
  .page-head .sub { color: var(--muted); font-size: 15px; margin-block-start: 4px; }
  .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .back {
    display: inline-flex; align-items: center; gap: 2px; margin-block-end: 6px;
    color: var(--accent); font-size: 17px;
  }
  .back svg { inline-size: 20px; block-size: 20px; }

  .stack { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
  .cols { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
  @media (width >= 1100px) { .cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

  .auth {
    min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
    background:
      radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
      var(--bg);
  }
  .auth-card { inline-size: min(400px, 100%); text-align: center; }
  .auth-card .brand-mark { inline-size: 64px; block-size: 64px; border-radius: 16px; margin: 0 auto 20px; }
  .auth-card .brand-mark svg { inline-size: 36px; block-size: 36px; }
  .auth-card h1 { font-size: 28px; }
  .auth-card .sub { color: var(--muted); margin-block: 6px 24px; }
  .auth-card form { text-align: start; }
}

@layer components {
  /* ---------- Boutons ---------- */
  .btn {
    --btn-bg: var(--accent-fill); --btn-fg: var(--on-accent);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-block-size: 36px; padding: 7px 16px;
    border: 0; border-radius: 99px;
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
    transition: filter .15s, transform .1s;
  }
  .btn:hover { filter: brightness(1.08); }
  .btn:active { transform: scale(.97); }
  .btn svg { inline-size: 18px; block-size: 18px; }
  .btn-tinted { --btn-bg: var(--accent-tint); --btn-fg: var(--accent); }
  .btn-gray { --btn-bg: var(--gray-tint); --btn-fg: var(--text); }
  .btn-danger { --btn-bg: var(--red-tint); --btn-fg: var(--red); }
  .btn-danger-solid { --btn-bg: var(--red); --btn-fg: #fff; }
  .btn-plain { --btn-bg: transparent; --btn-fg: var(--accent); padding-inline: 8px; }
  .btn-lg { min-block-size: 50px; font-size: 17px; border-radius: 14px; inline-size: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

  /* ---------- Listes groupées (Réglages iOS) ---------- */
  .group-title { padding-inline: 16px; margin-block-end: 7px; font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: -.006em; }
  .group-foot { padding-inline: 16px; margin-block-start: 7px; font-size: 13px; color: var(--muted); }
  .group {
    background: var(--surface); border-radius: var(--r-group); overflow: clip;
  }
  .row {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-block-size: 46px; padding: 10px 16px;
  }
  .row + .row::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 16px 0;
    border-block-start: 1px solid var(--line);
  }
  .row-inset + .row-inset::before { inset-inline-start: 62px; }
  a.row:hover, button.row:hover { background: var(--gray-tint); }
  button.row { inline-size: 100%; border: 0; background: none; text-align: start; font-size: inherit; }
  .row-main { flex: 1; min-inline-size: 0; }
  .row-title { display: block; font-size: 17px; line-height: 1.25; }
  .row-sub { display: block; font-size: 14px; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-value { color: var(--muted); font-size: 16px; white-space: nowrap; }
  .chev { inline-size: 14px; block-size: 14px; color: color-mix(in srgb, var(--muted) 60%, transparent); flex: none; }

  /* ---------- Formulaires ---------- */
  .field { display: grid; gap: 4px; padding: 11px 16px; position: relative; }
  .field + .field::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 16px 0; border-block-start: 1px solid var(--line); }
  .field > label, .field-label { font-size: 13px; color: var(--muted); }
  .field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea {
    inline-size: 100%; border: 0; padding: 2px 0; background: transparent; font-size: 17px; outline: none;
  }
  .field textarea { resize: vertical; min-block-size: 3lh; line-height: 1.4; }
  .field:focus-within > label { color: var(--accent); }
  .field .help { font-size: 13px; color: var(--muted); }
  .field .err { font-size: 13px; color: var(--red); }
  .field:has(:user-invalid) > label, .field.has-error > label { color: var(--red); }
  .field-check { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .field-check > label { font-size: 17px; color: var(--text); }
  .field-check .help { grid-column: 1 / -1; }

  /* Interrupteur iOS sur les cases à cocher */
  .switch {
    appearance: none; inline-size: 51px; block-size: 31px; border-radius: 99px; flex: none;
    background: var(--gray-tint); position: relative; transition: background .2s var(--ease); cursor: pointer;
  }
  .switch::after {
    content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
    inline-size: 27px; block-size: 27px; border-radius: 50%; background: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16);
    transition: translate .2s var(--ease);
  }
  .switch:checked { background: var(--green); }
  .switch:checked::after { translate: 20px 0; }

  .errors {
    padding: 12px 16px; border-radius: var(--r-group); background: var(--red-tint); color: var(--red); font-size: 15px;
  }

  /* Champ de recherche iOS */
  .search {
    display: flex; align-items: center; gap: 6px; padding: 0 10px; block-size: 38px;
    border-radius: 10px; background: var(--gray-tint); color: var(--muted);
  }
  .search svg { inline-size: 17px; block-size: 17px; flex: none; }
  .search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: none; font-size: 17px; color: var(--text); }

  /* ---------- Contrôle segmenté ---------- */
  .segmented {
    display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--gray-tint);
    overflow-x: auto; scrollbar-width: none; inline-size: fit-content; max-inline-size: 100%;
  }
  .segmented a, .segmented label {
    flex: 1 0 auto; text-align: center; padding: 5px 14px; border-radius: 7px;
    font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text); cursor: pointer;
  }
  .segmented [aria-current="true"], .segmented label:has(:checked) {
    background: var(--surface); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .04);
    font-weight: 600;
  }
  .segmented input { position: absolute; opacity: 0; pointer-events: none; }
  fieldset.segmented { min-inline-size: 0; border: 0; margin: 0; }
  .segmented label, .choice label { position: relative; }
  .segmented input, .choice input { inset: 0; inline-size: 100%; block-size: 100%; margin: 0; }
  .main { min-inline-size: 0; }
  .segmented .count { color: var(--muted); font-weight: 400; margin-inline-start: 3px; }

  /* ---------- Statuts ---------- */
  .status {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    background: var(--gray-tint); color: var(--muted);
  }
  .status::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
  .status-confirmed, .status-delivered, .status-sent, .status-active { background: var(--green-tint); color: var(--green); }
  .status-interested, .status-sending, .status-scheduled, .status-queued { background: var(--amber-tint); color: var(--amber); }
  .status-invited { background: var(--accent-tint); color: var(--accent); }
  .status-declined, .status-failed, .status-undelivered, .status-cancelled { background: var(--red-tint); color: var(--red); }
  .status-optout { background: var(--gray-tint); color: var(--muted); }

  .avatar {
    inline-size: 36px; block-size: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #fff;
    background: linear-gradient(180deg, #a5abb6, #858a94);
  }
  .avatar-lg { inline-size: 72px; block-size: 72px; font-size: 28px; }
  .dot-attention { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--accent); flex: none; }

  /* ---------- L'anneau d'inscriptions ---------- */
  .ring {
    --p: 0; --p2: 0; --size: 132px;
    position: relative; inline-size: var(--size); block-size: var(--size); flex: none;
  }
  .ring svg { inline-size: 100%; block-size: 100%; rotate: -90deg; overflow: visible; }
  .ring circle { fill: none; stroke-width: 13; }
  .ring .track { stroke: var(--green-tint); }
  .ring .fill {
    stroke: var(--green); stroke-linecap: round;
    stroke-dasharray: calc(var(--p) * 100) 100;
    transition: stroke-dasharray .9s var(--ease);
  }
  .ring .fill-2 { stroke: var(--accent); stroke-dasharray: calc(var(--p2) * 100) 100; }
  .ring .track-2 { stroke: var(--accent-tint); }
  .ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .ring-num { font-family: var(--font-round); font-size: calc(var(--size) * .26); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .ring-cap { font-size: 12px; color: var(--muted); margin-block-start: 3px; }
  .ring-sm { --size: 64px; }
  .ring-sm .ring-num { font-size: 17px; }

  /* Carte d'événement (tableau de bord) */
  .event-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
  .event-card {
    display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
    padding: 20px; border-radius: var(--r-sheet); background: var(--surface);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .event-card:hover { box-shadow: var(--shadow-float); }
  .event-card h2 { font-size: 20px; }
  .event-card .ring { --size: 116px; }
  .hero-stats .ring { --size: 148px; }
  .event-meta { color: var(--muted); font-size: 14px; margin-block: 2px 10px; }
  .legend { display: grid; gap: 3px; font-size: 14px; }
  .legend span { display: flex; align-items: baseline; gap: 7px; }
  .legend i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c); flex: none; translate: 0 -1px; }
  .legend b { font-variant-numeric: tabular-nums; font-weight: 600; }

  /* Bandeau de statistiques d'un événement */
  .hero-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
    padding: 24px; border-radius: var(--r-sheet); background: var(--surface);
  }
  .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 18px 28px; flex: 1 1 260px; min-inline-size: 0; }
  .figure-num { font-family: var(--font-round); font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .figure-cap { font-size: 13px; color: var(--muted); }

  /* Onglets d'événement */
  .subnav { margin-block-end: 20px; }

  /* ---------- Tableau des contacts → cartes sur mobile ---------- */
  .table-wrap { container-type: inline-size; background: var(--surface); border-radius: var(--r-group); }
  .table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
  .table caption { text-align: start; }
  .table th, .table td { padding: 11px 16px; text-align: start; vertical-align: middle; }
  .table thead th { font-size: 12px; font-weight: 600; color: var(--muted); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; background: var(--surface); z-index: 1; }
  .table thead th:first-child { border-start-start-radius: var(--r-group); }
  .table thead th:last-child { border-start-end-radius: var(--r-group); }
  .table tbody tr { cursor: pointer; }
  .table tbody tr:hover { background: var(--gray-tint); }
  .table tbody tr + tr > * { border-block-start: 1px solid var(--line); }
  .table tbody th { font-weight: 500; }
  .table .who { display: flex; align-items: center; gap: 12px; }
  .table .who a::after { content: ""; position: absolute; inset: 0; }
  .table tbody tr { position: relative; }
  .table .num { font-variant-numeric: tabular-nums; text-align: end; }
  .table .tel { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

  @container (width < 620px) {
    .table, .table tbody, .table tr, .table th, .table td { display: block; }
    .table thead { display: none; }
    .table tbody tr {
      display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 16px;
    }
    .table tbody tr + tr { border-block-start: 1px solid var(--line); }
    .table tbody tr + tr > * { border: 0; }
    .table th, .table td { padding: 0; }
    .table tbody th { grid-column: 1; grid-row: 1 / span 2; }
    .table td.c-status { grid-column: 2; grid-row: 1; justify-self: end; }
    .table td.c-tel, .table td.c-num { display: none; }
    .table td.c-mobile-sub { grid-column: 2; grid-row: 2; justify-self: end; color: var(--muted); font-size: 13px; }
  }
  .c-mobile-sub { display: none; }
  @container (width < 620px) { .c-mobile-sub { display: block; } }

  /* ---------- Conversation façon iMessage ---------- */
  .thread {
    display: flex; flex-direction: column; gap: 3px; padding: 16px 14px 8px;
    background: var(--surface); border-radius: var(--r-group);
    max-block-size: min(62dvh, 640px); overflow-y: auto; overscroll-behavior: contain;
  }
  .day { align-self: center; margin-block: 12px 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
  .bubble {
    max-inline-size: min(78%, 420px); padding: 7px 13px 8px; border-radius: 19px;
    font-size: 16px; line-height: 1.32; white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .bubble.in { align-self: flex-start; background: var(--bubble-in); color: var(--text); border-end-start-radius: 6px; }
  .bubble.out { align-self: flex-end; background: var(--accent-fill); color: #fff; border-end-end-radius: 6px; }
  .bubble.out.auto { background: color-mix(in srgb, var(--accent-fill) 80%, #5b5b60); }
  .bubble.failed { background: var(--red); }
  .bubble-meta { font-size: 11px; color: var(--muted); margin-block: 1px 8px; }
  .bubble-meta.out { align-self: flex-end; }
  .bubble-meta.in { align-self: flex-start; }
  .composer {
    display: flex; align-items: flex-end; gap: 8px; padding: 8px; margin-block-start: 10px;
    background: var(--surface); border-radius: 24px;
  }
  .composer textarea {
    flex: 1; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 7px 14px;
    font-size: 16px; line-height: 1.35; background: var(--bg); outline: none; field-sizing: content; max-block-size: 8lh;
  }
  .composer textarea:focus { border-color: var(--accent); }
  .send-btn { inline-size: 34px; block-size: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent-fill); color: #fff; flex: none; }
  .send-btn svg { inline-size: 18px; block-size: 18px; }

  /* Aperçu du SMS dans un téléphone (campagnes) */
  .phone-preview {
    padding: 18px 14px 22px; border-radius: 30px; background: var(--surface);
    border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px;
  }
  .phone-preview .who { align-self: center; text-align: center; font-size: 12px; color: var(--muted); margin-block-end: 8px; }
  .phone-preview .bubble { max-inline-size: 88%; }
  /* Image d'un MMS, au-dessus du texte comme sur un téléphone */
  .mms-img {
    display: block; align-self: flex-start; max-inline-size: min(70%, 260px); max-block-size: 340px;
    object-fit: cover; border-radius: 18px; background: var(--bubble-in);
  }
  .mms-img.out { align-self: flex-end; }
  .dz-image-acts { justify-content: flex-end; gap: 4px; }
  .dz-image img { inline-size: 52px; block-size: 52px; object-fit: cover; border-radius: 10px; flex: none; }
  .sms-meter { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); padding: 8px 16px 0; }
  .sms-meter b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .sms-meter .warn { color: var(--amber); }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 14px; }
  .chip { border: 0; padding: 4px 10px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 500; }

  /* Choix du type de campagne (cartes radio) */
  .choice { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 12px; }
  .choice label {
    display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--line); font-size: 15px;
  }
  .choice label:has(:checked) { border-color: var(--accent); background: var(--accent-tint); }
  .choice input { position: absolute; opacity: 0; }
  .choice b { font-size: 16px; }
  .choice small { color: var(--muted); }

  /* Barre de progression */
  .progress { block-size: 8px; border-radius: 99px; background: var(--gray-tint); overflow: hidden; }
  .progress > i { display: block; block-size: 100%; inline-size: calc(var(--p) * 100%); background: var(--green); border-radius: inherit; transition: inline-size .6s var(--ease); }

  /* Scénario d'inscription (sens de lecture réel = séquence) */
  .flow-steps { display: grid; gap: 0; counter-reset: step; }
  .flow-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 16px; position: relative; }
  .flow-step + .flow-step::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 56px 0; border-block-start: 1px solid var(--line); }
  .flow-step::after { counter-increment: step; content: counter(step); grid-row: 1; grid-column: 1; inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-size: 14px; font-weight: 700; }
  .flow-step > div { grid-column: 2; grid-row: 1; }
  .flow-when { font-size: 13px; color: var(--muted); margin-block-end: 4px; }
  .flow-step textarea { inline-size: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--bg); font-size: 16px; resize: vertical; outline: none; }
  .flow-step textarea:focus { border-color: var(--accent); }

  /* ---------- Dialogues (feuilles) ---------- */
  dialog {
    inline-size: min(520px, calc(100vw - 24px)); max-block-size: calc(100dvh - 48px);
    padding: 0; border: 0; border-radius: var(--r-sheet);
    background: var(--bg); color: var(--text); box-shadow: var(--shadow-float);
  }
  dialog:modal { overscroll-behavior: contain; }
  dialog::backdrop { background: rgb(0 0 0 / .35); overflow: hidden; overscroll-behavior: contain; }
  dialog[open] { animation: sheet-in .32s var(--ease); }
  @keyframes sheet-in { from { opacity: 0; translate: 0 24px; } }
  .sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 14px 6px; }
  .sheet-head h2 { font-size: 17px; font-weight: 600; text-align: center; grid-column: 2; }
  .sheet-head .btn-plain:first-child { justify-self: start; }
  .sheet-head .btn-plain:last-child { justify-self: end; font-weight: 600; }
  .sheet-body { padding: 10px 16px 20px; display: grid; gap: 22px; }
  dialog > .stack { padding: 20px 20px 18px; }
  dialog > .stack > .chips { padding: 0; }
  @media (width < 600px) {
    dialog { inline-size: 100vw; max-inline-size: 100vw; margin: auto 0 0; border-end-start-radius: 0; border-end-end-radius: 0; padding-block-end: env(safe-area-inset-bottom); }
    @keyframes sheet-in { from { translate: 0 100%; } }
  }

  /* ---------- Notifications ---------- */
  .toasts {
    position: fixed; z-index: 50; inset-block-start: 14px; inset-inline: 0;
    display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 12px;
  }
  .toast {
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    max-inline-size: 520px; padding: 11px 18px; border-radius: 16px;
    background: var(--surface-glass); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
    box-shadow: var(--shadow-float); font-size: 15px; font-weight: 500;
    animation: toast 5.5s var(--ease) forwards;
  }
  .toast svg { inline-size: 20px; block-size: 20px; flex: none; }
  .toast.success svg { color: var(--green); }
  .toast.error svg, .toast.warning svg { color: var(--red); }
  .toast.info svg { color: var(--accent); }
  .toast.error, .toast.warning { animation-duration: 9s; }
  @keyframes toast { 0% { opacity: 0; translate: 0 -16px; } 6%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; visibility: hidden; } }

  /* État vide */
  .empty { padding: 48px 24px; text-align: center; background: var(--surface); border-radius: var(--r-sheet); }
  .empty svg { inline-size: 44px; block-size: 44px; margin: 0 auto 12px; color: var(--muted); }
  .empty h2 { font-size: 20px; }
  .empty p { color: var(--muted); margin-block: 6px 18px; max-inline-size: 42ch; margin-inline: auto; }

  .callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-group); background: var(--amber-tint); font-size: 15px; }
  .callout svg { inline-size: 22px; block-size: 22px; color: var(--amber); flex: none; }
  .callout.info { background: var(--accent-tint); }
  .callout.info svg { color: var(--accent); }

  .code-box { display: flex; align-items: center; gap: 8px; }
  .code-box code { flex: 1; min-inline-size: 0; overflow-x: auto; white-space: nowrap; font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; }

  .otp { font-size: 32px !important; letter-spacing: .4em !important; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-round) !important; }
}

@layer utilities {
  .muted { color: var(--muted); }
  .grow { flex: 1; }
  .gap-s { gap: 8px; }
  .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block-end: 14px; }
  .toolbar .search { flex: 1 1 220px; }
  .mt { margin-block-start: 16px; }
  .center { text-align: center; }
  .tabular { font-variant-numeric: tabular-nums; }
}

/* ==========================================================================
   Éditeur de scénario
   ========================================================================== */
@layer components {
  .flow-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
  @media (width >= 1100px) {
    .flow-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .sim-col { position: sticky; inset-block-start: 20px; }
  }
  .select-plain { border: 0; background: var(--gray-tint); border-radius: 8px; padding: 6px 10px; font-size: 15px; max-inline-size: 100%; }

  .step-card { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-sheet); background: var(--surface-2); }
  .step-card .group { background: var(--surface); }
  .step-head { display: flex; align-items: center; gap: 12px; }
  .step-head h3 { font-size: 18px; line-height: 1.2; }
  .step-dot {
    inline-size: 30px; block-size: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: var(--accent-fill); color: #fff; font-family: var(--font-round); font-weight: 700; font-size: 15px;
  }
  .row .step-dot { inline-size: 26px; block-size: 26px; font-size: 13px; background: var(--accent-tint); color: var(--accent); }
  .step-tools { display: flex; gap: 4px; }
  .icon-btn {
    inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: var(--gray-tint);
    font-size: 15px; font-weight: 600; color: var(--text); display: grid; place-items: center;
  }
  .icon-btn:hover { filter: brightness(.95); }
  .icon-btn.danger { color: var(--red); }
  .first-msg { font-size: 16px; line-height: 1.4; padding-block: 4px; white-space: pre-wrap; }

  .options { display: grid; gap: 10px; }
  .opt { margin: 0; padding: 0; border: 0; border-radius: var(--r-group); background: var(--surface); overflow: clip; }
  .opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .opt-grid textarea.kw { min-block-size: 0; field-sizing: content; resize: none; }
  .opt-grid .field::before { display: none; }
  .opt-grid .field { border-block-end: 1px solid var(--line); }
  .opt-grid > .field:first-child input { font-weight: 600; }
  .opt-wide { grid-column: 1 / -1; }
  .opt-grid .field:has(textarea) { grid-column: 1 / -1; }
  .opt-grid .field:has(select) { min-inline-size: 0; }
  .opt-grid select { text-overflow: ellipsis; }
  .opt-remove { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: var(--red); cursor: pointer; }
  .opt:has(.opt-remove :checked) .opt-grid { opacity: .4; }

  .assist-more > summary { cursor: pointer; padding: 0 16px 8px; font-size: 15px; color: var(--accent); list-style: none; }
  .assist-more > summary::-webkit-details-marker { display: none; }
  .assist-more > summary::before { content: "›"; display: inline-block; margin-inline-end: 8px; transition: rotate .2s var(--ease); }
  .assist-more[open] > summary::before { rotate: 90deg; }
  .retry summary { cursor: pointer; padding: 4px 16px 8px; font-size: 14px; color: var(--accent); list-style: none; }
  .retry summary::-webkit-details-marker { display: none; }
  .retry summary::before { content: "›"; display: inline-block; margin-inline-end: 8px; transition: rotate .2s var(--ease); }
  .retry[open] summary::before { rotate: 90deg; }

  .step-foot { display: flex; align-items: center; gap: 14px; }
  .saved { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 14px; font-weight: 500; animation: toast 3s var(--ease) forwards; }
  .saved svg { inline-size: 18px; block-size: 18px; }
  .add-step { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-sheet); border: 1.5px dashed var(--line); }

  .sim-screen { min-block-size: 360px; max-block-size: min(60dvh, 560px); border-radius: 30px; }
  .sim-note {
    align-self: center; max-inline-size: 90%; margin-block: 4px; padding: 3px 10px; border-radius: 99px;
    background: var(--gray-tint); color: var(--muted); font-size: 12px; text-align: center;
  }
  .sim .bubble { font-size: 15px; }
  td.c-field, th.c-field { white-space: nowrap; max-inline-size: 16ch; overflow: hidden; text-overflow: ellipsis; }
  @container (width < 620px) { .table td.c-field { display: none; } }
}
@layer components {
  .var-hint { padding: 0 16px 10px; font-size: 13px; color: var(--muted); }
  .var-hint code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); background: var(--accent-tint); padding: 1px 5px; border-radius: 5px; }
}
@layer components {
  .opt-sum { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
  .opt-sum::-webkit-details-marker { display: none; }
  .opt-sum b { font-size: 16px; min-inline-size: 3ch; }
  .opt-meta { flex: 1; min-inline-size: 0; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .opt-sum .chev { transition: rotate .2s var(--ease); }
  .opt[open] > .opt-sum { border-block-end: 1px solid var(--line); }
  .opt[open] > .opt-sum .chev { rotate: 90deg; }
  .sim-fab { display: none; }
  @media (width < 1100px) {
    .sim-fab {
      display: inline-flex; position: fixed; z-index: 25; inset-inline-end: 16px;
      inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); box-shadow: var(--shadow-float);
    }
  }
  @media (860px <= width < 1100px) { .sim-fab { inset-block-end: 24px; } }
  .sim-col { scroll-margin-block-start: 16px; }
}

/* ---------- Concepteur visuel de scénario ---------- */
@layer components {
  /* Mode concentration : le concepteur prend tout l'écran */
  html:has(body.designer-page), body.designer-page { overflow: hidden; block-size: 100dvh; }
  .designer-page .main { padding: 0; margin: 0; max-inline-size: none; }
  .designer-page .sidebar, .designer-page .tabbar { display: none; }
  .dz {
    --q: var(--accent); --q-tint: var(--accent-tint);
    --a: light-dark(#1f9d55, #32d74b); --a-tint: var(--green-tint);
    --l: light-dark(#c46a00, #ffb340); --l-tint: var(--amber-tint);
    --i: light-dark(#6e56cf, #a594ff); --i-tint: light-dark(rgb(110 86 207 / .12), rgb(165 148 255 / .2));
    --dot: light-dark(rgb(60 60 67 / .16), rgb(235 235 245 / .12));
    position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr);
    block-size: 100dvh; overflow: clip; background: var(--bg);
  }
  .dz-menu[hidden], .dz-issues[hidden] { display: none; }
  .dz-bar {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: var(--surface-glass); backdrop-filter: saturate(180%) blur(24px);
    border-block-end: 1px solid var(--line); z-index: 5;
  }
  .dz-back { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 99px; color: var(--accent); }
  .dz-back:hover { background: var(--accent-tint); }
  .dz-back svg { inline-size: 20px; block-size: 20px; }
  .dz-name { min-inline-size: 0; flex: 1; }
  .dz-name h1 { font: 600 17px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dz-name p { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
  .dz-lock { inline-size: 12px; block-size: 12px; }
  .dz-saved::before, .dz-unsaved::before { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 99px; margin-inline-end: 6px; background: var(--green); vertical-align: 1px; }
  .dz-unsaved { color: var(--amber); } .dz-unsaved::before { background: var(--amber); }
  .dz-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .dz-icon { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border: 0; border-radius: 9px; background: none; color: var(--text); }
  .dz-icon:hover:not(:disabled) { background: var(--gray-tint); }
  .dz-icon:disabled { opacity: .3; cursor: default; }
  .dz-icon svg, .dz-run svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .dz-zoom { border: 0; background: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); min-inline-size: 48px; border-radius: 8px; padding: 6px 4px; }
  .dz-zoom:hover { background: var(--gray-tint); }
  .dz-sep { inline-size: 1px; block-size: 20px; background: var(--line); margin-inline: 4px; }
  .dz-issues { border: 0; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; background: var(--amber-tint); color: var(--amber); }
  .dz-issues.is-error { background: var(--red-tint); color: var(--red); }
  .dz-run { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding-inline: 18px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 88%, white), var(--accent-fill));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-fill) 40%, transparent); }
  .dz[data-state="saving"] .dz-run, .dz[data-state="saving"] [data-act="save"] { opacity: .6; pointer-events: none; }

  .dz-body { position: relative; display: flex; min-block-size: 0; }
  .dz-lib {
    flex: 0 0 236px; overflow-y: auto; padding: 14px 12px 24px; border-inline-end: 1px solid var(--line);
    background: var(--surface); display: flex; flex-direction: column; gap: 6px;
  }
  .dz-lib-title { font: 600 15px var(--font-display); padding: 2px 6px 6px; }
  .dz-lib-group { font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 6px 2px; }
  .dz-lib-foot { font-size: 12px; color: var(--muted); padding: 12px 6px 0; }
  .dz-tile {
    display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; padding: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: grab;
    transition: border-color .15s, transform .15s var(--ease), box-shadow .15s;
  }
  .dz-tile:hover { border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 2px 10px rgb(0 0 0 / .06); transform: translateY(-1px); }
  .dz-tile:active { cursor: grabbing; }

  .dz-ic { display: grid; place-items: center; flex: none; inline-size: 34px; block-size: 34px; border-radius: 10px; background: var(--ct); color: var(--c); }
  .dz-ic svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .dz-tx { display: grid; min-inline-size: 0; line-height: 1.25; }
  .dz-tx b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dz-tx small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-q { --c: var(--q); --ct: var(--q-tint); } .cat-a { --c: var(--a); --ct: var(--a-tint); }
  .cat-l { --c: var(--l); --ct: var(--l-tint); } .cat-i { --c: var(--i); --ct: var(--i-tint); }
  .dz-ic.cat-q, .dz-ic.cat-a, .dz-ic.cat-l, .dz-ic.cat-i { background: var(--ct); color: var(--c); }

  .dz-canvas {
    position: relative; flex: 1; min-inline-size: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none;
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1.2px, transparent 1.3px);
    background-size: 22px 22px;
  }
  .dz-canvas.is-panning { cursor: grabbing; }
  .dz-world { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; }
  .dz-world.is-gliding { transition: transform .4s var(--ease); }
  .dz-wires { position: absolute; inset: 0 auto auto 0; overflow: visible; pointer-events: none; }
  .dz-wires path { fill: none; stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1.6; }
  .dz-wires path.is-jump { stroke-dasharray: 4 5; }
  .dz-wires path.is-path { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 7 6; animation: dz-flow .9s linear infinite; }
  @keyframes dz-flow { to { stroke-dashoffset: -13; } }
  .dz-hint { position: absolute; inset-inline-start: 16px; inset-block-end: 14px; margin: 0; font-size: 12px; color: var(--muted); pointer-events: none; }

  .dz-node {
    position: absolute; display: flex; align-items: center; gap: 12px; block-size: 78px; padding: 12px 14px;
    text-align: start; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 18px rgb(0 0 0 / .05);
    transition: box-shadow .2s, border-color .2s, transform .2s var(--ease);
  }
  .dz-node::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; inline-size: 3px; border-radius: 3px; background: var(--c, var(--i)); }
  .dz-node:hover { border-color: color-mix(in srgb, var(--c, var(--i)) 45%, transparent); transform: translateY(-1px); }
  .dz-node.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint), 0 8px 24px rgb(0 0 0 / .08); }
  .dz-node.is-path { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
  .dz-node.is-orphan { opacity: .55; border-style: dashed; }
  .dz-node.is-live { border-color: var(--accent); animation: dz-pulse 1.8s var(--ease) infinite; }
  @keyframes dz-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 24px rgb(0 0 0 / .08); }
    50% { box-shadow: 0 0 0 9px transparent, 0 8px 24px rgb(0 0 0 / .08); }
  }
  .dz-node.is-new { animation: dz-pop .45s var(--ease); }
  .dz-node.is-flash { animation: dz-pop .45s var(--ease); }
  @keyframes dz-pop { from { transform: scale(.85); opacity: 0; } }
  .dz-badge, .dz-live, .dz-var { position: absolute; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
  .dz-badge { inset-block-start: -9px; inset-inline-start: 14px; background: var(--accent-fill); color: var(--on-accent); }
  .dz-live { inset-block-start: -9px; inset-inline-end: 12px; background: var(--accent-fill); color: var(--on-accent); }
  .dz-var { inset-block-end: -9px; inset-inline-end: 12px; max-inline-size: 48%; overflow: hidden; text-overflow: ellipsis; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-family: ui-monospace, monospace; font-weight: 500; }
  .dz-warn { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 99px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; }
  .dz-invite { --c: var(--i); --ct: var(--i-tint); block-size: 64px; }

  .dz-leaf { position: absolute; display: grid; place-items: center; block-size: 32px; border-radius: 99px; font-size: 13px; font-weight: 500; }
  .dz-end { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
  .dz-end::before { content: ""; position: absolute; inset-inline-start: 14px; inline-size: 8px; block-size: 8px; border-radius: 99px; background: var(--muted); }
  .dz-jump { border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: var(--surface); color: var(--accent); padding-inline: 10px; overflow: hidden; white-space: nowrap; }
  .dz-jump:hover { background: var(--accent-tint); }

  .dz-label, .dz-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
  .dz-label { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
  .tone-yes { background: var(--green-tint); color: var(--green); }
  .tone-no { background: var(--red-tint); color: var(--red); }
  .tone-n { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
  .dz-plus {
    position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; inline-size: 24px; block-size: 24px;
    padding: 0; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--accent);
    font-size: 14px; line-height: 1; opacity: 0; transition: opacity .15s, transform .15s var(--ease), background .15s;
  }
  .dz-canvas:hover .dz-plus, .dz-plus:focus-visible, .dz.is-dragging .dz-plus, .dz-plus-first { opacity: 1; }
  .dz-plus:hover, .dz-plus.is-over { background: var(--accent-fill); color: var(--on-accent); transform: translate(-50%, -50%) scale(1.25); }
  .dz.is-dragging .dz-plus { inline-size: 30px; block-size: 30px; border: 2px dashed var(--accent); }
  .dz-plus-first { inline-size: 44px; block-size: 44px; font-size: 22px; background: var(--accent-fill); color: var(--on-accent); border: 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-fill) 35%, transparent); }
  .dz-empty { position: absolute; transform: translateX(-50%); inline-size: 280px; margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
  @media (hover: none) { .dz-plus { opacity: 1; } }

  .dz-menu {
    position: absolute; z-index: 20; inline-size: 260px; overflow-y: auto; padding: 6px 8px 10px; border-radius: 16px;
    background: var(--surface-glass); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--line); box-shadow: var(--shadow-float);
    display: flex; flex-direction: column; gap: 4px; animation: dz-pop .2s var(--ease);
  }
  .dz-menu .dz-tile { border-color: transparent; background: none; cursor: pointer; padding: 6px; }
  .dz-menu .dz-tile:hover, .dz-menu .dz-tile:focus-visible { background: var(--gray-tint); transform: none; box-shadow: none; }

  .dz-panel {
    flex: 0 0 0; inline-size: 0; overflow: hidden; background: var(--surface); border-inline-start: 1px solid var(--line);
    display: flex; flex-direction: column; transition: flex-basis .25s var(--ease);
  }
  .dz.panel-open .dz-panel { flex-basis: 372px; inline-size: 372px; }
  .dz-panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-block-end: 1px solid var(--line); }
  .dz-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border-radius: 9px; background: var(--gray-tint); }
  .dz-tabs button { border: 0; background: none; border-radius: 7px; padding: 6px; font-size: 13px; font-weight: 500; }
  .dz-tabs [aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
  .dz-pane { flex: 1; overflow-y: auto; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 10px; }
  .dz-pane[hidden] { display: none; }
  .dz-pane .group-title { margin-block-start: 8px; }
  .dz-ihead { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; }
  .dz-ihead h2 { font: 600 19px var(--font-display); }
  .dz-ihead p { font-size: 13px; color: var(--muted); }
  .dz-ihead .dz-ic { inline-size: 42px; block-size: 42px; border-radius: 12px; }
  .dz-pane .group { background: var(--surface-2); }
  .dz-pane .field input:not(.switch), .dz-pane .field textarea, .dz-pane .field select { background: transparent; }
  .dz-pane code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: var(--gray-tint); }
  .dz-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dz-opt { border-radius: var(--r-group); }
  .dz-opt summary { display: flex; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; list-style: none; }
  .dz-opt summary::-webkit-details-marker { display: none; }
  .dz-opt summary::after { content: "›"; margin-inline-start: auto; color: var(--muted); transition: rotate .2s; }
  .dz-opt[open] summary::after { rotate: 90deg; }
  .dz-opt-sum { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dz-wide { inline-size: 100%; justify-content: center; }
  .dz-danger { color: var(--red); }
  .dz-prob { text-align: start; inline-size: 100%; border: 0; background: none; }
  .dz-prob.error .row-sub { color: var(--red); }
  .dz-pane .sim-screen { min-block-size: 320px; max-block-size: calc(100dvh - 300px); }
  .dz-close { display: none; }

  @media (width < 1100px) {
    .dz-close { display: grid; }
    .dz-panel {
      position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 15; inline-size: min(400px, 100%);
      flex: none; transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-float);
    }
    .dz.panel-open .dz-panel { transform: none; inline-size: min(400px, 100%); }
  }
  @media (width < 860px) {
    .dz-lib, .dz-hide-sm, .dz-sep, [data-act="undo"], [data-act="redo"], [data-act="zoom-out"], [data-act="zoom-in"] { display: none; }
    .dz-name p { display: none; }
    .dz-run span { display: none; }
    .dz-run { padding-inline: 12px; }
    .dz-bar { padding: 8px 10px; gap: 6px; }
    .dz-tools [data-act="save"] { padding-inline: 12px; }
    .dz-panel {
      inset-block: auto 0; inset-inline: 0; inline-size: 100%; block-size: 72%; border-radius: 22px 22px 0 0;
      border-inline-start: 0; transform: translateY(105%); padding-block-end: env(safe-area-inset-bottom);
    }
    .dz.panel-open .dz-panel { inline-size: 100%; }
    .dz-hint { display: none; }
  }
  /* Studio : destinataires, relance, compteurs en direct */
  .dz-audience { block-size: 56px; border-radius: 99px; padding-inline: 10px 18px; }
  .dz-audience::before, .dz-reminder::before { display: none; }
  .dz-reminder { border-style: dashed; padding: 8px 12px; }
  .dz-reminder.is-off { opacity: .6; }
  .dz-reminder .dz-ic { inline-size: 30px; block-size: 30px; }
  .dz-wires path.is-off { opacity: .4; }
  .dz-wires path.is-flow { stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-linecap: round; }
  .dz-count {
    position: absolute; inset-block-end: -10px; inset-inline-start: 14px; font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 99px; background: var(--amber); color: #1d1d1f; white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--amber) 40%, transparent);
  }
  .dz-label i { font-style: normal; font-variant-numeric: tabular-nums; margin-inline-start: 6px; padding-inline-start: 6px; border-inline-start: 1px solid currentColor; }
  .dz-label.is-num i { margin: 0; padding: 0; border: 0; }
  .dz-label.is-num { background: var(--accent-fill); color: var(--on-accent); border: 0; }
  .dz-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; }
  .dz-figs > div { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
  .dz-figs b { font: 700 22px var(--font-round); font-variant-numeric: tabular-nums; }
  .dz-figs small { font-size: 12px; color: var(--muted); }
  .dz-figs .ok { color: var(--green); } .dz-figs .warn { color: var(--amber); } .dz-figs .bad { color: var(--red); }
  .dz-meter { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 16px 8px; font-size: 12px; color: var(--muted); }
  .dz-meter .warn { color: var(--amber); }
  .dz-people .row .avatar { inline-size: 30px; block-size: 30px; font-size: 12px; }
  .dz-pane .progress { margin-block: 4px 8px; }
  .dz-pane a.callout { color: inherit; }
  .dz-name p .status { font-size: 11px; padding-block: 1px; }
  .dz-when { flex-wrap: wrap; }
  .dz-when input { flex: 1 1 180px; min-inline-size: 0; }
  #dz-send { inline-size: min(560px, calc(100vw - 32px)); }
  @media (width < 860px) {
    .dz-test-btn span, .dz-ai-btn span { display: none; }
    .dz-test-btn, .dz-ai-btn { padding-inline: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dz-wires path.is-path, .dz-node.is-live, .dz-node.is-new { animation: none; }
  }
}
.inline { display: contents; }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.btn[aria-busy="true"] svg { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] svg { animation: none; } }