/* =============================================================================
   STARVIEW — PARCOURS D'INSCRIPTION
   =============================================================================
   Une question par ecran, sur fond noir. Le reste du site est clair : cet
   ecart est voulu. L'inscription est le seul moment ou l'on demande beaucoup
   a quelqu'un qui ne connait pas encore le produit ; l'obscurite retire tout
   ce qui n'est pas la question posee.

   La politique de securite du site interdit les attributs "style" en ligne et
   les balises <style> : toute animation vit ici, et les variations entre
   bulles passent par des classes. Le script ne touche qu'a une propriete, la
   largeur de la barre de progression, via l'interface CSSOM que la politique
   n'entrave pas.
   ============================================================================= */

:root {
    color-scheme: dark;

    --noir:            #000000;
    --encre:           #f5f5f7;
    --encre-douce:     rgba(245, 245, 247, 0.56);
    --encre-tenue:     rgba(245, 245, 247, 0.34);
    --accent:          #0a84ff;
    --accent-clair:    #409cff;
    --danger:          #ff453a;
    --trait:           rgba(245, 245, 247, 0.16);

    --police: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
              "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Une seule courbe pour tout le parcours : les ecrans doivent sembler
       glisser les uns sur les autres, pas rebondir chacun a sa maniere. */
    --glisse: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body.onboarding {
    background: var(--noir);
    color: var(--encre);
    font-family: var(--police);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   PROGRESSION
   -------------------------------------------------------------------------- */
.progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    background: rgba(245, 245, 247, 0.08);
    z-index: 10;
}

.progress__fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    transform-origin: left center;
    transition: width 620ms var(--glisse);
}

/* -----------------------------------------------------------------------------
   BARRE HAUTE
   -------------------------------------------------------------------------- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: max(18px, env(safe-area-inset-top)) clamp(16px, 4vw, 32px) 18px;
    z-index: 9;
}

.topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 8px 0 0;
    font-size: 15px;
    color: var(--encre-douce);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 200ms ease, opacity 200ms ease;
}

.topbar__back:hover,
.topbar__back:focus-visible { color: var(--encre); }

.topbar__back[hidden] { display: none; }

.topbar__wordmark {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--encre-tenue);
}

/* -----------------------------------------------------------------------------
   SCENE ET ECRANS
   -------------------------------------------------------------------------- */
.stage {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.2vh, 22px);
    padding: 96px clamp(20px, 6vw, 40px) clamp(40px, 8vh, 72px);
    text-align: center;
}

.step[hidden] { display: none; }

.step--wide { gap: clamp(20px, 4vh, 44px); }

.step__overline {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--encre-douce);
}

.step__title {
    max-width: 18ch;
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

/* Les ecrans de fin ne posent plus de question : le titre y devient une
   affirmation, et gagne le droit d'occuper la place. */
.step__title--display {
    max-width: 16ch;
    font-size: clamp(34px, 5.6vw, 66px);
    font-weight: 700;
    letter-spacing: -0.038em;
}

.step__lede {
    max-width: 34ch;
    font-size: 15px;
    color: var(--encre-douce);
    text-wrap: pretty;
}

.strong { color: var(--encre); font-weight: 500; }

.step__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(100%, 420px);
    margin-top: clamp(6px, 1.4vh, 16px);
}

/* -----------------------------------------------------------------------------
   SAISIE
   -------------------------------------------------------------------------- */
