@charset "UTF-8";
:root {
  --font-family: 'Nunito Sans', sans-serif;
  --font-weight-reg: 400;
  --base-fontsize: 1rem;
  --text: var(--base-fontsize);
  --text-xs: calc(0.75 * var(--text));
  --text-sm: calc(0.875 * var(--text));
  --text-md: calc(1.125 * var(--text));
  --text-lg: calc(1.25 * var(--text));
  --text-xl: calc(2.75 * var(--text));
  --base-space: 1rem;
  --spacing: var(--base-space);
  --spacing-xs: calc(0.75 * var(--spacing));
  --spacing-sm: calc(0.875 * var(--spacing));
  --spacing-md: calc(1.5 * var(--spacing));
  --spacing-lg: calc(2 * var(--spacing));
  --spacing-xl: calc(5 * var(--spacing));
  --color-neutral-000: lab(98.1434% -.369519 -1.05966);
  --color-neutral-100: lab(96.286% -.852436 -2.46847);
  --color-neutral-200: lab(91.7353% -.998765 -4.76968);
  --color-neutral-300: lab(84.7652% -1.94535 -7.93337);
  --color-neutral-400: lab(65.5349% -2.25151 -14.5072);
  --color-neutral-500: lab(48.0876% -2.03595 -16.5814);
  --color-neutral-600: lab(35.5623% -1.74978 -15.4316);
  --color-neutral-700: lab(26.9569% -1.47016 -15.6993);
  --color-neutral-800: lab(16.132% -.318035 -14.6672);
  --color-neutral-900: lab(7.78673% 1.82345 -15.0537);
  --color-primary: #7593f1;
  --color-primary-dark: #2045b8;
  --color-secondary: #f34c27;
  --color-ternary: #e49eff;
  --color-accent: #fae902;
  --gradient-dark: linear-gradient(to right in oklab, var(--color-neutral-900), var(--color-neutral-700));
  --gradient-primary: linear-gradient(to right in oklab, var(--color-primary), var(--color-primary-dark));
  --shadow-sm: 2px 3px 0 0 rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 0 1em 0 rgba(0, 0, 0, 0.25);
  --max-width: 90vw;
}
@media (min-width: 1600px) {
  :root {
    --max-width: 1540px;
  }
}

html {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
  font-family: var(--font-family);
  font-weight: var(--font-weight-reg);
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
}

.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-ternary {
  color: var(--color-ternary);
}

.color-accent {
  color: var(--color-accent);
}

.color-muted {
  color: var(--color-neutral-400);
}

.b-left {
  border-left: 4px solid;
  padding-left: 1em;
}

.b-primary {
  border-color: var(--color-primary);
}

.b-secondary {
  border-color: var(--color-secondary);
}

.b-ternary {
  border-color: var(--color-ternary);
}

.b-accent {
  border-color: var(--color-accent);
}

.text-md {
  font-size: var(--text-md);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-center {
  text-align: center;
}

.fw-bold {
  font-weight: 700;
}

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.text-gradient {
  font-weight: 700;
  color: transparent;
  background-clip: text;
  background-image: var(--gradient-primary);
}

.button {
  --bg: transparent;
  --color: var(--color-primary);
  box-sizing: border-box;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: 700;
  line-height: 1.25;
  padding: 0.75em 2em;
  border-radius: 2em;
  border: 3px solid var(--color);
  transition: all 0.5s ease;
}
.button svg {
  position: relative;
}
.button:hover {
  background: var(--bg);
  color: var(--color);
}
.button:hover svg {
  animation: icon-slide 0.5s ease-out;
}

.button--primary {
  --color: var(--color-primary);
  background-image: var(--gradient-primary) !important;
  color: var(--text-color-light) !important;
  background-size: 200% 100%;
  background-position: 0% 0%;
}
.button--primary:hover {
  background-position: 100% 0%;
}

@keyframes icon-slide {
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Default (no JS): vertical list of slides */
.carousel {
  display: block;
}

.carousel .item {
  width: 100%;
}

/* Add spacing between stacked slides */
.carousel .item + .item {
  margin-top: 1.5rem;
}

/* Enhanced (JS initialized): horizontal, one-at-a-time */
.carousel.is-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  /* smoother feel on iOS */
  -webkit-overflow-scrolling: touch;
  /* hide scrollbars (optional) */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel.is-carousel::-webkit-scrollbar {
  display: none;
}

.carousel.is-carousel .item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  /* Remove vertical spacing when in horizontal mode */
  margin-top: 0;
}

/* Controls are injected by JS right after .carousel */
.carousel-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.carousel-controls button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.carousel-controls__prev,
.carousel-controls__next {
  font-size: 4vw;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
}
.carousel-controls__prev svg,
.carousel-controls__next svg {
  width: 1em;
  height: 1em;
}
.carousel-controls__prev:hover,
.carousel-controls__next:hover {
  color: var(--color-primary);
}

/*
html[lang="fr"] .carousel-controls__prev span:before { content: "Précédent"; }
html[lang="fr"] .carousel-controls__next span:before { content: "Suivant"; }

html[lang="en"] .carousel-controls__prev span:before { content: "Previous"; }
html[lang="en"] .carousel-controls__next span:before { content: "Next"; }
*/
.card {
  background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-700);
  color: var(--color-neutral-200);
  padding: 1em;
}
.card > *:first-child {
  margin-top: 0;
}
.card > *:last-child {
  margin-bottom: 0;
}
.card {
  transition: all 0.1s ease-in-out;
}
.card:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-lg);
}

