/* Blog Integraall - charge uniquement sur les articles et les archives.
   Reprend les variables et les composants de integraall.css : rien n'est
   redefini ici qui existe deja ailleurs. */

/* ---------- meta de la tete d'article (dans le sol-hero du site) ---------- */
.bl-meta{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin:1.1rem 0 0;
  font-family:'Roboto',sans-serif;font-size:.86rem;color:var(--gris)}
.bl-meta b{color:var(--encre)}
.bl-meta span[aria-hidden]{opacity:.4}


/* ---------- corps de l'article ---------- */
.bl-prose{max-width:760px;margin:2.4rem auto 0;font-family:'Inter',sans-serif;
  font-size:1.045rem;line-height:1.72;color:#2c2c33}
.bl-prose > *:first-child{margin-top:0}
.bl-prose h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.72rem;line-height:1.2;
  color:var(--encre);margin:2.6rem 0 .9rem;text-align:left}
.bl-prose h3{font-family:'Roboto',sans-serif;font-weight:600;font-size:1.22rem;
  color:var(--violet-fonce);margin:1.9rem 0 .6rem}
.bl-prose p{margin:0 0 1.15rem}
.bl-prose a{color:var(--violet-fonce);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--lavande)}
.bl-prose a:hover{text-decoration-color:var(--violet-vif)}
.bl-prose strong{color:var(--encre)}
.bl-prose ul,.bl-prose ol{margin:0 0 1.25rem;padding-left:1.35rem}
.bl-prose li{margin-bottom:.45rem}
.bl-prose ul li::marker{color:var(--violet-vif)}
.bl-prose ol li::marker{color:var(--violet-vif);font-family:'Fredoka',sans-serif;font-weight:600}

/* citation = le point a retenir, pas un ornement */
.bl-prose blockquote{margin:1.8rem 0;padding:1.15rem 1.4rem;background:var(--lavande-clair);
  border:1px solid #ece7fb;border-left:5px solid var(--violet-fonce);border-radius:14px}
.bl-prose blockquote p{margin:0;font-family:'Roboto',sans-serif;font-weight:500;color:var(--encre)}

.bl-prose figure{margin:1.9rem 0}
.bl-prose img{max-width:100%;height:auto;border-radius:16px;display:block}
.bl-prose figcaption{margin-top:.5rem;font-size:.82rem;color:var(--gris);text-align:center}

/* les tableaux debordent sur mobile : ils defilent dans leur propre boite */
.bl-prose .tableau,.bl-prose figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-prose table{width:100%;border-collapse:collapse;margin:0;font-family:'Roboto',sans-serif;font-size:.93rem}
.bl-prose th,.bl-prose td{border:1px solid #ece7fb;padding:.65rem .8rem;text-align:left;vertical-align:top}
.bl-prose th{background:var(--lavande-clair);font-weight:600;color:var(--violet-fonce)}

.bl-prose hr{border:0;height:1px;background:#ece7fb;margin:2.4rem 0}

/* ---------- signature de l'auteur (E-E-A-T) ---------- */
.bl-auteur{max-width:760px;margin:2.8rem auto 0;display:flex;gap:1.1rem;align-items:flex-start;
  background:#fff;border:1px solid #f0ecff;border-radius:18px;padding:1.4rem 1.5rem;
  box-shadow:var(--ombre-douce)}
.bl-auteur .av{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--violet-vif);color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem}
.bl-auteur b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.02rem;color:var(--encre)}
.bl-auteur p{margin:.35rem 0 .7rem;font-family:'Roboto',sans-serif;font-size:.9rem;
  line-height:1.6;color:var(--gris)}
.bl-auteur .chip{margin-right:.4rem}

/* ---------- index et archives ---------- */
.bl-cats{display:flex;flex-wrap:wrap;gap:.5rem}
.bl-cats .chip.actif{background:var(--violet-vif);color:#fff}

.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.bl-card{display:flex;flex-direction:column;background:#fff;border:1px solid #f0ecff;
  border-radius:18px;overflow:hidden;box-shadow:var(--ombre-douce);text-decoration:none;
  color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.bl-vig{display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,var(--lavande),var(--bleu))}
.bl-vig img{width:100%;height:100%;object-fit:cover;display:block}
.bl-corps{display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.25rem 1.35rem}
.bl-corps em{font-style:normal;font-family:'Roboto',sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--violet-fonce)}
.bl-corps b{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.06rem;line-height:1.28;color:var(--encre)}
.bl-chapo{font-family:'Roboto',sans-serif;font-size:.88rem;line-height:1.55;color:var(--gris)}
.bl-corps i{font-style:normal;margin-top:auto;padding-top:.3rem;font-family:'Roboto',sans-serif;
  font-size:.78rem;color:#a49ec0}

.bl-pagination{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.6rem}
.bl-pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;
  padding:0 .8rem;border-radius:12px;background:#fff;border:1px solid #f0ecff;
  font-family:'Roboto',sans-serif;font-weight:600;font-size:.9rem;color:var(--violet-fonce);
  text-decoration:none;box-shadow:var(--ombre-douce)}
.bl-pagination .page-numbers.current{background:var(--violet-vif);color:#fff;border-color:var(--violet-vif)}
.bl-pagination a.page-numbers:hover{background:var(--lavande-clair)}

@media (max-width:960px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .bl-grid{grid-template-columns:1fr}
  .bl-prose{font-size:1.01rem}
  .bl-auteur{flex-direction:column;gap:.8rem}
}

/* ---------- relances et encadres au fil de l article ----------
   .cta-band et .factbox viennent de integraall.css. Dans la colonne de
   lecture (760px) il faut les resserrer, et surtout redonner la main aux
   regles du site : .bl-prose h2 a la meme specificite que .cta-band h2 et
   passe apres dans la cascade, il ecrasait donc le titre blanc de la bande. */
.bl-prose .cta-band{margin:2.6rem 0;padding:2.3rem 1.7rem;border-radius:26px}
.bl-prose .cta-band h2{color:#fff;font-size:1.55rem;line-height:1.22;margin:0 0 .5rem;text-align:center}
.bl-prose .cta-band p{color:#fff;opacity:.94;margin:0 auto 1.3rem;text-align:center}
.bl-prose .cta-band a{text-decoration:none}
.bl-prose .factbox{margin:2rem 0}
.bl-prose .factbox li{margin-bottom:.4rem;color:var(--gris)}
.bl-prose .factbox strong{color:var(--encre)}
@media (max-width:620px){
  .bl-prose .cta-band{padding:1.9rem 1.2rem}
  .bl-prose .cta-band h2{font-size:1.32rem}
}

/* relance simple : une ou deux touches de bouton au fil du texte, plus legere
   que la bande violette. .btn sans .btn-lg est deja la variante compacte. */
.bl-prose .bl-relance{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.9rem 0 2.3rem}
.bl-prose .bl-relance a{text-decoration:none}

/* Liens sortants : on les distingue des liens internes par une fleche.
   Echappements CSS sur SIX chiffres, sinon le caractere suivant est avale :
   U+00A0 (espace insecable) puis U+2197 (fleche nord-est). */
.bl-prose a[rel~="noopener"]::after{content:"\0000a0\002197";font-size:.82em;opacity:.55}
/* titre de la grille des articles (hubs, 16/09/2026) */
.bl-h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.5rem;line-height:1.2;color:var(--violet-fonce);margin:0 0 1.2rem}
.suite p{font-family:'Roboto',sans-serif;font-size:1rem;line-height:1.55;margin:0 0 .9rem;color:var(--encre)}