:root { --bg1:#0f1220; --bg2:#181c2f; --bg3:#0c0f1a; --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.08); --text:#e9eef8; --muted:#b8c1d9; --accent-1:#7c5cff; --accent-2:#00d1ff; --accent-3:#ff7a59; } * { box-sizing:border-box } html,body { height:100% } /* ✅ Peint aussi le fond sur pour éviter la bande blanche en bas (Chrome mobile) */ html{ background: radial-gradient(1200px 800px at 10% -10%, #2a3258 0%, transparent 60%), radial-gradient(1000px 600px at 110% 10%, #1b3b57 0%, transparent 55%), radial-gradient(1600px 1000px at 50% 120%, #1a2444 0%, transparent 60%), linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3)); min-height: 100%; } body { margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--text); /* ✅ Hauteur viewport dynamique pour iOS/Chrome (plus de “bande blanche”) */ min-height: 100vh; /* fallback */ min-height: 100svh; /* iOS/Safari */ min-height: 100dvh; /* Chrome/Android */ /* Le fond est déjà sur html → pas besoin ici */ background: transparent; } /* Particules */ .particles::before,.particles::after { content:""; position:fixed; inset:-10%; background: radial-gradient(6px 6px at 20% 30%, rgba(255,255,255,.08) 40%, transparent 42%) repeat, radial-gradient(8px 8px at 60% 70%, rgba(255,255,255,.06) 40%, transparent 42%) repeat, radial-gradient(5px 5px at 80% 20%, rgba(255,255,255,.06) 40%, transparent 42%) repeat; background-size:180px 180px, 240px 240px, 200px 200px; filter: blur(0.2px); animation: drift 40s linear infinite; pointer-events:none; } .particles::after { animation-duration:55s; opacity:.4 } @keyframes drift { to { transform:translate3d(2%, -2%, 0) } } .wrap { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px; } .card { width:min(820px, 92vw); border-radius:24px; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, var(--card), var(--card-2)); box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); padding:clamp(24px, 5vw, 48px); position:relative; overflow:hidden; margin:0 auto; } /* Bordure dégradée */ .card::before { content:""; position:absolute; inset:0; padding:2px; border-radius:24px; background:conic-gradient(from 0deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 10s linear infinite; opacity:.35; pointer-events:none; } @keyframes spin { to { transform:rotate(360deg) } } header { display:flex; align-items:center; gap:14px; margin-bottom:22px } .logo { width:44px; height:44px; border-radius:12px; background: radial-gradient(circle at 30% 30%, #fff 0 8%, transparent 9%) no-repeat, conic-gradient(from 90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1)); position:relative; isolation:isolate; overflow:hidden; box-shadow:inset 0 0 20px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.35); } .logo::after { content:""; position:absolute; inset:4px; border-radius:10px; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); } .brand { font-weight:700; letter-spacing:.3px } .badge { display:inline-block; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); color:var(--muted); font-size:0.78rem; margin-left:auto; text-align:center; line-height:1.2; vertical-align:middle; } h1 { margin: 10px 0 6px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.3; color: var(--text); } /* Texte avec gradient */ .gradient-text { background: linear-gradient(90deg,#fff,#dce8ff 35%,#9bdcff 60%,#ffd2c2 85%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } p.lead { margin:6px 0 18px; color:var(--muted); font-size:clamp(14px, 1.6vw, 18px); } .loader-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap } .ring { width:64px; height:64px; border-radius:50%; background:conic-gradient(from 0deg, var(--accent-2), var(--accent-1), var(--accent-3), var(--accent-2)); -webkit-mask:radial-gradient(circle 28px at 50% 50%, transparent 50%, #000 51%); mask:radial-gradient(circle 28px at 50% 50%, transparent 50%, #000 51%); animation:spin 1.2s linear infinite; box-shadow:0 0 40px rgba(0,209,255,.25); } .progress { position:relative; flex:1 1 260px; height:10px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.25); } .progress::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.18), rgba(255,255,255,0)); transform:translateX(-100%); animation:shimmer 2.4s ease-in-out infinite; } .progress-fill { position:absolute; height:100%; width:62%; background:linear-gradient(90deg, var(--accent-1), var(--accent-2)); border-radius:inherit; filter:saturate(120%); animation:breathe 3.2s ease-in-out infinite; }@keyframes shimmer { 0%{transform:translateX(-100%)} 50%{transform:translateX(0%)} 100%{transform:translateX(100%)} } @keyframes breathe { 0%,100%{filter:saturate(120%)} 50%{filter:saturate(170%)} } .cta { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap } .btn { appearance:none; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); color:var(--text); padding:10px 16px; border-radius:12px; cursor:pointer; text-decoration:none; font-weight:600; letter-spacing:.2px; transition:transform .15s ease, border-color .15s ease, box-shadow .2s ease; } .btn:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.28); box-shadow:0 6px 18px rgba(0,0,0,.25) } .btn.primary { border:0; background:linear-gradient(90deg, var(--accent-1), var(--accent-2)); box-shadow:0 6px 18px rgba(124,92,255,.35); } /* ✅ Harmonise la largeur visuelle des boutons de la CTA */ .cta .btn { flex: 1 1 200px; /* même base de largeur */ text-align: center; /* texte centré */ max-width: 240px; /* évite les boutons trop larges en desktop */ } footer { margin-top:28px; color:var(--muted); font-size:.84rem; opacity:.9 } /* Accessibilité : réduit les animations si demandé */ @media (prefers-reduced-motion: reduce) { .ring,.card::before,.progress::before { animation:none } } /* Mobile */ @media (max-width: 560px) { .card { text-align:center; } header { justify-content:center; gap:10px; } .badge { margin-left:0; } h1, p.lead { text-align:center; } .loader-wrap { flex-direction:column; align-items:center; gap:14px; } .ring { margin:0 auto; } .progress { flex:0 1 auto; width:100%; max-width:320px; margin:0 auto; } .cta { justify-content:center; } .btn { width:100%; max-width:280px; margin:0 auto; } } /* --- Mentions légales --- */ .page-legal { overflow:auto; } /* réactive le scroll */ main.legal { max-width:900px; margin:0 auto; padding:40px 20px; font-size:16px; line-height:1.6; } main.legal h1 { font-size:2rem; margin:0 0 20px; } main.legal h2 { font-size:1.2rem; margin-top:28px; color:var(--muted); } main.legal p { margin:0 0 12px; } main.legal a { color:var(--accent-1); } main.legal .box { background:rgba(255,255,255,.06); padding:18px; border-radius:14px; margin:12px 0; } /* ===== Page Transition (zoom vers le clic, fade, fond immobile) ===== */ :root{ --pt-duration: 560ms; --pt-ease: cubic-bezier(.25,.8,.25,1); --pt-scale-out: 1.12; --pt-scale-in: 0.94; } /* le conteneur du contenu (hors fond) */ #page-shell{ transform-origin: 50% 50%; will-change: transform, opacity, filter; } /* Sortie : tout le contenu zoome vers le point cliqué et s'efface */ .pt-out #page-shell{ transform: scale(var(--pt-scale-out)); opacity: 0; filter: blur(.5px); transition: transform var(--pt-duration) var(--pt-ease), opacity var(--pt-duration) var(--pt-ease), filter 280ms ease; } /* Arrivée : on part léger zoom-in + transparent → normal */ .pt-enter-start #page-shell{ transform: scale(var(--pt-scale-in)); opacity: 0; filter: blur(.4px); } .pt-enter-active #page-shell{ transform: scale(1); opacity: 1; filter: blur(0); transition: transform var(--pt-duration) var(--pt-ease), opacity var(--pt-duration) var(--pt-ease), filter 320ms ease; } /* Accessibilité */ @media (prefers-reduced-motion: reduce){ .pt-out #page-shell, .pt-enter-start #page-shell, .pt-enter-active #page-shell{ transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; } } /* ===== Header Mentions + bouton retour (mobile only) ===== */ .legal-header { display: flex; align-items: center; /* centre verticalement la flèche ET le h1 */ gap: 10px; } /* h1 en flex → centré avec la flèche */ .legal-header h1 { margin: 0; display: flex; align-items: center; /* centre le texte dans sa boîte */ line-height: 1.2; /* garde un peu d'air pour le "g" */ } /* Empêche le "g" d’être coupé */ .legal-header .gradient-text { display: inline-block; padding-bottom: 3px; /* ajoute un peu d’espace sous le texte */ transform: translateY(10px); } /* Bouton flèche */ .back-mobile { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); color: var(--text); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; } .back-mobile:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); } .back-mobile:active { transform: translateY(0); background: rgba(255,255,255,.14); } .back-mobile svg { display: block; width: 1.6em; height: 1.6em; stroke-width: 2.2; } /* Mobile uniquement */ @media (max-width: 560px) { .back-mobile { display: inline-flex; } }