.grid {
  display: grid;
  gap: var(--spacing);
}
.grid.align-center {
  align-items: center;
}
@media (min-width: 992px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
  }
}

.projects .carousel-container {
  margin-block: var(--spacing-lg);
}
.projects .carousel .item:nth-child(1n) {
  --color: var(--color-secondary);
}
.projects .carousel .item:nth-child(2n) {
  --color: var(--color-primary);
}
.projects .carousel .item:nth-child(4n) {
  --color: var(--color-ternary);
}
.projects .carousel .item:nth-child(3n) {
  --color: var(--color-accent);
}

.project {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  padding: 10px 0;
  color: var(--color-neutral-300);
}
@media (min-width: 992px) {
  .project {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1200px) {
  .project {
    grid-template-columns: clamp(30%, 35ch, 500px) 1fr;
  }
}
.project h3 {
  margin-top: 0;
  color: var(--color-neutral-100);
}
.project img {
  object-fit: cover;
  aspect-ratio: 1/1;
  width: 100%;
  border: 2px solid white;
  box-shadow: 8px 8px 0 var(--color);
}
@media (max-width: 992px) {
  .project img {
    max-width: 80vw;
    margin: auto;
  }
}
.project .b-left {
  border-color: var(--color);
  padding-block: 4px;
  color: var(--color-neutral-100);
  font-size: 1.125em;
}

.tag {
  display: inline-block;
  padding: 0.5em 0.8em;
  border: 1px solid;
  border-radius: 2em;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--color-primary);
}

.tag--primary {
  color: var(--color-primary);
}
.tag--secondary {
  color: var(--color-secondary);
}
.tag--ternary {
  color: var(--color-ternary);
}
.tag--accent {
  color: var(--color-accent);
}

