/** * Quiz global styles * Extracted from homepage.php mqa_get_quiz_styles() * Phase 5: External cacheable CSS */ /* Masquer le titre de la page WordPress sur les pages de quiz */ body:has(.mqa-quiz-container) .wp-block-post-title, body:has(.mqa-quiz-container) .entry-title, body:has(.mqa-quiz-container) h1.entry-title, body:has(.mqa-quiz-container) .page-title, body:has(.mqa-quiz-container) article .entry-title, body:has(.mqa-quiz-container) main .wp-block-post-title, body:has(.mqa-quiz-container) main .entry-title { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } /* Masquer le header WordPress par défaut (doublon) - DISABLED to fix Homepage body:has(.mqa-quiz-container) #header[role=\"banner\"], body:has(.mqa-quiz-container) #headerimg, body:has(.mqa-quiz-results-container) #header[role=\"banner\"], body:has(.mqa-quiz-results-container) #headerimg { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; margin: 0 !important; padding: 0 !important; } */ /* Masquer le header WordPress par défaut sur les pages de quiz body:has(.mqa-quiz-container), body:has(.mqa-quiz-choice-container) { padding-top: 160px !important; } */ /* FORCE VISIBILITY OF QUESTION CONTAINER */ .mqa-question-container { display: block !important; opacity: 1 !important; visibility: visible !important; position: relative; z-index: 10; } /* Masquer le footer WordPress par défaut */ body:has(.mqa-quiz-container) footer, body:has(.mqa-quiz-choice-container) footer, body:has(.mqa-quiz-container) .site-footer, body:has(.mqa-quiz-choice-container) .site-footer, body:has(.mqa-quiz-container) .wp-block-template-part[data-area="footer"], body:has(.mqa-quiz-choice-container) .wp-block-template-part[data-area="footer"], body:has(.mqa-quiz-container) #colophon, body:has(.mqa-quiz-choice-container) #colophon { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } /* Fond avec motif de carreaux pour toute la page du quiz - style discret comme page d'accueil */ body:has(.mqa-quiz-container) { background: #fafafa !important; position: relative; padding-top: 80px !important; } /* Ajouter un padding-top pour compenser le header fixe */ body:has(.mqa-quiz-container) .mqa-quiz-container { margin-top: 10px !important; } body:has(.mqa-quiz-container)::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; /* Motif de carreaux subtil - même style que page d'accueil (features section) */ background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: clamp(20px, 2.5vw, 30px) clamp(20px, 2.5vw, 30px), clamp(20px, 2.5vw, 30px) clamp(20px, 2.5vw, 30px); background-position: 0 0, 0 0; background-color: #fafafa; opacity: 0.5; } @media (max-width: 768px) { body:has(.mqa-quiz-container)::before { position: absolute !important; height: 100% !important; } } /* Conteneur principal du quiz - Design cohérent avec page d'accueil */ .mqa-quiz-container { max-width: 1000px; margin: clamp(10px, 2vw, 20px) auto; padding: clamp(20px, 2.5vw, 30px); background: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; position: relative; overflow: visible; } /* Résultats de la question précédente - Design cohérent avec page d'accueil */ .mqa-result-success, .mqa-result-error { padding: clamp(28px, 3.5vw, 36px); border-radius: 12px; margin-bottom: clamp(18px, 2.5vw, 24px); animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; } /* "Coup de Stabilo" - Barre verticale style marqueur */ .mqa-result-success::before, .mqa-result-error::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 0; width: 8px; /* Plus épais comme un marqueur */ z-index: 1; /* Style stabilo - bordure irrégulière style surlignage */ clip-path: polygon(0% 35%, 2% 15%, 4% 5%, 7% 0%, 12% 3%, 18% 0%, 24% 4%, 30% 1%, 36% 0%, 42% 5%, 48% 2%, 54% 0%, 60% 3%, 66% 1%, 72% 4%, 78% 0%, 84% 2%, 88% 6%, 92% 3%, 95% 8%, 97% 12%, 99% 18%, 100% 25%, 100% 75%, 99% 82%, 97% 88%, 95% 92%, 92% 97%, 88% 94%, 84% 98%, 78% 100%, 72% 96%, 66% 99%, 60% 97%, 54% 100%, 48% 98%, 42% 95%, 36% 100%, 30% 99%, 24% 96%, 18% 100%, 12% 97%, 7% 100%, 4% 95%, 2% 85%, 0% 65%); /* Ombre interne subtile */ box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3); } .mqa-result-success::before { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3); } .mqa-result-error::before { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3); } .mqa-result-success:hover, .mqa-result-error:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* ========================================================================== FULL HEADER & MOBILE MENU CSS (Migrated from header-nav.php) ========================================================================== */ /* Force Header to Top */ #decquiz-main-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 80px !important; background: #ffffff !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important; z-index: 2147483660 !important; /* Extremely High Z-Index to stay above mobile menu */ visibility: visible !important; opacity: 1 !important; display: grid !important; grid-template-columns: 200px 1fr 200px !important; align-items: center !important; padding: 0 40px !important; box-sizing: border-box !important; font-family: -apple-system, sans-serif !important; transition: background-color 0.3s ease, padding 0.3s ease !important; } #decquiz-main-header.scrolled { background: #000000 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; } #decquiz-main-header .logo { justify-self: start !important; } #decquiz-main-header nav { justify-self: center !important; } #decquiz-main-header .header-actions { justify-self: end !important; display: flex; align-items: center; } #decquiz-main-header .logo a { font-size: 24px !important; font-weight: 800 !important; color: #1e293b !important; text-decoration: none !important; } #decquiz-main-header.scrolled .logo a { color: #ffffff !important; } #decquiz-main-header.scrolled .logo svg text, #decquiz-main-header.scrolled .logo svg tspan { fill: #ffffff !important; } #decquiz-main-header.scrolled .logo svg path { mix-blend-mode: normal !important; stroke-opacity: 1 !important; } #decquiz-main-header ul.desktop-nav { display: flex !important; gap: 30px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; align-items: center; } #decquiz-main-header li a, #decquiz-main-header .header-actions a { color: #334155 !important; text-decoration: none !important; font-weight: 600 !important; font-size: 16px !important; } #decquiz-main-header.scrolled li a, #decquiz-main-header.scrolled .header-actions a { color: #ffffff !important; } /* OVERRIDE: Force black text in dropdown menus even when header is scrolled */ #decquiz-main-header.scrolled li .sub-menu a, #decquiz-main-header.scrolled li .dropdown-menu a, #decquiz-main-header.scrolled nav ul li .sub-menu a, #decquiz-main-header.scrolled nav ul li .dropdown-menu a { color: #1f2937 !important; background: #ffffff !important; } /* Button Styles */ #decquiz-main-header .header-actions a.btn { background: #000 !important; color: #fff !important; padding: 8px 16px !important; border-radius: 6px !important; border: 1px solid #000 !important; } #decquiz-main-header.scrolled .header-actions a.btn { background: #fff !important; color: #000 !important; border-color: #fff !important; } /* Dropdown Menu Styles - Ensure visibility on black header */ #decquiz-main-header .header-actions .sub-menu, #decquiz-main-header .header-actions .dropdown-menu, #decquiz-main-header nav .sub-menu, #decquiz-main-header nav .dropdown-menu { background: #ffffff !important; border: 1px solid #e5e7eb !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } #decquiz-main-header .header-actions .sub-menu a, #decquiz-main-header .header-actions .dropdown-menu a, #decquiz-main-header nav .sub-menu a, #decquiz-main-header nav .dropdown-menu a { color: #1f2937 !important; } /* IMPORTANT: Force black text in dropdowns even when header is scrolled (black) */ #decquiz-main-header.scrolled .header-actions .sub-menu a, #decquiz-main-header.scrolled .header-actions .dropdown-menu a, #decquiz-main-header.scrolled nav .sub-menu a, #decquiz-main-header.scrolled nav .dropdown-menu a, #decquiz-main-header.scrolled li .sub-menu a, #decquiz-main-header.scrolled li .dropdown-menu a { color: #1f2937 !important; } #decquiz-main-header .header-actions .sub-menu a:hover, #decquiz-main-header .header-actions .dropdown-menu a:hover, #decquiz-main-header nav .sub-menu a:hover, #decquiz-main-header nav .dropdown-menu a:hover { background: #f3f4f6 !important; color: #000000 !important; } /* Responsive & Burger Logic */ @media (max-width: 968px) { #decquiz-main-header { grid-template-columns: 1fr auto !important; padding: 0 20px !important; } #decquiz-main-header nav, #decquiz-main-header .header-actions { display: none !important; } .mqa-burger-btn { display: block !important; } } /* Burger Button */ .mqa-burger-btn { display: none !important; /* Hidden on desktop by default rules, shown via media query */ background: none !important; border: none !important; cursor: pointer !important; padding: 10px !important; z-index: 2147483661 !important; /* Higher than header */ justify-self: end; pointer-events: auto !important; } /* Burger Lines */ .mqa-burger-line { display: block; width: 24px; height: 2px; background-color: #1e293b; margin: 5px 0; transition: all 0.3s ease; } #decquiz-main-header.scrolled .mqa-burger-line { background-color: #ffffff; } .mqa-burger-btn.active .mqa-burger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mqa-burger-btn.active .mqa-burger-line:nth-child(2) { opacity: 0; } .mqa-burger-btn.active .mqa-burger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .mqa-burger-btn.active .mqa-burger-line { background-color: #1e293b !important; } /* Mobile Menu Overlay */ #mqa-mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 0; background: #ffffff !important; z-index: 2147483655 !important; /* Lower than header (2147483660), Higher than content */ overflow: hidden; transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); padding-top: 80px; /* Spacer for header */ box-sizing: border-box; opacity: 0; visibility: hidden; display: flex; flex-direction: column; align-items: center; } #mqa-mobile-menu.active { height: 100vh !important; opacity: 1 !important; visibility: visible !important; overflow-y: auto !important; /* Enable scrolling */ display: flex !important; } #mqa-mobile-menu ul { list-style: none; padding: 0; margin: 20px 0; width: 100%; text-align: center; } #mqa-mobile-menu a { font-size: 18px; font-weight: 600; color: #1e293b !important; text-decoration: none; display: block; padding: 10px; } } .mqa-result-success h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); margin: 0 0 clamp(20px, 2.5vw, 28px) 0; font-weight: 800; color: #064e3b; letter-spacing: -0.03em; display: inline-flex; /* Inline flex pour que le background colle au texte */ align-items: center; gap: 12px; line-height: 1.2; /* Effet Stabilo Texte */ background-color: #bbf7d0; /* Vert Stabilo clair */ padding: 4px 12px; border-radius: 4px; transform: skew(-1deg); /* Légère inclinaison pour effet naturel */ } .mqa-result-error h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); margin: 0 0 clamp(20px, 2.5vw, 28px) 0; font-weight: 800; color: #7f1d1d; /* Rouge très foncé */ letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 12px; line-height: 1.2; /* Effet Stabilo Texte */ background-color: #fecaca; /* Rouge Stabilo clair */ padding: 4px 12px; border-radius: 4px; transform: skew(-1deg); } } /* Explanation Box */ .mqa-explication { margin-top: 24px; padding: 24px; background-color: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; } .mqa-explication p { font-size: 1.1rem !important; color: #374151; line-height: 1.6; } /* Primary Button (Next Question) */ .mqa-submit-button { display: inline-flex !important; align-items: center; justify-content: center; padding: 16px 32px; background: #111827; /* Black/Dark Gray */ color: #ffffff; font-weight: 600; font-size: 1.1rem; border-radius: 100px; /* Pill shape */ border: none; cursor: pointer; transition: all 0.2s ease; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .mqa-submit-button:hover { background: #000000; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /* Typography fixes */ .mqa-quiz-container p { font-family: 'Inter', -apple-system, sans-serif; } .mqa-result-success p, .mqa-result-error p { margin: 0; font-size: clamp(0.95rem, 1.6vw, 1.05rem); line-height: 1.8; color: #1a1a1a; font-weight: 400; } .mqa-result-success strong, .mqa-result-error strong { font-weight: 600; color: #000; } .mqa-answer-section { margin-bottom: clamp(20px, 2.5vw, 28px); } .mqa-answer-label { font-size: clamp(0.8rem, 1.4vw, 0.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #4b5563; margin-bottom: 12px; display: block; } .mqa-result-success .mqa-answer-label { color: #059669; } .mqa-result-error .mqa-answer-label { color: #dc2626; } .mqa-answer-value { font-size: clamp(1rem, 2vw, 1.1rem); line-height: 1.8; color: #0a0a0a; padding: clamp(16px, 2vw, 20px); background: #ffffff; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.1); font-weight: 500; position: relative; overflow: visible; padding-left: clamp(20px, 3vw, 28px) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .mqa-answer-value.user-answer, .mqa-answer-value.correct-answer { border-left: none !important; } .mqa-answer-value.user-answer::before, .mqa-answer-value.correct-answer::before { content: ''; position: absolute; top: 6px; left: 0; bottom: 6px; width: 6px; clip-path: polygon(0% 35%, 2% 15%, 4% 5%, 7% 0%, 12% 3%, 18% 0%, 24% 4%, 30% 1%, 36% 0%, 42% 5%, 48% 2%, 54% 0%, 60% 3%, 66% 1%, 72% 4%, 78% 0%, 84% 2%, 88% 6%, 92% 3%, 95% 8%, 97% 12%, 99% 18%, 100% 25%, 100% 75%, 99% 82%, 97% 88%, 95% 92%, 92% 97%, 88% 94%, 84% 98%, 78% 100%, 72% 96%, 66% 99%, 60% 97%, 54% 100%, 48% 98%, 42% 95%, 36% 100%, 30% 99%, 24% 96%, 18% 100%, 12% 97%, 7% 100%, 4% 95%, 2% 85%, 0% 65%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 -2px 3px rgba(0, 0, 0, 0.1); border-radius: 2px 0 0 2px; z-index: 0; } .mqa-result-success .mqa-answer-value.user-answer { border-color: rgba(34, 197, 94, 0.3); background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); border-width: 2px; } .mqa-result-success .mqa-answer-value.user-answer::before { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.1); } .mqa-result-error .mqa-answer-value.user-answer { border-color: rgba(239, 68, 68, 0.3); background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%); border-width: 2px; } .mqa-result-error .mqa-answer-value.user-answer::before { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.1); } .mqa-answer-value.correct-answer { border-color: rgba(34, 197, 94, 0.3); background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); border-width: 2px; } .mqa-answer-value.correct-answer::before { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4), inset 0 -2px 3px rgba(0, 0, 0, 0.1); } .mqa-explication { background: #ffffff; padding: clamp(28px, 3.5vw, 36px); border-radius: 12px; margin-top: clamp(18px, 2.5vw, 24px); font-style: normal; color: #000; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: relative; } .mqa-explication::before { content: ''; position: absolute; top: 14px; left: 0; bottom: 14px; width: 4px; background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); /* Style stabilo - bordure irrégulière style surlignage */ clip-path: polygon(0% 35%, 2% 15%, 4% 5%, 7% 0%, 12% 3%, 18% 0%, 24% 4%, 30% 1%, 36% 0%, 42% 5%, 48% 2%, 54% 0%, 60% 3%, 66% 1%, 72% 4%, 78% 0%, 84% 2%, 88% 6%, 92% 3%, 95% 8%, 97% 12%, 99% 18%, 100% 25%, 100% 75%, 99% 82%, 97% 88%, 95% 92%, 92% 97%, 88% 94%, 84% 98%, 78% 100%, 72% 96%, 66% 99%, 60% 97%, 54% 100%, 48% 98%, 42% 95%, 36% 100%, 30% 99%, 24% 96%, 18% 100%, 12% 97%, 7% 100%, 4% 95%, 2% 85%, 0% 65%); /* Ombre pour effet stabilo - surlignage */ box-shadow: 0 2px 6px rgba(251, 191, 36, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.3); } .mqa-explication-header { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(14px, 2vw, 18px); font-size: clamp(0.875rem, 1.2vw, 0.95rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #666; } .mqa-explication p { margin: 0; font-size: clamp(0.875rem, 1.2vw, 0.95rem); line-height: 1.6; color: #666; font-weight: 400; } .mqa-explication strong { font-weight: 600; color: #000; } /* Informations du quiz */ .mqa-quiz-info { margin-bottom: clamp(20px, 3vw, 25px); } .mqa-progress-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; margin-bottom: 12px; flex-wrap: wrap; } .mqa-badge { display: inline-block; padding: 8px 16px; background: #000; color: white; border-radius: 20px; font-size: clamp(0.85rem, 1.5vw, 0.95rem); font-weight: 600; } .mqa-progress-bar-container { width: 100%; height: clamp(16px, 2.2vw, 20px); background: #f0f0f0; border-radius: 12px; overflow: visible; margin-bottom: 10px; border: 1px solid rgba(0, 0, 0, 0.08); position: relative; } .mqa-progress-bar-fill { height: 100%; background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%); border-radius: 12px; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; /* Style stabilo - bordure irrégulière style surlignage */ clip-path: polygon(0% 40%, 1% 30%, 3% 25%, 6% 22%, 10% 20%, 14% 22%, 18% 20%, 22% 22%, 26% 20%, 30% 22%, 34% 20%, 38% 22%, 42% 20%, 46% 22%, 50% 20%, 54% 22%, 58% 20%, 62% 22%, 66% 20%, 70% 22%, 74% 20%, 78% 22%, 82% 20%, 86% 22%, 90% 25%, 94% 30%, 97% 35%, 100% 40%, 100% 60%, 97% 65%, 94% 70%, 90% 75%, 86% 78%, 82% 80%, 78% 78%, 74% 80%, 70% 78%, 66% 80%, 62% 78%, 58% 80%, 54% 78%, 50% 80%, 46% 78%, 42% 80%, 38% 78%, 34% 80%, 30% 78%, 26% 80%, 22% 78%, 18% 80%, 14% 78%, 10% 75%, 6% 70%, 3% 65%, 1% 60%, 0% 60%); /* Ombre pour effet stabilo - surlignage */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 -2px 3px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 12px rgba(59, 130, 246, 0.25); /* Légère transparence pour effet stabilo */ opacity: 0.85; } .mqa-progress-text { font-size: clamp(0.8rem, 1.1vw, 0.85rem); color: #666; text-align: center; margin: 0; font-weight: 400; } /* En-tête de la question */ /* DEBUG: CSS SECTION REACHED */ /* FORCE HIDE FOOTER CREDITS */ .site-info, .site-footer .site-info, #colophon .site-info, .powered-by, .powered-by-wordpress, footer .copyright, .imprint { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; width: 0 !important; pointer-events: none !important; } .mqa-quiz-header { font-size: clamp(0.95rem, 1.4vw, 1.05rem); font-weight: 600; color: #000; margin-bottom: clamp(10px, 1.5vw, 15px); line-height: 1.3; text-align: center; position: relative; padding: clamp(12px, 2vw, 18px); background: #ffffff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); letter-spacing: -0.02em; } /* Formulaire du quiz */ .mqa-quiz-form { margin-top: clamp(25px, 4vw, 35px); } /* Conteneur des options */ .mqa-options-container { display: flex; flex-direction: column; gap: clamp(8px, 1.5vw, 12px); margin-bottom: clamp(15px, 2.5vw, 20px); } /* Options de réponse - Design cohérent avec page d'accueil */ .mqa-option { display: flex; align-items: center; padding: clamp(12px, 2vw, 16px); background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); height: auto; min-height: 50px; } .mqa-option:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.15); } .mqa-option input[type="radio"] { margin-right: 15px; width: 20px; height: 20px; cursor: pointer; position: relative; z-index: 1; accent-color: #000; flex-shrink: 0; } .mqa-option span { position: relative; z-index: 1; font-size: clamp(0.85rem, 1.1vw, 0.9rem); color: #000; font-weight: 400; line-height: 1.5; flex: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; } .mqa-option:has(input:checked) { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } /* Champ texte pour QRC */ .mqa-text-input-container { margin-bottom: clamp(25px, 4vw, 35px); } .mqa-text-input { width: 100%; padding: clamp(18px, 2.5vw, 24px); font-size: clamp(0.875rem, 1.2vw, 0.95rem); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; background: #ffffff; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-family: inherit; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); color: #000; } .mqa-text-input:focus { outline: none; border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .mqa-text-input::placeholder { color: #666; } /* Bouton de soumission - Design cohérent avec page d'accueil */ .mqa-submit-button { width: 100%; padding: clamp(14px, 2.5vw, 18px); font-size: clamp(0.95rem, 1.8vw, 1.1rem); font-weight: 600; background: #000; color: white; border: 1px solid #000; border-radius: 12px; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .mqa-submit-button::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #06b6d4 0%, #38bdf8 100%); transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 1; clip-path: polygon(0% 100%, 5% 98%, 10% 100%, 15% 97%, 20% 100%, 25% 98%, 30% 100%, 35% 97%, 40% 100%, 45% 98%, 50% 100%, 55% 97%, 60% 100%, 65% 98%, 70% 100%, 75% 97%, 80% 100%, 85% 98%, 90% 100%, 95% 97%, 100% 100%, 100% 0%, 0% 0%); } .mqa-submit-button:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .mqa-submit-button:hover::before { height: 100%; } .mqa-submit-button span { position: relative; z-index: 2; color: white; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { /* Optimisation mobile - tout doit tenir dans l'écran sans scroll */ body:has(.mqa-quiz-container) .mqa-quiz-container { margin-top: 10px !important; margin-left: 8px !important; margin-right: 8px !important; margin-bottom: 8px !important; padding: 12px !important; } .mqa-quiz-info { margin-bottom: 10px !important; } .mqa-progress-bar { margin-bottom: 8px !important; gap: 8px !important; } .mqa-progress-bar-container { height: 12px !important; margin-bottom: 6px !important; } .mqa-progress-text { font-size: 11px !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .mqa-badge { padding: 4px 10px !important; font-size: 11px !important; } .mqa-quiz-header { font-size: 16px !important; line-height: 1.3 !important; margin-bottom: 10px !important; padding: 8px 10px !important; } /* Niveau - plus compact */ body:has(.mqa-quiz-container) p[style*="Niveau"] { font-size: 11px !important; margin-top: -8px !important; margin-bottom: 10px !important; } .mqa-option { padding: 10px 12px !important; font-size: 14px !important; margin-bottom: 8px !important; min-height: 44px !important; } .mqa-submit-button { padding: 12px 20px !important; font-size: 15px !important; margin-top: 10px !important; min-height: 44px !important; } /* Réduire les espacements dans les résultats */ .mqa-result-success, .mqa-result-error { padding: 12px !important; margin-bottom: 10px !important; } .mqa-result-success h3, .mqa-result-error h3 { font-size: 14px !important; margin-bottom: 8px !important; gap: 6px !important; } .mqa-result-success p, .mqa-result-error p { font-size: 12px !important; line-height: 1.4 !important; } .mqa-explication { padding: 12px !important; margin-top: 10px !important; } .mqa-explication-header { font-size: 11px !important; margin-bottom: 8px !important; gap: 6px !important; } .mqa-explication p { font-size: 12px !important; line-height: 1.4 !important; } } /* Optimisation pour très petits écrans (iPhone SE, etc.) */ @media (max-width: 375px) { body:has(.mqa-quiz-container) .mqa-quiz-container { margin-top: 5px !important; margin-left: 5px !important; margin-right: 5px !important; padding: 10px !important; } .mqa-quiz-header { font-size: 14px !important; padding: 6px 8px !important; margin-bottom: 8px !important; } .mqa-progress-bar-container { height: 10px !important; margin-bottom: 5px !important; } .mqa-progress-text { font-size: 10px !important; margin-bottom: 6px !important; } .mqa-option { padding: 8px 10px !important; font-size: 13px !important; margin-bottom: 6px !important; } .mqa-quiz-info { margin-bottom: 8px !important; } } /* Force white background for quiz container (overriding any transparent rules) */ .mqa-quiz-container { background: #ffffff !important; position: relative !important; z-index: 1000 !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* Ensure text inside is visible */ .mqa-quiz-container * { visibility: visible !important; opacity: 1 !important; } /* Fallback for browsers not supporting :has() */ body .mqa-quiz-container { background: #ffffff !important; position: relative !important; z-index: 1000 !important; display: block !important; opacity: 1 !important; visibility: visible !important; } /* CRITICAL FIX: Hide Mobile Menu Overlay by default */ body:has(.mqa-quiz-container) #mqa-mobile-menu:not(.active), body:has(.mqa-quiz-choice-container) #mqa-mobile-menu:not(.active) { display: none !important; visibility: hidden !important; opacity: 0 !important; z-index: -1 !important; height: 0 !important; width: 0 !important; } /* CRITICAL FIX: Ensure Loading Overlay is hidden if it exists */ #mqa-loading-overlay { display: none; } /* ========================================================================== CRITICAL MOBILE FIXES ========================================================================== */ @media (max-width: 768px) { /* Override the body:has rule that sets padding-top: 0 */ body:has(.mqa-homepage-container) .mqa-hero-section { padding-top: 100px !important; margin-top: 0 !important; overflow: visible !important; } /* Container padding */ html body .mqa-homepage-container { padding-top: 0 !important; display: block !important; } /* Hero content spacing */ html body .mqa-hero-content { padding-top: 20px !important; padding-left: 20px !important; padding-right: 20px !important; margin-top: 0 !important; } /* Title Wrapper Layout */ .mqa-title-wrapper-with-bg { display: block !important; width: 100% !important; margin: 5px auto 20px !important; /* Margin-top minimal sur mobile pour rapprocher du header */ padding: 40px 10px 30px !important; position: relative !important; transform: none !important; } /* Title line wrapping */ .mqa-title-line { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; width: 100% !important; gap: 5px !important; white-space: normal !important; } /* Text Visibility and Layout */ .mqa-hero-title-artistic { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: auto !important; width: 100% !important; font-size: 2rem !important; line-height: 1.3 !important; margin-top: 0 !important; margin-bottom: 20px !important; color: #000 !important; z-index: 20 !important; } /* Force words to be visible */ .mqa-title-word-artistic { opacity: 1 !important; visibility: visible !important; display: inline-block !important; color: #000 !important; } /* Responsive Grid Background */ .mqa-hero-pattern-bg { width: 100vw !important; left: calc(-50vw + 50%) !important; height: 100% !important; top: 0 !important; z-index: 0 !important; } /* Subtitle spacing */ .mqa-hero-subtitle-artistic { font-size: 1rem !important; padding: 0 10px !important; line-height: 1.5 !important; } }