/* ==========================================================================
   Index du blog (template-article.html)
   Deux colonnes : le filtre par categorie a gauche, la grille des articles a
   droite. Toutes les valeurs proviennent des styles calcules du site
   d'origine (verite terrain template-1440 / 900 / 375).
   ========================================================================== */

/* La bande verticale est en vh dans l'original, pas en px : 20vh en haut
   (variante "espace supplementaire" des sections de contenu) et 5vh en bas.
   Avec la fenetre de reference de 900px de haut, cela donne 180px et 45px. */
.blog-index {
  padding: 20vh var(--gutter) 5vh;
  overflow: hidden;
}

.blog-index__colonnes {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

/* 30 % et 70 % : a 1440px, 371,5px et 866,9px. Les deux colonnes remplissent
   exactement la largeur disponible, il n'y a donc aucune gouttiere entre
   elles malgre le space-between. */
.blog-index__colonne-filtre {
  width: 30%;
}

.blog-index__colonne-articles {
  width: 70%;
}

/* ------------------------------------------------------------- le filtre */

/* Le bloc est sorti du flux et fixe a la fenetre : il reste affiche pendant
   le defilement de la grille. Sa colonne, alors vide, garde sa hauteur par
   l'etirement du conteneur flex.
   L'alignement de debut est ce qui calibre la largeur du bloc sur son plus
   large enfant : la pastille "Logistique", soit 95px. */
.blog-index__filtre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: fixed;
}

.blog-index__titre {
  margin: 0;
  padding: 0;
  color: var(--ink-strong);
  font-family: var(--font-titre-blog);
  font-size: 45px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: var(--ink-strong);
}

/* L'original empile un bloc de formulaire et un formulaire, dont les marges
   verticales fusionnent deux a deux. On aplatit en un seul element : les
   marges de 20px + 20px en haut et de 5px + 15px en bas sont donc portees
   ici en une fois, et l'ecart de 15px entre pastilles passe par gap, un
   conteneur flex ne faisant pas fusionner les marges de ses enfants. */
.blog-index__form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 40px 0 20px;
}

/* La case a cocher : une pastille bordee, le libelle centre dedans. */
.blog-index__case {
  display: flex;
  justify-content: center;
  position: relative;
  padding: 4px 10px;
  border: 1px solid var(--grey);
  border-radius: 100px;
  background-color: transparent;
  transition: border-color 500ms linear, background-color 500ms linear;
}

/* L'original masque la case native en display: none. On la garde ici a taille
   nulle et transparente plutot que masquee, sinon elle sort de l'ordre de
   tabulation et la pastille devient inutilisable au clavier. Etant
   positionnee, elle ne participe pas au centrage du libelle. */
.blog-index__case-input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
}

.blog-index__case-texte {
  color: var(--grey);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: color 500ms linear;
}

/* Etat coche. Valeurs relevees dans les interactions du site d'origine :
   bordure transparente, fond mauve tres pale, texte mauve, 500ms en
   outQuint a l'aller (le retour reste lineaire, cf. regles de repos).
   La classe est posee par le script, le :has couvre la navigation clavier
   avant que l'evenement de changement ne remonte. */
.blog-index__case.is-cochee,
.blog-index__case:has(.blog-index__case-input:checked) {
  border-color: rgba(14, 15, 17, 0);
  background-color: var(--mauve-clair);
  transition: border-color 500ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.blog-index__case.is-cochee .blog-index__case-texte,
.blog-index__case:has(.blog-index__case-input:checked) .blog-index__case-texte {
  color: var(--mauve-sombre);
  transition: color 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Le contour de focus n'existe pas sur l'original, ou la case native est
   masquee : il est ajoute ici pour que la pastille reste reperable au
   clavier. Il ne se peint qu'au focus clavier, jamais a la souris. */
.blog-index__case:has(.blog-index__case-input:focus-visible) {
  outline: 2px solid var(--mauve-sombre);
  outline-offset: 2px;
}

/* ------------------------------------------------------- grille d'articles */

.blog-index__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La bordure transparente de 1px fait partie de la boite au repos : elle
   reserve la place du lisere affiche au survol. */
.blog-index__carte {
  display: block;
  width: 100%;
  padding: 20px;
  border: 1px solid #0000;
  border-radius: var(--r-lg);
  text-decoration: none;
}

.blog-index__carte:hover {
  border: 0.5px solid #6f6f6f3d;
  box-shadow: 0 6px 13px 2px #0000000d;
}

/* Le visuel garde sa hauteur de 200px a toutes les largeurs : dans
   l'original, la variante de collection est plus specifique que les regles
   de point de rupture qui font varier la hauteur ailleurs. 31 articles sur
   33 n'ont pas de couverture, la boite reste alors vide et transparente. */
.blog-index__vignette {
  width: 100%;
  height: 200px;
  border-radius: var(--r-xl);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.blog-index__vignette--acquisition {
  background-image: url("../img/blog-acquisition-cover.png");
}

.blog-index__vignette--logistique {
  background-image: url("../img/blog-logistique-cover.png");
}

.blog-index__carte-titre {
  margin: 20px 0 10px;
  color: var(--ink-strong);
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.blog-index__espace-xs {
  width: 100%;
  height: 10px;
}

.blog-index__tags {
  display: flex;
  justify-content: flex-start;
}

/* Sans pastille de couleur, l'etiquette herite du bleu de lien par defaut du
   navigateur : c'est bien ce que fait l'original. Vide, elle ne pese que ses
   deux pixels de rembourrage, ce qui donne la bande de 2px sous les cartes
   sans categorie. */
.blog-index__tag {
  padding: 1px 10px;
  border-radius: 100px;
  /* Etat sans categorie : l'etiquette est vide, elle ne pese que son
     rembourrage. La couleur n'est donc jamais vue, mais le bleu de lien par
     defaut qui trainait ici etait une teinte hors palette. */
  color: var(--grey-texte);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Meme regle que sur la section blog de l'accueil : la categorie logistique
   est la voix tierce, donc mauve, et l'etiquette suit le gabarit des
   pastilles, fond clair et texte sombre. */
.blog-index__tag--logistique {
  background-color: var(--mauve-clair);
  color: var(--mauve-sombre);
}

/* ========================================================== jusqu'a 991px */

@media screen and (max-width: 991px) {
  /* Les deux colonnes s'empilent et le filtre revient dans le flux. */
  .blog-index__colonnes {
    flex-direction: column;
  }

  .blog-index__colonne-filtre,
  .blog-index__colonne-articles {
    width: 100%;
  }

  .blog-index__filtre {
    position: static;
  }
}

/* ========================================================== jusqu'a 767px */

@media screen and (max-width: 767px) {
  .blog-index__titre {
    font-size: 40px;
  }

  .blog-index__liste {
    grid-template-columns: 1fr;
  }

  .blog-index__espace-xs {
    display: none;
  }
}

/* ========================================================== jusqu'a 479px */

@media screen and (max-width: 479px) {
  /* Le titre passe en petit corps et gagne un demi-pixel de graisse au trait,
     comme le grand titre du pied de page. */
  .blog-index__titre {
    font-size: 23px;
    line-height: 1.2;
    -webkit-text-stroke-width: 0.5px;
  }
}