/* ========================================================= VARIABLES ========================================================= */ :root{ --bg:#0a0b0f; --bg2:#0f1117; --panel-border:rgba(255,255,255,0.06); --text:#f5f7ff; --muted:#c7c9d3; --accent:#7bd5ff; --radius:18px; --max:1240px; --padX: clamp(18px, 2.4vw, 32px); --padY: clamp(20px, 2.6vw, 38px); --gap: clamp(16px, 2.2vw, 26px); } /* ========================================================= RESET / BASE ========================================================= */ *{ box-sizing:border-box; } html, body{ height:100%; scroll-behavior:smooth; } body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* 🌙 HALO BLEU NOCTURNE — on ne touche plus */ background: radial-gradient( ellipse at center, rgba(35, 80, 120, 0.35) 0%, rgba(15, 30, 45, 0.85) 35%, rgba(8, 12, 20, 0.96) 60%, #05070c 100% ); color:var(--text); line-height:1.75; padding-top:64px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: clamp(16px, 1.1vw, 18px); } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration: underline; } img{ max-width:100%; display:block; } /* ========================================================= TOPBAR ========================================================= */ .topbar{ position:fixed; inset:0 0 auto 0; background:rgba(10,11,15,0.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08); z-index:1000; overflow-x:auto; -webkit-overflow-scrolling:touch; } .nav-inner{ max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px var(--padX); min-height:56px; white-space:nowrap; } .brand{ display:flex; align-items:center; gap:.55rem; } .logo{ height:58px; width:auto; filter: drop-shadow(0 6px 18px rgba(123,213,255,0.45)); } .nav-links{ display:flex; gap:10px; } .nav-btn{ display:inline-flex; align-items:center; justify-content:center; color:#eaf6ff; background:rgba(123,213,255,0.10); border:1px solid rgba(123,213,255,0.25); padding:11px 18px; border-radius:999px; font-size:16px; font-weight:600; transition:.15s; white-space:nowrap; } .nav-links, .nav-btn{ flex-shrink:0; } .nav-btn:hover{ background:rgba(123,213,255,0.16); border-color:rgba(123,213,255,0.4); } /* Instagram button */ .ig-btn{ gap:10px; } .ig-ico{ width:18px; height:18px; fill: currentColor; opacity:.95; } /* ========================================================= LAYOUT ========================================================= */ .container{ max-width:var(--max); margin:32px auto 80px; padding:0 var(--padX); display:flex; flex-direction:column; gap:24px; } /* ========================================================= PANELS ========================================================= */ .panel{ background: linear-gradient( 180deg, rgba(14,18,26,0.82), rgba(10,12,18,0.65) ); border:1px solid var(--panel-border); border-radius:var(--radius); padding: var(--padY); } .section-title{ font-size:14px; text-transform:uppercase; letter-spacing:.14em; color:rgba(246,246,247,.6); margin-bottom:14px; } /* ========================================================= TEXTE (MODULES) ========================================================= */ .mono{ font-size: clamp(17px, 1.25vw, 20px); line-height:1.95; color:#e9edf4; text-align:left; white-space: pre-line; padding-top:2px; } .mono br{ display:block; margin-bottom:10px; } .mono ul, .mono ol{ margin: 12px 0; padding-left: 1.2em; } .mono li{ margin: 6px 0; } .mono p{ margin: 10px 0; } /* ========================================================= ✅ À-PROPOS — (optionnel) IMPORTANT: ========================================================= */ .page-about .container{ max-width: 980px; } .page-about .about-photo{ object-fit: cover; object-position: top center; } .page-about .panel{ position:relative; overflow:hidden; background: linear-gradient(180deg, rgba(14,18,26,0.78), rgba(10,12,18,0.62)); border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 22px 60px rgba(0,0,0,0.35); } .page-about .panel::after{ content:""; position:absolute; inset:-60px; background: radial-gradient(circle at 18% 10%, rgba(123,213,255,0.10), transparent 55%); pointer-events:none; } .page-about .panel::before{ content:""; position:absolute; top: 18px; bottom: 18px; left: 14px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, transparent, rgba(123,213,255,0.9), transparent); opacity: .9; pointer-events:none; } .page-about .section-title, .page-about .mono{ padding-left: 18px; } .page-about .section-title{ letter-spacing:.16em; } .page-about .mono{ white-space: normal; max-width: 78ch; color: rgba(233,237,244,0.96); text-align:left; line-height:1.9; text-shadow: 0 1px 0 rgba(0,0,0,0.25); } .page-about .mono br{ display:block; margin: 14px 0; } /* ========================================================= HERO (grid propre + compatible) ========================================================= */ .hero{ background: radial-gradient(circle at 50% 0%, rgba(123,213,255,0.18), rgba(10,12,18,0.85)); border:1px solid rgba(255,255,255,0.08); border-radius:22px; padding: var(--padY); display:flex; flex-direction:column; gap: 28px; } .hero-left, .hero-right{ min-width:0; } .hero-right{ background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; } @media (max-width: 860px){ .hero{ grid-template-columns: 1fr; } } .hero-header{ padding-top:12px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; } .hero-logo{ display:block; margin:0 auto 22px; width:220px; max-width:70vw; height:auto; opacity:1; filter: drop-shadow(0 14px 32px rgba(123,213,255,0.45)); } .hero-kicker{ font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:rgba(199,201,211,0.75); } .hero-title{ font-size:clamp(40px, 3.8vw, 60px); line-height:1.08; margin:10px 0; } .hero-title .accent{ color:var(--accent); } .lead{ margin-top: 14px; margin-bottom: 22px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; letter-spacing: 0.02em; color: rgba(240,245,255,0.9); position: relative; padding-left: 18px; } /* ligne verticale discrète à gauche */ .lead::before{ content:""; position:absolute; left:0; top:0.3em; bottom:0.3em; width:3px; border-radius:999px; background: linear-gradient( 180deg, rgba(123,213,255,0.9), rgba(123,213,255,0.2) ); } .hero-text-block{ max-width: 820px; margin: 18px auto; background: rgba(0,0,0,0.22); border-left: 3px solid rgba(123,213,255,0.6); border-radius:16px; padding:18px 22px; color:#eef2f8; text-align:left; } /* ========================================================= BOUTONS ========================================================= */ .hero-actions{ display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; } .hero-btn{ padding:14px 22px; border-radius:999px; font-weight:700; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:#fff; transition:.15s; } .hero-btn.primary{ background:rgba(123,213,255,0.18); border-color:rgba(123,213,255,0.4); } .hero-btn:hover{ transform:translateY(-1px); } /* ========================================================= PROOFS ========================================================= */ .proofs{ display:grid; gap: var(--gap); } .proof-card{ background:rgba(5,6,10,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:20px; } .proof-title{ font-size:18px; font-weight:800; } .proof-text{ color:#e4e8f0; } /* ========================================================= FIXES (si besoin) ========================================================= */ .page-title, .breadcrumb, .header-title{ display:none !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:560px){ .logo{ height:46px; } .hero-title{ font-size:36px; } .hero-logo{ width:160px; } .page-about .panel::before{ left:12px; } .page-about .section-title, .page-about .mono{ padding-left: 16px; } .page-about .mono{ max-width: 100%; } } /* ========================================================= CHIPS (PROFESSIONS) — FIX macOS EMOJIS ========================================================= */ .audience{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:900px; margin:10px auto 0; } .chip{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); color:#eaf6ff; font-size:15px; line-height:1.2; white-space:nowrap; text-align:center; } .chip:hover{ background:rgba(123,213,255,0.10); border-color:rgba(123,213,255,0.35); } .chip .emoji{ display:inline-flex; align-items:center; justify-content:center; font-size:1.6em; line-height:1; transform: translateY(1px); } /* ========================================================= OPTION "PRO" modules/objectifs ========================================================= */ .module-title{ display:block; margin-top:28px; margin-bottom:12px; font-size: clamp(19px, 1.45vw, 23px); font-weight:850; color:#ffffff; letter-spacing:-0.01em; } .objective{ margin-top:14px; margin-bottom:28px; color:#d6deea; font-style:italic; } .hero-social{ display:none !important; } /* ========================================================= PRICING — OPTIMISATION ========================================================= */ .panel.pricing{ text-align:center; padding: clamp(26px, 3vw, 44px); border:1px solid rgba(123,213,255,0.18); box-shadow: 0 28px 70px rgba(0,0,0,0.45); position:relative; overflow:hidden; } .panel.pricing::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(circle at 50% 30%, rgba(123,213,255,0.12), transparent 60%); pointer-events:none; } .panel.pricing h2{ margin: 0 0 14px; } .panel.pricing .price{ font-size: 0; /* neutralise l'ancien style "texte géant" */ } .panel.pricing .price-img{ width: 240px; height: auto; } .panel.pricing a, .panel.pricing .hero-btn, .panel.pricing button{ border-radius:999px; } .panel a[href*="stripe"], .panel a[href*="checkout"], .panel a[href*="payer"], .panel a[href*="paiement"]{ padding:16px 28px; font-weight:900; border-radius:999px; box-shadow: 0 16px 40px rgba(123,213,255,0.14); } /* ========================================================= BLOC SYNTHÈSE ========================================================= */ .synthese-night{ white-space: normal; margin-top: 8px; padding: 18px 18px 18px 26px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: radial-gradient(circle at 15% 15%, rgba(123,213,255,0.10), transparent 55%), rgba(0,0,0,0.18); box-shadow: 0 18px 50px rgba(0,0,0,0.35); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.75; color: rgba(245,247,255,0.92); position: relative; } .synthese-night .synthese-inner{ max-width: 62ch; } .synthese-night::before{ content:""; position:absolute; left: 10px; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: linear-gradient( 180deg, rgba(123,213,255,0.85), rgba(123,213,255,0.15) ); opacity: 0.9; } .synthese-night .stat{ display:inline; padding: 0; border: 0; background: transparent; color: rgba(123,213,255,0.92); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(123,213,255,0.35); } .synthese-night{ margin: 0 auto; max-width: 820px; /* 👈 le texte respire vers la droite */ padding: 24px 32px 24px 36px; text-align: left; /* lisible */ } .synthese-night p, .synthese-night li{ text-align: justify; /* 👈 équilibre gauche / droite */ text-justify: inter-word; } .night-manifesto{ text-align: center; } .night-manifesto span{ text-align: center; } /* ========================================================= LISTE NIGHTCARE ========================================================= */ .night-list{ list-style:none; padding-left:0; margin: 12px 0 16px; display:grid; gap:8px; } .night-list li{ position:relative; padding-left:26px; font-size: clamp(16px, 1.1vw, 18px); color: rgba(245,247,255,0.92); line-height:1.45; } .night-list li::before{ content:""; position:absolute; left:0; top:0.55em; width:7px; height:7px; border-radius:999px; background: rgba(123,213,255,0.85); box-shadow: 0 0 0 3px rgba(123,213,255,0.12); } .night-list{ max-width: 520px; margin: 14px auto 18px; } /* ========================================================= TITRE IMPACTANT ========================================================= */ .night-manifesto{ margin: 0 0 14px; font-size: clamp(20px, 2.1vw, 30px); font-weight: 900; line-height: 1.12; letter-spacing: -0.03em; color:#ffffff; text-shadow: 0 10px 26px rgba(0,0,0,0.35); } .night-manifesto span{ display:block; margin-top:6px; font-weight: 700; color: rgba(245,247,255,0.78); } /* ========================================================= BOUTON ACHETER ========================================================= */ .btn-acheter{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:900; letter-spacing:.2px; color:#04131d; background: linear-gradient(180deg, rgba(123,213,255,1), rgba(123,213,255,.75)); border:1px solid rgba(123,213,255,.55); box-shadow: 0 18px 50px rgba(123,213,255,0.18); text-decoration:none; transition: transform .12s ease, filter .12s ease; } .btn-acheter:hover{ transform: translateY(-1px); filter: brightness(1.02); } /* ========================================================= HERO IMAGE — NIGHTCARE ========================================================= */ .hero-image{ position: relative; width: 100%; height: min(75vh, 680px); overflow: hidden; border-radius: 22px; margin: 24px auto 48px; border: 1px solid rgba(255,255,255,0.08); } .hero-image-img{ width: 100%; height: 100%; object-fit: contain; /* ✅ jamais coupée */ object-position: center; background: #0a0b0f; /* ✅ bandes propres si besoin */ filter: brightness(0.92); } .hero-image{ position: relative; /* déjà ok */ } .hero-image > .hero-image-overlay{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(5,7,12,0.15), rgba(5,7,12,0.65) ); } .hero-image-text{ position: absolute; bottom: 32px; left: 32px; max-width: 600px; color: #ffffff; } .hero-image-text h1{ font-size: clamp(32px, 4vw, 52px); font-weight: 900; margin: 0 0 8px; } .hero-image-text p{ font-size: clamp(16px, 1.4vw, 20px); color: rgba(240,245,255,0.9); margin: 0; } @media (max-width:560px){ .hero-image{ height: 420px; } .hero-image-text{ left: 18px; right: 18px; bottom: 18px; } } /* ========================================================= FOOTER ========================================================= */ .footer{ text-align:center; padding:40px 20px; color:#9fb3c8; font-size:14px; } .footer-links{ margin-top:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .footer-links a{ color:#7bd5ff; text-decoration:none; transition:opacity 0.2s ease; } .footer-links a:hover{ opacity:0.7; } .sep{ opacity:0.4; }; } /* ========================================================= MODULES GRID + CARDS ========================================================= */ .modules-intro{ margin: 0 0 14px; color: rgba(233,237,244,0.92); } .modules-grid{ display:flex; flex-direction:column; gap: 28px; max-width: 820px; margin: 0 auto; } .module-card{ background: rgba(5,6,10,0.28); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px 26px; } .module-header{ display:flex; align-items:center; gap:12px; margin-bottom: 10px; } .module-header{ font-size: 1.05em; } .module-emoji{ font-size: 1.4em; line-height: 1; } @media (max-width: 860px){ .modules-grid{ grid-template-columns: 1fr; } } /* HERO IMAGE intégrée après le titre */ .hero-image-inline{ margin: 26px auto 22px; max-width: 900px; } .hero-image-inline .hero-image-img{ border-radius: 18px; }