/* ------------------------------
   RESET MINIMAL
------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f5;
  color: #111;
  line-height: 1.6;
  padding: 0 1rem;
}

/* ------------------------------
   HEADER — SPLIT REVEAL
------------------------------ */
.hero-header {
  text-align: left;
  padding: 20px 0 10px;
}

.hero-title-anim {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.hero-title-anim span {
  display: inline-block;
  position: relative;
}

.hero-title-anim .left {
  transform: translateX(-100%);
  opacity: 0;
  animation: split-left 0.8s ease-out forwards;
}

.hero-title-anim .right {
  transform: translateX(100%);
  opacity: 0;
  animation: split-right 0.8s ease-out forwards;
}

@keyframes split-left {
  0% { transform: translateX(-100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes split-right {
  0% { transform: translateX(100%); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

.hero-subtitle-anim {
  opacity: 0;
  transform: translateY(6px);
  animation: subtitle-fade 1s ease-out forwards;
  animation-delay: 0.4s;
  font-size: 1rem;
  opacity: 0.7;
}

@keyframes subtitle-fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------
   SEPARATOR ANIMÉ
------------------------------ */
.fx-separator {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
  background-size: 200% 100%;
  animation: sepMove 2.5s linear infinite;
  margin: 20px 0;
}

@keyframes sepMove {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------
   ID CARD — VERSION FINALE PROPRE
------------------------------ */
.id-card {
  border: 2px solid #000;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 4px;
  background: #fff;
  color: #000;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.id-card:hover {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.id-card h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.id-label {
  font-size: .8rem;
  opacity: .6;
  margin-top: 1rem;
}

.id-value {
  font-family: monospace;
  font-size: .9rem;
  word-break: break-all;
}

.id-card a {
  color: inherit;
  text-decoration: underline;
}

.id-card:hover a {
  color: #fff;
}

/* Anti-débordement iPhone */
.id-card,
.id-card p,
.id-card h3 {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ------------------------------
   HERO BITCOIN LIVE
------------------------------ */
.hero-btc {
  margin: 2.5rem 0;
}

.hero-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.hero-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.hero-card {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 4px;
  background: #ffffff;
}

.hero-card .label {
  font-size: .8rem;
  opacity: .6;
}

.hero-card .value {
  font-size: 1.4rem;
  margin-top: .3rem;
  font-family: monospace;
  color: #000;
}

/* ------------------------------
   CARTES ARTICLES — BLOC SOUVERAIN
------------------------------ */
.post-card {
  border: 1px solid #000;
  background: #fff;
  margin: 2rem 0;
  transition: all 0.2s ease;
}

.post-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.post-card-content {
  padding: 1.4rem 1.6rem;
}

.post-card-date {
  font-size: 0.85rem;
  opacity: 0.6;
  display: block;
  margin-bottom: 0.4rem;
}

.post-card-title {
  font-size: 1.35rem;
  margin: 0 0 0.6rem 0;
}

.post-card-excerpt {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
}

/* Hover souverain */
.post-card:hover {
  background: #000;
  border-color: #fff;
}

.post-card:hover .post-card-content {
  color: #fff;
}


/* ------------------------------
   FOOTER
------------------------------ */
footer {
  margin: 4rem 0 2rem;
  text-align: center;
  opacity: .6;
  color: #000;
}

.top-btn {
  display: inline-block;
  margin-bottom: 1rem;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #aaa;
}

.top-btn:hover {
  background: #000;
  color: #fff;
}
/* Fix anti-débordement pour les longues chaînes dans les articles */
.article-section p,
.article-section strong,
.article-section {
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* Anti-débordement pour chaînes longues dans la carte ID */
.long-string {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}