
.grilleItem {
    position: relative; /* indispensable pour la bannière absolute */
}

.Banner_Vertical {
    margin: 9px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15%;               /* largeur par défaut */
    right: 0;                  /* côté droit par défaut */
    left: auto;
    /* flex = centrage réel */
    display: flex;
    justify-content: center;
    align-items: center;
    /* style */
    background-color: rgba(100, 100, 100, 0.4);
    z-index: 10;
    /* état caché */
    opacity: 0;
    pointer-events: none;
    /* animation */
    transition:
        width 0.3s ease,
        opacity 0.5s ease;
}

.grilleItem.Elem_Span .Banner_Vertical {
    opacity: 1;
    pointer-events: auto;
}

.grilleItem.Elem_Span .Banner_Vertical:hover {
    width: 100%;
    opacity: 0.8;
}

.Banner_Vertical p {
    writing-mode: vertical-rl;
    text-orientation: mixed;

    text-align: center;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #000;
}
.Banner_Vertical.Banner_Span p {
    writing-mode: horizontal-tb;
    text-orientation: initial;

    white-space: normal;
    text-align: center;
}


.grilleItem.col-3 .Banner_Vertical {
    left: 0;
    right: auto;
}

.Banner_Vertical .Banner_MoreInfo {
    display: none; /* caché par défaut */
}

.Banner_Vertical.Banner_Span .Banner_MoreInfo {
    display: block; /* visible si la bannière a la classe Banner_Span */
}
