.celtiis-cash-pcta {
    font-family: 'Gotham', sans-serif;
    position: relative;
    padding: 95px 64px;
    background-color: #D6E9B8;
    background-image: var(--pcta-bg-desktop, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    isolation: isolate;
}

.celtiis-cash-pcta::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.celtiis-cash-pcta__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 560px;
}

.celtiis-cash-pcta--align-left  .celtiis-cash-pcta__body { margin-right: auto; align-items: flex-start; text-align: left; }
.celtiis-cash-pcta--align-center .celtiis-cash-pcta__body { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.celtiis-cash-pcta--align-right .celtiis-cash-pcta__body { margin-left: auto; align-items: flex-end; text-align: right; }

.celtiis-cash-pcta__title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    color: #1D3D70;
    letter-spacing: -0.015em;
}

.celtiis-cash-pcta__desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #000;
    font-weight: 400;
}

.celtiis-cash-pcta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #1D3D70;
    color: #ffffff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: filter .15s ease, transform .15s ease;
    margin-top: 6px;
}

.celtiis-cash-pcta__btn:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
    color: #ffffff;
}

/* « Image entière » : la bannière prend les proportions de l'image, le texte
   reste centré verticalement et l'agrandit s'il ne tient pas dedans. */
.celtiis-cash-pcta--fit-ratio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: var(--pcta-bg-ratio-desktop, auto);
}

@media (max-width: 991px) {
    .celtiis-cash-pcta {
        padding: 40px 32px;
        background-image: var(--pcta-bg-tablet, var(--pcta-bg-desktop, none));
    }

    .celtiis-cash-pcta--fit-ratio {
        aspect-ratio: var(--pcta-bg-ratio-tablet, var(--pcta-bg-ratio-desktop, auto));
    }
}

@media (max-width: 767px) {
    .celtiis-cash-pcta {
        background-image: var(--pcta-bg-mobile, var(--pcta-bg-tablet, var(--pcta-bg-desktop, none)));
    }

    .celtiis-cash-pcta--fit-ratio {
        aspect-ratio: var(--pcta-bg-ratio-mobile, var(--pcta-bg-ratio-tablet, var(--pcta-bg-ratio-desktop, auto)));
    }
}

@media (max-width: 640px) {
    .celtiis-cash-pcta {
        padding: 32px 24px;
    }
}

/* CTA Partenaire - Modal et cartes de service */

body.celtiis-cash-pcta-noscroll {
    overflow: hidden;
}

.celtiis-cash-pcta-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.celtiis-cash-pcta-modal[hidden] {
    display: none;
}

.celtiis-cash-pcta-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.celtiis-cash-pcta-modal__card {
    position: relative;
    width: 100%;
    max-width: 860px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}

.celtiis-cash-pcta-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.celtiis-cash-pcta-modal__heading {
    min-width: 0;
}

.celtiis-cash-pcta-modal__subtitle {
    margin: 6px 0 0;
    max-width: 58ch;
    font-size: 15px;
    line-height: 1.45;
    color: #5A6B7F;
}

.celtiis-cash-pcta-modal__close {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #EEF1F4;
    font-size: 20px;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.celtiis-cash-pcta-modal__close:hover {
    background: #E2E6EB;
    color: #1D3D70;
}

.celtiis-cash-pcta-modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-secondary, #1D3D70);
}

.celtiis-cash-pcta-modal__body {
    font-size: 15px;
    line-height: 1.6;
}

.celtiis-cash-pcta-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.celtiis-cash-pcta-service {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    padding: 18px 22px;
    border: 1px solid #E8EBEF;
    border-radius: 16px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

/* Un seul changement au survol - la bordure et son fond forment un même état,
   pas deux effets cumulés. */
a.celtiis-cash-pcta-service:hover,
a.celtiis-cash-pcta-service:focus-visible {
    border-color: var(--bs-secondary, #1D3D70);
    background: #F4F6F9;
}

a.celtiis-cash-pcta-service:focus-visible {
    outline: 2px solid var(--bs-secondary, #1D3D70);
    outline-offset: 2px;
}

a.celtiis-cash-pcta-service:hover .celtiis-cash-pcta-service__icon,
a.celtiis-cash-pcta-service:focus-visible .celtiis-cash-pcta-service__icon {
    background: var(--bs-secondary, #1D3D70);
    color: #ffffff;
}

.celtiis-cash-pcta-service__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.celtiis-cash-pcta-service__arrow {
    flex: none;
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--bs-secondary, #1D3D70);
}

.celtiis-cash-pcta-service__arrow svg {
    width: 100%;
    height: 100%;
}

.celtiis-cash-pcta-service__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #F4F6F9;
    color: var(--bs-secondary, #1D3D70);
    font-size: 24px;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease;
}

.celtiis-cash-pcta-service__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.celtiis-cash-pcta-service__title {
    color: var(--bs-secondary, #1D3D70);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.celtiis-cash-pcta-service__desc {
    color: #5A6B7F;
    font-size: 15px;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .celtiis-cash-pcta-modal__card {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .celtiis-cash-pcta-service {
        gap: 14px;
        padding: 14px 16px;
        /* La description passe à trois lignes : centrée, la pastille se
           décrochait du titre. On la cale en haut. */
        align-items: flex-start;
    }

    .celtiis-cash-pcta-service__icon {
        margin-top: 2px;
    }

    .celtiis-cash-pcta-service__icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        font-size: 20px;
    }

    .celtiis-cash-pcta-modal__title {
        font-size: 20px;
    }

    .celtiis-cash-pcta-modal__subtitle,
    .celtiis-cash-pcta-service__desc {
        font-size: 14px;
    }

    /* La flèche disparaît sous 640 px : la ligne entière reste cliquable et
       l'espace gagné revient au texte. */
    .celtiis-cash-pcta-service__arrow {
        display: none;
    }
}

/* Dans l'éditeur Elementor : le modal reste affiché « en place » (pas de
   recouvrement plein écran ni de backdrop) pour prévisualiser les cartes. */
.celtiis-cash-pcta-modal--editor {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    padding: 0;
    margin-top: 20px;
}

.celtiis-cash-pcta-modal--editor .celtiis-cash-pcta-modal__backdrop {
    display: none;
}

.celtiis-cash-pcta-modal--editor .celtiis-cash-pcta-modal__card {
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 1px dashed #c7ccd4;
}
