/* IBSAI – Université PSL
   Colours and typography follow the 2026 PSL visual identity, taking the
   values from the PSL beamer theme used for the programme's own slides:
   PSL blue, the cream and sand of the presentation template, and orange
   as the accent. PSL's brand typeface, Cera, is not freely licensed;
   Inter, the font of the official PSL template, is used instead. */

:root {
  --blue: #0b23a1;
  --blue-text: #000a96;
  --blue-deep: #071873;
  --blue-pale: #ccd2ec;
  --cream: #ede5ce;
  --sand: #e8e0c4;
  --ink: #404040;
  --ink-soft: #626262;
  --rule: #dcd8cc;
  --white: #fff;

  --orange: #c85500;        /* identity accent, for areas of colour */
  --orange-text: #b34c00;   /* the same, dark enough for small text */
  --gold: #8f6712;
  --slate: #5a6178;

  --measure: 46rem;
  --page: 64rem;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--orange-text); }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; color: var(--blue); }

p { max-width: var(--measure); }

/* Keyboard users can jump the ten navigation links. */
.skip {
  position: absolute;
  left: -9999px;
  background: var(--blue);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 0;
  top: 0;
  color: var(--white);
}

/* -------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
}

.masthead-logo img { display: block; height: 2.9rem; width: auto; }

.masthead-title {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-left: 1px solid var(--rule);
  padding-left: 1.5rem;
}

.masthead-name {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--blue);
  text-transform: uppercase;
}

.masthead-sub {
  display: block;
  font-size: 0.83rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* ------------------------------------------------------------ navigation */

.mainnav { background: var(--blue); }

.mainnav ul {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
}

.mainnav a {
  display: block;
  padding: 0.72rem 0.85rem;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.mainnav a:hover { background: var(--blue-deep); color: var(--white); }

.mainnav a.current {
  border-bottom-color: var(--orange);
  background: var(--blue-deep);
}

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.2rem 1.5rem 3.5rem;
}

main h1 {
  font-size: 2.1rem;
  margin: 0 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--blue-pale);
}

main h2 {
  font-size: 1.42rem;
  margin: 2.4rem 0 0.8rem;
}

main h3 { font-size: 1.1rem; margin: 1.8rem 0 0.6rem; }

.intro > p:first-child { font-size: 1.1rem; }

.small { font-size: 0.85rem; color: var(--ink-soft); }

/* ----------------------------------------------------------------- notes */

.note {
  background: var(--cream);
  border-left: 4px solid var(--orange);
  max-width: var(--measure);
  padding: 0.9rem 1.2rem;
  margin: 1.5rem 0;
}

.note p { margin: 0.35rem 0; max-width: none; }

/* ------------------------------------------------------------ key facts  */

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: var(--measure);   /* the width of the body text */
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 1.8rem 0;
}

.facts > a,
.facts > div {
  display: block;
  background: var(--cream);
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
}

.facts > a:hover { background: var(--sand); }
.facts > a:hover .fact-value { text-decoration: underline; }

.facts dt, .facts .fact-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.facts .fact-value {
  display: block;
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--blue-text);
  margin-top: 0.2rem;
}

.facts .fact-note { display: block; font-size: 0.82rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- courses */

.semester { margin-top: 2.6rem; }

.semester h2 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

.semester-period { font-weight: 400; color: var(--ink-soft); font-size: 0.92rem; }

.semester-summary {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 1.4rem;
}

h3.category {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 1.8rem 0 0.7rem;
}

h3.category-foundations { color: var(--blue); }
h3.category-ai { color: var(--orange-text); }
h3.category-transverse { color: var(--slate); }

.course {
  border-left: 3px solid var(--blue-pale);
  background: #faf8f3;
  padding: 0.9rem 1.2rem 1rem;
  margin: 0 0 0.9rem;
}

.course.category-foundations { border-left-color: var(--blue); }
.course.category-ai { border-left-color: var(--orange); }
.course.category-transverse { border-left-color: var(--slate); }

.course h4 {
  font-size: 1.06rem;
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.course .ects {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.badge-elective {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  background: var(--orange-text);
  padding: 0.1rem 0.4rem;
}

.course-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  max-width: none;
}

.course-meta span::after { content: " · "; }
.course-meta span:last-child::after { content: ""; }
.course-meta .discipline { font-weight: 500; color: var(--ink); }

.course-teachers { font-size: 0.88rem; margin: 0 0 0.5rem; }
.course p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- people */

.people { list-style: none; padding: 0; margin: 1.5rem 0 0; }

.person {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}

.person-name { font-size: 1.05rem; margin: 0; }
.person-name a { text-decoration: none; }
.person-name a:hover { text-decoration: underline; }

.person-affiliation {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0;
  max-width: none;
}

.person-courses {
  font-size: 0.85rem;
  margin: 0.35rem 0 0;
  max-width: none;
}

/* -------------------------------------------------------------- calendar */

dl.calendar { margin: 1rem 0 0; }

dl.calendar dt {
  font-weight: 600;
  color: var(--blue);
  margin-top: 0.9rem;
}

dl.calendar dd { margin: 0.1rem 0 0; max-width: var(--measure); }

.provisional-marker {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--sand);
  padding: 0.05rem 0.4rem;
  vertical-align: 0.1rem;
}

/* ---------------------------------------------------------------- tables */

table.blocks th[scope="rowgroup"] { vertical-align: top; white-space: nowrap; }

.blocks-note {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
}



table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--measure);
  margin: 1.2rem 0;
  font-size: 0.9rem;
}

