/* Core palette and elevation - Improved readability */
:root {
  --bg: #0a0a0b;
  --bg-alt:#111112;
  --panel: #181819;
  --panel-alt:#1f1f20;
  --accent: #ff7a18;
  --accent-hover:#ff973f;
  --accent-glow: 255 122 24;
  --text: #f8f8f8; /* Slightly brighter for better contrast */
  --text-secondary: #e0e0e0; /* For important secondary text */
  --muted: #c0b8af; /* Improved contrast for muted text */
  --border: #2f2f31;
  --focus-ring: #ff7a18; /* Clear focus indicator */
  --radius: 8px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 28px -4px rgba(0,0,0,.7);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { 
  scroll-behavior: smooth; 
  font-size: 16px; /* Base font size for better accessibility */
}
body { 
  margin:0; 
  font-family: 'Crimson Text', Georgia, serif; 
  background: radial-gradient(circle at 40% 20%, #141414 0%, #080808 60%, #050505 100%); 
  color: var(--text); 
  line-height: 1.6; /* Improved line height for readability */
  font-size: 1rem; /* Explicit font size */
}

/* Accessibility - Enhanced */
.skip-link { 
  position: absolute; 
  left: -9999px; 
  top: auto; 
  width: 1px; 
  height: 1px; 
  overflow: hidden; 
}
.skip-link:focus { 
  left: 8px; 
  top: 8px; 
  width: auto; 
  height: auto; 
  background: var(--accent); 
  color: #000; 
  padding: 12px 16px; 
  border-radius: 6px; 
  z-index: 1000; 
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

/* Focus management */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

.site-header { background: linear-gradient(180deg,#121212,#0d0d0d); box-shadow: var(--shadow-sm); position:sticky;top:0;z-index:50; backdrop-filter: blur(6px); border-bottom:1px solid #1e1e1f; }
.header-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:10px 28px; }
.logo { font-family:'MedievalSharp',serif; font-size:1.55rem; letter-spacing:.5px; color:var(--accent); text-shadow:0 0 12px rgba(var(--accent-glow)/0.25); }

.nav-list { list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.nav-list a { display:inline-block; padding:8px 14px; font-size:.95rem; font-weight:600; text-decoration:none; color:var(--text); border:1px solid transparent; border-radius:8px; position:relative; transition:.25s; }
.nav-list a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.nav-list a:hover { background:rgba(var(--accent-glow)/0.12); color:var(--accent); border-color:rgba(var(--accent-glow)/0.25); }

.banner { padding:68px 20px 54px; text-align:center; background: linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.85)), url('https://pwimages-a.akamaihd.net/arc/50/84/508405080f15665c9f5a9c27ce8de99a1418176448.jpg'); background-size:cover; background-position:center; border-bottom:1px solid #1d1d1e; box-shadow: inset 0 0 80px -20px rgba(0,0,0,.8); }
.banner h1 { font-family:'MedievalSharp',serif; font-size:2.4rem; margin:0 0 12px; color: var(--accent); letter-spacing:.5px; }
.banner .lead { max-width:720px; margin:0 auto; color:var(--muted); font-size:1.05rem; }

main { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 24px 80px; /* Increased padding for better breathing room */
}
.section { 
  margin-top: 48px; /* Increased spacing between sections */
}
.section-title { 
  font-family: 'MedievalSharp', serif; 
  font-size: 2rem; /* Slightly larger for better hierarchy */
  margin: 0 0 24px; 
  color: var(--accent); 
  letter-spacing: .5px; 
  line-height: 1.2; /* Better line height for titles */
}
.center { 
  text-align: center; 
}
.section-intro { 
  max-width: 720px; 
  margin: 0 auto 32px; 
  color: var(--text-secondary); 
  font-size: 1.1rem; 
  line-height: 1.6;
}

/* Cards & grid - Improved readability */
.cards-grid { 
  display: grid; 
  gap: 28px; /* Increased gap for better separation */
}
.cards-grid.three { 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
}
.cards-grid.two { 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
}
.card { 
  background: linear-gradient(165deg, var(--panel), var(--panel-alt)); 
  padding: 28px; /* Increased padding for better breathing room */
  border-radius: var(--radius); 
  border: 1px solid var(--border); 
  box-shadow: var(--shadow-md); 
  position: relative; 
  overflow: hidden; 
  isolation: isolate; 
}
.card::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at 120% -10%, rgba(var(--accent-glow)/0.15), transparent 60%); 
  opacity: .6; 
  pointer-events: none; 
  mix-blend-mode: overlay; 
}
.card h3 { 
  margin: 0 0 16px; 
  font-size: 1.25rem; /* Slightly larger for better hierarchy */
  font-weight: 700; 
  color: var(--accent-hover); 
  line-height: 1.3;
}
.card p { 
  margin: 0 0 12px; 
  font-size: 1rem; /* Improved font size for readability */
  color: var(--text-secondary); 
  line-height: 1.6; 
}
.card p:last-child {
  margin-bottom: 0;
}
.card.power:hover { 
  box-shadow: 0 8px 32px -4px rgba(var(--accent-glow)/0.4); 
  transform: translateY(-2px); 
  transition: .35s; 
}

/* Stats & subtle separation */
.stat { border-left:3px solid var(--accent); }

/* Navigation refonte */
.nav-inline { list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center; }
.nav-inline a { position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:.9rem; font-weight:600; color:var(--text); text-decoration:none; letter-spacing:.4px; }
.nav-inline a::after { content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; background: linear-gradient(90deg,transparent,var(--accent),transparent); transform:scaleX(0); transform-origin:center; transition:.4s; opacity:.6; }
.nav-inline a:hover::after, .nav-inline a:focus-visible::after { transform:scaleX(1); }
.nav-inline a:hover { color:var(--accent); }
.nav-inline a.soon { opacity:.55; cursor:default; }
.nav-inline a.soon:hover { color:var(--text); }

/* Hero actions */
.hero-actions { margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn.ghost { background: rgba(var(--accent-glow)/0.12); color:var(--accent); border:1px solid rgba(var(--accent-glow)/0.4); }
.btn.ghost:hover { background: rgba(var(--accent-glow)/0.2); }

/* Remove unused creator styles */
.creator-layout, .choice-panel, .choice-list, .choice-item, .preview-panel, .desc-panel, .race-figure, .actions { display:none !important; }

/* Utility */
.muted { color:var(--muted); }
.small { font-size:.75rem; }
.accent { color:var(--accent); }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Footer */
.site-footer { background:#0d0d0e; padding:30px 20px; text-align:center; border-top:1px solid #1b1b1c; font-size:.85rem; color:var(--muted); }

/* Animations subtle */
@media (prefers-reduced-motion: no-preference) {
  .card, .choice-item, .btn.primary { transition: box-shadow .35s, transform .35s, background .4s, border-color .35s; }
}

/* Responsive improvements */
@media (max-width: 768px) {
  .banner { 
    padding: 56px 20px 46px; 
  }
  .banner h1 { 
    font-size: 2.2rem; 
  }
  .header-inner { 
    padding: 12px 20px; 
  }
  .nav-clean {
    gap: 20px;
  }
  .nav-clean a { 
    padding: 10px 16px; 
    font-size: 0.9rem; 
  }
  .section-title {
    font-size: 1.8rem;
  }
  .cards-grid {
    gap: 20px;
  }
  .card {
    padding: 20px;
  }
  main {
    padding: 0 16px 60px;
  }
}

/* === NOUVEAUX STYLES === */

/* Navigation refonte - Improved accessibility */
.nav-clean { 
  list-style: none; 
  display: flex; 
  gap: 32px; 
  margin: 0; 
  padding: 0; 
  align-items: center; 
}
.nav-clean a { 
  position: relative; 
  display: inline-flex; 
  align-items: center; 
  padding: 12px 20px; 
  font-size: 1rem; 
  font-weight: 600; 
  color: var(--text); 
  text-decoration: none; 
  letter-spacing: .3px; 
  border-radius: var(--radius); 
  transition: .3s; 
  min-height: 44px; /* WCAG minimum touch target */
}
.nav-clean a:hover, 
.nav-clean a:focus-visible { 
  background: rgba(var(--accent-glow)/0.15); 
  color: var(--accent); 
}
.nav-clean a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Hero section buttons */
.hero-actions { margin-top:28px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn.secondary { background: var(--panel); color:var(--text); border:1px solid var(--border); }
.btn.secondary:hover { background: var(--panel-alt); border-color:var(--accent); }

/* Alternating sections colors */
.card-dark { background: linear-gradient(165deg, var(--bg-alt), var(--panel)); border:1px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow: var(--shadow-md); }

/* Content layouts - Enhanced readability */
.content-split { 
  display: grid; 
  gap: 40px; 
  grid-template-columns: 2fr 1fr; 
  align-items: start; 
  margin-bottom: 24px;
}
@media (max-width: 768px) { 
  .content-split { 
    grid-template-columns: 1fr; 
    gap: 24px;
  } 
}

.highlight-box, .atmosphere-box { 
  background: rgba(var(--accent-glow)/0.12); 
  border: 1px solid rgba(var(--accent-glow)/0.25); 
  border-radius: var(--radius); 
  padding: 24px; 
}
.highlight-box h3, .atmosphere-box h3 { 
  color: var(--accent); 
  margin-bottom: 16px; 
  font-size: 1.1rem;
}
.highlight-box ul { 
  margin: 0; 
  padding-left: 20px; 
}
.highlight-box li { 
  margin-bottom: 8px; 
  color: var(--text); 
  line-height: 1.5;
}

.text-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

/* Cards grids extended */
.cards-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rule-card { background: linear-gradient(145deg, var(--panel), var(--panel-alt)); border:1px solid var(--border); border-radius:8px; padding:20px; }
.rule-card h3 { color:var(--accent); margin-bottom:12px; font-size:1.1rem; }
.rule-card p { color:var(--muted); font-size:.9rem; line-height:1.4; }

/* Power cards with faction colors */
.power-card { background: linear-gradient(145deg, var(--panel), var(--panel-alt)); border:1px solid var(--border); border-radius:8px; padding:24px; position:relative; overflow:hidden; }
.power-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.power-card.nebris::before { background: linear-gradient(90deg, #666, #999); }
.power-card.nilheim::before { background: linear-gradient(90deg, #4a7c59, #6b8f71); }
.power-card.loara::before { background: linear-gradient(90deg, #8b2635, #a53847); }

.power-card h3 { color:var(--accent); margin-bottom:8px; }
.power-card p { margin-bottom:12px; font-size:.9rem; }
.power-card .faction-traits { margin:0; padding:0; list-style:none; }
.power-card .faction-traits li { padding:4px 0; color:var(--muted); font-size:.85rem; position:relative; padding-left:12px; }
.power-card .faction-traits li::before { content:"•"; position:absolute; left:0; color:var(--accent); }

/* Glossary - Enhanced accessibility */
.glossary-grid { 
  display: grid; 
  gap: 32px; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}
.glossary-category { 
  background: var(--panel); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 28px; 
}
.glossary-category h3 { 
  color: var(--accent); 
  margin-bottom: 20px; 
  border-bottom: 2px solid rgba(var(--accent-glow)/0.25); 
  padding-bottom: 12px; 
  font-size: 1.2rem;
}
.glossary-category dl { 
  margin: 0; 
}
.glossary-category dt { 
  color: var(--accent-hover); 
  font-weight: 700; 
  margin-top: 16px; 
  margin-bottom: 6px; 
  font-size: 1rem;
}
.glossary-category dt:first-child { 
  margin-top: 0; 
}
.glossary-category dd { 
  color: var(--text-secondary); 
  margin: 0 0 12px 0; 
  font-size: 0.95rem; 
  line-height: 1.6; 
}

/* Creator preview */
.creator-preview { text-align:center; max-width:600px; margin:0 auto; }
.preview-content h3 { color:var(--accent); margin-bottom:16px; }
.feature-list { text-align:left; max-width:400px; margin:20px auto; }
.feature-list li { margin-bottom:8px; color:var(--text); }
.coming-soon { background: rgba(var(--accent-glow)/0.08); border:1px solid rgba(var(--accent-glow)/0.2); border-radius:6px; padding:16px; margin-top:24px; }
.coming-soon p { margin:6px 0; color:var(--muted); }

/* Bouton principal — usage conseillé : <a class="btn-primary" href="">Créer son personnage</a> */
/* Variables : utilise les variables du projet si disponibles, sinon retombes par défaut */
.btn-primary,
button.btn-primary {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius, 10px);
  color: var(--btn-foreground, #0b0b0b);
  background: linear-gradient(180deg, rgba(255,122,24,0.98) 0%, rgba(230,90,10,1) 100%);
  border: 1px solid rgba(255,160,90,0.15);
  box-shadow: 0 8px 20px rgba(255,122,24,0.08), inset 0 -2px 0 rgba(0,0,0,0.18);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  min-height: 44px; /* hit target */
  padding-left: 1.05rem;
  padding-right: 1.05rem;
  transition: transform 150ms cubic-bezier(.2,.9,.2,1), box-shadow 150ms, filter 150ms;
}

/* Hover / focus */
.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(255,122,24,0.14), inset 0 -2px 0 rgba(0,0,0,0.2);
  filter: saturate(1.05);
}

/* Active (press) */
.btn-primary:active,
button.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Focus visible for keyboard users */
.btn-primary:focus-visible,
button.btn-primary:focus-visible {
  outline: 3px solid rgba(255,180,110,0.18);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255,122,24,0.08);
}

/* If you use an <a>, ensure it behaves like a button */
a.btn-primary {
  display: block; /* make it centerable with auto margins */
  width: max-content; /* shrink to content width */
  margin: 50px auto 0; /* 50px top margin and horizontally centered */
  text-align: center;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  button.btn-primary {
    transition: none;
    transform: none;
  }
}