/* =====================================================================
   FATE SMP — thème WordPress. Reproduit les composants du site Next.js.
   Couleurs/typos : assets/css/tokens.css (copié depuis web/src/styles).
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--fate-font-body); color: rgb(var(--fate-parchment)); line-height: 1.6;
  background-color: rgb(var(--fate-night));
  background-image:
    radial-gradient(ellipse at top, rgb(var(--fate-blood) / .12), transparent 60%),
    radial-gradient(ellipse at bottom, rgb(var(--fate-ember) / .06), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  animation: fate-page-in .45s var(--fate-ease) both; /* transition de page douce */
}
body.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
@keyframes fate-page-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

h1, h2, h3, h4 { font-family: var(--fate-font-display); letter-spacing: .03em; line-height: 1.2; margin: 0 0 .5em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgb(var(--fate-ember) / .5); color: #fff; }
:focus-visible { outline: 2px solid rgb(var(--fate-flame)); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 1rem; z-index: 100; background: rgb(var(--fate-flame)); color: rgb(var(--fate-night)); padding: .5rem 1rem; border-radius: .25rem; }
.skip-link:focus { left: 1rem; }

.fate-container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .fate-container { padding-inline: 1.5rem; } }
.fate-section { padding-block: 3rem; }
.fate-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.fate-icon--lg { width: 1.75rem; height: 1.75rem; }

