/* Accueil Bloomie : connexion, invitation, visite guidée.
   Mouvement en transform/opacity uniquement (composité GPU) ; tout est coupé si le système demande moins d'animations.
   Pas de @view-transition entre pages : le reste de l'app n'y adhère pas, Chrome sauterait la transition en levant une erreur. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); }

body.onb { min-height: 100vh; overflow-x: hidden; background: var(--bg); }
.onb-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.onb-bg i { position: absolute; border-radius: 50%; will-change: transform; }
.onb-bg i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(closest-side, rgba(201, 87, 126, .2), rgba(201, 87, 126, 0)); animation: drift-a 26s ease-in-out infinite alternate; }
.onb-bg i:nth-child(2) { width: 56vmax; height: 56vmax; right: -20vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgba(226, 112, 58, .18), rgba(226, 112, 58, 0)); animation: drift-b 30s ease-in-out infinite alternate; }
.onb-bg i:nth-child(3) { width: 40vmax; height: 40vmax; right: 6vmax; top: 12vh; background: radial-gradient(closest-side, rgba(252, 233, 218, .9), rgba(252, 233, 218, 0)); animation: drift-a 34s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-5vmax, -6vmax, 0) scale(1.12); } }

/* scène */
.stage { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: clamp(20px, 4vw, 44px) 22px 96px; }
.stage.narrow { max-width: 620px; min-height: 100vh; display: flex; flex-direction: column; }
.stage.narrow > .step { margin: auto 0; padding-bottom: 8vh; }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(26px, 6vh, 60px); }
.onb-top .mark { display: inline-flex; align-items: center; gap: 9px; }
.onb-top .mark b { font-family: var(--serif); font-size: 1.35rem; color: var(--pink); }
.tag-l { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
.skip { background: none; border: 0; color: var(--muted); font: 600 .82rem var(--font); cursor: pointer; padding: 6px 4px; }
.skip:hover { color: var(--orange); }
.onb-progress { height: 3px; border-radius: 99px; background: rgba(38, 51, 74, .08); overflow: hidden; margin-bottom: clamp(30px, 6vh, 56px); }
.onb-progress i { display: block; height: 100%; width: calc(var(--p, 1) * 20%); background: linear-gradient(90deg, var(--pink), var(--orange)); border-radius: inherit; transition: width .8s var(--ease-out); }

/* typographie */
.step { position: relative; }
.onb .step:not([hidden]) { view-transition-name: onb-step; }
.step h1, .step h2 { font-family: var(--serif); color: var(--navy); letter-spacing: -.02em; line-height: 1.08; font-weight: 700; margin: 0 0 18px; }
.step h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); }
.step h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.step h1:focus, .step h2:focus { outline: none; }
.eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin: 0 0 14px; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.65; color: var(--ink-2); max-width: 58ch; margin: 0 0 30px; }
.fine { font-size: .8rem; color: var(--muted); }
.step > .fine { margin-top: 18px; }
.row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 34px; }
.back { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 600; }
.back:hover { color: var(--orange); }

