/* Concept : une scène 16:9 (1920×1080, plus haute si le texte s'agrandit ou s'espace) mise à l'échelle, qui enchaîne 15 scènes de ~8 s sur une musique générée.
   Palette reprise du deck Merathon : encre nuit, corail du logo, turquoise des étiquettes. */
:root {
  --bg: #1a1b26;
  --bg2: #16213e;
  --card: #232539;
  --card2: #1d2a4d;
  --line: #34385a;
  --ink: #e8ecf4;
  --mute: #aab4c8;
  --coral: #e94560;
  --pink: #ff6b84;
  --teal: #2dd4bf;
  --shell: #0f1019;
  --sans: 'Rubik', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --on-coral: #0f1019; /* texte sur fond corail : 4,95:1 */
  --field: #6b7394; /* contour des composants : 4:1 sur --shell */
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
body { margin: 0; background: var(--shell); color: var(--ink); font-family: var(--sans); overflow: hidden; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main:focus { outline: none; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 12px 20px; border-radius: 10px; background: var(--teal); color: var(--on-coral); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- cadre et commandes ---------- */
.frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--shell); }
/* La scène garde 1920 px de large mais s'allonge si son texte grandit ; le défileur montre la partie qui dépasse. */
.scroller { position: absolute; inset: 0; overflow: auto; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; min-height: 1080px; transform-origin: 0 0; background: var(--bg); overflow-x: clip; }
.stage *, .stage *::before, .stage *::after { box-sizing: border-box; }
.stage p, .stage h1, .stage h2, .stage h3 { margin: 0; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; background: var(--shell); border-top: 1px solid var(--line); }
.btn { box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; font-size: 15px; min-height: 40px; }
.btn:hover { border-color: var(--teal); }
.prog { flex: 1; min-width: 160px; height: 40px; display: flex; align-items: center; cursor: pointer; position: relative; order: 0; }
.prog .track { position: relative; width: 100%; height: 10px; background: transparent; border: 1px solid var(--field); border-radius: 5px; overflow: hidden; }
.prog[aria-disabled="true"] { cursor: default; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled:hover { border-color: var(--line); }
.prog .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--coral); }
.prog .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--shell); }
.a11y { color: var(--mute); font-size: 14px; padding: 10px 4px; }
.size { display: flex; align-items: center; gap: 8px; }
.sizelab { color: var(--mute); font-size: 14px; font-variant-numeric: tabular-nums; }
.time { font: 400 14px var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
@media (max-width: 560px) { .prog { order: 5; flex-basis: 100%; } .a11y { order: 6; } .time { margin-left: auto; } }

.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; text-align: center; padding: 24px; background: rgba(15,16,25,.92); z-index: 5; overflow-y: auto; }
.overlay[hidden] { display: none; }
.overlay .kick { font: 600 14px var(--mono); letter-spacing: 3px; text-transform: uppercase; color: var(--teal); }
.overlay h2 { margin: 0; font-size: clamp(32px, 7vw, 72px); font-weight: 600; line-height: 1.05; text-wrap: balance; }
.overlay p { margin: 0; color: var(--mute); max-width: 46ch; line-height: 1.5; font-size: clamp(15px, 2vw, 18px); }
.overlay .go { background: var(--coral); border: 0; color: var(--on-coral); font-weight: 600; font-size: 18px; padding: 14px 28px; border-radius: 12px; }
.overlay .go:hover { background: var(--pink); }
.overlay .alt { background: none; border: 0; color: var(--mute); text-decoration: underline; font-size: 15px; padding: 8px; min-height: 44px; }
.overlay .keys { font-size: 15px; }
.overlay a { color: var(--teal); }

