/* ========================================================= SOS Cocu — Quiz (clean & stable) HTML attendu : .soscocu-quiz .container + section.card.question ========================================================= */ .soscocu-quiz{ --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --accent:#f97316; --border:#e5e7eb; --error:#dc2626; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); line-height: 1.5; background: var(--bg); } .soscocu-quiz *{ box-sizing:border-box; } /* Cache le bloc d'intro quand un résultat de quiz est affiché */ /* Remonte le bloc résultat une fois l'intro masquée */ .soscocu-quiz .container{ width:min(980px, 92vw); margin: -60px auto 48px; } /* Header */ .soscocu-quiz .header{ padding: 18px 6px 8px; } .soscocu-quiz h1{ margin: 10px 0 6px; font-size: clamp(24px, 3.2vw, 36px); } .soscocu-quiz .subtitle{ margin:0 0 8px; color:var(--muted); } .soscocu-quiz .instructions{ margin:0 0 10px; } .soscocu-quiz .disclaimer{ margin:0; color:var(--muted); font-size:13px; } /* Cards */ .soscocu-quiz .card{ background: var(--card); border-radius: 12px; padding: 20px; margin: 14px 0; box-shadow: 0 12px 28px rgba(15,23,42,.08); } .soscocu-quiz .card.question h2{ margin:0 0 12px; font-size:16px; font-weight:700; } .soscocu-quiz .card h3{ margin:10px 0 6px; } /* Cards globales SOS Cocu (sidebar, blog, widgets) */ .soscocu-card{ background: var(--card); border-radius: 12px; padding: 20px; margin: 14px 0; box-shadow: 0 12px 28px rgba(15,23,42,.08); } /* Options */ .soscocu-quiz .options{ display:flex; flex-direction:column; gap:10px; } .soscocu-quiz label.option{ display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:12px; cursor:pointer; background:#fff; transition:border-color .15s ease, background .15s ease, transform .06s ease; } .soscocu-quiz label.option:hover{ border-color: rgba(249,115,22,.45); background:#fff; } .soscocu-quiz label.option:active{ transform: translateY(1px); } .soscocu-quiz label.option input{ margin-top:3px; accent-color: var(--accent); } /* Actions */ .soscocu-quiz .actions{ display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; } .soscocu-quiz .button{ display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid rgba(249,115,22,.22); background: linear-gradient(180deg, #f97316, #ea580c); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; box-shadow:0 10px 22px rgba(249,115,22,.16); } .soscocu-quiz .button:hover{ filter:brightness(1.03); } .soscocu-quiz .ghost{ display:inline-block; padding:11px 16px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; } .soscocu-quiz .ghost:hover{ border-color: rgba(15,23,42,.18); } /* Error */ .soscocu-quiz .error{ border-color: rgba(220,38,38,.55); } .soscocu-quiz .error h2{ color: var(--error); } /* Result */ .soscocu-quiz .result .scoreLine{ display:flex; align-items:baseline; gap:10px; margin:8px 0 10px; } .soscocu-quiz .score{ font-size:36px; font-weight:800; letter-spacing:-1px; } .soscocu-quiz .scoreHint{ color:var(--muted); } .soscocu-quiz .details{ margin-top:12px; } .soscocu-quiz .details summary{ cursor:pointer; color:var(--muted); } .soscocu-quiz .muted{ color:var(--muted); } .soscocu-quiz .link{ color:var(--accent); text-decoration:none; } .soscocu-quiz .link:hover{ text-decoration:underline; } .paragraphe-seo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* === Affichage résultat (robuste, sans :has) === */ /* Une classe .soscocu-quiz-has-result est ajoutée au quand le résultat est présent */ .soscocu-quiz-has-result .soscocu-quiz-intro{ display:none !important; } /* Si tu veux remonter légèrement la carte résultat, ajuste ici (ex: -20px) */ .soscocu-quiz-has-result .soscocu-quiz .result{ margin-top: 0; }