@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Outfit:wght@300;400;700&display=swap');/* ==============================================

/* ==============================================
          GLOBAL STYLES
============================================== */
:root {
/* Typography */
--font-heading: 'Gloock', serif;
--font-content: 'Outfit', sans-serif;

--font-size-h1: 3.7rem;
--font-size-h2: 2.5rem;
--font-size-h3: 1.8rem;
--font-size-h4: 1.3rem;

--font-size-content-xl: 2rem;
--font-size-content-lg: 1.4rem;
--font-size-content-md: 1.2rem;
--font-size-content-sm: 1rem;

--line-height-normal: 1.3;
--line-height-relaxed: 1.5;

/*color theme */
--bg-primary: #F1F2F1;
--bg-secondary: #20413A;
--text-primary: #20413A;
--text-secondary: #344340;
--text-tertiary: #F8D0CF;
--text-inverted: #FFFFFF;
--accent: #FF636B;

/* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 3.75rem;
  --space-9: 4.5rem;
  --space-10: 12.5rem;
  --space-11: 27rem;
}

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

body {
    margin: 0;
    font-family: var(--font-content);
    font-size: var(--font-size-content-md);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    font-weight: 350;
}
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    margin: 0;
    font-weight: 300;
    color: var(--text-primary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* font size -> headers */
h1 {font-size: var(--font-size-h1); line-height: var(--line-height-normal);}
h2 {font-size: var(--font-size-h2); line-height: var(--line-height-normal);}
h3 {font-size: var(--font-size-h3); line-height: var(--line-height-normal);}
h4 {font-size: var(--font-size-h4); line-height: var(--line-height-normal);}

/* content size + weight */
.text-xl {font-size: var(--font-size-content-xl); font-weight: 400; line-height: var(--line-height-normal);}
.text-lg {font-size: var(--font-size-content-lg); font-weight: 350; line-height: var(--line-height-relaxed);}
.text-md {font-size: var(--font-size-content-md);}
.text-sm {font-size: var(--font-size-content-sm);}

.bg-primary {background-color: var(--bg-primary);}
.bg-secondary {background-color: var(--bg-secondary);}

/* text color */
.text-primary {color: var(--text-primary);}
.text-secondary {color: var(--text-secondary);}
.text-tertiary {color: var(--text-tertiary);}
.text-inverted {color: var(--text-inverted)}
.text-accent {color: var(--accent);}

/* spacing */
.m-1 {margin: var(--space-1);}
.m-2 {margin: var(--space-2);}
.m-3 {margin: var(--space-3);}
.m-4 {margin: var(--space-4);}
.m-5 {margin: var(--space-5);}
.m-6 {margin: var(--space-6);}
.m-7 {margin: var(--space-7);}
.m-8 {margin: var(--space-8);}
.m-9 {margin: var(--space-9);}

/* containers */
.container-narrow {
  max-width: 58ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.container-medium {
  max-width: 960px;
  margin: 0 auto;
}
.container-wide {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}


/* ==============================================
                NAVIGATION
============================================== */
header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-8);
}
/* link container */
nav ul {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* links */
nav a {
  font-size: var(--font-size-content-lg);
  color: var(--text-primary);
  text-decoration: none;
}
nav a:hover {
  color: var(--accent)
}
/* logo */
.logo {
  font-family: Gloock;
  font-size: var(--font-size-content-lg);
  transition: color 0.3s ease;
}
.logo:hover {
  color: var(--accent);
}
.site-footer {
  background-image: url('Images/background-grain.png');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  justify-content: center;
  margin-top: auto;
}
.footer-contact,
.footer-links {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  background-color: rgba(172, 204, 194, 0.5);
  padding: var(--space-4);
  border-radius: 16px;
}


/* ==============================================
              LAYOUT PATTERNS
============================================== */
  .paragraphs {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .initiative-section {
      padding-top: var(--space-9);
      padding-bottom: var(--space-9);
      background-color: var(--bg-secondary);
    }

  .bubble {
    background-color: white;
    line-height: var(--line-height-normal);
    font-size: var(--font-size-content-sm);
    padding: var(--space-4);
    box-shadow: 8px 8px 0px rgb(74, 91, 87);
  }
  .image-with-annotations {
    position: relative;
    width: 100%;
    max-width: 1200px;
  }
  .image-with-annotations img {
    width: 100%;
    height: auto;
  }
  .image-with-annotations .bubble {
    position: absolute;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .image-with-annotations .bubble.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .fade-in-up {
    opacity: 0;
    transform: translateY(60px);
  }
  .fade-in-right {
    opacity: 0;
    transform: translateX(-10px);
  }
.button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: white;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease;
    justify-content: center;
  }
.button-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: none;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.3s ease;
    justify-content: center;
    border: 2px solid var(--text-primary);
}
.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
.button:hover,
.button-secondary:hover {
    transform: translateY(-4px) scale(1.05);
  }
.icon {
    width: 20px;
    height: 20px;
  }

.projects {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  gap: var(--space-5);
}
.projects-end {
  padding-bottom: var(--space-4);
}
.pr-end-buttons {
  padding-bottom: var(--space-8);
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}

.project-list {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: var(--space-5);
}
.project-list > a {
  flex: 1;
  min-width: 0;
}
.project-list.two-cards > a {
  flex: 0 1 45%;
  max-width: 350px;
}
.project-card {
  background-color: white;
  display: flex;
  height: 410px;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  line-height: var(--line-height-normal);
  border-radius: 8px;
}
.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(114, 97, 80, 0.20);
}
.project-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.card-content {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-4);
}
.card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-text h3,
.card-text p {
    margin: 0;
}
.card-text p {
  font-size: var(--font-size-content-sm);
}

