/* ==========================================================================
   Couvertures d'articles generees (voir inc/covers.php)
   Degrade navy, maillage de noeuds du hero, badge d'icone, titre en pastilles.
   Aucune requete image : le maillage est un SVG inline dans le CSS.
   ========================================================================== */

.sc-cover {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0A1F3C;
  container-type: inline-size;
  text-decoration: none;
}
.sc-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 54% at 82% 18%, rgba(0,179,159,0.14) 0%, rgba(0,179,159,0) 66%);
  pointer-events: none;
}

/* Le maillage, repris du hero de l'accueil, estompe au centre */
.sc-cover__mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background-image: repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,0.30) 0 1.5px, transparent 1.5px 84px);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0.25) 72%, rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(105deg, #000 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0.25) 72%, rgba(0,0,0,0.15) 100%);
}
@supports not (mask-image: radial-gradient(#000, #fff)) {
  .sc-cover__mesh { opacity: 0.3; }
}

/* Badge d'icone */
.sc-cover__badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DCF3EF;
  color: #0A1F3C;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(4,18,46,0.34);
  flex-shrink: 0;
}
.sc-cover__badge svg { width: 55%; height: 55%; display: block; }

/* Titre en pastilles : box-decoration-break laisse le navigateur
   fabriquer une pastille par ligne, sans mesure de texte cote PHP */
.sc-cover__title {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  font-family: "Bricolage Grotesque", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.sc-cover__row { display: block; }
.sc-cover__row { transform: none; }

.sc-cover__pill {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(4,18,46,0.28);
}
/* Les deux lignes portent une seule expression : meme pastille pour les
   deux. Le turquoise reste au badge, qui lui porte une autre information,
   la categorie. */
.sc-cover__pill--light,
.sc-cover__pill--dark { background: #fff; color: #0A1F3C; }

/* ---- Variante en tete d'article ---- */
.sc-cover--hero {
  aspect-ratio: 1200 / 630;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
.sc-cover--hero .sc-cover__badge { width: 12cqw; height: 12cqw; }
.sc-cover--hero .sc-cover__title { font-size: 5.6cqw; line-height: 1.62; }
.sc-cover--hero .sc-cover__pill  { padding: 0.3em 0.62em; }

/* ---- Variante carte de la grille ---- */
.sc-cover--card {
  aspect-ratio: 16 / 10;
  margin: -22px -22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
}
.sc-cover--card .sc-cover__badge { width: 14cqw; height: 14cqw; }
.sc-cover--card .sc-cover__title { font-size: 6.4cqw; line-height: 1.58; }
.sc-cover--card .sc-cover__pill  { padding: 0.28em 0.6em; }

/* ---- Variante vignette carree, badge seul ---- */
.sc-cover--mini {
  width: 108px;
  height: 108px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sc-cover--mini .sc-cover__badge { width: 44px; height: 44px; }

/* Repli si les unites de conteneur ne sont pas gerees */
@supports not (font-size: 1cqw) {
  .sc-cover--hero .sc-cover__badge { width: 76px; height: 76px; }
  .sc-cover--hero .sc-cover__title { font-size: 34px; }
  .sc-cover--card .sc-cover__badge { width: 40px; height: 40px; }
  .sc-cover--card .sc-cover__title { font-size: 18px; }
}

@media (max-width: 640px) {
  .sc-cover--hero { border-radius: 12px; }
}

/* Signature : la couverture doit dire d'ou elle vient. Ces images
   circulent sur LinkedIn et WhatsApp, ou personne ne voit le site
   autour. Discrete, en bas a droite, jamais concurrente du mot cle. */
.sc-cover__sign {
  position: absolute;
  z-index: 2;
  right: 3.2cqw;
  bottom: 2.6cqw;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.62);
}
.sc-cover--hero .sc-cover__sign { font-size: 1.9cqw; }
.sc-cover--card .sc-cover__sign { font-size: 2.4cqw; }

@supports not (font-size: 1cqw) {
  .sc-cover--hero .sc-cover__sign { font-size: 12px; right: 20px; bottom: 16px; }
  .sc-cover--card .sc-cover__sign { font-size: 11px; right: 14px; bottom: 11px; }
}