.celtiis-cash-fc {
    font-family: 'Gotham', sans-serif;
    --fc-cols: 4;
}

.celtiis-cash-fc__grid {
    display: grid;
    gap: 20px;
}

.celtiis-cash-fc__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 20px;
    border-radius: 16px;
    background: transparent;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.celtiis-cash-fc__card:hover {
    transform: scale(1.04) translateY(-3px);
}

.celtiis-cash-fc__icon {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
}

.celtiis-cash-fc__icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--fc-icon);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.celtiis-cash-fc__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1C3B71BF;
    letter-spacing: -0.01em;
}

.celtiis-cash-fc__desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    font-family: 'Montserrat', sans-serif;
    color: #1C3B71BF;
    font-weight: 300;
}

/* Image (dans les layouts qui l'ont) */
.celtiis-cash-fc__image {
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: #F1F4F9;
}

.celtiis-cash-fc__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ═════════════════════════════════════════════════════════════════════
 * LAYOUTS
 * ═════════════════════════════════════════════════════════════════════ */

.celtiis-cash-fc--row .celtiis-cash-fc__grid {
    grid-template-columns: repeat(var(--fc-cols, 4), minmax(0, 1fr));
}

.celtiis-cash-fc--grid .celtiis-cash-fc__grid {
    grid-template-columns: repeat(var(--fc-cols, 4), minmax(0, 1fr));
}

/* Cards : 2 colonnes de 25% (soit 50% total) sur la gauche.
   Image : 1 colonne de 50% sur la droite qui span TOUTES les rangées. */
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: repeat(2, minmax(160px, 1fr));
}

/* Placement explicite des cards pour éviter que la 3e/4e n'aille
   collisionner avec la colonne image. */
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__card:nth-child(1) { grid-column: 1; grid-row: 1; }
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__card:nth-child(2) { grid-column: 2; grid-row: 1; }
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__card:nth-child(3) { grid-column: 1; grid-row: 2; }
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__card:nth-child(4) { grid-column: 2; grid-row: 2; }

/* L'image span les 2 rangées, forcée à s'étirer sur toute la hauteur.
   `align-self: stretch` + `height: 100%` neutralisent le `min-height: 0`
   défini plus haut (utile aux autres modes) qui la faisait s'écraser. */
.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__image {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 100% !important;
}

.celtiis-cash-fc__grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
}

.celtiis-cash-fc__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__image,
.celtiis-cash-fc--grid-image-center .celtiis-cash-fc__image,
.celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__image {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.celtiis-cash-fc--grid-image-right .celtiis-cash-fc__img,
.celtiis-cash-fc--grid-image-center .celtiis-cash-fc__img,
.celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 5. Grille + image dans un coin (screenshot 3)
 *     Rangée « pleine » : 3 cards à 33% (2 cols sur 6).
 *     Rangée « coin »  : 1 card à 50% + image à 50% (3 cols sur 6). --- */
.celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
}

/* Coin bas-droite (défaut) ────────────────────────────────────
 * Row 1 : card1, card2, card3 (33% chacun)
 * Row 2 : card4 (50% gauche) + image (50% droite) */
.celtiis-cash-fc--corner-bottom-right .celtiis-cash-fc__card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-right .celtiis-cash-fc__card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-right .celtiis-cash-fc__card:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-right .celtiis-cash-fc__card:nth-child(4) { grid-column: 1 / 4; grid-row: 2; }
.celtiis-cash-fc--corner-bottom-right .celtiis-cash-fc__image             { grid-column: 4 / 7; grid-row: 2; }

/* Coin bas-gauche (mirroir) ───────────────────────────────────
 * Row 1 : card1, card2, card3
 * Row 2 : image (50% gauche) + card4 (50% droite) */
.celtiis-cash-fc--corner-bottom-left .celtiis-cash-fc__card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-left .celtiis-cash-fc__card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-left .celtiis-cash-fc__card:nth-child(3) { grid-column: 5 / 7; grid-row: 1; }
.celtiis-cash-fc--corner-bottom-left .celtiis-cash-fc__card:nth-child(4) { grid-column: 4 / 7; grid-row: 2; }
.celtiis-cash-fc--corner-bottom-left .celtiis-cash-fc__image             { grid-column: 1 / 4; grid-row: 2; }

/* Coin haut-droite ────────────────────────────────────────────
 * Row 1 : card1 (50% gauche) + image (50% droite)
 * Row 2 : card2, card3, card4 */
.celtiis-cash-fc--corner-top-right .celtiis-cash-fc__card:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
.celtiis-cash-fc--corner-top-right .celtiis-cash-fc__image             { grid-column: 4 / 7; grid-row: 1; }
.celtiis-cash-fc--corner-top-right .celtiis-cash-fc__card:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
.celtiis-cash-fc--corner-top-right .celtiis-cash-fc__card:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
.celtiis-cash-fc--corner-top-right .celtiis-cash-fc__card:nth-child(4) { grid-column: 5 / 7; grid-row: 2; }

/* Coin haut-gauche ────────────────────────────────────────────
 * Row 1 : image (50% gauche) + card1 (50% droite)
 * Row 2 : card2, card3, card4 */
.celtiis-cash-fc--corner-top-left .celtiis-cash-fc__image             { grid-column: 1 / 4; grid-row: 1; }
.celtiis-cash-fc--corner-top-left .celtiis-cash-fc__card:nth-child(1) { grid-column: 4 / 7; grid-row: 1; }
.celtiis-cash-fc--corner-top-left .celtiis-cash-fc__card:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
.celtiis-cash-fc--corner-top-left .celtiis-cash-fc__card:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
.celtiis-cash-fc--corner-top-left .celtiis-cash-fc__card:nth-child(4) { grid-column: 5 / 7; grid-row: 2; }

/* Responsive */
@media (max-width: 991px) {
    .celtiis-cash-fc--row .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid .celtiis-cash-fc__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Mode split (image au centre) : passe en 1 colonne empilée */
    .celtiis-cash-fc__grid--split {
        grid-template-columns: 1fr;
    }

    /* Tous les layouts avec image → pile verticale : cards puis image */
    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    /* Reset des grid-column/grid-row explicites : `:nth-child(n)` augmente
       la spécificité pour battre les règles desktop qui utilisent
       `nth-child(1)`, `nth-child(2)`… sur les modes center/corner. */
    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__card:nth-child(n),
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__image {
        grid-column: 1 / -1;
        min-height: 260px;
    }
}

@media (max-width: 767px) {
    .celtiis-cash-fc { padding: 28px 0; }

    /* Full width absolu sur mobile : toutes les grilles passent en 1 col,
       tous les modes confondus. `:nth-child(n)` sur cards & image des modes
       explicites pour battre les règles nth-child desktop. */
    .celtiis-cash-fc--row .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__grid,
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__grid,
    .celtiis-cash-fc__grid--split {
        grid-template-columns: 1fr;
    }

    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__card:nth-child(n),
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__card:nth-child(n),
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__card:nth-child(n),
    .celtiis-cash-fc--grid-image-right .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-center .celtiis-cash-fc__image,
    .celtiis-cash-fc--grid-image-corner .celtiis-cash-fc__image {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .celtiis-cash-fc__card {
        padding: 22px 20px;
    }
}