.card-tag-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag {
  background-color: #F2F1F1;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-content-sm);
  border-radius: 4px;
}




/* ==============================================
                HOME PAGE
============================================== */
#hero {
  position: relative;
  background-image: url('Images/background-grain.png');
  background-position: center;
  background-size: cover;
  height: 430px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.hero-pill {
  display: inline-flex;
  flex-direction: row;
  border: 1px solid #858585;
  padding: 4px 16px;
  border-radius: 50px;
  font-size: 1.2rem;
}
.home-icons {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
#hero .container-medium {
  text-align: center;
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  height: 100%;
}

#home-cursor,
#icon-component,
#icon-screen,
#icon-sparkle,
#icon-star,
#icon-arrow {
  position: absolute;
}

#home-cursor {
  width: 23%;
  height: auto;
  top: 53%;
  left: 70%;
  animation: float 5s ease-in-out infinite;
  z-index: 2;
  filter: drop-shadow(0px 14px 12px rgba(0, 0, 0, 0.12));


}
@keyframes float {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(5px, -8px);
  }
  50% {
    transform: translate(-3px, -12px);
  }
  75% {
    transform: translate(6px, -6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

#icon-star {
  top: 68%;
  right: 75%;
  animation: spin 7s ease-in-out infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bob {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}
#icon-component {
  top: 18%;
  right: 10%;
  animation: bob 3s ease-in-out infinite;
}
#icon-screen {
  top: 10%;
  right: 17%;
}

#icon-sparkle {
  top: 28%;
  right: 19%;
}
#icon-arrow {
  top: 4%;
  left: 20%;
  transform: scaleY(-1);
}
#about {
  background-color: #DEEBE8;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
#about div {
  justify-content: center;
  align-items: center;
}
#about div p {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}






/* ==============================================
                PR1_QUESTIONNAIRE
============================================== */
/* hero */
  #pr1-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-bottom: var(--space-7);
    padding-top: var(--space-7);
  }
  #pr1-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
  }
  .pr1-hero-columns {
    display: flex;
    flex-direction: row;
    gap: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .pr1-hero-columns > ul {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: max-content;
  }
  .pr1-hero-columns > ul > li {
  white-space: nowrap;
  }





/* context */
  #pr1-context {
    background-color: var(--bg-primary);
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }


