/* ==========================================================================
   ISSTMADD — Pages secondaires
   ========================================================================== */

/* ---------- Fiche filière (page Programmes) ---------- */
.fiche-filiere {
  padding: 4rem 0;
  border-bottom: 1px solid var(--ligne);
}
.fiche-filiere:last-child { border-bottom: none; }
.fiche-entete-filiere {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  margin-bottom: 1.8rem;
}
.fiche-entete-filiere .numero-filiere {
  font-size: 1.4rem;
  color: var(--rouge);
}
.fiche-corps {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
}
.fiche-corps ul {
  margin: 0;
  padding-left: 1.2rem;
}
.fiche-corps li { margin-bottom: 0.5rem; color: var(--encre); }
.fiche-aside {
  background: var(--creme);
  padding: 1.6rem;
  border-left: 3px solid var(--bleu-institut);
}
.fiche-aside dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gris);
  margin-top: 1.1rem;
}
.fiche-aside dt:first-child { margin-top: 0; }
.fiche-aside dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
  color: var(--bleu-nuit);
}

/* ---------- Timeline admissions (chronologie horizontale) ---------- */
.etapes {
  list-style: none;
  margin: 0;
  padding: 2.2rem 0 0.5rem;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.6rem;
  position: relative;
}
.etapes::before {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(10% - 1px);
  right: calc(10% - 1px);
  height: 1px;
  background: var(--gris-clair);
  z-index: 0;
}
.etape {
  counter-increment: etape;
  position: relative;
  z-index: 1;
  padding: 0;
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.3rem;
}
.etape h3 { font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.3; }
.etape p { color: var(--gris); margin: 0; font-size: 0.87rem; line-height: 1.55; }
.etape > div:first-child { display: none; }

@media (max-width: 900px) {
  .etapes {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
  }
  .etapes::before {
    top: 0;
    bottom: 0;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .etape {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 1.3rem;
    padding: 1.6rem 0;
  }
  .etape::before { margin-bottom: 0; }
  .etape:first-child { padding-top: 0.4rem; }
}

/* ---------- Tableau frais / pièces ---------- */
.tableau-simple {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}
.tableau-simple th, .tableau-simple td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.95rem;
}
.tableau-simple th {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
  background: var(--creme);
}

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--ligne);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.4rem 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-question .signe { color: var(--rouge); font-family: var(--sans); font-size: 1.4rem; flex-shrink: 0; }
.faq-reponse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-reponse p { color: var(--gris); padding-bottom: 1.4rem; max-width: 640px; }
.faq-item.ouvert .faq-reponse { max-height: 400px; }
.faq-item.ouvert .signe { color: var(--bleu-institut); }

