/* ============================================================
   RAFALE — feed solo plein écran (moteur rafale.js).
   Sombre immersif, briques brutalist HOMIES, offline-safe
   (emojis unicode, aucune ressource externe).
   ============================================================ */
#sec-rafale {
  --ink:#0A0A0A; --paper:#FFFEF7; --magenta:#FF2E93; --yellow:#FFD600;
  --green:#5BE885; --red:#FF5252; --cyan:#5BD8E5; --purple:#9D4EDD;
  --teal:#4ECDC4; --blue:#4D7CFF; --orange:#FF9F45; --pink:#FF80AB;
  --fd:'Anton',sans-serif; --fm:'IBM Plex Mono',monospace;
}
/* overlay plein écran au-dessus de la nav */
#sec-rafale.sec { position:fixed; inset:0; z-index:2000; display:none; padding:0; margin:0; max-width:none; }
#sec-rafale.sec.active { display:block; }
#sec-rafale .rf-stage { position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(130% 70% at 50% -5%, #3a1670, #16092e 60%, #0a0518); }

.rf-close { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:12px; z-index:30;
  width:40px; height:40px; border:3px solid #000; background:var(--paper); color:var(--ink);
  font-family:var(--fd); font-size:18px; line-height:1; box-shadow:3px 3px 0 #000; cursor:pointer; }

/* ---------- carte ---------- */
.rf-card { position:absolute; inset:0; display:flex; flex-direction:column; color:var(--paper);
  transition:transform .22s ease, opacity .22s ease; }
.rf-card.rf-out { transform:translateY(-30px); opacity:0; }
.rf-card.is-ok::after, .rf-card.is-ko::after { content:''; position:absolute; inset:0; pointer-events:none; }
.rf-card.is-ok::after { box-shadow:inset 0 0 0 4px rgba(91,232,133,.7); }
.rf-card.is-ko::after { box-shadow:inset 0 0 0 4px rgba(255,82,82,.7); }

.rf-hud { display:flex; align-items:center; gap:8px; padding:calc(12px + env(safe-area-inset-top)) 14px 4px 60px; }
.rf-badge { font-family:var(--fd); font-size:15px; letter-spacing:1.5px; background:var(--magenta); color:#fff;
  border:3px solid #000; box-shadow:3px 3px 0 #000; padding:4px 11px; transform:rotate(-3deg); }
.rf-streak { margin-left:auto; font-family:var(--fd); font-size:20px; line-height:1; }
.rf-streak b { color:var(--yellow); }
.rf-score { font-family:var(--fm); font-weight:700; font-size:12px; border:2px solid rgba(255,255,255,.32); padding:4px 8px; }
.rf-timer { height:6px; margin:8px 14px 0; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.3); overflow:hidden; }
.rf-timer > i { display:block; height:100%; width:100%; background:var(--yellow); }

.rf-body { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; padding:16px 16px 8px; }

/* pilule de type */
.rf-pill { position:relative; align-self:flex-start; transform:rotate(-1deg); }
.rf-pill .sh { position:absolute; top:3px; left:3px; right:-3px; bottom:-3px; background:#000; }
.rf-pill .bd { position:relative; display:inline-block; padding:6px 14px; border:3px solid #000; background:var(--cyan);
  color:var(--ink); font-family:var(--fd); font-size:13px; letter-spacing:1.2px; }
.rf-pill.p-yellow .bd { background:var(--yellow); }
.rf-pill.p-purple .bd { background:var(--purple); color:var(--paper); }
.rf-pill.p-orange .bd { background:var(--orange); }
.rf-pill.p-green .bd { background:var(--green); }
.rf-pill.p-blue .bd { background:var(--blue); color:var(--paper); }

/* question */
.rf-q { position:relative; }
.rf-q .sh { position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:#000; }
.rf-q .bd { position:relative; border:3px solid rgba(255,255,255,.28); background:rgba(255,255,255,.07);
  color:var(--paper); font-family:var(--fd); font-size:21px; line-height:1.18; padding:16px; }
.rf-blank { display:inline-block; min-width:70px; border-bottom:5px solid var(--magenta); vertical-align:bottom; }

/* zone réponse : occupe le bas */
.rf-ans { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:12px; }

/* options QCM / intrus / cloze */
.rf-opts { justify-content:stretch; }
.rf-opt { position:relative; display:flex; border:0; background:none; padding:0; cursor:pointer; text-align:left; flex:1; }
.rf-opt .sh { position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:#000; }
.rf-opt .bd { position:relative; flex:1; display:flex; align-items:center; gap:12px; padding:13px 12px; border:3px solid #000; }
.rf-opt .lw { flex-shrink:0; }
.rf-opt .lb { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:2px solid #000;
  background:var(--paper); color:var(--ink); font-family:var(--fd); font-size:18px; }
.rf-opt .tx { font-family:var(--fd); font-size:18px; letter-spacing:.3px; line-height:1.15; flex:1; }
.rf-opt.c0 .bd { background:var(--yellow); color:var(--ink); }
.rf-opt.c1 .bd { background:var(--purple); color:var(--paper); }
.rf-opt.c2 .bd { background:var(--red); color:var(--paper); }
.rf-opt.c3 .bd { background:var(--teal); color:var(--paper); }
.rf-opt.tf-v .bd { background:var(--green); color:var(--ink); }
.rf-opt.tf-f .bd { background:var(--red); color:var(--paper); }
/* tampon coin */
.rf-opt .stamp { position:absolute; top:50%; right:12px; width:30px; height:30px; border:3px solid #000; box-shadow:2px 2px 0 #000;
  transform:translateY(-50%) rotate(8deg); display:none; }
/* états révélés */
.rf-opt.correct .bd { background:var(--green); color:var(--ink); border-width:5px; }
.rf-opt.wrong .bd { background:var(--red); color:var(--paper); border-width:5px; }
.rf-opt.faded { opacity:.4; }
.rf-opt.correct .stamp { display:block; background:var(--green); }
.rf-opt.correct .stamp::before { content:''; position:absolute; left:9px; top:4px; width:6px; height:13px;
  border:solid #000; border-width:0 3px 3px 0; transform:rotate(42deg); }
.rf-opt.wrong .stamp { display:block; background:var(--red); }
.rf-opt.wrong .stamp::before, .rf-opt.wrong .stamp::after { content:''; position:absolute; left:12.5px; top:5px; width:3px; height:18px; background:var(--paper); }
.rf-opt.wrong .stamp::before { transform:rotate(45deg); } .rf-opt.wrong .stamp::after { transform:rotate(-45deg); }
.rf-opt.lock { pointer-events:none; }
.rf-tf { justify-content:stretch; }
.rf-tf .rf-opt .tx { font-size:30px; letter-spacing:2px; }

/* anagramme */
.rf-slots { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; padding:12px 8px;
  background:rgba(255,255,255,.06); border:3px solid rgba(255,255,255,.28); }
.rf-slots.ok { border-color:var(--green); } .rf-slots.ko { border-color:var(--red); }
.rf-slot { width:36px; height:46px; border:3px solid #000; box-shadow:3px 3px 0 #000; background:var(--yellow);
  color:var(--ink); font-family:var(--fd); font-size:24px; display:flex; align-items:center; justify-content:center; }
.rf-slot.empty { background:rgba(255,255,255,.14); box-shadow:none; }
.rf-pool { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.rf-ltile { width:44px; height:52px; border:3px solid #000; box-shadow:3px 3px 0 #000; background:var(--paper);
  color:var(--ink); font-family:var(--fd); font-size:24px; cursor:pointer; }
.rf-ltile.used { opacity:.25; pointer-events:none; }

/* estimation */
.rf-estim { text-align:center; }
.rf-num { font-family:var(--fd); font-size:60px; color:var(--yellow); line-height:1; -webkit-text-stroke:2px #000; }
.rf-num small { -webkit-text-stroke:0; font-size:16px; }
.rf-num.ok { color:var(--green); } .rf-num.near { color:var(--yellow); } .rf-num.ko { color:var(--red); }
.rf-slider { width:100%; margin:16px 0 4px; accent-color:var(--magenta); height:26px; }
.rf-lim { display:flex; justify-content:space-between; font-family:var(--fd); font-size:12px; color:rgba(255,255,255,.55); }

/* bouton valider générique */
.rf-go { margin-top:14px; align-self:stretch; border:4px solid #000; box-shadow:5px 5px 0 #000; background:var(--yellow);
  color:var(--ink); font-family:var(--fd); font-size:19px; letter-spacing:1px; padding:14px; cursor:pointer; }
.rf-go.lock { pointer-events:none; opacity:.7; }

/* plus / moins */
.rf-hilo-wrap { justify-content:center; }
.rf-hilo { display:flex; gap:10px; }
.rf-hcard { flex:1; border:3px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper); color:var(--ink);
  padding:14px 6px; text-align:center; }
.rf-hcard.target { background:var(--yellow); }
.rf-hcard .e { font-size:36px; line-height:1; }
.rf-hcard .nm { font-family:var(--fd); font-size:13px; margin-top:6px; }
.rf-hcard .v { font-family:var(--fd); font-size:20px; margin-top:2px; color:var(--magenta); }
.rf-hcard.target .v { color:var(--ink); }
.rf-pm { display:flex; gap:10px; margin-top:14px; }
.rf-pm .rf-opt { flex:1; }
.rf-pm .rf-opt .bd { justify-content:center; padding:20px; }
.rf-pm .rf-opt .tx { flex:0; font-size:24px; }

/* saisie texte (emoji / 4 images / rébus) */
.rf-typebox { justify-content:flex-start; }
.rf-bigemoji { text-align:center; font-size:110px; line-height:1.1; }
.rf-grid4 { display:grid; grid-template-columns:1fr 1fr; gap:9px; max-width:260px; margin:0 auto; }
.rf-grid4 .im { aspect-ratio:1; border:3px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:50px; }
.rf-rebus { display:flex; align-items:center; justify-content:center; gap:10px; }
.rf-rebus .e { width:78px; height:78px; border:4px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:48px; }
.rf-rebus .plus { font-family:var(--fd); font-size:34px; }
.rf-input { width:100%; box-sizing:border-box; border:4px solid #000; box-shadow:4px 4px 0 #000; background:var(--paper);
  color:var(--ink); font-family:var(--fd); font-size:22px; letter-spacing:1px; text-transform:uppercase; padding:14px; }
.rf-input.ok { background:var(--green); } .rf-input.ko { background:var(--red); color:var(--paper); }
.rf-hint { font-family:var(--fm); font-weight:700; font-size:12px; color:rgba(255,255,255,.6); text-align:center; }

/* pied swipe */
.rf-foot { flex-shrink:0; text-align:center; padding:6px 0 calc(14px + env(safe-area-inset-bottom)); }
.rf-swipe { font-family:var(--fm); font-weight:700; font-size:12px; letter-spacing:.5px; color:rgba(255,255,255,.85); cursor:pointer; }
.rf-swipe .up { display:block; font-size:16px; animation:rf-up 1.2s ease-in-out infinite; }
@keyframes rf-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.rf-peek { position:absolute; left:0; right:0; bottom:0; height:22px; border-top:2px dashed rgba(255,255,255,.14); pointer-events:none; }

/* palier de série */
.rf-palier { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 70% at 50% 35%, rgba(255,46,147,.96), rgba(20,9,38,.96)); opacity:0; transition:opacity .2s; }
.rf-palier.show { opacity:1; }
.rf-palier .in { text-align:center; color:var(--paper); display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px; }
.rf-palier .big { font-size:96px; line-height:1; }
.rf-palier .ttl { font-family:var(--fd); font-size:40px; -webkit-text-stroke:1.5px #000; }
.rf-palier .sub { font-family:var(--fm); font-weight:700; font-size:13px; }

.rf-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:var(--fd); font-size:24px; }

/* ---------- ANIMATIONS (game-feel) ---------- */
/* entrée : le contenu monte à chaque nouvelle carte */
.rf-hud { animation: rf-rise .34s ease both; }
.rf-body { animation: rf-rise .34s ease both; animation-delay:.05s; }
.rf-foot { animation: rf-rise .34s ease both; animation-delay:.10s; }
@keyframes rf-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* révélation : le bon rebondit, le mauvais tremble ; le tampon apparaît */
.rf-opt.correct .bd { animation: rf-pop .45s ease; }
.rf-opt.wrong .bd { animation: rf-shake .42s ease; }
@keyframes rf-pop { 0%{transform:scale(1);} 35%{transform:scale(1.05);} 100%{transform:scale(1);} }
@keyframes rf-shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.rf-opt.correct .stamp, .rf-opt.wrong .stamp { animation: rf-stamp .3s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes rf-stamp { from{transform:translateY(-50%) rotate(8deg) scale(0);} to{transform:translateY(-50%) rotate(8deg) scale(1);} }
.rf-slots.ok, .rf-slots.ko { animation: rf-pop .45s ease; }

/* série / score qui pulsent quand ils changent */
.rf-bump { animation: rf-bumpk .42s ease; }
@keyframes rf-bumpk { 0%{transform:scale(1);} 30%{transform:scale(1.3);} 100%{transform:scale(1);} }

/* palier */
.rf-palier.show .big { animation: rf-pop2 .55s cubic-bezier(.2,1.4,.4,1) both; }
.rf-palier.show .ttl, .rf-palier.show .sub, .rf-palier.show .rf-go { animation: rf-rise .4s ease both; animation-delay:.12s; }
@keyframes rf-pop2 { 0%{transform:scale(.3);opacity:0;} 60%{transform:scale(1.18);} 100%{transform:scale(1);opacity:1;} }

/* petit souffle sur le gros emoji « devine » */
.rf-bigemoji { animation: rf-float 2.6s ease-in-out infinite; }
@keyframes rf-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* enfoncement des boutons au clic */
.rf-opt:not(.lock):active .bd, .rf-ltile:not(.used):active, .rf-go:not(.lock):active { transform:translate(2px,2px); }

@media (prefers-reduced-motion: reduce) {
  .rf-hud, .rf-body, .rf-foot, .rf-opt.correct .bd, .rf-opt.wrong .bd,
  .rf-opt.correct .stamp, .rf-opt.wrong .stamp, .rf-slots.ok, .rf-slots.ko,
  .rf-bump, .rf-palier.show .big, .rf-palier.show .ttl, .rf-bigemoji, .rf-swipe .up { animation:none !important; }
  .rf-card { transition:none !important; }
}

/* tablette/desktop : on centre une colonne façon téléphone */
@media (min-width:700px) {
  #sec-rafale .rf-stage { max-width:440px; left:50%; transform:translateX(-50%); border-left:3px solid rgba(0,0,0,.4); border-right:3px solid rgba(0,0,0,.4); }
}