/* Content pages: loaded last; desktop layouts and the card artwork stay intact. */ @media (max-width: 800px) { #site :is(.seo-main, .enterprise-main, .legal-heading, .legal-layout) { min-width: 0; overflow-wrap: break-word; } #site :is(.seo-hero, .seo-reading, .seo-faq, .enterprise-support-inner, .enterprise-faq, .legal-layout) { grid-template-columns: minmax(0, 1fr); gap: 28px; } #site :is(.seo-hero, .seo-reading, .seo-faq, .enterprise-support-inner, .enterprise-faq, .legal-layout) > * { min-width: 0; } /* Service guides: remove the narrow sidebar before it squeezes the copy. */ #site .seo-breadcrumb, #site .enterprise-breadcrumb { font-size: 12px; line-height: 1.6; gap: 6px 10px; padding-block: 18px 4px; } #site .seo-hero { padding-block: 24px 36px; } #site .seo-hero h1 { font-size: clamp(30px, 5.2vw, 42px); line-height: 1.16; } #site .seo-hero .eyebrow { font-size: 11px; margin-bottom: 16px; } #site .seo-lead { font-size: 16px; line-height: 1.75; margin-block: 20px 24px; } #site .seo-confirmation { font-size: 12px; line-height: 1.65; } #site .seo-hero-image { aspect-ratio: 3 / 2; max-height: 360px; } #site .seo-reading { padding-block: 36px 44px; } #site .seo-contents { position: static; top: auto; } #site .seo-contents > p { font-size: 12px; margin-bottom: 12px; } #site .seo-contents nav { grid-template-columns: minmax(0, 1fr); } #site .seo-contents nav a { min-height: 44px; align-items: center; padding-block: 11px; font-size: 14px; line-height: 1.6; } #site .seo-contents-contact { display: none; } #site .seo-copy-section { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding-block: 28px; scroll-margin-top: 110px; } #site .seo-copy h2 { font-size: clamp(24px, 4vw, 30px); line-height: 1.3; margin-bottom: 16px; } #site .seo-copy p { font-size: 16px; line-height: 1.8; margin-bottom: 16px; } #site .seo-copy a { overflow-wrap: anywhere; } #site .seo-faq { padding-block: 38px; } #site :is(.seo-faq, .seo-related, .seo-final) h2 { font-size: clamp(27px, 4.5vw, 34px); line-height: 1.25; } #site .seo-faq > div > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; } #site .seo-faq-list summary { padding-block: 19px; gap: 16px; font-size: 16px; line-height: 1.6; } #site .seo-faq-list details p { font-size: 15px; line-height: 1.8; margin-right: 0; } #site .seo-related { padding-block: 38px 44px; } #site .seo-related-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; } #site .seo-related-card { padding: 22px; } #site .seo-related-card h3 { font-size: 21px; line-height: 1.35; } #site .seo-related-card p, #site .seo-guide-card p { font-size: 15px; line-height: 1.75; } #site .seo-related-card > span, #site .seo-guide-card > span { font-size: 14px; min-height: 44px; } #site .seo-final { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 36px; } #site .seo-final p:not(.eyebrow) { font-size: 15px; line-height: 1.75; } #site .seo-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #site .seo-actions .ui-button, #site .seo-final .ui-button { width: 100%; max-width: none; min-height: 54px; padding: 14px 20px; font-size: 16px; } #site .seo-phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; } /* Business audiences and process remain readable from phones to small tablets. */ #site .enterprise-main h1 { font-size: clamp(31px, 5.2vw, 43px); line-height: 1.16; } #site .enterprise-main h2 { font-size: clamp(27px, 4.5vw, 35px); line-height: 1.25; } #site .enterprise-main h3 { font-size: 23px; line-height: 1.35; } #site .enterprise-hero { grid-template-columns: minmax(0, 1fr); padding-block: 24px 36px; gap: 28px; } #site .enterprise-kicker { font-size: 11px; } #site .enterprise-lead { font-size: 16px; line-height: 1.75; margin-block: 20px 24px; } #site .enterprise-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #site .enterprise-actions .ui-button, #site .enterprise-support .ui-button { width: 100%; min-height: 54px; padding: 14px 20px; font-size: 16px; line-height: 1.4; } #site .enterprise-phone { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; } #site .enterprise-hero-visual { height: auto; min-height: 0; max-height: 360px; aspect-ratio: 16 / 10; } #site .enterprise-hero-visual figcaption { left: 22px; bottom: 20px; } #site .enterprise-benefits { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 24px; } #site .enterprise-benefits > div { align-items: center; gap: 16px; } #site .enterprise-benefits strong { font-size: 16px; } #site .enterprise-benefits small { font-size: 14px; line-height: 1.6; } #site .enterprise-audiences { padding-block: 44px; } #site .enterprise-section-heading { margin-bottom: 28px; } #site .enterprise-audience-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } #site .enterprise-audience { scroll-margin-top: 110px; } #site .enterprise-audience-photo { aspect-ratio: 3 / 2; max-height: 380px; margin-bottom: 20px; } #site .enterprise-audience > p:not(.enterprise-guide-link) { font-size: 16px; line-height: 1.75; max-width: none; } #site .enterprise-text-link { min-height: 44px; font-size: 15px; line-height: 1.6; } #site .enterprise-guide-link { font-size: 14px; line-height: 1.75; } #site .enterprise-guide-link a { display: inline-block; padding-block: 6px; } #site .enterprise-support-inner { padding-block: 40px; } #site .enterprise-support-inner > div > p:not(.enterprise-kicker) { font-size: 16px; line-height: 1.75; } #site .enterprise-steps { grid-template-columns: minmax(0, 1fr); gap: 0; } #site .enterprise-steps li { display: flex; gap: 18px; padding-block: 22px; } #site .enterprise-steps li > span { margin: 0; font-size: 25px; } #site .enterprise-steps h3 { font-size: 20px; } #site .enterprise-steps p { font-size: 15px; line-height: 1.75; } #site .enterprise-faq { padding-block: 40px 44px; } #site .enterprise-faq-list summary { font-size: 16px; line-height: 1.6; gap: 15px; padding-block: 20px; } #site .enterprise-faq-list details > p { font-size: 15px; line-height: 1.8; margin-right: 0; } /* The actual 100 € vector, logo, gold details and conditions marker are unchanged. */ #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-landing-hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 32px 30px; gap: 26px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-eyebrow { font-size: 12px; line-height: 1.6; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-intro { font-size: clamp(22px, 4vw, 29px); line-height: 1.35; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-amount { font-size: clamp(84px, 25vw, 116px); white-space: nowrap; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-reward { font-size: clamp(27px, 5vw, 35px); line-height: 1.25; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions { gap: 12px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button { min-height: 60px; font-size: 16px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button--secondary { min-height: 54px; font-size: 16px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-visual { width: 92%; max-width: 360px; padding-block: 18px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-summary-strip strong { font-size: 16px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-summary-strip span:not(.fuel-summary-icon) { font-size: 14px; line-height: 1.65; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-section-heading .eyebrow, #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-support-copy > .eyebrow { font-size: 12px; line-height: 1.6; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) :is(.fuel-section-heading, .fuel-support-copy, .fuel-offer-faq .faq-heading) h2 { font-size: clamp(27px, 4.5vw, 34px); line-height: 1.3; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-section { padding-block: 44px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-photo { aspect-ratio: 3 / 2; max-height: none; margin-bottom: 20px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-card h3 { font-size: 24px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-card p, #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-section-heading > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-glass-card .fuel-inline-link { min-height: 44px; font-size: 15px; line-height: 1.6; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-step-grid > li { grid-template-columns: 38px minmax(0, 1fr); gap: 0 16px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-step-grid h3 { font-size: 21px; line-height: 1.4; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-step-grid p, #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-support-point p { font-size: 15px; line-height: 1.75; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-section-actions { align-items: stretch; flex-direction: column; gap: 12px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-section-actions .ui-button, #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-actions .ui-button { width: 100%; min-height: 54px; font-size: 16px; padding: 14px 20px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-terms-link { min-height: 44px; padding-block: 8px; font-size: 14px; line-height: 1.65; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-support-section { grid-template-columns: minmax(0, 1fr); padding-block: 44px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-support-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.75; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-faq .faq-heading > p:not(.eyebrow), #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-faq .faq-list details p { font-size: 15px; line-height: 1.8; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-faq .faq-list summary { font-size: 16px; line-height: 1.6; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-offer { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 24px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-offer h2 { font-size: clamp(25px, 4.3vw, 32px); line-height: 1.3; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-offer p { font-size: 15px; line-height: 1.75; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-actions { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 8px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-conditions { grid-template-columns: minmax(0, 1fr); gap: 16px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-conditions-copy > p { font-size: 14px; line-height: 1.85; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-banner-inner { flex-direction: column; align-items: stretch; gap: 12px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-banner p { font-size: 14px; line-height: 1.7; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-banner .ui-button { min-height: 44px; font-size: 14px; } /* Legal information uses stacked definition rows instead of a narrow table. */ #site .legal-heading { padding-block: 34px; } #site .legal-heading h1 { font-size: clamp(31px, 5.2vw, 43px); line-height: 1.2; } #site .legal-heading p:not(.eyebrow) { font-size: 16px; line-height: 1.75; } #site .legal-updated { display: block; font-size: 13px; line-height: 1.7; } #site .legal-layout { padding-bottom: 44px; } #site .legal-nav { position: static; top: auto; padding: 18px 20px; } #site .legal-nav a { display: flex; align-items: center; min-height: 44px; padding-block: 9px; font-size: 15px; } #site .legal-content { max-width: none; } #site .legal-content section { padding-block: 28px; scroll-margin-top: 110px; } #site .legal-content h2 { font-size: clamp(25px, 4.2vw, 32px); line-height: 1.3; margin-bottom: 18px; } #site .legal-content p:not(.legal-number), #site .legal-content ul, #site .legal-details { font-size: 16px; line-height: 1.8; } #site .legal-details > div { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 16px 18px; } #site .legal-details :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; } #site .legal-content .ui-button { width: 100%; min-height: 52px; font-size: 15px; line-height: 1.5; padding: 12px 18px; } } @media (max-width: 480px) { #site .seo-guide-grid { grid-template-columns: minmax(0, 1fr); } #site .seo-guide-card { padding: 22px; } #site .enterprise-hero-visual figcaption { left: 18px; bottom: 16px; } #site .enterprise-audience-grid { gap: 32px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-final-offer { padding: 26px 20px; } } @media (max-width: 360px) { #site .seo-copy-section { grid-template-columns: 20px minmax(0, 1fr); gap: 8px; } #site .seo-related-card, #site .seo-guide-card { padding: 20px; } #site .enterprise-steps li { gap: 14px; } #site .legal-nav { padding-inline: 16px; } #site .legal-details > div { padding-inline: 14px; } } /* Keep each partner reward, action and card together on a phone screen. */ @media (max-width: 800px) { #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-landing-hero-grid { justify-items: center; gap: 12px; padding-block: 24px 26px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-copy { width: 100%; max-width: 480px; text-align: center; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-intro { font-size: clamp(20px, 5.3vw, 24px); line-height: 1.3; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-amount { margin-block: 5px 4px; font-size: clamp(88px, 25vw, 112px); line-height: .98; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-title-reward { margin-top: 0; font-size: clamp(24px, 6.3vw, 28px); line-height: 1.25; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 360px; margin: 20px auto 0; gap: 4px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button { min-height: 56px; padding: 10px 20px; font-size: 16px; line-height: 1.4; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button--primary { padding-right: 12px; box-shadow: 0 8px 24px #000e2938; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-cta-arrow { width: 30px; height: 30px; font-size: 19px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button--secondary { --action-bg: transparent; --action-border: transparent; --action-color: #d5e7ff; --action-hover-bg: #ffffff0d; --action-hover-border: transparent; min-height: 44px; padding: 8px 14px; font-size: 14px; font-weight: 500; gap: 8px; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #9ab9da; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-actions .ui-button--secondary > .icon { width: 17px; height: 17px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-visual { width: 82%; max-width: 270px; padding: 8px 0 6px; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-offer-visual:before { inset: -24px -20px; opacity: .65; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-card { border-radius: 12px; transform: rotate(-3deg); box-shadow: 0 18px 34px #000d2166, 0 0 0 1px #fff3; } #site:is([data-campaign="carburant"],[data-campaign="diagnosur"]) .fuel-hero-shade { background: linear-gradient(180deg, #03172fe3 0%, #03172fce 54%, #03172feb 100%); } }