/* Blog (cyliumblog) — jetons et écarts seulement ; la mise en page reste dans journal.css du module.
 * Contrat : modules/cyliumblog/docs/contrat-front.md */

/* --- 1. jetons --- */

.cb-journal {
  --cb-ink: var(--shine-ink);
  --cb-ink-2: var(--shine-ink-7);
  --cb-line: var(--shine-line);

  /* 🔴 Pas --shine-muted / -muted-2 tels quels : sous 4,5:1 sur le fond des cartes.
     Les deux gris convergent exprès ; la hiérarchie passe par graisse et interlettrage. */
  --cb-muted: color-mix(in srgb, var(--shine-muted) 78%, var(--shine-ink) 22%);
  --cb-muted-2: color-mix(in srgb, var(--shine-muted) 80%, var(--shine-ink) 20%);

  /* Numéros des cartes : illisibles en valeur module. --cb-faint ne sert que là. */
  --cb-faint: var(--cb-muted-2);

  /* --cb-bg : fond de la zone blog ; --cb-paper : surfaces claires posées dessus. */
  --cb-paper: var(--shine-paper);
  --cb-bg: var(--shine-paper-2);

  /* 🔴 Accent : le citron de la charte, pas le rouge du module (réservé aux promos).
     Texte dessus en encre : blanc sur citron est illisible. */
  --cb-accent: var(--shine-race);
  --cb-on-accent: var(--shine-ink);

}

/* --- 2. écarts --- */

/* --cb-surface : sans équivalent charte, dérivé du papier. */
.cb-journal {
  --cb-surface: color-mix(in srgb, var(--shine-paper-2) 88%, var(--shine-ink) 12%);
  --cb-line-2: color-mix(in srgb, var(--shine-line) 100%, var(--shine-ink) 6%);
}

.cb-journal .cb-toc {
  background: color-mix(in srgb, var(--shine-paper) 100%, var(--shine-ink) 5%);
}

/* --- 3. listes du corps d'article ---
 * Hummingbird remet list-style à none (@layer ps-base) ; on rétablit pour les widgets CE hors .cb-post__ce. */
.cb-journal :is(.elementor-widget-text-editor, .elementor-text-editor) ul {
  list-style: disc;
  padding-left: 1.2rem;
}
.cb-journal :is(.elementor-widget-text-editor, .elementor-text-editor) ol {
  list-style: decimal;
  padding-left: 1.2rem;
}
.cb-journal :is(.elementor-widget-text-editor, .elementor-text-editor) li {
  margin-block-end: .45em;
}

/* --- 4. bloc newsletter (ps_emailsubscription) ---
 * 🔴 Utilitaires Bootstrap `!important` en couche `utilities` : seule une règle de cette couche les défait. */
