/* Mini-quiz de découverte.
   Le cadre (bordure, rayon, ombre, fond) vient de .home-section + .home-section--tint, comme
   toutes les autres sections de la home : le quiz ne définit plus son propre habillage, il ne
   garde que sa mise en page interne. Cela évite le décalage visuel qu'il avait avec le reste
   de la page (bordure 2,4× plus marquée, ombre plus lourde, rayon en dur hors design system). */
.home-taste-quiz {
    --quiz-primary: #BC70A4;
    --quiz-secondary: #BFD641;
    /* Même teinte d'action que la carte d'invitation : mauve de marque assombri pour rester
       lisible en blanc (5,4:1, WCAG AA). Voir le commentaire sur .home-quiz-invite. */
    --quiz-action: #9C4F86;
    --quiz-action-hover: #86406F;
    padding: 1.3rem 1.5rem 1.2rem; /* aligné sur .home-block */
    /* Le quiz apparaît après le 1er rendu (check localStorage) : entrée douce plutôt qu'un saut de page. */
    animation: taste-quiz-enter .45s cubic-bezier(.16,.8,.3,1);
}

@keyframes taste-quiz-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-taste-quiz {
        animation: none;
    }
}

.home-taste-quiz__glow {
    position: absolute;
    inset: auto -4rem -7rem auto;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(188,112,164,.26), rgba(191,214,65,.20));
    filter: blur(22px);
    pointer-events: none;
}

.home-taste-quiz__header,
.home-taste-quiz__body {
    position: relative;
    z-index: 1;
}

.home-taste-quiz__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}

.home-taste-quiz__eyebrow,
.home-taste-quiz__progress {
    margin: 0;
}

.home-taste-quiz__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #5D2856;
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-taste-quiz__progress {
    margin-top: .22rem;
    color: #69707C;
    font-size: .76rem;
    font-weight: 650;
}

.home-taste-quiz__dismiss {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(20, 24, 30, .12);
    border-radius: 50%;
    background: rgba(255,255,255,.68);
    color: #59616D;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-taste-quiz__dismiss:hover,
.home-taste-quiz__dismiss:focus-visible {
    transform: rotate(8deg);
    border-color: rgba(188,112,164,.55);
    background: #fff;
    outline: none;
}

.home-taste-quiz__title {
    max-width: 40rem;
    margin: 0;
    color: #20242A;
    font-size: clamp(1.18rem, 2.5vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.12;
}

.home-taste-quiz__subtitle {
    max-width: 48rem;
    margin: .45rem 0 1rem;
    color: #5D6673;
    font-size: .92rem;
    line-height: 1.45;
}

.home-taste-quiz__choices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
}

.home-taste-quiz__choices--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
}

/* Saveurs : on garde les 4 colonnes de la grille de base (8 saveurs = 2 lignes pleines,
   puis "peu importe" seul en 3e ligne). Une grille auto-fit s'étalait jusqu'à 7 colonnes
   sur grand écran et laissait 2 boutons orphelins. Seul le mobile est surchargé plus bas. */

