@font-face { font-family: "Gontserrat"; src: url("/assets/fonts/gontserrat/Gontserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gontserrat"; src: url("/assets/fonts/gontserrat/Gontserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gontserrat"; src: url("/assets/fonts/gontserrat/Gontserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --void-black: #080c1a;
  --deep-space: #101a35;
  --space-blue: #243b9b;
  --cosmic-cyan: #00ffff;
  --galaxy-purple: #7a3fff;
  --nebula-pink: #ff2bd6;
  --moon-gray: #a7b1ca;
  --white-star: #f3f5fc;
  --projects-line: #718bea35;
  --signal-blue: #99b0ff;
  --project-font: "Gontserrat", "Helvetica Neue", Arial, sans-serif;
  --page-gutter: clamp(1.25rem, 4vw, 5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void-black); }
body.projects-body { margin: 0; color: var(--white-star); background: var(--void-black); font-family: var(--project-font); -webkit-font-smoothing: antialiased; }
.projects-body a:focus-visible, .projects-body button:focus-visible { outline: 2px solid #b4c2ff; outline-offset: 5px; }
.projects-body ::selection { background: var(--space-blue); color: white; }
.projects-body button, .projects-body a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 200; padding: .75rem 1rem; color: var(--void-black); background: #b4c2ff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.projects-body .site-header { z-index: 110; background: linear-gradient(#080c1afa, #080c1ae8 65%, transparent); }
.projects-body .a-header[aria-current="page"] { color: #b4c2ff; }
.projects-body .nav-header { max-width: 100%; }
.projects-body .menu-ferme-header { visibility: hidden; }
.projects-body .btn-menu-header { min-width: 44px; min-height: 44px; }
.projects-page { position: relative; isolation: isolate; max-width: 1820px; margin-inline: auto; padding: 8rem var(--page-gutter) 3rem; }
.projects-background { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; color: var(--space-blue); background: radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--space-blue) 20%, transparent), transparent 65%), var(--void-black); }
.projects-background::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.23;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--space-blue) 72%, transparent) 0 1px, transparent 1.4px),
    radial-gradient(circle, color-mix(in srgb, var(--space-blue) 42%, transparent) 0 1px, transparent 1.3px);
  background-position: 23px 31px, 71px 89px;
  background-size: 127px 127px, 193px 193px;
  -webkit-mask-image: radial-gradient(ellipse at 58% 48%, var(--void-black) 0, color-mix(in srgb, var(--void-black) 82%, transparent) 52%, transparent 86%);
  mask-image: radial-gradient(ellipse at 58% 48%, var(--void-black) 0, color-mix(in srgb, var(--void-black) 82%, transparent) 52%, transparent 86%);
}

.projects-constellation-map {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--space-blue);
  opacity: 0.58;
  overflow: visible;
}

.projects-constellation-drift {
  transform-box: fill-box;
  transform-origin: center;
  animation: projectsConstellationDrift 19s ease-in-out infinite;
}

.projects-constellation-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.32;
  animation: projectsConstellationLine 7s ease-in-out infinite;
}

.projects-constellation-lines .projects-constellation-line-faint {
  stroke-width: 0.8;
  opacity: 0.24;
}

.projects-constellation-nodes circle {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: projectsConstellationStar 4.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes projectsConstellationDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }

  50% {
    transform: translate3d(0, -12px, 0) rotate(0.25deg);
  }
}

@keyframes projectsConstellationLine {
  0%,
  100% {
    opacity: 0.24;
  }

  50% {
    opacity: 0.46;
  }
}

@keyframes projectsConstellationStar {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.24);
  }
}

