/* Celtiis Home Connect - Cartes Flybox (tarifs) */

.celtiis-flybox {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 420px));
    gap: 24px;
    width: 100%;
    justify-content: center;
    font-family: 'Gotham', sans-serif;
    align-items: stretch;
}

.celtiis-flybox__card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px 34px;
    border-radius: 18px;
    background-color: #FFFFFF;
    border: 1px solid #1D3D704D;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.celtiis-flybox__card:hover {
    border-color: var(--bs-primary);
    transform: scale(1.04) translateY(-3px);
}

.celtiis-flybox__card.is-featured {
    background-color: #8DC63F80;
    border-color: transparent;
}

.celtiis-flybox__title {
    text-align: center;
    color: #1C3B71;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    padding: 8px 0 30px;
}

/* Trait de séparation : relie les deux bords extérieurs (par-dessus la bordure) */
.celtiis-flybox .celtiis-flybox__divider {
    display: block;
    border: 0;
    height: 1.5px;
    width: auto;
    margin: 0 -31px 28px;
    background-color: #e8ecf1;
}

.celtiis-flybox .celtiis-flybox__card.is-featured .celtiis-flybox__divider {
    background-color: #ffff;
}

.celtiis-flybox__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.celtiis-flybox__amount {
    color: #8DC63F;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.celtiis-flybox__card.is-featured .celtiis-flybox__amount {
    color: #1C3B71 !important;
}

.celtiis-flybox__suffix {
    color: #1C3B71;
    font-size: 16px;
    font-weight: 500;
}

.celtiis-flybox__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 26px;
    border-radius: 999px;
    background-color: #8DC63F;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.25s ease, transform 0.25s ease;
}

.celtiis-flybox__card.is-featured .celtiis-flybox__btn {
    background-color: #1C3B71;
    color: #FFFFFF;
}

.celtiis-flybox__btn:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.celtiis-flybox__features-title {
    color: #1C3B71;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.celtiis-flybox__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.celtiis-flybox__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1C3B71;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.celtiis-flybox__feature::before {
    content: "";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M16.3333%2024.5C22.1322%2024.5%2026.8333%2019.799%2026.8333%2014C26.8333%208.20101%2022.1322%203.5%2016.3333%203.5C10.5343%203.5%205.83325%208.20101%205.83325%2014C5.83325%2019.799%2010.5343%2024.5%2016.3333%2024.5Z%22%20fill%3D%22%23D7E184%22%2F%3E%0A%3Cpath%20d%3D%22M14%202.625C7.728%202.625%202.625%207.728%202.625%2014C2.625%2020.272%207.728%2025.375%2014%2025.375C20.272%2025.375%2025.375%2020.272%2025.375%2014C25.375%207.728%2020.272%202.625%2014%202.625ZM14%2023.625C8.69283%2023.625%204.375%2019.3072%204.375%2014C4.375%208.69283%208.69283%204.375%2014%204.375C19.3072%204.375%2023.625%208.69283%2023.625%2014C23.625%2019.3072%2019.3072%2023.625%2014%2023.625Z%22%20fill%3D%22%23112D55%22%2F%3E%0A%3Cpath%20d%3D%22M17.9947%209.93999L12.7751%2016.2038L9.95173%2013.3817C9.60989%2013.0398%209.05573%2013.0398%208.71389%2013.3817C8.37206%2013.7235%208.37206%2014.2777%208.71389%2014.6195L11.7612%2017.6668C12.0331%2017.941%2012.4076%2018.095%2012.7937%2018.095H12.8567C13.2662%2018.0763%2013.6512%2017.8862%2013.9137%2017.5712L19.3376%2011.0612C19.6479%2010.6902%2019.5977%2010.1383%2019.2256%209.82916C18.8534%209.51999%2018.3027%209.56899%2017.9924%209.94116L17.9947%209.93999Z%22%20fill%3D%22%23112D55%22%2F%3E%0A%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.celtiis-flybox__card.is-featured .celtiis-flybox__feature::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M16.333%2024.5C22.132%2024.5%2026.833%2019.799%2026.833%2014C26.833%208.20101%2022.132%203.5%2016.333%203.5C10.534%203.5%205.83301%208.20101%205.83301%2014C5.83301%2019.799%2010.534%2024.5%2016.333%2024.5Z%22%20fill%3D%22%231D3D70%22%2F%3E%0A%3Cpath%20d%3D%22M14%202.625C7.728%202.625%202.625%207.728%202.625%2014C2.625%2020.272%207.728%2025.375%2014%2025.375C20.272%2025.375%2025.375%2020.272%2025.375%2014C25.375%207.728%2020.272%202.625%2014%202.625ZM14%2023.625C8.69283%2023.625%204.375%2019.3072%204.375%2014C4.375%208.69283%208.69283%204.375%2014%204.375C19.3072%204.375%2023.625%208.69283%2023.625%2014C23.625%2019.3072%2019.3072%2023.625%2014%2023.625Z%22%20fill%3D%22white%22%2F%3E%0A%3Cpath%20d%3D%22M17.9942%209.93987L12.7746%2016.2037L9.95124%2013.3815C9.60941%2013.0397%209.05524%2013.0397%208.71341%2013.3815C8.37157%2013.7234%208.37157%2014.2775%208.71341%2014.6194L11.7607%2017.6667C12.0326%2017.9409%2012.4071%2018.0949%2012.7932%2018.0949H12.8562C13.2657%2018.0762%2013.6507%2017.886%2013.9132%2017.571L19.3371%2011.061C19.6474%2010.69%2019.5972%2010.1382%2019.2251%209.82904C18.8529%209.51987%2018.3022%209.56887%2017.9919%209.94104L17.9942%209.93987Z%22%20fill%3D%22%23BDD665%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* Responsive */
@media (max-width: 1024px) {
    .celtiis-flybox {
        grid-template-columns: repeat(2, minmax(0, 420px));
    }
}

@media (max-width: 600px) {
    .celtiis-flybox {
        grid-template-columns: 1fr;
    }
}