/* ===== Design tokens ===== */ :root{ --red:#D6291C; --red-hover:#B01F15; --yellow:#FFC934; --sky-light:#EAF7FF; --sky:#38BDF8; --navy:#0B1F3A; --blue:#1E5EFF; --mint:#1C3E4B; --mint-light:#C6F5FB; --mint-hover:#0F262F; --hero-navy:#0F262F; --secondary-navy:#1C3E4B; --gray-light:#F3F5F7; --gray-slate:#64748B; --orange:#E8501D; --turquoise:#1CA7B0; --green:#1C3E4B; --emerald-dark:#063F3A; --emerald:#10B981; --forest:#143425; --lime:#8EFB84; --fc-bg:#C6F5FB; --fc-accent:#8FE2EE; --fc-cta:#66E3F6; --fc-text:#0B2A35; --text-primary:#424242; --text-secondary:#6B6B6B; --text-tertiary:#8A8A8A; --cream:#F7F5F2; --border:#ECECEC; --border-cream:#E5E1DA; --border-form:#B7B2A4; --white:#FFFFFF; --radius-card-lg:20px; --radius-card:12px; --radius-card-md:14px; --radius-btn:8px; --radius-btn-lg:10px; --shadow-simulator:0 20px 50px rgba(0,0,0,.12); --shadow-faq:0 8px 24px rgba(0,0,0,.04); } /* ===== Reset ===== */ *,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent} [hidden]{display:none!important} /* Set by the inline scroll-restore script in every page's (runs before this stylesheet's own so it's already on the element by the time anything paints) whenever this reload/back-navigation has a saved scroll position to restore. Keeps the page invisible for the few milliseconds between first paint and that script's own window.scrollTo() call, instead of letting the visitor see the page's top/hero first and then jump down — the browser's native scrollRestoration can't guarantee that ordering on its own. Removed by that same script right after it restores the position (or after its own timeout safety-net). */ html[data-restoring-scroll="1"]{visibility:hidden} /* overflow-x:clip, not hidden — this was hidden until a user report that .site-header (position:sticky) scrolled away instead of sticking, on every page. Per the CSS Overflow spec, setting overflow-x to anything other than visible forces the other axis to compute as auto if it isn't already non-visible — on html/body specifically that auto turns them into a real scroll container, which breaks position:sticky for any descendant that expects to stick to the *viewport* (confirmed via Playwright: the header's bounding box moved with the page instead of staying pinned at y=0). overflow:clip clips overflow the same way hidden does (no horizontal scrollbar) without triggering that auto- pairing quirk or creating a scrolling box, so sticky descendants work again — verified no horizontal-scroll regression across index/contact/ a product page/faq at mobile and desktop widths. */ html{width:100%;max-width:100%;overflow-x:clip} body{margin:0;-webkit-font-smoothing:antialiased;width:100%;max-width:100%;overflow-x:clip} h1,h2,h3,h4,p{margin:0} /* Long unbroken strings (emails, URLs) fall back to breaking mid-word only when there's no other way to avoid a horizontal overflow — normal word-wrapping and any component's own white-space/text-align are unaffected. */ h1,h2,h3,h4,h5,h6,p,li,a,span{overflow-wrap:break-word;word-wrap:break-word} button{font-family:inherit} img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none} video,iframe,svg{max-width:100%} a{color:var(--text-primary);text-decoration:none} a:hover{color:var(--navy)} body{ font-family:'Figtree',sans-serif; color:var(--text-primary); background:var(--white); } .wrap{max-width:1320px;margin:0 auto} /* ===== Buttons ===== */ .btn{ display:inline-block; padding:14px 24px; border-radius:var(--radius-btn); background:var(--mint); color:#fff; font-weight:700; font-size:14px; border:none; cursor:pointer; text-align:center; } .btn:hover{background:var(--mint-hover);color:#fff;text-decoration:none} .btn:disabled{cursor:not-allowed;opacity:.8} .btn:disabled:hover{background:var(--mint)} .btn-spinner{ display:inline-block;width:15px;height:15px;margin:0 8px -3px 0; border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff; animation:btn-spin .7s linear infinite; } @keyframes btn-spin{to{transform:rotate(360deg)}} .btn-outline{ padding:10px 16px; border-radius:var(--radius-btn); border:1.5px solid var(--navy); background:transparent; font-weight:700; font-size:13px; color:var(--navy); } .btn-outline:hover{text-decoration:none;background:rgba(11,31,58,.06)} .btn-outline-mint{ display:inline-block; padding:16px 24px; border-radius:14px; background:#fff; color:var(--fc-text); font-weight:700; font-size:15px; border:1.5px solid var(--fc-text); cursor:pointer; text-align:center; } .btn-outline-mint:hover{background:var(--mint);color:#fff;text-decoration:none} .header-ctas .btn-outline,.header-ctas .btn,.header-ctas .btn-pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .header-ctas .btn-outline{padding:8px 14px} .header-ctas .btn{padding:10px 18px} .header-ctas svg{flex-shrink:0} .btn-pill{ padding:10px 20px;border-radius:999px;border:1.5px solid var(--navy); background:transparent;font-weight:700;font-size:13.5px;color:var(--navy); } .btn-pill:hover{text-decoration:none;background:rgba(11,31,58,.06)} .lang-switcher{ border:1.5px solid var(--border-cream);border-radius:var(--radius-btn,8px); padding:8px 10px;font-size:13px;font-weight:600;color:var(--text-primary); background:#fff;cursor:pointer; } .lang-switcher-mount-mobile{padding:80px 20px 20px;display:flex;justify-content:center} .lang-switcher-mount-mobile .lang-switcher{width:auto;min-width:140px;text-align:center} /* ===== Header ===== */ .site-header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--border); } .header-utility{background:var(--gray-light);border-bottom:1px solid var(--border)} .header-utility-inner{ max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:8px clamp(20px,3.4vw,40px); } .header-utility-links{display:flex;align-items:center;gap:20px} .header-utility-links a{ font-family:'Figtree',sans-serif;font-size:12.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap; } .header-utility-links a:hover{color:var(--text-secondary)} .lang-switcher-mount-utility .lang-switcher{padding:4px 8px;font-size:12px} @media (max-width:1279px){ .header-utility{display:none} } .header-inner{ position:relative; max-width:1320px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(20px,3.4vw,40px); } .logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo:hover,.logo:focus,.logo:active{text-decoration:none} .logo-mark{ width:36px;height:36px;border-radius:9px;background:var(--mint); display:flex;align-items:center;justify-content:center; font-family:'Quicksand',sans-serif;font-weight:700;color:#fff;font-size:18px; position:relative;flex-shrink:0; } .logo-mark .dot{ position:absolute;top:-4px;right:-4px;width:10px;height:10px; border-radius:50%;background:var(--mint-light); } .logo-name{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:27px; color:var(--mint);letter-spacing:-.5px; } .main-nav{display:flex;align-items:center;gap:clamp(18px,2vw,32px)} .main-nav a{ font-family:'Figtree',sans-serif;font-weight:600;font-size:15px;color:var(--text-primary);white-space:nowrap; } .main-nav a:hover{color:var(--text-primary)} .header-ctas{display:flex;align-items:center;gap:8px} .nav-toggle{ display:none; appearance:none;-webkit-appearance:none; background:none;border:none;border-radius:0;box-shadow:none; flex-direction:column;align-items:center;justify-content:center; gap:5px;cursor:pointer;padding:4px;margin:0;color:var(--text-primary); } .nav-toggle-icon{display:flex;align-items:center;justify-content:center;color:var(--text-primary)} .nav-toggle-icon .icon-close{display:none} .nav-toggle[aria-expanded="true"] .icon-burger{display:none} .nav-toggle[aria-expanded="true"] .icon-close{display:block} .nav-toggle-label{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--text-primary)} .nav-account-btn{ display:none; width:38px;height:38px;border-radius:50%;background:transparent; border:1.5px solid var(--navy);color:var(--navy); align-items:center;justify-content:center;flex-shrink:0; } .nav-account-btn:hover{background:rgba(11,31,58,.06);text-decoration:none} .mobile-panel{ display:none; position:fixed;left:0;right:0;bottom:0;background:#fff; flex-direction:column;overflow-y:auto;z-index:55; } .mobile-nav-list{display:flex;flex-direction:column} .mobile-nav-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:20px clamp(20px,4vw,48px);border-bottom:1px solid var(--border); font-family:'Figtree',sans-serif;font-weight:500;font-size:17px;color:var(--text-primary); } .mobile-nav-row:hover{text-decoration:none;color:var(--text-primary)} .mobile-nav-row .chevron{color:var(--text-primary);flex-shrink:0} .mobile-nav-row-last{border-bottom:1px solid var(--border)} .mnav-footer{display:flex;flex-direction:column;background:var(--gray-light);padding:10px 0} .mnav-footer-link{padding:12px clamp(20px,4vw,48px);font-family:'Figtree',sans-serif;font-size:14px;font-weight:400;color:var(--text-secondary)} .mnav-footer-link:hover{color:var(--text-secondary)} @media (max-width:1279px){ .main-nav,.header-ctas{display:none} .nav-toggle{display:flex;order:1} .logo{order:2} .nav-account-btn{display:flex;order:3} .site-header.nav-open .mobile-panel{display:flex} } /* ===== Hero / Simulateur ===== */ .hero{background:linear-gradient(135deg,var(--emerald-dark) 0%,var(--emerald-dark) 35%,var(--emerald) 115%);padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px)} .hero-inner{ max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(24px,9vw,160px); } .simulator-card{ flex:1 1 480px;background:#fff;border-radius:var(--radius-card-lg); padding:clamp(24px,3.5vw,40px);box-shadow:var(--shadow-simulator); } .simulator-title{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(24px,2.8vw,30px); color:var(--text-primary);margin:0 0 22px;text-align:center; } .amount-display{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:22px;color:var(--text-primary); text-align:center;margin:0 0 14px; } .amount-display.is-placeholder{color:var(--text-tertiary)} .amount-slider-control.is-invalid .amount-display{color:var(--red)} .amount-control{display:flex;align-items:center;gap:12px;margin-bottom:8px} .amount-btn{ width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1.5px solid #D8D8D8; background:#fff;font-size:18px;color:var(--text-primary);cursor:pointer; line-height:1; } .amount-btn:hover{border-color:var(--navy);color:var(--navy)} input[type="range"]{ -webkit-appearance:none;appearance:none;height:6px;border-radius:999px; background:#E2E2E2;outline:none;accent-color:var(--red);width:100%;display:block; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red); border:3px solid #fff;box-shadow:0 2px 8px rgba(214,41,28,.5);cursor:pointer; } input[type="range"]::-moz-range-thumb{ width:22px;height:22px;border-radius:50%;background:var(--red);border:3px solid #fff; box-shadow:0 2px 8px rgba(214,41,28,.5);cursor:pointer; } .amount-range-labels{ display:flex;justify-content:space-between;font-size:13px;color:var(--text-tertiary); margin:0 0 26px;padding:0 46px; } .amount-select-wrap{display:none;position:relative;margin-bottom:26px} .amount-select{ flex:1;min-width:0;width:100%; appearance:none;-webkit-appearance:none;-moz-appearance:none; padding:16px 44px 16px 18px;border-radius:var(--radius-btn-lg); border:1.5px solid var(--text-primary);background:#fff;background-image:none; font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px; color:var(--text-primary);margin:0; } .amount-select.is-invalid{border-color:var(--red)} .amount-select-suffix{ position:absolute;right:18px;top:50%;transform:translateY(-50%); pointer-events:none;color:var(--text-primary);font-weight:800;font-size:16px; } @media (max-width:859px){ .amount-slider-control{display:none} .amount-select-wrap{display:flex} } .project-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px; } .project-card{ display:flex;flex-direction:row;align-items:center;gap:12px;padding:18px; border-radius:var(--radius-card);border:1.5px solid var(--text-primary);background:#fff; cursor:pointer;text-align:left; } .project-card svg{color:var(--text-primary);flex-shrink:0} .project-card span{font-weight:600;font-size:13.5px;color:var(--text-primary)} .project-card[aria-pressed="true"]{ border-color:var(--red);background:rgba(214,41,28,.05); } .project-card[aria-pressed="true"] svg{color:var(--red)} .cta-block{ width:100%;padding:16px;border:none;border-radius:var(--radius-btn-lg); background:var(--mint);color:#fff;font-weight:800;font-size:14px;letter-spacing:.6px; text-transform:uppercase;cursor:pointer; } .cta-block:hover{background:var(--mint-hover)} .promo-col{flex:1 1 380px;display:flex;flex-direction:column;justify-content:center;gap:16px} .promo-title{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(34px,5vw,50px); color:#fff;line-height:1.05;margin:0; } .promo-title .accent{color:var(--mint-light)} .promo-rate{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(56px,9vw,84px); color:#fff;margin:0;line-height:1; } .promo-rate .pct{font-size:.5em} .promo-conditions{font-weight:700;font-size:15px;color:rgba(255,255,255,.88);margin:0} .promo-photo{ width:min(280px,70vw);aspect-ratio:1;border-radius:50%;overflow:hidden; margin-top:8px;border:6px solid #fff; } .promo-photo img,.insurance-photo img{ width:100%;height:100%;object-fit:cover;display:block; } @media (max-width:859px){ .promo-col{align-items:center;text-align:center} .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===== Hero Rentrée (campaign banner) ===== */ .hero-rentree{position:relative;width:100%;overflow:hidden;background:#fff;padding:0 clamp(20px,4vw,48px)} .hero-rentree-wave{position:absolute;left:0;top:0;width:100%;height:225px;background:var(--hero-navy);clip-path:polygon(0 0,100% 0,100% 88%,0 100%)} /* Same width mechanism as .solutions-section/.solutions-grid below: gutter on the outer section (clamp(20px,4vw,48px)), 1320px cap on this inner box — the photo reaches the exact same left/right lines as the cards and header, at every viewport width. The earlier wider variants (1600px, then 1400px, then edge-to-edge) all read as too wide compared to the cards row — reverted per explicit feedback back to matching it exactly. */ .hero-rentree-inner{position:relative;max-width:1320px;margin:0 auto;padding:28px 0 40px} .hero-rentree-stage{position:relative;width:100%;min-height:430px} .hero-rentree-photo{position:absolute;inset:0;border-radius:var(--radius-card-lg);overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.14);background:#ddd} .hero-rentree-photo img{position:absolute;left:-20%;top:0;width:120%;max-width:none;height:100%;object-fit:cover;object-position:50% 15%;display:block} .hero-rentree-tags{position:absolute;left:5%;bottom:34px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;transform:rotate(-3deg);z-index:2} .hero-rentree-tags span{background:var(--mint);color:#fff;font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(18px,2.2vw,28px);line-height:1.05;padding:6px 14px 3px;display:block} .hero-rentree-tags span:last-child{margin-left:6px;padding:4px 14px 6px} .hero-rentree-rate{position:absolute;right:calc(max(44%,400px) + 24px);top:130px;width:230px;background:#f7b500;color:#2f3a2f;text-align:center;padding:14px 14px 16px;box-shadow:0 6px 18px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;gap:1px;z-index:2} .hero-rentree-rate .dates{font-weight:800;font-size:13px;margin:0} .hero-rentree-rate .label{font-weight:800;font-size:12.5px;letter-spacing:0;white-space:nowrap;margin:0} .hero-rentree-rate .value{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(38px,5vw,60px);line-height:1;margin:6px 0 4px} .hero-rentree-rate .taeg{font-weight:800;font-size:16px;margin:0} .hero-rentree-rate .conditions{font-weight:700;font-size:11px;line-height:1.25;margin:0} .hero-rentree-card{position:absolute;right:18px;top:26px;bottom:-22px;width:44%;min-width:410px;background:#fff;border-radius:var(--radius-card-lg);box-shadow:0 8px 28px rgba(0,0,0,.14);padding:26px;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;overflow-y:auto;z-index:3} .hero-rentree-card h1{font-family:'Quicksand',sans-serif;font-weight:700;font-size:20px;color:#2f3a2f;text-align:center;margin:0} .hero-rentree-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .rentree-project-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 2px;background:#fff;border:2px solid #dcdcdc;border-radius:6px;cursor:pointer;font-family:'Figtree',sans-serif;min-width:0} .rentree-project-btn:hover{border-color:var(--mint)} .rentree-project-btn svg{color:var(--mint);flex-shrink:0} .rentree-project-btn span{font-weight:800;font-size:11px;line-height:1.25;color:#2f3a2f;text-align:center} .rentree-project-btn[aria-pressed="true"]{border-color:var(--mint);background:rgba(28,62,75,.06)} .hero-rentree-projects.is-invalid .rentree-project-btn{border-color:var(--red)} .hero-rentree-project-error{color:var(--red);font-size:12px;margin:0} .hero-rentree-amount{display:flex;flex-direction:column;gap:8px} .hero-rentree-amount-label{font-weight:800;font-size:15px;color:#2f3a2f;margin:0} .hero-rentree-amount-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #c9c9c9;border-radius:4px;padding:6px 12px;background:#fff} .hero-rentree-amount-wrap.is-invalid{border-color:var(--red)} .hero-rentree-amount-col{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .hero-rentree-amount-hint{font-size:10.5px;color:#444} .hero-rentree-amount-input{border:0;outline:0;padding:0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:#2f3a2f;background:transparent;width:100%} .hero-rentree-amount-suffix{font-weight:800;font-size:15px;color:#2f3a2f;flex-shrink:0} .hero-rentree-amount-error{color:var(--red);font-size:12px;margin:0} .hero-rentree-cta{width:fit-content;max-width:100%;margin:0 auto;min-height:50px;padding:0 32px;border:0;border-radius:25px;background:var(--mint);color:#fff;font-family:'Quicksand',sans-serif;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-align:center} .hero-rentree-cta:hover{background:var(--mint-hover)} @media (max-width:960px){ .hero-rentree-stage{position:static;min-height:0;display:flex;flex-direction:column;gap:16px} .hero-rentree-photo{position:relative;inset:auto;width:100%;height:300px} .hero-rentree-rate{position:static;width:100%;box-sizing:border-box;margin-top:-40px;align-self:center} .hero-rentree-card{position:static;width:100%;min-width:0;bottom:auto} } @media (max-width:520px){ .hero-rentree-projects{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===== Offers ===== */ .offers-section{padding:clamp(24px,4vw,40px) clamp(20px,4vw,48px)} .solutions-section{ --solutions-green:#1C3E4B;--solutions-dark:#333333;--solutions-gray:#4a4a4a;--solutions-border:#cccccc; padding:clamp(24px,4vw,40px) clamp(20px,4vw,48px) 0; } .solutions-heading{max-width:760px;margin:0 auto;text-align:center} .solutions-heading h2{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,34px); color:var(--solutions-dark);margin:0 0 16px; } .solutions-underline{width:64px;height:4px;background:var(--solutions-green);border-radius:2px;margin:0 auto 20px} .solutions-lede{font-size:18px;line-height:1.5;color:var(--solutions-gray);margin:0} .solutions-grid{ position:relative;z-index:2;max-width:1320px;margin:44px auto 0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px; } .solutions-card{ background:#fff;border-radius:var(--radius-card-lg);box-shadow:0 2px 10px rgba(0,0,0,.1); overflow:hidden;display:flex;flex-direction:column; } .solutions-card-media{ display:block;width:100%;height:174px;object-fit:cover;object-position:50% 30%; clip-path:polygon(0 0,100% 0,100% 90%,0 100%); } .solutions-card-title{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:22px;color:var(--solutions-dark); text-align:center;margin:16px 0 0; } .solutions-card-desc{font-size:16px;line-height:1.4;color:var(--solutions-gray);text-align:center;margin:14px 30px 0} .solutions-card-links{display:flex;flex-direction:column;margin:26px 28px 28px} .solutions-card-link{ display:flex;align-items:center;gap:14px;padding:18px 4px;border-bottom:1px solid var(--solutions-border); } .solutions-card-link:last-child{border-bottom:none} .solutions-card-link svg{color:var(--solutions-green);flex-shrink:0} .solutions-card-link > span{flex:1;font-size:17px;font-weight:700;color:var(--solutions-dark)} .solutions-card-link .chevron{color:var(--solutions-dark);flex-shrink:0} .solutions-badge{display:flex;align-items:center;gap:3px;flex:1} .solutions-badge-count{ flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--solutions-green);color:#fff; font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center; } .solutions-badge-arrow{color:var(--solutions-green);flex-shrink:0} .solutions-badge-word{font-family:'Quicksand',sans-serif;font-weight:800;font-size:26px;color:var(--solutions-green);margin-left:2px} .solutions-features-wrap{ position:relative;z-index:1;margin-top:-190px;padding:230px clamp(20px,4vw,48px) 72px;background:var(--solutions-green); clip-path:polygon(0 64px,100% 0,100% 100%,0 100%); } .solutions-features{ max-width:1320px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px; } .solutions-feature{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .solutions-feature svg{color:#fff} .solutions-feature p{margin:0;font-size:17px;line-height:1.4;color:#fff} .solutions-feature p b{font-weight:800} @media (max-width:900px){ .solutions-features-wrap{margin-top:40px;padding:56px clamp(20px,4vw,48px) 64px;clip-path:none;background:transparent} .solutions-features{gap:20px} .solutions-feature{background:#fff;border-radius:var(--radius-card-md);box-shadow:0 2px 8px rgba(0,0,0,.08);padding:32px 20px} .solutions-feature svg{color:var(--mint)} .solutions-feature p{color:var(--text-primary)} } .section-heading{max-width:1320px;margin:56px auto 0;text-align:center} .section-heading h2{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px); color:var(--text-primary);margin:0 0 14px; } .specialist-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px;text-align:left; } .specialist-card{ padding:36px 26px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center; border:1px solid var(--border);border-radius:var(--radius-card-md); } .specialist-card svg{color:var(--text-primary)} .specialist-card h3{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:24px;color:var(--text-primary); } .specialist-card .subtitle{font-weight:700;font-size:18px;color:var(--text-primary)} .specialist-card .desc{font-size:16px;color:var(--text-secondary);line-height:1.6;flex:1} .specialist-card .btn{ width:100%;font-size:15px;padding:16px 24px;border-radius:14px; background:#fff;color:var(--fc-text);border:1.5px solid var(--fc-text); } .specialist-card .btn:hover{background:var(--mint);color:#fff} /* ===== Brand & You ===== */ .brand-you{background:#fff;padding:0} .brand-you-inner{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center} .brand-you-text{max-width:760px;text-align:center;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px)} .brand-you-text h2{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px); color:var(--text-primary);margin:0 0 20px; } .brand-you-text p{font-size:16px;line-height:1.7;color:var(--text-primary);margin:0 0 14px} .brand-you-text p:last-of-type{margin:0 0 26px} /* ===== Articles / magazine ===== */ .articles-section{ --articles-green:#1C3E4B;--articles-dark:#3B3C40;--articles-border:#D5D5D8; padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px);text-align:center; } .articles-ribbon{ display:inline-block;background:var(--articles-green);color:#fff; font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(22px,3vw,38px); padding:15px 42px;border-radius:4px;transform:rotate(-3.5deg);margin:0 0 40px; } .articles-tabs{ display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,50px); max-width:1320px;margin:0 auto 40px; } .articles-tab{ appearance:none;background:none;border:none;cursor:pointer;font-family:Arial,Helvetica,sans-serif; font-size:clamp(15px,1.6vw,20px);font-weight:400;color:var(--articles-dark);padding:0 0 10px; border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease; } .articles-tab:hover{color:var(--articles-green)} .articles-tab.active{color:var(--articles-green);border-bottom-color:var(--articles-green)} .articles-grid{max-width:1000px;margin:0 auto} .articles-group{display:none} .articles-group.active{display:block} .articles-group-title{display:none} .articles-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:36px 26px;text-align:left; } .articles-card{ position:relative;background:#fff;border:1px solid var(--articles-border); border-radius:16px;overflow:hidden;display:flex;flex-direction:column; } .articles-card-media{position:relative;aspect-ratio:633/237;flex-shrink:0} .articles-card-media img{width:100%;height:100%;object-fit:cover;display:block} .articles-card-icon{ width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--articles-green); color:var(--articles-green);display:flex;align-items:center;justify-content:center; margin:-25px auto 0;flex-shrink:0; transform:translateZ(0);backface-visibility:hidden; } .articles-card-body{padding:23px 28px 24px;display:flex;flex-direction:column;flex:1;box-sizing:border-box} .articles-card-body h3{ font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:19px;line-height:1.3;color:var(--articles-dark); margin:0; } .articles-card-body p{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.4;color:var(--articles-dark);margin:12px 0 0} .articles-card-more{ display:flex;align-items:center;justify-content:center;margin:auto 0 0 auto; width:58px;height:40px;border-radius:20px;background:#F7F7F8;color:var(--articles-dark); transition:background .15s ease; } .articles-card-more:hover{background:#ECECEE;color:var(--articles-dark);text-decoration:none} @media (max-width:640px){ .articles-tabs{display:none} .articles-group{display:block !important} .articles-group + .articles-group{margin-top:40px} .articles-group-title{ display:block;font-family:'Quicksand',sans-serif;font-weight:800;font-size:20px;line-height:1.3; color:var(--text-primary);margin:0 0 20px;text-align:left; } .articles-cards{grid-template-columns:1fr} } /* ===== Insurance ===== */ .insurance-section{background:#fff;padding:0} .insurance-inner{max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap} .insurance-photo{flex:1 1 420px;aspect-ratio:4/3;background:#fff} .insurance-photo img{border-radius:var(--radius-card-md);object-position:center} .insurance-text{ flex:1 1 420px;padding:clamp(28px,5vw,56px) clamp(20px,4vw,48px); display:flex;flex-direction:column;justify-content:center; } @media (max-width:859px){ .insurance-photo{padding:20px} .brand-you-text .btn{display:block;max-width:320px;margin:0 auto} } .insurance-text h2{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px); color:var(--text-primary);text-align:center;margin:0 0 20px; } .insurance-text p{font-size:15px;line-height:1.7;text-align:center;margin:0 0 14px} .insurance-text p.lede{color:var(--text-primary)} .insurance-text p.body{color:var(--text-secondary);margin:0 0 26px} .insurance-text .btn{display:block;max-width:320px;margin:0 auto} /* ===== Newfin Aide ===== */ .newfin-aide-section{background:#f7f7f7;padding:clamp(48px,7vw,80px) clamp(20px,4vw,24px) clamp(56px,8vw,90px);text-align:center} .newfin-aide-head{max-width:1030px;margin:0 auto} .newfin-aide-section h2{ font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(26px,4vw,44px); color:#33302e;margin:0;line-height:1.15; } .newfin-aide-bar{width:64px;height:4px;border-radius:2px;background:#00b6d8;margin:26px auto 0} .newfin-aide-card{ max-width:1024px;margin:clamp(32px,6vw,56px) auto 0;background:#ffffff;border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.05);padding:16px clamp(20px,5vw,58px) 40px;text-align:left; } .newfin-aide-row{border-bottom:1px solid #ededed} .newfin-aide-row-head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px 4px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#4b4b46; } .newfin-aide-row-head span.q{flex:1} .newfin-aide-row.clickable .newfin-aide-row-head{cursor:pointer} .newfin-aide-row[data-open="true"] .newfin-aide-row-head{color:#33302e;font-weight:700} .newfin-aide-row-chevron{display:inline-flex;flex-shrink:0;transition:transform .2s} .newfin-aide-row[data-open="true"] .newfin-aide-row-chevron{transform:rotate(180deg)} .newfin-aide-answer{padding:0 4px 24px} .newfin-aide-answer p{font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#6b6f61;line-height:1.55;margin:0} .newfin-aide-feedback{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; background:#f5f5f5;border-radius:8px;padding:16px 22px;margin-top:22px; } .newfin-aide-feedback-label{font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#6b6f61} .newfin-aide-feedback-actions{display:flex;align-items:center;gap:26px} .newfin-aide-feedback-btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;border:none;padding:0; font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#6b6f61; } .newfin-aide-feedback-btn svg{flex-shrink:0} .newfin-aide-help-wrap{display:flex;justify-content:center;margin-top:34px} .newfin-aide-help-btn{ display:inline-flex;align-items:center;background:#ffffff;border:1.5px solid #33302e;border-radius:26px; padding:13px 24px;font-family:Arial,Helvetica,sans-serif;font-size:14.5px;font-weight:700;color:#33302e; cursor:pointer;white-space:nowrap; } .newfin-aide-help-btn .circle{ width:22px;height:22px;border:1.5px solid #33302e;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;margin-left:10px; } /* ===== FAQ ===== */ .faq-section{padding:clamp(48px,7vw,72px) clamp(20px,4vw,48px);text-align:center;background:#fff} .faq-kicker{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:12px;letter-spacing:.6px; color:var(--mint-hover);text-transform:uppercase;margin:0 0 10px; } .faq-section h2{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,34px); color:var(--text-primary);margin:0 0 14px;line-height:1.25; } .faq-lede{font-size:15.5px;color:var(--text-secondary);max-width:600px;margin:0 auto 36px;line-height:1.6} .faq-list{ max-width:760px;margin:0 auto;background:#fff;border-radius:var(--radius-card-md); padding:8px 26px;text-align:left;box-shadow:var(--shadow-faq); } .faq-item{border-bottom:1px solid var(--border);padding:18px 0} .faq-item:last-child{border-bottom:none} .faq-question{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;background:none; border:none;cursor:pointer;text-align:left;padding:0; } .faq-question .q{font-weight:700;font-size:15px;color:var(--text-primary)} .faq-answer{margin:12px 0 0;font-size:14px;color:var(--text-secondary);line-height:1.6} .faq-item[data-open="false"] .faq-answer{display:none} .faq-section .btn{margin-top:28px} /* ===== FAQ complète ===== */ .faqfull-hero{background:var(--cream);padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px) clamp(28px,4vw,40px);text-align:center} .faqfull-hero h1{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(28px,4vw,40px); color:var(--text-primary);margin:0 0 14px;line-height:1.2; } .faqfull-hero-lede{font-size:15.5px;color:var(--text-secondary);max-width:620px;margin:0 auto;line-height:1.6} .faqfull-layout{ max-width:760px;margin:0 auto;padding:clamp(32px,5vw,48px) clamp(20px,4vw,48px) clamp(56px,7vw,80px); } .faqfull-category{margin-bottom:52px} .faqfull-category:last-of-type{margin-bottom:0} .faqfull-category-title{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,24px); color:var(--text-primary);margin:0 0 8px;line-height:1.3; } .faqfull-cardlist{ background:#fff;border-radius:var(--radius-card-md);box-shadow:var(--shadow-faq); padding:4px 24px;overflow:hidden; } .faqfull-cardlist .faq-item{border-bottom:1px solid var(--border);border-radius:0} .faqfull-cardlist .faq-item:last-child{border-bottom:none} .faqfull-cardlist .faq-question{ width:100%;display:flex;align-items:center;gap:16px;padding:20px 0; background:none;border:none;cursor:pointer;text-align:left;font:inherit; } .faqfull-cardlist .faq-question .symbol{ order:2;width:20px;height:20px;flex-shrink:0;position:relative;font-size:0; } .faqfull-cardlist .faq-question .symbol::before{ content:'';position:absolute;left:5px;top:2px;width:9px;height:9px; border-right:2px solid var(--text-primary);border-bottom:2px solid var(--text-primary); transform:rotate(45deg);transition:transform .2s ease; } .faqfull-cardlist .faq-item[data-open="true"] .faq-question .symbol::before{transform:rotate(-135deg);top:6px} .faqfull-cardlist .faq-question .q{order:1;font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary);flex:1;line-height:1.4} .faqfull-cardlist .faq-answer{margin:0;padding:0 0 22px;font-size:14.5px;color:var(--text-secondary);line-height:1.65} .faqfull-cardlist .faq-answer a{color:var(--mint-hover);font-weight:600} .faqfull-cardlist .faq-item[data-open="false"] .faq-answer{display:none} .faq-feedback{ background:var(--gray-light);border-radius:12px;padding:14px 18px;margin:0 0 22px; box-sizing:border-box;max-width:100%; } .faq-feedback-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .faq-feedback-label{font-size:14px;color:var(--text-primary);font-weight:600} .faq-feedback-actions{display:flex;align-items:center;gap:18px;flex-shrink:0} .faq-feedback-btn{ display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer; font-family:inherit;font-size:14px;font-weight:700;color:var(--text-primary);padding:4px; } .faq-feedback-btn svg{color:var(--text-primary)} .faq-feedback-btn[data-vote="yes"][data-active="true"]{color:var(--mint-hover)} .faq-feedback-btn[data-vote="yes"][data-active="true"] svg{color:var(--mint-hover);fill:var(--mint-hover)} .faq-feedback-btn[data-vote="no"][data-active="true"]{color:var(--red)} .faq-feedback-btn[data-vote="no"][data-active="true"] svg{color:var(--red);fill:var(--red)} .faq-feedback-thanks{font-size:14px;color:var(--mint-hover);font-weight:600;margin:14px 0 0} .faq-feedback-detail{margin-top:16px;box-sizing:border-box} .faq-feedback-detail-label{font-size:14px;font-weight:700;color:var(--text-primary);margin:0 0 10px} .faq-feedback-textarea{ width:100%;box-sizing:border-box;min-height:84px;border:1.5px solid var(--border-form); border-radius:10px;padding:12px 14px;font-family:inherit;font-size:13.5px;color:var(--text-primary); resize:vertical;margin:0 0 14px; } .faq-feedback-textarea:focus{outline:none;border-color:var(--mint)} .faq-feedback-textarea::placeholder{color:var(--text-tertiary)} .faq-feedback-send{ padding:11px 24px;border-radius:999px;border:none;background:var(--border);color:#fff; font-weight:700;font-size:14px;cursor:not-allowed; } .faq-feedback-send:not(:disabled){background:var(--mint);color:#fff;cursor:pointer} .faq-feedback-send:not(:disabled):hover{background:var(--mint-hover)} .faq-help-wrap{display:flex;justify-content:center;padding:22px 0 18px} .faq-help-btn{ display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px; background:#fff;color:var(--text-primary);font-weight:700;font-size:15px; border:1.5px solid var(--text-primary);cursor:pointer;text-align:center; } .faq-help-btn svg{flex-shrink:0} .faq-help-btn:hover{background:var(--text-primary);color:#fff;text-decoration:none} @media (max-width:520px){ .faqfull-cardlist .faq-answer{padding-left:0} } .faqfull-cta{ background:var(--gray-light);border-radius:var(--radius-card-lg); padding:clamp(28px,4vw,40px);text-align:center;margin-top:12px; } .faqfull-cta h2{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,24px);color:var(--text-primary);margin:0 0 8px} .faqfull-cta p{font-size:14.5px;color:var(--text-secondary);margin:0 0 20px} .faqfull-cta .btn{display:inline-block} /* ===== Footer ===== */ /* Two layouts, each an exact pixel reproduction of a Claude Design handoff file: a desktop canvas (.fdc-wrap, >=901px, from Footer.dc.html) and a mobile canvas (.fmc-wrap, <=900px, from Footer Mobile.dc.html). Both are fixed-size design canvases scaled to fit their container via JS (js/main.js's 'footer canvases' block), capped at scale 1 (never upscaled past native size). Uses the site's Quicksand/Figtree typography (see :root and the sitewide rule this footer originated). */ .site-footer{padding:clamp(20px,3vw,32px) clamp(12px,2vw,24px)} .site-footer--home{background:#fff} @media (min-width:901px){ .fmc-wrap{display:none} } @media (max-width:900px){ .fdc-wrap{display:none} } .fdc-wrap{position:relative;width:100%;max-width:1860px;margin:0 auto;overflow:hidden} .fdc-canvas{ position:absolute;left:0;top:0;width:1860px;height:513px;transform-origin:0 0; font-family:'Figtree','Quicksand',sans-serif;color:var(--fc-text); } .fdc-canvas a{color:var(--fc-text);text-decoration:none} .fdc-card{position:absolute;left:8px;top:8px;width:1844px;height:489px;background:var(--fc-bg);border-radius:28px} .fdc-logo{ position:absolute;left:214px;top:48px;width:160px;height:148px;background:var(--fc-accent);border-radius:14px; display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:24px; } .fdc-col{position:absolute;top:48px;display:flex;flex-direction:column;gap:9px;white-space:nowrap} .fdc-col1{left:568px} .fdc-col2{left:867px} .fdc-col3{left:1138px} .fdc-col-heading{font-family:'Quicksand',sans-serif;font-weight:600;font-size:22px;line-height:30px;margin-bottom:4px} .fdc-col a{font-size:17px;line-height:30px} .fdc-legal{position:absolute;left:0;top:403px;width:1860px;display:flex;justify-content:center;gap:40px;font-size:14.5px;line-height:22px;white-space:nowrap} .fdc-legal2{top:442px} .fdc-help-panel{ position:absolute;left:1098px;top:406px;width:748px;height:86px;background:#fff;border-radius:43px; display:flex;align-items:center;justify-content:space-between;padding:0 100px 0 36px;box-sizing:border-box; font-family:'Quicksand',sans-serif;font-weight:600;font-size:18px;white-space:nowrap; } .fdc-help-panel[hidden]{display:none} .fdc-help-panel a{display:flex;align-items:center;gap:12px} .fdc-help-btn{ position:absolute;left:1782px;top:413px;width:70px;height:70px;border-radius:50%;border:none; background:var(--fc-cta);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; } .fdc-help-icon-open{font-family:'Quicksand',sans-serif;font-weight:600;font-size:24px;color:var(--fc-text)} .fdc-help-icon-close{display:none} .fdc-help-btn[aria-expanded="true"] .fdc-help-icon-open{display:none} .fdc-help-btn[aria-expanded="true"] .fdc-help-icon-close{display:block} /* --- Mobile canvas (reproduces Footer Mobile.dc.html's collapsed-state sizes/colors/spacing exactly; unlike the fixed-canvas desktop version, this uses normal flow instead of absolute positioning on a fixed 712px canvas, because the design only mocks up the collapsed accordion state — a literal absolute-canvas clone would make later sections overlap the moment a column expands. The help button/panel/ backdrop stay absolutely positioned against the card's *current* (possibly taller) bottom-right corner, which is robust to that. --- */ .fmc-wrap{width:100%;max-width:390px;margin:0 auto} .fmc-card{ position:relative;background:var(--fc-bg);border-radius:20px;overflow:hidden; padding:20px 30px 90px;font-family:'Figtree','Quicksand',sans-serif;color:var(--fc-text); } .fmc-card a{color:var(--fc-text);text-decoration:none} .fmc-columns{display:flex;flex-direction:column} .fmc-col-toggle{ display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:55px; background:none;border:none;padding:0;margin:0;cursor:pointer;text-align:left; font-family:'Quicksand',sans-serif;font-weight:600;font-size:20px;color:var(--fc-text); } .fmc-col-chevron{flex-shrink:0;transition:transform .2s ease} .fmc-col[data-open="true"] .fmc-col-chevron{transform:rotate(180deg)} .fmc-col-links{display:none;flex-direction:column;gap:8px;padding:0 0 14px} .fmc-col[data-open="true"] .fmc-col-links{display:flex} .fmc-col-links a{font-family:'Figtree',sans-serif;font-size:15px;color:var(--fc-text);opacity:.82} .fmc-col-links a:hover{opacity:1} .fmc-legal{display:flex;flex-direction:column;gap:7px;font-size:14px;line-height:22px;margin-top:25px} .fmc-bottom{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px} .fmc-logo{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:28px;color:var(--fc-text);letter-spacing:-.5px; } .fmc-backdrop{position:absolute;inset:0;background:rgba(40,60,66,.42)} .fmc-backdrop[hidden]{display:none} .fmc-help-pills{ position:absolute;right:16px;bottom:74px;display:flex;flex-direction:column;align-items:flex-end;gap:12px; font-family:'Quicksand',sans-serif;font-weight:600;font-size:16px;white-space:nowrap; } .fmc-help-pills[hidden]{display:none} .fmc-help-pills a{display:flex;align-items:center;gap:10px;height:36px;padding:0 16px;background:#fff;border-radius:18px} .fmc-help-pills a:hover{text-decoration:none;background:var(--fc-bg)} .fmc-help-btn{ position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:none; background:var(--fc-cta);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; box-shadow:0 6px 16px rgba(11,42,53,.18); } .fmc-help-icon-open{font-family:'Quicksand',sans-serif;font-weight:600;font-size:18px;color:var(--fc-text)} .fmc-help-icon-close{display:none} .fmc-help-btn[aria-expanded="true"] .fmc-help-icon-open{display:none} .fmc-help-btn[aria-expanded="true"] .fmc-help-icon-close{display:block} /* ===== Site-wide floating help button ===== Present on every page (not just the footer), position:fixed so it stays visible while scrolling. Same visual language as the footer's own help button/panel (--fc-cta circle, Quicksand "?", FAQ/Chat/Call panel) but independent of it — this is the one the user should always see; it replaces the old per-page .pp-help-btn ("Besoin d'aide" pill), which is being removed everywhere. */ .site-help{position:fixed;right:20px;bottom:20px;z-index:70;transition:opacity .2s ease,visibility .2s ease} .site-help.cta-visible{bottom:92px} .site-help.footer-visible{opacity:0;visibility:hidden;pointer-events:none} .site-help-backdrop{position:fixed;inset:0;background:rgba(11,42,53,.45)} .site-help-backdrop[hidden]{display:none} .site-help-btn{ position:relative;width:56px;height:56px;border-radius:50%;border:none;background:var(--fc-cta);color:var(--fc-text); cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0; box-shadow:0 8px 20px rgba(11,42,53,.28); } .site-help-icon-open{font-family:'Quicksand',sans-serif;font-weight:700;font-size:22px;color:var(--fc-text)} .site-help-icon-close{display:none} .site-help-btn[aria-expanded="true"] .site-help-icon-open{display:none} .site-help-btn[aria-expanded="true"] .site-help-icon-close{display:block} .site-help-panel{ position:absolute;right:0;bottom:66px;background:#fff;border-radius:100px; padding:0 32px;height:72px;display:flex;flex-direction:row;align-items:center;gap:28px; box-shadow:0 20px 48px rgba(11,42,53,.22);white-space:nowrap; } .site-help-panel[hidden]{display:none} .site-help-panel a{ display:flex;align-items:center;gap:12px; font-family:'Quicksand',sans-serif;font-weight:600;font-size:16px;color:var(--fc-text); } .site-help-panel a:hover{text-decoration:none} .site-help-panel svg{flex-shrink:0;color:var(--fc-text)} @media (max-width:640px){ .site-help{right:16px;bottom:16px} .site-help.cta-visible{bottom:88px} .site-help-btn{width:48px;height:48px} .site-help-panel{ right:0;left:auto;bottom:60px;margin:0;max-width:calc(100vw - 32px); background:none;box-shadow:none;padding:0;border-radius:0;height:auto; flex-direction:column;gap:12px;align-items:flex-end; } .site-help-panel a{ background:#fff;border-radius:18px;height:36px;padding:0 16px;gap:10px; box-shadow:0 6px 16px rgba(11,42,53,.18);white-space:nowrap; } .site-help-panel a:hover{background:var(--fc-bg)} } /* ===== Mobile sticky CTA ===== */ .mobile-sticky-cta{ display:none; position:fixed;left:0;right:0;bottom:0;z-index:60; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); background:#fff;box-shadow:0 -4px 14px rgba(0,0,0,.08); transform:translateY(100%);transition:transform .25s ease; } .mobile-sticky-cta.visible{transform:translateY(0)} .nav-menu-open .mobile-sticky-cta{display:none} .mobile-sticky-cta .btn{ display:block;width:fit-content;max-width:100%;margin:0 auto;padding:14px 32px;border-radius:var(--radius-btn-lg); font-size:13px;letter-spacing:.3px;text-transform:uppercase;text-align:center; box-shadow:0 4px 14px rgba(214,41,28,.3); } @media (max-width:859px){ .mobile-sticky-cta{display:block} body{padding-bottom:0} } /* =================================================================== Simulation funnel page =================================================================== */ .funnel-back{ display:inline-flex;align-items:center;gap:4px;color:var(--text-primary);font-weight:700; font-size:14px;text-decoration:underline;margin:28px clamp(20px,4vw,48px) 0; } .funnel-back:hover{color:var(--text-primary)} .funnel-selection{ text-align:center;font-size:16px;color:var(--text-primary); margin:20px clamp(20px,4vw,48px) 28px; } .funnel-selection strong{color:var(--text-primary)} .funnel-selection-edit{margin:0 0 24px;text-align:center} .funnel-selection-edit .funnel-selection{margin:0 0 18px} .funnel-edit-row{display:flex;gap:16px;flex-wrap:wrap;text-align:left} .funnel-edit-field{flex:1 1 220px} .funnel-edit-field label{display:block;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:8px} .funnel-edit-field .amount-select-wrap{display:flex;margin-bottom:0} .funnel-edit-field .duration-select-wrap{display:block;margin-bottom:0} .funnel-layout{ max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,48px); display:flex;flex-direction:column;align-items:center;gap:40px; } .funnel-layout .loan-sim-card{width:100%;max-width:900px} .funnel-layout .funnel-steps{width:100%;max-width:760px} .duration-empty-hint{font-size:13.5px;color:var(--text-tertiary);text-align:center;margin:14px 0 22px} .duration-empty-hint.is-invalid{color:var(--red)} .duration-select-wrap{display:none;position:relative;margin-bottom:22px} .duration-select{ width:100%;padding:16px 60px 16px 16px;border-radius:var(--radius-btn-lg); border:1.5px solid var(--text-primary);background:#fff; font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary); appearance:none;-webkit-appearance:none;-moz-appearance:none; } .duration-select:focus{outline:none} .duration-select-arrow{ position:absolute;top:0;right:0;bottom:0;width:52px; background:var(--mint);border-radius:0 var(--radius-btn-lg) var(--radius-btn-lg) 0; display:flex;align-items:center;justify-content:center;pointer-events:none; } .funnel-steps{display:flex;flex-direction:column;gap:16px} .funnel-steps-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:26px;line-height:1.3;color:var(--text-primary);margin:0 0 6px} .funnel-steps-title .accent{color:var(--text-primary)} .funnel-step-card{ border:1px solid var(--border);border-radius:var(--radius-card-md);padding:20px; display:flex;align-items:flex-start;gap:18px; } .funnel-step-num{ width:38px;height:38px;border-radius:50%;border:2px solid var(--text-primary);flex-shrink:0; display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px; } .funnel-step-card svg{color:var(--text-primary);flex-shrink:0;margin-top:2px} .funnel-step-card h4{font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary);margin:0 0 4px} .funnel-step-card p{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0} .legal-footnotes{max-width:1320px;margin:40px auto 0;padding:0 clamp(20px,4vw,48px) 40px} .legal-footnotes p{font-size:12.5px;color:var(--text-tertiary);line-height:1.7;margin:0 0 14px} /* ---- Field hint box ---- */ .field-hint-box{ display:flex;gap:10px;background:#EAF6FB;border-radius:var(--radius-btn-lg); padding:14px 16px;margin:8px 0 0;font-size:13px;color:var(--text-primary);line-height:1.5; } .field-hint-box svg{flex-shrink:0;color:var(--turquoise);margin-top:1px} .field-hint-box strong{font-weight:700} .form-suivant-row{display:flex;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap} .form-suivant-row .btn-outline,.form-suivant-row .btn{padding:15px 40px} @media (max-width:859px){ .form-suivant-row{flex-direction:column} .form-suivant-row .btn-outline,.form-suivant-row .btn{width:fit-content;max-width:100%;margin:0 auto;padding:15px 30px;text-align:center} } .step-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:26px;color:var(--text-primary)} /* ---- Cards ---- */ .app-card{border:1px solid var(--border);border-radius:var(--radius-card-md);padding:28px;margin-bottom:20px;background:#fff} .app-card-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--text-primary);margin:0} .app-card-subtitle{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:0 0 18px} /* ---- Form fields (shared with contact.html / espace-client.html) ---- */ .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} @media (max-width:600px){.field-grid{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:6px} .field-full{grid-column:1 / -1} .field-box{ border:1.5px solid var(--border-form);border-radius:var(--radius-btn-lg); padding:9px 14px 8px;background:#fff; } .field-box:focus-within{border-color:var(--red)} .field-box label{display:block;font-size:12px;font-weight:600;color:var(--text-tertiary);margin:0 0 1px} .field-box label .req{color:var(--red);margin-left:2px} .field-box input,.field-box select,.field-box textarea{ width:100%;padding:0;border:none;background:transparent; font-family:inherit;font-size:16px;color:var(--text-primary); } .field-box input:focus,.field-box select:focus,.field-box textarea:focus{outline:none} .field-box select{appearance:none;-webkit-appearance:none;-moz-appearance:none} .field-box input[readonly]{color:var(--text-secondary)} .field-box:has(input[readonly]){background:var(--cream)} .field textarea{resize:vertical;min-height:70px} .field .hint{font-size:12px;color:var(--text-tertiary)} .field .field-error{display:none;font-size:12.5px;color:var(--red)} .field.has-error .field-box{border-color:var(--red)} .field.has-error .field-error{display:block} #insurance-error{display:none;font-size:12.5px;color:var(--red)} #insurance-error.show{display:block} /* =================================================================== Demande (application form) page — step-based funnel =================================================================== */ .appflow-header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)} .appflow-header-inner{ max-width:960px;margin:0 auto;min-height:76px; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px clamp(20px,4vw,40px); } .appflow-logo{flex-shrink:0;text-decoration:none} .appflow-logo .logo-name{font-family:'Quicksand',sans-serif;font-weight:700;font-size:20px;color:var(--mint);letter-spacing:-.5px} .appflow-header-title{flex:1;text-align:center;min-width:0} .appflow-header-product{font-family:'Quicksand',sans-serif;font-weight:700;font-size:17px;color:var(--text-primary);margin:0;line-height:1.3} .appflow-header-amount{font-size:13.5px;color:var(--text-secondary);margin:2px 0 0} .appflow-sim-link{display:flex;align-items:center;gap:8px;color:var(--mint);text-decoration:none;font-size:14px;font-weight:700;flex-shrink:0;white-space:nowrap} .appflow-sim-link:hover{color:var(--mint)} @media (max-width:640px){ .appflow-sim-link span{display:none} .appflow-header-product{font-size:15px} } .appflow-shell{max-width:900px;margin:0 auto;padding:0 clamp(20px,4vw,40px) 60px} .appflow-screen{display:none} .appflow-screen.is-active{display:block} /* ---- Stepper (screens 1-3) ---- */ .appflow-stepper-wrap{display:none;justify-content:center;padding:36px clamp(20px,4vw,40px) 8px} .appflow-stepper-wrap.is-active{display:flex} .appflow-stepper-track{display:flex;align-items:flex-start;width:100%;max-width:520px} .appflow-stepper-node{display:flex;flex-direction:column;align-items:center;text-align:center;flex-shrink:0} .appflow-stepper-circle{ width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px; border:1.5px solid #c9c9c9;background:#fff;color:#c4c4c4; } .appflow-stepper-node.is-active .appflow-stepper-circle{border-color:var(--mint);background:var(--mint);color:#fff} .appflow-stepper-label{margin-top:10px;font-size:13.5px;color:#aaa;max-width:120px} .appflow-stepper-node.is-active .appflow-stepper-label{color:var(--mint);font-weight:700} .appflow-stepper-connector{flex:1;height:2px;background:#c9c9c9;margin-top:17px;position:relative;min-width:20px} .appflow-stepper-connector-fill{position:absolute;left:0;top:0;height:100%;background:var(--mint);width:0} .appflow-stepper-connector.is-progress .appflow-stepper-connector-fill{width:38%} .appflow-stepper-connector.is-done .appflow-stepper-connector-fill{width:100%} /* ---- Intro screen ---- */ .appflow-intro-hero{text-align:center;padding:44px 0 8px} .appflow-intro-title{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(22px,3vw,30px);color:var(--mint);margin:0;line-height:1.25} .appflow-steps-icons{display:grid;grid-template-columns:repeat(3,1fr);align-items:flex-end;gap:24px;margin-bottom:8px} .appflow-step-icon-cell{display:flex;align-items:flex-end;justify-content:center;gap:14px;color:var(--text-secondary)} .appflow-step-arrow{color:#bdbdbd;flex-shrink:0;margin-bottom:12px} @media (max-width:700px){.appflow-steps-icons{display:none}} .appflow-steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 32px} @media (max-width:700px){.appflow-steps-row{grid-template-columns:1fr}} .appflow-step-item{display:flex;gap:16px;align-items:flex-start} .appflow-step-icon{flex-shrink:0;color:var(--text-secondary)} .appflow-step-num{ width:32px;height:32px;border-radius:50%;border:2px solid var(--mint);color:var(--mint); display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:700; font-size:15px;flex-shrink:0; } .appflow-step-copy h4{font-family:'Quicksand',sans-serif;font-weight:700;font-size:15.5px;color:var(--mint);margin:0 0 6px;line-height:1.3} .appflow-step-copy p{font-size:13.5px;color:var(--text-secondary);line-height:1.5;margin:0} .appflow-captcha-wrap{display:flex;justify-content:center;margin:28px 0} .appflow-captcha{ width:100%;max-width:400px;border:1px solid var(--border);background:var(--gray-light); border-radius:6px;padding:16px 18px;display:flex;align-items:center;gap:16px;cursor:pointer; font:inherit;text-align:left; } .appflow-captcha-box{ width:32px;height:32px;border:2px solid #9b9b9b;border-radius:4px;background:#fff;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .appflow-captcha-box svg{color:var(--mint)} .appflow-captcha-label{font-size:15px;color:var(--text-secondary);flex:1} .appflow-captcha-badge{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0} .appflow-captcha-badge span{font-size:9px;color:var(--text-tertiary);line-height:1.2;text-align:center} .appflow-captcha-badge span.brand{font-size:10.5px;font-weight:700;color:var(--text-primary)} /* ---- Email screen ---- */ .appflow-email-title{text-align:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:18px;color:var(--text-primary);margin:44px 0 16px} .appflow-email-input-row{display:flex;justify-content:center} .appflow-email-input-row input{ width:100%;max-width:420px;height:52px;border:1px solid #cfcfcf;border-radius:4px;box-sizing:border-box; padding:0 16px;font-size:16px;font-family:inherit;color:var(--text-primary);background:#fff; } .appflow-email-input-row input:focus{outline:none;border-color:var(--mint)} .appflow-phone-group{display:flex;gap:8px;width:100%;max-width:420px} .appflow-phone-group select.appflow-input{flex:0 0 92px;width:92px;padding:0 8px;max-width:none;appearance:auto;-webkit-appearance:menulist;-moz-appearance:menulist} .appflow-phone-group input.appflow-input{flex:1;min-width:0;width:auto;max-width:none} .appflow-email-note{text-align:center;font-size:14.5px;color:var(--text-secondary);margin:32px 0 20px} .appflow-benefit-row{display:flex;gap:16px;max-width:520px;margin:0 auto 24px} .appflow-benefit-row svg{flex-shrink:0;color:var(--mint)} .appflow-benefit-row p{font-size:14.5px;line-height:1.5;color:var(--text-primary);margin:0} .appflow-benefit-row a{color:var(--text-primary);font-size:13.5px} /* ---- Identity screens ---- */ .appflow-identity-title{text-align:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:24px;color:var(--mint);margin:36px 0 0} .appflow-identity-rule{width:32px;height:1px;background:#bdbdbd;margin:16px auto 32px} .appflow-row{display:flex;align-items:flex-start;gap:20px;margin-top:28px;flex-wrap:wrap} .appflow-row:first-of-type{margin-top:0} .appflow-row-label{width:220px;flex-shrink:0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);padding-top:14px} .appflow-row-control{flex:1;min-width:220px;max-width:420px;position:relative} .appflow-screen .field-error{display:none;font-size:12.5px;color:var(--red);margin-top:6px} .appflow-screen .field-error.show{display:block} .appflow-screen .appflow-field-hint{display:block;font-size:12.5px;color:var(--text-tertiary);margin-top:6px} .appflow-input{ width:100%;height:52px;border:1px solid #cfcfcf;border-radius:4px;box-sizing:border-box; padding:0 14px;font-size:16px;font-family:inherit;color:var(--text-primary);background:#fff; } .appflow-input:focus{outline:none;border-color:var(--mint)} .appflow-input.has-error{border-color:var(--red)} .appflow-input.has-check{padding-right:38px} select.appflow-input{appearance:none;-webkit-appearance:none;-moz-appearance:none} .appflow-row-control svg.check-mark{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mint);pointer-events:none} .appflow-select-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#8a8a8a;pointer-events:none} @media (max-width:640px){ .appflow-row{flex-direction:column;gap:8px} .appflow-row-label{width:auto;padding-top:0} .appflow-row-control{max-width:none;min-width:0;align-self:stretch} } /* ---- Document upload boxes (Justificatifs screen) ---- */ .appflow-upload-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px} .appflow-upload-grid.single-column{display:block} .appflow-upload-box{ flex:1;min-width:200px;border:1.5px dashed #cfcfcf;border-radius:6px; padding:24px 16px;text-align:center;background:var(--gray-light);margin-top:16px; } .appflow-upload-grid .appflow-upload-box{margin-top:0} .appflow-upload-box-full{width:100%} .appflow-upload-box.has-file{border-style:solid;border-color:var(--mint);background:#fff} .appflow-upload-icon{color:#9c9c9c} .appflow-upload-box.has-file .appflow-upload-icon{color:var(--mint)} .appflow-upload-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);margin:10px 0 0} .appflow-upload-hint{font-size:12.5px;color:var(--text-secondary);margin:6px 0 16px} .appflow-upload-btn{ display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 22px; border-radius:19px;border:1.5px solid var(--fc-text);color:var(--fc-text);font-family:'Quicksand',sans-serif; font-weight:700;font-size:14px;cursor:pointer;background:#fff; } .appflow-upload-btn:hover{background:var(--mint);color:#fff} .appflow-upload-filename{font-size:12.5px;color:var(--text-primary);margin:10px 0 0;word-break:break-word} .appflow-civility-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .appflow-civility-card{ width:110px;height:110px;border:1px solid #cfcfcf;border-radius:4px;background:#fff; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; cursor:pointer;color:var(--text-secondary);font-size:15px;font:inherit; } .appflow-civility-card svg{color:#7d7d7d} .appflow-civility-card.is-selected{border-color:var(--mint);border-width:1.5px;color:var(--mint);font-weight:700} .appflow-civility-card.is-selected svg{color:var(--mint)} .appflow-tooltip{ position:relative;max-width:420px;background:#e4f4fc;color:#1a9dd9;border-radius:4px; padding:10px 14px;font-size:13px;line-height:1.5;font-style:italic;margin-top:10px;margin-left:240px; } .appflow-tooltip::before{ content:'';position:absolute;left:36px;top:-7px;width:0;height:0; border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #1a9dd9; } .appflow-tooltip b{font-style:normal} @media (max-width:640px){.appflow-tooltip{margin-left:0}} /* ---- Actions (Retour / Continuer) ---- */ .appflow-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;flex-wrap:wrap} .appflow-btn-back,.appflow-btn-next{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:54px;padding:0 30px;border-radius:27px;border:none;cursor:pointer; font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:#fff;text-decoration:none; } .appflow-btn-back{background:#9c9c9c} .appflow-btn-back:hover{background:#8a8a8a;color:#fff;text-decoration:none} .appflow-btn-next{background:var(--mint);color:#fff} .appflow-btn-next:hover{background:var(--mint-hover);color:#fff} .appflow-btn-next[disabled]{background:#e0e0e0;cursor:not-allowed} /* ---- Reassurance banners ---- */ .appflow-reassurance{background:var(--gray-light);border-radius:6px;padding:26px clamp(16px,3vw,32px);margin-top:56px} .appflow-reassurance-title{text-align:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:18px;color:var(--mint);margin:0} .appflow-reassurance-rule{width:32px;height:2px;background:var(--mint);margin:14px auto 18px} .appflow-reassurance-items{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media (max-width:760px){.appflow-reassurance-items{grid-template-columns:1fr}} .appflow-reassurance-item{display:flex;align-items:center;gap:14px;padding:8px 0} .appflow-reassurance-item:not(:last-child){border-right:1px solid #cfcfcf;padding-right:14px} @media (max-width:760px){.appflow-reassurance-item:not(:last-child){border-right:none;border-bottom:1px solid #cfcfcf;padding-bottom:16px}} .appflow-reassurance-item svg{color:var(--text-secondary);flex-shrink:0} .appflow-reassurance-item p{font-size:14.5px;line-height:1.4;margin:0} .appflow-footer-links{display:flex;justify-content:center;gap:16px;margin-top:16px;font-size:12.5px} .appflow-footer-links a,.appflow-footer-links button{color:var(--text-secondary);text-decoration:none;background:none;border:none;font:inherit;cursor:pointer;padding:0} .appflow-reassurance-mini{ margin-top:40px;background:var(--gray-light);border-radius:6px;padding:16px clamp(16px,3vw,24px); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; } .appflow-reassurance-mini-item{display:flex;align-items:center;gap:12px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:14.5px;color:#9a9a9a} .appflow-reassurance-mini-item svg{flex-shrink:0} /* ---- Recap step ---- */ .recap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px} @media (max-width:600px){.recap-grid{grid-template-columns:1fr}} .recap-grid .item{display:flex;flex-direction:column;gap:2px} .recap-grid .k{font-size:12px;color:var(--text-tertiary)} .recap-grid .v{font-size:14px;font-weight:700;color:var(--text-primary)} /* ---- Confirmation page ---- */ .confirmation-shell{max-width:720px;margin:0 auto;padding:8px clamp(20px,4vw,48px) 60px} .confirmation-sticky-cta{display:none} @media (max-width:859px){ .confirmation-shell{padding-bottom:110px} .form-suivant-row .confirmation-espace-client-inline{display:none} .confirmation-sticky-cta{ display:block;position:fixed;left:20px;right:20px; bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;text-align:center; } .confirmation-sticky-cta .btn{ display:inline-block;padding:16px 36px; border-radius:999px;box-shadow:0 8px 20px rgba(11,31,58,.25); } } .confirmation-icon{ width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center;margin:16px auto 20px; } .confirmation-dossier-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px} .confirmation-dossier-head .k{font-size:12px;color:var(--text-tertiary);margin:0 0 4px} .dossier-number{font-family:'Quicksand',sans-serif;font-weight:700;font-size:22px;color:var(--text-primary);margin:0} .dossier-status{ background:rgba(28,62,75,.12);color:var(--green);font-weight:700;font-size:13px; padding:8px 16px;border-radius:999px;white-space:nowrap; } /* =================================================================== Product pages (crédit renouvelable, prêt personnel, rachat de crédit, assurance emprunteur) =================================================================== */ .product-hero{background:var(--sky-light);padding:clamp(40px,7vw,72px) clamp(20px,4vw,48px) clamp(48px,6vw,64px)} .product-hero-inner{max-width:1100px;margin:0 auto;text-align:center} .product-hero h1{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,48px); color:var(--text-primary);line-height:1.15;margin:0 0 18px; } .product-hero-inner>h1:last-child{margin-bottom:0} .product-hero h1 .accent{color:var(--mint)} .product-hero-lede{font-size:clamp(16px,1.8vw,18.5px);color:var(--text-secondary);max-width:640px;margin:0 auto 32px;line-height:1.6} .product-hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} .product-hero-ctas .btn{padding:16px 32px;font-size:15px} .product-simulator{max-width:600px;margin:40px auto 0;min-height:480px} .product-simulator .loan-sim-card{box-shadow:0 20px 50px rgba(11,31,58,.1);text-align:left} @media (max-width:640px){ .product-simulator{min-height:800px} } @media (min-width:901px){ .product-hero-split{ display:grid;grid-template-columns:minmax(0,560px) minmax(0,600px);gap:48px; align-items:center;justify-content:center; } .product-hero-split .product-hero-inner{max-width:none;margin:0;text-align:left} .product-hero-split .product-hero-lede{margin:0 0 32px} .product-hero-split .product-hero-ctas{justify-content:flex-start} .product-hero-split .product-simulator{margin:0} } .product-photo-banner{ max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center; gap:clamp(32px,5vw,56px);padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px); } .product-photo-banner .photo{flex:1 1 420px;max-width:560px;aspect-ratio:3/2;border-radius:var(--radius-card-lg);overflow:hidden} .product-photo-banner .photo img{width:100%;height:100%;object-fit:contain;display:block} .product-photo-banner .copy{flex:1 1 380px} .product-photo-banner .copy h2{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,28px);color:var(--text-primary);margin:0 0 14px;line-height:1.3} .product-photo-banner .copy p{font-size:15.5px;color:var(--text-secondary);line-height:1.7} .product-section{max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,72px) clamp(20px,4vw,48px)} .product-section-head{max-width:720px;margin:0 auto 40px;text-align:center} .product-section-kicker{font-weight:800;font-size:12px;letter-spacing:.6px;color:var(--mint-hover);text-transform:uppercase;margin:0 0 10px} .product-section-head h2{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(24px,3vw,32px);color:var(--text-primary);margin:0 0 14px;line-height:1.25} .product-section-head p{font-size:15.5px;color:var(--text-secondary);line-height:1.65} .product-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,56px);align-items:start} @media (max-width:860px){.product-intro{grid-template-columns:1fr}} .product-intro-copy h2{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,28px);color:var(--text-primary);margin:0 0 16px;line-height:1.3} .product-intro-copy p{font-size:15.5px;color:var(--text-secondary);line-height:1.75;margin:0 0 16px} .product-intro-copy p:last-child{margin-bottom:0} .product-intro-copy h3{font-family:'Quicksand',sans-serif;font-weight:700;font-size:17px;color:var(--text-primary);margin:28px 0 12px} .product-intro-copy strong{color:var(--text-primary);font-weight:700} .product-intro-copy ul:not(.product-intro-list){list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:11px} .product-intro-copy ul:not(.product-intro-list) li{position:relative;padding-left:22px;font-size:15.5px;color:var(--text-secondary);line-height:1.6} .product-intro-copy ul:not(.product-intro-list) li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--mint)} .product-intro-copy ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:11px} .product-intro-copy ol li{font-size:15.5px;color:var(--text-secondary);line-height:1.6;padding-left:4px} .product-intro-copy ol li::marker{font-weight:700;color:var(--text-primary)} .legal-callout{ background:var(--sky-light);border-radius:var(--radius-card-md); padding:20px 24px;margin:0 0 20px; } .legal-callout p{margin:0 0 8px;font-size:14.5px;color:var(--text-primary)} .legal-callout p:last-child{margin-bottom:0} .legal-callout .label{font-weight:800;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--mint-hover);margin:0 0 10px} .product-intro-list{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-direction:column;gap:12px} .product-intro-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-secondary);line-height:1.55} .product-intro-list svg{color:var(--mint);flex-shrink:0;margin-top:2px} .product-intro-list strong{color:var(--text-primary)} .product-aside{ background:#fff;border:1px solid var(--border-cream);border-radius:var(--radius-card-lg);padding:28px 26px; position:sticky;top:88px; } .product-aside h3{font-family:'Quicksand',sans-serif;font-weight:800;font-size:16px;color:var(--text-primary);margin:0 0 18px} .product-aside-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-cream)} .product-aside-row:last-of-type{border-bottom:none} .product-aside-row .k{font-size:13px;color:var(--text-secondary)} .product-aside-row .v{font-size:13.5px;font-weight:700;color:var(--text-primary);text-align:right} .product-aside .btn{display:block;width:fit-content;max-width:100%;margin:20px auto 0;padding:15px 32px;font-size:14.5px;text-align:center} .product-aside-note{font-size:11.5px;color:var(--text-tertiary);text-align:center;margin:12px 0 0;line-height:1.5} .product-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:22px} .product-benefit-card{ border:1px solid var(--border-cream);border-radius:var(--radius-card-lg);padding:28px 24px; background:#fff;transition:box-shadow .15s ease; } .product-benefit-card .icon{ width:48px;height:48px;border-radius:var(--radius-btn-lg);background:var(--mint-light); display:flex;align-items:center;justify-content:center;color:var(--mint-hover);margin:0 0 18px; } .product-benefit-card h3{font-family:'Quicksand',sans-serif;font-weight:800;font-size:16.5px;color:var(--text-primary);margin:0 0 10px} .product-benefit-card p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:0} .product-steps{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto} .product-step{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--border-cream);border-radius:var(--radius-card-md);padding:22px} .product-step-num{ width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:800;font-size:16px; } .product-step h4{font-family:'Quicksand',sans-serif;font-weight:800;font-size:15.5px;color:var(--text-primary);margin:0 0 6px} .product-step p{font-size:14px;color:var(--text-secondary);line-height:1.6;margin:0} .product-concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px;margin-top:8px} .product-concept{ border:1px solid var(--border-cream);border-radius:var(--radius-card-lg);padding:28px 26px; background:#fff;transition:box-shadow .15s ease; } .product-concept:hover{box-shadow:0 12px 32px rgba(11,31,58,.08)} .product-concept .icon{ width:44px;height:44px;border-radius:var(--radius-btn-lg);background:var(--mint-light); display:flex;align-items:center;justify-content:center;color:var(--mint-hover);margin:0 0 16px; } .product-concept h3{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:16.5px;color:var(--text-primary); margin:0 0 10px;line-height:1.3; } .product-concept p{font-size:14.5px;color:var(--text-secondary);line-height:1.75;margin:0} .product-concept p+p{margin-top:10px} .product-table-wrap{overflow-x:auto;border:1px solid var(--border-cream);border-radius:var(--radius-card-lg)} .product-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px} .product-table th{ text-align:left;padding:16px 20px;background:var(--gray-light);color:var(--text-primary); font-family:'Quicksand',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.3px; } .product-table td{padding:16px 20px;border-top:1px solid var(--border-cream);color:var(--text-secondary)} .product-table tr td:first-child{font-weight:700;color:var(--text-primary)} .product-table tr.is-highlight td{background:var(--mint-light)} /* ---- Login page (espace client) ---- */ .page-banner{background:var(--mint-light);padding:clamp(28px,5vw,40px) clamp(20px,4vw,48px);margin-bottom:8px} .page-banner-inner{max-width:1320px;margin:0 auto} .page-banner h1{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(26px,4vw,36px); color:var(--text-primary);margin:0 0 6px; } .page-banner p{font-size:16px;color:var(--text-secondary);margin:0} .login-layout{ max-width:1320px;margin:0 auto;padding:clamp(28px,5vw,44px) clamp(20px,4vw,48px) clamp(48px,6vw,64px); display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start; } @media (max-width:768px){.login-layout{grid-template-columns:1fr}} .login-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card-lg);padding:32px;box-shadow:var(--shadow-faq)} .login-card h2{font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--text-primary);margin:0 0 22px} .login-step-lead{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:0 0 20px} .login-submit{display:block;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto} .login-remember{display:flex;align-items:center;gap:.5rem;margin:14px 0 0;font-size:13px;color:var(--text-secondary);user-select:none;cursor:pointer} .login-remember input{width:auto;margin:0;accent-color:var(--mint-hover);cursor:pointer} .login-notice{ margin:16px 0;font-size:13.5px;color:var(--mint-hover);background:var(--mint-light); border-radius:var(--radius-btn-lg);padding:12px 14px;display:none; } .login-notice.show{display:block} .login-notice.is-error{color:var(--red);background:rgba(214,41,28,.08)} .login-aside{display:flex;flex-direction:column;gap:24px} .login-aside-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card-lg);padding:26px;text-align:center} .login-aside-card h3{font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary);margin:0 0 10px} .login-aside-card p{font-size:13.5px;color:var(--text-secondary);line-height:1.6;margin:0 0 18px} .login-aside-card .btn-outline{display:inline-block;max-width:100%} .login-tab-panel{display:none} .login-tab-panel.is-active{display:block} .app-loading{ position:fixed;inset:0;z-index:50;background:var(--gray-light); display:flex;align-items:center;justify-content:center; } .app-loading-spinner{ width:34px;height:34px;border-radius:50%; border:3px solid rgba(11,31,58,.12);border-top-color:var(--mint); animation:btn-spin .8s linear infinite; } .login-forgot{ display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer; margin-top:14px;font-size:12.5px;font-weight:600;color:var(--text-tertiary);text-decoration:underline; } /* ---- Espace client : app-shell façon appli bancaire ---- */ /* En dessous de 521px (téléphone — même seuil que .app-tabbar plus bas), la coquille est verrouillée exactement sur le viewport (position:fixed;inset:0) et seul .app-scroll défile : la barre du haut et celle du bas ne sont alors plus jamais DANS une zone qui défile, donc ne peuvent plus visuellement "bouger" avec le contenu, quelle que soit l'origine exacte du souci sur .app-tabbar en position:fixed classique (rebond iOS, redimensionnement dynamique du viewport pendant l'animation de la barre d'adresse, etc.). Les gabarits tablette/desktop (>520px) ne sont pas concernés par le bug signalé — on n'y touche pas. */ .app-shell{ min-height:100vh;min-height:100svh;background:var(--gray-light); max-width:520px;margin:0 auto;padding-bottom:96px; box-shadow:0 0 60px rgba(0,0,0,.06); } .app-scroll{display:contents} @media (max-width:520px){ .app-shell{ position:fixed;inset:0;margin:0;padding-bottom:0;max-width:none;box-shadow:none; display:flex;flex-direction:column; } .app-topbar{flex-shrink:0} .app-scroll{ display:block;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; } } @media (min-width:521px){.app-shell{min-height:100vh;min-height:100svh}} @media (min-width:701px){.app-shell{max-width:760px}} @media (min-width:1024px){ .app-shell{ max-width:none;box-shadow:none;padding-bottom:0; display:grid;grid-template-columns:250px 1fr;grid-template-rows:auto 1fr; grid-template-areas:"topbar topbar" "sidebar main"; } .app-topbar{grid-area:topbar} } .app-topbar{ position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px; } @media (min-width:701px){.app-topbar{padding:18px 28px}} @media (min-width:1024px){.app-topbar{padding:20px 36px}} .app-avatar{ width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;letter-spacing:.3px; flex-shrink:0; } .app-topbar-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);margin:0} .app-topbar-action{ position:relative;width:38px;height:38px;border-radius:50%;background:var(--gray-light);color:var(--text-primary); display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;cursor:pointer; } .app-topbar-action:hover{text-decoration:none;background:var(--border)} .app-topbar-badge{ position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff; font-size:9px;font-weight:800;border-radius:999px;padding:1px 4px;min-width:14px; text-align:center;line-height:1.4;border:2px solid #fff; } .app-tab-panel{display:none;padding:24px 20px 8px} .app-tab-panel.is-active{display:block} @media (min-width:701px){.app-tab-panel{padding:28px 28px 8px}} @media (min-width:1024px){.app-tab-panel{grid-area:main;padding:36px 40px 32px}} .app-credit-grid{display:block} @media (min-width:701px){ .app-credit-grid{ display:grid;grid-template-columns:1fr 1fr; grid-template-areas:"solde carte" "transactions transactions"; column-gap:36px;row-gap:32px;align-items:start; } .app-credit-solde{grid-area:solde} .app-credit-carte{grid-area:carte} .app-credit-transactions{grid-area:transactions} } @media (min-width:1024px){ .app-credit-grid{column-gap:48px} } @media (min-width:1024px){ #app-tab-documents,#app-tab-plus{max-width:680px;margin:0} } .app-card-stack{position:relative;height:184px;margin:0 4px 28px} @media (min-width:701px){.app-card-stack{max-width:400px}} .wallet-card{position:absolute;left:0;right:0;border-radius:18px} .wallet-card-front{ top:0;height:184px;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--emerald-dark) 0%,var(--emerald) 62%,var(--sky) 150%); color:#fff;padding:22px 24px;box-shadow:0 22px 44px rgba(6,63,58,.35); display:flex;flex-direction:column;justify-content:space-between; cursor:pointer;transition:transform .15s ease; } .wallet-card-front::after{ content:'';position:absolute;top:-70%;right:-25%;width:65%;height:240%; background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 42%); transform:rotate(8deg);pointer-events:none; } .wallet-card-front:active{transform:scale(.98)} .wallet-card-front:focus-visible{outline:2px solid #fff;outline-offset:3px} .wallet-card-number{ font-size:17px;font-weight:600;letter-spacing:2.5px;margin:36px 0 0;text-align:center; font-variant-numeric:tabular-nums;position:relative;z-index:1; } .wallet-card-bottom{display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1} .wallet-card-badge{font-size:10.5px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.18);padding:6px 11px;border-radius:999px;text-transform:uppercase} .wallet-card-tap-icon{ position:absolute;top:16px;right:16px;z-index:1; width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center;color:#fff; } .app-card-detail-row{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px; } .app-card-detail-row:last-child{border-bottom:none} .app-card-detail-label{color:var(--text-secondary)} .app-card-detail-value{color:var(--text-primary);font-weight:700;text-align:right} .tx-receipt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:14px} .tx-receipt-label{color:var(--text-tertiary)} .tx-receipt-value{color:var(--text-primary);font-weight:700;text-align:right} .tx-receipt-row-big{padding:18px 0} .tx-receipt-row-big .tx-receipt-label{font-size:15px;color:var(--text-secondary)} .tx-receipt-amount{font-family:'Quicksand',sans-serif;font-weight:800;font-size:22px;color:var(--text-primary)} .tx-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:700} .tx-status-dot{width:6px;height:6px;border-radius:50%;background:currentColor} .tx-status-effectue{background:var(--mint-light);color:var(--mint-hover)} .tx-status-en_cours{background:#FFF6DC;color:#946200} .tx-receipt-dashed{border:none;border-top:1px dashed var(--border-cream);margin:4px 0} .tx-receipt-ref{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;letter-spacing:.3px} .tx-copy-btn{ width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--text-tertiary); display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; } .tx-copy-btn:hover{background:var(--gray-light)} .tx-copy-btn.is-copied{background:var(--mint-light);border-color:var(--mint);color:var(--mint-hover)} .app-balance-panel{ position:relative;z-index:1;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(11,31,58,.1); margin:8px 0 28px;padding:26px 22px 20px;text-align:center; } .app-balance-label{font-size:12.5px;color:var(--text-tertiary);margin:0 0 14px} .app-balance-amount{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(30px,7vw,36px);color:var(--text-primary);margin:0 0 6px;letter-spacing:-.5px} .app-balance-sub{font-size:12px;color:var(--text-tertiary);margin:0 0 20px} .app-balance-sub strong{color:var(--text-secondary);font-weight:700} .app-quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:36px} .app-quick-action{ display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer; font-family:inherit;font-size:11.5px;font-weight:600;color:var(--text-primary);text-align:center;padding:0; } .app-quick-action:hover{text-decoration:none;color:var(--text-primary)} .app-quick-icon{ width:44px;height:44px;border-radius:50%;background:var(--sky-light);color:var(--mint-hover); display:flex;align-items:center;justify-content:center; } .app-schedule{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);text-align:left} .app-schedule-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;color:var(--text-secondary)} .app-schedule-row strong{color:var(--text-primary);font-weight:700} .app-section-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);margin:0 0 14px} .dossiers-empty{margin:0 0 20px;color:var(--text-secondary);font-size:13.5px} .app-activity-list{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:16px;overflow:hidden;margin-bottom:28px} .app-activity-row{ display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border); } .app-activity-row:last-child{border-bottom:none} .app-activity-row-tx{cursor:pointer;transition:background .15s ease} .app-activity-row-tx:hover,.app-activity-row-tx:focus-visible{background:var(--gray-light)} .app-activity-row-tx:focus-visible{outline:2px solid var(--mint-hover);outline-offset:-2px} .app-doc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0} .app-doc-action{ width:34px;height:34px;border-radius:10px;border:none;background:transparent;color:var(--mint-hover); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;padding:0; } .app-doc-action:hover,.app-doc-action:focus-visible{background:var(--gray-light)} .app-doc-action:focus-visible{outline:2px solid var(--mint-hover);outline-offset:-2px} .app-activity-icon{ width:38px;height:38px;border-radius:10px;background:var(--gray-light);color:var(--text-secondary); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .app-activity-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .app-activity-title{font-weight:700;font-size:14px;color:var(--text-primary)} .app-activity-meta{font-size:12.5px;color:var(--text-tertiary)} .app-activity-status{ padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;flex-shrink:0; } /* Timeline – Suivi dossier */ #app-timeline{padding:16px 16px 24px} .app-tl-card{ background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:20px; } .app-tl-heading{ font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 18px; } .app-tl-search{margin-bottom:18px} .app-tl-search-label{ display:block;font-size:11px;font-weight:700;letter-spacing:.06em; color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px; } .app-tl-search-row{display:flex;gap:8px} .app-tl-search-input{ flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:10px; font-size:14px;font-weight:600;color:var(--text-primary); background:var(--gray-light);outline:none; } .app-tl-search-btn{ padding:10px 18px;border:none;border-radius:10px; background:var(--navy);color:#fff;font-size:14px;font-weight:600;cursor:pointer; } .app-tl-step-card{ border:1px solid var(--border);border-radius:14px;padding:18px; background:var(--gray-light); } .app-tl-step-card.is-refused{ border-color:var(--red);background:rgba(214,41,28,.04); } .app-tl-step-header{display:flex;align-items:center;gap:14px;margin-bottom:10px} .app-tl-step-icon{ width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(37,99,235,.08);flex-shrink:0;position:relative; } .app-tl-step-icon.is-refused{background:rgba(214,41,28,.08);color:var(--red)} .app-tl-step-icon.is-complete{background:rgba(21,128,61,.1);color:#15803D} .app-tl-spinner{ width:28px;height:28px;border-radius:50%; border:3px solid rgba(37,99,235,.18);border-top-color:#2563EB; animation:tlSpin .9s linear infinite; } @keyframes tlSpin{to{transform:rotate(360deg)}} .app-tl-step-info{flex:1;min-width:0} .app-tl-step-tag{ display:block;font-size:11px;font-weight:700;letter-spacing:.06em; color:var(--text-tertiary);text-transform:uppercase;margin-bottom:2px; } .app-tl-step-title{ display:block;font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.3; } .app-tl-step-desc{ font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0 0 14px; } .app-tl-progress{margin-bottom:14px} .app-tl-progress-bar{ height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-bottom:6px; } .app-tl-progress-fill{ height:100%;border-radius:3px; background:linear-gradient(90deg,#15803D,#22c55e);transition:width .4s ease; } .app-tl-progress-label{ display:block;text-align:right;font-size:12px;font-weight:600;color:var(--accent); } .app-tl-more{ display:block;text-align:center;font-size:14px;font-weight:600; color:var(--accent);text-decoration:none;padding-top:4px; border-top:1px solid var(--border); } .app-tl-blocked{ display:flex;align-items:center;gap:10px;padding:16px 20px;border-radius:14px; background:var(--gray-light);color:var(--text-secondary);font-weight:700;font-size:14px; } /* Detail vertical steps (En savoir plus) */ .app-tl-detail{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)} .app-tl-steps-list{display:flex;flex-direction:column} .app-tl-vrow{display:flex;gap:12px;align-items:stretch} .app-tl-vtrack{display:flex;flex-direction:column;align-items:center;width:22px;flex-shrink:0} .app-tl-vdot{ width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center; flex-shrink:0;background:var(--gray-light);border:2px solid var(--border); } .app-tl-vrow[data-state="done"] .app-tl-vdot{background:#15803D;border-color:#15803D} .app-tl-vrow[data-state="active"] .app-tl-vdot{background:#2563EB;border-color:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,.18)} .app-tl-vline{flex:1;width:2px;min-height:18px;background:var(--border)} .app-tl-vline.is-done{background:#15803D} .app-tl-vline.is-active{background:linear-gradient(to bottom,#2563EB,var(--border))} .app-tl-vlabel{ font-size:13px;font-weight:600;color:var(--text-primary); display:flex;align-items:center;min-height:22px;padding-bottom:16px; } .app-tl-vrow:last-child .app-tl-vlabel{padding-bottom:0} .app-tl-vrow[data-state="pending"] .app-tl-vlabel{color:var(--text-tertiary);font-weight:400} .app-activity-amount{font-weight:700;font-size:14px;white-space:nowrap;flex-shrink:0} .app-activity-amount.is-credit{color:var(--mint-hover)} .app-activity-amount.is-debit{color:var(--text-primary)} .app-activity-pending{font-size:11px;color:var(--text-tertiary);display:block;margin-top:1px;text-align:right} .app-sheet-overlay{ position:fixed;inset:0;z-index:30;background:rgba(11,31,58,.45); display:flex;align-items:flex-end;justify-content:center; } @media (min-width:521px){.app-sheet-overlay{align-items:center}} .app-sheet{ width:100%;max-width:440px;background:#fff;border-radius:22px 22px 0 0; padding:22px 22px calc(22px + env(safe-area-inset-bottom));max-height:85vh;overflow-y:auto; } @media (min-width:521px){.app-sheet{border-radius:22px}} .app-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .app-sheet-title{font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;color:var(--text-primary);margin:0} .app-sheet-close{ width:32px;height:32px;border-radius:50%;background:var(--gray-light);border:none;color:var(--text-primary); display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; } .app-sheet-balance{font-size:13px;color:var(--text-secondary);margin:0 0 18px} .app-sheet-balance strong{color:var(--text-primary)} .app-sig-instructions{font-size:13.5px;color:var(--text-secondary);margin:0 0 14px;line-height:1.5} .app-sig-pad-wrap{position:relative;border:1.5px dashed var(--border);border-radius:14px;background:var(--gray-light);margin-bottom:14px} .app-sig-canvas{display:block;width:100%;height:160px;touch-action:none;border-radius:14px;cursor:crosshair} .app-sig-clear-btn{position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:.3rem .6rem;font-size:12px;font-weight:700;color:var(--text-secondary);cursor:pointer} .app-sig-error{background:rgba(214,41,28,.08);color:var(--red);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px} .app-sig-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:13px;color:var(--text-secondary);line-height:1.4;cursor:pointer;user-select:none} .app-sig-consent input{width:auto;margin:2px 0 0;accent-color:var(--mint-hover);cursor:pointer;flex-shrink:0} .app-sig-signed-badge{color:#15803d;font-weight:700} .app-pause-options{display:flex;gap:10px;margin:0 0 18px} .app-pause-option{ flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; padding:16px 8px;border-radius:14px;border:1.5px solid var(--border);background:#fff; font-family:inherit;font-weight:600;font-size:13px;color:var(--text-secondary);cursor:pointer; } .app-pause-option-n{font-family:'Quicksand',sans-serif;font-weight:800;font-size:22px;color:var(--text-primary)} .app-pause-option.is-selected{border-color:var(--mint-hover);background:var(--mint-light)} .app-pause-option.is-selected .app-pause-option-n{color:var(--mint-hover)} .app-pause-option.is-selected{color:var(--mint-hover)} .app-menu-list{background:#fff;border-radius:16px;overflow:hidden} .app-menu-row{ display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;border-bottom:1px solid var(--border); font-family:inherit;font-size:14px;font-weight:600;color:var(--text-primary);background:none;border-left:none;border-right:none;border-top:none;cursor:pointer; } .app-menu-row:last-child{border-bottom:none} .app-menu-row:hover{text-decoration:none;background:var(--gray-light)} .app-menu-icon{ width:34px;height:34px;border-radius:10px;background:var(--gray-light);color:var(--text-secondary); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .app-menu-label{flex:1;min-width:0} .app-menu-chevron{color:var(--text-tertiary);flex-shrink:0;display:flex} .app-menu-row-danger{color:var(--red)} .app-menu-row-danger .app-menu-icon{background:#fee2e2;color:var(--red)} .app-sign-banner{ display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer; padding:16px;margin-bottom:16px;border-radius:16px;border:none; background:#fff; font-family:inherit; } .app-sign-banner:hover{text-decoration:none;background:var(--gray-light)} .app-sign-banner-icon{ width:42px;height:42px;border-radius:12px;background:var(--gray-light);color:var(--text-secondary); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .app-sign-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .app-sign-banner-title{font-weight:800;font-size:14.5px;color:var(--text-primary)} .app-sign-banner-sub{font-size:12.5px;color:var(--text-secondary);font-weight:500} .app-sign-banner-chevron{color:var(--text-tertiary);flex-shrink:0;display:flex} .app-profile-back{ display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer; font-family:inherit;font-size:13px;font-weight:700;color:var(--text-secondary);padding:0;margin-bottom:16px; } .app-profile-back:hover{color:var(--text-primary)} .app-profile-group-title{ font-family:'Quicksand',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase; color:var(--text-tertiary);margin:0 0 10px; } .app-profile-list{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:24px} .app-profile-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border)} .app-profile-row:last-child{border-bottom:none} .app-profile-row-label{font-size:13px;color:var(--text-tertiary);flex-shrink:0} .app-profile-row-value{font-size:13.5px;font-weight:700;color:var(--text-primary);text-align:right} .app-tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:520px;margin:0 auto; background:#fff;border-top:1px solid var(--border); display:flex; padding:10px 4px calc(10px + env(safe-area-inset-bottom)); } /* .app-shell est verrouillée sur le viewport en dessous de 520px (voir plus haut) : la barre du bas y devient un vrai frère flex statique, toujours au fond de la coquille non-scrollable, plutôt que de compter sur position:fixed pour rester en place. */ @media (max-width:520px){ /* margin:0 auto (nécessaire pour le centrage viewport en position:fixed classique) combiné à position:static sur un enfant flex déclenche le comportement "rétrécir au contenu + centrer via les marges auto" du flexbox, au lieu de remplir la largeur — d'où la barre qui semblait "resserrée" avec du gris de chaque côté. margin:0 annule ça. */ .app-tabbar{position:static;flex-shrink:0;margin:0;max-width:none} } @media (min-width:701px){.app-tabbar{max-width:760px}} @media (min-width:1024px){ .app-tabbar{ grid-area:sidebar;position:static;max-width:none;margin:0; display:flex;flex-direction:column;align-items:stretch;gap:2px; border-top:none;border-right:1px solid var(--border); padding:24px 14px; } } .app-tab{ display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer; font-family:inherit;font-size:10.5px;font-weight:600;color:var(--text-tertiary);padding:4px; flex:1;min-width:0; } .app-tab:hover{text-decoration:none;color:var(--text-tertiary)} .app-tab.is-active{color:var(--mint-hover)} @media (min-width:1024px){ .app-tab{ flex-direction:row;justify-content:flex-start;gap:12px;font-size:13.5px; padding:11px 14px;border-radius:10px;flex:none; } .app-tab svg{flex-shrink:0} .app-tab:hover{background:var(--gray-light);color:var(--text-secondary)} .app-tab.is-active{background:var(--mint-light);color:var(--mint-hover)} } /* ---- Messagerie (espace client) ---- */ #app-tab-messages.is-active{display:flex;flex-direction:column;padding:0;height:calc(100vh - 150px)} @media (max-width:1023px){ #app-tab-messages.is-active{ position:fixed;z-index:8; top:var(--app-topbar-h, 72px);bottom:var(--app-tabbar-h, 70px); left:0;right:0;max-width:520px;margin:0 auto;height:auto; } .app-shell.messages-open .app-tabbar{display:none} .app-shell.messages-open #app-tab-messages.is-active{bottom:0} } .app-msg-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:20px 20px 8px} .app-msg-bubble{max-width:78%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.45} .app-msg-bubble-client{align-self:flex-end;background:var(--mint);color:#fff;border-bottom-right-radius:4px} .app-msg-bubble-admin{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px} .app-msg-bubble-subject{font-weight:800;display:block;margin-bottom:2px} .app-msg-bubble-time{display:block;font-size:10.5px;opacity:.7;margin-top:4px} .app-msg-empty{color:var(--text-tertiary);font-size:13.5px;text-align:center;margin:auto} .app-msg-compose{ display:flex;gap:8px;align-items:flex-end;padding:10px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border);background:#fff; } .app-msg-compose textarea{ flex:1;background:var(--gray-light);border:1px solid var(--border);border-radius:20px; padding:11px 16px;font-size:16px;font-family:inherit;resize:none; max-height:120px;overflow-y:auto;line-height:1.35; } .app-msg-compose textarea:focus{outline:none;border-color:var(--mint)} .app-msg-send{ width:44px;height:44px;border-radius:50%;background:var(--mint);color:#fff;border:none; display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; transition:opacity .15s ease,background .15s ease; } .app-msg-send:hover{background:var(--mint-hover)} .app-msg-send:disabled{opacity:.4;cursor:default;pointer-events:none} .app-msg-attach{ width:38px;height:38px;border-radius:50%;background:var(--gray-light);color:var(--text-secondary);border:none; display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-bottom:3px; } .app-msg-attach:hover{background:var(--border)} .app-msg-file-preview{ display:flex;align-items:center;gap:10px;margin:0 16px 10px;padding:9px 12px; background:var(--gray-light);border-radius:12px;font-size:12.5px; } .app-msg-file-preview-icon{color:var(--mint-hover);flex-shrink:0;display:flex} .app-msg-file-preview-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--text-primary)} .app-msg-file-preview-remove{ width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--text-tertiary); display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0; } .app-msg-file-preview-remove:hover{background:var(--gray-light)} .app-msg-bbl-file{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.15); text-decoration:none;color:inherit;cursor:pointer;margin:-2px -4px 0; } .app-msg-bubble-admin .app-msg-bbl-file{background:var(--gray-light)} .app-msg-bbl-file-ico{flex-shrink:0;display:flex} .app-msg-bbl-file-info{display:flex;flex-direction:column;min-width:0;flex:1} .app-msg-bbl-file-name{font-weight:700;font-size:13px;word-break:break-all} .app-msg-bbl-file-size{font-size:11px;opacity:.75} .app-file-lightbox{ position:fixed;inset:0;z-index:10000;background:rgba(11,31,58,.92);display:none; align-items:center;justify-content:center;padding:24px; } .app-file-lightbox.open{display:flex} .app-file-lightbox-img{max-width:100%;max-height:100%;border-radius:8px;display:none} .app-file-lightbox-close{ position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.15);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer; } .app-file-lightbox-close:hover{background:rgba(255,255,255,.25)} .app-file-lightbox-spinner{ width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:#fff; animation:btn-spin .7s linear infinite;display:none; } .app-file-lightbox.open .app-file-lightbox-spinner{display:block} .app-file-lightbox.open.is-loaded .app-file-lightbox-spinner{display:none} .app-file-lightbox.open.is-loaded .app-file-lightbox-img{display:block} /* ---- Timeline date badge ---- */ .product-step-date{ display:inline-block;font-family:'Quicksand',sans-serif;font-weight:800;font-size:11.5px; letter-spacing:.4px;color:var(--mint-hover);background:var(--mint-light); border-radius:999px;padding:3px 10px;margin:0 0 6px; } /* ---- FAQ search ---- */ .faq-search-wrap{position:relative;max-width:640px;margin:0 auto} .faq-search-wrap svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none} .faq-search-input{ width:100%;padding:16px 20px 16px 50px;border:1.5px solid var(--border-cream);border-radius:999px; font-family:inherit;font-size:16px;color:var(--text-primary);background:#fff; } .faq-search-input:focus{outline:none;border-color:var(--mint)} .faq-search-input::placeholder{color:var(--text-tertiary)} .faq-search-empty{display:none;text-align:center;font-size:14.5px;color:var(--text-secondary);margin:32px 0 0} .search-results-heading{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,26px);color:var(--text-primary); max-width:920px;margin:0 auto 24px; } /* ---- Centre d'aide (FAQ hub) ---- */ .faqhub-wrap{max-width:1024px;margin:0 auto;padding:0 20px} .faqhub-hero{ position:relative;background:var(--sky);text-align:center;overflow:hidden; padding:clamp(48px,8vw,72px) 20px clamp(64px,10vw,96px); clip-path:polygon(0 0,100% 0,100% 80%,0 100%); } .faqhub-hero h1{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(26px,4vw,38px);line-height:1.3;color:var(--navy);margin:0} .faqhub-hero-underline{width:60px;height:4px;background:var(--navy);margin:12px auto 0} .faqhub-hero .faq-search-wrap{margin-top:clamp(28px,4vw,40px)} .faqhub-hero .faq-search-input{box-shadow:0 4px 14px rgba(0,0,0,.08)} .faqhub-banner{ display:inline-block;transform:rotate(-4deg);background:var(--mint); padding:12px 22px;margin:-34px 0 30px 8px; } .faqhub-banner span{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(18px,2.4vw,24px);color:#fff} .faqhub-intro{font-size:17px;line-height:1.6;color:var(--text-primary);margin:0 0 36px} .faqhub-intro a{font-weight:700;color:var(--text-primary)} .faqhub-themes-heading{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(19px,2.4vw,22px);color:var(--text-primary);margin:0 0 24px} .faqhub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px} .faqhub-tile{ display:flex;align-items:center;gap:14px;background:#fff;border-radius:12px;min-height:90px; padding:16px 22px;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;text-decoration:none; border:0;font-family:inherit;text-align:left;width:100%; } .faqhub-tile:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);text-decoration:none} .faqhub-tile-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .faqhub-tile span{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--text-primary)} .faqhub-tile[data-extra]{display:none} .faqhub-grid.is-expanded .faqhub-tile[data-extra]{display:flex} .faqhub-more-wrap{display:flex;justify-content:center;margin-bottom:44px} .faqhub-more-btn{ height:56px;padding:0 26px;border:2px solid var(--text-primary);border-radius:30px;background:transparent; font-family:inherit;font-size:16px;font-weight:700;color:var(--text-primary); display:inline-flex;align-items:center;gap:16px;cursor:pointer; } .faqhub-more-btn .less{display:none} .faqhub-more-btn.is-expanded .more{display:none} .faqhub-more-btn.is-expanded .less{display:inline-flex;align-items:center;gap:16px} .faqhub-contact-bar{ background:var(--gray-light);padding:22px 20px;text-align:center; display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px; font-size:17px;font-weight:700;color:var(--text-primary);text-decoration:none; } .faqhub-contact-bar:hover{color:var(--mint-hover);text-decoration:none} .faqhub-cat{margin:12px 0 44px} .faqhub-cat-back{ height:44px;padding:0 20px 0 22px;border:0;border-radius:22px;background:var(--gray-light); font-family:inherit;font-size:14.5px;font-weight:700;color:var(--text-primary); display:inline-flex;align-items:center;gap:16px;cursor:pointer;margin-bottom:32px; } .faqhub-cat-title{display:flex;align-items:center;gap:14px;font-family:'Quicksand',sans-serif;font-weight:800;font-size:19px;color:var(--text-primary);margin-bottom:20px} .faqhub-cat .newfin-aide-card{margin-top:0} @media (max-width:900px){ .faqhub-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .faqhub-grid{grid-template-columns:1fr} .faqhub-hero{clip-path:polygon(0 0,100% 0,100% 88%,0 100%)} } /* ---- Bannière cookies ---- */ .cookie-consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;justify-content:center;pointer-events:none} .cookie-consent-panel{pointer-events:auto;display:flex;flex-direction:column;width:100%;max-width:520px;height:min(62vh,540px);background:var(--white);border-radius:20px 20px 0 0;box-shadow:0 -8px 28px rgba(11,31,58,.18)} @media (min-width:701px){ .cookie-consent{top:0;bottom:0;align-items:center} .cookie-consent-panel{border-radius:20px;box-shadow:0 12px 40px rgba(11,31,58,.22)} } .cookie-consent-reject{flex-shrink:0;display:flex;align-items:center;gap:4px;margin:0;padding:18px 22px 10px;background:none;border:none;color:var(--mint-hover);font-weight:700;font-size:14px;cursor:pointer} .cookie-consent-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 22px} .cookie-consent-title{font-family:'Quicksand',sans-serif;font-weight:800;font-size:19px;color:var(--text-primary);margin:0 0 10px} .cookie-consent-text{font-size:13.5px;color:var(--text-secondary);line-height:1.55;margin:0 0 16px} .cookie-consent-subhead{font-weight:700;font-size:14px;color:var(--text-primary);margin:0 0 10px} .cookie-consent-cat{padding:12px 0;border-top:1px solid var(--border)} .cookie-consent-cat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px} .cookie-consent-cat h4{font-family:'Quicksand',sans-serif;font-weight:700;font-size:13.5px;color:var(--text-primary);margin:0} .cookie-consent-cat em{color:var(--text-tertiary);font-style:normal;font-weight:600;font-size:12px} .cookie-consent-cat p{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:0} .cookie-consent-toggle{position:relative;width:38px;height:22px;flex-shrink:0} .cookie-consent-toggle input{opacity:0;width:0;height:0;position:absolute} .cookie-consent-toggle span{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .2s} .cookie-consent-toggle span::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)} .cookie-consent-toggle input:checked+span{background:var(--mint)} .cookie-consent-toggle input:checked+span::before{transform:translateX(16px)} .cookie-consent-note{font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin:14px 0 0} .cookie-consent-note:last-child{margin-bottom:18px} .cookie-consent-note a{color:var(--mint-hover);font-weight:700;text-decoration:none} .cookie-consent-actions{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border)} .cookie-consent-btn{width:fit-content;max-width:100%;margin:0 auto;padding:13px 28px;border-radius:var(--radius-btn);border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-weight:700;font-size:13.5px;letter-spacing:.2px;text-transform:uppercase;cursor:pointer;text-align:center} .cookie-consent-btn:hover{background:rgba(11,31,58,.06)} /* ===== Paiement en plusieurs fois (client-facing) ===== */ .pfc-page{--articles-green:#1C3E4B;--articles-dark:#3B3C40;font-family:'Figtree',sans-serif;color:var(--articles-dark)} .pfc-hero{position:relative;background:#fff;overflow:hidden;padding:0 clamp(20px,4vw,48px)} .pfc-hero-wave{position:absolute;left:0;top:0;width:100%;height:170px;background:var(--hero-navy);clip-path:polygon(0 0,100% 0,100% 65%,0 100%)} .pfc-hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:36px 0 64px} .pfc-hero-photo{position:relative;border-radius:var(--radius-card-lg);overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.14);background:#ddd} .pfc-hero-photo img{display:block;width:100%;height:clamp(220px,32vw,360px);object-fit:cover} .pfc-solutions{position:relative;background:#fff;padding:56px clamp(20px,4vw,48px) 0} .pfc-solutions-heading{max-width:900px;margin:0 auto;text-align:center;color:var(--articles-green);font-family:'Figtree',sans-serif} .pfc-solutions-heading p{margin:0;font-size:clamp(17px,2vw,22px);line-height:1.35} .pfc-solutions-heading p:first-child{font-weight:400} .pfc-solutions-heading p:last-child{font-weight:600;margin-top:4px} .pfc-solutions-cards{max-width:900px;margin:32px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch} .pfc-solutions-cards img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-card-md);display:block;box-shadow:0 4px 14px rgba(0,0,0,.1)} .pfc-solutions-card2{background:#f5f5f5;border-radius:var(--radius-card-md);box-shadow:0 4px 14px rgba(0,0,0,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 16px;text-align:center} .pfc-solutions-badges{display:flex;gap:10px} .pfc-solutions-badges span{width:44px;height:44px;border-radius:50%;background:var(--articles-green);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif} .pfc-solutions-card2 p{margin:0;color:var(--articles-green);font-family:'Figtree',sans-serif;font-weight:400;font-size:clamp(16px,1.9vw,21px);line-height:1.25} .pfc-solutions-card2 sup{font-size:11px;vertical-align:8px} /* Real "Newfin par carte bancaire" wordmark — a live HTML/CSS lockup (badges + word + subtitle), not a raster image, so it's never stuck showing another brand's logo baked into pixels. --green flips it for use on a light background instead of the green section it's built for by default. */ .pfc-brand-logo{display:inline-flex;align-items:center;gap:12px;font-family:'Figtree',sans-serif} .pfc-brand-logo-badges{display:flex;gap:6px} .pfc-brand-logo-badges span{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--articles-green);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center} .pfc-brand-logo-word{color:#fff;font-weight:600;font-size:clamp(24px,3vw,32px)} .pfc-brand-logo-sub{font-family:'Quicksand',sans-serif;font-weight:800;font-size:11px;line-height:1.15;letter-spacing:.3px;text-transform:uppercase;color:#fff} .pfc-brand-logo--green .pfc-brand-logo-badges span{background:var(--articles-green);color:#fff} .pfc-brand-logo--green .pfc-brand-logo-word,.pfc-brand-logo--green .pfc-brand-logo-sub{color:var(--articles-green)} .pfc-features{margin-top:44px;background:var(--articles-green);border-radius:24px 24px 0 0;padding:40px clamp(20px,4vw,48px) 48px;display:flex;flex-direction:column;align-items:center;gap:28px} .pfc-features-body{max-width:1000px;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:start} .pfc-features-lead{color:#fff;font-family:'Figtree',sans-serif;font-weight:300;font-size:clamp(19px,2.4vw,26px);line-height:1.35;margin:0} .pfc-features-lead b{font-weight:600} .pfc-features-list{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none} .pfc-features-list li{display:flex;align-items:flex-start;gap:16px} .pfc-features-list img{width:36px;height:36px;flex-shrink:0;margin-top:2px} .pfc-features-list span{color:#fff;font-weight:700;font-size:clamp(14px,1.6vw,17px);line-height:1.35} .pfc-example{background:#fff} .pfc-example-disclaimer{background:var(--articles-green);padding:20px clamp(20px,4vw,48px)} .pfc-example-disclaimer p{max-width:1200px;margin:0 auto;color:#fff;font-weight:600;font-size:clamp(12px,1.3vw,14.5px);line-height:1.6} .pfc-example-body{max-width:1200px;margin:0 auto;padding:40px clamp(20px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center} .pfc-example-photo{width:100%;border-radius:var(--radius-card-lg);display:block;box-shadow:0 8px 28px rgba(0,0,0,.12)} .pfc-example-copy{text-align:center} .pfc-example-kicker{margin:0 0 12px;color:var(--text-secondary);font-weight:600;font-size:15px} .pfc-example-kicker b{font-weight:800} .pfc-example-copy .pfc-brand-logo{margin:0 0 16px} .pfc-example-title{margin:0 0 18px;color:var(--articles-green);font-family:'Figtree',sans-serif;font-weight:400;font-size:clamp(22px,2.6vw,30px)} .pfc-example-detail{margin:0;color:var(--text-secondary);font-weight:600;font-size:14.5px;line-height:1.7} .pfc-example-footer{height:3px;background:#fafafa} .pfc-how{background:#fafafa;padding:56px clamp(20px,4vw,48px)} .pfc-how-heading{max-width:900px;margin:0 auto;text-align:center;color:var(--articles-green)} .pfc-how-heading p:first-child{margin:0;font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:.4px} .pfc-how-heading p:last-child{margin:4px 0 0;font-weight:300;font-size:clamp(24px,3vw,34px)} .pfc-how-grid{max-width:1200px;margin:40px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:start} .pfc-how-card{position:relative;background:#fff;border-radius:var(--radius-card-md);box-shadow:0 2px 8px rgba(0,0,0,.06);padding:36px 18px 22px;text-align:center;min-height:260px;display:flex;align-items:center} .pfc-how-num{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--articles-green);color:#fff;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif} .pfc-how-card p{margin:0;color:var(--text-secondary);font-weight:600;font-size:15px;line-height:1.5} @media (max-width:960px){ .pfc-features-body{grid-template-columns:1fr} .pfc-example-body{grid-template-columns:1fr} .pfc-how-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .pfc-hero-wave{height:110px} .pfc-solutions-cards{grid-template-columns:1fr} .pfc-how-grid{grid-template-columns:1fr} .pfc-how-card{min-height:0} } /* ===== Trust badges (Atouts) ===== */ .trust-section{background:#ffffff;padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px)} .trust-grid{ max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:36px; } .trust-item{display:flex;flex-direction:column;align-items:center;text-align:center} .trust-badge{width:150px;height:auto;display:block;margin-bottom:22px;overflow:visible;user-select:none;-webkit-user-select:none;pointer-events:none} .trust-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:280px} .trust-list li{font-family:'Figtree',sans-serif;font-weight:500;font-size:16px;line-height:1.4;color:#003b45} .trust-list li::before{content:"• "} .trust-dots{display:none} @media (max-width:640px){ .trust-grid{ display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:0; -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:0 20px; } .trust-grid::-webkit-scrollbar{display:none} .trust-item{flex:0 0 100%;scroll-snap-align:center;padding:0 20px} .trust-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px} .trust-dot{width:9px;height:9px;border-radius:50%;background:#d9d9d9;border:none;padding:0;cursor:pointer} .trust-dot.is-active{background:#003b45} } /* ===== Transparent, sécurisé et fiable (Etapes) ===== */ .steps-secure-section{ width:100%;box-sizing:border-box;margin-bottom:40px;padding:0 clamp(20px,4vw,48px); } /* Navy background now lives on this 1320px-capped inner box instead of the full-width section — same line as the cards/header, like every other section, instead of bleeding edge to edge. */ .steps-secure-inner{ position:relative;overflow:hidden;background:var(--hero-navy);max-width:1320px;margin:0 auto; padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px);border-radius:0 0 0 clamp(40px,8vw,130px); } .steps-secure-decor{ position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%; background:rgba(255,255,255,.04);pointer-events:none; } .steps-secure-inner h2{ position:relative;z-index:2;max-width:900px;margin:0 auto clamp(28px,4vw,40px);text-align:center; font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(24px,3.2vw,35px);color:#fff; } .steps-secure-grid{ position:relative;z-index:2;max-width:1320px;margin:0 auto;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:28px; } .steps-secure-item{display:flex;flex-direction:column;align-items:center;text-align:center} .steps-secure-num{ width:70px;height:70px;border-radius:50%;background:#edc91a;color:#fff;font-size:32px;font-weight:700; display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0; } .steps-secure-item p{background:#fff;border-radius:20px;padding:26px 28px;font-size:16px;line-height:1.5;color:#003b45;margin:0;flex:1} @media (max-width:900px){ .steps-secure-section{padding:0} .steps-secure-inner{margin-left:20px;margin-right:20px;border-radius:24px} } /* ===== Nous sommes là pour vous aider ===== */ .help-contact-section{background:#ffffff;padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px)} .help-contact-inner{ max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,60px);align-items:center; } .help-contact-text h2{ font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(24px,3.2vw,35px);color:#003b45;margin:0 0 28px; } .help-contact-links{display:flex;flex-direction:column;gap:14px} .help-contact-link{ display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fffadb;border-radius:12px; padding:20px 24px;font-size:17px;color:#003b45; } .help-contact-link svg{flex-shrink:0} .help-contact-visual{position:relative} .help-contact-photo{display:block;width:100%;border-radius:24px;object-fit:cover;aspect-ratio:740/345} .help-contact-card{ background:#fff;border-radius:20px;box-shadow:0 8px 30px rgba(0,0,0,.08);margin-top:-40px;position:relative;z-index:2; margin-left:clamp(0px,4vw,40px);margin-right:clamp(0px,4vw,40px);overflow:hidden; } .help-contact-card-top{background:#edc91a;padding:24px 28px;text-align:center} .help-contact-card-top p{margin:0;font-size:18px;color:#003b45} .help-contact-card-top p.strong{font-weight:700;font-size:23px;margin:6px 0} .help-contact-card-bottom{padding:22px 28px;text-align:center} .help-contact-phone{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none} .help-contact-phone img{width:32px;height:32px;display:block} .help-contact-phone span{font-size:28px;font-weight:700;color:#003b45;white-space:nowrap} .help-contact-price{font-size:15px;color:#003b45;margin:10px 0 0} @media (max-width:860px){ .help-contact-inner{grid-template-columns:1fr} .help-contact-card{margin-left:0;margin-right:0} } @media (max-width:640px){ .help-contact-photo{display:none} .help-contact-card{margin-top:0} } /* ===== Loan simulator v2: dual live sliders (Pret Personnel handoff) ===== */ .loan-sim-card{ max-width:720px;margin:0 auto;box-sizing:border-box;background:#fff;border-radius:19px; box-shadow:0 3px 18px rgba(0,0,0,.14);padding:25px clamp(20px,5vw,61px) 25px clamp(20px,4.5vw,49px); font-family:Arial,Helvetica,sans-serif;color:#3d3d3d; } .loan-sim-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap} .loan-sim-head h2{font-weight:500;font-size:22px;color:#3d3d3d;letter-spacing:-0.2px;margin:0;padding-top:12px;line-height:26px} .loan-sim-chip-wrap{position:relative;width:min(320px,100%)} .loan-sim-chip{ width:100%;min-height:48px;box-sizing:border-box;border:1px solid #c4c4c4;border-radius:3px; background:#fff;display:flex;align-items:center;padding:0 14px 0 13px;gap:8px; margin:0;cursor:pointer;text-align:left;font:inherit; } .loan-sim-chip svg{flex:none;color:#3d3d3d} .loan-sim-chip[aria-expanded="true"]{border-color:var(--mint)} .loan-sim-chip-chevron{transition:transform .15s ease} .loan-sim-chip[aria-expanded="true"] .loan-sim-chip-chevron{transform:rotate(180deg)} .loan-sim-chip-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .loan-sim-chip-kicker{font-size:9px;color:#6f6f6f;line-height:10px} .loan-sim-chip-value{font-size:15px;color:#3d3d3d;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .loan-sim-project-menu{ position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#fff; border:1px solid #c4c4c4;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px;display:flex;flex-direction:column;gap:2px; } .loan-sim-project-option{ display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;border-radius:4px; background:none;margin:0;cursor:pointer;text-align:left;font:inherit;font-size:14px;color:#3d3d3d; } .loan-sim-project-option svg{flex:none;color:#6f6f6f} .loan-sim-project-option:hover{background:#f4f4f4} .loan-sim-project-option[aria-selected="true"]{background:var(--mint-light);color:var(--mint-hover);font-weight:700} .loan-sim-project-option[aria-selected="true"] svg{color:var(--mint-hover)} .loan-sim-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));column-gap:44px;row-gap:28px;margin-top:31px} .loan-sim-col-recap{margin-top:-8px} .loan-sim-row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;height:40px} .loan-sim-row-head.loan-sim-row-head-duration{margin-top:31px;height:21px;align-items:baseline} .loan-sim-label{font-size:14px;font-weight:700;color:#3d3d3d} .loan-sim-value{font-size:18px;font-weight:700;color:var(--mint);white-space:nowrap} .loan-sim-value-boxed{ width:128px;height:40px;box-sizing:border-box;border:1px solid #cfcfcf;border-radius:3px;background:#fff; display:flex;align-items:center;justify-content:flex-end;padding-right:10px; } .loan-sim-slider-wrap{display:flex;align-items:center;gap:10px;margin-top:20px;height:40px} .loan-sim-row-head.loan-sim-row-head-duration + .loan-sim-slider-wrap{margin-top:22px} .loan-sim-step{ flex:none;width:40px;height:40px;box-sizing:border-box;border:1px solid #b5b5b5;border-radius:50%; display:flex;align-items:center;justify-content:center;background:#fff;color:#9a9a9a;cursor:pointer;padding:0; font-size:16px;line-height:1; } .loan-sim-step:hover{border-color:var(--mint);color:var(--mint)} .loan-sim-range{ flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:2.5px;background:#c9c9c9;outline:none;margin:0; } .loan-sim-range::-webkit-slider-thumb{ -webkit-appearance:none;width:29px;height:29px;border-radius:50%;background:var(--mint);cursor:pointer;border:none; } .loan-sim-range::-moz-range-thumb{ width:29px;height:29px;border-radius:50%;background:var(--mint);cursor:pointer;border:none; } .loan-sim-range::-moz-range-track{height:5px;border-radius:2.5px;background:#c9c9c9} .loan-sim-minmax{display:flex;justify-content:space-between;padding:0 50px 0 49px;margin-top:6px;font-size:13.5px;line-height:16px;color:#7d7d7d} .loan-sim-recap-row{ display:flex;justify-content:space-between;align-items:center;gap:10px;height:40px;border-bottom:1px solid #d6d6d6;font-size:14px;color:#3d3d3d; } .loan-sim-recap-row-main{align-items:baseline;height:42px;padding-top:10px} .loan-sim-recap-row-main .loan-sim-recap-label{font-weight:700} .loan-sim-recap-row span:last-child{font-weight:700;text-align:right} .loan-sim-recap-row-main span:last-child{display:flex;align-items:baseline;gap:5px;color:var(--mint);font-size:18px} .loan-sim-recap-row-main span:last-child small{font-size:13.5px;font-weight:400;margin-left:0} .loan-sim-insurance{display:flex;align-items:flex-start;gap:12px;margin-top:26px} .loan-sim-toggle{ flex:none;position:relative;width:54px;height:29px;box-sizing:border-box;border:1px solid #d0d0d0;border-radius:14.5px; background:#fff;padding:0;cursor:pointer; } .loan-sim-toggle-knob{ position:absolute;left:2px;top:1.5px;width:24px;height:24px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s ease; } .loan-sim-toggle[aria-checked="true"]{background:var(--mint);border-color:var(--mint)} .loan-sim-toggle[aria-checked="true"] .loan-sim-toggle-knob{left:28px} .loan-sim-insurance-label{display:flex;align-items:center;gap:8px;height:29px;font-size:13.5px;font-weight:700;color:#3d3d3d} .loan-sim-insurance p{margin:4px 0 0;max-width:352px;font-size:12px;line-height:16px;color:#3d3d3d} .loan-sim-cta{ display:flex;align-items:center;justify-content:center;gap:18px;width:fit-content;max-width:100%;height:45px;margin:42px auto 0; padding:0 28px;border-radius:22.5px;background:var(--mint);border:none;color:#fff;font-size:16px;font-weight:700;cursor:pointer; font-family:Arial,Helvetica,sans-serif;white-space:nowrap; } .loan-sim-cta:hover{background:var(--mint-hover)} .loan-sim-cta svg{flex:none} @media (max-width:640px){ .loan-sim-card{padding:22px 18px} .loan-sim-grid{row-gap:24px} } /* ===== Prêt Personnel page v2 (Pret Personnel handoff) ===== */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .pp-hero{position:relative;width:100%;padding:30px 0 56px} .pp-hero-banner{position:absolute;left:0;top:0;width:100%;height:240px;background:var(--hero-navy);clip-path:polygon(0 0,100% 0,100% 70%,0 100%)} .pp-hero-photo{position:relative;margin:0 auto;width:min(1180px,calc(100% - 48px));height:min(358px,42vw);border-radius:11px;overflow:hidden} .pp-hero-photo img{width:100%;height:100%;object-fit:cover;display:block} .pp-hero .product-simulator{position:relative;margin:-90px auto 0;width:min(1030px,calc(100% - 32px));max-width:none;z-index:1;display:block} .pp-hero .loan-sim-card{max-width:none;width:100%} @media (max-width:640px){ .pp-hero-photo{height:52vw} .pp-hero .product-simulator{margin-top:-40px} } .pp-avantages{position:relative;width:100%;padding:14px 0 54px;font-family:Arial,Helvetica,sans-serif;color:#3d3d3d} .pp-avantages h2{text-align:center;font-family:'Quicksand',Arial,sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px);line-height:1.25;color:#4a4a4a;margin:0} .pp-avantages-bar{margin:20px auto 0;width:50px;height:3px;border-radius:1.5px;background:var(--mint)} .pp-avantages-lede{margin:38px auto 0;max-width:880px;padding:0 16px;text-align:center;font-size:13.5px;line-height:20px;color:#3d3d3d} .pp-avantages-grid{ margin:70px auto 0;width:min(1072px,calc(100% - 48px));display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,416px),1fr));column-gap:32px;row-gap:54px; } .pp-avantage{display:flex;gap:19px;align-items:flex-start} .pp-avantage-icon{ flex:none;width:70px;height:70px;box-sizing:border-box;border:2px solid var(--mint);border-radius:50%; display:flex;align-items:center;justify-content:center;color:var(--mint); } .pp-avantage h3{padding-top:21px;font-size:19px;font-weight:700;color:#3d3d3d;line-height:24px;margin:0} .pp-avantage p{margin:18px 0 0;font-size:13.5px;line-height:20px;color:#3d3d3d;max-width:360px} .pp-avantage p a{color:#3d3d3d;text-decoration:underline} .pp-etapes{position:relative;width:100%;padding:70px 0 69px;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#3d3d3d} .pp-etapes-bg{position:absolute;left:min(120px,6%);right:0;top:0;bottom:3px;background:#f0f0f0;clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%)} .pp-etapes h2{position:relative;text-align:center;font-family:'Figtree',Arial,sans-serif;font-size:clamp(20px,2.6vw,26px);line-height:1.25;color:#4a4a4a;margin:0} .pp-etapes h2.light{font-weight:300} .pp-etapes-bar{position:relative;margin:25px auto 0;width:20px;height:2px;background:var(--mint)} .pp-etapes-row{position:relative;margin-top:80px;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;row-gap:32px} .pp-etape{flex:0 1 381px;display:flex;flex-direction:column;align-items:center;text-align:center} .pp-etape-num{width:70px;height:70px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;color:#fff;flex:none} .pp-etape h4{margin:34px 0 0;font-size:18px;font-weight:700;color:#3d3d3d;line-height:22px} .pp-etape p{margin:10px 0 0;max-width:272px;padding:0 8px;font-size:13.5px;line-height:21px;color:#3d3d3d} .pp-etape-arrow{width:0;position:relative;flex:none;align-self:center} .pp-etape-arrow svg{position:relative;left:-17px;top:19px} .pp-etapes-footnote{position:relative;margin:47px auto 0;max-width:1040px;padding:0 24px;text-align:center;font-size:13px;line-height:20px;color:#3d3d3d} @media (max-width:760px){ .pp-etapes-bg{display:none} .pp-etape-arrow{display:none} } /* ===== Assurances habitation/auto page (Assurances Newfin handoff) ===== */ .as-hero{position:relative;width:100%;padding:30px 0 60px;font-family:Arial,Helvetica,sans-serif;color:#3b3c40} .as-hero-banner{position:absolute;left:0;top:0;width:100%;height:280px;background:var(--hero-navy);clip-path:polygon(0 0,100% 0,100% 68%,0 100%)} .as-hero-photo{position:relative;margin:36px auto 0;width:min(1550px,calc(100% - 48px),88%);height:min(450px,42vw);border-radius:10px;overflow:hidden} .as-hero-photo img{width:100%;height:100%;object-fit:cover;display:block} @media (min-width:761px){ .as-hero-photo{height:auto;aspect-ratio:1549/448} } .as-hero-badge{position:absolute;left:clamp(12px,3vw,37px);bottom:clamp(10px,3vw,32px);display:inline-flex;flex-direction:column;align-items:flex-start;transform:rotate(-5deg);transform-origin:left bottom;z-index:2} .as-hero-badge-line{background:var(--mint);color:#fff;font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(16px,2vw,26px);line-height:1.15;white-space:nowrap;padding:.45em .7em;border-radius:16px} .as-hero-badge-line+.as-hero-badge-line{margin-top:-2px} .as-intro{width:min(1250px,calc(100% - 40px));margin:0 auto;padding:80px 0 0;display:flex;flex-direction:column;align-items:center;font-family:Arial,Helvetica,sans-serif;color:#3b3c40} .as-intro h1{margin:0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(28px,4vw,44px);line-height:1.1;text-align:center;color:#3b3c40} .as-intro-bar{width:60px;height:3px;background:var(--mint);margin-top:26px} .as-intro p{margin:36px 0 0;max-width:1210px;font-size:16px;line-height:1.4;text-align:center;color:#3b3c40} .as-intro h2{margin:50px 0 0;font-size:clamp(22px,3vw,30px);line-height:1.25;font-weight:400;text-align:center;color:#3b3c40} .as-intro h2 strong{font-weight:700} .as-intro-bar-sm{width:24px;height:3px;background:var(--mint);margin-top:20px} .as-items{width:min(1250px,calc(100% - 40px));margin:60px auto 0;display:flex;flex-direction:column;gap:56px} .as-item{display:flex;gap:40px;align-items:flex-start} .as-item-photo{width:280px;height:280px;flex:none;border-radius:14px;overflow:hidden} .as-item-photo img{width:100%;height:100%;object-fit:cover;display:block} .as-item-body{flex:1 1 320px;min-width:280px;display:flex;flex-direction:column;align-items:flex-start} .as-item-kicker{margin:0;font-family:'Figtree',sans-serif;font-weight:400;font-size:18px;line-height:1.3;color:var(--mint)} .as-item-kicker strong{font-weight:700} .as-item-kicker sup{font-weight:700;font-size:11px;line-height:0;vertical-align:8px} .as-item-bar{width:48px;height:3px;background:var(--mint);margin-top:24px} .as-item h4{margin:20px 0 0;font-size:20px;line-height:1.25;font-weight:700;color:#3b3c40} .as-item p{margin:16px 0 0;font-size:15px;line-height:1.4;color:#3b3c40} .as-item-cta{display:inline-flex;align-items:center;justify-content:center;padding:0 30px;height:50px;margin-top:28px;border-radius:25px;background:var(--mint);color:#fff;font-size:16px;font-weight:700;text-decoration:none} .as-item-cta:hover{background:var(--mint-hover);color:#fff} .as-others{width:min(1200px,calc(100% - 40px));margin:100px auto 0;padding-bottom:70px;display:flex;flex-direction:column;align-items:center;font-family:Arial,Helvetica,sans-serif;color:#3b3c40} .as-others h2{margin:0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(24px,3.4vw,32px);line-height:1.2;text-align:center;color:#3b3c40} .as-others-bar{width:24px;height:3px;background:var(--mint);margin-top:20px} .as-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:32px;margin-top:40px;width:100%} .as-card{width:min(360px,100%);flex:1 1 280px;max-width:360px;background:#fff;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;padding-bottom:24px;box-sizing:border-box} .as-card-photo{width:100%;height:150px;clip-path:polygon(0 0,100% 0,100% 90%,0 100%)} .as-card-photo img{width:100%;height:100%;object-fit:cover;display:block} .as-card h3{margin:18px 20px 0;font-family:'Quicksand',Arial,sans-serif;font-weight:900;font-size:20px;line-height:1.25;text-align:center;color:#3b3c40} .as-card p{margin:16px 20px 0;font-size:14px;line-height:1.4;color:#3b3c40} .as-card a{margin:20px 20px 0;font-size:14px;font-weight:700;color:var(--mint);text-decoration:underline;align-self:flex-start} @media (max-width:760px){ .as-item{flex-direction:column;align-items:center;text-align:center} .as-item-photo{width:min(280px,80vw);height:min(280px,80vw)} .as-item-body{align-items:center} .as-item-cta{margin-left:auto;margin-right:auto} } .as-help-btn{ position:fixed;right:60px;bottom:0;width:164px;height:60px;box-sizing:border-box;padding:0 0 10px; display:flex;align-items:center;justify-content:center;gap:9px;background:#00a9e0;border-radius:10px 10px 0 0; color:#232f3e;font-size:15px;font-weight:700;text-decoration:none;font-family:Arial,Helvetica,sans-serif; cursor:pointer;z-index:10; } .as-help-btn:hover{background:#0098cc;color:#232f3e} .as-help-btn-q{width:19px;height:19px;box-sizing:border-box;border:2px solid #232f3e;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;flex:none} @media (max-width:640px){ .as-help-btn{ right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;padding:0;gap:0; box-shadow:0 2px 10px rgba(0,0,0,.3); } .as-help-btn-label{display:none} .as-help-btn-q{width:22px;height:22px;font-size:14px} } /* ===== Article page (guide) ===== */ .article-hero{position:relative;max-width:1400px;margin:0 auto;padding:0 24px} .article-hero-media{width:100%;height:400px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 78%,0 100%)} .article-hero-media img{width:100%;height:100%;object-fit:cover;display:block} .article-toc-card{ position:absolute;right:48px;top:56px;width:380px;box-sizing:border-box; background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.16);padding:32px 36px; } .article-toc-title{font-family:'Figtree',sans-serif;font-weight:600;font-size:20px;color:var(--articles-green);margin:0 0 22px} .article-toc-list{position:relative;padding-left:28px;margin:0} .article-toc-list::before{content:'';position:absolute;left:8px;top:12px;bottom:6px;width:1px;background:#c9c9c9} .article-toc-list a{position:relative;display:block;font-size:15.5px;line-height:24px;color:#4a4a4a;margin-bottom:18px;text-decoration:none} .article-toc-list a:last-child{margin-bottom:0} .article-toc-list a::before{content:'';position:absolute;left:-28px;top:3px;width:15px;height:15px;border:2px solid var(--articles-green);border-radius:50%;background:#fff;box-sizing:border-box} .article-toc-list a:hover{color:var(--articles-green)} @media (max-width:900px){ .article-hero{padding:0} .article-hero-media{height:240px;clip-path:none} .article-toc-card{position:static;width:auto;margin:36px 20px 0;box-shadow:0 4px 20px rgba(0,0,0,.14)} } .article-body{max-width:1100px;margin:0 auto;padding:0 24px} .article-meta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:44px 0 0;font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;color:#333} .article-meta-item{display:flex;align-items:center;gap:10px} .article-meta-item svg{color:var(--articles-green);flex-shrink:0} .article-meta-item b{color:var(--articles-green);font-weight:800} .article-title{font-family:'Quicksand',sans-serif;font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.2;color:var(--articles-green);margin:24px 0 26px} .article-lede{font-size:17.5px;line-height:1.65;color:#555;margin:0 0 48px} .article-disclaimer{ border:1px solid #333;padding:20px;text-align:center;font-family:'Quicksand',sans-serif;font-weight:700; font-size:15px;line-height:1.6;letter-spacing:.3px;color:#333;text-transform:uppercase;margin-bottom:8px; } .article-disclaimer p{margin:0} .article-h2{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.2;color:#4a4a4a;margin:52px 0 0} .article-h2-rule{width:100px;height:4px;background:var(--articles-green);margin:28px 0 26px} .article-h3{font-size:19px;font-weight:700;line-height:1.4;color:#444;margin:0 0 22px} .article-section p{font-size:16.5px;line-height:1.65;color:#555;margin:0 0 30px} .article-section p:last-child{margin-bottom:0} .article-section p b{color:#444} .article-split{display:flex;gap:56px;align-items:flex-start;margin-top:8px} .article-split-media{flex:none;width:44%;border-radius:12px;overflow:hidden} .article-split-media img{width:100%;height:100%;object-fit:cover;display:block} .article-split-text{flex:1;min-width:0} .article-split.reverse{flex-direction:row-reverse} @media (max-width:900px){ .article-split{flex-direction:column;gap:24px} .article-split.reverse{flex-direction:column} .article-split-media{width:100%} } .article-full-media{width:100%;border-radius:12px;overflow:hidden;margin:28px 0 36px} .article-full-media img{width:100%;height:100%;object-fit:cover;display:block} .article-content{padding-bottom:70px} /* ===== Legal pages (design handoff, Montserrat/teal) ===== */ .legal-dc-section{background:#f5f5f5} .legal-dc-outer{display:none} .legal-dc-mobile{display:block} @media (min-width:901px){ .legal-dc-outer{ display:block;width:100%;overflow:hidden;background:#f5f5f5;position:relative; } .legal-dc-mobile{display:none} .legal-dc-inner{ width:1900px;transform-origin:top left;font-family:'Montserrat',sans-serif;background:#f5f5f5; padding:0 50px;box-sizing:border-box;color:#5c5c5c;letter-spacing:.2px; } .legal-dc-card{width:1800px;background:#fff} .legal-dc-hero{background:#e9f7fa;padding:84px 274px 85px} .legal-dc-hero-inner{width:1252px} .legal-dc-breadcrumb{display:flex;align-items:center;gap:14px;font-size:15px;line-height:20px} .legal-dc-crumb-home{color:#6d6d6d} .legal-dc-crumb-current{color:#2c2c2c;font-weight:700} .legal-dc-bar{width:75px;height:4px;background:#c9e8ef;margin:37px 0 20px} .legal-dc-h1{margin:0;font-size:40px;line-height:48px;font-weight:700;color:#2c2c2c;letter-spacing:-.3px;white-space:nowrap} .legal-dc-body{width:1252px;margin:0 auto;padding:39px 0 80px;font-size:16px;line-height:29px} .legal-dc-body p{margin:0 0 18px} .legal-dc-section-bar{width:75px;height:4px;background:#1b6b8c;margin:0 0 25px} .legal-dc-h2{margin:0 0 20px;font-size:26px;line-height:42px;font-weight:700;color:#2c2c2c;letter-spacing:.2px} .legal-dc-h3{margin:27px 0 43px;font-size:18px;line-height:28px;font-weight:700;color:#2c2c2c} .legal-dc-list{margin:0 0 18px;padding:0 0 0 17px;display:flex;flex-direction:column;gap:11px} .legal-dc-list li strong{color:#2c2c2c} .legal-dc-body a{color:#1eb6d3;text-decoration:underline} .legal-dc-share-row{display:flex;gap:10px;margin:0 0 29px} .legal-dc-share-row:last-of-type{margin-bottom:18px} .legal-dc-share-row .label{margin:0 0 19px;font-weight:700;color:#2c2c2c} .legal-dc-share-row p:last-child{margin:0} .legal-dc-table{ width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:15px;line-height:27px; text-align:center;border:1px solid #dcdcdc;border-radius:6px 6px 0 0;overflow:hidden; } .legal-dc-table th{ width:50%;background:#1a6a8c;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:1px; font-size:14px;padding:23px 20px;border-right:1px solid #dcdcdc; } .legal-dc-table th:last-child{border-right:none} .legal-dc-table td{padding:26px 30px;border-top:1px solid #dcdcdc;border-right:1px solid #dcdcdc} .legal-dc-table td:last-child{border-right:none} .legal-dc-table td:first-child{font-weight:700;color:#2c2c2c} .legal-dc-table svg{display:inline-block;vertical-align:-2px} .legal-dc-kicker{font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:#1b6b8c;margin:0 0 12px} .legal-dc-callout{background:#e9f7fa;border-left:4px solid #1b6b8c;border-radius:8px;padding:24px 28px;margin:0 0 25px} .legal-dc-callout p{margin:0 0 8px;font-size:15px;color:#5c5c5c} .legal-dc-callout p:last-child{margin-bottom:0} .legal-dc-callout .label{font-weight:700;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;color:#1b6b8c;margin:0 0 10px} .legal-dc-faq{margin:0 0 18px} .legal-dc-faq .faq-item{border-bottom:1px solid #dcdcdc;padding:20px 0} .legal-dc-faq .faq-item:last-child{border-bottom:none} .legal-dc-faq .faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:0;font-family:'Montserrat',sans-serif} .legal-dc-faq .faq-question .q{font-weight:700;font-size:17px;color:#2c2c2c;line-height:1.4} .legal-dc-faq .faq-question .symbol{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:#e9f7fa;color:#1b6b8c;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700} .legal-dc-faq .faq-answer{margin:14px 0 0;font-size:15px;color:#5c5c5c;line-height:1.7} .legal-dc-faq .faq-answer a{color:#1eb6d3;text-decoration:underline} .legal-dc-faq .faq-item[data-open="false"] .faq-answer{display:none} } /* Mobile: same colors/type, normal readable flow (no scale-to-fit canvas) */ .legal-dc-mobile{ background:#fff;font-family:'Montserrat',sans-serif;color:#5c5c5c;letter-spacing:.1px; } .legal-dc-mobile-hero{background:#e9f7fa;padding:32px 20px 30px} .legal-dc-mobile-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;flex-wrap:wrap} .legal-dc-mobile-bar{width:56px;height:4px;background:#c9e8ef;margin:20px 0 14px} .legal-dc-mobile-h1{margin:0;font-size:24px;line-height:31px;font-weight:700;color:#2c2c2c;letter-spacing:-.2px} .legal-dc-mobile-body{padding:26px 20px 56px;font-size:15px;line-height:25px} .legal-dc-mobile-body p{margin:0 0 16px} .legal-dc-mobile-section-bar{width:56px;height:4px;background:#1b6b8c;margin:40px 0 18px} .legal-dc-mobile-h2{margin:0 0 14px;font-size:20px;line-height:28px;font-weight:700;color:#2c2c2c} .legal-dc-mobile-h3{margin:22px 0 16px;font-size:16px;line-height:23px;font-weight:700;color:#2c2c2c} .legal-dc-mobile-list{margin:0 0 16px;padding:0 0 0 16px;display:flex;flex-direction:column;gap:10px} .legal-dc-mobile-list li strong{color:#2c2c2c} .legal-dc-mobile-body a{color:#1eb6d3;text-decoration:underline} .legal-dc-mobile-share-row{display:flex;gap:8px;margin:0 0 20px} .legal-dc-mobile-share-row .label{margin:0 0 12px;font-weight:700;color:#2c2c2c} .legal-dc-mobile-share-row p:last-child{margin:0} .legal-dc-mobile-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 8px} .legal-dc-mobile-table{ width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:13px;line-height:21px; text-align:left;border:1px solid #dcdcdc;border-radius:6px 6px 0 0;overflow:hidden; } .legal-dc-mobile-table th{ background:#1a6a8c;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.6px; font-size:11.5px;padding:14px 16px;border-right:1px solid #dcdcdc;text-align:left; } .legal-dc-mobile-table th:last-child{border-right:none} .legal-dc-mobile-table td{padding:16px;border-top:1px solid #dcdcdc;border-right:1px solid #dcdcdc;vertical-align:top} .legal-dc-mobile-table td:last-child{border-right:none} .legal-dc-mobile-table td:first-child{font-weight:700;color:#2c2c2c;white-space:nowrap} .legal-dc-mobile-table svg{display:inline-block;vertical-align:-2px} .legal-dc-mobile-kicker{font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:#1b6b8c;margin:0 0 10px} .legal-dc-mobile-callout{background:#e9f7fa;border-left:4px solid #1b6b8c;border-radius:8px;padding:18px;margin:0 0 18px} .legal-dc-mobile-callout p{margin:0 0 8px;font-size:14px;color:#5c5c5c} .legal-dc-mobile-callout p:last-child{margin-bottom:0} .legal-dc-mobile-callout .label{font-weight:700;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:#1b6b8c;margin:0 0 8px} .legal-dc-mobile-faq{margin:0 0 12px} .legal-dc-mobile-faq .faq-item{border-bottom:1px solid #dcdcdc;padding:16px 0} .legal-dc-mobile-faq .faq-item:last-child{border-bottom:none} .legal-dc-mobile-faq .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:none;text-align:left;cursor:pointer;padding:0;font-family:'Montserrat',sans-serif} .legal-dc-mobile-faq .faq-question .q{font-weight:700;font-size:15px;color:#2c2c2c;line-height:1.4} .legal-dc-mobile-faq .faq-question .symbol{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#e9f7fa;color:#1b6b8c;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700} .legal-dc-mobile-faq .faq-answer{margin:12px 0 0;font-size:14px;color:#5c5c5c;line-height:1.65} .legal-dc-mobile-faq .faq-answer a{color:#1eb6d3;text-decoration:underline} /* ===== Contact page (Nunito/navy design handoff) ===== Explicit exception to the sitewide Quicksand+Figtree/navy-cyan rules, same pattern as the legal-dc-* pages above (own Montserrat/teal handoff): contact.html reproduces its own Claude Design handoff (Nunito + Nunito Sans, navy #004660/#0a4d68, teal #1eb5d0, green #6bb92a) verbatim, per explicit user request, rather than adapting to the rest of the site. */ .contact-dc-wrap{font-family:'Nunito Sans',sans-serif;color:#0a4d68;background:#f5f6f8;padding:32px clamp(16px,3vw,40px) 0} .contact-dc-card{background:#fff;border-radius:16px;max-width:1800px;margin:0 auto;overflow:hidden} .contact-dc-hero{display:grid;grid-template-columns:58% 42%} .contact-dc-hero-text{background:#004660;display:flex;flex-direction:column;justify-content:center;padding:56px clamp(24px,4vw,60px) 56px clamp(24px,6vw,120px)} .contact-dc-breadcrumb{display:flex;align-items:center;gap:14px;font-size:15px;line-height:24px;color:#fff} .contact-dc-breadcrumb a{font-weight:400;color:#fff} .contact-dc-breadcrumb strong{font-family:'Nunito',sans-serif;font-weight:800} .contact-dc-hero-text h1{margin:22px 0 0;font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1.18;color:#fff;max-width:560px} .contact-dc-hero-text p{margin:16px 0 0;font-size:18px;line-height:1.5;color:#fff} .contact-dc-hero-photo{background-size:cover;background-position:center;min-height:220px} .contact-dc-hero-photo img{width:100%;height:100%;object-fit:cover;display:block} .contact-dc-section{padding:56px clamp(20px,4vw,48px) 90px;text-align:center} .contact-dc-section h2{margin:0;font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(21px,2.6vw,28px);line-height:1.3;color:#0a4d68} .contact-dc-section p{margin:20px auto 0;font-size:17px;line-height:1.5;color:#0a4d68;max-width:640px} .contact-dc-section p strong{font-family:'Nunito',sans-serif;font-weight:800} .contact-dc-phone-box{display:inline-flex;align-items:center;gap:14px;margin-top:24px;border:1px solid #d6d6d6;height:60px;max-width:100%;box-sizing:border-box;padding:0 22px} .contact-dc-phone-icon{color:#6bb92a;flex-shrink:0} .contact-dc-phone-num{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(16px,2.4vw,22px);color:#6bb92a;white-space:nowrap;text-decoration:none} .contact-dc-phone-num:hover{text-decoration:underline} .contact-dc-days{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px} .contact-dc-day{font-family:'Nunito Sans',sans-serif;font-weight:600;font-size:14px;line-height:20px;height:40px;padding:0 16px;border-radius:10px;border:1px solid #777;background:#fff;color:#666;cursor:pointer} .contact-dc-day[aria-pressed="true"]{background:#cdeef5;border-color:#4fc3dd;color:#0a4d68} .contact-dc-chart{display:flex;justify-content:center;margin-top:44px} .contact-dc-chart-inner{display:grid;grid-template-columns:80px minmax(0,640px);max-width:100%;text-align:left} .contact-dc-chart-labels{position:relative;height:125px} .contact-dc-chart-labels span{position:absolute;left:0;height:33.33%;display:flex;align-items:center;font-size:15px;color:#0a4d68} .contact-dc-chart-labels span:nth-child(1){top:0} .contact-dc-chart-labels span:nth-child(2){top:33.33%} .contact-dc-chart-labels span:nth-child(3){top:66.66%} .contact-dc-chart-bars-wrap{position:relative;height:125px;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;box-sizing:border-box;background:linear-gradient(#e4e4e4,#e4e4e4) 0 41.5%/100% 1px no-repeat,linear-gradient(#e4e4e4,#e4e4e4) 0 83%/100% 1px no-repeat} .contact-dc-chart-bars{position:absolute;left:16px;right:16px;bottom:0;top:0;display:flex;justify-content:space-between;align-items:flex-end;gap:4px} .contact-dc-chart-bar{flex:1;max-width:20px;border-radius:8px 8px 0 0;transition:height .2s ease,background-color .2s ease} .contact-dc-chart-hours{display:flex;justify-content:space-between;padding:0 16px;margin-top:8px} .contact-dc-chart-hours span{flex:1;text-align:center;font-size:13px;color:#0a4d68} .contact-dc-cards{display:grid;grid-template-columns:repeat(3,1fr);max-width:1260px;margin:80px auto 0} .contact-dc-cards-item{display:flex;flex-direction:column;align-items:center;padding:0 24px;border-left:1px solid #c9c9c9} .contact-dc-cards-item:first-child{border-left:none} .contact-dc-cards-item svg{display:block} .contact-dc-cards-item p{margin:20px 0 0;font-size:15px;line-height:1.6;color:#5a5a5a} .contact-dc-card-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:24px;height:52px;padding:0 32px;border-radius:26px;background:#0a5c7a;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;text-transform:uppercase} .contact-dc-card-cta:hover{background:#084a63} .contact-dc-write{max-width:720px;margin:0 auto;padding:48px clamp(20px,4vw,48px) 60px} .contact-dc-write h2{font-family:'Nunito',sans-serif;font-weight:800;font-size:24px;color:#0a4d68;text-align:center;margin:0 0 24px} @media (max-width:900px){ .contact-dc-hero{grid-template-columns:1fr} .contact-dc-hero-photo{order:-1} .contact-dc-hero-text{padding:32px 24px} .contact-dc-cards-item{border-left:none;border-top:1px solid #c9c9c9;padding:32px 16px 0} .contact-dc-cards-item:first-child{border-top:none;padding-top:0} .contact-dc-cards{grid-template-columns:1fr;margin-top:56px;gap:0} .contact-dc-chart-inner{grid-template-columns:52px minmax(0,1fr)} /* 12 hour labels (8h-19h) under the chart have zero flex gap by default (see .contact-dc-chart-hours below) — at mobile chart widths each cell shrinks below its text's width and adjacent labels visually fuse together ("8h9h10h..."). Smaller text + an explicit gap keeps them legibly separated without dropping any label. */ .contact-dc-chart-hours{gap:3px;padding:0 8px} .contact-dc-chart-hours span{font-size:10px} } .legal-dc-mobile-faq .faq-item[data-open="false"] .faq-answer{display:none}