/* ============================================================================
   01-themify-quiz-template.css
   PAGE RÉSULTAT QUIZ — template (header, layout 2 colonnes, sidebar, footer)
   À coller dans : Themify > Custom CSS (ou child-theme infinite-child/style.css)
   ============================================================================ */

:root{
  --green:#107C41;
  --green-deep:#0b5a2f;
  --green-soft:#dceee3;
  --green-tint:#eef6f1;
  --bg:#ffffff;
  --card:#ffffff;
  --section-line:#c9d3ce;
  --line:#d4dcd7;
  --line-2:#e3e8e5;
  --ink:#0e1814;
  --ink-2:#36443e;
  --muted:#677571;
  --amber:#b07a1f;
  --red:#b8543f;
  --red-soft:#fbe6df;
  --radius:14px;
  --shadow-sm: 0 1px 0 rgba(19,32,26,.04), 0 1px 2px rgba(19,32,26,.04);
}

/* ---------- TYPO GLOBALE (pages quiz uniquement) ---------- */
body.page-template-quiz-result,
body.single-quiz,
body[data-page-type="quiz-result"]{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.quiz-result-scope h1,
.quiz-result-scope h2,
.quiz-result-scope h3,
.quiz-result-scope h4{
  font-family:'Fraunces', Georgia, serif; font-weight:600;
  letter-spacing:-.01em; color:var(--ink); margin:0;
}
.quiz-result-scope h1{font-size:clamp(28px,3.2vw,40px); line-height:1.08; text-wrap:balance}
.quiz-result-scope h2{font-size:clamp(22px,2.4vw,28px); line-height:1.15}
.quiz-result-scope h3{font-size:17px; line-height:1.25}

/* ---------- ARTICLE INTRO (titre + breadcrumb + lede + meta) ---------- */
.quiz-intro{
  display:flex; flex-direction:column; gap:14px;
  margin-bottom:8px;
}
.quiz-intro h1{
  color:var(--green-deep);
  font-size:clamp(28px,3vw,38px);
  line-height:1.12;
  margin:0;
  font-family:'Fraunces', Georgia, serif; font-weight:600;
}
.quiz-intro .breadcrumb{
  display:flex; gap:8px; font-size:12.5px; color:var(--muted);
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase; letter-spacing:.06em;
}
.quiz-intro .breadcrumb a{color:var(--muted); text-decoration:none}
.quiz-intro .breadcrumb a:hover{color:var(--green-deep)}
.quiz-intro .breadcrumb .sep{color:var(--line)}
.quiz-intro .quiz-lede{
  margin:0; font-size:16px; color:var(--ink-2); max-width:62ch;
  text-wrap:pretty;
}
.quiz-intro .quiz-meta{
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:14px 18px;
  background:var(--green-tint);
  border:1px solid var(--green-soft);
  border-radius:12px;
  margin-top:8px;
}
.quiz-intro .quiz-meta .pill{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--green-deep); font-weight:600;
}
.quiz-intro .quiz-meta .pill .dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
}
.quiz-intro .quiz-meta .sep{color:var(--line)}
.quiz-intro .quiz-meta .item{font-size:13.5px; color:var(--ink-2)}

