/* ==========================================================================
   LUCAS BEN HASSAN — PORTFOLIO — THEME CLEAN / MASCOTTE CRABE
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

:root {
  /* Palette */
  --white: #ffffff;
  --off-white: #faf8f5;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --grey: #6b6b6b;
  --line: #e4e0d8;

  --rust: #d4551e;
  --rust-dark: #b8431a;
  --rust-light: #f0754a;
  --rust-glow: #ff8c52;

  --font: 'JetBrains Mono', 'Courier New', monospace;

  color-scheme: light;
}

html[data-theme="dark"] {
  --white: #14110e;
  --off-white: #1a1613;
  --ink: #f2ede4;
  --ink-soft: #c9c0b3;
  --grey: #8a8074;
  --line: #332c25;

  --rust: #ff7a3d;
  --rust-dark: #d4551e;
  --rust-light: #ff9c65;
  --rust-glow: #ffb37e;

  color-scheme: dark;
}

html {
  transition: background-color 0.4s ease;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;
  font-size: 16px;
}

::selection {
  background: var(--rust);
  color: var(--white);
}

img, svg { display: block; max-width: 100%; }

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   METALLIC RUST TEXT / SURFACE EFFECT
   Used on headline accents and solid buttons: a warm gradient plus a subtle
   glow, to read as "brushed metal catching orange light" rather than flat.
   ========================================================================== */

.metal-text {
  background: linear-gradient(160deg, var(--rust-glow) 0%, var(--rust) 45%, var(--rust-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(212, 85, 30, 0.18);
}

.btn.metal-surface {
  background: linear-gradient(160deg, var(--rust-glow) 0%, var(--rust) 50%, var(--rust-dark) 100%);
  box-shadow: 0 0 0 1px var(--rust-dark), 0 6px 18px rgba(212, 85, 30, 0.28);
}

/* ==========================================================================
   NAV
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--white) 92%, transparent);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
}

/* Logo intro animation: crab slides in from the right with overshoot,
   uncovering the name as it passes over it. Replays on every page load.
   The name's box width is fixed from the start (no reflow of the nav);
   only a clip-path reveals it, in sync with the crab's position. */
.logo-slide {
  animation: logo-crab-slide 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
  position: relative;
  z-index: 2;
}

@keyframes logo-crab-slide {
  from { transform: translateX(140px); }
  to { transform: translateX(0); }
}

.logo-reveal {
  display: inline-block;
  clip-path: inset(0 0 0 100%);
  animation: logo-name-reveal 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.2s;
}

@keyframes logo-name-reveal {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-slide { animation: none; }
  .logo-reveal { animation: none; max-width: none; }
}

.brand-crab {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

/* ==========================================================================
   CRAB ANIMATION — two poses stacked, cross-faded on a loop to read as a
   claw-clacking cycle. Reused everywhere the mascot appears.
   ========================================================================== */

.crab-anim {
  position: relative;
  display: inline-block;
}

.crab-anim svg {
  image-rendering: pixelated;
  width: 100%;
  height: 100%;
}

.crab-anim svg:first-child {
  position: relative;
  animation: crab-pose-a 2.4s steps(1) infinite;
}

.crab-anim svg:last-child {
  position: absolute;
  inset: 0;
  animation: crab-pose-b 2.4s steps(1) infinite;
}

@keyframes crab-pose-a {
  0%, 74% { opacity: 1; }
  75%, 100% { opacity: 0; }
}

@keyframes crab-pose-b {
  0%, 74% { opacity: 0; }
  75%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .crab-anim svg:first-child,
  .crab-anim svg:last-child { animation: none; }
  .crab-anim svg:last-child { opacity: 0; }
}

.brand-name {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s;
  position: relative;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--rust);
}

.nav-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
}

.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   THEME TOGGLE — pixel sun/moon button, crossfades with a small rotation.
   ========================================================================== */

.theme-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, color 0.4s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  transform: translate(-1px, -1px);
}

.theme-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  image-rendering: pixelated;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

html[data-theme="dark"] .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

html[data-theme="dark"] .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

@media (max-width: 640px) {
  .theme-toggle { margin-left: 12px; }
}

/* ==========================================================================
   LANGUAGE TOGGLE — flag button, crossfades between FR and EN flags.
   ========================================================================== */

.lang-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--ink);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.2s ease;
}

.lang-toggle:hover {
  transform: translate(-1px, -1px);
}