/* ---------- Typo ---------- */
.text-gradient-fate {
  background: linear-gradient(180deg, rgb(var(--fate-parchment)), rgb(var(--fate-gold)) 55%, rgb(var(--fate-ember)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fate-title-xl { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 900; }
.fate-title-lg { font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 700; }
.fate-title-md { font-size: 1.5rem; color: rgb(var(--fate-gold)); margin-bottom: 1.5rem; }
.fate-subtitle { max-width: 42rem; margin: 0 auto; color: rgb(var(--fate-ash)); }
.fate-meta { font-size: .8rem; color: rgb(var(--fate-ash)); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
.rune-divider { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1rem auto; color: rgb(var(--fate-gold) / .7); font-family: var(--fate-font-rune); font-size: .875rem; }
.rune-divider::before, .rune-divider::after { content: ""; height: 1px; width: 4rem; background: linear-gradient(90deg, transparent, rgb(var(--fate-gold) / .6), transparent); }

/* ---------- Cartes ---------- */
.fate-card {
  border-radius: var(--fate-radius); border: 1px solid rgb(var(--fate-iron) / .5);
  background: rgb(var(--fate-stone) / .6); backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
}

/* ---------- Boutons (identiques au site) ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: .5rem; border: 0; cursor: pointer;
  font-family: var(--fate-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem;
  transition: all .3s var(--fate-ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgb(255 255 255 / .25) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--fate-ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn-ember { background: linear-gradient(180deg, rgb(var(--fate-flame)), rgb(var(--fate-ember))); color: rgb(var(--fate-night)); }
.btn-ember:hover { box-shadow: 0 0 48px rgb(var(--fate-ember) / .55); transform: translateY(-2px); }
.btn-ghost { background: transparent; border: 1px solid rgb(var(--fate-gold) / .5); color: rgb(var(--fate-parchment)); }
.btn-ghost:hover { border-color: rgb(var(--fate-flame)); color: rgb(var(--fate-flame)); box-shadow: 0 0 24px rgb(var(--fate-ember) / .45); }
.btn-discord { background: rgb(var(--fate-discord)); color: #fff; animation: fate-pulse-glow 2.6s ease-in-out infinite; }
.btn-discord:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-sm { padding: .5rem .75rem; font-size: .75rem; }
.btn-xl { padding: 1.25rem 2.5rem; font-size: 1.15rem; }
@keyframes fate-pulse-glow { 0%,100% { box-shadow: 0 0 18px rgb(var(--fate-discord) / .45); } 50% { box-shadow: 0 0 42px rgb(var(--fate-discord) / .8); } }

/* ---------- Header ---------- */
.fate-header { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.fate-header.is-scrolled, .fate-header.is-open { background: rgb(var(--fate-night) / .85); backdrop-filter: blur(12px); border-bottom-color: rgb(var(--fate-iron) / .4); }
.admin-bar .fate-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .fate-header { top: 46px; } }
.fate-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.fate-brand { display: flex; align-items: center; gap: .5rem; }
.fate-brand__logo { width: 44px; height: 44px; object-fit: contain; transition: transform .5s; }
.fate-brand:hover .fate-brand__logo { transform: rotate(6deg); }
.fate-brand__name { display: none; font-family: var(--fate-font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .1em; }
.fate-brand__name span { color: rgb(var(--fate-ember)); }
@media (min-width: 640px) { .fate-brand__name { display: inline; } }
.fate-nav { display: none; }
@media (min-width: 1024px) { .fate-nav { display: block; } }
.fate-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.fate-nav a { position: relative; padding: .25rem 0; color: rgb(var(--fate-parchment) / .8); transition: color .2s; }
.fate-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: rgb(var(--fate-flame)); transition: width .3s; }
.fate-nav a:hover, .fate-nav a.is-active { color: rgb(var(--fate-flame)); }
.fate-nav a:hover::after, .fate-nav a.is-active::after { width: 100%; }
.fate-header__actions { display: flex; align-items: center; gap: .5rem; }
.fate-lang { display: flex; padding: 2px; border: 1px solid rgb(var(--fate-iron) / .6); border-radius: .375rem; font-size: .75rem; font-weight: 700; }
.fate-lang a { padding: .25rem .5rem; border-radius: .25rem; color: rgb(var(--fate-ash)); transition: color .2s; }
.fate-lang a:hover { color: rgb(var(--fate-parchment)); }
.fate-lang a.is-active { background: rgb(var(--fate-ember)); color: rgb(var(--fate-night)); }
.fate-iconbtn { display: none; padding: .5rem; color: rgb(var(--fate-ash)); }
.fate-iconbtn:hover { color: rgb(var(--fate-flame)); }
@media (min-width: 640px) { .fate-iconbtn { display: block; } }
.hide-sm { display: none; }
@media (min-width: 640px) { .hide-sm { display: inline; } }
.fate-burger { display: flex; flex-direction: column; gap: 5px; padding: .6rem; background: none; border: 0; cursor: pointer; }
.fate-burger span { width: 22px; height: 2px; background: rgb(var(--fate-parchment)); transition: transform .3s, opacity .3s; }
.fate-header.is-open .fate-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fate-header.is-open .fate-burger span:nth-child(2) { opacity: 0; }
.fate-header.is-open .fate-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) { .fate-burger { display: none; } }
.fate-mobile-nav { max-height: 0; overflow: hidden; transition: max-height .5s var(--fate-ease); }
.fate-header.is-open .fate-mobile-nav { max-height: 80vh; }
.fate-mobile-nav ul { list-style: none; margin: 0; padding-bottom: 1.5rem; }
.fate-mobile-nav a { display: block; padding: .75rem; border-radius: .375rem; font-family: var(--fate-font-display); }
.fate-mobile-nav a:hover { background: rgb(var(--fate-stone)); color: rgb(var(--fate-flame)); }
@media (min-width: 1024px) { .fate-mobile-nav { display: none; } }

/* ---------- Blog hero ---------- */
.fate-blog-hero { position: relative; overflow: hidden; padding-bottom: 1rem; }
.fate-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fate-page-header { position: relative; text-align: center; padding-top: 4rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .fate-page-header { padding-top: 6rem; } }
.fate-blog-hero__search { position: relative; max-width: 40rem; }
.fate-search { display: flex; gap: .5rem; flex-wrap: wrap; }
.fate-search input {
  flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: .5rem; font: inherit;
  border: 1px solid rgb(var(--fate-iron)); background: rgb(var(--fate-night)); color: rgb(var(--fate-parchment));
}
.fate-search input:focus { outline: none; border-color: rgb(var(--fate-flame)); }
.fate-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.fate-chips--left { justify-content: flex-start; max-width: 48rem; }
.fate-chip { padding: .3rem .9rem; border: 1px solid rgb(var(--fate-gold) / .4); border-radius: 999px; font-size: .8rem; color: rgb(var(--fate-gold)); transition: all .25s; }
.fate-chip:hover { border-color: rgb(var(--fate-flame)); color: rgb(var(--fate-flame)); box-shadow: 0 0 16px rgb(var(--fate-ember) / .35); }

/* ---------- Cartes d'articles ---------- */
.fate-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .fate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fate-grid { grid-template-columns: repeat(3, 1fr); } }
.fate-post-card { overflow: hidden; transition: transform .5s var(--fate-ease), box-shadow .5s; }
.fate-post-card:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgb(var(--fate-ember) / .45); }
.fate-post-card__link { display: flex; flex-direction: column; height: 100%; }
.fate-post-card__media { aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, rgb(var(--fate-blood) / .3), rgb(var(--fate-stone)), rgb(var(--fate-night))); }
.fate-post-card__media img, .fate-post-card__placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--fate-ease); }
.fate-post-card__placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--fate-font-rune); font-size: 2rem; color: rgb(var(--fate-gold) / .5); }
.fate-post-card:hover .fate-post-card__media img, .fate-post-card:hover .fate-post-card__placeholder { transform: scale(1.05); }
.fate-post-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.fate-post-card__title { font-size: 1.25rem; transition: color .2s; }
.fate-post-card:hover .fate-post-card__title { color: rgb(var(--fate-flame)); }
.fate-post-card__excerpt { color: rgb(var(--fate-ash)); font-size: .9rem; flex: 1; }
.fate-post-card__more { color: rgb(var(--fate-ember)); font-weight: 700; font-size: .9rem; }
.fate-empty { text-align: center; color: rgb(var(--fate-ash)); padding: 3rem 0; }

