/* =========================================================================
   Finances H2O — Le blogue
   =========================================================================
   Deux pages seulement : la liste (blog/index.html) et l'article
   (blog/article.html). Tout le contenu vient de js/h2o-articles.js.

   Principe de lisibilité : une colonne de texte de 68 caractères,
   une interligne de 1,75 et un corps de 19px. C'est la mesure qui fait
   qu'on lit 1 200 mots sans s'en rendre compte.
   ========================================================================= */

/* ---------- 1. EN-TÊTE DE SECTION ------------------------------------ */

.bl-hero {
  padding: var(--space-12) 0 var(--space-6);
  /* Le fjord derriere un voile dense. A 86 % d'opacite, meme un pixel
     blanc de la photo laisse le titre a 9,2:1 et le lede a 6,9:1 — la
     lisibilite ne depend donc pas de ce que montre l'image.
     Le degrade reste le repli si le fichier manque. */
  background:
    linear-gradient(175deg, rgba(15,42,46,.86) 0%, rgba(10,28,31,.94) 100%),
    linear-gradient(175deg, #0f2a2e 0%, #17383d 100%);
  background-size: cover, cover;
  background-position: center 38%, center;
  color: #eef0ea;
  position: relative;
  overflow: hidden;
}
.bl-hero + .section, .bl-art-hero + .section { padding-top: var(--space-6); }

.bl-hero::after {
  content: '';
  position: absolute; inset: auto 0 -1px 0; height: 56px;
  background: linear-gradient(180deg, transparent, var(--color-neutral-50));
  pointer-events: none;
}
.bl-hero .container { position: relative; z-index: 1; }
/* Sur fond sombre, on retire la pastille creme : du texte orange pale dessus
   donnait 1,48 de contraste. Fond transparent, texte clair. */
.bl-hero .section-eyebrow {
  color: #dcbb72;
  background-color: rgba(255,255,255, .10);
  border: 1px solid rgba(220,187,114, .32);
}

/* Trois chiffres, à droite du titre sur grand écran. Ils remplissent un vide
   et disent tout de suite ce qu'on trouve ici. */
.bl-hero-chiffres {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
.bl-hero-chiffre b {
  display: block; font-size: 2rem; line-height: 1.1;
  color: #fff; letter-spacing: -.02em;
}
.bl-hero-chiffre span {
  display: block; font-size: var(--font-size-sm); color: #96a19b; margin-top: .2rem;
}
@media (min-width: 1024px) {
  .bl-hero .container { display: flex; align-items: center; gap: var(--space-10); }
  .bl-hero-txt { flex: 1 1 62%; min-width: 0; }
  .bl-hero-chiffres {
    flex: 0 0 auto;
    flex-direction: column; gap: var(--space-5);
    margin: 0; padding: 0 0 0 var(--space-6);
    border-top: 0; border-left: 1px solid rgba(255,255,255,.14);
  }
}
.bl-hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-4);
  color: #fff;
}
.bl-hero p {
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: #b7bfb8;
  max-width: 60ch;
  margin: 0;
}

/* ---------- 2. FILTRES PAR CATÉGORIE --------------------------------- */

.bl-filtres {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: var(--space-2) 0;
}
.bl-filtre {
  appearance: none; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: .5rem 1.05rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  color: var(--color-neutral-700);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.bl-filtre:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); transform: translateY(-1px); }
.bl-filtre[aria-pressed="true"] {
  background: var(--color-primary-900);
  border-color: var(--color-primary-900);
  color: #fff;
}
.bl-filtre-n {
  display: inline-block; margin-left: .4rem;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-normal);
  opacity: .65;
}

/* ---------- 3. GRILLE D'ARTICLES ------------------------------------- */

.bl-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
}

.bl-carte {
  display: flex; flex-direction: column;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.bl-carte:hover, .bl-carte:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -18px rgba(15,42,46,.35);
  border-color: transparent;
}
.bl-carte:focus-visible { outline: 3px solid var(--color-primary-500); outline-offset: 3px; }

/* La bande colorée tient lieu d'image : pas de fichier à charger,
   donc la page reste instantanée même hors ligne. */
