/* Écran de chargement : l'allumette se remplit de bois comme une jauge,
   frotte à 100 % et s'allume. Branché par chargement.js sur a[data-chargement].
   Transform et opacity uniquement. */
.lb-ch{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--lb-jaune,#F6C230); color:var(--lb-bleu,#1C2B8F);
  font:700 13px/1.4 var(--lb-font-info,ui-monospace,monospace);
  letter-spacing:.12em; text-transform:uppercase; text-align:center;
  animation:lb-ch-in .12s ease-out both;
}
.lb-ch svg{width:84px; height:238px; overflow:visible}
.lb-ch-pc{font-size:22px; letter-spacing:.06em; font-variant-numeric:tabular-nums}

.lb-ch-t{stroke:var(--lb-bleu,#1C2B8F); fill:none; stroke-linecap:round; stroke-linejoin:round}
.lb-ch-bl{fill:var(--lb-bleu,#1C2B8F)}
.lb-ch-pa{fill:var(--lb-papier,#FBF3DF)}
.lb-ch-bo{fill:var(--lb-bois,#F2DDB0)}
.lb-ch-ve{stroke:#D2B47E; fill:none; stroke-linecap:round}
.lb-ch-ro{fill:var(--lb-rouge,#E1302A)}
.lb-ch-ci{fill:var(--lb-ciel,#5BB8E8)}
.lb-ch-fo{fill:var(--lb-flamme,#FF8A1E)}
.lb-ch-ja{fill:var(--lb-jaune,#F6C230)}
.lb-ch-re{stroke:#FF7A6B; fill:none; stroke-linecap:round}
.lb-ch-ec{stroke:var(--lb-flamme,#FF8A1E); fill:none; stroke-linecap:round}

/* Pièces animées : repère sur leur propre boîte */
.lb-ch-bois,.lb-ch-fl,.lb-ch-all,.lb-ch-et,.lb-ch-yo,.lb-ch-yf{transform-box:fill-box}

/* 1. Le bois monte par à-coups, comme un vrai téléchargement (80 → 480 ms) */
.lb-ch-bois{transform-origin:50% 100%; transform:scaleY(0);
  animation:lb-ch-plein .4s .08s linear forwards}
/* 2. À 100 %, l'allumette frotte (480 → 600 ms) */
.lb-ch-all{transform-origin:50% 100%; animation:lb-ch-frotte .12s .48s ease-in-out}
/* 3. La flamme jaillit (500 → 680 ms), puis vacille tant que la page n'est pas là */
.lb-ch-fl{transform-origin:50% 100%; transform:scale(0);
  animation:lb-ch-feu .18s .5s cubic-bezier(.3,1.6,.6,1) forwards,
            lb-ch-vac .36s .68s ease-in-out infinite alternate}
.lb-ch-et{transform-origin:50% 50%; opacity:0; animation:lb-ch-et .22s .48s ease-out}
/* Les yeux s'ouvrent quand la flamme prend */
.lb-ch-yf{animation:lb-ch-off 0s .52s forwards}
.lb-ch-yo{opacity:0; transform-origin:50% 50%; animation:lb-ch-on .12s .52s ease-out forwards}

@keyframes lb-ch-in{from{opacity:0}}
@keyframes lb-ch-plein{
  0%{transform:scaleY(0)} 25%{transform:scaleY(.34)} 38%{transform:scaleY(.4)}
  70%{transform:scaleY(.78)} 80%{transform:scaleY(.82)} 100%{transform:scaleY(1)}}
@keyframes lb-ch-frotte{
  0%,100%{transform:none} 35%{transform:translateX(-7px) rotate(-7deg)} 70%{transform:translateX(5px) rotate(5deg)}}
@keyframes lb-ch-feu{to{transform:scale(1)}}
@keyframes lb-ch-vac{
  from{transform:scale(1)} 50%{transform:scale(.94,1.07)} to{transform:scale(1.05,.95)}}
@keyframes lb-ch-et{0%{opacity:1; transform:scale(.4)} 100%{opacity:0; transform:scale(1.5)}}
@keyframes lb-ch-off{to{opacity:0}}
@keyframes lb-ch-on{from{opacity:0; transform:scaleY(.2)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){.lb-ch{display:none}}