/* ============================================================
   BLOG-ARTICLE.CSS — Casino Evenements
   Editorial reading: progress bar + sticky TOC + wide layout
   ============================================================ */

/* ============================================================
   READING PROGRESS BAR (fixed top)
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  z-index: 1100;
  pointer-events: none;
}

.reading-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-light) 100%);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  transition: width 80ms linear;
}

/* ============================================================
   ARTICLE WRAPPER
   ============================================================ */

.blog-article {
  padding-bottom: var(--space-2xl);
  position: relative;
}

/* Decor : halo doree diffus en arriere-plan du header */
.blog-article::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90%);
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   ARTICLE HEADER
   ============================================================ */

.article-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  background: linear-gradient(180deg, var(--dark-card) 0%, rgba(33, 28, 20, 0.6) 100%);
  border-bottom: 1px solid var(--border-gold);
  position: relative;
  z-index: 1;
}

.article-header > .container {
  max-width: 1380px;
}

.article-category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.4rem 0.9rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--border-gold-strong);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-lg);
}

.article-category::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
}

.article-header h1 {
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: none;
  font-size: clamp(2.125rem, 1.5rem + 2.9vw, 3.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--white) 0%, var(--white-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-excerpt {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: 1.55;
  color: var(--white-soft);
  max-width: 760px;
  margin-bottom: var(--space-xl);
  border-left: 3px solid var(--gold);
  padding-left: var(--space-lg);
}

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  font-size: 0.875rem;
  color: var(--white-muted);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

/* Bloc auteur avec photo : nom + role */
.article-meta-author {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--white-soft);
  font-weight: 500;
}

.article-meta-author--photo {
  align-items: center;
}

.article-meta-author-photo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-gold-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(212, 175, 55, 0.08);
  background: var(--dark-card);
}

.article-meta-author-photo picture,
.article-meta-author-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-meta-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.25;
}

.article-meta-author-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.005em;
}

.article-meta-author-role {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--gold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.article-meta-author-role:hover {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-meta-author-role:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Fallback : avatar initiale (si auteur != Maikel) */
.article-meta-author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--black);
  font-weight: 700;
  font-size: 1rem;
}

/* Dates + read time */
.article-meta-dates {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--white-muted);
  font-size: 0.8125rem;
}

.article-meta time {
  color: var(--white-muted);
}

.article-read-time {
  position: relative;
  padding-left: var(--space-md);
  color: var(--white-muted);
}

.article-read-time::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
}

/* ============================================================
   ARTICLE HERO IMAGE
   ============================================================ */

.article-hero-image {
  padding: var(--space-xl) 0;
  position: relative;
  z-index: 1;
}

.article-hero-image > .container {
  max-width: 1200px;
}

.article-hero-image picture {
  display: block;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(212, 175, 55, 0.08);
}

.article-hero-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ============================================================
   ARTICLE BODY — 2-column layout (TOC + content)
   ============================================================ */

.article-body {
  padding: var(--space-2xl) 0 var(--space-xl);
  position: relative;
  z-index: 1;
}

.article-layout {
  max-width: 1280px;
  display: grid;
  /* minmax(0, 1fr) et non 1fr : sinon la colonne reclame la largeur de son plus
     long element insecable (une URL citee dans la section Sources, par exemple)
     et fait deborder toute la page horizontalement sur telephone. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(2.5rem, 1.5rem + 2vw, 5rem);
    align-items: start;
  }
}

/* ============================================================
   SOMMAIRE / TABLE OF CONTENTS
   ============================================================ */

.article-toc {
  font-size: 0.875rem;
}

@media (min-width: 1024px) {
  .article-toc {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
    max-height: calc(100vh - var(--header-height) - 3rem);
    overflow-y: auto;
    padding-right: var(--space-sm);
    /* scrollbar discrete */
    scrollbar-width: thin;
    scrollbar-color: var(--border-gold) transparent;
  }

  .article-toc::-webkit-scrollbar { width: 4px; }
  .article-toc::-webkit-scrollbar-track { background: transparent; }
  .article-toc::-webkit-scrollbar-thumb { background: var(--border-gold); border-radius: 2px; }
}

.article-toc-details {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, rgba(33, 28, 20, 0.4) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md);
}

.article-toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-gold);
  user-select: none;
}

.article-toc-summary::-webkit-details-marker {
  display: none;
}

.article-toc-summary::marker {
  display: none;
  content: '';
}

.article-toc-label::before {
  content: '☰ ';
  margin-right: 0.4rem;
  font-size: 1rem;
  vertical-align: middle;
}

.article-toc-chevron {
  transition: transform var(--duration-normal) var(--ease-out);
  color: var(--gold);
}

@media (min-width: 1024px) {
  /* Sur desktop, le sommaire est toujours ouvert et la fleche n'a pas de sens */
  .article-toc-chevron {
    display: none;
  }
  .article-toc-summary {
    cursor: default;
    pointer-events: none;
  }
}

.article-toc-details[open] .article-toc-chevron {
  transform: rotate(180deg);
}

.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.article-toc-item {
  margin: 0;
}

