/* Polices hébergées localement (Geist, Geist Mono, Instrument Serif · licence OFL) */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/Geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/Geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/GeistMono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/GeistMono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/InstrumentSerif-Italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/InstrumentSerif-Italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/InstrumentSerif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/InstrumentSerif-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Transition douce entre thèmes : on anime les variables de couleur sur :root (pas chaque élément),
   donc tout change en même temps et un clic répété repart de la couleur courante. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #dcd8cd; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #e8e5db; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #222a35; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #535d6c; }
@property --border { syntax: '<color>'; inherits: true; initial-value: #c5c0b2; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #2f5d8a; }
@property --accent-2 { syntax: '<color>'; inherits: true; initial-value: #c9702b; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: #cfd9e0; }
:root { transition: --bg .8s ease, --surface .8s ease, --text .8s ease, --muted .8s ease, --border .8s ease, --accent .8s ease, --accent-2 .8s ease, --accent-soft .8s ease; }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

:root {
  --maxw: 1160px;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bg: #dcd8cd;
  --surface: #e8e5db;
  --text: #222a35;
  --muted: #535d6c;
  --border: #c5c0b2;
  --accent: #2f5d8a;
  --accent-2: #c9702b;
  --accent-soft: #cfd9e0;
  --shadow: 0 4px 20px rgba(20, 30, 50, .07);
}
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11161d;
  --surface: #1a212b;
  --text: #e7ebf1;
  --muted: #9aa5b5;
  --border: #2a3340;
  --accent: #7fb0e0;
  --accent-2: #e8975a;
  --accent-soft: #1f2d3d;
  --shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  font: 16px/1.6 var(--font-body);
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.1; }
h3 { font-family: var(--font-body); font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 1.6rem; }
h2:has(+ .section-intro) { margin-bottom: .4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8rem; }
ul { padding-left: 1.2rem; margin: .5rem 0; }

main, .nav, footer { max-width: var(--maxw); margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
section { padding: 2rem 0 1rem; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1.5rem;
  max-width: none; padding: .8rem max(1.25rem, calc((100% - var(--maxw)) / 2 + 1.25rem));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { font-family: var(--font-display); letter-spacing: -.02em; font-size: 1.5rem; line-height: 1; color: var(--text); text-decoration: none; }
.nav nav { display: flex; flex: 1; justify-content: space-evenly; gap: .3rem; }
.nav nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.nav nav a:hover { color: var(--accent); }
#theme {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.1rem;
}

#menu-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; padding: 0;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px; width: 2.2rem; height: 2.2rem; cursor: pointer;
}
#menu-toggle span { width: 1rem; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s, opacity .2s; }
#menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center;
  padding-top: 4rem; min-height: calc(100vh - 3.7rem); min-height: calc(100svh - 3.7rem);
}
.eyebrow { color: var(--accent-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.hero h1 { font-size: clamp(3.2rem, 7vw + 1rem, 5.5rem); line-height: .95; }
.tagline { font-size: 1.35rem; color: var(--text); margin-bottom: 1rem; }
.tagline em { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.2em; color: var(--accent); }
/* Grand écran : la phrase d'accroche tient sur une ligne, à taille normale */
@media (min-width: 1100px) {
  .hero { grid-template-columns: 1.7fr 1fr; }
  .tagline { white-space: nowrap; }
}
.lead { color: var(--muted); max-width: 38em; }
.hero-photo { margin: 0; justify-self: center; position: relative; }
.hero-photo::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 2px solid var(--accent-2); border-radius: 28px; z-index: 0;
}
.hero-photo img {
  position: relative; z-index: 1; display: block;
  width: min(100%, 360px); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 28px; box-shadow: var(--shadow);
}

/* Buttons */
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.cta.center { justify-content: center; }
.btn {
  display: inline-block; padding: .7rem 1.2rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  text-decoration: none; font-weight: 600; transition: transform .15s, border-color .15s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #0d1218; }

/* Cards */
.section-intro { color: var(--muted); max-width: 42em; margin-bottom: 1.8rem; }
#profil .section-intro, #profile .section-intro { max-width: none; }
@media (min-width: 800px) { #profile .section-intro { white-space: nowrap; } }
.card, .project, .skills > div, .interests > div {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.4rem; box-shadow: var(--shadow);
}
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.duo .plus { align-self: center; }
.duo .card { display: flex; flex-direction: column; padding: 1.8rem; }
.duo .card .badge { align-self: flex-start; margin-bottom: 1.2rem; }
.duo .card h3 { margin-bottom: .7rem; }
.duo .card p { margin-bottom: 1.4rem; }
.duo .card .chips { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--border); justify-content: center; }
.plus { font-size: 2.4rem; font-weight: 300; color: var(--accent-2); }
.badge {
  display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .6rem;
  border-radius: 99px; background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); margin-bottom: .6rem;
}
.synthesis {
  margin-top: 1.8rem; padding: 1.1rem 1.4rem; border-left: 4px solid var(--accent-2);
  background: var(--surface); border-radius: 0 12px 12px 0;
}

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; }
.chips li {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8rem; padding: .2rem .65rem; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid transparent;
}


