@import url('/fonts/trenda/stylesheet.css');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}   
  
/* Paragraphes — Trenda Regular */
p{
  font-family: 'Trenda it', sans-serif;
  font-weight: normal; 
  font-style: normal;
}
a{
  font-family: 'Trenda it', sans-serif;
  font-weight: normal; 
  font-style: normal;
  
}
li{
  font-family: 'Trenda it', sans-serif;
  font-weight: normal; 
  font-style: normal;
}

body {
    margin: 0;              
    padding: 0;
    position: relative;      
    background-color: #fff; 
    min-height: 100vh;
}
/* ========== NAVBAR ========== */

/* ========== SECTION HERO ========== */
.hero {
    max-width: 1500px;
    margin: 2vh auto;
    padding: 3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  
  .hero-text {
    max-width: 1000px;
  }
  
  /* Style du titre principal */
  .title-underline {
    font-size: 3.5rem;
    font-family: 'Trenda', sans-serif; font-weight: 900; color: #100A4F; text-transform: uppercase;
    line-height: 1.2;   
    display: inline-block;
    position: relative;
    margin-bottom: 1.5rem; 
    z-index: -1;
  }
  
  /*.title-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0em;  
    width: 100%;
    height: 0.2em;   
    background-color: #6abf99;
    opacity: 0.7;
    z-index: -1;
  }
  */
  
  /* Style du sous-texte */
  .hero-text p {
    font-family: 'Trenda it', sans-serif; font-weight: normal; font-style: normal; font-size: 1.3rem;
    margin-top: 0.3rem;
    margin-bottom: 2.5rem;
  }
  
  .hero-text p .highlight {
    color: #FF7300; /* Vert */
    font-weight: bold;
  }
  
  .cta-btn {
    background-color: #FF7300;
    color: #fff;
    padding: 0.8rem 1.4rem;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .cta-btn:hover {
    background-color: #100A4F;
  }
  
  .hero-image img {
    width: 80vh;
    height: 60vh;
  }
  .highlight {
    color: #FF7300; 
  }
  

















    /* ========== FOOTER ========== */
.footer {
background-color: #111B52;
padding: 3rem 2rem;
}

.footer-container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}

.footer-col {
flex: 1;
min-width: 200px;
margin-bottom: 1.5rem;
color: white;
}

.footer-logo img {
max-width: 150px;
}

.footer-contact {
font-size: 1rem;
color: white;
margin-top: 1rem;
}

.footer-contact a {
text-decoration: none;
color: white;
font-weight: 500;
}

.footer-col h3 {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
}

.footer-col ul {
list-style: none;
padding: 0;
}

.footer-col ul li {
margin-bottom: 0.5rem;
}

.footer-col ul li a {
text-decoration: none;
color: white;
position: relative;
transition: color 0.3s ease-in-out;
}

.footer-col ul li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px; 
width: 0%;
height: 2px;
background-color: #FF7300; /* underline couleur*/
transition: width 0.3s ease-in-out;
}

.footer-col ul li a:hover {
color: #FF7300; /* text couleur */
}

.footer-col ul li a:hover::after {
width: 100%;
}



.footer-socials {
display: flex;
gap: 10px;
margin-top: 1rem;
}

.footer-socials a {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e0e0e0;
border-radius: 50%;
text-decoration: none;
color: #333;
font-size: 1.2rem;
transition: background 0.3s, color 0.3s;
}

.footer-socials a:hover {
background-color: #2f6d4e; /* icone de reseaux sociaux */
color: #fff;
}
        
/* Responsive pour tablettes et mobiles */
@media screen and (max-width: 768px) {
/* Justifier tous les paragraphes et les <li> du contenu principal, hors header et footer */
body:not(header):not(footer) p,
body:not(header):not(footer) li {
    text-align: justify !important;
    width: 100%;
}
.footer-container {
    flex-direction: column;
    text-align: center;
    
}
.footer div{
    margin-bottom: 3vh;
}

.footer-socials {
    justify-content: center;
}
}

/* Responsive */
/* Pour iPad/Tablettes (768px - 1024px) */
@media (max-width: 768px) {
/* Ajustement du Hero en mobile */
.hero {
flex-direction: column;
text-align: center;
padding: 0.5rem 1rem; 
margin-top: 1vh; 
}
/* Ajustement du texte */
.hero-text {
max-width: 100%;
padding: 0 1.5rem;
margin: 0 auto;
}
/* Titre principal plus petit */
.title-underline {
font-size: 2.2rem; 
line-height: 1.3;
margin-bottom: 1rem; 
}
.title-underline::after {
height: 0.15em; 
}
/* Ajustement du sous-texte */
.hero-text p {
font-size: 1.1rem; 
margin-bottom: 1.8rem; 
}
/* Bouton CTA ajusté */
.cta-btn {
font-size: 0.9rem;
padding: 0.7rem 1.2rem; 
border-radius: 15px;
}
/* ajustement de l'image */
.hero-image {
margin-top: 1rem;
}
.hero-image img {
max-width: 90%; 
height: auto; 
}
/*section choix*/
.section-choix {
flex-direction: column;
text-align: center;
}
.fusée {
width: 150px;
}

}



@media (max-width: 1024px) {
     /* Ajustement du Hero en tablette */
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 1rem 2rem; 
    margin-top: 2vh; 
  }

  /* Ajustement du texte */
  .hero-text {
    max-width: 100%;
    padding: 0 ;
    margin: 0 auto;
  }

  /* Titre principal */
  .title-underline {
    font-size: 2.8rem; 
    line-height: 1.3;
    margin-bottom: 1rem; 
  }

  /* Ajuste la taille du soulignement */
  .title-underline::after {
    height: 0.18em; 
  }

  /* Ajustement du sous-texte */
  .hero-text p {
    font-size: 1.1rem; 
    margin-bottom: 2rem; 
  }

  /* Bouton CTA */
  .cta-btn {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 18px;
  }

  /* Image adaptée pour tablette */
  .hero-image {
    margin-top: 3rem;
  }

  .hero-image img {
    max-width: 85%; 
    height: auto;
  }}