.infoBox3 {
    background-color: #b0d6fa; /* Light blue */
    padding: 1.09rem;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 90vw;
    width: min(90%, 33rem);
    margin: 1.2rem auto;
    overflow-x: auto; /* Allows horizontal scrolling if needed */
}

.infoBox3 .troisCentresTitle {
    font-size: clamp(0.1rem, 1.4rem, 1.8rem); 
    color: #004080;
    font-weight: bold;
}

/* Flexbox for aligning city names and addresses */
.infoBox3 .text-line {
    display: flex;
    text-align: left;
    position: relative;
    top: 9px;
}

/* Fixed width for city names to align semicolons */
.infoBox3 .text-line strong {
    font-weight: bold;
    width: 100px; /* Fixed width to align semicolons vertically */
    text-align: right; /* Right-align city names */
    flex-shrink: 0; /* Prevents shrinking */
}

/* Style addresses */
.infoBox3 .text-line span {
    display: inline-block;
    flex-grow: 1; /* Takes remaining space */
    text-align: left;
    font-size: clamp(0.1rem, 0.9rem, 1.8rem); 
    padding-left: 10px; /* Consistent spacing after semicolon */
}