/* Preview de finition, sur le socle de la PR 105.
   Les textes, les illustrations et les scénarios restent ceux de la page. */
.frame--scene {
  --fin-contour: rgba(26, 24, 19, .11);
  --fin-fond: #f0eeea;
  --fin-ombre: 0 2px 5px rgba(26, 24, 19, .04), 0 18px 44px -28px rgba(26, 24, 19, .32);
  --fin-rayon: 20px;
}

/* Les surfaces utilisent le même bord et une ombre diffuse. */
.frame.frame--scene .pa-nav { border-bottom-color: var(--fin-contour); }
.frame.frame--scene .ia-a {
  border-radius: var(--fin-rayon);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset, var(--fin-ombre);
}
.frame.frame--scene :is(.bxd-app, .dash, .dv) {
  border-radius: var(--fin-rayon);
  box-shadow: var(--fin-ombre);
}
.frame.frame--scene .b4-flux li:not(.is-vm) {
  box-shadow: 0 0 0 1px var(--fin-contour), 0 4px 12px -8px rgba(26, 24, 19, .2);
}
.frame.frame--scene .b4-flux li.is-vm {
  box-shadow: inset 0 0 0 1px rgba(92, 214, 245, .34), 0 10px 26px -20px rgba(6, 23, 42, .55);
}
.frame.frame--scene .bxd-brancher {
  background: rgba(255, 255, 255, .5);
  border-color: var(--fin-contour);
  color: #1a1813;
}
.frame.frame--scene .bxd-brancher summary span { color: #5c584f; }
/* Un seul accès pour les autres clients, dont le guide reste dans le dashboard. */
.bxd-brancher:has([data-tab="autres"][aria-selected="true"]) summary span { display: none; }
.bxa-autres { padding: 18px 16px 20px; font-size: 14px; line-height: 1.5; }
.bxa-autres p { margin: 0 0 10px; }
.bxa-autres p:first-child { color: #f3f0ea; font-weight: 600; }
.bxa-autres a { color: #f3f0ea; text-decoration-color: #fb4d17; text-underline-offset: 4px; }

.frame.frame--scene .pick { border-radius: 12px; }

/* Une hiérarchie commune aux chapitres, sans modifier le titre validé. */
.frame.frame--scene :is(.bx-kicker, .b4-kicker, .b6-kicker, .b7-kicker, .b5-kicker) {
  color: #706b61;
  letter-spacing: .11em;
}
.frame.frame--scene :is(.bx-title, .b4-title, .b6-title, .b7-title, .b5-title) {
  text-wrap: balance;
  line-height: 1.12;
  letter-spacing: -.028em;
}
.frame.frame--scene :is(.bxd-note, .b6-lede, .b7-lede, .b5-lede) {
  line-height: 1.65;
  text-wrap: pretty;
}

/* Les chapitres alternent sur des fonds proches, séparés par un filet. */
.frame.frame--scene :is(.bxd, .bxv, .b4, .b6, .b7, .b5) {
  border-top: 1px solid var(--fin-contour);
}
.frame.frame--scene :is(.b4, .b7) { background: var(--fin-fond); }

/* Les contrôles restent familiers, avec une réponse plus nette au survol. */
.frame.frame--scene .pa-btn {
  box-shadow: inset 0 0 0 1px rgba(26, 24, 19, .55), 0 3px 8px -5px rgba(26, 24, 19, .2);
}
.frame.frame--scene :is(.pa-btn, .pa-cta, .bx-cta, .b5-cta) {
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.frame.frame--scene .qz2-carte { border-radius: var(--fin-rayon); }
.frame.frame--scene .qz2-carte:not(.qz2-dos, .qz2-fin) {
  background: #fff;
  box-shadow: 0 0 0 1px var(--fin-contour), var(--fin-ombre);
}
.frame.frame--scene .qz2-opt {
  border-width: 1px;
  border-radius: 12px;
  background: #fff;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.frame.frame--scene .qz2-opt[aria-checked="true"] { background: #fce9e2; }
.frame.frame--scene .bxd-tabs button[aria-selected="true"] { background: rgba(251, 77, 23, .07); }
.frame.frame--scene .pied { padding-block: 48px 32px; }

@media (hover: hover) and (pointer: fine) {
  .frame.frame--scene .pa-btn:hover {
    background: #fff6f1;
    box-shadow: inset 0 0 0 1px #fb4d17, 0 8px 18px -10px rgba(251, 77, 23, .3);
  }
  .frame.frame--scene :is(.pa-cta, .bx-cta, .b5-cta):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(26, 24, 19, .4);
  }
  .frame.frame--scene .qz2-opt:hover { border-color: #fb4d17; background: #fff8f3; }
}

@container (min-width: 900px) {
  /* Une largeur de lecture bornée, y compris sur un grand moniteur. */
  .frame.frame--scene > * { --g: max(40px, 6cqw, calc((100cqw - 1360px) / 2)); }
  .frame.frame--scene :is(.bxd, .bxv, .b4, .b6, .b7, .b5) {
    padding-block: clamp(88px, 8.5cqw, 128px);
  }
  .frame.frame--scene :is(.bx-title, .b4-title, .b6-title, .b7-title, .b5-title) {
    font-size: clamp(36px, 3.4cqw, 50px);
    max-width: 14em;
    margin-bottom: 24px;
    text-wrap: balance;
  }
  .frame.frame--scene :is(.bxd-note, .b6-lede, .b7-lede, .b5-lede) {
    font-size: clamp(17px, 1.28cqw, 20px);
    max-width: 29em;
  }
  .frame.frame--scene :is(.bx-kicker, .b4-kicker, .b6-kicker, .b7-kicker, .b5-kicker) {
    font-size: 12px;
    margin-bottom: 20px;
  }
  .frame.frame--scene .b4-flux { max-width: 480px; }
  .frame.frame--scene .qz-card { width: 100%; max-width: 520px; justify-self: center; }
  .frame.frame--scene .qz2-carte:not(.qz2-cb) { padding: 28px; gap: 18px; }
  .frame.frame--scene .qz2-cb button { padding-inline: 28px; padding-bottom: 24px; }
  .frame.frame--scene .b5-note { line-height: 1.6; }
}

@container (max-width: 899px) {
  .frame.frame--scene :is(.bxd, .bxv, .b4, .b6, .b7, .b5) { padding-block: 64px; }
  .frame.frame--scene :is(.bx-title, .b4-title, .b6-title, .b7-title, .b5-title) {
    font-size: clamp(30px, 7.8cqw, 40px);
    margin-bottom: 22px;
  }
  .frame.frame--scene :is(.bx-kicker, .b4-kicker, .b6-kicker, .b7-kicker, .b5-kicker) {
    margin-bottom: 16px;
  }
  .frame.frame--scene :is(.bxd-note, .b6-lede, .b7-lede, .b5-lede) { font-size: 17px; }
  .frame.frame--scene .bxd-app { margin-top: 28px; }
  .frame.frame--scene :is(.b6-mur, .qz-card, .b5-ticket) { margin-top: 28px; }
  .frame.frame--scene .pied { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame.frame--scene :is(.pa-btn, .pa-cta, .bx-cta, .b5-cta, .qz2-opt) { transition: none; }
  .frame.frame--scene :is(.pa-cta, .bx-cta, .b5-cta):hover { transform: none; }
}