/* * Habits — landing page. * Charte reprise telle quelle de l'application (app-habit / globals.css, thème clair) : * palette « papier chaud » (bone ivoire), encre chaude, accent indigo-violet (marque), * ambre pour les streaks, vert pour la sémantique « réussi ». * Typo grotesque : Space Grotesk (titres/chiffres) + Hanken Grotesk (corps). */ :root { --radius: 0.75rem; --background: #f1ede4; /* papier chaud (bone) */ --foreground: #211c15; /* encre chaude quasi-noire */ --card: #fbf8f2; /* surface surélevée */ --card-foreground: #211c15; --primary: #5a43e4; /* indigo-violet électrique (marque) */ --primary-foreground: #fbf8f2; /* Violet « plein » des surfaces (boutons, badges) : assez profond pour porter * un texte clair. En clair il vaut --primary ; en sombre on l'approfondit. */ --primary-strong: var(--primary); --secondary: #e7e0d2; --secondary-foreground: #211c15; --muted: #e9e2d4; --muted-foreground: #756b5b; /* gris chaud */ --accent: #ece7fb; /* teinte violette légère */ --accent-foreground: #3826a8; --destructive: #d8443d; /* rouge chaud */ --warning: #de8c26; /* ambre (streak) */ --warning-foreground: #2a1a06; --success: #2c9c6a; /* vert sémantique « réussi » */ --success-foreground: #fbf8f2; --border: #ddd5c5; --ring: #5a43e4; /* Ombres douces et chaudes (cards, surfaces flottantes) */ --shadow-soft: 0 1px 2px -1px oklch(0.2 0.03 70 / 0.08), 0 4px 16px -6px oklch(0.2 0.03 70 / 0.1); --shadow-lift: 0 2px 4px -2px oklch(0.2 0.03 70 / 0.1), 0 12px 32px -10px oklch(0.2 0.03 70 / 0.16); --shadow-xl: 0 4px 8px -4px oklch(0.2 0.03 70 / 0.12), 0 30px 60px -18px oklch(0.2 0.03 70 / 0.26); --font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --font-display: "Space Grotesk", var(--font-sans); --max-w: 72rem; } /* * Thème sombre — palette reprise telle quelle de l'app (app-habit / globals.css, * bloc .dark) : charbon chaud, violet plus clair sur fond sombre. La classe est * posée sur (par défaut : on suit le réglage système, voir le script * anti-FOUC en tête de page et la logique de bascule dans script.js). */ .dark { --background: #15120c; /* charbon chaud */ --foreground: #f1ede4; --card: #1f1b13; --card-foreground: #f1ede4; --primary: #8979f2; /* violet plus clair sur fond sombre (accents / texte) */ /* Texte posé SUR du violet : clair, pour rester lisible et cohérent avec la * page sombre (les surfaces violettes utilisent --primary-strong, ci-dessous). */ --primary-foreground: #f7f5ef; --primary-strong: #5a43e4; /* violet profond pour boutons/badges + texte clair */ --secondary: #2a2518; --secondary-foreground: #f1ede4; --muted: #2a2518; --muted-foreground: #a89d89; --accent: #2c2347; --accent-foreground: #d4ccfb; --destructive: #f0635c; --warning: #e8a33a; --warning-foreground: #1a1206; --success: #34b07a; --success-foreground: #0a1a12; --border: #2f291c; --ring: #8979f2; /* Ombres plus profondes (les ombres chaudes claires disparaîtraient au noir). */ --shadow-soft: 0 1px 2px -1px oklch(0 0 0 / 0.4), 0 4px 16px -6px oklch(0 0 0 / 0.5); --shadow-lift: 0 2px 4px -2px oklch(0 0 0 / 0.45), 0 12px 32px -10px oklch(0 0 0 / 0.6); --shadow-xl: 0 4px 8px -4px oklch(0 0 0 / 0.5), 0 30px 60px -18px oklch(0 0 0 / 0.7); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { font-family: var(--font-sans); color: var(--foreground); background-color: var(--background); /* Halo de marque très subtil — identique au body de l'app. */ background-image: radial-gradient( 80rem 40rem at 100% -10%, color-mix(in oklch, var(--primary) 9%, transparent), transparent 60% ), radial-gradient( 60rem 35rem at -10% 0%, color-mix(in oklch, var(--warning) 7%, transparent), transparent 55% ); background-attachment: fixed; background-repeat: no-repeat; /* Transition douce lors du basculement clair/sombre. */ transition: background-color 0.3s ease, color 0.3s ease; font-feature-settings: "cv11", "ss01"; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; } /* ---------- Typographie ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.08; font-weight: 700; text-wrap: balance; } .num-display { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; font-weight: 700; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: clamp(3.5rem, 8vw, 7rem); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } .eyebrow--muted { color: var(--muted-foreground); } .section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); } .section-head h2 { font-size: clamp(1.85rem, 4.5vw, 2.7rem); margin-top: 0.85rem; } .section-head p { margin-top: 1rem; font-size: 1.075rem; color: var(--muted-foreground); } .muted { color: var(--muted-foreground); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; padding: 0.7rem 1.15rem; font-size: 0.95rem; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .btn svg { width: 1.1em; height: 1.1em; } .btn-primary { background: var(--primary-strong); color: var(--primary-foreground); box-shadow: var(--shadow-soft); } .btn-primary:hover { background: color-mix(in oklch, var(--primary-strong), #000 8%); transform: translateY(-1px); box-shadow: var(--shadow-lift); } .btn-outline { background: var(--background); border-color: var(--border); color: var(--foreground); } .btn-outline:hover { background: var(--muted); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--muted); } .btn-lg { padding: 0.9rem 1.5rem; font-size: 1.02rem; border-radius: calc(var(--radius) + 2px); } .btn-block { width: 100%; } /* ---------- Brand mark ---------- */ .brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; } .brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.65rem; background: var(--primary-strong); color: var(--primary-foreground); box-shadow: var(--shadow-soft); flex-shrink: 0; } .brand-mark svg { width: 1.15rem; height: 1.15rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: color-mix(in oklch, var(--background) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 4.25rem; } .nav-links { display: none; align-items: center; gap: 0.35rem; list-style: none; } .nav-links a { padding: 0.5rem 0.8rem; border-radius: 0.6rem; font-weight: 500; color: var(--muted-foreground); transition: background-color 0.2s ease, color 0.2s ease; } .nav-links a:hover { color: var(--foreground); background: var(--muted); } .nav-actions { display: none; align-items: center; gap: 0.6rem; } .nav-toggle { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--card); color: var(--foreground); } /* Regroupe la bascule de thème et le hamburger à droite du header (la bascule * reste ainsi visible sur mobile, sans ouvrir le menu). */ .nav-end { display: flex; align-items: center; gap: 0.5rem; } /* ---------- Bascule de thème (clair / sombre) ---------- */ .theme-toggle { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--card); color: var(--foreground); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { background: var(--muted); } .theme-toggle__icon { width: 1.2rem; height: 1.2rem; } /* L'icône affichée représente le thème vers lequel on basculera : * lune en clair (→ sombre), soleil en sombre (→ clair). */ .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } .mobile-menu { display: none; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--background) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mobile-menu.is-open { display: block; } .mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0 0.5rem; } .mobile-menu a { display: block; padding: 0.75rem 0.5rem; font-weight: 500; border-radius: 0.6rem; } .mobile-menu a:hover { background: var(--muted); } .mobile-menu .mobile-cta { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0 1.25rem; } @media (min-width: 880px) { .nav-links, .nav-actions { display: flex; } .nav-toggle { display: none; } } /* ---------- Hero ---------- */ .hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); } .hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } @media (min-width: 980px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } /* Desktop : hero sur deux colonnes, copy alignée à gauche. */ .hero-points { justify-content: flex-start; } } .hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-top: 1.1rem; } .hero h1 .accent { color: var(--primary); } .hero-sub { margin-top: 1.35rem; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted-foreground); max-width: 34rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; } .hero-proof { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.75rem; font-size: 0.92rem; color: var(--muted-foreground); } .avatars { display: flex; } .avatars span { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--background); margin-left: -0.55rem; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: var(--primary-foreground); } .avatars span:first-child { margin-left: 0; } .stars { color: var(--warning); letter-spacing: 0.05em; } .hero-points { list-style: none; display: flex; flex-wrap: wrap; /* Mobile : hero empilé sur une colonne → on centre les arguments. */ justify-content: center; gap: 0.6rem 1.4rem; margin-top: 1.75rem; } .hero-points li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--muted-foreground); } .hero-points svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--success); } /* ---------- Phone mockup ---------- */ .hero-visual { position: relative; display: flex; justify-content: center; } .phone { position: relative; width: min(340px, 82vw); background: var(--card); border: 1px solid var(--border); border-radius: 2.4rem; padding: 0.7rem; box-shadow: var(--shadow-xl); } .phone-notch { position: absolute; top: 1.05rem; left: 50%; transform: translateX(-50%); width: 5rem; height: 0.4rem; background: var(--border); border-radius: 999px; z-index: 2; } .phone-screen { background: var(--background); border-radius: 1.8rem; padding: 1.5rem 1.1rem 1.1rem; overflow: hidden; } .app-greeting .day { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); } .app-greeting h3 { font-size: 1.45rem; margin-top: 0.15rem; } .app-greeting .sub { margin-top: 0.2rem; font-size: 0.82rem; color: var(--muted-foreground); } .app-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.1rem; padding: 0.95rem 1rem; box-shadow: var(--shadow-soft); margin-top: 0.85rem; } /* Libellé de section commun aux cartes (« STREAK », « CETTE SEMAINE »). */ .card-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } /* ----- Carte Streak (StreakCard) ----- */ .streak-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; overflow: hidden; } /* Lueur ambrée d'arrière-plan, comme dans l'app. */ .streak-card::before { content: ""; position: absolute; top: -2.5rem; right: -2rem; width: 9rem; height: 9rem; border-radius: 50%; background: color-mix(in oklch, var(--warning) 16%, transparent); filter: blur(28px); pointer-events: none; } .streak-main { position: relative; display: flex; align-items: center; gap: 0.8rem; } .streak-flame { width: 2.85rem; height: 2.85rem; display: grid; place-items: center; border-radius: 0.9rem; flex-shrink: 0; background: color-mix(in oklch, var(--warning) 15%, transparent); color: var(--warning); } .streak-flame svg { width: 1.5rem; height: 1.5rem; } .streak-body { display: flex; flex-direction: column; gap: 0.1rem; } .streak-value { display: flex; align-items: baseline; gap: 0.35rem; } .streak-value .num-display { font-size: 2.4rem; font-weight: 700; line-height: 1; } .streak-value .unit { font-size: 0.8rem; color: var(--muted-foreground); } .streak-record { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; text-align: right; font-size: 0.74rem; color: var(--muted-foreground); line-height: 1.3; } .streak-record strong { color: var(--foreground); font-weight: 600; } /* ----- Carte « Cette semaine » (WeeklyProgressCard) ----- */ .progress-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; } .progress-label { display: flex; align-items: center; gap: 0.55rem; } .progress-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.6rem; flex-shrink: 0; background: var(--accent); color: var(--accent-foreground); } .progress-icon svg { width: 1.1rem; height: 1.1rem; } .progress-head .pct { display: flex; align-items: baseline; color: var(--foreground); } .progress-head .pct .num-display { font-size: 1.7rem; font-weight: 700; line-height: 1; } .progress-head .pct .pct-sign { font-size: 0.95rem; font-weight: 500; color: var(--muted-foreground); } .progress-track { margin-top: 0.85rem; height: 0.55rem; border-radius: 999px; background: var(--muted); overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; background: var(--primary); } .progress-meta { margin-top: 0.7rem; font-size: 0.78rem; color: var(--muted-foreground); } /* ----- Carte « Suivi du jour » (TodayCta) ----- */ .today-cta { display: flex; flex-direction: column; gap: 0.85rem; } .today-status { display: flex; align-items: center; gap: 0.65rem; } .today-status .status-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 0.7rem; flex-shrink: 0; background: color-mix(in oklch, var(--success) 15%, transparent); color: var(--success); } .today-status p { font-size: 0.88rem; font-weight: 500; } .today-actions { display: flex; gap: 0.5rem; } .mini-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 0.5rem; border-radius: 0.65rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .mini-btn--primary { flex: 2; background: var(--primary-strong); color: var(--primary-foreground); } .mini-btn--outline { border: 1px solid var(--border); color: var(--foreground); } /* Floating badges around the phone */ .float-badge { position: absolute; /* Au-dessus du téléphone : sans ça, le badge placé avant `.phone` dans le DOM (le rappel) passe derrière le mockup et son ombre. */ z-index: 3; display: flex; align-items: center; gap: 0.55rem; background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.55rem 0.85rem; box-shadow: var(--shadow-lift); font-size: 0.82rem; font-weight: 600; } .float-badge .dot { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.95rem; } .float-badge--reminder { /* Straddle le coin haut-gauche du téléphone (zone vide au-dessus du contenu) plutôt que de recouvrir la salutation. */ top: -1.1rem; left: -2.5rem; animation: floaty 5s ease-in-out infinite; } .float-badge--done { bottom: 14%; right: -1.25rem; animation: floaty 5.5s ease-in-out infinite 0.6s; } .float-badge--reminder .dot { background: var(--accent); } .float-badge--done .dot { background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); } @media (max-width: 540px) { .float-badge--reminder { left: -0.25rem; } .float-badge--done { right: -0.25rem; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ---------- Logos / trust strip ---------- */ .trust { border-block: 1px solid var(--border); background: color-mix(in oklch, var(--card) 50%, transparent); } .trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 5vw, 3.5rem); padding-block: 1.75rem; text-align: center; } .trust-item .num-display { font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--primary); display: block; } .trust-item span { font-size: 0.85rem; color: var(--muted-foreground); } /* ---------- Feature cards ---------- */ .cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.6rem; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .feature-icon { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 0.85rem; background: var(--accent); color: var(--accent-foreground); margin-bottom: 1.1rem; } .feature-icon svg { width: 1.4rem; height: 1.4rem; } .feature-icon--amber { background: color-mix(in oklch, var(--warning) 18%, transparent); color: var(--warning-foreground); } .feature-icon--green { background: color-mix(in oklch, var(--success) 15%, transparent); color: var(--success); } /* En thème sombre, l'encre ambrée (--warning-foreground, quasi noire) devient * illisible sur le fond ambré : on utilise l'ambre lui-même comme le fait la * carte verte avec --success. */ .dark .feature-icon--amber { background: color-mix(in oklch, var(--warning) 22%, transparent); color: var(--warning); } .feature-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .feature-card p { color: var(--muted-foreground); font-size: 0.95rem; } /* ---------- How it works ---------- */ .steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; } .step { position: relative; padding: 1.75rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; box-shadow: var(--shadow-soft); } .step-num { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--primary-strong); color: var(--primary-foreground); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 1.1rem; } .step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .step p { color: var(--muted-foreground); font-size: 0.95rem; } /* ---------- Split feature sections ---------- */ .split { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse .split-visual { order: -1; } } .split + .split { margin-top: clamp(3.5rem, 7vw, 6rem); } .split h3 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-top: 0.85rem; } .split p { margin-top: 1rem; color: var(--muted-foreground); font-size: 1.05rem; } .split-list { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .split-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.98rem; } .split-list .tick { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); } .split-list .tick svg { width: 0.9rem; height: 0.9rem; } .split-visual { display: flex; justify-content: center; } .mock-panel { width: 100%; max-width: 26rem; background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 1.5rem; box-shadow: var(--shadow-lift); } .mock-panel .panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 1.1rem; display: flex; align-items: center; justify-content: space-between; } /* Swipe demo — pile de cartes interactive (souris + tactile) */ .swipe-deck { position: relative; height: 13.5rem; touch-action: pan-y; /* on gère l'horizontal nous-mêmes, le vertical scrolle */ user-select: none; -webkit-user-select: none; } .swipe-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 1.1rem; padding: 1.4rem 1.25rem; background: var(--card); text-align: center; box-shadow: var(--shadow-soft); cursor: grab; transform-origin: center bottom; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; will-change: transform; } .swipe-card.is-dragging { transition: none; cursor: grabbing; } .swipe-card.is-gone { pointer-events: none; } /* Bord coloré selon le sens du swipe en cours. */ .swipe-card.tint-yes { border-color: var(--success); } .swipe-card.tint-no { border-color: var(--destructive); } .swipe-card .emoji { font-size: 2.4rem; } .swipe-card h4 { font-size: 1.3rem; margin-top: 0.6rem; } .swipe-card .meta { color: var(--muted-foreground); font-size: 0.9rem; margin-top: 0.25rem; } .swipe-hint { margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted-foreground); } /* Tampons « Fait » / « Pas fait » qui apparaissent pendant le drag. */ .swipe-stamp { position: absolute; top: 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 2px solid currentColor; border-radius: 0.5rem; opacity: 0; transition: opacity 0.12s ease; pointer-events: none; } .stamp-yes { left: 0.9rem; color: var(--success); transform: rotate(-12deg); } .stamp-no { right: 0.9rem; color: var(--destructive); transform: rotate(12deg); } /* Écran de fin. */ .swipe-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; border: 1px solid var(--border); border-radius: 1.1rem; background: var(--card); box-shadow: var(--shadow-soft); padding: 1.25rem; } .swipe-done[hidden] { display: none; } .swipe-done .done-emoji { font-size: 2.2rem; } .swipe-done strong { font-family: var(--font-display); font-size: 1.15rem; } .swipe-done .done-recap { font-size: 0.88rem; color: var(--muted-foreground); } .swipe-replay { margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.85rem; color: var(--primary); background: var(--accent); border: none; border-radius: 999px; padding: 0.45rem 0.9rem; } .swipe-replay:hover { background: color-mix(in oklch, var(--accent), var(--primary) 12%); } .swipe-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; } .swipe-btn { flex: 1; font-weight: 600; font-size: 0.85rem; padding: 0.6rem 0.5rem; border-radius: 0.7rem; border: 1px solid var(--border); background: var(--background); transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .swipe-btn:hover { transform: translateY(-1px); } .swipe-btn.no { color: var(--destructive); } .swipe-btn.no:hover { background: color-mix(in oklch, var(--destructive) 10%, transparent); border-color: color-mix(in oklch, var(--destructive) 35%, var(--border)); } .swipe-btn.yes { color: var(--success); } .swipe-btn.yes:hover { background: color-mix(in oklch, var(--success) 12%, transparent); border-color: color-mix(in oklch, var(--success) 35%, var(--border)); } .swipe-btn:disabled { opacity: 0.4; pointer-events: none; } .swipe-dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; } .swipe-dots span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border); transition: width 0.2s ease, background-color 0.2s ease; } .swipe-dots span.active { background: var(--primary); width: 1.3rem; border-radius: 999px; } .swipe-dots span.dot-done { background: var(--success); } @media (prefers-reduced-motion: reduce) { .swipe-card { transition-duration: 0.001ms; } } /* Calendar mock */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; } .cal-grid .dow { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted-foreground); padding-bottom: 0.25rem; } .cal-cell { aspect-ratio: 1; border-radius: 0.55rem; display: grid; place-items: center; font-size: 0.72rem; font-weight: 600; background: var(--muted); color: var(--muted-foreground); } .cal-cell.ok { background: var(--success); color: var(--success-foreground); } .cal-cell.partial { background: var(--warning); color: var(--warning-foreground); } .cal-cell.miss { background: color-mix(in oklch, var(--destructive) 80%, transparent); color: #fff; } .cal-cell.empty { background: transparent; } .cal-legend { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.1rem; font-size: 0.78rem; color: var(--muted-foreground); } .cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; } .cal-legend i { width: 0.85rem; height: 0.85rem; border-radius: 0.25rem; display: inline-block; } /* Reminder / PWA mock */ .notif { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--background); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow-soft); } .notif .brand-mark { width: 2.4rem; height: 2.4rem; } .notif .notif-body strong { display: block; font-size: 0.95rem; } .notif .notif-body p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); } .notif .notif-time { margin-left: auto; font-size: 0.72rem; color: var(--muted-foreground); white-space: nowrap; } .install-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; padding: 0.85rem 1rem; border: 1px dashed var(--border); border-radius: 0.9rem; font-size: 0.88rem; } .install-row .badge-os { margin-left: auto; font-size: 0.72rem; font-weight: 700; color: var(--primary); background: var(--accent); padding: 0.2rem 0.55rem; border-radius: 999px; } /* ---------- Testimonials ---------- */ .quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .quote { background: var(--card); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.6rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 1.1rem; } .quote .stars { font-size: 0.9rem; } .quote blockquote { font-size: 1rem; line-height: 1.55; } .quote-author { display: flex; align-items: center; gap: 0.7rem; margin-top: auto; } .quote-author .avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: var(--primary-foreground); flex-shrink: 0; } .quote-author .name { font-weight: 600; font-size: 0.92rem; } .quote-author .role { font-size: 0.8rem; color: var(--muted-foreground); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; gap: 1.25rem; max-width: 72rem; margin-inline: auto; align-items: stretch; } @media (min-width: 980px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } } .plan { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 1.5rem; padding: 2.25rem; box-shadow: var(--shadow-soft); } .plan--featured { border-color: var(--primary); box-shadow: var(--shadow-lift); background: linear-gradient(var(--card), var(--card)) padding-box, color-mix(in oklch, var(--primary) 6%, var(--card)); } .plan-ribbon { position: absolute; top: 1.4rem; right: 1.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-foreground); background: var(--primary-strong); padding: 0.3rem 0.7rem; border-radius: 999px; box-shadow: var(--shadow-soft); } .plan .tag { /* Dans un conteneur flex-column, align-items:stretch étirerait le pill sur toute la largeur : on le ramène à la largeur de son contenu. */ align-self: flex-start; display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px; } .plan .tag--free { color: var(--success); background: color-mix(in oklch, var(--success) 14%, transparent); } .plan .tag--plus { color: var(--primary); background: color-mix(in oklch, var(--primary) 14%, transparent); } .plan .tag--pro { color: var(--accent-foreground); background: var(--accent); } .plan .plan-name { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; } .plan .price { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; } .plan .price .amount { font-size: 3rem; line-height: 1; } .plan .price .per { color: var(--muted-foreground); font-size: 1rem; font-weight: 500; } .plan .plan-note { margin-top: 0.5rem; font-size: 0.88rem; color: var(--muted-foreground); } .plan ul { list-style: none; margin: 1.6rem 0 2rem; display: flex; flex-direction: column; gap: 0.8rem; text-align: left; } .plan ul li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.96rem; } .plan ul .tick { flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); } .plan--featured ul .tick { background: var(--accent); color: var(--primary); } .plan ul .tick svg { width: 0.9rem; height: 0.9rem; } /* Le CTA est poussé en bas pour aligner les deux cartes. */ .plan .plan-cta { margin-top: auto; } .btn-soon { background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; pointer-events: none; } /* ---------- FAQ ---------- */ .faq { max-width: 44rem; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--border); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; background: transparent; border: none; padding: 1.35rem 0.25rem; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--foreground); } .faq-q .chev { flex-shrink: 0; transition: transform 0.25s ease; color: var(--muted-foreground); } .faq-item.is-open .faq-q .chev { transform: rotate(180deg); color: var(--primary); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .faq-a p { padding: 0 0.25rem 1.35rem; color: var(--muted-foreground); font-size: 0.98rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-foreground); border-radius: 2rem; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; box-shadow: var(--shadow-xl); } .cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); filter: blur(2px); } .cta-band::before { width: 22rem; height: 22rem; top: -10rem; right: -6rem; } .cta-band::after { width: 16rem; height: 16rem; bottom: -9rem; left: -4rem; background: rgba(255, 255, 255, 0.08); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(1.9rem, 5vw, 3rem); } .cta-band p { margin: 1rem auto 0; max-width: 34rem; font-size: 1.1rem; color: color-mix(in oklch, var(--primary-foreground) 88%, transparent); } .cta-band .hero-cta { justify-content: center; } .cta-band .btn-primary { background: var(--primary-foreground); color: var(--primary); } .cta-band .btn-primary:hover { background: #fff; } .cta-band .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--primary-foreground); } .cta-band .btn-outline:hover { background: rgba(255, 255, 255, 0.12); } .cta-note { margin-top: 1.25rem; font-size: 0.85rem; color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); } /* Thème sombre : sans override, le bandeau deviendrait violet clair à texte * noir (--primary clair + --primary-foreground sombre), incohérent avec la page * sombre. On le garde en violet profond avec un texte clair. */ .dark .cta-band { background: color-mix(in oklch, var(--primary), #000 38%); color: var(--foreground); } .dark .cta-band p { color: color-mix(in oklch, var(--foreground) 86%, transparent); } .dark .cta-band .cta-note { color: color-mix(in oklch, var(--foreground) 76%, transparent); } /* Bouton plein : on restaure l'inversion (clair sur violet) cassée par le * flip des variables en sombre. */ .dark .cta-band .btn-primary { background: var(--foreground); color: color-mix(in oklch, var(--primary), #000 38%); } .dark .cta-band .btn-primary:hover { background: #fff; } .dark .cta-band .btn-outline { color: var(--foreground); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: 3rem 2rem; } .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; } .footer-brand { max-width: 18rem; } .footer-brand p { margin-top: 0.9rem; color: var(--muted-foreground); font-size: 0.92rem; } .footer-cols { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4rem); } .footer-col h4 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.9rem; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { color: var(--foreground); font-size: 0.92rem; } .footer-col a:hover { color: var(--primary); } .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--muted-foreground); } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ============================================================ * PAGES LÉGALES (mentions-elementes / confidentialite / conditions) * Mise en page « article » lisible, charte identique au reste du site. * ============================================================ */ .element-page { scroll-padding-top: 5.5rem; /* sous le header sticky (~4.25rem) + air */ } .element { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(3rem, 7vw, 6rem); } .element-head, .element-toc, .element-article { width: 100%; max-width: 46rem; margin-inline: auto; } .element-head .eyebrow { margin-bottom: 0.6rem; } .element-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.85rem); letter-spacing: -0.02em; line-height: 1.05; } .element-head .element-intro { margin-top: 0.9rem; color: var(--muted-foreground); font-size: 1.02rem; line-height: 1.65; } .element-updated { margin-top: 0.75rem; font-size: 0.85rem; color: var(--muted-foreground); } /* Sommaire ancré */ .element-toc { margin-top: 2.25rem; padding: 1.2rem 1.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-soft); } .element-toc h2 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.7rem; } .element-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 0.35rem; } .element-toc li { counter-increment: toc; } .element-toc a { display: flex; gap: 0.6rem; color: var(--foreground); text-decoration: none; font-size: 0.95rem; border-radius: 0.4rem; } .element-toc a::before { content: counter(toc); color: var(--primary); font-family: var(--font-display); font-weight: 600; min-width: 1.1rem; } .element-toc a:hover { color: var(--primary); text-decoration: underline; } /* Corps */ .element-article { margin-top: 2.5rem; } .element-article section { margin-top: 2.5rem; scroll-margin-top: 5.5rem; } .element-article section:first-child { margin-top: 0; } .element-article h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 0.6rem; } .element-article h2 .element-num { color: var(--primary); font-size: 1rem; } .element-article h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: 1.4rem; } .element-article p, .element-article li { color: color-mix(in oklch, var(--foreground) 86%, transparent); line-height: 1.72; } .element-article p { margin-top: 0.85rem; } .element-article ul, .element-article ol.element-list { margin-top: 0.85rem; padding-left: 1.3rem; display: grid; gap: 0.5rem; } .element-article ul { list-style: disc; } .element-article ol.element-list { list-style: decimal; } .element-article a { color: var(--primary); font-weight: 500; } .element-article strong { font-weight: 700; color: var(--foreground); } /* Tableau d'infos (éditeur, hébergeur…) */ .element-defs { margin-top: 1rem; display: grid; gap: 0.5rem 1.25rem; } .element-defs > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem 1.25rem; padding-block: 0.5rem; border-bottom: 1px solid var(--border); } .element-defs dt { font-weight: 600; color: var(--foreground); } .element-defs dd { color: color-mix(in oklch, var(--foreground) 86%, transparent); } @media (max-width: 540px) { .element-defs > div { grid-template-columns: 1fr; gap: 0.15rem; } } /* Marqueur « à compléter » : surligne ce que l'éditeur doit renseigner avant la mise en ligne. Volontairement bien visible. */ .element-todo { background: color-mix(in oklch, var(--warning) 22%, transparent); color: var(--warning-foreground); border-radius: 0.3rem; padding: 0.02em 0.35em; font-style: normal; font-weight: 600; } /* Encart d'aide / renvoi */ .element-callout { margin-top: 2.5rem; padding: 1.1rem 1.3rem; background: var(--accent); color: var(--accent-foreground); border: 1px solid color-mix(in oklch, var(--primary) 22%, var(--border)); border-radius: 0.8rem; font-size: 0.95rem; line-height: 1.6; } .element-callout a { color: var(--accent-foreground); font-weight: 700; }