body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    /*background-color: #f4f4f4;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*min-height: 100vh;
	/*border: 1px solid #ECB71D; /* Couleur du cadre */
}

.container {
    /*background-color: #fff;*/
	margin : 100px;
    padding: 60px;
    border-radius: 20px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    /*width: 100%;*/
    max-width: 85%;
	border: 2px solid #ECB71D; /* Couleur du cadre */
}

 .button-container img {
			margin: 0px;
			height: 80px;
			margin: 0;
			cursor: pointer;
			align-items: left;
        }

.text-line {
	font-weight: bold;
    font-size: 2em;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 2px solid #ECB71D; /* Ajout de la bordure bleue */
    padding-bottom: 0px; /* Optionnel: ajoute un peu d'espace entre le texte et la ligne */
}

.text-line2 {
	font-weight: bold;
    font-size: 2.5em;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
   
}

.text-left {
    text-align: left;
	/*animation: clignoter 1s infinite; /* Applique l'animation */
}

.text-left2 {
    text-align: left;
	/*animation: clignoter 1s infinite; /* Applique l'animation*/
}
.text-cligno {
    text-align: left;
	animation: clignoter 1s infinite; /* Applique l'animation */
}
.text-sub {
	margin-top : 15px;
	font-size: 1.5em;
    text-align: left;
}

.text-right {
    text-align: left;
}

.rsvp-section {
	display: flex;
    text-align: center;
    margin-bottom: 0px;
	flex-direction: column;
}

.rsvp-section h2 {
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.confirmation-buttons button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.confirmation-buttons img {
    width: 250px;
    height: 250px;
    /* Vous pouvez éventuellement ajuster ceci si nécessaire */
     margin-right: -5px; 
}

.video-section {
	text-align: center;
    margin-top: 50px;
	max-width: 100%;
	

}
.video-section img {
    display: block; /* Empêche les marges automatiques de causer des problèmes */
    max-width: 100%;
    height: auto;
}

.music-control2 {
    text-align: left;
}

.music-control2 audio {
    display: none; /* Masquer le lecteur audio par défaut */
}

.music-control2 img {
    width: auto;
    height: 85px;
    cursor: pointer;
	margin-top:20px;
}

.half-line {
    width: 29%; /* La ligne prendra 50% de la largeur de son conteneur */
    height: 2px; /* Épaisseur de la ligne */
    border-bottom: 2px solid #ECB71D; /* Ajout de la bordure bleue */
    /*margin: 0px auto; /* Ajoute une marge en haut et en bas et centre la ligne horizontalement */
	text-align: left;
}

/* ... autres styles ... */

.rsvp-section {
    text-align: center;
    margin-bottom: 30px;
}

.single-line-rsvp {
	font-weight: bold;
    font-size: 1.5em;
    display: flex; /* Aligner les éléments en ligne */
    align-items: center; /* Aligner verticalement au centre */
    justify-content: space-between; /* Espacer les éléments (texte à gauche et le reste) */
    padding: 10px; /* Ajouter un peu de padding autour */
    border-bottom: 2px solid #ECB71D; /* Vous pouvez remettre la bordure si vous le souhaitez */
}

.single-line-rsvp .text-left {
    text-align: left;
}

.single-line-rsvp .text-right {
    text-align: left;
}

.single-line-rsvp form {
    display: flex; /* Aligner les boutons et potentiellement le texte à droite */
    align-items: center;
}

.single-line-rsvp form button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 10px; /* Ajouter un espace entre les boutons */
    cursor: pointer;
}

.single-line-rsvp form img {
    width: auto; /* Ajustez la taille des images si nécessaire */
    height: 75px;
	cursor: pointer;
}

/* ... autres styles ... */



@keyframes clignoter {
    0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 1220px) {

.container {
    /*background-color: #fff;*/
	margin : 10px;
    padding: 60px;
    border-radius: 20px;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    /*width: 100%;*/
    max-width: 85%;
	border: 2px solid #ECB71D; /* Couleur du cadre */
}

    .text-line {
        flex-direction: column;
        align-items: left;
    }

    .text-left, .text-right, .text-left2 {
        text-align: left;
		line-height: 1.1;
        width: 100%;
        margin-bottom: 0px;
    }

    .confirmation-buttons img {
        width: auto;
        height: 40px;
    }
	.music-control2 img {
    width: auto;
    height: 30px;
    cursor: pointer;
	margin-top:4px;
}
.video-section {
	text-align: center;
    margin-top: 10px;
	max-width: 100%;
}
.video-section video {
    /*display: block; /* Empêche les marges automatiques de causer des problèmes */
    max-width: 100%;
	text-align: center;
    height: auto;
}
.text-line {
    font-weight: bold;
    line-height: 0.9;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    /*margin-bottom: 10px;*/
    border-bottom: 2px solid #ECB71D; /* Ajout de la bordure bleue */
    padding-bottom: 0px; /* Optionnel: ajoute un peu d'espace entre le texte et la ligne */
}
.text-sub {
	margin-top : 0px;
	font-size: 0em;
    text-align: left;

}
.button-container img {
			margin: 0px;
			height: 40px;
			margin: 0;
			cursor: pointer;
			align-items: left;
        }
.button-container {
			margin: 0px;
			align-items: left;
        }

.half-line {
    width: 50%; /* La ligne prendra 50% de la largeur de son conteneur */
    height: 2px; /* Épaisseur de la ligne */
    border-bottom: 2px solid #ECB71D; /* Ajout de la bordure bleue */
    /*margin: 0px auto; /* Ajoute une marge en haut et en bas et centre la ligne horizontalement */
	text-align: left;
}

.single-line-rsvp {
	font-weight: bold;
    font-size: 0.9em;
	line-height: 1;
    display: flex; /* Aligner les éléments en ligne */
    align-items: left; /* Aligner verticalement au centre */
    /*justify-content: space-between; /* Espacer les éléments (texte à gauche et le reste) */
	justify-content: flex-start;
    padding: 0px; /* Ajouter un peu de padding autour */
    border-bottom: 0px solid #ECB71D; /* Vous pouvez remettre la bordure si vous le souhaitez */
    align-items: left; /* Centrer horizontalement dans la carte */
    text-align: left; 
}
.single-line-rsvp form img {
    width: auto; /* Ajustez la taille des images si nécessaire */
    height: 35px;
	text-align: right;
	cursor: pointer;
	display: flex; /* Aligner les éléments en ligne */
}
.single-line-rsvp .text-left {
    text-align: left;
	font-size: 0em;
	width:0;
}

.single-line-rsvp .text-right {
    text-align: left;
	font-size: 0.9em;
}
}