:root {
  --bg: #f7f8fb; --fg: #1f2937; --muted: #5d6878; --brand: #0b6bcb;
  --card: #ffffff; --border: #e3e8ef; --max: 1100px; --soft: #eef5fc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible { outline:3px solid #78b1f5; outline-offset:3px; }
.wrap { max-width:var(--max); margin:auto; padding:24px; }
.site-header { display:flex; align-items:center; gap:26px; background:var(--card); border:1px solid var(--border); padding:24px;
              border-radius:16px; box-shadow:0 2px 18px rgba(24,45,69,.035); }
.avatar-frame { width:150px; min-width:150px; height:188px; position:relative; background:#e7eef6; border-radius:12px; overflow:hidden; border:2px solid #263544; }
.avatar { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.avatar-placeholder { position:absolute; inset:0; display:grid; place-items:center; font-size:44px; color:#566d86; font-weight:700; }
.avatar-frame.image-missing .avatar { display:none; }
h1 { font-size:clamp(1.6rem,3.4vw,2.1rem); margin:0 0 2px; line-height:1.3; }
h2 { font-size:1.35rem; margin:0 0 12px; line-height:1.35; }
h3 { font-size:1.05rem; line-height:1.35; margin:0 0 8px; }
.subtitle { margin:0 0 3px; font-size:1rem; font-weight:600; }
.role { margin:0; color:var(--muted); }
.badges { display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 0; }
.badge { background:#eef6ff; color:#084e8a; border:1px solid #cfe6ff; padding:3px 9px; border-radius:999px; font-size:.8rem; }
nav { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; align-items:center; }
.nav-link, .lang-switch { border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--fg); padding:7px 11px;
                          font:inherit; font-size:.88rem; cursor:pointer; }
.nav-link:hover, .lang-switch:hover { border-color:#a5bdd8; background:#f5f9fe; text-decoration:none; }
.main-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(230px,1fr); gap:18px; margin-top:18px; align-items:start; }
.main-column, .sidebar, .page-content { display:grid; gap:18px; }
section, .panel { background:var(--card); border:1px solid var(--border); padding:24px; border-radius:15px; }
section p:last-child, .panel p:last-child { margin-bottom:0; }
section ul { padding-left:23px; margin:8px 0; }
section li+li { margin-top:6px; }
.muted, .eyebrow { color:var(--muted); }
.eyebrow { margin:0 0 6px; font-size:.78rem; text-transform:uppercase; letter-spacing:.075em; font-weight:750; }
.course-card { border:1px solid var(--border); border-radius:12px; padding:17px; margin-top:13px; }
.course-card h3 { margin:0 0 6px; }
.course-card p { margin:6px 0 0; }
.course-card .course-links { margin-top:12px; }
.course-links { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.action-link { display:inline-flex; align-items:center; min-height:36px; border:1px solid #c8dbed; border-radius:9px; padding:6px 12px;
               background:#f6faff; color:#07579f; font-size:.9rem; font-weight:650; }
.action-link:hover { background:#e9f4ff; text-decoration:none; }
.page-header { background:var(--card); border:1px solid var(--border); padding:19px 24px; border-radius:15px; }
.page-header .topline { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; }
.page-header h1 { margin-top:10px; }
.page-header nav { margin:0; }
.page-content { margin-top:18px; }
.intro { max-width:800px; }
.lab-list { margin-top:14px; border-top:1px solid var(--border); }
.lab-row { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--border); }
.lab-row h3 { font-size:1rem; margin:0; }
.lab-row p { font-size:.89rem; margin:4px 0 0; color:var(--muted); }
.lab-num { font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--brand); }
.resource-links { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.resource { font-size:.82rem; font-weight:650; padding:6px 9px; border-radius:7px; border:1px solid #c8dbed; color:#07579f; background:#f5faff;
            min-width:66px; text-align:center; white-space:nowrap; }
.resource--pending { background:#f7f8fa; border:1px solid #e0e4e9; color:#79838e; cursor:default; }
a.resource:hover { background:#e5f2ff; text-decoration:none; }
.note { padding:12px 16px; background:#f4f7fb; color:#435267; border-left:3px solid #99b6d6; border-radius:5px; font-size:.9rem; }
.meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.meta-item { background:#f8fafc; padding:13px 15px; border-radius:10px; border:1px solid var(--border); }
.meta-item b { display:block; font-size:.88rem; }
footer { text-align:center; padding:20px 0 6px; color:var(--muted); font-size:.88rem; }
[data-lang="fr"] .lang-en { display:none !important; }
[data-lang="en"] .lang-fr { display:none !important; }
@media(max-width:800px) { .main-layout { grid-template-columns:1fr; } .avatar-frame { width:112px; min-width:112px; height:145px; } }
@media(max-width:640px) { .wrap { padding:12px; } .site-header { padding:16px; gap:14px; flex-direction:column; align-items:flex-start; }
  .page-header, section, .panel { padding:17px; } .lab-row { grid-template-columns:1fr; gap:8px; } .resource-links { justify-content:flex-start; }
  .meta-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }