/* 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;
}

/* --- Propre au préscolaire : formes plus rondes, gamme identique ------- */
/* Le préscolaire garde un registre plus doux, mais dans la gamme bleue : le
   grand aplat terre cuite d'avant faisait de cette page une exception
   chromatique. La couleur du niveau ne subsiste que sur les tranches et les
   petits repères, où elle porte une information. */
.page-prescolaire { --accent: var(--niv-prescolaire); }
.page-prescolaire .tete-niveau { --fond-niveau: var(--bleu-nuit); }
.page-prescolaire .section-creuse { background: var(--bleu-voile); }
.page-prescolaire .livre-visuel { border-radius: 20px; }

.bande-eveil { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.bulle-eveil {
  background: var(--blanc); border: 1px solid #D3DEF2;
  border-radius: 24px; padding: var(--e4) var(--e3);
}
.bulle-eveil .numero {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--jaune); color: var(--encre);
  font-family: var(--font-titre); font-weight: 800; font-size: 1.1rem;
  margin-bottom: var(--e3);
}
.bulle-eveil h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.bulle-eveil p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

/* Blocs de collection, partagés avec la page collections. */
.bloc-collection { margin-bottom: var(--e6); }
.bloc-collection:last-child { margin-bottom: 0; }
.bloc-collection-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--e4); align-items: start;
  margin-bottom: var(--e4); padding-bottom: var(--e3);
  border-bottom: 2px solid var(--accent, var(--bleu));
}
@media (max-width: 820px) { .bloc-collection-tete { grid-template-columns: 1fr; gap: var(--e2); } }
.bloc-collection-tete h2 { margin-bottom: 0; }
.bloc-collection-tete p { color: var(--encre-douce); margin: 0 0 .9rem; }
.bloc-collection-tete p:last-child { margin-bottom: 0; }
.marqueur {
  display: inline-block;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, var(--bleu)); margin-bottom: .5rem;
}
.grand-texte { font-size: 1.15rem; line-height: 1.75; color: var(--encre-douce); }