/* ============================================================ DOAKEN — MOBILE OVERRIDES + COMPOSANTS MOBILE NATIFS ------------------------------------------------------------ Chargé EN DERNIER dans le de toutes les pages. Le desktop est validé et NE bouge pas. Stratégie : HTML mobile NATIF dédié cohabite avec HTML desktop dans la même page, via les classes utilitaires : .mobile-only → visible sous 768px uniquement .desktop-only → visible au-dessus de 768px uniquement Patterns fondamentaux : - Inputs >= 16px (anti-zoom iOS Safari) - Tap-targets >= 44x44px (Apple HIG / WCAG 2.5.5) - Drawer → modale fullscreen - Accordéon
/ Composants mobile natifs (HTML+CSS dédiés, pensés 375px) : - .m-nav (nav mobile dédiée) - .m-hero (hero mobile dédié) - .m-features (carrousel snap 6 modules) - .m-stat (1 chiffre principal + secondaires empilés) - .m-usecases (carrousel snap 3 profils) - .m-workflow (timeline verticale 5 étapes) - .m-benefits (empilés 1 colonne) - .m-cta-final (bloc dark final) - .m-footer (accordéons natifs) ============================================================ */ /* ============================================================ UTILITAIRES SHOW/HIDE — cohabitation HTML mobile + desktop ============================================================ */ .mobile-only { display: none; } .desktop-only { display: block; } @media (max-width: 768px) { .mobile-only { display: block; } .desktop-only { display: none !important; } } /* ============================================================ MOBILE — >= 769px : reset pour ne pas leak en desktop ============================================================ */ @media (max-width: 768px) { /* ---- INPUTS / SELECTS / TEXTAREA : font-size >= 16px (anti-zoom iOS Safari) ---- */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], select, textarea, .drawer-body input, .drawer-body select, .form-input, .form-textarea, .qualification-form input, .qualification-form select, .qualification-form textarea { font-size: 16px !important; padding: 14px 16px; } /* ---- TAP-TARGET min 44×44px (Apple HIG / WCAG 2.5.5) ---- */ button:not(.mobile-carousel-dot):not(.faq-q-toggle), .btn, .btn-primary, .btn-secondary, .btn-ghost, .nav-cta, .cta, .mobile-menu-btn, .mobile-cta, .country-selector button, .lang-switch, .lang-pill, .floating-cta, .drawer-close { min-height: 44px; } /* ---- COUNTRY SELECTOR : tap-target + ARIA visual ---- */ .country-selector button { min-width: 44px; min-height: 44px; font-size: 1.2rem; padding: 8px 10px; border-radius: 10px; } /* ---- BOUTONS CTA EN HERO : pleine largeur empilés ---- */ .hero-cta, .cta-buttons, .hero-buttons, .cta-form-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; } .hero-cta > .btn, .hero-cta > a, .cta-buttons > .btn, .cta-buttons > a, .hero-buttons > .btn, .hero-buttons > a { width: 100%; justify-content: center; text-align: center; } /* ---- TYPOGRAPHIE MOBILE FLUIDE ---- */ h1, .h1, .hero-title, .hero-h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.15; letter-spacing: -0.02em; } h2, .h2, .section-title { font-size: clamp(22px, 6vw, 28px); line-height: 1.2; } h3, .h3 { font-size: clamp(18px, 5vw, 22px); line-height: 1.25; } /* ---- PADDING SECTION STANDARD 20px latéral ---- */ .statbar, .compat, .cta-final-f, .hero, .hero-sec, .hero-section, .hero-profils, .pain-section, .solution-section, .method-section, .convergence-sec, .constat-sec, .preuve-sec, .extract-sec, .story-sec, .benefits-sec, .compat-sec, .faq-sec, .cta-form-section { padding-left: 20px !important; padding-right: 20px !important; } /* ---- IMAGES : anti-CLS + max-width ---- */ img { max-width: 100%; height: auto; } /* ---- DRAWER → MODALE FULLSCREEN ---- */ .drawer { width: 100vw !important; max-width: 100vw !important; right: -100vw; } .drawer.open { right: 0; } .drawer-body { padding: 20px; } .drawer-header { padding: 16px 20px; } /* ---- FLOATING CTA : masqué en mobile (remplacé par sticky-cta) ---- */ .floating-cta { display: none !important; } /* ---- MOBILE-STICKY-CTA : désactivé (en attente d'un design pensé par agents DOAKEN custom) ---- */ .mobile-sticky-cta, .mobile-sticky-cta.visible { display: none !important; } } /* ============================================================ MOBILE — TRES PETITS ECRANS (<= 480px) : fallback 1 colonne ============================================================ */ @media (max-width: 480px) { /* Grids qui doivent passer en 1 colonne sur les petits écrans */ .stat-bar, .statbar, .statbar-inner, .stats-grid, .benefits-grid, .bnf-grid, .feat-grid, .reassurance-grid, .platforms-grid, .extract-grid, .constellation, .method-guarantees { grid-template-columns: 1fr !important; gap: 12px !important; } /* Typographie encore plus condensée */ h1, .h1, .hero-title, .hero-h1 { font-size: clamp(24px, 7vw, 30px); } /* Padding section réduit pour gagner du width */ .statbar, .compat, .cta-final-f, .hero, .hero-sec { padding-left: 16px !important; padding-right: 16px !important; } } /* ============================================================ MOBILE-CAROUSEL — pattern CSS natif (scroll-snap) Utilisable sur n'importe quelle page en wrappant un set de cards dans .mobile-carousel + dots indicateurs en .mobile-carousel-dots ============================================================ */ @media (max-width: 768px) { .mobile-carousel { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; padding: 0 20px 8px; scroll-padding: 0 20px; margin: 0 -20px; } .mobile-carousel::-webkit-scrollbar { display: none; } .mobile-carousel > * { flex: 0 0 85%; scroll-snap-align: center; scroll-snap-stop: always; } .mobile-carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 16px 0 8px; } .mobile-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d9e0; transition: background 0.2s, width 0.2s, border-radius 0.2s; border: none; padding: 0; cursor: pointer; } .mobile-carousel-dot.active { background: #4f46e5; width: 24px; border-radius: 4px; } } /* ============================================================ ACCORDEON FOOTER MOBILE —
/ natif ============================================================ */ @media (max-width: 768px) { .footer-column.mobile-accordion { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-column.mobile-accordion details summary, .footer-column.mobile-accordion .footer-column-title { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; color: inherit; } .footer-column.mobile-accordion details summary::-webkit-details-marker { display: none; } .footer-column.mobile-accordion details summary::after { content: '＋'; font-size: 18px; line-height: 1; transition: transform 0.2s; opacity: 0.6; } .footer-column.mobile-accordion details[open] summary::after { content: '−'; } .footer-column.mobile-accordion details ul, .footer-column.mobile-accordion details > div { padding: 0 0 16px; } } /* ============================================================ ACCORDEON FAQ MOBILE —
/ avec chevron ============================================================ */ @media (max-width: 768px) { .faq-item details summary, .faq-card summary, .faq-q { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; } .faq-item details summary::-webkit-details-marker, .faq-card summary::-webkit-details-marker { display: none; } .faq-item details summary::after, .faq-card summary::after { content: ''; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; flex-shrink: 0; opacity: 0.6; } .faq-item details[open] summary::after, .faq-card details[open] summary::after, details[open] .faq-q::after { transform: rotate(-135deg); } } /* ============================================================ PATTERN : TABLE → CARDS MOBILE Utilisable sur n'importe quel tableau de comparaison en ajoutant .mobile-as-cards sur l'élément ou wrapper ============================================================ */ @media (max-width: 768px) { .mobile-as-cards table, table.mobile-as-cards, .mobile-as-cards thead { display: none; } .mobile-as-cards tbody, .mobile-as-cards-body { display: flex; flex-direction: column; gap: 16px; } .mobile-as-cards tr, .mobile-as-cards .row { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px; gap: 8px; } .mobile-as-cards td, .mobile-as-cards .cell { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05); gap: 12px; } .mobile-as-cards td:last-child, .mobile-as-cards .cell:last-child { border-bottom: none; } .mobile-as-cards td::before, .mobile-as-cards .cell[data-label]::before { content: attr(data-label); font-weight: 600; font-size: 13px; color: #64748B; flex-shrink: 0; } } /* ============================================================ PREFERS-REDUCED-MOTION : étendu à toutes les animations ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ MOBILE HOMEPAGE — COMPOSANTS NATIFS (mob-* namespace) Design mobile-first dédié, conçu par agents experts DOAKEN. ============================================================ */ @media (max-width: 768px) { .mobile-only { display: block !important; } .desktop-only { display: none !important; } .mob-home { --mob-bg: #FFFFFF; --mob-bg-soft: #F4F7FB; --mob-bg-tint: #EAF1F8; --mob-ink: #001A3D; --mob-ink-2: #4A5A7A; --mob-line: rgba(0, 26, 61, 0.08); --mob-line-strong: rgba(0, 26, 61, 0.14); --mob-glace: #DCE9F7; --mob-gold: #F4DCB8; --mob-accent: #FF6B35; --mob-marine: #003D7A; --mob-sky: #5DA4D4; --mob-radius: 18px; --mob-radius-sm: 12px; --mob-shadow: 0 8px 24px -10px rgba(0, 26, 61, 0.18); background: var(--mob-bg); color: var(--mob-ink); font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; } .mob-nav { position: fixed; inset: 0 0 auto 0; z-index: 200; height: 60px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--mob-line); } .mob-nav-logo { font-family: 'Mokoto', 'Geist', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.18em; color: var(--mob-ink); text-decoration: none; } .mob-nav-burger { width: 44px; height: 44px; background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; cursor: pointer; border-radius: 10px; } .mob-nav-burger span { display: block; width: 20px; height: 1.6px; background: var(--mob-ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .mob-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 26, 61, 0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 250; } .mob-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .mob-drawer { position: fixed; inset: 0; width: 100vw; max-width: 100vw; background: var(--mob-bg); transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,.36,1); display: flex; flex-direction: column; z-index: 260; } .mob-drawer.is-open { transform: translateX(0); } .mob-drawer-head { padding: 18px 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--mob-line); } .mob-drawer-title { font-family: 'Sentient', serif; font-size: 18px; font-weight: 500; color: var(--mob-ink); } .mob-drawer-close { width: 44px; height: 44px; background: transparent; border: 0; border-radius: 10px; color: var(--mob-ink); cursor: pointer; } .mob-drawer-close svg { width: 22px; height: 22px; } .mob-drawer-body { flex: 1; overflow-y: auto; padding: 8px 6px; } .mob-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; margin: 0 6px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--mob-ink); min-height: 52px; text-decoration: none; } .mob-drawer-link:active { background: var(--mob-bg-soft); } .mob-drawer-link--muted { color: var(--mob-ink-2); font-weight: 400; } .mob-drawer-accordion { margin: 0 6px; border-radius: 12px; } .mob-drawer-accordion summary { list-style: none; padding: 16px 18px; font-size: 16px; font-weight: 500; color: var(--mob-ink); display: flex; align-items: center; justify-content: space-between; cursor: pointer; min-height: 52px; border-radius: 12px; } .mob-drawer-accordion summary::-webkit-details-marker { display: none; } .mob-drawer-chevron { width: 10px; height: 10px; border-right: 1.8px solid var(--mob-ink); border-bottom: 1.8px solid var(--mob-ink); transform: rotate(45deg); transition: transform .2s ease; opacity: 0.6; } .mob-drawer-accordion[open] .mob-drawer-chevron { transform: rotate(-135deg); } .mob-drawer-accordion ul { list-style: none; padding: 4px 6px 12px; } .mob-drawer-accordion li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px; color: var(--mob-ink-2); min-height: 44px; text-decoration: none; } .mob-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px var(--mob-line); } .mob-drawer-foot { padding: 16px 20px 24px; border-top: 1px solid var(--mob-line); background: var(--mob-bg-soft); } .mob-drawer-cta { width: 100%; } .mob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 100px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; border: 0; transition: transform .12s ease, background .15s ease; text-align: center; cursor: pointer; text-decoration: none; } .mob-btn svg { width: 18px; height: 18px; } .mob-btn--primary { background: var(--mob-accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(255, 107, 53, 0.55); } .mob-btn--primary:active { transform: scale(0.985); background: #ED5A24; } .mob-btn--ghost { background: transparent; color: var(--mob-ink); border: 1px solid var(--mob-line-strong); } .mob-btn--ghost:active { background: var(--mob-bg-soft); } .mob-btn--invert { background: #fff; color: var(--mob-ink); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); width: 100%; } .mob-btn--invert:active { transform: scale(0.985); background: #F2F5FA; } .mob-main { padding-top: 60px; } .mob-hero { padding: 28px 20px 36px; text-align: left; } .mob-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 100px; background: var(--mob-bg-tint); font-size: 12px; font-weight: 500; color: var(--mob-ink-2); margin-bottom: 20px; } .mob-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15); } .mob-h1 { font-family: 'Sentient', 'Geist', serif; font-size: clamp(32px, 8vw, 40px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 500; color: var(--mob-ink); margin: 0 0 14px; } .mob-hero-sub { font-size: 16px; line-height: 1.5; color: var(--mob-ink-2); margin: 0 0 24px; } .mob-cta-stack { display: flex; flex-direction: column; gap: 10px; margin: 28px 0 16px; padding: 0 4px; } .mob-cta-stack .mob-btn { width: 100%; } .mob-trust { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--mob-ink-2); padding: 0; margin: 0; } .mob-trust li { display: inline-flex; align-items: center; gap: 6px; } .mob-trust-flag { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #002654 33.33%, #FFF 33.33% 66.66%, #CE1126 66.66%); box-shadow: 0 0 0 1px rgba(0,0,0,0.06); } .mob-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mob-ink-2); opacity: 0.4; } /* ---------- WALL MOBILE : mur de briques mosaïque (palette DOAKEN officielle) Reproduit l'esthétique du .wall desktop (3 lignes, briques produit + décoratives, rotations légères, animation cascade). Adapté pour 335-375px viewport. ---------- */ .mob-wall { margin: 28px -20px 0; padding: 16px 14px 24px; background: linear-gradient(180deg, var(--mob-bg-tint) 0%, transparent 100%); position: relative; overflow: hidden; } .mob-wall-stage { position: relative; height: 240px; width: 100%; overflow: hidden; } .mob-brick { position: absolute; height: 60px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; opacity: 0; transform-origin: 50% 50%; animation: mobBrickDrop 0.6s cubic-bezier(.34, 1.4, .64, 1) forwards; box-shadow: 0 6px 16px -6px rgba(0, 26, 61, 0.18); } /* Briques décoratives grises (faux blocs de remplissage, comme le desktop) */ .mob-brick--blank { background: rgba(0, 26, 61, 0.06); box-shadow: none; pointer-events: none; } /* Briques produit colorées (palette officielle DOAKEN) */ .mob-brick--analyse { background: #001A3D; color: #fff; } .mob-brick--memoire { background: #DCE9F7; color: #001A3D; } .mob-brick--score { background: #F4DCB8; color: #6B3410; } .mob-brick--veille { background: #5DA4D4; color: #fff; } .mob-brick--dpgf { background: #FF6B35; color: #fff; } .mob-brick--coffre { background: #003D7A; color: #fff; } /* === LIGNE 1 (top 0) === Pas de débordement horizontal, tout dans 0%-100% === */ .mob-brick--b1 { top: 0; left: 0%; width: 16%; --rot: -1.5deg; animation-delay: 0.05s; } .mob-brick--analyse { top: 0; left: 18%; width: 40%; --rot: -2deg; animation-delay: 0.15s; } .mob-brick--memoire { top: 0; left: 60%; width: 40%; --rot: 1.5deg; animation-delay: 0.25s; } /* === LIGNE 2 (top 78px) === */ .mob-brick--score { top: 78px; left: 0%; width: 34%; --rot: -3deg; animation-delay: 0.35s; } .mob-brick--veille { top: 78px; left: 36%; width: 28%; --rot: 2deg; animation-delay: 0.45s; } .mob-brick--b2 { top: 78px; left: 66%; width: 34%; --rot: -0.5deg; animation-delay: 0.55s; } /* === LIGNE 3 (top 156px) === */ .mob-brick--b3 { top: 156px; left: 0%; width: 18%; --rot: 1deg; animation-delay: 0.65s; } .mob-brick--dpgf { top: 156px; left: 20%; width: 42%; --rot: 0deg; animation-delay: 0.75s; } .mob-brick--coffre { top: 156px; left: 64%; width: 36%; --rot: -2deg; animation-delay: 0.85s; } @keyframes mobBrickDrop { 0% { opacity: 0; transform: translateY(-60px) rotate(0deg); } 60% { opacity: 1; transform: translateY(6px) rotate(var(--rot, 0deg)); } 80% { transform: translateY(-2px) rotate(var(--rot, 0deg)); } 100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)); } } /* prefers-reduced-motion : pas d'animation, briques visibles statiques */ @media (prefers-reduced-motion: reduce) { .mob-brick { opacity: 1 !important; animation: none !important; transform: rotate(var(--rot, 0deg)) !important; } } /* Mini-bandeau discret OECP : 1 ligne, signal de crédibilité, pas le héros */ .mob-statline { margin: 0 20px 8px; padding: 10px 14px; background: var(--mob-bg-soft); border-radius: 10px; border-left: 2px solid var(--mob-accent); } .mob-statline-claim { margin: 0; font-size: 12px; line-height: 1.45; color: var(--mob-ink-2); font-weight: 400; } .mob-statline-claim strong { color: var(--mob-ink); font-weight: 600; } .mob-statline-src { color: var(--mob-ink-2); font-size: 10.5px; letter-spacing: 0.02em; opacity: 0.85; } .mob-section-head { padding: 0 20px; margin-bottom: 22px; } .mob-section-eyebrow { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mob-ink-2); margin-bottom: 10px; } .mob-section-eyebrow--accent { color: var(--mob-accent); } .mob-h2 { font-family: 'Sentient', 'Geist', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--mob-ink); margin: 0; } .mob-carousel { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding: 6px 20px 8px; scroll-padding-left: 20px; } .mob-carousel::-webkit-scrollbar { display: none; } .mob-features { padding: 12px 0 36px; } .mob-feat-card { flex: 0 0 82%; scroll-snap-align: start; scroll-snap-stop: always; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 18px; display: flex; flex-direction: column; box-shadow: var(--mob-shadow); } .mob-feat-illu { height: 180px; border-radius: var(--mob-radius-sm); background: var(--mob-feat-bg, var(--mob-bg-tint)); margin: -4px -4px 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mob-feat-illu img { width: 100%; height: 100%; object-fit: contain; padding: 14px; } .mob-feat-tag { display: inline-flex; align-items: center; align-self: flex-start; height: 22px; padding: 0 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: color-mix(in srgb, var(--mob-feat-c, var(--mob-ink)) 12%, transparent); color: var(--mob-feat-c, var(--mob-ink)); margin-bottom: 10px; } .mob-feat-h3 { font-family: 'Sentient', serif; font-size: 18px; line-height: 1.25; font-weight: 500; letter-spacing: -0.015em; color: var(--mob-ink); margin: 0 0 8px; } .mob-feat-desc { font-size: 14px; line-height: 1.5; color: var(--mob-ink-2); margin: 0 0 14px; flex: 1; } .mob-feat-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mob-ink); align-self: flex-start; text-decoration: none; } .mob-feat-link svg { width: 14px; height: 14px; } .mob-dots { display: flex; justify-content: center; gap: 6px; padding: 20px 20px 0; } .mob-dot-btn { width: 24px; height: 24px; padding: 0; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mob-dot-btn span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--mob-line-strong); transition: width .2s ease, border-radius .2s ease, background .2s ease; } .mob-dot-btn.is-active span { width: 18px; border-radius: 4px; background: var(--mob-ink); } .mob-proof { padding: 36px 0 36px; background: linear-gradient(180deg, #fff 0%, var(--mob-bg-soft) 100%); } .mob-mac { margin: 0 20px; background: #fff; border: 1px solid var(--mob-line); border-radius: var(--mob-radius); overflow: hidden; box-shadow: 0 20px 50px -20px rgba(0, 26, 61, 0.25); } .mob-mac-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #F2F5FA; border-bottom: 1px solid var(--mob-line); } .mob-mac-dots { display: flex; gap: 6px; flex-shrink: 0; } .mob-mac-dot { width: 10px; height: 10px; border-radius: 50%; } .mob-mac-dot--r { background: #FF5F57; } .mob-mac-dot--y { background: #FEBC2E; } .mob-mac-dot--g { background: #28C840; } .mob-mac-url { flex: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #fff; border: 1px solid var(--mob-line); border-radius: 6px; font-size: 11px; color: var(--mob-ink-2); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-mac-url svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .55; } .mob-mac-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .mob-toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #ECFDF5; border: 1px solid #BBF7D0; color: #065F46; } .mob-toast-ico { width: 26px; height: 26px; border-radius: 50%; background: #10B981; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .mob-toast-ico svg { width: 14px; height: 14px; } .mob-toast strong { display: block; font-size: 13px; font-weight: 600; color: #065F46; line-height: 1.25; } .mob-toast span { display: block; font-size: 11px; color: #047857; margin-top: 2px; } .mob-mac-title { display: flex; flex-direction: column; gap: 4px; } .mob-mac-tag { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mob-ink-2); font-weight: 600; } .mob-mac-title h4 { font-family: 'Sentient', serif; font-size: 20px; line-height: 1.1; color: var(--mob-ink); font-weight: 500; margin: 0; } .mob-mac-score { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--mob-bg-tint); border-radius: 12px; } .mob-mac-score-num { font-family: 'Sentient', serif; font-size: 44px; line-height: 1; color: var(--mob-ink); font-weight: 500; letter-spacing: -0.03em; display: inline-flex; align-items: baseline; gap: 2px; } .mob-mac-score-num small { font-size: 16px; color: var(--mob-ink-2); font-weight: 500; } .mob-mac-go { display: inline-block; background: #10B981; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; margin-bottom: 4px; } .mob-mac-score-meta p { font-size: 12px; color: var(--mob-ink-2); margin: 0; } .mob-mac-criteria { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .mob-mac-crit-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--mob-ink-2); margin-bottom: 4px; } .mob-mac-crit-head span:last-child { font-family: 'Sentient', serif; font-size: 13px; color: var(--mob-ink); font-weight: 500; } .mob-mac-crit-bar { height: 4px; background: var(--mob-bg-tint); border-radius: 4px; overflow: hidden; } .mob-mac-crit-bar span { display: block; height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.32,.72,.36,1); } .mob-proof-cta { display: flex; margin: 24px 20px 0; width: calc(100% - 40px); } .mob-usecases { padding: 36px 0 36px; } .mob-uc-card { flex: 0 0 86%; scroll-snap-align: start; background: var(--mob-ink); color: #fff; border-radius: var(--mob-radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 14px 36px -16px rgba(0, 26, 61, 0.4); } .mob-uc-tag { align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 100px; background: rgba(255, 107, 53, 0.18); color: var(--mob-accent); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .mob-uc-h3 { font-family: 'Sentient', serif; font-size: 20px; line-height: 1.2; font-weight: 500; margin: 0; color: #fff; } .mob-uc-desc { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0; } .mob-uc-stats { margin-top: auto; display: flex; align-items: center; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); } .mob-uc-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--mob-sky), var(--mob-marine)); display: inline-flex; align-items: center; justify-content: center; font-family: 'Sentient', serif; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 0.05em; flex-shrink: 0; } .mob-uc-figs { flex: 1; display: flex; gap: 16px; } .mob-uc-figs > div { display: flex; flex-direction: column; gap: 2px; } .mob-uc-figs strong { font-family: 'Sentient', serif; font-size: 18px; font-weight: 500; color: var(--mob-gold); letter-spacing: -0.01em; } .mob-uc-figs small { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; } .mob-workflow { padding: 36px 0 40px; background: var(--mob-bg-soft); } .mob-timeline { list-style: none; padding: 4px 20px 0; margin: 0; position: relative; } .mob-step { display: flex; gap: 16px; position: relative; padding-bottom: 22px; } .mob-step:not(.mob-step--last)::before { content: ''; position: absolute; left: 22px; top: 48px; bottom: 0; width: 0; border-left: 2px dashed var(--mob-accent); opacity: 0.55; } .mob-step-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mob-ink); color: #fff; font-family: 'Sentient', serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px -6px rgba(0, 26, 61, 0.4); position: relative; z-index: 2; } .mob-step-num--end { background: var(--mob-accent); box-shadow: 0 6px 16px -6px rgba(255, 107, 53, 0.55); } .mob-step-body { flex: 1; padding-top: 2px; } .mob-step-body h4 { font-family: 'Sentient', serif; font-size: 17px; font-weight: 500; color: var(--mob-ink); margin: 0 0 4px; letter-spacing: -0.01em; } .mob-step-body p { font-size: 13px; color: var(--mob-ink-2); line-height: 1.5; margin: 0 0 8px; } .mob-step-time { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mob-accent); background: rgba(255, 107, 53, 0.1); padding: 3px 10px; border-radius: 100px; } .mob-benefits { padding: 36px 0 36px; } .mob-benefits-list { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; } .mob-bf-card { display: flex; align-items: flex-start; gap: 14px; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 16px; } .mob-bf-illu { width: 60px; height: 60px; border-radius: 14px; background: var(--mob-bg-tint); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mob-bf-illu img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .mob-bf-card h3 { font-family: 'Sentient', serif; font-size: 15px; line-height: 1.2; font-weight: 500; margin: 2px 0 4px; color: var(--mob-ink); } .mob-bf-card p { font-size: 13px; color: var(--mob-ink-2); line-height: 1.45; margin: 0; } .mob-final { margin: 36px 20px 36px; background: var(--mob-ink); color: #fff; border-radius: 24px; padding: 32px 22px 28px; position: relative; overflow: hidden; } .mob-final::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.35) 0%, transparent 70%); pointer-events: none; } .mob-final-h2 { font-family: 'Sentient', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: #fff; margin: 0 0 10px; position: relative; } .mob-final-sub { font-size: 14px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin: 0 0 22px; position: relative; } .mob-final-form { display: flex; flex-direction: column; gap: 12px; position: relative; } .mob-field { display: flex; flex-direction: column; gap: 6px; } .mob-field > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .mob-field input { height: 52px !important; padding: 0 16px !important; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; font-size: 16px !important; color: #fff; font-family: inherit; transition: border .15s ease, background .15s ease; } .mob-field input::placeholder { color: rgba(255, 255, 255, 0.35); } .mob-field input:focus { outline: none; border-color: var(--mob-accent); background: rgba(255, 255, 255, 0.1); } .mob-final-rgpd { font-size: 11px; color: rgba(255, 255, 255, 0.5); line-height: 1.5; margin: 4px 0 0; } .mob-final-rgpd a { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 2px; } .mob-footer { background: var(--mob-ink); color: rgba(255,255,255,0.7); padding: 32px 20px 24px; } .mob-footer-brand { margin-bottom: 12px; } .mob-footer-logo { display: inline-block; font-family: 'Mokoto', 'Geist', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.18em; color: #fff; margin-bottom: 10px; text-decoration: none; } .mob-footer-brand p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 28ch; } .mob-footer-accordions { margin: 16px 0 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .mob-footer-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mob-footer-acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 14px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .mob-footer-acc summary::-webkit-details-marker { display: none; } .mob-acc-chevron { width: 9px; height: 9px; border-right: 1.6px solid rgba(255,255,255,0.65); border-bottom: 1.6px solid rgba(255,255,255,0.65); transform: rotate(45deg); transition: transform .2s ease; } .mob-footer-acc[open] .mob-acc-chevron { transform: rotate(-135deg); } .mob-footer-acc ul { list-style: none; padding: 0 0 16px; display: flex; flex-direction: column; gap: 4px; } .mob-footer-acc li a { display: block; padding: 10px 0; font-size: 14px; color: rgba(255, 255, 255, 0.65); min-height: 44px; line-height: 1.5; text-decoration: none; } .mob-footer-bottom { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.01em; } } /* ============================================================ MOBILE SOLUTIONS — COMPOSANTS NATIFS (.mob-sol-* namespace) Hérite des tokens .mob-home via classe partagée sur le wrapper ============================================================ */ @media (max-width: 768px) { .mob-sol-hero { padding: 84px 20px 28px; background: linear-gradient(180deg, var(--mob-bg-tint) 0%, transparent 100%); } .mob-sol-hero .mob-h1 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sol-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mob-accent); } .mob-sol .mob-eyebrow { background: rgba(255,107,53,0.08); color: var(--mob-accent); margin-bottom: 18px; } .mob-sol-profils .mob-h2 em, .mob-sol-workflow .mob-h2 em, .mob-sol-compare .mob-h2 em, .mob-sol-faq .mob-h2 em, .mob-sol-cta-h2 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sol-profils { padding: 32px 0 36px; } .mob-sol-cards { display: flex; flex-direction: column; gap: 16px; padding: 0 20px; } .mob-sol-card { position: relative; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 24px 20px 20px; display: flex; flex-direction: column; box-shadow: var(--mob-shadow); } .mob-sol-card--featured { border: 2px solid var(--mob-accent); padding-top: 30px; box-shadow: 0 16px 36px -14px rgba(255, 107, 53, 0.28); } .mob-sol-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--mob-accent); color: #fff; font-family: 'Geist', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(255,107,53,0.5); } .mob-sol-card-h3 { font-family: 'Sentient', serif; font-size: 24px; line-height: 1.1; font-weight: 500; color: var(--mob-ink); letter-spacing: -0.02em; margin: 0 0 10px; } .mob-sol-card-accroche { font-size: 14px; font-style: italic; line-height: 1.5; color: var(--mob-ink-2); margin: 0 0 10px; } .mob-sol-card-promesse { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--mob-ink); margin: 0 0 18px; } .mob-sol-card-points { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 9px; } .mob-sol-card-points li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--mob-ink-2); } .mob-sol-card-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,107,53,0.12); color: var(--mob-accent); font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; } .mob-sol-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 20px; border-radius: 100px; background: var(--mob-ink); color: #fff; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: transform .12s ease, background .15s ease; margin-top: auto; } .mob-sol-cta:active { transform: scale(0.985); background: #002859; } .mob-sol-card--featured .mob-sol-cta { background: var(--mob-accent); box-shadow: 0 6px 18px -6px rgba(255, 107, 53, 0.5); } .mob-sol-card--featured .mob-sol-cta:active { background: #ED5A24; } .mob-sol-footnote { padding: 22px 20px 0; font-size: 12.5px; line-height: 1.55; color: var(--mob-ink-2); text-align: center; } .mob-sol-trust { padding: 28px 20px 8px; } .mob-sol-trust-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mob-sol-trust-grid li { background: var(--mob-bg-soft); border: 1px solid var(--mob-line); border-radius: 14px; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; } .mob-sol-trust-ico { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,107,53,0.1); color: var(--mob-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; } .mob-sol-trust-ico svg { width: 16px; height: 16px; } .mob-sol-trust-grid strong { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink); letter-spacing: -0.005em; } .mob-sol-trust-grid span:last-child { font-size: 11.5px; line-height: 1.35; color: var(--mob-ink-2); } .mob-sol-workflow { padding-top: 32px; padding-bottom: 36px; margin-top: 14px; } .mob-sol-compare { padding: 36px 0 32px; background: var(--mob-bg-soft); } .mob-sol-compare-sub { font-size: 14px; line-height: 1.5; color: var(--mob-ink-2); margin: 10px 0 0; } .mob-sol-compare-cards { display: flex; flex-direction: column; gap: 18px; padding: 6px 20px 0; } .mob-sol-cmp { position: relative; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 22px 18px 18px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; } .mob-sol-cmp--featured { border: 2px solid var(--mob-accent); padding-top: 30px; box-shadow: 0 18px 38px -14px rgba(255, 107, 53, 0.3); } .mob-sol-cmp-head { margin-bottom: 14px; } .mob-sol-cmp-h3 { font-family: 'Sentient', serif; font-size: 22px; line-height: 1.1; font-weight: 500; color: var(--mob-ink); letter-spacing: -0.02em; margin: 0 0 4px; } .mob-sol-cmp-tag { font-size: 12.5px; color: var(--mob-ink-2); margin: 0; letter-spacing: 0.01em; } .mob-sol-cmp-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; } .mob-sol-cmp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mob-line); } .mob-sol-cmp-list li:last-child { border-bottom: 0; } .mob-sol-cmp-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .mob-sol-cmp-list strong { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink); letter-spacing: -0.005em; } .mob-sol-cmp-list strong + span { font-size: 12.5px; color: var(--mob-ink-2); line-height: 1.4; } .mob-sol-cmp-ico { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 14px; line-height: 1; } .mob-sol-cmp-ico--yes { background: rgba(255,107,53,0.12); color: var(--mob-accent); } .mob-sol-cmp-ico--yes svg { width: 12px; height: 12px; } .mob-sol-cmp-ico--no { background: var(--mob-bg-tint); color: var(--mob-ink-2); font-weight: 500; } .mob-sol-faq { padding: 36px 0 32px; } .mob-sol-faq-list { padding: 0 20px; display: flex; flex-direction: column; } .mob-sol-faq-item { border-bottom: 1px solid var(--mob-line); } .mob-sol-faq-item:first-child { border-top: 1px solid var(--mob-line); } .mob-sol-faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600; color: var(--mob-ink); line-height: 1.35; letter-spacing: -0.01em; } .mob-sol-faq-item summary::-webkit-details-marker { display: none; } .mob-sol-faq-chev { flex-shrink: 0; width: 10px; height: 10px; border-right: 1.8px solid var(--mob-ink); border-bottom: 1.8px solid var(--mob-ink); transform: rotate(45deg); transition: transform .25s ease; opacity: 0.55; } .mob-sol-faq-item[open] .mob-sol-faq-chev { transform: rotate(-135deg); } .mob-sol-faq-ans { padding: 0 0 18px; } .mob-sol-faq-ans p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mob-ink-2); } .mob-sol-cta-final { padding: 8px 20px 36px; scroll-margin-top: 72px; } .mob-sol-cta-card { background: var(--mob-ink); color: #fff; border-radius: 24px; padding: 32px 22px 28px; position: relative; overflow: hidden; } .mob-sol-cta-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.32) 0%, transparent 70%); pointer-events: none; } .mob-sol-cta-eyebrow { position: relative; display: inline-block; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 12px; } .mob-sol-cta-h2 { position: relative; font-family: 'Sentient', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: #fff; margin: 0 0 10px; } .mob-sol-cta-sub { position: relative; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0 0 22px; } .mob-sol-form { position: relative; display: flex; flex-direction: column; gap: 14px; } .mob-sol-field { display: flex; flex-direction: column; gap: 6px; } .mob-sol-field > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .mob-sol-field input { height: 52px; padding: 0 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; font-size: 16px; color: #fff; font-family: inherit; transition: border .15s ease, background .15s ease; -webkit-appearance: none; appearance: none; } .mob-sol-field input::placeholder { color: rgba(255,255,255,0.38); } .mob-sol-field input:focus { outline: none; border-color: var(--mob-accent); background: rgba(255,255,255,0.1); } .mob-sol-select-wrap { position: relative; } .mob-sol-select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.8px solid rgba(255,255,255,0.65); border-bottom: 1.8px solid rgba(255,255,255,0.65); transform: rotate(45deg); pointer-events: none; } .mob-sol-field select { width: 100%; height: 52px; padding: 0 44px 0 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; font-size: 16px; color: #fff; font-family: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; } .mob-sol-field select:focus { outline: none; border-color: var(--mob-accent); background: rgba(255,255,255,0.1); } .mob-sol-field select option { color: var(--mob-ink); background: #fff; } .mob-sol-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 6px; background: #fff; color: var(--mob-ink); border: 0; border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: transform .12s ease, background .15s ease; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.35); } .mob-sol-submit svg { width: 16px; height: 16px; } .mob-sol-submit:active { transform: scale(0.985); background: #F2F5FA; } .mob-sol-form-rgpd { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.5); margin: 8px 0 0; text-align: center; } @media (max-width: 360px) { .mob-sol-cmp-list strong { font-size: 12.5px; } .mob-sol-cmp-list strong + span { font-size: 12px; } .mob-sol-card-h3, .mob-sol-cmp-h3 { font-size: 21px; } } } /* ============================================================ MOBILE SOLUTIONS — Carrousel profils + Tabs comparatif (refonte mobile intelligente) ============================================================ */ @media (max-width: 768px) { /* Carrousel profils : swipe horizontal avec snap, Croissance au centre par défaut */ .mob-sol-prof-carousel { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; padding: 12px 20px 18px; scroll-padding: 0 20px; margin: 0 -20px; } .mob-sol-prof-carousel::-webkit-scrollbar { display: none; } .mob-sol-prof-carousel .mob-sol-card { flex: 0 0 84%; scroll-snap-align: center; scroll-snap-stop: always; min-height: 380px; } /* Dots carrousel profils */ .mob-sol-prof-dots { display: flex; justify-content: center; gap: 6px; padding: 6px 0 12px; } .mob-sol-prof-dot { width: 24px; height: 24px; padding: 0; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mob-sol-prof-dot span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--mob-line-strong); transition: width .2s ease, border-radius .2s ease, background .2s ease; } .mob-sol-prof-dot.is-active span { width: 22px; border-radius: 4px; background: var(--mob-accent); } /* TABS COMPARATIF : 1 seul panneau visible à la fois */ .mob-sol-tabs { display: flex; gap: 0; padding: 4px; margin: 8px 20px 20px; background: var(--mob-bg-soft); border: 1px solid var(--mob-line); border-radius: 14px; } .mob-sol-tab { flex: 1; background: transparent; border: 0; padding: 10px 8px; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink-2); cursor: pointer; border-radius: 10px; transition: background .15s ease, color .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; letter-spacing: -0.005em; } .mob-sol-tab:active { background: rgba(0, 26, 61, 0.04); } .mob-sol-tab.is-active { background: #fff; color: var(--mob-ink); box-shadow: 0 2px 8px -2px rgba(0, 26, 61, 0.12); } .mob-sol-tab-badge { color: var(--mob-accent); font-size: 10px; margin-left: 2px; } /* Panneaux comparatif */ .mob-sol-tab-panels { padding: 0 20px; } .mob-sol-cmp-panel { background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 16px 16px 14px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; } /* Force hidden attribute respect (sinon display:flex écrase le default hidden) */ .mob-sol-cmp-panel[hidden] { display: none !important; } .mob-sol-cmp-panel--featured { border: 2px solid var(--mob-accent); box-shadow: 0 18px 38px -14px rgba(255, 107, 53, 0.25); } .mob-sol-cmp-panel .mob-sol-cmp-tag { font-size: 12.5px; color: var(--mob-ink-2); margin: 0 0 10px; font-weight: 500; } .mob-sol-cmp-panel .mob-sol-cmp-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; } .mob-sol-cmp-panel .mob-sol-cmp-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mob-line); } .mob-sol-cmp-panel .mob-sol-cmp-list li:last-child { border-bottom: 0; } .mob-sol-cmp-panel .mob-sol-cmp-list li > span:last-child { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; flex: 1; min-width: 0; } .mob-sol-cmp-panel .mob-sol-cmp-list strong { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink); letter-spacing: -0.005em; } .mob-sol-cmp-panel .mob-sol-cmp-list strong + span { font-size: 12px; color: var(--mob-ink-2); line-height: 1.3; text-align: right; white-space: nowrap; } .mob-sol-cmp-panel .mob-sol-cmp-ico { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .mob-sol-cmp-panel .mob-sol-cmp-ico svg { width: 11px; height: 11px; } .mob-sol-cmp-panel .mob-sol-cmp-ico--yes { background: rgba(16,185,129,0.12); color: #059669; } .mob-sol-cmp-panel .mob-sol-cmp-ico--no { background: rgba(0,26,61,0.06); color: rgba(0,26,61,0.35); } } /* ============================================================ MOBILE SOLUTIONS — Tabs comparatif : feedback visuel switch panel ============================================================ */ @media (max-width: 768px) { /* Sticky tabs : restent visibles si on scroll dans le panneau */ .mob-sol-tabs { position: sticky; top: 64px; /* sous la nav mobile fixe (60px + air) */ z-index: 50; } /* Fade-in animation au switch de panneau */ .mob-sol-cmp-panel.is-entering { animation: mobSolPanelIn 0.26s cubic-bezier(.32,.72,.36,1) both; } @keyframes mobSolPanelIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } /* Scroll-margin pour l'ancre des tabs (au cas où on link directement) */ .mob-sol-tabs { scroll-margin-top: 80px; } @media (prefers-reduced-motion: reduce) { .mob-sol-cmp-panel.is-entering { animation: none; } } } /* ============================================================ MOBILE — ANTI-ORPHELINS (text-wrap balance + ico--no croix) ============================================================ */ @media (max-width: 768px) { .mob-h1, .mob-h2, .mob-h3, .mob-sol-card-h3, .mob-sol-cmp-h3, .mob-sol-cta-h2, .mob-feat-h3, .mob-uc-h3, .mob-final-h2, .mob-step-body h4, .mob-bf-card h3 { text-wrap: balance; } .mob-hero-sub, .mob-sol-card-accroche, .mob-sol-cmp-tag, .mob-uc-desc, .mob-step-body p, .mob-bf-card p { text-wrap: pretty; } /* Icon "non inclus" : SVG croix discrète (au lieu d'un tiret seul orphelin) */ .mob-sol-cmp-ico--no { background: var(--mob-bg-tint); color: var(--mob-ink-2); } .mob-sol-cmp-ico--no svg { width: 11px; height: 11px; } } /* ============================================================ MOBILE SECURITE — namespace .mob-sec-* Hero + Fondations 2x2 + Statbar + Tabs 5 sections + Vendors carousel + DPA dark + Headers pills + FAQ + CTA final ============================================================ */ @media (max-width: 768px) { .mob-sec-hero { padding: 84px 20px 24px; background: linear-gradient(180deg, var(--mob-bg-tint) 0%, transparent 100%); } .mob-sec .mob-eyebrow { background: rgba(255, 107, 53, 0.08); color: var(--mob-accent); margin-bottom: 18px; } .mob-sec-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mob-accent); box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18); } .mob-sec-hero .mob-h1 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sec-fond { padding: 32px 20px 24px; } .mob-sec-fond-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mob-sec-fond-card { background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius-sm); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; min-height: 138px; } .mob-sec-fond-ico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--c); margin-bottom: 4px; } .mob-sec-fond-ico svg { width: 18px; height: 18px; } .mob-sec-fond-card strong { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 700; color: var(--mob-ink); letter-spacing: -0.01em; } .mob-sec-fond-card > span:last-child { font-size: 12.5px; line-height: 1.45; color: var(--mob-ink-2); } .mob-sec-statbar { margin: 28px 20px; background: var(--mob-ink); color: #fff; border-radius: 20px; padding: 26px 22px 22px; position: relative; overflow: hidden; } .mob-sec-statbar::before { content: ''; position: absolute; inset: -40% -40% auto auto; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,107,53,0.30) 0%, transparent 70%); pointer-events: none; } .mob-sec-stat { position: relative; display: flex; align-items: baseline; gap: 12px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.10); } .mob-sec-stat-val { font-family: 'Sentient', serif; font-size: 56px; line-height: 0.9; font-weight: 600; letter-spacing: -0.04em; color: var(--mob-accent); flex-shrink: 0; } .mob-sec-stat-val--sm { font-size: 22px; color: #fff; } .mob-sec-stat-lbl { font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.78); font-weight: 500; } .mob-sec-stat-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mob-sec-stat-row > div { display: flex; flex-direction: column; gap: 4px; } .mob-sec-stat-lbl-sm { font-size: 11px; line-height: 1.35; color: rgba(255,255,255,0.55); letter-spacing: 0.01em; } .mob-sec-detail { padding: 12px 0 28px; } .mob-sec-tabs { display: flex; gap: 0; padding: 4px; margin: 8px 20px 18px; background: var(--mob-bg-soft); border: 1px solid var(--mob-line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 64px; z-index: 50; scroll-margin-top: 80px; } .mob-sec-tabs::-webkit-scrollbar { display: none; } .mob-sec-tab { flex: 1 0 auto; min-width: 64px; background: transparent; border: 0; padding: 9px 10px; font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--mob-ink-2); cursor: pointer; border-radius: 10px; transition: background .15s ease, color .15s ease; min-height: 38px; letter-spacing: -0.005em; white-space: nowrap; } .mob-sec-tab:active { background: rgba(0, 26, 61, 0.04); } .mob-sec-tab.is-active { background: #fff; color: var(--mob-ink); box-shadow: 0 2px 8px -2px rgba(0, 26, 61, 0.12); } .mob-sec-panels { padding: 0 20px; } .mob-sec-panel { background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 22px 18px 20px; box-shadow: var(--mob-shadow); } .mob-sec-panel.is-entering { animation: mobSecPanelIn 0.28s cubic-bezier(.32,.72,.36,1) both; } @keyframes mobSecPanelIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .mob-sec-panel-h3 { font-family: 'Sentient', serif; font-size: 20px; line-height: 1.18; font-weight: 500; letter-spacing: -0.018em; color: var(--mob-ink); margin: 0 0 16px; text-wrap: balance; } .mob-sec-panel-h3 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sec-panel-p { font-size: 14px; line-height: 1.6; color: var(--mob-ink-2); margin: 0 0 12px; text-wrap: pretty; } .mob-sec-panel-p strong { color: var(--mob-ink); font-weight: 600; } .mob-sec-panel-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .mob-sec-panel-list li { display: flex; gap: 12px; align-items: flex-start; } .mob-sec-bullet { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 107, 53, 0.10); color: var(--mob-accent); display: inline-flex; align-items: center; justify-content: center; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .mob-sec-panel-list li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mob-sec-panel-list strong { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 600; color: var(--mob-ink); letter-spacing: -0.005em; } .mob-sec-panel-list p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mob-ink-2); text-wrap: pretty; } .mob-sec-rgpd { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .mob-sec-rgpd li { position: relative; padding: 10px 12px 10px 36px; background: var(--mob-bg-soft); border-radius: 10px; font-size: 13.5px; line-height: 1.45; color: var(--mob-ink); } .mob-sec-rgpd li::before { content: ''; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,107,53,0.16) url("data:image/svg+xml;utf8,") no-repeat center / 10px 10px; } .mob-sec-vendors { padding: 12px 0 28px; } .mob-sec-vendor-carousel { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; padding: 8px 20px 16px; margin: 0; } .mob-sec-vendor-carousel::-webkit-scrollbar { display: none; } .mob-sec-vendor-card { flex: 0 0 84%; scroll-snap-align: center; scroll-snap-stop: always; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 20px 18px 18px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; } .mob-sec-vendor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--mob-line); } .mob-sec-vendor-name { font-family: 'Sentient', serif; font-size: 20px; font-weight: 500; color: var(--mob-ink); letter-spacing: -0.018em; } .mob-sec-vendor-dpa { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #15803D; background: #ECFDF5; padding: 5px 10px; border-radius: 100px; } .mob-sec-vendor-dpa svg { width: 12px; height: 12px; } .mob-sec-vendor-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .mob-sec-vendor-meta li { display: flex; flex-direction: column; gap: 2px; } .mob-sec-vendor-meta li > span:first-child { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mob-ink-2); } .mob-sec-vendor-meta li strong { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--mob-ink); line-height: 1.4; } .mob-sec-vendor-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; } .mob-sec-vendor-dot--ue { background: var(--mob-marine); } .mob-sec-vendor-dot--us { background: #D97706; } .mob-sec-vendor-dots { display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; } .mob-sec-vendor-dot-btn { width: 24px; height: 24px; padding: 0; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mob-sec-vendor-dot-btn span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--mob-line-strong); transition: width .2s ease, border-radius .2s ease, background .2s ease; } .mob-sec-vendor-dot-btn.is-active span { width: 22px; border-radius: 4px; background: var(--mob-accent); } .mob-sec-dpa { padding: 8px 20px 28px; } .mob-sec-dpa-card { background: linear-gradient(155deg, var(--mob-ink) 0%, var(--mob-marine) 100%); color: #fff; border-radius: 22px; padding: 28px 22px 24px; position: relative; overflow: hidden; } .mob-sec-dpa-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.28) 0%, transparent 70%); pointer-events: none; } .mob-sec-dpa-card > * { position: relative; } .mob-sec-dpa-eyebrow { display: inline-block; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 12px; } .mob-sec-dpa-h2 { font-family: 'Sentient', serif; font-size: clamp(22px, 6.2vw, 28px); line-height: 1.14; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 0 0 12px; text-wrap: balance; } .mob-sec-dpa-h2 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sec-dpa-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0 0 18px; text-wrap: pretty; } .mob-sec-dpa-ctas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .mob-sec-dpa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: transform .12s ease, background .15s ease; } .mob-sec-dpa-btn svg { width: 16px; height: 16px; } .mob-sec-dpa-btn--primary { background: var(--mob-accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(255, 107, 53, 0.55); } .mob-sec-dpa-btn--primary:active { transform: scale(.985); background: #ED5A24; } .mob-sec-dpa-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28); } .mob-sec-dpa-btn--ghost:active { background: rgba(255,255,255,0.06); } .mob-sec-log { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 16px 16px 14px; backdrop-filter: blur(8px); } .mob-sec-log-h { font-family: 'Geist', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mob-sec-log-pulse { display: inline-flex; align-items: center; gap: 6px; color: #22C55E; font-size: 10px; } .mob-sec-log-pulse::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: mobSecPulse 2s infinite; } @keyframes mobSecPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } .mob-sec-log-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.10); font-size: 12px; color: rgba(255,255,255,0.82); font-family: 'Geist', sans-serif; } .mob-sec-log-row:last-child { border-bottom: 0; } .mob-sec-log-row > span:last-child { color: rgba(255,255,255,0.48); font-size: 11px; } .mob-sec-headers { padding: 8px 20px 28px; } .mob-sec-pills { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mob-sec-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--mob-ink); letter-spacing: -0.005em; line-height: 1.2; min-height: 40px; } .mob-sec-pill svg { width: 12px; height: 12px; color: #15803D; flex-shrink: 0; } .mob-sec-faq { padding: 12px 0 28px; } .mob-sec-faq-list { padding: 0 20px; display: flex; flex-direction: column; } .mob-sec-faq-item { border-bottom: 1px solid var(--mob-line); } .mob-sec-faq-item:first-child { border-top: 1px solid var(--mob-line); } .mob-sec-faq-item summary { list-style: none; cursor: pointer; padding: 16px 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--mob-ink); line-height: 1.35; letter-spacing: -0.01em; } .mob-sec-faq-item summary::-webkit-details-marker { display: none; } .mob-sec-faq-chev { flex-shrink: 0; width: 10px; height: 10px; border-right: 1.8px solid var(--mob-ink); border-bottom: 1.8px solid var(--mob-ink); transform: rotate(45deg); transition: transform .25s ease; opacity: 0.55; } .mob-sec-faq-item[open] .mob-sec-faq-chev { transform: rotate(-135deg); } .mob-sec-faq-ans { padding: 0 0 16px; } .mob-sec-faq-ans p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mob-ink-2); text-wrap: pretty; } .mob-sec-cta-final { padding: 8px 20px 36px; scroll-margin-top: 72px; } .mob-sec-cta-card { background: var(--mob-ink); color: #fff; border-radius: 24px; padding: 30px 22px 26px; position: relative; overflow: hidden; } .mob-sec-cta-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,107,53,0.32) 0%, transparent 70%); pointer-events: none; } .mob-sec-cta-card > * { position: relative; } .mob-sec-cta-eyebrow { display: inline-block; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 12px; } .mob-sec-cta-h2 { font-family: 'Sentient', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.14; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; text-wrap: balance; } .mob-sec-cta-h2 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-sec-cta-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0 0 20px; text-wrap: pretty; } .mob-sec-cta-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .mob-sec-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none; transition: transform .12s ease, background .15s ease; } .mob-sec-cta-btn--primary { background: var(--mob-accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(255,107,53,0.55); } .mob-sec-cta-btn--primary:active { transform: scale(.985); background: #ED5A24; } .mob-sec-cta-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28); } .mob-sec-cta-btn--ghost:active { background: rgba(255,255,255,0.06); } .mob-sec-cta-note { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.50); margin: 6px 0 0; text-align: center; } .mob-sec-updated { text-align: center; padding: 18px 24px; font-size: 12px; color: var(--mob-ink-2); opacity: 0.7; background: var(--mob-bg); border-top: 1px solid var(--mob-line); margin: 0; } @media (max-width: 360px) { .mob-sec-fond-card { min-height: 130px; padding: 14px 12px; } .mob-sec-fond-card strong { font-size: 13px; } .mob-sec-pills { grid-template-columns: 1fr; } .mob-sec-stat-val { font-size: 48px; } .mob-sec-tab { font-size: 12px; padding: 9px 8px; } } } /* ============================================================ MOBILE LOGICIEL-IA — namespace .mob-lia-* ============================================================ */ @media (max-width: 768px) { .mob-lia-hero { padding: 84px 20px 32px; background: linear-gradient(180deg, var(--mob-bg-tint) 0%, transparent 100%); } .mob-lia-eyebrow { background: rgba(255,107,53,0.10); color: var(--mob-accent); margin-bottom: 18px; } .mob-lia-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mob-accent); box-shadow: 0 0 0 4px rgba(255,107,53,0.18); } .mob-lia .mob-h1 em, .mob-lia .mob-h2 em, .mob-lia-cta-h2 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-lia-h1-end, .mob-lia-end { color: var(--mob-accent); font-weight: 500; } .mob-lia .mob-hero-sub em { font-style: normal; color: var(--mob-ink); font-weight: 600; } .mob-lia .mob-hero-sub em .mob-lia-end { color: var(--mob-accent); font-weight: 600; } .mob-lia-trust { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: 'Geist', sans-serif; font-size: 12px; color: var(--mob-ink-2); font-weight: 500; } .mob-lia-trust li { display: inline-flex; align-items: center; gap: 6px; } .mob-lia-trust svg { width: 12px; height: 12px; color: #15803D; flex-shrink: 0; } .mob-lia-trust-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--mob-line-strong); opacity: 0.6; } .mob-lia-card { margin: 26px 0 0; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 16px 16px 14px; box-shadow: 0 18px 38px -16px rgba(0,26,61,0.18); } .mob-lia-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--mob-line); margin-bottom: 8px; } .mob-lia-card-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; background: rgba(255,107,53,0.12); color: var(--mob-accent); border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .mob-lia-card-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--mob-accent); animation: mobLiaPulse 1.6s infinite; } @keyframes mobLiaPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } } .mob-lia-card-meta { font-family: 'Geist', sans-serif; font-size: 11px; color: var(--mob-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mob-lia-card-rows { list-style: none; padding: 0; margin: 0; } .mob-lia-card-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--mob-line); } .mob-lia-card-rows li:last-child { border-bottom: 0; } .mob-lia-card-lbl { display: inline-flex; align-items: center; gap: 9px; font-family: 'Geist', sans-serif; font-size: 13px; color: var(--mob-ink); font-weight: 500; min-width: 0; flex: 1; } .mob-lia-card-lbl svg { width: 14px; height: 14px; color: var(--mob-ink-2); flex-shrink: 0; } .mob-lia-card-val { font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; background: #ECFDF5; color: #065F46; white-space: nowrap; flex-shrink: 0; } .mob-lia-card-val--warn { background: #FFFBEB; color: #92400E; } .mob-lia-card-foot { margin-top: 12px; padding: 12px; background: var(--mob-glace); border-radius: 12px; display: flex; align-items: center; gap: 10px; font-family: 'Geist', sans-serif; font-size: 12.5px; color: var(--mob-marine); font-weight: 500; line-height: 1.4; } .mob-lia-card-foot svg { width: 18px; height: 18px; color: var(--mob-marine); flex-shrink: 0; } .mob-lia-card-foot em { font-style: normal; color: var(--mob-accent); font-weight: 600; } .mob-lia-cmp { padding: 36px 0 32px; background: var(--mob-bg-soft); } .mob-lia-cmp-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--mob-ink-2); } .mob-lia-cmp-sub em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-lia-tabs { position: sticky; top: 60px; z-index: 50; background: var(--mob-bg-soft); padding: 12px 20px 10px; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; scroll-margin-top: 70px; } .mob-lia-tab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 12px; background: var(--mob-bg); border: 1px solid var(--mob-line-strong); border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink-2); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .mob-lia-tab.is-active { background: var(--mob-ink); border-color: var(--mob-ink); color: #fff; } .mob-lia-tab-star { color: var(--mob-gold); font-size: 14px; line-height: 1; } .mob-lia-panels { padding: 12px 20px 8px; } .mob-lia-panel { background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 22px 18px 18px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; } .mob-lia-panel--featured { border: 2px solid var(--mob-accent); box-shadow: 0 18px 38px -14px rgba(255,107,53,0.25); } .mob-lia-panel.is-entering { animation: mobLiaPanelIn 0.28s cubic-bezier(.32,.72,.36,1) both; } @keyframes mobLiaPanelIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .mob-lia-panel-head { margin-bottom: 14px; } .mob-lia-panel-h3 { font-family: 'Sentient', serif; font-size: 20px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--mob-ink); margin: 0 0 4px; text-wrap: balance; } .mob-lia-panel-tag { font-family: 'Geist', sans-serif; font-size: 12.5px; color: var(--mob-ink-2); margin: 0; } .mob-lia-cmp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .mob-lia-cmp-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mob-line); } .mob-lia-cmp-list li:last-child { border-bottom: 0; } .mob-lia-cmp-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .mob-lia-cmp-list strong { font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--mob-ink); } .mob-lia-cmp-list strong + span { font-size: 12.5px; color: var(--mob-ink-2); line-height: 1.4; text-wrap: pretty; } .mob-lia-cmp-ico { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .mob-lia-cmp-ico svg { width: 12px; height: 12px; } .mob-lia-cmp-ico--yes { background: rgba(255,107,53,0.12); color: var(--mob-accent); } .mob-lia-cmp-ico--no { background: var(--mob-bg-tint); color: var(--mob-ink-2); } .mob-lia-flow { padding: 36px 0 32px; } .mob-lia-flow-carousel { display: flex; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding: 6px 20px 8px; scroll-padding-left: 20px; } .mob-lia-flow-carousel::-webkit-scrollbar { display: none; } .mob-lia-flow-card { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 22px 20px 20px; display: flex; flex-direction: column; box-shadow: var(--mob-shadow); position: relative; overflow: hidden; } .mob-lia-flow-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mob-marine); } .mob-lia-flow-card--2::before { background: var(--mob-sky); } .mob-lia-flow-card--3::before { background: var(--mob-accent); } .mob-lia-flow-num { font-family: 'Sentient', serif; font-size: 12px; font-weight: 600; color: var(--mob-ink-2); letter-spacing: 0.12em; margin-bottom: 10px; } .mob-lia-flow-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--mob-glace); color: var(--mob-marine); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .mob-lia-flow-ico svg { width: 22px; height: 22px; } .mob-lia-flow-card--2 .mob-lia-flow-ico { background: rgba(93,164,212,0.15); color: var(--mob-sky); } .mob-lia-flow-card--3 .mob-lia-flow-ico { background: rgba(255,107,53,0.12); color: var(--mob-accent); } .mob-lia-flow-h3 { font-family: 'Sentient', serif; font-size: 18px; line-height: 1.2; font-weight: 500; color: var(--mob-ink); margin: 0 0 8px; text-wrap: balance; } .mob-lia-flow-desc { font-size: 13.5px; line-height: 1.55; color: var(--mob-ink-2); margin: 0 0 14px; text-wrap: pretty; } .mob-lia-flow-desc em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-lia-flow-desc strong { color: var(--mob-ink); font-weight: 600; } .mob-lia-flow-tag { align-self: flex-start; display: inline-block; padding: 5px 12px; background: rgba(0,26,61,0.05); color: var(--mob-marine); border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 11.5px; font-weight: 600; } .mob-lia-flow-card--3 .mob-lia-flow-tag { background: rgba(255,107,53,0.12); color: var(--mob-accent); } .mob-lia-flow-dots { display: flex; justify-content: center; gap: 6px; padding: 14px 20px 0; } .mob-lia-flow-dot { width: 24px; height: 24px; padding: 0; background: transparent; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mob-lia-flow-dot span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--mob-line-strong); transition: width .2s ease, border-radius .2s ease, background .2s ease; } .mob-lia-flow-dot.is-active span { width: 18px; border-radius: 4px; background: var(--mob-accent); } .mob-lia-anchor { margin: 24px 20px 0; background: linear-gradient(135deg, var(--mob-ink) 0%, var(--mob-marine) 100%); color: #fff; border-radius: var(--mob-radius); padding: 24px 22px 22px; position: relative; overflow: hidden; } .mob-lia-anchor::before { content: ''; position: absolute; inset: -60% -50% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.30) 0%, transparent 70%); pointer-events: none; } .mob-lia-anchor-num { position: relative; font-family: 'Sentient', serif; font-size: clamp(54px, 14vw, 72px); font-weight: 500; line-height: 1; color: var(--mob-accent); letter-spacing: -0.02em; margin-bottom: 10px; } .mob-lia-anchor-pct { font-size: 0.5em; margin-left: 2px; color: #fff; opacity: 0.85; } .mob-lia-anchor-text { position: relative; margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.78); text-wrap: pretty; } .mob-lia-anchor-text strong { color: #fff; font-weight: 600; } .mob-lia-anchor-text em { font-style: normal; color: var(--mob-accent); font-weight: 600; } .mob-lia-faq { padding: 36px 0 32px; background: var(--mob-bg-soft); } .mob-lia-faq-list { padding: 0 20px; display: flex; flex-direction: column; } .mob-lia-faq-item { border-bottom: 1px solid var(--mob-line); background: var(--mob-bg); } .mob-lia-faq-item:first-child { border-top: 1px solid var(--mob-line); border-top-left-radius: 12px; border-top-right-radius: 12px; } .mob-lia-faq-item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .mob-lia-faq-item summary { list-style: none; cursor: pointer; padding: 16px 18px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--mob-ink); line-height: 1.35; } .mob-lia-faq-item summary::-webkit-details-marker { display: none; } .mob-lia-faq-chev { flex-shrink: 0; width: 10px; height: 10px; border-right: 1.8px solid var(--mob-ink); border-bottom: 1.8px solid var(--mob-ink); transform: rotate(45deg); transition: transform .25s ease; opacity: 0.55; } .mob-lia-faq-item[open] .mob-lia-faq-chev { transform: rotate(-135deg); } .mob-lia-faq-ans { padding: 0 18px 18px; } .mob-lia-faq-ans p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mob-ink-2); text-wrap: pretty; } .mob-lia-faq-ans a { color: var(--mob-accent); text-decoration: underline; text-underline-offset: 2px; } .mob-lia-faq-ans strong { color: var(--mob-ink); } .mob-lia-related { padding: 36px 0 32px; } .mob-lia-related-grid { padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mob-lia-related-card { background: var(--mob-bg); border: 1px solid var(--mob-line); border-radius: 14px; padding: 14px 14px 16px; text-decoration: none; display: flex; flex-direction: column; gap: 4px; min-height: 130px; transition: transform .12s ease, box-shadow .15s ease; } .mob-lia-related-card:active { transform: scale(0.985); box-shadow: var(--mob-shadow); } .mob-lia-related-ico { width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--c, var(--mob-ink)) 12%, transparent); color: var(--c, var(--mob-ink)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; } .mob-lia-related-ico svg { width: 16px; height: 16px; } .mob-lia-related-card strong { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink); line-height: 1.25; } .mob-lia-related-card span:last-child { font-size: 11.5px; color: var(--mob-ink-2); line-height: 1.4; } .mob-lia-cta-final { padding: 8px 20px 36px; scroll-margin-top: 72px; } .mob-lia-cta-card { background: var(--mob-ink); color: #fff; border-radius: 24px; padding: 32px 22px 26px; position: relative; overflow: hidden; } .mob-lia-cta-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 260px; height: 260px; background: radial-gradient(circle, rgba(255,107,53,0.32) 0%, transparent 70%); pointer-events: none; } .mob-lia-cta-card > * { position: relative; } .mob-lia-cta-eyebrow { display: inline-block; font-family: 'Geist', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 12px; } .mob-lia-cta-h2 { font-family: 'Sentient', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.14; font-weight: 500; letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; text-wrap: balance; } .mob-lia-cta-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0 0 22px; text-wrap: pretty; } .mob-lia-cta-sub em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-lia-cta-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .mob-lia-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 100px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .12s ease, background .15s ease; } .mob-lia-cta-btn--primary { background: var(--mob-accent); color: #fff; box-shadow: 0 6px 18px -6px rgba(255,107,53,0.55); } .mob-lia-cta-btn--primary:active { transform: scale(.985); background: #ED5A24; } .mob-lia-cta-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.28); } .mob-lia-cta-btn--ghost:active { background: rgba(255,255,255,0.06); } .mob-lia-cta-note { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.50); margin: 6px 0 0; text-align: center; } @media (max-width: 360px) { .mob-lia-related-grid { grid-template-columns: 1fr; } .mob-lia-tab { font-size: 12px; padding: 0 8px; } .mob-lia-anchor-num { font-size: 48px; } .mob-lia-flow-card { flex: 0 0 88%; } } } /* ============================================================ MOBILE FONCTIONNALITES — namespace .mob-fn-* Template commun aux 6 pages /fonctionnalites/* ============================================================ */ @media (max-width: 768px) { .mob-fn-hero { padding: 84px 20px 24px; background: linear-gradient(180deg, var(--mob-bg-tint) 0%, transparent 100%); } .mob-fn-hero .mob-h1 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-fn .mob-eyebrow { background: rgba(255,107,53,0.08); color: var(--mob-accent); margin-bottom: 16px; } .mob-fn .mob-h2 em { font-style: normal; color: var(--mob-accent); font-weight: 500; } .mob-fn-hero-mockup { margin: 22px 0 4px; background: #fff; border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 14px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; gap: 10px; } .mob-fn-hero-mockup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--mob-line); } .mob-fn-hero-mockup-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mob-accent); } .mob-fn-hero-mockup-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 100px; background: #ECFDF5; color: #047857; font-size: 11px; font-weight: 600; } .mob-fn-hero-mockup-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10B981; } .mob-fn-hero-mockup-lines { display: flex; flex-direction: column; gap: 8px; } .mob-fn-hero-mockup-line { display: flex; align-items: center; justify-content: space-between; font-size: 13px; } .mob-fn-hero-mockup-line span:first-child { color: var(--mob-ink); font-weight: 500; } .mob-fn-hero-mockup-line span:last-child { font-family: 'Sentient', serif; font-size: 14px; font-weight: 600; color: var(--mob-accent); } .mob-fn-statbar { margin: 8px 20px 0; padding: 22px 18px; background: var(--mob-ink); border-radius: var(--mob-radius); color: #fff; position: relative; overflow: hidden; } .mob-fn-statbar::after { content: ''; position: absolute; inset: -50% auto auto -50%; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.22) 0%, transparent 70%); pointer-events: none; } .mob-fn-statbar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; position: relative; } .mob-fn-stat { display: flex; flex-direction: column; gap: 4px; padding-left: 10px; position: relative; } .mob-fn-stat::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--mob-accent) 0%, transparent 100%); border-radius: 2px; } .mob-fn-stat-val { font-family: 'Sentient', serif; font-size: 22px; font-weight: 600; line-height: 1; color: #fff; } .mob-fn-stat-val em { font-style: normal; color: var(--mob-accent); } .mob-fn-stat-lbl { font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,0.72); } .mob-fn-conv { padding: 32px 0 32px; background: var(--mob-bg-soft); } .mob-fn-conv-counter { display: inline-flex; align-items: center; gap: 8px; margin: 10px 20px 0; padding: 6px 12px; background: #fff; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--mob-ink); border: 1px solid var(--mob-line); } .mob-fn-conv-counter::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mob-accent); box-shadow: 0 0 0 4px rgba(255,107,53,0.18); } .mob-fn-conv-counter strong { color: var(--mob-accent); font-weight: 700; } .mob-fn-result { margin: 18px 20px 6px; background: #fff; border-radius: var(--mob-radius); border: 1px solid var(--mob-line); padding: 18px; box-shadow: 0 16px 36px -14px rgba(0,26,61,0.22); position: relative; overflow: hidden; } .mob-fn-result::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: linear-gradient(90deg, var(--mob-accent), var(--mob-marine)); } .mob-fn-result-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 4px; } .mob-fn-result-h3 { font-family: 'Sentient', serif; font-size: 20px; font-weight: 500; color: var(--mob-ink); margin: 0 0 4px; } .mob-fn-result-meta { font-size: 12px; color: var(--mob-ink-2); margin: 0 0 14px; } .mob-fn-result-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; } .mob-fn-result-list li { font-size: 12.5px; color: var(--mob-ink); padding: 8px 12px 8px 30px; background: var(--mob-bg-tint); border-radius: 8px; font-weight: 500; position: relative; } .mob-fn-result-list li::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #10B981; } .mob-fn-result-list li::after { content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-45deg); width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; margin-top: -1px; } .mob-fn-result-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--mob-accent); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 100px; } .mob-fn-result-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; } .mob-fn-sources { list-style: none; padding: 0; margin: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; } .mob-fn-source { display: flex; gap: 12px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--mob-line); border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(0,26,61,0.12); } .mob-fn-source-ico { width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .mob-fn-source-ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } .mob-fn-source-body strong { display: block; font-size: 14px; font-weight: 600; color: var(--mob-ink); margin-bottom: 2px; } .mob-fn-source-body span { display: block; font-size: 12.5px; color: var(--mob-ink-2); line-height: 1.4; } .mob-fn-constat { padding: 32px 0 32px; } .mob-fn-constat-list { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; } .mob-fn-constat-card { background: #fff; border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 20px 18px; box-shadow: var(--mob-shadow); } .mob-fn-constat-ico { width: 40px; height: 40px; border-radius: 11px; background: #FFF5F0; color: var(--mob-accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .mob-fn-constat-ico svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; } .mob-fn-constat-card h3 { font-family: 'Sentient', serif; font-size: 17px; line-height: 1.25; font-weight: 500; color: var(--mob-ink); margin: 0 0 6px; } .mob-fn-constat-card p { font-size: 13.5px; line-height: 1.55; color: var(--mob-ink-2); margin: 0; } .mob-fn-preuve { padding: 32px 0 36px; background: var(--mob-bg-soft); } .mob-fn-preuve-tabs { display: flex; gap: 6px; padding: 14px 20px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mob-fn-preuve-tabs::-webkit-scrollbar { display: none; } .mob-fn-preuve-tab { flex-shrink: 0; height: 36px; padding: 0 16px; border-radius: 100px; background: #fff; border: 1px solid var(--mob-line); color: var(--mob-ink-2); font-family: 'Geist', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .mob-fn-preuve-tab.is-active { background: var(--mob-ink); color: #fff; border-color: var(--mob-ink); } .mob-fn-preuve-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; padding: 8px 20px 4px; scroll-padding-left: 20px; } .mob-fn-preuve-carousel::-webkit-scrollbar { display: none; } .mob-fn-preuve-col { flex: 0 0 88%; scroll-snap-align: start; scroll-snap-stop: always; background: #fff; border: 1px solid var(--mob-line); border-radius: var(--mob-radius); padding: 18px; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; } .mob-fn-preuve-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--mob-line); } .mob-fn-preuve-col-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-ink); } .mob-fn-preuve-col-tag { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 100px; white-space: nowrap; } .mob-fn-preuve-col-tag--green { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; } .mob-fn-preuve-col-tag--blue { background: #EFF6FF; color: var(--mob-marine); border: 1px solid #BFDBFE; } .mob-fn-preuve-col-tag--beige { background: #FFFBF0; color: #A16207; border: 1px solid #FDE68A; } .mob-fn-preuve-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--mob-line); font-size: 12.5px; } .mob-fn-preuve-row:last-child { border-bottom: 0; } .mob-fn-preuve-row .lab { color: var(--mob-ink); font-weight: 500; flex: 1; } .mob-fn-preuve-row .val { font-family: 'Sentient', serif; font-size: 14px; font-weight: 600; color: #059669; } .mob-fn-preuve-row .val-text { font-weight: 600; color: var(--mob-ink); font-size: 12.5px; } .mob-fn-preuve-criteria { display: flex; flex-direction: column; gap: 14px; } .mob-fn-preuve-crit-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 4px; } .mob-fn-preuve-crit-head .lab { font-weight: 500; color: var(--mob-ink); } .mob-fn-preuve-crit-head .pct { font-family: 'Sentient', serif; font-size: 14px; font-weight: 600; color: var(--mob-marine); } .mob-fn-preuve-crit-bar { height: 5px; background: rgba(0,26,61,0.08); border-radius: 100px; overflow: hidden; } .mob-fn-preuve-crit-bar span { display: block; height: 100%; border-radius: 100px; } .mob-fn-preuve-crit-bar--c1 span { background: linear-gradient(90deg, var(--mob-accent), #E55A29); } .mob-fn-preuve-crit-bar--c2 span { background: linear-gradient(90deg, var(--mob-marine), var(--mob-sky)); } .mob-fn-preuve-crit-bar--c3 span { background: linear-gradient(90deg, var(--mob-gold), #D4B888); } .mob-fn-preuve-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .mob-fn-preuve-tag { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 100px; background: var(--mob-glace); color: var(--mob-marine); } .mob-fn-preuve-bottom { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: #ECFDF5; color: #059669; font-size: 11.5px; font-weight: 600; padding: 7px 14px; border-radius: 100px; align-self: flex-start; } .mob-fn-preuve-total { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px dashed var(--mob-line); } .mob-fn-preuve-total .lab { font-size: 12.5px; color: var(--mob-ink); font-weight: 600; } .mob-fn-preuve-total .v { font-family: 'Sentient', serif; font-size: 22px; font-weight: 600; color: var(--mob-ink); } .mob-fn-preuve-total .v strong { color: var(--mob-accent); font-weight: 600; } .mob-fn-extract { padding: 32px 0 36px; } .mob-fn-extract-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding: 6px 20px 8px; scroll-padding-left: 20px; } .mob-fn-extract-carousel::-webkit-scrollbar { display: none; } .mob-fn-ex-card { flex: 0 0 78%; scroll-snap-align: start; scroll-snap-stop: always; background: #fff; border: 1px solid var(--mob-line); border-radius: var(--mob-radius); overflow: hidden; box-shadow: var(--mob-shadow); display: flex; flex-direction: column; position: relative; } .mob-fn-ex-illu { width: 100%; aspect-ratio: 4/3; background: var(--mob-glace); display: flex; align-items: center; justify-content: center; overflow: hidden; } .mob-fn-ex-illu img { width: 100%; height: 100%; object-fit: cover; display: block; } .mob-fn-ex-body { padding: 22px 18px 20px; position: relative; flex: 1; } .mob-fn-ex-badge { position: absolute; top: -14px; right: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--mob-accent); padding: 6px 12px; border-radius: 100px; box-shadow: 0 6px 14px -4px rgba(255,107,53,0.45); } .mob-fn-ex-h3 { font-family: 'Sentient', serif; font-size: 16.5px; line-height: 1.25; font-weight: 500; color: var(--mob-ink); margin: 0 0 8px; } .mob-fn-ex-p { font-size: 13px; line-height: 1.5; color: var(--mob-ink-2); margin: 0; } .mob-fn-story { padding: 36px 0 40px; background: linear-gradient(135deg, var(--mob-ink) 0%, var(--mob-marine) 100%); color: #fff; position: relative; overflow: hidden; } .mob-fn-story::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, rgba(255,107,53,0.18), transparent 50%), radial-gradient(circle at 85% 75%, rgba(93,164,212,0.12), transparent 55%); pointer-events: none; } .mob-fn-story-head { padding: 0 20px 20px; position: relative; } .mob-fn-story-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255,255,255,0.7); margin-bottom: 10px; } .mob-fn-story-meta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mob-accent); box-shadow: 0 0 0 4px rgba(255,107,53,0.18); } .mob-fn-story-head .mob-h2 { color: #fff; } .mob-fn-story-head .mob-h2 em { color: var(--mob-accent); } .mob-fn-story-sub { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 10px 0 0; } .mob-fn-story-steps { list-style: none; padding: 6px 20px 0; margin: 0; position: relative; } .mob-fn-story-step { display: flex; gap: 16px; position: relative; padding-bottom: 22px; } .mob-fn-story-step:not(.mob-fn-story-step--last)::before { content: ''; position: absolute; left: 22px; top: 48px; bottom: 0; width: 0; border-left: 2px dashed var(--mob-accent); opacity: 0.55; } .mob-fn-story-num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--mob-accent); font-family: 'Sentient', serif; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,107,53,0.4); position: relative; z-index: 2; } .mob-fn-story-step--last .mob-fn-story-num { background: var(--mob-accent); color: #fff; border-color: var(--mob-accent); box-shadow: 0 6px 16px -6px rgba(255,107,53,0.55); } .mob-fn-story-body { flex: 1; padding-top: 2px; } .mob-fn-story-body h4 { font-family: 'Sentient', serif; font-size: 16px; font-weight: 500; color: #fff; margin: 0 0 4px; } .mob-fn-story-body p { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; } .mob-fn-story-body a { color: var(--mob-accent); font-weight: 600; text-decoration: underline; } .mob-fn-benefits { padding: 36px 0 32px; } .mob-fn-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; } .mob-fn-bf { background: #fff; border: 1px solid var(--mob-line); border-radius: 14px; padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; min-height: 140px; } .mob-fn-bf-num { font-family: 'Sentient', serif; font-size: 28px; font-weight: 600; line-height: 1; color: var(--mob-accent); } .mob-fn-bf h3 { font-family: 'Sentient', serif; font-size: 14px; line-height: 1.25; font-weight: 500; color: var(--mob-ink); margin: 0; } .mob-fn-bf p { font-size: 12px; line-height: 1.45; color: var(--mob-ink-2); margin: 0; } .mob-fn-compat { padding: 32px 20px; background: var(--mob-bg-tint); text-align: center; } .mob-fn-compat-h3 { font-family: 'Sentient', serif; font-size: 18px; line-height: 1.3; font-weight: 500; color: var(--mob-ink); margin: 0 0 16px; } .mob-fn-compat-h3 strong { color: var(--mob-accent); font-weight: 500; } .mob-fn-compat-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .mob-fn-compat-pills li { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; color: var(--mob-ink); padding: 9px 16px; background: #fff; border-radius: 100px; border: 1px solid var(--mob-line); } .mob-fn-faq { padding: 32px 0; } .mob-fn-faq-list { padding: 0 20px; display: flex; flex-direction: column; } .mob-fn-faq-item { border-bottom: 1px solid var(--mob-line); } .mob-fn-faq-item:first-child { border-top: 1px solid var(--mob-line); } .mob-fn-faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: 'Geist', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--mob-ink); line-height: 1.35; } .mob-fn-faq-item summary::-webkit-details-marker { display: none; } .mob-fn-faq-chev { flex-shrink: 0; width: 10px; height: 10px; border-right: 1.8px solid var(--mob-ink); border-bottom: 1.8px solid var(--mob-ink); transform: rotate(45deg); transition: transform .25s ease; opacity: 0.55; } .mob-fn-faq-item[open] .mob-fn-faq-chev { transform: rotate(-135deg); } .mob-fn-faq-ans { padding: 0 0 18px; } .mob-fn-faq-ans p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mob-ink-2); } .mob-fn-cta-final { padding: 8px 20px 36px; scroll-margin-top: 72px; } .mob-fn-cta-card { background: var(--mob-ink); color: #fff; border-radius: 24px; padding: 32px 22px 28px; position: relative; overflow: hidden; } .mob-fn-cta-card::before { content: ''; position: absolute; inset: -50% -50% auto auto; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,107,53,0.32) 0%, transparent 70%); pointer-events: none; } .mob-fn-cta-eyebrow { position: relative; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mob-accent); margin-bottom: 12px; } .mob-fn-cta-h2 { position: relative; font-family: 'Sentient', serif; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.15; font-weight: 500; color: #fff; margin: 0 0 10px; text-wrap: balance; } .mob-fn-cta-h2 em { color: var(--mob-accent); } .mob-fn-cta-sub { position: relative; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0 0 20px; } .mob-fn-cta-stack { position: relative; display: flex; flex-direction: column; gap: 10px; } .mob-fn-cta-stack .mob-btn { width: 100%; } .mob-fn-end { white-space: nowrap; } .mob-fn-preuve-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--mob-ink-2); padding: 0 20px; } .mob-fn .mob-section-head .mob-fn-preuve-sub { padding: 0; } .mob-btn--on-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); } .mob-btn--on-dark:active { background: rgba(255,255,255,0.16); } }