/* Valeurs reprises du thème clair d'interfaces.dev */
:root {
  --bg: oklch(0.991 0 0);
  --surface: oklch(1 0 0);
  --text-strong: oklch(0.244 0 0);   /* gray-1200 */
  --text-body: oklch(0.38 0 0);      /* text-paragraph */
  --text-muted: oklch(0.503 0 0);    /* gray-1100 */
  --line: oklch(0.907 0 0);          /* gray-500 */
  --wordmark-fill: oklch(0.955 0 0); /* gray-300 */
  --wordmark-stroke: oklch(0.89 0 0);/* gray-400 */
  --card: rgb(243 243 241);          /* carte projet, jacobschneider.design */
  --cyan: oklch(0.865 0.127 207.078);
  --blue: oklch(0.623 0.214 259.815);
  --pink: oklch(0.656 0.241 354.308);
  --pink-line: oklch(0.718 0.202 349.761);
  --sky-400: oklch(0.746 0.16 232.661);
  --sky-500: oklch(0.685 0.169 237.323);
  --home: oklch(0.646 0.222 41.116);   /* orange : Marche-en-Famenne */
  --school: oklch(0.623 0.214 259.815);/* bleu : Namur */
  --shadow: 0 0 0 1px #0000000f, 0 1px 2px -1px #0000000f, 0 2px 4px 0 #0000000a;

  --sans: "Inter", system-ui, Arial, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-strong);
  font: 400 16px/1.5 var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.tnum { font-variant-numeric: tabular-nums; }
.inline-block { display: inline-block; }
.wrap { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 20px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
a:focus-visible, button:focus-visible { border-radius: 6px; }
.btn:focus-visible, .byline:focus-visible { border-radius: 9999px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-weight: 500; text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), filter 150ms ease;
}
.btn:active { transform: scale(0.96); }
.btn-xs { height: 32px; padding-inline: 12px; font-size: 14px; }
.btn-xl { height: 48px; min-width: 256px; padding-inline: 24px; font-size: 16px; }
.btn-sky {
  color: #fff;
  background: linear-gradient(var(--sky-400), var(--sky-500));
  box-shadow: inset 0 0 1px 1px rgba(255,255,255,.06), 0 1.5px 2px 0 rgba(0,0,0,.1), 0 0 0 1px var(--sky-500);
}
@media (hover: hover) and (pointer: fine) {
  .btn-sky:hover { filter: brightness(1.06); }
}

/* ---------- Bouton sticky en haut à droite ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: flex-end;
  height: 64px; padding-inline: 24px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* ---------- Annotations façon Figma ---------- */
.anno-host { position: relative; }
.anno { position: absolute; pointer-events: none; user-select: none; }
.chip {
  display: block; white-space: nowrap;
  font: 500 12px/16px var(--mono); letter-spacing: 0; font-style: normal;
  color: var(--text-muted); background: var(--surface);
  border-radius: 8px; padding: 4px 6px; box-shadow: var(--shadow);
}
.chip-swatch { display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; background: var(--text-strong); outline: 1px solid rgba(0,0,0,.12); outline-offset: -1px; }
.link-v { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.link-h { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); display: flex; align-items: center; }
.dash { border: 0 dashed var(--line); }
.link-v .dash { border-left-width: 1px; }
.link-h .dash { border-top-width: 1px; }
.h-3 { height: 12px; } .h-5 { height: 20px; } .w-5 { width: 20px; }
.dot { display: block; flex: none; padding: 2px; border-radius: 50%; background: var(--line); }
.dot::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--surface); }

/* ---------- Hero ---------- */
.hero { padding-top: 64px; padding-bottom: 96px; }
.h-display {
  margin: 0; font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -0.025em;
  color: var(--text-strong); text-wrap: balance;
}
.h-para { color: var(--text-body); }
.serif-line { display: inline-block; }

.xh { position: absolute; left: -8px; right: -8px; height: 2px; background: var(--cyan); }
.xh-top { top: 19px; }
.xh-base { bottom: 6px; }
.anno-xh { top: -30px; left: 50%; transform: translateX(-50%); }
.anno-color { top: -48px; left: 0; }

