/* LEAVAH PARIS — Popup d'intro au quiz (première visite)
   Style identique aux emails : fond BLANC, tour (bordure) NOIR, serif,
   eyebrow uppercase, CTA noir plein (façon .btn-primary email).
   Modal HTML5 <dialog id="quizIntroPopup"> — cf. assets/js/quiz-intro-popup.js */

.quiz-intro {
    border: none;
    padding: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    overflow: visible;
    /* Centrage : <dialog> ouvert en modal est positionné via margin auto */
    margin: auto;
}

/* Backdrop natif du <dialog> */
.quiz-intro::backdrop {
    background: rgba(20, 18, 15, 0.55);
    backdrop-filter: blur(2px);
}

/* Encadré blanc, bordure noire */
.quiz-intro__box {
    position: relative;
    width: min(92vw, 460px);
    box-sizing: border-box;
    padding: 52px 44px 48px;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    text-align: center;
    font-family: var(--font-body, 'Lusitana', Georgia, serif);
}

/* Animation d'entrée (quand le dialog reçoit [open]) */
.quiz-intro[open] .quiz-intro__box {
    animation: quizIntroIn 0.45s ease both;
}
@keyframes quizIntroIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

.quiz-intro__close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 26px;
    line-height: 1;
    color: #aaaaaa;
    background: none;
    border: none;
    padding: 4px 8px;
    transition: color var(--transition, 0.3s ease);
}
.quiz-intro__close:hover { color: #1a1a1a; }

.quiz-intro__eyebrow {
    margin: 0 0 22px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #1a1a1a;
}

.quiz-intro__title {
    margin: 0 0 18px;
    font-family: var(--font-title, 'Lusitana', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #1a1a1a;
}

.quiz-intro__text {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
}

/* CTA noir plein — façon .btn-primary des emails */
.quiz-intro__cta {
    display: inline-block;
    padding: 15px 40px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid #1a1a1a;
    transition: background var(--transition, 0.3s ease), color var(--transition, 0.3s ease);
}
.quiz-intro__cta:hover {
    background: #ffffff;
    color: #1a1a1a;
}

/* Responsive — mobile */
@media (max-width: 480px) {
    .quiz-intro__box   { padding: 44px 26px 40px; }
    .quiz-intro__title { font-size: 23px; }
    .quiz-intro__text  { font-size: 14px; }
    .quiz-intro__cta   { padding: 14px 32px; width: 100%; box-sizing: border-box; }
}