/* ═══ Démo du hero (25/10) : trois chapitres sur de vraies captures de l'éditeur en pleine résolution.
   Tout ce qui bouge (curseur, saisie, sélection, réponses de l'agent, bouton modifié, pull request)
   est du HTML posé sur l'image : net à toutes les tailles. La scène fait 1724 × 985 et se met à
   l'échelle de son cadre (demo.js). */
/* Centrage sans transform : l'animation d'entrée (.up) pose son propre transform et décalait la démo (26/10). */
.p-manager .dm-demo { --dm-w: min(1300px, calc(100vw - 32px)); width: var(--dm-w); margin: calc(var(--espace-grille) * 2.2) 0 0 calc((100% - var(--dm-w)) / 2); position: relative; text-align: left; }
.p-manager .dm-demo::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 16%; bottom: -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 166, 145, .26), rgba(169, 203, 235, .1) 60%, transparent); filter: blur(40px); pointer-events: none; }
.p-manager .dm-demo-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.p-manager .dm-prompt { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 16px 8px 10px; border-radius: var(--r-pill); background: rgba(249, 242, 237, .06); border: 1px solid var(--stroke-weak); color: var(--encre); font-size: 14.5px; line-height: 1.3; }
.p-manager .dm-prompt .axolo { flex: none; }
.p-manager .dm-prompt-texte { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-manager .dm-onglets { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(249, 242, 237, .06); border: 1px solid var(--stroke-weak); }
.p-manager .dm-onglets button { position: relative; overflow: hidden; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-weak); background: none; border: 0; border-radius: var(--r-pill); padding: 7px 14px; cursor: pointer; transition: color var(--motion-micro) ease, background var(--motion-micro) ease; }
.p-manager .dm-onglets button:hover { color: var(--encre); }
.p-manager .dm-onglets button[aria-selected="true"] { background: var(--peche); color: var(--encre-sur-peche); }
.p-manager .dm-onglets button i { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(23, 23, 23, .35); transform: scaleX(var(--p, 0)); transform-origin: left; }
.p-manager .dm-cadre { position: relative; aspect-ratio: 1300 / 743; border-radius: 16px; overflow: hidden; border: 1px solid rgba(249, 242, 237, .16); background: #191919; box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 40px 120px -30px rgba(255, 166, 145, .32), 0 24px 60px rgba(0, 0, 0, .55); }
.p-manager .dm-legende { margin-top: 14px; text-align: center; color: var(--text-weak); font-size: var(--type-small); }
.p-manager .dm-legende b { color: var(--encre); font-weight: 600; }

/* La scène, à taille fixe, mise à l'échelle par --k */
.dm-scene { position: absolute; left: 0; top: 0; width: 1300px; height: 743px; transform: scale(var(--k, .7)); transform-origin: 0 0; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; color: #ececee; overflow: hidden; }
.dm-chap { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; }
.dm-chap.on { opacity: 1; }
.dm-chap[hidden] { display: block; visibility: hidden; }
.dm-bg { position: absolute; inset: 0; width: 1300px; height: 743px; opacity: 0; }
.dm-bg.base { opacity: 1; }
.dm-cur { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 30; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.dm-clic { position: absolute; left: -13px; top: -13px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 166, 145, .95); opacity: 0; }
.dm-mask { position: absolute; }
.dm-ring { position: absolute; border: 2px solid #ffa691; border-radius: 9px; box-shadow: 0 0 0 4px rgba(255, 166, 145, .18); opacity: 0; pointer-events: none; }
.dm-toast { position: absolute; padding: 9px 14px; border-radius: 10px; background: #f4f4f6; color: #1b1b1d; font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); opacity: 0; white-space: nowrap; }
.dm-toast b { font-weight: 650; }
.dm-key { position: absolute; display: flex; gap: 6px; opacity: 0; }
.dm-key span { min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 8px; background: #2e2e33; border: 1px solid #47474d; border-bottom-width: 3px; font-size: 15px; color: #f2f2f4; }
.dm-type { position: absolute; font-size: 15px; color: #f3f3f5; white-space: nowrap; }
.dm-caret { display: inline-block; width: 1.5px; height: 1.05em; background: #ffa691; vertical-align: -2px; margin-left: 1px; }

/* Chapitre « Agent » : le panneau du chat redessiné */
.dm-panel { position: absolute; background: #212123; border: 1px solid #2c2c2f; box-shadow: 0 0 0 6px #191919; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
.dm-tabs { display: flex; gap: 6px; padding: 12px 12px 10px; border-bottom: 1px solid #2c2c2f; }
.dm-tab { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; color: #9c9ca3; }
.dm-tab.on { background: #323236; color: #f2f2f4; }
.dm-conv { margin: 12px 12px 6px; padding: 8px 10px; border-radius: 9px; background: #2a2a2d; font-size: 12px; color: #d8d8dc; }
.dm-body { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.dm-who { font-size: 10.5px; color: #8b8b93; margin-top: 4px; }
.dm-bubble { background: #2e2e32; border-radius: 12px; padding: 9px 11px; font-size: 12px; line-height: 1.45; color: #f0f0f3; margin-top: 3px; }
.dm-axo { font-size: 10.5px; color: #d9a2ff; margin-top: 6px; }
.dm-answer { font-size: 12px; line-height: 1.45; color: #dcdce0; margin-top: 3px; }
.dm-steps { display: flex; flex-direction: column; margin-left: 2px; }
.dm-step { display: flex; align-items: center; gap: 8px; padding: 5px 0 5px 10px; border-left: 1.5px solid #3a3a3f; font-size: 12px; opacity: 0; }
.dm-step .n { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #e6e6ea; }
.dm-step .d { color: #8b8b93; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.dm-step .s { width: 14px; height: 14px; flex: none; display: grid; place-items: center; }
.dm-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #ffa691; border-right-color: transparent; }
.dm-ok { color: #7fd1a4; font-size: 12px; }
.dm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 12px; }
.dm-chip { font-size: 11px; padding: 4px 9px; border-radius: 99px; background: #2e2e32; color: #d0d0d5; }
.dm-composer { margin: 10px 12px 12px; border: 1px solid #3a3a40; border-radius: 12px; background: #2a2a2d; padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.dm-input { font-size: 12.5px; color: #f0f0f3; min-height: 34px; line-height: 1.4; }
.dm-input.ph { color: #77777f; }
.dm-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #9c9ca3; }
.dm-send { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #4a4a50; display: grid; place-items: center; color: #cfcfd4; font-size: 13px; }
.dm-send.go { background: #ffa691; border-color: #ffa691; color: #1b1b1b; }
.dm-mini { width: 22px; height: 16px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 40% 35%, #ffe6d8, #ffa691 55%, #e9837a); }
.dm-cover { position: absolute; background: #1e1e1e; }
.dm-skel { position: absolute; inset: 10px 6px; border-radius: 10px; border: 1px dashed #4a4a50; overflow: hidden; opacity: 0; }
.dm-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 166, 145, .16) 50%, transparent 70%); transform: translateX(var(--sh, -100%)); }
.dm-skel b { position: absolute; left: 10px; top: 10px; font-size: 13px; font-weight: 500; color: #b9b9c0; }
.dm-skel i { position: absolute; left: 12px; right: 12px; height: 12px; border-radius: 6px; background: #2c2c30; }
.dm-skel i:nth-of-type(1) { top: 46px; height: 120px; border-radius: 10px; }
.dm-skel i:nth-of-type(2) { top: 182px; right: 40px; }
.dm-skel i:nth-of-type(3) { top: 204px; right: 70px; }
.dm-tag { position: absolute; font-size: 12.5px; padding: 3px 8px; border-radius: 99px; background: rgba(255, 166, 145, .14); color: #ffb8a6; border: 1px solid rgba(255, 166, 145, .35); opacity: 0; white-space: nowrap; }

/* Chapitre « Design system » : la demande à l'Axolo, le bouton modifié, la pull request */
.dm-pop { position: absolute; left: 948px; top: 142px; width: 314px; padding: 12px; border-radius: 14px; background: #262629; border: 1px solid #3a3a40; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(-6px); }
.dm-pop h4 { font-size: 12px; font-weight: 600; color: #d9a2ff; margin-bottom: 8px; }
.dm-pop .dm-input { background: #1f1f22; border: 1px solid #3a3a40; border-radius: 9px; padding: 8px 10px; min-height: 52px; }
.dm-pop .dm-steps { margin-top: 10px; }
.dm-ready { margin-top: 10px; padding-top: 10px; border-top: 1px solid #34343a; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #b8b8be; opacity: 0; }
.dm-ready b { color: #f0f0f3; font-weight: 600; }
.dm-btn { padding: 7px 11px; border-radius: 8px; background: #ffa691; color: #1b1b1b; font-weight: 650; font-size: 12px; white-space: nowrap; }
.dm-cell { position: absolute; background: #fdfdfd; }
.dm-b { position: absolute; display: grid; place-items: center; background: #0b0b0b; color: #fff; font-weight: 600; letter-spacing: -.005em; }
.dm-b.focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6b6b6b; }
.dm-b.dis { background: #8c8c8c; }
.dm-pr { position: absolute; left: 948px; top: 142px; width: 314px; border-radius: 14px; background: #f6f8fa; color: #1f2328; border: 1px solid #d0d7de; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); overflow: hidden; opacity: 0; transform: translateY(8px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.dm-pr-tete { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #d0d7de; font-size: 12px; color: #59636e; }
.dm-pr-tete svg { flex: none; }
.dm-pr-corps { padding: 12px; display: grid; gap: 8px; }
.dm-pr-titre { font-size: 14px; font-weight: 600; line-height: 1.3; }
.dm-pr-titre span { color: #59636e; font-weight: 400; }
.dm-pr-etat { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 99px; background: #1f883d; color: #fff; font-size: 12px; font-weight: 600; }
.dm-pr-ligne { font-size: 12px; color: #59636e; }
.dm-pr-ligne b { color: #1f2328; font-weight: 600; }
.dm-pr-diff { font-family: ui-monospace, Menlo, monospace; font-size: 11px; border: 1px solid #d0d7de; border-radius: 6px; overflow: hidden; background: #fff; }
.dm-pr-diff div { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-pr-diff .m { background: #ffebe9; color: #82071e; }
.dm-pr-diff .p { background: #dafbe1; color: #116329; }

@media (max-width: 640px) {
  .p-manager .dm-demo-tete { justify-content: center; }
  .p-manager .dm-onglets { width: 100%; justify-content: center; }
  .p-manager .dm-onglets button { padding: 7px 9px; font-size: 12px; }
}

/* 26/10 (v4) : scène de 1300 × 743, captures à 1300 px ; tailles au pixel près de l'éditeur */
.dm-lay { position: absolute; inset: 0; }
.dm-mask, .dm-back { position: absolute; }
.dm-cover { position: absolute; background: #1e1e1e; border-radius: 6px; }
.dm-skel { inset: 4px; border-radius: 6px; }
.dm-skel b { left: 6px; top: 5px; font-size: 7.5px; }
.dm-skel i { position: absolute; left: 6px; right: 6px; height: 6px; border-radius: 3px; background: #2c2c30; }
.dm-skel i:nth-of-type(1) { top: 20px; height: 62px; border-radius: 5px; }
.dm-skel i:nth-of-type(2) { top: 90px; right: 20px; }
.dm-skel i:nth-of-type(3) { top: 101px; right: 34px; }
.dm-tag { position: absolute; font-size: 9.5px; padding: 2px 7px; }
.dm-score { position: absolute; width: 232px; height: 132px; font-size: 11px; line-height: 13px; color: #f5f5f7; }
.dm-score span { position: absolute; left: 0; white-space: nowrap; }
.dm-sel { position: absolute; border: 1.5px solid var(--c); opacity: 0; pointer-events: none; }
.dm-sel i { position: absolute; width: 6px; height: 6px; background: #fff; border: 1.5px solid var(--c); }
.dm-sel i:nth-of-type(1) { left: -4px; top: -4px; } .dm-sel i:nth-of-type(2) { right: -4px; top: -4px; } .dm-sel i:nth-of-type(3) { left: -4px; bottom: -4px; } .dm-sel i:nth-of-type(4) { right: -4px; bottom: -4px; }
.dm-sel b { position: absolute; left: -1.5px; top: -19px; padding: 2px 6px; border-radius: 4px 4px 4px 0; background: var(--c); color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; }
.dm-line { position: absolute; background: #0d99ff; border-radius: 2px; box-shadow: 0 0 0 2px rgba(13, 153, 255, .25); opacity: 0; }
.dm-ghost { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #2c2c30; border: 1px solid #0d99ff; color: #f2f2f4; font-size: 12px; font-weight: 500; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); opacity: 0; z-index: 25; }
.dm-dia { width: 8px; height: 8px; border: 1.5px solid #c8a8ff; transform: rotate(45deg); }
.dm-other { position: absolute; left: 0; top: 0; z-index: 28; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.dm-other b { position: absolute; left: 14px; top: 16px; padding: 3px 8px; border-radius: 4px 10px 10px 10px; background: #ff5ea8; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dm-key { display: flex; } .dm-key span { min-width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }
.dm-toast { font-size: 11.5px; padding: 7px 11px; }
.dm-ring { border-radius: 12px; border-width: 1.5px; }
.dm-badge { position: absolute; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 99px; background: #2a1d10; border: 1px solid #f0a14a; color: #ffcf96; font-size: 10.5px; font-weight: 600; white-space: nowrap; opacity: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.dm-badge b { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: #f0a14a; color: #1d1206; font-size: 10px; }
.dm-ds { position: absolute; padding: 2px 8px; font-size: 10.5px !important; border-radius: 99px; font-size: 11px; font-weight: 650; background: rgba(240, 161, 74, .16); color: #ffb866; border: 1px solid rgba(240, 161, 74, .45); }
.dm-ds.ok { background: rgba(127, 209, 164, .16); color: #8fe0b3; border-color: rgba(127, 209, 164, .5); }
.dm-panel { box-shadow: none; border-radius: 16px; }
.dm-panel .dm-tab, .dm-panel .dm-conv, .dm-panel .dm-bubble, .dm-panel .dm-answer, .dm-panel .dm-input { font-size: 12px; }
.dm-panel .dm-step { font-size: 11.5px; }
.dm-panel .dm-step .n { font-size: 11px; }
.dm-panel .dm-step .d { font-size: 10.5px; }
.dm-panel .dm-who, .dm-panel .dm-axo, .dm-panel .dm-chip, .dm-panel .dm-foot { font-size: 10.5px; }
.dm-note { position: absolute; font-size: 6.3px; color: #6e6e73; white-space: nowrap; }
.dm-b { position: absolute; display: grid; place-items: center; font-family: inherit; line-height: 1; white-space: nowrap; box-sizing: border-box; }
.dm-pop { width: 330px; font-size: 12px; padding: 10px; }
.dm-pop h4 { font-size: 12px; } .dm-pop .dm-input { font-size: 12px; min-height: 44px; }
.dm-pop .dm-step { font-size: 11px; } .dm-pop .dm-step .n { font-size: 10.5px; } .dm-pop .dm-step .d { font-size: 10px; }
.dm-ready { font-size: 11px; } .dm-btn { font-size: 11.5px; padding: 6px 10px; }
.dm-pr { width: 300px; }
.dm-pr-corps { gap: 6px; padding: 10px; }
.dm-pr-titre { font-size: 13px; } .dm-pr-ligne, .dm-pr-tete, .dm-pr-etat { font-size: 11px; } .dm-pr-tete { padding: 8px 10px; }
.dm-pr-diff { font-size: 10px; }

/* 26/10 : en-tête de la démo sur une ligne (le prompt se coupe s'il le faut), moins d'air au-dessus du surtitre */
@media (min-width: 900px) { .p-manager .dm-demo-tete { flex-wrap: nowrap; } .p-manager .dm-prompt { flex: 0 1 auto; } .p-manager .dm-onglets { flex: none; } }
.p-manager .dm-hero { padding-top: clamp(20px, 2.6vw, 36px); }
/* Illustration « design system » : les frameworks et une ligne de vrai code */
.p-manager .ds-fw { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.p-manager .ds-fw span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px dashed var(--ui-filet); color: var(--ui-faible); }
.p-manager .ds-fw span.on { border-style: solid; color: var(--encre-clair); background: #fff; }
.p-manager .ds-fw i { width: 8px; height: 8px; border-radius: 50%; background: var(--fw); }
.p-manager .ds-code { display: block; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: #17181b; color: #e8e8ea; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-manager .ds-code b { color: #c792ea; font-weight: 500; } .p-manager .ds-code em { color: #ffcb8b; font-style: normal; }

/* 26/10 : titre plus long (le code dans la promesse), phrase d'accroche sur deux lignes */
.p-manager .px-hero h1, .p-manager .dm-hero h1 { font-size: clamp(34px, 4.1vw, 58px); max-width: none; }
.p-manager .dm-hero .lede { max-width: 860px; text-wrap: balance; }
@media (min-width: 1000px) { .p-manager .dm-hero h1 .h1-ligne { white-space: nowrap; } }
html[lang="fr"] .p-manager .dm-hero h1 { font-size: clamp(30px, 3.5vw, 50px); }
.p-manager .dm-hero h1 { font-size: clamp(30px, 3.6vw, 52px); }
html[lang="fr"] .p-manager .dm-hero h1 { font-size: clamp(28px, 3.3vw, 48px); }
.p-manager .dm-hero h1 { margin-left: auto; margin-right: auto; max-width: 100%; width: auto; }
@media (min-width: 1000px) { .p-manager .dm-hero h1 { width: max-content; } }
.p-manager .dm-hero h1, .p-manager .px-hero h1 { max-width: none !important; width: auto !important; }
.p-manager .dm-hero h1 { font-size: clamp(28px, 3.25vw, 46px) !important; }
html[lang="fr"] .p-manager .dm-hero h1 { font-size: clamp(26px, 3vw, 43px) !important; }

/* 26/10 : la phrase et les onglets passent sous la démo ; l'onglet actif en blanc */
.p-manager .dm-demo-tete { margin: 16px 0 0; }
.p-manager .dm-onglets button[aria-selected="true"] { background: #fff; color: #171717; }
.p-manager .dm-onglets button i { background: rgba(23, 23, 23, .3); }
/* Un seul appel à l'action visible à la fois : celui de l'en-tête n'apparaît qu'au défilement */
.p-manager .entete .nav-droite > * { opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--motion-micro) ease, transform var(--motion-micro) ease; }
.p-manager .entete.colle .nav-droite > * { opacity: 1; transform: none; pointer-events: auto; }