/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — gabarit d'article

   FEUILLE À PART, chargée par les seules pages du blog. Le brief interdit de
   toucher aux pages existantes : une règle ajoutée dans `covoeur-site.css`
   s'appliquerait aux douze autres, et son `?v=` obligerait à modifier
   `base.html`.

   ELLE N'INVENTE AUCUNE VALEUR DE CHARTE. Couleurs, polices, rayons : tout
   vient des jetons `:root` de `covoeur-site.css`. Ce qu'elle fait, c'est
   reprendre les trois SIGNES du site là où un article les demande :

     · l'eyebrow — pastille or + capitales espacées ;
     · l'italique sage (Instrument Serif) pour la ligne qui prolonge le titre ;
     · la micro-typographie en mono, capitales espacées, pour tout ce qui
       étiquette plutôt que raconte.

   Et ses deux procédés de mise en page : des FONDS QUI ALTERNENT
   (`--bg` → `--bg-raised` → `--bg`) pour séparer l'en-tête du corps et le
   corps du pied, et des CARTES bordées pour ce qui se parcourt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LA COLONNE, UNE SEULE POUR TOUT L'ARTICLE. En-tête, corps et pied la
   partagent, donc le titre et le texte ont le même bord gauche. Deux largeurs
   concentriques différentes — un en-tête large, un corps étroit — se lisent
   comme un décalage, pas comme une hiérarchie. */
:root{--cvb-col:760px}

/* ─── Le bandeau d'aperçu ───────────────────────────────────────────────────
   Il doit se voir sans masquer l'article : fond or pâle, une ligne. C'est lui
   qui empêche de confondre un brouillon relu avec une page en ligne. */
.cvb-bandeau{
  background:var(--gold-mist); border-bottom:1px solid var(--gold);
  color:var(--ink); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  padding:11px 20px; line-height:1.6;
}
.cvb-bandeau .s{color:var(--ink-mute); letter-spacing:.06em}

/* ─── L'en-tête ──────────────────────────────────────────────────────────── */
.cvb-hero{padding:80px 40px 56px}
.cvb-hero__in{max-width:var(--cvb-col); margin:0 auto}
.cvb-titre{
  font-family:var(--serif); font-weight:400; font-size:54px; line-height:1.04;
  letter-spacing:-.025em; color:var(--ink); margin:20px 0 0;
  text-wrap:balance; overflow-wrap:break-word;
}
/* Le chapô en italique sage : c'est la seconde ligne des titres du site
   (« Ton coach de cœur / *sur WhatsApp.* »), appliquée au standfirst. */
.cvb-chapo{
  margin:20px 0 0;
  font-family:var(--serif-italic); font-style:italic; font-size:24px;
  line-height:1.4; color:var(--accent-deep);
}

/* La ligne de crédits, en micro-typo mono — comme « PROFIL RELATIONNEL
   OFFERT · SANS APP À INSTALLER » sous le titre de l'accueil. */