/* ---------- Formulaire de contact / candidature ---------- */
.champ { margin-bottom: 1.4rem; }
.champ label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  margin-bottom: 0.4rem;
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--gris-clair);
  background: var(--blanc);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--encre);
  border-radius: 2px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu-institut);
}
.champ textarea { resize: vertical; min-height: 120px; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.bloc-coordonnees {
  background: var(--bleu-nuit);
  color: rgba(247,245,240,0.85);
  padding: 2.4rem;
}
.bloc-coordonnees h3 { color: var(--creme); margin-bottom: 1.4rem; }
.bloc-coordonnees .ligne-coord {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
}
.bloc-coordonnees .ligne-coord strong {
  display: block;
  color: var(--creme);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.bloc-coordonnees a { color: rgba(247,245,240,0.85); }

/* ---------- Équipe / valeurs (À propos) ---------- */
.valeurs-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.valeur-carte {
  padding: 2rem;
  border: 1px solid var(--ligne);
  background: var(--blanc);
}
.valeur-carte .valeur-icone {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}
.valeur-carte:hover .valeur-icone { transform: scale(1.2) rotate(-6deg); }
.valeur-carte h3 { font-size: 1.1rem; margin-bottom: 0.7rem; }
.valeur-carte p { color: var(--gris); font-size: 0.92rem; margin: 0; }
.brochure-lien {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem;
  font-size: 0.82rem; font-weight: 600; color: var(--bleu-institut); text-decoration: none;
}

/* ---------- Domaines d'un programme (page Programme, détail) ---------- */
.domaine-bloc { margin-bottom: 3.5rem; }
.domaine-bloc:last-child { margin-bottom: 0; }
.domaine-banniere {
  position: relative;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  margin-bottom: 1.8rem;
}
.domaine-banniere::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11,37,69,0.88) 0%, rgba(11,37,69,0.45) 55%, rgba(11,37,69,0.15) 100%);
}
.domaine-banniere-contenu {
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.8rem;
}
.domaine-banniere .eyebrow { color: #ff8a9b; margin-bottom: 0.5rem; }
.domaine-banniere .eyebrow::before { background: #ff8a9b; }
.domaine-banniere h2 { color: var(--blanc); font-size: 1.5rem; margin: 0; }

/* ---------- Filières d'un domaine — fiches dépliables ---------- */
.filieres-liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.filiere-carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--bleu-institut);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-left-color 0.15s ease;
}
.filiere-carte[open], .filiere-carte:hover {
  box-shadow: 0 6px 20px rgba(11,37,69,.1);
  border-left-color: var(--rouge);
}
.filiere-carte summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.filiere-carte summary::-webkit-details-marker { display: none; }
.filiere-numero {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--rouge);
  flex-shrink: 0;
  width: 1.6rem;
}
.filiere-entete-texte { flex-grow: 1; min-width: 0; }
.filiere-entete-texte h3 {
  font-size: 1.08rem;
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.filiere-badge-tutelle {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bleu-institut);
  background: var(--creme);
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  font-weight: 600;
}
.filiere-teaser { color: var(--gris); font-size: 0.88rem; margin: 0; line-height: 1.5; }
.filiere-chevron {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  display: flex; align-items: center; justify-content: center;
  color: var(--bleu-institut);
  font-size: 0.9rem;
  transition: transform 0.2s ease, background 0.15s ease;
}
.filiere-carte[open] .filiere-chevron { transform: rotate(180deg); background: var(--bleu-institut); color: var(--blanc); }
.filiere-panneau {
  padding: 0 1.6rem 1.8rem;
  border-top: 1px solid var(--ligne);
  margin-top: 0.2rem;
  padding-top: 1.4rem;
}
.filiere-panneau-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
}
.filiere-section h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rouge);
  margin: 0 0 0.6rem;
}
.filiere-section p { color: var(--encre); font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.2rem; }
.filiere-section:last-child p:last-child { margin-bottom: 0; }
.filiere-carrieres { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.filiere-carrieres li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.88rem;
  color: var(--encre);
  margin-bottom: 0.55rem;
  line-height: 1.4;
}
.filiere-carrieres li::before {
  content: "→";
  position: absolute; left: 0;
  color: var(--rouge);
  font-weight: 600;
}
.filiere-panneau-pied {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--ligne);
}
.filiere-panneau .brochure-lien { margin-top: 0; }

@media (max-width: 900px) {
  .filiere-panneau-grille { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Grille des programmes (page Programmes, vue d'ensemble) ---------- */
.grille-programmes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}
.carte-programme {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  padding: 2rem;
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* Accents orange en arc de cercle, coin haut-droit / bas-gauche. */
.carte-programme::before,
.carte-programme::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  background: var(--orange);
  z-index: 1;
  pointer-events: none;
}
.carte-programme::before { top: 0; right: 0; border-radius: 0 0 0 100%; }
.carte-programme::after { bottom: 0; left: 0; border-radius: 0 100% 0 0; }
.carte-programme:hover {
  box-shadow: 0 8px 24px rgba(11,37,69,.12);
  transform: translateY(-3px);
  border-color: var(--bleu-institut);
}
.carte-programme .badge-duree {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 0.9rem;
}
.carte-programme h3 { font-size: 1.3rem; margin-bottom: 0.7rem; }
.carte-programme p.descr-programme { color: var(--gris); font-size: 0.9rem; line-height: 1.55; margin: 0; flex-grow: 1; }
.carte-programme .pied-carte-programme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ligne);
}
.carte-programme .nb-filieres { font-size: 0.78rem; color: var(--gris); }
.carte-programme .voir-filieres { font-size: 0.85rem; font-weight: 600; color: var(--bleu-institut); }
.carte-programme:hover .voir-filieres { color: var(--rouge); }
.brochure-lien:hover { color: var(--rouge); text-decoration: underline; }

