/* 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-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-vertical-item-gap: clamp(64px, 8vw, 128px);
    --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 {
    min-width: 0;
}

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

.wce-timeline__description > :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%;

}

/* Vertical line segment via ::before on each item except the last.
   JS sets --wce-timeline-line-left on the container. The gap is integrated in
   top/bottom so the segment stops a short distance before/after the markers. */
.wce-timeline--vertical .wce-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(100% - var(--wce-timeline-actual-item-gap, var(--wce-timeline-vertical-item-gap, 0px)) + var(--wce-timeline-line-gap, 0px));
    bottom: var(--wce-timeline-line-gap, 0px);
    left: calc(
        var(--wce-timeline-line-left, 50%)
        - (var(--wce-timeline-line-size) / 2)
    );
    width: var(--wce-timeline-line-size);
    min-height: 80px;
    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 vertical grid: content | marker (vv-left). */
.wce-timeline--vertical .wce-timeline__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column);
    grid-template-rows: auto;
    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__content {
    grid-column: 1;
    width: 100%;
}

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

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

/* Alternate images fill the content column while preserving their ratio. */
.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__visual:has(img) {
    margin-bottom: 20px;
}

.wce-timeline--vertical .wce-timeline__marker {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

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

/* --- vv-right: marker | content --- */

.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: var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
}

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__content {
    grid-column: 2;
}

.wce-timeline--vertical.wce-timeline--vv-right .wce-timeline__marker {
    grid-column: 1;
}

/* --- vv-alternate-left & vv-alternate-right: centered marker column --- */

.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;
}

/* vv-center: centred marker column, content spans full width below the marker.
   The line stays at 50% (center) and the content is centred under each marker. */
.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item {
    grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
    grid-template-rows: auto;
}

.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__content {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
}

.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__marker {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__body {
    justify-self: center;
}

.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__visual {
    justify-content: center;
    max-width: 100%;
    width: 100%;
}

/* vv-center: keep the line at 50% (centered), do not let the mobile fallback
   move it to the left edge. */
.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__items,
.wce-timeline--auto.wce-timeline--vv-center .wce-timeline__items {
    --wce-timeline-line-left: 50%;
}

/* vv-center: increase inter-step spacing to fit 80px min line + gaps.
   Only in vertical mode (<=989px for --auto, always for --vertical). */
@media only screen and (max-width: 989px) {
    .wce-timeline--auto.wce-timeline--vv-center .wce-timeline__item:not(:last-child) {
        --wce-timeline-actual-item-gap: max(var(--wce-timeline-vertical-item-gap, 64px), calc(80px + 2 * var(--wce-timeline-line-gap, 0px)));
        padding-bottom: var(--wce-timeline-actual-item-gap) !important;
    }
}
.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item:not(:last-child) {
    --wce-timeline-actual-item-gap: max(var(--wce-timeline-vertical-item-gap, 64px), calc(80px + 2 * var(--wce-timeline-line-gap, 0px)));
    padding-bottom: var(--wce-timeline-actual-item-gap) !important;
}

.wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
}

.wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__content,
.wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__content {
    width: 100%;
}

.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;
    align-self: start;
    padding-top: 0;
}

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

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

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

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

/* Empty visuals stay in the markup but do not create vertical space. */
.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) --- */

/* Keep the horizontal grid unchanged: the wrapper contributes no box, so its
   visual and body remain grid items alongside the marker. */
.wce-timeline--horizontal .wce-timeline__content,
.wce-timeline--auto .wce-timeline__content {
    display: contents;
}

.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;
        /* Center first/last steps: padding equal to half the viewport width
           pushes the first step to the center and lets the last step end at
           the center when scrolled to the end. Set via JS variable
           --wce-timeline-edge-padding (see frontend.js updateTimelineLine). */
        padding-left: var(--wce-timeline-edge-padding, 0px);
        padding-right: var(--wce-timeline-edge-padding, 0px);
    }

    .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__content > .wce-timeline__body,
    .wce-timeline--auto .wce-timeline__item > .wce-timeline__content > .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 segment via ::before on each item except the last.
   JS sets --wce-timeline-line-top on the container. The gap is integrated in
   left/right so the segment stops a short distance before/after the markers. */