.bl-carte-bande {
  height: 116px;
  position: relative;
  background:
    radial-gradient(420px 160px at 20% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--tone, #2f6f74), color-mix(in srgb, var(--tone, #2f6f74) 55%, #0f2a2e));
  display: flex; align-items: center; justify-content: center;
}
.bl-carte-ic { font-size: 2.4rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.28)); }
.bl-carte-num {
  position: absolute; top: 10px; right: 14px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  color: rgba(255,255,255,.55); letter-spacing: .08em;
}

.bl-carte-corps { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; gap: var(--space-3); }
.bl-carte-meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--font-size-xs); color: var(--color-neutral-500);
}
.bl-carte-cat {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tone, var(--color-primary-500));
}
.bl-carte h3 {
  font-size: var(--font-size-lg); line-height: 1.28;
  margin: 0; color: var(--color-neutral-900);
  letter-spacing: -.01em;
}
.bl-carte-sous {
  font-size: var(--font-size-sm); line-height: 1.6;
  color: var(--color-neutral-700); margin: 0; flex: 1;
}
.bl-carte-pied {
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--tone, var(--color-primary-500));
}
.bl-carte-pied svg { width: 16px; height: 16px; transition: transform .2s; }
.bl-carte:hover .bl-carte-pied svg { transform: translateX(4px); }

/* Vedette : le premier article prend deux colonnes sur grand écran. */
@media (min-width: 900px) {
  .bl-carte.est-vedette { grid-column: span 2; flex-direction: row; }
  .bl-carte.est-vedette .bl-carte-bande { height: auto; width: 42%; flex: none; }
  .bl-carte.est-vedette .bl-carte-ic { font-size: 3.6rem; }
  .bl-carte.est-vedette h3 { font-size: 1.65rem; line-height: 1.22; }
  .bl-carte.est-vedette .bl-carte-sous { font-size: var(--font-size-md); flex: 0; }
  /* Le corps se centre : sans ça, une carte étirée par sa voisine laisse un vide. */
  .bl-carte.est-vedette .bl-carte-corps { justify-content: center; padding: var(--space-6); }
  .bl-carte.est-vedette .bl-carte-pied { margin-top: var(--space-2); }
}

