/*
  Procimex — styles propres au blog « Nos conseils » (home.php, single.php,
  archive.php à venir). Chargé uniquement dans ce contexte, voir
  procimex_is_blog_context() dans functions.php.
*/

/* ---------- 1 · En-tête de page ----------
   Même traitement que .methode-tete/.certif-tete/.devis-tete : fond navy,
   label en bleu clair. Toutes les pages intérieures du site s'ouvrent ainsi,
   home.php (archive) et single.php (article) ne font pas exception. */
.blog-tete {
  background: var(--navy);
  /* Le focus clavier par défaut (--btn, bleu foncé) est invisible sur ce fond.
     Même correction que dans le hero, le pied de page et les autres en-têtes. */
  --focus: var(--paper);
}
.blog-tete-texte { max-width: 47.5rem; }
.blog-tete .label { color: var(--accent-lt); }
.blog-tete h1 {
  font-size: clamp(2.0625rem, 4vw, 3.25rem);
  color: var(--white);
  text-wrap: balance;
}
/* --mute-onDark et non --mute : ce texte est sur fond sombre. */
.blog-tete .intro { color: var(--mute-onDark); margin-bottom: 0; }
.blog-tete-date { display: block; margin-top: 1rem; font-size: 0.9375rem; color: var(--mute-onDark); }

@media (max-width: 780px) {
  .blog-tete { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .blog-tete h1 { font-size: 1.75rem; }
}

/* ---------- Badge de catégorie (cartes de liste) ---------- */
.article-badge {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); background: var(--paper);
  padding: 0.25rem 0.625rem; border-radius: 0.25rem; border: 1px solid var(--border);
}

/* ---------- Liste d'articles (home.php) ----------
   Remplace le sommaire de base.css (voir son commentaire, laissé en place
   pour index.php, le filet de secours générique). */
.article-list { margin-top: 0; }
.article-item {
  position: relative;
  padding: 1.875rem 0; border-top: none; border-bottom: 1px solid var(--border);
}
.article-item:first-child { padding-top: 0; }
.article-item .article-badge { margin-bottom: 0.75rem; }

/* Vignette de la liste (essai du 06/09) : filet de séparation conservé, la
   photo se pose simplement à gauche du bloc de texte. Largeur fixe plutôt
   qu'une fraction de la colonne — la liste garde le même axe de lecture que
   l'article soit illustré ou non. */
.article-item--illustre {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1.5rem; align-items: start;
}
.article-vignette { display: block; border-radius: 0.375rem; overflow: hidden; }
.article-vignette img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 0.4s ease;
}
.article-vignette:hover img { transform: scale(1.03); }

/* Sous 640 px, la colonne à droite de la photo devenait trop étroite pour le
   résumé (226 px) : les titres cassaient sur 4 lignes. La photo ne borde plus
   que le badge, le titre et la date ; le résumé et le lien passent dessous sur
   toute la largeur. `display: contents` efface .article-corps de la grille
   pour que ses enfants deviennent eux-mêmes des cases, seul moyen de placer le
   résumé sous la photo sans toucher au HTML. Vignette réduite à 5rem pour
   desserrer le titre. */
@media (max-width: 40rem) {
  .article-item--illustre {
    grid-template-columns: 5rem 1fr; column-gap: 1rem; row-gap: 0;
  }
  .article-item--illustre .article-corps { display: contents; }
  .article-item--illustre .article-vignette { grid-row: 1 / span 3; }
  .article-item--illustre .prose,
  .article-item--illustre .article-lire-plus { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .article-vignette img { transition: none; }
  .article-vignette:hover img { transform: none; }
}
.article-item h2 { font-size: 1.375rem; margin-top: 0; }
.article-item h2 a:hover { color: var(--accent); }
.article-item time { display: block; margin-top: 0.375rem; font-size: 0.875rem; color: var(--mute); }
.article-item .prose { margin-top: 0.75rem; font-size: 1rem; }
.article-lire-plus {
  display: inline-block; margin-top: 0.875rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--accent);
}
.article-lire-plus:hover { color: var(--hl); }

/* ---------- Article (single.php) ---------- */

/* Un lien du sommaire cible l'id d'un H2/H3 : sans cette marge, l'en-tête
   collant (5,625rem, même valeur que le scroll-margin-top de <main> pour le
   lien d'évitement) recouvre le haut du titre après le saut. */
.prose h2,
.prose h3 { scroll-margin-top: 5.625rem; }

/* Tableau de répartition des charges (article "qui doit payer" et futurs
   articles similaires) : .prose n'a jusqu'ici que la marge du haut, sans
   bordures — sans ça un tableau rédigé dans l'éditeur se lit comme du texte
   collé sans colonnes. */
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th,
.prose td { padding: 0.75rem 1rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--paper); color: var(--ink); font-weight: 700; }

/* Sommaire d'article : bloc Groupe (classe « sommaire ») avec un paragraphe
   d'étiquette et une liste dont chaque item pointe vers l'ancre HTML d'un H2. */
.prose .sommaire {
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.prose .sommaire p {
  margin-top: 0; margin-bottom: 0.75rem;
  font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mute);
}
.prose .sommaire ol { margin-top: 0; padding-left: 1.1em; }
.prose .sommaire li { font-size: 0.9688rem; font-weight: 600; }
.prose .sommaire a { text-decoration: none; }
.prose .sommaire a:hover { text-decoration: underline; }

/* Carte étude : une source scientifique par bloc Groupe (classe
   « etude-carte »), plutôt que noyée dans un item de liste parmi d'autres.
   Même liseré --accent que .chiffre-cle, vocabulaire cohérent. */