/* ---------- scènes ---------- */
/* La scène affichée est dans le flux et donne sa hauteur à la scène ; celle qui s'efface reste superposée. */
.scene { position: absolute; top: 0; left: 0; width: 100%; min-height: 1080px; padding: 112px 128px 96px; background: var(--sbg, var(--bg)); display: flex; flex-direction: column; gap: 44px; opacity: 0; visibility: hidden; transition: opacity .7s; }
.scene.on { opacity: 1; visibility: visible; }
.scene.on:not(.out) { position: relative; }
.scene.out { opacity: 0; }
body.paused .scene * { animation-play-state: paused !important; }
.row { display: flex; } .col { display: flex; flex-direction: column; }
.eyebrow { font: 600 24px var(--mono); letter-spacing: 4px; text-transform: uppercase; color: var(--teal); }
h2 { font-size: 64px; font-weight: 600; line-height: 1.1; text-wrap: balance; max-width: 1500px; }
.head { display: flex; flex-direction: column; gap: 12px; }
.lead { font-size: 30px; line-height: 1.4; color: var(--mute); }
.mono { font-family: var(--mono); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px; }
.scene.alt-bg { --sbg: var(--bg2); }
.scene.alt-bg .card { background: var(--card2); border-color: #33416b; }

.scene.on .a { animation: rise .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both; }
.pop { transform-box: fill-box; transform-origin: center; }
.scene.on .pop { animation: pop .6s cubic-bezier(.3,1.5,.5,1) var(--d, 0s) both; }
.scene.on .draw { stroke-dasharray: 1; animation: draw var(--t, 1.4s) ease-in-out var(--d, 0s) both; }
.scene.on .lit { animation: lit .5s ease var(--d, 0s) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lit { to { border-color: var(--coral); background-color: #2c2440; } }

/* 1 · intro */
.s-intro { flex-direction: row; align-items: center; justify-content: space-between; gap: 96px; padding: 128px; }
.s-intro h2 { font-size: 170px; font-weight: 600; line-height: 1.05; }
.tagline { font-size: 46px; font-weight: 300; line-height: 1.3; color: var(--mute); }
.rule { display: block; width: 160px; border: 0; border-top: 6px solid var(--coral); margin: 0; }

/* 2 · promesse */
.cards4 { flex: 1; display: flex; gap: 32px; }
.cards4 .card { flex: 1; display: flex; flex-direction: column; gap: 18px; border-top: 6px solid var(--coral); justify-content: center; }
.cards4 h3 { font-size: 64px; font-weight: 600; line-height: 1.1; }
.cards4 p { font-size: 30px; line-height: 1.4; color: var(--mute); }

/* 3 · interface */
.mock { position: relative; width: 1664px; height: 620px; background: #14151f; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 56px 44px 1fr 112px; grid-template-columns: 300px 1fr 380px; font-size: 22px; flex: none; }
.mock .reg { position: relative; outline: 3px solid transparent; outline-offset: -3px; overflow: hidden; }
.scene.on .mock .reg { animation: hl 1.35s ease var(--d) both; }
@keyframes hl { 0%, 100% { outline-color: transparent; } 15%, 85% { outline-color: var(--coral); background-color: rgba(233,69,96,.1); } }
.r-tool { grid-column: 1 / 4; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #1b1d2e; border-bottom: 1px solid var(--line); }
.r-tabs { grid-column: 1 / 4; display: flex; align-items: flex-end; gap: 6px; padding: 0 16px; background: #181a29; border-bottom: 1px solid var(--line); }
.chip { font: 600 20px var(--mono); padding: 6px 14px; border-radius: 8px; background: #2a2d49; color: var(--ink); }
.chip.search { margin-left: auto; background: #101119; color: var(--mute); font-weight: 400; min-width: 340px; }
.tab { font-size: 20px; line-height: 1.2; padding: 6px 18px; border-radius: 8px 8px 0 0; color: var(--mute); background: #101119; }
.tab.act { background: #14151f; color: var(--ink); border-top: 3px solid var(--coral); }
.r-side { padding: 18px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: #171827; }
.r-side h3 { margin: 8px 0 0; font: 600 18px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.r-side div { font-size: 22px; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.badge { font: 600 16px var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--teal); color: #10211f; }
.badge.c { background: var(--coral); color: var(--on-coral); } .badge.g { background: #2a2d49; color: var(--mute); }
.r-graph { background: #14151f; }
.r-wc { border-left: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: #171827; }
.r-wc h3 { margin: 0; font: 600 18px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
.file { font: 400 19px var(--mono); display: flex; gap: 10px; }
.file .st { color: var(--teal); }
.msg { margin-top: auto; font-size: 20px; background: #101119; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.commitbtn { background: var(--coral); color: var(--on-coral); font-weight: 600; text-align: center; border-radius: 8px; padding: 8px; font-size: 20px; }
.r-bottom { grid-column: 1 / 4; border-top: 1px solid var(--line); background: #0d0e16; padding: 12px 20px; font: 400 21px/1.5 var(--mono); color: var(--teal); }
.r-bottom span { color: var(--mute); margin-right: 22px; }
.caps { position: relative; height: 56px; flex: none; }
.cap { position: absolute; left: 0; top: 0; font-size: 34px; opacity: 0; white-space: nowrap; }
.cap b { color: var(--pink); font-weight: 600; }
.scene.on .cap { animation: capin 1.35s ease var(--d) both; }
@keyframes capin { 0% { opacity: 0; transform: translateY(12px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 4 · graphe */
.split { flex: 1 0 auto; display: flex; gap: 40px; }
.diff { width: 640px; display: flex; flex-direction: column; gap: 16px; padding: 28px 32px; flex: none; }
.diff .fn { font: 600 22px var(--mono); color: var(--teal); }
.dl { display: flex; align-items: center; gap: 16px; font: 400 24px var(--mono); padding: 10px 14px; border-radius: 8px; }
.dl.add { background: rgba(45,212,191,.12); }
.cb { width: 28px; height: 28px; border: 2px solid var(--mute); border-radius: 6px; position: relative; flex: none; }
.cb::after { content: ''; position: absolute; left: 7px; top: 1px; width: 8px; height: 16px; border: solid #10211f; border-width: 0 4px 4px 0; transform: rotate(45deg) scale(0); }
.scene.on .cb.on { animation: cbon .3s ease var(--d) forwards; }
.scene.on .cb.on::after { animation: tick .3s ease var(--d) forwards; }
@keyframes cbon { to { background: var(--teal); border-color: var(--teal); } }
@keyframes tick { to { transform: rotate(45deg) scale(1); } }
.scene.on .dl.dim { animation: dim .4s ease var(--d) forwards; }
@keyframes dim { to { opacity: .62; } } /* 4,9:1 : atténuée mais lisible */
.note { font-size: 28px; line-height: 1.4; color: var(--mute); }

/* 5 · rebase */
.rb { position: relative; width: 900px; height: 500px; flex: none; }
.rrow { position: absolute; left: 0; right: 0; height: 110px; display: flex; align-items: center; gap: 24px; padding: 0 32px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.rrow .h { font: 400 24px var(--mono); color: var(--pink); }
.rrow .m { font-size: 32px; flex: 1; }
.rrow .t { font: 600 22px var(--mono); padding: 4px 12px; border-radius: 8px; background: #2a2d49; color: var(--mute); position: relative; min-width: 96px; text-align: center; }
.rrow .t.n { position: absolute; right: 32px; opacity: 0; background: var(--coral); color: var(--on-coral); }
.scene.on .rrow .t.n { animation: fadein .3s ease var(--d) forwards; }
@keyframes fadein { to { opacity: 1; } }
.scene.on .rr2 { animation: merge .8s ease 3.4s forwards; }
.scene.on .rr3 { animation: drop .8s ease 4.6s forwards; }
.scene.on .rr4 { animation: climb .9s cubic-bezier(.3,.8,.3,1) 5.6s forwards; }
@keyframes merge { to { transform: translateY(-126px) scale(.96); opacity: 0; } }
@keyframes drop { 40% { opacity: .5; } to { transform: translateX(120px); opacity: 0; } }
@keyframes climb { to { transform: translateY(-252px); } }
.acts { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.acts-list { display: flex; flex-direction: column; gap: 20px; }
.acts .act { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 28px; }
.acts .act h3 { font-size: 34px; font-weight: 600; }
.acts .act p { font-size: 26px; color: var(--mute); }
.ok { font: 600 28px var(--mono); color: var(--teal); }

/* 6 · sync */
.sync { flex: 1; display: flex; gap: 48px; align-items: stretch; }
.big { width: 600px; background: var(--coral); color: var(--on-coral); border-radius: 16px; padding: 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px; flex: none; }
.big strong { font-size: 150px; font-weight: 600; line-height: 1; }
.big p { font-size: 30px; line-height: 1.35; }
.beat { height: 10px; border-radius: 5px; background: rgba(26,27,38,.25); overflow: hidden; }
.beat span { display: block; height: 100%; width: 0; background: #1a1b26; }
.scene.on .beat span { animation: beat 2.6s linear .4s 2 forwards; }
@keyframes beat { from { width: 0; } to { width: 100%; } }
.sync .right { flex: 1; display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.repos { display: flex; gap: 16px; }
.repo { font: 600 24px var(--mono); padding: 14px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--mute); }
.scene.on .repo { animation: pulse 1s ease var(--d) both; }
@keyframes pulse { 0%, 100% { border-color: var(--line); color: var(--mute); } 40% { border-color: var(--teal); color: var(--teal); } }
.repodot { display: inline-block; width: 16px; height: 16px; margin-left: 12px; border-radius: 50%; background: var(--coral); }
.notifs { display: flex; flex-direction: column; gap: 14px; }
.toast { background: var(--card); border: 1px solid var(--teal); border-radius: 16px; padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; }
.toast h3 { font: 600 26px var(--mono); color: var(--teal); }
.toast p { font-size: 30px; display: flex; gap: 14px; align-items: baseline; }
.toast p::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); flex: none; transform: translateY(-2px); }
.scene.on .slidein { animation: slidein .8s cubic-bezier(.2,.8,.2,1) var(--d) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(160px); } to { opacity: 1; transform: none; } }

/* 7 · pr-title */
.s-prt { --sbg: var(--coral); color: var(--on-coral); justify-content: space-between; padding: 128px; }
.s-prt .eyebrow { color: var(--on-coral); }
.s-prt h2 { font-size: 120px; font-weight: 600; line-height: 1.1; text-wrap: balance; }
.s-prt p.lead { color: var(--on-coral); font-size: 38px; }

/* 8 · pr-flow */
.steps { display: flex; gap: 32px; align-items: center; }
.step { flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--card2); border: 1px solid #33416b; border-radius: 16px; padding: 30px 36px; }
.step .n { font: 600 24px var(--mono); color: var(--pink); }
.step h3 { font-size: 46px; font-weight: 600; }
.step p { font-size: 26px; color: #b3bdd3; line-height: 1.35; }
.scene.on .step { animation: rise .8s cubic-bezier(.2,.7,.2,1) .6s both, lit .5s ease var(--d) forwards; }
.arrow { width: 56px; height: 12px; background: #33416b; clip-path: polygon(0 30%, 70% 30%, 70% 0, 100% 50%, 70% 100%, 70% 70%, 0 70%); flex: none; }
.prbar { display: flex; align-items: center; gap: 28px; background: var(--card2); border: 1px solid #33416b; border-radius: 16px; padding: 28px 36px; flex-wrap: nowrap; }
.prbar .ttl { font-size: 34px; font-weight: 600; flex: 1; }
.prbar .ttl small { display: block; font: 400 24px var(--mono); color: var(--mute); margin-top: 6px; }
.pill { font: 600 24px var(--mono); padding: 10px 18px; border-radius: 10px; background: rgba(45,212,191,.15); color: var(--teal); white-space: nowrap; }
.mergebox { position: relative; width: 300px; height: 72px; flex: none; }
.mergebox span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 30px; font-weight: 600; }
.mergebox .m1 { background: var(--coral); color: var(--on-coral); }
.mergebox .m2 { background: var(--teal); color: #10211f; opacity: 0; }
.scene.on .mergebox .m1 { animation: press .5s ease 5.3s both, gone .3s ease 5.6s forwards; }
.scene.on .mergebox .m2 { animation: fadein .4s ease 5.6s forwards; }
@keyframes press { 50% { transform: scale(.94); } }
@keyframes gone { to { opacity: 0; } }

/* worktrees */
.wt { flex: 1 0 auto; display: flex; gap: 48px; }
.wtmap { position: relative; width: 1040px; flex: none; display: flex; flex-direction: column; }
.wtrepo { display: flex; flex-direction: column; gap: 10px; padding: 28px 36px; border-color: var(--teal); }
.wtrepo h3 { font-size: 40px; font-weight: 600; }
.wtrepo p { font-size: 28px; color: var(--mute); }
.wtrepo .wtnew { color: var(--teal); font-weight: 600; }
.wtlink { position: relative; height: 72px; flex: none; }
.wtwire { position: absolute; top: 0; width: 4px; height: 100%; background: var(--field); }
.wtwire.w1 { left: 250px; } .wtwire.w2 { left: 786px; background: var(--coral); }
.wtdot { position: absolute; left: 775px; bottom: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 7px rgba(233,69,96,.25); opacity: 0; }
.scene.on .wtdot { animation: wtup 1.2s ease-in-out 4.6s both; }
@keyframes wtup { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-72px); } }
.wtdirs { display: flex; gap: 32px; }
.wtdir { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 0 28px 28px; }
.wtdir.hot { border-color: var(--coral); }
.wttab { align-self: flex-start; margin-bottom: 4px; padding: 8px 18px; font-size: 24px; line-height: 1.2; background: #14151f; border-top: 3px solid var(--coral); border-radius: 0 0 8px 8px; color: var(--ink); }
.wtdir code { font: 400 23px var(--mono); color: var(--mute); }
.wtdir .badge { font-size: 23px; padding: 4px 12px; }
.wtdir p { font-size: 28px; line-height: 1.35; color: var(--ink); }
.wt .acts { min-width: 0; }

/* profils Git et SSH */
.pfs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pf { display: flex; flex-direction: column; gap: 10px; padding: 26px 30px; }
.pf h3 { margin-bottom: 6px; font: 600 34px var(--mono); color: var(--teal); }
.pf p { font-size: 25px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.pf b { display: inline-block; width: 112px; font-weight: 400; color: #b3bdd3; }
.inl { font: 600 26px var(--mono); color: var(--teal); }
.sshbox { display: flex; flex-direction: column; gap: 20px; padding: 26px 30px; }
.sshbox h3 { font-size: 34px; font-weight: 600; }
.sshsteps { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px; font-size: 25px; }
.sshsteps div { display: flex; align-items: center; gap: 14px; }

/* 9 · terminal */
.term { flex: 1 0 auto; display: flex; gap: 32px; }
.term .card { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.term h3 { font-size: 38px; font-weight: 600; }
.console { flex: 1; background: #0d0e16; border-radius: 12px; padding: 28px 32px; font: 400 28px/1.6 var(--mono); color: var(--mute); }
.console .p { color: var(--teal); }
.type { display: inline-block; white-space: nowrap; clip-path: inset(0 100% 0 0); vertical-align: bottom; color: var(--ink); }
.scene.on .type { animation: typing var(--t) steps(var(--n)) var(--d) forwards; }
@keyframes typing { to { clip-path: inset(0); } }
.logline { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; font: 400 26px var(--mono); padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.logline .res { font-style: normal; color: var(--teal); white-space: nowrap; }
.logline .dur { font-style: normal; color: var(--mute); }

/* 10 · sécurité */
.sec { position: relative; width: 1664px; height: 540px; flex: none; }
.node { position: absolute; width: 400px; height: 170px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 36px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.node h3 { font-size: 38px; font-weight: 600; } .node p { font-size: 24px; color: var(--mute); }
.node.hot { border-color: var(--teal); }
.wire { position: absolute; background: var(--line); }
.wlab { position: absolute; font: 600 24px var(--mono); }
.tokdot { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 8px rgba(233,69,96,.25); left: 817px; top: 405px; opacity: 0; }
.scene.on .tokdot { animation: tok 3.6s ease-in-out 1.8s 2 both; }
@keyframes tok { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: 1; } 45% { transform: translate(0, -265px); } 85% { transform: translate(430px, -265px); opacity: 1; } 100% { transform: translate(450px, -265px); opacity: 0; } }

/* 11 · technique */
.tech { flex: 1 0 auto; display: flex; gap: 56px; }
.trow { display: flex; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid #33416b; }
.trow b { width: 320px; flex: none; font: 600 28px var(--mono); color: var(--teal); }
.trow span { font-size: 27px; line-height: 1.35; color: #cfd6e6; }
.cmp { width: 600px; flex: none; display: flex; flex-direction: column; gap: 26px; justify-content: center; }
.bar2 { height: 84px; border-radius: 12px; display: flex; align-items: center; padding: 0 24px; font: 600 30px var(--mono); transform-origin: left; white-space: nowrap; }
.scene.on .bar2 { animation: grow 1.2s cubic-bezier(.3,.8,.3,1) var(--d) both; }
@keyframes grow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
.bar2row { display: flex; align-items: center; gap: 20px; font: 600 30px var(--mono); white-space: nowrap; }
.cmp small { font-size: 24px; color: var(--mute); line-height: 1.35; }

/* ajouts : barre d'outils, menu contextuel, notifications, petits plus */
.branchname { font: 600 22px var(--mono); color: var(--pink); }
.chip.syncb { background: var(--coral); color: var(--on-coral); margin-right: 10px; }
.ctx { position: absolute; left: 600px; top: 96px; width: 330px; background: #14151f; border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.55); opacity: 0; display: flex; flex-direction: column; gap: 2px; }
.ctx p { font-size: 22px; padding: 8px 12px; border-radius: 8px; }
.ctx p.h { font: 600 18px var(--mono); color: var(--teal); letter-spacing: 1px; }
.ctx p.hot { background: rgba(233,69,96,.2); }
.scene.on .ctx { animation: ctxk 3.6s ease var(--d) both; }
@keyframes ctxk { 0% { opacity: 0; transform: translateY(10px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dock { display: flex; align-items: center; gap: 32px; }
.ico { position: relative; width: 108px; height: 108px; flex: none; }
.ico img { width: 100%; height: 100%; display: block; }
.ico .count { position: absolute; right: -14px; top: -14px; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 23px; background: var(--coral); color: var(--on-coral); display: flex; align-items: center; justify-content: center; font: 600 26px var(--mono); border: 4px solid var(--bg2); }
.dock p { font-size: 28px; line-height: 1.35; color: var(--mute); max-width: 640px; }
.trio { flex: 1 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.tile { gap: 20px; }
.tile h3 { font-size: 40px; }
.tile > p { font-size: 26px; line-height: 1.4; color: var(--mute); margin-top: auto !important; }
.msearch { font: 400 28px var(--mono); background: #0d0e16; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; color: var(--ink); min-height: 66px; }
.memo { display: flex; flex-direction: column; gap: 6px; background: #14151f; border-radius: 12px; padding: 18px 22px; }
.memo .cmd { font: 600 26px var(--mono); color: var(--teal); }
.memo span { font-size: 26px; }
.memo .w { font-style: normal; font-size: 22px; color: var(--pink); }
.fileline { font: 400 26px var(--mono); background: rgba(233,69,96,.18); border-radius: 8px; padding: 10px 14px; }
.opt { font-size: 24px; padding: 10px 14px; border-radius: 8px; background: #14151f; border: 1px solid var(--line); }
.opt code { font: 600 22px var(--mono); color: var(--teal); margin-left: 8px; }
.sw { display: flex; gap: 16px; }
.sw div { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 24px; padding: 14px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); }
.opts { display: flex; flex-direction: column; gap: 20px; }
.sw .swatch { display: block; width: 100%; height: 64px; border-radius: 8px; border: 1px solid var(--line); }
.zoom { display: flex; align-items: baseline; gap: 22px; font-weight: 600; }
.zoom small { font: 400 20px var(--mono); color: var(--mute); margin-left: auto; }

/* 12 · final */
.s-end { flex-direction: row; align-items: center; gap: 96px; padding: 96px 128px 230px; }
.s-end h2 { font-size: 96px; max-width: 1100px; }
.os { display: flex; gap: 28px; }
.os .card { flex: 1; padding: 26px 32px; display: flex; flex-direction: column; gap: 8px; }
.os h3 { font-size: 40px; font-weight: 600; } .os p { font-size: 26px; color: var(--mute); }
.url { font: 600 28px var(--mono); color: var(--pink); }
.run { position: absolute; left: 128px; bottom: 100px; width: 1664px; height: 90px; }
.run .lane { position: absolute; left: 0; right: 48px; top: 43px; height: 4px; background: var(--line); border-radius: 2px; }
.run .fin { position: absolute; right: 0; top: 0; width: 40px; height: 90px; background: repeating-conic-gradient(var(--ink) 0 25%, var(--bg) 0 50%) 0 0 / 20px 20px; border-radius: 4px; }
.runner { position: absolute; left: 0; top: 31px; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 10px rgba(45,212,191,.2); }
.scene.on .runner { animation: dash 5.6s cubic-bezier(.45,0,.25,1) 2s forwards; }
@keyframes dash { to { left: 1600px; } }
.flash { position: absolute; right: -40px; top: -35px; width: 160px; height: 160px; border-radius: 50%; border: 6px solid var(--teal); opacity: 0; }
.scene.on .flash { animation: flash 1.1s ease-out 7.4s forwards; }
@keyframes flash { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.3); } }

/* ---------- téléphone ---------- */
.btn[hidden] { display: none; }
@media (max-width: 720px) {
  .overlay .keys:not(:has(a)) { display: none; } /* les raccourcis clavier ne servent pas sur téléphone */
}
/* Téléphone en paysage : une seule ligne de commandes, pour laisser la hauteur à la scène. */
@media (max-height: 430px) and (min-width: 560px) {
  .bar { flex-wrap: nowrap; gap: 8px; padding: 6px 12px; }
  .bar .btn { min-height: 40px; padding: 6px 12px; white-space: nowrap; }
  #bRe, .size, .textv, .a11y { display: none; }
  .prog { order: 0; flex: 1 1 auto; min-width: 80px; height: 36px; }
  .overlay { gap: 8px; padding: 12px; }
  .overlay .kick, .overlay p { display: none; }
  .overlay h2 { font-size: 28px; }
}