.upink-process-timeline {
    --upink-process-bg-start: #080808;
    --upink-process-bg-end: #8a8a8a;
    --upink-process-number-color: #fff;
    --upink-process-title-color: #fff;
    --upink-process-description-color: #fff;
    --upink-process-chevron-color: var(--upink-process-title-color);
    --upink-process-inline-description-bg: transparent;
    --upink-process-padding-top: 14px;
    --upink-process-padding-right: 32px;
    --upink-process-padding-bottom: 14px;
    --upink-process-padding-left: 32px;
    --upink-process-min-height: 104px;
    --upink-process-arrow: 28px;
    --upink-process-source-x: 0px;
    --upink-process-source-width: 25%;
    --upink-process-active-bg: #080808;
    --upink-process-description-bg: var(--upink-process-active-bg);
    --upink-process-active-padding-top: var(--upink-process-padding-top);
    --upink-process-active-padding-right: var(--upink-process-padding-right);
    --upink-process-active-padding-bottom: var(--upink-process-padding-bottom);
    --upink-process-active-padding-left: var(--upink-process-padding-left);

    position: relative;
    width: 100%;
    min-width: 0;
    isolation: isolate;
}

.upink-process-timeline,
.upink-process-timeline *,
.upink-process-timeline *::before,
.upink-process-timeline *::after {
    box-sizing: border-box;
}

.upink-process-timeline__track {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: var(--upink-process-min-height);
    overflow: hidden;
}

/*
 * Les déclarations !important sont volontaires ici.
 * Elementor et certains thèmes appliquent des styles globaux sur button:hover
 * (souvent la couleur d'accent du site). Le widget doit conserver ses couleurs.
 */
.upink-process-timeline .upink-process-timeline__item,
.upink-process-timeline .upink-process-timeline__item:hover,
.upink-process-timeline .upink-process-timeline__item:focus,
.upink-process-timeline .upink-process-timeline__item:focus-visible,
.upink-process-timeline .upink-process-timeline__item:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--upink-process-min-height);
    margin: 0 0 0 calc(-1 * var(--upink-process-arrow));
    padding: var(--upink-process-padding-top) var(--upink-process-padding-right) var(--upink-process-padding-bottom) calc(var(--upink-process-padding-left) + var(--upink-process-arrow));
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    cursor: pointer;
    color: var(--upink-process-title-color) !important;
    text-align: center;
    text-decoration: none !important;
    background: var(
        --upink-process-item-bg,
        color-mix(
            in srgb,
            var(--upink-process-bg-start) var(--upink-process-start-weight),
            var(--upink-process-bg-end) var(--upink-process-end-weight)
        )
    ) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none;
    clip-path: polygon(
        0 0,
        calc(100% - var(--upink-process-arrow)) 0,
        100% 50%,
        calc(100% - var(--upink-process-arrow)) 100%,
        0 100%,
        var(--upink-process-arrow) 50%
    );
}

.upink-process-timeline .upink-process-timeline__item:first-child,
.upink-process-timeline .upink-process-timeline__item:first-child:hover,
.upink-process-timeline .upink-process-timeline__item:first-child:focus,
.upink-process-timeline .upink-process-timeline__item:first-child:active {
    margin-left: 0;
    padding-left: var(--upink-process-padding-left);
    clip-path: polygon(
        0 0,
        calc(100% - var(--upink-process-arrow)) 0,
        100% 50%,
        calc(100% - var(--upink-process-arrow)) 100%,
        0 100%
    );
}

.upink-process-timeline .upink-process-timeline__item:last-child {
    padding-right: calc(var(--upink-process-padding-right) + var(--upink-process-arrow));
}

.upink-process-timeline .upink-process-timeline__item:focus-visible {
    z-index: 2;
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / 70%) !important;
}

.upink-process-timeline__number,
.upink-process-timeline__title,
.upink-process-timeline__overlay-number,
.upink-process-timeline__overlay-title {
    display: block;
    position: relative;
    z-index: 1;
}

