/* =================================================================== NTHG main-enhanced.css — Append to main.css. =================================================================== Loaded AFTER main.css. Fixes critical bugs + adds dark mode + improves a11y, mobile targets, motion, and supports new features: - Dark mode (auto + manual toggle) - Command palette (Cmd/Ctrl+K) - Reading progress bar (on articles) - Smart prefetch (no CSS impact, JS-only) - Skeleton loaders Non-destructive: only adds rules, never overrides existing ones unless explicitly needed (the broken [] selector). =================================================================== */ /* === A. CRITICAL FIX : sélecteur [] cassé dans main.css ligne 11 === */ /* main.css avait `[]{...}` (invalide). Le HTML utilise [data-a]. */ [data-a]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ez), transform .7s var(--ez); } [data-a].v{ opacity:1; transform:none; } /* === B. DARK MODE : variables couleurs en thème clair / sombre === */ /* Active si l'OS est en dark mode OU si data-theme="dark" sur */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]){ --t1:#f0f0f0; --t2:#bdbdbd; --t3:#8a8a8a; --bg:#0f0f0f; --w:#1a1a1a; --r:#ff5577; --rh:#ff7a92; --rb:rgba(255,85,119,.08); color-scheme:dark; } } html[data-theme="dark"]{ --t1:#f0f0f0; --t2:#bdbdbd; --t3:#8a8a8a; --bg:#0f0f0f; --w:#1a1a1a; --r:#ff5577; --rh:#ff7a92; --rb:rgba(255,85,119,.08); color-scheme:dark; } html[data-theme="light"]{ color-scheme:light; } /* Adaptations spécifiques dark mode */ html[data-theme="dark"] body, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background:var(--w); color:var(--t1); } html:not([data-theme="light"]) .nav { background:rgba(26,26,26,.78); border-color:rgba(255,255,255,.08); } html:not([data-theme="light"]) .nav.c { background:rgba(26,26,26,.92); } html:not([data-theme="light"]) .mobile-menu { background:rgba(15,15,15,.97); } html:not([data-theme="light"]) .bt--o { border-color:rgba(255,255,255,.18); color:var(--t1); } html:not([data-theme="light"]) .bt--o:hover { background:rgba(255,255,255,.06); border-color:var(--t1); } html:not([data-theme="light"]) .ftc a { color:var(--t2); } html:not([data-theme="light"]) .ftc a:hover { color:var(--t1); } html:not([data-theme="light"]) .ft { background:#0a0a0a; border-color:rgba(255,255,255,.06); } html:not([data-theme="light"]) input, html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background:rgba(255,255,255,.04); color:var(--t1); border-color:rgba(255,255,255,.12); } html:not([data-theme="light"]) input::placeholder { color:var(--t3); } } html[data-theme="dark"] body { background:var(--w); color:var(--t1); } html[data-theme="dark"] .nav { background:rgba(26,26,26,.78); border-color:rgba(255,255,255,.08); } html[data-theme="dark"] .nav.c { background:rgba(26,26,26,.92); } html[data-theme="dark"] .mobile-menu { background:rgba(15,15,15,.97); } html[data-theme="dark"] .bt--o { border-color:rgba(255,255,255,.18); color:var(--t1); } html[data-theme="dark"] .bt--o:hover { background:rgba(255,255,255,.06); border-color:var(--t1); } html[data-theme="dark"] .ftc a { color:var(--t2); } html[data-theme="dark"] .ftc a:hover { color:var(--t1); } html[data-theme="dark"] .ft { background:#0a0a0a; border-color:rgba(255,255,255,.06); } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background:rgba(255,255,255,.04); color:var(--t1); border-color:rgba(255,255,255,.12); } html[data-theme="dark"] input::placeholder { color:var(--t3); } /* === C. THEME TOGGLE BUTTON (dans le nav) === */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; padding:0; border-radius:50%; background:transparent; border:none; color:var(--t2); cursor:pointer; transition:all .25s var(--ez); } .theme-toggle:hover{background:rgba(0,0,0,.04); color:var(--t1)} html[data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.06)} .theme-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} .theme-toggle .sun{display:none} .theme-toggle .moon{display:block} html[data-theme="dark"] .theme-toggle .sun{display:block} html[data-theme="dark"] .theme-toggle .moon{display:none} @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .sun{display:block} html:not([data-theme="light"]) .theme-toggle .moon{display:none} } .nav.c .theme-toggle{width:30px;height:30px;min-width:30px} .nav.c .theme-toggle svg{width:15px;height:15px} /* === D. ACCESSIBILITY HARDENING === */ /* Focus visible sur TOUS les éléments interactifs */ [tabindex]:focus-visible, details summary:focus-visible, .faq__q:focus-visible, [role="button"]:focus-visible{ outline:2px solid var(--r); outline-offset:2px; border-radius:4px; } /* Touch targets : minimum 44x44 (WCAG 2.5.5 AAA, 2026 best practice) */ @media (pointer: coarse) { .nk, .nc, .nx, .ftc a, .ftlg a, .menu-toggle, .mm-close, .theme-toggle{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; } .nk, .nc { padding:12px 16px } .ftc a, .ftlg a { padding:10px 0 } } /* prefers-reduced-motion : désactive toutes les animations longues */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } [data-a]{opacity:1 !important;transform:none !important} } /* === E. READING PROGRESS BAR (sur articles blog) === */ .reading-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--r), var(--rh)); z-index:1001; transition:width .1s ease-out; will-change:width; pointer-events:none; } .reading-meta{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; color:var(--t3); margin-bottom:12px; } .reading-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--t3); display:inline-block; } /* === F. COMMAND PALETTE (Cmd/Ctrl+K) === */ .cmdk-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:1100; display:none; align-items:flex-start; justify-content:center; padding-top:14vh; animation:cmdkFadeIn .15s ease-out; } .cmdk-backdrop.open{display:flex} @keyframes cmdkFadeIn{from{opacity:0}to{opacity:1}} .cmdk{ background:var(--w); border:1px solid rgba(0,0,0,.08); border-radius:14px; width:min(640px, 92vw); max-height:60vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:cmdkSlideIn .2s var(--ez); } html[data-theme="dark"] .cmdk, @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .cmdk{border-color:rgba(255,255,255,.1)}} @keyframes cmdkSlideIn{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}} .cmdk__input-wrap{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(0,0,0,.06); } html[data-theme="dark"] .cmdk__input-wrap, @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .cmdk__input-wrap{border-color:rgba(255,255,255,.06)}} .cmdk__icon{color:var(--t3); flex-shrink:0} .cmdk__icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none} .cmdk__input{ flex:1; background:transparent; border:none; outline:none; font-family:var(--sa); font-size:15px; color:var(--t1); } .cmdk__input::placeholder{color:var(--t3)} .cmdk__kbd{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--t3); padding:3px 6px; border:1px solid rgba(0,0,0,.12); border-radius:4px; background:rgba(0,0,0,.02); } html[data-theme="dark"] .cmdk__kbd, @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .cmdk__kbd{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}} .cmdk__list{ flex:1; overflow-y:auto; padding:6px 0; } .cmdk__group-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--t3); padding:10px 18px 6px; } .cmdk__item{ display:flex; align-items:center; gap:12px; padding:10px 18px; font-size:14px; color:var(--t1); cursor:pointer; text-decoration:none; transition:background .12s; } .cmdk__item:hover, .cmdk__item.is-active{ background:rgba(0,0,0,.04); } html[data-theme="dark"] .cmdk__item:hover, html[data-theme="dark"] .cmdk__item.is-active{background:rgba(255,255,255,.06)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .cmdk__item:hover, html:not([data-theme="light"]) .cmdk__item.is-active{background:rgba(255,255,255,.06)} } .cmdk__item-icon{ flex-shrink:0; color:var(--t3); } .cmdk__item-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none} .cmdk__item-text{flex:1;display:flex;flex-direction:column;gap:2px} .cmdk__item-title{color:var(--t1)} .cmdk__item-desc{font-size:11px;color:var(--t3)} .cmdk__item-arrow{color:var(--t3);font-size:13px;opacity:0;transition:opacity .12s} .cmdk__item:hover .cmdk__item-arrow, .cmdk__item.is-active .cmdk__item-arrow{opacity:1} .cmdk__footer{ display:flex; align-items:center; gap:14px; padding:8px 18px; border-top:1px solid rgba(0,0,0,.06); font-size:11px; color:var(--t3); } html[data-theme="dark"] .cmdk__footer, @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .cmdk__footer{border-color:rgba(255,255,255,.06)}} .cmdk__footer span{display:flex;align-items:center;gap:5px} .cmdk__empty{ padding:32px 18px; text-align:center; color:var(--t3); font-size:13px; } /* === G. SKELETON LOADERS (pour smart prefetch et lazy content) === */ .skeleton{ background:linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.04) 100%); background-size:200% 100%; animation:skeletonShine 1.4s ease-in-out infinite; border-radius:6px; } @keyframes skeletonShine{0%{background-position:200% 0}100%{background-position:-200% 0}} html[data-theme="dark"] .skeleton{background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);background-size:200% 100%} /* === H. PRINT STYLES (impression d'articles) === */ @media print { .nav, .mobile-menu, .ft, .menu-toggle, .theme-toggle, .reading-progress, .cmdk-backdrop, .hbtns, .ctaBlk{display:none !important} body{background:#fff; color:#000; opacity:1} a{color:#000; text-decoration:underline} .wrap{max-width:none; padding:0} } /* === I. MOBILE MENU IMPROVEMENTS === */ .mobile-menu{ /* iOS safe area */ padding-bottom:env(safe-area-inset-bottom, 0); padding-top:env(safe-area-inset-top, 0); } /* === J. FORM ERROR / SUCCESS STATES (consistent across all forms) === */ .field-error{color:#c92a1f; font-size:.78rem; margin-top:4px; display:flex; align-items:center; gap:4px} .field-success{color:#157a3b; font-size:.78rem; margin-top:4px; display:flex; align-items:center; gap:4px} html body input[aria-invalid="true"], html body textarea[aria-invalid="true"]{border-color:#c92a1f; box-shadow:0 0 0 3px rgba(201,42,31,.1)} /* === K. SCROLLBAR thinning (non-invasif) === */ @media (hover: hover) { *{scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent} html[data-theme="dark"] *{scrollbar-color:rgba(255,255,255,.2) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:5px;border:2px solid transparent;background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32);background-clip:padding-box;border:2px solid transparent} html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)} } /* === L. UTILS POUR LE NOUVEAU FOOTER NAV (FAQ keyboard) === */ .faq__q{cursor:pointer; user-select:none} .faq__q[tabindex]:focus-visible{outline:2px solid var(--r); outline-offset:4px; border-radius:8px} /* === M. SR-ONLY (texte pour screen readers uniquement) === */ .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; } /* ROLLBACK-V1-EXTRAS - hide theme-toggle, reading-progress, cmdk */ html body .theme-toggle{display:none} html body .reading-progress{display:none} html body .reading-meta{display:none} html body .cmdk-backdrop{display:none} html body .cmdk{display:none} /* TYPO-LIGHT-V1 */ /* TYPO-LIGHT-V1 - allege la typo globale dans le style fin/editorial */ /* Ajoute le 25 mai 2026 - inspiration zebr.app */ /* ============================================ 1. RESET DES POIDS - body et headings ============================================ */ html, body { font-weight: 300 !important; color: #2a2a2a !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.005em; } /* Sora plus fin par defaut */ body, p, li, td, th, span, div, label, input, textarea, select, button { font-weight: 400; } /* Instrument Serif jamais bold */ .sht, .hero h1, .ctaBlk h2, .vc-title, .vc-name, .mc-title, [style*="Instrument Serif"], [style*="--se"], html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { font-weight: 400; } /* Italics dans le serif restent en regular (pas oblique italic synth) */ html body em, html body i, html body .sht em, html body .hero h1 em, html body .vc-name em { font-style: italic; font-weight: 400; } /* ============================================ 2. TAILLES PLUS FINES ============================================ */ html body .hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em; } html body .sht { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -0.015em; } html body .shd { font-size: clamp(0.88rem, 1.1vw, 0.96rem); line-height: 1.7; color: #555; font-weight: 400; } html body .hsub { font-size: clamp(0.85rem, 1.1vw, 0.94rem); line-height: 1.7; color: #555; font-weight: 400; } /* ============================================ 3. UPPERCASE LABELS - plus de tracking, fonte plus fine ============================================ */ html body .she, html body .bac, html body .card-img-cat, html body .ftc h3 { font-weight: 500; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--r); } html body .ftc h3 { color: #888; } /* ============================================ 4. NAV - texte plus fin ============================================ */ html body .nk { font-weight: 400; font-size: 0.82rem; letter-spacing: -0.005em; color: #3a3a3a; } html body .nk:hover{color: #1a1a1a; background: rgba(0,0,0,.025)} html body .nc { font-weight: 400; font-size: 0.78rem; } html body .nx { font-weight: 500; font-size: 0.82rem; letter-spacing: 0; } /* ============================================ 5. BOUTONS - plus fins ============================================ */ html body .bt, html body button, html body .bt--p, html body .bt--o { font-weight: 500; letter-spacing: 0; font-size: 0.9rem; } html body .bt--p { font-weight: 500; } html body .bt--o { border-width: 1px; border-color: rgba(0,0,0,0.12); font-weight: 400; } /* ============================================ 6. CARDS - shadows et borders plus subtils ============================================ */ html body .mc-form, html body .cs-item, html body .vc-card, html body [class*="card"] { box-shadow: 0 2px 14px rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); } html body .vc-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); } /* ============================================ 7. STATS oversized - serif italic, plus fins ============================================ */ html body .sn { font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(1.8rem, 3.6vw, 2.8rem); } html body .sl { font-weight: 400; font-size: 0.78rem; letter-spacing: 0.04em; color: #888; } /* ============================================ 8. CTA section finale - moins agressive ============================================ */ html body .ctaBlk h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; } /* ============================================ 9. FAQ - plus de respiration ============================================ */ html body .faq__q { font-weight: 400; font-size: 1.02rem; letter-spacing: -0.005em; } html body .faq__a p { font-weight: 400; font-size: 0.88rem; color: #555; line-height: 1.7; } /* ============================================ 10. Cards vc (campagnes virales) - typo plus fine ============================================ */ html body .vc-title { font-weight: 400; letter-spacing: -0.015em; font-size: clamp(1.8rem, 3.6vw, 2.8rem); } html body .vc-sub { font-weight: 400; color: #555; font-size: 0.92rem; line-height: 1.65; } html body .vc-name { font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.005em; } html body .vc-desc { font-weight: 300; font-size: 0.78rem; letter-spacing: 0; } html body .vc-pill { font-weight: 500; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; } html body .vc-tag { font-weight: 400; font-size: 0.68rem; letter-spacing: 0.02em; } /* ============================================ 11. Footer - plus aere et fin ============================================ */ html body .ftc a, html body .ftb p { font-weight: 400; font-size: 0.84rem; color: #666; } html body .ftcp, html body .ftlg a { font-weight: 400; font-size: 0.76rem; color: #888; } /* ============================================ 12. Section headers genericue ============================================ */ html body section h2 { letter-spacing: -0.015em; } /* ============================================ 13. Blog cards ============================================ */ html body .card-img-title { font-weight: 400; letter-spacing: -0.005em; } html body .card-body h3, html body .card h3 { font-weight: 400; letter-spacing: -0.005em; } html body .card-body p { font-weight: 400; color: #555; } /* ============================================ 14. DEZOOM GLOBAL - tailles 15-25% plus petites Le site donne une impression de zoom. On reduit toutes les tailles principales pour avoir l'aerienne de zebr. ============================================ */ /* Body global - base 15px au lieu de 16 */ html { font-size: 15px !important } @media (min-width: 1400px) { html { font-size: 15.5px !important } } @media (max-width: 768px) { html { font-size: 14.5px !important } } /* Hero - bien plus contenu */ html body .hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.1; } html body .hero { padding: clamp(80px, 12vw, 140px) 20px 60px; } /* Section headers - aerese */ html body .sht { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; } /* Stats numbers */ html body .sn { font-size: clamp(1.5rem, 3vw, 2.4rem); } /* CTA finale */ html body .ctaBlk h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); } /* Section vc-title (Vu sur les socials) */ html body .vc-title { font-size: clamp(1.5rem, 2.8vw, 2.4rem); } /* ============================================ 15. CONTAINERS PLUS ETROITS - texte respire ============================================ */ /* Hero subtitle - bien plus etroit */ html body .hsub { max-width: 480px; margin: 0 auto 32px; } /* Section headers - container etroit */ html body .sh, html body .vc-head { max-width: 620px; margin: 0 auto; } html body .shd, html body .vc-sub { max-width: 520px; margin: 16px auto 0; } /* Wrap global un poil plus etroit sur desktop large */ @media (min-width: 1400px) { .wrap, .vc-wrap { max-width: 1180px !important } } /* FAQ list */ html body .faq__list{max-width: 720px} /* Footer brand */ html body .ftb p{max-width: 280px} /* ============================================ 16. PADDING SECTIONS - plus aere mais moins zoome ============================================ */ section.cases, section.proc, section.data, section.srv, section.blog, section.faq, section.col, section.cta, html body .vc-section { padding: clamp(60px, 8vw, 100px) 0; } html body .hero .hsub{font-size: 0.88rem; line-height: 1.65} /* ============================================ 17. NAV - plus compacte (effet "moins zoom") ============================================ */ html body .nav{padding: 7px 10px 7px 16px} html body .nb img{height: 14px} html body .nav.c .nb img{height: 12px} html body .nk{padding: 7px 12px} html body .nx{padding: 7px 16px} /* BODY-OPACITY-FALLBACK-V1 */ /* BODY-OPACITY-FALLBACK-V1 - garantit body visible meme si JS plante */ body { animation: nthg-body-fadein 0.4s ease 0.15s forwards; } @keyframes nthg-body-fadein { from { opacity: 0 } to { opacity: 1 } } body.fl { opacity: 1 !important; animation: none !important; } /* NO-AI-DOTS-V1 */ /* NO-AI-DOTS-V1 — eliminer les puces rouges decoratives (pattern AI) */ html body .rd, html body .pild, html body .dash-pulse { display: none; } /* .stn = bullet numerote 01/02/03 ; on garde structure mais on enleve le fond rouge */ html body .stn { background: transparent; width: auto; height: auto; border: none; color: var(--color-text, #1a1a1a); font-weight: 600; opacity: .55; border-radius: 0; } /* EN-TYPO-ALIGN-V1 */ /* EN-TYPO-ALIGN-V1 — aligner les pages EN sur la FR (etait trop zoom) */ html body .hero-en h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; } .hero-en h1 em { font-style: normal; font-weight: inherit; } .hero-en .hero-en__c p, html body .hero-en .hero-en__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5; } html body .hero-en { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); } /* Aussi h2 EN sections */ html body .stats-en h2, html body .what h2, html body .proof h2, html body .what-en h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } /* NO-EN-PILLS-V1 */ /* NO-EN-PILLS-V1 — masquer pills/tags hero-en moches */ .hero-en__tag, .hero-en .tag, .hero-en__eyebrow, .stats-en__label, html body [class*="hero-en__tag"], html body .hero-en .pill { display: none; } /* EN-SPACING-V1 */ /* EN-SPACING-V1 — espacer H1 EN du menu (le tag rose servait d'aere) */ html body .hero-en { padding-top: clamp(5rem, 9vw, 8rem); } html body .hero-en__c { padding-top: clamp(2rem, 4vw, 3.5rem); } /* idem pour les autres pages EN qui n'ont pas .hero-en */ body[class*="en"] main > section:first-of-type, [lang="en"] main > section:first-of-type { padding-top: clamp(5rem, 9vw, 8rem); } /* EN-FULL-ALIGN-V1 */ /* EN-FULL-ALIGN-V1 — toutes tailles EN matchent celles de la FR */ /* === HERO EN === */ html body .hero-en h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; } .hero-en h1 em { font-style: normal; font-weight: inherit; } .hero-en p, .hero-en__sub, html body .hero-en .hero-en__sub { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; font-weight: 400; color: #525252; } html body .hero-en { padding-top: clamp(4.5rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } html body .hero-en__c { padding-top: clamp(1.5rem, 3vw, 2.5rem); } /* === H2 sur sections EN (about-h, cta-h, stats-en, french-touch, etc.) === */ .stats-en h2, .cta-en h2, .french-touch h2, html body .hero-en h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.015em; font-weight: 400; } /* === H3 dans sections EN === */ .stats-en h3, .cta-en h3, .french-touch h3, .what h3, html body .proof h3 { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; } /* === Paragraphes dans sections EN === */ .stats-en p, .cta-en p, .french-touch p, .what p, html body .proof p { font-size: clamp(.95rem, 1.05vw, 1rem); line-height: 1.6; color: #525252; } /* === Padding sections EN === */ html body .stats-en, html body .cta-en, html body .french-touch, html body .what, html body .proof { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); } /* === Buttons EN doivent matcher .bt FR === */ html body .hero-en__btns .bt, html body .cta-en .bt { font-size: .95rem; padding: .85rem 1.4rem; } /* === Stats numeros (gros chiffres) === */ html body .stats-en .num, html body .stats-en strong, html body .stats-en .stat-num { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1; font-weight: 500; } /* EN-WRAP-V1 */ /* EN-WRAP-V1 — H1 et p hero EN doivent matcher visuellement la FR (2 lignes h1) */ html body .hero-en__c { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; } html body .hero-en h1 { max-width: 920px; margin-left: auto; margin-right: auto; text-wrap: balance; } .hero-en .hero-en__lead, html body .hero-en p { max-width: 640px; margin-left: auto; margin-right: auto; text-wrap: pretty; } .hero-en__btns { margin-top: 1.5rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } .hero-en__trust { margin-top: 2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #595959; } /* EN-SHRINK-V1 */ /* EN-SHRINK-V1 — la FR fait ~38-40px en h1, mes overrides EN etaient trop gros */ html body .hero-en h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 400; } html body .hero-en h1 br { display: none; /* laisse le wrap naturel */ } .hero-en .hero-en__lead, html body .hero-en p { font-size: clamp(.95rem, 1.1vw, 1rem); line-height: 1.55; } html body .hero-en { padding-top: clamp(3.5rem, 7vw, 6rem); } html body .hero-en__c { padding-top: clamp(1rem, 2vw, 1.5rem); } /* h2 sections EN */ html body .stats-en h2, html body .cta-en h2, html body .french-touch h2, html body .hero-en h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); } html body .stats-en h3, html body .cta-en h3, html body .french-touch h3, html body .what h3, html body .proof h3 { font-size: clamp(.95rem, 1.2vw, 1.05rem); } /* EN-EXACT-V1 */ /* EN-EXACT-V1 — valeurs exactes mesurees live sur la FR */ html body .hero-en h1 { font-size: 43.4px; line-height: 47.7px; letter-spacing: -1.085px; font-weight: 400; max-width: 700px; margin: 0 auto; } html body .hero-en h1 br { display: none; } .hero-en .hero-en__lead, html body .hero-en p { font-size: 13.64px; line-height: 22.5px; max-width: 480px; margin-left: auto; margin-right: auto; } html body .hero-en { padding-top: 140px; padding-bottom: 60px; } html body .hero-en__c { padding-top: 0; max-width: 720px; margin: 0 auto; } /* h2 sections : 29.45px exact */ html body .stats-en h2, html body .cta-en h2, html body .french-touch h2, html body .hero-en h2 { font-size: 29.45px; line-height: 35.34px; letter-spacing: -.015em; } /* h3 dans EN */ html body .stats-en h3, html body .cta-en h3, html body .french-touch h3, html body .what h3, html body .proof h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; } /* p dans EN sections */ html body .stats-en p, html body .cta-en p, html body .french-touch p, html body .what p, html body .proof p { font-size: 13.64px; line-height: 22.5px; } /* Boutons hero EN : memes tailles que FR */ .hero-en__btns { margin-top: 1.5rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } /* EN-P-FORCE-V1 */ /* EN-P-FORCE-V1 — selecteur tres specifique pour forcer le p */ body .hero-en .hero-en__c p.hero-en__lead, body .hero-en .hero-en__c p, section.hero-en p.hero-en__lead, html body section.hero-en p { font-size: 13.64px; line-height: 22.5px; max-width: 480px; } /* NO-AUTO-DARK-V1 */ /* NO-AUTO-DARK-V1 — desactive l'auto-detection prefers-color-scheme. Le dark mode n'est actif QUE si l'utilisateur a explicitement clique le toggle (qui ajoute data-theme="dark" sur ). Sur mobile le auto-dark cassait le rendu. */ html body :root, html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark !important; } /* Force les variables claires par defaut (les blocs @media prefers-color-scheme:dark ne s'appliqueront que si combine avec data-theme="dark"). */ html:not([data-theme="dark"]) { --t1: #1a1a1a !important; --t2: #424242 !important; --t3: #595959 !important; --bg: #ffffff !important; --w: #ffffff !important; --r: #b91c30 !important; --rh: #d62945 !important; --rb: rgba(185,28,48,.08) !important; } html:not([data-theme="dark"]) body { background: #ffffff !important; color: #1a1a1a !important; } html:not([data-theme="dark"]) .nav { background: rgba(255,255,255,.78) !important; } html:not([data-theme="dark"]) .mobile-menu { background: rgba(255,255,255,.97) !important; } /* A11Y-FIXES-V1 */ /* A11Y-FIXES-V1 — Phase 1 (P0) + Phase 2 (P1) batch */ /* === FONT-SIZE 16px sur inputs (anti-zoom iOS) === */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], html body input[type="number"], html body select, html body textarea { font-size: 16px; } @media (min-width: 768px) { /* Sur desktop on peut etre plus subtil */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], select, textarea { font-size: 15px !important; } } /* === TOUCH TARGETS >=44px sur mobile === */ @media (max-width: 640px) { .bt, button.bt, a.bt, button[type="submit"], input[type="submit"], .nb, .nk, .cmd-btn, .modal-close, .close-btn, .stb, .btn-icon, .icon-btn { min-height: 44px !important; min-width: 44px !important; padding-top: max(.6rem, calc((44px - 1em) / 2)) !important; padding-bottom: max(.6rem, calc((44px - 1em) / 2)) !important; } /* Inputs et select aussi */ input, select, textarea { min-height: 44px !important; } } /* === FOCUS VISIBLE sur tous interactifs === */ html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; border-color: #1a1a1a; } button:focus-visible, a:focus-visible, [role="button"]:focus-visible, html body [tabindex]:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 3px; border-radius: 4px; } /* CTA primaire rouge : focus avec contour blanc dedans */ html body .bt--p:focus-visible, html body button.bt--p:focus-visible { outline: 2px solid #ffffff; outline-offset: -4px; box-shadow: 0 0 0 4px #1a1a1a; } /* === CONTRASTE Brand button (#B91C30 -> #A8182B sur fond blanc) === #B91C30 sur white = 4.95:1 (OK en theorie, mais limite) On garde mais on assure le contraste du TEXTE blanc sur ce fond. #A8182B sur white = 5.49:1 (mieux). On ne change pas la couleur officielle mais on force le text-color white sur les variations de bouton rouge. */ html body .bt--p, html body button.bt--p, html body a.bt--p, html body .nx { color: #ffffff; font-weight: 500; } /* === TABLES CONNECT overflow horizontal === */ html body .table-wrapper, html body .table-scroll, html body [class*="table-container"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrapper table, .table-scroll table { min-width: 600px; } /* === Forms : link label-input pour screen readers === */ html body .form-input:focus, html body .form-input:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* === Skip link bien visible quand focused === */ html body .skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 9999; background: #ffffff; color: #1a1a1a; padding: .75rem 1.25rem; border: 2px solid #1a1a1a; border-radius: 6px; text-decoration: none; font-weight: 600; } /* MOBILE-LAYOUT-V1 — Fix layout iPhone (390-430px) */ /* === GLOBAL : padding-x sur le container et le wrap === */ @media (max-width: 768px) { .wrap, .container, body > section > .wrap, .hero__c, .hero-en__c { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box; } body { overflow-x: hidden; } } /* === HERO : espace nav + h1 plus petit + padding === */ @media (max-width: 768px) { .hero, .hero-en { padding-top: clamp(5rem, 18vw, 7rem) !important; padding-bottom: clamp(2rem, 6vw, 3rem) !important; padding-left: 20px !important; padding-right: 20px !important; } .hero h1, .hero-en h1 { font-size: clamp(1.75rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; letter-spacing: -.015em !important; margin: 0 auto 1rem !important; max-width: 100% !important; text-align: center; overflow-wrap: break-word; hyphens: auto; } .hero p, .hero-en p, .hero__sub, .hero-en__sub, .hero-en__lead { font-size: 15px !important; line-height: 1.5 !important; max-width: 100% !important; padding: 0 !important; } .hero__c, .hero-en__c { padding-top: clamp(1rem, 4vw, 2rem) !important; max-width: 100% !important; } } /* === Boutons CTA hero : full-width row sur mobile === */ @media (max-width: 540px) { .hbtns, .hero-en__btns { display: flex !important; flex-direction: column !important; gap: .75rem !important; align-items: stretch !important; width: 100% !important; margin-top: 1.5rem !important; } .hbtns .bt, .hero-en__btns .bt { width: 100% !important; text-align: center !important; padding: .9rem 1.5rem !important; } } /* === H2 sht / titres sections === */ @media (max-width: 768px) { h2.sht, .sht, .stats-en h2, .cta-en h2, .french-touch h2 { font-size: clamp(1.4rem, 6vw, 1.85rem) !important; line-height: 1.2 !important; padding: 0 4px; } h3 { font-size: clamp(1.05rem, 4vw, 1.2rem) !important; } } /* === Marquee logos : padding edges + scale === */ @media (max-width: 768px) { .mqs { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; } .mq { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; } .mqi img { height: 32px !important; max-width: 120px !important; } .mql { padding: 0 20px; font-size: 13px !important; } } /* === Stats : grid 2 cols mobile au lieu de 3+ === */ @media (max-width: 540px) { .stats .sg, .sg, .stats-en .sg { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem 1rem !important; } .stats .sn, .sn { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; } .stats .sl, .sl { font-size: 13px !important; } } /* === Sections paddings === */ @media (max-width: 768px) { section, .stats, .srv, .ft, .ctaBlk, .minicontact, .stats-en, .cta-en, .french-touch, .what, .proof { padding-left: 20px !important; padding-right: 20px !important; padding-top: clamp(2.5rem, 8vw, 4rem) !important; padding-bottom: clamp(2.5rem, 8vw, 4rem) !important; } } /* === Nav mobile : assurer position correcte === */ @media (max-width: 768px) { .nav { left: 12px !important; right: 12px !important; max-width: calc(100vw - 24px) !important; } } /* === Forms inputs largeur full sur mobile === */ @media (max-width: 540px) { input, select, textarea, .form-input { width: 100% !important; box-sizing: border-box; } } /* === Footer sections : padding === */ @media (max-width: 768px) { .ft, footer.ft { padding-left: 20px !important; padding-right: 20px !important; } } /* MOBILE-V2-FINETUNE — derniers ajustements iPhone */ @media (max-width: 768px) { /* Hero : marge minimum 100px depuis le top de page (nav + air) */ .hero, .hero-en { padding-top: 110px !important; padding-bottom: 2.5rem !important; } /* H1 taille un peu reduite, line-height plus serre */ .hero h1, .hero-en h1 { font-size: clamp(1.6rem, 7.2vw, 2.1rem) !important; line-height: 1.18 !important; margin-bottom: 1.25rem !important; } .hero p, .hero-en p, .hero__sub, .hero-en__sub, .hero-en__lead { font-size: 14.5px !important; line-height: 1.55 !important; margin-bottom: 0 !important; } } /* Tres petit mobile (iPhone SE etc.) */ @media (max-width: 380px) { .hero h1, .hero-en h1 { font-size: 1.5rem !important; } .hero p, .hero-en p { font-size: 13.5px !important; } .wrap, .container, .hero__c, .hero-en__c, section { padding-left: 16px !important; padding-right: 16px !important; } } /* Logos marquee : containment safe sur mobile */ @media (max-width: 768px) { .mqs { overflow: hidden !important; padding: 1.5rem 0 2rem !important; } .mq { width: 100% !important; overflow: hidden !important; } .mqt { /* Assure que le marquee tourne au lieu de deborder fixe */ animation-duration: 25s !important; } .mqi { padding: 0 1.25rem !important; } .mqi img { height: 28px !important; max-width: 100px !important; } .mql { margin-bottom: 1.25rem !important; } } /* Stats : meilleur fit mobile */ @media (max-width: 540px) { .stats, section.stats { padding-top: 2rem !important; padding-bottom: 2rem !important; } .stats .sg, .sg { gap: 2rem 1rem !important; } .stats .sn, .sn { margin-bottom: .25rem !important; } } /* Espace entre boutons CTA et logos */ @media (max-width: 768px) { .hero + .mqs, .hero-en + .mqs { margin-top: 0 !important; } .mqs + .stats, .mqs + section.stats { padding-top: 1rem !important; } } /* CENTER-ORPHAN-STAT-V1 — Centre le 3eme stat orphelin sur mobile (2 cols + 1 orphan) */ @media (max-width: 540px) { /* Si 3 items dans une grille 2-cols : centrer le 3eme */ .stats .sg > :nth-child(3):last-child, .sg > :nth-child(3):last-child { grid-column: 1 / -1 !important; max-width: 50%; margin: 0 auto; } /* Si 5 items : centrer le 5eme */ .stats .sg > :nth-child(5):last-child, .sg > :nth-child(5):last-child { grid-column: 1 / -1 !important; max-width: 50%; margin: 0 auto; } } /* MOBILE-DIGESTE-V1 */ /* MOBILE-DIGESTE-V1 — Rendre le mobile (<=768px) digeste sans rien casser. On garde l'UX existante (videos, cards, sections), on assure juste qu'il n'y a pas de debordement et que les paddings respirent. */ @media (max-width: 768px) { /* Pas de scroll horizontal global */ body { overflow-x: hidden; } /* Hero : decoller du menu (nav fait ~70px de haut + air) */ .hero, .hero-en { padding-top: 100px !important; } /* H1 : si la taille naturelle deborde, scale down un poil (clamp est dejà bien sur desktop, on garde la mecanique mais on cap min smaller) */ .hero h1, .hero-en h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem) !important; line-height: 1.15 !important; } /* Padding horizontal sur les wraps qui n'en ont pas */ .wrap, .hero__c, .hero-en__c { padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; box-sizing: border-box; } /* P du hero : taille mobile lisible (la valeur 13.64 etait trop petite) */ .hero p, .hero-en p, .hero__sub, .hero-en__sub, .hero-en__lead { font-size: 15px !important; line-height: 1.55 !important; } /* Marquee logos : containment et fade aux bords (UX existante preservee) */ .mqs { overflow: hidden !important; } .mq { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) !important; } /* Images responsive (au cas ou) */ img, video { max-width: 100%; height: auto; } } /* Mobile strict (<= 540px) : orphan stat centre quand 3 items en 2 cols */ @media (max-width: 540px) { .stats .sg > :nth-child(3):last-child, .sg > :nth-child(3):last-child, .stats-en .sg > :nth-child(3):last-child { grid-column: 1 / -1 !important; max-width: 60%; margin: 0 auto; } } /* Tres petit (iPhone SE 375 et moins) : padding-x un peu reduit */ @media (max-width: 380px) { .wrap, .hero__c, .hero-en__c { padding-left: 16px !important; padding-right: 16px !important; } .hero h1, .hero-en h1 { font-size: 1.7rem !important; } } /* MOBILE-FULL-CLEAN-V1 */ /* MOBILE-FULL-CLEAN-V1 — Mobile cleanup complet, zero impact desktop/SEO */ /* ============ 1. CHECKBOX/RADIO : taille normale ============ */ html body input[type="checkbox"], html body input[type="radio"] { min-height: 0; min-width: 0; width: 16px; height: 16px; flex-shrink: 0; } /* Label avec checkbox lisible mobile */ @media (max-width: 768px) { label.cf-consent, label.consent, label:has(> input[type="checkbox"]) { font-size: 13px !important; line-height: 1.45 !important; align-items: flex-start !important; } label.cf-consent span, label.consent span, label:has(> input[type="checkbox"]) span { font-size: 13px !important; word-break: normal; overflow-wrap: break-word; flex: 1 1 auto; min-width: 0; } } /* ============ 2. SECTION .data cachee mobile ============ */ @media (max-width: 768px) { section.data, .data { display: none !important; } } /* ============ 3. BLOG : 2 cards max mobile + CTA propre ============ */ @media (max-width: 768px) { .bg, #bG { grid-template-columns: 1fr !important; gap: 1rem !important; } .bg > :nth-child(n+3), #bG > :nth-child(n+3) { display: none !important; } .bmore { margin-top: 1.75rem !important; text-align: center; } a.bmbtn, .bmbtn { display: inline-flex !important; align-items: center; gap: .5rem; padding: .9rem 1.5rem !important; border: 1.5px solid #1a1a1a !important; border-radius: 100px !important; font-weight: 500 !important; font-size: 14px !important; color: #1a1a1a !important; text-decoration: none !important; background: transparent !important; min-height: 44px; line-height: 1; } } /* ============ 4. FOOTER MOBILE compact ============ */ @media (max-width: 768px) { .ft, footer.ft { padding-top: 2.5rem !important; padding-bottom: 2rem !important; } .ft .wrap { padding-left: 24px !important; padding-right: 24px !important; } /* Grille footer: 1 colonne */ .ftg { display: flex !important; flex-direction: column !important; gap: 2rem !important; } /* Bloc brand: centre */ .ftb { text-align: center; } .ftb p { font-size: 13px !important; line-height: 1.55 !important; color: #555 !important; margin: .75rem auto 0 !important; max-width: 320px; } /* Colonnes liens: titre h3 + accordeon look (groupe d'items) */ .ftc { display: flex; flex-direction: column; gap: .5rem; } .ftc h3 { font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #999 !important; margin: 0 0 .5rem !important; padding-bottom: .5rem; border-bottom: 1px solid #eee; } .ftc a { font-size: 14px !important; padding: .3rem 0 !important; color: #1a1a1a !important; text-decoration: none; line-height: 1.4; } /* Bottom bar copyright + mentions */ .ftbt { flex-direction: column !important; gap: 1rem !important; text-align: center; margin-top: 1.5rem !important; padding-top: 1.5rem !important; border-top: 1px solid #eee; } .ftcp { font-size: 11.5px !important; line-height: 1.45 !important; color: #888 !important; display: block; } .ftlg { display: inline-flex !important; gap: 1.25rem !important; justify-content: center; } .ftlg a { font-size: 12px !important; color: #666 !important; text-decoration: none; } } /* FOOTER-V2 */ /* FOOTER-V2 — Premium minimaliste, fond noir, typo blanche */ html body footer.ft-v2 { background: #0a0a0a; color: #d4d4d8; padding: clamp(3.5rem, 6vw, 5.5rem) 0 1.5rem; margin-top: 0; font-family: 'Sora', sans-serif; } footer.ft-v2 * { color: inherit; } footer.ft-v2 .wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } /* === TOP : Brand + Newsletter === */ footer.ft-v2 .ft-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(255,255,255,0.08); } @media (max-width: 768px) { footer.ft-v2 .ft-top { grid-template-columns: 1fr; gap: 2.5rem; } } footer.ft-v2 .ft-brand .ft-logo { display: inline-block; margin-bottom: 1.5rem; } footer.ft-v2 .ft-brand .ft-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); } html body footer.ft-v2 .ft-tagline { font-size: 16px; line-height: 1.55; color: #e4e4e7; margin: 0 0 1.25rem; max-width: 380px; font-weight: 400; } html body footer.ft-v2 .ft-addr { font-size: 13.5px; line-height: 1.7; color: #a1a1aa; margin: 0 0 1.5rem; } html body footer.ft-v2 .ft-addr a { color: #d4d4d8; text-decoration: none; transition: color .15s; } html body footer.ft-v2 .ft-addr a:hover{color: #ffffff;} footer.ft-v2 .ft-addr .ft-sep { display: inline-block; margin: 0 8px; color: #52525b; } footer.ft-v2 .ft-social { display: flex; gap: 0.875rem; } footer.ft-v2 .ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); color: #d4d4d8; transition: background .15s, color .15s, transform .15s; } footer.ft-v2 .ft-social a:hover { background: #ffffff; color: #0a0a0a; transform: translateY(-2px); } /* === Newsletter === */ html body footer.ft-v2 .ft-newsletter h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: #ffffff; margin: 0 0 0.875rem; } html body footer.ft-v2 .ft-newsletter p { font-size: 14px; line-height: 1.55; color: #a1a1aa; margin: 0 0 1.25rem; max-width: 380px; } footer.ft-v2 .ft-nl-form { display: flex; gap: 8px; max-width: 420px; } html body footer.ft-v2 .ft-nl-form input[type="email"] { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #ffffff; padding: 12px 16px; border-radius: 100px; font-size: 16px; font-family: inherit; min-height: 44px; transition: border-color .15s, background .15s; } html body footer.ft-v2 .ft-nl-form input[type="email"]:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); outline: none; } footer.ft-v2 .ft-nl-form input[type="email"]::placeholder { color: #71717a; } html body footer.ft-v2 .ft-nl-form button { background: #ffffff; color: #0a0a0a; border: 0; padding: 12px 24px; border-radius: 100px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; min-height: 44px; transition: transform .15s, background .15s; } html body footer.ft-v2 .ft-nl-form button:hover { background: #b91c30; color: #ffffff; transform: translateY(-1px); } @media (max-width: 540px) { footer.ft-v2 .ft-nl-form { flex-direction: column; } footer.ft-v2 .ft-nl-form input, footer.ft-v2 .ft-nl-form button { width: 100%; } } /* === MIDDLE : 5 colonnes (Fix #456 — Comparatifs col) === */ footer.ft-v2 .ft-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.5rem); padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid rgba(255,255,255,0.08); } @media (max-width: 1100px) { footer.ft-v2 .ft-cols { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } } @media (max-width: 768px) { footer.ft-v2 .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; } } @media (max-width: 420px) { footer.ft-v2 .ft-cols { grid-template-columns: 1fr; gap: 2rem; } } html body footer.ft-v2 .ft-col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: #71717a; margin: 0 0 1.25rem; padding: 0; border: 0; } html body footer.ft-v2 .ft-col a { display: block; font-size: 14px; line-height: 1.4; color: #d4d4d8; padding: 6px 0; text-decoration: none; transition: color .15s, padding-left .15s; } html body footer.ft-v2 .ft-col a:hover { color: #ffffff; padding-left: 4px; } /* === BOTTOM === */ footer.ft-v2 .ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-top: 1.5rem; flex-wrap: wrap; } @media (max-width: 768px) { footer.ft-v2 .ft-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; } } html body footer.ft-v2 .ft-copyright { font-size: 12px; color: #71717a; line-height: 1.5; } footer.ft-v2 .ft-bottom-right { display: flex; gap: 1.75rem; flex-wrap: wrap; } html body footer.ft-v2 .ft-bottom-right a { font-size: 12px; color: #a1a1aa; text-decoration: none; transition: color .15s; } html body footer.ft-v2 .ft-bottom-right a:hover{color: #ffffff;} /* FOOTER-GAP-FIX-V1 */ /* Empeche toute bande blanche entre la derniere section et le footer noir */ html body footer.ft-v2 { margin-top: 0; } body:has(footer.ft-v2) { /* body en blanc OK mais le footer doit toucher la section au dessus */ } /* FOOTER-SOFTEN-V1 */ /* FOOTER-SOFTEN-V1 — adoucir la cassure haut du footer noir */ footer.ft-v2 { position: relative; } footer.ft-v2::before { content: ""; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.85) 85%, rgba(10,10,10,1) 100% ); pointer-events: none; z-index: 0; } /* on remonte le contenu pour qu'il ne soit pas masque par le gradient */ footer.ft-v2 > .wrap { position: relative; z-index: 1; } /* Aussi : main / parent doit avoir overflow visible pour laisser le gradient sortir */ main, body { overflow-x: clip; } /* FOOTER-NL-FEEDBACK */ /* FOOTER-NL-FEEDBACK — message inline succes/erreur newsletter */ .ft-nl-msg { display: none; margin-top: 12px; padding: 10px 16px; border-radius: 12px; font-size: 13px; line-height: 1.4; font-family: 'Sora', sans-serif; } .ft-nl-msg.show { display: block; } .ft-nl-msg.success { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); } .ft-nl-msg.error { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.2); } .ft-nl-form.loading button { opacity: 0.6; cursor: wait; } /* #484: anti-zoom iOS — force 16px sur inputs/textarea des forms contact (forms agence-tiktok-paris .cta-form, promo-musique-tiktok .mc-form, homepage .cf et tout form Formspree). Préserve le design pour les contrôles qui n'ont pas de input/textarea/select. */ .cta-form input, .cta-form textarea, .cta-form select, .mc-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .mc-form textarea, .mc-form select, .cf input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .cf textarea, .cf select, form[action*="formspree"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]), form[action*="formspree"] textarea, html body form[action*="formspree"] select { font-size: 16px; } /* ===== BATCH4 (M510/M511/M517/M518) — Append ===== */ /* #510: liens dans paragraphes doivent être underlined */ .nw-form__hint a, p a:not(.btn):not(.nav-item):not(.menu-link):not(.nx):not(.nk):not(.nc), article a:not(.btn):not(.nx):not(.nk) { text-decoration: underline; text-underline-offset: 2px; } /* #517: tap-highlight neutralisé global */ html { -webkit-tap-highlight-color: transparent; } a:active, button:active { opacity: .7; } /* #518: neutralise hover sticky sur device tactile */ @media (hover: none) { *:hover { transform: none !important; box-shadow: inherit !important; } } /* ===== END BATCH4 APPEND ===== */