.partenaires-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.carte-partenaire {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 6px;
  padding: 2rem 1.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  text-decoration: none !important; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  animation: carte-partenaire-entree 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.carte-partenaire:hover { box-shadow: 0 16px 32px rgba(11,37,69,.14); transform: translateY(-6px); border-color: var(--bleu-institut); }
.carte-partenaire img {
  height: 88px;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.carte-partenaire:hover img { transform: scale(1.06); }
@keyframes carte-partenaire-entree {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .carte-partenaire { animation: none; }
}
.carte-partenaire .nom-partenaire { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--bleu-nuit); line-height: 1.3; }
.carte-partenaire .type-partenaire { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rouge); }
.carte-partenaire .descr-partenaire { font-size: 0.82rem; color: var(--gris); line-height: 1.5; margin: 0; }

.chiffres-cles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(247,245,240,0.15);
  border: 1px solid rgba(247,245,240,0.15);
  margin-top: 3rem;
}
.chiffre-cle {
  padding: 2rem;
  text-align: center;
}
.chiffre-cle .valeur {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--creme);
  display: block;
}
.chiffre-cle .label {
  font-size: 0.8rem;
  color: rgba(247,245,240,0.65);
  margin-top: 0.3rem;
}

/* ---------- Grille actualités — cartes à image révélée au survol ---------- */
.grille-actus-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.carte-actu-visuelle {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--creme);
  box-shadow: 0 4px 18px rgba(11,37,69,.1);
  text-decoration: none !important;
  color: inherit;
}
.carte-actu-couche-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.carte-actu-couche-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-actu-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blanc);
  background: rgba(11,37,69,0.78);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  z-index: 3;
}
.carte-actu-couche-texte {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.8rem;
  background: var(--blanc);
}
.carte-actu-couche-texte .date-actu {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gris);
  margin-bottom: 0.6rem;
}
.carte-actu-couche-texte h3 { font-size: 1.05rem; line-height: 1.32; margin: 0 0 0.7rem; color: var(--bleu-nuit); }
.carte-actu-couche-texte p {
  font-size: 0.85rem;
  color: var(--gris);
  line-height: 1.5;
  margin: 0 0 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carte-actu-plus { font-size: 0.8rem; font-weight: 700; color: var(--rouge); }
.carte-actu-visuelle:hover .carte-actu-couche-image,
.carte-actu-visuelle:focus-visible .carte-actu-couche-image {
  transform: translateY(-100%);
  opacity: 0;
}

@media (max-width: 900px) {
  .grille-actus-images { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grille-actus-images { grid-template-columns: 1fr; }
  .carte-actu-visuelle { aspect-ratio: 3 / 2; }
}

/* ---------- Page détail d'une actualité ---------- */
.article-corps p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--encre);
  margin: 0 0 1.4rem;
}
.article-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.article-galerie img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-galerie img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(11,37,69,.16);
}

.mot-promoteur {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.75rem;
  align-items: center;
  margin-top: 3.25rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--ligne);
}
.mot-promoteur-photo img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(11,37,69,.18);
  display: block;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mot-promoteur-photo img:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(11,37,69,.24);
}
.mot-promoteur-texte {
  position: relative;
}
.mot-promoteur-guillemet {
  position: absolute;
  top: -2.6rem;
  left: -0.4rem;
  font-family: var(--serif);
  font-size: 5.5rem;
  color: var(--rouge);
  opacity: 0.22;
  line-height: 1;
  pointer-events: none;
}
.mot-promoteur-texte .eyebrow { margin-bottom: 0.6rem; }
.mot-promoteur-texte p {
  line-height: 1.75;
  color: var(--encre);
  margin: 0 0 1rem;
}
.mot-promoteur-signature {
  margin-top: 1.4rem !important;
  font-weight: 600;
  color: var(--bleu-nuit);
}
.mot-promoteur-signature span {
  display: block;
  font-weight: 500;
  color: var(--rouge);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}

