/* Phase 40 - mobile P0 guardrails. Objectif: lisibilite Android/iOS, cibles tactiles >=44px, zero scroll horizontal. */ @media (max-width: 820px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { line-height: 1.58; } *, *::before, *::after { box-sizing: border-box; } main, section, article, header, footer, nav, .container, .wrap, .content, .page, .hero, .panel, .card, .grid, .section-inner { max-width: 100%; min-width: 0; } img, video, iframe, canvas, svg { max-width: 100%; height: auto; } table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } pre, code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } h1, h2, h3, p, li, a, button, input, select, textarea, label { overflow-wrap: anywhere; } p, li { font-size: max(16px, 1rem); } input, select, textarea { min-height: 48px; font-size: 16px !important; } button, input[type="submit"], input[type="button"], .btn, .button, .cta, .cta-button, a.btn, a.button, [role="button"] { min-height: 44px; min-width: 44px; touch-action: manipulation; } .scorecredit-nav a, .scorecredit-nav button, .unified-nav a, .unified-nav button, .navlinks a, .mobile-menu a, .mobile-overlay a { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 520px) { h1 { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1.04; } h2 { font-size: clamp(1.45rem, 7vw, 2.2rem); line-height: 1.12; } .container, .wrap, main, article, section { padding-left: min(18px, 5vw); padding-right: min(18px, 5vw); } } /* ============================================================================ scorecredit-mobile-readability.css ---------------------------------------------------------------------------- Mobile readability override for scorecredit.fr (and sister Score* sites). Author: Cowork audit ยท 2026-05-23 GROUNDING (measured on the live served stylesheet, not assumed): - html / body base font-size is ALREADY 16px. - Viewport meta is correct and does NOT disable zoom (kept that way). - Existing breakpoints: 520 / 560 / 620 / 640 / 820 / 920 / 1100 / 1220px. They reflow layout but never scale font-size UP -> this file does that. - Sub-13px text is mostly UI chrome (nav mini-icons, chat badge, util bar, .eyebrow, footer/legal, Capucine `small`) -> intentionally NOT inflated, to avoid breaking the burger nav, badges and the Capucine chat bubble. - Real readability offenders are 14-14.4px CONTENT selectors: .toolbox-grid p, .disclaimer, .toolbox .hint, .hero-author, body copy. - BONUS FIX: form inputs were 14.4px -> on iOS Safari any input <16px triggers auto-zoom-on-focus. Forced to 16px below. DESIGN RULES (from brief): - Everything is scoped inside @media (max-width: 768px) -> desktop untouched. - Min body/content text 16px; min CTA 17px + weight >=600; touch target 44px; body line-height >=1.5; user zoom preserved. - !important is used only on readability-critical declarations because this file is injected LAST as an additive override and must beat existing component specificity. It is deliberately NOT used on layout properties. LOAD ORDER: include at the very end of , AFTER all other stylesheets. ========================================================================== */ @media (max-width: 768px) { /* --- 1. Base rhythm ------------------------------------------------------ */ /* Body copy comfortable + generous line-height for small screens. */ body { font-size: 16px !important; line-height: 1.55 !important; -webkit-text-size-adjust: 100%; /* stop iOS silently inflating/shrinking */ text-size-adjust: 100%; } /* --- 2. Readable CONTENT text: floor at 16px ----------------------------- */ /* Generic flow text + the specific 14-14.4px offenders found on the site. */ p, li, dd, dt, td, th, blockquote, .lead, .disclaimer, .toolbox-grid p, .toolbox .hint, .hero-author, .sc-msg, .card p, .content p, article p, article li { font-size: max(1rem, 16px) !important; line-height: 1.55 !important; } /* Headings: fluid, never microscopic, never desktop-huge on a phone. */ h1 { font-size: clamp(1.6rem, 6vw, 2.1rem) !important; line-height: 1.2 !important; } h2 { font-size: clamp(1.35rem, 5vw, 1.7rem) !important; line-height: 1.25 !important; } h3 { font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important; line-height: 1.3 !important; } /* --- 3. Form fields: 16px to KILL iOS focus-zoom ------------------------- */ /* Critical for the simulators / funnel forms (business CTAs). */ input, select, textarea, .sc-chat-input input { font-size: 16px !important; line-height: 1.4 !important; } /* Form labels readable too. */ label, .field-label, .form-label { font-size: max(1rem, 16px) !important; letter-spacing: 0.01em; } /* --- 4. CTAs: bigger, bolder, finger-friendly ---------------------------- */ .btn, .cta, button, a.btn, a.button, input[type="submit"], button[type="submit"], .toolbox a.button { font-size: max(1.0625rem, 17px) !important; /* 17px floor */ font-weight: 600 !important; line-height: 1.3 !important; min-height: 44px; /* WCAG touch target */ padding: 12px 22px; display: inline-flex; align-items: center; justify-content: center; } /* --- 5. Tap targets for nav / interactive chrome (size of HIT area, not */ /* the font, so the burger menu & nav don't bloat) ------------------ */ nav.scorecredit-nav a, .navlinks a, .burger, .nav-toggle, [aria-label="menu"] { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } /* Nav link TEXT to a comfortable-but-compact 15px (not 16, to protect the */ /* horizontal nav layout / burger trigger from wrapping). */ .navlinks a { font-size: 0.94rem !important; } /* --- 6. Small chrome: lift only the worst, keep the rest compact --------- */ /* The 10.8-12.2px chrome is technically tiny; nudge the readable ones to */ /* ~13px so they're legible without inflating badges/icons/layout. */ .eyebrow, .toolbox .hint.small, .sc-chat-head .sc-sub, .sc-capucine-text small, .scorecredit-util-bar { font-size: 0.8125rem !important; /* 13px floor for legibility */ letter-spacing: 0.02em; line-height: 1.45 !important; } /* Capucine chat bubble: keep it visible & usable (lead driver). Body text */ /* of messages already lifted to 16px via .sc-msg above; head stays compact.*/ #sc-chat-bubble { } /* no size change: position/visibility untouched */ /* --- 7. Explicitly LEFT SMALL (by design, to avoid breakage) ------------- */ /* footer/legal copyright allowed small per brief; badges/icons cosmetic. */ footer, .footer-row.legal, .legal { font-size: 0.875rem !important; /* 14px - acceptable for legal */ line-height: 1.5 !important; } /* #sc-chat-bubble .sc-chat-badge -> notification badge, intentionally 11px */ /* nav .mini-icon -> icon glyph label, intentionally small */ } /* --- 8. Very small phones (<=380px): protect long words / CTAs from clipping */ @media (max-width: 380px) { .btn, .cta, button, a.btn { padding: 12px 16px; } h1 { font-size: clamp(1.5rem, 7vw, 1.9rem) !important; } body { word-break: break-word; overflow-wrap: anywhere; } } /* ============================================================================ ACCESSIBILITY NOTE: this file never sets `maximum-scale` or `user-scalable`. Pinch-zoom remains enabled. Do NOT add maximum-scale=1.0 to the viewport tag. ========================================================================== */