/* ═══════════════════════════════════════════════════════════
   LA FLAMME D'OR — « L'Embrasement » (écran d'ouverture)
   Une étincelle devient la flamme du logo, puis la flamme
   consume l'écran noir et révèle la façade. Le titre s'embrase,
   des braises montent doucement dans l'accueil.
   S'active uniquement via la classe html.embrase (posée dans
   <head>) : sans JavaScript ou avec « réduire les animations »,
   rien de tout cela n'apparaît et le site reste identique.
   ═══════════════════════════════════════════════════════════ */

.emb { display: none; }

html.embrase .emb {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  background: #0a0908;            /* noir chaud, même teinte que le site */
  pointer-events: auto;
}
/* dès que le feu prend, le fond passe au canvas (qui se consume) */
html.embrase .emb.burning { background: transparent; }
html.embrase .emb.gone { display: none; }

/* l'ancien écran de chargement est remplacé par l'embrasement */
html.embrase .loader { display: none !important; }

.emb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* le canvas est dessiné en basse résolution : l'agrandissement lisse
     donne au bord du feu son flou incandescent */
  image-rendering: auto;
  filter: blur(1.2px);            /* adoucit le bord : une lueur, pas des pixels */
  transform: scale(1.02);         /* le flou ne laisse pas de liseré sur les bords */
}

/* étincelle puis flamme, au centre */
.emb-flame {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  transform: scale(0); opacity: 0;
  filter: drop-shadow(0 0 18px rgba(255, 170, 60, .85)) drop-shadow(0 0 46px rgba(230, 120, 30, .5));
}
.emb-flame svg { width: 100%; height: 100%; display: block; }
.emb-flame path { fill: url(#embGold); }
.emb-spark {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #ffe2a0;
  box-shadow: 0 0 12px 4px rgba(255, 190, 90, .9), 0 0 40px 10px rgba(255, 140, 40, .45);
  transform: scale(0); opacity: 0;
}

html.embrase .emb.spark .emb-spark { animation: embSpark .5s cubic-bezier(.2,.8,.2,1) forwards; }
html.embrase .emb.lit .emb-spark { animation: none; opacity: 0; transition: opacity .2s; }
html.embrase .emb.lit .emb-flame {
  transform: scale(1); opacity: 1;
  transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .25s;
  animation: embFlicker 1.1s ease-in-out infinite;
}
html.embrase .emb.burning .emb-flame {
  opacity: 0; transform: scale(1.6);
  transition: opacity .55s ease-out, transform .7s ease-out;
}

@keyframes embSpark {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.8); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes embFlicker {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255,170,60,.85)) drop-shadow(0 0 46px rgba(230,120,30,.5)); }
  50%      { filter: drop-shadow(0 0 24px rgba(255,190,80,.95)) drop-shadow(0 0 60px rgba(230,120,30,.6)); }
}

/* titre qui s'embrase lettre par lettre */
.acc-title .embw { display: inline-block; white-space: nowrap; }
.acc-title .embc { display: inline-block; }
html.embrase .acc-title .embc {
  color: #1d130b; text-shadow: none;
}
html.embrase .acc-title.ignite .embc {
  animation: embIgnite 1s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes embIgnite {
  0%   { color: #1d130b; text-shadow: none; }
  35%  { color: #ff9a3c; text-shadow: 0 0 18px rgba(255,140,40,.9), 0 0 42px rgba(255,90,20,.55); }
  70%  { color: #f3d58c; text-shadow: 0 0 14px rgba(230,199,122,.6); }
  100% { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
}

/* braises qui montent dans l'accueil */
.emb-embers {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* le contenu de l'accueil reste au-dessus des braises */
.accueil > :not(.acc-bg):not(.emb-embers) { z-index: 2; }