.medias {
  container: medias / inline-size;
}

.medias__rubrique + .medias__rubrique {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #d5deeb;
}

@container medias (max-width: 579px) {
  .medias__entete-videos {
    flex-wrap: wrap;
  }

  .medias__toutes {
    flex-basis: 100%;
  }
}

.albums {
  --entiers: 1;
  grid-auto-columns: min(304px, calc((100cqw - var(--entiers) * var(--ecart)) / (var(--entiers) + 0.25)));
}

@container defileur (min-width: 480px) {
  .albums { --entiers: 2; }
}

@container defileur (min-width: 624px) {
  .albums[data-nombre="2"] { grid-auto-columns: calc((100cqw - var(--ecart)) / 2); }
}

@container defileur (min-width: 944px) {
  .albums[data-nombre="3"] { grid-auto-columns: calc((100cqw - 2 * var(--ecart)) / 3); }
}

.album-carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 2px solid #174195;
  border-radius: 10px;
  background-color: #ffffff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.25s ease;
}

.album-carte__visuel {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: #e8eef7;
}

.album-carte__visuel img,
.album__cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.album-carte__texte {
  display: grid;
  gap: 4px;
  padding: 14px 16px 18px;
}

.album-carte__titre {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.3;
  color: #174195;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.album-carte__nombre {
  font-size: 0.875em;
  font-weight: 700;
  color: #5b7a00;
}

.album-carte__resume {
  margin-top: 4px;
  font-size: 0.9375em;
  line-height: 1.5;
  color: #3b4351;
}

.album-carte:hover,
.album-carte:focus-visible {
  border-color: #7da600;
}

.album-carte:hover img,
.album-carte:focus-visible img,
.album__photo:hover img,
.album__photo:focus-visible img {
  transform: scale(1.06);
}

.album-carte:hover .album-carte__titre,
.album-carte:focus-visible .album-carte__titre {
  text-decoration-color: currentColor;
}

.album-carte:focus-visible {
  outline: 3px solid #174195;
  outline-offset: 3px;
}

.album__nombre {
  font-size: 0.68em;
  font-weight: 400;
  color: #5b7a00;
}

.album__photos {
  --entiers: 1;
  grid-auto-columns: min(200px, calc((100cqw - var(--entiers) * var(--ecart)) / (var(--entiers) + 0.5)));
}

@container defileur (min-width: 480px) {
  .album__photos { --entiers: 2; }
}

@container defileur (min-width: 660px) {
  .album__photos { --entiers: 3; }
}

@container defileur (min-width: 840px) {
  .album__photos { --entiers: 4; }
}

.album__photo {
  display: block;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.album__cadre {
  --voile-icone: var(--icone-loupe);
  --voile-taille: 44px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background-color: #e8eef7;
}

.album__legende {
  display: block;
  margin-top: 6px;
  font-size: 0.8125em;
  line-height: 1.4;
  color: #3b4351;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.album__photo:hover .album__legende,
.album__photo:focus-visible .album__legende {
  color: #174195;
  text-decoration-color: currentColor;
}

.album__photo:focus-visible {
  outline: 3px solid #174195;
  outline-offset: 3px;
}