.sel-box {
  position: absolute; inset: -2px -4px -10px;
  border: 1px solid var(--blue); background: oklch(0.623 0.214 259.815 / 0.05);
  transition: background-color 200ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .sel:hover .sel-box { background: oklch(0.623 0.214 259.815 / 0.1); }
}
.handle { position: absolute; width: 6px; height: 6px; border: 1px solid var(--blue); background: var(--surface); }
.handle.tl { top: -4px; left: -6px; } .handle.tr { top: -4px; right: -6px; }
.handle.bl { bottom: -12px; left: -6px; } .handle.br { bottom: -12px; right: -6px; }
.anno-dim { bottom: 100%; left: 50%; margin-bottom: 28px; transform: translateX(-50%); }
.anno-font { top: 50%; left: calc(100% + 30px); margin-top: 6px; transform: translateY(-50%); }

.byline-col { margin-top: 32px; width: fit-content; display: flex; flex-direction: column; align-items: center; }
.byline {
  display: block; padding: 4px; border-radius: 9999px; text-decoration: none;
  background: var(--bg); box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.byline-in {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 6px; border-radius: 9999px;
  background: var(--surface); box-shadow: var(--shadow);
  font-weight: 500; line-height: 26px; color: var(--text-muted);
  transition: color 200ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .byline:hover .byline-in { color: var(--text-strong); }
}
.byline-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(from 200deg, #ff8a4c, #ff5a1f, #ffb36b, #ff8a4c); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08); }
.spacer { position: relative; width: 32px; height: 32px; border-inline: 1px solid var(--pink-line); background: oklch(0.656 0.241 354.308 / 0.1); }
.spacer span { position: absolute; top: 50%; left: 100%; margin-left: 8px; transform: translateY(-50%); white-space: nowrap; font: 500 12px/16px var(--mono); color: var(--pink); }

.cta-row { display: flex; align-items: stretch; }
.cta-row .btn { position: relative; z-index: 1; }
.cta-bracket { width: 48px; margin-left: -32px; border: 1px dashed var(--line); border-left: 0; }
.cta-link { display: flex; align-items: center; align-self: center; }
.cta-link .dash { width: 16px; border-top-width: 1px; }
.cta-chip { align-self: center; margin-left: 8px; }

/* ---------- Texte (liens façon jacobschneider.design) ---------- */
.prose p { margin: 0 0 20px; font-size: 18px; line-height: 1.65; color: var(--text-body); max-width: 62ch; text-wrap: pretty; }
.prose em { color: var(--text-strong); }
.tool {
  color: #000; font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-color: oklch(0 0 0 / 0.12);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color 200ms cubic-bezier(0.44, 0, 0.56, 1), text-decoration-color 200ms cubic-bezier(0.44, 0, 0.56, 1);
}
.tool img, .tool-ico {
  display: inline-block; width: 20px; height: 20px; margin-right: 6px;
  vertical-align: -4px; border-radius: 5px; overflow: hidden;
  outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px;
  transition: opacity 200ms cubic-bezier(0.44, 0, 0.56, 1);
}
.tool-ico svg { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .tool:hover { color: rgb(0 0 0 / 0.4); text-decoration-color: oklch(0 0 0 / 0.06); }
  .tool:hover img, .tool:hover .tool-ico { opacity: 0.4; }
}

.section { padding-top: 96px; }
.h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.4px; color: var(--text-strong); }
.section-text { margin: 0; font-size: 18px; line-height: 1.65; color: var(--text-body); text-wrap: pretty; }

/* Étapes : chips reliées par des pointillés */
.process { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; }
.process li {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 9999px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 500; color: var(--text-strong);
}
.process li span { font: 500 11px/16px var(--mono); color: var(--text-muted); background: var(--bg); box-shadow: var(--shadow); border-radius: 9999px; padding: 2px 6px; }
.process li + li { margin-left: 16px; }
.process li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 16px; border-top: 1px dashed var(--line); }
.process li.row-start { margin-left: 0; }
.process li.row-start::before { display: none; }

