/* =========================================================
   ValeurÉcole — module "Études supérieures"
   Extension du même système de design (navy/or, Newsreader + Work Sans),
   pas une nouvelle identité : seul un petit repère visuel distingue ce
   module du classement collèges/lycées dans l'en-tête.
   ========================================================= */

.entete--sup .logo { align-items: baseline; gap: 8px; }
/* .logo span (style.css) met tout span enfant de .logo en couleur or-clair pour styler
   "École" — spécificité (0,1,1) plus forte que .sous-logo seul (0,1,0), donc ce badge
   héritait du texte or-clair sur un fond or-clair (texte invisible). Sélecteur composé
   .logo .sous-logo pour repasser devant sans toucher au style de "École". */
.logo .sous-logo {
  font-family: var(--font-texte);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marine);
  background: var(--or-clair);
  border-radius: 20px;
  padding: 3px 9px;
  vertical-align: middle;
}

.scroll-horizontal { overflow-x: auto; }
.cellule-promo { color: var(--gris-texte); font-size: 0.78rem; white-space: nowrap; }
.salaire-annuel { color: var(--gris-texte); font-size: 0.85rem; }

.barre-filtres { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 24px 0; }
.barre-filtres select, .barre-filtres button.onglet {
  font-family: var(--font-texte); font-size: 0.92rem; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--gris-bordure); background: var(--blanc); color: var(--encre); cursor: pointer;
}
.barre-filtres button.onglet.actif { background: var(--marine); color: var(--ivoire); border-color: var(--marine); }
.pagination { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 24px 0; }
.pagination button { font-family: var(--font-texte); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--gris-bordure); background: var(--blanc); cursor: pointer; }
.pagination button:disabled { opacity: 0.4; cursor: default; }

.filtre-etablissements-sup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.filtre-etablissements-sup label { font-weight: 600; font-size: 0.92rem; color: var(--marine); }
.filtre-etablissements-sup select {
  font-family: var(--font-texte); font-size: 0.92rem; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--gris-bordure); background: var(--blanc); color: var(--encre); cursor: pointer;
}
#etablissements-par-diplome h2 { margin-top: 36px; }

.avertissement-perimetre {
  background: var(--ivoire-fonce); border-left: 3px solid var(--or); border-radius: 6px;
  padding: 14px 18px; margin: 20px 0; font-size: 0.9rem; color: var(--gris-texte);
}

/* Annuaire par type de diplôme (/superieur/index.html) : catalogue
   cliquable des types de diplôme réellement présents dans InserSup, chaque
   entrée mène directement au classement pré-filtré sur ce diplôme — pas
   seulement une barre de recherche qu'il faut déjà savoir remplir. */
.annuaire-diplomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 28px 0; }
.annuaire-diplomes a {
  display: block; background: var(--blanc); border: 1px solid var(--gris-bordure); border-radius: var(--rayon);
  padding: 18px 20px; color: var(--encre); box-shadow: var(--ombre); transition: transform 0.15s ease, border-color 0.15s ease;
}
.annuaire-diplomes a:hover { transform: translateY(-2px); border-color: var(--or); text-decoration: none; }
.annuaire-diplomes .diplome-nom { display: block; font-family: var(--font-display); font-size: 1.08rem; color: var(--marine); margin-bottom: 4px; }
.annuaire-diplomes .diplome-sigle { font-family: var(--font-texte); font-size: 0.78rem; font-weight: 600; color: var(--gris-texte); }
.annuaire-diplomes .diplome-n { display: block; font-size: 0.82rem; color: var(--gris-texte); }

/* Formations proposées (fiche établissement), ajouté 2026-08-07 : liste
   simple, groupée par type de diplôme via des <h3>, pas une grille de
   cartes (déjà utilisée pour l'annuaire ci-dessus) — volontairement plus
   sobre, ce sont des sous-lignes d'un tableau existant, pas une nouvelle
   section de navigation. */
.liste-formations { list-style: none; padding: 0; margin: 0 0 22px; }
.liste-formations li { padding: 7px 0; border-bottom: 1px solid var(--gris-bordure); }
.liste-formations li:last-child { border-bottom: none; }
.liste-formations .meta { color: var(--gris-texte); font-size: 0.85rem; }