/* ==========================================================================
   Nord Magnétique – feuille de style
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0c0e11;
  --bg-raise: #13161b;
  --fg: #ebe8e2;
  --fg-soft: #b9b6b0;
  --muted: #7d828b;
  --line: rgba(235, 232, 226, .12);
  --line-soft: rgba(235, 232, 226, .06);

  /* Le rouge de la pointe nord de l'aiguille */
  --north: #ff4b33;

  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(6rem, 13vw, 11rem);
  --hud-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--hud-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1rem, .3vw + .95rem, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--north); color: #fff; }

:focus-visible {
  outline: 1.5px solid var(--north);
  outline-offset: 4px;
}

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: .8rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Graticule : quadrillage de carte, fixe derrière tout le site */
.graticule {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%);
}

/* Boutons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn span { display: inline-block; }
.btn-primary { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-primary:hover { background: var(--north); border-color: var(--north); color: #fff; }
.btn-ghost:hover { border-color: var(--fg); }

/* HUD : en-tête et relevé ------------------------------------------------- */

.hud-top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--hud-h);
  padding-inline: var(--gutter);
  transition: background-color .4s, box-shadow .4s;
}
.hud-top.is-scrolled {
  background: rgba(12, 14, 17, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-right: auto;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.brand-mark { width: 22px; height: 22px; }
.brand-mark circle { fill: none; stroke: var(--line); }
.brand-north { fill: var(--north); }
.brand-south { fill: var(--fg); }
.brand-sep { color: var(--muted); margin-inline: .15em; }

.nav ol { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding-block: .5rem;
  font-size: .875rem;
  color: var(--fg-soft);
  text-decoration: none;
  transition: color .3s;
}
.nav-index {
  font-family: var(--mono);
  font-size: .6875rem;
  color: var(--muted);
  transition: color .3s;
}
.nav a:hover,
.nav a[aria-current="true"] { color: var(--fg); }
.nav a[aria-current="true"] .nav-index { color: var(--north); }

.hud-compass { width: 34px; height: 34px; flex: none; }
.hud-compass svg { width: 100%; height: 100%; overflow: visible; }
.hud-compass-ring { fill: none; stroke: var(--line); }
.hud-compass-ticks line { stroke: var(--muted); stroke-width: 1; }
.needle-north { fill: var(--north); }
.needle-south { fill: var(--fg); }

.hud-bottom {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  padding: 2.5rem var(--gutter) 1.25rem;
  background: linear-gradient(to top, var(--bg) 35%, transparent);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.hud-readout { color: var(--fg-soft); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle-icon { display: grid; gap: 6px; width: 22px; }
.menu-toggle-icon span { height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; position: relative; z-index: 2; }
  .hud-compass { display: none; }
  .brand { position: relative; z-index: 2; }
  .hud-top { gap: 1.25rem; }

  .nav {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    padding: var(--hud-h) var(--gutter) 3rem;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s .45s;
  }
  .nav ol { flex-direction: column; gap: .5rem; }
  .nav a { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.02em; color: var(--fg); gap: 1rem; }
  .nav-index { font-size: .8rem; }
  .menu-open .nav { opacity: 1; visibility: visible; transition-delay: 0s; }
  .menu-open .hud-top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open { overflow: hidden; }

  .hud-bottom { display: none; }
}

/* Typographie de section ------------------------------------------------- */

.section { position: relative; padding-block: var(--section-y); }

.section-index {
  margin-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-index span { color: var(--north); }

.section-title {
  max-width: 16ch;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.section-head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.section-intro { max-width: 40rem; margin-top: 1.75rem; color: var(--fg-soft); }

.prose { max-width: 36rem; margin-top: 2.5rem; color: var(--fg-soft); }
.prose p + p { margin-top: 1.1em; }

/* 00 · Accueil ----------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--hud-h) + 2rem) var(--gutter) 5rem;
  overflow: hidden;
}

/* Relief : calque unique derrière toutes les sections de main */
/* overflow: clip (et non hidden) : le relief décalé n'allonge pas la page, et le sticky continue de fonctionner */
main { position: relative; overflow: clip; }
.contours {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.contours path { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.contours path.major { stroke: var(--line); }

/* Raie topographique : calque fixe entre le relief et le contenu */
.manta {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.eyebrow {
  margin-bottom: 1.75rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-title {
  font-size: clamp(2.75rem, 6.2vw, 6.75rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.05em;
}
.hero-title .line-mask { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

.hero-lead {
  max-width: 34rem;
  margin-top: 2rem;
  font-size: 1.125rem;
  color: var(--fg-soft);
}
.hero-lead a { text-decoration-color: var(--north); text-underline-offset: .2em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.instrument { position: relative; justify-self: center; width: min(100%, 28rem); padding-top: 2.5rem; }
.instrument svg { width: 100%; height: auto; overflow: visible; }
.ring { fill: none; }
.ring-outer { stroke: var(--line); }
.ring-inner { stroke: var(--line-soft); }
.ticks line { stroke: var(--muted); stroke-width: 1; }
.ticks line.major { stroke: var(--fg-soft); stroke-width: 1.5; }
.cardinal {
  font-family: var(--mono);
  font-size: 15px;
  fill: var(--muted);
  text-anchor: middle;
  dominant-baseline: middle;
}
.cardinal-n { fill: var(--fg); }
.true-north { stroke: var(--fg-soft); stroke-width: 1; stroke-dasharray: 4 6; }
.decl-arc { fill: none; stroke: var(--north); stroke-width: 1.5; }
.needle-axis { stroke: var(--north); stroke-width: 1; opacity: .7; }
.decl-labels text {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.decl-labels .decl-label-mag { fill: var(--north); }
.needle-pivot { fill: var(--bg); stroke: var(--fg); stroke-width: 2; }

.instrument-readout {
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
  text-decoration: none;
  transform: translateX(-50%);
}
.scroll-cue-line { position: relative; width: 1px; height: 3rem; background: var(--line); overflow: hidden; }
.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .instrument { order: -1; width: min(70%, 18rem); }
  .scroll-cue { display: none; }
}

/* 01 · Déclinaison ------------------------------------------------------- */

.decl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}
.route svg { width: 100%; height: auto; overflow: visible; }
.route-obstacles path { fill: var(--bg-raise); stroke: var(--line); }
.route-plan { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 8; }
.route-real { fill: none; stroke: var(--north); stroke-width: 2.5; stroke-linecap: round; }
.route-fixes circle { fill: var(--bg); stroke: var(--north); stroke-width: 2; }
.route-start { fill: var(--fg); }
.route-goal circle:first-child { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.route-goal circle:last-child { fill: var(--fg); }
.route-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.route-label-real { fill: var(--north); }

@media (max-width: 900px) {
  .decl-grid { grid-template-columns: 1fr; }
  .route { max-width: 26rem; }
}

/* 02 · Parcours ---------------------------------------------------------- */

.path-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.path-intro { position: sticky; top: calc(var(--hud-h) + 3rem); }

.portrait {
  width: min(100%, 15rem);
  margin-top: 3rem;
  border: 1px solid var(--line);
  padding: .5rem;
}
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); }

.path-link { margin-top: 1.5rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.path-link a { color: var(--fg-soft); text-decoration: none; }
.path-link a:hover { color: var(--fg); }

/* Tronçon parcouru avant le premier repère : pointillé, sans étape */
.history-before {
  position: relative;
  max-width: 30rem;
  padding: 0 0 3rem 2.75rem;
  font-size: .9375rem;
  color: var(--muted);
}
.history-before::before {
  content: "";
  position: absolute;
  left: 7px;
  top: .35rem;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--muted) 0 4px, transparent 4px 10px);
  opacity: .7;
}

.timeline { position: relative; padding-left: 2.75rem; }
.timeline::before,
.timeline-progress {
  content: "";
  position: absolute;
  left: 7px;
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  background: var(--line);
}
.timeline-progress { background: var(--north); transform-origin: top; }

.waypoint { position: relative; padding-bottom: clamp(3rem, 7vw, 5.5rem); color: var(--fg-soft); }
.waypoint:last-child { padding-bottom: 0; }
.waypoint::before {
  content: "";
  position: absolute;
  left: calc(-2.75rem + 2px);
  top: .45rem;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--muted);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color .4s, background-color .4s, box-shadow .4s;
}
.waypoint.is-reached::before { border-color: var(--north); background: var(--north); }
.waypoint.is-current.is-reached::before { box-shadow: 0 0 0 6px rgba(255, 75, 51, .18); }

.waypoint-when {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.waypoint-title {
  margin: .5rem 0 .35rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--fg);
}
.waypoint-title a { text-decoration: none; }
.waypoint-title a:hover { color: var(--north); }
.waypoint p a { text-decoration-color: var(--north); text-underline-offset: .2em; }
.waypoint p a:hover { color: var(--fg); }
.waypoint-role { margin-bottom: .75rem; color: var(--fg); }

@media (max-width: 900px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-intro { position: static; }
}

/* 03 · Projets ----------------------------------------------------------- */

.project-list { border-top: 1px solid var(--line); }
.project {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) 4rem;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color .3s, padding .5s var(--ease);
}
.project-index,
.project-tech,
.project-year {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.project-year { text-align: right; }
.project-name {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.project-role { color: var(--fg-soft); }

/* Survol : la ligne survolée reste nette, les autres s'estompent */
@media (hover: hover) and (pointer: fine) {
  /* Seules les lignes avec lien réagissent au survol */
  .project-list:has(a.project:hover) .project { color: var(--muted); }
  .project-list a.project:hover { color: var(--fg); padding-inline: 1rem; }
  a.project:hover .project-index { color: var(--north); }
}


@media (max-width: 900px), (hover: none) {
  .project { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: .35rem 1rem; }
  .project-role, .project-tech { grid-column: 2 / -1; }
  .project-year { grid-column: 3; grid-row: 1; }
}

/* 04 · Savoir-faire ------------------------------------------------------ */

.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.skill {
  padding: 2rem 1.75rem 2.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg-soft);
}
.skill-bearing {
  margin-bottom: 3rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--north);
}
/* Le métier actuel en tête, sur deux colonnes */
.skill:first-child { grid-column: span 2; }
.skill:first-child h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.skill:first-child p:last-child { max-width: 30rem; font-size: 1.125rem; }
@media (max-width: 900px) { .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .skill-grid { grid-template-columns: 1fr; } .skill:first-child { grid-column: auto; } }

.skill h3 {
  margin-bottom: .75rem;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--fg);
}

/* 05 · Contact ----------------------------------------------------------- */

.contact { padding-bottom: calc(var(--section-y) + 2rem); }
.contact-title {
  max-width: 18ch;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.contact-email { margin-top: 3rem; }
.contact-email a {
  display: inline-block;
  font-size: clamp(1.4rem, 4.2vw, 3.25rem);
  letter-spacing: -.03em;
  text-decoration: none;
  border-bottom: 2px solid var(--north);
  padding-bottom: .1em;
  transition: color .3s;
}
.contact-email a:hover { color: var(--north); }
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.copy-status { min-height: 1.5em; margin-top: 1rem; color: var(--north); }
.contact-note { margin-top: 3rem; color: var(--muted); }
.contact-note a { color: var(--fg-soft); text-decoration-color: var(--north); text-underline-offset: .2em; }

/* Pied de page */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: .8125rem;
  color: var(--muted);
}
@media (max-width: 640px) {
  .site-footer { flex-direction: column; padding-bottom: 2rem; }
}

/* États initiaux des animations (seulement avec JS, sinon tout est visible) */
.js [data-reveal] { opacity: 0; transform: translateY(32px); }
.js [data-hero-item] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero-item] { opacity: 1; transform: none; }
  .scroll-cue-line::after { animation: none; }
}