/* ============ SoFast fonts.css — self-hosted webfonts ============ CLIENT DIRECTIVE 2026-08-26: police unique Archivo Variable (SIL OFL, Omnibus-Type via Google Fonts; self-hosting permitted). One roman + one italic file carry the whole system through the real variable axes: wght 100-900, wdth 62%-125%. The three cuts are axis positions, never synthetic: titres = wdth 118 / wght 700 (Expanded) textes = wdth 100 / wght 400-500 nav/UI = wdth 76 / wght 600 (Narrow, uppercase letterspaced) Latin subset; the footer's Arabic/Thai language pills intentionally fall through to the system stack (Archivo has no Arabic/Thai, same as before). woff2 only; font-display:swap. URLs relative to /css/ so they resolve from both the root and /fr/ trees. */ @font-face{ font-family:'Archivo'; src:url('../assets/fonts/archivo-var.woff2') format('woff2-variations'); font-weight:100 900;font-stretch:62% 125%; font-style:normal;font-display:swap} @font-face{ font-family:'Archivo'; src:url('../assets/fonts/archivo-italic-var.woff2') format('woff2-variations'); font-weight:100 900;font-stretch:62% 125%; font-style:italic;font-display:swap} /* ============ SoFast base.css — reset + primitives ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{min-height:100vh;line-height:1.6;font-family:var(--font-body);color:var(--ink);background:var(--bg)} img,picture,svg,video{display:block;max-width:100%} img{height:auto} input,button,textarea,select{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} ul,ol{list-style:none} h1,h2,h3,h4,h5,h6{line-height:1.04;font-weight:600;letter-spacing:-.02em} :focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:3px} .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} .skip-link{position:absolute;inset-inline-start:-999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0} .skip-link:focus{inset-inline-start:0} ::selection{background:var(--orange);color:#fff} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} /* ================================================================= SoFast.tv — Design System Palette: OFFICIAL "SoFast Website — Color Guidelines V1" (client doc, supersedes the cahier des charges §8 palette — newer always wins). Orange SoFast #FD3300 = brand + primary action · Graphite #17191B · Light Grey #F4F5F5 · Gris SoFast #6E7376 · Electric Blue #287CFF is a functional accent for technology / data / secondary UI states only. WAYO blue #6798E3 restricted to .theme-wayo scope Fonts: Cabinet Grotesk (display) + Switzer (body) ================================================================= */ :root{ /* color */ --orange:#FD3300; --orange-600:#D62B00; --orange-700:#B02400; --orange-tint:#FFF2EF; --orange-ink:var(--orange-600); --blue:#287CFF; --blue-600:#1766D8; --blue-soft:#EAF2FF; --ink:#1A1A1A; --ink-soft:#404142; --grey:#6E7376; --grey-line:#e6e6e6; --grey-bg:#F4F5F5; --grey-bg2:#fafafa; --white:#ffffff; --bg:#ffffff; --wayo:#6798E3; --wayo-deep:#3f6fc0; /* type */ /* Police unique (client 2026-08-26): Archivo Variable. Widths are REAL axis positions (font-stretch on the wdth axis), never synthetic. */ --font-display:'Archivo','Helvetica Neue',sans-serif; --font-body:'Archivo','Helvetica Neue',sans-serif; --w-title:118%; /* Titres: Expanded 118, 700 */ --w-text:100%; /* Textes: 100, 400/500 */ --w-ui:76%; /* Nav, boutons, données: Narrow 76, 600, caps interlettrées */ --text-xs:.78rem; --text-sm:.9rem; --text-base:1.05rem; --text-lg:clamp(1.15rem,1.4vw,1.3rem); --text-xl:clamp(1.5rem,2.4vw,2rem); --text-2xl:clamp(2rem,4vw,3rem); --text-3xl:clamp(2.6rem,6vw,4.6rem); --text-hero:clamp(2.7rem,6.4vw,5.6rem); /* spacing */ --sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2rem;--sp-5:3rem; --sp-6:4rem;--sp-7:6rem;--sp-8:8rem;--sp-9:11rem; --gutter:clamp(1.25rem,4vw,5rem); --maxw:min(1680px,94vw); /* full-width system: scales with the screen, no fixed 1320px cap */ --radius:18px;--radius-sm:12px;--radius-lg:28px; /* effects */ --shadow-sm:0 2px 8px rgba(26,26,26,.06); --shadow-md:0 12px 40px rgba(26,26,26,.10); --shadow-lg:0 30px 80px rgba(26,26,26,.16); --shadow-orange:0 16px 44px rgba(253,51,0,.26); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-inout:cubic-bezier(.4,0,.2,1); --ti:180ms cubic-bezier(.16,1,.3,1); } /* ---------- Layout primitives ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(4rem,9vw,8rem)} .section-sm{padding-block:clamp(3rem,6vw,5rem)} .dark{background:var(--ink);color:#fff} .dark .muted{color:rgba(255,255,255,.62)} .soft{background:var(--grey-bg)} .soft2{background:var(--grey-bg2)} .muted{color:var(--grey)} .center{text-align:center} .mx-auto{margin-inline:auto} .maxch{max-width:62ch} .maxch.center{margin-inline:auto} /* ---------- Type utilities ---------- */ .display{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.01} .eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink);display:inline-flex;align-items:center;gap:.6rem} .eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block} .eyebrow.no-line::before{display:none} .dark .eyebrow{color:var(--orange-ink)} h1.display{font-size:var(--text-hero)} .h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.025em;line-height:1.05} .h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;letter-spacing:-.02em} .lead{font-size:var(--text-lg);color:var(--ink-soft);line-height:1.55} .dark .lead{color:rgba(255,255,255,.75)} .o{color:var(--orange-ink)} .tabnum{font-variant-numeric:tabular-nums} /* Typographic no-break (compounds + FR one-letter joins), injected at build. display:contents is load-bearing: without it the span becomes its own flex item inside flex rows (FAQ buttons, arrow links), splitting the label into multiple non-wrapping items and blowing the row width. As a boxless span its text merges back into one anonymous item while still inheriting the nowrap. */ .nbh{display:contents;white-space:nowrap} /* Under 400px a long unbreakable run can force a flex row (e.g. FAQ question + icon) past the viewport; release the rule there as a last resort - the 390/360/320 zero-overflow canon outranks it. From 400px up (tablets, laptops, desktop - where Yanai QAs) the rule is absolute. */ @media (max-width:399.98px){.nbh{white-space:inherit}} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);letter-spacing:-.005em; padding:.95rem 1.6rem;border-radius:100px;line-height:1;cursor:pointer; transition:background var(--ti),color var(--ti),box-shadow var(--ti),transform var(--ti),border-color var(--ti); white-space:nowrap} .btn svg{width:16px;height:16px} /* CLIENT DECISION 2026-08-24 (Kevin: "for the CTA use what he said"): the Color Guidelines are applied literally — CTA default #FD3300, hover #D62B00. Known tradeoff, accepted by the client: white on #FD3300 is 3.72:1, below the 4.5:1 AA threshold for the 14.4px/600 label. Do not "fix" this without a new client decision. #D62B00 remains the accessible orange for text. */ .btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-orange)} .btn-primary:hover{background:var(--orange-600);transform:translateY(-2px);box-shadow:0 20px 52px rgba(214,43,0,.34)} .btn-primary:active{transform:translateY(0)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--grey-line)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)} .dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)} .dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)} .btn-white{background:#fff;color:var(--ink)} .btn-white:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-lg{padding:1.15rem 2rem;font-size:var(--text-base)} .arrow-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);transition:gap var(--ti),color var(--ti)} .arrow-link svg{width:18px;height:18px;transition:transform var(--ti)} .arrow-link:hover{color:var(--blue-600);gap:.75rem} .arrow-link:hover svg{transform:translateX(3px)} .dark .arrow-link{color:#fff}.dark .arrow-link:hover{color:var(--blue)} /* ---------- Magnetic wrapper ---------- */ .magnetic{display:inline-block} /* ================================================================= HEADER ================================================================= */ .site-header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background var(--ti),box-shadow var(--ti),backdrop-filter var(--ti);padding-block:1.05rem} .site-header.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(16px);box-shadow:0 1px 0 var(--grey-line),0 10px 30px rgba(26,26,26,.05)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem} .brand{display:flex;align-items:center;flex-shrink:0} .brand img{height:30px;width:auto} .nav-links{display:flex;align-items:center;gap:.1rem} .nav-links a,.nav-links button.navitem{font-family:var(--font-display);font-size:.92rem;font-weight:600;letter-spacing:-.005em;color:var(--ink);padding:.5rem .5rem;border-radius:8px;transition:color var(--ti),background var(--ti);display:inline-flex;align-items:center;gap:.2rem;position:relative;white-space:nowrap} .nav-links a:hover,.nav-links button.navitem:hover{color:var(--orange-ink);background:var(--orange-tint)} .nav-links a.active{color:var(--orange-ink)} .nav-cta{display:flex;align-items:center;gap:.6rem;flex-shrink:0} .chev{width:12px;height:12px;transition:transform var(--ti)} .has-mega{position:relative} .has-mega.open .chev{transform:rotate(180deg)} .mega{position:absolute;top:calc(100% + 14px);left:0;transform:translateY(8px);background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.5rem;width:min(780px,92vw); display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1.5rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--ti),transform var(--ti),visibility var(--ti)} .has-mega.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mega.mega-audience{grid-template-columns:1fr;width:min(440px,92vw)} .mega-col-title{grid-column:1/-1;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700;margin:.3rem 0 .5rem} .mega a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.2rem;padding:.7rem .85rem;border-radius:12px;border:1px solid transparent;transition:background var(--ti),border-color var(--ti);white-space:normal;min-width:0} .mega a:hover{background:var(--grey-bg);border-color:var(--grey-line)} .mega a strong{display:block;width:100%;font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:-.005em;color:var(--ink)} .mega a span{display:block;width:100%;font-size:.82rem;color:var(--grey);line-height:1.4;white-space:normal;overflow-wrap:break-word} .burger{display:none;flex-direction:column;gap:5px;padding:.5rem;width:44px;height:44px;justify-content:center;align-items:center} .burger span{width:24px;height:2px;background:var(--ink);transition:transform var(--ti),opacity var(--ti)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-panel{position:fixed;inset:0;z-index:99;background:#fff;padding:6rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .4s var(--ease-out);visibility:hidden} .mobile-panel.open{transform:translateX(0);visibility:visible} .mobile-panel a{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:600;padding:.7rem 0;border-bottom:1px solid var(--grey-line)} .mobile-panel .mob-cta{margin-top:1.5rem;display:flex;flex-direction:column;gap:.8rem} .mobile-panel .mob-cta .btn{display:inline-flex;align-items:center;justify-content:center;border:none;width:100%;max-width:24rem;padding:.95rem 1.6rem;font-size:1.02rem;line-height:1.2} @media(max-width:1200px){ .nav-links{display:none} .nav-cta .btn:not(.burger-btn){display:none} .burger{display:flex} /* the header language picker is the only language switch on mobile; its 44px tap targets live in the "mobile tap targets" block near the end of this file, AFTER the .lang-pick/.lp base rules, so they actually win. */ } @media(min-width:1201px) and (max-width:1560px){ .nav-links a,.nav-links button.navitem{font-size:.82rem;padding:.5rem .32rem;letter-spacing:-.01em} .nav-cta{gap:.45rem} .nav-cta .btn{padding:.6rem .9rem;font-size:.82rem} .nav-cta .btn-ghost{display:none} .brand img{height:26px} } /* ================================================================= HERO ================================================================= */ .hero{position:relative;padding-top:clamp(8rem,13vh,10rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden} .hero-bg-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-1} .orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(253,51,0,.22),transparent 70%);top:-140px;right:-120px} .orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(253,51,0,.10),transparent 70%);bottom:-100px;left:-80px} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center} .hero-tag{margin-bottom:1.4rem} .hero h1{margin-bottom:1.5rem;max-width:16ch} .hero-sub{font-size:var(--text-lg);color:var(--ink-soft);max-width:44ch;margin-bottom:2.2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center} .hero-visual{position:relative} .hero-signature{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-top:2.5rem;display:flex;align-items:center;gap:.7rem} .hero-signature::before{content:"";width:34px;height:1.5px;background:var(--ink)} @media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-visual{order:-1}} .floating-badge{position:absolute;background:#fff;border-radius:14px;box-shadow:var(--shadow-md);padding:.85rem 1.1rem;display:flex;align-items:center;gap:.7rem;font-weight:600;font-size:.9rem;z-index:3} .floating-badge .fb-num{font-family:var(--font-display);font-size:1.3rem;color:var(--orange-ink);font-weight:600} .floating-badge .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--orange-tint)} /* ================================================================= HOME HERO — broadcast multiviewer (LIGHT MODE) TV-industry language on a white base (cahier des charges = light only): a "multiviewer" wall of live monitors beside the headline, a status rail with tally light + running timecode, one tile cycling ON AIR. Palette-strict: white base, ink type, orange = on-air signal. No blue. ================================================================= */ .hero-live{position:relative;overflow:hidden;background:var(--white); padding-top:clamp(5.5rem,7.5vh,7rem);padding-bottom:clamp(2.5rem,5vh,4rem)} .hl-glow{position:absolute;top:-16%;right:-8%;width:min(720px,58vw);height:min(720px,58vw);z-index:0;pointer-events:none; background:radial-gradient(circle,rgba(253,51,0,.07),transparent 66%)} .hero-live-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,4.5rem);align-items:start} @media(max-width:960px){.hero-live-in{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}} /* broadcast status rail (light) */ .bcast-rail{display:flex;align-items:center;gap:clamp(.55rem,1.1vw,.9rem);flex-wrap:wrap; margin-bottom:clamp(1.2rem,2.4vw,1.8rem);font-size:clamp(.6rem,.82vw,.72rem);letter-spacing:.14em; text-transform:uppercase;font-weight:700;color:var(--grey)} .oa-tally{display:inline-flex;align-items:center;gap:.4rem;background:var(--orange-600);color:#fff;padding:.32rem .6rem;border-radius:5px} .oa-dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:tally 1.9s var(--ease-out) infinite} @keyframes tally{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 6px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} .bcast-rail .oa-sep{width:1px;height:11px;background:var(--grey-line)} .bcast-rail .oa-item{white-space:nowrap} .bcast-rail .oa-item b{color:var(--ink)} .bcast-rail .oa-plus{color:var(--orange-ink)} /* copy */ .hl-copy .eyebrow{margin-bottom:.9rem} .hero-xl{font-size:clamp(2.1rem,3.4vw,3.35rem);line-height:1.04;letter-spacing:-.03em;color:var(--ink);max-width:18ch;margin-bottom:.8rem} .hl-viewer{margin-top:clamp(.3rem,1vw,1rem)} .hero-kicker{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;color:var(--ink); font-size:clamp(1rem,1.6vw,1.3rem);margin-bottom:.9rem} .hero-ledes{display:grid;grid-template-columns:1fr;gap:clamp(.6rem,1.4vw,1.4rem);max-width:46rem;margin-top:clamp(1.5rem,2.6vw,2.1rem);padding-top:clamp(1.3rem,2.2vw,1.8rem);border-top:1px solid var(--grey-line)} @media(min-width:640px){.hero-ledes{grid-template-columns:1fr 1fr}} .hero-lede{color:var(--ink-soft);max-width:44ch;line-height:1.6;margin:0;font-size:.95rem} .hero-lede.dim{color:var(--grey)} .hero-live .hero-actions{margin-top:1.5rem} /* multiviewer */ .hl-viewer{position:relative;background:var(--grey-bg2);border:1px solid var(--grey-line);border-radius:var(--radius-lg); padding:clamp(.7rem,1.4vw,1.1rem);box-shadow:var(--shadow-lg)} .mv-head{display:flex;align-items:center;justify-content:space-between;padding:.15rem .35rem .75rem} .mv-title{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.01em;color:var(--ink)} .mv-status{display:inline-flex;align-items:center;gap:.42rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .mv-sd{width:6px;height:6px;border-radius:50%;background:var(--orange);animation:tally 1.9s var(--ease-out) infinite} .mv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,.8vw,.6rem)} .mv-cell{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#e7e7e7; border:1px solid var(--grey-line);box-shadow:var(--shadow-sm)} .mv-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease-out)} .mv-cell .mv-n{position:absolute;top:4px;left:6px;font-family:var(--font-display);font-weight:600;font-size:.6rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65)} .mv-cell .mv-live{position:absolute;bottom:4px;right:5px;display:inline-flex;align-items:center;gap:.2rem;background:var(--orange-600);color:#fff;font-size:.46rem;font-weight:700;letter-spacing:.06em;padding:.1rem .3rem;border-radius:3px} .mv-cell .mv-live .mv-ld{width:3.5px;height:3.5px;border-radius:50%;background:#fff} .mv-cell .mv-air{position:absolute;top:5px;right:5px;background:var(--orange-600);color:#fff;font-size:.5rem;font-weight:700;letter-spacing:.1em;padding:.12rem .34rem;border-radius:3px;opacity:0;transform:translateY(-3px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)} .mv-cell.on{border-color:var(--orange);box-shadow:0 0 0 2px var(--orange),0 14px 30px rgba(253,51,0,.22);z-index:2} .mv-cell.on .mv-air{opacity:1;transform:none} .mv-cell.on .mv-live{display:none} .mv-cell.on img{transform:scale(1.06)} /* orchestrated light-hero reveal */ .hl-copy > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .hero-live.on .hl-copy > *{opacity:1;transform:none} .hero-live.on .hl-copy > *:nth-child(1){transition-delay:.05s} .hero-live.on .hl-copy > *:nth-child(2){transition-delay:.16s} .hero-live.on .hl-copy > *:nth-child(3){transition-delay:.26s} .hero-live.on .hl-copy > *:nth-child(4){transition-delay:.36s} .hero-live.on .hl-copy > *:nth-child(5){transition-delay:.46s} .hero-live.on .hl-copy > *:nth-child(6){transition-delay:.56s} .hl-viewer{opacity:0;transform:translateY(26px) scale(.99);transition:opacity 1s var(--ease-out) .2s,transform 1s var(--ease-out) .2s} .hero-live.on .hl-viewer{opacity:1;transform:none} .mv-cell{opacity:0;transform:scale(.9)} .hero-live.on .mv-cell{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)} .hero-live.on .mv-cell:nth-child(1){transition-delay:.32s} .hero-live.on .mv-cell:nth-child(2){transition-delay:.38s} .hero-live.on .mv-cell:nth-child(3){transition-delay:.44s} .hero-live.on .mv-cell:nth-child(4){transition-delay:.50s} .hero-live.on .mv-cell:nth-child(5){transition-delay:.56s} .hero-live.on .mv-cell:nth-child(6){transition-delay:.62s} .hero-live.on .mv-cell:nth-child(7){transition-delay:.68s} .hero-live.on .mv-cell:nth-child(8){transition-delay:.74s} .hero-live.on .mv-cell:nth-child(9){transition-delay:.80s} @media(max-width:960px){ .hero-xl{max-width:100%} } @media(prefers-reduced-motion:reduce){ .hl-copy > *,.hl-viewer,.mv-cell{opacity:1!important;transform:none!important;transition:none!important} .oa-dot,.mv-sd,.mv-cell img{animation:none!important} } /* ================================================================= STAT COUNTERS ================================================================= */ .stats-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)} .stats-strip.stats-strip-3{grid-template-columns:repeat(3,1fr)} /* 7 figures since the official client list of 2026-08-21: one row on wide screens, with the numbers stepped down so "250 000+" still fits a cell */ .stats-strip.stats-strip-7{grid-template-columns:repeat(7,1fr)} .stats-strip-7 .stat{padding-left:.5rem;padding-right:.5rem} .stats-strip-7 .stat .num{font-size:clamp(1.4rem,2.05vw,1.95rem)} .stats-strip-7 .stat .lbl{font-size:.76rem} .dark .stats-strip{border-color:rgba(255,255,255,.14)} .stat{padding:clamp(1.5rem,2.6vw,2.4rem) .8rem;text-align:center;border-right:1px solid var(--grey-line)} .dark .stat{border-color:rgba(255,255,255,.14)} .stat:last-child{border-right:none} .stat .num{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.7rem);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.03em} .dark .stat .num{color:#fff} .stat .num .plus{color:var(--orange)} .stat .lbl{margin-top:.7rem;font-size:.82rem;color:var(--grey);font-weight:500;line-height:1.35} /* 6 stats -> 3x2 on medium screens, 2x3 on mobile */ @media(max-width:1080px){.stats-strip{grid-template-columns:repeat(3,1fr)}.stat{border-bottom:1px solid var(--grey-line)}.stat:nth-child(3n){border-right:none}.stat:nth-child(n+4){border-bottom:none}} @media(max-width:1080px){.stats-strip.stats-strip-7{grid-template-columns:repeat(4,1fr)} .stats-strip-7 .stat{border-right:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)} .stats-strip-7 .stat:nth-child(4n),.stats-strip-7 .stat:last-child{border-right:none} .stats-strip-7 .stat:nth-child(n+5){border-bottom:none}} .dark .stats-strip .stat{border-color:rgba(255,255,255,.14)} @media(max-width:640px){.stats-strip{grid-template-columns:repeat(2,1fr)}.stat{border-right:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)}.stat:nth-child(2n){border-right:none}.stat:nth-child(n+5){border-bottom:none}} @media(max-width:640px){.stats-strip.stats-strip-7{grid-template-columns:repeat(2,1fr)} .stats-strip-7 .stat{border-right:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line)} .stats-strip-7 .stat:nth-child(2n),.stats-strip-7 .stat:last-child{border-right:none} .stats-strip-7 .stat:nth-child(n+7){border-bottom:none}} /* ================================================================= SECTION HEADER ================================================================= */ .sec-head{max-width:none} .sec-head h2{max-width:26ch} .sec-head p{max-width:60ch} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center h2,.sec-head.center p{margin-inline:auto} .sec-head .eyebrow{margin-bottom:1.1rem} .sec-head h2{margin-bottom:1.1rem} .sec-head p{color:var(--grey);font-size:var(--text-lg)} .sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem)} /* ================================================================= CARDS ================================================================= */ .card{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);padding:clamp(1.6rem,2.5vw,2.2rem);transition:transform var(--ti),box-shadow var(--ti),border-color var(--ti);position:relative;overflow:hidden;height:100%} a.card,.card[href]{cursor:pointer} a.card:hover,.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent} .card .card-ico{width:52px;height:52px;border-radius:14px;background:var(--orange-tint);display:grid;place-items:center;margin-bottom:1.3rem;color:var(--orange)} .card .card-ico svg{width:26px;height:26px} .card h3{font-size:var(--text-lg);margin-bottom:.6rem;font-family:var(--font-display);font-weight:600} .card p{color:var(--grey);font-size:.98rem;line-height:1.55} .card-num{position:absolute;top:1.3rem;right:1.5rem;font-family:var(--font-display);font-size:1rem;color:var(--grey-line);font-weight:600} .grid{display:grid;gap:1.3rem} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}} /* audience cards big */ .aud-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,2.6rem);transition:transform var(--ti),box-shadow var(--ti);height:100%} .aud-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .aud-card .num-tag{font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--orange-ink);letter-spacing:.1em} .aud-card h3{font-family:var(--font-display);font-size:var(--text-xl);margin:.8rem 0 .8rem} .aud-card p{color:var(--grey);margin-bottom:1.5rem;flex:1} /* ================================================================= VALUE CHAIN SCROLLYTELLING ================================================================= */ .vc-wrap{position:relative} .vc-sticky{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding-block:clamp(4rem,10vh,7rem)} .vc-visual{position:relative;height:min(60vh,520px);display:grid;place-items:center} .vc-node{position:absolute;text-align:center;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);opacity:.28} .vc-node .vc-ring{width:clamp(120px,16vw,180px);height:clamp(120px,16vw,180px);border-radius:50%;display:grid;place-items:center;margin-inline:auto;border:2px solid var(--grey-line);background:#fff;transition:all .5s var(--ease-out)} .vc-node .vc-ring svg{width:44px;height:44px;color:var(--ink)} .vc-node .vc-lab{margin-top:1rem;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)} .vc-node.left{left:0;top:50%;transform:translateY(-50%) scale(.9)} .vc-node.center{left:50%;top:50%;transform:translate(-50%,-50%) scale(.9)} .vc-node.right{right:0;top:50%;transform:translateY(-50%) scale(.9)} .vc-node.on{opacity:1} .vc-node.on.left,.vc-node.on.right{transform:translateY(-50%) scale(1)} .vc-node.on.center{transform:translate(-50%,-50%) scale(1.06)} .vc-node.on .vc-ring{border-color:var(--orange);box-shadow:var(--shadow-orange)} .vc-node.on .vc-ring svg{color:var(--orange)} .vc-node.center.on .vc-ring{background:var(--orange)} .vc-node.center.on .vc-ring svg{color:#fff} .vc-line{position:absolute;top:50%;height:2px;background:var(--grey-line);z-index:-1;overflow:hidden} .vc-line::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)} .vc-line.fill::after{transform:scaleX(1)} .vc-steps{display:flex;flex-direction:column;gap:1rem} .vc-step{padding:1.5rem 1.6rem;border-radius:var(--radius);border:1px solid var(--grey-line);background:#fff;transition:border-color .4s,box-shadow .4s,transform .4s;opacity:.55} .vc-step.on{opacity:1;border-color:var(--orange);box-shadow:var(--shadow-md)} .vc-step .step-n{font-family:var(--font-display);color:var(--orange-ink);font-weight:600;font-size:.85rem;letter-spacing:.1em} .vc-step h3{font-family:var(--font-display);font-size:var(--text-lg);margin:.4rem 0 .5rem} .vc-step p{color:var(--grey);font-size:.96rem} @media(max-width:900px){.vc-sticky{grid-template-columns:1fr;position:relative;top:auto;min-height:auto;gap:2rem}.vc-visual{display:none}} /* ================================================================= MARQUEE ================================================================= */ .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:3.5rem;width:max-content;animation:marq 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-item{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ink);opacity:.32;white-space:nowrap;display:flex;align-items:center;gap:.6rem;transition:opacity var(--ti)} .marquee-item:hover{opacity:1} .marquee-item .mdot{width:8px;height:8px;border-radius:50%;background:var(--orange)} @keyframes marq{to{transform:translateX(-50%)}} /* ================================================================= FEATURE / SPLIT ================================================================= */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .split.rev .split-media{order:2} @media(max-width:840px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}} .split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);position:relative} .split-media img{width:100%;display:block} .media-frame{background:var(--ink);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,3rem);position:relative;overflow:hidden} /* checklist */ .checks{display:flex;flex-direction:column;gap:.9rem;margin-top:1.6rem} .checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem;line-height:1.5} .checks li .ck{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;margin-top:1px} .checks li .ck svg{width:14px;height:14px} .dark .checks li .ck{background:rgba(253,51,0,.20)} /* pills */ .pill-row{display:flex;flex-wrap:wrap;gap:.6rem} .pill{border:1px solid var(--grey-line);border-radius:100px;padding:.5rem 1rem;font-size:.86rem;font-weight:500;color:var(--ink-soft);background:#fff;transition:border-color var(--ti),color var(--ti)} .pill:hover{border-color:var(--orange);color:var(--orange-ink)} .dark .pill{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8);background:transparent} /* ================================================================= WORKFLOW STEPS ================================================================= */ .wf{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)} @media(max-width:700px){.wf{grid-template-columns:1fr}} .wf-item{display:flex;gap:1.2rem;padding:1.5rem;border-radius:var(--radius);background:#fff;border:1px solid var(--grey-line);transition:transform var(--ti),box-shadow var(--ti)} .wf-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .wf-item .wf-n{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:600} .wf-item h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.35rem} .wf-item p{color:var(--grey);font-size:.93rem;line-height:1.5} /* ================================================================= TIMELINE ================================================================= */ .tl{position:relative;max-width:900px;margin-inline:auto} .tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--grey-line);transform:translateX(-50%)} .tl-line-fill{position:absolute;left:0;top:0;width:100%;background:var(--orange);height:0;transition:height .1s linear} .tl-item{position:relative;width:50%;padding:0 3rem 3.5rem;box-sizing:border-box} .tl-item:nth-child(odd){left:0;text-align:right} .tl-item:nth-child(even){left:50%} .tl-dot{position:absolute;top:.3rem;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--grey-line);z-index:2;transition:border-color .4s,box-shadow .4s;transform:scale(.85)} .tl-item:nth-child(odd) .tl-dot{right:-9px} .tl-item:nth-child(even) .tl-dot{left:-9px} .tl-item.on .tl-dot{border-color:var(--orange);box-shadow:var(--shadow-orange);transform:scale(1)} .tl-year{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;color:var(--orange);line-height:1} .tl-item h3{font-family:var(--font-display);font-size:var(--text-lg);margin:.5rem 0 .4rem} .tl-item p{color:var(--grey);font-size:.96rem} @media(max-width:720px){.tl-line{left:9px}.tl-item{width:100%;left:0!important;text-align:left!important;padding:0 0 2.6rem 2.6rem}.tl-item .tl-dot{left:0!important;right:auto!important}} /* ================================================================= TEAM ================================================================= */ .team-card{text-align:center} .avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:1.8rem;color:#fff;background:var(--orange)} .avatar.alt{background:var(--ink)} /* photo variant of the same 96px round slot: drop an in place of the initials div when a portrait exists (assets/team/.webp) and the card layout stays identical */ .avatar.avatar-photo{object-fit:cover;background:var(--grey-bg);display:block} .team-card h4{font-family:var(--font-display);font-size:1.1rem} .team-card .role{color:var(--orange-ink);font-size:.88rem;font-weight:600;margin-top:.2rem} .team-card .bio{color:var(--grey);font-size:.85rem;margin-top:.5rem} /* ================================================================= FAQ ACCORDION ================================================================= */ .faq{max-width:820px;margin-inline:auto} .faq-item{border-bottom:1px solid var(--grey-line)} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.4rem 0;text-align:left;font-family:var(--font-display);font-weight:600;font-size:var(--text-lg)} .faq-q .faq-ico{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--grey-line);display:grid;place-items:center;transition:transform var(--ti),background var(--ti),color var(--ti),border-color var(--ti)} .faq-q .faq-ico svg{width:14px;height:14px} .faq-item.open .faq-q .faq-ico{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease-inout)} .faq-a-inner{padding:0 0 1.4rem;color:var(--grey);line-height:1.6;max-width:70ch} /* ================================================================= CTA BANNER ================================================================= */ .cta-banner{position:relative;border-radius:var(--radius-lg);background:var(--ink);color:#fff;padding:clamp(2.6rem,6vw,5rem);overflow:hidden;text-align:center} .cta-banner .orb{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(253,51,0,.42),transparent 70%);filter:blur(70px);top:-140px;left:50%;transform:translateX(-50%);opacity:.6} .cta-banner h2{font-family:var(--font-display);font-size:var(--text-2xl);margin-bottom:1rem;position:relative} .cta-banner p{color:rgba(255,255,255,.72);max-width:52ch;margin:0 auto 2rem;position:relative;font-size:var(--text-lg)} .cta-banner .hero-actions{justify-content:center;position:relative} /* ================================================================= FOOTER ================================================================= */ .site-footer{background:var(--ink);color:#fff;padding-block:clamp(3.5rem,6vw,5rem) 2rem} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.12)} .footer-brand img{height:30px;width:auto;margin-bottom:1.2rem} .footer-brand p{color:rgba(255,255,255,.6);max-width:34ch;font-size:.95rem} .footer-sig{margin-top:1.4rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink);font-weight:700} .footer-col .fcol-t{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700;margin:0 0 1.1rem} .footer-col a{display:block;color:rgba(255,255,255,.78);font-size:.94rem;padding:.32rem 0;transition:color var(--ti),padding-left var(--ti)} .footer-col a:hover{color:var(--orange);padding-left:5px} .footer-stats{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem;padding:2.2rem 0;border-bottom:1px solid rgba(255,255,255,.12)} .footer-stats .fs{text-align:center} .footer-stats .fs .n{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:#fff} .footer-stats .fs .n .plus{color:var(--orange)} .footer-stats .fs .l{font-size:.74rem;color:rgba(255,255,255,.5);margin-top:.3rem} .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-top:2rem;font-size:.86rem;color:rgba(255,255,255,.55)} .footer-bottom .fb-links{display:flex;gap:1.4rem;flex-wrap:wrap} .footer-bottom a:hover{color:#fff} .footer-social{display:flex;gap:.7rem} .footer-social a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background var(--ti),border-color var(--ti),transform var(--ti)} .footer-social a:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)} .footer-social a svg{width:18px;height:18px} .footer-contact{color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.9;margin-top:1.2rem} .footer-contact svg{width:16px;height:16px;vertical-align:-3px;margin-right:.55rem;color:var(--orange)} .footer-contact a{color:rgba(255,255,255,.85)} .footer-contact a:hover{color:var(--orange)} @media(max-width:1080px){.footer-stats{grid-template-columns:repeat(4,1fr);gap:1.4rem}} @media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}} @media(max-width:560px){.footer-stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}} @media(max-width:520px){.footer-top{grid-template-columns:1fr}} /* Footer language switcher */ .footer-langs{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.6rem 0;border-bottom:1px solid rgba(255,255,255,.12)} .footer-langs .fl-current{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.85);font-size:.9rem} .footer-langs .fl-current svg{width:16px;height:16px;color:var(--orange)} .footer-langs .fl-list{display:flex;gap:.5rem;flex-wrap:wrap} .footer-langs .fl-opt{display:inline-flex;align-items:center;background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);font-size:.82rem;padding:.6rem 1rem;min-height:44px;border-radius:999px;cursor:pointer;transition:border-color var(--ti),color var(--ti)} /* "not available yet" languages are plain text, not inactive controls, so they carry the full 4.5:1 duty. opacity:.45 over the .6 white took them to 2.44:1 on graphite; the recessed read now comes from the fainter pill outline, while the label itself sits at 4.90:1. */ .footer-langs .fl-opt.is-off{cursor:default;color:rgba(255,255,255,.48);border-color:rgba(255,255,255,.1)} .footer-langs .fl-opt:hover:not(:disabled){border-color:var(--orange);color:#fff} .footer-langs .fl-opt.is-active{border-color:var(--orange);color:var(--orange);font-weight:600} .footer-langs .fl-opt:disabled{opacity:.5;cursor:not-allowed} /* Team card LinkedIn link */ .team-links{margin-top:1rem;display:flex;justify-content:center} .team-links a{width:44px;height:44px;border-radius:50%;border:1px solid var(--grey-line);display:grid;place-items:center;color:var(--grey);transition:background var(--ti),color var(--ti),border-color var(--ti)} .team-links a:hover{background:var(--orange);border-color:var(--orange);color:#fff} .team-links a svg{width:16px;height:16px} .dark .team-links a{border-color:rgba(255,255,255,.18)} /* Legal + glossary pages */ .wrap-narrow{max-width:52rem;margin-inline:auto} .wrap-narrow.center-col{text-align:center} .wrap-narrow.center-col .nl-form{margin-inline:auto;justify-content:center} /* founders 2-up stacks on phones */ .founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:640px){.founders-grid{grid-template-columns:1fr}} .legal-updated{color:var(--grey);font-size:.9rem;margin-bottom:2.4rem} .legal-block{margin-bottom:2.2rem} .legal-block h2{font-family:var(--font-display);font-size:1.35rem;font-weight:600;margin-bottom:.9rem;color:var(--ink)} .legal-block p{color:var(--grey);line-height:1.75;margin-bottom:.9rem} .legal-block a{color:var(--blue-600)} .glossary{display:grid;gap:0;border-top:1px solid var(--grey-line)} .gl-item{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--grey-line)} .gl-item dt{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.05rem} .gl-item dd{color:var(--grey);line-height:1.7;margin:0} @media(max-width:640px){.gl-item{grid-template-columns:1fr;gap:.4rem}} /* ================================================================= FORMS ================================================================= */ .form-card{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,2.8rem);box-shadow:var(--shadow-md)} .field{margin-bottom:1.2rem} .field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.5rem} .field label .req{color:var(--orange-ink)} .field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--grey-line);border-radius:12px;background:#fff;font-size:1rem;transition:border-color var(--ti),box-shadow var(--ti)} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)} .field textarea{resize:vertical;min-height:120px} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d32f2f;box-shadow:0 0 0 3px rgba(211,47,47,.1)} .field .err{color:#d32f2f;font-size:.8rem;margin-top:.35rem;display:none} .field.invalid .err{display:block} .form-error{display:none;margin-top:1rem;color:#d32f2f;font-size:.88rem;font-weight:500;text-align:center;flex-basis:100%;width:100%} .btn.is-loading{opacity:.72;cursor:progress;pointer-events:none} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} @media(max-width:560px){.field-row{grid-template-columns:1fr}} /* Potential comparator (/resources/#comparateur): 3-select row + result cards */ .field-row.comp-row{grid-template-columns:1fr 1fr 1fr;margin-bottom:1.4rem} @media(max-width:760px){.field-row.comp-row{grid-template-columns:1fr}} .comp-results{margin-top:2rem} .comp-card{max-width:56rem;margin:0 auto} .comp-card:focus{outline:2px solid var(--orange);outline-offset:3px} .comp-links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:1.2rem} .file-input{position:relative} .file-input input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%} .file-label{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;border:1.5px dashed var(--grey-line);border-radius:12px;color:var(--grey);font-size:.92rem;transition:border-color var(--ti),color var(--ti)} .file-input:hover .file-label{border-color:var(--orange);color:var(--orange-ink)} .form-success{display:none;text-align:center;padding:2rem 0} .form-success.show{display:block;animation:fadeup .5s var(--ease-out)} .form-success .succ-ico{width:70px;height:70px;border-radius:50%;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center;margin:0 auto 1.3rem} .form-success .succ-ico svg{width:34px;height:34px} .form-success h3{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:.6rem} .form-success p{color:var(--grey)} @keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* multi-step */ .steps-nav{display:flex;gap:.5rem;margin-bottom:2rem} .step-pip{flex:1;display:flex;flex-direction:column;gap:.5rem} .step-pip .bar{height:4px;border-radius:4px;background:var(--grey-line);transition:background var(--ti)} .step-pip.active .bar,.step-pip.done .bar{background:var(--orange)} .step-pip .lbl{font-size:.76rem;color:var(--grey);font-weight:600} .step-pip.active .lbl{color:var(--orange-ink)} .fstep{display:none} .fstep.active{display:block;animation:fadeup .35s var(--ease-out)} .form-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem} /* ================================================================= NEWS / RESOURCE CARDS ================================================================= */ .news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;transition:transform var(--ti),box-shadow var(--ti);height:100%} .news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .news-card .nc-top{aspect-ratio:16/9;background:var(--ink);position:relative;overflow:hidden;display:grid;place-items:center} .news-card .nc-top .nc-mark{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:rgba(255,255,255,.9)} .news-card .nc-top picture{position:absolute;inset:0} .news-card .nc-top img{width:100%;height:100%;object-fit:cover;display:block} .news-card .nc-top .nc-cat{z-index:1} .news-card .nc-top .nc-cat{position:absolute;top:1rem;left:1rem;background:var(--orange-600);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .7rem;border-radius:100px} .news-card .nc-body{padding:1.5rem;display:flex;flex-direction:column;flex:1} .news-card .nc-date{font-size:.8rem;color:var(--grey);font-weight:600;margin-bottom:.6rem} .news-card h3{font-family:var(--font-display);font-size:1.1rem;line-height:1.25;margin-bottom:.7rem} .news-card p{color:var(--grey);font-size:.92rem;flex:1;margin-bottom:1rem} /* ================================================================= WAYO THEME (blue allowed) ================================================================= */ .theme-wayo{--accent:var(--wayo)} .theme-wayo .eyebrow{color:var(--wayo-deep)} /* 4.95:1 on white; the bar below keeps the light accent */ .theme-wayo .eyebrow::before{background:var(--wayo)} .wayo-hero{background:linear-gradient(160deg,#0d1a30 0%,#152744 60%,#1a1a1a 100%);color:#fff;position:relative;overflow:hidden} .wayo-hero .orb-b{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(103,152,227,.4),transparent 70%);filter:blur(90px);top:-120px;right:-100px} .wayo-hero .orb-o{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(253,51,0,.24),transparent 70%);filter:blur(80px);bottom:-100px;left:-60px} /* WAYO chip — light ground is the DEFAULT: an opaque white pill so the label ratio never depends on the section behind it (#3F6FC0 on #fff = 4.95:1). The luminous #9dc0f5 treatment is re-applied below, only on dark grounds. */ .wayo-chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff; border:1.5px solid rgba(103,152,227,.55);color:var(--wayo-deep); padding:.5rem 1rem;border-radius:100px;font-size:.82rem;font-weight:600} /* the inline SVGs carry only a viewBox, so with no size they fell back to the 300x150 replaced-element default: 96.8px icons on /wayo-tv/ and a 0px one on /. Same 16px icon the buttons use. */ .wayo-chip svg{width:16px;height:16px;flex:0 0 auto} /* dark grounds: #9dc0f5 on the WAYO navy = 8.03:1 (hero) / 9.35:1 (deep stop) */ .wayo-hero .wayo-chip,.media-frame .wayo-chip,.dark .wayo-chip, .band-night .wayo-chip,.manif .wayo-chip{ background:rgba(103,152,227,.15);border-color:rgba(103,152,227,.4);color:#9dc0f5} .btn-wayo{background:var(--wayo-deep);color:#fff} /* white on #3f6fc0 = 4.95:1; #6798E3 stays decorative */ .btn-wayo:hover{background:#35609F;transform:translateY(-2px);box-shadow:0 16px 44px rgba(63,111,192,.4)} .wayo-feat-ico{color:var(--wayo)!important} .card.wayo-card .card-ico{background:rgba(103,152,227,.14);color:var(--wayo)} .wayo-grad-num{color:var(--wayo)} /* ================================================================= MISC ================================================================= */ .badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--orange-tint);color:var(--orange-600);font-weight:600;font-size:.8rem;padding:.4rem .85rem;border-radius:100px} .dark .badge{background:rgba(253,51,0,.18);color:#fff} .tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem} .divider{height:1px;background:var(--grey-line);border:none} .logo-play{display:inline-block} .map-visual{aspect-ratio:2/1;background:var(--ink);border-radius:var(--radius);position:relative;overflow:hidden} /* reveal animation (JS-driven, no CLS: opacity + slight translate applied via transform on a wrapper that keeps layout) */ html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);animation:revealSafety .6s var(--ease-out) 2.4s forwards} .reveal.in{opacity:1;transform:none;animation:none} @keyframes revealSafety{to{opacity:1;transform:none}} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.4s} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none!important} .marquee-track{animation:none!important} .hero-bg-orb,.floating-badge{transform:none!important} .ld,.cp-dot{animation:none!important} /* live-pulse dots (page-hero eyebrow, tags, call pill) */ *{scroll-behavior:auto!important} } /* pricing/monetization list */ .mon-list{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)} @media(max-width:820px){.mon-list{grid-template-columns:1fr}} .mon-item{padding:1.4rem;border-radius:var(--radius);background:#fff;border:1px solid var(--grey-line)} .mon-item h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.4rem} .mon-item p{color:var(--grey);font-size:.92rem} /* The "Operated by SoFast" tile is emitted with inline style="background:var(--wayo);color:#fff;border-color:var(--wayo)". White on #6798E3 is only 2.93:1 (h4, 16.8px/600) and the 85%-white paragraph 2.54:1. Re-pointing --wayo on that one element moves the fill to #3F6FC0 (white on it = 4.95:1); the paragraph's inline colour is overridden to full white, which the inline declaration makes an !important job. */ .mon-item[style*="background:var(--wayo)"]{--wayo:var(--wayo-deep)} .mon-item[style*="background:var(--wayo)"] p{color:#fff!important} /* big number feature */ .bignum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.2rem,4.5vw,4rem) clamp(2rem,4vw,4rem); max-width:52rem;margin-inline:auto;justify-items:center;text-align:center} .bignum .l{margin-inline:auto} @media(max-width:640px){.bignum-grid{grid-template-columns:1fr}} .bignum .n{font-family:var(--font-display);font-size:clamp(3rem,7vw,5rem);font-weight:600;line-height:1;letter-spacing:-.03em} .bignum .n .plus{color:var(--orange)} .bignum .l{color:var(--grey);margin-top:.6rem;font-size:1rem;max-width:26ch} .dark .bignum .l{color:rgba(255,255,255,.6)} /* breadcrumb */ .crumb{display:flex;gap:.5rem;align-items:center;font-size:.84rem;color:var(--grey);margin-bottom:1.4rem} .crumb a:hover{color:var(--orange-ink)} /* the "/" separator is real text, so it keeps the crumb's own colour: at opacity:.5 it measured 2.03:1 on the tinted hero and 2.73:1 on the navy. */ .crumb .sep{opacity:1} /* breadcrumbs on dark grounds: Gris SoFast is only 3.1:1 on the WAYO navy, so those crumbs take the light muted ink instead (#A9AEB2 = 6.68:1). */ .wayo-hero .crumb,.dark .crumb,.band-night .crumb,.hh2 .crumb{color:var(--d-mut,#A9AEB2)} .wayo-hero .crumb a:hover,.dark .crumb a:hover,.band-night .crumb a:hover,.hh2 .crumb a:hover{color:#fff} /* ---- Header on dark hero (WAYO) ---- */ .brand .logo-dark{display:none} .brand .logo-light{display:block} html.header-on-dark .site-header:not(.scrolled) .brand .logo-light{display:none} html.header-on-dark .site-header:not(.scrolled) .brand .logo-dark{display:block} html.header-on-dark .site-header:not(.scrolled) .nav-links a, html.header-on-dark .site-header:not(.scrolled) .nav-links button.navitem{color:rgba(255,255,255,.92)} html.header-on-dark .site-header:not(.scrolled) .nav-links a:hover, html.header-on-dark .site-header:not(.scrolled) .nav-links button.navitem:hover{color:#fff;background:rgba(255,255,255,.1)} html.header-on-dark .site-header:not(.scrolled) .nav-links a.active{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--wayo)} html.header-on-dark .site-header:not(.scrolled) .nav-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);background:transparent} html.header-on-dark .site-header:not(.scrolled) .burger span{background:#fff} /* the language picker also sits on the dark hero: Gris SoFast is 3.67:1 there */ html.header-on-dark .site-header:not(.scrolled) .lp{color:rgba(255,255,255,.82)} html.header-on-dark .site-header:not(.scrolled) .lp:hover{color:#fff} html.header-on-dark .site-header:not(.scrolled) .lp.is-on{color:#fff;background:rgba(255,255,255,.16)} /* ---- header-on-dark REVERTS while the mobile panel covers the page ---- The panel is an opaque white sheet over the whole viewport, so the white burger bars, the white wordmark and the white language picker would be invisible on it. Two independent triggers so this can never fail: the :has() form works with CSS alone, and js/main.js also stamps html.nav-open in initMobileNav(). */ html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .brand .logo-light, html.header-on-dark.nav-open .site-header:not(.scrolled) .brand .logo-light{display:block} html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .brand .logo-dark, html.header-on-dark.nav-open .site-header:not(.scrolled) .brand .logo-dark{display:none} html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .burger span, html.header-on-dark.nav-open .site-header:not(.scrolled) .burger span{background:var(--ink)} html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .lp, html.header-on-dark.nav-open .site-header:not(.scrolled) .lp{color:var(--grey)} html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .lp:hover, html.header-on-dark.nav-open .site-header:not(.scrolled) .lp:hover{color:var(--orange-ink)} html.header-on-dark:has(.mobile-panel.open) .site-header:not(.scrolled) .lp.is-on, html.header-on-dark.nav-open .site-header:not(.scrolled) .lp.is-on{color:var(--ink);background:var(--grey-bg,#F4F5F5)} /* the fixed consent banner (z-index 1400) sits above the panel and buried the panel's primary CTA; it steps aside while the menu is open and comes back the moment it closes. */ html:has(.mobile-panel.open) .consent-banner, html.nav-open .consent-banner{display:none} /* ghost button sitting on the dark wayo hero */ .wayo-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)} .wayo-hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} /* ---- AI Localization: language chips (clean, uniform) ---- */ .lang-grid{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;max-width:56rem;margin:2.5rem auto 0} .lang-chip{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.15rem;border:1px solid var(--grey-line);border-radius:999px;background:#fff;font-weight:500;font-size:1rem;color:var(--ink);transition:border-color var(--ti),transform var(--ti),box-shadow var(--ti)} .lang-chip:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 24px rgba(26,26,26,.06)} .lang-flag{font-size:1.25rem;line-height:1} .lang-chip--more{background:var(--orange-tint);border-color:transparent;color:var(--orange-ink);font-weight:600} @media(max-width:520px){.lang-chip{font-size:.9rem;padding:.6rem .95rem}.lang-flag{font-size:1.1rem}} /* ---- Ghost button on dark CTA banner (was invisible) ---- */ .cta-banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);background:transparent} .cta-banner .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)} /* ---- Stable counter digits (no jitter on large numbers) ---- */ .stat .num,.bignum .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ============================================================ HOME REBUILD (exact-copy) — scoped components Palette: white / orange #FD3300 / ink #1A1A1A / greys. WAYO blue only inside .theme-wayo. ============================================================ */ /* -- Pourquoi SoFast pain list -- */ .pain-wrap{max-width:60rem} .pain-list{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 1.8rem} .pain-list .pain{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--grey-line);background:var(--grey-bg2);border-radius:100px;padding:.55rem 1rem;font-size:.92rem;color:var(--ink-soft);font-weight:500} .pain-list .pain .pd{width:6px;height:6px;border-radius:50%;background:var(--grey);flex:none} .pain-p{font-size:var(--text-base);color:var(--ink-soft);line-height:1.65;max-width:62ch;margin-bottom:1.1rem} .pain-p strong{color:var(--ink)} .pain-lead-in{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--ink);margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--grey-line)} /* -- 11 numbered solution blocks (premium designed sequence) -- */ .sol-seq{margin-top:clamp(2.5rem,5vw,4rem);position:relative} .sol{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(2rem,4vw,3.2rem) 0;border-top:1px solid var(--grey-line);align-items:start} .sol:last-child{border-bottom:1px solid var(--grey-line)} .sol-index{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;position:sticky;top:100px;min-width:clamp(3.5rem,7vw,6rem)} .sol-num{font-family:var(--font-display);font-weight:600;font-size:clamp(2.4rem,5vw,4rem);line-height:.9;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums} .sol-num .d{color:var(--orange)} .sol-ico{width:46px;height:46px;border-radius:13px;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center} .sol-ico svg{width:23px;height:23px} .sol-body{max-width:64rem;min-width:0} .sol-kicker{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:.7rem} .sol-head{font-family:var(--font-display);font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.08;margin-bottom:.9rem} .sol-text{color:var(--ink-soft);font-size:var(--text-base);line-height:1.65;max-width:60ch} .sol-tags{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem} .sol-tags .st{border:1px solid var(--grey-line);border-radius:100px;padding:.42rem .9rem;font-size:.84rem;font-weight:500;color:var(--ink-soft);background:#fff;transition:border-color var(--ti),color var(--ti)} .sol-tags .st:hover{border-color:var(--orange);color:var(--orange-ink)} .sol-cta{margin-top:1.5rem} .sol-partners{margin-top:1.4rem;color:var(--ink-soft);font-size:.98rem;line-height:1.6;max-width:64ch} .sol-partners b{color:var(--ink);font-weight:600} @media(max-width:720px){ .sol{grid-template-columns:1fr;gap:1rem} .sol-index{flex-direction:row;align-items:center;position:static;top:auto} .sol-num{font-size:2.6rem} } /* world map coverage placeholder */ .sol-map{margin-top:1.6rem;border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;background:var(--ink);position:relative;aspect-ratio:2.6/1} .sol-map svg{width:100%;height:100%;display:block} .sol-map .sol-map-note{position:absolute;left:0;right:0;bottom:0;padding:.7rem 1rem;font-size:.8rem;color:rgba(255,255,255,.55);text-align:center;letter-spacing:.02em} /* dashboard analytics placeholder frame */ .sol-dash{margin-top:1.6rem;border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;background:var(--grey-bg2);padding:clamp(1rem,2vw,1.6rem)} .sol-dash-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem} .sol-dash-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--grey-line)} .sol-dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem} @media(max-width:640px){.sol-dash-grid{grid-template-columns:repeat(2,1fr)}} .sol-dash-kpi{background:#fff;border:1px solid var(--grey-line);border-radius:12px;padding:1rem} .sol-dash-kpi .kl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);font-weight:700} .sol-dash-kpi .kv{height:8px;border-radius:4px;background:var(--grey-bg);margin-top:.7rem;overflow:hidden} .sol-dash-kpi .kv i{display:block;height:100%;background:var(--blue);border-radius:4px} .sol-dash-chart{grid-column:1/-1;background:#fff;border:1px solid var(--grey-line);border-radius:12px;padding:1rem;margin-top:.7rem} .sol-dash-chart svg{width:100%;height:120px;display:block} .sol-dash-ph{text-align:center;color:var(--grey);font-size:.8rem;margin-top:.8rem;letter-spacing:.02em} /* -- Manifeste band -- */ .manifeste{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(2.6rem,6vw,5rem);position:relative;overflow:hidden} .manifeste .orb{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(253,51,0,.24),transparent 70%);top:-140px;right:-100px;pointer-events:none} .manifeste h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.025em;line-height:1.05;max-width:22ch;position:relative} .manifeste p{color:rgba(255,255,255,.78);font-size:var(--text-lg);line-height:1.65;max-width:70ch;margin-top:1.5rem;position:relative} .manifeste p+p{margin-top:1.1rem} /* -- Team / Actu / Newsletter / LinkedIn simple bands -- */ .mini-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} .nl-form{display:flex;gap:.7rem;flex-wrap:wrap;max-width:34rem;margin-top:1.6rem} .nl-form input[type=email]{flex:1;min-width:15rem;border:1.5px solid var(--grey-line);border-radius:100px;padding:.9rem 1.3rem;font-size:1rem;background:#fff} .nl-form input[type=email]:focus{outline:none;border-color:var(--orange)} .nl-form button{white-space:nowrap} .nl-ok{display:none;margin-top:1rem;color:var(--orange-ink);font-weight:600} .nl-form.done{display:none} .nl-form.done + .nl-ok{display:block} /* ============================================================ VISUAL ENRICHMENT — device frames, channel wall, VOD strip, solution media, partner marquee. Palette strict (white/orange/ ink/grey). WAYO blue only inside .theme-wayo. ============================================================ */ /* ---- Reusable image aspect wrapper (prevents CLS) ---- */ .img-fit{display:block;width:100%;height:100%;object-fit:cover} /* ---- Smart-TV device frame ---- */ .tv-frame{position:relative;width:100%;border-radius:16px;background:linear-gradient(160deg,#2a2a2a,#141414); padding:12px 12px 14px;box-shadow:var(--shadow-lg);} .tv-frame .tv-screen{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9} .tv-frame .tv-screen img{width:100%;height:100%;object-fit:cover;display:block} /* screen sheen */ .tv-frame .tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 42%);mix-blend-mode:screen} /* subtle bezel brand dot */ .tv-frame .tv-chin{display:flex;align-items:center;justify-content:center;margin-top:8px} .tv-frame .tv-chin i{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.14)} /* stand */ .tv-stand{width:34%;height:12px;margin:0 auto;background:linear-gradient(180deg,#242424,#151515); border-radius:0 0 10px 10px;box-shadow:0 14px 24px rgba(26,26,26,.18)} .tv-stand::after{content:"";display:block;width:150%;height:8px;margin:6px auto 0;transform:translateX(-16.6%); background:linear-gradient(180deg,#1d1d1d,#111);border-radius:6px} /* LIVE chip on frame */ .live-chip{position:absolute;top:22px;right:24px;z-index:4;display:inline-flex;align-items:center;gap:.5rem; background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18); color:#fff;font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.12em; padding:.38rem .7rem;border-radius:100px} .live-chip .ld{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(253,51,0,.6); animation:livePulse 1.8s var(--ease-out) infinite} @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(253,51,0,.55)}70%{box-shadow:0 0 0 9px rgba(253,51,0,0)}100%{box-shadow:0 0 0 0 rgba(253,51,0,0)}} /* faint channel-grid shimmer behind hero visual */ .hero-tile-bg{position:absolute;inset:-6% -4%;z-index:-1;border-radius:24px;opacity:.5; background-image:linear-gradient(rgba(23,25,27,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(23,25,27,.06) 1px,transparent 1px); background-size:38px 38px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%)} /* ---- VOD poster strip ---- */ .vod-strip{margin-top:1.8rem;border-radius:var(--radius);overflow:hidden;position:relative;width:100%;max-width:100%; border:1px solid var(--grey-line);aspect-ratio:16/6;background:var(--ink)} .vod-strip img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)} .vod-strip::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,var(--white),transparent 14%,transparent 86%,var(--white))} .vod-strip .vod-cap{position:absolute;left:1.2rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.6rem; background:rgba(0,0,0,.5);backdrop-filter:blur(6px);color:#fff;font-weight:600;font-size:.82rem; padding:.5rem .9rem;border-radius:100px;border:1px solid rgba(255,255,255,.16)} .vod-strip .vod-cap b{color:var(--orange-ink);font-family:var(--font-display)} .soft2 .vod-strip::after,.soft .vod-strip::after{background:linear-gradient(90deg,var(--grey-bg2),transparent 14%,transparent 86%,var(--grey-bg2))} /* ---- Solution block media (alternating layout for heavy blocks) ---- */ .sol.has-media .sol-body{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:center;max-width:none} .sol.has-media.media-left .sol-copy{order:2} .sol.has-media.media-left .sol-media{order:1} .sol-media{border-radius:var(--radius);position:relative} @media(max-width:900px){.sol.has-media .sol-body{grid-template-columns:1fr}.sol.has-media.media-left .sol-copy,.sol.has-media.media-left .sol-media{order:0}} /* OTT multi-device image plate */ .ott-plate{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:16/9;background:var(--ink);border:1px solid var(--grey-line)} .ott-plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)} .sol-media:hover .ott-plate img{transform:scale(1.03)} /* ---- Upgraded animated world map ---- */ .sol-map .node-pulse{transform-box:fill-box;transform-origin:center;animation:mapPulse 2.6s var(--ease-out) infinite} .sol-map .node-pulse.p2{animation-delay:.5s}.sol-map .node-pulse.p3{animation-delay:1s} .sol-map .node-pulse.p4{animation-delay:1.5s}.sol-map .node-pulse.p5{animation-delay:.8s} .sol-map .node-pulse.p6{animation-delay:1.9s} @keyframes mapPulse{0%{opacity:.7;transform:scale(.5)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}} .sol-map .arc{stroke-dasharray:1;stroke-dashoffset:1;animation:arcDraw 4.4s var(--ease-out) infinite} .sol-map .arc.a2{animation-delay:.7s}.sol-map .arc.a3{animation-delay:1.4s} .sol-map .arc.a4{animation-delay:2.1s}.sol-map .arc.a5{animation-delay:2.8s} @keyframes arcDraw{0%{stroke-dashoffset:1;opacity:0}15%{opacity:.7}55%{stroke-dashoffset:0;opacity:.7}85%{opacity:0}100%{stroke-dashoffset:0;opacity:0}} /* ---- Partner text-pill marquee ---- */ .partner-marquee{margin-top:1.6rem;overflow:hidden;width:100%;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .partner-track{display:flex;gap:.7rem;width:max-content;animation:chanScroll 40s linear infinite} .partner-marquee:hover .partner-track{animation-play-state:paused} .partner-pill{flex:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--grey-line); border-radius:100px;padding:.55rem 1.1rem;font-family:var(--font-display);font-weight:600;font-size:.92rem; color:var(--ink-soft);background:#fff;transition:border-color var(--ti),color var(--ti),background var(--ti)} .partner-pill:hover{border-color:var(--orange);color:var(--orange-ink)} .partner-pill .pp-dot{width:7px;height:7px;border-radius:50%;background:var(--grey);transition:background var(--ti)} .partner-pill:hover .pp-dot{background:var(--orange)} @keyframes chanScroll{to{transform:translateX(-50%)}} /* ---- WAYO launcher TV frame (blue allowed inside theme-wayo) ---- */ .theme-wayo .tv-frame{background:linear-gradient(160deg,#22334f,#101a2c)} .theme-wayo .tv-frame .tv-chin i{background:rgba(103,152,227,.4)} .theme-wayo .live-chip{border-color:rgba(103,152,227,.4)} .theme-wayo .live-chip .ld{background:var(--wayo);animation:livePulseW 1.8s var(--ease-out) infinite} @keyframes livePulseW{0%{box-shadow:0 0 0 0 rgba(103,152,227,.55)}70%{box-shadow:0 0 0 9px rgba(103,152,227,0)}100%{box-shadow:0 0 0 0 rgba(103,152,227,0)}} .wayo-logo-chip{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem} .wayo-logo-chip img{height:26px;width:auto} /* ============================================================ SoFast OTT app mockup (HTML/CSS, palette-strict — replaces the old stock white-label image). Dark product UI, orange accents, WAYO blue never used here. ============================================================ */ .ott-mock{border-radius:16px;overflow:hidden;background:#0e0e0e;border:1px solid #232323; box-shadow:var(--shadow-lg);aspect-ratio:16/10;width:100%} .ott-app{display:flex;height:100%;font-family:var(--font-body)} .ott-side{flex:none;width:clamp(42px,4.2vw,58px);background:#151515;border-right:1px solid #232323; display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.85rem 0} .ott-side .ott-logo{width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);border-radius:9px;background:var(--orange); color:#fff;display:grid;place-items:center;margin-bottom:.35rem} .ott-side .ott-logo svg{width:15px;height:15px} .ott-side .ott-nav{width:clamp(28px,2.6vw,36px);height:clamp(28px,2.6vw,36px);border-radius:9px;display:grid;place-items:center;color:rgba(255,255,255,.45)} .ott-side .ott-nav svg{width:17px;height:17px} .ott-side .ott-nav.on{background:rgba(253,51,0,.16);color:var(--orange)} .ott-body{flex:1;min-width:0;padding:clamp(.7rem,1.5vw,1.15rem);display:flex;flex-direction:column; gap:clamp(.55rem,1.1vw,.85rem);background:linear-gradient(180deg,#111,#0b0b0b)} .ott-head{display:flex;align-items:center;justify-content:space-between;flex:none} .ott-brand{font-family:var(--font-display);font-weight:700;color:#fff;letter-spacing:-.01em; font-size:clamp(.85rem,1.4vw,1.1rem);display:inline-flex;align-items:center;gap:.42rem} .ott-brand::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange)} .ott-avatar{width:clamp(20px,1.8vw,24px);height:clamp(20px,1.8vw,24px);border-radius:50%; background:linear-gradient(135deg,#333,#1f1f1f);border:1px solid #333} .ott-feature{position:relative;flex:1 1 auto;min-height:0;border-radius:12px;overflow:hidden;background:#1a1a1a} .ott-feature>img,.ott-feature>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ott-feature::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(6,6,6,.92),rgba(6,6,6,.3) 58%,transparent), linear-gradient(0deg,rgba(6,6,6,.75),transparent 62%)} .ott-feat-in{position:absolute;left:clamp(.8rem,1.7vw,1.4rem);right:1rem;bottom:clamp(.7rem,1.5vw,1.2rem);z-index:2} .ott-live{display:inline-flex;align-items:center;gap:.32rem;background:var(--orange-600);color:#fff;font-weight:700; letter-spacing:.1em;font-size:.56rem;padding:.18rem .42rem;border-radius:5px;line-height:1} .ott-live .ott-ld{width:5px;height:5px;border-radius:50%;background:#fff} .ott-live-lg{font-size:clamp(.55rem,1vw,.7rem);padding:.24rem .5rem} .ott-eyebrow{display:block;margin-top:.5rem;color:rgba(255,255,255,.72);font-weight:600; letter-spacing:.04em;font-size:clamp(.6rem,1vw,.74rem)} .ott-feat-in h4{font-family:var(--font-display);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.08; font-size:clamp(.95rem,2.1vw,1.55rem);margin:.12rem 0 .55rem} .ott-play{display:inline-flex;align-items:center;gap:.35rem;background:#fff;color:#111;font-weight:600; font-size:clamp(.62rem,1vw,.78rem);padding:.34rem .72rem;border-radius:100px;line-height:1} .ott-play svg{width:12px;height:12px} .ott-rail{flex:none;min-width:0} .ott-rail-h{color:rgba(255,255,255,.85);font-weight:600;margin-bottom:.42rem;font-size:clamp(.62rem,1vw,.78rem)} .ott-row{display:flex;gap:.42rem;overflow:hidden} .ott-tile{position:relative;flex:1 1 0;min-width:0;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#1c1c1c} .ott-tile img{width:100%;height:100%;object-fit:cover;display:block} .ott-tile .ott-ch{position:absolute;top:3px;left:5px;font-family:var(--font-display);font-weight:600; font-size:.56rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.75)} .ott-tile .ott-live{position:absolute;bottom:3px;right:3px;padding:.08rem .26rem;font-size:.46rem;gap:.2rem} .ott-tile .ott-live .ott-ld{width:3.5px;height:3.5px} /* ---- WAYO TV launcher UI (HTML/CSS; renders only inside .theme-wayo, so blue is allowed) ---- */ .wayo-ui{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;font-family:var(--font-body); background:linear-gradient(160deg,#0d1a30,#0a1424 70%,#0b1220); padding:clamp(.5rem,1.3vw,.95rem);gap:clamp(.4rem,1vw,.7rem)} .wl-top{display:flex;align-items:center;justify-content:space-between;flex:none} .wl-logo{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;color:#fff;font-size:clamp(.8rem,1.5vw,1.15rem)} .wl-logo::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-left:.28rem;vertical-align:middle} .wl-nav{display:flex;gap:clamp(.5rem,1.3vw,1rem);font-size:clamp(.56rem,1vw,.72rem);color:rgba(255,255,255,.5);font-weight:500} .wl-nav b{color:#fff;font-weight:700;position:relative} .wl-nav b::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--wayo)} .wl-clock{font-size:clamp(.56rem,1vw,.72rem);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums} .wl-hero{position:relative;flex:1 1 auto;min-height:0;border-radius:10px;overflow:hidden;background:#0a1424} .wl-hero>img,.wl-hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .wl-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(8,14,26,.92),rgba(8,14,26,.3) 60%,transparent),linear-gradient(0deg,rgba(8,14,26,.7),transparent 55%)} .wl-hero-in{position:absolute;left:clamp(.7rem,1.6vw,1.3rem);right:1rem;bottom:clamp(.6rem,1.4vw,1.1rem);z-index:2} .wl-live{display:inline-flex;align-items:center;gap:.3rem;background:var(--orange-600);color:#fff;font-weight:700; letter-spacing:.1em;font-size:clamp(.5rem,.95vw,.66rem);padding:.18rem .42rem;border-radius:5px;line-height:1} .wl-live .wl-ld{width:5px;height:5px;border-radius:50%;background:#fff} .wl-eyebrow{display:block;margin-top:.45rem;color:rgba(255,255,255,.72);font-weight:600;letter-spacing:.04em;font-size:clamp(.56rem,1vw,.7rem)} .wl-hero-in h5{font-family:var(--font-display);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.08; font-size:clamp(.9rem,2vw,1.5rem);margin:.1rem 0 .5rem} .wl-play{display:inline-flex;align-items:center;gap:.35rem;background:var(--wayo);color:#fff;font-weight:600; font-size:clamp(.6rem,1vw,.76rem);padding:.33rem .72rem;border-radius:100px;line-height:1} .wl-play svg{width:12px;height:12px} .wl-row{display:flex;gap:clamp(.3rem,.8vw,.45rem);flex:none} .wl-tile{position:relative;flex:1 1 0;min-width:0;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#12203a} .wl-tile img{width:100%;height:100%;object-fit:cover;display:block} .wl-tile.on{outline:2px solid var(--wayo);outline-offset:-2px} /* ---- reduced-motion off-switch for all new animations ---- */ @media(prefers-reduced-motion:reduce){ .live-chip .ld{animation:none!important} .partner-track,.logo-track{animation:none!important} .sol-map .node-pulse,.sol-map .arc{animation:none!important} .sol-map .arc{stroke-dashoffset:0!important;opacity:.55!important;stroke-dasharray:none!important} .vod-strip img,.ott-plate img{transform:none!important} } /* ================================================================ PREMIUM REDESIGN — light-first chapter system (GSAP-driven) Full-width editorial layout. Palette-strict. Copy verbatim. Layout only here — GSAP sets animation from-states at runtime, so content is never hidden if JS or motion is unavailable. ================================================================ */ /* ---------- HOME HERO (light, full-width, living wall) ---------- */ .hh{position:relative;display:flex;flex-direction:column; padding:clamp(6.5rem,10vh,8.5rem) var(--gutter) 0;overflow:hidden;background: radial-gradient(56% 48% at 86% 8%,rgba(253,51,0,.06),transparent 70%),var(--white)} .hh-tag{display:flex;align-items:center;gap:.9rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; font-size:clamp(.62rem,.75vw,.8rem);color:var(--grey)} .hh-tag::before{content:"";width:34px;height:2px;background:var(--orange)} .hh-tag .ld{width:9px;height:9px;border-radius:50%;background:var(--orange);animation:livePulse 1.8s var(--ease-out) infinite} /* flex column: sibling .ln margins must NOT collapse, or the -.12em compensation only applies once between lines and the leading grows. */ .hh-h1{display:flex;flex-direction:column;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:.98;color:var(--ink); font-size:clamp(2.8rem,6.6vw,8.2rem);margin-top:1.9rem} /* .12em of mask padding gives bold General Sans descenders (g, y) room to render - .04em clipped them (Yanai QA 2026-08-25); the negative margin keeps the line rhythm identical. */ .hh-h1 .ln{display:block;overflow:hidden;padding-block:.12em;margin-block:-.12em} .hh-h1 .ln>span{display:inline-block} .hh-kick{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;color:var(--ink); font-size:clamp(1.05rem,1.8vw,1.9rem);margin-top:2rem} .hh .hero-actions{margin-top:2.2rem} .hh-lead{color:var(--ink-soft);line-height:1.66;font-size:clamp(1.02rem,1.15vw,1.22rem); max-width:62ch;margin-top:1.4rem} /* ---------- POURQUOI (full-width composition) ---------- */ .pq{padding:clamp(4.5rem,10vh,8.5rem) var(--gutter);background:var(--grey-bg)} .pq-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(2.2rem,4.6vw,5.2rem);max-width:none} .pq-intro{color:var(--ink-soft);font-size:clamp(1rem,1.15vw,1.25rem);margin-top:1.4rem;max-width:60ch} .pq-pills{display:flex;flex-wrap:wrap;gap:clamp(.6rem,1vw,1rem);margin:clamp(1.8rem,3.5vh,3rem) 0} .pq-pills .pain{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--grey-line); border-radius:100px;background:#fff;color:var(--ink-soft);font-weight:500; font-size:clamp(.95rem,1.05vw,1.15rem);padding:.85rem 1.5rem;transition:border-color .2s,color .2s} .pq-pills .pain:hover{border-color:var(--orange);color:var(--orange-ink)} .pq-pills .pain .pd{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none} .pq-cols{display:grid;grid-template-columns:1fr;gap:1.1rem;max-width:62rem; border-top:1px solid var(--grey-line);padding-top:clamp(1.6rem,3vh,2.6rem)} .pq-cols p{color:var(--ink-soft);line-height:1.68;font-size:clamp(.98rem,1.05vw,1.15rem)} .pq-cols p strong{color:var(--ink)} .pq-lead{font-family:var(--font-display);font-style:italic;color:var(--ink); font-size:clamp(1.15rem,1.5vw,1.7rem);margin-top:clamp(1.8rem,3.5vh,2.8rem)} /* ---------- DARK CINEMATIC BAND (manifeste) ---------- */ .manif{position:relative;overflow:hidden;background:#0b0b0b;color:#fff} .manif-bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;opacity:.9} .manif-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.92),rgba(8,8,8,.42) 30%,rgba(8,8,8,.5) 70%,rgba(8,8,8,.95))} .manif-in{position:relative;z-index:2;padding:clamp(6rem,15vh,11rem) var(--gutter)} .manif-rule{width:clamp(60px,7vw,120px);height:3px;background:var(--orange);margin-bottom:2rem} .manif-in h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.0; font-size:clamp(2.3rem,5vw,5.8rem);max-width:20ch} .manif-in p{color:rgba(255,255,255,.78);line-height:1.68;font-size:clamp(1rem,1.12vw,1.22rem);max-width:66ch;margin-top:1.5rem} /* ---------- floating call pill ---------- */ .call-pill{position:fixed;right:clamp(1rem,2vw,2rem);bottom:calc(clamp(1rem,2.5vh,2rem) + env(safe-area-inset-bottom,0px));z-index:90; display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:#fff;font-weight:600; font-size:.92rem;padding:.95rem 1.5rem;border-radius:100px;box-shadow:0 20px 50px rgba(26,26,26,.35); opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),background .2s} .call-pill .cp-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:livePulse 1.8s var(--ease-out) infinite} .call-pill:hover{background:var(--orange-600)} .call-pill.on{opacity:1;transform:none;pointer-events:auto} /* header hugs the page edges like the hero (premium norm: logo far left, CTA far right) */ .site-header .wrap{max-width:none} /* ---------- wide-screen treatment (nothing identical above 1600px) ---------- */ @media(min-width:901px){ .grid.g3>.card:last-child:nth-child(3n+1){grid-column:2} } @media(min-width:1600px){ .grid.g3{gap:1.6rem} .footer-top{grid-template-columns:2fr 1fr 1fr 1fr} } @media(min-width:1920px){ :root{--text-base:1.1rem} } @media(prefers-reduced-motion:reduce){ .hh-tag .ld,.call-pill .cp-dot{animation:none!important} } /* ---------- editorial spreads (text-only solutions, in doc order) ---------- */ .spr{position:relative;overflow:hidden;padding:clamp(3.2rem,7vh,5.5rem) var(--gutter)} .spr.alt{background:var(--grey-bg2)} .spr-num{font-family:var(--font-display);font-weight:700;line-height:.85;font-size:clamp(2.4rem,3.2vw,3.6rem); color:transparent;-webkit-text-stroke:1.5px var(--grey-line);user-select:none;margin-bottom:.8rem} .spr-num i{font-style:normal;-webkit-text-stroke:1.5px var(--orange)} .spr-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,3.5vw,5rem);align-items:center;max-width:min(1500px,100%);margin-inline:auto; border-top:1px solid var(--grey-line);padding-top:clamp(2rem,4vh,3rem)} .spr-grid>p{border-left:3px solid var(--orange);padding-left:clamp(1.2rem,2vw,2rem)} @media(max-width:860px){.spr-grid{grid-template-columns:1fr}} .spr-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.02;color:var(--ink); font-size:clamp(1.7rem,3vw,3.2rem);margin-top:.9rem;max-width:20ch} .spr-grid>p{color:var(--ink-soft);line-height:1.68;font-size:clamp(.96rem,1.02vw,1.12rem);max-width:58ch} /* ---------- statement band (hero's second paragraph, given room) ---------- */ .stmt{background:var(--grey-bg2);padding:clamp(4rem,9vh,7rem) var(--gutter)} .stmt-in{max-width:52rem;margin-inline:auto;text-align:center} .stmt-in::before{content:"";display:block;width:56px;height:3px;background:var(--orange);margin:0 auto clamp(1.6rem,3vh,2.4rem)} .stmt-in p{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;color:var(--ink); line-height:1.42;font-size:clamp(1.25rem,2vw,1.9rem)} /* ================================================================ POURQUOI SOFAST v2 — chaos of vendors -> the one-partner answer ================================================================ */ .pq2{position:relative;overflow:hidden;background:var(--white);padding:clamp(4.5rem,10vh,8.5rem) var(--gutter); background-image:radial-gradient(46% 40% at 88% 6%,rgba(253,51,0,.05),transparent 70%)} .pq2-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,5rem);align-items:stretch} @media(max-width:960px){.pq2-grid{grid-template-columns:1fr}} .pq2-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(2.4rem,4.8vw,5.4rem);color:var(--ink)} .pq2-intro{color:var(--ink-soft);line-height:1.6;font-size:clamp(1rem,1.15vw,1.25rem);max-width:44ch; margin-top:1.3rem} /* the tangle */ .pq2-chaos{position:relative;min-height:clamp(320px,42vh,480px)} .pq2-web{position:absolute;inset:4% 6%;width:88%;height:92%} .pq2-web path{stroke:#cfcfcf;stroke-width:.5;stroke-dasharray:1.6 2.2;opacity:.9} .pq2-chaos .pain{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r)); display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--grey-line);border-radius:100px; background:#fff;color:var(--ink-soft);font-weight:500;font-size:clamp(.85rem,1vw,1.05rem); padding:.8rem 1.4rem;box-shadow:var(--shadow-sm);white-space:nowrap} .pq2-chaos .pain .pd{width:7px;height:7px;border-radius:50%;background:var(--grey);flex:none} .pq2-chaos .pain:hover{border-color:var(--orange);color:var(--orange-ink)} .pq2-chaos .pain:hover .pd{background:var(--orange)} @media(max-width:960px){ .pq2-chaos{min-height:0} .pq2-web{display:none} .pq2-chaos .pain{position:static;transform:none;margin:.3rem .35rem .3rem 0} .pq2-chaos{display:flex;flex-wrap:wrap} } /* resolution */ .pq2-res{max-width:62rem;margin-top:clamp(1.6rem,3vh,2.4rem);border-top:1px solid var(--grey-line); padding-top:clamp(1.6rem,3vh,2.4rem)} .pq2-p1{color:var(--grey);line-height:1.66;font-size:clamp(.98rem,1.05vw,1.15rem);max-width:62ch} .pq2-p2{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;color:var(--ink); line-height:1.4;font-size:clamp(1.25rem,1.9vw,1.85rem);margin-top:1.4rem} .pq2-p2 strong{color:var(--orange-ink);font-weight:700} /* cue into the deck */ .pq2-cue{display:flex;align-items:center;gap:1rem;margin-top:clamp(2.2rem,4.5vh,3.4rem)} .pq2-cue p{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--ink); font-size:clamp(1.15rem,1.6vw,1.7rem)} .pq2-cue .cue-a{width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center;animation:cueBob 1.8s var(--ease-inout) infinite} .pq2-cue .cue-a svg{width:16px;height:16px} @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} @media(prefers-reduced-motion:reduce){.pq2-cue .cue-a{animation:none}} /* ================================================================ POURQUOI SOFAST v3 — one centered persuasion column ================================================================ */ .pq3{background:var(--white);padding:clamp(4rem,9vh,7.5rem) var(--gutter); background-image:radial-gradient(42% 36% at 50% 0%,rgba(253,51,0,.05),transparent 70%)} .pq3-in{max-width:60rem;margin-inline:auto;text-align:center} .pq3-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(2.4rem,4.6vw,5rem);color:var(--ink)} .pq3-intro{color:var(--ink-soft);line-height:1.6;font-size:clamp(1rem,1.15vw,1.22rem); max-width:46ch;margin:1.2rem auto 0} .pq3-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .6rem; margin-top:clamp(1.6rem,3vh,2.2rem)} .pq3-pills .pain{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--grey-line); border-radius:100px;background:#fff;color:var(--ink-soft);font-weight:500; font-size:clamp(.88rem,1vw,1.02rem);padding:.7rem 1.25rem;box-shadow:var(--shadow-sm); transition:border-color .2s,color .2s,transform .2s} .pq3-pills .pain:nth-child(odd){transform:rotate(-1.2deg)} .pq3-pills .pain:nth-child(even){transform:rotate(1.2deg)} .pq3-pills .pain:hover{border-color:var(--orange);color:var(--orange-ink);transform:rotate(0) translateY(-2px)} .pq3-pills .pain .pd{width:6px;height:6px;border-radius:50%;background:var(--grey);flex:none} .pq3-pills .pain:hover .pd{background:var(--orange)} .pq3-p1{color:var(--grey);line-height:1.65;font-size:clamp(.95rem,1.02vw,1.1rem); max-width:58ch;margin:clamp(1.6rem,3vh,2.2rem) auto 0} /* seven become one */ .pq3-merge{position:relative;height:64px;margin:clamp(1.2rem,2.4vh,1.8rem) auto;max-width:420px} .pq3-merge .md{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#c9c9c9} .pq3-merge .m1{left:2%}.pq3-merge .m2{left:18%}.pq3-merge .m3{left:34%} .pq3-merge .m4{left:50%}.pq3-merge .m5{left:66%}.pq3-merge .m6{left:82%}.pq3-merge .m7{left:98%} .pq3-merge .mo{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%; background:var(--orange);box-shadow:0 0 0 7px var(--orange-tint);transform:scale(0)} .pq3-p2{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;color:var(--ink); line-height:1.38;font-size:clamp(1.3rem,2vw,1.95rem);max-width:34ch;margin:0 auto} .pq3-p2 strong{color:var(--orange-ink);font-weight:700} .pq3-cue{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:clamp(2rem,4vh,3rem)} .pq3-cue p{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--ink); font-size:clamp(1.05rem,1.4vw,1.45rem)} .pq3-cue .cue-a{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center;animation:cueBob 1.8s var(--ease-inout) infinite;flex:none} .pq3-cue .cue-a svg{width:15px;height:15px} @media(prefers-reduced-motion:reduce){.pq3-merge .mo{transform:scale(1)}.pq3-merge .md{opacity:.35}} /* ================================================================ POURQUOI SOFAST v4 — Kevin's comparison-card design ================================================================ */ .pq4{background:var(--white);padding:clamp(4rem,9vh,7.5rem) var(--gutter)} .pq4-head{text-align:center;max-width:56rem;margin-inline:auto} .pq4-eyebrow{display:inline-flex;align-items:center;gap:.9rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--orange-ink);font-size:clamp(.66rem,.8vw,.8rem)} .pq4-eyebrow i{display:block;width:34px;height:1.5px;background:var(--orange);opacity:.5} .pq4-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; font-size:clamp(2.4rem,4.6vw,5rem);color:var(--ink);margin-top:1.1rem} .pq4-intro{color:var(--ink-soft);line-height:1.6;font-size:clamp(1rem,1.15vw,1.22rem); max-width:46ch;margin:1.2rem auto 0} .pq4-cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.4vw,2.4rem); max-width:min(1500px,100%);margin:clamp(2.4rem,4.5vh,3.6rem) auto 0;align-items:stretch} @media(max-width:960px){.pq4-cards{grid-template-columns:1fr}} .pq4-card{border-radius:var(--radius-lg);padding:clamp(1.8rem,3vw,3rem);display:flex;flex-direction:column} .pq4-classic{background:var(--grey-bg2);border:1px solid var(--grey-line)} .pq4-lbl{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(.62rem,.75vw,.74rem); color:var(--grey)} .pq4-sofast .pq4-lbl{color:rgba(255,255,255,.55)} .pq4-seven{font-family:var(--font-display);font-weight:700;line-height:.85;color:#8a8a8a; /* 3.4:1 on #fafafa, large-text AA */ font-size:clamp(4.5rem,7vw,8rem);margin-top:1.4rem} .pq4-seven-l{color:var(--grey);font-size:clamp(1rem,1.15vw,1.2rem);margin-top:.5rem} .pq4-pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem} .pq4-pills .pain{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--grey-line); border-radius:100px;background:#fff;color:var(--ink-soft);font-weight:500; font-size:clamp(.85rem,.95vw,.98rem);padding:.65rem 1.15rem;transition:border-color .2s,color .2s} .pq4-pills .pain:hover{border-color:var(--orange);color:var(--orange-ink)} .pq4-pills .pain .pd{width:6px;height:6px;border-radius:50%;background:var(--grey);flex:none} .pq4-pain{color:var(--grey);line-height:1.65;font-size:clamp(.92rem,1vw,1.05rem); margin-top:auto;padding-top:1.6rem;border-top:1px solid var(--grey-line)} .pq4-sofast{background:#161616;color:#fff;position:relative;overflow:hidden} .pq4-sofast::after{content:"";position:absolute;top:-30%;right:-20%;width:70%;height:90%; background:radial-gradient(circle,rgba(253,51,0,.20),transparent 65%);pointer-events:none} .pq4-so-head{display:flex;align-items:center;gap:1.3rem;margin-top:1.6rem} .pq4-play{flex:none;width:clamp(64px,6vw,92px);height:clamp(64px,6vw,92px);border-radius:50%; background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-orange)} .pq4-play svg{width:36%;height:36%} .pq4-so-head h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.12; font-size:clamp(1.5rem,2.3vw,2.4rem)} .pq4-checks{list-style:none;margin:1.8rem 0 2rem;padding:0} .pq4-checks li{display:flex;align-items:center;gap:.9rem;padding:1rem 0; border-top:1px solid rgba(255,255,255,.12);font-weight:600;font-size:clamp(1rem,1.2vw,1.25rem)} .pq4-checks li:last-child{border-bottom:1px solid rgba(255,255,255,.12)} .pq4-checks .ck{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center} .pq4-checks .ck svg{width:13px;height:13px} .pq4-sofast .btn{align-self:flex-start;margin-top:auto} .pq4-bridge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md); display:grid;place-items:center;color:var(--orange)} .pq4-bridge svg{width:20px;height:20px} @media(max-width:960px){.pq4-bridge{display:none}} .pq4-res{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;color:var(--ink); line-height:1.4;font-size:clamp(1.2rem,1.8vw,1.7rem);max-width:44ch;text-align:center; margin:clamp(2.4rem,4.5vh,3.6rem) auto 0} .pq4-res strong{color:var(--orange-ink);font-weight:700} .pq4-cue{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:clamp(1.8rem,3.5vh,2.6rem)} .pq4-cue p{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--ink); font-size:clamp(1.05rem,1.4vw,1.45rem)} .pq4-cue .cue-a{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center;animation:cueBob 1.8s var(--ease-inout) infinite;flex:none} .pq4-cue .cue-a svg{width:15px;height:15px} /* ================================================================ INTERIOR PAGES — editorial hero + photo media tiles (rollout) ================================================================ */ .ph{position:relative;overflow:hidden;background: radial-gradient(50% 44% at 88% 0%,rgba(253,51,0,.06),transparent 70%),var(--white); padding:clamp(7rem,11vh,9rem) var(--gutter) clamp(2.5rem,5vh,4rem)} .ph-in{max-width:none} .ph .crumb{margin-bottom:1.6rem} .ph-eyebrow{display:flex;align-items:center;gap:.9rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;font-size:clamp(.62rem,.75vw,.8rem);color:var(--grey)} .ph-eyebrow::before{content:"";width:34px;height:2px;background:var(--orange)} .ph-eyebrow .ld{width:9px;height:9px;border-radius:50%;background:var(--orange); animation:livePulse 1.8s var(--ease-out) infinite;order:-1} .ph-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1; color:var(--ink);font-size:clamp(2.6rem,5.2vw,6rem);margin-top:1.7rem;max-width:22ch} .ph-sub{color:var(--ink-soft);line-height:1.64;font-size:clamp(1.02rem,1.15vw,1.22rem); max-width:62ch;margin-top:1.4rem} .ph .hero-actions{margin-top:2rem} /* photo media tile (image + preserved caption) */ .mt2{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:#111; box-shadow:0 30px 80px rgba(26,26,26,.2)} .mt2 img{width:100%;height:100%;object-fit:cover;display:block} .mt2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,8,.82))} .mt2-cap{position:absolute;left:clamp(1.2rem,2vw,2rem);right:1.2rem;bottom:clamp(1rem,1.8vw,1.6rem);z-index:2;color:#fff} .mt2-big{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.3rem,1.9vw,2rem)} .mt2-cap p{color:rgba(255,255,255,.75);margin-top:.35rem;font-size:clamp(.9rem,1vw,1.05rem)} /* interior sections: bigger headers */ .h2{font-size:clamp(2rem,3.4vw,3.6rem);letter-spacing:-.025em} .sec-head p{font-size:clamp(1rem,1.15vw,1.25rem)} /* ---------- channel logo wall (trust bar; placeholder logos until Yanai's) ---------- */ .lgw{background:var(--white);border-bottom:1px solid var(--grey-line);padding:clamp(2.8rem,5.5vh,4.5rem) var(--gutter)} .lgw-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(1.2rem,2.2vw,2.4rem) clamp(1rem,2vw,2rem); max-width:min(1500px,100%);margin-inline:auto;align-items:center} @media(max-width:1100px){.lgw-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:720px){.lgw-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:480px){.lgw-grid{grid-template-columns:repeat(2,1fr)}} .lgw-c{position:relative;display:grid;place-items:center;min-height:56px;cursor:default} .lgw-c img{max-height:clamp(26px,2.6vw,40px);max-width:78%;width:auto;height:auto; transition:transform .25s var(--ease-out)} .lgw-c:hover img,.lgw-c:focus-visible img{transform:scale(1.08)} /* hover card: country + one-liner */ .lgw-tip{position:absolute;bottom:calc(100% + 12px);left:50%; transform:translate(calc(-50% + var(--tx,0px)),8px) scale(.96); width:min(240px,74vw);background:#fff;border:1px solid var(--grey-line);border-radius:14px; box-shadow:var(--shadow-lg);padding:.9rem 1.05rem;text-align:left;opacity:0;pointer-events:none; display:none;transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);z-index:20} .lgw-tip.show{display:block} .lgw-tip.in{opacity:1;transform:translate(calc(-50% + var(--tx,0px)),0) scale(1)} .lgw-tip::after{content:"";position:absolute;top:100%;left:calc(50% - var(--tx,0px));margin-left:-6px; border:6px solid transparent;border-top-color:#fff} .lgw-tip .lt-c{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;font-size:.62rem;color:var(--orange-ink)} .lgw-tip .lt-c::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)} .lgw-tip p{color:var(--ink-soft);font-size:.84rem;line-height:1.45;margin-top:.35rem} /* marquees pause when offscreen (JS IntersectionObserver toggles .io-off) */ .io-off .partner-track{animation-play-state:paused!important} .io-off .logo-track{animation-play-state:paused!important} /* ---------- text-free mockup skeletons (no invented words rule) ---------- */ .ott-sk,.wl-sk{display:block;border-radius:6px;background:rgba(255,255,255,.85)} .ott-sk.sk-1,.wl-sk.sk-1{width:clamp(90px,9vw,150px);height:clamp(10px,1.2vw,16px);margin-top:.55rem;opacity:.85} .ott-sk.sk-2,.wl-sk.sk-2{width:clamp(140px,15vw,240px);height:clamp(14px,1.9vw,26px);margin:.45rem 0 .65rem} .ott-play,.wl-play{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);padding:0;border-radius:50%;justify-content:center} .ott-rail-sk{display:block;width:clamp(90px,10vw,150px);height:clamp(9px,1vw,13px);border-radius:6px; background:rgba(255,255,255,.28);margin-bottom:.45rem} .wl-nb{display:inline-block;width:clamp(26px,2.6vw,40px);height:7px;border-radius:4px;background:rgba(255,255,255,.35)} .wl-nb.on{background:#fff;position:relative} .wl-nb.on::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--wayo)} .wl-clock-sk{display:inline-block;width:34px;height:8px;border-radius:4px;background:rgba(255,255,255,.3)} .ott-live,.wl-live{min-width:22px;justify-content:center} /* ---------- mobile ergonomics (from the audit) ---------- */ @media(max-width:640px){ .ph .hero-actions,.hh .hero-actions{width:100%} .ph .hero-actions .btn,.hh .hero-actions .btn{width:100%;justify-content:center} .ph .hero-actions .magnetic,.hh .hero-actions .magnetic{width:100%;display:block} .steps-nav .lbl{display:none} .form-nav{flex-direction:column-reverse;gap:.7rem} .form-nav .btn{width:100%} .stmt-in{text-align:left} .stmt-in::before{margin-left:0} .cta-banner{text-align:left} .cta-banner p{margin-left:0} .cta-banner .hero-actions{justify-content:flex-start} .pq4-head{text-align:left} .pq4-intro{margin-left:0} .pq4-res{text-align:left;margin-left:0} .pq4-cue{justify-content:flex-start} .form-card .muted{font-size:.85rem!important} .arrow-link{padding:.55rem 0} } /* ---------- Master 9.9 sections ---------- */ /* Pour qui: feature lists + CTA rows inside the aud2 cards */ /* Proprietary Technology */ .ptec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.2rem} .ptec-card{background:#fff;border:1px solid var(--grey-line);border-radius:1.1rem;padding:2rem 1.9rem;display:flex;flex-direction:column;align-items:flex-start} .ptec-card.is-big{grid-row:span 2} .ptec-name{display:inline-block;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink);background:var(--orange-tint,#FFF2EF);border-radius:2rem;padding:.3rem .8rem} .ptec-card h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,1.6vw,1.6rem);line-height:1.15;margin:1rem 0 .5rem} .ptec-sub{color:var(--grey);line-height:1.6;margin:0 0 1rem} .ptec-list{list-style:none;margin:.2rem 0 1rem;padding:0;display:grid;gap:.4rem} .ptec-list li{position:relative;padding-left:1.35rem;color:var(--ink-soft,#404142);font-size:.93rem;line-height:1.45} .ptec-list li::before{content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.62rem;border-radius:.2rem;background:var(--orange)} .ptec-proof{font-size:.9rem;color:var(--grey);border-left:3px solid var(--orange);padding-left:.9rem;margin:0 0 1.2rem;line-height:1.55} .ptec-cta{margin-top:auto} @media(max-width:960px){.ptec-grid{grid-template-columns:1fr}.ptec-card.is-big{grid-row:auto}} /* Why SoFast value chain */ .whys-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;margin-top:2.2rem} .whys-cell{display:flex;flex-direction:column;gap:.55rem;background:var(--grey-bg2,#fafafa);border:1px solid var(--grey-line);border-radius:.9rem;padding:1.15rem 1.1rem;transition:transform .25s ease,border-color .25s ease} .whys-cell:hover{transform:translateY(-3px);border-color:var(--orange)} .whys-n{font-family:var(--font-display);font-weight:700;color:var(--orange-ink);font-size:.95rem} .whys-t{font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.3} @media(max-width:1100px){.whys-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.whys-grid{grid-template-columns:repeat(2,1fr)}} /* WAYO repositioning */ .wayo-sig{color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.02em;margin:0 0 1rem} .wayo-caps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem} .wayo-cap{display:inline-block;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.92);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:2rem;padding:.34rem .78rem;line-height:1.3} /* White-Label & Technology Partners */ .wlb{background:var(--grey-bg,#F4F5F5);border-radius:1.3rem;padding:clamp(2rem,4vw,3.4rem)} .wlb-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem} .wlb-chip{display:inline-block;font-size:.86rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--grey-line);border-radius:2rem;padding:.42rem .95rem} /* language picker */ .lang-pick{display:flex;gap:.15rem;align-items:center;margin-right:.35rem} .lp{font-family:var(--font-display);font-weight:600;font-size:.82rem;letter-spacing:.05em;padding:.35rem .55rem;border-radius:.55rem;color:var(--grey);border-bottom:none} .lp:hover{color:var(--orange-ink)} .lp.is-on{color:var(--ink);background:var(--grey-bg,#F4F5F5)} .lang-pick-mob{margin:0 0 .4rem} .mobile-panel .lang-pick-mob a{display:inline-flex;border-bottom:none;font-size:1rem;padding:.45rem .7rem} /* text safety: headings never clip inside their cards */ .pq4-so-head h3{text-wrap:balance;overflow-wrap:break-word;min-width:0} .pq4-card{min-width:0} /* ========================================================================= V2 — OFFICIAL PALETTE ("SoFast Website — Color Guidelines V1", client doc). Supersedes the cahier des charges §8 blue palette: newer always wins. Governing principle: orange is the brand and primary-action colour; Electric Blue is a functional accent for technology, data and secondary interface states only — it never carries a primary CTA, never competes with orange at equal weight, never becomes a large decorative surface. Every combination below is WCAG 2.2 AA verified (ratios in comments). ========================================================================= */ .v2{--orange:#FD3300; /* Orange SoFast — brand, key figures, accents */ --orange-600:#D62B00; /* accessible orange: 4.99:1 both ways vs white */ --orange-700:#B02400; /* hover for orange-600 surfaces (6.78:1) */ --orange-tint:#FFF2EF; /* soft orange surface (orange-600 on it 4.57:1) */ --orange-ink:var(--orange-600); /* orange TEXT on light grounds */ --blue:#287CFF; /* Electric Blue — tech / data / secondary UI */ --blue-600:#1766D8; /* accessible blue text: 5.35:1 on white */ --blue-soft:#EAF2FF; --grey:#6E7376;--grey-bg:#F4F5F5; --night:#17191B; /* Graphite — dark sections */ --night-2:#1B1D1F; /* raised graphite (orange on it 4.55:1) */ --d-ink:#F4F5F5;--d-mut:#A9AEB2;--d-line:rgba(244,245,245,.12)} /* on graphite the brand orange itself clears AA (4.74:1), so orange text there keeps #FD3300 instead of the darkened light-ground variant */ .v2 .dark,.v2 .band-night,.v2 .site-footer,.v2 .cta-banner,.v2 .hh2, .v2 .pq4-sofast,.v2 .media-frame,.v2 .manifeste,.v2 .manif, .v2 .consent-banner{--orange-ink:var(--orange)} /* Gris SoFast is 4.39:1 on Light Grey and 4.42:1 on the interior hero's orange wash (#fff3f0) — darken it on those surfaces (5.16:1 / 5.19:1) */ .v2 .soft,.v2 .pq,.v2 .wlb,.v2 .ph,.v2 .mega a:hover{--grey:#63686B} /* dark sections all sit on Graphite */ .v2 .dark,.v2 .media-frame,.v2 .manifeste{background:var(--night)} /* ---- hero (night ground) ---- */ .v2 .hh2{background:radial-gradient(58% 50% at 82% 0%,rgba(253,51,0,.14),transparent 70%),var(--night);color:var(--d-ink)} .v2 .hh2 .hh-tag{color:var(--d-mut)} .v2 .hh2 .hh-tag::before{background:var(--orange)} .v2 .hh2 .hh-tag .ld{background:var(--orange)} .v2 .hh2 .hh-h1{color:#fff} .v2 .hh2 .hh-h1 em.cy{color:var(--orange)} /* 4.74:1 on graphite, display size */ .v2 .hh2 .hh-lead{color:var(--d-mut)} .v2 .hh2 .btn-ghost{color:#fff;border-color:rgba(244,245,245,.35)} .v2 .hh2 .btn-ghost:hover{border-color:#fff;background:rgba(244,245,245,.08)} .hh2-proofs{display:flex;gap:clamp(1.6rem,4vw,3.4rem);align-items:flex-end;flex-wrap:wrap;margin-top:2.6rem} .hh2-proofs .hp{display:flex;flex-direction:column;gap:.15rem} .hp-n{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1} .hp-l{font-size:.86rem;color:var(--d-mut)} .hh2-mapwrap{margin:3.4rem calc(-1 * var(--gutter)) 0} /* lowered per Yanai QA */ .hh2-map{position:relative;width:100%;aspect-ratio:2.9/1;overflow:hidden} .hh2-map svg{width:100%;height:100%;display:block} .hh2-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--night),transparent 30%)} .hh2-map .node-pulse{transform-box:fill-box;transform-origin:center;animation:mapPulse 2.6s var(--ease-out) infinite} .hh2-map .node-pulse.p2{animation-delay:.5s}.hh2-map .node-pulse.p3{animation-delay:1s} .hh2-map .node-pulse.p4{animation-delay:1.5s}.hh2-map .node-pulse.p5{animation-delay:.8s} .hh2-map .node-pulse.p6{animation-delay:2s} .hh2-map .arc{stroke-dasharray:1;stroke-dashoffset:1;opacity:.6;animation:arcDraw 6.5s linear infinite} .hh2-map .arc.a2{animation-delay:1.2s}.hh2-map .arc.a3{animation-delay:2.4s} .hh2-map .arc.a4{animation-delay:3.6s}.hh2-map .arc.a5{animation-delay:4.8s} @keyframes arcDraw{0%{stroke-dashoffset:1;opacity:0}12%{opacity:.6}55%{stroke-dashoffset:0;opacity:.6}85%{opacity:0}100%{stroke-dashoffset:0;opacity:0}} @media (prefers-reduced-motion:reduce){ .hh2-map .arc{animation:none;stroke-dashoffset:0;opacity:.5} .hh2-map .node-pulse{animation:none} } /* ---- platform logo band (authorized pack, client 2026-08-21) ------------- Two continuous rows of uniform white tiles. The box and its padding are identical for every mark, which IS the "espace de protection uniforme" the brand guidelines require: no crop, no tint, no hover recolour, so no logo is ever distorted. Assets are 320x120 and display at 160x60, i.e. 2x. */ .logo-marquee{margin-top:1.5rem;overflow:hidden;width:100%;max-width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .logo-row+.logo-row{margin-top:.7rem} .logo-track{display:flex;width:max-content;animation:chanScroll 120s linear infinite} .logo-row-b .logo-track{animation-duration:150s;animation-direction:reverse} .logo-marquee:hover .logo-track{animation-play-state:paused} .logo-set{display:flex;gap:.7rem;padding-right:.7rem} .logo-tile{flex:none;width:160px;height:60px;display:flex;align-items:center;justify-content:center; padding:10px 16px;background:#fff;border:1px solid var(--grey-line);border-radius:10px} .logo-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block} @media (max-width:640px){.logo-tile{width:132px;height:52px;padding:8px 12px}} /* ---- platform band ---- */ .platband{padding:2.6rem 0 2.2rem;border-bottom:1px solid var(--grey-line)} .platband-cap{text-align:center;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--grey);margin:0 0 1.2rem} /* ---- two journeys ---- */ .jour-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:1160px;margin:0 auto} .jour{background:var(--white);border:1px solid var(--grey-line);border-left:3px solid var(--orange);border-radius:var(--radius);padding:2rem 2.2rem;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)} .jour:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,22,38,.10)} .jour-k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--grey)} .jour h3{font-family:var(--font-display);font-size:clamp(1.3rem,1.9vw,1.65rem);letter-spacing:-.01em;margin:.7rem 0 .5rem} .jour p{color:var(--ink-soft);line-height:1.62;margin:0 0 1.2rem} @media (max-width:860px){.jour-grid{grid-template-columns:1fr}} /* ---- 4 pillars ---- */ .pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .pillar{border:1px solid var(--grey-line);border-radius:var(--radius);padding:1.8rem 1.6rem;background:var(--white);display:flex;flex-direction:column;gap:.6rem;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out)} .pillar:hover{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 18px 44px rgba(10,22,38,.08)} .pillar-ico{width:44px;height:44px;border-radius:11px;background:var(--orange-tint);color:var(--orange);display:grid;place-items:center} .pillar-ico svg{width:22px;height:22px} .pillar h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:-.01em} .pillar p{color:var(--ink-soft);font-size:.94rem;line-height:1.6;flex:1;margin:0} @media (max-width:1080px){.pillar-grid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.pillar-grid{grid-template-columns:1fr}} /* ---- night bands ---- */ .band-night{background:var(--night);color:var(--d-ink);padding:clamp(4rem,7vw,6.5rem) var(--gutter)} .band-night .h2{color:#fff} .band-night .eyebrow{color:var(--orange)} .band-night .btn-ghost{color:#fff;border-color:rgba(244,245,245,.35)} .band-night .btn-ghost:hover{border-color:#fff;background:rgba(244,245,245,.08)} /* ---- catalogue band ---- */ .catb-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.2rem,5vw,4.6rem);align-items:center;max-width:var(--maxw);margin:0 auto} .catb-copy p{color:var(--d-mut);max-width:44ch;margin:.9rem 0 1.7rem;line-height:1.62} .catb-list{display:flex;flex-direction:column} .catb-row{display:flex;align-items:baseline;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid var(--d-line)} .catb-row:first-child{border-top:1px solid var(--d-line)} .catb-name{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.4rem);color:#fff;letter-spacing:-.01em} .catb-line{flex:1;border-bottom:1px dashed rgba(244,245,245,.16);transform:translateY(-.28em)} .catb-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--orange);font-size:1.15rem} @media (max-width:960px){.catb-grid{grid-template-columns:1fr}} /* ---- hybrid distribution ---- */ .hyb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .hyb-col{border:1px solid var(--grey-line);border-radius:var(--radius);padding:1.5rem 1.4rem;background:var(--grey-bg2)} .hyb-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;color:var(--orange)} .hyb-head svg{width:20px;height:20px;flex:0 0 auto} .hyb-head h3{font-size:1.04rem;font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em} .hyb-chips{display:flex;flex-wrap:wrap;gap:.45rem} .hyb-chip{font-size:.8rem;padding:.34rem .72rem;border:1px solid var(--grey-line);border-radius:99px;background:var(--white);color:var(--ink-soft)} @media (max-width:1080px){.hyb-grid{grid-template-columns:1fr 1fr}} @media (max-width:640px){.hyb-grid{grid-template-columns:1fr}} /* ---- value chain flow ---- */ .vch-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem} .vch{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius);padding:1.25rem 1.1rem;position:relative} .vch-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem} .vch-head .vch-n{margin-bottom:0} .vch-ic svg{width:22px;height:22px;color:var(--orange);display:block} .vch:not(:last-child)::after{content:"";position:absolute;right:-0.82rem;top:50%;width:.64rem;height:2px;background:var(--orange)} /* step numbers render at 10.9px/700 — not WCAG "large", so #FD3300 (3.72:1) gives way to the accessible orange ink #D62B00 (4.99:1) */ .vch-n{font-size:.68rem;font-weight:700;color:var(--orange-ink);letter-spacing:.12em;font-variant-numeric:tabular-nums} .vch-t{display:block;font-family:var(--font-display);font-weight:600;font-size:1.06rem;margin:.32rem 0 .2rem;letter-spacing:-.01em} .vch-s{font-size:.8rem;color:var(--grey);line-height:1.45} @media (max-width:1080px){.vch-flow{grid-template-columns:repeat(3,1fr)}.vch:nth-child(3)::after{display:none}} @media (max-width:640px){.vch-flow{grid-template-columns:1fr 1fr}.vch::after{display:none}} /* ---- final dual CTA ---- */ .cta2{text-align:center} .cta2 .h2{max-width:24ch;margin:0 auto 2.1rem;text-wrap:balance} .sec-head h2{text-wrap:balance} .cta2-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .cta2-note{margin-top:1.5rem;color:var(--d-mut);font-size:.86rem} html.v2.header-on-dark .site-header:not(.scrolled) .nav-links a.active{text-decoration-color:var(--orange)} /* v2 hero: slightly tighter display size so the three-line promise holds its lines */ .v2 .hh2 .hh-h1{font-size:clamp(2.4rem,4.6vw,5.2rem)} /* Archivo Expanded runs wider: sized so the FR hero holds 3 lines */ /* the "with SoFast" card sits on raised graphite with an orange halo */ .v2 .pq4-sofast{background:var(--night-2)} .v2 .pq4-sofast::after{background:radial-gradient(circle,rgba(253,51,0,.20),transparent 65%)} .v2{--shadow-orange:0 16px 44px rgba(253,51,0,.26)} .v2 .btn-primary:hover{box-shadow:0 20px 52px rgba(214,43,0,.34)} @media (max-width:640px){.hh2-map{aspect-ratio:1.9/1}} /* ---- v2 sitewide: graphite dark bands + orange decorative glows ---- */ .v2 .site-footer,.v2 .cta-banner{background:var(--night)} .v2 .footer-sig{color:var(--orange)} /* #FD3300 on #17191B = 4.74:1 at .78rem/700 */ .v2 .cta-banner .orb{background:radial-gradient(circle,rgba(253,51,0,.45),transparent 70%)} .v2 .orb-1{background:radial-gradient(circle,rgba(253,51,0,.22),transparent 70%)} .v2 .orb-2{background:radial-gradient(circle,rgba(253,51,0,.10),transparent 70%)} .v2 .hl-glow{background:radial-gradient(circle,rgba(253,51,0,.07),transparent 66%)} .v2 .dark .checks li .ck{background:rgba(253,51,0,.20)} .v2 .dark .badge{background:rgba(253,51,0,.18);color:#fff} .v2 .mv-cell.on{box-shadow:0 0 0 2px var(--orange),0 14px 30px rgba(253,51,0,.22)} /* ---- Electric Blue's only sitewide homes: secondary text links ---- */ .v2{--blue-700:#1250AE} .v2 .legal-block a:hover{color:var(--blue-700)} /* 7.54:1 — hover darkens, per doc */ /* ========================================================================= V2 conversion layer (cahier §11 / §15) ========================================================================= */ /* ---- consent banner: night ground, electric primary, unobtrusive. No animation (prefers-reduced-motion honored by construction). ---- */ .consent-banner{position:fixed;z-index:1400;bottom:1rem;right:1rem;max-width:26rem; background:var(--night,#17191B);color:#fff;border:1px solid rgba(244,245,245,.14); border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:0 18px 50px rgba(10,22,38,.38)} .consent-banner .cb-text{font-size:.85rem;line-height:1.55;color:rgba(244,245,245,.85);margin:0 0 .9rem} .consent-banner .cb-text a{color:#fff;text-decoration:underline;text-underline-offset:2px} .consent-banner .cb-text a:hover{color:var(--blue,#287CFF)} /* secondary text link — 4.55:1 on graphite */ .cb-actions{display:flex;gap:.6rem;flex-wrap:wrap} .cb-actions .cb-btn{padding:.55rem 1.05rem;font-size:.85rem;min-height:40px;display:inline-flex;align-items:center;justify-content:center} .cb-actions .btn-ghost{color:#fff;border-color:rgba(244,245,245,.4)} .cb-actions .btn-ghost:hover{border-color:#fff;background:rgba(244,245,245,.08)} .consent-banner .cb-btn:focus-visible{outline:2px solid var(--orange,#FD3300);outline-offset:2px} @media (max-width:640px){ .consent-banner{left:0;right:0;bottom:0;max-width:none;border-radius:0; border-left:0;border-right:0;border-bottom:0;padding:1rem var(--gutter)} } /* ---- contact form: consent checkbox + reassurance list (§15) ---- */ .field-consent .consent-label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer; font-weight:400;font-size:.85rem;line-height:1.55;color:var(--grey);margin:0} .field-consent input[type=checkbox]{flex-shrink:0;width:18px;height:18px;margin-top:.15rem; accent-color:var(--orange);cursor:pointer} .field-consent.invalid .consent-label{color:#d32f2f} .checks.checks-compact{gap:.55rem} .checks.checks-compact li{font-size:.92rem;color:var(--ink-soft)} .checks.checks-compact li .ck{width:20px;height:20px} .checks.checks-compact li .ck svg{width:12px;height:12px} /* ---- thank-you page (§15): numbered next steps + follow-up links ---- */ .ty-steps{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin:0;padding:0;counter-reset:none} .ty-steps li{display:flex;gap:1.1rem;align-items:flex-start;background:var(--white); border:1px solid var(--grey-line);border-radius:var(--radius);padding:1.25rem 1.4rem} .ty-steps .ty-n{flex-shrink:0;font-family:var(--font-display);font-weight:700;font-size:1rem; color:var(--orange-ink);border:1.5px solid var(--orange-tint);background:var(--orange-tint); border-radius:10px;width:2.2rem;height:2.2rem;display:grid;place-items:center} .ty-steps p{margin:0;line-height:1.6;color:var(--ink-soft)} .ty-links{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start} /* Heading-to-text rhythm: guaranteed breathing room after every section head (the h2 keeps 1.1rem; its sub paragraph and whatever follows never sit closer) */ .sec-head p{margin-top:0} .sec-head+.nl-form{margin-top:1.8rem} .tl-item h3{margin-bottom:.55rem} /* ================================================================ Homepage photography (client request 2026-08-21: "Nous sommes quand même dans le Streaming Business"). Three real images below the fold — journey card banners, the hybrid-distribution reach map, the catalogue living room. All lazy, all cropped in CSS so the source ratios never dictate the layout, none of them adds motion. Palette untouched: graphite grounds, orange hairlines. ================================================================ */ /* every homepage behaves like a block-level image box */ .jour-pic picture,.hyb-map picture,.catb-pic picture{display:block;height:100%} .jour-pic img,.hyb-map img,.catb-pic img{display:block;width:100%;height:100%;object-fit:cover} /* ---- journeys: banner at the top of each card ---- */ /* the card loses its uniform padding so the banner can bleed to the edges; the copy gets it back through .jour-body. overflow:hidden clips the banner to the card radius, and the 3px orange left rule survives as the card's signature. */ .jour{padding:0;overflow:hidden} .jour-pic{aspect-ratio:16/9;background:var(--night);position:relative} /* a graphite hairline under the banner separates image from copy on white without introducing a new colour */ .jour-pic::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--grey-line)} .jour-body{padding:1.7rem 2.2rem 2rem} /* devices-lineup is 1152x896: bias the 16/9 crop slightly below centre so the TV keeps headroom at the top and the phone keeps its base */ .jour:nth-child(2) .jour-pic img{object-position:50% 46%} @media (max-width:640px){.jour-body{padding:1.4rem 1.5rem 1.6rem}} /* ---- hybrid distribution: capabilities 2x2 + reach map ---- */ .hyb-split{display:grid;grid-template-columns:1.12fr .88fr; gap:clamp(1.4rem,2.6vw,2.8rem);align-items:stretch;margin-top:2.4rem} .hyb-split .hyb-grid{grid-template-columns:1fr 1fr;align-content:start} /* the map is a panel, not a block of content: taking it out of flow means the row height comes from the 2x2 capability block, so the panel ends exactly level with the last column instead of overhanging it */ .hyb-map{position:relative;border-radius:var(--radius);overflow:hidden; background:var(--night);border:1px solid var(--grey-line);min-height:320px} .hyb-map picture{position:absolute;inset:0} @media (max-width:1080px){ .hyb-split{grid-template-columns:1fr;gap:1.6rem} .hyb-split .hyb-grid{grid-template-columns:1fr 1fr} /* as a full-width band the map must not run away vertically */ .hyb-map{min-height:0;aspect-ratio:2.4/1} } @media (max-width:640px){ .hyb-split .hyb-grid{grid-template-columns:1fr} .hyb-map{aspect-ratio:16/10} } /* ---- catalogue band: living room under the CTA ---- */ /* dark image on graphite, so it needs a frame rather than a scrim: a rounded corner plus a hairline in the band's own line colour. */ .catb-pic{margin-top:clamp(1.8rem,3vw,2.6rem);aspect-ratio:16/9; border-radius:var(--radius);overflow:hidden;border:1px solid var(--d-line); background:var(--night-2)} /* the copy column is now the taller one. Spreading the five rows over that height detaches each rule from its label, so instead the rundown keeps its own rhythm and centres against the copy+image stack — the same balance the band had before the picture arrived. */ .catb-grid{align-items:stretch} .catb-list{justify-content:center} /* stacked, the grid gap already separates the frame from the rundown */ @media (max-width:960px){ .catb-pic{margin-bottom:0} } /* ========================================================================= MOBILE TAP TARGETS & NARROW-SCREEN SAFETY (2026-08-21 mobile/a11y audit) Deliberately at the end of the file: the .lang-pick / .lp and .btn base rules live further up, and these mobile values have to win the cascade. ========================================================================= */ /* ---- language picker: WCAG 2.2 "Target Size (Minimum)" ---- Measured before: 35.4x40 (FR) and 36.8x40 (EN) with a 2.4px gap. */ @media (max-width:1200px){ .lang-pick{gap:.5rem} .lp{display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:.6rem .8rem} } /* ---- consent banner: match the 44px bar the burger already sets ---- */ .cb-actions .cb-btn{min-height:44px} /* ---- long CTA labels must not push the page sideways ---- .btn is white-space:nowrap, so "Add SoFast to Your Offering" (294px at btn-lg) overran a 320px viewport by 36px. Below 420px the label wraps instead, and grid/flex children stop refusing to shrink. */ @media (max-width:420px){ .btn{white-space:normal;text-align:center;line-height:1.25;max-width:100%} .btn-lg{padding:1.05rem 1.4rem} .ptec-grid > *,.mon-list > *,.hyb-grid > *,.vch-flow > *,.wlb > *{min-width:0} } /* ============ ARCHIVO SYSTEM (client directive 2026-08-26) ============ One font, three real width cuts. font-stretch inherits, so body sets the text cut and the two layers below re-cut titles and UI. font-synthesis is disabled site-wide: no faux bold, no faux italic ("aucune deformation artificielle") - the italic pull-quote cues load the real Archivo Italic. */ html{font-synthesis:none} body{font-stretch:var(--w-text)} /* ---- Titres: Expanded 118 / 700 ---- */ .display,.h2,.h3,.hh-h1,.ph-h,.mt2-big,.hero-kicker,.hh-kick, .mv-title,.card h3,.aud-card h3,.vc-step h3,.wf-item h4,.tl-item h3, .team-card h4,.faq-q,.cta-banner h2,.legal-block h2,.gl-item dt, .form-success h3,.news-card h3,.mon-item h4,.sol-head,.manifeste h2, .ott-feat-in h4,.wl-hero-in h5,.pq-h,.manif-in h2,.pq2-h,.pq2-p2, .pq3-h,.pq3-p2,.pq4-h,.pq4-so-head h3,.pq4-seven,.pq4-res,.stmt-in p, .spr-h,.ptec-card h3,.jour h3,.pillar h3,.hyb-head h3,.vch-t{ font-stretch:var(--w-title);font-weight:700} /* ---- Textes: 100 / 400-500 (italic accents stay width 100) ---- */ .pain-lead-in,.pq-lead,.pq2-cue p,.pq3-cue p,.pq4-cue p{ font-stretch:var(--w-text);font-weight:500} /* ---- Nav, boutons, donnees: Narrow 76 / 600, capitales interlettrees. Numbers get the narrow cut and tracking without a case transform (digits have no case); brand/platform name strips get the narrow cut but keep their true casing (a partner's name is not "data"). ---- */ .nav-links a,.nav-links button.navitem,.mobile-panel a,.mega a strong, .mega-col-title,.btn,.call-pill,.lp,.fl-opt,.fl-current strong, .crumb,.crumb a,.eyebrow,.nc-cat,.pill{ font-family:var(--font-display);font-stretch:var(--w-ui);font-weight:600; text-transform:uppercase;letter-spacing:.07em} .stat .num,.card-num,.aud-card .num-tag,.vc-node .vc-lab,.vc-step .step-n, .tl-year,.footer-stats .fs .n,.bignum .n,.sol-num,.spr-num,.whys-n, .hp-n,.mv-cell .mv-n,.floating-badge .fb-num,.oa-tally,.ty-steps .ty-n, .avatar,.vch-n{ font-stretch:var(--w-ui);font-weight:600;letter-spacing:.03em} .marquee-item,.catb-name,.ott-brand,.ott-tile .ott-ch,.wl-logo,.nc-mark{ font-stretch:var(--w-ui);font-weight:600} /* Narrow caps read small: give nav and buttons back a step of size — but ONLY above the compact tier. Between 1201 and 1560 the header is width-critical: localized nav labels run up to 30% longer than English (fil 112 chars vs en 86), and the UI cut's uppercase + .07em tracking widens every label further. A flat font-size here silently overrode the compact tier further up the file (later source order, equal specificity) and pushed the CTA off-screen in fr/es/pt/fil. The compact tier owns sizing in that band; tracking drops to .03em there to buy back width. */ @media (min-width:1561px){ .nav-links a,.nav-links button.navitem{font-size:.88rem} } @media (min-width:1201px) and (max-width:1560px){ .nav-links a,.nav-links button.navitem{font-size:.79rem;padding:.5rem .26rem;letter-spacing:.03em} .nav-cta .btn{font-size:.79rem;padding:.55rem .82rem} .lp-btn{padding:.4rem .62rem;font-size:.79rem;letter-spacing:.03em} } .btn{font-size:.88rem} /* Mega entries live inside .nav-links, so the caps rule reaches them: the entry TITLE (strong) keeps the UI cut, but the descriptive subtitle is body text - reset it to the Textes cut. */ .mega a span{text-transform:none;letter-spacing:normal;font-stretch:var(--w-text);font-weight:400} .mega .mega-col-title{font-stretch:var(--w-ui)} /* ============ MULTILINGUAL CHROME (cahier localization, 2026-08-26) ============ */ /* Header language dropdown: replaces the two FR/EN pills. Same open/close contract as the mega menu (class .open + aria-expanded via initLangPick). */ .lang-pick.has-langs{position:relative} .lp-btn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:1px solid var(--grey-line);border-radius:100px;padding:.45rem .85rem;cursor:pointer;color:var(--ink);font-family:var(--font-display);transition:border-color var(--ti),background var(--ti)} .lp-btn:hover{border-color:var(--grey)} .lp-btn .chev{width:13px;height:13px;transition:transform var(--ti)} .lang-pick.open .lp-btn .chev{transform:rotate(180deg)} .header-on-dark:not(.nav-open) .site-header:not(.scrolled) .lp-btn{color:#fff;border-color:rgba(255,255,255,.35)} .lp-menu{position:absolute;top:calc(100% + .55rem);right:0;min-width:200px;background:#fff;border:1px solid var(--grey-line);border-radius:14px;box-shadow:var(--shadow-md);padding:.45rem;display:none;z-index:60} .lang-pick.open .lp-menu{display:block} .lp-opt{display:block;padding:.5rem .8rem;border-radius:9px;color:var(--ink);font-size:.92rem;transition:background var(--ti)} .lp-opt:hover{background:var(--grey-bg,#F4F5F5)} .lp-opt.is-on{color:var(--orange-ink);font-weight:600} /* native names keep their own casing and script: no caps, no tracking */ .lp-opt{text-transform:none;letter-spacing:0;font-stretch:var(--w-text);font-weight:500} /* Mobile panel language row */ .mob-langs{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 .4rem} .mob-langs .ml{display:inline-flex;align-items:center;border:1px solid var(--grey-line);border-radius:100px;padding:.4rem .8rem;font-size:.78rem;color:var(--ink)} .mob-langs .ml.is-on{border-color:var(--orange);color:var(--orange-ink);font-weight:700} /* Footer switcher: all real links now (roadmap pills stay greyed if any) */ .footer-langs .fl-opt{text-transform:none;letter-spacing:0} /* ---- Script-specific typography ---- Arabic is a connected script and Thai has no letter case: forced uppercase and tracking are typographic errors there. Reset the UI-cut trio on those trees and give each script its system companion faces (Archivo has Latin only; the fallback carries the native script). */ html[lang="ar"] body,html[lang="th"] body{letter-spacing:0} html[lang="ar"] *,html[lang="th"] *{letter-spacing:0!important;text-transform:none!important} html[lang="ar"] body{font-family:'Archivo','SF Arabic','Geeza Pro','Segoe UI','Noto Sans Arabic',sans-serif} html[lang="th"] body{font-family:'Archivo','Thonburi','Noto Sans Thai','Leelawadee UI',sans-serif} html[lang="ar"] .hh-h1,html[lang="ar"] .display,html[lang="ar"] .h2,html[lang="ar"] .h3{line-height:1.25} html[lang="th"] .hh-h1,html[lang="th"] .display,html[lang="th"] .h2,html[lang="th"] .h3{line-height:1.3} /* ---- RTL (Arabic) ---- Flex and grid follow dir=rtl on their own; these are the physical properties that do not. */ [dir="rtl"] .news-card .nc-top .nc-cat{left:auto;right:1rem} [dir="rtl"] .eyebrow::before{margin-left:0;margin-right:0} [dir="rtl"] .lp-menu{right:auto;left:0} [dir="rtl"] .mega{left:auto;right:0} [dir="rtl"] .crumb{direction:rtl} [dir="rtl"] .hero-actions,[dir="rtl"] .btn{direction:rtl} [dir="rtl"] .arrow-link svg{transform:scaleX(-1)} [dir="rtl"] .btn svg{transform:scaleX(-1)} [dir="rtl"] .footer-top,[dir="rtl"] .footer-stats{direction:rtl} [dir="rtl"] .vch:not(:last-child)::after{left:auto;right:calc(100% + .1rem)} /* ============ FULL-WIDTH CLIENT CREATIVE (playout console, 2026-08-27) ====== The supplied artwork is a finished composition, so it is shown whole and uncropped at content width: rounded, softly lifted, nothing layered over it and no copy repeated beside it. */ .pv-full{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);max-width:1100px;margin-inline:auto;line-height:0;background:#000} .pv-full img{display:block;width:100%;height:auto} /* ============ Language flags (Kevin, 2026-08-28) ============ Real vector flags, not emoji. The wrapper owns the rounded corner and the hairline ring so white-heavy flags (TH, ID, PH) keep an edge on white, and the ring flips to a light one on the dark header. The closed header pill now shows the flag alone (the code moved to .sr-only). */ /* The ring rides on ::after, not an inset box-shadow: every flag opens with a full-bleed opaque , and an inset shadow paints in the background layer UNDER child content, so it never showed. */ .flag{display:inline-block;width:22px;height:16.5px;flex:none;line-height:0; border-radius:3.5px;overflow:hidden;position:relative; box-shadow:0 1px 2px rgba(0,0,0,.10)} .flag svg{display:block;width:100%;height:100%} .flag::after{content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);pointer-events:none} .header-on-dark:not(.nav-open) .site-header:not(.scrolled) .lp-btn .flag{ box-shadow:0 1px 3px rgba(0,0,0,.35)} .header-on-dark:not(.nav-open) .site-header:not(.scrolled) .lp-btn .flag::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)} /* No pill around the flag (Kevin, 2026-08-28): the flag is already a bounded shape with its own edge, so the outline was a second frame around a frame. Just the flag and the chevron. */ .lp-btn{border:0;background:none;padding:.45rem .3rem} .lp-btn:hover{border-color:transparent;background:none} .lp-btn:hover .flag{transform:translateY(-1px)} .lp-btn .flag{transition:transform var(--ti)} .header-on-dark:not(.nav-open) .site-header:not(.scrolled) .lp-btn{border-color:transparent} .lp-opt{display:flex;align-items:center;gap:.6rem} .mob-langs .ml{gap:.45rem} .footer-langs .fl-opt{display:inline-flex;align-items:center;gap:.5rem} /* ::after, not an inset shadow on .flag -- see the note above; the inset form paints under the flag's own opaque artwork and also clobbers the base drop shadow, which is what it was doing here. */ .footer-langs .fl-opt .flag::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)} /* the greyed roadmap pills have no flag: keep them optically aligned */ .footer-langs .fl-opt.is-off{padding-inline-start:calc(22px + .5rem)} /* ============ LEAD-CAPTURE HERO (Kevin, 2026-08-28) ============ /for-distributors/ is an e-mail-campaign landing page, so its form sits in the hero beside the copy instead of seven sections down. Logical properties throughout: the Arabic tree mirrors this layout with no extra rules. Placed after the ARCHIVO layer so the type overrides win on source order without needing !important. */ .ph.lp-hero{background:var(--ink); padding-block:clamp(6.6rem,9.5vh,7.8rem) clamp(2.6rem,5vw,3.8rem)} .lp-hero .crumb,.lp-hero .crumb a{color:rgba(255,255,255,.6)} .lp-hero .crumb a:hover{color:#fff} .lp-hero .ph-eyebrow{color:var(--orange)} /* the site's own interior-hero type, only the vw coefficient eased so the headline sits in a half-width column instead of the full page */ .lp-hero .ph-h{color:#fff;font-size:clamp(2.5rem,3.75vw,3.5rem); line-height:1.03;letter-spacing:-.028em;margin:.9rem 0 1rem;max-width:15ch} .lp-hero .ph-sub{color:rgba(255,255,255,.76);font-size:1.02rem; max-width:52ch;margin:0} .lp-grid{display:grid;grid-template-columns:1fr minmax(430px,.86fr); gap:clamp(2rem,4vw,3.4rem);align-items:start;margin-top:1.5rem} .lp-col{min-width:0} /* proof strip: figures from the governed registry, never hard-coded */ .lp-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem 1.4rem;margin-top:2.2rem;padding-top:1.7rem; max-width:min(100%,600px);border-block-start:1px solid rgba(255,255,255,.14)} /* between the 1000px single-column breakpoint and ~1200px the left column is still pinned by the card's minmax(430px,...), leaving ~100px per cell -- and the largest governed figure ("250,000+") needs ~108px. Go 2-up before it wraps rather than after. */ @media (max-width:1200px){.lp-proof{grid-template-columns:1fr 1fr;max-width:none}} /* stat_value() groups with a plain ASCII space ("250 000+"), which is a legal break opportunity: without nowrap the FR figure splits over two lines. */ .lpp-n{color:var(--orange);font-family:var(--font-display);font-weight:700; font-stretch:var(--w-title);font-size:1.32rem;line-height:1;letter-spacing:-.02em; white-space:nowrap} .lpp-l{margin-top:.4rem;color:rgba(255,255,255,.62);font-family:var(--font-display); font-stretch:var(--w-ui);font-weight:600;letter-spacing:.05em;line-height:1.35; text-transform:uppercase;font-size:.62rem} /* the form card: the page's own form, on white, lifted off the dark hero */ .lp-card{background:#fff;border-radius:20px;padding:clamp(1.5rem,2.2vw,2.1rem); box-shadow:0 30px 70px -20px rgba(0,0,0,.55)} /* line-height is NOT optional here: Thai ascenders/descenders and Arabic diacritics clip at the default. Kept in step with the site's .h2. */ .lp-card-h{font-family:var(--font-display);font-weight:700; font-stretch:var(--w-title);letter-spacing:-.015em;font-size:1.42rem; line-height:1.22;color:var(--ink);margin:0 0 .45rem} .lp-card-lead{font-size:.9rem;color:var(--ink-soft);margin:0 0 1.3rem;line-height:1.5} /* the card IS the frame: the nested .form-card must not draw a second one */ .lp-card .form-card{background:none;border:0;box-shadow:none;padding:0;border-radius:0} .lp-card .field{margin-bottom:.9rem} .lp-card textarea{min-height:104px} /* mobile: one column, and the form stays one tap away from anywhere */ .lp-bar{display:none} @media (max-width:1000px){ .lp-grid{grid-template-columns:1fr;gap:1.7rem} .lp-hero .ph-h{max-width:none} .lp-proof{grid-template-columns:1fr 1fr;gap:1.2rem 1.5rem;max-width:none} /* viewport-fit=cover: without the safe-area inset the CTA sits under the iPhone home indicator, exactly like .mobile-panel already compensates. */ .lp-bar{display:block;position:fixed;inset-inline:0;bottom:0;z-index:70; background:rgba(20,20,20,.94);backdrop-filter:blur(10px); border-block-start:1px solid rgba(255,255,255,.12); padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px))} .lp-bar a{display:block;text-align:center} /* the footer's own padding clears the bar. A spacer element cannot: page() wraps the body in
, so it would land above the footer, not below. */ .lead-page .site-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))} /* The consent banner is z-index 1400 and goes full-width under 640px, so it buried this bar for every first-time visitor -- the entire audience of an e-mail campaign. consent.js publishes .consent-open and --consent-h on ; ride above the banner while it is open rather than under it. The banner keeps the bottom slot and the safe-area inset it already owns. */ .consent-open .lp-bar{bottom:var(--consent-h,0px); padding-block-end:.7rem;transition:bottom .18s var(--ease-out)} .consent-open.lead-page .site-footer{ padding-bottom:calc(84px + var(--consent-h,0px) + env(safe-area-inset-bottom,0px))} /* the floating .call-pill lives in the same corner (fixed, z-index 90) and would sit ON the bar. On a lead-capture page they are also two competing CTAs, and the pill is the one that sends a warm lead off to /contact/. The bar wins on mobile; the pill is untouched everywhere else. */ .lead-page .call-pill{display:none} } /* the mobile panel covers the page: the bar must not float over it */ .nav-open .lp-bar{display:none} /* Corrections from client review, 2026-09-09. */ .site-header,.site-header.scrolled{background:#f4f5f5;box-shadow:0 1px 0 #dedfe0} .nav-links>a,.nav-links>.has-mega>button.navitem{background:#f4f5f5;color:#1a1a1a;border:1px solid transparent;text-decoration:none;min-height:44px} .nav-links>a:hover,.nav-links>.has-mega>button.navitem:hover,.nav-links>.has-mega.open>button.navitem{background:#e6e7e8;color:#1a1a1a;border-color:#c9cbcc} .nav-links>a.active{color:#b02400} .faq-q{padding:1.25rem 1.5rem;text-align:start} .faq-a-inner{padding:0 1.5rem 1.4rem;max-width:none} .contact-details{align-content:start} .contact-details>.card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:1rem;row-gap:.3rem;padding:1.2rem 1.4rem;min-height:0} .contact-details .card-ico{grid-column:1;grid-row:1 / span 2;width:44px;height:44px;margin:0;border-radius:12px} .contact-details .card-ico svg{width:23px;height:23px} .contact-details h3{grid-column:2;margin:0;font-size:1.05rem} .contact-details p{grid-column:2;margin:0;overflow-wrap:anywhere;font-size:1rem;line-height:1.5} .call-pill.footer-visible{display:none} @media(max-width:520px){.faq-q{padding:1.1rem 1rem}.faq-a-inner{padding-inline:1rem}.contact-details>.card{padding:1rem;column-gap:.8rem}}