/* Le bandeau de la vedette porte une étiquette : on dit par où commencer. */
.bl-carte.est-vedette .bl-carte-bande::after {
  content: 'À lire en premier';
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.bl-vide {
  grid-column: 1 / -1;
  text-align: center; padding: var(--space-10) var(--space-4);
  color: var(--color-neutral-500);
}

/* ---------- 4. PAGE D'ARTICLE ---------------------------------------- */

.bl-art-hero {
  padding: var(--space-10) 0 var(--space-8);
  background:
    linear-gradient(180deg, rgba(15,42,46,.88) 0%, rgba(10,28,31,.95) 100%),
    linear-gradient(180deg, #0f2a2e 0%, #17383d 100%);
  background-size: cover, cover;
  background-position: center 42%, center;
  color: #eef0ea;
}
.bl-fil {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--font-size-sm); margin-bottom: var(--space-5);
  color: #96a19b;
}
.bl-fil a { color: #96a19b; text-decoration: none; }
.bl-fil a:hover { color: #fff; text-decoration: underline; }

.bl-art-cat {
  display: inline-block;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: .09em;
  padding: .32rem .8rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tone,#2f6f74) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--tone,#2f6f74) 60%, transparent);
  color: #fff;
  margin-bottom: var(--space-4);
}
.bl-art-hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.1; letter-spacing: -.022em;
  margin: 0 0 var(--space-4); color: #fff;
  max-width: 22ch;
}
.bl-art-sous {
  font-size: var(--font-size-md); line-height: 1.6;
  color: #b7bfb8; max-width: 58ch; margin: 0 0 var(--space-5);
}
.bl-art-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  font-size: var(--font-size-sm); color: #96a19b;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.12);
}
.bl-art-auteur { display: flex; align-items: center; gap: .6rem; color: #d6dad2; }
.bl-art-pastille {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #a8853f, #8a6a2c);
  display: grid; place-items: center;
  font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: #fff;
}

/* Barre de progression de lecture */
.bl-progres {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #dcbb72, #a8853f);
  z-index: 999; transition: width .08s linear;
}

/* ---------- 5. LE CORPS DE L'ARTICLE --------------------------------- */

.bl-corps {
  font-size: 1.1875rem;         /* 19px : la taille où on ne fatigue pas */
  line-height: 1.78;
  color: #17383d;
  max-width: 68ch;
  margin: 0 auto;
}
.bl-corps > p { margin: 0 0 1.4em; }

/* Première ligne : plus grosse, elle installe le ton. */
.bl-corps > p:first-of-type { font-size: 1.3125rem; line-height: 1.62; color: #1b1f1e; }

.bl-corps h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.22; letter-spacing: -.015em;
  margin: 2.2em 0 .7em;
  color: var(--color-primary-900);
  position: relative; padding-top: .55em;
}
.bl-corps h2::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 54px; height: 4px; border-radius: 2px;
  background: var(--tone, var(--color-accent-600));
}
.bl-corps h3 {
  font-size: 1.22rem; line-height: 1.35;
  margin: 1.9em 0 .55em; color: var(--color-primary-700);
}
.bl-corps strong { font-weight: var(--font-weight-bold); color: #0f2a2e; }
.bl-corps em { font-style: italic; }

.bl-corps ul, .bl-corps ol { margin: 0 0 1.4em; padding-left: 1.35em; }
.bl-corps li { margin-bottom: .6em; }
.bl-corps li::marker { color: var(--tone, var(--color-accent-600)); font-weight: var(--font-weight-bold); }

.bl-corps blockquote {
  margin: 2em 0;
  padding: 1.35em 1.6em;
  border-left: 4px solid var(--tone, var(--color-accent-600));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: color-mix(in srgb, var(--tone,#2f6f74) 7%, #fff);
  font-family: var(--font-serif);
  font-size: 1.19rem; line-height: 1.62; color: #17383d;
}
.bl-corps blockquote p:last-child { margin-bottom: 0; }

.bl-corps a:not(.en-pont-go):not(.btn) {
  color: var(--color-primary-500); text-underline-offset: 3px;
}
/* Les composants d'engagement injectés dans le texte gardent leur propre style. */
.bl-corps .en-pont-go { color: #fff; text-decoration: none; }

/* Un tableau reste lisible sur téléphone : il défile dans sa boîte. */
.bl-corps table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); margin: 0 0 1.5em; }
.bl-corps th, .bl-corps td { padding: .7rem .85rem; border-bottom: 1px solid var(--color-neutral-200); text-align: left; }
.bl-corps th { background: var(--color-neutral-100); font-weight: var(--font-weight-semibold); }

/* ---------- 6. LE PONT VERS LE CALCULATEUR (dans le texte) ----------- */

.bl-mi { margin: 2.4em auto; max-width: 68ch; }

/* ---------- 7. SIGNATURE + PARTAGE ----------------------------------- */

.bl-signature {
  max-width: 68ch; margin: var(--space-10) auto 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-50), #fff);
  border: 1px solid var(--color-neutral-200);
  display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap;
}
.bl-signature-photo {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #a8853f, #8a6a2c);
  display: grid; place-items: center;
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: #fff;
}
.bl-signature-txt { flex: 1; min-width: 240px; }
.bl-signature-txt b { display: block; font-size: var(--font-size-md); color: var(--color-primary-900); }
.bl-signature-txt span { display: block; font-size: var(--font-size-sm); color: var(--color-neutral-500); margin-bottom: var(--space-3); }
.bl-signature-txt p { font-size: var(--font-size-base); line-height: 1.65; color: var(--color-neutral-700); margin: 0 0 var(--space-4); }

.bl-partage { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bl-partage button, .bl-partage a {
  appearance: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  padding: .55rem 1rem; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-neutral-200); background: #fff; color: var(--color-neutral-700);
  display: inline-flex; align-items: center; gap: .45rem;
  transition: border-color .18s, color .18s, transform .18s;
}
.bl-partage button:hover, .bl-partage a:hover {
  border-color: var(--color-primary-500); color: var(--color-primary-500); transform: translateY(-1px);
}
.bl-partage svg { width: 16px; height: 16px; }

/* ---------- 8. LIRE AUSSI -------------------------------------------- */

.bl-suite { padding: var(--space-10) 0 var(--space-12); background: var(--color-primary-50); }
.bl-suite h2 { font-size: var(--font-size-xl); margin: 0 0 var(--space-2); color: var(--color-primary-900); }
.bl-suite > .container > p { color: var(--color-neutral-700); margin: 0 0 var(--space-6); }

/* ---------- 9. SOMMAIRE FLOTTANT ------------------------------------- */

.bl-sommaire {
  max-width: 68ch; margin: 0 auto var(--space-8);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  border-left: 4px solid var(--tone, var(--color-primary-500));
}
.bl-sommaire b {
  display: block; font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--color-neutral-500); margin-bottom: var(--space-3);
}
.bl-sommaire ol { margin: 0; padding-left: 1.3em; list-style: decimal; }
.bl-sommaire li::marker { color: var(--tone, var(--color-primary-500)); font-weight: var(--font-weight-bold); }
.bl-sommaire li { margin-bottom: .4em; font-size: var(--font-size-base); line-height: 1.5; }
.bl-sommaire a { color: var(--color-primary-700); text-decoration: none; }
.bl-sommaire a:hover { text-decoration: underline; }

/* ---------- 10. ACCESSIBILITÉ ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bl-carte, .bl-carte-pied svg, .bl-progres, .bl-filtre, .bl-partage button, .bl-partage a {
    transition: none !important;
  }
  .bl-carte:hover { transform: none; }
}

@media print {
  .bl-hero, .bl-art-hero { background: none !important; color: #000 !important; }
  .bl-art-hero h1, .bl-art-sous, .bl-fil { color: #000 !important; }
  .bl-progres, .bl-partage, .bl-suite, .bl-filtres, .site-header, .en-barre { display: none !important; }
  .bl-corps { max-width: none; font-size: 12pt; }
}

/* Une carte masquée par le filtre : le display:flex des cartes gagne
   sur la règle par défaut de [hidden], il faut donc être explicite. */
.bl-carte[hidden] { display: none !important; }

/* Le seul bouton plein du bloc de partage : prendre rendez-vous.
   Tout le reste est secondaire — c'est celui-là qu'on veut voir. */
.bl-partage .bl-partage-fort {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: #fff;
  box-shadow: 0 8px 20px -10px var(--color-accent-600);
}
.bl-partage .bl-partage-fort:hover {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
  color: #fff;
}

/* =========================================================================
   LES PAGES DE CONTENU — liens entre pages sœurs
   ========================================================================= */

.pg-soeurs { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.pg-soeur {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-left: 4px solid var(--tone, var(--color-primary-500));
  text-decoration: none; color: inherit;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.pg-soeur:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -20px rgba(15,42,46,.35); }
.pg-soeur-ic {
  font-size: 1.8rem; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tone, #2f6f74) 13%, transparent);
}
.pg-soeur-txt { flex: 1; min-width: 0; }
.pg-soeur-txt b {
  display: block; font-size: var(--font-size-md); line-height: 1.3;
  color: var(--color-primary-900); margin-bottom: .3rem;
}
.pg-soeur-txt span {
  display: block; font-size: var(--font-size-sm); line-height: 1.55;
  color: var(--color-neutral-700);
}
.pg-soeur > svg { width: 20px; height: 20px; flex: none; color: var(--tone, var(--color-primary-500)); transition: transform .2s; }
.pg-soeur:hover > svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .pg-soeur { transition: none; }
  .pg-soeur:hover { transform: none; }
}

/* Les photos elles-memes : declarees a part pour que les chemins relatifs
   restent justes depuis blog/ comme depuis la racine, et pour qu'une
   feuille sans image ne casse rien. Domaine public (CC0) — voir
   assets/images/credits.json. */
.bl-hero { background-image:
  linear-gradient(175deg, rgba(15,42,46,.86) 0%, rgba(10,28,31,.94) 100%),
  url('../assets/images/fjord-falaises.jpg'); }
.bl-art-hero { background-image:
  linear-gradient(180deg, rgba(15,42,46,.88) 0%, rgba(10,28,31,.95) 100%),
  url('../assets/images/foret-automne.jpg'); }

/* --- Photo d'ambiance sur les cartes d'articles --- */
.bl-carte-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl-carte-bande { overflow: hidden; }
.bl-carte-bande .bl-carte-num { text-shadow: 0 2px 8px rgba(0,0,0,.5); }