.upink-process-timeline__number,
.upink-process-timeline__overlay-number {
    color: var(--upink-process-number-color) !important;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.upink-process-timeline__title,
.upink-process-timeline__overlay-title {
    margin-top: 6px;
    color: var(--upink-process-title-color) !important;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

/*
 * Animation "languettes" :
 * 1. la tête de l'étape active commence son retour vers le bord gauche ;
 * 2. la languette de description commence presque aussitôt à se déployer
 *    de gauche à droite sous la pointe de la tête.
 *
 * Entrée et sortie utilisent uniquement des transitions CSS réversibles :
 * si le survol s'arrête en cours d'animation, le mouvement repart immédiatement
 * dans l'autre sens depuis sa position réelle, sans attendre un timeout visuel.
 */
.upink-process-timeline__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--upink-process-min-height);
    height: 100%;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    color: var(--upink-process-title-color) !important;
    background: transparent !important;
    transition:
        opacity 90ms ease,
        visibility 0s linear 90ms;
}

.upink-process-timeline.is-active .upink-process-timeline__overlay {
    visibility: visible;
    opacity: 1;
    transition:
        opacity 90ms ease,
        visibility 0s linear 0s;
}

/*
 * La source reste en place dans le flex pour ne pas provoquer de reflow,
 * mais son texte est masqué pendant que sa copie animée se déplace.
 */
.upink-process-timeline__item.is-source-active .upink-process-timeline__number,
.upink-process-timeline__item.is-source-active .upink-process-timeline__title {
    visibility: hidden;
}

.upink-process-timeline__overlay-head {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--upink-process-source-width);
    min-width: 0;
    min-height: var(--upink-process-min-height);
    height: 100%;
    padding: var(--upink-process-active-padding-top) var(--upink-process-active-padding-right) var(--upink-process-active-padding-bottom) var(--upink-process-active-padding-left);
    text-align: center;
    background: transparent !important;
    transform: translateX(var(--upink-process-source-x));
    will-change: transform;
    transition: transform var(--upink-process-head-duration, 430ms) cubic-bezier(.2, .75, .25, 1);
}

/*
 * La tête reproduit exactement la géométrie d'un item de la frise.
 *
 * Important : les items 2+ possèdent une encoche à gauche afin de laisser
 * apparaître le chevron de l'item précédent. L'ancienne tête animée avait un
 * bord gauche rectangulaire : une fois revenue à sa place, elle recouvrait donc
 * ce chevron jusqu'à la disparition différée de l'overlay.
 *
 * ::before dessine la vraie languette (encoche gauche + pointe droite).
 * ::after sert uniquement de "capuchon" temporaire pendant l'ouverture afin
 * que la tête soit plate lorsqu'elle est rabattue tout à gauche. Dès la sortie
 * du hover, ce capuchon disparaît immédiatement : l'encoche existe pendant tout
 * le trajet retour et le chevron précédent n'est jamais masqué à l'arrivée.
 */
.upink-process-timeline__overlay-head::before,
.upink-process-timeline__overlay-head::after {
    content: "";
    position: absolute;
    z-index: 0;
    display: block;
    background: var(--upink-process-active-bg) !important;
}

.upink-process-timeline__overlay-head::before {
    inset: 0;
    clip-path: polygon(
        0 0,
        calc(100% - var(--upink-process-arrow)) 0,
        100% 50%,
        calc(100% - var(--upink-process-arrow)) 100%,
        0 100%,
        var(--upink-process-head-left-notch, 0px) 50%
    );
}

.upink-process-timeline__overlay-head::after {
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--upink-process-head-left-notch, 0px);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0;
    transition: opacity 0s linear;
}

/*
 * En position active à gauche, l'encoche est bouchée pour conserver un bord
 * gauche propre. À la sortie du hover, la classe est retirée immédiatement :
 * le capuchon disparaît sans délai pendant que la tête repart vers sa place.
 */
.upink-process-timeline.is-head-revealed .upink-process-timeline__overlay-head::after {
    opacity: 1;
}