/* boutons */
.btn.xl { padding: 13px 24px; font-size: 1rem; border-radius: 12px; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s; }
.btn.primary.xl { box-shadow: 0 6px 20px -8px rgba(226, 112, 58, .7); }
.btn.xl:not([disabled]):hover { transform: translateY(-2px); }
.btn.primary.xl:hover { box-shadow: 0 12px 28px -10px rgba(226, 112, 58, .75); }
.btn.xl:active, .gbtn-google:active { transform: translateY(0) scale(.98); }
/* bouton Google : fond blanc et « G » officiel (charte Google Identity) */
.gbtn-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 280px; padding: 13px 24px; border-radius: 12px; border: 1px solid #DADCE0; background: #fff; color: #1F1F1F; font: 600 1rem var(--font); cursor: pointer; box-shadow: 0 1px 2px rgba(60, 64, 67, .12), 0 6px 18px -10px rgba(31, 38, 51, .35); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.gbtn-google:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(60, 64, 67, .14), 0 14px 30px -12px rgba(31, 38, 51, .4); }
.gbtn-google:focus-visible, .btn.xl:focus-visible, .skip:focus-visible, .back:focus-visible { outline: 3px solid #F5C3A4; outline-offset: 2px; }
.login .gbtn-google { width: 100%; min-width: 0; }

/* entrée en cascade */
.rise { animation: rise .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 85ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* fleur Bloomie : les pétales s'ouvrent depuis le cœur */
svg.bloom { display: block; overflow: visible; }
svg.bloom.big { width: 104px; height: 104px; margin: 0 0 26px -6px; animation: turn 90s linear infinite; }
svg.bloom.mid { width: 64px; height: 64px; margin: 0 auto 10px; }
svg.bloom.mini { width: 26px; height: 26px; }
.bloom .petal { transform-box: view-box; transform-origin: 60px 60px; mix-blend-mode: multiply; opacity: .88; animation: petal 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 75ms + 120ms); }
.bloom .core { transform-box: view-box; transform-origin: 60px 60px; animation: core .7s var(--ease-out) .65s both; }
@keyframes petal { from { opacity: 0; transform: rotate(-60deg) scale(.15); } }
@keyframes core { from { opacity: 0; transform: scale(0); } }
@keyframes turn { to { transform: rotate(360deg); } }

/* la chaîne des 8 étapes : la ligne se trace, les étapes arrivent une à une */
.chain { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.chain::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: linear-gradient(var(--orange), var(--pink) 45%, var(--navy)); transform-origin: top; animation: draw 1.5s cubic-bezier(.65, 0, .35, 1) .35s both; }
@keyframes draw { from { transform: scaleY(0); } }
.chain li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 9px 0; }
.chain .num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); font: 700 .85rem var(--font); color: var(--navy); box-shadow: 0 0 0 5px var(--bg); }
.chain b { display: block; font-size: 1rem; color: var(--ink); }
.chain p { margin: 0; font-size: .88rem; color: var(--muted); }
.chain .who { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 99px; padding: 3px 9px; background: #EEF0F4; color: #56607A; }
.chain .Vous .num { border-color: var(--pink); color: var(--pink); }
.chain .Vous .who { background: var(--pink-2); color: var(--pink); }
.chain .Client .num { border-color: var(--orange); color: var(--orange); }
.chain .Client .who { background: var(--orange-2); color: #A9481B; }
.chain .Moteur .num { border-color: var(--navy); }

/* dossiers */
.step .next { margin: 6px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.tile { background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(31, 38, 51, .35); }
.tile b { font-size: .98rem; }
.tile small { color: var(--muted); }
.step .card { margin-top: 4px; }
.step .flash { margin-top: 22px; }

/* c'est prêt : les coches se dessinent */
.ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 14px; font-size: 1.02rem; color: var(--ink); }
.ticks svg { width: 28px; height: 28px; flex: none; }
.ticks circle { fill: var(--green-2); }
.ticks path { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; animation: tick .55s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 110ms + 450ms); }
.ticks .later circle { fill: #EEF0F4; }
.ticks .later path { stroke: #8E96A8; }
.ticks .later span { color: var(--muted); }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* aperçu administrateur */
.preview-flag { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5; background: var(--navy); color: #E9E4DD; font-size: .8rem; padding: 9px 16px; border-radius: 99px; box-shadow: 0 10px 30px -12px rgba(31, 38, 51, .6); white-space: nowrap; }
.preview-flag a { color: #F2B07E; }

/* connexion */
.qr { width: 220px; margin: 14px auto; background: #fff; border-radius: 12px; padding: 6px; }
.qr svg { display: block; width: 100%; height: auto; }
.onb .login { position: relative; z-index: 1; }
.onb .login .card { border-radius: 18px; box-shadow: 0 1px 2px rgba(31, 38, 51, .05), 0 24px 60px -32px rgba(31, 38, 51, .35); }

/* passage d'une étape à l'autre (View Transitions dans la page, déclenchées par app.js) */
::view-transition-old(onb-step) { animation: vt-out .24s var(--ease-in) both; }
::view-transition-new(onb-step) { animation: vt-in .6s var(--ease-out) both; }
html[data-dir="back"]::view-transition-old(onb-step) { animation-name: vt-out-back; }
html[data-dir="back"]::view-transition-new(onb-step) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-36px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(52px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(36px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-52px); } }

@media (max-width: 640px) {
  .chain li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 4px; }
  .chain .who { grid-column: 2; justify-self: start; }
  .gbtn-google { width: 100%; min-width: 0; }
  .preview-flag { white-space: normal; width: calc(100% - 24px); text-align: center; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .onb *, .onb *::before, .onb *::after { animation: none !important; transition: none !important; }
  .ticks path { stroke-dashoffset: 0; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}