.lang-flag {
  width: 20px;
  height: auto;
  position: absolute;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.flag-fr,
.flag-en,
.flag-zh {
  opacity: 0;
  transform: scale(0.6);
}

.lang-toggle[data-lang="fr"] .flag-fr {
  opacity: 1;
  transform: scale(1);
}

.lang-toggle[data-lang="en"] .flag-en {
  opacity: 1;
  transform: scale(1);
}

.lang-toggle[data-lang="zh"] .flag-zh {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 640px) {
  .lang-toggle { margin-left: 8px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  padding: 20px 24px 200px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ==========================================================================
   BEACH SCENE — pixel-art strip anchored to the bottom of the hero: sea with
   drifting wave rows, sand with scattered texture dots, and the crab mascot
   walking back and forth along the shore.
   ========================================================================== */

.beach-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  transition: background-color 0.5s ease;
}

html[data-theme="dark"] .beach-scene {
  background-color: #0c1524;
}

.beach-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 102px;
  height: 68px;
  background: linear-gradient(to bottom, #4a8fae 0%, #5a9fbe 18%, #6cabc4 32%, #7fb8ce 50%, #74afc8 62%, #8bc0d4 75%, #9ecfdf 100%);
  overflow: hidden;
  transition: background 0.5s ease;
}

.beach-sea::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100px 100px;
  opacity: 0.6;
  pointer-events: none;
}

html[data-theme="dark"] .beach-sea {
  background: linear-gradient(to bottom, #16233a 0%, #1f3350 60%, #2c4666 100%);
}

/* Moon: hidden by day, fades in at night, fixed in the upper-right of the
   scene. Drawn as a true crescent using two overlapping circles (a circle
   with box-shadow offset creates the classic lunar sliver shape). */
.beach-moon {
  position: absolute;
  top: 24px;
  right: 6%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 8px -3px 0 0 #f2ecd8;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(242, 236, 216, 0.5));
  transition: opacity 0.6s ease;
  z-index: 1;
}

html[data-theme="dark"] .beach-moon {
  opacity: 1;
}

/* Moon reflection: a soft vertical glow on the sea, only visible at night */
.moon-reflection {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(12% + 4px);
  width: 18px;
  background: linear-gradient(to bottom, rgba(242, 236, 216, 0.5), rgba(242, 236, 216, 0.15));
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: reflection-shimmer 3s ease-in-out infinite;
}

html[data-theme="dark"] .moon-reflection {
  opacity: 0.7;
}

@keyframes reflection-shimmer {
  0%, 100% { transform: scaleX(1); opacity: 0.5; }
  50% { transform: scaleX(1.4); opacity: 0.8; }
}

.wave-row {
  position: absolute;
  left: -60px;
  right: -60px;
  height: 4px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.6) 0 16px, transparent 16px 34px);
  animation: wave-drift 7s linear infinite;
}

.wave-row.r1 { top: 10px; animation-duration: 7.5s; }
.wave-row.r2 { top: 26px; animation-duration: 5.5s; animation-direction: reverse; }
.wave-row.r3 { top: 42px; animation-duration: 8.5s; }
.wave-row.r4 { top: 56px; animation-duration: 6.5s; animation-direction: reverse; }

@keyframes wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(40px); }
}

.beach-sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 102px;
  background: linear-gradient(to bottom, #ecd6a8 0%, #e4c68d 40%, #ddb877 100%);
  transition: background 0.5s ease;
}

html[data-theme="dark"] .beach-sand {
  background: linear-gradient(to bottom, #6b5a3e 0%, #59492f 40%, #453723 100%);
}

.beach-sand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.18' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.35  0 0 0 0 0.27  0 0 0 0 0.14  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 48px 48px;
  image-rendering: pixelated;
  opacity: 0.65;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sand-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #cfa363;
  opacity: 0.7;
}

.beach-shell {
  position: absolute;
  bottom: 10px;
  image-rendering: pixelated;
  z-index: 2;
}

.shell-1 { width: 22px; height: 18px; bottom: 14px; }
.shell-2 { width: 16px; height: 16px; bottom: 22px; }
.shell-3 { width: 18px; height: 14px; bottom: 8px; }

/* Campfire: unlit by day (just charred logs, very faint), flames fade in
   at night with a soft flicker and a warm glow on the sand. */
.campfire {
  position: absolute;
  left: 30%;
  bottom: 6px;
  width: 40px;
  height: 40px;
  z-index: 3;
}