.entry {
    width: 100%;
    padding: 14px 4px;
    font: inherit;
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    color: var(--encre);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
    outline: none;
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.entry--mono { font-family: var(--mono); font-size: clamp(17px, 2vw, 21px); }

.entry::placeholder { color: var(--encre-tenue); font-weight: 400; }

.entry:focus {
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 0 var(--accent);
}

.entry.is-invalid {
    border-bottom-color: var(--danger);
    box-shadow: 0 1px 0 0 var(--danger);
}

.entry__error {
    min-height: 18px;
    font-size: 13px;
    color: var(--danger);
}

.entry__error:empty { min-height: 0; }

.entry__hint {
    max-width: 34ch;
    font-size: 13px;
    color: var(--encre-tenue);
}

/* -----------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 32px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--noir);
    background: var(--encre);
    border: 0;
    border-radius: 980px;
    text-decoration: none;
    cursor: pointer;
    transition: background 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.cta:hover { background: #ffffff; transform: scale(1.02); }
.cta:active { transform: scale(0.99); }

.cta[disabled] { opacity: 0.45; cursor: default; transform: none; }

.cta--quiet {
    color: var(--encre);
    background: rgba(245, 245, 247, 0.1);
}

.cta--quiet:hover { background: rgba(245, 245, 247, 0.16); }

.ghost {
    font: inherit;
    font-size: 13px;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    transition: opacity 200ms ease;
}

.ghost:hover { opacity: 0.7; }

:where(.cta, .ghost, .entry, .bubble, .topbar__back):focus-visible {
    outline: 2px solid var(--accent-clair);
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   ARRIVEE ET SORTIE DES ECRANS
   -------------------------------------------------------------------------- */
@keyframes monteeEntree {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes descenteEntree {
    from { opacity: 0; transform: translate3d(0, -24px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes monteeSortie {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -20px, 0); }
}

@keyframes descenteSortie {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, 20px, 0); }
}

/* Les elements d'un ecran n'arrivent pas ensemble : le titre pose la question,
   la saisie suit. Trois cadrans suffisent a donner cette impression. */
.step--in > *          { animation: monteeEntree 620ms var(--glisse) both; }
.step--in > *:nth-child(2) { animation-delay: 70ms; }
.step--in > *:nth-child(3) { animation-delay: 130ms; }
.step--in > *:nth-child(4) { animation-delay: 180ms; }

.step--in-back > *          { animation: descenteEntree 620ms var(--glisse) both; }
.step--in-back > *:nth-child(2) { animation-delay: 70ms; }
.step--in-back > *:nth-child(3) { animation-delay: 130ms; }
.step--in-back > *:nth-child(4) { animation-delay: 180ms; }

.step--out      { animation: monteeSortie 320ms ease both; }
.step--out-back { animation: descenteSortie 320ms ease both; }

/* -----------------------------------------------------------------------------
   BULLES
   -------------------------------------------------------------------------- */
.bubbles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 5vw, 84px);
    width: 100%;
}

.bubble-slot {
    position: relative;
    display: grid;
    place-items: center;
}

.bubble {
    position: relative;
    width: clamp(88px, 24vw, 206px);
    aspect-ratio: 1;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    will-change: transform, opacity;
    transition: transform 900ms var(--glisse), opacity 700ms ease, filter 500ms ease;
}

.bubble:hover { filter: brightness(1.14); }

.bubble__glass,
.bubble__rim,
.bubble__spec,
.bubble__spec2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.bubble__glass {
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0) 67%,
            rgba(255, 255, 255, 0.022) 83%,
            rgba(255, 255, 255, 0.075) 92%,
            rgba(255, 255, 255, 0.38) 97.5%,
            rgba(255, 255, 255, 0.03) 100%);
    box-shadow:
        inset 0 -9px 15px -9px rgba(255, 255, 255, 0.5),
        0 0 52px rgba(10, 132, 255, 0.035);
}

/* L'anneau est un degrade conique masque en couronne : c'est ce qui donne a la
   bulle son reflet qui tourne sans jamais se refermer. */
.bubble__rim {
    inset: 0;
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    will-change: transform;
}

.bubble__spec {
    top: 9%;
    left: 13%;
    width: 34%;
    height: 26%;
    transform: rotate(-26deg);
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 255, 255, 0.52) 0%,
        rgba(255, 255, 255, 0.16) 42%,
        rgba(255, 255, 255, 0) 72%);
}