/* Pubs */
.ads { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ad {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--line);
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out);
}
.ad:active { transform: scale(0.96); }
.ad:focus-visible { border-radius: 16px; outline-offset: 3px; }
.ad::after { content: ""; position: absolute; inset: 0; border-radius: inherit; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; pointer-events: none; }
.ad img, .ad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad video { opacity: 0; transition: opacity 200ms ease-out; }
.ad.playing video { opacity: 1; }
.ad-play {
  position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: oklch(1 0 0 / 0.9); box-shadow: var(--shadow); color: var(--text-strong);
  transition: opacity 200ms ease-out;
}
.ad.playing .ad-play { opacity: 0; }
.ad-play svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }

/* Revaform : carte grise, vidéo au centre, nom en dessous */
.work {
  margin: 24px 0 0; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 9% 8% 20px; border-radius: 12px; background: var(--card);
}
.work video { width: 100%; aspect-ratio: 1920 / 968; object-fit: cover; background: var(--surface); border-radius: 10px; outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px; }
.work figcaption { font-size: 15px; line-height: 1.3; color: rgb(0 0 0 / 0.56); }

/* Globe */
.globe-wrap { position: relative; height: 520px; margin-top: 8px; overflow: hidden; }
/* Fondus haut et bas vers le fond de page */
.globe-wrap::after { content: ""; position: absolute; inset-inline: 0; z-index: 2; pointer-events: none; }
.globe-wrap::after { bottom: 0; height: 32%; background: linear-gradient(oklch(0.991 0 0 / 0), var(--bg)); }
#globe { position: absolute; left: 50%; top: 0; width: 1100px; height: 1100px; max-width: none; transform: translateX(-50%); opacity: 0; transition: opacity 800ms ease-out; cursor: grab; touch-action: pan-y; }
#globe:active { cursor: grabbing; }
#globe.on { opacity: 1; }
.pin { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; opacity: 0; transition: opacity 300ms ease-out; will-change: transform; }
.pin.show { opacity: 1; }
.pin-dot { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pin-home { z-index: 2; }
.pin-home .pin-dot { background: var(--home); }
.pin-school .pin-dot { background: var(--school); }
.pin-label { position: absolute; top: 0; display: flex; align-items: center; transform: translateY(-50%); }
.pin-home .pin-label { left: 8px; }
.pin-school .pin-label { right: 8px; flex-direction: row-reverse; }
.pin-line { width: 40px; border-top: 1px dashed oklch(0.7 0 0); transform: scaleX(0); transition: transform 300ms var(--ease-out); }
.pin-home .pin-line { transform-origin: left; }
.pin-school .pin-line { transform-origin: right; }
.pin.show .pin-line { transform: none; }
.pin .chip { opacity: 0; transition: opacity 300ms 150ms ease-out; }
.pin.show .chip { opacity: 1; }

/* ---------- Footer ---------- */
.foot { padding-top: 96px; }
.icon-link { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; color: var(--text-muted); border-radius: 8px; transition: color 150ms ease; }
.icon-link svg { width: 20px; height: 20px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .icon-link:hover { color: #0a66c2; }
}
.wordmark { position: relative; max-width: 760px; height: 128px; margin: 48px auto 0; padding-inline: 20px; overflow: hidden; }
.wordmark::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(to bottom, oklch(0.991 0 0 / 0), var(--bg)); pointer-events: none; }
.wordmark-svg { width: 100%; height: auto; overflow: visible; }
.wordmark-svg .fill { fill: var(--wordmark-fill); }
.wordmark-svg .edge { fill: none; stroke: var(--wordmark-stroke); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: square; }

/* ---------- Lightbox ---------- */
#lightbox { padding: 0; border: 0; background: transparent; overflow: visible; max-width: 100vw; max-height: 100dvh; overscroll-behavior: contain; }
#lightbox::backdrop { background: oklch(0.991 0 0 / 0.85); backdrop-filter: blur(12px); }
.lb-media video { height: min(84dvh, 820px); width: auto; max-width: 92vw; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 20px; background: #000; box-shadow: var(--shadow), 0 30px 60px -30px rgba(0,0,0,.4); }
.lb-close {
  position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--surface); box-shadow: var(--shadow);
  transition: transform 160ms var(--ease-out);
}
.lb-close:active { transform: scale(0.96); }
.lb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* ============ INTRO (copie de context-con) ============ */
#intro { display: none; }
.has-intro #intro { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; touch-action: none; user-select: none; cursor: pointer; }
.has-intro, .has-intro body { overflow: hidden; }
.intro-surface {
  position: absolute; inset: -128px 0 0; border-radius: 0 0 56px 56px;
  background: oklch(0.975 0 0); box-shadow: 0 30px 80px rgba(0,0,0,0.14); will-change: transform;
}
.intro-stage { position: absolute; inset: 128px 0 0; display: grid; place-items: center; padding-inline: 24px; text-align: center; perspective: 900px; }
.intro-stage > * { grid-area: 1 / 1; }
.intro-loading { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-muted); visibility: hidden; }

