/* L'écran de démarrage et la première connexion.
   Extrait tel quel de index.html (découpage du front). */

/* Le chargement partage les couleurs du site et hérite du thème déjà restauré. */
/* Titres ciblés pour annoncer le changement d'écran aux lecteurs d'écran.
   Ils ne sont pas des contrôles : pas de contour lors du focus automatique. */
#onboardingTitle:focus,
#appShell > header h1[tabindex="-1"]:focus { outline: none; }
body.startup-pending { overflow: hidden; }
body.startup-pending #appShell { visibility: hidden; }
.startup-screen[hidden] { display: none; }
.startup-screen {
  position: fixed; inset: 0; z-index: 10000; overflow: auto;
  display: grid; place-items: center; padding: 40px 24px;
  color: var(--ink); background: var(--page-bg);
  font-family: system-ui, -apple-system, sans-serif;
}
.startup-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .65;
  background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
}
.startup-content { position: relative; width: min(680px, 100%); text-align: center; }
.startup-brand { font-size: 11px; letter-spacing: .38em; font-weight: 650; color: var(--ink-3); }
/* La scène mesure 440 unités sur 220 ; --u vaut une unité. Elle est un
   « conteneur » : dans les éléments qu'elle contient, 100cqw est sa largeur. */
.startup-scene { position: relative; width: min(430px, 100%); aspect-ratio: 2; margin: 18px auto 8px;
  container-type: inline-size; --u: calc(100cqw / 440); }
/* L'IMAGE (cadre/startupScreen.js) : le logo agrandi, au trait, à l'encre du
   thème — le contraste franc d'un dessin d'architecte sur son quadrillage. Le
   point et ses ondes prennent le vert du logo, plus soutenu sur fond clair.
   Tout le mouvement passe par « transform » et « opacity », que le navigateur
   anime sans le fil principal : il reste fluide pendant que la page charge. */
.startup-screen { --startup-radar: #10b981; }
html[data-theme="dark"] .startup-screen { --startup-radar: #34d399; }
/* Un trait est une barre aux bouts arrondis, tournée vers son arrivée autour de
   son point de départ, d'où elle s'allonge. Les immeubles se construisent : le
   sol s'étend depuis son milieu, les murs montent, puis les toits se rejoignent
   au faîte ; chaque trait démarre et s'arrête en douceur, et des traits courts
   tracés ensemble vont moins vite qu'un seul long, ce qui garde le mouvement
   lisible. Le dessin est complet en 0,8 s : le chargement s'achève souvent
   avant deux, et un tracé plus lent était coupé en plein milieu. Au repos, les
   traits sont entiers : le dessin reste complet sans animation.
   Toutes les animations partent ensemble, à l'ouverture, et durent une
   seconde : l'attente de chaque temps est écrite dans ses images clés, jamais en
   délai. Safari ne confie une animation à la carte graphique qu'une fois son
   délai écoulé, et c'est le fil principal qui le constate : occupé par le
   chargement à ce moment-là, il lançait les toits trop tard, déjà achevés, et
   ils apparaissaient d'un coup. */
.startup-trait, .startup-radar { position: absolute; }
.startup-trait {
  left: 0; top: 0; width: calc((var(--longueur) + 3) * var(--u)); height: calc(3 * var(--u));
  border-radius: calc(1.5 * var(--u)); background: var(--ink);
  /* Posé par « transform », que le navigateur n'arrondit pas au pixel comme une
     position : les traits se rejoignent exactement. */
  --pose: translate(calc((var(--x) - 1.5) * var(--u)), calc((var(--y) - 1.5) * var(--u))) rotate(var(--angle));
  transform-origin: calc(1.5 * var(--u)) 50%; transform: var(--pose);
  animation: 1s linear;
}
.startup-trait--sol { transform-origin: 50% 50%; animation-name: startup-sol; }
.startup-trait--mur { animation-name: startup-mur; }
.startup-trait--toit { animation-name: startup-toit; }
/* Le radar s'allume quand le dessin s'achève. C'est un carré centré sur le
   point, de la taille de la plus grande onde. */
.startup-radar {
  left: calc((var(--x) - 44) * var(--u)); top: calc((var(--y) - 44) * var(--u));
  width: calc(88 * var(--u)); aspect-ratio: 1;
  animation: startup-radar 1s linear;
}
/* Le point a la taille de l'onde la plus petite (14 unités sur 88) ; réduit par
   « transform », il reste rond, quand une boîte de 14 unités arrondie au pixel
   devenait ovale. */
.startup-point { position: absolute; inset: 0; border-radius: 50%; background: var(--startup-radar); transform: scale(calc(14 / 88)); }
/* Trois ondes partent du point, l'une après l'autre, s'élargissent et
   s'effacent. Un cercle agrandi par « transform » épaissit son trait avec lui :
   l'onde naît en un fil à peine visible au bord du point, et atteint son
   épaisseur en s'effaçant. Au repos, elles restent posées à trois tailles, à
   l'épaisseur d'une onde achevée. */
.startup-onde { position: absolute; inset: 0; border: 2px solid var(--startup-radar); border-radius: 50%;
  transform: scale(var(--repos)); opacity: var(--repos-opacite);
  animation: startup-onde 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
.startup-onde:nth-of-type(1) { --repos: .36; --repos-opacite: .55; }
.startup-onde:nth-of-type(2) { --repos: .64; --repos-opacite: .3; animation-delay: -.8s; }
.startup-onde:nth-of-type(3) { --repos: .92; --repos-opacite: .12; animation-delay: -1.6s; }
.startup-eyebrow { margin: 0 0 14px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 650; }
.startup-content h1 { color: var(--ink); font-size: clamp(25px, 4vw, 36px); line-height: 1.2; font-weight: 550; letter-spacing: -.035em; margin: 0 auto 16px; max-width: 550px; }
.startup-caption { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 420px; }
.startup-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 40px 0 24px; list-style: none; }
.startup-steps li { position: relative; overflow: hidden; color: var(--ink-3); font-size: 10px; letter-spacing: .02em; line-height: 1.5; }
.startup-steps li::before { content: ''; display: block; height: 3px; margin-bottom: 12px; border-radius: 8px; background: var(--hairline); }
.startup-steps li[data-state="complete"]::before { background: var(--ink-2); }
.startup-steps li[data-state="current"] { color: var(--ink); }
/* Sur la barre de l'étape en cours glisse un reflet, peint sur un ruban quatre
   fois plus large que l'étape (deux motifs qui se suivent) ; le ruban avance
   d'un motif par tour et l'étape coupe ce qui dépasse. */
.startup-steps li[data-state="current"]::after { content: ''; position: absolute; top: 0; left: -200%; width: 400%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ink-2), transparent) 0 0 / 50% 100% repeat-x;
  animation: startup-flow 2s linear infinite; }
