.section1{
    width: 100%;
    height: 100vh;
    background-color: rgb(251, 220, 149);
    background-image: url(/images/Mount.png);
    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(17, 44, 97);
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: 0 auto;
    font-style: normal;
    text-align : center;
    margin-top: 0.8em;
}
    
       
.soustitre{
    font-size: 2rem;
    color: rgb(24, 87, 160);
    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(251, 251, 251);
    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: #3498db;   /* couleur de fond */
    color: white;               /* couleur du texte */
    font-size: 16px;            /* taille du texte */
    padding: 12px 24px;         /* 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: 50px; 
}

/* Effet au survol */
.bouton:hover {
    background-color: #2980b9;  /* 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: 60vh; }
    .titre { font-size: 2.5rem; }
  .soustitre { font-size: 1.2rem; }
  .description { font-size: 1rem; padding: 10px; }
  .bouton { font-size: 14px; padding: 10px 18px; }
}
@media (max-width: 480px) {
  .section1{ height: 50vh; }
    .titre { font-size: 2rem; }
  .soustitre { font-size: 1rem; }
  .description { font-size: 0.9rem; padding: 5px; }
  .bouton { font-size: 12px; padding: 8px 16px; }
}