/* =========================================
   PAGE BORNES (../html/bornes.html)
   ========================================= */

/* ==== HABILITE IRVE SUR LES TROIS NIVEAUX ==== */
.bornes .solutions-grid {
    flex-wrap: nowrap;
    max-width: 1240px;
}

.bornes .solution {
    flex: 1 1 0;
}

.bornes .solution.is-open {
    box-shadow: 0 22px 55px color-mix(in srgb, var(--couleur-noir) 28%, transparent);
}

.bornes .solutions-grid.has-open .solution.is-open {
    flex-grow: 2.6;
}

.bornes .solutions-grid.has-open .solution:not(.is-open) {
    flex-grow: 1;
    opacity: .5;
}

@media (max-width: 1024px) {
    .bornes .solutions-grid { flex-wrap: wrap; }
    .bornes .solution { flex: 1 1 calc(50% - 20px); min-width: 0; }
    .bornes .solutions-grid.has-open .solution.is-open { flex-basis: 100%; }
    .bornes .solutions-grid.has-open .solution:not(.is-open) { opacity: 1; }
}

@media (max-width: 560px) {
    .bornes .solution { flex: 1 1 100%; }
}


/* ==== PLUS QU'UNE PRISE : UNE BORNE QUI PENSE ==== */
.smart {
    position: relative;
    z-index: 1;
    margin-top: -40px;
    padding-top: calc(70px + 40px);
    background: var(--couleur-jaune-casse);
    color: var(--couleur-noir);
}

.smart-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(28px, 4vh, 44px);
}


.smart-title {
    font-size: 64px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -.05em;
    margin: 12px 0 20px;
}

.smart-intro {
    font-size: 18px;
    margin: 0;
    color: var(--couleur-gris);
}

.smart-list {
    max-width: 760px;
    margin: 0 auto;
}

.smart-item {
    background: none;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--couleur-noir) 10%, transparent);
    padding: 0;
}

.smart-list .faq-question {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.smart-item .faq-question::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--couleur-noir);
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}

.smart-item .faq-question:hover::after,
.smart-item.is-open .faq-question::after {
    width: 100%;
}

.smart-name {
    font-size: clamp(1.15rem, 1.6vw, 1.6rem);
    font-weight: 400;
    color: #5b5b5b;
    transition: color .3s ease, transform .3s ease;
}

.smart-item .faq-question:hover .smart-name { color: var(--couleur-noir); }

.smart-item.is-open .smart-name {
    color: var(--couleur-noir);
    transform: translateX(4px);
}

.smart-item.is-open {
    background: none;
    border-color: color-mix(in srgb, var(--couleur-noir) 10%, transparent);
}

.smart-item.is-open .ico-plus  { opacity: 0; transform: rotate(90deg); }
.smart-item.is-open .ico-moins { opacity: 1; transform: rotate(0); }

.smart-list .faq-answer {
    background: none;
    border: 0;
}

.smart-list .faq-answer p {
    margin: 0;
    padding: 12px 0 26px;
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--couleur-gris);
}


/* ==== A DOMICILE OU SUR VOTRE SITE ==== */
.bornes .garantie-card-bottom .garantie-content {
    top: auto;
    bottom: 0;
    padding-top: clamp(28px, 3vw, 44px);
    padding-bottom: clamp(38px, 3.5vw, 54px);
}

.bornes .garantie-card-bottom::after {
    background: linear-gradient(to top,
        color-mix(in srgb, var(--couleur-noir) 35%, transparent) 0%,
        color-mix(in srgb, var(--couleur-noir) 5%, transparent) 45%,
        transparent 70%);
}

@media (min-width: 768px) and (max-width: 1024px) {
    .smart-title {
        font-size: clamp(38px, 5.2vw, 52px);
    }
}

@media (max-width: 767px) {
    .smart-title {
        font-size: clamp(40px, 8vw, 56px);
    }

    .smart-head {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .smart-intro {
        font-size: 17px;
    }
}