/* Écran 03 — Seul·e ou en équipe : bleu-violet, trait fin marine, jaune et rouge sobres, grain gouache. */
.slide[data-screen="03"] { color: #fff; }
.slide[data-screen="03"] .s03-defs { position: absolute; width: 0; height: 0; }
.slide[data-screen="03"] .s03-grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1; mix-blend-mode: multiply; pointer-events: none; }
.slide[data-screen="03"] .s03-wrap { position: relative; max-width: 46rem; align-items: center; text-align: center; gap: 2rem; padding: 1.5rem 0; }

.slide[data-screen="03"] .s03-head { display: flex; flex-direction: column; align-items: center; gap: .6rem; animation: s03-in .7s .1s cubic-bezier(.2,.8,.2,1) both; }
.slide[data-screen="03"] .s03-kicker { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #F5B400; }
.slide[data-screen="03"] .s03-title {
  margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600;
  font-size: clamp(1.1rem, 5.2vw, 3rem); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; text-align: center;
}
.slide[data-screen="03"] .s03-sub { margin: 0; max-width: 30ch; font-size: .95rem; line-height: 1.45; color: rgb(255 255 255 / .82); }

.slide[data-screen="03"] .s03-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; }
.slide[data-screen="03"] .s03-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .9rem .55rem 1.05rem; border: 1px solid rgb(255 255 255 / .28); border-radius: 1.6rem;
  background: rgb(255 255 255 / .06); color: #fff;
  box-shadow: 0 1px 0 rgb(255 255 255 / .12) inset;
  transition: transform .45s cubic-bezier(.3,1.4,.5,1), background .35s, border-color .35s, color .35s, opacity .35s, box-shadow .35s;
  animation: s03-in .7s cubic-bezier(.2,.8,.2,1) both; -webkit-tap-highlight-color: transparent;
}
.slide[data-screen="03"] .s03-solo { animation-delay: .22s; }
.slide[data-screen="03"] .s03-team { animation-delay: .32s; }
.slide[data-screen="03"] .s03-choice:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .6); transform: translateY(-4px); }
.slide[data-screen="03"] .s03-choice:active { transform: scale(.97); }
.slide[data-screen="03"] .s03-choice:focus-visible { outline: 2px solid #F5B400; outline-offset: 4px; }
.slide[data-screen="03"] .s03-choice.is-picked {
  background: #F4F1EA; border-color: #F4F1EA; color: #1B1D4A;
  box-shadow: 0 18px 40px -18px rgb(20 20 70 / .6);
}
.slide[data-screen="03"] .s03-choice.is-dim { opacity: .4; transform: scale(.96); }
.slide[data-screen="03"] .s03-ill { width: 100%; max-width: 15rem; overflow: visible; margin-bottom: .35rem; }
.slide[data-screen="03"] .s03-label { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight: 600; font-size: 1.3rem; line-height: 1.1; }
.slide[data-screen="03"] .s03-cap { font-size: .78rem; letter-spacing: .02em; opacity: .75; }
.slide[data-screen="03"] .s03-check {
  position: absolute; top: .7rem; right: .7rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: #1B1D4A; color: #F5B400;
  opacity: 0; transform: scale(.4); transition: opacity .25s, transform .45s cubic-bezier(.3,1.7,.5,1);
}
.slide[data-screen="03"] .s03-check svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="03"] .is-picked .s03-check { opacity: 1; transform: none; }

/* Liens pointillés : le signal circule en continu */
.slide[data-screen="03"] .s03-link { animation: s03-flow 1.6s linear infinite; }
.slide[data-screen="03"] .s03-steam { animation: s03-steam 2.8s ease-in-out infinite; }
.slide[data-screen="03"] .s03-eye { transform-box: fill-box; transform-origin: center; animation: s03-blink 5s infinite; }

