/* ===================================================
   Fiche article — styles complets (fond sombre rouge)
   Fichier : assets/css/article.css
   =================================================== */

/* ---------- HERO / EN-TÊTE ARTICLE ---------- */

.article-hero-card{
  position: relative;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow: hidden;
}

/* Halo rouge subtil en fond */
.article-hero-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 600px at 20% 10%, rgba(196,22,28,.18), transparent 70%),
    radial-gradient(800px 600px at 90% 90%, rgba(196,22,28,.10), transparent 70%);
  z-index:0;
  opacity:.9;
}
.article-hero-media{ z-index:0; }
.article-hero-body{ position:relative; z-index:1; }

/* Titres & méta du hero */
.article-hero h1, .article-hero .display-6{
  color:#fff;
  text-shadow:0 0 6px rgba(0,0,0,.4);
}

/* ---------- CONTENU ARTICLE ---------- */

.article-content h2, .article-content h3{
  color:#fff;
  margin-top:1.25rem;
  margin-bottom:.5rem;
}
.article-content .lead{ color:#eaeff7; }

/* Paragraphe & listes lisibles sur fond sombre */
.article-content, .article-hero, .article-hero-card{
  color:#f1f3f6;
}
.article-content p,
.article-content li{
  color:#e9ebef;
  line-height:1.7;
}
.article-content code{
  background: rgba(255,255,255,.08);
  color: #ffbcbc;
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
}

/* Encadré d'info */
.article-callout{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  background: rgba(196,22,28,.12);
  border-left:3px solid var(--brand);
  border-radius:.5rem;
  margin:1rem 0;
}
.article-callout i{ color:var(--brand); }

/* Citation */
.article-quote{
  position:relative;
  margin:1rem 0; padding:1rem 1.25rem 1rem 2.75rem;
  border-left:3px solid rgba(196,22,28,.5);
  color:#e6e8ed;
  background: rgba(255,255,255,.04);
  border-radius:.5rem;
}
.article-quote .quote-mark{
  position:absolute; left:.75rem; top:.25rem;
  font-size:2rem; line-height:1; color:rgba(255,255,255,.4);
}
.article-quote footer{
  color:#b5bbc6;
}

/* Galerie */
.article-gallery img{
  border:1px solid var(--border);
  object-fit:cover;
  border-color: rgba(255,255,255,.18);
}

/* ---------- PAGER / NAV PREV-NEXT ---------- */

.pager-card{
  background:var(--card);
  color:#f1f3f6;
  border:1px solid var(--border);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.pager-card:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(196,22,28,.15), rgba(196,22,28,.05));
}

/* ---------- COMMENTAIRES ---------- */

#comments .form-control{
  background: rgba(255,255,255,.05);
  color:#fff;
  border-color: rgba(255,255,255,.2);
}
#comments .form-control::placeholder{ color:#aab1bc; }

/* ---------- SIDEBAR / SUGGESTIONS ---------- */

.suggest-item:hover .fw-semibold{ color: var(--brand); }
.suggest-item div,
.suggest-item .small,
.suggest-item .fw-semibold{
  color:#e9ebf0;
}

/* ---------- BREADCRUMB ---------- */

.breadcrumb{
  --bs-breadcrumb-divider: "›";
}
.breadcrumb .breadcrumb-item a{ color:#e0e3e8; }
.breadcrumb .breadcrumb-item.active{ color:#cfd4dd; }
.breadcrumb-item + .breadcrumb-item::before{ color:#888; }

/* ---------- CONTRASTE GLOBAL / INTERACTIONS ---------- */

/* Textes secondaires plus visibles */
.text-secondary,
.breadcrumb .breadcrumb-item.active{
  color:#cfd4dd !important;
}

/* Icônes Bootstrap */
.bi{ color:#eaeaea; }

/* Boutons */
.btn-outline-light{
  color:#f8f9fb;
  border-color: rgba(255,255,255,.35);
}
.btn-outline-light:hover{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
.btn-brand{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
}
.btn-brand:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color:#fff;
}

/* Liens */
a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{
  color:#ff4d53;
  text-decoration: underline;
}

/* Cartes & bordures légèrement plus contrastées */
.card,
.article-content,
.article-hero-card{
  border-color: rgba(255,255,255,.12);
}
/* ===== Correctifs ciblés (sidebar + commentaires) ===== */

/* 1) Titres de la sidebar (h3/h6) bien visibles */
aside .card h3,
aside .card .h6 {
  color: #ffffff;                /* blanc franc */
  text-shadow: 0 0 4px rgba(0,0,0,.35);
}

/* 2) Textes secondaires/span dans la sidebar (dates, métadonnées, petits libellés) */
aside .card .small,
aside .card .text-secondary,
aside .card span {
  color: #dfe3ea !important;     /* gris clair lisible */
}

/* 3) Icônes dans la sidebar */
aside .card i.bi {
  color: #eaeaea;
}

/* 4) Lignes de la liste "À venir" (si pas assez visibles) */
aside .card ul li {
  color: #f1f3f6;                /* texte principal */
}
aside .card ul li .text-secondary {
  color: #cfd4dd !important;     /* heure/date à droite */
}

/* 5) Bloc "Articles suggérés" */
.suggest-item .small { color: #cfd4dd !important; }
.suggest-item .fw-semibold { color: #f8f9fb; }
.suggest-item:hover .fw-semibold { color: var(--brand); }

/* 6) Zone commentaires : texte principal et métadonnées */
#comments .card-body { color: #e9ebef; }                  /* couleur par défaut du bloc */
#comments .small { color: #cfd4dd !important; }           /* auteur + date */
#comments .d-flex .flex-grow-1 > div:not(.small) {
  color: #f1f3f6;                                         /* le contenu du commentaire */
}

/* 7) Optionnel : renforcer la lisibilité des titres h3 dans le contenu */
.article-content h3 {
  color: #ffffff;
}