.wce-timeline--horizontal .wce-timeline__item:not(:last-child)::before,
.wce-timeline--auto .wce-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% + (var(--wce-timeline-dot-size) / 2) + var(--wce-timeline-line-gap, 0px));
    right: calc(-50% + (var(--wce-timeline-dot-size) / 2) + var(--wce-timeline-line-gap, 0px));
    top: calc(
        var(--wce-timeline-line-top, calc(var(--wce-timeline-dot-size) / 2))
        - (var(--wce-timeline-line-size) / 2)
    );
    height: var(--wce-timeline-line-size);
    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__content > .wce-timeline__visual,
.wce-timeline--auto .wce-timeline__item > .wce-timeline__content > .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__content > .wce-timeline__body,
.wce-timeline--auto .wce-timeline__item > .wce-timeline__content > .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__item:not(:last-child)::before,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item:not(:last-child)::before {
    /* JS measures the marker centre and sets --wce-timeline-line-top; use it
       so the segment 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__content > .wce-timeline__visual,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__content > .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__content > .wce-timeline__body,
.wce-timeline--auto.wce-timeline--vh-bottom .wce-timeline__item > .wce-timeline__content > .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__item:not(:last-child)::before,
.wce-timeline--auto.wce-timeline--vh-alternate-top .wce-timeline__item:not(:last-child)::before,
.wce-timeline--horizontal.wce-timeline--vh-alternate-bottom .wce-timeline__item:not(:last-child)::before,
.wce-timeline--auto.wce-timeline--vh-alternate-bottom .wce-timeline__item:not(:last-child)::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%;

    }

    /* Vertical line segment via ::before on each item except the last. */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item:not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: calc(100% - var(--wce-timeline-actual-item-gap, var(--wce-timeline-vertical-item-gap, 0px)) + var(--wce-timeline-line-gap, 0px));
        bottom: var(--wce-timeline-line-gap, 0px);
        left: calc(
            var(--wce-timeline-line-left, 50%)
            - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: var(--wce-timeline-line-size);
        height: auto;
        min-height: 80px;
        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;
    }

    /* Dotted vertical segment for auto-switch below breakpoint. */
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before {
        border-left: none;
        border-top: none;
        border-radius: 0;
        width: var(--wce-timeline-line-size);
        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;
    }



    /* Reset item to the vertical content | marker grid. */
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column);
        grid-template-rows: auto;
        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__content {
        display: block;
        grid-column: 1;
        width: 100%;
    }

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

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__visual:has(.wce-timeline__image) {
        margin-bottom: 20px;
    }

    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__visual:not(:has(img)):not(:has(svg)):not(:has(picture)) {
        display: none;
    }

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

    /* Reset marker from horizontal 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: 1;
        align-self: start;
    }

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

    /* vv-right: marker | content */
    .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: var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__content {
        grid-column: 2;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-right .wce-timeline__marker {
        grid-column: 1;
    }

    /* Center variant: content directly under the centred marker. */
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__content {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__body {
        justify-self: center;
    }

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

    /* Alternate variants: left content | marker | right content. */
    .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;
    }

    .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;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__content { grid-column: 1; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__content { grid-column: 1; }

}

/* --- 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--auto.wce-timeline--switch-767 .wce-timeline__item:not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: calc(100% - var(--wce-timeline-actual-item-gap, var(--wce-timeline-vertical-item-gap, 0px)) + var(--wce-timeline-line-gap, 0px));
        bottom: var(--wce-timeline-line-gap, 0px);
        left: calc(
            var(--wce-timeline-line-left, 50%)
            - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: var(--wce-timeline-line-size);
        height: auto;
        min-height: 80px;
        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;
    }

    /* Dotted vertical segment for auto-switch below breakpoint. */
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before {
        border-left: none;
        border-top: none;
        border-radius: 0;
        width: var(--wce-timeline-line-size);
        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;
    }



    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column);
        grid-template-rows: auto;
        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__content {
        display: block;
        grid-column: 1;
        width: 100%;
    }

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

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__visual:has(.wce-timeline__image) {
        margin-bottom: 20px;
    }

    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__visual:not(:has(img)):not(:has(svg)):not(:has(picture)) {
        display: none;
    }

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

    /* Reset marker from horizontal positioning. */
    .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: 1;
        align-self: start;
    }

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

    /* vv-right: marker | content */
    .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: var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__content {
        grid-column: 2;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-right .wce-timeline__marker {
        grid-column: 1;
    }

    /* Center variant: content directly under the centred marker. */
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__content {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__body {
        justify-self: center;
    }

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

    /* Alternate variants: left content | marker | right content. */
    .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;
    }

    .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;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__content { grid-column: 1; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__content { grid-column: 1; }

}

/* --- 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--auto.wce-timeline--switch-640 .wce-timeline__item:not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: calc(100% - var(--wce-timeline-actual-item-gap, var(--wce-timeline-vertical-item-gap, 0px)) + var(--wce-timeline-line-gap, 0px));
        bottom: var(--wce-timeline-line-gap, 0px);
        left: calc(
            var(--wce-timeline-line-left, 50%)
            - (var(--wce-timeline-line-size) / 2)
        );
        right: auto;
        width: var(--wce-timeline-line-size);
        height: auto;
        min-height: 80px;
        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;
    }

    /* Dotted vertical segment for auto-switch below breakpoint. */
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before {
        border-left: none;
        border-top: none;
        border-radius: 0;
        width: var(--wce-timeline-line-size);
        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;
    }



    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--wce-timeline-vertical-marker-column);
        grid-template-rows: auto;
        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__content {
        display: block;
        grid-column: 1;
        width: 100%;
    }

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

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__visual:has(.wce-timeline__image) {
        margin-bottom: 20px;
    }

    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__visual:not(:has(img)):not(:has(svg)):not(:has(picture)) {
        display: none;
    }

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

    /* Reset marker from horizontal positioning. */
    .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: 1;
        align-self: start;
    }

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

    /* vv-right: marker | content */
    .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: var(--wce-timeline-vertical-marker-column) minmax(0, 1fr);
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__content {
        grid-column: 2;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-right .wce-timeline__marker {
        grid-column: 1;
    }

    /* Center variant: content directly under the centred marker. */
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr;
        grid-template-rows: auto;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__content {
        grid-column: 1 / -1;
        width: 100%;
        text-align: center;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__marker {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__body {
        justify-self: center;
    }

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

    /* Alternate variants: left content | marker | right content. */
    .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;
    }

    .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;
        align-self: start;
    }

    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--odd .wce-timeline__content { grid-column: 1; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-left .wce-timeline__item--even .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--odd .wce-timeline__content { grid-column: 3; }
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-alternate-right .wce-timeline__item--even .wce-timeline__content { grid-column: 1; }

}


/* =====================================================================
 * MOBILE FALLBACK (<=640px) — marker left, stacked content right
 * ===================================================================== */

@media only screen and (max-width: 640px) {
    .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);
    }

    /* vv-center: keep line centered and centered layout even on mobile */
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__items {
        --wce-timeline-line-left: 50%;
    }

    /* vv-center: keep 3-column grid (1fr | marker | 1fr) and content spanning all columns */
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__item,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__item {
        grid-template-columns: 1fr var(--wce-timeline-vertical-marker-column) 1fr !important;
        grid-template-rows: auto auto !important;
    }

    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__content {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        text-align: center;
    }

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

    /* vv-center: vertical line segment needs height:auto to stretch */
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item:not(:last-child)::before,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__item:not(:last-child)::before,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__item:not(:last-child)::before,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__item:not(:last-child)::before {
        height: auto;
    }

    /* vv-center: keep line centered even on mobile */
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-989.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-767.wce-timeline--vv-center .wce-timeline__items,
    .wce-timeline--auto.wce-timeline--switch-640.wce-timeline--vv-center .wce-timeline__items {
        --wce-timeline-line-left: 50%;
    }

    .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,
    .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: var(--wce-timeline-dot-size) minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        column-gap: 20px;
        row-gap: 0;
    }

    .wce-timeline--vertical .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-989 .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-767 .wce-timeline__content,
    .wce-timeline--auto.wce-timeline--switch-640 .wce-timeline__content {
        display: block;
        grid-column: 2 !important;
        grid-row: 1;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .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 !important;
        grid-row: 1;
        align-self: start;
        padding-top: 0;
    }

    .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 {
        max-width: none !important;
        justify-content: flex-start;
    }

    .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 {
        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;
    }
}


