/* Aperçu du dashboard : le vrai dashboard (données fictives, /demo), en sombre, dans une
   fenêtre aux proportions de squad.so : toute la largeur moins 28 px de chaque côté
   (1440 px au plus), 16:9, 860 px de haut au plus. */
.dash-live { --dl-window:#141311; --dl-bar:#1C1A17; --dl-screen:#141311; --dl-line:rgba(246,241,232,.10); --dl-url:#26231F; --dl-ink:#A9A195; position:relative; min-width:0; margin:0; }
.dl-window { overflow:hidden; border-radius:16px; background:var(--dl-window); box-shadow:0 0 0 1px rgba(26,24,19,.35), 0 2px 4px rgba(26,24,19,.12), 0 40px 70px -36px rgba(26,24,19,.6); }
.dl-bar { display:flex; align-items:center; gap:7px; height:44px; padding:0 16px; background:var(--dl-bar); border-bottom:1px solid var(--dl-line); }
.dl-bar i { width:11px; height:11px; border-radius:50%; background:#FF5F57; }
.dl-bar i:nth-child(2) { background:#FEBC2E; }
.dl-bar i:nth-child(3) { background:#28C840; }
.dl-bar span { margin:0 auto; padding:4px 16px; border-radius:999px; background:var(--dl-url); box-shadow:0 0 0 1px var(--dl-line); font:500 11.5px/1.5 var(--mono, ui-monospace, monospace); letter-spacing:.02em; color:var(--dl-ink); transform:translateX(-27px); }
.dl-screen { position:relative; overflow:hidden; height:min(56vw, 800px); background:var(--dl-screen); }
.dl-iframe { position:absolute; top:0; left:0; border:0; transform-origin:0 0; background:var(--dl-screen); opacity:0; transition:opacity .45s ease; color-scheme:dark; }
.dl-iframe.is-ready { opacity:1; }
/* En attendant la démo : la prise de PlugKit respire au centre. */
.dl-screen::before { content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:radial-gradient(circle, #FB4D17 0 5px, transparent 6px), radial-gradient(circle, transparent 0 11px, rgba(251,77,23,.5) 12px 13px, transparent 14px); animation:dl-attente 1.6s ease-in-out infinite; }
@keyframes dl-attente { 50% { transform:scale(1.12); opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .dl-screen::before { animation:none; } .dl-iframe { transition:none; } }

.dl-hand { position:absolute; top:0; left:0; z-index:2; width:28px; height:34px; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.dl-hand img { display:block; width:100%; height:100%; }

.dl-caption { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 2px 0; color:#8A857A; font-size:13px; line-height:1.45; }
.dl-caption img { flex:none; object-fit:contain; }
.dl-note { margin-left:auto; font-family:var(--mono, ui-monospace, monospace); font-size:11.5px; letter-spacing:.03em; }

/* Téléphone : l'aperçu est une vitrine, « Essayer le dashboard » ouvre la démo en plein écran. */
.dl-try { display:none; position:absolute; inset:0; z-index:3; align-items:flex-end; justify-content:center; padding:0 16px 22px; border:0; background:linear-gradient(to top, var(--dl-screen) 0, rgba(20,19,17,0) 38%); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dl-try span { display:inline-flex; align-items:center; min-height:48px; padding:0 24px; border-radius:999px; background:#FB4D17; color:#FFFFFF; font:700 16px/1 inherit; font-family:inherit; box-shadow:0 10px 24px -10px rgba(251,77,23,.7); }
.dl-try:focus-visible, .dl-close:focus-visible { outline:2px solid #FB4D17; outline-offset:3px; }
.dash-live[data-mode="phone"] .dl-iframe { pointer-events:none; }
.dash-live[data-mode="phone"] .dl-try { display:flex; }
.dash-live[data-mode="phone"] :is(.dl-caption > img, .dl-explore) { display:none; }
.dash-live[data-mode="phone"] .dl-note { margin-left:0; }
.dash-live[data-mode="phone"] .dl-bar { height:32px; gap:5px; padding:0 12px; }
.dash-live[data-mode="phone"] .dl-bar i { width:8px; height:8px; }
.dash-live[data-mode="phone"] .dl-bar span { transform:none; }

/* La démo en plein écran (téléphone). */
.dl-dialog { width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:#141311; overscroll-behavior:contain; }
.dl-dialog::backdrop { background:rgba(26,24,19,.7); }
.dl-dialog-frame { display:block; width:100%; height:100%; border:0; }
/* « Fermer » reprend l'orange d'« Essayer le dashboard ». */
.dl-close { position:fixed; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); z-index:1; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 8px 0 16px; border:0; border-radius:999px; background:#FB4D17; color:#FFFFFF; font:700 14px/1 inherit; font-family:inherit; cursor:pointer; box-shadow:0 10px 24px -10px rgba(251,77,23,.7); }
.dl-close span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22); font-size:18px; }
.dl-close:focus-visible { outline-color:#FFFFFF; }

/* Place dans la mise en page : à côté du texte sur ordinateur, sous le titre sur téléphone. */
@container (min-width: 900px) {
  .frame.frame--scene .b4 > .dash-live { grid-column:2; grid-row:1 / -1; align-self:center; }
  .frame.frame--scene .is-miroir > .dash-live { grid-column:1; }
}
/* Accueil français : pleine largeur comme squad.so, dès 1024 px. */
.frame.frame--scene[data-direction-active="true"] .b4 > .dash-live { margin-top:8px; }
@container (min-width: 1024px) {
  .frame.frame--scene[data-direction-active="true"] .b4 > .dash-live { --dl-width:calc(min(100cqw, 1440px) - 56px); width:var(--dl-width); margin-inline:calc((100% - var(--dl-width)) / 2); }
}