/* The two text copies are out of flow (see .ia-ddb76160-textbox), so they no
   longer feed the widget's intrinsic width. An Elementor container set to
   `align-items: center` sizes its widgets by content rather than stretching
   them, which would collapse this one to the sum of the cards' min-widths.
   Claim the full width explicitly instead of relying on the text to do it. */
.elementor-widget-interactive_accordion_ddb76160 {
    width: 100%;
}

.ia-ddb76160-container {
    display: flex;
    flex-direction: row;
    /* Hauteur pilotee par le controle Height d'Elementor, qui n'ecrit que la
       variable : le meme reglage sert de hauteur de rangee en desktop et de
       hauteur de carte en mobile, ou les cartes sont empilees. */
    height: var(--ia-ddb76160-height, 400px);
    width: 100%;
    overflow: hidden;
    gap: 10px;
    border-radius: 12px;
}

.ia-ddb76160-item {
    /* Gradient laid over the image, fading out towards the top. */
    --ia-ddb76160-overlay: #000000;
    --ia-ddb76160-overlay-stop: 50%;
    position: relative;
    flex: 1 1 0%;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    /* Content is anchored to the bottom of every card */
    align-items: flex-end;
    border-radius: 8px;
    /* Closed cards keep enough width for their text to stay readable */
    min-width: 220px;
    /* The item itself is the link */
    text-decoration: none;
    color: inherit;
    /* Only flex-grow is animated. flex-basis and flex-shrink stay put, and the
       text inside never re-wraps, so each frame is a cheap layout pass.
       No will-change here: flex cannot be promoted to the compositor, so the
       hint would only cost memory. */
    transition: flex-grow 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ia-ddb76160-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.ia-ddb76160-item.is-active {
    flex-grow: 2;
}

.ia-ddb76160-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 1;
}

/* The colour image is a second layer cross-faded over the greyscale one:
   animating opacity is a compositor job, whereas animating `filter` repaints
   the whole card on every frame. */
.ia-ddb76160-bg-color {
    filter: none;
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity;
}

.ia-ddb76160-item.is-active .ia-ddb76160-bg-color {
    opacity: 1;
}

/* Static gradient over the image. This is what keeps the text readable over a
   busy photo, rather than a solid block sitting behind the text. */
.ia-ddb76160-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(0deg, var(--ia-ddb76160-overlay), transparent var(--ia-ddb76160-overlay-stop));
}

/* Always rendered: no click or hover is required to read the card. */
.ia-ddb76160-content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

/* Each text block holds two copies of the same text, each laid out at a fixed
   width -- one for the collapsed card, one for the expanded one. Neither ever
   re-wraps while the card animates, so the only thing that moves is the
   wrapper height, tweened as one continuous value instead of jumping by whole
   lines. Both copies are out of flow, so their fixed widths cannot feed back
   into the flex layout. */
.ia-ddb76160-textbox {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: height 0.55s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ia-ddb76160-textbox > * {
    position: absolute;
    left: 0;
    bottom: 0;
    transition: opacity 0.55s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.55s;
}

/* Spacing is carried by the wrapper, so the copies must drop their own margins.
   Two classes, to outrank the .ia-ddb76160-title / -subtitle rules below: on an
   absolutely positioned box, a leftover margin-bottom shifts it off the bottom
   edge and the top of the text gets clipped. */
.ia-ddb76160-textbox > .ia-ddb76160-title,
.ia-ddb76160-textbox > .ia-ddb76160-subtitle {
    margin: 0;
}

.ia-ddb76160-copy-open {
    opacity: 0;
    visibility: hidden;
}

.ia-ddb76160-item.is-active .ia-ddb76160-copy-open {
    opacity: 1;
    visibility: visible;
}

.ia-ddb76160-item.is-active .ia-ddb76160-copy-closed {
    opacity: 0;
    visibility: hidden;
}

/* While the script probes the collapsed and expanded layouts, nothing animates. */
.ia-ddb76160-container.is-measuring .ia-ddb76160-item,
.ia-ddb76160-container.is-measuring .ia-ddb76160-textbox,
.ia-ddb76160-container.is-measuring .ia-ddb76160-textbox > *,
.ia-ddb76160-container.is-measuring .ia-ddb76160-bg-color {
    transition: none !important;
}

.ia-ddb76160-title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    overflow-wrap: break-word;
}

.ia-ddb76160-subtitle {
    margin-bottom: 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    overflow-wrap: break-word;
}

.ia-ddb76160-button {
    display: inline-block;
    padding: 10px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    align-self: flex-start;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* The button is decorative, so it reacts to hovering the whole card. */
.ia-ddb76160-button:hover,
.ia-ddb76160-item:hover .ia-ddb76160-button {
    background: #333;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .ia-ddb76160-item,
    .ia-ddb76160-textbox,
    .ia-ddb76160-textbox > *,
    .ia-ddb76160-bg-color {
        transition: none !important;
    }
}

@media (max-width: 767px) {
    /* Empilees, les cartes portent elles-memes la hauteur : un conteneur en
       colonne additionnerait les cartes au lieu de les dimensionner. */
    .ia-ddb76160-container {
        flex-direction: column;
        height: auto;
    }
    .ia-ddb76160-item {
        min-width: 0;
        /* flex fige, sinon `flex: 1 1 0%` etire ou ecrase la hauteur demandee. */
        flex: 0 0 auto;
        height: var(--ia-ddb76160-height, 240px);
    }
}