#sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease;}


/* Comment ça marche Section CSS */
.how-it-works {
background-color: #002d5a;
padding: 4rem 0;
position: relative;
overflow: hidden;
}

/* Option: ajout d'un motif subtil en arrière-plan */
.how-it-works::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 30% 30%, rgba(0, 168, 255, 0.05) 0%, transparent 25%),
                  radial-gradient(circle at 70% 70%, rgba(0, 168, 255, 0.05) 0%, transparent 25%);
z-index: 0;
}

.how-it-works h1 {
text-align: center;
font-size: 3rem;
background-color: var(--accent-color);
background-image: linear-gradient(to top, var(--accent-color) 0%, #80d0ff 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 2rem;
}

.how-it-works__container {
  display: block; /* Changed from grid to block */
  margin: 0 auto;
  width: 100%;
  max-width: 1300px;
  padding-right: 50px;
  padding-left: 50px;
  position: relative;
  z-index: 1;
}

.how-it-works__content {
  color: var(--text-color);
  width: 100%;
  max-width: 100%; /* Ensure it takes full width */
}

.how-it-works__content p {
margin: 1rem 0;
font-size: 1.2rem;
line-height: 1.5;
}

.steps-container {
margin: 2rem 0;
}

.step {
  display: flex;
  margin-bottom: 1.5rem;
  /* Changed from align-items: center to align-items: flex-start */
  align-items: flex-start; 
}

.step-icon {
  background: var(--accent-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-color);
  margin-right: 1rem;
  flex-shrink: 0;
  /* Add margin-top to position it between h3 and paragraph */
  margin-top: 0px; /* Adjust this value as needed */
}

.step-content {
flex-grow: 1;
}

.step-content h3 {
margin-bottom: 0.5rem;
font-size: 1.3rem;
}

.disclaimer {
font-style: italic;
margin-top: 2rem !important;
}

.how-it-works__btn {
font-size: 1rem;
background-image: linear-gradient(to top, var(--accent-color) 0%, #4da8ff 100%);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: var(--text-color);
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}

.how-it-works__btn a {
position: relative;
z-index: 2;
color: var(--text-color);
text-decoration: none;
}

.how-it-works__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--secondary-color);
transition: all 0.35s;
border-radius: 4px;
}

.how-it-works__btn:hover {
color: var(--text-color);
}

.how-it-works__btn:hover:after {
width: 100%;
}

.how-it-works__img--container {
text-align: center;
}

#how-it-works__img {
max-width: 90%;
height: auto;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media screen and (max-width: 960px) {
.how-it-works h1 {
  font-size: 2.5rem;
}
}

@media screen and (max-width: 768px) {
.how-it-works__container {
  grid-template-columns: 1fr;
}

.how-it-works__content {
  text-align: center;
  margin-bottom: 2rem;
}

.step {
  flex-direction: column;
  text-align: center;
}

.step-icon {
  margin: 0 auto 1rem;
}

.how-it-works__img--container {
  margin-top: 3rem;
}
}

@media screen and (max-width: 480px) {
.how-it-works h1 {
  font-size: 2rem;
}

.how-it-works__content p {
  font-size: 1rem;
}

.step-content h3 {
  font-size: 1.1rem;
}
}

/* Section "Combien vous pouvez gagner" */
.earnings {
  background-color: #01142a;
  padding: 4rem 0;
  position: relative;
  overflow: visible;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.earnings::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 30% 30%, rgba(0, 168, 255, 0.05) 0%, transparent 25%),
              radial-gradient(circle at 70% 70%, rgba(0, 168, 255, 0.05) 0%, transparent 25%);
z-index: 0;
}

.earnings h1 {
text-align: center;
font-size: 3rem;
background-color: var(--accent-color);
background-image: linear-gradient(to top, var(--accent-color) 0%, #80d0ff 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}

.earnings__container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-self: center;
margin: 0 auto;
width: 100%;
max-width: 1300px;
padding-right: 50px;
padding-left: 50px;
position: relative;
z-index: 1;
}

.earnings__left, .earnings__right {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
color: var(--text-color);
}

.earnings__number {
font-size: 5rem;
font-weight: bold;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--accent-color);
background-image: linear-gradient(to top, var(--accent-color) 0%, #80d0ff 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}

.euro {
font-size: 4rem;
margin-left: 5px;
}

.earnings__left p, .earnings__right p {
font-size: 1.2rem;
line-height: 1.5;
max-width: 400px;
}

.highlight {
font-weight: bold;
color: var(--accent-color);
}

.earnings__text {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5rem;
text-align: center;
color: var(--text-color);
}

.big-text {
font-size: 3.5rem;
background-color: var(--accent-color);
background-image: linear-gradient(to top, var(--accent-color) 0%, #80d0ff 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: block;
margin: 10px 0;
}

.section-transition.reverse {
height: 80px;
background: linear-gradient(to bottom, #01142a 0%, var(--background-color) 100%);
margin-top: -1px;
margin-bottom: -1px;
position: relative;
z-index: 10;
}
.services {
background-color: var(--secondary-color);
}

/* Mobile Responsive */
@media screen and (max-width: 960px) {
.earnings h1 {
  font-size: 2.5rem;
}

.earnings__number {
  font-size: 4rem;
}

.euro {
  font-size: 3rem;
}

.big-text {
  font-size: 3rem;
}
}

@media screen and (max-width: 768px) {
.earnings__container {
  grid-template-columns: 1fr;
}

.earnings__left, .earnings__right {
  margin-bottom: 2rem;
}

.big-text {
  font-size: 2.8rem;
}
}

@media screen and (max-width: 480px) {
.earnings h1 {
  font-size: 2rem;
}

.earnings__number {
  font-size: 3.5rem;
}

.euro {
  font-size: 2.5rem;
}

.earnings__left p, .earnings__right p {
  font-size: 1rem;
}

.big-text {
  font-size: 2.5rem;
}
}