/* users */
#pr1-users {
  background-color: var(--bg-primary);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
#emoji-list-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
}
.emoji-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--text-tertiary);
  width: fit-content;
  gap: var(--space-3);
  line-height: var(--line-height-normal);
  border-radius: 6px;
  opacity: 0;
  scale: 0.8;
}
.emoji-list:nth-child(1) {
  transform: translateX(0px) rotate(-2deg);
  margin-bottom: 10px;
}
.emoji-list:nth-child(2) {
  transform: translate(30px) rotate(1.5deg);
  margin-bottom: 10px;
}
.emoji-list:nth-child(3) {
  transform: translate(-20px) rotate(-1deg);
  margin-bottom: 10px;
}
.emoji-list:nth-child(4) {
  transform: translate(15px) rotate(2deg);
  margin-bottom: 10px;
}



/* persona */
#pr1-persona {
  background-color: var(--bg-primary);
  padding-bottom: var(--space-9);
}
#pr1-persona .container-medium {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.persona-card {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: var(--space-7);
  gap: var(--space-7);
}
.persona-img {
  width: 220px;
  flex-shrink: 0;
  object-fit: contain;
}
.persona-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}
.persona-title-bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  line-height: var(--line-height-normal);
}
.persona-columns {
  display: flex;
  gap: var(--space-6);
}
.persona-columns > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.persona-columns ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  line-height: var(--line-height-normal);
}

/*objectives*/
#pr1-objectives {
  background-color: var(--bg-primary);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
#pr1-objectives ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-content-lg);
}


/*hmw*/
#pr1-hmw {
  background-color: var(--bg-primary);
  padding-top: var(--space-8)
}
#pr1-hmw .container-medium {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.post-it-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
}
.post-it-red {
  width: 280px;
  min-height: 240px;
  box-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.1),
    4px 4px 8px rgba(0, 0, 0, 0.08);
  background-color: #F8D0CF;
  padding: var(--space-4);
  position: relative;
  line-height: var(--line-height-normal);
}
.post-it-red p {
  margin: 0;
}
.post-it-red::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0 30px 30px;
  border-color: transparent transparent #E8E8E8 transparent;
}

#hypothesis-intro {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-10);
  gap: var(--space-6);
  align-items: center;
}


/*protos*/
.pr1-hypothesis-protos {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-10);
  background: var(--bg-primary);
  max-width: 1500px;
  margin: 0 auto;
}
.hypothesis-left {
  position: sticky;
  top: 100px;
  height: fit-content;
  align-self: flex-start;
}
.hypothesis-text-container {
  position: relative;
  min-height: 400px;
}
.hypothesis-text {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.hypothesis-text.active {
  opacity: 1;
  position: absolute;
}
.hypothesis-text h3 {
  margin-bottom: var(--space-3);
}
.hypothesis-text img {
  width: 90px;
  margin-bottom: var(--space-3);
}
.hypothesis-text p {
  margin-bottom: var(--space-3);
}
.hypothesis-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}
.hypothesis-right img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  min-height: 100vh;
  object-fit: contain;
}
.mobile-only {
  display: none !important;
}
.desktop-only {
  display: flex;
}




/*tests*/
#pr1-tests {
  background-color: var(--bg-primary);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.tests-intro {
  max-width: 58ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
#pr1-tests .container-medium {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
#pr1-tests ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tests {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.test-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 8px 8px 25px rgb(221, 226, 224);
  padding: var(--space-7);
  display: flex;
  gap: var(--space-8);
}
.test-card-dark {
  background-color: var(--bg-secondary);
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.test-card-dark .test-content {
  display: flex;
  gap: var(--space-8);
  width: 100%;
}
.test-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.test-left img {
  width: 60px;
}
.test-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.test-result {
  font-size: 1.3rem;
}
.test-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 340px;
}
.test-comments .bubble:nth-child(1) {
  border-radius: 20px 20px 2px 20px;
}
.test-comments .bubble:nth-child(2) {
  border-radius: 20px 20px 20px 2px;
}


