/* ===== Jérôme Monnier — feuille de style unique ===== */
:root{
  --ink:#1c2430; --muted:#5b6675; --bg:#f6f7f9; --card:#ffffff; --line:#e2e6ec;
  --accent:#0b5d8c; --accent-2:#e07b1f; --nav:#0d2b45; --nav-ink:#e9f1f8;
  --radius:12px; --maxw:1040px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#e6eaf0; --muted:#9aa6b5; --bg:#11161d; --card:#18202a; --line:#2a3542;
         --accent:#5db3e6; --accent-2:#f0a050; --nav:#0a1520; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* --- Bandeau --- */
.banner{height:clamp(110px,13.125vw,175px); background:url(../Images/banner-art-2026.jpg) right center/cover no-repeat, #0b3556; position:relative}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,.55))}
.banner .inner{position:absolute; z-index:1; left:0; right:0; bottom:14px; margin:0 auto; max-width:var(--maxw); padding:0 20px; color:#fff}
.banner h1{margin:0; font-size:1.7rem; letter-spacing:.02em; text-shadow:0 1px 4px rgba(0,0,0,.6)}
.banner p{margin:0; opacity:.95; text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* --- Menu --- */
.nav{position:sticky; top:0; z-index:10; background:var(--nav); box-shadow:0 2px 6px rgba(0,0,0,.15)}
.nav .inner{max-width:var(--maxw); margin:0 auto; padding:0 12px; display:flex; align-items:center}
.nav ul{list-style:none; margin:0; padding:0}
.nav > .inner > ul{display:flex; flex-wrap:wrap}
.nav li{position:relative}
.nav a,.nav .label{display:block; padding:14px 14px; color:var(--nav-ink); font-weight:600; font-size:.95rem; cursor:pointer}
.nav a:hover,.nav li:hover > .label,.nav li:focus-within > .label{background:rgba(255,255,255,.08); text-decoration:none}
.nav a.active{box-shadow:inset 0 -3px 0 var(--accent-2)}
.nav .label::after{content:" ▾"; font-size:.75em; opacity:.8}
.nav .sub{display:none; position:absolute; left:0; top:100%; min-width:250px; background:var(--card);
  border:1px solid var(--line); border-top:3px solid var(--accent-2); border-radius:0 0 8px 8px; box-shadow:0 8px 20px rgba(0,0,0,.18)}
.nav li:hover > .sub,.nav li:focus-within > .sub{display:block}
.nav .sub a{color:var(--ink); font-weight:500; padding:9px 16px}
.nav .sub a:hover{background:var(--bg)}
.nav .burger{display:none; margin-left:auto; background:none; border:0; color:var(--nav-ink); font-size:1.6rem; padding:8px 10px; cursor:pointer}

/* --- Contenu --- */
main{max-width:var(--maxw); margin:0 auto; padding:24px 20px 40px}
section{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin:0 0 20px}
h2{margin:0 0 12px; font-size:1.35rem; display:flex; align-items:center; gap:10px}
h2::before{content:""; width:6px; height:1.2em; border-radius:3px; background:var(--accent-2)}
h3{margin:18px 0 8px; font-size:1.02rem; color:var(--accent)}
.muted{color:var(--muted); font-size:.92rem}
ul.clean{margin:0; padding-left:1.1em}
ul.clean li{margin:4px 0}

/* Carte d'identité */
.id{display:grid; grid-template-columns:120px 1fr auto; gap:22px; align-items:center}
.id img.photo{width:120px; height:150px; object-fit:cover; border-radius:10px}
.id h2::before{display:none}
.id .role{margin:0 0 8px; font-weight:600}
.id dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:.95rem}
.id dt{color:var(--muted)}
.id dd{margin:0}
.btns{display:flex; flex-direction:column; gap:8px}
.btn{display:inline-block; padding:8px 14px; border-radius:8px; border:1px solid var(--accent); font-weight:600; font-size:.9rem; text-align:center}
.btn.primary{background:var(--accent); color:#fff}
.btn:hover{text-decoration:none; filter:brightness(1.1)}

.tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none}
.tags li{background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:.85rem}

/* Cartes projets */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:6px}
.card{border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--bg)}
.card b{display:block}
.card .meta{font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.card p{margin:4px 0 0; font-size:.9rem}
.badge{display:inline-block; font-size:.72rem; padding:0 7px; border-radius:6px; background:var(--line); color:var(--muted); margin-left:4px; vertical-align:middle}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:4px 28px}

/* Pied de page */
footer{max-width:var(--maxw); margin:0 auto; padding:10px 20px 40px; text-align:center; color:var(--muted); font-size:.85rem}
.logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:28px; margin:0 0 18px}
.logos img{height:46px; width:auto; background:#fff; padding:4px 6px; border-radius:6px}

/* --- Mobile --- */
@media (max-width:760px){
  .banner{height:110px} .banner h1{font-size:1.3rem} .banner p{font-size:.85rem}
  .nav .burger{display:block}
  .nav > .inner{flex-wrap:wrap}
  .nav > .inner > ul{display:none; width:100%; flex-direction:column; padding-bottom:8px}
  .nav.open > .inner > ul{display:flex}
  .nav .sub{display:block; position:static; border:0; box-shadow:none; background:transparent; min-width:0; padding-left:14px}
  .nav .sub a{color:var(--nav-ink); opacity:.85; padding:6px 14px}
  .nav .label::after{content:""}
  .id{grid-template-columns:90px 1fr} .id img.photo{width:90px; height:112px}
  .btns{grid-column:1/-1; flex-direction:row; flex-wrap:wrap}
  .cols{grid-template-columns:1fr}
  section{padding:18px}
}

/* --- v2 --- */
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid + .grid{margin-top:12px}
.btn.small{font-size:.78rem; padding:5px 10px; border-color:var(--line); color:var(--muted)}
@media (max-width:760px){ .grid.three{grid-template-columns:1fr} }
@media (max-width:760px){
  .id{grid-template-columns:72px 1fr; align-items:start; gap:14px}
  .id img.photo{width:72px; height:90px}
  .id dl{grid-template-columns:1fr; font-size:.9rem}
  .id dt{margin-top:6px; font-size:.8rem}
}

/* --- pages intérieures --- */
.nav .label.active{box-shadow:inset 0 -3px 0 var(--accent-2)}
.nav .sub a.active{box-shadow:none; font-weight:700; color:var(--accent)}
.page-title{margin:0 0 6px; font-size:1.8rem}
.lead{color:var(--muted); margin:0 0 4px}
.links{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0}
.note{display:block; font-size:.85rem; color:var(--muted); font-style:italic; margin-top:4px}
details{margin-top:10px}
details summary{cursor:pointer; font-weight:600; color:var(--accent)}
details p{font-size:.92rem; color:var(--muted)}
ol.pubs{margin:6px 0 0; padding-left:2.6em}
ol.pubs li{margin:0 0 10px; font-size:.93rem; line-height:1.5}
ol.pubs .t{font-style:italic}
.tag{display:inline-block; font-size:.72rem; font-weight:700; padding:0 7px; margin-left:4px; border:1px solid var(--line); border-radius:6px; background:var(--bg); text-transform:uppercase; letter-spacing:.03em}
.tag:hover{text-decoration:none; border-color:var(--accent)}
.course{border-top:1px solid var(--line); padding:14px 0 4px}
.course:first-of-type{border-top:0; padding-top:4px}
.course h3{margin:0 0 4px}
.course p{margin:4px 0}
.login{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
.toc{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.92rem}

/* --- page cours VDA (oct. 2026) --- */
.kicker{margin:0 0 6px; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-2); font-weight:700}
.hero-vda{border-top:4px solid var(--accent)}
.hero-vda .tags{margin-top:14px}
.figs{display:grid; grid-template-columns:1fr 1.15fr; gap:22px; align-items:start}
.figs figure{margin:0}
.figs img{display:block; width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:6px}
.figs figcaption{margin-top:8px; font-size:.88rem; color:var(--muted); line-height:1.45}
.figs figcaption b{color:var(--ink)}
.parts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:760px){ .figs,.parts{grid-template-columns:1fr} }
.figs figure.wide{grid-column:1/-1}
.cite{background:var(--bg); border-left:4px solid var(--accent); border-radius:6px; padding:10px 14px; margin:0}
pre.bib{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:.82rem; overflow-x:auto; margin:8px 0 0}

/* --- Collaborators --- */
.collab{margin:18px 0 18px; padding:10px 16px; border-left:4px solid var(--accent-2); border-radius:0 10px 10px 0;
  background:linear-gradient(90deg, rgba(224,123,31,.08), rgba(11,93,140,.05)); font-size:.9rem; color:var(--muted)}
.collab p{margin:2px 0}
.collab .collab-title{font-weight:700; color:var(--accent); font-size:.92rem; margin-bottom:4px}