.activites-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-top: 0.5rem;
}
.activite-carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.activite-carte:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(11, 37, 69, 0.14);
}
.activite-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--creme);
}
.activite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.activite-carte:hover .activite-image img { transform: scale(1.07); }
.activite-icone {
  position: absolute;
  bottom: -18px;
  left: 1.25rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(11, 37, 69, 0.22);
}
.activite-contenu {
  padding: 1.9rem 1.25rem 1.25rem;
}
.activite-contenu h3 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  line-height: 1.3;
}
.activite-contenu p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--gris);
  line-height: 1.6;
}
.sous-titre-groupe {
  margin: 3.5rem 0 0.5rem;
  font-size: var(--taille-h3);
}
#clubs .sous-titre-groupe {
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
}

@media (max-width: 900px) {
  .fiche-corps { grid-template-columns: 1fr; }
  .grille-champs { grid-template-columns: 1fr; }
  .valeurs-grille { grid-template-columns: 1fr; }
  .chiffres-cles { grid-template-columns: repeat(2, 1fr); }
  .domaine-banniere { height: 150px; }
  .domaine-banniere h2 { font-size: 1.25rem; }
  .mot-promoteur { grid-template-columns: 1fr; }
  .mot-promoteur-photo img { max-width: 220px; margin: 0 auto; }
  .mot-promoteur-guillemet { display: none; }
  .activites-grille { grid-template-columns: 1fr; }
}

/* CTA final — bandeau rouge de fin de page (programme, admissions, actualités, à propos, accueil) */
.cta-finale {
  background: var(--rouge);
  color: var(--blanc);
  padding: 4rem 0;
  text-align: center;
}
.cta-finale h2 { color: var(--blanc); max-width: 700px; margin: 0 auto; }
.cta-finale p { color: rgba(255, 255, 255, 0.85); margin: 1rem auto 2rem; max-width: 520px; }
.cta-finale .bouton-contour-clair { border-color: rgba(255, 255, 255, 0.6); }

/* Pages programme — profils complets (façon Polytechnique) */
.texte-large {
  font-size: 1.08rem;
  line-height: 1.8;
  max-width: 72ch;
  margin: 0;
}

.apercu-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.apercu-carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.apercu-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
}
.apercu-valeur {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bleu-nuit);
  line-height: 1.4;
}

.points-forts-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.carte-point-fort {
  background: var(--creme);
  border-radius: 8px;
  padding: 1.6rem 1.5rem;
  border-left: 3px solid var(--rouge);
}
.carte-point-fort h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--bleu-nuit); }
.carte-point-fort p { margin: 0; font-size: 0.9rem; color: var(--gris); line-height: 1.6; }

.curriculum-chronologie {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
}
.curriculum-etape {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(247, 245, 240, 0.14);
}
.curriculum-etape:first-child { border-top: none; padding-top: 0; }
.curriculum-annee {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--creme);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.curriculum-contenu h3 {
  font-size: 1.1rem;
  color: var(--creme);
  margin: 0 0 0.75rem;
}
.curriculum-contenu ul {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.curriculum-contenu li {
  color: rgba(247, 245, 240, 0.82);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 700px) {
  .curriculum-etape { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Galerie en accordéon — les photos se déplient au survol (ou au clic sur
   tactile, via les radios cachées), inspiré de la galerie du site de l'IUC. */
.galerie-accordeon {
  display: flex;
  overflow: hidden;
  position: relative;
  height: 460px;
  border-radius: 8px;
}
.galerie-accordeon input[type="radio"] { display: none; }
.galerie-item {
  flex: 1 1 0%;
  margin: 0 1px;
  min-height: 460px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  transition: flex 0.4s ease;
}
.galerie-item::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(11, 37, 69, 0.88) 0%, rgba(11, 37, 69, 0) 60%);
  transition: 0.5s ease;
  opacity: 0;
}
.galerie-accordeon input[type="radio"]:checked + .galerie-item,
.galerie-item:hover {
  flex: 3 1 0%;
}
.galerie-accordeon input[type="radio"]:checked + .galerie-item::before,
.galerie-item:hover::before {
  top: 0;
  opacity: 1;
}
.galerie-contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.3rem;
}
.galerie-titre {
  position: relative;
  top: 40px;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
  color: var(--blanc);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  display: block;
}
.galerie-accordeon input[type="radio"]:checked + .galerie-item .galerie-titre,
.galerie-item:hover .galerie-titre {
  top: 0;
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .galerie-accordeon { flex-wrap: wrap; height: auto; }
  .galerie-accordeon .galerie-item { min-height: 220px; flex: 1 1 45%; }
  .galerie-accordeon .galerie-item .galerie-titre { top: 0; opacity: 1; visibility: visible; position: static; }
}