.fate-pagination { margin-top: 3rem; }
.fate-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.fate-pagination .page-numbers { padding: .5rem .9rem; border: 1px solid rgb(var(--fate-iron) / .6); border-radius: .375rem; transition: all .2s; }
.fate-pagination .page-numbers.current, .fate-pagination a.page-numbers:hover { background: rgb(var(--fate-ember)); color: rgb(var(--fate-night)); border-color: rgb(var(--fate-ember)); }

/* ---------- Article ---------- */
.fate-article__header { text-align: center; padding-top: 4rem; max-width: 52rem; }
.fate-breadcrumb { font-size: .8rem; color: rgb(var(--fate-ash)); margin-bottom: 1rem; }
.fate-breadcrumb a:hover { color: rgb(var(--fate-flame)); }
.fate-article__cover { max-width: 60rem; margin-block: 2rem; }
.fate-article__cover img { border-radius: var(--fate-radius); border: 1px solid rgb(var(--fate-iron) / .5); width: 100%; }
.fate-prose { max-width: 48rem; padding-block: 2rem; font-size: 1.075rem; }
.fate-prose p, .fate-prose ul, .fate-prose ol { color: rgb(var(--fate-parchment) / .88); margin: 0 0 1.25rem; }
.fate-prose h2 { font-size: 1.75rem; color: rgb(var(--fate-gold)); margin-top: 2.5rem; }
.fate-prose h3 { font-size: 1.3rem; color: rgb(var(--fate-parchment)); margin-top: 2rem; }
.fate-prose a { color: rgb(var(--fate-flame)); text-decoration: underline; text-underline-offset: 3px; }
.fate-prose ul li::marker, .fate-prose ol li::marker { color: rgb(var(--fate-ember)); }
.fate-prose blockquote { margin: 2rem 0; padding: 1rem 1.5rem; border-left: 3px solid rgb(var(--fate-ember)); background: rgb(var(--fate-stone) / .5); border-radius: 0 .5rem .5rem 0; font-family: var(--fate-font-display); font-style: italic; color: rgb(var(--fate-gold)); }
.fate-prose img, .fate-prose figure img { border-radius: .5rem; }
.fate-prose code { background: rgb(var(--fate-stone)); padding: .15rem .4rem; border-radius: .25rem; font-size: .9em; }
.fate-prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--fate-gold) / .5), transparent); margin: 2.5rem 0; }
.fate-prose .wp-block-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: .5rem; }

