/* Page parrainage */
.ccn-ref { background: var(--page); }
.ccn-ref-hero { padding: var(--sec-pad) 0 var(--s-7); background: radial-gradient(80% 90% at 85% 0%, var(--terre-50), transparent 60%), var(--page); }
.ccn-ref-hero-in { max-width: 860px; text-align: center; }
.ccn-ref-k { margin: 0 0 var(--s-4); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
html body .ccn-ref h1 { margin: 0 0 var(--s-4); font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; }
.ccn-ref-lead { margin: 0 auto var(--s-5); max-width: 60ch; font-size: 1.125rem; line-height: 1.6; color: var(--text-soft); }
.ccn-ref-code { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--text-soft); }
.ccn-ref-code strong { font-size: 18px; letter-spacing: .08em; color: var(--ink); }
.ccn-ref-body { padding: var(--s-6) 0 var(--sec-pad); }
.ccn-ref-body > .ccn-wrap { max-width: 900px; }
html body .ccn-ref .ccn-ref-q { margin: 0 0 var(--s-5); text-align: center; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; }
.ccn-ref-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-bottom: var(--s-6); }
.ccn-ref .ccn-ref-choice { display: grid; gap: 6px; padding: var(--s-6); text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.ccn-ref .ccn-ref-choice:hover { transform: translateY(-2px); border-color: var(--text-soft); }
.ccn-ref .ccn-ref-choice.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ccn-ref-choice-t { font-size: 1.25rem; font-weight: 500; }
.ccn-ref-choice-x { font-size: 15px; color: var(--text-soft); }
.ccn-ref-panel { padding: var(--s-7); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); }
html body .ccn-ref .ccn-ref-panel h3 { margin: 0 0 var(--s-4); font-size: 1.5rem; font-weight: 500; }
.ccn-ref-gift { margin: 0 0 var(--s-5); padding: 12px 16px; border-radius: 12px; background: var(--terre-50); color: var(--terre-800); line-height: 1.5; }
.ccn-ref-offers { display: grid; gap: 12px; }
.ccn-ref-offer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ccn-ref-offer:hover { border-color: var(--accent); background: var(--terre-50); }
.ccn-ref-offer b { font-size: 1.125rem; font-weight: 500; }
.ccn-ref-offer span { font-size: 14px; color: var(--text-soft); text-align: right; }
.ccn-ref-offer::after { content: "→"; color: var(--accent); font-size: 20px; }
.ccn-ref-note { margin: var(--s-5) 0 0; font-size: 14px; color: var(--text-soft); line-height: 1.55; }
.ccn-ref-note a { color: var(--ink); }
.ccn-ref-big-code { margin: 0 0 var(--s-4); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.ccn-b--wa { background: #25D366; color: #fff; }
@media (max-width: 767px) { .ccn-ref-choices { grid-template-columns: 1fr; } .ccn-ref-offer { flex-wrap: wrap; } .ccn-ref-offer span { text-align: left; } }
/* Page promo (sans ?ref) */
.ccn-ref-form { max-width: 520px; margin: 0 auto; text-align: left; }
.ccn-ref-form label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text-soft); }
.ccn-ref-form > div { display: flex; gap: 10px; }
.ccn-ref-form input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; text-transform: uppercase; letter-spacing: .06em; }
.ccn-ref-perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); margin-bottom: var(--s-7); }
.ccn-ref-perk { padding: var(--s-6); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); }
.ccn-ref-perk--f { background: var(--terre-50); border-color: transparent; }
.ccn-ref-perk p { margin: 0; line-height: 1.55; color: var(--text-soft); }
.ccn-ref-perk .ccn-ref-perk-k { font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ccn-ref-perk .ccn-ref-perk-n { margin: 6px 0 8px; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ccn-ref-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin: 0 0 var(--s-7); padding: 0; list-style: none; counter-reset: st; }
.ccn-ref-steps li { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); line-height: 1.55; color: var(--text-soft); counter-increment: st; }
.ccn-ref-steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; }
.ccn-ref-steps b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
.ccn-ref-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius-card); background: var(--ink); color: #fff; }
html body .ccn-ref .ccn-ref-member h2 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 500; color: #fff; }
.ccn-ref-member p { margin: 0; color: rgba(255,255,255,.75); }
.ccn-ref-ctas { justify-content: center; margin-top: var(--s-5); }
@media (max-width: 767px) { .ccn-ref-perks, .ccn-ref-steps { grid-template-columns: 1fr; } .ccn-ref-form > div { flex-direction: column; } }