/* Seul·e : le perso fait coucou au survol, sautille au choix */
.slide[data-screen="03"] .s03-hand { transform-box: fill-box; transform-origin: 10% 95%; transform: rotate(40deg) translateY(10px); opacity: 0; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .25s; }
.slide[data-screen="03"] .s03-solo:hover .s03-hand, .slide[data-screen="03"] .s03-solo:focus-visible .s03-hand, .slide[data-screen="03"] .s03-solo.is-go .s03-hand { opacity: 1; transform: none; animation: s03-wave 1s .3s ease-in-out infinite; }
.slide[data-screen="03"] .s03-win1 { transform-box: fill-box; transform-origin: 50% 100%; }
.slide[data-screen="03"] .s03-solo.is-go .s03-win1 { animation: s03-hop .55s cubic-bezier(.3,1.6,.5,1); }

/* En équipe : le van ronronne au survol, démarre au choix */
.slide[data-screen="03"] .s03-van { transform-box: fill-box; transform-origin: 50% 100%; }
.slide[data-screen="03"] .s03-team:hover .s03-van, .slide[data-screen="03"] .s03-team:focus-visible .s03-van { animation: s03-idle .28s ease-in-out infinite; }
.slide[data-screen="03"] .s03-team.is-go .s03-van { animation: s03-jolt .18s ease-in-out 2, s03-drive .55s .36s cubic-bezier(.6,0,.9,.4) forwards; }
.slide[data-screen="03"] .s03-heads { animation: s03-bob 1.6s ease-in-out infinite; }
.slide[data-screen="03"] .s03-puffs { opacity: 0; }
.slide[data-screen="03"] .s03-team.is-go .s03-puffs { animation: s03-puff .7s .25s ease-out forwards; }

@keyframes s03-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes s03-flow { to { stroke-dashoffset: -16; } }
@keyframes s03-steam { 0%, 100% { opacity: .2; transform: translateY(1px); } 50% { opacity: .9; transform: translateY(-2px); } }
@keyframes s03-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes s03-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-22deg); } }
@keyframes s03-hop { 40% { transform: translateY(-8px); } }
@keyframes s03-idle { 50% { transform: translateY(-1.2px); } }
@keyframes s03-jolt { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes s03-drive { to { transform: translateX(160%); } }
@keyframes s03-puff { 0% { opacity: .9; transform: translateX(0) scale(.6); } 100% { opacity: 0; transform: translateX(-22px) scale(1.5); } }
@keyframes s03-bob { 50% { transform: translateY(-1.2px); } }

@media (max-width: 359px) {
  .slide[data-screen="03"] .s03-choices { gap: .5rem; }
  .slide[data-screen="03"] .s03-label { font-size: 1.1rem; }
}
@media (min-width: 768px) {
  .slide[data-screen="03"] .s03-wrap { gap: 2.75rem; }
  .slide[data-screen="03"] .s03-sub { font-size: 1.05rem; }
  .slide[data-screen="03"] .s03-choices { gap: 1.75rem; }
  .slide[data-screen="03"] .s03-choice { padding: 1.75rem 1.25rem 1.6rem; border-radius: 2rem; }
  .slide[data-screen="03"] .s03-label { font-size: 1.65rem; }
  .slide[data-screen="03"] .s03-cap { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="03"] * { animation: none !important; }
  .slide[data-screen="03"] .s03-hand { transition: none; }
}

/* Barre d'avancement : trait de gouache jaune posé sur un rail marine translucide */
.slide[data-screen="03"] .q-progress {
  top: max(.5rem, env(safe-area-inset-top));
  width: 100%; max-width: 46rem; height: 7px;
  margin: calc(max(.5rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-top))) auto .5rem;
  border-radius: 999px; background: rgb(27 29 74 / .42);
  box-shadow: inset 0 1px 2px rgb(20 20 70 / .35), 0 1px 0 rgb(255 255 255 / .12);
}
.slide[data-screen="03"] .q-progress i {
  border-radius: 4px 999px 999px 4px / 3px 999px 999px 4px;
  background:
    repeating-linear-gradient(100deg, rgb(255 255 255 / .18) 0 1.5px, transparent 1.5px 6px),
    linear-gradient(#F8C640, #F5B400 55%, #DDA000);
}