/**
 * blog.css — mise en forme commune des pages du blog Lib&CO2
 * ---------------------------------------------------------------------------
 * Chargé après shared/css/tokens.css. Remplace les blocs <style> qui étaient
 * recopiés dans chaque page : un nouvel article n'a plus qu'à lier ces deux
 * feuilles (voir le modèle docs/modele-article-blog.html).
 *
 * Organisation :
 *   1. Variables du blog (reliées aux jetons communs)
 *   2. Base commune (index et articles)
 *   3. Page d'index du blog (<body class="page-index">)
 *   4. Articles : texte, chiffres clés, appel à l'action, bibliographie
 *   5. Composants optionnels d'article : graphiques, encadrés, barres de
 *      répartition (utilisés au cas par cas)
 */

/* 1. Variables du blog ---------------------------------------------------- */
:root {
  --vert: var(--lc-vert);
  --vert-fond: var(--lc-vert-fond);
  --ambre: var(--lc-ambre);
  --bleu: var(--lc-bleu);
  --bleu-fond: var(--lc-bleu-fond);
  --fond: var(--lc-fond);
  --carte: var(--lc-carte);
  --bordure: var(--lc-bordure);
  --encre: var(--lc-encre);
  --texte: var(--lc-texte);
  --discret: var(--lc-discret);
  --serif: var(--lc-police-titres);
  --sans: var(--lc-police-texte);
}

/* 2. Base commune ---------------------------------------------------------- */
* {
  box-sizing: border-box;
}
a {
  color: var(--vert);
}
.retour {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--fond);
  color: var(--encre);
  line-height: 1.7;
}
.conteneur {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 20px 90px;
}

/* 3. Page d'index du blog --------------------------------------------------- */
.page-index {
  line-height: 1.6;
}
.page-index .conteneur {
  max-width: 780px;
}
.entete {
  margin-bottom: 48px;
}
.entete h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5.6vw, 60px);
  line-height: 1.06;
  margin: 0 0 18px;
}
.entete p {
  color: var(--texte);
  font-size: 18px;
  max-width: 34em;
  margin: 0;
}
.qui-sommes-nous {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 32px;
}
.qui-sommes-nous h2 {
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--encre);
}
.qui-sommes-nous p {
  font-size: 14.5px;
  color: var(--texte);
  margin: 0;
}
.liste-articles {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.carte-article {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s;
}
.carte-article:hover {
  border-color: var(--vert);
}
.carte-article .date {
  font-size: 14px;
  font-weight: 600;
  color: var(--vert);
}
.carte-article h2 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  margin: 8px 0 8px;
  color: var(--encre);
}
.carte-article p {
  font-size: 14.5px;
  color: var(--texte);
  margin: 0;
}
.carte-article .lire {
  font-size: 13px;
  font-weight: 700;
  color: var(--vert);
  margin-top: 12px;
  display: inline-block;
}
.bientot {
  text-align: center;
  color: var(--discret);
  font-size: 14px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
}

/* 4. Articles ---------------------------------------------------------------- */
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--vert);
}
/* Titre d'article : enfant direct du conteneur (le titre de l'index, dans
   .entete, garde sa propre règle). */
