/* ============================================================
   BARCODIS — GUIDE DE CHOIX PRODUIT
   Layout ACF : guide_choix_produit
   ============================================================ */

.guide {
    --guide-blue: #0060FF;
    --guide-night: #0F3DA8;
    --guide-green: #0AC980;
    --guide-ink: #1C1831;
    --guide-light: #F6F6F7;

    padding: clamp(50px, 7vw, 90px) 24px;
    background: var(--guide-light);
}


/* ============================================================
   CARTE PRINCIPALE
   ============================================================ */

.guide__card {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(15, 61, 168, .08);
}


/* ============================================================
   INTRODUCTION
   ============================================================ */

.guide__start {
    padding: 52px 34px;
    text-align: center;
	justify-items: center;
}

.guide__start .badge {
    display: none;
}

.guide__start h3 {
    max-width: 560px;
    margin: 0 auto 14px;
    color: var(--guide-blue);
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.2;
    text-transform: none;
}

.guide__start > p {
    max-width: 520px;
    margin: 0 auto 26px;
    color: rgba(28, 24, 49, .70);
    font-size: 16px;
    line-height: 1.55;
}

.guide__meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-bottom: 32px;
    color: rgba(28, 24, 49, .60);
    font-size: 14px;
    font-weight: 700;
}

.guide__meta i {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-style: normal;
}

.guide__meta svg {
    width: 18px;
    height: 18px;
    stroke: var(--guide-green);
}


/* ============================================================
   FORMULAIRE
   ============================================================ */

.guide__form {
    margin: 0;
    padding: 0;
}


/* Bandeau volontairement masqué :
   comportement identique au prototype fourni */

.guide__band {
    display: none;
}


/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */

.guide__progress {
    height: 6px;
    background: rgba(28, 24, 49, .08);
}

.guide__progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--guide-green);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   QUESTIONS
   ============================================================ */

.guide__step {
    min-width: 0;
    margin: 0;
    padding: 38px 34px 34px;
    border: 0;
}

.guide__step[hidden],
.guide__results[hidden],
.guide__start[hidden] {
    display: none !important;
}

.guide__q {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    color: var(--guide-night);
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.guide__hint {
    margin: 0 0 26px;
    color: rgba(28, 24, 49, .60);
    font-size: 15px;
    line-height: 1.5;
}


/* ============================================================
   GRILLE DES RÉPONSES
   ============================================================ */

.guide__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.guide__opt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;

    width: 100%;
    padding: 20px;

    background: #fff;
    border: 1.5px solid #e4e7f0;
    border-radius: 16px;

    text-align: left;
    cursor: pointer;

    transition:
        border-color .2s,
        background .2s,
        box-shadow .2s,
        transform .2s;
}

.guide__opt:hover {
    border-color: var(--guide-blue);
    background: #f4f8ff;
    transform: translateY(-2px);
}

.guide__opt.is-selected {
    border-color: var(--guide-blue);
    background: #f0f5ff;
    box-shadow: 0 0 0 3px rgba(0, 96, 255, .12);
}


/* ============================================================
   RADIO ACCESSIBLE MAIS INVISIBLE
   ============================================================ */

.guide__radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
    border: 0 !important;
}

.guide__opt:focus-within {
    outline: 3px solid rgba(0, 96, 255, .22);
    outline-offset: 2px;
}


/* Support moderne sans dépendre uniquement du JS */

.guide__opt:has(.guide__radio:checked) {
    border-color: var(--guide-blue);
    background: #f0f5ff;
    box-shadow: 0 0 0 3px rgba(0, 96, 255, .12);
}


/* ============================================================
   ICÔNES DES RÉPONSES
   ============================================================ */

.guide__opt .oico {
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 12px;
    background: rgba(0, 96, 255, .09);

    transition:
        background .2s,
        color .2s;
}

.guide__opt .oico svg {
    width: 24px;
    height: 24px;
    stroke: var(--guide-blue);

    transition: stroke .2s;
}

.guide__opt:hover .oico,
.guide__opt.is-selected .oico,
.guide__opt:has(.guide__radio:checked) .oico {
    background: var(--guide-blue);
}

.guide__opt:hover .oico svg,
.guide__opt.is-selected .oico svg,
.guide__opt:has(.guide__radio:checked) .oico svg {
    stroke: #fff;
}


/* ============================================================
   TEXTE DES RÉPONSES
   ============================================================ */

.guide__opt .otxt {
    display: block;
    min-width: 0;
}

.guide__opt .otxt strong {
    display: block;
    margin-bottom: 3px;
    color: var(--guide-ink);
    font-size: 16px;
    line-height: 1.35;
}

.guide__opt .otxt > span {
    display: block;
    color: rgba(28, 24, 49, .62);
    font-size: 14px;
    line-height: 1.4;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.guide__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 24px;
    margin-top: 28px;
}

.guide__form > .guide__nav {
    padding: 0 34px 30px;
    margin-top: 0;
}

.guide__restart {
    padding: 22px 34px;
    margin-top: 0;
}


/* On reprend ici uniquement le style du lien Précédent /
   Recommencer, car ce n'est pas le bouton principal KN Theme */