.prose .etude-carte {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--shadow-card);
}
.prose .etude-carte > * + * { margin-top: 0.6em; }
.prose .etude-carte p { font-size: 1rem; line-height: 1.65; }

/* Étiquette de source, réutilisée dans .etude-carte et .chiffre-cle pour que
   les deux types de carte restent visuellement de la même famille. */
.prose .etude-source {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
}

/* Liste des sources en bas d'article (classe « liste-sources ») : références
   bibliographiques, pas un contenu à lire au même poids que le corps de
   l'article. Taille réduite et couleur sourdine, comme une note de bas de page.
   --mute-sm et non --mute depuis le 10/09 : à 13px, --mute ne tenait pas le
   contraste minimum sur le fond --pale de la section (4,30 pour 4,5 exigés). */
.prose .liste-sources {
  font-size: 0.8125rem; line-height: 1.6; color: var(--mute-sm);
}

/* Citation forte : bloc Citation (classe « citation-forte »), réservée à la
   phrase de conclusion d'un article — distincte du blockquote neutre de
   base.css (bordure --border, italique, --mute) qui reste la citation par
   défaut. Fond navy pour peser visuellement plus qu'un simple paragraphe. */
.prose .citation-forte {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--accent);
  background: var(--navy);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose .citation-forte p {
  margin-top: 0; font-weight: 600; font-size: 1.1875rem; line-height: 1.5; color: var(--white);
}

/* Images d'article (bloc Image de l'éditeur). Les fichiers sont des assets du
   thème et non des pièces jointes de la médiathèque : WordPress ne peut donc
   pas leur injecter width/height, et la page sauterait au chargement de
   chaque image (CLS). Le rapport de chaque fichier est posé ici à la main —
   à reprendre si une image est remplacée par une autre de format différent. */
.prose .wp-block-image { margin-left: 0; margin-right: 0; }
.prose .wp-block-image img {
  width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.prose .img-punaises-adultes img { aspect-ratio: 745 / 452; }
.prose .img-cycle-vie img       { aspect-ratio: 1400 / 788; }
.prose .img-taches-matelas img  { aspect-ratio: 637 / 422; }
.prose .img-traces-sommier img  { aspect-ratio: 1 / 1; }

/* Deux fichiers sont plus étroits que la colonne de texte (43,75 rem) : les
   étirer à 100 % les afficherait au-delà de leur définition réelle, donc
   flous. Bornés à leur largeur de fichier et centrés — 500 px pour la photo
   du sommier (carrée, plein cadre elle écraserait la page), 637 px pour les
   taches sur le matelas. */
.prose .img-traces-sommier img { max-width: 31.25rem; margin-inline: auto; }
.prose .img-taches-matelas img { max-width: 39.8125rem; margin-inline: auto; }

/* Lien posé autour des infographies par procimex_completer_images_contenu() :
   il ne doit rien peindre — ni soulignement ni couleur de lien — seulement
   rendre l'image cliquable vers sa pleine taille. Le survol passe par la
   bordure de l'image, seul indice qu'il y a quelque chose à ouvrir. */
.prose .img-pleine-taille { display: block; text-decoration: none; }
.prose .img-pleine-taille:hover img,
.prose .img-pleine-taille:focus-visible img { border-color: var(--accent); }

.article-associes { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.article-associes-titre { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(46% 0.018 240); }
.article-associes ul { margin-top: 0.875rem; list-style: none; padding-left: 0; }
.article-associes li + li { margin-top: 0.625rem; }
.article-associes a { font-weight: 600; color: var(--accent); }
.article-associes a:hover { color: var(--hl); }

.article-retour {
  display: inline-block; margin-top: 2.25rem;
  font-size: 0.9375rem; font-weight: 600; color: var(--accent);
}
.article-retour:hover { color: var(--hl); }

/* Encadré chiffre-clé : un résultat chiffré (étude, dose, mutation) se perd
   dans un paragraphe de .prose. Reprend le vocabulaire carte du site
   (fond clair + --shadow-card) posé sur le fond --pale de l'article, avec le
   liseré --accent de .methode-duree pour rester dans le même vocabulaire de
   mise en évidence. Classe additionnelle posée sur un bloc Groupe dans
   l'éditeur : « chiffre-cle » — modifiable par l'utilisateur en autonomie. */
.prose .chiffre-cle {
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--shadow-card);
}
.prose .chiffre-cle > :first-child { margin-top: 0; }
.prose .chiffre-cle > * + * { margin-top: 0.6em; }
.prose .chiffre-cle p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.prose .chiffre-cle strong { color: var(--accent); }

/* ---------- Clôture (CTA) ----------
   Reprise à l'identique de .certif-closing/.methode-closing : mêmes deux
   boutons, ils doivent se présenter pareil d'une page à l'autre. */

.article-cta { border-top: 1px solid var(--border); }
.article-cta-titre { text-align: center; }
.article-cta .btn--onDark { background: var(--btn); color: var(--white); }
.article-cta .btn--onDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
.article-cta .btn--ghostDark { background: var(--white); color: var(--ink); border-color: var(--border-dk); }
.article-cta .btn--ghostDark:hover { background: var(--btn-hover); color: var(--white); border-color: var(--btn-hover); }
.article-cta .btn { min-width: 16.375rem; }

@media (max-width: 780px) {
  .article-cta .btn-row { width: 100%; }
  .article-cta .btn-row .btn { flex: 1 1 100%; min-width: 0; }
}