/* ==========================================================================
   Section blog - v2
   Deux articles mis en avant, sur la bande creme claire que base.css reservait
   deja a cette section (--cream-light).

   Le jumeau posait un panneau creme a 22px de retrait, un titre centre et des
   colonnes flottantes a 33,33 % (dont une vide). Ici la section suit le
   systeme de la v2 : bande pleine largeur, conteneur centre a 1220px, en-tete
   aligne a gauche comme les autres sections, et une grille reelle de deux
   cartes qui se replie en une colonne sur telephone.
   ========================================================================== */

.blog {
  /* Les deux categories d'articles etaient vert et bleu. Le bleu etait une
     teinte hors palette, doublee d'un --bleu-texte ecrit en dur ici pour
     rattraper son contraste. La seconde categorie passe au mauve, troisieme
     voix de la palette et exactement son emploi : une categorie, ni positive
     ni negative.
     Les deux etiquettes suivent alors la meme regle, celle des pastilles :
     fond en declinaison claire, texte en declinaison sombre. Jamais de mauve
     plein sous du texte, il n'y tiendrait que 2,2 pour 1. */
  background-color: var(--cream-light);
}

/* ------------------------------------------------------------------ entete */

/* En-tete sur deux zones : le triptyque a gauche, le lien vers l'index colle
   en bas a droite, sur la ligne de base du chapo. */
.blog__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-bloc);
}

.blog__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-titre);
  min-width: 0;
}

/* Le jumeau melange deux polices sur les deux lignes du titre : "Mon blog" en
   Hw Cigars, la suite en sans. On garde ce contraste, avec l'echelle de la v2
   plutot que les 38px du jumeau. */
.blog__titre-sans {
  font-family: var(--font-sans);
  font-size: var(--t-grand);
  font-weight: 500;
  line-height: var(--t-grand-lh);
  letter-spacing: var(--t-grand-ls);
}

.blog__chapo {
  max-width: 52ch;
}

/* --------------------------------------------- lien "Tous les articles" */

/* Le jumeau anime un trait sous le lien au survol. Le principe est conserve,
   mais le trait est ici un pseudo-element mis a l'echelle : animer une
   largeur promeut l'element en couche composee et Chrome en rasterise un
   residu visible au repos. Une echelle nulle ne peint rien. */
.blog__lien {
  /* Cible tactile : sans ce padding le lien ne fait que 30px de haut. */
  padding-block: 8px;
  margin-block: -8px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  padding-bottom: 6px;
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
}

.blog__lien::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background-color: var(--ink-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition) linear;
}

.blog__lien:hover::after,
.blog__lien:focus-visible::after {
  transform: scaleX(1);
}

.blog__lien-fleche {
  width: 16px;
  height: 16px;
  transition: transform var(--transition) ease;
}

.blog__lien:hover .blog__lien-fleche {
  transform: translate(2px, -2px);
}

/* ------------------------------------------------------------------ cartes */

.blog__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-grille);
}

.blog__item {
  min-width: 0;
}

.blog__carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background-color: transparent;
  text-decoration: none;
  transition: background-color var(--transition) ease,
              border-color var(--transition) ease,
              box-shadow var(--transition) ease;
}

.blog__carte:hover {
  border-color: var(--trait);
  background-color: var(--white);
  box-shadow: var(--ombre-carte);
}

/* La vignette porte le rapport d'image : les deux couvertures n'ont pas le
   meme format d'origine (1200x1200 et 1350x900), le recadrage les remet a la
   meme hauteur sans deformer. */
.blog__vignette {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--cream);
}

.blog__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  transition: transform 600ms ease;
}

.blog__carte:hover .blog__image {
  transform: scale(1.03);
}

.blog__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
}

.blog__carte-titre {
  margin: 0;
}

/* Les deux titres ne font pas le meme nombre de lignes : sans cette marge
   automatique, les etiquettes se retrouveraient a deux hauteurs differentes.
   Poussees en bas d'une carte etiree, elles s'alignent. */
.blog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
}

.blog__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 20px;
}

.blog__tag--acquisition {
  background-color: var(--vert-clair);
  color: var(--vert-texte);
}

.blog__tag--logistique {
  background-color: var(--mauve-clair);
  color: var(--mauve-sombre);
}

/* -------------------------------------------------------------- ruptures */

@media screen and (max-width: 991px) {
  .blog__entete {
    gap: var(--sp-5);
  }

  .blog__chapo {
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  /* Le lien passe sous le triptyque : cote a cote, il ne reste plus assez de
     largeur au chapo pour tenir sur deux lignes. */
  .blog__entete {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  .blog__liste {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

@media screen and (max-width: 479px) {
  .blog__carte {
    padding: var(--sp-2);
  }

  .blog__corps {
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-2) var(--sp-2);
  }

  /* Une couverture au format 16/10 ne fait plus que 190px de haut sur une
     fenetre de 375px : le format est ramene au 3/2 du jumeau pour lui rendre
     de la presence. */
  .blog__image {
    aspect-ratio: 3 / 2;
  }
}