.recommendation-teaser{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr);align-items:center;gap:36px;background:#f4f7f7}
.recommendation-teaser h2{font-size:clamp(27px,3.2vw,42px);letter-spacing:-1px;line-height:1.15;margin-bottom:18px}.recommendation-teaser p{max-width:660px}.recommendation-teaser .button{white-space:normal}
.recommendation-teaser-code{display:flex;flex-direction:column;gap:9px;text-align:center;background:#123744;color:white;padding:24px;border-radius:16px;transition:transform .2s,box-shadow .2s}.recommendation-teaser-code strong{font-size:clamp(36px,4vw,52px);letter-spacing:6px;line-height:1.2;color:#f3ce7b}.recommendation-teaser-code>span:first-child{font-size:11px;letter-spacing:1.6px;font-weight:700}.recommendation-teaser-code small{font-size:12px}.recommendation-teaser-code:hover{transform:translateY(-3px);box-shadow:0 8px 24px #12374424}
.recommendation-page{overflow-wrap:break-word}.recommendation-page .recommendation-hero{background:linear-gradient(120deg,#f7f5ee,#eaf3f4);padding-top:30px;padding-bottom:35px}.recommendation-hero nav{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;margin-bottom:25px}.recommendation-hero h1{max-width:1000px;font-size:clamp(32px,4.5vw,58px);line-height:1.13;letter-spacing:-1.5px;margin-bottom:22px}.recommendation-hero>p{max-width:850px}.recommendation-choice{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0}.recommendation-choice .button{white-space:normal}.recommendation-note{font-size:13px;line-height:1.6;color:#50626c}
.recommendation-page .mareco-section,.recommendation-page .referral{scroll-margin-top:140px}.recommendation-page .recommendation-faq{background:#f8f7f4}.recommendation-faq h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.5px}.recommendation-faq details{border-bottom:1px solid #d7dedd;padding:18px 0}.recommendation-faq summary{cursor:pointer;font-weight:700}.recommendation-faq details p{margin:15px 0 0;max-width:900px}
.recommendation-page a:not(.button):not(.brand):not(.mareco-install){text-underline-offset:4px}.recommendation-page a:not(.button):hover{text-decoration:underline}.recommendation-faq a,.recommendation-hero nav a{color:#006ccf}
@media(max-width:700px){.recommendation-teaser{grid-template-columns:1fr;gap:22px}.recommendation-teaser-code{padding:18px}.recommendation-choice{flex-direction:column;align-items:stretch}.recommendation-hero h1{letter-spacing:-.6px}.recommendation-page .referral,.recommendation-page .mareco-section{scroll-margin-top:110px}}
@media(prefers-reduced-motion:reduce){.recommendation-teaser-code{transition:none}}


/* Accueil : recommandation sur fond doré, contraste renforcé. */
.recommendation-teaser{background:linear-gradient(115deg,#eacb82 0%,#d9ae55 65%,#cfa044 100%);color:#242a29}
.recommendation-teaser .eyebrow{color:#493617}
.recommendation-teaser h2,.recommendation-teaser p{color:#242a29}
.recommendation-teaser .button.gold{background:#173640;color:#fff;border-color:#173640}
.recommendation-teaser .button.gold:hover{background:#0c2530;border-color:#0c2530}
.recommendation-teaser-code{background:#12313d;color:#fff;box-shadow:0 8px 24px #543b1424;border:1px solid #f5dfac66}
.recommendation-teaser-code:hover{background:#0b2733;box-shadow:0 12px 28px #543b1438}
.recommendation-teaser-code .recommendation-mareco-heading{display:flex;align-items:center;justify-content:center;gap:13px;line-height:1.5;letter-spacing:1px;font-size:11px;font-weight:700}
.recommendation-mareco-heading img{flex:0 0 48px;width:48px;height:48px;object-fit:contain;background:#fff;padding:5px;border-radius:12px}
.recommendation-teaser a:focus-visible{outline:3px solid #102b44;outline-offset:6px}