/* =====================================================================
 * ANIMATIONS — point pop + body fade-up + progressive line segment fade
 * Works with all 8 variants. Each line segment is drawn by its own item's
 * ::before. Before the item is --seen the segment is opacity 0; once seen it
 * fades to opacity 1 with a 0.5s ease transition. This avoids any scale
 * transform, so solid, dashed and dotted lines (including radial-gradient
 * round dots) keep a constant size/shape while being revealed.
 *
 * v0.4.2: each .wce-timeline__item--seen reveals its own marker (pop)
 * AND its body (fade-up transition).
 * v0.9.21: replaced the single container line with per-item segments that
 * reveal individually when their item becomes --seen.
 * ===================================================================== */

/* 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 segment reveal: each item segment fades in when its item is --seen.
   Before --seen the segment is opacity 0; at --seen it fades to 1. */
.wce-timeline--animate-path .wce-timeline__item:not(:last-child)::before {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.wce-timeline--animate-path .wce-timeline__item--seen:not(:last-child)::before {
    opacity: 1;
}

@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);
    }
}

/* =====================================================================
 * RESPONSIVE FALLBACK FOR PURE VERTICAL TIMELINES (<=989px)
 * All variants collapse to marker left | stacked content right.
 * ===================================================================== */
@media only screen and (max-width: 989px) {
    .wce-timeline--vertical .wce-timeline__items {
        --wce-timeline-line-left: calc(var(--wce-timeline-dot-size) / 2);
    }

    .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: var(--wce-timeline-dot-size) minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 20px;
        align-items: start;
    }

    .wce-timeline--vertical .wce-timeline__content,
    .wce-timeline--vertical.wce-timeline--vv-alternate-left .wce-timeline__item .wce-timeline__content,
    .wce-timeline--vertical.wce-timeline--vv-alternate-right .wce-timeline__item .wce-timeline__content,
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item .wce-timeline__content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .wce-timeline--vertical .wce-timeline__visual {
        justify-content: flex-start;
        max-width: none !important;
    }

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

    .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: 1;
        grid-row: 1;
        align-self: start;
        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.
 * ===================================================================== */


