/* ------------------------------- CSS NEWSLETTER --------------------------------- */

/* --------- GENERALITES SUR LE FORMULAIRE ---------- */

form#newsletter-form {
  width: 100%; /* La largeur du formulaire équivaut à 100% de la largeur de son parent (corps de page nommé article) */
  height: 100%; /* La hauteur du formulaire équivaut à 100% de la hauteur de son parent */
  display: flex; /* Les éléments de la newsletter seront structurés suivant le mode flexbox */
  align-items: center; /* Mode flexbox : les éléments sont alignés au centre de la page, en suivant l'axe secondaire (par défaut vertical) */
  justify-content: space-around; /* Mode flexbox : les éléments sont séparés par un espace identique, avant eux + entre eux + après eux */
}

/* -------- GENERALITES SUR LE CONTENEUR DES ELEMENTS DE FORMULAIRE ------ */

form#newsletter-form .form-container {
  width: 100%; /* La largeur du conteneur équivaut à 100% de la largeur de son parent (newsletter-form) */
  display: flex; /* Mode flexbox */
  flex-direction: column; /* Propriété flexbox : définit que l'alignement des éléments se fait verticalement */
  align-items: center; /* Propriété flexbox : définit que les éléments se centrent sur la page dans l'axe secondaire (par défaut vertical) */
}

/* --------- ELEMENT POUR AJOUTER SON E-MAIL --------- */

/* Définit le style de la barre de formulaire */
form#newsletter-form .form-container #newsletter-email { 
  width: 100%; /* La largeur du formulaire d'e-mail équivaut à 60% de la largeur de son parent (form-container) */
  padding-top: 10px; /* La barre est augmentée de 10px sur le haut */
  padding-bottom: 10px; /* La barre est augmentée de 10px sur le bas */
  margin-bottom: 15px; /* Crée une marge de 15px en bas de la barre pour l'espacer du bouton */
  background-color: transparent; /* Rend transparante la couleur de fond que le navigateur affiche par défaut */
  border-radius: 5px; /* Arrondit les coins de la barre sur environ 5px */
  border: none; /* Annule la bordure que le navigateur affiche par défaut */
  outline: none; /* Annule le contour que le navigtaur affiche par défaut */
  text-align: center; /* Le texte qu'écrit l'utilisateur dans la barre est centré dans la barre */
  font-size: 20px; /* Le texte que saisit l'utilisateur mesure 20px de haut */
  caret-color: white; /* Définit que le curseur de saisie est de couleur blanche */
  color: white; /* Définit la couleur du texte que saisit l'utilisateur */
}

/* Comportement de la barre de formulaire lorsque l'utilisateur clique dessus */
form#newsletter-form .form-container #newsletter-email:focus { 
  width: 60%;
  background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond noire semi-transparente (50%) */
}

/* Définit le style du texte de substitution */
form#newsletter-form .form-container #newsletter-email::placeholder { 
  color: white; /* Le texte est de couleur blanche */
  opacity: 0.8; /* Son opacité est de 80% */
  text-decoration: underline; /* Il est souligné pour plus d'affordance : l'utilisateur comprendra qu'il peut cliquer sur cette zone */
}

/* --------- BOUTON D'ENVOI DE L'E-MAIL -------- */

form#newsletter-form .form-container .newsletter-submit {
  width: 20%; /* La largeur du bouton équivaut à 20% de la largeur de son parent (form-container) */
  padding: 10px; /* Ajoute un espace de 10px en haut, en bas, à gauche et à droite de l'élément pour augmenter la taille du bouton */
  box-sizing: border-box; /*  */
  border: 1px solid white; /* Définit que la bordure doit être continue, blanche et mesurer 1px de large */
  border-radius: 10px; /* Arrondit les coins du bouton sur 10px */
  background-color: transparent; /* Rend transparente la couleur de fond que le navigateur affiche par défaut en blanc/gris */
  cursor: pointer; /* Modifie la forme du curseur (prend la forme d'une main) */
  font-size: 20px; /* Le texte du bouton mesure 20px */
  color: white; /* Le texte du bouton est en blanc */
}

form#newsletter-form .form-container .newsletter-submit:hover { /* Définit le comportement du bouton lorsqu'il est survolé par la souris */
  color: rgba(1, 1, 1, 0.7); /* Le texte devient noir avec une opacité de 70% lorsqu'il est survolé */
  background-color: white; /* La couleur de fond devient blanche */
  border-color: transparent; /* La couleur de bordure devient transparente */
}