/* Grille complète de la galerie — le reste des photos, en mosaïque avec
   zoom léger et légende au survol. */
.galerie-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.galerie-grille-item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--blanc);
  cursor: zoom-in;
  text-decoration: none !important;
}
.galerie-grille-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.galerie-grille-item:hover img { transform: scale(1.08); }
.galerie-grille-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(0deg, rgba(11, 37, 69, 0.85) 0%, rgba(11, 37, 69, 0) 100%);
  color: var(--blanc);
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.3s ease;
}
.galerie-grille-item:hover .galerie-grille-legende {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 640px) {
  .galerie-grille { grid-template-columns: repeat(2, 1fr); }
  .galerie-grille-legende { opacity: 1; transform: translateY(0); }
}

/* Clubs & associations — grille d'hexagones façon nid d'abeille.
   Géométrie : hexagone "pointe en haut/bas" via clip-path (+ -webkit-clip-path
   pour Safari). Trois rangées fixes (3 / 4 / 3) : la rangée du milieu, plus
   large d'un hexagone, reste centrée dans la colonne flex, ce qui produit
   naturellement le décalage d'un demi-hexagone par rapport aux rangées 1 et
   3 — pas besoin de marge manuelle. Le chevauchement vertical vient d'une
   marge négative entre rangées (~25% de la hauteur d'un hexagone). */
.clubs-hexagones {
  --hex-w: 210px;
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-gap: 14px;
  --hex-ring: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.club-hexagones-ligne {
  display: flex;
  justify-content: center;
  gap: var(--hex-gap);
}
.club-hexagones-ligne + .club-hexagones-ligne {
  margin-top: calc(var(--hex-h) * -0.25);
}
.club-hexagone {
  display: block;
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  text-decoration: none !important;
}
/* Contour "ghost border" : hexagone légèrement plus grand que la cellule,
   dessiné comme un simple TRAIT (SVG polygon fill:none/stroke), avec un
   dégradé doré qui s'estompe en tournant autour de la forme — pas un trait
   plein, pas un glow classique. Un vrai trait (SVG) est déjà "creux" : rien
   n'est peint en dehors du contour lui-même, donc on peut le poser en
   pseudo-élément SUR .club-hexagone (pas sur .club-hexagone-inner, qui a son
   propre clip-path et forme donc un contexte d'empilement isolé) avec un
   z-index élevé qui compare bien au niveau global entre toutes les cellules :
   il reste visible même quand une cellule voisine chevauche la sienne.
   (border-image classique écarté : il ne suit pas un clip-path hexagonal, il
   reste rectangulaire.) */
.club-hexagone::before {
  content: "";
  position: absolute;
  inset: calc(var(--hex-ring) * -1);
  z-index: 3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20123.47%22%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.95%22/%3E%3Cstop%20offset%3D%2232%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.12%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.08%22/%3E%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.65%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.9%22/%3E%3C/linearGradient%3E%3C/defs%3E%20%3Cpolygon%20points%3D%2250%2C0%20100%2C28.87%20100%2C86.6%2050%2C115.47%200%2C86.6%200%2C28.87%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%223.2%22/%3E%20%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease;
}
.club-hexagone:hover::before,
.club-hexagone:focus::before,
.club-hexagone:focus-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-4%20-4%20108%20123.47%22%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%221%22/%3E%3Cstop%20offset%3D%2232%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.3%22/%3E%3Cstop%20offset%3D%2255%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.2%22/%3E%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%220.85%22/%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23D4AF37%22%20stop-opacity%3D%221%22/%3E%3C/linearGradient%3E%3C/defs%3E%20%3Cpolygon%20points%3D%2250%2C0%20100%2C28.87%20100%2C86.6%2050%2C115.47%200%2C86.6%200%2C28.87%22%20fill%3D%22none%22%20stroke%3D%22url%28%23g%29%22%20stroke-width%3D%224%22/%3E%20%3C/svg%3E");
}
.club-hexagone-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--blanc);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}
.club-hexagone-inner img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  padding: 5%;
}
.club-hexagone-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 37, 69, 0.82);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.club-hexagone:hover .club-hexagone-overlay,
.club-hexagone:focus .club-hexagone-overlay,
.club-hexagone:focus-visible .club-hexagone-overlay,
.club-hexagone.revele .club-hexagone-overlay {
  opacity: 1;
  transform: scale(1);
}
.club-hexagone-voir-plus {
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--blanc);
  border-radius: 999px;
}
.club-hexagone:focus { outline: none; }

