/* ==========================================================================
   Gillia — Assets de dynamisation des articles de blog
   Chargé en plus de css/style.css sur chaque page d'article (body.page-blog-article).
   Documentation d'usage : voir BLOG-ARTICLE-ASSETS.md à la racine du projet.
   Ne pas modifier sans mettre à jour ce fichier de doc en parallèle.
   ========================================================================== */

/* --- Grille d'indicateurs / définitions courtes ---
   Usage : remplacer une succession de <h3>/<p> de définitions courtes
   (glossaire, indicateurs, critères) par une grille de cartes scannables.
   Ne pas utiliser pour du texte narratif long — seulement des unités
   courtes et indépendantes les unes des autres. */
.blog-article__body .blog-article__indicators{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin:2.4em 0 3em;
}
.blog-article__indicator{
  padding:26px 28px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(9,61,53,.10);
}
.blog-article__indicator h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  color:#0f2f25;
  font-family:var(--font-sans);
  font-size:.98rem;
  font-weight:650;
  letter-spacing:-.01em;
  line-height:1.3;
}
.blog-article__indicator h3::before{
  content:"";
  width:8px;
  height:8px;
  flex-shrink:0;
  border-radius:2px;
  background:var(--ad-lime);
}
.blog-article__indicator p{
  margin:0;
  color:rgba(21,53,60,.72);
  font-size:.92rem;
  line-height:1.55;
}
@media (max-width:640px){
  .blog-article__indicators{
    grid-template-columns:1fr;
  }
}

/* --- Étapes numérotées ---
   Usage : UNIQUEMENT pour une vraie séquence chronologique/logique
   (« suit toujours le même cycle », « se déroule en N étapes »).
   Ne pas utiliser pour une liste d'éléments sans ordre imposé —
   dans ce cas, utiliser la grille d'indicateurs ou les badges de sources. */
.blog-article__body .blog-article__steps{
  list-style:none;
  counter-reset:blog-step;
  margin:2.4em 0 3em;
  padding:0;
  display:flex;
  flex-direction:column;
}
.blog-article__steps li{
  counter-increment:blog-step;
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0;
  padding-top:24px;
}
.blog-article__steps li:first-child{
  padding-top:0;
}
.blog-article__steps li + li{
  border-top:1px solid rgba(9,61,53,.08);
}
.blog-article__steps li::before{
  content:counter(blog-step);
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:none;
  margin-top:1px;
  border-radius:50%;
  background:var(--ad-lime);
  color:var(--ad-lime-ink);
  font:600 13px/1 "Space Grotesk",sans-serif;
}
.blog-article__steps strong{
  display:block;
  margin-bottom:4px;
  color:rgba(21,53,60,.72);
  font:600 11.5px/1 var(--font-sans);
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* --- Badges de sources croisées ---
   Usage : résumer en badges courts une liste d'éléments (2 à 4) qu'un
   paragraphe vient déjà d'énoncer en phrase complète. Les badges sont un
   RÉSUMÉ visuel scannable, pas une redite mot pour mot du paragraphe —
   reformuler chaque item en 2-4 mots. Toujours précédé d'un paragraphe
   de contexte complet, jamais seul. */
.blog-article__body .tuto-sources{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:2.4em 0 3em;
}
.blog-article__body .tuto-sources__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:11px;
  background:#fff;
  border:1px solid rgba(9,61,53,.10);
  font:500 .85rem/1.3 var(--font-sans);
  color:#17352b;
}
.blog-article__body .tuto-sources__item svg{
  width:16px;
  height:16px;
  flex:none;
  color:#0f2f25;
}

/* --- Schéma explicatif (SVG inline) ---
   Usage : illustrer un MÉCANISME technique décrit dans le texte (relation
   causale, évolution dans le temps, comparaison structurée) — jamais une
   simple comparaison de deux chiffres isolés sans logique visible.
   Contenu du schéma : généraliste et pédagogique, AUCUNE mention de
   Gillia ni de capture d'écran produit (voir BLOG-ARTICLE-ASSETS.md).
   Le SVG interne (formes, classes diagram-*) est spécifique à chaque
   schéma et doit être conçu au cas par cas — seul le conteneur et le
   figcaption sont génériques ci-dessous. Tailles de police à calibrer
   manuellement par schéma (viewBox variable) : viser un rendu réel
   d'environ 10-12px, vérifier par capture d'écran avant de valider. */
.blog-article__body .blog-article__diagram{
  margin:2.4em 0 3em;
  padding:36px 32px 24px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(9,61,53,.10);
}
.blog-article__diagram svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.blog-article__diagram figcaption{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(9,61,53,.08);
  color:rgba(21,53,60,.6);
  font-size:.82rem;
  line-height:1.5;
  text-align:center;
}

/* --- Palette de référence pour le contenu des schémas SVG ---
   Reprendre ces valeurs pour toute nouvelle classe diagram-* propre
   à un schéma, plutôt que d'inventer de nouvelles couleurs. */
:root{
  --diagram-ink: #0f2f25;           /* trait/texte principal fort */
  --diagram-muted: rgba(21,53,60,.6); /* texte secondaire/légendes */
  --diagram-line: rgba(9,61,53,.18);  /* axes, cadres discrets */
  --diagram-accent: var(--ad-lime);   /* SEUL accent couleur autorisé */
  --diagram-accent-stroke: #8fae2e;   /* contour de l'accent */
}