.upink-process-timeline__overlay-description {
    position: absolute;
    top: 0;
    right: 0;
    left: calc(var(--upink-process-source-width) - var(--upink-process-arrow));
    z-index: 1;
    display: flex;
    align-items: center;
    width: auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: var(--upink-process-padding-top) var(--upink-process-padding-right) var(--upink-process-padding-bottom) calc(var(--upink-process-padding-left) + var(--upink-process-arrow));
    overflow: hidden;
    color: var(--upink-process-description-color) !important;
    background: var(--upink-process-description-bg, var(--upink-process-active-bg)) !important;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;

    /*
     * État fermé : toute la languette est rabattue sur son origine.
     * Le texte n'est donc pas compressé comme avec scaleX(), il est simplement
     * masqué puis révélé progressivement.
     */
    clip-path: polygon(
        0 0,
        0 0,
        0 50%,
        0 100%,
        0 100%
    );
    opacity: 0;
    will-change: clip-path;
    transition:
        clip-path var(--upink-process-description-duration, 460ms) cubic-bezier(.2, .75, .25, 1),
        opacity 40ms linear;
}

.upink-process-timeline.is-head-revealed .upink-process-timeline__overlay-head {
    transform: translateX(0);
}

.upink-process-timeline.is-description-revealed .upink-process-timeline__overlay-description {
    opacity: 1;
    clip-path: polygon(
        0 0,
        calc(100% - var(--upink-process-arrow)) 0,
        100% 50%,
        calc(100% - var(--upink-process-arrow)) 100%,
        0 100%
    );
}

/* Le conteneur de tête n'affecte pas la géométrie desktop. */
.upink-process-timeline__header { display: contents; }

/* Description intégrée aux cartes, utilisée uniquement sur écrans étroits. */
.upink-process-timeline__inline-description { display: none; }

