/* === BfastAI — Couvertures des articles, communes au blog et à l'accueil =====
   La couverture d'un article est son PREMIER visuel (assets/blog/<slug>-1.webp),
   servi ici en version RÉDUITE : <slug>-thumb.webp. Deux pages s'en servent :
     - blog.html  : la vignette .bf-post__media de chaque carte de la grille ;
     - index.html : la vignette .bf-digest__thumb des trois cartes empilées.

   Ce fichier ne fait qu'une chose : associer un article à son fichier, via la
   variable --bf-cover. Chaque page empile ensuite ses propres couches de fond
   (la couverture, puis SON dégradé, puis SA couleur) : les deux vignettes n'ont
   pas le même dégradé, et aucune n'a à connaître celui de l'autre.

   L'image est posée en COUCHE DE FOND, jamais dans un <img>, pour deux raisons
   vérifiées au navigateur :

   1. L'image ne part jamais dans un <img> : le navigateur demanderait son URL
      dès l'analyse du HTML, avant tout rendu — 404 garanti sur un gabarit non
      résolu (c'est le piège déjà documenté pour les logos d'intégrations dans
      index.html), et icône d'image cassée si le fichier manque. Posée en fond,
      elle n'est demandée qu'au rendu, et un fichier manquant ne peint rien.

   2. Si un fichier manque, une image de fond ne peint RIEN : le dégradé et le
      symbole de la carte restent en place. Un <img>, même en alt="", fait
      peindre à Chrome son icône d'image cassée dans le coin. Aucun script n'est
      donc nécessaire pour rattraper le coup : il n'y a rien à rattraper.

   LE SYMBOLE DE LA VIGNETTE. Le ◈ / ✦ / ● etait le contenu de la vignette
   AVANT les photos : c'etait le repli. Or un texte se peint toujours PAR-DESSUS
   une image de fond — des qu'une couverture est attribuee, il se superpose donc
   a la photo. On le rend invisible la, et seulement la : une vignette sans
   couverture garde son symbole.

   Le selecteur nomme les deux vignettes pour passer devant leur propre `color`,
   declaree dans la page : a specificite egale c'est la derniere regle lue qui
   gagne, et cette feuille est lue avant. En la nommant deux fois (element +
   classe) elle repasse devant, sans recourir a !important.

   `--bf-cover` vaut `none` tant qu'aucune classe ne la pose : la vignette
   retombe alors sur son dégradé et son symbole, l'état d'avant les photos.

   ATTENTION AUX CHEMINS. Dans une feuille de style, un url() est d'ordinaire
   relatif à LA FEUILLE. Ce n'est pas le cas ici : l'url() traverse une variable
   personnalisée, et la substitution a lieu sur l'élément — le navigateur résout
   donc le chemin par rapport au DOCUMENT. Écrits « blog/… », ces chemins
   partaient chercher /blog/<fichier> et tombaient en 404 (et sur l'accueil, où
   les cartes se repeignent en défilant, Chrome réessayait à chaque repeinte).
   Ils sont donc écrits depuis la racine du site, comme dans le HTML.
   Les deux pages concernées y sont, ce qui les rend valables pour les deux.

   POURQUOI UNE VERSION RÉDUITE. Les visuels d'origine font 1536 à 1672 px de
   large (70 à 110 Ko) ; une vignette n'en affiche jamais plus de 680 px CSS,
   et 340 px sur téléphone. Les -thumb.webp font 960 px de large, qualité 80
   (15 à 28 Ko) : assez pour un écran 2x-3x, cinq fois moins à télécharger.
   L'image en taille réelle reste celle de l'article.

   POUR AJOUTER UN ARTICLE : déposer <slug>-1.webp dans assets/blog/, en tirer
   <slug>-thumb.webp (960 px de large, webp qualité 80), puis ajouter la ligne
   ici. C'est le seul endroit où vivent ces URL. */

.bf-cover--blog-taches-a-automatiser-en-priorite { --bf-cover:url(assets/blog/blog-taches-a-automatiser-en-priorite-thumb.webp); }
.bf-cover--blog-creer-outil-automatisation-interne{ --bf-cover:url(assets/blog/blog-creer-outil-automatisation-interne-thumb.webp); }
.bf-cover--blog-roi-de-lia                        { --bf-cover:url(assets/blog/blog-roi-de-lia-thumb.webp); }
.bf-cover--blog-donnees-pretes-pour-lia           { --bf-cover:url(assets/blog/blog-donnees-pretes-pour-lia-thumb.webp); }
.bf-cover--blog-ia-generative-pme-africaines      { --bf-cover:url(assets/blog/blog-ia-generative-pme-africaines-thumb.webp); }

.bf-post__media[class*="bf-cover--"],
.bf-digest__thumb[class*="bf-cover--"]{ color:transparent; }