.projects-heading { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--projects-line); }
.projects-heading h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 700; letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 0 35px #546df22b; }
.projects-total { position: relative; isolation: isolate; margin-right: .35rem; color: var(--signal-blue); font: 600 clamp(2.5rem, 4vw, 4rem)/1 var(--project-font); font-variant-numeric: tabular-nums; letter-spacing: -.06em; text-shadow: 0 0 25px #4964d95c; }
.projects-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0 2rem; }
.projects-toolbar[hidden], .project-entry[hidden], .project-panel[hidden], .project-selector[hidden], .projects-stage[hidden] { display: none; }
.projects-filters { display: flex; align-items: center; flex-wrap: wrap; column-gap: 1.65rem; row-gap: .25rem; min-width: 0; }
.projects-filter { display: inline-flex; align-items: baseline; gap: .4rem; position: relative; min-height: 44px; padding: .75rem 0; border: 0; border-bottom: 1px solid transparent; color: #a7b1ca; background: none; font: inherit; font-size: .8rem; transition: color .2s, border-color .2s; }
.projects-filter span { align-self: flex-start; color: #8f9fcd; font: 600 .625rem/1.5 var(--project-font); }
.projects-filter.is-active { border-bottom-color: var(--signal-blue); color: var(--white-star); text-shadow: 0 0 15px #728cfc80; }
.projects-filter:hover { color: white; }
.projects-result-count { flex-shrink: 0; margin: 0; color: var(--moon-gray); font: 400 .65rem/1.5 var(--project-font); }
.projects-browser { position: relative; }
.projects-index { min-width: 0; }
.project-entry { min-width: 0; }
.project-panel { position: relative; min-width: 0; margin: 0 0 2rem; border: 1px solid #5c79e56b; background: linear-gradient(145deg, #243b9b69, #0d142beb 50%, #101934f5); }
.project-panel-ribbon { display: flex; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; color: #b5c5ff; font: 600 .62rem/1.5 var(--project-font); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid #5c79e533; }
.project-image-link { display: block; margin: 0 .65rem; }
.project-card-visual { position: relative; isolation: isolate; aspect-ratio: 16 / 10; overflow: hidden; background: var(--deep-space); }
.project-card-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card-preview { opacity: 0; transition: opacity .2s; }
.is-previewing .project-card-preview { opacity: 1; }
.project-card-placeholder { display: grid; place-items: center; height: 100%; background: radial-gradient(ellipse at center, #243b9b80, transparent 70%), #101831; color: #8b9ddf; font: 600 6rem/1 var(--project-font); }
.project-panel-content { position: relative; margin: 0 .65rem .65rem; padding: clamp(1.25rem, 2.2vw, 2.25rem); background: linear-gradient(130deg, #12204bd9, #090f21ed 75%); color: var(--white-star); border-top: 1px solid #667fe98c; }
.project-panel h2 { margin: 0; max-width: 28ch; font-size: clamp(1.6rem, 2.25vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; overflow-wrap: anywhere; }
.project-details { display: flex; flex-wrap: wrap; gap: .8rem; margin: .85rem 0 0; color: var(--signal-blue); font: 400 .7rem/1.5 var(--project-font); }
.project-details span + span::before { content: '/'; margin-right: .8rem; }
.project-summary { max-width: 65ch; margin: 1.1rem 0 0; color: #bfc8de; font-size: .9rem; line-height: 1.8; overflow-wrap: anywhere; }
.project-open { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; margin-top: 1.5rem; padding-top: .85rem; border-top: 1px solid #607de459; color: #c9d4ff; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .2s; }
.project-open span { font-size: 1.3rem; }
.projects-body .project-open:focus-visible { outline-color: var(--signal-blue); }
.projects-empty { padding: 3rem 0; color: var(--moon-gray); }
/* The index remains a normal list; its selected document is moved into the stage. */
.is-enhanced .project-selector { display: grid; grid-template-columns: 1.25rem 4.5rem minmax(0, 1fr) 2.2rem; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); width: 100%; min-height: 120px; padding: 1.3rem 1rem 1.3rem .4rem; border: 0; border-top: 1px solid var(--projects-line); background: transparent; color: var(--white-star); text-align: left; font: inherit; transition: background .2s, color .2s; }
.is-enhanced .project-entry:last-child { border-bottom: 1px solid var(--projects-line); }
.project-selector-number { align-self: start; padding-top: .45rem; color: #8b9fdc; font: 600 .65rem/1 var(--project-font); }
.project-selector-image { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #243b9b50; }
.project-selector-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.55); opacity: .75; transition: filter .3s, opacity .3s; }
.project-selector-info { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.project-selector-title { font: 600 clamp(1.4rem, 2.15vw, 2.4rem)/1.15 var(--project-font); letter-spacing: -.045em; overflow-wrap: anywhere; }
.project-selector-type { color: #a7b1ca; font: 600 .625rem/1.5 var(--project-font); letter-spacing: .1em; text-transform: uppercase; }
.project-selector-end { display: flex; flex-direction: column; align-items: flex-end; gap: 1.4rem; color: #a7b1ca; font: 600 .65rem/1 var(--project-font); }
.project-selector-mark { font: 300 1.4rem/1 Arial, sans-serif; }
.is-selected .project-selector { background: linear-gradient(100deg, #243b9b9e, #243b9b38 65%, #243b9b0a); border-top-color: #738bf17a; box-shadow: inset 2px 0 0 #829bff, inset 0 1px 0 #243b9b40; }
.is-selected .project-selector-number, .is-selected .project-selector-type, .is-selected .project-selector-end { color: #d7dfff; }
.is-selected .project-selector-image img { filter: none; opacity: 1; }
.is-selected .project-selector-title { color: #f5f7ff; text-shadow: 0 0 25px #7c9cff45; }
.projects-body .footer { position: relative; inset: auto; width: auto; max-width: 1820px; margin: 0 auto; padding: 2rem var(--page-gutter); opacity: 1; transform: none; animation: none; }
.projects-body .footer-content { padding-top: 1.5rem; border-top: 1px solid var(--projects-line); }
.projects-body .footer-identity::before { background: var(--space-blue); box-shadow: none; }
.projects-body .footer-cv-label::after { background: #a6b7ff; }
.projects-body .footer-cv-arrow { color: #a6b7ff; text-shadow: none; }
/* Orbital markings and luminous frames stay outside the reading surface. */
.projects-heading::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 5px; height: 5px; background: var(--signal-blue); transform: rotate(45deg); box-shadow: 0 0 12px #8ba4ff; }
.projects-total::before, .projects-total::after { content: ''; position: absolute; z-index: -1; inset: -.8rem -.6rem; border: 1px solid #617dea55; border-radius: 50%; pointer-events: none; }
.projects-total::before { transform: rotate(-35deg) scaleY(.65); }
.projects-total::after { transform: rotate(35deg) scaleY(.65); border-color: #617dea30; }
.project-panel::before, .project-panel::after { content: ''; position: absolute; z-index: 2; width: 22px; height: 22px; pointer-events: none; border-color: var(--signal-blue); border-style: solid; filter: drop-shadow(0 0 4px #7694ff70); }
.project-panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.project-panel::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.project-panel-ribbon > span:first-child { color: var(--white-star); }
.project-panel-ribbon > span:last-child { font-variant-numeric: tabular-nums; }
.project-image-link { position: relative; margin-top: .65rem; }
.project-image-link::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #849cf135; }
.project-panel-content::before { content: ''; position: absolute; left: 0; top: -1px; width: 3rem; height: 2px; background: var(--signal-blue); box-shadow: 0 0 12px #789bff70; }
.project-selector-number { position: relative; font-variant-numeric: tabular-nums; }
.project-selector-number::after { content: ''; display: block; width: 5px; height: 5px; margin: 1rem auto 0; border: 1px solid #657ed6; transform: rotate(45deg); }
.is-selected .project-selector-number::after { border-color: #b9c8ff; background: #a0b7ff; box-shadow: 0 0 10px #7d9cff, 0 0 20px #243b9b; }
.project-selector-image { border: 1px solid #718bea40; }
.is-selected .project-selector-image { border-color: #829bffb3; box-shadow: 0 0 18px #243b9b80; }
.project-selector-mark { color: var(--signal-blue); }
.project-open span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #6d86e963; background: #243b9b38; color: var(--signal-blue); transition: background .2s, box-shadow .2s; }
.project-open:hover { color: white; }
.project-open:hover span { background: var(--space-blue); box-shadow: 0 0 18px #4968dd70; }
.projects-filter.is-active::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 3px; height: 3px; background: #bccaff; box-shadow: 0 0 8px #9bb0ff; }
@media (min-width: 1000px) {
  .projects-browser.is-enhanced { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 6rem); }
  .projects-stage { position: sticky; top: 7rem; min-width: 0; padding-top: 3.5rem; }
  .projects-stage::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: .6rem; border-top: 1px solid #566dc966; background: repeating-linear-gradient(90deg, #566dc980 0 1px, transparent 1px 2rem) 0 0 / 100% 5px no-repeat; }
  .projects-stage .project-panel { margin: 0; padding-bottom: .05px; box-shadow: 0 0 45px #243b9b20, 0 25px 60px #0005; }
  .is-enhanced .project-selector { min-height: clamp(120px, 10vw, 162px); }
  .is-selected .project-selector-mark { font-size: 0; }
  .is-selected .project-selector-mark::after { content: '→'; font: 1.3rem/1 Arial, sans-serif; }
  .is-enhanced .project-entry:not(.is-selected) .project-selector:hover { background: #243b9b20; }
}
@media (max-width: 999px) {
  .projects-page { max-width: 820px; padding-top: 7rem; }
  .projects-browser.is-enhanced .project-panel { margin: 0 0 1rem; padding: 0 0 .05px; }
  .is-selected .project-selector { border-bottom: 1px solid #ffffff30; }
  .is-selected .project-selector-mark { font-size: 0; }
  .is-selected .project-selector-mark::after { content: '−'; font: 1.4rem/1 Arial, sans-serif; }
  .project-selector-title { font-size: clamp(1.4rem, 3.5vw, 2.3rem); }
  .projects-toolbar { align-items: flex-start; flex-direction: column; gap: .5rem; padding-bottom: 1.5rem; }
  .projects-result-count { font-size: .65rem; }
  .project-card-visual { aspect-ratio: 16 / 9; }
}
@media (max-width: 540px) {
  .projects-page { padding-top: 6.5rem; padding-bottom: 1.5rem; }
  .projects-heading { padding-bottom: 1rem; }
  .projects-filters { column-gap: 1.1rem; }
  .projects-filter { font-size: .75rem; }
  .is-enhanced .project-selector { grid-template-columns: .85rem 3.5rem minmax(0, 1fr) 1.8rem; gap: .6rem; min-height: 110px; padding: 1.1rem .4rem; }
  .project-selector-title { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
  .project-selector-info { gap: .5rem; }
  .project-selector-type { font-size: .57rem; }
  .project-selector-end, .project-selector-number { font-size: .58rem; }
  .project-selector-end { gap: 1rem; }
  .project-panel-ribbon { font-size: .57rem; }
  .project-panel-content { padding: 1.25rem; }
  .project-panel h2 { font-size: 1.65rem; }
  .project-summary { font-size: .875rem; }
  .projects-body .footer-content { grid-template-columns: 1fr auto; gap: 1rem; }
  .projects-body .footer-identity { display: none; }
  .projects-body .footer-cv { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .projects-body *, .projects-body *::before, .projects-body *::after { animation: none !important; transition: none !important; }
}