.campfire svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.campfire-glow {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 70px;
  height: 70px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 156, 61, 0.5) 0%, rgba(255, 156, 61, 0) 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

html[data-theme="dark"] .campfire-glow {
  animation: fire-glow-flicker 2.2s ease-in-out infinite;
}

.flame {
  opacity: 0;
  transition: opacity 0.4s ease;
  transform-origin: bottom center;
}

html[data-theme="dark"] .campfire-glow {
  opacity: 1;
}

html[data-theme="dark"] .flame {
  opacity: 1;
}

.flame-1 { animation: flame-flicker 0.9s ease-in-out infinite; }
.flame-2 { animation: flame-flicker 0.7s ease-in-out infinite 0.15s; }
.flame-3 { animation: flame-flicker 1.1s ease-in-out infinite 0.3s; }

@keyframes flame-flicker {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(0.8) translateY(1px); }
}

@keyframes fire-glow-flicker {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.9; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-reflection,
  .campfire-glow,
  .flame-1,
  .flame-2,
  .flame-3 {
    animation: none;
  }
}

/* Foam band: sits right at the sea/sand join and "breathes" — a jagged
   white shape that grows and recedes to read as surf washing up the shore,
   rather than a static straight waterline. */
.foam-band {
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: 98px;
  height: 34px;
  z-index: 1;
  pointer-events: none;
}

.foam-layer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  clip-path: polygon(
    0% 55%, 3% 48%, 6% 58%, 9% 45%, 12% 60%, 15% 42%, 18% 58%,
    21% 46%, 24% 56%, 27% 40%, 30% 54%, 33% 44%, 36% 60%,
    39% 42%, 42% 56%, 45% 46%, 48% 58%, 51% 40%, 54% 54%,
    57% 44%, 60% 60%, 63% 42%, 66% 56%, 69% 46%, 72% 58%,
    75% 40%, 78% 54%, 81% 44%, 84% 60%, 87% 42%, 90% 56%,
    93% 46%, 96% 58%, 100% 44%,
    100% 100%, 0% 100%
  );
  opacity: 0.85;
  animation: foam-breathe 3.6s ease-in-out infinite;
  transform-origin: top center;
}

.foam-layer.delay {
  animation-delay: -1.8s;
  opacity: 0.5;
}

@keyframes foam-breathe {
  0%, 100% { transform: translateY(-5px) scaleY(0.65); opacity: 0.3; }
  50% { transform: translateY(7px) scaleY(1.1); opacity: 0.9; }
}

.rock-cluster,
.beach-tree {
  position: absolute;
  bottom: 6px;
  z-index: 3;
  image-rendering: pixelated;
}

.rock-1 {
  width: 58px;
  height: 36px;
  left: 8%;
}

.rock-2 {
  width: 34px;
  height: 23px;
  right: 32%;
}

.rock-3 {
  width: 22px;
  height: 14px;
  left: 42%;
}

.palm-tree {
  width: 95px;
  height: 158px;
  right: 15%;
  transform: rotate(-3deg);
  transform-origin: bottom center;
}

.coconut-tree {
  width: 76px;
  height: 158px;
  right: 3%;
}

.beach-walker {
  position: absolute;
  bottom: 40px;
  left: -44px;
  width: 44px;
  height: 40px;
  z-index: 2;
  animation: beach-walk 16s linear infinite;
}

.beach-walker svg {
  image-rendering: pixelated;
  width: 100%;
  height: 100%;
  transition: filter 0.4s ease;
}

html[data-theme="dark"] .beach-walker svg {
  filter: drop-shadow(0 0 3px rgba(255, 180, 120, 0.6));
}

.crab-frame-open {
  position: relative;
  animation: crab-pose-a 1.1s steps(1) infinite;
}

.crab-frame-closed {
  position: absolute;
  inset: 0;
  animation: crab-pose-b 1.1s steps(1) infinite;
}

.crab-eyes-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.beach-walker.is-hovering .crab-frame-open,
.beach-walker.is-hovering .crab-frame-closed {
  animation-play-state: paused;
  opacity: 0;
}

.beach-walker.is-hovering .crab-eyes-frame {
  opacity: 1;
}

.beach-walker.is-hovering {
  animation-play-state: paused;
}

@keyframes beach-walk {
  0% { left: -44px; transform: scaleX(1); }
  48% { transform: scaleX(1); }
  50% { left: calc(100% - 4px); transform: scaleX(-1); }
  98% { transform: scaleX(-1); }
  100% { left: -44px; transform: scaleX(1); }
}