/* naviguer */
#pr1-naviguer,
#pr1-repondre {
  position: relative;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-9) var(--space-10);
  gap: var(--space-3);
}
#pr1-naviguer .container-medium,
#pr1-repondre .container-medium {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
}
#bubble-naviguer-1 {
  top: 20%;
  left: -15%;
  width: 280px;
  border-radius: 32px 2px 32px 32px;
}
#bubble-naviguer-2 {
  top: 80%;
  left: 20%;
  width: 230px;
  border-radius: 32px 2px 32px 32px;
}
#bubble-naviguer-3 {
  top: 30%;
  left: 60%;
  width: 250px;
  border-radius: 32px 32px 2px 32px;
}

#bubble-repondre-1 {
  top: 35%;
  left: -15%;
  width: 270px;
  border-radius: 32px 32px 2px 32px;
}
#bubble-repondre-2 {
  top: 65%;
  left: 25%;
  width: 230px;
  border-radius: 32px 2px 32px 32px;
}
#bubble-repondre-3 {
  top: 20%;
  left: 82%;
  width: 230px;
  border-radius: 2px 32px 32px 32px;
}

/*lesson*/
#pr1-lesson {
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-9);
  padding-top: var(--space-9);
  gap: var(--space-3);
}
.featured {
  background-color: white;
  display: flex;
  padding: var(--space-7) var(--space-6);
  border-left: 6px solid var(--accent);
}

/*impact*/
#pr1-impact {
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  gap: var(--space-3);
}


/* ==============================================
                PR2_OBJECTIVES
============================================== */
/* pr2 hero */
#pr2-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  padding-top: var(--space-7);
}
#pr2-hero img {
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
}
.pr2-hero-columns {
    display: flex;
    flex-direction: row;
    gap: var(--space-9);
    padding-bottom: var(--space-4);
}
  .pr2-hero-columns > ul {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: max-content;
  }
  .pr2-hero-columns > ul > li {
  white-space: nowrap;
  }

/* Context */
#pr2-context {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

/* users */
.slide-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.users-content-1,
.users-content-2 {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background-color: var(--bg-primary);
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}
.users-content-2 {
  transform: translateX(100%);
}
.users-content-1 .container-medium,
.users-content-2 .container-medium {
  display: flex;
  flex-direction: row;
  gap: var(--space-7);
  align-items: flex-start;
}
.text-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.text-left ul {
  padding-left: var(--space-5);
}
.users-img {
  width: 280px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* concept */
#pr2_concept {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  gap: var(--space-9);
  padding-bottom: var(--space-9);
}
#pr2_concept .container-medium {
  padding-top: var(--space-6);
  display: flex;
  flex-direction: row;
  gap: var(--space-7);
  min-height: 200vh;
  align-items: flex-start;
}
.concept-left {
  position: sticky;
  top: 100px;
  height: fit-content;
  flex: 0 0 300px;
}
.img-with-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.img-with-legend img {
  width: 600px;
  height: auto;
}
.img-with-legend p {
  font-size: var(--font-size-content-sm);
  color: var(--text-secondary);
}


.img-scenario {
  max-width: 700px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.concept-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.tools,
.toolbox {
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-5);
  align-items: center;
  border-radius: 16px;
  box-shadow: 4px 4px 10px rgb(221, 226, 224);
}
.tools div,
.toolbox div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.tools p,
.toolbox p {
  line-height: var(--line-height-normal);
  text-align: center;
}
.tools img,
.toolbox img {
  max-width: 100px;
}


#pr2_iteration1 {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-9);
  padding-bottom: var(--space-5);
}
.image-scroll-container img {
  width: 140%;
  height: auto;
}

#pr2_data .container-narrow {
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
}
#pr2_data svg {
  padding-top: var(--space-5);
  width: 100%;
  max-width: 500px;
  height: auto;
}