.article-toc-link {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  color: var(--white-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.875rem;
  line-height: 1.4;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.article-toc-link:hover {
  color: var(--white);
  background: rgba(212, 175, 55, 0.05);
  border-left-color: var(--border-gold-strong);
}

.article-toc-link.is-active {
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  border-left-color: var(--gold);
  font-weight: 500;
}

.article-toc-link.is-active .article-toc-num {
  color: var(--gold);
}

.article-toc-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.article-toc-num {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-dark);
  font-size: 0.8125rem;
  min-width: 1.5em;
}

.article-toc-text {
  flex: 1;
}

/* ============================================================
   ARTICLE CONTENT — wide reading column
   ============================================================ */

.article-content {
  max-width: 820px;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.8;
  color: var(--white-soft);
  /* Une URL longue citee en clair (section Sources) elargissait la page entiere
     sur telephone et provoquait un scroll horizontal. Propriete heritee, donc
     valable aussi pour les liens et les listes du corps. */
  overflow-wrap: break-word;
}

/* Intro — lead paragraph with first-letter drop cap */
.article-intro {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--white);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.article-intro::first-letter {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.1em 0.15em 0 0;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.article-section {
  margin-bottom: var(--space-2xl);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.article-section-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md);
  position: relative;
}

/* Trait dore au-dessus du H2 */
.article-section-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  border-radius: 2px;
}

.article-section-num {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 0.65em;
  color: var(--gold);
  line-height: 1.4;
  padding-top: 0.4em;
  letter-spacing: 0.04em;
}

.article-section-text {
  flex: 1;
}

/* Sous-titres H3 issus des "— TEXTE —" */
.article-subheading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin: var(--space-xl) 0 var(--space-md);
  text-transform: none;
}

.article-subheading::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Paragraphes du contenu */
.article-section-content {
  color: var(--white-soft);
}

.article-section-content p {
  margin-bottom: var(--space-md);
  font-size: inherit;
  line-height: inherit;
}

.article-section-content p:last-child {
  margin-bottom: 0;
}

/* Mise en valeur subtile : premiere phrase du premier paragraphe de chaque section */
.article-section-content > p:first-of-type::first-line {
  color: var(--white);
  font-weight: 400;
}

/* Liens potentiels dans le contenu (rare, mais possible) */
.article-section-content a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--border-gold);
  text-underline-offset: 3px;
  transition: color var(--duration-fast), text-decoration-color var(--duration-fast);
}

.article-section-content a:hover {
  color: var(--gold-light);
  text-decoration-color: var(--gold-light);
}

/* ----- Figures ----- */

.article-figure {
  margin: var(--space-xl) 0;
}

.article-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   CONCLUSION — boxed highlight
   ============================================================ */

.article-conclusion {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) clamp(1.25rem, 1rem + 1vw, 2rem);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.08) 0%, rgba(33, 28, 20, 0.4) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  position: relative;
}

.article-conclusion-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--gold);
}

.article-conclusion p {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--white-soft);
  margin-bottom: var(--space-md);
}

.article-conclusion p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   ARTICLE FOOTER — Author + Tags
   ============================================================ */

.article-footer {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.02) 100%);
}

.article-footer > .container {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: flex-start;
}

.article-author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9375rem;
  color: var(--white-muted);
  padding: var(--space-sm) var(--space-md);
  background: rgba(212, 175, 55, 0.04);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
}

.article-author strong {
  color: var(--gold);
  font-weight: 600;
}

/* Tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.article-tag {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--white-soft);
  padding: 0.4rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.article-tag:hover {
  color: var(--gold);
  border-color: var(--border-gold-strong);
  background: rgba(212, 175, 55, 0.06);
}

/* ============================================================
   RELATED SECTIONS — Posts, Pages, SEO links
   ============================================================ */

.related-posts,
.related-pages,
.related-seo {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--border-subtle);
}

.related-posts h2,
.related-pages h2,
.related-seo h2 {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  position: relative;
  padding-bottom: var(--space-md);
}

.related-posts h2::after,
.related-pages h2::after,
.related-seo h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  border-radius: 2px;
}

/* Related links (pages + SEO) */
.related-links {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

.related-links li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--gold);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
  text-decoration: none;
}

.related-links li a::before {
  content: '→';
  color: var(--gold-dark);
  transition: transform var(--duration-fast);
}

.related-links li a:hover {
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.05);
}

.related-links li a:hover::before {
  transform: translateX(3px);
}

.related-links li a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   MOBILE — TOC en accordeon repliable, gouttiere de lecture
   ============================================================ */

@media (max-width: 1023.98px) {
  /* Ne jamais remettre padding-left/right: 0 sur .article-layout : cet element
     porte aussi la classe .container, donc annuler son padding colle le corps
     de l'article au bord de l'ecran sur telephone comme sur tablette portrait. */

  .article-toc {
    margin-bottom: var(--space-md);
  }

  .article-toc-list {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.25rem;
  }

  .article-intro::first-letter {
    font-size: 3.5em;
  }
}

/* Gouttiere de lecture sur telephone : legerement plus large que la gouttiere
   globale du site (1.25rem), car un article est un long bloc de texte.
   Ciblee sur main, donc valable aussi pour les blocs situes apres l'article
   (articles lies, pages liees, CTA) : tout reste aligne sur la meme colonne.
   Ce fichier n'est charge que sur les pages d'article, aucun risque ailleurs. */
@media (max-width: 767.98px) {
  main .container {
    padding-inline: 1.5rem;
  }
}

@media (max-width: 640px) {
  .article-header {
    padding: var(--space-xl) 0 var(--space-lg);
  }

  /* Le numero passe au-dessus du titre : sur un ecran etroit, sa colonne
     amputait le titre d'un cinquieme de la largeur utile et le cassait en
     quatre lignes avec un alignement en escalier. */
  .article-section-title {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .article-section-num {
    font-size: 0.8em;
    padding-top: 0;
  }

  .article-conclusion {
    padding: var(--space-lg) var(--space-md);
  }

  .article-intro::first-letter {
    font-size: 3em;
  }
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reading-progress-bar,
  .article-toc-chevron,
  .article-toc-link,
  .article-tag,
  .related-links li a,
  .related-links li a::before {
    transition: none;
  }
}