*{
  box-sizing:border-box
}
body{
  margin:0;font-family:Arial,sans-serif;background:hsl(0, 0%, 100%)
}
header,.hero,footer{
  text-align:center;padding:20px
}
main {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px 30px;
  background-color: #1a1a1a; 
  color: #ffffff;            
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.item{
  display:flex;
  justify-content:space-between;
  padding:16px;
  background:#ffffff;
  border-radius:12px;
  margin-bottom:12px
}

.button{
  background:#000;
  color:hsl(0, 0%, 100%);
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none
}

@media(min-width:768px){
  main{background-color: rgb(255, 255, 255);
    max-width:1000px;margin:auto
  }
}
.hero {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5)), 
              url('https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=1200'); /* L'image de la bannière */
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  padding: 80px 20px; /* Gère la hauteur de ta bannière */
}
main {
  max-width: 800px;
  margin: 60px auto;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.95); /* Fond blanc à 95% opaque */
  border-radius: 8px; /* Des jolis coins arrondis */
}
.booking-form button {
  background-color: #ffffff; /* Fond blanc pur */
  color: #121212;            /* Texte noir/sombre pour bien trancher */
  border: none;
  cursor: pointer;
  align-self: flex-start;
  padding: 14px 35px;
  border-radius: 30px;       /* Reste bien arrondi[cite: 1] */
  font-size: 1rem;
  font-weight: bold;         /* Écriture en gras pour que ce soit bien lisible */
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1); /* Petite lueur blanche discrète */
  transition: all 0.3s ease;
}

/* L'effet quand on passe la souris sur le bouton */
.booking-form button:hover {
  background-color: #e5e5e5; /* Devient un gris très léger au survol */
  transform: translateY(-2px); /* Il monte un petit peu */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2); /* La lueur s'accentue */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group label {
  font-weight: 500;
  color: #ffffff; /* */
  font-size: 0.9rem;
  text-transform: uppercase; /* Donne un effet "pro" */
  letter-spacing: 1px;
}

/* Style des champs (inputs & textarea) */
.form-group input, 
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  background-color: #222222; /* Un poil plus foncé et qualitatif[cite: 1] */
  border: 1px solid #3a3a3a; /* Bordures super fines */
  border-radius: 10px; /* Des coins bien arrondis et modernes */
  color: #ffffff; /*[cite: 1] */
  font-family: inherit;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* Effet de profondeur à l'intérieur */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animation ultra fluide */
}

/* Style du texte d'exemple */
.form-group input::placeholder, 
.form-group textarea::placeholder {
  color: #666666; /* Plus discret */
}
.booking-form {
  gap: 30px; /* On passe de 24px à 30px pour donner de l'air */
}

/* Espace la petite consigne sous le titre principal */
.booking-form-intro {
  line-height: 1.8; /* Espace bien les lignes de texte explicatif */
  margin-bottom: 20px;
}

/* Espace le titre de la case (ex: "Nom complet") et la case elle-même */
.form-group {
  gap: 12px; /* On passe de 10px à 12px */
}

/* Si l'utilisateur écrit un très long message, les lignes qu'il tape seront bien espacées */
.form-group textarea {
  line-height: 1.6; 
}