/* Index des archives : liste à puces des Services (home.css), une année par ligne */
.archives a { transition: color 300ms var(--ease-out); }
.archives a:hover { color: var(--ink); }
.archive-foot { margin-top: var(--s16); padding-bottom: var(--s8); }
.archive-foot .footer__legal { color: var(--tag); }
/* Sparadrap « Since 2010 » (même gabarit que celui du hero de la home), qui mord sur la fin de « Portfolio », à mi-hauteur */
.intro-title .nowrap { white-space: nowrap; }
.intro-title .sticker { display: inline-flex; vertical-align: baseline; position: relative; z-index: 1; top: var(--s2); margin-left: calc(-3 * var(--s4)); width: auto; height: auto; transform: rotate(-6deg); }
.intro-title .sticker__body { justify-content: center; padding: var(--s1) var(--s2); }
.intro-title .sticker__title { align-self: flex-start; text-box: trim-both cap alphabetic; }
.intro-title .sticker__stripes { width: calc(1cap + 2 * var(--s1)); font: 500 15px/1 var(--font-label); }
/* Colonne gauche : photo + intro de la home + bouton vers le portfolio, en haut à la hauteur du titre */
.page-intro .intro { grid-column: 1 / 5; grid-row: 1 / 3; }
.page-intro .intro-title { grid-row: 1; }
.page-intro .intro .btn { margin-top: var(--s6); }
.page-intro .archives { grid-row: 2; margin-top: var(--s6); }
/* Mobile : l'intro passe sous le titre, photo à gauche du texte */
@media (max-width: 780px) {
  .page-intro .archives { grid-row: 3; margin-top: 0; }
  .page-intro .intro { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); align-items: end; }
  .page-intro .intro .photo { display: block; }
  .page-intro .intro__text { width: auto; margin-top: 0; }
  .page-intro .intro .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) { .intro-title .nowrap { white-space: normal; } }