/* ============================================================
   PF2026 — Mini-site Rouge Feu et Vert Feuille (Kanto, GBA)
   Composants : retro-hub.css · gabarit : template-parts/guides/hub-frlg.php
   Identité : braises (Rouge Feu) et feuillage (Vert Feuille), recolorée selon la version.
   ============================================================ */

.rh--frlg { --rh-accent: #E2531A; --rh-dark: #6E1E04; --rh-soft: #FFF0E8; --rh-glow: #FFB23F; --gba-1: #8C7CD6; --gba-2: #5A4AB0; }
.rh--frlg[data-rh-version="vert-feuille"] { --rh-accent: #3E9E3A; --rh-dark: #173F14; --rh-soft: #ECF8EA; --rh-glow: #B6E35A; --gba-1: #7FB86A; --gba-2: #4C8A3E; }

/* Héros : braises qui montent (Rouge Feu) ou feuilles qui tombent (Vert Feuille) */
.rh--frlg .rh-hero {
  background:
    radial-gradient(ellipse at 78% 22%, color-mix(in srgb, var(--rh-glow) 60%, transparent), transparent 55%),
    radial-gradient(ellipse at 12% 95%, rgba(0, 0, 0, .38), transparent 60%),
    linear-gradient(165deg, var(--rh-accent) 0%, var(--rh-dark) 78%);
}
.rh--frlg .fl-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(3px 3px at 12% 80%, #FFE08A 98%, transparent),
    radial-gradient(2px 2px at 28% 60%, #FFD36B 98%, transparent),
    radial-gradient(3px 3px at 46% 90%, #FFC04D 98%, transparent),
    radial-gradient(2px 2px at 63% 70%, #FFE6A8 98%, transparent),
    radial-gradient(3px 3px at 81% 85%, #FFB347 98%, transparent),
    radial-gradient(2px 2px at 92% 55%, #FFD98A 98%, transparent);
  background-size: 100% 100%;
  animation: fl-rise 9s linear infinite;
}
@keyframes fl-rise { from { transform: translateY(30%); opacity: 0; } 20% { opacity: .55; } to { transform: translateY(-40%); opacity: 0; } }
.rh--frlg[data-rh-version="vert-feuille"] .fl-embers {
  background:
    radial-gradient(5px 3px at 12% 10%, #D8F5A2 98%, transparent),
    radial-gradient(4px 3px at 31% 30%, #BDEB7A 98%, transparent),
    radial-gradient(5px 3px at 52% 5%, #E5F9C0 98%, transparent),
    radial-gradient(4px 3px at 70% 25%, #C9F08E 98%, transparent),
    radial-gradient(5px 3px at 88% 12%, #D8F5A2 98%, transparent);
  animation: fl-fall 11s linear infinite;
}
@keyframes fl-fall { from { transform: translate(0, -20%) rotate(0deg); opacity: 0; } 20% { opacity: .6; } to { transform: translate(-4%, 60%) rotate(8deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rh--frlg .fl-embers { animation: none; } }

.rh--frlg .rh-hero__versions b.is-rouge-feu { color: #FFD3B8; }
.rh--frlg .rh-hero__versions b.is-vert-feuille { color: #D7F3C8; }
.rh--frlg[data-rh-version="rouge-feu"] .rh-hero__versions b.is-rouge-feu,
.rh--frlg[data-rh-version="vert-feuille"] .rh-hero__versions b.is-vert-feuille { opacity: 1; color: #fff; }
.rh--frlg .rh-gba__screen { background: radial-gradient(circle at 50% 40%, var(--rh-glow), var(--rh-accent) 55%, #1A0B05); }

/* ---------- Le retour sur Switch ---------- */
.rh--frlg .fl-switch { background: linear-gradient(180deg, #fff, var(--rh-paper)); }
.fl-switch__card { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 28px; padding: 30px; border-radius: 30px; background: #fff; border: 1px solid var(--rh-line); box-shadow: 0 30px 60px -40px rgba(20, 20, 40, .6); overflow: hidden; }
/* Les deux Joy-Con, en liseré */
.fl-switch__card::before, .fl-switch__card::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; }
.fl-switch__card::before { left: 0; background: #00B8E6; }
.fl-switch__card::after { right: 0; background: #FF4E3F; }
.fl-switch__logo { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.fl-switch__logo span { width: 16px; height: 30px; border-radius: 10px 3px 3px 10px; background: #00B8E6; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.fl-switch__logo span:last-child { border-radius: 3px 10px 10px 3px; background: #FF4E3F; }
.fl-switch__intro h2 { margin: 0 0 12px; font-family: var(--rh-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; }
.fl-switch__intro p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--rh-muted); }
.fl-switch__price { color: var(--rh-ink) !important; }
.fl-switch__price b { display: inline-block; padding: 3px 10px; border-radius: 8px; background: #E60012; color: #fff; }
.fl-switch__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fl-switch__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fl-switch__facts li { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: var(--rh-paper); border: 1px solid var(--rh-line); }
.fl-switch__facts li > span { flex: 0 0 auto; font-size: 26px; line-height: 1; }
.fl-switch__facts b { display: block; font-size: 15px; margin-bottom: 3px; }
.fl-switch__facts p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--rh-muted); }

/* ---------- Îles Sevii ---------- */
.rh--frlg .fl-sevii { background: linear-gradient(180deg, #E9F6FF, #F6FBFF); }
.fl-islands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.fl-island a { display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #D5E7F5; color: var(--rh-ink); text-decoration: none; box-shadow: 0 18px 40px -30px rgba(10, 60, 120, .6); transition: transform .2s; }
.fl-island a:hover { transform: translateY(-4px); }
.fl-island__map { position: relative; display: block; aspect-ratio: 16 / 10; background: #5BB6E8; overflow: hidden; }
.fl-island__map img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.fl-island__map b { position: absolute; left: 12px; top: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0F5C8C; font-family: var(--rh-display); font-weight: 400; font-size: 22px; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.fl-island__body { display: block; padding: 12px 16px 16px; }
.fl-island__body > b { font-size: 18px; }
.fl-island__body small { margin-left: 8px; padding: 2px 8px; border-radius: 99px; background: #E3F1FB; color: #0F5C8C; font-size: 11px; font-weight: 800; }
.fl-island__body p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--rh-muted); }

/* Bandeau des étapes (couleurs par version) */
.pf-frlg .rh-ribbon { --rh-accent: #E2531A; --rh-dark: #6E1E04; --rh-display: 'Lilita One', system-ui, sans-serif; }
:root[data-rg-fam="frlg"][data-rg-v="VF"] .rh-ribbon { --rh-accent: #3E9E3A; --rh-dark: #173F14; }

@media (max-width: 900px) {
  .fl-switch__card { grid-template-columns: 1fr; padding: 24px 22px; }
}
@media (max-width: 560px) {
  .fl-switch__facts { grid-template-columns: 1fr; }
}