.page-tete__titre { max-width: none; font-size: var(--t-titre); }

#ils-parlent-de-nous { padding-bottom: clamp(3.4rem, 6.4vw, 6rem); }


.articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin: clamp(1.8rem, 3.4vw, 2.8rem) 0 0;
  padding: 0;
  list-style: none;
}

.article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: var(--blanc);
  box-shadow: 0 10px 30px rgba(56, 54, 72, .14);
  color: var(--texte);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.article:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(56, 54, 72, .24); }

.article__visuel { position: relative; }

.article__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--violace);
}

.article__logo {
  position: absolute;
  right: clamp(.55rem, 1vw, .75rem);
  bottom: clamp(.55rem, 1vw, .75rem);
  width: auto;
  height: clamp(30px, 2.5vw, 36px);
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(56, 54, 72, .28);
}

.article--video .article__visuel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6.5v11l9-5.5z' fill='%23383648'/></svg>") center / 1.6rem no-repeat,
    rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(56, 54, 72, .3);
}

.article__dit {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: clamp(.9rem, 1.6vw, 1.15rem) clamp(1rem, 1.8vw, 1.3rem) clamp(1.1rem, 1.9vw, 1.4rem);
}

.article__source {
  margin: 0;
  color: var(--violet-sombre);
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.35;
}

.article__date { font-weight: 400; color: var(--texte); white-space: nowrap; }

.article .article__titre {
  margin: 0;
  color: var(--violet-sombre);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: normal;
}

.article .article__lien { color: inherit; text-decoration: none; }

.article__lien::after { content: ""; position: absolute; inset: 0; }

.article__lien:focus-visible { outline: none; }
.article:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .article { transition: none; }
  .article:hover { transform: none; }
}