/***********************************************
 * ========== NEWSLETTER & MODALE ==========
 ***********************************************/

/*
   Bloc principal de la newsletter
   - Fond coloré, marge, padding, etc.
*/
.newsletter-subscribe {
    margin: 20px auto;
    text-align: center;
    color: #fff;                 /* Texte blanc sur fond sombre */
    background-color: #3e1f1c;   /* Fond qui délimite le bloc */
    border: 1px solid #d09f61;   /* Bordure assortie à la palette */
    border-radius: 8px;          /* Angles arrondis */
    padding: 25px;               /* Espacement interne */
    width: 90%;                  /* Sur petits écrans, prend 90% de la largeur */
    max-width: 400px;            /* Largeur max sur écrans plus grands */
  }
  
  .newsletter-subscribe h3 {
    margin-bottom: 15px;
  }
  
  /* 
     Le formulaire en "flex-wrap" autorise 
     le retour à la ligne si l'espace horizontal est insuffisant.
  */
  .newsletter-subscribe form {
    display: flex;
    flex-wrap: wrap;        
    align-items: center;    
    justify-content: center;
    gap: 16px;              /* Espace entre le label, l'input, et le bouton */
    margin: 0 auto;
  }
  
  /* Label du champ email (facultatif) */
  .newsletter-subscribe form label {
    /* Ex: margin-bottom: 8px en responsive, si besoin */
  }
  
  /* Champ email */
  .newsletter-subscribe input[type="email"] {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  /*
     Bouton “S'abonner”
     - Couleur de fond
     - Animation possible (bounce-subscribe)
  */
  .newsletter-subscribe button[type="submit"] {
    background: #d09f61;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
  
    /* Optionnel : on le descend un peu pour l'aligner avec l'input */
    position: relative;
    top: 5px;
  }
  
  /* Couleur du bouton au survol */
  .newsletter-subscribe button[type="submit"]:hover {
    background: #bf8f54;
  }
  
  /* Animation bounce du bouton */
  .bounce-subscribe {
    animation: bounceBtn 1.3s infinite alternate;
  }
  
  @keyframes bounceBtn {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-3px); }
  }
  
  /***********************************************
   * ========== MODALE “MERCI” ==========
   ***********************************************/
  
  /*
     .thank-you-modal recouvre tout l'écran
     pour afficher la fenêtre de remerciement
     lorsque l'abonnement est validé
  */
  .thank-you-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);  /* Fond semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 9999;                /* Au-dessus de tout */
  }
  
  /*
     Contenu de la modale:
     - Largeur adaptative (90% sur mobile, max 450px)
     - max-height pour éviter le débordement vertical
     - overflow-y pour scroller si le contenu est trop long
  */
  .thank-you-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    width: 90%;
    max-width: 450px;   
    text-align: center;
    position: relative;
    box-sizing: border-box;
  
    /* Pour éviter le “pincement” sur mobile si trop de contenu */
    max-height: 80vh;
    overflow-y: auto;
  }
  
  /* Bouton “Fermer” dans la modale */
  #closeThankYouModal {
    background: #d09f61;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  #closeThankYouModal:hover {
    background: #bf8f54;
  }
  
  /***********************************************
   * ========== CONFETTI CANVAS ==========
   ***********************************************/
  
  /*
     Le canvas de confettis couvre toute la page
     en arrière-plan (pointer-events: none).
  */
  #confettiCanvas {
    pointer-events: none; 
    position: fixed;     
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;       
  }
  
  /***********************************************
   * ========== RESPONSIVE NEWSLETTER ==========
   ***********************************************/
  
  /*
     Sur mobile, on aligne le formulaire en colonne
     pour plus de lisibilité.
  */
  @media (max-width: 600px) {
    .newsletter-subscribe form {
      flex-direction: column;
      gap: 12px; /* plus d'espace vertical */
    }
  
    .newsletter-subscribe form input[type="email"] {
      width: 100%;
    }
  }