.header {
  --square: 4rem;
  background-color: var(--color-neutral-900);
  background-image: repeating-linear-gradient(15deg, transparent, transparent var(--square), rgba(255, 255, 255, 0.1) var(--square), rgba(255, 255, 255, 0.1) calc(var(--square) + 1px)), repeating-linear-gradient(105deg, transparent, transparent var(--square), rgba(255, 255, 255, 0.1) var(--square), rgba(255, 255, 255, 0.1) calc(var(--square) + 1px)), var(--gradient-dark);
  color: var(--text-color-light);
}
.header .content {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-lg) 0 4rem;
}
@media (min-width: 992px) {
  .header .content {
    display: flex;
    gap: var(--spacing-xl);
    align-items: center;
    justify-content: space-between;
    min-height: 100vh;
  }
  .header .content > * {
    flex: 1;
  }
}
.header .switch-lang {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(var(--spacing-lg));
  color: var(--color-primary);
}
.header h1 {
  font-size: 12vw;
  font-weight: 900;
  line-height: 1;
}
@media (min-width: 992px) {
  .header h1 {
    font-size: 6vw;
  }
}
@media (min-width: 1920px) {
  .header h1 {
    font-size: 110px;
  }
}
.header h1 {
  text-transform: uppercase;
  margin: 0;
  --c1: var(--color-primary);
  --c2: var(--color-primary-dark);
  --shadow: var(--color-secondary);
  --highlights: var(--color-ternary);
  color: var(--c2);
  text-shadow: -2px -2px 0 var(--highlights), 3px 3px 0 var(--shadow);
}
.header h1 .firstname,
.header h1 .lastname {
  display: block;
}
.header ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.header ul li {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 3px solid;
}
.header ul li:nth-child(1) {
  border-color: var(--color-primary);
}
.header ul li:nth-child(2) {
  border-color: var(--color-secondary);
}
.header ul li:nth-child(3) {
  border-color: var(--color-ternary);
}
.header ul li:nth-child(4) {
  border-color: var(--color-accent);
}
.header ul li {
  transition: all 0.1s ease-in;
}
.header ul li:hover {
  transform: scale(1.25) skew(-5deg, -5deg);
  background: rgba(0, 0, 0, 0.7);
}
.header {
  border-bottom: 3px solid var(--color-primary);
  position: relative;
}
.header .banderole {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%, 50%);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-neutral-900);
  padding: var(--spacing-md) 4rem;
  clip-path: polygon(calc(100% - 2rem) 0%, 100% 50%, calc(100% - 2rem) 100%, 0% 100%, 2rem 50%, 0% 0%);
}
@media (max-width: 991px) {
  .header {
    padding-bottom: var(--spacing-xl);
  }
  .header .intro {
    padding-block: var(--spacing-xl);
    margin-block: var(--spacing-lg);
  }
  .header ul li {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  .header ul li:hover {
    transform: skew(-3deg, -3deg);
  }
  .header .banderole {
    width: 60vw;
  }
}

main > section {
  padding: var(--spacing-xl) var(--spacing);
}

.content {
  max-width: var(--max-width);
  margin: 0 auto;
}

.header-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}
@media (max-width: 991px) {
  .header-group {
    padding-top: var(--spacing-md);
  }
}
@media (min-width: 992px) {
  .header-group {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
.header-group .title-huge {
  font-size: 8vw;
  font-weight: 900;
  line-height: 1;
  margin: 0.25em 0;
}
@media (min-width: 992px) {
  .header-group .title-huge {
    font-size: 4vw;
  }
}
@media (min-width: 1920px) {
  .header-group .title-huge {
    font-size: 90px;
  }
}
.header-group .subtitle {
  font-size: 1.5em;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
}
@media (min-width: 992px) {
  .header-group .subtitle {
    margin: auto 0 auto auto;
  }
}

.about .grid {
  margin: var(--spacing-xl) 0;
}
@media (max-width: 991px) {
  .about {
    padding-top: var(--spacing-xl);
  }
}

.projects {
  background-color: var(--color-neutral-800);
}

.contact {
  position: relative;
  background: var(--color-neutral-700);
}
.contact ul {
  padding-left: 0;
  list-style: none;
}
.contact ul li {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  margin: var(--spacing) 0;
}
.contact ul li:before {
  content: "⇨";
  color: var(--color-primary);
}
.contact {
  /*
  &:before {
    content: "SUZIE GORDON";
    font-size: 12vw;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    bottom: 2rem;
    z-index: 0;

    color: transparent;
    background-clip: text;
    background-image: var(--gradient-primary);
    mix-blend-mode: hard-light;
    z-index: 0;
    text-shadow: 1px 1px 0 var(--color-primary), -1px -1px 0 var(--color-primary-light), 2px 2px 0 var(--color-primary-dark);
  }

  @media (min-width: 1024px) {
    padding: var(--spacing-xl) var(--spacing);

    &:before {
      bottom: 50%; transform: translateY(50%);
      right: calc((100% - var(--max-width)) * 0.5);
      max-width: 40vw;
      font-size: clamp(2em, 8vw, 150px);
      text-align: right;
    }
  }
  */
}

.footer {
  background: var(--color-neutral-900);
  color: var(--color-neutral-500);
  font-size: var(--text-sm);
  text-align: center;
  padding: 1em;
}
.footer > p {
  margin: 0;
}

/*# sourceMappingURL=styles.css.map */