/*--- data ---*/
#pr2_data {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

#pr2-tests-intro {
  padding-bottom: var(--space-9);
}

/*---- insights -----*/
#pr2_data_insights {
  position: relative;
  min-height: 50vh;
  padding: var(--space-9) 0;
  overflow: hidden;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bubbles-grid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  z-index: 1;
  padding: var(--space-3);
  align-content: center;
  justify-content: center;
}
.comment-bubble {
  background-color: white;
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-size-content-sm);
  line-height: var(--line-height-normal);
  opacity: 0;
}
.comment-bubble-left {
  border-radius: 16px 16px 16px 2px;
}
.comment-bubble-right {
  border-radius: 16px 16px 2px 16px;
}
.insights-container {
  position: relative;
  background-color: var(--bg-secondary);
  color: var(--text-inverted);
  padding: var(--space-7);
  z-index: 2;
  max-width: 500px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.insights-container ul {
  padding-left: var(--space-5);
}

/*---- transition -----*/
.post-its-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-5);

}
#pr2_transition {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/*---- final -----*/
.pr2-final-desktop {
  padding-top: var(--space-9);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}
.before-after-container {
  position: relative;
  max-width: 1400px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.pr2-final-img {
  max-width: 500px;
}
.pr2-final-mobile {
  display: none;
}
.pr2-final-desktop img {
  width: 35%;
}
.annotation {
  font-size: var(--font-size-content-sm);
  line-height: var(--line-height-normal);
  max-width: 200px;
  background-color: white;
  padding: var(--space-2);
  border-radius: 8px;
}
.arrow {
  max-width: 40px;
}

.annotation1 {
  position: absolute;
  top: 35%;
  left: 17%;
}
.arrow1 {
  position: absolute;
  top: 28%;
  left: 29%;
}
.annotation2 {
  position: absolute;
  top: 67%;
  left: 17%;
}
.arrow2 {
  position: absolute;
  top: 85%;
  left: 29%;
}
.annotation3 {
  position: absolute;
  top: 36%;
  right: 17%;
}
.arrow3 {
  position: absolute;
  top: 29%;
  right: 29%;
}
.annotation4 {
  position: absolute;
  top: 60%;
  right: 17%;
}
.arrow4 {
  position: absolute;
  top: 78%;
  right: 29%;
}

.annotation5 {
  position: absolute;
  top: 27%;
  left: 17%;
}
.arrow5 {
  position: absolute;
  top: 20%;
  left: 29%;
}
.annotation6 {
  position: absolute;
  top: 70%;
  left: 17%;
}
.arrow6 {
  position: absolute;
  top: 85%;
  left: 29%;
}
.annotation7 {
  position: absolute;
  top: 50%;
  right: 17%;
}
.arrow7 {
  position: absolute;
  top: 43%;
  right: 29%;
}

#pr2_showcase {
  padding-top: var(--space-9);
  overflow: hidden;
}
#pr2_showcase .container-narrow {
  padding-top: var(--space-9);
  align-items: center;
  padding-bottom: var(--space-6);
}
.carousel-wrapper {
  overflow: hidden;
  width: 100%;
}
#pr2_showcase img {
  width: auto;
  height: 400px;
  animation: scroll-carousel 60s linear infinite;
}
#pr2_showcase .container-narrow ul {
  padding-left: var(--space-5);
}
@keyframes scroll-carousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

#pr2-lesson {
  padding-top: var(--space-9);
}
#pr2-impact {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.pr2-final-percent {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  width: 320px;
  border-radius: 12px;
  box-shadow: 8px 8px 0px rgb(74, 91, 87);
}


/* ==============================================
                PR3
============================================== */
#pr3-hero {
  padding-top: var(--space-7);
}
#pr3-hero img {
  width: 100%;
}
#pr3-intro {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
#pr3-context {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: center;
}
.funnel-container {
  position: relative;
  max-width: 1220px;
  margin: 0 auto;
  width: 100%;
  padding: var(--space-4);
  padding-right: var(--space-4);
}
#pr3-funnel {
  width: 100%;
  display: block;
}


