/*#region Style global*/

/*
* - Réinitialise les marges et le padding
* - Configure la police de caractères système par défaut
* - Optimise le rendu du texte
* - Applique un anticrénelage pour améliorer la lisibilité
*/
* {
  margin: 0px;
  padding: 0px;
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*#endregion*/

/*#region Styles des éléments HTML de base*/

/*
* Définit l'apparence et le comportement des composants individuels
*/
/* Titres principaux avec différentes importances */
h1 {
  font-weight: 900;
  margin: 10px;
}

h2 {
  font-weight: 700;
  margin-bottom: 5px;
}

h3 {
  font-weight: 600;
  margin-top: 15px;
}

/* Images avec effets de survol et ombres */
img {
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 14px;
  height: 90px;
  width: 90px;
}

img:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* Éléments de liste sans puces */
li {
  list-style: none;
}

/* Boutons avec effets de survol et style distinctif */
button {
  height: 40px;
  width: 50px;
  background-color: rgb(218, 192, 241);
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button:hover {
  background-color: rgb(211, 175, 243);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* Champs de saisie avec effets interactifs */
input {
  padding: 10px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

input:hover {
  border: 2px solid #9381ffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* Espacement pour les éléments span */
span {
  margin-top: 15px;
}
/*#endregion*/

/*#region Styles des sections et conteneurs*/

/*
* Structure et mise en page des différentes parties de l'application
*/

/* Fond dégradé de la page */
html {
  background: rgb(223, 247, 244);
  background: linear-gradient(
    45deg,
    rgb(232, 250, 248) 0%,
    rgb(246, 248, 221) 100%
  );
  background: -moz-linear-gradient(
    45deg,
    rgb(226, 250, 247) 0%,
    rgb(246, 248, 221) 100%
  );
  background: -webkit-linear-gradient(
    45deg,
    rgb(220, 245, 242) 0%,
    rgb(248, 250, 215) 100%
  );
}

/* Structure principale centrée */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* En-tête de page */
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 25px;
}

/* Conteneur principal avec grille 33%/66% */
.main {
  display: grid;
  grid-template-columns: 33% 66%;
  gap: 20px;
  width: 80%;
  margin: 20px;
}

/* Sections principales avec style commun */
.section33,
.section66 {
  display: flex;
  flex-direction: column;
  background-color: rgb(220, 245, 242);
  border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-items: center;
  padding: 10px;
}

/* Style du formulaire dans la section 33% */
.section33 form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px;
}

/* Conteneur des cartes météo */
.container-carte {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Style des cartes météo et stations */
.carte,
.carte-station {
  display: flex;
  flex-direction: column;
  background-color: #9b9b9b;
  height: 250px;
  width: 175px;
  margin: 8px;
  border-radius: 18px;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

/* Effet de survol des cartes */
.carte:hover,
.carte-station:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* Espacement du texte dans les cartes */
.carte span,
.carte-station span {
  margin-bottom: 8px;
}

/* Section de contact */
.main-contact {
  display: flex;
  flex-direction: column;
  background-color: rgb(220, 245, 242);
  border-radius: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-items: center;
  padding: 20px;
  width: 50%;
  margin: 20px;
}

/* Formulaire de contact */
.main-contact form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 8px;
  width: 100%;
}

/* Éléments du formulaire de contact */
.main-contact form ul li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 8px;
}

/* Zone de texte du formulaire */
.main-contact form ul li textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Effet de survol de la zone de texte */
.main-contact form ul li textarea:hover {
  border: 2px solid #9381ffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

/* Champs de saisie du formulaire */
.main-contact form ul li input {
  width: 100%;
}

/* Bouton du formulaire de contact */
.main-contact form ul li button {
  align-self: center;
  width: 150px;
}

/* Pied de page */
footer {
  text-align: center;
  font-size: 0.75em;
  padding: 1em 0;
  color: #888;
  width: 100%;
}
/*#endregion*/