/* Bandeau de niveau, filtres rapides et blocs de collection. */
.tete-niveau {
  position: relative; overflow: hidden;
  background: var(--fond-niveau, var(--bleu-nuit));
  color: #fff;
  padding-block: var(--e5) var(--e6);
}
.tete-niveau::after {
  content: ""; position: absolute; left: -90px; bottom: -160px;
  width: min(340px, 75vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--bleu-vif); opacity: .32;
}
.tete-niveau > .wrap { position: relative; z-index: 1; }
.tete-niveau h1 { color: #fff; font-size: var(--t-affiche); max-width: 16ch; }
.tete-niveau p { color: rgba(255, 255, 255, .84); max-width: 54ch; font-size: 1.08rem; }
.tete-niveau .fil { color: rgba(255, 255, 255, .65); }
.tete-niveau .fil a { color: #fff; }

.tete-niveau-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e4); align-items: end;
}
@media (max-width: 880px) { .tete-niveau-grille { grid-template-columns: 1fr; } }
.pile-tete { display: flex; gap: .7rem; flex-wrap: wrap; }
.pile-tete img {
  width: clamp(72px, 11vw, 118px); aspect-ratio: 3/4; object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .55);
}
.pile-tete img:nth-child(even) { transform: translateY(-14px); }

.faits-niveau {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3); margin-top: var(--e5);
  padding-top: var(--e3); border-top: 1px solid rgba(255, 255, 255, .2);
}
.faits-niveau strong {
  display: block; font-family: var(--font-titre);
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--jaune);
}
.faits-niveau span { font-size: var(--t-mini); color: rgba(255, 255, 255, .7); }

.filtres-rapides { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e5); }
.filtre-rapide {
  font-size: var(--t-petit); font-weight: 700;
  padding: .6rem 1.1rem;
  border: 1px solid var(--ligne); border-radius: var(--r-rond);
  background: var(--blanc); color: var(--encre-douce); text-decoration: none;
  transition: all var(--transition);
}
.filtre-rapide:hover { border-color: var(--accent, var(--bleu)); color: var(--accent, var(--bleu)); }
.filtre-rapide.actif { background: var(--accent, var(--bleu)); border-color: var(--accent, var(--bleu)); color: #fff; }

.rien { color: var(--encre-tenue); font-style: italic; }

.bloc-classe { margin-bottom: var(--e6); }
.bloc-classe:last-child { margin-bottom: 0; }
.bloc-classe h3 {
  display: flex; align-items: baseline; gap: var(--e2);
  padding-bottom: var(--e2); margin-bottom: var(--e4);
  border-bottom: 2px solid var(--accent, var(--bleu));
  font-size: var(--t-h3);
}
.bloc-classe h3 span {
  font-family: var(--font-corps); font-size: var(--t-mini); font-weight: 600;
  color: var(--encre-tenue); margin-left: auto;
}

.page-secondaire { --accent: var(--niv-secondaire); }
.page-secondaire .tete-niveau { --fond-niveau: var(--bleu-nuit); }