/* Le tableau de bord compris dans l'abonnement (#demo-depenses).
   L'ordinateur, fermé et centré, s'ouvre seul quand la scène est à l'écran ; les modules
   du forfait Gestion arrivent un à un, chacun avec son geste ; puis le portable se range
   et le texte prend sa place. Transform et opacity seulement ; rien ne tourne hors écran.
   Sans script, mouvement réduit ou petite hauteur : l'état final, immobile. */

/* ---------- Écran : le tableau de bord ---------- */
.tdb { height: 100%; font-size: 2.2cqw; }
.tdb-ecran { height: 100%; display: flex; flex-direction: column; }
.tdb-barre { flex: none; }
.tdb-forfait { font-size: 1.9cqw; }
.tdb-modules { flex: 1; min-height: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.6cqw; padding: 2.8cqw 3cqw 3.2cqw; }
.tdb-module { position: relative; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto 2.9cqw; justify-items: start; padding: 1.8cqw 1.3cqw 1.4cqw; border: 1px solid var(--app-line); border-radius: .9cqw; background: var(--app-surface); }
.tdb-icone { position: relative; display: block; width: 5.6cqw; aspect-ratio: 1; color: var(--app-accent); }
.tdb-icone svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tdb-icone::after { content: ''; position: absolute; inset: -40%; border: 1px solid var(--app-accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.tdb-nom { grid-row: 3; font-weight: 600; font-size: 2.25cqw; line-height: 1.2; }
.tdb-etat { grid-row: 4; align-self: end; padding: .3cqw .8cqw; border-radius: .9cqw; font-size: 1.65cqw; line-height: 1.25; white-space: nowrap; color: var(--app-amber); background: oklch(29% .035 80); }
.tdb-pret { color: var(--app-accent); background: oklch(31% .06 183); }

/* Écran étroit (téléphone) : la liste des modules sur deux colonnes, un point pour ce qui attend. */
@container (max-width: 520px) {
  .tdb { font-size: 3.3cqw; }
  .tdb-barre { height: 10cqw; gap: 2.6cqw; font-size: 3cqw; }
  .tdb-barre > span:first-child { font-size: 4.4cqw; }
  .tdb-barre > strong { font-size: 3.6cqw; }
  .tdb-forfait { font-size: 2.9cqw; }
  .tdb-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1.2cqw 2cqw; padding: 2.4cqw 3.4cqw 3cqw; }
  .tdb-module { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: 2.2cqw; padding: 0 2.4cqw; border-radius: 1.2cqw; }
  .tdb-icone { width: 4.8cqw; }
  .tdb-nom { grid-row: auto; font-size: 3.5cqw; white-space: nowrap; }
  /* Audit F-48 : trop petits pour porter leur mot, les états ne se réduisent pas à une pastille de
     couleur ; la mention « Des relances prêtes, des dépenses à valider » les nomme. */
  .tdb-etat { display: none; }
}

/* ---------- Texte : trois mentions courtes ---------- */
.tdb-mentions { display: grid; gap: 14px; margin: 0; max-width: 30rem; }
.tdb-mentions li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.45; color: rgb(243 238 229 / .86); }
.tdb-mentions strong { font-weight: 700; white-space: nowrap; }
.tdb-picto { width: 26px; height: 26px; margin-top: calc(.725em - 13px); fill: none; stroke: var(--turquoise-pale); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .tdb-mentions { gap: 10px; }
  .tdb-mentions li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; font-size: 1.0625rem; }
  .tdb-picto { width: 22px; height: 22px; margin-top: calc(.725em - 11px); }
}

