/* =====================================================================
   FEU.CSS : allumette, page brulee et braises
   Couleurs du feu fixes (noir et rouge braise), quel que soit le theme choisi.
   ===================================================================== */

/* ===== Allumette ===== */
/* Une boite d'allumettes en bas a gauche : trois images de meme format (574 x 528), superposees.
   Au repos : allumette-boite ; au survol : allumette-survol ; allumette sortie (feu actif) : allumette-clic.
   --mw : largeur de l'image a l'ecran. Le bouton cliquable couvre seulement la boite (le reste de l'image,
   l'eclat jaune, laisse passer les clics vers la page). Les images sont dans images/interface/. */
:root{--mw:343px}
.pied-allumette{position:relative;flex:none;margin-top:auto;width:var(--mw);aspect-ratio:574/528;pointer-events:none;z-index:2}   /* en bas de la colonne du centre */
.mboite{position:absolute;inset:0;pointer-events:none}
.mboite img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .12s}
.mboite .repos{opacity:1}
#mbtn:hover~.mboite .repos,#mbtn:focus-visible~.mboite .repos{opacity:0}
#mbtn:hover~.mboite .survol,#mbtn:focus-visible~.mboite .survol{opacity:1}
body.match #mbtn~.mboite .repos,body.match #mbtn~.mboite .survol{opacity:0}
body.match #mbtn~.mboite .clic{opacity:1}
.mbtn,.mbtn:hover{position:absolute;z-index:1;padding:0;border:0;border-radius:0;background:none;cursor:pointer;pointer-events:auto;
  left:calc(var(--mw) * .0436);bottom:calc(var(--mw) * .047);
  width:calc(var(--mw) * .488);height:calc(var(--mw) * .359)}   /* la boite dans l'image : x 25 a 305, y 295 a 501 */
.mbtn:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
@media (max-width:820px){.pied-allumette,#mcur,#fire,#char,.app.brule{display:none!important}}   /* pas de feu sur telephone */
#mcur{position:fixed;left:0;top:0;z-index:70;pointer-events:none;opacity:0;display:none}
body.match #mcur{display:block}
body.match,body.match *{cursor:none!important}
body.match{user-select:none}
#fire{position:fixed;inset:0;width:100%;height:100%;z-index:55;pointer-events:none}

/* ===== Page brulee =====
   Pendant le feu, une copie de la page (.brule) est posee exactement par-dessus, dans le theme brule.
   Un masque (calcule par la simulation) ne la revele que la ou la page a brule : fond, lignes et lettres
   changent donc progressivement, au pixel pres. La copie ne recoit pas la souris. */
.app.brule{position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none;
  --bg:#0b0807;--ink:#ff3d17;--panel:#0b0807;--line:#ff3d17;--center:#0b0807;--hair:rgba(255,61,23,.4);--grid:rgba(255,61,23,.2);   /* trame rouge du fond central, au meme pas de 24 px */
  background:var(--bg);color:var(--ink);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(transparent,transparent);mask-image:linear-gradient(transparent,transparent)}
.brule *{transition:none!important}
.brule .col{scrollbar-width:none}
.brule .col::-webkit-scrollbar{display:none}
.brule .ph{background:#0b0807!important}                       /* images carbonisees : noir et rouge, pixelisees (filtre #braise-pixels, index.html) */
.brule .ph img{filter:url(#braise-pixels)}
/* fond central : trame de triangles equilateraux de 24 px de cote, en rouge */
.brule .center{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26.4' height='45.726'%3E%3Cg stroke='rgba(255,61,23,.3)' stroke-width='1' fill='none'%3E%3Cpath d='M0 .5H26.4M0 23.363H26.4M0 0L26.4 45.726M26.4 0L0 45.726'/%3E%3C/g%3E%3C/svg%3E");background-size:26.4px 45.726px}   /* trame de triangles rouges sur fond noir, 26,4 px de cote */
.brule button,.brule .sw,.brule .sw:hover{background:transparent;color:var(--ink)}
.brule .sw[aria-pressed="true"]{outline-color:var(--ink)}
.brule .guide,.brule .hd,.brule .rs,.brule .rz,.brule .suppr,.brule .pli,.brule .pied-allumette{visibility:hidden}   /* poignees : seulement dans la page normale */
/* Voile du feu : roussi, grain du charbon, cendre et braise, au-dessus des deux pages, sous les flammes */
#char{position:fixed;left:0;top:0;z-index:2;pointer-events:none}
/* Scintillement de braise : couleurs rouge-orange uniquement, sauts discrets, chaque lettre a son rythme */
.em{animation:ember var(--ed,2.4s) steps(1,end) var(--edl,0s) infinite}
@keyframes ember{
0%,100%{color:#ff3d17;text-shadow:0 0 3px #ff2a00}
18%{color:#ff7a2e;text-shadow:0 0 9px #ff4a00,0 0 20px #b00}
42%{color:#c4200a;text-shadow:0 0 2px #800}
67%{color:#ff5a1e;text-shadow:0 0 12px #ff3000}
84%{color:#ff9a3a;text-shadow:0 0 6px #ff4a00}}


@media (prefers-reduced-motion:reduce){.em{animation:none}}