@media (max-width: 1024px) {
    .upink-process-timeline {
        --upink-process-columns: 2;
        --upink-process-gap: 12px;
        --upink-process-radius: 8px;
    }

    .upink-process-timeline__track {
        display: grid;
        grid-template-columns: repeat(var(--upink-process-columns), minmax(0, 1fr));
        gap: var(--upink-process-gap);
        min-height: 0;
        overflow: visible;
    }

    .upink-process-timeline .upink-process-timeline__item,
    .upink-process-timeline .upink-process-timeline__item:first-child,
    .upink-process-timeline .upink-process-timeline__item:last-child,
    .upink-process-timeline .upink-process-timeline__item:hover,
    .upink-process-timeline .upink-process-timeline__item:focus,
    .upink-process-timeline .upink-process-timeline__item:active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        min-width: 0;
        min-height: var(--upink-process-min-height);
        height: auto;
        margin: 0;
        padding: var(--upink-process-padding-top) var(--upink-process-padding-right) var(--upink-process-padding-bottom) var(--upink-process-padding-left);
        border-radius: var(--upink-process-radius) !important;
        clip-path: none;
        text-align: left;
        overflow-wrap: anywhere;
        overflow: visible;
    }

    .upink-process-timeline .upink-process-timeline__item::after {
        content: none;
    }

    .upink-process-timeline .upink-process-timeline__header {
        position: relative;
        display: flex;
        flex-direction: var(--upink-process-header-direction, row);
        align-items: center;
        column-gap: var(--upink-process-heading-gap, 12px);
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        padding-right: 26px;
    }

    .upink-process-timeline .upink-process-timeline__header .upink-process-timeline__number {
        flex: 0 0 auto;
        margin: 0;
    }

    .upink-process-timeline .upink-process-timeline__header .upink-process-timeline__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .upink-process-timeline .upink-process-timeline__header::after {
        content: '';
        position: absolute;
        top: 50%;
        right: max(8px, calc(var(--upink-process-arrow) / 2));
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--upink-process-chevron-color);
        border-bottom: 2px solid var(--upink-process-chevron-color);
        transform: translateY(-50%) rotate(45deg);
        transition: transform 180ms ease;
        pointer-events: none;
    }

    .upink-process-timeline .upink-process-timeline__item.is-mobile-open .upink-process-timeline__header::after {
        transform: translateY(-25%) rotate(225deg);
    }

    /* Le titre reste aligné avec le numéro et passe sur plusieurs lignes si nécessaire. */
    /*
     * La bande de description déborde volontairement du padding de la carte.
     * La hauteur est calculée par le contenu (pas de max-height arbitraire).
     */
    .upink-process-timeline .upink-process-timeline__item .upink-process-timeline__inline-description {
        display: grid;
        grid-template-rows: minmax(0, 0fr);
        align-self: stretch;
        width: auto;
        min-width: 0;
        margin: 0 calc(-1 * var(--upink-process-padding-right)) 0 calc(-1 * var(--upink-process-padding-left));
        padding: 0;
        overflow: hidden;
        opacity: 0;
        color: var(--upink-process-description-color) !important;
        -webkit-text-fill-color: var(--upink-process-description-color);
        background: var(--upink-process-inline-description-bg) !important;
        /* Typographie pilotée par Elementor, y compris aux breakpoints. */
        text-align: left;
        overflow-wrap: anywhere;
        transition: grid-template-rows 260ms ease, margin 260ms ease, opacity 180ms ease;
    }

    .upink-process-timeline__inline-description-inner {
        display: block;
        min-height: 0;
        overflow: hidden;
        padding: 0 var(--upink-process-padding-right) 0 var(--upink-process-padding-left);
        color: inherit !important;
        -webkit-text-fill-color: inherit;
        transition: padding 260ms ease;
    }

    .upink-process-timeline .upink-process-timeline__item.is-mobile-open .upink-process-timeline__inline-description {
        grid-template-rows: minmax(0, 1fr);
        margin-top: 14px;
        margin-bottom: calc(-1 * var(--upink-process-padding-bottom));
        opacity: 1;
    }

    .upink-process-timeline .upink-process-timeline__item.is-mobile-open .upink-process-timeline__inline-description-inner {
        padding-top: 12px;
        padding-bottom: 14px;
    }

    .upink-process-timeline__overlay,
    .upink-process-timeline.is-active .upink-process-timeline__overlay { display: none !important; }

    .upink-process-timeline__item.is-source-active .upink-process-timeline__number,
    .upink-process-timeline__item.is-source-active .upink-process-timeline__title { visibility: visible; }
}

@media (max-width: 767px) {
    .upink-process-timeline {
        --upink-process-columns: 1;
        --upink-process-gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .upink-process-timeline__overlay,
    .upink-process-timeline__overlay-head,
    .upink-process-timeline__overlay-description {
        transition: none !important;
    }
}

/* Cartes responsive : neutralisation des contraintes héritées du bouton desktop
 * et des styles de boutons Elementor / thème. */
@media (max-width: 1024px) {
    .upink-process-timeline .upink-process-timeline__track > .upink-process-timeline__item,
    .upink-process-timeline .upink-process-timeline__track > .upink-process-timeline__item:first-child,
    .upink-process-timeline .upink-process-timeline__track > .upink-process-timeline__item:last-child {
        clip-path: none !important;
        -webkit-clip-path: none !important;
        white-space: normal !important;
        overflow: visible !important;
        min-width: 0 !important;
        max-width: 100%;
    }

    .upink-process-timeline .upink-process-timeline__inline-description {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .upink-process-timeline .upink-process-timeline__inline-description-inner {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
        text-overflow: clip;
        text-wrap: wrap;
    }
}

/* Option Elementor : empilement classique, indépendamment par breakpoint. */
@media (max-width: 1024px) {
    .upink-process-timeline .upink-process-timeline__header[style] { max-width: 100%; }
    .upink-process-timeline[style*="--upink-process-header-direction: column"] .upink-process-timeline__header {
        align-items: flex-start;
    }
}