/* ========================================================================== LocalFlow Pro — rendu UI/UX type vlocal.org, codes couleurs OakflowAI. Thème clair par défaut ( posé dans le HTML) ; thème sombre en retirant l'attribut, basculé par le bouton de la nav et mémorisé en localStorage. --accent-deep porte l'accent *textuel* : identique à --accent en sombre, assombri en clair pour rester lisible sur blanc. --white = teinte de premier plan (titres), quelle que soit sa valeur réelle. ========================================================================== */ :root { --bg: #060707; --card: #0E0F10; --card-2: #131415; --line: rgba(255, 255, 255, 0.08); --line-soft: rgba(255, 255, 255, 0.05); --text: #A1A7AD; --text-dim: #62676C; --white: #F5F6F6; --grey-title: #C8CDD2; --accent: #00E5B0; --accent-deep: #00E5B0; --accent-soft: rgba(0, 229, 176, 0.12); --accent-ink: #052B21; --t2: var(--grey-title); --nav-bg: rgba(6, 7, 7, 0.8); --nav-line: transparent; --pill-shadow: 0 0 60px rgba(0, 229, 176, 0.10), inset 0 0 20px rgba(0, 229, 176, 0.04); --window-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); --watermark: rgba(255, 255, 255, 0.04); --track-bg: rgba(255, 255, 255, 0.06); --hover-bg: rgba(255, 255, 255, 0.05); --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --w: 1120px; } :root[data-theme="light"] { --bg: #FFFFFF; --card: #FFFFFF; --card-2: #F9FAFB; --line: #E5E7EB; --line-soft: #EEF0F3; --text: #4B5563; --text-dim: #9CA3AF; --white: #111827; --grey-title: #374151; --accent-deep: #009B77; --t2: #009B77; --nav-bg: rgba(255, 255, 255, 0.85); --nav-line: #EEF0F3; --pill-shadow: 0 14px 40px rgba(17, 24, 39, 0.08); --window-shadow: 0 24px 60px rgba(17, 24, 39, 0.08); --watermark: rgba(0, 229, 176, 0.14); --track-bg: rgba(17, 24, 39, 0.08); --hover-bg: rgba(17, 24, 39, 0.04); } /* Le fond ShaderGradient est pensé pour le sombre : masqué en clair */ :root[data-theme="light"] #hero-shader { display: none; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .wrap { max-width: var(--w); margin-inline: auto; padding-inline: 24px; } h1, h2 { font-weight: 700; color: var(--white); letter-spacing: -0.025em; line-height: 1.06; } h1 { font-size: clamp(3rem, 7.5vw, 5.25rem); } h2 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); } h3 { color: var(--white); font-weight: 600; letter-spacing: -0.015em; } .eyebrow { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 22px; } .lead { font-size: 1.15rem; max-width: 620px; margin: 26px auto 0; } .lead b, .lead strong { color: var(--white); font-weight: 600; } .center { text-align: center; } .section { padding-block: 140px; } /* ---- Pilules / boutons ---- */ .btn-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 1rem; border-radius: 999px; padding: 15px 30px; transition: transform .15s ease, background-color .15s ease; } .btn-pill:hover { background: #2BEFC2; transform: translateY(-1px); } .btn-pill.small { padding: 9px 20px; font-size: 0.875rem; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 1rem; color: var(--grey-title); padding: 15px 10px; } .btn-ghost:hover { color: var(--accent-deep); } /* ---- Nav ---- */ /* Bandeau d'annonce version (au-dessus de la nav, non sticky) */ .announce { background: var(--accent-soft); border-bottom: 1px solid var(--line-soft); text-align: center; padding: 9px 16px; font-size: 0.85rem; color: var(--white); } .announce b { color: var(--accent-deep); font-weight: 700; } @media (max-width: 480px) { .announce { font-size: 0.78rem; padding: 8px 12px; } } .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); backdrop-filter: blur(12px); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); } .brand-name { font-weight: 700; font-size: 1.05rem; color: var(--white); letter-spacing: -0.02em; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 0.9rem; color: var(--text); padding-block: 6px; } .nav-links a:hover { color: var(--accent-deep); } /* La pilule CTA garde son texte sombre : .nav-links a est plus spécifique que .btn-pill, on rétablit explicitement */ .nav-links a.btn-pill, .nav-links a.btn-pill:hover { color: var(--accent-ink); } /* Bascule sombre / clair */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--accent-deep); } .theme-toggle .ico-moon { display: none; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; } /* Texte du dock CTA en verre liquide, aligné sur la charte */ .glass-button-text { color: var(--accent-deep) !important; font-weight: 600; } /* ---- Hero ---- */ .hero { position: relative; text-align: center; padding-block: 72px 0; overflow: hidden; } .hero-grid { position: relative; z-index: 1; } /* Lecteur intégré au hero : la vidéo doit être vue sans scroller. */ .hero-media { margin-top: 44px; } .hero-media-title { font-size: 1.05rem; font-weight: 600; color: var(--white); margin-bottom: 14px; } /* Fond ShaderGradient : nappe animée sous le contenu, fondue vers le noir */ #hero-shader { position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 95%); mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 95%); } /* Emblème micro LiquidMetal au-dessus du titre */ #brand-liquid { width: 76px; height: 76px; margin: 56px auto 40px; } .hero-badge { display: inline-block; font-size: 0.82rem; color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; background: var(--card-2); } .hero-topline { margin-top: 16px; font-size: 1.05rem; font-weight: 600; color: var(--white); } .hero-topline b { color: var(--accent-deep); } .hero h1 .t2 { color: var(--t2); } .hero h1 .t3 { color: var(--text-dim); font-weight: 600; } .hero h1 .t3 em { color: var(--grey-title); font-style: italic; font-weight: 500; } /* Pilule transcription — liseré accent discret */ .transcribe-pill { display: inline-flex; align-items: center; gap: 18px; margin-top: 56px; padding: 10px 26px 10px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); box-shadow: var(--pill-shadow); } .transcribe-pill .pill-logo { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); } .transcribe-pill .pill-label { font-size: 0.95rem; color: var(--grey-title); font-weight: 500; } .transcribe-pill .pill-time { font-family: var(--mono); font-size: 0.95rem; color: var(--white); } .rotator-line { margin-top: 30px; font-size: 0.95rem; color: var(--text-dim); } .rotator-line b { color: var(--white); font-weight: 600; } /* Démo tapée en direct, texte géant */ .live-demo { max-width: 760px; margin: 70px auto 0; min-height: 5.6em; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; color: var(--white); } .caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -0.15em; animation: caretblink 1s step-end infinite; } @keyframes caretblink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } } .live-sub { margin-top: 34px; font-size: 1.1rem; color: var(--text); } .live-sub b { color: var(--white); font-weight: 600; } .hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 48px; } .hero-compat { margin-top: 34px; font-size: 0.82rem; color: var(--text-dim); } .hero-early { margin-top: 8px; font-size: 0.85rem; color: var(--text-dim); } /* Bandeau de valeurs hairline */ .values-strip { margin-top: 90px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .values-strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; list-style: none; padding-block: 22px; font-size: 0.9rem; color: var(--text-dim); } .values-strip li + li::before { content: "·"; margin-right: 14px; color: var(--line); } /* Hero deux colonnes : le message à gauche, la preuve vidéo à droite. En dessous de 1024px la grille retombe en une colonne (vidéo sous les CTA). Ce bloc doit rester APRÈS les règles qu'il resserre : à spécificité égale, c'est la dernière déclaration qui l'emporte. */ @media (min-width: 1024px) { .hero { padding-block: 40px 0; text-align: left; } /* Le hero est découpé en trois blocs pour que l'ordre mobile soit titre -> vidéo -> CTA. Ici on les replace en deux colonnes : titre puis reste empilés à gauche, vidéo à droite sur les deux rangées. */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto; align-items: center; column-gap: 52px; max-width: 1240px; } .hero-lead { grid-column: 1; grid-row: 1; align-self: end; } .hero-rest { grid-column: 1; grid-row: 2; align-self: start; } .hero-media { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; } /* L'emblème LiquidMetal est décoratif et coûtait ~170px de hauteur : c'est la vidéo qui joue désormais le rôle d'accroche visuelle. */ #brand-liquid { display: none; } /* Rythme vertical resserré pour tenir dans le premier écran */ .hero h1 { font-size: clamp(2.4rem, 3.2vw, 3.1rem); } .hero-topline { margin-top: 14px; } .transcribe-pill { margin-top: 26px; } .rotator-line { margin-top: 14px; } .live-demo { margin: 22px 0 0; min-height: 3.4em; font-size: 1.05rem; } .live-sub { margin-top: 16px; font-size: 1rem; } .hero-cta { justify-content: flex-start; margin-top: 24px; } .hero-compat { margin-top: 16px; } .values-strip { margin-top: 40px; } } /* ---- Bento ---- */ .bento { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 16px; margin-top: 64px; } .bento-card { position: relative; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--card); padding: 30px 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; } .bento-card.tall { grid-row: span 2; min-height: 0; } .bento-card .cat { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 10px; } .bento-card h3 { font-size: 1.35rem; } .bento-card p { margin-top: 8px; font-size: 0.92rem; } .bento-card .stat { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; } .bento-watermark { position: absolute; top: -30px; right: -30px; width: 190px; height: 190px; color: var(--watermark); pointer-events: none; } /* ---- Transformations : 3 cartes bénéfices ---- */ .transfo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; } .transfo-grid .bento-card.slim { min-height: 0; justify-content: flex-start; } .transfo-grid h3 { font-size: 1.2rem; } /* ---- Rangée d'apps ---- */ .apps-line { font-size: 1.15rem; } .apps-line b { color: var(--white); font-weight: 600; } /* Bandeau déroulant de logos (même mécanique que le ticker oakflowai.com : piste dupliquée + translateX(-50%) en boucle, fondu sur les bords) */ .logo-ticker { margin-top: 44px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } .logo-track { display: flex; width: max-content; gap: 14px; animation: ticker-scroll 30s linear infinite; } .logo-ticker:hover .logo-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } /* -7px = moitié du gap entre séries */ } .logo-item { display: flex; align-items: center; gap: 11px; padding: 13px 22px; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--card-2); font-weight: 600; font-size: 0.92rem; color: var(--grey-title); white-space: nowrap; } .logo-item img { width: 30px; height: 30px; } .apps-caption { margin-top: 26px; font-size: 0.9rem; color: var(--text-dim); } /* ---- Sections features 2 colonnes ---- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .feature h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); } .feature .lead { margin: 22px 0 0; font-size: 1.02rem; max-width: none; } .checklist { list-style: none; margin-top: 30px; } .checklist li { position: relative; padding: 10px 0 10px 34px; font-size: 0.95rem; } .checklist li::before { content: "✓✓"; position: absolute; left: 0; letter-spacing: -0.35em; color: var(--accent-deep); font-weight: 600; } .checklist code { font-family: var(--mono); font-size: 0.85em; color: var(--white); } /* ---- Fenêtres mockup ---- */ .window { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; box-shadow: var(--window-shadow); } .window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); } .window-bar .dot { width: 11px; height: 11px; border-radius: 50%; } .dot-r { background: #FF5F57; } .dot-y { background: #FEBC2E; } .dot-g { background: #28C840; } .window-bar .window-title { margin-left: 10px; font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); } .sim-doc { padding: 24px 22px; min-height: 150px; font-family: var(--mono); font-size: 0.88rem; line-height: 1.8; } .sim-doc .ghost { color: var(--text-dim); } .sim-doc .typed { color: var(--white); } .sim-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 18px; border-top: 1px solid var(--line-soft); background: var(--card-2); font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); } .sim-status .sep { color: var(--line); } .sim-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; } .sim-dot.rec { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.35; } } .sim-kbd { border: 1px solid var(--line); border-radius: 5px; padding: 1px 8px; font-weight: 700; color: var(--accent-deep); background: var(--bg); } /* ---- App dashboard mockup ---- */ .dash-app { margin-top: 70px; display: grid; grid-template-columns: 220px 1fr; } .dash-side { border-right: 1px solid var(--line-soft); padding: 20px 14px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 2px; } .dash-side .side-brand { display: flex; align-items: center; gap: 8px; padding: 6px 10px 16px; font-weight: 700; color: var(--white); } .dash-side .side-brand .brand-mark { width: 22px; height: 22px; border-radius: 6px; } .dash-side a { padding: 8px 10px; border-radius: 8px; color: var(--text); } .dash-side a.active { background: var(--hover-bg); border: 1px solid var(--line-soft); color: var(--white); } .dash-side .side-license { margin-top: auto; padding: 10px; font-size: 0.72rem; color: var(--text-dim); } .dash-side .side-license b { display: flex; align-items: center; gap: 6px; color: var(--white); font-weight: 500; } .dash-side .side-license b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .dash-main { padding: 26px 28px; text-align: left; } .dash-main .hello { font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; } .dash-main .hello-sub { font-size: 0.85rem; color: var(--text-dim); margin-top: 2px; } .dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; } .dash-card { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card-2); padding: 16px 18px; } .dash-card .k { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); } .dash-card .v { margin-top: 6px; font-size: 1.7rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; } .dash-card .s { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; } .dash-recent { margin-top: 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card-2); font-size: 0.85rem; } .dash-recent .rh { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); color: var(--white); font-weight: 600; } .dash-recent .rh span:last-child { color: var(--text-dim); font-weight: 400; font-size: 0.76rem; } .dash-recent .row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); } .dash-recent .row:last-child { border-bottom: 0; } .dash-recent .row span:last-child { color: var(--text-dim); font-size: 0.76rem; white-space: nowrap; } /* ---- Comparatif ---- */ .compare-frame { margin-top: 64px; border: 1px solid var(--line-soft); border-radius: 16px; overflow-x: auto; background: var(--card); } .compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; } .compare th, .compare td { text-align: left; padding: 17px 26px; border-bottom: 1px solid var(--line-soft); } .compare tr:last-child td { border-bottom: 0; } .compare thead th { font-size: 0.9rem; color: var(--text-dim); font-weight: 600; } .compare thead th.you { color: var(--white); } .compare td:first-child { color: var(--text-dim); } .compare td.you { color: var(--white); font-weight: 500; } .compare .ok { color: var(--accent-deep); } /* ---- Prix ---- */ .compat-note { max-width: 620px; margin: 48px auto 0; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); padding: 16px 24px; font-size: 0.88rem; } .compat-note b { color: var(--white); font-weight: 600; } .price-card { position: relative; max-width: 460px; margin: 56px auto 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); padding: 38px 36px; text-align: left; } .price-badge { position: absolute; top: -14px; right: 26px; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; } .price-plan { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); } .price-figure { margin-top: 14px; color: var(--white); } .price-figure .now { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; } .price-figure .unit { font-size: 1rem; color: var(--text-dim); margin-left: 6px; } .price-figure .was { margin-left: 10px; font-size: 1.15rem; color: var(--text-dim); text-decoration: line-through; } .price-sub { margin-top: 6px; font-size: 0.85rem; color: var(--text-dim); } .price-card .checklist { margin-top: 24px; } .price-card .checklist li { padding-block: 7px; font-size: 0.92rem; } .price-card .btn-pill { margin-top: 28px; width: 100%; justify-content: center; } .price-reassure { margin-top: 14px; font-size: 0.78rem; color: var(--text-dim); text-align: center; line-height: 1.6; } .price-file { margin-top: 8px; font-family: var(--mono); font-size: 0.7rem; color: var(--text-dim); text-align: center; } .price-pitch { max-width: 520px; margin: 34px auto 0; font-size: 0.92rem; text-align: center; } .smartscreen { max-width: 520px; margin: 22px auto 0; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); padding: 15px 20px; font-size: 0.8rem; line-height: 1.6; text-align: left; } .smartscreen b { color: var(--white); font-weight: 600; } .smartscreen .kbdpath { font-family: var(--mono); font-size: 0.9em; color: var(--white); } /* Onboarding */ .onboard { max-width: 640px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .onboard-step { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); padding: 22px 18px; text-align: center; } .onboard-step .num { display: block; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); } .onboard-step .what { display: block; margin-top: 8px; font-weight: 600; font-size: 0.95rem; color: var(--white); } .onboard-step .how { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-dim); } /* Encart macOS */ .mac-card { max-width: 640px; margin: 22px auto 0; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card); padding: 18px 22px; font-size: 0.88rem; text-align: left; transition: border-color .18s ease; } .mac-card:hover { border-color: var(--line); } .mac-card svg { flex-shrink: 0; color: var(--text-dim); } .mac-card b { color: var(--white); font-weight: 600; } .mac-card .cta-inline { color: var(--accent-deep); } .mac-card:hover .cta-inline { text-decoration: underline; text-underline-offset: 4px; } /* ---- Footer ---- */ .footer { border-top: 1px solid var(--line-soft); padding-block: 72px; text-align: center; } .footer-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); } .footer-config { max-width: 560px; margin: 14px auto 0; font-size: 0.88rem; } .footer-quote { margin-top: 30px; font-size: 0.9rem; font-style: italic; color: var(--text-dim); } .footer-badge { display: inline-block; margin-top: 28px; } .footer-copy { margin-top: 28px; font-size: 0.78rem; color: var(--text-dim); } /* ---- Apparition au chargement ---- */ .rise { opacity: 0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rise { animation: none; opacity: 1; } .caret, .sim-dot.rec { animation: none; } .logo-track { animation: none; } .btn-pill:hover { transform: none; } } /* ---- Responsive ---- */ @media (max-width: 960px) { .section { padding-block: 96px; } .bento { grid-template-columns: 1fr 1fr; } .bento-card.tall { grid-row: auto; } .bento-card.wide { grid-column: span 2; } .transfo-grid { grid-template-columns: 1fr; } .feature { grid-template-columns: 1fr; gap: 44px; } .dash-app { grid-template-columns: 1fr; } .dash-side { display: none; } } /* Sous 1024px la grille du hero retombe en une colonne, dans l'ordre du DOM : titre -> vidéo -> CTA -> le reste. Ce palier couvre aussi les tablettes, qui sans lui n'auraient ni les deux colonnes du desktop ni la compaction du mobile, et repousseraient la vidéo hors de l'écran. */ @media (max-width: 1023px) { .hero { padding-top: 24px; } /* Le titre est le premier poste de hauteur (305px à 48px de police sur mobile, où il partait sur 6 lignes) : le réduire libère plus que n'importe quelle suppression de contenu. */ .hero h1 { font-size: clamp(2rem, 5vw, 2.6rem); } /* Emblème décoratif, déjà masqué sur desktop pour la même raison. */ #brand-liquid { display: none; } /* Le lecteur montre déjà la dictée en action : l'animation de frappe et le bloc "Transcription 0,60 s" font double emploi ici, où chaque pixel vertical compte. Le conteneur .rise n'a ni marge ni padding : masquer ses enfants le fait collapser à 0. */ .transcribe-pill, .rotator-line, .live-demo { display: none; } .hero-media { margin-top: 22px; } .hero-media-title { font-size: 0.95rem; margin-bottom: 10px; } /* Ordre demandé : titre -> vidéo -> CTA -> réassurance / Early Bird. Les CTA remontent avant la ligne "Tout se calcule sur votre PC", qui les repoussait sous la ligne de flottaison. */ .hero-rest { display: flex; flex-direction: column; margin-top: 20px; } .hero-rest .hero-cta { order: -1; margin-top: 0; } .live-sub { margin-top: 18px; font-size: 1rem; } .hero-compat { margin-top: 16px; } .values-strip { margin-top: 32px; } } @media (max-width: 620px) { .nav-links a:not(.btn-pill) { display: none; } .section { padding-block: 72px; } .bento { grid-template-columns: 1fr; } .bento-card.wide { grid-column: auto; } .dash-cards { grid-template-columns: 1fr; } .onboard { grid-template-columns: 1fr; } .hero-cta { flex-direction: column; } } /* Écrans courts (iPhone SE, Android 360x740…) : le bandeau d'annonce et la nav mangent déjà 171px sur 667. On resserre encore, et le badge et l'accroche secondaire s'effacent — le titre porte la proposition de valeur, les CTA priment. Seuil à 800px : en 740 de haut, les CTA débordaient de 114px sans cette compaction. */ @media (max-width: 620px) and (max-height: 800px) { .hero { padding-top: 12px; } .hero-badge, .hero-topline { display: none; } .hero h1 { font-size: 1.6rem; } .hero-media { margin-top: 14px; } .hero-media-title { font-size: 0.9rem; margin-bottom: 8px; } .demo-video video { max-width: 300px; } .hero-rest { margin-top: 12px; } .hero-cta { gap: 8px; } .hero-cta .btn-pill { padding-block: 13px; } } /* ---- Lecteur vidéo (hero) ---- */ .demo-video video { display: block; width: 100%; max-width: 760px; margin-inline: auto; /* Réserve la place avant le chargement des métadonnées : évite que le reste du hero saute quand le lecteur prend sa hauteur réelle. */ aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); border-radius: 18px; background: var(--card); } @media (min-width: 1024px) { .demo-video video { max-width: none; } } /* Desktop peu haut (1024x768, 1280x720, portables 16:10 en fenêtré) : les colonnes étroites font passer les deux boutons CTA sur deux lignes, ce qui poussait le bloc 8px sous la ligne de flottaison en 1024x768. On resserre le rythme vertical sur ces hauteurs. */ @media (min-width: 1024px) and (max-height: 800px) { .hero { padding-block: 24px 0; } .hero h1 { font-size: clamp(2.1rem, 2.9vw, 2.8rem); } .transcribe-pill { margin-top: 18px; } .rotator-line { margin-top: 10px; } .live-demo { margin-top: 16px; min-height: 3em; } .live-sub { margin-top: 12px; } .hero-cta { margin-top: 18px; } .hero-compat { margin-top: 12px; } .values-strip { margin-top: 28px; } } /* ========================================================================== v1.1.0 — Sous-titre du hero, bandeaux d'intégrations, section MCP. Aucune couleur en dur : tout passe par les variables de thème, pour que le mode sombre (bouton de la nav) reste correct sans règle dédiée. ========================================================================== */ /* Le titre v1.1.0 est plus long que le précédent : sa troisième ligne ("pour Windows & vos Agents IA") repassait sur deux lignes et poussait le CTA secondaire sous la ligne de flottaison en 1440x900. La traiter comme un qualificatif plus petit récupère une ligne entière et hiérarchise le titre au lieu de le rapetisser en bloc. */ .hero h1 .t3 { font-size: 0.62em; line-height: 1.25; } .hero-sub { margin-top: 14px; max-width: 34em; font-size: 1.02rem; line-height: 1.6; color: var(--text); } .hero-sub b { color: var(--white); font-weight: 600; } /* --- Bandeaux d'intégrations --------------------------------------------- */ .logos-band { padding-block: 72px; border-block: 1px solid var(--line-soft); background: var(--card-2); } .logos-title { text-align: center; font-size: 0.95rem; color: var(--text-dim); letter-spacing: 0.01em; } .logos-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 36px; } .logos-sub { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-deep); margin-bottom: 16px; } .logos-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .logos-row a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--white); font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: border-color .18s ease, transform .18s ease; } .logos-row a:hover { border-color: var(--accent); transform: translateY(-2px); } .logos-row img { display: block; flex: none; } /* Marques dont le noir officiel disparaîtrait sur fond sombre. En clair, le noir d'origine est conservé tel quel. */ :root:not([data-theme="light"]) .logo-ink { filter: invert(1); } .logo-word { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; color: var(--accent-deep); } .logo-tag { font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--track-bg); color: var(--text-dim); } .logo-tag.ok { background: var(--accent-soft); color: var(--accent-deep); } .logos-note { margin-top: 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-dim); max-width: 46em; } .logos-note b { color: var(--text); font-weight: 600; } .logos-note code { font-family: var(--mono); font-size: 0.82em; color: var(--accent-deep); } @media (max-width: 860px) { .logos-groups { grid-template-columns: 1fr; gap: 34px; } .logos-band { padding-block: 52px; } } /* --- Section MCP : les deux modes ---------------------------------------- */ .mcp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 54px; } .mcp-card { padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); } .mcp-card.accent { border-color: var(--accent); box-shadow: var(--pill-shadow); } .mcp-kicker { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-deep); } .mcp-card h3 { margin-top: 10px; font-size: 1.45rem; color: var(--white); font-weight: 700; } .mcp-card h3 kbd { font-family: var(--mono); font-size: 0.78em; padding: 2px 9px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; background: var(--card-2); } .mcp-list { list-style: none; margin-top: 20px; display: grid; gap: 13px; } .mcp-list li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.6; } .mcp-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .mcp-list code { font-family: var(--mono); font-size: 0.86em; color: var(--accent-deep); } /* --- Bloc de configuration ----------------------------------------------- */ .mcp-code { margin-top: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; } .mcp-code-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--line-soft); background: var(--card-2); } .mcp-code-file { font-family: var(--mono); font-size: 0.8rem; color: var(--text); } .mcp-code-hint { font-size: 0.76rem; color: var(--text-dim); } .mcp-code pre { margin: 0; padding: 22px 20px; overflow-x: auto; } .mcp-code code { font-family: var(--mono); font-size: 0.86rem; line-height: 1.7; color: var(--white); white-space: pre; } .mcp-code-note { padding: 0 20px 20px; font-size: 0.86rem; line-height: 1.55; color: var(--text-dim); } @media (max-width: 860px) { .mcp-grid { grid-template-columns: 1fr; margin-top: 38px; } .mcp-card { padding: 24px; } .mcp-code code { font-size: 0.78rem; } }