.guide .bouton--ghost {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 0;

    background: transparent;
    border: 0;

    color: var(--guide-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: color .3s;
}

.guide .bouton--ghost::before {
    content: "";

    width: 4px;
    height: 4px;

    border: solid currentColor;
    border-width: 3px 0 0 3px;

    transform: rotate(-45deg);

    transition: margin .3s;
}

.guide .bouton--ghost:hover {
    color: var(--guide-blue);
}

.guide .bouton--ghost:hover::before {
    margin-right: 6px;
}


/* ============================================================
   COMPORTEMENT JS
   ============================================================ */

.guide__js-only {
    display: none !important;
}

.guide--enhanced .guide__progress.guide__js-only {
    display: block !important;
}

.guide--enhanced .guide__nav.guide__js-only {
    display: flex !important;
}


/* ============================================================
   RÉSULTATS
   ============================================================ */

.guide__results-title {
    margin: 0;
    padding: 30px 34px 0;

    color: var(--guide-night);
    font-size: 22px;
    line-height: 1.3;
    text-transform: none;
}

.guide--enhanced .guide__results-title {
    display: none;
}

.guide__result-option {
    border-top: 1px solid rgba(28, 24, 49, .08);
}

.guide__result-option:first-of-type {
    border-top: 0;
}


/* ============================================================
   CARTE PRODUIT RECOMMANDÉ
   ============================================================ */

.guide__reco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;

    padding: 34px;
}

.guide__reco .rimg {
    flex: 0 1 310px;

    margin: 0 auto;
    padding: 14px;

    background: #fff;
    border-radius: 16px;
}

.guide__reco .rimg img {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 320px;

    margin: 0 auto;

    object-fit: contain;
}

.guide__reco .rinfo {
    flex: 1 1 320px;
    min-width: 0;
}

.guide__reco .rinfo h3 {
    margin: 0 0 10px;

    color: var(--guide-blue);
    font-size: 22px;
    line-height: 1.25;
    text-transform: none;
}

.guide__reco .rinfo > p {
    margin: 0 0 16px;

    color: rgba(28, 24, 49, .75);
    font-size: 16px;
    line-height: 1.5;
}


/* ============================================================
   LISTE DES AVANTAGES
   ============================================================ */

.guide__reco ul {
    display: grid;
    gap: 10px;

    margin: 0 0 24px;
    padding: 0;

    list-style: none;
}

.guide__reco ul li {
    position: relative;

    padding-left: 28px;

    color: var(--guide-ink);
    font-size: 15px;
    line-height: 1.45;
}

.guide__reco ul li::before {
    content: "";

    position: absolute;
    top: 3px;
    left: 0;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    background: var(--guide-green);

    -webkit-mask:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 12l5 5L20 6'/></svg>")
        center / 12px no-repeat;

    mask:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M5 12l5 5L20 6'/></svg>")
        center / 12px no-repeat;
}


/* ============================================================
   CTA PRODUIT
   ============================================================ */

.guide__reco .ractions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 16px 24px;
}


/* ============================================================
   NOTE VERTE FINALE
   ============================================================ */

.guide__note {
    padding: 20px 34px;

    background: var(--guide-green);
    border-top: 1px solid rgba(28, 24, 49, .06);

    color: #fff;
    font-size: 14px;
    line-height: 1.55;
}

.guide__note strong {
    color: #fff;
}

.guide__note .bouton--link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-left: 10px;

    color: #fff;
    font-weight: 700;
    text-decoration: none;

    transition: gap .3s;
}

.guide__note .bouton--link::after {
    content: "";

    width: 8px;
    height: 8px;

    border: solid currentColor;
    border-width: 3px 3px 0 0;

    transform: rotate(45deg);
}

.guide__note .bouton--link:hover {
    gap: 18px;
}


/* ============================================================
   FALLBACK SANS JS
   ============================================================ */

.guide__noscript-note {
    margin: 0;
    padding: 18px 34px;

    background: #fff7e8;
    border-top: 1px solid rgba(28, 24, 49, .08);

    color: var(--guide-ink);
}


/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */

.guide .sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
    border: 0 !important;
}


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 820px) {

    .guide__reco {
        align-items: flex-start;
    }

    .guide__reco .rimg {
        flex-basis: 260px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {

    .guide {
        padding:
            clamp(40px, 10vw, 60px)
            12px;
    }

    .guide__card {
        border-radius: 16px;
    }


    /* Intro */

    .guide__start {
        padding: 38px 22px;
    }

    .guide__start h3 {
        font-size: 24px;
    }

    .guide__meta {
        flex-direction: column;
        align-items: center;

        gap: 10px;
    }


    /* Questions */

    .guide__step {
        padding: 30px 22px 26px;
    }

    .guide__options {
        grid-template-columns: 1fr;
    }

    .guide__opt {
        padding: 17px;
    }

    .guide__opt .oico {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }


    /* Navigation */

    .guide__form > .guide__nav {
        padding:
            0
            22px
            26px;
    }


    /* Résultat */

    .guide__results-title {
        padding-right: 22px;
        padding-left: 22px;
    }

    .guide__reco {
        display: block;

        padding: 26px 22px;
    }

    .guide__reco .rimg {
        max-width: 260px;
        margin-bottom: 24px;
    }

    .guide__reco .rinfo h3 {
        font-size: 20px;
    }

    .guide__reco .ractions {
        display: block;
    }

    .guide__reco .ractions .bouton {
        width: 100%;
    }


    /* Zone verte */

    .guide__note {
        padding:
            20px
            22px;
    }

    .guide__note .bouton--link {
        display: flex;

        width: fit-content;

        margin:
            12px
            0
            0;
    }

    .guide__restart {
        padding:
            22px;
    }

}


/* ============================================================
   RÉDUCTION DES ANIMATIONS
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .guide *,
    .guide *::before,
    .guide *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

}