/* Projects */
.projects { display: grid; gap: 1.3rem; }
.project { transition: transform .2s; }
.project:hover { transform: translateY(-3px); }
.project header { margin-bottom: .6rem; }
.meta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; margin: 0; }
.project li { margin-bottom: .3rem; }

/* Timeline */
.timeline { display: grid; gap: 1.2rem; }
.job {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.2rem;
  padding: 1.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.job.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.when { color: var(--accent-2); font-weight: 600; font-size: .9rem; }
.highlight {
  display: inline-block; font-weight: 700; font-size: .85rem; padding: .2rem .7rem; margin: .6rem 0 .3rem;
  border-radius: 8px; background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: var(--accent-2);
}
code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; background: var(--accent-soft); padding: .1rem .4rem; border-radius: 5px; font-size: .8rem; }

/* Education */
.edu { display: grid; gap: 1rem; }
.edu article { padding-left: 1.2rem; border-left: 3px solid var(--accent); }

/* Skills / interests */
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.skills h3 { text-align: center; margin-bottom: .9rem; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.skills .chips { margin-top: .4rem; justify-content: center; }
.interests { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.interests p { margin: .3rem 0 0; color: var(--muted); font-size: .95rem; }
.interests > div { text-align: center; }

footer { text-align: center; color: var(--muted); font-size: .85rem; padding-bottom: 2rem; }

/* Segmentation des sections */
section:not(.hero) { position: relative; margin-top: 2.5rem; border-top: 1px solid var(--border); }
section:not(.hero)::before {
  content: ""; position: absolute; top: -2px; left: 50%; margin-left: -2.25rem; width: 4.5rem; height: 3px; border-radius: 2px;
  background: var(--accent-2); transform: scaleX(0); transform-origin: center; transition: transform .7s ease;
}
section.in-view::before { transform: scaleX(1); }
section:not(.hero) h2 { text-align: center; }
section:not(.hero) .section-intro { margin-left: auto; margin-right: auto; text-align: center; }
.filters { justify-content: center; }
.nav nav a { flex: 1 1 0; max-width: 7.5rem; text-align: center; padding: .3rem 0; border-radius: 99px; transition: color .2s, background .2s; }
.nav nav a.active { color: #fff; background: var(--accent); }
:root[data-theme="dark"] .nav nav a.active { color: #0d1218; }
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 20; background: var(--accent-2); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  section:not(.hero)::before { transform: scaleX(1); transition: none; }
  html { scroll-behavior: auto; }
}

/* Mobile */
@media (max-width: 760px) {
  .nav { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; justify-items: center; gap: .5rem; }
  .brand { justify-self: start; }
  #menu-toggle { display: inline-flex; }
  .nav nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: flex-start; gap: 0; counter-reset: item;
    padding: .4rem 1.25rem 1rem;
    background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-.6rem);
    transition: opacity .25s, transform .25s, visibility 0s .25s;
  }
  .nav nav.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s; }
  .nav nav a {
    flex: none; max-width: none; display: flex; align-items: baseline; gap: .9rem; text-align: left;
    padding: .85rem .2rem; border-radius: 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--text);
    opacity: 0; transform: translateY(-.4rem); transition: opacity .3s, transform .3s, color .2s;
  }
  .nav nav a::before {
    counter-increment: item; content: "0" counter(item);
    font-family: var(--font-mono); font-size: .75rem; color: var(--accent-2);
  }
  .nav nav a:last-child { border-bottom: 0; }
  .nav nav.open a { opacity: 1; transform: none; }
  .nav nav.open a:nth-child(2) { transition-delay: .04s; }
  .nav nav.open a:nth-child(3) { transition-delay: .08s; }
  .nav nav.open a:nth-child(4) { transition-delay: .12s; }
  .nav nav.open a:nth-child(5) { transition-delay: .16s; }
  .nav nav.open a:nth-child(6) { transition-delay: .2s; }
  .nav nav a.active, :root[data-theme="dark"] .nav nav a.active { background: none; color: var(--accent); }
  .nav nav a.active::after { content: ""; margin-left: auto; align-self: center; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent-2); }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 2rem; padding-top: 2.5rem; }
  .hero-photo { order: -1; }
  .hero-photo { width: min(78%, 280px); justify-self: center; }
  .hero-photo img { width: 100%; margin: 0; }
  .duo { grid-template-columns: 1fr; }
  .plus { text-align: center; }
  .job { grid-template-columns: 1fr; gap: .3rem; }
}