/* Composition statique : le dessin en perspective du portable déborde de sa boîte, on le resserre. */
@media (min-width: 761px) { #demo-depenses .device-laptop { width: 88%; margin-inline: auto; } }

/* ---------- Scène plein écran, jouée seule à l'arrivée ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* L'entrée générique des scènes ne s'applique pas ici : la scène a sa chorégraphie. */
  .benefits-motion #demo-depenses .benefit-copy > *, .benefits-motion #demo-depenses .benefit-visual { opacity: 1; transform: none; transition: none; }

  #demo-depenses.is-cinematic { min-height: 100svh; }
  #demo-depenses.is-cinematic .benefit-stage { position: relative; display: block; height: 100svh; min-height: 0; overflow: clip; padding-top: clamp(24px, 6svh, 64px); padding-bottom: var(--dock-reserve, 116px); }
  #demo-depenses.is-cinematic .benefit-layout { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: center; }
  /* La hauteur disponible au-dessus de la bulle fixe la taille du portable. */
  #demo-depenses.is-cinematic .benefit-visual { align-self: stretch; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  #demo-depenses.is-cinematic .device-laptop { flex: none; width: min(88cqw, calc((100cqh - 48px) * 1.25)); }
  #demo-depenses.is-cinematic .benefit-visual figcaption { margin-top: 20px; }

  /* Pose de départ écrite par le script : fermé, centré. Le capot s'ouvre, puis le portable se range. */
  #demo-depenses.dash-live .device-laptop { transition: transform .9s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
  #demo-depenses.dash-live.dash-place .device-laptop { transition: transform .8s cubic-bezier(.55, 0, .25, 1); }
  #demo-depenses.dash-live .laptop-lid { transform: rotateX(-90deg); transition: transform .9s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
  #demo-depenses.dash-live.dash-ouvert .laptop-lid { transform: rotateX(8deg); }
  #demo-depenses.dash-live .capture-desktop { opacity: 0; transition: opacity .45s ease-out .2s; }
  #demo-depenses.dash-live.dash-ouvert .capture-desktop { opacity: 1; }
  #demo-depenses.dash-fini .device-laptop, #demo-depenses.dash-fini .laptop-lid { will-change: auto; }

  /* Les modules arrivent un à un ; chaque icône fait son geste en se posant. */
  #demo-depenses.dash-live .tdb-barre { opacity: 0; transition: opacity .35s ease-out; }
  #demo-depenses.dash-live .tdb-module { opacity: 0; transform: translateY(2.4cqw) scale(.9); transition: opacity .25s ease-out, transform .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
  #demo-depenses.dash-live .tdb-etat { opacity: 0; transform: translateY(.8cqw); transition: opacity .25s ease-out, transform .4s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
  #demo-depenses.dash-live .tdb-barre.on, #demo-depenses.dash-live .tdb-module.on, #demo-depenses.dash-live .tdb-etat.on { opacity: 1; transform: none; }
  #demo-depenses.dash-live .tdb-module.on .tdb-icone::after { animation: tdb-anneau .6s ease-out .05s both; }
  #demo-depenses.dash-live .tdb-forfait.on { animation: tdb-appui .5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
  #demo-depenses.dash-live .m { transform-box: fill-box; transform-origin: center; }
  #demo-depenses.dash-live .tdb-module.on .m { animation: tdb-trait .55s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) .08s both; }
  #demo-depenses.dash-live .tdb-clients .m, #demo-depenses.dash-live .tdb-facturation .m { transform-origin: left center; }
  #demo-depenses.dash-live .tdb-fournisseurs.on .m { animation-name: tdb-tombe; }
  #demo-depenses.dash-live .tdb-agenda.on .m { animation-name: tdb-pop; }
  #demo-depenses.dash-live .tdb-depenses.on .m { animation-name: tdb-monte; }
  #demo-depenses.dash-live .tdb-obligations .m, #demo-depenses.dash-live .tdb-finances .m { transform-origin: center bottom; }
  #demo-depenses.dash-live .tdb-obligations.on .m, #demo-depenses.dash-live .tdb-finances.on .m { animation-name: tdb-pousse; }
  #demo-depenses.dash-live .tdb-finances.on .m:nth-of-type(2) { animation-delay: .16s; }
  #demo-depenses.dash-live .tdb-finances.on .m:nth-of-type(3) { animation-delay: .24s; }
  #demo-depenses.dash-live .tdb-comptable .m { transform-box: view-box; transform-origin: 8px 15.5px; }
  #demo-depenses.dash-live .tdb-comptable.on .m { animation-name: tdb-tourne; animation-duration: .6s; }
  #demo-depenses.dash-live .tdb-copilote.on .m { animation: tdb-onde .7s ease-in-out .1s both; }

  /* Le texte arrive quand le portable se range. Le correctif F-18 de l'audit (928d565) l'affichait dès
     l'arrivée : il passait alors sous le portable centré et agrandi. Choix de Joris (2 octobre 2026) :
     la chorégraphie d'origine. */
  #demo-depenses.dash-live .benefit-copy [data-t] { opacity: 0; transform: translateX(28px); transition: opacity .45s ease-out, transform .65s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
  #demo-depenses.dash-live .benefit-visual figcaption[data-t] { opacity: 0; transition: opacity .4s ease-out; }
  #demo-depenses.dash-live .benefit-copy [data-t].on, #demo-depenses.dash-live .benefit-visual figcaption[data-t].on { opacity: 1; transform: none; }

  /* Réponse de la bulle ouverte par-dessus : tout s'arrête dessous. Remise à zéro : sans transition. */
  #demo-depenses.dash-pause *, html.calque-ouvert #demo-depenses * { animation-play-state: paused !important; }
  #demo-depenses.dash-fige, #demo-depenses.dash-fige * { transition: none !important; }
  #demo-depenses.dash-mesure .device-laptop { transform: none !important; }
  #demo-depenses.dash-mesure .laptop-lid { transform: rotateX(8deg) !important; }

  @media (max-width: 760px) {
    #demo-depenses.is-cinematic .benefit-stage { padding-top: clamp(20px, 4svh, 40px); }
    #demo-depenses.is-cinematic .benefit-layout { grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 3svh, 28px); align-items: stretch; }
    #demo-depenses.is-cinematic .benefit-copy h2 { margin-bottom: 16px; }
    /* Le portable prend presque toute la largeur de l'écran : son dessin en perspective déborde de sa boîte. */
    #demo-depenses.is-cinematic .benefit-visual { margin-inline: calc(8px - var(--gutter)); }
    #demo-depenses.is-cinematic .device-laptop { width: min(96cqw, calc((100cqh - 36px) * 1.25)); }
    #demo-depenses.is-cinematic .benefit-visual figcaption { margin-top: 14px; }
    #demo-depenses.dash-live .benefit-copy [data-t] { transform: translateY(14px); }
  }
  /* Téléphone : le prix d'abord, puis ce qui vous attend ; peu haut, le prix seul (audit F-07 : sur un iPhone
     dans Safari, le prix était la ligne masquée). Le portable garde sa place. */
  @media (max-width: 760px) and (max-height: 900px) {
    #demo-depenses.is-cinematic .tdb-mentions li:nth-child(3) { display: none; }
  }
  @media (max-width: 760px) and (max-height: 760px) {
    #demo-depenses.is-cinematic #benefit-saisie { font-size: 1.875rem; }
    #demo-depenses.is-cinematic .tdb-mentions li:nth-child(n + 2) { display: none; }
  }
}

@keyframes tdb-trait { from { transform: scaleX(0); } }
@keyframes tdb-pousse { from { transform: scaleY(0); } }
@keyframes tdb-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes tdb-tombe { from { opacity: 0; transform: translateY(-4px); } }
@keyframes tdb-monte { from { opacity: 0; transform: translateY(4px); } }
@keyframes tdb-tourne { from { transform: rotate(-40deg); } }
@keyframes tdb-onde { 0% { transform: scaleY(.2); } 35% { transform: scaleY(1.3); } 65% { transform: scaleY(.55); } 100% { transform: none; } }
@keyframes tdb-anneau { from { opacity: .55; transform: scale(.55); } to { opacity: 0; transform: scale(1.35); } }
@keyframes tdb-appui { 0%, 100% { transform: none; } 45% { transform: scale(1.08); } }