.bubble__spec2 {
    bottom: 15%;
    right: 16%;
    width: 16%;
    height: 13%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0) 70%);
}

.bubble__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44%;
    height: 44%;
    object-fit: contain;
    pointer-events: none;
}

@keyframes montee1 {
    0%   { transform: translate3d(-14px, 80vh, 0) scale(0.62); opacity: 0; }
    22%  { opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes montee2 {
    0%   { transform: translate3d(10px, 86vh, 0) scale(0.58); opacity: 0; }
    22%  { opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes montee3 {
    0%   { transform: translate3d(18px, 78vh, 0) scale(0.66); opacity: 0; }
    22%  { opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

@keyframes flottement {
    0%   { transform: translate3d(-6px, 9px, 0) rotate(-1.2deg); }
    100% { transform: translate3d(7px, -14px, 0) rotate(1.4deg); }
}

@keyframes rotationAnneau {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Chaque bulle monte a son rythme et derive differemment : trois bulles
   parfaitement synchrones se liraient comme un motif, pas comme des bulles. */
.bubble-slot--1 { animation: montee1 2.6s cubic-bezier(0.16, 0.86, 0.28, 1) 0.2s both; }
.bubble-slot--2 { animation: montee2 2.9s cubic-bezier(0.16, 0.86, 0.28, 1) 0.45s both; }
.bubble-slot--3 { animation: montee3 2.7s cubic-bezier(0.16, 0.86, 0.28, 1) 0.72s both; }

.bubble-slot--1 .bubble { animation: flottement 7.4s ease-in-out -1.1s infinite alternate; }
.bubble-slot--2 .bubble { animation: flottement 8.6s ease-in-out -3.4s infinite alternate; }
.bubble-slot--3 .bubble { animation: flottement 6.9s ease-in-out -5.2s infinite alternate; }

.bubble-slot--1 .bubble__logo { width: 44%; height: 44%; }
.bubble-slot--2 .bubble__logo { width: 40%; height: 40%; }
.bubble-slot--3 .bubble__logo { width: 46%; height: 46%; }

.bubble-slot--1 .bubble__glass {
    background-image:
        radial-gradient(circle at 74% 76%, rgba(10, 132, 255, 0.1) 0%, rgba(10, 132, 255, 0) 46%),
        radial-gradient(circle at 26% 80%, rgba(64, 156, 255, 0.06) 0%, rgba(64, 156, 255, 0) 48%);
}

.bubble-slot--2 .bubble__glass {
    background-image:
        radial-gradient(circle at 26% 74%, rgba(10, 132, 255, 0.1) 0%, rgba(10, 132, 255, 0) 46%),
        radial-gradient(circle at 78% 78%, rgba(94, 92, 230, 0.07) 0%, rgba(94, 92, 230, 0) 48%);
}

.bubble-slot--3 .bubble__glass {
    background-image:
        radial-gradient(circle at 70% 80%, rgba(10, 132, 255, 0.1) 0%, rgba(10, 132, 255, 0) 46%),
        radial-gradient(circle at 22% 70%, rgba(100, 210, 255, 0.06) 0%, rgba(100, 210, 255, 0) 48%);
}

.bubble-slot--1 .bubble__rim {
    background: conic-gradient(from 0deg,
        rgba(10, 132, 255, 0), rgba(10, 132, 255, 0.28), rgba(94, 92, 230, 0.22),
        rgba(100, 210, 255, 0.09), rgba(10, 132, 255, 0));
    animation: rotationAnneau 26s linear infinite;
}

.bubble-slot--2 .bubble__rim {
    background: conic-gradient(from 120deg,
        rgba(94, 92, 230, 0), rgba(94, 92, 230, 0.26), rgba(100, 210, 255, 0.21),
        rgba(10, 132, 255, 0.26), rgba(94, 92, 230, 0));
    animation: rotationAnneau 31s linear infinite reverse;
}

.bubble-slot--3 .bubble__rim {
    background: conic-gradient(from 240deg,
        rgba(100, 210, 255, 0), rgba(100, 210, 255, 0.23), rgba(10, 132, 255, 0.27),
        rgba(94, 92, 230, 0.21), rgba(100, 210, 255, 0));
    animation: rotationAnneau 35s linear infinite;
}

/* Choix fait : la bulle retenue enfle et disparait, les autres remontent. */
.bubbles.is-picking .bubble { pointer-events: none; opacity: 0; }

.bubbles.is-picking .bubble-slot:not(.is-picked) .bubble {
    transform: translate3d(0, -52px, 0) scale(0.84);
    transition: transform 1100ms cubic-bezier(0.3, 0, 0.4, 1), opacity 850ms ease;
}

.bubbles.is-picking .bubble-slot.is-picked .bubble {
    transform: scale(1.16);
    transition: transform 300ms cubic-bezier(0.3, 0, 0.7, 0.2), opacity 260ms ease;
}

/* -----------------------------------------------------------------------------
   ECLABOUSSURE
   -------------------------------------------------------------------------- */
.splash {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
}

.bubble-slot.is-picked .splash { opacity: 1; }

.splash > * {
    position: absolute;
    border-radius: 50%;
    animation-play-state: paused;
}

.bubble-slot.is-picked .splash > * { animation-play-state: running; }

/* Une animation achevee reste a son dernier cadran. Pour rejouer
   l'eclaboussure apres un retour en arriere, il faut la retirer le temps
   d'une relecture : c'est ce que fait cette classe, posee puis otee. */
.splash.is-reset > * { animation: none !important; }

@keyframes eclair {
    0%   { opacity: 0.5; transform: scale(0.5); }
    100% { opacity: 0;   transform: scale(1.55); }
}

@keyframes onde {
    0%   { opacity: 0.5; transform: scale(0.58); }
    100% { opacity: 0;   transform: scale(1.42); }
}

@keyframes lambeau {
    0%   { opacity: 0.75; transform: scale(0.9); }
    100% { opacity: 0;    transform: scale(1.36); }
}

.splash__flash,
.splash__ring,
.splash__shred {
    width: 92%;
    aspect-ratio: 1;
}

.splash__flash {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0) 68%);
    animation: eclair 260ms ease-out both;
}

.splash__ring {
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: onde 460ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

/* Cinq arcs partiels : ce sont eux qui donnent l'impression d'une paroi qui
   se dechire plutot que d'un cercle qui grandit. */
.splash__shred { animation: lambeau 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both; }

.splash__shred:nth-of-type(1) { border-top: 2.2px solid rgba(255, 255, 255, 0.5);    transform: rotate(18deg);  animation-duration: 400ms; animation-delay: 0ms; }
.splash__shred:nth-of-type(2) { border-left: 1.8px solid rgba(255, 255, 255, 0.5);   transform: rotate(92deg);  animation-duration: 460ms; animation-delay: 30ms; }
.splash__shred:nth-of-type(3) { border-top: 2px solid rgba(255, 255, 255, 0.5);      transform: rotate(168deg); animation-duration: 380ms; animation-delay: 60ms; }
.splash__shred:nth-of-type(4) { border-right: 1.6px solid rgba(255, 255, 255, 0.5);  transform: rotate(244deg); animation-duration: 440ms; animation-delay: 20ms; }
.splash__shred:nth-of-type(5) { border-bottom: 2px solid rgba(255, 255, 255, 0.5);   transform: rotate(312deg); animation-duration: 420ms; animation-delay: 80ms; }

/* Les gouttes partent du centre, chacune sur son axe, et retombent. La chute
   est portee par un conteneur separe pour que rotation et gravite ne se
   disputent pas la meme propriete transform. */
@keyframes projection {
    0%   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    60%  { opacity: 0.78; }
    100% { opacity: 0; transform: translate3d(var(--portee, 120px), 0, 0) scale(0.4); }
}

.splash__drop {
    width: 0;
    height: 0;
    border-radius: 0;
    animation: projection 640ms cubic-bezier(0.12, 0.78, 0.24, 1) both;
}

.splash__drop::before {
    content: "";
    position: absolute;
    width: var(--taille, 4px);
    height: var(--taille, 4px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}

.splash__drop:nth-of-type(1)  { transform: rotate(6deg);   --portee: 168px; --taille: 3px; animation-duration: 620ms; }
.splash__drop:nth-of-type(2)  { transform: rotate(28deg);  --portee: 104px; --taille: 7px; animation-duration: 700ms; animation-delay: 20ms; }
.splash__drop:nth-of-type(3)  { transform: rotate(51deg);  --portee: 238px; --taille: 2px; animation-duration: 560ms; }
.splash__drop:nth-of-type(4)  { transform: rotate(74deg);  --portee: 168px; --taille: 4px; animation-duration: 660ms; animation-delay: 40ms; }
.splash__drop:nth-of-type(5)  { transform: rotate(96deg);  --portee: 104px; --taille: 9px; animation-duration: 780ms; animation-delay: 10ms; }
.splash__drop:nth-of-type(6)  { transform: rotate(119deg); --portee: 238px; --taille: 2px; animation-duration: 600ms; animation-delay: 60ms; }
.splash__drop:nth-of-type(7)  { transform: rotate(142deg); --portee: 168px; --taille: 3px; animation-duration: 640ms; }
.splash__drop:nth-of-type(8)  { transform: rotate(164deg); --portee: 104px; --taille: 5px; animation-duration: 720ms; animation-delay: 30ms; }
.splash__drop:nth-of-type(9)  { transform: rotate(187deg); --portee: 238px; --taille: 2px; animation-duration: 580ms; animation-delay: 10ms; }
.splash__drop:nth-of-type(10) { transform: rotate(210deg); --portee: 168px; --taille: 6px; animation-duration: 700ms; animation-delay: 50ms; }
.splash__drop:nth-of-type(11) { transform: rotate(232deg); --portee: 104px; --taille: 3px; animation-duration: 660ms; }
.splash__drop:nth-of-type(12) { transform: rotate(255deg); --portee: 238px; --taille: 2px; animation-duration: 560ms; animation-delay: 70ms; }
.splash__drop:nth-of-type(13) { transform: rotate(278deg); --portee: 104px; --taille: 8px; animation-duration: 760ms; animation-delay: 20ms; }
.splash__drop:nth-of-type(14) { transform: rotate(300deg); --portee: 168px; --taille: 3px; animation-duration: 620ms; }
.splash__drop:nth-of-type(15) { transform: rotate(323deg); --portee: 238px; --taille: 2px; animation-duration: 590ms; animation-delay: 40ms; }
.splash__drop:nth-of-type(16) { transform: rotate(346deg); --portee: 168px; --taille: 4px; animation-duration: 680ms; animation-delay: 10ms; }

/* -----------------------------------------------------------------------------
   ENSEIGNE RETENUE
   -------------------------------------------------------------------------- */
.reveal__logo {
    width: clamp(96px, 15vw, 148px);
    height: clamp(96px, 15vw, 148px);
    object-fit: contain;
}

/* -----------------------------------------------------------------------------
   ECRANS ETROITS
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
    .step { padding-top: 88px; }
    .bubbles { gap: 10px; }
    .step__form { width: 100%; }
    .cta { width: 100%; }
}

/* Sous 380px de haut le clavier virtuel mange l'ecran : le titre cede la
   place a la saisie plutot que de la pousser hors du champ. */
@media (max-height: 520px) {
    .step { justify-content: flex-start; padding-top: 76px; }
    .step__title { font-size: clamp(22px, 5vw, 30px); }
}

/* -----------------------------------------------------------------------------
   MOUVEMENT REDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .bubbles.is-picking .bubble { opacity: 0; }
}