/* Mise en page générale */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 100vh; /* Prend toute la hauteur de l'écran */
}

/* Conteneur principal */
.container {
    width: 50%; /* Réduit la largeur du conteneur */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center; /* Centre le texte */
    overflow: hidden;
}

/* Entête avec logo */
.header {
    margin-bottom: 20px;
}

.logo {
    max-width: 80%; /* Limite la taille du logo */
    height: auto;
    margin: 0 auto;
}

/* Section de demande de réservation */
.reservation-info {
    padding: 20px;
}

h1 {
    color: #0374ab;
    font-size: 22px; /* Taille de police réduite */
    margin-bottom: 20px;
}

p {
    font-size: 14px; /* Taille de texte réduite */
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Liste centrée avec texte justifié */
ul {
    list-style-type: disc; /* Ajoute des puces rondes */
    padding-left: 20px; /* Espace à gauche pour les puces */
    text-align: justify; /* Justifie le texte des éléments de la liste */
    font-size: 14px; /* Taille de texte réduite pour les items de liste */
    margin-bottom: 15px; /* Ajoute un espace en bas */
    display: inline-block; /* Centre le ul tout en gardant la justification des éléments */
}

ul li {
    margin-bottom: 10px;
}

/* Styles pour les boutons généraux */
.btn-return {
    display: inline-block;
    background-color: #a90542;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px; /* Réduit la taille du texte */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 10px 0; /* Ajoute un espacement entre les boutons */
}

.btn-return:hover {
    background-color: #8c0438;
}

/* Bouton pour voir l'adresse mail */
.btn-mail {
    display: inline-block;
    background-color: #0374ab; /* Couleur bleue différente */
    color: #fff;
    padding: 12px 24px; /* Taille légèrement plus grande */
    font-size: 16px; /* Texte un peu plus grand */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 25px; /* Bordure arrondie plus marquée */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    margin: 20px 0; /* Plus d'espace autour */
}

.btn-mail:hover {
    background-color: #0056b3; /* Couleur plus foncée au survol */
    transform: scale(1.05); /* Effet d'agrandissement au survol */
}

/* Styles pour les liens */
a {
    text-decoration: none;
    color: inherit;
}
