/* --- CONFIGURATION DE BASE --- */
.Banner_Vertical 
{
    background-color: var(--bg); /* Utilise la couleur du JSON */
    color: var(--text);          /* Utilise la couleur du JSON */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    position: absolute;
    bottom: 9px;
    right: 9px; 
    left: auto;             
    
    pointer-events: auto;
    /* AJOUT DE LA TRANSITION */
    transition: width 0.4s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* --- ÉTAT 1 : PAR DÉFAUT --- */
.Banner_Vertical {
    width: 10px;
    height: 10px;
    top: auto; /* Annule le top pour que la hauteur soit de 10px */
    opacity: 0.5;
    flex-direction: row;
}
.Banner_Vertical .Title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: none; /* Caché par défaut */
}

.Banner_Vertical .Banner_MoreInfo {
    writing-mode: horizontal-tb;
    display: none; /* Caché par défaut */
}

/* --- ÉTAT 2 : .Elem_Span --- */
.Elem_Span .Banner_Vertical {
    width: 10%;
    height: auto; /* Laisse le top/bottom dicter la hauteur */
    top: 9px;     /* S'étire vers le haut */
    opacity: 0.5;
}

.Elem_Span .Banner_Vertical .Title {
    display: block; /* Devient visible */
}

/* --- ÉTAT 3 : .Elem_Span + :hover --- */
.Elem_Span .Banner_Vertical:hover {
    width: calc(100% - 18px); /* Prend toute la largeur moins les marges */
    opacity: 0.8;
    flex-direction: column; /* Empilement vertical */
}

.Elem_Span .Banner_Vertical:hover .Banner_MoreInfo {
    display: block; /* Devient visible */
}
.Elem_Span .Banner_Vertical:hover .Title {
    transform: rotate(0deg);
    writing-mode: horizontal-tb;
}