/* ============================================================
   THÈME ARTICLE
   Dépend de : ../variables.css (doit être chargé avant)
   ============================================================ */

/* ------------------------------------------------------------
   1. Jetons du thème
   Point d'entrée unique : changer la police ou la teinte de fond
   se fait ici, sans toucher au reste du fichier.
   ------------------------------------------------------------ */
.cms-front-route--article {
  --article-font: var(--font-primary);
  --article-font-heading: var(--font-accent);
  --article-bg: var(--color-bg-dark);
  --article-text: var(--color-text-invert);
  --article-text-muted: var(--color-text-invert-muted);
  --article-border: var(--color-border-invert);
  --article-radius: var(--radius-md);
}

/* ------------------------------------------------------------
   2. Page — fond noir
   ------------------------------------------------------------ */
body.cms-front-route--article,
.cms-front-route--article {
  background-color: var(--article-bg);
  color: var(--article-text);
  font-family: var(--article-font);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.cms-front-route--article main {
  background-color: var(--article-bg);
  min-height: 100vh;
}

.cms-front-route--article ::selection {
  background-color: var(--article-text);
  color: var(--article-bg);
}

/* ------------------------------------------------------------
   2 bis. Neutralisation des feuilles claires
   Trois sources posent du texte sombre sur cette route :
   - base.css : `body { color }` et `h1..h6 { color: --color-text-dark }`
   - le thème parent Salient : `body a { color: #3452ff }`
   - les conteneurs Salient, dont le fond est clair
   Tout est scopé à `main` pour laisser le header et le footer Salient
   intacts, comme le fait déjà dark-theme.css sur les routes catégorie.
   ------------------------------------------------------------ */
body.cms-front-route--article #ajax-content-wrap,
body.cms-front-route--article .container-wrap {
  background: var(--article-bg);
}

body.cms-front-route--article main :is(h1, h2, h3, h4, h5, h6) {
  color: var(--article-text);
}

body.cms-front-route--article main a {
  color: var(--article-text) !important;
}

/* ------------------------------------------------------------
   3. Conteneur d'article
   ------------------------------------------------------------ */
#article-content {
  padding-inline: var(--gutter-page);
  padding-block: var(--spacing-2xl) var(--spacing-xxl);
  overflow-x: hidden;
}

#article-content > h1,
.cms-front-route--article main > h1 {
  font-family: var(--article-font-heading);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  color: var(--article-text);
  margin-bottom: var(--spacing-xl);
  text-wrap: balance;
}

/* ------------------------------------------------------------
   4. Rangées
   ------------------------------------------------------------ */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-row);
  margin-bottom: var(--gutter-row);
}

.row:last-child {
  margin-bottom: 0;
}

.row[data-width-mode="full"] {
  max-width: none;
}

.row[data-width-mode="maxed"] {
  max-width: var(--max-width-content);
  margin-inline: auto;
}

/* ------------------------------------------------------------
   5. Colonnes
   Largeurs, hauteurs et alignements sont posés en inline par
   app.js — on ne définit ici que les valeurs par défaut.
   ------------------------------------------------------------ */
.column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gutter-block);
  width: 100%;
  min-width: 0;
  min-height: auto;
  justify-content: flex-start;
  align-items: flex-start;
}

.column.justify-center { justify-content: center; }
.column.justify-end { justify-content: flex-end; }
.column.align-center { align-items: center; }
.column.align-end { align-items: flex-end; }

.column[style*="justify-content: center"],
.column[style*="align-items: center"] {
  text-align: center;
}

/* Colonne avec fond : respiration interne, sinon le texte colle au bord */
.column.has-background {
  padding: var(--spacing-xl);
}

/* Fond de colonne (couleur ou image) + voile */
.column-bg,
.column-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--article-radius);
}

.column-bg {
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.column-overlay {
  background-color: var(--color-overlay-dark);
  z-index: 1;
}

.column .block {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ------------------------------------------------------------
   6. Blocs texte
   reset.css remet à zéro les marges de p/h1-h6 et le padding des
   listes : le contenu WYSIWYG doit donc les retrouver ici.
   ------------------------------------------------------------ */
.block-texte {
  color: var(--article-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  text-align: inherit;
}

.block-texte > * + * {
  margin-top: var(--spacing-md);
}

.block-texte ul,
.block-texte ol {
  padding-left: var(--spacing-lg);
}

.block-texte li + li {
  margin-top: var(--spacing-sm);
}

.block-texte a {
  color: var(--article-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: opacity var(--transition-fast);
}

.block-texte a:hover,
.block-texte a:focus-visible {
  opacity: 0.65;
}

.block-texte blockquote {
  border-left: 2px solid var(--article-border);
  padding-left: var(--spacing-md);
  color: var(--article-text);
  font-style: italic;
}

.block-texte hr {
  border: 0;
  border-top: 1px solid var(--article-border);
}

/* ------------------------------------------------------------
   7. Blocs titre
   app.js génère h1 à h6 selon block.niveau (h2 par défaut) :
   sans échelle explicite, on hérite des tailles navigateur.
   ------------------------------------------------------------ */
.block-titre {
  font-family: var(--article-font-heading);
  color: var(--article-text);
  line-height: var(--line-height-tight);
  margin-block: var(--spacing-xl) var(--spacing-md);
  text-align: inherit;
  text-wrap: balance;
}

.block-titre:first-child {
  margin-top: 0;
}

h1.block-titre { font-size: var(--font-size-3xl); }
h2.block-titre { font-size: var(--font-size-2xl); }
h3.block-titre { font-size: var(--font-size-xl); }
h4.block-titre { font-size: var(--font-size-lg); }
h5.block-titre,
h6.block-titre {
  font-size: var(--font-size-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   8. Blocs média
   ------------------------------------------------------------ */
.block-image,
.block-video {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--article-radius);
}

.block-image {
  object-fit: cover;
}

/* ------------------------------------------------------------
   9. Alignements posés par l'éditeur (styles inline)
   ------------------------------------------------------------ */
.block-texte [style*="text-align: left"] { text-align: left !important; }
.block-texte [style*="text-align: center"] { text-align: center !important; }
.block-texte [style*="text-align: right"] { text-align: right !important; }
.block-texte [style*="text-align: justify"] { text-align: justify !important; }

/* ------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Les hauteurs fixes de colonne rognent le contenu en étroit */
  .column[style*="min-height"] {
    min-height: auto !important;
  }
}

@media (max-width: 768px) {
  #article-content {
    padding-block: var(--spacing-xl) var(--spacing-2xl);
  }

  .row {
    flex-direction: column;
  }

  .column {
    flex: 1 1 100% !important;
    align-items: stretch;
  }

  .column.has-background {
    padding: var(--spacing-lg);
  }

  .block-titre {
    margin-block: var(--spacing-lg) var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .block-texte {
    font-size: var(--font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-texte a {
    transition: none;
  }
}