/* Écran 01 — Prénom : neumorphisme (soft UI).
   Palette : fond #E4E8EF, ombre claire #FFFFFF, ombre sombre #B9C2D0, accent #3A57E8. */
.slide[data-screen="01"] {
  --n-bg: #E4E8EF;
  --n-light: #ffffff;
  --n-dark: rgb(163 177 198 / .62);
  --n-dark-soft: rgb(163 177 198 / .38);
  --n-ink: #1F2633;
  --n-muted: #6B7688;
  --n-accent: #3A57E8;
  --n-ease: cubic-bezier(.2,.8,.2,1);
  --n-spring: cubic-bezier(.34,1.56,.64,1);
  background: var(--n-bg);
  color: var(--n-ink);
  font-family: "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
  padding-left: 1.25rem; padding-right: 1.25rem;
}

/* Barre d'avancement : rail creusé, piste en relief bleutée */
.slide[data-screen="01"] .q-progress {
  position: sticky; top: max(.75rem, env(safe-area-inset-top)); height: .75rem; margin: .75rem 0 0 auto;
  width: min(100% - 2.75rem, 20rem); border-radius: 999px; background: var(--n-bg); overflow: visible;
  box-shadow: inset 3px 3px 7px var(--n-dark), inset -3px -3px 7px var(--n-light);
  animation: s01-in .6s var(--n-ease) both;
}
.slide[data-screen="01"] .q-progress i {
  position: relative; height: 100%; min-width: .75rem; border-radius: 999px;
  background: linear-gradient(180deg, #6D84F5 0%, var(--n-accent) 60%, #2C46CC 100%);
  box-shadow: 2px 3px 6px rgb(58 87 232 / .35), inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(0 0 0 / .12);
  transition: width .8s var(--n-ease);
}
.slide[data-screen="01"] .q-progress i::after {
  content: ""; position: absolute; top: 50%; right: -.1rem; width: .9rem; height: .9rem; border-radius: 50%;
  transform: translateY(-50%); background: var(--n-bg);
  box-shadow: 3px 3px 6px var(--n-dark), -2px -2px 5px var(--n-light), inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--n-accent);
}

/* Carte extrudée */
.slide[data-screen="01"] .s01-wrap { max-width: 26rem; gap: 0; padding-top: 2rem; }
.slide[data-screen="01"] .s01-card {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  padding: 2.25rem 1.5rem 1.75rem; border-radius: 2rem; background: var(--n-bg);
  box-shadow: 12px 12px 28px var(--n-dark), -12px -12px 28px var(--n-light), inset 0 0 0 1px rgb(255 255 255 / .35);
  animation: s01-in .7s var(--n-ease) both;
}
.slide[data-screen="01"] .s01-card > * { animation: s01-rise .6s var(--n-ease) both; }
.slide[data-screen="01"] .s01-orb   { animation-delay: .1s; }
.slide[data-screen="01"] .s01-kicker{ animation-delay: .18s; }
.slide[data-screen="01"] .s01-q     { animation-delay: .24s; }
.slide[data-screen="01"] .s01-field { animation-delay: .32s; }
.slide[data-screen="01"] .s01-next  { animation-delay: .42s; }
.slide[data-screen="01"] .s01-hint  { animation-delay: .5s; }

/* Pastille icône en relief, pupille bleue discrète */
.slide[data-screen="01"] .s01-orb {
  width: 4.25rem; height: 4.25rem; border-radius: 50%; display: grid; place-items: center; color: var(--n-accent);
  background: var(--n-bg);
  box-shadow: 6px 6px 14px var(--n-dark), -6px -6px 14px var(--n-light), inset 0 0 0 1px rgb(255 255 255 / .4);
  position: relative;
}
.slide[data-screen="01"] .s01-orb::before {
  content: ""; position: absolute; inset: .55rem; border-radius: 50%;
  box-shadow: inset 3px 3px 6px var(--n-dark-soft), inset -3px -3px 6px var(--n-light);
}
.slide[data-screen="01"] .s01-ico { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; position: relative; }
.slide[data-screen="01"] .s01-kicker { margin: -.2rem 0 -.5rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--n-muted); }

/* Question : une seule ligne, centrée (le JS ajuste la taille si besoin) */
.slide[data-screen="01"] .s01-q {
  display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden;
  font-size: clamp(1.15rem, 5.6vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--n-ink);
}

