/* bilingual.css */

.bilingual-book {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Ajustez selon vos besoins */
    margin: 32px 0;  /* Centrage et espacement vertical, ajustez */
    padding: 0;          /* Le padding est géré par les colonnes */
    box-sizing: border-box;
    min-height: 300px;   /* Hauteur minimale */
    opacity: 0;          /* Caché initialement, révélé par JS via .is-visible */
    /*transition: opacity 0.3s ease-in-out; /* Effet de fondu */
}

.bilingual-book.is-visible {
    opacity: 1;
}

.left-column, .right-column {
    width: 50%;
    box-sizing: border-box;
}

.left-column {
    padding: 0 64px 0 32px;
    /*border-right: 1px dotted #6893cc; /* Ligne pointillée */
}

.right-column {
    padding: 0 32px 0 64px;
}

@media screen and (max-width: 576px) {
	.left-column {
		padding: 0 10px 0 0;
	}

	.right-column {
		padding: 0 0 0 10px;
	}
	.bilingual-book {
		font-size:70%;
	}
	.left-column p {
		text-align: left;
	}
	.right-column p {
		text-align: left;
	}
	.book blockquote {
		border-left-width: 0;
		background-color:#eee;
		font-size: 100%;
	}
}

/* Styles pour les premiers/derniers enfants des colonnes */
.left-column > *:first-child,
.right-column > *:first-child {
    margin-top: 0;
}
.left-column > *:last-child,
.right-column > *:last-child {
    margin-bottom: 0;
}

/* Placeholder pour les éléments vides */
.bilingual-placeholder {
    /* opacity: 0.5; */
}

/* Styles pour le survol des segments de texte bilingue */
.bilingual-segment {
    cursor: default;
}
.bilingual-segment-hover-left {
    background-color: #e6f7ff; /* Style pour la colonne de gauche au survol */
}
.bilingual-segment-hover-right {
    background-color: #fffbe6; /* Style pour la colonne de droite au survol */
}