Changer opacité background-color sans changer opacité texte

Bonjour,

Je viens ici car j'ai un petit problème. Pour un afficheur web, j'ai plusieurs divs dans la quart gauche de l'écran, défini pour des informations statiques. Dans ce dernier, j'aimerai que les background colors de la première div (date/heure) et la deuxième (éphéméride) puissent être réglés en opacité, sans impacté les autres éléments à l'intérieur de ces derniers.

Voici mon code css :
 

@font-face {
    font-family: "OpenSans";
    src: url('OpenSans-Regular.ttf');
}
@font-face {
    font-family: "MTCORSVA";
    src: url('MTCORSVA.ttf');
}

html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
}

.fete .titre {
    color:#525D5B;
    opacity: 1;
}


.gauche{
    float:left;
    position: absolute;
    z-index: 1;
    width: 25%;
    height: 100%;
    cursor: none
}

.date {
    height: 90px;
    margin: 15px;
    background-color: #f6f6f7;
    border-radius: 30px;
    text-align: center;
    font-family: OpenSans;
}



#jour {
    font-size: 1.7em;
    font-weight: bold;
    margin: 0;
}

#heure {
    font-weight:bolder;
    font-size: 1.5em;
    margin: 2%;
}

.fete {
    text-align: center;
    font-size: 2em;
    font-weight:bolder;
    height: 120px;
    background-color: #f6f6f7;
    border-radius: 30px;
    line-height: 60px;
    font-family: MTCORSVA;
    opacity: 0.5;
}


.citation {
    font-weight: bold;
    font-family: MTCORSVA;
    font-size: 1.7em;
    /*font-color: rgb(0,0,0);*/
}

.auteur {
    font-size: 1em;
}

a {
    text-decoration: none;
    color: black;
}

.source {
    display: none;
}

.droite{
    /*float:right;*/
    position: relative;
    width:75%;
    height: 99%;
    cursor: none;
}

.fluid_container {
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}

.slide_container {
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
}

.bandeau {
    position: absolute;
    display: none;
    height: 80px;
    margin: 0 auto;
    bottom: 0;
    background-color: #b3b3b3; /*ffa724*/
    opacity: 0.85;
    width: 133%;
    line-height: 80px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: content-box;
    animation: marquee 40s linear infinite;
    z-index: 1;
}

.bandeau span {
    font-size: 2.5em;
    font-family: OpenSans;
}

@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -50% }
}

video#bgvid {
    position: fixed;
    right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: 100;
}

.carousel {
    margin-top: 90px;
    text-align: center;
    height: 100px;
    margin: 15px;
    background-color: #ffffff;
    border-radius: 90px;
    text-align: center;
    font-family: OpenSans;
}


#slider {
    position:relative;
    z-index: 0;


}

#img border{
    cursor: none;
}


#curseur{
    display: none;
}

Les divs en question sont : .date et .fete

Merci d'avance,

Tom.
Linux / Firefox 124.0