/* Champ enfoncé (inset), qui se creuse davantage au focus */
.slide[data-screen="01"] .s01-field {
  position: relative; width: 100%; border-radius: 1.1rem; background: var(--n-bg);
  box-shadow: inset 5px 5px 11px var(--n-dark), inset -5px -5px 11px var(--n-light);
  transition: box-shadow .35s var(--n-ease), transform .35s var(--n-ease);
}
.slide[data-screen="01"] .is-focus .s01-field {
  transform: scale(1.01);
  box-shadow: inset 7px 7px 14px var(--n-dark), inset -7px -7px 14px var(--n-light), 0 0 0 3px rgb(58 87 232 / .16), 0 10px 24px -12px rgb(58 87 232 / .35);
}
.slide[data-screen="01"] .s01-field input {
  width: 100%; height: 3.5rem; padding: 0 3rem 0 1.25rem; border: 0; border-radius: inherit; background: transparent;
  font-size: 1.15rem; font-weight: 500; color: var(--n-ink); caret-color: var(--n-accent); outline: none; text-align: left;
}
.slide[data-screen="01"] .s01-field input::placeholder { color: #9AA5B8; font-weight: 400; transition: opacity .25s; }
.slide[data-screen="01"] .is-focus .s01-field input::placeholder { opacity: .6; }
.slide[data-screen="01"] .s01-field input:focus-visible { outline: none; }
.slide[data-screen="01"] .s01-check {
  position: absolute; top: 50%; right: .8rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--n-accent);
  transform: translateY(-50%) scale(0); opacity: 0;
  box-shadow: 2px 3px 6px rgb(58 87 232 / .35), inset 0 1px 0 rgb(255 255 255 / .4);
  transition: transform .35s var(--n-spring), opacity .2s;
}
.slide[data-screen="01"] .s01-check svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s .12s var(--n-ease); }
.slide[data-screen="01"] .has-value .s01-check { transform: translateY(-50%) scale(1); opacity: 1; }
.slide[data-screen="01"] .has-value .s01-check svg { stroke-dashoffset: 0; }

/* Erreur : secousse + teinte */
.slide[data-screen="01"] .s01-err { margin: -.4rem 0 -.2rem; min-height: 1.2em; font-size: .85rem; font-weight: 500; color: #C93B3B; text-align: center; }
.slide[data-screen="01"] .is-error .s01-field { animation: s01-shake .45s var(--n-ease); box-shadow: inset 5px 5px 11px var(--n-dark), inset -5px -5px 11px var(--n-light), 0 0 0 3px rgb(201 59 59 / .18); }

/* Bouton Suivant : en relief, s'enfonce au press, s'active quand le prénom est saisi */
.slide[data-screen="01"] .s01-next {
  position: relative; width: 100%; height: 3.5rem; border: 0; border-radius: 1.1rem; background: var(--n-bg); color: var(--n-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 6px 6px 14px var(--n-dark-soft), -6px -6px 14px var(--n-light), inset 0 0 0 1px rgb(255 255 255 / .3);
  transition: color .3s, box-shadow .3s var(--n-ease), transform .3s var(--n-spring);
  -webkit-tap-highlight-color: transparent;
}
.slide[data-screen="01"] .s01-next::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 3px rgb(58 87 232 / .12), 0 14px 30px -14px rgb(58 87 232 / .55);
  transition: opacity .35s;
}
.slide[data-screen="01"] .s01-next-ico { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; transition: transform .35s var(--n-spring), background .3s, color .3s; }
.slide[data-screen="01"] .s01-next-ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="01"] .has-value .s01-next {
  color: var(--n-accent);
  box-shadow: 8px 8px 18px var(--n-dark), -8px -8px 18px var(--n-light), inset 0 0 0 1px rgb(255 255 255 / .5);
}
.slide[data-screen="01"] .has-value .s01-next::before { opacity: 1; }
.slide[data-screen="01"] .has-value .s01-next-ico { background: var(--n-accent); color: #fff; transform: translateX(.15rem); box-shadow: 2px 2px 5px rgb(58 87 232 / .35); }
.slide[data-screen="01"] .s01-next:hover { transform: translateY(-1px); }
.slide[data-screen="01"] .s01-next:active {
  transform: translateY(1px) scale(.985);
  box-shadow: inset 5px 5px 11px var(--n-dark), inset -5px -5px 11px var(--n-light);
}
.slide[data-screen="01"] .s01-next:active::before { opacity: 0; }
.slide[data-screen="01"] .s01-next:active .s01-next-ico { transform: translateX(.35rem) scale(.95); }
.slide[data-screen="01"] .s01-next:focus-visible { outline: none; box-shadow: 8px 8px 18px var(--n-dark), -8px -8px 18px var(--n-light), 0 0 0 3px rgb(58 87 232 / .35); }
.slide[data-screen="01"] .s01-hint { margin: -.3rem 0 0; font-size: .74rem; color: #9AA5B8; letter-spacing: .02em; }

@keyframes s01-in { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes s01-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes s01-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (min-width: 768px) {
  .slide[data-screen="01"] .s01-wrap { max-width: 28rem; }
  .slide[data-screen="01"] .q-progress { margin-left: auto; margin-right: auto; width: min(100%, 22rem); }
  .slide[data-screen="01"] .s01-card { padding: 2.75rem 2.25rem 2rem; gap: 1.25rem; }
  .slide[data-screen="01"] .s01-q { font-size: 1.6rem; }
  .slide[data-screen="01"] .s01-hint { display: block; }
}
@media (max-width: 767px) { .slide[data-screen="01"] .s01-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="01"] .s01-card, .slide[data-screen="01"] .s01-card > *, .slide[data-screen="01"] .q-progress { animation: none; }
  .slide[data-screen="01"] .is-error .s01-field { animation: none; }
  .slide[data-screen="01"] .s01-next, .slide[data-screen="01"] .s01-next-ico, .slide[data-screen="01"] .s01-check, .slide[data-screen="01"] .s01-field { transition-duration: .01ms; }
}