/* =========================================================
   HERO ANIMATION — Animation d'entrée des titres et fil d'Ariane
   ========================================================= */

/* =========================================================
   ANIMATION D'ENTRÉE (fondu + montée + scale)
   Easing : rapide au début, ralenti à la fin
   ========================================================= */

/* Conteneur principal — fondu + montée (sans scale) */
.hero-overlap-header {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform !important;
}

.hero-overlap-header.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Titre h2 — état initial */
.hero-overlap-header h2 {
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transform-origin: center center !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform !important;
}

/* Fil d'Ariane — état initial */
.hero-overlap-header .wp-block-breadcrumbs {
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transform-origin: center center !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform !important;
}

/* État visible — le titre apparaît */
.hero-overlap-header.is-visible h2 {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition-delay: 0.5s !important;
}

/* État visible — le fil d'Ariane apparaît */
.hero-overlap-header.is-visible .wp-block-breadcrumbs {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition-delay: 0.75s !important;
}

.hero-overlap-header .wp-block-breadcrumbs a {
    text-shadow: 2px 2px 4px #000;
}
/* =========================================================
   FIL D'ARIANE — Suppression du soulignement
   ========================================================= */

.hero-overlap-header .wp-block-breadcrumbs a,
.hero-overlap-header .wp-block-breadcrumbs a:hover,
.hero-overlap-header .wp-block-breadcrumbs a:focus,
.hero-overlap-header .wp-block-breadcrumbs a:visited {
    text-decoration: none !important;
}

/* =========================================================
   FIL D'ARIANE — Masquer le séparateur natif de Kadence
   ========================================================= */

.hero-overlap-header .wp-block-breadcrumbs .separator,
.hero-overlap-header .wp-block-breadcrumbs .wp-block-breadcrumbs__separator {
    display: none !important;
}

.hero-overlap-header .wp-block-breadcrumbs li::before,
.hero-overlap-header .wp-block-breadcrumbs li::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   FIL D'ARIANE — Chevron entre les éléments
   ========================================================= */

.hero-overlap-header .wp-block-breadcrumbs li + li::before {
    content: "" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 14px !important;
    height: 14px !important;

    margin: 0 6px !important;

    background-color: currentColor !important;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;

    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;

    vertical-align: middle !important;
}