caption {
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding-bottom: 0.4rem;
}

th, td {
  text-align: left;
  padding: 0.42rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}

thead th {
  background: var(--cream);
  color: var(--blue);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td.num, th.num { text-align: right; white-space: nowrap; }

/* ----------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  margin: 1.6rem 0;
  padding: 0;
  list-style: none;
}

.card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  padding: 1.1rem 1.2rem;
  background: var(--white);
}

.card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.card p { font-size: 0.9rem; margin: 0 0 0.6rem; max-width: none; }
.card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ call */

.callout {
  background: var(--cream);
  max-width: var(--measure);   /* the width of the body text */
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
}

.callout h2 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.button {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  padding: 0.55rem 1.2rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.4rem;
}

.button:hover { background: var(--orange-text); color: var(--white); }

/* ----------------------------------------------------------------- video */

.video {
  display: block;
  position: relative;
  max-width: var(--measure);
  margin: 1.8rem 0;
  text-decoration: none;
  background: var(--ink);
}

.video img { display: block; width: 100%; height: auto; opacity: 0.92; }
.video:hover img { opacity: 1; }

.video-caption {
  display: block;
  padding: 0.7rem 1rem;
  background: var(--blue);
  color: var(--white);
  font-weight: 500;
  font-size: 0.95rem;
}

.video-note { font-weight: 400; opacity: 0.8; }
.video-note::before { content: " – "; }

/* A play triangle over the still, drawn rather than loaded. */
.video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.9rem;
  border-color: transparent transparent transparent var(--white);
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.6));
}

.person-portrait {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 1.1rem;
  align-items: start;
}

.person-portrait .portrait {
  grid-row: 1 / span 3;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: cover;
  border-radius: 50%;
}

.person-role {
  display: inline-block;
  margin-left: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange-text);
}

/* Definition lists used for services and course families. */
main dl { max-width: var(--measure); }
main dt { font-weight: 600; color: var(--blue); margin-top: 0.9rem; }
main dd { margin: 0.15rem 0 0 1.2rem; }

main ol, main ul { max-width: var(--measure); }
main li { margin-bottom: 0.3rem; }

ul.addresses { list-style: none; padding: 0; }
ul.addresses li { margin-bottom: 0.2rem; }
ul.addresses strong { color: var(--blue); }

/* -------------------------------------------------------- competencies */

ul.competencies { margin: 1rem 0; }
ul.competencies li { margin-bottom: 0.45rem; }

/* ------------------------------------------------------------------- map */

figure.map { margin: 1.6rem 0; max-width: 100%; }
figure.map img { display: block; width: 100%; height: auto; }

figure.map figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  max-width: var(--measure);
}

/* --------------------------------------------------------------- funding */

.funding {
  border-top: 1px solid var(--rule);
  padding: 1.3rem 1.5rem 1.5rem;
}

.funding-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  max-width: var(--page);
  margin: 0 auto;
}

.funding-logos {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-shrink: 0;
}

/* The ANR charter asks for at least 85px of width for the full logo;
   at this height it is about 200px. */
.funding-logos img { display: block; width: auto; }
.funding-logos img[alt="Agence nationale de la recherche"] { height: 2.8rem; }
.funding-logos img[alt="France 2030"] { height: 4.4rem; }

.funding p {
  margin: 0;
  flex: 1 1 22rem;
  max-width: var(--measure);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- footer */

footer {
  background: var(--blue-deep);
  color: var(--blue-pale);
  padding: 1.8rem 1.5rem 2.2rem;
}

footer p {
  max-width: var(--page);
  margin: 0 auto;
  font-size: 0.85rem;
}

.footer-logo {
  display: block;
  max-width: var(--page);
  margin: 0 auto 1.1rem;
}

.footer-logo img { display: block; height: 2.4rem; width: auto; }

footer a { color: var(--white); }
footer a:hover { color: var(--sand); }
footer strong { color: var(--white); }
.footer-contact { margin-top: 0.8rem; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 52rem) {
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40rem) {
  html { font-size: 16px; }
  .facts { grid-template-columns: 1fr; }

  .masthead { flex-wrap: wrap; gap: 0.9rem; padding: 0.9rem 1rem; }
  .funding { padding: 1.1rem 1rem 1.3rem; }
  .masthead-title { border-left: none; padding-left: 0; }
  .masthead-name { font-size: 1rem; }

  .mainnav ul { padding: 0 0.5rem; }
  .mainnav a { padding: 0.6rem 0.7rem; font-size: 0.87rem; }

  main { padding: 1.6rem 1rem 2.5rem; }
  main h1 { font-size: 1.65rem; }

  .course h4 { display: block; }
  .course .ects { display: block; margin: 0.2rem 0 0; }
}

@media print {
  .mainnav, footer .footer-contact { display: none; }
  body { color: #000; }
  a { color: #000; }
}