:root { --bg:#111214; --ink:#f2f2f0; --soft:#b8b9b4; --faint:#6f716c; --line:#26282c; --accent:#ff6a1f; --ph:#ffb28a; }
* { box-sizing:border-box; }
html { font-size:17px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.55; }
a { color:var(--ink); }
.wrap { max-width:680px; margin:0 auto; padding:0 22px 80px; }
header { padding:64px 0 24px; }
.photo { width:100%; max-width:200px; aspect-ratio:1; height:auto; object-fit:cover; object-position:center top; display:block; background:#1d1f23; }
.name { font-size:1rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); margin:16px 0 4px; }
h1 { font-size:2.35rem; line-height:1.12; margin:0 0 16px; letter-spacing:-.01em; }
.intro { font-size:1.18rem; color:#d9dad5; margin:0; max-width:36em; }
.gap { height:64px; }
.project { display:grid; grid-template-columns:52px 1fr; gap:18px; padding:26px 0; border-top:1px solid var(--line); }
.logo { width:52px; height:52px; background:#1d1f23; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:var(--faint); text-align:center; overflow:hidden; }
.soon { font-size:.8rem; font-weight:400; color:var(--faint); font-style:italic; }
.logo img { width:100%; height:100%; object-fit:cover; display:block; }
.project h2 { font-size:1.25rem; margin:0 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.project h2 a { text-decoration:none; }
.project h2 a:hover { text-decoration:underline; text-decoration-color:var(--accent); }
.dot { width:.55rem; height:.55rem; flex:none; background:var(--faint); }
.dot.hot { background:var(--accent); } .dot.on { background:#3ddc84; }
.tags { display:inline-flex; gap:6px; flex-wrap:wrap; }
.tag { font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); border:1px solid var(--line); padding:2px 8px; }
.tag.link { color:var(--ink); border-color:#44474d; text-decoration:none; }
.tag.link::after { content:" ↗"; color:var(--accent); }
.tag.link:hover { border-color:var(--accent); color:var(--accent); }
.project p { margin:0; color:var(--soft); }
.project p + p { margin-top:10px; }
.faq { border-top:1px solid var(--line); padding:26px 0; }
.faq h2 { font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.faq dt { font-weight:600; margin-top:14px; } .faq dd { margin:4px 0 0; color:var(--soft); }
footer { color:var(--faint); font-size:.85rem; margin-top:40px; }
.side { padding:64px 0 0; }
.side .links { margin-top:0; display:grid; gap:8px; font-size:.95rem; }
.side .links a, .side .links .mail { color:var(--soft); text-decoration:none; }
.side .links .mail { white-space:nowrap; }   /* une adresse ne se coupe jamais */
.side .links a:hover { color:var(--ink); }
.side-faq { margin-top:32px; font-size:.88rem; }
.fun ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fun li a { color:var(--ink); font-weight:600; text-decoration:none; } .fun li a:hover { color:var(--accent); }
.fun .note { font-size:.75rem; color:var(--faint); }
.side-faq dd { line-height:1.5; }
.back { display:inline-block; color:var(--faint); text-decoration:none; margin:40px 0 0; font-size:.9rem; }
.back:hover { color:var(--ink); }
.talks-grid { display:grid; gap:40px; padding:48px 0 24px; align-items:start; }
.talks-hero .photo { margin-bottom:24px; }
.talks-col { margin-top:0; }
.talks-hero .photo { max-width:320px; }
.talks-hero h1 { margin:0 0 12px; }
.talks-hero .intro { font-size:1.08rem; }
.topics { margin:22px 0 0; padding-left:1.1em; color:#d9dad5; }
.topics li { margin:6px 0; }
.cta { margin:24px 0 0; padding:16px 18px; border:1px solid var(--line); color:var(--soft); }
.talklist { list-style:none; padding:0; margin:0; }
.talklist li { display:grid; grid-template-columns:6.5rem 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.talklist time { color:var(--faint); font-size:.9rem; }
.talklist .where { color:var(--soft); font-size:.95rem; }
.talklist .when .tags { margin-top:6px; gap:4px; }
.talklist .when .tag { font-size:.62rem; padding:1px 5px; }
@media (min-width:900px) { .talks-grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; padding-top:80px; } .talks-col { border-top:0; padding-top:0; } }
.ph { border:1px dashed var(--ph); color:var(--ph); padding:.05rem .4rem; font-size:.85em; }
.photo.ph-img { display:flex; align-items:center; justify-content:center; text-align:center; font-size:.75rem; color:var(--ph); border:1px dashed var(--ph); background:transparent; padding:12px; }
@media (max-width:759px) {
  html { font-size:15px; }
  .wrap { display:grid; grid-template-columns:136px minmax(0,1fr); column-gap:14px; padding:0 16px 64px; }
  main { display:contents; }
  main > * { grid-column:1 / -1; }
  .side { grid-column:1; grid-row:1; padding-top:32px; }
  main > header { grid-column:2; grid-row:1; padding:32px 0 8px; }
  .photo { max-width:136px; }
  .name { font-size:.72rem; margin:8px 0 2px; letter-spacing:.14em; }
  .side .links { font-size:.6rem; gap:4px; line-height:1.35; }
  .side-faq { display:none; }
  h1 { font-size:1.1rem; margin-bottom:6px; }
  .intro { font-size:.7rem; line-height:1.4; }
  .fun.foot-faq { padding:16px 0; }
  .fun.foot-faq + .gap { display:none; }
  .fun h2 { font-size:.62rem; margin-bottom:8px; }
  .fun ul { gap:4px; }
  .fun li { line-height:1.35; }
  .fun li a { font-size:.72rem; }
  .fun .note { display:none; }
  .gap { height:28px; }
  .project { gap:12px; grid-template-columns:40px 1fr; padding:20px 0; }
  .logo { width:40px; height:40px; }
  .project h2 { font-size:.95rem; gap:8px; }
  /* YOUTUBE / X / PODCAST : 23 px de haut, serrés = raté au doigt (audit 07/10). Plus haut, même taille de texte. */
  .project .tags { gap:6px; }
  .project .tag.link { padding:7px 6px; }
  .project p { font-size:.8rem; line-height:1.45; }
}
@media (min-width:760px) { .foot-faq { display:none; } }
@media (min-width:760px) {
  html { font-size:18px; }
  .wrap { max-width:1120px; display:grid; grid-template-columns:minmax(15.5rem,25%) 1fr; gap:56px; align-items:start; }
  .side { position:sticky; top:0; padding-top:96px; }
  header { padding-top:96px; }
}