/* Very small screens: reduce marker size to give the line more room */
@media only screen and (max-width: 480px) {
    .wce-timeline--auto.wce-timeline--vv-center,
    .wce-timeline--vertical.wce-timeline--vv-center {
        --wce-timeline-dot-size: clamp(48px, 15vw, 80px) !important;
    }
}
/* vv-center: ensure items are tall enough for the line to be visible */
@media only screen and (max-width: 480px) {
    .wce-timeline--auto.wce-timeline--vv-center .wce-timeline__item:not(:last-child),
    .wce-timeline--vertical.wce-timeline--vv-center .wce-timeline__item:not(:last-child) {
        min-height: calc(var(--wce-timeline-dot-size, 60px) + var(--wce-timeline-line-gap, 0px) + 60px);
    }
}


/* =====================================================================*
 * DOTTED LINE WITH ROUND DOTS (v0.5.2 — fixed v0.9.9)
 *
 * 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.
 *
 * BUG FIX (v0.9.9): the --auto --switch-* vertical dotted rules were
 * OUTSIDE their media queries, giving them specificity (0,3,0) which
 * always beat the horizontal dotted rule (0,2,0) even on desktop. Now
 * each --auto --switch-* dotted rule is INSIDE its media query so it
 * only applies below the breakpoint. The --horizontal + --auto dotted
 * rule (outside, specificity 0,2,0) wins on desktop because the switch
 * rules are scoped out.
 * =====================================================================*/

