/* Écran 6 — « learning roadmap » : pervenche #8FB1FF, pilules blanches → noires, touches orange / rose,
   applis cochées en orbite autour du personnage doodle */
.slide[data-screen="06"] { --ink: #0B0B0F; --orange: #FF7A1A; --pink: #F0A6F5; --peri: #8FB1FF; color: var(--ink); }
.slide[data-screen="06"] .wrap { gap: .8rem; padding-top: 2.2rem; }
.slide[data-screen="06"] .q { margin: 0; text-align: center; font-size: clamp(1.1rem, 5.7vw, 2.2rem); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.slide[data-screen="06"] .q b { font-weight: 800; }

/* Scène : collée en haut pendant le défilement pour voir les icônes arriver */
.slide[data-screen="06"] .scene {
  position: sticky; top: -1px; z-index: 2; margin: 0 -1rem; padding: .35rem 1rem .6rem;
  background: var(--peri);
}
.slide[data-screen="06"] .scene::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.1rem; pointer-events: none;
  background: linear-gradient(var(--peri), rgb(143 177 255 / 0));
}
.slide[data-screen="06"] .scene svg { width: 100%; height: auto; max-height: 10.5rem; margin: 0 auto; overflow: visible; }
.slide[data-screen="06"] .orbit { opacity: .28; animation: s06-orbit 18s linear infinite; }
.slide[data-screen="06"] .happy .orbit { opacity: .45; }

.slide[data-screen="06"] .walker { animation: s06-walk .9s ease-in-out infinite alternate; }
.slide[data-screen="06"] .lg1, .slide[data-screen="06"] .arm2 { transform-origin: 160px 110px; animation: s06-swing .9s ease-in-out infinite alternate; }
.slide[data-screen="06"] .lg2, .slide[data-screen="06"] .arm1 { transform-origin: 160px 110px; animation: s06-swing .9s ease-in-out infinite alternate-reverse; }
.slide[data-screen="06"] .armR { transform-origin: 182px 80px; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="06"] .cheer .armR { transform: rotate(-100deg); }
.slide[data-screen="06"] .yay { opacity: 0; transition: opacity .2s; }
.slide[data-screen="06"] .cheer .yay { opacity: 1; animation: s06-yay .5s .15s cubic-bezier(.34,1.56,.64,1) both; }
.slide[data-screen="06"] .yay { transform-box: fill-box; transform-origin: 0 100%; }

/* Visage : neutre → sourire (≥ 1 appli) → yeux rieurs (ajout) / bouche en « o » (retrait) */
.slide[data-screen="06"] .face > * { transition: opacity .25s; }
.slide[data-screen="06"] .eye-h, .slide[data-screen="06"] .m-s, .slide[data-screen="06"] .m-o, .slide[data-screen="06"] .cheek { opacity: 0; }
.slide[data-screen="06"] .happy .m-n { opacity: 0; }
.slide[data-screen="06"] .happy .m-s, .slide[data-screen="06"] .happy .cheek { opacity: 1; }
.slide[data-screen="06"] .cheer .eye { opacity: 0; }
.slide[data-screen="06"] .cheer .eye-h { opacity: 1; }
.slide[data-screen="06"] .oops .m-n, .slide[data-screen="06"] .oops .m-s { opacity: 0; }
.slide[data-screen="06"] .oops .m-o { opacity: 1; }

/* Icônes en orbite */
.slide[data-screen="06"] .orb { opacity: 0; transform-box: fill-box; transform-origin: center; }
.slide[data-screen="06"] .orb.on { opacity: 1; animation: s06-bob 3.2s ease-in-out infinite; }
.slide[data-screen="06"] .orb text { fill: var(--ink); stroke: none; font: 800 7px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.slide[data-screen="06"] .orbs > g:nth-child(2n) .orb { animation-delay: -.8s; }
.slide[data-screen="06"] .orbs > g:nth-child(3n) .orb { animation-delay: -1.7s; animation-duration: 3.8s; }

.slide[data-screen="06"] .note { margin: -.35rem 0 .1rem; text-align: center; font-size: .82rem; font-style: italic; opacity: .72; }

/* Pilules */
/* padding bas : « Suivant » (collant) ne vient jamais se coller à « Autre logiciel » en fin de liste */
.slide[data-screen="06"] .list { display: grid; gap: .5rem; padding-bottom: 4.75rem; }
.slide[data-screen="06"] .pill {
  display: flex; align-items: center; gap: .8rem; width: 100%; padding: .45rem .5rem .45rem .45rem;
  border: 0; border-radius: 2.2rem; background: #fff; color: var(--ink); text-align: left;
  animation: s06-in .5s cubic-bezier(.22,1,.36,1) backwards;
  transition: background .35s cubic-bezier(.4,0,.2,1), color .35s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="06"] .list > :nth-child(2) { animation-delay: .04s; }
.slide[data-screen="06"] .list > :nth-child(3) { animation-delay: .08s; }
.slide[data-screen="06"] .list > :nth-child(4) { animation-delay: .12s; }
.slide[data-screen="06"] .list > :nth-child(5) { animation-delay: .16s; }
.slide[data-screen="06"] .list > :nth-child(6) { animation-delay: .2s; }
.slide[data-screen="06"] .list > :nth-child(7) { animation-delay: .24s; }
.slide[data-screen="06"] .list > :nth-child(8) { animation-delay: .28s; }
.slide[data-screen="06"] .list > :nth-child(9) { animation-delay: .32s; }
.slide[data-screen="06"] .list > :nth-child(10) { animation-delay: .36s; }
.slide[data-screen="06"] .list > :nth-child(11) { animation-delay: .4s; }
.slide[data-screen="06"] .pill[aria-pressed="true"] { background: var(--ink); color: #fff; }

.slide[data-screen="06"] .dot { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background .35s, color .35s; }
.slide[data-screen="06"] .dot svg, .slide[data-screen="06"] .chev { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="06"] [aria-pressed="true"] > .dot, .slide[data-screen="06"] .other[aria-pressed="true"] .dot { background: #fff; color: var(--ink); }
.slide[data-screen="06"] .list > :nth-child(3n+2)[aria-pressed="true"] > .dot { background: var(--pink); }
.slide[data-screen="06"] .list > :nth-child(3n)[aria-pressed="true"] > .dot { background: var(--orange); color: #fff; }

.slide[data-screen="06"] .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.slide[data-screen="06"] .txt strong { font-weight: 700; font-size: .98rem; }
.slide[data-screen="06"] .txt small { font-size: .75rem; opacity: .6; }

.slide[data-screen="06"] .go { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: #EEF2FF; color: var(--ink); overflow: hidden; transition: background .35s, color .35s; }
.slide[data-screen="06"] .chev { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="06"] [aria-pressed="true"] > .go, .slide[data-screen="06"] .other[aria-pressed="true"] .go { background: #26262D; color: #fff; }
.slide[data-screen="06"] [aria-pressed="true"] > .go .chev, .slide[data-screen="06"] .other[aria-pressed="true"] .chev { animation: s06-slide .5s cubic-bezier(.22,1,.36,1); transform: translateX(2px); }

.slide[data-screen="06"] .other { flex-direction: column; align-items: stretch; gap: 0; border-radius: 1.6rem; }
.slide[data-screen="06"] .other-t { display: flex; align-items: center; gap: .8rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.slide[data-screen="06"] .other input { max-height: 0; opacity: 0; padding: 0 1rem; margin: 0; border: 0; border-radius: 1.4rem; background: #26262D; color: #fff; transition: max-height .3s, opacity .25s, margin .3s, padding .3s; }
.slide[data-screen="06"] .other input::placeholder { color: rgb(255 255 255 / .5); }
.slide[data-screen="06"] .other[aria-pressed="true"] input, .slide[data-screen="06"] .other input:focus { max-height: 3.2rem; opacity: 1; margin: .45rem .1rem .15rem; padding: .7rem 1rem; }

.slide[data-screen="06"] .next {
  position: sticky; bottom: 0; z-index: 2; min-height: 3.4rem; border: 0; border-radius: 2rem; background: var(--ink); color: #fff;
  font-weight: 700; font-size: 1.05rem; box-shadow: 0 14px 26px -14px rgb(11 11 15 / .8), 0 -18px 18px 6px var(--peri); transition: opacity .25s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="06"] .next:disabled { opacity: .4; cursor: not-allowed; }

@media (min-width: 768px) {
  .slide[data-screen="06"] .wrap { max-width: 40rem; padding-top: 0; }
  .slide[data-screen="06"] .scene { position: static; margin: 0; padding: .4rem 0 .6rem; background: none; }
  .slide[data-screen="06"] .scene::after { content: none; }
  .slide[data-screen="06"] .scene svg { max-height: 13rem; }
  .slide[data-screen="06"] .list { grid-template-columns: 1fr 1fr; gap: .6rem; padding-bottom: 1.5rem; }
  .slide[data-screen="06"] .other { grid-column: 1 / -1; }
  .slide[data-screen="06"] .pill:hover:not([aria-pressed="true"]) { background: #F4F6FF; }
  .slide[data-screen="06"] .next { position: static; align-self: center; min-width: 14rem; }
}

@keyframes s06-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3.5px; } }
@keyframes s06-orbit { to { stroke-dashoffset: -90; } }
@keyframes s06-walk { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes s06-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes s06-yay { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes s06-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes s06-slide { 0% { transform: translateX(0); } 45% { transform: translateX(160%); } 46% { transform: translateX(-160%); } 100% { transform: translateX(2px); } }

@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="06"] .walker, .slide[data-screen="06"] .walker *, .slide[data-screen="06"] .orb,
  .slide[data-screen="06"] .orbit { animation: none !important; }
}

/* Barre d'avancement : pilule blanche sur pervenche, remplissage noir, pastille orange en tête */
.slide[data-screen="06"] .q-progress {
  top: max(.5rem, env(safe-area-inset-top));
  width: 100%; max-width: 40rem; height: 8px;
  margin: calc(max(.5rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-top))) auto .5rem;
  border-radius: 999px; background: #fff; box-shadow: 0 4px 10px -6px rgb(11 11 15 / .35);
}
.slide[data-screen="06"] .q-progress i { position: relative; border-radius: 999px; background: var(--ink); }
.slide[data-screen="06"] .q-progress i::after {
  content: ""; position: absolute; right: 2px; top: 2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--orange);
}