.beach-walker.is-fast {
  animation-duration: 11.43s;
}

@media (max-width: 480px) {
  .hero { padding: 16px 24px 186px; }
  .hero-inner { gap: 8px; }
  .hero-crab { width: 32px; height: 32px; }
  .beach-scene { height: 158px; }
  .beach-sea { bottom: 94px; height: 64px; }
  .foam-band { bottom: 90px; height: 30px; }
  .beach-sand { height: 94px; }
  .beach-walker { bottom: 18px; width: 32px; height: 28px; }
  .rock-1 { width: 40px; height: 25px; }
  .rock-2 { width: 24px; height: 16px; }
  .rock-3 { width: 16px; height: 10px; }
  .palm-tree { width: 66px; height: 108px; }
  .coconut-tree { width: 52px; height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .wave-row,
  .beach-walker,
  .crab-frame-open,
  .crab-frame-closed {
    animation: none;
  }
}

.hero-crab {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rust);
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem);
  line-height: 1.1;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

.hero p.tagline {
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 900px), (max-height: 820px) {
  .hero h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
  .hero p.tagline { font-size: 0.9rem; }
  .hero-inner { gap: 6px; }
  .hero { padding-top: 12px; }
}

/* ==========================================================================
   BUTTONS — square, sharp, metallic fill on primary
   ========================================================================== */

.btn {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  background: var(--white);
  color: var(--ink);
}

.btn:hover, .btn:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-primary {
  border-color: var(--rust-dark);
  color: var(--white);
}

.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 4px 4px 0 var(--rust-dark);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section {
  padding: 72px 0;
  scroll-margin-top: 70px;
  border-bottom: 1px solid var(--line);
}

.section.alt {
  background: var(--off-white);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 40px;
}

.section-index {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rust);
}

.section h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PROFILE
   ========================================================================== */

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.profile-text p {
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.profile-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.meta-item {
  padding: 16px 18px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.meta-item dt {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--rust);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.meta-item dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
}

.meta-note {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--grey);
  margin-top: 2px;
}

/* ==========================================================================
   TIMELINE (formation + expériences)
   ========================================================================== */

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.timeline-item:last-child { border-bottom: 1px solid var(--line); }

.timeline-date {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rust);
  padding-top: 2px;
}

.timeline-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.timeline-body .place {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.timeline-body p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
  max-width: 60ch;
}

.dual-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.dual-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rust);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.dual-col .timeline-item {
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 18px 0;
}

@media (max-width: 860px) {
  .dual-timeline {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dual-col-title {
    margin-top: 8px;
  }
}

/* ==========================================================================
   SKILLS
   ========================================================================== */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.skill-card {
  padding: 22px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.skill-card h3 {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 16px;
  color: var(--rust);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  color: var(--ink);
}

/* ==========================================================================
   SKILLS MARQUEE — bandeau de logos défilant en continu
   ========================================================================== */

.skills-sub {
  font-size: 0.85rem;
  color: var(--grey);
  margin: -8px 0 0;
}

.skills-marquee {
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 20px 0;
  display: flex;
  mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.skills-track {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
  animation: skills-scroll 38s linear infinite;
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 74px;
}

.skill-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--rust);
  flex-shrink: 0;
}

.skill-logo svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.skill-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
}

@keyframes skills-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .skills-track {
    animation: none;
  }
}

/* ==========================================================================
   PROJECTS — grille de vignettes cliquables + modal de détail
   ========================================================================== */

.projects-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
}

.projects-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 12px;
  flex: 1;
  scrollbar-width: none;
}

.projects-grid::-webkit-scrollbar {
  display: none;
}

.project-tile {
  scroll-snap-align: start;
}

