/* ========================================================= GABARIT PAGES QUIZ DE MATIÈRE — CSS mutualisé (widget + features + reco). Chargé sur les 5 pages. Le cours, la FAQ et le CTA sont auto-contenus par page (leur CSS/JS inline). Données du quiz injectées par page (window.SBPJ_QUIZ_DATA / SBPJ_QUIZ_EVAL). Police système, @import retirés. ========================================================= */ /* Rythme : chaque section de contenu est enveloppée dans .sbpj-quiz-sec. */ .sbpj-quiz > .sbpj-quiz-sec { padding-top: var(--sbpj-section-pad-y); padding-bottom: var(--sbpj-section-pad-y); } /* Les bulles décoratives .sbpj-starry dépassent volontairement ; leur boîte de clip tombe sur une fraction de pixel et laissait 1px de défilement horizontal à 768px. `clip` borne la section sans créer de conteneur de défilement. ⚠️ Sélecteur volontairement NON limité à « > » : sur quiz-programmation, quiz-reglementation et quiz-les-publics, une section est enfant direct de au lieu d'être dans .sbpj-quiz (à corriger dans les gabarits un jour). Corrigé le 20/07. */ .sbpj-quiz-sec { overflow-x: clip; } .sbpj-quiz > .sbpj-quiz-sec:first-of-type { padding-top: var(--sbpj-section-pad-y-first); } /* HERO sombre plein cadre contenant le quiz interactif (texte blanc). */ .sbpj-quiz-hero-section { background: linear-gradient(165deg, rgba(27,10,61,0.95) 0%, rgba(42,2,98,0.93) 55%, rgba(61,18,89,0.90) 100%), url("/wp-content/uploads/2026/07/hero-quiz-anatomie.webp") center center / cover no-repeat; border-bottom: var(--sbpj-hero-border); padding: 150px 20px 80px; } @media (max-width: 600px){ .sbpj-quiz-hero-section{ padding: 104px 16px 56px; } } /* ===== QUIZ WIDGET ===== */ .sbpj-quiz-container, .sbpj-quiz-container *, .sbpj-quiz-container *::before, .sbpj-quiz-container *::after { box-sizing: border-box; } .sbpj-quiz-container { max-width: var(--sbpj-content-max, 1200px); width: 100%; margin: 0 auto; padding: 0 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ── PAGE ACCUEIL QUIZ ── */ .sbpj-quiz-welcome { background: rgba(122, 47, 143, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(122, 47, 143, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0,0.1); padding: 50px 40px; border-radius: 16px; text-align: center; animation: fadeInUp 0.5s ease; } .sbpj-quiz-welcome-emoji { font-size: 48px; margin-bottom: 20px; display: block; line-height: 1; } .sbpj-quiz-welcome-h1 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.9rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; color: #ffffff; margin: 0 auto 16px; /* bloc centré (le max-width l'ancrait à gauche) */ max-width: 820px; text-align: center; } .sbpj-quiz-welcome-desc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.65); line-height: 1.75; margin-bottom: 28px; max-width: 580px; margin-left: auto; margin-right: auto; } .sbpj-quiz-welcome-stats { display: flex; justify-content: center; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; } .sbpj-quiz-welcome-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .sbpj-quiz-welcome-stat-num { font-size: 28px; font-weight: 900; color: #ffffff; line-height: 1; } .sbpj-quiz-welcome-stat-label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: .06em; } .sbpj-quiz-welcome-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 48px; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); color: #ffffff; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4); text-transform: uppercase; letter-spacing: 0.5px; } .sbpj-quiz-welcome-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55); } /* ── BARÈME ── */ .sbpj-quiz-welcome-bareme { margin: 28px auto 32px; max-width: 420px; padding: 20px 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .sbpj-quiz-welcome-bareme-title { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; text-align: center; } .sbpj-quiz-welcome-bareme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sbpj-quiz-welcome-grade { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); } .sbpj-quiz-welcome-grade-letter { font-size: 16px; font-weight: 900; line-height: 1; } .sbpj-quiz-welcome-grade-letter.g-green { color: #34d399; } .sbpj-quiz-welcome-grade-letter.g-blue { color: #60a5fa; } .sbpj-quiz-welcome-grade-letter.g-yellow { color: #fbbf24; } .sbpj-quiz-welcome-grade-letter.g-orange { color: #fb923c; } .sbpj-quiz-welcome-grade-letter.g-red { color: #f87171; } .sbpj-quiz-welcome-grade-label { font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: .04em; } .sbpj-quiz-welcome-bareme-note { font-size: 11px; color: rgba(255, 255, 255, 0.4); text-align: center; margin-top: 12px; line-height: 1.5; } /* ── PROGRESS ── */ .sbpj-quiz-progress-section { background: rgba(122, 47, 143, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(122, 47, 143, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0,0.1); padding: 24px; border-radius: 16px; margin-bottom: 24px; animation: fadeIn 0.4s ease; display: none; } .sbpj-quiz-progress-info { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 15px; color: rgba(255, 255, 255, 0.9); font-weight: 600; } .sbpj-quiz-progress-bar-container { width: 100%; height: 10px; background: rgba(255, 255, 255, 0.15); border-radius: 10px; overflow: hidden; } .sbpj-quiz-progress-bar { height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); border-radius: 10px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; box-shadow: 0 0 12px rgba(0, 0, 0, 0.4); } /* ── QUESTION ── */ .sbpj-quiz-question-section { background: rgba(122, 47, 143, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(122, 47, 143, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0,0.1); padding: 40px 32px; border-radius: 16px; animation: fadeInUp 0.4s ease; display: none; } .sbpj-quiz-question-number { display: inline-block; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); color: white; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; margin-bottom: 20px; text-transform: uppercase; } .sbpj-quiz-question-text { font-size: 22px; color: #ffffff; margin-bottom: 32px; font-weight: 600; line-height: 1.6; text-align: center; } /* Titre/numéro de question centrés (décision Marion 17/07) ; les réponses restent à gauche */ .sbpj-quiz-question-section { text-align: center; } .sbpj-quiz-answers { text-align: left; } /* Neutralise le fond sombre GeneratePress au survol des boutons FAQ (taco) */ [class*="taco-question"]:hover, [class*="taco-question"]:focus, [class*="taco-question"]:active { background: none !important; color: #7A2F8F !important; } .sbpj-quiz-answers { display: grid; gap: 14px; } .sbpj-quiz-answer-btn { background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.15); padding: 18px 22px; border-radius: 12px; text-align: left; cursor: pointer; font-size: 17px; color: #ffffff; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; font-weight: 500; } .sbpj-quiz-answer-btn:hover { border-color: rgba(122, 47, 143, 0.6); background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .sbpj-quiz-answer-btn.correct { background: #d1fae5; border-color: #10b981; color: #065f46; animation: correctPulse 0.4s ease; } .sbpj-quiz-answer-btn.correct::before { content: "✓"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: bold; } .sbpj-quiz-answer-btn.incorrect { background: #fee2e2; border-color: #ef4444; color: #991b1b; animation: incorrectShake 0.4s ease; } .sbpj-quiz-answer-btn.incorrect::before { content: "✗"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: bold; } .sbpj-quiz-answer-btn.disabled { cursor: not-allowed; opacity: 0.6; } .sbpj-quiz-answer-btn.disabled:hover { transform: none; box-shadow: none; } .sbpj-quiz-next-btn { display: block; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); color: white; border: none; padding: 16px 32px; border-radius: 12px; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 24px; width: 100%; transition: all 0.3s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } .sbpj-quiz-next-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); } .sbpj-quiz-next-btn:disabled { background: rgba(255, 255, 255, 0.1); box-shadow: none; cursor: not-allowed; color: rgba(255, 255, 255, 0.3); } /* ── RÉSULTATS ── */ .sbpj-quiz-result-section { display: none !important; background: rgba(122, 47, 143, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(122, 47, 143, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(0, 0, 0,0.1); padding: 50px 40px; border-radius: 16px; text-align: center; } .sbpj-quiz-result-section.show { display: block !important; animation: fadeInUp 0.5s ease; } .sbpj-quiz-result-score { font-size: 56px; font-weight: 800; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; line-height: 1.2; } .sbpj-quiz-result-message { font-size: 24px; color: #ffffff; margin-bottom: 20px; font-weight: 600; } .sbpj-quiz-result-description { font-size: 16px; color: rgba(255,255,255,0.75); margin-bottom: 40px; line-height: 1.6; } .sbpj-quiz-evaluation-content { background: rgba(122, 47, 143, 0.15); border: 1px solid rgba(122, 47, 143, 0.35); border-radius: 16px; padding: 28px 32px; animation: fadeInUp 0.5s ease; text-align: left; margin-top: 32px; } .sbpj-quiz-evaluation-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(122, 47, 143, 0.2); } .sbpj-quiz-evaluation-icon { font-size: 28px; } .sbpj-quiz-evaluation-header h2 { font-size: 18px; font-weight: 700; color: #ffffff; margin: 0; } .sbpj-quiz-evaluation-text { font-size: 15px; color: rgba(255,255,255,0.88); line-height: 1.8; white-space: pre-wrap; text-align: justify; } .sbpj-quiz-grade-block { margin: 0 auto 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .sbpj-quiz-grade-badge { font-size: 80px; font-weight: 900; line-height: 1; letter-spacing: -2px; text-shadow: 0 0 40px currentColor; margin: 8px 0 4px; } .sbpj-quiz-grade-badge.grade-a-plus { color: #34d399; } .sbpj-quiz-grade-badge.grade-a { color: #6ee7b7; } .sbpj-quiz-grade-badge.grade-a-minus { color: #a7f3d0; } .sbpj-quiz-grade-badge.grade-b-plus { color: #60a5fa; } .sbpj-quiz-grade-badge.grade-b { color: #93c5fd; } .sbpj-quiz-grade-badge.grade-b-minus { color: #bfdbfe; } .sbpj-quiz-grade-badge.grade-c-plus { color: #fbbf24; } .sbpj-quiz-grade-badge.grade-c { color: #fcd34d; } .sbpj-quiz-grade-badge.grade-c-minus { color: #fde68a; } .sbpj-quiz-grade-badge.grade-d { color: #fb923c; } .sbpj-quiz-grade-badge.grade-f { color: #f87171; } .sbpj-quiz-grade-scale { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 440px; } .sbpj-quiz-grade-scale-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); min-width: 44px; } .sbpj-quiz-grade-scale-item.current { background: rgba(122, 47, 143, 0.3); border-color: rgba(122, 47, 143, 0.5); transform: scale(1.08); } .sbpj-quiz-grade-scale-item .scale-letter { font-size: 14px; font-weight: 800; color: #ffffff; } .sbpj-quiz-grade-scale-item .scale-range { font-size: 10px; color: rgba(255,255,255,0.5); font-weight: 500; } /* ── BOUTONS FIN ── */ .sbpj-quiz-result-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; } .sbpj-quiz-smartroom-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 40px; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); color: #ffffff !important; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4); text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.5px; } .sbpj-quiz-smartroom-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55); } .sbpj-quiz-restart-btn { display: inline-block; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7) !important; border: 1.5px solid rgba(255, 255, 255, 0.2); padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none !important; } .sbpj-quiz-restart-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); color: #ffffff !important; } /* ── ANIMATIONS ── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes correctPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes incorrectShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .sbpj-quiz-container { padding: 16px; } .sbpj-quiz-progress-section { padding: 20px; } .sbpj-quiz-question-section { padding: 28px 20px; } .sbpj-quiz-question-text { font-size: 19px; } .sbpj-quiz-answer-btn { padding: 16px 18px; font-size: 16px; } .sbpj-quiz-result-score { font-size: 48px; } .sbpj-quiz-result-message { font-size: 20px; } .sbpj-quiz-welcome { padding: 32px 20px; } .sbpj-quiz-welcome-h1 { font-size: 1.45rem; } .sbpj-quiz-welcome-desc { font-size: 0.85rem; margin-bottom: 20px; } .sbpj-quiz-welcome-stats { gap: 20px; margin-bottom: 20px; } .sbpj-quiz-welcome-stat-num { font-size: 22px; } .sbpj-quiz-welcome-stat-label { font-size: 10px; } .sbpj-quiz-welcome-bareme { margin: 20px auto 24px; padding: 14px 16px; max-width: 100%; } .sbpj-quiz-welcome-bareme-title { font-size: 11px; margin-bottom: 10px; } .sbpj-quiz-welcome-bareme-grid { gap: 6px; } .sbpj-quiz-welcome-grade { padding: 5px 3px; } .sbpj-quiz-welcome-grade-letter { font-size: 13px; } .sbpj-quiz-welcome-grade-label { font-size: 8px; } .sbpj-quiz-welcome-bareme-note { font-size: 10px; margin-top: 8px; } .sbpj-quiz-welcome-btn { padding: 16px 32px; font-size: 14px; white-space: nowrap; width: auto; max-width: 100%; } } @media (max-width: 480px) { .sbpj-quiz-question-text { font-size: 17px; } .sbpj-quiz-answer-btn { padding: 14px 16px; font-size: 15px; } .sbpj-quiz-result-section { padding: 40px 24px; } .sbpj-quiz-evaluation-content { padding: 20px; } .sbpj-quiz-smartroom-btn { padding: 16px 28px; font-size: 13px; width: 100%; } .sbpj-quiz-welcome-btn { padding: 14px 24px; font-size: 13px; } } /* ===== FEATURES SmartRoom ===== */ .sbpj-quiz-feat { display: block !important; width: 100% !important; max-width: var(--sbpj-content-max, 1200px) !important; margin: 0 auto !important; padding: 0 !important; border: none !important; background: none !important; overflow: hidden !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; -webkit-font-smoothing: antialiased; line-height: normal !important; font-size: 16px !important; color: #0f172a !important; } .sbpj-quiz-feat *, .sbpj-quiz-feat *::before, .sbpj-quiz-feat *::after { box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; font-family: inherit !important; line-height: inherit !important; color: inherit !important; text-decoration: none !important; } /* ── HEADER ── */ .sbpj-quiz-feat__head { text-align: center !important; padding-bottom: 40px !important; } .sbpj-quiz-feat__eyebrow { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 11px !important; font-weight: 700 !important; color: #7A2F8F !important; text-transform: uppercase !important; letter-spacing: .14em !important; padding-bottom: 14px !important; } .sbpj-quiz-feat__eyebrow::before, .sbpj-quiz-feat__eyebrow::after { content: '' !important; width: 20px !important; height: 2px !important; background: #7A2F8F !important; border-radius: 2px !important; flex-shrink: 0 !important; } .sbpj-quiz-feat__title { font-size: 1.8rem !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: -.03em !important; color: #0f172a !important; padding-bottom: 12px !important; } .sbpj-quiz-feat__title em { font-style: normal !important; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .sbpj-quiz-feat__sub { font-size: 1rem !important; line-height: 1.75 !important; color: rgba(15, 23, 42, 0.62) !important; max-width: 620px !important; margin: 0 auto !important; } /* ── INNER ── */ .sbpj-quiz-feat__inner { display: flex !important; flex-direction: column !important; gap: 72px !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ── ROW ── */ .sbpj-quiz-feat__row { display: flex !important; gap: 28px !important; align-items: center !important; flex-direction: row !important; } .sbpj-quiz-feat__row--rev { flex-direction: row-reverse !important; } /* ── BROWSER FRAME ── */ .sbpj-quiz-feat__frame { flex: 1 !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid #d0d0d0 !important; background: #ffffff !important; box-shadow: 0 6px 24px rgba(0,0,0,0.09) !important; cursor: zoom-in !important; position: relative !important; z-index: 1 !important; transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1) !important; } .sbpj-quiz-feat__frame:hover:not(.sbpj-quiz-feat__frame--zoom) { transform: translateY(-6px) scale(1.01) !important; box-shadow: 0 18px 48px rgba(0,0,0,0.13) !important; } .sbpj-quiz-feat__frame--zoom { transform: scale(1.72) !important; box-shadow: 0 32px 80px rgba(0,0,0,0.28) !important; z-index: 100 !important; cursor: zoom-out !important; } .sbpj-quiz-feat__bar { background: #ebebeb !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; gap: 6px !important; border-bottom: 1px solid #d0d0d0 !important; } .sbpj-quiz-feat__dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; display: inline-block !important; } .sbpj-quiz-feat__dot:nth-child(1) { background: #ff5f57 !important; } .sbpj-quiz-feat__dot:nth-child(2) { background: #febc2e !important; } .sbpj-quiz-feat__dot:nth-child(3) { background: #28c840 !important; } .sbpj-quiz-feat__img { width: 100% !important; display: block !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; object-position: top !important; } /* ── TEXT BLOCK ── */ .sbpj-quiz-feat__txt { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; } .sbpj-quiz-feat__card-h3 { font-size: 22px !important; font-weight: 700 !important; text-transform: uppercase !important; color: #1a1235 !important; line-height: 1.25 !important; letter-spacing: -0.3px !important; } .sbpj-quiz-feat__card-hook { font-size: 13px !important; font-weight: 700 !important; color: #7A2F8F !important; font-style: italic !important; line-height: 1.5 !important; } .sbpj-quiz-feat__card-desc { font-size: 14px !important; color: #4a4060 !important; line-height: 1.75 !important; text-align: justify !important; } .sbpj-quiz-feat__proof { display: flex !important; align-items: center !important; gap: 14px !important; background: rgba(107, 46, 140, 0.05) !important; border-left: 3px solid #7A2F8F !important; border-radius: 0 8px 8px 0 !important; padding: 12px 16px !important; width: 100% !important; } .sbpj-quiz-feat__proof-num { font-size: 32px !important; font-weight: 900 !important; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; line-height: 1 !important; white-space: nowrap !important; } .sbpj-quiz-feat__proof-lbl { font-size: 12px !important; color: #5a5370 !important; line-height: 1.5 !important; font-weight: 600 !important; } .sbpj-quiz-feat__outcome { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12.5px !important; font-weight: 700 !important; color: #2e1a4a !important; } .sbpj-quiz-feat__outcome::before { content: '→' !important; background: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: 900 !important; font-size: 14px !important; } /* ── BANNER ── */ .sbpj-quiz-feat__banner { display: flex !important; align-items: center !important; gap: 18px !important; padding: 22px 24px !important; border-radius: 14px !important; background: rgba(107, 46, 140, 0.05) !important; border-left: 3px solid #7A2F8F !important; } .sbpj-quiz-feat__banner-icon { font-size: 26px !important; flex-shrink: 0 !important; opacity: 0.85 !important; line-height: 1 !important; } .sbpj-quiz-feat__banner-body { display: flex !important; flex-direction: column !important; gap: 5px !important; } .sbpj-quiz-feat__banner-h4 { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; color: #111111 !important; } .sbpj-quiz-feat__banner-p { font-size: 14px !important; color: #333333 !important; line-height: 1.65 !important; text-align: justify !important; } .sbpj-quiz-feat__banner-hl { font-weight: 700 !important; color: #111111 !important; } /* ── TABLETTE ── */ @media (max-width: 860px) { .sbpj-quiz-feat__title { font-size: 1.5rem !important; } .sbpj-quiz-feat__inner { gap: 56px !important; } } /* ── MOBILE ── */ @media (max-width: 640px) { .sbpj-quiz-feat { padding: 0 16px !important; } .sbpj-quiz-feat__title { font-size: 1.3rem !important; } .sbpj-quiz-feat__head { padding-bottom: 28px !important; } .sbpj-quiz-feat__eyebrow::before, .sbpj-quiz-feat__eyebrow::after { display: none !important; } .sbpj-quiz-feat__inner { gap: 40px !important; } .sbpj-quiz-feat__row, .sbpj-quiz-feat__row--rev { flex-direction: column !important; gap: 14px !important; } .sbpj-quiz-feat__txt { align-items: center !important; text-align: center !important; gap: 10px !important; } .sbpj-quiz-feat__card-h3 { font-size: 17px !important; } .sbpj-quiz-feat__card-desc { font-size: 13px !important; } .sbpj-quiz-feat__card-hook { font-size: 12px !important; } .sbpj-quiz-feat__proof { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 10px 14px !important; gap: 6px !important; } .sbpj-quiz-feat__proof-num { font-size: 24px !important; } .sbpj-quiz-feat__proof-lbl { font-size: 11px !important; text-align: center !important; } .sbpj-quiz-feat__proof-lbl br { display: none !important; } .sbpj-quiz-feat__outcome { justify-content: center !important; font-size: 11px !important; } .sbpj-quiz-feat__banner { flex-direction: column !important; text-align: center !important; gap: 8px !important; padding: 14px 14px !important; } .sbpj-quiz-feat__banner-icon { font-size: 20px !important; } .sbpj-quiz-feat__banner-h4 { font-size: 11px !important; letter-spacing: 1px !important; } .sbpj-quiz-feat__banner-p { font-size: 12px !important; text-align: center !important; line-height: 1.55 !important; } } /* ── ZOOM OFF TACTILE ── */ @media (max-width: 1024px) { .sbpj-quiz-feat__frame { cursor: default !important; } .sbpj-quiz-feat__frame--zoom { transform: none !important; box-shadow: 0 6px 24px rgba(0,0,0,0.09) !important; z-index: 1 !important; cursor: default !important; } } /* ── A11Y ── */ @media (prefers-reduced-motion: reduce) { .sbpj-quiz-feat__frame { transition: none !important; } } /* ===== RECO ===== */ .sbpj-quiz-reco, .sbpj-quiz-reco *, .sbpj-quiz-reco *::before, .sbpj-quiz-reco *::after { box-sizing: border-box; margin: 0; padding: 0; } .sbpj-quiz-reco { --accent: #7A2F8F; --accent-mid: #4C1D73; --accent-dark: #1B0A3D; --grad-cta: linear-gradient(135deg, #7A2F8F 0%, #4C1D73 45%, #1B0A3D 100%); --text: #0f172a; --text-soft: rgba(15, 23, 42, 0.60); --border: rgba(15, 23, 42, 0.08); --shadow: 0 4px 16px rgba(0, 0, 0, 0.05); --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ease: cubic-bezier(.4, 0, .2, 1); } .sbpj-quiz-reco { width: 100%; max-width: var(--sbpj-content-max, 1200px); margin: 0 auto; font-family: var(--font); } .sbpj-quiz-reco__header { text-align: center; margin-bottom: 48px; } .sbpj-quiz-reco__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 16px; } .sbpj-quiz-reco__eyebrow::before, .sbpj-quiz-reco__eyebrow::after { content: ''; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; flex-shrink: 0; } .sbpj-quiz-reco__h2 { font-size: 1.8rem; font-weight: 700; line-height: 1.12; letter-spacing: -.03em; color: var(--text); margin-bottom: 14px; } .sbpj-quiz-reco__h2 em { font-style: normal; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .sbpj-quiz-reco__tagline { font-size: 1rem; line-height: 1.75; color: var(--text-soft); max-width: 100%; margin: 0 auto; white-space: nowrap; } .sbpj-quiz-reco__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .sbpj-quiz-reco__card { background: #ffffff; border: 1px solid var(--border); border-radius: 22px; padding: 0; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } @media (hover: hover) and (pointer: fine) { .sbpj-quiz-reco__card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10); border-color: rgba(122, 47, 143, 0.22); } } .sbpj-quiz-reco__img-wrap { width: 100%; aspect-ratio: 4 / 3.6; overflow: hidden; background: #f4f4f6; border-bottom: 1px solid var(--border); } .sbpj-quiz-reco__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); } @media (hover: hover) and (pointer: fine) { .sbpj-quiz-reco__card:hover .sbpj-quiz-reco__img { transform: scale(1.03); } } .sbpj-quiz-reco__body { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .sbpj-quiz-reco__title { font-size: .95rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; text-transform: uppercase; } .sbpj-quiz-reco__desc { font-size: .82rem; line-height: 1.6; color: var(--text-soft); flex: 1; text-align: justify; } .sbpj-quiz-reco__pills-label { font-size: .68rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; } .sbpj-quiz-reco__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sbpj-quiz-reco__pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: rgba(122, 47, 143, 0.06); color: var(--accent); border: 1px solid rgba(122, 47, 143, 0.15); } .sbpj-quiz-reco__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 11px 18px; background: var(--grad-cta); color: #ffffff; font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border-radius: 10px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.30); transition: opacity .22s, transform .22s, box-shadow .22s; } @media (hover: hover) and (pointer: fine) { .sbpj-quiz-reco__cta:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } } @media (max-width: 860px) { .sbpj-quiz-reco__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .sbpj-quiz-reco__h2 { font-size: 1.5rem; } } @media (max-width: 480px) { .sbpj-quiz-reco__grid { grid-template-columns: 1fr; gap: 14px; } .sbpj-quiz-reco__h2 { font-size: 1.3rem; } .sbpj-quiz-reco__header { margin-bottom: 32px; } .sbpj-quiz-reco__tagline { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .sbpj-quiz-reco__card, .sbpj-quiz-reco__img, .sbpj-quiz-reco__cta { transition: none; } }