/* Écran 02 — Métier : claymorphisme (pâte à modeler : coins 24–32 px, pastels, ombre extérieure douce
   + ombres internes claire/sombre qui gonflent la forme). */
.slide[data-screen="02"] {
  --c-bg: #F1EDFF;
  --c-ink: #2A2352;
  --c-muted: #6F66A0;
  --c-accent: #7B4DFF;
  --c-accent-deep: #5B32D6;
  --c-ease: cubic-bezier(.2,.8,.2,1);
  --c-spring: cubic-bezier(.34,1.56,.64,1);
  --clay-light: rgb(255 255 255 / .8);
  padding-left: 0; padding-right: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, sans-serif;
}

/* Blobs décoratifs en pâte, flottants */
.slide[data-screen="02"] .s02-blob {
  position: absolute; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; pointer-events: none; z-index: 0;
  box-shadow: 0 30px 60px -30px rgb(90 60 190 / .35), inset -18px -18px 36px rgb(120 90 220 / .18), inset 18px 18px 36px var(--clay-light);
  animation: s02-float 9s ease-in-out infinite alternate;
}
.slide[data-screen="02"] .s02-blob-a { width: 14rem; height: 12rem; top: -4rem; right: -5rem; background: #E3D6FF; }
.slide[data-screen="02"] .s02-blob-b { width: 11rem; height: 10rem; bottom: -3rem; left: -4rem; background: #FFDDEB; animation-delay: -4s; animation-duration: 11s; }

/* Barre d'avancement : boudin pastel gonflé */
.slide[data-screen="02"] .q-progress {
  position: sticky; top: max(.75rem, env(safe-area-inset-top)); z-index: 30;
  height: 1rem; margin: .75rem 1rem 0 auto; width: min(100% - 4.75rem, 20rem);
  border-radius: 999px; background: #E6DEFF; overflow: hidden;
  box-shadow: 0 8px 16px -8px rgb(90 60 190 / .35), inset -3px -3px 6px rgb(120 90 220 / .22), inset 3px 3px 6px var(--clay-light);
  animation: s02-in .6s var(--c-ease) both;
}
.slide[data-screen="02"] .q-progress i {
  height: 100%; min-width: 1rem; border-radius: 999px;
  background: linear-gradient(90deg, #B79CFF, var(--c-accent));
  box-shadow: inset -3px -3px 6px rgb(70 30 180 / .35), inset 3px 3px 6px rgb(255 255 255 / .55);
  transition: width .8s var(--c-ease);
}

.slide[data-screen="02"] .s02-wrap { max-width: none; gap: 1rem; position: relative; z-index: 1; }
.slide[data-screen="02"] .s02-head { padding: 1.5rem 1.5rem 0; text-align: center; animation: s02-in .7s .1s var(--c-ease) both; }
.slide[data-screen="02"] .s02-kicker {
  display: inline-block; margin: 0 0 .7rem; padding: .35rem .9rem; border-radius: 999px;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--c-accent-deep); background: #E9E0FF;
  box-shadow: 0 6px 12px -6px rgb(90 60 190 / .35), inset -2px -2px 4px rgb(120 90 220 / .2), inset 2px 2px 4px var(--clay-light);
}
.slide[data-screen="02"] .s02-title { margin: 0; font-weight: 700; font-size: clamp(1.45rem, 7.5vw, 2.5rem); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }

/* Carrousel */
.slide[data-screen="02"] .s02-track {
  list-style: none; margin: 0; padding: 1.25rem calc(50% - 7.75rem) 1.5rem;
  display: flex; gap: 1.1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slide[data-screen="02"] .s02-track::-webkit-scrollbar { display: none; }
.slide[data-screen="02"] .s02-card {
  flex: 0 0 15.5rem; height: 20.5rem; scroll-snap-align: center; perspective: 1100px;
  animation: s02-pop .7s var(--c-spring) both;
}
.slide[data-screen="02"] .s02-card:nth-child(1) { animation-delay: .2s; }
.slide[data-screen="02"] .s02-card:nth-child(2) { animation-delay: .3s; }
.slide[data-screen="02"] .s02-card:nth-child(3) { animation-delay: .4s; }
.slide[data-screen="02"] .s02-card:nth-child(n+4) { animation-delay: .5s; }
.slide[data-screen="02"] .s02-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .75s var(--c-spring), opacity .4s;
}
.slide[data-screen="02"] .is-flipped .s02-inner { transform: rotateY(180deg); }
/* Une face retournée ne doit plus capter les clics (la photo, transformée, échappe sinon à backface-visibility) */
.slide[data-screen="02"] .is-flipped .s02-front { pointer-events: none; }
.slide[data-screen="02"] .is-flipped .s02-photo { visibility: hidden; transition: visibility 0s .3s; }
.slide[data-screen="02"] .s02-card:not(.is-flipped) .s02-back { pointer-events: none; }
.slide[data-screen="02"] .s02-card:not(.is-center):not(.is-flipped) .s02-inner { transform: scale(.92) translateY(.4rem); opacity: .78; }

/* Teintes pastel par métier : --p = pâte, --s = ombre interne (même teinte, plus sombre), --d = ombre portée */
.slide[data-screen="02"] .s02-c-co { --p: #DCCFFF; --s: rgb(123 77 255 / .28); --d: rgb(123 77 255 / .4); }
.slide[data-screen="02"] .s02-c-ba { --p: #CFE3FF; --s: rgb(60 120 230 / .28); --d: rgb(60 120 230 / .38); }
.slide[data-screen="02"] .s02-c-ta { --p: #FFD8C4; --s: rgb(230 110 60 / .28); --d: rgb(230 110 60 / .38); }
.slide[data-screen="02"] .s02-c-es { --p: #FFD3E6; --s: rgb(230 80 150 / .28); --d: rgb(230 80 150 / .38); }
.slide[data-screen="02"] .s02-c-on { --p: #CDF1E2; --s: rgb(30 170 120 / .28); --d: rgb(30 170 120 / .38); }
.slide[data-screen="02"] .s02-c-ma { --p: #FFEBBF; --s: rgb(220 160 30 / .3); --d: rgb(220 160 30 / .38); }
.slide[data-screen="02"] .s02-c-ph { --p: #E5D6FF; --s: rgb(140 90 240 / .28); --d: rgb(140 90 240 / .38); }
.slide[data-screen="02"] .s02-c-sp { --p: #E9F3C2; --s: rgb(130 170 30 / .3); --d: rgb(130 170 30 / .38); }
.slide[data-screen="02"] .s02-c-ar { --p: #FFDCD3; --s: rgb(230 100 80 / .28); --d: rgb(230 100 80 / .38); }

/* Faces en pâte */
.slide[data-screen="02"] .s02-face {
  position: absolute; inset: 0; border-radius: 2rem; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: .75rem; padding: .9rem;
  background: var(--p); color: var(--c-ink); border: 0; text-align: left;
  box-shadow: 0 24px 40px -18px var(--d), inset -10px -10px 22px var(--s), inset 10px 10px 22px var(--clay-light);
}
.slide[data-screen="02"] .s02-front {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--c-spring), box-shadow .35s var(--c-ease);
}
.slide[data-screen="02"] .s02-front:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 34px 48px -18px var(--d), inset -10px -10px 22px var(--s), inset 10px 10px 22px var(--clay-light);
}
.slide[data-screen="02"] .s02-front:active {
  transform: translateY(.15rem) scale(.965);
  box-shadow: 0 12px 24px -14px var(--d), inset -6px -6px 14px var(--s), inset 6px 6px 14px var(--clay-light);
}
.slide[data-screen="02"] .s02-front:focus-visible { outline: none; box-shadow: 0 24px 40px -18px var(--d), inset -10px -10px 22px var(--s), inset 10px 10px 22px var(--clay-light), 0 0 0 4px rgb(123 77 255 / .45); }

/* Photo dans un cadre arrondi gonflé */
.slide[data-screen="02"] .s02-frame {
  display: block; flex: 1 1 auto; min-height: 0; padding: .5rem; border-radius: 1.5rem; background: var(--p);
  box-shadow: inset -6px -6px 14px var(--s), inset 6px 6px 14px var(--clay-light), 0 10px 18px -12px var(--d);
}
.slide[data-screen="02"] .s02-photo {
  width: 100%; height: 100%; object-fit: cover; border-radius: 1.1rem;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35), 0 8px 16px -10px rgb(0 0 0 / .45);
  transform: scale(1); transition: transform .6s var(--c-ease); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.slide[data-screen="02"] .is-center .s02-photo { transform: scale(1.03); }
.slide[data-screen="02"] .s02-label { display: flex; flex-direction: column; gap: .15rem; padding: 0 .35rem .15rem; }
.slide[data-screen="02"] .s02-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.slide[data-screen="02"] .s02-hint { font-size: .74rem; color: var(--c-muted); font-weight: 500; }

/* Dos : phrase miroir + « C'est moi » */
.slide[data-screen="02"] .s02-back {
  transform: rotateY(180deg); justify-content: center; align-items: center; gap: 1rem; padding: 1.4rem 1.2rem; text-align: center; overflow: hidden;
}
.slide[data-screen="02"] .s02-back-blob {
  position: absolute; top: -3rem; right: -3rem; width: 9rem; height: 8rem; border-radius: 50% 45% 55% 50% / 45% 55% 45% 55%;
  background: var(--p); pointer-events: none;
  box-shadow: inset -8px -8px 16px var(--s), inset 8px 8px 16px var(--clay-light), 0 10px 20px -14px var(--d);
}
.slide[data-screen="02"] .s02-mirror { position: relative; margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.slide[data-screen="02"] .s02-me {
  position: relative; display: inline-flex; align-items: center; gap: .55rem; height: 3.1rem; padding: 0 1.4rem 0 .85rem; border: 0; border-radius: 999px;
  background: var(--c-accent); color: #fff; font-weight: 700; font-size: 1rem; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 16px 28px -12px rgb(91 50 214 / .65), inset -5px -5px 12px rgb(60 20 170 / .45), inset 5px 5px 12px rgb(255 255 255 / .35);
  transition: transform .3s var(--c-spring), box-shadow .3s var(--c-ease);
}
.slide[data-screen="02"] .s02-me:hover { transform: translateY(-2px); }
.slide[data-screen="02"] .s02-me:active { transform: translateY(1px) scale(.96); box-shadow: 0 6px 14px -10px rgb(91 50 214 / .6), inset -3px -3px 8px rgb(60 20 170 / .5), inset 3px 3px 8px rgb(255 255 255 / .3); }
.slide[data-screen="02"] .s02-me:focus-visible { outline: none; box-shadow: 0 16px 28px -12px rgb(91 50 214 / .65), inset -5px -5px 12px rgb(60 20 170 / .45), inset 5px 5px 12px rgb(255 255 255 / .35), 0 0 0 4px rgb(255 255 255 / .9); }
.slide[data-screen="02"] .s02-me-ico {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgb(255 255 255 / .22);
  box-shadow: inset -2px -2px 4px rgb(60 20 170 / .35), inset 2px 2px 4px rgb(255 255 255 / .35);
}
.slide[data-screen="02"] .s02-me-ico svg { width: .95rem; height: .95rem; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="02"] .s02-flipback {
  position: absolute; bottom: .8rem; right: .8rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--p); color: var(--c-ink);
  box-shadow: 0 8px 14px -8px var(--d), inset -4px -4px 8px var(--s), inset 4px 4px 8px var(--clay-light);
  transition: transform .3s var(--c-spring);
}
.slide[data-screen="02"] .s02-flipback svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="02"] .s02-flipback:hover { transform: rotate(-30deg); }
.slide[data-screen="02"] .s02-flipback:active { transform: scale(.9) rotate(-60deg); }
.slide[data-screen="02"] .is-chosen .s02-back { animation: s02-chosen .45s var(--c-spring); }
.slide[data-screen="02"] .is-chosen .s02-me { transform: scale(1.06); box-shadow: 0 20px 32px -12px rgb(91 50 214 / .7), inset -5px -5px 12px rgb(60 20 170 / .45), inset 5px 5px 12px rgb(255 255 255 / .35), 0 0 0 6px rgb(123 77 255 / .25); }

/* Points de pagination : petites billes en pâte */
.slide[data-screen="02"] .s02-dots { display: flex; justify-content: center; gap: .45rem; margin-top: -.5rem; }
.slide[data-screen="02"] .s02-dots i {
  width: .55rem; height: .55rem; border-radius: 999px; background: #DCD2FA;
  box-shadow: inset -1px -1px 2px rgb(120 90 220 / .3), inset 1px 1px 2px var(--clay-light);
  transition: width .35s var(--c-spring), background .3s;
}
.slide[data-screen="02"] .s02-dots i.on { width: 1.5rem; background: var(--c-accent); box-shadow: inset -2px -2px 4px rgb(60 20 170 / .4), inset 2px 2px 4px rgb(255 255 255 / .4), 0 4px 8px -4px rgb(91 50 214 / .5); }

/* Autre métier : bouton pâte + champ creusé */
.slide[data-screen="02"] .s02-other { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 0 1.25rem; animation: s02-in .7s .55s var(--c-ease) both; }
.slide[data-screen="02"] .s02-other-btn {
  display: inline-flex; align-items: center; gap: .55rem; height: 2.9rem; padding: 0 1.3rem 0 .8rem; border: 0; border-radius: 999px;
  background: #ECE6FF; color: var(--c-accent-deep); font-weight: 700; font-size: .95rem; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 20px -12px rgb(90 60 190 / .45), inset -4px -4px 10px rgb(120 90 220 / .22), inset 4px 4px 10px var(--clay-light);
  transition: transform .3s var(--c-spring), box-shadow .3s var(--c-ease);
}
.slide[data-screen="02"] .s02-other-btn:hover { transform: translateY(-2px); }
.slide[data-screen="02"] .s02-other-btn:active { transform: scale(.96); box-shadow: 0 4px 10px -8px rgb(90 60 190 / .45), inset -3px -3px 8px rgb(120 90 220 / .25), inset 3px 3px 8px var(--clay-light); }
.slide[data-screen="02"] .s02-other-ico { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-accent); color: #fff; box-shadow: inset -2px -2px 4px rgb(60 20 170 / .4), inset 2px 2px 4px rgb(255 255 255 / .4); transition: transform .35s var(--c-spring); }
.slide[data-screen="02"] .s02-other-ico svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.slide[data-screen="02"] .is-open .s02-other-ico { transform: rotate(45deg); }
.slide[data-screen="02"] .s02-other-field {
  display: flex; gap: .5rem; width: min(100%, 24rem); padding: .35rem; border-radius: 1.5rem; background: #E6DEFF;
  box-shadow: inset -5px -5px 12px rgb(120 90 220 / .22), inset 5px 5px 12px var(--clay-light), 0 10px 18px -12px rgb(90 60 190 / .4);
  max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transform: translateY(-.4rem) scale(.98);
  transition: max-height .45s var(--c-ease), opacity .35s, padding .35s, transform .45s var(--c-spring);
}
.slide[data-screen="02"] .is-open .s02-other-field { max-height: 5rem; opacity: 1; padding: .35rem; transform: none; }
.slide[data-screen="02"] .s02-other-field input {
  flex: 1 1 auto; min-width: 0; height: 2.9rem; padding: 0 1rem; border: 0; border-radius: 1.15rem; background: transparent;
  font-size: 1rem; font-weight: 500; color: var(--c-ink); caret-color: var(--c-accent);
}
.slide[data-screen="02"] .s02-other-field input::placeholder { color: #9A91C8; font-weight: 400; }
.slide[data-screen="02"] .s02-other-field input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(123 77 255 / .35); }
.slide[data-screen="02"] .s02-go {
  flex: none; height: 2.9rem; padding: 0 1.1rem; border: 0; border-radius: 1.15rem; background: var(--c-accent); color: #fff; font-weight: 700;
  box-shadow: 0 10px 18px -10px rgb(91 50 214 / .6), inset -4px -4px 10px rgb(60 20 170 / .45), inset 4px 4px 10px rgb(255 255 255 / .35);
  transition: transform .3s var(--c-spring);
}
.slide[data-screen="02"] .s02-go:active { transform: scale(.95); }
.slide[data-screen="02"] .s02-other.shake .s02-other-field { animation: s02-shake .4s; box-shadow: inset -5px -5px 12px rgb(120 90 220 / .22), inset 5px 5px 12px var(--clay-light), 0 0 0 3px rgb(230 80 120 / .35); }

@keyframes s02-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes s02-pop { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes s02-float { from { transform: translate(0, 0) rotate(0); } to { transform: translate(.6rem, 1rem) rotate(6deg); } }
@keyframes s02-chosen { 40% { transform: rotateY(180deg) scale(1.06); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes s02-shake { 25%, 75% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }

@media (min-width: 768px) {
  .slide[data-screen="02"] .q-progress { margin: .75rem auto 0; width: min(100%, 22rem); }
  .slide[data-screen="02"] .s02-head { padding-top: 2rem; }
  .slide[data-screen="02"] .s02-track { padding: 1.5rem calc(50% - 8.5rem) 1.75rem; gap: 1.4rem; }
  .slide[data-screen="02"] .s02-card { flex-basis: 17rem; height: 22.5rem; }
  .slide[data-screen="02"] .s02-blob-a { width: 20rem; height: 17rem; }
  .slide[data-screen="02"] .s02-blob-b { width: 16rem; height: 14rem; }
}
@media (min-width: 1024px) {
  .slide[data-screen="02"] .s02-title { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="02"] .s02-blob, .slide[data-screen="02"] .s02-card, .slide[data-screen="02"] .s02-head, .slide[data-screen="02"] .s02-other, .slide[data-screen="02"] .q-progress { animation: none; }
  .slide[data-screen="02"] .is-chosen .s02-back, .slide[data-screen="02"] .s02-other.shake .s02-other-field { animation: none; }
  .slide[data-screen="02"] .s02-inner, .slide[data-screen="02"] .s02-front, .slide[data-screen="02"] .s02-photo, .slide[data-screen="02"] .s02-other-field { transition-duration: .01ms; }
}