.projects-chevron {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  cursor: pointer;
  z-index: 2;
  background: linear-gradient(160deg, var(--rust-glow) 0%, var(--rust) 50%, var(--rust-dark) 100%);
  box-shadow: 0 0 0 1px var(--rust-dark), 0 6px 18px rgba(212, 85, 30, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.projects-chevron:hover,
.projects-chevron:focus-visible {
  box-shadow: 0 0 0 1px var(--rust-dark), 0 8px 22px rgba(212, 85, 30, 0.5);
  transform: translateY(-2px);
}

.projects-chevron:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: 0 0 0 1px var(--rust-dark);
}

.projects-chevron svg {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

@media (max-width: 480px) {
  .projects-carousel-wrap {
    padding: 0;
  }
  .projects-chevron {
    display: none;
  }
  .projects-grid {
    grid-auto-flow row;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  /* Sur mobile le carrousel devient une liste simple : on ne garde que
     le premier jeu de tuiles (les copies servent uniquement à la boucle
     infinie du carrousel desktop). */
  .project-tile:nth-child(n + 6) {
    display: none;
  }
}

.project-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  overflow: hidden;
  cursor: pointer;
  background: var(--off-white);
  padding: 0;
  text-align: left;
  font-family: var(--font);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-tile:hover, .project-tile:focus-visible {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
}

.project-tile-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2.4rem;
}

.project-tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}

.project-tile-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffb08a;
  margin-bottom: 4px;
}

.project-tile-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

/* Modal */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.project-modal.is-open {
  display: flex;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 14, 0.6);
}

.project-modal-dialog {
  position: relative;
  background: var(--white);
  border: 2px solid var(--ink);
  max-width: 880px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-shadow: 8px 8px 0 var(--ink);
}

.project-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-modal-close:hover {
  background: var(--rust);
  color: var(--white);
}

.project-modal-image {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 3.4rem;
  border-right: 2px solid var(--ink);
}

.project-modal-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-modal-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rust);
}

.project-modal-content h3 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
}

.project-modal-content p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}

.project-modal-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

@media (max-width: 700px) {
  .project-modal-dialog {
    grid-template-columns: 1fr;
  }
  .project-modal-image {
    border-right: none;
    border-bottom: 2px solid var(--ink);
    min-height: 160px;
  }
}

/* ==========================================================================
   CHATBOT
   ========================================================================== */

.chat-panel {
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  height: 460px;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-crab {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--off-white);
}

.msg {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  border: 1px solid var(--ink);
}

.msg-bot {
  align-self: flex-start;
  background: var(--white);
}

.msg-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.chat-form {
  display: flex;
  border-top: 2px solid var(--ink);
}

.chat-form input {
  flex: 1;
  background: var(--white);
  border: none;
  padding: 16px 18px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.88rem;
  outline: none;
}

.chat-form input::placeholder { color: var(--grey); }

.chat-form button {
  border: none;
  border-left: 2px solid var(--ink);
  padding: 0 26px;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  cursor: pointer;
}

.chat-form button.metal-surface {
  background: linear-gradient(160deg, var(--rust-glow) 0%, var(--rust) 50%, var(--rust-dark) 100%);
}

.chat-hint {
  font-size: 0.76rem;
  color: var(--grey);
  margin-top: 14px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid var(--ink);
}

.contact-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 20px 4px;
  border-bottom: 2px solid var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  transition: color 0.15s, padding-left 0.15s;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--rust);
  padding-left: 10px;
}

.contact-links span {
  color: var(--grey);
  font-size: 0.82rem;
  font-weight: 400;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 24px;
  color: var(--grey);
  font-size: 0.78rem;
}

.footer-crab {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}

.footer-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer-domains {
  display: inline-flex;
  gap: 4px;
}

.footer-domains a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.footer-domains a:hover,
.footer-domains a:focus-visible {
  color: var(--rust);
  border-color: var(--rust);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 640px) {
  .profile-grid { grid-template-columns: 1.3fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid .contact-links:first-child a { border-right: 2px solid var(--ink); padding-right: 20px; }
  .contact-grid .contact-links:last-child a { padding-left: 20px; }
}

@media (max-width: 640px) {
  .nav-burger { display: flex; }

  .nav-links {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 2px solid var(--ink);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav-links.is-open { max-height: 400px; }

  .nav-links li { border-top: 1px solid var(--line); }

  .nav-links a {
    display: block;
    padding: 16px 24px;
  }

  .timeline-item { grid-template-columns: 1fr; gap: 6px; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* Reveal on scroll — single subtle effect */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ==========================================================================
   BACK TO TOP — fixed square button, fades in after scrolling past the hero.
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border: none;
  cursor: pointer;
  z-index: 40;
  background: linear-gradient(160deg, var(--rust-glow) 0%, var(--rust) 50%, var(--rust-dark) 100%);
  box-shadow: 0 0 0 1px var(--rust-dark), 0 6px 18px rgba(212, 85, 30, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  box-shadow: 0 0 0 1px var(--rust-dark), 0 8px 22px rgba(212, 85, 30, 0.5);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

@media (max-width: 640px) {
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}