.flowchart {
  position: relative;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9);
  max-width: 960px;
}
.flowchart-lvl1 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--space-8);
}
.flowchart-lvl2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flow-box {
  background-color: white;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 220px;
  line-height: var(--line-height-normal);
  border-radius: 8px;
  justify-content: center;
}
.box-3 {
  background-color: #20413A;
  color: var(--text-inverted);
  width: 250px;
}
.flowchart-lvl1,
.flowchart-lvl2 {
    position: relative;
    z-index: 1;
}
.connector-lines {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  height: 150px;
}
.line-vertical-left,
.line-vertical-right {
  position: absolute;
  width: 2px;
  height: 46px;
  background-color: var(--accent);
}
.line-vertical-left {
  left: 30%;
  top: 0;
}
.line-vertical-right {
  left: 68%;
  top: 0;
  width: 2px;
}
.line-horizontal {
  position: absolute;
  left: 30%;
  top: 30%;
  width: 191px;
  height: 2px;
  background-color: var(--accent);
}
.line-vertical-middle {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 2px;
  height: 25px;
  background-color: var(--accent);
}
.line-arrow {
  position: absolute;
  left: 50.15%;
  top: 42%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent)
}



#pr3-foundations {
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;
}
#pr3-foundations img {
  width: 100%;
}

#pr3-test {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  align-items: center;
}
.assumptions {
  display: flex;
  flex-direction: row;
  gap: var(--space-5);
  width: 100%;
  justify-content: center;
}
.flow-box-border {
  background-color: none;
  border: 2px solid var(--bg-secondary);
  padding: var(--space-3);
  border-radius: 8px;
  justify-content: center;
  line-height: var(--line-height-normal);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 280px;
  justify-content: flex-start;
}

.timeline {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.timeline-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-7);
}
.timeline-card {
  background-color: white;
  padding: var(--space-6);
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  border-radius: 16px;
  line-height: var(--line-height-normal);
  max-width: 600px;
}
.timeline-number {
  font-size: var(--font-size-content-lg);
  background-color: var(--text-tertiary);
  color: var(--text-primary);
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  width: 8px;
  background-color: var(--accent);
  top: 0;
  bottom: 0;
  left: 26px;
  border-radius: 4px;
}
.timeline-img {
  max-width: 180px;
  flex-shrink: 0;
  align-self: flex-start;
}



#pr3-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: center;
  padding-bottom: var(--space-5);
}
.results-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pr3-result-item {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border: 2px solid #ABABAB;
  border-radius: 12px;
}

.percent {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
  width: 220px;
}
.percent > p:nth-child(2) {
  line-height: var(--line-height-normal);
}
.percent > p:nth-child(1) {
  font-size: 3.7rem;
  font-family: Gloock;
  color: var(--text-primary);
}
.percent-wider {
  width: 350px;
}


#pr3-final {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
#pr3-final img {
  width: 300px;
  height: auto;
}












/* ==============================================
                MEDIA QUERIES - MOBILE
============================================== */

/*GENERAL*/
@media (max-width: 768px) {
  :root {
    --font-size-h1: 2.4rem;
    --font-size-h2: 1.8rem;
    --font-size-h3: 1.5rem;

    --font-size-content-xl: 1.5rem;
    --font-size-content-lg: 1.25rem;
    --font-size-content-md: 1.1rem;

    --space-9: 2.5rem;
    --space-10: 1.5rem;
  }


  header {
    padding: var(--space-3) var(--space-4);
    flex-direction: row;
  }



  .container-narrow,
  .container-medium,
  .container-wide {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  body {
    overflow-x: hidden;
  }
  .button,
  .button-secondary {
    width: 100%;
    max-width: 100%;
  }

  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }
  .footer-contact,
  .footer-links {
    flex-direction: column;
  }
  .pr-end-buttons {
    flex-direction: column;
  }

/*-- HOME --*/
#hero {
  height: 360px;
  position: relative;
  overflow: hidden;
}
#hero h1 {
  font-size: 2.2rem;
}
#hero .container-medium {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  height: 100%;
  position: relative;
}
.home-icons {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.hero-pill {
  font-size: 1.1rem;
}

#home-cursor {
  width: 50%;
  top: 67%;
  left: 46%;
}
#icon-screen {
  opacity: 0;
}
#icon-component {
  opacity: 0;
}
#icon-sparkle {
  top: 78%;
  right: 80%;
}
#icon-arrow {
  top: -7%;
  left: -5%;
  scale: .8;
}
#icon-star {
  opacity: 0;
}