@media (max-width: 900px) {
  /* Rangées un peu plus étroites, mais l'imbrication en nid d'abeille
     (décalage + chevauchement) reste lisible jusqu'à la tablette. */
  .clubs-hexagones { --hex-w: 150px; --hex-gap: 10px; --hex-ring: 5px; }
}

@media (max-width: 640px) {
  /* Sous 640px, le chevauchement en nid d'abeille devient illisible :
     on bascule sur une grille simple, sans décalage ni marge négative.
     .club-hexagones-ligne perd sa boîte (display: contents) pour que
     ses hexagones rejoignent le flux du conteneur parent. */
  .clubs-hexagones {
    --hex-w: 38vw;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--hex-gap);
    max-width: calc(var(--hex-w) * 2 + var(--hex-gap) * 3);
  }
  .club-hexagones-ligne {
    display: contents;
  }
}

/* Page de détail d'un club (club-detail.html) */
.club-detail-entete {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 0.5rem;
}
.club-detail-logo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--blanc);
  padding: 0.5rem;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.club-missions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.club-missions li {
  position: relative;
  padding: 1rem 1.25rem 1rem 2.5rem;
  background: var(--creme);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--encre);
}
.club-missions li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: var(--rouge);
  font-weight: 700;
}
.club-activites-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.club-activite-carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 10px;
  overflow: hidden;
}
.club-activite-image {
  aspect-ratio: 16 / 10;
  background: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
}
.club-activite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.club-activite-placeholder {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gris-clair);
}
.club-activite-contenu { padding: 1.4rem 1.5rem; }
.club-activite-contenu h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--bleu-nuit); }
.club-activite-contenu p { margin: 0; font-size: 0.9rem; color: var(--gris); line-height: 1.6; }

@media (max-width: 560px) {
  .club-detail-entete { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .club-detail-logo { width: 88px; height: 88px; }
}

/* --------------------------------------------------------------------------
   Héros des pages intérieures — photo en fond, dégradé bleu marine par-dessus
   (opaque côté texte à gauche, plus transparent vers la droite pour laisser
   apparaître la photo). .entete-page::before (ligne diagonale) et le contenu
   de .conteneur restent visibles au-dessus.

   Chaque page a sa PROPRE classe (.hero-admissions, .hero-programmes, etc.) :
   le fond (dégradé + image) ne vit que dans la classe de cette page, jamais
   dans .entete-page lui-même — modifier le héros d'une page ne peut donc
   plus affecter les autres. Le dégradé (--hero-degrade / --hero-degrade-mobile,
   définis sur .entete-page dans main.css) est partagé pour garder la même
   identité visuelle partout.
   -------------------------------------------------------------------------- */
.hero-admissions,
.hero-programmes,
.hero-actualites,
.hero-a-propos,
.hero-contact {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bleu-nuit);
}
.hero-admissions .conteneur,
.hero-programmes .conteneur,
.hero-actualites .conteneur,
.hero-a-propos .conteneur,
.hero-contact .conteneur { position: relative; z-index: 2; }
.hero-admissions::before,
.hero-programmes::before,
.hero-actualites::before,
.hero-a-propos::before,
.hero-contact::before { z-index: 1; }

