/**
 * Wizard Recommandation B2B - styles COMPLÉMENTAIRES.
 *
 * Cards services : l'icône du service reste affichée une fois cochée ; la
 * sélection se lit à la bordure et à l'ombre (page-empty-assistance.css).
 */

/* Force le masquage quand le JS pose `hidden` (l'attribut HTML est écrasé
   par le display: flex de la card sinon → toutes les cats restent visibles). */
.cb-static-recommendation__service[hidden] {
    display: none !important;
}

.cb-static-recommendation__no-cats {
    margin: 24px 0 0;
    padding: 14px 18px;
    background: #eef2fb;
    border: 1px solid rgba(0, 47, 135, 0.15);
    border-radius: 8px;
    color: #002f87;
    font-size: 14px;
    text-align: center;
}

/**
 * Styles restants (erreur AJAX, résultats, etc.)
 * Le design de base vient de page-empty-assistance.css (classes
 * .cb-static-recommendation__*). Ce fichier n'ajoute que ce qui manque :
 *   - .cb-static-recommendation__error   (message erreur AJAX)
 *   - .cb-static-recommendation__legal   (mention RGPD)
 *   - .cb-static-recommendation__success (bannière étape résultats)
 *   - .cb-static-recommendation__results (grille cartes matchées)
 *   - .cb-static-recommendation__panel--results (variante panel)
 *   - .cb-static-recommendation__footer--center
 *
 * Les couleurs sont alignées sur les vars du design de base si présentes,
 * sinon fallback brand (#002f87 navy / #8DC63F vert).
 */

/* Erreur AJAX */
.cb-static-recommendation__error {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: #fbeaea;
    border: 1px solid #d93b3b;
    border-radius: 8px;
    color: #7a1d1d;
    font-size: 13.5px;
}

/* Mention légale */
.cb-static-recommendation__legal {
    margin: 20px 0 0;
    font-size: 12.5px;
    color: #54627F;
    line-height: 1.5;
}

/* Panel résultats */
.cb-static-recommendation__panel--results {
    text-align: center;
}

.cb-static-recommendation.is-results .cb-static-recommendation__steps {
    display: none;
}

.cb-static-recommendation__success {
    margin-bottom: 32px;
    padding-top: 32px;
}

.cb-static-recommendation__success h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #002f87;
}

.cb-static-recommendation__success p {
    margin: 0;
    color: #54627F;
    font-size: 15px;
}

.cb-static-recommendation__footer--center {
    justify-content: center !important;
}

/* Grille cartes matchées */
.cb-static-recommendation__results {
    margin: 0 0 24px;
    padding: 0 44px;
}

.cb-reco__results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .cb-reco__results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cb-static-recommendation__success {
        padding-top: 32px;
    }

    .cb-reco__results-grid {
        grid-template-columns: 1fr;
    }
}

.cb-reco__result-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e1e5ed;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cb-reco__result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(0, 47, 135, 0.18);
}

.cb-reco__result-image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dce3f0;
}

.cb-reco__result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cb-reco__result-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px 20px;
    flex: 1;
}

.cb-reco__result-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.cb-reco__result-title a {
    color: #002f87;
    text-decoration: none;
}

.cb-reco__result-title a:hover { text-decoration: underline; }

.cb-reco__result-excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #54627F;
    flex: 1;
}

.cb-reco__result-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 18px;
    background: #002f87;
    color: #fff;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.cb-reco__result-cta:hover {
    color: #fff;
    filter: brightness(1.1);
}

/* Card variante "offer" (celtiis_biz_offer) */

.cb-reco__result-card--offer {
    position: relative;
    border: 2px solid #002f87;
}

.cb-reco__result-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #002f87;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 6px 14px;
    border-bottom-left-radius: 10px;
    z-index: 2;
}

.cb-reco__result-card--offer .cb-reco__result-title {
    padding-right: 80px; /* place pour le badge */
}

.cb-reco__result-price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    background: #002f87;
    color: #fff;
    padding: 16px 20px;
    border-radius: 10px;
    line-height: 1.1;
}

.cb-reco__result-price-amount {
    font-size: 26px;
    font-weight: 800;
    color: #8DC63F;
    letter-spacing: 0.3px;
}

.cb-reco__result-price-currency {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.cb-reco__result-price-suffix {
    flex: 1 1 100%;
    font-size: 13.5px;
    font-weight: 500;
    color: #fff;
    margin-top: 2px;
}

.cb-reco__result-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cb-reco__result-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #4a5160;
    line-height: 1.4;
}

.cb-reco__result-features li i {
    color: #8DC63F;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Carte d'offre : même coche et même rythme que les vraies cartes Fibre / Flybox
   (celtiis-business-kit, fiber-cards.css). */
.cb-reco__result-card--offer .cb-reco__result-features {
    gap: 10px;
}

.cb-reco__result-card--offer .cb-reco__result-features li {
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}

.cb-reco__result-card--offer .cb-reco__result-features li::before {
    content: "";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: center / contain no-repeat 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.3359%2024.5C22.1349%2024.5%2026.8359%2019.799%2026.8359%2014C26.8359%208.20101%2022.1349%203.5%2016.3359%203.5C10.5369%203.5%205.83594%208.20101%205.83594%2014C5.83594%2019.799%2010.5369%2024.5%2016.3359%2024.5Z%22%20fill%3D%22%236FBE44%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%23002F87%22%2F%3E%0A%3Cpath%20d%3D%22M17.9981%209.93987L12.7785%2016.2037L9.95515%2013.3815C9.61331%2013.0397%209.05915%2013.0397%208.71731%2013.3815C8.37548%2013.7234%208.37548%2014.2775%208.71731%2014.6194L11.7646%2017.6667C12.0365%2017.9409%2012.411%2018.0949%2012.7971%2018.0949H12.8601C13.2696%2018.0762%2013.6546%2017.886%2013.9171%2017.571L19.341%2011.061C19.6513%2010.69%2019.6011%2010.1382%2019.229%209.82904C18.8568%209.51987%2018.3061%209.56887%2017.9958%209.94104L17.9981%209.93987Z%22%20fill%3D%22%23002F87%22%2F%3E%0A%3C%2Fsvg%3E");
}

@media (max-width: 767px) {
    .cb-static-recommendation__results {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* Bloc Assistance en bas de page (même rendu que Blog / Téléchargements) */
.cb-static-recommendation__assistance {
    background: #fff;
    padding-top: 10px;
    padding-bottom: 25px;
}

/* Carte d'offre : rappel de la solution à laquelle l'offre appartient. */
.cb-reco__result-solution {
    display: block;
    margin-bottom: 4px;
    color: #7a869a;
    font-size: 13px;
    font-weight: 500;
}

/* Anti-robot (captcha.js) : même largeur que les champs de contact. */
.cb-static-recommendation__captcha {
    max-width: 760px;
    margin: 0 auto;
}