/* Écran 5 — DA « Bubble » : tuiles franches, bulles grainées, vraies icônes, typo géométrique grasse */
.slide[data-screen="05"] {
  --royal: #1B4DFF; --rose: #FFD3DC; --red: #F03B3B; --grey: #C9D3DF; --navy: #0E1A4A;
  color: var(--navy);
  font-family: "Century Gothic", "Avenir Next", Futura, "Trebuchet MS", system-ui, sans-serif;
}
.slide[data-screen="05"] .defs { position: absolute; }
.slide[data-screen="05"] .wrap { gap: 1rem; padding-top: 2.5rem; }
.slide[data-screen="05"] .head { position: relative; text-align: center; }
/* la ligne du sur-titre réserve la place de la bulle compteur (à droite) : la question garde toute la largeur */
.slide[data-screen="05"] .kick { display: flex; align-items: center; justify-content: center; min-height: 3.4rem; margin: 0 0 .2rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--royal); font-weight: 700; }
.slide[data-screen="05"] .q { margin: 0; font-size: clamp(1rem, 4.8vw, 2.4rem); line-height: 1.12; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.slide[data-screen="05"] .q b { font-weight: 800; }

/* Compteur en bulle flottante */
.slide[data-screen="05"] .count {
  position: absolute; right: 0; top: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; color: #fff; text-align: center;
  background: radial-gradient(circle at 32% 27%, #fff 0 7%, #8BA4FF 13%, var(--royal) 58%, #0E2CB0);
  box-shadow: inset -5px -7px 12px rgb(0 0 0 / .2), 0 14px 22px -12px rgb(27 77 255 / .75);
  transform: scale(0) rotate(-20deg); transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="05"] .count.on { transform: none; animation: s05-float 3.8s ease-in-out infinite; }
.slide[data-screen="05"] .count b { display: block; font-size: 1.35rem; line-height: 1; font-weight: 800; }
.slide[data-screen="05"] .count span { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.slide[data-screen="05"] .wave { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff; opacity: 0; pointer-events: none; }
.slide[data-screen="05"] .count .wave { border-color: var(--royal); }

/* Grille de tuiles */
.slide[data-screen="05"] .grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.slide[data-screen="05"] .tile {
  position: relative; min-height: 8.8rem; padding: .8rem .9rem .85rem; border: 0; border-radius: 1.4rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: left; overflow: hidden;
  font-family: inherit; color: var(--navy);
  animation: s05-rise .6s cubic-bezier(.34,1.56,.64,1) backwards;
  transition: box-shadow .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="05"] .grid > :nth-child(2) { animation-delay: .07s; }
.slide[data-screen="05"] .grid > :nth-child(3) { animation-delay: .14s; }
.slide[data-screen="05"] .grid > :nth-child(4) { animation-delay: .21s; }
.slide[data-screen="05"] .grid > :nth-child(5) { animation-delay: .28s; }
.slide[data-screen="05"] .grid > :nth-child(6) { animation-delay: .35s; }
.slide[data-screen="05"] .grid.ready > .tile { animation: none; }
.slide[data-screen="05"] .t-blue { background: var(--royal); color: #fff; }
.slide[data-screen="05"] .t-pink { background: var(--rose); }
.slide[data-screen="05"] .t-red { background: var(--red); color: #fff; }
.slide[data-screen="05"] .t-grey { background: var(--grey); }
.slide[data-screen="05"] .t-navy { background: var(--navy); color: #fff; }
.slide[data-screen="05"] .t-line { background: #fff; box-shadow: inset 0 0 0 2px #E3E8F0; }

.slide[data-screen="05"] .bub { position: absolute; top: .45rem; right: .35rem; width: 5.3rem; height: 5.3rem; animation: s05-float 4.2s ease-in-out infinite; }
.slide[data-screen="05"] .grid > :nth-child(odd) .bub { animation-duration: 5s; animation-delay: -1.3s; }
.slide[data-screen="05"] .grid > :nth-child(3n) .bub { animation-delay: -2.4s; }
.slide[data-screen="05"] .bub svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.slide[data-screen="05"] .t-pink .wave, .slide[data-screen="05"] .t-grey .wave { border-color: var(--navy); }
.slide[data-screen="05"] .drop { position: absolute; left: 50%; top: 50%; width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgb(255 255 255 / .35) 60%, rgb(255 255 255 / .1)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .8); }
.slide[data-screen="05"] .t-pink .drop, .slide[data-screen="05"] .t-grey .drop { box-shadow: inset 0 0 0 1.5px rgb(14 26 74 / .45); }

/* Pastille de notification sur l'icône (style iOS) */
.slide[data-screen="05"] .cnt { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .3s ease-in; }
.slide[data-screen="05"] .cnt text { fill: #fff; font: 800 11px "Century Gothic", "Avenir Next", Futura, system-ui, sans-serif; }
.slide[data-screen="05"] [aria-pressed="true"] .cnt { transform: scale(1); transition: transform .5s cubic-bezier(.34,2,.64,1) .25s; }
.slide[data-screen="05"] .rg path { opacity: .35; }
.slide[data-screen="05"] [aria-pressed="true"] .rg path { animation: s05-ring 1.4s ease-in-out infinite; }
.slide[data-screen="05"] [aria-pressed="true"] .rg path + path { animation-delay: .2s; }

.slide[data-screen="05"] .lab { position: relative; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
/* Sous-titre qui bascule en micro-notification */
.slide[data-screen="05"] .sub {
  position: relative; display: inline-grid; overflow: hidden; margin-top: .35rem; font-size: .7rem; padding: .15rem .55rem; border-radius: 1rem;
  background: rgb(255 255 255 / .28); transition: background .3s, color .3s, box-shadow .3s;
}
.slide[data-screen="05"] .t-pink .sub, .slide[data-screen="05"] .t-grey .sub { background: rgb(255 255 255 / .6); }
.slide[data-screen="05"] .sub > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .25s; }
.slide[data-screen="05"] .s1 { display: flex; align-items: center; gap: .3rem; font-weight: 700; opacity: 0; transform: translateY(120%); }
.slide[data-screen="05"] .s1 i { flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: #FF3B30; }
.slide[data-screen="05"] [aria-pressed="true"] .sub { background: #fff; color: var(--navy); box-shadow: 0 6px 14px -8px rgb(14 26 74 / .6); }
.slide[data-screen="05"] [aria-pressed="true"] .s0 { opacity: 0; transform: translateY(-120%); }
.slide[data-screen="05"] [aria-pressed="true"] .s1 { opacity: 1; transform: none; transition-delay: .18s; }
.slide[data-screen="05"] [aria-pressed="true"] .s1 i { animation: s05-ping 1.6s ease-out infinite; }

.slide[data-screen="05"] .tile[aria-pressed="true"] { transform: scale(1.03); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--navy), 0 16px 28px -14px rgb(14 26 74 / .6); }
.slide[data-screen="05"] .tile[aria-pressed="true"] .bub { transform-origin: center; animation: s05-inflate .5s cubic-bezier(.34,1.56,.64,1) forwards, s05-float 4.2s ease-in-out .5s infinite; }

.slide[data-screen="05"] .badge {
  position: absolute; top: .6rem; left: .6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: 0 3px 8px rgb(0 0 0 / .18);
  transform: scale(0) rotate(-40deg); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="05"] .badge svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="05"] [aria-pressed="true"] .badge { transform: scale(1) rotate(0); }
.slide[data-screen="05"] .t-line .badge { background: var(--royal); color: #fff; }

.slide[data-screen="05"] .other { justify-content: center; gap: .5rem; }
.slide[data-screen="05"] .other-t { display: flex; align-items: center; gap: .6rem; border: 0; background: none; padding: 0; font-family: inherit; color: inherit; }
.slide[data-screen="05"] .plus { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--rose); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s; }
.slide[data-screen="05"] .other[aria-pressed="true"] .plus { transform: rotate(45deg); background: var(--red); color: #fff; }
.slide[data-screen="05"] .other input { width: 100%; min-width: 0; padding: .55rem .7rem; border: 0; border-radius: .8rem; background: #F1F4F9; font-family: inherit; font-size: .85rem; }

.slide[data-screen="05"] .next {
  position: sticky; bottom: 0; min-height: 3.4rem; border: 0; border-radius: 1.2rem; background: var(--royal); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
  box-shadow: 0 12px 24px -12px rgb(27 77 255 / .8), 0 -14px 16px 4px #fff; transition: opacity .25s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="05"] .next:disabled { opacity: .35; cursor: not-allowed; box-shadow: 0 -14px 16px 4px #fff; }

@media (min-width: 768px) {
  .slide[data-screen="05"] .wrap { max-width: 40rem; padding-top: 0; }
  .slide[data-screen="05"] .kick { min-height: 4.6rem; }
  .slide[data-screen="05"] .count { width: 4.6rem; height: 4.6rem; }
  .slide[data-screen="05"] .grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .slide[data-screen="05"] .tile { min-height: 10.5rem; }
  .slide[data-screen="05"] .tile:hover:not([aria-pressed="true"]) { transform: translateY(-3px); }
  .slide[data-screen="05"] .next { position: static; align-self: flex-end; min-width: 12rem; box-shadow: 0 12px 24px -12px rgb(27 77 255 / .8); }
}

@keyframes s05-rise { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes s05-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: 4deg; } }
@keyframes s05-inflate { 0% { scale: 1; } 60% { scale: 1.22; } 100% { scale: 1.12; } }
@keyframes s05-ping { 0% { box-shadow: 0 0 0 0 rgb(255 59 48 / .6); } 100% { box-shadow: 0 0 0 6px rgb(255 59 48 / 0); } }
@keyframes s05-ring { 0%, 100% { opacity: .3; } 45% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="05"] .bub, .slide[data-screen="05"] .count.on, .slide[data-screen="05"] .s1 i { animation: none !important; }
  .slide[data-screen="05"] [aria-pressed="true"] .rg path { animation: none !important; opacity: 1; }
}

/* Barre d'avancement : pilule « Bubble » bleu royal, reflet brillant et goutte de lumière */
.slide[data-screen="05"] .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: #E3E8F0; box-shadow: inset 0 1px 2px rgb(14 26 74 / .12);
}
.slide[data-screen="05"] .q-progress i {
  position: relative; border-radius: 999px;
  background:
    linear-gradient(rgb(255 255 255 / .45), rgb(255 255 255 / 0)) 0 0 / 100% 45% no-repeat,
    linear-gradient(#5C80FF, var(--royal) 55%, #0E2CB0);
}
.slide[data-screen="05"] .q-progress i::after {
  content: ""; position: absolute; right: 3px; top: 1.5px; width: 3px; height: 3px; border-radius: 50%;
  background: rgb(255 255 255 / .85);
}