.cvb-meta{
  margin:34px 0 0; padding:18px 0 0; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.cvb-meta span{display:inline-flex; align-items:center; gap:7px}
.cvb-meta svg{width:13px; height:13px; color:var(--accent-soft)}
.cvb-meta b{color:var(--ink-soft); font-weight:500}
.cvb-meta time{font-variant-numeric:tabular-nums}

/* ─── Le corps, sur le fond surélevé ─────────────────────────────────────── */
.cvb-corps{
  background:var(--bg-raised);
  border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  padding:64px 40px 72px;
}
/* UN MOT QUI NE SE COUPE PAS POUSSE TOUTE LA PAGE DE CÔTÉ. Les tableaux et le
   code défilent déjà dans leur boîte ; une URL collée en clair ou un terme
   long vivent dans un paragraphe ordinaire. Mesuré : sans ces règles, la page
   s'étend à 577 px là où l'écran en fait 360. */
.cvb-prose{
  max-width:var(--cvb-col); margin:0 auto;
  font-size:17.5px; line-height:1.78; color:var(--ink-soft);
  overflow-wrap:break-word;
}
/* Liens et code en ligne n'ont pas d'espace où se rompre : `anywhere`. */
.cvb-prose a, .cvb-prose code{overflow-wrap:anywhere}

/* L'attaque, plus grande et plus sombre — convention éditoriale, et elle fait
   le raccord entre le chapô et le corps. */
.cvb-prose > p:first-child{font-size:19.5px; line-height:1.7; color:var(--ink)}

/* Chaque intertitre s'ouvre sur un trait d'or, le même accent que la pastille
   de l'eyebrow et que le swash du logo. */
.cvb-prose h2{
  font-family:var(--serif); font-weight:400; font-size:31px; line-height:1.18;
  letter-spacing:-.018em; color:var(--ink); margin:56px 0 16px;
}
.cvb-prose h2::before{
  content:""; display:block; width:34px; height:2px; border-radius:1px;
  background:var(--gold); margin:0 0 18px;
}
.cvb-prose h3{font-family:var(--sans); font-weight:600; font-size:18.5px;
  color:var(--ink); margin:34px 0 10px}
.cvb-prose p{margin:0 0 19px}
.cvb-prose ul,.cvb-prose ol{margin:0 0 22px; padding-left:24px}
.cvb-prose li{margin-bottom:11px}
.cvb-prose li::marker{color:var(--accent)}
.cvb-prose a{color:var(--accent-deep); font-weight:500;
  text-decoration-color:var(--accent-soft); text-underline-offset:3px}
.cvb-prose strong{color:var(--ink); font-weight:600}
.cvb-prose em{font-family:var(--serif-italic); font-style:italic; font-size:1.07em}

/* La citation devient une vraie exergue : l'italique du site, en grand. */
.cvb-prose blockquote{
  margin:34px 0; padding:2px 0 2px 26px; border-left:2px solid var(--accent-soft);
  font-family:var(--serif-italic); font-style:italic; font-size:24px;
  line-height:1.45; color:var(--ink);
}
.cvb-prose blockquote p{margin:0 0 10px}
.cvb-prose blockquote p:last-child{margin-bottom:0}
.cvb-prose blockquote em{font-size:1em}

.cvb-prose hr{border:0; border-top:1px solid var(--border-soft); margin:44px 0}
.cvb-prose img{max-width:100%; height:auto; border-radius:var(--radius-sm);
  border:1px solid var(--border); margin:10px 0 24px}
.cvb-prose code{font-family:var(--mono); font-size:.88em; background:var(--bg);
  border:1px solid var(--border-soft); border-radius:6px; padding:1px 5px}
.cvb-prose pre{overflow-x:auto; background:var(--bg); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:16px 18px}
.cvb-prose pre code{background:none; border:0; padding:0}
/* Un tableau large défile dans SA boîte, jamais en poussant la page. */
.cvb-prose table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px;
  display:block; overflow-x:auto}
.cvb-prose th,.cvb-prose td{border:1px solid var(--border); padding:10px 14px;
  text-align:left; vertical-align:top}
.cvb-prose th{background:var(--bg-deep); font-weight:600; color:var(--ink);
  font-family:var(--sans); font-size:13px; letter-spacing:.04em; text-transform:uppercase}

/* ─── Les deux encadrés (syntaxe `!!! nom "Titre"`) ───────────────────────── */
.cvb-prose .admonition{
  border-radius:var(--radius); padding:24px 26px; margin:34px 0;
  font-size:16px; line-height:1.68;
}
/* La pastille de l'eyebrow, reprise telle quelle sur l'intitulé. */
.cvb-prose .admonition-title{
  display:flex; align-items:center; gap:11px; margin:0 0 12px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.cvb-prose .admonition-title::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:0 0 8px;
}
.cvb-prose .admonition p:last-child{margin-bottom:0}
.cvb-prose .admonition ul{margin:10px 0 0}

/* « Bon à savoir » : le sage du site, son registre informatif. */
.cvb-prose .admonition.bon-a-savoir{
  background:var(--accent-mist); border:1px solid var(--accent-soft); color:var(--ink-soft);
}
.cvb-prose .admonition.bon-a-savoir .admonition-title{color:var(--accent-deep)}
.cvb-prose .admonition.bon-a-savoir .admonition-title::before{background:var(--accent)}

/* « Si l'un de vous ne va pas bien » : SOBRE, demandé tel quel par le brief.
   Pas de rouge, pas de pictogramme d'alerte — une orientation vers un
   professionnel n'est pas une alarme, et un encadré qui crie se saute. */
.cvb-prose .admonition.orientation{
  background:var(--bg); border:1px solid var(--border);
  border-left:3px solid var(--gold-deep); color:var(--ink-soft);
}
.cvb-prose .admonition.orientation .admonition-title{color:var(--ink)}
.cvb-prose .admonition.orientation .admonition-title::before{background:var(--gold)}

/* ─── Le pied : sources, à lire aussi, appel discret ──────────────────────── */
.cvb-pied{padding:64px 40px 96px}
.cvb-pied__in{max-width:var(--cvb-col); margin:0 auto}
.cvb-bloc{margin-bottom:56px}
.cvb-bloc:last-child{margin-bottom:0}

