/* GLOBAL */
body {
  margin: 0;
  font-family: "Kantumruy Pro", sans-serif;
  background-color: #EFF3FA;
  color: #333;
  line-height: 1.5;
}

h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-top: 5vh;
}
h2 {
    font-size: 1.6rem;
    font-weight: 600;
}
p {
    font-family: "Figtree", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
.content-wrapper {
  width: 100%;
  max-width: 840px;
  margin: 60px auto;    
  padding: 0 20px;
  box-sizing: border-box;
}

.content-wrapper > p {
    margin: 5vh 0;
}

/* LOGO */
.header-logo {
  display: block;
  margin: 30px auto 40px auto;
  max-width: 200px;
  height: auto;
}
@media (max-width: 480px) {
  .header-logo {
    max-width: 150px;
    margin-top: 40px;
    margin-bottom: 30px;
  }
}

.launch-date {
    margin-bottom: initial;
}
.launch-date span {
    font-weight: 600;
}

.countdown-section, #countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  padding: 1% 0 1% 0;
}

.countdown-section {
  display: flex;
  flex-direction: column; /* superpose texte et compteur */
  align-items: flex-start; /* aligne à gauche */
  gap: 15px;               /* espace entre le texte et le compteur */
  margin-bottom: 40px;     
  text-align: left;         /* aligne le texte à gauche */
  max-width: 700px;         /* même largeur que le contenu principal */
  box-sizing: border-box;
}

.time-box {
  background: #2c4a95;
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

/* PROPOS */
.about-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  margin: 3% 0;
}
.about-content #1{
    margin-right:5%;
}

.about-photo {
  width: 260px;
  height: 260px;
  border-radius: 20%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
}

.about-text {
  flex: 1;
  color: #444;
  font-size: 1.05em;
  line-height: 1.6;
  max-width: 840px;
}

.about-content strong{
  color: var(--main-blue, #1a4d8f);
}

/* Responsive mobile */
@media (max-width: 768px) {
  .about-section h2 {
    text-align: center;
  }

  .about-content {
    flex-direction: column;
    /*text-align: center;*/
    gap: 30px;
  }

  .about-photo {
    width: 100%;
    height:100%;
    border-radius:10px;
  }

  .about-text {
    max-width: 100%;
  }
}

/* CTA inversé */
.cta-section {
  max-width: 700px;
  margin: 0 auto 50px auto;
  padding: 30px;
  background-color: #2c4a95;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cta-section h2, .cta-section p, .logo-marquee h2 {
    color: #fff; /* texte blanc pour contraste */
    margin-top: 0;
}

.logo-marquee h2 {
    margin-top: 0;
}


#newsletter button, .aboutsection .cta-button{
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  border: none; /* on retire la bordure classique */
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.3s ease;
  text-align: center;
}

#newsletter button:active {
  transform: scale(0.95); /* effet “pressé” */
}
/* Bouton clair */
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
    text-align: center;
}

#newsletter button, #cta-button-1{
    background: linear-gradient(135deg, #2c4a95, #4a78c2); /* dégradé bleu */
    color: #fff;
}
#cta-button-2{
    background: linear-gradient(135deg, #D8E3FD, #ffffff); /* dégradé bleu clair -> blanc */
    color: #2c4a95; /* texte bleu foncé */
}

#newsletter button:hover, #cta-button-1:hover {
  background: linear-gradient(135deg, #4a78c2, #2c4a95); /* inversion du dégradé au survol */
}
#cta-button-2:hover {
    background: linear-gradient(135deg, #ffffff, #D8E3FD); /* inversion du dégradé au survol */
}

/* Mobile */
/*@media (max-width: 480px) {
    .cta-section {
        padding: 20px;
        margin: 30px auto;
    }
}*/

/* NEWSLETTER */
.newsletter-section, .about-section {
  max-width: 700px;
  margin: 0 auto 50px auto;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* text-align: center; */
}

.newsletter-section h2 {
  margin-bottom: 10px;
}

.newsletter-section p {
  margin-bottom: 20px;
  color: #555;
}
.text-newsletter span{
    font-weight: 600;
}

#newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

#newsletter input[type="email"] {
  flex: 1 1 250px;
  padding: 12px 15px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
  transition: border-color 0.3s;
}
#newsletter input[type="email"]:focus {
  border-color: #ff6b35;
}

/*#newsletter button {
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  border: 3px solid #2c4a95;
  border-radius: 6px;
  background-color: #2c4a95;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
} 
#newsletter button:hover {
  color: #000;
  background-color: #f9f9f9;
}*/



/* Case RGPD */
.rgpd-consent {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rgpd-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.rgpd-consent label {
    cursor: pointer;
}

.rgpd-consent a {
    color: #2c4a95;
    text-decoration: underline;
}

.rgpd-consent a:hover {
    color: #ff6b35;
}

/* Feedback */
#feedback {
    margin-top: 12px;
    font-weight: 500;
    text-align: center;
}
#feedback.success { color: green; }
#feedback.already { color: orange; }
#feedback.error { color: red; }

/* LOGO MARQUEE */
.logo-marquee {
    max-width: 700px;
    background:#2c4a95;
    position: relative;
    margin: 0 auto 50px auto;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.sub-section {
    width: 100%;
    overflow: hidden;
    background: #f9f9f9;
    padding: 30px 0;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sub-section::before, .sub-section::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;

}

.sub-section::before {

    left: 0;
    background: linear-gradient(to right, #f9f9f9, transparent);

}

.sub-section::after {

    right: 0;
    background: linear-gradient(to left, #f9f9f9, transparent);

}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
}

.marquee-track .logo {
    flex-shrink: 0;
}

.marquee-track .logo img {
    height:60px;
    width:auto;
    display:block;

    filter:grayscale(100%);
    opacity:0.7;
    transition:0.3s;
}

.marquee-track  .logo:hover img {

  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.08);

}


/*PAGE SERVICES
.services-section{
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 60px 0;
}

.services-cards {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #2c4a95;
}

.card p {
    margin-bottom: 15px;
    color: #555;
}

.card .cta-button {
    margin-top: auto;
    width: fit-content;
}*/

/* MOBILE */
@media (max-width: 768px) {
    
    /*.content-wrapper {
        padding: 20px;
        max-width: 700px;
    }*/
    h1 {
        font-size: 1.5rem;
        font-weight: 600;
    }
    h2 {
        font-size: 1.3rem;
        font-weight: 600;
    }
    p {
        font-family: "Figtree", sans-serif;
        font-size: 1rem;
        font-weight: 400;
    }
      
      .newsletter-section {
        max-width: 100%; /* prend toute la largeur disponible */
        padding: 20px;   /* espace intérieur */
        box-sizing: border-box; /* important pour que padding soit inclus */
      }
    
      #newsletter {
        display: flex;
        flex-direction: column; /* empile input + bouton */
        gap: 12px;
        width: 100%;
        align-items: stretch;   /* prend toute la largeur */
      }
    
      #newsletter input[type="email"],
      #newsletter button {
        width: 100%;
        max-width: 100%;
        flex: none;             /* empêche flex de modifier hauteur */
        padding: 10px 12px;     /* padding confortable, pas trop haut */
        font-size: 1rem;
        border-radius: 12px;
        height: auto;           /* laisse la hauteur se calculer naturellement */
        box-sizing: border-box; /* inclut padding dans la largeur */
      }
      
      .marquee-track{
        gap:50px;
      }
    
      .logo img{
        height:45px;
      }
}