/* Celtiis Home Connect - Avantages fibre */

.celtiis-hf {
    width: 100%;
    font-family: 'Gotham', sans-serif;
}

.celtiis-hf__title {
    margin: 0 0 38px;
    color: #1C3B71;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.celtiis-hf__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 36px;
}

.celtiis-hf__item {
    text-align: left;
}

.celtiis-hf__icon {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    font-size: 34px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Toutes les icônes sont peintes via ::before en data:image/svg+xml */
.celtiis-hf__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.celtiis-hf__item:nth-child(4) .celtiis-hf__icon {
    width: 45px;
    height: 45px;
}

.celtiis-hf__item:nth-child(1) .celtiis-hf__icon::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2260%22%20viewBox%3D%220%200%2038%2060%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M2.69043%2034.9785L21.5251%202.69043V24.2158H34.9785L16.1438%2056.5039V34.9785H2.69043Z%22%20stroke%3D%22%238DC63F%22%20stroke-width%3D%225.38134%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
}

.celtiis-hf__item:nth-child(2) .celtiis-hf__icon::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2254%22%20height%3D%2254%22%20viewBox%3D%220%200%2054%2054%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M45.7412%2021.5251V45.7412C45.7412%2048.7132%2043.3319%2051.1225%2040.3598%2051.1225H13.4531C10.4811%2051.1225%208.07177%2048.7132%208.07177%2045.7412V21.5251M51.1225%2026.9065L26.9065%202.69043L2.69043%2026.9065%22%20stroke%3D%22%238DC63F%22%20stroke-width%3D%225.38134%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
}

.celtiis-hf__item:nth-child(3) .celtiis-hf__icon::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%238DC63F'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.12%204.18%202%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'%2F%3E%3C%2Fsvg%3E");
}

.celtiis-hf__item:nth-child(4) .celtiis-hf__icon::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M21.5254%2026.904V18.832C21.5254%2012.888%2026.344%208.06934%2032.2881%208.06934C38.2321%208.06934%2043.0508%2012.888%2043.0508%2018.832V26.904%22%20stroke%3D%22%238DC63F%22%20stroke-width%3D%225.38134%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M13.4531%2026.9053H51.1225V51.1213C51.1225%2054.0933%2048.7132%2056.5027%2045.7412%2056.5027H18.8345C15.8624%2056.5027%2013.4531%2054.0933%2013.4531%2051.1213V26.9053Z%22%20stroke%3D%22%238DC63F%22%20stroke-width%3D%225.38134%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3Crect%20x%3D%2239.0146%22%20y%3D%2241.7051%22%20width%3D%220.0266576%22%20height%3D%220.0266576%22%20stroke%3D%22%238DC63F%22%20stroke-width%3D%228.07201%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");
}

.celtiis-hf__icon--svg::before {
    background-image: var(--hf-icon-url) !important;
}

.celtiis-hf__item-title {
    margin: 0 0 5px;
    color: #1C3B71;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.celtiis-hf__desc {
    margin: 0;
    color: #7D8AA0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 26ch;
}

/* Responsive */
@media (max-width: 1024px) {
    .celtiis-hf__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 32px;
    }
}

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

    .celtiis-hf__desc {
        max-width: none;
    }
}