@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --jeux-primary: #e63946;
  --jeux-secondary: #7b2d8b;
  --jeux-accent: #3a86ff;
  --anime-primary: #ff69b4;
  --anime-secondary: #ffd700;
  --anime-accent: #ff1493;
  --cuisine-primary: #f77f00;
  --cuisine-secondary: #2d6a4f;
  --cuisine-accent: #ffffff;
  --bg-dark: #0f0f0f;
  --bg-card: #1a1a2e;
  --text-light: #f0f0f0;
  --text-muted: #aaa;
}

body {
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Segoe UI', sans-serif;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }

/* ===== FONTS ===== */
.font-gaming {
  font-family: 'Courier New', 'Lucida Console', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.font-cartoon {
  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
}

/* ===== HEADER ===== */
.site-header {
  text-align: center;
  padding: 2rem 1rem 1rem;
}

.site-header a {
  font-size: 5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #e63946, #7b2d8b, #3a86ff, #f77f00, #2d6a4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.star-gradient {
  background: linear-gradient(90deg, #e63946, #7b2d8b, #3a86ff, #f77f00, #2d6a4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.star-large {
  font-size: 3rem;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ===== NAV BREADCRUMB ===== */
.breadcrumb {
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-light); }
.breadcrumb span { margin: 0 0.4rem; }

/* ===== HERO TILES (accueil) ===== */
.tiles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.tile {
  width: 320px;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tile:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.tile-jeux {
  background: linear-gradient(135deg, #1a0030, #2d0050);
  border: 2px solid var(--jeux-primary);
  box-shadow: 0 0 30px rgba(230,57,70,0.3);
}

.tile-anime {
  background: linear-gradient(135deg, #1a0015, #2d0025);
  border: 2px solid var(--anime-primary);
  box-shadow: 0 0 30px rgba(255,105,180,0.3);
}

.tile-cuisine {
  background: linear-gradient(135deg, #1a0f00, #2d1a00);
  border: 2px solid var(--cuisine-primary);
  box-shadow: 0 0 30px rgba(247,127,0,0.3);
}

.tile-icon {
  font-size: 6rem;
}

.tile-title {
  font-size: 1.6rem;
  font-weight: 800;
}

.tile-jeux .tile-title { color: var(--jeux-primary); font-family: 'Courier New', monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.tile-anime .tile-title { color: var(--anime-primary); font-family: 'Bangers', cursive; letter-spacing: 0.05em; }
.tile-cuisine .tile-title { color: var(--cuisine-primary); font-family: 'Comic Sans MS', cursive; }

.tile-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== SECTION HEADERS ===== */
.section-header {
  padding: 2rem 1.5rem 1rem;
  text-align: center;
}

.section-header h1 {
  font-size: 2.2rem;
  font-weight: 900;
}

.section-header p {
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* ===== JEUX - COULEURS ===== */
.theme-jeux { --primary: #e63946; --secondary: #7b2d8b; --accent: #3a86ff; }

.theme-jeux .section-header h1 {
  color: var(--jeux-primary);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(230,57,70,0.5);
}

.theme-jeux,
.theme-jeux body {
  font-family: 'Courier New', monospace;
}

/* ===== ANIME - COULEURS ===== */
.theme-anime { --primary: #ff69b4; --secondary: #ffd700; --accent: #ff1493; }

.theme-anime .section-header h1 {
  color: var(--anime-primary);
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(255,105,180,0.5);
}

/* ===== CUISINE - COULEURS ===== */
.theme-cuisine .section-header h1 {
  color: var(--cuisine-primary);
  font-family: 'Comic Sans MS', cursive;
}

/* ===== CARDS GRID ===== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem;
  justify-content: center;
  padding: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* ===== GAME CARD ===== */
.game-card {
  width: 260px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #333;
  background: var(--bg-card);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.game-card-banner {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
}

.game-card-body {
  padding: 1rem;
}

.game-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.theme-anime .game-card-title {
  font-family: 'Bangers', cursive;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.game-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.theme-jeux .game-card-meta {
  font-family: 'Courier New', monospace;
}

/* Couleurs par jeu */
.banner-valorant  { background: linear-gradient(135deg, #1a0000, #ff4655); }
.banner-fortnite  { background: linear-gradient(135deg, #001a3a, #00d4ff); }
.banner-hogwarts  { background: linear-gradient(135deg, #1a0a00, #9b59b6); }
.banner-miles     { background: linear-gradient(135deg, #0a0a1a, #e63946); }
.banner-skate     { background: linear-gradient(135deg, #1a0a00, #ff6b35); }
.banner-granturismo { background: linear-gradient(135deg, #0a0020, #ff3333); }

/* Couleurs par anime */
.banner-anime-black   { background: linear-gradient(135deg, #0a0a1a, #1a3a1a); }
.banner-anime-drstone { background: linear-gradient(135deg, #0a1a1a, #00ff88); }
.banner-anime-onepiece { background: linear-gradient(135deg, #1a0a00, #ff0000); }
.banner-anime-hxh     { background: linear-gradient(135deg, #1a1a00, #ffcc00); }

/* ===== RECIPE CARD ===== */
.recipe-card {
  width: 280px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a0f00, #2d1a00);
  border: 1px solid var(--cuisine-primary);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(247,127,0,0.3);
}

.recipe-card-banner {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: rgba(247,127,0,0.1);
}

.recipe-card-body { padding: 1rem; }

.recipe-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cuisine-primary);
  font-family: 'Comic Sans MS', cursive;
  margin-bottom: 0.5rem;
}

.recipe-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-weight: 600;
}

.badge-easy   { background: #2d6a4f; color: #b7e4c7; }
.badge-medium { background: #e9c46a33; color: #e9c46a; border: 1px solid #e9c46a55; }
.badge-hard   { background: #e6394622; color: #e63946; border: 1px solid #e6394644; }
.badge-time   { background: #1a2a4a; color: #90c0ff; }
.badge-portions { background: #2a1a3a; color: #d4a0ff; }

/* ===== GAME PAGE ===== */
.game-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

.game-hero {
  border-radius: 20px;
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.game-hero-icon { font-size: 7rem; }

.game-hero-info h1 {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.game-hero-info p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 500px;
}

.game-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.meta-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: #ddd;
}

.theme-jeux .meta-chip {
  font-family: 'Courier New', monospace;
}

.meta-chip .icon { font-size: 1rem; }

/* Couleurs hero par jeu */
.hero-valorant  { background: linear-gradient(135deg, #1a0000 0%, #3d0010 100%); border: 1px solid #ff465533; }
.hero-fortnite  { background: linear-gradient(135deg, #001020 0%, #002040 100%); border: 1px solid #00d4ff33; }
.hero-hogwarts  { background: linear-gradient(135deg, #100a00 0%, #1e1030 100%); border: 1px solid #9b59b633; }
.hero-miles     { background: linear-gradient(135deg, #0a0a1a 0%, #1a0010 100%); border: 1px solid #e6394633; }
.hero-skate     { background: linear-gradient(135deg, #1a0a00 0%, #2a1500 100%); border: 1px solid #ff6b3533; }
.hero-granturismo { background: linear-gradient(135deg, #0a0020 0%, #003080 100%); border: 1px solid #0066ff33; }

.hero-valorant  h1 { color: #ff4655; text-shadow: 0 0 20px rgba(255,70,85,0.4); font-family: 'Courier New', monospace; }
.hero-fortnite  h1 { color: #00d4ff; text-shadow: 0 0 20px rgba(0,212,255,0.4); font-family: 'Courier New', monospace; }
.hero-hogwarts  h1 { color: #c8a951; text-shadow: 0 0 20px rgba(200,169,81,0.4); font-family: 'Courier New', monospace; }
.hero-miles     h1 { color: #e63946; text-shadow: 0 0 20px rgba(230,57,70,0.4); font-family: 'Courier New', monospace; }
.hero-skate     h1 { color: #ff6b35; text-shadow: 0 0 20px rgba(255,107,53,0.4); font-family: 'Courier New', monospace; }
.hero-granturismo h1 { color: #ff3333; text-shadow: 0 0 20px rgba(255,51,51,0.4); font-family: 'Courier New', monospace; }

/* Couleurs hero par anime */
.hero-black    { background: linear-gradient(135deg, #0a0a1a 0%, #1a3a1a 100%); border: 1px solid #00ff8833; }
.hero-drstone { background: linear-gradient(135deg, #0a1a1a 0%, #1a3a2a 100%); border: 1px solid #00ff8833; }
.hero-onepiece { background: linear-gradient(135deg, #1a0a00 0%, #3a1a00 100%); border: 1px solid #ff000033; }
.hero-hxh     { background: linear-gradient(135deg, #1a1a00 0%, #3a3a00 100%); border: 1px solid #ffcc0033; }

.hero-black    h1 { color: #00ff88; text-shadow: 0 0 20px rgba(0,255,136,0.4); }
.hero-drstone h1 { color: #00ff88; text-shadow: 0 0 20px rgba(0,255,136,0.4); }
.hero-onepiece h1 { color: #ff0000; text-shadow: 0 0 20px rgba(255,0,0,0.4); }
.hero-hxh     h1 { color: #ffcc00; text-shadow: 0 0 20px rgba(255,204,0,0.4); }

/* ===== TIPS SECTION ===== */
.tips-section {
  margin-top: 1.5rem;
}

.tips-section h2 {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #333;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
}

.tips-list li {
  background: rgba(255,255,255,0.04);
  border-left: 4px solid #555;
  border-radius: 0 10px 10px 0;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.tip-label {
  font-weight: 700;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.color-valorant li  { border-left-color: #ff4655; }
.color-fortnite li  { border-left-color: #00d4ff; }
.color-hogwarts li  { border-left-color: #c8a951; }
.color-miles    li  { border-left-color: #e63946; }
.color-skate    li  { border-left-color: #ff6b35; }
.color-granturismo li { border-left-color: #ff3333; }

.color-valorant .tip-label  { color: #ff4655; }
.color-fortnite .tip-label  { color: #00d4ff; }
.color-hogwarts .tip-label  { color: #c8a951; }
.color-miles    .tip-label  { color: #e63946; }
.color-skate    .tip-label  { color: #ff6b35; }
.color-granturismo .tip-label { color: #ff3333; }

/* Couleurs pour anime */
.color-black    li { border-left-color: #00ff88; }
.color-drstone li { border-left-color: #00ff88; }
.color-onepiece li { border-left-color: #ff0000; }
.color-hxh     li { border-left-color: #ffcc00; }

.color-black    .tip-label { color: #00ff88; }
.color-drstone .tip-label { color: #00ff88; }
.color-onepiece .tip-label { color: #ff0000; }
.color-hxh     .tip-label { color: #ffcc00; }

/* ===== RECIPE PAGE ===== */
.recipe-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

.recipe-hero {
  background: linear-gradient(135deg, #1a0f00, #2d1a00);
  border: 1px solid rgba(247,127,0,0.3);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.recipe-hero-icon { font-size: 7rem; }

.recipe-hero-info h1 {
  font-family: 'Comic Sans MS', cursive;
  color: var(--cuisine-primary);
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

.recipe-blocks {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.recipe-block {
  flex: 1;
  min-width: 220px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #333;
}

.recipe-block h2 {
  font-family: 'Comic Sans MS', cursive;
  color: var(--cuisine-primary);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.recipe-block ul, .recipe-block ol {
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #ddd;
}

.recipe-block ol { counter-reset: steps; }
.recipe-block ol li {
  counter-increment: steps;
  margin-bottom: 0.5rem;
}

.recipe-tip {
  background: rgba(45,106,79,0.15);
  border: 1px solid rgba(45,106,79,0.4);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: #b7e4c7;
  margin-top: 1rem;
  font-family: 'Comic Sans MS', cursive;
}

.recipe-tip::before { content: "💡 Astuce : "; font-weight: 700; }

/* ===== FOOTER ===== */
.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #666;
  font-size: 0.85rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .tile { width: 90vw; }
  .tile-icon { font-size: 4.5rem; }
  .game-hero { flex-direction: column; text-align: center; }
  .recipe-hero { flex-direction: column; text-align: center; }
  .game-hero-icon { font-size: 5rem; }
  .recipe-hero-icon { font-size: 5rem; }
  .game-hero-info h1 { font-size: 1.4rem; }
  .site-header a { font-size: 3rem; }
  .star-large { font-size: 2rem; }
  .cards-grid { grid-template-columns: 1fr; }
}