.block-inline-blockbloc-hero {
    color: var(--color_1);
}

.touline-hero-picto ul {
    margin:  0;
    height: 100%;
    padding-left: 0;
}
.touline-hero-picto li {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.touline-hero-picto li a {
    color: var(--color_1);
    background: var(--color_10);
    width: 100%;
    height: 100%;
    padding: 1rem;
}
.touline-hero-picto li a:hover {
    color: var(--color_2);
    background: var(--color_4);
    transform: scale(1.08);
}
.touline-hero-picto li a svg {
    fill: var(--color_1);
    width: 50px;
    height: 50px;
}
.touline-hero-picto li a:hover svg {
    fill: var(--color_2);
}
.touline-hero-picto__label {
    line-height: 1.2;
    color: var(--color_1);
}
.touline-hero-picto li a:hover .touline-hero-picto__label {
    color: var(--color_2);
}


/* --- Styles des Liens --- */
.touline-hero-picto__btn {
    transition: all 0.3s ease;
}

/* État actif ou survolé du lien */
.touline-hero-picto__btn:hover,
.touline-hero-picto__btn.active {
    background-color: rgba(0,0,0,0.03); /* Optionnel : léger fond */
    border-radius: 8px;
}


/* --- Styles des Images --- */
/* --- Images container --- */
.touline-hero-images {
    min-height: 480px; /* Important pour que l'image par défaut ait de la place */
    position: relative; /* Pour que les absolute fonctionnent */
}

/* --- Image par défaut --- */
.touline-hero-picto__default-image {
    z-index: 1; /* Tout en bas */
    transition: opacity 0.4s ease;
}

/* --- Images spécifiques (Wrapper) --- */
.touline-hero-image-wrapper {
    position: absolute; /* Elles se superposent toutes */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 10; /* Au-dessus de l'image par défaut */
    opacity: 0;  /* Invisibles par défaut */
    pointer-events: none; /* Pour ne pas bloquer les clics si besoin */
    transition: opacity 0.4s ease-in-out;
}

/* L'image (contenu) doit remplir le wrapper */
.touline-hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ÉTAT ACTIF : On affiche l'image spécifique */
.touline-hero-image-wrapper.active {
    opacity: 1;
}
/* Pour forcer le style sur l'image générée par Drupal */
.touline-hero-picto__default-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem; /* Adapte selon ton design (rounded-4) */
}