/* ---------- SIDEBAR WIDGETS (Themify) ---------- */
.quiz-widget{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.quiz-widget-title{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin:0 0 12px;
}

/* TOC widget */
.quiz-widget-toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.quiz-widget-toc a{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px;
  font-size:13.5px; color:var(--ink-2);
  border-radius:6px;
  text-decoration:none;
  transition:.12s;
}
.quiz-widget-toc a:hover{background:var(--green-tint); color:var(--green-deep)}
.quiz-widget-toc a.active{color:var(--green-deep); font-weight:600; background:var(--green-tint)}
.quiz-widget-toc a .n{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; color:var(--muted); font-weight:600;
  min-width:14px;
}
.quiz-widget-toc a.active .n{color:var(--green)}
.quiz-widget-toc a .lock-ic{
  margin-left:auto; font-size:11px; color:var(--muted); display:none;
}
body[data-tier="free"] .quiz-widget-toc li.locked > a{
  color:var(--muted) !important; cursor:not-allowed; opacity:.62;
}
body[data-tier="free"] .quiz-widget-toc li.locked > a:hover{background:transparent !important}
body[data-tier="free"] .quiz-widget-toc li.locked > a .lock-ic{display:inline}

/* B2B widget */
.quiz-widget-b2b{
  background:linear-gradient(135deg, #102b1c 0%, #0a1f14 100%);
  color:#dde4e0;
  border:none;
  position:relative; overflow:hidden;
}
.quiz-widget-b2b::before{
  content:""; position:absolute; top:-30%; right:-30%;
  width:240px; height:240px;
  background:radial-gradient(circle, rgba(123,210,155,.22) 0%, transparent 60%);
  pointer-events:none;
}
.quiz-widget-b2b .b2b-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#a4dab8;
  background:rgba(123,210,155,.15);
  padding:4px 8px; border-radius:999px;
  margin-bottom:10px;
}
.quiz-widget-b2b h3{
  font-family:'Fraunces', serif;
  color:#fff; font-size:18px; line-height:1.2;
  margin:0 0 8px;
  position:relative; z-index:1;
}
.quiz-widget-b2b h3 em{color:#7bd29b; font-style:italic; font-weight:500}
.quiz-widget-b2b p{color:#9eb0a4; font-size:13px; line-height:1.45; margin:0 0 14px}
.quiz-widget-b2b .b2b-cta{
  display:inline-flex; align-items:center; gap:8px;
  background:#7bd29b; color:#0a1f14 !important;
  padding:10px 16px; border-radius:8px;
  font-weight:600; font-size:13px;
  width:100%; justify-content:space-between;
  position:relative; z-index:1;
  text-decoration:none;
}
.quiz-widget-b2b .b2b-cta:hover{background:#9adfb5}

/* Newsletter widget */
.quiz-widget-newsletter h3{
  font-family:'Fraunces',serif; font-size:22px; color:var(--green-deep);
  margin:0 0 4px;
}
.quiz-widget-newsletter .sub{
  font-size:13.5px; color:var(--ink-2); margin:0 0 14px; line-height:1.4;
}
.quiz-widget-newsletter input[type="email"]{
  width:100%; padding:11px 12px;
  border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:14px;
  margin-bottom:10px;
  background:#fafbfa;
}
.quiz-widget-newsletter input[type="email"]:focus{
  outline:none; border-color:var(--green); background:#fff;
}
.quiz-widget-newsletter button{
  width:100%; padding:11px;
  background:var(--green); color:#fff;
  border:none; border-radius:8px;
  font:inherit; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer;
  text-transform:uppercase;
}
.quiz-widget-newsletter button:hover{background:var(--green-deep)}
.quiz-widget-newsletter .fine{
  font-size:11px; color:var(--muted); margin-top:10px; line-height:1.45;
}

/* ---------- BOTTOM STRIP : autres quiz ---------- */
.other-quizzes{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--section-line);
}
.other-quizzes h4{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  margin:0 0 16px;
}
.other-quizzes .other-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
@media (max-width:780px){
  .other-quizzes .other-grid{grid-template-columns:repeat(2,1fr)}
}
.other-quizzes .other-grid a{
  display:block; padding:14px 16px;
  background:#fbfcfb;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:13.5px; color:var(--ink-2);
  text-decoration:none;
  transition:.12s;
}
.other-quizzes .other-grid a:hover{
  border-color:var(--green); color:var(--green-deep); background:#fff;
  transform:translateY(-1px);
}
.other-quizzes .other-grid a span{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; color:var(--muted);
  display:block; margin-bottom:3px;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- TWEAKS Themify : la colonne droite (sidebar) doit être collante ---------- */
.themify_builder .quiz-result-sidebar{
  position:sticky;
  top:88px;
}
@media (max-width:980px){
  .themify_builder .quiz-result-sidebar{position:static; top:auto}
}