.project-list {
  flex-direction: column;
  gap: var(--space-6);
}


.project-card {
  height: auto;
}
.project-card img {
  height: 120px;
}
#about div p {
  padding-left: 0;
  padding-right: 0;
}

/*---questionnaires---*/
  #pr1-hero {
    overflow-x: hidden;
    max-width: 100vw;
    gap: var(--space-6);
  }
  #pr1-hero img {
    width: 200%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 1s ease-out forwards;
    margin-left: -98%;
    margin-top: calc(var(--space-3) - var(--space-7));
  }
  .pr1-hero-columns {
    flex-direction: column;
    gap: var(--space-6);
  }
  .pr1-hero-columns > ul {
    gap: var(--space-1);
  }



  #pr1-context {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }



  #pr1-initiative {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }



  #emoji-list-container {
    padding: var(--space-3) var(--space-4);
  }
  .emoji-list {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    max-width: calc(100% - var(--space-3));
    border-radius: 6px;
  }
  .emoji-list:nth-child(1) {
    transform: rotate(-2deg);
    margin-bottom: 10px;
    }
  .emoji-list:nth-child(2) {
      transform: rotate(2deg);
      margin-bottom: 14px;
    }
  .emoji-list:nth-child(3) {
      transform: rotate(-2.3deg);
      margin-bottom: 14px;
    }
  .emoji-list:nth-child(4) {
      transform: rotate(3deg);
      margin-bottom: 10px;
    }

  #pr1-persona {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .persona-card {
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-5);
  }
  .persona-img {
    width: 150px;
    align-self: center;
  }
  .persona-columns {
    flex-direction: column;
    gap: var(--space-5);
  }
  .post-it-row {
    flex-direction: column;
    align-items: center;
  }
  .post-it-red {
    width: 280px;
    min-height: 210px;
  }

 .pr1-hypothesis-protos {
    grid-template-columns: 1fr;
    padding: var(--space-7) var(--space-5);
  }
  .hypothesis-left {
    position: static;
  }
  .hypothesis-text-container {
    display: none !important;
  }
  .hypothesis-mobile-images {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-8);
  }
  .hypothesis-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .hypothesis-item img {
    width: 100%;
    height: auto;
  }
  .hypothesis-text-mobile h3 {
    margin-bottom: var(--space-3);
  }
  .hypothesis-text-mobile img {
    width: 90px;
    margin-bottom: var(--space-3);
  }
  .hypothesis-text-mobile p {
    margin-bottom: var(--space-3);
  }
  .desktop-only {
    display: none !important;
  }