.cvb-sources{list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:12px}
.cvb-sources li{
  display:grid; grid-template-columns:28px 1fr; gap:4px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
  overflow-wrap:anywhere;
}
.cvb-sources li::before{
  content:counter(cvb-src, decimal-leading-zero); counter-increment:cvb-src;
  font-family:var(--mono); font-size:11px; color:var(--accent-soft);
  letter-spacing:.06em; padding-top:4px;
}
.cvb-sources{counter-reset:cvb-src}
.cvb-sources a{color:var(--accent-deep); font-weight:500;
  text-decoration-color:var(--accent-soft); text-underline-offset:3px}

/* Les cartes de « À lire aussi » : celles des moments de vie du site. */
/* `auto-fit` plutôt que deux colonnes fixes : un article n'a souvent qu'un
   seul voisin à proposer, et une carte seule dans une grille de deux laisse un
   trou qui se voit. Avec `auto-fit`, une carte occupe la largeur, deux se
   partagent. */
.cvb-aussi{margin-top:18px; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.cvb-aussi a{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--radius); padding:26px; text-decoration:none;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, transform .2s ease;
}
.cvb-aussi a:hover{border-color:var(--accent-soft); transform:translateY(-1px)}
.cvb-aussi .t{font-family:var(--serif); font-size:22px; line-height:1.15;
  letter-spacing:-.01em; color:var(--ink); overflow-wrap:break-word}
.cvb-aussi .d{font-family:var(--serif-italic); font-style:italic; font-size:16px;
  line-height:1.5; color:var(--ink-soft)}
.cvb-aussi .go{margin-top:auto; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent)}
.cvb-aussi .go svg{width:14px; height:14px}

/* L'appel à l'action : UNE LIGNE, pas une bannière — le brief est explicite. */
.cvb-cta{
  margin-top:8px; padding-top:28px; border-top:1px solid var(--border);
  font-size:16.5px; line-height:1.65; color:var(--ink-soft);
}
.cvb-cta a{color:var(--accent-deep); font-weight:600;
  text-decoration-color:var(--accent-soft); text-underline-offset:3px}

/* ─── L'index ────────────────────────────────────────────────────────────── */
.cvb-liste{max-width:var(--cvb-col); margin:0 auto; padding:8px 40px 96px}
.cvb-item{display:block; padding:30px 0; border-bottom:1px solid var(--border-soft);
  text-decoration:none}
.cvb-item .k{display:inline-flex; align-items:center; gap:9px; margin-bottom:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute)}
.cvb-item .k::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); flex:0 0 7px}
.cvb-item .t{display:block; font-family:var(--serif); font-size:29px; line-height:1.15;
  letter-spacing:-.018em; color:var(--ink); margin-bottom:10px; overflow-wrap:break-word}
.cvb-item .d{display:block; font-family:var(--serif-italic); font-style:italic;
  font-size:18px; line-height:1.45; color:var(--ink-soft)}
.cvb-item:hover .t{color:var(--accent-deep)}

@media (max-width:768px){
  .cvb-bandeau{font-size:10px; letter-spacing:.08em; padding:10px 18px}
  .cvb-hero{padding:40px 20px 32px}
  .cvb-titre{font-size:33px; letter-spacing:-.02em}
  .cvb-chapo{font-size:19px}
  /* Un fait par ligne, et plus de séparateurs. Le point d'un item fait partie
     de sa boîte : il ne peut pas rester seul sur une ligne, mais il peut en
     COMMENCER une quand la liste passe à la ligne — et une ligne qui s'ouvre
     sur une puce égarée se lit mal. Sur 360 px, elle y passe deux fois. */
  .cvb-meta{flex-direction:column; align-items:flex-start; gap:9px; margin-top:26px}
  .cvb-corps{padding:40px 20px 48px}
  .cvb-prose{font-size:16.5px}
  .cvb-prose > p:first-child{font-size:18px}
  .cvb-prose h2{font-size:25px; margin-top:44px}
  .cvb-prose h3{font-size:17.5px}
  .cvb-prose blockquote{font-size:20px; padding-left:20px}
  .cvb-prose .admonition{padding:20px 22px}
  .cvb-pied{padding:40px 20px 64px}
  .cvb-bloc{margin-bottom:40px}
  .cvb-aussi{grid-template-columns:1fr}
  .cvb-liste{padding:8px 20px 64px}
  .cvb-item .t{font-size:24px}
  .cvb-item .d{font-size:16.5px}
}