/* Vertical dotted segment — pure --vertical (always applies on desktop). */
.wce-timeline--vertical.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before {
    border-left: none;
    border-top: none;
    border-radius: 0;
    width: var(--wce-timeline-line-size);
    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 segment — --horizontal (always) + --auto (desktop only). */
.wce-timeline--horizontal.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before,
.wce-timeline--auto.wce-timeline--line-dotted .wce-timeline__item:not(:last-child)::before {
    border-top: none;
    border-left: none;
    border-radius: 0;
    height: var(--wce-timeline-line-size);
    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%;
}

/* Line gap (v0.9.20): spacing between the line ends and the markers.
   Works with any line style (solid, dashed, dotted). The gap value
   comes from --wce-timeline-line-gap (inline from PHP, 0-50px). */









/* =====================================================================*
 * EDGE FADE (v0.9.9) — horizontal mode only
 *
 * Uses CSS mask-image to create a progressive fade on left/right edges
 * of the scroll viewport. Only applies when the edge_fade option is
 * enabled and the timeline is in horizontal mode (--horizontal always,
 * --auto on desktop >=990px). In vertical mode, no fade is applied.
 * Pattern from winsiders-flexible-carousel (edge fade / mask-image).
 * =====================================================================*/

.wce-timeline--horizontal.wce-timeline--edge-fade .wce-timeline__scroll {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black var(--wce-timeline-fade-width, 72px),
        black calc(100% - var(--wce-timeline-fade-width, 72px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black var(--wce-timeline-fade-width, 72px),
        black calc(100% - var(--wce-timeline-fade-width, 72px)),
        transparent 100%
    );
}

@media only screen and (min-width: 990px) {
    .wce-timeline--auto.wce-timeline--edge-fade .wce-timeline__scroll {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black var(--wce-timeline-fade-width, 72px),
            black calc(100% - var(--wce-timeline-fade-width, 72px)),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            black var(--wce-timeline-fade-width, 72px),
            black calc(100% - var(--wce-timeline-fade-width, 72px)),
            transparent 100%
        );
    }
}

/* =====================================================================*
 * AUTO-FIT (v0.9.10) — equal-width columns, no horizontal scroll
 *
 * When auto_fit is enabled and the timeline has ≤ 6 items, the items
 * are displayed in equal-width columns filling the container width.
 * No GSAP ScrollTrigger, no edge padding, no overflow. The grid uses
 * repeat(N, 1fr) where N = item count, so each column is exactly equal.
 * Only applies on desktop (>=990px). Below the breakpoint, --auto mode
 * switches to vertical as usual.
 * =====================================================================*/

@media only screen and (min-width: 990px) {
    /* Reset the scroll viewport: no overflow, no GSAP pin */
    .wce-timeline--auto-fit .wce-timeline__scroll {
        width: 100%;
        overflow: visible;
    }

    /* Items container: fill width with equal columns, no transform */
    .wce-timeline--auto-fit .wce-timeline__items {
        width: 100%;
        min-width: 0;
        will-change: auto;
        /* Override the repeat(count, minmax(min, 1fr)) from the base
           horizontal rule with strict equal-width 1fr columns. The
           --wce-timeline-count variable is set by PHP to the item count. */
        grid-template-columns: repeat(var(--wce-timeline-count), 1fr);
        /* Cancel edge padding (set by JS for scroll mode) */
        padding-left: 0;
        padding-right: 0;
    }

    /* In auto-fit the markers are vertically centered in their row.
       The JS sets --wce-timeline-line-top from getBoundingClientRect() which
       is exact. We only provide a better fallback here (50% of the items
       height is NOT the marker centre — the markers sit in row 2 of a
       3-row grid). We use --wce-timeline-line-top if set by JS, otherwise
       fall back to 50% as a rough approximation. The key fix is the
       left/right fallbacks for equal columns. */
    .wce-timeline--auto-fit .wce-timeline__item:not(:last-child)::before {
        top: calc(
            var(--wce-timeline-line-top, 50%)
            - (var(--wce-timeline-line-size) / 2)
        );
        left: calc(50% + (var(--wce-timeline-dot-size) / 2) + var(--wce-timeline-line-gap, 0px));
        right: calc(-50% + (var(--wce-timeline-dot-size) / 2) + var(--wce-timeline-line-gap, 0px));
    }

    /* Items: no min-width constraint, fill their column */
    .wce-timeline--auto-fit .wce-timeline__item {
        min-width: 0;
    }
}