#pr1-tests {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .test-card {
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-5);
  }
  .test-card-dark .test-content {
    flex-direction: column;
  }
  .test-comments {
    max-width: 100%;
  }

  #pr1-naviguer,
  #pr1-repondre {
    padding: var(--space-7) 0;
  }
  .image-with-annotations {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .image-with-annotations .bubble {
    position: static;
    opacity: 1;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    font-size: var(--font-size-content);
  }
  #bubble-naviguer-1,
  #bubble-naviguer-2,
  #bubble-naviguer-3,
  #bubble-repondre-1,
  #bubble-repondre-2,
  #bubble-repondre-3 {
    top: auto;
    left: auto;
    width: 100%;
  }


  /*---PR2 OBJECTIVES----*/
  #pr2-hero {
    overflow-x: hidden;
    max-width: 100vw;
    gap: var(--space-4);
    padding-top: var(--space-6);
  }
  #pr2-hero img {
    width: 230%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 1s ease-out forwards;
    margin-left: -98%;
  }
  .pr2-hero-columns {
    flex-direction: column;
    gap: var(--space-6);
  }
  .pr2-hero-columns > ul {
    gap: var(--space-1);
  }



  .slide-container {
    height: auto;
    overflow: visible;
  }
  .users-content-1,
  .users-content-2 {
    position: relative;
    height: auto;
  }
  .users-content-2 {
    transform: none;
  }
  .users-content-1 .container-medium,
  .users-content-2 .container-medium {
    flex-direction: column;
    align-items: start;
    gap: var(--space-4);
  }
  .text-left ul {
    padding-left: var(--space-5);
  }
  .users-img {
    width: 170px;
  }


  #pr2_concept img {
    width: 100%;
  }
  #pr2_concept {
    padding-top: var(--space-9);
    gap: var(--space-8);
  }
  #pr2_concept .container-medium {
    flex-direction: column;
    min-height: auto;
  }
  .concept-left {
    position: static;
    flex: none;
    width: 100%;
    gap: var(--space-5);
    align-items: center;
  }
  .img-scenario {
    width: 100%;
  }

  #pr2_iteration1 {
    gap: var(--space-6);
    padding-bottom: var(--space-3);
  }
  .image-scroll-container {
    overflow-x: scroll;
    width: 100%;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .image-scroll-container img {
    width: 250%;
    max-width: none;
    height: auto;
  }
  .tools,
  .toolbox {
    width: 270px;
  }


 #pr2-tests-intro {
  padding-bottom: var(--space-8);
 }
  #pr2_data_insights {
    flex-direction: column;
    overflow: visible;
  }
  .bubbles-grid {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    position: relative;
    height: auto;
    max-height: 150px;
    order: 1;
    width: 100%;
    margin-left: 0;
}

.comment-bubble {
  font-size: .9rem;
  padding: var(--space-2);
  flex-shrink: 0;
  width: auto;
  white-space: nowrap;
  opacity: 1;
}

.comment-bubble:nth-child(n+7) {
  display: none;
}

  .insights-container {
    order: 2;
    margin: 0 var(--space-4);
    padding: var(--space-5);
  }
  .insights-container ul {
    padding-left: var(--space-4);
  }



  .post-its-list {
    flex-direction: column;
  }


.pr2-final-desktop {
  display: none;
}
.pr2-final-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.pr2-final1 img {
  width: 100%;
}
.pr2-final1 ul {
  font-size: var(--font-size-content-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-6);

}

#pr2_showcase {
  padding-top: var(--space-1);
}
#pr2_showcase img {
  height: 300px;
}


.flowchart {
  width: 100%;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  gap: var(--space-8);
  padding-top: 0;
}
.line-vertical-left,
.line-vertical-right,
.line-horizontal {
  display: none;
}
.line-vertical-middle {
  top: -45%;
  height: 170px;
}
.line-arrow {
  left: 50.2%;
  top: 66%;
}
.flowchart-lvl1 {
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--space-4);
}





.assumptions {
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.timeline {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  gap: var(--space-8);
}
.timeline::before {
  left: 50%;
}
.timeline-card {
  z-index: 1;
  padding: var(--space-4);
}
.timeline-item {
  flex-direction: column;
  gap: var(--space-3);
}
.timeline-img {
  max-width: 120px;
}

#pr3-results {
  max-width: 100%;
}
.pr3-result-item:nth-child(4) {
  gap: 0;
}
.pr3-result-item {
  max-width: 100%;
  padding: var(--space-4);
}
.percent {
  max-width: 100%;
}
.percent > p:nth-child(1) {
  font-size: 3rem;
}

#pr3-final img {
  width: 70%;
}

}