.section1{
    width: 100%;
    height: 73vh;
    background-image: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)),
                      url(/images/sove-ayiti.jpg);
    background-size: cover;
    /* animation: zoomMove 20s infinite alternate ease-in-out; */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    
}

/* @keyframes zoomMove {
    0%   { background-size: 170%; background-position: center; }
    50%  { background-size: 150%; background-position: right; }
    100% { background-size: 160%; background-position: left; }
  }*/

.titre{
    font-size: 5rem ;
    color: rgb(1, 10, 163);
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: 0 auto;
    font-style: normal;
    text-align : center;
    margin-top: 0.7em;
}
    
       
.soustitre{
    font-size: 2rem;
    color: rgb(17, 39, 184);
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    padding-top: 20px;
    text-align : center;
    z-index: 8;
}

.description {
    font-size: 1.5rem;
    color: rgb(245, 3, 3);
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    padding-top: 20px;
    text-align: center;
    max-width: 800px; 
    
}

.bouton{
    background-color: #c06504;   /* couleur de fond */
    color: white;               /* couleur du texte */
    font-size: 1.2rem;            /* taille du texte */
    padding: 9px 22px;         /* taille interne (hauteur et largeur) */
    border: none;               /* pas de bordure */
    border-radius: 8px;         /* arrondi des coins */
    cursor: pointer;            /* curseur "main" */
    transition: all 0.3s ease;  /* animation fluide */
    margin-top: 20px; 
}

/* Effet au survol */
.bouton:hover {
    background-color: #1807b4;  /* couleur plus foncée */
    transform: scale(1.05);     /* léger zoom */
  }
  
  /* Effet au clic */
  .bouton:active {
    background-color: #1c5985;  /* encore plus foncé */
    transform: scale(0.98);     /* petit rétrécissement */
  }


  /* Media Queries pour la réactivité */

  @media (max-width: 1024px) {
  .section1{ height: 70vh; }
    .titre { font-size: 3.5rem; }
  .soustitre { font-size: 1.5rem; }
  .description { font-size: 1.2rem; }
}

@media (max-width: 768px) {
  .section1{ height: 80vh; }
    .titre { font-size: 3rem; }
  .soustitre { font-size: 2rem; }
  .description { font-size: 1.5rem; padding: 10px; }
  .bouton { font-size: 14px; padding: 14px 22px; margin-top : 30px;}
}
@media (max-width: 480px) {
  .section1{ height: 80vh; }
    .titre { font-size: 3rem; }
  .soustitre { font-size: 2rem; }
  .description { font-size: 1.5rem; padding: 5px; }
  .bouton { font-size: 14px; padding: 14px 22px; margin-top: 30px;}
}