/* Styles de gin / intensité : libellés plus longs, donc cartes plus larges. */
.home-taste-quiz__choices--types {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Icône de saveur (fichiers déjà présents dans wwwroot/Pictures/Flavors). */
.home-taste-quiz__choice > img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* "Peu importe" : volontairement plus discret que les vrais choix. */
.home-taste-quiz__choice--skip {
    background: rgba(255,255,255,.42);
    color: #5A626E;
    font-weight: 700;
}

.home-taste-quiz__choice--skip > i {
    color: #8A93A0;
}

/* Fil d'avancement : 3 segments, remplis au fur et à mesure. */
.home-taste-quiz__steps {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .3rem;
    margin: 0 0 .85rem;
}

.home-taste-quiz__step {
    flex: 1 1 0;
    height: 3px;
    border-radius: 999px;
    background: rgba(53, 60, 71, .12);
    transition: background .25s ease;
}

.home-taste-quiz__step.is-done {
    background: var(--quiz-action);
}

.home-taste-quiz__back {
    margin-top: .85rem;
    padding: .3rem .1rem;
    border: 0;
    background: none;
    color: #69707C;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.home-taste-quiz__back:hover,
.home-taste-quiz__back:focus-visible {
    color: #5D2856;
    text-decoration: underline;
    outline: none;
}

.home-taste-quiz__choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 64px;
    padding: .7rem .75rem;
    border: 1px solid rgba(53, 60, 71, .13);
    border-radius: 15px;
    background: rgba(255,255,255,.74);
    color: #2D343D;
    font: inherit;
    font-size: .84rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 16px -16px rgba(16,23,34,.45);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.home-taste-quiz__choice > i {
    color: #9C4D88;
    font-size: 1rem;
}

.home-taste-quiz__choice > span {
    display: grid;
    gap: .08rem;
    text-align: left;
}

.home-taste-quiz__choice strong {
    font-size: .9rem;
}

.home-taste-quiz__choice small {
    color: #6E7581;
    font-size: .73rem;
    font-weight: 650;
}

.home-taste-quiz__choice:hover,
.home-taste-quiz__choice:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(188,112,164,.52);
    background: #fff;
    box-shadow: 0 14px 24px -18px rgba(95, 42, 85, .50);
    outline: none;
}

.home-taste-quiz__loading {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 112px;
    color: #59616D;
    font-weight: 750;
}

.home-taste-quiz__loading i {
    color: #9C4D88;
}

.home-taste-quiz__results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.home-taste-quiz__gin {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .5rem .62rem;
    border: 1px solid color-mix(in oklab, var(--quiz-gin-primary) 31%, rgba(23,28,36,.13));
    border-radius: 14px;
    background: linear-gradient(145deg,
        color-mix(in oklab, var(--quiz-gin-primary) 14%, #fff),
        color-mix(in oklab, var(--quiz-gin-secondary) 11%, #fff));
    color: #252A31;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-taste-quiz__gin:hover,
.home-taste-quiz__gin:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--quiz-gin-secondary) 58%, rgba(23,28,36,.15));
    box-shadow: 0 14px 24px -18px color-mix(in oklab, var(--quiz-gin-primary) 43%, rgba(22,25,34,.40));
    outline: none;
}

.home-taste-quiz__gin-image {
    display: grid;
    place-items: center;
    height: 64px;
    border-radius: 10px;
    background: rgba(255,255,255,.58);
    overflow: hidden;
}

.home-taste-quiz__gin-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.home-taste-quiz__gin-name {
    display: -webkit-box;
    overflow: hidden;
    font-size: .79rem;
    font-weight: 850;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-taste-quiz__gin-rating {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    color: #5E6672;
    font-size: .71rem;
    font-weight: 750;
    white-space: nowrap;
}

.home-taste-quiz__gin-rating i {
    color: #B28718;
}

.home-taste-quiz__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
}

.home-taste-quiz__cta,
.home-taste-quiz__restart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: 38px;
    padding: .58rem .9rem;
    border-radius: 999px;
    font: inherit;
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
}

.home-taste-quiz__cta {
    border: 0;
    background: var(--quiz-action);
    color: #fff;
    box-shadow: 0 13px 24px -18px rgba(31, 104, 61, .78);
}

.home-taste-quiz__restart {
    border: 1px solid rgba(39,45,54,.15);
    background: rgba(255,255,255,.65);
    color: #515A66;
}

.home-taste-quiz__cta:hover,
.home-taste-quiz__cta:focus-visible,
.home-taste-quiz__restart:hover,
.home-taste-quiz__restart:focus-visible {
    filter: saturate(1.08);
    transform: translateY(-1px);
    outline: none;
}

.home-taste-quiz__cta:hover,
.home-taste-quiz__cta:focus-visible {
    background: var(--quiz-action-hover);
}

@media (max-width: 820px) {
    .home-taste-quiz__choices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-taste-quiz__results {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .home-taste-quiz {
        padding: 1.05rem;
        /* le rayon reste celui de .home-section */
    }

    .home-taste-quiz__choices,
    .home-taste-quiz__choices--two {
        grid-template-columns: 1fr;
    }

    /* Les saveurs restent sur 2 colonnes même en mobile : icône + mot court y tiennent
       largement, et une seule colonne donnerait une liste interminable. */
    .home-taste-quiz__choices--flavors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-taste-quiz__choice {
        min-height: 52px;
        justify-content: flex-start;
    }
}

/* =========================================================
   Carte d'invitation (dans le flux de la Home) + modale
   Le questionnaire n'occupe plus la page : la Home ne porte
   qu'une invitation compacte, le quiz s'ouvre à la demande.
   ========================================================= */

/* ---- Invitation : vignette flottante, volontairement non intrusive ----
   Elle ne s'affiche qu'apres que le visiteur a fait defiler une partie de la page (classe
   .gtl-quiz-ready posee par _Host.cshtml) : pas d'interruption a l'arrivee. Elle ne bloque
   aucun contenu, se ferme d'un clic, et reste sous la banniere cookies en z-index. */
.home-quiz-invite {
    /* Mauve de marque assombri. --gin-primary (#BC70A4) tel quel ne donne que 3,5:1 avec du texte
       blanc, sous le seuil WCAG AA de 4,5:1 pour ce corps de texte ; ces deux teintes gardent
       l'identité tout en passant le contraste (5,4:1 et 6,4:1). Le vert #2d8752 precedent
       n'appartenait à aucun token de la charte. */
    --quiz-action: #9C4F86;
    --quiz-action-hover: #86406F;

    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090; /* au-dessus de la navbar (1080), sous la modale du quiz (2100) et la banniere cookies (3000) */
    width: min(21rem, calc(100vw - 2rem));
    overflow: hidden;
    padding: .95rem 1.05rem 1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(45, 34, 51, .10);
    box-shadow: 0 18px 40px -20px rgba(45, 34, 51, .45);

    /* Etat par defaut : hors ecran et inerte tant que le declencheur n'a pas eu lieu. */
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, bottom .2s ease;
}

body.gtl-quiz-ready .home-quiz-invite {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* La banniere cookies occupe toute la largeur en bas : on remonte la vignette tant qu'elle est la. */
body:has(.gtl-cookie-banner--visible) .home-quiz-invite {
    bottom: 7.5rem;
}

@media (max-width: 575.98px) {
    .home-quiz-invite {
        right: .75rem;
        left: .75rem;
        bottom: .75rem;
        width: auto;
        padding: .8rem .9rem .85rem;
    }

    /* Sur mobile la vignette doit rester une vignette : on garde le titre et l'action. */
    .home-quiz-invite__sub {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-quiz-invite {
        transition: none;
    }
}

.home-quiz-invite__glow {
    position: absolute;
    inset: auto -5rem -8rem auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(188,112,164,.20), rgba(191,214,65,.16));
    filter: blur(26px);
    pointer-events: none;
}

/* Format vignette : empilement vertical, l'ancienne disposition en bandeau large ne s'applique plus. */
.home-quiz-invite__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
}

.home-quiz-invite__title {
    margin: .18rem 0 .2rem;
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.3;
    color: #2D2233;
}

.home-quiz-invite__sub {
    margin: 0;
    color: #5F6672;
    font-size: .84rem;
    line-height: 1.4;
}

.home-quiz-invite__actions {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    width: 100%;
}

.home-quiz-invite__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .62rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--quiz-action);
    color: #fff;
    font: inherit;
    font-size: .87rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 13px 24px -18px rgba(31, 104, 61, .78);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.home-quiz-invite__cta:hover,
.home-quiz-invite__cta:focus-visible {
    transform: translateY(-1px);
    background: var(--quiz-action-hover);
    outline: none;
}

.home-quiz-invite__hide {
    border: 0;
    background: none;
    padding: .4rem .2rem;
    color: #6E7581;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

.home-quiz-invite__hide:hover,
.home-quiz-invite__hide:focus-visible {
    color: #5D2856;
    text-decoration: underline;
    outline: none;
}

/* ---- Modale ---- */
.home-quiz-modal {
    position: fixed;
    inset: 0;
    /* Doit passer au-dessus de la navbar (.custom-navbar.main-nav, 1080) et de ses suggestions
       de recherche (2000), tout en restant sous la banniere cookies (3000) et le controle d'age
       (9999). Ce z-index n'a d'effet que parce que la modale est rendue hors de .home-shell,
       qui est un contexte d'empilement isole (isolation: isolate). */
    z-index: 2100;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(24, 18, 26, .58);
    backdrop-filter: blur(3px);
    animation: quiz-modal-fade .2s ease;
    overflow-y: auto;
}

.home-quiz-modal__panel {
    width: min(46rem, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    border: 1px solid rgba(188, 112, 164, .16);
    border-radius: var(--radius-xl, 28px);
    background:
        linear-gradient(168deg, rgba(255,255,255,.98) 0%, #fdfbfd 42%, #faf6fb 100%);
    box-shadow: 0 32px 70px -30px rgba(38, 22, 40, .55);
    animation: quiz-modal-rise .26s cubic-bezier(.16,.8,.3,1);
}

/* Dans la modale, le quiz n'a plus besoin de son animation d'entrée propre. */
.home-quiz-modal__panel.home-taste-quiz {
    animation: quiz-modal-rise .26s cubic-bezier(.16,.8,.3,1);
}

@keyframes quiz-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes quiz-modal-rise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .home-quiz-modal,
    .home-quiz-modal__panel,
    .home-quiz-modal__panel.home-taste-quiz {
        animation: none;
    }
}

/* Bloque le défilement de la page derrière la modale. */
body.has-quiz-modal {
    overflow: hidden;
}

@media (max-width: 640px) {
    .home-quiz-invite__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .home-quiz-invite__actions {
        width: 100%;
    }

    .home-quiz-invite__cta {
        flex: 1 1 auto;
        justify-content: center;
    }

    .home-quiz-modal {
        padding: .75rem;
        align-items: end;
    }

    .home-quiz-modal__panel {
        max-height: calc(100vh - 1.5rem);
    }
}