/* Le front office public.
   Reprend le langage de la maquette Figma « Consultation » (page Livraison
   V1.0, parcours intervenant) : bandeau, fil d'Ariane, titre, puis des
   panneaux blancs a en-tete icone + titre, dans une colonne principale de
   784 px et une colonne laterale de 400 px.
   Tous les valeurs viennent des jetons du design system — aucune couleur,
   aucun espacement ni aucun rayon n'est ecrit en dur. */

.front {
  /* Le rouge de la marque, pris au jeton du design system. Le 500 (#e6142d)
     sert aux aplats et aux traits ; le 600 au texte, ou il passe 7:1 sur
     blanc la ou le 500 s'arrete a 4,2:1. */
  --accent: var(--color-brand-primary, #e6142d);
  --accent-texte: var(--general-text-primary-dark, #b81024);
  --accent-fond: var(--color-red-050, #fde8ea);
  --front-max: 1200px;
  --front-principal: 784px;
  --front-lateral: 400px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-grey-025, #fafafa);
  font-family: var(--sp-font-sans);
  color: var(--general-text-secondary);
}

/* ------------------------------- bandeau -------------------------------- */

/* L'en-tete reprend la coupe de sciencespo.fr : le logo sur blanc, puis une
   bande rouge pleine largeur qui porte la navigation. */
.front-entete { position: relative; z-index: 2; }
.bandeau-marque { background: var(--general-background-primary-inverted, #fff); }
.front-entete .dedans {
  max-width: var(--front-max);
  margin: 0 auto;
  padding: var(--spacing-016) var(--spacing-020);
  display: flex;
  align-items: center;
  gap: var(--spacing-020);
  flex-wrap: wrap;
}
/* Le bandeau de marque : feuille de la MOA (heading-maquettes-2026.css,
   02/11/2026). Plus de filet ni de sous-titre : le logo, un espace, et le
   titre « Repertoire des enseignements » en capitales, 30 px, graisse 600
   — la taille vient du ticket (30), la feuille disait 24. */
.front-entete .bandeau-marque .dedans { padding: var(--spacing-024) var(--spacing-020); }
.front-entete .logo { display: flex; align-items: center; flex: none; }
.front-entete .bandeau-marque .logo { padding-right: var(--spacing-020); }
.front-entete .logo img { display: block; height: 24px; width: auto; }
.front-entete .marque {
  padding-left: 0;
  border-left: none;
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: var(--line-height-32, 32px);
  text-decoration: none;
  color: inherit;
  text-transform: uppercase;
}

/* La bande rouge s'arrete a 1 440 px (MOA, 05/11/2026) : le fond est sur
   le contenu, centre, et non sur la bande entiere. */
.bandeau-nav { background: var(--general-background-primary-inverted, #fff); }
.bandeau-nav .dedans {
  background: var(--accent);
  max-width: 1440px;
  padding: 0 var(--spacing-020);
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.bandeau-nav .dedans::-webkit-scrollbar { display: none; }
.bandeau-nav a {
  display: flex;
  align-items: center;
  padding: var(--spacing-012) var(--spacing-016);
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-size: var(--font-size-12);
  line-height: var(--line-height-20);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  border-bottom: 3px solid transparent;
}
.bandeau-nav a:first-child { margin-left: calc(var(--spacing-016) * -1); }
.bandeau-nav a:hover { background: rgba(0, 0, 0, .12); }
.bandeau-nav a[aria-current] { border-bottom-color: #fff; }
.bandeau-nav .bascule { margin-left: auto; }
/* La loupe du bandeau ouvre la recherche en voile (sans script : l'accueil).
   Sur petit ecran, le menu a son propre champ. */
.bandeau-nav .loupe { padding-left: var(--spacing-012); padding-right: var(--spacing-012); }

/* Le bouton de menu : sur petit ecran seulement. Il remplace la bande de
   navigation par une liste de rangees rouges, une par entree, comme le
   menu mobile de sciencespo.fr. */
.front-entete .identite { display: flex; align-items: center; gap: var(--spacing-020); min-width: 0; }
.front-entete .burger {
  display: none; margin-left: auto; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: var(--accent); cursor: pointer; border-radius: var(--radius-04);
}
/* La recherche du menu : sur petit ecran seulement, la loupe et un champ,
   sous le logo, comme le menu mobile de sciencespo.fr. */
.recherche-menu { display: none; }
.front-entete .burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.front-entete .burger .fermer { display: none; }
.front-entete[data-ouvert] .burger .ouvrir { display: none; }
.front-entete[data-ouvert] .burger .fermer { display: block; }

@media (max-width: 767px) {
  .front-entete .burger { display: inline-flex; align-items: center; justify-content: center; }
  .front-entete .bandeau-marque .dedans { flex-wrap: nowrap; align-items: flex-start; gap: var(--spacing-012); padding: var(--spacing-016) var(--spacing-020); }
  /* Le titre sous le logo, comme « ETUDIANTS » sous le logo de sciencespo.fr. */
  .front-entete .identite { flex-direction: column; align-items: flex-start; gap: var(--spacing-004, 4px); flex: 1; }
  .front-entete .bandeau-marque .logo { padding-right: 0; }
  .front-entete .marque { font-size: 13px; line-height: 16px; }
  .recherche-menu {
    display: flex; align-items: center; gap: var(--spacing-012);
    padding: var(--spacing-016) var(--spacing-020) var(--spacing-024);
    background: var(--general-background-primary-inverted, #fff);
  }
  .recherche-menu label { display: flex; color: var(--general-text-primary, #222); }
  .recherche-menu input[type="search"] { max-width: 20rem; }
  .bandeau-nav { display: none; }
  .front-entete[data-ouvert] .bandeau-nav { display: block; }
  .bandeau-nav .dedans { flex-direction: column; align-items: stretch; padding: 0; overflow: visible; }
  .bandeau-nav a, .bandeau-nav a:first-child {
    margin: 0; padding: var(--spacing-024) var(--spacing-020);
    font-size: var(--font-size-16, 16px); border-bottom: 1px solid rgba(255, 255, 255, .6);
    justify-content: space-between;
  }
  .bandeau-nav a::after {
    content: ""; width: 10px; height: 10px; flex: none;
    border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg);
  }
  .bandeau-nav a[aria-current] { background: rgba(0, 0, 0, .12); }
  .bandeau-nav .bascule { margin-left: 0; }
  .bandeau-nav .loupe { display: none; }
}

/* ------------------------------- structure ------------------------------ */

.front-corps {
  flex: 1;
  width: 100%;
  max-width: var(--front-max);
  margin: 0 auto;
  padding: var(--spacing-024) var(--spacing-020) var(--spacing-064);
}
/* Le pied de page, repris de `sp-footer` variante « gestionnaire ».
   Memes jetons que le composant : le site public ne peut pas le charger
   (son contenu vit dans un shadow DOM), il en reprend donc les valeurs,
   comme `.panneau` reprend `sp-card`. */
.sp-footer {
  width: 100%;
  max-width: var(--front-max);
  margin: 0 auto var(--spacing-024);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--footer-gap, 48px);
  /* Feuille fournie par la MOA (footer-maquettes-2026.css, 02/11/2026) :
     fond `general-background-primary-inverted`, rayon 4, liens en rouge.
     Le jeton `--general-primary-inverted` qu'elle nomme pour la couleur du
     texte n'existe pas dans le design system : on garde le gris du
     composant en repli, sinon le texte heriterait du corps de page. */
  background: var(--general-background-primary-inverted, #fff);
  border-radius: var(--radius-04, 4px);
  padding: var(--footer-padding-top, 48px) var(--footer-padding-right, 48px)
           var(--footer-padding-bottom, 48px) var(--footer-padding-left, 48px);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--general-primary-inverted, var(--footer-text, #666));
}
.sp-footer .logo-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-008);
}
.sp-footer .logo { display: block; width: 128px; height: var(--spacing-020, 20px); }
.sp-footer .footer-links {
  display: flex;
  align-items: flex-end;
  gap: var(--footer-links-section-gap, 24px);
}
.sp-footer .footer-links a { color: var(--general-text-primary, var(--accent-texte)); }

@media (max-width: 767px) {
  .sp-footer {
    flex-direction: column;
    align-items: flex-start;
    padding-left: var(--spacing-024);
    padding-right: var(--spacing-024);
  }
  .sp-footer .footer-links { flex-direction: column; align-items: flex-start; }
  .sp-footer .copyright-wrapper { order: 1; }
}

.front .titrage { margin: var(--spacing-016) 0 var(--spacing-024); }
/* Un filet court au-dessus du titre : la marque se signale une fois, en
   haut de page, plutot que de teinter chaque element. */
.front .titrage::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--spacing-012);
}
.front h1 {
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-size: var(--font-size-32);
  line-height: var(--line-height-40);
  margin: 0;
}
.front .surtitre {
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  color: var(--general-text-secondary-light);
  margin: var(--spacing-004) 0 0;
}

/* Deux colonnes, comme la maquette ; une seule des que la place manque. */
.front-colonnes {
  display: grid;
  grid-template-columns: minmax(0, var(--front-principal)) var(--front-lateral);
  gap: var(--spacing-016);
  align-items: start;
}
.front-colonne { display: flex; flex-direction: column; gap: var(--spacing-016); }

/* -------------------------------- panneau ------------------------------- */

.panneau-entete {
  display: flex;
  align-items: center;
  gap: var(--spacing-008);
  margin-bottom: var(--spacing-016);
}
.panneau-entete .icone { color: var(--accent); flex: none; }
.panneau-entete h2 {
  font-family: var(--sp-font-display);
  font-weight: 700;
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
  margin: 0;
}
.panneau-corps { display: flex; flex-direction: column; gap: var(--spacing-012); }

/* Les rubriques du descriptif : colonne d'etiquettes de 180 px, alignee en
   haut, comme la maquette. Voir `components/front/Rubriques.tsx` pour
   pourquoi `sp-data-item` ne convient pas a cet endroit precis. */
.rubriques { margin: 0; }
.rubrique {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--spacing-040);
  align-items: start;
  padding: var(--spacing-012) var(--spacing-000);
}
.rubrique + .rubrique { border-top: 1px solid var(--divider-lighter-border, #e6e6e6); }
.rubrique > dt {
  font-weight: 700;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  color: var(--general-text-secondary);
}
.rubrique > dd {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}

/* Dans les panneaux lateraux, les valeurs sont courtes : `sp-data-item` y
   est a sa place, on ne regle que son intervalle. */
.front sp-data-item { --sp-data-item-gap: var(--spacing-008); }

/* FRT-07 : les textes de Banner portent leurs retours a la ligne en clair,
   sans balise. L'ancien front les ecrasait en espaces faute de cette regle. */
.front .valeur { white-space: pre-line; }
.front .valeur-tags { display: flex; gap: var(--spacing-008); flex-wrap: wrap; }

/* ------------------------------- lectures ------------------------------- */
/* Une bibliographie se compose comme une bibliographie : retrait negatif,
   qui fait saillir la premiere ligne de chaque entree et donne a l'oeil un
   point d'entree par reference, et poids normal. Le titre stocke est la
   citation complete — auteurs, annee, editeur — et rien ne la decoupe : la
   mettre en gras ligne apres ligne donnait un mur de texte. */

.groupe-lectures + .groupe-lectures { margin-top: var(--spacing-024); }
.groupe-lectures > h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-008);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--general-text-secondary);
  margin: 0 0 var(--spacing-008);
}
.groupe-lectures > h3 .compte {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 0 var(--spacing-006);
  border-radius: var(--radius-999);
  background: var(--accent-fond, #fde8ea);
  color: var(--accent-texte);
}

.lectures { list-style: none; margin: 0; padding: 0; }
.lecture { padding: var(--spacing-012) 0; }
.lecture + .lecture { border-top: 1px solid var(--divider-lighter-border, #e6e6e6); }
.lecture:first-child { padding-top: 0; }
.lecture:last-child { padding-bottom: 0; }

.citation,
.lecture .titre {
  margin: 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  /* Retrait negatif : la premiere ligne depasse, les suivantes rentrent. */
  padding-left: 1.6em;
  text-indent: -1.6em;
}

.gestes,
.lecture .liens {
  margin: var(--spacing-008) 0 0 1.6em;
  display: flex;
  gap: var(--spacing-008);
  flex-wrap: wrap;
}

/* Un geste possible sur une reference : l'emprunter, la lire, l'acheter. */
.geste,
.lecture .liens a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-006);
  padding: var(--spacing-004) var(--spacing-012);
  border: 1px solid var(--buttongroup-default-border, #d9d9d9);
  border-radius: var(--radius-999);
  background: var(--general-background-primary-inverted, #fff);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--general-text-secondary);
  text-decoration: none;
}
.geste:hover, .lecture .liens a:hover {
  border-color: var(--general-text-secondary);
  background: var(--general-theme-theme-background, #f7f5f2);
}
.geste .icone { color: var(--general-text-secondary-light); flex: none; }

/* ------------------------------- tableaux ------------------------------- */

/* FRT-19 : un tableau deborde sur telephone. Il defile dans son cadre
   plutot que d'elargir la page. */
.tableau-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.front table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}
/* Tableaux et textes des maquettes : feuille de la MOA
   (body-maquettes-2026.css, 02/11/2026). Cellules centrees verticalement,
   texte gris fonce, en-tetes en 16 soulignes d'un trait de 2 ; titres de
   bloc etages 24 / 18 / 16. */
.front th, .front td {
  border-bottom: 1px solid var(--divider-light-border, #ccc);
  padding: var(--spacing-008) var(--spacing-012);
  text-align: left;
  vertical-align: middle;
}
.front th {
  font-weight: 700;
  color: var(--general-text-secondary);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  border-bottom: 2px solid var(--divider-primary-border);
}
.front td { color: var(--general-text-secondary); }

/* Un bloc de texte respire : de l'air avant et apres, que le voisin soit
   une grille ou un autre texte (MOA, 03/11/2026). */
.bloc-texte {
  font-size: var(--font-size-16);
  line-height: var(--spacing-020);
  margin: var(--spacing-024) 0;
}
.bloc-texte > :first-child { margin-top: 0; }
.bloc-texte > :last-child { margin-bottom: 0; }

/* Chaque grille se replie : le resume porte la nature et le nombre de
   lignes, le chevron dit l'etat. */
details.grille { margin: var(--spacing-016) 0 var(--spacing-032); }
details.grille > summary {
  display: flex; align-items: center; gap: var(--spacing-012);
  cursor: pointer; list-style: none; padding: var(--spacing-004) 0;
  color: var(--general-text-secondary); font-size: var(--font-size-14);
}
details.grille > summary::-webkit-details-marker { display: none; }
details.grille > summary::before {
  content: ""; width: 8px; height: 8px; flex: none; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
details.grille:not([open]) > summary::before { transform: rotate(-45deg); }
details.grille > summary:hover { color: var(--general-text-primary); }
details.grille > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-04); }
details.grille > summary .nature-bloc { margin: 0; }
/* Une grille sans nature : pastille neutre, grise, comme `sp-tag`. Les jetons
   « primary » du design system sont le rouge de la marque, pas le noir. */
.nature-bloc.neutre { background: var(--tag-neutral-background, #f1f1f1); color: var(--tag-neutral-text, #1a1a1a); }
details.grille > .tableau-cadre { margin-top: var(--spacing-008); }
.front .bloc-texte :is(h2, h3, h4) {
  font-family: var(--sp-font-display);
  line-height: var(--line-height-24);
  margin: var(--spacing-024) 0 var(--spacing-012);
}
.front .bloc-texte h2 { font-size: var(--font-size-24); }
.front .bloc-texte h3 { font-size: var(--font-size-18); }
.front .bloc-texte h4 { font-size: var(--font-size-16); }
.front .bloc-texte p { margin: var(--spacing-008) 0; }

/* ------------------------------- resultats ------------------------------ */

@media (max-width: 75rem) {
  .front-colonnes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 42rem) {
  /* Sous 42rem la colonne d'etiquettes ne tient plus : l'etiquette passe
     au-dessus de sa valeur. */
  .rubrique { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-004); }
  .front h1 { font-size: var(--font-size-24); line-height: var(--line-height-32); }
}

/* ===================== le site statique ================================= */
/* Les pages generees n'utilisent aucun composant du design system : leur
   contenu doit exister dans le fichier, pour Pagefind comme pour un
   visiteur sans JavaScript. Les motifs du design system sont donc repris
   ici a partir de ses jetons — `sp-card` devient `.panneau`, `sp-tag`
   devient `.pastille`. Mêmes valeurs, mêmes variables. */

.fil-ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-008);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--general-text-secondary-light);
}
.fil-ariane li + li::before { content: "›"; margin-right: var(--spacing-008); }
.fil-ariane a { color: inherit; }
.fil-ariane a.accueil { display: inline-flex; align-items: center; color: var(--accent); }
.fil-ariane a.accueil .icone { width: 16px; height: 16px; }
.fil-ariane a:hover { color: var(--accent-texte); }
.fil-ariane [aria-current="page"] { color: var(--accent-texte); font-weight: 700; }

/* Reprend sp-card, variante « outline » : fond blanc, bordure, marge
   interieure 24. Rayon 4 et non 16 : feuille de la MOA pour les descriptifs
   (body-descriptifs-maquettes-2026.css, 02/11/2026), qui a aussi fixe les
   graisses et les couleurs des titres de rubrique et des etiquettes. */
.panneau {
  background: var(--card-background, #fff);
  border: 1px solid var(--card-border, #ccc);
  border-radius: var(--radius-04);
  padding: var(--spacing-024);
}

/* Reprend sp-tag, etat neutre. */
.pastille {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--spacing-008);
  border-radius: var(--radius-08);
  background: var(--tag-neutral-background, #f1f1f1);
  color: var(--tag-neutral-text, #1a1a1a);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
}

.enseignants { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-008); }

/* Le champ de recherche : il ne vit que sur l'accueil. */
.grande-recherche form { display: flex; gap: var(--spacing-008); width: 100%; }
.front input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-008) var(--spacing-012);
  font: inherit;
  border: 1px solid var(--general-border-default, #cfcfcf);
  border-radius: var(--radius-08);
  background: var(--general-background-primary-inverted, #fff);
}
.front input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.grande-recherche button {
  display: inline-flex; align-items: center; gap: var(--spacing-008);
  padding: var(--spacing-008) var(--spacing-016);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: var(--radius-08);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.grande-recherche button:hover {
  background: var(--color-red-600, #b81024);
  border-color: var(--color-red-600, #b81024);
}

.resultats mark { background: var(--general-background-info, #e6eefd); color: inherit; }

/* Les panneaux se suivent dans une colonne : meme intervalle que la grille. */
.front-colonne > .panneau + .panneau { margin-top: 0; }

/* Le sommaire d'un semestre : le site doit pouvoir se feuilleter. */
.sommaire { display: grid; gap: var(--spacing-024); }
.sommaire-ecole h2 {
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
  margin: 0 0 var(--spacing-008);
}
.sommaire-ecole ul { list-style: none; margin: 0; padding: 0; }
.sommaire-ecole li {
  border-bottom: 1px solid var(--divider-lighter-border, #e6e6e6);
  padding: var(--spacing-008) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-008) var(--spacing-016);
  align-items: baseline;
}
.sommaire-ecole li a { color: inherit; font-size: var(--font-size-14); }
.sommaire-ecole .detail {
  font-size: var(--font-size-12);
  color: var(--general-text-secondary-light);
}

/* ============================ faits saillants ============================ */
/* Semestre, langue, type, heures, credits : cinq valeurs courtes que le
   visiteur cherche en premier. Dans la colonne laterale elles se lisaient
   une par une ; en bandeau sous le titre, elles se lisent d'un coup. */

.faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--spacing-016) var(--spacing-024);
  margin: 0 0 var(--spacing-016);
  padding: var(--spacing-016) var(--spacing-024);
  background: var(--card-background, #fff);
  border: 1px solid var(--card-border, #ccc);
  border-radius: var(--radius-04);
  border-left: 3px solid var(--accent);
}
.fait > dt {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--general-text-primary);
}
.fait > dd {
  margin: var(--spacing-004) 0 0;
  font-family: var(--sp-font-display);
  font-weight: 600;
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
  color: var(--general-text-secondary);
}

/* ======================= champs longs, empiles =========================== */

.section + .section {
  margin-top: var(--spacing-012);
  padding-top: var(--spacing-012);
  border-top: 1px solid var(--divider-lighter-border, #e6e6e6);
}
.etiquette {
  margin: var(--spacing-024) 0 var(--spacing-012);
  font-size: var(--font-size-18);
  line-height: var(--line-height-16);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--general-text-secondary);
}
.prose { font-size: var(--font-size-14); line-height: var(--line-height-22, 1.6); }
.prose > * { margin: 0 0 var(--spacing-008); }
.prose > :last-child { margin-bottom: 0; }
.prose .intertitre { font-weight: 700; color: var(--general-text-secondary); }

/* Les listes que les sauts de ligne portaient. */
.points { list-style: none; margin: 0 0 var(--spacing-008); padding: 0; }
.points > li {
  position: relative;
  padding-left: var(--spacing-016);
  margin-bottom: var(--spacing-004);
}
.points > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Le bareme : l'intitule a gauche, la note a droite, un filet pointille
   entre les deux — on lit la ponderation sans relire la phrase. */
.bareme { margin: var(--spacing-008) 0; display: grid; gap: var(--spacing-004); }
.bareme .rang {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-008);
}
.bareme .rang > span { flex: 0 1 auto; }
.bareme .rang::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--spacing-016);
  border-bottom: 1px dotted var(--divider-light-border, #ccc);
  transform: translateY(-.25em);
  order: 1;
}
.bareme .rang > b { order: 2; flex: none; }
.bareme .rang > b,
.poids {
  font-weight: 700;
  color: var(--accent-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le deroule d'une seance : la duree en tete de colonne, l'etape en face. */
.etapes {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--spacing-004) var(--spacing-016);
  margin: var(--spacing-008) 0;
}
.etape { display: contents; }
.etape > b {
  font-weight: 700;
  color: var(--accent-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================== l'accueil =============================== */
/* La page d'accueil est d'abord un champ de recherche : le catalogue
   compte plus de dix mille pages, personne ne le parcourt. Le champ passe
   donc en grand, et les semestres restent en dessous pour feuilleter. */

.accueil-hero { max-width: 44rem; margin-bottom: var(--spacing-032); }
.accueil-hero .intro {
  font-size: var(--font-size-16);
  line-height: var(--line-height-24);
  color: var(--general-text-secondary-light);
  margin: 0 0 var(--spacing-024);
}
.grande-recherche input[type="search"] {
  padding: var(--spacing-012) var(--spacing-016);
  font-size: var(--font-size-16);
}
.grande-recherche button { padding: var(--spacing-012) var(--spacing-020); }

.semestres a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-008);
}
.semestres a .icone { color: var(--accent); flex: none; }

/* ============================ les facettes ============================== */

.facettes {
  display: flex;
  align-items: center;
  gap: var(--spacing-008);
  flex-wrap: wrap;
  margin: var(--spacing-016) 0;
}
.facettes:empty { display: none; }
.facettes .intitule {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--general-text-secondary-light);
}
/* L'intitule de la facette est repris dans la premiere option du menu :
   il reste lisible pour un lecteur d'ecran sans occuper deux fois la
   place a l'ecran. */
.facette .vu {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.facettes select {
  padding: var(--spacing-006) var(--spacing-012);
  font: inherit;
  font-size: var(--font-size-14);
  border: 1px solid var(--general-border-default, #cfcfcf);
  border-radius: var(--radius-999);
  background: var(--general-background-primary-inverted, #fff);
  color: var(--general-text-secondary);
}
.facettes select:hover { border-color: var(--accent); }
.facettes .effacer {
  padding: var(--spacing-006) var(--spacing-012);
  font: inherit;
  font-size: var(--font-size-12);
  border: 0;
  background: none;
  color: var(--accent-texte);
  text-decoration: underline;
  cursor: pointer;
}

/* ========================== les resultats =============================== */

.resultats .decompte {
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-size: var(--font-size-18);
  line-height: var(--line-height-24);
  margin: 0 0 var(--spacing-016);
}
.resultats .decompte span {
  font-family: var(--sp-font-sans);
  font-weight: 400;
  font-size: var(--font-size-14);
  color: var(--general-text-secondary-light);
}
.groupe-resultats + .groupe-resultats { margin-top: var(--spacing-032); }
.groupe-resultats > h2 {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin: 0 0 var(--spacing-008);
  padding-bottom: var(--spacing-008);
  border-bottom: 2px solid var(--accent);
}
.groupe-resultats > h3 {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: 700;
  color: var(--general-text-secondary-light);
  margin: var(--spacing-016) 0 var(--spacing-008);
}
.resultats ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-008); }

/* Une vignette par resultat : une carte, comme le reste du site, plutot
   qu'une ligne de liste — la cible du clic est alors tout le bloc. */
.resultats li a {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--spacing-004) var(--spacing-012);
  padding: var(--spacing-012) var(--spacing-016);
  background: var(--card-background, #fff);
  border: 1px solid var(--card-border, #ccc);
  border-left: 3px solid transparent;
  border-radius: var(--radius-08);
  text-decoration: none;
  color: inherit;
}
.resultats li a:hover { border-color: var(--accent); }
.resultats li a:hover .titre { text-decoration: underline; }
.resultats .code {
  grid-row: 1;
  align-self: baseline;
  font-weight: 700;
  font-size: var(--font-size-12);
  line-height: var(--line-height-20);
  letter-spacing: .04em;
  color: var(--accent-texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.resultats .titre {
  grid-row: 1;
  grid-column: 2;
  font-weight: 700;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
}
.resultats .extrait,
.resultats .etiquettes {
  grid-column: 2;
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--general-text-secondary-light);
}
.resultats .etiquettes { display: flex; gap: var(--spacing-006); flex-wrap: wrap; }
/* Un resultat sans code : l'intitule reprend toute la largeur. */
.resultats li a > .titre:first-child,
.resultats li a > .titre:first-child ~ * { grid-column: 1 / -1; }

.resultats .vide { padding: var(--spacing-032) 0; }
.resultats .vide h2 {
  font-family: var(--sp-font-display);
  font-weight: 800;
  font-size: var(--font-size-18);
  margin: 0 0 var(--spacing-008);
}

/* Une liste de resultats se lit en colonne etroite : au-dela d'une
   soixantaine de caracteres par ligne, l'oeil perd le debut de la ligne
   suivante. La page reste large, la liste non. */
.facettes, .resultats { max-width: 56rem; }

/* Un avis dans le fil de la page : la prevue ne porte pas l'index de
   recherche, et le dire vaut mieux qu'un champ qui ne trouve rien. */
.avis {
  max-width: 44rem;
  margin: var(--spacing-016) 0;
  padding: var(--spacing-012) var(--spacing-016);
  border-left: 3px solid var(--accent);
  background: var(--accent-fond, #fde8ea);
  border-radius: 0 var(--radius-08) var(--radius-08) 0;
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  color: var(--general-text-secondary);
}

/* ============================== impression ============================== */
/* La vue imprimable d'une maquette : la meme page, debarrassee de ce qui
   n'a pas de sens sur du papier. Le PDF sort de la boite d'impression du
   navigateur — il n'y a donc rien d'autre a regler que du CSS. */

.barre-impression {
  display: flex;
  align-items: center;
  gap: var(--spacing-012);
  margin-bottom: var(--spacing-024);
}
/* Le bouton d'impression : une icone seule, comme la maison du fil
   d'Ariane ; le libelle est pour les lecteurs d'ecran et l'infobulle. */
.barre-impression button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-04); background: none;
  color: var(--accent-texte); cursor: pointer;
}
.barre-impression button:hover { background: var(--accent-soft, rgba(230, 20, 45, .08)); }
.barre-impression button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.barre-impression a { color: var(--accent-texte); font-size: var(--font-size-14); }

.sommaire-impression { margin: var(--spacing-032) 0; }
.sommaire-impression > h2 {
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin: 0 0 var(--spacing-008);
  padding-bottom: var(--spacing-008);
  border-bottom: 2px solid var(--accent);
}
.sommaire-impression ol { margin: 0; padding-left: var(--spacing-020); }
.sommaire-impression li { font-size: var(--font-size-14); line-height: var(--line-height-22, 1.6); }
.sommaire-impression .code { font-weight: 700; color: var(--accent-texte); }

.fiche-imprimee + .fiche-imprimee { margin-top: var(--spacing-032); }

@media print {
  /* Ce qui sert a naviguer n'a pas de sens imprime. */
  .front-entete,
  .front-pied,
  .sp-footer,
  .barre-impression,
  .fil-ariane { display: none !important; }

  @page { size: A4; margin: 14mm 12mm; }

  .front { background: #fff; }
  .front-corps { max-width: none; padding: 0; }

  /* Les panneaux redeviennent des sections : une bordure et une ombre par
     rubrique font un damier sur le papier. */
  .panneau, .faits {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    border-left: 0;
    margin-bottom: var(--spacing-016);
  }
  .panneau + .panneau { margin-top: var(--spacing-016); }
  .panneau-entete { margin-bottom: var(--spacing-008); }

  /* Deux colonnes a l'ecran, une seule sur une page A4. */
  .front-colonnes { display: block; }
  .front-colonne + .front-colonne { margin-top: var(--spacing-016); }

  /* Une fiche commence en haut d'une page ; rien ne se coupe au milieu
     d'un titre, d'une ligne de tableau ou d'une reference.

     Mais pas `.panneau` : un panneau fait souvent plus d'une page, et
     refuser qu'il se coupe envoie entier a la page suivante tout ce qui
     n'entre plus — une fiche s'etalait sur trois pages dont la derniere
     portait deux lignes. On protege les morceaux, pas les blocs. */
  .fiche-imprimee { break-before: page; }
  .lecture, .groupe-lectures, .section, tr, .fait, .etape, .rang { break-inside: avoid; }
  h1, h2, h3, .etiquette, .panneau-entete { break-after: avoid; }

  /* Un lien imprime ne se clique pas : son adresse se lit. Sauf les liens
     internes, qui ne menent nulle part sur du papier. */
  .geste[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--font-size-10, .625rem);
    word-break: break-all;
  }
  .geste { border: 0; padding: 0; }
  .geste .icone { display: none; }

  .tableau-cadre { overflow: visible; }
  .front table { font-size: 10pt; }
}

/* Les liens du corps : le rouge de la marque, comme dans le back-office.
   La navigation et le pied gardent les leurs. */
.front-corps a { color: var(--accent-texte); text-decoration: underline; text-underline-offset: 2px; }
.front-corps a:hover { color: var(--accent); }
.front-corps .fil-ariane a:not(:hover) { color: inherit; text-decoration: none; }
.front-corps .semestres a, .front-corps .geste, .front-corps .barre-impression a { text-decoration: none; }

/* La nature d'un tableau de maquette : tronc commun, obligatoire, a option. */
/* Pastille pleine, rouge, texte blanc — feuille de la MOA. */
.nature-bloc {
  display: inline-block; margin: var(--spacing-008) 0;
  padding: 2px 10px; border: none; border-radius: 4px;
  font-size: var(--font-size-12); font-weight: 500; text-transform: none;
  color: var(--general-text-primary-reversed); background-color: var(--general-text-primary);
}

/* Texte pour les lecteurs d'ecran seulement : le nom de l'accueil derriere
   la maison du fil d'Ariane. La classe existait dans le back-office, pas
   ici — « Syllabus » s'affichait a cote de l'icone. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Les maquettes communes citees : un tableau de la maison, une ligne par
   commune ; le titre est un lien, les nombres sont alignes a droite. */
/* Les colonnes de nombres, dans tous les tableaux : a droite, chiffres des
   unites alignes, en-tete compris. */
.front table td.nombre, .front table th.nombre { text-align: right; white-space: nowrap; }
.front table.communes td a { display: inline-flex; align-items: center; gap: 4px; }

/* `hidden` doit gagner sur tout `display` pose par une classe : la pagination
   (flex), les cartes (flex), les lignes empilees (grid) restaient visibles
   une fois cachees par le filtre (MOA, 05/11/2026). */
.front [hidden], .voile [hidden] { display: none !important; }

/* ============================ le catalogue ============================== */
/* L'accueil se feuillette (MOA, 05/11/2026) : trois onglets — secteur,
   semestre, enseignement — puis la page d'un secteur. Memes jetons que le
   reste ; les cartes reprennent `.panneau`, les pastilles `sp-tag`. */

.front .titrage .surtitre b { color: var(--general-text-secondary); font-variant-numeric: tabular-nums; }

.onglets {
  display: flex; align-items: center; gap: var(--spacing-004); flex-wrap: wrap;
  margin-top: var(--spacing-024); border-bottom: 1px solid var(--general-border-default, #cfcfcf);
}
.onglets .lib {
  font-size: var(--font-size-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--general-text-secondary-light); margin-right: var(--spacing-012);
}
.onglets [role="tab"] {
  padding: var(--spacing-012) var(--spacing-016); margin-bottom: -1px;
  font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-16);
  color: var(--general-text-secondary); text-decoration: none;
  border-bottom: 3px solid transparent; cursor: pointer;
}
.onglets [role="tab"]:hover { color: var(--accent-texte); }
.onglets [role="tab"][aria-selected="true"] { color: var(--accent-texte); border-bottom-color: var(--accent); }
.parcourir [role="tabpanel"] { padding-top: var(--spacing-016); }

.barre-filtre { display: flex; align-items: center; gap: var(--spacing-016); flex-wrap: wrap; margin: var(--spacing-008) 0 var(--spacing-016); }
.barre-filtre input[type="search"] { flex: 0 1 340px; }
.barre-filtre .compte { font-size: var(--font-size-14); color: var(--general-text-secondary-light); }
.barre-filtre .compte b { color: var(--general-text-secondary); font-variant-numeric: tabular-nums; }

.chips { display: flex; gap: var(--spacing-008); flex-wrap: wrap; }
.chips button {
  font: inherit; font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-12);
  padding: var(--spacing-004) var(--spacing-012);
  border: 1px solid var(--general-border-default, #cfcfcf); border-radius: var(--radius-04);
  background: var(--general-background-primary-inverted, #fff); color: var(--general-text-secondary); cursor: pointer;
}
.chips button[aria-pressed="true"] { background: var(--general-text-secondary, #1a1a1a); border-color: var(--general-text-secondary, #1a1a1a); color: #fff; }
.chips button.plus { border-style: dashed; font-weight: 400; font-family: inherit; }
.chips.prefixes { margin-bottom: var(--spacing-016); }

.segment { display: inline-flex; border: 1px solid var(--general-border-default, #cfcfcf); border-radius: var(--radius-04); overflow: hidden; background: var(--general-background-primary-inverted, #fff); }
.segment button {
  font: inherit; font-size: var(--font-size-14); font-weight: 700; padding: var(--spacing-008) var(--spacing-016);
  border: 0; background: transparent; color: var(--general-text-secondary); cursor: pointer; white-space: nowrap;
}
.segment button + button { border-left: 1px solid var(--general-border-default, #cfcfcf); }
.segment button[aria-pressed="true"] { background: var(--general-text-secondary, #1a1a1a); color: #fff; }

.grille-secteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-016); }
.carte-secteur {
  display: flex; flex-direction: column; gap: var(--spacing-008); min-width: 0;
  padding: var(--spacing-016) var(--spacing-020);
  background: var(--card-background, #fff); border: 1px solid var(--card-border, #ccc); border-radius: var(--radius-04);
  color: inherit; text-decoration: none;
}
.carte-secteur:hover { border-color: var(--accent); }
.carte-secteur .nom {
  font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-16); line-height: var(--line-height-22, 1.4);
  text-transform: uppercase; color: var(--general-text-secondary);
}
.carte-secteur .d { font-size: var(--font-size-14); color: var(--general-text-secondary-light); }
.carte-secteur .d b { color: var(--general-text-secondary); font-variant-numeric: tabular-nums; }
.carte-secteur .tags { display: flex; gap: var(--spacing-008); flex-wrap: wrap; }
/* La saison : la pastille pleine des maquettes (`.nature-bloc`), meme
   rouge, meme blanc, meme rayon — un seul style de pastille sur le site. */
.pastille.saison {
  min-height: 0; padding: 2px 10px; border-radius: 4px;
  background: var(--general-text-primary); color: var(--general-text-primary-reversed, #fff); font-weight: 500;
}

.bloc-semestre {
  background: var(--card-background, #fff); border: 1px solid var(--card-border, #ccc); border-radius: var(--radius-04);
  padding: var(--spacing-020) var(--spacing-024); margin-top: var(--spacing-016);
}
.bloc-semestre .tete { display: flex; align-items: baseline; gap: var(--spacing-016); flex-wrap: wrap; margin-bottom: var(--spacing-012); }
.bloc-semestre h2 { font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-24); line-height: var(--line-height-24); margin: 0; }
.bloc-semestre .tete .d { font-size: var(--font-size-14); color: var(--general-text-secondary-light); }
.bloc-semestre .tete .d b { color: var(--general-text-secondary); font-variant-numeric: tabular-nums; }
.bloc-semestre .tete .fin { margin-left: auto; font-size: var(--font-size-14); color: var(--accent-texte); }
.secteurs-semestre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 var(--spacing-032, 32px); }
.secteurs-semestre li {
  display: flex; gap: var(--spacing-012); align-items: baseline;
  padding: var(--spacing-008) 0; border-top: 1px solid var(--divider-lighter-border, #e6e6e6); font-size: var(--font-size-14);
}
.secteurs-semestre a { min-width: 0; font-family: var(--sp-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--font-size-12); letter-spacing: .03em; }
.secteurs-semestre .d { margin-left: auto; color: var(--general-text-secondary-light); white-space: nowrap; }
.secteurs-semestre .d b { color: var(--general-text-secondary); font-variant-numeric: tabular-nums; }

/* La liste, comme les tableaux des maquettes : sans cadre, l'en-tete
   souligne de rouge (feuille de la MOA). */
.liste-cours table { border: 0; }
.liste-cours .code { font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-12); color: var(--general-text-secondary-light); white-space: nowrap; }
/* L'intitule est un lien, comme dans les tableaux des maquettes : rouge,
   souligne, sans graisse. */
.liste-cours th.n, .liste-cours td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.front .vide { padding: var(--spacing-024); text-align: center; color: var(--general-text-secondary-light); }
.liste-cours .unite { display: none; }
/* Sur petit ecran, chaque enseignement devient une fiche : le code et le
   semestre sur une ligne, l'intitule, puis les enseignants et les heures.
   Un tableau de cinq colonnes ne se lit pas a 400 px (MOA, 05/11/2026). */
@media (max-width: 767px) {
  .liste-cours { overflow-x: hidden; }
  .liste-cours thead { display: none; }
  .liste-cours table, .liste-cours tbody { display: block; min-width: 0; width: auto; }
  .liste-cours tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-012); row-gap: var(--spacing-004);
    grid-template-areas: "code sem" "titre titre" "ens heures";
    padding: var(--spacing-012) 0; border-top: 1px solid var(--divider-light-border, #ccc);
  }
  .liste-cours tbody tr:first-child { border-top: 0; }
  .liste-cours td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .liste-cours td:nth-child(1) { grid-area: code; }
  .liste-cours td:nth-child(2) { grid-area: titre; font-size: var(--font-size-16); }
  .liste-cours td.sem { grid-area: sem; font-size: var(--font-size-12); color: var(--accent-texte); font-weight: 700; text-align: right; }
  .liste-cours td.ens { grid-area: ens; font-size: var(--font-size-12); color: var(--general-text-secondary-light); }
  .liste-cours td.n { grid-area: heures; font-size: var(--font-size-12); color: var(--general-text-secondary-light); }
  .liste-cours .unite { display: inline; }
}

/* Le secteur : ses programmes, un par bloc depliable, le semestre au choix. */
.section-tete { display: flex; align-items: center; gap: var(--spacing-020); flex-wrap: wrap; margin: var(--spacing-024) 0 var(--spacing-012); }
.section-tete h2 { font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-24); line-height: var(--line-height-24); margin: 0; }
.programme { background: var(--card-background, #fff); border: 1px solid var(--card-border, #ccc); border-radius: var(--radius-04); margin-top: var(--spacing-012); }
.programme > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--spacing-016);
  padding: var(--spacing-016) var(--spacing-020);
  font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-16); color: var(--general-text-secondary);
}
.programme > summary::-webkit-details-marker { display: none; }
.programme > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.programme[open] > summary::before { transform: rotate(45deg); }
.programme > summary .d { font-family: var(--sp-font-sans); font-weight: 400; font-size: var(--font-size-14); color: var(--general-text-secondary-light); margin-left: auto; white-space: nowrap; }
.programme .maquettes { list-style: none; margin: 0; padding: 0 var(--spacing-020) var(--spacing-012) var(--spacing-044, 44px); }
.programme .maquettes li {
  display: flex; gap: var(--spacing-012); align-items: baseline; flex-wrap: wrap;
  padding: var(--spacing-008) 0; border-top: 1px solid var(--divider-lighter-border, #e6e6e6); font-size: var(--font-size-14);
}
.programme .maquettes a { color: var(--general-text-secondary); font-weight: 700; text-decoration: none; }
.programme .maquettes a:hover { color: var(--accent-texte); text-decoration: underline; }
.programme .maquettes .d { margin-left: auto; color: var(--general-text-secondary-light); white-space: nowrap; }

/* ============================ la recherche en voile ====================== */
.voile {
  /* Hors de `.front` dans le document : il reprend ses jetons de texte. */
  --accent: var(--color-brand-primary, #e6142d); --accent-texte: var(--general-text-primary-dark, #b81024); --accent-fond: var(--color-red-050, #fde8ea);
  font-family: var(--sp-font-sans); font-size: var(--font-size-14); color: var(--general-text-secondary);
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: rgba(34, 34, 34, .55); padding: 56px var(--spacing-020) var(--spacing-020);
}
.voile .boite {
  max-width: 1000px; margin: 0 auto; overflow: hidden;
  background: var(--general-background-primary-inverted, #fff); border-radius: var(--radius-04);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.voile .champ { display: flex; align-items: center; gap: var(--spacing-012); padding: var(--spacing-008) var(--spacing-012) var(--spacing-008) var(--spacing-020); margin: 0; border-bottom: 1px solid var(--divider-lighter-border, #e6e6e6); }
.voile .champ .icone { color: var(--accent); flex: none; }
.voile .champ input[type="search"] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; font-size: var(--font-size-20, 20px); padding: var(--spacing-012) var(--spacing-004); }
/* Le champ prend toute la largeur ; « Fermer » se range a droite (MOA, 06/11/2026). */
.voile .champ .fermer { margin-left: auto; flex: none; }
.voile .champ input[type="search"]:focus-visible { outline: none; }
.voile .fermer {
  font: inherit; font-size: var(--font-size-14); padding: var(--spacing-008) var(--spacing-012); border: 0; border-radius: var(--radius-04);
  background: var(--color-grey-100, #eee); color: var(--general-text-secondary); cursor: pointer; white-space: nowrap;
}
.voile .filtres { align-items: center; padding: var(--spacing-012) var(--spacing-020); border-bottom: 1px solid var(--divider-lighter-border, #e6e6e6); }
.voile .filtres .d { margin-left: auto; font-size: var(--font-size-12); color: var(--general-text-secondary-light); }
.voile .liste { max-height: 62vh; overflow-y: auto; }
.voile .groupe { font-size: var(--font-size-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--general-text-secondary-light); padding: var(--spacing-012) var(--spacing-020) var(--spacing-004); }
.voile .item {
  display: flex; align-items: baseline; gap: var(--spacing-012);
  padding: var(--spacing-012) var(--spacing-020); border-top: 1px solid var(--divider-lighter-border, #e6e6e6);
  color: var(--general-text-secondary); text-decoration: none;
}
.voile .item:hover, .voile .item[aria-selected="true"] { background: var(--accent-fond); }
.voile .item .type { flex: none; width: 110px; font-size: var(--font-size-12); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-texte); }
.voile .item .lib { min-width: 0; }
.voile .item .code { font-weight: 700; margin-right: var(--spacing-008); }
.voile .item .d { margin-left: auto; font-size: var(--font-size-12); color: var(--general-text-secondary-light); white-space: nowrap; }
.voile .item mark { background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); }
.voile .pied { display: flex; gap: var(--spacing-016); flex-wrap: wrap; padding: var(--spacing-012) var(--spacing-020); border-top: 1px solid var(--divider-lighter-border, #e6e6e6); font-size: var(--font-size-12); color: var(--general-text-secondary-light); }
.voile .pied .tout { margin-left: auto; font-weight: 700; color: var(--accent-texte); }
.voile .vide { padding: var(--spacing-024) var(--spacing-020); }
@media (max-width: 767px) {
  .voile { padding: var(--spacing-012); }
  .voile .champ input[type="search"] { font-size: var(--font-size-16, 16px); }
  .voile .item .type { width: auto; }
  .voile .item .d { display: none; }
}

/* Ces liens ne sont pas des liens dans le texte : ni rouge ni souligne. */
.front-corps :is(a.carte-secteur, .secteurs-semestre a, .programme .maquettes a, .onglets [role="tab"]) {
  color: var(--general-text-secondary); text-decoration: none;
}
.front-corps :is(.secteurs-semestre a, .programme .maquettes a):hover { color: var(--accent-texte); text-decoration: underline; }
.front-corps .onglets [role="tab"][aria-selected="true"], .front-corps .onglets [role="tab"]:hover { color: var(--accent-texte); }

/* La pagination de la liste des enseignements : cinquante par page. */
.pagination { display: flex; align-items: center; gap: var(--spacing-004); flex-wrap: wrap; margin-top: var(--spacing-016); font-size: var(--font-size-14); }
.pagination button {
  font: inherit; font-weight: 700; min-width: 36px; padding: var(--spacing-004) var(--spacing-008);
  border: 1px solid var(--general-border-default, #cfcfcf); border-radius: var(--radius-04);
  background: var(--general-background-primary-inverted, #fff); color: var(--general-text-secondary); cursor: pointer;
}
.pagination button[aria-current="page"] { background: var(--general-text-secondary, #1a1a1a); border-color: var(--general-text-secondary, #1a1a1a); color: #fff; }
.pagination button[disabled] { opacity: .45; cursor: default; }
.pagination .points { padding: 0 var(--spacing-004); color: var(--general-text-secondary-light); }
.pagination .etendue { margin-left: auto; color: var(--general-text-secondary-light); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .liste-cours th:nth-child(2) { width: 40%; }
  .liste-cours th:nth-child(4) { width: 30%; }
}

/* ======================= tableaux empiles sur petit ecran ================ */
/* Les grilles d'une maquette ont de trois a huit colonnes : a 400 px, elles
   defilaient dans leur cadre et la ligne ne se lisait plus d'un coup (MOA,
   05/11/2026). Chaque ligne devient une fiche : la premiere cellule en
   titre, les autres sur deux colonnes — le nom de la colonne (`data-label`)
   a gauche, la valeur a droite. L'en-tete n'a plus rien a dire. */
@media (max-width: 767px) {
  .tableau-cadre:has(> table.empilable) { overflow: visible; }
  .front table.empilable { min-width: 0; display: block; }
  .front table.empilable thead { display: none; }
  .front table.empilable tbody { display: grid; gap: var(--spacing-012); }
  /* Chaque ligne, une carte : fond blanc, bordure, rayon 4 — comme les
     panneaux — pour qu'elle se distingue de la suivante. */
  .front table.empilable tr {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-006, 6px);
    padding: var(--spacing-012) var(--spacing-016);
    background: var(--card-background, #fff); border: 1px solid var(--card-border, #ccc); border-radius: var(--radius-04);
  }
  .front table.empilable td {
    display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: var(--spacing-012); align-items: baseline;
    padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal;
    font-size: var(--font-size-14); line-height: var(--line-height-20);
  }
  /* L'etiquette en petit, grise ; la valeur en noir, un peu plus lourde :
     c'est elle que l'on cherche. Les nombres restent a droite. */
  .front table.empilable td::before {
    content: attr(data-label); min-width: 0;
    font-size: var(--font-size-12); line-height: var(--line-height-20); color: var(--general-text-secondary-light);
  }
  .front table.empilable td > *, .front table.empilable td.nombre { font-weight: 700; color: var(--general-text-secondary); }
  .front table.empilable td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
  .front table.empilable td.nombre::before { text-align: left; font-weight: 400; }
  /* Une ligne sans rien — un blanc venu de Drupal — ne fait pas une carte. */
  .front table.empilable tr:not(:has(td:not(:empty))) { display: none; }
  .front table.empilable td:first-child {
    display: block; font-weight: 700; font-size: var(--font-size-16); line-height: var(--line-height-22, 1.4);
    padding-bottom: var(--spacing-008); margin-bottom: var(--spacing-004); border-bottom: 1px solid var(--divider-lighter-border, #e6e6e6);
  }
  .front table.empilable td:first-child::before { display: none; }
  .front table.empilable td:empty { display: none; }
  .front table.empilable td > .cell-html, .front table.empilable td > a { min-width: 0; }
}
}

/* « Dans les maquettes » : les maquettes en ligne qui citent l'enseignement,
   une par ligne, l'ecole en dessous — comme les lectures, sans puce. */
.dans-maquettes { list-style: none; margin: 0; padding: 0; }
.dans-maquettes li { padding: var(--spacing-008) 0; display: grid; gap: 2px; }
.dans-maquettes li + li { border-top: 1px solid var(--divider-lighter-border, #e6e6e6); }
.dans-maquettes .detail { font-size: var(--font-size-12); color: var(--general-text-secondary-light); }

/* Les ancres vers chaque type de resultat, sous le decompte. */
.ancres-resultats { display: flex; gap: var(--spacing-008); flex-wrap: wrap; margin: var(--spacing-008) 0 var(--spacing-016); }
.ancres-resultats a {
  display: inline-flex; align-items: center; gap: var(--spacing-008);
  padding: var(--spacing-004) var(--spacing-012); border: 1px solid var(--general-border-default, #cfcfcf); border-radius: var(--radius-04);
  background: var(--general-background-primary-inverted, #fff); color: var(--general-text-secondary); text-decoration: none;
  font-family: var(--sp-font-display); font-weight: 700; font-size: var(--font-size-12); text-transform: uppercase; letter-spacing: .04em;
}
.front-corps .ancres-resultats a { color: var(--general-text-secondary); text-decoration: none; }
.ancres-resultats a:hover { border-color: var(--accent); }
.ancres-resultats a span { font-family: var(--sp-font-sans); color: var(--accent-texte); }
.groupe-resultats { scroll-margin-top: var(--spacing-016); }

/* La liste attend la reponse de l'index : elle ne saute pas, elle palit. */
.liste-cours[aria-busy="true"] { opacity: .5; transition: opacity .15s; }