/* ---------- CTA / 404 / commentaires ---------- */
.fate-cta { position: relative; overflow: hidden; text-align: center; padding: 4rem 1.5rem; }
.fate-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at bottom, rgb(var(--fate-ember) / .18), transparent 70%); }
.fate-cta > * { position: relative; }
.fate-cta p { color: rgb(var(--fate-parchment) / .8); max-width: 36rem; margin: 0 auto 2rem; }
.fate-cta__ring { position: absolute !important; right: -6rem; top: -6rem; width: 18rem; height: 18rem; border: 1px dashed rgb(var(--fate-gold) / .2); border-radius: 50%; animation: fate-spin 80s linear infinite; }
@keyframes fate-spin { to { transform: rotate(360deg); } }
.fate-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding-block: 4rem; }
.fate-404__code { font-family: var(--fate-font-rune); font-size: 5rem; color: rgb(var(--fate-ember)); margin: 0; animation: fate-flicker 3s ease-in-out infinite; }
.fate-404__search { width: 100%; max-width: 32rem; }
@keyframes fate-flicker { 0%,100% { opacity: 1; } 45% { opacity: .85; } 50% { opacity: .7; } 55% { opacity: .9; } }
.fate-comments { margin-top: 2rem; }
.fate-comment-list { list-style: none; padding: 0; }
.fate-comments textarea, .fate-comments input[type=text], .fate-comments input[type=email], .fate-comments input[type=url] { width: 100%; padding: .75rem; border-radius: .5rem; border: 1px solid rgb(var(--fate-iron)); background: rgb(var(--fate-night)); color: rgb(var(--fate-parchment)); font: inherit; }

/* ---------- Footer ---------- */
.fate-footer { position: relative; margin-top: 6rem; border-top: 1px solid rgb(var(--fate-iron) / .4); background: rgb(var(--fate-abyss) / .8); }
.fate-footer::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--fate-ember) / .7), transparent); }
.fate-footer__grid { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
@media (min-width: 640px) { .fate-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fate-footer__grid { grid-template-columns: repeat(4, 1fr); } }
.fate-footer img { width: 96px; height: 96px; object-fit: contain; margin-bottom: .75rem; }
.fate-footer__tagline { font-family: var(--fate-font-display); font-style: italic; color: rgb(var(--fate-gold)); }
.fate-footer h2 { font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--fate-gold)); margin-bottom: .75rem; }
.fate-footer ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.fate-footer li { margin-bottom: .5rem; }
.fate-footer li a, .fate-footer__bottom a { color: rgb(var(--fate-ash)); transition: color .2s; }
.fate-footer li a:hover, .fate-footer__bottom a:hover { color: rgb(var(--fate-flame)); }
.fate-footer__bottom { border-top: 1px solid rgb(var(--fate-iron) / .3); font-size: .75rem; color: rgb(var(--fate-ash)); }
.fate-footer__bottom .fate-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; padding-block: 1.25rem; }
.fate-footer__bottom p { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
@media (min-width: 640px) { .fate-footer__bottom .fate-container { flex-direction: row; } }

/* ---------- Apparitions au scroll (équivalent Framer Motion) ---------- */
.js [data-reveal], .js [data-stagger] > * { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--fate-ease), transform .7s var(--fate-ease); }
.js [data-reveal].is-visible, .js [data-stagger] > .is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-stagger] > * { opacity: 1; transform: none; }
}

.fate-footer li a { display: inline-flex; align-items: center; gap: .5rem; }
.fate-emoji { display: inline-block; transition: transform .3s; }
.fate-footer li a:hover .fate-emoji { transform: scale(1.25); }
.fate-footer__badges { font-size: .85rem; color: rgb(var(--fate-ash)); margin-top: .5rem; }