/* Une régie en trois volets. Les couleurs restent celles du thème Slint. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --mono: ui-monospace, SFMono-Regular, Consolas, monospace; }
[hidden] { display: none !important; }
html { overflow-x: clip; }
body { overflow-x: clip; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.header { background: #0e1014d9; }
.nav { height: 76px; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav-links a:hover::after { transform: scaleX(1); }
.hero { position: relative; padding-top: 52px; isolation: isolate; }
.hero::before { content: ''; position: absolute; z-index: -2; top: 230px; left: 50%; width: min(120vw,1500px); height: 700px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 65%,#7c8cff19,transparent 65%); pointer-events: none; }
.hero::after { content: ''; position: absolute; z-index: -2; inset: 360px -70px -30px; background-image: linear-gradient(#7c8cff09 1px,transparent 1px),linear-gradient(90deg,#7c8cff09 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse,#000,transparent 72%); pointer-events: none; }
.hero h1 { font-size: clamp(44px,5.7vw,82px); font-weight: 550; letter-spacing: -.055em; line-height: 1.09; margin-top: 25px; }
.hero h1 > span { color: inherit; }
.hero h1 > span:not(.title-line) { color: var(--accent); }
.title-line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.title-line > span { display: inline-block; }
.hero h1 .title-line:last-child { color: var(--accent); }
.hero-copy { margin-top: 25px; font-size: 16px; }
.hero-copy br:first-child { display: none; }
.hero-copy br:first-child::after { content: ' '; }
.hero-actions { margin-top: 26px; }
.button-primary { box-shadow: 0 0 0 1px #7c8cff22,0 5px 30px #7c8cff18; }
.button-primary:hover { box-shadow: 0 0 0 5px #7c8cff12,0 8px 40px #7c8cff20; }
.hero-triptych { position: relative; height: 348px; max-width: 1000px; margin: 40px auto 0; perspective: 1200px; }
.hero-ruler { position: absolute; inset: -8px 0 auto; display: flex; justify-content: space-between; color: var(--muted); font: 11px var(--mono); letter-spacing: 1px; }
.hero-ruler::after { content: ''; position: absolute; inset: 25px 0 auto; height: 5px; background: repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 20px); }
.hero-pane { position: absolute; width: 34%; height: 230px; top: 55px; text-align: left; will-change: transform; border: 1px solid #7c8cff42; border-radius: 10px; background: var(--surface); box-shadow: 0 25px 55px #0006; overflow: hidden; transition: scale .6s var(--ease-out),border-color .4s,box-shadow .4s; }
/* Profondeur explicite : WebKit trie par profondeur les éléments en 3D sous une perspective,
   sans tenir compte du z-index. Les volets latéraux restent donc derrière dans tous les cas. */
