ul.grid-notes {
  & > li {
    position: relative;
    border-bottom: 1px solid #0001;

    opacity: 0;
    animation-name: anim_scale-in-1;
    animation-duration: 500ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    /* animation-delay: 300ms; */

    &:nth-child(1) { animation-delay: 0ms; }
    &:nth-child(2) { animation-delay: 200ms; }
    &:nth-child(3) { animation-delay: 400ms; }
    &:nth-child(4) { animation-delay: 600ms; }
    &:nth-child(5) { animation-delay: 800ms; }
    &:nth-child(6) { animation-delay: 1000ms; }

    & time { transition: color 400ms ease;}
    &:before { content: ""; position: absolute; bottom: -1px; left: 0px; width: 0; height: 1px; background-color: #1058; transition: all 300ms ease; transition-delay: 300ms; }
    &:after { content: ""; position: absolute; bottom: -2px; left: 0px; width: 0px; height: 3px; background-color: #105; transition: all 300ms ease; transition-delay: 300ms;}
    &:hover {
      &:before { width: 100%; transition-delay: 0ms;}
      &:after { left: calc(100% - 32px); width: 32px; transition-delay: 0ms;}
      & time { color: var(--color-link); }
    }
  }
}
.img svg {
  /* background-color: #1058; */
}

svg.actu-svg {
  & text {
    fill: #fff; text-transform: uppercase;
    &.svgyear { font-size: 128px; }
    &.svgvil { font-size: 32px; font-weight: 900; }
    &.svgday { font-size: 20px; }
  }
}

header.h1 h1 {
  opacity: 0;
  animation-name: anim_fromTop-96;
  animation-duration: 1500ms;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}