.startup-status { min-height: 24px; color: var(--ink); font-size: 14px; margin: 0 0 8px; }
.startup-detail { color: var(--ink-3); font-size: 12px; min-height: 20px; margin: 0; font-variant-numeric: tabular-nums; }
.startup-help { margin: 36px auto 0; color: var(--ink-3); font-size: 11px; }
.startup-retry { background: var(--ink-2); color: var(--surface); border: 0; padding: 12px 26px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 650; margin-top: 22px; cursor: pointer; }
.startup-retry[hidden] { display: none; }
.startup-retry:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 5px; }
.startup-screen[data-error] .startup-status { color: var(--ink); background: var(--tile-amber); border-radius: 8px; padding: 8px 12px; }
.startup-screen[data-error] * { animation-play-state: paused !important; }
@keyframes startup-flow { to { transform: translateX(50%); } }
/* Le sol de 0 à 0,4 s, les murs de 0,1 à 0,5 s, les toits de 0,5 à 0,8 s, le
   radar de 0,7 à 1 s. */
@keyframes startup-sol {
  from { transform: var(--pose) scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  40%, to { transform: var(--pose) scaleX(1); }
}
@keyframes startup-mur {
  from, 10% { transform: var(--pose) scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  50%, to { transform: var(--pose) scaleX(1); }
}
@keyframes startup-toit {
  from, 50% { transform: var(--pose) scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  80%, to { transform: var(--pose) scaleX(1); }
}
@keyframes startup-radar {
  from, 70% { opacity: 0; transform: scale(.5); animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  to { opacity: 1; transform: none; }
}
@keyframes startup-onde { from { transform: scale(.16); opacity: .7; } to { transform: scale(1); opacity: 0; } }
@media (max-width: 480px) {
  .startup-screen { padding: 24px 20px; }
  .startup-scene { width: min(340px, 100%); margin-top: 12px; }
  .startup-steps { gap: 8px; margin-top: 28px; }
  .startup-help { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .startup-screen *, .startup-screen *::before, .startup-screen *::after { animation: none !important; }
  .startup-onde { border-width: calc(2px / var(--repos)); }
}

#results[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* Premier lancement : débuter en mode simple, ou tout voir. */