/* This page has its own palette and composition. The shared tester is unchanged. */
body.page-bienvenue {
  --bg-primary: #111415;
  --bg-secondary: #1a2021;
  --bg-card: #1a2021;
  --text-primary: #f2f3ed;
  --text-secondary: #b1bbb7;
  --text-muted: #a4afaa;
  --border-color: #35403b;
  --color-accent: #c3efa6;
  --color-accent-light: #ddfacb;
  --color-cta: #c3efa6;
  --color-cta-dark: #d8f8c3;
  --welcome-line: #313b36;
  background: #111415;
  color: var(--text-primary);
}
.page-bienvenue [hidden] { display: none !important; }
.page-bienvenue :focus-visible { outline: 3px solid #c3efa6; outline-offset: 5px; }
.page-bienvenue p { margin-bottom: 0; }
.page-bienvenue .btn { border-radius: 8px; min-height: 48px; }
.page-bienvenue .btn--primary { background: #c3efa6; color: #152312; border-color: #c3efa6; font-weight: 700; }
.page-bienvenue .btn--primary:hover { background: #d8f8c3; color: #152312; border-color: #d8f8c3; }
.page-bienvenue .btn--secondary { background: #202925; border: 1px solid #64766b; color: #f2f3ed; }
.page-bienvenue .btn--secondary:hover { background: #303e36; border-color: #95ad9d; }
.welcome-hero, .welcome-discover, .welcome-footer { width: min(1360px, calc(100% - 112px)); margin-inline: auto; }
.welcome-hero { min-height: 100svh; display: flex; flex-direction: column; padding-top: 32px; }
.welcome-masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.welcome-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 28px; }
.welcome-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #e2eadc; font-size: 14px; text-decoration: none; }
.welcome-nav a:hover { color: #c3efa6; text-decoration: underline; text-underline-offset: 5px; }
.welcome-brand { font-size: clamp(25px, 2.7vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: .035em; }
.welcome-brand strong { font-weight: 750; }
.welcome-tagline { margin-top: 9px; font-size: clamp(13px, 1.3vw, 17px); color: #c3efa6; }
.welcome-wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; letter-spacing: .13em; white-space: nowrap; }
.welcome-wordmark strong { font-weight: 700; }
.welcome-monogram { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #60735c; border-radius: 8px; color: #c3efa6; font-size: 24px; font-weight: 600; letter-spacing: 0; margin-right: 6px; box-shadow: inset 0 -3px #293527; }
.welcome-arrival { font-size: 12px; color: #a4afaa; }
.welcome-scene { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr); grid-template-areas: 'copy demo' 'actions actions'; align-content: center; column-gap: 30px; row-gap: 30px; margin-block: 54px; }
.welcome-copy { grid-area: copy; position: relative; z-index: 1; }
.welcome-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .15em; line-height: 1.6; color: #b0bcb4; }
.welcome-copy .welcome-eyebrow { display: flex; align-items: center; gap: 10px; }
.welcome-copy .welcome-eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #c3efa6; flex: none; }
#welcome-title { margin-top: 25px; font-size: clamp(48px, 5.15vw, 78px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
#welcome-title em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: #c3efa6; letter-spacing: -.035em; }
.welcome-lead { margin-top: 26px; max-width: 380px; font-size: 16px; line-height: 1.75; }
.welcome-lead strong { font-weight: 400; color: #e6eae3; }
.welcome-actions { grid-area: actions; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 22px; position: relative; z-index: 1; text-align: center; }
.welcome-actions .btn { padding: 16px 25px; min-width: 240px; border-width: 1px; border-style: solid; font-size: 15px; }
.welcome-download { gap: 10px; }
.welcome-device-note { flex-basis: 100%; font-size: 12px; color: #a4afaa; line-height: 1.7; }
.welcome-hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--welcome-line); padding-block: 24px; }
.welcome-hero-bottom p { font-size: 13px; }
.welcome-hero-bottom > span { font-size: 9px; letter-spacing: .12em; color: #a4afaa; }
.welcome-hero-bottom > span > span { margin-inline: 8px; }

/* The visual is made of text and CSS keycaps, so it stays sharp at every size. */
.welcome-demo { grid-area: demo; position: relative; align-self: center; padding: 22px 0 28px; isolation: isolate; }
.welcome-demo::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -60px -30px -35px; background: radial-gradient(ellipse at 55% 53%, #6e965521, transparent 68%); }
.welcome-demo-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-inline: 30px; color: #a4afaa; font-size: 9px; letter-spacing: .14em; }
#welcome-replay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border: none; border-radius: 6px; min-height: 44px; padding-inline: 10px; color: #b1bbb7; font-size: 11px; letter-spacing: 0; cursor: pointer; }
#welcome-replay:hover { color: #eef3e9; background: #ffffff09; }
#welcome-replay > span { font-size: 20px; }
.welcome-demo-output { padding: 24px 25px 36px; font-size: clamp(46px, 5.7vw, 85px); font-weight: 600; letter-spacing: -.065em; line-height: 1.13; color: #f2f3ed; }
.welcome-demo-line { display: block; white-space: pre; }
.welcome-accent { color: #c3efa6; text-shadow: 0 0 28px #bbeb9333; }
.welcome-caret { display: inline-block; height: .78em; width: 2px; background: #c3efa6; margin-left: .15em; opacity: .65; }
.is-playing [data-demo-key]:not(.is-typed) { opacity: .08; }
.welcome-keyboard-scene { position: relative; padding: 10px 5px 24px; }
.welcome-keybed { display: grid; grid-template-columns: 1.32fr repeat(4, 1fr); gap: 10px; padding: 14px; border: 1px solid #485048; border-radius: 20px; background: linear-gradient(160deg, #343b35, #1d221f 35%, #171c19); box-shadow: inset 0 1px 0 #70796655, 0 7px 0 #0d100e, 0 8px 0 #3b443a, 0 26px 40px #0009; transform: perspective(850px) rotateX(20deg) rotateZ(-5deg); }
.welcome-demo-key { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 11px; border: 1px solid #6b7465; background: linear-gradient(145deg, #424b40, #2c332c 60%, #252d25); box-shadow: inset 0 1px 1px #afc2a344, inset 0 -5px 2px #182018, 0 5px 2px #0c110c; color: #e8eee0; font-size: clamp(28px, 3.6vw, 49px); font-weight: 500; transition: transform .1s, box-shadow .1s, border-color .1s; }
.welcome-demo-key small { position: absolute; top: 9px; right: 10px; color: #b7d3a3; font-size: 10px; }
.welcome-demo-caps { aspect-ratio: auto; font-size: 14px; line-height: 1.35; align-items: flex-end; justify-content: flex-start; padding: 14px; color: #d2f6b6; border-color: #8bb16a; box-shadow: inset 0 0 15px #c3efa615, inset 0 -5px 2px #1a2615, 0 5px 2px #0c110c, 0 0 18px #b2ed891c; }
.welcome-demo-caps i { position: absolute; top: 12px; left: 14px; width: 5px; height: 5px; border-radius: 50%; background: #c3efa6; box-shadow: 0 0 9px 2px #c3efa688; }
.welcome-demo-key.is-pressed { transform: translateY(4px); border-color: #cbf0ae; color: #d9f8c4; box-shadow: inset 0 0 25px #c3efa62b, inset 0 -1px 2px #182018, 0 1px 2px #0c110c, 0 0 20px #b5ee7c44; }
.welcome-demo-caption { display: flex; align-items: center; justify-content: center; gap: 9px; padding-top: 12px; font-size: 10px; color: #bdc8b8; }
.welcome-led { width: 4px; height: 4px; background: #c3efa6; border-radius: 50%; flex: none; }
.welcome-caption-aside { margin-left: 8px; color: #a4afaa; }

.welcome-discover { padding-block: 100px 70px; }
.welcome-discover-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 80px; }
.welcome-discover-heading .welcome-eyebrow { grid-column: 1 / -1; margin-bottom: 20px; }
.welcome-discover h2 { font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.welcome-discover-heading > p:last-child { max-width: 390px; font-size: 15px; line-height: 1.8; }
.welcome-discoveries { margin-top: 50px; }
.welcome-discovery { display: grid; grid-template-columns: 140px 1fr 40px; gap: 25px; align-items: center; padding: 30px 10px; border-top: 1px solid var(--welcome-line); }
.welcome-discovery:last-child { border-bottom: 1px solid var(--welcome-line); }
.welcome-discovery-symbol { color: #c3efa6; font-size: 65px; line-height: 1.2; letter-spacing: -.07em; font-weight: 400; }
.welcome-discovery-symbol > span { font-family: Georgia, serif; color: #b6c5ad; font-style: italic; }
.welcome-symbol-dot { font-size: 85px; line-height: .9; padding-bottom: 25px; }
.welcome-discovery h3 { font-weight: 500; font-size: 20px; margin-bottom: 9px; }
.welcome-discovery p { font-size: 14px; line-height: 1.7; }
.welcome-discovery-number { color: #a4afaa; font-size: 11px; align-self: start; padding-top: 8px; }
.welcome-discover-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; font-size: 13px; }
.welcome-discover-foot a { display: inline-flex; align-items: center; min-height: 44px; gap: 15px; text-decoration: underline; text-underline-offset: 5px; }
.welcome-discover-foot p { font-size: 12px; }
.welcome-footer { padding-block: 34px 28px; border-top: 1px solid var(--welcome-line); }
.welcome-footer-top, .welcome-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.welcome-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.welcome-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: #dce4d7; font-size: 13px; }
.welcome-footer-bottom { margin-top: 28px; color: #a4afaa; font-size: 11px; }
.welcome-footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Keep all input-engine hooks and keyboard styles inside the existing tour. */
#welcome-trial { scroll-margin-top: 12px; max-width: 68rem; margin: 24px auto; padding-block: 16px; }
.welcome-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
#welcome-trial button, #welcome-trial select, #welcome-trial a { min-height: 44px; }
#welcome-trial button, #welcome-trial select { font: inherit; }
#welcome-trial select { background: #202925; color: #f2f3ed; border: 1px solid #64766b; padding: 9px 32px 9px 12px; border-radius: 6px; }
#welcome-trial .card { background: #1a2021; border: 1px solid #48554c; border-radius: 14px; padding: clamp(20px, 4vw, 38px); box-shadow: none; }
#welcome-trial #welcome-exercise { padding: 20px 24px; scroll-margin-top: 12px; }
#welcome-stage { font-weight: 500; font-size: clamp(23px, 2.5vw, 30px); margin-top: 6px; }
#welcome-exercise .mt-3, #welcome-exercise .mt-4 { margin-top: 8px !important; }
#welcome-instruction { font-size: 14px; line-height: 1.5; }
#welcome-caps, #welcome-exercise label { font-size: 14px; line-height: 1.4; }
#welcome-target, #welcome-input { font-size: clamp(1.1rem, 3.5vw, 1.65rem); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
#welcome-target { letter-spacing: .015em; color: #d9f5c6; }
.welcome-entry { display: grid; grid-template-columns: minmax(0, 38rem) auto; justify-content: start; align-items: center; gap: 8px 16px; margin-top: 6px; }
.welcome-entry-actions { display: flex; flex-direction: column; gap: 8px; }
#welcome-input { min-height: 48px; max-height: 7rem; overflow-y: auto; font-size: 20px; line-height: 1.4; border: 2px solid #72866a; background: #111815; border-radius: .5rem; padding: 8px 12px; margin: 0; }
#welcome-input[aria-readonly="true"] { border-color: #c3efa6; }
#welcome-input:empty::before { content: attr(data-placeholder); color: #acb7a7; pointer-events: none; }
.welcome-keyboard-help { margin-top: 12px; }
#welcome-hint { line-height: 1.6; margin: 0; }
#welcome-hint:not(:empty) { margin-bottom: 6px; }
#welcome-caps { font-weight: 600; }
#welcome-caps[data-active="true"]::before { content: '● '; color: #c3efa6; }
#welcome-status { min-height: 1.7rem; font-weight: 600; color: #d9f5c6; }
#welcome-count { font-variant-numeric: tabular-nums; }
#welcome-themes [data-complete="true"]::after { content: ' ✓'; }
#welcome-keyboard-container { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding: .4rem; margin: 0; }
#welcome-keyboard-container .keyboard-container { margin: 0 auto; }
#welcome-keyboard-container .key { cursor: pointer; }
#welcome-keyboard-container .welcome-key-next { outline: 3px solid #c3efa6; outline-offset: 1px; }
#welcome-keyboard-container .welcome-key-dead { outline: 3px solid #ffbd7d; outline-offset: 1px; }
@media (min-width: 761px) and (max-height: 800px) {
  #welcome-keyboard-container .azerty-keyboard { --key-height: 42px; --key-width: 48px; --keyboard-padding: 10px; --key-gap: 3px; --key-font-size: 16px; --key-font-size-small: 11px; }
}

@media (min-width: 901px) and (max-height: 760px) {
  .welcome-hero { padding-top: 22px; }
  .welcome-scene { margin-block: 30px; row-gap: 22px; }
  #welcome-title { font-size: clamp(48px, 4.7vw, 67px); margin-top: 15px; }
  .welcome-lead { margin-top: 20px; }
  .welcome-demo { padding-block: 0; }
  .welcome-demo-output { font-size: clamp(44px, 4.8vw, 66px); padding-block: 12px 20px; }
  .welcome-keyboard-scene { padding-bottom: 14px; }
  .welcome-hero-bottom { padding-block: 16px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .welcome-hero, .welcome-discover, .welcome-footer { width: calc(100% - 64px); }
  .welcome-scene { column-gap: 20px; }
  .welcome-caption-aside { display: none; }
  .welcome-demo-top, .welcome-demo-output { padding-inline: 8px; }
  .welcome-demo-key small { right: 7px; top: 7px; }
  .welcome-keybed { padding: 10px; gap: 7px; }
  .welcome-demo-caps { padding: 10px; font-size: 12px; }
}
@media (max-width: 760px) {
  .welcome-nav { gap: 0 14px; }
  .welcome-nav a { font-size: 12px; }
  #welcome-trial #welcome-exercise { padding: 16px; }
  .welcome-hero, .welcome-discover, .welcome-footer { width: calc(100% - 48px); }
  .welcome-hero { padding-top: 24px; min-height: 100svh; }
  .welcome-monogram { height: 28px; width: 28px; font-size: 19px; border-radius: 6px; }
  .welcome-wordmark { font-size: 11px; gap: 6px; }
  .welcome-arrival { display: none; }
  .welcome-scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'demo' 'actions'; row-gap: 25px; margin-block: 32px; }
  #welcome-title { font-size: clamp(38px, 7.3vw, 54px); margin-top: 0; }
  #welcome-title br:nth-of-type(2) { display: none; }
  #welcome-title em::before { content: ' '; }
  .welcome-copy .welcome-eyebrow { display: none; }
  .welcome-lead { margin-top: 16px; font-size: 14px; line-height: 1.65; max-width: 440px; }
  .welcome-demo { width: min(100%, 460px); justify-self: center; padding-block: 0 12px; }
  .welcome-demo::before { inset: -20px -15px; }
  .welcome-demo-top { min-height: 24px; padding-inline: 0; }
  .welcome-demo-top > span { font-size: 8px; }
  #welcome-replay { position: absolute; top: -6px; right: -8px; font-size: 10px; }
  .welcome-demo-output { font-size: 46px; padding: 15px 10px 22px; }
  .welcome-demo-line { display: inline; }
  .welcome-demo-line:first-child::after { content: ' '; }
  .welcome-demo-output { font-size: clamp(22px, 6.9vw, 41px); letter-spacing: -.055em; white-space: nowrap; }
  .welcome-keyboard-scene { padding: 8px 2px 14px; }
  .welcome-keybed { gap: 7px; padding: 9px; border-radius: 13px; transform: perspective(700px) rotateX(16deg) rotateZ(-4deg); }
  .welcome-demo-key { font-size: 31px; border-radius: 7px; }
  .welcome-demo-key small { font-size: 8px; top: 5px; right: 6px; }
  .welcome-demo-caps { font-size: 10px; padding: 9px; }
  .welcome-demo-caps i { top: 9px; left: 10px; width: 4px; height: 4px; }
  .welcome-demo-caption { font-size: 9px; gap: 7px; padding-top: 8px; }
  .welcome-caption-aside { font-size: 8px; margin-left: 3px; }
  .welcome-actions { gap: 12px 18px; }
  .welcome-actions .btn { padding: 13px 20px; font-size: 14px; min-height: 48px; }
  .welcome-device-note { font-size: 11px; margin-top: 6px; }
  .welcome-device-note br { display: none; }
  .welcome-hero-bottom { align-items: start; gap: 8px; flex-direction: column; padding-block: 20px; }
  .welcome-hero-bottom p { font-size: 12px; }
  .welcome-hero-bottom > span { font-size: 8px; }
  .welcome-discover { padding-block: 58px 42px; }
  .welcome-discover-heading { display: block; }
  .welcome-discover-heading > p:last-child { margin-top: 20px; font-size: 14px; }
  .welcome-discover-heading .welcome-eyebrow { font-size: 9px; }
  .welcome-discoveries { margin-top: 30px; }
  .welcome-discovery { grid-template-columns: 58px 1fr; gap: 18px; padding: 25px 0; }
  .welcome-discovery-symbol { font-size: 42px; }
  .welcome-symbol-dot { font-size: 60px; padding-bottom: 22px; }
  .welcome-discovery h3 { font-size: 17px; }
  .welcome-discovery p { font-size: 13px; }
  .welcome-discovery-number { display: none; }
  .welcome-discover-foot { gap: 14px; }
  .welcome-footer nav { gap: 4px 23px; }
  .welcome-footer nav a { font-size: 12px; }
  .welcome-footer-bottom { align-items: flex-start; gap: 14px; line-height: 1.8; }
  #welcome-trial { width: 100%; min-width: 0; padding-top: 16px; }
  #welcome-keyboard-container { --key-width: 44px; --key-height: 48px; --key-gap: 3px; --keyboard-padding: 8px; --key-font-size: 15px; --key-font-size-small: 11px; }
  #welcome-trial select { max-width: 100%; }
  .welcome-entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .welcome-entry-actions { flex-direction: row; flex-wrap: wrap; }
  #welcome-help { font-size: 13px; }
}
@media (max-width: 400px) {
  .welcome-scene { margin-block: 26px; row-gap: 20px; }
  #welcome-title { font-size: 36px; }
  .welcome-lead { font-size: 13px; margin-top: 14px; }
  .welcome-actions { gap: 12px 15px; }
  .welcome-actions .btn { padding-inline: 19px; }
  .welcome-device-note { font-size: 10px; }
  .welcome-caption-aside { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(> .page-bienvenue) { scroll-behavior: auto; }
  .page-bienvenue *, .page-bienvenue *::before, .page-bienvenue *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .welcome-demo.is-playing [data-demo-key] { opacity: 1; }
}