.conteneur > h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.8vw, 46px);
  margin: 14px 0 14px;
  line-height: 1.1;
}
.meta-article {
  font-size: 13px;
  color: var(--discret);
  margin-bottom: 30px;
}
article p {
  font-size: 17px;
  color: var(--texte);
  margin: 0 0 18px;
}
article h2 {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  margin: 48px 0 16px;
}
article h3 {
  font-family: var(--serif);
  font-size: 18.5px;
  margin: 28px 0 10px;
  color: var(--encre);
}
article ul {
  padding-left: 22px;
  margin: 0 0 18px;
}
article li {
  font-size: 16px;
  color: var(--texte);
  margin-bottom: 8px;
}
.chiffre-cle {
  background: var(--vert-fond);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 26px 0;
}
.chiffre-cle .n {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--vert);
  font-weight: 700;
}
.chiffre-cle .l {
  font-size: 13.5px;
  color: var(--texte);
  margin-top: 4px;
}
.source-note {
  font-size: 12.5px;
  color: var(--discret);
  margin-top: -10px;
  margin-bottom: 20px;
}
sup.ref a {
  text-decoration: none;
  color: var(--bleu);
  font-weight: 700;
}
.bloc-cta {
  background: var(--encre);
  color: #fff;
  border-radius: 14px;
  padding: 26px 24px;
  text-align: center;
  margin-top: 44px;
}
.bloc-cta h2 {
  margin-top: 0;
  font-size: 21px;
}
.bloc-cta p {
  opacity: 0.85;
  font-size: 14px;
}
/* Ligne secondaire vers l'accompagnement (structures, institutions). */
.bloc-cta .cta-accompagnement {
  margin: 16px 0 0;
  font-size: 13px;
}
.bloc-cta .cta-accompagnement a {
  color: #fff;
  font-weight: 700;
}
.bouton {
  display: inline-block;
  background: var(--vert);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 10px;
  margin-top: 10px;
}
.bibliographie {
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid var(--bordure);
}
.bibliographie h2 {
  font-family: var(--serif);
  font-size: 19px;
  margin: 0 0 14px;
}
.bibliographie ol {
  padding-left: 20px;
  margin: 0;
}
.bibliographie li {
  font-size: 13.5px;
  color: var(--texte);
  margin-bottom: 10px;
}
.bibliographie li a {
  word-break: break-word;
}

/* 5. Composants optionnels d'article ----------------------------------------- */
.graphique {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 20px 20px 16px;
  margin: 28px 0 8px;
}
.graphique svg {
  display: block;
  width: 100%;
  height: auto;
}
.legende-graph {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--texte);
}
.legende-graph span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legende-graph i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.note-graphique {
  font-size: 12.5px;
  color: var(--discret);
  margin: 8px 0 24px;
}
.encadre {
  border: 1px solid var(--bordure);
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 24px 0;
}
.encadre h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-family: var(--serif);
}
.encadre p {
  margin: 0;
  font-size: 14.5px;
}
.repartition {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 22px 24px;
  margin: 28px 0;
}
.repartition .titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--discret);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 14px;
}
.barre-poste {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.barre-poste .label {
  flex: 0 0 190px;
  font-size: 13.5px;
  color: var(--texte);
}
.barre-poste .piste {
  flex: 1;
  background: var(--fond);
  border-radius: 6px;
  height: 18px;
  overflow: hidden;
}
.barre-poste .remplissage {
  height: 100%;
  border-radius: 6px;
}
.barre-poste .valeur {
  flex: 0 0 42px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--encre);
  text-align: right;
}

/* ---- blog/pareto-priorisation-decarbonation.html : anciens attributs style="…" (CSP stricte). Une classe st-xxxxxx par déclaration. ---- */
.st-fd02fd { width:45%;background:#C98A2C; }
.st-8f3f22 { width:24%;background:#0071C1; }
.st-674c60 { width:11%;background:#2E673E; }
.st-068d4e { width:10%;background:#C98A2C; }
.st-74783d { width:9%;background:#0071C1; }
.st-9e305b { width:2%;background:#B04D4D; }
.st-229799 { width:1%;background:#5C665F; }

/* ---- blog/depassement-equilibre-systemes-vivants.html : anciens attributs style="…" (CSP stricte). Une classe st-xxxxxx par déclaration. ---- */
.st-06985d { background:#0071C1; }
.st-9bb04e { background:#2E673E; }
.st-5ba2c1 { background:#C98A2C; }
.st-a157db { background:#B04D4D; }

/* ---- Barres de répartition des articles : largeur et couleur par classe (CSP stricte, pas de style="…").
   Exemple : <div class="remplissage w-45 c-ambre"></div> pour 45 % en ambre. ---- */
.c-ambre { background: #c98a2c; }
.c-bleu { background: #0071c1; }
.c-vert { background: #2e673e; }
.c-rouge { background: #b04d4d; }
.c-gris { background: #5c665f; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* Cases à faire ressortir en vert clair (05/11/2026) : chiffres clés,
   encadrés, cartes d'articles, encart « Qui sommes-nous ? ». */
.chiffre-cle,
.encadre,
.carte-article,
.qui-sommes-nous {
  background: var(--lc-vert-clair);
  border: 1px solid var(--lc-vert-clair-bord);
}