.intro-display { margin: 0; font-weight: 700; letter-spacing: -0.045em; color: var(--text-strong); line-height: 1; }
.intro-display [data-w] { position: relative; display: inline-block; visibility: hidden; will-change: transform; }
.intro-display .accent { color: var(--sky-500); }
.intro-display [data-ul] { position: absolute; left: 0; right: 0; bottom: -0.04em; height: 0.1em; border-radius: 9999px; background: var(--sky-500); transform: scaleX(0); transform-origin: left; }
.intro-hello { max-width: 12ch; font-size: 3rem; line-height: 0.95; }
.intro-line { max-width: 16ch; margin-inline: auto; font-size: 2.4rem; }
.intro-called-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.intro-called { font-size: 2.4rem; }
.intro-logo { display: flex; flex-direction: column; align-items: center; visibility: hidden; font-family: "Bowlby One", var(--sans); font-weight: 400; letter-spacing: -0.02em; line-height: 0.86; font-size: min(11.5vw, 86px); color: #111; filter: url(#soft-corners); will-change: transform; }
.intro-logo-row { display: block; white-space: nowrap; }
.intro-logo-row2 { font-size: 1.2em; }
.intro-logo [data-l] > i { display: inline-block; font-style: normal; transform: rotate(var(--r)) translateY(var(--dy)); }
.intro-logo [data-l] { display: inline-block; }


@media (min-width: 640px) {
  .intro-hello { font-size: 3.75rem; }
  .intro-line, .intro-called { font-size: 3rem; }
}
@media (min-width: 1024px) {
  .intro-hello { font-size: 4.5rem; }
  .intro-line, .intro-called { font-size: 3.75rem; }
  .intro-called-wrap { gap: 36px; }
}

@media (prefers-reduced-motion: no-preference) {
  #lightbox[open] { animation: lb-in 250ms var(--ease-out); }
  #lightbox[open]::backdrop { animation: fade-in 250ms var(--ease-out); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-in { from { opacity: 0; transform: scale(0.96); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .anno-font { display: none; }
}
@media (max-width: 720px) {
  .anno-dim, .anno-xh { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }
  .nav { padding-inline: 16px; }
  .hero { padding-top: 72px; padding-bottom: 72px; }
  .h-display { font-size: 44px; }
  .xh-top { top: 14px; } .xh-base { bottom: 4px; }
  .anno-color { top: -46px; }
  .cta-row { flex-direction: column; align-items: center; width: 100%; }
  .cta-row .btn { width: 100%; min-width: 0; }
  .cta-bracket { width: 100%; height: 40px; margin: -24px 0 0; border: 1px dashed var(--line); border-top: 0; }
  .cta-link { flex-direction: column; }
  .cta-link .dash { width: 0; height: 12px; border-top-width: 0; border-left-width: 1px; }
  .cta-chip { margin: 8px 0 0; }
  .prose p, .section-text { font-size: 17px; }
  .ads { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .work { padding: 10% 6% 16px; }
  .globe-wrap { height: 380px; }
  #globe { width: 760px; height: 760px; }
  .wordmark { height: 64px; padding-inline: 16px; margin-top: 32px; }
  .intro-logo { filter: url(#soft-corners-sm); }
}

/* Message « adresse copiée » */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 9999px; background: var(--text-strong); color: #fff;
  font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px -8px rgba(0,0,0,.35);
  transform: translate(-50%, calc(100% + 32px)); opacity: 0; pointer-events: none;
  transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
  .toast { transform: translate(-50%, 0); transition: opacity 200ms ease; }
}