@layer utilities {
  .cb-newsletter__form :is(.ps-emailsubscription, .block_newsletter) {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Le bloc est déjà dans une section large : pas de second conteneur. */
  .cb-newsletter__form :is(.container, .container-fluid) {
    max-width: none !important;
    padding: 0 !important;
    width: auto !important;
  }
  .cb-newsletter__form .row { margin: 0 !important; --bs-gutter-x: 0 !important; }
  .cb-newsletter__form [class*="col-"] {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  /* Sans cette remise à zéro, les marges du bloc natif ressortent dans la bande du blog.
     Saisie, bouton et mention légale ne sont pas visés : leur apparence revient au thème. */
  .cb-newsletter__form [class*="bg-"] { background: none !important; }
  .cb-newsletter__form :is([class*="m-"], [class*="mt-"], [class*="mb-"], [class*="my-"], [class*="ms-"], [class*="me-"], [class*="mx-"]):not(input):not(button) {
    margin: 0 !important;
  }
  .cb-newsletter__form :is([class*="p-"], [class*="pt-"], [class*="pb-"], [class*="py-"]):not(input):not(button):not([class*="col-"]) {
    padding-block: 0 !important;
  }
  .cb-newsletter__form .d-flex { gap: 0 !important; margin-bottom: 14px !important; }
}

/* --- 5. contrastes : règles du module que sa propre feuille ne rattrape pas --- */

/* 🔴 Pastille active : `.cb-journal a { color: inherit }` (0,1,1) du module bat .cb-chip--on (0,1,0)
   et rend le libellé encre sur encre. On repasse au-dessus en (0,2,0). */
.cb-journal .cb-chip--on { color: var(--cb-paper); }
.cb-journal .cb-chip--on:hover { color: var(--cb-paper); }

/* Fil d'Ariane en blanc illisible sur l'en-tête sans couverture : corrigé uniquement sous --flat. */
.cb-journal .cb-post__head--flat .cb-crumbs a { color: var(--cb-muted); }
.cb-journal .cb-post__head--flat .cb-crumbs a:hover { color: var(--cb-ink); }
.cb-journal .cb-post__head--flat .cb-crumbs [aria-current] { color: var(--cb-ink); }
.cb-journal .cb-post__head--flat .cb-crumbs__sep { color: var(--cb-muted-2); }

/* Mention légale (désinscription) trop pâle sur la bande du blog.
   🔴 Dans la couche `utilities` : hors couche, une règle perd contre un utilitaire `!important`. */
@layer utilities {
  .cb-journal .cb-newsletter__form :is(.text-body-secondary, .text-muted) {
    color: var(--cb-ink-2) !important;
  }
}

/* --- 6. l'accent en premier plan ---
 * Le citron est illisible en texte et en focus sur papier : le texte reste en encre,
 * l'accent passe sur le soulignement. */

.cb-journal .cb-card:hover .cb-card__title,
.cb-journal .cb-guide__link:hover .cb-guide__title,
.cb-journal .cb-split__link:hover .cb-split__title {
  color: var(--cb-ink);
  text-decoration: underline;
  text-decoration-color: var(--cb-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Survol distingué par l'épaisseur et le vert foncé, la couleur restant l'encre. */
.cb-journal .cb-prose a {
  color: var(--cb-ink);
  text-decoration-color: var(--cb-accent);
  text-decoration-thickness: 2px;
}
.cb-journal .cb-prose a:hover {
  color: var(--cb-ink);
  text-decoration-color: var(--shine-race-sec);
  text-decoration-thickness: 3px;
}

.cb-journal .cyliumblog-related li a:hover {
  color: var(--cb-ink);
  text-decoration: underline;
  text-decoration-color: var(--cb-accent);
  text-decoration-thickness: 2px;
}

/* Focus : 3:1 requis, le citron n'y arrive sur aucun fond clair. */
.cb-journal :focus-visible { outline-color: var(--cb-ink); }

/* Filets décoratifs en vert foncé : le citron s'effacerait. */
.cb-journal .cb-prose blockquote,
.cb-journal .cb-toc { border-left-color: var(--shine-race-sec); }

/* --- 7. couleurs perdues sous `.cb-journal a` ---
 * 🔴 `.cb-journal a { color: inherit }` (0,1,1) bat toute couleur de composant en (0,1,0) :
 * blanc sur blanc dans les zones sombres. Chaque composant <a> est repris en (0,2,0). */
.cb-journal .cb-cta,
.cb-journal .cb-btn--paper { color: var(--cb-dark); }

.cb-journal .cb-link,
.cb-journal .cb-pager__step { color: var(--cb-muted); }
.cb-journal .cb-pager__page { color: var(--cb-ink-2); }

/* --- 8. commentaires ---
 * 🔴 On vise conteneur et balises, jamais les classes Bootstrap : le gabarit va passer en .cb-*.
 * Pas d'!important : ces classes sont des déclarations normales de bs-components. */

.cb-journal .cyliumblog-comments {
  max-width: var(--cb-max);
  margin-block: 3.4em 0;
  padding-top: 2.2em;
  border-top: 1px solid var(--cb-line);
}

/* Titre : même voix que « Articles liés ». */
.cb-journal .cyliumblog-comments > h3 {
  margin: 0 0 1.2em;
  font-family: var(--cb-font-display);
  font-size: 11px;
  font-weight: var(--cb-weight-display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cb-muted-2);
}

.cb-journal .cyliumblog-comments p { color: var(--cb-ink-2); font-size: 14px; }

.cb-journal .cyliumblog-comments :is(input, textarea) {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--cb-font-text);
  font-size: 14px;
  color: var(--cb-ink);
  background: var(--cb-paper);
  border: 1px solid var(--cb-line-2);
  border-radius: 0;
  box-shadow: none;
  transition: border-color .2s ease;
}
.cb-journal .cyliumblog-comments textarea { resize: vertical; min-height: 120px; }
.cb-journal .cyliumblog-comments :is(input, textarea)::placeholder { color: var(--cb-muted-2); }
/* Le focus doit se voir : la bordure seule ne suffit pas. */
.cb-journal .cyliumblog-comments :is(input, textarea):focus-visible {
  outline: 2px solid var(--cb-ink);
  outline-offset: 1px;
  border-color: var(--cb-ink);
}

.cb-journal .cyliumblog-comments button[type="submit"] {
  padding: 15px 30px;
  font-family: var(--cb-font-display);
  font-size: 11px;
  font-weight: var(--cb-weight-display);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cb-paper);
  background: var(--cb-dark);
  border: 1px solid var(--cb-dark);
  border-radius: 0;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.cb-journal .cyliumblog-comments button[type="submit"]:hover {
  color: var(--cb-on-accent);
  background: var(--cb-accent);
  border-color: var(--cb-accent);
}

/* white-space: pre-line est posé par le module ; ici seulement le rythme. */
.cb-journal .cyliumblog-comment {
  padding: 1.1em 0;
  border-top: 1px solid var(--cb-line);
}
.cb-journal .cyliumblog-comment-author {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-display);
  font-size: 13px;
  color: var(--cb-ink);
}
.cb-journal .cyliumblog-comment-date { font-size: 11px; color: var(--cb-muted); }
.cb-journal .cyliumblog-comment-content { margin: .5em 0 0; color: var(--cb-ink-2); font-size: 14px; }