.project-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .8rem; padding-right: 1.2rem; }
.project-foot .chips { margin: 0; }
.project .links { margin: 0; font-weight: 600; }
.gh-btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; border-radius: 99px;
  background: var(--accent);
  color: #fff; text-decoration: none;
  transition: transform .2s;
}
:root[data-theme="dark"] .gh-btn { color: #0d1218; }
.gh-btn svg { transition: transform .35s; }
.gh-arrow { display: inline-block; transition: transform .2s; }
.gh-btn:hover, .gh-btn:focus-visible { transform: translateY(-3px) scale(1.04); }
.gh-btn:hover svg { transform: rotate(-12deg) scale(1.15); }
.gh-btn:hover .gh-arrow { transform: translateX(4px); }
.gh-btn:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) { .gh-btn, .gh-btn svg, .gh-arrow { transition: none; } }

.cv-viewer {
  display: block; width: 100%; height: 80vh; min-height: 520px; margin-top: 1.5rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.cv-viewer p { padding: 1.5rem; }
@media (max-width: 760px) { .cv-viewer { display: none; } }
#cv .cta { justify-content: center; }

.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px; height: 2.2rem;
  border: 1px solid var(--border); border-radius: 99px; background: var(--surface);
}
.lang-switch a, .lang-switch span {
  display: inline-flex; align-items: center; padding: 0 .75rem; border-radius: 99px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-decoration: none;
  color: var(--muted); transition: background .2s, color .2s;
}
.lang-switch a:hover { color: var(--accent); background: var(--accent-soft); }
.lang-switch .active { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .lang-switch .active { color: #0d1218; }

/* Filtres de projets */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.filter {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .4rem .95rem; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  transition: background .2s, color .2s, border-color .2s;
}
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .filter.active { color: #0d1218; }
.project[hidden] { display: none; }
.project.pop { animation: pop .35s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cartes dépliables */
.details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.details-inner { overflow: hidden; min-height: 0; }
.project.open .details { grid-template-rows: 1fr; }
.toggle {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; padding: .3rem 0; margin-top: .4rem;
  background: none; border: 0; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem;
}
.toggle::after { content: "▾"; transition: transform .25s; }
.project.open .toggle::after { transform: rotate(180deg); }
.toggle:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .details, .toggle::after, .project.pop { transition: none; animation: none; }
}

/* Frise du parcours */
.tl { list-style: none; margin: 1.5rem 0 0; padding: 0 0 0 1.6rem; position: relative; }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; margin-bottom: .8rem; --c: var(--accent); }
.tl-item[data-type="experience"] { --c: var(--accent-2); }
.tl-item[data-type="projet"] { --c: #3f8f6b; }
.tl-item[data-type="objectif"] { --c: var(--muted); }
:root[data-theme="dark"] .tl-item[data-type="projet"] { --c: #6cc79f; }
.tl-item::before {
  content: ""; position: absolute; left: -1.6rem; top: 1.15rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--c); transition: transform .2s, background .2s;
}
.tl-item[data-type="objectif"]::before { border-style: dashed; }
.tl-item.open::before, .tl-item:hover::before { background: var(--c); transform: scale(1.15); }
.tl-item[hidden] { display: none; }
.tl-card {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem;
  padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--c); border-radius: 12px; transition: box-shadow .2s, transform .2s;
}
.tl-card:hover, .tl-item.open .tl-card { box-shadow: var(--shadow); transform: translateX(3px); }
.tl-when { grid-column: 1; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c); font-size: .8rem; font-weight: 500; }
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }
.tl-title { grid-column: 1; font-weight: 700; }
.tl-sub { grid-column: 1; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.tl-type {
  grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: .72rem; font-weight: 700;
  padding: .15rem .6rem; border-radius: 99px; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.tl-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.tl-detail > div { overflow: hidden; min-height: 0; }
.tl-detail p { margin: 0; padding: .7rem 1.1rem .2rem; color: var(--muted); font-size: .93rem; }
.tl-item.open .tl-detail { grid-template-rows: 1fr; }
@media (hover: hover) { .tl-item:hover .tl-detail { grid-template-rows: 1fr; } }
.tl-today { position: relative; margin: 1rem 0 1rem; height: 0; border-top: 2px dashed var(--accent-2); }
.tl-today span {
  position: absolute; right: 0; top: -.85rem; font-size: .72rem; font-weight: 700; padding: .1rem .6rem;
  border-radius: 99px; background: var(--accent-2); color: #fff;
}
:root[data-theme="dark"] .tl-today span { color: #0d1218; }
.tl-today::before {
  content: ""; position: absolute; left: -1.6rem; top: -7px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent-2);
}
.tl-filter {
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; padding: .4rem .95rem; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: background .2s, color .2s;
}
.tl-filter:hover { border-color: var(--accent); color: var(--accent); }
.tl-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .tl-filter.active { color: #0d1218; }
@media (max-width: 760px) { .tl-card { grid-template-columns: 1fr; } .tl-type { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .3rem; } }
@media (prefers-reduced-motion: reduce) { .tl-detail, .tl-card, .tl-item::before { transition: none; } }

/* Adresse e-mail copiable */
.copy-mail { position: relative; cursor: pointer; font: inherit; font-weight: 600; }
.copy-mail::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px);
  padding: .35rem .7rem; border-radius: 8px; white-space: nowrap; font-size: .8rem; font-weight: 600; pointer-events: none;
  background: var(--text); color: var(--bg); opacity: 0; transition: opacity .15s, transform .15s;
}
.copy-mail:hover::after, .copy-mail:focus-visible::after, .copy-mail.copied::after { opacity: 1; transform: translate(-50%, 0); }
.copy-mail.copied::after, .copy-mail.done::after { background: #2e9d5b; color: #fff; }
.copy-mail.done::after { opacity: 0 !important; }

.btn-icon { display: inline-flex; align-items: center; gap: .5rem; }

/* Fond : constellation */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.interests > div > strong { display: block; text-align: center; }
.interests .links { margin: .8rem 0 0; text-align: center; }
.yt-btn, .sp-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--border); box-shadow: none;
  padding: .25rem .7rem; font-size: .85rem; gap: .4rem;
}
:root[data-theme="dark"] .yt-btn, :root[data-theme="dark"] .sp-btn { color: var(--muted); }
.yt-btn svg, .sp-btn svg { width: 14px; height: 14px; }
.yt-btn:hover, .yt-btn:focus-visible, .sp-btn:hover, .sp-btn:focus-visible {
  color: var(--accent); border-color: var(--accent); box-shadow: none; transform: translateY(-1px);
}
:root[data-theme="dark"] .yt-btn:hover, :root[data-theme="dark"] .sp-btn:hover { color: var(--accent); }

/* Curseur : flèche bleue aux couleurs du site, main orange sur les éléments cliquables */
html { cursor: url("assets/cursors/default-light.png") 4 3, auto; }
:root[data-theme="dark"] { cursor: url("assets/cursors/default-dark.png") 4 3, auto; }
a, button, summary, label, select, [role="button"], .tl-card, .copy-mail { cursor: url("assets/cursors/pointer-light.png") 13 5, pointer !important; }
:root[data-theme="dark"] :is(a, button, summary, label, select, [role="button"], .tl-card, .copy-mail) { cursor: url("assets/cursors/pointer-dark.png") 13 5, pointer !important; }