24dbc7cd6a
API réception alertes chute (SmartEye/YOLO), analyse IA (Gemini 2.5 Flash), gestion alertes avec escalade (watchdog), notifications Firebase, dashboard web, documentation MkDocs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1404 lines
62 KiB
HTML
1404 lines
62 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LUCAS — Vivre chez soi. Librement.</title>
|
|
<meta name="description" content="LUCAS permet à vos proches âgés de vivre chez eux en toute liberté grâce à une IA bienveillante. Détection intelligente, dignité préservée, sérénité retrouvée.">
|
|
<meta name="theme-color" content="#FDFCFA">
|
|
<meta property="og:title" content="LUCAS — Vivre chez soi. Librement.">
|
|
<meta property="og:description" content="La protection intelligente qui respecte la dignité. Vos parents vivent librement, vous dormez tranquille.">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* ==========================================================================
|
|
LUCAS V3 — DESIGN SYSTEM
|
|
Direction Artistique : Lumineux, Chaleureux, Vivant
|
|
Philosophie : On vend la VIE, la LIBERTÉ, la SÉRÉNITÉ
|
|
Palette : Blancs chauds + Cuivre/Ambre + Sauge + Touches corail
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--bg-warm: #FDFCFA;
|
|
--bg-cream: #F7F3EE;
|
|
--bg-sand: #F0EBE3;
|
|
--bg-white: #FFFFFF;
|
|
--bg-soft: #FAF8F5;
|
|
|
|
--text-dark: #2A2520;
|
|
--text-body: #5C5650;
|
|
--text-muted: #9A928A;
|
|
--text-light: #B8B0A8;
|
|
|
|
--copper: #C2854A;
|
|
--copper-light: #D4A06A;
|
|
--copper-vivid: #E0923A;
|
|
--copper-dim: rgba(194, 133, 74, 0.08);
|
|
--copper-soft: rgba(194, 133, 74, 0.12);
|
|
|
|
--sage: #5B8C6F;
|
|
--sage-light: #7AAE8E;
|
|
--sage-dim: rgba(91, 140, 111, 0.08);
|
|
--sage-soft: rgba(91, 140, 111, 0.12);
|
|
|
|
--coral: #E07B6A;
|
|
--coral-dim: rgba(224, 123, 106, 0.08);
|
|
|
|
--sky: #6BA3C7;
|
|
--sky-dim: rgba(107, 163, 199, 0.08);
|
|
|
|
--violet-soft: #9B8ABF;
|
|
|
|
--shadow-xs: 0 1px 3px rgba(42,37,32,0.04);
|
|
--shadow-sm: 0 2px 8px rgba(42,37,32,0.06);
|
|
--shadow-md: 0 8px 30px rgba(42,37,32,0.08);
|
|
--shadow-lg: 0 20px 60px rgba(42,37,32,0.10);
|
|
--shadow-card: 0 2px 12px rgba(42,37,32,0.05);
|
|
|
|
--r-sm: 8px;
|
|
--r-md: 14px;
|
|
--r-lg: 20px;
|
|
--r-xl: 28px;
|
|
--r-full: 100px;
|
|
|
|
--sans: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--serif: 'Merriweather', 'Georgia', serif;
|
|
}
|
|
|
|
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
|
html { scroll-behavior:smooth; font-size:16px; }
|
|
|
|
body {
|
|
font-family: var(--sans);
|
|
background: var(--bg-warm);
|
|
color: var(--text-body);
|
|
overflow-x: hidden;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
::selection { background: rgba(194,133,74,0.15); color: var(--text-dark); }
|
|
img { max-width:100%; display:block; }
|
|
a { color:inherit; text-decoration:none; }
|
|
|
|
/* ==========================================================================
|
|
ANIMATIONS
|
|
========================================================================== */
|
|
|
|
@keyframes fadeUp { from { opacity:0; transform:translateY(36px) } to { opacity:1; transform:translateY(0) } }
|
|
@keyframes fadeDown { from { opacity:0; transform:translateY(-24px) } to { opacity:1; transform:translateY(0) } }
|
|
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
|
|
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-10px) } }
|
|
@keyframes breathe { 0%,100% { opacity:.4 } 50% { opacity:.7 } }
|
|
@keyframes gradShift { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } }
|
|
@keyframes pulse-soft { 0% { transform:scale(1); opacity:.6 } 100% { transform:scale(1.8); opacity:0 } }
|
|
@keyframes spin-slow { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
|
|
|
|
.rv { opacity:0; transform:translateY(36px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
|
|
.rv.vis { opacity:1; transform:translateY(0); }
|
|
.rv-d1 { transition-delay:.1s } .rv-d2 { transition-delay:.2s }
|
|
.rv-d3 { transition-delay:.3s } .rv-d4 { transition-delay:.4s }
|
|
|
|
.rv-scale { opacity:0; transform:scale(.94); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
|
|
.rv-scale.vis { opacity:1; transform:scale(1); }
|
|
|
|
/* ==========================================================================
|
|
LAYOUT
|
|
========================================================================== */
|
|
|
|
.wrap { max-width:1140px; margin:0 auto; }
|
|
.wrap-sm { max-width:780px; margin:0 auto; }
|
|
.wrap-xs { max-width:600px; margin:0 auto; }
|
|
.sec { padding:120px 48px; position:relative; }
|
|
.centered { text-align:center; }
|
|
|
|
.sec-label {
|
|
display:inline-flex; align-items:center; gap:10px;
|
|
font-size:.72rem; font-weight:700; letter-spacing:3px;
|
|
text-transform:uppercase; color:var(--copper); margin-bottom:18px;
|
|
}
|
|
.sec-label::before { content:''; width:24px; height:1.5px; background:var(--copper); }
|
|
|
|
.sec-title {
|
|
font-family:var(--serif); font-weight:600;
|
|
font-size:clamp(2rem, 4vw, 3.2rem);
|
|
line-height:1.2; color:var(--text-dark);
|
|
margin-bottom:18px;
|
|
}
|
|
|
|
.sec-sub {
|
|
font-size:1.08rem; color:var(--text-body); line-height:1.85;
|
|
max-width:560px;
|
|
}
|
|
.centered .sec-sub { margin:0 auto; }
|
|
|
|
/* ==========================================================================
|
|
NAVIGATION
|
|
========================================================================== */
|
|
|
|
.nav {
|
|
position:fixed; top:0; left:0; right:0; z-index:100;
|
|
padding:20px 48px;
|
|
display:flex; align-items:center; justify-content:space-between;
|
|
transition:all .4s cubic-bezier(.22,1,.36,1);
|
|
}
|
|
|
|
.nav.pinned {
|
|
padding:14px 48px;
|
|
background:rgba(253,252,250,0.92);
|
|
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
|
|
border-bottom:1px solid rgba(194,133,74,0.08);
|
|
box-shadow:var(--shadow-sm);
|
|
}
|
|
|
|
.nav-brand { display:flex; align-items:center; gap:11px; }
|
|
|
|
.nav-mark {
|
|
width:36px; height:36px; border-radius:10px;
|
|
background:linear-gradient(135deg, var(--copper), var(--copper-light));
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-size:16px; font-weight:800; color:white; letter-spacing:-1px;
|
|
}
|
|
|
|
.nav-wordmark { font-size:1.25rem; font-weight:700; color:var(--text-dark); letter-spacing:2px; }
|
|
|
|
.nav-menu { display:flex; align-items:center; gap:32px; list-style:none; }
|
|
|
|
.nav-menu a {
|
|
font-size:.85rem; font-weight:500; color:var(--text-body);
|
|
letter-spacing:.3px; transition:color .3s; position:relative;
|
|
}
|
|
.nav-menu a::after {
|
|
content:''; position:absolute; bottom:-4px; left:0;
|
|
width:0; height:1.5px; background:var(--copper); transition:width .3s;
|
|
}
|
|
.nav-menu a:hover { color:var(--copper); }
|
|
.nav-menu a:hover::after { width:100%; }
|
|
|
|
.nav-cta-link {
|
|
padding:9px 22px; border-radius:var(--r-full);
|
|
background:linear-gradient(135deg, var(--copper), var(--copper-light));
|
|
color:white !important; font-weight:600; font-size:.82rem;
|
|
letter-spacing:.4px; transition:all .3s; border:none;
|
|
}
|
|
.nav-cta-link:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(194,133,74,0.25); }
|
|
.nav-cta-link::after { display:none !important; }
|
|
|
|
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:5px; }
|
|
.nav-burger span { width:22px; height:2px; background:var(--text-dark); border-radius:2px; transition:all .3s; }
|
|
|
|
/* ==========================================================================
|
|
HERO — Lumineux, chaleureux, aspirationnel
|
|
On vend la LIBERTÉ de vivre chez soi, pas la peur de tomber.
|
|
========================================================================== */
|
|
|
|
.hero {
|
|
min-height:100vh; display:flex; align-items:center;
|
|
position:relative; overflow:hidden;
|
|
background: linear-gradient(170deg, var(--bg-warm) 0%, var(--bg-cream) 40%, var(--bg-sand) 100%);
|
|
padding:140px 48px 100px;
|
|
}
|
|
|
|
/* Décorations organiques douces */
|
|
.hero-deco { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
|
|
|
|
.hero-circle {
|
|
position:absolute; border-radius:50%;
|
|
}
|
|
.hero-circle--1 {
|
|
width:500px; height:500px;
|
|
background:radial-gradient(circle, rgba(194,133,74,0.06), transparent 70%);
|
|
top:-10%; right:-5%;
|
|
}
|
|
.hero-circle--2 {
|
|
width:360px; height:360px;
|
|
background:radial-gradient(circle, rgba(91,140,111,0.05), transparent 70%);
|
|
bottom:5%; left:-3%;
|
|
}
|
|
.hero-circle--3 {
|
|
width:200px; height:200px;
|
|
background:radial-gradient(circle, rgba(224,123,106,0.04), transparent 70%);
|
|
top:40%; left:60%;
|
|
}
|
|
|
|
/* Petits dots décoratifs */
|
|
.hero-dots {
|
|
position:absolute; inset:0; pointer-events:none;
|
|
}
|
|
.hero-dot {
|
|
position:absolute; width:4px; height:4px; border-radius:50%;
|
|
opacity:.2;
|
|
}
|
|
.hero-dot--copper { background:var(--copper); }
|
|
.hero-dot--sage { background:var(--sage); }
|
|
.hero-dot--coral { background:var(--coral); }
|
|
|
|
.hero-layout {
|
|
display:grid; grid-template-columns:1fr 1fr; gap:80px;
|
|
align-items:center; max-width:1140px; margin:0 auto;
|
|
position:relative; z-index:2;
|
|
}
|
|
|
|
.hero-content { max-width:520px; }
|
|
|
|
.hero-chip {
|
|
display:inline-flex; align-items:center; gap:8px;
|
|
padding:6px 16px; border-radius:var(--r-full);
|
|
background:var(--sage-dim); border:1px solid rgba(91,140,111,0.15);
|
|
font-size:.73rem; font-weight:700; color:var(--sage);
|
|
letter-spacing:1.5px; text-transform:uppercase;
|
|
margin-bottom:28px;
|
|
animation:fadeDown .7s ease both;
|
|
}
|
|
.hero-chip-dot {
|
|
width:6px; height:6px; background:var(--sage); border-radius:50%;
|
|
position:relative;
|
|
}
|
|
.hero-chip-dot::after {
|
|
content:''; position:absolute; inset:-3px; border-radius:50%;
|
|
border:1.5px solid var(--sage); opacity:.4;
|
|
animation:pulse-soft 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family:var(--serif); font-weight:600;
|
|
font-size:clamp(2.8rem, 5.5vw, 4.2rem);
|
|
line-height:1.12; color:var(--text-dark);
|
|
margin-bottom:10px;
|
|
animation:fadeUp .8s ease .15s both;
|
|
}
|
|
.hero-title em {
|
|
color:var(--copper); font-style:normal;
|
|
position:relative;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-family:var(--serif); font-style:italic; font-weight:400;
|
|
font-size:clamp(1.1rem, 2.2vw, 1.4rem);
|
|
color:var(--text-muted); margin-bottom:24px;
|
|
animation:fadeUp .8s ease .3s both;
|
|
}
|
|
|
|
.hero-body {
|
|
font-size:1.05rem; color:var(--text-body); line-height:1.85;
|
|
margin-bottom:40px;
|
|
animation:fadeUp .8s ease .45s both;
|
|
}
|
|
|
|
.hero-actions {
|
|
display:flex; gap:14px; flex-wrap:wrap;
|
|
animation:fadeUp .8s ease .6s both;
|
|
}
|
|
|
|
.btn {
|
|
display:inline-flex; align-items:center; gap:10px;
|
|
padding:15px 34px; border-radius:var(--r-full); border:none;
|
|
font-family:var(--sans); font-weight:600; font-size:.93rem;
|
|
cursor:pointer; transition:all .3s; letter-spacing:.3px;
|
|
text-decoration:none;
|
|
}
|
|
.btn svg { width:17px; height:17px; }
|
|
|
|
.btn-copper {
|
|
background:linear-gradient(135deg, var(--copper), var(--copper-light));
|
|
color:white;
|
|
}
|
|
.btn-copper:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(194,133,74,0.28); }
|
|
|
|
.btn-outline {
|
|
background:transparent; color:var(--text-dark);
|
|
border:1.5px solid rgba(42,37,32,0.12);
|
|
}
|
|
.btn-outline:hover { border-color:rgba(42,37,32,0.25); background:rgba(42,37,32,0.02); transform:translateY(-2px); }
|
|
|
|
/* Carrousel hero — Images modernes */
|
|
.hero-visual {
|
|
position:relative;
|
|
animation:fadeUp 1s ease .4s both;
|
|
}
|
|
|
|
.hero-carousel {
|
|
width:100%; aspect-ratio:4/3;
|
|
background: var(--bg-white);
|
|
border-radius:var(--r-xl);
|
|
position:relative;
|
|
overflow:hidden;
|
|
box-shadow: 0 40px 80px rgba(194,133,74,0.15);
|
|
}
|
|
|
|
.carousel-track {
|
|
position:relative; width:100%; height:100%;
|
|
}
|
|
|
|
.carousel-slide {
|
|
position:absolute; inset:0;
|
|
opacity:0; transition: opacity 1.2s ease-in-out;
|
|
}
|
|
.carousel-slide.active { opacity:1; }
|
|
|
|
.carousel-slide img {
|
|
width:100%; height:100%; object-fit:cover;
|
|
}
|
|
|
|
.carousel-overlay {
|
|
position:absolute; inset:0;
|
|
background: linear-gradient(to top, rgba(42,37,32,0.4), transparent 60%);
|
|
display:flex; align-items:flex-end; padding:32px;
|
|
}
|
|
|
|
.carousel-caption {
|
|
color:white; font-size:1.1rem; font-weight:600;
|
|
text-shadow:0 2px 8px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.carousel-dots {
|
|
position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
|
|
display:flex; gap:8px; z-index:2;
|
|
}
|
|
.carousel-dot {
|
|
width:8px; height:8px; border-radius:50%;
|
|
background:rgba(255,255,255,0.4); cursor:pointer;
|
|
transition:all .3s;
|
|
}
|
|
.carousel-dot.active {
|
|
background:white; width:24px; border-radius:4px;
|
|
}
|
|
|
|
/* Labels autour de l'illustration */
|
|
.hero-float-tag {
|
|
position:absolute; padding:8px 16px;
|
|
background:var(--bg-white);
|
|
border-radius:var(--r-md); box-shadow:var(--shadow-md);
|
|
font-size:.78rem; font-weight:600; color:var(--text-dark);
|
|
display:flex; align-items:center; gap:8px;
|
|
animation: float 5s ease-in-out infinite;
|
|
}
|
|
.hero-float-tag svg { width:16px; height:16px; }
|
|
|
|
.hero-float-tag--1 { top:12%; right:-10%; animation-delay:0s; }
|
|
.hero-float-tag--1 svg { color:var(--sage); }
|
|
.hero-float-tag--2 { bottom:18%; left:-8%; animation-delay:1.5s; }
|
|
.hero-float-tag--2 svg { color:var(--copper); }
|
|
.hero-float-tag--3 { top:55%; right:-16%; animation-delay:3s; }
|
|
.hero-float-tag--3 svg { color:var(--sky); }
|
|
|
|
/* Scroll hint */
|
|
.hero-scroll {
|
|
position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
|
|
display:flex; flex-direction:column; align-items:center; gap:6px;
|
|
animation:fadeIn 1s ease 2s both;
|
|
}
|
|
.hero-scroll span { font-size:.65rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-light); }
|
|
.hero-scroll-bar { width:1px; height:36px; background:linear-gradient(to bottom, var(--copper), transparent); animation:breathe 2.5s ease-in-out infinite; }
|
|
|
|
/* ==========================================================================
|
|
SECTION : LA PROMESSE — Ce que LUCAS rend possible
|
|
Positif, aspirationnel. Pas de stats morbides.
|
|
========================================================================== */
|
|
|
|
.promise { background:var(--bg-white); border-top:1px solid rgba(0,0,0,0.04); }
|
|
|
|
.promise-cards {
|
|
display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
|
|
margin-top:64px;
|
|
}
|
|
|
|
.promise-card {
|
|
background:var(--bg-soft);
|
|
border:1px solid rgba(0,0,0,0.04);
|
|
border-radius:var(--r-lg); padding:36px 28px;
|
|
transition:all .35s ease; text-align:center;
|
|
}
|
|
.promise-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
|
|
|
|
.promise-card-icon {
|
|
width:60px; height:60px; border-radius:16px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
margin:0 auto 20px;
|
|
}
|
|
.promise-card-icon svg { width:28px; height:28px; }
|
|
|
|
.promise-card:nth-child(1) .promise-card-icon { background:var(--copper-dim); color:var(--copper); }
|
|
.promise-card:nth-child(2) .promise-card-icon { background:var(--sage-dim); color:var(--sage); }
|
|
.promise-card:nth-child(3) .promise-card-icon { background:var(--sky-dim); color:var(--sky); }
|
|
|
|
.promise-card-title { font-size:1.08rem; font-weight:700; color:var(--text-dark); margin-bottom:10px; }
|
|
.promise-card-text { font-size:.9rem; color:var(--text-body); line-height:1.7; }
|
|
|
|
/* ==========================================================================
|
|
SECTION : POURQUOI LUCAS — L'approche positive de la dignité
|
|
On célèbre l'autonomie au lieu de dénoncer la surveillance.
|
|
========================================================================== */
|
|
|
|
.why { background:var(--bg-cream); }
|
|
|
|
.why-layout {
|
|
display:grid; grid-template-columns:1fr 1fr; gap:72px;
|
|
align-items:center;
|
|
}
|
|
|
|
.why-visual { position:relative; }
|
|
|
|
.why-cards {
|
|
display:flex; flex-direction:column; gap:16px;
|
|
}
|
|
|
|
.why-voice {
|
|
background:var(--bg-white);
|
|
border-radius:var(--r-lg); padding:24px 28px;
|
|
box-shadow:var(--shadow-card);
|
|
transition:all .4s ease;
|
|
display:flex; align-items:flex-start; gap:16px;
|
|
}
|
|
.why-voice:hover { transform:translateX(6px); box-shadow:var(--shadow-md); }
|
|
|
|
.why-voice-accent {
|
|
width:4px; border-radius:4px; flex-shrink:0; min-height:100%;
|
|
}
|
|
.why-voice:nth-child(1) .why-voice-accent { background:var(--copper); }
|
|
.why-voice:nth-child(2) .why-voice-accent { background:var(--sage); }
|
|
.why-voice:nth-child(3) .why-voice-accent { background:var(--sky); }
|
|
|
|
.why-voice-content { flex:1; }
|
|
.why-voice-quote {
|
|
font-family:var(--serif); font-style:italic; font-weight:500;
|
|
font-size:.98rem; color:var(--text-dark); margin-bottom:6px; line-height:1.45;
|
|
}
|
|
.why-voice-sub { font-size:.82rem; color:var(--text-muted); }
|
|
|
|
.why-content .sec-title { margin-bottom:20px; }
|
|
|
|
.why-text p {
|
|
font-size:1.02rem; color:var(--text-body); line-height:1.9;
|
|
margin-bottom:16px;
|
|
}
|
|
|
|
.why-callout {
|
|
display:flex; align-items:flex-start; gap:16px;
|
|
padding:24px; margin-top:28px;
|
|
background:var(--bg-white); border-radius:var(--r-md);
|
|
border:1px solid rgba(91,140,111,0.15);
|
|
box-shadow:var(--shadow-xs);
|
|
}
|
|
.why-callout svg { width:24px; height:24px; color:var(--sage); flex-shrink:0; margin-top:2px; }
|
|
.why-callout-text { font-size:.93rem; color:var(--text-body); line-height:1.75; }
|
|
.why-callout-text strong { color:var(--sage); font-weight:700; }
|
|
|
|
/* ==========================================================================
|
|
SECTION : COMMENT ÇA MARCHE — Léger, visuel, 4 étapes
|
|
========================================================================== */
|
|
|
|
.how { background:var(--bg-white); border-top:1px solid rgba(0,0,0,0.04); }
|
|
|
|
.steps-grid {
|
|
display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
|
|
margin-top:64px;
|
|
}
|
|
|
|
.step-card {
|
|
text-align:center; position:relative;
|
|
padding:0 12px;
|
|
}
|
|
|
|
/* Connecting line between steps */
|
|
.step-card:not(:last-child)::after {
|
|
content:''; position:absolute; top:32px;
|
|
right:-16px; width:32px; height:2px;
|
|
background:linear-gradient(to right, var(--copper-soft), transparent);
|
|
}
|
|
|
|
.step-num {
|
|
width:64px; height:64px; border-radius:50%;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-size:1.3rem; font-weight:800; margin:0 auto 20px;
|
|
color:white;
|
|
}
|
|
.step-card:nth-child(1) .step-num { background:linear-gradient(135deg, var(--copper), var(--copper-light)); }
|
|
.step-card:nth-child(2) .step-num { background:linear-gradient(135deg, var(--sage), var(--sage-light)); }
|
|
.step-card:nth-child(3) .step-num { background:linear-gradient(135deg, var(--sky), #8BBAD6); }
|
|
.step-card:nth-child(4) .step-num { background:linear-gradient(135deg, var(--coral), #E89A8E); }
|
|
|
|
.step-card-title {
|
|
font-size:1.05rem; font-weight:700; color:var(--text-dark); margin-bottom:8px;
|
|
}
|
|
.step-card-text { font-size:.88rem; color:var(--text-body); line-height:1.65; }
|
|
|
|
.step-card-tag {
|
|
display:inline-block; margin-top:12px; padding:4px 12px;
|
|
background:var(--bg-cream); border-radius:var(--r-full);
|
|
font-size:.73rem; font-weight:600; color:var(--text-muted);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SECTION : POUR QUI — Bénéficiaires (chaleureux)
|
|
========================================================================== */
|
|
|
|
.audience { background:var(--bg-cream); }
|
|
|
|
.audience-grid {
|
|
display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
|
|
max-width:940px; margin:0 auto; margin-top:64px;
|
|
}
|
|
|
|
.audience-card {
|
|
background:var(--bg-white); border-radius:var(--r-xl);
|
|
padding:44px 36px; border:1px solid rgba(0,0,0,0.04);
|
|
box-shadow:var(--shadow-card); transition:all .4s;
|
|
}
|
|
.audience-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
|
|
|
|
.audience-card-icon { margin-bottom:20px; }
|
|
.audience-card-icon svg { width:44px; height:44px; }
|
|
.audience-card:nth-child(1) .audience-card-icon svg { color:var(--copper); }
|
|
.audience-card:nth-child(2) .audience-card-icon svg { color:var(--sage); }
|
|
|
|
.audience-card-title {
|
|
font-family:var(--serif); font-size:1.35rem; font-weight:600;
|
|
color:var(--text-dark); margin-bottom:12px;
|
|
}
|
|
.audience-card-text { font-size:.93rem; color:var(--text-body); line-height:1.85; margin-bottom:22px; }
|
|
|
|
.audience-card-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
|
|
.audience-card-list li {
|
|
display:flex; align-items:center; gap:10px;
|
|
font-size:.87rem; color:var(--text-body);
|
|
}
|
|
.audience-card-list li svg { width:16px; height:16px; flex-shrink:0; }
|
|
.audience-card:nth-child(1) .audience-card-list li svg { color:var(--copper); }
|
|
.audience-card:nth-child(2) .audience-card-list li svg { color:var(--sage); }
|
|
|
|
/* ==========================================================================
|
|
SECTION : CITATION — Moment de respiration
|
|
Chaleureux, lumineux, pas dramatique.
|
|
========================================================================== */
|
|
|
|
.breath {
|
|
background:linear-gradient(170deg, var(--bg-sand) 0%, var(--bg-cream) 100%);
|
|
text-align:center; padding:140px 48px;
|
|
position:relative; overflow:hidden;
|
|
}
|
|
.breath::before {
|
|
content:''; position:absolute; inset:0;
|
|
background:radial-gradient(ellipse at center, rgba(194,133,74,0.04), transparent 60%);
|
|
}
|
|
|
|
.breath-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
|
|
|
|
.breath-quote {
|
|
font-family:var(--serif); font-weight:500;
|
|
font-size:clamp(1.6rem, 3.5vw, 2.4rem);
|
|
line-height:1.5; color:var(--text-dark); margin-bottom:24px;
|
|
}
|
|
.breath-quote em { color:var(--copper); font-style:italic; }
|
|
|
|
.breath-sub {
|
|
font-size:.95rem; color:var(--text-muted); margin-bottom:44px;
|
|
font-style:italic;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SECTION : CONFIANCE TECHNIQUE
|
|
========================================================================== */
|
|
|
|
.trust { background:var(--bg-white); border-top:1px solid rgba(0,0,0,0.04); }
|
|
|
|
.trust-grid {
|
|
display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
|
|
margin-top:64px;
|
|
}
|
|
|
|
.trust-card {
|
|
background:var(--bg-soft); border-radius:var(--r-lg);
|
|
padding:32px 24px; text-align:center;
|
|
border:1px solid rgba(0,0,0,0.03);
|
|
transition:all .3s;
|
|
}
|
|
.trust-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
|
|
|
|
.trust-card-icon { margin-bottom:16px; }
|
|
.trust-card-icon svg { width:28px; height:28px; color:var(--copper); margin:0 auto; }
|
|
|
|
.trust-card-title { font-size:.93rem; font-weight:700; color:var(--text-dark); margin-bottom:8px; }
|
|
.trust-card-desc { font-size:.82rem; color:var(--text-muted); line-height:1.6; }
|
|
|
|
/* ==========================================================================
|
|
SECTION : CHIFFRES — Réencadré positivement
|
|
Au lieu de "12 000 morts" on dit "X seniors vivent libres"
|
|
========================================================================== */
|
|
|
|
.impact { background:var(--bg-cream); }
|
|
|
|
.impact-grid {
|
|
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
|
|
margin-top:64px;
|
|
}
|
|
|
|
.impact-item {
|
|
text-align:center; padding:32px 20px;
|
|
background:var(--bg-white); border-radius:var(--r-lg);
|
|
border:1px solid rgba(0,0,0,0.04);
|
|
box-shadow:var(--shadow-xs);
|
|
}
|
|
|
|
.impact-num {
|
|
font-size:2.6rem; font-weight:800; line-height:1;
|
|
margin-bottom:8px; font-variant-numeric:tabular-nums;
|
|
}
|
|
.impact-item:nth-child(1) .impact-num { color:var(--copper); }
|
|
.impact-item:nth-child(2) .impact-num { color:var(--sage); }
|
|
.impact-item:nth-child(3) .impact-num { color:var(--sky); }
|
|
.impact-item:nth-child(4) .impact-num { color:var(--coral); }
|
|
|
|
.impact-num .impact-suffix { font-size:1.6rem; font-weight:700; }
|
|
.impact-desc { font-size:.87rem; color:var(--text-body); line-height:1.55; }
|
|
|
|
/* ==========================================================================
|
|
CTA FINAL
|
|
========================================================================== */
|
|
|
|
.cta-final {
|
|
background:linear-gradient(170deg, var(--bg-warm) 0%, var(--bg-sand) 100%);
|
|
text-align:center; padding:120px 48px; position:relative;
|
|
}
|
|
.cta-final::before {
|
|
content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
|
|
width:400px; height:400px;
|
|
background:radial-gradient(circle, rgba(194,133,74,0.05), transparent 65%);
|
|
pointer-events:none;
|
|
}
|
|
|
|
.cta-inner { position:relative; z-index:2; max-width:540px; margin:0 auto; }
|
|
|
|
.cta-title {
|
|
font-family:var(--serif); font-size:clamp(1.8rem,3.8vw,2.6rem);
|
|
font-weight:600; color:var(--text-dark); margin-bottom:14px;
|
|
}
|
|
.cta-text { font-size:1.02rem; color:var(--text-body); margin-bottom:36px; line-height:1.85; }
|
|
|
|
.cta-form { display:flex; gap:10px; max-width:460px; margin:0 auto 18px; }
|
|
|
|
.cta-input {
|
|
flex:1; padding:14px 22px; border-radius:var(--r-full);
|
|
background:var(--bg-white); border:1.5px solid rgba(0,0,0,0.08);
|
|
color:var(--text-dark); font-size:.93rem; font-family:var(--sans);
|
|
outline:none; transition:border-color .3s;
|
|
}
|
|
.cta-input::placeholder { color:var(--text-light); }
|
|
.cta-input:focus { border-color:var(--copper); }
|
|
|
|
.cta-submit {
|
|
padding:14px 30px;
|
|
background:linear-gradient(135deg, var(--copper), var(--copper-light));
|
|
color:white; font-weight:700; font-size:.93rem;
|
|
border:none; border-radius:var(--r-full); cursor:pointer;
|
|
transition:all .3s; white-space:nowrap; font-family:var(--sans);
|
|
}
|
|
.cta-submit:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(194,133,74,0.25); }
|
|
|
|
.cta-legal { font-size:.77rem; color:var(--text-light); }
|
|
|
|
/* ==========================================================================
|
|
FOOTER
|
|
========================================================================== */
|
|
|
|
.footer {
|
|
background:var(--bg-warm); border-top:1px solid rgba(0,0,0,0.05);
|
|
padding:56px 48px 28px;
|
|
}
|
|
.footer-inner { max-width:1140px; margin:0 auto; }
|
|
|
|
.footer-top {
|
|
display:flex; justify-content:space-between; align-items:flex-start;
|
|
margin-bottom:40px; gap:36px; flex-wrap:wrap;
|
|
}
|
|
|
|
.footer-brand { max-width:300px; }
|
|
.footer-brand-logo { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
|
|
.footer-brand-desc { font-size:.85rem; color:var(--text-muted); line-height:1.7; }
|
|
|
|
.footer-cols { display:flex; gap:52px; }
|
|
.footer-col h5 {
|
|
font-size:.7rem; font-weight:700; letter-spacing:2px;
|
|
text-transform:uppercase; color:var(--text-body); margin-bottom:12px;
|
|
}
|
|
.footer-col a { display:block; font-size:.84rem; color:var(--text-muted); margin-bottom:8px; transition:color .3s; }
|
|
.footer-col a:hover { color:var(--copper); }
|
|
|
|
.footer-bottom {
|
|
border-top:1px solid rgba(0,0,0,0.05); padding-top:20px;
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
flex-wrap:wrap; gap:14px;
|
|
}
|
|
.footer-copy { font-size:.77rem; color:var(--text-light); }
|
|
.footer-motto { font-size:.77rem; color:var(--text-light); font-style:italic; }
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE
|
|
========================================================================== */
|
|
|
|
@media(max-width:1024px) {
|
|
.hero-layout { grid-template-columns:1fr; gap:48px; text-align:center; }
|
|
.hero-content { max-width:600px; margin:0 auto; }
|
|
.hero-visual { max-width:100%; margin:0 auto; }
|
|
.hero-carousel { aspect-ratio:16/9; }
|
|
.hero-actions { justify-content:center; }
|
|
|
|
.promise-cards { grid-template-columns:1fr 1fr; }
|
|
.why-layout { grid-template-columns:1fr; gap:48px; }
|
|
.steps-grid { grid-template-columns:repeat(2,1fr); gap:40px; }
|
|
.step-card::after { display:none; }
|
|
.trust-grid { grid-template-columns:repeat(2,1fr); }
|
|
.impact-grid { grid-template-columns:repeat(2,1fr); }
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
.sec { padding:80px 24px; }
|
|
.hero { padding:110px 24px 80px; }
|
|
.nav { padding:14px 24px; }
|
|
.nav.pinned { padding:12px 24px; }
|
|
.nav-menu { display:none; }
|
|
.nav-burger { display:flex; }
|
|
.nav-menu.open {
|
|
display:flex; flex-direction:column;
|
|
position:absolute; top:100%; left:0; right:0;
|
|
background:rgba(253,252,250,0.97); backdrop-filter:blur(20px);
|
|
padding:24px; gap:18px;
|
|
border-bottom:1px solid rgba(0,0,0,0.05);
|
|
box-shadow:var(--shadow-md);
|
|
}
|
|
|
|
.promise-cards { grid-template-columns:1fr; }
|
|
.steps-grid { grid-template-columns:1fr; gap:32px; }
|
|
.audience-grid { grid-template-columns:1fr; }
|
|
.trust-grid { grid-template-columns:1fr 1fr; }
|
|
.impact-grid { grid-template-columns:1fr 1fr; }
|
|
|
|
.cta-form { flex-direction:column; }
|
|
.cta-submit { width:100%; }
|
|
|
|
.breath { padding:100px 24px; }
|
|
|
|
.footer-top { flex-direction:column; }
|
|
.footer-cols { gap:28px; }
|
|
.footer-bottom { flex-direction:column; text-align:center; }
|
|
}
|
|
|
|
@media(max-width:480px) {
|
|
.impact-grid { grid-template-columns:1fr; }
|
|
.trust-grid { grid-template-columns:1fr; }
|
|
.hero-actions { flex-direction:column; align-items:stretch; }
|
|
.btn { justify-content:center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- =====================================================================
|
|
NAVIGATION
|
|
===================================================================== -->
|
|
<nav class="nav" id="nav">
|
|
<a href="#" class="nav-brand">
|
|
<div class="nav-mark">L</div>
|
|
<span class="nav-wordmark">LUCAS</span>
|
|
</a>
|
|
<ul class="nav-menu" id="navMenu">
|
|
<li><a href="#promesse">La promesse</a></li>
|
|
<li><a href="#pourquoi">Pourquoi Lucas</a></li>
|
|
<li><a href="#comment">Comment ça marche</a></li>
|
|
<li><a href="#pour-qui">Pour qui</a></li>
|
|
<li><a href="#contact" class="nav-cta-link">Nous contacter</a></li>
|
|
</ul>
|
|
<div class="nav-burger" onclick="document.getElementById('navMenu').classList.toggle('open')">
|
|
<span></span><span></span><span></span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- =====================================================================
|
|
HERO — Lumineux, aspirationnel
|
|
On vend la LIBERTÉ de vivre chez soi, la JOIE de l'autonomie
|
|
===================================================================== -->
|
|
<section class="hero" id="top">
|
|
<div class="hero-deco">
|
|
<div class="hero-circle hero-circle--1"></div>
|
|
<div class="hero-circle hero-circle--2"></div>
|
|
<div class="hero-circle hero-circle--3"></div>
|
|
</div>
|
|
<div class="hero-dots">
|
|
<div class="hero-dot hero-dot--copper" style="top:15%;left:8%"></div>
|
|
<div class="hero-dot hero-dot--sage" style="top:25%;right:12%"></div>
|
|
<div class="hero-dot hero-dot--coral" style="bottom:20%;left:15%"></div>
|
|
<div class="hero-dot hero-dot--copper" style="top:55%;right:8%"></div>
|
|
<div class="hero-dot hero-dot--sage" style="bottom:30%;right:25%"></div>
|
|
</div>
|
|
|
|
<div class="hero-layout">
|
|
<div class="hero-content">
|
|
<div class="hero-chip">
|
|
<span class="hero-chip-dot"></span>
|
|
Sérénité connectée
|
|
</div>
|
|
|
|
<h1 class="hero-title">
|
|
Vivre chez soi.<br><em>Librement.</em>
|
|
</h1>
|
|
<p class="hero-subtitle">Et si vos parents pouvaient rester chez eux en toute sécurité ?</p>
|
|
|
|
<p class="hero-body">
|
|
LUCAS est l'ange gardien invisible de vos proches.
|
|
Une intelligence artificielle bienveillante qui veille sans surveiller,
|
|
qui protège sans envahir, et qui vous alerte uniquement quand c'est nécessaire.
|
|
Eux vivent librement. Vous dormez tranquille.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="#promesse" class="btn btn-copper">
|
|
Découvrir LUCAS
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</a>
|
|
<a href="#comment" class="btn btn-outline">
|
|
Comment ça marche
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="hero-carousel">
|
|
<div class="carousel-track">
|
|
<div class="carousel-slide active">
|
|
<img src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?w=800&q=80" alt="Senior actif à la maison">
|
|
<div class="carousel-overlay">
|
|
<div class="carousel-caption">Vivre chez soi, en toute sérénité</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide">
|
|
<img src="https://images.unsplash.com/photo-1560750588-73207b1ef5b8?w=800&q=80" alt="Senior dans son jardin">
|
|
<div class="carousel-overlay">
|
|
<div class="carousel-caption">Conserver ses habitudes et sa liberté</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide">
|
|
<img src="https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=800&q=80" alt="Famille heureuse ensemble">
|
|
<div class="carousel-overlay">
|
|
<div class="carousel-caption">La tranquillité pour toute la famille</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-slide">
|
|
<img src="https://images.unsplash.com/photo-1593113598332-cd288d649433?w=800&q=80" alt="Intérieur moderne et chaleureux">
|
|
<div class="carousel-overlay">
|
|
<div class="carousel-caption">Protection invisible 24h/24</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-dots">
|
|
<span class="carousel-dot active" data-slide="0"></span>
|
|
<span class="carousel-dot" data-slide="1"></span>
|
|
<span class="carousel-dot" data-slide="2"></span>
|
|
<span class="carousel-dot" data-slide="3"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-scroll">
|
|
<span>Découvrir</span>
|
|
<div class="hero-scroll-bar"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
LA PROMESSE — Ce que LUCAS rend possible (POSITIF)
|
|
===================================================================== -->
|
|
<section class="sec promise" id="promesse">
|
|
<div class="wrap">
|
|
<div class="centered rv">
|
|
<div class="sec-label">La promesse</div>
|
|
<h2 class="sec-title">Trois libérations en une seule solution</h2>
|
|
<p class="sec-sub">
|
|
LUCAS ne se contente pas de détecter les dangers.
|
|
Il offre à chaque famille quelque chose d'inestimable.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="promise-cards">
|
|
<div class="promise-card rv rv-d1">
|
|
<div class="promise-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
</div>
|
|
<h3 class="promise-card-title">La liberté de rester chez soi</h3>
|
|
<p class="promise-card-text">
|
|
Vos parents veulent vieillir dans leur maison, entourés de leurs souvenirs.
|
|
LUCAS leur permet de garder cette autonomie précieuse,
|
|
en toute sécurité.
|
|
</p>
|
|
</div>
|
|
<div class="promise-card rv rv-d2">
|
|
<div class="promise-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
|
|
</div>
|
|
<h3 class="promise-card-title">La sérénité pour les proches</h3>
|
|
<p class="promise-card-text">
|
|
Fini cette angoisse au fond de l'estomac chaque soir.
|
|
LUCAS veille pour vous et vous prévient uniquement si quelque chose
|
|
nécessite votre attention.
|
|
</p>
|
|
</div>
|
|
<div class="promise-card rv rv-d3">
|
|
<div class="promise-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
|
|
</div>
|
|
<h3 class="promise-card-title">La dignité intacte</h3>
|
|
<p class="promise-card-text">
|
|
Pas de caméra qui filme en continu, pas de bracelet à porter.
|
|
Votre parent vit normalement. Il ne se sent ni observé, ni diminué,
|
|
ni dépendant.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
POURQUOI LUCAS — L'approche POSITIVE de la dignité
|
|
On célèbre l'autonomie. On n'accable pas avec la peur.
|
|
===================================================================== -->
|
|
<section class="sec why" id="pourquoi">
|
|
<div class="wrap">
|
|
<div class="why-layout">
|
|
|
|
<div class="why-visual rv">
|
|
<div class="why-cards">
|
|
<div class="why-voice">
|
|
<div class="why-voice-accent"></div>
|
|
<div class="why-voice-content">
|
|
<div class="why-voice-quote">« Je fais mon jardin, je reçois mes amies, je vis ma vie. Et mes enfants sont rassurés. »</div>
|
|
<div class="why-voice-sub">Michèle, 78 ans</div>
|
|
</div>
|
|
</div>
|
|
<div class="why-voice">
|
|
<div class="why-voice-accent"></div>
|
|
<div class="why-voice-content">
|
|
<div class="why-voice-quote">« Maman ne voulait pas de caméra. Avec LUCAS, elle a accepté tout de suite. Elle ne le voit même pas. »</div>
|
|
<div class="why-voice-sub">Nathalie, fille aidante</div>
|
|
</div>
|
|
</div>
|
|
<div class="why-voice">
|
|
<div class="why-voice-accent"></div>
|
|
<div class="why-voice-content">
|
|
<div class="why-voice-quote">« C'est la première fois en trois ans que je pars en week-end sans angoisse. »</div>
|
|
<div class="why-voice-sub">Frédéric, fils aidant</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="why-content rv">
|
|
<div class="sec-label">Pourquoi LUCAS</div>
|
|
<h2 class="sec-title">Parce que vos parents méritent mieux qu'une caméra</h2>
|
|
|
|
<div class="why-text">
|
|
<p>
|
|
Vos parents ont bâti une vie. Élevé des enfants. Traversé des décennies.
|
|
Ils méritent de vivre chez eux avec la même fierté, la même liberté
|
|
qu'ils ont toujours eue.
|
|
</p>
|
|
<p>
|
|
Les caméras de surveillance les font se sentir observés, infantilisés,
|
|
diminués. Les bracelets d'alerte finissent dans un tiroir. Les boutons d'urgence
|
|
ne sont jamais pressés — par fierté, par oubli, ou parce que la chute
|
|
ne laisse pas le temps.
|
|
</p>
|
|
<p>
|
|
LUCAS prend une autre voie : <strong style="color:var(--text-dark)">veiller sans surveiller.</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="why-callout">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
|
|
<div class="why-callout-text">
|
|
<strong>LUCAS ne regarde pas. LUCAS comprend.</strong><br>
|
|
Son IA n'analyse que les situations anormales — une chute,
|
|
un malaise, une immobilité prolongée. Le reste du temps, rien.
|
|
Votre parent vit sa vie. LUCAS est là, invisible, bienveillant, prêt.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
COMMENT ÇA MARCHE — 4 étapes, léger et visuel
|
|
===================================================================== -->
|
|
<section class="sec how" id="comment">
|
|
<div class="wrap">
|
|
<div class="centered rv">
|
|
<div class="sec-label">Comment ça marche</div>
|
|
<h2 class="sec-title">Simple comme bonjour</h2>
|
|
<p class="sec-sub">
|
|
Aucune installation complexe. Aucune action requise de votre parent.
|
|
LUCAS s'installe en quelques minutes et fonctionne tout seul.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="steps-grid">
|
|
<div class="step-card rv rv-d1">
|
|
<div class="step-num">1</div>
|
|
<h3 class="step-card-title">Un capteur discret</h3>
|
|
<p class="step-card-text">Un petit boîtier élégant se fond dans le décor. Il ne ressemble pas à une caméra. Il veille en silence.</p>
|
|
<span class="step-card-tag">10 min d'installation</span>
|
|
</div>
|
|
<div class="step-card rv rv-d2">
|
|
<div class="step-num">2</div>
|
|
<h3 class="step-card-title">L'IA analyse</h3>
|
|
<p class="step-card-text">Deux niveaux d'intelligence artificielle détectent les situations anormales et filtrent les faux positifs.</p>
|
|
<span class="step-card-tag">Double IA embarquée</span>
|
|
</div>
|
|
<div class="step-card rv rv-d3">
|
|
<div class="step-num">3</div>
|
|
<h3 class="step-card-title">L'alerte part</h3>
|
|
<p class="step-card-text">Notification instantanée sur votre smartphone avec le rapport d'analyse et un bouton d'appel aux secours.</p>
|
|
<span class="step-card-tag">En moins de 10 secondes</span>
|
|
</div>
|
|
<div class="step-card rv rv-d4">
|
|
<div class="step-num">4</div>
|
|
<h3 class="step-card-title">Parlez-lui</h3>
|
|
<p class="step-card-text">Grâce à l'intercom, rassurez votre proche instantanément ou évaluez la situation à distance.</p>
|
|
<span class="step-card-tag">Audio en temps réel</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
POUR QUI — Bénéficiaires, ton chaleureux
|
|
===================================================================== -->
|
|
<section class="sec audience" id="pour-qui">
|
|
<div class="wrap">
|
|
<div class="centered rv">
|
|
<div class="sec-label">Pour qui</div>
|
|
<h2 class="sec-title">Eux vivent. Vous respirez.</h2>
|
|
<p class="sec-sub">
|
|
LUCAS crée un lien invisible de sécurité entre deux générations.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="audience-grid">
|
|
<div class="audience-card rv rv-d1">
|
|
<div class="audience-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
</div>
|
|
<h3 class="audience-card-title">Pour vos parents</h3>
|
|
<p class="audience-card-text">
|
|
Ils continuent de vivre exactement comme avant. Leur jardin,
|
|
leurs habitudes, leurs amis à la maison. Rien ne change —
|
|
sauf qu'un ange gardien invisible veille désormais sur eux.
|
|
</p>
|
|
<ul class="audience-card-list">
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Rien à porter, rien à recharger</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Aucune action requise de leur part</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Leur intimité 100% respectée</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Ils restent chez eux, libres et protégés</li>
|
|
</ul>
|
|
</div>
|
|
<div class="audience-card rv rv-d2">
|
|
<div class="audience-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
|
|
</div>
|
|
<h3 class="audience-card-title">Pour vous, les proches</h3>
|
|
<p class="audience-card-text">
|
|
Vous avez votre vie, votre travail, vos enfants.
|
|
LUCAS prend le relais quand vous n'êtes pas là.
|
|
Vous êtes prévenu si besoin — sinon, profitez de votre soirée.
|
|
</p>
|
|
<ul class="audience-card-list">
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Alerte instantanée sur votre téléphone</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Intercom pour parler à votre parent</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Appel aux secours en un geste</li>
|
|
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>Tranquillité d'esprit, enfin</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
CITATION — Moment de respiration, chaleureux
|
|
===================================================================== -->
|
|
<section class="breath">
|
|
<div class="breath-inner rv">
|
|
<p class="breath-quote">
|
|
« On ne peut pas être partout.<br>
|
|
Mais on peut <em>veiller de partout.</em> »
|
|
</p>
|
|
<p class="breath-sub">
|
|
LUCAS est cette présence bienveillante que vous aimeriez offrir à ceux qui comptent.
|
|
</p>
|
|
<a href="#contact" class="btn btn-copper">
|
|
Découvrir LUCAS pour votre famille
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
CHIFFRES — Encadrés positivement
|
|
On vend l'espoir, pas la peur
|
|
===================================================================== -->
|
|
<section class="sec impact">
|
|
<div class="wrap">
|
|
<div class="centered rv">
|
|
<div class="sec-label">L'impact</div>
|
|
<h2 class="sec-title">LUCAS en quelques chiffres</h2>
|
|
<p class="sec-sub">
|
|
Chaque chiffre représente une famille qui dort mieux, un parent qui vit libre.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="impact-grid">
|
|
<div class="impact-item rv rv-d1">
|
|
<div class="impact-num"><<span data-count="10">0</span><span class="impact-suffix">s</span></div>
|
|
<div class="impact-desc">entre la détection et l'alerte sur votre téléphone</div>
|
|
</div>
|
|
<div class="impact-item rv rv-d2">
|
|
<div class="impact-num"><span data-count="24">0</span><span class="impact-suffix">h/24</span></div>
|
|
<div class="impact-desc">de veille continue, silencieuse et bienveillante</div>
|
|
</div>
|
|
<div class="impact-item rv rv-d3">
|
|
<div class="impact-num"><span data-count="0">0</span></div>
|
|
<div class="impact-desc">caméra qui filme votre parent au quotidien</div>
|
|
</div>
|
|
<div class="impact-item rv rv-d4">
|
|
<div class="impact-num"><span data-count="100">0</span><span class="impact-suffix">%</span></div>
|
|
<div class="impact-desc">de dignité préservée. Zéro compromis.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
CONFIANCE TECHNIQUE
|
|
===================================================================== -->
|
|
<section class="sec trust">
|
|
<div class="wrap">
|
|
<div class="centered rv">
|
|
<div class="sec-label">Technologie</div>
|
|
<h2 class="sec-title">La sécurité derrière la simplicité</h2>
|
|
<p class="sec-sub">
|
|
LUCAS est simple à utiliser. Mais sous le capot, c'est de la technologie de pointe.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="trust-grid">
|
|
<div class="trust-card rv rv-d1">
|
|
<div class="trust-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
</div>
|
|
<h4 class="trust-card-title">Double IA</h4>
|
|
<p class="trust-card-desc">Détection locale instantanée + confirmation par IA cloud pour zéro faux positifs.</p>
|
|
</div>
|
|
<div class="trust-card rv rv-d2">
|
|
<div class="trust-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
|
|
</div>
|
|
<h4 class="trust-card-title">Chiffrement total</h4>
|
|
<p class="trust-card-desc">Données chiffrées de bout en bout. Aucun tiers n'y accède. Jamais.</p>
|
|
</div>
|
|
<div class="trust-card rv rv-d3">
|
|
<div class="trust-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
|
</div>
|
|
<h4 class="trust-card-title">Ultra-rapide</h4>
|
|
<p class="trust-card-desc">Moins de 10 secondes entre la détection et la notification. Chaque seconde compte.</p>
|
|
</div>
|
|
<div class="trust-card rv rv-d4">
|
|
<div class="trust-card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
|
|
</div>
|
|
<h4 class="trust-card-title">Toujours actif</h4>
|
|
<p class="trust-card-desc">Infrastructure cloud redondante. LUCAS veille même quand tout le monde dort.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
CTA FINAL
|
|
===================================================================== -->
|
|
<section class="cta-final" id="contact">
|
|
<div class="cta-inner rv">
|
|
<div class="sec-label" style="justify-content:center">Passez à l'action</div>
|
|
<h2 class="cta-title">Offrez la liberté à vos parents.<br>Offrez-vous la sérénité.</h2>
|
|
<p class="cta-text">
|
|
Recevez une présentation personnalisée de LUCAS et découvrez
|
|
comment votre famille peut en bénéficier.
|
|
</p>
|
|
<form class="cta-form" onsubmit="handleCTA(event)">
|
|
<input type="email" class="cta-input" placeholder="Votre adresse email" required aria-label="Email">
|
|
<button type="submit" class="cta-submit">Nous contacter</button>
|
|
</form>
|
|
<p class="cta-legal">Aucun spam. Vos données sont traitées avec le même respect que celui que LUCAS porte à vos proches.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =====================================================================
|
|
FOOTER
|
|
===================================================================== -->
|
|
<footer class="footer">
|
|
<div class="footer-inner">
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<div class="footer-brand-logo">
|
|
<div class="nav-mark">L</div>
|
|
<span class="nav-wordmark">LUCAS</span>
|
|
</div>
|
|
<p class="footer-brand-desc">
|
|
Logiciel Universel Centralisé d'Alerte Sécurisée.<br>
|
|
Veiller sans surveiller.
|
|
</p>
|
|
</div>
|
|
<div class="footer-cols">
|
|
<div class="footer-col">
|
|
<h5>Produit</h5>
|
|
<a href="#promesse">La promesse</a>
|
|
<a href="#comment">Fonctionnement</a>
|
|
<a href="#pour-qui">Pour qui</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h5>Entreprise</h5>
|
|
<a href="#pourquoi">Notre mission</a>
|
|
<a href="#contact">Contact</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span class="footer-copy">© 2026 LUCAS — Unigest. Tous droits réservés.</span>
|
|
<span class="footer-motto">Vivre chez soi. Librement.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- =====================================================================
|
|
SCRIPTS
|
|
===================================================================== -->
|
|
<script>
|
|
(function(){
|
|
'use strict';
|
|
|
|
// Nav scroll
|
|
var nav = document.getElementById('nav');
|
|
window.addEventListener('scroll', function(){
|
|
nav.classList.toggle('pinned', window.scrollY > 50);
|
|
}, {passive:true});
|
|
|
|
// Mobile menu
|
|
document.querySelectorAll('.nav-menu a').forEach(function(a){
|
|
a.addEventListener('click', function(){ document.getElementById('navMenu').classList.remove('open'); });
|
|
});
|
|
|
|
// Scroll Reveal
|
|
var rvEls = document.querySelectorAll('.rv, .rv-scale');
|
|
var rvObs = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){ if(e.isIntersecting) e.target.classList.add('vis'); });
|
|
}, {threshold:0.08, rootMargin:'0px 0px -40px 0px'});
|
|
rvEls.forEach(function(el){ rvObs.observe(el); });
|
|
|
|
// Counter animation
|
|
var counters = document.querySelectorAll('[data-count]');
|
|
var countObs = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(entry){
|
|
if(!entry.isIntersecting) return;
|
|
var el = entry.target;
|
|
var target = parseInt(el.dataset.count, 10);
|
|
if(target === 0) { el.textContent = '0'; countObs.unobserve(el); return; }
|
|
var duration = 1800;
|
|
var start = performance.now();
|
|
function tick(now){
|
|
var p = Math.min((now - start) / duration, 1);
|
|
var ease = p === 1 ? 1 : 1 - Math.pow(2, -10 * p);
|
|
el.textContent = Math.round(ease * target).toLocaleString('fr-FR');
|
|
if(p < 1) requestAnimationFrame(tick);
|
|
}
|
|
requestAnimationFrame(tick);
|
|
countObs.unobserve(el);
|
|
});
|
|
}, {threshold:0.5});
|
|
counters.forEach(function(el){ countObs.observe(el); });
|
|
|
|
// Smooth scroll
|
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor){
|
|
anchor.addEventListener('click', function(e){
|
|
e.preventDefault();
|
|
var t = document.querySelector(this.getAttribute('href'));
|
|
if(t){
|
|
var y = t.getBoundingClientRect().top + window.scrollY - 80;
|
|
window.scrollTo({top:y, behavior:'smooth'});
|
|
}
|
|
});
|
|
});
|
|
|
|
// CTA form
|
|
window.handleCTA = function(e){
|
|
e.preventDefault();
|
|
var input = e.target.querySelector('input');
|
|
var btn = e.target.querySelector('button');
|
|
var orig = btn.textContent;
|
|
btn.textContent = 'Merci !';
|
|
btn.style.background = 'linear-gradient(135deg, #5B8C6F, #7AAE8E)';
|
|
input.value = '';
|
|
setTimeout(function(){ btn.textContent = orig; btn.style.background = ''; }, 3000);
|
|
};
|
|
|
|
// Carrousel automatique
|
|
var carouselSlides = document.querySelectorAll('.carousel-slide');
|
|
var carouselDots = document.querySelectorAll('.carousel-dot');
|
|
var currentSlide = 0;
|
|
var slideInterval;
|
|
|
|
function showSlide(n) {
|
|
carouselSlides.forEach(function(slide){ slide.classList.remove('active'); });
|
|
carouselDots.forEach(function(dot){ dot.classList.remove('active'); });
|
|
currentSlide = (n + carouselSlides.length) % carouselSlides.length;
|
|
carouselSlides[currentSlide].classList.add('active');
|
|
carouselDots[currentSlide].classList.add('active');
|
|
}
|
|
|
|
function nextSlide() {
|
|
showSlide(currentSlide + 1);
|
|
}
|
|
|
|
function startCarousel() {
|
|
slideInterval = setInterval(nextSlide, 5000); // Change toutes les 5 secondes
|
|
}
|
|
|
|
function stopCarousel() {
|
|
clearInterval(slideInterval);
|
|
}
|
|
|
|
// Navigation dots
|
|
carouselDots.forEach(function(dot, i){
|
|
dot.addEventListener('click', function(){
|
|
stopCarousel();
|
|
showSlide(i);
|
|
startCarousel();
|
|
});
|
|
});
|
|
|
|
// Pause au survol
|
|
var carousel = document.querySelector('.hero-carousel');
|
|
if(carousel) {
|
|
carousel.addEventListener('mouseenter', stopCarousel);
|
|
carousel.addEventListener('mouseleave', startCarousel);
|
|
}
|
|
|
|
// Démarrage auto
|
|
startCarousel();
|
|
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|