/* Admissions — image en place (1536×1024, ratio 1.5:1). Même logique que
   Programmes/Actualités ci-dessous : plancher de hauteur qui suit la
   largeur de l'écran pour limiter le recadrage en cover. */
.hero-admissions {
  background-image: var(--hero-degrade), url('/assets/img/admissions-hero.jpg');
  min-height: clamp(360px, 53vw, 620px);
}

/* Programmes, Actualités, À propos, Contact — image pas encore fournie :
   le dégradé seul est actif (aucun changement visuel tant qu'il n'y a pas
   de second calque image, le fond reste bleu marine uni comme avant).
   Quand l'image sera fournie, remplacer CHEMIN_IMAGE_XXX ci-dessous et
   ajouter le calque url(...) après var(--hero-degrade) — aucune autre
   modification CSS n'est nécessaire. */
.hero-programmes {
  background-image: var(--hero-degrade), url('/assets/img/programmes-hero.jpg');
  background-position: center 25%;
  /* Image large (1774×887, ratio 2:1) mais nettement plus large que le
     bandeau lui-même : on augmente le plancher de hauteur (au lieu du
     ~300px habituel) pour qu'elle soit visible presque en entier plutôt
     que sévèrement rognée en haut/bas. Le plancher suit la largeur de
     l'écran (clamp en vw) puisque le recadrage en cover dépend de la
     largeur, pas de la hauteur de la fenêtre. */
  min-height: clamp(380px, 40vw, 560px);
}
.hero-actualites {
  background-image: var(--hero-degrade), url('/assets/img/actualites-hero.jpg');
  /* Image au format large (1774×887, ratio 2:1) : ajustement vers le haut
     pour garder le visage et le journal "Actualités" bien dans le cadre,
     plus un plancher de hauteur (même logique que Programmes) pour que
     l'image ne soit pas sévèrement rognée. */
  background-position: center 38%;
  min-height: clamp(380px, 40vw, 560px);
}
.hero-a-propos {
  /* Image large (1711×919, ratio ~1.86:1) : même logique que Programmes/
     Actualités — plancher de hauteur qui suit la largeur de l'écran pour
     limiter le recadrage en cover. */
  background-image: var(--hero-degrade), url('/assets/img/a-propos-hero.jpg');
  background-position: center 30%;
  min-height: clamp(380px, 40vw, 560px);
}
.hero-contact {
  background-image: var(--hero-degrade);
  /* background-image: var(--hero-degrade), url('CHEMIN_IMAGE_CONTACT'); */
}

@media (max-width: 640px) {
  .hero-admissions,
  .hero-programmes,
  .hero-actualites,
  .hero-a-propos,
  .hero-contact {
    background-position: center 30%;
  }
  .hero-admissions {
    background-image: var(--hero-degrade-mobile), url('/assets/img/admissions-hero.jpg');
    min-height: clamp(320px, 66vw, 480px);
  }
  .hero-programmes {
    background-image: var(--hero-degrade-mobile), url('/assets/img/programmes-hero.jpg');
    background-position: center 22%;
    min-height: clamp(300px, 55vw, 420px);
  }
  .hero-actualites {
    background-image: var(--hero-degrade-mobile), url('/assets/img/actualites-hero.jpg');
    background-position: center 32%;
    min-height: clamp(300px, 55vw, 420px);
  }
  .hero-a-propos {
    background-image: var(--hero-degrade-mobile), url('/assets/img/a-propos-hero.jpg');
    background-position: center 26%;
    min-height: clamp(300px, 55vw, 420px);
  }
  .hero-contact {
    background-image: var(--hero-degrade-mobile);
    /* background-image: var(--hero-degrade-mobile), url('CHEMIN_IMAGE_CONTACT'); */
  }
}

