/* Winsiders Custom Elements — auto-split from monolithic assets/frontend.css.
 * This file is generated by the asset-split script. Do not edit manually;
 * edit assets/frontend.css then re-run scripts/split-assets.py. */

/* --- Timeline Winsiders --- */

/* --- Base variables (overridable via inline styles from PHP) --- */
.wce-timeline {
    --wce-timeline-count: 1;
    --wce-timeline-seen-count: 0;
    --wce-timeline-total-count: 1;
    --wce-timeline-line-progress: 0;
    --wce-timeline-line-clip: 100%;
    --wce-timeline-visual-height: 300px;
    --wce-timeline-dot-size: 48px;
    --wce-timeline-line-size: 8px;
    --wce-timeline-line-color: #efe9a8;
    --wce-timeline-line-style: solid;
    --wce-timeline-dot-color: #000;
    --wce-timeline-vertical-marker-column: 76px;
    --wce-timeline-vertical-gap: clamp(16px, 2vw, 36px);
    --wce-timeline-horizontal-item-min: clamp(240px, 24vw, 340px);
    --wce-timeline-item-delay: 0ms;
    --wce-timeline-step-bg-color: var(--enfold-main-color-bg, #fff);
}

/* --- Common: heading, items, item structure --- */

.wce-timeline__heading {
    margin: 0 0 clamp(20px, 3vw, 40px);
}

.wce-timeline__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wce-timeline__item {
    position: relative;
    min-width: 0;
}

.wce-timeline__visual {
    min-width: 0;
}

.wce-timeline__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* --- Common: marker (dot / number / icon) --- */
/* Three marker types share the same circular background (dot-color).
   The inner <span> changes: plain (dot), number/letter (number), icon (icon). */

.wce-timeline__marker {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dot marker (.wce-timeline--marker-dot): plain filled circle. */
.wce-timeline__marker > span:not(.wce-timeline__icon):not(.wce-timeline__number) {
    position: relative;
    z-index: 6;
    display: block;
    width: var(--wce-timeline-dot-size);
    height: var(--wce-timeline-dot-size);
    border-radius: 50%;
    background: var(--wce-timeline-dot-color);
}

/* Number marker (.wce-timeline--marker-number): dot with centered number/letter.
   The span.wce-timeline__number is the dot itself, with text inside.
   Color: var(--enfold-main-color-constant-font, #fff) for contrast.
   Font-size: ~50% of dot-size (arabic/alpha), slightly smaller for roman. */
.wce-timeline__number {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wce-timeline-dot-size);
    height: var(--wce-timeline-dot-size);
    border-radius: 50%;
    background: var(--wce-timeline-dot-color);
    color: var(--enfold-main-color-constant-font, #fff);
    font-weight: 700;
    font-size: calc(var(--wce-timeline-dot-size) * 0.5);
    line-height: 1;
    text-align: center;
}

/* Roman numerals are wider — slightly smaller font to fit. */
.wce-timeline--numbers-roman .wce-timeline__number {
    font-size: calc(var(--wce-timeline-dot-size) * 0.36);
}

/* Icon marker (.wce-timeline--marker-icon): dot background with centered icon.
   Color is set inline per-step (style="color:..."); fallback to constant-font. */
.wce-timeline__icon {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wce-timeline-dot-size);
    height: var(--wce-timeline-dot-size);
    border-radius: 50%;
    background: var(--wce-timeline-dot-color);
    color: var(--enfold-main-color-constant-font, #fff);
    line-height: 0;
}

.wce-timeline__icon .av-icon-char {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.wce-timeline__icon .av-icon-char:before {
    color: inherit;
    font-size: calc(var(--wce-timeline-dot-size) * 0.5);
    line-height: 1;
}

.wce-timeline__icon .av-icon-char svg {
    display: block;
    width: calc(var(--wce-timeline-dot-size) * 0.5);
    height: calc(var(--wce-timeline-dot-size) * 0.5);
    fill: currentColor;
}

/* --- Common: body content --- */

.wce-timeline__body {
    min-width: 0;
}

.wce-timeline__label {
    margin: 0 0 12px;
}

.wce-timeline__step-title {
    margin: 0 0 16px;
}

.wce-timeline__subtitle {
    margin: 0 0 16px;
}

.wce-timeline__content > :first-child {
    margin-top: 0;
}

.wce-timeline__content > :last-child {
    margin-bottom: 0;
}

/* --- Step background & shadow (v0.4.2 — BESOIN 3) --- */
/* Applied to .wce-timeline__body so the visual and marker stay outside the background.
   The padding shorthand overrides per-variant padding-top/padding-bottom. */
.wce-timeline--step-bg .wce-timeline__body {
    background: var(--wce-timeline-step-bg-color, var(--enfold-main-color-bg, #fff));
    border-radius: var(--wce-timeline-step-radius, 12px);
    padding: var(--wce-timeline-step-padding, 15px);
    /* Wrap the card around its content for uniform padding appearance. */
    width: fit-content;
    max-width: 100%;
}

/* Per-step background class (added by PHP when step_bg is active for this item).
   Uniform padding on all edges — v0.4.3 fix. */
.wce-timeline__body--has-bg {
    padding: var(--wce-timeline-step-padding, 15px);
    /* Wrap the card around its content so padding looks uniform on all sides
       (avoids a wide card with text only on the left). */
    width: fit-content;
    max-width: 100%;
}

.wce-timeline--step-bg.wce-timeline--step-shadow .wce-timeline__body {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}


/* =====================================================================
 * VERTICAL VARIANTS — line is vertical, items stack top-to-bottom
 * Variants: vv-left, vv-right, vv-alternate-left, vv-alternate-right
 * Line is drawn via border-left on ::before (supports solid|dashed|dotted).
 *
 * ALIGNMENT (v0.4.2): the ::before uses var(--wce-timeline-line-left) with a
 * calc fallback so the line passes through the horizontal center of the dots
 * even before JS runs. JS sets --wce-timeline-line-left at runtime and wins.
 * ===================================================================== */

/* --- Vertical base (default = vv-left) --- */

.wce-timeline--vertical .wce-timeline__scroll {
    /* Fix: garde la largeur du parent en mode vertical. Sans width explicite,
       le conteneur flex column peut se rétracter et les items grid perdent
       leurs colonnes (grid-template-columns 1fr|marker|1fr → 0px). */
    width: 100%;
}

.wce-timeline--vertical .wce-timeline__items {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    --wce-timeline-line-left: 50%;
    --wce-timeline-line-start: calc(var(--wce-timeline-dot-size) / 2);
    --wce-timeline-line-end: calc(var(--wce-timeline-dot-size) / 2);
}

/* Vertical line via ::before on items container.
   JS sets --wce-timeline-line-start (top), --wce-timeline-line-end (bottom),
   --wce-timeline-line-left (horizontal position).
   Uses border-left so --wce-timeline-line-style (solid|dashed|dotted) applies.
   The var(--wce-timeline-line-left, <fallback>) ensures the line aligns with
   the dot center even before JS measures the actual position. */
.wce-timeline--vertical .wce-timeline__items::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: var(--wce-timeline-line-start);
    bottom: var(--wce-timeline-line-end);
    left: calc(
        var(--wce-timeline-line-left,
            50%
        ) - (var(--wce-timeline-line-size) / 2)
    );
    width: 0;
    height: auto;
    border-left: var(--wce-timeline-line-size) var(--wce-timeline-line-style, solid) var(--wce-timeline-line-color);
    border-radius: calc(var(--wce-timeline-line-size) / 2);
    background: none;
}

.wce-timeline--vertical .wce-timeline__item:not(:last-child)::after {
    content: none;
}

/* Default item grid: left content | centered marker | right content (vv-left) */
.wce-timeline--vertical .wce-timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    column-gap: var(--wce-timeline-vertical-gap);
    align-items: start;
    padding-bottom: clamp(64px, 8vw, 128px);
}

.wce-timeline--vertical .wce-timeline__item:last-child {
    padding-bottom: 0;
}

.wce-timeline--vertical .wce-timeline__visual {
    display: flex;
    justify-content: center;
    grid-column: 1;
}

.wce-timeline--vertical .wce-timeline__image {
    max-width: min(100%, 360px);
    max-height: 300px;
}

/* v0.5.8: image alternate — pleine largeur de la colonne, ratio 4:3, object-fit contain.
   En mode alterné, l'image occupe toute la largeur du visual (au lieu du max 360px)
   avec un ratio borné 4:3 et object-fit contain pour préserver les proportions. */
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__image,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__image {
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
    width: 100% !important;
    height: auto !important;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__visual,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__visual {
    max-width: 100% !important;
    width: 100% !important;
}

.wce-timeline--vertical .wce-timeline__marker {
    grid-column: 2;
}

.wce-timeline--vertical .wce-timeline__body {
    padding-top: 6px;
    grid-column: 3;
    justify-self: stretch;
    width: 100%;
}

/* --- vv-right: contenu à gauche, visuel à droite, marqueur centré --- */

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__items {
    --wce-timeline-line-left: 50%;
}

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__item {
    grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
}

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__body {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
}

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__visual {
    grid-column: 3;
}

/* --- vv-alternate-left & vv-alternate-right: étapes alternées --- */
/* Line + markers at 50% (center). Grid: 1fr | marker | 1fr, rows: auto auto. */
/* Marker spans both rows in the center column.
   --wce-timeline-line-left defaults to 50% here; JS may refine. */

/* Alternate vertical: the JS measures the real marker centre and refines
   --wce-timeline-line-left after the centered fallback renders. */

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item {
    grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
    grid-template-rows: auto 70px auto;
    column-gap: var(--wce-timeline-vertical-gap);
}

/* Alternate body: fills its column (wider steps).
   The visual keeps its natural size (no width:100%). */
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__body {
    width: 100%;
    grid-row: 3 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* v0.5.4: marker entre image et texte — la visual occupe la row 1, le marker
   la row 2 (60px, centrée), le body la row 3. Un margin-bottom sur la visual
   équilibre le gap de part et d'autre du point. */
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__visual,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__visual {
    grid-row: 1 !important;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__visual:has(img),
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__visual:has(img) {
    margin-bottom: 20px;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__visual,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__visual {
    max-width: calc(50% - var(--wce-timeline-vertical-marker-column) / 2 - 20px);
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual {
    justify-self: end;
    padding-right: 0;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual {
    justify-self: start;
    padding-left: 0;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__marker,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__marker {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    padding-top: 0;
}

/* vv-alternate-left: odd → left, even → right */
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual {
    grid-column: 1;
    grid-row: 1;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body:not(.wce-timeline__body--has-bg) {
    grid-column: 1;
    grid-row: 2;
    padding-top: 16px;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body--has-bg {
    grid-column: 1;
    grid-row: 2;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual {
    grid-column: 3;
    grid-row: 1;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body:not(.wce-timeline__body--has-bg) {
    grid-column: 3;
    grid-row: 2;
    padding-top: 16px;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body--has-bg {
    grid-column: 3;
    grid-row: 2;
}

/* --- vv-alternate-right: odd → right, even → left --- */

.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual {
    grid-column: 3;
    grid-row: 1;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body:not(.wce-timeline__body--has-bg) {
    grid-column: 3;
    grid-row: 2;
    padding-top: 16px;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body--has-bg {
    grid-column: 3;
    grid-row: 2;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual {
    grid-column: 1;
    grid-row: 1;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body:not(.wce-timeline__body--has-bg) {
    grid-column: 1;
    grid-row: 2;
    padding-top: 16px;
}
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body--has-bg {
    grid-column: 1;
    grid-row: 2;
}

/* When a step has no illustration image, the empty .wce-timeline__visual
   still occupies grid-row 1 and pushes the body down to grid-row 2 —
   leaving a gap between the marker and the body. :has() lets us collapse
   the visual row and move the body up to grid-row 1 (aligned with the
   marker) when there is no <img> inside the visual. */
.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item:has(.wce-timeline__visual:not(:has(img))),
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item:has(.wce-timeline__visual:not(:has(img))) {
    grid-template-rows: auto;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item:has(.wce-timeline__visual:not(:has(img))) .wce-timeline__body,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item:has(.wce-timeline__visual:not(:has(img))) .wce-timeline__body {
    grid-row: 1;
}

/* Also fix vv-left / vv-right single-column layouts: when the visual is
   empty the visual column still reserves space. Hide the empty visual so
   the body/marker align without a phantom column. */
.wce-timeline--vertical .wce-timeline__visual:not(:has(img)):not(:has(svg)):not(:has(picture)) {
    display: none;
}


/* =====================================================================
 * HORIZONTAL VARIANTS — line is horizontal, items are columns
 * Variants: vh-top, vh-bottom, vh-alternate-top, vh-alternate-bottom
 * Line is drawn via border-top on ::before (supports solid|dashed|dotted).
 *
 * ALIGNMENT (v0.4.2): the ::before uses var(--wce-timeline-line-top, <fallback>)
 * so JS (which measures the real marker center Y) always wins. The calc
 * fallback renders correctly before JS runs. For alternate variants the
 * fallback is 50% (markers are at 50% of item height).
 * ===================================================================== */

/* --- Horizontal base (default = vh-top, shared by --horizontal and --auto) --- */

.wce-timeline--horizontal .wce-timeline__items,
.wce-timeline--auto .wce-timeline__items {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--wce-timeline-count), minmax(0, 1fr));
}

/* --- Desktop horizontal: GSAP ScrollTrigger pinned section (>=990px).
   La piste .wce-timeline__items est déplacée horizontalement par un transform
   piloté au scroll de la page (voir frontend.js). Le viewport .wce-timeline__scroll
   clip le débordement. Le titre <h2> reste au-dessus et n'est jamais déplacé.

   Robustesse B2 : par défaut la piste reste scrollable nativement (overflow-x: auto).
   Le JS pose la classe .wce-timeline--gsap sur la timeline dès qu'un ScrollTrigger
   est effectivement créé, ce qui active le overflow: hidden du pin. Ainsi, si GSAP
   ne charge pas (404, ad blocker, conflit) ou si reduced-motion, on retombe
   gracieusement sur un scroll horizontal natif sans contenu invisible. --- */
@media only screen and (min-width: 990px) {
    .wce-timeline--horizontal .wce-timeline__scroll,
    .wce-timeline--auto .wce-timeline__scroll {
        /* Fix: garde la largeur du parent meme quand GSAP ScrollTrigger pin
           passe le conteneur en position:fixed. Sans width explicite, la largeur
           se retracte a 0px quand la piste items (max-content) deborde largement
           (ex: 16 items x 1277px = 20633px), masquant toute la timeline. */
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Pin actif (GSAP a initialisé la timeline) : on clippe et on délègue
       le déplacement au transform piloté au scroll. */
    .wce-timeline--horizontal.wce-timeline--gsap .wce-timeline__scroll,
    .wce-timeline--auto.wce-timeline--gsap .wce-timeline__scroll {
        overflow: hidden;
    }

    .wce-timeline--horizontal .wce-timeline__items,
    .wce-timeline--auto .wce-timeline__items {
        width: max-content;
        min-width: 100%;
        grid-template-columns: repeat(var(--wce-timeline-count), minmax(var(--wce-timeline-horizontal-item-min), 1fr));
        will-change: transform;
    }

    .wce-timeline--horizontal .wce-timeline__item,
    .wce-timeline--auto .wce-timeline__item {
        min-width: var(--wce-timeline-horizontal-item-min);
    }

    /* Center the step body under/over its marker in non-alternate horizontal
       layouts. Alternate layouts already center the body. */
    .wce-timeline--horizontal .wce-timeline__item > .wce-timeline__body,
    .wce-timeline--auto .wce-timeline__item > .wce-timeline__body {
        justify-self: center;
        text-align: center;
        max-width: 100%;
    }
}

/* --- Fallback: reduced-motion users get native horizontal scroll (no GSAP pin).
   ScrollTrigger ne s'active pas quand prefers-reduced-motion (voir frontend.js),
   on garde donc la piste scrollable avec une scrollbar visible et on neutralise
   le hint will-change. La classe .wce-timeline--gsap ne sera de toute façon pas posée
   en reduced-motion (le matchMedia JS exclut ce cas). --- */
@media only screen and (min-width: 990px) and (prefers-reduced-motion: reduce) {
    .wce-timeline--horizontal .wce-timeline__scroll,
    .wce-timeline--auto .wce-timeline__scroll {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .wce-timeline--horizontal .wce-timeline__items,
    .wce-timeline--auto .wce-timeline__items {
        will-change: auto;
    }
}

/* Horizontal line via ::before on items container.
   JS sets --wce-timeline-line-start (left), --wce-timeline-line-end (right),
   --wce-timeline-line-top (vertical position).
   --wce-timeline-line-top (from JS) takes priority over the calc fallback.
   Uses border-top so --wce-timeline-line-style (solid|dashed|dotted) applies. */
.wce-timeline--horizontal .wce-timeline__items::before,
.wce-timeline--auto .wce-timeline__items::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(
        var(--wce-timeline-line-top, calc(var(--wce-timeline-dot-size) / 2))
        - (var(--wce-timeline-line-size) / 2)
    );
    right: var(--wce-timeline-line-end, calc((100% / var(--wce-timeline-count)) / 2));
    left: var(--wce-timeline-line-start, calc((100% / var(--wce-timeline-count)) / 2));
    height: 0;
    width: auto;
    border-top: var(--wce-timeline-line-size) var(--wce-timeline-line-style, solid) var(--wce-timeline-line-color);
    border-radius: calc(var(--wce-timeline-line-size) / 2);
    background: none;
}

/* Default item grid: visual | marker | body (vh-top) */
.wce-timeline--horizontal .wce-timeline__item,
.wce-timeline--auto .wce-timeline__item {
    display: grid;
    grid-template-rows: var(--wce-timeline-marker-pre-height, auto) var(--wce-timeline-dot-size) auto;
    row-gap: 10px;
    padding: 0 clamp(12px, 1.8vw, 32px);
}

.wce-timeline--horizontal .wce-timeline__item > .wce-timeline__visual,
.wce-timeline--auto .wce-timeline__item > .wce-timeline__visual {
    grid-row: 1;
}

.wce-timeline--horizontal .wce-timeline__item > .wce-timeline__marker,
.wce-timeline--auto .wce-timeline__item > .wce-timeline__marker {
    grid-row: 2;
    align-self: center;
    justify-self: center;
}

.wce-timeline--horizontal .wce-timeline__item > .wce-timeline__body,
.wce-timeline--auto .wce-timeline__item > .wce-timeline__body {
    grid-row: 3;
}

.wce-timeline--horizontal .wce-timeline__image,
.wce-timeline--auto .wce-timeline__image {
    max-width: min(100%, 420px);
    max-height: calc(var(--wce-timeline-visual-height) - 32px);
}

.wce-timeline--horizontal .wce-timeline__visual,
.wce-timeline--auto .wce-timeline__visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Only add visual padding when an image is present (avoids empty space) */
.wce-timeline--horizontal .wce-timeline__visual:has(.wce-timeline__image),
.wce-timeline--auto .wce-timeline__visual:has(.wce-timeline__image) {
    padding-bottom: clamp(24px, 3vw, 48px);
}

.wce-timeline--horizontal .wce-timeline__body,
.wce-timeline--auto .wce-timeline__body {
    padding-top: 0;
}

/* --- vh-bottom: timeline en bas, étapes au-dessus --- */
/* Grid rows: body | marker | visual. Line positioned from bottom.
   --wce-timeline-line-top still wins (JS measures from top). */

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__items::before {
    /* JS measures the marker centre and sets --wce-timeline-line-top; use it
       so the line passes through the marker centre (same approach as vh-top). */
    top: calc(
        var(--wce-timeline-line-top, 50%)
        - (var(--wce-timeline-line-size) / 2)
    );
    bottom: auto;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__item,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item {
    grid-template-rows: var(--wce-timeline-marker-pre-height, auto) var(--wce-timeline-dot-size) auto;
    align-items: end;
}

/* v0.4.3: ensure markers are vertically centered in their row */
.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__marker,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__marker {
    align-self: center;
}

/* vh-bottom: body row 1, marker row 2, visual row 3 */
.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__visual {
    grid-row: 3;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__marker,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__marker {
    grid-row: 2;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__body {
    grid-row: 1;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__body {
    padding-top: 0;
    padding-bottom: 0;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__visual {
    align-items: flex-start;
    padding-bottom: 0;
}

.wce-timeline--horizontal.wce-timeline--vh-bottom .wce-timeline__visual:has(.wce-timeline__image),
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__visual:has(.wce-timeline__image) {
    padding-top: clamp(24px, 3vw, 48px);
}

/* --- vh-alternate-top & vh-alternate-bottom: étapes alternées --- */
/* Items use measured rows around a fixed marker row. JS sets the row heights
   so all markers share the same Y coordinate without a large fixed min-height. */

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__items::before,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__items::before {
    top: calc(
        var(--wce-timeline-line-top, 50%)
        - (var(--wce-timeline-line-size) / 2)
    );
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__item,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item {
    display: grid;
    grid-template-rows:
        var(--wce-timeline-alt-visual-before-height, auto)
        var(--wce-timeline-alt-body-before-height, auto)
        var(--wce-timeline-dot-size)
        var(--wce-timeline-alt-body-after-height, auto)
        var(--wce-timeline-alt-visual-after-height, auto);
    row-gap: 0;
    align-items: stretch;
    text-align: center;
}

/* v0.4.3: z-index — body above line (5), marker above body (6). Prevents the
   line from visually covering the step content in alternate layouts. */
.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__body,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__body {
    z-index: 5;
    margin: 0;
    max-width: 100%;
    justify-self: center;
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__marker,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__marker,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__marker,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__marker {
    z-index: 6;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    grid-row: 3;
    align-self: center;
    justify-self: center;
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__visual,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__visual {
    padding: 0;
    margin: 0;
    max-height: none;
    justify-self: center;
}

/* Alternate images: constrain height */
.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__image,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__image,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__image,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__image {
    max-height: var(--wce-timeline-visual-height);
}

/* --- vh-alternate-top: odd above, even below --- */

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__item--odd .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item--odd .wce-timeline__visual {
    grid-row: 1;
    align-self: end;
    margin-bottom: 10px;
    max-height: var(--wce-timeline-visual-height);
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__item--odd .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item--odd .wce-timeline__body {
    grid-row: 2;
    align-self: end;
    margin-bottom: 10px;
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__item--even .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item--even .wce-timeline__body {
    grid-row: 4;
    align-self: start;
    margin-top: 10px;
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-top .wce-timeline__item--even .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item--even .wce-timeline__visual {
    grid-row: 5;
    align-self: start;
    margin-top: 10px;
    max-height: var(--wce-timeline-visual-height);
}

/* --- vh-alternate-bottom: odd below, even above (inverted) --- */

.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item--odd .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item--odd .wce-timeline__body {
    grid-row: 4;
    align-self: start;
    margin-top: 10px;
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item--odd .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item--odd .wce-timeline__visual {
    grid-row: 5;
    align-self: start;
    margin-top: 10px;
    max-height: var(--wce-timeline-visual-height);
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item--even .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item--even .wce-timeline__visual {
    grid-row: 1;
    align-self: end;
    margin-bottom: 10px;
    max-height: var(--wce-timeline-visual-height);
}

.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item--even .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item--even .wce-timeline__body {
    grid-row: 2;
    align-self: end;
    margin-bottom: 10px;
}


/* =====================================================================
 * AUTO MODE — responsive switch from horizontal to vertical
 * Switch breakpoints: 989px, 767px, 640px
 * Above breakpoint: horizontal (vh-* variant).
 * Below breakpoint: vertical (vv-* variant).
 * ===================================================================== */

/* --- Switch at 989px --- */
@media only screen and (max-width: 989px) {

    /* Reset items container to vertical + centered marker line */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__items {
        position: relative;
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        --wce-timeline-line-left: 50%;
        --wce-timeline-line-start: calc(var(--wce-timeline-dot-size) / 2);
        --wce-timeline-line-end: calc(var(--wce-timeline-dot-size) / 2);
    }

    /* Override ::before to vertical line (border-left).
       Uses var(--wce-timeline-line-left, <fallback>) for alignment. */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__items::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: var(--wce-timeline-line-start);
        bottom: var(--wce-timeline-line-end);
        left: calc(
            var(--wce-timeline-line-left,
                50%
            ) - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: 0;
        height: auto;
        border-top: none;
        border-left: var(--wce-timeline-line-size) var(--wce-timeline-line-style, solid) var(--wce-timeline-line-color);
        border-radius: calc(var(--wce-timeline-line-size) / 2);
        background: none;
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item:not(:last-child)::after {
        content: none;
    }

    /* Reset item to vertical grid (default = vv-left) */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
        grid-template-rows: none;
        column-gap: var(--wce-timeline-vertical-gap);
        align-items: start;
        min-height: auto;
        text-align: left;
        padding: 0 0 clamp(64px, 8vw, 128px);
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item:last-child {
        padding-bottom: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__visual {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0;
        grid-column: 1;
        grid-row: auto;
        max-height: none;
        margin: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__image {
        max-width: min(100%, 360px);
        max-height: 300px;
    }

    /* Reset marker from alternate-horizontal absolute positioning */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__marker {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding-top: 0;
        grid-column: 2;
        grid-row: auto;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__body {
        padding-top: 6px;
        padding-bottom: 0;
        margin: 0;
        grid-column: 3;
        grid-row: auto;
        justify-self: stretch;
        width: 100%;
    }

    /* vv-right */
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__items {
        --wce-timeline-line-left: 50%;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__item {
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__body {
        grid-column: 1;
        justify-self: stretch;
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__visual {
        grid-column: 3;
    }

    /* vv-alternate-left & vv-alternate-right */
    /* Alternate vertical keeps the same centered marker column as single-side variants. */

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--wce-timeline-vertical-gap);
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__body {
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__visual {
        max-width: calc(50% - var(--wce-timeline-vertical-marker-column) / 2 - 20px);
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { justify-self: end; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { justify-self: start; }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding-top: 6px;
    }

    /* vv-alternate-left: odd → left, even → right */
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }

    /* vv-alternate-right: odd → right, even → left */
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }

    /* Animation: auto mode switches to vertical line draw.
       Unmasked reveal via clip-path (no scaleY) — no stretching, uniform for
       solid/dashed/dotted (incl. radial-gradient round dots). */
    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__items::before {
        opacity: min(1, var(--wce-timeline-seen-count, 0));
        transform: none;
        clip-path: inset(0 0 var(--wce-timeline-line-clip, 100%) 0);
        transition:
            clip-path 1.05s cubic-bezier(0.17, 0.84, 0.44, 1),
            opacity 0.25s ease;
    }

    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-989.wce-timeline--line-complete .wce-timeline__items::before {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* --- Switch at 767px --- */
@media only screen and (max-width: 767px) {

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__items {
        position: relative;
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        --wce-timeline-line-left: 50%;
        --wce-timeline-line-start: calc(var(--wce-timeline-dot-size) / 2);
        --wce-timeline-line-end: calc(var(--wce-timeline-dot-size) / 2);
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__items::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: var(--wce-timeline-line-start);
        bottom: var(--wce-timeline-line-end);
        left: calc(
            var(--wce-timeline-line-left,
                50%
            ) - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: 0;
        height: auto;
        border-top: none;
        border-left: var(--wce-timeline-line-size) var(--wce-timeline-line-style, solid) var(--wce-timeline-line-color);
        border-radius: calc(var(--wce-timeline-line-size) / 2);
        background: none;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__item:not(:last-child)::after {
        content: none;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
        grid-template-rows: none;
        column-gap: var(--wce-timeline-vertical-gap);
        align-items: start;
        min-height: auto;
        text-align: left;
        padding: 0 0 clamp(64px, 8vw, 128px);
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__item:last-child {
        padding-bottom: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__visual {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0;
        grid-column: 1;
        grid-row: auto;
        max-height: none;
        margin: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__image {
        max-width: min(100%, 360px);
        max-height: 300px;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__marker {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding-top: 0;
        grid-column: 2;
        grid-row: auto;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__body {
        padding-top: 6px;
        padding-bottom: 0;
        margin: 0;
        grid-column: 3;
        grid-row: auto;
        justify-self: stretch;
        width: 100%;
    }

    /* vv-right */
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__items {
        --wce-timeline-line-left: 50%;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__item {
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__body {
        grid-column: 1;
        justify-self: stretch;
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__visual {
        grid-column: 3;
    }

    /* vv-alternate-left & vv-alternate-right */
    /* Alternate vertical keeps the same centered marker column as single-side variants. */

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--wce-timeline-vertical-gap);
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__body {
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__visual {
        max-width: calc(50% - var(--wce-timeline-vertical-marker-column) / 2 - 20px);
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { justify-self: end; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { justify-self: start; }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding-top: 6px;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }

    /* Animation: auto mode switches to vertical line draw.
       Unmasked reveal via clip-path (no scaleY) — no stretching, uniform for
       solid/dashed/dotted (incl. radial-gradient round dots). */
    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__items::before {
        opacity: min(1, var(--wce-timeline-seen-count, 0));
        transform: none;
        clip-path: inset(0 0 var(--wce-timeline-line-clip, 100%) 0);
        transition:
            clip-path 1.05s cubic-bezier(0.17, 0.84, 0.44, 1),
            opacity 0.25s ease;
    }

    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-767.wce-timeline--line-complete .wce-timeline__items::before {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* --- Switch at 640px --- */
@media only screen and (max-width: 640px) {

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__items {
        position: relative;
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        --wce-timeline-line-left: 50%;
        --wce-timeline-line-start: calc(var(--wce-timeline-dot-size) / 2);
        --wce-timeline-line-end: calc(var(--wce-timeline-dot-size) / 2);
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__items::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: var(--wce-timeline-line-start);
        bottom: var(--wce-timeline-line-end);
        left: calc(
            var(--wce-timeline-line-left,
                50%
            ) - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: 0;
        height: auto;
        border-top: none;
        border-left: var(--wce-timeline-line-size) var(--wce-timeline-line-style, solid) var(--wce-timeline-line-color);
        border-radius: calc(var(--wce-timeline-line-size) / 2);
        background: none;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__item:not(:last-child)::after {
        content: none;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
        grid-template-rows: none;
        column-gap: var(--wce-timeline-vertical-gap);
        align-items: start;
        min-height: auto;
        text-align: left;
        padding: 0 0 clamp(64px, 8vw, 128px);
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__item:last-child {
        padding-bottom: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__visual {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 0;
        grid-column: 1;
        grid-row: auto;
        max-height: none;
        margin: 0;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__image {
        max-width: min(100%, 360px);
        max-height: 300px;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__marker {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding-top: 0;
        grid-column: 2;
        grid-row: auto;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__body {
        padding-top: 6px;
        padding-bottom: 0;
        margin: 0;
        grid-column: 3;
        grid-row: auto;
        justify-self: stretch;
        width: 100%;
    }

    /* vv-right */
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__items {
        --wce-timeline-line-left: 50%;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__item {
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__body {
        grid-column: 1;
        justify-self: stretch;
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__visual {
        grid-column: 3;
    }

    /* vv-alternate-left & vv-alternate-right */
    /* Alternate vertical keeps the same centered marker column as single-side variants. */

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--wce-timeline-vertical-gap);
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__body {
        width: 100%;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__visual {
        max-width: calc(50% - var(--wce-timeline-vertical-marker-column) / 2 - 20px);
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { justify-self: end; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { justify-self: start; }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding-top: 6px;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual { grid-column: 3; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body { grid-column: 3; grid-row: 2; padding-top: 16px; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual { grid-column: 1; grid-row: 1; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body { grid-column: 1; grid-row: 2; padding-top: 16px; }

    /* Animation: auto mode switches to vertical line draw.
       Unmasked reveal via clip-path (no scaleY) — no stretching, uniform for
       solid/dashed/dotted (incl. radial-gradient round dots). */
    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__items::before {
        opacity: min(1, var(--wce-timeline-seen-count, 0));
        transform: none;
        clip-path: inset(0 0 var(--wce-timeline-line-clip, 100%) 0);
        transition:
            clip-path 1.05s cubic-bezier(0.17, 0.84, 0.44, 1),
            opacity 0.25s ease;
    }

    .wce-timeline--animate-path.wce-timeline--auto.wce-timeline--switch-640.wce-timeline--line-complete .wce-timeline__items::before {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}


/* =====================================================================
 * MOBILE FALLBACK (<=640px) — all variants collapse to simple vertical
 * Grid: dot | body, with visual on top, marker in middle, body below.
 * ===================================================================== */

@media only screen and (max-width: 640px) {
    /* Override line position: line at dot center (left column) */
    .wce-timeline--vertical .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__items {
        --wce-timeline-line-left: calc(var(--wce-timeline-dot-size) / 2);
    }

    /* Mobile grid: dot-size | 1fr, 3 rows: visual | marker | body */
    .wce-timeline--vertical .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__item {
        grid-template-columns: var(--wce-timeline-dot-size) minmax(0, 1fr);
        grid-template-rows: auto var(--wce-timeline-dot-size) auto;
        column-gap: 20px;
        row-gap: 20px;
    }

    /* Reset alternate-specific grid (override to simple mobile grid) */
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item {
        grid-template-columns: var(--wce-timeline-dot-size) minmax(0, 1fr);
        grid-template-rows: auto var(--wce-timeline-dot-size) auto;
    }

    /* Reset alternate marker placement */
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__marker {
        grid-column: auto;
        grid-row: auto;
        padding-top: 0;
    }

    /* Reset alternate odd/even visual/body placement */
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__visual {
        grid-column: 2;
        grid-row: 1;
        max-width: none;
        justify-self: stretch;
    }

    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body {
        grid-column: 2;
        grid-row: 3;
        padding-top: 0;
        margin: 0;
        max-width: none;
        justify-self: stretch;
    }

    /* Common mobile placement (applies to all variants) */
    .wce-timeline--vertical .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__visual {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-start;
    }

    .wce-timeline--vertical .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__marker,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__marker {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .wce-timeline--vertical .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__body,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__body {
        grid-column: 2;
        grid-row: 3;
        max-width: none;
        justify-self: stretch;
    }

    /* Reset alternate visual placement for mobile */
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__visual,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__visual {
        max-width: none;
        justify-self: stretch;
    }

    .wce-timeline--vertical .wce-timeline__image,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__image,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__image,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__image {
        max-width: min(100%, 320px);
        max-height: 240px;
    }

    /* Reset line top for mobile (line starts from very top of items) */
    .wce-timeline--vertical .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__items {
        --wce-timeline-line-start: 0;
    }
}


/* =====================================================================
 * ANIMATIONS — point pop + body fade-up + progressive line draw
 * Works with all 8 variants. The line is revealed progressively by a
 * clip-path inset mask driven by --wce-timeline-line-clip = (1 - progress)
 * * 100%. This avoids any scaleX/scaleY transform, so the line — including
 * its rounded caps and the radial-gradient round dots of --line-dotted —
 * keeps a constant size/shape while being unmasked. No stretching, uniformly
 * for solid, dashed and dotted styles.
 *
 * v0.4.2: each .wce-timeline__item--seen reveals its own marker (pop)
 * AND its body (fade-up transition). The line is unmasked proportionally to
 * seen-count / total-count. .wce-timeline--line-complete forces 100%.
 * Without --animate-path, everything is visible immediately.
 * v0.5.2: unified line reveal on clip-path for all line styles (solid/dashed/
 * dotted, incl. radial-gradient round dots); removed the scaleX/scaleY path
 * that stretched solid lines and deformed the dotted gradient pattern.
 * ===================================================================== */

/* Point pop: dots/numbers/icons start hidden, pop in when their item is --seen.
   The delay comes from --wce-timeline-item-delay (inline per item from PHP).
   Targets all span types: plain dot, .wce-timeline__number, .wce-timeline__icon. */
.wce-timeline--animate-path .wce-timeline__marker > span:not(.wce-timeline__icon):not(.wce-timeline__number),
.wce-timeline--animate-path .wce-timeline__marker .wce-timeline__number,
.wce-timeline--animate-path .wce-timeline__marker .wce-timeline__icon {
    opacity: 0;
    transform: scale(0.25);
}

.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__marker > span:not(.wce-timeline__icon):not(.wce-timeline__number),
.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__marker .wce-timeline__number,
.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__marker .wce-timeline__icon {
    animation: wce-timeline-point-pop 0.46s cubic-bezier(0.17, 0.84, 0.44, 1) both;
    animation-delay: var(--wce-timeline-item-delay, 0ms);
}

/* Body fade-up (v0.4.2 — BESOIN 1): the step body animates in when its item
   is --seen. Before --seen, body is opacity 0 + translateY(20px). At --seen,
   transitions to visible with the same per-item delay.
   Without --animate-path, the body is visible immediately (no opacity 0). */
.wce-timeline--animate-path .wce-timeline__body {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__body {
    opacity: 1;
    transform: none;
    transition-delay: var(--wce-timeline-item-delay, 0ms);
}

/* Image fade-up + scale (v0.5.3 — BESOIN 2): the step illustration animates in
   when its item is --seen, mirroring the body transition. Before --seen, the
   visual is opacity 0 + translateY(24px) + scale(0.92). At --seen, it eases to
   visible with the same per-item delay. Only targets .wce-timeline__visual that
   actually contains an image/picture/svg — empty visuals stay untouched (the
   :has(img) guard avoids animating the hidden placeholder). */
.wce-timeline--animate-path .wce-timeline__visual:has(img),
.wce-timeline--animate-path .wce-timeline__visual:has(picture),
.wce-timeline--animate-path .wce-timeline__visual:has(svg) {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
}

.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__visual:has(img),
.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__visual:has(picture),
.wce-timeline--animate-path .wce-timeline__item--seen .wce-timeline__visual:has(svg) {
    opacity: 1;
    transform: none;
    transition-delay: var(--wce-timeline-item-delay, 0ms);
}

/* Line draw: horizontal — applies to --horizontal and --auto (desktop).
   Unmasked reveal via clip-path (no scaleX), so the line keeps a constant
   size/shape during the animation — no stretching. Works uniformly for solid,
   dashed and dotted lines (including the radial-gradient round dots of
   --line-dotted), because the clip-path masks the ::before without scaling
   its background-image or border pattern.
   --wce-timeline-line-clip = (1 - progress) * 100% hides the right end. */
.wce-timeline--animate-path.wce-timeline--horizontal .wce-timeline__items::before,
.wce-timeline--animate-path.wce-timeline--auto .wce-timeline__items::before {
    opacity: min(1, var(--wce-timeline-seen-count, 0));
    transform: none;
    clip-path: inset(0 var(--wce-timeline-line-clip, 100%) 0 0);
    transition:
        clip-path 1.05s cubic-bezier(0.17, 0.84, 0.44, 1),
        opacity 0.25s ease;
}

.wce-timeline--animate-path.wce-timeline--horizontal.wce-timeline--line-complete .wce-timeline__items::before,
.wce-timeline--animate-path.wce-timeline--auto.wce-timeline--line-complete .wce-timeline__items::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* Line draw: vertical — applies to --vertical.
   Unmasked reveal via clip-path (no scaleY), so the line keeps a constant
   size/shape during the animation — no stretching. Works uniformly for solid,
   dashed and dotted lines (including the radial-gradient round dots of
   --line-dotted), because the clip-path masks the ::before without scaling
   its background-image or border pattern.
   --wce-timeline-line-clip = (1 - progress) * 100% hides the bottom end. */
.wce-timeline--animate-path.wce-timeline--vertical .wce-timeline__items::before {
    opacity: min(1, var(--wce-timeline-seen-count, 0));
    transform: none;
    clip-path: inset(0 0 var(--wce-timeline-line-clip, 100%) 0);
    transition:
        clip-path 1.05s cubic-bezier(0.17, 0.84, 0.44, 1),
        opacity 0.25s ease;
}

.wce-timeline--animate-path.wce-timeline--vertical.wce-timeline--line-complete .wce-timeline__items::before {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

/* Auto mode switches to vertical draw in media queries above. */

@keyframes wce-timeline-point-pop {
    0% {
        opacity: 0;
        transform: scale(0.25);
    }

    70% {
        opacity: 1;
        transform: scale(1.16);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================================
 * MOBILE FALLBACK FOR PURE VERTICAL TIMELINES (v0.5.2)
 *
 * Les timelines --vertical pures (vv-left, vv-right, vv-alternate-*)
 * n'héritaient d'aucune media query mobile — seules les timelines --auto
 * (bascule responsive) en avaient. En mobile, la grid alternate (3 colonnes,
 * 2 rangées: visual en row 1, body en row 2) laisse un grand décalage entre
 * le marker et le body quand le visual est vide.
 *
 * Solution : en dessous de 990px, on neutralise l'alternate et on force un
 * layout simple à 3 colonnes / 1 rangée (visual | marker | body), avec la
 * ligne verticale décalée à gauche (20px) pour un rendu mobile naturel.
 * Le visual vide est masqué par la règle :has() plus haut.
 * ===================================================================== */
@media only screen and (max-width: 989px) {

    /* Neutralise l'alternate : ligne à gauche, une seule rangée. */
    .wce-timeline--vertical .wce-timeline__items {
        --wce-timeline-line-left: 20px;
    }

    .wce-timeline--vertical .wce-timeline__item,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item {
        grid-template-columns: 0 var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        align-items: start;
    }

    /* v0.5.8: Visual affiché en mobile, empilé au-dessus du body.
       Le visual a une largeur fixe (160px) pour que aspect-ratio:4/3 s'applique
       correctement à l'image. Le marker s'étend sur les 2 rows (visual + body). */
    .wce-timeline--vertical .wce-timeline__visual {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-start;
        padding-top: 0;
        margin-bottom: 12px;
        width: 160px;
        max-width: 160px;
        flex-shrink: 0;
    }
    .wce-timeline--vertical .wce-timeline__image {
        width: 100%;
        max-width: 100%;
        max-height: none;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        height: auto;
    }

    /* Body : colonne 3, prend toute la largeur restante.
       On surcharge aussi les règles --has-bg et :not(--has-bg) qui placent
       le body en grid-row: 2 avec une spécificité élevée (lignes 427-481). */
    .wce-timeline--vertical .wce-timeline__body,
    .wce-timeline--vertical .wce-timeline__body--has-bg,
    .wce-timeline--vertical .wce-timeline__body:not(.wce-timeline__body--has-bg),
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body--has-bg,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__body:not(.wce-timeline__body--has-bg),
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body--has-bg,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__body:not(.wce-timeline__body--has-bg),
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body--has-bg,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__body:not(.wce-timeline__body--has-bg),
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body--has-bg,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__body:not(.wce-timeline__body--has-bg) {
        grid-column: 3;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
        padding-top: 0;
    }

    /* Marker : s'étend sur les 2 rows (visual + body) en mobile. */
    .wce-timeline--vertical .wce-timeline__marker,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__marker,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        padding-top: 0;
    }
}

/* =====================================================================
 * DOTTED LINE WITH ROUND DOTS (v0.5.2)
 *
 * Native CSS `border-style: dotted` produces square dots with
 * uncontrollable spacing. For round, well-spaced dots, we replace the
 * border with a radial-gradient background when the line style is
 * "dotted". Dot diameter = line thickness; spacing = 3× diameter so
 * dots are clearly distinct with a 2× gap.
 * ===================================================================== */

/* Vertical dotted line (desktop --vertical + mobile --auto switches) */
.wce-timeline--vertical.wce-timeline--line-dotted .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--switch-989.wce-timeline--line-dotted .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--switch-767.wce-timeline--line-dotted .wce-timeline__items::before {
    border-left: none;
    border-top: none;
    border-radius: 0;
    width: var(--wce-timeline-line-size);
    height: auto;
    background-color: transparent;
    background-image: radial-gradient(circle closest-side at 50% 50%, var(--wce-timeline-line-color) 99%, transparent 100%);
    background-size: 100% calc(var(--wce-timeline-line-size) * 3);
    background-repeat: repeat-y;
    background-position: 50% 0;
}

/* Horizontal dotted line (desktop --horizontal + --auto) */
.wce-timeline--horizontal.wce-timeline--line-dotted .wce-timeline__items::before,
.wce-timeline--auto.wce-timeline--line-dotted .wce-timeline__items::before {
    border-top: none;
    border-left: none;
    border-radius: 0;
    height: var(--wce-timeline-line-size);
    width: auto;
    background-color: transparent;
    background-image: radial-gradient(circle closest-side at 50% 50%, var(--wce-timeline-line-color) 99%, transparent 100%);
    background-size: calc(var(--wce-timeline-line-size) * 3) 100%;
    background-repeat: repeat-x;
    background-position: 0 50%;
}