/* Page « À propos » (about.html) — s'appuie sur player.css pour l'en-tête et la base */
.about-main { width:min(1040px, 100% - 32px); margin:0 auto; padding:24px 0 64px; }

/* texte provisoire : souligné en pointillés violets, à remplacer puis retirer la classe "todo" */
.todo { text-decoration:underline dashed rgba(127,59,234,.55); text-decoration-thickness:1px; text-underline-offset:4px; }

/* ---- intro ---- */
.intro { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 5vw, 72px); align-items:center; }
.portrait { margin:0; }
.portrait-ph, .portrait-img { width:100%; aspect-ratio:4 / 5; border-radius:8px; display:block; object-fit:cover; }
.portrait-ph { display:grid; place-content:center; justify-items:center; gap:14px;
  background:radial-gradient(120% 90% at 30% 20%, #efe6fb, #e3d2f5 55%, #c7a6eb); color:#7420ce;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.portrait-ph img { width:64px; height:auto; opacity:.9; }
html[data-theme="dark"] .portrait-ph { background:radial-gradient(120% 90% at 30% 20%, #2a1f3d, #21182f 55%, #3a2560); color:#c7a6eb; }
html[data-theme="dark"] .btn:hover { color:#fff; }

.kicker { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }
.intro h1 { font-size:clamp(34px, 6vw, 64px); font-weight:600; line-height:1; letter-spacing:-.01em; }
.role { font-size:clamp(17px, 2vw, 20px); color:var(--accent); margin-top:14px; }
.lead { font-size:clamp(16px, 1.6vw, 18px); line-height:1.6; margin-top:22px; max-width:56ch; }
.meta { font-size:14px; color:var(--muted); margin-top:18px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; height:44px; padding:0 22px; border-radius:999px; text-decoration:none;
  background:var(--btn-bg); color:var(--btn-fg); font-size:14px; transition:transform .15s, background .2s; }
.btn:hover { transform:translateY(-1px); background:var(--accent); }
.btn.ghost { background:none; color:var(--fg); border:1px solid var(--line); }
.btn.ghost:hover { border-color:var(--fg); background:none; }

/* ---- sections ---- */
.block { margin-top:clamp(56px, 9vw, 96px); }
.block h2 { font-size:12px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:24px; }

.cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.card { padding:22px; border:1px solid var(--line); border-radius:8px; }
.card h3 { font-size:18px; font-weight:600; }
.card p { font-size:14px; line-height:1.55; color:var(--muted); margin-top:10px; }

.timeline { list-style:none; }
.timeline li { display:grid; grid-template-columns:180px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.timeline .when { font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.timeline .what { display:flex; flex-direction:column; gap:4px; }
.timeline b { font-weight:600; font-size:16px; }
.timeline em { font-style:normal; font-size:14px; color:var(--muted); }

.tags { list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.tags li { padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; }

.contact .mail { display:inline-block; font-size:clamp(24px, 4.5vw, 44px); font-weight:600; color:var(--fg); text-decoration-line:none;
  transition:color .2s; word-break:break-all; }
.contact .mail:hover { color:var(--accent); }
.contact .mail.todo { text-decoration:underline dashed rgba(127,59,234,.55); text-decoration-thickness:2px; text-underline-offset:8px; }
.socials { list-style:none; display:flex; flex-wrap:wrap; gap:24px; margin-top:22px; }
.socials a { font-size:15px; color:var(--muted); transition:color .2s; }
.socials a:hover { color:var(--accent); }

.about-foot { width:min(1040px, 100% - 32px); margin:0 auto; padding:24px 0 40px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; font-size:13px; color:var(--muted); }

@media (max-width:760px) {
  .intro { grid-template-columns:1fr; }
  .portrait { max-width:340px; }
  .cards { grid-template-columns:1fr; }
  .timeline li { grid-template-columns:1fr; gap:4px; }
}