/* ════════════════════════════════════════════════════════════════════════
   LA FLAMME DU JOUR — maquette validée : brandnew/drafts/juice-03-flamme.html
   Construit par js/flamme.js. Rayon 0, ombres dures, aplats, aucune lueur.
   ════════════════════════════════════════════════════════════════════════ */
:root { --glace: #BDEBF7; }

/* ① la pastille 🔥 de la barre de l'accueil (elle ouvre les paliers) */
.flm-chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 9px; cursor: pointer; box-sizing: border-box;
  font-family: var(--font-d, 'Anton', sans-serif); font-size: 18px; color: #0A0A0A; background: var(--yellow, #FFD600);
  border: 3px solid #0A0A0A; box-shadow: 3px 3px 0 #0A0A0A; -webkit-tap-highlight-color: transparent; }
.flm-chip .nemoji { width: 20px; height: 20px; }
.flm-chip b { font-weight: 400; }
.flm-chip.eteinte { background: #FFFEF7; }
.flm-chip.eteinte .nemoji { filter: grayscale(1); opacity: .7; }
html[data-skin="neon"] .flm-chip { box-shadow: 3px 3px 0 var(--magenta, #FF2E93); }

/* B · la flamme en danger (en haut de l'accueil) */
.flm-danger { flex: none; border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; background: var(--orange, #FF9F45); color: #0A0A0A;
  padding: 12px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; margin-bottom: 16px; }
html[data-skin="neon"] .flm-danger { box-shadow: 5px 5px 0 var(--magenta, #FF2E93); }
.flm-danger .top { display: flex; align-items: center; gap: 10px; }
.flm-danger .t { font-family: var(--font-d, 'Anton', sans-serif); font-size: 26px; line-height: .95; }
.flm-danger .d { font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
/* la flamme VACILLE : elle penche, rétrécit, revient (steps = net, pas de flou) */
@keyframes flm-vacille { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-8deg) scale(.86); } 45% { transform: rotate(6deg) scale(.95); } 70% { transform: rotate(-4deg) scale(.8); } }
.flm-danger .vac { display: inline-block; flex: none; animation: flm-vacille 1.6s steps(6) infinite; transform-origin: 50% 90%; }
.flm-danger .vac .nemoji { width: 54px; height: 54px; }
.flm-danger .ml { display: flex; align-items: center; gap: 10px; }
.flm-danger .ml .k { font-family: var(--font-d, 'Anton', sans-serif); font-size: 14px; }
.flm-danger .timer { font-family: var(--font-d, 'Anton', sans-serif); font-size: 30px; padding: 4px 10px; background: #0A0A0A; color: var(--yellow, #FFD600); border: 3px solid #0A0A0A; }
.flm-danger .jauge { height: 14px; border: 3px solid #0A0A0A; background: #FFFEF7; }
.flm-danger .jauge i { display: block; height: 100%; width: 22%; background: var(--red, #FF5252); }
.flm-danger .flm-cta { display: block; font-family: var(--font-d, 'Anton', sans-serif); font-size: 22px; letter-spacing: 1px; padding: 13px; text-align: center;
  background: var(--green, #5BE885); color: #0A0A0A; border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; text-decoration: none; }

/* les écrans pleins (A, E, F) */
.flm-ov { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; overflow-y: auto; }
.flm-ov .in { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; position: relative; }
.flm-ov .week { display: flex; gap: 6px; justify-content: center; }
.flm-ov .week .d { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-d, 'Anton', sans-serif); font-size: 12px; }
.flm-ov .box { width: 34px; height: 34px; border: 3px solid #0A0A0A; background: #FFFEF7; box-shadow: 3px 3px 0 #0A0A0A; position: relative; box-sizing: border-box; }
.flm-ov .box.on { background: var(--yellow, #FFD600); }
.flm-ov .box.on::after { content: ''; position: absolute; left: 10px; top: 3px; width: 8px; height: 15px; border: solid #0A0A0A; border-width: 0 4px 4px 0; transform: rotate(45deg); box-sizing: content-box; }
.flm-ov .box.gel { background: var(--glace); }
.flm-ov .box.gel::after { content: ''; position: absolute; inset: 8px; border: 3px solid #0A0A0A; transform: rotate(45deg); }
.flm-ov .flm-cta { align-self: stretch; display: block; font-family: var(--font-d, 'Anton', sans-serif); font-size: 22px; letter-spacing: 1px; padding: 13px; text-align: center;
  background: var(--green, #5BE885); color: #0A0A0A; border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; text-decoration: none; }

/* A · elle s'allume */
.flm-a { background: var(--orange, #FF9F45); color: #0A0A0A; }
.flm-a::before { content: ''; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(#0A0A0A 1.6px, transparent 1.7px); background-size: 15px 15px; pointer-events: none; }
.flm-a .big { display: inline-block; line-height: 1; }
.flm-a .big .nemoji { width: 120px; height: 120px; }
.flm-a .odo { font-family: var(--font-d, 'Anton', sans-serif); font-size: 110px; line-height: .95; height: 104px; overflow: hidden; }
.flm-a .odo .c { display: flex; flex-direction: column; align-items: center; transition: transform var(--dur-l, 800ms) var(--ease-back, cubic-bezier(.3, 1.6, .5, 1)); }
.flm-a .odo .c span { height: 104px; }
.flm-a .odo .c.roule { transform: translateY(-104px); }
.flm-a .k { font-family: var(--font-d, 'Anton', sans-serif); font-size: 24px; letter-spacing: 1px; }
.flm-a .gain { font-family: var(--font-d, 'Anton', sans-serif); font-size: 18px; padding: 7px 14px; background: #0A0A0A; color: var(--yellow, #FFD600);
  border: 3px solid #0A0A0A; box-shadow: 4px 4px 0 var(--magenta, #FF2E93); rotate: -3deg; }
.flm-a .cont { align-self: stretch; font-family: var(--font-d, 'Anton', sans-serif); font-size: 22px; letter-spacing: 1px; padding: 14px; text-align: center;
  background: #FFFEF7; color: #0A0A0A; border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; margin-top: 6px; border-radius: 0; cursor: pointer; }

/* E · elle s'est éteinte */
.flm-e { background: #3A3A3A; color: #FFFEF7; text-align: center; }
.flm-e .eteinte { display: inline-block; line-height: 1; }
.flm-e .eteinte .nemoji { width: 110px; height: 110px; }
.flm-e .fume { display: flex; gap: 6px; }
.flm-e .fume i { width: 10px; height: 10px; background: #9A9A9A; border: 2px solid #0A0A0A; animation: flm-fume 1.4s steps(4) infinite; }
.flm-e .fume i:nth-child(2) { animation-delay: .3s; } .flm-e .fume i:nth-child(3) { animation-delay: .6s; }
@keyframes flm-fume { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }
.flm-e .t { font-family: var(--font-d, 'Anton', sans-serif); font-size: 34px; line-height: .95; }
.flm-e .d { font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 700; letter-spacing: .4px; line-height: 1.5; opacity: .85; }
.flm-e .rec { font-family: var(--font-d, 'Anton', sans-serif); font-size: 13px; letter-spacing: 1px; padding: 6px 12px; border: 3px solid #FFFEF7; color: var(--yellow, #FFD600); }
.flm-e .flm-cta { box-shadow: 5px 5px 0 var(--magenta, #FF2E93); }
/* la croix de fermeture, TRACÉE */
.flm-e .x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 2; width: 42px; height: 42px; padding: 0; cursor: pointer;
  background: #FFFEF7; border: 3px solid #0A0A0A; box-shadow: 3px 3px 0 var(--magenta, #FF2E93); border-radius: 0; }
.flm-e .x::before, .flm-e .x::after { content: ''; position: absolute; left: 9px; right: 9px; top: 16px; height: 4px; background: #0A0A0A; transform: rotate(45deg); }
.flm-e .x::after { transform: rotate(-45deg); }

/* F · les paliers (+ D · le gel de série) */
.flm-f { background: var(--app-bg, #FFFEF7); }
.flm-f > .s2 { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.flm-f .pal { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 24px; }
.flm-f .lign { border: 3px solid #0A0A0A; background: var(--paper, #FFFEF7); padding: 10px; font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 10.5px;
  font-weight: 700; letter-spacing: .3px; line-height: 1.5; box-shadow: 3px 3px 0 #0A0A0A; color: var(--ink, #0A0A0A); }
.flm-f .lign.hd { display: flex; align-items: center; gap: 10px; }
.flm-f .lign.hd > div { flex: 1; min-width: 0; }
.flm-f .lign.hd .fl .nemoji { width: 36px; height: 36px; }
.flm-f .lign.hd .n { font-family: var(--font-d, 'Anton', sans-serif); font-size: 24px; }
.flm-f .prog { height: 12px; border: 3px solid #0A0A0A; background: #FFFEF7; margin-top: 4px; }
.flm-f .prog i { display: block; height: 100%; background: var(--orange, #FF9F45); }
.flm-f .pl { display: flex; align-items: center; gap: 10px; border: 3px solid #0A0A0A; background: var(--paper, #FFFEF7); box-shadow: 3px 3px 0 #0A0A0A; padding: 9px 10px; color: var(--ink, #0A0A0A); }
.flm-f .pl .n { font-family: var(--font-d, 'Anton', sans-serif); font-size: 24px; width: 46px; text-align: center; }
.flm-f .pl .m { flex: 1; min-width: 0; font-family: var(--font-d, 'Anton', sans-serif); font-size: 15px; }
.flm-f .pl .m small { display: block; font-family: var(--font-m, 'IBM Plex Mono', monospace); font-weight: 700; font-size: 9px; letter-spacing: .3px; opacity: .6; }
.flm-f .pl .r { font-family: var(--font-d, 'Anton', sans-serif); font-size: 15px; padding: 4px 8px; background: var(--yellow, #FFD600); color: #0A0A0A; border: 3px solid #0A0A0A; }
.flm-f .pl.ok { background: var(--yellow, #FFD600); color: #0A0A0A; }
.flm-f .pl.ok .r { background: var(--green, #5BE885); }
.flm-f .pl.cur { border-color: var(--magenta, #FF2E93); box-shadow: 3px 3px 0 var(--magenta, #FF2E93); }
.flm-f .pl.lock { opacity: .55; }
.flm-f .rec-b { font-family: var(--font-d, 'Anton', sans-serif); font-size: 12px; letter-spacing: 1px; padding: 3px 8px; margin-top: 3px; background: #0A0A0A; color: #FFFEF7;
  border: 2px solid #0A0A0A; box-shadow: 2px 2px 0 var(--magenta, #FF2E93); border-radius: 0; cursor: pointer; opacity: 1; }
.flm-f .gelCard { border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; background: var(--glace); color: #0A0A0A; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.flm-f .gelCard .t { font-family: var(--font-d, 'Anton', sans-serif); font-size: 30px; line-height: .95; }
.flm-f .gelCard .d { font-family: var(--font-m, 'IBM Plex Mono', monospace); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; line-height: 1.5; }
.flm-f .cube { width: 84px; height: 84px; align-self: center; background: #FFFEF7; border: 4px solid #0A0A0A; box-shadow: 5px 5px 0 #0A0A0A; display: grid; place-items: center; rotate: -4deg; }
.flm-f .cube .nemoji { width: 48px; height: 48px; }
.flm-f .stock { display: flex; gap: 6px; align-items: center; font-family: var(--font-d, 'Anton', sans-serif); font-size: 14px; }
.flm-f .stock i { width: 22px; height: 22px; border: 3px solid #0A0A0A; box-sizing: border-box; }
.flm-f .stock i.plein { background: var(--glace); box-shadow: inset 0 0 0 3px #FFFEF7; }
.flm-f .stock i.vide { background: #FFFEF7; }
.flm-f .buy { display: flex; align-items: center; gap: 10px; }
.flm-f .buy .p { font-family: var(--font-d, 'Anton', sans-serif); font-size: 24px; display: inline-flex; align-items: center; gap: 6px; }
.flm-f .buy .p .nemoji { width: 24px; height: 24px; }
.flm-f .buy .b2 { margin-left: auto; font-family: var(--font-d, 'Anton', sans-serif); font-size: 16px; padding: 9px 14px; background: #0A0A0A; color: #FFFEF7;
  border: 3px solid #0A0A0A; box-shadow: 3px 3px 0 var(--magenta, #FF2E93); border-radius: 0; cursor: pointer; }
.flm-f .buy .b2:disabled { background: #FFFEF7; color: #0A0A0A; box-shadow: none; cursor: default; }
html[data-skin="neon"] .flm-f :is(.lign, .pl:not(.cur)) { box-shadow: 3px 3px 0 var(--magenta, #FF2E93); }
html[data-skin="neon"] .flm-f .gelCard, html[data-skin="neon"] .flm-ov .flm-cta, html[data-skin="neon"] .flm-a .cont { box-shadow: 5px 5px 0 var(--magenta, #FF2E93); }

@media (prefers-reduced-motion: reduce) {
  .flm-danger .vac, .flm-e .fume i { animation: none; }
  .flm-a .odo .c { transition: none; }
}
@media (min-width: 1024px) {
  .flm-ov .in { max-width: 520px; margin: 0 auto; width: 100%; }
  .flm-f > .s2 { max-width: 640px; margin: 0 auto; width: 100%; }
}
html[data-theme] a.flm-cta, html[data-theme] a.flm-cta:visited { color: #0A0A0A; }   /* l'encre reste noire en néon */