/* =============================================================
   Francesco Contino — site statique (style façon Google Sites)
   La FORME est ici. Pour changer un TEXTE, ouvre un fichier .html
   et modifie seulement ce qui est entre les balises de contenu.
   Ne touche pas à ce fichier sauf pour ajuster l'apparence.
   ============================================================= */

:root {
  --red: #b00020;          /* accent UCLouvain / liens */
  --ink: #202124;          /* texte principal */
  --muted: #5f6368;        /* texte secondaire */
  --line: #e6e6e6;         /* filets */
  --bg: #ffffff;
  --maxw: 920px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Barre de navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; gap: 18px;
}
.nav .site-title { font-weight: 700; font-size: 17px; color: var(--ink); text-decoration: none; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a { color: var(--ink); text-decoration: none; font-size: 16px; }
.nav a:hover, .nav a.active { color: var(--red); }

/* ---------- Conteneur ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
main { padding: 40px 0 20px; }

/* ---------- Héro (page Bio) ---------- */
.hero { text-align: center; padding: 48px 0 8px; }
.hero img.portrait {
  width: 100%; max-width: 520px; height: auto;
  border-radius: 8px; margin-bottom: 22px;
}
.hero h1 { font-size: 40px; font-weight: 700; margin: 8px 0 2px; }
.hero .role { font-size: 22px; color: var(--ink); margin: 0; font-weight: 500; }
.hero .org { font-size: 20px; color: var(--red); margin: 2px 0 16px; font-weight: 600; }
.social { display: flex; gap: 18px; justify-content: center; margin: 10px 0 4px; }
.social a { color: var(--muted); text-decoration: none; font-size: 15px; border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px; }
.social a:hover { color: var(--red); border-color: var(--red); }

/* ---------- Titres & texte ---------- */
h2 { font-size: 30px; font-weight: 700; margin: 40px 0 10px; }
h3 { font-size: 22px; font-weight: 700; margin: 28px 0 6px; }
p { margin: 0 0 16px; }
.lead { font-size: 19px; color: var(--ink); }
.updated { color: var(--muted); font-size: 15px; margin-top: -4px; }
a { color: var(--red); }
ul.content, ol.content { padding-left: 22px; }
ul.content li, ol.content li { margin: 8px 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

.player { margin: 22px 0 8px; }

.course { margin: 0 0 18px; }
.course .code { color: var(--muted); font-size: 15px; font-weight: 600; }

/* ---------- Pied de page ---------- */
footer {
  border-top: 1px solid var(--line); margin-top: 50px;
  padding: 28px 0 50px; color: var(--muted); font-size: 16px; text-align: center;
}
footer a { color: var(--muted); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 32px; }
  .nav-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}