/* ===========================================================================
Lumyeye — site styles (Direction B : v6 dominant + Frameblox accent)
- Atkinson Hyperlegible (body, basse vision) + SF Pro Display (titres)
- Light + Dark commutable via toggle, prefers-color-scheme respecté
- WCAG AAA visé sur le contenu, AA mini sur le marketing
- Fonts chargés en async via dans chaque HTML
=========================================================================== */
:root {
/* Gradient signature — réservé aux moments rares (hero accent uniquement) */
--grad: linear-gradient(90deg, #DD4A3A 0%, #E76F51 30%, #F4A261 60%, #E9C46A 100%);
/* Radius — légèrement plus francs (éditorial vs Apple-rond) */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
/* Container */
--container: 1240px;
/* Section padding vertical */
--section-pad: clamp(80px, 14vh, 140px);
/* Polices — Sonic Editorial */
--font-display: "Fraunces", "Iowan Old Style", "New York", Georgia, serif;
--font-body: "Atkinson Hyperlegible", -apple-system, "SF Pro Text", Arial, sans-serif;
--font-serif: "Fraunces", "Iowan Old Style", "New York", Georgia, serif;
--shadow-card: 0 24px 60px rgba(34, 21, 11, 0.08);
/* Grain papier (data URI SVG noise, très léger) */
--paper-grain: url("data:image/svg+xml;utf8,");
}
/* ── Light theme (default) — crème / encre / corail ─────────────────────── */
:root, [data-theme="light"] {
--bg: #FBF7F0;
--bg-soft: #F4EEE2;
--surface: #FFFFFF;
--fg: #1A0F08;
--fg-muted: #5A4A3D;
--fg-subtle: #8C7B6B;
--border: #E8DDC9;
--link: #C53B2A;
--focus: #C53B2A;
--accent: #DD4A3A;
}
/* ── Dark theme — warm dark, cream text, coral chaud ────────────────────── */
[data-theme="dark"] {
--bg: #1A1310;
--bg-soft: #221A15;
--surface: #2A211A;
--fg: #FBF7F0;
--fg-muted: #C2B5A4;
--fg-subtle: #8E8275;
--border: #34281F;
--link: #FF7A5C;
--focus: #FF7A5C;
--accent: #FF6A4F;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #1A1310; --bg-soft: #221A15; --surface: #2A211A;
--fg: #FBF7F0; --fg-muted: #C2B5A4; --fg-subtle: #8E8275;
--border: #34281F; --link: #FF7A5C; --focus: #FF7A5C; --accent: #FF6A4F;
}
}
/* ── Reset + base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--root-size, 18px); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
body {
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.55;
color: var(--fg);
background: var(--bg);
letter-spacing: 0.005em;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
font-optical-sizing: auto;
/* Grain papier subtil sur le fond crème — invisible sur dark */
background-image: var(--paper-grain);
background-size: 280px 280px;
background-attachment: fixed;
}
[data-theme="dark"] body {
background-image: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) body { background-image: none; }
}
/* ─── Blog Apple-style v3 override (force charte Apple) ─── */
html[data-screen-label="Blog"] body {
background: #FFFFFF;
background-image: none;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-screen-label="Blog"] .blog-article {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
letter-spacing: -0.005em;
}
html[data-screen-label="Blog"] .blog-article h1 {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1.08;
font-size: clamp(34px, 5vw, 48px);
font-variation-settings: normal;
}
html[data-screen-label="Blog"] .blog-article h2,
html[data-screen-label="Blog"] .blog-article h2.v3-h2 {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.022em !important;
line-height: 1.15 !important;
font-size: clamp(24px, 3vw, 30px) !important;
font-variation-settings: normal !important;
margin: 48px 0 16px !important;
}
html[data-screen-label="Blog"] .blog-article h3 {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
letter-spacing: -0.014em;
font-size: 20px;
font-variation-settings: normal;
margin: 32px 0 12px;
}
html[data-screen-label="Blog"] .blog-article p,
html[data-screen-label="Blog"] .blog-article li {
font-size: 17px;
line-height: 1.65;
color: #1d1d1f;
}
html[data-screen-label="Blog"] .blog-article .tldr {
background: #F5F5F7 !important;
border-left: 4px solid #007AFF !important;
border-radius: 14px !important;
padding: 22px 26px !important;
margin: 32px 0 !important;
}
html[data-screen-label="Blog"] .blog-article .tldr h2,
html[data-screen-label="Blog"] .blog-article .tldr h3,
html[data-screen-label="Blog"] .blog-article .tldr p:first-child strong {
font-size: 17px !important;
font-weight: 700 !important;
margin: 0 0 10px !important;
letter-spacing: -0.01em !important;
}
html[data-screen-label="Blog"] .blog-article .article-author {
background: #F5F5F7 !important;
border-radius: 16px !important;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 9999;
background: #1A1310; color: #FBF7F0; padding: 14px 22px;
font-weight: 700; font-size: 18px;
}
.skip-link:focus { left: 20px; top: 20px; }
/* Typo — Sonic Editorial avec Fraunces variable */
h1, h2 {
font-family: var(--font-display);
font-weight: 350;
font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 350;
letter-spacing: -0.018em;
line-height: 1.05;
color: inherit;
text-wrap: balance;
}
h3 {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 36, "SOFT" 20, "wght" 500;
letter-spacing: -0.008em;
line-height: 1.2;
font-size: clamp(22px, 2.4vw, 32px);
color: inherit;
text-wrap: balance;
}
h1 {
font-size: clamp(48px, 7.4vw, 104px);
line-height: 1.0;
letter-spacing: -0.022em;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 350;
}
h2 {
font-size: clamp(36px, 5.4vw, 72px);
font-variation-settings: "opsz" 96, "SOFT" 40, "wght" 360;
}
h4, h5, h6 { font-family: var(--font-body); font-weight: 700; line-height: 1.3; }
p { line-height: 1.6; }
/* Italique éditorial — utilisé pour les accents et mots-clés */
.serif-accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400;
letter-spacing: -0.005em;
}
.gradient-text {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 300;
}
.eyebrow {
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--fg-muted);
margin-bottom: 24px;
display: block;
}
.eyebrow.accent { color: var(--accent); }
/* Layout */
section { position: relative; width: 100%; padding: var(--section-pad) 0; }
.container { width: min(var(--container), 94%); margin: 0 auto; padding: 0 20px; }
/* Section variants */
.bg-dark { background: #1A1310; color: #FBF7F0; }
.bg-dark .eyebrow { color: var(--link); }
.bg-soft { background: var(--bg-soft); }
.bg-white { background: var(--bg); color: var(--fg); }
/* ── Header (sticky blur, Sonic Editorial) ──────────────────────────────── */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(251, 247, 240, 0.86);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .site-header {
background: rgba(26, 19, 16, 0.78);
border-bottom-color: rgba(251, 247, 240, 0.08);
}
.brand-text {
font-family: var(--font-display);
font-weight: 500;
font-variation-settings: "opsz" 36, "SOFT" 50, "wght" 500;
letter-spacing: -0.005em;
}
.site-header > .container {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 14px 20px;
}
.brand {
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: var(--fg); font-weight: 700;
}
.brand img { width: 40px; height: 40px; border-radius: 8px; }
.brand-text { font-size: 19px; font-family: var(--font-body); letter-spacing: 0.01em; }
nav.primary ul {
display: flex; gap: 32px; list-style: none; padding: 0; margin: 0;
}
nav.primary a {
color: var(--fg); text-decoration: none; font-weight: 400; font-size: 17px;
opacity: 0.82; transition: opacity 200ms;
font-family: var(--font-body); padding: 6px 4px;
}
nav.primary a:hover, nav.primary a:focus-visible { opacity: 1; }
nav.primary a[aria-current="page"] { opacity: 1; font-weight: 700; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.tool-btn {
background: transparent; border: 1px solid var(--border); color: var(--fg);
padding: 9px 14px; border-radius: 999px; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
}
.tool-btn:hover { background: var(--bg-soft); }
.nav-toggle { display: none; }
@media (max-width: 820px) {
nav.primary { display: none; }
nav.primary.open {
display: block; position: absolute; top: 100%; left: 0; right: 0;
background: var(--bg); border-bottom: 1px solid var(--border); padding: 20px;
}
nav.primary.open ul { flex-direction: column; gap: 16px; }
.nav-toggle { display: inline-flex; }
}
/* ── Footer (toujours noir) ──────────────────────────────────────────────── */
.site-footer {
background: #1A1310; color: rgba(251, 247, 240, 0.6);
padding: 90px 0 44px;
border-top: 1px solid rgba(251, 247, 240, 0.08);
}
.site-footer .container { padding: 0 20px; max-width: 1240px; }
.site-footer .top-row {
display: grid; grid-template-columns: 1.2fr 3fr; gap: 56px;
margin-bottom: 66px; padding-bottom: 44px; border-bottom: 1px solid rgba(251, 247, 240, 0.08);
}
.site-footer .brand-wrap { color: #FBF7F0; }
.site-footer .brand-wrap .brand { color: #FBF7F0; margin-bottom: 16px; }
.site-footer .brand-wrap .baseline {
font-family: var(--font-serif);
font-style: italic;
font-variation-settings: "opsz" 18, "SOFT" 80, "wght" 400;
font-size: 17px;
color: rgba(251, 247, 240, 0.62);
max-width: 340px;
line-height: 1.5;
letter-spacing: 0.005em;
}
.site-footer .links {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.site-footer h4 {
color: #FBF7F0; font-family: var(--font-body);
font-size: 13px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 20px;
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.site-footer a {
color: rgba(251, 247, 240, 0.62); text-decoration: none; font-size: 16px;
transition: color 200ms;
}
.site-footer a:hover, .site-footer a:focus-visible { color: #F4A261; }
.site-footer .legal {
color: rgba(251, 247, 240, 0.42); font-size: 14px;
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.site-footer .legal a { color: rgba(251, 247, 240, 0.5); }
@media (max-width: 900px) {
.site-footer .top-row { grid-template-columns: 1fr; }
.site-footer .links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.site-footer .links { grid-template-columns: 1fr; }
}
/* ── Buttons (pill, v6 style) ────────────────────────────────────────────── */
.cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 18px 36px; border-radius: 999px;
font-family: var(--font-body); font-weight: 700; font-size: 18px;
text-decoration: none; cursor: pointer; border: 0;
transition: opacity 200ms, transform 100ms, background 200ms;
min-height: 56px;
line-height: 1;
}
.cta:active { transform: scale(0.98); }
.cta.primary { background: var(--fg); color: var(--bg); }
.bg-dark .cta.primary,
.hero .cta.primary,
.journey .cta.primary,
.price-shock .cta.primary,
.faq-section .cta.primary,
.cta-final .cta.primary {
background: #FBF7F0;
color: #1A1310;
}
.cta.primary:hover, .cta.primary:focus-visible {
opacity: 0.92;
transform: translateY(-1px);
text-decoration: none;
}
.cta.ghost {
background: transparent; color: var(--accent);
border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
padding: 16.5px 28px;
}
.hero .cta.ghost,
.journey .cta.ghost,
.price-shock .cta.ghost,
.faq-section .cta.ghost,
.cta-final .cta.ghost {
color: #F4A261;
border-color: rgba(244, 162, 97, 0.45);
}
.cta.ghost:hover, .cta.ghost:focus-visible {
background: color-mix(in srgb, var(--accent) 8%, transparent);
text-decoration: none;
transform: translateY(-1px);
}
.hero .cta.ghost:hover, .hero .cta.ghost:focus-visible {
background: rgba(244, 162, 97, 0.1);
}
.cta-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.cta-row.left { justify-content: flex-start; }
/* ── Card pattern ────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 36px;
transition: transform 250ms, box-shadow 250ms, border-color 250ms;
}
.card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
}
.bg-dark .card {
background: #0a0a0a;
border-color: #1a1a1a;
}
.bg-dark .card:hover {
border-color: rgba(221, 74, 58, 0.32);
box-shadow: 0 14px 40px rgba(221, 74, 58, 0.14);
}
.card h3 { margin-bottom: 16px; }
.card p { color: var(--fg-muted); font-size: 17px; }
.bg-dark .card p { color: rgba(251, 247, 240, 0.7); }
/* ── Tweaks panel (a11y existant — conservé) ─────────────────────────────── */
.tweaks-trigger {
position: fixed; bottom: 1rem; right: 1rem; z-index: 60;
}
.tweaks-panel {
position: fixed; bottom: 4.5rem; right: 1rem; z-index: 60;
background: var(--surface); border: 2px solid var(--border);
border-radius: var(--radius-sm); padding: 1.25rem;
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18);
width: 280px;
display: none;
}
.tweaks-panel[aria-hidden="false"] { display: block; }
.tweaks-panel h4 {
font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--fg-subtle); margin: 0.75rem 0 0.5rem;
}
.tweaks-panel h4:first-child { margin-top: 0; }
.tweaks-panel .seg { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tweaks-panel .seg button {
flex: 1; min-width: 60px; padding: 0.5rem 0.75rem;
background: transparent; border: 2px solid var(--border); color: var(--fg);
border-radius: 8px; cursor: pointer; font-family: inherit; font-weight: 700;
}
.tweaks-panel .seg button[aria-pressed="true"] {
background: var(--fg); color: var(--bg); border-color: var(--fg);
}
/* ============================================================================
SECTIONS — homepage (index.html)
============================================================================ */
/* ── Hero — warm dark Sonic Editorial ────────────────────────────────────── */
.hero {
background:
radial-gradient(ellipse at 20% 0%, rgba(221, 74, 58, 0.12), transparent 55%),
radial-gradient(ellipse at 80% 100%, rgba(244, 162, 97, 0.08), transparent 55%),
#1A1310;
color: #FBF7F0;
padding: 120px 0 110px; overflow: hidden; text-align: center;
position: relative;
}
.hero::before {
content: "";
position: absolute; inset: 0;
background-image: var(--paper-grain);
background-size: 280px 280px;
opacity: 0.4;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero .eyebrow {
color: #F4A261;
margin-bottom: 32px;
font-weight: 700;
letter-spacing: 0.16em;
font-size: 13px;
}
.hero h1 { color: #FBF7F0; margin: 0 auto 24px; max-width: 1060px; }
.hero h1 .accent {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hero .subtagline {
font-family: var(--font-body);
font-size: clamp(18px, 2vw, 24px); font-weight: 400;
color: rgba(251, 247, 240, 0.82);
max-width: 720px; margin: 0 auto 14px;
line-height: 1.55; letter-spacing: 0;
}
.hero .subtagline strong {
color: #FBF7F0;
font-weight: 700;
}
.hero .lead {
font-size: clamp(17px, 1.9vw, 22px); color: rgba(251, 247, 240, 0.7);
max-width: 720px; margin: 0 auto 40px; line-height: 1.55;
}
.hero .trust-row {
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
margin-top: 36px;
}
.hero .trust-row .chip {
font-size: 14px; color: rgba(251, 247, 240, 0.85);
background: rgba(251, 247, 240, 0.05);
border: 1px solid rgba(251, 247, 240, 0.14);
padding: 9px 18px; border-radius: 999px;
font-weight: 400;
letter-spacing: 0.01em;
}
.hero .trust-row .chip.strong {
background: rgba(244, 162, 97, 0.12);
border-color: rgba(244, 162, 97, 0.35);
color: #F4A261;
font-weight: 700;
}
/* ── Features pivot (section 2 home) ─────────────────────────────────────── */
.features-pivot { background: var(--bg); text-align: center; }
[data-theme="dark"] .features-pivot { background: var(--bg); color: var(--fg); }
.features-pivot .eyebrow { color: var(--fg-muted); margin-bottom: 20px; }
.features-pivot h2 { margin: 0 auto 80px; max-width: 1020px; }
.features-pivot .grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px; max-width: 1140px; margin: 0 auto; text-align: left;
}
.features-pivot .card .ico {
width: 56px; height: 56px; margin-bottom: 24px;
background: var(--bg-soft); border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
[data-theme="dark"] .features-pivot .card .ico { background: rgba(251, 247, 240, 0.05); }
@media (max-width: 820px) {
.features-pivot .grid { grid-template-columns: 1fr; }
}
/* ── Video carousel (section 3 home) ─────────────────────────────────────── */
.video-carousel { background: var(--bg-soft); padding: 110px 0; color: var(--fg); }
.video-carousel .eyebrow {
color: var(--fg-muted); margin-bottom: 20px; text-align: center;
}
.video-carousel h2 {
text-align: center; max-width: 1000px; margin: 0 auto 16px; padding: 0 20px;
font-weight: 300;
}
.video-carousel h2 .accent {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 400;
}
.video-carousel .lead {
font-size: 19px; color: var(--fg-muted);
max-width: 820px; margin: 0 auto 56px;
text-align: center; line-height: 1.5; padding: 0 20px;
}
.vc-wrap {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(480px, 2.3fr) minmax(280px, 1fr);
gap: 16px; max-width: 1380px; margin: 0 auto;
align-items: stretch; padding: 0 20px;
}
.vc-col { display: flex; flex-direction: column; gap: 8px; }
button.vc-thumb {
display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center;
background: var(--surface); border: 2px solid transparent; border-radius: 14px;
padding: 8px; cursor: pointer; text-align: left; color: inherit;
font-family: inherit; transition: border-color .2s, background .2s, transform .2s;
min-height: 68px; overflow: hidden; flex: 0 0 auto; width: 100%;
}
button.vc-thumb:hover, button.vc-thumb:focus-visible {
border-color: var(--border); transform: translateY(-1px);
}
button.vc-thumb[aria-selected="true"] {
border-color: var(--accent); background: rgba(221, 74, 58, 0.08);
box-shadow: 0 0 0 1px rgba(221, 74, 58, 0.15);
}
[data-theme="dark"] button.vc-thumb[aria-selected="true"] {
background: rgba(221, 74, 58, 0.1);
box-shadow: 0 0 0 1px rgba(221, 74, 58, 0.15);
}
.vc-thumb .thumb-img {
width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
background: #0a0a0a; flex: 0 0 auto; position: relative;
}
.vc-thumb .thumb-img video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.vc-thumb .thumb-img::after {
content: "▶"; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #FBF7F0; font-size: 14px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
pointer-events: none; opacity: 0.85;
}
.vc-thumb .thumb-lbl {
min-width: 0; overflow: hidden;
display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.vc-thumb .thumb-lbl .cat {
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent); font-weight: 700; line-height: 1; display: block;
}
.vc-thumb .thumb-lbl .nm {
font-size: 16px; font-weight: 700; color: var(--fg);
letter-spacing: -0.005em; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.vc-stage {
background: #1A1310; border-radius: 22px; overflow: hidden;
position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
min-height: 600px; display: flex; flex-direction: column;
}
.vc-stage video {
width: 100%; flex: 1; object-fit: contain; background: #1A1310;
display: block; min-height: 0;
}
.vc-stage .caption {
position: absolute; left: 28px; right: 28px; bottom: 24px;
color: #FBF7F0; z-index: 3; pointer-events: none;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.vc-stage .caption .ep {
color: var(--accent); font-size: 14px; letter-spacing: 0.24em;
text-transform: uppercase; font-weight: 700; margin-bottom: 6px;
}
.vc-stage .caption h3 {
font-size: 26px; font-weight: 400; margin: 0 0 6px; color: #FBF7F0;
letter-spacing: -0.01em;
}
.vc-stage .caption p {
color: #d1d1d6; font-size: 16px; margin: 0; max-width: 620px;
line-height: 1.45;
}
.vc-mobile-selector { display: none; }
@media (max-width: 980px) {
.vc-wrap { grid-template-columns: 1fr; padding: 0 16px; gap: 16px; }
.vc-stage { min-height: unset; aspect-ratio: 16/11; order: -2; }
.vc-stage .caption {
position: relative; left: auto; right: auto; bottom: auto;
padding: 16px 20px 18px; background: rgba(0, 0, 0, 0.82);
backdrop-filter: blur(10px); text-shadow: none;
}
.vc-stage .caption h3 { font-size: 21px; }
.vc-stage .caption p { font-size: 15px; }
.vc-mobile-selector {
display: block; order: -1; background: var(--surface);
padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border);
}
.vc-mobile-selector label {
display: block; font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--accent); font-weight: 700;
margin-bottom: 6px;
}
.vc-mobile-selector select {
width: 100%; padding: 14px; font-size: 16px;
border: 1px solid var(--border); border-radius: 10px;
font-family: inherit; background: var(--bg-soft); color: var(--fg);
}
.vc-col { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.vc-col button.vc-thumb { flex: 1 1 calc(50% - 5px); min-width: 0; }
}
@media (max-width: 520px) {
.vc-col button.vc-thumb { flex: 1 1 100%; }
.vc-thumb .thumb-lbl .nm { white-space: normal; }
}
/* ── Demo grid compact (section 4 home — rappel emoji) ───────────────────── */
.demo-recap { background: var(--bg); }
[data-theme="dark"] .demo-recap { background: var(--bg); }
.demo-recap .eyebrow { color: var(--fg-muted); margin-bottom: 20px; text-align: center; }
.demo-recap h2 { text-align: center; margin: 0 auto 56px; max-width: 920px; font-weight: 300; }
.demo-grid-compact {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px; max-width: 1180px; margin: 0 auto; list-style: none; padding: 0;
}
.demo-grid-compact li {
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: 14px; padding: 18px;
display: flex; flex-direction: column; gap: 6px; min-height: 116px;
transition: transform 200ms, border-color 200ms;
}
.demo-grid-compact li:hover {
transform: translateY(-2px); border-color: var(--accent);
}
.demo-grid-compact li .ico { font-size: 1.4rem; }
.demo-grid-compact li .ttl { font-weight: 700; font-size: 15px; line-height: 1.2; }
.demo-grid-compact li .quote { font-size: 13px; color: var(--fg-muted); font-style: italic; }
/* ── Genesis 01-04 (section 5) ───────────────────────────────────────────── */
.genesis { background: var(--bg); text-align: center; }
[data-theme="dark"] .genesis { background: var(--bg); }
.genesis .eyebrow { color: var(--fg-muted); margin-bottom: 24px; }
.genesis h2 { margin: 0 auto 80px; max-width: 1020px; padding: 0 20px; }
.genesis h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 400;
}
.genesis .steps {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px; max-width: 1140px; margin: 0 auto;
text-align: left; padding: 0 20px;
}
.genesis .step {
background: var(--bg-soft);
padding: 48px 40px; border-radius: 24px;
transition: transform .25s, box-shadow .25s;
}
.genesis .step:hover {
transform: translateY(-3px); box-shadow: var(--shadow-card);
}
.genesis .num-tag {
display: inline-block; font-size: 14px;
color: var(--accent); letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 700;
margin-bottom: 22px; padding: 8px 18px;
background: rgba(221, 74, 58, 0.1); border-radius: 999px;
}
[data-theme="dark"] .genesis .num-tag { background: rgba(221, 74, 58, 0.1); }
.genesis .step h3 { font-weight: 400; margin-bottom: 20px; line-height: 1.25; }
.genesis .step h3 b { font-weight: 700; }
.genesis .step p { color: var(--fg-muted); font-size: 17px; line-height: 1.55; }
@media (max-width: 820px) {
.genesis .steps { grid-template-columns: 1fr; }
.genesis .step { padding: 36px 28px; }
}
/* ── Journey 6 moments (section 6 — fond noir) ───────────────────────────── */
.journey { background: #1A1310; color: #FBF7F0; padding: var(--section-pad) 0; text-align: center; }
.journey .eyebrow { color: var(--link); margin-bottom: 26px; }
.journey h2 { color: #FBF7F0; margin: 0 auto 28px; max-width: 1080px; padding: 0 20px; }
.journey h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.journey .sub {
color: rgba(251, 247, 240, 0.7); font-size: 21px; font-weight: 300;
max-width: 820px; margin: 0 auto 64px;
line-height: 1.5; padding: 0 20px;
}
.journey [role="tablist"] {
display: grid; grid-template-columns: repeat(6, 1fr);
gap: 14px; max-width: 1280px; margin: 0 auto 52px; padding: 0 20px;
}
.journey button[role="tab"] {
background: #0e0e0e; border: 1.5px solid #1a1a1a;
border-radius: 22px; padding: 28px 18px;
text-align: center; cursor: pointer; color: #FBF7F0;
font-family: inherit; transition: transform .2s, border-color .2s, background .2s;
}
.journey button[role="tab"][aria-selected="true"] {
border-color: var(--link); background: #0a1218;
box-shadow: 0 14px 40px rgba(221, 74, 58, 0.14);
}
.journey button[role="tab"]:hover, .journey button[role="tab"]:focus-visible {
transform: translateY(-3px); border-color: rgba(221, 74, 58, 0.38);
}
.journey button[role="tab"] .label {
color: var(--link); font-size: 15px; letter-spacing: 0.16em;
text-transform: uppercase; margin-bottom: 8px; font-weight: 700;
display: block;
}
.journey button[role="tab"] .name {
color: #FBF7F0; font-size: 21px; font-weight: 400; letter-spacing: -0.01em;
display: block;
}
.journey .panels { max-width: 1280px; margin: 0 auto; min-height: 280px; padding: 0 20px; }
.journey [role="tabpanel"] {
display: none; background: #0e0e0e; border: 1px solid rgba(251, 247, 240, 0.08);
border-radius: 26px; padding: 48px; text-align: left;
}
.journey [role="tabpanel"][data-active="true"] {
display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px;
animation: fade-up .3s ease;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.journey [role="tabpanel"] .lead-panel h3 {
font-size: 30px; font-weight: 300; color: #FBF7F0;
margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.2;
}
.journey [role="tabpanel"] .lead-panel h3 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent;
}
.journey [role="tabpanel"] .lead-panel p {
color: rgba(251, 247, 240, 0.78); font-size: 19px; font-weight: 400; line-height: 1.6;
}
.journey [role="tabpanel"] .actions {
display: flex; flex-direction: column; gap: 14px;
}
.journey [role="tabpanel"] .action {
display: flex; gap: 18px; align-items: flex-start;
padding: 20px 22px; background: #1A1310;
border: 1px solid rgba(251, 247, 240, 0.08); border-radius: 18px;
}
.journey [role="tabpanel"] .action .ico-action {
width: 44px; height: 44px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: rgba(221, 74, 58, 0.08); border-radius: 11px;
font-size: 22px;
}
.journey [role="tabpanel"] .action strong {
color: #FBF7F0; font-size: 19px; font-weight: 700;
display: block; margin-bottom: 6px;
}
.journey [role="tabpanel"] .action .d {
color: rgba(251, 247, 240, 0.7); font-size: 16px; line-height: 1.55;
}
@media (max-width: 980px) {
.journey [role="tablist"] { grid-template-columns: repeat(3, 1fr); }
.journey [role="tabpanel"] { padding: 30px; }
.journey [role="tabpanel"][data-active="true"] {
grid-template-columns: 1fr; gap: 28px;
}
}
/* ── Price shock (section 7 — fond noir) ─────────────────────────────────── */
.price-shock { background: #1A1310; color: #FBF7F0; padding: var(--section-pad) 0; text-align: center; border-top: 1px solid #1a1a1a; }
.price-shock h2 { color: #FBF7F0; max-width: 1080px; margin: 0 auto 22px; }
.price-shock h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.price-shock .lead {
font-size: 21px; color: rgba(251, 247, 240, 0.7); margin: 0 auto 56px;
max-width: 780px; font-weight: 300;
}
.price-shock .compare {
display: grid; grid-template-columns: 1fr 1fr;
gap: 24px; max-width: 1020px; margin: 0 auto;
text-align: left; padding: 0 20px;
}
.price-shock .col { padding: 40px 36px; border-radius: 22px; border: 1px solid rgba(251, 247, 240, 0.08); }
.price-shock .col.old { background: #0a0a0a; }
.price-shock .col.new {
background: radial-gradient(ellipse at top left, rgba(221, 74, 58, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
border-color: rgba(221, 74, 58, 0.22);
}
.price-shock .col h3 {
font-size: 16px; font-weight: 700;
color: var(--fg-subtle); letter-spacing: 0.18em;
text-transform: uppercase; margin-bottom: 26px;
font-family: var(--font-body);
}
.price-shock .col.new h3 { color: var(--link); }
.price-shock .col ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.price-shock .col li {
display: flex; justify-content: space-between; gap: 20px;
font-size: 18px; color: #d1d1d6; font-weight: 400;
border-bottom: 1px solid #1a1a1a; padding-bottom: 14px;
}
.price-shock .col li .p {
color: var(--fg-subtle); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.price-shock .col.new li .p { color: var(--link); }
.price-shock .total {
margin-top: 24px; padding-top: 22px;
border-top: 1px solid #333;
display: flex; justify-content: space-between;
font-size: 28px; font-weight: 400;
}
.price-shock .total.old { text-decoration: line-through; color: #636366; }
.price-shock .total.new .p {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 700;
}
@media (max-width: 780px) {
.price-shock .compare { grid-template-columns: 1fr; }
.price-shock .col { padding: 30px 24px; }
}
/* ── Trust + callouts (section 8) ────────────────────────────────────────── */
.trust-section { background: var(--bg); text-align: center; }
[data-theme="dark"] .trust-section { background: var(--bg); }
.trust-section .eyebrow { color: var(--fg-muted); margin-bottom: 24px; }
.trust-section h2 { margin: 0 auto 64px; max-width: 980px; padding: 0 20px; }
.trust-section h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.trust-section .stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; max-width: 1180px; margin: 0 auto 48px;
padding: 0 20px;
}
.trust-section .stat {
padding: 32px 22px; background: var(--bg-soft);
border: 1px solid var(--border); border-radius: 22px;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.trust-section .stat .big {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 56px); font-weight: 200;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
color: transparent; line-height: 1;
letter-spacing: -0.02em; margin-bottom: 14px;
}
.trust-section .stat .lbl { color: var(--fg); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.trust-section .stat .sub { color: var(--fg-muted); font-size: 15px; }
.trust-section .callouts {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px; max-width: 1180px; margin: 0 auto;
padding: 0 20px;
}
.trust-section .callout {
background: var(--surface); border: 1px solid var(--border);
border-radius: 20px; padding: 32px;
text-align: left;
transition: border-color .2s, transform .2s;
}
.trust-section .callout:hover { border-color: var(--accent); transform: translateY(-3px); }
.trust-section .callout .tag {
color: var(--accent); font-size: 14px;
letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 700; margin-bottom: 14px;
}
.trust-section .callout h3 { margin-bottom: 12px; font-weight: 400; font-size: 22px; }
.trust-section .callout p { color: var(--fg-muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) {
.trust-section .stats, .trust-section .callouts {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.trust-section .stats, .trust-section .callouts {
grid-template-columns: 1fr;
}
}
/* ── Pricing (section 9 — fond gris clair) ───────────────────────────────── */
.pricing { background: var(--bg-soft); padding: var(--section-pad) 0; text-align: center; }
.pricing .eyebrow { color: var(--fg-muted); margin-bottom: 24px; }
.pricing h2 { margin-bottom: 22px; padding: 0 20px; }
.pricing h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 400;
}
.pricing .sub {
color: var(--fg-muted); font-size: 21px; font-weight: 300;
margin: 0 auto 56px; max-width: 780px;
line-height: 1.5; padding: 0 20px;
}
.pricing .plans {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 18px; max-width: 1080px; margin: 18px auto 0;
padding: 0 20px;
}
.pricing .plan {
background: var(--surface); border: 1px solid var(--border);
border-radius: 24px; padding: 40px 30px;
text-align: left;
transition: transform .25s, box-shadow .25s;
display: flex; flex-direction: column;
}
.pricing .plan.featured {
border: 0; background: #1A1310; color: #FBF7F0;
position: relative; transform: scale(1.04);
}
.pricing .plan.featured::before {
content: "Le plus choisi"; white-space: nowrap;
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
background: var(--grad); color: #1A1310;
font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase; padding: 8px 22px;
border-radius: 999px; font-weight: 700;
}
.pricing .plan h3 {
font-size: 17px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 22px; color: var(--fg-muted);
font-family: var(--font-body);
}
.pricing .plan.featured h3 { color: #F4A261; }
.pricing .plan .price {
font-family: var(--font-display);
font-size: 56px;
font-weight: 350;
font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 350;
letter-spacing: -0.025em; line-height: 1; margin-bottom: 10px;
}
.pricing .plan .price .unit {
font-size: 20px; color: var(--fg-subtle); font-weight: 400;
font-variation-settings: "opsz" 18, "SOFT" 30, "wght" 400;
}
.pricing .plan.featured .price .unit { color: rgba(251, 247, 240, 0.6); }
.pricing .plan .save {
color: var(--accent); font-size: 15px; font-weight: 700;
margin-bottom: 22px;
letter-spacing: 0.01em;
}
.pricing .plan.featured .save { color: #F4A261; }
.pricing .plan ul {
list-style: none; display: flex; flex-direction: column; gap: 12px;
font-size: 16px; color: var(--fg-muted); flex: 1;
}
.pricing .plan.featured ul { color: rgba(251, 247, 240, 0.78); }
.pricing .plan ul li {
padding-left: 26px; position: relative; line-height: 1.5;
}
.pricing .plan ul li::before {
content: "→"; position: absolute; left: 0; top: 0;
color: var(--accent); font-weight: 700; font-size: 16px;
}
.pricing .plan.featured ul li::before { color: #F4A261; }
.pricing .plan .cta {
margin-top: 28px; align-self: stretch; justify-content: center;
}
.pricing .plan.featured .cta.primary { background: #FBF7F0; color: #1A1310; }
@media (max-width: 820px) {
.pricing .plans { grid-template-columns: 1fr; }
.pricing .plan.featured { transform: none; }
}
/* ── FAQ (section 10 — fond noir) ────────────────────────────────────────── */
.faq-section { background: #1A1310; color: #FBF7F0; padding: var(--section-pad) 0; }
.faq-section .container { max-width: 900px; padding: 0 20px; }
.faq-section .eyebrow {
color: var(--link); margin-bottom: 24px; text-align: center;
}
.faq-section h2 { color: #FBF7F0; margin-bottom: 56px; text-align: center; }
.faq-section h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.faq-section details {
border: 1px solid rgba(251, 247, 240, 0.08); background: #0a0a0a;
border-radius: 16px; margin-bottom: 14px;
padding: 0; transition: border-color .2s, background .2s;
overflow: hidden;
}
.faq-section details[open] {
border-color: rgba(221, 74, 58, 0.32);
background: #0c1218;
}
.faq-section summary {
cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: 20px; color: #FBF7F0; padding: 24px 28px;
}
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary .q {
font-size: 20px; font-weight: 700; flex: 1; line-height: 1.4;
}
.faq-section summary:hover .q { color: var(--link); }
.faq-section summary .plus {
font-size: 30px; color: var(--link); font-weight: 300;
transition: transform .2s, color .2s; line-height: 1;
flex: 0 0 auto; width: 32px; text-align: center;
}
.faq-section details[open] summary .plus { transform: rotate(45deg); color: #ff8a3c; }
.faq-section details .answer {
padding: 0 28px 26px; color: rgba(251, 247, 240, 0.78);
font-size: 17px; line-height: 1.65;
}
.faq-section details .answer a {
color: var(--link); text-decoration: none;
border-bottom: 1px solid rgba(221, 74, 58, 0.28);
}
/* ── CTA final (section 11 — fond noir) ──────────────────────────────────── */
.cta-final { background: #1A1310; color: #FBF7F0; padding: var(--section-pad) 0; text-align: center; border-top: 1px solid #1a1a1a; }
.cta-final h2 { color: #FBF7F0; max-width: 980px; margin: 0 auto 32px; padding: 0 20px; }
.cta-final h2 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.cta-final .lead { font-size: 19px; color: rgba(251, 247, 240, 0.7); margin-bottom: 36px; max-width: 600px; margin: 0 auto 36px; }
.cta-final .cta-row { margin-top: 24px; }
.cta-final .legal-note {
margin-top: 24px; font-size: 15px; color: var(--fg-subtle);
}
/* ============================================================================
PAGE — histoire.html
============================================================================ */
.hero-short {
background: #1A1310; color: #FBF7F0;
padding: 90px 0 80px; text-align: center;
}
.hero-short .eyebrow { color: var(--link); margin-bottom: 24px; }
.hero-short h1 { color: #FBF7F0; max-width: 1080px; margin: 0 auto; }
.hero-short h1 .accent {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 300;
}
.hero-short .lead {
font-size: clamp(18px, 2vw, 22px); color: rgba(251, 247, 240, 0.78);
max-width: 720px; margin: 28px auto 0; line-height: 1.5;
}
.timeline-frameblox { background: var(--bg); }
[data-theme="dark"] .timeline-frameblox { background: var(--bg); }
.timeline-frameblox .container { max-width: 1080px; }
.timeline-frameblox .eyebrow { color: var(--fg-muted); text-align: center; margin-bottom: 24px; }
.timeline-frameblox h2 { text-align: center; margin-bottom: 64px; }
.timeline-frameblox h2 .accent { color: var(--accent); font-weight: 400; }
.timeline-frameblox .steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.timeline-frameblox .step {
background: var(--bg-soft); border-radius: 24px;
padding: 40px 32px;
display: flex; flex-direction: column; gap: 16px;
}
.timeline-frameblox .step .num {
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--border);
padding-bottom: 12px; margin-bottom: 4px;
}
.timeline-frameblox .step h3 { font-weight: 400; line-height: 1.25; }
.timeline-frameblox .step p { color: var(--fg-muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 820px) {
.timeline-frameblox .steps { grid-template-columns: 1fr; }
}
.gradient-banner {
height: 360px;
background: var(--grad);
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.gradient-banner::before, .gradient-banner::after {
content: ""; position: absolute;
width: 600px; height: 600px; border-radius: 50%;
filter: blur(60px); opacity: 0.6;
}
.gradient-banner::before {
background: #ff3f8a; top: -200px; left: -150px;
animation: blob1 22s ease-in-out infinite;
}
.gradient-banner::after {
background: #4aa0ff; bottom: -200px; right: -150px;
animation: blob2 28s ease-in-out infinite;
}
.gradient-banner .quote-overlay {
position: relative; z-index: 2;
font-family: var(--font-serif); font-style: italic;
font-size: clamp(22px, 3vw, 36px);
color: #FBF7F0; max-width: 920px;
text-align: center; padding: 0 32px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
line-height: 1.3;
}
@keyframes blob1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes blob2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-60px, -40px) scale(1.2); }
}
.manifesto { background: var(--bg-soft); }
.manifesto .container { max-width: 1080px; }
.manifesto .eyebrow { color: var(--fg-muted); text-align: center; margin-bottom: 24px; }
.manifesto h2 { text-align: center; margin-bottom: 56px; }
.manifesto h2 .accent { font-weight: 400; }
.manifesto .grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.manifesto .anti-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 22px; padding: 32px;
position: relative;
}
.manifesto .anti-card::before {
content: "✗"; position: absolute; top: 28px; right: 28px;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255, 75, 75, 0.1); color: #ff4b4b;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
}
.manifesto .anti-card h3 { margin-bottom: 12px; font-weight: 400; padding-right: 56px; }
.manifesto .anti-card p { color: var(--fg-muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 820px) {
.manifesto .grid { grid-template-columns: 1fr; }
}
.citation { background: #1A1310; color: #FBF7F0; padding: var(--section-pad) 0; text-align: center; }
.citation .container { max-width: 920px; }
.citation blockquote {
font-family: var(--font-serif);
font-style: italic; font-weight: 400;
font-size: clamp(26px, 3.4vw, 38px);
color: #FBF7F0; line-height: 1.4;
letter-spacing: -0.005em;
margin-bottom: 36px;
}
.citation blockquote::before { content: "« "; color: var(--link); }
.citation blockquote::after { content: " »"; color: var(--link); }
.citation .signature {
font-family: var(--font-body);
font-size: 18px; color: rgba(251, 247, 240, 0.7); font-weight: 400;
}
.citation .signature strong { color: #FBF7F0; font-weight: 700; }
/* ============================================================================
PAGE — videos.html
============================================================================ */
.video-gallery { background: var(--bg-soft); }
.video-gallery .eyebrow { color: var(--fg-muted); text-align: center; margin-bottom: 24px; }
.video-gallery h2 { text-align: center; margin-bottom: 24px; }
.video-gallery .lead {
text-align: center; color: var(--fg-muted);
font-size: 19px; max-width: 720px; margin: 0 auto 48px; line-height: 1.5;
}
.video-gallery .filters {
display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
margin-bottom: 48px;
}
.filter-btn {
background: transparent; border: 1px solid var(--border); color: var(--fg);
padding: 12px 24px; border-radius: 999px; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: 15px;
min-height: 44px;
}
.filter-btn:hover { background: var(--surface); }
.filter-btn[aria-pressed="true"] {
background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.video-gallery .grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
.video-gallery .video-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); overflow: hidden;
transition: transform 250ms, border-color 250ms;
}
.video-gallery .video-card:hover {
transform: translateY(-3px); border-color: var(--accent);
}
.video-gallery .video-card video {
width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #1A1310;
display: block;
}
.video-gallery .video-card .body { padding: 18px 22px 22px; }
.video-gallery .video-card .cat {
font-size: 12px; color: var(--accent); font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
margin-bottom: 6px; display: block;
}
.video-gallery .video-card h3 {
font-size: 18px; font-weight: 700; line-height: 1.3;
margin-bottom: 6px; font-family: var(--font-body);
}
.video-gallery .video-card p {
font-size: 14px; color: var(--fg-muted); line-height: 1.45;
}
/* ============================================================================
PAGE — tarifs.html
============================================================================ */
.cycle-toggle-wrap {
display: flex; justify-content: center; margin-bottom: 48px;
}
.cycle-toggle {
display: inline-flex; gap: 4px;
background: var(--bg-soft); border: 1px solid var(--border);
border-radius: 999px; padding: 4px;
}
.cycle-toggle button {
padding: 12px 24px; border: 0; background: transparent;
font-family: var(--font-body); font-weight: 700; font-size: 16px;
color: var(--fg-muted); cursor: pointer; border-radius: 999px;
min-height: 44px;
}
.cycle-toggle button[aria-pressed="true"] {
background: var(--fg); color: var(--bg);
}
.compare-table { background: var(--bg-soft); }
.compare-table .container { max-width: 1080px; }
.compare-table h2 { text-align: center; margin-bottom: 48px; }
.compare-table .table-wrap {
overflow-x: auto;
border-radius: var(--radius-md); border: 1px solid var(--border);
}
.compare-table table {
width: 100%; border-collapse: collapse;
background: var(--surface);
font-family: var(--font-body);
}
.compare-table th, .compare-table td {
padding: 18px 24px; text-align: left;
border-bottom: 1px solid var(--border);
}
.compare-table th {
background: var(--bg-soft); font-weight: 700; font-size: 17px;
}
.compare-table th.featured { background: rgba(221, 74, 58, 0.08); color: var(--accent); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td.check { color: #30d158; font-weight: 700; font-size: 20px; }
.compare-table td.dash { color: var(--fg-subtle); }
.financement-banner {
background: var(--grad);
padding: 80px 0; text-align: center; color: #FBF7F0;
position: relative; overflow: hidden;
}
.financement-banner::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 60%);
pointer-events: none;
}
.financement-banner .container { position: relative; z-index: 1; max-width: 920px; }
.financement-banner h2 { color: #FBF7F0; margin-bottom: 18px; }
.financement-banner p {
color: rgba(255, 255, 255, 0.92); font-size: 19px; line-height: 1.55;
max-width: 720px; margin: 0 auto 28px;
}
.financement-banner .cta {
background: #1A1310; color: #FBF7F0; border: 0;
}
.financement-banner .cta:hover { opacity: 0.85; }
/* ============================================================================
PAGE — telechargement.html
============================================================================ */
.dl-stores {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 22px; max-width: 720px; margin: 48px auto 0;
}
.dl-stores .store {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 28px;
display: flex; flex-direction: column; gap: 16px;
text-align: center;
}
.dl-stores .store .badge {
font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--accent); font-weight: 700;
}
.dl-stores .store h3 { font-size: 22px; font-weight: 400; }
.dl-stores .store .qr {
width: 160px; height: 160px; margin: 12px auto;
background: #1A1310; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: #FBF7F0; font-size: 13px; font-family: var(--font-body); padding: 16px;
text-align: center;
}
.dl-stores .store .cta { align-self: stretch; justify-content: center; }
@media (max-width: 720px) {
.dl-stores { grid-template-columns: 1fr; }
}
.dl-features {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 22px; max-width: 1080px; margin: 0 auto;
}
.dl-features .feat {
background: var(--bg-soft); border-radius: 22px; padding: 32px;
text-align: center;
}
.dl-features .feat .ic {
font-size: 36px; margin-bottom: 16px; display: block;
}
.dl-features .feat h3 { font-weight: 400; margin-bottom: 8px; }
.dl-features .feat p { color: var(--fg-muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 820px) {
.dl-features { grid-template-columns: 1fr; }
}
.support-banner {
background: var(--grad);
padding: 80px 0; text-align: center; color: #FBF7F0;
position: relative; overflow: hidden;
}
.support-banner .container { max-width: 720px; position: relative; z-index: 1; }
.support-banner h2 { color: #FBF7F0; margin-bottom: 14px; }
.support-banner .phone {
font-family: var(--font-display);
font-size: clamp(34px, 5vw, 56px); font-weight: 200;
color: #FBF7F0; margin: 18px 0;
letter-spacing: -0.02em;
}
.support-banner .phone a { color: #FBF7F0; text-decoration: none; }
.support-banner p {
color: rgba(255, 255, 255, 0.92); font-size: 18px; line-height: 1.55;
}
/* ──────────────────────────────────────────────────────────────────
2026-05-10 — Refonte homepage v2 + Sonic Editorial
Ajouts : hero slogan/baseline, section "Le geste", témoignages
Direction esthétique : Fraunces variable + crème/encre/corail + grain
────────────────────────────────────────────────────────────────── */
/* ── Sections sombres : grain warm + glow corail discret ──────────── */
.journey, .price-shock, .faq-section, .cta-final {
position: relative;
background:
radial-gradient(ellipse at 80% 0%, rgba(221, 74, 58, 0.08), transparent 50%),
radial-gradient(ellipse at 20% 100%, rgba(244, 162, 97, 0.05), transparent 50%),
#1A1310 !important;
border-top: 1px solid rgba(251, 247, 240, 0.08) !important;
}
.journey::before, .price-shock::before, .faq-section::before, .cta-final::before {
content: "";
position: absolute; inset: 0;
background-image: var(--paper-grain);
background-size: 280px 280px;
opacity: 0.3;
mix-blend-mode: overlay;
pointer-events: none;
}
.journey > .container, .price-shock > .container,
.faq-section > .container, .cta-final > .container { position: relative; z-index: 1; }
/* ── Italiques éditoriales : .serif-accent applique Fraunces italic ─ */
h1 .accent, h2 .accent {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 400;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding-right: 0.04em;
}
h2 .serif-accent.accent {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Paragraphes lead : taille éditoriale + Fraunces italic discret ── */
.lead, p.lead {
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.55;
letter-spacing: -0.005em;
}
/* ── Animations éditoriales — slow fade-in respect prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
.hero h1 .slogan,
.hero h1 .seo-line,
.hero .baseline,
.hero .cta-row,
.hero .trust-row {
animation: editorial-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero h1 .slogan { animation-delay: 100ms; }
.hero h1 .seo-line { animation-delay: 280ms; }
.hero .baseline { animation-delay: 420ms; }
.hero .cta-row { animation-delay: 560ms; }
.hero .trust-row { animation-delay: 720ms; }
}
@keyframes editorial-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── CTA — refinement éditorial ──────────────────────────────────── */
.cta {
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 0.005em;
}
.cta.primary {
border-radius: 999px;
padding-left: 28px;
padding-right: 28px;
}
.cta.ghost {
border-radius: 999px;
border-width: 1.5px;
}
/* ── Hero — Sonic Editorial : Fraunces dominant, italique signature ─ */
.hero h1 .slogan {
display: block;
font-family: var(--font-display);
font-size: clamp(44px, 6.5vw, 92px);
font-weight: 350;
font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 380;
line-height: 0.98;
letter-spacing: -0.025em;
margin-bottom: 18px;
color: #FBF7F0;
}
.hero h1 .slogan .accent {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 360;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding-right: 0.05em;
}
.hero h1 .seo-line {
display: block;
font-family: var(--font-body);
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.35;
color: rgba(251, 247, 240, 0.88);
max-width: 760px;
margin: 0 auto;
}
.hero h1 .seo-line strong { font-weight: 700; color: #FBF7F0; }
.hero .baseline {
font-family: var(--font-serif);
font-style: italic;
font-variation-settings: "opsz" 18, "SOFT" 80, "wght" 400;
font-size: clamp(15px, 1.6vw, 19px);
color: rgba(251, 247, 240, 0.55);
margin: 18px auto 32px;
letter-spacing: 0.01em;
}
/* ── Section "Le geste" — Tape. Parle. Écoute. ─────────────────── */
.le-geste {
background: var(--bg-soft);
padding: var(--section-pad) 0;
text-align: center;
color: var(--fg);
}
.le-geste .eyebrow { color: var(--fg-muted); margin-bottom: 22px; }
.le-geste h2 {
margin: 0 auto 18px;
max-width: 1040px;
padding: 0 20px;
font-weight: 300;
}
.le-geste h2 .accent {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.le-geste .lead {
max-width: 780px;
margin: 0 auto 64px;
padding: 0 20px;
color: var(--fg-muted);
font-size: clamp(17px, 1.6vw, 21px);
line-height: 1.55;
}
.geste-main-video {
max-width: 880px;
width: 100%;
margin: 0 auto 60px;
padding: 0 20px;
aspect-ratio: 16 / 9;
position: relative;
}
.geste-main-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--radius-md);
background: transparent;
border: 1px solid var(--border);
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.42), 0 22px 44px -12px rgba(0, 0, 0, 0.28);
}
.geste-main-video .vc-bar {
z-index: 20;
}
.geste-main-video .video-play-btn {
z-index: 15;
}
.geste-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1080px;
margin: 0 auto 60px;
padding: 0 20px;
}
.geste-step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 30px 24px;
text-align: center;
transition: transform .25s ease, box-shadow .25s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.geste-step:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
}
.geste-step .geste-num {
font-family: var(--font-display);
font-weight: 200;
font-size: 56px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.03em;
margin-bottom: 14px;
}
.geste-step h3 {
font-weight: 700;
font-size: clamp(24px, 2.2vw, 30px);
margin-bottom: 10px;
color: var(--fg);
}
.geste-step .action {
font-size: 16px;
color: var(--fg);
margin-bottom: 6px;
font-weight: 700;
line-height: 1.4;
}
.geste-step .hint {
font-size: 14px;
color: var(--fg-muted);
font-style: italic;
line-height: 1.45;
}
.le-geste .privacy-banner {
max-width: 980px;
margin: 0 auto;
padding: 22px 28px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(221, 74, 58, 0.08), rgba(244, 162, 97, 0.04));
border: 1px solid var(--border);
display: flex;
gap: 18px;
align-items: center;
text-align: left;
}
[data-theme="dark"] .le-geste .privacy-banner {
background: linear-gradient(135deg, rgba(221, 74, 58, 0.12), rgba(244, 162, 97, 0.04));
}
.le-geste .privacy-banner .ico {
font-size: 28px;
flex-shrink: 0;
line-height: 1;
}
.le-geste .privacy-banner p {
font-size: 16px;
color: var(--fg);
margin: 0;
line-height: 1.55;
}
.le-geste .privacy-banner strong { font-weight: 700; }
/* ── Section témoignages ───────────────────────────────────────── */
.testimonials {
background: var(--bg-soft);
padding: var(--section-pad) 0;
color: var(--fg);
text-align: center;
position: relative;
}
.testimonials::before {
content: "";
position: absolute; inset: 0;
background-image: var(--paper-grain);
background-size: 280px 280px;
opacity: 0.5;
pointer-events: none;
mix-blend-mode: multiply;
}
[data-theme="dark"] .testimonials::before { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .testimonials::before { display: none; }
}
.testimonials > .container { position: relative; z-index: 1; }
.testimonials .eyebrow { color: var(--fg-muted); margin-bottom: 22px; }
.testimonials h2 {
margin: 0 auto 18px;
max-width: 1040px;
padding: 0 20px;
font-weight: 300;
}
.testimonials h2 .serif-accent {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
}
.testimonials .lead {
max-width: 760px;
margin: 0 auto 56px;
padding: 0 20px;
color: var(--fg-muted);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
}
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.testimonial {
background: var(--bg-soft);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 36px 30px;
text-align: left;
display: flex;
flex-direction: column;
gap: 22px;
}
[data-theme="dark"] .testimonial {
background: var(--surface);
}
.testimonial blockquote {
font-family: var(--font-serif);
font-style: italic;
font-variation-settings: "opsz" 36, "SOFT" 70, "wght" 400;
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.5;
color: var(--fg);
margin: 0;
quotes: none;
position: relative;
padding-top: 18px;
}
.testimonial blockquote::before {
content: "\201C";
position: absolute;
top: -28px;
left: -8px;
font-family: var(--font-serif);
font-style: italic;
font-size: 84px;
line-height: 1;
color: var(--accent);
font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
pointer-events: none;
}
.testimonial blockquote[lang="ar"] {
direction: rtl;
text-align: right;
font-family: var(--font-body);
font-style: normal;
font-variation-settings: normal;
}
.testimonial blockquote[lang="ar"]::before {
content: "\201D";
left: auto;
right: -8px;
}
.testimonial footer {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
}
.testimonial footer strong {
font-weight: 700;
font-size: 17px;
color: var(--fg);
}
.testimonial footer .meta {
font-size: 14px;
color: var(--fg-muted);
}
.testimonials-disclaimer {
margin: 48px auto 0;
max-width: 760px;
padding: 0 20px;
font-size: 14px;
color: var(--fg-muted);
font-style: italic;
line-height: 1.5;
}
/* ── Video carousel : lien "voir les autres" ──────────────────── */
.video-carousel .vc-more {
text-align: center;
margin: 40px auto 0;
font-size: 17px;
}
.video-carousel .vc-more a {
color: var(--link);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.01em;
padding: 10px 20px;
border: 1px solid var(--border);
border-radius: 999px;
display: inline-block;
transition: background .2s ease, border-color .2s ease;
}
.video-carousel .vc-more a:hover,
.video-carousel .vc-more a:focus-visible {
background: rgba(0, 0, 0, 0.04);
border-color: var(--link);
}
[data-theme="dark"] .video-carousel .vc-more a:hover,
[data-theme="dark"] .video-carousel .vc-more a:focus-visible {
background: rgba(255, 255, 255, 0.04);
}
/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 880px) {
.geste-steps {
grid-template-columns: 1fr;
gap: 22px;
}
.le-geste .privacy-banner {
flex-direction: column;
text-align: center;
gap: 12px;
}
.testimonial-grid {
grid-template-columns: 1fr;
}
}
/* ── Comparatif ─────────────────────────────────────────────────────────── */
.comparatif-table { background: var(--bg-soft); }
.comparatif-table .lead { margin-bottom: 48px; }
.comparatif-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
-webkit-overflow-scrolling: touch;
}
.comparatif-wrap table {
width: 100%;
min-width: 880px;
border-collapse: separate;
border-spacing: 0;
font-size: 15px;
}
.comparatif-wrap th,
.comparatif-wrap td {
padding: 16px 18px;
text-align: center;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.comparatif-wrap th[scope="row"] {
text-align: left;
font-weight: 500;
font-family: var(--font-body);
background: var(--bg-soft);
position: sticky;
left: 0;
z-index: 1;
border-right: 1px solid var(--border);
}
.comparatif-wrap thead th {
font-weight: 700;
padding-top: 22px;
padding-bottom: 22px;
background: var(--bg-soft);
border-bottom: 2px solid var(--border);
font-size: 14px;
}
.comparatif-wrap thead th.featured {
background: color-mix(in srgb, var(--accent) 12%, var(--bg));
color: var(--accent);
}
.comparatif-wrap td.featured {
background: color-mix(in srgb, var(--accent) 6%, var(--bg));
font-weight: 500;
}
.comparatif-wrap .check { color: #30d158; font-weight: 700; font-size: 20px; }
.comparatif-wrap .dash { color: var(--fg-subtle); font-size: 20px; }
.comparatif-wrap td small {
display: block;
color: var(--fg);
font-size: 13px;
margin-top: 2px;
font-style: italic;
opacity: 0.72;
}
.comparatif-disclaimer {
margin: 24px auto 0;
font-size: 13px;
color: var(--fg-muted);
text-align: center;
max-width: 760px;
}
/* Pourquoi nous */
.comparatif-why { padding: var(--section-pad) 0; background: var(--bg-soft); }
.comparatif-why .why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 48px;
}
.comparatif-why .why-card {
background: var(--bg);
padding: 36px 32px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
transition: transform 250ms, box-shadow 250ms;
}
.comparatif-why .why-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
}
.comparatif-why .why-card .ico { font-size: 32px; margin-bottom: 20px; }
.comparatif-why .why-card h3 { font-size: 22px; margin-bottom: 12px; }
.comparatif-why .why-card p { color: var(--fg-muted); font-size: 16px; line-height: 1.6; }
@media (max-width: 768px) {
.comparatif-why .why-grid { grid-template-columns: 1fr; gap: 16px; }
.comparatif-wrap th, .comparatif-wrap td { padding: 12px 14px; font-size: 14px; }
}
/* ── Hero platform line ────────────────────────────────────────────────── */
.hero .platform-line {
display: block;
font-size: 15px;
font-weight: 400;
color: var(--fg-muted);
margin-top: 12px;
letter-spacing: 0.01em;
font-family: var(--font-body);
}
.hero .platform-line strong { color: var(--fg); font-weight: 600; }
/* ════════════════════════════════════════════════════════════════════════
SYSTÈME v3 — charte canonique www.lumyeye.com (Apple-style)
════════════════════════════════════════════════════════════════════════ */
:root {
--v3-accent: #2997ff;
--v3-accent-green: #30d158;
--v3-grad: linear-gradient(135deg, #2997ff 0%, #30d158 100%);
--v3-grad-blue: linear-gradient(135deg, #2997ff 0%, #005bea 100%);
--v3-grad-blue-text: linear-gradient(135deg, #2997ff 0%, #64d2ff 100%);
--v3-surface-dark: #1d1d1f;
--v3-surface-dark-soft: #2d2d30;
--v3-surface-dark-card: #333336;
--v3-surface-light: #f5f5f7;
--v3-surface-white: #ffffff;
--v3-text-primary-light: #1d1d1f;
--v3-text-secondary-light: #6e6e73;
--v3-text-primary-dark: #f5f5f7;
--v3-text-secondary-dark: #a1a1a6;
--v3-border-light: rgba(0,0,0,0.08);
--v3-border-soft: rgba(255,255,255,0.08);
--v3-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.v3-section {
padding: 90px 20px;
font-family: var(--v3-font-stack);
}
.v3-section.--white { background: var(--v3-surface-white); color: var(--v3-text-primary-light); }
.v3-section.--light { background: var(--v3-surface-light); color: var(--v3-text-primary-light); }
.v3-section.--dark-soft { background: var(--v3-surface-dark-soft); color: var(--v3-text-primary-dark); }
.v3-section.--dark { background: var(--v3-surface-dark); color: var(--v3-text-primary-dark); }
.v3-inner { max-width: 1100px; margin: 0 auto; }
.v3-center { text-align: center; }
.v3-eyebrow {
display: inline-block;
font-size: 13px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--v3-accent);
margin: 0 0 20px;
font-family: var(--v3-font-stack);
}
.v3-h2 {
font-size: clamp(34px, 5.5vw, 56px);
font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
margin: 0 0 18px;
font-family: var(--v3-font-stack);
font-variation-settings: normal;
}
.v3-section.--dark .v3-h2, .v3-section.--dark-soft .v3-h2 { color: var(--v3-text-primary-dark); }
.v3-lead {
font-size: clamp(17px, 2vw, 20px);
line-height: 1.55;
max-width: 760px;
margin: 0 auto 56px;
font-family: var(--v3-font-stack);
}
.v3-section.--dark .v3-lead, .v3-section.--dark-soft .v3-lead { color: var(--v3-text-secondary-dark); }
.v3-section.--light .v3-lead, .v3-section.--white .v3-lead { color: var(--v3-text-secondary-light); }
.v3-grad-text {
background: var(--v3-grad);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.v3-btn-primary, .v3-btn-secondary {
display: inline-flex; align-items: center; justify-content: center;
padding: 15px 30px; border-radius: 999px;
font-weight: 600; font-size: 16px; text-decoration: none;
transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
font-family: var(--v3-font-stack);
border: 0; cursor: pointer;
line-height: 1;
}
.v3-btn-primary {
background: var(--v3-grad-blue);
color: #fff;
box-shadow: 0 10px 26px rgba(41,151,255,0.28);
}
.v3-btn-primary:hover { transform: translateY(-1px); text-decoration: none; }
.v3-btn-secondary.--on-dark { border: 1px solid rgba(255,255,255,0.25); color: #fff; background: transparent; }
.v3-btn-secondary.--on-dark:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
.v3-btn-secondary.--on-light { border: 1px solid rgba(0,0,0,0.18); color: var(--v3-text-primary-light); background: transparent; }
.v3-btn-secondary.--on-light:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
.v3-btn-primary:hover, .v3-btn-secondary:hover { transform: none; }
}
.v3-btn-primary:focus-visible, .v3-btn-secondary:focus-visible {
outline: 3px solid #2997ff;
outline-offset: 3px;
}
/* ── Pro / Classique duel (section "La gamme Lumyeye" sur HP) ──────────── */
.v3-poc-duel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 800px) {
.v3-poc-duel { grid-template-columns: 1fr; gap: 16px; }
}
.v3-poc-col {
background: var(--v3-surface-white);
border: 1px solid var(--v3-border-light);
border-radius: 24px;
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.v3-poc-col:hover {
transform: translateY(-3px);
box-shadow: 0 14px 38px rgba(0,0,0,0.08);
}
.v3-poc-col.--featured {
background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
border-color: rgba(41,151,255,0.35);
box-shadow: 0 10px 30px rgba(41,151,255,0.10);
}
.v3-poc-tag {
display: inline-block;
font-size: 12px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
color: var(--v3-text-secondary-light);
background: rgba(0,0,0,0.04);
padding: 6px 14px;
border-radius: 20px;
align-self: flex-start;
}
.v3-poc-tag.--featured {
color: #fff;
background: var(--v3-grad-blue);
}
.v3-poc-platform {
font-size: 14px;
color: var(--v3-text-secondary-light);
margin: 0;
font-weight: 500;
}
.v3-poc-pitch {
font-size: 19px;
font-weight: 600;
color: var(--v3-text-primary-light);
margin: 0;
line-height: 1.35;
}
.v3-poc-list {
list-style: none;
padding: 0;
margin: 6px 0 16px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.v3-poc-list li {
position: relative;
padding-left: 24px;
font-size: 15px;
color: var(--v3-text-primary-light);
line-height: 1.45;
}
.v3-poc-list li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 14px; height: 14px;
background: var(--v3-grad);
border-radius: 50%;
opacity: 0.9;
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
}
.v3-poc-col .v3-btn-primary,
.v3-poc-col .v3-btn-secondary {
align-self: stretch;
}
.v3-poc-compare-link {
color: var(--v3-accent);
font-size: 16px;
font-weight: 600;
text-decoration: none;
font-family: var(--v3-font-stack);
}
.v3-poc-compare-link:hover { text-decoration: underline; }
/* ── Android banner — charte v3 prod ──────────────────────────────────── */
.android-banner {
background: var(--v3-surface-dark);
color: var(--v3-text-primary-dark);
padding: 10px 0;
font-size: 14px;
border-bottom: 1px solid var(--v3-border-soft);
font-family: var(--v3-font-stack);
}
.android-banner p {
margin: 0;
text-align: center;
max-width: 1100px;
padding: 0 20px;
margin-left: auto;
margin-right: auto;
}
.android-banner strong {
background: var(--v3-grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.android-banner a {
color: var(--v3-accent);
text-decoration: none;
margin-left: 10px;
font-weight: 600;
}
.android-banner a:hover { text-decoration: underline; }
.android-banner .ab-emoji { display: none; }
@media (max-width: 600px) {
.android-banner { font-size: 13px; padding: 12px 0; }
.android-banner a { display: inline-block; margin-top: 4px; margin-left: 0; }
}
/* ── Badge édition Pro sur cartes vidéo — charte v3 prod ──────────────── */
.video-card { position: relative; }
.video-card .edition-badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--v3-grad-blue);
color: #fff;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
z-index: 3;
box-shadow: 0 4px 14px rgba(41,151,255,0.35);
font-family: var(--v3-font-stack);
}
/* Seconde ligne de filtres (édition) */
.filters-edition {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
/* ── Play button overlay sur vidéos (toutes pages) ────────────────────── */
.video-play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05);
transition: transform 0.2s ease, background 0.2s ease;
pointer-events: auto;
padding: 0;
}
.video-play-btn:hover {
transform: translate(-50%, -50%) scale(1.06);
background: #fff;
}
.video-play-btn:focus-visible {
outline: 3px solid var(--v3-accent);
outline-offset: 4px;
}
.video-play-btn svg {
width: 26px; height: 26px;
fill: #1d1d1f;
margin-left: 3px;
}
.video-play-btn.is-hidden { display: none; }
/* Au survol/play en cours, le bouton devient stop (plus discret mais visible) */
.video-card.is-playing .video-play-btn,
.geste-main-video.is-playing .video-play-btn,
.vc-stage.is-playing .video-play-btn {
background: rgba(255,255,255,0.85);
opacity: 0.55;
}
.video-card.is-playing .video-play-btn:hover,
.geste-main-video.is-playing .video-play-btn:hover,
.vc-stage.is-playing .video-play-btn:hover {
opacity: 1;
background: #fff;
}
.video-play-btn.is-stop svg rect { fill: #FF3B30; }
@media (max-width: 600px) {
.video-play-btn { width: 56px; height: 56px; }
.video-play-btn svg { width: 22px; height: 22px; }
}
/* ════════════════════════════════════════════════════════════════════════
PAGE COMPARATIF — table + feature cards + FAQ en charte v3 prod
════════════════════════════════════════════════════════════════════════ */
/* ── Hero comparatif (section dark) ───────────────────────────────────── */
.v3-comparatif-hero {
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(41,151,255,0.22) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 80%, rgba(48,209,88,0.12) 0%, transparent 60%),
var(--v3-surface-dark);
padding: 110px 20px 80px;
text-align: center;
font-family: var(--v3-font-stack);
}
.v3-comparatif-hero h1 {
font-size: clamp(40px, 7vw, 64px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 22px;
color: var(--v3-text-primary-dark);
font-family: var(--v3-font-stack);
font-variation-settings: normal;
}
.v3-comparatif-hero .v3-eyebrow { color: var(--v3-accent); }
.v3-comparatif-hero p.v3-lead { color: var(--v3-text-secondary-dark); margin-bottom: 0; }
/* ── Table comparatif v3 ──────────────────────────────────────────────── */
.v3-cmp-wrap {
max-width: 1200px;
margin: 0 auto;
background: var(--v3-surface-white);
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0,0,0,0.06);
border: 1px solid var(--v3-border-light);
overflow: hidden;
}
.v3-cmp-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.v3-cmp-table {
width: 100%;
min-width: 880px;
border-collapse: separate;
border-spacing: 0;
font-family: var(--v3-font-stack);
font-size: 15px;
color: var(--v3-text-primary-light);
}
.v3-cmp-table th,
.v3-cmp-table td {
padding: 18px 18px;
text-align: center;
border-bottom: 1px solid var(--v3-border-light);
vertical-align: middle;
background: var(--v3-surface-white);
}
.v3-cmp-table tbody tr:last-child th,
.v3-cmp-table tbody tr:last-child td { border-bottom: 0; }
.v3-cmp-table thead th {
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
text-transform: uppercase;
padding-top: 22px; padding-bottom: 22px;
color: var(--v3-text-secondary-light);
background: var(--v3-surface-light);
border-bottom: 2px solid var(--v3-border-light);
}
.v3-cmp-table thead th.featured {
background: var(--v3-grad-blue);
color: #fff;
letter-spacing: 0.4px;
}
.v3-cmp-table th[scope="row"] {
text-align: left;
font-weight: 600;
color: var(--v3-text-primary-light);
background: var(--v3-surface-light);
position: sticky;
left: 0;
z-index: 1;
border-right: 1px solid var(--v3-border-light);
font-size: 14px;
}
.v3-cmp-table td.featured {
background: rgba(41,151,255,0.04);
font-weight: 600;
color: var(--v3-text-primary-light);
}
.v3-cmp-table .check {
display: inline-block;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--v3-grad);
color: #fff;
font-weight: 700;
font-size: 14px;
line-height: 26px;
text-align: center;
vertical-align: middle;
}
.v3-cmp-table .dash {
color: #c7c7cc;
font-size: 22px;
font-weight: 300;
}
.v3-cmp-table td small {
display: block;
font-size: 11px;
font-style: italic;
color: var(--v3-text-secondary-light);
margin-top: 4px;
opacity: 0.85;
}
.v3-cmp-disclaimer {
max-width: 760px;
margin: 28px auto 0;
text-align: center;
font-size: 13px;
color: var(--v3-text-secondary-light);
font-family: var(--v3-font-stack);
}
.v3-cmp-disclaimer a { color: var(--v3-accent); text-decoration: underline; }
/* ── Feature grid "Pourquoi nous" ─────────────────────────────────────── */
.v3-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 900px) {
.v3-why-grid { grid-template-columns: 1fr; gap: 16px; }
}
.v3-why-card {
background: var(--v3-surface-white);
border: 1px solid var(--v3-border-light);
border-radius: 20px;
padding: 32px 28px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.v3-why-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 38px rgba(0,0,0,0.08);
}
.v3-why-card .v3-faq-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
border-radius: 14px;
margin-bottom: 18px;
color: #fff;
}
.v3-why-card .v3-faq-ico svg { width: 22px; height: 22px; fill: currentColor; }
.v3-why-card h3 {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 12px;
color: var(--v3-text-primary-light);
font-family: var(--v3-font-stack);
font-variation-settings: normal;
}
.v3-why-card p {
font-size: 15px;
line-height: 1.6;
color: var(--v3-text-secondary-light);
margin: 0;
font-family: var(--v3-font-stack);
}
/* ── FAQ v3 ───────────────────────────────────────────────────────────── */
.v3-faq-list {
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.v3-faq-item {
background: var(--v3-surface-white);
border: 1px solid var(--v3-border-light);
border-radius: 18px;
padding: 4px 28px;
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
overflow: hidden;
font-family: var(--v3-font-stack);
}
.v3-faq-item:hover {
border-color: rgba(41,151,255,0.4);
transform: translateY(-1px);
}
.v3-faq-item[open] {
border-color: var(--v3-accent);
box-shadow: 0 1px 2px rgba(41,151,255,0.08), 0 10px 32px rgba(41,151,255,0.12);
}
.v3-faq-item summary {
padding: 22px 0;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 16px;
font-size: 17px;
font-weight: 600;
color: var(--v3-text-primary-light);
line-height: 1.35;
letter-spacing: -0.005em;
}
.v3-faq-item summary::-webkit-details-marker { display: none; }
.v3-faq-item summary::marker { display: none; }
.v3-faq-item summary:focus-visible {
outline: 3px solid var(--v3-accent);
outline-offset: 4px;
border-radius: 8px;
}
.v3-faq-item summary .v3-faq-title { flex: 1; }
.v3-faq-item summary .v3-faq-plus {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(0,0,0,0.05);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 0;
color: var(--v3-text-secondary-light);
font-weight: 400;
transition: transform 250ms ease, background 250ms ease, color 250ms ease;
}
.v3-faq-item[open] summary .v3-faq-plus {
transform: rotate(45deg);
background: var(--v3-accent);
color: #fff;
}
.v3-faq-item .v3-faq-ans {
padding: 0 0 24px;
font-size: 16px;
line-height: 1.6;
color: var(--v3-text-secondary-light);
}
.v3-faq-item .v3-faq-ans a { color: var(--v3-accent); }
/* Variantes icônes Apple */
.v3-faq-ico.--blue { background: linear-gradient(135deg, #007AFF, #5AC8FA); box-shadow: 0 2px 6px rgba(0,122,255,0.22); }
.v3-faq-ico.--orange { background: linear-gradient(135deg, #FF9500, #FFCC00); box-shadow: 0 2px 6px rgba(255,149,0,0.22); }
.v3-faq-ico.--green { background: linear-gradient(135deg, #34C759, #30D158); box-shadow: 0 2px 6px rgba(52,199,89,0.22); }
.v3-faq-ico.--purple { background: linear-gradient(135deg, #AF52DE, #BF5AF2); box-shadow: 0 2px 6px rgba(175,82,222,0.22); }
.v3-faq-ico.--teal { background: linear-gradient(135deg, #30B0C7, #32ADE6); box-shadow: 0 2px 6px rgba(48,176,199,0.22); }
/* ── CTA final v3 ─────────────────────────────────────────────────────── */
.v3-cta-final {
text-align: center;
padding: 100px 20px;
background: var(--v3-surface-dark);
color: var(--v3-text-primary-dark);
font-family: var(--v3-font-stack);
}
.v3-cta-final h2 {
font-size: clamp(34px, 5vw, 52px);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 16px;
color: var(--v3-text-primary-dark);
font-family: var(--v3-font-stack);
font-variation-settings: normal;
}
.v3-cta-final p {
font-size: 18px;
color: var(--v3-text-secondary-dark);
max-width: 600px;
margin: 0 auto 36px;
}
.v3-cta-final .cta-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ════════════════════════════════════════════════════════════════════════
FOOTER prod — lumy-footer-modern (copié depuis www.lumyeye.com)
════════════════════════════════════════════════════════════════════════ */
.lumy-footer-modern {
background-color: #0a0a0a;
color: #cecece;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
position: relative;
padding-bottom: 115px;
}
.footer-gradient-line {
height: 3px;
width: 100%;
background: linear-gradient(90deg, #2997FF 0%, #30D158 50%, #2997FF 100%);
}
.footer-content {
max-width: 1100px;
margin: 0 auto;
padding: 60px 20px 20px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.brand-col {
padding-right: 20px;
}
.footer-logo {
height: 28px;
width: auto;
display: block;
margin-bottom: 15px;
filter: invert(1) brightness(1.15); /* SVG encre → crème sur footer noir */
}
.footer-tagline {
font-size: 14px;
color: #86868B;
line-height: 1.4;
}
.footer-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #2997FF;
display: block;
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
margin-bottom: 12px;
}
.footer-list a {
color: #D1D1D6;
text-decoration: none;
font-size: 14px;
transition: all 0.2s ease;
}
.footer-list a:hover {
color: #2997FF;
padding-left: 5px;
}
.social-icons-container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: #1C1C1E;
border-radius: 50%;
color: #FFFFFF;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon svg {
width: 18px;
height: 18px;
fill: currentColor;
stroke: currentColor;
}
.social-icon:hover {
transform: translateY(-3px);
border-color: transparent;
}
.social-icon.fb:hover {
background-color: #1877F2;
}
.social-icon.insta:hover {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-icon.yt:hover {
background-color: #FF0000;
}
.social-icon.tt:hover {
background-color: #000000;
border-color: #25F4EE;
color: #FE2C55;
}
.social-icon.in:hover {
background-color: #0A66C2;
}
.footer-bottom {
border-top: 1px solid #222;
padding-top: 25px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
font-size: 12px;
color: #666;
flex-wrap: wrap;
}
.footer-bottom .made-with {
margin-right: auto;
}
.made-with {
color: #444;
}
.footer-stats {
display: flex;
gap: 24px;
align-items: flex-start;
flex-shrink: 0;
}
.footer-stats-item {
text-align: center;
}
.footer-stats-val {
font-size: 20px;
font-weight: 700;
background: linear-gradient(135deg, #2997FF, #64D2FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 2px;
}
.footer-stats-label {
font-size: 11px;
color: #86868B;
margin: 0;
}
.footer-stats-src {
font-size: 10px;
color: #555;
margin: 4px 0 0;
}
.footer-stats-src a {
color: #2997FF;
}
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.brand-col {
grid-column: span 2;
text-align: center;
padding-right: 0;
}
.footer-logo {
margin: 0 auto 15px auto;
}
}
@media (max-width: 768px) {
.footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-stats {
justify-content: center;
}
}
@media (max-width: 500px) {
.footer-grid {
display: flex;
flex-direction: column;
gap: 30px;
}
.social-icons-container {
justify-content: flex-start;
}
.footer-title {
border-left: 3px solid #2997FF;
padding-left: 10px;
}
}
/* ════════════════════════════════════════════════════════════════════════
Footer refondu 2026 — surcharge espacement
════════════════════════════════════════════════════════════════════════ */
.footer-brand-top {
max-width: 920px;
margin: 0 auto 64px;
text-align: center;
}
.footer-brand-top .footer-logo-link {
display: inline-block;
margin-bottom: 18px;
}
.footer-brand-top .footer-logo {
height: 36px;
width: auto;
filter: none;
margin: 0;
}
.footer-brand-top .footer-tagline {
font-size: 14px;
color: #9a9aa0;
line-height: 1.55;
max-width: 760px;
margin: 0 auto;
}
.footer-bottom {
border-top: 1px solid #1f1f22;
padding-top: 28px;
margin-top: 32px;
display: block;
text-align: center;
}
.footer-bottom .footer-stats {
display: flex;
justify-content: center;
gap: 56px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.footer-bottom .footer-stat {
text-align: center;
}
.footer-bottom .footer-stats-val {
font-size: 22px;
font-weight: 700;
background: linear-gradient(135deg, #2997FF, #64D2FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 2px;
line-height: 1.1;
}
.footer-bottom .footer-stats-lbl {
font-size: 11px;
color: #86868B;
margin: 0;
}
.footer-bottom .footer-sources {
font-size: 10px;
color: #555;
margin: 4px 0 16px;
}
.footer-bottom .footer-sources a {
color: #2997FF;
}
.footer-bottom .footer-sep {
border: 0;
height: 1px;
background: #1f1f22;
max-width: 600px;
margin: 16px auto;
}
.footer-bottom .footer-trust {
color: #D1D1D6;
font-size: 13px;
font-weight: 600;
margin: 0 0 6px;
letter-spacing: 0.3px;
}
.footer-bottom .footer-copy {
color: #666;
font-size: 12px;
margin: 4px 0;
}
.footer-bottom .footer-marques {
color: #444;
font-size: 11px;
line-height: 1.5;
max-width: 700px;
margin: 6px auto 0;
}
@media (max-width: 900px) {
.footer-brand-top {
margin-bottom: 48px;
}
.footer-bottom .footer-stats {
gap: 32px;
}
}
/* ════════════════════════════════════════════════════════════════════════
Override journey section — alignement charte v3 prod (Apple-style)
Les règles ci-dessous surchargent les anciennes règles .journey
éditoriales (marron/corail) en variables v3 (noir/bleu Apple).
════════════════════════════════════════════════════════════════════════ */
.v3-section.journey {
background: var(--v3-surface-dark-soft);
color: var(--v3-text-primary-dark);
font-family: var(--v3-font-stack);
}
.v3-section.journey .v3-h2 { color: var(--v3-text-primary-dark); }
.v3-section.journey .v3-lead, .v3-section.journey .sub { color: var(--v3-text-secondary-dark); }
.v3-section.journey [role="tablist"] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
max-width: 1100px;
margin: 0 auto 52px;
}
.v3-section.journey button[role="tab"] {
background: var(--v3-surface-dark-card);
border: 1px solid var(--v3-border-soft);
border-radius: 18px;
padding: 22px 14px;
text-align: center;
cursor: pointer;
color: var(--v3-text-primary-dark);
font-family: var(--v3-font-stack);
transition: transform .2s, border-color .2s, background .2s;
}
.v3-section.journey button[role="tab"]:hover,
.v3-section.journey button[role="tab"]:focus-visible {
transform: translateY(-2px);
border-color: rgba(41,151,255,0.5);
}
.v3-section.journey button[role="tab"][aria-selected="true"] {
border-color: var(--v3-accent);
background: rgba(41,151,255,0.10);
box-shadow: 0 10px 30px rgba(41,151,255,0.18);
}
.v3-section.journey button[role="tab"] .label {
color: var(--v3-accent);
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
font-weight: 700;
display: block;
font-family: var(--v3-font-stack);
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial;
}
.v3-section.journey button[role="tab"] .name {
color: var(--v3-text-primary-dark);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.005em;
display: block;
font-family: var(--v3-font-stack);
}
.v3-section.journey .panels {
max-width: 1100px;
margin: 0 auto;
min-height: 280px;
}
.v3-section.journey [role="tabpanel"] {
display: none;
background: var(--v3-surface-dark-card);
border: 1px solid var(--v3-border-soft);
border-radius: 22px;
padding: 40px;
text-align: left;
}
.v3-section.journey [role="tabpanel"][data-active="true"] {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 40px;
}
.v3-section.journey [role="tabpanel"] .lead-panel h3 {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--v3-text-primary-dark);
margin: 0 0 16px;
letter-spacing: -0.015em;
line-height: 1.2;
font-family: var(--v3-font-stack);
}
.v3-section.journey [role="tabpanel"] .lead-panel h3 .accent,
.v3-section.journey [role="tabpanel"] .lead-panel h3 .v3-grad-text {
background: var(--v3-grad);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.v3-section.journey [role="tabpanel"] .lead-panel p {
color: var(--v3-text-secondary-dark);
font-size: 17px;
line-height: 1.55;
font-family: var(--v3-font-stack);
}
.v3-section.journey [role="tabpanel"] .actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.v3-section.journey [role="tabpanel"] .action {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 20px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--v3-border-soft);
border-radius: 16px;
transition: border-color 0.2s, background 0.2s;
text-decoration: none;
color: inherit;
}
.v3-section.journey [role="tabpanel"] a.action:hover {
border-color: rgba(41,151,255,0.5);
background: rgba(41,151,255,0.06);
}
.v3-section.journey [role="tabpanel"] .action .ico-action {
width: 40px; height: 40px;
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--v3-grad-blue);
border-radius: 11px;
font-size: 20px;
}
.v3-section.journey [role="tabpanel"] .action strong {
color: var(--v3-text-primary-dark);
font-size: 16px;
font-weight: 700;
display: block;
margin-bottom: 4px;
font-family: var(--v3-font-stack);
}
.v3-section.journey [role="tabpanel"] .action .d {
color: var(--v3-text-secondary-dark);
font-size: 14px;
line-height: 1.5;
font-family: var(--v3-font-stack);
}
.v3-section.journey [role="tabpanel"] .action .arrow {
margin-left: auto;
color: var(--v3-accent);
font-size: 18px;
align-self: center;
flex-shrink: 0;
}
@media (max-width: 980px) {
.v3-section.journey [role="tablist"] { grid-template-columns: repeat(3, 1fr); }
.v3-section.journey [role="tabpanel"] { padding: 28px; }
.v3-section.journey [role="tabpanel"][data-active="true"] {
grid-template-columns: 1fr; gap: 24px;
}
}
/* ════════════════════════════════════════════════════════════════════════
HEADER prod — lumy-header-nav (copié strict depuis www.lumyeye.com)
Remplace l'ancien .site-header. Couleurs noir/blanc Apple-style, sticky.
════════════════════════════════════════════════════════════════════════ */
.lumy-header-nav {
background-color: #000000;
height: 80px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 0 30px;
position: sticky;
top: 0;
z-index: 9999;
border-bottom: 1px solid rgba(255,255,255,0.1);
box-sizing: border-box;
}
.lumy-logo-link {
display: flex;
align-items: center;
z-index: 10001;
flex-shrink: 0;
}
.lumy-logo-img {
height: 26px;
width: auto;
object-fit: contain;
}
[data-theme="dark"] .lumy-logo-img {
filter: invert(1) brightness(1.15);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lumy-logo-img {
filter: invert(1) brightness(1.15);
}
}
.lumy-nav-right {
display: flex;
align-items: center;
gap: 20px;
z-index: 10001;
margin-left: auto;
}
.lumy-lang-container {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
}
.lumy-current-lang {
display: flex;
align-items: center;
gap: 4px;
font-size: 30px;
color: #ffffff;
}
.lumy-chevron {
width: 10px;
height: 10px;
fill: #ffffff;
transition: transform 0.2s;
}
.lumy-lang-dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #1C1C1E;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 6px;
padding: 5px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
z-index: 10002;
}
.lumy-lang-container:hover .lumy-lang-dropdown,
.lumy-lang-container.open .lumy-lang-dropdown {
display: block;
}
.lumy-lang-option {
font-size: 20px;
padding: 8px 12px;
display: block;
color: #fff;
text-decoration: none;
min-height: 44px;
box-sizing: border-box;
}
.lumy-nav-center {
display: flex;
gap: 25px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.lumy-nav-item {
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s ease;
white-space: nowrap;
}
.lumy-nav-item:hover,
.lumy-nav-item.active-link {
color: #2997FF;
}
.lumy-nav-item[aria-current="page"] {
color: #2997FF !important;
font-weight: 600;
}
.burger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
z-index: 10001;
padding: 10px;
}
.burger-line {
width: 25px;
height: 2px;
background-color: white;
transition: all 0.3s ease;
border-radius: 2px;
}
/* CTA group + language badge */
.header-cta-group {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: 8px;
}
.lumy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 999px;
font-family: var(--v3-font-stack);
font-weight: 600;
font-size: 13px;
text-decoration: none;
border: 1px solid transparent;
transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.lumy-btn.dl-btn {
border-color: rgba(255,255,255,0.25);
color: #fff;
background: transparent;
}
.lumy-btn.dl-btn:hover {
background: rgba(255,255,255,0.08);
transform: translateY(-1px);
}
.lumy-btn.buy-btn {
background: var(--v3-grad-blue);
color: #fff;
box-shadow: 0 4px 14px rgba(41,151,255,0.32);
}
.lumy-btn.buy-btn:hover {
transform: translateY(-1px);
}
.v3-badge-soon {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
background: linear-gradient(135deg, #FF375F 0%, #FF9F0A 100%);
color: #fff;
line-height: 1.2;
}
/* Responsive — tablette : on cache la nav-center inline (burger prend le relai) */
@media (max-width: 1100px) {
.lumy-nav-center { display: none; }
.header-cta-group .dl-btn { display: none; }
}
/* Mobile — copié strict depuis prod */
@media (max-width: 950px) {
.lumy-header-nav {
padding: 0 12px;
overflow: visible;
gap: 8px;
box-sizing: border-box;
}
.lumy-logo-link {
order: 1;
flex-shrink: 0;
margin-right: auto;
}
.lumy-nav-right {
order: 1;
flex-grow: 1;
justify-content: flex-end;
display: flex;
align-items: center;
gap: 10px;
margin-left: 0;
margin-right: 0;
}
.lumy-lang-container {
flex-shrink: 0;
}
.lumy-current-lang {
font-size: 28px;
}
.burger-btn {
display: flex;
order: 3;
padding: 10px;
flex-shrink: 0;
margin-left: 6px;
}
.lumy-nav-center {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.95);
backdrop-filter: blur(10px);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
margin: 0;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), visibility 0.4s;
visibility: hidden;
z-index: 10000;
}
.lumy-nav-center.open {
transform: translateX(0);
visibility: visible;
}
.lumy-nav-item {
font-size: 24px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.lumy-nav-center.open .lumy-nav-item {
opacity: 1;
transform: translateY(0);
}
.burger-btn.open .burger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger-btn.open .burger-line:nth-child(2) {
opacity: 0;
}
.burger-btn.open .burger-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.header-cta-group {
gap: 6px;
order: 2;
margin-left: 0;
}
.lumy-btn {
padding: 8px 12px;
font-size: 13px;
border-radius: 16px;
}
}
/* ════════════════════════════════════════════════════════════════════════
Patches responsive mobile (issues audit visuel)
════════════════════════════════════════════════════════════════════════ */
/* P1 - Touch targets ≥ 44px Apple HIG */
@media (max-width: 600px) {
.lumy-btn {
min-height: 44px;
padding: 10px 18px;
display: inline-flex;
align-items: center;
}
.vc-prev, .vc-next {
width: 44px !important;
height: 44px !important;
}
.vc-toggle {
width: 52px !important;
height: 52px !important;
}
}
/* P2 - Journey tabs : 2 colonnes max sur mobile */
@media (max-width: 600px) {
.journey [role="tablist"] {
grid-template-columns: repeat(2, 1fr);
}
}
/* P3 - Footer : étape 4 cols entre 600-900px */
@media (max-width: 900px) and (min-width: 601px) {
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* P4 - Pricing HP : 2 cols entre 600-880px */
@media (max-width: 880px) and (min-width: 601px) {
.pricing-grid, [aria-labelledby="pricing-title"] > .v3-inner > div:last-child {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* P5 - Word break sécurité (URL, mots longs) */
.v3-inner p, .v3-faq-ans p, main article p {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* P6 - tarifs.html plans : 1 col sur mobile */
@media (max-width: 700px) {
.tarifs-plans {
grid-template-columns: 1fr !important;
}
}
/* P7 - geste-steps : 2 cols entre 600-880px puis 1 col */
@media (max-width: 880px) and (min-width: 601px) {
.geste-steps {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
Video lightbox (page video_demo.html) — bouton agrandir + overlay modal
════════════════════════════════════════════════════════════════════════ */
.video-expand-btn {
position: absolute;
bottom: 8px;
right: 8px;
width: 40px;
height: 40px;
border: none;
border-radius: 10px;
background: rgba(0, 0, 0, 0.7);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transition: background 0.2s ease, transform 0.15s ease;
opacity: 0;
pointer-events: none;
}
.video-card:hover .video-expand-btn,
.video-card:focus-within .video-expand-btn,
.video-expand-btn:focus-visible {
opacity: 1;
pointer-events: auto;
}
.video-expand-btn:hover {
background: rgba(0, 0, 0, 0.92);
transform: scale(1.05);
}
.video-expand-btn:focus-visible {
outline: 3px solid var(--v3-accent);
outline-offset: 2px;
}
.video-expand-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
}
@media (max-width: 700px) {
/* Mobile : bouton toujours visible (pas de hover) */
.video-expand-btn { opacity: 1; pointer-events: auto; width: 44px; height: 44px; }
}
/* Lightbox overlay */
.lumy-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.94);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: lumy-lightbox-in 0.25s ease-out;
}
@keyframes lumy-lightbox-in {
from { opacity: 0; }
to { opacity: 1; }
}
.lumy-lightbox-frame {
position: relative;
max-width: 90vw;
max-height: 88vh;
width: auto;
height: auto;
background: #000;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lumy-lightbox-frame video {
display: block;
max-width: 90vw;
max-height: 88vh;
width: auto;
height: auto;
background: #000;
}
.lumy-lightbox-close {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #1d1d1f;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: transform 0.15s ease, background 0.15s ease;
}
.lumy-lightbox-close:hover {
transform: scale(1.05);
background: #fff;
}
.lumy-lightbox-close:focus-visible {
outline: 3px solid var(--v3-accent);
outline-offset: 3px;
}
.lumy-lightbox-close svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.lumy-lightbox-caption {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
text-align: center;
color: #fff;
font-family: var(--v3-font-stack);
font-size: 14px;
pointer-events: none;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
body.lumy-lightbox-open {
overflow: hidden;
}