/* BURDIGALA.tasks — compléments à Burdigala UI 1.1
   Ordinateur : coquille standard (colonne bordeaux + barre supérieure).
   Mobile (≤ 760 px) : présentation d'application native — grand titre, barre d'onglets, listes groupées, feuilles. */
:root {
  --be-surface-2: #fbf9f9;
  --be-line: #781428;
  --be-line-soft: rgba(120, 20, 40, .1);
  --be-prev: #a99da0;
  --be-bar: #f3e6e9;
  --be-series-1: #2a78d6;
  --be-series-2: #eb6834;
  --be-series-3: #1baf7a;
  --be-tabbar-h: 3.25rem;
  --be-safe-b: env(safe-area-inset-bottom, 0px);
  --be-safe-t: env(safe-area-inset-top, 0px);
}

[hidden] { display: none !important; }

/* Pages simples */
.be-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.be-page__card { max-width: 30rem; text-align: center; align-items: center; }

/* Coquille */
.be-brand { display: flex; align-items: center; gap: .7rem; padding: 0 .5rem; color: #fff; }
.be-brand img { width: 2.4rem; height: auto; }
.be-brand strong { display: block; font: 600 1.02rem var(--mb-font-display); }
.be-brand small { display: block; font-size: .55rem; letter-spacing: .1rem; text-transform: uppercase; opacity: .6; }
.be-topbar-title { min-width: 0; }
.be-topbar-title .mb-heading { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-back { display: inline-flex; align-items: center; gap: .1rem; color: var(--mb-color-primary); font-weight: 600; margin-left: -.4rem; }
.be-back svg { width: 1.5rem; height: 1.5rem; }
.be-back[hidden] { display: none; }
.be-nav-sites { display: flex; flex-direction: column; gap: .15rem; max-height: min(42vh, 24rem); overflow-y: auto; overscroll-behavior: contain; flex: none; }
.be-nav-sites .mb-nav__link { padding: .5rem .875rem; font-size: .8rem; }
.be-nav-sites .mb-nav__link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3ccf91; box-shadow: 0 0 0 0 rgba(60, 207, 145, .6); animation: be-pulse 2s infinite; flex: none; display: inline-block; }
.be-live-dot--off { background: rgba(255,255,255,.3); animation: none; }
.be-live-dot--dark { background: #1f9d6b; }
@keyframes be-pulse { 70% { box-shadow: 0 0 0 .45rem rgba(60, 207, 145, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 207, 145, 0); } }
.be-footer { padding-top: 0; }
.be-tabbar, .be-ptr, .be-large { display: none; }
.mb-menu-btn { display: none; }

/* Grilles */
.be-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.s12 { grid-column: span 12; } .s8 { grid-column: span 8; } .s6 { grid-column: span 6; } .s4 { grid-column: span 4; } .s3 { grid-column: span 3; }
@media (max-width: 1180px) { .s8, .s4 { grid-column: span 12; } .s6 { grid-column: span 12; } .s3 { grid-column: span 6; } }

/* Barre de filtres */
.be-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.be-toolbar .mb-select { width: auto; min-width: 11rem; padding: .55rem .7rem; }
.be-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.be-chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .38rem .45rem .38rem .75rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: .75rem; font-weight: 600; border: 0; cursor: pointer; }
.be-chip b { font-weight: 700; }
.be-chip span[aria-hidden] { width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(120, 20, 40, .12); font-size: .8rem; }
.be-periods { display: inline-flex; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-md); background: #fff; padding: .2rem; gap: .1rem; }
.be-periods button { border: 0; background: none; padding: .45rem .7rem; border-radius: var(--mb-radius-sm); font-weight: 600; font-size: .75rem; color: var(--mb-color-muted); cursor: pointer; white-space: nowrap; }
.be-periods button[aria-pressed="true"] { background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.be-switch { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: var(--mb-color-muted); cursor: pointer; }
.be-switch input { appearance: none; width: 2.1rem; height: 1.25rem; border-radius: 999px; background: #ddd4d6; position: relative; cursor: pointer; transition: background .2s; margin: 0; flex: none; }
.be-switch input::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.be-switch input:checked { background: var(--mb-color-primary); }
.be-switch input:checked::after { transform: translateX(.85rem); }

/* Cartes */
.be-card-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.be-card-title h2 { margin: 0; font: 600 1.05rem var(--mb-font-display); }
.be-tabs-mini { display: flex; gap: .15rem; flex-wrap: wrap; justify-content: flex-end; }
.be-tabs-mini button { border: 0; background: none; padding: .3rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--mb-color-muted); cursor: pointer; }
.be-tabs-mini button[aria-pressed="true"] { background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.be-rows { display: flex; flex-direction: column; gap: .2rem; }
.be-rows__head { display: flex; justify-content: space-between; color: var(--mb-color-muted); font-size: .6rem; font-weight: 700; letter-spacing: .06rem; text-transform: uppercase; padding: 0 .55rem .3rem; }
.be-rows__head span:last-child { display: flex; gap: 1rem; }
.be-row { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 2.15rem; padding: 0 .55rem; border-radius: .4rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; overflow: hidden; }
.be-row:hover { background: var(--be-surface-2); }
.be-row__fill { position: absolute; inset: .2rem auto .2rem 0; border-radius: .35rem; background: var(--be-bar); z-index: 0; transition: width .4s ease; }
.be-row__label { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-row__label > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.be-row__vals { position: relative; z-index: 1; display: flex; gap: 1rem; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.be-row__vals small { color: var(--mb-color-muted); font-weight: 500; min-width: 2.6rem; text-align: right; }
.be-fav { width: 1rem; height: 1rem; border-radius: 3px; flex: none; }
.be-flag { font-size: 1rem; line-height: 1; flex: none; }
.be-more { margin-top: .6rem; border: 0; background: none; color: var(--mb-color-primary); font-weight: 700; font-size: .75rem; cursor: pointer; padding: .3rem .55rem; }
.be-empty { padding: 1.6rem .5rem; text-align: center; color: var(--mb-color-muted); font-size: .8rem; }

/* Onglets */
.be-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--mb-color-border); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; }
.be-tabs::-webkit-scrollbar { display: none; }
.be-tabs a { padding: .75rem 1rem; color: var(--mb-color-muted); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.be-tabs a:hover { color: var(--mb-color-text); }
.be-tabs a[aria-current="page"] { color: var(--mb-color-primary); border-bottom-color: var(--mb-color-primary); }

/* Formulaires et blocs divers */
.be-section { margin-bottom: 1rem; }
.be-section > h3 { margin: 0 0 .75rem; font: 600 1rem var(--mb-font-display); }
.be-code { position: relative; background: #1f1719; color: #f4e9eb; border-radius: var(--mb-radius-md); padding: .9rem 1rem; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; margin: 0; }
.be-code-wrap { position: relative; }
.be-code-wrap .be-copy { position: absolute; top: .45rem; right: .45rem; }
.be-copy { border: 0; border-radius: .4rem; background: rgba(255,255,255,.12); color: #fff; font-size: .68rem; font-weight: 700; padding: .35rem .6rem; cursor: pointer; }
.be-copy:hover { background: rgba(255,255,255,.22); }
.be-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.be-steps > li { position: relative; padding-left: 2.4rem; }
.be-steps > li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -.1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-weight: 700; font-size: .8rem; }
.be-steps h4 { margin: 0 0 .4rem; font-size: .9rem; }
.be-status { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: var(--mb-radius-lg); border: 1px solid var(--mb-color-border); background: #fff; }
.be-status__icon { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; }
.be-status--ok .be-status__icon { background: var(--mb-color-success-soft); color: var(--mb-color-success); }
.be-status--wait .be-status__icon { background: var(--mb-color-warning-soft); color: var(--mb-color-warning); }
.be-status--off .be-status__icon { background: #f1eeee; color: var(--mb-color-muted); }
.be-status strong { display: block; }
.be-status small { color: var(--mb-color-muted); }
.be-list { list-style: none; margin: 0; padding: 0; }
.be-list > li { display: flex; align-items: center; gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--mb-color-border); min-width: 0; }
.be-list > li:first-child { border-top: 0; padding-top: 0; }
.be-list .be-grow { flex: 1; min-width: 0; }
.be-list .be-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-sub { color: var(--mb-color-muted); font-size: .72rem; }
.be-link { color: var(--mb-color-primary); font-weight: 600; cursor: pointer; }
.be-link:hover { text-decoration: underline; }
button.be-link { border: 0; background: none; padding: 0; font: inherit; }
.be-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem 1.5rem; }
.be-check { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.be-check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--mb-color-primary); flex: none; }
.be-check strong { display: block; font-size: .8rem; }
.be-check small { color: var(--mb-color-muted); font-size: .7rem; }
.be-callout { border-radius: var(--mb-radius-md); padding: .85rem 1rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary-deep); font-size: .8rem; }
.be-callout--ok { background: var(--mb-color-success-soft); color: #164d3b; }
.be-callout--warn { background: var(--mb-color-warning-soft); color: #5e4415; }
.be-swatch { width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-md); cursor: pointer; background: none; }
.be-preview { width: 100%; height: 30rem; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-lg); background: #fff; }
.be-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.be-table th { text-align: left; color: var(--mb-color-muted); font-size: .6rem; letter-spacing: .06rem; text-transform: uppercase; padding: .5rem .6rem; border-bottom: 1px solid var(--mb-color-border); white-space: nowrap; }
.be-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--mb-color-border); }
.be-table td.num, .be-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.be-table-scroll { overflow-x: auto; }
.be-nowrap { white-space: nowrap; }
.be-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.be-endpoint { display: flex; gap: .6rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--mb-color-border); font-size: .8rem; }
.be-endpoint:first-child { border-top: 0; }
.be-method { font: 700 .62rem ui-monospace, monospace; border-radius: .3rem; padding: .2rem .4rem; background: #e8f0fb; color: #1d5aa6; min-width: 3.3rem; text-align: center; flex: none; }
.be-method--post { background: #e3f4ed; color: #1d6b4d; }
.be-method--put, .be-method--patch { background: #f5ede0; color: #7a5717; }
.be-method--delete { background: #fae7e9; color: #a42738; }
.be-endpoint code { font-size: .78rem; word-break: break-all; }
.be-endpoint span:last-child { color: var(--mb-color-muted); }
.be-modal--wide, .be-modal--wide { width: min(64rem, calc(100% - 2rem)); }

/* Notifications */
.be-toasts { position: fixed; z-index: 100; right: 1.2rem; bottom: 1.2rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; pointer-events: none; }
.be-toast { pointer-events: auto; background: #241b1d; color: #fff; padding: .75rem 1rem; border-radius: var(--mb-radius-md); box-shadow: var(--mb-shadow-md); font-size: .8rem; max-width: 24rem; animation: be-in .25s ease; }
.be-toast--error { background: var(--mb-color-danger); }
.be-toast--success { background: var(--mb-color-success); }
@keyframes be-in { from { opacity: 0; transform: translateY(.5rem); } }

@media (max-width: 1100px) and (min-width: 761px) {
  .mb-menu-btn { display: inline-grid !important; }
  .mb-sidebar { transform: translateX(-100%); transition: transform var(--mb-transition); }
  .mb-sidebar.is-open { transform: none; box-shadow: var(--mb-shadow-lg); }
  .mb-shell { margin-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE — présentation d'application native (mobile first)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html, body.mb-app { background: #f2f0ef; }
  body.mb-app { font-size: 1rem; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
  .mb-sidebar { display: none; }
  .mb-menu-btn { display: none !important; }
  .mb-shell { margin-left: 0; padding-bottom: calc(var(--be-tabbar-h) + var(--be-safe-b) + 1rem); }
  .be-footer { display: none; }

  /* Barre de navigation : translucide, titre compact centré qui apparaît au défilement */
  .mb-topbar { min-height: calc(2.75rem + var(--be-safe-t)); padding: var(--be-safe-t) .75rem 0; gap: .5rem; border-bottom: .5px solid transparent; background: rgba(242, 240, 239, .82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); display: grid; grid-template-columns: 1fr auto 1fr; transition: border-color .2s; }
  .mb-topbar.is-scrolled { border-bottom-color: rgba(0,0,0,.12); }
  .be-back { grid-column: 1; justify-self: start; font-size: 1.05rem; font-weight: 500; }
  .be-back span { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .be-topbar-title { grid-column: 2; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; max-width: 55vw; }
  .mb-topbar.is-scrolled .be-topbar-title { opacity: 1; transform: none; }
  .be-topbar-title .mb-eyebrow { display: none; }
  .be-topbar-title .mb-heading { font: 600 1.05rem var(--mb-font-body); }
  .mb-topbar__actions { grid-column: 3; justify-self: end; margin-left: 0; gap: .25rem; }
  .mb-app .mb-topbar__actions .mb-btn { min-height: 2.25rem; border: 0; background: none; color: var(--mb-color-primary); padding: .4rem .5rem; font-size: 1rem; font-weight: 600; box-shadow: none; }
  .mb-app .mb-topbar__actions .mb-btn--primary { color: var(--mb-color-primary); background: none; }
  .mb-topbar__actions .be-hide-m { display: none; }

  .mb-container { padding: 0 1rem 1.5rem; }
  .be-large { display: block; margin: .25rem 0 .9rem; font: 700 2.05rem/1.12 var(--mb-font-display); letter-spacing: -.01em; }
  .be-large small { display: block; font: 500 .82rem var(--mb-font-body); color: var(--mb-color-muted); letter-spacing: 0; margin-top: .2rem; }

  /* Barre d'onglets */
  .be-tabbar { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--be-tabbar-h) + var(--be-safe-b)); padding-bottom: var(--be-safe-b); background: rgba(250, 249, 249, .88); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: .5px solid rgba(0,0,0,.14); }
  .be-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: #8e8487; font-size: .64rem; font-weight: 600; position: relative; }
  .be-tabbar a svg { width: 1.55rem; height: 1.55rem; }
  .be-tabbar a[aria-current="page"] { color: var(--mb-color-primary); }
  .be-tabbar a:active svg { transform: scale(.9); }
  .be-tabbar .be-badge { position: absolute; top: .35rem; left: calc(50% + .35rem); min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 999px; background: #1f9d6b; color: #fff; font-size: .62rem; display: grid; place-items: center; }

  /* Tirer pour actualiser */
  .be-ptr { display: flex; justify-content: center; height: 0; overflow: visible; position: relative; z-index: 1; }
  .be-ptr span { width: 1.6rem; height: 1.6rem; margin-top: .5rem; border-radius: 50%; border: 2.5px solid rgba(120, 20, 40, .18); border-top-color: var(--mb-color-primary); opacity: 0; transform: scale(.6); transition: opacity .15s; }
  .be-ptr.is-pulling span { opacity: 1; }
  .be-ptr.is-loading span { opacity: 1; animation: be-spin .7s linear infinite; }
  @keyframes be-spin { to { transform: rotate(360deg); } }

  /* Cartes = groupes arrondis */
  .mb-card, .mb-panel { border: 0; border-radius: 1rem; box-shadow: none; padding: 1rem; }
  .be-grid { gap: .9rem; }
  .s12, .s8, .s6, .s4, .s3 { grid-column: span 12; }
  .be-card-title { margin-bottom: .6rem; flex-wrap: wrap; gap: .5rem; }
  .be-card-title h2 { font-size: 1.1rem; }

  /* Sélecteur de période : pastilles défilantes */
  .be-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem .8rem; padding: 0 1rem; gap: .5rem; scroll-snap-type: x proximity; }
  .be-toolbar::-webkit-scrollbar { display: none; }
  .be-toolbar > * { flex: none; scroll-snap-align: start; }
  .be-periods { border: 0; background: none; padding: 0; gap: .4rem; }
  .be-periods button { background: #fff; border-radius: 999px; padding: .5rem .85rem; font-size: .85rem; color: var(--mb-color-text); }
  .be-periods button[aria-pressed="true"] { background: var(--mb-color-primary); color: #fff; }
  .be-switch { background: #fff; border-radius: 999px; padding: .4rem .7rem; font-size: .85rem; }
  .be-chip { font-size: .85rem; padding: .45rem .5rem .45rem .85rem; }

  /* Indicateurs en grille 2 colonnes, chiffres larges */
  .be-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .be-kpi { border: 0; border-radius: 1rem; padding: .85rem .9rem; }
  .be-kpi[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mb-color-primary); }
  .be-kpi:hover { box-shadow: none; }
  .be-kpi[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 2px var(--mb-color-primary); }
  .be-kpi__value { font-size: 1.55rem; }
  .be-kpi:active, .be-site:active, .be-row:active, .be-cell:active { transform: scale(.98); }

  /* Onglets internes = contrôle segmenté défilant */
  .be-tabs { border: 0; background: rgba(118, 105, 108, .12); border-radius: .65rem; padding: .15rem; gap: 0; margin-bottom: 1rem; position: sticky; top: calc(2.75rem + var(--be-safe-t)); z-index: 15; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .be-tabs a { flex: 1 0 auto; text-align: center; border: 0; border-radius: .5rem; padding: .45rem .7rem; font-size: .82rem; color: var(--mb-color-text); }
  .be-tabs a[aria-current="page"] { background: #fff; color: var(--mb-color-text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  .be-tabs-mini { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .be-tabs-mini button { font-size: .8rem; padding: .35rem .7rem; background: #f2eff0; white-space: nowrap; }

  /* Listes : lignes tactiles de 44 px */
  .be-row { min-height: 2.75rem; padding: 0 .4rem; }
  .be-row__label, .be-row__vals { font-size: .9rem; }
  .be-row__vals small { display: none; }
  .be-rows__head span:last-child span + span { display: none; }

  /* Sites : liste groupée façon réglages */
  .be-sites { grid-template-columns: 1fr; gap: 0; background: #fff; border-radius: 1rem; overflow: hidden; }
  .be-site { flex-direction: row; align-items: center; gap: .8rem; border: 0; border-radius: 0; box-shadow: none !important; padding: .8rem 1rem; transform: none !important; position: relative; }
  .be-site + .be-site::before { content: ""; position: absolute; top: 0; left: 4.2rem; right: 0; border-top: .5px solid rgba(0,0,0,.12); }
  .be-site__head { flex: 1; min-width: 0; }
  .be-site .be-spark-wrap { display: none; }
  .be-site__nums { flex-direction: column; align-items: flex-end; gap: .15rem; min-width: 3.6rem; }
  .be-site__nums small { display: none !important; }
  .be-site__nums strong { font-size: 1.15rem; }
  .be-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem; }
  .be-kpis--3 .be-kpi { padding: .7rem .75rem; }
  .be-kpis--3 .be-kpi__label { font-size: .56rem; letter-spacing: .04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .be-kpis--3 .be-kpi__value { font-size: 1.35rem; }
  .be-kpis--3 .be-sub { display: none; }
  .be-site::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid #c4bcbe; border-top: 2px solid #c4bcbe; transform: rotate(45deg); flex: none; margin-left: .1rem; }

  /* Cellules (réglages, API) */
  .be-cells { background: #fff; border-radius: 1rem; overflow: hidden; }
  .be-cell { display: flex; align-items: center; gap: .75rem; min-height: 2.9rem; padding: .6rem 1rem; position: relative; color: inherit; width: 100%; border: 0; background: none; font: inherit; text-align: left; }
  .be-cell + .be-cell::before { content: ""; position: absolute; top: 0; left: 1rem; right: 0; border-top: .5px solid rgba(0,0,0,.12); }
  .be-cells-title { margin: 1.4rem 1rem .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04rem; color: #8e8487; font-weight: 600; }

  .be-bignum { font-size: 3rem; }
  .be-preview { height: 26rem; }
  .be-status { border: 0; border-radius: 1rem; }
  .mb-input, .mb-select, .mb-textarea { font-size: 1rem; padding: .75rem; border-radius: .7rem; }
  .mb-btn { min-height: 2.9rem; border-radius: .8rem; font-size: .95rem; }
  .be-checks { grid-template-columns: 1fr; }
  .be-table { font-size: .85rem; }
  .be-toasts { left: 1rem; right: 1rem; bottom: calc(var(--be-tabbar-h) + var(--be-safe-b) + .75rem); align-items: stretch; }
  .be-toast { max-width: none; border-radius: .9rem; text-align: center; }

  /* Fenêtres = feuilles qui montent du bas */
  .mb-modal { width: 100%; max-width: none; height: auto; max-height: calc(100% - var(--be-safe-t) - 1.5rem); inset: auto 0 0 0; margin: 0; border-radius: 1.1rem 1.1rem 0 0; animation: be-sheet .32s cubic-bezier(.2, .9, .3, 1); }
  .mb-modal[open] { display: flex; flex-direction: column; }
  .mb-modal .mb-modal__body { padding: .6rem 1rem calc(1rem + var(--be-safe-b)); overflow-y: auto; overscroll-behavior: contain; }
  .mb-modal .mb-modal__body::before { content: ""; display: block; width: 2.4rem; height: .3rem; border-radius: 999px; background: #d8d0d2; margin: 0 auto .7rem; }
  .mb-modal .mb-modal__header { padding-bottom: .7rem; }
  .mb-modal .mb-modal__footer { position: sticky; bottom: calc(-1rem - var(--be-safe-b)); background: #fff; padding-bottom: .2rem; flex-wrap: wrap; }
  .mb-modal .mb-modal__footer .mb-btn { flex: 1; }
  .be-modal--wide, .be-modal--wide { width: 100%; }
  @keyframes be-sheet { from { transform: translateY(100%); } }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .mb-modal { animation: none; } }
@media (min-width: 761px) { .be-only-m { display: none !important; } }
@media (max-width: 760px) { .be-only-d { display: none !important; } }
.mb-btn svg, .mb-icon-btn svg { width: 1.05rem; height: 1.05rem; flex: none; }
@media (min-width: 761px) { .be-back { display: none !important; } }
.be-code-wrap .be-code { padding-top: 2.4rem; }
/* Icônes des états vides et boutons-liens : le kit donne aux liens la couleur du texte parent. */
.mb-empty__icon svg { width: 2.6rem; height: 2.6rem; display: inline-block; }
.mb-app a.mb-btn { color: var(--mb-color-text); }
.mb-app a.mb-btn--primary, .mb-app a.mb-btn--danger { color: #fff; }
.mb-app a.mb-btn--soft { color: var(--mb-color-primary); }

/* Colonne de gauche : le menu défile quand il y a beaucoup de sites ; le compte reste visible en bas. */
.mb-sidebar { overflow: hidden; }
.mb-sidebar mb-launcher, .mb-sidebar__footer { flex: none; }
.mb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -.6rem; padding-right: .6rem; margin-bottom: .75rem; }
.mb-nav, .be-nav-sites { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.mb-nav::-webkit-scrollbar, .be-nav-sites::-webkit-scrollbar { width: 6px; }
.mb-nav::-webkit-scrollbar-track, .be-nav-sites::-webkit-scrollbar-track { background: transparent; }
.mb-nav::-webkit-scrollbar-thumb, .be-nav-sites::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
.mb-nav::-webkit-scrollbar-thumb:hover, .be-nav-sites::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }
/* Indice visuel qu'il reste des sites sous la liste. */
.be-nav-sites { mask-image: linear-gradient(#000 calc(100% - 1.2rem), transparent); -webkit-mask-image: linear-gradient(#000 calc(100% - 1.2rem), transparent); padding-bottom: .9rem; }

.mb-app .mb-btn--small { font-size: .6875rem; }

/* ══════════════════════════════════════════════════════════════════
   TÂCHES
   ══════════════════════════════════════════════════════════════════ */
:root { --be-done: #1f9d6b; --be-late: #c0392b; --be-today: #b9770e; }
.be-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c, var(--mb-color-primary)); flex: none; display: inline-block; }
.be-nav-btn { border: 0; background: none; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.mb-nav__badge { margin-left: auto; }
.be-stack { display: flex; flex-direction: column; gap: 1rem; }
.be-h2 { margin: 0 0 .8rem; font: 600 1.05rem var(--mb-font-display); }
.be-grow { flex: 1; min-width: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; background: var(--be-surface-2); border: 1px solid var(--mb-color-border); border-radius: .3rem; padding: .05rem .3rem; }
.be-code code, pre code { background: none; border: 0; padding: 0; }

/* Étiquettes et méta */
.be-tag { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .45rem; border-radius: .35rem; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); font: 700 .62rem/1 var(--mb-font-body); letter-spacing: .03rem; flex: none; }
.be-key { font: 600 .66rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mb-color-muted); letter-spacing: .02rem; }
.be-label { display: inline-flex; align-items: center; height: 1.2rem; padding: 0 .45rem; border-radius: 999px; background: #f1ecee; color: #5e5356; font-size: .64rem; font-weight: 600; white-space: nowrap; }
.be-status { font-size: .66rem; font-weight: 700; color: var(--c); white-space: nowrap; }
.be-meta-i { display: inline-flex; align-items: center; gap: .2rem; color: var(--mb-color-muted); font-size: .68rem; white-space: nowrap; }
.be-meta-i svg, .be-due svg { width: .8rem; height: .8rem; flex: none; }
.be-source { color: #7b4fc9; }
.be-due { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600; color: var(--mb-color-muted); white-space: nowrap; }
.be-due--late { color: var(--be-late); }
.be-due--today { color: var(--be-today); }
.be-due--soon { color: var(--mb-color-text); }
.be-late { color: var(--be-late); }
.be-prio { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: .25rem; flex: none; }
.be-prio svg { width: .8rem; height: .8rem; }
.be-prio--1 { color: #8e8487; }
.be-prio--2 { color: #2a78d6; }
.be-prio--3 { color: #d35400; }
.be-prio--4 { color: #fff; background: var(--be-late); }
.be-av { background: hsl(var(--h) 45% 88%); color: hsl(var(--h) 45% 30%); font-size: .58rem; }
.be-av.mb-avatar--small { width: 1.5rem; height: 1.5rem; }

/* Case à cocher ronde */
.be-checkbox { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.6px solid #b9adb0; background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; flex: none; color: transparent; transition: background .15s, border-color .15s, transform .1s; }
.be-checkbox svg { width: .75rem; height: .75rem; stroke-width: 3; }
.be-checkbox:hover:not(:disabled) { border-color: var(--be-done); color: var(--be-done); }
.be-checkbox[aria-pressed="true"] { background: var(--be-done); border-color: var(--be-done); color: #fff; }
.be-checkbox:active:not(:disabled) { transform: scale(.88); }
.be-checkbox:disabled { cursor: default; opacity: .6; }
.be-checkbox--lg { width: 1.6rem; height: 1.6rem; margin-top: .3rem; }
.be-checkbox--lg svg { width: .95rem; height: .95rem; }

/* Listes de tâches */
.be-tasks { list-style: none; margin: 0; padding: .25rem 0; }
.be-task { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; position: relative; }
.be-task + .be-task::before { content: ""; position: absolute; top: 0; left: 3rem; right: 0; border-top: 1px solid var(--mb-color-border); }
.be-task__main { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
.be-task__title { display: flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 500; min-width: 0; }
.be-task__title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.be-task:hover { background: var(--be-surface-2); }
.be-task.is-done .be-task__title, .be-card.is-done .be-card__title { color: var(--mb-color-muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.mb-card.be-tasks { padding: .25rem 0; overflow: hidden; }
.be-group { margin-bottom: 1.1rem; }
.be-group__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem .25rem; font: 600 .78rem var(--mb-font-body); text-transform: uppercase; letter-spacing: .05rem; color: var(--mb-color-muted); }
.be-group__title span:last-child { font-weight: 600; background: #ece6e8; color: #6b6063; border-radius: 999px; padding: .1rem .45rem; font-size: .66rem; }
.be-group--late .be-group__title { color: var(--be-late); }
.be-group--today .be-group__title { color: var(--be-today); }
.be-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }

/* Ajout rapide */
.be-quick { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-md); padding: .3rem .35rem .3rem .7rem; margin-bottom: 1rem; transition: border-color var(--mb-transition), box-shadow var(--mb-transition); }
.be-quick:focus-within { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px var(--mb-color-primary-soft); }
.be-quick__icon svg { width: 1.05rem; height: 1.05rem; color: var(--mb-color-muted); display: block; }
.mb-app .be-quick__input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: .88rem; padding: .45rem 0; background: none; }
.mb-app .be-quick__project { border: 0; background: #f4f0f1; border-radius: .5rem; font: inherit; font-size: .75rem; padding: .4rem .5rem; max-width: 11rem; color: var(--mb-color-text); }
.be-quick .mb-btn { flex: none; }
.be-mytop { max-width: 52rem; }
#my-list { max-width: 52rem; }

/* Barre de filtres */
.be-filters .mb-select { width: auto; min-width: 9rem; padding: .5rem .6rem; font-size: .8rem; }
.be-search { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-md); padding: 0 .6rem; }
.be-search svg { width: .95rem; height: .95rem; color: var(--mb-color-muted); }
.mb-app .be-search input { border: 0; outline: 0; font: inherit; font-size: .8rem; padding: .55rem 0; width: 12rem; background: none; }

/* Tableau (kanban) */
.be-board { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; scroll-snap-type: x proximity; scrollbar-width: thin; min-height: 60vh; }
.be-col { flex: 0 0 18.5rem; background: #efebec; border-radius: .9rem; display: flex; flex-direction: column; max-height: calc(100vh - 13rem); scroll-snap-align: start; }
.be-col__head { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem .5rem; }
.be-col__head h3 { margin: 0; font: 600 .82rem var(--mb-font-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-count { font-size: .7rem; font-weight: 700; color: var(--mb-color-muted); background: rgba(255,255,255,.7); border-radius: 999px; padding: .1rem .5rem; }
.be-count.is-over { background: #fbe3e1; color: var(--be-late); }
.be-col__body { flex: 1; overflow-y: auto; padding: .2rem .6rem .5rem; display: flex; flex-direction: column; gap: .5rem; min-height: 3rem; scrollbar-width: thin; }
.be-col__more { text-align: center; margin: .3rem 0; }
.be-col__add { padding: 0 .6rem .6rem; }
.be-col__add .be-quick { margin: 0; background: transparent; border-color: transparent; }
.be-col__add .be-quick:focus-within { background: #fff; }
.be-col__add .be-quick .mb-btn { display: none; }
.be-col__add .be-quick:focus-within .mb-btn { display: inline-flex; }
.be-card { background: #fff; border-radius: .65rem; padding: .65rem .75rem .6rem; box-shadow: 0 1px 2px rgba(34, 13, 17, .08), 0 0 0 1px rgba(34, 13, 17, .04); cursor: grab; display: flex; flex-direction: column; gap: .4rem; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; position: relative; }
.be-card:hover { box-shadow: 0 3px 10px rgba(34, 13, 17, .1), 0 0 0 1px rgba(34, 13, 17, .06); }
.be-card__top { display: flex; align-items: center; gap: .35rem; }
.be-card__top .be-key { margin-right: auto; }
.mb-app .be-card__title { border: 0; background: none; padding: 0; text-align: left; font: 500 .84rem/1.35 var(--mb-font-body); color: inherit; cursor: pointer; overflow-wrap: anywhere; }
.be-card__labels { display: flex; flex-wrap: wrap; gap: .25rem; }
.be-card__meta { display: flex; align-items: center; gap: .5rem; min-height: 1.5rem; }
.be-ghost { position: fixed; z-index: 200; pointer-events: none; box-shadow: 0 14px 32px rgba(34, 13, 17, .25); cursor: grabbing; opacity: .96; margin: 0; }
.be-placeholder { border: 2px dashed #cdbfc3; border-radius: .65rem; background: rgba(255,255,255,.45); flex: none; }
body.be-dragging, body.be-dragging * { cursor: grabbing !important; user-select: none; }
.be-board-hint { text-align: center; }

/* Projets */
.be-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.be-project { display: flex; flex-direction: column; gap: .85rem; color: inherit; border-top: 3px solid var(--c); transition: transform var(--mb-transition), box-shadow var(--mb-transition); }
.be-project:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-md); }
.be-project__head { display: flex; align-items: center; gap: .75rem; }
.be-project__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--mb-radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 85%, #000); font: 700 .66rem var(--mb-font-body); letter-spacing: .03rem; flex: none; overflow: hidden; }
.be-project__name { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-project .mb-progress__bar { background: var(--c); }
.be-project__nums { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .75rem; color: var(--mb-color-muted); align-items: center; }
.be-project__nums strong { color: var(--mb-color-text); }
.be-project__nums .be-late strong { color: var(--be-late); }
.be-project__owner { display: flex; align-items: center; gap: .45rem; }
.be-colors { display: flex; gap: .5rem; flex-wrap: wrap; }
.be-color input { position: absolute; opacity: 0; pointer-events: none; }
.be-color span { display: block; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.0); transition: box-shadow .15s; }
.be-color input:checked + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.be-color input:focus-visible + span { outline: 2px solid var(--mb-color-text); outline-offset: 3px; }

/* Panneau de tâche */
.be-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(40rem, 100%); max-width: none; border: 0; padding: 0; background: #fff; box-shadow: var(--mb-shadow-lg); animation: be-slide .22s cubic-bezier(.2, .9, .3, 1); }
.be-drawer::backdrop { background: rgba(34, 13, 17, .28); }
.be-drawer.is-closing { animation: be-slide-out .16s ease forwards; }
@keyframes be-slide { from { transform: translateX(100%); } }
@keyframes be-slide-out { to { transform: translateX(100%); } }
.be-drawer__inner { height: 100%; overflow-y: auto; padding: 1rem 1.5rem 2.5rem; overscroll-behavior: contain; }
.be-drawer__head { display: flex; align-items: center; gap: .6rem; position: sticky; top: -1rem; background: #fff; margin: -1rem -1.5rem .5rem; padding: .9rem 1.5rem .6rem; z-index: 2; border-bottom: 1px solid var(--mb-color-border); }
.be-drawer__title { display: flex; gap: .7rem; align-items: flex-start; margin: .6rem 0 1rem; }
.mb-app .be-title-input { flex: 1; border: 0; resize: none; font: 600 1.35rem/1.3 var(--mb-font-display); padding: .2rem .3rem; margin-left: -.3rem; border-radius: .4rem; background: none; overflow: hidden; color: inherit; }
.be-title-input:hover:not([readonly]) { background: var(--be-surface-2); }
.be-title-input:focus { outline: 2px solid var(--mb-color-primary-soft); background: #fff; }
.be-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; padding: .85rem 1rem; background: var(--be-surface-2); border-radius: var(--mb-radius-md); }
.be-prop { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.be-prop > span:first-child { display: inline-flex; align-items: center; gap: .3rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem; color: var(--mb-color-muted); }
.be-prop > span:first-child svg { width: .8rem; height: .8rem; }
.be-prop .mb-select, .be-prop .mb-input { padding: .45rem .55rem; font-size: .82rem; background-color: #fff; }
.be-prop--wide { grid-column: 1 / -1; }
.be-prop--switch { flex-direction: row; align-items: center; justify-content: space-between; }
.be-section { margin-top: 1.4rem; }
.be-section > h3, .be-history > summary { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: 600 .95rem var(--mb-font-display); }
.be-history > summary { cursor: pointer; color: var(--mb-color-muted); font-size: .85rem; }
.be-desc { min-height: 6rem; font-size: .86rem; line-height: 1.5; }
.be-subtasks { list-style: none; margin: .6rem 0; padding: 0; }
.be-subtasks li { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--mb-color-border); }
.be-subtasks li:first-child { border-top: 0; }
.be-subtasks .be-sub-title { flex: 1; text-align: left; color: inherit; font-weight: 500; font-size: .84rem; }
.be-subtasks li.is-done .be-sub-title { color: var(--mb-color-muted); text-decoration: line-through; }
.be-subadd { display: flex; gap: .5rem; }
.be-subadd .mb-input { padding: .5rem .6rem; font-size: .84rem; }
.be-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; }
.be-links li { display: flex; align-items: center; gap: .4rem; }
.be-links svg { width: .9rem; height: .9rem; color: var(--mb-color-muted); }
.be-links a { color: var(--mb-color-primary); overflow-wrap: anywhere; }
.be-comments { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.be-comment { display: flex; gap: .6rem; align-items: flex-start; }
.be-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; font-size: .78rem; }
.be-comment__head time { color: var(--mb-color-muted); font-size: .7rem; }
.be-comment__del { margin-left: auto; font-size: .7rem; font-weight: 500; opacity: 0; }
.be-comment:hover .be-comment__del, .be-comment__del:focus { opacity: 1; }
.be-comment__body { margin-top: .25rem; font-size: .85rem; line-height: 1.5; background: var(--be-surface-2); border-radius: 0 .7rem .7rem .7rem; padding: .55rem .75rem; overflow-wrap: anywhere; }
.be-comment__body a { color: var(--mb-color-primary); text-decoration: underline; }
.be-comment.is-internal .be-comment__body { background: #fdf6e7; }
.be-composer { border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-md); padding: .4rem; background: #fff; }
.be-composer:focus-within { border-color: var(--mb-color-primary); }
.be-composer .mb-textarea { border: 0; box-shadow: none; resize: vertical; min-height: 3.2rem; padding: .4rem; font-size: .85rem; }
.be-composer .mb-textarea:focus { outline: 0; box-shadow: none; }
.be-composer__bar { display: flex; align-items: center; gap: .5rem; padding: 0 .2rem; }
.be-composer__bar .be-switch svg { width: .8rem; height: .8rem; }
.be-info { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; font-size: .8rem; margin: 0 0 1rem; }
.be-info dt { color: var(--mb-color-muted); }
.be-info dd { margin: 0; overflow-wrap: anywhere; }
.be-feed { list-style: none; margin: 0; padding: .5rem 1rem; }
.be-feed li { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--mb-color-border); font-size: .82rem; }
.be-feed li:first-child { border-top: 0; }
.be-feed time { color: var(--mb-color-muted); font-size: .7rem; white-space: nowrap; margin-left: auto; padding-left: .5rem; }
.be-feed--compact { padding: 0; }
.be-feed--compact li { padding: .45rem 0; font-size: .76rem; }
.be-excerpt { display: block; margin-top: .3rem; color: var(--mb-color-muted); font-style: italic; quotes: "« " " »"; }

/* Réglages de projet */
.be-cols-edit { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.be-cols-edit li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 7.5rem 4.6rem auto; gap: .4rem; align-items: center; }
.be-cols-edit .mb-input, .be-cols-edit .mb-select { padding: .45rem .5rem; font-size: .8rem; }
.be-swatch-sm { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--mb-color-border); border-radius: .45rem; background: none; cursor: pointer; }
.be-col-actions { display: flex; }
.be-col-actions .mb-icon-btn { width: 1.9rem; height: 1.9rem; }
.be-invite { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.be-invite .mb-input { flex: 1 1 14rem; }
.be-invite .mb-select { width: auto; }

/* API */
.be-status-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #c4bcbe; flex: none; }
.be-status-dot.ok { background: var(--be-done); }
.be-status-dot.ko { background: var(--be-late); }
.be-status-dot.off { background: transparent; box-shadow: inset 0 0 0 2px #c4bcbe; }
tr.is-revoked td { opacity: .5; }
.be-steps p { margin: 0 0 .5rem; }

@media (max-width: 1100px) { .be-cols-edit li { grid-template-columns: 2rem minmax(0, 1fr) 7rem auto; } .be-wip { display: none; } }

@media (max-width: 760px) {
  .be-tasks.mb-card { border-radius: 1rem; }
  .be-task { padding: .7rem .9rem; gap: .7rem; }
  .be-task + .be-task::before { left: 2.9rem; }
  .be-task__title { font-size: .98rem; }
  .be-checkbox { width: 1.45rem; height: 1.45rem; }
  .be-quick { border-radius: 1rem; border: 0; padding: .35rem .4rem .35rem .8rem; }
  .mb-app .be-quick__input { font-size: 1rem; }
  .be-quick__project { max-width: 7.5rem; }
  .mb-app .be-search input { width: 8rem; font-size: 1rem; }
  .be-filters .mb-select { font-size: .9rem; border-radius: 999px; }
  .be-board { margin: 0 -1rem; padding: 0 1rem 1rem; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; gap: .7rem; min-height: 0; }
  .be-col { flex-basis: calc(100vw - 3.5rem); max-height: none; }
  .be-col__body { overflow: visible; }
  .mb-app .be-card__title { font-size: .95rem; }
  .be-projects { grid-template-columns: 1fr; gap: .7rem; }
  .be-project { border-top: 0; border-left: 4px solid var(--c); }
  .be-drawer { inset: auto 0 0 0; width: 100%; height: calc(100% - var(--be-safe-t) - .75rem); border-radius: 1.1rem 1.1rem 0 0; animation: be-sheet .3s cubic-bezier(.2, .9, .3, 1); }
  .be-drawer.is-closing { animation: none; }
  .be-drawer__inner { padding: .9rem 1rem calc(2rem + var(--be-safe-b)); }
  .be-drawer__head { margin: -.9rem -1rem .5rem; padding: .8rem 1rem .5rem; top: -.9rem; }
  .be-props { grid-template-columns: 1fr 1fr; padding: .75rem; }
  .be-prop .mb-select, .be-prop .mb-input { font-size: .95rem; }
  .be-cols-edit li { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .be-cols-edit li .mb-select { grid-column: 2; }
  .be-comment__del { opacity: 1; }
}

/* Page intégrable */
body.be-embed { background: transparent; min-height: 0; }
.be-embed main { padding: .25rem; }
.be-embed__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.be-embed__head h2 { margin: 0; font: 600 1rem var(--mb-font-display); }
.be-embed__login { text-align: center; padding: 2rem 1rem; }
.be-embed .be-task__main { text-decoration: none; }
.be-embed .be-toasts { bottom: .5rem; right: .5rem; }

/* ══════════════════════════════════════════════════════════════════
   MÉDIAS
   ══════════════════════════════════════════════════════════════════ */
.be-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .6rem; }
.be-tiles--small { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .4rem; margin-top: .4rem; max-width: 24rem; }
.be-tiles--library { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.be-tile { position: relative; margin: 0; min-width: 0; }
.be-tile__open { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; border-radius: .6rem; overflow: hidden; background: #f1ecee; cursor: zoom-in; position: relative; }
.be-tile__open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.be-tile__open:hover img { transform: scale(1.04); }
.be-tile__open:focus-visible { outline: 2px solid var(--mb-color-primary); outline-offset: 2px; }
.be-tile__icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; height: 100%; color: #8e7f83; }
.be-tile__icon svg { width: 2rem; height: 2rem; }
.be-tile__icon b { font: 700 .6rem var(--mb-font-body); letter-spacing: .06rem; background: #fff; border-radius: .3rem; padding: .1rem .35rem; color: var(--mb-color-text); }
.be-tile--pdf .be-tile__icon { color: #c0392b; }
.be-tile--audio .be-tile__icon { color: #7b4fc9; }
.be-tile--video .be-tile__icon { color: #2a78d6; }
.be-tile__play { position: absolute; inset: 0; margin: auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(20, 10, 12, .55); color: #fff; display: grid; place-items: center; font-size: .8rem; padding-left: .15rem; backdrop-filter: blur(4px); }
.be-tile__lock { position: absolute; top: .35rem; left: .35rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fdf6e7; color: #8a6116; display: grid; place-items: center; }
.be-tile__lock svg { width: .75rem; height: .75rem; }
.be-tile figcaption { display: flex; justify-content: space-between; gap: .4rem; margin-top: .3rem; font-size: .68rem; min-width: 0; }
.be-tile figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.be-tile figcaption small { color: var(--mb-color-muted); white-space: nowrap; }
.be-tiles--small figcaption { display: none; }
.be-tile__del { position: absolute; top: .3rem; right: .3rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 0; background: rgba(20, 10, 12, .6); color: #fff; font-size: .7rem; cursor: pointer; opacity: 0; transition: opacity .15s; }
.be-tile:hover .be-tile__del, .be-tile__del:focus { opacity: 1; }
.be-drop { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 100%; padding: 1.2rem 1rem; border: 1.5px dashed #d6cacd; border-radius: var(--mb-radius-md); background: none; color: var(--mb-color-muted); font: inherit; font-size: .8rem; cursor: pointer; text-align: center; }
.be-drop svg { width: 1.4rem; height: 1.4rem; transform: rotate(180deg); }
.be-drop:hover { border-color: var(--mb-color-primary); color: var(--mb-color-primary); }
.be-drawer__inner.is-dragover { box-shadow: inset 0 0 0 3px var(--mb-color-primary); background: #fdf8f9; }
.be-drawer__inner.is-dragover .be-drop { border-color: var(--mb-color-primary); color: var(--mb-color-primary); }
.be-media__internal { margin-top: .6rem; }
.be-media__internal svg, .be-media h3 .mb-btn svg { width: .85rem; height: .85rem; }
.be-uploads { display: flex; flex-direction: column; gap: .35rem; }
.be-uploads:not(:empty) { margin-top: .6rem; }
.be-upload { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; align-items: center; gap: .6rem; font-size: .74rem; }
.be-upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-upload__bar { height: .35rem; border-radius: 999px; background: #efe8ea; overflow: hidden; }
.be-upload__bar i { display: block; height: 100%; width: 2%; background: var(--mb-color-primary); transition: width .2s; }
.be-upload small { color: var(--mb-color-muted); }
.be-upload.is-error small { color: var(--be-late); grid-column: 1 / -1; }
.be-composer__files { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .3rem; }
.be-composer__files:not(:empty) { padding-bottom: .4rem; }
.be-chip-file { display: inline-flex; align-items: center; gap: .3rem; max-width: 14rem; padding: .2rem .25rem .2rem .55rem; border-radius: 999px; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: .7rem; font-weight: 600; }
.be-chip-file button { border: 0; background: none; color: inherit; cursor: pointer; font-size: .65rem; }
.be-composer__bar .mb-icon-btn svg { width: .95rem; height: .95rem; }
.be-card__cover { margin: -.65rem -.75rem .1rem; border-radius: .65rem .65rem 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: #f1ecee; }
.be-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.be-libitem { min-width: 0; }
.be-libitem__task { display: block; margin-top: .15rem; font-size: .7rem; color: var(--mb-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-libitem__task:hover { color: var(--mb-color-primary); }

/* Visionneuse */
.be-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 8, 10, .94); color: #fff; display: none; }
.be-viewer[open] { display: flex; flex-direction: column; }
.be-viewer::backdrop { background: transparent; }
.be-viewer__bar { display: flex; align-items: center; gap: .4rem; padding: calc(.6rem + env(safe-area-inset-top, 0px)) 1rem .6rem; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.be-viewer__title { flex: 1; min-width: 0; }
.be-viewer__title strong { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-viewer__title small { font-size: .7rem; opacity: .7; }
.be-viewer__title a { color: #fff; text-decoration: underline; }
.be-viewer__count { font-size: .75rem; opacity: .7; margin-right: .4rem; font-variant-numeric: tabular-nums; }
.be-viewer .mb-icon-btn { color: #fff; background: rgba(255,255,255,.08); border-color: transparent; }
.be-viewer .mb-icon-btn:hover { background: rgba(255,255,255,.18); }
.be-viewer__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3.5rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.be-viewer__stage img, .be-viewer__stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .4rem; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.be-viewer__stage iframe { width: min(64rem, 100%); height: 100%; border: 0; border-radius: .4rem; background: #fff; }
.be-viewer__audio, .be-viewer__file { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.be-viewer__audio svg, .be-viewer__file svg { width: 4rem; height: 4rem; opacity: .8; }
.be-viewer__file span { opacity: .7; font-size: .85rem; }
.be-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.be-viewer__nav:hover { background: rgba(255,255,255,.22); }
.be-viewer__nav--prev { left: .6rem; }
.be-viewer__nav--next { right: .6rem; }
@media (max-width: 760px) {
  .be-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .be-tiles--library { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .be-tile__del { opacity: 1; }
  .be-viewer__stage { padding: 0 0 calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .be-viewer__stage img, .be-viewer__stage video { border-radius: 0; }
  .be-viewer__nav { display: none; }
  .be-viewer__bar a.mb-icon-btn[target] { display: none; }
}

/* ── BURDIGALA.emailing ───────────────────────────────────────────── */
.s7 { grid-column: span 7; } .s5 { grid-column: span 5; }
@media (max-width: 1180px) { .s7, .s5 { grid-column: span 12; } }
.be-h3 { margin: 0 0 .6rem; font: 600 .9rem var(--mb-font-display); }
.be-sub code, .be-callout code, p code { font-size: .85em; background: rgba(120, 20, 40, .07); padding: .05rem .3rem; border-radius: .25rem; }
.be-ws { padding: .25rem .9rem .75rem; }
.be-ws__label { display: block; font-size: .55rem; letter-spacing: .1rem; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .3rem; }
.be-ws__select { width: 100%; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: .5rem; padding: .5rem .6rem; font: inherit; font-weight: 600; }
.be-ws__select option { color: #241b1d; }
.be-ws__btn { display: block; text-align: center; color: #fff; border: 1px dashed rgba(255,255,255,.35); border-radius: .5rem; padding: .5rem; font-size: .75rem; }
.be-metrics { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.be-chartbox { width: 100%; }
.be-chart { display: block; overflow: visible; }
.be-bar--0 { fill: var(--mb-color-primary); background: var(--mb-color-primary); }
.be-bar--1 { fill: #d08a96; background: #d08a96; }
.be-bar--2 { fill: #3c8f72; background: #3c8f72; }
.be-chart-ticks { display: block; overflow: visible; }
.be-tick { font-size: 10px; fill: var(--mb-color-muted); }
.be-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .72rem; color: var(--mb-color-muted); margin-top: .4rem; }
.be-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-right: .35rem; vertical-align: -1px; }
.be-dl { margin: 0; display: grid; gap: .45rem; }
.be-dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; border-bottom: 1px solid var(--mb-color-border); padding-bottom: .4rem; }
.be-dl dt { color: var(--mb-color-muted); }
.be-dl dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; }
.be-servers { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .8rem; }
.be-servers li { display: flex; align-items: center; gap: .55rem; }
.be-status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: #c9bfc1; flex: none; }
.be-status-dot.is-ok { background: var(--mb-color-success); box-shadow: 0 0 0 3px var(--mb-color-success-soft); }
.be-status-dot.is-bad { background: var(--mb-color-danger); box-shadow: 0 0 0 3px var(--mb-color-danger-soft); }
.be-status-dot.is-off { background: #c9bfc1; }
.be-setup { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.be-callout a { text-decoration: underline; }
.be-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.be-tcard { display: flex; flex-direction: column; gap: .35rem; color: inherit; transition: transform .15s, box-shadow .15s; }
.mb-app a.be-tcard { color: inherit; }
.be-tcard:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-md); }
.be-tcard__top { display: flex; justify-content: space-between; align-items: center; }
.be-tcard h3, .be-lcard h3, .be-scard h3 { margin: .2rem 0 0; font: 600 1rem var(--mb-font-display); }
.be-tcard p { margin: 0; font-size: .8rem; }
.be-slug { font-size: .7rem; color: var(--mb-color-muted); }
.be-vars { display: flex; flex-wrap: wrap; gap: .3rem; }
.be-vars span { font: 500 .65rem ui-monospace, monospace; background: var(--be-surface-2); border: 1px solid var(--mb-color-border); border-radius: .3rem; padding: .1rem .35rem; color: var(--mb-color-muted); }
.be-big { font: 700 1.9rem var(--mb-font-display); margin: .3rem 0; }
.be-big small { font: 500 .8rem var(--mb-font-body); color: var(--mb-color-muted); }
.be-click { cursor: pointer; }
.be-click:hover td { background: var(--be-surface-2); }
.be-table-card { padding: 0; overflow: hidden; }
.be-table-card .be-table th:first-child, .be-table-card .be-table td:first-child { padding-left: 1.1rem; }
.be-pager, .be-more { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; margin: 0; }
.be-tag { display: inline-block; font-size: .65rem; font-weight: 600; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); border-radius: 999px; padding: .1rem .5rem; margin: 0 .2rem .2rem 0; }
.be-break { word-break: break-word; overflow-wrap: anywhere; }
.be-ellipsis { max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-nowrap { white-space: nowrap; }
.be-search { max-width: 20rem; }
.be-toolbar .mb-input { width: auto; flex: 1 1 14rem; }
.be-problems { margin: 0; padding-left: 1.1rem; color: var(--mb-color-danger); font-size: .8rem; display: grid; gap: .3rem; }
.be-pick { border: 0; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
.be-pick legend { margin-bottom: .4rem; }
.be-events { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.be-audience { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.be-meta { padding-bottom: .5rem; }
.be-mt { margin-top: 1.6rem; }
.be-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .8rem; }
.be-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--mb-color-primary); cursor: pointer; text-align: left; }
.be-wslist li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--mb-color-border); }
.be-wslist small { flex: 1 1 100%; }
.be-revoked { opacity: .55; }
.be-inline { width: auto; display: inline-block; padding: .35rem .5rem; }
.be-chip { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .38rem .7rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: .75rem; font-weight: 600; border: 0; cursor: pointer; }

/* Éditeur */
.be-editor { display: grid; grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.be-editor__side { background: #fff; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-lg); padding: .9rem; position: sticky; top: calc(var(--mb-topbar-height, 4rem) + .5rem); max-height: calc(100vh - 6rem); overflow: auto; }
.be-editor__mode { justify-content: flex-start; margin-bottom: .8rem; }
.be-editor__preview { background: #ece7e3; border-radius: var(--mb-radius-lg); padding: .75rem; min-width: 0; }
.be-preview-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .78rem; }
.be-preview-frame { margin: 0 auto; transition: max-width .25s; max-width: 100%; }
.be-preview-frame.is-mobile { max-width: 390px; }
.be-preview-frame iframe { width: 100%; height: 72vh; min-height: 32rem; border: 0; border-radius: .6rem; background: #fff; box-shadow: var(--mb-shadow-sm); }
.be-blocks { display: grid; gap: .45rem; }
.be-block { border: 1px solid var(--mb-color-border); border-radius: .6rem; background: #fff; }
.be-block.is-open { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px var(--mb-color-primary-soft); }
.be-block__head { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; cursor: pointer; }
.be-block__icon { width: 1.8rem; height: 1.8rem; border-radius: .4rem; background: var(--be-surface-2); display: grid; place-items: center; font-size: .75rem; flex: none; }
.be-block__sum { font-size: .78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.be-block__sum small { color: var(--mb-color-muted); }
.be-block__ops { display: flex; gap: .1rem; flex: none; }
.be-block__ops button { border: 0; background: none; width: 1.7rem; height: 1.7rem; border-radius: .35rem; display: grid; place-items: center; color: var(--mb-color-muted); cursor: pointer; }
.be-block__ops button:hover:not(:disabled) { background: var(--be-surface-2); color: var(--mb-color-text); }
.be-block__ops button:disabled { opacity: .3; cursor: default; }
.be-block__ops svg { width: 1rem; height: 1rem; }
.be-block__body { padding: .2rem .7rem .7rem; border-top: 1px solid var(--mb-color-border); }
.be-addbar { margin-top: .9rem; }
.be-addbar__btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; margin-top: .4rem; }
.be-addbtn { border: 1px dashed var(--mb-color-border); background: #fff; border-radius: .5rem; padding: .45rem .2rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .65rem; color: var(--mb-color-muted); }
.be-addbtn b { font-size: .95rem; color: var(--mb-color-text); }
.be-addbtn:hover { border-color: var(--mb-color-primary); color: var(--mb-color-primary); }
.be-codearea { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 26rem; white-space: pre; }
.be-codearea--sm { min-height: 7rem; }

/* Automatisations */
.be-flow { max-width: 46rem; margin: 0 auto; }
.be-flow__arrow { text-align: center; color: var(--mb-color-muted); font-size: 1.2rem; line-height: 1.8rem; }
.be-flow__add { justify-content: center; }
.be-step .be-card-title { margin-bottom: .6rem; }
.be-inline-fields { display: flex; gap: .5rem; max-width: 20rem; }
.be-rules { display: grid; gap: .5rem; }
.be-rules p { margin: 0; font-size: .82rem; }
.be-rule { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.be-rule .mb-select, .be-rule .mb-input { width: auto; flex: 1 1 9rem; padding: .45rem .55rem; }
.be-rule .be-attr { flex: 0 1 7rem; }
.be-mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; }

/* Serveurs, domaines, messages */
.be-scard.is-off { opacity: .6; }
.be-scard p { font-size: .8rem; margin: .3rem 0; }
.be-kinds { display: grid; gap: .5rem; }
.be-kind { text-align: left; border: 1px solid var(--mb-color-border); background: #fff; border-radius: .7rem; padding: .8rem 1rem; cursor: pointer; display: grid; gap: .2rem; font: inherit; }
.be-kind:hover { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px var(--mb-color-primary-soft); }
.be-kind small { color: var(--mb-color-muted); }
.be-dns td { vertical-align: top; }
.be-ok, .be-ko, .be-warn { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .7rem; font-weight: 700; }
.be-ok { background: var(--mb-color-success-soft); color: var(--mb-color-success); }
.be-ko { background: var(--mb-color-danger-soft); color: var(--mb-color-danger); }
.be-warn { background: var(--mb-color-warning-soft); color: var(--mb-color-warning); }
.be-copyable { border: 0; background: var(--be-surface-2); border-radius: .3rem; padding: .2rem .4rem; font: .72rem ui-monospace, monospace; cursor: copy; text-align: left; color: inherit; max-width: 34rem; }
.be-copyable:hover { background: var(--mb-color-primary-soft); }
.be-msg { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; }
.be-msg__preview iframe { width: 100%; height: 62vh; border: 1px solid var(--mb-color-border); border-radius: .6rem; background: #fff; }

@media (max-width: 960px) {
  .be-editor, .be-msg { grid-template-columns: 1fr; }
  .be-editor__side { position: static; max-height: none; }
  .be-preview-frame iframe { height: 60vh; min-height: 24rem; }
  .be-addbar__btns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .be-ws { display: none; }
  .be-cards { grid-template-columns: 1fr; }
  .be-search { max-width: none; }
}

/* ── Barre de navigation horizontale (comme BURDIGALA.docs / BURDIGALA.video) ── */
body.has-navbar { --mb-topbar-height: 4.25rem; }
body.has-navbar .mb-shell { margin-left: 0; min-height: calc(100vh - var(--mb-topbar-height)); }
body.has-navbar .mb-sidebar, body.has-navbar .be-tabbar { display: none !important; }
.navbar { position: sticky; top: 0; z-index: 50; background: linear-gradient(100deg, #5e0e1e 0%, var(--mb-color-primary) 55%, #8a1d33 100%); color: #fff; box-shadow: 0 6px 24px rgba(63, 9, 20, .18); }
.navbar__inner { max-width: var(--mb-content-max); margin: 0 auto; height: var(--mb-topbar-height); padding: 0 clamp(1rem, 2.4vw, 2.375rem); display: flex; align-items: center; gap: 1.1rem; }
.navbar__brandslot { flex-shrink: 0; display: flex; align-items: center; }
.mb-app .navbar__brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font: 600 1.12rem var(--mb-font-display); white-space: nowrap; }
.navbar__brand img { width: 28px; height: 28px; object-fit: contain; }
.navbar__brand em { font-style: normal; color: #edbcc5; }
.navlinks { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; }
.mb-app .navlink { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: var(--mb-radius-pill); color: rgba(255, 255, 255, .78); font: 500 .82rem var(--mb-font-body); white-space: nowrap; text-decoration: none; border: 0; background: none; cursor: pointer; transition: background var(--mb-transition), color var(--mb-transition); }
.mb-app .navlink svg { width: 1rem; height: 1rem; }
.mb-app .navlink:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mb-app .navlink.active { color: #fff; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.navlink:focus-visible, .navbar summary:focus-visible, .navbar__brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.navbar__tools { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; }
.navmenu { position: relative; }
.navmenu > summary { list-style: none; cursor: pointer; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu__panel { position: absolute; top: calc(100% + .6rem); left: 0; min-width: 15rem; padding: .4rem; border-radius: var(--mb-radius-lg); background: #fff; border: 1px solid var(--mb-color-border); box-shadow: 0 22px 60px rgba(40, 12, 20, .2); color: var(--mb-color-text); z-index: 60; }
.navmenu--right .navmenu__panel { left: auto; right: 0; }
.mb-app .navmenu__panel > a, .navmenu__panel > button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: var(--mb-radius-md); background: none; color: var(--mb-color-text); font: 500 .82rem var(--mb-font-body); text-align: left; text-decoration: none; cursor: pointer; }
.navmenu__panel > a svg { width: 1rem; height: 1rem; color: var(--mb-color-muted); }
.mb-app .navmenu__panel > a:hover, .navmenu__panel > button:hover, .mb-app .navmenu__panel > a.active { background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.navmenu__label { margin: .5rem .7rem .2rem; font-size: .58rem; letter-spacing: .1rem; text-transform: uppercase; color: var(--mb-color-muted); }
.navmenu__user { padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--mb-color-border); margin-bottom: .3rem; }
.navmenu__user strong { display: block; font-size: .86rem; }
.navmenu__user small { color: var(--mb-color-muted); }
.navmenu__version { margin: .3rem .7rem .2rem; font-size: .65rem; color: #aaa0a3; }
.avatar-btn .avatar { width: 2.25rem; height: 2.25rem; border: 2px solid rgba(255, 255, 255, .35); background: #fff; color: var(--mb-color-primary); font-weight: 700; display: grid; place-items: center; border-radius: 50%; font-size: .78rem; }
.navbar__burger { display: none; }
.navbar__burger > summary { width: 2.4rem; height: 2.4rem; border-radius: var(--mb-radius-md); display: grid; place-content: center; gap: 4px; background: rgba(255, 255, 255, .1); }
.navbar__burger > summary span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.navbar__burger[open] > summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar__burger[open] > summary span:nth-child(2) { opacity: 0; }
.navbar__burger[open] > summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.navbar .be-ws { padding: 0; }
.navbar .be-ws__label { display: none; }
.navbar .be-ws__select { width: auto; max-width: 13rem; padding: .45rem 1.8rem .45rem .7rem; border-radius: var(--mb-radius-pill); font-size: .8rem; appearance: none; background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .7rem center; cursor: pointer; }
.navbar .be-ws__btn { padding: .45rem .8rem; border-radius: var(--mb-radius-pill); font-size: .78rem; }
.be-pagehead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; padding-bottom: .6rem; }
.be-pagehead__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.be-pagehead .be-back { display: inline-flex; }
.be-pagehead .be-back[hidden] { display: none; }
.be-pagehead .mb-heading { font-size: 1.55rem; }
.be-editor__side { top: calc(var(--mb-topbar-height) + .75rem); }
@media (max-width: 860px) {
  .navlinks { display: none; }
  .navbar__burger { display: block; }
  .navbar__inner { gap: .6rem; }
  .navbar .be-ws__select { max-width: 9rem; }
  .navbar__burger .navmenu__panel { position: fixed; left: .75rem; right: .75rem; top: calc(var(--mb-topbar-height) + .4rem); min-width: 0; max-height: calc(100vh - 6rem); overflow: auto; }
  .be-pagehead .mb-heading { font-size: 1.3rem; }
}
@media (max-width: 760px) { .navbar .be-ws { display: block; } }
.be-subhead { margin: .2rem 0 0; color: var(--mb-color-muted); font-size: .82rem; }

/* ── Indicateurs (KPI) ── */
.be-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.be-kpi { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.05rem; background: #fff; border: 1px solid var(--mb-color-border); border-radius: var(--mb-radius-lg); box-shadow: var(--mb-shadow-sm); overflow: hidden; min-width: 0; color: inherit; }
.be-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--mb-color-primary); opacity: .9; }
.mb-app a.be-kpi { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.mb-app a.be-kpi:hover { transform: translateY(-2px); box-shadow: var(--mb-shadow-md); }
.be-kpi__top { display: flex; align-items: center; gap: .45rem; color: var(--mb-color-muted); }
.be-kpi__top svg { width: 1rem; height: 1rem; flex: none; color: var(--mb-color-primary); }
.be-kpi__label { font-size: .64rem; font-weight: 700; letter-spacing: .07rem; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.be-kpi__value { font: 700 1.95rem/1.05 var(--mb-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--mb-color-text); white-space: nowrap; }
.be-kpi__value small { font: 600 .95rem var(--mb-font-body); color: var(--mb-color-muted); margin-left: .2rem; }
.be-kpi__meta { font-size: .74rem; color: var(--mb-color-muted); line-height: 1.35; }
.be-kpi__bar { display: block; height: .3rem; border-radius: 999px; background: #efe9e7; overflow: hidden; }
.be-kpi__bar i { display: block; height: 100%; border-radius: inherit; background: var(--mb-color-primary); }
.be-kpi.is-empty .be-kpi__value { color: #c9bfc1; }
.be-kpi--good::before, .be-kpi--good .be-kpi__bar i { background: var(--mb-color-success); }
.be-kpi--good .be-kpi__top svg { color: var(--mb-color-success); }
.be-kpi--warn::before, .be-kpi--warn .be-kpi__bar i { background: var(--mb-color-warning); }
.be-kpi--warn .be-kpi__top svg, .be-kpi--warn .be-kpi__value { color: #8a5d12; }
.be-kpi--bad::before, .be-kpi--bad .be-kpi__bar i { background: var(--mb-color-danger); }
.be-kpi--bad .be-kpi__top svg, .be-kpi--bad .be-kpi__value { color: var(--mb-color-danger); }
.be-kpis--compact .be-kpi { padding: .8rem .95rem; }
.be-kpis--compact .be-kpi__value { font-size: 1.5rem; }
.be-large { display: none !important; }
@media (max-width: 760px) {
  .be-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .be-kpi { padding: .85rem .9rem; }
  .be-kpi__value { font-size: 1.5rem; }
}
.be-pagehead .be-topbar-title, .be-pagehead .be-topbar-title .mb-heading, .be-pagehead .mb-eyebrow { display: block !important; opacity: 1 !important; transform: none !important; }
.be-pagehead .be-topbar-title .mb-heading { white-space: normal; }
@media (max-width: 480px) {
  .navbar__brand span { display: none; }
  .navbar .be-ws__select { max-width: 8.5rem; }
  .be-pagehead { padding-top: 1.1rem; }
}
.be-pagehead .be-topbar-title { text-align: left; grid-column: auto; max-width: none; }
.be-pagehead .be-back { grid-column: auto; margin-left: -.4rem; }

/* Sélecteurs segmentés (périodes, filtres, modes) : fond et option active bien visibles */
.be-tabs-mini { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; background: #fff; border: 1px solid var(--mb-color-border); border-radius: 999px; box-shadow: var(--mb-shadow-sm); justify-content: flex-start; }
.be-tabs-mini button { padding: .42rem .9rem; font-size: .78rem; color: var(--mb-color-text); border-radius: 999px; transition: background .15s, color .15s; }
.be-tabs-mini button:hover { background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.be-tabs-mini button[aria-pressed="true"] { background: var(--mb-color-primary); color: #fff; box-shadow: 0 2px 6px rgba(120, 20, 40, .25); }
.be-editor__side .be-tabs-mini, .be-preview-bar .be-tabs-mini { box-shadow: none; }

/* ════════ Interface modernisée (v2) ════════ */
:root { --be-radius: 1rem; --be-card-shadow: 0 1px 2px rgba(44, 18, 23, .04), 0 8px 24px rgba(44, 18, 23, .05); --be-line: #ece6e4; --be-soft: #faf7f6; }
body.mb-app { background: radial-gradient(1200px 400px at 85% -120px, rgba(120, 20, 40, .06), transparent 70%), var(--mb-color-background); }
.mb-container { max-width: 90rem; }
.navbar { backdrop-filter: saturate(1.2); }
.mb-card { border-radius: var(--be-radius); border: 1px solid var(--be-line); box-shadow: var(--be-card-shadow); padding: 1.25rem 1.35rem; }
.be-card-title { margin-bottom: 1rem; }
.be-card-title h2, .be-h2 { font: 600 1.02rem var(--mb-font-display); letter-spacing: -.005em; }
.be-card-title small { color: var(--mb-color-muted); font-size: .74rem; }
.be-pagehead { padding-top: 2rem; padding-bottom: 1rem; }
.be-pagehead .mb-heading { font-size: 2rem; letter-spacing: -.015em; }
.be-pagehead .mb-eyebrow { color: var(--mb-color-primary); }
.mb-btn { border-radius: .7rem; }
.mb-badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.be-grid { gap: 1.1rem; }

/* KPI v2 : pastille d'icône, variation, mini-courbe */
.be-kpis { gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.be-kpi { border-radius: var(--be-radius); border: 1px solid var(--be-line); box-shadow: var(--be-card-shadow); padding: 1.05rem 1.15rem 1rem; gap: .55rem; }
.be-kpi::before { display: none; }
.be-kpi__top { gap: .55rem; }
.be-kpi__icon { width: 2rem; height: 2rem; border-radius: .65rem; display: grid; place-items: center; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); flex: none; }
.be-kpi__icon svg { width: 1.05rem; height: 1.05rem; }
.be-kpi__label { flex: 1; font-size: .62rem; }
.be-kpi__value { font-size: 2.05rem; margin-top: .15rem; }
.be-kpi--good .be-kpi__icon { background: var(--mb-color-success-soft); color: var(--mb-color-success); }
.be-kpi--warn .be-kpi__icon { background: var(--mb-color-warning-soft); color: var(--mb-color-warning); }
.be-kpi--bad .be-kpi__icon { background: var(--mb-color-danger-soft); color: var(--mb-color-danger); }
.be-kpi--good .be-kpi__value { color: var(--mb-color-text); }
.be-spark { display: block; width: 100%; height: 30px; margin-top: auto; opacity: .85; }
.be-delta { font-size: .66rem; font-weight: 700; padding: .18rem .45rem; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.be-delta.is-up { background: var(--mb-color-success-soft); color: var(--mb-color-success); }
.be-delta.is-down { background: var(--mb-color-danger-soft); color: var(--mb-color-danger); }
.be-delta.is-flat { background: #f1eded; color: var(--mb-color-muted); }

/* Tableaux */
.be-table th { background: var(--be-soft); font-size: .6rem; padding: .7rem .75rem; border-bottom: 1px solid var(--be-line); }
.be-table td { padding: .75rem .75rem; border-bottom: 1px solid var(--be-line); }
.be-table tr:last-child td { border-bottom: 0; }
.be-table-card { border-radius: var(--be-radius); }
.be-table thead th:first-child { border-top-left-radius: .6rem; }
.be-table thead th:last-child { border-top-right-radius: .6rem; }
.be-rate { display: inline-flex; align-items: center; gap: .55rem; min-width: 7.5rem; justify-content: flex-end; }
.be-rate i { display: block; width: 3.6rem; height: .32rem; border-radius: 999px; background: #efe9e7; overflow: hidden; position: relative; }
.be-rate i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c, var(--mb-color-primary)); border-radius: inherit; }
.be-person { display: flex; align-items: center; gap: .7rem; }
.be-person .mb-avatar { width: 2.1rem; height: 2.1rem; font-size: .72rem; background: hsl(var(--h) 45% 92%); color: hsl(var(--h) 45% 32%); flex: none; }

/* Onglets soulignés v2 */
.be-tabs { border-bottom: 1px solid var(--be-line); gap: .4rem; }
.be-tabs a { padding: .7rem .2rem; margin-right: 1rem; font-size: .86rem; }

/* Graphiques */
.be-chart-empty { display: grid; place-items: center; min-height: 9rem; color: var(--mb-color-muted); font-size: .82rem; background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(120,20,40,.025) 10px 20px); border-radius: .75rem; text-align: center; padding: 1rem; }
.be-lc__plot { position: relative; }
.be-lc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.be-lc__grid { stroke: #eee7e5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.be-lc__cursor { stroke: rgba(120, 20, 40, .35); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; opacity: 0; }
.be-lc__cursor.is-on { opacity: 1; }
.be-lc__y, .be-lc__x { position: absolute; font-size: .66rem; color: var(--mb-color-muted); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.be-lc__y { left: 0; transform: translateY(-50%); width: 3.6%; text-align: right; }
.be-lc__x { bottom: 0; transform: translateX(-50%); }
.be-legend { margin-top: .75rem; }
.be-legend i { border-radius: 999px; }
.be-tip { position: fixed; z-index: 1000; pointer-events: none; background: #241b1d; color: #fff; border-radius: .6rem; padding: .55rem .7rem; font-size: .74rem; line-height: 1.5; box-shadow: 0 12px 30px rgba(0,0,0,.2); display: grid; gap: .1rem; max-width: 18rem; }
.be-tip strong { font-weight: 700; margin-bottom: .15rem; }
.be-tip span { display: flex; align-items: center; gap: .4rem; }
.be-tip i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.be-donut { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.be-donut svg circle { transition: stroke-width .15s; cursor: default; }
.be-donut svg circle:hover { stroke-width: 26; }
.be-donut__c { font: 700 22px var(--mb-font-display); fill: var(--mb-color-text); }
.be-donut__s { font: 500 9px var(--mb-font-body); fill: var(--mb-color-muted); letter-spacing: .05em; text-transform: uppercase; }
.be-donut__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; flex: 1; min-width: 11rem; font-size: .78rem; }
.be-donut__legend li { display: flex; align-items: center; gap: .5rem; }
.be-donut__legend i { width: .65rem; height: .65rem; border-radius: .2rem; flex: none; }
.be-donut__legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.be-hbars__top { display: flex; justify-content: space-between; gap: .8rem; font-size: .8rem; margin-bottom: .3rem; }
.be-hbars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-hbars__top b { font-variant-numeric: tabular-nums; }
.be-hbars__track { height: .45rem; border-radius: 999px; background: #f1ebe9; overflow: hidden; }
.be-hbars__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a83a50, var(--mb-color-primary)); }
.be-hbars__track i.is-good { background: var(--mb-color-success); }
.be-hbars__track i.is-warn { background: #c08a2b; }
.be-hbars__track i.is-bad { background: var(--mb-color-danger); }
.be-hbars small { color: var(--mb-color-muted); font-size: .7rem; }
.be-heat { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.be-heat i { aspect-ratio: 1; border-radius: 4px; background: rgba(120, 20, 40, var(--a)); outline: 1px solid rgba(120,20,40,.05); min-height: 10px; }
.be-heat i:hover { outline: 2px solid var(--mb-color-primary); }
.be-heat__day { font-size: .66rem; color: var(--mb-color-muted); font-weight: 600; }
.be-heat__h { font-size: .58rem; color: var(--mb-color-muted); text-align: left; }
.be-funnel { display: grid; gap: .7rem; }
.be-funnel__row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) 4.5rem 4rem; align-items: center; gap: .9rem; font-size: .82rem; }
.be-funnel__label { display: grid; }
.be-funnel__label small { color: var(--mb-color-muted); font-size: .68rem; }
.be-funnel__track { height: 1.6rem; background: var(--be-soft); border-radius: .5rem; overflow: hidden; }
.be-funnel__track i { display: block; height: 100%; border-radius: .5rem; background: linear-gradient(90deg, var(--mb-color-primary), #b4485c); opacity: calc(1 - var(--i) * .12); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.be-funnel__row b { text-align: right; font-variant-numeric: tabular-nums; }
.be-funnel__pct { color: var(--mb-color-muted); text-align: right; font-variant-numeric: tabular-nums; }
.be-health { display: grid; gap: 1rem; }
.be-health__row { display: grid; gap: .35rem; }
.be-health__top { display: flex; justify-content: space-between; font-size: .8rem; }
.be-health__top b { font-variant-numeric: tabular-nums; }
.be-health__scale { position: relative; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--mb-color-success-soft) 0 var(--ok), var(--mb-color-warning-soft) var(--ok) var(--bad), var(--mb-color-danger-soft) var(--bad)); }
.be-health__scale i { position: absolute; top: 50%; width: .85rem; height: .85rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); left: var(--x); }
.be-health small { color: var(--mb-color-muted); font-size: .7rem; }
.be-stack { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; background: #f1ebe9; }
.be-stack i { display: block; height: 100%; }
.be-stack-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; margin-top: .9rem; font-size: .78rem; }
.be-stack-legend span { display: flex; align-items: center; gap: .45rem; }
.be-stack-legend i { width: .65rem; height: .65rem; border-radius: .2rem; }
.be-stack-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.be-insight { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .8rem; background: var(--be-soft); border: 1px solid var(--be-line); font-size: .8rem; }
.be-insight svg { width: 1.1rem; height: 1.1rem; color: var(--mb-color-primary); flex: none; margin-top: .1rem; }
.be-insights { display: grid; gap: .6rem; }
.be-clickmap iframe { width: 100%; height: 640px; border: 1px solid var(--be-line); border-radius: .8rem; background: #fff; }
.be-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.6rem 0 .8rem; }
.be-section-title h2 { margin: 0; font: 600 1.25rem var(--mb-font-display); }
.be-section-title small { color: var(--mb-color-muted); }
@media (max-width: 760px) {
  .be-funnel__row { grid-template-columns: 1fr 3.5rem 3.2rem; }
  .be-funnel__track { grid-column: 1 / -1; order: 5; }
  .be-pagehead .mb-heading { font-size: 1.45rem; }
  .be-kpi__value { font-size: 1.6rem; }
  .be-heat { grid-template-columns: 1.8rem repeat(24, minmax(0, 1fr)); gap: 2px; }
  .be-clickmap iframe { height: 480px; }
}
.be-kpi__row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.be-kpi__label { white-space: normal; line-height: 1.25; }
.be-person .be-av { width: 2.1rem; height: 2.1rem; font-size: .7rem; font-weight: 700; background: hsl(var(--h) 42% 92%); color: hsl(var(--h) 40% 30%); border: 0; }
.be-lcard, .be-tcard, .be-scard { border-radius: var(--be-radius); }
.be-tcard:hover, a.be-kpi:hover { border-color: rgba(120, 20, 40, .25); }
.mb-empty { padding: 3.5rem 1rem; }
.mb-empty .mb-empty__icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); display: grid; place-items: center; margin: 0 auto 1rem; }
.mb-empty .mb-empty__icon svg { width: 1.6rem; height: 1.6rem; }
.be-toolbar .mb-input, .be-toolbar .mb-select { min-height: 2.6rem; border-radius: .7rem; background-color: #fff; }

/* ── Mobile : barres de filtres en grille, rien ne déborde ── */
html, body { overflow-x: clip; }
.mb-container { min-width: 0; }
@media (max-width: 760px) {
  .be-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0 0 .9rem; padding: 0; gap: .5rem; }
  .be-toolbar > * { min-width: 0; width: 100%; }
  .be-toolbar .be-search, .be-toolbar .be-tabs-mini, .be-toolbar > .be-grow + *, .be-toolbar > a.mb-btn, .be-toolbar > button.mb-btn { grid-column: 1 / -1; }
  .be-toolbar .be-grow { display: none; }
  .be-toolbar .mb-select, .be-toolbar .mb-input { min-width: 0; width: 100%; max-width: none; flex: none; font-size: 16px; }
  .be-tabs-mini { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; justify-content: flex-start; }
  .be-tabs-mini button { flex: none; }
  .mb-card { padding: 1rem; }
  .be-table-card .be-table-scroll, .be-table-scroll { margin: 0 -1rem; padding: 0 1rem; }
  .be-table td, .be-table th { white-space: nowrap; }
  .be-table td.be-break, .be-table td .be-break { white-space: normal; min-width: 12rem; }
  .be-pagehead { gap: .6rem; }
  .be-pagehead__actions { width: 100%; }
  .be-pagehead__actions .mb-btn { flex: 1 1 auto; }
  .be-card-title { flex-wrap: wrap; }
  .be-tabs { margin-left: -1rem; margin-right: -1rem; padding: 0 1rem; }
  .mb-modal__body { padding: 1rem; }
  .mb-form-grid { grid-template-columns: 1fr !important; }
}
.be-lc--sub .be-lc__plot { margin-bottom: 1.1rem; }
.be-lc__x.has-sub { bottom: -1.15rem; text-align: center; line-height: 1.25; }
.be-lc__x small { display: block; font-size: .6rem; color: #a3969a; text-transform: capitalize; }
.avatar-btn .avatar { overflow: hidden; }
.avatar-btn .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════ Builder ════════ */
.bd { --bd-h: calc(100vh - var(--mb-topbar-height) - 2.5rem); border: 1px solid var(--be-line); border-radius: var(--be-radius); background: #fff; box-shadow: var(--be-card-shadow); overflow: hidden; }
.bd-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid var(--be-line); background: linear-gradient(#fff, #fcfafa); position: sticky; top: var(--mb-topbar-height); z-index: 5; flex-wrap: wrap; }
.bd-bar .be-tabs-mini { box-shadow: none; }
.bd-bar .be-tabs-mini button { display: inline-flex; align-items: center; gap: .35rem; }
.bd-bar .be-tabs-mini svg { width: .95rem; height: .95rem; }
.bd-sep { width: 1px; height: 1.6rem; background: var(--be-line); }
.bd-ib { width: 2rem; height: 2rem; border-radius: .55rem; border: 1px solid transparent; background: none; display: inline-grid; place-items: center; color: var(--mb-color-muted); cursor: pointer; font-size: 1rem; transition: background .15s, color .15s, transform .1s; flex: none; }
.bd-ib:hover:not(:disabled) { background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.bd-ib:active:not(:disabled) { transform: scale(.92); }
.bd-ib:disabled { opacity: .3; cursor: default; }
.bd-ib svg { width: 1rem; height: 1rem; }
.bd-ib--danger:hover:not(:disabled) { background: var(--mb-color-danger-soft); color: var(--mb-color-danger); }
.bd-ai { background: linear-gradient(120deg, #fff 0%, #fbeef1 100%); border-color: #efd3da; color: var(--mb-color-primary); }
.bd-body { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) 20rem; height: var(--bd-h); min-height: 34rem; }
.bd[data-mode="html"] .bd-body, .bd[data-mode="text"] .bd-body { grid-template-columns: 0 minmax(0, 1fr) minmax(22rem, 40%); }
.bd-left, .bd-right { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.bd-left { border-right: 1px solid var(--be-line); }
.bd-right { border-left: 1px solid var(--be-line); }
.bd-scroll { overflow-y: auto; padding: .85rem; flex: 1; min-height: 0; overscroll-behavior: contain; }
.bd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--be-line); }
.bd-tabs button { border: 0; background: none; padding: .75rem .3rem; font: 600 .78rem var(--mb-font-body); color: var(--mb-color-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.bd-tabs button[aria-pressed="true"] { color: var(--mb-color-primary); border-bottom-color: var(--mb-color-primary); }
.bd-hint { color: var(--mb-color-muted); font-size: .72rem; line-height: 1.5; margin: 0 0 .7rem; }
.bd-h { margin: 1.1rem 0 .55rem; font-size: .62rem; letter-spacing: .08rem; text-transform: uppercase; color: var(--mb-color-muted); }
.bd-lib { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.bd-lib__item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5rem; text-align: left; border: 1px solid var(--be-line); background: #fff; border-radius: .7rem; padding: .55rem .6rem; cursor: grab; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bd-lib__item:hover { border-color: rgba(120,20,40,.35); box-shadow: 0 4px 14px rgba(120,20,40,.08); transform: translateY(-1px); }
.bd-lib__item:active { cursor: grabbing; transform: scale(.98); }
.bd-lib__item b { font-size: .76rem; align-self: end; }
.bd-lib__item small { grid-column: 2; font-size: .64rem; color: var(--mb-color-muted); line-height: 1.3; }
.bd-lib__ic { grid-row: span 2; width: 1.9rem; height: 1.9rem; border-radius: .55rem; display: grid; place-items: center; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); align-self: center; }
.bd-lib__ic svg { width: .95rem; height: .95rem; }
.bd-sections { display: grid; gap: .4rem; }
.bd-section { text-align: left; border: 1px dashed #dccfd2; background: var(--be-soft); border-radius: .7rem; padding: .55rem .7rem; cursor: grab; display: grid; transition: border-color .15s, background .15s; }
.bd-section:hover { border-color: var(--mb-color-primary); background: #fff; }
.bd-section b { font-size: .76rem; } .bd-section small { font-size: .66rem; color: var(--mb-color-muted); }
.bd-wide { width: 100%; margin-top: .9rem; }
.bd-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bd-layer { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: .6rem; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; font-size: .76rem; }
.bd-layer:hover { background: var(--be-soft); }
.bd-layer.is-on { background: var(--mb-color-primary-soft); border-color: rgba(120,20,40,.25); }
.bd-layer.is-drag { opacity: .4; }
.bd-layer.is-over { box-shadow: inset 0 3px 0 var(--mb-color-primary); }
.bd-layer__grip { color: #c4b8bb; cursor: grab; letter-spacing: -2px; }
.bd-layer__ic svg { width: .9rem; height: .9rem; color: var(--mb-color-primary); }
.bd-layer b { display: block; } .bd-layer small { display: block; color: var(--mb-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.bd-pill { font-size: .6rem; background: #f1eded; border-radius: 999px; padding: .1rem .4rem; color: var(--mb-color-muted); }
.bd-canvas { background: #ece7e3 radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0) 0 0 / 18px 18px; overflow: auto; padding: 1.25rem; min-width: 0; position: relative; }
.bd-frame { position: relative; margin: 0 auto; max-width: 100%; transition: max-width .35s cubic-bezier(.2,.7,.2,1); height: calc(100% - 2rem); }
.bd-frame.is-mobile { max-width: 390px; }
.bd-frame iframe { width: 100%; height: 100%; border: 0; border-radius: .8rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 50px rgba(44,18,23,.12); }
.bd-frame.is-mobile iframe { border-radius: 1.6rem; border: 8px solid #241b1d; }
.bd-loading { position: absolute; top: .6rem; right: .6rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--mb-color-primary); opacity: 0; transition: opacity .2s; }
.bd-loading.is-on { opacity: 1; animation: be-pulse 1s ease-in-out infinite; }
.bd-subject { margin: .7rem auto 0; max-width: 600px; font-size: .74rem; color: var(--mb-color-muted); text-align: center; }
.bd-subject span { opacity: .8; }
.bd-props { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.bd-props__head { display: flex; align-items: center; gap: .35rem; padding: .7rem .8rem; border-bottom: 1px solid var(--be-line); font-size: .85rem; }
.bd-props .bd-hint { padding: .7rem .85rem 0; }
.bd-code { flex: 1; min-height: 20rem; margin: .7rem .85rem .85rem; width: auto; resize: none; }
.bd-none { display: grid; place-items: center; text-align: center; padding: 2rem 1.4rem; color: var(--mb-color-muted); font-size: .82rem; height: 100%; align-content: center; }
.bd-none__ic { width: 3rem; height: 3rem; border-radius: 1rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); display: grid; place-items: center; margin-bottom: .8rem; animation: be-float 3s ease-in-out infinite; }
.bd-none__ic svg { width: 1.3rem; height: 1.3rem; }
.bd-sec { display: grid; gap: .85rem; }
.bd-sec--fold { margin-top: 1rem; border-top: 1px solid var(--be-line); padding-top: .7rem; }
.bd-sec--fold summary { cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .06rem; text-transform: uppercase; color: var(--mb-color-muted); margin-bottom: .6rem; }
.bd-f { display: grid; gap: .35rem; font-size: .75rem; min-width: 0; }
.bd-f > span:first-child { font-weight: 600; color: var(--mb-color-text); display: flex; justify-content: space-between; }
.bd-f output { color: var(--mb-color-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.bd-f .mb-input, .bd-f .mb-select, .bd-f .mb-textarea { min-width: 0; width: 100%; font-size: .82rem; padding: .5rem .6rem; }
.bd-f input[type=range] { width: 100%; accent-color: var(--mb-color-primary); }
.bd-line { min-height: 2.6rem; resize: vertical; }
.bd-row2 { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: .35rem; align-items: center; }
.bd-row2:not(.bd-rep) { grid-template-columns: 1fr 1.3fr; }
.bd-group { gap: .45rem; }
.bd-seg { display: flex; flex-wrap: wrap; gap: .25rem; background: var(--be-soft); border: 1px solid var(--be-line); border-radius: .65rem; padding: .2rem; }
.bd-seg button { flex: 1 1 auto; border: 0; background: none; border-radius: .5rem; padding: .38rem .45rem; font: 600 .7rem var(--mb-font-body); color: var(--mb-color-muted); cursor: pointer; transition: background .15s, color .15s; }
.bd-seg button[aria-pressed="true"] { background: #fff; color: var(--mb-color-primary); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bd-switch { font-size: .76rem; color: var(--mb-color-text); }
.bd-swatches { display: flex; flex-wrap: wrap; gap: .3rem; }
.bd-sw { width: 1.6rem; height: 1.6rem; border-radius: .45rem; border: 1px solid rgba(0,0,0,.12); cursor: pointer; transition: transform .12s, box-shadow .12s; position: relative; display: grid; place-items: center; font-size: .8rem; color: var(--mb-color-muted); background: #fff; }
.bd-sw:hover { transform: scale(1.1); }
.bd-sw.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mb-color-primary); }
.bd-sw--pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bd-color { display: grid; grid-template-columns: 2.2rem 1fr; gap: .35rem; }
.bd-color input[type=color] { width: 2.2rem; height: 2.2rem; border: 1px solid var(--be-line); border-radius: .5rem; padding: .15rem; background: #fff; cursor: pointer; }
.bd-img { border: 1px dashed #d8cdd0; border-radius: .75rem; padding: .5rem; display: grid; gap: .45rem; background: var(--be-soft); transition: border-color .15s, background .15s; }
.bd-img.is-over { border-color: var(--mb-color-primary); background: var(--mb-color-primary-soft); }
.bd-img img { width: 100%; max-height: 9rem; object-fit: contain; border-radius: .5rem; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.bd-img__empty { display: grid; place-items: center; gap: .3rem; padding: .7rem; color: var(--mb-color-muted); text-align: center; }
.bd-img__empty svg { width: 1.2rem; height: 1.2rem; }
.bd-img__acts { display: flex; gap: .35rem; align-items: center; }
.bd-md { border: 1px solid var(--be-line); border-radius: .65rem; overflow: hidden; background: #fff; position: relative; }
.bd-md textarea { border: 0; border-radius: 0; box-shadow: none; }
.bd-md__bar { display: flex; gap: .15rem; padding: .25rem; border-bottom: 1px solid var(--be-line); background: var(--be-soft); flex-wrap: wrap; }
.bd-md__bar button { border: 0; background: none; border-radius: .4rem; min-width: 1.8rem; height: 1.7rem; cursor: pointer; font-weight: 700; color: var(--mb-color-text); }
.bd-md__bar button:hover { background: #fff; }
.bd-md__bar select { border: 0; background: none; font-size: .7rem; color: var(--mb-color-muted); cursor: pointer; max-width: 7.5rem; }
.bd-md__ai { margin-left: auto; }
.bd-md.is-busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%) 0 0 / 200% 100%; animation: be-shimmer 1s linear infinite; pointer-events: none; }
.bd-card { border: 1px solid var(--be-line); border-radius: .7rem; padding: .5rem; display: grid; gap: .4rem; background: #fff; }
.bd-card summary { font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.bd-item { display: flex; gap: .35rem; align-items: flex-start; }
.bd-item .be-grow { display: grid; gap: .3rem; }
.bd-emoji { width: 2.6rem !important; text-align: center; font-size: 1.1rem !important; padding: .4rem .2rem !important; }
.bd-kitbox { display: flex; gap: .4rem; margin-bottom: .4rem; }
.bd-kitbox .mb-select { flex: 1; min-width: 0; font-size: .78rem; }
.bd-kits, .bd-ai-menu { display: grid; gap: .5rem; }
.bd-kitcard, .bd-ai-menu button { text-align: left; border: 1px solid var(--be-line); background: #fff; border-radius: .8rem; padding: .75rem .9rem; cursor: pointer; display: grid; gap: .25rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bd-kitcard:hover, .bd-ai-menu button:hover { border-color: rgba(120,20,40,.35); box-shadow: 0 6px 18px rgba(120,20,40,.08); transform: translateY(-1px); }
.bd-ai-menu small, .bd-kitcard small { color: var(--mb-color-muted); }
.bd-kitcard__sw { display: flex; gap: .25rem; }
.bd-kitcard__sw i { width: 1.4rem; height: 1.4rem; border-radius: .4rem; border: 1px solid rgba(0,0,0,.08); }
.bd-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.bd-examples { margin-top: .75rem; }
.bd-images { margin-top: 1.25rem; font-size: .85rem; gap: .5rem; }
.bd-thumb { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: .5rem; }
.bd-progress { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding: .8rem 1rem; border-radius: .8rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: .82rem; font-weight: 600; }
.bd-spinner { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: be-spin .7s linear infinite; }
.bd-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .9rem; }
.bd-starter { text-align: left; border: 1px solid var(--be-line); background: #fff; border-radius: .9rem; padding: .6rem; cursor: pointer; display: grid; gap: .3rem; transition: border-color .15s, box-shadow .2s, transform .2s; }
.bd-starter:hover { border-color: rgba(120,20,40,.3); box-shadow: 0 12px 30px rgba(44,18,23,.12); transform: translateY(-3px); }
.bd-starter b { font-size: .84rem; } .bd-starter small { font-size: .7rem; color: var(--mb-color-muted); }
.bd-starter .mb-badge { justify-self: start; }
.bd-starter__thumb { display: block; height: 11rem; overflow: hidden; border-radius: .6rem; background: #f4f1ee; position: relative; pointer-events: none; }
.bd-starter__thumb .mb-skeleton { position: absolute; inset: 0; border-radius: 0; }
.bd-starter__thumb iframe { width: 640px; height: 1100px; border: 0; transform: scale(.33); transform-origin: 0 0; }
.bd-media__bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bd-media__bar .mb-input { flex: 1 1 14rem; }
.bd-upload { cursor: pointer; }
.bd-drop { margin: .8rem 0; border: 2px dashed #e2d8da; border-radius: .9rem; padding: .9rem; text-align: center; color: var(--mb-color-muted); font-size: .8rem; transition: all .2s; }
.bd-drop.is-on { border-color: var(--mb-color-primary); background: var(--mb-color-primary-soft); color: var(--mb-color-primary); transform: scale(1.01); }
.bd-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; max-height: 52vh; overflow: auto; padding: .2rem; }
.bd-media__item { position: relative; border: 2px solid transparent; border-radius: .7rem; overflow: hidden; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; aspect-ratio: 1; cursor: pointer; padding: 0; transition: border-color .15s, transform .15s; }
.bd-media__item:hover { transform: scale(1.02); }
.bd-media__item.is-on { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px var(--mb-color-primary-soft); }
.bd-media__item img { width: 100%; height: 100%; object-fit: contain; }
.bd-media__item span { position: absolute; bottom: .3rem; right: .3rem; font-size: .6rem; background: rgba(36,27,29,.7); color: #fff; padding: .1rem .35rem; border-radius: .3rem; }
.be-flash { animation: be-flash .9s ease; }
.bd-only-s { display: none; }
@media (max-width: 1200px) {
  .bd-body { grid-template-columns: 16rem minmax(0, 1fr); }
  .bd-right { position: fixed; right: 0; top: var(--mb-topbar-height); bottom: 0; width: min(22rem, 92vw); z-index: 40; box-shadow: -18px 0 50px rgba(44,18,23,.18); transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .bd.show-right .bd-right { transform: none; }
  .bd[data-mode="html"] .bd-body, .bd[data-mode="text"] .bd-body { grid-template-columns: 0 minmax(0, 1fr); }
  .bd-only-s[data-toggle-right] { display: inline-grid; }
}
@media (max-width: 860px) {
  .bd-body { grid-template-columns: minmax(0, 1fr); height: 70vh; }
  .bd-left { position: fixed; left: 0; top: var(--mb-topbar-height); bottom: 0; width: min(20rem, 88vw); z-index: 40; box-shadow: 18px 0 50px rgba(44,18,23,.18); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .bd.show-left .bd-left { transform: none; }
  .bd-only-s { display: inline-grid; }
  .bd-canvas { padding: .6rem; }
  .bd-bar { top: var(--mb-topbar-height); }
  .bd-bar .be-tabs-mini button { padding: .4rem .55rem; font-size: .72rem; }
}

/* ════════ Assistant IA ════════ */
.ai-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); color: #fff; font: 600 .78rem var(--mb-font-body); cursor: pointer; position: relative; overflow: hidden; transition: transform .15s, background .2s, box-shadow .2s; }
.ai-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: be-sheen 4.5s ease-in-out infinite; }
.ai-btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.24); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ai-btn[aria-expanded="true"] { background: #fff; color: var(--mb-color-primary); }
.ai-drawer { position: fixed; top: calc(var(--mb-topbar-height) + .6rem); right: .6rem; bottom: .6rem; width: min(27rem, calc(100vw - 1.2rem)); z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid var(--be-line); border-radius: 1.2rem; box-shadow: 0 30px 80px rgba(44,18,23,.25); display: flex; flex-direction: column; transform: translateX(calc(100% + 1rem)) scale(.98); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.ai-drawer.is-open { transform: none; opacity: 1; }
.ai-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; border-bottom: 1px solid var(--be-line); }
.ai-drawer__title { display: flex; align-items: center; gap: .7rem; }
.ai-drawer__title strong { font-family: var(--mb-font-display); font-size: 1.05rem; }
.ai-drawer__acts { display: flex; gap: .15rem; }
.ai-orb { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: conic-gradient(from 0deg, #781428, #d2667a, #c08a2b, #781428); animation: be-spin 6s linear infinite; box-shadow: inset 0 0 0 3px rgba(255,255,255,.7); }
.ai-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; overscroll-behavior: contain; }
.ai-msg { max-width: 92%; padding: .7rem .9rem; border-radius: 1rem; font-size: .84rem; line-height: 1.55; }
.ai-msg p, .ai-msg ul, .ai-msg ol { margin: 0 0 .45rem; } .ai-msg :last-child { margin-bottom: 0; }
.ai-msg ul, .ai-msg ol { padding-left: 1.1rem; }
.ai-msg h4 { margin: .4rem 0 .3rem; font-size: .86rem; }
.ai-msg code { background: rgba(120,20,40,.08); padding: .05rem .3rem; border-radius: .3rem; font-size: .8em; }
.ai-msg small { display: block; margin-top: .4rem; font-size: .65rem; color: var(--mb-color-muted); }
.ai-msg--me { align-self: flex-end; background: var(--mb-color-primary); color: #fff; border-bottom-right-radius: .3rem; }
.ai-msg--ia { align-self: flex-start; background: var(--be-soft); border: 1px solid var(--be-line); border-bottom-left-radius: .3rem; }
.ai-msg--err { align-self: stretch; background: var(--mb-color-danger-soft); color: var(--mb-color-danger); }
.ai-tool { align-self: flex-start; font-size: .68rem; color: var(--mb-color-muted); padding: .15rem .55rem; border-radius: 999px; background: #f3eeee; animation: be-in .3s ease both; }
.ai-tool::before { content: "⚙ "; }
.ai-sugg { display: grid; gap: .4rem; }
.ai-sugg button, .ai-hist button { text-align: left; border: 1px solid var(--be-line); background: #fff; border-radius: .8rem; padding: .6rem .8rem; font: 500 .8rem var(--mb-font-body); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; display: grid; }
.ai-sugg button:hover, .ai-hist button:hover { border-color: rgba(120,20,40,.35); transform: translateX(3px); box-shadow: 0 4px 14px rgba(120,20,40,.08); }
.ai-hist { display: grid; gap: .4rem; } .ai-hist small { color: var(--mb-color-muted); font-size: .68rem; }
.ai-typing { display: flex; align-items: center; gap: .3rem; color: var(--mb-color-muted); font-size: .76rem; }
.ai-typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mb-color-primary); animation: be-bounce 1.2s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
.ai-input { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--be-line); }
.ai-input textarea { resize: none; flex: 1; font-size: .85rem; min-height: 2.8rem; }
@media (max-width: 760px) {
  .ai-btn span { display: none; }
  .ai-btn { padding: .5rem; }
  .ai-drawer { inset: auto 0 0 0; top: 12vh; width: 100%; border-radius: 1.2rem 1.2rem 0 0; transform: translateY(100%); }
}

/* ════════ Modèles, choix, kit ════════ */
.be-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.be-tile { display: flex; flex-direction: column; border: 1px solid var(--be-line); border-radius: var(--be-radius); background: #fff; overflow: hidden; color: inherit; box-shadow: var(--be-card-shadow); transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s; }
.mb-app a.be-tile { color: inherit; text-decoration: none; }
.be-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(44,18,23,.13); border-color: rgba(120,20,40,.25); }
.be-tile__thumb { height: 13rem; position: relative; overflow: hidden; background: #f1ece9; border-bottom: 1px solid var(--be-line); display: block; }
.be-tile__thumb .mb-skeleton { position: absolute; inset: 0; border-radius: 0; }
.be-tile__thumb iframe { width: 640px; height: 1200px; border: 0; transform: scale(.4); transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.be-tile__thumb.is-ready iframe { opacity: 1; }
.be-tile:hover .be-tile__thumb iframe { transform: scale(.4) translateY(-6%); transition: transform 2.4s ease, opacity .4s; }
.be-tile__body { padding: .85rem 1rem 1rem; display: grid; gap: .3rem; }
.be-tile__top { display: flex; gap: .35rem; flex-wrap: wrap; }
.be-tile__body small { color: var(--mb-color-muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-tile__meta { display: flex; justify-content: space-between; font-size: .68rem; color: var(--mb-color-muted); margin-top: .2rem; }
.be-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; }
.be-choices--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.be-choice { text-align: left; border: 1.5px solid var(--be-line); background: #fff; border-radius: 1rem; padding: 1.1rem; cursor: pointer; display: grid; gap: .35rem; transition: border-color .2s, transform .2s, box-shadow .2s; }
.be-choice:hover:not(:disabled) { border-color: rgba(120,20,40,.4); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(44,18,23,.12); }
.be-choice.is-on { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px var(--mb-color-primary-soft); }
.be-choice:disabled { opacity: .5; cursor: default; }
.be-choice b { font-size: .92rem; } .be-choice small { color: var(--mb-color-muted); font-size: .76rem; line-height: 1.45; }
.be-choice__ic { width: 2.4rem; height: 2.4rem; border-radius: .8rem; display: grid; place-items: center; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: 1.15rem; margin-bottom: .3rem; }
.be-choice__ic svg { width: 1.15rem; height: 1.15rem; }
.be-choice--ai { background: linear-gradient(140deg, #fff 40%, #fbeff2); border-color: #efd3da; }
.be-choice--ai .be-choice__ic { background: linear-gradient(140deg, #781428, #c25370); color: #fff; }
.be-center { justify-content: center; }
.be-filebtn { cursor: pointer; }
.be-saved { display: inline-flex; align-items: center; gap: .3rem; color: var(--mb-color-success); font-size: .8rem; font-weight: 600; }
.be-saved svg { width: 1rem; height: 1rem; }
.be-meta__grid { grid-template-columns: 2fr 1.4fr 1fr; }
.be-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.2rem; }
.be-kit { padding: 0; overflow: hidden; }
.be-kit__hero { padding: 1.4rem; }
.be-kit__mail { padding: 1.2rem 1.3rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); display: grid; gap: .5rem; justify-items: start; }
.be-kit__logo { max-height: 2.6rem; max-width: 9rem; object-fit: contain; }
.be-kit__mail { overflow: hidden; padding: 0 !important; gap: 0 !important; justify-items: stretch !important; }
.be-kit__band { display: grid; justify-items: start; }
.be-kit__band { padding: .8rem 1rem; }
.be-kit__band .be-kit__title { margin: 0 0 .6rem; }
.be-kit__text { margin: 0; padding: .7rem 1rem .9rem; }
.be-kit__title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.be-kit__mail p { margin: 0; font-size: .82rem; }
.be-kit__btn { display: inline-block; padding: .55rem 1.1rem; font-weight: 700; font-size: .8rem; }
.be-kit__body { padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: .6rem; }
.be-kit__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
.be-kit__sw { display: grid; gap: .2rem; justify-items: center; }
.be-kit__sw i { width: 100%; aspect-ratio: 1; border-radius: .6rem; border: 1px solid rgba(0,0,0,.08); transition: transform .2s; }
.be-kit__sw:hover i { transform: translateY(-3px) scale(1.06); }
.be-kit__sw small { font-size: .56rem; color: var(--mb-color-muted); font-family: ui-monospace, monospace; }
.be-kit__fonts { margin: 0; font-size: .8rem; color: var(--mb-color-muted); }
.be-kit__fonts span { font-size: 1.15rem; color: var(--mb-color-text); }
.be-kit__tone { margin: 0; font-size: .8rem; line-height: 1.5; }
.be-colorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.be-logo-pick { display: flex; align-items: center; gap: .8rem; }
.be-logo-pick img { max-height: 3rem; max-width: 10rem; object-fit: contain; }
@media (max-width: 760px) { .be-meta__grid { grid-template-columns: 1fr; } .be-tgrid { grid-template-columns: 1fr 1fr; gap: .7rem; } .be-tile__thumb { height: 9rem; } .be-tile__thumb iframe { transform: scale(.27); } }

/* ════════ Animations et micro-interactions ════════ */
@keyframes be-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes be-pop-k { 0% { opacity: 0; transform: scale(.94); } 60% { opacity: 1; transform: scale(1.02); } 100% { transform: none; } }
@keyframes be-spin { to { transform: rotate(360deg); } }
@keyframes be-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .4; } }
@keyframes be-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes be-shimmer { to { background-position: -200% 0; } }
@keyframes be-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes be-sheen { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes be-flash { 0% { box-shadow: 0 0 0 0 rgba(120,20,40,.45); background: #fdf3f5; } 100% { box-shadow: 0 0 0 10px rgba(120,20,40,0); } }
@keyframes be-draw { from { stroke-dashoffset: var(--len, 2000); } to { stroke-dashoffset: 0; } }
@keyframes be-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes be-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes be-ripple { to { transform: scale(4); opacity: 0; } }
@keyframes be-modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes be-veil-in { from { opacity: 0; } to { opacity: 1; } }

.be-pop { animation: be-pop-k .45s cubic-bezier(.2,.8,.2,1) both; }
#view.be-enter > * { animation: be-in .45s cubic-bezier(.2,.7,.2,1) both; }
#view.be-enter > *:nth-child(2) { animation-delay: .04s; } #view.be-enter > *:nth-child(3) { animation-delay: .08s; } #view.be-enter > *:nth-child(4) { animation-delay: .12s; } #view.be-enter > *:nth-child(5) { animation-delay: .16s; } #view.be-enter > *:nth-child(n+6) { animation-delay: .2s; }
.be-pagehead.be-enter .be-topbar-title { animation: be-in .4s ease both; }
.be-kpis > *, .be-grid > *, .be-stagger > *, .be-cards > *, .be-tgrid > * { animation: be-in .5s cubic-bezier(.2,.7,.2,1) both; }
.be-kpis > *:nth-child(2), .be-grid > *:nth-child(2), .be-stagger > *:nth-child(2), .be-cards > *:nth-child(2), .be-tgrid > *:nth-child(2) { animation-delay: .05s; }
.be-kpis > *:nth-child(3), .be-grid > *:nth-child(3), .be-stagger > *:nth-child(3), .be-cards > *:nth-child(3), .be-tgrid > *:nth-child(3) { animation-delay: .1s; }
.be-kpis > *:nth-child(4), .be-grid > *:nth-child(4), .be-stagger > *:nth-child(4), .be-cards > *:nth-child(4), .be-tgrid > *:nth-child(4) { animation-delay: .15s; }
.be-kpis > *:nth-child(5), .be-grid > *:nth-child(5), .be-stagger > *:nth-child(5), .be-cards > *:nth-child(5), .be-tgrid > *:nth-child(5) { animation-delay: .2s; }
.be-kpis > *:nth-child(n+6), .be-grid > *:nth-child(n+6), .be-stagger > *:nth-child(n+6), .be-cards > *:nth-child(n+6), .be-tgrid > *:nth-child(n+6) { animation-delay: .25s; }
.be-noanim .be-kpis > *, .be-noanim .be-grid > *, .be-noanim .be-stagger > *, .be-noanim .be-cards > *, .be-noanim .be-tgrid > * { animation: none; }
.be-kpi, .mb-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s; }
.be-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(44,18,23,.09); }
.be-kpi__bar i, .be-hbars__track i, .be-rate i::after { transform-origin: left; animation: be-grow-x .9s cubic-bezier(.2,.7,.2,1) both; }
.be-funnel__track i { transform-origin: left; animation: be-grow-x 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * .08s); }
.be-lc__svg path[stroke] { stroke-dasharray: var(--len, 4000); animation: be-draw 1.3s cubic-bezier(.3,.6,.2,1) both; }
.be-lc__svg path[fill^="url"] { animation: be-veil-in 1s ease .3s both; }
.be-heat i { transition: transform .15s, outline-color .15s; }
.be-heat i:hover { transform: scale(1.35); position: relative; z-index: 1; }
.be-donut svg { animation: be-pop-k .7s cubic-bezier(.2,.8,.2,1) both; }
.be-donut svg circle { transition: stroke-width .2s, opacity .2s; }
.be-donut:hover svg circle:not(:hover) { opacity: .55; }
.be-click td { transition: background .15s; }
.be-click:active td { background: var(--mb-color-primary-soft); }
.mb-btn { position: relative; overflow: hidden; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; }
.mb-btn:active { transform: translateY(0) scale(.97); }
.be-ripple { position: absolute; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: be-ripple .55s ease-out forwards; pointer-events: none; }
.mb-btn.is-loading { color: transparent !important; pointer-events: none; }
.mb-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--mb-color-primary); border-right-color: transparent; animation: be-spin .7s linear infinite; }
.mb-btn--primary.is-loading::after { border-color: #fff; border-right-color: transparent; }
.navlink, .navmenu__panel a { transition: background .2s, color .2s, transform .15s; }
.navlink:active { transform: scale(.96); }
.navmenu[open] .navmenu__panel { animation: be-modal-in .22s cubic-bezier(.2,.8,.2,1) both; transform-origin: top right; }
dialog.mb-modal[open] { animation: be-modal-in .3s cubic-bezier(.2,.8,.2,1) both; }
dialog.mb-modal::backdrop { animation: be-veil-in .25s ease both; backdrop-filter: blur(3px); }
.be-toast { animation: be-toast-in .35s cubic-bezier(.2,.8,.2,1) both; transition: opacity .25s, transform .25s; }
.be-toast.is-out { opacity: 0; transform: translateY(8px) scale(.97); }
.be-toast--success::before { content: "✓ "; font-weight: 700; }
.be-tabs a { position: relative; transition: color .2s; }
.be-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mb-color-primary); transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.be-tabs a[aria-current="page"]::after { transform: scaleX(1); }
.be-tabs-mini button { transition: background .2s, color .2s, box-shadow .2s, transform .12s; }
.be-tabs-mini button:active { transform: scale(.95); }
.mb-input, .mb-select, .mb-textarea { transition: border-color .2s, box-shadow .2s, background .2s; }
.mb-input:focus, .mb-select:focus, .mb-textarea:focus { box-shadow: 0 0 0 4px rgba(120,20,40,.1); }
.be-switch input::after { transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.mb-badge { transition: transform .15s; }
.be-status-dot.is-ok { animation: be-pulse-ok 2.4s ease-in-out infinite; }
@keyframes be-pulse-ok { 0%, 100% { box-shadow: 0 0 0 3px var(--mb-color-success-soft); } 50% { box-shadow: 0 0 0 6px rgba(37,116,90,.08); } }
.mb-skeleton { background: linear-gradient(100deg, #efe9e7 30%, #f8f4f3 50%, #efe9e7 70%) 0 0 / 200% 100%; animation: be-shimmer 1.3s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.be-tile__thumb iframe { transform: scale(var(--k, .4)) !important; }
.be-tile:hover .be-tile__thumb iframe { transform: scale(var(--k, .4)) translateY(-6%) !important; }
.bd-lib { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.bd-lib__item { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; padding: .6rem .3rem .55rem; row-gap: .35rem; }
.bd-lib__item .bd-lib__ic { grid-row: auto; width: 2.1rem; height: 2.1rem; }
.bd-lib__item b { font-size: .68rem; line-height: 1.2; align-self: start; }
.bd-lib__item small { display: none; }
/* Builder : barre d'outils dans le flux (ne recouvre plus les panneaux) et hauteur ajustée à l'écran. */
.bd-bar { position: relative; top: auto; }
.bd-body { height: calc(100vh - var(--mb-topbar-height) - 4.8rem); min-height: 32rem; }
.bd-canvas { display: flex; flex-direction: column; }
.bd-frame { flex: 1; height: auto; min-height: 0; width: 100%; }
@media (max-width: 860px) { .bd-bar { top: auto; } .bd-body { height: 72vh; } }
/* Builder : barre sur une ligne et code HTML côte à côte avec l'aperçu sur les écrans moyens. */
.bd-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.bd-bar::-webkit-scrollbar { display: none; }
.bd-bar > * { flex: none; }
@media (max-width: 1200px) {
  .bd-bar .bd-lbl { display: none; }
  .bd[data-mode="html"] .bd-body, .bd[data-mode="text"] .bd-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bd[data-mode="html"] .bd-left, .bd[data-mode="text"] .bd-left { display: none; }
  .bd[data-mode="html"] .bd-right, .bd[data-mode="text"] .bd-right { position: static; transform: none; width: auto; box-shadow: none; }
  .bd[data-mode="html"] [data-toggle-right], .bd[data-mode="text"] [data-toggle-right], .bd[data-mode="html"] [data-toggle-left], .bd[data-mode="text"] [data-toggle-left] { display: none; }
}
@media (max-width: 860px) {
  .bd[data-mode="html"] .bd-body, .bd[data-mode="text"] .bd-body { grid-template-columns: 1fr; grid-template-rows: 45% 55%; height: 85vh; }
  .bd[data-mode="html"] .bd-right, .bd[data-mode="text"] .bd-right { border-left: 0; border-top: 1px solid var(--be-line); }
}

/* ════════ Éditeur de code ════════ */
.ce { --ce-g: 3.4rem; --ce-font: 12.5px/1.65 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; display: flex; flex-direction: column; min-height: 0; height: 100%; background: #1d1719; border-radius: .8rem; overflow: hidden; color: #efe7e9; }
.ce-tools, .ce-find, .ce-status { display: flex; align-items: center; gap: .3rem; padding: .35rem .5rem; background: #261e20; font: 600 .68rem var(--mb-font-body); }
.ce-tools button, .ce-find button { border: 0; background: rgba(255,255,255,.07); color: #e9dde0; border-radius: .4rem; padding: .3rem .55rem; cursor: pointer; font: inherit; transition: background .15s; }
.ce-tools button:hover, .ce-find button:hover { background: rgba(255,255,255,.16); }
.ce-tools button[aria-pressed="true"] { background: rgba(210,102,122,.35); }
.ce-grow { flex: 1; }
.ce-check { font-weight: 600; padding: .2rem .5rem; border-radius: 999px; }
.ce-check.is-ok { color: #8fd3b5; background: rgba(47,125,98,.18); }
.ce-check.is-bad { color: #ffb4a6; background: rgba(164,39,56,.3); }
.ce-find { border-top: 1px solid rgba(255,255,255,.06); }
.ce-find input { flex: 1 1 8rem; min-width: 0; background: #15100f; border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: .4rem; padding: .3rem .5rem; font: 12px ui-monospace, monospace; }
.ce-find span { color: #b7a7ab; min-width: 3.5rem; text-align: center; }
.ce-scroll { position: relative; flex: 1; min-height: 14rem; overflow: hidden; counter-reset: l; }
.ce-scroll::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--ce-g) - .6rem); background: #221a1c; border-right: 1px solid rgba(255,255,255,.05); z-index: 0; }
.ce-hl, .ce-input { margin: 0; padding: .7rem .9rem 3rem var(--ce-g); font: var(--ce-font); letter-spacing: 0; tab-size: 2; border: 0; box-sizing: border-box; }
.ce-hl { position: absolute; top: 0; left: 0; min-width: 100%; white-space: pre; pointer-events: none; z-index: 1; color: #efe7e9; will-change: transform; }
.ce-scroll.is-wrap .ce-hl { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.ce-input { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; outline: none; background: transparent; color: transparent; caret-color: #ffd7df; white-space: pre; overflow: auto; z-index: 2; scrollbar-gutter: stable; }
.ce-scroll.is-wrap .ce-input { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.ce-input::selection { background: rgba(210,102,122,.38); color: transparent; }
.ce-input::placeholder { color: #7e6f72; }
.ce-line { display: block; position: relative; min-height: 1.65em; }
.ce-line::before { counter-increment: l; content: counter(l); position: absolute; left: calc(var(--ce-g) * -1); width: calc(var(--ce-g) - 1.2rem); text-align: right; color: #6f5f63; font-size: 11px; }
.ce-line.is-active { background: rgba(255,255,255,.045); box-shadow: -3rem 0 0 rgba(255,255,255,.045); }
.ce-line.is-active::before { color: #e9b9c3; }
.ce-hl i { font-style: normal; }
.c-tag { color: #f28fa4; } .c-punc { color: #9a8a8e; } .c-attr { color: #f3c37a; } .c-str { color: #9fd8b0; }
.c-com { color: #7c6c70; font-style: italic !important; } .c-var { color: #11171a; background: #ffd479; border-radius: 3px; box-shadow: 0 0 0 1px #ffd479; }
.c-ent { color: #9cc3ff; } .c-prop { color: #8bc6ff; } .c-val { color: #e9dcb8; } .c-kw { color: #c79bff; }
.ce-status { justify-content: space-between; color: #a8989c; font-weight: 500; border-top: 1px solid rgba(255,255,255,.05); }
.bd-codewrap { flex: 1; min-height: 0; margin: .7rem .85rem .85rem; display: flex; }
.bd-codewrap .ce { width: 100%; }

/* ════════ Bouton IA flottant ════════ */
.ai-fab { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 70; display: inline-flex; align-items: center; gap: .55rem; height: 3.4rem; padding: 0 1.2rem 0 .45rem; border: 0; border-radius: 999px; background: linear-gradient(120deg, #5e0e1e, #781428 55%, #a32a45); color: #fff; font: 700 .86rem var(--mb-font-body); cursor: pointer; box-shadow: 0 14px 34px rgba(94,14,30,.38), 0 0 0 1px rgba(255,255,255,.12) inset; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, padding .25s; overflow: hidden; }
.ai-fab { overflow: visible; padding-left: 4.3rem; padding-right: .9rem; }
.ai-fab::after { border-radius: inherit; }
.ai-fab .ai-dog { position: absolute; left: -.5rem; bottom: .3rem; width: 5rem; height: 5rem; flex: none; filter: drop-shadow(0 6px 10px rgba(40,12,18,.35)); transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.ai-fab:hover .ai-dog { transform: translateY(-4px) scale(1.06) rotate(-3deg); }
/* Chien détective : il renifle, balaie avec sa loupe, cligne des yeux, remue la queue et les oreilles. */
.ai-dog svg g, .ai-dog svg path, .ai-dog svg ellipse, .ai-dog svg circle { transform-box: fill-box; }
.ai-dog__head { transform-origin: 60% 95%; animation: dog-sniff 3.6s ease-in-out infinite; }
.ai-dog__ear { transform-origin: 80% 5%; animation: dog-ear 3.6s ease-in-out infinite; }
.ai-dog__ear2 { transform-origin: 20% 5%; animation: dog-ear2 3.6s ease-in-out infinite; }
.ai-dog__brow { transform-origin: center; animation: dog-brow 3.6s ease-in-out infinite; }
.ai-dog__hat { transform-origin: 50% 100%; animation: dog-hat 3.6s ease-in-out infinite; }
@keyframes dog-hat { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-1.5px) rotate(-3deg); } }
.ai-fab:hover .ai-dog__brow--r { animation: dog-brow-up .8s ease-in-out infinite alternate; }
.ai-dog__nose { transform-origin: center; animation: dog-nose .42s ease-in-out infinite alternate; }
.ai-dog__eye { transform-origin: center; animation: dog-blink 4.8s infinite; }
.ai-dog__tongue { transform-origin: 50% 0; animation: dog-tongue 1.6s ease-in-out infinite alternate; }
.ai-dog__lens { transform-origin: 85% 92%; animation: dog-lens 3.6s ease-in-out infinite; }
.ai-dog__tail { transform-origin: 0% 100%; animation: dog-tail .5s ease-in-out infinite alternate; }
.ai-dog__tag { transform-origin: 50% 0; animation: dog-tag 1s ease-in-out infinite alternate; }
.ai-dog__spark path { transform-origin: center; animation: dog-spark 2.4s ease-in-out infinite; opacity: 0; }
.ai-dog__spark path + path { animation-delay: 1.2s; }
.ai-fab:hover .ai-dog__tail { animation-duration: .16s; }
.ai-fab:hover .ai-dog__lens { animation: dog-peek .8s ease-in-out infinite alternate; }
.ai-fab:hover .ai-dog__head { animation: dog-tilt .8s ease-in-out infinite alternate; }
@keyframes dog-sniff { 0%, 100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-1.5px,2px) rotate(-5deg); } 50% { transform: translate(1px,.5px) rotate(2deg); } 75% { transform: translate(-1px,2.5px) rotate(-7deg); } }
@keyframes dog-ear { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes dog-ear2 { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes dog-brow { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-2px); } }
@keyframes dog-brow-up { to { transform: translateY(-3px) rotate(8deg); } }
@keyframes dog-nose { to { transform: scale(1.15, .9); } }
@keyframes dog-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes dog-tongue { to { transform: scaleY(1.25); } }
@keyframes dog-lens { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } }
@keyframes dog-tail { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes dog-tag { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes dog-spark { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes dog-tilt { from { transform: rotate(-3deg); } to { transform: rotate(-11deg) translateY(1px); } }
@keyframes dog-peek { from { transform: rotate(4deg); } to { transform: rotate(14deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .ai-dog * { animation: none !important; } }
.ai-fab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat; animation: be-sheen 5s ease-in-out infinite; pointer-events: none; }
.ai-fab:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 44px rgba(94,14,30,.45); }
.ai-fab:active { transform: scale(.96); }
.ai-fab[aria-expanded="true"] { transform: scale(.9); opacity: 0; pointer-events: none; }
.ai-fab__kbd { font: 600 .66rem var(--mb-font-body); opacity: .7; border: 1px solid rgba(255,255,255,.35); border-radius: .3rem; padding: .05rem .3rem; }
.ai-drawer { top: auto; bottom: 1.4rem; right: 1.4rem; height: min(44rem, calc(100vh - var(--mb-topbar-height) - 2.8rem)); transform-origin: bottom right; transform: translateY(24px) scale(.94); }
.ai-drawer.is-open { transform: none; }
.be-footer { padding-bottom: 6rem; }
@media (max-width: 760px) {
  .ai-fab { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); height: 3.2rem; padding: 0 .35rem; }
  .ai-fab span:not(.ai-dog) { display: none; }
  .ai-fab { padding-left: 3.4rem; width: 3.6rem; }
  .ai-fab .ai-dog { width: 4.2rem; height: 4.2rem; left: -.4rem; bottom: .25rem; }
  .ai-drawer { inset: auto 0 0 0; height: 86vh; width: 100%; border-radius: 1.2rem 1.2rem 0 0; transform: translateY(100%); }
}
/* Barre de navigation : libellés toujours visibles. Si la barre ne tient pas (mesuré en JS, app.js → fitNav),
   on resserre et masque le nom de l'app (nav-tight), puis on passe au menu burger (nav-burger). */
.mb-app .navlink span { display: inline !important; }
.nav-tight .navbar__inner { gap: .7rem; }
.nav-tight .navlinks { gap: 0; }
.nav-tight.mb-app .navlink { padding: .5rem .55rem; gap: .35rem; font-size: .79rem; }
.nav-tight .navbar__brand span { display: none; }
.nav-burger .navlinks { visibility: hidden; position: absolute; pointer-events: none; }
.nav-burger .navbar__burger { display: block; }
.nav-burger .navbar__burger .navmenu__panel { position: fixed; left: auto; right: .75rem; top: calc(var(--mb-topbar-height) + .4rem); min-width: 17rem; max-height: calc(100vh - 6rem); overflow: auto; }
.ce .ce-hl, .ce .ce-input { font: var(--ce-font) !important; letter-spacing: 0 !important; font-variant-ligatures: none !important; font-feature-settings: normal !important; text-transform: none !important; }

/* Valeurs héritées du kit (affichées mais non fixées sur le bloc) */
.bd-inh { font-weight: 500; font-size: .72rem; color: var(--mb-color-muted); margin-left: .35rem; text-transform: none; letter-spacing: 0; }
.bd-sw.is-on.is-auto { box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--mb-color-primary) 45%, transparent); }
.bd-sw.is-on.is-auto::after { content: 'auto'; position: absolute; bottom: -1.05rem; font-size: .58rem; color: var(--mb-color-muted); }
.bd-swatches:has(.is-auto) { padding-bottom: .9rem; }

/* ── Éditeur de texte riche (builder) ───────────────────────────────── */
.rt { position: relative; border: 1px solid var(--be-line); border-radius: .75rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.rt.is-focus { border-color: color-mix(in srgb, var(--mb-color-primary) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-color-primary) 14%, transparent); }
.rt-bar { position: sticky; top: 0; z-index: 2; display: grid; gap: .15rem; padding: .3rem; border-bottom: 1px solid var(--be-line); background: var(--be-soft); border-radius: .75rem .75rem 0 0; }
.rt-row { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.rt-b { display: inline-grid; place-items: center; min-width: 1.85rem; height: 1.85rem; padding: 0 .3rem; border: 0; border-radius: .45rem; background: none; color: var(--mb-color-text); font: 600 .9rem/1 var(--mb-font-body); cursor: pointer; transition: background .12s, color .12s, transform .1s; }
.rt-b:hover { background: #fff; }
.rt-b:active { transform: scale(.92); }
.rt-b[aria-pressed="true"] { background: color-mix(in srgb, var(--mb-color-primary) 13%, #fff); color: var(--mb-color-primary); }
.rt-b svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt-b sup { font-size: .55rem; }
.rt-a { position: relative; display: inline-block; font-weight: 800; line-height: 1; padding-bottom: .2rem; }
.rt-a i { position: absolute; left: -.1rem; right: -.1rem; bottom: -.05rem; height: .22rem; border-radius: 2px; background: #241b1d; }
.rt-a--hl { background: #fff3bf; padding: 0 .15rem .2rem; border-radius: .2rem; }
.rt-a--hl i { background: #ffd43b; }
.rt-sep { width: 1px; height: 1.2rem; margin: 0 .2rem; background: var(--be-line); }
.rt-grow { flex: 1; }
.rt-sel { height: 1.85rem; border: 1px solid transparent; border-radius: .45rem; background: #fff; font: 500 .74rem var(--mb-font-body); color: var(--mb-color-text); padding: 0 .3rem; cursor: pointer; max-width: 7.2rem; }
.rt-sel:hover { border-color: var(--be-line); }
.rt-sel--var { max-width: 4.2rem; font-family: ui-monospace, monospace; }
.rt-ai { background: linear-gradient(120deg, #fbe9ee, #fff4dc); }
.rt-area { min-height: 7.5rem; max-height: 22rem; overflow: auto; padding: .8rem .9rem; outline: none; font-size: 15px; line-height: 1.6; color: #241b1d; word-break: break-word; }
.rt--single .rt-area { min-height: 0; padding: .6rem .8rem; font-weight: 700; line-height: 1.3; }
.rt-area p { margin: 0 0 .7em; }
.rt-area p:last-child { margin-bottom: 0; }
.rt-area ul, .rt-area ol { margin: 0 0 .7em; padding-left: 1.4em; }
.rt-area a { color: var(--mb-color-primary); text-decoration: underline; }
.rt-area:empty::before { content: 'Votre texte…'; color: var(--mb-color-muted); }
.rt-foot { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .7rem; border-top: 1px solid var(--be-line); font-size: .68rem; color: var(--mb-color-muted); }
.rt--single .rt-foot { display: none; }
.rt-pop { position: absolute; z-index: 20; width: 15.5rem; padding: .7rem; border: 1px solid var(--be-line); border-radius: .8rem; background: #fff; box-shadow: 0 18px 40px rgba(36,27,29,.18); animation: be-pop-k .25s cubic-bezier(.2,.8,.2,1); }
.rt-pop__t { font: 700 .72rem var(--mb-font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-color-muted); margin-bottom: .5rem; }
.rt-pop__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.rt-colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.rt-colors button { aspect-ratio: 1; border: 1px solid rgba(0,0,0,.12); border-radius: .4rem; cursor: pointer; transition: transform .1s; }
.rt-colors button:hover { transform: scale(1.15); }
.rt-pick { position: relative; font-size: .75rem; font-weight: 600; cursor: pointer; padding: .25rem .55rem; border: 1px solid var(--be-line); border-radius: .45rem; }
.rt-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rt-link { border: 0; background: none; color: var(--mb-color-primary); font-size: .74rem; font-weight: 600; cursor: pointer; padding: 0; }
.rt-url { width: 100%; }
.rt-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem; }
.rt-emojis button { border: 0; background: none; font-size: 1.15rem; border-radius: .35rem; cursor: pointer; aspect-ratio: 1; }
.rt-emojis button:hover { background: var(--be-soft); transform: scale(1.15); }
.rt.is-busy::after { content: ""; position: absolute; inset: 0; border-radius: .75rem; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.8) 50%, transparent 80%) 0 0 / 200% 100%; animation: be-shimmer 1s linear infinite; pointer-events: none; }
.bd-reset { justify-self: end; border: 0; background: none; color: var(--mb-color-primary); font-size: .7rem; font-weight: 600; cursor: pointer; padding: .1rem 0 0; }
.bd-f:has(> .bd-reset) { display: grid; }

/* ── Édition directe dans l'aperçu : barre flottante ───────────────── */
.bd-inbar { position: fixed; z-index: 80; display: flex; align-items: center; gap: .1rem; padding: .3rem; border-radius: .8rem; background: #241b1d; color: #fff; box-shadow: 0 14px 34px rgba(36,27,29,.35); opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .18s, transform .18s cubic-bezier(.2,.8,.2,1); }
.bd-inbar.is-in { opacity: 1; transform: none; }
.bd-inbar > button { min-width: 2rem; height: 2rem; padding: 0 .4rem; border: 0; border-radius: .5rem; background: none; color: #fff; font: 600 .88rem/1 var(--mb-font-body); cursor: pointer; transition: background .12s, transform .1s; }
.bd-inbar > button:hover { background: rgba(255,255,255,.14); }
.bd-inbar > button:active { transform: scale(.92); }
.bd-inbar > button[hidden] { display: none; }
.bd-inbar .rt-a i { background: #fff; }
.bd-inbar__sep { width: 1px; height: 1.2rem; margin: 0 .25rem; background: rgba(255,255,255,.2); }
.bd-inbar__ok { background: var(--mb-color-primary) !important; padding: 0 .75rem !important; font-size: .78rem !important; }
.bd-inbar__pop { position: absolute; top: calc(100% + .45rem); left: 0; width: 15rem; padding: .6rem; border-radius: .7rem; background: #fff; color: var(--mb-color-text); box-shadow: 0 16px 36px rgba(36,27,29,.22); border: 1px solid var(--be-line); }
.bd-inbar__pop .mb-input { width: 100%; }
.bd-inbar__row { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }

/* Chien détective dans le tiroir de l'IA */
.ai-dog--drawer { width: 3.1rem; height: 3.1rem; flex: none; margin: -.5rem -.1rem -.35rem -.3rem; filter: drop-shadow(0 4px 6px rgba(40,12,18,.22)); }
.ai-typing--dog { gap: .35rem; }
.ai-dog--search { width: 3.4rem; height: 3.4rem; flex: none; margin: -.3rem .1rem -.3rem -.2rem; }
.ai-dog--search .ai-dog__lens { animation: dog-peek .55s ease-in-out infinite alternate; }
.ai-dog--search .ai-dog__head { animation: dog-sniff 1.4s ease-in-out infinite; }
.ai-dog--search .ai-dog__tail { animation-duration: .2s; }

/* Barre du builder : modes à gauche, annuler / rétablir au centre, outils à droite */
.bd-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bd-bar__start, .bd-bar__mid, .bd-bar__end { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.bd-bar__mid { justify-content: center; gap: .15rem; }
.bd-bar__end { justify-content: flex-end; }
.bd-bar__start > *, .bd-bar__mid > *, .bd-bar__end > * { flex: none; }
.bd-bar .be-tabs-mini { width: auto; max-width: none; overflow: visible; }
/* Petits écrans : une seule ligne défilante, outils poussés à droite. */
@media (max-width: 760px) {
  .bd-bar { display: flex; flex-wrap: wrap; overflow: visible; gap: .4rem .35rem; padding: .45rem .5rem; }
  .bd-bar__start, .bd-bar__mid, .bd-bar__end { gap: .3rem; }
  .bd-bar__mid { gap: 0; margin-left: auto; }
  .bd-bar__end { flex: 1 1 100% !important; justify-content: space-between; padding-top: .4rem; border-top: 1px solid var(--be-line); }
  .bd-bar .be-tabs-mini button { padding: .35rem .5rem; }
  .bd-bar .bd-ai { padding-inline: .55rem; }
}

/* ── Sélecteur de variables {{ }} ───────────────────────────────────── */
.vp { position: fixed; z-index: 120; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--be-line); border-radius: .9rem; box-shadow: 0 22px 50px rgba(36,27,29,.22); overflow: hidden; animation: be-pop-k .22s cubic-bezier(.2,.8,.2,1); transition: opacity .14s, transform .14s; }
.vp.is-out { opacity: 0; transform: translateY(4px) scale(.98); }
.vp-head { padding: .6rem; border-bottom: 1px solid var(--be-line); }
.vp-search { width: 100%; }
.vp-list { overflow: auto; padding: .35rem; min-height: 0; flex: 1; }
.vp-group__t { padding: .45rem .5rem .25rem; font: 700 .66rem var(--mb-font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--mb-color-muted); }
.vp-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .05rem .6rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: .55rem; background: none; text-align: left; cursor: pointer; transition: background .12s, transform .12s; }
.vp-item:hover, .vp-item:focus-visible { background: color-mix(in srgb, var(--mb-color-primary) 8%, #fff); outline: none; }
.vp-item:active { transform: scale(.98); }
.vp-item[hidden], .vp-group[hidden] { display: none; }
.vp-item__l { font-weight: 600; font-size: .84rem; color: var(--mb-color-text); }
.vp-item code { font-size: .7rem; color: var(--mb-color-primary); background: color-mix(in srgb, var(--mb-color-primary) 7%, #fff); padding: .1rem .35rem; border-radius: .35rem; }
.vp-item small { grid-column: 1 / -1; font-size: .7rem; color: var(--mb-color-muted); }
.vp-empty { padding: .8rem; font-size: .78rem; color: var(--mb-color-muted); }
.vp-opts { display: grid; gap: .6rem; padding: .8rem; }
.vp-opts[hidden], .vp-head[hidden], .vp-list[hidden] { display: none; }
.vp-opts__t { display: flex; align-items: center; justify-content: space-between; }
.vp-back { border: 0; background: none; color: var(--mb-color-primary); font-weight: 600; font-size: .76rem; cursor: pointer; }
.vp-prev { padding: .5rem .6rem; border-radius: .55rem; background: var(--be-soft); overflow-x: auto; }
.vp-prev code { font-size: .74rem; white-space: nowrap; color: var(--mb-color-primary); }
.vp-ok { justify-self: end; }
.vp-field { position: relative; display: flex; align-items: center; width: 100%; }
.vp-field > .mb-input { flex: 1; padding-right: 7.2rem; }
.vp-btn { position: absolute; right: .35rem; display: inline-flex; align-items: center; gap: .35rem; height: calc(100% - .7rem); padding: 0 .6rem; border: 1px solid color-mix(in srgb, var(--mb-color-primary) 22%, transparent); border-radius: .55rem; background: color-mix(in srgb, var(--mb-color-primary) 6%, #fff); color: var(--mb-color-primary); font: 600 .74rem var(--mb-font-body); cursor: pointer; transition: background .12s, transform .1s; }
.vp-btn:hover { background: color-mix(in srgb, var(--mb-color-primary) 12%, #fff); }
.vp-btn:active { transform: scale(.95); }
.vp-btn span { font-family: ui-monospace, monospace; font-size: .7rem; }
@media (max-width: 560px) { .vp-btn b { display: none; } .vp-field > .mb-input { padding-right: 3.6rem; } }
.rt-var { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--mb-color-primary); padding: 0 .45rem; }
.bd-inbar__var { font-family: ui-monospace, monospace; font-size: .72rem !important; }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.bf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.bf-card { display: flex; flex-direction: column; border: 1px solid var(--be-line); border-radius: 1rem; background: #fff; overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.bf-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(36,27,29,.12); }
.bf-card__thumb { position: relative; height: 11rem; overflow: hidden; background: radial-gradient(circle at 20% 10%, #fff, #f1ece8); border-bottom: 1px solid var(--be-line); }
.bf-card__thumb iframe { position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; }
.bf-card__body { display: grid; gap: .3rem; padding: .9rem 1rem 1rem; }
.bf-card__top { display: flex; gap: .35rem; flex-wrap: wrap; }
.bf-card__top .mb-badge svg { width: .85rem; height: .85rem; vertical-align: -2px; }
.bf-card__body > b { font: 600 1rem var(--mb-font-display); }
.bf-card__body > small { color: var(--mb-color-muted); font-size: .76rem; }
.bf-card__stats { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--mb-color-muted); margin-top: .2rem; }
.bf-card__stats b { color: var(--mb-color-text); font-size: .92rem; }
.bf-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bf-layouts--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.bf-layout { display: grid; gap: .25rem; justify-items: start; padding: .75rem; border: 1.5px solid var(--be-line); border-radius: .8rem; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.bf-layout:hover { border-color: color-mix(in srgb, var(--mb-color-primary) 40%, var(--be-line)); }
.bf-layout:active { transform: scale(.97); }
.bf-layout[aria-pressed="true"] { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-color-primary) 14%, transparent); }
.bf-layout__ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); }
.bf-layout__ic svg { width: 1.4rem; height: 1.4rem; }
.bf-layout b { font-size: .84rem; }
.bf-layout small { font-size: .7rem; color: var(--mb-color-muted); line-height: 1.35; }
.bf-layouts--sm .bf-layout { padding: .55rem; justify-items: center; text-align: center; }
.bf-ed { display: grid; grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bf-side { position: sticky; top: calc(var(--mb-topbar-height) + 1rem); display: flex; flex-direction: column; max-height: calc(100vh - var(--mb-topbar-height) - 2rem); border: 1px solid var(--be-line); border-radius: 1rem; background: #fff; overflow: hidden; }
.bf-tabs { margin: .6rem; flex-wrap: wrap; justify-content: flex-start; box-shadow: none; }
.bf-tabs button { font-size: .74rem; padding: .35rem .6rem; }
.bf-panel { overflow: auto; padding: .2rem 1rem 1.2rem; display: grid; gap: .55rem; align-content: start; }
.bf-panel .mb-field { margin: 0; }
.bf-h { margin: .9rem 0 .1rem; font: 700 .7rem var(--mb-font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--mb-color-muted); }
.bf-seg { box-shadow: none; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
.bf-seg button { font-size: .74rem; }
.bf-rl { display: flex; justify-content: space-between; }
.bf-rl output { color: var(--mb-color-muted); font-weight: 500; }
.bf-switch { font-size: .82rem; }
.bf-color { display: flex; gap: .5rem; align-items: center; }
.bf-color input[type=color] { width: 2.6rem; height: 2.2rem; border: 1px solid var(--be-line); border-radius: .5rem; padding: .15rem; background: #fff; cursor: pointer; }
.bf-img { display: grid; gap: .5rem; padding: .6rem; border: 1px dashed var(--be-line); border-radius: .7rem; }
.bf-img img { width: 100%; max-height: 9rem; object-fit: cover; border-radius: .5rem; }
.bf-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bf-fld { border: 1px solid var(--be-line); border-radius: .75rem; background: #fff; transition: box-shadow .15s, opacity .15s; }
.bf-fld.is-drag { opacity: .5; }
.bf-fld__head { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem; border-bottom: 1px solid var(--be-line); }
.bf-fld__head b { font-size: .84rem; flex: 1; }
.bf-fld__head code { font-size: .68rem; color: var(--mb-color-muted); }
.bf-fld__grip { cursor: grab; color: var(--mb-color-muted); letter-spacing: -2px; }
.bf-fld__body { display: grid; gap: .4rem; padding: .55rem .6rem .65rem; }
.bf-addf { display: flex; flex-wrap: wrap; gap: .35rem; }
.bf-addf .be-chip svg { width: .8rem; height: .8rem; vertical-align: -1px; }
.bf-stage { display: grid; gap: .6rem; min-width: 0; }
.bf-stage__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.bf-stage__site { position: relative; min-height: 34rem; border: 1px solid var(--be-line); border-radius: 1rem; overflow: hidden; background: #fbfaf9; display: grid; place-items: center; padding: 2rem 1rem; }
.bf-fake { position: absolute; inset: 0; padding: 2rem; display: grid; align-content: start; gap: .9rem; opacity: 0; transition: opacity .3s; pointer-events: none; }
.bf-fake i { display: block; height: .9rem; border-radius: .4rem; background: #ece6e2; }
.bf-fake i:nth-child(1) { width: 40%; height: 1.6rem; } .bf-fake i:nth-child(2) { width: 85%; } .bf-fake i:nth-child(3) { width: 70%; } .bf-fake i:nth-child(4) { height: 8rem; } .bf-fake i:nth-child(5) { width: 60%; }
.bf-stage__site[data-layout="popup"], .bf-stage__site[data-layout="slide"], .bf-stage__site[data-layout="banner"] { background: #f4f0ed; }
.bf-stage__site[data-layout="popup"] .bf-fake, .bf-stage__site[data-layout="slide"] .bf-fake, .bf-stage__site[data-layout="banner"] .bf-fake { opacity: 1; }
.bf-stage__site[data-layout="popup"]::after { content: ""; position: absolute; inset: 0; background: rgba(20,12,14,.42); }
.bf-frame { position: relative; z-index: 1; width: 100%; height: 32rem; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.bf-frame.is-mobile { width: 390px; max-width: 100%; height: 40rem; border-radius: 1.6rem; box-shadow: 0 0 0 10px #241b1d, 0 30px 60px rgba(0,0,0,.25); overflow: hidden; background: #fff; }
.bf-frame iframe { width: 100%; height: 100%; border: 0; background: transparent; }
.bf-stage__site[data-layout="slide"] { place-items: end end; }
.bf-stage__site[data-layout="slide"] .bf-frame:not(.is-mobile) { width: 400px; height: 30rem; }
.bf-stage__site[data-layout="banner"] { place-items: end stretch; padding: 0; }
.bf-stage__site[data-layout="banner"] .bf-frame:not(.is-mobile) { height: 9rem; }
.bf-saved { font-size: .74rem; color: var(--mb-color-muted); align-self: center; transition: color .2s; }
.bf-saved.is-dirty { color: #b7791f; }
.bf-saved.is-ok { color: #2f7d62; }
.bf-emb { display: grid; gap: .4rem; padding-bottom: .4rem; }
.bf-emb .be-code { white-space: pre-wrap; word-break: break-all; font-size: .7rem; }
@media (max-width: 1100px) { .bf-ed { grid-template-columns: 1fr; } .bf-side { position: static; max-height: none; } .bf-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Synchronisations ────────────────────────────────────────────────── */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.bs-card { display: grid; gap: .7rem; padding: 1.1rem; border: 1px solid var(--be-line); border-radius: 1rem; background: #fff; transition: box-shadow .2s; }
.bs-card:hover { box-shadow: 0 14px 34px rgba(36,27,29,.1); }
.bs-card.has-error { border-color: color-mix(in srgb, #c92a2a 35%, var(--be-line)); }
.bs-card__head { display: flex; align-items: center; gap: .7rem; }
.bs-card__head b { display: block; font: 600 1rem var(--mb-font-display); }
.bs-card__head small { font-size: .74rem; color: var(--mb-color-muted); }
.bs-card__head small a { color: inherit; }
.bs-logo { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: .75rem; font: 800 .82rem var(--mb-font-body); color: #fff; background: #5a6fb0; letter-spacing: -.02em; }
.bs-logo--crm { background: linear-gradient(135deg, #781428, #a32a45); }
.bs-logo--propresence { background: linear-gradient(135deg, #1f6f5c, #2f9e7c); }
.bs-logo--decroche { background: linear-gradient(135deg, #c92a2a, #f08c00); }
.bs-logo--custom { background: linear-gradient(135deg, #495057, #868e96); font-size: 1.1rem; }
.bs-card__stats { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--mb-color-muted); }
.bs-card__stats b { color: var(--mb-color-text); font-size: .95rem; }
.bs-card__when { margin: 0; font-size: .76rem; color: var(--mb-color-muted); }
.bs-card__err { margin: 0; padding: .55rem .7rem; border-radius: .6rem; background: #fff5f5; color: #a61e1e; font-size: .76rem; }
.bs-card footer { flex-wrap: wrap; }
.is-spinning svg { animation: bs-spin .8s linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bs-app { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; align-items: center; padding: .8rem; border: 1.5px solid var(--be-line); border-radius: .85rem; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; }
.bs-app:hover { border-color: var(--mb-color-primary); box-shadow: 0 8px 22px rgba(36,27,29,.08); }
.bs-app:active { transform: scale(.98); }
.bs-app .bs-logo { grid-row: span 2; }
.bs-app small { font-size: .72rem; color: var(--mb-color-muted); }
.bs-token { display: flex; gap: .5rem; }
.bs-token .mb-input { flex: 1; }
.bs-test { margin: .5rem 0 0; font-size: .8rem; min-height: 1em; }
.bs-test.is-ok { color: #2f7d62; font-weight: 600; }
.bs-test.is-ko { color: #c92a2a; }
.bs-test.is-wait { color: var(--mb-color-muted); }
.bs-colls { display: grid; gap: .6rem; }
.bs-coll { display: grid; gap: .4rem; padding: .75rem; border: 1px solid var(--be-line); border-radius: .8rem; transition: opacity .2s; }
.bs-coll.is-off .bs-coll__opts { opacity: .45; pointer-events: none; }
.bs-coll__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bs-push summary { cursor: pointer; font-weight: 600; font-size: .84rem; }
@media (max-width: 760px) { .bs-apps, .bs-coll__opts, .bf-layouts { grid-template-columns: 1fr; } .bs-token { flex-direction: column; } }

/* ── Étape « Test » des campagnes ────────────────────────────────────── */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem); gap: 1rem; align-items: start; }
.ct-prev { display: grid; gap: .7rem; padding: .9rem; min-width: 0; }
.ct-prev__bar { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.ct-prev__bar .be-tabs-mini { box-shadow: none; }
.ct-prev__bar button { font-size: .74rem; }
.ct-inbox { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--be-line); border-radius: .8rem; background: #fff; font-size: .82rem; min-width: 0; }
.ct-inbox__av { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--mb-color-primary); color: #fff; font-weight: 700; }
.ct-inbox .be-grow { min-width: 0; }
.ct-inbox b { display: block; }
.ct-inbox [data-subj] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mb-color-muted); }
.ct-inbox__s { color: var(--mb-color-text); font-weight: 600; }
.ct-inbox small { color: var(--mb-color-muted); flex: none; }
.ct-frame { height: 40rem; border: 1px solid var(--be-line); border-radius: .8rem; overflow: hidden; background: #f4f1ee; transition: width .35s cubic-bezier(.2,.8,.2,1); width: 100%; justify-self: center; }
.ct-frame.is-mobile { width: 390px; max-width: 100%; border-radius: 1.6rem; box-shadow: 0 0 0 9px #241b1d, 0 24px 50px rgba(0,0,0,.2); }
.ct-frame iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.ct-issues__t { margin: 0 0 .4rem; font-size: .8rem; }
.ct-issues__t small { display: block; margin-top: .2rem; }
.ct-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ct-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border: 1px solid var(--be-line); border-radius: 999px; background: #fff; font-size: .76rem; font-weight: 600; cursor: pointer; transition: transform .12s, box-shadow .15s; }
.ct-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(36,27,29,.08); }
.ct-chip > span { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .66rem; color: #fff; background: #2f7d62; }
.ct-chip.is-warn > span { background: #c08a2b; } .ct-chip.is-fail > span { background: #c92a2a; }
.ct-chip small { color: var(--mb-color-muted); }
.ct-ok { margin: 0; font-size: .8rem; color: #2f7d62; font-weight: 600; }
.ct-side { display: grid; gap: 1rem; position: sticky; top: calc(var(--mb-topbar-height) + 1rem); max-height: calc(100vh - var(--mb-topbar-height) - 2rem); overflow: auto; padding-bottom: .2rem; }
.ct-score { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: center; }
.ct-gauge { position: relative; width: 7.2rem; height: 7.2rem; }
.ct-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ct-gauge__bg { fill: none; stroke: #efe9e6; stroke-width: 10; }
.ct-gauge__fg { fill: none; stroke: #2f7d62; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1); }
.ct-gauge.is-ok .ct-gauge__fg { stroke: #5a9e5f; } .ct-gauge.is-warn .ct-gauge__fg { stroke: #c08a2b; } .ct-gauge.is-bad .ct-gauge__fg { stroke: #c92a2a; }
.ct-gauge > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ct-gauge strong { font: 700 2rem/1 var(--mb-font-display); }
.ct-gauge small { color: var(--mb-color-muted); font-size: .7rem; }
.ct-score__txt .be-h2 { margin-bottom: .3rem; text-transform: none; }
.ct-score__txt p { margin: 0 0 .5rem; }
.ct-bad { color: #c92a2a; }
.ct-list { grid-column: 1 / -1; list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ct-list li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .55rem; align-items: start; padding: .5rem .6rem; border-radius: .65rem; background: #fbfaf9; font-size: .78rem; }
.ct-list li > span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: .7rem; font-weight: 800; color: #fff; background: #2f7d62; }
.ct-list li.is-warn > span { background: #c08a2b; } .ct-list li.is-fail > span { background: #c92a2a; } .ct-list li.is-info > span { background: #5a6fb0; }
.ct-list li.is-fail { background: #fff5f5; } .ct-list li.is-warn { background: #fff9ec; }
.ct-list b { display: block; font-size: .8rem; }
.ct-list small { display: block; color: var(--mb-color-muted); line-height: 1.4; }
.ct-list em { display: block; margin-top: .2rem; font-style: normal; color: var(--mb-color-primary); font-weight: 600; font-size: .74rem; }
.ct-testform { display: flex; gap: .5rem; }
.ct-testform .mb-input { flex: 1; min-width: 0; }
.ct-seeds { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ct-seeds li { display: grid; gap: .45rem; padding: .6rem; border: 1px solid var(--be-line); border-radius: .75rem; }
.ct-seeds li.is-stale { opacity: .75; }
.ct-seeds__h { display: flex; align-items: center; gap: .55rem; font-size: .8rem; }
.ct-seeds__h small { display: block; color: var(--mb-color-muted); font-size: .72rem; }
.ct-seeds__v { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ct-seeds__v .mb-select { flex: 1; min-width: 10rem; height: auto; min-height: 2.3rem; padding-top: .35rem; padding-bottom: .35rem; font-size: .8rem; line-height: 1.3; }
.ct-seeds__v .be-tabs-mini { box-shadow: none; }
.ct-seeds__v .be-tabs-mini button { font-size: .72rem; }
.ct-prov { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .55rem; color: #fff; font-weight: 800; font-size: .72rem; background: #868e96; }
.ct-prov--gmail { background: #ea4335; } .ct-prov--outlook { background: #0a64c2; } .ct-prov--yahoo { background: #6001d2; } .ct-prov--appleicloud { background: #1d1d1f; } .ct-prov--orange { background: #ff7900; } .ct-prov--sfr { background: #e2001a; } .ct-prov--free { background: #cd1e25; } .ct-prov--laposte { background: #f5b800; color: #1d1d1f; } .ct-prov--proton { background: #6d4aff; } .ct-prov--gmx { background: #1c449b; }
.ct-empty { display: grid; justify-items: center; gap: .3rem; padding: 1rem; color: var(--mb-color-muted); font-size: .8rem; }
.ct-empty svg { width: 1.6rem; height: 1.6rem; }
.ct-empty p { margin: 0; }
@media (max-width: 1180px) { .ct { grid-template-columns: 1fr; } .ct-side { position: static; max-height: none; } .ct-frame { height: 32rem; } }
@media (max-width: 560px) { .ct-testform { flex-direction: column; } .ct-score { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ct-prev { overflow: hidden; }
.ct-prev__bar .be-tabs-mini { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.ct-prev__bar .be-tabs-mini::-webkit-scrollbar { display: none; }
.ct-prev__bar .be-tabs-mini button { flex: none; }

/* ── Départ : moment d'envoi ────────────────────────────────────────── */
.cs-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .9rem; }
.cs-mode { position: relative; display: flex; align-items: center; gap: .55rem; padding: .7rem .75rem; border: 1.5px solid var(--be-line); border-radius: .85rem; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; min-width: 0; }
.cs-mode:hover { border-color: color-mix(in srgb, var(--mb-color-primary) 40%, var(--be-line)); }
.cs-mode:active { transform: scale(.98); }
.cs-mode input { position: absolute; opacity: 0; pointer-events: none; }
.cs-mode:has(input:checked) { border-color: var(--mb-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-color-primary) 14%, transparent); }
.cs-mode:has(input:focus-visible) { outline: 2px solid var(--mb-color-primary); outline-offset: 2px; }
.cs-mode__ic { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .6rem; background: var(--mb-color-primary-soft); color: var(--mb-color-primary); font-size: 1rem; }
.cs-mode__ic svg { width: 1rem; height: 1rem; }
.cs-mode b { display: block; font-size: .84rem; }
.cs-mode small { display: block; font-size: .7rem; color: var(--mb-color-muted); line-height: 1.3; }
.cs-reco { position: absolute; top: -.55rem; right: .6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--mb-color-primary); color: #fff; font: 700 .6rem var(--mb-font-body); font-style: normal; letter-spacing: .03em; }
.cs-pane { margin-bottom: .9rem; }
.cs-reco-card { padding: .85rem; border-radius: .85rem; background: linear-gradient(135deg, color-mix(in srgb, var(--mb-color-primary) 6%, #fff), #fff); border: 1px solid color-mix(in srgb, var(--mb-color-primary) 18%, var(--be-line)); animation: be-pop-k .35s cubic-bezier(.2,.8,.2,1); }
.cs-reco-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.cs-reco-card__top strong { display: block; font: 600 1.1rem var(--mb-font-display); margin-top: .15rem; }
.cs-reco-card__top strong::first-letter, .cs-slot b::first-letter { text-transform: uppercase; }
.cs-reco-card .be-sub { margin: .45rem 0 .6rem; }
.cs-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .4rem; }
.cs-slot { display: grid; gap: .1rem; padding: .5rem .6rem; border: 1px solid var(--be-line); border-radius: .65rem; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.cs-slot b { font-size: .76rem; }
.cs-slot small { font-size: .68rem; color: var(--mb-color-muted); }
.cs-slot[aria-pressed="true"] { border-color: var(--mb-color-primary); background: var(--mb-color-primary-soft); }
.cs-heat { display: grid; gap: 2px; margin-top: .7rem; }
.cs-heat__row { display: grid; grid-template-columns: .9rem repeat(17, 1fr); gap: 2px; align-items: center; }
.cs-heat__row span { font-size: .6rem; color: var(--mb-color-muted); }
.cs-heat__row i { height: .55rem; border-radius: 2px; background: color-mix(in srgb, var(--mb-color-primary) calc(var(--a) * 100%), #f1ece9); }
.cs-heat__h i { height: auto; background: none; font-size: .56rem; color: var(--mb-color-muted); font-style: normal; }
.cs-indiv { display: grid; gap: .35rem; padding: .75rem .8rem; border: 1px dashed var(--be-line); border-radius: .85rem; margin-bottom: 1rem; }
.cs-indiv .be-sub { margin: 0; }
.cs-window { display: flex; align-items: center; gap: .6rem; }
.cs-window[hidden] { display: none; }
.cs-window .mb-select { max-width: 10rem; }
.cs-go { display: flex; justify-content: flex-end; margin-top: .2rem; }
.cs-go__btn { min-width: 60%; justify-content: center; text-transform: none; }
[data-golabel]::first-letter { text-transform: uppercase; }
@media (max-width: 760px) { .cs-modes { grid-template-columns: 1fr; } .cs-go__btn { width: 100%; } }

/* ── Test A/B de l'objet ─────────────────────────────────────────────── */
.ab { margin-top: 1rem; padding: .85rem; border: 1px dashed var(--be-line); border-radius: .9rem; transition: border-color .2s, background .2s; }
.ab.is-on { border-style: solid; border-color: color-mix(in srgb, var(--mb-color-primary) 30%, var(--be-line)); background: color-mix(in srgb, var(--mb-color-primary) 3%, #fff); }
.ab__toggle { align-items: flex-start; }
.ab__toggle b { display: block; font-size: .88rem; }
.ab__toggle small { display: block; color: var(--mb-color-muted); font-size: .74rem; font-weight: 400; }
.ab__body { display: grid; gap: .9rem; margin-top: .8rem; animation: be-pop-k .3s cubic-bezier(.2,.8,.2,1); }
.ab__body[hidden] { display: none; }
.ab__variants { display: grid; gap: .5rem; }
.ab__var { display: flex; align-items: flex-start; gap: .65rem; }
.ab__var[hidden] { display: none; }
.ab__key { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .6rem; background: var(--mb-color-primary); color: #fff; font: 800 .85rem var(--mb-font-body); }
.ab__a { margin: .1rem 0 0; font-size: .88rem; font-weight: 600; }
.ab__fields { display: grid; gap: .35rem; }
.ab__pre { font-size: .82rem; }
.ab__add { justify-self: start; margin-left: 2.65rem; }
.ab__opts { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: .8rem; align-items: start; }
.ab__opts .mb-field { margin: 0; }
.ab__rl { display: flex; justify-content: space-between; }
.ab__rl output { color: var(--mb-color-primary); font-weight: 700; }
.ab__seg { box-shadow: none; flex-wrap: wrap; justify-content: flex-start; display: inline-flex; width: auto; border-radius: .9rem; }
.ab__seg button { font-size: .74rem; }
.ab__note { margin: 0; }
.ab-rep__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-top: .4rem; }
.ab-rep__v { display: grid; gap: .55rem; padding: .85rem; border: 1.5px solid var(--be-line); border-radius: .9rem; background: #fff; transition: border-color .2s, box-shadow .2s; }
.ab-rep__v.is-win, .ab-rep__v.is-lead { border-color: var(--mb-color-primary); box-shadow: 0 10px 26px rgba(120,20,40,.1); }
.ab-rep__v header { display: flex; justify-content: space-between; align-items: center; }
.ab-rep__s { margin: 0; font-weight: 600; font-size: .9rem; }
.ab-rep__m { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.ab-rep__m strong { display: block; font: 700 1.15rem var(--mb-font-display); }
.ab-rep__m small { font-size: .68rem; color: var(--mb-color-muted); }
.ab-rep__bar { height: .4rem; border-radius: 999px; background: #f1ece9; overflow: hidden; }
.ab-rep__bar i { display: block; height: 100%; background: var(--mb-color-primary); border-radius: inherit; transition: width .8s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 860px) { .ab__opts { grid-template-columns: 1fr; } .ab__add { margin-left: 0; } }

/* ── Rodage des serveurs de l'infrastructure ─────────────────────────── */
.ws { display: grid; gap: .45rem; margin-top: .8rem; padding: .75rem; border-radius: .8rem; background: color-mix(in srgb, var(--mb-color-primary) 5%, #fff); border: 1px solid color-mix(in srgb, var(--mb-color-primary) 18%, var(--be-line)); }
.ws--slowed { background: #fff7ec; border-color: #f0c98a; }
.ws--done { background: var(--mb-color-success-soft); border-color: transparent; }
.ws__head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.ws__head span { color: var(--mb-color-muted); }
.ws__bar { height: .45rem; border-radius: 999px; background: #efe8e5; overflow: hidden; }
.ws__bar i { display: block; height: 100%; background: var(--mb-color-primary); border-radius: inherit; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.ws--slowed .ws__bar i { background: #c08a2b; }
.ws--done .ws__bar i { background: #2f7d62; }
.ws .be-sub { margin: 0; }
.ws__days { display: flex; align-items: flex-end; gap: 3px; height: 2.2rem; }
.ws__days span { flex: 1; height: 100%; display: flex; align-items: flex-end; background: #f1ece9; border-radius: 3px; overflow: hidden; }
.ws__days i { display: block; width: 100%; background: #b9a1a6; }
.ws__days .is-up i { background: #2f7d62; }
.ws__days .is-down i { background: #c92a2a; }
.ws__restart { justify-self: start; font-size: .74rem; }
.ws__restart { justify-self: start; font-size: .74rem; border: 0; background: none; padding: 0; color: var(--mb-color-muted); text-decoration: underline; cursor: pointer; }