.pane-left { left: 1%; z-index: 1; transform: translateY(26px) translateZ(-80px) rotateY(15deg) rotateZ(-5deg); }
.pane-center { left: 33%; z-index: 2; transform: translateZ(0); border-color: #7c8cff8c; }
.pane-right { right: 1%; z-index: 1; transform: translateY(26px) translateZ(-80px) rotateY(-15deg) rotateZ(5deg); }
.pane-top { height: 32px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; background: #16191ff5; border-bottom: 1px solid var(--border); font: 11px var(--mono); letter-spacing: 1px; color: #b7bfce; }
.pane-top i { width: 5px; height: 5px; background: var(--record); border-radius: 50%; }
.pane-bottom { position: absolute; bottom: 12px; left: 14px; color: #e8eaee87; font: 11px var(--mono); letter-spacing: 1.6px; }
.light-field { position: absolute; inset: 32px 0 0; overflow: hidden; background: radial-gradient(ellipse at 50% 105%,#7c8cff75,transparent 65%),linear-gradient(150deg,#1d2129,#0e1014 60%); }
.light-field i { position: absolute; top: -30%; left: 18%; width: 12%; height: 160%; background: linear-gradient(90deg,transparent,#93a0ff7a,transparent); transform: rotate(26deg); filter: blur(4px); }
.light-field i:nth-child(2) { left: 39%; transform: rotate(-30deg); opacity: .7; }
.light-field i:nth-child(3) { left: 61%; transform: rotate(18deg); opacity: .4; }
.light-field i:nth-child(4) { left: 85%; transform: rotate(-23deg); }
.light-field i:nth-child(5) { left: 0; top: 75%; height: 1px; width: 100%; transform: none; background: var(--accent); filter: none; box-shadow: 0 0 25px 5px #7c8cff35; }
.type-field { position: absolute; inset: 32px 0 0; display: flex; flex-direction: column; justify-content: center; padding: 24px; background: linear-gradient(140deg,#7c8cff16,transparent 70%),var(--bg); }
.type-field span { font-size: clamp(18px,2.2vw,30px); font-weight: 550; letter-spacing: -.9px; line-height: 1.18; }
.type-field span:nth-child(2) { color: var(--accent); }
.type-field i { width: 30px; height: 2px; background: var(--accent); margin-top: 22px; }
.voice-field { position: absolute; inset: 32px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; background: radial-gradient(ellipse at center,#7c8cff20,transparent 65%),var(--bg); }
.voice-field i { width: 7px; height: 28%; border-radius: 4px; background: var(--accent); opacity: .85; }
.voice-field i:nth-child(3n) { height: 47%; opacity: 1; }
.voice-field i:nth-child(2n) { height: 17%; opacity: .45; }
.voice-field i:nth-child(5) { height: 64%; }
.hero-sync { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 20px; font: 11px var(--mono); letter-spacing: 1.5px; color: #b8bfd0; }
.hero-sync span { height: 1px; width: 60px; background: linear-gradient(90deg,transparent,#7c8cff70); }
.hero-sync span:last-child { transform: rotate(180deg); }
.explore-link { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; margin: 28px auto 0; color: var(--muted); font: 11px var(--mono); padding: 12px 0; }
.explore-link:hover { color: var(--text); }
.explore-line { width: 1px; height: 20px; background: var(--accent); position: relative; }
.explore-line::after { content: ''; position: absolute; bottom: 0; left: -2px; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.explore-index { white-space: nowrap; flex-shrink: 0; margin-left: 26px; color: var(--accent); }
.principle { padding-bottom: 0; }
.section-heading { column-gap: 80px; }
.section-heading > p:last-child { max-width: 450px; }
.capture-story { --spread: 1; --files: 1; margin-top: 55px; position: relative; }
.capture-pin { padding-bottom: 20px; }
.story-chapters { display: flex; align-items: center; gap: 20px; margin: 0 0 24px; color: var(--muted); font: 11px var(--mono); }
.story-chapters > span { display: flex; align-items: center; gap: 10px; transition: color .3s; }
.story-chapters b { border: 1px solid var(--border); border-radius: 4px; padding: 5px 6px; font-weight: 400; }
.story-chapters > i { height: 1px; flex: 1; background: var(--border); }
.story-chapters .is-active { color: var(--text); }
.story-chapters .is-active b { color: var(--accent); background: #7c8cff16; border-color: #7c8cff55; }
.capture-console { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg,#16191f88,#0e1014),repeating-linear-gradient(90deg,transparent 0 39px,#7c8cff06 39px 40px); padding: 0 26px 26px; isolation: isolate; }
.capture-console::before,.capture-console::after { content: ''; position: absolute; width: 25px; height: 3px; background: var(--accent); left: -1px; top: -1px; opacity: .8; }
.capture-console::after { left: auto; top: auto; bottom: -1px; right: -1px; }
.console-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 22px 0; font: 11px var(--mono); letter-spacing: 1px; color: #b4bdcf; border-bottom: 1px solid var(--border); }
.console-top > span { display: flex; align-items: center; gap: 12px; }
.console-mark { display: flex; gap: 3px; align-items: center; }
.console-mark i { display: block; width: 3px; height: 11px; background: var(--accent); }
.console-mark i:nth-child(2) { height: 16px; }
.channel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 30px; perspective: 1100px; }
.source-channel { min-width: 0; position: relative; --channel-shift: 0px; --channel-turn: 0deg; --channel-y: 0px; transform: translateX(calc(var(--channel-shift) * (1 - var(--spread)))) translateY(calc(var(--channel-y) * (1 - var(--spread)))) rotate(calc(var(--channel-turn) * (1 - var(--spread)))); }
.channel-1 { --channel-shift: 70%; --channel-turn: -8deg; --channel-y: 25px; }
.channel-2 { z-index: 2; }
.channel-3 { --channel-shift: -70%; --channel-turn: 8deg; --channel-y: 25px; }
.source-window { position: relative; border: 1px solid #485069; background: var(--surface); border-radius: 6px; overflow: hidden; box-shadow: 0 16px 36px #0005; transition: border-color .3s; }
.source-title { height: 37px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; gap: 8px; }
.source-title b { font: 11px var(--mono); color: var(--accent); padding-right: 8px; }
.source-preview { position: relative; height: 155px; overflow: hidden; background: var(--bg); }
.source-preview .light-field,.source-preview .type-field,.source-preview .voice-field { inset: 0; }
.source-preview .type-field { padding: 20px; }
.source-preview .type-field span { font-size: clamp(17px,2.1vw,26px); }
.source-preview .type-field i { margin-top: 12px; }
.frame-corner { position: absolute; top: 9px; left: 9px; width: 10px; height: 10px; border-top: 1px solid #e8eaee66; border-left: 1px solid #e8eaee66; }
.source-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 7px 10px; gap: 8px; color: var(--muted); font: 11px var(--mono); letter-spacing: .4px; }
.signal-path { position: relative; height: 50px; display: grid; place-items: center; opacity: var(--files); transform: scaleY(var(--files)); transform-origin: top; }
.signal-path::before { content: ''; position: absolute; inset: 0 auto; width: 1px; background: linear-gradient(var(--border),var(--accent)); }
.signal-path span { position: relative; font: 11px var(--mono); background: var(--bg); color: var(--accent); padding: 3px 6px; border: 1px solid var(--border); border-radius: 3px; }
.output-file { width: 100%; padding: 14px; text-align: left; border: 1px solid var(--border); background: #16191fe8; border-radius: 6px; display: block; opacity: var(--files); transform: translateY(calc(20px * (1 - var(--files)))); transition: opacity .5s,transform .7s var(--ease-out),border-color .3s; color: var(--text); }
.file-heading { display: flex; gap: 9px; align-items: center; font: 11px var(--mono); }
.file-heading > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.file-heading small { display: block; font: 11px/1.4 "Segoe UI",Arial,sans-serif; color: var(--muted); margin-top: 5px; }
.file-wave { display: block; position: relative; height: 34px; margin-top: 16px; overflow: hidden; }
.file-wave svg { width: 100%; height: 100%; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; opacity: .6; }
.file-meta { display: flex; justify-content: space-between; gap: 5px; margin-top: 10px; font: 11px var(--mono); color: var(--muted); }
.simulation-note { text-align: center; font: 11px/1.5 var(--mono); color: var(--muted); margin-top: 16px; }
.principle-outro { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 90px 0; border-bottom: 1px solid var(--border); }
.outro-index { color: var(--accent); font: 11px var(--mono); }
.principle-outro > p { font-size: clamp(25px,3.5vw,44px); letter-spacing: -1.5px; line-height: 1.18; color: var(--muted); }
.principle-outro strong { color: var(--text); font-weight: 500; }
.outro-note { font: 11px/1.9 var(--mono); color: var(--muted); letter-spacing: 1px; }
.interface-section { padding-top: 100px; padding-bottom: 110px; }
.interface-heading { text-align: center; }
.interface-heading .kicker { margin-bottom: 18px; }
.interface-heading p:last-child { font-size: 13px; color: var(--muted); margin-top: 18px; }
.product-shot { margin-top: 40px; transform-origin: center top; box-shadow: 0 35px 120px #0007,0 0 70px #7c8cff09; }
.product-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg,#7c8cff09,transparent 35%); }
.feature-list article { transition: border-color .3s; }
.feature-list article:hover { border-color: #7c8cff77; }
.feature-list article:hover .feature-number { color: var(--text); }
.native-band { position: relative; overflow: hidden; }
.native-band::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 40%; background: repeating-linear-gradient(90deg,transparent 0 39px,#7c8cff06 39px 40px); pointer-events: none; }
.download-panel { position: relative; overflow: hidden; }
.download-panel::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 1px; background: var(--accent); box-shadow: 0 0 25px 4px #7c8cff33; }
.faq details[open] p { animation: answer-in .3s var(--ease-out); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (min-width: 901px) and (max-height: 759px) {
  .source-preview { height: 95px; }
  .channel-grid { padding-top: 22px; }
  .console-top { padding-block: 14px; }
  .signal-path { height: 36px; }
  .story-chapters { margin-bottom: 16px; }
}
@media (max-width: 1000px) {
  .channel-grid { gap: 12px; }
  .capture-console { padding-inline: 18px; }
  .source-title { padding-inline: 8px; }
  .source-bottom { font-size: 11px; }
  .output-file { padding: 10px; }
  .file-heading small { font-size: 11px; }
  .outro-note { display: none; }
  .principle-outro { justify-content: start; gap: 50px; }
}
@media (max-width: 700px) {
  .nav { height: 68px; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: clamp(35px,8vw,54px); letter-spacing: -.055em; }
  .hero-copy { font-size: 14px; max-width: 330px; margin-inline: auto; }
  .hero-copy br:first-child { display: initial; }
  .hero-actions { gap: 18px; }
  .hero-triptych { margin-top: 42px; height: 240px; }
  .hero-ruler { font-size: 11px; letter-spacing: 0; }
  .hero-pane { width: 43%; height: 160px; top: 48px; }
  .pane-left { left: -2%; transform: translateY(12px) translateZ(-80px) rotate(-7deg); }
  .pane-center { left: 28.5%; }
  .pane-right { right: -2%; transform: translateY(12px) translateZ(-80px) rotate(7deg); }
  .pane-top { padding-inline: 8px; font-size: 11px; letter-spacing: 0; }
  .pane-bottom { font-size: 11px; left: 9px; }
  .hero-pane .type-field { padding: 12px; }
  .hero-pane .type-field span { font-size: 17px; letter-spacing: -.7px; }
  .hero-pane .voice-field { gap: 4px; }
  .hero-pane .voice-field i { width: 4px; }
  .hero-sync { font-size: 11px; gap: 10px; letter-spacing: .7px; }
  .hero-sync span { width: 20px; }
  .explore-link { margin-top: 15px; font-size: 11px; }
  .explore-index { white-space: nowrap; flex-shrink: 0; margin-left: 4px; }
  .capture-story { margin-top: 35px; }
  .story-chapters { gap: 7px; font-size: 11px; justify-content: space-between; }
  .story-chapters > span { flex-direction: column; align-items: start; gap: 7px; }
  .story-chapters > i { max-width: 30px; }
  .story-chapters b { font-size: 11px; }
  .capture-console { padding-inline: 13px; }
  .console-top { padding-block: 17px; font-size: 11px; letter-spacing: 0; }
  .console-top > span { gap: 7px; }
  .channel-grid { grid-template-columns: 1fr; gap: 18px; padding-top: 19px; }
  .source-channel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 14px; }
  .source-preview { height: 90px; }
  .source-title { height: 30px; font-size: 11px; }
  .source-title b { font-size: 11px; padding-right: 3px; }
  .source-preview .type-field { padding: 12px; }
  .source-preview .type-field span { font-size: 16px; letter-spacing: -.6px; }
  .source-preview .type-field i { margin-top: 9px; width: 20px; }
  .source-bottom { padding: 6px; min-height: 24px; font-size: 11px; letter-spacing: 0; }
  .source-preview .voice-field { gap: 4px; }
  .source-preview .voice-field i { width: 4px; }
  .signal-path { position: absolute; height: 1px; width: 14px; left: calc(50% - 7px); background: var(--accent); }
  .signal-path > *,.signal-path::before { display: none; }
  .output-file { padding: 10px; }
  .file-heading { font-size: 11px; gap: 6px; }
  .file-heading .file-icon { width: 13px; height: 17px; }
  .file-heading small { font-size: 11px; }
  .file-wave { height: 25px; margin-top: 12px; }
  .file-meta { font-size: 11px; }
  .file-meta > span:last-child { display: none; }
  .simulation-note { font-size: 11px; margin-inline: 10px; }
  .principle-outro { padding: 45px 0 60px; gap: 20px; }
  .principle-outro > p { font-size: 26px; letter-spacing: -1px; }
  .outro-index { font-size: 11px; }
  .interface-section { padding-block: 65px; }
  .interface-heading h2 { font-size: 30px; }
  .interface-heading p:last-child { font-size: 12px; }
  .product-shot { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .source-channel,.output-file,.signal-path { transform: none !important; opacity: 1 !important; }
  .hero-pane { will-change: auto; }
}
/* Les petites annotations restent lisibles, y compris sur écran étroit. */

@media(max-width:700px) { .source-bottom > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .file-heading { flex-wrap: wrap; } .file-heading small { display: none; } .hero-pane .pane-bottom { display: none; } .pane-top { font-size: 11px; } .hero-sync { font-size: 11px; } .hero-ruler { font-size: 11px; } }

.motion-preference { display: flex; justify-content: end; padding-top: 14px; }
.motion-preference button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; font: 11px var(--mono); padding: 10px 13px; min-height: 38px; }
.motion-preference button::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 9px; background: var(--accent); }
.motion-preference button[aria-pressed=true]::before { background: var(--muted); }
.motion-preference button:disabled { cursor: default; }
html.reduce-motion { scroll-behavior: auto; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; }
.reduce-motion .capture-story { min-height: 0 !important; }
.reduce-motion .capture-pin { position: static !important; }
.reduce-motion .source-channel, .reduce-motion .output-file, .reduce-motion .signal-path { transform: none !important; opacity: 1 !important; }
/* Élément en attente sous l'écran : invisible, jamais à l'impression ni en mouvement réduit. */
@media screen { html:not(.reduce-motion) .is-waiting { opacity: 0; } }

.outro-index { white-space: nowrap; flex-shrink: 0; }

/* Mouvement d'ambiance : indépendant de la rotation des fenêtres et de l'entrée. */
.hero-pane { animation: window-float 6.5s ease-in-out infinite; animation-play-state: paused; }
.pane-center { animation-delay: -2.2s; animation-duration: 7.5s; }
.pane-right { animation-delay: -4.5s; animation-duration: 7s; }
.hero-triptych.is-floating .hero-pane { animation-play-state: running; }
@keyframes window-float {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-pane:hover { scale: 1.035; border-color: #a7b1ff; box-shadow: 0 30px 65px #0008,0 0 32px #7c8cff20; z-index: 3; }
  .source-channel:hover .source-window,.source-channel:hover .output-file { border-color: #7c8cff99; }
}
.console-summary { color: var(--accent); font-size: 11px; white-space: nowrap; }
.capture-story .source-channel { transition: transform .85s var(--ease-out); }
.capture-story .signal-path { transition: opacity .4s .3s,transform .55s .3s var(--ease-out); }
.capture-story .output-file { transition: opacity .5s .48s,transform .65s .48s var(--ease-out),border-color .3s; }
.capture-story[data-phase=closing] .source-channel,.capture-story[data-phase=closed] .source-channel { transition: transform .85s .22s var(--ease-out); }
.capture-story[data-phase=closing] .signal-path,.capture-story[data-phase=closed] .signal-path { transition: opacity .25s,transform .4s var(--ease-out); }
.capture-story[data-phase=closing] .output-file,.capture-story[data-phase=closed] .output-file { transition: opacity .25s,transform .4s var(--ease-out),border-color .3s; }
.capture-story.is-instant * { transition: none !important; }

@media (max-width: 700px) {
  .console-summary { display: none !important; }
  .capture-console { padding-bottom: 19px; }
  .file-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pane { animation: none; }
}