/* =====================================================================
   Aurélien Henno — page personnelle
   Colonne unique, sans/mono, near-black + accent ambre. Fait main.
   ===================================================================== */

:root {
  /* Thème sombre (par défaut) */
  --bg:      #0b0b0c;
  --text:    #e9e7e1;
  --strong:  #ffffff;
  --muted:   #9d9b93;
  --faint:   #6b6963;
  --line:    rgba(233,231,225,.12);
  --line-2:  rgba(233,231,225,.20);
  --accent:  #e8894a;   /* ambre chaud, sobre */
  --on-accent:#0b0b0c;
  --panel:   rgba(255,255,255,.02);
  --top-bg:  rgba(11,11,12,.82);

  --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --col:  680px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* Thème clair */
:root[data-theme="light"] {
  --bg:      #faf9f6;
  --text:    #2c2a25;
  --strong:  #141210;
  --muted:   #5d5a52;
  --faint:   #8b877e;
  --line:    rgba(20,18,16,.12);
  --line-2:  rgba(20,18,16,.20);
  --accent:  #b5611c;
  --on-accent:#ffffff;
  --panel:   rgba(20,18,16,.025);
  --top-bg:  rgba(250,249,246,.85);
}

html { transition:background .3s var(--ease); }
body { transition:background .3s var(--ease), color .3s var(--ease); }

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.72;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
img { display:block; max-width:100%; }
strong { color:var(--strong); font-weight:600; }
::selection { background:var(--accent); color:var(--on-accent); }

/* ---------- Barre du haut ---------- */
.top {
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 28px;
  background:var(--top-bg); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top__name { font-weight:600; font-size:15px; letter-spacing:.2px; }
.top__nav { display:flex; align-items:center; gap:22px; font-family:var(--mono); font-size:13px; }
.top__nav a { color:var(--muted); transition:color .2s; }
.top__nav a:hover { color:var(--accent); }

/* Bouton thème */
.toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  color:var(--muted); border:1px solid var(--line); background:transparent;
  transition:color .2s, border-color .2s;
}
.toggle:hover { color:var(--accent); border-color:var(--line-2); }
.toggle__moon { display:none; }
.toggle__sun  { display:inline-flex; }
:root[data-theme="light"] .toggle__sun  { display:none; }
:root[data-theme="light"] .toggle__moon { display:inline-flex; }

/* ---------- Colonne ---------- */
.page { max-width:var(--col); margin:0 auto; padding:0 28px 80px; }

/* ---------- Intro ---------- */
.intro { padding:64px 0 8px; }
.intro__ph {
  width:132px; height:132px; border-radius:20px; object-fit:cover; object-position:center 18%;
  filter:grayscale(1) contrast(1.02) brightness(.97);
  border:1px solid var(--line-2); margin-bottom:28px;
  transition:filter .5s var(--ease);
}
.intro__ph:hover { filter:none; }
.meta { font-family:var(--mono); font-size:13px; color:var(--faint); letter-spacing:.2px; }
.intro__name {
  font-size:clamp(2.6rem,7vw,3.6rem); font-weight:800; letter-spacing:-1.6px;
  line-height:1.05; margin:10px 0 22px; color:var(--strong);
}
.intro__hook {
  font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:1.45; color:var(--text);
  max-width:22ch; font-weight:500; border-left:2px solid var(--accent); padding-left:18px;
}
.prose { margin-top:30px; }
.prose p { color:var(--muted); }

/* ---------- En ce moment ---------- */
.now { margin:40px 0 8px; padding:22px 24px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.now p { color:var(--muted); font-size:16px; }
.now__tag {
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.5px;
  color:var(--accent); border:1px solid var(--line-2); border-radius:5px;
  padding:2px 8px; margin-right:10px; vertical-align:1px;
}

/* ---------- Bloc + label ---------- */
.block { margin-top:60px; }
.lab {
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--muted);
  letter-spacing:.3px; text-transform:lowercase; margin-bottom:26px;
}
.lab span { width:26px; height:2px; background:var(--accent); border-radius:2px; }

/* ---------- Lignes (parcours / formations) ---------- */
.rows { border-top:1px solid var(--line); }
.row {
  display:grid; grid-template-columns:150px 1fr; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.row__date { font-family:var(--mono); font-size:13px; color:var(--faint); padding-top:3px; white-space:nowrap; }
.row__body h3 { font-size:17px; font-weight:600; color:var(--strong); }
.row__body h3 em { font-style:normal; font-weight:400; color:var(--faint); font-size:14px; }
.row__body p { color:var(--muted); font-size:15px; margin-top:5px; }

/* ---------- Outils (clé / valeur) ---------- */
.kv { border-top:1px solid var(--line); }
.kv > div {
  display:grid; grid-template-columns:160px 1fr; gap:26px;
  padding:14px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.kv dt { font-family:var(--mono); font-size:13px; color:var(--accent); }
.kv dd { color:var(--text); font-size:15.5px; }

/* ---------- Me joindre ---------- */
.joindre__intro { color:var(--muted); margin-bottom:24px; max-width:46ch; }
.links { display:flex; flex-direction:column; }
.links li {
  display:grid; grid-template-columns:96px 1fr; gap:26px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.links li:first-child { border-top:1px solid var(--line); }
.links__k { font-family:var(--mono); font-size:13px; color:var(--faint); }
.links a {
  font-size:18px; font-weight:600; color:var(--strong);
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s; width:max-content;
}
.links a:hover { color:var(--accent); border-bottom-color:var(--accent); }

.signoff {
  margin-top:30px; font-size:16px; color:var(--muted);
}
.signoff span { color:var(--accent); font-weight:600; }

/* ---------- Footer ---------- */
.foot {
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:12.5px; color:var(--faint);
}

/* ---------- Apparition (très discrète) ---------- */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:560px) {
  body { font-size:16px; }
  .top { padding:16px 20px; }
  .top__nav { gap:16px; }
  .page { padding:0 20px 64px; }
  .intro { padding:44px 0 4px; }
  .row, .kv > div, .links li { grid-template-columns:1fr; gap:4px; }
  .row__date { padding-top:0; }
  .kv > div { gap:2px; }
}
@media (max-width:440px) {
  .top__nav a { display:none; }   /* on garde le bouton thème */
}

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; }
}