/* --------------------------------------------------------------------------
   Catalogue de toutes les filières (toutes-les-filieres.html) — filtres par
   cycle/domaine + grille de cartes remplie par JS (voir js/main.js,
   "catalogueFilieresGrille") à partir de /api/meta. Structure de carte
   identique à .carte-filiere-carousel (accueil.css), dupliquée ici car
   cette page ne charge pas accueil.css, avec un habillage orange propre
   au catalogue (coins + survol) pour la distinguer des cartes du carousel
   d'accueil.
   -------------------------------------------------------------------------- */
.catalogue-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--ligne);
}
.catalogue-filtre-champ { display: flex; flex-direction: column; gap: 0.4rem; }
.catalogue-filtre-champ label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
}
.catalogue-filtre-champ select {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--encre);
  padding: 0.6rem 2rem 0.6rem 0.9rem;
  border: 1px solid var(--gris-clair);
  border-radius: 3px;
  background: var(--blanc);
  min-width: 220px;
  cursor: pointer;
}
.catalogue-reset {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bleu-institut);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.catalogue-compteur {
  margin-left: auto;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--gris);
}
.catalogue-filieres-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.4rem;
}
.catalogue-chargement, .catalogue-vide {
  color: var(--gris);
  font-size: 0.95rem;
  grid-column: 1 / -1;
  padding: 2rem 0;
}

/* Cartes sans image (plus compactes) — voir catalogue-filieres-grille pour
   la taille des colonnes. */
.carte-filiere-catalogue {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.carte-filiere-catalogue:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(11, 37, 69, 0.12);
  border-color: var(--orange);
}
.carte-filiere-catalogue .carte-filiere-contenu {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.3rem 1.4rem;
  flex-grow: 1;
}
.carte-filiere-catalogue .numero-filiere {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gris);
  margin-bottom: 0.5rem;
}
.carte-filiere-catalogue .meta-filiere {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-fonce);
  background: rgba(230, 126, 34, 0.12);
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  margin-bottom: 0.7rem;
  order: -1;
}
.carte-filiere-catalogue h3.nom-filiere {
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--bleu-nuit);
  margin: 0 0 0.4rem;
}
.carte-filiere-catalogue .descr {
  color: var(--gris);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

/* Accents orange en arc de cercle, coin haut-droit / bas-gauche (même
   traitement que .carte-programme sur programmes.html). */
.carte-filiere-catalogue::before,
.carte-filiere-catalogue::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  pointer-events: none;
  background: var(--orange);
}
.carte-filiere-catalogue::before { top: 0; right: 0; border-radius: 0 0 0 100%; }
.carte-filiere-catalogue::after { bottom: 0; left: 0; border-radius: 0 100% 0 0; }

/* Survol : voile dégradé orange + "Consulter". La carte entière reste le
   lien (comme .carte-filiere-carousel) — "Consulter" est un repère visuel,
   cliquer n'importe où sur la carte ouvre la filière. */
.carte-filiere-catalogue-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(230, 126, 34, 0.95), rgba(198, 102, 15, 0.92));
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.carte-filiere-catalogue:hover .carte-filiere-catalogue-overlay,
.carte-filiere-catalogue:focus-visible .carte-filiere-catalogue-overlay {
  opacity: 1;
  transform: scale(1);
}
.carte-filiere-catalogue-overlay-nom {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blanc);
}
.carte-filiere-catalogue-consulter {
  color: var(--blanc);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.4rem;
  border: 1.5px solid var(--blanc);
  border-radius: 999px;
}

@media (max-width: 640px) {
  .catalogue-filtres { flex-direction: column; align-items: stretch; }
  .catalogue-compteur { margin-left: 0; }
  .catalogue-filtre-champ select { min-width: 0; width: 100%; }
}