/* ============================================================
Fédéfote — Landing page (site statique de production)
Tokens de marque + styles. Auto-porté (aucune dépendance au
dossier de la skill). Polices chargées via dans le .
============================================================ */
:root {
/* ===== Lavande / Violet — primaire ===== */
--violet-50: #F6F1FD;
--violet-100: #EDE4FB;
--violet-200: #DCCCF5;
--violet-300: #C3AEEC;
--violet-400: #A98FE3;
--violet-500: #8B71DC;
--violet-600: #6B52B8;
--violet-700: #4A3784;
--violet-800: #342459;
/* ===== Menthe / Sauge — secondaire (confidentialité, local) ===== */
--mint-100: #E2F3EB;
--mint-300: #B3DFCC;
--mint-400: #8FCFB3;
--mint-500: #6BBF9E;
--mint-600: #4FA384;
--mint-700: #3A7D65;
/* ===== Or — accent (Premium, étincelles) ===== */
--gold-100: #FCEFCB;
--gold-300: #F8D77E;
--gold-400: #F2C75C;
--gold-500: #E0AE3C;
--gold-600: #C0902A;
/* ===== Blush ===== */
--blush-100: #FDEEF1;
--blush-300: #FBD7DD;
--blush-500: #F4A9B6;
/* ===== Encre — neutres teintés prune ===== */
--ink-900: #2E2447;
--ink-700: #4A4063;
--ink-500: #6E6585;
--ink-400: #938AA8;
--ink-300: #BCB4CC;
--ink-200: #DED9E8;
/* ===== Surfaces ===== */
--cream: #FBF7F0;
--white: #FFFFFF;
--lav-wash:#F6F1FD;
/* ===== Discord (carte démo MP) ===== */
--discord-blurple: #5865F2;
--discord-bg-1: #1E1F22;
--discord-bg-2: #2B2D31;
--discord-bg-3: #313338;
--discord-text: #DBDEE1;
--discord-muted: #949BA4;
--discord-link: #00A8FC;
--discord-green: #23A55A;
/* ===== Tokens sémantiques ===== */
--brand: var(--violet-500);
--brand-strong: var(--violet-600);
--brand-deep: var(--violet-700);
--accent: var(--gold-400);
--privacy: var(--mint-600);
--bg: var(--lav-wash);
--bg-alt: var(--cream);
--surface: var(--white);
--text: var(--ink-900);
--text-soft: var(--ink-700);
--text-muted: var(--ink-500);
--text-faint: var(--ink-400);
--border: var(--ink-200);
--border-strong: var(--ink-300);
--focus-ring: var(--violet-400);
/* ===== Rayons ===== */
--r-xs: 6px; --r-sm: 10px; --r-md: 16px;
--r-lg: 24px; --r-xl: 32px; --r-pill: 999px;
/* ===== Ombres (teintées violet) ===== */
--shadow-xs: 0 1px 2px rgba(74, 55, 132, 0.08);
--shadow-sm: 0 2px 8px rgba(74, 55, 132, 0.10);
--shadow-md: 0 8px 24px rgba(74, 55, 132, 0.14);
--shadow-lg: 0 18px 48px rgba(74, 55, 132, 0.18);
--shadow-glow: 0 0 0 6px rgba(139, 113, 220, 0.14);
--shadow-gold-glow: 0 6px 24px rgba(242, 199, 92, 0.40);
/* ===== Typographie ===== */
--font-display: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}
/* ============================================================
Base
============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }
.lp { overflow-x: hidden; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }
/* Accessibilité : lien d'évitement + focus visible */
.lp-skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--brand-deep);
padding: 10px 16px; border-radius: var(--r-sm); font-weight: 800; z-index: 100; }
.lp-skip:focus { left: 12px; top: 12px; box-shadow: var(--shadow-md); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }
/* ============================================================
Boutons
============================================================ */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-body); font-weight: 800; font-size: 16px; border: none; cursor: pointer;
border-radius: var(--r-pill); padding: 13px 24px; transition: transform .14s cubic-bezier(.34,1.3,.64,1),
box-shadow .2s, background .2s; white-space: nowrap; }
.lp-btn:active { transform: scale(.97); }
.lp-btn-lg { padding: 16px 30px; font-size: 17px; }
.lp-btn-block { width: 100%; }
.lp-btn-discord { background: var(--discord-blurple); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-discord:hover { background: #4752e0; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lp-btn-ghost { background: rgba(255,255,255,.7); color: var(--brand-strong); box-shadow: var(--shadow-xs);
border: 1.5px solid var(--violet-200); }
.lp-btn-ghost:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lp-btn-mint { background: var(--mint-500); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-mint:hover { background: var(--mint-600); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lp-btn-gold { background: var(--gold-400); color: #5a3d00; box-shadow: var(--shadow-gold-glow); }
.lp-btn-gold:hover { background: var(--gold-300); transform: translateY(-2px); }
/* Bouton « double » : Ajouter Fédéfote à… un serveur / mon compte (#88 retours) */
.lp-install { display: inline-flex; flex-direction: column; gap: 9px; }
.lp-install-center { align-items: center; }
.lp-install-lead { font-family: var(--font-body); font-weight: 800; font-size: 15px;
color: var(--brand-strong); letter-spacing: .01em; }
.lp-install-opts { display: inline-flex; border-radius: var(--r-pill); overflow: hidden;
box-shadow: var(--shadow-md); }
.lp-install-opt { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
background: var(--discord-blurple); color: #fff; font-family: var(--font-body); font-weight: 800;
font-size: 16px; padding: 15px 28px; text-decoration: none; white-space: nowrap;
transition: background .18s, transform .14s cubic-bezier(.34,1.3,.64,1); }
.lp-install-opt:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.lp-install-opt:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.lp-install-opt + .lp-install-opt { border-left: 1.5px solid rgba(255,255,255,.22); }
.lp-install-opt:hover { background: #4752e0; }
.lp-install-opt:active { transform: scale(.97); }
/* La 2ᵉ moitié (mon compte) légèrement nuancée pour distinguer les deux options */
.lp-install-opt-2 { background: #4a55d8; }
.lp-install-opt-2:hover { background: #3e49c8; }
.lp-install-opt svg { opacity: .95; flex: none; }
/* Variante compacte pour le header */
.lp-install-opt-sm { padding: 9px 16px; font-size: 14px; gap: 7px; }
.lp-nav-install { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lp-nav-lead { font-size: 14px; white-space: nowrap; }
/* Header : libellés longs « un serveur / mon compte » (iso autres CTA) sur desktop,
forme compacte « Serveur / Mon compte » en deçà de 1040px (cf. media query). */
.lp-opt-short { display: none; }
/* ============================================================
Nav
============================================================ */
.lp-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 24px;
padding: 14px 40px; background: rgba(246,241,253,.82); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--violet-100); }
.lp-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display);
font-weight: 700; font-size: 22px; color: var(--text); }
.lp-brand-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-xs); }
.lp-nav-links { display: flex; gap: 26px; margin-left: 20px; }
.lp-nav-links a { font-weight: 700; font-size: 15px; color: var(--text-soft); transition: color .15s; }
.lp-nav-links a:hover { color: var(--brand-strong); }
.lp-nav-cta { margin-left: auto; }
/* ============================================================
Hero
============================================================ */
.lp-hero { position: relative; overflow: hidden;
background: linear-gradient(160deg, #8B71DC 0%, #A98FE3 42%, #C9A6E8 78%, #E7D3F2 100%); }
.lp-hero-glow { position: absolute; top: -30%; right: -10%; width: 60%; height: 120%;
background: radial-gradient(circle, rgba(255,255,255,.45), transparent 60%); pointer-events: none; }
.lp-stars { position: absolute; inset: 0; pointer-events: none; }
.lp-stars svg { position: absolute; animation: twinkle 3.5s ease-in-out infinite; }
.lp-stars svg:nth-child(even) { animation-delay: 1.2s; }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.lp-hero-inner { position: relative; max-width: 1160px; margin: 0 auto; display: grid;
grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; padding: 64px 40px 80px; }
.lp-pill-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.78);
color: var(--brand-deep); font-weight: 800; font-size: 13px; padding: 7px 15px; border-radius: var(--r-pill);
box-shadow: var(--shadow-xs); margin-bottom: 20px; }
.lp-hero-title { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.06;
letter-spacing: -.01em; color: #fff; margin: 0 0 20px; text-shadow: 0 2px 20px rgba(74,55,132,.25); }
.lp-grad { color: var(--gold-300); }
.lp-hero-sub { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.94); margin: 0 0 30px;
max-width: 540px; }
.lp-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.lp-hero-cta-note { margin: 0 0 8px; max-width: 540px; font-size: 14px; line-height: 1.5;
color: rgba(255,255,255,.88); }
.lp-hero-cta-note strong { color: #fff; }
.lp-hero-cta-see { margin: 0 0 22px; }
.lp-hero-cta-see a { color: var(--gold-300); font-weight: 800; font-size: 14px; text-decoration: none; }
.lp-hero-cta-see a:hover { text-decoration: underline; }
.lp-hero-trust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #fff;
font-weight: 700; font-size: 14px; }
.lp-hero-trust .lp-dot { opacity: .55; }
.lp-hero-art { display: grid; place-items: center; }
.lp-hero-art img { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 24px 50px rgba(74,55,132,.4));
animation: float 5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* ============================================================
Sections génériques
============================================================ */
.lp-section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.lp-kicker { display: inline-block; font-family: var(--font-body); font-weight: 800; font-size: 13px;
letter-spacing: .08em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 12px; }
.lp-kicker-mint { color: var(--mint-600); }
.lp-h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.12;
letter-spacing: -.01em; color: var(--text); margin: 0 0 14px; }
.lp-section-sub { font-size: 18px; line-height: 1.55; color: var(--text-muted); margin: 0; }
/* ============================================================
Démo (carte MP)
============================================================ */
.lp-demo { padding: 84px 40px; background: var(--cream); }
.lp-demo-card { max-width: 620px; margin: 0 auto; background: var(--discord-bg-3); border-radius: var(--r-lg);
box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid rgba(74,55,132,.1); }
.lp-dm-top { background: var(--discord-bg-2); color: var(--discord-muted); font-size: 13px; font-weight: 700;
padding: 11px 18px; display: flex; align-items: center; gap: 8px; }
.lp-dm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--discord-green); }
.lp-dm-msg { display: flex; gap: 14px; padding: 18px 20px 22px; }
.lp-dm-av { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.lp-dm-body { color: var(--discord-text); font-size: 15px; line-height: 1.5; min-width: 0; }
.lp-dm-body p { margin: 6px 0; color: var(--discord-text); font-size: 15px; line-height: 1.5; }
.lp-dm-body b { color: #fff; }
.lp-dm-body i { color: #b5bac1; }
.lp-dm-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.lp-dm-head b { font-size: 15px; }
.lp-dm-tag { background: var(--discord-blurple); color: #fff; font-size: 10px; font-weight: 700;
padding: 1px 5px; border-radius: 4px; text-transform: uppercase; }
.lp-dm-time { color: var(--discord-muted); font-size: 11px; }
.lp-dm-quote { border-left: 4px solid #4e5058; margin: 6px 0; padding: 3px 0 3px 12px; color: #b5bac1;
border-radius: 0 4px 4px 0; font-style: normal; }
.lp-dm-fixed { border-left-color: var(--mint-500); color: #c8e6d8; }
.lp-dm-foot { color: var(--discord-muted); font-size: 13px; margin-top: 10px; }
.lp-dm-foot code { font-family: var(--font-mono); background: #2b2d31; color: #c9d1d9; padding: 1px 5px;
border-radius: 4px; font-size: 12px; }
/* ---- Démo « live » (boucle CSS, repli statique sans animations) ---- */
.lp-demo-stage { max-width: 620px; margin: 0 auto; }
/* Le message public fautif */
.lp-demo-chan { background: var(--discord-bg-3); border-radius: var(--r-lg); overflow: hidden;
border: 1px solid rgba(74,55,132,.1); box-shadow: var(--shadow-md); }
.lp-chan-hash { color: var(--discord-muted); font-weight: 800; }
.lp-chan-msg { display: flex; gap: 14px; padding: 14px 20px 16px; }
.lp-chan-av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
background: linear-gradient(135deg, var(--violet-400), var(--violet-600)); color: #fff;
font-weight: 800; font-size: 18px; }
.lp-chan-name { color: #fff; }
.lp-chan-text { color: var(--discord-text); }
/* Souligne discrètement les fautes dans le message public */
.lp-chan-text { background-image: linear-gradient(transparent 60%, rgba(231,111,111,.28) 0); }
/* Liaison public → privé : un peu d'air au-dessus/dessous, et un fanion bien visible */
.lp-demo-link { display: flex; justify-content: center; margin: 20px 0; position: relative; }
/* Trait de liaison vertical, au-dessus ET en dessous du fanion */
.lp-demo-link::before, .lp-demo-link::after { content: ""; position: absolute; left: 50%;
width: 2px; height: 14px; background: var(--violet-200); transform: translateX(-50%); }
.lp-demo-link::before { top: -16px; }
.lp-demo-link::after { bottom: -16px; }
.lp-demo-link-pill { font-size: 14.5px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
padding: 9px 20px; border-radius: var(--r-pill); position: relative;
box-shadow: 0 8px 22px -8px rgba(124,92,255,.6); }
/* La carte DM dans la scène n'a plus besoin de sa marge auto */
.lp-demo-stage .lp-demo-card { margin: 0; }
/* Indicateur « écrit… » — positionné en absolu pour qu'il n'affecte JAMAIS la
hauteur de la carte : sinon son apparition/disparition fait varier la taille de
la bulle Discord au début de la boucle et décale toute la page (#88 retours). */
.lp-dm-body { position: relative; }
.lp-dm-typing { display: none; gap: 5px; align-items: center; padding: 8px 2px;
position: absolute; top: 26px; left: 0; }
.lp-dm-typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--discord-muted);
animation: lp-typing 1.2s infinite ease-in-out; }
.lp-dm-typing span:nth-child(2) { animation-delay: .2s; }
.lp-dm-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes lp-typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); } }
/* Lecture animée : la séquence se rejoue en boucle (cycle 12s) */
@media (prefers-reduced-motion: no-preference) {
.lp-demo-stage:hover .lp-demo-link-pill { box-shadow: var(--shadow-sm); }
.lp-dm-typing { display: flex; animation: lp-type-show 12s infinite both; }
.lp-dm-step { animation-duration: 12s; animation-iteration-count: infinite;
animation-fill-mode: both; animation-timing-function: ease-out; }
.lp-dm-step-1 { animation-name: lp-step1; }
.lp-dm-step-2 { animation-name: lp-step2; }
.lp-dm-step-3 { animation-name: lp-step3; }
.lp-dm-step-4 { animation-name: lp-step4; }
}
/* Le bandeau « écrit… » : visible tôt, puis s'efface (hors flux, aucune reflow) */
@keyframes lp-type-show {
0%, 4% { opacity: 0; }
6%, 18% { opacity: 1; }
22%, 100% { opacity: 0; }
}
/* Chaque bloc apparaît à son tour, tient, puis tout se réinitialise */
@keyframes lp-step1 { 0%, 22% { opacity: 0; transform: translateY(8px); }
27%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-step2 { 0%, 38% { opacity: 0; transform: translateY(8px); }
43%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-step3 { 0%, 56% { opacity: 0; transform: translateY(8px); }
61%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-step4 { 0%, 72% { opacity: 0; transform: translateY(8px); }
77%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* ============================================================
Fonctionnalités (3 modes)
============================================================ */
.lp-features { padding: 90px 40px; }
.lp-mode-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.lp-mode-grid-2 { max-width: 760px; grid-template-columns: repeat(2,1fr); }
.lp-mode { background: var(--surface); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-md);
border: 1px solid var(--border); transition: transform .18s cubic-bezier(.34,1.3,.64,1), box-shadow .2s; }
.lp-mode:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lp-mode-gold { border-color: var(--gold-300); box-shadow: var(--shadow-md), var(--shadow-gold-glow); }
.lp-mode-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.lp-mode-badge { font-weight: 800; font-size: 13px; padding: 5px 13px; border-radius: var(--r-pill); }
.lp-badge-mint { background: var(--mint-100); color: var(--mint-700); }
.lp-badge-violet { background: var(--violet-100); color: var(--violet-700); }
.lp-badge-gold { background: var(--gold-100); color: var(--gold-600); }
.lp-mode-price { font-weight: 800; font-size: 13px; color: var(--text-faint); text-transform: uppercase;
letter-spacing: .04em; }
.lp-mode-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text);
margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; }
.lp-mode-tag { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--text-faint); }
.lp-mode-desc { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; }
.lp-mode-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.lp-mode-points li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600;
color: var(--text-soft); }
.lp-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
background: var(--mint-100); color: var(--mint-700); font-size: 12px; font-weight: 900; flex: none; }
.lp-check-gold { background: var(--gold-100); color: var(--gold-600); }
/* ============================================================
Confidentialité
============================================================ */
.lp-privacy { padding: 90px 40px; background: linear-gradient(180deg, var(--mint-100), #EAF6F0); }
.lp-privacy-inner { max-width: 1000px; margin: 0 auto; }
.lp-privacy-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.lp-privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lp-privacy-card { display: flex; gap: 16px; background: rgba(255,255,255,.8); border-radius: var(--r-lg);
padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(79,163,132,.18); }
.lp-privacy-ic { font-size: 28px; flex: none; line-height: 1; }
.lp-privacy-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text);
margin: 0 0 6px; }
.lp-privacy-desc { font-size: 15px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.lp-privacy-foot { text-align: center; margin: 36px auto 0; font-size: 15px; color: var(--mint-700); font-weight: 700; }
.lp-privacy-foot a { color: var(--mint-700); text-decoration: underline; text-underline-offset: 2px;
text-decoration-thickness: 2px; text-decoration-color: var(--mint-400); }
.lp-privacy-foot a:hover { text-decoration-color: var(--mint-700); }
/* ============================================================
Pricing
============================================================ */
.lp-pricing { padding: 90px 40px; }
/* Avant/après : ce que chaque mode apporte sur le même message (#88 / A6) */
.lp-compare-intro { max-width: 860px; margin: 0 auto 1rem; text-align: center; font-size: 1.05rem;
color: var(--text-soft); }
.lp-compare-intro b { color: var(--brand-strong); }
.lp-compare { max-width: 880px; margin: 0 auto 2.6rem; display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }
.lp-compare-card { border-radius: 16px; padding: 1.2rem 1.35rem; }
.lp-compare-free { background: var(--surface); border: 1px solid var(--violet-100); }
.lp-compare-prem { background: linear-gradient(160deg, #fffaf0, var(--surface));
border: 1px solid var(--gold-300); box-shadow: 0 8px 30px -18px rgba(180,140,20,.5); }
.lp-compare-tag { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lp-compare-tag-free { color: var(--mint-600); }
.lp-compare-tag-prem { color: #b07d12; }
.lp-compare-lead { margin: .65rem 0 .55rem; font-size: .9rem; color: var(--text-soft); }
.lp-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-compare-list li { font-size: .9rem; color: var(--text-soft); background: var(--violet-100);
padding: .25rem .6rem; border-radius: var(--r-pill); }
.lp-compare-list li span { text-decoration: line-through; opacity: .7; }
.lp-compare-list li b { color: var(--brand-strong); }
.lp-compare-fixed { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 600; color: var(--brand-strong); }
.lp-compare-note { margin: 0; font-size: .86rem; line-height: 1.45; color: #8a7a4a; }
.lp-price-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
align-items: stretch; }
.lp-price-card { position: relative; background: var(--surface); border-radius: var(--r-xl); padding: 32px;
box-shadow: var(--shadow-md); border: 1px solid var(--border); display: flex; flex-direction: column; }
.lp-price-premium { border: 2px solid var(--gold-300); box-shadow: var(--shadow-lg), var(--shadow-gold-glow);
background: linear-gradient(180deg, #fff, var(--gold-100) 220%); }
.lp-price-ribbon { position: absolute; top: -14px; right: 26px; background: var(--gold-400); color: #5a3d00;
font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.lp-price-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text);
margin-bottom: 10px; }
.lp-price-amt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.lp-price-num { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--text); }
.lp-price-per { font-size: 14px; color: var(--text-faint); font-weight: 700; }
.lp-price-desc { font-size: 15px; color: var(--text-muted); margin: 0 0 20px; }
.lp-price-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column;
gap: 11px; flex: 1; }
.lp-price-feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-soft);
font-weight: 600; }
/* ============================================================
FAQ (accordéon natif , sans JS)
============================================================ */
.lp-faq { padding: 90px 40px; background: var(--cream); }
.lp-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.lp-faq-item { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-xs);
border: 1px solid var(--border); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.lp-faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--violet-200); }
.lp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
cursor: pointer; padding: 20px 22px; font-family: var(--font-body); font-weight: 700; font-size: 17px;
color: var(--text); list-style: none; }
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-chev { font-family: var(--font-display); font-size: 26px; color: var(--brand); flex: none;
width: 28px; text-align: center; line-height: 1; transition: transform .25s ease; }
.lp-faq-chev::before { content: "+"; }
.lp-faq-item[open] .lp-faq-chev { transform: rotate(135deg); }
.lp-faq-a { padding: 0 22px 22px; }
.lp-faq-a p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
/* ============================================================
CTA finale
============================================================ */
.lp-cta { padding: 80px 40px; }
.lp-cta-card { position: relative; overflow: hidden; max-width: 880px; margin: 0 auto; text-align: center;
border-radius: var(--r-xl); padding: 60px 40px;
background: linear-gradient(150deg, #8B71DC, #A98FE3 60%, #C9A6E8); box-shadow: var(--shadow-lg); }
.lp-cta-title { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: #fff;
margin: 0 0 14px; text-shadow: 0 2px 16px rgba(74,55,132,.25); }
.lp-cta-sub { font-size: 18px; color: rgba(255,255,255,.94); margin: 0 0 28px; }
/* ============================================================
Footer
============================================================ */
.lp-footer { background: var(--ink-900); color: #C9C0DC; padding: 60px 40px 28px; }
.lp-footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 2fr; gap: 40px; }
.lp-footer .lp-brand { color: #fff; margin-bottom: 14px; }
.lp-footer-tag { font-size: 15px; color: #C9C0DC; margin: 0 0 10px; }
.lp-footer-pun { font-size: 13px; color: #8E83A8; margin: 0; max-width: 320px; line-height: 1.5; }
.lp-footer-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.lp-footer-col h2 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #fff;
margin: 0 0 14px; }
.lp-footer-col a { display: block; font-size: 14px; color: #C9C0DC; margin-bottom: 10px; transition: color .15s; }
.lp-footer-col a:hover { color: var(--gold-300); }
.lp-footer-bottom { max-width: 1100px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid #3D3460;
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #8E83A8; }
/* ============================================================
Pages légales (confidentialité, CGU/CGV, mentions)
============================================================ */
.lp-legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.lp-legal-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px;
color: var(--brand-strong); margin-bottom: 28px; }
.lp-legal-back:hover { color: var(--brand-deep); }
.lp-legal h1 { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--text);
line-height: 1.12; margin: 0 0 8px; }
.lp-legal .lp-legal-updated { color: var(--text-faint); font-size: 14px; font-weight: 700; margin: 0 0 32px; }
.lp-legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--text);
margin: 38px 0 12px; }
.lp-legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text-soft);
margin: 24px 0 8px; }
.lp-legal p, .lp-legal li { font-size: 16px; line-height: 1.65; color: var(--text-soft); }
.lp-legal ul { padding-left: 22px; }
.lp-legal li { margin-bottom: 8px; }
.lp-legal a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px;
text-decoration-thickness: 2px; text-decoration-color: var(--violet-300); }
.lp-legal a:hover { text-decoration-color: var(--brand-strong); }
.lp-legal code { font-family: var(--font-mono); font-size: .9em; background: var(--violet-100);
color: var(--violet-700); padding: .12em .45em; border-radius: var(--r-xs); }
.lp-legal blockquote { border-left: 4px solid var(--violet-300); margin: 18px 0; padding: 4px 0 4px 18px;
color: var(--text-muted); font-style: italic; }
.lp-note { background: var(--gold-100); border: 1px solid var(--gold-300); border-radius: var(--r-md);
padding: 16px 20px; margin: 24px 0; font-size: 15px; color: #5a3d00; }
.lp-note b { color: #5a3d00; }
/* ============================================================
Responsive
============================================================ */
/* Le libellé « Ajouter Fédéfote à… » du header n'apparaît que sur grand écran :
en deçà, le double-bouton + les liens de nav manquent de place (#88 retours). */
@media (max-width: 1040px) {
.lp-nav-lead { display: none; }
.lp-nav-install .lp-opt-long { display: none; }
.lp-nav-install .lp-opt-short { display: inline; }
}
@media (max-width: 880px) {
.lp-nav-links { display: none; }
.lp-hero-inner { grid-template-columns: 1fr; text-align: center; }
.lp-hero-title { font-size: 40px; }
.lp-hero-sub { margin-left: auto; margin-right: auto; }
.lp-hero-cta, .lp-hero-trust { justify-content: center; }
.lp-hero-art { order: -1; }
.lp-hero-art img { max-width: 220px; }
/* Élargir/centrer le halo : sur viewport étroit son bord gauche tombait
pile au centre, créant une couture verticale dans le dégradé (#57). */
.lp-hero-glow { left: -25%; right: -25%; width: auto; }
.lp-mode-grid, .lp-privacy-grid, .lp-price-grid, .lp-footer-inner, .lp-footer-cols { grid-template-columns: 1fr; }
.lp-h2 { font-size: 30px; }
.lp-legal h1 { font-size: 32px; }
}
@media (max-width: 560px) {
/* Nav : éviter que le CTA chevauche le nom de marque */
.lp-nav { padding: 12px 16px; gap: 12px; }
.lp-brand { font-size: 19px; gap: 8px; }
.lp-brand-img { width: 32px; height: 32px; }
.lp-nav-cta { font-size: 14px; padding: 10px 15px; }
/* Header compact : réduit le double-bouton pour qu'il tienne à côté du logo */
.lp-nav-install .lp-install-opt { padding: 8px 11px; font-size: 12.5px; gap: 5px; }
.lp-nav-install .lp-install-opt svg { width: 15px; height: 15px; }
.lp-hero-inner { padding: 40px 22px 56px; }
.lp-demo, .lp-features, .lp-privacy, .lp-pricing, .lp-faq { padding-left: 22px; padding-right: 22px; }
.lp-cta { padding: 56px 22px; }
.lp-cta-card { padding: 44px 24px; }
.lp-cta-title { font-size: 28px; }
.lp-footer { padding: 48px 22px 24px; }
.lp-footer-bottom { flex-direction: column; gap: 8px; }
}
/* Respect du "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.lp-stars svg, .lp-hero-art img, .lp-faq-chev { animation: none; transition: none; }
}