/* ==========================================================================
   EPN — Pages de niveau et collections
   ========================================================================== */

/* --- Bandeau de niveau ---------------------------------------------------- */
.tete-niveau {
  background: var(--fond-niveau, var(--bleu-nuit));
  color: #fff;
  padding-block: var(--e5) var(--e6);
  position: relative;
  overflow: hidden;
}
.tete-niveau h1 { color: #fff; }
.tete-niveau p { color: rgba(255, 255, 255, .82); max-width: 54ch; }
.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; } }
.tete-niveau .pile-tete { display: flex; gap: .7rem; }
.tete-niveau .pile-tete img {
  width: clamp(72px, 11vw, 118px); aspect-ratio: 3/4; object-fit: cover;
  border-radius: 2px 7px 7px 2px;
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, .6);
}
.tete-niveau .pile-tete img:nth-child(even) { transform: translateY(-14px); }

/* --- Repères pédagogiques ------------------------------------------------- */
.faits-niveau {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e3);
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.faits-niveau div strong {
  display: block; font-family: var(--titre); font-size: 1.5rem; font-weight: 600;
}
.faits-niveau div span { font-size: var(--t-mini); color: rgba(255, 255, 255, .68); }

/* --- Filtres rapides par matière / classe -------------------------------- */
.filtres-rapides { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e4); }
.filtre-rapide {
  appearance: none; font: inherit; font-size: var(--t-petit); font-weight: 600;
  padding: .55rem 1rem;
  border: 1px solid var(--papier-bord);
  border-radius: 100px;
  background: var(--blanc);
  color: var(--encre-douce);
  cursor: pointer;
  transition: all var(--transition);
}
.filtre-rapide:hover { border-color: var(--accent, var(--bleu)); color: var(--accent, var(--bleu)); }
.filtre-rapide[aria-pressed="true"] {
  background: var(--accent, var(--bleu));
  border-color: var(--accent, var(--bleu));
  color: #fff;
}

/* --- Sous-sections d'une collection --------------------------------------- */
.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: .3rem; }
.bloc-collection-tete .marqueur {
  font-size: var(--t-mini); font-weight: 700; color: var(--accent, var(--bleu));
  margin-bottom: .5rem;
}
.bloc-collection-tete p { color: var(--encre-douce); margin: 0 0 .9rem; }
.bloc-collection-tete p:last-child { margin-bottom: 0; }

/* --- Préscolaire : palette plus lumineuse, formes plus rondes ------------- */
.page-prescolaire { --accent: var(--niv-prescolaire); }
.page-prescolaire .tete-niveau { --fond-niveau: #7A3A0C; }
.page-prescolaire .tete-niveau::after {
  content: "";
  position: absolute; left: -90px; bottom: -140px;
  width: 340px; height: 340px; border-radius: 50%;
  background: rgba(240, 180, 90, .18);
}
.page-prescolaire .section-creuse { background: #FDF3E6; }
.page-prescolaire .livre-visuel { border-radius: 14px; }
.page-prescolaire .carte-niveau { border-radius: 18px; }
.bande-eveil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3);
}
.bulle-eveil {
  background: var(--blanc);
  border: 1px solid #F1DEC2;
  border-radius: 18px;
  padding: var(--e3);
}
.bulle-eveil .numero {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #FBE3C2; color: #7A3A0C;
  font-weight: 700; font-size: .95rem;
  margin-bottom: var(--e2);
}
.bulle-eveil h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.bulle-eveil p { font-size: var(--t-petit); color: var(--encre-douce); margin: 0; }

/* --- Fondamental / Secondaire -------------------------------------------- */
.page-fondamental { --accent: var(--niv-fondamental); }
.page-fondamental .tete-niveau { --fond-niveau: var(--bleu-nuit); }
.page-secondaire { --accent: var(--niv-secondaire); }
.page-secondaire .tete-niveau { --fond-niveau: #0B3F38; }

/* --- Grille des collections ---------------------------------------------- */
.grille-collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e3);
}
.carte-collection {
  display: flex; flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--papier-bord);
  border-radius: var(--r-moyen);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-collection:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.carte-collection-haut {
  padding: var(--e3);
  background: var(--papier-creux);
  border-bottom: 3px solid var(--accent, var(--bleu));
  min-height: 132px;
  display: flex; align-items: flex-end;
}
.carte-collection-haut .dos {
  display: flex; gap: 4px; align-items: flex-end; height: 100%;
}
.carte-collection-haut .dos i {
  display: block; width: 9px; border-radius: 2px;
  background: var(--accent, var(--bleu));
  opacity: .85;
}
.carte-collection-corps { padding: var(--e3); flex: 1; display: flex; flex-direction: column; }
.carte-collection-corps h3 { margin-bottom: .45rem; }
.carte-collection-corps p { font-size: var(--t-petit); color: var(--encre-douce); flex: 1; }
.carte-collection-pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  margin-top: var(--e3);
  font-size: var(--t-mini);
  color: var(--encre-tenue);
}
.collection-vide { font-style: italic; }