/* homepage.css - Extracted from homepage.php inline styles */ /* * Seules les règles qui servent sur l'accueil sont ici (tri du 21/09/2026, * mesure PageSpeed : 20 Ko inutilisés). Les autres (ancien quiz gratuit, * anciennes sections) sont dans homepage-complements.css, chargé seulement * sur /quiz-gratuit-complet/, après ce fichier. */ /* Combler le gap entre CTA et footer en mobile */ .mqa-cta-section { margin-bottom: 0 !important; } .mqa-cta-section + footer { margin-top: 0 !important; } /* === Block 2: Additional Styles === */ /* Internal media queries for responsiveness - using ID to avoid class filtering issues if any */ #footer-grid-container { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 40px; visibility: visible !important; opacity: 1 !important; } @media (max-width: 900px) { #footer-grid-container { grid-template-columns: repeat(2, 1fr) !important; }} @media (max-width: 600px) { #footer-grid-container { grid-template-columns: 1fr !important; }} .footer-logo svg text, .footer-logo svg tspan { fill: #ffffff !important; transition: fill 0.3s ease; } .footer-logo svg, .footer-logo svg path, .footer-logo svg rect { mix-blend-mode: normal !important; } /* === Block 3: Main Styles === */ /* ISOLATED CSS: Only affects plugin content */ .mqa-homepage-container { width: 100%; max-width: 100%; overflow-x: hidden; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.7; color: #1f2937; overflow-x: visible; } /* FORCE FOOTER LINKS TO YELLOW ON HOVER (Overriding inline styles) */ #footer-grid-container a:hover, #footer-grid-container li:hover>a { color: #FFD700 !important; opacity: 1 !important; } /* --- SAFE RESET --- */ /* Only target children of our container, NEVER global body/header */ /* Hero Section Scoped */ .mqa-homepage-container .mqa-hero-section { background: #ffffff; color: #000; padding: 10px 0 0 0; /* Reduced top padding */ text-align: center; position: relative; overflow: hidden; } .mqa-hero-content { max-width: 1600px; /* Increased for large screens */ margin: 0 auto; position: relative; z-index: 10; width: 100%; padding: clamp(8px, 1.5vw, 15px) clamp(20px, 4vw, 50px) clamp(20px, 4vw, 50px) clamp(20px, 4vw, 50px); box-sizing: border-box; padding-top: clamp(8px, 1.5vw, 15px) !important; overflow: visible; } /* Conteneur avec forme irrégulière autour du contenu principal - style feuille déchirée */ .mqa-hero-content-wrapper { position: relative; padding: 15px clamp(30px, 5vw, 60px); /* Padding réduit à 15px */ margin: clamp(10px, 2vw, 15px) auto clamp(15px, 2.5vw, 25px); /* Marges réduites */ max-width: 1400px; width: 100%; box-sizing: border-box; z-index: 1; /* Permettre à la feuille de s'étendre sur toute la largeur */ overflow: visible; } /* Wrapper pour le titre avec fond de carreaux - UN SEUL ÉLÉMENT */ .mqa-title-wrapper-with-bg { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(20px, 3vw, 30px) clamp(25px, 4vw, 45px); /* Padding normal */ margin-top: clamp(10px, 2vw, 30px); /* Reduced margin-top */ margin-bottom: clamp(12px, 2vw, 20px); /* Marge réduite */ overflow: visible; z-index: 100; isolation: isolate; /* Créer un nouveau contexte de stacking */ /* Permet au wrapper et à son contenu de bouger ensemble */ transform-origin: center center; } /* Fond avec motif de carreaux - Fait partie du même élément */ .mqa-hero-pattern-bg { display: block !important; position: absolute; top: 0; left: calc(-50vw + 50%); width: 100vw; height: calc(100% + 5px); z-index: 0; pointer-events: none; transform: none; transform-style: flat; border: none; background-image: linear-gradient(rgba(0, 0, 0, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.15) 1px, transparent 1px); background-size: 16px 16px, 16px 16px; background-position: 0 0, 0 0; background-color: #ffffff !important; background-repeat: repeat !important; opacity: 1 !important; clip-path: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transform-origin: center center; } /* Contenu principal */ .mqa-hero-main-content { position: relative; z-index: 2; } .mqa-title-wrapper-with-bg .mqa-hero-title-artistic { position: relative; z-index: 200 !important; /* Au premier plan, au-dessus de la feuille */ } /* Garantir que tous les éléments du titre sont visibles */ .mqa-title-wrapper-with-bg h1, .mqa-title-wrapper-with-bg .mqa-hero-title-artistic, .mqa-title-wrapper-with-bg .mqa-title-line, .mqa-title-wrapper-with-bg .mqa-title-word-artistic { position: relative; z-index: 200 !important; } .mqa-hero-main-content .mqa-hero-subtitle-artistic { position: relative; z-index: 1; /* Permet à la feuille d'empiéter partiellement */ } /* Z-index optimisés - tous les éléments texte au-dessus de la feuille */ .mqa-hero-badge-artistic, .mqa-hero-title-artistic, .mqa-hero-subtitle-artistic, .mqa-hero-cta-artistic, .mqa-hero-stats-artistic, .mqa-title-word-artistic, .mqa-btn-artistic, .mqa-stat-item-artistic, .mqa-stat-number-artistic, .mqa-stat-label-artistic { position: relative; z-index: 100; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Titre artistique avec révélation créative - AU PREMIER PLAN */ .mqa-hero-title-artistic { font-size: clamp(2.2rem, 4.5vw, 4rem); /* Reduced max size for better two-line layout */ font-weight: 200; margin-top: 0; margin-bottom: clamp(12px, 2vw, 20px); /* Marge réduite */ line-height: 1.35; /* Line-height increased to prevent cropping */ color: #000 !important; letter-spacing: -0.03em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12em; /* Gap ajusté pour un espacement équilibré */ position: relative; z-index: 200 !important; opacity: 1 !important; visibility: visible !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; } /* Texte au premier plan - au-dessus de la feuille */ .mqa-title-overlay { position: relative !important; z-index: 10 !important; } .mqa-title-overlay .mqa-title-word-artistic { position: relative !important; z-index: 11 !important; color: #000 !important; opacity: 1 !important; visibility: visible !important; -webkit-text-stroke: 2px white; text-stroke: 2px white; paint-order: stroke fill; } /* Lignes du titre */ .mqa-title-line { display: flex; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: 0.15em; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; } .mqa-title-word-artistic { display: inline-block !important; opacity: 1 !important; /* Visible immédiatement */ transform: translateY(0) rotateX(0deg) !important; /* Position normale immédiatement */ animation: artisticWordReveal 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; color: #000 !important; position: relative !important; z-index: 11 !important; will-change: opacity, transform; visibility: visible !important; -webkit-text-stroke: 2px white; text-stroke: 2px white; paint-order: stroke fill; } /* Pas d'animation de révélation - visible immédiatement */ .mqa-title-word-artistic { animation: none !important; } /* Si JavaScript a ajouté la classe animated, forcer la visibilité */ .mqa-title-word-artistic.animated { opacity: 1 !important; transform: translateY(0) rotateX(0deg) !important; visibility: visible !important; color: #000 !important; -webkit-text-stroke: 2px white; text-stroke: 2px white; paint-order: stroke fill; } /* Animation dynamique au survol - LE WRAPPER ENTIER BOUGE */ .mqa-title-wrapper-with-bg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .mqa-title-wrapper-with-bg:hover { transform: scale(1.02); } /* Le titre garde aussi sa transition pour les mots individuels */ .mqa-hero-title-artistic { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; } /* Animation des mots individuels au survol */ .mqa-hero-title-artistic:hover .mqa-title-word-artistic { animation: wordHoverBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* Délais différents pour chaque mot pour un effet en cascade */ .mqa-hero-title-artistic:hover .mqa-title-word-artistic[data-word="1"] { animation-delay: 0s; } .mqa-hero-title-artistic:hover .mqa-title-word-artistic[data-word="2"] { animation-delay: 0.05s; } .mqa-hero-title-artistic:hover .mqa-title-word-artistic[data-word="3"] { animation-delay: 0.1s; } .mqa-hero-title-artistic:hover .mqa-title-word-artistic[data-word="4"] { animation-delay: 0.15s; } .mqa-hero-title-artistic:hover .mqa-title-word-artistic[data-word="5"] { animation-delay: 0.2s; } /* Animation du surlignage orange au survol */ .mqa-hero-title-artistic:hover .mqa-title-emphasis::before { animation: highlightPulse 1.5s ease-in-out infinite; opacity: 0.9 !important; transform: scaleX(1.05) skewX(-2deg) rotate(-0.5deg) !important; } /* Animation de rebond pour les mots */ @keyframes wordHoverBounce { 0% { transform: translateY(0) rotateX(0deg); } 50% { transform: translateY(-8px) rotateX(5deg) scale(1.05); } 100% { transform: translateY(0) rotateX(0deg) scale(1); } } /* Animation pulsante pour le surlignage */ @keyframes highlightPulse { 0%, 100% { opacity: 0.7; transform: scaleX(1) skewX(-4deg) rotate(-1.5deg); } 50% { opacity: 0.95; transform: scaleX(1.08) skewX(-3deg) rotate(-1deg); } } /* Effet de brillance sur les mots au survol */ .mqa-hero-title-artistic:hover .mqa-title-word-artistic { text-shadow: 0 0 10px rgba(255, 152, 0, 0.3); transition: text-shadow 0.3s ease; } .mqa-hero-title-artistic:hover .mqa-title-emphasis { text-shadow: 0 0 15px rgba(255, 152, 0, 0.5); } /* Garantir que tous les éléments du titre sont visibles et au-dessus de la feuille */ .mqa-title-wrapper-with-bg h1, .mqa-title-wrapper-with-bg .mqa-hero-title-artistic, .mqa-title-wrapper-with-bg .mqa-title-line { position: relative; z-index: 10 !important; } .mqa-title-wrapper-with-bg .mqa-title-word-artistic { position: relative !important; z-index: 11 !important; color: #000 !important; -webkit-text-stroke: 2px white; text-stroke: 2px white; paint-order: stroke fill; } /* Pas de délais d'animation - tout visible immédiatement */ .mqa-title-word-artistic[data-word="1"], .mqa-title-word-artistic[data-word="2"], .mqa-title-word-artistic[data-word="3"], .mqa-title-word-artistic[data-word="4"], .mqa-title-word-artistic[data-word="5"] { animation-delay: 0s !important; } .mqa-title-emphasis { font-weight: 700; position: relative; display: inline-block; -webkit-text-stroke: 0 !important; text-stroke: 0 !important; } .mqa-title-emphasis::before { content: ''; position: absolute; bottom: 0.08em; left: -0.15em; right: -0.15em; height: 0.55em; background: #FF9800; opacity: 0.7; transform: scaleX(0) skewX(-4deg) rotate(-1.5deg); transform-origin: left; animation: highlightReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; z-index: -1; /* Derrière le texte mais au-dessus de la feuille grâce au z-index du parent */ box-shadow: 0 1px 3px rgba(255, 152, 0, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.08); /* Forme très irrégulière style surlignage fait à la main */ 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%); } @keyframes highlightReveal { 0% { transform: scaleX(0) skewX(-3deg) rotate(-0.5deg); } 100% { transform: scaleX(1) skewX(-3deg) rotate(-0.5deg); } } .mqa-title-emphasis[data-word="3"]::before { animation-delay: 0.8s; /* Variation très irrégulière pour DEC - style surlignage manuel */ clip-path: polygon(0% 42%, 1% 22%, 3% 8%, 6% 2%, 10% 0%, 16% 4%, 22% 1%, 28% 5%, 34% 2%, 40% 0%, 46% 3%, 52% 1%, 58% 4%, 64% 0%, 70% 2%, 76% 5%, 82% 3%, 86% 7%, 90% 4%, 93% 9%, 96% 14%, 98% 20%, 99% 28%, 100% 35%, 100% 65%, 99% 72%, 98% 80%, 96% 86%, 93% 91%, 90% 96%, 86% 93%, 82% 97%, 76% 95%, 70% 98%, 64% 100%, 58% 96%, 52% 99%, 46% 97%, 40% 100%, 34% 98%, 28% 95%, 22% 99%, 16% 96%, 10% 100%, 6% 98%, 3% 92%, 1% 78%, 0% 58%); } .mqa-title-emphasis[data-word="5"]::before { animation-delay: 1.1s; /* Petite trace de stabilo pour Confiance - plus discret et petit */ height: 0.35em; bottom: 0.15em; left: -0.1em; right: -0.1em; background: #FF9800; opacity: 0.5; /* Variation très irrégulière pour Confiance - style surlignage manuel petit */ clip-path: polygon(0% 45%, 3% 30%, 8% 20%, 15% 15%, 25% 12%, 35% 10%, 45% 12%, 55% 10%, 65% 12%, 75% 15%, 85% 20%, 92% 30%, 100% 45%, 100% 55%, 92% 70%, 85% 80%, 75% 85%, 65% 88%, 55% 90%, 45% 88%, 35% 90%, 25% 88%, 15% 85%, 8% 80%, 3% 70%, 0% 55%); } .mqa-hero-subtitle-artistic { font-size: clamp(0.95rem, 2vw, 1.1rem); /* Réduit pour optimiser l'espace */ margin-bottom: clamp(18px, 3vw, 28px); /* Marge réduite */ color: #444; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.6; /* Line-height optimisé */ font-weight: 300; opacity: 1 !important; transform: translateY(0) !important; animation: none !important; } .mqa-hero-stats-artistic { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: nowrap; margin-top: clamp(12px, 2vw, 20px); /* Marge réduite */ padding: clamp(20px, 3vw, 30px) 0; /* Padding réduit */ border-top: 2px solid rgba(0, 0, 0, 0.1); border-bottom: 2px solid rgba(0, 0, 0, 0.1); position: relative; } /* Smiley animé au survol - positionné à droite de 1000+ en diagonale */ .mqa-stat-item-artistic[data-stat-type="premium"] { position: relative; text-align: left; /* Aligné à gauche pour coller au séparateur */ flex: 0.8; /* Espace réduit à droite */ display: flex; flex-direction: column; align-items: flex-start; } .mqa-stat-item-artistic[data-stat-type="description"] { text-align: left; /* Aligné à gauche comme demandé */ flex: 1.8; /* Espace encore plus large pour tenir sur une ligne */ display: flex; flex-direction: column; align-items: flex-start; /* Contenu aligné à gauche */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Force le texte sur une ligne */ } .mqa-stats-smiley { position: absolute; top: -10px; right: -40px; transform: rotate(15deg); /* Légère rotation en diagonale */ width: clamp(60px, 10vw, 90px); height: clamp(60px, 10vw, 90px); opacity: 0; pointer-events: none; z-index: 10; transition: opacity 0.3s ease; } /* Tous les éléments du smiley sont masqués par défaut */ .mqa-stats-smiley .smiley-face { stroke-dasharray: 200; /* Longueur approximative du chemin fait main */ stroke-dashoffset: 200; fill: #FFD700; /* Jaune pour le remplissage */ transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1), fill-opacity 0.3s ease; fill-opacity: 0; } .mqa-stats-smiley .smiley-eye-left, .mqa-stats-smiley .smiley-eye-right { opacity: 0; transform: scale(0); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .mqa-stats-smiley .smiley-mouth { stroke-dasharray: 50; /* Longueur approximative de la courbe */ stroke-dashoffset: 50; fill: none; transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Au survol de la section stats, le smiley apparaît et se dessine */ .mqa-hero-stats-artistic:hover .mqa-stats-smiley { opacity: 1; } .mqa-hero-stats-artistic:hover .smiley-face { stroke-dashoffset: 0; fill-opacity: 1; animation: drawFaceHandmade 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .mqa-hero-stats-artistic:hover .smiley-eye-left { opacity: 1; transform: scale(1); animation: drawEyeLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards; } .mqa-hero-stats-artistic:hover .smiley-eye-right { opacity: 1; transform: scale(1); animation: drawEyeRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; } .mqa-hero-stats-artistic:hover .smiley-mouth { stroke-dashoffset: 0; animation: drawMouthHandmade 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards; } /* Quand on sort du survol, le smiley s'efface */ .mqa-hero-stats-artistic:not(:hover) .mqa-stats-smiley { opacity: 0; } .mqa-hero-stats-artistic:not(:hover) .smiley-face { stroke-dashoffset: 200; fill-opacity: 0; transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1), fill-opacity 0.3s ease; } .mqa-hero-stats-artistic:not(:hover) .smiley-eye-left, .mqa-hero-stats-artistic:not(:hover) .smiley-eye-right { opacity: 0; transform: scale(0); transition: opacity 0.3s ease, transform 0.3s ease; } .mqa-hero-stats-artistic:not(:hover) .smiley-mouth { stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* Animations de dessin fait main */ @keyframes drawFaceHandmade { 0% { stroke-dashoffset: 200; fill-opacity: 0; } 70% { fill-opacity: 1; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes drawEyeLeft { 0% { opacity: 0; transform: scale(0); } 50% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } @keyframes drawEyeRight { 0% { opacity: 0; transform: scale(0); } 50% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } @keyframes drawMouthHandmade { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } } .mqa-stat-item-artistic { text-align: center; padding: 0 clamp(20px, 3.5vw, 45px); /* Padding réduit */ opacity: 1 !important; transform: translateY(0) scale(1); animation: none; /* Toujours visible, pas d'animation qui cache */ } .mqa-stat-item-artistic:nth-child(1) { animation: none; } .mqa-stat-item-artistic:nth-child(3) { animation: none; } .mqa-stat-item-artistic:nth-child(5) { animation: none; } .mqa-stat-separator-artistic { width: 2px; height: 80px; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15), transparent); margin: 0 clamp(15px, 3vw, 40px); } /* Mobile Responsive For Stats */ @media (max-width: 768px) { .mqa-hero-stats-artistic { flex-direction: column; gap: 20px; padding: 20px 0; } .mqa-stat-separator-artistic { display: none; /* Cache le séparateur vertical sur mobile */ } .mqa-stat-item-artistic[data-stat-type="description"] { text-align: center; align-items: center; width: 100%; white-space: normal; /* Autorise le retour à la ligne */ padding: 0 10px; order: 2; /* Met la description après le chiffre pour l'impact visuel (optionnel, mais souvent mieux) */ } /* Si on veut garder l'ordre original (Description d'abord), enlever order: 2 */ .mqa-stat-item-artistic[data-stat-type="description"] { order: 1; } .mqa-stat-item-artistic[data-stat-type="premium"] { text-align: center; align-items: center; width: 100%; padding: 0 10px; order: 2; } .mqa-stat-number-artistic { justify-content: center; }} .mqa-stat-number-artistic { font-size: clamp(1.8rem, 4.5vw, 3.2rem); /* Taille réduite pour optimiser l'espace */ font-weight: 200; margin-bottom: clamp(8px, 1.5vw, 12px); /* Marge réduite */ color: #000; letter-spacing: -0.05em; line-height: 1.1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .mqa-stat-label-artistic { font-size: clamp(0.7rem, 1.2vw, 0.85rem); /* Taille réduite */ color: #555 !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.4; /* Line-height optimisé */ } .mqa-stat-label-artistic span { display: block; text-transform: none; font-size: 0.85em; margin-top: 2px; opacity: 0.8; } .mqa-section-title { font-size: clamp(1.8rem, 5vw, 3.5rem); font-weight: 700; color: #1e3a8a; margin-bottom: clamp(12px, 2vw, 20px); letter-spacing: -0.5px; } .mqa-section-description { font-size: clamp(1rem, 2.2vw, 1.3rem); color: #6b7280; } /* Strategies Section - Brutalist/Grid Design */ .mqa-strategies-section { padding: clamp(80px, 12vw, 120px) clamp(20px, 5vw, 60px); background: #ffffff; position: relative; overflow: hidden; } /* Subtle grid background for continuity */ .mqa-strategies-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; z-index: 0; pointer-events: none; } .mqa-strategies-container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; } .mqa-strategies-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; color: #000; margin-bottom: clamp(50px, 8vw, 80px); letter-spacing: -0.02em; line-height: 1.2; } /* Orange marker highlight effect */ .mqa-marker-highlight { position: relative; display: inline-block; font-weight: 700; } .mqa-marker-highlight::before { content: ''; position: absolute; bottom: 0.1em; left: -0.15em; right: -0.15em; height: 0.5em; background: #FF9800; opacity: 0.6; transform: scaleX(0) skewX(-4deg) rotate(-1.5deg); transform-origin: left; animation: markerReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s; z-index: -1; 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%); } @keyframes markerReveal { from { transform: scaleX(0) skewX(-4deg) rotate(-1.5deg); } to { transform: scaleX(1) skewX(-4deg) rotate(-1.5deg); } } /* Carousel Wrapper */ .mqa-carousel-wrapper { position: relative; max-width: 1400px; margin: 0 auto; z-index: 1; } /* Carousel Track Container */ .mqa-carousel-track-container { overflow: visible; position: relative; padding-bottom: 30px; } /* Carousel Track */ .mqa-carousel-track { display: flex; --carousel-gap: 30px; /* Force fixed gap for simpler calc */ gap: var(--carousel-gap); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Strategy card - Hub style with borders */ .mqa-strategy-card { /* Fix width calculation: (100% - (2 * gap)) / 3 */ min-width: calc((100% - (2 * var(--carousel-gap))) / 3); max-width: calc((100% - (2 * var(--carousel-gap))) / 3); background: #ffffff; border: 3px solid #000; border-radius: 8px; overflow: hidden; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; flex-shrink: 0; } /* UE-specific colors & Hover Effects */ .mqa-strategy-card.ue1:hover { border-color: #3b82f6; } .mqa-strategy-card.ue2:hover { border-color: #10b981; } .mqa-strategy-card.ue3:hover { border-color: #8b5cf6; } .mqa-strategy-card.strategie:hover { border-color: #f59e0b; } /* Default Card Image Style */ .mqa-card-image { display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; background: #fef3c7; /* Default fallback */ transition: background 0.3s ease; } /* UE Specific Backgrounds for Icon Area (Full Hub Colors) */ .mqa-strategy-card.ue1 .mqa-card-image { background: #3b82f6; /* Blue 500 */ } .mqa-strategy-card.ue2 .mqa-card-image { background: #10b981; /* Emerald 500 */ } .mqa-strategy-card.ue3 .mqa-card-image { background: #8b5cf6; /* Violet 500 */ } .mqa-strategy-card.strategie .mqa-card-image { background: #f59e0b; /* Amber 500 */ } /* SVG Color Overrides - Force white stroke/fill on colored backgrounds */ .mqa-strategy-card.ue1 .mqa-card-image svg path, .mqa-strategy-card.ue1 .mqa-card-image svg line, .mqa-strategy-card.ue1 .mqa-card-image svg circle, .mqa-strategy-card.ue1 .mqa-card-image svg rect { stroke: #3b82f6 !important; /* Match background for seamless look? Or white? */ /* User asked: "l'esquisse doit egalement etre de la couleur des hub" */ /* If background is hub color, sketch must be contrast or same? */ /* "Le fond des encart n'est pas de la couleur des hub" -> Background = Hub Color */ /* "l'esquisse doit egalement etre de la couleur des hub" -> Sketch = Hub Color? */ /* That would be invisible. User likely means: Background = Light/Beige, Sketch = Hub Color. OR Background = Hub Color, Sketch = White/Black? */ /* Let's re-read: "Le fond des encart n'est pas de la couleur des hub" -> Likely wants COLOR, not pastel. */ /* "l'esquisse doit egalement etre de la couleur des hub" -> If background is Blue, sketch cannot be Blue. */ /* Interpretation A: Background = Pastel Hub Color (but correct hue), Sketch = Strong Hub Color. */ /* Interpretation B: Background = White, Sketch = Strong Hub Color. */ /* Interpretation C: Background = Color, Sketch = White. */ /* Let's try Interpretation A: Background matches Hub Color (but maybe lighter?), Sketch matches Hub Color. */ /* WAIT. User said: "Le fond des encart n'est pas de la couleur des hub" when I used pastel. So he wants FULL color? */ /* AND "l'esquisse doit egalement etre de la couleur des hub". */ /* If I put Blue Background and Blue Sketch, it's invisible. */ /* Maybe he means: Background = Hub Color (e.g. Orange for strategy is what he saw and liked?), Sketch = SAME color? No. */ /* Look at the uploaded image: Strategy card has Yellow/Orange background and Orange sketch. */ /* He wants: Background = Hub Color (e.g. Blue), Sketch = Hub Color (Blue). */ /* This implies using different SHADES. */ /* Let's use: Background = Light/Pastel Hub Color (but correct hue), Sketch = Strong Hub Color. */ /* My previous attempt used Tailwind-100 colors. Maybe he wants stronger pastels? */ /* OR, he wants the Strong Hub Color for the Sketch (it was Orange before). */ } /* Let's respect: "l'esquisse doit egalement etre de la couleur des hub" -> Sketch = Strong Hub Color */ /* "Le fond des encart n'est pas de la couleur des hub" -> Background = ??? */ /* If I look at the screenshot, the "Analyse Jury" (Stratégie) has a yellow background. The user liked that style in the hub. */ /* The issue with my previous commit involved using very light pastels (blue-100). */ /* I will use the SVG override to force the Stroke/Fill to be the Strong Hub Color. */ /* I will use a slightly stronger pastel for the background if possible, or stick to the 100s but ensure the Sketch DOES change color. */ /* Correction strategy: */ /* 1. Backgrounds: Keep distinctive pastels but maybe check hue. */ /* 2. SVGs: FORCE stroke/fill to be the Strong Hub Color. */ /* UE 1 (Blue) */ .mqa-strategy-card.ue1 .mqa-card-image { background: #dbeafe; } .mqa-strategy-card.ue1 svg path, .mqa-strategy-card.ue1 svg line, .mqa-strategy-card.ue1 svg circle, .mqa-strategy-card.ue1 svg rect { stroke: #3b82f6 !important; fill: transparent; /* Reset fills usually */ } .mqa-strategy-card.ue1 svg [fill="#fff5e6"] { fill: #eff6ff !important; /* Lighter blue for fills */ } .mqa-strategy-card.ue1 svg [fill="#FF9800"] { fill: #3b82f6 !important; } /* UE 2 (Green) */ .mqa-strategy-card.ue2 .mqa-card-image { background: #d1fae5; } .mqa-strategy-card.ue2 svg path, .mqa-strategy-card.ue2 svg line, .mqa-strategy-card.ue2 svg circle, .mqa-strategy-card.ue2 svg rect { stroke: #10b981 !important; fill: transparent; } .mqa-strategy-card.ue2 svg [fill="#fff5e6"] { fill: #ecfdf5 !important; } .mqa-strategy-card.ue2 svg [fill="#FF9800"] { fill: #10b981 !important; } /* UE 3 (Purple) */ .mqa-strategy-card.ue3 .mqa-card-image { background: #f3e8ff; } .mqa-strategy-card.ue3 svg path, .mqa-strategy-card.ue3 svg line, .mqa-strategy-card.ue3 svg circle, .mqa-strategy-card.ue3 svg rect { stroke: #8b5cf6 !important; fill: transparent; } .mqa-strategy-card.ue3 svg [fill="#fff5e6"] { fill: #faf5ff !important; } .mqa-strategy-card.ue3 svg [fill="#FF9800"] { fill: #8b5cf6 !important; } /* Stratégie (Orange - Keep as is but force specific override) */ .mqa-strategy-card.strategie .mqa-card-image { background: #fef3c7; } .mqa-strategy-card.strategie svg path, .mqa-strategy-card.strategie svg line, .mqa-strategy-card.strategie svg circle, .mqa-strategy-card.strategie svg rect { stroke: #f59e0b !important; } .mqa-strategy-card.strategie svg [fill="#fff5e6"] { fill: #fffbeb !important; } .mqa-strategy-card.strategie svg [fill="#FF9800"] { fill: #f59e0b !important; } /* Hover: Intensify Background? Or keep it? User said "Hub color must be present in insert". Let's keep the light background but maybe saturate slightly on hover? For now, the light background IS the presence of color. */ .mqa-strategy-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } /* Navigation Arrows */ .mqa-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 2px solid #000; width: 50px; height: 50px; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; } .mqa-carousel-arrow:hover { background: #FF9800; border-color: #FF9800; } .mqa-carousel-arrow:hover svg path { stroke: #fff; } .mqa-carousel-prev { left: -25px; } .mqa-carousel-next { right: -25px; } /* Pagination Dots - Hand-drawn style with container */ .mqa-carousel-dots { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: clamp(40px, 6vw, 60px); padding: 16px 32px; background: #fff; border: 3px solid #000; border-radius: 50px; width: fit-content; margin-left: auto; margin-right: auto; } .mqa-dot { width: 28px; height: 28px; cursor: pointer; transition: all 0.3s ease; padding: 0; background: transparent; border: none; display: flex; align-items: center; justify-content: center; } .mqa-dot svg { width: 100%; height: 100%; } /* Inactive dot - white fill */ .mqa-dot:not(.active) path { fill: #fff; stroke: #000; stroke-width: 3; } .mqa-dot:hover { transform: scale(1.15); } /* Active dot - orange fill */ .mqa-dot.active path { fill: #FF9800; stroke: #000; stroke-width: 3; } /* Card image placeholder */ .mqa-card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f5f5f5; position: relative; } /* Card body */ .mqa-card-body { padding: clamp(20px, 4vw, 30px); display: flex; flex-direction: column; flex-grow: 1; } .mqa-card-title { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; color: #000; margin-bottom: clamp(10px, 2vw, 15px); line-height: 1.3; letter-spacing: -0.01em; } .mqa-card-excerpt { font-size: clamp(0.95rem, 1.8vw, 1.05rem); color: #444; line-height: 1.6; margin-bottom: clamp(15px, 3vw, 20px); flex-grow: 1; } /* Card link - Simple text link */ .mqa-card-link { font-size: clamp(0.95rem, 1.8vw, 1.05rem); font-weight: 600; color: #000; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s ease; align-self: flex-start; } .mqa-card-link:hover { color: #FF9800; gap: 12px; } /* Responsive - Tablet */ @media (max-width: 968px) { .mqa-strategy-card { min-width: calc((100% - 50px) / 2); } .mqa-carousel-arrow { width: 40px; height: 40px; } .mqa-carousel-prev { left: -20px; } .mqa-carousel-next { right: -20px; }} /* Responsive - Mobile */ @media (max-width: 768px) { .mqa-strategies-section { padding: clamp(60px, 10vw, 80px) clamp(15px, 4vw, 20px); } .mqa-strategies-container { padding: 0; /* Maximize width */ } .mqa-strategy-card { min-width: 85vw; max-width: 85vw; flex-shrink: 0; scroll-snap-align: start; scroll-snap-stop: always; } .mqa-strategy-card:last-child { scroll-snap-align: end; } .mqa-carousel-track-container { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; padding-bottom: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .mqa-carousel-track-container::-webkit-scrollbar { display: none; } .mqa-carousel-track { gap: 15px; transition: none !important; transform: none !important; } /* Flèches mobile : petites, rondes, centrées sur la carte */ .mqa-carousel-arrow { display: flex !important; width: 32px; height: 32px; background: #fff; border: 2px solid #000; border-radius: 50%; box-shadow: 2px 2px 0px #000; z-index: 20; top: 40%; } .mqa-carousel-arrow svg { width: 16px; height: 16px; } .mqa-carousel-prev { left: 6px; } .mqa-carousel-next { right: 6px; } .mqa-strategies-title { margin-bottom: clamp(30px, 6vw, 40px); font-size: 1.8rem; /* Smaller title */ word-wrap: break-word; } .mqa-section-description { padding: 0 10px; }} @media (max-width: 968px) { /* Amélioration de la lisibilité mobile pour le quiz */ .mqa-mockup-option { padding: clamp(16px, 4vw, 20px); font-size: clamp(1rem, 4vw, 1.1rem); gap: 8px; /* Écart réduit entre la lettre et le texte sur mobile */ }} .mqa-mockup-option { padding: clamp(14px, 2vw, 18px); background: #ffffff; border: 2px solid #000; border-radius: 6px; color: #000; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer !important; display: flex !important; align-items: flex-start; gap: 12px; position: relative !important; pointer-events: auto !important; z-index: 50 !important; font-size: clamp(0.95rem, 1.3vw, 1.05rem); margin-bottom: clamp(10px, 1.5vw, 15px); user-select: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; word-wrap: normal; overflow-wrap: normal; hyphens: none; min-width: 0; box-sizing: border-box; width: 100%; max-width: 100%; touch-action: manipulation; /* Améliore la réactivité sur mobile */ } .mqa-mockup-option:last-child { margin-bottom: 0; } .mqa-mockup-option.wrong { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border-color: #f87171; border-width: 3px; color: #991b1b; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2); } /* Animation pour les options */ @keyframes optionSelect { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .mqa-mockup-option.selected { animation: optionSelect 0.3s ease; } /* Zone de résultat - Overlay qui recouvre tout */ .mqa-quiz-result { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: clamp(25px, 4vw, 35px); border-radius: 0; display: none !important; flex-direction: column; justify-content: center; align-items: center; z-index: -1 !important; margin: 0; visibility: hidden !important; opacity: 0 !important; transform: scale(0.95); transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0s linear 0.6s; pointer-events: none !important; /* IMPORTANT: Ne jamais bloquer les clics quand masqué */ text-align: center; } /* Quand visible, forcer l'affichage */ .mqa-quiz-result.visible { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: scale(1); transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0s linear 0s; pointer-events: auto !important; } /* S'assurer que le résultat masqué ne bloque JAMAIS les clics */ .mqa-quiz-result:not(.visible) { pointer-events: none !important; display: none !important; z-index: -1 !important; /* En arrière-plan quand masqué */ } .mqa-quiz-result.wrong { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 2px solid #f87171; } /* Features Section - Design moderne et compact */ /* Features Section - Design moderne et compact */ .mqa-features-section { padding: clamp(50px, 6vw, 70px) clamp(20px, 5vw, 60px); background: #000; color: #fff; width: 100%; overflow: hidden; } .mqa-features-wrapper { position: relative; max-width: 1600px; /* Updated to match other sections */ margin: 0 auto; z-index: 1; } .mqa-features-pattern-bg { display: none; } .mqa-features-content { position: relative; z-index: 10; } .mqa-section-header { text-align: center; margin-bottom: clamp(30px, 4vw, 40px); } .mqa-section-title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 300; color: #000 !important; margin-bottom: clamp(12px, 1.8vw, 18px); line-height: 1.3; letter-spacing: -0.02em; } .mqa-section-description { font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: #000 !important; font-weight: 400; line-height: 1.6; } .mqa-features-section .mqa-section-header .mqa-section-title { color: #fff !important; } /* Description avec surlignage orange */ .mqa-features-section .mqa-section-description { position: relative; display: inline-block; padding: 0; background: none; color: rgba(255, 255, 255, 0.85) !important; } /* Surlignage jaune stabilo sur fond sombre */ .mqa-features-section .mqa-section-description::before { content: ''; position: absolute; bottom: 0.05em; left: -0.1em; right: -0.1em; height: 0.5em; background: #fde047; opacity: 0.6; transform: scaleX(0) skewX(-4deg) rotate(-1.5deg); transform-origin: left; animation: highlightReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; z-index: -1; box-shadow: 0 1px 3px rgba(253, 224, 71, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.08); clip-path: polygon(0% 45%, 3% 30%, 8% 20%, 15% 15%, 25% 12%, 35% 10%, 45% 12%, 55% 10%, 65% 12%, 75% 15%, 85% 20%, 92% 30%, 100% 45%, 100% 55%, 92% 70%, 85% 80%, 75% 85%, 65% 88%, 55% 90%, 45% 88%, 35% 90%, 25% 88%, 15% 85%, 8% 80%, 3% 70%, 0% 55%); } .mqa-features-section .mqa-section-description:hover::before { opacity: 0.8; background: #fbbf24; } /* CTA Section */ /* Section CTA - Design Artistique Responsive */ /* CTA Section */ /* Section CTA - Design Artistique Responsive */ .mqa-cta-section { padding: clamp(100px, 15vw, 180px) clamp(20px, 5vw, 60px); background: #000; color: white; position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center; justify-content: center; width: 100%; } /* Fond artistique */ .mqa-cta-bg-animated { position: absolute; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0); background-size: 60px 60px; opacity: 0.4; z-index: 0; } /* Grille artistique - Plus subtile (5% opacité) */ .mqa-cta-grid-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: clamp(80px, 12vw, 120px) clamp(80px, 12vw, 120px); opacity: 0.05; /* Réduit à 5% */ z-index: 1; } /* Formes géométriques artistiques - SUPPRIMÉES pour branding cohérent */ .mqa-cta-shapes { display: none; /* Suppression des cercles violets */ } .mqa-cta-shape-1, .mqa-cta-shape-2, .mqa-cta-shape-3 { display: none; /* Suppression complète */ } .mqa-cta-shape-3 { animation-name: ctaShapeRotate; } @keyframes ctaShapeRotate { 0%, 100% { transform: translate(-50%, -50%) rotate(45deg); } 50% { transform: translate(-50%, -50%) rotate(225deg); } } .mqa-cta-box { position: relative; z-index: 10; max-width: 1200px; margin: 0 auto; text-align: center; width: 100%; } .mqa-cta-content { position: relative; z-index: 2; } /* Badge artistique */ .mqa-cta-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px); border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: clamp(30px, 5vw, 50px); } .mqa-badge-text { font-size: clamp(0.75rem, 1.5vw, 0.9rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.8); } .mqa-badge-pulse { width: clamp(6px, 1vw, 8px); height: clamp(6px, 1vw, 8px); background: #FF9800; /* Orange marqueur */ border-radius: 50%; animation: pulseDot 2s ease-in-out infinite; box-shadow: 0 0 12px rgba(255, 152, 0, 0.6); } /* Titre artistique */ .mqa-cta-title { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 200; margin-bottom: clamp(25px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.04em; color: white; } .mqa-cta-title-line { display: block; } .mqa-cta-title-highlight { font-weight: 700; color: white; } /* Boutons artistiques */ .mqa-cta-buttons { display: flex; gap: clamp(12px, 2.5vw, 20px); justify-content: center; flex-wrap: wrap; margin-bottom: clamp(30px, 5vw, 50px); } .mqa-btn-cta-primary { display: inline-flex; align-items: center; gap: 12px; padding: clamp(14px, 2.5vw, 20px) clamp(32px, 5vw, 48px); background: white; /* Blanc pour Entraînement */ color: #000; border-radius: 0; font-weight: 600; font-size: clamp(0.95rem, 1.8vw, 1.1rem); text-decoration: none; transition: all 1s cubic-bezier(0.34, 1.1, 0.64, 1); border: 2px solid white; position: relative; overflow: visible; } /* Surlignage bleu au survol - surligne uniquement le texte */ .mqa-btn-cta-primary .mqa-btn-text { position: relative; display: inline-block; } .mqa-btn-cta-primary .mqa-btn-text::before { content: ''; position: absolute; top: -2px; bottom: -2px; left: -4px; /* Commence légèrement avant le texte */ right: -4px; /* Sort sur la droite */ background: #2563eb; /* Bleu */ opacity: 0; transform: scaleX(0); transform-origin: left; transition: all 0.9s cubic-bezier(0.34, 1.1, 0.64, 1); z-index: -1; /* Trait droit avec légères variations naturelles - pas de saccades */ clip-path: polygon(0% 40%, 15% 38%, 30% 36%, 45% 35%, 60% 34%, 75% 33%, 90% 32%, 100% 30%, 100% 70%, 90% 68%, 75% 67%, 60% 66%, 45% 65%, 30% 64%, 15% 62%, 0% 60%); } .mqa-btn-cta-primary:hover .mqa-btn-text::before { opacity: 0.65; transform: scaleX(1); } /* Pas de changement au survol - uniquement le surlignage bleu du texte */ .mqa-btn-cta-primary:hover { background: white !important; /* Garde le fond blanc */ color: #000 !important; /* Le texte reste noir */ border-color: white !important; /* Garde la bordure jaune */ } .mqa-btn-icon { transition: none; position: relative; z-index: 1; } .mqa-btn-cta-primary .mqa-btn-text, .mqa-btn-cta-primary .mqa-btn-icon { position: relative; z-index: 1; } .mqa-btn-cta-secondary { display: inline-flex; align-items: center; padding: clamp(14px, 2.5vw, 20px) clamp(32px, 5vw, 48px); background: #fde047; /* Jaune pour Premium */ color: #000; /* Texte noir */ border-radius: 0; font-weight: 600; font-size: clamp(0.95rem, 1.8vw, 1.1rem); text-decoration: none; border: 2px solid #fde047; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .mqa-btn-cta-secondary:hover { background: #fef3c7; /* Teinte jaune plus prononcée au survol */ color: #000; border-color: #fbbf24; /* Bordure jaune plus foncée */ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(253, 224, 71, 0.4); } /* Features artistiques */ .mqa-cta-features { display: flex; justify-content: center; gap: clamp(20px, 4vw, 40px); flex-wrap: wrap; margin-top: clamp(40px, 6vw, 60px); } .mqa-cta-feature-item { display: flex; align-items: center; gap: 10px; padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 24px); background: transparent; border: none; font-size: clamp(0.85rem, 1.5vw, 1rem); color: rgba(255, 255, 255, 0.8); transition: none; cursor: default; } .mqa-cta-feature-item svg { width: clamp(14px, 2vw, 18px); height: clamp(14px, 2vw, 18px); stroke: white; flex-shrink: 0; } .mqa-cta-feature-item:hover { background: transparent; border: none; transform: none; } .mqa-btn-text { position: relative; z-index: 2; } /* ============================================ RESPONSIVE - OPTIMISATION COMPLÈTE ============================================ */ /* Mobile First - Base styles déjà définis avec clamp() */ /* Mobile Small (< 480px) */ @media (max-width: 479px) { .mqa-hero-content { padding: clamp(40px, 8vw, 60px) clamp(15px, 4vw, 20px); } .mqa-hero-title-artistic { font-size: clamp(1.8rem, 8vw, 2.5rem); } .mqa-section-title { font-size: clamp(1.5rem, 6vw, 2rem); } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(30px, 6vw, 45px) clamp(15px, 4vw, 20px); } .mqa-stat-number-artistic { font-size: clamp(1.8rem, 8vw, 2.5rem); }} /* Mobile (480px - 767px) */ @media (min-width: 480px) and (max-width: 767px) { .mqa-hero-content { padding: clamp(50px, 8vw, 70px) clamp(20px, 5vw, 30px); } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(35px, 6vw, 50px) clamp(20px, 5vw, 30px); }} /* Mobile Global (< 768px) */ @media (max-width: 767px) { .mqa-hero-section { min-height: auto; padding: 100px 0 0 0 !important; /* 100px top padding to clear fixed header (80px) + margin */ } /* Override the high-specificity desktop rule */ body:has(.mqa-homepage-container) .mqa-hero-section { padding-top: 20px !important; /* Padding réduit pour rapprocher du header sur mobile */ } .mqa-hero-content { padding: clamp(30px, 8vw, 50px) clamp(15px, 4vw, 20px); } .mqa-section-header { padding: 0 clamp(15px, 4vw, 25px); margin-bottom: clamp(20px, 4vw, 30px); } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(30px, 6vw, 45px) clamp(15px, 4vw, 20px); } .mqa-features-pattern-bg { top: calc(clamp(-20px, -2vw, -15px) + clamp(40px, 8vw, 60px)); } .mqa-hero-cta-artistic, .mqa-hero-cta, .mqa-cta-buttons { flex-direction: column; gap: clamp(10px, 3vw, 15px); } .mqa-btn-artistic, .mqa-btn { width: 100%; max-width: 100%; font-size: 0.9rem !important; /* Taille de police réduite sur mobile */ padding: 12px 15px !important; /* Padding réduit sur mobile */ } /* Fix Mobile Question Options Height */ .mqa-mockup-option { padding: 6px 8px !important; /* Aggressive padding reduction */ font-size: 0.85rem !important; /* Slightly smaller text */ margin-bottom: 6px !important; min-height: auto !important; line-height: 1.25 !important; gap: 4px !important; /* Minimal gap */ align-items: center !important; /* Center items vertically */ } .mqa-hero-subtitle-artistic { font-size: clamp(0.9rem, 2.5vw, 1.1rem); padding: 0 clamp(10px, 4vw, 15px); } .mqa-title-wrapper-with-bg { padding: clamp(15px, 4vw, 20px); } .mqa-hero-pattern-bg { top: 0; /* Ne pas chevaucher le header */ height: calc(100% - 20px); /* Hauteur réduite pour voir le séparateur */ } /* Fix Mobile Highlight for Wrapped Text */ .mqa-features-section .mqa-section-description { display: inline !important; background-image: linear-gradient(120deg, rgba(255, 152, 0, 0.4) 0%, rgba(255, 152, 0, 0.4) 100%); background-repeat: no-repeat; background-size: 100% 0.4em; background-position: 0 88%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 4px; } .mqa-features-section .mqa-section-description::before { display: none !important; } .mqa-hero-stats-artistic { flex-direction: column; gap: clamp(15px, 4vw, 25px); padding: clamp(20px, 6vw, 30px) clamp(10px, 4vw, 15px); } .mqa-stat-separator-artistic { width: clamp(40px, 10vw, 60px); height: 2px; margin: 0; } /* Responsive Text Wrapping for New H1 */ .mqa-title-line { flex-wrap: wrap !important; justify-content: center !important; line-height: 1.1 !important; gap: 0.2em !important; height: auto !important; } .mqa-hero-title-artistic { gap: 0.1em !important; height: auto !important; }} /* Tablette (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { .mqa-hero-content { padding: 0 clamp(30px, 5vw, 50px) clamp(50px, 8vw, 100px) clamp(30px, 5vw, 50px); } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(80px, 12vw, 120px) clamp(30px, 5vw, 50px); } .mqa-hero-title-artistic { font-size: clamp(2.5rem, 7vw, 4rem); } .mqa-section-title { font-size: clamp(2rem, 5vw, 2.8rem); }} /* Desktop (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { .mqa-hero-content { padding: 0 clamp(40px, 6vw, 60px) clamp(60px, 10vw, 120px) clamp(40px, 6vw, 60px); } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(100px, 12vw, 140px) clamp(40px, 6vw, 60px); } .mqa-hero-title-artistic { font-size: clamp(3rem, 7vw, 4.5rem); } .mqa-section-title { font-size: clamp(2.5rem, 5.5vw, 3.2rem); }} /* Large Desktop (>= 1200px) */ @media (min-width: 1200px) { .mqa-hero-content { padding: 0 clamp(50px, 8vw, 80px) clamp(80px, 12vw, 150px) clamp(50px, 8vw, 80px); max-width: 1400px; margin: 0 auto; } .mqa-epreuves-overview, .mqa-test-section, .mqa-features-section, .mqa-cta-section { padding: clamp(120px, 15vw, 180px) clamp(50px, 8vw, 80px); } .mqa-hero-title-artistic { font-size: clamp(3.5rem, 7vw, 5rem); } .mqa-section-title { font-size: clamp(2.8rem, 6vw, 3.5rem); }} /* Optimisation spécifique pour MacBook Air 13" (1280px - 1440px) - Tout visible sur première page */ @media (min-width: 1280px) and (max-width: 1440px) and (min-height: 700px) and (max-height: 900px) { .mqa-hero-content { padding: clamp(5px, 1vw, 10px) clamp(30px, 4vw, 50px) clamp(15px, 2.5vw, 25px) clamp(30px, 4vw, 50px); padding-top: clamp(5px, 1vw, 10px) !important; } .mqa-hero-content-wrapper { padding: clamp(15px, 2.5vw, 25px) clamp(25px, 4vw, 45px); margin: clamp(8px, 1.5vw, 12px) auto clamp(10px, 2vw, 18px); } .mqa-title-wrapper-with-bg { padding: clamp(15px, 2.5vw, 25px) clamp(20px, 3.5vw, 35px); margin-bottom: clamp(8px, 1.5vw, 15px); } .mqa-hero-title-artistic { font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: clamp(10px, 1.8vw, 18px); line-height: 1.1; } .mqa-hero-subtitle-artistic { font-size: clamp(0.9rem, 1.8vw, 1.05rem); margin-bottom: clamp(12px, 2.2vw, 20px); line-height: 1.5; } .mqa-hero-stats-artistic { margin-top: clamp(8px, 1.5vw, 15px); padding: clamp(15px, 2.5vw, 25px) 0; } .mqa-stat-number-artistic { font-size: clamp(1.6rem, 4vw, 2.8rem); margin-bottom: clamp(6px, 1.2vw, 10px); } .mqa-stat-label-artistic { font-size: clamp(0.65rem, 1.1vw, 0.8rem); line-height: 1.3; } .mqa-stat-item-artistic { padding: 0 clamp(18px, 3vw, 35px); }} /* Ultra Large (>= 1600px) */ @media (min-width: 1600px) { .mqa-homepage-container { max-width: 1600px; margin: 0 auto; }} /* Footer Styles */ .mqa-footer { background: #000 !important; color: #fff !important; padding: 60px 0 30px !important; margin-top: 0 !important; display: block !important; /* Force display */ visibility: visible !important; /* Force visibility */ opacity: 1 !important; /* Force opacity */ } .mqa-footer-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .mqa-footer-column { display: flex; flex-direction: column; gap: 16px; } /* Footer Responsive */ @media (max-width: 768px) { .mqa-footer { padding: 40px 0 20px; }} /* ========================================================================== 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 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; } /* 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; } /* ========================================================================== CRITICAL MOBILE FIXES ========================================================================== */ @media (max-width: 768px) { /* Le body compense déjà l'en-tête fixe (80px) : 24px suffisent. 100px laissaient un blanc de 150px au-dessus du titre sur mobile. */ body:has(.mqa-homepage-container) .mqa-hero-section { padding-top: 0 !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 — pleine largeur + carreaux plus gros sur mobile */ .mqa-hero-pattern-bg { width: 100vw !important; left: calc(-50vw + 50%) !important; height: 100% !important; top: 0 !important; z-index: 0 !important; background-size: 16px 16px, 16px 16px !important; } /* Subtitle spacing */ .mqa-hero-subtitle-artistic { font-size: 1rem !important; padding: 0 10px !important; line-height: 1.5 !important; }} /* ============================================================ Section "3 Piliers" — Méthode complète (scroll reveal) ============================================================ */ .mqa-piliers-section { width: 100%; padding: 80px 0; background: #fff; position: relative; overflow: hidden; } /* Grid paper overlay sur fond clair */ .mqa-piliers-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; } .mqa-piliers-wrapper { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .mqa-piliers-pattern-bg { display: none; } .mqa-piliers-content { position: relative; z-index: 1; } .mqa-piliers-section .mqa-section-header .mqa-section-title { color: #000; } .mqa-piliers-section .mqa-section-header .mqa-section-description { color: rgba(0, 0, 0, 0.6); } /* Hand-drawn underline bleu — même style que la page tarif */ .mqa-hand-underline-blue { display: inline-block; position: relative; z-index: 10; } .mqa-hand-underline-blue::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 12px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15' preserveAspectRatio='none'%3E%3Cpath d='M2 9c20-3 50 5 96-3' vector-effect='non-scaling-stroke' stroke='%2393c5fd' stroke-width='6' stroke-linecap='round' fill='none' opacity='0.8'/%3E%3C/svg%3E"); background-size: 100% 100%; z-index: -1; transform: rotate(-1deg); } .mqa-piliers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; } /* --- État par défaut : noir & blanc --- */ .mqa-pilier-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 45px 25px 30px; background: #fff; border: 3px solid #000; border-radius: 12px; box-shadow: 8px 8px 0px #000; text-decoration: none; color: #000; position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } /* Overlay stabilo — trait plein style surlignage main, bords irréguliers clip-path */ .mqa-pilier-card::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scaleX(0) rotate(-0.5deg); transform-origin: left center; z-index: 0; pointer-events: none; opacity: 0.55; /* Bords irréguliers style trait de stabilo fait main — même DA que le bouton hero */ 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% ); } /* Couche ::before désactivée — plus nécessaire avec clip-path plein */ .mqa-pilier-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: scaleX(0) rotate(0.3deg); transform-origin: left center; z-index: 0; pointer-events: none; opacity: 0; } .mqa-pilier-card:nth-child(1)::after { background: #93c5fd; } .mqa-pilier-card:nth-child(1)::before { background: #93c5fd; } .mqa-pilier-card:nth-child(2)::after { background: #86efac; transform: scaleX(0) rotate(0.6deg); } .mqa-pilier-card:nth-child(2)::before { background: #86efac; transform: scaleX(0) rotate(-0.3deg); } .mqa-pilier-card:nth-child(3)::after { background: #fda4af; transform: scaleX(0) rotate(-0.8deg); } .mqa-pilier-card:nth-child(3)::before { background: #fda4af; transform: scaleX(0) rotate(0.4deg); } /* Contenu au-dessus de l'overlay */ .mqa-pilier-card > * { position: relative; z-index: 1; } /* Icône : en couleur par défaut */ .mqa-pilier-icon { margin: 15px 0 12px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 2.5px solid rgba(0, 0, 0, 0.2); background: transparent; transition: background 0.5s ease, border-color 0.5s ease; } .mqa-pilier-icon svg { width: 32px; height: 32px; transition: filter 0.5s ease; } /* Tags en niveaux de gris par défaut */ .mqa-pilier-tag { font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 4px; border: 1.5px solid rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 0.3px; filter: grayscale(1); transition: filter 0.5s ease, border-color 0.5s ease; } /* Step badge : gris par défaut */ .mqa-pilier-step { position: absolute; top: 8px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 2; background: #e5e5e5; color: #000; font-size: 0.8rem; font-weight: 900; padding: 5px 16px; border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0.15); box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.5s ease; } /* Titre : pas de highlight par défaut */ .mqa-pilier-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; line-height: 1.2; position: relative; display: inline-block; } /* Trait stabilo sous le titre (caché par défaut) */ .mqa-pilier-title::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 10px; border-radius: 2px; opacity: 0; transition: opacity 0.5s ease 0.2s; z-index: -1; } .mqa-pilier-card:nth-child(1) .mqa-pilier-title::after { background: rgba(147, 197, 253, 0.5); } .mqa-pilier-card:nth-child(2) .mqa-pilier-title::after { background: rgba(134, 239, 172, 0.5); } .mqa-pilier-card:nth-child(3) .mqa-pilier-title::after { background: rgba(253, 164, 175, 0.5); } .mqa-pilier-subtitle { font-size: 0.95rem; color: #555; margin: 0 0 14px; font-weight: 500; } .mqa-pilier-tags { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; } .mqa-pilier-link { font-weight: 700; font-size: 0.95rem; color: #000; text-decoration: underline; text-underline-offset: 3px; margin-top: auto; } /* --- État coloré (classe .active ajoutée par JS quand progress > 50%) --- */ .mqa-pilier-card.active .mqa-pilier-step { background: #fde047; } .mqa-pilier-card.active .mqa-pilier-icon { border-color: #000; } .mqa-pilier-card.active:nth-child(1) .mqa-pilier-icon { background: rgba(147, 197, 253, 0.35); } .mqa-pilier-card.active:nth-child(2) .mqa-pilier-icon { background: rgba(134, 239, 172, 0.35); } .mqa-pilier-card.active:nth-child(3) .mqa-pilier-icon { background: rgba(253, 164, 175, 0.35); } /* Icône SVG passe en noir quand coloré */ .mqa-pilier-card.active .mqa-pilier-icon svg { filter: brightness(0); } .mqa-pilier-card.active .mqa-pilier-title::after { opacity: 1; } .mqa-pilier-card.active .mqa-pilier-tag { filter: grayscale(0); border-color: rgba(0, 0, 0, 0.15); } .mqa-pilier-card:hover { transform: translateY(-4px); box-shadow: 10px 12px 0px #000; } /* Lien méthode */ .mqa-pilier-method-link { display: inline-block; color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 4px; } .mqa-pilier-method-link:hover { color: #fff; } @media (max-width: 968px) { .mqa-piliers-grid { grid-template-columns: 1fr; gap: 35px; max-width: 400px; margin-left: auto; margin-right: auto; } .mqa-piliers-section { padding: 60px 0; }} .mqa-voir-offres-link { color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 1.05rem; text-decoration: none; position: relative; padding-bottom: 4px; transition: color 0.3s ease; } .mqa-voir-offres-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fde047; transform: scaleX(0.3); transform-origin: left; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease; } .mqa-voir-offres-link:hover { color: #fde047; } .mqa-voir-offres-link:hover::after { transform: scaleX(1); } /* Mobile : titre de l'accueil collé sous l'en-tête (les marges empilées section + contenu + wrapper + cadre laissaient ~75px de blanc). */ @media (max-width: 768px) { body:has(.mqa-homepage-container) .mqa-hero-content { padding-top: 12px !important; } body:has(.mqa-homepage-container) .mqa-hero-content-wrapper { margin-top: 0 !important; } body:has(.mqa-homepage-container) .mqa-title-wrapper-with-bg { margin-top: 0 !important; padding-top: 28px !important; padding-bottom: 28px !important; }} /* ============================================================ Carrousel « Décryptage » : étiquette de diplôme et version mobile ============================================================ */ .mqa-strategy-card .mqa-card-image { position: relative; } .mqa-card-diplome { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 10px; border: 2px solid #000; border-radius: 99px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.6px; color: #000; box-shadow: 2px 2px 0 #000; line-height: 1.3; } .mqa-card-diplome.is-dec { background: #fdba74; } .mqa-card-diplome.is-dscg { background: #93c5fd; } .mqa-card-diplome.is-dcg { background: #86efac; } .mqa-carousel-compteur { display: none; } @media (max-width: 768px) { /* Carte plus étroite : la suivante dépasse et invite à glisser. */ .mqa-strategy-card { min-width: 78vw !important; max-width: 78vw !important; } /* Illustration réduite : l'icône n'a pas besoin de 250px de hauteur. */ .mqa-strategy-card .mqa-card-image { aspect-ratio: auto !important; height: 110px !important; padding: 12px !important; } .mqa-strategy-card .mqa-card-image svg { width: 64px !important; height: auto !important; } .mqa-strategy-card .mqa-card-body { padding: 16px 18px 18px !important; } .mqa-strategy-card .mqa-card-title { font-size: 1.1rem !important; margin-bottom: 6px !important; } .mqa-strategy-card .mqa-card-excerpt { font-size: 0.92rem !important; } /* Les flèches chevauchaient les cartes : le glissement suffit, avec un compteur. */ .mqa-carousel-arrow, .mqa-carousel-dots { display: none !important; } .mqa-carousel-nav-mobile { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 0; } .mqa-carousel-compteur { display: inline-block; min-width: 52px; text-align: center; font-size: 0.95rem; font-weight: 800; color: #111; } .mqa-carousel-nav-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #000; background: #fff; color: #000; box-shadow: 3px 3px 0 #000; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .mqa-carousel-nav-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; } .mqa-carousel-nav-btn:disabled { opacity: 0.3; box-shadow: none; cursor: default; } .mqa-carousel-nav-btn svg { display: block; width: 18px !important; height: 18px !important; flex: 0 0 18px; } .mqa-carousel-nav-btn svg path { stroke: #000 !important; fill: none !important; }} .mqa-carousel-nav-mobile:empty { display: none; } /* Trois outils : une étiquette par diplôme (DEC orange, DSCG bleu), cliquable. */ .mqa-pilier-tags { flex-direction: column; align-items: center; gap: 8px; } .mqa-pilier-diplome { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.85rem; color: #111 !important; text-decoration: none !important; } .mqa-pilier-diplome .mqa-pilier-tag { margin: 0; } .mqa-pilier-diplome:hover { text-decoration: underline !important; } div.mqa-pilier-card { cursor: default; } /* Références publiques : une signature discrète intégrée au fond de la page. */ .mqa-sources-officielles { margin: 0; padding: 10px 8px; background: transparent; color: #4b5563; } .mqa-sources-officielles-inner { box-sizing: border-box; max-width: 640px; margin-inline: auto; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 16px; text-align: center; } .mqa-sources-officielles-label { margin: 0; padding: 0 3px; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: #111; white-space: nowrap; position: relative; isolation: isolate; } .mqa-sources-officielles-label::before { content: ""; position: absolute; z-index: -1; inset: 35% -2px 0; background: #fde047; transform: rotate(-2deg); border-radius: 2px 4px 2px 3px; } .mqa-sources-officielles-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 450px; gap: 14px; list-style: none; margin: 0; padding: 0; } .mqa-sources-officielles-list li { min-width: 0; margin: 0; padding: 0; } .mqa-sources-officielles-list a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; box-sizing: border-box; padding: 4px; color: inherit; text-decoration: none; } .mqa-sources-officielles .mqa-source-logo { display: block; width: 100%; max-width: 120px; height: 40px !important; object-fit: contain; object-position: center; } .mqa-sources-officielles-list a:hover .mqa-source-detail { text-decoration: underline; text-underline-offset: 3px; } .mqa-sources-officielles-list a:focus-visible { outline: 2px solid #111; outline-offset: 4px; } .mqa-source-detail { font-size: 9px; line-height: 1.4; margin-top: 3px; color: #4b5563; } .mqa-sources-officielles-baseline { flex-basis: 100%; margin: 0; padding: 0; font-size: 10px; line-height: 1.5; } .mqa-sources-officielles-baseline strong { color: inherit; font-weight: 500; } @media (max-width: 600px) { .mqa-sources-officielles { padding: 8px 0; } .mqa-sources-officielles-inner { gap: 6px; } .mqa-sources-officielles-list { flex-basis: 100%; gap: 6px; } .mqa-sources-officielles .mqa-source-logo { height: 34px !important; } .mqa-source-detail { font-size: 9px; } .mqa-sources-officielles-baseline { font-size: 10px; } } /* Parcours intégrés à la présentation de la méthode. */ .mqa-section-header .mqa-parcours-navigation { margin: 18px auto 10px; padding: 0; font-size: 16px; } .mqa-section-header .mqa-parcours-navigation span { display: block; margin: 0 0 3px; font-weight: 400; } /* Surlignage des parcours, dans la couleur de chaque diplôme. */ .mqa-section-header .mqa-parcours-navigation a { position: relative; isolation: isolate; } .mqa-section-header .mqa-parcours-navigation a[href$="/bts-cg/"] { --parcours-stabilo: #fda4af; } .mqa-section-header .mqa-parcours-navigation a[href$="/dcg/"] { --parcours-stabilo: #a7f3d0; } .mqa-section-header .mqa-parcours-navigation a[href$="/dscg/"] { --parcours-stabilo: #93c5fd; } .mqa-section-header .mqa-parcours-navigation a[href$="/dec/"] { --parcours-stabilo: #fdba74; } .mqa-section-header .mqa-parcours-navigation a::before { content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 46%; bottom: 20%; background: var(--parcours-stabilo, #fde047); border-radius: 2px 4px 2px 3px; transform: rotate(-2deg) scaleX(0); transform-origin: left center; transition: transform .18s ease; } .mqa-section-header .mqa-parcours-navigation a:hover::before, .mqa-section-header .mqa-parcours-navigation a:focus-visible::before { transform: rotate(-2deg) scaleX(1); } .mqa-section-header .mqa-parcours-navigation a:hover, .mqa-section-header .mqa-parcours-navigation a:focus-visible { color: #111; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .mqa-section-header .mqa-parcours-navigation a::before { transition: none; } } /* Surlignage des offres : trait opaque, lisible aussi sur plusieurs lignes. */ .mqa-features-section .mqa-section-description { color: #fff !important; opacity: 1 !important; background: linear-gradient(#fde047, #fde047) 0 100% / 100% 3px no-repeat !important; padding: 0 0 5px !important; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .mqa-features-section .mqa-section-description::before { display: none !important; } /* Cartes compactes : conserver toutes les offres sans étirer les colonnes. */ .mqa-offres-sobres { align-items: stretch; } .mqa-offres-sobre { display: flex; flex-direction: column; } .mqa-offres-sobre-tag { align-self: flex-start; } .mqa-offres-sobre .mqa-offres-sobre-tout { margin-top: auto; padding-top: 12px; align-self: flex-start; } .mqa-offres-sobre:nth-child(3) li:not(.is-vedette) a { padding-top: 5px; padding-bottom: 5px; font-size: .9rem; } /* Les illustrations accompagnent les titres sans dominer le carrousel. */ .mqa-strategy-card .mqa-card-image { height: 130px !important; aspect-ratio: auto !important; padding: 18px !important; } .mqa-strategy-card .mqa-card-image svg { width: 72px !important; height: 72px !important; } .mqa-strategy-card .mqa-card-body { padding: 18px 20px 20px !important; } .mqa-strategy-card .mqa-card-title { font-size: 1.15rem !important; line-height: 1.35 !important; margin-bottom: 10px !important; } .mqa-strategy-card .mqa-card-excerpt { font-size: .95rem !important; line-height: 1.5 !important; margin-bottom: 16px !important; } .mqa-strategy-card .mqa-card-link { font-size: .9rem !important; } @media (max-width: 768px) { .mqa-strategy-card .mqa-card-image { height: 90px !important; } .mqa-strategy-card .mqa-card-image svg { width: 54px !important; height: 54px !important; } } /* Trait de feutre opaque, légèrement incliné et irrégulier. */ .mqa-features-section .mqa-section-description { background: none !important; position: relative; isolation: isolate; padding-bottom: 7px !important; } .mqa-features-section .mqa-section-description::before { display: block !important; content: ''; position: absolute; left: -3px; right: -3px; bottom: 1px; height: 7px; background: #fde047 !important; opacity: 1 !important; transform: rotate(-1deg) skewX(-9deg) !important; animation: none !important; box-shadow: none; z-index: -1; clip-path: polygon(0 23%, 5% 10%, 23% 17%, 43% 3%, 66% 13%, 83% 4%, 100% 20%, 99% 78%, 85% 94%, 62% 82%, 39% 98%, 17% 85%, 1% 100%); } /* Prix des packs : géométrie exacte du stabilo des liens du header, reprise de du thème : assets/css/header.css (état ouvert). */ .mqa-offres-sobre li.is-vedette a span { position: relative; isolation: isolate; background: none; } .mqa-offres-sobre li.is-vedette a span::before { content: ''; position: absolute; left: -5px; bottom: 3px; width: calc(100% + 15px); height: 16px; background: var(--offre-accent); z-index: -1; transform-origin: left center; transform: scaleX(1) skewX(-15deg) rotate(-1deg); opacity: 1; border-radius: 3px 255px 3px 25px / 255px 5px 225px 5px; mix-blend-mode: normal; pointer-events: none; }