/* ░▒▓ TRAVAUX.CSS - Styles spécifiques à la liste des articles ▓▒░ */
/*
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RÈGLES DE BASE (mobile first) ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Arrière-plan */
/* ▒▒▒▒▒▒▒▒▒▒▒▒ */
#lines .l1,
#lines .l2,
#lines .l3,
#lines .l4,
#lines .l5,
#lines .l6,
#lines .l7,
#lines .l8 {
  transform: translate(0, 0);
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Contenu principal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
main .LContentWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ▒▒▒▒▒▒▒▒▒ */
/* Résultats */
/* ▒▒▒▒▒▒▒▒▒ */
#results ol {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex-wrap: wrap;
  gap: var(--LFontSize);
  width: 100%;
  max-width: clamp(720px, 50vw ,100%);
  margin-top: var(--XXLFontSize);
}

.entry {
  flex: 0 0 100%;
  aspect-ratio: 1/1;
  position: relative;
  max-height: 18rem;
  background: var(--colorLight);
  border: 0.5rem solid var(--colorDark);
  overflow: hidden;
}

.entry article {
  height: 100%;
}

.entry img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry:hover img,
.entry:focus img {
  opacity: 0.1;
  filter: grayscale();
}

.entry .excerpt {
  position: absolute;
  top: 100%;
}

.entry .h1Container {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin: 0 var(--LFontSize) var(--LFontSize) var(--LFontSize);
  text-align: left;
  font-size: var(--LFontSize);
}

.entry h1 {
  display: inline;
  padding: 0 0.5em;
  background-color: var(--colorLight);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-size: var(--LFontSize);
}

.entry blockquote {
  max-height: 6rem;
  margin: 0 var(--LFontSize) 1rem var(--LFontSize);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entry a {
  color: var(--colorLight);
  background: var(--colorDark);
  margin-bottom: -0.5rem;
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ RESPONSIVE ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Mobile horizontal */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (orientation: landscape) {

  /* ▒▒▒▒▒▒▒▒▒ */
  /* Résultats */
  /* ▒▒▒▒▒▒▒▒▒ */
  .entry {
    max-height: calc(100vh - var(--LFontSize) * 2);
  }
}

/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
/* Tablette verticale */
/* ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ */
@media screen and (min-width: 800px) and (min-height: 480px) {

  /* ▒▒▒▒▒▒▒▒▒ */
  /* Résultats */
  /* ▒▒▒▒▒▒▒▒▒ */
  .entry {
    flex: 0 0 calc(50% - var(--LFontSize) / 2 - 0.1px);
  }
}

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓ ANIMATIONS ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/*
/* ▒▒▒▒▒▒▒▒▒ */
/* Résultats */
/* ▒▒▒▒▒▒▒▒▒ */
.entry img {
  transition-property: opacity, filter;
  transition-duration: 0.25s, 0.25s;
  transition-delay: 0.125s;
}

.entry:hover img,
.entry:focus img {
  transition-delay: 0s;
}

.entry .excerpt {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: transform 0.25s ease-in;
}

.entry:hover .excerpt,
.entry:focus .excerpt {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.entry:hover h1,
.entry:focus h1 {
  color: var(--colorLight);
  background: var(--colorDark);
}

.entry .excerpt .description {
  opacity: 0;
  transition: opacity 0.25s ease-in;
}

.entry:hover .excerpt .description,
.entry:focus .excerpt .description {
  opacity: 1;
}